body {
    background-color: #5a5a5a !important;
}

.ecp-main{font-family: 'Roboto Mono', monospace;}
.ecp-content{
    background: rgba(245,246,247,1);
    min-height: 100vh;
    max-width: 400px;
    margin:0 auto;paddking: 0px 0px;
    backgronund: url('/img/res/game/banner2.jpg') center center; backzground:#fff;
    background-size: cover;
    overflow: auto;width: 100%;


}
.ecp-mainbox{padding: 10px 20px;max-width: 320px;margin: 0 auto;margin-txop: 30px;}
.ecp-boton{
    background: #fff;
    border: 2px solid #000;
    padding: 10px 20px;
    text-align: center;
    margin-bottom: 5px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    cursor:pointer;

}
.ecp-banner{heieght: 300px; text-align: center;font-size: 70px;padding-top: 0px;margin:0 auto;margin-bottom: 20px;width: 270px}
.ecp-titlegame{font-family: 'Roboto Mono', monospace;text-align: center;font-weight: 700;font-size: 26px;padding-bottom: 5px;margin-top: -10px;letter-spacing: 5px;color:#000}
.ecp-subtitlegame{font-family: 'Roboto Mono', monospace;text-align: center;font-weigdht: 700;font-size: 16px;padding-bottom: 10px;maregin-top: -10px;letter-spdacing: 5px;color:#555}

.ecp-bartop{
    background: #111;        
    position: fixed;top:0px;width:inherit;
    max-width:inherit;
    z-index: 10000;

}
.ecp-bartop .box{
    height: 55px;
    display:flex;
    align-items: center;
    padding: 0px 20px;
    font-weight: 700;
    font-size: 16px;
    color:#fff;

}


.ecp-body{backgroudnd: blue;padding: 10px 15px;margin-top: 0px;wirdth: 100%}
.ecp-itemmodule{background: #fff;height: 90px;border: 2px solid #111;margin-bottom: 0px;display:flex;align-items: flex-end;padding: 10px 10px;cursor:pointer}
.ecp-itemmodule:hover{background: #f5f5f5;}

.ecp-itemmodule-icon{align-self: center;font-size: 50px;padding: 10px 10px;color:rgba(255,255,255,0.9)}
.ecp-itemmodule-text{margin-left: auto;font-weight: 700;font-size: 18px;backgrdound: #fff;padding: 0px 0px;text-align: right}


.ecp-play-header{height: auto;border:2px solid #111;margin-bottom: 10px;margin-top: 0px;}
.ecp-play-imagen{max-height: 200px;overflow: hidden}
.ecp-play-enunciado{background: #444;padding: 10px 10px;color:#fff;font-weight: 700}
.ecp-play-option{background: #fff;padding: 5px 10px;border:2px solid #ddd;margin-bottom: 5px;font-weight: 400;width: 100%;cursor:pointer}
.ecp-play-boton-submit{background: #000;color:#fff;font-weight: 700;padding: 10px 20px;font-size: 20px;text-align: center;cursor: pointer;margin-bottom: 5px;}
.ecp-play-boton-submit:hover{background: #444;}



.ecp-play-boton-cancel{background: #fff;color:#000;font-weight: 700;padding: 10px 20px;font-size: 20px;text-align: center;cursor: pointer;margin-bottom: 5px;border:2px solid #000}
.ecp-play-boton-cancel:hover{background: #eee;}

.ecp-play-boton-submitform{background: #000;color:#fff !important;font-weight: 700 !important;padding: 7px 10px !important;font-size: 18px !important;text-align: center;cursor: pointer;margin-bottom: 5px;border-radius: 0px !important}
.ecp-play-boton-submitform:hover{background: #444; color:#fff;}
.ecp-play-boton-cancelform{background: #fff;color:#000 !important;font-weight: 700 !important;padding: 7px 10px !important;font-size: 18px !important;text-align: center;cursor: pointer;margin-bottom: 5px;border-radius: 0px !important;border:2px solid #000 !important}
.ecp-play-boton-cancelform:hover{background: #eee; color:#000;}

.ecp-game-progressbar{background: #fff;height: auto;border:0px solid #111;padding: 0px 0px;padding-top: 0px;border-left: none;border-right: none;}
.ecp-game-progressbar #fill-pb{background: #F2B707;width: 100%;height: 5px}

.ecp-game-radio{padding: 0px 00px 20px 0px}
.ecp-game-radio label{width: 100%;margin: 0px;}
.ecp-game-radio input[type="radio"]{display:none}
.ecp-game-radio input[type="radio"]:checked +.ecp-play-option {
    color:#fff;background: #418EF2;font-weight: 700;border:2px solid #418EF2;
}

.card {
    -webkit-perspective: 600px;
    perspective: 600px;
    position: relative;
    width: 100%
}
.card.is-switched .card__wrapper {
    -webkit-animation: rotate 0.5s linear both;
    animation: rotate 0.5s linear both;
}

.card__wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: rotate-inverse 0.5s linear both;
    animation: rotate-inverse 0.5s linear both;
}

.card__side {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: white;
    background-color: #fff;
}
.card__side img{width:100%;height: auto;}
.card__side.is-active {
    position: static;
}

.card__side--back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: #fff;
    display:none;
}



@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
    70% {
        -webkit-transform: rotateY(200deg);
        transform: rotateY(200deg);
    }
    100% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
    70% {
        -webkit-transform: rotateY(200deg);
        transform: rotateY(200deg);
    }
    100% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes rotate-inverse {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    70% {
        -webkit-transform: rotateY(-20deg);
        transform: rotateY(-20deg);
    }
    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
}
@keyframes rotate-inverse {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    70% {
        -webkit-transform: rotateY(-20deg);
        transform: rotateY(-20deg);
    }
    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
}

.ecp-module-title{text-align: center;font-size: 18px;padding-bottom: 20px;font-weight: 700;text-align: left}
.ecp-module-subtitle{text-align: center;font-size: 16px;padding-bottom: 20px;font-weight: 700;text-align: left}

.ecp-ranking-item{background: #fff;borer:2px solid #aaa;padding: 10px 10px;display:flex;align-items: center;margin-bottom: 5px;margin-left: 5px;flex-grow: 1}
.ecp-ranking-item .icon{background: #555;height: 22px;width: 22px;margin-right: 5px;flex-shrink: 0}
.ecp-ranking-item .texto{padding-left: 10px;text-transform: uppercase;font-weight: 700;font-size: 12px}
.ecp-ranking-item .subtexto{padding-left: 10px;font-size: 12px;text-transform: lowercase;colotr:#555;}
.ecp-ranking-item .puntos{padding-left: 25px;margin-left: auto;font-weight: 700;flex-shrink: 0}
.ecp-form{padding: 0px;padding-top: 0px;}
/* ELEMENTOS FORMULARIO */
.fv-form-game{}
.fv-form-game .checkbox label{color:#555 !important}
.fv-form-game .radio label{color:#555 !important}
.fv-form-game .enunciado{
    font-weight: 700;
    padding-bottom: 0px;
    margin-top: 10px;
    -webkit-font-smoothing: antialiased !important;
    font-size: 14px;color:rgba(27,27,50,0.6) !important;
}
.fv-form-game textarea{font-size: 16px;border:1px solid #aaa;border:none;border:1px solid rgba(208,208,213,1);font-family:'Roboto Mono', monospace;border-radius: 0px;box-shadow:none;bofrder:1px solid rgb(208,208,213);background: #fff}
.fv-form-game input[type="text"],.fv-form-game input[type="date"],.fv-form-game input[type="url"],.fv-form-game input[type="number"],.fv-form-game input[type="email"]{font-size: 16px;border:none;border:1px solid rgba(208,208,213,1);box-shadow: none;height: 40px;border-radius: 0px;font-family:'Roboto Mono', monospace !important;color:rgb(10,10,35);background: #fff}
.fv-form-game select{background-image: none !important;background: #fff !important;font-size: 16px;height: 40px;border:1px solid #aaa;}
.fv-form-game input[type="checkbox"]{height: 25px;}

.fv-form-game .form-control-feedback{top:44px !important;right: 5px !important;}
.fv-form-game .bootstrap-select{background-image: none !important;background: #fff !important;font-size: 16px;box-shadow: none;border:1px solid #aaa;font-family: 'proxima_semibold' !important;height: 37px;}
.fv-form-game .bootstrap-select>button{background-image: none !important;background: #fff !important;font-size: 16px;box-shadow: none;border:1px solid #aaa;font-family: 'proxima_semibold' !important;height: 37px;}
.fv-form-game ::placeholder { color: #ccc !important; opacity: 1; /* Firefox */}
.fv-form-game :-ms-input-placeholder {color: red;}
.fv-form-game ::-ms-input-placeholder {color: red;}
.fv-form-game input:read-only {
    background-color: #f5f5f5;bordder:none;
}
.fv-form-game .form-control-feedback{top:39px !important;right: 5px !important;}




.ecp-form-element-opt, .ecp-form-element{margin-bottom: 30px !important;}    
.ecp-form-element-opt   .enunciado,.ecp-form-element   .enunciado{padding-bottom: 5px;font-size: 14px;color:rgba(27,27,50,0.6) !important;font-weight: 700;margin-bottom: 0px;text-transform: uppercase}
.ecp-form-element-opt  .radiocheck-content{background: #fff;padding: 15px 0px 5px 0px}


.ecp-form-element-opt .item-opt{
    margin-bottom: 10px;
    cursor: pointer;

    position: relative;
    padding:0px 0 0px 45px;
    display: block;
}
.ecp-form-element-opt .item-opt input + i{
    background: #f0f0f0;
    border:2px solid rgba(0,0,0,0.2);
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
}
.ecp-form-element-opt .item-opt input[type=radio] + i, .ecp-form-element-opt .item-opt input[type=checkbox] + i{
    height: 20px;
    width: 20px;
    border-radeius: 100%;
    left: 15px;
    display: block !important;
}
.ecp-form-element-opt .item-opt input[type=radio] + i:before, .ecp-form-element-opt .item-opt input[type=checkbox] + i:before{
    content: '';
    display: block;
    height: 10px  !important;
    width: 10px  !important;
    background: red;
    border-radiues: 100%;
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 3px;
    background:#2AC176;
    transition: all 0.25s ease;
    transform: scale(0);
    opacity: 0; /* Lo ocultamos*/
}

.ecp-form-element-opt .item-opt:hover input[type=radio]:not(:checked) + i,
.ecp-form-element-opt .item-opt:hover input[type=checkbox]:not(:checked) + i{
    background: #B1E8CD;
}
.ecp-form-element-opt .item-opt input[type=radio]:checked + i:before, .ecp-form-element-opt .item-opt input[type=checkbox]:checked + i:before{
    transform: scale(1);
    opacity: 1;
}
.ecp-form-element-opt .item-opt input[type=radio], .ecp-form-element-opt .item-opt input[type=checkbox]{
    dispflay:none;
    opacity: 0;height: 0px;width: 0px;
}

.ecp-form-element .glyphicon{bottom:4px !important;top: auto !important;right:5px !important;}
.ecp-form-element .glyphicon-remove{bottom:24px !important;top: auto !important;right:5px !important;}
.ecp-form-element-opt .glyphicon{bottom:4px !important;top: auto !important;right:5px !important;}
.ecp-form-element-opt .glyphicon-remove{bottom:24px !important;top: auto !important;right:5px !important;}

.ecp-form-element input{
    font-size: 16px;
    border:1px solid rgba(208,208,213,1);
    box-shadow: none;
    height: 40px;
    border-radius: 0px;
    color:rgb(10,10,35);
    background: #fff;
}

.ecp-form-element textarea{
    font-size: 16px;
    border:1px solid rgba(208,208,213,1);
    box-shadow: none;
    border-radius: 0px;
    color:rgb(10,10,35);
    background: #fff}