a, 

a:hover, 

a:active,

a:visited {

  color: #00A7C7;

  text-decoration: none;

  line-height: inherit;

}



/*Clearfix*/

.cf:after {

  content:" ";

  display: table;

  clear:both;

}



body{

  font-family: 'Open Sans', arial, sans-serif;

  color:#fff;

  font-weight: 400;

}



.wrapper {

  max-width:800px;

  height:585px;

  padding:0;

  border:1px solid #3f3f3f;

  margin:0 auto;

  background-color: #fff;

  overflow: hidden;

}



/*header*/

header{

  background-color: #fff;

  width:100%;

  height:105px;

  padding: 0;

}



.header-left {

  margin-top:20px;

  margin-left:18%;}



.header-right {

  margin-top:15px;

  margin-left:-12px;

}


.header-right.logo {

  margin-top:25px;

  margin-left:-12px;

}



.header-right h1{

  font: 600 27px/37px "Open Sans", arial, sans-serif;

  color:#00a7c7;

  letter-spacing: 1px;

}



.header-right h1 span{

  color:#005874;

  font-size:45px;

  text-transform: uppercase;

   letter-spacing: 0;

}





/*Buttons/Links*/

a.btn {

    border: 2px solid #FFF;

    font: 300 44px/44px "Open Sans", arial, sans-serif;

    background-color: transparent;

    padding: 0.15rem 3.5rem 0.50rem;

    position: relative;

    width: 210px;

    margin-right: 1rem;

    text-decoration: none;

    color:#fff;

}



a.btn:hover {

  background-color:rgba(0,167,199, .30);

}



/*Tabs*/

.tabs {

  margin-bottom: 0px !important;

  margin-left: -15px;

  margin-right: -24px;

}



.tabs dd, .tabs .tab-title {

  position: relative;

  margin-bottom: 0px !important;

  list-style: outside none none;

  float: left;

  width: 16.666%;

}



.tabs dd > a, .tabs .tab-title > a {

  display: block;

  padding: 10px;

  font: 600 14px/14px "Open Sans", arial, sans-serif;

  text-align: center;

  color: #FFF;

  background-color: #BEBEBE;

  text-transform: uppercase;

  border-right:1.5px solid #fff;

}



.tabs dd.active a, .tabs .tab-title.active a {

  color:#fff;

  background-color: #005874;

}



 /*Content for tabs   */



.tabs-content {

  margin-bottom: 0;

  width: 105%;

  margin-left: -16px; 

  height:450px;

  position: relative;

  background-color: #005874;

}



.tabs-content .answer {

  margin: 15px 35px 15px 35px;

  position: relative;

  top:250px;

}



.tabs-content .answer h2 {

  font: 300 34px/34px "Open Sans", arial, sans-serif;

  color:#a6d8c7;

  text-transform: uppercase;

}



.tabs-content .content {height:100%;}/*455px*/



.tabs-content .content#panel1 {background:url(../img/back-2.jpg) no-repeat;}



.tabs-content .content#panel2 {background:url(../img/back-3.jpg) no-repeat;}



.tabs-content .content#panel3 {background:url(../img/back-4.jpg) no-repeat;}



.tabs-content .content#panel4 {background:url(../img/back-5.jpg) no-repeat;}



.tabs-content .content#panel5 {background:url(../img/back-6.jpg) no-repeat;}



.tabs-content .content#panel6 {background:url(../img/back-7.jpg) no-repeat;}



.tabs-content h2 {

  font: 600 50px/60px "Open Sans", arial, sans-serif;

  color:#fff;

  text-align: left;

}



/*intro screen*/

#intro-screen{

  display: block;

  padding-top:50px;

  width: 800px;

  height: 455px;

  background:url('../img/back-1.jpg') no-repeat;

  z-index: 1000;

  position: absolute;

  top:0;

}



.intro-text {

  position: relative;

  margin: 0 auto;

  width:760px;

  color:#fff;

  text-align:center;

}



