/* =Mobile Menu -------------------------------------------------------------- */ #header-mobile-menu { float: right; display: none; } #secondary-mobile-menu { display: none; } .mobile-menu-bar { color: #757575; display: block; height: 20px; width: 31px; text-align: center; } .mobile-menu-bar:hover { color: #7c9b30; } .fixed-header .mobile-menu-bar:before { top: -6px; } .mobile-menu { position: fixed; left: 0; top: 41px; padding: 5%; background: #fff; width: 90%; visibility: visible; opacity: 1; overflow-x: scroll; display: none; z-index: 9999; border-top: 3px solid #7c9b30; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); bottom: 0; } .admin-bar .mobile-menu { top: 72px; top: 7.2rem; } .mobile-menu li a { font-size: 14px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom: 1px solid #f8f8f8; color: #666; padding: 10px 5%; width: 90%; display: block; } .mobile-menu li a:hover { color: #111; background-color: #f8f8f8; text-decoration: none; } .mobile-menu li ul { display: block !important; padding-left: 10px; visibility: visible !important; } .mobile-menu li li { padding-left: 5%; } .mobile-menu .menu-item-has-children > a { background-color: #F8F8F8; font-weight: bold; } .mobile-menu li .menu-item-has-children > a { background-color: #fff; } /* =Screen Size Max 1344px -------------------------------------------------------------- */ @media screen and (max-width: 1344px) { .container { width: 1160px; width: 116rem; } #primary { width: 770px; width: 77rem; } } /* =Screen Size Max 1280px -------------------------------------------------------------- */ @media screen and (max-width: 1280px) { .container { width: 1070px; width: 107rem; } #primary { width: 680px; width: 68rem; } } /* =Screen Size Max 1152px -------------------------------------------------------------- */ @media screen and (max-width: 1152px) { .container { width: 980px; width: 98rem; } #primary { width: 590px; width: 59rem; } } /* =Screen Size Max 1024px -------------------------------------------------------------- */ @media screen and (max-width: 1024px) { .container { width: 920px; width: 92rem; } #primary { width: 530px; width: 53rem; } #secondary-menu ul.menu a { line-height: 40px; line-height: 4rem; padding: 0 10px; padding: 0 1rem; } .header-sidebar .widget ul.menu ul, #secondary-menu ul.menu ul { top: 40px; top: 4rem; width: 188px; width: 18.8rem; } .header-sidebar .widget ul.menu ul a, #secondary-menu ul.menu ul a { padding: 5px 10px; padding: 0.5rem 1rem; } /* Font Sizes */ body, button, input, select, textarea, #homepage-message p { font-size: 13px; font-size: 1.3rem; } #site-title { font-size: 22px; font-size: 2.2rem; } .entry-header .entry-title, #featured-heading h2, #homepage-message .right-section a, #featured-post #feature-heading { font-size: 18px; font-size: 1.8rem; } #homepage-message h2, .widget-title { font-size: 16px; font-size: 1.6rem; } .entry-content h1, .comment-content h1 { font-size: 22px; font-size: 2.2rem; } .comments-title, #reply-title, .entry-content h2, .comment-content h2 { font-size: 18px; font-size: 1.8rem; } .entry-content h3, .comment-content h3 { font-size: 16px; font-size: 1.6rem; } .entry-content h4, .comment-content h4 { font-size: 15px; font-size: 1.5rem; } .entry-content h5, .comment-content h5 { font-size: 14px; font-size: 1.4rem; } .entry-content h6, .comment-content h6 { font-size: 13px; font-size: 1.3rem; } #homepage-message .right-section a { padding: 5px 20px; padding: 0.5rem 2rem; } } /* =Screen Size Max 960px -------------------------------------------------------------- */ @media screen and (max-width: 960px) { .site { padding-top: 40px; padding-top: 4rem; } .container { width: 720px; width: 72rem; } #primary, #site-generator .copyright, #site-generator .powered { width: 100%; } #header-right .widget { width: 660px; width: 66rem; } #homepage-message .left-section { width: 500px; width: 50rem; } #homepage-message .right-section { width: 150px; width: 15rem; } #featured-post.layout-four .featued-content-wrap, #featured-post.layout-three .featued-content-wrap{ margin-left: -30px; margin-left: -3rem; } #featured-post.layout-four .post, #featured-post.layout-three .post { margin-left: 30px; margin-left: 3rem; width: 315px; width: 31.5rem; } #featured-post.layout-four .post:nth-child(2n+1), #featured-post.layout-three .post:nth-child(2n+1), #secondary .widget:nth-child(2n+1) { clear: both; } #featured-post.layout-three .post:nth-child(3n+1) { clear: none; } #primary { border-bottom: 1px solid #eee; margin-bottom: 30px; margin-bottom: 3rem; } #secondary { margin-left: -30px; margin-left: -3rem; width: 750px; width: 75rem; } #secondary .widget { display: inline; float: left; margin-left: 30px; margin-left: 3rem; padding: 20px; padding: 2rem; width: 305px; width: 30.5rem; } #secondary .widget.widget_adventurous_social_widget { padding: 10px 11px 5px; padding: 1rem 1.1rem 0.5rem; } #site-generator .powered { padding-top: 5px; padding-top: 0.5rem; } #hgroup-wrap img { display: inline-block; } #header-right, .fixed-header #header-right { padding-top: 0; } .header-sidebar .menu, .header-sidebar .widget_text { float: none; text-align: center; } #supplementary.four .widget-area { width: 48%; margin-left: 4%; } #supplementary.four #third.widget-area { clear: both; margin-left: 0; } #site-generator .site-info { font-size: 12px; font-size: 1.2rem; padding: 20px 0; padding: 2rem 0; } #site-generator .copyright, #site-generator .powered { text-align: center; } #masthead, #masthead.fixed-header { padding-top: 6px; padding-top: 0.6rem; padding-bottom: 4px; padding-bottom: 0.4rem; min-height: 29px; } #site-title, #masthead.fixed-header #site-title { font-size: 16px; font-size: 1.6rem; line-height: 1.1; } #site-description, #masthead.fixed-header #site-description{ font-size: 11px; font-size: 1.1rem; line-height: 1; } #masthead #site-logo img, #masthead.fixed-header #site-logo img { max-height: 28px; max-width: 100%; } #header-left { width: 85%; } #header-right { width: 15%; } #header-right .header-search-wrap, .fixed-header #header-right .header-search-wrap { top: 32px; top: 3.2rem; } .fixed-header #hgroup.logo-enable { display: none; } /* Menu */ #header-mobile-menu { display: block; } #secondary-mobile-menu { display: inline-block; float: left; margin-right: 5px; } #header-right .widget_nav_menu, #secondary-menu { display: none; } .header-sidebar .widget.widget_nav_menu { width: 100%; } .widget.widget_nav_menu .sb-holder { background-color: #21759b; color: #fff; clear: both; display: block; width: 100%; } .widget.widget_nav_menu .sb-holder a, .widget.widget_nav_menu .sb-holder a:hover { color: #fff; } } /* =iPad Portrait -------------------------------------------------------------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .container { width: 740px; width: 74rem; } #homepage-message .left-section { width: 520px; width: 52rem; } #featured-post.layout-four .post, #featured-post.layout-three .post { width: 355px; width: 35.5rem; } #featued-content-wrap, #secondary { width: 770px; width: 77rem; } #secondary .widget { padding: 20px; padding: 2rem; width: 315px; width: 31.5rem; } } /* =Screen Size Max 782px -------------------------------------------------------------- */ @media screen and (max-width:782px) { .admin-bar #masthead { top: 46px; top: 4.6rem; } .admin-bar .site { padding-top: 42px; padding-top: 4rem; } .admin-bar .mobile-menu { top: 85px; top: 8.5rem; } } /* =Screen Size Max 767px -------------------------------------------------------------- */ @media screen and (max-width: 767px) { .container { width: 600px; width: 60rem; } #featured-post, #content-sidebar, #footer-sidebar { padding-top: 20px; padding-top: 2rem; } #content article, #secondary .widget, #comments { padding: 20px; padding: 2rem; } .hentry, .comments-area article, #homepage-message { padding-bottom: 20px; padding-bottom: 2rem; } #homepage-message { padding: 20px 0; padding: 2rem 0; } .page-links, .widget, blockquote, #main #featured-post, #content article, #content .site-navigation, #infinite-handle, .comments-title, #reply-title, #respond { margin-bottom: 20px; margin-bottom: 2rem; } #main-slider .entry-container .entry-content { display: none; } #homepage-message .left-section { width: 390px; width: 39rem; } #featured-post { padding-bottom: 0; } #featured-post.layout-four .featued-content-wrap, #featured-post.layout-three .featued-content-wrap { margin-left: -20px; margin-left: -2rem; width: 620px; width: 62rem; } #featured-post.layout-four .post, #featured-post.layout-three .post { margin-left: 20px; margin-left: 2rem; width: 290px; width: 29rem; } #featured-heading { padding-bottom: 10px; padding-bottom: 1rem; } #primary, .hentry.sticky .featured-sticky, .page-header, p, .featured-image, .entry-content table, .comment-content table, #content .searchform, .page-link, .single-attachment .entry-attachment img { margin-bottom: 20px; margin-bottom: 2rem; } #secondary { margin-left: -20px; margin-left: -2rem; width: 620px; width: 62rem; } #secondary .widget { margin-left: 20px; margin-left: 2rem; width: 250px; width: 25rem; } #main-slider .entry-header { margin-bottom: 0; } #slider-nav a { font-size: 18px; font-size: 1.8rem; line-height: 1.4; padding: 0 5px; } .entry-header .entry-title, #homepage-message, .comments-title, #reply-title { font-size: 16px; font-size: 1.6rem; } .commentlist .children { margin-left: 0; } .woocommerce #content ul.products li { margin-right: 0; width: 100%; } .woocommerce #content .product a.added_to_cart { clear: both; display: block; } #main .woocommerce .col-1, #main .woocommerce .col-2 { width: 100%; } } /* =Screen Size Max 640px -------------------------------------------------------------- */ @media screen and (max-width: 640px) { .container { width: 520px; width: 52rem; } #hgroup.logo-enable { display: none; } #homepage-message .left-section { width: 320px; width: 32rem; } #homepage-message .right-section { width: 140px; width: 14rem; } #homepage-message .right-section a { display: inline-block; margin: 0 auto; } #featured-post.layout-four .post, #featured-post.layout-three .post { width: 230px; width: 23rem; } #secondary { width: 500px; width: 50rem; } #secondary .widget { width: 206px; width: 20.6rem; } .entry-header .entry-title, #homepage-message h2, #homepage-message .right-section a, #featured-post #feature-heading { font-size: 16px; font-size: 1.6rem; } } /* =Screen Size Max 600px -------------------------------------------------------------- */ @media screen and (max-width:600px) { .admin-bar #masthead.fixed-header { top: 0; } .admin-bar #masthead.fixed-header .mobile-menu { top: 40px; } } /* =Screen Size Max 560px -------------------------------------------------------------- */ @media screen and (max-width: 560px) { .container { width: 400px; width: 40rem; } #homepage-message .left-section, #homepage-message .right-section { width: 100%; } #homepage-message .left-section, #homepage-message .left-section h2 { padding-bottom: 10px; } #featured-post.layout-four .featued-content-wrap, #featured-post.layout-three .featued-content-wrap, #featured-post.layout-four .post, #featured-post.layout-three .post, #secondary { margin-left: 0; width: 100%; } #secondary .widget { margin-left: 0; padding: 10px 4%; width: 91%; } } /* =iPhone 5 in landscape -------------------------------------------------------------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { .container { width: 520px; width: 52rem; } #homepage-message .left-section { width: 330px; width: 33rem; } #featured-post.layout-four .post, #featured-post.layout-three .post { width: 230px; width: 23rem; } #secondary { width: 500px; width: 50rem; } #secondary .widget { width: 206px; width: 20.6rem; } } /* =Screen Size Max 480px -------------------------------------------------------------- */ @media screen and (max-width: 480px) { .container { width: 360px; width: 36rem; } #homepage-message .left-section, #homepage-message .right-section { width: 100%; } #homepage-message .left-section { padding-bottom: 10px; } #featured-post.layout-four .featued-content-wrap, #featured-post.layout-three .featued-content-wrap, #featured-post.layout-four .post, #featured-post.layout-three .post, #secondary, #supplementary.four .widget-area { margin-left: 0; width: 100%; } #secondary .widget { margin-left: 0; padding: 10px 4%; padding: 1rem 4%; width: 91%; } #controllers, #slider-nav { display: none; } #main-slider .entry-container, #main-slider .entry-container:hover { border: none; bottom: 0; left: 0; margin: 0; padding: 0; width: 100%; } #main-slider .entry-header { padding: 5px 10px 2px; padding: 0.5rem 1rem 0.2rem; } #header-left { width: 82%; } #header-right { width: 18%; } } /* =Screen Size Max 360px -------------------------------------------------------------- */ @media screen and (max-width: 360px) { .container { margin: 0; width: 100%; } }