*{margin: 0px; padding: 0px;}
html{font-size: 16px !important;}
ul, ol{ list-style: none;}
a, li{text-decoration: none !important;}
a img{border:none !important;}
body{font-family: Helvetica, Sans-serif; font-size: 1em;}
header, footer, section, article, figure, aside, video, audio, hgroup, nav{display: block;}
.clear{clear: both;}
.left{float: left;}
.right{float: right;}
.block{display: block}
.inline-block{display: inline-block}
.blue{background-color: blue;}
.border-box{box-sizing: border-box;}
iframe{display: block; width: 100%;}
.pr{padding-right: 10px;}
.pl{padding-left: 10px;}
.pt{padding-top: 10px;}
.pb{padding-bottom: 10px;}
.mr{margin-right: 10px;}
.ml{margin-left: 10px;}
.mt{margin-top: 10px;}
.mb{margin-bottom: 10px;}
.hidden{overflow: hidden;}
.flex-vertical{display: flex; align-items: flex-start;}

.works-img > picture > img {
    width: 101%;    /* width: auto; */
    /* height: 100%; */
    height: auto;
}

a { color: inherit; }



.intro > section{
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

.intro-wrapper{
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

.works a{color: white;}
.intro-bottom a:hover{color: white;text-decoration: underline;}
.work-bottom a:hover{color: white;text-decoration: underline;}
.underline{text-decoration: underline !important;}


.modal-wrapper{
  width: 96vw;
  margin: 0 auto;
  position: relative;

}



html{
  background-color: #1c1c1c;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body{
  background-color: #1c1c1c;
  font-family:"AT Surt Extended";
  color: white;
}

nav{
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  top: 20px;
  box-sizing: border-box;
}
.about-nav{
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  top: 20px;
  box-sizing: border-box;
}


nav{
  position: fixed;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  top: 20px;
  box-sizing: border-box;
  height: 25px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  z-index: 997;
}

.about-nav{
  position: fixed;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  top: 20px;
  box-sizing: border-box;
  height: 25px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  z-index: 997;
}

.logo{
  height: 100%;
}

.height-100{
  height: 100%;
}

#show {
  cursor: pointer;
  /* padding: 0; */
}

#show,
#close {
  /* display: block; */
  /* height: 100%; */
  cursor: pointer;
}
#dialog {
  display: none;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 998;
  background-color: #1c1c1c;
  color: #fff;
}
#dialog.show {
  display: block;
}




/* INTRO CSS */

.wrapper{
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}


.noscroll{overflow: hidden;}
.sub-title{margin-bottom: 4.2vh;}


