.productos-content{
	margin-top: 0px;
	width: 100%;
    background-color:  #fcf7f0;
	text-align: center;
    border:solid 0px;
    color: blue;
    height: 300px;
}
.c1{
    background-color:  #fcf7f0;
    height: 485px;
}

.main div h4{    
	margin-top: 50px;
	font-size:60px;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
}
.fila2 div h1{
    margin-top: 10px;
    color: #be2e21;
    font-size: 36px;
}
.fila3 div{
    margin-top: 45px;
    display: inline-flex;justify-content: center;

}

.texto-navegador{
    margin-bottom: 15px;
    text-transform: uppercase;
}
.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e113";    
    /*float: right;        */
    color: #000000;         
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\e114";
}
.panel h4{
    text-transform: uppercase;
    color: #000000;
}
.accordion-toggle:link{
    text-decoration: none;
}
.panel-body ul li{
    color: red;
    text-transform: uppercase;
}

/*panel PRODUCTOS*/
.productos{
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #f7f2eb;

}
.contenido-detalle{
    background-color: olive;
}
/*contenido detalles */
#contenido-detalle-postre1,
#contenido-detalle-postre2,
#contenido-detalle-postre3,
#contenido-detalle-pastel1,
#contenido-detalle-pastel2,
#contenido-detalle-pastel3,
#contenido-detalle-esencias1,
#contenido-detalle-esencias2,
#contenido-detalle-esencias3,
#contenido-detalle-insumos1,
#contenido-detalle-insumos2,
#contenido-detalle-insumos3{
    height: 100%;
    display: none;
}
/*fin de detalle productos*/

.prueba{
    height: 100%;
    border: solid 7px #C0C0C0;
    padding: 0;
}
#subcategoria-navegador{
    color: red;
}

/*estilos scrollbar*/
.productos::-webkit-scrollbar
{
    width: 10px;
}

.productos::-webkit-scrollbar-thumb
{
    background-color: #C0C0C0;
}

/*clases de imagenes*/

