/* ---------------------------------------------------------------------- */
/*  Settings -> Variables
/* ---------------------------------------------------------------------- */


:root {
 
    /* Colors */

    --main-bg-color: #fff;
    --secondary-color: #b17e6d;

    --main-font-color: #2E1E19;

    --error-color: #bf1a1a;
    --color-blue: #056E8E;

    /* Typography */

    --main-font-family: 'Museo Sans', sans-serif;
    --secondary-font-family: 'Cormorant', serif;

    --base-font-size: 16px; 
    --small-font-size: 17px; 
    --medium-font-size: 24px;
    --big-font-size: 35px; /* 48px */
    --bigger-font-size: 80px;


    /* Box Model */

    --spacer: 36px;
    --spacer-2x: 72px;
    --spacer-3x: 108px;
    --spacer-4x: 144px;
    --spacer-6x: 190px;
    --spacer-half: 18px;

}


@media all and (max-width: 768px) {

    :root {
        --base-font-size: 15px;
        --small-font-size: 16px; /* 12px */
        --medium-font-size: 16px;
        --big-font-size: 30px; /* 48px */
        --bigger-font-size: 60px;

        --spacer: 20px;
        --spacer-2x: 40px;
        --spacer-3x: 60px;
        --spacer-half: 10px;
    }
    

}

@media all and (min-width: 768px) and (max-width: 1024px) {

    :root {
        --base-font-size: 15px; 
        --small-font-size: 18px; 
        --medium-font-size: 24px;
        --big-font-size: 30px; /* 48px */
        --bigger-font-size: 50px;


    /* Box Model */

    --spacer: 20px;
    --spacer-2x: 40px;
    --spacer-3x: 60px;
    --spacer-half: 18px;

    }


} 

@media all and (max-width: 320px) {

    :root {
        --base-font-size: 14px; 
        --small-font-size: 16px; 
        --medium-font-size: 22px;
        --big-font-size: 26px; /* 48px */
        --bigger-font-size: 40px;


    /* Box Model */

    --spacer: 14px;
    --spacer-2x: 28px;
    --spacer-3x: 56px;
    --spacer-half: 10px;

    }
}





/* ---------------------------------------------------------------------- */
/*  Generic > Box Sizing
/* ---------------------------------------------------------------------- */

*, *:before, *:after {box-sizing: border-box;}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------- */
/*  Generic > Shared
/* ---------------------------------------------------------------------- */

html, body {font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color:var(--main-font-color); line-height: 1.7; }
body {margin:0;  background-color: var(--main-bg-color); }

a {color: var(--main-font-family); text-decoration: none; transition: .6s; color:var(--main-font-color);}
a:hover {opacity: .9;}

h1 {font-family: var(--secondary-font-family); margin: 0;  font-size: var(--bigger-font-size); font-weight: normal; line-height: .8; }

h2 {font-family: var(--secondary-font-family); margin: 0;  font-size: var(--big-font-size); font-weight: normal; text-transform: none; line-height: 1.1; }

h3 {font-family: var(--secondary-font-family); margin: 0;  font-size: 30px; font-weight: normal; text-transform: none; line-height: 1.2; }

h4 {font-family: var(--secondary-font-family); margin: 0;  font-size: 22px; font-weight: normal; text-transform: none; line-height: 1.2; }

h5 {font-family: var(--main-font-family); margin: 0;  font-size: 14px; font-weight: 300; text-transform: uppercase; line-height: 1.2; text-align: left; letter-spacing: 2px;}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000;
}
::-moz-placeholder { /* Firefox 19+ */
  font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000;
}

p a {text-decoration: underline;}
p:first-of-type {margin-top: 0;}
p:last-of-type {margin-bottom: 0;}

img {display: block; max-width: 100%;}
figure {margin: 0; padding: 0px}
ul {margin: 0; padding: 0; list-style: none;}
.small-text {font-size: var(--small-font-size);}
.center {text-align: center;}

.no-mobile {display: block;}
.mobile {display: none!important;}


