/**
* @copyright Fundación Carlos Slim
* @author Javier Cortes Espinoza
*/

.html-1{
    background: url(../images/carreraahorro/escenarios/1h.jpg) center center / cover no-repeat fixed;
}

.html-2{
    background: url(../images/carreraahorro/escenarios/2h.jpg) center center / cover no-repeat fixed;
}

.juego {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
}

@font-face {
    font-family: 'Digital Numbers Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Digital Numbers Regular'), url('assets/fonts/DigitalNumbers/DigitalNumbers-Regular.woff') format('woff');
}

#header-content{
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

#header-page{
    text-align: center;
    background-color:#022D61;
}

#header-game{
    color: #FFFFFF;
    text-align: center;
    background-color:#000000;
    opacity: 0.8;
}

.board-avatar{
    width: 50px;
    height: auto;
}

.score{
    font-family:'Digital Numbers Regular';
    font-weight:normal;
    font-size:30px;
}

.v.score-in-box{
    margin: 0 15px !important;
}

.logo-header-page{
	padding: 20px 0;
	text-decoration: none;
    height: 100px;
    width: auto;
}

.tablero{
    width: 100% !important;
    text-align: center;
}

@media only screen and (max-width: 344px){
    .container-custom{
        width: 280px !important;
        margin: 150px 0 !important;
    }

    .casilla{
        width: 50px !important;
        height: 80px !important;
        margin: -15px -2px !important;
    }

    .human{
        background-position: center bottom !important;
    }

    .cpu{
        background-position: center 24px !important;
    }

    .modal-winner{
        width: 100% !important;
        top: -80px !important;
    }
    .board-avatar{
        width: 30px !important;
    }
    .odometer-inside{
        font-size: 10px !important;
    }
    .dice-img{
        width: 80px !important;
        height: 80px !important;
    }
    .title-box{
        font-size: 16px !important;
    }
    .question-box{
        font-size: 12px !important;
    }

    .v.score-in-box{
        margin: 0 10px !important;
    }
}

@media only screen and (min-width: 345px) and (max-width: 500px){
    .container-custom{
        width: 360px !important;
        margin: 150px 0 !important;
    }

    .casilla{
        width: 70px !important;
        height: 85px !important;
        margin: -10px -5px !important;
    }

    .human{
        background-position: center bottom !important;
    }

    .cpu{
        background-position: center 6px !important;
    }

    .modal-winner{
        width: 80% !important;
        top: -100px !important;
    }
    .board-avatar{
        width: 30px !important;
    }
    .odometer-inside{
        font-size: 18px !important;
    }
    .dice-img{
        width: 110px !important;
        height: 110px !important;
    }
    .title-box{
        font-size: 18px !important;
    }
    .question-box{
        font-size: 15px !important;
    }
}


@media only screen and (min-width: 501px) and (max-width: 700px){
    .container-custom{
        width: 480px !important;
        margin: 190px 0 !important;
    }

    .casilla{
        width: 100px !important;
        height: 115px !important;
        margin: -5px -5px !important;
    }

    .human{
        background-position: center bottom !important;
    }

    .cpu{
        background-position: center 5px !important;
    }

    .modal-winner{
        width: 80% !important;
        top: -180px !important;
    }
}

@media only screen and (min-width: 701px) and (max-width: 1200px){
    .container-custom{
        width: 600px !important;
        margin: 150px 0 !important;
    }

    .casilla{
        width: 110px !important;
        height: 130px !important;
        margin: -5px -5px !important;
    }

    .human{
        background-position: bottom bottom !important;
    }

    .cpu{
        background-position: center 5px !important;
    }

    .modal-winner{
        width: 70% !important;
        top: -280px !important;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1400px){
    .container-custom{
        width: 1100px !important;
        margin: 250px 0 !important;
    }

    .casilla{
        width: 110px !important;
        height: 150px !important;
        margin: -5px -5px !important;
    }

    .human{
        background-position: center bottom !important;
    }

    .cpu{
        background-position: center 28px !important;
    }

    .modal-winner{
        top: -285px !important;
    }
}

@media only screen and (min-width: 1401px){
    .container-custom{
        width: 1400px !important;
        margin: 250px 0 !important;
    }

    .casilla{
        width: 140px !important;
        height: 190px !important;
        margin: 0 -5px !important;
    }

    .human{
        background-position: center bottom !important;
    }

    .cpu{
        background-position: center 35px !important;
    }

    .modal-winner{
        top: -300px !important;
        left: -300px !important;
    }
}

.main-buttons{
    text-align: center;
    margin: 50px auto;

}

.dice-img{
    width: 150px;
    height: 150px;
}

.question-img{
    width: 170px;
    height: auto;
    transform: translateY(18px);

}

.human-1.cpu{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje1-antagonico.png) !important;
    background-repeat:no-repeat;
    background-position: center bottom !important;
    background-size: 100%;

}

.human-2.cpu{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje2-antagonico.png) !important;
    background-repeat:no-repeat;
    background-position: center bottom !important;
    background-size: 100%;

}

.human-3.cpu{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje3-antagonico.png) !important;
    background-repeat:no-repeat;
    background-position: center bottom !important;
    background-size: 100%;

}

