/* ==========================================================================
   chrisprotas.com 1-27-15
   ========================================================================== */

	html, body, #landing_body .wrapper{
		height: 100%;
		overflow: auto;
	}
	
	html{
		background-color: black;
	}
	
	body{
		font-family: "Josefin Sans", sans-serif;
		color: white;
		background: no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.wrapper{
		background-color: rgba(0, 0, 0, .9);
		min-height: 100%;
		/* equal to footer height */
		margin-bottom: -50px;
	}
	
	.wrapper:after {
	  	content: "";
	  	display: block;
	}
	
	.footer, .wrapper:after {
		height: 50px; 
	}
	
	/* Landing Page */
	
	#landing_body .wrapper{
		background: none;
		margin-bottom: 0;
	}
	
	#landing_body .wrapper:after{
		content: none;
		display: none;
	}
	
	.wrapper h1{
		text-align: center;
		text-transform: uppercase;
		margin: 0 auto;
		height: 100%;
		width: 100%;
		display: table;
	}
	
	.wrapper h1 a{
		color: white;
		display: table-cell;
		vertical-align: middle;
	}
	
	.wrapper h1 a:active, .wrapper h1 a:hover, .wrapper h1 a:focus{
		text-decoration: none;
	}
	
	/* Home Navigation */
	
	nav{
		text-align: center;
	}
	
	nav>ul{
		display: inline-block;
		margin: 100px 0 50px;
	}
	
	nav ul{
		text-align: left;
		list-style-type: none;
		padding: 0;
		width: 310px;	
	}

	nav>ul>li{
		margin-bottom: 50px;
	}
	
	nav ul li div, h2 div{
		text-align: right;
		display: inline-block;
		width: 100px;
		max-height: 100px;
		margin-right: 25px;
	}
	
	nav ul li img, h2 div img{
		max-height: 100px;
		max-width: 100px;
	}
	
	nav ul li>a {
		font-size: 35px;
		text-transform: uppercase;
		vertical-align: -10px;
	}
	
	nav ul li ul{
		margin-top: 25px !important;
		height: 100%;
		display: none;
	}
	
	nav ul li ul li{
		display: table;
		margin-bottom: 25px;
	}
	
	nav ul li ul li:last-child{
		margin: 0;
	}
	
	nav ul li ul li div{
		max-height: 50px;
		width: 50px;
	}
	
	nav ul li ul li div a img{
		max-height: 50px;
		max-width: 50px;
		width: auto;
		height: auto;
	}
	
	nav ul li ul li>a{
		font-size: 16px;
		vertical-align: middle;
		display: table-cell;
	}
	
	#back_home_button{
		text-align: left;
	}
	
	#back_home_button a {
	  text-transform: uppercase;
	  display: inline-block;
	  margin-top: 25px;
	  margin-left: 25px;
	  vertical-align: top;
	}
	
	/* Content */
	
	h2{
		text-transform: uppercase;
		margin-bottom: 25px;
	}
	
	h2 div{
		vertical-align: 5px;
	}
	
	.content{
		padding: 0 15%;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	.content p{
		margin-bottom: 25px;
		margin-left: 125px;
		font-size: 16px;
	}
	
	.content p span{
		font-size: 16px !important;
		font-family: "Josefin Sans", sans-serif !important;
		color: white !important;
	}
	
	/* Painting Grid */
	
	@media (min-width: 768px){
		.container {
		  width: 100%;
		}
		.col-sm-6 {
		  width: 49%;
		}	
	}
	
	.painting_grid{
		margin: 50px auto;
		padding: 0 30px;
	}
	
	.painting_grid .row {
	  padding: 0;
	  list-style-type: none;
	  text-align: justify;
	}
	
	.painting_grid li.col-sm-6 {
	  display: inline-block;
	  float: none;
	  vertical-align: top;
	  margin-bottom: 50px;
	}
	
	.fancybox-title{
		font-family: "Josefin Sans", sans-serif;
		text-transform: uppercase;
		display: inline-block;	
	}
	
	/* Footer */
	
	.footer{
		text-align: center;
		text-transform: uppercase;
	}
	
	/* MISC */
	
	a, a:hover, a:active, a:focus{
		outline: none !important;
		text-decoration: none;
		color: white;
	}
	
	.drawing-overlay{
		position: fixed;
		bottom: 0;
		right: 0;
		max-height: 60%;
		max-width: 50%;
		z-index: 9999;
	}
	
	@media (max-width: 768px){
		
		.content{
			padding: 0 15px;
		}
		
		.content p{
			margin-left: 0;
		}
		
		h2 div{
			width: auto;
		}
		
		#back_home_button a {
			margin-top: 15px;
			margin-left: 15px;
		}
		
		h2{
			font-size: 16px;
			margin-top: 0;
		}
	
	}
	
	@media (max-width: 768px){
		nav>ul {
		  margin: 50px 0 0px;
		}
		.painting_grid{
			margin: 25px auto;
		}
		.content{
			margin-top: 25px;
			margin-bottom: 25px;
		}
		.painting_grid li.col-sm-6:last-child{
			margin-bottom: 0;
		}
		.drawing-overlay{
			max-height: 30%;
			max-width: 25%;
		}
	}