/* PAGE 2 */

section.second {
    position: sticky;
    background: #DFD5CB;
    margin: 0;
    border: 0;
    display: flex;
    padding-right: 2vh;
    height: 100vh;
    scroll-snap-align: start;
}

div.flip-card {
    width: 90vh;
    margin-right: 0vh;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

div.flip-card {
    perspective: 210vh;
    flex: 1;
    margin-left: 2vh;
    border-radius: 10px;
    border: 0;
    padding: 0;
}

div.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -moz-transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 1px 1px #907E66;
    border-radius: 10px;
    cursor: pointer;
}

div.delay-1 {
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
}

div.delay-2 {
    -moz-transition-delay: 1000ms;
    -webkit-transition-delay: 1000ms;
    transition-delay: 1000ms;
}

.flip-it {
    transform: rotateY(180deg);
}

div.card-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: url(../img/2_Cartoes_Ginasio/front.jpg) no-repeat;
    background-size: cover;
    text-align: center;
    align-content: center;
    box-shadow: 1px 1px #907E66;
    border-radius: 10px;
}

div.card-out-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    align-content: center;
    box-shadow: 1px 1px #907E66;
    border-radius: 10px;
    transform: rotateY(180deg);
}

div.card-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/2_Cartoes_Consultorio/front.jpg) no-repeat;
    background-size: cover;
    text-align: center;
    align-content: center;
    box-shadow: 1px 1px #907E66;
    border-radius: 10px;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

div.card-out-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    align-content: center;
    box-shadow: 1px 1px #907E66;
    border-radius: 10px;
    transform: rotateY(180deg);
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

div.card-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/2_Cartoes_Cafe/front.jpg) no-repeat;
    background-size: cover;
    text-align: center;
    align-content: center;
    box-shadow: 1px 1px #907E66;
    border-radius: 10px;
}

div.card-out-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    align-content: center;
    box-shadow: 1px 1px #907E66;
    border-radius: 10px;
    transform: rotateY(180deg);
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

h1.card {
    font-family: ManukaMedium;
    font-weight: normal;
    font-size: 8vh;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
}

h2.card {
    font-family: ABCDiatypeCondensedBoldTrial;
    font-weight: normal;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.1;
    font-size: 3vh;
}

h3.card {
    font-family: ABCDiatypeCondensedRegularTrial;
    font-weight: normal;
    font-size: 2.5vh;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
}

div.gotinha {
    background: url(../img/RPM-AC-Icones-Gota-v03.gif);
    background-position: center;
    background-size: cover;
    height: 10vh;
    width: 10vh;
    position: absolute;
    right: 3%;
    bottom: 2%;
    opacity: 1;
}

div.gotinha-card {
    background: url(../img/RPM-AC-Icones-Gota-v03.gif);
    background-position: center;
    background-size: cover;
    height: 6vh;
    width: 6vh;
    position: relative;
    opacity: 1;
}

div.gotinha-back {
    background: url(../img/RPM-AC-Icones-Seta-5seg.gif);
    background-position: center;
    background-size: cover;
    height: 10vh;
    width: 10vh;
    position: absolute;
    right: 3%;
    top: 5%;
    opacity: 1;
}

@media screen and (min-width: 1000px) {
    div.second-desktop {
        display: contents;
    }
    div.second-mobile {
        display: none;
    }
    h2.card {
        margin-left: 70px;
        margin-right: 70px;
    }
    h3.card {
        margin-left: 70px;
        margin-right: 70px;
    }
}

@media screen and (max-width: 999px) {
    section.second {
        flex-direction: column;
        padding: 0;
    }
    div.second-desktop {
        display: none;
    }
    div.second-mobile {
        display: flex;
        flex-direction: column;
    }
    h2.card {
        margin-left: 30px;
        margin-right: 30px;
        font-size: 2.5vh;
    }
    div.mobile-card-1 {
        height: 33.3vh;
        width: 100%;
        background: url(../img/2_Cartoes_Ginasio/front.jpg) no-repeat;
        background-size: cover;
        background-position-y: center;
        align-content: center;
        text-align: center;
        cursor: pointer;
    }
    div.mobile-card-1-face {
        height: inherit;
        align-content: center;
        text-align: -webkit-center;
    }
    div.mobile-card-inside {
        margin: auto;
        width: 70vw;
        justify-self: center;
        text-align: center;
        align-content: center;
    }
    div.mobile-card-2 {
        height: 33.3vh;
        width: 100%;
        background: url(../img/2_Cartoes_Consultorio/front.jpg) no-repeat;
        background-size: cover;
        background-position-y: center;
        align-content: center;
        text-align: center;
        cursor: pointer;
    }
    div.mobile-card-2-face {
        height: inherit;
        align-content: center;
        text-align: -webkit-center;
    }
    div.mobile-card-3 {
        height: 33.4vh;
        width: 100%;
        background: url(../img/2_Cartoes_Cafe/front.jpg) no-repeat;
        background-size: cover;
        background-position-y: center;
        align-content: center;
        text-align: center;
        cursor: pointer;
    }
    div.mobile-card-3-face {
        height: inherit;
        align-content: center;
        text-align: -webkit-center;
    }
    div.increase-card {
        animation: increaseCard 1.5s normal;
        animation-fill-mode: forwards;
    }
    div.decrease-card {
        animation: decreaseCard 1.5s normal;
        animation-fill-mode: forwards;
    }
    div.reduce-card {
        animation: reduceCard 1.5s normal;
        animation-fill-mode: forwards;
    }
    div.default-card {
        animation: defaultCard 1.5s normal;
        animation-fill-mode: forwards;
    }
    @keyframes increaseCard {
        from {
            height: 33vh;
        }
        to {
            height: 100vh;
        }
    }
    @keyframes decreaseCard {
        from {
            height: 100vh;
        }
        to {
            height: 34vh;
        }
    }
    @keyframes reduceCard {
        from {
            height: 33vh;
        }
        to {
            height: 0vh;
        }
    }
    @keyframes defaultCard {
        from {
            height: 0vh;
        }
        to {
            height: 33.3vh;
        }
    }
    hr.mobile-card-1-line-1 {
        left: 25%;
        top: 32%;
        position: relative;
        width: 50%;
        height: 1px;
        border: 0;
        border-top: 1px solid rgb(255, 255, 255, 0.5);
        margin: 1em 0;
        padding: 0;
    }
    hr.mobile-card-1-line-2 {
        left: 25%;
        top: 62%;
        position: relative;
        width: 50%;
        height: 1px;
        border: 0;
        border-top: 1px solid rgb(255, 255, 255, 0.5);
        margin: 1em 0;
        padding: 0;
    }
    h1.card {
        font-size: 6vh;
        margin-top: 5.5vh;
    }
    h3.card {
        font-size: 1.8vh;
        margin-left: 15vw;
        margin-right: 15vw;
    }
}