/*over base size*/
@media screen and (min-width: 1280px) {



}

/*under base size*/
@media screen and (max-width: 1024px) {

	.quad-col .col-a,
	.quad-col .col-b,
	.quad-col .col-c,
	.quad-col .col-d {float: left; width: 47%;}



	#utility form input {width: 100px;}
	#utility form label {display: block; float: none; text-align: left;}
	#main-socials {margin: 0 0 10px;}

}

@media screen and (max-width: 950px) {
	#nav ul li a {padding: 10px 16px;}
	#logo {width: 450px;} 
}


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

	#logo,
	#utility,
	#utility form,
	#main-socials {float: none;}
	
	#logo {width: 100%; max-width: 524px; margin-top: 0}

	
	#main-socials {position: absolute; top: 10px; right: 10px;}
	
	#utility form {margin-top: 0;}
	#utility form label {float: left;}
	
	#nav ul li a {padding: 10px 12px;}
	
	#footer {padding: 20px 10px;}
	
	#copyright {float: none; overflow: hidden; margin: 0 0 30px; text-align: center; padding: 0;}
	#footer-acr {position: static; display: block; float: none; margin: 0 0 30px;}
	
	#copyright-meta li {float: none; display: inline;}
	
	#footer-socials {float: none; overflow: hidden; text-align: center}
	#footer-socials a {float: none; display: inline;}

}


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



	

}

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

	#main {padding: 0;}
	
	#logo {margin-left: -5px; float: left; width: 80%;}
	
	#col-a {float: none!important; width: auto!important; margin: 0 0 40px;}
	#col-b {float: none!important; width: auto!important;}

	#mobile-nav {display: none;}
	
	#nav-view,
	#nav-hide {display: block; float: right; margin: 0 10px 0 0; cursor: pointer;}

	#mobile-nav {display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 80%; background: #222; overflow-y: auto; padding: 80px 20px 20px; z-index: 1000;}
	.nav-toggle, .nav-toggle body {overflow: hidden;}
	.nav-toggle #mobile-nav {display: block;}
	
	#nav {clear: none;}
	#nav ul {background: none; text-align: left; border-top: 1px solid #555;}
	#nav ul li {display: block; line-height: 1; border: 0; margin: 0; border-bottom: 1px solid #555; height: auto;}
	#nav ul li a {text-shadow: 0; font-size: 30px; padding: 10px; top: 0;}
	
        #nav ul ul {display: block; position: static; margin: 0 0 10px; padding: 0; border: 0; background: none; width: auto;}
        #nav ul ul li {border: 0; margin: 0 0 0 10px;}
        #nav ul ul li a {font-size: 22px}
#nav ul ul li a:hover {background: none; color: #FC6118;}

	#utility form {float: none; margin: 0 0 30px;}
	#utility form label {float: none; text-align: left; line-height: 1; margin: 0; font-size: 20px; margin: 0 0 10px;}
	#utility form input {float: none; border: 1px solid #818689; color: #fff; padding: 10px; width: 100%; box-sizing: border-box; margin: 0 0 10px;}
	#utility form button {float: none; }
	#utility form a {float: none; }
	
	#main-socials {position: static; margin: 0 0 30px;}
	
	#nav-hide {position: absolute; top: 10px; right: 10px;}

	.about-tabs-list li a span {font-size: 16px!important; padding-left: 10px; padding-right: 10px;}

        .more-videos-item {width: 28%;}
.more-videos-item .more-videos-title {font-size: .85em;}
.video-title h2 {float: none; margin: 0 0 10px; width: auto;}
.video-title .social-icons {float: none;}

}

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

	
	.layout {padding: 16px;}

	
	
}

@media screen and (max-width: 512px) {
		
	.utility {float: none; clear: left; padding: 10px 0 0;}


	.more-videos-item {width: 48%;}
.more-videos-item .more-videos-title {font-size: .8em;}

#photos-listing li {width: 45%;}


.connect-tabs-list li a span {line-height: 20px; height: 20px; font-size: 15px; padding: 8px 20px 4px;}
.connect-tabs-list {height: 37px;}


}



@media screen and (max-width: 400px) {
.about-tabs-list li a span {font-size: 14px!important;}



}