html,body{ 
	font-family:Calibri, Arial; 
	font-size:100%; 
	width:100%; height:100%;
	
	}
	
/*p {font-size:150%}*/
		
.slide h1 {margin-bottom:.5em}
#penToolCanvas{position:absolute; top:10%; width:100%; height:80%; display:none; z-index:9999;}

#header {background-color:#2c3e50; height:80px;   overflow:hidden}

#title {float:left; padding-left:3em; padding-top:1em; color:#FFF;}

#penToolCont {display:inline-block; float:right; position:relative; top:0; right:-80px;}



.navBtn {
	display:inline-block; 
	float:left;
	height:80px; 
	width:80px; 
	background-color:#2980B9; 
	border-right:solid 1px #075853;
	text-align:center;
	color:#FFF;
	font-size:130%;
	cursor:pointer;}

button:hover, .navBtn:hover {background-color:#3498DB}
.activePen {background-color:#3498DB}


button {height:40px; width:160px; background-color:#2980B9; color:#FFF; padding-left:8px; padding-right:8px; padding-top:2px; padding-bottom:2px; margin:2px; border:none; cursor:pointer;
}

.answerBtn {position:fixed; bottom:1em;  left:2%;}



#content {
	position:relative;
	width:100%;
	padding:2%;
	height:88%;
	
	
}

.slide{
	display:none;
	position:relative;
	width:100%; 
	height:100%;
	background-color:#FFF;
	overflow:auto;
	}

.ans p {padding:.5em}


.question {width:100%; margin:auto; text-align:center; list-style:none; font-weight:bold; font-size:1.25em;}
.question li {padding:1em}

.video {position:relative; float:left; text-align:center; width:50%; margin:auto; margin-bottom:20px; margin-top:20px}


#footer{
	
	position:fixed;
	bottom:1em;
	right:1em;
	}
#footer .navBtn {height:40px; width:40px; margin:1px; padding-top:8px}

.col {position:relative;  float:left; display:inline-block; }

.slide h1 {background-color:#2c3e50; padding:10px; color:#FFF; font-size:1em;}

.box {height:50%; border:solid 5px #2c3e50; background-color:#FFF}
ul {padding:2em}
li {padding-bottom:.5em}

.half {float:left; width:46%; margin-left:2%; margin-right:2%;}
.quarter{width:25%}
.third {display:inline-block; float:left; height:100%;width:33.3%; text-align:center}

.ans > *  {display:none; background-color:rgba(255,255,255,0.5)}


table {border-collapse:collapse; font-size:80%}
table, tr, td {padding:.5em}



#penToolCanvas {display:none}

.nav {font-size:120%}
.nav a {text-decoration:none; color:#000}
.nav a:hover {text-decoration:underline; color:#2c3e50;}
.nav li {margin-bottom:.25em}

.pdf {}
.pdf:before {content: url(../images/pdf_icon.png); padding-left:1em; padding-right:.5em}
.web:before {content: url(../images/web_icon.png); padding-left:1em; padding-right:.5em}


#countDown {
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	width:100%;
	height:100%;
	background-color:#000;
}
#countDown #wrapper {position:relative; width:50%; margin:auto; top:50%; margin-top:-10%}
#countDown #num {color:#FFF; font-size:1000%; text-align:center;}

a img {border:none; text-decoration:none}


.Qhide{display:none; width:100%;}

.QBtn:before {
	border:solid;
	border-radius:100%;
	padding:.1em .5em .1em .5em;
	margin-right:1em;
	margin-left:-2px;
	font-size:150%;
	font-weight:900;
	content:"?"
}

@media only screen and (max-width : 1366px),  (max-height : 653px)
{

body {font-size:75%}
#header {height:60px;}
.navBtn {
	height:60px; 
	width:60px; 
}

#penToolCont {position:relative; top:0; right:-60px;}


	
}




/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

	button {height:40px}
}