/*
 * Autor: Gonzalo Tovar
 * E-mail: tovargonzaloth@gmail.com
 *
 * Fecha:01/10/2018
 */
 

/*REDEFINICIONES DE FUNCIONES*/

/*STAR: Estilos y Media Screen para navbar*/
#logo_corpo{
		width: 300px;
		height: 80px;
		background: url(../images/corpo_logo_mini.webp) no-repeat 0 50%; 
} 

@media screen and (min-width: 467px) and (max-width: 979px) {
  
  #logo_corpo{
    width: 300px;
    height: 70px;
    margin-left: 20px;
    background: url(../images/corpo_logo_mini.webp)  no-repeat 0 50%;
  }
}

@media screen and (min-width: 220px) and (max-width: 469px) {
  #logo_corpo{
    width: 150px;
    height: 40px;
    margin-left: 20px;
    background: url(../images/corpo_logo_mini_139x30.webp) no-repeat 0 50%;
  }
  
  /*Ajuste de la sección luego del header debido a que a esta escala, el header se encoge 30px*/
  .navbar-bottom{
    margin-top: -30px !important;
  }
}

@media screen and (min-width: 203px) and (max-width: 219px){
  
  #logo_corpo{
    width: 150px;
    height: 40px;
    margin-left: 20px;
    background: url(../images/corpo_logo_mini_100x22.webp) no-repeat 0 50%;
  }
  /*Ajuste de la sección luego del header debido a que a esta escala, el header se encoge 30px*/
  .navbar-bottom{
    margin-top: -30px !important;
  }
}

@media screen and (max-width: 202px){
  
  #logo_corpo{
    width: 150px;
    height: 40px;
    margin-left: 20px;
    background: url(../images/corpo_logo_mini_100x22.webp) no-repeat 0 50%;
  }
}
/*STAR: Estilos y Media Screen para navbar*/



/*START: NAVBAR*/
/*navbar link*/
.li-act{
  background: #e5e5e5;
}
.list-li:hover{
  background: #e5e5e5;
}

.navbar-fixed{
  z-index: 50 !important; 
  position: fixed !important; 
}

.navbarinner-padding{
  padding-left: 5% !important; 
  padding-right: 5% !important;
}

.nav-shad{
  box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}

/*END: NAVBAR*/

/*breadcrumb*/
div>ul.breadcrumb{
  font-size: 15px;
}


.tit-h4-index{
  font-size: 20px;
  text-align: justify
}

/*Iconos de redes Sociales*/
ul>li>a>img.ico-red{
  width: 35px; height: 35px;
}

.ter_uso, .pol_cookies, .sobre_nos, .servi_tex{
  text-align: justify; font-size: 15px;
}

/***********************************************************************************************************************
************************************************************************************************************************
*******************************************************INICIO***********************************************************
************************************************************************************************************************
************************************************************************************************************************/
/* BEGINS CAROUSEL*/
.carousel_corpo{
  background: #E67E22; 
  padding-top: 0px;
  padding-bottom: 0px;
}


/*Para colocarles los bordes a las fotos de instalaciones en el index*/
ul>li>div.preview{
  border: 3px solid #ffffff;
}


.clientes:hover{

box-shadow: 0px 0px 10px 10px #ec731e;
-webkit-box-shadow: 0px 0px 10px 10px #ec731e inset;
-moz-box-shadow: 0px 0px 10px 10px #ec731e inset;
-ms-box-shadow: 0px 0px 10px 10px #ec731e inset;
-o-box-shadow: 0px 0px 10px 10px #ec731e inset;

transition: all .5s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}


/*START: Fondo Animado con Cuadros Index*/

.animacion-cuadrados {
  background: #f46b45;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #eea849, #f46b45);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #eea849, #f46b45); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
  max-height: 520px;
  overflow: hidden;
}
        
@media screen and (max-width: 979px){
  .cuadrados{
    display: none;
  }
}


