/* CSS Document */

body {
	background-color: #FFEECC;
	color: #6B4813;
	margin-left: 20%;
	margin-Right: 20%;
	border: 5px double black;
	padding: 10px 10px 10px 10px;
	font-family: "Times New Roman", sans;
	font-size: 24px;
}

a:link {
  color: #0A4D3A;
  /*color: rgb(23,178,134);*/
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #2E384F;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #069;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: #8ce;
  background-color: transparent;
  text-decoration: underline;
}

#heading {
  color: #7E3B00;
  margin: auto;
  text-align: center;
}

.heading2 {
  color: #5C3614;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: 200px;
}

div.desc {
  color: #494949;
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  height: 250px;
  margin: 12px 0;
}

.videoResponsive {
    padding: 0 6px;
  	float: left;
  	height: 250px;
  	margin: 12px 0;
 }

@media only screen and (max-width: 700px) {
  	body{
		font-size: 14px;
	}
	
	div.gallery img {
		height: auto;
	}
	
	.responsive {
    	width: 49.99999%;
    	margin: 16px 0;
		height: auto;
  	}
	
  	.videoResponsive {
    	width: 100%;
    	margin: 16px 0;
  	}
	
  	.video {
	  width: 100%;
	  height:200px;
  	}
}

@media only screen and (max-width: 500px) {
	body{
		font-size: 8px;
	}
	
	div.gallery img {
		height: auto;
	}
	
	.responsive {
    	width: 100%;
		height: auto;
  	}
  	.video {
	  	width: 100%;
	  	height:auto;
  	}
}

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