/*-----------------globales ------------------------------*/

*{color:#336; font:1em/1.5 sans-serif;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;}
a{text-decoration:none !important; color:#337;}

*::selection {
   background: #faae00;
}

html,body,.main{
    height:100%;
    background:#fafafa;
}

.cw{position:absolute !important;left:0 !important;right:0 !important;margin-left:auto !important;margin-right:auto !important;}
.ch{position:absolute !important;top:0 !important;bottom:0 !important;margin-top:auto !important;margin-bottom:auto !important;}
.cwh{position:absolute !important;left:0 !important;right:0 !important;margin-left:auto !important;margin-right:auto !important;top:0 !important;bottom:0 !important;margin-top:auto !important;margin-bottom:auto !important;}

.hidden{display:none;}

h1,h2,h3{
    font-family: 'Montserrat', sans-serif;
}

/*-----------------header y footer ------------------------------*/

.header{
    position:relative;
    width:100%;height:80px;
    background: #faae00;
    background: linear-gradient(top, #faae00 85%,#f39a01 85%);
    background: -webkit-linear-gradient(top, #faae00 75%,#f39a01 75%);
    background: -moz-linear-gradient(top, #faae00,#f39a01);
    background: -ms-linear-gradient(top, #faae00,#f39a01);
    background: -o-linear-gradient(top, #faae00,#f39a01);






}
.header img{
    height:80px;
    display:block;
    position:absolute;
    /*top:10px;
    left:10px;*/
}
.header h1{
    /*width:60%;
    display:block;*/
    color: #fff;
    font-size:26px;
    text-align:center;
    line-height:70px;
    margin-top:0;margin-bottom:0;
}

/*footer*/

footer{
    width:100%;
    /*background: linear-gradient(top, #f39a01,#e27602);
    background: -webkit-linear-gradient(top, #f39a01,#e27602);
    background: -moz-linear-gradient(top, #f39a01,#e27602);
    background: -ms-linear-gradient(top, #f39a01,#e27602);
    background: -o-linear-gradient(top,#f39a01,#e27602);*/
    background:#e27602;
}
.footer{
    position:relative;
    width:650px;
    margin:0 auto 0 auto;
    background:#f39a01;
}
.footer div{
    border-left:solid 1px #fff;
    border-right:solid 1px #fff;
    padding: 6px 20px;
}
.footer div p {
    margin:0;
    font-weight:bolder;
    line-height:20px;
    }
.footer div:first-child p{
    font-size: 16px;
    /*letter-spacing:-1px;*/    
    color:#fff;    
}
.footer div:last-child p:first-child{
}
.footer div p a:last-child{
}

.mini-separador {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #eee;
    margin: 0px 12px;
}


/*-----------------cuerpo ------------------------------*/

#wrapper{
    width:88%;
    padding:30px 4%;
    max-width:1100px;
    min-height: calc(100% - 133px);
    margin:0 auto;
    background:#fff;
    box-shadow: 2px 0 12px #f5f5f5, -2px 0 12px #f5f5f5;
    -webkit-box-shadow: 2px 0 12px #f5f5f5, -2px 0 12px #f5f5f5;
    -moz-box-shadow: 2px 0 12px #f5f5f5, -2px 0 12px #f5f5f5;
    -ms-box-shadow: 2px 0 12px #f5f5f5, -2px 0 12px #f5f5f5;
    -o-box-shadow: 2px 0 12px #f5f5f5, -2px 0 12px #f5f5f5;
}
.intro{
    text-align:center;
    margin: 0 0 20px 0;
}
.intro h2{
    font-size:28px;
    font-weight:bolder;
} 

.instrucciones{    
    background: #f39a01;
    text-align:center ;
    padding:10px ;
    margin-bottom:50px ;
    border-radius:0px;
}
.instrucciones:hover{
    cursor:pointer;

    box-shadow: 0 6px 6px -6px #f39a01;
    -webkit-box-shadow: 0 6px 6px -6px #f39a01;
    -moz-box-shadow: 0 6px 6px -6px #f39a01;
    -ms-box-shadow: 0 6px 6px -6px #f39a01;
    -o-box-shadow: 0 6px 6px -6px #f39a01;
}

.instrucciones::before{
        display:none !important;
}

.menu-index{
    margin-top:50px;  
}
.menu-index .niveles-indice.col-md-6:nth-child(2){
    border-right:solid 1px #e3e3e3;
}
.menu-index .niveles-indice div{
    text-align:left;
    padding:15px 10px;
    margin:5px 0;
    color:#336;
    min-height:132px;
    border-radius:10px;
    /*pruebas*/
    padding:5px;
    margin:20px 0;
    border-left: solid 4px #faae00;
    border-radius:0;
    background:#fafafa;
    
}
.menu-index .niveles-indice div:hover{
    border-color:#faae00;
    background: #faae00;
    background: linear-gradient(top, #f39a01 38%,#e27602 38%);
    background: -webkit-linear-gradient(top, #f39a01 38%,#e27602 38%);
    background: -moz-linear-gradient(top, #f39a01 38%,#e27602 38%);
    background: -ms-linear-gradient(top, #f39a01 38%,#e27602 38%);
    background: -o-linear-gradient(top,#f39a01 38%,#e27602 38%);
    
    border-color:transparent;

    box-shadow: 0 10px 12px -9px #555;
    -webkit-box-shadow: 0 10px 12px -9px #555;
    -moz-box-shadow: 0 10px 12px -9px #555;
    -ms-box-shadow: 0 10px 12px -9px #555;
    -o-box-shadow: 0 10px 12px -9px #555;
}
.menu-index .niveles-indice div:hover *{    
    color:#fff;
}
.menu-index .niveles-indice div:hover p{    
    color:#f9f9f9 !important;
}

.menu-index .instrucciones{
    background: #fafafa;
    background: linear-gradient(top,#f0f0f0,#fbfbfb,#f0f0f0);
    background: -webkit-linear-gradient(top,#f0f0f0,#fbfbfb,#f0f0f0);
    background: -ms-linear-gradient(top,#f0f0f0,#fbfbfb,#f0f0f0);
    background: -moz-linear-gradient(top,#f0f0f0,#fbfbfb,#f0f0f0);
    background: -o-linear-gradient(top,#f0f0f0,#fbfbfb,#f0f0f0);
    color:#336;
    box-shadow: 0 10px 12px -11px #888;
    -webkit-box-shadow: 0 10px 12px -11px #888;
    -moz-box-shadow: 0 10px 12px -11px #888;
    -ms-box-shadow: 0 10px 12px -11px #888;
    -o-box-shadow: 0 10px 12px -11px #888;

        /*border: solid 1px #e7e7e7;*/
}
.menu-index .instrucciones *{    
    color:#336;
    margin-top:7px;
}
.menu-index .instrucciones:hover{
    background: #faae00;
    /*background: linear-gradient(top,#faae00,#fccf6f,#faae00);
    background: -webkit-linear-gradient(top,#faae00,#fccf6f,#faae00);
    background: -ms-linear-gradient(top,#faae00,#fccf6f,#faae00);
    background: -moz-linear-gradient(top,#faae00,#fccf6f,#faae00);
    background: -o-linear-gradient(top,#faae00,#fccf6f,#faae00);*/
    background: linear-gradient(top,#faae00 37%,#fccf6f 37%);
    background: -webkit-linear-gradient(top,#faae00 37%,#fccf6f 37%);
    background: -ms-linear-gradient(top,#faae00 37%,#fccf6f 37%);
    background: -moz-linear-gradient(top,#faae00 37%,#fccf6f 37%);
    background: -o-linear-gradient(top,#faae00 37%,#fccf6f 37%);

    /*border-color: #f39a01;*/
     box-shadow:  0 10px 12px -9px #555;
    -webkit-box-shadow:  0 10px 12px -9px #555;
    -moz-box-shadow:  0 10px 12px -9px #555;
    -ms-box-shadow:  0 10px 12px -9px #555;
    -o-box-shadow:  0 10px 12px -9px #555;

}
.menu-index .instrucciones:hover *{
        color: #fff;
}

/*.menu-index .instrucciones:hover .logo-nivel.logo1{
        margin-top:-30px !important;        
}*/

.logo-nivel{
    width:100px;height:100px;
    display:block;
    background: url(../img/niveles.png) no-repeat center;
    background-size:cover;
    margin:0 auto;
    border-radius:10px;
    /*pruebas*/
    border-radius:0;
}
.menu-index .niveles-indice .logo-nivel{
    margin:10px;
    float:left;
}

.logo {
    background: url(../img/logo.png) no-repeat center;
    width:70px; height:70px;
}

.menu-index h3{
    margin:9px 0 0 0;
}
.menu-index p{
    margin:15px 0 0 0;
}
.menu-index .niveles-indice h3, .menu-index .niveles-indice p{
    padding-left: 140px !important;
}
.menu-index h3{
    text-transform:uppercase;
}

.menu-index .row div a{
    display:block;
    width:100%;height:100%;
    text-align:center;
    color:#482f04;
    cursor:pointer;
}

.menu-index .row div:hover p{
    color:#fff;
}
.logo1{
    height:97px !important;
    background-position:0 0; 
    margin-top:-13px !important;
    transition: all .3s;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -ms-transition:all .3s;
    -o-transition:all .3s;
}
.logo2{background-position:0 -100px;}
.logo3{background-position:0 -200px;}
.logo4{background-position:0 -300px;}
.logo5{background-position:0 -400px;}


/*--------------------------------------------------------------------------------------------
----------------------------   TEST NIVEL  --------------------------------------------------
--------------------------------------------------------------------------------------------*/

#wrapper .question-number{   
    width: 280px;
    margin: 10px auto;
    position: absolute;
    top: 0px; 
    right: 10px;   
    text-align: left;
}
/*no level---------------------------------------*/
#wrapper .question-number.no-level{      
}
#wrapper .question-number.no-level p{
    line-height:51px !important;
} 
#wrapper .question-number.no-level h2.test-level span{
    display:inline-block;
    position:inherit;
    margin: 0;
    line-height:15px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 2px;
}
 /*no level---------------------------------------*/




#wrapper .question-number h2 {
    display: block;
    margin: 0;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 2px;    
}
#wrapper .question-number h2.test-level span{
    display:inline-block;
    position:inherit;
    margin: 0;
    line-height:15px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 2px;
}

#wrapper .question-number p{
    display: block;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: bolder;
    line-height: 30px;
    letter-spacing: -2px;
    margin-bottom:0;
}
#wrapper .question-number span{
    display: block;
    position: absolute;
    top: 0;left: 160px;
    line-height: 50px;
    font-size: 46px;
    font-weight: bolder;
    color:#fff;
    letter-spacing: -1px;    
}


#wrapper .question-number{   
    width: 190px; 
}

#wrapper .question-number h2 {
    font-size: 13px;   
}
#wrapper .question-number h2.test-level span{
    font-size: 13px;
}

#wrapper .question-number p{
    font-size: 24px;
    line-height: 24px;
}

#wrapper .question-number span{
    top: 0;left: 115px;
    font-size: 28px; 
}


.hero3-intro{   
    text-align:left;
    width:58.3%;
    padding: 12px 20px;
    background:#f27e02;
    border-radius:1px;
    color:#fff;

    /*pruebas*/
    
    
    /*background:-webkit-linear-gradient(top,#eee,#d8d8d8);
    background:-moz-linear-gradient(top,#eee,#f0f0f0);
    background:-ms-linear-gradient(top,#eee,#d8d8d8);
    background:-o-linear-gradient(top,#eee,#d8d8d8);
    background:linear-gradient(top,#eee,#d8d8d8);*/

}
.hero3-intro.cma{
    background:-webkit-linear-gradient(left,#d8d8d8,#f0f0f0);
    background:-moz-linear-gradient(left,#d8d8d8,#f0f0f0);
    background:-ms-linear-gradient(left,#d8d8d8,#f0f0f0);
    background:-o-linear-gradient(left,#d8d8d8,#f0f0f0);
    background:linear-gradient(left,#d8d8d8,#f0f0f0);
    border-left:solid 4px #f27e02;
        text-shadow: 1px 1px 0 #555;
        -webkit-text-shadow: 1px 1px 0 #555;
        -moz-text-shadow: 1px 1px 0 #555;
        -ms-text-shadow: 1px 1px 0 #555;
        -o-text-shadow: 1px 1px 0 #555;}

.pregunta{
    margin: 10px 0 30px 0;
    padding: 2px 15px;
    text-align:left;
}

.question-box{
        overflow:hidden;
    }
.questions{
    list-style:none;
    padding: 0 20px 0 0;   
    
    border-right:solid 3px #bbb; 
}


.questions li {
    display: block;
    width: 96%;
    margin: 12px auto;
    background: #fafafa;
    border-radius: 25px;

        box-shadow: 1px 1px #eee;
        -webkit-box-shadow: 1px 1px #eee;
        -moz-box-shadow: 1px 1px #eee;
        -ms-box-shadow: 1px 1px #eee;
        -webkit-box-shadow: 1px 1px #eee;

}
.questions li:hover{
    background: #f39a01;
}
.modal-body .questions li{
    pointer-events:none
}
.modal-header{
    padding:10px 6px !important;
    background:#e77801;
    color:#fff;
}
.modal-header .close{
    opacity:1;
    display:inline-block;
}
.modal-header .close span{
    color:#fff;
    font-size:28px;
    padding:5px 8px;
    
}
.modal-header > span{
    
   
}
.modal-header > h4{
    text-align:center;
}
.modal-header > h4 > span{
    display:block;
    text-align:center;
}

.questions li a {
    font-size: 16px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 13px 5px;
    cursor: pointer;
}
.questions span {
    font-size: 14px;
    text-transform: uppercase;
    background: #f39a01;
    border-radius: 50%;
    padding: 4px 8px;
    color: #fff;
    font-weight: bolder;
    margin-left: 5px;
    margin-right: 20px;
}
.questions li:hover a {
    color: #fff;
    font-weight: bolder;
}
.questions li:hover a span {
    color: purple;
    background: #fff;
}


.media{
text-align:center;
}
.media audio{
width:260px;
margin: 0 auto;
height:220px;
background: url(../img/audio.jpg) no-repeat top;
background-size: 138px;
}
.media video{
height:200px;

}
.media img{
height:200px;
}
.media .document{
    display:block;
    height:162px;
    width:138px;
    margin: 0 auto;
    background: url(../img/document.png) no-repeat top;
    background-size:contain;
    text-align:center;
    font-size:13px;
    padding-top:146px;
}
.media .document p{    
}
.media .document:hover p{
    font-weight:600;
}

/*----------------*/
.if-audio + .media + .progress-box{
    position:absolute;
    bottom:0;
    left:0%;
    width:100%;
}

.progress{
    width:400px;height:25px;
    margin:40px auto 0 auto;
}
.progress-bar{     
  background:#70f429;    
}
.progress-bar-yellow .progress-bar{     
  background:#f7a601;       
}
.progress-bar-red .progress-bar{     
  background:#f43202;       
}
.progress-bar span{     
   line-height:25px; 
   font-weight:600;     
  color:#000 !important;
}

.time-label{
     display: block;
    width: 100%;
    text-align: center;
    color: #555;
    font-size: 10px;
    font-weight: lighter;
    letter-spacing: 6px;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* -------------*/

/*--------------------------------------------------------------------------------------------
----------------------------   TEST2   --------------------------------------------------
--------------------------------------------------------------------------------------------*/
.intro-test-media{  

}
.media-content{
    min-height:350px;
    margin:15px auto;
}
.media-content  p{
    background: #f0f0f9;
    padding: 15px 30px!important;
    width: 100%;
}
.media p.media-texto {
       background: #f0f0f9;
    padding: 10px 20px !important;
    overflow-y: auto;
    max-height: 307px !important;
    text-align: justify;
}
.media-content div.media-texto {
    background: #f0f0f9;
    padding: 15px 30px !important;
    overflow-y: auto;
    max-height: 290px !important;
    text-align: justify;
}

.intro-test-media div.intro-box{ 
    margin: 15px 0; 
   padding: 0 10px;
   border-left:solid 23px #285fb7;
   position:relative;
}
.intro-test-media h3{
    text-transform:uppercase;
    background:none;
    margin:0 !important;
    padding:10px 10px 0 10px;
    color:#444;
    letter-spacing: 2px;
    font-weight:bolder;
}
.intro-test-media p{
    text-align: left;
    color:#222;
    padding:2px 10px;
    margin: 0 !important;
}
.media-texto{
    width: 97%;
    margin: 0 auto;
    background: #ECF0F1;
    color: #2C3E50;
}
.intro-test-media audio{
    width:80%;
    margin:190px auto;
}
.intro-test-media video{
    text-align:center;
    height:350px;
    /*width: 90%;*/
    margin:0 auto;
}
.intro-test-media img{
    /*width: 90%;*/
    height:350px;
    margin:0 auto;
}


.start{
    width:100%;
    margin-top:30px;
}
.start .btn-primary{
    display:block;
    width:90px;
    margin:0 auto;
    background:#C0392B;
    border-color:#EC5E00;

    transition: all.1s;
    -webkit-transition: all.1s;
    -moz-transition: all.1s;
    -ms-transition: all.1s;
    -o-transition: all.1s;
}
.start .btn-primary:hover{    
    font-weight:bolder;
    background:#d32344;
    border-color:#fff;
}

.start .btn-primary.focus, .btn-primary:focus {
    background-color: silver;
    border-color: gold;
}
.start .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
    background-color: silver;
    border-color: gold;
}
.start .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    background-color: silver;
    border-color: gold;
}





/*--------------------------------------------------------------------------------------------
----------------------------   RESULTADOS  --------------------------------------------------
--------------------------------------------------------------------------------------------*/

.graph25{}
.graph4{}

.graph5.level-bars{
    height:380px !important;
    width:450px!important;
    margin:0 auto !important;
}
.graph5.level-bars a div  span{
      font-size:15px !important;
      color:#fff !important;
      position:absolute !important;
      bottom:5px !important;
      top:inherit;
      left:0;right:0; margin-left:auto;margin-right:auto;
}

.graph5.level-bars a div span:last-child:after {
      display:none  !important;
}
.graph6{}
.graph7{}



.graph25 a{width:3.846%;}
.graph4 a{width:24.9%;}
.graph5 a{
    width:19.9%;
}
.level-bars.graph5 a:nth-child(1) div{
    height:19%;
}
.level-bars.graph5 a:nth-child(2) div{
    height:38%;
}
.level-bars.graph5 a:nth-child(3) div{
    height:57%;
}
.level-bars.graph5 a:nth-child(4) div{
    height:76%;
}
.level-bars.graph5 a:nth-child(5) div{
    height:95%;
}
.graph6 a{width:16.66%;}
.graph7 a{width:14.28%;}

.level-bars{
    width:100%;
    height:300px;
    margin:0;
}
.level-bars a{
    display:block;
    height:100%;
    float:left;
    position:relative;
}

.level-bars a div{
    position:absolute;
    bottom:0;
    left:0;
    width:100%; 
    
    border-right: solid 1px #777;
    border-radius: 5px 5px 0 0;
}

.level-bars a span{
    display:block;    
    color:#fff;
    text-align:center;
    font-size:13px;    
}



.level-bars  a:nth-child(1) div{
    height:14.2%;
}
.level-bars  a:nth-child(2) div{
    height:28.4%;
}
.level-bars  a:nth-child(3) div{
    height:42.6%;
}
.level-bars  a:nth-child(4) div{
    height:56.8%;
}
.level-bars  a:nth-child(5) div{
    height:71%;
}
.level-bars  a:nth-child(6) div{
    height:85.2%;
}
.level-bars  a:nth-child(7) div{
    height:99.4%;
}

.beginner  div{
    background:#e93933;
}
.elementary  div{
    background:#af5c6e;
}
.pre-intermediate  div{
    background:#a3cdeb;
}
.intermediate  div{
    background:#5cccbb;
}
.advanced  div{
    background:#10f416;
}

.user-result{
    width:310px;
    margin:0 auto;
    border:solid 1px #F27E02;
    border-radius:10px 10px 0 0px;
    overflow:hidden;
}
.user-result h2{
    color:#F27E02;
    margin:0;
    padding:10px;
}

.user-result span{
    line-height: 30px;
    font-size: 42px;
    font-weight: bolder;
    color:#777;
}
.user-result p{
    background:#F27E02;
    color:#fff;
    padding: 6px 8px;
    margin-bottom:0;
    min-height:25px;
    margin-top:7px;
}
.user-result p span{
    display:block;
    width:100%;
    text-align:center;
    color:#fff;
    font-size:17px;
    line-height:20px;
    font-weight:normal;
    padding: 3px;
}

.score-chart-result{
    width:100% !important;
    margin-left:0 !important;
}


.aciertos{
    padding:10px;
    /*height:140px;*/
    border:solid 1px #ccc;    
    color:#E79300;
    font-size:20px;
    border-radius:5px;
}
.aciertos p{
    font-size:15px;
}
.aciertos p span{
    color:#f39a01;
}
.aciertos span:first-child{font-weight:bolder;}
.aciertos span:last-child{ color: #f39a01; font-weight:bolder;}
.aciertos p:last-child span:last-child{ color: #015FF8; font-weight:bolder;}
.aciertos h4{
    text-transform:uppercase;
    color:#648;
    margin:5px 0;
}
.resultados{
}
.resultados2{
    margin: 50px auto;
    overflow:hidden;
    /*height:245px !important;*/
}


.mini-graph{
    height:100%;
    padding:0;
    background:url(../img/grafica.png) no-repeat center;
    background-size: 100% 100%;
    cursor:pointer;

    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}
.mini-graph:hover {
    background-color:#eee;
    background-size:100% 115%;
    }
.mini-graph h6{
    text-align:left;
    font-size:40px;
    font-weight:bolder;
    margin:0;
}
.mini-graph p{
    font-size:12px;
    line-height:10px;
}


/**/

.level-bars-padre{
    height:470px;
    padding-top:25px;
}
.level-bars{
    height:400px;
}
.level-bars a{
    height:100%;     
}

.level-bars a span{
    display:block;    
    color:#fff;
    font-weight:bolder;
    text-align:center;

}

.level-bars a div {     
      text-align:center;    
      color:#999;
}
 .level-bars a div span{
      font-size:10px;
      color:#000;
      position:relative;
      top:-65px;
}
.level-bars a div span:last-child:after {
      display:block;
      content:"";
      border-left:solid 1px #000;
      position:absolute;
      bottom:-25px;left:50%;
      height:25px;
}
.level-bars a div.index-bar span {     
      position:absolute;
      bottom:-20px;
      top:auto !important;
      text-align:center;
}
.level-bars a div.index-bar span:after {     
      display:none;
}





 .level-bars a:nth-child(1) div{
    height:1%;
}
 .level-bars a:nth-child(2) div{
    height:3.84%;
}
.level-bars  a:nth-child(3) div{
    height:7.68%;
}
.level-bars  a:nth-child(4) div{
    height:11.52%;
}
.level-bars  a:nth-child(5) div{
    height:15.36%;
}
.level-bars  a:nth-child(6) div{
    height:19.2%;
}
 .level-bars  a:nth-child(7) div{
    height:23.04%;
}
.level-bars  a:nth-child(8) div{
    height:26.88%;
}
 .level-bars  a:nth-child(9) div{
    height:30.72%;
}
 .level-bars  a:nth-child(10) div{
    height:34.56%;
}
 .level-bars  a:nth-child(11) div{
    height:38.4%;
}
 .level-bars  a:nth-child(12) div{
    height:42.24%;
}
 .level-bars  a:nth-child(13) div{
    height:46.08%;
}
.level-bars  a:nth-child(14) div{
    height:49.92%;
}
.level-bars  a:nth-child(15) div{
    height:53.76%;
}
.level-bars  a:nth-child(16) div{
    height:57.6%;
}
.level-bars  a:nth-child(17) div{
    height:61.44%;
}
.level-bars  a:nth-child(18) div{
    height:65.28%;
}
.level-bars  a:nth-child(19) div{
    height:69.12%;
}
 .level-bars  a:nth-child(20) div{
    height:72.96%;
}
 .level-bars a:nth-child(20) div span{ 
      top:-120px;
}
 .level-bars  a:nth-child(21) div{
    height:76.8%;
}
 .level-bars  a:nth-child(22) div{
    height:80.64%;
}
 .level-bars  a:nth-child(23) div{
    height:84.48%;
}
 .level-bars  a:nth-child(24) div{
    height:88.32%;
}
 .level-bars  a:nth-child(25) div{
    height:92.16%;
}
 .level-bars  a:nth-child(26) div{
    height:96%;
}

 /* mostrar barra your level */
@keyframes tunivel{
    0%{}
    50%{background:rgba(242,195,111,.5);}
    100%{}
}
.your-level{    
    animation: tunivel 1.3s;
    animation-iteration-count:infinite;
}
.your-level div{
    background:#f39a01
}
.your-level:before{
    color:#000;
}
 /* mostrar barra your level */

.bars-label{
    overflow:hidden;
    width: 100%;
}
.bars-label p{
    display:block;
    float:left;
    text-align:center;
    text-transform:uppercase;
    padding: 5px 3px;
    font-size:12px;
    font-weight:bolder;
    margin-top:25px;

    color:#999 !important;
}
.bars-label p:nth-child(1){
    width:15.36%;
     color:#e93933;
}
.bars-label p:nth-child(2){
    width:15.36%;
    color:#af5c6e;
}
.bars-label p:nth-child(3){
    width:19.2%;
    color:#a3cdeb;
}
.bars-label p:nth-child(4){
    width:26.84%;
     color:#5cccbb;
}
.bars-label p:nth-child(5){
    width:23.04%;
    color:#10f416;
}



/**/


.leyend{    
}
.leyend p{
    height:29px;
    margin-bottom:7px;}

.leyend span{
    display:inline-block;
    text-align:center;
    width:65px;
    background:#999;
    color:#fff;
    padding:4px;
    border-radius:3px;
    margin-right: 9px;
}



/***** leyenda*/
.leyend2{ 
     margin-top:3px;
}
.leyend2 p{
    height:27px;
    margin-bottom:6px;
    font-size:12px;
}
.leyend2 span{
    font-size:12px;
    display:inline-block;
    text-align:center;
    width:45px;
    background:#999;
    color:#fff;
    padding:3px 0;
    border-radius:3px;
    margin-right: 6px;
}



.leyend2-graph5{
    height:90px;
}
.leyend2-graph5 p{
    text-align:center;
}
.leyend2-graph5 span{
    display:block;
    float:none;
    margin:0 auto;
}



/***** fin leyenda*/


.send-results{
    cursor:pointer;
    width:52%;
    margin:60px auto 20px auto;
    background:#f39a01;
    padding:25px 10px;
    color:#fff;
    text-align:center;
    border-radius:5px;

     transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
}
.send-results:hover {
    letter-spacing:1px;
    background: #faae00;    
}


#modal-form h4.modal-title{
    text-align:center;
}

form{
     width:90%;
     margin: 0 auto;
     background:#F39A01;
     padding:40px 0;
}
form input, form textarea{
    width:90%;
    margin:1% 5%;
    padding:8px 12px;
}
form .btn-primary{
    width:100px;
    margin-left:5%;
    margin-top:20px;    
    background:#C0392B;
    border-color:#EC5E00;
}
form .btn-primary:hover{    
    font-weight:bolder;
    background:#d32344;
    border-color:#EC5E00;
}


.btn-primary.focus, .btn-primary:focus {
    background-color: silver;
    border-color: gold;
}
.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
    background-color: silver;
    border-color: gold;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    background-color: silver;
    border-color: gold;
}



.modal-caja-2{
    width:99% !important;
    margin:30px auto !important;
}
.modal-caja{
    padding:0 !important;
    max-width:1260px;
    margin:0 auto;
}




/*--------------------------------------------------------------------------------------------
----------------------------   RESULTADOS  DETALLES --------------------------------------------------
--------------------------------------------------------------------------------------------*/

.intro{
    overflow:hidden;
}
.results-padre{
    width:630px;
    margin:0 auto;
}
.user-results, .user-results2{
    width:380px;
    float:left;
    height:192px;
    height:220px;    
}
.user-results2{
    width:230px;
    margin-left:20px;
}

.test-score, .test-score2{
    width: 99%;
    padding: 18px;
    margin:1%;
    position: relative;
    text-align: left;
    border: solid 1px #566;
    border-radius:5px;
}
.test-score3{
    clear:both;
    width:100%;
    margin:3px auto 4px auto;
    border: solid 1px #ccc;
    border-radius:5px;
}
.test-score3 h4{
    color:#648;
}
.test-score3 h4 span{
    padding-left:15px;
    font-weight:bolder;
    color:#f39a01;
}

.test-score p {
        display: block;
        margin: 0;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: lighter;
        letter-spacing: 5px;
}

.test-score h2 {
        display: block;
        text-transform: uppercase;
        font-size: 32px;
        font-weight: bolder;
        line-height: 30px;
        letter-spacing: -1px;
        margin: 0;
}

.test-score span, .test-score2 span{    
        display: block;
        position: absolute;
        bottom: 16px;
        right: 20px;
        line-height: 48px;
        font-size: 30px;
        font-weight: bolder;
        color: tomato;
        letter-spacing: -2px;
}


.test-score2 h5 {
        display: block;
        margin: 0;
        text-transform: uppercase;
        font-size: 12px;
        line-height:18px;
        font-weight: lighter;
        letter-spacing: 5px;
}
.test-score2 h3 {
        display: block;
        text-transform: uppercase;
        font-size: 32px;
        font-weight: bolder;
        line-height: 30px;
        letter-spacing: -1px;
        margin: 0;
}

.user-results2 h4{
    height:19%;    
    padding:8px;
    margin: 3px 0;    
    text-align:right;   
    padding-right:26px;
    border-radius:5px 5px 0 0;
    color:#fafafa;
    background:#E77801;
}
.user-results2 h4 span{    
    color:#fff;
}
.user-results2 h5{
    height:19%;    
    padding:6px;
    margin: 3px 0;    
    text-align:right;
    font-weight:bolder;    
    padding-right:26px;
    border-radius:5px;
    color:#fff;
    background:tomato;

    background:none;
    border: solid 1px #e77801;
    color:#648;
}
.user-results2 h5 span{
    font-weight:bolder;
    padding-left:4px;
    color:#f39a01;
}



.table-global{
}

.table-results{
    margin:30px 0 15px 0;
}
.table-results h3{
    text-align:center;
    padding: 15px 2px;
}
caption{
   text-align:center;
   font-size:24px;
   margin-bottom:15px;
}
.table-results table{
    width:80%;
    margin:0 auto;
}
.table-results table th{
   height:50px;
   width:32%;          
   border:solid 3px #fff;
   text-align:center;
   font-weight:bolder;
   color:#fff;
   background:#FB9200;
   border-radius: 15px 15px 0 0;
}

.table-results table tr{
    width:33%;
}

.table-results table tr:nth-child(even) {
    background: #f8f8f8;
}

.questions li:hover a span {
    color: purple;
    background: #fff;
}


.table-results table td{
    text-align:center;
    line-height:50px;
    margin-right:.3%;
    position:relative;
    text-transform:uppercase;
}
.table-results table td i{
    display:block;
    position:absolute;
    top:10px;
    left:10px;
    height:30px;
    width:30px;
    background: url(../img/icon-table.png) no-repeat center;
    background-size:cover;
    cursor:pointer;

    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
}
.table-results table td i:hover{
    height:40px;
    width:40px;
    top: 5px;
    left: 5px;
}



.check-answer{
    font-size:16px;
    font-weight:bolder;
    background: url(../img/icons-table.png) no-repeat;
    background-position: 50% -50px;
    text-align:left !important;
    padding-left:7%;
}
.check-answer.fail{    
    background: url(../img/icons-table.png) no-repeat;
    background-position:  50%  -100px;
}
.check-answer.time{    
    background: url(../img/icons-table.png) no-repeat;
    background-position:  50%  0px;
}
.check-answer.notanswered{    
    background: url(../img/icons-table.png) no-repeat;
    background-position:  50%  -150px;
}





/*-------- MODAL -------*/

.modal-body ul.questions li:hover{
	background: #fafafa;
    cursor:initial;
}
.modal-body ul.questions li.correct{
	background: #10f416 !important;
}
.modal-body ul.questions li.correct *{
	font-weight:bolder;
    color:#fff;
}

.modal-body ul.questions li.select{
	background: #e21d1d;
}
.modal-body ul.questions li.select *{
	font-weight:bolder;
    color:#fff;
}
.modal .questions span {   
    border-radius: 14px;
}
.modal .questions {
    list-style: none;
    padding: 0 20px 0 0;
    border-right: none;
}
.form-mail {
    width:100%
}
.form-mail iframe{
    height:526px;
    margin:0 auto;
    width:350px;
    display:block;
}

#divFormMail2{
    min-height:100%;
    padding:5px;
}
#divFormMail2 form{
    background:#f0f0f0;
    padding-top:16px;
    height:100%;
    margin:0 auto;
    width:300px;
}
#divFormMail2 form input, #divFormMail form textarea{
    display: block;
    margin: 8px 10px;
    border-radius:4px;
    padding: 10px 12px;
    width:250px;
}

#divFormMail2 form textarea{
    min-height:3.6em;
}
#divFormMail2 form input:focus, #divFormMail form textarea:focus{
    outline: none;
    background:#fff8e8;
}
:focus {
    
}
#divFormMail2 #btnEnviar{
    width:150px;
    margin: 20px 75px;
    background:#FB9F00;
    border-color:#FF9933;
    color:#fff;
}
#messageSendEmailOk h3{
    padding: 5px 10px;
    text-align:center;
}




/*--------------------------------------------------------------------------------------------
    --------------------------------------------------------------------------------------------
----------------------------   MEDIA QUERYS --------------------------------------------------
    --------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/

@media screen and (max-width:1250px) {
    .header h1 {
        text-align: left;
        padding-left: 80px;
    }
}
@media screen and (max-width:1199px) {

    #wrapper .resultados2 .col-sm-3.col-md-3{
        width:40% !important;
    }

    #wrapper div.time-results{
        width:60%;
        margin-bottom:30px;
    }
    #wrapper div.leyend2{
        width:477px;
        float:none;
        margin:0px auto;
        clear:both;
        padding: 0 45px;
        border-left: solid 1px #f39a01;
        border-right: solid 1px #f39a01;
    }
}


@media screen and (max-width:1024px) {
    .header {
        height: 70px;
    }

    .header img {
            height: 60px;
            top: 5px;
            left: 5px;
    }
    .header h1{
        font-size: 22px;
        line-height:70px;
    }

    #wrapper {
    min-height: calc(100% - 162px);
    }
    #wrapper .question-number {    
    /*top: 6px;*/
}

    .menu-index {
        margin-top: 30px;
    }
    .menu-index .niveles-indice.col-md-6 div {
    border:solid 1px #f5f5f5;
    }


    .logo-nivel {
        width: 80px;
        height: 80px !important;
        background-size: 80px;
    }

    .logo2 {
        background-position: 0 -80px;
    }

    .logo3 {
        background-position: 0 -160px;
    }

    .logo4 {
        background-position: 0 -240px;
    }

    .logo5 {
        background-position: 0 -320px;
    }

    .menu-index h3 {
        font-size: 18px;
    }

    .menu-index p {
        font-size: 14px !important;
        line-height: 15px !important;
        margin:8px 0 0 0 !important;
    }
    .menu-index .niveles-indice h3, .menu-index .niveles-indice p,
    .menu-index .niveles-indice h3, .menu-index .niveles-indice h3{
        padding-left:105px !important;
    } 

    .intro {
        margin: 10px 0 15px 0;
    }

    .instrucciones {
        margin-bottom: 30px !important;
    }
.modal-body .level-bars a div span {
        font-size: 9px;
    }
    .menu-index .niveles-indice div {        
        min-height: 110px;
    }
        
}

/**********************************************/

@media screen and (max-width:991px) {
    .menu-index .row div {
        margin: 0;
        padding: 12px 25px;
    }

    .mini-graph {
        padding:5% 15%;
        background-size:70% 70%;
    }
    .mini-graph:hover {
        background-size: 80% 110%;
    }
}

/*********************************************/

@media screen and (max-width:800px) {
    .header h1{
        /*font-size:26px;*/
        padding-left:70px;
    }
    #wrapper {
        width: 100% !important;
        padding:30px 3%;
    }
    .menu-index .niveles-indice div {
    padding: 10px 6px 10px 0px;    
    }
    .hero3-intro {
    text-align: center;
    width: 70%;
    margin:0 auto;
}
    .intro-test-media h3 {
    text-align:left;
}
    



/****/
.if-audio{
    padding-top:215px;
}

.media audio {
        width: 260px;
        margin: 0px auto;
        height: 180px;
        background: url(../img/audio.jpg) no-repeat top;
        background-size: 110px;
    }
.questions {    
    border-right: none;
}

.media p.media-texto {
    max-height: 190px !important;
}

    /*    */
        


.row.test-mq {
        position: relative !important;
        /*min-height: 650px !important;*/
        overflow:hidden;
        margin:0;
}
.row.test-mq .pregunta {
           font-size: 22px;
           text-align: center;
           width: 100%;
}
.row.test-mq .questions {
         width: 90%;
         margin:0 auto;
         float: none !important;
}
.row.test-mq .questions li a {
         padding: 9px 5px;
}

.row.test-mq .media {
         position: absolute;
         top: 0;
         width: 100%;
 }
#wrapper div.media{
        float:left;
}
    .row.test-mq.no-media{
        /*height:400px !important;*/
}
    .no-media h3{    
    top:auto !important;
}
    .no-media ul{
    bottom:auto !important;    
} 
    

    /****/

.send-results:hover {
    letter-spacing:0px;  
}

    .modal-body .level-bars-padre {
        padding-top: 45px;
    }

    .modal-body .level-bars a div span {
        font-size: 8px;
    }

    .level-bars a span {
        font-size: 12px;
    }

    .modal-header {
    }

    .modal-footer {
        padding: 5px !important;
    }
}

/*********************************************/

@media screen and (max-width:680px) {
    .header h1{
        font-size:18px;
    }

   
#wrapper .question-number{   
    width: 155px; 
}

#wrapper .question-number h2 {
    font-size: 12px;   
}
#wrapper .question-number h2.test-level span{
    font-size: 12px;
}

