/* Carousel */

.carousel {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 2em 0 2em 0;
    margin-bottom: 0;
    font-size: 1.2em;
}
.carousel.subfam {
    padding:0 0 1em 0;
    text-align: left;
}

    .carousel .forward, .carousel .backward {
        position: absolute;
        top: 13em;
        width: 6em;
        height: 6em;
        cursor: pointer;
        z-index: 20;
    }

        .carousel .forward:before, .carousel .backward:before {
            content: '';
            display: block;
            width: 6em;
            height: 6em;
            border-radius: 100%;
            background-color: rgba(70, 70, 70, 0.2);
            position: absolute;
            top: 50%;
            margin-top: -3em;
            -moz-transition: background-color 0.35s ease-in-out;
            -webkit-transition: background-color 0.35s ease-in-out;
            -o-transition: background-color 0.35s ease-in-out;
            -ms-transition: background-color 0.35s ease-in-out;
            transition: background-color 0.35s ease-in-out;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .carousel .forward:after, .carousel .backward:after {
            content: '';
            width: 3em;
            height: 3em;
            position: absolute;
            top: 50%;
            margin: -1.5em 0 0 0;
            background: url("images/arrow.svg") no-repeat center center;
        }

        .carousel .forward:hover:before, .carousel .backward:hover:before {
            background-color: rgba(145, 134, 133, 0.75);
        }

    .carousel .forward {
        right: 0;
    }

        .carousel .forward:before {
            right: -3em;
        }

        .carousel .forward:after {
            right: -0.25em;
        }

    .carousel .backward {
        left: 0;
    }

        .carousel .backward:before {
            left: -3em;
        }

        .carousel .backward:after {
            left: -0.25em;
            -moz-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            transform: scaleX(-1);
        }

    .carousel .reel {
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 0 2em 0 2em;
    }

    .carousel article.producto {
        height: 470px;
        font-size:.8em;
    }

    .carousel article.producto .image{
        margin-bottom: 0.5em;
    }
    
    .carousel article.subfamilia {
        width:4em;
        padding:1em;
        height: 470px;
        position:absolute;
        left:0;
        top:0;
        z-index: 10;
    }

    .carousel article.subfamilia header{			
        writing-mode:vertical-lr;
        font-size: .9em;
        transform: rotate(180deg)
    }

    .carousel article {
        display: inline-block;
        vertical-align: top;
        width: 18em;
        height: 30em;
        background: #fff;
        text-align: center;
        padding: 0 1em 3em 1em;
        margin: 0 2em 0 0;
        white-space: normal;
        opacity: 1.0;
        -moz-transition: opacity 0.75s ease-in-out;
        -webkit-transition: opacity 0.75s ease-in-out;
        -ms-transition: opacity 0.75s ease-in-out;
        transition: opacity 0.75s ease-in-out;
    }

        .carousel article.loading {
            opacity: 0;
        }

        .carousel article.fam .image, .carousel article.producto .image, .carousel article.subfamilia .image {
            position: relative;
            left: -1em;
            top: 0;
            width: auto;
            margin-right: -2em;
            margin-bottom: 3em;
        }

        .carousel article p {
            text-align: center;
            line-height: 1.5em;
        }
    div.headerclass.secondPage {
        padding: 4em 0 0 0;
    }


	.fam,.producto {
		cursor: pointer;
	}

    .fam.active,.producto.active {
        background-color: #f8f2eb;
    }

    .carousel article.infoproducto {
        width: 100%;
        padding:0 0 2em 0;
        height: auto;
        text-align: center;
    }
    div.infoproducto {
        text-align: left;
        background-color: #f8f2eb;
        padding: 2em 4em 2em 4em;
        font-size: 1.1em;
    }

    .divfotorama {
        text-align: center;
    }
    .fotorama {
        width: 80%;
        background-color: unset;
    }
    div.infoproducto table tbody tr:nth-child(2n + 1) {
        background-color: white;
    }
    div.infoproducto p {
        margin: 0;
        text-align: left;
    }
    div.infoproducto table {
        margin: 0;
    }

   
    
@media screen and (max-width: 736px) {
	.infoproducto header {
		background: #fafafa;
		padding: 1em;
	}
	div.infoproducto {
		padding: 1em;
	}
}