body{
	text-align: center;
	font: 15px/1.5 Arial,Helvetica,sans-serif;
	padding:0;
	margin:0;
	background-color:#333231;
	}
/* Global */
	a:link{
		text-decoration: none;
		color: #e7e7e7;
	}
	
	a:visited{
		text-decoration: none;
		color: #e7e7e7;
	}

	.container{
			width:95%;
			margin-left:auto;
			margin-right:auto;
			overflow:hidden;
	}
	ul{
			margin:0;
			padding:0;
	}
	.current{
		color:#ffffff;
	}

/* Button	 */
.button {
  background-color: #776e69;
  border: 4px solid #776e69;
  border-radius: 4px;
  color: #e7e7e7;
  padding: 10px 26px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

.button:hover{
	cursor: pointer;
	background-color: #333231;
}
	
/* footer */
	footer{
	padding:20px;
	color:#ffffff;
	background-color:#776e69;
	text-align:center;
	}

/* Header */
	header{
			background:#776e69;
			padding-top:5px;
			padding-bottom:5px;
			min-height:30px;
			width:100%;
	}
	header a{
		color:#d8d8d8;
		text-decoration:none;
		text-transform:uppercase;
		font-size:25px;
		padding: 5px;
	}
	header a:hover{
		color: #fff;
		background-color: #333231;
		padding: 5px;
		border-radius: 4px;
		
	}
	header li{
			float:center;
			display:inline;
			padding: 0 10px 0 10px;
	}
	
	/*about */
	
	#aboutcomms{
	text-align:center;
	font: 20px Arial,Helvetica,sans-serif;
	color:#fff;
	padding-top:30px;
	padding-bottom:30px;
	}

	#aboutcomms img{
	width:500px;
	border: solid 3px #b64a3e;
	}
	
	#aboutcomms .aboutcommhead{
	background-color: rgba(0,0,0,0.6);
	padding: 10px;
	font-size:40px;
	}
	
	#aboutcomms .fullscene img{
		width:70%;
	}

/*Front Page*/

	#homepage {
	padding: 10px;
    margin-left:auto;
	margin-right:auto;
    border:none;
    width: 70%;
	}
	#homepage img {
	width: 100%;
	height: auto;
	}

	#homepage .desc {
	padding: 10px;
	text-align: center;
	}
	
/* The dots/bullets/indicators */
/* .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
} */

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* Galleries */
	#thumbgallery .gallery {
	background-color: #1C1C1B;
	margin: 5px;
    float: left;
	padding-top:30px;
	padding-bottom:30px;
}

	#thumbgallery .gallery img:hover {
	 filter: grayscale(0%);
	 text-decoration:none;
	 cursor: pointer;
}

	#thumbgallery .gallery img {
	filter: grayscale(65%);
	padding: 5px; /* Some padding */
	width: 200px; /* Set a small width */
	border-radius: 8px;
}

	#thumbgallery .desc {
	padding: 15px;
	text-align: center;
}

/* Sketchbook */
	#sketchbook .page {
	/* background-image: url('sketchbookbg.jpg'); */
	margin: 5px;
    float: left;
	padding-top:20px;
	padding-bottom:20px;
	/* width: 280px; */
}

	#sketchbook .page img {
	padding: 5px; /* Some padding */
	max-height: 500px; /* Set a small width */
	max-width: 100%;
}

	#sketchbook .desc {
	padding: 15px;
	text-align: center;
}

/* whatsnew */

	#whatsnew .page {
	padding-top:20px;
	padding-bottom:20px;
}

	#whatsnew .page figure {
	background-color: #776e69;
	color: white;
	font-size: 20px;
	padding-top: 20px;
	padding-bottom:20px;
	border-radius: 20px;
	width: 70%;
	margin: 0 auto;
}	

	#whatsnew .page img {
	width: 90%;
	border-radius: 8px;
	}
	
/* projects */
	
	#projects {
	margin-top:30px;
	margin-bottom:30px;
	text-align:center;
	font-size:25px;
	color:#fff;
	padding-top:100px;
	padding-bottom:100px;
	}
	
	#projects a:hover{
	color: #fff;
	background-color: #333231;
	padding: px;
	border-bottom-style: dashed;
	border-color: #776e69;
	}
	
	#projects .aboutproject {
	margin-top:40px;
	text-align:center;
	padding:15px;
    margin-left:auto;
	margin-right:auto;
    border:none;
	font-size:20px;
	color:#fff;
	}
	
	#projects .aboutproject img {
	width: 60%;
	height: auto;
	}	
	
	#projects .desc {
	padding: 10px;
	text-align: center;
	}
/* contact */
	
	#contact {
	margin-top:40px;
	margin-bottom:40px;
	text-align:center;
	font-size:20px;
	color:#fff;
	}
	
	#contact a:hover{
	color: #fff;
	background-color: #333231;
	padding: 2px;
	border-bottom-style: dashed;
	border-color: #776e69;
	}
	
	#contact img {
	width: 150px;
	}
	
/*media queries*/
@media(max-width: 768px){

	header,
	header nav,
	header nav li,
	
	header a{
		float:none;
		display:block;
		font-size:20px;
	}

	#headerimage img{
		padding-top:5px;
		padding-bottom:5px;
		width:100%;
	}
	
	#homepage {
	padding:10px;
    margin-left:auto;
	margin-right:auto;
    border:none;
    width: 100%;
	}
	
		#projects {
	margin-top:30px;
	margin-bottom:30px;
	text-align:center;
	font-size:25px;
	color:#fff;
	padding-top:50px;
	padding-bottom:50px;
	}
	
	#slideshow .slideshow-container {
	width: 100%;
	position: relative;
	margin: auto;
	top: 20px;
	}
  
	#slideshow .text {
	color: #f2f2f2;
	font-size: 20px;
	padding: 5px 5px;
  	background-color: #000000;
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	}


	#slideshow .numbertext {
  color: #f2f2f2;
  font-size: 8px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
	}
	
	#thumbgallery .gallery img {
	filter: grayscale(65%);
	padding: 2px; /* Some padding */
	width: 100px; /* Set a small width */
	}
	
	#sketchbook .page img {
	padding: 5px; /* Some padding */
	max-height: 300px; /* Set a small width */
	max-width: 100%;
	}
	
	#aboutcomms {
	font-size:20px;
	}
	
	#aboutcomms img {
	width: 95%;
	}
	
	#aboutcomms .aboutcommhead{
	padding: 10px;
	font-size:30px;
	}
	
	#whatsnew .page figure {
	font-size: 15px;
}