/* DEFAULT */



body {

  font-family: 'Lato', sans-serif;

  font-weight: 400;

  font-style: normal;

  line-height: 1.3;

  color: #333;

  background-color:#cccccc;

  overflow: visible;

}



h1, h2 {

  color: #f4f4f4;

}



h1 {

  font-size: 2.4em;

}



h2 {

  font-size: 1.8em;

}



/* LINK */



a {

  font-size: 14px;

  line-height: 1.2;

  color: #333;

}



a:hover, .active {

  color: #396ca5;

}



/* LIST */



ul, ol {

  list-style: none;

  margin: 0;

  padding: 0;

}



li {

  margin: 0;

}



/* IMAGES */



img {

  width: 100%;

}



/* PRELOADER */



#preloader {

  background: #fafafa;

  bottom: 0;

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

  z-index: 9999;

}



#status {

  background-image: url("../../assets/img/preloader.gif");

  background-position: center;

  background-repeat: no-repeat;

  height: 200px;

  left: 50%;

  margin: -100px 0 0 -100px;

  position: absolute;

  top: 50%;

  width: 200px;

}



/* DEBUG */



/* section {

  outline: 1px solid red;

} */





/*LOADER IMG */



.img-fluid {

  opacity: 0;

}



.preloader-spinner {

  display: block; 

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate3d(-50%, -50%,0);

  -webkit-transform: translate3d(-50%, -50%,0);

  -moz-transform: translate3d(-50%, -50%,0);

  -ms-transform: translate3d(-50%, -50%,0);

  -o-transform: translate3d(-50%, -50%,0);

}



.loader-off .preloader-spinner {

 display: none; 

}



.spinner

{

  stroke:#fafafa;

  -webkit-animation: rotation 1.35s linear infinite;

  animation: rotation 1.35s linear infinite;

}



@-webkit-keyframes rotation

{

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(270deg);

    transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    -ms-transform: rotate(270deg);

    -o-transform: rotate(270deg);

  }

}



@keyframes rotation

{

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

}



  100% {

    -webkit-transform: rotate(270deg);

    transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    -ms-transform: rotate(270deg);

    -o-transform: rotate(270deg);

}

}



.circle

{

  stroke-dasharray: 180;

  stroke-dashoffset: 0;

  -webkit-transform-origin: center;

  -ms-transform-origin: center;

  transform-origin: center;

  -webkit-animation: turn 1.35s ease-in-out infinite;

  animation: turn 1.35s ease-in-out infinite;

}



@-webkit-keyframes turn

{

  0% {

    stroke-dashoffset: 180;

  }



  50% {

    stroke-dashoffset: 45;

    -webkit-transform: rotate(135deg);

    transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -ms-transform: rotate(135deg);

    -o-transform: rotate(135deg);

  }



  100% {

    stroke-dashoffset: 180;

    -webkit-transform: rotate(450deg);

    transform: rotate(450deg);

    -moz-transform: rotate(450deg);

    -ms-transform: rotate(450deg);

    -o-transform: rotate(450deg);

  }

}



@keyframes turn

{

  0% {

    stroke-dashoffset: 180;

  }



  50% {

    stroke-dashoffset: 45;

    -webkit-transform: rotate(135deg);

    transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -ms-transform: rotate(135deg);

    -o-transform: rotate(135deg);

  } 



  100% {

    stroke-dashoffset: 180;

    -webkit-transform: rotate(450deg);

    transform: rotate(450deg);

    -moz-transform: rotate(450deg);

    -ms-transform: rotate(450deg);

    -o-transform: rotate(450deg);

  }

}





.fadeIn {

  opacity: 1;

  transition: all 0.4s ease-in;

  -webkit-transition: all 0.4s ease-in;

  -moz-transition: all 0.4s ease-in;

  -ms-transition: all 0.4s ease-in;

  -o-transition: all 0.4s ease-in;

}





/* COMPONENTI */



header {

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  background-color:#ffffff;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  -moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  -ms-transition: all 0.3s cubic-bezier(.25,.8,.25,1);

  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}



/* MENU */



.menu-container {

  display: flex;

  align-items: flex-end;

  height: 140px;

}



.menu-container-small {

  height: 100px;

}



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

  

  .menu-container {

    height: 80px;

    align-items: center;    

  }



  .navbar  {

    padding: 0;

  }

  

  .navbar-brand {

    display: flex;

    align-items: center;

    height: 80px;

    padding: 0;

  }



  .menu-container-small .navbar-brand {

    height: 50px;

  }

  

  .navbar-brand img {

    height: 70%;

    width: auto;

  }



  .menu-container-small .navbar-brand img {

    height: 100%;    

  }

   

  .menu-container-small {

    height: 80px;

  }

  

}



.menu-item {

  font-weight: 600;

  text-transform: uppercase;

}



/* MENU MOBILE  */



.menu-icon-wrapper {

  display: none;

}



