* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: font1;
    src: url(../fonts/Urbanist.ttf);
}
@font-face {
    font-family: font2;
    src: url(../fonts/COOLVETICA.ttf);
}

.containerhome{
  position: relative;
}

.bottomleft{
  font-family: font1;
  position: absolute;
  bottom: 50px;
  left: 50px;
  font-size: 50px;
  color: white;
}

.container img{
  width: 100%;
  height: auto;
}

.contet2 p{

  font-family: font1;
  color: rgb(170, 170, 170);
  text-align: center;
  font-size: 18pt;
  margin-left: 10%; 
  margin-right: 10%;

}

.contServ h1{

  font-family: font1;
  color: rgb(170, 170, 170);
  text-align: center;
  font-size: 28pt;
  height: 300px;
  line-height: 300px;
}



.ref{
  font-family: font1;
  color: rgb(170, 170, 170);
}



body {
    background-color: white;
}

.section {
    display: block;
}

/* DESTRA */
.spanTopR {
    background-color: #1375ce;
    height: 300px;
    width: 100%;
}

.spanBottomR {
    background-color: white;
    height: 300px;
    width: 100%;
}

.spanBottomR img {
    margin-left: 7%;
    position: absolute;
    width: 700px;
    margin-top: -100px;
  
}

.spanBottomR p {

      font-family: font1;
      font-size: 18pt;
      padding: 2%;
      width: 40%;
      position: absolute;
      right: 10%;
      color: #aaaaaa;
}

.spanBottomR p::first-line{
  font-size: 28pt;
  font-family: font1;
  color: #5f6a70;

}
.spanBottomL p::first-line{
  font-size: 2em;
  font-family: font1;
  color: #5f6a70;

}


.spanTopR h1 {

  font-size: 36pt;
  font-family: font2;
  color: white;
  padding: 2%;
  width: 50%;
  position: absolute;
  right: 10%;
  text-align: center;
}

.spanTopL h1 {

  font-size: 36pt;
  font-family: font2;
  color: white;
  padding: 2%;
  width: 40%;
  position: absolute;
  left: 10%;
  text-align: center;
}

/*SINISTRA*/

.spanTopL {
    background-color: #1375ce;
    height: 300px;
    width: 100%;
}

.spanBottomL {
    background-color: white;
    height: 300px;
    width: 100%;
}

.spanBottomL img {
    right: 1%;
    position: absolute;
    width: 700px;
    margin-top: -100px;
}

.spanBottomL p {

    font-family: font1;
    font-size: 1.5em;
    padding: 2%;
    width: 40%;
    position: absolute;
    left: 10%;
    color: #aaaaaa;
}

.spanBottomL p::first-line{
  font-size: 2em;
  font-family: font1;
  color: #5f6a70;

}