@media screen and (min-width: 980px) {
  .cuadrados {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .cuadrados li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.15);
    bottom: -150px;
    -webkit-animation: square 25s infinite linear;
    -moz-animation: square 25s infinite linear;
    animation: square 25s infinite linear;
  }

  .cuadrados li:nth-child(1) {
    left: 0px;
    max-width: 40px;
    max-height: 40px;
  }

  .cuadrados li:nth-child(2) {
    left: 10%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    -moz-animation-duration: 17s;
    animation-duration: 17s;
  }

  .cuadrados li:nth-child(3) {
    left: 20%;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    animation-delay: 4s;
  }

  .cuadrados li:nth-child(4) {
    left: 30%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
    -moz-animation-duration: 22s;
    animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.25);
  }

  .cuadrados li:nth-child(5) {
    right: 20%;
  }

  .cuadrados li:nth-child(6) {
    right: 25%;
    width: 95px;
    height: 95px;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .cuadrados li:nth-child(7) {
    left: 15%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
  }

  .cuadrados li:nth-child(8) {
    left: 75%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    -moz-animation-duration: 40s;
    animation-duration: 40s;}

  .cuadrados li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    -moz-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
  }

  .cuadrados li:nth-child(10) {
    right: 15%;
    width: 96px;
    height: 96px;
    -webkit-animation-delay: 11s;
    -moz-animation-delay: 11s;
    animation-delay: 11s;
  }

  .cuadrados li:nth-child(11) {
    left: 15%;
    width: 17px;
    height: 17px;
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    animation-delay: 12s;
    -webkit-animation-duration: 40s;
    -moz-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .cuadrados li:nth-child(12) {
    left: 20%;
    width: 5px;
    height: 5px;
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 15s;
    -moz-animation-duration: 15s;
    animation-duration: 15s;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .cuadrados li:nth-child(13) {
    left:15%;
    width: 8px;
    height: 8px;
    -webkit-animation-delay: 17s;
    -moz-animation-delay: 17s;
    animation-delay: 17s;
    -webkit-animation-duration: 29s;
    -moz-animation-duration: 29s;
    animation-duration: 29s;
    background-color: rgba(255, 255, 255, 0.3);
  }

  .cuadrados li:nth-child(14) {
    right: 5%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 11s;
    -moz-animation-delay: 11s;
    animation-delay: 11s;
    -webkit-animation-duration: 19s;
    -moz-animation-duration: 19s;
    animation-duration: 19s;
    background-color: rgba(255, 255, 255, 0.35);
  }

  .cuadrados li:nth-child(15) {
    right: 10%;
    width: 50px;
    height: 50px;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-duration: 12s;
    -moz-animation-duration: 12s;
    animation-duration: 12s;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .cuadrados li:nth-child(16) {
    right: 75%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 25s;
    -moz-animation-duration: 25s;
    animation-duration: 25s;
    background-color: rgba(255, 255, 255, 0.3);
  }

  .cuadrados li:nth-child(17) {
    left: 10%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 20s;
    -moz-animation-duration: 20s;
    animation-duration: 20s;
    background-color: rgba(255, 255, 255, 0.45);
  }

  .cuadrados li:nth-child(18) {
    left: 2%;
    width: 100px;
    height: 100px;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .cuadrados li:nth-child(19) {
    left: 3%;
    width: 17px;
    height: 17px;
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    animation-delay: 14s;
    -webkit-animation-duration: 30s;
    -moz-animation-duration: 30s;
    animation-duration: 30s;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .cuadrados li:nth-child(20) {
    left: 1%;
    width: 5px;
    height: 5px;
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    animation-delay: 18s;
    -webkit-animation-duration: 18s;
    -moz-animation-duration: 18s;
    animation-duration: 18s;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .cuadrados li:nth-child(21) {
    right: 2%;
    max-width: 40px;
    max-height: 40px;
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 15s;
    -moz-animation-duration: 15s;
    animation-duration: 15s;
  }
        
  .cuadrados li:nth-child(22) {
    right:5%;
    width: 8px;
    height: 8px;
    -webkit-animation-delay: 17s;
    -moz-animation-delay: 17s;
    animation-delay: 17s;
    -webkit-animation-duration: 29s;
    -moz-animation-duration: 29s;
    animation-duration: 29s;
    background-color: rgba(255, 255, 255, 0.3);
  }    

  .cuadrados li:nth-child(23) {
    right: 8%;
    width: 17px;
    height: 17px;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    animation-delay: 9s;
    -webkit-animation-duration: 26s;
    -moz-animation-duration: 26s;
    animation-duration: 26s;
    background-color: rgba(255, 255, 255, 0.3);
  }

  .cuadrados li:nth-child(24) {
    left: 10%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-duration: 18s;
    -moz-animation-duration: 18s;
    animation-duration: 18s;
    background-color: rgba(255, 255, 255, 0.45);
  }

  .cuadrados li:nth-child(25) {
    left: 15%;
    width: 13px;
    height: 13px;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 25s;
    -moz-animation-duration: 25s;
    animation-duration: 25s;
    background-color: rgba(255, 255, 255, 0.45);
  }

  .cuadrados li:nth-child(26) {
    right: 35%;
    width: 98px;
    height: 98px;
    -webkit-animation-duration: 17s;
    -moz-animation-duration: 17s;
    animation-duration: 17s;
    background-color: rgba(255, 255, 255, 0.35);
  }

  .cuadrados li:nth-child(27) {
    right: 45%;
    width: 60px;
    height: 60px;
    -webkit-animation-delay: 11s;
    -moz-animation-delay: 11s;
    animation-delay: 11s;
    -webkit-animation-duration: 18s;
    -moz-animation-duration: 18s;
    animation-duration: 18s;
    background-color: rgba(255, 255, 255, 0.25);
  }
   
  /*
  * Animaciones
  */

    @-webkit-keyframes square {
        0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%) rotate(600deg);
        transform: translateY(-100%) rotate(600deg);
        }
    }

    @-moz-keyframes square {
        0% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -moz-transform: translateY(-100%) rotate(600deg);
        transform: translateY(-100%) rotate(600deg);
        }
    }

    @keyframes square {
        0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-1500px) rotate(600deg);
        transform: translateY(-1500px) rotate(600deg);
      }
    }
}
/*END: Fondo Animado con Cuadros Index*/