#wrapper .question-number p{
    font-size: 20px;
    line-height: 20px;
}
#wrapper .question-number span{
    top: 0;left: 95px;
    font-size: 23px; 
}

.results-padre {
        width: 96%;
    }
        .user-results, .user-results2 {
        width: 82%;
        margin:0 auto;
        height:192px;
        float: none;
    }
        .user-results2 h5 {    
        padding-right: 32%;
    }
        .table-results {
        margin: 20px 0 15px 0;
    }
        .level-bars a span {
        font-size: 10px;
    }
        .row.test-mq .pregunta{
        font-size: 18px;
    }

    .test-score3 {    
    width: 80%;
    }

    .test-score p {
        letter-spacing: 8px;
    }


}





/*LOADERS------------------------------------------------------------------------------------------------*/
.loading-app {
    background: rgba(242,195,111,.3);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.loading-app #gears {
       height:150px;
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    margin-top: -95px;
       box-shadow:inset 0 0 5px rgba(0,0,0,.2);
       overflow:hidden;
       z-index:20;
       background:#fff;
    border-top: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
}
.loading-app #gears .loading-message {
    position: absolute;
    top: 0;
    left: 10%;
    right: 250px;
    height: 150px;
}

.loading-app #gears .app-logo {
    width: 80px;
    height: 100px;
    background: url(../img/logo.png) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 25px;
    left: 60px;
}
.loading-app #gears .green {
    -webkit-animation: spin 2.4s linear infinite;
    -moz-animation: spin 2.4s linear infinite;
    animation: spin 2.4s linear infinite;
    width: 160px;
    position: absolute;
    right: 10px;
    bottom: 42%;
}
.loading-app #gears .gold {
    -webkit-animation: spiny 2.4s linear infinite;
    animation: spiny 2.4s linear infinite;
    width: 160px;
    position: absolute;
    top: 42%;
    right: 65px;
}
.loading-app h3 {
    position: absolute;
    bottom: 50%;
    margin-bottom: 5px;
    left: 215px;
    font-size: 22px;
    font-weight: 400;
    color: #7c7c7c;
}
.loading-app h3 strong {
    color: #f7a601;
    margin-right: 5px;
}

