/* 11122017 AF
.bodyWebsiteContent .btn-lg{
    padding: 5px 10px 5px 10px;
    font-size: 18px;
    color: #FFFFFF;
}

p[class=productPrice]{
    font-size: 18px;
    color: #333333;
}

*/



/* 
19082026 AF
Corrección de compatibilidad CakePHP 4 con Bootstrap 3  para los mensajes flash. 
Se fuerza a que los mensajes flash se muestren siempre visibles y con opacidad 1.
*/
.alert.fade.show {
    opacity: 1 !important;
    display: block !important;
}


/* 22112017 AF: Ancho de los labels */
.control-label{
    width: 350px;
}



/* 29122017 AF*/
.loaderImgGallery{
    visibility: visible;    
}

/* 29122017 AF */
.imgGallery{
    visibility: hidden;
}



/* 26012018 AF */
.thumbnail{
    border: none;
    /* 
    05032018 AF 
    Es necesario poner la clase thumbnail en transparente porque sino deja como fondo el blanco y la personalización de los colores no funciona cuando se selecciona
    fondo transparente en los recuadros de productos y categorias.
    */    
    background-color: transparent;
}



/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */  
/* xxxxx SILDE QUIENES SOMOS xxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* 20112016 AF */
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
}



#bodyWebsite div.panel-body{
}

#bodyWebsite div.panel-heading{
    background-color: #C2EF06;
}

/*
#bodyWebsite div.panel-body > a{
    background-color: #FF19BD;
    border: 1px solid #666666;
    transition: 1s;
}

#bodyWebsite div.panel-body > a:hover{
    background-color: #FF33C7;
}
*/




/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxx P L A N T I L L A xxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* ----- HEADER ----- */

.topSiteAyS{
/*width:100%; height:500px; background-image:url("../files/SettingsHeader/photo/Top1AyS v2.png");*/

}


.contenidoSiteAyS{
    /*background-image:url('../img/templates/FondoInfContenido v2.png'); */
    /*background-position: center bottom; */
    /*
    background-repeat: repeat no-repeat;
    background-position-x: right; 
    background-position-y: center; 
    */
}



/* 
05032018 AF 
Es necesario poner las clases panel y panel-default en transparente porque sino deja como fondo el blanco y la personalización de los colores no funciona cuando se selecciona
fondo transparente en los recuadros de columnas de la pagina de inicio.
*/  
.panel, .panel-default{
    background-color: transparent;
    border-color: transparent; 
} 


/* 
05032018 AF 
Se suprimen tantas lineas en la pagina de inicio
*/
.aboutus-page hr{
    border: none;
}


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






/* ----- BARRA DE NAVEGACION ----- */


/* Estilos barra principal */
.navbar-personalizado{
    background-size: contain;
    background-position: center center;
    background-repeat: repeat;
}

/* Aplica los estilos solo a los directos ul li a, a los li de los submenus no los afecta */
#bs-example-navbar-collapse-1>ul>li>a{
    transition-duration: 1s;
}

#bs-example-navbar-collapse-1>ul>li>a:hover{
}

/* 01122016 AF: Margin left para alinear el menu con el contenido del body */
#bs-example-navbar-collapse-1 .navbar-nav{
    margin-left: -15px;
}


/* Menu dropdown seleccionado */
#bs-example-navbar-collapse-1 > ul > li.dropdown.open > a{
}

/* Fondo completo listado submenus */
.dropdown-menu{
}



/* Submenu letra estado normal */
#bs-example-navbar-collapse-1 > ul > li.dropdown.open > ul > li > a{
}


/* Submenu fondo y letra estado hover */
#bs-example-navbar-collapse-1 > ul > li.dropdown.open > ul > li > a:hover{
}


/* Estilo para quitar los espacios entre la barra de mensajes y el top o encabezado del template */
.navbar{
    border-radius: 0;
    margin-bottom: 0;
}


/* 01122016 AF: Submenus segundo nivel */

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.float-start {
    float: none;
}

.dropdown-submenu.float-start>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}



/*#bs-example-navbar-collapse-1 > ul:nth-child(1)*/



/* 29122017 AF*/
.btnBack{
    width: 30px; 
    cursor: pointer;
}

/* ----- FOOTER ----- */

/* Fondo del footer */
.footerSiteAyS{
}


/* Iconos redes sociales estado inicial */
.footer-distributed .footer-icons a {
    transition-duration: 1s;
}

/* Iconos redes sociales estado hover */
.footer-distributed .footer-icons a:hover {
}


/* Iconos datos de contacto */
.footer-distributed .footer-center i {
    transition-duration: 1s;
}

/* Titulo Sobre nosotros lado derecho */
.footer-distributed .footer-company-about span {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Contenido Sobre nosotros lado derecho */
.footer-distributed .footer-company-about {
    font-size: 14px;
    font-weight: normal;
}

/* Email seccion central */
#bodyWebsite > footer > div.footer-center > div:nth-child(3) > p > a{
}


