/*body{
    background-image: url('../img/portada/logoF.png');
    background-position: center center;
    background-repeat: repeat;
}
*/

/*oculta lo importante en el login*/
#caja{
    display: none;
}

#textoLogin{
    color: red;
}

.container-1 #contenido-2{
    width: 100%;
    padding: 0px;
    margin: 0px;
    
}

#direccion{
    opacity: 0.1;
}

.negrita{
    font-weight: bold;
}

.row{
    
    padding: 15px 0;
}

/*cabecera de panel header*/
.row .panel-heading{
    background: rgba(242, 255, 255, 0.9);
    color: gray;
    padding: 1px 10px;
}

/*justificacion de MISION y VISION*/
.mision, .vision{
    color: black;
    font-size: 20px;
}

.col-md-4 .panel-body{
    background: rgba(222,252,252,0.7);
}
                                    /*NOSOTROS*/

/*espaciados de las fotos*/
#foto{
    width: 100%;
    height: 100%;
}


.container .col-md-12{
    margin-top: 45px;
}

/*animacion de letras de valores*/
h1 p{
    padding-top: 0;
}
.title-1, .title-2, .title-3{
    color: white;
    font-size: 18px;
    border: 1px solid blue;
    padding: 3px;
    animation: cambio2 3s normal;
    opacity: 0;
    animation-fill-mode: forwards;
}

.title-1{
    animation-delay: 1s;
}
.title-2{
    animation-delay: 2s;
}
.title-3{
    animation-delay: 3s;
}

@keyframes cambio2 {
    0%{
        margin-left: -100%;
        opacity: 0;
    }    
    50%{
        margin-left: -50%;
        opacity: 0.5;
    }
    100%{
        margin-left: 0;
        opacity: 1;
    }    
} 
/*FIN DE LETRAS DE VALORES*/

                                    /*SERVICIOS*/

#header{
    margin-top: 55px;
}

/*letra camera*/
.containe{
    margin-top: 72px !important;
    max-width: 90%;/*90% para que no interfiera con el incono de face y youtube de lado derecho*/
    margin: auto;
}
/*permite mantener las imagenes (camaras, intercmunicadores, web, etc) centradas y dentro del containe*/
.containe img{
    width: 100%;
}

/*fondo de camaras*/
.cam .panel-heading{
    background: #78b4dc;
}

/*fondo de intercom*/
.intercom .panel-heading{
    background: #508cb4;
}

/*fondo de web*/
.web .panel-heading{
    background: #28648c;
}

.imagen-1{
    animation-name: title1;
    animation-duration: 3s;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
}

@keyframes title1{/*esta animacion afectara a todas las animaciones de ese nombre (title1)*/
    0%{/*indica el inicio de la animacion*/
        opacity: 0;
    }
    100%{ /*indica el termino de la animacion, y van desde (0; 0,1; 0,2; ...0,9 ;1)*/
        opacity: 1;
    }
}


/*permite la animacion del slider de servicios*/
.slider{
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.slider ul{
    display: flex;
    padding: 0;
    width: 500%;    
    animation: cambio 25s infinite;
}

.slider li{
    width: 100%;
    list-style: none;
}

.slider img{
    display:block;/*las dos lineas permiten centrar una imagen (display y margin)*/
    margin:auto;
    width: 100%;
}

@keyframes cambio {
    0%{margin-left: 0; opacity: 0;}
    5%{margin-left: 0; opacity: 1;}
    19%{margin-left: 0; opacity: 1;}
    20%{margin-left: 0; opacity: 0;}
    
    20%{margin-left: -100%; opacity: 0;}
    25%{margin-left: -100%; opacity: 1;}
    39%{margin-left: -100%; opacity: 1;}
    40%{margin-left: -100%; opacity: 0;}
    
    40%{margin-left: -200%; opacity: 0;}
    45%{margin-left: -200%; opacity: 1;}
    59%{margin-left: -200%; opacity: 1;}
    60%{margin-left: -200%; opacity: 0;}
    
    60%{margin-left: -300%; opacity: 0;}
    65%{margin-left: -300%; opacity: 1;}
    79%{margin-left: -300%; opacity: 1;}
    80%{margin-left: -300%; opacity: 0;}
    
    80%{margin-left: -400%; opacity: 0;}
    85%{margin-left: -400%; opacity: 1;}
    99%{margin-left: -400%; opacity: 1;}
    100%{margin-left: -500%; opacity: 0;}
}
/*FIN EFECTO DE SERVICIOS-CAMARAS*/

/*promocion.  permite centrar la imagen de promocion*/
.promo img{
    display: block;
    margin: auto;
    width: 60%;
    margin-top: 70px;    
}
/*las lienas arriba corresponde al css anterior (background)*/

/*fondo de los titulos de los serivicos*/
.col-md-6 .panel-heading{
    background: rgba(120,180,220, 0.2);
}

.fb-like{    
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
}