@import url('https://fonts.googleapis.com/css?family=Quicksand');

body {
	font-family: Quicksand, sans-serif;
	color: #4d4d4d;
	margin: 0px;

}

		header {
			margin: -10px -10px 0px -10px;
			background-image: url(images/background.png);
			background-color: #e2e9e7;
			text-align: center;
			border-bottom: #cccccc 8px solid;
			border-top: #cccccc 8px solid;
		}

		header img {
			position: relative;
			margin: 15px auto;
			max-width: 250px;
}

/******************************************
* Home Page 
******************************************/

.responsive ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	margin: 20px 0px;
  }
  
 .responsive ol {
    display: grid;
  }
  
 ul li img {
  display: block;
  width: 100%;
  opacity: 0.6;
  border-radius: 500px;
}

ul {
  list-style: none;
  padding: 10px;
}

ol {
  list-style: none;
}

ul li img:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

ul li img:active {
	width: 97%;
	border: #96b2ab 5px solid;
	opacity: 0.5;
}

/******************************************
* Content Pages 
******************************************/

p a:link {
	text-decoration: none;
	color: #7c9c93;
}

p a:visited {
	text-decoration: none;
	color: #7c9c93;
}

p a:hover {
	text-decoration: none;
	color: #4d4d4d;
}

p a:active {
	text-decoration: none;
	color: #cccccc;
}

li a:link {
	text-decoration: none;
	color: #7c9c93;
}

li a:visited {
	text-decoration: none;
	color: #7c9c93;
}

li a:hover {
	text-decoration: none;
	color: #4d4d4d;
}

li a:active {
	text-decoration: none;
	color: #cccccc;
}

.navlink a:link {
	text-decoration: none;
	font-weight: bold;
	padding: 10px;
	color: #7c9c93;
	background-color: #e2e9e7;
	margin-right: 10px;
	border-radius: 20px;
}

.navlink a:visited {
	color: #7c9c93;
	background-color: #e2e9e7;
}

.navlink a:hover {
	color: white;
	background-color: #cccccc;
}

.navlink a:active {
	color: #4d4d4d;
	background-color: white;
}

h2 {
	color: #737373;
	font-weight: normal;
}

/******************************************
* Small 300 - 700+ px 
******************************************/
@media (min-width: 300px) {
	
		.wrapper {
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: 300px auto;
			margin: 20px 0px 20px 0px;
			max-width: 600px;
		}

		.a {
			grid-column: 1;
			grid-row: 1;
			width: 300px;
			height: 300px;
			background-color: #e2e9e7;
			margin: 0px 0px 0px 0px;
			padding: 25px;
		}

		.c {
			grid-column: 1;
			grid-row: 2;
			max-width: 310px;
			margin: 40px 0px 0px 0px;
			padding: 0px 20px 0px 20px;			
		}
		
		.slider {
			grid-column: 1;
			grid-row: 1;
			position:relative;
			height:300px;
			width:300px;
			overflow: hidden;
			margin: 0;			
		}

		.slider img {
			width: 300px;
			height: 300px;
			position:absolute;
			left:0;
		}
		
		.bigspacer {
			height: 10px;
		}
		
		.navlink {
			width: 280px;
			margin: 25px 0px 15px 0px;
		}

}

/******************************************
* Medium 700 - 1000+ px 
******************************************/
@media (min-width: 700px) {
	
		.wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			margin: 30px auto 30px auto;
			max-width: 1000px;
		}

		.a {
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			width: 400px;
			height: 400px;
			background-color: #e2e9e7;
			margin: 0px 0px 0px 30px;
			padding: 30px;
		}

		.c {
			grid-column: 2 / 4;
			grid-row: 1 / 3;
			max-width: 500px;
			margin: -30px 0px 0px 0px;
			padding: 0px 30px 0px 30px;
		}
		
		.slider {
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			position:relative;
			height:400px;
			width:400px;
			overflow: hidden;
			margin: 0px;
		}

		.slider img {
			width: 400px;
			height: 400px;
			position:absolute;
			left:0;
		}
		
		.bigspacer {
			height: 30px;
		}

		.smallspacer {
			height: 20px;
		}

		.navlink {
			width: 280px;
			margin: 15px 0px 15px 0px;
		}
}

/******************************************
* Large 1000 - 1500+ px 
******************************************/
@media (min-width: 1000px) {


		.wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			max-width: 1500px;
			margin: 30px auto 30px auto;
		}

		.a {
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			width: 500px;
			height: 500px;
			background-color: #e2e9e7;
			padding: 30px;
		}

		.c {
			grid-column: 2 / 4;
			grid-row: 1 / 3;
			max-width: 1000px;
		}
		
		.slider {
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			position:relative;
			height:500px;
			width:500px;
			overflow: hidden;
			margin: 0;
		}

		.slider img {
			width: 500px;
			height: 500px;
			position:absolute;
			left:0;
		}
		
		.bigspacer {
			height: 120px;
		}

		.smallspacer {
			height: 30px;
		}
		
		.navlink {
			width: 280px;
			margin: 25px 0px 15px 0px;
		}
		
}

