/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@import url('https://fonts.googleapis.com/css2?family=Muli:wght@300');

@font-face {
    font-family: "SilkSerif-ExtraLight";
    src: url(./fonts/SilkSerif-ExtraLight.eot);
    src: url(./fonts/SilkSerif-ExtraLight.woff2) format("woff2"),url(/fonts/SilkSerif-ExtraLight.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "SilkSerif-LightItalic";
    src: url(./fonts/SilkSerif-LightItalic.woff2) format("woff2"),url(/fonts/SilkSerif-LightItalic.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "SilkSerif-Light";
    src: url(./fonts/SilkSerif-Light.eot);
    src: url(./fonts/SilkSerif-Light.woff2) format("woff2"),url(/fonts/SilkSerif-Light.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "SilkSerif-Regular";
    src: url(./fonts/SilkSerif-Regular.woff2) format("woff2"),url(/fonts/SilkSerif-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

.preload * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
  }

:root{

--header-font:"SilkSerif-Regular";
--para-font:"Muli", sans-serif;
--header-font-light:"SilkSerif-Light",sans-serif;
--black:#141414;
--grey:#727272;
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

html {
    font-size: 14px;
    max-height: 100vh;
    overflow: hidden;
}



body {
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--header-font-light);
    letter-spacing: 4px;
}

ul{
    padding-left: 0;
}

.text-right {
    text-align:right;
}

.text-center {
    text-align:center;
}

.text-left {
    text-align:left;
}

.logo {
    width: 230px;
    object-fit:contain;
}
.navbar{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding:0 2rem;
    font-size: 1.2rem;
    font-family: var(--para-font);
    text-transform: uppercase;
    position: fixed;
    letter-spacing: 2px;;
    width: 100%;
    z-index: 10;
    top: 0;
}

.navbar-left{
    font-size: 1.5rem;
    list-style-type: none;
}

@media(max-width:576px){


    .menu{
        position: fixed;
        background-color: white;
        height: 100vh;
        width: 100%;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* transform: translateX(100%); */
        -webkit-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
        pointer-events: none;
        z-index: 111;
        color: var(--black);
        font-family: var(--para-font);
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        /* border-left: 1px solid var(--grey); */
        opacity: 0;
    }

    .menu ul {
        list-style-type: none;
        font-size: 30px;
        text-align: center;
    }
    .menu li {
        margin-bottom: 20px;
    }

    .menu li a {
        color: var(--black);
        font-family:var(--para-font) ;
        text-decoration: none;
        text-transform: uppercase;
    }

    .close-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 25px;
    }

     
    .menu.open {
        opacity :1;
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        pointer-events: all;
    }

    .menu-btn > img {
        max-width:25px ;
    }

    .navbar-right{
        list-style-type: none;
    }

   .navbar-right li:not(:first-child){
        display: none; 
    }
}

@media(min-width:576px){

    .menu {
        display: none;
    }
    .navbar-right,.navbar-left{
        list-style-type: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .navbar-right li:first-child{
        display: none; 
    }
}

.navbar li a {
    color: var(--black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none;
}

.navbar-right>li+li{
    margin-left: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* .home .navbar-left li {
    color: white;
} */

.navbar-left li {
    font-size: 1.8rem;
}


.landing-section {
    max-height: 100vh;
    overflow: hidden;
}

.btn,.btn:focus {
    font-family: var(--para-font);
    color: var(--black);
    text-transform: uppercase;
    border: 1px solid var(--black);
    background-color: transparent;
    padding: 1rem;
    font-size: 1.2rem;
    -webkit-transition:background-color 0.4s, color 0.4s;
    -o-transition:background-color 0.4s, color 0.4s;
    transition:background-color 0.4s, color 0.4s;;
    -ms-flex-item-align: start;;
        align-self: flex-start;
    outline: none;
    text-decoration: none;
}

.back-btn {
    cursor: pointer;
}

.btn:hover {
    cursor: pointer;
    text-decoration: none;
    background-color: var(--black);
    color: white;
}


.screen {

    height: 100vh;
    overflow:hidden;
    width: 100%;
    pointer-events: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position:absolute;
    top: 0;
    left: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-top: 6rem;
}

#screen2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

#screen2 img {
    margin-top: 1rem;
}

.img-container {
    position: relative;
    z-index: 2;
    /* align-self: start; */
}

@media(max-width:768px){
    #screen2 > .img-container{
        height: 60vh;
    }

    .text-container {
        justify-content: flex-start !important;
        
    }

    #text-container1,#text-container3 {
        padding-top: 6rem;
    }

    
}

@media(min-width:768px){

.screen {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 0;
}

#screen2 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.img-container {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

#screen2 img {
    margin-top: 0;
}

}

.screen.active{
    /* transform:translateX(0); */
    position: relative;
    opacity: 1;
    pointer-events: all;
}



.screen > .img-container {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    -webkit-transition: -webkit-clip-path 1.2s;
    transition: -webkit-clip-path 1.2s;
    -o-transition: clip-path 1.2s;
    transition: clip-path 1.2s;
    transition: clip-path 1.2s, -webkit-clip-path 1.2s;
}

.screen.active > .img-container {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}



.play-btn-cta {
    background-color: var(--black);
    color: white;
    position: absolute;
    bottom: 4px;
    border: 0;
    right: 0px;
    outline: 0;
    background: var(--black);
    /* border: 0.5px solid white; */
    padding: 8px;
    min-width: 100px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    
}

.play-btn-cta img {
    max-width: 11px;
}

button {
    font-family: var(--para-font);
    letter-spacing: 2px;
}





.text-container {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    -webkit-transition: -webkit-clip-path 1.2s;
    transition: -webkit-clip-path 1.2s;
    -o-transition: clip-path 1.2s;
    transition: clip-path 1.2s;
    transition: clip-path 1.2s, -webkit-clip-path 1.2s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* height: 100vh; */
    z-index: 1;
    /* align-items: center; */
}

.active > .text-container {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-transition-delay :0.6s;
         -o-transition-delay :0.6s;
            transition-delay :0.6s;
}

.landing-text {
    /* position: absolute; */
    font-weight: lighter;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 0.5px black;
    font-size: 2rem;
    color: var(--black);
}


#home1{
    max-width: 100%;
}

#home2 {
    max-height: 70vh;
}

