/* Apply To All Responsive Layouts ================================================== */ @media only screen and (max-width: 959px) { /*special hide class*/ .hide-all-devices{ display: none; } /*hide stuff*/ #navigation, #navigation #searchbar{ display: none !important; } .entry-overlay { display: none !important; } /*navigation*/ .mobile-menu-toggle { display: block; height: 40px; line-height: 40px; padding-left: 20px; color: #666; position: inherit; right: auto; bottom: auto; margin: 0px 0px 0px 0px; text-transform: uppercase; border: 1px solid #ddd; -moz-border-radius: 2px; -khtml-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #f7f7f7; background: -moz-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f7f7f7));background: -webkit-linear-gradient(top, #fefefe 0%,#f7f7f7 100%);background: -o-linear-gradient(top, #fefefe 0%,#f7f7f7 100%);background: -ms-linear-gradient(top, #fefefe 0%,#f7f7f7 100%);background: linear-gradient(to bottom, #fefefe 0%,#f7f7f7 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f7f7f7',GradientType=0 ); position: relative; width: 100%; } .mobile-menu-toggle span.fa-bars { margin-right: 10px; } .mobile-menu-toggle span.fa-caret-down { position: absolute; right: 20px; top: 0; height: 40px; line-height: 40px; display: block; font-size: 10px; } .mobile-menu-toggle:hover { text-decoration: none; color: #000; } .sidr { position: absolute; position: fixed; top: 0; height: 100%; z-index: 999999; width: 320px; overflow-x: none; overflow-y: auto;font-size: 1em; background: #333; color: #fff; } #sidr-main { padding: 40px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .sidr.right { left: auto; right: -320px; } .sidr.left { left: -320px; right: auto; } .sidr a { color: rgba(255, 255, 255, 1); } .sidr a:hover { color: #fff; text-decoration: none; } .sidr ul li ul { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: -8px; margin-left: 0; margin-top: 10px; } .sidr ul li ul li a { background: url("../images/caret.png") 12px center no-repeat; padding-left: 30px; } .sidr ul li ul li ul li a { background-position: 24px center; padding-left: 60px; } .sidr-class-toggle-sidr-close { display: block; height: 19px; width: 24px; background: url("../images/bars.png"); margin-bottom: 20px; } li.sidr-class-menu-item { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 8px 0; } ul.sidr-class-sub-menu li.sidr-class-menu-item:last-child { border-color: transparent; } #sidr-id-searchbar { margin-top: 30px; } #sidr-id-searchbar input { border-radius: 3px; -webkit-appearance: none !important; outline: none; border: none; background: #222; color: #999; } #sidr-id-searchsubmit { display: none; } /*display dropdown nav*/ #navigation .selector { display: inline-block; } /*main*/ #wrap { padding: 0; } #header-social { position: relative; right: 1px; top: -81px; margin-top: 2px; list-style: none; width: 102px; float: right; } #mapboxframe { height: 500px; width: 100%; } } /* #Tablet (Landscape) = Design for a width of 720px ================================================== */ @media only screen and (min-width : 768px) and (max-width : 1024px) { /*special hide class*/ .hide-tablet-landscape{ display: none; } .mobile-menu-toggle { margin: 0px 0px 0px 0px; position: relative; width: 97%; } } /* #Tablet (Portrait) = Design for a width of 720px ================================================== */ @media only screen and (min-width: 768px) and (max-width: 959px) { /*special hide class*/ .hide-tablet-portrait{ display: none; } /*grid*/ .outerbox{ width: 725px; } .loop-entry{ width: 228px; } /*removed fixed header*/ .fixed-header { position: relative !important; top: auto !important; left: auto !important; } #wrap { padding-top: 0 !important; } /*main*/ #post{ width: 430px } #sidebar{ width: 260px } .wpex-widget-recent-posts .recent-right{ width: 130px; } #footer .wpex-widget-recent-posts .recent-right{ width: 130px; } /*homepage with sidebar*/ .home-sidebar .loop-entry{ width: 205px; } .home-sidebar .loop-entry-meta li{ display: block; float: none; margin-bottom: 5px; } .home-sidebar .loop-entry-meta li:last-child{ margin:0; } /*footer*/ .footer-box{ width: 226px; margin-right: 21px; } /*blog*/ #author-bio{ width: 310px } body.no-sidebar #author-bio{ width: 600px; } #archive-wrap { width: 725px; margin-left: auto; margin-right: auto; #search-entries-wrap { position: relative; width: 725px; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } } /* Mobile (Portrait) = Design for a width of 280px ================================================== */ @media only screen and (max-width: 767px) { /*hide*/ .hide-mobile-portrait{ display: none; } #single-nav{ display: none; } /*removed fixed header*/ .fixed-header { position: relative !important; top: auto !important; left: auto !important; } #wrap { padding-top: 0 !important; width: 100%;} /*grid*/ .outerbox{ width: 90%;} #sidebar{ width: 280px; } .loop-entry{ width: 95%; margin-right: 0; margin-bottom: 20px } .mobile-menu-toggle { margin: 0px 0px 25px 0px; position: relative; width: 95%; float:left; } /*main*/ #post{ width: 100%; } #sidebar{ width: 100%; } #sidebar{ margin-top: 30px; padding-top: 30px; border-top: 4px solid #ddd; } /*header*/ #header-social { position: inherit; top: auto; right: auto; text-align: center; margin-top: 0px; margin-bottom: 20px; width: 106%; } #archive-wrap { width: 94.2%; margin-left: auto; margin-right: auto; #search-entries-wrap { position: relative; width: 94.2%; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } #page-heading {margin-top: 30px;} #header-social li, #header-social a{ display: inline-block; } #logo{ text-align: center; } #logo a{ display: block; float: none; } /*blog*/ #related-posts .alignleft{ max-width: 30% } .related-entry-excerpt{ display: none; } #author-bio{ width: 155px; } body.no-sidebar #author-bio{ width: 155px; } .meta li, .loop-entry-meta li{ display: block; float: none; margin-bottom: 5px; } .meta li:last-child, .loop-entry-meta li:last-child{ margin:0; } /*search*/ .search-entry-text{ width: 100%; margin-top: 25px; } /*footer*/ .footer-box{ width: 100%; margin-right: 0; } #footer-bottom, #footer-menu{ text-align: center; } #footer-menu{ margin-top: 5px; } #copyright, .footer-menu{ width: 100%; float: none; } .footer-menu{ margin-top: 10px; text-align: center; } /*comments*/ .children { margin: 30px 0 0; } .children li.depth-2, .children li.depth-3, .children li.depth-4, .children li.depth-5, .children li.depth-6, .children li.depth-7, .children li.depth-8, .children li.depth-9, .children li.depth-10 { margin: 0 } #logo h1, #logo h2 { line-height: 21px; font-size: 20px; padding-top: 25px; padding-right: 18px; padding-bottom: 23px; padding-left: 18px; } #logo h2 { width: 236px; margin: 0px auto 0px auto; float: none; } #logo h4 { font-family: 'Montserrat', sans-serif; line-height: 21px; font-size: 21px; font-weight: normal; text-transform: uppercase; color: #FF0000; margin-top: 8px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; float: none; } #mapboxframe { height: 400px; width: 100%; } } /* Mobile (Landscape) = Design for a width of 440px ================================================== */ @media only screen and (min-width: 480px) and (max-width: 767px) { /*special hide class*/ .hide-mobile-portrait{ display: block; } .hide-mobile-landscape{ display: none; } /*main*/ .outerbox{ width: 440px; } #sidebar{ width: 440px; } .loop-entry{ width: 95%; margin-right: 0; margin-bottom: 20px } .wpex-widget-recent-posts .recent-right{ float: right; width: 310px; } #footer .wpex-widget-recent-posts .recent-right{ width: 330px; } /*blog*/ #author-bio{ width: 310px } body.no-sidebar #author-bio{ width: 315px; } #mapboxframe { height: 300px; width: 100%; } } @media only screen and (max-width: 479px) { #hmapsprem_map_container { height: 300px; width: 100%; } }