/* Theme Name: Dragon WP Theme Theme URI: http://dragon.designagent.sk/ Author: Darina Tyrpakova Author URI: http://designagent.sk/ Description: Clean and tidy creative portfolio theme. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: white, light, dark, one-column, two-columns, right-sidebar, left-sidebar, fluid-layout, custom-menu, editor-style, microformats, post-formats, custom-background, custom-colors, translation-ready, responsive-layout Text Domain: dragon */ @import url("editor-style.css"); /******************************************************************************************************** * Please do not make edits directly to this file. You will lose all modifications when the theme is next updated if you do so. Please use a child theme. This theme's styles will automatically be loaded for you. You can then overwrite specific style rules in your child theme's 'style.css' file. * TABLE OF CONTENTS: 1. BODY DEFAULTS, LAYOUTS - html, body 2. FORM ELEMENTS & BUTTONS - inputs, selects, buttons, fields 3. MAIN WRAPPER - wrappers 4. HEADER - header, logo, navigation, loading effect 5. CONTENT ELEMENTS - inside content elements and classes (find more classes in editor-style.css) 6. GALLERY, PORTFOLIO - galleries 7. WOO COMMERCE - shop styles 8. SIDEBAR - widgets 9. FOOTER - footer widgets, copyright 10. ISOTOPE TRANSITIONS - filtering portfolio/gallery items 11. RESPONSIVNESS - media queries */ /******************************************************************************************************** /* BODY DEFAULTS _____________________________________ */ html { height: 100%; font-family: 'Open Sans', sans-serif; font-size: 62.5%; } body { width: 100%; background: #F9F9F9; color: #212121; font-size: 1.6em; font-weight: 300; overflow-x: hidden; } input, textarea, button { font-family: 'Open Sans', sans-serif; vertical-align: middle; } select { font-family: 'Open Sans', sans-serif; } input[type="submit"], input[type="button"], button, .button { font-family: 'Montserrat', sans-serif; font-weight: normal; vertical-align: middle; } /* FORM ELEMENTS & BUTTONS _____________________________________ */ input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search], input[type=password], input[type=number], input.input-text, textarea { border: 0; outline: 0; background: transparent; width: 100%; height: 36px; padding: .4em 0; -webkit-appearance: none; -webkit-focus-ring-color: none; border-bottom: 1px solid #E5E5E5; font-weight: normal; font-size: 1.1em; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } select { outline: 0 !important; vertical-align: middle; background: white; width: 100%; height: auto; min-height: 36px; padding: .4em 0; font-size: 1.1em; border: 0; border-bottom: 1px solid #E5E5E5; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus { border-color: #E5E5E5; box-shadow: 0 1px 0 #D32F2F; } ::-webkit-input-placeholder { color: #212121; opacity: .4; } :-moz-placeholder { color: #212121; opacity: .4; } ::-moz-placeholder { color: #212121; opacity: .4; } :-ms-input-placeholder { color: #212121; opacity: .4; } input[type=submit], input[type=button], button, .button { display: inline-block; height: auto; padding: 8px 16px; font-weight: normal; font-size: 0.8em; line-height: 1.6; text-align: center; letter-spacing: 0.05em; cursor: pointer; outline: 0; border: 2px solid #D32F2F; border-radius: 3px; text-decoration: none; margin: 2px 0; text-transform: uppercase; background: transparent; color: #D32F2F; box-shadow: 0 2px 0 rgba(0,0,0,0.25); position: relative; z-index: 1; } input[type=submit]:hover, input[type=button]:hover, button:hover, .button:hover, input[type=submit]:focus, input[type=button]:focus, button:focus, .button:focus { background: #D32F2F; color: white; box-shadow: 0 4px 2px rgba(0,0,0,0.15); -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } input[type=submit]:active, input[type=button]:active, button:active, .button:active { box-shadow: none; } .button:hover { background: none !important; text-decoration: none !important; } .button::before { content: ""; position: absolute; width: 0%; height: 100%; left: 0; top: 0; background: #D32F2F; z-index: -1; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .button:hover::before { width: 100%; } .button .ripple-wrap { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .button .rippling { background: black; opacity: .3; } input[type=checkbox] { width: auto; margin: 0 1em 0 0; vertical-align: middle; border: 1px solid #E5E5E5; background :white; margin: .3em; } input[type=radio] { vertical-align: middle; border: 1px solid #E5E5E5; background :white; margin: .3em; } input[type=number] { width: auto; vertical-align: middle; } label { display: block; padding: .3em .3em .3em 0; color: #757575; font-size: .9em; } textarea { height: 100px; } form { position: relative; } /* Magnific popup */ .mfp-container button { box-shadow: none; background: none; } .mfp-container button.mfp-arrow-right { background: url("imgs/cursor-next.png") no-repeat center center; } .mfp-container button.mfp-arrow-right::before, .mfp-container button.mfp-arrow-right::after { display: none; } .mfp-container button.mfp-arrow-left { background: url("imgs/cursor-prev.png") no-repeat center center; } .mfp-container button.mfp-arrow-left::before, .mfp-container button.mfp-arrow-left::after { display: none; } .mfp-container button.mfp-close { visibility: hidden; } /* Contact Form 7 */ .wpcf7-form p { color: #757575; font-size: .9em; } .wpcf7-form p input { font-size: 1.2em; } .wpcf7-form-control-wrap { position: relative; } .wpcf7-form p:nth-of-type(1) { width: 50%; padding-right: 3%; float: left; } .wpcf7-form p:nth-of-type(2) { width: 50%; float: left; } #message h1 { display: block; float: none; margin: 20px 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px dotted rgba(0,0,0,0.1); } /* MAIN WRAPPER _____________________________________ */ #content { position: relative; z-index: 3; } #content::after { content: ""; display: block; clear: both; } .wrapper { width: 90%; margin: 0 auto; } /* HEADER _____________________________________ */ body.loading { height: 800px; overflow: hidden; } #loadscreen { position: fixed; top: 0; width: 100%; height: 100%; background: #03a9f4; z-index: 9999; display: none; } #loader { position: absolute; width: 30%; height: 5px; margin: auto; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,.2); } #loader span { display: block; height: 100%; background: white; -webkit-animation: loadanim 3s linear; -moz-animation: loadanim 3s linear; -o-animation: loadanim 3s linear; animation: loadanim 3s linear; } @-webkit-keyframes loadanim { 0% { width: 5%; } 100% { width: 100%; } } @-moz-keyframes loadanim { 0% { width: 5%; } 100% { width: 100%; } } @-o-keyframes loadanim { 0% { width: 5%; } 100% { width: 100%; } } @keyframes loadanim { 0% { width: 5%; } 100% { width: 100%; } } #header { display: block; position: fixed; top: 0; height: 50px; width: 100%; z-index: 200; margin-top: 3em; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #header::after { content: ""; display: block; clear: both; } #header.off-canvas { top: -70px; margin-top: 0; } body.admin-bar #header { top: 32px !important; } body.admin-bar #header.off-canvas { top: -70px !important; } body.admin-bar #header.off-canvas.fixed { top: 32px !important; } #header.fixed { top: 0px; background: white; box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); margin-top: 0; } #logo { height: auto; position: absolute; margin: 0; opacity: 1; font-weight: normal; font-size: 1.5em; z-index: 900; } #logo a { text-decoration: none; line-height: 50px; color: #212121; white-space: nowrap; } #logo img { display: block; vertical-align: middle; margin: 0; max-height: 50px; margin-top: 10px; } #logo img.dark { display: none; } #header.fixed #logo img { display: none; } #header.fixed #logo img.dark { display: block; } #header nav { float: right; position: relative; z-index: 200; } #header nav ul { float: right; text-align: right; line-height: 50px; margin: 0; padding: 0; position: relative; opacity: 1; } #header nav ul li { display: inline-block; position: relative; vertical-align: top; overflow: hidden; margin: 0 .3em; } #header nav ul li.menu-item-has-children, #header nav ul.sub-menu li.menu-item-has-children { overflow: visible; } #header nav > ul > li.menu-item-has-children > .rippling { opacity: 0; } #header nav ul li a { display: block; font-size: 0.8em; color: white; font-weight: normal; padding: 0 1em; text-decoration: none; text-transform: uppercase; white-space: nowrap; font-family: "Montserrat", sans-serif; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #header nav > ul > li > a:hover { text-decoration: none; background: #D32F2F; color: white !important; } #header nav > ul > li.menu-item-has-children > a:hover, #header nav > ul > li > a.active-parent { color: white !important; background: #D32F2F; } #header nav ul.sub-menu { display: none; position: absolute; top: 50px; left: 0; margin: 0; z-index: 999; float: none; text-align: left; background: #D32F2F; } #header nav ul.sub-menu li { display: block; padding: 0; margin: 0; overflow: hidden; } #header nav ul.sub-menu li:last-child a { border-bottom: 0; } #header nav ul.sub-menu li a { display: block; padding: 1em 2em 1em 1em; width: auto; line-height: 1.4; color: white; text-decoration: none; font-style: normal;user-select: none;/*prevent text selection*/ position: relative;} #header nav ul.sub-menu ul { z-index: 1000; left: auto; width: 100%; right: -100%; top: 0; } /* hover animation */ #header nav ul.sub-menu li a::before { content: ""; display: block; position: absolute; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.1); z-index: -1; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } #header nav ul.sub-menu li a:hover::before { -webkit-transform: scale(1); transform: scale(1); } /* click ripple animation */ .rippling { display: block; position: absolute; border-radius: 100%; transform: scale(0); } /*animation effect*/ .rippling.animate { -webkit-animation: ripple 0.65s linear; -moz-animation: ripple 0.65s linear; -o-animation: ripple 0.65s linear; animation: ripple 0.65s linear; } @-webkit-keyframes ripple { 100% {opacity: 0; transform: scale(2.5);}/*scale the element to 250% to safely cover the entire link and fade it out*/ } @-moz-keyframes ripple { 100% {opacity: 0; transform: scale(2.5);} } @-o-keyframes ripple { 100% {opacity: 0; transform: scale(2.5);} } @keyframes ripple { 100% {opacity: 0; transform: scale(2.5);} } #header nav #menu-burger { display: none; float: right; position: relative; line-height: 50px; padding: 0 0 0 1.5em; z-index: 202; color: white; vertical-align: middle; } #header nav #menu-burger:hover { color: #D32F2F; } #header nav #searchicon { float: right; position: relative; line-height: 50px; padding: 0 .3em 0 1em; z-index: 202; } #header nav #searchicon i { display: inline-block; font-size: .9em; color: white; position: relative; cursor: pointer; z-index: 9; vertical-align: middle; margin: -6px 0 0 0; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #header nav #searchicon:hover i { color: #D32F2F; } #header nav #searchicon form#searchbar { position: absolute; width: 0; right: 0; bottom: 2px; opacity: 0; } #header nav form#searchbar #searchbar-submit { visibility: hidden; } #header nav form#searchbar #searchbar-input { } #header nav #cart-menu-icon { float: right; line-height: 50px; display: inline-block; padding: 0 .5em 0 1em; vertical-align: middle; opacity: 1; color: white; font-size: .8em; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #header nav #cart-menu-icon:hover { color: #D32F2F; } #header nav #cart-menu-icon sup { background: #D32F2F; color: white; display: inline-block; width: 16px; height: 16px; border-radius: 8px; text-align: center; line-height: 16px; position: relative; vertical-align: middle; top: -1em; font-size: .6em; font-weight: bold; } /*colors in header*/ #header.fixed nav > ul > li > a { color: #212121; } #header.fixed nav #cart-menu-icon { color: #757575; } #header.fixed nav #searchicon i { color: #757575; } #header.fixed nav #menu-burger { color: #757575; } /* large header slider */ .layout-no-sidebar .featured-image-or-gallery { height: 100vh; width: 112%; position: relative; margin: -3em 0 7em -6%; z-index: 100; }/* homepage slider */ .layout-no-sidebar .featured-image-or-gallery .gallery { height: 100vh; } #header-background { position: absolute; top: 0; width: 100%; height: 400px; background: #03a9f4; background-size: cover; background-position: 0 33%; z-index: 1; -webkit-transition: background .1s ease; -moz-transition: background .1s ease; -ms-transition: background .1s ease; -o-transition: background .1s ease; transition: background .1s ease; } body.admin-bar #header-background { top: 32px; } .map-page-template #header-background img { width: auto; max-width: 9999px; position: static; margin: 0; } /* fix for map zoom control */ #gmap, #map-content { width: 100%; height: 100%; } /* CONTENT ELEMENTS _____________________________________ */ #page-title { width: 90%; height: 400px; line-height: 400px; margin: 0 0 0 5%; position: relative; color: white; } #page-title > div { vertical-align: bottom; position: absolute; left: 0; bottom: 3em; } #page-title h1 { display: inline-block; vertical-align: bottom; line-height: 1.1; } #page-title h2#page-excerpt { font-size: 1.2em; line-height: 1.4; opacity: .75; font-weight: normal; } .map-page-template #page-title { visibility: hidden; } .home.singular #page-title { display: none; } .entry-content { clear: both; float: left; width: 75%; min-height: 600px; margin: 0 0 -3em 0; padding: 3em 0 0 0; background: white; }/* default - the same as .layout-sidebar .entry-content */ .layout-no-sidebar .entry-content { float: none; width: 100%; min-height: 400px; background: none; box-shadow: none; border: 0; margin: 0; } .layout-no-sidebar .entry-content::after { content: ""; display: block; clear: both; } .layout-no-sidebar .entry-sidebar { display: none; } .entry-content .wrapper { padding: 0 0 2em 1.4em; } .layout-no-sidebar .entry-content .wrapper { padding: 0; } .entry-sidebar { float: left; width: 20%; margin: 4em 0 2em 0; padding: 0; font-size: .9em; } article { clear: both; margin: 0; width: 100%; position: relative; } article iframe { width: 100%; } .loop-pagination, .woocommerce-pagination { clear: both; margin: 0 0 2em 0; } .loop-pagination span.current, .woocommerce-pagination span.current {display: inline-block; padding: .4em 1em; font-weight: normal; font-size: 0.95em; line-height: 1.6; text-align: center; letter-spacing: 0.05em; cursor: pointer; border: 0; border-radius: 3px; text-decoration: none; background: transparent; margin: 2px 0; text-transform: uppercase; background: #EF9A9A; color: white; } .woocommerce-pagination ul { padding: 0 !important; } .woocommerce-pagination li { display: inline; list-style: none; } .loop-pagination a, .woocommerce-pagination a { display: inline-block; padding: .4em 1em; font-weight: normal; font-size: 0.95em; line-height: 1.6; text-align: center; letter-spacing: 0.05em; cursor: pointer; border: 0; border-radius: 3px; text-decoration: none; background: transparent; margin: 2px 0; text-transform: uppercase; background: #D32F2F; color: white; box-shadow: 0 2px 0 rgba(0,0,0,0.25); } .loop-pagination a:hover, .woocommerce-pagination a:hover { color: white; background: #C62828; } .blog.layout-sidebar .entry-content { } .layout-sidebar blockquote { background: transparent; box-shadow: none; font-size: 1.2em; font-style: italic; margin: 0; padding: 0 0 0 2em; } .plural article { width: 100%; margin: 0 0 4em 0; } .plural article .featured-image-or-gallery { width: 20%; float: left; margin: -1em 2em 2em 0; } .plural article .featured-image-or-gallery img { border-radius: 50%; } .plural article h1 { font-size: 1.5em; } .plural article .entry-summary { position: relative; padding: .3em 0 0 0; } .plural article .entry-meta { font-size: .8em; padding: 0 0 1em 0; } .plural article .entry-meta p { display: inline-block; padding: .2em .7em; vertical-align: bottom; background: #D5D5D5; margin: 0 1em 0 0; position: relative; } .plural article .entry-meta p::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 28px; background: rgba(0,0,0,.05); } .plural article .entry-meta p i { margin-right: .5em; } .plural article .entry-meta .entry-author img { width: 24px; height: 24px; border-radius: 12px; margin: 0; vertical-align: bottom; position: relative; top: 1em; } .plural article .entry-meta-heading { display: none; } .plural article h1 a { color: #212121; } .plural article .entry-meta p.entry-category { text-align: center; padding: 0; background: none; margin: 0 .7em 0 0; } .plural article .entry-meta p.entry-category::before { display: none; } .plural article .entry-summary p.entry-category { display: none; } .plural article p.entry-category a { display: inline-block; padding: .8em 1em; height: 27px; margin: 0 .3em 0 0; text-transform: uppercase; font-size: .8em; color: white; background: #D32F2F; font-weight: bold; line-height: 1.1; position: relative; z-index: 1; } .plural article p.entry-category a::before { content: ""; display: block; position: absolute; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.1); z-index: -1; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .plural article p.entry-category a:hover::before { -webkit-transform: scale(1); transform: scale(1); } .plural article .entry-meta p.entry-comments { background: rgba(0,0,0,.05); } .plural article .entry-comments i { font-size: .85em; padding: 0 .2em 0 0; color: #757575; } .plural article .entry-summary p.small a { border-bottom: 1px dotted; } .plural article .entry-summary p.small a:hover, p.entry-category a:hover { text-decoration: none; } .blog-masonry article { width: 30%; margin: 0 2.5% 2.5em 0; display: inline-block; clear: none; background: white; box-shadow: 1px 3px 3px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.15); font-size: .9em; vertical-align: top; white-space: normal; } .blog-masonry article .featured-image-or-gallery { margin: 0 0 -3.5em 0; width: 100%; float: none; height: auto; position: static; } .blog-masonry article .featured-image-or-gallery::after { content: ""; display: block; width: 100%; background: repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAQAAABT0/yuAAAAP0lEQVQYV2NgGAWsREMGbqIhgzDRkEGGaMigTjRkMGQw/P8fRMIgTh6D/X8wYLCHQDw8CAcmgI+HpJQQIEEpAFoUmbWiZzKmAAAAAElFTkSuQmCC) 0 0; background-position-x: 1px; height: 16px; top: -18px; position: relative; z-index: 22; } .blog-masonry article .featured-image-or-gallery img { border-radius: 0; } .blog-masonry article h1 { font-size: 1.2em; } .blog-masonry article .entry-summary { padding: 0 1em 3em; text-align: center; } .blog-masonry article .entry-meta { background: #F5F5F5; border-top: 1px solid #D5D5D5; padding: .6em 1.5em; font-size: .9em; position: absolute; bottom: 0; width: 100%; height: 40px; } .blog-masonry article .entry-meta p { display: inline-block; padding: 0 1em 0 0; margin: 0; vertical-align: middle; background: none; } .plural .blog-masonry article .entry-meta p::before { display: none; } .blog-masonry article .entry-meta p.entry-category { display: none !important; } .blog-masonry article .entry-meta p.entry-comments { background: none; } .blog-masonry article .entry-meta .entry-author img { width: 30px; height: 30px; border-radius: 15px; top: 0; } .blog-masonry article .entry-meta-heading { display: none; } .blog-masonry article h1 a { color: #212121; } .blog-masonry article .entry-summary p.entry-category { display: inline-block !important; text-align: center; margin: 1em 0 0 0; padding: 0 0 2em 0; position: relative; z-index: 25; } .blog-masonry article p.entry-category a { display: inline-block; padding: .8em 1em; height: 27px; font-family: "Montserrat", sans-serif; text-transform: uppercase; font-size: .8em; color: white; background: #D32F2F; font-weight: normal; line-height: 1; } .blog-masonry article .entry-meta p.entry-comments { float: right; padding: 0; } .blog-masonry article .entry-comments i { font-size: .85em; position: relative; top: -1px; padding: 0 .2em 0 0; } .blog #blog-stickies { background: #D5D5D5; overflow: hidden; margin: -3em 0 4em 0; padding: 4em 2em; } .blog #blog-stickies .wrapper { width: 103%; } .blog #blog-stickies article { display: inline-block; clear: none; background: white; box-shadow: 1px 3px 3px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.15); font-size: .9em; vertical-align: top; width: 30%; margin: 0 2.6% 0 0; white-space: normal; } .blog #blog-stickies article h1 { font-size: 1.2em; padding: 1em; } .blog #blog-stickies article .featured-image-or-gallery { width: 100%; float: none; margin: 0 0 -4.5em 0; } .blog #blog-stickies article .featured-image-or-gallery img { border-radius: 0; } .blog #blog-stickies article .featured-image-or-gallery::after { content: ""; display: block; width: 100%; background: repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAQAAABT0/yuAAAAP0lEQVQYV2NgGAWsREMGbqIhgzDRkEGGaMigTjRkMGQw/P8fRMIgTh6D/X8wYLCHQDw8CAcmgI+HpJQQIEEpAFoUmbWiZzKmAAAAAElFTkSuQmCC) 0 0; background-position-x: 1px; height: 16px; top: -18px; position: relative; z-index: 22; } .blog #blog-stickies article .entry-summary { padding: 1em; text-align: center; min-height: 80px; } .blog #blog-stickies article .entry-summary p, .blog #blog-stickies article footer.entry-meta { display: none; } .blog #blog-stickies article .entry-summary p.entry-category { display: block; position: relative; top: 0; text-align: center; margin: 1em 0 0 0; padding: 0 0 1em 0; z-index: 25; } .blog-alternative #blog-stickies { margin: -3em 0 4em 0; padding: 0; overflow: hidden; } .blog-alternative #blog-stickies::after { content: ""; display: block; clear: both; } .blog-alternative #blog-stickies .wrapper { width: 100.2%; padding: 0; } .blog-alternative #blog-stickies article { display: inline-block; width: 33.33%; float: right; margin: 0; position: relative; left: -2px; } .blog-alternative #blog-stickies article:first-child { width: 66.6%; float: left; left: 0; } .blog-alternative #blog-stickies article h1 { font-size: 1.5em; text-align: left; padding: 0; } .blog-alternative #blog-stickies article .entry-meta { display: none; } .blog-alternative #blog-stickies article .featured-image-or-gallery { width: 100%; float: none; margin: 0; } .blog-alternative #blog-stickies article .featured-image-or-gallery img { margin: 0 0 -5px 0; -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .blog-alternative #blog-stickies article .featured-image-or-gallery a { display: inline-block; width: 100%; height: 100%; margin: 0 -5px -5px 0; overflow: hidden; } .blog-alternative #blog-stickies article:hover .featured-image-or-gallery a img { -webkit-transition: -webkit-transform .3s; transition: transform .3s; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .blog-alternative #blog-stickies article .featured-image-or-gallery::after { display: none; } .blog-alternative #blog-stickies article .entry-summary { padding: 2em; text-align: center; position: absolute; bottom: -1px; width: 100%; background: rgba(255, 255, 255, 0.5); } .blog-alternative #blog-stickies article .entry-summary p { display: none; } .blog-alternative #blog-stickies article .entry-summary p.entry-category { display: block; position: relative; top: 0; text-align: left; padding: 0 0 1em 0; z-index: 25; } .entry-sidebar .entry-meta { clear: both; position: relative; margin: 0 0 3em 0; padding: 0 0 2em 3em; border-bottom: 1px solid #D5D5D5; font-size: 1.1em; } .entry-sidebar .entry-meta ul { list-style: none; padding: 0; } .entry-sidebar .entry-meta ul li { display: inline-block; padding: 0 1em 0 0; } .entry-author { margin: 0 0 1em 0; } .entry-author img { width: 60px; height: 60px; border-radius: 30px; margin: 0 .5em 0 0; vertical-align: middle; } .entry-meta-heading { text-transform: uppercase; display: block; font-size: .8em; } .tagcloud a { display: inline-block; font-size: 1em !important; padding: 0 4px 5px 0; } form#searchbar { width: 100%; position: relative; } form#searchbar #searchbar-submit { position: absolute; right: -12px; top: -2px; background: none; border: 0; font-size: 1.1em; color: black; box-shadow: none;padding: 0; } .featured-image-or-gallery { margin: 0; width: 100%; } .featured-image-or-gallery img { margin: 0; width: 100%; } .layout-sidebar .featured-image-or-gallery { margin: -3em 0 3em; } .post-pagination { width: 100%; list-style: none; height: 108px; border-top: 1px solid #D5D5D5; } .post-pagination::after { content: ""; display: block; clear: both; } .post-pagination > div { width: 50%; height: 100%; float: left; text-align: left; position: relative; } .post-pagination > div:hover { background: #f5f5f5; } .post-pagination > div.next-post { float: right; text-align: right; border-left: 1px solid #D5D5D5; } .post-pagination > div > a { display: block; position: relative; width: 100%; padding: 0 2.5em; font-size: 1.3em; overflow: hidden; top: 42%; transform: translateY(-50%); } .post-pagination > div > a > strong { display: block; color: black; opacity: .5; font-size: .8em; } .post-pagination > div > a > strong > span { font-size: 2em; position: relative; top: 4px; margin: 0; } .post-pagination > div.next-post > span { left: auto; right: .5em; } #comments { clear: both; border-top: 1px solid #D5D5D5; margin: 2em 0 0 0; padding: 4em 0; background: #f5f5f5; } #comments h2 { text-transform: uppercase; position: relative; bottom: .8em; font-size: 1.1em; } #commentform .form-author, #commentform .form-email { width: 33%; float: left; padding-right: 3%; } #commentform .form-url { width: 33%; float: left; } #commentform .form-textarea { clear: both; } #commentform p input { position: relative; } h3#comments-number { display: inline-block; text-transform: uppercase; font-size: .8em; float: right; margin: -3.5em 0 0 0; } ol.comment-list { list-style: none; padding: 0 0 2em 0; } ol.comment-list li { margin: 0 0 2.5em 80px; position: relative; } .comment-list img.avatar { position: absolute; left: -80px; width: 60px; height: 60px; border-radius: 30px; } .comment-meta, p.log-in-out, .form-allowed-tags { font-size: .8em; color: #757575; padding-bottom: .5em; } .form-allowed-tags { padding-bottom: 2em; } .comment-meta div { display: inline-block; padding-right: 1em; } .comment-content { font-size: .9em; } .comment-reply-link { font-size: .9em; position: absolute; right: 0; top: -.3em; opacity: 0; } .comment-reply-link::before { content: "\21a9"; padding: 0 .5em; font-size: 1.3em; vertical-align: middle; } ol.comment-list li:hover .comment-reply-link { opacity: 1; } #respond { max-width: 800px; } #respond h3 { text-transform: uppercase; font-size: .9em; } .a404 { font-size: 18em; float: right; margin: -.3em 0 0 0; letter-spacing: -0.04em; } .password-protected-form-wrapper { display: inline-block; margin: 0; } .post-password-form { padding: 1.7em 3em 0; background: #D32F2F; margin: 0; border-radius: 50px; height: 100px; } .post-password-form label { display: inline; color: white; } .post-password-form label input { width: 250px; margin: 0 .5em 0 1em; } .post-password-form input[type=submit] { display: inline; border-color: white; color: white; } .circle-icon { display: inline-block; border: 2px solid; width: 64px; height: 64px; border-radius: 32px; line-height: 48px; font-size: 2.4em; text-align: center; position: relative; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .circle-icon:hover { color: white; box-shadow: 0 0 0 2px grey; } .circle-icon::before { content: ""; display: block; position: absolute; left: -2px; top: -2px; width: 64px; height: 64px; border-radius: 32px; background: #757575; z-index: -1; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-backface-visibility: hidden; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .circle-icon:hover::before { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .circle-icon.small, .small .circle-icon { width: 48px; height: 48px; border-radius: 24px; line-height: 42px; font-size: 1.8em; } .circle-icon.small::before, .small .circle-icon::before { width: 48px; height: 48px; border-radius: 24px; } .wp-caption-text { font-size: .9em; margin: 0 0 2em 0; padding: 0 0 .5em 0; font-style: italic; } .sticky {} .bypostauthor {} #wp-calendar caption { padding: 0 0 .5em 0; } /* === Whistles: Tabs, accordions === */ .whistles-tabs ul, ul.tabs { list-style: none; padding: 0; margin: 0; clear: both; text-align: center; } .whistles-tabs ul li, ul.tabs li { display: inline-block; vertical-align: bottom; margin: 0 -4px 0 0; position: relative; overflow: hidden; } .whistles-tabs ul li a, ul.tabs li a { display: block; color: #757575; padding: 1em 2em; text-align: center; font-size: .85em; text-decoration: none; text-transform: uppercase; position: relative; border-bottom: 1px solid #E5E5E5; font-family: "Montserrat", sans-serif; } .whistles-tabs ul li a::after, ul.tabs li a::after {content: ""; display: block; border-bottom: 3px solid #D32F2F; width: 0; position: absolute; bottom: 0; left: 0; right: 0; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .whistles-tabs ul li[aria-selected="true"] a::after, ul.tabs li.active a::after { width: 100%; -webkit-transform: scale(1); transform: scale(1); } .whistles-tabs ul li a:hover::after, ul.tabs li a:hover { width: 100%; -webkit-transform: scale(1); transform: scale(1); } .whistles-tabs ul li[aria-selected="true"] a:hover, .whistles-tabs ul li[aria-selected="true"] a, ul.tabs li.active a:hover, ul.tabs li.active a { color: #212121; } .whistles-tabs ul li a:hover, ul.tabs li a:hover { color: #212121; background: transparent; } .whistles-tabs-wrap > .whistle-content { padding: 3em 0 2em; position: relative; opacity: 1; } .whistles-accordion .whistle-title, .whistles-toggle .whistle-title { color: #D32F2F; padding: .5em 0; margin: -.4em 0 1em 0; font-size: .85em; text-transform: uppercase; border-bottom: 1px solid #E5E5E5; cursor: pointer; position: relative; font-weight: bold; } .whistle-title i { color: #757575; font-size: 1.6em; padding: 0 .5em 0 0; position: relative; top: -2px; } .whistles-accordion .whistle-title::before, .whistles-toggle .whistle-title::before { content: "-"; float: right; font-size: 1.3em; } .whistles-accordion .whistle-title[aria-selected="true"]::before, .whistles-toggle .whistle-title[aria-selected="true"]::before { content: "+"; } .whistles-accordion .whistle-title::after, .whistles-toggle .whistle-title::after {content: ""; display: block; border-bottom: 1px solid #D32F2F; width: 0; position: absolute; bottom: 0; left: 0; right: 0; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 25% 0; transform-origin: 25% 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .whistles-accordion .whistle-title:hover::after, .whistles-toggle .whistle-title:hover::after { width: 100%; -webkit-transform: scale(1); transform: scale(1); } /* === Grid columns. === */ .column-grid { margin: 1em 0 2em 0; } .column-grid-2 .column-span-1 { margin-right: 5%; width: 46.5%; } .column-grid-2 .column-span-1.column-last { margin-right: 0; } /* GALLERY, PORTFOLIO ______________________________________ */ #menu-portfolio-items ul { list-style: none; text-align: center; padding: 0; margin: 0 0 4px 0; } #menu-portfolio-items ul li { display: inline-block; vertical-align: bottom; margin: 0 -4px 0 0; position: relative; overflow: hidden; } #menu-portfolio-items ul li a { display: block; color: #757575; font-family: "Montserrat", sans-serif; padding: 1em 2em; text-align: center; font-size: .85em; text-decoration: none; text-transform: uppercase; position: relative; } #menu-portfolio-items ul li a:hover { color: #212121; } #menu-portfolio-items ul li a.active { color: #D32F2F; } #menu-portfolio-items ul li a::after { content: ""; display: block; border-bottom: 3px solid #D32F2F; width: 0; position: absolute; bottom: 0; left: 0; right: 0; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } #menu-portfolio-items ul li a.active::after { width: 100%; -webkit-transform: scale(1); transform: scale(1); } #menu-portfolio-items ul li a:hover::after { width: 100%; -webkit-transform: scale(1); transform: scale(1); } .gallery { clear: both; margin: 0 0 2em 0; width: 100%; } .gallery .gallery-row { display: inline; } .gallery::after { content:""; display: block; clear: both; } .gallery-item { position: relative; display: block; width: 49%; float: left; clear: none; margin: 0 0 0 0; overflow: hidden; vertical-align: top; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .gallery-icon { padding: 0; width: 100%; height: auto; } .gallery-icon a { width: 100%; height: auto; display: inline-block; position: relative; vertical-align: top; } .gallery-icon a::after { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: 0; background: #D32F2F; opacity: 0; z-index: 7; border-radius: 50%; width: 200%; height: 200%; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 25% 100%; transform-origin: 25% 100%; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; } .gallery-icon a:hover::after { opacity: 0.7; -webkit-transform: scale(2); transform: scale(2); -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; } .gallery-icon.link a { cursor: pointer; } .gallery-icon img { width: 100%; height: auto; margin: 0; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } .card .gallery-icon img { width: 100%; } .gallery-caption { display: inline-block; float: none; vertical-align: middle; width: 100%; padding: 0 2em; text-align: left; z-index: 8; position: absolute; left: 0; bottom: 2em; opacity: 0; pointer-events: none; color: white; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } .gallery-caption img { width: auto; } .gallery-caption h2, .gallery-caption h3, .gallery-caption h4, .gallery-caption h5, .gallery-caption h6 { margin-top: 0; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-item svg { position: absolute; right: 1em; top: 1em; width: 24px; height: 24px; z-index: 9; opacity: 0; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -ms-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } .gallery-item svg path { fill: #ffffff; stroke: none; stroke-width: 0; } .gallery-item:hover svg { opacity: 1; } .gallery-item:hover svg path#arr1 { -moz-animation: bringarr1 .6s ease; -o-animation: bringarr1 .6s ease; -webkit-animation: bringarr1 .6s ease; animation: bringarr1 .6s ease; } @-moz-keyframes bringarr1 { 0% { transform: translate(5px,-5px); } 100% { transform: translate(0,0); }} @-o-keyframes bringarr1 { 0% { transform: translate(5px,-5px); } 100% { transform: translate(0,0); }} @-webkit-keyframes bringarr1 { 0% { transform: translate(5px,-5px); } 100% { transform: translate(0,0); }} @keyframes bringarr1 { 0% { transform: translate(5px,-5px); } 100% { transform: translate(0,0); }} .gallery-item:hover svg path#arr2 { -moz-animation: bringarr2 .6s ease; -o-animation: bringarr2 .6s ease; -webkit-animation: bringarr2 .6s ease; animation: bringarr2 .6s ease; } @-moz-keyframes bringarr2 { 0% { transform: translate(-5px,5px); } 100% { transform: translate(0,0); }} @-o-keyframes bringarr2 { 0% { transform: translate(-5px,5px); } 100% { transform: translate(0,0); }} @-webkit-keyframes bringarr2 { 0% { transform: translate(-5px,5px); } 100% { transform: translate(0,0); }} @keyframes bringarr2 { 0% { transform: translate(-5px,5px); } 100% { transform: translate(0,0); }} .gallery-item.col-3 { width: 31.7%; } .gallery-item.col-4 { width: 23.5%; } .gallery-item.col-5 { width: 18.8%; } .gallery-item.col-6 { width: 15.6%; } .gallery-item.col-7 { width: 13.2%; } .gallery-item.col-8 { width: 11.5%; } .gallery-item.col-9 { width: 10.2%; } .masonry-grid-gallery.gallery { width: 103%; margin: 0 0 1em 0; margin: 0 0 2em 0; clear: both; } .masonry-grid-gallery .gallery-item { margin: 0 0 7px 0; } .masonry-grid-gallery .gallery-item:hover { box-shadow: 0 10px 20px 0 rgba(0,0,0,.2); z-index: 2222; } .masonry-grid-gallery .gallery-icon a { overflow: hidden; margin-bottom: -5px; } .masonry-grid-gallery .gallery-icon .rippling { background: rgba(255,255,255,.75); z-index: 7; } .masonry-grid-gallery .gallery-caption h3 { text-transform: uppercase; font-family: "Montserrat", sans-serif; font-size: 1.1em; line-height: 1.1; margin: 0 0 .3em 0; font-weight: normal; } .masonry-grid-gallery .gallery-caption p { padding: 0; opacity: 0.75; font-size: .9em; font-style: italic; } .gallery-item.col-5 .gallery-caption, .gallery-item.col-6 .gallery-caption, .gallery-item.col-7 .gallery-caption, .gallery-item.col-8 .gallery-caption, .gallery-item.col-9 .gallery-caption, .layout-sidebar .gallery-item.col-4 { font-size: .8em; } .gallery-item.col-6 .gallery-caption, .gallery-item.col-7 .gallery-caption, .gallery-item.col-8 .gallery-caption, .gallery-item.col-9 .gallery-caption, .layout-sidebar .gallery-item.col-4 { display: none; } .slideshow-gallery.gallery { width: 100%; height: 700px; margin: 0 0 2em 0; position: relative; background: #e5e5e5; z-index: 2; font-size: 108%; } .slideshow-gallery .gallery-item { width: 100%; height: 100%; display: none; } .slideshow-gallery .gallery-item:first-child { display: block; } .slideshow-gallery .gallery-icon { width: 100%; height: 100%; overflow: hidden; text-align: center; } .slideshow-gallery .gallery-icon img { width: auto; height: 100%; margin: 0 auto; min-width: 100%; } .slideshow-gallery .gallery-icon a { pointer-events: none; } .slideshow-gallery .gallery-icon a::after { display: none; } .slideshow-gallery .gallery-icon .header-video { position: absolute; width: 125%; height: 100%; left: -10%; top: 0; bottom: 0; right: 0; z-index: 2; } .slideshow-gallery .gallery-icon .header-video iframe { width: 110%; height: 110%; margin-left: -5%; } .slideshow-gallery .parallax .gallery-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; z-index: -1; } .slideshow-gallery .parallax .gallery-icon img { position: relative; max-width: 9999px; width: 1600px/*1600x875*/; height: auto; left: -20%; top: -100px; } .slideshow-gallery .gallery-caption { max-height: 400px; padding-top: 6%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; pointer-events: auto; } .slideshow-prev, .slideshow-next { width: 15%; height: 100%; display: block; position: absolute; top: 0; z-index: 3; } .slideshow-prev { left: -40px; cursor: url('imgs/cursor-prev.png'), auto; } .slideshow-next { right: -40px; cursor: url('imgs/cursor-next.png'), auto; } .scrolldown { position: absolute; left: 0; right: 0; bottom: 3em; width: 100px; margin: 0 auto; cursor: pointer; font-size: .75em; color: white; line-height: 1; font-style: italic; padding: 0 0 0 28px; z-index: 99; } .scrolldown::after { content: ""; position: absolute; left: 0; margin-top: -12px; width: 20px; height: 32px; border: 2px solid white; border-radius: 14px 14px 16px 16px; } .scrolldown::before { content: ""; width: 2px; height: 8px; background: white; border-radius: 6px; position: absolute; left: 9px; top: 0; margin-top: -7px; -webkit-animation: wiggle .8s infinite normal ease-out; animation: wiggle .8s infinite normal ease-out; } .scrolldown.stopwiggling { -webkit-animation: none; animation: none; } @-webkit-keyframes wiggle { 0% { top: 0; } 50% { top: 3px; } 100% { top: 0; }} @keyframes wiggle { 0% { top: 0; } 50% { top: 3px; } 100% { top: 0; }} .slideline { position: relative; left: 0; top: 0; } .slideshow-gallery.gallery .loader { position: absolute; display: block; top: 0; width: 0%; height: 3px; background: #d32f2f; z-index: 9; -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; } .slideshow-gallery.gallery .loader.loading { -webkit-animation: loadanim 6s linear; -moz-animation: loadanim 6s linear; -o-animation: loadanim 6s linear; animation: loadanim 6s linear; } .gallery-archive.gallery { width: 103%; } .gallery-archive .gallery-item { width: 22%; float: left; margin: 0 3% 2em 0; position: relative; box-shadow: 1px 3px 3px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.15); } .gallery-archive .gallery-item img { width: 100%; height: auto; } .gallery-archive .gallery-caption { position: static; padding: 1em 1.5em; background: white; color: #212121; opacity: 1; } .gallery-archive .gallery-caption h3 { font-size: 1.3em; text-transform: uppercase; } .jcarousel-sixcolumn { position: relative; overflow: hidden; clear: both; margin: 3em 0 0 0; } .jcarousel-sixcolumn ul { list-style: none; white-space: nowrap; padding: 0; margin: 0; position: relative; } .jcarousel-sixcolumn ul li { display: inline-block; width: 16.66%; padding: 0 1.5%; } .jcarousel-sixcolumn ul li img { max-width: 84% !important; } /* WOO COMMERCE ______________________________________ */ .woocommerce-result-count { display: inline-block; float: left; } .woocommerce-ordering { float: right; font-size: 0.9em; margin: -.5em 0 0 0; } .woocommerce-breadcrumb { display: none; } .entry-content h1.page-title { display: none; } .products { clear: both; list-style: none; width: 104%; padding: 0 !important; } .products::after { content: ""; display: block; clear: both; } .products li.product { float: left; width: 30%; margin: 0 3% 1.5em 0; padding: 0 0 1em 0; position: relative; border: 1px solid #D5D5D5; box-shadow: 1px 3px 3px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.15); text-align: center; background: white; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .products li.product:nth-child(3n+1) { clear: both; } .products li.product:hover { box-shadow: 1px 5px 5px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.25); } .products li.product img { width: 100%; height: auto; margin: 0 0 1em 0; } .products li.product .price { display: block; } .products li.product .product-wrap { } .products li.product a h3 { color: #212121; margin-top: -.5em; } .products li.product a.button { opacity: 0; margin-top: -.4em; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; position: absolute; width: auto; display: inline-block; left: 50%; top: 50%; transform: translateX(-50%); white-space: nowrap; } .products li.product:hover a.button { height: auto; opacity: 1; margin-top: -.6em; } .product .onsale { position: absolute; width: 58px; height: 58px; border-radius: 29px; color: white; text-align: center; line-height: 58px; text-decoration: none; background: #D32F2F; box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); top: -12px; left: -15px; } .products .product:hover .onsale { box-shadow: 0 0 12px rgba(0,0,0,.24),0 4px 12px rgba(0,0,0,.32); } .products li.product a.button { background-color: white; } .products li.product a.button:hover { background: white !important; } .products li.product a.button.add_to_cart_button::after { content: "\21b7"; padding: 0 0 0 .5em; font-size: 1.1em; vertical-align: middle; } .product { position: relative; } .product .single-product-main-image, .product .images { width: 45%; float: left; margin: 0 2% 1em 0; } .product .single-product-main-image img, .product .images img { width: 100%; height: auto; } .product .imgs { } .product .imgs img { width: 100%; height: auto; } .product .imgs .thumbnails img { width: 70px; } .product .entry-summary { width: 50%; float: right !important; display: block; } .product h3 { margin-bottom: 10px; } .product .price .amount { font-size: 1.3em; color: #0277BD; padding: 0 3px; } .product .price ins { text-decoration: none; } .product .price del .amount { font-size: 0.95em; color: #D32F2F; } .panel.entry-content { float: none; clear: both; width: 100%; background: none; box-shadow: none; margin: 2em 0; padding: 0; } .panel.entry-content h2, .related.products h2 { font-size: 1.5em; } .product .cart { margin: 0 0 1em 0; } .product .cart::after { content: ""; display: block; clear: both; } .product .cart .quantity { display: inline-block; margin-top: -5px; border-bottom: 1px solid #E5E5E5; } .product .cart button { float: right; margin-top: -.5em; } input.plus, input.minus { background: transparent; box-shadow: none !important; border: 0; font-size: 1.5em; color: #388E3C; margin: 0; padding: 0 .3em; line-height: 1; } input.plus:hover, input.minus:hover { color: #0277BD; } input.qty { text-align: center; position: relative; top: 1px; width: 100px; } .product .cart.variations_form .price { float: left; margin: 3px 15px 0 -4px; } .product .cart.variations_form table { margin: 0 0 10px -2px; width: 101%; } .product .cart.variations_form table td { background: none; border: 0; vertical-align: text-top; } a.reset_variations { float: right; padding: 4px; } .button.checkout { background: #388E3C; } .button.checkout:hover, .button.checkout:focus { color: white; background-color: #388E3C; } .product_meta { font-size: 0.9em; } .woocommerce.widget .price_label { float: right; margin: 1em 0 0 0; } .woocommerce.widget ul.product_list_widget::after { content: ""; display: block; clear: both; } .woocommerce.widget ul.product_list_widget li { display: block; clear: both; line-height: 1.8; } .woocommerce.widget ul.product_list_widget li a { display: block; font-size: 1.1em; } .woocommerce.widget ul.product_list_widget img { float: left; width: 60px; height: auto; margin: 0 1em 1em 0; clear: both; } .woocommerce.widget ul.product_list_widget .amount { font-size: 1.3em; color: #0277BD; } .woocommerce.widget ul.product_list_widget ins { text-decoration: none; } .woocommerce.widget ul.product_list_widget ins .amount { display: inline; } .woocommerce.widget ul.product_list_widget del { display: inline-block; padding: 0 5px 0 0; } .woocommerce.widget ul.product_list_widget del .amount { font-size: 0.95em; color: #D32F2F; } .woocommerce.widget ul.product_list_widget .variation { display: none; } .woocommerce.widget .total { margin: 1em 0 -.5em 0; font-size: 1.3em; } .woocommerce.widget .buttons .button { padding-left: 1em; padding-right: 1em; } .woocommerce-message { padding: 2em 1.5em 1em 3em !important; background: #FFF59D; margin: 0 0 2em 0; } .woocommerce-message .button { float: right; margin: -.5em 0 0.5em .5em; } .woocommerce-message::after { content: ""; display: block; clear: both; } .woocommerce-info { padding: 7px 7px 8px 15px !important; border: 1px solid #E2D64C; background: #F3F3AC; position: relative; font-size: 0.95em; border-radius: 4px; color: #A39634; margin: 0 0 20px 0; } .woocommerce-info a { float: right; } .woocommerce-info::after { content: ""; display: block; clear: both; } .woocommerce-tabs { clear: both; margin: 2em 0; } .woocommerce-tabs ul.tabs { text-align: left; } #content #shop .woocommerce-tabs .entry-content { width: 100%; margin-bottom: 40px; clear: both; } #review_form_wrapper { margin: 3em 0 0 0; } #review_form_wrapper form > p.comment-form-author { width: 48%; padding-right: 3%; float: left; } #review_form_wrapper form > p.comment-form-email { width: 48%; padding-right: 0; float: left; } .woocommerce #comments { background: none; padding: 0; border-top: 0; } .woocommerce #comments ol { list-style: none; padding: 0; } .woocommerce #comments ol li { background: white; padding: 1em 2em 0 2em; margin: 0 0 1em 80px; clear: both; font-size: .9em; } .woocommerce #comments ol li::after { content: ""; display: block; clear: both; } .woocommerce #comments ol li img { position: absolute; left: 0; border-radius: 50%; margin: 0 1em 1em 0; } .woocommerce #comments ol li .comment-text { display: inline; } .woocommerce #comments ol li .meta { display: inline-block; font-size: .9em; padding-bottom: .3em; margin-bottom: 1em; } .woocommerce #comments ol li .star-rating { top: 10px; right: -10px; } .related.products { clear: both; width: 100%; } .woocommerce table th { text-align: left; } .woocommerce table td { text-align: left; } .woocommerce table td img { width: 90px; height: auto; } .woocommerce table.cart .coupon { width: 50%; float: left; } .woocommerce table.cart .coupon .input-text, input#coupon_code { width: 50%; } .checkout_coupon p { display: inline; } .woocommerce table.cart .actions > p { text-align: right; } a.remove { text-decoration: none; color: #D32F2F; background: white; display: inline-block; position: relative; left: -4px; top: -4px; width: 16px; height: 16px; border-radius: 8px; text-align: center; line-height: 16px; margin-bottom: -1em; } .woocommerce table.cart .actions > input.button { float: right; margin: 34px 0 0 10px; padding: 3px 15px 4px 15px; } .woocommerce table.cart .actions > input.button.checkout-button { float: right; margin: 28px 0 0 10px; padding: 6px 18px 7px 18px; } .woocommerce .cart_totals { width: 73%; float: right; margin: 0 0 2em 0; } .woocommerce .cart_totals table th { text-align: right; } .woocommerce .cart_totals table td { text-align: left; } .order-total .amount { font-size: 1.2em; } .shipping_calculator { width: 40%; float: right; clear: both; } .shipping_calculator h2 { font-size: 1em; } .shipping_calculator p.form-row { float: left; margin: 0 2% 0 0; width: 47%; } .wc-proceed-to-checkout a.button { float: right; padding: 1em 3em; } #payment ul { list-style: none; padding: 0 !important; } #payment label, label.checkbox { display: inline-block; } #payment img { vertical-align: middle; } .checkout .col-1 { width: 45%; float: left; } .checkout .col-2 { width: 45%; float: right; } input#place_order { margin: 2em 0; padding: 1em 3em; color: black; } #order_review_heading { clear: both; } .woocommerce .star-rating,.woocommerce-page .star-rating{float:right;overflow:hidden;position:relative;height:1em;line-height:1em;font-size:1em;width:5.4em;}.woocommerce .star-rating::before,.woocommerce-page .star-rating::before{content:"\2605\2605\2605\2605\2605";color:#D5D5D5;float:left;top:0;left:0;position:absolute}.woocommerce .star-rating span,.woocommerce-page .star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}.woocommerce .star-rating span::before,.woocommerce-page .star-rating span::before{content:"\2605\2605\2605\2605\2605";top:0;position:absolute;left:0;color:#FBC02D;}.woocommerce .woocommerce-product-rating,.woocommerce-page .woocommerce-product-rating{line-height:2em;display:block;float: right;}.woocommerce .woocommerce-product-rating .star-rating,.woocommerce-page .woocommerce-product-rating .star-rating{margin:.5em 4px 0 0;float:left;font-style: normal;}.woocommerce .products .star-rating,.woocommerce-page .products .star-rating{display:block;margin:0 auto .5em;float:none;left:.5em}.woocommerce .hreview-aggregate .star-rating,.woocommerce-page .hreview-aggregate .star-rating{margin:1em 0 0 0} .woocommerce p.stars,.woocommerce-page p.stars{position:relative;height:1em;font-size:1em}.woocommerce p.stars a,.woocommerce-page p.stars a{display:inline-block;font-weight:700;margin-right:1em;text-indent:-9999px;position:relative}.woocommerce p.stars a:last-child,.woocommerce-page p.stars a:last-child{border-right:0}.woocommerce p.stars a.star-1,.woocommerce p.stars a.star-2,.woocommerce p.stars a.star-3,.woocommerce p.stars a.star-4,.woocommerce p.stars a.star-5,.woocommerce-page p.stars a.star-1,.woocommerce-page p.stars a.star-2,.woocommerce-page p.stars a.star-3,.woocommerce-page p.stars a.star-4,.woocommerce-page p.stars a.star-5{border-right:1px solid rgba(0,0,0,0.1)}.woocommerce p.stars a.star-1::after,.woocommerce p.stars a.star-2::after,.woocommerce p.stars a.star-3::after,.woocommerce p.stars a.star-4::after,.woocommerce p.stars a.star-5::after,.woocommerce-page p.stars a.star-1::after,.woocommerce-page p.stars a.star-2::after,.woocommerce-page p.stars a.star-3::after,.woocommerce-page p.stars a.star-4::after,.woocommerce-page p.stars a.star-5::after{font-family:"FontAwesome";text-indent:0;position:absolute;top:0;left:0;padding-right:1em;font-weight:normal;}.woocommerce p.stars a.star-1,.woocommerce-page p.stars a.star-1{width:2em}.woocommerce p.stars a.star-1::after,.woocommerce-page p.stars a.star-1::after{content:"\2606"}.woocommerce p.stars a.star-1:hover::after,.woocommerce p.stars a.star-1.active::after,.woocommerce-page p.stars a.star-1:hover::after,.woocommerce-page p.stars a.star-1.active::after{content:"\2605"}.woocommerce p.stars a.star-2,.woocommerce-page p.stars a.star-2{width:3em}.woocommerce p.stars a.star-2::after,.woocommerce-page p.stars a.star-2::after{content:"\2606\2606"}.woocommerce p.stars a.star-2:hover::after,.woocommerce p.stars a.star-2.active::after,.woocommerce-page p.stars a.star-2:hover::after,.woocommerce-page p.stars a.star-2.active::after{content:"\2605\2605"}.woocommerce p.stars a.star-3,.woocommerce-page p.stars a.star-3{width:4em}.woocommerce p.stars a.star-3::after,.woocommerce-page p.stars a.star-3::after{content:"\2606\2606\2606"}.woocommerce p.stars a.star-3:hover::after,.woocommerce p.stars a.star-3.active::after,.woocommerce-page p.stars a.star-3:hover::after,.woocommerce-page p.stars a.star-3.active::after{content:"\2605\2605\2605"}.woocommerce p.stars a.star-4,.woocommerce-page p.stars a.star-4{width:5em}.woocommerce p.stars a.star-4::after,.woocommerce-page p.stars a.star-4::after{content:"\2606\2606\2606\2606"}.woocommerce p.stars a.star-4:hover::after,.woocommerce p.stars a.star-4.active::after,.woocommerce-page p.stars a.star-4:hover::after,.woocommerce-page p.stars a.star-4.active::after{content:"\2605\2605\2605\2605"}.woocommerce p.stars a.star-5,.woocommerce-page p.stars a.star-5{width:6em;border:0}.woocommerce p.stars a.star-5::after,.woocommerce-page p.stars a.star-5::after{content:"\2606\2606\2606\2606\2606"}.woocommerce p.stars a.star-5:hover::after,.woocommerce p.stars a.star-5.active::after,.woocommerce-page p.stars a.star-5:hover::after,.woocommerce-page p.stars a.star-5.active::after{content:"\2605\2605\2605\2605\2605"} /* SIDEBAR, WIDGETS ______________________________________ */ .widget { margin: 0 0 5em 0; } .entry-sidebar .widget { clear: both; position: relative; margin: 0 0 5em 0; padding: 0 0 2em 3em; } .entry-sidebar .widget .wrapper { padding: 0; width: 100%; } .entry-sidebar .widget:last-child { border: 0; margin: 0; } .entry-sidebar .widget h3 { font-weight: normal; font-family: "Montserrat"; font-size: 1em; text-transform: uppercase; margin-bottom: 2em; } .first-word { opacity: .75; font-weight: normal; } .entry-sidebar .widget ul { list-style: none; padding: 0; line-height: 1.5; } .entry-sidebar .widget li { display: block; padding: .2em 0; clear: both; } .entry-sidebar .widget li a:first-child { display: inline-block; } .entry-sidebar .widget li img { max-width: 100%; height: auto; margin-top: 0; border-radius: 50%; } .rsswidget img { margin: 2px 10px 0 0; } /* for rss icon */ .entry-sidebar .widget .entry-meta, .entry-sidebar .widget .post-date, .entry-sidebar .widget .rss-date { display: block; font-size: 0.9em; margin: 0 0 8px 0; } .entry-sidebar .widget p:last-child, .widget ul:last-child { padding-bottom: 0; } .entry-sidebar a:not(.button) { color: #212121; font-weight: normal; } #recentcomments li::before { content: "\e96e"; font-family: "icomoon"; font-size: .85em; padding: 0 1em 0 0; } .entry-sidebar .blog-widget { clear: both; background: none; padding: 0; margin: 0; } .entry-sidebar .blog-widget .post-thumb { width: 25%; margin: 0 1em 1em 0; float: left; } .entry-sidebar .blog-widget .post-thumb img { width: 100%; } .entry-sidebar .blog-widget .entry-summary { padding: 0 0 2em 0; display: table-cell; } .entry-sidebar .blog-widget p.entry-date { font-size: .8em; opacity: .75; } .entry-sidebar .blog-widget #searchbar, .entry-sidebar #searchbar { width: 94%; float: none; margin: 0 0 25px 0; } .entry-sidebar #searchbar #searchbar-submit i { padding-right: 0; } .woocommerce.widget .star-rating { float: none; } .woocommerce.widget #searchform input[type=text] { width: 60%; } .social-buttons > div { margin: 0 0 2em 0; } .entry-sidebar table th, .entry-sidebar table td { padding: .5em .2em; } .entry-sidebar select { background: transparent; } /* FOOTER _____________________________________ */ #footer { clear: both; background: #1B1B1B; width: 100%; color: white; font-size: 0.8em; line-height: 2; margin: 4em 0 0 0; padding: 0 0 1.5em 0; position: relative; z-index: 5; border-top: 4px solid #D32F2F; } #footer-widgets { padding: 4em 0 3em 0; } #footer-widgets::after { content: ""; display: block; clear: both; } #footer-widgets .widget { clear: none; float: left; width: 20%; padding-right: 5%; margin-bottom: 2em; position: relative; left: 5px; } #footer-widgets .widget:first-child { width: 30%; } #footer-widgets .widget:nth-child(2) { width: 30%; } #footer-widgets .widget h3 { margin-bottom: 1em; font-weight: normal; font-family: "Montserrat"; font-size: 1em; text-transform: uppercase; } #footer-widgets .widget h3 .first-word { opacity: .75; font-weight: normal; } #footer-widgets .widget ul { list-style: none; padding: 0; line-height: 2; } #footer-widgets .widget li { display: block; } #footer-widgets .widget li a:hover { text-decoration: underline; } #footer-widgets .widget li img { max-width: 100%; height: auto; margin-top: 2px; } #footer-widgets .widget .entry-meta, #footer-top .widget .post-date { display: block; font-size: 0.9em; margin: 0 0 .5em 0; } #footer a { color: #FBC02D; } #footer p { padding-bottom: .3em; clear: both; } #footer p.copyright { float: left; display: inline-block; opacity: .75; } ul.social-icons { list-style: none; margin: -.3em 0 1em 0; padding: 0; float: right; } ul.social-icons::after { content: ""; display: block; clear: both; } ul.social-icons li { display: block; float: left; padding: 0 0 0 7px; } ul.social-icons li a, ul.social-icons li a:hover { text-decoration: none; } ul.social-icons li a i { display: block; width: 24px !important; height: 24px !important; line-height: 26px; border-radius: 12px; background: #C7C7C7; text-align: center; color: white; padding: 0; text-shadow: none; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } ul.social-icons li a i.icon-twitter { background-color: #22BBF4; } ul.social-icons li a i.icon-facebook { background-color: #314987; } ul.social-icons li a i.icon-linkedin { background-color: #006DC0; } ul.social-icons li a i.icon-pinterest { background-color: #BE0D15; } ul.social-icons li a i.icon-google-plus { background-color: #D44730; } ul.social-icons li a i.icon-youtube { background-color: #D82924; } ul.social-icons li a i.icon-dribbble { background-color: #EA4685; } ul.social-icons li a i.icon-flickr { background-color: #1D75CE; } ul.social-icons li a i.icon-tumblr { background-color: #304E6A; } ul.social-icons li a i.icon-skype { background-color: #31C5EB; } ul.social-icons li a i.icon-instagram { background-color: #6C4639; } ul.social-icons li a:hover i { -moz-animation: spinHorizontal .5s linear; -o-animation: spinHorizontal .5s linear; -webkit-animation: spinHorizontal .5s linear; animation: spinHorizontal .5s linear; } @-webkit-keyframes spinHorizontal { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } } @-moz-keyframes spinHorizontal { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } } @-o-keyframes spinHorizontal { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } } @keyframes spinHorizontal { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } } #back-to-top-button { width: 48px; height: 48px; border-radius: 24px; background: #D32F2F; color: white !important; box-shadow: 0 0 6px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.16); position: absolute; right: 24px; top: -24px; text-align: center; line-height: 48px; font-size: 1.3em; z-index: 99; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #back-to-top-button:hover { box-shadow: 0 0 12px rgba(0,0,0,.24),0 4px 12px rgba(0,0,0,.32); } hr.rainbow { display: block; width: 100%; height: 1px; background: rgba(255,255,255,.08); margin: 0 0 2em 0; /*background: -webkit-gradient(linear, left top, right top, color-stop(0%, #D32F2F), color-stop(15%, #F57C00), color-stop(30%, #FBC02D), color-stop(50%, #388E3C), color-stop(65%, #00BCD4), color-stop(80%, #2196F3), color-stop(100%, #9C27B0));*/ } /* ISOTOPE TRANSITIONS _____________________________________ */ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height; -moz-transition-property: height; -ms-transition-property: height; -o-transition-property: height; transition-property: height; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /* RESPONSIVNESS _____________________________________ */ @media screen and (max-width: 1285px) { .entry-content .wrapper { padding: 4%; } .plural article .featured-image-or-gallery, .blog #blog-stickies article .featured-image-or-gallery, .blog-masonry #blog-stickies article .featured-image-or-gallery { height: auto; } } @media screen and (max-width: 990px) { /* 100% width, menu burger */ #page-title { font-size: 80%; } #header nav { z-index: 1000; } #header nav #menu-burger { display: inline-block; } #header nav > ul { width: 320px; height: 100%; background: white; text-align: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; float: none; display: none; overflow: auto !important; padding: 2em 0; } #header nav ul li { display: block; } #header nav ul.sub-menu { position: static; text-align: center; display: block !important; height: auto !important; background: transparent; } #header nav > ul > li > a { font-weight: bold; position: relative; color: #212121; } #header nav > ul li a:hover { background-color: #D5D5D5; } #header nav ul.sub-menu li { } #header nav ul.sub-menu li a, #header nav ul.sub-menu li:last-child a { color: #212121; padding: 1em; border-bottom: 1px solid #e5e5e5; } #header nav > ul > li.menu-item-has-children > a:hover, #header nav > ul > li > a.active-parent, #header nav ul.sub-menu { background: transparent !important; color: #212121 !important; } .layout-no-sidebar .featured-image-or-gallery, .layout-no-sidebar .featured-image-or-gallery .gallery { height: 600px; } .slideshow-gallery .gallery-icon img { max-width: 9999px; } .entry-content { width: 100%; float: none; } .entry-sidebar { clear: both; width: 50%; float: none; margin: 0 auto; } .column-grid-5 .column-span-1 { width: 28%; float: left; } .column-grid-5 .column-span-1:nth-child(3n+1) { clear: both; } .jcarousel-sixcolumn ul li { width: 25%; } } @media screen and (max-width: 680px) { /* one-column */ .gallery, .gallery-item { width: 100% !important; } .featured-image-or-gallery .slideshow-gallery .gallery-caption { font-size: 84%; } .featured-image-or-gallery #slideshow-thumbs { bottom: -64px; -ms-transform: scale(.8); -webkit-transform: scale(.8); transform: scale(.8); } .entry-sidebar { width: 100%; padding: 4em 5%; } .entry-content .wrapper { padding: 5%; } .column-grid .column { float: none !important; width: 100% !important; padding-right: 0; margin-bottom: 2em; } blockquote { margin-bottom: 4em; } .full-width-half { display: block; float: none !important; width: 100% !important; padding-left: 5%; } .jcarousel-sixcolumn ul li { width: 33.33%; } img.alignright,img.alignleft { float: none !important; padding-bottom: 0; } .justifyright { text-align: left; } .side-padding { padding-left: 5%; padding-right: 5%; } .products li.product { width: 46%; } .products li.product:nth-child(2n+1) { clear: both; } .products li.product:nth-child(3n+1) { clear: none; } .product .single-product-main-image, .product .images, .product .entry-summary { width: 100%; float: none; margin: 0 0 2em 0; } .woocommerce .woocommerce-product-rating, .woocommerce-page .woocommerce-product-rating { float: left; } p.price { clear: both; } .woocommerce #comments ol li .star-rating { float: none; margin-bottom: 2em; right: 0; } .entry-sidebar .widget { padding-left: 0; } .entry-sidebar .entry-meta { padding-left: 0; } #footer-widgets .widget:first-child { width: 100%; } #footer-widgets .widget:nth-child(2) { width: 50%; } #footer-widgets .widget { width: 25%; } ul.social-icons { float: none; padding: 1em 0; clear: both; } ul.social-icons li:first-child { padding-left: 0; } } @media screen and (max-width: 500px) { #content { font-size: 80%; } #header #logo.searchbar-expanded { opacity: 0; } .featured-image-or-gallery #slideshow-thumbs { bottom: -80px; } .slideshow-next, .slideshow-prev, .slideshow-bubble-prev, .slideshow-bubble-next { display: none; } .entry-content { background: none; box-shadow: none; } .entry-content .wrapper { padding: 2em 0; } .plural article, .blog-masonry article { width: 90% !important; margin: 0 0 2em 0 !important; float: none !important; display: block; left: 0; } .plural article .featured-image-or-gallery { width: 25%; margin: 0 1em 1em 0; height: auto; } .plural article .entry-summary p { clear: both; } .blog #blog-stickies .wrapper { width: 100%; padding: 0 5%; } .blog-masonry .entry-content > .wrapper { width: 100%; padding: 0 5%; } .blog-masonry article .featured-image-or-gallery { width: 100% !important; margin: 0 0 -3.5em 0; } .blog-masonry #blog-stickies { max-height: 9999px; margin: 0; } .jcarousel-sixcolumn ul li { width: 100%; } .post-pagination { height: auto; } .post-pagination > div { min-height: 108px; padding-top: 3em; width: 100%; float: none; } .products li.product { width: 98%; } .woocommerce-message { padding: 1.5em !important; } #footer-widgets .widget:first-child, #footer-widgets .widget:nth-child(2) { width: 100%; } #footer-widgets .widget { width: 50%; } #style-switcher { display: none; } }