/*STAR: Imagen de Fondo Para la seccion de  Instalaciones y Medios - Modulo:Index*/
.adap-img-instal{
  background-image: url("../images/fondo_instalaciones.webp") !important;
}

.instal-medios{
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover  !important;
  background-attachment: fixed !important;
}


@media screen and (max-width: 350px){
  .adap-img-instal{
    background-image: url("../images/fondo_instalaciones_xs.webp") !important;
  }
}

@media screen and (min-width: 351px) and (max-width: 576px) {
  .adap-img-instal{
    background-image: url("../images/fondo_instalaciones_sm.webp") !important;
  }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
  .adap-img-instal{
    background-image: url("../images/fondo_instalaciones_md.webp") !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .adap-img-instal{
    background-image: url("../images/fondo_instalaciones_lg.webp") !important;
  }
}
/*END: Imagen de Fondo Para la seccion de  Instalaciones y Medios - Modulo:Index*/



/***********************************************************************************************************************
************************************************************************************************************************
*******************************************************SERVICIOS********************************************************
************************************************************************************************************************
************************************************************************************************************************/
/*Propiedades para colocar una imagen de fondo al estilo attachment->fixed*/
.img-fixed{
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover;/* Mozilla*/
  -o-background-size: cover;/* Opera*/
  background-size: cover;/* Generic*/
  background-attachment: fixed;
}

/*Clase para colocar la imagen en el inicio de modulo servicios*/
.img-fixed ,.serv-ini{ 
  height: 300px;
}

/*STAR: Imagen de fondo para la seccion de  Inicio - Modulo:Servicios*/
.serv-ini-fondo{
  background-image: url('../images/fondo_servicio.webp') !important;
}

@media screen and (max-width: 350px){
  .serv-ini-fondo{
    background-image: url("../images/fondo_servicio_xs.webp") !important;
  }
}

@media screen and (min-width: 351px) and (max-width: 576px) {
  .serv-ini-fondo{
    background-image: url("../images/fondo_servicio_sm.webp") !important;
  }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
  .serv-ini-fondo{
    background-image: url("../images/fondo_servicio_md.webp") !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .serv-ini-fondo{
    background-image: url("../images/fondo_servicio_lg.webp") !important;
  }
}
/*END: Imagen de Fondo Para la seccion de  Instalaciones y Medios - Modulo:Index*/

.serv-text{
  text-align: justify;
  font-size: 12pt;
}

.serv-tit{
  text-align: center; 
  margin-top: 100px;
  color:white;
}

.serv-tit > p {
  margin-top: -30px;
  font-size: 30pt;
  line-height: 30pt;
}

@media screen and (min-width: 471px) and (max-width: 719px) {
  
  .serv-tit > p {
    margin-top: -30px;
    font-size: 15pt;
    line-height: 17pt;
    padding-left: 30px;
    padding-right: 30px;
  }
}

/*Propiedades de el div de los servicios*/
.servicios-style{
  background: white;
  margin: -60px 30px 0;
  padding-bottom: 0px;
  box-shadow: 0, 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}



@media screen and (max-width: 470px) {
  .serv-text{
    text-align: justify;
    font-size: 10pt;
  }
  .none-padding{
    padding: 0px;
  }
  
  /*Propiedades de el div de los servicios*/
  .servicios-style{
    background: white;
    margin:0px;
    padding-bottom: 0px;
    box-shadow: 0, 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
  }
  
  .img-fixed ,.serv-ini{ 
    height: 150px;
  }
  .serv-tit > p {
    margin-top: -60px;
    font-size: 13pt;
    line-height: 15pt;
  }
}






section>div.agd-info{
  /*border: red solid 2px;*/
  text-align: justify;
  margin-right: 20px;
  margin-left: 20px;
  font-size: 12pt;
  line-height: 14pt;
  margin-bottom: 30px;
}

@media screen and (max-width: 470px) {
  section>div.agd-info{
  /*border: red solid 2px;*/
  text-align: justify;
  margin-right: 20px;
  margin-left: 20px;
  font-size: 10pt;
  line-height: 12pt;
  margin-bottom: 30px;
}
}

/*Forma de tarjetas para los div de servicios*/
.w3-card-4{
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}

.w3-container{
  padding:0.01em 16px;
}

.w3-center{
  text-align:center!important
}

/*Forma de tarjetas para los div de servicios*/


.serv-simg{
  max-width:500px;
  max-height: 200px;
  align-content: center;
}

.serv-cimg{
  /*border:red 2px solid; */
  max-width:400px;
  min-height: 550px;

  /*margin-bottom: 30px;*/
}

.serv-cimg:hover{
  background: #324b73;
  color: white;
}

@media screen and (max-width: 470px) {
  .serv-cimg{
    max-width:400px;
    min-height: auto;
  }
}

/*Efectos zoom sobre las imagenes de servicio*/
.img-zoom img {
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
    

}

.img-zoom:hover img {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}

.img-zoom{/*Ancho y altura son modificables al requerimiento de cada uno*/
    width:100%;
    overflow:hidden;
}
/*Efectos zoom sobre las imagenes de servicio*/




.img_servi{
  max-height: 215px;
  max-width: 350px;
}

.servi_tit{
  border-left: 6px #2284BC solid;
  padding-left: 5px;
}

.servi_tex{
  border-top: 6px #324b73 solid; 
  padding: 0px 5px 5px 5px; 
  font-size:  14pt;
  text-align: justify;
  line-height: 1.6;
}

/*.sobreus_text{
  border-top: 6px #324b73 solid; 
  padding: 0px 5px 5px 5px; 
  font-size: 50px; 
  text-align: justify;
  line-height: 1.6;
}*/

.servi_hr{
  height: 5px;
  margin-top: 30px; 
  margin-bottom: 30px;
}


/***********************************************************************************************************************
************************************************************************************************************************
*******************************************************PORTAFOLIO*******************************************************
************************************************************************************************************************
************************************************************************************************************************/

.fondo-img-prop{
  background: url("../images/portfolio/video/pre_video.webp") no-repeat fixed center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100% ;
  text-align: center;
}



@media screen and (max-width: 350px){
  .mg-top{
    margin-top: -30px !important;
  }
}

/*END: Imagen de Fondo Para la seccion de  Instalaciones y Medios - Modulo:Index*/

/***********************************************************************************************************************
************************************************************************************************************************
*******************************************************SOBRE NOSOTROS***************************************************
************************************************************************************************************************
************************************************************************************************************************/

.tit-h2-us{
  text-align: center;
}

.sobreus_text{
  /**/
  border-top: none;
  font-size: 16px;
  text-align: justify;
  line-height: 1.6;
  padding: 0px 5px 5px 5px;
}

/*START: Códido correspondiente al elemento timeline*/

@media screen and (min-width: 400px) {

  *{
    box-sizing: border-box;
  }
  
  
  /* The actual timeline (the vertical ruler) */
  .timeline {
    position: relative;
    width: 100%;
    margin: 0 auto;
  
    
  
  }
  
  /* The actual timeline (the vertical ruler) */
  .timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #d4d4d4;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
  }
  
  /* Container around content */
  .containerT {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .containerT::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
  .leftT {
    left: 0;
    padding-left: 0px;
    margin-left: 0px
  }
  
  /* Place the container to the right */
  .rightT {
    left: 50%;
    padding-right: 0px;
    margin-left: 0px
  }
  
  /* Add arrows to the left container (pointing right) */
  .leftT::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
  }
  
  /* Add arrows to the right container (pointing left) */
  .rightT::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
  .rightT::after {
    left: -16px;
  }
  
  /* The actual content */
  .contentT {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
  }
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 600px) {
  /* Place the timelime to the left */
    .timeline::after {
      left: 31px;
    }
  
  /* Full-width containers */
    .containerT {
      width: 100%;
      padding-left: 70px;
      padding-right: 25px;
    }
  
  /* Make sure that all arrows are pointing leftwards */
    .containerT::before {
      left: 60px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
    }
  
  /* Make sure all circles are at the same spot */
    .leftT::after, .rightT::after {
      left: 15px;
    }
  
  /* Make all right containers behave like the left ones */
    .rightT {
      left: 0%;
    }
    
    .sobreus_text{
      border-top: none;
      font-size: 16px;
      text-align: justify;
      line-height: 1.6;
      padding: 0px 5px 5px 5px;
    }
  }
  
  
}  
/*END: Códido correspondiente al elemento timeline*/