.video-container {position: relative; height: 60vh;}
.video-container:hover .mute-video{opacity: 1;}

.mute-video {position: absolute; bottom: 40px; right: 40px; background: #fff; border-radius: 50%; width: 40px; height: 40px; z-index: 1;
    background-image: url(../img/volume_off.svg); background-size: 18px;
    background-repeat: no-repeat; background-position: center; opacity: 0.5; z-index: 10;}

.mute-video.unmute-video {
    background-image:url(../img/volume_on.svg);
}

@media all and (max-width: 768px) {
   .no-mobile {display: none!important;}
   .mobile {display: block!important;}
}

@media all and (min-width: 768px) and (max-width: 1024px) {
   
}

blockquote {font-weight: 600;}


/* ---------------------------------------------------------------------- */
/*  Elements > Header
/* ---------------------------------------------------------------------- */

header {width: 100vw; padding: var(--spacer-2x); display: flex;
justify-content: center; flex-flow: column; position: fixed; z-index: 11;}
.logo {position: relative; z-index: 99;}
body.open-nav .logo svg * {transition: all 0.5s linear;}
body.open-nav .logo svg * {fill: #fff!important;}

main {margin: 0;}

/* ---------------------------------------------------------------------- */
/*  Elements > Navigation
/* ---------------------------------------------------------------------- */

#nav-icon{
    width: 30px;
    height: 25px;
    position: absolute;
    top:var(--spacer-2x);
    right:var(--spacer-2x);
    margin: 0 auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer; z-index:9999;
  }
  
  #nav-icon span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #2E1E19;
    border-radius: 0;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  

  #nav-icon span:nth-child(1) {top: 0px;}
  #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {top: 6px;}
  #nav-icon span:nth-child(4) {top: 12px;}
  #nav-icon.open span:nth-child(1) {top: 5px; width: 0%; left: 50%;}
  #nav-icon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #nav-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #nav-icon.open span:nth-child(4) {top: 18px; width: 0%; left: 50%;}

  
  body.open-nav #nav-icon span {background-color: #fff!important;}



/* nav {z-index: 20; width: 100%; position: fixed; left: 0; top: 0; transform:translateX(100%); transition: transform .5s; height: 100vh; display: flex; flex-flow: column; opacity: 0;} */

nav {   width: 50vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background-color: var(--secondary-color); 
    padding: 200px var(--spacer) var(--spacer-2x) var(--spacer-6x);
    transform: translateX(100%);
    transition: transform .5s;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    z-index: 99;
}
body.open-nav nav {transform:translateX(0%); overflow: auto; opacity: 1;}
nav ul a {font-size: 56px; color: #fff; font-family: var(--secondary-font-family);}
nav ul:first-of-type {columns: 1; column-gap: var(--spacer-3x); display: inline-block;}
nav ul li {line-height: 1.3;}


.nav-contacts {margin-top: var(--spacer-2x);}
.nav-contacts a {color: #fff; text-decoration: none; display: block; margin-bottom: 10px;}
.nav-contacts .langs {
    display: flex;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
    letter-spacing: 2px;
}
.nav-contacts .langs a {
}
.nav-contacts .langs a:first-of-type::after{
    content: '|';
    padding: 0 24px;
}
@media all and (max-width: 768px) {
    #nav-icon {top: 45px}
    body.open-nav .logo {opacity: 1!important;}
    .logo {z-index: 99;}


    nav {
        padding: 170px var(--spacer-2x) var(--spacer-2x) var(--spacer-2x);
    }
    nav ul li {
        line-height: 1;
        margin-bottom: 15px;
    }
    nav ul a {font-size: 38px;}
}
@media all and (min-width: 768px) and (max-width:1024px) {
    nav{padding:170px var(--spacer) var(--spacer-2x) var(--spacer-4x)}
    nav ul a {font-size: 45px;}
}

.vid-desktop {display: block;}
.vid-mobile {display: none;}

@media all and (orientation:portrait) {
    .vid-desktop {display: none;}
    .vid-mobile {display: block; object-position: bottom; }
}
/* ---------------------------------------------------------------------- */
/*  Common
/* ---------------------------------------------------------------------- */


.grid.cols-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}
.grid.cols-2 figure {
    position: relative;
}
.grid.cols-2 figure>img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: sticky;
    top: 0;
}
.grid.cols-2 figure h2 {
    position: absolute;
    left: var(--spacer-2x);
    bottom: var(--spacer-2x);
}