.overlay-mobile {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: all .7s 1.8s ease; 

  background: rgba(255,255,255,0.4);

}





.mobile-menu-container {

  display: none;  

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

}

.ie .mobile-menu-container {

  position: static;  
  
}
     

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

  .menu-mobile-visible {

    height: 100%;

    overflow: hidden;

  }


  .menu-icon-wrapper {

    position: relative;

    display: inline-block;

    width: 34px;

    height: 34px;

    margin: 7px;

    pointer-events: none;

    transition: 0.1s;

    z-index: 4;

  }

  

  .menu-icon-wrapper.scaled {

    -webkit-transform: scale(0.5);

    -ms-transform: scale(0.5);

    transform: scale(0.5);

  }

  

  .menu-icon-wrapper svg {

    position: absolute;

    top: -33px;

    left: -33px;

    -webkit-transform: scale(0.1);

    -ms-transform: scale(0.1);

    transform: scale(0.1);

    -webkit-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

  }

  

  .menu-icon-wrapper svg path {

    stroke: #333;

    stroke-width: 60px;

    stroke-linecap: round;

      stroke-linejoin: round;

    fill: transparent;

  }

  

  .menu-icon-wrapper .menu-icon-trigger {

    position: relative;

    width: 100%;

    height: 100%;

    cursor: pointer;

    pointer-events: auto;

    background: none;

    border: none;

    margin: 0;

    padding: 0;

  }

  

  .menu-icon-wrapper .menu-icon-trigger:hover,

  .menu-icon-wrapper .menu-icon-trigger:focus {

    color: #333;

    outline: none;

  }



  .menu-mobile--open .overlay-mobile {

    height: 100%;

    opacity: 0.9;

    background-color: #fff;  

  }



  .menu-mobile  {

    display: block;

    position: fixed;

    width: 100%;

    opacity: 1;

    top: 50%;

    left: 50%;

    transform: translate3d(-50%, -50%, 0);  

  }



  .menu-mobile--open .menu-mobile {

    transition: all 0.8s ease;

    height: auto;

    visibility: visible;

  }





  .menu-item-mobile {

    width: 100%;

    text-align: center;

  }



  .menu-item-mobile a {

    font-size: 34px;

    padding: 0.8rem 1rem;

  }



  .menu-mobile--open .menu-item-mobile {

    -webkit-animation: scaleUp .7s ease both;

    animation: scaleUp .7s ease both;

  }



  .menu-mobile--close .menu-item-mobile {

    -webkit-animation: scaleDown .7s ease both;

    animation: scaleDown .7s ease both;

  }



  .menu-mobile--open .menu-item-mobile:nth-child(1) {

    animation-delay: 0.3s

  }

  

  .menu-mobile--open .menu-item-mobile:nth-child(2) {

    animation-delay: 0.6s

  }

  

  .menu-mobile--open .menu-item-mobile:nth-child(3) {

    animation-delay: 0.9s

  }

  

  .menu-mobile--open .menu-item-mobile:nth-child(4) {

    animation-delay: 1.2s

  }

  

  .menu-mobile--open .menu-item-mobile:nth-child(5) {

    animation-delay: 1.5s

  }

  .menu-mobile--open .menu-item-mobile:nth-child(6) {

    animation-delay: 1.8s

  }

  .menu-mobile--close .menu-item-mobile:nth-child(6) {

    animation-delay: 0s

  }
  .menu-mobile--close .menu-item-mobile:nth-child(5) {

    animation-delay: 0.3s

  }

  

  .menu-mobile--close .menu-item-mobile:nth-child(4) {

    animation-delay: 0.6s

  }

  

  .menu-mobile--close .menu-item-mobile:nth-child(3) {

    animation-delay: 0.9s

  }

  

  .menu-mobile--close .menu-item-mobile:nth-child(2) {

    animation-delay: 1.2s

  }

  

  .menu-mobile--close .menu-item-mobile:nth-child(1) {

    animation-delay: 1.5s

  } 



}



/* SECTIONS */



section {

  position: relative;

  padding-top: 100px;

}





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

  

  section {

    padding-top: 50px;

  }

  

}



[id="portfolio"] {

  color: #808080;

}



[id="servizi"] {

  color: #fafafa;

}





/* HOME */



/* SLIDE RIGHT ANIMATION IMAGES*/



[id="home"] {

  position: relative;

  overflow: hidden;

}



[id="home"] img {

  position: absolute;

}



.home-section-image  {

  position: absolute;

  width: 100%;

  height: 100%;

  overflow: hidden;

} 



.home-images {

  display: none;

  opacity:0;

}



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



  .home-images {

    display: block;

    animation: fade-in 1.5s ease;

    -webkit-animation: fade-in 1.5s ease;

    opacity:1;

  }



  .home-section-image {

    display: none;

  }

  

  .home-images img {

    position: relative;

  }



  .home-title {

    margin-left: 0;

  }

  

}



