/* Colors */
/* 
    Dark Gray: #a1a1a1
    Very Dark Gray: #454545
    Black: #000
    White: #fff
*/

/**************************** 
    General Styles
****************************/
*{
    box-sizing:border-box;
}
body{
    background-color:#000;
    margin:0;
    padding:0;
    color:#000;
    font-family: "League Spartan", sans-serif;
    font-weight: 500;
    font-size:14px;
}
body.master-container{
    max-width:1440px;
    margin:0 auto;
    padding:0;
}
@media(min-width:1440px){
    body:before,
    body:after{
        content:'';
        height:100%;
        background-color:#000;
        position:absolute;
        z-index:1000;
    }
    body:before{
        left:0;
        right:calc(50% + 720px);
    }
    body:after{
        top:0;
        right:0;
        left:calc(50% + 720px);
    }
}

/**************************** 
    NAVBAR | Mobile View
****************************/
nav.custom-navbar{
    background-color:transparent;
    background-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    width:100%;
    height:96px;
    position:relative;
    z-index:1000;
    display:flex;
    align-items:center;
}
nav.custom-navbar h1{
    color:#fff;
    font-weight:500;
    font-size:2em;
    width:80%;
    text-align:center;
    margin:0;
}
    nav.custom-navbar h1 a,
    nav.custom-navbar h1 a:hover,
    nav.custom-navbar h1 a:focus,
    nav.custom-navbar h1 a:active{
        color:#fff;
        text-decoration:none;
    }
@media(max-width:767px){
    /* Navbar Button */
    nav.custom-navbar .navbar-button{
        width:20%;
        height:96px;
        background-color:transparent;
        border:none;
        outline:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        position:relative;
    }
        nav.custom-navbar .navbar-button::after,
        nav.custom-navbar .navbar-button::before,
        nav.custom-navbar .navbar-button .menu-toggler{
            width:20px;
            height:2px;
            background-color:#fff;
        }
        nav.custom-navbar .navbar-button::after,
        nav.custom-navbar .navbar-button::before{
            content:'';
        }
        nav.custom-navbar .navbar-button .menu-toggler{
            margin:4px 0;
        }
        nav.custom-navbar .navbar-button:hover,
        nav.custom-navbar .navbar-button:focus,
        nav.custom-navbar .navbar-button:active{
            border:none;
            outline:none;
        }

    /* Navbar Links */
    nav.custom-navbar .navbar-links-collapse{
        background-color:#fff;
        color:#000;
        font-weight:500;
        height:72px;
        position:absolute;
        top:0;
        left:0;
        right:0;
        z-index:100;
        display:none;
    }
    nav.custom-navbar .close-navbar{
        font-size:4em;
        font-weight:300;
        color:#a1a1a1;
        position:absolute;
        left:0;
        top:0;
        height:72px;
        width:60px;
        display:flex;
        justify-content:center;
        align-items:center;
        padding-top:10px;
    }
    nav.custom-navbar .navbar-links-wrapper{
        padding-left:72px;
        height:72px;
        display:flex;
        justify-content:space-around;
        align-items:center;
        list-style-type:none;
    }
    nav.custom-navbar .navbar-link{
        color:#000;
        text-decoration:none;
        font-size:1.2em;
        font-weight:600;
    }
}
@media(min-width:768px){
    /* Hide Mobile Buttons */
    nav.custom-navbar button{ display:none; }
    nav.custom-navbar .close-navbar{ display:none; }

    nav.custom-navbar{
        justify-content:flex-start;
    }
    /* H1 Styles */
    nav.custom-navbar h1{
        width:200px;
    }
    /* Link styles */
    nav.custom-navbar .navbar-links-collapse{
        width:400px;
    }
    nav.custom-navbar .navbar-links-wrapper{
        list-style-type:none;
        display:flex;
        padding:0;
        margin:0;
    }
    nav.custom-navbar .navbar-links-wrapper li{
        padding:0 1.5em;
    }
    nav.custom-navbar .navbar-links-wrapper li:first-child {
        padding-left:0;
    }
    nav.custom-navbar .navbar-link{
        color:#fff;
        font-size:1.1em;
        position:relative;
    }
    nav.custom-navbar .navbar-link:hover,
    nav.custom-navbar .navbar-link:active,
    nav.custom-navbar .navbar-link:focus{
        text-decoration:none;
    }
    nav.custom-navbar .navbar-link:hover:after,
    nav.custom-navbar .navbar-link:active:after,
    nav.custom-navbar .navbar-link:focus:after{
        content:'';
        width:18px;
        height:2px;
        background-color:#fff;
        position:absolute;
        bottom:-8px;
        left:calc(50% - 9px);
        z-index:100
    }
}

