/*********************************************************************************************

x. Basic Setup (Body, Fonts, etc.) 

********************************************************************************************/
@media only screen and (max-width:1630px) {
	.wrapper.width-1600 {
		margin: 0 15px;
	}
}
@media only screen and (max-width:1510px) {
	.wrapper.width-1480 {
		margin: 0 15px;
	}
}
@media only screen and (max-width:1280px) {
	.wrapper.width-1250 {
		margin: 0 15px;
	}
}
@media only screen and (max-width:1200px) {
	html, body {
		font-size: 14px;
	}
	h1 {
		font-size: 60px;
	}
	h2 {
		font-size: 50px;
	}
	h3 {
		font-size: 45px;
	}
}
@media only screen and (max-width:1010px) {
	.wrapper.width-980 {
		margin: 0 15px;
	}
}

/********************************************************************************************* 

x. Aside

*********************************************************************************************/
@media only screen and (max-width:1510px) {
	aside .content {
		padding: 30px 0;
	}
}


/********************************************************************************************* 

x. Blog Feed

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.blog-feed .category {
		left: 40px;
	}
	.blog-feed .inside {
		padding: 80px 40px;
	}
}
@media only screen and (max-width:900px) {
	.blog-feed .post.width-33 {
		width: 50%;
	}
}
@media only screen and (max-width:700px) {
	.blog-feed .post.width-33 {
		width: 100%;
	}
}
@media only screen and (max-width:320px) {
	.blog-feed .category {
		left: 30px;
	}
	.blog-feed .inside {
		padding: 50px 30px;
	}
}


/********************************************************************************************* 

x. Breadcrumbs

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.breadcrumbs li.title {
		font-size: 12px;
	}
}

/********************************************************************************************* 

x. Button + Link

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.button,
	.link {
		font-size: 16px;
	}
}
@media only screen and (max-width:400px) {
	.button {
		padding: 10px 20px;
	}
}

/********************************************************************************************* 

x. Callouts

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.callouts .inside {
		padding: 0 0 0 40px;
	}
}
@media only screen and (max-width:1100px) {
	.callouts {
		padding: 50px 0;
	}
}
@media only screen and (max-width:700px) {
	.callouts {
		padding: 15px 0;
	}
	.callouts .column.width-50 {
		width: 100%;
	}
	.callouts .column:first-of-type {
		margin: 0 0 20px 0;
	}
}
@media only screen and (max-width:400px) {
	.callouts .inside {
		border-left: none;
		padding: 0;
	}
}


/********************************************************************************************* 

x. EOI News Feed
x. News Feed
x. News Reading List Feed

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	.eoi-news-feed .post.width-25, 
	.news-feed .post.width-25, 
	.news-reading-list-feed .post.width-25 {
		width: 50%;
	}
}
@media only screen and (max-width:900px) {
	.eoi-news-feed .post.width-33, 
	.news-feed .post.width-33, 
	.news-reading-list-feed .post.width-33 {
		width: 50%;
	}
}
@media only screen and (max-width:700px) {
	.eoi-news-feed .post.width-25,
	.eoi-news-feed .post.width-33, 
	.news-feed .post.width-25, 
	.news-feed .post.width-33, 
	.news-reading-list-feed .post.width-25,
	.news-reading-list-feed .post.width-33 {
		width: 100%;
	}
}


/********************************************************************************************* 

x. Featured Posts
x. Featured Blog Posts
x. Issue
x. State of Working Washington

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.featured-posts .post .category, 
	.featured-blog-posts .post .category, 
	.issue .post .category, 
	.state-of-working-washington .post .category {
		left: 40px;
	}
	.featured-posts .post .content, 
	.featured-blog-posts .post .content, 
	.issue .post .content, 
	.state-of-working-washington .post .content {
		padding: 60px 40px;
	}
}
@media only screen and (max-width:900px) {
	.featured-posts .post.width-25, 
	.featured-blog-posts .post.width-25, 
	.issue .post.width-25, 
	.state-of-working-washington .post.width-25 {
		width: 33.33%;
	}
	.featured-posts .post.width-50, 
	.featured-blog-posts .post.width-50, 
	.issue .post.width-50, 
	.state-of-working-washington .post.width-50 {
		width: 100%;
	}
	.featured-posts .column.width-25,
	.featured-posts .column.width-75, 
	.featured-blog-posts .column.width-25,
	.featured-blog-posts .column.width-75, 
	.issue .column.width-25, 
	.issue .column.width-75, 
	.state-of-working-washington .column.width-25,
	.state-of-working-washington .column.width-75 {
		width: 100%;
	}
	.featured-blog-posts aside,
	.issue aside,
	.state-of-working-washington aside {
		display: none;
	}
}
@media only screen and (max-width:800px) {
	.featured-posts .post.width-33, 
	.featured-blog-posts .post.width-33, 
	.issue .post.width-33, 
	.state-of-working-washington .post.width-33 {
		width: 50%;
	}
	.featured-posts .post.width-66, 
	.featured-blog-posts .post.width-66, 
	.issue .post.width-66, 
	.state-of-working-washington .post.width-66 {
		width: 100%;
	}
}
@media only screen and (max-width:700px) {
	.featured-posts .post.width-25, 
	.featured-posts .post.width-33,
	.featured-blog-posts .post.width-25, 
	.featured-blog-posts .post.width-33,
	.issue .post.width-25,
	.issue .post.width-33, 
	.state-of-working-washington .post.width-25,
	.state-of-working-washington .post.width-33 {
		width: 100%;
	}
}
@media only screen and (max-width:400px) {
	.featured-posts .post .content, 
	.featured-blog-posts .post .content, 
	.issue .post .content, 
	.state-of-working-washington .post .content {
		padding: 60px 40px 40px 40px;
	}
	.featured-posts .post.featured.has-image .image, 
	.featured-blog-posts .post.featured.has-image .image, 
	.issue .post.featured.has-image .image, 
	.state-of-working-washington .post.featured.has-image .image {
		width: 100%; height: 300px;
		position: relative;
	}
	.featured-posts .post.featured.has-image .inside, 
	.featured-blog-posts .post.featured.has-image .inside, 
	.issue .post.featured.has-image .inside, .state-of-working-washington 
	.post.featured.has-image .inside {
		padding: 0;
	}
}
@media only screen and (max-width:320px) {
	.featured-posts .post .category, 
	.featured-blog-posts .post .category, 
	.issue .post .category, 
	.state-of-working-washington .post .category {
		left: 30px;
	}
	.featured-posts .post .content, 
	.featured-blog-posts .post .content, 
	.issue .post .content, 
	.state-of-working-washington .post .content {
		padding: 50px 30px;
	}
}


/********************************************************************************************* 

x. Footer

*********************************************************************************************/
@media only screen and (max-width:1580px) {
	footer {
		padding: 50px 0;
	}
	footer .wrapper.width-1480 {
		margin: 0 50px;
	}
}
@media only screen and (max-width:1200px) {
	footer .address, 
	footer .phone-number,
	footer .twitter li.date {
		font-size: 16px;
	}
}
@media only screen and (max-width:1000px) {
	footer .twitter svg {
		width: auto; height: 15px;
	}
}
@media only screen and (max-width:700px) {
	footer {
		padding: 30px 0;
	}
	footer .columns .column {
		text-align: center;
	}
	footer .columns .column:nth-child(2) {
		margin: 30px 0;
	}
	footer .columns .column.width-33 {
		width: 100%;
	}
	footer .navigation li {
		margin: 0 0 15px 0;
	}
	footer .wrapper.width-1480 {
		margin: 0 15px;
	}
}



