/* =================================================================== */
/* 
/*  Styleshout v3.5 Media Queries
/*  url:styleshout.com
/*  04-23-2015
/*
/* =================================================================== */


/* small screens
------------------------------------------------------------ */
@media only screen and (max-width:900px) {

	/* content sections */
	#page-content { padding-top: 25px; }
	#main { padding-right: 20px; }

	/* browse */
	#main .browse { padding-top: 0; }
	#main .browse .button { display: block; }
	#main .browse .button:first-child {	margin-right: 0; }

	/* sidebar styles */
	#sidebar h3 { font: 18px/30px 'notosans-bold', sans-serif; }
	
} /* 900 */


/* tablets 
------------------------------------------------------------ */
@media only screen and (max-width:800px) {

	/* content sections */
	#page-content { padding-top: 15px; }
	#main { padding-right: 0; }
	#sidebar {
		float: none;
		width: 85%;
		margin: 0 auto;		
		text-align: center;
	}

   /* header styles */
	header {	height: 240px; }
	header .logo { 
		left: 50px;
		z-index: 999991; 
	}
	header .row { padding: 0; }	

	/* header-ads */
   header .ad-wrap {
   	right: 0;
   	left: 0;
   	width: 100%;
   	top: 120px;
   	height: 120px;
   	background: #1E2124;   
   }
   header .ads {
   	margin: 0 auto;
   	width: 350px;
   	padding: 20px 30px;
   }
   header .ads img { margin-right: 20px; }

	/* mobile navigation */
	#nav-wrap {
		display: block;
		width: 100%;
		top: 0;
		left: 0;
	}
	#nav-wrap > a {		
		border: none;
		color: white;
		height: 60px;
		min-width: 80px;
		font-size: 12px;
		text-align: left;
		padding: 0;
		float: right;		
		position: relative;
		right: 30px;
		top: 25px;
	}
	#nav-wrap .menu-text {
		font: 15px/60px 'notosans-bold', sans-serif;
		text-transform: uppercase;
		letter-spacing: 4px;
		margin-right: 60px;
		padding-left: 20px;
		vertical-align: middle;
		display: inline-block;
		color: #F8E356;

		-webkit-transition: color 0.5s ease-in-out;
		-moz-transition: color 0.5s ease-in-out;
		-o-transition: color 0.5s ease-in-out;
		-ms-transition: color 0.5s ease-in-out;
		transition: color 0.5s ease-in-out;
	}
	#nav-wrap .menu-icon {
		display: inline-block;
		width: 28px;
		height: 3px;
		margin-top: -3px;
		position: absolute;
		right: 20px;
		top: 50%;
		bottom: auto;
		left: auto;
		background: #F8E356;

		-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
		-o-transition: background-color 0.5s ease-in-out;
		-ms-transition: background-color 0.5s ease-in-out;
		transition: background-color 0.5s ease-in-out;		
	}
	#nav-wrap .menu-icon:before, 
	#nav-wrap .menu-icon:after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: inherit;
		left: 0;		
	}
	#nav-wrap .menu-icon:before {	bottom: 10px; }
	#nav-wrap .menu-icon:after { top: 10px; }

	/* on hover */
	#nav-wrap > a:hover .menu-text {	color: white; }
	#nav-wrap > a:hover .menu-icon {	background-color: white;	}

	#nav-wrap ul#nav {
		background: #1E2124;
		padding: 50px 45px 60px 45px;		
		min-height: auto;
		height: auto;
		display: none;		
		width: 100%;
		float: none;
		clear: both;
		position: relative;
		top: 55px;
		right: 0;
	}
	#nav-wrap ul#nav > li {
		background: transparent;
		display: block;
		height: auto;
		text-align: left;
		border-bottom: 1px dotted #30363A;
		padding: 6px 0;
	}
	#nav-wrap ul#nav > li:first-child {
		border-top: 1px dotted #30363A;
	}
	#nav-wrap ul#nav li a {
		display: block;
		width: auto;
		padding: 0;
		padding: 12px 30px 12px 0;
		line-height: 16px;
		border: none;
		color: #fff;
	}
	#nav-wrap ul#nav li a:hover {
		color: #F8E356;
	}

	
	/* change arrow to plus sign */
	ul#nav .menu-item-has-children > a:after {
		content: "+";
		display: inline;
		padding-left: 8px;
		color: #F8E356;
		font-weight: bold;
		font-size: 18px;
		border: none;

		position: absolute;
		right: 20px;
		top: 18px;	
	}

	.js #nav-wrap a.mobile-btn { display: none; }
	.js #nav-wrap a#toggle-btn { display: block;	}

	.no-js #nav-wrap:not(:target) > a:first-of-type, 
	.no-js #nav-wrap:target > a:last-of-type {
		display: block;
	}
	.no-js #nav-wrap:target ul#nav {
		display: block;
	}	

	/* sub menu	 */
	ul#nav ul {
		position: static; 
		display: none;
		background: none;
		border-radius: none;
		border: none;
		padding-bottom: 10px;		
	}	
	ul#nav ul li { 
		border: none; 
		padding-left: 5px;
		height: 40px; 
	}
	
	/* sub menu anchor links */
	ul#nav ul li a {
		padding: 5px 25px;
		margin: 0;
   	background-image: none;
   	white-space: nowrap;
   	font-size: 14px;
   	font-family: "notosans-regular", sans-serif;
   	text-transform: none;
   	letter-spacing: normal;   	
	}

	/* on hover */
	ul#nav li.menu-item-has-children:hover > a:after { content: "–"; } 


	/* intro styles */
	.intro {	text-align: center; }

	/* sidebar styles */
	#sidebar h3 { font: 20px/30px 'notosans-bold', sans-serif; }
	#sidebar .ads.adsense-300x250 { display: none; }	

	/* ad-section */
	#ad-section { display: none;}

	/* template single */
	.template.single .template-links { 
		float: none;
		display: block;
		margin: 30px 0 25px;		
	}
	.template.single .entry-bottom .ads {
		float: none;
		display: block;	
		margin: 15px auto 40px;	
	}
	/* extras */
	#extra .columns.terms { padding-right: 15px; }
	#extra .columns.support { padding-left: 15px; }
	#extra .columns .button { 
		display: block;
		text-align: center;
	}

	/* 404 */
	#four-o-four header { height: 150px; }
	#four-o-four header .logo {
		top: 40px;
		left: 50px;
		margin-left: 0;
	}
	#four-o-four #nav-wrap {
		top: 10px;
		right: 30px;
	}
	#four-o-four #page-content { padding-bottom: 160px; }
	#four-o-four #page-content h1 { font: 280px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content h1 em { font: 32px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content p { width: 100%; }

	/* footer styles */
	footer {	margin-top: 50px;	}
	footer .footer-social {	margin-bottom: 20px;	}
	footer .footer-social li {
   margin-left: 20px;
   margin-right: 20px;
	}

	/* copyright */
	footer .copyright { text-align: center; }
   footer .copyright li:before { content: none; }
   footer .copyright li { 
   	margin: 0; 
   	display: block;
   	line-height: 30px;
   }

} /* 800 */