.home-section-on .home-section-image img{

  position: absolute;

}



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

  

  .home-section-on .home-section-image img {

    position: relative;

    transform: none;

    -webkit-transform: none;

    -moz-transform: none;

    -ms-transform: none;

    -o-transform: none;

}

  

}

.home-section-desktop img{

  width: 589px;

  transform: translate3d(-100%, 19% ,0);

  transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);

  z-index: 1;

  -webkit-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);

  -moz-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);

  -ms-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);

  -o-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);

  -webkit-transform: translate3d(-100%, 19% ,0);

  -moz-transform: translate3d(-100%, 19% ,0);

  -ms-transform: translate3d(-100%, 19% ,0);

  -o-transform: translate3d(-100%, 19% ,0);

}



.home-section-portatile img{

  width: 569px;

  transform: translate3d(-100%, 95% ,0);

  transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;

  z-index: 2;

  -webkit-transform: translate3d(-100%, 95% ,0);

  -moz-transform: translate3d(-100%, 95% ,0);

  -ms-transform: translate3d(-100%, 95% ,0);

  -o-transform: translate3d(-100%, 95% ,0);

  -webkit-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;

  -moz-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;

  -ms-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;

  -o-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;

}



.home-section-tablet img{

  width: 294px;

  transform: translate3d(-100%, 217% ,0);

  -webkit-transform: translate3d(-100%, 217% ,0);

  -moz-transform: translate3d(-100%, 217% ,0);

  -ms-transform: translate3d(-100%, 217% ,0);

  -o-transform: translate3d(-100%, 217% ,0);

  transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;

  -webkit-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;

  -moz-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;

  -ms-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;

  -o-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;

  z-index: 3;

}



.home-section-phone img{

  width: 102px;

  transform: translate3d(-100%, 218% ,0);

  transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -webkit-transform: translate3d(-100%, 218% ,0);

  -moz-transform: translate3d(-100%, 218% ,0);

  -ms-transform: translate3d(-100%, 218% ,0);

  -o-transform: translate3d(-100%, 218% ,0);

  -webkit-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -moz-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -ms-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -o-transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  z-index: 4;

}

 

.home-section-on .home-section-desktop img{

  transition-delay: 0.2;

  transform: translate3d(16%, 19%, 0);

  -webkit-transform: translate3d(16%, 19%, 0);

  -moz-transform: translate3d(16%, 19%, 0);

  -ms-transform: translate3d(16%, 19%, 0);

  -o-transform: translate3d(16%, 19%, 0);

}



.home-section-on .home-section-portatile img{

  transition-delay: 0.4;

  transform: translate3d(94%, 95% ,0);

  -webkit-transform: translate3d(94%, 95% ,0);

  -moz-transform: translate3d(94%, 95% ,0);

  -ms-transform: translate3d(94%, 95% ,0);

  -o-transform: translate3d(94%, 95% ,0);

}



.home-section-on .home-section-tablet img{

  transition-delay: 0.8;

  transform: translate3d(125%, 217% ,0);

  -webkit-transform: translate3d(125%, 217% ,0);

  -moz-transform: translate3d(125%, 217% ,0);

  -ms-transform: translate3d(125%, 217% ,0);

  -o-transform: translate3d(125%, 217% ,0);

}



.home-section-on .home-section-phone img{

  transition-delay: 1.2;

  transform: translate3d(1039px, 218% ,0);

  -webkit-transform: translate3d(1039px, 218% ,0);

  -moz-transform: translate3d(1039px, 218% ,0);

  -ms-transform: translate3d(1039px, 218% ,0);

  -o-transform: translate3d(1039px, 218% ,0);

}



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



  .home-section-desktop img {

    transform: translate3d(-114%, 19%, 0);

    -webkit-transform: translate3d(-114%, 19%, 0);

    -moz-transform: translate3d(-114%, 19%, 0);

    -ms-transform: translate3d(-114%, 19%, 0);

    -o-transform: translate3d(-114%, 19%, 0);

  }

    

  .home-section-portatile img {

    transform: translate3d(-114%, 119% ,0);

    -webkit-transform: translate3d(-114%, 119% ,0);

    -moz-transform: translate3d(-114%, 119% ,0);

    -ms-transform: translate3d(-114%, 119% ,0);

    -o-transform: translate3d(-114%, 119% ,0);

  }



  .home-section-tablet img {

    transform: translate3d(-114%, 222% ,0);

    -webkit-transform: translate3d(-114%, 222% ,0);

    -moz-transform: translate3d(-114%, 222% ,0);

    -ms-transform: translate3d(-114%, 222% ,0);

    -o-transform: translate3d(-114%, 222% ,0);

  }



  .home-section-phone img {

    transform: translate3d(-114%, 293% ,0);

    -webkit-transform: translate3d(-114%, 293% ,0);

    -moz-transform: translate3d(-114%, 293% ,0);

    -ms-transform: translate3d(-114%, 293% ,0);

    -o-transform: translate3d(-114%, 293% ,0);

  }



  .home-section-on .home-section-desktop img{

    width: 449px;

  }



  .home-section-on .home-section-portatile img {

    width: 429px;

    transform: translate3d(75%, 119% ,0);

    -webkit-transform: translate3d(75%, 119% ,0);

    -moz-transform: translate3d(75%, 119% ,0);

    -ms-transform: translate3d(75%, 119% ,0);

    -o-transform: translate3d(75%, 119% ,0);

  }

  

  .home-section-on .home-section-tablet img{

    width: 244px;

    transform: translate3d(125%, 222%, 0px);

    -webkit-transform: translate3d(125%, 222%, 0px);

    -moz-transform: translate3d(125%, 222%, 0px);

    -ms-transform: translate3d(125%, 222%, 0px);

    -o-transform: translate3d(125%, 222%, 0px);

  }



  .home-section-on .home-section-phone img {

    width: 69px;

    transform: translate3d(684px, 293% ,0);

    -webkit-transform: translate3d(684px, 293% ,0);

    -moz-transform: translate3d(684px, 293% ,0);

    -ms-transform: translate3d(684px, 293% ,0);

    -o-transform: translate3d(684px, 293% ,0);

  }



}