/********************************************************************************************* 

x. Form

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	form input[type="submit"],
	form input[type="text"],
	form textarea {
		font-size: 16px;
	}
}
@media only screen and (max-width:1024px) {
	form input,
	form textarea {
	    border-radius: 0;
	    -webkit-appearance: none;
	}
}
@media only screen and (max-width:1000px) {
	form svg {
		display: none;
	}
}


/********************************************************************************************* 

x. General

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	.general .divider,
	.general .slideshow-wrapper,
	.general .tableau {
		margin: 15px 0;
	}
}
@media only screen and (max-width:900px) {
	.general .column.width-25,
	.general .column.width-75 {
		width: 100%;
	}
}
@media only screen and (max-width:600px) {
	.general .tableau {
		border-width: 5px;
	}
	.general .tableau .tableauPlaceholder {
		display: none !important;
	}
	.general .tableau .image {
		display: block;
	}
}

/********************************************************************************************* 

x. Header

*********************************************************************************************/
@media only screen and (max-width:1510px) {
	header .top-bar {
		margin: 0 -15px 0 0;
	}
}
@media only screen and (max-width:1400px) {
	header .logo {
		width: 200px;
	}
}
@media only screen and (max-width:1200px) {
	header .navigation.utility a {
		font-size: 16px;
	}
}
@media only screen and (max-width:1000px) {
	header .logo {
		width: 150px;
	}
	header .social-media svg {
		width: auto; height: 15px;
	}
}
@media only screen and (max-width:900px) {
	header {
		padding: 0 0 30px 0;
	}
	header .hamburger,
	header .navigation.mobile {
		display: block;
	}
	header .logo {
		width: 250px; height: auto;
		margin: -50px auto 0 auto;
		-moz-transform: none;
		-webkit-transform: none;
		-o-transform: none;
		-ms-transform: none;
		transform: none;
		position: absolute;
		top: 50%; left: 50%;
		position: relative;
		top: 0; left: 0;
	}
	header .navigation.main {
		display: none;
	}
	header .top-bar {
		margin: 0 -15px;
	}
	header > .wrapper > .columns > .column.width-25,
	header > .wrapper > .columns > .column.width-75 {
		width: 100%;
	}
}
@media only screen and (max-width:700px) {
	header .top-bar .columns {
		text-align: center;
	}
	header .top-bar .columns .column {
		display: inline-block;
		zoom: 1; 
		*display: inline;
		float: none;
	}
	header .top-bar .columns .column.width-50 {
		display: none;
	}
	header .top-bar .columns .column.width-25 {
		width: 45%;
	}
}
@media only screen and (max-width:400px) {
	header .logo {
		width: 200px;
	}
	header .top-bar .columns .column.width-25 {
		width: 100%;
	}
	header .top-bar .columns .column:nth-child(2) {
		margin: 0 0 15px 0;
	}
}
@media only screen and (max-width:320px) {
	header .logo {
		width: 150px;
	}
}


