html,body{
    position: relative;
    width: 845px;
    height: 507px;
    overflow: hidden;
    margin: 0px auto;
    padding: 0px;
}

/********************LADO IZQUIERDO*******************/
#tra_info{
    width: 180px;
    height: 100%;
    top: 0px;
    left: 40px;
}
#tra_info_before{
    top: 0px;
    left: -2px;
    width: 2px;
    height: 100%;
}
#tra_info_after{
    top: 0px;
    left: 100%;
    width: 2px;
    height: 100%;
}
#tra_logo{
    margin-top: 10px;
    height: 120px;
}
#tra_info_title_ayudas,
#tra_info_title_puntos{
    width: 100%;
    width: calc(100% + 20px);
    width: -moz-calc(100% + 20px);
    height: 30px;

    border-radius: 0px 7px 7px 0px;
    -ms-border-radius: 0px 7px 7px 0px;
    -moz-border-radius: 0px 7px 7px 0px;
    -webkit-border-radius: 0px 7px 7px 0px;
    -o-border-radius: 0px 7px 7px 0px;
    
    margin: 10px 0px;
    padding: 0px;
    margin-left: -42px;
}
#tra_info_title_ayudas::before,
#tra_info_title_puntos::before{
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 7px solid rgba(0,0,0,0);
    border-bottom: 7px solid rgba(0,0,0,0);
    border-left: 7px solid #FFFFFF;
    top: 50%;
    top: calc(50% - 7px);
    top: -moz-calc(50% - 7px);
    left: 100%;
}
#tra_info_title_ayudas::after,
#tra_info_title_puntos::after{
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 5px solid rgba(0,0,0,0);
    border-bottom: 5px solid rgba(0,0,0,0);
    border-left: 5px solid #111111;
    top: 50%;
    top: calc(50% - 5px);
    top: -moz-calc(50% - 5px);
    left: 100%;
}
#tra_info_title_ayudas p,
#tra_info_title_puntos p{
    width: 70%;
    margin: 0px;
    margin-left: 30%;
    padding: 0px;
    height: 28px;
    font-size: 13px;
    line-height: 28px;
}

#tra_preguntas_niveles_cont{
    position: relative;
    width: 100%;
    border: rgba(0,0,0,0) solid 1px;
    box-sizing: border-box;
    margin: 0px;
    overflow: hidden;
}

.tra_preguntas_niveles_shadow1,
.tra_preguntas_niveles_shadow2
{
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0px;
}
.tra_nivel_pregunta{
    width: 80%;
    height: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.tra_nivel_pregunta_off{
    margin-left: -20px;
    opacity: 0;
}
.tra_nivel_pregunta_on{
    margin-left: 10%;
    opacity: 1;
}

.tra_info_ayudas{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0px;
}
.tra_comodin_btn{
    float: left;
    margin: 3px 19px;
    width: 50px;
    height: 50px;
}
.tra_comodin_btn p{
    width: 100%;
    height: 20px;

    font-size: 12px;
    line-height: 20px;

    text-shadow: 2px 2px 0px rgba(0,0,0,0);
    -ms-text-shadow: 2px 2px 0px rgba(0,0,0,0);
    -moz-text-shadow: 2px 2px 0px rgba(0,0,0,0);
    -webkit-text-shadow: 2px 2px 0px rgba(0,0,0,0);
    -o-text-shadow: 2px 2px 0px rgba(0,0,0,0);
}

/**********************PREGUNTA**********************/
#tra_pregunta_cont{
    position: absolute;
    width: 70%;
    height: 350px;
    top: 30%;
    left: 250px;
    box-sizing: border-box;
}
#tra_pregunta{
    width: 95%;
    height: 110px;
    margin: 0px auto;
    padding: 10px;
        
    border: #FFFFFF solid 2px;
    
    border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
}
.tra_pregunta_off{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    opacity: 0;
    margin-top: -20px !important;
    margin-bottom: 30px !important;
}
.tra_pregunta_on{
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}
#tra_pregunta_txt{
    font-size: 14px;
    line-height: normal;
}

.tra_respuesta{
    position: relative;
    float: left;
    width: 45%;
    height: 100px;
    margin: 5px 2.5%;

    border: #FFFFFF solid 2px;

    border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
}
.tra_opcion_wraper{
    width: 100%;
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    left: 30px;
    height: 90px;
}
.tra_opcion_scroll{
    width: 10px;
    left: 100%;
    left: calc(100% - (10px + 5px));
    left: -moz-calc(100% - (10px + 5px));
    top: 5px;

    border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
}
.tra_opcion_scroll_barra{
    border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
}
.tra_respuesta h6{
    margin: 0px;
    padding: 0px;
    
    width: 25px;
    height: 25px;

    top: 50%;
    top: calc(50% - 12.5px);
    top: -moz-calc(50% - 12.5px);
    left: 5px;
    
    border: #F69E06 solid 2px;
    font-size: 14px;
    line-height: 21px;
}
.tra_respuesta p{
    width: 100%;
    padding: 0px;
    margin: 0px;

    font-size: 13px;
    line-height: auto;
}

/****************COMODINES*****************/
#tra_reloj{
    width: 100px;
    height: 100px;

    top: 20px;
    left: 250px;
}
#tra_llamada_cont,
#tra_5050_cont,
#tra_cambio_cont
{
    width: 100px;
    height: 60px;

    top: 35px;
    left: 100%;
    left: calc(100% - 120px);
    left: -moz-calc(100% - 120px);
}
#tra_llamada_icon,
#tra_5050_icon,
#tra_cambio_icon
{   
    width: 90px;
    height: 50px;
    top: 5px;
    left: 5px;
}
#tra_publico_cont{
    width: 130px;
    height: 130px;

    border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;

    border: #FFFFFF solid 1px;
    margin: 0px;
    padding: 0px 5px;
    padding-bottom: 0px;
    top: 10px;
    left: 100%;
    left: calc(100% - 150px);
    left: -moz-calc(100% - 150px);
}
#tra_publico_a_col,
#tra_publico_b_col,
#tra_publico_c_col,
#tra_publico_d_col
{
    width: 25%;
    height: 100%;
    height: calc(100% - (15px + 0px));
    height: -moz-calc(100% - (15px + 0px));
}
#tra_publico_a_col h6,
#tra_publico_b_col h6,
#tra_publico_c_col h6,
#tra_publico_d_col h6
{
    height: 15px;
    
    font-size: 13px;
    line-height: 15px;
}
#tra_publico_a_col p,
#tra_publico_b_col p,
#tra_publico_c_col p,
#tra_publico_d_col p
{
    height: 15px;

    font-size: 13px;
    line-height: 15px;
}
#tra_5050_icon_txt{
    width: 100%;
    height: 50px;

    margin: 0px;
    padding: 0px;
    font-size: 15px;
    line-height: 50px;
}