.loading-app p {
    position: absolute;
    top: 50%;
    margin-top: 5px;
    left: 215px;
    font-size: 13px;
    font-weight: 400;
    color: #999999;
}
.loading-app span[class^='dot-'] {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    color: #FB9200;
}

.loading-app .dot-01 {
}    
.loading-app .dot-02 {
    animation-delay: .2s;
}
.loading-app .dot-03 {
    animation-delay: .4s;
}    
.loading-app .dot-04 {
    animation-delay: .6s;
}    
.loading-app .dot-05 {
    animation-delay: .8s;
}    

/*.loading-page {
    position: absolute;
    top: 12px;
    left: 185px;
    z-index: 20;
}
.loading-page #outline {
    width:40px;
    height:40px;
    margin:0;
}
.loading-page #outline .circle {
    width:40px; height:40px;
    border-radius:50%;
    border-top: 2px solid rgba(34, 43, 52, 0.2);
    border-right: 2px solid rgba(34, 43, 52, 0.2);
    border-bottom: 2px solid rgba(34, 43, 52, 0.2);
    border-left: 2px solid #222b34;
    -webkit-animation: circle 0.5s infinite linear;
    animation: circle 0.5s infinite linear;
}*/

/*.loading-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: rgb(255, 216, 0);
}
.loading-page #outline {
    position: absolute;
    height: 150px;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -75px;
    background: rgba(255,255,255,0.85);
       box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
    border-top: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
}
.loading-page #outline .circle {
    width: 59px;
    height: 59px;
    background: url(../img/loading-page-bg.png) no-repeat 0 0;
    display: inline-block;
    position: absolute; 
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -45px;

}
.loading-page #outline .circle .axis {
    width: 59px;
    height: 59px;
    background: url(../img/loading-page-axis.png) no-repeat 0 0;
    -webkit-animation: circle 0.5s infinite linear;
    animation: circle 0.5s infinite linear;
}
.loading-page #outline .text {
    display:block;
    text-align: center;
    margin-top: 100px;
    color: #777;
    font-size: 13px;
}*/

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { transform: rotate(360deg); } 
}
@-webkit-keyframes spiny { 
    100% { -webkit-transform: rotate(-360deg); } 
}
@keyframes spiny { 
    100% { transform: rotate(-360deg);  } 
}
@-webkit-keyframes circle { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes circle { 
    100% { transform: rotate(360deg); transform:rotate(360deg); } 
}
@keyframes blink {
    0% {
      opacity: .2;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: .2;
    }
}
/*END LOADERS*/



/****time results con col md8 y col md4 para los h5*******/

/*.time-results{
    height:184px;
    margin-top:3px;
    border:solid 1px #E77801;
    border-radius:5px;
    padding:0;
    overflow:hidden;
}
.time-results div{
    padding:10px 20px 0 20px;
    color:#648;
}
.time-results div p{
    color:#648;
    text-transform:uppercase;
    font-weight:lighter;
    margin:0;
}
.time-results div span{
    color:#f39a01;
    font-size:42px;
    line-height:36px;
    font-weight:lighter;
    margin-left:120px;
    margin-right:5px;
}
.time-results div p span{
    color:#f39a01;
    font-size:18px;
    font-weight:600;
    margin:0 2px;
}
.time-results div:last-child{
   background:#E77801; 
   padding-bottom:20px;
   margin-top:15px;  
}
.time-results div:last-child *{
   color:#f3f3f3;  
   font-size:14px;
}
.time-results div:last-child p span{   
    font-size:20px;
}
.time-results div:last-child .nivel-recomendado{
    letter-spacing:2px;
}
.time-results div:last-child .nivel-recomendado span{  
    color:#fff;  
    font-size:48px;
    line-height:19px;
    font-weight:lighter;
}*/



/****time results con leyenda al lado y col md4*******/


.time-results{
    height:221px;
    margin-top:3px;
    /*width:265px;*/
    border:solid 1px #E77801;
    border-radius:5px;
    padding:0;
    overflow:hidden;
    position:relative;
}
.time-results div{
    padding:7px 12px 0 12px;
    color:#648;
    font-size:14px;
}
.time-results div p{
    color:#648;
    text-transform:uppercase;
    font-weight:lighter;
    margin:0;
    font-size:18px;
    text-align:center;
}
.time-results div p span{
    
}
.time-results div p span{
    color:#f39a01;    
    line-height:34px;
    display:inline-block;
    color:#f39a01;
    font-size:47px;
    font-weight:lighter;
    margin:18px 2px 0 2px;
}
.time-results div:last-child{
   background:#E77801; 
   padding-bottom:20px;
   padding-top:10px;
   margin-top:15px;  
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
}
.time-results div:last-child *{
   color:#f3f3f3;  
   font-size:20px;
   height:60px;
}
.time-results div:last-child p span{   
    font-size:20px;
    font-weight:bolder;
}
.time-results div:last-child .nivel-recomendado{
    letter-spacing:0px;
    margin-top:16px;
    text-align:right;
}
.time-results div:last-child .nivel-recomendado span{  
    color:#fff;  
    font-size:48px;
    line-height:15px;
    font-weight:lighter;
    margin-left:10px;
}



/*LOADING PAGE*/
.loading-page-2 {
    position: absolute;
    top: 50px;
    left: 150px;
    width: 50px;
    height: 50px;
}

@-webkit-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

.ball-scale-ripple-multiple {
  position: relative;
  -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
          transform: translateY(-25px); }
  .ball-scale-ripple-multiple > div:nth-child(0) {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }
  .ball-scale-ripple-multiple > div:nth-child(1) {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; }
  .ball-scale-ripple-multiple > div:nth-child(2) {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
  .ball-scale-ripple-multiple > div:nth-child(3) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .ball-scale-ripple-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    top: -2px;
    left: -26px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
            animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); }
/*END LOADING PAGE*/

.skip-button {
    width: 100px;
    margin: 0 auto;
    display: block;
}