html, body {width: 100%;height: 100%;}

body {
    font-family: 'Varela Round', sans-serif;
    margin: 0px;
    padding: 0;
    color: #fff;
}

h1{font-size: 8em; margin: 50px 0 50px 0;}
h2{font-size: 4em; margin: 50px 0 50px 0;}
h3{font-size: 2em;}

/*Mobiscroll Custom*/
/*.mbsc-wdg .mbsc-wdg-c {font-size: 16px;}
.mbsc-fr-overlay {background: rgba(0,0,0,.7) !important;}
.mbsc-ios.mbsc-fr-top .mbsc-fr-popup {max-width: 800px; margin: 0 auto 50px auto; position:relative;}
.mbsc-ios.mbsc-fr-center .mbsc-fr-popup {max-width: 400px;}
.mbsc-fr-btn-c .mbsc-fr-btn{color: #ff0000;}*/

/*Mobiscroll Custom*/
.mbsc-popup-overlay {background: rgba(0,0,0,.7) !important;}
.mbsc-ios.mbsc-popup-header {border-bottom: 1px solid #ccc;}

.loader_holder {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background-color: #004994;color: #fff;}
.loader_ring {width: 200px;height: 200px; margin: 0 auto;position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%);border: 5px solid #fff;border-radius: 50%;-webkit-animation: borderScale 1s infinite ease-in-out;animation: borderScale 1s infinite ease-in-out;}
.loader_text {font-size: 2em; position: absolute;  top: 50%;  left: 50%;  margin-right: -50%;  transform: translate(-50%, -50%);}

.modal_body input, textarea{font-family: sans-serif;font-size: 1.1em; border-radius: 3px; background: #fff; width: 100%; padding: .25em .67em; border: 0; min-height: 2.5em; box-sizing: border-box;}
.modal_simple_text{font-size: 1.1em; text-align: center; margin: 20px 0 20px 0;}
.modal_status{text-align:center; margin-top: 20px; color: #ff6d00;}

.d_n{display:none;}
.t_a_c{text-align:center;}
.f_l{float:left;}
.f_l_q{float:left;width:25%;}
.f_l_h{float:left;width:50%;}
.paragraph {margin-bottom: 40px;}
.clear{clear:both;}

.loader {border: 8px solid #f7f7f7; border-top: 8px solid #2196f3; border-bottom: 8px solid #2196f3; border-radius: 50%; width: 50px; height: 50px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; position: fixed; top: 0px; left: 50%; margin: -40px 0 0-25px; z-index: 999999;}
.message_popup {position: fixed;z-index: 100000;margin: auto;top: 0;right: 0;left: 0;width: 7em;background: white;bottom: auto;text-align: center;font-size: 1.2em;padding: 5px;border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);}

.item_heading{margin-bottom:0px;}

.container {width: 100%; height: 100%;top: 0px;left: 0px;}

.centered{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.game_container {width: 100%; height: 100%;top: 0px;left: 0px;position: relative;overflow: hidden; text-shadow: #00498a 2px 2px;}

.score{color: white; position: absolute; left: 5px; top: 5px; font-size: 2em;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.menu{color: white; position: absolute; right: 5px; top: 5px;cursor: pointer;}
.menu_holder{text-align:center; margin-bottom: 20px;}
.menu_heading{padding: 5px 0 5px 0; font-weight:bold; display:block;}
.menu_bg_img_holder{display: inline-block; padding: 5px; box-sizing: border-box; width: 25%}
.menu_bg_img{width: 100%; cursor: pointer;}

.welcome {color: #fff;text-align:center;width: 80%;}
.settings_status {color: red;}

.verse_holder {text-align:center; width: 80%; font-size: 100px;}
.verse_data {line-height: 1.45; color: #fff;}
.verse_info {margin-top: 50px;}
.verse_link {color: #56ff00; text-decoration: none;}

.background {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -100;
    width: 100%;
    height: 100%;
    background-color: #162d63;
    background-image: url(/images/clouds.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.verse-word-holder{border-bottom: 4px solid #fff;}
.verse-word-hidden{visibility:hidden;display: inline-block;}
.answer_letters_hidden {color:rgba(0,0,0,0); border-bottom: 4px solid #fff;}

.answer_fall_flat{
    -webkit-animation: fall_flat infinite linear;
    -moz-animation: fall_flat infinite linear;
    -o-animation: fall_flat infinite linear;
    animation: fall_flat infinite linear;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}
.answer_fall_spin_r {
    -webkit-animation: spin_r infinite linear;
    -moz-animation: spin_r infinite linear;
    -o-animation: spin_r infinite linear;
    animation: spin_r infinite linear;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}
.answer_fall_spin_l {
    -webkit-animation: spin_l infinite linear;
    -moz-animation: spin_l infinite linear;
    -o-animation: spin_l infinite linear;
    animation: spin_l infinite linear;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}
.answer_fall_upside_down {
    -webkit-animation: fall_upside_down infinite linear;
    -moz-animation: fall_upside_down infinite linear;
    -o-animation: fall_upside_down infinite linear;
    animation: fall_upside_down infinite linear;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}
.answer_fall_s1 {
    -webkit-animation-duration: 10s;
    -moz-animation-duration: 10s;
    -o-animation-duration: 10s;
    animation-duration: 10s;
}
.answer_fall_s2 {
    -webkit-animation-duration: 7s;
    -moz-animation-duration: 7s;
    -o-animation-duration: 7s;
    animation-duration: 7s;
}
.answer_fall_s3 {
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -o-animation-duration: 5s;
    animation-duration: 5s;
}
.answer_letters_reversed {
    unicode-bidi:bidi-override;
    direction:rtl;
}
.answer_letters_flash {
    -webkit-animation: flash 2s infinite linear;
    -moz-animation: flash 2s infinite linear;
    -o-animation: flash 2s infinite linear;
    -ms-animation: flash 2s infinite linear;
    animation: flash 2s infinite linear;
}

.c_score_correct {color: #56ff00;}
.c_score_wrong {color: #ff1800;}
.c_score_clicked {color: #7d05ad;}
.c_answer {background-color: rgba(68, 68, 68, 0.61);}
.c_answer_correct {background-color: rgba(86, 255, 0, 0.28);}
.c_answer_wrong {background-color: rgba(255, 24, 0, 0.28);}
.c_success{color: #56ff00;}
.c_error{color: #ff1800;}

.ballon {
 display: none;   
 position: absolute;
 opacity: 1.0;
 overflow: hidden;
 border-radius: 5px;
 padding: 5px 10px 5px 10px;
 text-align: center;
 color: #fff;
 text-shadow:none;
 font-size: 2em;
}
.wrong_ballon {background-color: #ff3c00;}
.correct_ballon {background-color: #56ff00;}

a{color: #fff; text-decoration:none;}
a.poweredby{display:block; padding-top: 5px; color: #fff;}
a.button_modal{border: 1px solid #d9d9d9;color: #2196F3;background:#fff;border-radius: 3px;margin: 8px;width: 90%;box-sizing: border-box;line-height: 1em;padding: 0.5em 2em;display: inline-block;}

.button_play{
    font-size:2em;
    border: 2px solid #fff;
    line-height: 2em;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    white-space: nowrap;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 0 rgba(243,243,243, 0.4);
    box-sizing:border-box;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.27);
    text-decoration: none;
}
.button_play:hover {background-color:rgba(243,243,243, 0.4);}
.button_pulse{animation: pulse 2s infinite;}
.button_answer{
    font-size:2.5em;
    border: 2px solid #fff;
    line-height: 2em;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    white-space: nowrap;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 0 rgba(243,243,243, 0.4);
    box-sizing:border-box;
    text-shadow:none;
    display: inline-block;
    text-align: center;
    opacity: 0;
    margin: 10px 30px 10px 30px;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both}

.bounceInDown {-webkit-animation-name: bounceInDown;animation-name: bounceInDown;}
.bounceOutUp {-webkit-animation-name: bounceOutUp;animation-name: bounceOutUp;}
.fadeIn {-webkit-animation-name: fadeIn;-moz-animation-name: fadeIn;-o-animation-name: fadeIn;-ms-animation-name: fadeIn;animation-name: fadeIn;}

@-webkit-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}
@-o-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}
@-moz-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}
@-ms-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@-webkit-keyframes pulse {
  0% {    -webkit-box-shadow: 0 0 0 0 rgba(243,243,243, 0.4);  }
  70% {      -webkit-box-shadow: 0 0 0 10px rgba(243,243,243, 0);  }
  100% {      -webkit-box-shadow: 0 0 0 0 rgba(243,243,243, 0);  }
}
@keyframes pulse {
  0% {    -moz-box-shadow: 0 0 0 0 rgba(243,243,243, 0.4);box-shadow: 0 0 0 0 rgba(243,243,243, 0.4);  }
  70% {      -moz-box-shadow: 0 0 0 10px rgba(243,243,243, 0);      box-shadow: 0 0 0 10px rgba(243,243,243, 0);  }
  100% {      -moz-box-shadow: 0 0 0 0 rgba(243,243,243, 0);      box-shadow: 0 0 0 0 rgba(243,243,243, 0);  }
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@-webkit-keyframes bounceInDown {
    0%,100%,60%,75%,90% {        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);        animation-timing-function: cubic-bezier(0.215,.61,.355,1)    }
    0% {        opacity: 0;        -webkit-transform: translate3d(0,-3000px,0);        transform: translate3d(0,-3000px,0)    }
    60% {        opacity: 1;        -webkit-transform: translate3d(0,25px,0);        transform: translate3d(0,25px,0)    }
    75% {        -webkit-transform: translate3d(0,-10px,0);        transform: translate3d(0,-10px,0)    }
    90% {        -webkit-transform: translate3d(0,5px,0);        transform: translate3d(0,5px,0)    }
    100% {        -webkit-transform: none;        transform: none    }
}
@keyframes bounceInDown {
    0%,100%,60%,75%,90% {        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);        animation-timing-function: cubic-bezier(0.215,.61,.355,1)    }
    0% {        opacity: 0;        -webkit-transform: translate3d(0,-3000px,0);        transform: translate3d(0,-3000px,0)    }
    60% {        opacity: 1;        -webkit-transform: translate3d(0,25px,0);        transform: translate3d(0,25px,0)    }
    75% {        -webkit-transform: translate3d(0,-10px,0);        transform: translate3d(0,-10px,0)    }
    90% {        -webkit-transform: translate3d(0,5px,0);        transform: translate3d(0,5px,0)    }
    100% {        -webkit-transform: none;        transform: none    }
}

@-webkit-keyframes bounceOutUp {
    20% {        -webkit-transform: translate3d(0,-10px,0);        transform: translate3d(0,-10px,0)    }
    40%,45% {        opacity: 1;        -webkit-transform: translate3d(0,20px,0);        transform: translate3d(0,20px,0)    }
    100% {        opacity: 0;        -webkit-transform: translate3d(0,-2000px,0);        transform: translate3d(0,-2000px,0)    }
}
@keyframes bounceOutUp {
    20% {        -webkit-transform: translate3d(0,-10px,0);        transform: translate3d(0,-10px,0)    }
    40%,45% {        opacity: 1;        -webkit-transform: translate3d(0,20px,0);        transform: translate3d(0,20px,0)    }
    100% {        opacity: 0;        -webkit-transform: translate3d(0,-2000px,0);        transform: translate3d(0,-2000px,0)    }
}

@-webkit-keyframes hue {
  from {-webkit-filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg);    -o-filter: hue-rotate(0deg);    filter: hue-rotate(0deg);  }
  to {    -webkit-filter: hue-rotate(-360deg);    -moz-filter: hue-rotate(-360deg);    -o-filter: hue-rotate(-360deg);    filter: hue-rotate(-360deg);  }
}

@-webkit-keyframes borderScale {
  0% { border: 5px solid white;  }
  50% { border: 25px solid #3498db;  }
  100% { border: 5px solid white;  }
}

@keyframes borderScale {
  0% { border: 5px solid white; }
  50% { border: 25px solid #3498db;  }
  100% { border: 5px solid white; }
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@media screen and (max-width: 1000px) {
    h1{font-size: 5em;}
    h2{font-size: 3em;}

    .button_play{font-size:1.5em;}
    .button_answer {font-size:2em;}
    .ballon {font-size:1.5em;}
}

@media screen and (max-width: 600px) {
    h1{font-size: 4em;}
    h2{font-size: 2em;}

    .logo{width: 100%;}
    .welcome{width: 90%;}
    .verse_holder{width: 90%;}
    .score{font-size: 1.5em;}

    .button_play{margin-bottom: 10px; display:block; width: 100%;}
    .button_answer {font-size:1.5em; margin: 10px;}

    .ballon {font-size:1em;}

    .box_round{font-size:1.0em; width: 100%;}
}