// theme name = craftyness

// let's start...

.custom-fit{
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

body{
	pre, ins{
	background-color: #545BB7;
	}
}

#masthead{
	background-color: #FFFFFF;
	font-family: 'lato';
	padding-top: 10px;
	.custom-fit;
	
	.site-branding{
		float: left;
		width: 35%;
		@media screen and (max-width:1250px){
			float:none;
			.custom-fit;
			text-align: center;
		}
		
	.site-title{
		margin:0;
		margin-top: -4px;
		a, a:visited{
			color: #35495D;
			font-size: 28px;
			font-weight: bolder;
		}
		
		a:hover{
			color: #29BB9C;
		}
	}
	} 
	
// ------    top menu ------- //
	
	.main-navigation{
		clear: none;
		float: right;
		width: 65%;
		text-transform: uppercase;
		font-family: 'lato';
		
		@media screen and (max-width:1250px){
			max-width: 100%;
			float:none;
			margin: 0 auto;
		}
		
		a, a:visited{	
			color: #BDC3C7;
			padding: 16px 0px;
			display: block;
			font-size: 13px;
			font-weight: 600;
		}
		
		li{
			border-radius: 3px;
			padding: 0 10px;			
			&:hover{
			background-color: #29BB9C;
			a{
				color: white;
			}
			}
		}
				
		ul li ul{
			background-color: #29BB9C;
			top:3.6em;
			font-size: 13px;
			text-transform: none;
			margin-left: -10px;
			border-radius: 2px;

			li{
				padding: 0 8px;
						&:hover{
						background-color: lighten(#29BB9C,5%);
						}

					a, a:visited{
						padding: 6px;
					}
			}
			}
			
			ul li ul li ul{
				top:0px;
				margin-left:0;
			}
			
			.tinynav{
				display:none;
				@media screen and (max-width:768px){
				display: block;
				width: 90%;
				margin: 0 auto;
			}
			
/*
			@media screen and (max-width:470px){
				max-width: 100%;
				margin: 0 2%;
			}
*/
	} 

	} // main-navigation ends here
	
	
			.site-description{
			color: #BDC3C7;
			font-family: 'Lato';
			font-size:22px;
			font-weight: 200;
			padding-top: 10px;
			float: left;
			max-width: 50%;
			
			@media screen and (max-width:1250px){
				float:none;
				max-width: 90%;
				margin: 0 5%;
				text-align: center;
			}
		}
		
		.social-icons{
			float: left;
			max-width: 30%;
			margin-left: 28%;
			margin-top: 30px;
			@media screen and (max-width:1250px){
				text-align: center;
				float:none;
				max-width: 100%;
				margin-top: 15px;
				margin-left: 0;
			}
			img{
				width: 32px;
				height: 32px;
				&:hover{
					-webkit-filter:brightness(0.8);
				}
			}
		}


} // masthead ends here

// home content styling

.site-content{
	background-color: #384B5D;
}

#home-title{ 
		text-align: center;
		.custom-fit;
	span{

	color: white;
	text-decoration: underline;
	font-size: 24px;
	font-weight: 200;
	font-family: 'lato';
	text-transform: uppercase;
	}
}


.home-content-area{
	margin: 3.5em 10% 0 10%;
	@media screen and (max-width:1000px){
		margin: 3.5em 5% 0 5%;
	}
	
	@media screen and (max-width:880px){
		margin: 3.5em 2% 0 2%;
	}
}

