/*Cambio de color de la nav bar a negro
.navbar{
    background-color: transparent !important
}
*/

/*-------------------Estilo para CTI Automation en navbar---------------------*/
.navbar-dark .navbar-brand {
  border-radius: 15px;
 /* padding: 10px !important;*/


}
.img-logo{
    /*width: 150px;*/
    min-width: 50px;

}
nav{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.navPropia{
    background-color: #E0EEEF !important;
}
/*-------------------Al pasar el cursor por CTI Automation cambia a negro-----*/
.navbar-brand:hover{
    color: #000 !important;
}

.nav-item a{
    color: #547EA6 !important;
}
.nav-item:hover .nav-link:hover{
    color: white !important;
    background-color: #0D2C5B !important;
    border-radius: 15px;
}

/*------------------Estilos para jumbotron-----------------------------------*/
.opaco{
    opacity: 0.6 !important;
}

.margen{
    margin-top: -100px;
}
.fondo{
    background-image: url(../images/metal-1212115_1920.png);
    
    opacity: 0.9;
}
.fondohorizontal{
     height: 79px;
     background-image: url(../images/metal-1212115_1920.png);
     opacity: 0.9;
}
.jumbotron p{
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 500;
    color:#000;
    padding: 10px;
}
.recuadroQuienes{
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/*------------------Estilos para carousel------------------------------------*/


.carousel-item {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.carousel-caption {
 /* bottom: 70px;
  color: #fff !important;
   */
  margin-bottom: 1%;
  background: rgba(0,0,0,0.1);
  padding: 50px 100px;
}

.carousel-caption h5 {
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
  color: #fff !important;
}

.carousel-caption p {
  width: 75%;
  margin: auto;
  font-size: 24px;
  line-height: 1.9;
  color: #fff!important;
}
.carousel-inner .carousel-item  {
    -webkit-transition: -webkit-transform 0.8s  !important;
    -o-transition: -o-transform 0.8s  !important;
    transition: transform 1.0s  !important;
}


/* Para un comportamiento responsive */
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.tamanoImagen {
    width: 1920px;
    height: 1080px;
}
 /*------------------Estilos para h1 con id ------------------------------*/
    .content-box{
       
        height: 100%;
        width: 100%;
        
     }

    #quienessomosH1{
         text-align: center;
         padding-top: 20px;
      }
    #quienessomosH1::after{
        content: '';
        background: #41A48F;
        display: block;
        height: 4px;
        width: 280px;
        margin: 20px auto 50px;
    }
#servH1{
     text-align: center;
     padding-top: 20px;
}
#servH1::after{
   content: '';
   background: #41A48F;
   display: block;
   height: 4px;
   width: 330px;
   margin: 20px auto 50px; 
    
}
#tendenciasH1{
   text-align: center;
   padding-top: 20px; 
}
#tendenciasH1::after{
        content: '';
        background: #41A48F;
        display: block;
        height: 4px;
        width: 190px;
        margin: 20px auto 50px;
}
#recFooter{
   text-align: center;
   padding-top: 20px;
}
#recFooter::after{
        content: '';
        background: #41A48F;
        
        display: block;
        height: 4px;
        width: 90px;
        margin: 20px auto 50px;
}
/*------------------Estilos para las tarjetas zoom---------------------------*/
.containerPadding{
    margin-top: 8%;
   /* background-image: linear-gradient(to right, #c0d2dd, #010609);*/
}
.inner{
   overflow: hidden;    
}
.inner img{
    transition: all 1.5s ease;
}
.inner:hover img{
    transform: scale(1.5);
}


/*--------------------Estilos para las tarjeta flip---------------------------*/
.card-container{
	position: relative;
	width: 18rem;
	perspective: 200rem;
	height: 412px;
}

.card-container:hover .card-front{
	transform: rotateY(180deg);
}

.card-container:hover .card-back{
	transform: rotateY(0deg);
}

.card-back{
	transform: rotateY(180deg);
}

.card{
	position: absolute;
	height: 100%;
	width: 100%;
	transition: all 0.9s;
	backface-visibility: hidden;
}

.card-back .card-body{
	position: relative;
}

.card-body a{
	position: absolute;
	top:90%;
	left: 50%;
	margin: -15% 0 0 -23%;
}
.card-validacion{
    height: 70%;
}
/**/
/*----------------------footer------------------*/

    
 
    #recurso1 a{
