@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%;}

.demo_container{margin:0 auto;max-width:960px;padding-bottom:30px;}
.demo_block{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;font-family: 'Roboto Condensed', sans-serif;font-size:14px;width:100%;position:relative;margin:0 auto;height:300px;background:#f6f6f6;margin-bottom:50px;}

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

/* quiz_container and descendants */
#quiz_container{margin:0 auto;font-family: 'Roboto Condensed', sans-serif;font-size:14px;padding:0px;padding-bottom:30px;text-align:left;position:relative;min-height:680px;width:100%;overflow:hidden;background:#E6E6FA;color:#111;margin-bottom:50px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

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

#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 p{font-size:14px;line-height:21px;margin-bottom:12px;color:#333;}
#quiz_container p:last-child{margin-bottom:0px;}

#quiz_container .cover{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

#quiz_container .timeoutContainer{position:absolute;top:0px;width:100%;height:100%;} /* allows for vertical alignment */
#quiz_container .scoreContainer{position:absolute;top:0px;width:100%;height:100%;} /* allows for vertical alignment */

#quiz_container .p_16{font-size:16px;line-height:21px;}
#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:#fff;padding:8px 30px 8px 35px;border:1px solid #333;border-radius:0px;outline:none;}
#quiz_container .optionBox p{font-size:16px;color:#111;}
#quiz_container .optionOver{background:#333;}
#quiz_container .optionOver p{color:#fff;}

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

#quiz_container .checkbox > .radioBtn{width:16px;height:16px;background:#fff;border:1px solid #333;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:#e2b757;}
#quiz_container .indicate_correct{color:#5dbe84;}
#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);
}

#quiz_container .vertical-align {
  position: relative !important;
  top: 50% !important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#quiz_container .col1{margin-top:150px;}
#quiz_container .col2{margin-top:150px;}


@media (max-width: 992px) {
#quiz_container{margin:0 auto;font-family: 'Roboto Condensed', sans-serif;font-size:14px;padding:0px;padding-bottom:30px;text-align:left;position:relative;min-height:680px;width:100%;overflow:auto;background:#E6E6FA;color:#111;margin-bottom:50px;}

#quiz_container .col1{margin-top:130px;} /* moves the question allowing space for the timer */
#quiz_container .col2{margin-top:40px;} /* moves the question allowing space for the timer */
#quiz_container .timerRow{width:100%;}
#quiz_container .timerContainer{text-align: center;width:100%;}
#quiz_container .timer {margin-top:50px;zoom:0.35;-moz-transform: scale(0.35);-moz-transform-origin: top center;}
}

/* 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);}
}