.home-post{
	width: 25%;
	float:left;
	height:320px;
	text-align: center;
	@media screen and (max-width: 1280px){
		height:280px;
	}
	
	@media screen and (max-width:1160px){
		width: 33%;
			
	}
	
	@media screen and (max-width:880px){
		width: 50%;
		height: 330px;
	}
	@media screen and (max-width:768px){
		height: 300px;
	}
	
	@media screen and (max-width:650px){
		width: 50%;
		height: 280px;		
	}
	
	@media screen and (max-width:470px){
		width: 100%;
		height: 320px;
	}

	
	.entry-title{
		.custom-fit;
		text-align: center;
		font-family: 'Lato';
		font-size: 16px;
		font-weight: bold;
		max-width: 250px;
		margin-left: 10%;
		@media screen and (max-width:470px){
			margin: 0 15%;
	}

		a, a:visited{
			color:  #BDC3C7;
			&:hover{
				color: #ECF0F1;
			}
		}
		}
	
	img{
		border-radius: 4px;
		box-shadow:5px 5px 0px darken(#384B5D,5%);
		width: 250px;
		height: 180px;
		position: relative; // this is done for the button press effect

		@media screen and (max-width: 1280px){
			width: 220px;
			height: 150px;
		}
		
		@media screen and (max-width:1160px){
			width: 250px;
			height: 180px;
		}
	
		@media screen and (max-width:880px){
			width: 360px;
			height: 240px;
		}
		
		@media screen and (max-width:768px){
			width: 300px;
			height: 200px;
		}
		
		@media screen and (max-width:650px){
			width: 250px;
			height: 180px;
		}
		
		@media screen and (max-width:550px){
			width: 220px;
			height: 150px;
		}
		
		@media screen and (max-width:470px){
			width: 340px;
			height: 220px;
		}
		
		&:active{
			box-shadow: none;
			left:3px;
			top:3px;
		}
	}
}

// single post styling 

.content-font{
	color: white;
	font-family: 'Lato';
	a, a:visited{
		color: #00bfff;
		&:hover{
			color: darken(#00bfff,10%)
		}
	}
}

.content-area{
	width: 45%;
	margin: 0 5% 0 10%;
	float: left;
	.content-font;
	@media screen and (max-width:550px){
		float:none;
		width: 90%;
		margin:0 5%;
	}
}

.widget-area{
	width: 25%;
	margin: 20px 10% 0 5%;
	float: right;
	
	ul{
		margin:0;
	}
	.content-font;
	@media screen and (max-width:550px){
		float:none;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
		a, a:visited{
		color: #d5d5d5;
		&:hover{
			color: #00bfff;
		}
	}
}

.single-post-image{
	margin-bottom: 10px;
	img{
		box-shadow:5px 5px 3px darken(#384B5D,5%);
	}
}

// footer styling

.increase-height{
  content: "";
  display: table;
  clear: both;
}

#custom-footer{
	.custom-fit;
	padding-bottom: 10px;
	background-color: #FFFFFF;
	.increase-height;
}

.footer-font{
	color:#BDC3C7;
	font-family: 'lato';
	font-weight: bold;
	a, a:visited{
		color:#BDC3C7;
	&:hover{
		color: darken(#BDC3C7,20%);
		}
	}

}

.four-columns{
	margin-top: 20px;
	margin-left: 5%;
	width: 28%;
	float: left;
	@media screen and (max-width:650px){
		width: 100%;
		float:none;
		margin: 0;
	}

	.footer-font;	
	h2{
		font-size:16px;
		text-transform: uppercase;
	}
	ul{	

		padding:0;
		font-size:14px;
		margin: 0;
		list-style: none;
	}
}

.site-footer{
	margin-top: 20px;
	.custom-fit;
	border-top: 1px solid #ECF0F1;
	background-color: #FFFFFF;
	padding:15px 0;
	.footer-font;
	font-size: 12px;
	font-weight: 600;
}

// pagination //

.pagination {
clear:both;
font-size:11px;
position: relative;
bottom: 2em;
margin-left: 40%;
text-align: center;
@media screen and (max-width:470px){
	margin-left: 25%;
}
}
 
.pagination span, .pagination a {
display:block;
float:left;
padding:6px 12px 5px 12px;
text-decoration:none;
width:auto;
color:#fff;
background: #2C353C;
margin-left: 5px;
}
 
.pagination a:hover{
color:#fff;
background: #29BB9C;
}
 
.pagination .current{
padding:6px 12px 5px 12px;
background: #29BB9C;
color:#fff;
}