/********************************************************************************************* 

x. Highlight

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.highlight.default .content {
		padding: 40px;
	}
	.highlight.default .content.has-image.aligned-left {
		padding-right: calc(30% + 40px);
	}
	.highlight.default .content.has-image.aligned-right {
		padding-left: calc(30% + 40px);
	}
}
@media only screen and (max-width:1000px) {
	.highlight.alternative .inside {
		padding: 40px 40px 40px 25%;
	}
}
@media only screen and (max-width:800px) {
	.highlight.alternative .inside {
		padding: 40px;
	}
}
@media only screen and (max-width:600px) {
	.highlight.default .content.has-image.aligned-left {
		padding-right: 40px;
	}
	.highlight.default .content.has-image.aligned-right {
		padding-left: 40px;
	}
	.highlight.default .image {
		width: 100%; height: 300px;
		position: relative;
	}
}
@media only screen and (max-width:800px) {
	.highlight.alternative .inside {
		padding: 15px;
	}
}
@media only screen and (max-width:320px) {
	.highlight.default .content {
		padding: 30px;
	}
	.highlight.default .content.has-image.aligned-left {
		padding-right: 30px;
	}
	.highlight.default .content.has-image.aligned-right {
		padding-left: 30px;
	}
}



/********************************************************************************************* 

x. Latest Research

*********************************************************************************************/
@media only screen and (max-width:1510px) {
	.latest-research .post .inside {
		margin: 0 50px;
	}
	.latest-research .posts {
		margin: 0 -50px;
	}
}
@media only screen and (max-width:1200px) {
	.latest-research .category {
		left: 40px;
	}
	.latest-research .post .content {
		padding: 80px 40px;
	}
	.latest-research .post .inside {
		margin: 0 7.5px;
	}
	.latest-research .posts {
		margin: 0 -7.5px;
	}
}
@media only screen and (max-width:800px) {
	.latest-research .post.has-image .image {
		display: none;
	}
	.latest-research .post.has-image .inside {
		padding: 0;
	}
}
@media only screen and (max-width:700px) {
	.latest-research {
		padding: 0 0 15px 0;
	}
	.latest-research .post.width-50 {
		width: 100%;
	}
	.latest-research .post:first-of-type {
		margin: 0 0 15px 0;
	}
}
@media only screen and (max-width:320px) {
	.latest-research .category {
		left: 30px;
	}
	.latest-research .post .content {
		padding: 50px 30px;
	}
}


