:root {
  --content-width: 115rem;
  --xs: 0.555556rem;
  --s: 1.1111rem;
  --m: 4.4444rem;
  --l: 8.8888rem;
  --l_mob: 5.55556rem;
  --mainColor: #000;
  --mainFontColor: #fff;
}

@media screen and (max-width: 768px){
  :root {
    --l: 5.555556rem;
  } 
}

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

@font-face {
    font-family: 'PitchSans-Medium';
    src: url('../fonts/PitchSans-Medium.eot');
    src: url('../fonts/PitchSans-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PitchSans-Medium.woff') format('woff'),
         url('../fonts/PitchSans-Medium.ttf') format('truetype'),
         url('../fonts/PitchSans-Medium.svg#PitchSans-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PitchSans-MediumItalic';
    src: url('../fonts/PitchSans-MediumItalic.eot');
    src: url('../fonts/PitchSans-MediumItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PitchSans-MediumItalic.woff2') format('woff2'),
         url('../fonts/PitchSans-MediumItalic.woff') format('woff'),
         url('../fonts/PitchSans-MediumItalic.ttf') format('truetype'),
         url('../fonts/PitchSans-MediumItalic.svg#PitchSans-MediumItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
  font-family: "PitchSans-Medium", serif;
  font-size: 18px;
  line-height: 140%;
  -webkit-font-smoothing: antialiased;
}

body{
  background-color: var(--mainColor);
  color: var(--mainFontColor);
}

body > *{
  opacity: 0;
  transition: opacity .5s ease-in-out .5s;
}

body.loaded > *{
  opacity: 1;
}

li {
  list-style: none;
}

a{
  color: currentColor;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border .3s ease;
}

.underline{
  border-bottom: 1px solid #fff;
}

.underline--dark{
  border-bottom: 1px solid #000;
}

a.active,
a:hover{
  font-family: "PitchSans-MediumItalic", serif;
  font-style: normal;
  position: relative;
}

.paragraph p a,
.underline--link{
  display: inline-block;
}

.paragraph p a:after,
.underline--link:after{
  content: "";
  width: 0;
  height: 1px;
  display: block;
  background-color: currentColor;
  bottom: -1px;
  position: relative;
  transition:  width .3s ease;
}

.underline--dark.underline--link,
.underline.underline--link,
.paragraph p a{
  transition: none;
}

.underline--dark.underline--link:hover,
.underline.underline--link:hover,
.paragraph p a:hover{
  border-bottom:  1px solid transparent;
}

.paragraph p a:hover:after,
.underline--link:hover:after{
  width: 100%;
}

{}

strong,
b {
  font-weight: 500;
}

em, i{
  font-family: "PitchSans-MediumItalic", serif;
  font-style: normal;
}

img {
  width: 100%;
}

img[data-src]{
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

img.loaded{
  opacity: 1;
}

.page > * {
  max-width: var(--content-width);
  margin: 0 auto;
}

section{
  position: relative;
}

main:focus {
  outline: none;
}

h1, h2, h3, h4{
  font-weight: normal;
  font-size:1rem;
}

.hidden{
  opacity: 0;
  transition:  opacity .5s ease-in-out;
}

.capitalize{
  text-transform: capitalize;
}

@media screen and (min-width:768px){
  .sticky{
    position: sticky;
    top: var(--m);
    height: 20px;
  }
}

.flex{
  display:-webkit-flex;
  display:flex;
  flex-wrap: wrap;
}

.flex > *{
  flex:  0 0 auto;
}

.space-btw{
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex-column{
  -webkit-flex-direction:column;
  flex-direction: column;
}

.justify-end{
  -webkit-justify-content:flex-end;
  justify-content:flex-end;
}

.w_100{
  width:100%;
}

.w_66{
  width:66.666666%;
}

.w_50{
  width:50%;
}

.w_45{
  width:45%;
}

.w_40{
  width:40%;
}

.w_33{
  width:33.333333%;
}

.w_30{
  width:30%;
}

.w_25{
  width:25%;
}

.w_20{
  width:20%;
}

.fullPageHeight{
  height: calc(100vh - 145px); /* padding (50 + 50) + header-height */
}

.grid {
  --columns: 12;
  --gutter: 0;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media screen and (min-width:767px){
  .grid{
    --gutter: 10px;
  }
  .grid.c-2{
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.c-2--extended{
     grid-template-columns:repeat(2, 1fr);
  }
  .grid.c-3{
    grid-template-columns: repeat(3, 1fr);
  }
  .grid.c-4{
    grid-template-columns: repeat(4, 1fr);
  }
  .grid.c-5{
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (min-width:1024px){
  .grid.c-2--extended{
     grid-template-columns: calc(25% - 5px) calc(75% - 5px);
  }
}

.margin-xs{
  margin:var(--xs);
}

.margin_w-xs{
  margin-left:var(--xs);
  margin-right:var(--xs);
}

.padding_w-xs{
  padding-left:var(--xs);
  padding-right:var(--xs);
}

.margin-s{
  margin:var(--s);
}

.margin_b-s{
  margin-bottom:var(--s);
}

.margin_t-s{
  margin-top:var(--s);
}

.margin-m{
  margin:var(--m);
}

.margin_h-m{
   margin-top:var(--m);
   margin-bottom:var(--m);
}

.margin_t-m{
  margin-top:var(--m);
}

.margin_b-m{
  margin-bottom:var(--m);
}

.margin_b-2m{
  margin-bottom: calc(2 * var(--m));
}

.padding-m{
  padding:var(--m);
}

.padding_t-m{
  padding-top:var(--m);
}

.padding_b-m{
  padding-bottom:var(--m);
}

.padding_h-m{
  padding-top:var(--m);
  padding-bottom:var(--m);
}

.margin-l{
  margin:var(--l);
}

.margin_b-l{
  margin-bottom:var(--l);
}

.margin_t-l{
  margin-top:var(--l);
}

.padding_h-l{
  padding-top:var(--l);
  padding-bottom:var(--l);
}

.padding_b-l{
  padding-bottom:var(--l);
}

.margin-xl{
  margin:var(--xl);
}

.margin_r-xl{
  margin-right:var(--xl);
}

.margin_b-xl{
  margin-bottom:var(--xl);
}

.margin_t-xl{
  margin-top:var(--xl);
}

.text{
  max-width:660px;
  text-align:left;
}

.text a:not(.phone){
  border-bottom:1px solid #000;
}

.text a:hover{
  border-bottom:1px solid grey;
}

.p_no-m p{
  margin: 0;
}

.cursor-pointer{
  cursor: pointer;
}

.cursor-next{
  cursor: e-resize;
}

.close-button{
  display:block;
  width:20px;
  height:20px;
  position:absolute;
  top:15px;
  left:20px;
}

.close-button:after,
.close-button:before{
  content:"";
  position:relative;
  height:1px;
  width:100%;
  display:block;
  background-color:#000;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  top:50%;
  left:0;
}

.close-button:after{
  top:calc(50% - 1px);
  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
}

@media screen and (min-width:1024px){
  .close-button{
    top:50px;
    left:50px;
  }
}


@media screen and (max-width:767px){

  .hidden_mb{
    display:none!important;
  }

  .no-flex_mb{
    display:block;
  }

  .margin_b-s_mb{
    margin-bottom:var(--s);
  }

  .margin_b-m_mb{
    margin-bottom:var(--m);
  }

  .margin_t-l_mb{
    margin-top:var(--l);
  }

  .margin_b-l_mb{
    margin-bottom:var(--l);
  }

  .margin_t-xl_mb{
    margin-top:var(--xl);
  }

  .no-margin_mb{
    margin:0;
  }

  .w_100_mb{
    width: 100%;
  }
}

@media screen and (min-width:767px) and (max-width:1024px){
  .hidden_pad{
    display:none!important;
  }
  .w_100_pad{
    width: 100%;
  }
  .w_75_pad{
    width: 75%;
  }
  .w_70_pad{
    width: 70%;
  }
  .w_65_pad{
    width: 65%;
  }
  .w_35_pad{
    width: 35%;
  }
  .w_30_pad{
    width: 30%;
  }
  .w_25_pad{
    width: 25%;
  }
}

@media screen and (min-width:767px){
  .visible_mb{
    display: none!important;
  }
}

/*/ TYPO /*/

.medium-title{
  font-size: 2.5rem;
  line-height: 2.5rem;
}

.small-text{
  font-size: 0.888889rem;
}

.lh-10{
  line-height: 1.8em;
}

.paragraph p + p{
  margin-top:  calc(1.5 * var(--s));
}

.paragraph a{
  border-bottom: 1px solid #000;
}

/*/ COLORS /*/

.bg--light{
  background-color: #fff;
  color:  #000;
}

.bg--dark{
  background-color:  #000;
  color:  #fff;
}

/*/ BTN /*/

.btn{
  border-radius: 200px;
  background-color: #fff;
  border: none;
  font-family:  inherit;
  cursor: pointer;
  margin-bottom: 1px;
  transition:  all .5s ease;
}

.btn-big{
  height: 300px;
  font-size: var(--s);
}

.btn-red:hover{
  background-color: #FF0000;
}

.btn-green:hover{
  background-color: #00FF00;
}

.btn-blue:hover{
  background-color: #0000FF;
}


@media screen and (min-width: 768px){
  .btn-big:hover{
    font-family: PitchSans-MediumItalic;
  }
}

@media screen and (max-width: 768px){
  .btn-big{
    height: 130px;
    padding: 0 15%;
  }
}


/*/ TRICKS HOVER /*/

.background-cover{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  opacity: 0;
  transition:  opacity .5s ease-in-out;
  background-size: cover!important;
}

.project-hover:hover .hidden{
  opacity: 1;
}

/*/ HEADER /*/

.main-header{
  position:  fixed;
  /*/ - global margin /*/
  width: calc(100% - 20px);
  z-index: 99;
  top: 0;
  left:  0;
  color: rgb(255, 255, 255);
  transition: color .3s ease;
}

.main-header.black-color{
  color: rgb(0, 0, 0);
}

.main-header #scroll-top{
  opacity: 0;
  transition: opacity .5s ease;
}

.main-header #scroll-top.show{
  opacity: 1;
}

.main-header nav li{
  margin-right: 50px;
}

@media screen and (max-width: 768px){
  .main-header nav{
    transition: transform .3s ease;
    -webkit-transform:  translateX(100%);
    transform:  translateX(100%);
    opacity: 0;
    transform:  translateX(100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    color: #000;
  }

  .main-header.open-menu nav{
    opacity: 1;
    -webkit-transform:  translateX(0);
    transform:  translateX(0);
    padding: 10px;
  }

  #open-menu{
    -webkit-transition:  background .5s ease;
    transition:  background .5s ease;
    background-color: #fff;
    width:  20px;
    height: 20px;
    border-radius: 100%;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
  }

  .main-header.black-color #open-menu{
    background-color: #000;
  }

  .main-header.open-menu #open-menu{
    background-color: #000;
  }

  .main-header.open-menu nav ul{
    font-size: 3.5555555556rem;
    position: absolute;
    bottom: 17vh;
    line-height: 1;
  }
}

@media screen and (min-width: 768px){
  .main-header.open-menu nav ul{
    font-size: 7.1111111111rem;
  }
}