/* * --------------------------------------------------------------------- * CBES CSS for responsive layout (tablets and mobile devices) * --------------------------------------------------------------------- */ @media only screen and (min-width: 979px) { #primary-main-menu{display:block !important;} } @media only screen and (min-device-width : 320px) and (max-device-width : 1024px){ html {-webkit-text-size-adjust: none; } } /* * ------------------------------------------------------------------------------------------- * FOR ALL DEVICES * ------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 979px) { /* General */ body { overflow-x: hidden; } input {max-width:90%;} textarea{max-width:90%;} embed, object, iframe {height:auto; max-width:100%;} img {height:auto;} input[type='submit'] {background-image: -moz-linear-gradient(top, rgba(255,255,255,0.23) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.23)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.23) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.23) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.23) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.23) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bffffff', endColorstr='#00ffffff',GradientType=0 );} .column-1-2 { width: 40%; margin: 0 5% 0 5% !important; } .column-last { margin: 0 5% 0 5% !important; } /* Header */ #header-search-wrapper, #primary-main-menu li.header-search-toggle {display:none !important;} /* Content */ #wrapper #content_full, #wrapper #content_right, #wrapper #content_left {width:100%;} .entry-content img { max-width: 100%; height: auto; } .alignnone, .alignleft { margin: 5px 15px 5px 0px; } .alignright { margin: 5px 0px 5px 15px;} .gallery .gallery-item{padding-right:20px;} .gallery dt{background-image: none;} ul.pf-one-column li img {margin:0 0 15px;} ul.pf-one-column li .pf-description {float:none; width:100%;} .pf-one-column figcaption {width: 426px;} .nivo-size-wrap{max-width:100%;} .su-gmap {height:300px;} .nivo-directionNav {display:none;} .gallery br { display:none; } #layout-wrapper .background-block {margin: 0px -20px;} /* Footer */ #copyright {float: none; text-align: center; width:100%; padding-bottom:0px;} /* Mobile menu style */ .toggleMenu {font-family: Arial, Helvetica, sans-serif; height:45px; background:#333 url('../../images/mobile-menu-bg.png') repeat-x left bottom; display:block; padding: 0 20px; font-size: 11px; color:#f1f1f1 !important; text-transform:uppercase; line-height:45px; font-weight:bold; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.196); -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.196); -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.196);} .toggleMenu span{margin-top:14px; display:block; border-bottom: 10px double #f1f1f1; border-top:3px solid #f1f1f1; height: 4px; width:20px; float:right;} .toggleMenu.menu-active span{border-color:#919191;} #menu-wrapper{width:100%;} #layout-wrapper.boxed #menu-wrapper, #layout-wrapper.boxed-attached #menu-wrapper{width:auto; margin:0 -20px;} #primary-main-menu{margin:0; display:none; position:static;} #primary-main-menu li, #primary-main-menu > li.current-menu-item, #primary-main-menu > li.current-menu-ancestor {padding:0 !important;} #primary-main-menu > li {float: none;} #primary-main-menu li a, #primary-main-menu li ul li a, #primary-main-menu li ul li:last-child > a, #primary-main-menu > li.current-menu-item > a, #primary-main-menu > li.current-menu-ancestor > a, #primary-main-menu > li:hover > a{margin:0; padding:14px 20px; font-size:13px !important; color:#f1f1f1 !important; background-color: rgba(50, 50, 50, 0.953); border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1); line-height:1; text-transform:uppercase; opacity:1;} #primary-main-menu li ul{margin:0; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;} #primary-main-menu li:last-child > a{padding-right:20px;} #primary-main-menu li ul li a:hover {padding:14px 20px;} /* Sub-levels */ #primary-main-menu li:hover > ul{visibility: hidden;} #primary-main-menu li ul {border-top:none !important;} #primary-main-menu li ul li a {width:auto;} #primary-main-menu li ul li a{padding-left:40px !important;} #primary-main-menu li ul li ul li a{padding-left:60px !important;} #primary-main-menu li ul li ul li ul li a{padding-left:80px !important;} #primary-main-menu li ul li ul li{display:none;} #primary-main-menu li.hover ul li.hover ul li{display:block;} #primary-main-menu > li.hover > ul , #primary-main-menu li li.hover > ul {position: static !important; display:block !important; visibility: visible !important;} /* Sub-level indicator */ #primary-main-menu li ul > li > .parent:after, #primary-main-menu > li > .parent:after, #primary-main-menu li li .parent:after {content: "\e3b1" !important; font-family:moon; float:right; font-size:11px; width: auto !important; height: auto !important; border:none !important; position:static !important; left:auto !important; bottom:auto !important; margin:0 !important;} #primary-main-menu > li.hover > .parent:after, #primary-main-menu li li.hover > .parent:after {content: "\e3b2" !important;} /* Current menu item style */ #primary-main-menu > li.current-menu-item, #primary-main-menu > li.current-menu-ancestor, #primary-main-menu > li.current-menu-item:after, #primary-main-menu > li.current-menu-ancestor:after{margin:0; border: none; } .big-testimonial-wrapper .big-testimonial-content {clear: both;margin-left: 0px;height:auto;} .big-testimonial-wrapper .big-testimonial-image {margin: 0px 0px 10px 280px;} .pf-one-column figcaption {bottom: 80px !important;} .pf-one-column li h3 {text-align:left;} .pf-one-column span { float:left;} .pf-two-columns figcaption {bottom: 0px !important;padding:15px;} .pf-four-columns figcaption {bottom: 0px !important;padding:15px;} } /* * ------------------------------------------------------------------------------------------- * TABLET PORTRAIT * ------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 768px) and (max-width: 979px) { /* General */ .size-wrap {width: 860px !important;} .background-block-container {width: 840px !important;} #layout-wrapper.boxed, #layout-wrapper.boxed-attached {width:900px;} #top-bar{width: 700px;} #wrapper #content_right, #wrapper #content_left {width:470px;} #sidebar_right .widget-area {width:200px;} #sidebar_left .widget-area {width:200px;} /* Header */ #title-wrapper { -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto; } /* Content */ ul.pf-two-columns li {width: 340px; height: 214px;} ul.pf-three-columns li {} ul.pf-one-column li{min-height:none;} ul.pf-one-column li img {width: 100%; margin-bottom:0px; margin-right:20px;} ul.filterable-grid.pf-one-column li .mask {width:426px; height:213px;} ul.filterable-grid.pf-one-column li a.pf-zoom {margin-top:80px;} ul.filterable-grid.pf-two-columns li a.pf-zoom { margin-top:53px; } ul.filterable-grid.pf-three-columns li a.pf-zoom { margin-top:70px; } .latest-works ul li a.pf-zoom { margin-top:110px; } .latest-works ul li {width:415px; height:auto;} .latest-works ul li:nth-child(2) {margin:0 0 20px 0;} .commentlist .children, .commentlist .children .children { padding-left:20px;} #wp-calendar tbody td { padding:4px 6px;} #wp-calendar tfoot #next { padding-left:40px;} #wp-calendar tfoot #prev { padding-right:40px;} input.s{width: 156px;} #fancybox-wrap, #fancybox-frame, #fancybox-content {max-width:660px;} .testimonial-wrapper {max-width: 93.9%;} /* Footer */ #footer-wrapper #footer-widget-area .widget-area {width: 280px;} #footer-wrapper #footer-widget-area .widget-area {margin-right:20px;} #footer-wrapper #footer-widget-area .widget-area:last-child, #footer-wrapper #footer-widget-area .widget-area:nth-child(2) {margin-right:0px;} /* Mobile menu style */ .toggleMenu {width:80px; position:absolute; right:0px; bottom:13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #layout-wrapper.boxed .toggleMenu, #layout-wrapper.boxed-attached .toggleMenu{right:20px;} #menu-wrapper{margin:0; border:none; z-index:999; position:absolute; bottom:0px;} #layout-wrapper.boxed #menu-wrapper, #layout-wrapper.boxed-attached #menu-wrapper{width: 900px; margin:0 -20px;} #primary-main-menu{position:absolute; top:1px; width:100%} /* Mobile drop-down menu style */ .mobile-select-menu {display:block; width:250px; padding:0 0 0 10px; position:absolute; right:0px; bottom:15px;} } /* * ------------------------------------------------------------------------------------------- * MOBILE BOTH VIEWS * ------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* General */ embed, object, iframe {height:auto;} #sidebar_right, #sidebar_right .widget-area {width:100%; margin-top:40px;} #sidebar_left, #sidebar_left .widget-area {width:100%; margin-top:40px;} /* Header */ #header-wrapper {border-bottom:none;} #header-wrapper, #header-wrapper #header-widget-area {position:relative;} #header {padding-top:85px; padding-bottom: 35px; height:auto !important;} #header #logo {display: block; position: static; text-align:center; width: 100%; margin:0px; bottom:0;} #header #logo h1 {position:static;} .page-title{text-align:center;} .page-title h1{padding-top:20px; padding-bottom:20px; float:none; display:inline-block;} .csb-breadcrumbs {float: none; padding: 5px 0px 21px 1px;} #layout-wrapper.full-width #header{position:static;} #title-wrapper { -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto; } /* Header Sidebar */ #header-wrapper #header-widget-area{margin-top:15px; text-align: center;} #header-wrapper #header-widget-area .widget-title{display:none;} #header-wrapper #header-widget-area ul.xoxo {float:none; margin-top:0px !important; display: inline-block;} #header-wrapper #header-widget-area ul li{padding:0px; margin:0 0 10px;} #header-widget-area .widget-container {margin:0px;} /* Content */ #orbit-wrapper {margin-top: 40px;} .csb-breadcrumbs, .fp_carousel li .fp_title{display:none;} .column {float: none !important; margin: 0 0 40px 0 !important; width: 100% !important;} .su-tabs .su-tabs-nav{display:none !important;} .su-tabs .su-tabs-panes{border:1px solid #e5e5e5 !important; padding-left:0px !important;} .su-tabs .pane-title {display:block !important;} .su-tabs .su-tabs-pane{border:none !important; border-top: 1px solid #e5e5e5 !important; padding:20px;} .fp_carousel li .fp_mask {display:none;} .error404_content .error404-icon {padding-top:0px; font-size: 180px;} .client-wrapper {text-align:center;} .pull-right, .pull-left {float:none; display:block; text-align:center;} #respond input, #respond textarea {width: 100%;} .su-callout .callout-content{float:none;} .su-callout .callout-button {float:none; margin-top:20px;} .latest-blog-entry-thumb .nivoSlider {width:100%;} .blog-layout-medium{float:none; width:auto; padding:0; margin-bottom: 18px;} #top-bar{padding:15px 0px;} #top-bar ul{text-align:center;} #top-bar #topright-widget-area ul{margin-top:5px; float:none;} #top-bar ul li {display: inline-block; float: none;} /* Footer */ #footer-wrapper #footer-widget-area .widget-area {width: 100%; margin-right:0px; float:none;} /* Mobile menu style */ #menu-wrapper{height:45px; position:absolute; top:0px; left:0; right:0; margin: 0; border:none; z-index:999;} .big-testimonial-wrapper .big-testimonial-content {clear: both;margin-left: 0px;height:auto;} .big-testimonial-wrapper .big-testimonial-image {margin: 0px 0px 10px 150px;} ul.pf-one-column li{width:100%;} .pf-one-column figcaption {width: 100%; bottom: 242px !important;} .pf-two-columns figcaption {top: 178px !important; padding:15px;} .pf-two-columns figcaption .view-large {bottom:55px !important;right: 15px !important;} .pf-two-columns figcaption a { bottom: 55px !important; right: 55px;} .pf-four-columns figcaption {top: 270px !important; padding:15px;} .pf-four-columns figcaption .view-large {bottom: 15px !important;right: 15px !important;} .pf-four-columns figcaption a { bottom: 15px !important; right: 55px;} } /* * ------------------------------------------------------------------------------------------- * MOBILE LANDSCAPE * ------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* General */ .size-wrap {width: 440px !important;} .background-block-container {width: 420px !important;} #layout-wrapper.boxed, #layout-wrapper.boxed-attached {width:480px; margin:0 auto;} #top-bar{width: 440px;} /* Header */ #header #logo img{max-width:420px; height:auto;} /* Content */ ul.pf-two-columns li{width: 440px; height: 277px;} ul.pf-three-columns li, ul.pf-four-columns li{width: 440px; height:auto;} ul.filterable-grid.pf-one-column li .mask {width:440px; height:220px;} ul.filterable-grid.pf-one-column li a.pf-zoom {margin-top:82px;} ul.filterable-grid.pf-two-columns li a.pf-zoom { margin-top:83px; } ul.filterable-grid.pf-four-columns li a.pf-zoom, ul.filterable-grid.pf-three-columns li a.pf-zoom { margin-top:105px; } ul.filterable-grid.pf-four-columns li .pf-title{padding: 12px 15px; bottom:30px;} .commentlist .children, .commentlist .children .children { padding-left:20px;} #fancybox-wrap, #fancybox-frame, #fancybox-content {max-width:400px;} .latest-works ul li:hover .pf-title, ul.filterable-grid li:hover .pf-title { -webkit-transform: translateX(-400px); -moz-transform: translateX(-400px); -o-transform: translateX(-400px); -ms-transform: translateX(-400px); transform: translateX(-400px); } /* Mobile drop-down menu style */ .mobile-select-menu {width:400px; margin: 30px 20px 0px; display:block;} .latest-works ul li {width:415px; height:auto;} /* Back to top display:none */ #back-top {display:none !important;} /* Social Media Heading */ #layout-wrapper.boxed .social-media-section h2, #layout-wrapper.boxed-attached .social-media-section h2 { font-size:14px;} /* testimonial-wrapper */ #layout-wrapper.boxed .testimonial-wrapper, #layout-wrapper.boxed-attached .testimonial-wrapper { width:87%; } /* footer-widget-area */ #layout-wrapper.boxed #footer-widget-area, #layout-wrapper.boxed-attached #footer-widget-area {margin: 0px auto 0 20px;} } /* * ------------------------------------------------------------------------------------------- * MOBILE PORTRAIT * ------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 479px) { /* General */ .size-wrap {width:280px !important;} .background-block-container {width: 260px !important;} #layout-wrapper.boxed, #layout-wrapper.boxed-attached {width: 320px; margin:0 auto;} #top-bar{width: 280px;} /* Header */ #header #logo img{max-width:260px; height:auto;} /* Content */ ul.pf-two-columns li {width: 280px; height: 177px;} ul.pf-three-columns li, ul.pf-four-columns li {width:280px; height:auto;} ul.filterable-grid.pf-one-column li .mask {width:280px; height:140px;} ul.filterable-grid.pf-one-column li a.pf-zoom {margin-top:42px;} ul.filterable-grid.pf-two-columns li a.pf-zoom { margin-top:33px; } ul.filterable-grid.pf-four-columns li a.pf-zoom, ul.filterable-grid.pf-three-columns li a.pf-zoom, .latest-works ul li a.pf-zoom{ margin-top:47px; } .commentlist .children { padding-left:20px;} .commentlist .children .children { padding-left:10px;} div.slider-nav, .orbit-bullets{display:none;} .error404 .searchform .s {width:85%;} .su-button {height:auto;} #fancybox-wrap, #fancybox-frame, #fancybox-content {max-width:240px;} th{padding:5px 0px} td{padding:5px 0px;} .post-meta span {padding: 0px; line-height:2.0em;} .post-meta .post-comments{float:none;} .post-tags {padding: 0px; line-height:2.0em;} .big-testimonial-wrapper .big-testimonial-content {clear:both; margin-left:0px;} .big-testimonial-wrapper .big-testimonial-image {margin-left: 77px; margin-bottom:10px;} .big-testimonial-wrapper .big-testimonial-image:before {border-style: solid; border-width: 20px 20px 0 20px; border-color: #e7e7e7 transparent transparent transparent; border-color:#e7e7e7 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); top:auto; right:auto; bottom:-21px; left:50%; margin-left:-20px;} /* Footer */ #copyright {font-size:9px;} /* Mobile drop-down menu style */ .mobile-select-menu {width:240px; margin: 30px 20px 0px; display:block;} .latest-works ul li {height:auto;} .pf-one-column figcaption {bottom: 310px !important;padding: 15px; height:50px;} .pf-one-column figcaption span {display:none;} .pf-one-column figcaption a {bottom: 95px !important;right: 180px;} .pf-one-column figcaption .view-large {bottom: 95px !important;right: 15px !important;} .pf-two-columns figcaption {top: 126px !important;padding: 15px; height:50px;} .pf-two-columns figcaption span {display:none;} .pf-two-columns figcaption a {bottom: 135px !important;right: 180px;} .pf-two-columns figcaption .view-large {bottom: 135px !important;right: 15px !important;} .pf-four-columns figcaption {top: 153px !important;padding: 15px;} .pf-four-columns figcaption a {bottom: 160px !important;right: 180px;} .pf-four-columns figcaption .view-large {bottom: 160px !important;right: 15px !important;} ul.social-media {margin-top: -23px !important;} .social-media-section h2 {display:none;} ul.social-media li { margin: 0 0 0 6px;} ul.social-media li:hover { margin: 0 0 0 6px;} /* Back to top display:none */ #back-top {display:none !important;} /* social-media */ #layout-wrapper.boxed ul.social-media li, #layout-wrapper.boxed-attached ul.social-media li { font-size:16px; } #layout-wrapper.boxed .testimonial-wrapper, #layout-wrapper.boxed-attached .testimonial-wrapper { width:81%;} #layout-wrapper.boxed .service-content, #layout-wrapper.boxed-attached .service-content { width:80%; } /* Footer Area */ #footer-widget-area {width:90% !important;margin: 0 20px !important;} }