/*--
	Theme Name: Brevard Concrete Paving
	Theme URI: http://www.therustypixel.com/
	Description: Contact Rusty for Help: (321) 446-8138 | rusty@therustypixel.com
	Author: The Rusty Pixel
	Author URL: http://www.therustypixel.com/
--*/
/* 2015 May */




/*====================================*\
    MENU RESPONSIVE --------------------------------------------------------------------------------------------------------|
\*====================================*/ 
#responsiveNav {
	display:none;
}
#responsiveContainer {
	z-index:9998;
	width:100%;
}
/* Toggle Button */
#closeMenu {
	display:none;
}
.toggleMenu {
	display:block;
	color:#fff;
	padding:0 20px 0 20px;
	border-bottom:3px solid #ffba00;
	background-repeat:no-repeat;
	background-color:#f96f00;
	height:66px;
	line-height:66px;
	font-size:25px;
}
#openMenu { 
	background-image:url(images/icon_responsive_menu_open.png);
	background-position:right 20px center;
}
#closeMenu { 
	background-image:url(images/icon_responsive_menu_close.png);
	background-position:right 25px center;
}
.toggleMenu:hover {
	background-color:#f98f00;
	cursor:pointer;
}
.toggleMenu:after {
	content:'';
	width:80px; 
	height:80px; 
	position:absolute;
	top:0;
	right:0;
	display:block;
	background-position:center;
	background-repeat:no-repeat;
}
/* Navigation Main */
#responsiveNav {
	background-color:#000;
	display:none;
	width:100%;
}
#responsiveNav ul {
	margin:0;
	padding:0;
	border-bottom:1px solid #ffba00;
}
#responsiveNav ul li { 
	margin:0;
	padding:0;
	position:relative;
	border:0;
}
#responsiveNav ul li a {
	border-bottom:1px solid #575757;
	background-color:#000;
	font-size:27px;
	display:block;
	line-height:50px;
	height:50px;
	text-decoration:none;
	padding-left:20px;
	text-shadow:1px 1px 2px #000;
	color:#fff;
}
#responsiveNav ul li a:hover,
#responsiveNav li:hover > a  { 
	background-image:none;
	background-color:#f98f00;
	text-decoration:none;
}
/* Dropdown */
#responsiveNav li ul {
	display:block;
	width:auto;
	position:static;
	
}
#responsiveNav li ul li a {
	background-image:none;
	background-color:#363636;
	font-size:17px;
	height:42px;
	line-height:42px;
	text-transform:none;
	
}
#responsiveNav li ul li a:hover {
	background-color:#f98f00;
}
/* Touch Hotspot */
#responsiveNav ul li div.touch {
	width:50px; 
	height:50px; 
	position:absolute;
	top:0;
	right:0;
	background-color:#f96f00;
	display:block;
}
#responsiveNav ul li div.touch:hover {
	background-color:#ffba00;
	cursor:pointer;
}
#responsiveNav ul ul li div.touch {
	height:41px;
	width:41px;
}
/* Arrows */
#responsiveNav ul li div.touch:after {
	content:'';
	width:0; 
	height:0; 
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-top:7px solid #fff;
	border-bottom:7px solid transparent;
	position:absolute;
	top:50%;
	left:50%;
	margin:-7px 0 0 -7px;
			
	transition:			all 250ms ease-in-out;
	-o-transition:		all 250ms ease-in-out;
	-ms-transition:		all 250ms ease-in-out;
	-moz-transition:	all 250ms ease-in-out;
	-webkit-transition:	all 250ms ease-in-out;
}
#responsiveNav ul li div.touch.arrowclosed:after {
	-ms-transform:rotate(90deg); /* IE 9 */
	-webkit-transform:rotate(90deg); /* Chrome, Safari, Opera */
	transform:rotate(90deg);
			
	transition:			all 250ms ease-in-out;
	-o-transition:		all 250ms ease-in-out;
	-ms-transition:		all 250ms ease-in-out;
	-moz-transition:	all 250ms ease-in-out;
	-webkit-transition:	all 250ms ease-in-out;
}


/*====================================*\
    RESPONSIVE --------------------------------------------------------------------------------------------------------|
\*====================================*/ 
.responsiveTEST {
	width:100%;
	height:200px;
}

