@charset "utf-8";

/*colors
blue:#005874*/

*{margin:0;padding:0;}
html{height:100%;}

body{
  font-family: 'Open Sans', sans-serif;
  color:#fff;
  font-size:14px;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

a,
a:hover,
a:focus {
    color: #fff;
    text-decoration: underline;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }

p{font-size:27px;line-height:27px;margin-bottom:20px;color:#fff;}

p:last-child{margin-bottom:0px;}

input{
  background-color:transparent;
  padding: 1.0rem 3.25rem 1.0rem; 
  border: 2.5px solid #fff;
  font: 400 27px/27px "Open Sans",sans-serif;
  color:#fff;
  border-radius:0px; 
  transition: background-color 500ms linear;

}

input:hover{background-color: rgba(255,255,255, 0.5);}

img{display:block;} /* remove bottom padding */ 

/*widget framework*/
.wrapper {
    max-width:800px;
    min-height:600px;
    padding:0;
    background:#005874 url(../../lib/assets/background-question.png) 0 0 repeat-y;
    border:1px solid #3f3f3f;
    margin:0 auto;
    overflow: hidden;
}

/*quiz container*/
#container {
  position:relative;
  width:800px;
  height:100%;
}

.header {background-color: #fff;}

header {
  height:130px;
  background-color: #fff;
}

header img {margin:15px 0 0 15px;}

.question {
  font-size: 32px;
  line-height: 38px;
}

.center{text-align: center;}

#title {text-align: center;}

#title p {
   font: 600 27px/36px 'Open Sans', sans-serif;
   margin-bottom:20px;
   text-align: left;
}

/*button {
  border: 2.5px solid #fff;
  font: 300 44px/44px "Open Sans",sans-serif;
  color: #fff;
  background-color: transparent;
  padding: 1.0rem 3.25rem 1.0rem;
  position: relative;

}*/

 #txt1 p {
   font: 400 20px/26px 'Open Sans', sans-serif;
   color:#fff;
 }

#pass_txt h1,
#fail_txt h1 {
  font: 600 30px/36px "Open Sans",sans-serif;
  color:#fff;
}

#pass_txt p,
#fail_txt p {font: 400 18px/22px "Open Sans",sans-serif;}


#pass_txt ol,
#fail_txt ol {
  list-style-position: outside;
  margin-left: 20px;
}

#pass_txt ol li,
#fail_txt ol li {font: 400 18px/22px "Open Sans",sans-serif;}

#openingText {
  width:85%;
  margin-left: 50px
}


.lightBox{background:rgba(255,255,255,0.9);padding:20px;border-radius:0px; -moz-border-radius:0px;border:1px solid #ddd;}
#timeoutContainer{height:100%;} /* allows for vertical alignment */
#scoreContainer{
  height:100%; 
  width:90%;
  margin:0 4% 0 3%;


  } 
.mcqRadioBtn{width:12px;height:12px;background:#fff;border:1px solid #999;border-radius:10px; -moz-border-radius:10px;}

.optionBox{
  background-color: transparent;
  padding: 1.0rem 3.25rem 1.0rem; 
  border: 2.5px solid #fff;
  border-radius:0px;
  overflow:hidden !important;
  text-align: center;
}

.optionOverCss{
  background-color:rgba(255,255,255, 0.5);
 padding: 1.0rem 3.25rem 1.0rem; 
  border: 2.5px solid #fff;
  border-radius:0px;
}

.optionOutCss{
  background-color: transparent;
 color:#fff;
  padding: 1.0rem 3.25rem 1.0rem; 
  border: 2.5px solid #fff;
  border-radius:0px;
  transition: background-color 500ms linear;
}

.optionOverCss p, 
.optionOutCss p {
  font: 400 27px/27px "Open Sans",sans-serif;
  color:#fff;
  text-align: center;
}
#goBtn {text-align: center;}

.btnOverCss input{}
.btnOutCss input{
  
-webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
  }

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

/* timer */
#timerContainer{text-align: center;}
#timer{margin-top:150px;background:transparent none no-repeat 0px 0px;display:none;opacity:0.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50) ;-moz-opacity:0.5;position:relative !important;}

@media (max-width: 992px) {
  #col1{margin-top:0;} /* pushes the question down allowing space for the timer */
  #timerRow{width:100%;}
  #timerContainer{text-align: center;width:100%;}
  #timer {margin-top:50px;zoom:0.35;-moz-transform: scale(0.35);-moz-transform-origin: top center;}
}


/* nav */
#nav{position:absolute;z-index:99;}

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



/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
====================================================================== */
@media only screen and (max-width: 568px)  {

  .wrapper {width:100%;}

  #container {width:100%;}

  header {height:90px;}

  header img {
    max-width: 80%;
    height: auto;
    margin: 5px 0 0 5px;
  }

#openingText {
  margin-left: 0;
  width:100%;
  margin-top:20px !important;
}

#title p {
    font: 600 18px/24px "Open Sans",sans-serif;
}

.question {
    font-size: 18px;
    line-height: 24px;
}

p{
  font-size:18px;
  line-height:18px;
}

/*input,
.optionBox,
.optionOverCss,
.optionOutCss,*/
.optionOverCss p, 
.optionOutCss p {
    font: 400 18px/18px "Open Sans",sans-serif;
    text-align: center;
    }

input,
.optionBox,
.optionOverCss,
.optionOutCss {
 padding: 1rem 3.25rem 1.0rem;
}

#question1,
#question2,
#question3,
#question4 {
  margin-bottom:20px !important;
}

#txt1 p {
    font: 400 18px/24px "Open Sans",sans-serif;
    color: #FFF;



}

#pass_txt h1, #fail_txt h1 {
    font: 600 28px/30px "Open Sans",sans-serif;
}

#scoreContainer {
    height: 100%;
    width: 100%;
    margin: 0;
}
}