.grid.cols-2 .content{
    padding: var(--spacer-2x);
    display: flex;
    flex-flow: column;
}

.grid.cols-2 .content .text{
   max-width: 80%;
   margin-top: auto;
}
.grid.cols-2 .content h1 {text-transform: lowercase; margin-bottom: var(--spacer);} 

h1.vertical {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

@media all and (max-height: 768px) {
    h1.vertical {
        writing-mode: unset;
        transform: unset;
    }
   
}

@media all and (max-width: 768px) {
    .grid.cols-2 figure h2 {
        position: unset;
        margin-bottom: var(--spacer-2x);
    }
    
.arrow.mobile  {
    position: absolute;
    bottom: 150px;
    left: var(--spacer-2x);
}
.arrow.mobile svg path {fill: var(--main-color);}

  body.scroll .logo {opacity: 0;}
    .grid.cols-2{ 
        grid-template-columns: 1fr;
    }
    .grid.cols-2 figure { 
       height: 100vh;
       position: fixed;
    }
    .grid.cols-2 .content {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        margin-top: 100vh;
        background: #fff;
    }

    .grid.cols-2 .content .text{
        max-width: 100%;
     }
     h1.vertical {
         writing-mode: unset;
         transform: unset;
     }
     .grid.cols-2 figure h2{
        bottom:100px
    }
}

@media all and (min-width: 768px) and (max-width:1024px) {
    .grid.cols-2 .content .text {
        max-width: unset;
    }
    .grid.cols-2 .content {padding-bottom: var(--spacer-3x)!important}

   
}

/* ---------------------------------------------------------------------- */
/*  Home
/* ---------------------------------------------------------------------- */

.home video, .home img {width: 100%; height: 100vh; object-fit: cover; object-position: bottom;}

.home .overlay{
    width: 100%; height: 100vh; position: absolute; top: 0; left: 0; display: flex;
    justify-content: flex-end; flex-flow: column; background-color: rgba(0,0,0,.2); color: #fff;
    padding: var(--spacer-2x);
}

.home .text{
    width: 60%;
}

.home .text h5 {
    margin-top: var(--spacer-half);
}
body[data-controller="home"] #nav-icon span{
        background-color: #fff;
}

@media all and (max-width: 768px) {
    .home .text {width: 90%; margin-bottom: 80px;}
    .home .text h2 {font-size: 24px;}
}

/* ---------------------------------------------------------------------- */
/*  About
/* ---------------------------------------------------------------------- */

body[data-controller="about"]{
    background-color: var(--secondary-color);
    color: #fff;
}

body[data-controller="about"] #nav-icon span{
    background-color: #fff;
}




@media all and (max-width: 768px) {


    body[data-controller="about"].scroll .logo {opacity: 0;}
    body[data-controller="about"] .grid.cols-2 .content{
        background: var(--secondary-color);
    }
    body[data-controller="about"] #nav-icon span {background: #fff;}
    body[data-controller="about"].scroll #nav-icon span {background: #fff;}
}



/* ---------------------------------------------------------------------- */
/*  Meet us
/* ---------------------------------------------------------------------- */

body[data-controller="meetus"]{
    background-color: #E6D0BB;
}

body[data-controller="meetus"] .logo svg * {fill: var(--main-color);}




@media all and (max-width: 768px) {

    body.open-nav {overflow-y: hidden;}
    body[data-controller="about"].scroll .logo {opacity: 0;}
    
    body[data-controller="mission"] #nav-icon span {background: #FFF;}
    body[data-controller="mission"].scroll #nav-icon span {background:var(--main-font-color);}
}