/* SLIDE UP ANIMATION TITLES */



.home-title {

  position: relative;

  margin-top: 8em;

  z-index: 8;

  overflow: hidden

}



.home-title h1, .home-title h2, .home-title h3, .home-title h4 {

  transform: translate3d(0, -500px, 0);

  -webkit-transform: translate3d(0, -500px, 0);

  -moz-transform: translate3d(0, -500px, 0);

  -ms-transform: translate3d(0, -500px, 0);

  -o-transform: translate3d(0, -500px, 0);

} 



.home-section-on .home-title h1,  .home-section-on .home-title h2, .home-section-on .home-title h3, .home-section-on .home-title h4 {

  transform: translate3d(0, 0, 0);

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  -o-transform: translate3d(0, 0, 0);

}



.home-title h1 {

  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

  -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;

}



.home-title h2 {

  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;

  -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;

  -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;

  -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;

  -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;

}



.home-title h3 {

  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.4s;

  -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.4s;

  -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.4s;

  -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.4s;

  -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.4s;

}



.home-title h4 {

  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;

  -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;

  -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;

  -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;

  -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;

}



.home-title hr {

  width: 0;

  border-top: 2px solid #FFF;

  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 2s;

  -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 2s;

  -moz-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 2s;

  -ms-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 2s;

  -o-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 2s;

}



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

  .home-title h1 { font-size: 2.1em; }

  .home-title h2 { font-size: 1.6em; }

  .home-title h3 { font-size: 1.45rem; }

  .home-title h4 { font-size: 1.3em; }

}

 

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



  .home-title {

    overflow: visible;

  }



  .home-title h1, .home-title h2, .home-title h3, .home-title h4 {

    transform: none;

    -webkit-transform: none;

    -moz-transform: none;

    -ms-transform: none;

    -o-transform: none;

    transition: none;

    -webkit-transition: none;

    -moz-transition: none;

    -ms-transition: none;

    -o-transition: none;

  }



}



.home-section-on .home-title hr {

  width: 100%;

}



/* CURRICULUM */



.curriculum-item {

  margin: 40px 0; 

  position: relative;

  overflow: hidden;

}



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

  

  .curriculum-item {

    margin: 20px 0; 

  }



}



.curriculum-item.first {

  flex-direction: row-reverse;

}



.curriculum-text {

  flex-direction: column;

}



.curriculum-text h1 {

  font-size: 1.8em;

  flex-grow: 1;

}



.curriculum-text h2, .curriculum-text a{

  text-transform: uppercase;

}



.curriculum-text h2 {

  font-size: 1.3em;

  margin: 0;

  flex-grow: 0.02;

}

.curriculum-text a {

  font-size: 1.1em;

  color: #396ca5;

}



.curriculum-text hr {

  width: 100%;

  border-top: 1px solid #fafafa94;

}



.curriculum-image, .curriculum-text, .curtain {

  opacity: 0;

}



.curriculum-image, .curriculum-text {

  z-index: 1;

}



.curriculum-item .curriculum-text {

  padding: 30px 40px;

}



.curriculum-item.first .curriculum-text {

  text-align: right;

}



.curriculum-item .curriculum-text {

  text-align: left;

}



/* SWIPE RIGHT EFFECT */



