body {

	background-image: url("images/cream_pixels.png");
}

.work{
	color: white;
	font-weight:bold;
}

.comic{
	text-align: center;


}
.chapel{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
         background:url(images/project_thumbnails/one_thumb.jpg);
  background-size:cover; clip-path: circle(123px at center);
overflow:hidden;}


.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.js-video.widescreen {
  padding-bottom: 56.34%;
}

.js-video.vimeo {
  padding-top: 0;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.email{
	color:#B11928;
}




.quotey{
font-family: 'Raleway', sans-serif;
}


@media only screen and (max-width:3000px){
	#bump{
	height:45px;
	
}
	/*
	.header_splash{
		margin-top:63px;
	}*/
	
}

@media only screen and (max-width: 799px) {
#bump{
	height:125px;
	
}
	/*.header_splash{
		margin-top:50px;
	}*/


}



.hello{
	margin-top: 100px;
	font-size: 3em;
	letter-spacing:0em;
	visibility:visible;
}


.labels{
font-size: 2em;
font-weight: 900;
}


.greeting{
	margin-top: 100px;
	font-size: 3em;
	letter-spacing:0em;
}

.talk{
	margin-top: 40px;
}

@media only screen and (max-width: 650px) and (min-width: 100px) {
	.hello{
	margin-top: 100px;
	font-size: 2em;
	letter-spacing:0em;
	visibility:visible;
	
}


}


.avatar{
	margin-top:50px;
	margin-bottom:50px;
	
}

.bio{
	margin-top: 50px;
	
}





	a:hover{
	color:#B11928;
}

section{
	width:100%;
	padding:10%, 0;
}

figure{
	margin:0;
	
}

	#bumper{
		background: transparent url('images/background_photos/books2.png') no-repeat center center fixed;
		background-color:  #B11928;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top:3.5%;
	height:300px;
	
	}
	

.descrip{
	text-align:center;
	float:left;
}
	
	.logo{
		padding-top:30px;
		text-align:center;
		
	}
	
	@media only screen and (max-width: 800px) { 
		
		.logo{
		padding-top:190px;
		text-align:center;
	}
		
	}
		
		#TITLES{
	
			background: transparent url('images/background_photos/rootcellar.jpg') no-repeat center center fixed;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
			background-color:#2E2925;
		}
		
		#dividers{
			height:100px;
			background: transparent url('images/otf_crumpled_paper_01.jpg') no-repeat center center fixed;
		}
		
		.header_splash{
			text-align:center;
			
		}
	
	#logo, .columns{
		margin-bottom: 10px;
	}
	#logo{
		padding-top:4%;
		
		
		
	}
	
	
	/*
	#icon-wrapper{
	width:100%;
	float:left;
	height:300px;
}


*/
.icons {
	width:25%;
	float:left;
	position:relative;
}


.icon-slide-container{
	height:200px;
	overflow:hidden;
	text-align: left;
	position: absolute;
	float: left;
	width: 200px;
	
}

.slide-icon{
  width:200px;
  height:auto;
  position:absolute;
  overflow:hidden;
  margin-top:-200px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}
	
.slide-icon:hover{
  position:absolute;
  margin-top:0;
}

#header{
	background-color:rgba(255,255,255,.80);
	position:fixed;
	z-index: 10;
}


#gears{
	background: transparent url('images/banner/banner.png') no-repeat center center fixed;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color:#B11928;
	height:200px;
	
}



#herobanner{
	background: transparent url('images/background_photos/grain.jpg') no-repeat center center fixed;
	background-color:  transparent;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top:3.5%;
	height:100%;

	
}

	.filler{
		height:400px;
	}
	#thered{
			/*background: transparent url('images/background_photos/close_stamp.png') no-repeat center center fixed;*/
	background-color:  #B11928;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top:3.5%;
	
	
	}	
	
	
	.bumper2{
		height:150px;
	}
	
	.logo_banner{
	text-align:center;
	}


	#sketch{
		/**background: transparent url('images/background_photos/cards.png') no-repeat center center fixed;**/
	background-color:  white;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top:3.5%;
		
		
		
	}
	
	
	
/**Project Start**/

	.sts{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
         
          
          background:url(images/project_thumbnails/sts.jpg);
  background-size:cover;

  clip-path: circle(123px at center);

overflow:hidden;}

	.zts{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
         
          
          background:url(images/project_thumbnails/zateca.jpg);
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}

.future{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
         background:url(images/project_thumbnails/IT_project_thumbnail.jpg
         );
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}
.tx{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          background:url(images/project_thumbnails/tx_thumb.jpg);
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}


.recharge{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          background:url(images/project_thumbnails/uj_thumb.jpg);
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}

.richard{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          background:url(images/project_thumbnails/jardine_season_thumb.jpg);
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}

.fly{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
         background:url(images/project_thumbnails/st_project_thumbnail.jpg);
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}

.dutch{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
         background:url(images/project_thumbnails/journalism.jpg);
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}

.amys{ 
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
background:url(images/project_thumbnails/IT2_thumb.jpg);
  background-size:cover;
clip-path: circle(123px at center);
overflow:hidden;}






	
	/***Project End**/
	
	.overlay    {  background:rgba(225,225,153,.75);
               text-align:center;
               padding:45px 0 45px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
              }

.sts:hover .overlay {
               opacity:1;}
.zts:hover .overlay {
               opacity: 1;}
.future:hover .overlay {
               opacity:1;}
.tx:hover .overlay {
               opacity:1;}
.chapel:hover .overlay {
               opacity:1;}
.hive:hover .overlay {
               opacity:1;}
.richard:hover .overlay {
               opacity:1;}
.recharge:hover .overlay {
               opacity:1;}
 .fly:hover .overlay {
               opacity:1;}
.dutch:hover .overlay {
               opacity:1;}
.amys:hover .overlay {
               opacity:1;}
.plus       {  font-family:Helvetica;
				font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:3em;
               margin:25px;}

	
	#slider2{
		width:100%;
	}
	
	
	
	.slide{
		width:100%;
		max-width:100%;
		background-color:#B11928;
		height:200px;
	}
	

	

#main, .blurb{
	/*background-color: white;*/
	padding-left:0px;
	padding-right:0px;
	font-size: 1.4em;
	color:black;
	font-family:'PT Sans', sans-serif;
	width:90%;
}

	#posters{
		
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color:white;
		padding-top:5%;
	}

.grad{
	text-align:center;
}
	


	.columns,.p{
		font-size:100%;
	}
	
.topnav{
	text-align: right;
	margin-right:20px;
	
}