<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>CDL Driver Finder</title>
  <meta name="CDL Training, CDL Recruitment" content="CDL Recruiting">
  <meta name="Alan Hendrickson" content="CDL Driver Finder">
  <meta name= "viewport" content= "width-divice-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="style.css">
<!-- 
			Styling for text and colors
			https://www.youtube.com/watch?v=NtKkSxUjwvU
		-->
<style>
	body{
			background: #f5deb5;
			font-family: Verdana, Tahoma, Arial, san-serif;
			font-size: 18px;
			overflow: auto;
		}
	h1, h2, h3 {
					text-align: center; 
					padding-left: 5%;
					color: #878E63;
					
			   }
	p {
		 padding: 2%;
		 max-width: 100%;

	  }
	  img {
	  		text-align: center;
	  		max-width: 100%;
	  		height: auto;
	  		width: auto;
	  		}
	  	#wrapper {
				margin: 0 auto;
				max-width: 100%;
				height: auto;
				width: auto;
				background: #FEFBE8;
				border: 1px solid #878E63;
				border-radius: 2 px;
				box-shadow:0 0 10px 0px rgba(12, 3, 25, 0.8);
			}
	#banner {
				border: 1px solid #000000;
				border-radius: 2 px;
				box-shadow:0 0 10px 0px rgba(12, 3, 25, 0.8);
				margin: auto;
				max-width: auto;
				height: auto;
				width: auto;
			}
	#callout {
				 width: 100%;
				 height: auto;
				 background: #878E63;
				 overflow: hidden; 
			 }
	#callout p {
				text-align: right;
				font-size: 13px;
				padding: 0.1% 5% 0 0;
				color: #F1F0D1;
				}		
		#callout p a {
				color: #F1F0D1;
				text-decoration: none
				} 
	#CDLTitle{

			font-family: Verdana, Tahoma, Arial, san-serif;
				text-align: center;
				font-size: 60px;
				color: #878E63;
				}
	nav ul{
			list-style: none;
			margin: 0;
			padding-left: 50px;
			}
			
	nav ul li{
			float: left;
			border: 1px solid #878E63;
			width: 19%;
			
			}
	nav ul a{
			background: #F1F0D1;
			display: block;
			padding: 5% 12%;
			font-weight: bold;
			font-size: 18px;
			color: #878E63;
			text-decoration: none;
			text-align: center;
			}
	nav ul a:hover, nav ul.active a{
				background-color: #878E63;
				color: #F1F0D1;
			}
	.banner img {
					width: 100%;
					border-top: 1px solid #878E63;
					border-bottom: 1px solid #878E63;
				}
	.left-col {
				width: 55%;
				float: left;
				margin: -2% 1% 1% 1%;
			}
	.sidebar {
				width: 40%;
				float: right;
				margin: 1%;
				text-align: center;
			}
	.about{
			float: left;
			margin: 0 auto;
			width: 100%;
			height: auto;
			padding: 1%;
		  }
		  
	.section{
				width: 29%;
				float: left;
				margin: 2% 2%;
				text-align: center;
			}
	.clearfix {
				clear: both;  
				}
	footer	{
				background: #878E63;
				width: 100%;
				overflow: hidden;
			}
	footer	p, footer h3{
				color: #F1F0D1;
			}
	footer	p a{
				color: #F1F0D1;
				text-decoration: none;
			}
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	
		}
	li{
		display: inline; 
		}
	ul li img	{
					height: 50px;
				}

.read-more-state {
  display: none;
  
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
  
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
  float:right; 
	margin: 10px;
}

/* Other style */ 




@media screen and (max-width: 768px) {
	nav ul{
			list-style: none;
			margin: 0;
			padding-left: 2px;
			}
			
	nav ul li{
			float: left;
			border: 1px solid #878E63;
			width: 19.3%;
			
			}
	nav ul a{
			background: #F1F0D1;
			display: block;
			padding: 2px 3px;
			font-weight: bold;
			font-size: 12px;
			color: #878E63;
			text-decoration: none;
			text-align: center;
			}
	nav ul a:hover, nav ul.active a{
				background-color: #878E63;
				color: #F1F0D1;
}