/******************************MENSAJE**************************/
#tra_mensaje{
    width: 250px;
    height: 80px;
    margin: 0px;
    padding: 10px;
    
    border: #FFFFFF solid 2px;
    
    border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    
    left: 49%;
}
.tra_mensaje_off{
    top: 0px;
    opacity: 0;
}
.tra_mensaje_on{
    top: 25px;
    opacity: 1;
}

#tra_mensaje_final{
    width: 250px;
    height: 100%;
    left: 40px;
}
#tra_mensaje_final_before{
    top: 0px;
    left: -2px;
    width: 2px;
    height: 100%;
}
#tra_mensaje_final_after{
    top: 0px;
    left: 100%;
    width: 2px;
    height: 100%;
}
#tra_mensaje_final_wrap{
    width: 100%;
    height: 100%;
    height: calc(100% - 100px);
    height: -moz-calc(100% - 100px);
    margin: 0px;
    padding: 0px 10px;
}

.tra_mensaje_final_on{
    top: 0px;
}
.tra_mensaje_final_off{
    top: -100%;
}
#tra_mensaje_final_txt{
    width: 100%;
    
    font-size: 14px;
    line-height: normal;
    margin: 0px;
    padding: 0px;
}
#tra_mensaje_final_txt span{
    font-weight: bold;
    font-size: 15px;
}
#tra_repetir_btn,#tra_empezar_btn{
    margin: 0px;
    padding: 0px;

    width: 50px;
    height: 50px;

    top: 100%;
    top: calc(100% - 80px);
    top: -moz-calc(100% - 80px);
    left: 50%;
    left: calc(50% - 25px);
    left: -moz-calc(50% - 25px);
}

#tra_logo_final{
    width: 170px;
    height: 170px;
    top: 15%;
    left: 100%;
    left: calc(100% - 245px);
    left: -moz-calc(100% - 245px);
}

