@charset "UTF-8";

/* ==========================================================================
   Modern-Normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize 
   ========================================================================== */
*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}


/* ==========================================================================
   Flickity v2.3.0 | https://flickity.metafizzy.co 
   ========================================================================== */
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}


/* ==========================================================================
   Typography
   ========================================================================== */


/* Typefaces
   ========================================================================== */
@font-face {
    font-family: 'Canela Deck';
    src: local('Canela Deck'), local('CanelaDeck-Thin'), url('Fonts/Canela-Deck/CanelaDeck-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Canela Deck';
    src: local('Canela Deck'), local('CanelaDeck-Light'), url('Fonts/Canela-Deck/CanelaDeck-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNowDisplay';
    src: local('HelveticaNowDisplay-Medium'), url('Fonts/Helvetica_Now_Display/HelveticaNowDisplay-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNowDisplay';
    src: local('HelveticaNowDisplay-Regular'), url('Fonts/Helvetica_Now_Display/HelveticaNowDisplay-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNowDisplay';
    src: local('HelveticaNowDisplay-Light'), url('Fonts/Helvetica_Now_Display/HelveticaNowDisplay-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* Typeface Styling
   ========================================================================== */
ul,
p,
h1,
h2,
h3,
h4,
h5 {
    padding: 0;
    margin: 0;
}

p.strong {
    color: #545454;
}

strong {
    font-weight: 500;
}

h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    font-family: 'Canela Deck', 'Times', 'Times New Roman', serif;
    font-weight: normal;
}

h2 {
    font-family: 'Canela Deck', 'Times', 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 100;
}

h3 {
    font-size: 1rem;
    font-weight: 500;
    color: #545454;
}

.h3Footer {
    color: white;
}

h4 {
    font-size: 2rem;
    font-weight: 400;
}

h5 {
    font-size: 1.5rem;
    font-weight: 500;
}

p {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #545454;
}


/* Global Styles
   ========================================================================== */
* {
    box-sizing: border-box;
}

html {
    clear: both;
    scroll-behavior: smooth;
}

body {
    background-color: white;
    animation-name: fade;
    animation-duration: 1s;
    text-decoration-skip-ink: none;
    transition: .25s linear;
    text-align: left;
    font-family: 'HelveticaNowDisplay', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    overflow: auto;
}

.flex-wrapper {
    margin: 5.5rem 1.5rem 1.5rem 1.5rem;
}

/* Links
   ========================================================================== */
a {
    color: #606060;
    text-decoration: none;
    transition: 0.4s ease;
    text-decoration: underline;
}

article > a{
    text-decoration: none;
    color: black;
}

a:active {
    color: #606060;
}

::selection {
    background: #a9d4ff5e;
    color: #0e1248;
}

::-moz-selection {
    color: #d4d4d4;
    background: #08294a;
}

/* Hover Styling
   ========================================================================== */
a:hover {
    color: black;
}

p > a:hover {
    color: black;
}

.footerP > a:hover {
    color: white;
}

.navLinks a:hover {
    color: black;
}

article {
    opacity: 1;
    transition: .5s ease;
}

article img:hover {
    /*filter: brightness(80%);*/
    opacity: 0.8;
    transition: .25s ease;
}

article img:hover {
    transform: scale(1.05);
    transition: 1s ease;
}

/* Navigation Bar
   ========================================================================== */
nav {
    height: 2.25rem;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 2rem 2.5rem 1.5rem;
    z-index: 5;
    background: white;
    transition: .2s ease;
}

.heroLogo {
    height: 2.75rem;
    width: 100%;
    max-width: 11rem;
    margin-right: auto;
    background-image: url(../Images/Icons/MiltonLightingLogo.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.navBreak {
    height: 1rem;
    text-align: center;
    border-left: thin solid #a8a8a8;
    margin-left: 2rem;
    margin-top: auto;
    margin-bottom: auto;
    display: none;
}

.navLinks {
    display: none;
    list-style: none;
    transition: 0s;
}

.navLinks a {
    text-decoration: none;
    color: #A5A5A5;
}

#active {
    color: black;
    text-decoration: underline;
}

a.menu {
    color: black;
    font-size: 1.5rem;
    z-index: 3;
}

.navLinks {
    margin: 0;
}

.cartIcon {
    width: 1rem;
    margin-right: 0.5rem;
    filter: opacity(40%);
    transition: .2s ease;
    display: none;
}

.cartIcon:hover {
    filter: opacity(100);
    transition: .2s ease;
}

header > a {
    text-decoration: none;
}

/* Mobile Nav
   ========================================================================== */
.hidden-overflow {
    overflow: hidden;
}

.menu {
    display: block;
    cursor: pointer;
    text-align: center;
    width: 1.1rem;
    height: 1rem;
    padding: 2rem;
    position: absolute;
    right: 0;
}


/* Hamburger Menu */
.burger-1,
.burger-2,
.burger-3 {
    display: block;
    position: absolute;
    width: 1.1rem;
    height: 0.1rem;
    background: black;
    transition: .2s ease;
    margin-right: 1.5rem;
    right: 0;
}

.burger-1 {
    margin-top: -0.3rem;
}

.burger-2 {
    margin-top: 0rem;
}

.burger-3 {
    margin-top: 0.34rem;
}


/* Hamburger Menu Animation */
.burger-1.open,
.burger-2.open,
.burger-3.open {
    transition: .2s ease;
    transform-origin: 50% 50%;
}

.burger-1.open {
    top: 2.1rem;
    width: 1.1rem;
    transform: rotate(45deg);
}

.burger-2.open {
    opacity: 0;
}

.burger-3.open {
    top: 1.5rem;
    width: 1.1rem;
    transform: rotate(-45deg);
}

a.menu.open {
    position: fixed;
}


/* Expanded Mobile Nav
   ========================================================================== */
.navLinks {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    position: fixed;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    background: white;
    transition: 0s;
}

.navLinks li {
    font-size: 10vw;
    line-height: 16vw;
}

header {
    margin-bottom: 2rem;
}


/* Index Product Category Styling
   ========================================================================== */
article {
    position: relative;
    overflow: hidden;
    font-size: 0;
    box-shadow: 1rem 1rem 100%;
}

article:last-child {
    margin-bottom: 0;
}

.animateProduct {
    margin-bottom: 2.25rem;
}

.productCategories {
    margin-bottom: 2rem;
}

.productCategories > hr {
    width: 100%;
    grid-column: 1 / span 4;
}

.productCatImg {
    width: 100%;
    background-position: center;
    transition: .9s ease;
}

.productCatTitle {
    display: flex;
}

.productCatTitle {
    padding-top: 1rem;
    width: 100%;
    bottom: 0;
    position: absolute;
    background-color: white;
}

.arrow {
    border-top: 1px solid black;
    width: 3rem;
    margin: auto 0 auto 1rem;
    left: 0;
    transition: 1s ease;
}

.arrowPoint-1,
.arrowPoint-2 {
    position: relative;
    width: .5rem;
    height: 1px;
    background: black;
    transition: .2s ease;
    
}

.arrowPoint-1 {
    top: .6rem;
    left: -.42rem;
    transform: rotate(45deg);
}

.arrowPoint-2 {
    top: 1rem;
    left: -.92rem;
    transform: rotate(-45deg);
}

/*
.productCatTitle:hover > .arrow { 
    width: 50%;
    transition: 1s ease;
}
*/

.leftSectionSpan {
    display: grid;
}

.rightSectionSpan {
    margin-top: 2rem;
}

.headingTopMargin {
    margin-top: 4rem;
}

.bottomSectionSpan {
    margin-top: 0;
}

.leftSectionSpanText {
    margin-bottom: .5rem;
    grid-row: 2 / 2;
}

.rightSectionSpanText {
    margin-top: .5rem;
}

.spanImageContainer img, .spanAboutImageContainer img{
    width: 100%;
}

iframe {
    width: 100%;
    height: 625px;
}

.bottomSectionP {
    margin-bottom: 1rem;
}


/* Carousel Styling
   ========================================================================== */
.flickity-viewport {
height: 32rem;
}

.flickity-page-dots {
    left: 0;
    right: 0;
    bottom: 1rem;
    line-height: 1;
    width: auto;
}

.flickity-page-dots .dot {
    background: white;
}

.carousel-cell  {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.heroImageContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-cell img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.heroTitle{
    margin: auto;
    color: white;
    font-size: 2rem;
    line-height: 2.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 8.5rem;
}

.heroBody {
    margin: auto;
    color: white;
    left: 0;
    right: 0;
    text-align: center;
}

.heroBody > a:hover {
    color: white;
}

.heroButton {
    position: absolute;
    background-color: black;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    z-index: 1;
    font-family: 'HelveticaNowDisplay';
    font-weight: 500;
    left: 0;
    bottom: 0;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 3rem;
    padding: 1.5rem;
    right: 0;;
}

.heroButton:hover {
    background-color: #363636;
    transition: .25s ease;
}

/* Vendor Styling
   ========================================================================== */

.vendorGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    grid-gap: 1.5rem;
    align-items: stretch;
    overflow: hidden;
}

.vendorGrid li {
    list-style: none;
    margin-right: 0;
}

.vendorGrid li:last-child {
    margin-bottom: 0;
}

.vendorImage {
    object-fit: cover;
    /*border-radius: 0.5rem;*/
    width: 100%;
    /*Change height to auto for true size */
    height: 100%;
    */
    /*height: 40rem;*/
}

/* Virtual Tour Styling
   ========================================================================== */
.responsiveMap iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


/* Contact Us Styling
   ========================================================================== */
.contactSection, .contactSectionSpan {
    margin-bottom: 2rem;
}

.contactSection:nth-child(3) {
    margin-bottom: 1rem;
}

.contactImageContainer img {
    width: 100%;
    margin-bottom: 1rem;
}

.sectionHeading, contactUsHeading {
    margin-bottom: 0.5rem;
}

.sectionHeading {
    margin-top: 3rem;
}

.contactTitle {
    margin-top: 0.75rem;
}

.aboutSectionSpanText {
    margin: auto 4rem auto 0;
}

.spanAboutImageContainer {
    grid-row: 1 / 2;
}

iframe {
    width: 100%;
}

/* Index Product Category Styling
   ========================================================================== */
   .returnList > li {
    padding-bottom: .5rem;
    color: #545454;
    line-height: 1.5rem;
   }

   .returnList {
    padding-left: 1rem;
   }

/* Footer Styling
   ========================================================================== */
footer {
    background-color: black;
    color: white;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem;
    font-weight: 300;
    overflow: hidden;
}

.footerHeader {
    width: 18rem;
    margin-bottom: 0.5rem;
}

.footerBreadcrumbLink {
    color: white;
    white-space: pre;
    text-decoration: underline;
}

.footerLink {
    color: white;
    /*margin-right: 1.5rem;*/
    white-space: pre-line;
    text-decoration: underline;
    padding-right: 1rem;
}

.footerBullet {
    margin: auto 0.75rem auto 0.75rem;
}

.footerLink:last-child {
    margin-right: 0;
}

.footerBreadcrumbs {
    margin-bottom: 1.5rem;
}

.footerSocialLinks > h3 {
    margin-bottom: 0.25rem;
}

footer p {
    font-size: 1rem;
    line-height: 2rem;
    color: white;
}


/* Animations
   ========================================================================== */
@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes image-load2 {
    from {
        margin-top: 6rem;
    }

    to {
        margin-top: 0rem;
    }
}

body {
    animation-name: fade;
    animation-duration: 1s;
    transition: .25s linear;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */


/* Tablet Media Query
   ========================================================================== */
@media only screen and (min-width: 760px) {
    
    .flex-wrapper {
        margin: 5.5rem 2em 2rem 2rem;
        transition: margin .25s linear;
        flex-direction: row-reverse;
    }
    
    nav {
        padding-left: 2rem;
    }

    .burger-1,
    .burger-2,
    .burger-3 {
        margin-right: 2rem;
    }

    .navLinks li {
        font-size: 3rem;
        line-height: 6rem;
    }

    .flickity-page-dots {
        left: auto;
        right: 0.5rem;
    }

    .heroTitle{
        font-size: 3rem;
        line-height: 4rem;
    }

    .heroButton {
        padding: 1.5rem 6rem;
        right: auto;
    }

    .productCategories {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2rem;
    }
    
    .contactUsHeading {
        margin: 0;
    }
    
    .contactInfoFlex {
        display: flex;
    }
    
    .contactinfoFlexSeperation {
        margin-right: 1.5rem;
    }
    
    .contactImageContainer {
        margin-bottom: 1rem;
        flex-direction: row-reverse;
    }

    .contactContainer {
        margin-right: 1.5rem;
        width: 100%;
    }

    .contactSectionSpan {
        flex-direction: row-reverse;
    }

    footer {
        padding: 2rem;
        transition: margin .25s linear;
    }
}

/* Footer Un-stack Media Query
   ========================================================================== */
@media only screen and (min-width: 900px) {
    
}


/* Flex NavBar
   ========================================================================== */
@media only screen and (min-width: 1000px) {
    .navBreak {
        display: block
    }
    
    .cartIcon {
        display: inherit;
    }

    .navLinks {
        display: flex !important;
    }

    .navLinks {
        width: auto;
        height: auto;
        top: auto;
        left: auto;
        text-align: center;
        position: unset;
        background: none;
        flex-direction: row;
        justify-content: center;
        opacity: 1;
    }

    .navLinks li {
        margin-left: 2rem;
        font-size: 1.12rem;
    }

    .menu {
        display: none;
    }
    
    .productCategories {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* Ipad Pro/Computer Media Query
   ========================================================================== */
@media only screen and (min-width: 1000px) {
    .flex-wrapper {
        margin-bottom: 4rem;
    }

    content {
        margin: 0 auto;
    }
    
    header {
        width: 100%
    }
    
    .carousel-cell img {
        height: inherit;
    }
    
    .contactContainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .contactSectionSpan {
        margin-bottom: 2rem;
        grid-column-end: 3;
        grid-column-start: 1;
    }
    
    .leftSectionSpanText {
        grid-row: 1 / 2;
    }
    
    
    .leftSectionSpan {
        display: grid;
        grid-template-columns: 48% 52%;
        padding-top: 4rem;
    }

    .rightSectionSpan {
        display: grid;
        grid-template-columns: 52% 48%;
        margin-top: 4rem;
    }
    
    .headingTopMargin {
        margin-top: 0;
    }

    .bottomSectionSpan {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 4rem;
        margin-top: 6rem;
    }

    .leftSectionSpanText {
        margin: auto 4rem auto 4rem;
    }

    .rightSectionSpanText {
        margin: auto 4rem auto 4rem;
    }
    
    .sectionHeading {
        margin-top: 1rem;
    }
    
    .bottomSectionSpan {
        margin-top: 4rem;
    }
    
    .indexMapSection {
        overflow: hidden; 
    }
    
    .indexMap {
        height: 100%;
    }
    .indexMapContainer {
        height: 100%;
    }
    
    .spanAboutImageContainer {
        grid-row: initial;
    }
    
    .footerContent {
        margin: auto;
        width: 1530px;
    }
}


/* Large Display Media Query
   ========================================================================== */
@media only screen and (min-width: 1605px) {
    .flex-wrapper {
        max-width: 1524px;
        margin-left: auto;
        margin-right: auto;
    }
    
    iframe {
        height: 625px;
    }
}


/* ==========================================================================
   CSS Fixes
   ========================================================================== */