@media only screen and (min-width:320px) {
	.responsiveTEST {
		background-color:blue;
	}	
	/* Menus */
	#responsiveContainer {
		display:block;
	}
	header nav {
		display:none;
	}
	/* Main */
	body h1 {
		font-size:38px;
	}
	body h2 {
		font-size:19px;
	}
	div.brevard_concrete_projects h1 {
		font-size:30px;
		line-height:35px;
	}
	
	/* Header */
	#rrr_header {
		padding-top:20px;
	}
	#rrr_headerRight h2 {
		font-size:20px;
		margin-top:10px;
	}
	#rrr_headerRight h1 {
		font-size:40px;
		margin-bottom:0;
	}
	/* Containers */
	#rrr_header,
	#rrr_headerRight,
	.rrrlogofix,
	body .container_12 {
		width:100%;
	}
	#main > #content-box {
		width:86%;
		padding:5%;
	}
	#slider-wrapper { margin-bottom:0; }
	#header { padding-bottom:0;	}
	
	/* Grid */
	body .container_12 .grid_8 {
		width:90%;
		float:none;
	}
	body .container_12 .grid_3,
	body .container_12 .grid_4,
	body .container_12 .grid_12 {
		float:none;
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	
	/* Footer */
	footer {
		padding:20px;
	}
	.textwidget {
		overflow:hidden;
	}
	body .container_12 .suffix_1 {
		padding-right:0;
	}
	
	/* Homepage */
	#carousel ul li {
		margin:0;
		width:100%;
	}
	#carousel ul li img {
		width:100%;
		height:auto;
		max-width:100%;
	}
	.before-content{
		padding:34px 13px 25px 16px;
	}
	h2.entry-title {
		font-size:30px;
		margin-top:20px;
	}
	/* Slider */
	#slider {
		width:100%;
       	max-width:100%;
		height:400px;
    }
	.nivo-caption-inner h1 {
		font-size:24px;
		line-height:29px;
	}
	.nivo-caption {
		font-size:14px;
		line-height:18px;
	}
	.nivo-directionNav a{
		top:20%;
	}
	#slider-wrapper {
		background-color:#000;
	}
	
	/* End */
}

