/*
  body {
    padding-top: 54px;
  }
  @media (min-width: 992px) {
    body {
      padding-top: 56px;
    }
  }
  */
  
  /*
  body::-webkit-scrollbar { width: 0 !important }
  body { -ms-overflow-style: none; }
  body { overflow: -moz-scrollbars-none; }
  */



@font-face {
    font-family: 'Montserrat-SemiBold';
    src:url('../assets/fonts/Montserrat-SemiBold.ttf.woff') format('woff'),
        url('../assets/fonts/Montserrat-SemiBold.ttf.svg#Montserrat-SemiBold') format('svg'),
        url('../assets/fonts/Montserrat-SemiBold.ttf.eot'),
        url('../assets/fonts/Montserrat-SemiBold.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

body{
    font-family: Montserrat-SemiBold!important
}


body.modal-open .modal.show {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

.question_modal label{
    display: block;
}

.question_modal .col-md-6{
    margin-bottom: 10px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff!important;
    opacity: 0.4!important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff!important;
    opacity: 0.4!important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff!important;
    opacity: 0.4!important;
}

body{
    background-color: #0062e6;
}
  
*{margin: 0 auto;}
.main{
	/*min-height: 100vh;
	background-color: #0062e6;*/
	background-size: 100% 100%;
	position: relative;
}
.main#main-2{
    
}

#the_play_zone{
    /*width: 3024px;
    height: 2268px;
    position: relative;
    */
    margin: 0 auto;
    display: none;
}

.top-main{
	/*padding-top: 30px;*/
}
.content-main{
    /*
	position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);*/
    color: #fff;
    padding-top: 40px;
}
.content-main h1{
    text-transform: uppercase;
    margin: 0 0 40px;
    font-weight: bold;
}
.content-main p{
	font-size: 22px;
    margin: 0;
    line-height: 28px;
}
.content-main .row-btn{
	margin-top: 50px;
}
.content-main .row-btn a.btn{
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	line-height: 48px;
	border-radius: 4px;
	text-align: center;
	width: 300px;
	max-width: 100%;
}
.content-main .row-btn a.btn.btn-start{
	background: #ff0000;
	color: #fff;
}
.content-main .row-btn a.btn.btn-leader{
	background: #fff;
	color: #051039;
}
.bottom-main{
	position: fixed;
	bottom: 10px;
	width: 100%;
	background: #051039;
	z-index: 9;
	color: #fff;
    display: none;
}
.bottom-main .col-bottom{
	padding: 20px;
    border-right: 4px solid #fff;
}
.bottom-main .list-icon{
	list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.bottom-main .list-icon li{
	display: inline-block;
	margin-right: 20px;
    position: relative;
}
.bottom-main .list-icon li a{
	display: block;
	position: relative;
    cursor: default;
}
.bottom-main .list-icon li a.icon-checked:before{
    content: "\f058";
    font: normal normal normal 34px/1 FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dff1fc;
}
.bottom-main .list-icon li a img{
	max-height: 50px;
}

.bottom-main .list-icon li .the_clicked_checker{
    position: absolute;
    top: 20px;
    right: -10px;
    display: none;
}

.bottom-main .list-icon li.object_clicked .the_clicked_checker{
    display: block;
}


.bottom-main .col-bottom h3{
	font-size: 30px;
	color: #fff;
	margin: 0;
	font-weight: bold;
}

.bottom-main .col-bottom:last-child{
	border: none;
}
.bottom-main .col-bottom p{
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: 0;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
.bottom-main .col-bottom p span{
	display: block;
	font-size: 42px;
}

#main-2{
    display: none;
}
  

.question_modal .modal-dialog .modal-content{
    background-color: #DFF2FD;
}


  
.btn.btn-primary{
    border: solid 1px #051039;
    background-color: #051039;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: bold;
}

.btn.btn-primary:hover{
    border: solid 1px #051039;
    background-color: #051039;
}

.the_icon img{
    width: 60px;
}

.modal-header{
    border-bottom: none;
}

.modal-footer{
    border-top: none;
}

.the_question_headline{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 40px;
}
.the_question_title{
    font-weight: bold;
    line-height: 20px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.question_correct{
    color: #B2CC25;
}

.question_incorrect{
    color: #D40504;
}

.the_object_element{
    position: absolute;
    cursor: pointer;
}

.the_object_element img{
    width: 100%;
}

.the_object_element_clicked{
    border: solid 1px #fff;
}

.the_submit_action_zone{
    margin-top: 40px;
}


.the_correct_line{
    color: #ABC703;
    font-weight: bold;
}
.the_incorrect_line{
    color: #D40504;
    font-weight: bold;
}
.the_dismiss_action{
    display: none;
}
.the_score_total{
    font-size: 200px;
    font-weight: normal;
    line-height: 150px;
    margin-bottom: 100px;
}

.the_timeup_headline{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
}

#the_timeup_modal .modal-body{
    padding-top: 40px;
}
.the_score_label{
    font-weight: bold;
}
.the_leaderboard_direction{
    padding-bottom: 30px;
}

#the_dun_info_modal .modal-body{
    padding-top: 40px;
    color: #ffffff;
}

#the_dun_info_modal .modal-dialog .modal-content{
    background-color: #051039;
}