.curtain {

  position: absolute;

  left: -50%;

  top: 0;

  width: 180%;

  height: 100%;

  opacity: 1;

  background-color: #333;

  pointer-events: none;

  transform: translate3d(100%,0,0);

  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

  z-index: 3;

  -webkit-transform: translate3d(100%,0,0);

  -moz-transform: translate3d(100%,0,0);

  -ms-transform: translate3d(100%,0,0);

  -o-transform: translate3d(100%,0,0);

}



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

  

  .curriculum-item {

    background-color: #333;

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

  }



  .curtain {

    display: none;  

  }



  .curriculum-image, .curriculum-text {

    opacity: 1;

  }



  .curriculum-item .curriculum-text {

    padding: 10px 20px;

    margin-top: 3%;

  }



  .curriculum-text h1 {

    font-size: 1.3em;

    flex-grow: 0.4;

  }

  

  .curriculum-text h2, .curriculum-text a{

    text-transform: uppercase;

  }

  

  .curriculum-text h2 {

    flex-grow: 0.1;

    font-size: 1em;

  }



  .curriculum-text hr {

    flex-grow: 0.1;

    margin: 0;

  }



  .curriculum-text a {

    flex-grow: 0.2;

    font-size: 0.8em;

  }

  



}



/* CURTAIN ACTIVE */



.curtain-on .curtain, .curtain-active .first .curtain {

  opacity: 1;

  pointer-events: visible;

}



.curtain-on .curtain{

  animation: slide-left 1.8s ease;

  transform: translate3d(50.9%,0,0);

  z-index: 1;

  -webkit-transform: translate3d(50.9%,0,0);

  -moz-transform: translate3d(50.9%,0,0);

  -ms-transform: translate3d(50.9%,0,0);

  -o-transform: translate3d(50.9%,0,0);

}



.curtain-on .first .curtain {

  animation: slide-right 1.8s ease;

  transform: translate3d(-39.82%,0,0);

  z-index: 1;

  -webkit-transform: translate3d(-39.82%,0,0);

  -moz-transform: translate3d(-39.82%,0,0);

  -ms-transform: translate3d(-39.82%,0,0);

  -o-transform: translate3d(-39.82%,0,0);

}



.curriculum-on .curriculum-item {

  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}



.curriculum-on .curriculum-image {

  opacity: 1;

  transition: opacity 0.01s ease;

  -webkit-transition: opacity 0.01s ease;

  -moz-transition: opacity 0.01s ease;

  -ms-transition: opacity 0.01s ease;

  -o-transition: opacity 0.01s ease;

}



.curriculum-on .curriculum-text  {

  opacity: 1;

  animation: fade-in 1.5s ease;

  z-index: 2;

  -webkit-animation: fade-in 1.5s ease;

}



/* SWIPE DOWN EFFECT */



.servizi-container {

  overflow: hidden;

}



.servizi-item {

  -webkit-transform: translate3d(0,-120%,0);

  transform: translate3d(0,-120%,0);

  transition: all 1s ease;

  -moz-transform: translate3d(0,-120%,0);

  -ms-transform: translate3d(0,-120%,0);

  -o-transform: translate3d(0,-120%,0);

  -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -ms-transition: all 1s ease;

  -o-transition: all 1s ease;

}



.servizi-on .servizi-item {

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  -o-transform: translate3d(0, 0, 0);

}

.servizi-item img {

  height: 100%;

}

.servizi-1 {

  transition-delay: 0.4s

}



.servizi-2 {

  transition-delay: 0.6s

}



.servizi-3 {

  transition-delay: 0.8s

}



.servizi-4 {

  transition-delay: 1s

}





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

  

  .servizi-container {

    overflow: visible;

  }

  

  .servizi-item {

    height: 600px;

    overflow: hidden;

    transform: none;

    -webkit-transform: none;

    -moz-transform: none;

    -ms-transform: none;

    -o-transform: none;

  }



  .project-title h2 {

    font-size: 1.5em;

    /*text-shadow: 1px 1px 3px #0000009c;*/
    text-shadow: 0.02em 0.02em 0.01em #000;

  }



  .site-link {

    font-size: 0.8em;

  }



}

/* CONTATTI */



/* https://codepen.io/mildrenben/pen/raqJvy */



[id="contatti"] {

  padding: 0;

  min-height: 680px !important;

}



.contacts-container {

  min-height: 680px !important;  

}



.form-container {
  padding: 100px 0;
  justify-content: flex-end;
  background-color: #f4f4f4;
}

[id="spybot"] {
  display: none;
}


.form-container input {

  margin: 20px 0;

}



form {

  width: 50%;

  padding: 40px;

  border-radius: 3px;

  color: #333;

}

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



  form {

    width: 100%;

    margin: 0 20px;

    background-color: #f4f4f4;

    -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);

    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);

  }



  .form-container {

    padding: 40px 0 0 0;

    background-color: transparent;

  }



}



input {

  width: 100%;

}



input, textarea {

  font-size: 0.8em;

  width: 100%;

  display: block;

  border: none;

  padding: 20px 0 10px;

  border-bottom: solid 1px #396ca5;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(96%, rgba(255, 255, 255, 0)), color-stop(4%, #396ca5));

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #396ca5 4%);

  background-position: -108vw 0;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  -webkit-transition: background 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

  transition: background 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

  resize: none;

  overflow: hidden;

}



input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {

  color: #396ca5;

}  