color: #fff;
}
    #recurso2 a{
color: #fff;
}
    #recurso3 a{
color: #fff;
}
    #recurso4 a{
color: #fff;
}
 
footer{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: sans-serif;
    width: 100%;
    background:#E0EEEF ;
    color: #547EA6;   
    
}


/*------------estilos para copyright------------*/
.copyright{
    color: #547EA6;
}

.copyright a{
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.information a{
    text-decoration: none;
    color: #C7C7C7;
}
.footer{
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;  
    padding: 20px;
}

/* iconos de redes sociales*/

 #facebook p {
        padding: 10px 25px;
        background: #3b5998;
        color: #ffffff;
        text-decoration: none;
        width: 55px;
        transition: all .4s ease;
        margin-bottom: 0px;
    }
    
    #facebook p:hover {
        background: #000;
        padding: 10px 40px;
    }
    #whats p {
        padding: 10px 20px;
        background: #4AC959;
        color: #ffffff;
        text-decoration: none;
        width: 55px;
        transition: all .4s ease;
        margin-bottom: 0px;
    }
    
    #whats p:hover {
        background: #000;
        padding: 10px 40px;
    }
.containerServicio{
 margin-top: 8%;
}
.footer-row h5::after{
    content: '';
        background: #41A48F;
        display: block;
        height: 4px;
        width: 110px;
        
}
.footer-title{
    padding-left: 0px;
}
.logoFooter{
    margin-left: 10%;
}

/*------------------------Estilos para formulario contactanos------------------------------------------------------*/
body > main > section:nth-child(3) > div > div{
    height: 295px;
}
  
.tittle-services{
    margin-top: 120px;
    display: flex;
    justify-content: center;

}
.tittle-electric{
    margin: 20px 0px;
    display: flex;
    justify-content: center;

}
.tittle-civil{
    margin: 20px 0px;
    display: flex;
    justify-content: center;
}
.titulo-servicio{
    margin-top: 120px;
}
.description-area{
    margin: 10px 20%;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    background:#f4f4f4; ;
    border-radius: 10px;
    
}
.description-area p{
    padding: 20px;
  font-size: 20px;
  font-family: 'Commissioner', sans-serif;
}
.area-codigo{
    flex-direction: column;
}
.description-area  h4{
    padding: 0px 20px;
  
  font-family: 'Commissioner', sans-serif;
  font-weight: bold;
}
.frontal,.vuelta{
    background: #1A3970 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    padding: 1rem 4rem;
    color: #9BBFD7;
    border-radius: 15px;

}
.card-container{
    width: 90%;
    height: auto;
    text-align: center;
    border: 5px solid #547EA6;
    border-radius: 20px;
    
}
.hr{
   outline-color: red;
}
.empresas{
    padding-left: 10%;
    padding-right: 10%;
}
.container-sec{
   background-color:#00797E ;
    border-radius: 20px;
}
.banner h1{
    font-size: 10vw !important;
    color: #0D2C5B;
    font-weight: 900;
    text-shadow: 2px 0 #9BBFD7;
}
.container-sec ol{
   line-height: 2rem;
   font-size: 1.5rem;
    font-weight: 350;
   /*letter-spacing: 2px;*/
}
.container-sec p{
   line-height: 2rem;
   font-size: 1.5rem;
   /*text-align: justify;*/
   color:#9BBFD7;
       
}
.container-casos{
    margin-top: 80px;
    padding-bottom: 1.5%;
   
}
.container-casos h2{
    text-shadow: 2px 0 #0D2C5B;
    display: flex;
    justify-content: center;
    color:#9BBFD7;
}

.container-casos h3{
    color: #1A3970;
    /*text-shadow: 1px 0 #9BBFD7;*/
}
/*border-radius: 8px 8px 8px 8px;*/
.tittle-experience{
    font-size:5rem;
    margin-bottom: 2.5rem;
    color: #0D2C5B !important;
    text-shadow: 2px 0 #9BBFD7 !important;
}
.selectServicios{
    background: #343a40;
    color: rgba(255,255,255,.5);
    border: 0px;
    padding: 8px;
}
.selectServicios option{
    background-color: #343a40;
}
.selectServicios:hover{
    color: #fff !important;
    background-color: darkred !important;
    border-radius: 15px;
}