/********************************************************************************************* 

x. Navigation: Drop Down

*********************************************************************************************/
@media only screen and (max-width:1700px) {
	.navigation.drop-down .wrapper.width-1600 {
		margin: 0 50px;
	}
}
@media only screen and (max-width:1200px) {
	.navigation.drop-down .sub-menu.top {
		margin: 0 -25px -50px -25px;
		display: block;
	}
	.navigation.drop-down .sub-menu.top .inside {
		margin-bottom: 50px;
		padding: 0 0 0 40px;
	}
	.navigation.drop-down .sub-menu.top li.spacer {
		display: none;
	}
	.navigation.drop-down .sub-menu.top li.width-25 {
		width: 50%;
	}
	.navigation.drop-down .sub-menu.top {
		padding: 50px 100px 50px 0;
	}
}

/********************************************************************************************* 

x. Research Feed

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.research-feed .post .category {
		left: 40px;
	}
}
@media only screen and (max-width:1000px) {
	.research-feed .post .inside {
		padding: 40px 40px 40px 25%;
	}
}
@media only screen and (max-width:800px) {
	.research-feed .post .inside {
		padding: 40px;
	}
}
@media only screen and (max-width:700px) {
	.research-feed .post.width-50 {
		width: 100%;
	}
}
@media only screen and (max-width:400px) {
	.research-feed .post .category {
		left: 30px;
	}
	.research-feed .post .inside {
		padding: 15px;
	}
}


/********************************************************************************************* 

x. Section

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	section .box {
		padding: 40px;
	}
}
@media only screen and (max-width:1100px) {
	section .section-title {
		padding: 50px 0;
	}
}
@media only screen and (max-width:900px) {
	section.mobile {
		margin: 15px 0 0 0;
		display: block;
	}
}

@media only screen and (max-width:400px) {
	section .box {
		padding: 30px;
	}
}

/********************************************************************************************* 

x. selectBoxIt

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.selectboxit-container * {
		font-size: 16px;
	}
	.selectboxit-container .selectboxit {
		padding: 10px;
	}
}


/********************************************************************************************* 

x. Single - Blog
x. Single - Research
x. Single - EOI News

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.singular .interact .leave-a-reply li, 
	.singular .interact .like-post li, 
	.singular .interact .share-post li {
		font-size: 16px;
	}
}
@media only screen and (max-width:1000px) {
	.singular .interact .leave-a-reply svg, 
	.singular .interact .like-post svg, 
	.singular .interact .share-post svg {
		width: auto; height: 15px;
	}
}
@media only screen and (max-width:900px) {
	.singular .column.width-25,
	.singular .column.width-75 {
		width: 100%;
	}
}
@media only screen and (max-width:700px) {
	.singular .column.width-33 {
		width: 100%;
	}
	.singular .column:nth-child(2) {
		margin: 15px 0;
	}
}
@media only screen and (max-width:600px) {
	.singular .tableau {
		border-width: 5px;
	}
	.singular .tableau .tableauPlaceholder {
		display: none !important;
	}
	.singular .tableau .image {
		display: block;
	}
}

/********************************************************************************************* 

x. Staff

*********************************************************************************************/
@media only screen and (max-width:1010px) {
	.staff .full-information .inside {
		padding: 60px 0 15px 0;
	}
	.staff .full-information .close {
		top: 20px; right: 20px;
	}
}
@media only screen and (max-width:1000px) {
	.staff .person.width-25 {
		width: 33.33%;
	}
}
@media only screen and (max-width:800px) {
	.staff .person.width-25 {
		width: 50%;
	}
}
@media only screen and (max-width:600px) {
	.staff .person.width-25 {
		width: 100%;
	}
}

/********************************************************************************************* 

x. Text

*********************************************************************************************/
@media only screen and (max-width:500px) {
	.text {
		padding: 50px 0;
	}
}


/********************************************************************************************* 

x. WordPress Core

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.wp-caption p.wp-caption-text {
		font-size: 16px;
	}
}
@media only screen and (max-width:800px) {
	.alignleft,
	.alignright {
		max-width: 50%
	}
}
@media only screen and (max-width:400px) {
	.aligncenter,
	.alignleft,
	.alignnone,
	.alignright {
		width: 100% !important; height: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}