@media (min-width: 845px){
    html,body{
        position: relative;
        width: 845px;
        height: 507px;
        overflow: hidden;
        margin: 0px auto;
        padding: 0px;
    }

    /********************LADO IZQUIERDO*******************/
    #tra_info{
        width: 180px;
        height: 100%;
        top: 0px;
        left: 40px;
    }
    #tra_info_before{
        top: 0px;
        left: -2px;
        width: 2px;
        height: 100%;
    }
    #tra_info_after{
        top: 0px;
        left: 100%;
        width: 2px;
        height: 100%;
    }
    #tra_logo{
        margin-top: 10px;
        height: 120px;
    }
    #tra_info_title_ayudas,
    #tra_info_title_puntos{
        width: 100%;
        width: calc(100% + 20px);
        width: -moz-calc(100% + 20px);
        height: 30px;
    
        border-radius: 0px 7px 7px 0px;
        -ms-border-radius: 0px 7px 7px 0px;
        -moz-border-radius: 0px 7px 7px 0px;
        -webkit-border-radius: 0px 7px 7px 0px;
        -o-border-radius: 0px 7px 7px 0px;
        
        margin: 10px 0px;
        padding: 0px;
        margin-left: -42px;
    }
    #tra_info_title_ayudas::before,
    #tra_info_title_puntos::before{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 7px solid rgba(0,0,0,0);
        border-bottom: 7px solid rgba(0,0,0,0);
        border-left: 7px solid #FFFFFF;
        top: 50%;
        top: calc(50% - 7px);
        top: -moz-calc(50% - 7px);
        left: 100%;
    }
    #tra_info_title_ayudas::after,
    #tra_info_title_puntos::after{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 5px solid rgba(0,0,0,0);
        border-bottom: 5px solid rgba(0,0,0,0);
        border-left: 5px solid #111111;
        top: 50%;
        top: calc(50% - 5px);
        top: -moz-calc(50% - 5px);
        left: 100%;
    }
    #tra_info_title_ayudas p,
    #tra_info_title_puntos p{
        width: 70%;
        margin: 0px;
        margin-left: 30%;
        padding: 0px;
        height: 28px;
        font-size: 13px;
        line-height: 28px;
    }

    #tra_preguntas_niveles_cont{
        position: relative;
        width: 100%;
        border: rgba(0,0,0,0) solid 1px;
        box-sizing: border-box;
        margin: 0px;
        overflow: hidden;
    }

    .tra_preguntas_niveles_shadow1,
    .tra_preguntas_niveles_shadow2
    {
        position: absolute;
        width: 100%;
        height: 30px;
        left: 0px;
    }
    .tra_nivel_pregunta{
        width: 80%;
        height: 24px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .tra_nivel_pregunta_off{
        margin-left: -20px;
        opacity: 0;
    }
    .tra_nivel_pregunta_on{
        margin-left: 10%;
        opacity: 1;
    }

    .tra_info_ayudas{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: 0px;
    }
    .tra_comodin_btn{
        float: left;
        margin: 3px 19px;
        width: 50px;
        height: 50px;
    }
    .tra_comodin_btn p{
        width: 100%;
        height: 20px;
    
        font-size: 12px;
        line-height: 20px;
    
        text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -ms-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -moz-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -webkit-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -o-text-shadow: 2px 2px 0px rgba(0,0,0,0);
    }

    /**********************PREGUNTA**********************/
    #tra_pregunta_cont{
        position: absolute;
        width: 70%;
        height: 350px;
        top: 30%;
        left: 250px;
        box-sizing: border-box;
    }
    #tra_pregunta{
        width: 95%;
        height: 110px;
        margin: 0px auto;
        padding: 10px;
            
        border: #FFFFFF solid 2px;
        
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_pregunta_off{
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        opacity: 0;
        margin-top: -20px !important;
        margin-bottom: 30px !important;
    }
    .tra_pregunta_on{
        transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }
    #tra_pregunta_txt{
        font-size: 14px;
        line-height: normal;
    }

    .tra_respuesta{
        position: relative;
        float: left;
        width: 45%;
        height: 100px;
        margin: 5px 2.5%;
    
        border: #FFFFFF solid 2px;
    
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_opcion_wraper{
        width: 100%;
        width: calc(100% - 30px);
        width: -moz-calc(100% - 30px);
        left: 30px;
        height: 90px;
    }
    .tra_opcion_scroll{
        width: 10px;
        left: 100%;
        left: calc(100% - (10px + 5px));
        left: -moz-calc(100% - (10px + 5px));
        top: 5px;

        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_opcion_scroll_barra{
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_respuesta h6{
        margin: 0px;
        padding: 0px;
        
        width: 25px;
        height: 25px;
    
        top: 50%;
        top: calc(50% - 12.5px);
        top: -moz-calc(50% - 12.5px);
        left: 5px;
        
        border: #F69E06 solid 2px;
        font-size: 14px;
        line-height: 21px;
    }
    .tra_respuesta p{
        width: 100%;
        padding: 0px;
        margin: 0px;
    
        font-size: 13px;
        line-height: auto;
    }

    /****************COMODINES*****************/
    #tra_reloj{
        width: 100px;
        height: 100px;
    
        top: 20px;
        left: 250px;
    }
    #tra_llamada_cont,
    #tra_5050_cont,
    #tra_cambio_cont
    {
        width: 100px;
        height: 60px;

        top: 35px;
        left: 100%;
        left: calc(100% - 120px);
        left: -moz-calc(100% - 120px);
    }
    #tra_llamada_icon,
    #tra_5050_icon,
    #tra_cambio_icon
    {   
        width: 90px;
        height: 50px;
        top: 5px;
        left: 5px;
    }
    #tra_publico_cont{
        width: 130px;
        height: 130px;
    
        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    
        border: #FFFFFF solid 1px;
        margin: 0px;
        padding: 0px 5px;
        padding-bottom: 0px;
        top: 10px;
        left: 100%;
        left: calc(100% - 150px);
        left: -moz-calc(100% - 150px);
    }
    #tra_publico_a_col,
    #tra_publico_b_col,
    #tra_publico_c_col,
    #tra_publico_d_col
    {
        width: 25%;
        height: 100%;
        height: calc(100% - (15px + 0px));
        height: -moz-calc(100% - (15px + 0px));
    }
    #tra_publico_a_col h6,
    #tra_publico_b_col h6,
    #tra_publico_c_col h6,
    #tra_publico_d_col h6
    {
        height: 15px;
        
        font-size: 13px;
        line-height: 15px;
    }
    #tra_publico_a_col p,
    #tra_publico_b_col p,
    #tra_publico_c_col p,
    #tra_publico_d_col p
    {
        height: 15px;

        font-size: 13px;
        line-height: 15px;
    }
    #tra_5050_icon_txt{
        width: 100%;
        height: 50px;
    
        margin: 0px;
        padding: 0px;
        font-size: 15px;
        line-height: 50px;
    }

    /******************************MENSAJE**************************/
    #tra_mensaje{
        width: 250px;
        height: 80px;
        margin: 0px;
        padding: 10px;
        
        border: #FFFFFF solid 2px;
        
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
        
        left: 49%;
    }
    .tra_mensaje_off{
        top: 0px;
        opacity: 0;
    }
    .tra_mensaje_on{
        top: 25px;
        opacity: 1;
    }

    #tra_mensaje_final{
        width: 250px;
        height: 100%;
        left: 40px;
    }
    #tra_mensaje_final_before{
        top: 0px;
        left: -2px;
        width: 2px;
        height: 100%;
    }
    #tra_mensaje_final_after{
        top: 0px;
        left: 100%;
        width: 2px;
        height: 100%;
    }
    #tra_mensaje_final_wrap{
        width: 100%;
        height: 100%;
        height: calc(100% - 100px);
        height: -moz-calc(100% - 100px);
        margin: 0px;
        padding: 0px 10px;
    }

    .tra_mensaje_final_on{
        top: 0px;
    }
    .tra_mensaje_final_off{
        top: -100%;
    }
    #tra_mensaje_final_txt{
        width: 100%;
        
        font-size: 14px;
        line-height: normal;
        margin: 0px;
        padding: 0px;
    }
    #tra_mensaje_final_txt span{
        font-weight: bold;
        font-size: 15px;
    }
    #tra_repetir_btn,#tra_empezar_btn{
        margin: 0px;
        padding: 0px;
    
        width: 50px;
        height: 50px;
    
        top: 100%;
        top: calc(100% - 80px);
        top: -moz-calc(100% - 80px);
        left: 50%;
        left: calc(50% - 25px);
        left: -moz-calc(50% - 25px);
    }

    #tra_logo_final{
        width: 170px;
        height: 170px;
        top: 15%;
        left: 100%;
        left: calc(100% - 245px);
        left: -moz-calc(100% - 245px);
    }
}

