/* * --------------------------------------------------------------------- * MNKY CSS for responsive layout (tablets and mobile devices) * --------------------------------------------------------------------- */ @media only screen and (min-width: 980px) { #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 );} /* 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%;} .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;} #footer-menu{float:none; text-align: center; width:100%; margin-top:10px;} #footer-menu ul li{float:none; display:inline-block;} #footer-menu ul li:first-child a{padding-left: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;} /* 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; } } /* * ------------------------------------------------------------------------------------------- * TABLET PORTRAIT * ------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 768px) and (max-width: 979px) { /* General */ .size-wrap {width: 700px !important;} .background-block-container {width: 680px !important;} #layout-wrapper.boxed, #layout-wrapper.boxed-attached {width:740px;} #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 {width:340px; height:248px;} ul.pf-one-column li{min-height:none;} ul.pf-one-column li img {width: 426px; 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:340px; height:340px;} .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;} /* Footer */ #footer-wrapper #footer-widget-area .widget-area {width: 320px;} #footer-wrapper #footer-widget-area .widget-area {margin-right:60px;} #footer-wrapper #footer-widget-area .widget-area:last-child, #footer-wrapper #footer-widget-area .widget-area:nth-child(2) {margin-right:0px;} #footer-wrapper #footer-widget-area .widget-area:nth-child(3){clear:left;} /* 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: 740px; 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;} /* WooCommerce */ .woocommerce input#s { width: 177px; } .woocommerce #searchsubmit { width: 100%; margin-top:10px; cursor:pointer; } .woocommerce input , .woocommerce textarea {max-width:100%;} .woocommerce div.product div.images div.thumbnails a.last,.woocommerce #content div.product div.images div.thumbnails a.last,.woocommerce-page div.product div.images div.thumbnails a.last,.woocommerce-page #content div.product div.images div.thumbnails a.last { margin-bottom:5px; } .woocommerce a.added_to_cart, .woocommerce-page a.added_to_cart { top: 18%; } } /* * ------------------------------------------------------------------------------------------- * 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;} .mnky-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;} .mnky-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;} } /* * ------------------------------------------------------------------------------------------- * 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:320px;} 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); } /* WooCommerce */ .woocommerce .related ul.products li.product,.woocommerce .related ul li.product,.woocommerce .upsells.products ul.products li.product,.woocommerce .upsells.products ul li.product,.woocommerce-page .related ul.products li.product,.woocommerce-page .related ul li.product,.woocommerce-page .upsells.products ul.products li.product,.woocommerce-page .upsells.products ul li.product, .woocommerce ul.products li.product,.woocommerce-page ul.products li.products { width: 48.4% !important; } .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce #content input.button,.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button,.woocommerce-page #respond input#submit,.woocommerce-page #content input.button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce #content input.button.alt,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt,.woocommerce-page input.button.alt,.woocommerce-page #respond input#submit.alt,.woocommerce-page #content input.button.alt { color: #ffffff; 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 ); text-decoration: none; } .woocommerce ul.products li.last, .woocommerce-page ul.products li.last { margin-right: 1.1% !important; } .woocommerce .products .product:nth-child(2n) { margin-right: 0px !important; } .woocommerce ul.products li.first, .woocommerce-page ul.products li.first { clear: none !important; } .woocommerce a.added_to_cart, .woocommerce-page a.added_to_cart { top: 23%; } .woocommerce .shop-template .images { width:100% !important; } .woocommerce .shop-template .entry-summary { width:100% !important; } .woocommerce input, .woocommerce textarea { max-width: 100%; } .woocommerce .checkout .col2-set .col-1 { width:100%; } .woocommerce .checkout .col2-set .col-2 { width:100%; margin-top:20px; } .woocommerce .cart_totals, .woocommerce .shipping_calculator, .woocommerce .shipping_calculator input { width:100% !important; max-width:100%; } .woocommerce table.shop_table .product-thumbnail { display:none; } .woocommerce table.shop_table .checkout-button { margin-top:25px; width:100% !important; max-width:100%; } /* Mobile drop-down menu style */ .mobile-select-menu {width:400px; margin: 30px 20px 0px; display:block;} } /* * ------------------------------------------------------------------------------------------- * 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:203px;} 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;} #footer-menu{font-size:9px;} /* WooCommerce */ .woocommerce form .form-row, .woocommerce-page form .form-row { min-width: 280px; padding: 0px; } .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce #content input.button,.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button,.woocommerce-page #respond input#submit,.woocommerce-page #content input.button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce #content input.button.alt,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt,.woocommerce-page input.button.alt,.woocommerce-page #respond input#submit.alt,.woocommerce-page #content input.button.alt { color: #ffffff; 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 ); text-decoration: none; } .woocommerce input, .woocommerce textarea { max-width: 100%; } .woocommerce .lost_reset_password #user_login, .woocommerce .lost_reset_password .button { width:100%; margin-top:5px; } .woocommerce .login #username,.woocommerce .checkout_coupon #coupon_code { max-width: 85%; float:none; } .woocommerce .login #password{ max-width: 85%; float:right; } .woocommerce .login .form-row-last label{ margin-left:41px; } .woocommerce .login .button { width:48%; margin:10px 10px 10px 0px; } .woocommerce .checkout_coupon .button { float:right; width: 85%; margin-top:5px; } .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width: 100%; float: none; } .shop-template .product-inner { min-height: 120px; } .woocommerce .related ul.products li.product,.woocommerce .related ul li.product,.woocommerce .upsells.products ul.products li.product,.woocommerce .upsells.products ul li.product,.woocommerce-page .related ul.products li.product,.woocommerce-page .related ul li.product,.woocommerce-page .upsells.products ul.products li.product,.woocommerce-page .upsells.products ul li.product, .woocommerce ul.products li.product,.woocommerce-page ul.products li.products { width: 48.1% !important; } .woocommerce ul.products li.last, .woocommerce-page ul.products li.last { margin-right: 1.1% !important; } .woocommerce ul.products li.first, .woocommerce-page ul.products li.first { clear: none !important; } .woocommerce a.added_to_cart, .woocommerce-page a.added_to_cart { top: 15%; } .woocommerce a.add_to_cart_button.button, .woocommerce a.product_type_variable.button, .woocommerce a.product_type_grouped.button { height:auto; line-height:20px; padding-top: 5px; padding-bottom:5px; } .woocommerce .product_meta, .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { float:right; } .woocommerce .shop-template .images { width:100% !important; } .woocommerce .shop-template .entry-summary { width:100% !important; } .woocommerce .cart_totals, .woocommerce .shipping_calculator, .woocommerce .shipping_calculator input { width:100% !important; max-width:100%;} .woocommerce .checkout .col2-set .col-2 { margin-top:20px; } .woocommerce table td { padding:5px !important; } .woocommerce th.product-name { -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-radius: 6px 0 0 0; } .woocommerce table.shop_table .product-thumbnail, .woocommerce table.shop_table .product-remove { display:none; } .woocommerce #coupon_code{ width:100% !important; max-width:100%; margin-top:10px; } .woocommerce table.shop_table .button { width:100%; margin-top:10px; } .woocommerce #payment #place_order,.woocommerce-page #payment #place_order { float:none; } .woocommerce table.shop_table .checkout-button { margin-top:25px; } /* Mobile drop-down menu style */ .mobile-select-menu {width:240px; margin: 30px 20px 0px; display:block;} }