@charset "utf-8";

html{height:100%;width:100%;margin:0;padding:0;box-sizing: border-box !important;}
*{margin:0;padding:0;box-sizing: inherit !important;}
*:before, *:after {box-sizing: inherit !important;}
body{background:#fff;color:#111;height:100%;width:100%}

/* progress bar */
#quiz_progress_outer{position:absolute;height:1px;width:100%;border:none;background:#eee;z-index:2;}
#quiz_progress_inner{height:1px;background:#357d7e;width:0px;}

/* quiz_container and descendants */
#quiz_container{font-family: 'Roboto Condensed', sans-serif;font-size:14px;padding:10px;margin:0px auto;text-align:left;max-width:500px;position:relative;overflow:hidden;}

#quiz_container button{background:#357d7e;font-size:14px;font-weight:normal;color:#fff;padding:9px 15px 9px 15px;border:1px solid #357d7e;-webkit-appearance:none;border-radius:0px;font-family: 'Roboto Condensed', sans-serif;outline:none;}
#quiz_container .btnOver button{background:#fff;color:#111;border:1px solid #111;}

#quiz_container img{max-width:100%;height:auto;display:block;} 
#quiz_container div, p, a, li, td, input{ -webkit-text-size-adjust:none;outline:none; }
#quiz_container h1{font-weight:normal;color:#111;margin-bottom:20px;}
#quiz_container p{font-size:14px;line-height:21px;margin-bottom:12px;color:#111;}
#quiz_container p:last-child{margin-bottom:0px;}

#quiz_container .timerContainer{}
#quiz_container .timer{background:transparent none no-repeat 0px 0px;display:none;opacity:1;position:relative !important;zoom:0.5;-moz-transform: scale(0.5);-moz-transform-origin: top center;}

#quiz_container .timeoutContainer{text-align:center;}
#quiz_container .scoreContainer{text-align:center;}
#quiz_container #submitFormBtn:hover:enabled{background:#fff;color:#111;border:1px solid #111;}

#quiz_container .p_24{font-size:24px;line-height:30px;}
#quiz_container .p_30{font-size:30px;line-height:35px;}
#quiz_container .p_32{font-size:32px;line-height:40px;}
#quiz_container .p_42{font-size:42px;line-height:40px;}

#quiz_container .optionBox{background:#ddd;padding:8px 30px 8px 35px;border:none;border-radius:0px;outline:none;}
#quiz_container .optionBox p{font-size:16px;color:#111;}
#quiz_container .optionOver{background:#357d7e;}
#quiz_container .optionOver p{color:#fff;}

#quiz_container .radioBtn{width:16px;height:16px;background:#fff;border:1px solid #357d7e;border-radius:100%;}
#quiz_container .radioBtn.selected{background:#357d7e;border:1px solid #357d7e;box-shadow:inset 0 0 0 3px #fff;}

#quiz_container .checkbox > .radioBtn{width:16px;height:16px;background:#fff;border:1px solid #357d7e;border-radius:0px;box-shadow:none;}
#quiz_container .checkbox > .radioBtn.selected{background:#fff;}
#quiz_container .checkbox > .radioBtn.selected:before {
font-family: "Material Icons"; 
font-size: 18px;
line-height:18px;
content: "\E5CD";
color: #4b4b40;
position: absolute;
top: -2px;
left: -2px;
}

#quiz_container .tick{color:#ddd;}
#quiz_container .indicate_correct{color:#357d7e;}
#quiz_container .img-border img{border:5px solid #f6f6f6;}

#quiz_container .imgOver img{
  border:5px solid #f6f6f6;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  transition: transform 0.5s ease;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
  outline:none;
}

#quiz_container .imgOut img{
  border:5px solid #f6f6f6;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  transition: transform 0.5s ease;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* preloader */
.preloader{
    width:34px;
    height:34px;
    display:inline-block;
    padding:0px;
    border-radius:100%;
    border:2px solid;
    border-top-color:rgba(0,0,0, 0.8);
    border-bottom-color:rgba(0,0,0, 0.2);
    border-left-color:rgba(0,0,0, 0.8);
    border-right-color:rgba(0,0,0, 0.2);
    outline: 1px solid transparent;

    -webkit-animation: preloader 1s linear infinite;
    animation: preloader 1s linear infinite;
}
@keyframes preloader{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}