@media only screen and (min-width:480px) {
	.responsiveTEST {
		background-color:aqua;
	}
	#rrr_headerRight h2 {
		font-size:24px;
	}
	#rrr_headerRight h1 {
		font-size:48px;
	}
	div.brevard_concrete_projects h1 {
		font-size:35px;
		line-height:42px;
	}
	/* Slider */
	#slider {
		height:450px;
    }
	.nivo-directionNav a{
		top:30%;
	}
	
	
	
	/* End */
}
@media only screen and (min-width:630px) {
	.responsiveTEST {
		background-color:lime;
	}
	
	/* Header */
	#rrr_header {
		height:125px;
	}
	.rrrlogofix,#rrr_headerRight {
		width:50%;
	}
	.rrrlogofix {
		float:left;
	}
	#rrr_headerRight {
		float:right;
		height:126px;
	}
	#rrr_headerRight h2 {
		font-size:20px;
		margin-top:28px;
	}
	#rrr_headerRight h1 {
		font-size:40px;
	}
	
	/* Homepage */
	.before-content{
		padding:34px 53px 25px 56px;
	}
	
	/* Slider */
	.nivo-caption-inner h1 {
		font-size:28px;
		line-height:35px;
	}
	.nivo-caption {
		font-size:18px;
		line-height:20px;
	}
	#slider {
		height:550px;
    }
	.nivo-directionNav a{
		top:40%;
	}
	
	/* End */
}
@media only screen and (min-width:768px) {
	.responsiveTEST {
		background-color:green;
	}
	/* Menus */
	#responsiveContainer {
		display:none;
	}
	header nav {
		display:block;
	}
	
	/* Main */
	body h1,div.brevard_concrete_projects h1 {
		font-size:48px;
		font-size:48px;
	}
	body h2 {
		font-size:24px;
	}
	.nivo-caption-inner h1 {
		font-size:28px;
	}
	/* Header */
	#rrr_headerRight h2 {
		font-size:24px;
	}
	#rrr_headerRight h1 {
		font-size:48px;
	}
	.nivo-caption-inner h1 {
		font-size:38px;
	}
	
	/* Containers */
	#main > #content-box {
		padding-top:0;
	}
	
	/* Navigation */
	ul#topnav a {
		font-size:12px;
	}
	.sf-menu > li > a {
		padding:20px 10px 20px;
	}
	.sf-menu > li > a .sf-sub-indicator {
		bottom:12px;
	}
	.sf-menu li:hover ul,.sf-menu li.sfHover ul {
		top:57px;
	}
	
	/* Homepage */
	#carousel ul li {
		width:32%;
	}
	#carousel ul li:nth-child(2) {
		margin:0 2%;
	}
	h2.entry-title {
		font-size:44px;
		margin-top:0;
	}
	#slider {
		height:550px;
    }
	

	
	
	/* End */
}
@media only screen and (min-width:896px) {
	.responsiveTEST {
		background-color:yellow;
	}
	
	/* Other */
	#slider-wrapper { margin-bottom:40px; }

	/* Navigation */
	ul#topnav a {
		font-size:15px;
	}
	.sf-menu > li > a {
		padding:25px 10px 25px;
	}
	.sf-menu > li > a .sf-sub-indicator {
		bottom:12px;
	}
	.sf-menu li:hover ul,.sf-menu li.sfHover ul {
		top:67px;
	}
	
	/* Footer */
	body footer .container_12 .grid_3 {
		width:30%;
		margin-left:0;
		margin-right:0;
	}
	body footer .container_12 .grid_4 {
		width:36%;
		margin-left:2%;
		margin-right:2%;
	}
	
	/* Grid */
	body .container_12 .grid_3,
	body .container_12 .grid_4,
	body .container_12 .grid_8,
	body .container_12 .grid_12 {
		float:left;
		margin-left:auto;
		margin-right:auto;
	}
	body .container_12 .grid_3 {
		width:220px;
	}
	body .container_12 .grid_8 {
		width:70%;
		margin-right:3%;
	}
	body .container_12 .grid_4 {
		width:27%;
	}
	
	
	/* Slider */
	.nivo-caption-inner h1 {
		font-size:38px;
		line-height:48px;
	}
	.nivo-caption {
		font-size:22px;
		line-height:30px;
	}
	#slider {
		height:575px;
    }
	
	
	
	
	/* End */
}
@media only screen and (min-width:1024px) {
	.responsiveTEST {
		background-color:pink;
	}
	
	/* Navigation */
	ul#topnav a {
		font-size:16px;
	}
	.sf-menu > li > a {
		padding:27px 16px 27px;
	}
	.sf-menu > li > a .sf-sub-indicator {
		bottom:12px;
	}
	.sf-menu li:hover ul,.sf-menu li.sfHover ul {
		top:71px;
	}
	/* Slider */
	#slider {
		height:612px;
    }
	.nivo-directionNav a{
		top:260px;
	}
	#slider-wrapper {
		background-color:#fff;
	}
	
	
	/* End */
}
@media only screen and (min-width:1110px) {
	.responsiveTEST {
		background-color:orange;
	}
	/* Main */
	#main { padding:10px 0 30px 0; }
	#main > #content-box{
		width:1090px;
		padding:0;
	}
	
	/* Header */
	.rrrlogofix {
		width:300px;
	}
	#rrr_header {
		width:930px;
		height:141px;
	}
	#rrr_headerRight {
		max-height:141px;
		width:350px;
	}
	#rrr_headerRight h1 {
		margin-bottom:0.75em;
	}
	#header { padding-bottom:45px; }
	
	
	/* Containers */
	.primary_content_wrap {
		padding-bottom:87px;
	}
	
	/* Grid */
	body .container_12 .grid_3,
	body .container_12 .grid_4,
	body .container_12 .grid_8,
	body .container_12 .grid_12 {
		margin-left:10px;
		margin-right:10px;
	}
	body .container_12 {
		width:960px;
	}
	body .container_12 .grid_3 {
		width:220px;
	}
	body .container_12 .grid_8 {
		width:620px;
	}
	body .container_12 .grid_12 {
		width:940px;
	}
	body .container_12 .grid_4 {
		width:300px;
	}
	
	/* Navigation */
	ul#topnav a {
		font-size:17px;
	}
	.sf-menu > li > a {
		padding:34px 20px 34px;
	}
	.sf-menu > li > a .sf-sub-indicator {
		bottom:20px;
	}
	.sf-menu li:hover ul,.sf-menu li.sfHover ul {
		top:84px;
	}
	
	/* Footer */
	footer {
		padding:36px 0 81px;
	}
	
	/* Slider */
	#slider {
		width:930px;
       	max-width:930px;
    }

	
	
	/* End */
}

@media only screen and (min-width:1280px) {
	.responsiveTEST {
		background-color:purple;
	}
	/* Containers */
	#main > #content-box{
		width:1200px;
	}
	body .container_12 {
		width:1050px;
	}
	body .container_12 .grid_8 {
		width:710px;
	}
	body .container_12 .grid_12 {
		width:1050px;
	}
	#slider-wrapper img {
		width:100%;
	}
	/* Navigation */
	ul#topnav a {
		font-size:18px;
	}
	.sf-menu > li > a {
		padding:34px 25px 34px;
	}
	
	
	/* End */
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {
	.responsiveTEST {
		background-color:pink;
	}
	/* End */
}