#home3 {
    max-width: 100%;
}

.text-container {
    padding-right: 2rem;
    padding-left:2rem;
}

.transition-screen {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    /* background-color: rgba(20, 20, 20,0.3); */
    background-color:var(--black);
    /* opacity: 0.5; */
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: white;
    font-size: 2em;
    text-align: center;
}



/*ShowCase CSS */


.showcase-title-wrapper {
    padding: 5rem 3rem;
    height: 100vh;
    position: relative;
}

.showcase-title-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    height: 100%;
    top: 0;
    
    
}

.showcase-title-container.active {
    position: relative;
    opacity: 1;
    pointer-events: all;
}

.pagination-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    bottom: 6rem;
    width: 100%;
    font-family: var(--para-font);
    font-size: 1.4rem;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    position: absolute;
    right: 2rem;

}


.showcase-title{
    font-size: 1.6rem;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: letter-spacing 0.52s;
    -o-transition: letter-spacing 0.52s;
    transition: letter-spacing 0.52s;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}



.showcase-title:hover{
    letter-spacing: 8px;
}

.showcase-title::after {
    content:"";
    position: absolute;
    left: 0;
    bottom:-2px;
    width: 98%;
    height: 1px;
    border-top:4px solid var(--black);
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: skew(-20deg);
        -ms-transform: skew(-20deg);
            transform: skew(-20deg);
}

.showcase-title:hover::after{
    opacity: 1;

}

.arrow {
    width: 10px;
}

.pages {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}



.prev .arrow {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.next-prev-button {
    cursor: pointer;
    text-transform: uppercase;
}

.next > .next-prev-button:before{
    content: 'Next';
}

.prev > .next-prev-button:after{
    content: 'Prev';
}

.line {
    height: 1px;
    border-top: 0.1px solid var(--black);
    width: 80%;
}

.current {
    cursor: pointer;
}

.details {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 75%;
    opacity: 0;
}

.details.active {
    position: relative;
    opacity: 1;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* padding-top: 3rem; */
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

.top-level {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.top-level p ,.recognition > p{
    font-family: var(--para-font);
    font-size: 1.2rem;
    /* margin: 0; */
    text-transform: uppercase;
}

.top-level>h1 {
    font-size: 3rem;
}

.showcase-title.hide-title {
    position: absolute;
}

.recognition {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

@media(min-width:768px){
    .top-level{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}

/* mobile font sizes */
@media(max-width:768px){
    .details>h1{
        font-size: 1.1rem;
    }

    p.detail-item{
        font-size: 1rem;
    }

    .transition-screen {
        font-size: 1.2rem ;
    }
}

.disable-pointer-events{
    pointer-events: none;
}

.disable-btn-graceful{
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.detail-item{
    text-transform: uppercase;
}

.quote-container {
    -webkit-box-flex: 0.3;
        -ms-flex: 0.3;
            flex: 0.3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 3rem;
    opacity: 0.4;
    -webkit-transition: opacity 0.9s;
    -o-transition: opacity 0.9s;
    transition: opacity 0.9s;
    position: relative;
    margin-top: 1.5rem;
}



.opacity-0 {
    opacity: 0 !important;
}

.gallery-carousel {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    /* min-height: 70vh; */
    margin-top: 5rem;
}

@media(min-width:768px){
    .gallery-carousel {
        min-height: 70vh;
    }

    .quote-container {
        margin-top: 0;
    }
}

.img {
    width: 100%;
    height: 60vh;
    text-align: center;
    -webkit-transition: -webkit-transform 0.9s;
    transition: -webkit-transform 0.9s;
    -o-transition: transform 0.9s;
    transition: transform 0.9s;
    transition: transform 0.9s, -webkit-transform 0.9s;
}

.img > img {
    /* max-width: 100%; */
    height: 100%;
}


.img.is-selected + .img{
    text-align: right;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);

}

.quote-container > h3 {
    margin: 0;
    text-transform: uppercase;
}


.gallery-quote-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 2.5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

@media(min-width:768px){
    .img {
        width: 50%;
        text-align: left;
    }

    .quote-container {
        font-size: 5rem;
        text-transform: uppercase;

    }
   
}

@media (min-width:992px){
    .gallery-quote-wrapper{
        /* display: none; */
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        margin-top: 5rem;
    }

    .quote-container > h3 {
        text-transform: uppercase;
        position: absolute;
        left: 25%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%) rotate(-90deg);
            -ms-transform: translate(-50%,-50%) rotate(-90deg);
                transform: translate(-50%,-50%) rotate(-90deg);
        margin: 0;
    }
}

@media(max-width:768px){

    .quote p {

        font-size: 2.5rem;
        padding: 0 10px;

    }

}

.video-container {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: var(--black);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    -webkit-transition: -webkit-clip-path 0.7s;
    transition: -webkit-clip-path 0.7s;
    -o-transition: clip-path 0.7s;
    transition: clip-path 0.7s;
    transition: clip-path 0.7s, -webkit-clip-path 0.7s;
    z-index: 1111;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

}

#close-play-btn {

    width: 25px;
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;

}

.video-container.open{
    pointer-events: all;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

#video {

    max-width: 100%;
    width: 700px;
}