@media (min-width: 710px) and (max-width: 844px){
    html,body{
        position: relative;
        width: 710px;
        height: 426px;
        overflow: hidden;
        margin: 0px auto;
        padding: 0px;
    }

    /********************LADO IZQUIERDO*******************/
    #tra_info{
        width: 160px;
        height: 100%;
        top: 0px;
        left: 20px;
    }
    #tra_info_before{
        top: 0px;
        left: -2px;
        width: 2px;
        height: 100%;
    }
    #tra_info_after{
        top: 0px;
        left: 100%;
        width: 2px;
        height: 100%;
    }
    #tra_logo{
        margin-top: 7px;
        height: 100px;
    }
    #tra_info_title_ayudas,
    #tra_info_title_puntos{
        width: 100%;
        width: calc(100% + 20px);
        width: -moz-calc(100% + 20px);
        height: 25px;
    
        border-radius: 0px 6px 6px 0px;
        -ms-border-radius: 0px 6px 6px 0px;
        -moz-border-radius: 0px 6px 6px 0px;
        -webkit-border-radius: 0px 6px 6px 0px;
        -o-border-radius: 0px 6px 6px 0px;
        
        margin: 5px 0px;
        padding: 0px;
        margin-left: -38px;
    }
    #tra_info_title_ayudas::before,
    #tra_info_title_puntos::before{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 7px solid rgba(0,0,0,0);
        border-bottom: 7px solid rgba(0,0,0,0);
        border-left: 7px solid #FFFFFF;
        top: 50%;
        top: calc(50% - 7px);
        top: -moz-calc(50% - 7px);
        left: 100%;
    }
    #tra_info_title_ayudas::after,
    #tra_info_title_puntos::after{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 5px solid rgba(0,0,0,0);
        border-bottom: 5px solid rgba(0,0,0,0);
        border-left: 5px solid #111111;
        top: 50%;
        top: calc(50% - 5px);
        top: -moz-calc(50% - 5px);
        left: 100%;
    }
    #tra_info_title_ayudas p,
    #tra_info_title_puntos p{
        width: 70%;
        margin: 0px;
        margin-left: 30%;
        padding: 0px;
        height: 23px;
        font-size: 13px;
        line-height: 23px;
    }

    #tra_preguntas_niveles_cont{
        position: relative;
        width: 100%;
        border: rgba(0,0,0,0) solid 1px;
        box-sizing: border-box;
        margin: 0px;
        overflow: hidden;
    }

    .tra_preguntas_niveles_shadow1,
    .tra_preguntas_niveles_shadow2
    {
        position: absolute;
        width: 100%;
        height: 30px;
        left: 0px;
    }
    .tra_nivel_pregunta{
        width: 85%;
        height: 24px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .tra_nivel_pregunta_off{
        margin-left: -20px;
        opacity: 0;
    }
    .tra_nivel_pregunta_on{
        margin-left: 7.5%;
        opacity: 1;
    }

    .tra_info_ayudas{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: 0px;
    }
    .tra_comodin_btn{
        float: left;
        margin: 5px 15px;
        width: 45px;
        height: 45px;
    }
    .tra_comodin_btn p{
        width: 100%;
        height: 20px;
    
        font-size: 12px;
        line-height: 20px;
    
        text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -ms-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -moz-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -webkit-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -o-text-shadow: 2px 2px 0px rgba(0,0,0,0);
    }

    /**********************PREGUNTA**********************/
    #tra_pregunta_cont{
        position: absolute;
        width: 70%;
        height: 290px;
        top: 30%;
        left: 208px;
        box-sizing: border-box;
    }
    #tra_pregunta{
        width: 95%;
        height: 90px;
        margin: 0px auto;
        padding: 5px;
            
        border: #FFFFFF solid 2px;
        
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_pregunta_off{
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        opacity: 0;
        margin-top: -10px !important;
        margin-bottom: 20px !important;
    }
    .tra_pregunta_on{
        transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }
    #tra_pregunta_txt{
        font-size: 14px;
        line-height: normal;
    }

    .tra_respuesta{
        position: relative;
        float: left;
        width: 45%;
        height: 84px;
        margin: 5px 2.5%;
    
        border: #FFFFFF solid 2px;
    
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_opcion_wraper{
        width: 100%;
        width: calc(100% - 30px);
        width: -moz-calc(100% - 35px);
        left: 30px;
        height: 74px;
    }
    .tra_opcion_scroll{
        width: 7px;
        left: 100%;
        left: calc(100% - (7px + 5px));
        left: -moz-calc(100% - (7px + 5px));
        top: 5px;

        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_opcion_scroll_barra{
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_respuesta h6{
        margin: 0px;
        padding: 0px;
        
        width: 25px;
        height: 25px;
    
        top: 50%;
        top: calc(50% - 12.5px);
        top: -moz-calc(50% - 12.5px);
        left: 5px;
        
        border: #F69E06 solid 2px;
        font-size: 14px;
        line-height: 21px;
    }
    .tra_respuesta p{
        width: 100%;
        padding: 0px;
        margin: 0px;
    
        font-size: 13px;
        line-height: normal;
    }

    /****************COMODINES*****************/
    #tra_reloj{
        width: 100px;
        height: 100px;
    
        top: 10px;
        left: 208px;
    }
    #tra_llamada_cont,
    #tra_5050_cont,
    #tra_cambio_cont
    {
        width: 90px;
        height: 54px;

        top: 35px;
        left: 100%;
        left: calc(100% - 110px);
        left: -moz-calc(100% - 110px);
    }
    #tra_llamada_icon,
    #tra_5050_icon,
    #tra_cambio_icon
    {   
        width: 80px;
        height: 44px;
        top: 5px;
        left: 5px;
    }
    #tra_publico_cont{
        width: 110px;
        height: 110px;
    
        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    
        border: #FFFFFF solid 1px;
        margin: 0px;
        padding: 0px 5px;
        padding-bottom: 0px;
        top: 10px;
        left: 100%;
        left: calc(100% - 130px);
        left: -moz-calc(100% - 130px);
    }
    #tra_publico_a_col,
    #tra_publico_b_col,
    #tra_publico_c_col,
    #tra_publico_d_col
    {
        width: 25%;
        height: 100%;
        height: calc(100% - (15px + 0px));
        height: -moz-calc(100% - (15px + 0px));
    }
    #tra_publico_a_col h6,
    #tra_publico_b_col h6,
    #tra_publico_c_col h6,
    #tra_publico_d_col h6
    {
        height: 15px;
        
        font-size: 12px;
        line-height: 15px;
    }
    #tra_publico_a_col p,
    #tra_publico_b_col p,
    #tra_publico_c_col p,
    #tra_publico_d_col p
    {
        height: 15px;

        font-size: 12px;
        line-height: 15px;
    }

    #tra_5050_icon_txt{
        width: 100%;
        height: 44px;
    
        margin: 0px;
        padding: 0px;
        font-size: 15px;
        line-height: 44px;
    }

    /******************************MENSAJE**************************/
    #tra_mensaje{
        width: 240px;
        height: 80px;
        margin: 0px;
        padding: 10px;
        
        border: #FFFFFF solid 2px;
        
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
        
        left: 46%;
    }
    .tra_mensaje_off{
        top: 0px;
        opacity: 0;
    }
    .tra_mensaje_on{
        top: 25px;
        opacity: 1;
    }

    #tra_mensaje_final{
        width: 250px;
        height: 100%;
        left: 20px;
    }
    #tra_mensaje_final_before{
        top: 0px;
        left: -2px;
        width: 2px;
        height: 100%;
    }
    #tra_mensaje_final_after{
        top: 0px;
        left: 100%;
        width: 2px;
        height: 100%;
    }
    #tra_mensaje_final_wrap{
        width: 100%;
        height: 100%;
        height: calc(100% - 100px);
        height: -moz-calc(100% - 100px);
        margin: 0px;
        padding: 0px 10px;
    }

    .tra_mensaje_final_on{
        top: 0px;
    }
    .tra_mensaje_final_off{
        top: -100%;
    }
    #tra_mensaje_final_txt{
        width: 100%;
        
        font-size: 14px;
        line-height: normal;
        margin: 0px;
        padding: 0px;
    }
    #tra_mensaje_final_txt span{
        font-weight: bold;
        font-size: 15px;
    }
    #tra_repetir_btn,#tra_empezar_btn{
        margin: 0px;
        padding: 0px;
    
        width: 50px;
        height: 50px;
    
        top: 100%;
        top: calc(100% - 80px);
        top: -moz-calc(100% - 80px);
        left: 50%;
        left: calc(50% - 25px);
        left: -moz-calc(50% - 25px);
    }

    #tra_logo_final{
        width: 170px;
        height: 170px;
        top: 22%;
        left: 100%;
        left: calc(100% - 218px);
        left: -moz-calc(100% - 218px);
    }
}