#the_dun_info_modal label{
    color: #fff;
    margin-bottom: 0;
}

#the_dun_info_modal input[type="text"], #the_dun_info_modal input[type="email"]{
    border: none;
    border-bottom: solid 1px #fff;
    background-color: transparent;
    border-radius: 0px;
    color: #fff;
    padding-left: 0;
}

#the_submit_player_action{
    margin-top: 50px;
    margin-bottom: 50px;
}

#the_dun_info_modal .form-control{
    min-width: 400px;
}

.the_additional_information{
    display: none;
}

.the_form_mess{
    display: none;
}

#the_dun_info_modal .btn-primary{
    border-color: #FF0000;
    background-color: #FF0000;
}
.the_question_area{
    display: none;
}
h4.the_top_healine{
    text-transform: uppercase;
    font-weight: normal;
    font-size: 30px;
}

.the_second_screen_information .the_top_healine{
    margin-bottom: 60px;
}

.the_screen_information{
    display: none;
}

.the_screen_information .form-control{
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding-left: 0;
    border-bottom: solid 1px #fff;
    color: #fff;
}

.the_btn_action{
    margin-left: 0;
}
.the_link_action{
    outline: none;
    color: #fff;
    text-decoration: underline;
    line-height: 29px;
    display: block;
}
.the_link_action:hover{
    color: #fff;
    text-decoration: underline;
    line-height: 29px;
    display: block;
}

#the_tos_link{
    margin-bottom: 14px;
    margin-top: 100px;
}

.the_label_action{
    margin-left: 10px;
    vertical-align: text-top;
    display: inline;
}

.content-main .the_desc_line{
    margin: 30px 0 80px 0;
    font-weight: bold;
}

.the_picked_object{
    width: 24px;
    height: 24px;
    background-color: #DFF1FC;
    border-radius: 50%;
    position: absolute;
    right: -8px;
    line-height: 24px;
    top: 22px;
    color: #051039;
    font-weight: bold;
    text-align: center;
    display: none;
}

.bottom-main .list-icon li.object_clicked .the_picked_object{
    display: block;
}

.the_object_coundowner{
    display: none;
}
.the_dun_area{
    display: none;
}


.the_dun_headline{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 32px;
}

.the_submit_action_zone_dun{
    margin-top: 40px;
}

.btn_submit_dun{
    background-color: #ff0000;
    color: #fff;
    font-weight: bold;
    display: none;
}


#the_object_coundowner_dun_hidden{
    display: none;
}
#the_object_coundowner_hidden{
    display: none;
}


#the_play_zone_visible{
    width: 3024px;
    height: 2268px;
}

#the_play_zone_visible img {
    display: block;
    width: 3024px;
    height: 2268px;
}

#the_play_zone_dragable{
    overflow: hidden;
}

body{
    overflow: hidden;
    overflow-y: auto;
}

.ib-main-wrapper{
    width: 100%;
    overflow: hidden;
    outline: none;
    /*height dynamic*/
}
.ib-main{
    position: relative;
    width: 3024px;
	height: 2268px;
	background-repeat: no-repeat;
}