.spanTopL h1 {

  font-family: font2;
  font-size: 36pt;
  color: white;
  padding: 2%;
  width: 40%;
  position: absolute;
  left: 10%;
  text-align: center;
}


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

  .spanTopR {
      background-color: #1375ce;
      height: 400px;
      width: 100%;
  }

  .spanBottomR {
      background-color: white;
      height: 400px;
      width: 100%;
  }

  .spanTopL {
      background-color: #1375ce;
      height: 400px;
      width: 100%;
  }

  .spanBottomL {
      background-color: white;
      height: 400px;
      width: 100%;
  }

  .spanTopR h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 4%;
    text-align: center;
    left: auto;
    

  }

  .spanBottomR img{
    width: 700px;
    margin-top: -250px;
  }

  .spanBottomL img{
    width: 700px;
    margin-top: -250px;
    right: 5%;
  }

  .spanTopL h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 4%;
    text-align: center;
    left: -5%;

  }

  .spanBottomR p{
    font-size: 18pt;
  }
  .spanBottomR p::first-line{
    font-size: 28pt;
  }

  .spanBottomL p{
    font-size: 18pt;
    max-width: 900;
  }
  .spanBottomL p::first-line{
    font-size: 28pt;
  }

  .contet2 p{
    font-size: 18pt;
  }


}

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

  .spanTopL h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 4%;
    text-align: center;
    left: -5%;

  }

}

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

  .spanTopR h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    margin-right: 0%;

  }

  .spanBottomR img{
    width: 600px;
  }

  .spanBottomL img{
    width: 600px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    left: 2%;

  }

  .spanBottomR p{
    font-size: 18pt;
  }
  .spanBottomR p::first-line{
    font-size: 28pt;
  }

  .spanBottomL p{
    font-size: 18pt;
  }
  .spanBottomL p::first-line{
    font-size: 28pt;
  }


}

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


  .spanTopR h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    right: 4%;

  }

  .spanBottomR img{
    width: 570px;
  }

  .spanBottomL img{
    width: 570px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    left: -2%;

  }

  .spanBottomR p{
    font-size: 18pt;
  }
  .spanBottomR p::first-line{
    font-size: 28pt;
  }

  .spanBottomL p{
    font-size: 18pt;
    left: 5%;
  }
  .spanBottomL p::first-line{
    font-size: 28pt;
  }

}

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


  .spanTopR h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
   

  }

  .spanBottomR img{
    width: 500px;
  }

  .spanBottomL img{
    width: 500px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    

  }

  .spanBottomR p{
    
    font-size: 18pt;
   
  }
  .spanBottomR p::first-line{
    font-size: 28pt;
  }

  .spanBottomL p{
    font-size: 18pt;
  }
  .spanBottomL p::first-line{
    font-size: 28pt;
  }

}

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

  .spanTopR h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    right: 4%;

  }

  .spanBottomR img{
    width: 500px;
  }

  .spanBottomL img{
    width: 500px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    left: 5%;

  }

  .spanBottomR p{
    font-size: 18pt;
  }
  .spanBottomR p::first-line{
    font-size: 28pt;
  }

  .spanBottomL p{
    font-size: 18pt;
    left: 5%;
  }
  .spanBottomL p::first-line{
    font-size: 28pt;
  }

}

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

      .spanTopR h1 {

        width: 50%;
        font-size: 36pt;
        margin-top: 7%;
        text-align: center;
        right: 4%;
    
      }
    
      .spanBottomR img{
        width: 500px;
        margin-left: 10%;
      }
    
      .spanBottomL img{
        width: 500px;
      }
    
      .spanTopL h1 {
    
        width: 40%;
        font-size: 36pt;
        margin-top: 7%;
        text-align: center;
        left: 5%;
    
      }
    
      .spanBottomR p{
        font-size: 18pt;
      }
      .spanBottomR p::first-line{
        font-size: 28pt;
      }
    
      .spanBottomL p{
        font-size: 18pt;
        left: 5%;
      }
      .spanBottomL p::first-line{
        font-size: 28pt;
      }

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

  .spanTopR h1 {

    width: 50%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    right: 4%;

  }

  .spanBottomR img{
    width: 500px;
  }

  .spanBottomL img{
    width: 500px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;

  }

  .spanBottomR p{
    font-size: 18pt;
  }
  .spanBottomR p::first-line{
    font-size: 28pt;
  }

  .spanBottomL p{
    font-size: 18pt;
  }
  .spanBottomL p::first-line{
    font-size: 28pt;
  }

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

  .spanTopR h1 {

    width: 50%;
    font-size: 34pt;
    margin-top: 7%;
    text-align: center;
    right: 4%;

  }

  .spanBottomR img{
    width: 500px;
    margin-left: 5%;
  }

  .spanBottomL img{
    width: 500px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 36pt;
    margin-top: 7%;
    text-align: center;
    left: 5%;

  }

  .spanBottomR p{
    font-size: 18pt;
  }
  .spanBottomR p::first-line{
    font-size: 28pt;
  }

  .spanBottomL p{
    font-size: 18pt;
    left: 5%;
  }
  .spanBottomL p::first-line{
    font-size: 28pt;
  }

}


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

  .spanTopR h1 {

    width: 45%;
    font-size: 27pt;
    margin-top: 10%;
    text-align: center;
    right: 2%;

  }

  .spanBottomR img{
    width: 500px;
  }

  .spanBottomL img{
    width: 500px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 27pt;
    margin-top: 10%;
    text-align: center;
    left: 0%;

  }

  .spanBottomR p{
    font-size: 13pt;
    right: 5%;
  }
  .spanBottomR p::first-line{
    font-size: 23pt;
  }

  .spanBottomL p{
    font-size: 13pt;
    left: 5%;
  }
  .spanBottomL p::first-line{
    font-size: 23pt;
  }



}
/*
@media only screen and (max-width: 1100px){


  .contet2 p{
    font-size: 15pt;
  }
  .spanTopR h1 {

    width: 45%;
    font-size: 25pt;
    margin-top: 10%;
    text-align: center;
    right: 4%;

  }

  .spanBottomR img{
    width: 425px;
  }

  .spanBottomL img{
    width: 425px;
  }

  .spanTopL h1 {

    width: 40%;
    font-size: 22pt;
    margin-top: 7%;
    text-align: center;
    left: 0%;

  }

  .spanBottomR p{
    font-size: 11pt;
  }
  .spanBottomR p::first-line{
    font-size: 21pt;
  }

  .spanBottomL p{
    font-size: 11pt;
    left: 5%;
  }
  .spanBottomL p::first-line{
    font-size: 21pt;
  }


}

*/

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

  .spanTopR {
    background-color: #1375ce;
    height: 300px;
    width: 100%;
}

