body {
    font-family:'Montserrat',Arial;
    font-weight:400;
    font-size:16px;
    cursor: url('../images/cursor.cur') 44 28, default;
    color:#fff;
    text-align: left;
}

.choice .option_box:active, .nav_btn:active, #made_by_you_btn:active {
    cursor: url('../images/cursor_3.cur') 44 28, pointer;
}


#launch_first_screen {
    position:absolute;
    z-index:20001;
    width:100%;
    top:20px;
    text-align: center;
    display:none;
}
.launch_version #launch_first_screen {
    display:block;
}
  
#launch_first_screen img {
    width:699px;
    height:173px;
}
#launch_first_screen img.logo {
    width:660px;
    height:321px;
    margin-top: -55px;
}
#launch_first_screen #launch_btn {    
    display:block;
    cursor: url('../images/cursor_2.cur') 44 28, pointer;
    width:348px;
    height:183px;
    position: relative;
    top: -100px;
    left:0px;
    margin: 0px auto;
    background-image:url('../images/launch/click_to_play.png');
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; 
}
#launch_first_screen #launch_btn:hover {
    background-image:url('../images/launch/click_to_play_2.png');
}

#top_logo {
    display:none;
    width:463px;
    height:225px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -33px;
}


#app {
    position:relative;
    width:860px;
    height:545px;
    top:0px;
    left:0px;
    background-image:url('../images/bg.jpg');
    overflow:hidden;
    display:block;
}


#your_choice {
    position:absolute;
    z-index:10002;
    width:100%;
    height:124px;
    top: 15px;
    text-align: center;
}    
#your_choice img {
    width:750px;
    height:124px;
}
.launch_version #your_choice {
    display:none;
    bottom: 10px;
    top:auto;
}

#made_by_you {
    position:absolute;
    z-index:10001;
    width:100%;
    height:297px;
    top:100px;
    text-align: center;
    display:none;
}    
#made_by_you img {
    width:750px;
    height:297px;
}

#made_by_you img.launch_version {
    width:663px;
    height:155px;
}


.launch_version #made_by_you {
    top: 130px;
}

#trailer_end_btn,
#trailer_btn,
#made_by_you_btn {
    display:block;
    cursor: url('../images/cursor_2.cur') 44 28, pointer;
    width:374px;
    height:207px;
    position: relative;
    top: -145px;
    left:0px;
    margin: 0px auto;
    background-image:url('../images/more_questions_arrow.png');
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; 
}
#made_by_you_btn:hover {
    left:20px;
}


#trailer_btn,
.launch_version #made_by_you_btn {
    display: inline-block;
    top: -30px;    
}

#trailer_btn {
    width:355px;
    height:194px;
    top: -36px;
    background-image:url('../images/launch/view_trailer.png');
}
#trailer_btn:hover {
    background-image:url('../images/launch/view_trailer_2.png');
}

#final_msg,
#launching_msg {
    position:absolute;
    z-index:10003;
    width:100%;
    height:500px;
    top: 6px;
    text-align: center;
    display:none;
}



#final_msg {
    display:none;    
    top:130px;
}

#trailer_end_btn {
    width:434px;
    height:203px;
    top:-33px;
    background-image:url('../images/launch/view_trailer_end.png');
}
#trailer_end_btn:hover {
    background-image:url('../images/launch/view_trailer_end_2.png');
}




.container {
    position: relative;
    overflow:hidden;
    width:700%;
    height:100%;
    left: 0%;
}

.launch_version .container {
    display:none;
}

.nav_btn {
    display:block;
    width:241px;
    height:219px;
    position:absolute;
    z-index: 55555;
    right:-10px;
    top:50%;
    margin-top:-85px;
    cursor: url('../images/cursor_2.cur') 44 28, pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;    
    display:none;
}

.nav_btn:hover {
    right:-30px;
}


.nav_btn#next_btn {
    background-image:url('../images/next_btn.png');
}
.nav_btn#next_q_btn {
    background-image:url('../images/next_q_btn.png');
}
.nav_btn#finish_btn {
    background-image:url('../images/finish_btn.png');
}
    






.question_item {
    position: relative;
    top: 150px;
    width:860px;
    float: left;
    text-align:center;
}

/*.question_item:not(:first-child) {
    display:none;
}*/


.question_item .question {
    font-size:1.9em;
    margin-bottom:30px;    
}

.choice .option_box {
    position:relative;
    width:120px;
    height:160px;
    display:inline-block;
    margin:0px 77px;
        
    cursor: url('../images/cursor_2.cur') 44 28, pointer;
}

.choice .option_box:before {
    content:'';
    position:absolute;
    display:block;
    z-index:100;
    width:186px;
    height:228px; 
    top: -33px;
    left: -33px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; 
}

.choice .option_box.blue:before {
    background-image:url('../images/blue_frame.png');
}

.choice .option_box.blue.selected:before,
.choice .option_box.blue:hover:before {
    background-image:url('../images/blue_frame_2.png');
}

.choice .option_box.purple:before {
    background-image:url('../images/purple_frame.png');
}
.choice .option_box.purple.selected:before,
.choice .option_box.purple:hover:before {
    background-image:url('../images/purple_frame_2.png');
}


.choice .option_box:after {
    content:attr(data-answer);
    text-transform:uppercase;
    font-size: 0.9em;
    box-sizing:border-box;
    position:absolute;
    display:block;
    z-index:200;
    width:186px;
    height:80px; 
    line-height: 81px;
    left: -35px;
    top: 152px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; 
}

.choice .option_box.blue:after {
    background-image:url('../images/blue_text_box.png');
}
.choice .option_box.selected.blue:after,
.choice .option_box:hover.blue:after {
    background-image:url('../images/blue_text_box_2.png');
}
.choice .option_box.purple:after {
    background-image:url('../images/purple_text_box.png');
}
.choice .option_box.selected.purple:after,
.choice .option_box:hover.purple:after {
    background-image:url('../images/purple_text_box_2.png');
}


.percent_bar {
    width:100%;    
    position:absolute;
    bottom:0px;
    overflow: hidden;
    display:none;
    font-size: 2.8em;
}

.showResults .percent_bar {
    display:block;
}

.percent_bar.above {
    overflow: visible;
    font-size:1.3em;
}
.percent_bar:before {
    content:attr(data-perc);   
    bottom: 6px;
    text-align:right;
    box-sizing: border-box;
    color:#fff; 
    width: 100%;
    position: relative;
    font-size: inherit;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s; 
}

.percent_bar.above:before {
    bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.purple .percent_bar {
    background-color:#cc33ff;
}
.blue .percent_bar {
    background-color:#33ccff;
}



footer {
    position:absolute;
    bottom:0;
    width:100%;
    background-color:rgba(0,0,0,0.6);
    height:40px;
    padding:5px 10px;
    text-align:right;
    box-sizing:border-box;
    display:none;
}

footer img {
    /*margin-left:10px;*/
}


.launch_version footer {
    display:block;
    bottom:-40px;
}