/*postres*/
.postre1{
    background-image: url(../../../images/productos/gelatina.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.postre2{
    background-image: url(../../../images/productos/mazamorra.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.postre3{
    background-image: url(../../../images/productos/flan.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.postre4{
    background-image: url(../../../images/productos/colapiz.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* pastelería*/
.pastel1{
    /*background-image: url(../../../images/productos/pastel1.jpg);*/
    background-image: url(../../../images/productos/azucar-finita.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.pastel2{
    /*background-image: url(../../../images/productos/pastel2.jpg);*/
    background-image: url(../../../images/productos/glucosa-dulcinita.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.pastel3{
    /*background-image: url(../../../images/productos/pastel3.jpg);*/
    background-image: url(../../../images/productos/masa-elastica.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.pastel4{
    /*background-image: url(../../../images/productos/pastel3.jpg);*/
    background-image: url(../../../images/productos/gluten-trigo.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* esencias*/
.esencias1{
    /*background-image: url(../../../images/productos/harinas1.jpg);*/
    background-image: url(../../../images/productos/esencia-vainilla.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.esencias2{
    /*background-image: url(../../../images/productos/harinas2.jpg);*/
    background-image: url(../../../images/productos/esencia-tuttifrutti.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.esencias3{
    /*background-image: url(../../../images/productos/harinas3.jpg);*/
    background-image: url(../../../images/productos/esencia-chirimoya.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.esencias4{
    /*background-image: url(../../../images/productos/harinas3.jpg);*/
    background-image: url(../../../images/productos/esencia-reposteria.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* insumos quimicos*/
.insumos1{
    /*background-image: url(../../../images/productos/insumos1.jpg);*/
    background-image: url(../../../images/productos/bicarbonato-sodio.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.insumos2{
    /*background-image: url(../../../images/productos/insumos2.jpg);*/
    background-image: url(../../../images/productos/benzoato-sodio.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.insumos3{
    /*background-image: url(../../../images/productos/insumos3.jpg);*/
    background-image: url(../../../images/productos/caramelina.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.insumos4{
    /*background-image: url(../../../images/productos/insumos4.jpg);*/
    background-image: url(../../../images/productos/gluten-trigo.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* ------------------------------------------- */

.contenido-detalle-productos{
    width: 100%; 
    height: 100%; 
    background-color: white;
}
.imagen-detalle{
    background-repeat: no-repeat;
    background-size: contain;  
}
.imagen-detalle img{
    border: solid 7px #ffffff;
}

.titulo-texto-detalle{
    color: #FF0000;
    display: flex;
    justify-content: space-around;
}

.titulo-texto-detalle span:hover{
    color: red;
    cursor: pointer;
    text-decoration: underline;
}
.contenido-texto-detalle{
    background-color: white smoke; 
    height: 90%; 
    margin-left: 10px;
    margin-top: 10px;
    border: solid 1px white;
}
/*.................................*/
.modo-preparacion-postre1 .modo-preparacion-postre2 .modo-preparacion-postre3
.modo-preparacion-pastel1 .modo-preparacion-pastel2 .modo-preparacion-pastel3
.modo-preparacion-esencias1 .modo-preparacion-esencias2 .modo-preparacion-esencias3
.modo-preparacion-insumos1 .modo-preparacion-insumos2 .modo-preparacion-insumos3
.consejo-postre1 .consejo-postre2 .consejo-postre3
.consejo-pastel1 .consejo-pastel2 .consejo-pastel3
.consejo-harinas1 .consejo-harinas2 .consejo-harinas3
.consejo-insumos1 .consejo-insumos2 .consejo-insumos3
{
    display: none;
}
/*.................................*/
.panel-group{
    background-color: #f6eee4; 
    height: 300px; 
    padding-top: 15px;
    border-top: solid 4px #e0d9cf;
    border-right: solid #dddddd 1px;
    border-left: solid #dddddd 1px;
    border-bottom: solid #dddddd 1px;
}
.panel{
    border: none  !important;
}
.panel-heading{
    background-color: #f6eee4;
    

}
.panel-body{
    background-color: #f6eee4;
}

/*ESTILO IMAGEN*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
/* ============================== STYLE FOR IMAGE - TITLE - CONTENT - ICON ============================== */
.nd-wrap {
    overflow: hidden;
    text-align: center;
    /*margin: 0 auto;*/
    position: relative;
    display: inline-block;
}
.nd-wrap img {
    /*width: 450px;*/
    width: 100%;
    height: 100%;
    display: block;
    margin-left: 0px;
}
.nd-title {
    position: relative;     
    top: -150px;
    opacity: 0;
    /*margin: 0 0 30px;*/
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    -webkit-transition: all 1s ease 0.01s;
            transition: all 1s ease 0.01s;
}
.nd-title span {
    color: #fff;    
    /*padding: 0 20px 15px;*/
    border-bottom: 1px solid #ccc;
    display: inline-block;
}
.nd-icon {
    color: #000;
    display: inline-block;
    font-size: 25px;
    /*margin: 0 5px;*/
    opacity: 0;
    position: relative;
    cursor: pointer;
    -webkit-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-timing-function: cubic-bezier(1.000, -0.530, 0.405, 1.425);
            transition-timing-function: cubic-bezier(1.000, -0.530, 0.405, 1.425);
}
.nd-icon span {
    /*background: rgba(255, 255, 255, 0.7);*/
    background-color: #f0ebe5;
    border-radius: 3px;
    padding: 10px 15px;
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    color: red;
}
.nd-icon:hover span {
    /*background: #fff;*/
    background-color: #f0ebe5;
    -webkit-transform: scale(1.1,1.1);
            transform: scale(1.1,1.1);
}
.nd-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
}
.nd-content_inner {
    display: table;
    width: 100%;
    height: 100%;
}
.nd-content_inner1 {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
/* =============== HOVER AREA =============== */
.nd-wrap:hover .nd-icon,
.nd-wrap:hover .nd-content,
.nd-wrap:hover .nd-title {
    opacity: 1;
    top: 0;
}
.nd-wrap:hover .nd-title {
    -webkit-transition: all 0.5s cubic-bezier(1.000, -0.530, 0.405, 1.425) 0.01s;
            transition: all 0.5s cubic-bezier(1.000, -0.530, 0.405, 1.425) 0.01s;
}
.nd-wrap:hover .nd-content {
    /*background: rgba(0, 0, 0, 0.5);*/
    background: rgba(255, 0, 0, 0.5);
}
/* =============== SET DELAY FOR ICONS WHEN HOVER =============== */
.nd-content .nd-icon:nth-of-type(1) {   
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
}
.nd-content .nd-icon:nth-of-type(2) {
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
}
.nd-content .nd-icon:nth-of-type(3) {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
}
.nd-content .nd-icon:nth-of-type(4) {
    -webkit-transition-delay: 0.25s;
            transition-delay: 0.25s;
}
/* ============================== HOVER STYLE ============================== */

/* =============== STYLE 6 =============== */
.nd-wrap.nd-style-6:hover .nd-title {
    -webkit-transition: all 0.5s ease 0.01s;
            transition: all 0.5s ease 0.01s;
}
.nd-style-6 .nd-icon {
    -webkit-transform: scale(0,0);
            transform: scale(0,0);
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
}
.nd-wrap.nd-style-6:hover .nd-icon {
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
}

@media only screen and (max-width: 990px) {
    .c1{
        height: 750px;
    }
    .main div h4 {
       font-size: 20px;
       margin-top: 5px;
    }
    .fila2 div h1 {
       font-size: 20px;
       margin-top: -2px;
    }
}

.postre-adicional{
    margin-top: 10px;
}