/*
15102018 AF
Estilos para las secciones de las paginas de contenido
*/




/*
Resoluciones: 
    Huawei P8 Lite: 360 x 640
    Tablet Toshiba: 800 x 1232
*/




/*
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxx ESTILOS PARA TODOS LOS DISPOSITIVOS xxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
*/


/*
24102018 AF
xxxxx SECCIONES xxxxx
*/
/*
Clase para resaltar la seccion a editar y para asignar espacios superior e inferior
*/
.secciones-contenido{
    padding-top: 10px; 
    padding-bottom: 10px;
}
/*
25102018 AF
Suprime los espacios de los titulos y subtitulos
*/
/*.secciones-contenido .page-header,*/ 
.secciones-contenido h2, .secciones-contenido h4{
    padding: 0px;
    /*  margin-top: 0px; es importante para que no quede tanto espacio entre los titulos y la seccion anterior. */
    margin-top: 10px;
}


/*
25102018 AF
En dispositivos XS las filas se muestran similar al formato vertical
*/
.secciones-fila-hor-foto-izq-flex-cont, .secciones-fila-hor-foto-der-flex-cont {
    display: flex;
    flex-wrap: wrap;
    /* Compatibilidad con otros navegadores */
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
}
/*
Se usa flex-direction: column-reverse; para indicar que la foto que aparecia horizontalmente a la derecha se invierte de posicion en
dispositivos xs para quedar por encima del texto.
*/
.secciones-fila-hor-foto-der-flex-cont {
    flex-direction: column-reverse;
    /* Compatibilidad con otros navegadores */    
    -webkit-flex-direction: column-reverse; /* Safari 6.1+ */    
} 
/*
Espacios al lado de los textos de las secciones en formato horizontal, para que los textos no queden pegados a los lados.
*/
.secciones-fila-hor-cols{
    padding-left: 0px; 
    padding-right: 0px;
    /*
    27022019 AF
    No se centran las columnas por defecto, la idea es que en small devices la alineacion sea la seleccionada.
    */
    /* text-align: center; */
    /*
    Color para probar el fondo de las columnas en las secciones horizontales
    */
    /*background-color: yellow;*/
}


/*
27022019 AF
Se agrega  .secciones-btn-comprar
*/

/*
25102018 AF
*/
.secciones-btn-comprar{
    margin-top: 10px;
    /* Se agrega un margen inferior al boton mas para que no quede junto al contenido siguiente y se pueda confundir el usuario */
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0px;
    transition: 1s;
}



/* 
25102018 AF 
Alto de las fotos en las secciones foto a la izquierda small.
*/
.secciones-fila-hor-small-foto{
    height: 90px;
}



/*
24102018 AF
xxxxx BOTON EDITAR SECCION xxxxx
*/
.secciones-contenido .secciones-btn-edit{
    font-family: Verdana, sans-serif; 
    color: #000000; 
    background-color: #FFFF00; 
    font-size: 16px; 
    margin-right: 10px; 
    margin-top: 20px;
    -webkit-transition: 0.1s; /* Safari */
    transition: 0.1s;
}
.secciones-contenido .secciones-btn-edit:hover{
    color: #000000;
    background-color: #ffcc00;
}
/*
24102018 AF
xxxxx POPOP EDITAR SECCION xxxxx
*/
.secciones-contenido .secciones-popup-editar,
#divPoupCrearSeccionAlFinal > .secciones-popup-editar{
    /*
    29102018 AF
    */
    z-index: 200100; /*99999;*/
             
    background-color: white;
}
.secciones-contenido .secciones-popup-editar-botones{
    padding-top: 30px;    
}
.secciones-contenido .secciones-popup-editar-formato{
    text-align: left; 
    padding-top: 30px;
}
/*
25102018 AF
Ancho del popup para editar secciones
*/
.popup-secciones{
   width: auto; 
    /*
    01092026 AF
    */   
   background-color: white;
}  




/*
26112018 AF
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxx ESTILOS PARA LAS TABLAS xxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
*/
.aboutus-page table{
    border: 2px solid #ffffff;
}
.aboutus-page table td, .aboutus-page table th{
    padding: 10px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
}
.aboutus-page table th{
    text-align: center;
    font-weight: normal;
}




/*
26112018 AF
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxx ESTILOS PARA LOS POPUPS DE LOS FORMATOS xxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
*/
.secciones-popup-editar .modal-content{
    width: 800px;
    /*
    01092026 AF
    */
    background-color: white;
}
.secciones-popup-editar .modal-header{
    text-align: center; 
    background-color: #ffcc00;
}
.secciones-popup-editar .modal-title-2 {
    color: #ffffff; 
    font-weight: bold;
}
.secciones-popup-editar .modal-header span{
    color: #ffffff;
}
.padding-div-editar-formato{
    padding-bottom: 20px; 
    padding-top: 20px;
} 
.secciones-popup-editar-formato{
    overflow-y: scroll; 
    height: 500px; 
    height: 580px; 
    border-bottom: 0px solid #cccccc;
}
.secciones-popup-editar .modal-footer{
    text-align: center;
}






