/* This File Contains The CSS For The Clarity Theme Responsive Layout */



/* Custom Drop-Down
================================================== */
#masternav .selector option{ background:#eee; -webkit-appearance:none; padding: 5px; }
#masternav .selector, 
#masternav .selector span{ cursor: pointer !important; -webkit-font-smoothing:antialiased; }
#masternav .selector, 
#masternav .selector *{ margin:0; padding:0; }
#masternav .selector select{ top:0px; left:0px; }
#masternav .selector{ width: 100%; font-size:14px;  font-weight:bold; }
#masternav .selector span:after { padding-left: 5px; padding-right: 5px; content: "\f078"; font-family: 'FontAwesome'; }
#masternav .selector span{ cursor:pointer; }
#masternav .selector{ height: 30px; line-height: 30px; display:-moz-inline-box;  display:inline-block;  vertical-align:middle;  zoom:1;  *display:inline; }
#masternav .selector select:focus{outline:0; }
#masternav .selector{ position:realtive;  padding-left:10px;  overflow:hidden; }
#masternav .selector span{ display:block;  overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap; }
#masternav .selector select{ position:absolute;  height:35px;  background:none;  width:97%; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;  font-size:12px;  font-weight:500;  border:0 !important; }






/* Apply To All Responsive Layouts
================================================== */
img{ max-width: 100%; 
	display: block;
    	margin-left: auto;
    	margin-right: auto;
	border: 10px solid #FFFFFF;
    	box-shadow: 1px 5px 10px #888888;

}

/*hide redundant menu*/
#masternav select { display: none; width: 70% !important; }
#masternav .selector { display: none; margin-top: 5px; }
#masternav ul { display: none; }

@media only screen and (device-width: 768px) {

}


/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 740px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	#wrap, #footer-wrap, #footer-bottom-wrap{ width: 680px; }
	.hp-highlight, .hp-highlight-v2, .hp-highlight-v3, .portfolio-item, .portfolio-item-home, .home-entry, { width: 33%;  }
	#footer-one,#footer-two,#footer-three,#footer-four{ width: 155px;  }
	#home-tagline{ font-size: 21px; }
	#search { text-indent: -9999px; }
	.loop-entry-thumbnail{width: 35%;}
}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 420px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#wrap, #footer-wrap, #footer-bottom-wrap{ width: 420px; }
	.home-entry { width: 100%; margin-right: 0px; }
	
	#logo a{font-size: 650%;}

	h1 {font-size: 200%;}
	h2 { font-size: 150% }
	h3 { font-size: 125%;}
	h4 { font-size: 110%;}

	.responsive-clear{ clear: both; }
	
	.portfolio-item-home a img{ width: 80%;}
	
	.portfolio-item{ width: 200px; margin-right: 15px; }

	.loop-entry-thumbnail{width: 33%;}
	
	ul.filter{ margin-bottom: 0; }

	.alignright { float:none;
	width: 100%;
	text-align: center;}

	.alignleft { float:none; 
	min-width: 100%;
	text-align: center;
	padding-bottom: 10px}

}



/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 290px */
@media only screen and (max-width: 479px) {
	
	#logo { text-align: center; width: 100%; display:block;}
	
	#logo a{font-size: 450%;}

	#masterhead { padding: 40px 0px 30px 0px; border-bottom: 3px solid #F4F3EF;}

	#wrap, #footer-wrap, #footer-bottom-wrap{ width: 280px; }
	.home-entry, { width: 250px; margin-right: auto; margin-left: auto; }

	#site-description{
	display: none;}

	h1 {font-size: 175%;}
	h2 { font-size: 140% }
	h3 { font-size: 115%;}
	h4 { font-size: 100%;}


	#nav2 li { display: none; }
	#nav2 ul { display: none; }
	#nav2 { display: none; }
	.nav2cont { display: none; }

	/*display dropdown nav*/
	#masternav .selector,
	#masternav select { display: inline-block; }
	#masternav ul { display: none; }
	#masternav { padding: 0; 
		height: 40px; 
		width: 100%; 
		text-align: center; 
		display:block; 
		line-height: 30px; 
		float: none; 
		padding: 0 0; 
		margin: 30px 0px 0px 0px; 
		color: #fff; 
		bottom: 0; 
		right: 0; 
		cursor: pointer; }



	.home-entry-description { 
	margin-left: 0px;
	margin-right: 0px;
	}

	.read-more {
	padding-bottom: 40px;
	}

	.alignright { float:none;
	width: 100%;
	text-align: center;}

	.alignleft { float:none; 
	min-width: 100%;
	text-align: center;
	padding-bottom: 10px}
	
	.loop-entry-meta{ display: none; }
	.loop-entry h2{ margin-bottom: 10px; }
		
	#page-heading{ text-align: center; }
	
	#footer-menu, #copyright, #back-to-top{ width: 100%; text-align: center; }