body {
    margin: 0;
  }
  
  ul {
    width: 1024px;
    height: 60px;
    background: #00BCD4;
    position: fixed;
    padding-left: 0px;
    padding-top: 30px;
    margin: auto;
    text-align: center;
    z-index: 5;
  }
  
  li {
    display: inline-block;
  }
  
  .menu a {
    font: normal 300 25px 'Roboto', sans-serif;
    color: #FFF;
    padding: 35px;
    text-decoration: none;
  }
  
  .menu a:hover {
    color: #00BCD4;
    background-color: #FFF;
    padding-bottom: 29px;
  }
  
  h1 {
    font: normal 100 150px 'Roboto', sans-serif;
    color: #FFF;
    letter-spacing: -80px;
    margin: 0;
    position: absolute;
    left: 120px;
    top: 180px;
    animation: extender 8s ease 0.5s alternate 1 forwards;
  }
  
  @keyframes extender {
    100% {
      left: 120px;
      letter-spacing: 0px;
    }
  }
  
  h2 {
    font: normal 500 20px 'Roboto', sans-serif;
    color: #FFF;
    letter-spacing: 3.2px;
    margin: 0;
    position: absolute;
    left: 125px;
    top: 350px;
  }
  
  .logo1 {
    width: 200px;
    height: 200px;
    background-image: url(http://i.imgsafe.org/c827672.png);
    background-size: cover;
    position: absolute;
    left: 670px;
    top: 171px;
    animation: aparecer 1s ease alternate infinite;
  }
  
  @keyframes aparecer {
    100% {
      opacity: 0;
    }
  }
  
  .logo2 {
    width: 200px;
    height: 200px;
    background-image: url(http://i.imgsafe.org/b6ae4d3.png);
    background-size: cover;
    position: absolute;
    left: 670px;
    top: 171px;
  }
  
  .fondo00,
  .fondo01,
  .fondo1,
  .fondo2 {
    height: 820px;
    width: 1024px;
    margin: 0;
    position: relative;
    top: 0px;
    background: no-repeat fixed;
  }
  
  .fondo00 {
    height: 130px;
    background-color: #00BCD4;
  }
  
  .fondo01 {
    height: 640px;
    background-color: #00BCD4;
    background-image: url(http://i.imgsafe.org/9c75394.png);
  }
  
  .fondo1 {
    top: -50px;
    background-size: cover;
    background-image: url(http://i.imgsafe.org/8f3e77a.jpg);
  }
  
  .fondo2 {
    top: -50px;
    background-size: cover;
    background-image: url(http://i.imgsafe.org/7d45bbe.jpg);
  }
  
  h3 {
    font: normal 500 50px 'Roboto', sans-serif;
    color: #FFF;
    text-align: center;
    position: relative;
    top: 90px;
    opacity: 0.5;
  }
  
  h3:hover {
    opacity: 0.9;
    text-shadow: 2px 2px 0px grey;
  }
  
  .fondo1 .texto1,
  .fondo1 .texto2,
  .fondo1 .texto3,
  .fondo1 .texto4,
  .fondo1 .texto5 {
    background-color: #FFF;
    width: 804px;
    opacity: 0.5;
    position: absolute;
    left: 100px;
    font: normal 300 15px 'Roboto', sans-serif;
    padding: 10px;
    text-align: justify;
  }
  
  .fondo1 .texto1 {
    height: 95px;
    top: 170px;
  }
  
  .fondo1 .texto2 {
    height: 60px;
    top: 305px;
  }
  
  .fondo1 .texto3 {
    height: 75px;
    top: 405px;
  }
  
  .fondo1 .texto4 {
    height: 95px;
    top: 520px;
  }
  
  .fondo1 .texto5 {
    height: 60px;
    top: 655px;
  }
  
  .fondo1 .texto1:hover,
  .fondo1 .texto2:hover,
  .fondo1 .texto3:hover,
  .fondo1 .texto4:hover,
  .fondo1 .texto5:hover {
    opacity: 0.95;
    background-color: #00BCD4;
    color: white;
  }
  
  .diagrama {
    width: 339px;
    height: 339px;
    background: no-repeat;
    background-size: contain;
    background-image: url(http://i.imgsafe.org/5298de1.png);
    position: relative;
    top: 37px;
    left: 585px;
    opacity: 0.5;
  }
  
  .diagrama:hover {
    opacity: 0.95;
    background-image: url(http://i.imgsafe.org/677ac69.png);
  }
  
  .serv,
  .atenc {
    font: normal 500 50px 'Roboto', sans-serif;
    color: #FFF;
    text-align: center;
    position: relative;
    opacity: 0.5;
  }
  
  .serv {
    top: 90px;
  }
  
  .atenc {
    top: 345px;
  }
  
  .serv:hover,
  .atenc:hover {
    opacity: 0.9;
    text-shadow: 2px 2px 0px grey;
  }
  
  .fondo2 .texto1,
  .fondo2 .texto2,
  .fondo2 .texto3 {
    background-color: #FFF;
    width: 804px;
    opacity: 0.5;
    position: absolute;
    left: 100px;
    font: normal 300 15px 'Roboto', sans-serif;
    padding: 10px;
    text-align: justify;
  }
  
  .fondo2 .texto1 {
    height: 95px;
    top: 485px;
  }
  
  .fondo2 .texto2 {
    height: 95px;
    top: 620px;
  }
  
  .fondo2 .texto3 {
    width: 440px;
    height: 210px;
    top: 160px;
  }
  
  .fondo2 .texto1:hover,
  .fondo2 .texto2:hover,
  .fondo2 .texto3:hover {
    opacity: 0.95;
    background-color: #00BCD4;
    color: #FFF;
  }
  
  .fondo30,
  .fondo31 {
    width: 1024px;
    margin: 0;
    position: relative;
    left: 0px;
    top: -50px;
    background: no-repeat fixed;
    background-color: #00BCD4;
  }
  
  .fondo30 {
    height: 140px;
  }
  
  .fondo31 {
    height: 590px;
    background-image: url(http://i.imgsafe.org/f06da3c.png);
  }
  
  .cont {
    font: normal 500 50px 'Roboto', sans-serif;
    color: #FFF;
    text-align: center;
    position: relative;
    top: -50px;
    opacity: 0.5;
  }
  
  .encont,
  .sigue {
    font: normal 300 25px 'Roboto', sans-serif;
    color: #FFF;
    opacity: 0.5;
    position: relative;
  }
  
  .encont {
    top: 10px;
    left: 100px;
  }
  
  .sigue {
    top: -262px;
    left: 550px;
  }
  
  .cont:hover,
  .sigue:hover,
  .encont:hover {
    opacity: 1;
    text-shadow: 2px 2px 0px grey;
  }
  
  iframe {
    position: relative;
    top: 50px;
    left: 100px;
  }
  
  .social i.fa {
    font-size: 50px;
    color: #FFF;
    display: block;
    position: relative;
    left: 545px;
    top: -245px;
    padding: 9px;
    opacity: 0.9;
  }
  
  .social .info {
    font: normal 300 20px 'Roboto', sans-serif;
    color: #FFF;
    position: relative;
    top: -10px;
    text-decoration: none;
    opacity: 0;
  }
  
  .social .fa:hover .info {
    opacity: 0.9;
    text-shadow: none;
  }
  
  .social .fa:hover {
    opacity: 1;
    text-shadow: 2px 2px 0px grey;
  }
  
  .contactar i.fa {
    font-size: 40px;
    color: #FFF;
    position: relative;
    top: -200px;
    left: 100px;
    opacity: 0.9;
    display: inline-block;
  }
  
  .fa-phone-square {
    margin-right: 95px;
  }
  
  .contactar .info {
    font: normal 300 25px 'Roboto', sans-serif;
    color: #FFF;
    position: relative;
    top: -35px;
    left: 50px;
    opacity: 0.5;
  }
  
  .detalle {
    font: normal 300 15px 'Roboto', sans-serif;
    color: #FFF;
    position: relative;
    top: -15px;
    left: 0px;
    opacity: 0;
  }
  
  .contactar .fa:hover .info,
  .contactar .fa:hover {
    opacity: 0.9;
    text-shadow: 2px 2px 0px grey;
  }
  
  .contactar .fa:hover .detalle {
    opacity: 0.9;
    text-shadow: none;
  }
  
  .fondofinal {
    width: 1024px;
    height: 180px;
    background-color: red;
    position: absolute;
    top: 3140px;
    background: no-repeat;
    background-image: linear-gradient(to bottom, #00BCD4 15%, #FFF);
  }
  
  .design {
    width: 70px;
    height: 75px;
    position: relative;
    top: 0px;
    left: 50px;
    background-size: cover;
    background-image: url(http://i.imgsafe.org/108c0b6.png)
  }
  
  .copyright {
    color: #404752;
    font: normal 500 18px 'Roboto', sans-serif;
    position: relative;
    top: 60px;
    left: 150px;
  }
  
  .sitioweb {
    color: #404752;
    font: normal 500 15px 'Roboto', sans-serif;
    position: relative;
    top: 60px;
    left: 150px;
  }