/* THEMES */

/********** Theme: dark **********/
/* Font styles */
.flipdown.flipdown__theme-dark {
    font-family: sans-serif;
    font-weight: bold;
}
    /* Rotor group headings */
    .flipdown.flipdown__theme-dark .rotor-group-heading:before {
        color: #000000;
    }
    /* Delimeters (puntos)*/
    .flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,
    .flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after {
        background-color: #C39F16;
    }
    /* Rotor tops */
    .flipdown.flipdown__theme-dark .rotor,
    .flipdown.flipdown__theme-dark .rotor-top,
    .flipdown.flipdown__theme-dark .rotor-leaf-front {
        color: #FFFFFF;
        background-color: #C39F16;
    }
    /* Rotor bottoms */
    .flipdown.flipdown__theme-dark .rotor-bottom,
    .flipdown.flipdown__theme-dark .rotor-leaf-rear {
        color: #EFEFEF;
        background-color: #9A7A12;
    }
    /* Hinge (Linea)*/
    .flipdown.flipdown__theme-dark .rotor:after {
        border-top: solid 1px #C39F16;
    }


/* END OF THEMES */

.flipdown {
    overflow: visible;
    width: 600px;
    height: 110px;
}

    .flipdown .rotor-group {
        position: relative;
        float: left;
        padding-right: 30px;
    }

        .flipdown .rotor-group:last-child {
            padding-right: 0;
        }

    .flipdown .rotor-group-heading:before {
        display: block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: larger;
    }

    .flipdown .rotor-group:nth-child(1) .rotor-group-heading:before {
        content: attr(data-before);
    }

    .flipdown .rotor-group:nth-child(2) .rotor-group-heading:before {
        content: attr(data-before);
    }

    .flipdown .rotor-group:nth-child(3) .rotor-group-heading:before {
        content: attr(data-before);
    }

    .flipdown .rotor-group:nth-child(4) .rotor-group-heading:before {
        content: attr(data-before);
    }

    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
        content: '';
        position: absolute;
        bottom: 20px;
        left: 115px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
        content: '';
        position: absolute;
        bottom: 50px;
        left: 115px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .flipdown .rotor {
        position: relative;
        float: left;
        width: 50px;
        height: 80px;
        margin: 0px 5px 0px 0px;
        border-radius: 4px;
        font-size: 4rem;
        text-align: center;
        perspective: 200px;
    }

        .flipdown .rotor:last-child {
            margin-right: 0;
        }

    .flipdown .rotor-top,
    .flipdown .rotor-bottom {
        overflow: hidden;
        position: absolute;
        width: 50px;
        height: 40px;
    }

    .flipdown .rotor-leaf {
        z-index: 1;
        position: absolute;
        width: 50px;
        height: 80px;
        transform-style: preserve-3d;
        transition: transform 0s;
    }

        .flipdown .rotor-leaf.flipped {
            transform: rotateX(-180deg);
            transition: all 0.5s ease-in-out;
        }

    .flipdown .rotor-leaf-front,
    .flipdown .rotor-leaf-rear {
        overflow: hidden;
        position: absolute;
        width: 50px;
        height: 40px;
        margin: 0;
        transform: rotateX(0deg);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .flipdown .rotor-leaf-front {
        line-height: 80px;
        border-radius: 4px 4px 0px 0px;
    }

    .flipdown .rotor-leaf-rear {
        line-height: 0px;
        border-radius: 0px 0px 4px 4px;
        transform: rotateX(-180deg);
    }

    .flipdown .rotor-top {
        line-height: 80px;
        border-radius: 4px 4px 0px 0px;
    }

    .flipdown .rotor-bottom {
        bottom: 0;
        line-height: 0px;
        border-radius: 0px 0px 4px 4px;
    }

    .flipdown .rotor:after {
        content: '';
        z-index: 2;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 50px;
        height: 40px;
        border-radius: 0px 0px 4px 4px;
    }

.banner_temporizador {
    background-image: url("../../Portal/imagenes/TMP/Banners/CronometroIETAM.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    height: 300px;
    width: 100%;
}

.enlaceTemporizador {
    width: 100%;
}

.temporizador_styles {
    /*transform: scale(0.80) translate(75%, 25%);*/
    transform: scale(1.1) translate(76%, 25%);
    position: absolute;
    top: 0em;
    left: 0em;
    margin-top: 20px;
}

.responsive {
    height: 250px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.sizeClock {
    transform: scale(0.7) translate(25%); /* Igual que: scaleX(0.7) scaleY(0.7) */
}

.h3_temporizador {
    font-weight: bolder;
}

.banner_cronometro {
    display: block;
}

.imgcronometro {
    background-image: url("../images/Cronometro1.png");
        display:block;
        background-size:100%;
        height:100%;
}
/*
.banner_cronometro_movil2 {
    background-image: none;
}*/

.logos_cronometro {
    display: none;
}

.texto_movil {
    padding-bottom: 25px;
}




@media (max-width: 990px) {
    .temporizador_styles {
        transform: translate(0,0);
        position: static;
        top: 0em;
        left: 0em;
    }
}

@media (max-width: 1185px) {
    .temporizador_styles {
        /*transform: scale(0.75) translate(80%, 25%);*/
        transform: scale(1) translate(80%, 25%);
        position: absolute;
        top: 0em;
        left: 0em;
        margin-top: 20px;
    }
}

@media (max-width: 1160px) {
    .temporizador_styles {
        transform: scale(0.95) translate(80%, 25%);
        position: absolute;
        top: 0em;
        left: 0em;
    }
}

@media (max-width: 1135px) {
    .temporizador_styles {
        transform: scale(0.95) translate(80%, 25%);
        position: absolute;
        top: 0em;
        left: 0em;
    }
}

@media (max-width: 1090px) {
    .temporizador_styles {
        transform: scale(0.95) translate(70%, 25%);
        position: absolute;
        top: 0em;
        left: 0em;
    }
}


@media (max-width: 1075px) {
    .temporizador_styles {
        transform: scale(0.90) translate(70%, 25%);
        position: absolute;
        top: 0em;
        left: 0em;
    }
}



/*MOVIL*/
@media (max-width: 990px) {
    .banner_cronometro {
        display: none;
    }

    .logos_cronometro {
        display: block;
    }
}

@media (max-width: 990px) {
    /*.imgcronometro {
        background-image: url("../images/Cronometro1_movil.png");
        display:block;
        background-size:100%;
        height:100%;
    }*/
    /*
    .banner_cronometro_movil2 {
        background-image: url("../images/Cronometro3_movil.png");
        background-repeat: round;
    }

    .texto_movil {
        padding-top: 5px;
    }*/
}


@media (max-width: 990px) {


    .temporizador_styles {
        transform: scale(0.75) translate(42%, 33%);
        position: absolute;
        top: 0em;
        left: 0em;
        padding-left: 10%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 0px;
        /*transform: scale(0.8);
        position: inherit;
        top: 0em;
        left: 0em;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;*/
    }

    .box_temporizador {
        height: 120px;
    }

    .eleccion {
        font-size: 1.0em;
    }
}

@media (max-width: 768px) {

    .temporizador_styles {
        transform: scale(0.65) translate(33%, 18%);
        position: absolute;
        top: 0em;
        left: 0em;
        padding-left: 10%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /*transform: scale(0.8);
        position: inherit;
        top: 0em;
        left: 0em;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;*/
    }
}


@media (max-width: 660px) {

    .temporizador_styles {
        transform: scale(0.50) translate(12%, .5%);
        position: absolute;
        top: 0em;
        left: 0em;
        padding-left: 10%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /*transform: scale(0.8);
        position: inherit;
        top: 0em;
        left: 0em;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;*/
    }
}


@media (max-width: 550px) {

    .temporizador_styles {
        transform: scale(0.40) translate(1%, -25%);
        position: absolute;
        top: 0em;
        left: 0em;
        padding-left: 10%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /*transform: scale(0.65);
        position: inherit;
        padding-left: 10%;
        top: 0em;
        left: 0em;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;*/
    }

    .eleccion {
        font-size: .75em;
    }
}

@media (max-width: 430px) {

    .temporizador_styles {
        transform: scale(0.30) translate(-36%, -60%);
        position: absolute;
        top: 0em;
        left: 0em;
        padding-left: 10%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /*transform: scale(0.55);
        position: inherit;
        padding-left: 10%;
        top: 0em;
        left: 0em;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;*/
    }
}


@media (max-width: 375px) {

    .temporizador_styles {
        transform: scale(0.30) translate(-48%, -77%);
        position: absolute;
        top: 0em;
        left: 0em;
        padding-left: 10%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /*transform: scale(0.50);
        position: inherit;
        padding-left: 10%;
        top: 0em;
        left: 0em;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;*/
    }
}


@media (max-width: 320px) {

    .temporizador_styles {
        transform: scale(0.21) translate(-112%, -148%);
    }
}


@media (max-width: 1200px) {
    .sizeClock {
        transform: scale(0.65) translate(30%); /* Igual que: scaleX(0.7) scaleY(0.7) */
    }
}

@media (max-width: 1135px) {
    .sizeClock {
        transform: scale(0.65) translate(35%); /* Igual que: scaleX(0.7) scaleY(0.7) */
    }
}

@media (max-width: 1090px) {
    .sizeClock {
        transform: scale(0.60) translate(40%); /* Igual que: scaleX(0.7) scaleY(0.7) */
    }
}