/* mobiles 
------------------------------------------------------------ */
@media only screen and (max-width:600px) {

	#sidebar { width: 90%; }

	/* intro */
	.intro h1 {	font: 30px/40px 'notosans-bold', sans-serif; }
	.intro h2 {	font: 22px/40px 'merriweather-light', serif; }
	.intro h4 {	font: 17px/35px 'merriweather-regular', serif; }

	/* extras */
	#extra .columns.terms { padding-right: 10px; }
	#extra .columns.support { padding-left: 10px; }	

	/* 404 */
	#four-o-four #page-content { padding-bottom: 100px; }
	#four-o-four #page-content h1 { font: 220px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content h1 em { font: 26px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content p { }

} /* 600 */


/* small mobiles 
------------------------------------------------------------ */
@media only screen and (max-width:480px) {

	#sidebar { width: 95%; }

	/* intro */
	.intro h1 {	font: 28px/38px 'notosans-bold', sans-serif; }
	.intro h2 {	font: 21px/35px 'merriweather-light', serif; }	

	/* sponsor ad */
	.sponsor .ads .ad-content { width: 100%; }

	/* template single */
	.template.single .entry-bottom .ads { 
		width: 100%;		
	}

	/* 404 */
	#four-o-four #page-content { padding-bottom: 100px; }
	#four-o-four #page-content h1 { font: 200px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content h1 em { font: 24px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content p { }

	/* footer styles */
	footer .footer-social li {
   	margin-left: 10px;
   	margin-right: 10px;
	}	

} /* 480 */


@media only screen and (max-width:460px) {

	/* 404 */
	#four-o-four #page-content { padding-bottom: 80px;	}
	#four-o-four #page-content h1 { font: 160px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content h1 em { font: 22px/1em 'notosans-bold', sans-serif;}
	#four-o-four #page-content p { }

	/* footer styles */
	footer .footer-social li {
   	margin-left: 10px;
   	margin-right: 10px;
	}	

} /* 460 */


@media only screen and (max-width:420px) {
	
	/* header-ads */
	header .ads {
   	margin: 0 auto;
   	max-width: 300px;
   	padding: 20px 20px;
   }
   header .ads img { margin-right: 15px; }

	/* sidebar */
	#sidebar { width: 100%; }

	/* intro */
	.intro h1 {	font: 26px/35px 'notosans-bold', sans-serif; }
	.intro h2 {	font: 20px/35px 'merriweather-light', serif; }	


	/* 404 */
	#four-o-four header .logo { left: 30px; }
	#four-o-four #page-content { padding-bottom: 60px;}
	#four-o-four #page-content h1 { font: 140px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content h1 em { font: 18px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content p { }

	/* footer styles */
	footer .footer-nav li {
		font: 16px/50px 'notosans-bold', sans-serif;
   	display: block;   	
   	border-bottom: 1px dotted #CFCFCF;
   	margin-bottom: 0;
	}
	footer .footer-nav li:first-child {
		border-top: 1px dotted #CFCFCF;
	}

} /* 420 */


@media only screen and (max-width:400px) {

	/* header styles */
	header .logo { left: 35px;	}

	/* mobile navigation */
	#nav-wrap > a { right: 10px; }

	/* intro */
	.intro h2 {	font: 19px/32px 'merriweather-light', serif; }
	.intro h4 {	font: 16px/30px 'merriweather-regular', serif; }

	/* extras */
	#extra .columns.terms { padding-right: 0; }
	#extra .columns.support { padding-left: 0; }	

	/* 404 */
	#four-o-four #page-content { padding-bottom: 60px; }
	#four-o-four #page-content h1 { font: 128px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content h1 em { font: 14px/1em 'notosans-bold', sans-serif; }
	#four-o-four #page-content p { }
	
	/* footer styles */
	footer .footer-social {	font-size: 25px; }	
	footer .footer-social li {
   	margin-left: 8px;
   	margin-right: 8px;
	}	

} /* 400 */


/* make sure the menu is visible on larger screens
-------------------------------------------------------------------------- */
@media only screen and (min-width: 801px) {
	#nav-wrap ul#nav {
		display: block !important;
		
}