@charset "UTF-8";
/* CSS Document */

body {
	background: #999999;
	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 {background: white;}
	header img{
		display: block; 
		width: 95%;
		margin: 0 auto;
		padding: .5em 0 2em 0;
	}
	
	nav {clear: both; display: block; width: 100%; margin: 	0 auto; padding: 0; }
nav a {
	margin: 0 auto;
	font-family: 'Cedarville Cursive', cursive;
	text-decoration: none;
	font-size: 2em;
	font-weight: 100;
	color: #FFFFFF;
	text-align: center;
		}  
nav a:visited {
	margin: 0 auto;
	text-align: center;
	font-family: 'Cedarville Cursive', cursive;
	text-decoration: none;
			}  
	
nav a:hover {
	margin: 0 auto;
	text-align: center;
	font-family: 'Cedarville Cursive', cursive;

}  
	nav ul {
		display: block;
		margin: 0;
		padding: 0;
	}
	
	nav ul li {
		display: block;
		width: 100%;
		text-align: center;
		margin: 0 auto;
		padding: .5em 0;
	}
.about {
	background-color: #33cccc; border: 1px white solid; margin: 0; padding: 0;}
.portfolio {
	background-color: #e2a733; border: 1px white solid; margin: 0; padding: 0;}
.contact {
	background-color: #666699; border: 1px white solid; margin: 0; padding: 0;}
	
	main {clear: both; display: block; background: #4D4D4D; margin: 0; padding: 1em;}
	main img {
		width: 40%; 
		display: inline-block;
		margin: 0 auto;
		padding: 1em 0;}
	main ul {
		display: block;
		margin: 0;
		padding: 0;
	}
	
	main ul li {
		display: inline-block;
		width: 45%;
		text-align: center;
		margin: 0 auto;
		padding: 0;
	}
footer {
	clear: both;
	margin: 0 auto;
	padding: .5em;
	background: #8c8c8c;
	text-align: center;
	color: white;
	font-family: verdana, san-serif;
	font-size: 1em;
}
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
	
	.col-t-1 {width: 8.33%;}
    .col-t-2 {width: 16.66%;}
    .col-t-3 {width: 25%;}
    .col-t-4 {width: 33.33%;}
    .col-t-5 {width: 41.66%;}
    .col-t-6 {width: 50%;}
    .col-t-7 {width: 58.33%;}
    .col-t-8 {width: 66.66%;}
    .col-t-9 {width: 75%;}
    .col-t-10 {width: 83.33%;}
    .col-t-11 {width: 91.66%;}
    .col-t-12 {width: 100%;}
	
	header {
		clear: both;
		background: white;
		padding: 1em 0;
	}
	header img {
		width: 75%;
		padding: 0;
		margin: 0 auto;
	}
	
	nav {
		clear: both;
		width: 100%;
		margin: 0;
		padding: .5em 0 0 0;
		background: white;
	}
	nav ul {
		display: inline-block;
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	nav ul li {
		display: inline-block;
		width: 30%;
		margin: 0 auto;
		padding: 0;		
	}
.portfolio {
	margin: 0 1.95em;}
	
main {padding: 4em 0;}
main ul {
	display: block;
	padding: 0;
	margin: 0 auto;}
main ul li{
	display: inline-block;
	padding: 1.5em 0;
	margin: 0 auto;
	width: 24%;}
}
@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 img {
		display: block; 
		width: 55%; 
		margin: 0 auto;
	}
	
nav a {
	margin: 0 auto;
	font-family: 'Cedarville Cursive', cursive;
	text-decoration: none;
	font-size: 2.5em;
	font-weight: 100;
	color: #FFFFFF;
	text-align: center;
		}  
nav a:visited {
	margin: 0 auto;
	text-align: center;
	font-family: 'Cedarville Cursive', cursive;
	text-decoration: none;
	}  
nav a:hover {
	margin: 0 auto;
	text-align: center;
	font-family: 'Cedarville Cursive', cursive;
	}  
	nav {margin: 0 auto; padding: 2em 0 0 0;background: white;
	}
		nav ul {
		display: block;
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: center;
		font-family: 'Julius Sans One', sans-serif;
		text-decoration: none;
		font-size: .8em;
		color: #4D4D4D;
		background: white;
	}
		nav ul li {
			position: left;
			display: inline-block;
			text-align: center;
			margin: 0 auto;
			padding: 0 .25em;
			color: #4D4D4D;
			background: white;
			border:none;}


.about {
	display: inline-block;background-color: #33cccc; border: 1px white solid; margin: 0 auto;}
.portfolio {
	display: inline-block; background-color: #e2a733; border: 1px white solid; margin: 0 auto;}
.contact {
	display: inline-block; background-color: #666699; border: 1px white solid; margin: 0 auto;}
	main 
		{clear: both; display: block; background: #4D4D4D; margin: 0 auto; padding: 6.75em;}
	
	main img {
		display: block;
		margin: 0 auto;
		padding: 0;
	}
	
footer {
	clear: both;
	margin: 0 auto;
	padding: .5em;
	background: #8c8c8c;
	text-align: center;
	color: white;
	font-family: verdana, san-serif;
	font-size: 1em;
}	[class*="col-"] {
    float: left;
    padding: 0;
	margin: 0;
	}
}