/**************************** 
    CAROUSEL | HEADER
****************************/
/* Header */
header{
    margin-top:-96px;
}
/* Carousel Card | Slide */
#header-carousel .header-inner{ position:relative; }
#header-carousel .header-item{
    width:100%;
    margin-right:-100%;
    display:none;
    position:relative;
    top:0;
    z-index:99;
    transition:transform .6s ease-in-out;
}
#header-carousel .header-item.center{
    display:block;
    margin:0;
    z-index:101;
}
#header-carousel .header-item-next{
    display:block;
    margin:0;
    z-index:100;
    position:absolute;
}
#header-carousel .header-item-left{
    transform:translateX(-100%);
}
#header-carousel .header-item-right{
    transform:translateX(100%);
}

/* Carousel Control Buttons */
#header-carousel .header-slider-wrapper{
    position:absolute;
    bottom:0;
    right:0;
    width:140px;
    height:70px;
    display:flex;
}
#header-carousel .slider-btn{
    width:70px;
    height:70px;
    background-color:#000;
    display:flex;
    justify-content:center;
    align-items:center;
} 
#header-carousel .slider-prev-icon,
#header-carousel .slider-next-icon{
    width:20px;
    height:20px;
    border:2px solid rgba(255, 255, 255, 0.8);
    background-color:transparent;
}
    #header-carousel .slider-btn:hover,
    #header-carousel .slider-btn:focus,
    #header-carousel .slider-btn:active{
        background-color:#454545;
    }
    #header-carousel .slider-prev-icon{
    border-left:none;
    border-bottom:none;
    transform:rotate(-135deg);
}
#header-carousel .slider-next-icon{
    border-left:none;
    border-bottom:none;
    transform: rotate(45deg);
}

/* Carousel Card Image */
#header-carousel .header-img-wrapper .header-desktop-img{display:none;}
#header-carousel .header-img-wrapper{
    position:relative;
}
#header-carousel .header-img-wrapper img{
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    display:block;
}

/* Carousel Card Text */
#header-carousel .header-text-wrapper{
    margin:0;
    background-color:#fff;
    color:#595959;
    font-size:1.3em;
    padding:3em 2em;
}
#header-carousel .header-text-wrapper h2{
    color:#000;
    font-size:2.2em;
    font-weight:600;
    letter-spacing:-1.5px;
    line-height:1;
    margin-bottom:.75em;
}
#header-carousel .header-text-wrapper p{
    line-height:1.5;
    margin-bottom:1.5em;
    font-weight:400;
}

