/* ==========================================================================
Hugo Müller HOME styles
für Teaser Animation
============================================================================= */

/* Clearfix */
*,
*::before,
*::after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/* Section */
.section { }
.section__content { }


/* Card  */
.card {
    position: relative;
}

.card__front,
.card__back {
    position: absolute;

    top: 0;
    left: 0;

    height: 100%;
    margin-left: 7px;
    margin-right: 7px;
}

.card__front,
.card__back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.card__front {
}

.card__back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card__back h1, .card__back h2 {
    padding-top: 20px !important;
}

.card__back img {
    opacity: 0;
}

.card__back ul {
    position: absolute;
    top: 63px;
    width: calc(100% - 20px);
}

.card__back li::before {
    color: #FFF;
}

.card__back .cat-item > li {
    border-top: 1px solid rgba(255, 255, 255, .5);
}

.card__back .cat-item > li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.card_back .cat-item > li::before { top: -1px; }
.card__back a { color: #fff; }
.card__back a:hover, .card__back a:focus { color: #333333; }

.card.effect__hover:hover .card__front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card__produktneuheiten {
    text-align: center;
}

/* ============================================
Effects
===============================================*/

/* Effect 1: Transition on Hover */
.card.effect__hover:hover .card__back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

/* Effect 2: Transition on Click */
.card.effect__click.flipped .card__front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

/* Effect 3: Randomly Inducing The Transition */
.card.effect__random.flipped .card__front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card.effect__random.flipped .card__back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}


/* ============================================
Responsive
===============================================*/
.card { padding-bottom: 100%; }

@media (min-width: 385px) {
    .card { padding-bottom: 50%; }
    .card__back .cat-item > li { font-size: 15px; }
    .card__back ul {
        padding-left: 10px;
        width: calc(100% - 10px);
        top: 50px;
    }
    .card__back h1, .card__back h2 { padding-top: 15px !important; }
}
@media (min-width: 768px) {
    .card { padding-bottom: 35%; }
    .card__back .cat-item > li { font-size: 16px; }
}
@media (min-width: 992px) {
    .card { padding-bottom: 26.00%; }
}
@media (min-width: 1200px) {
    .card { padding-bottom: 25.50%; }
    .card__back .cat-item > li { font-size: 17px; }
    .card__back ul {
        padding-left: 20px;
        width: calc(100% - 20px);
        top: 63px;
    }
    .card__back h1, .card__back h2 { padding-top: 15px !important; }
}

/* ============================================
IE Fix
===============================================*/
.home-teaser .item img { width: 100%; }
.home-productnews-image img { width: 100%; }