body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Titillium Web', trebuchet ms, arial, verdana, sans-serif;
	color: #333;
	font-size: 14px;
}

.clear { clear: both;}

h3 {margin: 0; padding: 0;}
h1 {margin: 0; padding: 0;}


/* PRINT/NO-PRINT */
@media only screen {
    .print-only { display:none; }
}
@media only print { 
    .no-print { display:none; }
}

/* LINKS */

	a.linkWhite {color: #fff; text-decoration: none;}
	a:visited.linkWhite {color: #fff; text-decoration: none;}
	a:hover.linkWhite {color: #fff; text-decoration: underline;}
	
	a.linkRed {color: #900; text-decoration: none;}
	a:visited.linkRed {color: #900; text-decoration: none;}
	a:hover.linkRed {color: #000; text-decoration: none;}
	
	button.buttonGreen {font-size: 18px; background-color: #cfc; color: #030; padding: 8px 20px; border: 1px solid #030;}
	button:hover.buttonGreen {cursor: pointer;}
	button.buttonRed {font-size: 18px; background-color: #900; color: #fff; padding: 8px 20px; border: 1px solid #900;}
	button:hover.buttonRed {cursor: pointer;}
	
	button.buttonWhite {font-size: 12px; background-color: #fff; color: #900; padding: 3px 10px; border: 1px solid #900; text-transform: uppercase;}
	button:hover.buttonWhite {cursor: pointer; background-color: #900; color: #fff; border: 1px solid #900;}

/* LOGIN */

	.wrapperLogin { position: absolute; top: 0; bottom: 0; left: 0; right: 0;  width: 100%; height: 100%; min-height: 100%; background: #000 url('/images/johnsoncounty-background1.jpg') no-repeat bottom; background-size: cover;}
	.containerLogin { position: absolute; top: 50%; left: 50%; width: 90%; max-width: 800px; min-height: 600px; transform: translate(-50%, -50%); padding: 0; background: #FFFB; color: #000; text-align: center; box-shadow: 5px 5px 20px #0004; }
	.headerLogin { background: #555 url('/images/johnsoncounty-headerbg.jpg') no-repeat bottom; background-size: cover; width: 90%; padding: 0 5%; color: #fff; display: grid; grid-template-columns: 1fr 1fr; align-items: center;} 
	.headerLogin img { max-height: 100px; }
	
	.formButton {margin: 40px 0 0 0;}

/* ADMIN */

	.headerWrapper-admin {width: 100%; position: sticky; top: 0; background-color: #ADD8E6; height: 160px;}
	
	.adminnav {margin: 20px 0;}
	.adminnav ul {list-style-type: none; margin: 0; padding: 0;}
	.adminnav ul li {margin: 0; padding: 0; font-size: 18px; margin: 10px 0;}
	
	.adminDashboardGraphs {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; margin: 0; text-align: center;}
	.adminDashboardHolder {background-color: #e1e1e1; padding: 20px 30px;}
	.adminIcon {font-size: 30px;}
	.adminBigNumber {font-size: 48px;}
	.adminDesc {font-weight: bold; text-transform: uppercase;}

/* HEADER */
	
	.headerWrapper {width: 100%; position: sticky; top: 0; background-color: #e1e1e1; height: auto;}
	.headerTop {width: 100%; background-color: #000; height: 100px; position: absolute; z-index: 8;}
	.headerContainer {width: 90%; max-width: 1440px; display: grid; grid-template-columns: auto auto; grid-column-gap: 50px; z-index: 9; position: absolute; left: 50%; transform: translateX(-50%);}
	.headerLogo {width: 100%;}
		.headerLogo img {width: 100%;}
	.headerTitle {color: #fff; font-size: 24px; margin: 30px 0 0 0;}
	.headerSubtitle {color: #fff;}
	.headerHelp {text-align: right; margin: 40px 0 0 0;}
	.headerName {margin: 20px auto; width: 90%; max-width: 1440px;}
	.headerVendor {margin: 0 0 0 30px;}
	.headerLogout {margin: 60px 0 0 0;}
	
	.headerSectionPic {background: #555 url('/images/johnsoncounty-headerbg.jpg') no-repeat bottom; background-size: cover; width: 100%; height: 150px; min-height: 150px; border-top: 100px #000 solid;}
	
/* LAYOUT */

	.wrapperContent {width: 90%; max-width: 1440px; margin: 50px auto; display: grid; grid-template-columns: 260px auto; grid-column-gap: 100px;}
	
	.titleStep {}
	
	.holderSteps {margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: 2px dotted #ccc;}
	
	.container-videos {width: 100%; text-align: center; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 40px; margin: 40px 0;}
	.holder-videobutton {}
	button.videobutton {padding: 30px; cursor: pointer;}

	.videoholder {width: 100%; margin: 50px auto;}
	
	.holderDetails {margin: 30px 0; font-size: 18px;}
	.holderInfo {display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 50px;}
	.infoLabel {font-weight: bold;}

	
/* FORM STYLES */

	.holderForm2col {width: 90%; margin: 10px auto 20px auto; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; text-align: left;}
	.holderForm {width: 90%;}
	.formLabel {font-weight:bold; font-size; 12px; margin: 0 0 10px 0;}
	input.formInput {width: 90%; padding: 5px 10px; font-size: 16px; color: #333; border: 1px solid #e1e1e1;}
	
	input.inputSubmit {width: 90%; max-width: 200px; background-color: #004500; color: #fff; border: 1px solid #004500; padding: 10px 20px;}
	
	.quizHolder {border-top: 2px dotted #999; margin: 20px 0 0 0; padding: 20px 0 0 0;}
	.quizQuestion {font-size: 18px; font-weight: bold;}
	.quizAnswer {font-size: 18px; margin: 10px 0;}
	.quizAnswer ul {list-style-type: none;}
	.quizAnswer ul li {margin: 10px 0;}
	
/* FOOTER */

	.wrapperFooter {width: 100%; background-color: #000; text-align: center; color: #fff; padding: 40px 0;}

@media screen and (min-width: 0px) and (max-width: 1440px) {	

	@media screen and (min-width: 1201px) and (max-width: 1440px) {
	
		.menu-mobile {display: none;}
		
		.headerName-m {display: none;}
		
		
	}
	
	@media screen and (min-width: 1024px) and (max-width: 1200px) {
	
		.menu-mobile {display: none;}
		
		.headerName-m {display: none;}
		
		.containerLogin { width: 60%;  }
		
	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		.holderForm2col {width: 90%; margin: 10px auto; display: block; text-align: left;}
		
		.container-videos {width: 100%; text-align: center; display: block; margin: 40px 0;}
		
		.headerName-m {display: none;}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
			
			.holderForm2col {width: 90%; margin: 10px auto; display: block; text-align: left;}
			
			.headerName-m {display: none;}
			
			.containerLogin { width: 60%;  }
		}
		
		@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		
			.holderForm2col {width: 90%; margin: 10px auto; display: block; text-align: left;}
		
			.headerName-m {display: none;}
			
			.containerLogin { width: 60%;  }
		}

	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
		
		.holderForm2col {width: 90%; margin: 10px auto; display: block; text-align: left;}
		
		.wrapperContent {width: 90%; max-width: 1440px; margin: 50px auto; display: block; }
		
		.containerSidebar {display: none;}
		
		.headerContainer {width: 90%; max-width: 1440px; display: grid; grid-template-columns: auto auto; grid-column-gap: 30px; z-index: 9; position: absolute; left: 50%; transform: translateX(-50%);}
		
		.headerTitle {color: #fff; font-size: 14px; margin: 30px 0 0 0;}
		
		.headerName {display: none;}
		.headerName-m {margin: 20px auto; text-align: center;}
		
		.containerLogin {position: relative; padding-bottom: 20px;  top: 0; left: 0;  width: 100%; max-width: 100%; transform: none; background: #FFFB; color: #000; text-align: center;}
		
		
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 480px) {
		
		.holderForm2col {width: 90%; margin: 10px auto; display: block; text-align: left;}
		
		.wrapperContent {width: 90%; max-width: 1440px; margin: 50px auto; display: block; }
		
		.container-videos {width: 100%; text-align: center; display: block; margin: 40px 0;}
		
		.containerSidebar {display: none;}
		
		.headerContainer {width: 90%; max-width: 1440px; display: grid; grid-template-columns: auto auto; grid-column-gap: 20px; z-index: 9; position: absolute; left: 50%; transform: translateX(-50%);}
		
		.headerTitle {color: #fff; font-size: 14px; margin: 30px 0 0 0;}
		
		.headerName {display: none;}
		.headerName-m {margin: 20px auto; text-align: center;}
		
		.containerLogin {position: relative;  top: 0; left: 0;  width: 100%; max-width: 100%; transform: none; background: #FFFB; color: #000; text-align: center; padding-bottom: 20px;}
		
	}
	
}

@media screen and (min-width: 1441px) {

	.menu-mobile {display: none;}

	.headerName-m {display: none;}

}