/*SERVICIOS*/



.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-outer {
  transition: all 1.5s cubic-bezier(0.13, 0.56, 0.58, 0.97);
  height: 100%;
}

.slide {
  width: 100%;
  height: 67vh;
  min-height: 300px;
  float: left;
  overflow: hidden;
  position: relative;
}

.slide-thump,
.slide-details {
  float: left;
}

.slide-thump,
.slide-details {
  width: 50%;
  height: 100%;
  position: relative;
}

.slide-thump img {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: all 3s ease;
}

.overlay:before, .overlay:after {
  content: '';
  display: block;
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  transition: all 1s ease;
  color: #b1b1b1;
}

.overlay:before {
  border-left: 1px solid;
  border-right: 1px solid;
  transform: scale3d(1, 0, 1);
}

.overlay:after {
  border-top: 1px solid;
  border-bottom: 1px solid;
  transform: scale3d(0, 1, 1);
}



/*-------------- 
 slide details
---------------*/
.slide-details {
  padding: 15vh 60px;
  text-align: center;
  background-color: #ffffff;
}

.header {
  overflow: hidden;
  margin-top: -100px;
}

.slide-details h2 {
  position: relative;
  box-shadow: inset 0 0 0 2px #777;
 
  padding: 4px 40px;
  overflow: hidden;
  color: #555;
  font-size: 15px;
  margin-top: -80px;
}

.slide-details h3 {
  position: relative;
  box-shadow: inset 0 0 0 2px #777;
 
  padding: 4px 40px;
  overflow: hidden;
  color: #555;
  font-size: 15px;
  margin-top: -100px;
}

.slide-details h2:before, .slide-details h2:after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: #fff;
  border: 2px solid #777;
  border-radius: 30px;
}

.slide-details h2:before {
  top: -15px;
  left: -15px;
}

.slide-details h2:after {
  top: -15px;
  left: calc(100% - 15px);
}


/* corners border */
.slide-details p {
  font-size: 15px;
  color: #777;
  position: relative;
  padding: 0px 0px;
  text-align: left;
}


.slide-details p:hover:before {
  transform: scale3d(0.7, 1, 1);
}

.slide-details button {
  margin-top: 10vh;
  padding: 10px 40px;
  font-size: 1.4em;
  color: #77b5e2;
  text-transform: uppercase;
  background-color: transparent;
  border: 1px solid #77b5e2;
  cursor: pointer;
  transition: background-color 1s ease-in-out, color .7s ease-in-out;
}

.slide-details button:hover {
  background-color: #77b5e2;
  color: #fff;
}

.slide-controls {
  position: relative;
  height: 60px;
  line-height: 50px;
  text-align: center;
  font-size: 3em;
  color: #fff;
  width: 150px;
  margin-left: 730px;
  margin-top: 20px;
  left: 0;

  transform: translateY(-50%);
}

.slide-controls .left,
.slide-controls .right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 1s ease;
}

.slide-controls .left:hover,
.slide-controls .right:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.slide-controls .right {
  right: 0;
}

/* slides aniamtion */
.slide .slide-thump,
.slide-details .header,
.slide-details p {
  transition: all 1s ease;
}

.slide .slide-thump {
  transform: translate3d(0, -100%, 1px);
  transition-delay: 0s;
}

.slide-details .header {
  transform: translate3d(0, 200%, 1px);
  transition: all 1s linear;
  transition-delay: 0.75s;
}

.slide-details p {
  transform: scale3d(0, 0, 1);
  transition-delay: 1.5s;
}

.slide.active .slide-thump,
.slide.active .slide-details .header {
  transform: translate3d(0, 0, 1px);
}

.slide.active .slide-details p {
  transform: scale3d(1, 1, 1);
}

@media(max-width:768px){
  
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-left: -20px;
}

.slider-outer {
  transition: all 1.5s cubic-bezier(0.13, 0.56, 0.58, 0.97);
  height: 100%;
}

.slide {
  width: 100%;
  height: 50vh;
  min-height: 300px;
  float: left;
  overflow: hidden;
  position: relative;
}

.slide-thump,
.slide-details {
  float: left;
}

.slide-thump,
.slide-details {
  width: 50%;
  height: 100%;
  position: relative;
}

