/*
@viewport {
    max-width: 1024px;
    max-height: 574px;
    width:1024px;
    height:574px;
}*/

.mobile{
    display: none;
}
.preloader-appla{

    left:0;
    top:0;
    width:100%;
    height:0;
    padding-bottom: 56.25%;
    background-color: rgba(0,0,0,1);

    /*max-width: 1024px;*/

    position: relative;
    z-index: 999999;
}
.preloader{

    display: table-cell;
    vertical-align: middle;
    margin: auto;
}

html {
    overflow: hidden;
    width:100%;
    /*max-width:1024px;*/
    background-color: white;
    margin:0;
    padding: 0;

    font-family:"Unpack W00 Regular";
    text-transform: uppercase;
}
body {
    width:100%;
/*    max-width: 1024px;*/

    margin: 0;
    height: 0;
    font-size: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background-color: transparent;
    position:relative;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
#body-container{

    width:100%;
    height:100%;

}
.backgrounds{
    top:0;
    left:0;
    right:0;
    bottom:0;
    position: absolute;
    width:100%;
    height:100%;
}
.backgrounds .background {
    width:100%;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}

.backgrounds .background.active{
    opacity: 1;
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;

}

.page-containers{
    position: absolute;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    height: 100%;

}
.page{
    position: absolute;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    display: none;
    background-size: 100%;
}
.page.active{
    display: block;
}
.page.disabled{
    pointer-events: none;
}
.button{
   width: 36.62109375%;
    height:9%;
    background-image:url('../img/btt_long.png');
    background-size: 100%;
    position: absolute;
    margin: auto;
    top:85.554%;
    left:31.73828125%;
    color:white;
    cursor: pointer;
}
.no-touch .button:hover{
    color:black;
    background-image: url('../img/btt_long_on.png');
}
.button-inner{
    height:100%;
    display: table;
    width:100%;
}

.button p{

    margin: auto;
    height:100%;
    text-align: center;
    font-size: 3.3vw;
    vertical-align: middle;
    display: table-cell;
    
	


}
.start-button{
    opacity:0;
}
.intro-box{
    opacity:0;
    position: absolute;
    left:12.20703125%;
    top:45.818815331010452961672473867596%;
    height:37.630662020905923344947735191638%;
    width:75.5859375%;
    background-image: url('../img/start_bgd.png');
    background-size: 100%;
    text-align: center;
    color:white;
    line-height: 0.85;
    padding-top: 1.5%;
}
.intro_p{
    position: absolute;
    top:0;
    opacity: 0;
    left:19.140625%;
    width:80.859375%;
    height:83.449477351916376306620209059233%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('../img/intro1_p.png');
}
.intro-box h1{
    font-size:9vw;
}
.intro-box h2{
    font-size:5vw;
}
.intro-box h3{
    font-size:8vw;
}
.intro{
    background-image: url('../img/intro.jpg');
}
.intro2{
    background-image: url('../img/intro2.jpg');
}
.intro2_p{
    position: absolute;
    left:0;
    top:28.571428571428571428571428571429%;
    width:36.62109375%;
    height:69.68641114982578397212543554007%;
    background-image: url('../img/intro2_p.png');
    background-size: 100%;

}
.intro2_bubble{
    position: absolute;
    left:23.14453125%;
    top:3.310104529616724738675958188153%;
    width:72.94921875%;
    height:77.700348432055749128919860627178%;
    background-image: url('../img/intro2_bubble.png');
    background-size: 100%;
}
.v-centered{
    display: table;
    width:100%;
    height:100%;
}
.h-centered{
    display: table-cell;
    vertical-align: middle;
}
.intro2_bubble p{

    float: right;
    text-align: center;
    font-size: 6.4vw;
    padding: 1% 5% 0;
    width: 73%;
    line-height: 0.9;
}


.quiz{
    background-image:url('../img/game.jpg');
    background-size: 100%;
}
.question{
    position: absolute;
    left:23.2421875%;
    top:10.801393728222996515679442508711%;
    width:53.61328125%;
    height:26.306620209059233449477351916376%;
    background-image: url('../img/question_bgd.png');
    background-size: 100%;

}
.mojo{
    position: absolute;
    background-image: url('../img/mojo1.png');
    background-size: 100%;

    left:3.41796875%;
    top:48.954703832752613240418118466899%;
    width:36.1328125%;
    height:47.735191637630662020905923344948%;
}
.mojo.a1{

    background-image: url('../img/mojo3.png');
    left:0;
    top:27.700348432055749128919860627178%;
    width:30.17578125%;
    height:69.51219512195121951219512195122%;
}

.mojo.a2{
    background-image: url('../img/mojo2.png');
    left:0.78125%;
    top:27.700348432055749128919860627178%;
    width:54.296875%;
    height:71.080139372822299651567944250871%;

}
.counter{
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    background-image: url('../img/c0.png');
    left:43.65234375%;
    top:83.623693379790940766550522648084%;
    width:12.3046875%;
    height:11.324041811846689895470383275261%;
}
.answers-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top:42.160278745644599303135888501742%;


}
.question p{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 3.3vw;
    padding: 1% 5% 0;

}

.button-answer{
    cursor:pointer;
    width:40.52734375%;
    left:29.78515625%;
    margin: 1% auto;
    height: 16.202090592334494773519163763066%;
    background-image: url('../img/q2_bgd.png');
    background-repeat: no-repeat;
    background-size: 100%;
    color:white;
}
.button-answer.disabled{
    pointer-events: none;
    background-image: url('../img/q3_bgd.png');
}
.no-touch .button-answer:hover{
    background-image: url('../img/q1_bgd.png');
}
.button-answer p{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 3.3vw;
    padding: 1% 5% 0;
}
.mojo p{
    text-align: center;
    font-size: 3.3vw;
    padding: 1% 5% 0;
    display: table-cell;
    vertical-align: middle;
}
.a1 .centering{
    width: 79%;
    height: 46%;

 }
.a2 .centering{
    width:42%;
    height:45%;
}
.summary_p{
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
}
.summary_p.p1{
    top:0;
    left:0;
    width:51.07421875%;
    height: 95.121951219512195121951219512195%;
    background-image: url('../img/summary_p1.png');

}
.summary_p.p2{
    top:32.578397212543554006968641114983%;
    left:13.671875%;
    width:48.046875%;
    height: 63.588850174216027874564459930314%;
    background-image: url('../img/summary_p2.png');

}
.summary_p.p3{
    top:13.240418118466898954703832752613%;
    left:0;
    width:46.77734375%;
    height: 77.526132404181184668989547038328%;
    background-image: url('../img/summary_p3.png');

}
.summary_appla{
    position: absolute;
    width:43.1640625%;
    height:69.163763066202090592334494773519%;
    left:48.92578125%;
    top:13.588850174216027874564459930314%;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 4%;
    color:white;
}
.summary_appla .h3{
    font-size: 3.4vw;
}
.summary_appla .h4{
    font-size: 6vw;
}
.summary_appla .h5{
    font-size: 3.1vw;
}
.summary_appla.p1{
    background-image: url('../img/summary_appla1.png');
}
.summary_appla.p2{
    background-image: url('../img/summary_appla2.png');
}
.summary_appla.p3{
    background-image: url('../img/summary_appla3.png');
}