/* ========================================================================== 01. Responsive Options ========================================================================== */ /* Responsive Boxed Version body{ padding-top: 0; } .outter-wrapper{ max-width: 1440px; width: auto;} .wrapper { max-width: 1140px; width: auto;} .feature hr{ opacity: .4; } */ /* Responsive Full Width Version */ body{ padding: 0em; } .outter-wrapper{ max-width: 100%; width: 100%;} .wrapper { max-width: 1140px; width: auto;} /* ========================================================================== 02. Responsive Colors ========================================================================== */ /* Responsive Nav - Dark Grey */ @media only screen and (max-width: 768px) { } /* ========================================================================== 03. Media Queries 768 ========================================================================== */ @media only screen and (max-width: 768px) { body{ padding: 0; } .logo{ padding-bottom: 1em; padding-top: .6em; } .logo-text{ margin-top: .4em; margin-bottom: .5em; } #nav{ display: none; } #nav-wrap { position: relative; padding-bottom: .4em; } #nav li.nav-parent{ padding-bottom: 0; } #menu-icon { display: inline-block; cursor: pointer; padding: 6px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; top: 6px; } #menu-icon.active{ -webkit-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px; } nav #nav{ margin-top: 0; } #nav { clear: both; position: absolute; top: 42px; min-width: 160px; z-index: 10000; padding: 5px; display: none; right: 0px; -webkit-border-radius: 3px 0px 3px 3px; border-radius: 3px 0px 3px 3px; } #nav li { clear: both; float: none; } #nav a, #nav ul a { background-color: none; display: inline; padding: 0; border: none; } #nav ul { width: auto; position: static; display: block; border: none; background: inherit; -webkit-box-shadow: none; box-shadow: none; } #nav ul li a{ padding-left: 0; } #nav li{ padding: .2em 0!important; } #nav ul{ padding: 0!important; } #nav li > ul li{ padding-left: 12px!important; } #nav li > ul li:last-child{ padding-bottom: 0!important; } #nav li:hover ul ul{ display: block!important; position: relative; left: 0; background: transparent!important; } #nav li:hover ul ul:before{ display: none; } .donate, #nav .donate a:hover{ background: transparent!important; } #masthead{ display: block; height: 100%; } .header-container header{ padding: 10px 0 5px; } .main-content, .right-aside{ width: 100%; float: none; border: none; padding-left: 0; padding-right: 0; } .main-container{ padding: 1px 0 30px; } .right-aside{ border-top: 1px solid #cad2d7; margin-top: 25px; } .third, .half, .fourth, .two-thirds, ol.icon-lists li, ul.flag-lists li, .three-fourths, .foot.left, .foot.right, input.half, input.full, .fifth, .two-fifths, .three-fifths, .four-fifths{ width: 100%; margin-right: 0%; float: none; } .third, .half, .fourths, .two-third, .three-fourths{ margin-bottom: 30px; } .right-aside .half, .widget-footer .half, .clearfix.gallery .half, .clearfix.gallery .fourth{ width: 49%; margin-right: 2%; float: left; } .last-fold{ margin-right: 0!important; } blockquote.third, blockquote.half, blockquote.fourths, blockquote.two-third{ width: 100%; } blockquote, blockquote.right, blockquote.left{ margin: 0; } ul.archive li{ min-width: 28%; } .foot.left, .foot.right{ display: block; text-align: center; margin-bottom: 20px; } ul.social-link li{ border: none; } h6.tags.right, h6.date.left{ float: none!important; } ul.sitemap{ display: inline; width: 100%; } ul.sitemap li{ display: block; padding-left: 0; padding: 1px; } .widget-footer .widget{ margin-bottom: 30px; padding-bottom: 30px; border-bottom-style: solid; border-bottom-width: 1px; border-right: none; } .widget-footer .widget.last{ border: none; margin-bottom: 0; padding-bottom: 0; } .price-feature{ top: 0; } .icon-thirds li{ width: 48%; } .tab-nav {display: none;} h3.v_nav { height:45px; line-height:45px; margin: 0; padding: 0; text-align:center; margin-top: 1px; display: block; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-bottom-style: solid; border-bottom-width: 1px; } .tab-content-block { clear:both; position:relative; width: 100%; background: #fff; border-style: solid; border-width: 1px; } h3.v_nav:first-child { margin-top: 0; } h3.v_active { background: #FBFBFB; z-index:50; } hr{ margin: 1.75em 0; } ul.timeline{ width: 98%; padding-left: 2%; } ul.timeline > li{ width: 100%; float: none!important; } .vert-line{ left: 1px; } ul.timeline > li:nth-child(2n+1):before{ border-color:#fff #e2e2e2 #fff #fff!important; left: -14px; right: 100%; } .hasCountdown{ font-size: 36px!important; } /* Price Alt */ .price-cell{ display: block; border-right: none; border-bottom-style: dashed; border-bottom-width: 1px; } .price-cell.feature{ min-width: 100%; } .inwrap{ min-height: none; } .inwrap:after{ left: 0%; margin-left: -30px; bottom: -47px!important; } .pb_featured_posts .recentwork, .pb_widgets{ padding-bottom: 0; } .main-container, .wrapper{ padding-bottom: 0; } #nav li.flag{ padding-left: 25px!important; background-size: 18px ; background-repeat: no-repeat; background-position: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #nav li.flag li.flag{ background-position: 0px 8px; padding-left: 25px!important; } #nav li.flag ul{ margin-left: -15px; } aside.right-aside{ margin-bottom: 2em; padding-bottom: 1em; } aside.left-aside.fifth{ padding-bottom: 0em; } } /* ========================================================================== 04. Media Queries 600 ========================================================================== */ @media only screen and (max-width: 600px) { .backstretch{ opacity: 0.2; } .cta.two-third{ width: 100%; margin-right: 0%; float: none; } .main table{ border-left: 1px solid #cad2d7; border-right: 1px solid #cad2d7; border-top: none; border-bottom: none; } .feature-heading{ display: none; } } /* ========================================================================== 05. Media Queries 480 ========================================================================== */ @media only screen and (max-width: 480px) { input[type=text], input[type=email], input[type=password], textarea, a.btn, input[type=button], input[type=submit]{ padding: 10px 2%; width: 96%; } a.btn, input[type=button]{ text-align: center; } a.small-btn{ font-size: 14px; padding: .4em 2%; } a.xsmall-btn{ font-size: 12px; padding: .2em 2%; } iframe{ max-height: 320px; } #menu-icon{ display: block!important; padding-left: 3%!important; padding-right: 3%!important; width: 94%!important; position: relative; top: -1px; } .header-container header{ text-align: center; } .logo, .logo-text{ float: none; } .header-container nav{ float: none; } #nav{ padding-left: 3%!important; padding-right: 3%!important; width: 94%!important; left: 0; top: 35px; -webkit-border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px; } .hide-480{ display: none; } .thumb-gallery .third{ width: 100%; } .icon-thirds li{ width: 100%; float: none; } ul.timeline > li:before, .vert-line{ display: none; } ul.timeline{ width: 100%; padding-left: 0; } .hasCountdown{ font-size: 48px!important; } .hasCountdown .countdown_section{ float: none; width: 100%!important; margin-bottom: 1em; } #nav li.flag, #nav li.flag li.flag{ padding-left: 0px!important; background-image: none; } #nav li.flag ul{ margin-left: 0px; } .sermon_image { float: none; max-width: 100%; margin-right: 0; } .sermon_description{ max-width: 100%; } .sermon_links { float: none; width: 100%; margin-bottom: 1em; } #nav li > ul li{ padding-left: 0px!important; } } /* ========================================================================== 06. Media Queries 1140 ========================================================================== */ @media only screen and (max-width: 1140px) { .wrapper { width: 100%; } } /* ========================================================================== WOO-Commerece Styles ========================================================================== */ @media only screen and (max-width: 768px) { .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2, .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals, .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last, .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals{ width: 100%; float: none; text-align: left; } } @media only screen and (max-width: 480px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary, .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, .related.products ul.products li, .upsells.products ul.products li{ width: 100%!important; margin: 1em 0% 1em 0!important; } .shop_table.cart .product-thumbnail, .shop_table.cart .product-remove{ display: none; } table.shop_table.cart td{ padding-right: 3px; padding-left: 3px; } .woocommerce div.product .woocommerce-tabs ul.tabs li{ width: 100%; text-align: center; padding-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: .3em; } .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce div.product .woocommerce-tabs ul.tabs:before, .woocommerce #content div.product .woocommerce-tabs ul.tabs:before, .woocommerce-page div.product .woocommerce-tabs ul.tabs:before, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs:before { border-bottom-width: 0!important; } .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells, .woocommerce .related ul.products li.product{ float: none!important; width: 100%!important; } .woocommerce .star-rating, .woocommerce-page .star-rating{ float: none!important; } .woocommerce table.cart td.actions .coupon, .woocommerce #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .button.alt, .woocommerce #content table.cart td.actions .button.alt, .woocommerce-page table.cart td.actions .button.alt, .woocommerce-page #content table.cart td.actions .button.alt{ float: none; } .woocommerce table.cart td.actions, .woocommerce #content table.cart td.actions, .woocommerce-page table.cart td.actions, .woocommerce-page #content table.cart td.actions{ text-align: center; } input#coupon_code{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: none!important; width: 96%!important; display: inline; } } /* ========================================================================== Events Calender Styles ========================================================================== */ @media only screen and (max-width: 768px) { .events-gridview #tribe-events-header, .single-tribe_events #tribe-events-header{ position: relative; top: 0px; } .events-gridview .main #tribe-events-content ul.tribe-events-sub-nav li, .events-gridview .main #tribe-events-content ul.tribe-events-sub-nav, .single-tribe_events .main #tribe-events-content ul.tribe-events-sub-nav li, .single-tribe_events .main #tribe-events-content ul.tribe-events-sub-nav{ text-align: left; } .single-tribe_events .tribe-events-meta-group, .single-tribe_events .tribe-events-venue-map, .tribe-events-event-image img{ float: none; width: 100%; } #tribe-events-content.tribe-events-list, #tribe-events-content{ margin-bottom: 0px; } #tribe-mobile-container{ display: block; } .tribe-events-calendar td .tribe-events-viewmore, .tribe-events-calendar td div.type-tribe_events { display: none!important; } #tribe-events-content .tribe-events-calendar td{ height: auto; text-align: center; } .tribe-events-calendar .tribe-events-has-events:after { border-radius: 50%; content: ""; display: block; height: 8px; margin: 5px auto; padding: 0; width: 8px; } } @media only screen and (max-width: 480px) { .tribe-bar-date-filter, .tribe-bar-search-filter, .tribe-bar-submit{ width: 100%; float: none; padding-right: 0; } .tribe-bar-submit{ position: relative; left: 0px; top: 0px; } .tribe-bar-filters-inner{ padding-right: 0; } .tribe-events-event-image{ float: none!important; margin-left: 0!important; max-width: 100%!important; } .tribe-events-event-image img{ width: 100%; } } /* ========================================================================== Gravity Forms ========================================================================== */ @media only screen and (max-width: 768px) { .charleft.ginput_counter{ float: none; } }