body{
	background-color: #000;
	margin: 1%;
	padding:1%;
	font-family: Tahoma, Geneva, sans-serif;
}

nav{
	box-sizing: border-box;
	border: 5% solid #009999;
	background-color:#009999;
	display: inline-block;
	width: 25%;
	position: fixed;
	font-size: 150%;
	border-radius: 2%;
}

nav a{
	display: block;
	line-height: 300%;
	color: #FFFFFF;
	background-color:#009999;
	text-decoration: none;
	padding: 2% 50% 2% 10%;
	margin: 10%;
	border-radius: 5%;
}

nav a:hover{
	background-color: #000000;
}

/*for experience section, removes underline from hyperlinks*/
div.experience ul li a {
	text-decoration: none;
}

div#education.education ul li h4 a {
	text-decoration: none;
}

/*keeps visited hyperlinks to turquiose color*/
div.experience ul li a:visited {
	color: #009999;
}

div#education.education ul li h4 a:visited {
	color: #009999;
}

h1 {
	font-size: 200%;
	color: #009999;
}

h2 {
	color: #333333;
}

p {
	font-size: 85%;
	color: #333333;
}

div a:visited {
	color: #009999;
}

section {
	margin-left: 30%;
	margin-right: 2%;
}

.about {
	border-radius: 10px 10px 0% 0%;
}

.education {
	border-radius: 0% 0% 10px 10px;
	}

.about, .skills, .experience, .education {
	background-color: #f7f7f7;
	padding: 1% 2% 2% 5%;
}

/*any child li element of the div parent element with class equal to experience will execute the following, remove bullets and move padding left */
div.experience li {
	line-height: 130%;
	list-style-image: url("../images/powerbutton.png");
}

div.experience p {
	margin-left: 1%;
}

div.education li {
	line-height: 110%;
	list-style-image: url("../images/powerbutton.png");	
}

}
.skills2 {
	padding: 1% 2% 2% 0%;
	margin-left: 10%;
	list-style-image: url("../images/powerbutton.png"); 
	line-height: 110%;
}

.skills2 ul li {
	list-style-image: url("../images/powerbutton.png"); 
}
ul.skills2 li {
	list-style-image: url("../images/powerbutton.png"); 
	line-height: 0%;
}

@media (max-width: 600px) {
	nav, nav a {
		display: none;
	}
	section {
		margin: 0%;
	}
}

/*portfolio and photography galleries*/
#gallery, #portfolio {
   line-height:0;
   -webkit-column-count:5; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:5;
   -moz-column-gap:5px;
   column-count:5;
   column-gap:5px;
}

#gallery img, #portfolio img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
}

@media (max-width: 1200px) {
   #gallery, #portfolio {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
   }
}

@media (max-width: 1000px) {
   #gallery, #portfolio {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
   }
}

@media (max-width: 800px) {
   #gallery, #portfolio {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}

@media (max-width: 400px) {
   #gallery, #portfolio {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}