/*
Theme Name: BYP RELOADED
Author: SCDA.co
Author URI: http://scda.co/
*/

@media only screen 
and (max-width : 1330px) {
	.container { width: 95%; }
}

@media only screen 
and (max-width : 1200px) {
	header.active #wordmark {
		width: 212px;
		top: 8px;
	}
	header.active #nav { font-size: 1.1em; }
	header.active #nav li a { padding: 15px; }
	header.active .social-media li { font-size: 0.85em; }
}

@media only screen 
and (min-width : 1150px) /* more than 1150px */ {
	.features .col-2 { display: none; }
	.features .block1.col-2, .features .block2.col-2 { display: block }
}

@media only screen 
and (max-width : 1150px) /* LESS than 1150px */ {
	header {
		height: 68px;
		position: fixed;
	}
	#logo { display: none; }
	#navpanel #logo {
		display: block;
	}
	#wordmark { 
		width: 295px;
		margin: 0 auto;
		display: block;
		position: absolute;
		top: 15px;
		right: 0;
		left: 0;
	}
	header .social-media, .launch-search span { display: none; }
	div.launch-search a {
		color: #fff;
		font-size: 1.3em;
	}
	.launch-search:hover a { color: #f3000f; }
	nav#nav, #header.active nav#nav { display: none; }
	#navclick { display: block; }
	h1 { font-size: 2.5em; }
	#site { padding-top: 95px; }
	.archive-col.col-23.pad-right { width: calc(100% - 335px); }
	.not-hp .sidebar.col-4.pad-left { width: 310px; }
	.topstory h4, .category-mainstory h4, .newsletterCTA h3 { font-size: 1.8em; }
	.byline { font-size: 0.8em; }
	.more { font-size: 0.7em; }
	.videos .story-title h4, .podcast .story-title h4 { font-size: 1.3em; }
	.storyblurb { font-size: 0.9em; }
	.storyblock h4, .quote-author h4, h4.jp-relatedposts-post-title, .tptn_posts_daily .tptn_after_thumb { font-size: 0.8em; }
	.articlebody { font-size: 0.9em; }
}

@media only screen 
and (max-width : 950px) {
	.overlayAll .closeme { right: 20px; }
	#searchform button {
		padding: 15px 0 0 10px;
		font-size: 0.5em;
	}
	#nav { dislay: none; }
	#homepage main .container, body#single #site > .container { max-width: 650px; }
	.features, .media .col-2, .category-mainstory, .category-stories, 
	.col-23.pad-right.entrycol, .archive-col.col-23.pad-right {
		width: 100% !important;
		padding: 0;
	}
	.features .col-2 { display: none; }
	.features .block3.col-2, .features .block4.col-2 { display: block }
	#homepage .col-4.pad-right, #homepage .col-4.pad-left { width: calc(50% - 15px); }
	.features, .videos, .category-mainstory { margin-bottom: 50px; }
	.category-stories { clear: both; }
	.features.category-mainstory {
		width: 650px !important;
		margin: 0 auto;
	}
	body.not-hp .sidebar.col-4.pad-left {
		width: 310px;
		margin: 0 auto;
		clear: both;
		float: none !important;
		display: block;
	}
	#homepage main .newsletterCTA .container {
		width: 95%;
		max-width: initial;
	}
	.newsletterCTA form { width: 100%; }
	.newsletterCTA .formrow { justify-content: center; }
	.newsletterCTA form input[type=text] { margin: 0 10px; }
	.newsletterCTA form label { margin: 0 10px 10px; }
	.footer-wrapper { width: 100%; }
	footer .col-4.pad-right /* footer logo div */ { width: 100% !important; }
	footer .col-23.pad-left /* footer nav div */ { width: 100%; }
	.footer-logo, footer ul.menu { text-align: center; }
	
}

@media only screen 
and (max-width : 750px) {
	body#pagepage main > .container { width: 90%; }
	.newsletterCTA form input[type=text] {
		width: 100%;
		justify-content: space-around;
	}
	.newsletterCTA form input[type=text] { width: calc(100% - 45px); }
	#searchOverlay form { width: 90%; }	
}

@media only screen 
and (max-width : 700px) {
	#homepage main .container, body#single #site > .container { max-width: 90%; }
	.blockwrap .deets { position: relative; }
	.blockwrap .storythumb {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.wordblock { clear: both; }
	.quote-author img {
		margin: 0 auto 15px;
		float: none;
		display: block;
	}
	.quote-author h4 {
		width: 100%;
		float: none;
		text-align: center;
	}
	.features.category-mainstory { width: 100% !important; }
	body.people .userblock { text-align: center; }
	body.people .userblock .avatar, body.people .userblock.user-staff .avatar { 
		margin: 0 auto 20px; 
		float: none;
	}
	body.people .userblock .bio {
		width: 100%;
		float: none;
	}
	body.people .userblock.user-staff {
		width: 100%;
		margin: 0 0 20px !important;
	}
	body.people .userblock.user-staff.first-two {
		border-top: 1px dotted #f4524d;
		padding-top: 30px;
	}
	.alignleft, .alignright, .aligncenter {
		width: 100% !important;
		margin: 7px 0 15px;
	}
	.wp-caption-text { text-align: center; }
}

@media only screen 
and (max-width : 650px) {
	.archivelist .row { display: block; }
	.archivelist .row .col-3.pad-right {
		width: 100%;
		margin-bottom: 30px;
	}
	.archivelist .row .col-3.pad-right .storythumb {
		width: 200px;
		margin-bottom: 0;
		display: inline-block;
	}
	.archivelist .row .storyblock h4 {
		width: calc(100% - 225px);
		margin-left: 20px;
		display: inline-block;
		vertical-align: top;
		font-size: 1.2em;
		font-weight: 400;
	}
	.archivelist .storythumb img { max-height: initial; }
	.jp-relatedposts-grid { 
		width: 310px; /* match width of sidebar */
		margin: 0 auto;
		display: block; /* turn off flexbox */
	}
	.jp-relatedposts-post {
		width: 100%;
	}
}

@media only screen 
and (max-width : 600px) {
	h1 { font-size: 1.8em; }
	.topstory h4, .category-mainstory h4, .newsletterCTA h3 {
		font-size: 1.4em;
		line-height: 1.3em;
	}
	.blockwrap .storyblurb { display: none; }
	.archivelist .row .col-3.pad-right .storythumb { width: 150px; }
	.archivelist .row .storyblock h4 {
		width: calc(100% - 175px);
		font-size: 1em;
	}
	.newsletterCTA .formrow {
		width: calc(320px - 10%);
		margin: 0 auto;
		display: block;
		justify-content: initial;
	}
	.newsletterCTA .formblock { margin-bottom: 15px; }
	.userblock { text-align: center; }
	.userblock .avatar {
		margin: 0 auto 15px;
		float: none;
	}
	.userblock .bio {
		width: 100%;
		float: none;
	}
	.tweet-quote {
		width: calc(100% - 20px);
		margin: 0 auto 15px;
		padding: 10px;	    
		float: none;
		background-color: #efefef;
	}
	.tweet-quote blockquote {
		width: calc(100% - 30px);
		margin-bottom: 5px;
		padding: 0;
	}
	
}

@media only screen 
and (max-width : 450px) {
	#wordmark {
		width: 229px;
		top: 21px;
		left: 10px;
	}
	
	.archivelist .row .storyblock h4 { font-size: 0.9em; }
}