| 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;}
}