@media (min-width: 530px) and (max-width: 709px){
    html,body{
        position: relative;
        width: 530px;
        height: 318px;
        overflow: hidden;
        margin: 0px auto;
        padding: 0px;
    }
    #cargador p{
        top: 60%;
    }

    /********************LADO IZQUIERDO*******************/
    #tra_info{
        width: 130px;
        height: 100%;
        top: 0px;
        left: 5px;
    }
    #tra_info_before{
        top: 0px;
        left: -2px;
        width: 2px;
        height: 100%;
    }
    #tra_info_after{
        top: 0px;
        left: 100%;
        width: 2px;
        height: 100%;
    }
    #tra_logo{
        margin-top: 5px;
        height: 70px;
        background-image: url(../images/logo_qqsm_v2.png);
    }
    #tra_info_title_ayudas,
    #tra_info_title_puntos{
        width: 100%;
        width: calc(100% + 10px);
        width: -moz-calc(100% + 10px);
        height: 20px;
    
        border-radius: 0px 6px 6px 0px;
        -ms-border-radius: 0px 6px 6px 0px;
        -moz-border-radius: 0px 6px 6px 0px;
        -webkit-border-radius: 0px 6px 6px 0px;
        -o-border-radius: 0px 6px 6px 0px;
        
        margin: 5px 0px;
        padding: 0px;
        margin-left: -20px;
    }
    #tra_info_title_ayudas::before,
    #tra_info_title_puntos::before{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 5px solid rgba(0,0,0,0);
        border-bottom: 5px solid rgba(0,0,0,0);
        border-left: 7px solid #FFFFFF;
        top: 50%;
        top: calc(50% - 5px);
        top: -moz-calc(50% - 5px);
        left: 100%;
    }
    #tra_info_title_ayudas::after,
    #tra_info_title_puntos::after{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 3px solid rgba(0,0,0,0);
        border-bottom: 3px solid rgba(0,0,0,0);
        border-left: 5px solid #111111;
        top: 50%;
        top: calc(50% - 3px);
        top: -moz-calc(50% - 3px);
        left: 100%;
    }
    #tra_info_title_ayudas p,
    #tra_info_title_puntos p{
        width: 90%;
        margin: 0px;
        margin-left: 10%;
        padding: 0px;
        height: 19px;
        font-size: 12px;
        line-height: 18px;
        font-weight: normal !important;
    }

    #tra_preguntas_niveles_cont{
        position: relative;
        width: 100%;
        border: rgba(0,0,0,0) solid 1px;
        box-sizing: border-box;
        margin: 0px;
        overflow: hidden;
    }

    .tra_preguntas_niveles_shadow1,
    .tra_preguntas_niveles_shadow2
    {
        position: absolute;
        width: 100%;
        height: 20px;
        left: 0px;
    }
    .tra_preguntas_niveles_shadow2{
        top: 100% !important;
        top: calc(100% - 20px) !important;
        top: -moz-calc(100% - 20px) !important;
    }
    .tra_nivel_pregunta{
        width: 90%;
        height: 24px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .tra_nivel_pregunta_off{
        margin-left: -20px;
        opacity: 0;
    }
    .tra_nivel_pregunta_on{
        margin-left: 5%;
        opacity: 1;
    }

    .tra_info_ayudas{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: 0px;
    }
    .tra_comodin_btn{
        float: left;
        margin: 2px 13px;
        width: 35px;
        height: 35px;
    }
    .tra_comodin_btn p{
        width: 100%;
        height: 20px;
    
        font-size: 10px;
        line-height: 20px;
    
        text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -ms-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -moz-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -webkit-text-shadow: 2px 2px 0px rgba(0,0,0,0);
        -o-text-shadow: 2px 2px 0px rgba(0,0,0,0);
    }

    /**********************PREGUNTA**********************/
    #tra_pregunta_cont{
        position: absolute;
        width: 74%;
        height: 220px;
        top: 30%;
        left: 138px;
        box-sizing: border-box;
    }
    #tra_pregunta{
        width: 95%;
        height: 70px;
        margin: 0px auto;
        padding: 5px;
            
        border: #FFFFFF solid 1px;
        
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_pregunta_off{
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        opacity: 0;
        margin-top: -10px !important;
        margin-bottom: 20px !important;
    }
    .tra_pregunta_on{
        transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        opacity: 1;
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }
    #tra_pregunta_txt{
        font-size: 12px;
        line-height: 14px;
    }

    .tra_respuesta{
        position: relative;
        float: left;
        width: 45%;
        height: 60px;
        margin: 5px 2.5%;
    
        border: #FFFFFF solid 1px;
    
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }
    .tra_opcion_parent{
        padding: 2px !important;
    }
    .tra_opcion_wraper{
        width: 100%;
        width: calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        left: 17px;
        height: 56px;
    }
    .tra_opcion_scroll{
        width: 5px;
        left: 100%;
        left: calc(100% - (5px + 2px));
        left: -moz-calc(100% - (5px + 2px));
        top: 2px;

        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    }
    .tra_opcion_scroll_barra{
        height: 20px !important;
        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    }

    .tra_respuesta h6{
        margin: 0px;
        padding: 0px;
        
        width: 15px;
        height: 15px;
    
        top: 50%;
        top: calc(50% - 7.5px);
        top: -moz-calc(50% - 7.5px);
        left: 2px;
        
        border: #F69E06 solid 1px;
        font-size: 12px;
        line-height: 14px;
    }
    .tra_respuesta p{
        width: 100%;
        padding: 0px;
        margin: 0px;
    
        font-size: 11px;
        line-height: 12px;
    }

    /****************COMODINES*****************/
    #tra_reloj{
        width: 70px;
        height: 70px;
    
        top: 6px;
        left: 36px;
    }
    #tra_llamada_cont,
    #tra_5050_cont,
    #tra_cambio_cont
    {
        width: 90px;
        height: 54px;

        top: 20px;
        left: 100%;
        left: calc(100% - 100px);
        left: -moz-calc(100% - 100px);
    }
    #tra_llamada_icon,
    #tra_5050_icon,
    #tra_cambio_icon
    {   
        width: 80px;
        height: 44px;
        top: 5px;
        left: 5px;
    }
    #tra_publico_cont{
        width: 110px;
        height: 90px;
    
        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    
        border: #FFFFFF solid 1px;
        margin: 0px;
        padding: 0px 5px;
        padding-bottom: 0px;
        top: 2.5px;
        left: 100%;
        left: calc(100% - 120px);
        left: -moz-calc(100% - 120px);
    }
    #tra_publico_a_col,
    #tra_publico_b_col,
    #tra_publico_c_col,
    #tra_publico_d_col
    {
        width: 25%;
        height: 100%;
        height: calc(100% - (15px + 0px));
        height: -moz-calc(100% - (15px + 0px));
    }
    #tra_publico_a_col h6,
    #tra_publico_b_col h6,
    #tra_publico_c_col h6,
    #tra_publico_d_col h6
    {
        height: 15px;
        font-size: 11px;
        line-height: 15px;
    }
    #tra_publico_a_col p,
    #tra_publico_b_col p,
    #tra_publico_c_col p,
    #tra_publico_d_col p
    {
        height: 15px;

        font-size: 11px;
        line-height: 15px;
    }

    #tra_5050_icon_txt{
        width: 100%;
        height: 44px;
    
        margin: 0px;
        padding: 0px;
        font-size: 15px;
        line-height: 44px;
    }

    /******************************MENSAJE**************************/
    #tra_mensaje{
        width: 240px;
        height: 70px;
        margin: 0px;
        padding: 5px;
        
        border: #FFFFFF solid 1px;
        
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
        
        left: 28%;
    }
    .tra_mensaje_off{
        top: 0px;
        opacity: 0;
    }
    .tra_mensaje_on{
        top: 13px;
        opacity: 1;
    }

    #tra_mensaje_txt{
        font-size: 12px !important;
        line-height: normal !important;
    }

    #tra_mensaje_final{
        width: 250px;
        height: 100%;
        left: 20px;
    }
    #tra_mensaje_final_before{
        top: 0px;
        left: -2px;
        width: 2px;
        height: 100%;
    }
    #tra_mensaje_final_after{
        top: 0px;
        left: 100%;
        width: 2px;
        height: 100%;
    }
    #tra_mensaje_final_wrap{
        width: 100%;
        height: 100%;
        height: calc(100% - 100px);
        height: -moz-calc(100% - 100px);
        margin: 0px;
        padding: 0px 10px;
    }

    .tra_mensaje_final_on{
        top: 0px;
    }
    .tra_mensaje_final_off{
        top: -100%;
    }
    #tra_mensaje_final_txt{
        width: 100%;
        
        font-size: 14px;
        line-height: normal;
        margin: 0px;
        padding: 0px;
    }
    #tra_mensaje_final_txt span{
        font-weight: bold;
        font-size: 15px;
    }
    #tra_repetir_btn,#tra_empezar_btn{
        margin: 0px;
        padding: 0px;
    
        width: 50px;
        height: 50px;
    
        top: 100%;
        top: calc(100% - 80px);
        top: -moz-calc(100% - 80px);
        left: 50%;
        left: calc(50% - 25px);
        left: -moz-calc(50% - 25px);
    }

    #tra_logo_final{
        width: 120px;
        height: 120px;
        top: 22%;
        left: 100%;
        left: calc(100% - 160px);
        left: -moz-calc(100% - 160px);
    }
}