.slide-thump img {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: all 3s ease;
}

.overlay:before, .overlay:after {
  content: '';
  display: block;
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  transition: all 1s ease;
  color: #b1b1b1;
}

.overlay:before {
  border-left: 1px solid;
  border-right: 1px solid;
  transform: scale3d(1, 0, 1);
}

.overlay:after {
  border-top: 1px solid;
  border-bottom: 1px solid;
  transform: scale3d(0, 1, 1);
}

.slide-thump:hover .overlay:before,
.slide-thump:hover .overlay:after {
  transform: scale3d(1, 1, 1);
}

.slide-thump:hover .overlay {
  transition: all 1s ease;
  background-color: rgba(0, 0, 0, 0.7);
}

/*-------------- 
 slide details
---------------*/
.slide-details {
  text-align: center;
  background-color: #ffffff;
}

.header {
  overflow: hidden;
  margin-top: -100px;
}

.slide-details h2 {
  position: relative;
  box-shadow: inset 0 0 0 2px #777;
  display: inline-block;
  padding: 14px 40px;
  overflow: hidden;
  color: #555;
  margin-top: 110px;
  font-size: 18px;
}
.slide-details h3 {
  position: relative;
  box-shadow: inset 0 0 0 2px #777;
 
  padding: 4px 40px;
  overflow: hidden;
  color: #555;
  font-size: 15px;
  margin-top: -100px;
}

.slide-details h2:before, .slide-details h2:after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: #fff;
  border: 2px solid #777;
  border-radius: 30px;
}

.slide-details h2:before {
  top: -15px;
  left: -15px;
}

.slide-details h2:after {
  top: -15px;
  left: calc(100% - 15px);
}

/* corners border */
.slide-details p {
  font-size: 1.7em;
  color: #777;
  position: relative;
  padding: 30px 0px;
}

.slide-details p:before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: #888;
  position: absolute;
  bottom: 0;
  transform: scale3d(0.4, 1, 1);
  transition: all 1s ease;
}

.slide-details p:hover:before {
  transform: scale3d(0.7, 1, 1);
}

.slide-details button {
  margin-top: 10vh;
  padding: 10px 40px;
  font-size: 1.4em;
  color: #77b5e2;
  text-transform: uppercase;
  background-color: transparent;
  border: 1px solid #77b5e2;
  cursor: pointer;
  transition: background-color 1s ease-in-out, color .7s ease-in-out;
}

.slide-details button:hover {
  background-color: #77b5e2;
  color: #fff;
}

.slide-controls {
  position: relative;
  height: 60px;
  line-height: 50px;
  text-align: center;
  font-size: 3em;
  color: #fff;
  width: 50px;
  margin-left: -1250px;
 
}

.slide-controls .left,
.slide-controls .right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 1s ease;
}

.slide-controls .left:hover,
.slide-controls .right:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.slide-controls .right {
  right: 0;
}

/* slides aniamtion */
.slide .slide-thump,
.slide-details .header,
.slide-details p {
  transition: all 1s ease;
}

.slide .slide-thump {
  transform: translate3d(0, -100%, 1px);
  transition-delay: 0s;
}

.slide-details .header {
  transform: translate3d(0, 200%, 1px);
  transition: all 1s linear;
  transition-delay: 0.75s;
}

.slide-details p {
  transform: scale3d(0, 0, 1);
  transition-delay: 1.5s;
}

.slide.active .slide-thump,
.slide.active .slide-details .header {
  transform: translate3d(0, 0, 1px);
}

.slide.active .slide-details p {
  transform: scale3d(1, 1, 1);
}

}