/******************************************
* Slideshow 
******************************************/

		.slider img {
			animation-name:sliderFadeInOut;
			animation-timing-function:ease-in-out;
			animation-iteration-count:infinite;
			animation-duration: 80s;

			-webkit-animation-name:sliderFadeInOut;
			-webkit-animation-timing-function:ease-in-out;
			-webkit-animation-iteration-count:infinite;
			-webkit-animation-duration: 80s;

			-moz-animation-name:sliderFadeInOut;
			-moz-animation-timing-function:ease-in-out;
			-moz-animation-iteration-count:infinite;
			-moz-animation-duration: 80s;
		}

		@keyframes sliderFadeInOut { 
		  0% { opacity:1; } 
		  4% { opacity:1; } 
		  5% { opacity:0; } 
		  99% { opacity:0; } 
		  100% { opacity:1; } 
		} 

		@-webkit-keyframes sliderFadeInOut { 
		  0% { opacity:1; } 
		  4% { opacity:1; } 
		  5% { opacity:0; } 
		  99% { opacity:0; } 
		  100% { opacity:1; } 
		} 

		@-moz-keyframes sliderFadeInOut { 
		  0% { opacity:1; } 
		  4% { opacity:1; } 
		  5% { opacity:0; } 
		  99% { opacity:0; } 
		  100% { opacity:1; } 
		} 

		.slider img:nth-of-type(1) {
			animation-delay:76s;
			-webkit-animation-delay:76s;
			-moz-animation-delay:76s;
		}

		.slider img:nth-of-type(2) {
			animation-delay:72s;
			-webkit-animation-delay:72s;
			-moz-animation-delay:72s;
		}

		.slider img:nth-of-type(3) {
			animation-delay:68s;
			-webkit-animation-delay:68s;
			-moz-animation-delay:68s;
		}

		.slider img:nth-of-type(4) {
			animation-delay:64s;
			-webkit-animation-delay:64s;
			-moz-animation-delay:64s;
		}

		.slider img:nth-of-type(5) {
			animation-delay:60s;
			-webkit-animation-delay:60s;
			-moz-animation-delay:60s;
		}

		.slider img:nth-of-type(6) {
			animation-delay:56s;
			-webkit-animation-delay:56s;
			-moz-animation-delay:56s;
		}
		
		.slider img:nth-of-type(7) {
			animation-delay:52s;
			-webkit-animation-delay:52s;
			-moz-animation-delay:52s;
		}

		.slider img:nth-of-type(8) {
			animation-delay:48s;
			-webkit-animation-delay:48s;
			-moz-animation-delay:48s;
		}

		.slider img:nth-of-type(9) {
			animation-delay:44s;
			-webkit-animation-delay:44s;
			-moz-animation-delay:44s;
		}

		.slider img:nth-of-type(10) {
			animation-delay:40s;
			-webkit-animation-delay:40s;
			-moz-animation-delay:40s;
		}

		.slider img:nth-of-type(11) {
			animation-delay:36s;
			-webkit-animation-delay:36s;
			-moz-animation-delay:36s;
		}

		.slider img:nth-of-type(12) {
			animation-delay:32s;
			-webkit-animation-delay:32s;
			-moz-animation-delay:32s;
		}	

		.slider img:nth-of-type(13) {
			animation-delay:28s;
			-webkit-animation-delay:28s;
			-moz-animation-delay:28s;
		}

		.slider img:nth-of-type(14) {
			animation-delay:24s;
			-webkit-animation-delay:24s;
			-moz-animation-delay:24s;
		}

		.slider img:nth-of-type(15) {
			animation-delay:20s;
			-webkit-animation-delay:20s;
			-moz-animation-delay:20s;
		}

		.slider img:nth-of-type(16) {
			animation-delay:16s;
			-webkit-animation-delay:16s;
			-moz-animation-delay:16s;
		}

		.slider img:nth-of-type(17) {
			animation-delay:12s;
			-webkit-animation-delay:12s;
			-moz-animation-delay:12s;
		}

		.slider img:nth-of-type(18) {
			animation-delay:8s;
			-webkit-animation-delay:8s;
			-moz-animation-delay:8s;
		}	

		.slider img:nth-of-type(19) {
			animation-delay:4s;
			-webkit-animation-delay:4s;
			-moz-animation-delay:4s;
		}

		.slider img:nth-of-type(20) {
			animation-delay:0s;
			-webkit-animation-delay:0s;
			-moz-animation-delay:0s;
		}	

/******************************************
* Footer
******************************************/

footer {
	font-family: 'Quicksand', sans-serif;
	text-align: center;
	color: #737373;
	background: #e2e9e7;
	border-top: #cccccc 8px solid;
	min-height: 55px;
	width: 100%;
	position: absolute;
	margin-right: -10px;
	margin-bottom: -10px;
	margin-left: -10px;	
}