h1{font-weight: 100; font-size: 53px; line-height: 1.2em; display: inline-block;}
h2{font-weight: 100; font-size: 36.8px; line-height: 1.4em;}
h3{font-weight: 100; font-size: 25.6px; line-height: 1.4em;}
h4{font-weight: 100; font-size: 16px; }
.bold{font-weight: 300;}
.grey{color: #737373;}

.intro-wrapper{
  height: -webkit-fill-available;
  height: 100vh;
  box-sizing: border-box;
  display: block;
  margin-bottom: 8vh;
  position: relative;
}



.intro{
  /* padding-top: 31.5vh; */
  height: 95vh;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  flex-wrap: wrap;
  align-items: center;
}



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

.pres1{
  width: 63%;
  margin-right: 3%;
  min-width: 690px;
  max-width: 1200px;
}
.pres2{
  min-width: 300px;
  width: 29%;
  height: 100%;
}

.intro-bottom{
  width: 100%;
  position: absolute;
  bottom: 1.5vw;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: flex-end;
  justify-content: space-between;
  align-items: flex-end;
}



.intro-bottom ul{
  width: 48.9%;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.intro-bottom ul li{
  width: 30%;
  display: inline-block;
  font-size: 16px;
}
.intro-arrow{
  width: 45px;
  border-left: 1.5px solid white;
  border-right: 1.5px solid white;
  height: 100px;
  writing-mode: vertical-rl;
  overflow-y: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  text-align: center;
}

.intro-bottom ul li:nth-child(4),
.intro-bottom ul li:nth-child(5)
{
  display: none;
}


/* ////////WORKS SECTION////// */

.works{
  padding-top: 8vh;
  padding-bottom: 8vh;
  box-sizing: border-box;
  border-top: 1.5px solid #737373;
  border-bottom: 1.5px solid #737373;
  display: block;
}

.works-items{
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  -webkit-align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-item{
  box-sizing: border-box;
  padding-bottom: 13px;
}


.flex-item:nth-child(1),
.flex-item:nth-child(3),
.flex-item:nth-child(6){
  padding-right: 10px;
}

.flex-item:nth-child(4),
.flex-item:nth-child(7){
  padding-left: 10px;
  padding-right: 10px;
}

.flex-item:nth-child(2),
.flex-item:nth-child(5),
.flex-item:nth-child(8){
  padding-left: 10px;
}


.w12{
  width: 100%;
}



.w6{
  width: 50%;
}

.w6-calc{width: calc(50% - 10px)}

.w5{
  width: 41.6%;
}

.w4{
  width: 33.3%;
}

.w3{
  width: 25%;
}

.works-img{
  width: 100%;
  height: 27vw;
  background-color: white;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 4;
  opacity: 0;
}

.flex-item:hover .overlay{
  opacity: 0.5;
  transition: 0.2s;
}

.title-work{
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  box-sizing: border-box;
  padding-top: 10px;
  margin-bottom: 10px;
}

.work-section{
  width: 100%;
}

/* /////////////////// */

/* ////////   FOOTER  /////////// */
.footer-wrapper{
  min-height: 100vh;
  box-sizing: border-box;
  display: block;
  position: relative;
}

.info{
  position: relative;
  width: 100%;
  padding-top: 30vh;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
.info section:nth-child(1) {
  padding-right: 11%;
  margin-bottom: 50px;
}

.info section:nth-child(2) {
  padding-bottom: 20vh;
}



/* INTRO ABOUT */

.about-intro{
  position: fixed;
  padding-top: 31.5vh;
  min-height: 100vh;
  width: 95%;
  box-sizing: border-box;
}

.about-intro-bottom{
  width: calc(100% + 2.387%);
  position: absolute;
  bottom: 1.5vw;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: flex-end;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 999;
}

.about-intro-bottom ul{
  width: 48.9%;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.about-intro-bottom ul li{
  width: 30%;
  display: inline-block;
}



.about-content{
  position: relative;
  padding-top: 40vh;
  width: 51%;
  left: 42.5%;
  padding-bottom: 1.5vw;
}

.about-content h3{
  margin-bottom: 9.1vh;
  line-height: 1.3em; */
}

.about-content h4{
  /* padding-bottom: 3.5vh; */
  font-weight: 100;
  line-height: 1.3em;
}


/*
font-weight: 100;
line-height: 1.3em; */

.about-content-img-container{
  width: 100%;
  padding-top: 9.1vh;
  margin-top: 9.1vh;
  padding-bottom: 9.1vh;
  margin-bottom: 9.1vh;
  border-top: 1.5px solid #737373;
  border-bottom: 1.5px solid #737373;
}

.about-content-img{
  width: 100%;
  height: 100%;
  background-color: white;
}

.about-height{
  position: relative;
  max-height: 1920px;
}


/* WORK TABS */

.work-info{
  padding-top: 31.5vh;
  padding-bottom: 31.5vh;
  display: flex;
  display: -webkit-flex;
  wrap: nowrap;
}
.work-intro{
  width: 40.4%;
  margin-right: 19.2%;
}
.work-intro ul{
  width: 100%;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-weight: 100;
  line-height: 1.3em;
  padding-top: 4.5vh;
}
.work-intro ul li{
  width: 42.1%;
  display: inline-block;
}
.work-intro ul li:nth-child(3){width: 15.8%;}
.work-description{padding-top: 6.5vh; width: 31.9%;}



.work-grid{
  position: relative;
  /* display: flex;
  justify-content: space-between;
  flex-wrap: wrap; */
  width: 100%;
  font-size: 0;
  margin-bottom: 10vw;
}





.work-grid > section {
  /* line-height: 0; */
  margin-bottom: 20px;
  /* background-color: red; */
}

.work-grid > section > section{
  display: inline-block;
}

.work-bottom{
  width: 100%;
  padding-bottom: 3.5vh;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: flex-end;
  justify-content: space-between;
  align-items: flex-end;
}
.work-bottom ul{
  width: 48.9%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.work-bottom ul li{
  width: 30%;
  display: inline-block;
  font-size: 16px;
}



.bottom-project{
  position: relative;
}

.next-prev-project{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding-top: 5vw;
  padding-bottom: 15vw;
  border-top: 1.5px solid #737373;
  color: #737373;
}

.bottom-project .intro-bottom{}

.next-prev-project a:hover{color: white;}





.img-responsive {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 101%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /* transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0,-50%); */
}

.c10{
  width: 110%;
}


/* Schermi inferiori di 1175 -> Tablet Grossi */

@media screen and (max-width: 1175px) {
  body {
  }

  .sub-title{margin-bottom: 20px;}

  .modal-wrapper{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  nav{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    top: 20px;
    box-sizing: border-box;
  }
  .about-nav{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    top: 20px;
    box-sizing: border-box;
  }

  .about-content{padding-top: 30vh;}
  .about-intro{padding-top: 23vh;}


  h1{font-weight: 100; font-size: 46.4px; line-height: 1.2em; display: inline-block;}
  h2{font-weight: 100; font-size: 33.6px; line-height: 1.4em;}
  h3{font-weight: 100; font-size: 20.8px; line-height: 1.35em;}
  h4{font-weight: 100; font-size: 16px; }
  .pres2{min-width: 600px; max-width: 600px;}

  .works{padding-top: 20px; padding-bottom: 20px;}
  .flex-item{
    margin-bottom: 20px;
  }
  .pres1{padding-bottom: 30px; width: 80%; max-width: 690px;}
  {padding-top: 25.5vh;}
  .w3{width: 50%;}
  .w4{width: 50%;}
  .w5{width: 50%;}
  .w6{width: 50%;}

  .flex-item:nth-child(odd){padding-right: 10px;}
  .flex-item:nth-child(even){padding-left: 10px;}
  .flex-item:nth-child(4){padding-right: 0;}
  .flex-item:nth-child(6){padding-right: 0;}


  .work-intro{margin-right: 12%; width: 41%;}
  .work-description{width: 42%;}

  .work-info{padding-top: 23vh; padding-bottom: 23vh;}

}

/* ABOUT BREAKPOINT */
@media screen and (max-width: 1040px) {
  .about-intro{position: relative; min-height: 20vh; margin-bottom: 30px;}
  .about-intro ul{display: none;}
  .about-content{left: 0; padding-top: 0; width: 100%;}
  .about-content h3{ width: 80%;}

  .intro-bottom ul{width: 90%;}
  .work-info{
    display: block;
  }

  .work-intro{width: 100%;}
  .work-intro ul{width: 76%; padding-top: 10px;}
  .work-description{width: 80%;}

  .ticker-hide{
    display: none;
  }

  .title-work{
    border-top: 0;
  border-bottom: 0;
  padding: 0;
  margin-bottom: 0px;
  }

  .title-work h1{
    font-weight: 300;
  }

  .ticker_item2{
    overflow: visible;
  }

  .next-prev-project{color: white;}


  .intro-wrapper{
    height: -webkit-fill-available;
    height: 100vh; ; margin-bottom: 10px;}
  .footer-wrapper{min-height: auto;}
  .info{padding-top: 10vh; height: auto;}
  .info section:nth-child(2) {padding-bottom: 20vh;
}


@media screen and (max-width: 780px) {
  html{
    overflow-x: hidden !important;
  }
  body{
  }

  .works-img > picture > img {
      /* width: 100%;
      height: auto; */
      /* width: auto;
      height: 100%; */
  }


  h1{font-weight: 100; font-size: 44.8px; line-height: 1.2em; display: inline-block;}
  h2{font-weight: 100; font-size: 32px; line-height: 1.4em;}
  h3{font-weight: 100; font-size: 20.8px; line-height: 1.35em;}
  h4{font-weight: 100; font-size: 16px; }
  .intro-arrow{display: none;}
  .intro{padding-top: 20vh; display: block; height: auto; min-height: 0; padding-bottom: 100px;}
  .intro-wrapper{margin-bottom: 10px;}
  .pres1{max-width: 510px; min-width: 500px;}
  .pres2{min-width: 400px; max-width: 700px; margin-bottom: 0;}
  .works{padding-top: 20px;}
  .w3{width: 100%;}
  .w4{width: 100%;}
  .w5{width: 100%;}
  .w6{width: 100%;}
  .flex-item{margin-right: 0;}
  .footer-wrapper{
    /* display: flex;
    align-items: center; */
    height: auto;
    min-height: auto;
    padding-top: 20vh;
  }
  .flex-item:nth-child(odd){margin-right: 0; margin-left: 0; padding-left: 0; padding-right: 0;}
  .flex-item:nth-child(even){margin-right: 0; margin-left:0; padding-left: 0; padding-right: 0;}
  .about-content h3{ width: 100%;}

  .info section:nth-child(2) {
    padding-bottom: 25vh;
  }

  .works-img{height: 400px;}

  .info{
    display: block;
    padding-top: 0;
  }
  .work-description{width: 100%; padding-top: 50px;}
  .work-intro ul{width: 90%; padding-top: 20px;}
  .work-info{padding-bottom: 50px; padding-top: 20vh;}

  .bottom-project .intro-bottom{display: none;}
}

  @media screen and (max-width: 530px) {
    html{overflow-x: hidden !important;}

    h1{font-weight: 100; font-size: 32px; line-height: 1.2em; display: inline-block;}
    h2{font-weight: 100; font-size: 22.4px; line-height: 1.4em;}
    h3{font-weight: 100; font-size: 20px; line-height: 1.35em;}
    h4{font-weight: 100; font-size: 14px; }
    .intro{min-height: 0; padding-top: 20vh; padding-bottom: 0;background-color: ;}
    .intro-wrapper{height: auto; min-height: 0; margin-bottom: 40px; padding-bottom: 0;}
    .flex-intro{padding-bottom: 0;}
    .pres1{max-width: 100%; min-width: 0; width: 100%;}
    .pres2{max-width: 90%; width: 100%; min-width: 90%; }
    .intro-arrow{display: none;}
    .intro-bottom{position: relative; bottom: 0; margin-top: 40px;}

    .about-intro{padding-top: 20vh; background-color: }
    .about-content{padding-bottom: 100px;}

    .footer-wrapper{padding-top: 13vh;}
    .info section:nth-child(2) {
      padding-bottom: 10vh;
    }

    .w3{width: 100%;}
    .w4{width: 100%;}
    .w5{width: 100%;}
    .w6{width: 100%;}
    .flex-item{margin-right: 0;}
    .works-img{height: 90vw; auto;}
    .intro-bottom ul li{
      width: 50%;
      color: white;
      font-size: 14px;
    }
    .intro-bottom ul li:nth-child(1),
    .intro-bottom ul li:nth-child(2),
    .intro-bottom ul li:nth-child(3)
    {display: none;}

    .intro-bottom ul li:nth-child(4),
    .intro-bottom ul li:nth-child(5)
    {display: block;}

    .footer-wrapper .intro-bottom ul li{
      color: #737373;
      font-size: 12.8px;
      line-height: 1.3em;
    }


    .footer-wrapper .intro-bottom{
      padding-bottom: 20px;
    }

    .work-intro ul{display: block;}
    .work-intro ul li{ font-size: 14px; line-height: 20px; width: 49%;
       vertical-align: top; margin-bottom: 20px;}
    .work-intro ul li:nth-child(3){width: auto;}
    .work-description{padding-top: 0;}
    /* .work-description h4{font-size: 17.8px} */
    .img-responsive{
      width: 101%;
      height: auto;
    }
}

@media screen and (max-width: 370px) {
  html{overflow-x: hidden !important;}

  h1{font-weight: 100; font-size: 26px; line-height: 1.2em; display: inline-block;}
  h2{font-weight: 100; font-size: 18px; line-height: 1.4em;}
  h3{font-weight: 100; font-size: 16px; line-height: 1.35em;}
  h4{font-weight: 100; font-size: 12.8px; }
  .work-intro ul li{ font-size: 12.8px; line-height: 20px;}
  .work-intro ul li:nth-child(3){display: none;}
  /* .work-description h4{font-size: 17.8px} */

}