@charset "UTF-8";
/* CSS Document */
* {
    box-sizing: border-box;
}

body{
	margin: 0;
	padding: 0;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

@media only screen and (max-width: 768px) {
    /* For mobile: */
	.col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
	header{
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	header img{
		display: block;
		margin: 1em auto;
		padding: 0;
		width: 80%;
	}
	nav {
		clear: both;
		margin: .5em 0 0 0;
		padding: 0;
	}
	nav ul {
		display: block; 
		margin: 0; 
		padding: 0;
		list-style: none;
	}
	nav ul li{
		display: block;
		margin: 0 auto;
		text-align: center;
		padding: .75em 0;
		border-bottom: thin solid #454545;
	}

	nav a {
		font-family: 'Julius Sans One', sans-serif;
		font-size: 1.25em;
		text-decoration: none;
		color: #4D4D4D;
	}

	nav ul li a:hover {
		font-family: 'Julius Sans One', sans-serif;
		text-decoration: none;
		color: #4D4D4D;
	}
	main{}	
	main h1{
		font-family: 'Cedarville Cursive', cursive;
		font-weight: 100;
		color: white;
		margin: 0;
		padding: .25em;
	}
		
	main img {display: block;
	margin: .5em auto;
	padding: 0;
	border: .5em solid white;
	width: 50%;}
	
	.container {
	  position: relative;
	}

	.image {
	  display: block;
	margin: .5em auto;
		padding: 0;
	  width: 50%;
	  height: auto;
	}

	.overlay {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 6.25em;
	  right: 0;
	  height: 100%;
	  width: 50%;
	  opacity: 0;
	  transition: .5s ease;
	  background-color: white;
	}

	.container:hover .overlay {
	  opacity: 0;
	}

	.text {
	  color: #fff;
	  font-family: 'Julius Sans One', sans-serif;
	  font-size: 10px;
	  font-weight: bold;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  text-align: center;
	}
	
	
	
	.portfolio-header {background: #CC9966;}
	.portfolio {background: #ffcc99;}
	.portfolio-img {width: 100%; border: medium solid white;}
	.portfolio-tardis {
		width: 100%;
		display: block;
		margin: 1em auto; 
		border: .25em solid white;
		}
	.portfolio-noodlix {
		width: 400px;
		display: block;
		margin: 1em auto; 
		border: none;
		}	
	.portfolio-iowaortho {
		display: block;
		max-width: 500px;
		margin: 1em auto; 
		border: .25em solid white;
		}	
	.description {
		background: #4D4D4D; 
		color: white; 
		font-family: 'arial', san-serif; 
		font-size: 1em; 
		padding: 1em; 
		text-align: justify;
	}
	
	.description a {color: #fff; font-family: 'arial', 'verdana', sans-serif; text-decoration: underline;}


		.description h2 {
		font-family: 'Julius Sans One', sans-serif;
		font-weight: normal;
		font-size: 1.5em; 
		text-align: left; 
	}
		.description h3 {
		font-family: 'Julius Sans One', sans-serif;
		font-weight: normal;
		font-size: 1.25em; 
	}
	.description p {text-align: left;}
	.about-header {background: #339999;}
	.about {background: #66cccc;}
	.bio {
		color: white;
		background: #4D4D4D;
		padding: .5em;
	}
	.bio p {
		font-family: verdana;
		font-size: 1em;
		text-align: justify;
	}
	
	.bio h2 {
		font-family: 'Cedarville Cursive', cursive;
		font-size: 3em;
		font-weight: lighter;
		text-align: center;
		padding: 0;
		margin: 0;
	}
	
	.bio h3 {
		font-family: 'Martel', serif;
		font-size: 1em;
		text-align: center;
		padding: 0;
		margin: 0;
	}
	
	.bio #resume {
		display: block;
		margin: 1.5em auto;
		padding: 1em;
		width: 9em;
		background: #66CCCC;
		font-family: 'Julius Sans One', sans-serif;
		font-size: 1.25em;
		border: thin solid black;
		text-decoration: none;
		color: black;
		text-align: center;
	}
	
	.contact-header {background: #666699;}
	.contact {background: #9999cc;}
	.contact p {
		font-family: 'Martel', serif;
		font-size: 1.25em;
		text-align: center;
		color: white;
		}	
	.contact a {
		color: white;
		font-family: 'Martel', serif;
		}
.contact img {border: none; display: block; margin: 0 auto; padding: 0;}
.contact ul {display: block; margin: 0 auto; padding: 0; text-align: center;}
.contact ul li {display: inline-block; margin: 1em; text-align: center;}
footer {background: #8c8c8c; color: white; font-family: verdana; padding: 1em; margin: 0;}
footer p{color: white; font-family: verdana; font-size: .9em; text-align: center; padding: 0; margin: .25em;}
footer a {color: white; font-family: verdana; font-size: 1em; text-decoration: underline; text-align: center; padding: .1em; margin: 0;}
	
footer a:visited {color: white; font-family: verdana; font-size: 1em; text-decoration: underline; text-align: center; padding: .1em; margin: 0;}

footer a:hover {color: #4D4D4D; font-family: verdana; font-size: 1em; text-decoration: underline; text-align: center; padding: .1em; margin: 0;}	}

@media only screen and (min-width : 768px ){
    /* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
	header {
		background: white;
	}
	header img {
		float: left;
		width: 23em;
		margin: 1em 0 0 1em;}
	nav {}
		nav ul {
		display: block;
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: right;
		font-family: 'Julius Sans One', sans-serif;
		text-decoration: none;
		font-size: 1.5em;
		color: #4D4D4D;
		background: white;
	}
		nav ul li {
			position: right;
			display: inline-block;
			text-align: right;
			margin: 0 .25em .5em .25em;
			padding: 0 .5em 0 0;
			color: #4D4D4D;
			background: white;
			border:none;}
		nav a {
			display: inline-block;
			margin: 0em;
			padding: 0em;
			text-align: right;
			font-family: 'Julius Sans One', sans-serif;
			text-decoration: none;
			color: #4D4D4D;
		}  
		nav a:visited {
				display: inline-block;
				margin: 0em;
				padding: 0em;
				text-align: right;
				font-family: 'Julius Sans One', sans-serif;
				text-decoration: none;
				color: #4D4D4D;
			}  
		nav a:hover {
			display: inline-block;
			margin: 0em;
			padding: 0em;
			text-align: right;
			text-decoration: underline;
			font-family: 'Julius Sans One', sans-serif;
			color: #4D4D4D;}  
	main {clear: both;}
	main img {display: block; border: .25em white solid; margin: 0 auto; width: 60%;}
	main h1{
		font-family: 'Cedarville Cursive', cursive;
		font-size: 3em;
		font-weight: 100;
		color: white;
		margin: 0;
		padding: 0 .25em;
	}
	
	.container {
	  position: relative;
	}

	.image {
	  clear: both;
	  display: block;
	  width: 100%;
	  height: auto;
	}
		.overlay {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 4.5em;
	  right: 0;
	  height: 100%;
	  width: 60%;
	  opacity: 0;
	  transition: .5s ease;
	  background-color: #66cccc;
	}

	.container:hover .overlay {
	  opacity: .95;
	}

	.text {
	  color: #003333;
	  font-family: 'Julius Sans One', sans-serif;
	  font-size: 12px;
	  font-weight: bolder;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  text-align: center;
	}

	.text a:link, a:visited, a:hover, a:active {
	  color: white;
	  font-family: 'Julius Sans One', sans-serif;
	  font-size: 1.75em;
	  font-weight: normal;
	  text-decoration: none;
	}
	
	.logo a:link, a:visited, a:hover, a:active {
	  color: white;
	  font-family: 'Julius Sans One', sans-serif;
	  font-size: 1em;
	  font-weight: normal;
	  text-decoration: none;
	}	.portfolio {background-image:url(../images/bg-portfolio.png);background-size:cover; background-repeat: no-repeat;}
	.portfolio-header {background: #CC9966;}
	.portfolio-img {display: block; margin: 1em auto; width: 90%; border: .5em solid white;}
	.portfolio-tardis {
		display: block;
		max-width: 550px;
		margin: 1em auto; 
		border: .25em solid white;
		}
	.portfolio-noodlix {
		display: block;
		max-width: 550px;
		margin: 1em auto; 
		border: none;
		}
	.portfolio-iowaortho {
		display: block;
		max-width: 500px;
		margin: 1em auto;
		padding: 0;
		border: .5em solid white;
		}
	
/*#imageInfo {
	font-family: arial, san-serif;
	font-weight: bold;
	font-size: 120%;
	margin-left: auto;
    margin-right: auto;
    margin-top: .5em;
    margin-bottom: .5em;
    display: block;
	background-color: #FFF;
    width: 760px;
    border: none;
	text-align: center;}
	
#stateInfo {
	font-family: arial, san-serif;
	font-style: italic;
	font-size: 100%;
	}	
	
div.imgView { 
	height: 400px;
	}
	
div.imgView img { 
	height: 400px;  
	border: 1px solid #000;
	margin-left: auto;
    margin-right: auto;
    margin-top: .5em;
    margin-bottom: .5em;
    display: block;
	background-color: #FFF;
	padding: 1em;
	}

div.imgRow img {
	display: block;
	height: 150px;
	width: 150px;
    padding: 0;
	margin: 0 auto;
	text-align: center;
	border: thick white solid}
	
#imgRow img {
	display: inline-block;
	height: 150px;
	width: 150px;
    padding: 0;
	margin: 1em;
	text-align: center;
	border: thick white solid}
	*/
	
	.description {
		background: #404040; 
		color: white; 
		font-family: 'arial', sans-serif; 
		font-size: 1em; padding: 1em; 
		margin: .5em 0 0 0; 
		text-align: justify;
	}
		.description h2 {
			font-family: 'Julius Sans One', sans-serif;
			font-size: 1.75em;
		}
		.description h3 {
			font-family: 'Julius Sans One', sans-serif;
			font-size: 1.25em;
			font-weight: normal;
		}
	.description a {color: #fff; font-family: 'arial', 'verdana', sans-serif; text-decoration: underline;}
	.description a:hover {color: #a5a5a5;}
	.about {background-image: url(../images/bg-about.png);background-size:cover; background-repeat: no-repeat;}
	.about-header {
		background: #339999;
	
	}
	.about img {width: 90%; margin: .5em 0 .5em .5em;}
	.bio {opacity: .8; margin: .5em 0;
		color: white;
		background: #4D4D4D;
		padding: 1em;	
	}
	.bio img {padding: .5em;}
	.bio p {
		font-family: verdana;
		font-size: .85em;
		text-align: justify;
	}
	.bio h2 {
		font-family: 'Cedarville Cursive', cursive;
		font-size: 3.5em;
		font-weight: lighter;
		text-align: center;
		padding: 0;
		margin: 0;
	}
	.bio h3 {
		font-family: 'Martel', serif;
		font-size: 1.5em;
		text-align: center;
		padding: 0;
		margin: 0;
	}
	.bio #resume {
		display: block;
		margin: 0 auto;
		padding: 1em;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		width: 9em;
		background: #66CCCC;
		font-family: 'Julius Sans One', sans-serif;
		font-size: 1.25em;
		border: thin solid black;
		text-decoration: none;
		color: black;
		text-align: center;
	}
	.contact {background-image: url(../images/contact.png); background-size:cover; background-repeat: no-repeat;}
	.contact-header {background: #666699;}
	.contact p {
		font-family: 'Martel', serif;
		font-size: 1.25em;
		text-align: center;
		color: white;
		}	
	.contact a {
		color: white;
		font-family: 'Martel', serif;
		}
.contact img {border: none; display: block; margin: 0 auto; padding: 0;}
.contact ul {display: block; margin: 0 auto; padding: 0; text-align: center;}
.contact ul li {display: inline-block; margin: 1em; text-align: center;}
footer {background: #8c8c8c; color: white; font-family: verdana; padding: 1em; margin: 0;}
footer p{color: white; font-family: verdana; font-size: .9em; text-align: center; padding: 0; margin: .25em;}
footer a {color: white; font-family: verdana; font-size: 1em; text-decoration: underline; text-align: center; padding: .1em; margin: 0;}
	
footer a:visited {color: white; font-family: verdana; font-size: 1em; text-decoration: underline; text-align: center; padding: .1em; margin: 0;}

footer a:hover {color: #4D4D4D; font-family: verdana; font-size: 1em; text-decoration: underline; text-align: center; padding: .1em; margin: 0;}	
	[class*="col-"] {
    float: left;
	}
}