.the_direction_arrow{
        position: absolute;
    z-index: 1;
    color: #fff;
    font-size: 70px;
    text-shadow: 1px 1px 6px #051039;
    cursor: pointer;
}

.the_direction_arrow.fa-pause{
    left: 50%;
    top: 50%;
    display: none;
}

.the_direction_arrow.fa-chevron-up{
    left: 47%;
    top: 0;
}

.the_direction_arrow.fa-chevron-down{
    left: 47%;
    bottom: 22%; 
}

.the_direction_arrow.fa-chevron-left{
    left: 0%;
    top: 44%;
}
.the_direction_arrow.fa-chevron-right{
    right: 0%;
    top: 44%;
}
#total_time_spent{
    display: none;
}

#the_bonus_time_correct{
    width: 120px;
    height: 120px;
    position: absolute;
    background-color: #DFF2FD;
    top: -140px;
    border-radius: 50%;
    border: solid 4px #051039;
    right: 60px;
    font-size: 52px;
    color: #051039;
    text-align: center;
    line-height: 106px;
    font-weight: bold;
    display: none;
}

.modal-backdrop{
    z-index: 1;
}

#the_entering_leaderboard_action{
    min-width: 240px;
}

#the_tos_modal .modal-header h2{
    width: 100%;
}

#the_dun_info_modal .the_icon{
    font-weight: bold;
    color: #FFD788;
    font-size: 80px;
}

.unsubscribe_mod_button{
    position: fixed;
    left: 10px;
    bottom: 10px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 14px;
    font-weight: normal;
}

#unsubscribe_mod .modal-footer{
    display: block;
    width: 100%;
}

#unsubscribe_mod .modal-footer p{
    line-height: 16px;
    margin-top: 20px;
    font-size: 15px;
}

#unsubscribe_mod label{
    line-height: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

.the_message_placeholder_text{
    font-size: 14px;
    line-height: 16px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-color: rgba(205, 92, 92, 0.27);
    color: indianred;
}

.the_message_placeholder_text.ok_message{
    border-color: rgba(34, 139, 34, 0.4);
    color: forestgreen;
}

#unsubscribe_mod ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #000!important;
}

#unsubscribe_mod :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #000!important;
}

#unsubscribe_mod ::-ms-input-placeholder { /* Microsoft Edge */
    color: #000!important;
}
.form-control:focus{
    box-shadow: none;
}

#unsubscribe_mod .modal-body{
    display: block;
    width: 100%;
}

.the_option_label p{
    margin: 0;
}

.the_object_core_found {
    width: 30px;
    height: 30px;
    background-color: #051039;
    border-radius: 50%;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    display: none;
    position: absolute;
    left: 50%;
}

.the_object_core_found_active{
    display: block;
}

.the_left_side{
    position: absolute;
    left: 0;
    top: 160px;
    width: 30px;
}

.the_right_side{
    position: absolute;
    right: 0;
    top: 160px;
    width: 30px;
}

.the_airplane_icon{
    width: 50px;
    margin-bottom: -30px;
}

.the_airplane_icon img{
    width: 100%;
}

.top_triangle{
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-top-width: 60px;
    border-bottom-width: 0px;
    border-right: 30px solid #E0F2FE;
}

.bottom_triangle{
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 60px;
    border-top-width: 0px;
    border-left: 30px solid #E0F2FE;
}

.tub_side{
    width: 100%;
    height: 250px;
    background-color: #E0F2FE;
}

.unactive_object{
    pointer-events: none;
}

.invisible_object{
    visibility: hidden;
}

.the_object_element_2 img{
    width: 695px;
}

.the_four_screen_information{
    display: none;
}

.the_ready_to_play_label{
    text-transform: uppercase;
    margin-bottom: 40px;
    font-size: 24px;
}

.the_ready_to_play_sub {
    font-size: 18px!important;
    margin-bottom: 20px!important;
    line-height: 22px!important;
}