/* Carousel Card BTN */
#header-carousel button.header-btn{
    border:none;
    background-color:transparent;
    text-transform:uppercase;
    font-weight:600;
    font-size:1em;
    letter-spacing: .9em;
    width:100%;
    max-width:400px;
    text-align:left;
    position:relative;
    margin-top:2.5em;
}
#header-carousel button.header-btn::after{
    content:'';
    width:10px;
    height:10px;
    border:2px solid #000;
    border-bottom:none;
    border-left:none;
    transform:rotate(45deg);
    position:absolute;
    right:0;
    top:calc(50% - 8px);
    z-index:100;
}
#header-carousel button.header-btn::before{
    content:'';
    width:50px;
    height:2px;
    background-color:#000;
    position:absolute;
    top:calc(50% - 4px);
    right:1px;
    z-index:100;
}
#header-carousel button.header-btn:hover,
#header-carousel button.header-btn:focus{
    color:#595959;
}
#header-carousel button.header-btn:hover::after,
#header-carousel button.header-btn:focus::after,
#header-carousel button.header-btn:hover::before,
#header-carousel button.header-btn:focus::before{
    border-color:#595959;
}
@media(min-width:768px){
    /* Carousel Card Image */
    #header-carousel .header-img-wrapper .header-mobile-img{display:none;}
    #header-carousel .header-img-wrapper .header-desktop-img{display:block;}
}
@media(min-width:1024px){
    #header-carousel .header-img-wrapper .header-desktop-img{display:none;}
    #header-carousel .header-item.center{
        display:flex;
    }
    #header-carousel .header-item-next{
        display:flex;
    }
    #header-carousel .header-img-wrapper{
        width:60%;
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    #header-carousel .header-item.item1 .header-img-wrapper{
        background-image:url('../images/desktop-image-hero-1.jpg');
    }
    #header-carousel .header-item.item2 .header-img-wrapper{
        background-image:url('../images/desktop-image-hero-2.jpg');
    }
    #header-carousel .header-item.item3 .header-img-wrapper{
        background-image:url('../images/desktop-image-hero-3.jpg');
    }
    #header-carousel .header-text-wrapper{
        width:40%;
        min-height:540px;
    }
}
@media(min-width:1200px){
    #header-carousel .header-text-wrapper{
        min-height:490px;
    }
}


/**************************** 
    Main Content | About
****************************/
main .main-img-wrapper.top img,
main .main-img-wrapper.bottom img{
    width:100%;
    max-width:100%;
}
main .main-text-wrapper{
    background-color:#fff;
    color:#595959;
    padding:3em 2em;
}
main .main-text-wrapper h3{
    font-size:1em;
    font-weight:700;
    letter-spacing:5px;
    margin-bottom:1.2em;
    text-transform:uppercase;
    color:#000;
}
main .main-text-wrapper p{
    font-size:1.1em;
}
@media(min-width:1024px){
    main{
        display:flex;
    }
    main .main-img-wrapper{
        width:30%;
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    main .main-text-wrapper{
        width:40%;
    }
    main .main-img-wrapper img{
        display:none;
    }
    main .main-img-wrapper.top{
        background-image:url('../images/image-about-dark.jpg');
    }
    main .main-img-wrapper.bottom{
        background-image:url('../images/image-about-light.jpg');
    }
}

/**************************** 
    Footer
****************************/
footer{
    padding:1em 0;
}
footer p{
    margin-bottom:0;
    font-size:.8em;
    color:#fff;
    font-weight:300;
    text-align:center;
}
footer p:first-child{
    margin-bottom:4px;
}
footer p a{
    color:#a1a1a1;
    text-decoration:underline;
}
footer p a:hover,
footer p a:focus,
footer p a:active{
    color:#fff;
    text-decoration:none;
}

/**************************** 
    Modal
****************************/
#demoMessage{
    display:none;
    position:fixed;
    z-index: 1000;
    top:50px;
    left:calc(50% - 300px);
    width:600px;
    height: auto;
}
#demoMessage .custom-dialog{
    background-color:#000;
    border-radius:15px;
}
#demoMessage .custom-header{
    width:100%;
    padding:2em;
    display:flex;
    position:relative;
}
#demoMessage .custom-header h4{
    font-weight:700;
    font-size:2.5em;
    margin-bottom:0;
    color:#fff;
    width:100%;
    text-align:center;
}
#demoMessage .custom-header button{
    background-color:transparent;
    border:none;
    color:#fff;
    font-size:3em;
    font-weight:400;
    position:absolute;
    right:12px;
    top:4px;
}
#demoMessage .custom-body{
    padding:2em;
    color:#fff;
    text-align:center;
}