input::-webkit-input-placeholder,

textarea::-webkit-input-placeholder {

  transition: transform 0.3s ease-in-out,

    font-size 0.3s ease-in-out,

    visibility 0.3s ease-in-out;

}



input:focus::-webkit-input-placeholder, 

input:valid::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder, 

textarea:valid::-webkit-input-placeholder {

  font-size: 0.8em;

  transform: translateY(-20px);

  visibility: visible !important;

  opacity: 1;

}  



.validation-text {

  visibility: visible;

  color: #e91e63;

}





input[type="email"]~span.validation-text {

  position: absolute;

  visibility: hidden;

  font-family: 'roboto', sans-serif;

  font-size: 0.6em;

  margin-top:-5px;

  color: #fafafa;

  transition: color 0.3s ease-in-out;

}

input[type="email"]:not([value=""])::-webkit-input-placeholder {

  font-size: 0.8em;

  transform: translateY(-20px);

  visibility: visible !important;

  opacity: 1;

}



input[type="email"]:not([value=""]):focus::-webkit-input-placeholder {

  color: #396ca5;

}



input[type="email"]:not([value=""]):focus:not(:valid)::-webkit-input-placeholder {

  color: #e91e63;

}



input:focus, textarea:focus {

  box-shadow: none;

  outline: none;

  background-position: 0 0;

}

input[type="email"]:focus {

  background-position: 0px 1px;

}

input[type="text"]:focus {

  background-position: 0px 0px;

}

input:focus:not(:valid):not([value=""]) {

  border-bottom: solid 1px #e91e63;

  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #e91e63 4%);

}



input:not(:focus):not(:valid):not([value=""])::-webkit-input-placeholder {

    color: #e91e63;

}



input:not(:focus):not(:valid):not([value=""]) {

  border-bottom: solid 1px #e91e63;

  background-position: 0 0 ;

  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #e91e63 4%);

} 



input:not(:focus):not(:valid):not([value=""])~span.validation-text {

  visibility: visible;

  color: #e91e63;

}



.flex {

  display: flex;

  align-items: stretch;

}



.flex textarea {

  line-height: 120%;

}



button {

  transition: transform 0.2s cubic-bezier(.64,.09,.08,1);

  border: none;

  background: #396ca5;

  cursor: pointer;

  border-radius: 3px;

  padding: 6px;

  color: #fafafa;

  margin: 30px 0 0 25px;

}



button:hover { 

  transform: translateY(-2px);

}



/* SOCIAL BUTTONS */



.social-buttons-container {

  display: flex;

  flex-direction: column;

  align-items: center; 

  justify-content: space-evenly;

  position: relative;

  width: 100%;

}

.safari .social-buttons-container {

  justify-content: center;

}

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

  

  .social-buttons-container {

    flex-direction: row;

    left: 0;

    top: 0;

  }



}



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

  

  .social-buttons-container {

    flex-direction: row;

    left: 0;

    top: 0;

  }



}

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

  .social-buttons-container {

    display: block;

    position: relative;

    min-height: 100px;

  }

  

  .social_button {

    position: absolute;

  }

  

  .social_button:nth-child(1), .social_button:nth-child(2), .social_button:nth-child(3)  {

    left: 40px;

  }



  .social_button:nth-child(4), .social_button:nth-child(5), .social_button:nth-child(6)  {

    right: 0;

    transform: translate3d(-50%, 0, 0);

  }



  .social_button:nth-child(1), .social_button:nth-child(4) {

    top: 20px

  }



  .social_button:nth-child(2), .social_button:nth-child(5) {

    top: calc(36.3px + 40px) 

  }



  .social_button:nth-child(3), .social_button:nth-child(6) {

    top: calc(72.6px + 60px)      

  }





}



.social_button {

  display: inline-block;

  width: 59px;

  overflow: hidden;

}

.safari .social_button {
  margin-bottom: 5%; 
}

.safari .social_button:last-child {
  margin-bottom: 0;
}

.social_button img {

  width: calc(59px * 2);

  transform: translate3d(0, 0, 0);

  transition: all 0.4s cubic-bezier(0.64, 0.09, 0.08, 1);

}



.social_button:hover img {

  transform: translate3d(-50%, 0, 0);  

}



@media only screen and (min-width:992px) { 

  

  .social_button { 

    width: calc(88.5px);

  }

  .social_button img {

    width: calc(88.5px * 2);

  }

}



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

  .social_button { 

    width: 59px;

  }

  .social_button img {

    width: calc(59px * 2);

  }

}



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



  .social_button { 

    width: 73px;

  }

  

  .social_button img {

    width: calc(73px * 2);

  }



}





/* FOOTER */



.footer {

  text-align: center;

  background-color: #333;

  color: #f4f4f4;

}



.privacy-cookies {

  padding: 20px;

}