.sobreus_hr{
  height: 5px;
  margin-top: 30px; 
  margin-bottom: 30px;
}

.equipo_fot_ini{
  margin-left:0px;
  margin-bottom: 10px;
}
.equipo_fot{
  margin: auto;
  margin-bottom: 10px;
  max-width: 280px;
}

.usimg-his{
  -webkit-box-shadow: 0px 14px 71px -36px rgba(0,0,0,0.81);
  -moz-box-shadow: 0px 14px 71px -36px rgba(0,0,0,0.81);
  box-shadow: 0px 14px 71px -36px rgba(0,0,0,0.81);
}


ul.timeline > li.animate-box > div.timeline-panel{
  background: white;
}


/*Flip Card*/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 350px;
  height: 280px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 350px;
  height: 280px;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #1ED2D6;
  color: white;;
}

/* Style the back side */
.flip-card-back {
  background-color: #2493bf;
  color: white;
  transform: rotateY(180deg);
}

.card-back-text{
  font-size: 18px;
  text-align: justify;
  line-height: 1.8;
  padding: 20px;
}

.card-us-tit{
  padding-top: 30%;
}

.card-us-mauto{
  margin: auto;
}

.card-us-top{
  margin-top:10px;
}

#valores_mini{
  display: none;
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  
  .flip-card {
    background-color: transparent;
    width: 200px;
    height: 180px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;  /*Remove this if you don't want the 3D effect */
  }

  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 200px;
    height: 180px;
    backface-visibility: hidden;
  }

  .card-back-text{
    font-size: 10pt;
    text-align: justify;
    line-height: 12pt;
    padding: 10px;
  }
}