.intro-text h2{

  font: 600 38px/38px "Open Sans", arial, sans-serif;

  color:#fff;

}

.intro-text p{

  font: 400 22px/29px "Open Sans", arial, sans-serif;

  letter-spacing: 0.1rem;

  position: relative;

  left: 125px;

  top: 110px;

  width: 475px;

}



#intro-screen .intro-text button {

  border:2px solid #fff;

  font: 300 44px/44px "Open Sans", arial, sans-serif;

  background-color:transparent;

  padding: .5rem 2.25rem 1.0rem 2.25rem;

  position: relative;

  top: 127px;

}



#intro-screen .intro-text button:hover {

  background-color:rgba(0,167,199, .30);

}



.intro-icons {

  display:inline-block;

  position: relative;

  top: 85px;

  left: 0px;

}

#footnote {    
font: 400 14px/16px "Open Sans", arial, sans-serif;
letter-spacing: 0.1rem;
position: relative;
left: 60px;
margin-top:20px;
width: 632px;
}



.intro-icons h2 {

font: 400 20px/24px 'Open Sans', arial, sans-serif;
display: inline-block;
position: relative;
width: 196px;
margin-right: 0px;
text-align:center;

}



.intro-icons h2.doctor:before {

    content: url(../img/doctor.png);

    position: absolute;

    top: -110px;

    left: 50px;

}



.intro-icons h2.urgent-care:before {

    content: url(../img/urgent-care.png);

    position: absolute;

    top: -110px;

    left: 50px;

}

.intro-icons h2.telehealth:before {

    content: url(../img/telehealth.png);

    position: absolute;

    top: -110px;

    left: 46px;

}



.intro-icons h2.er:before {

    content: url(../img/hospital.png);

    position: absolute;

    top: -110px;

    left: 50px;

}



/*question boxes*/

.question-box {

  width:750px;

  margin: 0 auto;

  text-align: center;

}



.question-box .question {

  margin:0 auto;

  text-align: center;

}



.question-box h2 {

  text-align: center;

  width: 500px;

  margin: 0 auto;

  margin-top:40px;

}



#panel1 .question-box h2 {width:530px;}

#panel2 .question-box h2 {width:545px;}

#panel3 .question-box h2 {width:550px;}

#panel5 .question-box h2 {width:575px;}

#panel6 .question-box h2 {width:490px;}



.question-box h3 {

  font: 600 50px/60px "Open Sans", arial, sans-serif;

  text-transform: uppercase;

  color:#fff;

}



.question-box h4{

  font: italic 600 26px/29px "Open Sans", arial, sans-serif;

  color:#fff;

  text-align: center;

}



.question-box p {
    font: 600 18px/24px "Open Sans", arial, sans-serif;

  text-align: left;

}



.question-box  button {

  border: 2px solid #fff;
font: 300 19px/22px "Open Sans", arial, sans-serif;
background-color: transparent;
padding: 0.75rem 0rem .95rem 0rem;
position: relative;
width: 170px;
margin-right: 1rem;

}



.question-box  button:hover {

    background-color:rgba(0,167,199, .30);

 }



.question-box  button:last-child {margin-right: 0;}



.question-box .question-buttons {

  position: relative;

  top:50px;

}



/*answers*/

.correct-ans,

.wrong-ans  {

  display:none;

  width: 700px;

  margin: 0 auto;

}



.correct-ans div,

.wrong-ans div {height:345px;}







/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers)

====================================================================== */

@media only screen and (max-width: 640px) {
	
	.logo {display:none;}
}