@media (min-width: 280px) and (max-width: 529px){
    html,body{
        position: relative;
        width: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        margin: 0px auto;
        padding: 0px;

        transition: height 0.3s;
        -webkit-transition: height 0.3s;
    }
    #tra_contenedor{
        width: 100%;
        transition: height 0.3s;
        -webkit-transition: height 0.3s;
    }
    .tra_contenedor_507{
        height: 507px;
    }
    
    /********************LADO IZQUIERDO*******************/
    #tra_info{
        width: 100%;
        height: 50px;
        top: 0px;
        left: 0px;
        background-color: rgba(0,90,133,0) !important;
    }
    #tra_info_before{
        display: none;
    }
    #tra_info_after{
        display: none;
    }
    #tra_logo{
        display: none !important;
    }
    #tra_info_title_ayudas{
        position: absolute;
        width: 100px;
        width: calc((100% - 190px) / 2);
        width: -moz-calc((100% - 190px) / 2);
        height: 30px;
        border-left: none !important;
    
        border-radius: 0px 7px 7px 0px;
        -ms-border-radius: 0px 7px 7px 0px;
        -moz-border-radius: 0px 7px 7px 0px;
        -webkit-border-radius: 0px 7px 7px 0px;
        -o-border-radius: 0px 7px 7px 0px;
        
        margin: 0px;
        padding: 0px;
        top: 50%;
        top: calc(50% - 15px);
        top: -moz-calc(50% - 15px);
        left: 0px;
    }
    #tra_info_title_puntos{
        position: absolute;
        width: 100px;
        width: calc(((100% - 190px) / 2) + 10px);
        width: -moz-calc(((100% - 190px) / 2) + 10px);
        height: 30px;
        border-right: none !important;
    
        border-radius: 7px 0px 0px 7px;
        -ms-border-radius: 7px 0px 0px 7px;
        -moz-border-radius: 7px 0px 0px 7px;
        -webkit-border-radius: 7px 0px 0px 7px;
        -o-border-radius: 7px 0px 0px 7px;
        
        margin: 0px;
        padding: 0px;
        top: 50%;
        top: calc(50% - 15px);
        top: -moz-calc(50% - 15px);
        left: 100%;
        left: calc(100% - ((100% - 190px) / 2) - 10px);
        left: -moz-calc(100% - ((100% - 190px) / 2) - 10px);
    }
    #tra_info_title_ayudas::before{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 7px solid rgba(0,0,0,0);
        border-bottom: 7px solid rgba(0,0,0,0);
        border-left: 7px solid #FFFFFF;
        top: 50%;
        top: calc(50% - 7px);
        top: -moz-calc(50% - 7px);
        left: 100%;
    }
    #tra_info_title_ayudas::after{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 5px solid rgba(0,0,0,0);
        border-bottom: 5px solid rgba(0,0,0,0);
        border-left: 5px solid #111111;
        top: 50%;
        top: calc(50% - 5px);
        top: -moz-calc(50% - 5px);
        left: 100%;
    }

    #tra_info_title_ayudas p,
    #tra_info_title_puntos p
    {
        width: 100%;
        margin: 0px;
        margin-left: 0%;
        padding: 0px;
        height: 28px;
        font-size: 12px;
        line-height: 26px;
        font-weight: normal;
    }
    #tra_preguntas_niveles_cont{
        display: none;
    }

    .tra_preguntas_niveles_shadow1,
    .tra_preguntas_niveles_shadow2
    {
        display: none;
    }
    .tra_nivel_pregunta{
        width: 90%;
        height: 24px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .tra_nivel_pregunta::before{display: none;}
    .tra_nivel_pregunta::after{display: none;}

    .tra_nivel_pregunta_off{
        margin-left: 80%;
        opacity: 0;
    }
    .tra_nivel_pregunta_on{
        margin-left: 5%;
        opacity: 1;
    }
    /*************MOBILE PREGUNTAS NIVELES****************/
    /*#tra_puntos_niveles{
        position: absolute;
        box-sizing: border-box;
        width: 100px;
        width: calc(((100% - 190px) / 2) + 10px);
        width: -moz-calc(((100% - 190px) / 2) + 10px);
        height: 30px;
        top: 100%;

        border-radius: 5px 0px 0px 5px;
        -ms-border-radius: 5px 0px 0px 5px;
        -moz-border-radius: 5px 0px 0px 5px;
        -webkit-border-radius: 5px 0px 0px 5px;
        -o-border-radius: 5px 0px 0px 5px;

        border: #FFFFFF solid 1px;
        border-right: none;
        
        left: 100%;
        left: calc(100% - ((100% - 190px) / 2) - 10px);
        left: -moz-calc(100% - ((100% - 190px) / 2) - 10px);

        animation-name: animacion_puntos_niveles;
        animation-iteration-count: infinite;
        animation-duration: 2s;
        -webkit-animation-name: animacion_puntos_niveles;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 2s;
    }
    @keyframes animacion_puntos_niveles{
        0% { 
            background-color: #111111;
        }
        50% {
            background-color: #6DAD38;
        }
        100% {
            background-color: #111111;
        }
    }
    #tra_puntos_niveles p{
        display: block;
        width: 100%;
        height: 28px;
        padding: 0px 5px;
        margin: 0px;

        font-family: 'Quicksand', sans-serif;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 28px;
        font-weight: normal;
    }*/
    #tra_puntos_niveles{
        display: none;
    }

    .tra_info_ayudas{
        position: absolute;
        width: 170px;
        height: 40px;
        
        box-sizing: border-box;
        margin: 0px;
        top: 5px;
        left: 50%;
        left: calc(50% - 85px);
        left: -moz-calc(50% - 85px);
    }
    .tra_comodin_btn{
        float: left;
        margin: 0px 2.5px;
        width: 35px;
        height: 35px;
    }
    .tra_comodin_btn:hover{
        transform: none !important;
        -ms-transform: none !important;
        -moz-transform: none !important;
        -webkit-transform: none !important;
        -o-transform: none !important;
    }
    .tra_comodin_btn p{
        width: 100%;
        height: 15px;
    
        font-size: 9px;
        line-height: 15px;
    
        text-shadow: none;
        -ms-text-shadow: none;
        -moz-text-shadow: none;
        -webkit-text-shadow: none;
        -o-text-shadow: none;
    }

    /**********************PREGUNTA**********************/
    #tra_pregunta_cont{
        position: relative;
        width: 100%;
        padding: 0px 10px;
        height: auto;
        margin-top: 200px !important;
        margin-left: 0px !important;
        box-sizing: border-box;
	left: initial;
	top: inicial;
    }
    #tra_pregunta{
        width: 100%;
        height: auto;
        margin: 0px auto;
        padding: 5px;
        display: block;
        align-items: unset;
            
        border: #FFFFFF solid 1px;
        
        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        margin-bottom: 5px !important;
    }
    .tra_pregunta_off{
        opacity: 0;
    }
    .tra_pregunta_on{
        opacity: 1;
    }
    #tra_pregunta_txt{
        font-size: 13px;
        line-height: normal;
    }

    .tra_respuesta{
        position: relative;
        width: 100%;
        height: auto;
        margin: 5px 0px;
    
        border: #FFFFFF solid 1px;
    
        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    }
    #tra_opcion1::after,
    #tra_opcion2::after,
    #tra_opcion3::after,
    #tra_opcion4::after,
    #tra_opcion1::before,
    #tra_opcion2::before,
    #tra_opcion3::before,
    #tra_opcion4::before
    {
        display: none;
    }

    .tra_opcion_parent{
        padding: 10px !important;
    }
    .tra_opcion_wraper{
        width: 100%;
        width: calc(100% - 25px);
        width: -moz-calc(100% - 25px);
        left: 25px;
    }
    .tra_opcion_scroll{
        display: none;
    }
    .tra_opcion_scroll_barra{
        display: none;
    }
    .tra_respuesta h6{
        margin: 0px;
        padding: 0px;
        
        width: 20px;
        height: 20px;
    
        top: 50%;
        top: calc(50% - 10px);
        top: -moz-calc(50% - 10px);
        left: 5px;
        
        border: #F69E06 solid 2px;
        font-size: 12px;
        line-height: 16px;
    }
    .tra_respuesta p{
        position: relative !important;
        width: 100%;
        padding: 0px;
        margin: 0px;
    
        font-size: 13px;
        line-height: normal;
    }

    /****************COMODINES*****************/
    #tra_reloj{
        width: 100px;
        height: 100px;
    
        top: 70px;
        left: 100%;
        left: calc(100% - 110px);
        left: -moz-calc(100% - 110px);
    }
    #tra_aguja{
        transition: none !important;
        -webkit-transition: none !important;
    }
    #tra_llamada_cont,
    #tra_5050_cont,
    #tra_cambio_cont
    {
        width: 100px;
        height: 60px;

        top: 85px;
        left: 100%;
        left: calc(100% - 110px);
        left: -moz-calc(100% - 110px);
    }
    #tra_llamada_icon,
    #tra_5050_icon,
    #tra_cambio_icon
    {   
        width: 90px;
        height: 50px;
        top: 5px;
        left: 5px;
    }
    #tra_llamada_cont{display: none;}
    .tra_comodin_activo{
        animation: none !important;
        animation: unset !important;
        -webkit-animation: none !important;
        -webkit-animation: unset !important;
    }
    #tra_publico_cont{
        width: 110px;
        height: 130px;
    
        border-radius: 5px;
        -ms-border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    
        border: #FFFFFF solid 1px;
        margin: 0px;
        padding: 0px 5px;
        padding-bottom: 0px;
        top: 55px;
        left: 100%;
        left: calc(100% - 120px);
        left: -moz-calc(100% - 120px);
    }
    #tra_publico_a_col,
    #tra_publico_b_col,
    #tra_publico_c_col,
    #tra_publico_d_col
    {
        width: 25%;
        height: 100%;
        height: calc(100% - (15px + 0px));
        height: -moz-calc(100% - (15px + 0px));
    }
    #tra_publico_a_col h6,
    #tra_publico_b_col h6,
    #tra_publico_c_col h6,
    #tra_publico_d_col h6
    {
        height: 15px;
        
        font-size: 13px;
        line-height: 15px;
    }
    #tra_publico_a_col p,
    #tra_publico_b_col p,
    #tra_publico_c_col p,
    #tra_publico_d_col p
    {
        height: 15px;

        font-size: 13px;
        line-height: 15px;
    }
    #tra_5050_icon_txt{
        width: 100%;
        height: 50px;
    
        margin: 0px;
        padding: 0px;
        font-size: 15px;
        line-height: 50px;
    }

    /******************************MENSAJE**************************/
    #tra_mensaje{
        width: 100%;
        width: calc(100% - 150px);
        width: -moz-calc(100% - 150px);
        height: 100px;
        margin: 0px;
        padding: 5px;
        
        border: #FFFFFF solid 1px;
        
        border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
        
        left: 10px;
    }
    #tra_mensaje_txt{
        font-size: 12px;
        line-height: normal;
    }
    .tra_mensaje_off{
        top: 50px;
        opacity: 0;
    }
    .tra_mensaje_on{
        top: 70px;
        opacity: 1;
    }

    #tra_mensaje_final{
        width: 100%;
        height: 250px;
        left: 0px;
        
    }
    #tra_mensaje_final_before{
        top: 0px;
        left: 0px;
        width: 100%;
        height: 2px;
    }
    #tra_mensaje_final_after{
        top: 100%;
        top: calc(100% - 2px);
        top: -moz-calc(100% - 2px);
        left: 0px;
        width: 100%;
        height: 2px;
    }

    #tra_mensaje_final_wrap{
        width: 100%;
        height: 100%;
        height: calc(100% - 90px);
        height: -moz-calc(100% - 90px);
        margin: 0px;
        padding: 0px 10px;
    }

    .tra_mensaje_final_on{
        top: 50%;
        top: calc(50% - 125px);
        top: -moz-calc(50% - 125px);
    }
    .tra_mensaje_final_off{
        top: 50%;
        top: calc(50% - 125px);
        top: -moz-calc(50% - 125px);
    }
    #tra_mensaje_final_txt{
        width: 100%;
        
        font-size: 14px;
        line-height: normal;
        margin: 0px;
        padding: 0px;
    }
    #tra_mensaje_final_txt span{
        font-weight: bold;
        font-size: 15px;
    }
    #tra_repetir_btn,#tra_empezar_btn{
        margin: 0px;
        padding: 0px;
    
        width: 50px;
        height: 50px;
    
        top: 100%;
        top: calc(100% - 70px);
        top: -moz-calc(100% - 70px);
        left: 50%;
        left: calc(50% - 25px);
        left: -moz-calc(50% - 25px);
    }

    #tra_logo_final{
        display: none;
    }
}