@media screen and (max-width: 319px){
  #valores_normal{
    display: none;
  }

  #valores_mini{
    display: inline-block;
  }

  #valores_mini > div{
    background-color: #1ED2D6;
    width: 100%;
    height: 100%;
    margin-top: 15px;
  }

  #mision__ > p:before{
    content: "MISIÓN: Satisfacer las necesidades de los clientes a través de una excelente gestión, garantizando calidad, eficiencia y la mejor relación precio-valor del mercado.";
    color: white;
    padding: 5px;

  }

  #vision__ > p:before{
    content: "VISIÓN: Liderizar el mercado de almacenamiento y transporte. Crecimiento, expansión y alianzas estratégicas que generen valor a nuestros accionistas y trabajadores. Consolidarnos como empresa modelo en tecnología y expandir los servicios hacia nuevos mercados.";
    color: white;
    text-align: center;
    padding: 5px;
  }

  #valores__ > p:before{
    content: "VALORES: El potencial humano, la honestidad, la entrega y el compromiso, se mantienen como valores fundamentales de Corporación 18 S.A..";
    color: white;
    padding: 5px;
  }

}


/*Flip Card*/

/***********************************************************************************************************************
************************************************************************************************************************
*******************************************************CONTACTANOS******************************************************
************************************************************************************************************************
************************************************************************************************************************/
.text_req{
  color:red;
}