.privacy-cookies span:nth-child(1){

  text-align: right;

  border-right: 1px solid #f4f4f4; 

  width: 50%;

  white-space: nowrap;  

}



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

  .privacy-cookies span:nth-child(1){
    white-space: normal;  
  }

}



.privacy-cookies span:nth-child(2){

  text-align: left;
  
  width: 50%;

}



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

  .footer .privacy-cookies span{
	  display: block;
	  width: 100%;
	  text-align: center;
	  white-space: nowrap;  
  }

  .privacy-cookies span:nth-child(1){	  
	display: block;
  	border-right:none;
    margin-bottom: 8px;  
  }

}




/* OVERLAY EFFECT */



.item-overlay {

  position: relative; 

  overflow: hidden;

}



/* FADE IN EFFECT */



.overlay, .project-title, .site-link {

  position: absolute;

}



.overlay, .item-overlay img {

  -webkit-transition: all 0.2s ease-in;

  transition: all 0.2s ease-in;

  -moz-transition: all 0.2s ease-in;

  -ms-transition: all 0.2s ease-in;

  -o-transition: all 0.2s ease-in;

}



.project-title {

  -webkit-transition: all 0.25s cubic-bezier(.28,.08,.87,.89);

  transition: all 0.25s cubic-bezier(.28,.08,.87,.89);

  -moz-transition: all 0.25s cubic-bezier(.28,.08,.87,.89);

  -ms-transition: all 0.25s cubic-bezier(.28,.08,.87,.89);

  -o-transition: all 0.25s cubic-bezier(.28,.08,.87,.89);

}



.site-link {

  -webkit-transition: all 0.1s cubic-bezier(.28,.08,.87,.89) 0.19s;

  transition: all 0.1s cubic-bezier(.28,.08,.87,.89) 0.19s;

  -moz-transition: all 0.1s cubic-bezier(.28,.08,.87,.89) 0.19s;

  -ms-transition: all 0.1s cubic-bezier(.28,.08,.87,.89) 0.19s;

  -o-transition: all 0.1s cubic-bezier(.28,.08,.87,.89) 0.19s;

}



.overlay {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%; 

  opacity: 0;

  background-color: #ccc;

}



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

  

  .overlay {

    background-color: transparent;

  }

  

}



.item-overlay img {

  width: 100%;

  transform: scale(1.003);

  -webkit-transform: scale(1.003);

  -ms-transform:  scale(1.003);

  backface-visibility: hidden; 

}



.site-link {

  opacity: 0;

  transform: translate3d(0, -70%, 0);

  -webkit-transform: translate3d(0, -70%, 0);

  -ms-transform: translate3d(0, -70%, 0);

  -moz-transform: translate3d(0, -70%, 0);

  -o-transform: translate3d(0, -70%, 0);

}



.site-link a {

  font-size: 1.3em;

  color: #396ca5;

  text-transform: uppercase;

}



.project-title, .site-link {

  opacity: 0;

  top: 85%;

  right: 10%;

  white-space: nowrap;

  z-index: 2;

}



.project-title {

  transform: translate3d(0, 0, 0);

  -webkit-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  -o-transform: translate3d(0, 0, 0);

}



.item-overlay:hover img {

  transform: scale(1.03);

  -webkit-transform: scale(1.03);

  -ms-transform: scale(1.03);

  -moz-transform: scale(1.03);

  -o-transform: scale(1.03);

}



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

  

  .project-title, .site-link {

    opacity: 1;

  }

  

  .project-title {

    transform: translate3d(0, -100%, 0);

    -webkit-transform: translate3d(0, -100%, 0);

    -ms-transform: translate3d(0, -100%, 0);

    -moz-transform: translate3d(0, -100%, 0);

    -o-transform: translate3d(0, -100%, 0);

  }

  

  .site-link {

    opacity: 1;

    transform: translate3d(0, 0, 0);

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

  }

  

  .item-overlay img, .item-overlay:hover img {

    transform: scale(1);

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    -moz-transform: scale(1);

    -o-transform: scale(1); 

  }

}



/* FADE IN EFFECT:HOVER */

  

.item-overlay:hover .overlay {

  opacity: 0.8;

}

  

.item-overlay:hover .project-title {

  opacity: 1;

  transform: translate3d(0, -100%, 0);

  -webkit-transform: translate3d(0, -100%, 0);

  -ms-transform: translate3d(0, -100%, 0);

  -moz-transform: translate3d(0, -100%, 0);

  -o-transform: translate3d(0, -100%, 0);

}

  

.item-overlay:hover .site-link {

  opacity: 1;

  transform: translate3d(0, 0, 0);

  -webkit-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  -o-transform: translate3d(0, 0, 0);

}

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

  .servizi-item.item-overlay img, .servizi-item.item-overlay img  {

    position: absolute;

    width: 100%;

    height: auto;

    left: 0;

    top: 50%;

    transform: translate3d(0, -50%, 0);

    -webkit-transform: translate3d(0, -50%, 0);

    -moz-transform: translate3d(0, -50%, 0);

    -ms-transform: translate3d(0, -50%, 0);

    -o-transform: translate3d(0, -50%, 0);

    text-align: center;

  }

} 

