body
{
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1vw;
  overflow-x: hidden;
}

@keyframes animation-for-big-bang
{
  0% {transform: scale(0.7); opacity: 0;}
  50% {transform: scale(1.15); opacity: 1;}
  100% {transform: scale(1); opacity: 1;}
}


@keyframes animation-opacity
{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes animation-menu
{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

section
{
  overflow: hidden;
}

#main
{
  width: 100%;
  min-height: 100vh;
  background-image: url("../images/prova-background.jpg");
  background-size: cover;
  background-attachment: fixed;
  color: white;
  overflow: hidden;
}

nav
{
  margin-top: 4vh;
}

.logo-wrapper
{
  display: inline-block;
  width: 16%;
  opacity: 0;
  padding: 0 0 0 4%;
  vertical-align: middle;
  transition: transform 1.5s;
  animation: animation-for-big-bang 2s forwards;
  animation-delay: 0.5s;
}

.logo-wrapper img
{
  max-width: 100%;
}

.nav-wrapper
{
  width: 76%;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  opacity: 0;
  transition: margin 1.5s;
  animation: animation-for-menu 2s forwards;
  animation-delay: 1s;
}

.navigation-screen
{
  width: 30%;
  height: 100vh;
  background-color: white;
  position: fixed;
  top: 0;
  right: 0;
  opacity: 0;
  margin-right: -30%;
  transition: margin 1s;
  z-index: 999;
  display:flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  animation: animation-menu 2.5s forwards;
  animation-delay: 0.5s;
}

.navigation-list
{
  color: #0f57b0;
}

.navigation-list ul
{
  list-style: none;
  padding:0;
  margin:0;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.navigation-list ul li
{
  padding: 4.5vh 0;
  font-size: 2em;
  transition: transform 0.5s;
  cursor: pointer;
}

.navigation-list ul li:hover
{
  transform: scale(1.2);
  transition: transform 0.5s;
}

.nav-bubble
{
  display: inline-block;
  background-color: white;
  width: 10vw;
  padding: 4.5vh;
  border-radius: 45px;
  cursor: pointer;
  transition: margin 0.5s;
  position: absolute;
  top: 8vh;
  left: 0;
  margin-left: -10vw;
}

.nav-bubble:hover
{
  margin-left: -11vw;
  transition: margin 0.5s;
}


.bar
{
  width: 40px;
  height: 5px;
  background-color: #0f57b0;
  margin: 5px 0;
  display: block;
  transition: 0.4s
}


.main-text
{
  width: 40%;
  margin: 13vh 0 0 5%;
}

.main-text h1
{
  font-size: 4em;
  margin: 1vh 0;
  opacity: 0;
  animation: animation-opacity 2.5s forwards;
  animation-delay: 1.5s;
}

.main-text p
{
  font-weight: lighter;
  width: 90%;
  font-size: 2em;
  opacity: 0;
  animation: animation-opacity 2.5s forwards;
  animation-delay: 2s;
}

#visit-us
{
  border: 1px solid white;
  background-color: transparent;
  color: white;
  font-size: 1.3em;
  padding: 0.8vw 2vw;
  border-radius: 35px;
  cursor:pointer;
  transition: background-color 0.5s;
  opacity: 0;
  animation: animation-opacity 2.5s forwards;
  animation-delay: 2.5s;
  text-decoration: none;
}

#visit-us:hover
{
  background-color: rgb(255,255,255,0.5);
  transition: background-color 0.5s;
}

/* ABOUT */

#about
{
  width: 100%;
  min-height: 90vh;
  padding: 10vh 0;
  background-color: white;
}

.section-title
{
  padding-left: 5%;
  text-align: right;
}

.title
{
  display: inline-block;
  vertical-align: middle;
  width: 30%;
}

.title-name
{
  font-weight: 900;
  font-size: 5em;
  text-align: left;
}

.title-name
{
  color: #0f57b0;
  margin-right: 5%;
}

.title-name label
{
  color: #b4c5d9;
  font-weight:normal;
  display: inline-block;
}

.div-bar
{
  width: 65%;
  display: inline-block;
  height: 2px;
  background-color: #0f57b0;
  margin: 5px 0;
  vertical-align: middle;
  font-size: 14em;
  color: rgba(231, 231, 231,0.2);
  font-weight: bolder;
  line-height: 0;
}

.section-content
{
  width: 95%;
  margin: 10vh auto;
  text-align: center;
}

.about-box
{
  width: 30%;
  margin: 0 7.5%;
  display: inline-block;
  vertical-align: top;
}

.about-box-icon
{
  width: 25%;
  margin: 0 auto;
}

.about-box-icon img
{
  max-width: 100%;

}

.about-box-title
{

}

.about-box-title h2
{
  font-weight: normal;
  color: #0f57b0;
  font-size: 2.5em;
}

.about-box-content
{
  font-weight: lighter;
  font-size: 1.5em;
  line-height: 1.4em;
}

/* SERVICES */


#what-we-do
{
  width: 100%;
  min-height: 90vh;
  padding: 10vh 0;
  background-color: #0f57b0;
}

#what-we-do .section-content
{
  width: 100%;
}

#what-we-do .section-title
{
  padding-left: 0;
  text-align: left;
}

#what-we-do .title-name
{
  color: white;
  text-align: right;
}

#what-we-do .div-bar
{
  padding-left: 0;
  text-align: left;
  background-color: white;
  color: rgba(255, 255, 255, 0.05);
  font-size: 11em;
}

/*
.service-box
{
  border-radius: 15px;
  width: 30%;
  margin: 0 1%;
  display: inline-block;
  vertical-align: top;
  color: white;
}

.service-box-icon
{
  width: 100%;
  margin: 0 auto;
}

.service-box-icon img
{
  max-width: 100%;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
    min-height: 40vh;
}

.service-box-title
{

}

.service-box-title h2
{
  border-top: 2px solid rgb(218, 218, 218);
  padding: 25px 0;
  width: 90%;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-size: 2em;
}

.service-box-content
{
  font-weight: lighter;
  font-size: 1.5em;
  line-height: 1.4em;
  padding: 25px 20px;
  text-align: justify;
  min-height: 20vh;
} */

.service-box
{
  width: 100%;
  padding: 15vh 0;
}

.service-name
{
  width: 95%;
  margin-left: 5%;
  text-align: right;
}

.service-image
{
  width: 25%;
  vertical-align: middle;
  display: inline-block;
  z-index: 2;
  position: relative;
}

@keyframes example {
  0% {filter: hue-rotate(0deg);}
  50% {filter: hue-rotate(250deg);}
  100% {filter: hue-rotate(0deg);}
}

@keyframes transparency {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

.service-image img
{
  max-width: 100%;
}

#service-paint
{
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

#car-right
{
  position: absolute;
  left: 0;
  top: 0;
  animation-name: transparency;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

#car-wreck
{
  opacity: 0;
  animation-name: transparency;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 2.5s;
}

.service-name-paragraph
{
  color: white;
  font-weight: bolder;
  font-size: 7.5em;
  vertical-align: middle;
  display: inline-block;
  margin-left: -3.5%;
  margin-right: 2%;
  z-index: 1;
  position: relative;
}

.service-bar
{
  width: 40%;
  display: inline-block;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  vertical-align: middle;
  font-size: 14em;
  color: rgba(231, 231, 231,0.2);
  font-weight: bolder;
  line-height: 0;
}

.service-description
{
  color: white;
  margin-top: 25vh;
  text-align: left;
  margin-left: 15%;
}

.service-number
{
  color: #b4c5d9;
  font-weight:normal;
  display: inline-block;
  vertical-align: bottom;
  font-size: 4.5em;
  margin: 0 2%;
}

.service-text
{
  display: inline-block;
  font-size: 2.5em;
  font-weight: lighter;
  width: 55%;
  text-align: left;
}

.right .service-name
{
  width: 95%;
  margin-left: 0;
  margin-right: 5%;
  text-align: left;
}

.right .service-name-paragraph
{
  color: white;
  font-weight: bolder;
  font-size: 7.5em;
  vertical-align: middle;
  display: inline-block;
  margin-left: 0;
  z-index: 1;
  position: relative;
}

.right .service-bar
{
  width: 30%;

}

.right .service-image
{
  margin-left: -6%;
}

.right .service-description
{
  text-align: right;
  margin-right: 15%;
  margin-left: 0;
}

.right .service-text
{
  text-align: right;
}

#contacts
{
  width: 100%;
  min-height: 90vh;
  padding: 10vh 0;
  background-color: white;
  background-image: url("../images/mapa2.png");
  background-size: cover;
  background-attachment: fixed;
}

#contacts .section-content
{
  text-align: center;
}

.contact-box
{
  width: 25%;
  background-color: rgba(70, 113, 158, 0.05);
  overflow:hidden;
  margin: 0 2%;
  color: #0f57b0;
  font-size: 1.2em;
  padding: 4vh 0;
  display: inline-block;
  transition: transform 0.5s;
}


.contact-icon
{
  width: 20%;
  margin: 5vh auto;
}

.contact-icon img
{
  max-width: 100%;
}

footer
{
  width: 100%;
  background-color: #0f57b0;
  text-align: center;
  color: white;
}

.footer-content
{
    text-align: center;
    padding: 5vh 0;
}

.copyright
{
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 4vh 0;
  width: 80%;
  margin: 0 auto;
  font-weight: lighter;
}

.footer-box
{

  margin: 0 9%;
  text-align: left;
  display: inline-block;
  vertical-align: top;
}

.footer-box:last-child
{
  text-align: center;
  vertical-align: bottom;
}


.footer-box-title
{
  font-weight: bold;
  font-size: 1.5em;

}

a
{
  color: white;

}

.footer-box:last-child .footer-box-title
{
  font-weight: normal;
  font-size: 1em;

}

.footer-box ul
{
  padding: 0;
  margin: 0;
  padding-left: 3%;
  list-style-type: none;
}

.footer-box ul li
{
  padding: 1vh 0;
  cursor:pointer;
  transition: margin 0.5s;
}

.footer-box ul li:hover
{
  margin-left: 2%;
  transition: margin 0.5s;
}

#devma-logo
{
  width: 100px;
}

@media screen and (min-width: 540px) and (max-width: 800px)
{

  .nav-bubble
  {
    display: inline-block;
    background-color: white;
    width: 13vw;
    padding: 4.5vh;
    border-radius: 45px;
    cursor: pointer;
    transition: margin 0.5s;
    position: absolute;
    top: 8vh;
    left: 0;
    margin-left: -13vw;
  }

  .nav-bubble:hover
  {
    margin-left: -14vw;
    transition: margin 0.5s;
  }

  .logo-wrapper
  {
    width: 25%;
    padding: 0 0 0 4%;
  }

    .main-text
    {
      width: 95%;
      margin: 20vh auto 0 auto;
      text-align: center;
    }

    .main-text h1
    {
      font-size: 5.5em;
      margin: 1vh 0;
    }

    .main-text p
    {
      width: 100%;
      font-size: 3em;
      line-height: 1.5;
    }

    #visit-us
    {

      font-size: 2.2em;
      padding: 2vw 4.5vw;
      border-radius: 35px;
    }


}

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

  body
  {
    font-size: 2.2vw;
  }

  nav
  {
    margin-top: 4vh;
  }

  .logo-wrapper
  {
    width: 45%;
    padding: 0 0 0 4%;
  }

  .navigation-screen
  {
    width: 80%;
    height: 100vh;
    margin-right: -80%;
    transition: margin 1s;

  }

  .navigation-list
  {
    color: #0f57b0;
  }


  .nav-bubble
  {
    display: inline-block;
    background-color: white;
    width: 22%;
    padding: 4vh;
    border-radius: 45px;
    cursor: pointer;
    transition: margin 0.5s;
    position: absolute;
    top: 8vh;
    left: 0;
    margin-left: -25%;
  }

  .nav-bubble:hover
  {
    margin-left: -26%;
  }



  .main-text
  {
    width: 95%;
    margin: 18vh auto 0 auto;
    text-align: center;
  }

  .main-text h1
  {
    font-size: 4em;
    margin: 1vh 0;
    opacity: 0;
    animation: animation-opacity 2.5s forwards;
    animation-delay: 1.5s;
  }

  .main-text p
  {
    width: 100%;
    line-height: 1.5;
  }

  #visit-us
  {
    border: 1px solid white;
    background-color: transparent;
    color: white;
    font-size: 2.2em;
    padding: 2vw 4.5vw;
    border-radius: 35px;
    cursor:pointer;
    transition: background-color 0.5s;
    opacity: 0;
    animation: animation-opacity 2.5s forwards;
    animation-delay: 2.5s;
    text-decoration: none;
  }

  #visit-us:hover
  {
    background-color: rgb(255,255,255,0.5);
    transition: background-color 0.5s;
  }

  /* ABOUT */

  .section-title
  {
    padding-left: 5%;
    text-align: right;
  }

  .title
  {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
  }

  .title-name
  {
    font-weight: 900;
    font-size: 5em;
    text-align: left;
  }

  .title-name
  {
    color: #0f57b0;
    margin-right: 5%;
  }

  .title-name label
  {
    color: #b4c5d9;
    font-weight:normal;
    display: inline-block;
  }

  .div-bar
  {
    width: 35%;
    display: inline-block;
    height: 2px;
    background-color: #0f57b0;
    margin: 5px 0;
    vertical-align: middle;
    font-size: 14em;
    color: rgba(231, 231, 231,0);
    font-weight: bolder;
    line-height: 0;
  }

  .about-box
  {
    width: 70%;
    margin: 20vh auto;
    display: block;
    vertical-align: top;
  }

  .about-box-icon
  {
    width: 30%;
  }


  /* SERVICES */


  #what-we-do
  {
    width: 100%;
    min-height: 90vh;
    padding: 10vh 0;
    background-color: #0f57b0;
  }

  #what-we-do .section-content
  {
    width: 100%;
  }

  #what-we-do .section-title
  {
    padding-left: 0;
    text-align: left;
  }

  #what-we-do .title-name
  {
    color: white;
    text-align: right;
  }

  #what-we-do .div-bar
  {
    padding-left: 0;
    text-align: left;
    background-color: white;
    color: rgba(255, 255, 255, 0);
    font-size: 11em;
  }

  .service-box
  {
    width: 100%;
    padding: 15vh 0;
  }

  .service-name
  {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  .service-image
  {
    width: 30%;
  }

  @keyframes example {
    0% {filter: hue-rotate(0deg);}
    50% {filter: hue-rotate(250deg);}
    100% {filter: hue-rotate(0deg);}
  }

  @keyframes transparency {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
  }

  .service-image img
  {
    max-width: 100%;
  }

  #service-paint
  {
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }

  #car-right
  {
    position: absolute;
    left: 0;
    top: 0;
    animation-name: transparency;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }

  #car-wreck
  {
    opacity: 0;
    animation-name: transparency;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay: 2.5s;
  }

  .service-name-paragraph
  {
    color: white;
    font-weight: bolder;
    font-size: 6em;
    vertical-align: middle;
    display: inline-block;
    margin-left: -3.5%;
    margin-right: 2%;
    z-index: 1;
    position: relative;
  }

  .service-bar
  {
    width: 0%;
    display: inline-block;
    height: 2px;
    background-color: #fff;
    margin: 5px 0;
    vertical-align: middle;
    font-size: 14em;
    color: rgba(231, 231, 231,0.2);
    font-weight: bolder;
    line-height: 0;
  }

  .service-description
  {
    color: white;
    margin-top: 25vh;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .service-number
  {
    color: #b4c5d9;
    font-weight:normal;
    display: inline-block;
    vertical-align: bottom;
    font-size: 4.5em;
    margin: 0 2%;
  }

  .service-text
  {
    display: inline-block;
    font-size: 2em;
    font-weight: lighter;
    width: 75%;
    text-align: left;
  }

  .right .service-name
  {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .right .service-name-paragraph
  {
    color: white;
    font-weight: bolder;
    font-size: 5.5em;
    vertical-align: middle;
    display: inline-block;
    margin-left: 0;
    z-index: 1;
    position: relative;
  }

  .right .service-bar
  {
    width: 0%;
  }

  .right .service-image
  {
    margin-left: -20%;
  }


  .contact-box
  {
    width: 60%;
    margin: 5vh auto;
    font-size: 1.5em;
    display: block;
  }


  .copyright
  {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 4vh 0;
    width: 80%;
    margin: 0 auto;
    font-weight: lighter;
  }

  .footer-box
  {
    margin: 15vh auto;
    text-align: center;
    display: block;

  }


  .footer-box-title
  {
    font-weight: bold;
    font-size: 2.2em;

  }

  .footer-box ul
  {
    font-size: 1.7em;
  }



  .footer-box ul li:hover
  {
    margin-left: 2%;
    transition: margin 0.5s;
  }

  #devma-logo
  {
    width: 80px;
  }


}