.human-1{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje1-casilla.png) !important;
    background-repeat:no-repeat;
    background-size: 100%;
}

.human-2{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje2-casilla.png) !important;
    background-repeat:no-repeat;
    background-size: 100%;
}

.human-3{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje3-casilla.png) !important;
    background-repeat:no-repeat;
    background-size: 100%;
}

.cpu{
    background-image: url(../images/carreraahorro/tablero/casillas/antagonico-casilla.png) !important;
    background-repeat:no-repeat;
    background-size: 100%;
}

.casilla{
    display: inline-block;
    -webkit-animation: fadein 2s;
       -moz-animation: fadein 2s;
        -ms-animation: fadein 2s;
         -o-animation: fadein 2s;
            animation: fadein 2s;
}

.vacia{
    background-image: url(../images/carreraahorro/tablero/casillas/casilla-sin-recorrer.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: 100%;
}

.recorrida-human{
    background-image: url(../images/carreraahorro/tablero/casillas/casilla-rosa.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: 100%;
}

.recorrida-cpu{
    background-image: url(../images/carreraahorro/tablero/casillas/casilla-verde.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: 100%;
}

.recorrida-human.recorrida-cpu{
    background-image: url(../images/carreraahorro/tablero/casillas/casilla-bicolor.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: 100%;
}

.casilla-meta-human-1{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje1-meta.png) !important;
    background-repeat:no-repeat;
    background-size: 115%;
}

.casilla-meta-human-2{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje2-meta.png) !important;
    background-repeat:no-repeat;
    background-size: 115%;
}

.casilla-meta-human-3{
    background-image: url(../images/carreraahorro/tablero/casillas/personaje3-meta.png) !important;
    background-repeat:no-repeat;
    background-size: 115%;
}

.casilla-meta-cpu{
    background-image: url(../images/carreraahorro/tablero/casillas/antagonico-meta.png) !important;
    background-repeat:no-repeat;
    background-size: 108%;
}

.modal-winner{
    width: 60%;
    height: auto;
    transform: translateX(-50px);
    position: absolute;
    top: -50px;
}

.modal-z-index{
    z-index: -999;
}

.modal-winner-human-1{
    content:url(../images/carreraahorro/tablero/personaje1-gana.png);
}

.modal-winner-human-2{
    content:url(../images/carreraahorro/tablero/personaje2-gana.png);
}

.modal-winner-human-3{
    content:url(../images/carreraahorro/tablero/personaje3-gana.png);
}

.modal-winner-cpu{
    content:url(../images/carreraahorro/tablero/antagonico-gana.png);
}



.form-check-input:checked{
    background-color: #350053 !important;
    /*border-color: #FFFFFF !important;*/
    border: 2px solid #FFF !important;
    box-shadow: 1px 1px 10px 2px #aa9ab8 !important;
    -webkit-box-shadow: 1px 1px 10px 2px #aa9ab8 !important;
    -moz-box-shadow: 1px 1px 10px 2px #aa9ab8 !important;
}

.form-check-input:checked[type=radio] {
    background-image: none !important;
}

.form-check-input:clicked{
   color: none !important;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-custom{
    max-width: 100%;
    transform: translate(100px, 1px);
}

.options{
    text-align: left;
    font-weight: lighter;
}

.instructions{
    margin: -10px 0 10px;
    text-align: center;
    font-weight: lighter;
    font-size: 15px;
}

.body-play-again{
    padding-top: 100px;
}

.currency{
    font-family: serif !important;
}

.v{
    border-left: 4px solid rgb(129, 104, 149);
    border-radius: 25px;
    height: 15px;
    display: inline-block;
    margin: 0 30px;
}

.odometer .odometer-inside:before{
    content: "$" !important;
    font-family: monospace;
}

.sign:before{
    content: "$" !important;
    font-family: monospace;
}

.positive, .odometer .odometer-auto-theme{
    color: #00ff37 !important;
}

.negative, .odometer .odometer-auto-theme{
    color: #ff5151 !important;
}

.button-board {
    background-color: #d6ccdc;
    color: #350053;
    border: 3px solid #fff;
    border-radius: 5px;
    padding: 10px 25px;
    cursor: pointer;
    font-family: 'Montserrat-Medium';
    font-size: 1.2em;
    -webkit-transition: 0.6s all ease;
    -moz-transition: 0.6s all ease;
    -o-transition: 0.6s all ease;
    -ms-transition: 0.6s all ease;
    transition: 0.6s all ease;
}

.button-board.board {
    border-radius: 20px;
    border-color: #d6ccdc;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;

    color: #350053;
    padding: 8px 25px;
    text-align: center;
    -webkit-transition: 0.6s all ease;
    -moz-transition: 0.6s all ease;
    -o-transition: 0.6s all ease;
    -ms-transition: 0.6s all ease;
    transition: 0.6s all ease;
    font-size: 25px;
}

.button-board.board:hover {
    background-color: #d6ccdc;
    color: #350053;
    font-family: 'Montserrat-Black';
    box-shadow: 0 0 15px 10px #aa9ab8;
}