/* ANIMATIONS */





@keyframes slide-left{



  0% {

    transform: translate3d(-100%,0,0);

    -webkit-transform: translate3d(-100%,0,0);

    -moz-transform: translate3d(-100%,0,0);

    -ms-transform: translate3d(-100%,0,0);

    -o-transform: translate3d(-100%,0,0);

  }



  50% {

    transform: translate3d(5%,0,0);

    -webkit-transform: translate3d(5%,0,0);

    -moz-transform: translate3d(5%,0,0);

    -ms-transform: translate3d(5%,0,0);

    -o-transform: translate3d(5%,0,0);

  }



  100% {

    transform: translate3d(50.9%,0,0);

    -webkit-transform: translate3d(50.9%,0,0);

    -moz-transform: translate3d(50.9%,0,0);

    -ms-transform: translate3d(50.9%,0,0);

    -o-transform: translate3d(50.9%,0,0);

  }



}



@keyframes slide-right{



  0% {

    transform: translate3d(100%,0,0);

    -webkit-transform: translate3d(100%,0,0);

    -moz-transform: translate3d(100%,0,0);

    -ms-transform: translate3d(100%,0,0);

    -o-transform: translate3d(100%,0,0);

  }



  50% {

    transform: translate3d(-5%,0,0);

    -webkit-transform: translate3d(-5%,0,0);

    -moz-transform: translate3d(-5%,0,0);

    -ms-transform: translate3d(-5%,0,0);

    -o-transform: translate3d(-5%,0,0);

  }



  100% {

    transform: translate3d(-39.82%,0,0);

    -webkit-transform: translate3d(-39.82%,0,0);

    -moz-transform: translate3d(-39.82%,0,0);

    -ms-transform: translate3d(-39.82%,0,0);

    -o-transform: translate3d(-39.82%,0,0);

  }



}



/* scaleup */



@-webkit-keyframes scaleUp {

  0% {

    opacity: 0;

    transform: scale(2);

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    -ms-transform: scale(2);

    -o-transform: scale(2);

  }



  100% {

    opacity: 1;

    transform: scale(1);

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

  }

}



@keyframes scaleUp {

  0% {

    opacity: 0;

    transform: scale(2);

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    -ms-transform: scale(2);

    -o-transform: scale(2);

  }



  100% {

    opacity: 1;

    transform: scale(1);

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

  }

}





/* scale down */



@-webkit-keyframes scaleDown {



  0% {

    transform: scale(1);

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

}



  50% {

    transform: scale(2);

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    -ms-transform: scale(2);

    -o-transform: scale(2);

  }



  100% {

    opacity: 0;

    transform: scale(0);

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

  }



}



@keyframes scaleDown {

  

  0% {

    transform: scale(1);

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

  }



  50% {

    transform: scale(2);

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    -ms-transform: scale(2);

    -o-transform: scale(2);

  }



  100% {

    opacity: 0;

    transform: scale(0);

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

  }

  

}



/* fadein */



@keyframes fade-in{



  0% {

    opacity:0;

  }

  75% {

    opacity:0;

  }

  100% {

    opacity:1;

  }



}



/* STILI MIK */

.link-white { 
  color: #f4f4f4 !important; font-size: 1rem;
}


/* @media only screen and (min-width:576px) {

  @supports (-ms-ime-align:auto) {
    .home-title { 
      margin-top: 184px;
    }
  }

} */


.gecko .curriculum-text hr {
  border-top: 1px solid rgba(255, 255, 255, 0.58); 
}


.gecko .social-buttons-container {
  justify-content: space-around; 
}


@supports (-ms-ime-align:auto) {

  .curriculum-text hr { 
   border-top: 1px solid rgba(255, 255, 255, 0.58); 
  }

  .social-buttons-container {
    justify-content: space-around; 
  }

}



/* POPUP COOKIE */

.cookie a { 
  color: #396ca5;
}

form#mCCForm {
	width: 100%; 
}

button#mCCButton {
    margin-top: 0;
}

.mCCF__message { 
	font-size: 80%;
}

@media only screen and (min-width:992px){
	button#mCCButton {
		padding: .2em .4em;
}
	}
	
	
/* PAGINA COOKIE */

.cookie-title {
    position: relative;
    margin-top: 8em;
    z-index: 8;
    overflow: hidden;
}


/* PRIVACY MODULO CONTATTO */

#checkbox {
  width: 14px; 
  float: left;
}

.check-privacy{
  font-size:12px; 
  position: relative; 
  top: 14px;
}

.check-privacy a{
  font-size:12px;
  color: #396ca5; 
}  


/* IE FIX */

.ie-fix .curriculum-text {
  background-color: #333;
}

/* PRIVACYWIRE */
 
.privacywire-wrapper.show-banner {
  display: none;
}