/* Theme Name: Rife Free Description: Rife Free is a great portfolio and photography WP theme with 7 ready-to-use demo layouts. It is also perfect for business, blogging websites and for your shop because it is WooCommerce compatible. More cool features in the Rife theme are the: ✓ Writing Effect ✓ One Page Mode ✓ Mobile/Touch Friendly Image & Video Slider ✓ Bricks Gallery for Photographers ✓ Mega Menu ✓ Post Grid ✓ Google Fonts ✓ Hidden Sidebar and many more. Over 450 options to change in the Customizer and much more in each page, post, album or work. We also integrate Schema.org which helps your website be more visible to search engines. Elementor compatibility will help you make your great website even more natural. The theme is RTL and translation-ready (WPML). ★ Check our demos for more details: https://apollo13themes.com/rife/designs/ Author: Apollo13Themes Author URI: https://apollo13themes.com/ Theme URI: https://apollo13themes.com/rife/free/ License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Requires at least: 4.7 Tested up to: 6.3 Requires PHP: 5.3.0 Tags: e-commerce, portfolio, photography, two-columns, three-columns, left-sidebar, right-sidebar, grid-layout, translation-ready, sticky-post, post-formats, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, rtl-language-support Text Domain: rife-free Version: 2.4.17 */ /* ========================================================================== TABLE OF CONTENTS: General styles Preloader Forms Buttons WordPress default styles General layout Header tools Header menu general Header menu horizontal Header menu vertical Logo Header vertical Header vertical variant right Header horizontal general Header horizontal variants Top bar in header Top closable message Header search Menu overlay Footer Footer unravel effect Sidebar & widgets Colors in dark sidebars Title bar Content layout variants General content styles Post meta Posts navigation Comments & about author Add comment form Attachment page Posts list Pagination Works/Albums list Category filter Sidebar filter Single albums Works/Albums Navigation Single work Post lightbox Flickity A13 slider A13 sticky one page Things added to fullpage.js Image carousel tweak Typed js effect Visual Composer - various things Visual Composer extend Counter shortcode Visual Composer progress bar shortcode tweak Visual Composer tab shortcode tweak Post grid variants Testimonial shortcode Grid element for posts Grid element for products Grid element for works & albums Side menu effects Social icons Some group Transitions Post styles globals Responsive design ========================================================================== */ /* ========================================================================== General styles ========================================================================== */ /*! normalize.css v3.0.2 | 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,main,menu,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-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.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:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{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;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} a{ color: #222; text-decoration:none; } a:hover{ color: #222; text-decoration: underline; } table{ border: 1px solid #ccc; } th, td{ text-align: left; padding: 5px; border-top: 1px solid #ccc; } /* ============================================================================= Preloader ========================================================================== */ #preloader{ /*rtl:ignore*/ direction: ltr; position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index: 31999; /* makes sure it stays on top */ } .no-js #preloader{ display: none; } .preload-content{ height: 80px; width: 300px; /*padding-top: 120px;*/ position:absolute; left:50%; top:50%; margin: -40px 0 0 -150px; text-align: center; } .preloader-animation{ height: 120px; width: 100%; } a.skip-preloader, a.skip-preloader:hover{ display: none; color: #fff; text-shadow: 0 -2px 1px #000; font-size: 24px; transition: text-shadow .3s; } a.skip-preloader:hover{ text-shadow: 0 2px 1px #000; } /* ============================================================================= Forms ========================================================================== */ /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } select{ border: 1px solid #d4d4d4; color: #5b5b5b; padding: 9px 15px 7px; height: 40px; width: 100%; max-width: 450px; box-sizing: border-box; } input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="range"], input[type="date"], textarea{ border: 1px solid transparent; background-color: #f5f5f5; color: #5b5b5b; font-size: 12px; padding: 9px 15px 7px; height: 40px; width: 100%; max-width: 450px; box-sizing: border-box; -webkit-border-radius: 0; border-radius: 0; } textarea{ display: block; height: 136px; width: 100%; resize: vertical; /* Allow only vertical resizing of textareas. */ } /* FOCUS COLORS */ input[type="text"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="range"]:hover, input[type="date"]:hover, textarea:hover, input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="range"]:focus, input[type="date"]:focus, textarea:focus{ border-color: #d4d4d4; outline: none; } input.cptch_number{ text-align: center; } .error input, .error textarea{ border-color: #ea4f3b; } /* captcha plugin */ input[name=cptch_number]{ width: 40px !important; } /* contact form 7 full width inputs */ .wpcf7-form input[type="text"], .wpcf7-form input[type="password"], .wpcf7-form input[type="search"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="number"], .wpcf7-form input[type="range"], .wpcf7-form input[type="date"], .wpcf7-form select, .wpcf7-form textarea{ max-width: none; } /* wpForms full width inputs */ .wpforms-form input[type="text"], .wpforms-form input[type="password"], .wpforms-form input[type="search"], .wpforms-form input[type="email"], .wpforms-form input[type="url"], .wpforms-form input[type="tel"], .wpforms-form input[type="number"], .wpforms-form input[type="range"], .wpforms-form input[type="date"], .wpforms-form select, .wpforms-form textarea{ max-width: none; } /* ============================================================================= Buttons ========================================================================== */ input[type="submit"], button[type="submit"]{ background: #4E82F1 none; display: inline-block; border: none; box-shadow: none; cursor: pointer; color: #fff; font-size: 11px; font-weight: bold; text-align: center; text-transform: uppercase; text-shadow: none; line-height: 42px; white-space: nowrap; height: 40px; padding: 0 30px; -webkit-border-radius: 20px; border-radius: 20px; } input[type="submit"]:hover, input[type="submit"]:focus, button[type="submit"]:hover, button[type="submit"]:focus{ background: #4E6BD6 none; color: #fff; } /* ============================================================================= WordPress default styles ========================================================================== */ .alignnone { clear: both; margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { clear: both; display: block; margin: 5px auto; } .alignright{ /*rtl:ignore*/ float:right; margin: 5px 0 20px 20px; } .alignleft{ /*rtl:ignore*/ float: left; margin: 5px 20px 20px 0; } .wp-caption { background-color: #fff; max-width: 100%; /* Image does not overflow the content area */ text-align: center; box-sizing: border-box; } .wp-caption-text { line-height: 1.7; font-size: .85em; color: #999; padding: 0.5em 0; } /* gallery */ .gallery-item{ display: inline-block; text-align: left; vertical-align: top; margin: 0 0 1.5em; width: 50%; } .gallery-item a{ display: inline-block; max-width: 100%; } .gallery-item img { display: block; border: 2px solid #cfcfcf; opacity: 1; box-sizing: border-box; transition: opacity .5s; } .gallery-item a:hover img, .gallery-item a:focus img { opacity: .6; } .gallery-caption{ text-align: left; } .gallery-columns-1 .gallery-caption{ text-align: center; } /* gallery columns */ .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .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%; } blockquote{ margin: 1em 0 1em 0; padding-left: 40px; position: relative; } blockquote::before{ content: "\201C"; display: block; color: #7a7a7a; font-family: Georgia, serif; font-size: 60px; line-height: 1; position: absolute; left: 0; top: -8px; } blockquote cite { color: #999999; font-size: 16px; display: block; margin-top: 5px; } blockquote cite::before{ content: "\2014 \2009"; } hr{ border: none; border-bottom: 1px solid #dfdfdf; margin: .5em 0; } .sticky { /*Empty*/ } /* ========================================================================== General layout ========================================================================== */ html.show-scroll{ overflow-y: scroll; } html.show-scroll body{ overflow-y: auto; } html.post-lightbox-active body{ overflow-y: hidden; } body{ height: 100%; background-color: #444;/* dark background looks better then white when side menu is moving */ color: #7f7f7f; overflow-x: hidden; } .page-background{ overflow: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translate3d(0px, 0, 0);/* fix for scroll jiggling */ transform: translate3d(0px, 0, 0);/* fix for scroll jiggling */ } #mid{ overflow-x: hidden; /* Revo Slider fancy effects extending */ overflow-y: hidden; /* Revo Slider fancy effects extending */ position: relative; z-index: 2; /* above background */ /* padding is for full screen, rest for "to-move" class */ transition: transform .5s; } #header, #header.a13-light-variant, #header.a13-dark-variant{ box-shadow: 0 0 12px rgba(0, 0, 0, 0.09); background-color: #fff; } .mobile-menu-open.header-vertical #header, .mobile-menu-open.header-horizontal #header{ z-index: 21; } #footer{ position: relative; z-index: 10; } .default404 .page-background, .password-protected .page-background{ background-size: cover; background-color: #000; } /* elements printed AFTER FOOTER(positioned absolute) and plugins styles */ #content-overlay{ position: fixed; top: 0; left: 0; width: 0; height: 0; background: rgba(0,0,0,0.5); opacity: 0; z-index: 20; transition: opacity .5s, transform .5s, width .1s .5s, height .1s .5s; } .mobile-menu-open #content-overlay, .side-menu-open #content-overlay{ width: 100%; height: 100%; opacity: 1; transition: opacity .5s, transform .5s; } #basket-menu{ position: absolute; top: 0; z-index: 19; /* above header, footer, content */ width: 240px; padding: 40px; display: none; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.09); transform: translateY(-50px); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s, transform .5s; } #basket-menu.show{ transform: translateY(0); opacity: 1; visibility: visible; transition: opacity .5s, transform .5s; } @media only screen and (min-width: 1025px) { .header-vertical #basket-menu{ /*rtl:ignore*/ transform: translateX(100%); } .header-side-right #basket-menu{ /*rtl:ignore*/ transform: translateX(-100%); } .header-vertical #basket-menu.show{ transform: translateX(0); } } #side-menu{ position: fixed; top: 0; bottom: 0; /*rtl:ignore*/ left: 0; z-index: 30; /* above header, footer, content, overlay */ width: 320px; background-color: #000; height: 100%; overflow: auto; overscroll-behavior: contain; } .admin-bar #side-menu{ top: 32px; height: calc(100% - 32px); } #side-menu.at-right{ /*rtl:ignore*/ left: auto; /*rtl:ignore*/ right: 0; } #side-menu div.scroll-wrap{ padding: 40px; } body.side-menu-open #mid{ overflow-x: hidden;/* #col-mask was affecting opened sidebar if it was one of those that appear from "under" page(z-index: 0) */ } /* layout bordered */ .theme-borders{ display: none; } .site-layout-bordered .theme-borders{ display: block; } .theme-borders div{ position: fixed; z-index: 1003; /* below lightbox but above most elements */ } .theme-borders .top-border{ top: 0; left: 0; width: 100%; height: 30px; } .admin-bar .theme-borders .top-border{ top: 32px; } .theme-borders .right-border{ top: 0; /*rtl:ignore*/ right: 0; height: 100%; width: 30px; } .theme-borders .bottom-border{ bottom: 0; left: 0; width: 100%; height: 30px; } .theme-borders .left-border{ top: 0; /*rtl:ignore*/ left: 0; height: 100%; width: 30px; } .no-border-top .theme-borders .top-border, .no-border-right .theme-borders .right-border, .no-border-bottom .theme-borders .bottom-border, .no-border-left .theme-borders .left-border{ display: none; height: auto; /* so JavaScript will not return dumb results */ width: auto; } .theme-borders .right-border{ top: 0; /*rtl:ignore*/ right: 0; height: 100%; width: 30px; } .theme-borders .bottom-border{ bottom: 0; left: 0; width: 100%; height: 30px; } .theme-borders .left-border{ top: 0; /*rtl:ignore*/ left: 0; height: 100%; width: 30px; } .site-layout-bordered .whole-layout{ padding: 30px; box-sizing: border-box; /* mainly for slider in album */ } .no-border-top .whole-layout{ padding-top: 0; } .no-border-right .whole-layout{ /*rtl:ignore*/padding-right: 0; } .no-border-bottom .whole-layout{ padding-bottom: 0; } .no-border-left .whole-layout{ /*rtl:ignore*/padding-left: 0; } .site-layout-bordered #side-menu{ /*rtl:ignore*/ margin-left: 30px; margin-top: 30px; margin-bottom: 30px; height: calc(100% - 60px); } .admin-bar.site-layout-bordered #side-menu{ height: calc(100% - 92px); } .site-layout-bordered.no-border-top #side-menu{ margin-top: 0; height: calc(100% - 30px); } .site-layout-bordered.no-border-bottom #side-menu{ margin-bottom: 0; height: calc(100% - 30px); } .admin-bar.site-layout-bordered.no-border-top #side-menu, .admin-bar.site-layout-bordered.no-border-bottom #side-menu{ height: calc(100% - 62px); } .admin-bar.site-layout-bordered.no-border-top.no-border-bottom #side-menu{ height: calc(100% - 32px); } .site-layout-bordered.no-border-left #side-menu{ /*rtl:ignore*/ margin-left: 0; } .site-layout-bordered #side-menu.at-right{ /*rtl:ignore*/ margin-left: 0; /*rtl:ignore*/ margin-right: 30px; } .site-layout-bordered.no-border-right #side-menu.at-right{ /*rtl:ignore*/ margin-right: 0; } /* layout boxed */ .site-layout-boxed .whole-layout{ max-width: 1240px; margin: 0 auto; } /* when admin bar */ .admin-bar .whole-layout{ margin-top: 32px; } /* cursors */ .cursor-grab{ cursor: -webkit-grab; cursor: grab; } .cursor-grabbing{ cursor: move;/* fallback */ cursor: -webkit-grabbing; cursor: grabbing; } /* to top */ a.to-top{ background-color: #524F51; outline: none !important; width: 40px; height: 40px; position: fixed; bottom: 100px; right: 40px; z-index: 1000; -webkit-border-radius: 20px; border-radius: 20px; color: #ccc; text-align: center; line-height: 38px; font-size: 13px; opacity: 0; visibility: hidden; transition: background-color 0.3s, color 0.3s, opacity 0.5s, visibility 0s 0.5s; } a.to-top.show{ opacity: 1; visibility: visible; transition: background-color 0.3s, color 0.3s, opacity 0.5s; } a.to-top::after { content: ''; position: absolute; top: -20px; left: -20px; bottom: -20px; right: -20px; background: inherit; -webkit-border-radius: 40px; border-radius: 40px; z-index: -1; opacity: 0.4; -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); } a.to-top:hover { transition: background-color 0.1s 0.3s, color 0.1s 0.3s, opacity 0.5s, visibility 0s 0.5s; color: #fff; text-decoration: none; background-color: #000; -webkit-animation: anim-moema-1 0.3s forwards; animation: anim-moema-1 0.3s forwards; } a.to-top:hover::after { -webkit-animation: anim-moema-2 0.3s 0.3s forwards; animation: anim-moema-2 0.3s 0.3s forwards; } .lt-ie10 a.to-top::after{ display: none; } @-webkit-keyframes anim-moema-1 { 60% { -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); } 85% { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes anim-moema-1 { 60% { -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); } 85% { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes anim-moema-2 { to { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes anim-moema-2 { to { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* PLUGINS */ #qm{ /* Query monitor visibility in this kind of layout */ z-index: 101; position: relative; } /* Elementor editing */ html.elementor-html #mid:hover{ z-index: 20; } #masthead, .container-elementor-header{ position: relative; z-index: 11; } #colophon, .container-elementor-footer{ position: relative; z-index: 10; } /* Elementor 3.x fix */ .elementor-element.elementor-products-grid ul.products .grid-master { display: none; } /* lightGallery ligthbox */ .lg-sub-html{ background-color: transparent; } .lg-sub-html .customHtml h4, .lg-sub-html .customHtml .description{ background-color: rgba(0,0,0,0.78); display: block; max-width: 300px; margin: 0 auto; padding: 10px; border-radius: 3px; } .lg-sub-html .customHtml .description{ max-width: 500px; } .lg-sub-html .customHtml h4:empty, .lg-sub-html .customHtml .description:empty{ display: none; } .customHtml > h4{ color: #fff; } .customHtml{ height: auto; } div.vc-mg-item-desc{ display: none; } /* center too small thumbs */ .lg-outer .lg-thumb-item img { position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; height: auto; } /* admin bar interferes when lightbox is open */ .lg-backdrop{ z-index: 100000!important; } .lg-outer{ /*rtl:ignore*/ direction: ltr;/* rtl support */ z-index: 100010!important;; } /* ========================================================================== Header tools ========================================================================== */ #header-tools{ min-height: 26px; color: #444; } #header-tools.only-menu{ /* we don't want to touch display property, but still hide it */ clip: rect(1px, 1px, 1px, 1px); position: absolute; top: 0; left: 0; visibility: hidden; height: 1px; overflow: hidden; opacity: 0; } #header-tools .tool{ display: inline-block; vertical-align: middle; color: #e5e5e5; text-align: center; font-size: 16px; line-height: 26px; cursor: pointer; transition: background-color .3s, color .3s; } #header-tools .tool a{ transition: color .3s; } #header-tools button{ height: 26px; width: 36px; background-color: transparent; border: none; padding: 0 5px; } /* FireFox 63 loses focus styles on button, when button styles are changed */ #header-tools button:-moz-focusring{ outline: 1px dotted; } #header-tools .tool:hover, #header-tools .tool.highlight, #header-tools .tool.active{ color: #4d4d4d; } #header-tools .tool::before{ display: block; } #header-tools #mobile-menu-opener{ font-size: 18px; display: none; } /* basket counter */ #basket-menu-switch{ position: relative; } #basket-items-count{ position: absolute; top: -5px; left: 18px; min-width: 15px; line-height: 15px; font-size: 9px; font-weight: bold; text-align: center; color: #fff; font-family: 'Open Sans', arial, sans-serif; background-color: #F64747; -webkit-border-radius: 2px; border-radius: 2px; } #basket-items-count.zero{ display: none; } /* language switcher */ #header-tools .language-switcher{ position: relative; } #header-tools .languages{ display: none; position: absolute; z-index: 10; top: 100%; left: 0; list-style-type: none; min-width: 26px; padding: 0 5px; margin: 0; text-transform: uppercase; outline: 1px solid; background-color: #fff; transition: background-color 0.3s; } #header-tools .open .languages{ display: block; } #header-tools .language-switcher button{ min-width: 36px; width: auto; text-transform: uppercase; } #header-tools .language-switcher.codes img{ margin-right: 5px; } /* button */ .tools_button{ display: inline-block; height: 27px; line-height: 27px; text-transform: uppercase; text-align: center; font-size: 12px; font-weight: bold; padding: 0 10px; margin-left: 10px; border: 1px solid #E5E5E5; -webkit-border-radius: 3px; border-radius: 3px; transition: all .3s; box-sizing: border-box; } .tools_button:hover{ text-decoration: none; } /* animated icons */ #header-tools .tool.hamburger{ position: relative; margin: 0 5px; } .hamburger i{ display: block; position: absolute; top: 50%; left: 5px; right: 5px; height: 2px; width: calc(100% - 10px); background-color: #000; transition: background-color 0.3s; } .hamburger i::before, .hamburger i::after{ position: absolute; display: block; left: 0; width: 100%; height: 2px; background-color: #000; content: ""; transition: background-color 0.3s; } .hamburger i::before{ top: -6px; } .hamburger i::after{ bottom: -6px; } /* transform to X effect */ .hamburger--efx i::before, .hamburger--efx i::after{ transition-duration: 0.3s; transition-delay: 0.3s, 0s, 0s; } .hamburger--efx i::before{ transition-property: top, background-color, transform; } .hamburger--efx i::after{ transition-property: bottom, background-color, transform; } /* active state */ .hamburger--efx.active i{ background-color: transparent !important; } .hamburger--efx.active i::before{ top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .hamburger--efx.active i::after{ bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .hamburger--efx.active i::before, .hamburger--efx.active i::after{ transition-delay: 0s, 0.3s, 0.3s; } /* transform to X2 effect */ .hamburger--efx2 i::before, .hamburger--efx2 i::after{ transition-duration: .3s; transition-delay: .3s, 0s, 0s; } .hamburger--efx2 i::before{ transition-property: top, background-color, transform; } .hamburger--efx2 i::after{ transition-property: bottom, background-color, transform; } /* active state */ .hamburger--efx2 i{ background-color: transparent !important; } .hamburger--efx2.active i::before{ -webkit-transform: rotateZ(135deg) scaleX(1.1) translate(4px, -4px); -ms-transform: rotateZ(135deg) scaleX(1.1) translate(4px, -4px); transform: rotateZ(135deg) scaleX(1.1) translate(4px, -4px); } .hamburger--efx2.active i::after{ -webkit-transform: rotateZ(-135deg) scaleX(1.1) translate(4px, 4px); -ms-transform: rotateZ(-135deg) scaleX(1.1) translate(4px, 4px); transform: rotateZ(-135deg) scaleX(1.1) translate(4px, 4px); } /* transform to X3 effect */ .hamburger--efx3 i::before, .hamburger--efx3 i::after{ transition-duration: .3s; transition-delay: .3s, 0s, 0s; } .hamburger--efx3 i::before, .hamburger--efx3 i::after{ transition-property: background-color, transform; } /* active state */ .hamburger--efx3 i{ background-color: transparent !important; } .hamburger--efx3.active i::before{ -webkit-transform: rotateZ(45deg) scaleX(1.1) translate(4px, 3px); -ms-transform: rotateZ(45deg) scaleX(1.1) translate(4px, 3px); transform: rotateZ(45deg) scaleX(1.1) translate(4px, 3px); } .hamburger--efx3.active i::after{ -webkit-transform: rotateZ(-45deg) scaleX(1.1) translate(5px, -4px); -ms-transform: rotateZ(-45deg) scaleX(1.1) translate(5px, -4px); transform: rotateZ(-45deg) scaleX(1.1) translate(5px, -4px); } /* transform to Slider effect */ .hamburger--efslider i{ top: 7px; transition-timing-function: ease; transition-duration: .3s; transition-property: transform, background-color; } .hamburger--efslider i::before{ top: 12px; } .hamburger--efslider i::after{ bottom: -6px; } .hamburger--efslider i::before, .hamburger--efslider i::after{ transition-duration: .3s; transition-property: background-color, transform, width, height; } /* active state */ .hamburger--efslider.active i{ -webkit-transform: rotateZ(-45deg) translate(-4px, 4px); -ms-transform: rotateZ(-45deg) translate(-4px, 4px); transform: rotateZ(-45deg) translate(-4px, 4px); } .hamburger--efslider.active i::before{ -webkit-transform: rotateZ(90deg) scaleX(1.05) translate(-11px, 0); -ms-transform: rotateZ(90deg) scaleX(1.05) translate(-11px, 0); transform: rotateZ(90deg) scaleX(1.05) translate(-11px, 0); } .hamburger--efslider.active i::after{ -webkit-transform: rotateZ(45deg) translate(-60px, -7px); -ms-transform: rotateZ(45deg) translate(-60px, -7px); transform: rotateZ(45deg) translate(-60px, -7px); background-color: transparent !important; width: 0; height: 0; } /* transform to <-- effect */ .hamburger--efla i{ transition: background-color 0.3s, transform 0.3s; } .hamburger--efla i::before{ left: auto; right: 0; -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; transition: background-color 0.3s, transform 0.3s, width 0.3s, top 0.3s; } .hamburger--efla i::after{ left: auto; right: 0; -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; transition: background-color 0.3s, transform 0.3s, width 0.3s, bottom 0.3s; } /* active state, i.e. menu open */ .hamburger--efla.active i{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .hamburger--efla.active i::before, .hamburger--efla.active i::after{ width: 32%; } .hamburger--efla.active i::before{ top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .hamburger--efla.active i::after{ bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* transform to --> effect */ .hamburger--efra i{ transition: background-color 0.3s, transform 0.3s; } .hamburger--efra i::before{ -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; transition: background-color 0.3s, transform 0.3s, width 0.3s, top 0.3s; } .hamburger--efra i::after{ -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; transition: background-color 0.3s, transform 0.3s, width 0.3s, bottom 0.3s; } /* active state, i.e. menu open */ .hamburger--efra.active i{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .hamburger--efra.active i::before, .hamburger--efra.active i::after{ width: 32%; } .hamburger--efra.active i::before{ top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .hamburger--efra.active i::after{ bottom: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* ========================================================================== Header menu general ========================================================================== */ .top-menu, .top-menu ul{ list-style: none; margin: 0; padding: 0; } .top-menu li { position: relative; min-height: 22px; /* place for sub-mark */ font-size: 14px; } .top-menu li a, .top-menu li span.title{ /* span.title only to gain color and block */ color: #000; display: block; text-decoration: none; } .top-menu > li > a, .top-menu > li > span.title{ position: relative; transition: background-color .5s, color .5s, line-height .5s, height .5s; } /* hover and active */ .top-menu a:hover, .top-menu li.menu-parent-item:hover > span.title, .top-menu li.open > a, .top-menu li.open > span.title, .top-menu li.current-menu-item > a, .top-menu li.current-menu-ancestor > a, .top-menu li.current-menu-item > span.title, .top-menu li.current-menu-ancestor > span.title{ color: #444; } .top-menu li a i { /* icon */ width: 15px; text-align: center; } /* margin for icon */ .top-menu span i + span, .top-menu a i + span{ margin-left: 8px; } .top-menu span span i, .top-menu a span i{ margin-right: 8px; } /* sub menu mark */ .top-menu i.sub-mark{ height: 26px; width: 26px; display: inline-block; position: absolute; top: 0; cursor: pointer; color: #666; } .top-menu i.sub-mark::before{ line-height: 16px; height: 16px; width: 100%; display: block; text-align: center; font-size: 14px; position: absolute; right: 0; top: 50%; margin-top: -8px; } .top-menu.opener-icons-off i.sub-mark{ display: none; } .top-menu li.menu-parent-item:hover > span.title + i.sub-mark, .top-menu i.sub-mark:hover, .top-menu li.open > i.sub-mark{ color: #fff; } /* not linkable sub parent */ .top-menu li.menu-parent-item > span.title{ cursor: pointer; } /* when effect for menu is added */ .top-menu.with-effect a em, .top-menu.with-effect span.title em{ font-style: normal; } /* next levels */ .top-menu ul{ display: none; padding: 30px 0; } .top-menu li li{ font-size: 12px; } /* keep submenu open */ .top-menu .current-menu-ancestor.to-open > ul{ display: block; } /* menu item with rollover icon */ .top-menu > li.hidden-icon > span.title, .top-menu > li.hidden-icon > a{ overflow: hidden; height: 30px; /* needed for hidden icons to behave proper */ } .top-menu > li.hidden-icon > span.title i, .top-menu > li.hidden-icon > a i{ position: absolute; top: -50%; left: 50%; transform: translate(-50%, -50%); transition: top .3s; } .top-menu > li.hidden-icon > span.title span, .top-menu > li.hidden-icon > a span{ position: relative; top: 0; transition: top .3s; } .top-menu li.hidden-icon > span i + span, .top-menu li.hidden-icon > a i + span { margin-left: 0; } .top-menu li.hidden-icon:hover > a i, .top-menu li.hidden-icon.menu-parent-item:hover > span.title i, .top-menu li.hidden-icon.open > a i, .top-menu li.hidden-icon.open > span.title i, .top-menu li.hidden-icon.current-menu-item > a i, .top-menu li.hidden-icon.current-menu-ancestor > a i, .top-menu li.hidden-icon.current-menu-item > span.title i, .top-menu li.hidden-icon.current-menu-ancestor > span.title i{ top: 50%; } .top-menu li.hidden-icon:hover > a span, .top-menu li.hidden-icon.menu-parent-item:hover > span.title span, .top-menu li.hidden-icon.open > a span, .top-menu li.hidden-icon.open > span.title span, .top-menu li.hidden-icon.current-menu-item > a span, .top-menu li.hidden-icon.current-menu-ancestor > a span, .top-menu li.hidden-icon.current-menu-item > span.title span, .top-menu li.hidden-icon.current-menu-ancestor > span.title span{ top: 200%; } /********/ /* END OF TOP MENU */ /* WPML FLAGS IN MENU */ .menu-item-language img.iclflag { margin-right: 7px; margin-bottom: -1px; } /********/ /* MEGA MENU STYLE */ .mega-menu > ul{ position: absolute; z-index: 250; min-width: 200px; width: 840px; padding: 0; } .mega-menu.mm_columns_3 > ul{ width: 630px; } .mega-menu.mm_columns_2 > ul{ width: 420px; } .mega-menu > ul > li{ background-color: transparent !important; float: left; width: 25%; box-sizing: border-box; } .mega-menu > ul > li::before{ content: ""; width: 1px; background-color: #fff; display: block; position: absolute; top: 30px; bottom: 30px; } .mega-menu > ul > li:first-child::before{ display: none; } .top-menu li.mega-menu > ul > li{ /* stronger selector */ padding-right: 0; } .mm_columns_2 > ul > li{ width: 50%; } .mm_columns_3 > ul > li{ width: 33.33%; } .mega-menu > ul > li.mm_new_row{ clear: left; } .mega-menu > ul ul{ position: static; display: block!important; margin: 0; box-shadow: none; min-width: 0; padding-top: 0; } .top-menu .mega-menu > ul > li > span.title, .top-menu .mega-menu > ul > li > a{ font-size: 14px; font-weight: bold; margin: 30px 0 10px; } .top-menu .mega-menu > ul > li > span.title{ cursor: default; } .top-menu .mega-menu > ul > li > span.title, .top-menu .mega-menu ul li > a{ /* both group titles and links in submenu of megamenu*/ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .top-menu .mm_dont_show > span.title, .top-menu .mm_dont_show > a, .top-menu .mega-menu > ul > li > span.title .sub-mark, .top-menu .mega-menu > ul > li > .sub-mark{ display: none; } /* HTML ITEM */ .mega-menu .html_item{ padding: 0; } .mega-menu > ul .html_item ul{ display: none !important; } .top-menu .mega-menu > ul > li.html_item > a{ padding: 0; } /********/ /* END OF MEGA MENU STYLE */ /* ========================================================================== Header menu horizontal ========================================================================== */ .header-horizontal .navigation-bar{ width: 100%; padding: 0 15px; position: relative; /* so submenus can be positioned properly */ } .header-horizontal .top-menu{ text-align: right; font-size: 0;/* no space between items */ } .header-horizontal .top-menu li { white-space: nowrap; } /* sub menu mark */ .header-horizontal .top-menu i.sub-mark{ right: 0; height: 100%; } /* First level */ .header-horizontal .top-menu > li{ float: none; display: inline-block; vertical-align: bottom; text-align: left; } .header-horizontal .top-menu > li > a, .header-horizontal .top-menu > li > span.title{ padding: 0 10px; /* spacing in most top level */ } .header-horizontal .top-menu.opener-icons-on li.menu-parent-item{ padding-right: 26px; /* menu opener */ } .header-horizontal .top-menu.opener-icons-on > li.menu-parent-item > a, .header-horizontal .top-menu.opener-icons-on > li.menu-parent-item > span.title{ padding-right: 4px; } /* next levels */ .header-horizontal .top-menu ul{ position: absolute; top: 100%; left: 0; z-index: 250; min-width: 200px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07); } .header-horizontal .desktop_menu .top-menu ul{ visibility: hidden; opacity: 0; transform: translateY(-50px); transition: opacity 0.5s, visibility 0s 0.5s, transform 0.5s; } .header-horizontal .desktop_menu .top-menu ul.measure{ visibility: hidden; opacity: 0; transition: none; display: block; } .header-horizontal .desktop_menu .menu-parent-item.open > ul{ visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.5s, transform 0.5s; } .header-horizontal .desktop_menu .mega-menu > ul ul{ visibility: visible; opacity: 1; transform: none; } .header-horizontal .top-menu ul ul{ top: -30px; left: 100%; border-top: none; margin-top: 0; } .header-horizontal .mega-menu > ul ul{ position: static; box-shadow: none; } .header-horizontal .top-menu li li{ padding: 0; /* reset side padding */ } .header-horizontal .top-menu.opener-icons-on li li.menu-parent-item{ padding-right: 51px; /* 25px of link side padding + 26px for arrow */ } .header-horizontal .top-menu li li a, .header-horizontal .top-menu li li span.title{ /* span.title only to gain color and block */ line-height: 25px; padding: 0 30px; } .header-horizontal .top-menu ul i.sub-mark{ right: 25px; } /* submenu opened other way */ .header-horizontal .top-menu ul.otherway{ left: auto; right: 0; } .header-horizontal .top-menu ul ul.otherway{ left: auto; right: 100%; } /* ========================================================================== Header menu vertical ========================================================================== */ .header-vertical .top-menu ul{ padding: 10px 0; } .header-vertical .top-menu li a, .header-vertical .top-menu li span.title{ min-height: 27px; line-height: 27px; padding: 0 40px; } .header-vertical .top-menu > li.hidden-icon > a, .header-vertical .top-menu > li.hidden-icon > span.title{ height: 1.5em; /* so we have height that we can relate to in effects */ } .header-vertical .top-menu.with-effect > li > a > span, .header-vertical .top-menu.with-effect > li > span.title > span{ display: inline-block; } /* sub menu mark */ .header-vertical .top-menu i.sub-mark{ right: 14px; } /* next levels */ .header-vertical .top-menu li li a, .header-vertical .top-menu li li span.title{ /* span.title only to gain color and block */ min-height: 17px; line-height: 17px; } .header-vertical .top-menu li li i.sub-mark{ height: 17px; line-height: 17px; } .header-vertical .top-menu li li li a, .header-vertical .top-menu li li li span.title{ /* span.title only to gain color and block */ padding-left: 50px; } /********/ /* MEGA MENU STYLE */ .header-vertical .mega-menu > ul{ left: 100%; top: 0; } .header-vertical .top-menu .mega-menu li a, .header-vertical .top-menu .mega-menu li span.title{ padding: 0 30px; line-height: 25px; } .header-vertical .mega-menu > ul ul{ padding: 0 0 30px; } /* ========================================================================== Logo ========================================================================== */ a.logo{ display: block; max-width: 200px; word-wrap: break-word; white-space: nowrap; padding: 10px 0; opacity: 1; vertical-align: middle; background: transparent 50% 50% no-repeat; background-size: contain; background-origin: content-box; transition: max-width .5s, padding .5s, color .5s, opacity .5s; } a.logo img{ opacity: 0;/* we have image so its display when no styles are applied */ width: 100%; height: auto; display: block; } a.logo.text-logo{ /* reset user.css styles */ background-image: none; height: auto; line-height: 40px; /* min height of header part */ } a.logo.image-logo{ /* reset user.css styles */ font-size: 0; } /* SVG logos */ .svg-logo .scaling-svg{ display: block; width: 100%; height: 0; padding: 0; position: relative; } .svg-logo svg{ position: absolute; top: 0; left: 0; max-width: 100%; width: 100%; } a.logo.svg-logo{ background: none!important; } a.hidden-logo{ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; opacity: 0; } /* ========================================================================== Header vertical ========================================================================== */ .header-vertical #header{ position: absolute; top: 0; left: 0; width: 280px; min-height: 100%; color: #000; z-index: 9;/* below footer */ /* bg-color is for hover, rest for "to-move" class */ transition: transform .5s, background-color .5s; } .header-vertical.site-layout-bordered #header{ margin-top: 30px; /*rtl:ignore*/ margin-left: 30px; margin-bottom: 30px; } .header-vertical.site-layout-bordered.no-border-left #header{ /*rtl:ignore*/margin-left: 0; } .header-vertical.site-layout-bordered.no-border-top #header{ margin-top: 0; } .header-vertical.site-layout-bordered.no-border-bottom #header{ margin-bottom: 0; } .header-vertical #header.stick_to_bottom, .admin-bar.header-vertical #header.stick_to_bottom{ position: fixed; bottom: 0; top: auto; } .header-vertical #header.stick_to_top{ position: fixed; bottom: auto; top: 0; } .admin-bar.header-vertical #header{ top: 32px; } .header-vertical.site-layout-bordered.no-border-bottom.no-border-top #header{ min-height: 100%; } .header-vertical.site-layout-bordered.no-border-top #header, .header-vertical.site-layout-bordered.no-border-bottom #header{ min-height: calc(100% - 30px); } .header-vertical.site-layout-bordered #header{ min-height: calc(100% - 60px); } .admin-bar.header-vertical #header, .admin-bar.header-vertical.site-layout-bordered.no-border-bottom.no-border-top #header{ min-height: calc(100% - 32px); } .admin-bar.header-vertical.site-layout-bordered.no-border-top #header, .admin-bar.header-vertical.site-layout-bordered.no-border-bottom #header{ min-height: calc(100% - 62px); } .admin-bar.header-vertical.site-layout-bordered #header{ min-height: calc(100% - 92px); } .header-vertical .logo-container .logo{ display: inline-block; } .header-vertical .logo-container .logo.svg-logo{ width: 200px; } .header-vertical #header-tools{ padding: 0 40px 0 30px; margin-top: 20px; } .header-vertical #mid{ padding: 0 0 0 280px; } .header-vertical #header.scrollable-menu{ position: absolute; } .header-vertical .navigation-bar{ position: relative; } .header-vertical .logo-container{ padding: 0 40px; } .header-widgets{ padding: 0 40px; } .header-vertical #header.centered, #header.centered .widget h3.title{ text-align: center; } /* vertical mid */ .header-vertical .variant-content_in_mid .navigation-bar{ display: table; width: 100%; } .variant-content_in_mid div.menu-container{ display: table-cell; vertical-align: middle; } /* ========================================================================== Header vertical variant right ========================================================================== */ /* GENERAL LAYOUT */ .header-side-right.header-vertical #header{ /*rtl:ignore*/ left: auto; /*rtl:ignore*/ right: 0; } .header-side-right.header-vertical.site-layout-bordered #header{ /*rtl:ignore*/ margin-left: 0; /*rtl:ignore*/ margin-right: 30px; } .header-side-right.header-vertical.site-layout-bordered.no-border-right #header{ /*rtl:ignore*/ margin-right: 0; } .header-side-right #mid{ /*rtl:ignore*/ padding: 0 280px 0 0; } /* HEADER MENU */ .header-side-right .mega-menu > ul{ /*rtl:ignore*/ left: auto; /*rtl:ignore*/ right: 100%; } /* ============================================================================= Header horizontal general ========================================================================== */ .header-horizontal #header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 11;/* above footer */ /* bg-color is for hover, rest for "to-move" class */ transition: transform .5s, background-color .5s; } .header-horizontal #header.no-fixed, .header-horizontal #header.default-sticky{/* overwritten in JS */ position: absolute; } .mobile-menu-open.header-horizontal #header.default-sticky{ position: fixed; /* if we are at top of page we don't want header to jump around while scrolling down */ } #header.a13-horizontal{ /* removed from above rules too be easier overwritten */ border-bottom: 1px solid #E5E5E5; } .admin-bar.header-horizontal #header{ margin-top: 32px; } .header-horizontal #header .head{ padding: 0 40px; margin: 0 auto; width: 100%; box-sizing: border-box; } .header-horizontal #header.narrow-header{ max-width: 1240px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #header.narrow .head, #header.narrow .top-bar{ max-width: 1240px; } .header-horizontal .logo-container{ transition: max-width .5s, min-width .5s; } .header-horizontal .logo-container, .header-horizontal .navigation-bar, .header-horizontal #header-tools, .header-horizontal header .socials { display: table-cell; vertical-align: middle; } .header-horizontal #header-tools, .header-horizontal header .socials { white-space: nowrap; text-align: right; } .header-horizontal #header-tools{ padding-right: 15px; } .header-horizontal #header-tools::before, .header-horizontal .head .socials::before{ content: ""; display: inline-block; height: 25px; width: 1px; background-color: #E5E5E5; margin-right: 15px; vertical-align: middle; } .header-horizontal .head .socials a{ vertical-align: middle; } /* STICKY HEADER */ #header.sticky-values{ box-shadow: 0 0 12px rgba(0, 0, 0, 0.09); } .header-horizontal #header.sticky-hide, .header-horizontal #header.hide-until-scrolled-to{ -webkit-transform: translateY(-102%); -ms-transform: translateY(-102%); transform: translateY(-102%); /* 102% cause it leaves one pixel behind when doing 3d transforms */ } .mobile-menu-open.header-horizontal #header.sticky-hide{ -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; /* it makes sure menu will not run away while scrolling on mobile menu */ } .site-layout-bordered.header-horizontal #header{ top: 30px; left: 30px; right: 30px; width: auto; } .no-border-top.header-horizontal #header{ top: 0; } .no-border-right.header-horizontal #header{ /*rtl:ignore*/right: 0; } .no-border-left.header-horizontal #header{ /*rtl:ignore*/left: 0; } /* narrow overwrites */ .header-horizontal #header.narrow-header{ left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .header-horizontal #header.sticky-hide.narrow-header, .header-horizontal #header.hide-until-scrolled-to.narrow-header{ -webkit-transform: translate(-50%, -102%); -ms-transform: translate(-50%, -102%); transform: translate(-50%, -102%); /* 102% cause it leaves one pixel behind when doing 3d transforms */ } .site-layout-bordered.header-horizontal #header.narrow-header{ width: 100%; right: auto; } .no-border-right.header-horizontal #header.narrow-header, .no-border-left.header-horizontal #header.narrow-header{ /* not fully supported, as no one should use such configuration */ /*rtl:ignore*/ left: 50%; /*rtl:ignore*/ right: auto; } /* header scrollable menu */ .header-horizontal #header.scrollable-menu{ position: absolute !important;/* so it overwrites any inline style for hiding sticky header */ } /* ============================================================================= Header horizontal variants ========================================================================== */ /* ONE LINE */ .header-type-one_line .head{ display: table; } /* ONE LINE MENU CENTERED */ .header-variant-one_line_menu_centered .top-menu{ text-align: center; } /* ONE LINE LOGO CENTERED */ .header-variant-one_line_centered .socials-cell, .header-variant-one_line_centered .tools-cell{ width: 15%; display: table-cell; vertical-align: middle; } .header-variant-one_line_centered .tools-cell{ text-align: right; } .header-variant-one_line_centered #header-tools, header.header-variant-one_line_centered .socials{ white-space: normal; padding: 0; display: block; } header.header-variant-one_line_centered .socials{ text-align: left; } .header-variant-one_line_centered #header-tools::before, .header-variant-one_line_centered .head .socials::before { display: none; } .header-variant-one_line_centered .menu-cell{ width: 70%; display: table-cell; vertical-align: middle; text-align: center; position: relative; } .header-variant-one_line_centered .navigation-bar{ display: block; box-sizing: border-box; /* for JS operation */ transition: min-height .5s; } .header-variant-one_line_centered .logo-container{ display: block; max-width: 200px; z-index: 1; position: absolute; top: 0; /*rtl:begin:ignore*/ left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); /*rtl:end:ignore*/ } .header-variant-one_line_centered .logo-container a.logo{ margin: 0 auto; } .header-variant-one_line_centered .menu-cell .top-menu{ width: calc(50% - 100px); float: left; text-align: right; /* for JS operation */ transition: width .5s, line-height .5s; } .header-variant-one_line_centered .menu-cell .right-part{ float: right; text-align: left; } .header-variant-one_line_centered .top-menu > li, .header-variant-one_line_centered .top-menu > li > a, .header-variant-one_line_centered .top-menu > li > span.title{ line-height: inherit; } /* ONE LINE LOGO CENTERED WITH SHIELD */ .header-variant-one_line_centered .logo-container.shield{ transition: max-width .5s, min-width .5s, transform .5s; } .header-variant-one_line_centered .logo-container .scaling-svg-container{ width: 100%; height: 0; padding: 0; padding-bottom: 125.6%; z-index: -1; position: absolute; top: 0; left: 0; } .header-variant-one_line_centered .logo-container > .scaling-svg-container svg{ width: 100%; height: auto; position: absolute; top: 0; left: 0; } .header-variant-one_line_centered.with-shield .top-menu > li > a, .header-variant-one_line_centered.with-shield .top-menu > li > span.title{ padding-top: 20px; padding-bottom: 20px; /* below are needed for "show icons" Hover effect of menu */ height: 25px; /* so icons will move properly in FireFox */ line-height: 25px; /* text aligned with icons */ } /* MULTI LINE */ #header.header-type-multi_line.narrow .head{ max-width: none; } #header.header-type-multi_line.narrow .top-head{ max-width: 1240px; margin: 0 auto; } #header.header-type-multi_line .head{ padding: 0; display: block; } .header-type-multi_line .top-head{ width: 100%; padding: 0 340px; box-sizing: border-box; position: relative; min-height: 40px; } .header-type-multi_line .bottom-head{ padding: 0 40px; border-color: #E5E5E5; border-top: 1px solid; } /*noinspection CssOptimizeSimilarProperties*/ .header-type-multi_line.header-variant-menu_above .bottom-head{ /* not optimized cause color is set in user.css */ border-top: none; border-bottom-style: solid; border-bottom-width: 1px; } .header-type-multi_line .logo-container{ display: block; text-align: center; } .header-type-multi_line a.logo{ margin: auto; } .header-type-multi_line .navigation-bar, .header-type-multi_line #header-tools, .header-type-multi_line .head .socials{ display: block; } .header-type-multi_line #header-tools, .header-type-multi_line .head .socials{ position: absolute; padding: 0; right: 40px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .header-type-multi_line .head .socials{ right: auto; left: 40px; } .header-type-multi_line #header-tools::before, .header-type-multi_line .head .socials::before{ display: none; } .header-type-multi_line.narrow .navigation-bar{ max-width: 1160px; margin: 0 auto; } .header-type-multi_line .top-menu{ text-align: center; } .header-type-multi_line .top-menu > li > a, .header-type-multi_line .top-menu > li > span.title{ line-height: 40px; height: 40px; min-height: 40px; } /* ========================================================================== Top bar in header ========================================================================== */ .top-bar-container{ border-bottom: 1px solid #E5E5E5; overflow: hidden;/* for animating from sticky header to normal */ transition: background-color .5s, color .5s, opacity .7s, height .5s;/* height is .5 to match animation of other size propeties in header */ visibility: visible; opacity: 1; } .top-bar-container.hide{ visibility: hidden; opacity: 0; height: 0; transition: background-color .5s, color .5s, opacity .7s, visibility 0s .7s, height .5s; } .top-bar-container.measure{ visibility: hidden; opacity: 0; height: auto; transition: none; } .top-bar-container .top-bar{ margin: 0 auto; width: 100%; padding: 7px 40px; display: table; line-height: 26px; font-size: 12px; box-sizing: border-box; /* for header color variant switching */ transition: color .5s; } .top-bar .top-bar-msg a:hover{ text-decoration: underline; } .top-bar > div{ display: table-cell; height: 26px; /* works as min-height */ width: 50%; vertical-align: top; } .top-bar .part2{ text-align: right; } .top-bar .part1:empty, .top-bar .part2:empty{ width: 0; display: none; } .top-bar ul{ margin: 0; padding: 0; list-style: none; } .top-bar li{ display: inline-block; position: relative; } .top-bar li a i{ margin-right: 8px; } .top-bar-menu li{ padding: 0 10px; } .top-bar-menu li:first-child{ padding-left: 0; } .top-bar .part2 .socials, .top-bar .part2 .language-switcher{ display: inline-block; } .top-bar .part2 .socials{ margin-left: 15px; } .top-bar .language-switcher a{ padding: 0 10px; display: inline-block; } .top-bar .language-switcher li::before{ content: ""; height: 13px; width: 1px; background-color: #E5E5E5; display: inline-block; vertical-align: middle; } .top-bar .language-switcher li:first-child::before{ display: none; } /* ========================================================================== Top closable message ========================================================================== */ .top-message-container{ position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; text-transform: uppercase; transform: none; opacity: 1; transition: opacity .5s, transform .5s; } .top-message-container.hide{ transform: translateY(-100%); opacity: 0; } .top-message-container.bottom-screen.hide{ transform: translateY(100%); } .admin-bar .top-message-container{ top: 32px; } .top-message-container.bottom-screen{ top: auto; bottom: 0; } .top-message{ margin: 0 auto; max-width: 1240px; width: 100%; min-height: 40px; padding: 8px 40px 6px; display: table; line-height: 26px; font-size: 11px; box-sizing: border-box; } .top-message .message{ display: table-cell; height: 26px; /* works as min-height */ vertical-align: top; width: 100%; } .top-message .message a:hover{ text-decoration: underline; } /* button */ .top-message .button span{ display: inline-block; height: 26px; line-height: 26px; text-transform: uppercase; text-align: center; font-size: 11px; font-weight: bold; white-space: nowrap; padding: 0 10px; margin-left: 10px; border: 1px solid #E5E5E5; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; transition: border-color .3s, color .3s; box-sizing: border-box; } /* when there is no button */ .top-message.no-button{ display: block; position: relative; } .top-message.no-button > div{ display: block; } .top-message .close-sidebar{ top: 5px; } /* ========================================================================== Header search ========================================================================== */ .search-container{ position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 100%; min-height: 100px; background-color: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.09); display: none; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s, transform .3s; } .header-vertical .search-container{ left: 100%; bottom: auto; width: 640px; } .header-side-right.header-vertical .search-container{ /*rtl:ignore*/ left: auto; /*rtl:ignore*/ right: 100%; } .search-container.open{ display: block; } .search-container.show{ opacity: 1; visibility: visible; transition: opacity .3s, transform .3s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .search-container .search{ margin: 0 auto; max-width: 1160px; padding: 0 40px; position: relative; } .lt-ie10 .search-container input[type="text"], .search-container input[type="search"]{ border: none; background-color: transparent; height: 100px; width: 100%; max-width: none; padding: 38px 40px; color: #aaa; font-size: 18px; text-align: left; transition: color .5s; } .lt-ie10 .search-container input[type="text"]:focus, .search-container input[type="search"]:focus{ color: #444; } .search-container .a13icon-search, .search-container .close{ color: #c5c5c5; font-size: 18px; position: absolute; left: 40px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .search-container .close{ left: auto; right: 34px; padding: 6px;/* bigger click area */ cursor: pointer; transition: color .5s; } .search-container .close:hover{ color: #444; } .search-container input[type="submit"]{ background: none; height: 0; width: 0; position: absolute; border: none; } #search-results-header{ margin: 0 auto; max-width: 1240px; width: 100%; position: relative; background-color: inherit; box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.09); } .header-vertical #search-results-header{ box-shadow: none; } .searchwp-live-search-results{ border-top: 1px solid #F2F2F2; padding: 40px 0 90px; } .searchwp-live-search-results:empty{ display: none; } .searchwp-live-search-results .all-results{ display: block; position: absolute; bottom: 30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 26px; line-height: 28px; text-transform: uppercase; text-align: center; color: #444; font-size: 12px; font-weight: bold; padding: 0 10px; border: 1px solid #E5E5E5; -webkit-border-radius: 3px; border-radius: 3px; transition: background-color .3s, color .3s; } .searchwp-live-search-results .all-results:hover, .searchwp-live-search-result--focused .all-results{ background-color: #222; border-color: #222; color: #fff; } .searchwp-live-search-result{ min-height: 112px; font-size: 12px; transition: background-color .35s; } .searchwp-live-search-result:hover, .searchwp-live-search-result.searchwp-live-search-result--focused{ background-color: rgba(0, 0, 0, 0.03); } .searchwp-live-search-result a{ display: block; padding: 22px 40px 10px } .searchwp-live-search-result a:hover{ text-decoration: none; } .searchwp-live-search-result .icon{ height: 80px; width: 80px; float: left; background: #f6f6f6 no-repeat 50% 50%; background-size: cover; color: #666; text-align: center; font-size: 20px; line-height: 80px; -webkit-border-radius: 40px; border-radius: 40px; transition: box-shadow .35s; } .searchwp-live-search-result:hover .icon, .searchwp-live-search-result.searchwp-live-search-result--focused .icon{ box-shadow: 0 0 14px #bbb; } .searchwp-live-search-result .title{ margin: 0 0 10px 100px; display: block; color: #444; font-size: 14px; font-weight: bold; } .searchwp-live-search-result time{ margin: 0 0 10px 100px; display: block; color: #B2B2B2; } .searchwp-live-search-result .excerpt{ margin: 0 0 10px 100px; display: block; color: #848484; } /* no results */ .searchwp-live-search-no-results{ text-align: center; margin-bottom: -40px; } .searchwp-live-search-no-results h2{ color: #444; font-size: 18px; font-weight: bold; text-transform: none; margin: 0 0 5px; } .searchwp-live-search-no-results em{ color: #848484; font-size: 14px; font-style: normal; } /* ========================================================================== Menu overlay ========================================================================== */ #menu-overlay{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; height: 100%; /* needed for proper position of nav */ z-index: 1002; padding: 60px; background-color: #000; box-sizing: border-box; } .admin-bar #menu-overlay{ top: 32px; } .site-layout-bordered #menu-overlay{ top: 30px; left: 30px; right: 30px; bottom: 30px; height: calc(100% - 60px); } .site-layout-bordered.no-border-bottom.no-border-top #menu-overlay{ height: 100%; } .site-layout-bordered.no-border-top #menu-overlay, .site-layout-bordered.no-border-bottom #menu-overlay{ height: calc(100% - 30px); } .admin-bar #menu-overlay, .admin-bar.site-layout-bordered.no-border-bottom.no-border-top #menu-overlay{ height: calc(100% - 32px); } .admin-bar.site-layout-bordered.no-border-top #menu-overlay, .admin-bar.site-layout-bordered.no-border-bottom #menu-overlay{ height: calc(100% - 62px); } .admin-bar.site-layout-bordered #menu-overlay{ top: 62px; height: calc(100% - 92px); } .site-layout-bordered.no-border-top #menu-overlay{ top: 0; } .admin-bar.site-layout-bordered.no-border-top #menu-overlay{ top: 32px; } .site-layout-bordered.no-border-left #menu-overlay{ /*rtl:ignore*/left: 0; } .site-layout-bordered.no-border-right #menu-overlay{ /*rtl:ignore*/right: 0; } .site-layout-bordered.no-border-bottom #menu-overlay{ bottom: 0; } #menu-overlay nav{ text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #menu-overlay.align-left nav{ /*rtl:ignore*/ text-align: left; } #menu-overlay.align-right nav{ /*rtl:ignore*/ text-align: right; } #menu-overlay.big-content nav{ max-height: 100%; overflow: auto; } #menu-overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; } #menu-overlay ul li { display: block; } #menu-overlay ul a{ line-height: 2em; transition: color .5s; } .close-menu{ position: absolute; top: 25px; right: 25px; cursor: pointer; width: 25px; height: 25px; transition: transform .3s; } .close-menu::before, .close-menu::after{ content: ""; width: 141.42%; /* a*scrt(2)*/ height: 1px; position: absolute; left: 0; } .close-menu::before{ top: 0; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .close-menu::after{ bottom: 0; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .close-menu:hover{ -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* default effect*/ #menu-overlay.eff-default{ opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; } #menu-overlay.open.eff-default{ opacity: 1; visibility: visible; transition: opacity 0.5s; } #menu-overlay.eff-default ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); transition: transform 0.5s, opacity 0.5s; } #menu-overlay.open.eff-default ul{ opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } #menu-overlay.close.eff-default ul{ -webkit-transform: translateY(25%) rotateX(-35deg); transform: translateY(25%) rotateX(-35deg); } /* slide down effect*/ #menu-overlay.eff-slide-top{ visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: transform .4s ease-in-out, visibility 0s .4s; } #menu-overlay.open.eff-slide-top{ visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); transition: transform .4s ease-in-out; } /* slide left/right effect*/ #menu-overlay.eff-slide-left, #menu-overlay.eff-slide-right{ visibility: hidden; /*rtl:ignore*/ -webkit-transform: translateX(-100%); /*rtl:ignore*/ transform: translateX(-100%); transition: transform .4s ease-in-out, visibility 0s .4s; } #menu-overlay.eff-slide-right{ /*rtl:ignore*/ -webkit-transform: translateX(100%); /*rtl:ignore*/ transform: translateX(100%); } #menu-overlay.open.eff-slide-left, #menu-overlay.open.eff-slide-right{ visibility: visible; /*rtl:ignore*/ -webkit-transform: translateX(0%); /*rtl:ignore*/ transform: translateX(0%); transition: transform 0.4s ease-in-out; } /* scale effect*/ #menu-overlay.eff-scale{ visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; } #menu-overlay.open.eff-scale{ visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); transition: transform 0.4s, opacity 0.4s; } /* circle effect*/ #menu-overlay.eff-circle{ visibility: hidden; -webkit-transform: scale(0); transform: scale(0); transition: transform 0.4s, visibility 0s 0.4s; background-color: transparent; } #menu-overlay.eff-circle::before{ content: ""; height: 200vw; width: 200vw; top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-border-radius: 50%; border-radius: 50%; } #menu-overlay.open.eff-circle{ visibility: visible; -webkit-transform: scale(1); transform: scale(1); transition: transform 0.75s; } #menu-overlay.eff-circle nav{ opacity: 0; transition: opacity .4s; } #menu-overlay.open.eff-circle nav{ opacity: 1; transition: opacity .4s .4s; } /* ========================================================================== Footer ========================================================================== */ #footer{ font-size: 10px; background-color: #1E1E1E; width: 100%; box-sizing: border-box; } .foot-items, #footer .foot-widgets{ margin: 0 auto; padding: 0 70px; } #footer.narrow .foot-items .foot-content{ margin: 0 auto; } #footer.narrow .foot-items .foot-content, #footer.narrow .foot-widgets{ max-width: 1160px; } .foot-items{ color: #989898; background-color: #101010; } .foot-widgets .foot-content{ padding: 15px 0 60px; margin-left: -3%; } .foot-items .foot-content{ padding: 15px 0; } .footer-separator .foot-items .foot-content{ border-top: 1px solid transparent; } .foot-widgets .widget{ margin: 60px 0 0 3%; float: left; width: 30.3%; box-sizing: border-box; } .widgets_margin_top_off .foot-widgets .widget{ margin-top: 60px; /* make sure widgets in footer wont be affected */ } .one-col .widget{ width: 97%; } .two-col .widget{ width: 46.95%; } .four-col .widget{ width: 21.95%; } .five-col .widget{ width: 16.95%; } .two-col .widget:nth-child(2n+1), .three-col .widget:nth-child(3n+1), .four-col .widget:nth-child(4n+1), .five-col .widget:nth-child(5n+1){ clear: both; } /* content */ .f-links{ float: right; text-align: right; max-width: 50%; } .foot-text { line-height: 26px; max-width: 50%; float: left; } /* centered footer */ #footer.centered, #footer.centered .widget h3.title, #footer.centered .widget .socials{ text-align: center; } #footer.centered .f-links, #footer.centered .foot-text { float: none; text-align: center; max-width: none; } #footer.centered .f-links + .foot-text{ margin-top: 25px; } #footer.centered .foot-widgets .widget { display: inline-block; float: none; vertical-align: top; } /* footer in vertical header */ .header-vertical .whole-layout > #footer{ display: none; /* hide footer while it is not moved to header */ } #header #footer{ position: absolute; bottom: 0; left: 0; min-height: 40px; width: 280px; background-color: transparent!important; padding: 0; text-align: inherit; margin-top: 20px; } #header .foot-items{ background-color: transparent!important; padding: 0 40px 30px; } #header .foot-items .foot-content{ padding: 0; } #header .footer-separator .foot-items .foot-content{ padding-top: 30px; } #header #footer .f-links, /* double id selector to overwrite footer .centered styles */ #header #footer .foot-text{ float: none; max-width: none; text-align: inherit; } #header .foot-text{ line-height: 1.5em; } #header .f-links + .foot-text{ margin-top: 30px; } /* ============================================================================= Footer unravel effect ========================================================================== */ #footer.unravel{ position: fixed; left: 0; bottom: 0; z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.3s; } #footer.unravel.hide-it{ visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s; } .site-layout-boxed #footer.unravel{ max-width: 1240px; margin: 0 auto; left: auto; } .site-layout-bordered #footer.unravel{ right: 30px; left: 30px; bottom: 30px; width: auto; } .site-layout-bordered.no-border-left #footer.unravel{ /*rtl:ignore*/left: 0; } .site-layout-bordered.no-border-right #footer.unravel{ /*rtl:ignore*/right: 0; } .site-layout-bordered.no-border-bottom #footer.unravel{ bottom: 0; } /* ============================================================================= Sidebar & widgets ========================================================================== */ .widget{ margin: 35px 0 40px; font-size: 12px; line-height: 1.6667em; } #secondary .widget:nth-last-child(2), .widget:last-child{ margin-bottom: 0; } .widgets_margin_top_off .widget{ margin-top: 0; } .widget h3.title{ margin: 0 0 25px; font-size: 14px; line-height: 1.4em; color: #222; text-align: left; /* WooCommerce was overwriting this */ } /* COLORS */ .widget a{ color: #535353; } .widget a:hover{ color: #222; text-decoration: underline; } /* lists in widgets */ .widget ul{ list-style-type: none; margin: 0; padding: 0; } .widget ul ul{ margin: 0 0 0 25px; } .widget_nav_menu li a{ display: block; } .widget_nav_menu li a i{ margin-right: 8px; } .widget_nav_menu ul ul{ margin: 0; } .widget_nav_menu li li a{ padding-left: 10px; } .widget_nav_menu li li li a{ padding-left: 20px; } /* RECENT/POPULAR/RELATED POSTS WIDGET */ /* RECENT COMMENTS WIDGET */ .widget_about_posts .item{ margin: 0 0 10px; } .widget_about_posts .post-title{ margin-right: 10px; } .widget_about_posts .entry-date, .widget_about_posts .comments{ display: block; opacity: 0.6; } .widget_about_posts .entry-date i{ margin-right: 5px; } .widget_about_posts .content{ display: block; clear: both; margin: 5px 0 15px; } .widget_recent_comments .recentcomments{ color: #999; display: block; margin: 0 0 4px; } /* CALENDAR WIDGET */ #wp-calendar{ width: 100%; } #wp-calendar caption{ padding-bottom: 10px; } #wp-calendar td{ text-align: center; } #wp-calendar tfoot td{ padding-top: 10px; } #wp-calendar tfoot td#prev{ text-align: left; } #wp-calendar tfoot td#next{ text-align: right; } /* RSS WIDGET */ a.rsswidget{ display: inline; } .rsswidget img{ margin-top: -2px; } .widget_rss >ul >li{ margin-top: 20px; } .rss-date{ display: block; } /* TAG CLOUD WIDGET */ .under_content_tags{ margin: 20px 0 0 0; } .tagcloud a, .under_content_tags a{ border: none; background-color: #f7f7f7; padding: 0 10px; margin: 4px 0 0; display: inline-block; color: #535353; line-height: 25px; font-weight: bold; } .tagcloud a:hover, .under_content_tags a:hover{ color: #fff; border-color: #222; background-color: #222; text-decoration: none; } .tagcloud a:hover{ color: #fff !important; /* so predefined color scheme wont overwrite it */ } .widget_tag_cloud a, .under_content_tags a{ font-size: 10px !important; /* tag cloud insert inline font-size style */ letter-spacing: 1px; text-transform: uppercase; } /* TEXT WIDGET Limits */ .widget_text img{ max-width: 100%; height: auto; } .widget_text .wp-caption{ margin: 0; } /* ALBUMS WIDGET*/ .widget_recent_cpt .items{ margin: -6% 0 0 -6%; line-height: 0; } .widget_recent_cpt .item{ display: inline-block; margin: 6% 0 0 6%; width: 27.33%; height: auto; /* was 27.33% but it doesn't work that way ;-) */ position: relative; /* for hover */ } .widget_recent_cpt a{ display: block; height: auto; /* was 100% but it doesn't work that way ;-) */ width: 100%; } .widget_recent_cpt img{ display: block; position: relative; top: 0; left: 0; height: 100%; width: 100%; transition: opacity .5s; } .widget_recent_cpt .item:hover img{ opacity: 0.5; } /* Socials WIDGET */ .widget .socials{ text-align: left; } /* CONTACT INFO */ .widget_contact_info .info{ margin-top: 0; } .widget_contact_info .content-text{ margin-bottom: 20px; } .widget_contact_info .with_icon{ padding-left: 25px; position: relative; } .widget_contact_info .with_icon > i{ color: #bcbcbc; position: absolute; top: 0; left: 0; line-height: 24px; } .widget_contact_info .email, .widget_contact_info .www{ display: block; } /* WIDGET SLIDER CONTROLS */ .js div.widget_rss li{ display: none; } .slider-ctrls{ position: relative; } .slider-ctrls .title{ padding-right: 40px; } .widget-slider-ctrls{ position: absolute; top: 0; right: 0; line-height: 20px; height: 20px; background-color: rgba(0, 0, 0, 0.6); /*rtl:ignore*/ direction: ltr; } .widget-slider-ctrls span{ cursor: pointer; display: inline-block; height: 20px; width: 20px; line-height: 20px; color: #fff; text-align: center; font-size: 14px; opacity: 0.5; filter: alpha(opacity=50); /* IE 8 */ } .widget-slider-ctrls span:hover{ opacity: 1; filter: alpha(opacity=100); /* IE 8 */ } /* SEARCH FORM WIDGET */ .widget form[role="search"]{ position: relative; } .widget form[role="search"] input[type="search"]{ border: 1px solid #eee; -webkit-border-radius: 2px; border-radius: 2px; font-size: 12px; background-color: #fff; padding-right: 50px; } .widget form[role="search"] input[type="search"]:hover, .widget form[role="search"] input[type="search"]:focus{ background-color: #f9f9f9; border-color: #c0c0c0; } .widget form[role="search"] input[type="submit"], .widget form[role="search"] button[type="submit"]{ background: none; height: 40px; width: 40px; position: absolute; top: 0; right: 0; border: none; opacity: 0; z-index: 5; } .widget form[role="search"]::before{ /* use !important to prevent issues with browser extensions that change fonts */ /*noinspection CssNoGenericFontName*/ font-family: 'a13-icomoon' !important; /*noinspection CssUnknownProperty*/ speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; /*noinspection CssUnknownProperty*/ -moz-osx-font-smoothing: grayscale; content: "\e036"; height: 40px; width: 40px; line-height: 40px; position: absolute; top: 0; right: 0; z-index: 4; color: #aaa; font-size: 14px; text-align: center; } /* Gallery widget */ .widget .gallery img{ max-width: 100%; height: auto; box-sizing: border-box; } /* ============================================================================= Colors in dark sidebars ========================================================================== */ .dark-sidebar, .dark-sidebar .widget{ color: #666; } .dark-sidebar a, .dark-sidebar .widget_filter li a { color: #777; } .dark-sidebar a:hover{ color: #aaa; } .dark-sidebar .widget h3.title{ color: #fff; } .dark-sidebar .tagcloud a{ background-color: #1d1d1d; color: #777; } .dark-sidebar .tagcloud a:hover{ background-color: #777; color: #2c2c2c; } .lt-ie10 .dark-sidebar .widget_search input[type="text"], .dark-sidebar .widget_search form[role="search"] input[type="search"]{ background-color: #161616; border: 1px solid #222; color: #fff; } .lt-ie10 .dark-sidebar .widget_search input[type="text"]:hover, .lt-ie10 .dark-sidebar .widget_search input[type="text"]:focus, .dark-sidebar .widget_search form[role="search"] input[type="search"]:hover, .dark-sidebar .widget_search form[role="search"] input[type="search"]:focus{ background-color: #161616; border-color: #333; } .dark-sidebar .widget_filter .selected a, .dark-sidebar .widget_filter a:hover { background-color: #fff; color: #222; text-decoration: none; } /* ========================================================================== Title bar ========================================================================== */ .title-bar{ overflow: hidden; /* for scrolling out titles */ } .title-bar .in{ max-width: 1160px; margin: 0 auto; text-align: center; } .page-title{ word-wrap: break-word; margin: 0; line-height: 1.2; font-size: 36px; } .title-bar .in h2{ font-size: 12px; font-weight: bold; margin: 0 0 25px 0; letter-spacing: 6px; opacity: 0.5; text-transform: uppercase; } .title-bar .breadcrumbs, .title-bar .post-meta{ font-size: 16px; } .title-bar .post-meta{ margin-bottom: 20px; } .title-bar .breadcrumbs{ margin-top: 10px; } .title-bar .breadcrumbs a:hover, .title-bar .post-meta a:hover{ opacity: 0.8; } .title-bar .page-title{ color: #222; } /* INSIDE VERSION */ .title-bar.inside{ margin: 0 0 60px; } .post-media + .title-bar.inside{ margin-top: 60px; } .title-bar.inside .in h2{ color: #A9A9A9; } /* OUTSIDE VERSION */ .title-bar.outside .overlay-color{ background: transparent; padding: 40px; } .title-bar.outside h2 { color: #222; font-size: 12px; } .title-bar.outside h2 a{ color: #666; } .title-bar.outside h2 a:hover{ color: #222; } /* CLASSIC VARIANT */ .title_bar_variant_classic .in{ text-align: left; display: table; width: 100%; } .title_bar_variant_classic.title_bar_width_full .in{ max-width: none; } .title_bar_variant_classic .titles, .title_bar_variant_classic .breadcrumbs{ display: table-cell; vertical-align: middle; } .title_bar_variant_classic .breadcrumbs{ text-align: right; margin-top: 0; } /* ========================================================================== Content layout variants ========================================================================== */ .content-limiter{ max-width: 1160px; margin: 0 auto; } #col-mask{ /*rtl:begin:ignore*/ float: left; position: relative; width: 100%; right: 25%; /*rtl:end:ignore*/ } .content-box{ /*rtl:begin:ignore*/ float: left; position: relative; left: 25%; width: calc(75% - 10px); margin-right: 10px; /*rtl:end:ignore*/ } .left-sidebar .content-box{ /*rtl:begin:ignore*/ float: right; margin-left: 10px; margin-right: 0; /*rtl:end:ignore*/ } .layout-full .content-box, .layout-full_fixed .content-box, .layout-full_padding .content-box{ width: 75%; /*rtl:ignore*/ margin-right: 0; /*rtl:ignore*/ margin-left: 0; } .no-sidebars #col-mask, .no-sidebars .content-box{ float: none; position: static; /*rtl:ignore*/ left: auto; width: auto; /*rtl:ignore*/ margin-right: 0; } .no-sidebars .content-box{ /*rtl:ignore*/ left: 0; } #secondary{ /*rtl:begin:ignore*/ float: left; left: 25%; padding: 25px 40px 60px;/* top 25 + 35 margin of widget = 60px top padding ;) */ /*rtl:end:ignore*/ position: relative; width: 25%; box-sizing: border-box; } .left-sidebar #secondary{ /*rtl:ignore*/ float: right; } .layout-full #content, .layout-full_fixed #content, .layout-full_padding #content{ background-color: #fff; } .layout-full .content-limiter, .layout-full_padding .content-limiter{ max-width: none; } .layout-padding #content{ margin: 0 40px; } .layout-parted .content-box, .layout-parted #secondary{ background-color: #fff; } .layout-edge .content-limiter{ max-width: 1000px; margin: 0; } .layout-edge.no-sidebars .content-limiter{ max-width: 700px; } .layout-edge .title-bar.inside .in{ text-align: left; } .layout-right #content, .layout-right_padding #content{ /*rtl:ignore*/ direction: rtl; } .layout-right .content-limiter, .layout-right_padding .content-limiter{ /*rtl:ignore*/ direction: ltr; } /* ========================================================================== General content styles ========================================================================== */ .formatter{ padding: 60px; } .no-bottom-space .content-box > .formatter{ padding-bottom: 0 !important; } .no-top-space .content-box > .formatter{ padding-top: 0 !important; } .no-side-space .content-box > .formatter{ /*rtl:ignore*/ padding-left: 0 !important; /*rtl:ignore*/ padding-right: 0 !important; } .formatter.no-content{ padding: 0; } .titles h2 { font-size: 14px; font-weight: normal; margin-top: 5px; } .post-media > a{ display: block; } .post-media img{ display: block; height: auto; margin: 0 auto; max-width: 100%; width: auto; } .post-media.animated-gif img{ width: 100%; } .post-media iframe, .real-content iframe{ border: none; display: block; margin: 0 auto; max-width: 100%; } .post-hatom-fix{ display: none; } .real-content{ line-height: 1.7; margin-top: 15px; } .real-content:first-child, .post-hatom-fix:first-child + *{ margin-top: 0; } .real-content > p, .entry-summary > p, .wpb_text_column p{ margin: 0; padding: .85em 0; } .real-content > p:first-child{ padding-top: 0; font-size: 1.1em; color: #444; } .real-content h6{ font-size: 1em; } .real-content h5{ font-size: 1.1em; } .real-content h4{ font-size: 1.2em; line-height: 1.22; } .real-content h3{ font-size: 1.625em; line-height: 1.15; } .real-content h2{ font-size: 2em; line-height: 1.1; } .real-content h1{ font-size: 2.2em; line-height: 1.05; } .real-content > h1, .real-content > h2, .real-content > h3, .real-content > h4, .real-content > h5, .real-content > h6, .wpb_text_column h1, .wpb_text_column h2, .wpb_text_column h3, .wpb_text_column h4, .wpb_text_column h5, .wpb_text_column h6{ padding: 1.5em 0 .5em; margin: 0; } .real-content > h1:first-child, .real-content > h2:first-child, .real-content > h3:first-child, .real-content > h4:first-child, .real-content > h5:first-child, .real-content > h6:first-child, .wpb_text_column h1:first-child, .wpb_text_column h2:first-child, .wpb_text_column h3:first-child, .wpb_text_column h4:first-child, .wpb_text_column h5:first-child, .wpb_text_column h6:first-child{ padding-top: .5em; } .real-content h1 + h2, .real-content h2 + h3, .real-content h3 + h4, .real-content h4 + h5, .real-content h5 + h6{ padding-top: 0; } .real-content ol, .real-content ul{ margin: .5em 1.5em; padding: 0; } .real-content li { padding: .2em 0; } .real-content img{ height: auto; max-width: 100%; box-sizing: border-box; } /* 404 TEMPLATE */ .default404 .page-background{ background-color: #fff; } .default404 .title-bar.outside h2 a{ color: #666; } .default404 .title-bar.outside .page-title, .default404 .title-bar.outside h2, .default404 .title-bar.outside h2 a:hover { color: #000; } .default404 .title-bar.outside .page-title{ line-height: 3em; } .default404 .emblem{ display: block; font-size: 3em; line-height: 1em; } .default404 .title-bar .overlay-color{ padding: 150px 0; } /* PASSWORD FORM TEMPLATE */ /* body.password-protected is used to overwrite user.css rules */ body.password-protected .page-background{ background-color: #fff; } body.password-protected .title-bar.outside{ background-image: none; } body.password-protected .title-bar.outside .overlay-color{ padding: 150px 0 30px; background-color: transparent; } body.password-protected .title-bar.outside .page-title{ line-height: 1.5em; color: #000; font-size: 36px; /* predefined */ } .password-protected .emblem{ display: block; font-size: 5em; } /* password form */ .post-password-form { max-width: 490px; margin: 20px auto 0; } .password-protected .post-password-form{ padding-bottom: 100px; } .post-password-form p{ font-size: 13px !important; /* overwrite content styles for p */ } .password-form .inputs{ margin: 0; } .post-password-form input{ display: inline-block; vertical-align: top; width: auto; min-width: 60%; } .post-password-form input[type="submit"]{ min-width: 29.9%; } /* page links if post is divided into parts */ #page-links{ margin-top: 1em; } /* COLUMNS */ .left50{ width: 47%; float: left; margin-right: 3%; } .right50{ width: 47%; float: left; margin-left: 3%; } /* special lists */ ul.styled, .styled ul, ol.styled, .styled ol{ list-style-type: none; margin: 0 0 0 25px; padding: 0; } /* ========================================================================== Post meta ========================================================================== */ .post .post-meta{ font-size: .778em; color: #A7A7A7; } .post .post-meta a{ color: #A7A7A7; } .post .post-meta a:hover{ color: #222; } .post-meta-categories { display: inline-block; } .post-meta .separator::before{ content: '/'; margin: 0 10px; } .post-meta span[itemprop="interactionStatistic"]{ font-size: 0; } /* ============================================================================= Posts navigation ========================================================================== */ .posts-nav{ margin: 50px 0; display: table; width: 100%; } .posts-nav a{ display: table-cell; width: 47.5%; padding: 0 2.5% 0 0; height: 140px; vertical-align: middle; text-align: center; font-size: 11px; } .posts-nav a.next{ padding-left: 2.5%; padding-right: 0; } .posts-nav a span{ font-size: 10px; color: #6A6A6A; display: block; text-transform: uppercase; } .posts-nav a span.title{ line-height: 20px; font-size: 15px; font-weight: bold; word-wrap: break-word; color: #333; margin-top: 10px; } .posts-nav a:hover span.title{ color: #000; } .posts-nav .image{ margin-top: 15px; position: relative; display: inline-block; overflow: hidden; } .posts-nav .image::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .posts-nav .image:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /* ============================================================================= Comments & about author ========================================================================== */ /** ABOUT AUTHOR */ div.about-author{ /* div selector to overwrite .comment style */ background-color: #FAFAFA; margin: 0 -60px -60px; padding: 80px 60px 40px; } .about-author .comment-author{ display: block; font-size: 15px; color: #222; } /* COMMENTS */ .comments-area{ /* almost no styles cause when no comments * then comment form area takes over styling */ margin: 60px -60px -60px; padding: 40px 60px; background-color: #FAFAFA; } .formatter.no-content .comments-area{ margin: 0; } .layout-full_fixed .comments-area, .layout-full_fixed div.about-author{ position: relative; } .layout-full_fixed div.about-author::before, .layout-full_fixed div.about-author::after, .layout-full_fixed .comments-area::before, .layout-full_fixed .comments-area::after{ content: ""; position: absolute; background-color: #FAFAFA; width: 3000px; top: 0; bottom: 0; left: 100%; } .layout-full_fixed div.about-author::after, .layout-full_fixed .comments-area::after{ right: 100%; left: auto; } #comments-title{ margin: 0; } h2.comments-title { color: #222; font-size: 16px; border-bottom: 1px solid #eee; margin: 0; padding-bottom: 20px; } .comment{ min-height: 90px; padding: 50px 0 0; } .pingback{ padding-top: 20px; } .comment-body, .author-inside{ position: relative; padding-left: 120px; line-height: 1.5; word-wrap: break-word; } .pingback .comment-body{ padding-left: 0; } .comment .comment{ margin-left: 40px; } img.avatar{ -webkit-border-radius: 45px; border-radius: 45px; display: block; position: absolute; left: 0; transition: all .5s; } .comment > .comment-body:hover img.avatar{ -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .says, .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } .comment-metadata{ font-size: 12px; margin-top: 4px; } .comment-metadata a{ color: #AFAFAF; } .comment-metadata .edit-link{ margin-left: 1em; } .comment-author{ color: #484848; font-size: 15px; font-weight: bold; } .comment-author a{ color: #484848; } .comment-author a:hover{ color: #222; } .bypostauthor > .comment-body .comment-author .fn::after{ content: ""; background: transparent url(images/author.png) 0 0 no-repeat; height: 23px; width: 43px; margin-left: 15px; display: inline-block; } .comment-content{ padding: 15px 0; } .comment-content p{ margin: 1em 0 0; } .comment-content > p:first-child{ margin-top: 0; } a.comment-reply-link{ color: #6A6A6A; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } a.comment-reply-link::before{ content: "\f112"; font-family: FontAwesome, monospace; margin-right: 10px; } em.comment-awaiting-moderation{ border-bottom: 1px dashed; } .comment-navigation{ margin-top: 25px; } /* ============================================================================= Add comment form ========================================================================== */ #respond{ margin: 50px 0 0; } #respond:first-child{ /* no comments yet */ margin-top: 0; } #reply-title{ color: #222; font-size: 16px; margin: 0; padding-bottom: 20px; border-bottom: 1px solid #eee; } #cancel-comment-reply-link{ padding-left: 4px; display: inline; border-left: 1px solid #000; color: #000; } .comment-form-author, .comment-form-email, .comment-form-url{ float: left; width: 32%; margin: 15px 0 0 2%; } .comment-form-cookies-consent{ padding-top: 15px; clear: both; } .comment-form-cookies-consent{ padding-top: 15px; clear: both; } .comment-form-author{ margin-left: 0; } .comment-form-comment, .cptch_block{ float: none; width: auto; margin: 0; padding-top: 15px; clear: both; } .comment-form-comment textarea{ max-width: none; } .form-submit{ clear: both; } .form-submit::before{ content: ""; clear: both; display: block; } .form-submit input[type="submit"]{ margin: 15px 0 0; } .comment-form p label{ display: block; margin-bottom: 12px; color: #222; font-size: 12px; } .comment-form p.comment-form-cookies-consent label{ display: inline-block; margin: 0 0 0 12px; } .form-info, span.wpcf7-not-valid-tip, div.wpcf7-response-output{ background-color: #e9fdd5; border: 1px solid #a6e368; padding: 6px; margin: 12px 0 0; color: #3dcb05; font-size: 13px; line-height: 20px; text-align: center; /*cursor: pointer;*//*there is no action on this div*/ } .form-info.error, span.wpcf7-not-valid-tip, div.wpcf7-validation-errors{ background-color: #ffeaea; border-color: #feabab; color: #eb1515; } div.wpcf7-response-output{ margin-bottom: 20px; } span.wpcf7-not-valid-tip{ position: static; display: block; margin-top: 5px; max-width: 280px; width: auto; } /* captcha plugin */ .cptch_block br{ display: none; } /* ============================================================================= Attachment page ========================================================================== */ p.attachment img, div.attachment .wp-video{ display: block; margin: 0 auto; } .attachment-info{ margin-top: 20px; } /* ========================================================================== Posts list ========================================================================== */ .posts-list .layout-full #content, .posts-list .layout-full_fixed #content, .posts-list .layout-full_padding #content, .posts-list .layout-parted .content-box{ background-color: transparent; } .posts-list.search-no-results .layout-full #content, .posts-list.search-no-results .layout-full_fixed #content, .posts-list.search-no-results .layout-full_padding #content, .posts-list.search-no-results .layout-parted .content-box, .posts-list .layout-full #secondary, .posts-list .layout-full_fixed #secondary, .posts-list .layout-full_padding #secondary{ background-color: #fff; } .bricks-frame{ margin: 0 auto; overflow: hidden; /* fix for horizontal scroll when bricks take full width */ } .posts-list .content-box{ padding-top: 40px; padding-bottom: 40px; } .posts-list .no-bottom-padding .content-box{ padding-bottom: 0; } .posts-list .no-top-padding .content-box{ padding-top: 0; } .posts-list #secondary{ margin-top: 40px; } .posts-list .no-top-padding #secondary{ margin-top: 0; } .archive-item, .grid-master{ float: left; } .posts-list .sticky{ border-top: 4px solid #ff0000; } .bricks-frame .formatter, .post_theme_options .formatter{ padding: 40px; } .bricks-frame .formatter{ background-color: #fff; } .post-media { position: relative; } .item-image a{ position: relative; height: 100%; } .item-image a::before{ content: ""; opacity: 0; background-color: #000; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 4; transition: opacity .5s; } .item-image:hover a::before{ opacity: .7; } .item-image a::after{ /* use !important to prevent issues with browser extensions that change fonts */ /*noinspection CssNoGenericFontName*/ font-family: 'a13-icomoon' !important; /*noinspection CssUnknownProperty*/ speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; /*noinspection CssUnknownProperty*/ -moz-osx-font-smoothing: grayscale; /* position and look */ content: "\e114"; opacity: 0; position: absolute; z-index: 5; top: 50%; left: 50%; font-size: 48px; color: #fff; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: opacity .5s; } .item-image:hover a::after{ opacity: 1; } h2.post-title { color: #222; font-size: 1.57em; line-height: 1.3; word-wrap: break-word; } h2.post-title:hover a { color: #000; } .post-meta + h2.post-title{ padding-top: .5em; } .archive-item .post-title:first-child{ margin-top: 0; } .post-format-link-icon{ margin-left: 10px; } .format-link .post-title a{ text-decoration: underline; } /* in quote/link post format*/ .cite-author{ margin-top: 25px; display: block; } /* post layouts on posts list */ .posts_vertical_no_padding .formatter{ padding-left: 0; padding-right: 0; } .posts_vertical_centered .formatter{ text-align: center; } .posts_horizontal .archive-item{ background-color: #fff; /*float: none;*/ /*margin-bottom: 10px;*/ } .posts_horizontal .post-media{ width: 420px; float: left; } .posts_horizontal .post-media + .formatter{ margin-left: 420px; } .posts_horizontal .real-content > .clear{ clear: none; } /* RESPONSIVE WP VIDEO */ .item-video div.wp-video{ width: 100% !important; } .item-video .mejs-container, .posts-list .item-video .mejs-container, .gallery-frame .archive-item .mejs-container, .single-album .archive-item .mejs-container{ width: 100% !important; height: auto !important; padding-top: 56.25%; } .item-video .mejs-overlay, .item-video .mejs-poster, .gallery-frame .archive-item .mejs-overlay, .gallery-frame .archive-item .mejs-poster, .single-album .archive-item .mejs-overlay, .single-album .archive-item .mejs-poster { width: 100% !important; height: 100% !important; } .item-video .mejs-mediaelement video, .gallery-frame .archive-item .mejs-mediaelement video, .single-album .archive-item .mejs-mediaelement video{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } /* images slider */ .item-slider{ overflow: hidden; position: relative; /* slider pagination on posts list */ } .item-slider img{ display: block; } .slidesjs-container{ z-index: 0; } .slidesjs-pagination { padding: 0; margin: 0 0 30px 40px; position: absolute; bottom: 0; left: 0; z-index: 12; list-style: none; } .single-post .slidesjs-pagination, .page .slidesjs-pagination{ margin: 0 0 40px 60px; } .slidesjs-pagination li { float: left; margin: 0 2px; } .slidesjs-pagination li a { display: block; width: 7px; height: 0; padding-top: 7px; background-color: transparent; border: 2px solid #fff; -webkit-border-radius: 8px; border-radius: 8px; float: left; overflow: hidden; transition: background-color .35s; } .slidesjs-pagination li a:hover, .slidesjs-pagination li a.active{ background-color: #fff; } .more-link{ display: inline-block; line-height: 1.5em; font-size: .889em; font-weight: bold; } /* ============================================================================= Pagination ========================================================================== */ .navigation{ margin: 40px 0; padding: 0 120px;/* for next prev in pagination*/ text-transform: uppercase; background-color: #fff; text-align: center; position: relative; } .lazy-load-on .navigation{ display: none; } .navigation .nav-links{ font-size: 0;/* no space between links */ } .navigation a, .navigation span{ font-size: 10px; letter-spacing: 2px; text-transform: uppercase; background-color: transparent; display: inline-block; height: 40px; padding: 0 9px; margin: 0; color: #3D3D3D; line-height: 40px; } .navigation .next, .navigation .prev{ color: #222; padding: 0 20px; max-width: 80px; position: absolute; top: 0; left: 0; } .navigation .next{ left: auto; right: 0; } .navigation .current, .navigation a:hover{ color: #fff; background-color: #bbb; } .navigation .next:hover, .navigation .prev:hover{ background-color: #222; } /* Infinite scroll*/ #infscr-loading{ text-align: center; margin-top: 40px; } .load-more-button i{ margin-left: 10px; } .load-more-button{ background-color: #f2f2f2; color: #222; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 11px; height: 40px; line-height: 43px; padding: 0 10px; margin: 40px; cursor: pointer; position: relative; -webkit-border-radius: 4px; border-radius: 4px; transition: background-color .5s, color .5s; } .posts-list .load-more-button, .products-list .load-more-button{ margin: 30px 0 80px; } span.result-count{ display: none; } .load-more-button span.result-count{ display: block; position: absolute; right: 15px; top: 0; line-height: 43px; } .load-more-button.loading, .load-more-button:hover{ background-color: #222; color: #fff; } .load-more-button .ll-animation{ display: none; } .load-more-button.loading .ll-animation{ display: block; } .load-more-button.loading .text{ display: none; } #lazyload-indicator{ background-color: rgba(0,0,0,0.8); display: block; height: 40px; width: 40px; margin-bottom: 40px; -webkit-border-radius: 20px; border-radius: 20px; color: #fff; position: fixed; z-index: 125; bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); /* for showing/hiding */ visibility: visible; opacity: 1; transition: opacity 0.3s; } #lazyload-indicator.idle{ opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; } .ll-animation{ z-index: 2000; width: 24px; height: 24px; position: absolute; top: 6px; left: 50%; margin-left: -14px; display: block; border: solid 2px transparent; border-top-color: #fff; border-left-color: #fff; -webkit-border-radius: 14px; border-radius: 14px; -webkit-animation: ll-animation 400ms linear infinite; animation: ll-animation 400ms linear infinite; opacity: 1; transition: opacity .2s; } .idle .ll-animation{ -webkit-animation: none; animation: none; opacity: 0; } @-webkit-keyframes ll-animation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ll-animation { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } .lt-ie10 #lazyload-indicator{ padding-top: 0; } .lt-ie10 .ll-animation{ display: none; } /* ============================================================================= Works/Albums/People list ========================================================================== */ .single-album .layout-full #content, .albums-list-page .layout-full #content, .works-list-page .layout-full #content{ background-color: transparent; } .albums-list-page .pre-content-box, .works-list-page .pre-content-box{ background-color: #fff; } .object-item{ overflow: hidden; margin: 0; position: relative; /* fix flash on click in AJAX mode */ } .people-grid-container .object-item{ cursor: pointer; /* fix for hover on iOS */ } .variant-overlay .object-item .caption, .variant-overlay .object-item .cover, .variant-overlay .object-item .covering-image, .object-item > a, .gallery-frame .object-item .caption > a, .single-album .object-item .caption > a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .object-item > a, .object-item .caption > a{ z-index: 3; } .lt-ie10 .variant-overlay .object-item .caption > a{ background: url(images/ie9saver.gif) repeat; } .object-item .caption{ padding: 40px; box-sizing: border-box; } .variant-overlay .object-item .cover{ background-color: rgba(0,0,0,0.7); } .variant-overlay .object-item.type-video .cover{ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 50% 50%; } .variant-overlay .object-item .cover, .variant-overlay .object-item .covering-image{ transition: opacity .35s; opacity: 0; } .object-item .covering-image{ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); /* Standard syntax; must be last */ } .title-top .object-item .covering-image{ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); /* Standard syntax; must be last */ } .title-mid .object-item .covering-image{ background-image: radial-gradient(farthest-corner, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); } .title-mid.title-left .object-item .covering-image{ background-image: radial-gradient(farthest-corner at 0 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); } .title-mid.title-right .object-item .covering-image{ background-image: radial-gradient(farthest-corner at 100% 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); } .object-item > img{ display: block; height: auto; width: 100%; } .object-item .texts_group{ transition: transform .5s, opacity .5s; } .variant-overlay .texts_group{ position: absolute; left: 40px; right: 40px; opacity: 0; } .cover-no-hover .object-item .cover, .gradient-no-hover .object-item .covering-image, .texts-no-hover .object-item .texts_group{ opacity: 1; } .cover-no-hover .object-item:hover .cover, .gradient-no-hover .object-item:hover .covering-image, .texts-no-hover .object-item:hover .texts_group{ opacity: 0; } .cover-hover .object-item:hover .cover, .gradient-hover .object-item:hover .covering-image, .texts-hover .object-item:hover .texts_group{ opacity: 1; } .title-top .texts_group{ top: 40px; } .title-bottom .texts_group{ bottom: 40px; } .title-left .texts_group{ /*rtl:ignore*/ text-align: left; } .title-center .texts_group{ text-align: center; } .title-right .texts_group{ /*rtl:ignore*/ text-align: right; } .title-mid .texts_group{ top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .center_group{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .object-item h2{ color: #fff; font-size: 26px; line-height: 24px; margin: 0 0 5px 0; } /* lock icon */ .object-item h2 span{ padding: 2px 8px; } .object-item .subtitle{ opacity: 0.7; font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; font-weight: bold; } .cpt-categories{ font-size: 11px; margin-bottom: 10px; } .object-item .cpt-categories{ color: #b0b0b0; text-transform: uppercase; } .object-item .cpt-categories a{ color: #b0b0b0; } .object-item .excerpt{ line-height: 20px; color: #fff; font-size: 10px; font-weight: bold; letter-spacing: 3px; margin: 10px 0 0; opacity: 0.6; text-transform: uppercase; } .object-item .people-desc{ font-size: 12px; font-weight: bold; line-height: 1.5; max-height: 100px; overflow: hidden; opacity: 0.7; margin-top: 20px; } .object-item .socials{ margin-top: 30px; } .variant-overlay .object-item .icon, .variant-under .object-item .icon{ font-size: 44px; color: #fff; text-align: center; position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; opacity: 0; transition: opacity .3s; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* social icons plugin */ .object-item .social{ position: absolute; top: 40px; right: 40px; z-index: 5; opacity: 0; transition: transform .5s, opacity .3s; } .object-item:hover .social{ opacity: 1; } .social a.dot-irecommendthis{ color: #fff; /* need some default color */ line-height: 1; font-size: 16px; } /* cross effect */ .hover-effect-cross .object-item:hover .icon{ opacity: 1; } /* drop effect */ .hover-effect-drop .object-item > img{ -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); transition: transform .5s; } .hover-effect-drop .object-item:hover > img{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* shift effect */ .hover-effect-shift .object-item > img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); transition: transform .5s; } .hover-effect-shift .object-item:hover > img{ -webkit-transform: translateX(5%) scale(1.1); -ms-transform: translateX(5%) scale(1.1); transform: translateX(5%) scale(1.1); } /* pop text effect */ .hover-effect-pop .object-item .texts_group{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .hover-effect-pop .object-item:hover .texts_group { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* border effect */ .variant-overlay.hover-effect-border .object-item .caption{ border: 0 solid #fff; transition: border-width .5s; } .variant-overlay.hover-effect-border .object-item:hover .caption{ border-width: 25px; } .variant-under.hover-effect-border .object-item > a{ border: 0 solid #fff; box-sizing: border-box; transition: border-width .5s; } .variant-under.hover-effect-border .object-item:hover > a{ border-width: 25px; } /* scale down effect */ .hover-effect-scale-down .object-item{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition: transform .5s; } .hover-effect-scale-down .object-item:hover{ -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } .variant-under .caption{ background-color: #fff; } .variant-under .object-item h2, .variant-under .object-item .excerpt{ color: #141414; } /* ============================================================================= Category filter ========================================================================== */ .category-filter{ background-color: #fff; text-align: center; } .category-filter, .real-content .category-filter{/* when used in shortcode */ list-style-type: none; margin: 0; padding: 40px; } .category-filter li{ display: inline-block; } .category-filter a{ display: block; line-height: 1.8em; font-size: 14px; color: #aaa; text-transform: uppercase; text-decoration: none; font-weight: bold; margin: 0 10px; cursor: pointer; } .category-filter .selected a, .category-filter a:hover{ color: #000; text-decoration: none; } /* ============================================================================= Sidebar filter ========================================================================== */ .widget_filter li{ margin: 0 -40px; } .widget_filter li a{ display: block; line-height: 17px; font-size: 10px; font-weight: bold; color: #aaa; text-transform: uppercase; text-decoration: none; padding: 0 40px; } .widget_filter .selected a, .widget_filter a:hover{ background-color: #000; color: #fff; text-decoration: none; } .widget_filter li i{ margin-right: 7px; } .widget_filter li.selected i::before{ content: "\f14a"; } /* ========================================================================== Single albums ========================================================================== */ .js #gallery-media-collection{ margin: 0; padding: 0; list-style: none; } .loadingSpace, #loadingSpace{ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; bottom: 0; width: 100%; z-index: -5; } .gallery-frame .object-item, .single-album .object-item, .single-work .object-item{ cursor: pointer; } .gallery-frame iframe, .loadingSpace iframe, .single-album iframe{ border: none; display: block; margin: 0 auto; max-width: 100%; /* ratio 16:9 */ width: 480px; height: 270px; } .gallery-frame, .single-album .bricks-frame{ position: relative; } .single-album .album-content, .single-album .formatter{ background-color: #fff; } .custom-password-page.single-album .album-content, .custom-password-page.single-album .formatter{ background-color: transparent; } .album-content{ width: 460px; position: absolute; top: 0; /*rtl:ignore*/ left: 0; height: 100%; transition: left .5s; } .album-content-on-the-right .album-content{ /*rtl:ignore*/ left: auto; /*rtl:ignore*/ right: 0; } .album-content .inside{ padding: 60px; } .albums-nav{ margin: -10px 0 40px -10px; } .albums-nav a{ font-size: 14px; line-height: 30px; width: 30px; text-align: center; display: inline-block; } .albums-nav a.to-cpt-list{ padding: 0 10px; } .custom-fields a, .meta-data .cpt-categories a{ text-decoration: underline; } .real-content .cpt-categories, .meta-data .cpt-categories{ margin: 20px 0; } /* meta data */ .meta-data{ margin-top: 25px; font-size: 12px; } .custom-fields span{ display: block; margin-bottom: 20px; line-height: 1.6; word-wrap: break-word; } .custom-fields em{ font-weight: bold; text-transform: uppercase; display: block; font-style: normal; } /* share buttons */ .real-content .addtoany_share_save_container, .meta-data .addtoany_share_save_container{ margin-top: 35px; } /* bricks */ .object-item .center_group h2{ text-align: center; font-size: 14px; } .object-item .center_group .excerpt{ text-align: center; } /* proofing */ .object-item .proofing{ position: absolute; top: 20px; right: 20px; z-index: 3;/* above .object-item .icon */ } .object-item .proofing .p-id, .object-item .proofing i{ display: inline-block; vertical-align: top; padding: 0 7px; line-height: 50px; min-width: 36px; background-color: rgba(0,0,0,0.6); -webkit-border-radius: 25px; border-radius: 25px; color: #fff; cursor: text; text-align: center; transition: background-color 0.5s; } .object-item .proofing i:hover{ background-color: rgba(0,0,0,0.9); } .object-item .proofing .p-id:hover{ background-color: #000; } .object-item .proofing i{ position: relative; cursor: pointer; font-size: 20px; width: 50px; padding: 0; } .object-item .proofing i.p-comment{ left: 5px; } .object-item .proofing i.filled, .object-item .proofing i.filled:hover{ background-color: #20C063; } .object-item .proofing i.filled.p-check{ box-shadow: 0 0 3px rgba(0,0,0,0.5); } .object-item .proofing textarea{ position: absolute; top: 100%; right: 0; width: 250px; height: 80px; background-color: #fff; transition: opacity 0.3s; } .object-item .proofing textarea[readonly]{ opacity: .8; } /* finish proofing button */ #done-with-proofing{ position: fixed; z-index: 100; bottom: 50px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: block; height: 50px; background-color: rgba(0,0,0,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.5); overflow: hidden; visibility: visible; opacity: 1; cursor: pointer; -webkit-border-radius: 25px; border-radius: 25px; transition: opacity 0.3s, background-color 0.5s; } #done-with-proofing.idle{ opacity: 0; visibility: hidden; transition: opacity 0.3s, background-color 0.5s, visibility 0s 0.9s; } #done-with-proofing:hover, #done-with-proofing.done{ background-color: #20C063; } #done-with-proofing div{ position: relative; top: 0; opacity: 1; height: 50px; padding: 0 40px; min-width: 30px; color: #fff; font-size: 20px; white-space: nowrap; line-height: 50px; text-align: center; transition: top .3s, opacity .3s; } #done-with-proofing.loading, .object-item .proofing i.loading{ cursor: wait; transition: none; -webkit-animation: proof-blink 2s infinite; animation: proof-blink 2s infinite; } #done-with-proofing.loading div{ top: -100% } #done-with-proofing.done div{ top: -200% } #done-with-proofing.done .not-done{ top: -100% } #done-with-proofing.loading .done, #done-with-proofing.loading .not-done, #done-with-proofing .done, #done-with-proofing .loading, #done-with-proofing.done .not-done{ opacity: 0; } #done-with-proofing.loading .loading, #done-with-proofing.done .done{ opacity: 1; } @-webkit-keyframes proof-blink{ 0% { background-color: #20C063; } 50% { background-color: rgba(0,0,0,0.6); } 100% { background-color: #20C063; } } @keyframes proof-blink{ 0% { background-color: #20C063; } 50% { background-color: rgba(0,0,0,0.6); } 100% { background-color: #20C063; } } /* ========================================================================== Works/Albums Navigation ========================================================================== */ .cpt-nav{ background-color: #FAFAFA; height: 110px; position: relative; } .cpt-nav a{ color: #7A7A7A; font-size: 12px; font-weight: bold; text-transform: uppercase; text-align: center; position: absolute; top: 0; left: 0; line-height: 110px; min-width: 33.33%; transition: color .5s; } .cpt-nav a:hover{ color: #000; } .cpt-nav .to-cpt-list{ left: 33.33%; font-size: 14px; } .cpt-nav a[rel="prev"]{ left: 66.66%; } .layout-full_fixed .cpt-nav::before, .layout-full_fixed .cpt-nav::after{ content: ""; position: absolute; background-color: #FAFAFA; width: 3000px; top: 0; bottom: 0; left: 100%; } .layout-full_fixed .cpt-nav::after{ right: 100%; left: auto; } /* ========================================================================== Single work ========================================================================== */ .with-meta-fields .inside{ float: right; width: calc(100% - 250px); } .work-content .meta-data{ float: left; width: 210px; margin-top: 0; } /* similar works */ .similar-works{ margin-top: 50px; } .similar-works-frame{ margin-left: -10px; margin-bottom: 80px; } .similar-works .object-item{ width: calc(33.3333333% - 10px); margin: 10px 0 0 10px; } .similar-works h3{ text-align: center; margin: 0 0 25px; font-size: 14px; color: #222; } /* ============================================================================= Post lightbox ========================================================================== */ .a13-post-lightbox{ z-index: 23456; /* lower than theme lightbox for images */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ddd; overflow: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; } .a13-post-lightbox.show{ opacity: 1; visibility: visible; transition: opacity 0.6s; } .a13-post-lightbox-content{ max-width: 1160px; width: 100%; margin: 0 auto; opacity: 1; visibility: visible; /* delay cause we wait for preloader to hide */ transition: opacity 0.3s 0.3s, transform 0.3s; } .loading .a13-post-lightbox-content{ opacity: 0; visibility: hidden; -webkit-transform: translateY(100px) scaleX(0.95); transform: translateY(100px) scaleX(0.95); transition: opacity 0.9s, visibility 0s 0.9s, transform 0.9s; } .a13-post-lightbox-preloader{ opacity: 0; visibility: hidden; position: fixed; z-index: 2000; top: 50%; left: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; transition: opacity 0.3s, visibility 0s 0.3s; } .loading .a13-post-lightbox-preloader{ opacity: 1; visibility: visible; transition: opacity 0.3s; } .a13-post-lightbox-preloader::before{ position: absolute; top: 0; left: 50%; display: block; border: 5px solid transparent; border-radius: 50%; content: ''; margin-left: -40px; width: 70px; height: 70px; border-top-color: #000; border-left-color: #000; -webkit-animation: a13-post-lightbox-rotation 1.3s linear infinite; animation: a13-post-lightbox-rotation 1.3s linear infinite; } @-webkit-keyframes a13-post-lightbox-rotation { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes a13-post-lightbox-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .a13-post-lightbox .controls span{ position: fixed; top: 0; right: 0; background-color: rgba(0,0,0,0.3); color: #fff; cursor: pointer; font-size: 48px; text-align: center; line-height: 100px; height: 100px; width: 100px; opacity: 1; z-index: 15; transition: background-color 0.5s, opacity 1s; } .a13-post-lightbox .controls span.inactive{ pointer-events: none; opacity: 0.2; } .a13-post-lightbox .controls span:hover{ background-color: #000; } .a13-post-lightbox .controls .close{ right: 0; } .a13-post-lightbox .controls .next{ left: 100px; } .a13-post-lightbox .controls .prev{ left: 0; } .a13-post-lightbox-content .page-title{ color: #222; text-align: center; margin: 100px 0 80px; } .a13-post-lightbox-content .subtitle{ color: #888; font-size: 12px; letter-spacing: 6px; margin: -60px 0 60px; text-align: center; } /* ============================================================================= Flickity ========================================================================== */ body.single-album-scroller{ height: 100%; box-sizing: border-box; /* when slider is below header */ } body.single-album-scroller.admin-bar{ height: calc(100% - 32px); } body.single-album-scroller .whole-layout, body.single-album-scroller #mid{ height: 100%; /* pushes footer lower on smaller screens */ } body.single-album-scroller.site-layout-boxed #mid{ height: auto; } .a13-scroller-stuff{ position: relative; padding-top: 56.25%;/* 16:9 */ } .a13-scroller{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .scroll-below{ color: #fff; text-align: center; line-height: 30px; white-space: nowrap; background-color: #20C063; border: none; box-shadow: 0 0 3px rgba(0,0,0,0.5); padding: 10px 20px; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; opacity: 0; visibility: hidden; position:absolute; z-index: 100; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: opacity 3s, visibility 0s 3s; } .scroll-below.active, .scroll-below:hover{ visibility: visible; opacity: 1; transition: opacity 0.3s; } /* Flickity v2.0.8 https://flickity.metafizzy.co */ .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 10%; background: #000; background: rgba(0, 0, 0, 0.75); cursor: pointer; opacity: 1; /* vertically center */ -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: opacity .5s , background-color .5s ; } .flickity-prev-next-button:hover { background: #000; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F; } .flickity-prev-next-button:active { opacity: 0.6; } .flickity-prev-next-button.previous { left: 40px; } .flickity-prev-next-button.next { right: 40px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { /*rtl:ignore*/ left: auto; /*rtl:ignore*/ right: 40px; } .flickity-rtl .flickity-prev-next-button.next { /*rtl:ignore*/ right: auto; /*rtl:ignore*/ left: 40px; } .flickity-prev-next-button:disabled { opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #fff; } /* ---- 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 { /*rtl:ignore*/ direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; padding: 0 !important; background: #333; border: 2px solid #ddd; border-radius: 50%; opacity: 0.25; cursor: pointer; transition: opacity .5s; } .flickity-page-dots .dot:hover { opacity: .6; } .flickity-page-dots .dot.is-selected { opacity: 1; } /* ---- cells ---- */ .carousel-cell { width: 33%; height: 100%; margin-right: 0; overflow: hidden; position: relative; } .carousel-cell div.img{ background: no-repeat 50% 50% / cover; height: 100%; width: auto; position: relative; opacity: 0; transition: opacity .3s; } .closed-contain .carousel-cell div.img{ background-size: auto 100%; } /*lazy load*/ .carousel-cell div.img.flickity-bg-lazyloaded{ opacity: 1; } /* enlarged cell */ .carousel-cell.enlarge{ width: 100% !important; } .parallax .carousel-cell.enlarge div.img{ width: 100% !important; left: 0 !important; } .opened-contain .carousel-cell.enlarge div.img{ background-size: contain; } .opened-cover .carousel-cell.enlarge div.img{ background-size: cover; } /* text content */ .carousel-cell > a{ position: absolute; width: 100%; top: 0; left: 0; bottom: 0; } .carousel-cell .texts_group{ position: absolute; max-width: 100%; left: 20px; bottom: 20px; padding: 25px; } .page-dots .carousel-cell .texts_group{ bottom: 50px; } .carousel-cell strong.name{ font-size: 34px; color: #fff; letter-spacing: -1px; display: block; margin-bottom: 5px; } .carousel-cell strong.name:only-child{ margin-bottom: 0; } .carousel-cell .texts_group .excerpt{ font-size: 18px; color: #fff; } /* socials */ .carousel-cell .social{ position: absolute; top: 40px; right: 40px; z-index: 5; opacity: 0; transition: transform .5s, opacity .3s; } .carousel-cell:hover .social{ opacity: 1; } /* columns */ /* how to calculate below numbers - still unknown :-( */ .cells_20 .carousel-cell { width: 20%; } .cells_20.parallax .carousel-cell div.img{ width: 232%; left: -66%; } .cells_25 .carousel-cell { width: 25%; } .cells_25.parallax .carousel-cell div.img{ width: 199%; left: -49.5%; } .cells_33 .carousel-cell { width: 33%; } .cells_33.parallax .carousel-cell div.img{ width: 166%; left: -33%; } .cells_50 .carousel-cell { width: 50%; } .cells_50.parallax .carousel-cell div.img{ width: 133%; left: -16.5%; } .cells_66 .carousel-cell { width: 66%; } .cells_66.parallax .carousel-cell div.img{ width: 116.5%; left: -8.25%; } .cells_75 .carousel-cell { width: 75%; } .cells_75.parallax .carousel-cell div.img{ width: 110.8%; left: -5.4%; } .cells_90 .carousel-cell { width: 90%; } .cells_90.parallax .carousel-cell div.img{ width: 103.5%; left: -1.75%; } /* effects*/ .effect-opacity .carousel-cell div.img.flickity-bg-lazyloaded { opacity: 0.7; } .effect-opacity .carousel-cell.is-selected div.img.flickity-bg-lazyloaded { opacity: 1; } .effect-blur .carousel-cell div.img { -webkit-filter: blur(5px); filter: blur(5px); transition: opacity .3s, filter 0.3s; } .effect-grayscale .carousel-cell div.img { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: opacity .3s, filter 0.3s; } .effect-blur .carousel-cell.is-selected div.img, .effect-grayscale .carousel-cell.is-selected div.img { -webkit-filter: none; filter: none; } .effect-scale-down .carousel-cell{ -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); transition: transform 0.3s; } .effect-scale-down .carousel-cell.is-selected{ -webkit-transform: none; -ms-transform: none; transform: none; } /* ============================================================================= A13 slider ========================================================================== */ body.single-album-slider{ height: 100%; box-sizing: border-box; /* when slider is below header */ } body.single-album-slider.admin-bar{ height: calc(100% - 32px); } body.single-album-slider .whole-layout, body.single-album-slider #mid{ height: 100%; /* pushes footer lower on smaller screens */ } body.single-album-slider.site-layout-boxed #mid{ height: auto; } .a13-slider{ overflow: hidden; position: relative; padding-top: 56.25%;/* 16:9 */ } .a13-slider:focus{ outline: none!important; } .site-layout-boxed .a13-slider{ position: relative; padding-top: 56.25%;/* 16:9 */ } .slider-slides{ display: block; margin: 0!important; padding: 0; position: absolute; left: 0; width: 100%; top: 0; bottom: 0; opacity: 0; } .show-with-slider{ opacity: 0; } .slider-slides, .show-with-slider{ transition: opacity 1s; } .show-with-slider.show, .slider-slides.show{ opacity: 1; } .slider-slides img{ border: none; display: block; height: auto; outline: none; position: relative; width: auto; max-width: none !important; /* if any plugins want mess up slider */ } .slider-slides > li{ /* > prevents style interfering in slide description */ display: block; list-style: none; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 0; padding: 0 !important; /*visibility: visible!important;*/ } .slider-slides > li.prevslide{ z-index: 2; } .slider-slides > li.activeslide{ z-index: 3; } .slider-slides a.slide{ display: block; height: 100%; width: 100%; /*rtl:ignore*/ direction: ltr; } .slider-slides li.image-loading { background: transparent url(images/ajax-loader.gif) no-repeat center center; height: 100%; width: 100%; } .slider-slides li.image-loading img{ visibility: hidden; } .slider-slides li iframe, .slider-slides div.wp-video{ border: none; width: 100%; height: 100%; position: relative; } .slider-slides div.video-poster{ background-size: cover; background-position: 50% 50%; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 10; cursor: pointer; } .slider-slides div.video-poster::before{ content: "\e901"; position: absolute; top: 50%; left: 50%; z-index: 11; margin: -50px 0 0 -50px; width: 150px; height: 100px; line-height: 100px; font-size: 48px; text-align: center; background-color: rgba(0, 0, 0, 0.8); -webkit-border-radius: 6px; border-radius: 6px; color: #A7A7A7; font-family: "a13-icomoon", monospace; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; } .slider-slides div.mejs-container{ width: 100% !important; height: 100% !important; } /* SLIDER CONTROLS */ .slider-arrow{ position: absolute; top: 50%; /*rtl:ignore*/ left: 0; z-index: 5; margin-top: -20px; width: 150px; line-height: 40px; font-size: 40px; text-align: center; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.5); /* make sure it will be visible on white background */ cursor: pointer; transition: opacity .5s; opacity: 0.6; } .slider-arrow:hover{ opacity: 1; } .next-slide-control{ /*rtl:ignore*/ left: auto; /*rtl:ignore*/ right: 0; } .hide-items .slider-arrow{ opacity: 0; } .slider-controls{ position: absolute; bottom: 40px; right: 65px; z-index: 5; transition: bottom .5s, margin .5s, opacity .5s; } .thumbs-open .slider-controls{ bottom: 140px; } .hide-items .slider-controls{ opacity: 0; } .slider-play-button{ position: relative; display: inline-block; vertical-align: top; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.5); -webkit-border-radius: 22px; border-radius: 22px; transition: border-color .5s; margin-right: 30px; cursor: pointer; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.5);/* make sure it will be visible on white background */ } .slider-play-button:hover{ border-color: #fff; } .slider-play-button .circle{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; -webkit-border-radius: 22px; border-radius: 22px; background-color: rgba(255,255,255,0.2); } .slider-play-button::before{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; line-height: 42px; text-align: center; } .slider-play-button.play::before{ content: "\e900"; /* when slider is playing we display pause symbol button */ } span.slides-count{ color: #fff; display: inline-block; font-size: 16px; font-weight: bold; height: 40px; line-height: 16px; min-width: 40px; position: relative; } span.slides-count::after{ content: ''; height: 1px; width: 57px; /* 40px * sqrt(2)*/ position: absolute; bottom: 0; left: 50%; margin-left: -20px; /* not half of width of this element, but half of height of parent element */ background-color: rgba(255,255,255,0.5); box-shadow: 0 0 3px rgba(0,0,0,0.5);/* make sure it will be visible on white background */ -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } span.slides-count span{ display: block; height: 20px; text-align: left; text-shadow: 0 0 3px rgba(0,0,0,0.5); /* make sure it will be visible on white background */ } span.slides-count span.num{ padding-right: calc(50% + 5px); text-align: right; /* so it will be always close to divider line */ } span.slides-count span.of{ padding-left: calc(50% + 5px); padding-top: 4px; height: 16px; } /* SLIDE DESCRIPTION */ .slide-caption{ overflow: hidden; color: #B9B9B9; font-size: 13px; line-height: 20px; max-width: 45%; position: absolute; bottom: 40px; left: 65px; z-index: 30; transition: bottom .5s, margin .5s; } .thumbs-open .slide-caption{ bottom: 140px; } .slide-caption h2.title{ color: #fff; font-size: 22px; line-height: 24px; letter-spacing: -1px; margin: 0; } .slide-caption h2.title span{ padding: 15px; display: inline-block; } .slide-caption.with-description h2.title span{ padding-bottom: 0; } .slide-caption .description{ margin-top: 20px; } .slide-caption.with-color .description{ padding: 15px; margin-top: 0; max-height: 200px; overflow: auto; } .slide-caption.with-color .description .addtoany_list a > span { vertical-align: top; } .texts-opener{ display: none; width: 42px; height: 42px; margin-top: 30px; /* space from text that will show up */ border: 1px solid rgba(255,255,255,0.5); color: #fff; font-family: Georgia,sans-serif; font-weight: bold; text-align: center; line-height: 40px; font-size: 20px; cursor: pointer; -webkit-border-radius: 22px; border-radius: 22px; transition: border-color .5s; } .texts-opener:hover, .texts-opener.open{ border-color: #fff; } .slider-play-animation { height: 100px; width: 100px; margin: -50px 0 0 -50px; position: absolute; pointer-events: none; z-index: 5; top: 50%; left: 50%; } .slider-play-animation svg{ height: 100%; width: 100%; } /* Thumbnail Tray */ .thumb-tray-button{ display: inline-block; vertical-align: top; width: 42px; height: 42px; margin-right: 30px; border: 1px solid rgba(255,255,255,0.5); color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.5);/* make sure it will be visible on white background */ text-align: center; line-height: 42px !important; font-size: 14px; cursor: pointer; -webkit-border-radius: 22px; border-radius: 22px; transition: border-color .5s; } .thumb-tray-button:hover, .thumb-tray-button.active{ border-color: #fff; } .slider-thumb-tray{ height: 100px; overflow: hidden; position: absolute; bottom: -100px; left: 0; width: 100%; z-index: 40; transition: bottom .5s; } .thumbs-open .slider-thumb-tray{ bottom: 0; } .slider-thumb-tray .inner{ height: 100px; position: absolute; width: 100%; top: 15px; transition: top .3s; } .slider-thumb-list{ display: block; list-style: none; height: 100%; margin: 0 !important; padding: 0 !important; position: absolute; /*rtl:ignore*/ left: 0; } .slider-thumb-tray li{ cursor: pointer; /*rtl:ignore*/ float: left; height: 100%; overflow: hidden; width: 150px; position: relative; } .slider-thumb-tray.cursor-grab li, .slider-thumb-tray.cursor-grabbing li{ cursor: inherit; } .slider-thumb-list li.current-thumb, .slider-thumb-list li:hover{ -webkit-transform: translate(0, -15px); transform: translate(0, -15px); } .slider-thumb-list li div{ height: 100%; width: 100%; -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%); } .slider-thumb-list img{ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-height: 100%; min-width: 100%; } .slider-thumb-list li::before{ content: ""; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 1; z-index: 10; } .slider-thumb-list li.current-thumb::before, .slider-thumb-list li:hover::before{ opacity: 0; } .slider-thumb-list li.video::after{ content: "\e901"; position: absolute; top: 10px; right: 10px; z-index: 11; width: 40px; height: 30px; line-height: 30px; font-size: 16px; text-align: center; background-color: rgba(0, 0, 0, 0.8); -webkit-border-radius: 6px; border-radius: 6px; color: #A7A7A7; font-family: "a13-icomoon", monospace; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; } /* Gradient */ .a13-slider.gradient a.slide::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.8+100 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } /* PATTERNS */ .a13-slider.pattern a.slide::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; background: transparent url(images/overlays/pattern.png) 0 0 repeat; } .a13-slider.pattern-2 a.slide::before{ background-image: url(images/overlays/pattern2.png); } .a13-slider.pattern-3 a.slide::before{ background-image: url(images/overlays/pattern3.png); } .a13-slider.pattern-4 a.slide::before{ background-image: url(images/overlays/pattern4.png); } .a13-slider.pattern-5 a.slide::before{ background-image: url(images/overlays/pattern5.png); } /* ========================================================================== A13 sticky one page ========================================================================== */ /*! * fullPage 2.7.9 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */ html.fp-enabled, .fp-enabled body { margin: 0; padding: 0; overflow:hidden; /*Avoid flicker on slides transitions for mobile phones #336 */ -webkit-tap-highlight-color: rgba(0,0,0,0); } #superContainer { height: 100%; position: relative; /* Touch detection for Windows 8 */ -ms-touch-action: none; /* IE 11 on Windows Phone 8.1*/ touch-action: none; } .fp-section { position: relative; /* Safari<=5 Android<=3 */ box-sizing: border-box; } .fp-slide { float: left; } .fp-slide, .fp-slidesContainer { height: 100%; display: block; } .fp-slides { z-index:1; height: 100%; overflow: hidden; position: relative; /* Safari<=6 Android<=4.3 */ transition: all .3s ease-out; } .fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout:fixed; width: 100%; } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .fp-slidesContainer { float: left; position: relative; } .fp-controlArrow { -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ position: absolute; z-index: 4; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .fp-controlArrow.fp-prev { left: 15px; width: 0; border-width: 39px 34px 39px 0; border-color: transparent #fff transparent transparent; } .fp-controlArrow.fp-next { right: 15px; border-width: 39px 0 39px 34px; border-color: transparent transparent transparent #fff; } .fp-scrollable { overflow: scroll; } .fp-notransition { transition: none !important; } #fp-nav { position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0,0,0); } #fp-nav.right{ /*rtl:ignore*/ right: 17px; } #fp-nav.left{ /*rtl:ignore*/ left: 17px; } .fp-slidesNav{ position: absolute; z-index: 4; left: 50%; opacity: 1; } .fp-slidesNav.bottom { bottom: 17px; } .fp-slidesNav.top { top: 17px; } #fp-nav ul{ display:none; } #fp-nav ul, .fp-slidesNav ul { margin: 0; padding: 0; } #fp-nav ul li, .fp-slidesNav ul li { display: block; width: 14px; height: 20px; margin: 7px; position:relative; } .fp-slidesNav ul li { display: inline-block; } #fp-nav ul li a, .fp-slidesNav ul li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; } #fp-nav ul li a.active:not(.custom) span, .fp-slidesNav ul li a.active:not(.custom) span, #fp-nav ul li:hover a.active:not(.custom) span, .fp-slidesNav ul li:hover a.active:not(.custom) span{ height: 12px; width: 12px; margin: -6px 0 0 -6px; border-radius: 100%; } #fp-nav ul li a:not(.custom) span, .fp-slidesNav ul li a span { border-radius: 50%; position: absolute; z-index: 1; height: 4px; width: 4px; border: 0; background: #333; left: 50%; top: 50%; margin: -2px 0 0 -2px; transition: all .1s ease-in-out; } #fp-nav ul li a.custom span{ -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 20px; height: 20px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; top: -5px; } #fp-nav ul li:hover a.custom span, #fp-nav ul li a.custom.active span{ font-size: 28px; } #fp-nav ul li a span { transition: all .1s ease-in-out; } #fp-nav ul li:hover a:not(.custom) span, .fp-slidesNav ul li:hover a:not(.custom) span{ width: 10px; height: 10px; margin: -5px 0 0 -5px; } #fp-nav ul li .fp-tooltip { position: absolute; top: -2px; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; opacity: 0; width: 0; cursor: pointer; } #fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip { transition: opacity .2s ease-in; width: auto; opacity: 1; } #fp-nav ul li .fp-tooltip.right { /*rtl:ignore*/ right: 25px; } #fp-nav ul li .fp-tooltip.left{ /*rtl:ignore*/ left: 20px; } .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{ height: auto !important; } /* ========================================================================== Things added to fullpage.js and overwrites ========================================================================== */ /* overwrites */ #fp-nav ul li{ color: #fff; } #fp-nav ul li a, #fp-nav ul li .fp-tooltip{ color: inherit; } /* different position for default and custom bullet */ #fp-nav ul li .fp-tooltip{ top: 0; } #fp-nav ul li a.custom + .fp-tooltip{ top: -2px; } /* /overwrites */ /* additional styling */ .a13-sticky-one-page .formatter{ padding: 0; } .a13-sticky-one-page .vc_row:not(.vc_inner){ margin-left: 0; margin-right: 0; } body.a13-body-sticky-one-page.admin-bar .whole-layout{ margin-top: 0; } body.a13-body-sticky-one-page #header{ position: absolute; } body.a13-body-sticky-one-page .content-limiter{ max-width: 100%; } /* move fp-nav according to current layout */ .site-layout-bordered #fp-nav{ /*rtl:ignore*/ right: 47px; } .no-border-right #fp-nav{ /*rtl:ignore*/ right: 17px; } .header-side-right.header-vertical #fp-nav, .site-layout-bordered.no-border-right.header-side-right.header-vertical #fp-nav{ /*rtl:ignore*/ right: 297px; } .site-layout-bordered.header-side-right.header-vertical #fp-nav{ /*rtl:ignore*/ right: 327px; } /* ========================================================================== Image carousel tweak ========================================================================== */ .owl-carousel .owl-item .vc_item .vc_inner img{ display: table; margin: 0 auto; max-width: 100%; width: auto; } /* ========================================================================== Typed js effect ========================================================================== */ .a13-to-type .sentences-to-type{ display: none; } .a13-to-type.disabled-writing .sentences-to-type, .no-js .a13-to-type .sentences-to-type{ display: block; } .a13-to-type.disabled-writing .sentences-to-type span, .no-js .a13-to-type .sentences-to-type span{ display: block;/* separate lines */ } .typed-cursor{ opacity: 1; -webkit-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } /* ========================================================================== Visual Composer - various things ========================================================================== */ /* filter in post grid */ .vc_grid-filter { font-weight: bold; color: rgba(187, 187, 187, 1); margin-bottom: 40px; text-transform: uppercase; } /* buttons */ .vc_btn3.vc_btn3-size-xs { font-size: 11px; padding: 8px 24px 7px; } .vc_general.vc_btn3 { font-weight:bold; } /* ========================================================================== Visual Composer extend ========================================================================== */ .a13_gitem_team_member1 .vc_grid-item-mini, .a13_gitem_team_member2 .vc_grid-item-mini{ position: relative; } .a13_gitem_team_member1.center, .a13_gitem_team_member2.center{ text-align: center; } .a13_gitem_team_member1.left, .a13_gitem_team_member2.left{ /*rtl:ignore*/ text-align: left; } .team_grid_item_top_panel { text-transform: uppercase; font-weight: bold; } .team_grid_item_top_panel, .team_grid_item_bottom_panel{ height: 50%; font-weight: bold; position: relative; } .team_grid_item_content_box > div div{ width: 100%; } .a13_gitem_team_member1.variant2 .team_grid_item_bottom_panel { padding: 30px; top: 35%; } .a13_gitem_team_member1 .vc_is-hover .title_block_fade_out { display: none; } .gitem_full_height_zone .vc_gitem-row-position-middle, .gitem_full_height_zone .team_grid_item_content_box, .gitem_full_height_zone .vc_gitem-col{ height: 100%; } .gitem_full_height_zone .vc_gitem-col{ padding:0; } .a13_gitem_team_member1 .vc_gitem-zone-b, .a13_gitem_team_member2 .vc_gitem-zone-b{ transition: all .3s 0s !important; } .grid_item_subtitle { opacity: 0.7; position: relative; top: 68%; font-size: 10px; letter-spacing: 2px; } .grid_item_title { font-size: 19px; position: relative; top: 70%; } .grid_item_content { display: block; font-size: 12px; line-height: 1.5; max-height: 100px; overflow: hidden; opacity: 0.7; } .grid_item_socials { position: relative; top: 30px; } .a13_gitem_team_member2.variant2 .team_grid_item_bottom_panel { top: 43%; } .a13_gitem_team_member2.variant2 .vc_gitem-zone-c { background-color: #fff; color: #171717; text-transform: uppercase; } .a13_gitem_team_member2.variant2 .vc_gitem-zone-c .vc_gitem-post-meta-field-_subtitle { opacity: 0.6; } .a13_gitem_team_member2.variant2 .vc_gitem-zone-c h4 { text-transform: uppercase; } .a13_gitem_team_member1 .vc_gitem-zone-a::before { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); content: ""; display: block; height: 100%; width: 100%; } .a13_gitem_team_member1 .vc_gitem-zone-a .team_grid_item_content_box { background-color: transparent !important; } .team_grid_item_content_box { padding: 30px; } .a13_gitem_team_member1 .vc_gitem-zone-a .team_grid_item_content_box { padding: 10px; } /* CountDown shortcode*/ .a13_count_down { display: table; margin: 0 auto; } .a13_count_down.simple { align-items: center; display: flex; justify-content: center; } .a13_count_down.simple .block { display: flex; flex-wrap: wrap; justify-content: center; width: 100px; } .a13_count_down.simple .label { font-size: 14px; position: relative; text-align: center; text-transform: uppercase; top: -10px; width: 100%; } .a13_count_down.simple .value { text-align: center; width: 100%; font-size: 50px; font-weight: 700; } .a13_count_down .countdown-container { height: 130px; } .a13_count_down .time { border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); display: inline-block; text-align: center; position: relative; height: 95px; width: 65px; -webkit-perspective: 479px; perspective: 479px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .a13_count_down .count { background: #202020; color: #f8f8f8; display: block; font-family: 'Oswald', sans-serif; font-size: 40px; line-height: 95px; overflow: hidden; position: absolute; text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); top: 0; width: 100%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transform-style: flat; transform-style: flat; } .a13_count_down .count.top { border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 5px 5px 0 0; height: 50%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .a13_count_down .count.bottom { background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), transparent); background-image: linear-gradient(rgba(255,255,255,0.1), transparent); border-top: 1px solid #000; border-bottom: 1px solid #000; border-radius: 0 0 5px 5px; line-height: 0; height: 50%; top: 50%; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .a13_count_down .count.next { } .a13_count_down.flipping .label { display: flex; font-size: 20px; justify-content: center; margin-top: 5px; position: relative; top: 95px; width: 100%; } /* Animation start */ .a13_count_down .count.curr.top { -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 3; } .a13_count_down .count.next.bottom { -webkit-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); z-index: 2; } /* Animation end */ .a13_count_down .flip .count.curr.top { transition: all 250ms ease-in-out; -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); } .a13_count_down .flip .count.next.bottom { transition: all 250ms ease-in-out 250ms; -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } /* ========================================================================== Counter shortcode ========================================================================== */ .a13_counter{ text-align: center; } .a13_counter .number{ display: block; letter-spacing: -2px; } .a13_counter .finish-text{ visibility: hidden; margin-top: 15px; position: relative; } /* ========================================================================== Visual Composer progress bar shortcode tweak ========================================================================== */ .vc_progress_bar .vc_single_bar { border-radius: 0; box-shadow: none; height: 5px; margin-bottom: 40px; } .vc_progress_bar .vc_bar { border-radius: 0 !important; } .vc_progress_bar .vc_label { top: -30px; } .vc_progress_bar .vc_label_units { left: 0; margin-left: -20px; opacity: 0; position: absolute; transition: opacity .3s linear 0s, left 1s linear 0s; } .vc_progress_bar .vc_general.vc_single_bar .vc_label { color: #222222; padding: 0.5em 0; text-shadow: none !important; } /* ========================================================================== Visual Composer tab shortcode tweak ========================================================================== */ .vc_tta-style-a13_framework_tabs .vc_tta-tab > a { align-items: center; color: #dadada !important; display: flex !important; flex-wrap: wrap !important; justify-content: center; } .vc_tta-style-a13_framework_tabs .vc_tta-tab > a > * { text-transform: uppercase; width: 100%; } .vc_tta-style-a13_framework_tabs .vc_tta-tab > a > i { font-size: 40px !important; margin: 20px 0 !important; } .vc_tta-style-a13_framework_tabs .vc_tta-tab > a > span { font-size: 14px !important; letter-spacing: 4px; margin: 20px 0 0 !important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-blue .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-blue .vc_tta-tab:hover > a{ color: #5472D2!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-turquoise .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-turquoise .vc_tta-tab:hover > a{ color: #00C1CF!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-pink .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-pink .vc_tta-tab:hover > a{ color: #FE6C61!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-violet .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-violet .vc_tta-tab:hover > a{ color: #8D6DC4!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-peacoc .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-peacoc .vc_tta-tab:hover > a{ color: #4CADC9!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-chino .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-chino .vc_tta-tab:hover > a{ color: #CEC2AB!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-mulled-wine .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-mulled_wine .vc_tta-tab:hover > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-mulled-wine .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-mulled_wine .vc_tta-tab:hover > a{ color: #50485B!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-vista-blue .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-vista_blue .vc_tta-tab:hover > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-vista-blue .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-vista_blue .vc_tta-tab:hover > a { color: #75D69C!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-black .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-black .vc_tta-tab:hover > a{ color: #2A2A2A!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-grey .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-grey .vc_tta-tab:hover > a{ color: #EBEBEB!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-orange .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-orange .vc_tta-tab:hover > a{ color: #F7BE68!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-sky .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-sky .vc_tta-tab:hover > a{ color: #5AA1E3!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-green .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-green .vc_tta-tab:hover > a{ color: #6DAB3C!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-juicy-pink .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-juicy_pink .vc_tta-tab:hover > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-juicy-pink .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-juicy_pink .vc_tta-tab:hover > a { color: #F4524D!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-sandy-brown .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-sandy_brown .vc_tta-tab:hover > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-sandy-brown .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-sandy_brown .vc_tta-tab:hover > a { color: #F79468!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-purple .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-purple .vc_tta-tab:hover > a{ color: #B97EBB!important; } .vc_tta-style-a13_framework_tabs.vc_tta-color-white .vc_tta-tab.vc_active > a, .vc_tta-style-a13_framework_tabs.vc_tta-color-white .vc_tta-tab:hover > a{ color: #FFF!important; } /* ========================================================================== Post grid variants ========================================================================== */ .a13_post_grid_center{ text-align: center; } .a13_post_grid_left .vc_gitem-zone-c{ margin: -10px; } .a13_post_grid_left .a13_post_meta_data{ margin: 10px 0; } .a13_post_grid_full_row .vc_gitem-animated-block { width: 35%; } .a13_post_grid_full_row .vc_gitem-zone.vc_gitem-zone-c { width: 62%; } .a13_post_grid_simple_row, .a13_post_grid_simple_row2{ text-align: center; } .a13_post_grid_simple_row2{ border-top: 1px solid #F1F1F1; border-bottom: 1px solid #F1F1F1; margin-top: -1px; } /* ========================================================================== Testimonial shortcode ========================================================================== */ .a13_gitem_testimonial1 { display: table !important; margin: 0 auto; } .a13_gitem_testimonial1 .vc_gitem-zone-a{ border-radius: 70px; margin: 0 auto; width: 140px; } .a13_gitem_testimonial1 .fa { display: table; font-size: 25px; margin: 0 auto; opacity: 0.2; } .vc_gitem-post-meta-field-_testimonial { font-size: 16px; line-height: 1.3; margin-bottom: 25px; } .a13_testimonial_signature { font-size: 13px; font-weight: bold; letter-spacing: 1px; margin-top: 25px; color: #333; text-align: center; text-transform: uppercase; } /* ========================================================================== Grid element for posts ========================================================================== */ .post_theme_options.vc_gitem-zone-a .vc_gitem-row-position-top{ position: static; } .post_theme_options.vc-gitem-zone-height-mode-auto::before{ padding-top: 0; } /* ========================================================================== Grid element for products ========================================================================== */ .product_theme_options.vc_gitem-zone-a .vc_gitem-row-position-top{ position: static; } .product_theme_options.vc-gitem-zone-height-mode-auto::before{ display: none; } .product_theme_options .vc_gitem-link{ display: none; } .product_theme_options .woocommerce ul.products{ margin: 0; } .product_theme_options .woocommerce ul.products li.product{ float: none !important;/* 1 item per container */ margin: 0; padding: 0; position: relative; width: auto; } /* ========================================================================== Grid element for works & albums ========================================================================== */ /* take full width of grid element */ .album_theme_options .object-item, .work_theme_options .object-item{ float: none; } /* remove strange VC padding */ .album_theme_options .vc_gitem_row .vc_gitem-col, .work_theme_options .vc_gitem_row .vc_gitem-col{ padding: 0; } /* size Original */ .album_theme_options .vc_gitem_row, .work_theme_options .vc_gitem_row{ position: static; } /* ========================================================================== Main demo fly out ========================================================================== */ .flyout-box{ box-shadow: 0 0 12px rgba(0, 0, 0, 0.09); width: 170px; position: fixed; z-index: 2222; top: 43%; right: -170px; -webkit-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; transition: right .5s; } .flyout-box.open{ right: 0; } .flyout-box .links{ text-align: center; background: #fff; padding: 10px; min-height: 20px; position: relative; z-index: 1; -webkit-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } .demo-flyout.flyout-box .links{ background: #fff url(images/apollo13.png) 50% 20px no-repeat; padding-top: 54px; } .demo-flyout.flyout-box .links::before{ content: ""; display: block; background-color: #E5E5E5; width: 50px; height: 1px; margin: 0 auto 10px; } .flyout-box a{ display: block; color: #858585; font-weight: bold; line-height: 2em; letter-spacing: 0; font-size: 12px; margin-bottom: 4px; transition: color .3s; } .flyout-box a.buy{ color: #E82626; } .flyout-box a:hover{ text-decoration: underline; color: #000; } .flyout-box .drag-out{ position: absolute; top: 0; left: -35px; width: 35px; height: 35px; background-color: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.09); text-align: center; line-height: 35px; color: #838388; cursor: pointer; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; transition: color .3s; } .flyout-box .drag-out:hover{ color: #000; } /* ========================================================================== Side menu effects ========================================================================== */ .close-sidebar{ position: absolute; top: 15px; right: 15px; cursor: pointer; color: #ccc; font-size: 20px; padding: 5px; transition: color .3s; } .dark-sidebar .close-sidebar{ color: #fff; } .close-sidebar:hover{ color: #222; } .dark-sidebar .close-sidebar:hover{ color: #ccc; } /* Effects. 1-6 from left side, 7-12 from right side 1,7: Slide in on top 2,8: Reveal 3,9: Push 4,10: Slide along 5,11: Reverse slide out 6,12: Fall down */ .side-menu-eff-1 #side-menu, .side-menu-eff-3 #side-menu{ /*rtl:ignore*/ -webkit-transform: translate3d(-100%, 0, 0); /*rtl:ignore*/ transform: translate3d(-100%, 0, 0); } .side-menu-eff-7 #side-menu, .side-menu-eff-9 #side-menu{ /*rtl:ignore*/ -webkit-transform: translate3d(100%, 0, 0); /*rtl:ignore*/ transform: translate3d(100%, 0, 0); } .side-menu-eff-2.side-menu-open .to-move, .side-menu-eff-3.side-menu-open .to-move, .side-menu-eff-4.side-menu-open .to-move, .side-menu-eff-5.side-menu-open .to-move, .side-menu-eff-6.side-menu-open .to-move{ /*rtl:ignore*/ -webkit-transform: translate3d(320px, 0, 0); /*rtl:ignore*/ transform: translate3d(320px, 0, 0); } .side-menu-eff-8.side-menu-open .to-move, .side-menu-eff-9.side-menu-open .to-move, .side-menu-eff-10.side-menu-open .to-move, .side-menu-eff-11.side-menu-open .to-move, .side-menu-eff-12.side-menu-open .to-move{ /*rtl:ignore*/ -webkit-transform: translate3d(-320px, 0, 0); /*rtl:ignore*/ transform: translate3d(-320px, 0, 0); } .side-menu-eff-1.side-menu-open #side-menu, .side-menu-eff-3.side-menu-open #side-menu, .side-menu-eff-4.side-menu-open #side-menu, .side-menu-eff-5.side-menu-open #side-menu, .side-menu-eff-6.side-menu-open #side-menu, .side-menu-eff-7.side-menu-open #side-menu, .side-menu-eff-9.side-menu-open #side-menu, .side-menu-eff-10.side-menu-open #side-menu, .side-menu-eff-11.side-menu-open #side-menu, .side-menu-eff-12.side-menu-open #side-menu{ /*rtl:ignore*/ -webkit-transform: translate3d(0, 0, 0); /*rtl:ignore*/ transform: translate3d(0, 0, 0); visibility: visible; } .side-menu-eff-2 #side-menu, .side-menu-eff-8 #side-menu{ z-index: 0; visibility: hidden; } .side-menu-eff-2.side-menu-open #side-menu, .side-menu-eff-8.side-menu-open #side-menu{ visibility: visible; } .side-menu-eff-4 #side-menu, .side-menu-eff-11 #side-menu{ z-index: 0; /*rtl:ignore*/ -webkit-transform: translate3d(-50%, 0, 0); /*rtl:ignore*/ transform: translate3d(-50%, 0, 0); visibility: hidden; } .side-menu-eff-5 #side-menu, .side-menu-eff-10 #side-menu{ z-index: 0; /*rtl:ignore*/ -webkit-transform: translate3d(50%, 0, 0); /*rtl:ignore*/ transform: translate3d(50%, 0, 0); visibility: hidden; } /* shadow effect */ .side-menu-eff-5 #side-menu::after, .side-menu-eff-6 #side-menu::after, .side-menu-eff-11 #side-menu::after, .side-menu-eff-12 #side-menu::after{ position: absolute; top: 0; /*rtl:ignore*/ right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); content: ''; opacity: 1; transition: opacity .5s; } .side-menu-eff-5.side-menu-open #side-menu::after, .side-menu-eff-6.side-menu-open #side-menu::after, .side-menu-eff-11.side-menu-open #side-menu::after, .side-menu-eff-12.side-menu-open #side-menu::after{ width: 0; height: 0; opacity: 0; transition: opacity .5s, width .1s .5s, height .1s .5s; } .side-menu-eff-6 #side-menu, .side-menu-eff-12 #side-menu{ /*rtl:ignore*/ -webkit-transform: translate3d(0, -100%, 0); /*rtl:ignore*/ transform: translate3d(0, -100%, 0); z-index: 0; } /* fix of bottom padding, cause sidebar is hiding under footer*/ .side-menu-eff-2 #side-menu div.scroll-wrap, .side-menu-eff-4 #side-menu div.scroll-wrap, .side-menu-eff-5 #side-menu div.scroll-wrap, .side-menu-eff-6 #side-menu div.scroll-wrap, .side-menu-eff-8 #side-menu div.scroll-wrap, .side-menu-eff-10 #side-menu div.scroll-wrap, .side-menu-eff-11 #side-menu div.scroll-wrap, .side-menu-eff-12 #side-menu div.scroll-wrap{ padding-bottom: 80px; } /* IE 9 */ /* left side */ .lt-ie10 .side-menu-eff-1 #side-menu, .lt-ie10 .side-menu-eff-2 #side-menu, .lt-ie10 .side-menu-eff-3 #side-menu, .lt-ie10 .side-menu-eff-4 #side-menu, .lt-ie10 .side-menu-eff-5 #side-menu, .lt-ie10 .side-menu-eff-6 #side-menu{ /*rtl:ignore*/ left: -320px; z-index: 30; } .lt-ie10 .side-menu-eff-1.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-2.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-3.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-4.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-5.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-6.side-menu-open #side-menu{ /*rtl:ignore*/ left: 0; } /* right side */ .lt-ie10 .side-menu-eff-7 #side-menu, .lt-ie10 .side-menu-eff-8 #side-menu, .lt-ie10 .side-menu-eff-9 #side-menu, .lt-ie10 .side-menu-eff-10 #side-menu, .lt-ie10 .side-menu-eff-11 #side-menu, .lt-ie10 .side-menu-eff-12 #side-menu{ /*rtl:ignore*/ right: -320px; z-index: 30; } .lt-ie10 .side-menu-eff-7.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-8.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-9.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-10.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-11.side-menu-open #side-menu, .lt-ie10 .side-menu-eff-12.side-menu-open #side-menu{ /*rtl:ignore*/ right: 0; } /* ========================================================================== Social icons ========================================================================== */ .socials{ margin: 0; vertical-align: top; line-height: 0; /*remove white space*/ } .socials a{ display: inline-block; margin-left: 4px; height: 26px; width: 26px; line-height: 26px; color: #fff; text-align: center; text-decoration: none !important; font-size: 16px; transition: background-color .5s, color .5s, opacity .5s !important;; } .socials a:first-child{ margin-left: 0; } /* icons with background */ .socials.circles a{ -webkit-border-radius: 13px; border-radius: 13px; } .socials.white a{ background-color: #fff; color: #000; } .socials.black a{ background-color: #000; color: #fff; } .socials.semi-transparent a{ background-color: #fff; color: #000; opacity: 0.5; } .socials.color a{ background-color: #3498DB; color: #fff; } .color a.a13_soc-500px{ background-color: #A5A6A8; } .color a.a13_soc-behance{ background-color: #1769FF; } .color a.a13_soc-delicious{ background-color: #205CC0; } .color a.a13_soc-deviantart{ background-color: #768C82; } .color a.a13_soc-digg{ background-color: #1F6EBA; } .color a.a13_soc-dribbble{ background-color: #EB5991; } .color a.a13_soc-dropbox{ background-color: #007EE6; } .color a.a13_soc-facebook{ background-color: #4A73C9; } .color a.a13_soc-flickr{ background-color: #FF0084; } .color a.a13_soc-foursquare{ background-color: #25A0CA; } .color a.a13_soc-github{ background-color: #5D5D5D; } .color a.a13_soc-googleplus{ background-color: #E1695B; } .color a.a13_soc-instagram{ background-color: #3F729B; } .color a.a13_soc-lastfm{ background-color: #DE2539; } .color a.a13_soc-linkedin{ background-color: #0E76A8; } .color a.a13_soc-mailto{ background-color: #565656; } .color a.a13_soc-paypal{ background-color: #175C85; } .color a.a13_soc-pinterest{ background-color: #C8232C; } .color a.a13_soc-reddit{ background-color: #FF4500; } .color a.a13_soc-rss{ background-color: #EE802F; } .color a.a13_soc-sharethis{ background-color: #206E00; } .color a.a13_soc-skype{ background-color: #00AFF0; } .color a.a13_soc-spotify{ background-color: #80B719; } .color a.a13_soc-stumbleupon{ background-color: #27A036; } .color a.a13_soc-telegram{ background-color: #1E96C8; } .color a.a13_soc-tripadvisor{ background-color: #00a680; } .color a.a13_soc-tumblr{ background-color: #34526F; } .color a.a13_soc-twitter{ background-color: #00A0D1; } .color a.a13_soc-vimeo{ background-color: #86C9EF; } .color a.a13_soc-wordpress{ background-color: #21759B; } .color a.a13_soc-yahoo{ background-color: #8B39AF; } .color a.a13_soc-youtube{ background-color: #C4302B; } .color a.a13_soc-yelp{ background-color: #C41200; } .color a.a13_soc-vkontakte{ background-color: #4C75A3; } /* hovers after normal for proper overwrites */ .socials.white_hover a:hover{ background-color: #fff; color: #000; opacity: 1; } .socials.black_hover a:hover{ background-color: #000; color: #fff; opacity: 1; } .socials.semi-transparent_hover a:hover{ background-color: #fff; color: #000; opacity: 0.5; } .socials.color_hover a:hover{ background-color: #3498DB; color: #fff; opacity: 1; } .color_hover a.a13_soc-500px:hover{ background-color: #A5A6A8; } .color_hover a.a13_soc-behance:hover{ background-color: #1769FF; } .color_hover a.a13_soc-delicious:hover{ background-color: #205CC0; } .color_hover a.a13_soc-deviantart:hover{ background-color: #768C82; } .color_hover a.a13_soc-digg:hover{ background-color: #1F6EBA; } .color_hover a.a13_soc-dribbble:hover{ background-color: #EB5991; } .color_hover a.a13_soc-dropbox:hover{ background-color: #007EE6; } .color_hover a.a13_soc-facebook:hover{ background-color: #4A73C9; } .color_hover a.a13_soc-flickr:hover{ background-color: #FF0084; } .color_hover a.a13_soc-foursquare:hover{ background-color: #25A0CA; } .color_hover a.a13_soc-github:hover{ background-color: #5D5D5D; } .color_hover a.a13_soc-googleplus:hover{ background-color: #E1695B; } .color_hover a.a13_soc-instagram:hover{ background-color: #3F729B; } .color_hover a.a13_soc-lastfm:hover{ background-color: #DE2539; } .color_hover a.a13_soc-linkedin:hover{ background-color: #0E76A8; } .color_hover a.a13_soc-mailto:hover{ background-color: #565656; } .color_hover a.a13_soc-paypal:hover{ background-color: #175C85; } .color_hover a.a13_soc-pinterest:hover{ background-color: #C8232C; } .color_hover a.a13_soc-reddit:hover{ background-color: #FF4500; } .color_hover a.a13_soc-rss:hover{ background-color: #EE802F; } .color_hover a.a13_soc-sharethis:hover{ background-color: #206E00; } .color_hover a.a13_soc-skype:hover{ background-color: #00AFF0; } .color_hover a.a13_soc-spotify:hover{ background-color: #80B719; } .color_hover a.a13_soc-stumbleupon:hover{ background-color: #27A036; } .color_hover a.a13_soc-telegram:hover{ background-color: #1E96C8; } .color_hover a.a13_soc-tripadvisor:hover{ background-color: #00a680; } .color_hover a.a13_soc-tumblr:hover{ background-color: #34526F; } .color_hover a.a13_soc-twitter:hover{ background-color: #00A0D1; } .color_hover a.a13_soc-vimeo:hover{ background-color: #86C9EF; } .color_hover a.a13_soc-wordpress:hover{ background-color: #21759B; } .color_hover a.a13_soc-yahoo:hover{ background-color: #8B39AF; } .color_hover a.a13_soc-youtube:hover{ background-color: #C4302B; } .color_hover a.a13_soc-yelp:hover{ background-color: #C41200; } .color_hover a.a13_soc-vkontakte:hover{ background-color: #4C75A3; } /* icons without background */ .socials.icons-only a, .socials.icons-only a:hover{ background-color: transparent; } .socials.icons-only.white a{ color: #fff; } .socials.icons-only.black a{ color: #000; } .socials.icons-only.semi-transparent a{ color: #000; opacity: 0.5; } .socials.icons-only.color a{ color: #3498DB; } .icons-only.color a.a13_soc-500px{ color: #A5A6A8; } .icons-only.color a.a13_soc-behance{ color: #1769FF; } .icons-only.color a.a13_soc-delicious{ color: #205CC0; } .icons-only.color a.a13_soc-deviantart{ color: #768C82; } .icons-only.color a.a13_soc-digg{ color: #1F6EBA; } .icons-only.color a.a13_soc-dribbble{ color: #EB5991; } .icons-only.color a.a13_soc-dropbox{ color: #007EE6; } .icons-only.color a.a13_soc-facebook{ color: #4A73C9; } .icons-only.color a.a13_soc-flickr{ color: #FF0084; } .icons-only.color a.a13_soc-foursquare{ color: #25A0CA; } .icons-only.color a.a13_soc-github{ color: #5D5D5D; } .icons-only.color a.a13_soc-googleplus{ color: #E1695B; } .icons-only.color a.a13_soc-instagram{ color: #3F729B; } .icons-only.color a.a13_soc-lastfm{ color: #DE2539; } .icons-only.color a.a13_soc-linkedin{ color: #0E76A8; } .icons-only.color a.a13_soc-mailto{ color: #565656; } .icons-only.color a.a13_soc-paypal{ color: #175C85; } .icons-only.color a.a13_soc-pinterest{ color: #C8232C; } .icons-only.color a.a13_soc-reddit{ color: #FF4500; } .icons-only.color a.a13_soc-rss{ color: #EE802F; } .icons-only.color a.a13_soc-sharethis{ color: #206E00; } .icons-only.color a.a13_soc-skype{ color: #00AFF0; } .icons-only.color a.a13_soc-spotify{ color: #80B719; } .icons-only.color a.a13_soc-stumbleupon{ color: #27A036; } .icons-only.color a.a13_soc-telegram{ color: #1E96C8; } .icons-only.color a.a13_soc-tripadvisor{ color: #00a680; } .icons-only.color a.a13_soc-tumblr{ color: #34526F; } .icons-only.color a.a13_soc-twitter{ color: #00A0D1; } .icons-only.color a.a13_soc-vimeo{ color: #86C9EF; } .icons-only.color a.a13_soc-wordpress{ color: #21759B; } .icons-only.color a.a13_soc-yahoo{ color: #8B39AF; } .icons-only.color a.a13_soc-youtube{ color: #C4302B; } .icons-only.color a.a13_soc-yelp{ color: #C41200; } .icons-only.color a.a13_soc-vkontakte{ color: #4C75A3; } /* hovers after normal for proper overwrites */ .socials.icons-only.white_hover a:hover{ color: #fff; opacity: 1; } .socials.icons-only.black_hover a:hover{ color: #000; opacity: 1; } .socials.icons-only.semi-transparent_hover a:hover{ color: #fff; opacity: 0.5; } .socials.icons-only.color_hover a:hover{ color: #3498DB; opacity: 1; } .icons-only.color_hover a.a13_soc-500px:hover{ color: #A5A6A8; } .icons-only.color_hover a.a13_soc-behance:hover{ color: #1769FF; } .icons-only.color_hover a.a13_soc-delicious:hover{ color: #205CC0; } .icons-only.color_hover a.a13_soc-deviantart:hover{ color: #768C82; } .icons-only.color_hover a.a13_soc-digg:hover{ color: #1F6EBA; } .icons-only.color_hover a.a13_soc-dribbble:hover{ color: #EB5991; } .icons-only.color_hover a.a13_soc-dropbox:hover{ color: #007EE6; } .icons-only.color_hover a.a13_soc-facebook:hover{ color: #4A73C9; } .icons-only.color_hover a.a13_soc-flickr:hover{ color: #FF0084; } .icons-only.color_hover a.a13_soc-foursquare:hover{ color: #25A0CA; } .icons-only.color_hover a.a13_soc-github:hover{ color: #5D5D5D; } .icons-only.color_hover a.a13_soc-googleplus:hover{ color: #E1695B; } .icons-only.color_hover a.a13_soc-instagram:hover{ color: #3F729B; } .icons-only.color_hover a.a13_soc-lastfm:hover{ color: #DE2539; } .icons-only.color_hover a.a13_soc-linkedin:hover{ color: #0E76A8; } .icons-only.color_hover a.a13_soc-mailto:hover{ color: #565656; } .icons-only.color_hover a.a13_soc-paypal:hover{ color: #175C85; } .icons-only.color_hover a.a13_soc-pinterest:hover{ color: #C8232C; } .icons-only.color_hover a.a13_soc-reddit:hover{ color: #FF4500; } .icons-only.color_hover a.a13_soc-rss:hover{ color: #EE802F; } .icons-only.color_hover a.a13_soc-sharethis:hover{ color: #206E00; } .icons-only.color_hover a.a13_soc-skype:hover{ color: #00AFF0; } .icons-only.color_hover a.a13_soc-spotify:hover{ color: #80B719; } .icons-only.color_hover a.a13_soc-stumbleupon:hover{ color: #27A036; } .icons-only.color_hover a.a13_soc-telegram:hover{ color: #1E96C8; } .icons-only.color_hover a.a13_soc-tripadvisor:hover{ color: #00a680; } .icons-only.color_hover a.a13_soc-tumblr:hover{ color: #34526F; } .icons-only.color_hover a.a13_soc-twitter:hover{ color: #00A0D1; } .icons-only.color_hover a.a13_soc-vimeo:hover{ color: #86C9EF; } .icons-only.color_hover a.a13_soc-wordpress:hover{ color: #21759B; } .icons-only.color_hover a.a13_soc-yahoo:hover{ color: #8B39AF; } .icons-only.color_hover a.a13_soc-youtube:hover{ color: #C4302B; } .icons-only.color_hover a.a13_soc-yelp:hover{ color: #C41200; } .icons-only.color_hover a.a13_soc-vkontakte:hover{ color: #4C75A3; } /* ========================================================================== Some group Transitions ========================================================================== */ .to-move, #side-menu, .slider-thumb-list li{ transition: transform .5s, visibility .5s; } /* For elements that are also manipulated by JS */ .slider-slides li iframe, .slider-slides div.wp-video, .widget-slider-ctrls span, .slider-thumb-list li::before, .a13-slider.gradient a.slide::after, .a13-slider.pattern a.slide::before{ transition: opacity .5s; } h1 a,h2 a,h3 a,h4 a,h5 a, h6 a, a.post-title, .category-filter a, .navigation a, .foot-text a, .top-menu li, .top-menu a, .top-menu span.title, .top-menu i.sub-mark, .top-menu > li > a::before, .top-bar-container a, .posts-nav a span, .formatter a, .widget li a{ transition: background-color .5s, color .5s; } input, button[type="submit"], textarea{ transition: background-color .5s, border-color .5s, color .5s; } .tagcloud a, .under_content_tags a{ transition: all .4s; } /* ========================================================================== Post styles globals ========================================================================== */ .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .clear { clear: both; display: block; font-size: 0; height: 0; line-height: 0; } /* ========================================================================== Responsive design ========================================================================== */ @media only screen and (min-width: 1560px) { /* make sure that sidebar wont get too wide */ .layout-full .content-box{ width: calc(100% - 320px); } .no-sidebars .content-box{ width: auto; } .layout-full #secondary{ width: 320px; } } @media only screen and (min-width: 1640px) { /* make sure that sidebar wont get too wide */ .layout-full_padding .content-box{ width: calc(100% - 320px); } .no-sidebars .content-box{ width: auto; } .layout-full_padding #secondary{ width: 320px; } } @media only screen and (min-width: 1301px) { /* we return number much above any breakpoints that we use in JS - need for not null values */ body::after { content: 'narrow1500'; /* info for JS */ display: none; } } @media only screen and (max-width: 1400px) and (min-width: 1025px) { /* make sure that sidebar wont get too narrow */ .layout-full_padding.with-sidebar #col-mask{ /*rtl:ignore*/ right: 30%; } .page .layout-full_padding.with-sidebar .content-box .formatter, .single-post .layout-full_padding.with-sidebar .content-box .formatter{ /*rtl:ignore*/ padding: 60px 40px; } .layout-full_padding.with-sidebar .content-box{ width: 70%; /*rtl:ignore*/ left: 30%; } .layout-full_padding.with-sidebar #secondary{ /*rtl:ignore*/ left: 30%; width: 30%; } } @media only screen and (max-width: 1320px) and (min-width: 1025px) { /* make sure that sidebar wont get too narrow */ .layout-parted.with-sidebar #col-mask, .layout-full.with-sidebar #col-mask{ /*rtl:ignore*/ right: 30%; } .page .layout-parted.with-sidebar .content-box .formatter, .page .layout-full.with-sidebar .content-box .formatter, .single-post .layout-parted.with-sidebar .content-box .formatter, .single-post .layout-full.with-sidebar .content-box .formatter{ /*rtl:ignore*/ padding: 60px 40px; } .layout-parted.with-sidebar .content-box{ width: calc(70% - 10px); /*rtl:ignore*/ left: 30%; } .layout-full.with-sidebar .content-box{ width: 70%; /*rtl:ignore*/ left: 30%; } .layout-parted.with-sidebar #secondary, .layout-full.with-sidebar #secondary{ /*rtl:ignore*/ left: 30%; width: 30%; } .layout-padding #content{ margin: 0 20px; } } @media only screen and (max-width: 1150px) and (min-width: 1025px) { /* make sure that sidebar wont get too narrow */ .layout-full.left-sidebar #secondary{ /*rtl:ignore*/ padding-right: 10px; } .layout-full.right-sidebar #secondary{ /*rtl:ignore*/ padding-left: 10px; } } @media only screen and (max-width: 1300px) { body::after { content: 'narrow1300'; /* info for JS */ display: none; } /* remove bordered layout */ .site-layout-bordered .theme-borders, .site-layout-bordered .theme-borders > div{ display: none; height: auto; } .site-layout-bordered .whole-layout{ padding: 0; } .site-layout-bordered.no-border-top #side-menu, .site-layout-bordered.no-border-bottom #side-menu, .site-layout-bordered #side-menu, .site-layout-bordered #side-menu.at-right{ margin: 0; height: 100%; } .admin-bar.site-layout-bordered #side-menu, .admin-bar.site-layout-bordered.no-border-top #side-menu, .admin-bar.site-layout-bordered.no-border-bottom #side-menu, .admin-bar.site-layout-bordered.no-border-top.no-border-bottom #side-menu{ height: calc(100% - 32px); } .header-vertical.site-layout-bordered #header, .header-side-right.header-vertical.site-layout-bordered #header{ margin: 0; } .site-layout-bordered.header-horizontal #header{ top: 0; left: 0; right: 0; } .header-horizontal #header.narrow-header { left: 50%; } body.single-album-slider.header-horizontal.site-layout-bordered #footer{ margin-bottom: 0; } /* fix positioning of fp-nav according to current layout */ .site-layout-bordered #fp-nav{ right: 17px; } .site-layout-bordered.header-side-right.header-vertical #fp-nav{ /*rtl:ignore*/ right: 297px; } /* vertical header */ .header-vertical.site-layout-bordered #header, .header-vertical.site-layout-bordered.no-border-top #header, .header-vertical.site-layout-bordered.no-border-bottom #header, .header-vertical.site-layout-bordered.no-border-bottom.no-border-top #header{ min-height: 100vh; } .admin-bar.header-vertical.site-layout-bordered #header, .admin-bar.header-vertical.site-layout-bordered.no-border-top #header, .admin-bar.header-vertical.site-layout-bordered.no-border-bottom #header{ min-height: calc(100vh - 32px); } /* footer with unravel effect */ .site-layout-bordered #footer.unravel{ right: 0; left: 0; bottom: 0; } /* menu overlay */ .site-layout-bordered #menu-overlay{ top: 0; left: 0; right: 0; bottom: 0; } .admin-bar.site-layout-bordered #menu-overlay{ top: 32px; } .site-layout-bordered #menu-overlay, .site-layout-bordered.no-border-top #menu-overlay, .site-layout-bordered.no-border-bottom #menu-overlay{ height: 100%; } .admin-bar #menu-overlay, .admin-bar.site-layout-bordered #menu-overlay, .admin-bar.site-layout-bordered.no-border-top #menu-overlay, .admin-bar.site-layout-bordered.no-border-bottom #menu-overlay, .admin-bar.site-layout-bordered.no-border-bottom.no-border-top #menu-overlay{ height: calc(100% - 32px); } } @media only screen and (max-width: 1240px) { /* fix narrow horizontal header */ .header-horizontal #header.narrow-header{ left: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .header-horizontal #header.sticky-hide.narrow-header, .header-horizontal #header.hide-until-scrolled-to.narrow-header{ -webkit-transform: translate(0, -102%); -ms-transform: translate(0, -102%); transform: translate(0, -102%); /* 102% cause it leaves one pixel behind when doing 3d transforms */ } .site-layout-bordered.header-horizontal #header.narrow-header{ width: 100%; right: auto; } .no-border-right.header-horizontal #header.narrow-header, .no-border-left.header-horizontal #header.narrow-header{ /*rtl:ignore*/ left: 0; } } @media only screen and (max-width: 1024px) { body::after { content: 'narrow1024'; /* info for JS */ display: none; } /* general layout */ a.to-top { right: 20px; } #side-menu{ -webkit-overflow-scrolling: touch; /* better scroll on iOS */ } /* header */ #header-tools.only-menu{ /* we reset our hiding */ clip: auto; position: static; top: auto; left: auto; visibility: visible; height: auto; overflow: visible; opacity: 1; } #header-tools #mobile-menu-opener{ display: inline-block; } #basket-items-count{ left: 0; } a.logo{ white-space: normal; /* for text logo */ } /* vertical header */ .header-vertical #header{ position: fixed; width: 100%; } .header-vertical #header, .admin-bar.header-vertical #header, .header-vertical.site-layout-bordered #header, .header-vertical.site-layout-bordered.no-border-top #header, .header-vertical.site-layout-bordered.no-border-bottom #header, .header-vertical.site-layout-bordered.no-border-bottom.no-border-top #header, .admin-bar.header-vertical.site-layout-bordered #header, .admin-bar.header-vertical.site-layout-bordered.no-border-top #header, .admin-bar.header-vertical.site-layout-bordered.no-border-bottom #header, .admin-bar.header-vertical.site-layout-bordered.no-border-bottom.no-border-top #header{ min-height: 0; } .header-widgets{ display: none; } .header-vertical #header #footer{ display: none;/* for instant proper size header */ } .header-vertical .whole-layout > #footer{ display: block; } .header-vertical #header .head{ width: 100%; display: table; text-align: center; padding-bottom: 0 !important;/* for instant proper size header */ } .header-vertical #header .logo-container, .header-vertical #header #header-tools{ display: table-cell; vertical-align: middle; } .header-vertical #header .logo-container{ text-align: left; padding-right: 10px; } .header-vertical #header #header-tools{ text-align: right; padding-left: 10px; padding-top: 5px; /* some space when logo is small */ padding-bottom: 5px; } /* header search */ .header-vertical .search-container, .header-side-right.header-vertical .search-container{ top: 0; bottom: 0; /*rtl:ignore*/ right: auto; /*rtl:ignore*/ left: 0; width: 100%; } /* header horizontal */ .header-horizontal .mobile-menu .navigation-bar{ width: 0; padding: 0; position: static; } .header-horizontal .mobile-menu .logo-container{ width: 100%; } /* header multi line */ .header-type-multi_line .top-head{ display: table; padding: 0 40px; } .header-type-multi_line .logo-container{ display: table-cell; width: 100%; text-align: left; } .header-type-multi_line #header-tools, .header-type-multi_line .head .socials{ position: static; display: table-cell; -webkit-transform: none; -ms-transform: none; transform: none; } .header-type-multi_line #header-tools{ padding-right: 15px; } .header-type-multi_line #header-tools::before, .header-type-multi_line .head .socials::before{ display: inline-block; } .header-type-multi_line.mobile-menu .bottom-head{ border-top: none; } .header-type-multi_line.header-variant-menu_above.mobile-menu .bottom-head{ border-bottom: none; } /* ONE LINE LOGO CENTERED */ .header-variant-one_line_centered.mobile-menu .socials-cell, .header-variant-one_line_centered.mobile-menu .tools-cell { width: 40%; } .header-variant-one_line_centered.mobile-menu .menu-cell{ width: 20%; position: static; } header.header-variant-one_line_centered.mobile-menu .socials{ position: static; } .header-variant-one_line_centered.no-shield .logo-container { display: inline-block; position: static; -webkit-transform: none; -ms-transform: none; transform: none; } .header-variant-one_line_centered.mobile-menu .menu-cell .top-menu, .header-variant-one_line_centered.sticky-values.mobile-menu .menu-cell .top-menu{ width: auto; float: none; text-align: left; padding-bottom: 0; } .header-variant-one_line_centered.mobile-menu .menu-cell .right-part{ float: none; padding-top: 0; padding-bottom: 25px; } /* ONE LINE LOGO CENTERED WITH SHIELD */ .header-variant-one_line_centered.mobile-menu.with-shield .menu-cell { height: 40px; /* acts as min-height */ } /* MOBILE MENU */ .header-vertical .navigation-bar{ position: static; } .navigation-bar .menu-container{ display: none; /* so no flash of menu till we decide that menu should be visible */ } .desktop_menu .navigation-bar .menu-container{ display: block; } .mobile-menu .navigation-bar .menu-container{ width: 100%; position: absolute; left: 0; top: 100%; transition: background-color .5s; } .mobile-menu .navigation-bar ul{ display: none; opacity: 1; visibility: visible; position: static; border-top: none; padding: 10px 0; min-width: 0; box-shadow: none; overflow: hidden; } .mobile-menu .navigation-bar .top-menu{ padding: 25px 0; } /* all items */ .mobile-menu .navigation-bar .top-menu li{ white-space: normal; display: block; text-align: center; } .mobile-menu .navigation-bar .top-menu li a, .mobile-menu .navigation-bar .top-menu li span.title, .mobile-menu .navigation-bar .top-menu li li a, .mobile-menu .navigation-bar .top-menu li li span.title{ line-height: 36px; padding: 0 40px; } .mobile-menu .navigation-bar .top-menu li li a, .mobile-menu .navigation-bar .top-menu li li span.title{ line-height: 26px; } /* first level items */ .mobile-menu .navigation-bar .top-menu > li > a, .mobile-menu .navigation-bar .top-menu > li > span.title{ min-height: 36px; /* overwrite height from vertical header */ } /* parents items with openers */ .mobile-menu .navigation-bar .top-menu.opener-icons-on li.menu-parent-item, .mobile-menu .navigation-bar .top-menu.opener-icons-on li li.menu-parent-item{ padding-right: 0; } .mobile-menu .navigation-bar .top-menu.opener-icons-on li.menu-parent-item > a, .mobile-menu .navigation-bar .top-menu.opener-icons-on li.menu-parent-item > span.title { padding: 0 66px; } /* submenu openers */ .mobile-menu .navigation-bar .top-menu i.sub-mark{ height: 26px; right: 38px; margin-top: 6px; background-color: rgba(255,255,255,0.1); } .mobile-menu .navigation-bar .top-menu ul i.sub-mark{ height: 17px; line-height: 17px; } /* needed for vertical header when hover effect is added */ .mobile-menu .navigation-bar .top-menu.with-effect > li > a > span, .mobile-menu .navigation-bar .top-menu.with-effect > li > span.title > span { display: inline; } /* animate first level menu items after opening menu */ .mobile-menu .navigation-bar .top-menu > li{ opacity: 0; padding: 0; pointer-events: none; -webkit-transform: scale(1.1) translateY(-50%); -ms-transform: scale(1.1) translateY(-50%); transform: scale(1.1) translateY(-50%); transition: opacity .35s ease-out, transform .35s ease-out; } .mobile-menu .navigation-bar .open .top-menu > li{ opacity: 1; pointer-events: auto; -webkit-transform: none; -ms-transform: none; transform: none; } .mobile-menu .navigation-bar .open .top-menu > li:nth-child(1){transition-delay:.15s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(2){transition-delay:.2s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(3){transition-delay:.25s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(4){transition-delay:.3s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(5){transition-delay:.35s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(6){transition-delay:.4s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(7){transition-delay:.45s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(8){transition-delay:.5s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(9){transition-delay:.55s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(10){transition-delay:.6s} .mobile-menu .navigation-bar .open .top-menu > li:nth-child(11){transition-delay:.65s} /* MEGA MENU OVERWRITES */ /* borders in section mega menu */ .mobile-menu .navigation-bar .mega-menu > ul > li::before{ display: none; } .mobile-menu .navigation-bar .mega-menu > ul{ width: auto; } .mobile-menu .navigation-bar .mega-menu > ul > li{ float: none; border-left: none; width: auto; } /* END OF MOBILE MENU */ /* DYNAMIC SEARCH RESULTS */ .searchwp-live-search-result{ min-height: 70px; } .searchwp-live-search-result a{ padding-top: 10px; } .searchwp-live-search-result .icon{ height: 50px; width: 50px; line-height: 50px; -webkit-border-radius: 25px; border-radius: 25px; } .searchwp-live-search-result .title{ margin-left: 70px; } .searchwp-live-search-result time{ display: none; } .searchwp-live-search-result .excerpt{ margin-left: 70px; } /* footer */ #footer{ z-index: 8; /* below header */ } #footer.unravel{ position: relative; left: auto; bottom: auto; z-index: 8; } .site-layout-bordered.no-border-left #footer.unravel, .site-layout-bordered.no-border-right #footer.unravel, .site-layout-bordered.no-border-bottom #footer.unravel, .site-layout-bordered #footer.unravel{ /*rtl:ignore*/ right: auto; /*rtl:ignore*/ left: auto; bottom: auto; width: 100%; } .foot-items, #footer .foot-widgets{ padding: 0 60px; } .five-col .widget{ width: 30.3%; } .four-col .widget{ width: 46.99%; } .four-col .widget:nth-child(4n+1), .five-col .widget:nth-child(5n+1){ clear: none; } .five-col .widget:nth-child(3n+1), .four-col .widget:nth-child(2n+1){ clear: both; } /* content layouts */ .header-vertical #mid{ padding: 0; } .layout-padding #content{ margin: 0; } .with-sidebar .formatter{ padding: 40px; } .with-sidebar #col-mask{ /*rtl:ignore*/ right: 30%; } .with-sidebar .content-box{ /*rtl:ignore*/ left: 30%; width: calc(70% - 10px); } #secondary{ /*rtl:ignore*/ left: 30%; width: 30%; } /* comments */ .with-sidebar .comments-area{ margin: 40px -40px -40px; padding: 40px; } .comment .comment { margin-left: 20px; } /* single album slider */ .header-vertical.single-album .a13-slider{ left: 0; } .header-vertical.header-side-right.single-album .a13-slider{ /*rtl:ignore*/ right: 0; } /* single album bricks */ .album-content { left: 0; } .album-content{ position: static; width: auto; height: auto; float: none; } .custom-fields em{ display: inline; } .custom-fields em::after{ content: ":"; margin-right: 5px; } /* single album slider */ .a13-slider{ left: 0; } .header-side-right .a13-slider{ /*rtl:ignore*/ right: 0; } /* single work */ .with-meta-fields .inside{ float: none; width: auto; } .work-content .meta-data{ float: none; width: auto; margin-top: 40px; } /* Post lightbox */ .a13-post-lightbox .controls span{ font-size: 36px; line-height: 60px; height: 60px; width: 60px; } .a13-post-lightbox .controls .next{ left: 60px; } .a13-post-lightbox-content .page-title{ margin-top: 60px; } /* move fp-nav according to current layout */ .site-layout-bordered #fp-nav, .header-side-right.header-vertical #fp-nav, .site-layout-bordered.header-side-right.header-vertical #fp-nav, .site-layout-bordered.no-border-right.header-side-right.header-vertical #fp-nav{ /*rtl:ignore*/ right: 17px; } } @media only screen and (max-width: 782px) { /* header */ .admin-bar.header-horizontal #header{ margin-top: 46px; } .admin-bar.header-vertical #header{ top: 46px; } /* TOP CLOSABLE MESSAGE */ .admin-bar .top-message-container.top-screen{ top: 46px; } /* menu overlay */ .admin-bar #menu-overlay, .admin-bar.site-layout-bordered #menu-overlay, .admin-bar.site-layout-bordered.no-border-top #menu-overlay, .admin-bar.site-layout-bordered.no-border-bottom #menu-overlay, .admin-bar.site-layout-bordered.no-border-bottom.no-border-top #menu-overlay{ height: 100%; } .admin-bar #menu-overlay { top: 46px; } /* content */ .admin-bar .whole-layout{ margin-top: 46px; } body.single-album-slider.admin-bar{ height: calc(100% - 46px); } .admin-bar #side-menu { top: 46px; } .admin-bar.site-layout-bordered #side-menu, .admin-bar.site-layout-bordered.no-border-top #side-menu, .admin-bar.site-layout-bordered.no-border-bottom #side-menu, .admin-bar.site-layout-bordered.no-border-top.no-border-bottom #side-menu{ height: calc(100% - 46px); } } @media only screen and (max-width: 768px) { body::after { content: 'narrow768'; /* info for JS */ display: none; } /* wp-gallery */ .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item{ max-width: 25%; } /* menu */ .mobile-menu .navigation-bar .top-menu{ padding: 10px 0; } .header-variant-one_line_centered.mobile-menu .menu-cell .right-part{ padding-bottom: 10px; } /* title bar */ .title_bar_variant_classic .in{ text-align: center; display: block; } .title_bar_variant_classic .titles, .title_bar_variant_classic .breadcrumbs{ display: block; } .title-bar .breadcrumbs{ margin-top: 10px; text-align: center; } /* content layouts */ .with-sidebar .formatter{ padding: 60px; } #col-mask, .with-sidebar #col-mask{ /*rtl:ignore*/ right: auto; float: none; } #secondary, .left-sidebar #secondary, .content-box, .with-sidebar .content-box{ /*rtl:begin:ignore*/ float: none; left: auto; width: auto; margin-left: 0; margin-right: 0; /*rtl:end:ignore*/ } /* main sidebar */ #secondary{ /*rtl:ignore*/ padding-left: 60px; /*rtl:ignore*/ padding-right: 60px; } #secondary .widget{ width: 48%; float: left; } #secondary .widget:nth-child(even){ margin-left: 3.9%; } #secondary .widget:nth-child(odd){ clear: left; } /* bricks blog */ .bricks-frame .formatter{ padding: 40px; } .posts_horizontal .post-media{ float: none; width: auto; max-width: 420px; margin: 0 auto; } .posts_horizontal .post-media + .formatter{ margin-left: 0; } /* comments */ .with-sidebar .comments-area{ margin: 50px -60px -60px; padding: 40px 60px; } /* single album slider */ .thumb-tray-button{ margin-right: 15px; } .slider-play-button{ margin-right: 0; } span.slides-count{ display: none; } .slide-caption{ left: 40px; right: 40px; max-width: none; max-height: none; } .slide-caption.with-color .description{ max-height: 150px; overflow: auto; } .slider-controls{ right: 40px; } .thumbs-open .slide-caption, .thumbs-open .slider-controls{ bottom: 120px; } .texts-opener{ display: block; } .slide-caption h2.title, .slide-caption .description{ display: none; } /* single work */ /* similar works */ .similar-works .object-item{ width: calc(50% - 10px); } .similar-works .object-item:nth-child(1){ width: calc(100% - 10px); } } @media only screen and (max-width: 600px) { body::after { content: 'narrow600'; /* info for JS */ display: none; } /* general layout */ a.to-top { bottom: 40px; } /* 404 TEMPLATE */ .default404 .title-bar.outside .page-title{ line-height: 1.1em; } /* HEADER */ .admin-bar.header-horizontal #header{ transition: transform .8s cubic-bezier(0.645, 0.045, 0.355, 1), background-color .5s, margin-top .8s; } /* flexbox header */ .header-type-multi_line .top-head, .header-horizontal .head{ display: flex; align-items: center; flex-flow: row nowrap; justify-content: space-between; } .header-horizontal .mobile-menu .logo-container{ width: auto; flex: initial; display: block; } .header-horizontal #header-tools{ padding-right: 0; margin-left: auto; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; align-self: stretch; } .header-horizontal .head .socials{ padding-left: 10px; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; align-self: stretch; } /* IE 9 overwrites for flex-box */ .lt-ie10 .header-type-multi_line .top-head, .lt-ie10 .header-horizontal .head{ display: block; } .lt-ie10 .header-horizontal .mobile-menu .logo-container{ display: table-cell; width: 100%;/* We need 100% here so header tools will be pushed to edge */ } .lt-ie10 .header-horizontal #header-tools { display: table-cell; width: calc(100% - 10px); /*white-space: normal;*/ /* don't break line unless someone will need it */ } .lt-ie10 .header-horizontal .head .socials{ display: block; text-align: center; margin: 5px 0; } /* variants different behaviour */ .header-variant-one_line_centered .head{ display: table; } .header-variant-one_line_centered #header-tools{ display: block; } .header-variant-one_line_centered .head .socials{ padding-left: 0; display: block; } /* the same is defined in desktop styles with #header.header-type-multi_line .head ~1799 */ /*.header-type-multi_line .head{ display: block; }*/ /* other header changes */ .header-horizontal .head .socials.hide_on_mobile{ display: none; } .head .socials a{ margin-left: 3px; } .header-horizontal #header-tools::before, .header-horizontal .head .socials::before{ display: none; } .tools_button.hide_on_mobile{ display: none; } /* vertical header */ .header-vertical #header{ position: relative; } .admin-bar.header-vertical #header{ top: 0; } /* top bar */ .top-bar-container.hide_on_mobile{ display: none !important; } /*noinspection ALL*/ .admin-bar.header-horizontal #header.sticky-hide, .admin-bar.header-horizontal #header.sticky-hide.narrow-header, .header-horizontal #header.hide-until-scrolled-to, .header-horizontal #header.hide-until-scrolled-to.narrow-header{ -webkit-transform: translateY(calc(-102% - 46px)); -ms-transform: translateY(calc(-102% - 46px)); transform: translateY(calc(-102% - 46px)); } .admin-bar.header-horizontal #header.sticky-values{ margin-top: 0; /* when scrolled down there is no more admin bar */ } /* menu overlay */ .admin-bar #menu-overlay, .admin-bar.site-layout-bordered #menu-overlay, .admin-bar.site-layout-bordered.no-border-top #menu-overlay{ top: 0; } #menu-overlay { padding: 20px 45px; } .admin-bar #menu-overlay { padding: 45px; } .close-menu { right: 10px; } .admin-bar .close-menu{ top: 56px; } /* top closable message */ .top-message{ display: block; } .top-message .message{ display: block; min-height: 26px; height: auto; } .top-message .button span{ margin-left: 0; margin-top: 10px; } /* footer */ .foot-items, #footer .foot-widgets{ padding: 0 40px; } .five-col .widget, .three-col .widget{ width: 46.99%; } .three-col .widget:nth-child(3n+1), .five-col .widget:nth-child(3n+1){ clear: none; } .three-col .widget:nth-child(2n+1), .five-col .widget:nth-child(2n+1){ clear: both; } .f-links, .foot-text { float: none; text-align: center; max-width: none; } .f-links + .foot-text{ margin-top: 25px; } /* content layouts */ #secondary, .formatter, .with-sidebar .formatter{ padding: 40px; } .single-post .slidesjs-pagination, .page .slidesjs-pagination{ margin: 0 0 20px 40px; } /* password form */ .post-password-form input{ min-width: 50%; width: 50%; } .post-password-form input[type="submit"]{ min-width: 49.99%; } /* posts navigation */ .posts-nav, .posts-nav a{ display: block; width: auto; } .posts-nav a{ height: auto; padding: 15px 0; } /* comments */ .comments-area, .with-sidebar .comments-area{ margin: 40px -40px -40px; padding: 40px; } img.avatar{ -webkit-border-radius: 20px; border-radius: 20px; height: 40px; width: 40px; } .comment-body, .author-inside{ padding-left: 60px; } .comment .comment { margin-left: 0; } /* single album bricks */ .album-content .inside { padding: 40px !important; } /* proofing */ #done-with-proofing div{ padding: 0 20px; font-size: 16px; } /* single album slider */ .slider-controls, .slide-caption{ bottom: 20px; } .slider-arrow{ width: 100px; } /* scroller */ .flickity-prev-next-button { display: none; } /* works/albums naviagtion */ .cpt-nav{ height: 60px; } .cpt-nav a { line-height: 60px; } /* similar works */ .similar-works .object-item{ width: calc(100% - 10px); } /* Post lightbox */ .a13-post-lightbox .controls span{ font-size: 24px; line-height: 40px; height: 40px; width: 40px; } .a13-post-lightbox .controls .next{ left: 40px; } .a13-post-lightbox-content .page-title{ margin-top: 40px; } } @media only screen and (max-width: 480px) { /* wp-gallery */ .gallery .gallery-item{ max-width: 50%; } .gallery-columns-1 .gallery-item{ max-width: 100%; } /* footer */ .foot-widgets .foot-content{ margin-left: 0; } /* full width widgets */ #secondary .widget:nth-child(n), .foot-widgets .widget{ width: 100%; margin-left: 0; float: none; } /* center widgets content */ .widget{ text-align: center; } .widget h3.title{ text-align: center; } .widget_contact_info .with_icon{ padding-left: 0; } .widget_contact_info .with_icon > i{ position: static; display: inline-block; margin-right: 10px; } .widget_nav_menu li li a, .widget_nav_menu li li li a{ padding-left: 0; } .widget .socials{ text-align: center; } /* COLUMNS */ .left50, .right50{ width: auto; float: none; margin: 0; } } @media only screen and (max-width: 400px) { /* header */ .header-vertical .logo-container { padding: 0 20px; max-width: 50%; } .header-vertical #header .logo-container{ padding-left: 20px; } .header-vertical #header #header-tools{ padding-right: 20px; } .top-bar-container .top-bar, .header-horizontal #header .head{ /*rtl:ignore*/ padding-left: 20px; /*rtl:ignore*/ padding-right: 20px; } .header-type-multi_line .top-head{ padding: 0; } /* MOBILE MENU */ .mobile-menu .navigation-bar .top-menu li a, .mobile-menu .navigation-bar .top-menu li span.title, .mobile-menu .navigation-bar .top-menu li li a, .mobile-menu .navigation-bar .top-menu li li span.title{ padding: 0 20px; } .mobile-menu .navigation-bar .top-menu.opener-icons-on li.menu-parent-item > a, .mobile-menu .navigation-bar .top-menu.opener-icons-on li.menu-parent-item > span.title { /*rtl:ignore*/ padding-right: 46px; /*rtl:ignore*/ padding-left: 46px; } .mobile-menu .navigation-bar .top-menu i.sub-mark{ right: 18px; } /* header search */ .search-container .search{ padding: 0 20px; } .search-container .close{ right: 20px; } .search-container .a13icon-search{ left: 20px; } /* title bar */ .title-bar.outside .overlay-color { padding: 20px; } /* footer */ .foot-items, #footer .foot-widgets{ padding: 0 20px; } /* content layouts */ .formatter, .with-sidebar .formatter{ padding: 20px; } #secondary, #side-menu div.scroll-wrap{ /*rtl:ignore*/ padding: 40px 20px; } .single-post .slidesjs-pagination, .page .slidesjs-pagination{ margin-left: 20px; } /* comments */ .comments-area, .with-sidebar .comments-area{ margin: 40px -20px -20px; padding: 20px; } /* single album bricks */ .album-content .inside { padding: 20px !important; } .object-item .caption{ padding: 20px; } .variant-overlay .texts_group{ left: 20px; right: 20px; } .title-top .texts_group{ top: 20px; } .title-bottom .texts_group{ bottom: 20px; } /* single album slider */ .slide-caption{ left: 20px; right: 20px; } .slider-controls{ right: 20px; } .slider-arrow{ width: 70px; } }