.ocultar{
  display: none;
}


/***********************************************************************************************************************
************************************************************************************************************************
*******************************************************FOOTER***********************************************************
************************************************************************************************************************
************************************************************************************************************************/

.footer1{
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
}

#bottom address, #bottom a{
  color: white !important;
}

/***********************************************************************************************************************
************************************************************************************************************************
****************************************************RESPONSIVE TEXT*****************************************************
************************************************************************************************************************
************************************************************************************************************************/

@media screen and (max-width: 470px) {
  .tit-h1, .tit-h1-serv{
    font-size: 14pt;
  }
  
  .tit-h1-legal, .tit-h1-cookies{
    font-size: 20pt;
    margin-left: 5px;
  }

  #privacy-policy h3{
    font-size: 12pt;
    line-height: 18pt;
  }

  #privacy-policy h4{
    font-size: 10pt;
    line-height: 14pt;
    text-align: justify;
  }



  .ter_uso, .pol_cookies{
    text-align: justify; 
    font-size: 12px;
  }

  .tit-h4, .tit-h4-serv-us,.tit-h4-serv, #contact-page h4 {
    font-size: 11pt;
  }

  .tit-h4-serv2{
    font-size: 9pt;
  }


  .tit-h2{
    font-size: 12pt;
    line-height: 18pt;
    margin-bottom: -30px;
  }

  .tit-h1-index{
     padding-top: 20px;
     font-size: 12pt;
     margin-top: -50px;
     line-height: 16pt
    
  }

  .tit-h4-index{
    font-size: 10pt;
    text-align: justify;
    line-height: 14pt;

  }

  .nivo-text-index{
    font-size: 8pt;
    text-align: justify;
    line-height: 14pt;
    padding:0px;
    margin: 0px;

  }

  .tit-h2-us{
    font-size: 16pt;
    line-height: 18pt;
    text-align: center;
  }

  .sobreus_text{
    border-top: none;
    font-size: 12px;
    text-align: justify;
    line-height: 1.6;
  }
  
  #main-contact-form label, #main-contact-form input, #main-contact-form textarea{
    font-size: 11px;
  }

  #bottom address, #bottom a{
      color: white !important;
      font-size: 12px;

  }

  
}