/********************************************************************************************* Theme Name: Domino Magazine Theme URI: http://www.wpzoom.com/themes/domino Version: 2.0.2 Private: true Author: WPZOOM Author URI: http://www.wpzoom.com/ License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html The PHP code portions of this WPZOOM theme are subject to the GNU General Public License, version 2. All images, cascading style sheets, and JavaScript elements are released under the WPZOOM Proprietary Use License below. ********************************************************************************************** WARNING! DO NOT EDIT THIS FILE! To make it easy to update your theme, you should not edit the styles in this file. Instead use the custom.css file to add your styles. You can copy a style from this file and paste it in custom.css and it will override the style in this file. ********************************************************************************************** 1. Toolbox CSS 2. Global Styles 3. Header 4. Navigation 5. News Ticker 6. Featured Area 7. Featured Slider 8. Homepage Widgets - Featured Categories 9. Archive Posts 10. Single Post 11. Comments 12. Sidebar 13. Footer **********************************************************************************************/ /********************************************************************************************* 1. Toolbox CSS ------------------------- All Theme Files *********************************************************************************************/ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0 } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none } a { background: transparent } a:active, a:hover { outline: 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: bold } dfn { font-style: italic } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em } sub { bottom: -0.25em } img { border: 0 } svg:not(:root) { overflow: hidden } figure { margin: 1em 40px } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible } button, select { text-transform: none } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto } optgroup { font-weight: bold } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0 } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } figure { margin: 0 } img { vertical-align: middle } hr { border: 0; border-top: 1px solid #ccc; } .sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } p { margin: 0 0 10px } small { font-size: 85% } mark { padding: 0.2em } ul, ol { list-style-position: inside; margin: 0; padding: 0; } ul ul, ol ol, ul ol, ol ul { margin: 0 } dl { margin-top: 0; margin-bottom: 20px; } dt, dd { line-height: 1.42857 } dt { font-weight: bold } dd { margin-left: 0 } blockquote:before, blockquote:after { content: "" } address { margin-bottom: 20px; font-style: normal; line-height: 1.42857; } code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857; word-break: break-all; word-wrap: break-word; color: #333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; } pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; background-color: transparent; border-radius: 0; } .sticky, .bypostauthor { } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both } .clickable { cursor: pointer } /* Smart clearfix */ .clear, .cleaner { clear: both; height: 0; overflow: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 300; line-height: 1.1; color: #222; margin: 0; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; line-height: 1; } h1 small, h2 small, h3 small { font-size: 65% } h4 small, h5 small, h6 small { font-size: 75% } h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } h4 { font-size: 18px } h5 { font-size: 14px } h6 { font-size: 12px } /* Tables */ table { border-top: 0; margin-bottom: 1.5em; position: relative; table-layout: fixed; width: 100%; z-index: 1; } table th { text-align: left; } table tr { border-bottom: 1px solid #F0F0F0; } table th, table td { font-family: inherit; font-size: inherit; padding: 12px; vertical-align: middle; } .floatleft { float: left; } .floatright { float: right; } .sticky, .bypostauthor {} .aligncenter { display: block; clear:both; margin-left: auto; margin-right: auto; } .alignleft { float: left; margin-right:15px; } .alignright { float: right; margin-left:15px; } /* Navigation */ div.navigation { text-align: center; margin: 0 0 30px; } .woocommerce nav.woocommerce-pagination ul { padding: 0; border: 0; } .woocommerce nav.woocommerce-pagination ul li { float: none; display: inline; border: 0; } div.navigation a, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline; font-weight: normal; padding: 8px 12px; line-height: 50px; border: 1px solid #dcdcdc; min-width: 0; border-radius: 2px; margin: 0 5px; } div.navigation span.current, .woocommerce nav.woocommerce-pagination ul li span.current { padding: 8px 12px; color: #fff; background: #212425; border-radius: 2px; margin: 0 5px; border: none; } .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover { font-weight: normal; color: #F47857; boder: 1px solid #dcdcdc; background: none; } div.navigation span.pages { margin-right: 10px; display: none; } div.navigation .alignleft, div.navigation .alignright { margin: 0; } /* Forms */ label { display: block; margin-bottom: 10px; font-weight: normal; } input, textarea { padding: 8px 12px; font-family: 'Libre Franklin', sans-serif; font-size: 15px; font-weight: normal; background: white; border: 1px solid #e2e2e2; width: auto; color: #444; border-radius: 2px; -webkit-transition: 0.2s ease all; -o-transition: 0.2s ease all; transition: 0.2s ease all; } input[type=text], textarea { -webkit-appearance: none; } input:focus, textarea:focus { border-color: #ccc; outline: 0; } button, input[type=button], input[type=reset], input[type=submit] { font-family: 'Libre Franklin', sans-serif; font-size: 16px; font-weight: bold; background-color: #F47857; border: none; color: white; -webkit-transition: 0.2s ease all; -o-transition: 0.2s ease all; transition: 0.2s ease all; } button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover { cursor: pointer; background: #222; } @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?a43nr5'); src:url('fonts/icomoon.eot?#iefixa43nr5') format('embedded-opentype'), url('fonts/icomoon.ttf?a43nr5') format('truetype'), url('fonts/icomoon.woff?a43nr5') format('woff'), url('fonts/icomoon.svg?a43nr5#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* Hides navigation links and site footer when infinite scroll is active */ .infinite-scroll .navigation { display: none; } .infinite-scroll:not(.infinity-end):not(.neverending) #recent-posts { margin-bottom: 40px; position: relative; } .infinite-scroll #infinite-handle { left: 0; right: 0; text-transform: uppercase; font-weight: bold; font-size: 12px; text-align: center; } .infinite-scroll #infinite-handle span { display: block; width: 100%; line-height: 50px; border-radius: 3px; color: #fff; font-size: 18px; font-weight: bold; background-color: #F47857; transition: 0.2s ease all; } .infinite-scroll #infinite-handle span:hover { background: #222; } .infinite-scroll #infinite-handle span button { -webkit-transition: none; -o-transition: none; transition: none; } /********************************************************************************************* 2. Global Styles *********************************************************************************************/ body { background: #FFFFFF; color: #222; font-family: 'Libre Franklin', sans-serif; font-size: 16px; overflow-x: hidden; line-height: 1.7; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Links */ a { color: #212425; text-decoration: none; transition-duration: 0.2s; } a:focus { outline: none; } a:hover, a:active { color: #F47857; outline: none; } p { margin: 0 0 15px; padding: 0; } .inner-wrap { margin: 0 auto; max-width: 1400px; } .recent-posts .cat-links a { line-height: 2.5; margin: 1px 8px 0 0; font-weight: normal; position: relative; font-size: 14px; color: #000; background-color: #fff; padding: 4px 8px; border: 1px solid #888; border-radius: 3px; opacity: 0.5; transition: all .25s ease-in-out; } .recent-posts .cat-links a:after { content: ''; position: absolute; top: 0; left: 0; right: -3px; bottom: -3px; border: 1px solid #bbb; border-top: 0; border-left: 0; border-radius: 3px; } .recent-posts .cat-links a:hover { text-decoration: none; color: #F47857; opacity: 1; } /* Boxed Layout */ @media screen and (min-width: 1441px) { .wpz_layout_boxed { background: #F1F1F1; } .wpz_layout_boxed .domino_boxed_layout { max-width: 1482px; margin: 0 auto; background: #fff; border-right: 1px solid #e4e4e4; border-left: 1px solid #e4e4e4; -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); } .custom-background.wpz_layout_boxed .domino_boxed_layout { border: none; } } .wpz_layout_boxed .domino_boxed_layout { background: #fff; } @media screen and (min-width: 1241px) { /* 1200 style */ .wpz_width_1200 .inner-wrap, .wpz_width_1200 #news-ticker .inner-wrap { max-width: 1200px; padding: 0; } .wpz_width_1200 .content-area { width: 800px; } .wpz_width_1200.wpz_layout_boxed { background: #F1F1F1; } .wpz_width_1200.wpz_layout_boxed .domino_boxed_layout { max-width: 1282px; margin: 0 auto; background: #fff; border-right: 1px solid #e4e4e4; border-left: 1px solid #e4e4e4; -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); } } /********************************************************************************************* 3. Header ------------------------- header.php *********************************************************************************************/ #header { padding: 0; background: #212425; } /* Logo Styles */ .navbar-brand-wpz { float: left; margin: 35px 25px 35px 0; } .navbar-brand-wpz h1 { margin: 0; font-weight: 600; line-height: 1.1; font-size: 48px; } .navbar-brand-wpz a { color: #fff; } .navbar-brand-wpz a:hover { text-decoration: none; color: #F47857; } .tagline { margin: 10px 0 0; color: #666; } .adv { float:right; margin: 30px 0 0; } .adv_home { margin: 0 0 30px; text-align: center; } .adv_home img { max-width: 100%; height: auto; } /* Header Social Icons */ .header_social { float: right; text-align: right; } .header_social .widget { margin: 0; } .header_social .widget h3.title { display: none; } .header_social .widget .zoom-social-icons-list--no-labels.zoom-social-icons-list--without-canvas { margin: 0; } .header_social .zoom-social-icons-list--without-canvas .socicon { transition: 0.3s ease all; color: #fff; padding: 5px; } .header_social .zoom-social-icons-list .socicon:hover { opacity: 0.8; } /********************************************************************************************* 4. Navigation *********************************************************************************************/ /* Menu */ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu li { position: relative } .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } .sf-menu > li { float: left } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block } .sf-menu a { display: block; position: relative; } .sf-menu ul ul { top: 0; left: 100%; } .sf-arrows .sf-with-ul:after { content: "\f347"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 12px/16px 'dashicons'; vertical-align: middle; margin: 0 0 0 4px; } .sf-arrows ul .sf-with-ul:after { content: "\f345"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 12px/22px 'dashicons'; float: right; vertical-align: middle; margin: 0 0 0 4px; } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: white } .navbar-nav { position: relative; z-index: 100; } .navbar-nav > li { margin: 0; } .navbar-nav a { padding: 8px 30px 8px 0; transition: 0.2s ease all; font-size: 14px; font-weight: bold; color: #fff; } .navbar-nav a:hover { text-decoration: none; color: #F47857; } .navbar-nav ul { font-size: 14px; left: 0; width: 250px; margin-top: 0; padding: 0; background: #212425; border: 1px solid rgba(255,255,255,.05); } .navbar-nav ul li { border-bottom: 1px solid rgba(255,255,255,.05); } .navbar-nav ul li:last-child { border-bottom: none; } .navbar-nav ul a { padding: 7px 15px; color: #fff; text-transform: none; font-weight: 500; padding: 5px 15px; border: none; } .navbar-nav ul a:hover { opacity: .8; color: #fff; } .navbar-nav ul ul { right: 100%; margin-top: 0px; } .navbar-nav ul ul { right: 100%; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); margin-top: -1px; } .navbar-nav > .current-menu-item > a, .navbar-nav > .current_page_item > a, .navbar-nav > .current-menu-parent > a { color: #F47857; } /* Top menu */ .top-navbar { margin: 0; font-size: 12px; position: relative; border-bottom: 1px solid rgba(255,255,255,.05); z-index: 200; } .top-navbar .navbar-nav { float: left; width: 80%; } .top-navbar .navbar-nav > li > ul { font-size: 14px; transform: translate(-45px, 0); left: 30px; } .navbar-nav a:hover { text-decoration: none; } /* Main Menu */ .main-navbar { border-top: 1px solid rgba(255,255,255,.05); } .main-navbar > .inner-wrap { border-right: 1px solid rgba(255,255,255,.05); } .main-navbar .sf-arrows .sf-with-ul:after { margin: 0 0px 0 4px; } .top-navbar:before, .top-navbar:after, .main-navbar:before, .main-navbar:after { content: " "; display: table; } .top-navbar:after, .main-navbar:after { clear: both } .main-navbar .navbar-nav > li:last-child { padding-right: 0; } .main-navbar .navbar-nav > li > a { font-family: "Roboto Condensed", sans-serif; font-size: 18px; text-transform: uppercase; } .main-navbar .navbar-nav a { padding: 10px 20px; border-left: 1px solid rgba(255,255,255,.05); } .main-navbar .navbar-nav ul a { border: none; line-height: 1.5; font-weight: 600; } .main-navbar .navbar-nav > .current-menu-item > a, .main-navbar .navbar-nav > .current_page_item > a, .main-navbar .navbar-nav > .current-menu-parent > a, .main-navbar .navbar-nav > .current_page_parent > a { background: #F47857; color: #fff; } /* Mobile Menu Icons */ .navbar-toggle { display: none; position: relative; float: left; margin: 15px 0 15px 0; } .navbar-toggle .icon-bar { display: block; width: 30px; height: 2px; background: #fff; border-radius: 1px; } .navbar-toggle:hover .icon-bar { background: #eee; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 6px } #menu-top-slide:not( .mm-menu ), #menu-main-slide:not( .mm-menu ) { display: none; } /* WooCommerce Cart Icon */ a.cart-button:before { content: "\f174"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/24px 'dashicons'; vertical-align: top; margin: 0 8px 0 0; } a.cart-button { display: block; } /* Navbar Search Form */ .sb-search { position: relative; float: right; margin: 5px 12px 0; z-index: 200; width: 40px; height: 40px; } .sb-search .sb-search-input { position: absolute; top: 0; right: 0; border: none; outline: none; width: 20px; height: 19px; margin: 0; z-index: 10; padding: 10px 65px 10px 15px; font-family: inherit; font-size: 14px; color: #fff; visibility:hidden; opacity:0; border: none; border-radius: 50px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; -webkit-transition: 0.2s ease all; -o-transition: 0.2s ease all; transition: 0.2s ease all; background: #33383A; -webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s; transition: width 0.6s, border-radius 0.6s, background 0.6s; } .sb-search input[type="search"].sb-search-input { -webkit-appearance: none; } .sb-search .sb-search-input::-webkit-input-placeholder { color: #EFF4F7; } .sb-search .sb-search-input:-moz-placeholder { color: #EFF4F7; } .sb-search .sb-search-input::-moz-placeholder { color: #EFF4F7; } .sb-search .sb-search-input:-ms-input-placeholder { color: #EFF4F7; } .sb-search .sb-icon-search, .sb-search .sb-search-submit { width: 40px; height: 40px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 40px; text-align: center; cursor: pointer; } .sb-search .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: #363940; border: none; outline: none; z-index: -1; } .sb-search .sb-icon-search { color: #fff; background: #212425; z-index: 90; font-size: 14px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -webkit-transition: 0.2s ease all; -o-transition: 0.2s ease all; transition: 0.2s ease all; border-radius: 50px; } .sb-search .sb-icon-search:hover { background: #33383A; } .sb-search .sb-icon-search:before { content: "\e600"; } .sb-search.sb-search-open .sb-icon-search:before { color: #fff; } /* Open state */ .sb-search.sb-search-open, .no-js .sb-search { } .sb-search.sb-search-open .sb-search-input { visibility: visible; opacity: 1; width: 200px; -webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s; transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s; } .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: none; z-index: 11; } .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; } /********************************************************************************************* 5. News Ticker *********************************************************************************************/ #news-ticker { padding: 10px 0 16px; background: #1E2122; border-top: 1px solid rgba(255,255,255,.05); color: #f9f9f9; font-size: 16px; } #news-ticker .inner-wrap { width: 100%; max-width: 1400px; height: 30px; } #news-ticker h3, #news-ticker dt, #news-ticker dd { line-height: 35px; } #news-ticker h3 { margin: 0 28px 0 0; float: left; font-family: 'Roboto Condensed', sans-serif; font-size: 16px; font-weight: bold; color: #F47857; text-transform: uppercase; } #news-ticker .news-ticker-container { overflow: hidden; } #news-ticker dl { display: none; margin: 0; } #news-ticker .caroufredsel_wrapper dl { display: block; } #news-ticker dt, #news-ticker dd { display: block; float: left; margin: 0 5px; font-weight: 300; } #news-ticker dt { color: #999; font-size: 14px; } #news-ticker dd { margin-right: 50px; } #news-ticker dd a { color: #fff; font-weight: bold; } #news-ticker dd a:hover { color: #F47857; text-decoration: none; } /********************************************************************************************* 6. Featured Area *********************************************************************************************/ .featured_area { background: #f6f6f4; border-bottom: 1px solid #d9d9d9; padding: 40px 0 10px; } /* Slider Widget */ .slider_widgets { float: right; width: 50%; } .slider_widgets .widget { margin: 0; float: left; width: 50%; } /* Video Area */ .video-area { padding: 50px 0 20px; background: #212425; color: #B6B6B6; } .video-area .wpzoom-featured-cat h3.entry-title a { color: #fff; } .video-area .wpzoom-featured-cat h3.entry-title a:hover { color: #F47857; } .video-area a { color: #fff; } .video-area a:hover { color: #F47857; } /********************************************************************************************* 7. Featured Slider *********************************************************************************************/ #slider { margin: 0 0 40px; overflow: hidden; position: relative; width: 50%; float: left; box-sizing: border-box; border-right: 2px solid #fff; } .empty-slider a, #slider .more_link { color: #7bdeff; } .empty-slider { margin: 60px auto 40px; padding: 50px 15px; color: #fff; background: #222; } #slider .slides { white-space: nowrap; overflow: hidden; background: #212425; height: 460px; } #slider .slide { position: relative; display: inline-block; white-space: normal; width: 100%; height: 460px; text-align: center; background-color: black; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #slider .flickity-enabled .slide { display: block; } #slider .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } #slider .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } .flickity-prev-next-button { display: block; position: absolute; z-index: 100; top: 45%; height: 40px; width: 40px; background: none; padding: 0; transition: all 0.3s ease-out; border: 2px solid #fff; } .flickity-prev-next-button:hover { opacity: 1; background: #fff } .flickity-prev-next-button.previous { left: 15px; } .flickity-prev-next-button.next { right: 15px; } .flickity-prev-next-button svg { position: absolute; left: 28%; top: 28%; width: 40%; height: 40%; } .flickity-prev-next-button path { fill: white; } .flickity-prev-next-button:hover path { fill: #222; } #slider .slider-direction-nav a:focus { outline: 0; } #slider .slider-direction-nav a:hover, #slider .slider-direction-nav a:active { opacity: 1; } .slides li .slide-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.3) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.3) 100%); background-repeat: repeat-x; color: #ffffff; } .slides li .slide-header { position: absolute; bottom: 30%; margin: 0 13%; width: 74%; } .slides li h3 { color: #fff; font-size: 34px; line-height: 1.4; font-weight: bold; margin: 0 0 15px; text-shadow: 0 0 4px rgba(0, 0, 0, 0.3); } .slides li h3 a { color: #fff; } .slides li h3 a:hover { text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); } .slides li .entry-meta { color: #fff; } .slides li .entry-meta a { color: #fff; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.2); } .slides li .entry-meta a:hover { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); } .slides:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: 25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background: #fff; border-radius: 50%; filter: alpha(opacity=45); /* IE8 */ opacity: 0.45; cursor: pointer; } .flickity-page-dots .dot.is-selected { filter: alpha(opacity=100); /* IE8 */ opacity: 1; } /********************************************************************************************* 8. Homepage Widgets - Featured Categories *********************************************************************************************/ /* Styles for Posts from Widgets */ .post-thumb img { max-width: 100%; height: auto; } .post-item { position: relative; margin: 0; overflow: hidden; } .post-item .background-overlay { background: -moz-linear-gradient(top, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,rgba(0,0,0,0)), color-stop(60%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 16%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 16%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 16%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.5) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 16%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.5) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */ position: absolute; opacity: 1; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; } .video-area .post-item .background-overlay { border-color: #212425; } .post-item .post-thumb { margin: 0; position: relative; background: #000; transition: transform 0.3s ease, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s; } .post-item .post-thumb img { opacity: .9; transition: transform 0.3s ease, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s; transition-timing-function: ease !important; } @media (min-width: 900px) { .post-item:hover .post-thumb { transform: scale3d(1.1, 1.1, 1); -webkit-transform: scale3d(1.1, 1.1, 1); -moz-transform: scale3d(1.1, 1.1, 1) rotate(0.02deg); } .post-item:hover .post-thumb img { opacity: .6; } } .post-item .post-item-content { z-index: 21; } .post-item:hover .entry-title { bottom: 17%; } .post-item .entry-title { position: absolute; bottom: 7%; left: 0; z-index: 21; font-size: 20px; font-weight: bold; line-height: 1.2; max-width: 90%; transition: all .2s ease; margin-left: 15px; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .post-item .entry-meta { visibility: hidden; opacity: 0; position: absolute; min-height: 50px; padding: 30px 0 10px; width: 100%; bottom: 0; left: 0; color: #ffffff; margin: 0; z-index: 23; transition: all .5s ease; } .post-item:hover .entry-meta { visibility: visible; opacity: .8; color: #fff; } .post-item .entry-meta span { float: right; margin: 0 15px; color: #fff; } .post-item .entry-meta span.cat-links, .post-item .entry-meta span.comments-link { float: left; } .post-item .entry-meta span + span:before { display: none; } /* Featured Category Widget */ .wpzoom-featured-cat { margin: 0 0 40px; font-size: 0; } .featured_category_2col { display: inline-block; vertical-align: top; font-size: 0; width: 48.5%; margin: 0 3% 0 0; } .featured_category_2col:nth-child(2) { margin-right: 0; } .featured_category_2col .featured-style-style_text { padding: 0; border: none; } .wpzoom-featured-cat .featured_category_2col > div { float: none; } .featured_category_2col .feat-cat_small_list { margin: 30px 0 0; overflow: hidden; } .featured_category_2col .feat-cat_small_list li { display: block; width: 100%; margin: 0 0 25px; overflow: hidden; } .featured_category_2col .feat-cat_small_list li:last-child { margin: 0; } .featured_category_2col .feat-cat_small_list h3.entry-title { font-size: 18px; } .featured_category_2col .feat-cat_small_list .post-thumb { max-width: 35.9%; float: left; margin: 0 20px 0 0; } .right_col_posts .post_content, .feat-cat_small_list .post-content { overflow: hidden; } .widget.wpzoom-featured-cat h3.title { margin-bottom: 0; background: none; padding: 0; font-size: 16px; text-transform: uppercase; font-family: "Roboto Condensed"; } .wpzoom-featured-cat h3.title a { color: #fff; background-color: #212425; padding: 8px 15px 7px; line-height: 33px; } .wpzoom-featured-cat h3.entry-title { line-height: 1.3; font-size: 22px; font-weight: bold; } .wpzoom-featured-cat .featured-style-style_text h3.entry-title { margin-bottom: 10px; line-height: 1.3; font-weight: bold; } .wpzoom-featured-cat h3.title:hover { opacity: .8; } .widget h3.title-color-blue, .wpzoom-featured-cat h3.title-color-blue a { background-color: #1C99E4; } .widget h3.title-color-red, .wpzoom-featured-cat h3.title-color-red a { background-color: #ee4444; } .widget h3.title-color-green, .wpzoom-featured-cat h3.title-color-green a { background-color: #22BB66; } .widget h3.title-color-black, .wpzoom-featured-cat h3.title-color-black a { background-color: #212425; } .widget h3.title-color-orange, .wpzoom-featured-cat h3.title-color-orange a { background-color: #F47857; } .widget h3.title-color-purple, .wpzoom-featured-cat h3.title-color-purple a { background-color: #733FD8; } .wpzoom-featured-cat img { max-width: 100%; height: auto; } .wpzoom-featured-cat p { font-size: 14px; line-height: 1.8; margin: 0; } .wpzoom-featured-cat .post { float: left; } .featured-style-style_text .post-thumb { margin: 0 0 20px; } .featured-style-style_text { padding: 0 0 40px; margin: 0 0 10px; border-bottom: 1px solid #eee; overflow: hidden; } .video-area .featured-style-style_text { border-bottom: 1px solid rgba(255,255,255,.2); } .home .content-area > div:last-child .featured-style-style_text, .video-area .inner-wrap > div:last-child .featured-style-style_text { border: none; padding: 0; } /* 1 Post */ .wpzoom-featured-cat .featured-grid-1 > div { width: 100%; float: none; } /* 2 Posts */ .wpzoom-featured-cat .featured-grid-2 > div { width: 50%; } .wpzoom-featured-cat .featured-grid-2.featured-style-style_text > div { width: 48%; display: inline-block; vertical-align: top; } .wpzoom-featured-cat .featured-grid-2.featured-style-style_text > div:nth-child(2) { margin-left: 4%; } /* 3 Posts */ .wpzoom-featured-cat .featured-grid-3 > div { width: 33.3333%; } .wpzoom-featured-cat .featured-grid-3 > div h3.entry-title { font-size: 18px; } .wpzoom-featured-cat .featured-grid-3.featured-style-style_text > div { width: 31.5%; display: inline-block; vertical-align: top; } .wpzoom-featured-cat .featured-grid-3.featured-style-style_text > div:nth-child(2) { margin-left: 2.75%; margin-right: 2.75%; } /* 4 Posts */ .wpzoom-featured-cat .featured-grid-4.featured-style-style_block > div { width: 50%; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text { font-size: 0; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text > div:first-child { width: 50%; float: left; margin-right: 2.66666%; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text .post, .wpzoom-featured-cat .featured-grid-5.featured-style-style_text .post { width:100%; float: none; margin-bottom: 10px; overflow: hidden; } .right_col_posts { width: 47% !important; float: right; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text > div:not(:first-child) .post-thumb { max-width: 35.9%; float: left; margin: 0 20px 20px 0; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text > div:not(:first-child) .post_content > p { display: none; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text > div::not(:first-child) { margin-right: 0; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text > div:first-child h3.entry-title { font-size: 24px; } .wpzoom-featured-cat .featured-grid-4.featured-style-style_text > div h3.entry-title { font-size: 18px; } /* 5 Posts */ .wpzoom-featured-cat .featured-grid-5 > div:nth-child(1), .wpzoom-featured-cat .featured-grid-5 > div:nth-child(2) { width: 50%; } .wpzoom-featured-cat .featured-grid-5 > div { width: 33.33333%; } .wpzoom-featured-cat .featured-grid-5 > div:nth-child(3) h3.entry-title, .wpzoom-featured-cat .featured-grid-5 > div:nth-child(4) h3.entry-title, .wpzoom-featured-cat .featured-grid-5 > div:nth-child(5) h3.entry-title { font-size: 22px; } .wpzoom-featured-cat .featured-grid-5.featured-style-style_text { font-size: 0; } .wpzoom-featured-cat .featured-grid-5.featured-style-style_text > div:first-child { width: 50%; float: left; margin-right: 2.66666%; } .wpzoom-featured-cat .featured-grid-5.featured-style-style_text > div:not(:first-child) .post-thumb { max-width: 35.9%; float: left; margin: 0 20px 20px 0; } .wpzoom-featured-cat .featured-grid-5.featured-style-style_text > div:not(:first-child) .post_content > p { display: none; } .wpzoom-featured-cat .featured-grid-5.featured-style-style_text > div::not(:first-child) { margin-right: 0; } .wpzoom-featured-cat .featured-grid-5.featured-style-style_text > div:first-child h3.entry-title { font-size: 24px; } .wpzoom-featured-cat .featured-grid-5.featured-style-style_text > div h3.entry-title { font-size: 18px; } /* 6 Posts */ .wpzoom-featured-cat .featured-grid-6 > div { width: 33.3333%; } .wpzoom-featured-cat .featured-grid-6 > div h3.entry-title { font-size: 20px; } .wpzoom-featured-cat .featured-grid-6.featured-style-style_text { font-size: 0; } .wpzoom-featured-cat .featured-grid-6.featured-style-style_text > div { float: none; display: inline-block; vertical-align: top; width: 31.5%; } .wpzoom-featured-cat .featured-grid-6.featured-style-style_text > div:nth-child(-n+3) { margin-bottom: 30px; } .wpzoom-featured-cat .featured-grid-6.featured-style-style_text > div:nth-child(2), .wpzoom-featured-cat .featured-grid-6.featured-style-style_text > div:nth-child(5) { margin-left: 2.75%; margin-right: 2.75%; } /* Widget area on the right to slider */ .slider_widgets .widget.wpzoom-featured-cat { margin: 0; } .slider_widgets .wpzoom-featured-cat .featured-grid-2 > div { width: 100%; float: none; max-height: 231px; overflow: hidden; } .slider_widgets .widget.wpzoom-featured-cat .post-item .background-overlay { } .slider_widgets .wpzoom-featured-cat .featured-grid-2 > div .post-thumb img { height: 231px; width: auto; } .slider_widgets .wpzoom-featured-cat .featured-grid-2 > div h3.entry-title { font-size: 20px; } /* Carousel widget */ .widget.carousel-slider, .site-widgetized-section .widgets .widget.carousel-slider { margin: 0 0 30px; padding: 0; position: relative; } .carousel_widget_wrapper { overflow: hidden; } .flickity-enabled { position: relative; } .widget.carousel-slider h3.title { margin-bottom: 0; padding: 0 15px; line-height: 33px; font-size: 16px; color: #fff; font-weight: bold; text-transform: uppercase; display: inline-block; font-family: "Roboto Condensed"; } .carousel-slider .slides { white-space: nowrap; overflow: hidden; } .carousel-slider .post-item { margin: 0; width: 350px; vertical-align: top; display: inline-block; } .carousel-slider .flickity-enabled .post-item { width: 350px; box-sizing: border-box; } .carousel_widget_wrapper > div { opacity: 0; visibility:hidden; transition: opacity .3s ease-in; } .carousel_widget_wrapper > div .post-item { display: none; } .carousel_widget_wrapper > .flickity-enabled { opacity: 1; visibility:visible; } .carousel_widget_wrapper > .flickity-enabled .post-item { display: inline-block; } .carousel-slider .flickity-prev-next-button { top: 90px; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } .carousel-slider .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; font-size: 10px; } .carousel-slider .spinner > div { background-color: #eaeaea; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; -o-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .carousel-slider .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .carousel-slider .spinner .rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .carousel-slider .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .carousel-slider .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } /********************************************************************************************* 9. Archive Posts *********************************************************************************************/ #main { padding: 40px 0 0; position: relative; } #main > .inner-wrap { position: relative; } .content-area { width: 1000px; float: left; } .full-width .content-area { width: 100%; float: none; } .section-title { margin: 0; font-size: 16px; text-transform: uppercase; font-weight: bold; display: inline-block; color: #fff; background-color: #212425; padding: 0 15px; line-height: 33px; font-family: "Roboto Condensed"; } .section-title:before, .section-title:after { content: " "; display: table; } .section-title:after { clear: both; } .archive-title { font-size: 34px; margin: 10px 0 40px; padding: 0 0 20px; letter-spacing: -1px; font-weight: bold; border-bottom: 4px solid #eee; } .category_description { margin: -20px 0 40px; font-size: 14px; } .recent-posts { font-size: 0; } .recent-posts .post:before, .recent-posts .post:after { content: " "; display: table; } .recent-posts .post:after { clear: both; } .recent-posts .post, .recent-posts .type-page { margin-bottom: 30px; } .recent-posts .post, .recent-posts .type-page { padding: 0 0 40px; margin: 0 0 60px; border-bottom: 4px solid #eee; position: relative; overflow: hidden; } .recent-posts .post:last-child, .recent-posts .type-page:last-child { border: none; padding: 0; } /* Grid View */ .grid_posts .recent-posts .post, .grid_posts .recent-posts .type-page { padding: 0; margin: 0 2.666% 40px 0; border: none; position: relative; overflow: hidden; width: 23%; display: inline-block; vertical-align: top; } .grid_posts .recent-posts .post:nth-child(4n+4), .grid_posts .recent-posts .type-page:nth-child(4n+4) { margin-right: 0; } .recent-posts > article:nth-of-type(4n+4) { margin-right: 0; } .grid_posts .recent-posts .post-thumb { margin: 0 0 15px; max-width: 100%; float: none; } .grid_posts .recent-posts .entry-title { font-size: 24px; } .grid_posts .cat-links { margin-bottom: 10px; display: block; } .recent-posts .type-page .entry-meta { display: none; } .recent-posts .post-thumb { margin: 0 25px 0 0; max-width: 38%; float: left; } .post-thumb img { max-width: 100%; height: auto; } .recent-posts .entry-body { overflow: hidden; } .recent-posts .entry-title, .woocommerce ul.products li.product h3 { margin: 0 0 10px; font-size: 28px; font-weight: 700; line-height: 1.4; } .woocommerce ul.products li.product a:hover h3 { color: #F47857; } .entry-content:before, .entry-content:after { content: " "; display: table; } .entry-content:after { clear: both; } .recent-posts .entry-content { font-size: 14px; line-height: 1.8; } .entry-content p { margin-bottom: 10px; } .entry-content img { max-width: 100%; height: auto; } .entry-meta { margin-bottom: 15px; color: #999; font-size: 14px; } .entry-meta span:not(.cat-links) + span:before { content: " / "; color: #aaa; margin: 0 2px; font-style: normal; opacity: .5; } .cat-links { margin: 0 0 10px; } .more-link, .more_link { display: table; margin: 20px 0 0; } .readmore_button { font-size: 16px; font-weight: 600; margin: 15px 0 30px; } .readmore_button a, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button:not(.alt), .woocommerce input.button { display: inline-block; font-size: 16px; line-height: 2; margin: 1px 4px 0 0; position: relative; color: #000; background-color: #fff; padding: 2px 15px; border: 1px solid #aaa; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } .readmore_button a:after, .woocommerce #respond input#submit:after, .woocommerce a.button:after, .woocommerce button.button:not(.alt):after, .woocommerce input.button:after { content: ''; position: absolute; top: 0; left: 0; right: -3px; bottom: -3px; border: 1px solid #ccc; border-top: 0; border-left: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .readmore_button a:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:not(.alt):hover, .woocommerce input.button:hover { text-decoration: none; color: #F47857; opacity: 1; background: transparent; } .woocommerce button.button.alt { font-size: 16px; font-weight: bold; background-color: #F47857; border: none; color: white; -webkit-transition: 0.2s ease all; -o-transition: 0.2s ease all; transition: 0.2s ease all; } .woocommerce button.button.alt:hover, .woocommerce button.button.alt:focus { background-color: #222; } .woocommerce .quantity .qty { padding-top: 4px; padding-bottom: 4px; } .woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover { background-color: #F47857; } .woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text { width: 180px; } .woocommerce .cart .button, .woocommerce .cart input.button { padding: 8px 15px; } .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color: #222; border:none; } .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: #F47857; } #add_payment_method #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li { list-style-type: none; } #add_payment_method #payment ul.payment_methods li label, .woocommerce-checkout #payment ul.payment_methods li label { display: inline; } .woocommerce a.button.alt:after { display: none; } /* Post Formats Icons */ .wpzoom-featured-cat .format-video.has-post-thumbnail h3.entry-title:before, .wpzoom-featured-cat .format-gallery.has-post-thumbnail h3.entry-title:before, .wpzoom-featured-cat .format-audio.has-post-thumbnail h3.entry-title:before { display: block; -webkit-font-smoothing: antialiased; font-family: 'dashicons'; margin: 0 0 4px; color: #fff; } .wpzoom-featured-cat .format-video h3.entry-title:before { content: "\f236"; } .wpzoom-featured-cat .format-gallery h3.entry-title:before { content: "\f233"; } .wpzoom-featured-cat .format-audio h3.entry-title:before { content: "\f127"; } .featured-style-style_text .format-video.has-post-thumbnail h3.entry-title:before, .featured-style-style_text .format-gallery.has-post-thumbnail h3.entry-title:before, .featured-style-style_text .format-audio.has-post-thumbnail h3.entry-title:before { display: block; position: absolute; top: -60px; left: 10px; -webkit-font-smoothing: antialiased; font-family: 'dashicons'; margin: 0 0 4px; color: #fff; } .wpzoom-featured-cat .featured-style-style_text h3.entry-title { position: relative; } /********************************************************************************************* 10. Single posts *********************************************************************************************/ .entry-header { margin: 0 0 30px; } .single .entry-header .post-thumb { margin: 0 0 25px; } .page .site-main.full-width-page > article { float: none; max-width: 100%; width: 100%; } .page h1.entry-title, .single h1.entry-title { font-size: 50px; line-height: 1.2; font-weight: bold; margin: 0 0 15px; } .page .entry-info, .single .entry-info { margin-bottom: 30px; } .single .entry-category { font-weight: bold; text-transform: uppercase; margin: 0 0 5px; display: block; } .single .content-area .entry-meta { font-size: 16px; border-bottom: 1px solid #eee; padding: 0 0 25px; margin: 0 0 30px; } .single .content-area .entry-meta span + span:before { display: none; } .post-inner { overflow: hidden; } .post-area { margin: 0 0 70px; padding: 0 0 70px; border-bottom: 1px solid #eee; } .single .entry-content { padding-bottom: 15px; overflow: hidden; } .page .entry-content p, .single .entry-content p { margin-bottom: 20px; } /* .single .entry-content > p:first-child:first-letter { float: left; font-weight: bold; text-shadow: 4px 4px 0 #ddd; font-size: 75px; line-height: 60px; padding-top: 0px; padding-right: 10px; padding-left: 3px; font-family: "Playfair Display", serif; } */ .entry-content a { font-weight: bold; color: #F47857; } .entry-content a:hover { color: #222; } .entry-content a.wpz-sc-button { text-decoration: none; color: #fff; font-weight: normal; } .entry-content a.wpz-sc-button:hover { color: #fff; } .entry-content .wpz-sc-ilink a { text-decoration: none; } .entry-content .shortcode-tabs ul.tab_titles li.nav-tab a { text-decoration: none; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin-bottom: 15px; line-height: 1.4; font-weight: bold; } .entry-content img.alignnone, .entry-content img.aligncenter, .entry-content img.alignleft, .entry-content img.alignright, .entry-content img.attachment-fullsize { margin-bottom: 20px; max-width: 100%; height: auto; } .entry-content ul, .entry-content ol { margin: 0 0 20px 15px } .entry-content li ul, .entry-content li ol { margin-bottom: 0 } .entry-content li { list-style-position: inside } .entry-content ul li { list-style-type: square } .entry-content ol li { list-style-type: decimal } .entry-content .shortcode-unorderedlist ul li, .entry-content .shortcode-unorderedlist ul li ul { list-style-type: none } .entry-content blockquote { font-size: 22px; margin: 15px 0 40px; text-align: center; font-family: "Playfair Display", serif; position: relative; } .entry-content blockquote:before, .entry-content blockquote:after { content: ""; display: block; width: 60px; height: 2px; margin: 30px auto; background: #f0f0f0; } /* Galleries */ .entry-content .gallery a:hover { opacity: 0.6; transition: opacity 0.25s ease-in-out; } .gallery-item { display: inline-block; max-width: 33.33%; padding: 0 1.1400652% 2.2801304%; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-icon img { margin: 0 auto; } .wp-caption-text, .gallery-caption { color: #868686; margin: 0; padding: 15px 0; text-align: center; display: block; font-style: italic; line-height: 1.4; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /* Images align */ .entry-content .aligncenter, div.aligncenter { display: block; clear: both; margin-left: auto; margin-right: auto; } .alignleft, .entry-content .alignleft { float: left; margin-right: 15px; } .alignright, .entry-content .alignright { float: right; margin-left: 15px; } /* Caption for images */ .entry-content .wp-caption { max-width: 100% !important; width: auto; text-align: center; } .entry-content .wp-caption img { background: none; margin: 0; border: 0 none; max-width: 100%; width: auto; height: auto; } .entry-content .wp-caption-text, .gallery-caption { color: #868686; font-size: 14px; margin: 0; padding: 15px 0; text-align: center; } .entry-content .wp-caption.aligncenter { margin: 0 auto 15px } img.wp-smiley { border: none; padding: 0; } #snippet-box { width: 100% !important; float: none !important; } /* Related Posts */ .related_posts { margin:0 40px 30px 0; width: 200px; float: left; } .related_posts h3 { margin:0 0 15px; border-top: 3px solid #222; padding: 15px 0 0; font-size: 14px; font-weight: bold; } .related_posts ul li { list-style-type:none; margin:0 0 30px; display: block; } .related_posts ul li a { display: block; font-weight: 600; line-height: 1.4; } .related_posts ul li img { margin:0 0 15px; max-width: 100%; height: auto; } .related_posts span { font-size: 14px; color: #999; } /* Jetpack Related Posts */ h4.jp-relatedposts-post-title { margin: 10px 0 5px !important; font-weight: bold; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post { opacity: 1 !important; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a { font-weight: bold !important; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a { text-decoration: none !important; } .single div#jp-relatedposts h3.jp-relatedposts-headline, .single div.sharedaddy h3.sd-title { font-size: 16px; display: block; border-top: 1px solid #eee; padding: 20px 0 0; font-weight: bold; } .single div.sharedaddy h3.sd-title:before, .single div#jp-relatedposts h3.jp-relatedposts-headline em:before { display: none; } /* Tags */ .tags { clear: both; list-style: none; padding: 0; margin: 0 0 40px; } .tags li { position: relative; float: left; list-style: none; padding: 0; margin: 0 35px 0 0; } .tags li:last-child { margin-right: 0; } .tags a { font-size: 14px; display: block; position: relative; text-decoration: none; line-height: 37px; color: #fff; background: #F47857; padding: 0 12px 0 20px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; transition: none; margin: 0; } .tags a:after { content: ''; display: block; position: absolute; top: 50%; right: -15px; background: #F47857; height: 29px; width: 29px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-top: -14.5px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .tags a:hover, .tags a:hover:after { background: #212425; color: #fff; } .tags a span { position: relative; z-index: 1; } /* Author Bio */ .single .post_author { padding: 30px; border-radius: 3px; background: #212425; color: #B6B6B6; } .single .author-description { overflow: hidden; } .single .post_author .author-title { margin: 0 10px 14px 0; font-size: 20px; font-weight: bold; display: inline-block; } .single .post_author a { color: #fff; } .single .post_author a:hover { color: #F47857; } .single .post_author .author-bio { margin-bottom: 0; line-height: 1.6; font-size: 14px; } .single .post_author > img { float: left; margin-right: 25px; -webkit-border-radius: 50%; border-radius: 50%; } .author_links { display: inline-block; } .author_links a { margin: 0 3px 0 0; } .author_links a:before { content: "\e603"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/100% 'icomoon'; vertical-align: top; margin: 0; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } .author_links a.author_facebook:before { content: "\e601"; } .author_links a.author_instagram:before { content: "\e602"; } /* Template: Archives */ .col_arch { border-bottom: 1px solid #eee; padding: 0 0 30px; margin: 0 0 30px; } .col_arch ul { margin: 0; } .col_arch a { font-weight: normal; text-decoration: none; color: #222; } .col_arch a:hover { color: #F47857; } .col_arch ul li { width: 31%; float: left; margin: 0 1.5% 5px 0; list-style-type: none; } .col_arch:last-child { border-bottom:none; } /********************************************************************************************* 11. Comments *********************************************************************************************/ #comments > h3 { position: relative; font-size: 30px; margin-bottom: 40px; font-weight: bold; } #respond > h3 { position: relative; margin-top: 80px; margin-bottom: 20px; font-size: 30px; font-weight: bold; } .comment-notes { margin-bottom: 30px; font-style: italic; color: #999; } .commentlist { list-style-type: none; padding: 0; } .commentlist li { list-style-type: none } .commentlist .children { margin: 30px 0 0 50px } .commentlist .comment { margin-bottom: 44px; padding-bottom: 32px; position: relative; border-bottom: 1px solid #EEEEEE; line-height: 1.7; font-size: 14px; } .commentlist .children li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; margin-top: 30px; } .comment .avatar { float: left; border-radius: 50%; margin: 0 20px 15px 0; } .comment-author:before, .comment-author:after { content: " "; display: table; } .comment-author:after { clear: both } .comment-author .fn, .comment-author .fn a { font-style: normal; font-weight: bold; font-size: 18px;} .comment-author .comment-meta { margin-top: 5px; } .comment-author .comment-meta, .comment-author .comment-meta a { color: #a2a2a2; } .comment-author .comment-meta a:hover { color: #333; } .comment-main { overflow: hidden; } .comment-body { margin-top: 8px; } #respond { margin-bottom: 85px } #respond .form_fields p { margin-bottom: 24px; width: 50%; } #respond .form_fields p:first-child { padding-left: 0; } #respond label { font-weight: normal; font-size: 16px; margin-bottom: 5px; } #respond input { width: 90%; } #respond textarea { width: 100%; height: 150px; } #respond #submit { width: auto; padding-left: 25px; padding-right: 25px; margin-top: 12px; } #respond code { white-space: pre-wrap } .form-allowed-tags { display: none } #respond .form_fields p .required_lab { margin-left:10px; color:#a7a7b3;} .nocomments { font-style: italic; margin: 30px 0; } /********************************************************************************************* 12. Sidebar & Widgets *********************************************************************************************/ #sidebar { float: right; width: 350px; font-size: 14px; overflow: hidden; } #sidebar img { max-width: 100%; height: auto; } .sidebar_content { max-width: 350px; } #sidebar a { transition: none; } .widget h3.title { margin: 0 0 25px; font-size: 18px; font-weight: bold; color: #212425; } #sidebar .widget { margin-bottom: 60px; border: 1px solid #eee; padding: 24px; } .widget ul { clear: both; margin: 5px 0; } .widget ul li { list-style-type: none; } .widget ul ul { margin: 0; padding: 0; border-top: none; } .widget ul ul li { border: none; } .side_ad { text-align: center; margin:0 0 10px; } .widget .cats a { font-weight:normal; } /* Category Widget */ .widget_categories ul li { color: #8B8A8A; text-align: right; font-weight: normal; padding: 2px 0; clear: both; } .widget_categories ul li li { padding-left:10px; } .widget_categories ul li a { text-align: left; float: left; font-weight: normal; } /* Recent Posts */ .widget .feature-posts-list br {display: none;} .widget .feature-posts-list img { margin: 0 15px 0 0; float: left; } .widget .feature-posts-list small { font-size: 14px; color: #666; margin: 0 0 5px; display: block; } .widget .feature-posts-list .post-excerpt { display: block; overflow: hidden; } .widget .feature-posts-list li { margin:0 0 25px; } .widget .feature-posts-list li:last-child { margin: 0; border: none; padding: 0;} .widget .feature-posts-list li h3 { line-height: 1.3; font-size: 16px; margin: 0 0 5px; } .widget .feature-posts-list li a { font-weight: bold; } /* Twitter widget */ .zoom-twitter-widget__item a { font-weight: normal; } .zoom-twitter-widget__item-timestamp { display: block; font-size: 14px; font-style: normal; margin: 5px 0 10px; } /* Popular Posts Widget */ .popular-news .comments { display: block; font-size: 14px; color: #666; } .popular-news li { margin: 0 0 15px; } .popular-news li a { font-weight: bold; } /* Tag cloud Widget */ .widget_tag_cloud div a { padding: 0 3px; } /* Calendar widget */ #wp-calendar {width: 100%; } #wp-calendar caption { text-align: right; font-weight:bold; font-size: 12px; margin-top: 10px; margin-bottom: 15px; } #wp-calendar thead { font-size: 10px; } #wp-calendar thead th { padding-bottom: 10px; } #wp-calendar tbody { color: #aaa; } #wp-calendar tbody td { background: #EFEEEE; text-align: center; padding:8px;} #wp-calendar tbody td:hover { background: #E8E8E8; } #wp-calendar tbody .pad { background: none; } #wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; } #wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; } /* Tabbed Widget */ .tabberlive .tabbertabhide { display: none; } #sidebar .widget.tabbertabs { padding: 0; border-radius: 3px; border: 2px solid #eee; } .widget .tabbertab { padding: 20px; } .widget .tabbernav { margin: 0; background: #EEEEEE; } .widget .tabbernav li { display: inline-block; color: #8d8d8d; } .widget .tabbernav li a { display: inline-block; position: relative; margin: 0; padding: 12px 20px; line-height: 1.1; font-weight: bold; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #aaa; text-decoration: none; font-family: "Roboto Condensed"; } .widget .tabbernav li a:hover { color: #F47857; } .widget .tabbernav .tabberactive a { color: #212425; background: #fff; border-radius: 3px 3px 0 0; } .widget .tabbertab .widgettitle { display: none; } #sidebar .widget.widget_awesomeweatherwidget { padding: 0; border: none; } /* Weather Widget */ .awesome-weather-wrap { text-shadow: none !important; font-size: 16px; font-weight: normal; } /* Jetpack subscription widget */ .jetpack_subscription_widget { background: #F6F6F4 !important; color: #666; } #subscribe-email input { padding: 8px 12px !important; width: 100% !important; } #subscribe-submit input { width: 100% !important; } /********************************************************************************************* 13. Footer *********************************************************************************************/ .site-footer { font-size: 16px; background: #F6F6F4; margin-top: 45px; border-top: 1px solid #E8E8DF; color: #666; } .home .site-footer { margin-top: 0; } .footer-widgets { padding: 40px 0 0; border-bottom: 1px solid #E8E8DF; } .footer-widgets:before, .footer-widgets:after { content: " "; display: table; } .footer-widgets:after { clear: both } .footer-widgets .column { float: left; } .footer-widgets.widget-columns-4 .column { width: 23%; margin-right: 2.6666%; } .footer-widgets.widget-columns-3 .column { width: 31%; margin-right: 3.5%; } .footer-widgets.widget-columns-2 .column { width: 48%; margin-right: 4%; } .footer-widgets.widget-columns-1 .column { width: 100%; } .footer-widgets.widget-columns-2 .column:nth-child(2n+2), .footer-widgets.widget-columns-3 .column:nth-child(3n+3), .footer-widgets.widget-columns-4 .column:nth-child(4n+4) { margin-right: 0; } .footer-widgets .widget { margin-bottom: 40px; } .footer-widgets .widget h3.title { margin: 0 0 20px; font-size: 22px; } .site-info-top { border-bottom: 1px solid #E8E8DF; padding: 30px 0; background: #212425; text-align: center; } .site-info-top a { color: #fff; } .site-info-top a:hover { color: #F47857; } .site-info-top .navbar-brand { margin: 0; float: none; } .site-info-top .navbar-brand h2 { font-size: 34px; font-weight: bold; } .footer-menu { margin: 20px 0 0; } .footer-menu ul { list-style: none; } .footer-menu ul li { display: inline; margin-right: 15px; font-size: 14px; font-weight: 600; } .footer-menu ul li:last-child { margin-right: 0; } .site-info { padding: 30px 0; background: #F6F6F4; font-size: 14px; text-align: center; } .site-info p { margin: 0 0 10px; } .site-info a { font-weight: bold; } .site-info:before, .site-info:after { content: " "; display: table; } .site-info:after { clear: both } /* jQuery.mmenu CSS */ .mm-hidden { display: none !important } .mm-wrapper { overflow-x: hidden; position: relative; } .mm-menu, .mm-menu > .mm-panel { margin: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .mm-menu { background: inherit; display: block; overflow: hidden; padding: 0; } .mm-panel { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .mm-panel.mm-opened { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .mm-panel.mm-subopened { -webkit-transform: translate3d(-30%, 0, 0); -moz-transform: translate3d(-30%, 0, 0); -ms-transform: translate3d(-30%, 0, 0); -o-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } .mm-panel.mm-highest { z-index: 1 } .mm-menu > .mm-panel { background: inherit; -webkit-overflow-scrolling: touch; overflow: scroll; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 0 20px; } .mm-menu > .mm-panel.mm-hasheader { padding-top: 40px } .mm-menu > .mm-panel:before, .mm-menu > .mm-panel:after { content: ''; display: block; height: 20px; } .mm-vertical .mm-panel { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; } .mm-vertical .mm-listview .mm-panel, .mm-listview .mm-vertical .mm-panel { display: none; padding: 10px 0 10px 10px; } .mm-vertical .mm-listview .mm-panel .mm-listview > li:last-child:after, .mm-listview .mm-vertical .mm-panel .mm-listview > li:last-child:after { border-color: transparent } .mm-vertical li.mm-opened > .mm-panel, li.mm-vertical.mm-opened > .mm-panel { display: block } .mm-vertical .mm-listview > li > .mm-next, .mm-listview > li.mm-vertical > .mm-next { height: 40px; bottom: auto; } .mm-vertical .mm-listview > li > .mm-next:after, .mm-listview > li.mm-vertical > .mm-next:after { top: 16px; bottom: auto; } .mm-vertical .mm-listview > li.mm-opened > .mm-next:after, .mm-listview > li.mm-vertical.mm-opened > .mm-next:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mm-header { border-bottom: 1px solid transparent; text-align: center; line-height: 20px; height: 40px; padding: 0 40px; margin: 0; position: absolute; top: 0; left: 0; right: 0; } .mm-header > a { text-decoration: none; display: block; padding: 10px 0; } .mm-header .mm-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .mm-header .mm-btn { box-sizing: border-box; width: 40px; height: 40px; position: absolute; top: 0; z-index: 1; } .mm-header .mm-btn:first-child { padding-left: 20px; left: 0; } .mm-header .mm-btn:last-child { padding-right: 20px; right: 0; } .mm-listview, .mm-listview > li { list-style: none; display: block; padding: 0; margin: 0; } .mm-listview { font: inherit; font-size: 14px; } .mm-listview a, .mm-listview a:hover { text-decoration: none } .mm-listview > li { position: relative } .mm-listview > li > a, .mm-listview > li > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: inherit; line-height: 20px; display: block; padding: 10px 10px 10px 0; margin: 0; } .mm-listview > li:not(.mm-divider):after { content: ''; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: absolute; left: 0; right: 0; bottom: 0; } .mm-listview > li:not(.mm-divider):after { left: 20px } .mm-listview .mm-next { background: rgba(3, 2, 1, 0); width: 50px; padding: 0; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; } .mm-listview .mm-next:before { content: ''; border-left-width: 1px; border-left-style: solid; display: block; position: absolute; top: 0; bottom: 0; left: 0; } .mm-listview .mm-next + a, .mm-listview .mm-next + span { margin-right: 50px } .mm-listview .mm-next.mm-fullsubopen { width: 100% } .mm-listview .mm-next.mm-fullsubopen:before { border-left: none } .mm-listview .mm-next.mm-fullsubopen + a, .mm-listview .mm-next.mm-fullsubopen + span { padding-right: 50px; margin-right: 0; } .mm-menu > .mm-panel > .mm-listview { margin-left: -20px; margin-right: -20px; } .mm-menu > .mm-panel > .mm-listview.mm-first { margin-top: -20px } .mm-menu > .mm-panel > .mm-listview.mm-last { padding-bottom: 20px } .mm-prev:before, .mm-next:after { content: ''; border: 2px solid transparent; display: inline-block; width: 8px; height: 8px; margin: auto; position: absolute; top: 0; bottom: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .mm-prev:before { border-right: none; border-bottom: none; left: 20px; } .mm-next:after { border-top: none; border-left: none; right: 20px; } .mm-divider { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 10px; text-transform: uppercase; text-indent: 20px; line-height: 25px; } .mm-listview > li.mm-spacer { padding-top: 40px } .mm-listview > li.mm-spacer > .mm-next { top: 40px } .mm-listview > li.mm-spacer.mm-divider { padding-top: 25px } .mm-menu { background: #f3f3f3; color: rgba(0, 0, 0, 0.7); } .mm-menu .mm-header { border-color: rgba(0, 0, 0, 0.1) } .mm-menu .mm-header > a { color: rgba(0, 0, 0, 0.3) } .mm-menu .mm-header .mm-btn:before, .mm-menu .mm-header .mm-btn:after { border-color: rgba(0, 0, 0, 0.3) } .mm-menu .mm-listview > li:after { border-color: rgba(0, 0, 0, 0.1) } .mm-menu .mm-listview > li > a.mm-prev, .mm-menu .mm-listview > li > a.mm-next { color: rgba(0, 0, 0, 0.3) } .mm-menu .mm-listview > li > a.mm-prev:before, .mm-menu .mm-listview > li > a.mm-next:after { border-color: rgba(0, 0, 0, 0.3) } .mm-menu .mm-listview > li > a.mm-prev:after, .mm-menu .mm-listview > li > a.mm-next:before { border-color: rgba(0, 0, 0, 0.1) } .mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span { background: rgba(255, 255, 255, 0.5) } .mm-menu.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu .mm-listview li.mm-opened.mm-vertical > .mm-panel { background: rgba(0, 0, 0, 0.05) } .mm-menu .mm-divider { background: rgba(0, 0, 0, 0.05) } /* jQuery.mmenu offcanvas addon CSS */ .mm-page { box-sizing: border-box; position: relative; } .mm-slideout { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-opened { overflow: hidden; position: relative; } html.mm-opened body { overflow: hidden } html.mm-opened .mm-page { min-height: 100vh } html.mm-background .mm-page { background: inherit } #mm-blocker { background: rgba(3, 2, 1, 0); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999999; } html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker { display: block } .mm-menu.mm-offcanvas { display: none; position: fixed; } .mm-menu.mm-current { display: block } .mm-menu { width: 80%; min-width: 140px; max-width: 440px; } html.mm-opening .mm-slideout { -webkit-transform: translate(80%, 0); -moz-transform: translate(80%, 0); -ms-transform: translate(80%, 0); -o-transform: translate(80%, 0); transform: translate(80%, 0); } @media all and (max-width: 175px) { html.mm-opening .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(440px, 0); -moz-transform: translate(440px, 0); -ms-transform: translate(440px, 0); -o-transform: translate(440px, 0); transform: translate(440px, 0); } } menu.mm-measureheight > .mm-panel { bottom: auto !important; height: auto !important; } /* jQuery.mmenu dragOpen addon CSS */ html.mm-opened.mm-dragging .mm-menu, html.mm-opened.mm-dragging .mm-page, html.mm-opened.mm-dragging .mm-fixed-top, html.mm-opened.mm-dragging .mm-fixed-bottom, html.mm-opened.mm-dragging #mm-blocker { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* jQuery.mmenu borderstyle extension CSS */ .mm-menu.mm-border-none .mm-listview > li:after, .mm-listview.mm-border-none > li:after { content: none } .mm-menu.mm-border-full .mm-listview > li:after, .mm-listview.mm-border-full > li:after { left: 0 !important } /* jQuery.mmenu pageshadow extension CSS */ .mm-menu.mm-pageshadow:after { content: ""; display: block; width: 20px; height: 120%; position: absolute; left: 100%; top: -10%; z-index: 99; } .mm-menu.mm-pageshadow.mm-right:after { left: auto; right: 100%; } .mm-menu.mm-pageshadow.mm-next:after, .mm-menu.mm-pageshadow.mm-front:after { content: none; display: none; } .mm-menu.mm-pageshadow:after { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) } /* jQuery.mmenu themes extension CSS */ .mm-menu.mm-theme-dark { background: #333333; color: rgba(255, 255, 255, 0.8); } .mm-menu.mm-theme-dark .mm-header { border-color: rgba(0, 0, 0, 0.15) } .mm-menu.mm-theme-dark .mm-header > a { color: rgba(255, 255, 255, 0.4) } .mm-menu.mm-theme-dark .mm-header .mm-btn:before, .mm-menu.mm-theme-dark .mm-header .mm-btn:after { border-color: rgba(255, 255, 255, 0.4) } .mm-menu.mm-theme-dark .mm-listview > li:after { border-color: rgba(0, 0, 0, 0.15) } .mm-menu.mm-theme-dark .mm-listview > li > a.mm-prev, .mm-menu.mm-theme-dark .mm-listview > li > a.mm-next { color: rgba(255, 255, 255, 0.4) } .mm-menu.mm-theme-dark .mm-listview > li > a.mm-prev:before, .mm-menu.mm-theme-dark .mm-listview > li > a.mm-next:after { border-color: rgba(255, 255, 255, 0.4) } .mm-menu.mm-theme-dark .mm-listview > li > a.mm-prev:after, .mm-menu.mm-theme-dark .mm-listview > li > a.mm-next:before { border-color: rgba(0, 0, 0, 0.15) } .mm-menu.mm-theme-dark .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu.mm-theme-dark .mm-listview > li.mm-selected > span { background: rgba(0, 0, 0, 0.1) } .mm-menu.mm-theme-dark.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-theme-dark.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu.mm-theme-dark .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu.mm-theme-dark .mm-listview li.mm-opened.mm-vertical > .mm-panel { background: rgba(255, 255, 255, 0.05) } .mm-menu.mm-theme-dark .mm-divider { background: rgba(255, 255, 255, 0.05) } .mm-menu.mm-theme-dark .mm-buttonbar { border-color: rgba(255, 255, 255, 0.8); background: #333333; } .mm-menu.mm-theme-dark .mm-buttonbar > * { border-color: rgba(255, 255, 255, 0.8) } .mm-menu.mm-theme-dark .mm-buttonbar > input:checked + label { background: rgba(255, 255, 255, 0.8); color: #333333; } .mm-menu.mm-theme-dark label.mm-check:before { border-color: rgba(255, 255, 255, 0.8) } .mm-menu.mm-theme-dark em.mm-counter { color: rgba(255, 255, 255, 0.4) } .mm-menu.mm-theme-dark .mm-footer { border-color: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.4); } .mm-menu.mm-theme-dark .mm-fixeddivider span { background: rgba(255, 255, 255, 0.05) } .mm-menu.mm-pageshadow.mm-theme-dark:after { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) } .mm-menu.mm-theme-dark .mm-search input { background: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); } .mm-menu.mm-theme-dark .mm-noresultsmsg { color: rgba(255, 255, 255, 0.4) } .mm-menu.mm-theme-dark .mm-indexer a { color: rgba(255, 255, 255, 0.4) } .mm-menu.mm-theme-dark label.mm-toggle { background: rgba(0, 0, 0, 0.15) } .mm-menu.mm-theme-dark label.mm-toggle:before { background: #333333 } .mm-menu.mm-theme-dark input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963 } .mm-menu.mm-theme-white { background: white; color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-theme-white .mm-header { border-color: rgba(0, 0, 0, 0.1) } .mm-menu.mm-theme-white .mm-header > a { color: rgba(0, 0, 0, 0.3) } .mm-menu.mm-theme-white .mm-header .mm-btn:before, .mm-menu.mm-theme-white .mm-header .mm-btn:after { border-color: rgba(0, 0, 0, 0.3) } .mm-menu.mm-theme-white .mm-listview > li:after { border-color: rgba(0, 0, 0, 0.1) } .mm-menu.mm-theme-white .mm-listview > li > a.mm-prev, .mm-menu.mm-theme-white .mm-listview > li > a.mm-next { color: rgba(0, 0, 0, 0.3) } .mm-menu.mm-theme-white .mm-listview > li > a.mm-prev:before, .mm-menu.mm-theme-white .mm-listview > li > a.mm-next:after { border-color: rgba(0, 0, 0, 0.3) } .mm-menu.mm-theme-white .mm-listview > li > a.mm-prev:after, .mm-menu.mm-theme-white .mm-listview > li > a.mm-next:before { border-color: rgba(0, 0, 0, 0.1) } .mm-menu.mm-theme-white .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu.mm-theme-white .mm-listview > li.mm-selected > span { background: rgba(0, 0, 0, 0.05) } .mm-menu.mm-theme-white.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-theme-white.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu.mm-theme-white .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu.mm-theme-white .mm-listview li.mm-opened.mm-vertical > .mm-panel { background: rgba(0, 0, 0, 0.03) } .mm-menu.mm-theme-white .mm-divider { background: rgba(0, 0, 0, 0.03) } .mm-menu.mm-theme-white .mm-buttonbar { border-color: rgba(0, 0, 0, 0.6); background: white; } .mm-menu.mm-theme-white .mm-buttonbar > * { border-color: rgba(0, 0, 0, 0.6) } .mm-menu.mm-theme-white .mm-buttonbar > input:checked + label { background: rgba(0, 0, 0, 0.6); color: white; } .mm-menu.mm-theme-white label.mm-check:before { border-color: rgba(0, 0, 0, 0.6) } .mm-menu.mm-theme-white em.mm-counter { color: rgba(0, 0, 0, 0.3) } .mm-menu.mm-theme-white .mm-footer { border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-theme-white .mm-fixeddivider span { background: rgba(0, 0, 0, 0.03) } .mm-menu.mm-pageshadow.mm-theme-white:after { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) } .mm-menu.mm-theme-white .mm-search input { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-theme-white .mm-noresultsmsg { color: rgba(0, 0, 0, 0.3) } .mm-menu.mm-theme-white .mm-indexer a { color: rgba(0, 0, 0, 0.3) } .mm-menu.mm-theme-white label.mm-toggle { background: rgba(0, 0, 0, 0.1) } .mm-menu.mm-theme-white label.mm-toggle:before { background: white } .mm-menu.mm-theme-white input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963 } /* Custom mmenu **/ .mm-listview { font-size: 16px } .mm-menu > .mm-panel { padding: 20px 40px; }