@media only screen and (max-width: 568px) {
	
	.logo {display:none;}



  .wrapper {height: auto;} 



  .tabs dd, .tabs .tab-title {width: 33%;}



  .tabs dd > a, .tabs .tab-title > a {border-bottom: 1px solid white;}



  .tabs-content {width: 115%;}



  #intro-screen {

    width: 100%;

    padding-top: 0;

  }



  .intro-text {

    width: 90%;

    text-align: center;

  }



  .intro-text h2 {

    text-align: left;

  }



  .intro-text p {

    font: 400 15px/21px "Open Sans", arial, sans-serif;

    letter-spacing: 0rem;

    left: 0px;

    top: 0px;

    text-align: left;

    width: 100%

  }



#intro-screen .intro-text button {

    font: 300 22px/22px "Open Sans", arial, sans-serif;

    padding: 0.5rem 2.25rem 1rem;

    top: 0;

    left: 0;

  }



  header {

    height: 75px;

    margin-top: 5px;

  }



  .header-left {

    margin-top: 5px;

    margin-left:5px;

  }



  .header-right {margin-top: 0;}



  .header-right h1 {font: 600 17px/27px "Open Sans",arial, sans-serif;}



  .header-right h1 span {font-size: 35px;}



  .tabs-content .answer h2 {

    font-size: 14px;

    line-height: 18px;

    margin-bottom: 0px;

    font-weight: 300;

  }



  .tabs-content .answer p {

    font-size:10px;

    line-height: 17px;

  }



  .tabs-content .answer {

    margin: 15px 5% 15px 5%;

    top: 170px;

    width: 90%;

  }



  .question-box {width: 90%;}



  .question-box h2 {

    width: 95%;

    margin: 0;

  }



  .question-box h3 {

    font: 600 30px/1.2 "Open Sans",arial, sans-serif;

    text-align: left;

    margin-bottom: 0;

    margin-top: 0;

  }



  .tabs-content h2 {

    font: 600 22px/1.2 "Open Sans", arial, sans-serif;

  }



  .question-box h4 {

    margin-bottom: 0;

    font: italic 600 20px/1.2 "Open Sans",arial, sans-serif;

    text-align: left;

}



  .question-box p {

    font: 300 14px/1.3 "Open Sans",arial, sans-serif;

    margin-bottom: 20px;

  }



  .question-box button:last-child {margin-right:1rem;}



  .question-box .question-buttons {top: 10px;}



  #panel1 .question-box h2,

  #panel2 .question-box h2,

  #panel3 .question-box h2,

  #panel5 .question-box h2,

  #panel6 .question-box h2   {width: 95%;}



  .correct-ans, .wrong-ans {

    width: 100%;

    margin: 0;

  }



  a.btn {

    font: 300 22px/22px "Open Sans",sans-serif;

    margin-right: 0rem;

  }



  .intro-text p {top: 10px;}



  .intro-icons {

    display:inline-block;

    position: relative;

    top: 0;

    left: 10px;

  }



  #intro-screen .intro-text button {top: 7px;}



  .intro-icons h2 {

    font:400 24px/24px 'Open Sans', arial, sans-serif;

    display: inline-block;

    position: relative;

    width:300px;

    margin-right:50px;
	
	text-align:left;

  }



  .intro-icons h2.doctor:before,

  .intro-icons h2.urgent-care:before,
  
  .intro-icons h2.telehealth:before,

  .intro-icons h2.er:before   {

    margin-right:10px;

    position: relative;

    top: 12px;

    left: 0;

  }



  .intro-icons h2.doctor:before  {content: url(../img/doctor_small.png);}



  .intro-icons h2.urgent-care:before {content: url(../img/urgent-care_small.png);}



  .intro-icons h2.er:before {content: url(../img/hospital_small.png);}
  
  .intro-icons h2.telehealth:before {content: url(../img/telehealth_small.png);}



  .correct-ans a.btn, .wrong-ans a.btn {

    position: absolute;

    bottom: 8%;

    left: 5%;

  }
  
 #footnote {
    font: 400 10px/10px "Open Sans", arial, sans-serif;
    letter-spacing: 0.1rem;
    position: relative;
    left: -6px;
    top: 0px;
    width: 308px;
}





}