@charset "UTF-8";
html,body{padding: 0;margin: 0;}
*{box-sizing: border-box;}
body { display:block; font-size:1em; font-family: 'Poppins', sans-serif; color:#000000; font-weight: 100;background: #fff;}
.container{display: block;width: 100%;max-width: 1440px;margin: 0 auto;background: #fff;}
nav{display: block;background: #EA504C;color:#FFF;width: 100%;padding: 10px 40px 20px 40px;}
/*.burger{display: block;width: 50px;float:left;cursor: pointer;}
.burger img{display: block;width: 100%;margin-top:20px;}*/
.logo{display: block;width: 100%;}
.logo img{display: block;width: 100%;max-width: 270px;margin:0 auto;}
.clear{clear: both;float: none;}
.top{display: block;width: 100%;padding:100px 200px 0 100px;max-width: 1200px;margin: 0 auto;}
.top img{display: block;width: 100%;}
.top h1{display: block;color:#EA504C;font-size: 4em;font-weight: 200;text-align: left;width: 100%;padding: 0px 0 20px 40px;}
.top ul{padding: 0;margin: 0;position: absolute;list-style:none;top:200px;right: 30%;}
.top ul li:before{
   content: '';
   display: inline-block;
   height: 15px;
   width: 15px;
   background-image: url(img/puntino.png);
   margin-right:25px;
}
.top ul li {text-transform: uppercase;font-weight:300;font-size: 1.8em;padding-bottom: 30px;}

@media only screen and (max-width: 1440px)  {
  .top ul{padding: 0;margin: 0;position: absolute;list-style:none;top:150px;right: 5%;}
}
@media only screen and (max-width: 1024px)  {
  .top ul{padding: 0;margin: 0;position: absolute;list-style:none;top:150px;right: 10%;}
  .top ul li {text-transform: uppercase;font-weight:300;font-size: 1.4em;padding-bottom: 20px;}
  .top h1{display: block;color:#EA504C;font-size: 2.5em;font-weight: 200;text-align: left;width: 100%;padding: 0px 0 20px 40px;}
}

@media only screen and (max-width: 600px)  {
  .top{display: block;width: 100%;padding:80px 30px 0 30px;max-width: 1200px;margin: 0 auto;}
  .logo img{display: block;width: 100%;max-width: 220px;margin:0 auto;}
  .top ul{padding: 0;margin: 0;position: absolute;list-style:none;top:110px;right: 10%;}
  .top ul li {text-transform: uppercase;font-weight:300;font-size: 0.8em;padding-bottom: 20px;}
  .top h1{display: block;color:#EA504C;font-size: 2em;font-weight: 200;text-align: left;width: 100%;padding: 0px 0 20px 20px;}
}

.blocco{display: flex;width: 100%;}
.blocco.sinistra.primo{
  background-color: rgba(217,228,233,0.5) /*#D9E4E9*/;
  background-image: url(img/sfondo1.png);
  background-repeat: no-repeat;
  background-position: 110% 100%;
  background-size: 20% 100%;
}
.blocco.destra.secondo{
  background-image: url(img/sfondo2.png);
  background-repeat: no-repeat;
  background-position: -40% -10%;
  background-size: 50% 160%;
}
.blocco.sinistra.terzo{
  background-color: rgba(217,228,233,0.5) /*#D9E4E9*/;
  background-image: url(img/sfondo3.png);
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: 10% 90%;
}
.blocco.destra.quarto{
  background-image: url(img/sfondo4.png);
  background-repeat: no-repeat;
  background-position: 2% 25%;
  background-size: 30% 90%;
}

.sinistra div:nth-of-type(1){width: 100px;background: #EA504C;position: relative;}
.sinistra div:nth-of-type(2){width: calc(100% - 100px);padding: 20px 300px 100px 80px;}
.blocco h2{display: block;padding: 20px 0 0px 0;margin: 0;}
.blocco p{font-weight: 400;margin: 0;padding: 0 0 20px 10px;font-size: 1.2em;}
.destra div:nth-of-type(1){width: calc(100% - 100px);padding: 20px 220px 100px 180px;}
.destra div:nth-of-type(2){width: 100px;background: #EA504C;position: relative;}

.rotate{
  position: absolute;
  width: 100%;
  writing-mode: vertical-lr;
  display: block;
  font-size: 3em;
  font-weight: bold;
  color: #FFF;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

.primo .rotate{  bottom: -235px; left: 80px;}
.secondo .rotate{  bottom:-100px; left: 80px;}
.terzo .rotate{  bottom:340px; left: 80px;}
.quarto .rotate{  bottom:235px; left: 80px;}

.footer{
  padding: 100px 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: rgba(217,228,233,0.5);
  border-bottom: 30px solid #EA504C;
  text-align: center;
}
.footer span{display: block;font-weight: 600;padding:20px 0 10px 30px;font-size: 1.5em;}
.footer p{display: block;font-weight: 300;padding:0px 0 10px 30px;font-size: 1em;}
.footer a{display: block;color:#000;text-decoration: none;font-weight: 300;margin-bottom: 10px;font-size: 1em;}
.footer a.email{background: url(img/email.png) no-repeat left center;background-size: 20px; padding-left:40px;}
.footer a.telefono{background: url(img/telefono.png) no-repeat;background-position: 5px center;background-size: auto 20px; padding-left:0px;}
.footer a.sito{background: url(img/mondo.png) no-repeat left center;background-size: 20px; padding-left:0px;}
.footer a.mappa{background: url(img/marker.png) no-repeat left center;background-size: 20px; padding-left:40px;}

@media only screen and (max-width: 1366px)  {
  .primo .rotate{  bottom: -235px; left: 80px;}
}

@media only screen and (max-width: 1024px)  {
  .sinistra div:nth-of-type(1){width: 80px;background: #EA504C;position: relative;}
  .sinistra div:nth-of-type(2){width: calc(100% - 80px);padding: 20px 100px 100px 60px;}
  .blocco h2{display: block;padding: 20px 0 0px 0;margin: 0;}
  .blocco p{font-weight: 400;margin: 0;padding: 0 0 20px 10px;font-size: 1.2em;}
  .destra div:nth-of-type(1){width: calc(100% - 80px);padding: 20px 120px 100px 140px;}
  .destra div:nth-of-type(2){width: 80px;background: #EA504C;position: relative;}
  .rotate{font-size: 2em;}
  .primo .rotate{  bottom: 220px; left: 60px;}
  .secondo .rotate{  bottom:250px; left: 70px;}
  .terzo .rotate{  bottom:450px; left: 60px;}
  .quarto .rotate{  top:210px; left: 70px;}

  .blocco.sinistra.primo{
    background-color: rgba(217,228,233,0.5) /*#D9E4E9*/;
    background-image: url(img/sfondo1.png);
    background-repeat: no-repeat;
    background-position: 120% 100%;
    background-size: 50% 90%;
  }
  .blocco.destra.secondo{
    background-image: url(img/sfondo2.png);
    background-repeat: no-repeat;
    background-position: -40% -10%;
    background-size: 50% 160%;
  }
  .blocco.sinistra.terzo{
    background-color: rgba(217,228,233,0.5) /*#D9E4E9*/;
    background-image: url(img/sfondo3.png);
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 10% 90%;
  }
  .blocco.destra.quarto{
    background-image: url(img/sfondo4.png);
    background-repeat: no-repeat;
    background-position: 2% 25%;
    background-size: 30% 90%;
  }
  .footer{
    padding: 100px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgba(217,228,233,0.5);
    border-bottom: 30px solid #EA504C;
  }
  .footer span{display: block;font-weight: 600;padding:20px 0 10px 30px;font-size: 1.2em;}
  .footer p{display: block;font-weight: 300;padding:0px 0 10px 30px;font-size: 1em;}
}

@media only screen and (max-width: 600px)  {
  .sinistra div:nth-of-type(1){width: 50px;background: #EA504C;position: relative;}
  .sinistra div:nth-of-type(2){width: calc(100% - 50px);padding: 20px 20px 20px 60px;}
  .blocco h2{display: block;padding: 20px 0 0px 0;margin: 0;}
  .blocco p{font-weight: 400;margin: 0;padding: 0 0 20px 10px;font-size: 1.2em;}
  .destra div:nth-of-type(1){width: calc(100% - 50px);padding: 20px 20px 100px 20px;}
  .destra div:nth-of-type(2){width: 50px;background: #EA504C;position: relative;}
  .rotate{font-size: 1.5em;}
  .primo .rotate{  bottom:0; top: 300px; left: 40px;}
  .secondo .rotate{  bottom:0;top:220px; left: 40px;}
  .terzo .rotate{  bottom:0;top:130px; left: 40px;}
  .quarto .rotate{  top:170px; left: 40px;}

  .blocco.sinistra.primo{
    background-color: rgba(217,228,233,0.5) /*#D9E4E9*/;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 120% 100%;
    background-size: 50% 90%;
  }
  .blocco.destra.secondo{
    background-image: none;
    background-repeat: no-repeat;
    background-position: -40% -10%;
    background-size: 50% 160%;
  }
  .blocco.sinistra.terzo{
    background-color: rgba(217,228,233,0.5) /*#D9E4E9*/;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 10% 90%;
  }
  .blocco.destra.quarto{
    background-image: none;
    background-repeat: no-repeat;
    background-position: 2% 25%;
    background-size: 30% 90%;
  }
  .footer{
    padding: 50px 50px;
    display: block;
    background-color: rgba(217,228,233,0.5);
    border-bottom: 30px solid #EA504C;
    text-align: center;
  }
  .footer span{display: block;font-weight: 600;padding:20px 0 10px 30px;font-size: 1.2em;}
  .footer p{display: block;font-weight: 300;padding:0px 0 10px 30px;font-size: 1em;}
}