/* Extra small devices (portrait phones, less than 576px)
/* No media query since this is the default in Bootstrap

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    
    h4.the_top_healine{
        font-size: 20px;
    }
    
    .content-main{
        padding-bottom: 50px;
    }
    
    .content-main h1{
        font-size: 32px;
    }
    
    .content-main p {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 30px;
    }
    
    .the_second_screen_information .the_top_healine {
        margin-bottom: 22px;
        font-size: 16px;
    }
    
    #the_tos_link {
        margin-top: 0px;
    }
    
    .the_desc_line{
        margin: 20px 0 10px 0;
    }
    
    .content-main .row-btn {
        margin-top: 8px;
    }
    
    .bottom-main .list-icon li a img{
        max-height: 20px;
    }
    
    .bottom-main .list-icon li{
        margin-right: 10px;
    }
    
    .bottom-main .col-bottom {
        padding: 12px 0px;
    }
    
    .bottom-main .col-bottom p span {
        display: block;
        font-size: 20px;
    }
    
    .the_direction_arrow{
        font-size: 26px;
    }
    
    #the_bonus_time_correct {
        width: 70px;
        height: 70px;
        top: -88px;
        right: 8px;
        font-size: 26px;
        line-height: 64px;
    }
    
    .the_question_headline {
        font-size: 28px;
        margin-top: -12px;
    }
    
    .the_question_title {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .the_picked_object {
        width: 12px;
        height: 12px;
        right: -10px;
        line-height: 10px;
        top: 6px;
        font-size: 10px;
    }
    
    #the_dun_info_modal .modal-body{
        padding-top: 0;
    }
    
    .the_dun_headline{
        font-size: 28px;
    }
    
    #the_dun_info_modal .modal-dialog {
        margin-top: 100px;
    }
    
    #the_tos_modal .modal-header h2 {
        width: 100%;
        text-align: left;
        font-size: 24px;
    }
    
    .the_remaining_item_label{
        display: none;
    }
    
    .bottom-main .col-bottom p{
        font-size: 12px;
    }
    
    .the_first_screen_infomation{
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .the_second_screen_information{
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .the_third_screen_information{
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .the_left_side {
        left: -3px;
        transform: scale(0.8);
    }
    
    .the_right_side {
        right: -3px;
        transform: scale(0.8);
    }
    
    
    #the_entering_leaderboard_action {
        width: 100%;
        white-space: normal;
    }
    
    .the_object_coundowner{
        transform: scale(0.7);
    }
    
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .bottom-main .col-bottom p{
        font-size: 16px;
    }
    
    .bottom-main .col-bottom h3{
        font-size: 18px;
    }
    
    .bottom-main .col-bottom p span{
        font-size: 22px;
    }
    .the_direction_arrow.fa-chevron-down{
        bottom: 17%;
    }
    .the_direction_arrow.fa-chevron-left, .the_direction_arrow.fa-chevron-right{
        top: 40%;
    }
    
    .bottom-main .list-icon li a img{
        max-height: 30px;
    }
    .the_picked_object{
        width: 18px;
        height: 18px;
        font-size: 14px;
        line-height: 18px;
        top: 8px;
        right: -16px;
    }
    
    .the_first_screen_infomation{
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .the_second_screen_information{
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .the_third_screen_information{
        padding-left: 20px;
        padding-right: 20px;
    }

    
    h4.the_top_healine{
        font-size: 28px;
    }
    
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .the_direction_arrow.fa-chevron-down {
        bottom: 21%;
    }
}

/** ip5 **/
@media only screen and (min-device-width : 320px) and (max-device-width : 320px) {
    .content-main p{
        font-size: 12px;
        line-height: 18px;
    }
    .content-main h1 {
        font-size: 26px;
        
    }
}


@media only screen and (min-device-width : 481px) and (max-device-width : 767px) {
    .the_remaining_item_label{
        display: none;
    }
    .bottom-main .col-bottom {
        padding: 10px 2px;
    }
    .bottom-main .col-bottom p{
        font-size: 14px;
    }
    
    .bottom-main .list-icon li a img {
        max-height: 32px;
    }
    .the_first_screen_infomation{
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .the_second_screen_information{
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .the_third_screen_information{
        padding-left: 40px;
        padding-right: 40px;
    }
}