.spanBottomR {
    background-color: white;
    height: 300px;
    width: 100%;
}


    .spanTopL {
      background-color: #1375ce;
      height: 300px;
      width: 100%;
  }

  .spanBottomL {
      background-color: white;
      height: 300px;
      width: 100%;
  }


    .spanTopR h1 {

      margin-top: -1.5%;
      font-size: 28pt;
      font-family: font2;
      color: white;
      padding: 2%;
      width: 100%;
      position: absolute;
      right: 0%;
      text-align: center;
      margin-bottom: 2px;
    }

    .spanTopL h1 {
      margin-top: -1.5%;
      font-size: 28pt;
      font-family: font2;
      color: white;
      padding: 2%;
      width: 100%;
      position: absolute;
      left: 0%;
      text-align: center;
    }

      .spanBottomR img {
          position: relative;
          top: -180px;
          margin: auto;
          padding: auto;
          display: flex;
          justify-content: center;
      }
      .spanBottomR p {
          margin: auto;
          margin-top: 50px;
          padding: auto;
          position: relative;
          top: -200px;
          justify-content: center;
          width: 80%;
          font-size: 11pt;
          right: auto;
      }

      .spanBottomR p::first-line{
        font-size: 21pt;
        font-family: font1;
        color: grey;
      }


      .spanBottomL img {
          position: relative;
          top: -180px;
          margin: auto;
          padding: auto;
          display: flex;
          justify-content: center;
          right: auto;
      }

      .spanBottomL p {
        margin: auto;
        margin-top: 50px;
        padding: auto;
        position: relative;
        top: -200px;
        justify-content: center;
        width: 80%;
        font-size: 11pt;
        left: auto;
      }

      .spanBottomL p::first-line{

        font-size: 21pt;
        font-family: font1;
        color: grey;

      }

  }

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

  .contet2 p{
    font-size: 11pt;
  }
  
}

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

  .contet2 p{
    font-size: 10pt;
    margin-left: 5%;
    margin-right: 5%;
  }
  
}

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

  .spanBottomR img{
    width: 300;
  }

  .spanBottomL img{
    width: 300;
  }

  .spanTopR h1{
    font-size: 22pt;
  }

  .spanTopL h1{
    font-size: 22pt;
  }

  .contet2 p{
    font-size: 9pt;
  }

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

    .spanTopR {
        height: 150px;
    }

    .spanTopR h1{
      font-size: 15pt;
    }
    .spanBottomR img {
        width: 250px;
        top: -50px;
    }
    .spanBottomR p {
        top: -50px;
        font-size: 10pt;
    }

    .spanBottomR p::first-line{

      font-size: 12pt;
    }


    .spanTopL {
        height: 150px;
    }

    .spanTopL h1{
      font-size: 15pt;
    }

    .spanBottomL img {
        width: 250px;
        top: -50px;
    }
    .spanBottomL p {
      top: -50px;
      font-size: 10pt;
  }

    .spanBottomL p::first-line{

      font-size: 12pt;
    }

    .contet2 p{
      font-size: 9pt;
    }
}