/*
01112018 AF
Es necesario agregar esta seccion para ejecutar estilos que exlusivamente deben ser llamados para dispositivos small.
Esto surgio para el manejo de secciones horizontales con el CKEditor que asigna estilos para la alineacion central y derecha pero no lo hace
para la alineacion izquierda, por tanto en XS debe centrar, en caso contrario para dispositivos superiores debe dejar la seleccion del CKEditor.
*/
@media (max-width: 768px) { 
    
    /*
    18032019 AF
    Ajusta el formulario para crear secciones.
    */
    .secciones-popup-editar .modal-content{
        width: 360px;
    }    
    
    /*
    01112018 AF
    Importante!
    Se usa "!important" para sobreescribir el estilo asignado en el mismo codigo done esta el elemento html.
    */
    div.secciones-fila-hor-cols p,
    div.secciones-fila-hor-cols a{
        /*
        27022019 AF
        No se centrara por defecto en dispositivos small.
        Se usara el formato seleccionado por el usuario.
        */
        /* text-align: center !important; */
    } 

    
    
    /*
    10112018 AF
    Centra los botones Ver mas.
    Se usa !important para sobreescribir el estilo asignado en el DIV.
    */
    .div-btn-ver-mas{
        
        /*
        27022019 AF
        Se respeta el estilo seleccionado por el usuario, de tal manera que no siempre se centra en dispositivos small.
        */
        /*
        text-align: center !important;
        */
    }
}








/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px /*@screen-sm-min*/) { 
    
    
    /*
    25102018 AF
    Ancho del popup para editar las secciones.
     */
    .popup-secciones{
       width: 730px; 
    }    
    
    
    /*
    18032019 AF
    Ajusta el formulario para crear secciones.
    */
    .secciones-popup-editar .modal-content{
        width: 730px;
    }       
    
    
    /*
    25102018 AF
    Se usa flex-direction: column-reverse; para indicar que la foto que aparecia horizontalmente a la derecha se invierte de posicion en
    dispositivos xs para quedar por encima del texto.
    */
    .secciones-fila-hor-foto-der-flex-cont {
        flex-direction: column-reverse;
        /* Compatibilidad con otros navegadores */    
        -webkit-flex-direction: column-reverse; /* Safari 6.1+ */    
    }


    /*
    25102018 AF
    Espacios al lado de los textos de las secciones en formato columnas, para que los textos no queden pegados a los lados.
    */
    .secciones-fila-hor-cols{
        padding-left: 0px; 
        padding-right: 0px;
        /*
        01112018 AF
        En dispositivos superiores a xs no se forza el centrado. Se permite la seleccion con el CKEditor
        */
        text-align: initial;
    }  
    
    
    /*
    01112018 AF
    Importante!
    Se usa "!important" para sobreescribir el estilo asignado en el mismo codigo done esta el elemento html.
    */
    /*
    div.secciones-fila-hor-cols > p{
        text-align: right !important;
        color: blue;
    } 
    */
    
    /* 
    25102018 AF 
    Alto de las fotos en las secciones foto a la izquierda small.
    */
    .secciones-fila-hor-small-foto{
        height: 160px;
    }
    
    
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px /*@screen-md-min*/) {

    
    /*
    18032019 AF
    Ajusta el formulario para crear secciones.
    */
    .secciones-popup-editar .modal-content{
        width: 800px;
    }       
    
    /*
    En dispositivos  SM y superiores las filas se muestran la foto a un lado y el texto al otro
    */
    .secciones-fila-hor-foto-izq-flex-cont, .secciones-fila-hor-foto-der-flex-cont{
        display: flex;
        flex-direction: row;
        align-items: center;
        /* Compatibilidad con otros navegadores */    
        display: -webkit-flex; /* Safari */  
        -webkit-flex-direction: row;
        -webkit-align-items: center; /* Safari 7.0+ */
        /*
        flex-direction: column;
        flex-wrap: nowrap;
        */  

    }    
     
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px /*@screen-lg-min*/) {
    
    /*
    25102018 AF
    */
    .secciones-contenido{
        padding-top: 15px; 
        padding-bottom: 15px;
    }
    
    /*
    16112018 AF
    Padding para dar espacio entre los titulos y la seccion anterior
    */
    .secciones-contenido div.title-padding-top{
        padding-top: 35px;
    }

    /*
    25102018 AF
    Espacios al lado de los textos de las secciones en formato horizontal, para que los textos no queden pegados a los lados.
    */
    .secciones-fila-hor-cols{
        padding-left: 80px; 
        padding-right: 80px;
        /*
        01112018 AF
        En dispositivos superiores a xs no se forza el centrado. Se permite la seleccion con el CKEditor        
        */
        text-align: initial;
    }      
    
    /* 
    25102018 AF 
    Alto de las fotos en las secciones foto a la izquierda small.
    */
    .secciones-fila-hor-small-foto{
        height: 200px;
    }
    
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1600px /*@screen-lg-min*/) {
}





 













  

/*
02102018 AF
Se reduce el espacio de la linea debajo de los titulos.
*/
.page-header{
    padding-top: 0px;
    padding-bottom: 0px;
}

/*
14102018 AF
*/
.links-configurar-web a {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    color: #000000;
    font-weight: normal;
}
    










/*    
.col-botones-formato{
    display: none;
}

.fila-seccion-pagina-inicio{
    background-color: #ffffff;
}

.fila-seccion-pagina-inicio:HOVER{
    background-color: #EEEEEE;
}

.fila-seccion-pagina-inicio:HOVER .col-botones-formato{
    display: block;
}
*/

.img-boton-formato{
    border: 10px solid #eeeeee;
    /* 
    15112018 AF 
    */
    padding: 10px;
    width: 100%;
    transition: 1s;
}    

.img-boton-formato:HOVER{
    border: 10px solid #ffcc00;
}

.modal-content, div.modal-header > h4, div.modal-footer > button{
    color:#333333;
    font-family: Verdadana, sans-serif;
    font-size: 18px;
    font-weight: normal;
}