Current File : /home/itiffy/rockyjohnsonconcrete.com/wp-content/themes/rockyjohnson/css/responsive.css
/*For Mobile*/
@media only screen and (max-width:760px) {
img {max-width:100%; height:auto;}

/* 	-----------------------------------------------------
	--------------------- Top Styles --------------------
	----------------------------------------------------- */
	.top-section {height:auto; text-align:center;}
	.top-section .left, .top-section .right {float:none; width:100%;}
	
/* 	-----------------------------------------------------
	-------------------- Header Styles ------------------
	----------------------------------------------------- */
	.header-section {min-height:inherit;}
	.header-section .container {padding:0;}
	.header-section .logo {float:none; width:100%; text-align:center;}
	.header-section .logo img {display:inline-block;}
	.header-section .menu {float:none; width:100%;}
	
	#nav-trigger {display:block; height:44px; background:#000000;}
	nav#nav-main ul {display:none;}
	nav#nav-mobile {display:block; z-index:99999; width:100%;}


/* 	-----------------------------------------------------
	-------------------- Banner Styles ------------------
	----------------------------------------------------- */
	.banner-section {min-height:inherit; background-size:cover;}
	.banner-section h1 {font-size:24px; line-height:1.2; padding:15px; margin:70px 0;}
	.inner-banner-section {min-height:inherit; background-size:cover;}
	.inner-banner-section h1 {font-size:24px; line-height:1.2; padding:15px; margin:70px 0;}	
	
/* 	-----------------------------------------------------
	------------------- Content Styles ------------------
	----------------------------------------------------- */
	.content-section {padding:15px 0;}
	.content-section h2 {font-size:26px; font-weight:500;}
	.content-section h3 {font-size:24px; font-weight:500;}
	.content-section h4 {font-size:22px; font-weight:500;}
	.content-section h5 {font-size:20px; font-weight:500;}
	.content-section h6 {font-size:18px; font-weight:500;}
	.content-section p {font-size:14px; font-weight:400; line-height:1.6; color:#FFFFFF; padding:10px 0;}
	
	.welcome-section {padding:15px 0;}
	.welcome-section h5 {padding-bottom:15px;}
	
	.services-section {padding:15px 0;}
	.services-section h2 {position:inherit;}
	.services-section h2:before {display:none;}
	.services-section h2:after {display:none;}	
	
	.finished-section {padding:15px 0; text-align:center;}
	.finished-section h2 {position:inherit;}
	.finished-section h2:before {display:none;}
	.finished-section h2:after {display:none;}
	.finished-section p {line-height:1.2; padding:30px 0 0 0;}
	.finished-section p span {font-size:40px; display:block;}
	
	.services-section .box h3 {font-size:24px; min-height:inherit;}
	
	.inner-section01 {padding:15px 0;}
	.inner-section01 h5 {padding-bottom:15px;}
	.inner-section01 h2 span {font-size:26px; display:block;}
	
	.inner-section02 {padding:15px 0; text-align:center;}
	.inner-section02 h2 {position:inherit;}
	.inner-section02 h2:before {display:none;}
	.inner-section02 h2:after {display:none;}
	
	.inner-section03 {padding:15px 0;}
	.inner-section03 h2 {position:inherit;}
	.inner-section03 h2:before {display:none;}
	.inner-section03 h2:after {display:none;}
	.inner-section03 h6 span {font-size:24px;}

	.gallery-section [class*="col-md-4"] {padding:2px 15px; width:50% !important; float:left;}
	
	.certifications-section {padding:30px 0;}
	.certifications-section .heading {padding:10px 10px 10px 90px; font-size:18px; letter-spacing:0.1em;}
	.certifications-section .heading span {position:absolute; top:-12px; left:0;}
	.certifications-section .content {padding-top:50px; text-align:center;}
	.certifications-section .content p {font-size:14px; padding:15px 0;}
	.certifications-section .content ul {margin:0; padding:0; list-style:none;}
	.certifications-section .content ul li {margin:10px; display:inline-block;}
	
	.workwith-section {padding:30px 0;}
	.workwith-section section {min-height:250px; padding:30px 0;}
	.workwith-section .heading h4 {font-size:18px; letter-spacing:0.1em;}
	.workwith-section .content {padding:15px;}
	.workwith-section .content [class*="col-"] {padding:5px 15px; width:50%;}
	
	.projects-section {padding:30px 0;}
	.projects-section h2 {position:inherit;}
	.projects-section h2:before {display:none;}
	.projects-section h2:after {display:none;}
	.projects-section .box {padding:14px;}
	.projects-section .box figure {height:auto;}
	.projects-section .box h5 {min-height:inherit;}
	
	.project-details-section {padding:30px 0;}
	.project-details-section h2 {position:inherit; text-align:center;}
	.project-details-section h2:before {display:none;}
	.project-details-section h2:after {display:none;}
	.project-details-section .box {padding:0 14px; margin:15px 0;}	
	.project-details-section .box .content {height:auto; text-align:left;}
	
	.project-details-section .gallery {}
	.project-slider .owl-prev {left:-30px;}
	.project-slider .owl-next {right:-30px;}
	.calculor-welcome-section {text-align:center;}
	.calculor-welcome-section h3 {text-transform:uppercase; font-weight:700; padding:0;}
	.calculor-welcome-section p {font-size:14px; letter-spacing:0.1em;}
	
	.calculor-section {padding:15px 0; margin-bottom:-15px; border-bottom:1px solid #2c4a5f;}
	.calculor-section h5 {position:relative; text-align:center; margin:0 auto; max-width:840px; font-weight:400; letter-spacing:0.1em;}
	.calculor-section h5:before {display:none;}
	.calculor-section h5:after {display:none;}
	
	.calculor-section .select-box {margin:0 auto; padding:15px 30px; max-width:1040px;}
	.calculor-section .select-box ul {margin:0 -15px; padding:0; list-style:none;}
	.calculor-section .select-box ul li {margin:0; padding:0; width:100%; float:none;}
	.calculor-section .estimated-box {font-size:14px; line-height:2; text-align:center !important;}
	.calculor-section .estimated-box .text-right {text-align:center !important;}
	.calculor-section .materials-box {padding:0;}
		
	.color-box {padding:15px 0; margin:0 auto; max-width:286px;}
	.color-box ul {margin:0 -5px;}
	.color-box ul li {margin:5px;}
	
	.design-box {padding:15px 0; margin:0 auto; max-width:290px;}
	.design-box ul {margin:0 -5px;}
	.design-box ul li {margin:5px; width:90px; height:90px;}
	
	.options-box {padding:15px;}
	
	.options2-box {padding:15px;}
	
	.information-box {padding:15px 0;}
	.information-box .field {padding:5px 0;}
	
	.cost-box {padding:15px 0;}
	.cost-box h2 {font-size:50px;}
	.cost-box h4 {font-size:20px;}
	
	.btn-next, .btn-previous {margin:20px auto; width:auto; height:40px; font-size:16px; line-height:40px;}
	.btn-next a, .btn-previous a {padding:0 25px;}
	
	.checkbox-container {font-size:18px;}
	.calculor-section .estimated-box small {padding-bottom:10px;}
	.information-box input[type="text"], .information-box input[type="email"], .information-box textarea {padding:8px 13px; height:40px;}
	
	.invisible {position:absolute;}
	
/* 	-----------------------------------------------------
	---------------- Call To Action Styles --------------
	----------------------------------------------------- */
	.call-to-action-section {min-height:inherit; padding:15px 0;}
	.call-to-action-section [class*="col-"] {padding:15px;}
	.call-to-action-section h2 {font-size:24px;}
	.call-to-action-section p {font-size:14px; padding:10px 0;}
	.call-to-action-section p span {font-size:24px;}
	.call-to-action-section p .fa-map, .call-to-action-section p .fa-fax, .call-to-action-section .fa-facebook-f, .call-to-action-section .fa-twitter, .call-to-action-section .fa-google-plus-g {font-size:18px;}
	
	.call-to-action-section .form-box {max-width:100%;}
	.call-to-action-section .form-box input[type="text"], .call-to-action-section .form-box input[type="email"], .call-to-action-section .form-box input[type="tel"], .call-to-action-section .form-box textarea {margin:15px 0 0 0; padding:10px 0; height:40px; font-size:14px;}
	.call-to-action-section .form-box textarea {height:70px; overflow:auto; resize:none;}
	.call-to-action-section .form-box input[type="submit"] {margin:15px 0 0 0; height:50px; font-size:20px; line-height:50px;}
	
	
/* 	-----------------------------------------------------
	-------------------- Footer Styles ------------------
	----------------------------------------------------- */
	.footer-section {padding:15px 0;}
	.footer-section ul {padding:15px 0;}
	.footer-section ul li {margin:0; padding:0 5px; font-size:14px; line-height:1.8;}
	.footer-section p {font-size:12px; line-height:1.8; padding:15px 0;}
	
	.calculator-right {top:44%;}
	.calculator-right .calculator-button {background:url(../images/calculator-res.png) left top no-repeat; width:40px; height:40px;}
	.calculator-right .calculator-button:hover {background:url(../images/calculator-res.png) left top no-repeat; width:40px; height:40px;}
	

}
/*For Midium Mobile*/
@media only screen and (min-width:480px) and (max-width:760px){
	
}
/*For Tablet*/
@media only screen and (min-width:760px) and (max-width:1023px) {
img {max-width:100%; height:auto;}

/* 	-----------------------------------------------------
	--------------------- Top Styles --------------------
	----------------------------------------------------- */
	.top-section {}
	
/* 	-----------------------------------------------------
	-------------------- Header Styles ------------------
	----------------------------------------------------- */
	.header-section {min-height:inherit; text-align:center;}
	.header-section .logo {float:none; width:100%; text-align:center;}
	.header-section .logo img {display:inline-block;}
	.header-section .menu {float:none; width:100%;}
	.header-section .menu ul li {float:none; display:inline; font-size:14px;}
	.header-section .menu ul li a {padding:0 5px; display:inline-block;} 

/* 	-----------------------------------------------------
	-------------------- Banner Styles ------------------
	----------------------------------------------------- */
	.banner-section {min-height:inherit; background-size:cover;}
	.banner-section h1 {font-size:32px; line-height:1.2; padding:15px; margin:170px 0;}
		
	
/* 	-----------------------------------------------------
	------------------- Content Styles ------------------
	----------------------------------------------------- */
	.content-section {}
	.content-section h2 {font-size:32px;}
	.content-section h3 {font-size:28px;}
	.content-section h4 {font-size:24px;}
	.content-section h5 {font-size:22px;}
	.content-section h6 {font-size:20px;}

	.services-section h2:before {position:absolute; left:0; top:24px; width:200px;}
	.services-section h2:after {position:absolute; right:0; top:24px; width:200px;}
	
	.finished-section h2:before {position:absolute; left:0; top:24px; width:100px;}
	.finished-section h2:after {position:absolute; right:0; top:24px; width:100px;}

	.finished-section p {line-height:1.2; padding:30px 0 0 0;}
	.finished-section p span {font-size:70px; display:block;}
	
	.inner-section02 h2:before {position:absolute; left:0; top:24px; width:110px;}
	.inner-section02 h2:after {position:absolute; right:0; top:24px; width:110px;}
	
	.inner-section03 h2:before {position:absolute; left:0; top:24px; width:50px;}
	.inner-section03 h2:after {position:absolute; right:0; top:24px; width:50px;}
	
	.inner-section03 h6 span {font-size:30px;}
	
	.certifications-section .content p {padding:15px 0;}
	.certifications-section .content ul li {margin:25px 0;}
	
	.project-details-section h2::after {right:-60px;}
	.project-details-section h2::before {left:-60px;}
	.project-details-section .box .content {height:320px;}
	.project-slider .owl-prev {left:-30px;}
	.project-slider .owl-next {right:-30px;}
	
/* 	-----------------------------------------------------
	---------------- Call To Action Styles --------------
	----------------------------------------------------- */
	.call-to-action-section {min-height:inherit;}
	.call-to-action-section h2 {font-size:32px;}
	.call-to-action-section p {font-size:16px;}
	.call-to-action-section p span {font-size:32px;}
	.call-to-action-section .form-box {max-width:100%;}
	
/* 	-----------------------------------------------------
	-------------------- Footer Styles ------------------
	----------------------------------------------------- */
	.footer-section {}
	.footer-section ul li {line-height:1.8;}
	
	
}
@media only screen and (min-width:1024px) and (max-width:1140px) {
	.footer-section ul li {padding:0 8px;}
	.services-section .box h3 {font-size:30px;}
	.services-section .box h5 {font-size:22px;}
	
	.services-section h2:before {position:absolute; left:0; width:230px;}
	.services-section h2:after {position:absolute; right:0; width:230px;}
	
	.finished-section h2:before {position:absolute; left:0; width:100px;}
	.finished-section h2:after {position:absolute; right:0; width:100px;}
	
	.project-slider .owl-prev {left:-30px;}
	.project-slider .owl-next {right:-30px;}
}