@media(max-width:468px){
    
          
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
    
    .slider-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      margin-left: 0px;
    }
    
    .slider-outer {
      transition: all 1.5s cubic-bezier(0.13, 0.56, 0.58, 0.97);
      height: 100%;
    }
    
    .slide {
      width: 100%;
      height: 70vh;
      min-height: 300px;
      float: left;
      overflow: hidden;
      position: relative;
    }
    
    .slide-thump,
    .slide-details {
      float: left;
    }
    
    .slide-thump,
    .slide-details {
      width: 50%;
      height: 100%;
      position: relative;
    }
    
    .slide-thump img {
      width: 100%;
      height: 100%;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      transition: all 3s ease;
    }
    
    .overlay:before, .overlay:after {
      content: '';
      display: block;
      position: absolute;
      top: 30px;
      left: 30px;
      bottom: 30px;
      right: 30px;
      transition: all 1s ease;
      color: #b1b1b1;
    }
    
    .overlay:before {
      border-left: 1px solid;
      border-right: 1px solid;
      transform: scale3d(1, 0, 1);
    }
    
    .overlay:after {
      border-top: 1px solid;
      border-bottom: 1px solid;
      transform: scale3d(0, 1, 1);
    }
    
    .slide-thump:hover .overlay:before,
    .slide-thump:hover .overlay:after {
      transform: scale3d(1, 1, 1);
    }
    
    .slide-thump:hover .overlay {
      transition: all 1s ease;
      background-color: rgba(0, 0, 0, 0.7);
    }
    
    /*-------------- 
     slide details
    ---------------*/
    .slide-details {
      text-align: center;
      background-color: #ffffff;
    }
    
    .header {
      overflow: hidden;
      margin-top: -100px;
    }
    
    .slide-details h2 {
      position: absolute;
      box-shadow: inset 0 0 0 2px #777;
      display: inline-block;
      overflow: hidden;
      color: #555;
      margin-top: -100px;
      font-size: 8px;
      margin-left: -85px;
    }
    .slide-details h3 {
      position:relative;
      box-shadow: inset 0 0 0 2px #777;
      display: inline-block;
      overflow: hidden;
      color: #555;
      margin-top: 0px;
      font-size: 8px;
      margin-left: -50px;
    }
    
    
    .slide-details h2:before, .slide-details h2:after {
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      position: absolute;
      background-color: #fff;
      border: 2px solid #777;
      border-radius: 30px;
    }
    
    .slide-details h2:before {
      top: -15px;
      left: -15px;
    }
    
    .slide-details h2:after {
      top: -15px;
      left: calc(100% - 15px);
    }
    
    /* corners border */
    .slide-details p {
      font-size: 7px;
      color: #777;
      position: relative;
      padding: 10px 0px;
      margin-top: auto;
      margin-left: -50px;
      width: 20vh;
    }
    
    .slide-details p:before {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      background-color: #888;
      position: absolute;
      bottom: 0;
      transform: scale3d(0.4, 1, 1);
      transition: all 1s ease;
    }
    
    .slide-details p:hover:before {
      transform: scale3d(0.7, 1, 1);
    }
    
    .slide-details button {
      margin-top: 10vh;
      padding: 10px 40px;
      font-size: 1.4em;
      color: #77b5e2;
      text-transform: uppercase;
      background-color: transparent;
      border: 1px solid #77b5e2;
      cursor: pointer;
      transition: background-color 1s ease-in-out, color .7s ease-in-out;
    }
    
    .slide-details button:hover {
      background-color: #77b5e2;
      color: #fff;
    }
    
    .slide-controls {
      position: relative;
      height: 60px;
      line-height: 50px;
      text-align: center;
      font-size: 3em;
      color: #fff;
      width: 50px;
      margin-left: 230px;
     
    }
    
    .slide-controls .left,
    .slide-controls .right {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      transition: all 1s ease;
    }
    
    .slide-controls .left:hover,
    .slide-controls .right:hover {
      background-color: rgba(0, 0, 0, 0.7);
    }
    
    .slide-controls .right {
      right: 0;
    }
    
    /* slides aniamtion */
    .slide .slide-thump,
    .slide-details .header,
    .slide-details p {
      transition: all 1s ease;
    }
    
    .slide .slide-thump {
      transform: translate3d(0, -100%, 1px);
      transition-delay: 0s;
    }
    
    .slide-details .header {
      transform: translate3d(0, 200%, 1px);
      transition: all 1s linear;
      transition-delay: 0.75s;
    }
    
    .slide-details p {
      transform: scale3d(0, 0, 1);
      transition-delay: 1.5s;
    }
    
    .slide.active .slide-thump,
    .slide.active .slide-details .header {
      transform: translate3d(0, 0, 1px);
    }
    
    .slide.active .slide-details p {
      transform: scale3d(1, 1, 1);
    }

}