/* Menus lado izquierdo estado inicial */
#bodyWebsite > footer > div.footer-left > p.footer-links a{
    transition-duration: 1s;
}

/* Menus lado izquierdo estado hover */
#bodyWebsite > footer > div.footer-left > p.footer-links a:hover{
}

/*
09062019 AF
.cierre-pagina-maqquer
*/
.cierre-pagina-maqquer{
    background-color: #111111; /*#422100;*/
    height: 40px; 
    padding-top: 10px; 
    text-align: center; 
    color: #AAAAAA; /*#8C4600;*/
}









.leftColumn {
    float: left;
    width: 50%;
}
.rightColumn {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
.leftColumn img {
    max-width: 90%;
    height: auto;
}



/* 22112017 AF */
/* Manejo de la seleccion de los colores en los controles input */
.sp-replacer {
    width: 100px;
    /*margin-left: 0px;*/
}
/* 22112017 AF */
.sp-preview, .sp-alpha, .sp-thumb-el {
    width: 75px;    
}




/* 01122017 AF */
.flex-container {
  display: flex;
  align-items: center;
  /*
  flex-direction: column;
  flex-wrap: nowrap;
  */
}



/* 18122017 AF */
.flex-container-body {
  display: flex;
  align-items: center;
  justify-content: center;
  /*
  flex-direction: column;
  flex-wrap: nowrap;
  */
}



/* 08022018 AF */
.flex-container-product-view {
  display: flex;
  align-items: flex-start;
  /*
  flex-direction: column;
  flex-wrap: nowrap;
  */
}





/* 06122017 AF */
.labels-view-forms-font{
    font-weight: bold;
    text-align: right;
}

/* 06122017 AF */
.view-forms-control{
    padding-top: 5px;
    padding-bottom: 5px;    
    /* 19122017 AF */
    padding-left: 0px;
    padding-right: 0px;    
}


/* 06122017 AF */
.p-0{
    padding: 0px;
}


/* 08122017 AF */
.thumb-image-upload-foto{
	/*
        09072019 AF
        Se cambio el ancho porque la previsualizacion de la foto quedaba muy ancho. Se fijo un alto maximo.
        */
        /*width:320px;*/
        max-height: 200px;
}


/* 11122017 AF */
.padding-precio{
    padding-left: 20px;
}


/* 25012018 AF */
.links-preview-edit-site{
    background-color: yellow; 
    padding: 5px; 
    color: #444444; 
    font-size: 16px;
    /* 
    01092026 AF 
    z-index:9999999;
    */
}

/*
28082026 AF
Ajuste para forzar que los links para editar el sitio se vean centrados y con el icono alineado verticalmente con el texto.
*/
.links-preview-edit-site {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle;
}

/*
28082026 AF
Ajuste para forzar que los links para editar el sitio se vean centrados y con el icono alineado verticalmente con el texto.
*/

.links-preview-edit-site i {
    line-height: 1;
    display: inline-flex;
    vertical-align: middle;
}



/* 13102018 AF */
#bodyWebsite > div.bodyWebsiteContent.contenidoSiteAyS.p-0 > div > a{
    font-family: Arial, Helvetica, sans-serif;  
    color: #444444; 
    font-size: 16px;
}



.padding-vermas-aboutus{
    padding-top: 20px;
    padding-bottom: 20px;
}
 
    
    




/*
17032018 AF
xxxxxxxxxxxxxxxxxxxxx
xxxxx SCROLL UP xxxxx
xxxxxxxxxxxxxxxxxxxxx
*/
/* Pill style */
#scrollUp {
    bottom: 20px;
    right: 20px;
    background-color: #555;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    opacity: .9;
    padding: 10px 20px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-transition: background 200ms linear;
    -moz-transition: background 200ms linear;
    -o-transition: background 200ms linear;
    transition: background 200ms linear;
    -webkit-backface-visibility: hidden;
}
#scrollUp:hover {
    background-color: #000;
}  


    

/* 
20032018 AF 
Clase para manejar ancho de pantalla completo con container al 100% y dentro otro container
al ancho del contenido.
*/
.container2{
    width: 100%;   
}   


/*
16112022 AF
*/
.container-datahomepage{
    width: 100%;   
} 

/* 22032018 AF */
.centrar-div{
    margin-left: auto;
    margin-right: auto;
}




/*
24102018 AF
Centrado de las columnas en las secciones foto a la izquierda small en dispositivos moviles.
*/
.flex-container-seccion-small{
    display: flex;
    align-items: center;
}   
    

/*
Menu site
*/
#navbarBig{
    /*
    12112022 AF
    Es menor al z-index del menu del panel de administracion que usa .stellarnav y mayor que el del logo.
    */
    /*z-index: 99999998;*/
}



