﻿/*Responsive CSS Overrides*/

@media screen and (max-width: 1235px) {

	#navTopContainer ul {
		width: 100%;
		display:block;
	}

	.event-list {width: 60%; transition: width 250ms ease;}
	
}

@media screen and (max-width: 1170px) {
	#navTopContainer li a {padding: 10px 30px 10px 10px;}
}

@media screen and (max-width: 1000px) {

	#header .logo-text {font-size: 5vw; transition: font-size 250ms ease;}
	.event-list {width: 50%;}
}

@media screen and (max-width: 920px) {
	#navTopContainer li a {padding: 10px;}
}

@media screen and (max-width: 830px) {

.bar-top {height: 40px; transition: heigh 250ms ease;}
.bar-top .nav-mini, 
.bar-top #search-form {display: none;}
.bar-top .social {
	padding-right: 70px;
}

#header .logo-text {font-size: 4.5vw;}
#header .logo-icon {width: 8vw; height: auto;}

.home .table {display: block}
.home .table .cell {display: block; width: auto; padding: 30px 50px;}

.news-feed ul li {
	width: 45%;
	margin: 0 5% 5% 0;
}

.page-template-page-sidebar .item {display: block;}

.page-template-page-sidebar .entry, 
.archive .entry,
#contentBody .entry,
.blog .entry, 
.commissioners-template-default .entry {width: auto; display: block; padding: 50px 0;}

.page-template-page-sidebar .sidebar, 
.archive .sidebar, 
.blog .sidebar, 
.commissioners-template-default .sidebar {
	width: auto;
	border-top: 1px solid #d7d8de;
	display: block;
}
.single-commissioners .extra .cell:nth-child(2) {width: auto}



.footer-mission .third, 
.footer-mission .two-thirds {float: none; text-align: left; width: auto; margin-bottom: 20px;}


}


@media screen and (max-width: 782px) {

	.admin-bar .sticky-header,
	.admin-bar #responsive-menu-container{
		top: 46px;
	}
	
	.public-db, .spotlight {width: 47%;}
	.event-list {width: auto;}
	.twitter {position: relative; margin: auto;}
}

@media screen and (max-width: 650px) {
	.public-db, .spotlight {width: auto; float: none; text-align:center;}
	.public-db ul, .spotlight ul {text-align: center;}
	.row-three h3::before {left: auto}
	.spotlight {margin-top: 40px;}
	
	.single-commissioners .extra.table {display: block;}
	.single-commissioners .extra.table .cell {display: block;}
	.single-commissioners .extra .articles, 
	.single-commissioners .extra .special {
		width: 100%; padding: 0;
	}
}

@media screen and (max-width: 525px) {
/*added for Commission */
.events-feed .twitter h3 {
color: #1d3557;
}

	.bar-top {height: auto;}
	.bar-top .left, 
	.bar-top .right, 
	.bar-top .social {
		float: none; 
		text-align:center;
		padding-right: 0;
	}
	.bar-top .left img {float: none; margin: 0 10px -5px 0;}
	
	#header .logo-icon {width: 100px;}
	#header .logo-text {font-size: 30px;}
	#header .logo-text span {font-size: 0.5em;}
	
	.home h3::before {
	left: 0; width: 100px;
}
	
	.top-right ul {margin: 25px 0 25px 15px; list-style-type: disc; overflow: visible;}
	
	.top-right ul li, 
	.news-feed ul li {float: none; width: auto; display: block; margin: 0 0 10px 0; display:list-item;}
}



@media screen and (max-width: 500px) {
/*added for Commission */
.events-feed .twitter h3 {
color: #1d3557;
}

	.single-commissioners .intro-block .featured-image img {float: none;display: block; margin: 0 auto 10px;}
	.intro-block .content {text-align: center;}
	
	
	.columns .half,
	.columns .third,
	.columns .two-thirds,
	.columns .quarter,
	.columns .three-quarters,
	.padded-columns .half,
	.padded-columns .third,
	.padded-columns .two-thirds,
	.padded-columns .quarter,
	.padded-columns .three-quarters,
	.padded-columns .half:last-child,
	.padded-columns .third:last-child,
	.padded-columns .two-thirds:last-child,
	.padded-columns .quarter:last-child,
	.padded-columns .three-quarters:last-child{
	    margin: auto;
	    width: 98%;
	    float:none;
	}

	div.aligncenter,
	.alignnone,
	.aligncenter,
	.alignright,
	.alignleft,
	.aligncenter,
	a img.alignright,
	a img.alignnone,
	a img.alignleft,
	a img.aligncenter,
	.wp-caption.alignnone,
	.wp-caption.alignleft,
	.wp-caption.alignright {
	    display: block;
	    margin: 5px auto;
	    float:none;
	    text-align:center;
	}

}