.card-title{
    font-size: 2rem;
}
.card-img-top-nosotros{
    width: 70%;
}
@media only screen and (min-width: 320px) {
    .divNosotros{
        min-height:300vw;
    }
  }
  @media only screen and (min-width: 360px) {
    .divNosotros{
        min-height:270vw;
    }
  }
  @media only screen and (min-width: 400px) {
    .divNosotros{
        min-height:220vw;
    }
  }
  @media only screen and (min-width: 415px) {
    .divNosotros{
        min-height:200vw;
    }
  }
  @media only screen and (min-width: 450px) {
    .divNosotros{
        min-height:180vw;
    }
  }
  @media only screen and (min-width: 480px) {
    .divNosotros{
        min-height: 155vw;
    }
  }
  @media only screen and (min-width: 500px) {
    .divNosotros{
        min-height: 130vw;
    }
  }
  @media only screen and (min-width: 550px) {
    .divNosotros{
        min-height: 107vw;
    }
  }
  @media only screen and (min-width: 620px) {
    .divNosotros{
        min-height: 92vw;
    }
  }
  @media only screen and (min-width: 768px) {
    .divNosotros{
        min-height: 70vw;
    }
  }
  @media only screen and (min-width: 1024px) {
    .divNosotros{
        min-height: 50vw;
    }
  }
     
.cardRedo1,.cardRedo2,.cardRedo3,.cardRedo4,.cardRedo5,.cardRedo6{
    
    width: 10rem; height: 10rem; 
    border-radius: 15rem; 
    -webkit-border-radius: 15rem; 
    -moz-border-radius: 15rem; 
  
    

}
.cardRedo1{
   
    background: url("../images/empre1-300px.png") no-repeat;
    background-color: #fadb06; 
    background-position: center center;
    background-size: 11rem;
}
.cardRedo2{
   
    background: url("../images/empre2-300px.png") no-repeat;
    background-color: white;
    background-position: center center;
    background-size: 10rem;
}
.cardRedo3{
   
    background: url("../images/empre3-300px.png") no-repeat;
    background-color: white; 
    background-position: center center;
    background-size: 10rem;
}
.cardRedo4{
   
    background: url("../images/empre4-300px.png") no-repeat;
    background-color: white;
    background-position: center center;
    background-size: 10rem;
}
.cardRedo5{
   
    background: url("../images/empre5-300px.png") no-repeat;
    background-color: white; 
    background-position: center center;
    background-size: 10rem;
}
.cardRedo6{
    background: url("../images/empre6-300px.png") no-repeat;
    background-color: #fadb06; 
    background-position: center center;
    background-size: 10rem;

}
/*
.containerCodigo{
    padding: 10%;
    display: flex;
}
.texto-codigo{
    padding: 5%;
   background-color:  #EBE9EB;
}
.img-codigo{
    align-self:center;
}
 .texto-codigo:hover{
   
    margin-left: -30%;
    background-color:  #B6B5B1;
     transition: all 1.5s ease;
     color: #01708B;
     font-weight: bold;
}
*/

/*

#s-text{
    font-size: 6rem;
}

.text {
    fill: none;
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-dasharray: 70 330;
    stroke-dashoffset: 0;
    -webkit-animation: stroke 6s infinite linear;
    animation: stroke 6s infinite linear;
  }
  
  .text:nth-child(5n + 1) {
    stroke: #F2385A;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .text:nth-child(5n + 2) {
    stroke: #F5A503;
    -webkit-animation-delay: -2.4s;
    animation-delay: -2.4s;
  }
  
  .text:nth-child(5n + 3) {
    stroke: #E9F1DF;
    -webkit-animation-delay: -3.6s;
    animation-delay: -3.6s;
  }
  
  .text:nth-child(5n + 4) {
    stroke: #56D9CD;
    -webkit-animation-delay: -4.8s;
    animation-delay: -4.8s;
  }
  
  .text:nth-child(5n + 5) {
    stroke: #3AA1BF;
    -webkit-animation-delay: -6s;
    animation-delay: -6s;
  }
  
  @-webkit-keyframes stroke {
    100% {
      stroke-dashoffset: -400;
    }
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: -400;
    }
  }
  
 
  svg {
    position: relative;
    width: 100%;
    height: 100%;
  }
*/