/*
23112022 AF
Estilo para el padding en las secciones de tres columnas que se dejaron a lo ancho de pantalla
*/
.padding-tres-col{
    padding-left: 15px; 
    padding-right: 15px;
} 


/*
24102018 AF
*/
@media screen and (max-width: 750px) {
    
   
    
    /*
    24102018 AF
    Centrado de las columnas en las secciones foto a la izquierda small en dispositivos moviles.
    */
    .flex-container-seccion-small{
        display: flex;
        align-items: flex-start;
    }  
    
}    
    
@media screen and (max-width: 805px) {
    
    .leftColumn, 
    .rightColumn {
        float: none;
        width: auto;
    }
    

    /* 01122017 AF */
    .flex-container {
      flex-direction: row;
      flex-wrap: wrap;
    }
    
    /* 
    22032018 AF 
    Se suprime el padding del container, porque ahora el contenedor del contenido será la nueva clase container2.
    */
    
    /* 11122017 AF */
    .container{
        padding-left: 0px; /*10px;*/
        padding-right: 0px; /*10px;*/
    }    
    
    /* 11122017 AF */
    .padding-precio{
        padding-left: 0px;
    }
    
    /* 19122017 AF */
    .labels-view-forms-font{
        text-align: left;
    }
    
}


/* 25012018 AF */
@media screen and (min-width: 1200px) {

    /*
    25032018 AF
    Esta clase no se puede suprimir porque en las paginas internas (diferentes de la de inicio) el container que se usa es personalizado. Si se quita
    esta linea el sistema pone el container por defecto y queda muy angosta la pagina)
    */
    .container{
        padding-left: 0px;
        padding-right: 0px;
        width: 95%;
    }    

    

    /* 20032018 AF */
    .container2{
        width: 95%;   
    }       

    /*
    16112022 AF
    */
    .container-datahomepage{
        width: 95%;
    }     
    
    
      
    
    .img-full-vertical{
        /*width: 80%;*/
    }
    
    
    /* 16032018 AF */
    .margenes-seccion-columna{

    }   
    

    /*
    23112022 AF
    Estilo para el padding en las secciones de tres columnas que se dejaron a lo ancho de pantalla

    26082026 AF
    Se cambio el padding de 30px a 20px para que queden espacios adecuados y no demasiados grandes.    
    */
    .padding-tres-col{
        padding-left: 20px;
        padding-right: 20px;
    }    

}



/* 25012018 AF */
@media screen and (min-width: 1600px) {

    /*
    25032018 AF
    Esta clase no se puede suprimir porque en las paginas internas (diferentes de la de inicio) el container que se usa es personalizado. Si se quita
    esta linea el sistema pone el container por defecto y queda muy angosta la pagina)
    */
    .container{
        padding-left: 0px;
        padding-right: 0px;
        width: 70%;
    }
    

    /*
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxx CLASE PARA EL CONTENIDO INTERNO DE LAS PAGINAS xxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    Nota:
    Esta clase afecta el ancho en que se ven todos los contenidos incluyendo el menu y las secciones.


    // 03112022 AF
    // Se aumenta de 70% a 85% en lg devices.
    */

    .container2{
        width: 85%;   
    }    


    /*
    16112022 AF
    */
    .container-datahomepage{
        width: 70%;
    }     
    
    
    /* 15032018 AF */
    .padding-fila-horizontal-aboutus{
        padding-left: 40px; 
        padding-right: 40px;
        text-align: center;        
    }        
    
    .img-full-vertical{
        /*width: 80%;*/
    }

    /*
    23112022 AF
    Estilo para el padding en las secciones de tres columnas que se dejaron a lo ancho de pantalla

    26082026 AF
    Se cambio el padding de 80px a 40px para que queden espacios adecuados y no demasiados grandes.
    */
    .padding-tres-col{
        padding-left: 40px; 
        padding-right: 40px;
    }

}










  








/* xxxxxxxxxxxxxxxxxxxxx */
/* xxxxx NO USADOS xxxxx */
/* xxxxxxxxxxxxxxxxxxxxx */


/* Barra horizontal en la parte inferior de la pantalla */
.footerbar_ds{
    position:fixed;
    bottom:0;
    height:auto;
    margin-top:40px;
    width:100%;
    text-align:center; 
    height: 40px; 
    background-color: #c4e3f3; 
    vertical-align: middle;    
}


/* 07112016 AF */
/* Barra horizontal en la parte inferior de la pantalla */
.footerbar_website{
    position:fixed;
    bottom:0;
    height:auto;
    margin-top:160px;
    width:100%;
    text-align:center; 
    height: 160px; 
    background-color: #c4e3f3; 
    vertical-align: middle;   
    text-align: center;
}



/* 01122017 AF */
.vertical-centered-text {
  -ms-display: flex;
  display: flex;
  /* alineacion vertical */
  align-items: center;
   /* alineacion horizontal */
  /*justify-content: center;*/
}