/* ---------------------------------------------------------------------- */
/*  why us
/* ---------------------------------------------------------------------- */

body[data-controller="whyus"] .logo svg * {fill: #000;}
body[data-controller="whyus"] #nav-icon span {background-color: #000;}

body[data-controller="whyus"]{
    background:  #E84C4D;
}
.why-us.grid {
    display: grid;
    min-height: 100vh;
    align-items: flex-end;
    grid-template-columns: 180px 1fr 240px 1fr;
    padding: var(--spacer-2x);
    grid-gap: var(--spacer-2x);
}

.why-us h1 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 310px;
}
.why-us .services li{
    padding-top: 4px;
}
.why-us .services a {
    text-decoration: underline; 
}
@media all and (min-width: 1500px) {
    .why-us.grid {width: 90vw;}
}

@media all and (max-width: 768px) {
    body[data-controller="whyus"].scroll .logo {opacity: 0;}

    .why-us.grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .why-us.grid .content .text {
        columns: unset;
    }
    .why-us.grid h1 {
        writing-mode: unset;
        transform: unset;
        height: unset;
        margin-top: 270px ;
    }
}

@media all and (min-width: 769px) and (max-width:1024px) {
    .why-us.grid h1 {height: 230px; position: relative;}
    .why-us.grid { grid-template-columns: 140px ​1fr 160px 1f; width: unset; padding-bottom: var(--spacer-3x)!important}
}

@media all and (max-width:768px) {
body[data-controller="news"] #nav-icon span {background-color: #FFF;}
body[data-controller="news"].scroll #nav-icon span {background-color: var(--main-font-color);}

body[data-controller="activityplan"] #nav-icon span {background-color: #FFF;}
body[data-controller="activityplan"].scroll #nav-icon span {background-color: var(--main-font-color);}
}

/* ---------------------------------------------------------------------- */
/*  what can we do
/* ---------------------------------------------------------------------- */

body[data-controller="partnerships"] .logo svg * {fill: #000;}
body[data-controller="partnerships"] #nav-icon span {background-color: #000;}

body[data-controller="partnerships"]{
    background:  #E6D0BB;
}
.partnerships.grid {
    display: grid;
    min-height: 100vh;
    align-items: flex-end;
    grid-template-columns: 100px auto;
    padding: var(--spacer-2x);
    grid-gap: var(--spacer-2x);
    width: 90vw;
}

.partnerships.grid h1 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 300px;
    text-transform: lowercase;
}

.partnerships.grid .content .text {
    position: relative;
    top: var(--spacer);
    columns: 2;
    grid-gap: var(--spacer-2x);
    -webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

@media all and (max-width: 768px) {
    body[data-controller="partnerships"] header{
        position: absolute;

    }
    body[data-controller="partnerships"] header #nav-icon{position:fixed}

    body[data-controller="whatcanwedo"].scroll .logo {opacity: 0;}

    .partnerships.grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .partnerships.grid .content .text {
        columns: unset;
    }
    .partnerships.grid h1 {
        writing-mode: unset;
        transform: unset;
        height: unset;
        margin-top: 270px ;
    }
}

@media all and (min-width: 769px) and (max-width:1024px) {

    .partnerships.grid h1 {height: 230px; position: relative;}
    .partnerships.grid { grid-template-columns: 140px auto; width: unset;}

    .partnerships.grid  {padding-bottom: var(--spacer-3x)!important}
}


/* ---------------------------------------------------------------------- */
/*  Contacts
/* ---------------------------------------------------------------------- */
@media all and (max-width:768px) {
    .grid.cols-2 .content .text{
        margin-top: unset;
    }

}

/* ---------------------------------------------------------------------- */
/*  Elements > Footer
/* ---------------------------------------------------------------------- */


footer { 
    padding: var(--spacer-2x); font-size: 24px; text-align: center;
    position: fixed; width: 100%;
    bottom:0;
}