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

/* Apply To All Responsive Layouts
================================================== */
img{ max-width: 100%; }

@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; }
	#masterhead { width: 680px; max-width: 680px; }
	#header-left, #masterhead #left { flex: 0 0 190px; width: 190px; }
	#header-right, #masterhead #right { flex: 0 0 490px; width: 490px; }
	#logo img, #logo .custom-logo { width: 170px; height: 170px; }
	#title-wrap { font-size: 280%; padding-top: 0; margin-bottom: 15px; }
	.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%;}

	/*display dropdown nav*/
	#masternav .selector,
	#masternav select {
		display: inline-block; 
		background: #FBFCFB;
		color: #666;
	}
	#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: 20px 0px 0px 0px; 
		color: #fff; 
		bottom: 0; 
		right: 0; 
		cursor: pointer; 
		border-top: 0px;
		}
	#nav-underline {
		border-top: 0px;
		}
	.front-page-row {
		display: block;
		margin-bottom: 20px;
	}
	.front-page-col-4,
	.front-page-col-8 {
		width: 100%;
		max-width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 20px;
	}
	#front-page-text {
		width: 100%;
		float: none;
		text-align: center;
	}
	.front-page-gallery-container,
	.front-page-default-gallery {
		width: 320px;
		margin: 0 auto;
	}
	#front-page-text img {
		float: none;
	}
	#front-page-text p {
		float: none;
		text-align: center;
		max-width: none;
	}
	.home-posts-container {
		float: none;
		width: 100%;
		max-width: 100%;
	}
	.home-posts {
		width: 210px;
		margin-right: 15px;
	}
	.home-posts:nth-child(3n) {
		margin-right: 0;
	}
	#front-page-widget-box {
		float: none;
		height: auto;
		margin-right: 0px;
		width: auto;
	}
}


/* #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; }
	#masterhead-container { min-height: auto; height: auto; display: block; }
	#masterhead { width: 420px; max-width: 100%; padding: 20px 10px; }
	#header-content, #masterhead #content { display: block; }
	#header-left, #masterhead #left { float: none; width: 100%; margin: 0 auto 15px auto; }
	#header-right, #masterhead #right { float: none; width: 100%; }
	#logo img, #logo .custom-logo { width: 150px; height: 150px; }
	#title-wrap { font-size: 240%; padding-top: 0; margin-bottom: 15px; }
	.home-entry { width: 100%; margin-right: 0px; }
	
	#logo a {font-size: 340%}

	/*display dropdown nav*/
	#masternav .selector,
	#masternav select {
		display: inline-block; 
		background: #FBFCFB;
		color: #666;
	}
	#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: 20px 0px 0px 0px; 
		color: #fff; 
		bottom: 0; 
		right: 0; 
		cursor: pointer; 
		border-top: 0px;
		}
	#nav-underline {
		border-top: 0px;
		}
	.front-page-row {
		display: block;
		margin-bottom: 20px;
	}
	.front-page-col-4,
	.front-page-col-8 {
		width: 100%;
		max-width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 25px;
	}
	#front-page-text {
		width: 100%;
		float: none;
		text-align: center;
	}
	.front-page-gallery-container,
	.front-page-default-gallery {
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}
	#front-page-text img {
		float: none;
	}
	#front-page-text p {
		float: none;
		text-align: center;
		max-width: none;
	}
	.home-posts-container {
		float: none;
		width: 100%;
		max-width: 100%;
	}
	.home-posts {
		width: 100%;
		float: none;
		height: auto;
		margin-right: 0;
		margin-bottom: 20px;
	}
	#front-page-widget-box {
		float: none;
		height: auto;
		margin-right: 0px;
		width: auto;
    }
	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}

	#sidebar {
    float: right;
    width: 100%;
	}

	.sidebar-post{
	float: left;
	width: 100%;
	margin:0 auto;
	}

}



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

/* Note: Design for a width of 290px */
	@media only screen and (max-width: 479px) {
	
	#wrap, #footer-wrap, #footer-bottom-wrap{ width: 280px; }
	#masterhead-container { min-height: auto; height: auto; display: block; }
	#masterhead { width: 280px; max-width: 100%; padding: 20px 5px; }
	#header-content, #masterhead #content { display: block; }
	#header-left, #masterhead #left { float: none; width: 100%; margin: 0 auto 15px auto; }
	#header-right, #masterhead #right { float: none; width: 100%; }
	#logo img, #logo .custom-logo { width: 140px; height: 140px; }
	#title-wrap { font-size: 180%; padding-top: 0; margin-bottom: 15px; }
	
	#logo { text-align: center; width: 100%; display:block;}
	
	#logo a{font-size: 255%;}

	#masterhead { padding: 20px 0px 30px 0px; }

	/*display dropdown nav*/
	#masternav .selector,
	#masternav select {
		display: inline-block; 
		background: #FBFCFB;
		color: #666;
	}
	#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: 20px 0px 0px 0px; 
		color: #fff; 
		bottom: 0; 
		right: 0; 
		cursor: pointer;
		border-top: 0px;
		}

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

	#site-description{
	display: none;}
	
	#nav-underline {
		border-top: 0px;
		}
	.front-page-row {
		display: block;
		margin-bottom: 20px;
	}
	.front-page-col-4,
	.front-page-col-8 {
		width: 100%;
		max-width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 25px;
	}
	#front-page-text {
		width: 100%;
		float: none;
		text-align: center;
	}
	.front-page-gallery-container,
	.front-page-default-gallery {
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	}
	#front-page-text img {
		float: none;
	}
	#front-page-text p {
		float: none;
		text-align: center;
		max-width: none;
	}
	.home-posts-container {
		float: none;
		width: 100%;
		max-width: 100%;
	}
	.home-posts {
		width: 100%;
		float: none;
		height: auto;
		margin-right: 0;
		margin-bottom: 20px;
	}
	#front-page-widget-box {
		float: none;
		height: auto;
		margin-right: 0px;
		width: auto;
	}
	
	h1 {font-size: 175%;}
	h2 { font-size: 140% }
	h3 { font-size: 115%;}
	h4 { font-size: 100%;}

	.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; }

	#sidebar {
    float: right;
    width: 100%;
	}

	.sidebar-post{
	float: left;
	width: 100%;
	margin:0 auto;
	}

	#footer-bottom {
		margin: 0;
	}
	

}