/* NAVBAR */

.logo img {
  max-width: 200px;

}

.navbar {
  align-items: center;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  font-family: font1;
  color: #5f6a70;
  padding: 10px 50px;
  position: fixed;
  width: 100%;
  z-index: 10;

}

.push-left {
  margin-left: auto;
}

/* Menu */
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  outline: none;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 1000;
}
@media screen and (max-width: 768px) {
  .hamburger {
    display: inline-block;
  }
}
.hamburger-line {
  background: #272727;
  height: 3px;
  position: absolute;
  left: 0;
  transition: all 0.2s ease-out;
  width: 100%;
}
.hamburger:hover .hamburger-line {
  background: #777;
}
.hamburger-line-top {
  top: 3px;
}
.menu-active .hamburger-line-top {
  top: 50%;
  transform: rotate(45deg) translatey(-50%);
}
.hamburger-line-middle {
  top: 50%;
  transform: translatey(-50%);
}
.menu-active .hamburger-line-middle {
  left: 50%;
  opacity: 0;
  width: 0;
}
.hamburger-line-bottom {
  bottom: 3px;
}
.menu-active .hamburger-line-bottom {
  bottom: 50%;
  transform: rotate(-45deg) translatey(50%);
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 0.25s ease-in;
}
@media screen and (max-width: 768px) {
  .nav-menu {
    background: #fff;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translatey(-100%);
    text-align: center;
  }
  .menu-active .nav-menu {
    transform: translatey(0%);
    opacity: 1;
  }
}
.nav-menu .menu-item a {
  color: #444444;
  display: block;
  line-height: 30px;
  margin: 0px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-menu .menu-item a:hover {
  color: #777777;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .nav-menu .menu-item a {
    font-size: 20px;
    margin: 8px;
  }
}

.sub-nav {
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 5px 5px;
  list-style: none;
  width: 230px;
}
@media screen and (max-width: 768px) {
  .sub-nav {
    position: relative;
    width: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }


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

  .contet2 p{

    font-family: font1;
    font-size: 18pt;
  }
}


.nav__link:hover + .sub-nav {
  display: block;
}

.sub-nav:hover {
  display: block;
}

/* FOOTER */


.footer {
  display: flex;
  flex-flow: row wrap;
  padding: 30px 30px 20px 30px;
  color: #2f2f2f;
  background-color: #49535a;
  border-top: 1px solid #e5e5e5;
}

.footer > * {
  flex: 1 100%;
}

.footer__addr {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer__addr img{
  width: 50%;
}


.footer__addr h2 {

  color: white;
  font-family: font1;
  margin-top: 1.3em;
  font-size: 15px;
  font-weight: 400;
}




.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
}


.footer__nav {
  display: flex;
  flex-flow: row wrap;
}

.footer__nav > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.nav__ul a {
  color: white;
  font-family: font1;
}

.nav__ul p{
  color: white;
  font-family: font1;
  text-align: right;
}


.legal {
  display: flex;
  flex-wrap: wrap;
  color: white;
  font-family: font1;
}


.legal a{
  color: white;
  font-family: font1;
}

.heart {
  color: #1375ce;
}

@media screen and (min-width: 24.375em) {
  .legal .legal__links {
    margin-left: auto;
  }
}

@media screen and (min-width: 680px) {
  .footer__nav > * {
    flex: 1;
  }

  .footer__addr {
    flex: 1 0px;
  }

  .footer__nav {
    flex: 2 0px;
  }
}

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

  .footer__addr img{
    width: 70%;
  }

}

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

  .footer__addr h2 {

    font-size: 11px;
    
  }
}