@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);

body {
   font-family: 'Roboto', sans-serif;
}
.laboratorio-info{
   overflow: hidden;
}
.header, .footer {
   background: #2e2e2e;
   color: #fff;
   padding: 30px;
   text-align: center;
}

.header a, .footer a {
   color: #fff;
}

.header h1, .footer h1 {
   font-size: 4em;
   font-weight: 300;
}

.header i.fa, .footer i.fa {
   font-size: 4em;
}

.header .bounce, .footer .bounce {
   -webkit-animation-name: bounce;
   animation-name: bounce;
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

.header .animated, .footer .animated {
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}

.section {
   width: 100%;
   position: relative;
   background-color:#2e2e2e ;
}

.section .left, .section .middle, .section .right {
   width: 100%;
   display: block;
   color: #fff;
   box-sizing: border-box;
   left: 0;
   padding: 30px;
   text-align: center;
   overflow: hidden;
   -moz-transition: 0.3s ease-in-out all;
   -o-transition: 0.3s ease-in-out all;
   -webkit-transition: 0.3s ease-in-out all;
   transition: 0.3s ease-in-out all;
}

@media (min-width: 480px) {
   .section .left .content, .section .middle .content, .section .right .content {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
   }
}

@media (min-width: 480px) {
   .section .left, .section .middle, .section .right {
      width: 50%;
      font-size: 0.9em;
      padding: 10px;
      left: 0;
      float: left;
      position: absolute;
   }
}

@media (min-width: 768px) {
   .section .left, .section .middle, .section .right {
      width: 33.33333%;
      left: 33.33%;
      padding: 10px;
   }
}

@media (min-width: 992px) {
   .section .left, .section .middle, .section .right {
      padding: 30px;
      font-size: 1em;
   }
}

.section.animate .left {
   left: 0;
}

@media (min-width: 480px) {
   .section.animate .left {
      left: 50%;
   }
}

@media (min-width: 768px) {
   .section.animate .left {
      left: 0;
   }
}

.section.animate .right {
   left: 0;
}

@media (min-width: 480px) {
   .section.animate .right {
      left: 50%;
   }
}

@media (min-width: 768px) {
   .section.animate .right {
      left: 66.66%;
   }
}

.section .title {
   background: #5fb030;
}

.section .title h2 {
   margin-top: 0;
}

.section .title p {
   line-height: 1.55em;
   margin-bottom: 0.75em;
}

.section .title .btn-primary {
   color: #fff;
   background: #5cd317;
   padding: 10px;
   text-decoration: none;
   border-radius: 3px;
   display: inline-block;
   -moz-transition: 0.3s ease-in-out all;
   -o-transition: 0.3s ease-in-out all;
   -webkit-transition: 0.3s ease-in-out all;
   transition: 0.3s ease-in-out all;
}

.section .title .btn-primary:hover {
   background: #eb3010;
}

.section .tiles {
   padding: 0;
   background: #fff;
   clear: both;
   display: none;
   float: none;
}

.section .tiles img {
   width: 50%;
   float: left;
   height: 50%;
   max-height: 634.984px;
   object-fit: cover;
   object-position: center;
   opacity: 0.7;
   -moz-transition: 0.3s ease-in-out all;
   -o-transition: 0.3s ease-in-out all;
   -webkit-transition: 0.3s ease-in-out all;
   transition: 0.3s ease-in-out all;
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
}

.section .tiles img:hover {
   opacity: 1;
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   -o-filter: grayscale(0%);
   filter: grayscale(0%);
}

@media (min-width: 768px) {
   .section .tiles {
      display: block;
   }
}

.section .middle {
   background: slategray;
   z-index: 2;
   padding: 0;
}

.section .middle img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
}

.section .middle video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

@-webkit-keyframes bounce {
   0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
   }
   40% {
      -webkit-transform: translateY(-20px);
   }
   60% {
      -webkit-transform: translateY(-10px);
   }
}

@keyframes bounce {
   0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
   }
   40% {
      transform: translateY(-20px);
   }
   60% {
      transform: translateY(-10px);
   }
}