/* TABLE OF CONTENTS 1. Theme-specific variables and classes 2. Default tag's settings 3. Form fields settings 4. WP styles and Screen readers 5. Theme grid 6. Page layouts 7. Section's decorations 7.1 Header: Logo and Menu 7.2 Sliders 7.3 Post info (page/post title, category or tag name, author, meta, etc.) 7.4 Post Formats 7.5 Paginations 8. Single page parts 8.1 Post header 8.2 Post footer 8.3 Post author 8.4 Related posts 8.5 Comments 8.6 Page 404 8.7 Page 'No search results' and 'No archive results' 8.8 Author's page 9. Sidebars 10. Footer areas 11. Utils 12. Registration and Login popups 13. Third part plugins -------------------------------------------------------------- */ @import "../../../css/_mixins.scss"; @import "../../../css/_theme-vars.scss"; @import "_skin-vars.scss"; /* 1. Theme-specific variables and classes -------------------------------------------------------------- */ :root { // Constants --theme-var-koef_narrow: 0.75; // Narrow content width multiplier --theme-var-menu_side: 6rem; // Width of the side menu // Permanent values --theme-var-rad50: calc( 50% * var(--theme-var-rad_koef) ); --theme-var-rad1em: calc( 1em * var(--theme-var-rad_koef) ); --theme-var-rad4: calc( 4px * var(--theme-var-rad_koef) ); --theme-var-rad3: calc( 3px * var(--theme-var-rad_koef) ); --theme-var-rad2: calc( 2px * var(--theme-var-rad_koef) ); // Calculations --theme-var-page: var(--theme-var-page_width); // Page width --theme-var-sidebar_width_max: 500px; // Max width of the sidebar. // Dev can use var(--theme-var-sidebar_width) instead digits // to limit a max value with a current value of the option --theme-var-sidebar_width_min: 150px; // Min width of the sidebar --theme-var-sidebar_gap_width_max: 100px; // Max gap between the content and sidebar --theme-var-sidebar_gap_width_min: 0px; // Min gap between the content and sidebar @include page_dimensions; // JS vars --fixed-rows-height: 0px; } .body_style_boxed { --theme-var-page_boxed: calc( var(--theme-var-page_width) + var(--theme-var-page_boxed_extra) * 2 ); // Width of the whole page (boxed) --theme-var-page: calc( var(--theme-var-page_boxed) - var(--theme-var-page_boxed_extra) * 2 ); // Page width @include page_dimensions; } .accent1 { color: var(--theme-color-text_link); } .accent2 { color: var(--theme-color-text_link2); } .accent3 { color: var(--theme-color-text_link3); } .accent1_bg { background-color: var(--theme-color-text_link); color: var(--theme-color-inverse_text); } .accent2_bg { background-color: var(--theme-color-text_link2); color: var(--theme-color-inverse_text); } .accent3_bg { background-color: var(--theme-color-text_link3); color: var(--theme-color-inverse_text); } .alter_bg { background-color: var(--theme-color-alter_bg_color); } .alter_text { color: var(--theme-color-alter_text); } .alter_link { color: var(--theme-color-alter_link); } .alter_link2 { color: var(--theme-color-alter_link2); } .alter_link3 { color: var(--theme-color-alter_link3); } .extra_bg { background-color: var(--theme-color-extra_bg_color); } .extra_text { color: var(--theme-color-extra_text); } .extra_link { color: var(--theme-color-extra_link); } .extra_link2 { color: var(--theme-color-extra_link2); } .extra_link3 { color: var(--theme-color-extra_link3); } /* 2. Default tag's settings -------------------------------------------------------------- */ html { font-size: 17px; } html[style*="overflow: hidden"] { overflow: hidden !important; width: auto; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, body[class*="scheme_"], .body_style_boxed .page_wrap { background-color: var(--theme-color-bg_color); } [class*="scheme_"], body[class*="scheme_"] { color: var(--theme-color-text); } /* // old way body.body_style_fullscreen.ua_safari:not(.sc_stack_section_present):not(.elementor-editor-active) .content_wrap_fullscreen, body.body_style_fullscreen.ua_ios:not(.sc_stack_section_present):not(.elementor-editor-active) .content_wrap_fullscreen { overflow: hidden; // Used to prevent the horizontal scroll bar appears on IOS. // But this rule broke sticky effect for sections - they are jumping down when any rows become fixed } */ // new way body.body_style_fullscreen .content_wrap_fullscreen { overflow: clip; } article, aside, details, footer, header, hgroup, nav, section { display: block; } /* Lists */ li > p+p { margin-top:0.5em; } ol, ul { padding-left:1.5em; } li > ol, li > ul, li > dl, dl > dl { margin-bottom:0 !important; } li > p { margin-bottom:0; } ul[class*="wp-block-"] { margin-bottom: 0; } ul.wp-block-archives-list, ul.wp-block-categories-list { padding-left:1.5em; } ul > li:before { color: var(--theme-color-text_link); } /* Links */ a { text-decoration:none; background:transparent; color: var(--theme-color-text_link); } a:hover { color: var(--theme-color-text_hover); } .color_style_link2 a { color: var(--theme-color-text_link2); } .color_style_link2 a:hover { color: var(--theme-color-text_hover2); } .color_style_link3 a { color: var(--theme-color-text_link3); } .color_style_link3 a:hover { color: var(--theme-color-text_hover3); } .color_style_dark a { color: var(--theme-color-text_dark); } .color_style_dark a:hover { color: var(--theme-color-text_link); } a, a:hover, :focus, a:focus, :active, a:active { outline: 0; } body.show_outline :focus, body.show_outline a:focus { outline: thin dotted !important; } a[href="javascript:void(0)"] { cursor: default; } a img { border: none; } a, button, input[type="button"], input[type="submit"] { //@include transition-colors; @include transition-all; } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { display:block; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, li a, [class*="color_style_"] h1 a, [class*="color_style_"] h2 a, [class*="color_style_"] h3 a, [class*="color_style_"] h4 a, [class*="color_style_"] h5 a, [class*="color_style_"] h6 a, [class*="color_style_"] li a { color: var(--theme-color-text_dark); } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, li a:hover { color: var(--theme-color-text_link); } .color_style_link2 h1 a:hover, .color_style_link2 h2 a:hover, .color_style_link2 h3 a:hover, .color_style_link2 h4 a:hover, .color_style_link2 h5 a:hover, .color_style_link2 h6 a:hover, .color_style_link2 li a:hover { color: var(--theme-color-text_link2); } .color_style_link3 h1 a:hover, .color_style_link3 h2 a:hover, .color_style_link3 h3 a:hover, .color_style_link3 h4 a:hover, .color_style_link3 h5 a:hover, .color_style_link3 h6 a:hover, .color_style_link3 li a:hover { color: var(--theme-color-text_link3); } .color_style_dark h1 a:hover, .color_style_dark h2 a:hover, .color_style_dark h3 a:hover, .color_style_dark h4 a:hover, .color_style_dark h5 a:hover, .color_style_dark h6 a:hover, .color_style_dark li a:hover { color: var(--theme-color-text_link); } /* Tables */ table { border-collapse: collapse; } .sc_table table th, table th { padding: 1em; } .sc_table table td, table td { padding: 1em 0.8em; } table th+th, table th+td, table td+th, table td+td { border-left: none; } table > p { margin: 0 !important; } .sc_table table tr:first-child th, .sc_table table tr:first-child td { font-weight: 500; } table th { @include font(16px, '', 500, normal); text-transform: none; text-align: center; } caption { font-weight: 700; text-align: center; } table td, table th + td, table td + td { color: var(--theme-color-text); } table td { font-size: 15px; } table th { color: var(--theme-color-extra_dark); background-color: var(--theme-color-extra_bg_color); } table th b, table th strong { color: var(--theme-color-extra_dark); } table > tbody > tr:nth-child(2n+1) > td { background-color: var(--theme-color-bg_color); } table > tbody > tr:nth-child(2n) > td { background-color: var(--theme-color-alter_bg_color); } table th a:hover { color: var(--theme-color-extra_dark); } /* Blockquotes*/ blockquote { position:relative; overflow: hidden; border: none; } blockquote:not(.has-text-align-right):not(.has-text-align-center) { text-align:left; } blockquote, blockquote[class*="wp-block-quote"][class*="is-"], .wp-block-quote:not(.is-large):not(.is-style-large), .wp-block-quote.is-large:not(.is-style-plain), .wp-block-quote.is-style-large:not(.is-style-plain), .wp-block-freeform.block-library-rich-text__tinymce blockquote { padding: 2.75em 2.9em; @include border-box; } blockquote[class*="wp-block-quote"][class*="is-style-large"], blockquote[class*="wp-block-quote"][class*="is-large"] { margin: 0 0 2em 0; } .wp-block-pullquote.is-style-solid-color > blockquote, .wp-block-column blockquote { margin: 0 !important; max-width: none !important; } .blog_mode_post blockquote, .blog_mode_page blockquote { margin: 1.8em 0; } .blog_mode_post .comments_list blockquote, .blog_mode_page .comments_list blockquote { margin: 1.5em 0; } blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } blockquote p { margin: 0; @include font(18px, 30px, 400); } .wp-block-pullquote.is-style-solid-color blockquote p { line-height: 1.5; } blockquote.has-text-align-right, blockquote.has-text-align-center { > .wp-block-quote__citation, > cite { display: inline-block; } } .wp-block-quote.is-style-large > cite { padding-left: 0; &:before { display: none; } } blockquote > cite, blockquote > p > cite, blockquote > .wp-block-pullquote__citation, .wp-block-quote .wp-block-quote__citation { display: block; @include font(19px, 28px, 500, normal); letter-spacing: 0; margin-bottom: 3px; margin-top: 1.35em; padding-left: 60px; position: relative; text-transform: none; &:before { background-color: currentColor; content: ""; display: block; height: 2px; left: 0; margin-top: 1px; position: absolute; top: 50%; width: 40px; } } blockquote .block-library-pullquote__content { margin-bottom: 2.5em; } .wp-block-quote.is-large .wp-block-quote__citation { text-align: right; font-size: inherit; } .wp-block-pullquote { padding: 0; } .wp-block-pullquote[class*="align"] blockquote { margin-left: 0; margin-right: 0; } section, div:not(.has-background), figure:not(.has-background) { & > blockquote:not(.has-background):not(.is-style-plain) { background-color: var(--theme-color-alter_bg_color); } } .wp-block-quote .wp-block-quote__citation { color: var(--theme-color-alter_dark) !important; } section, div:not(.has-text-color), figure:not(.has-text-color) { & > blockquote:not(.has-text-color):not(.is-style-plain) { &, p { color: var(--theme-color-alter_dark) !important; } a { color: var(--theme-color-text_link); &:hover { color: var(--theme-color-text_hover); } } dt, b, strong, i, em, mark, ins { color: var(--theme-color-alter_dark); } s, strike, del { color: var(--theme-color-alter_light); } code { color: var(--theme-color-text_dark); background-color: var(--theme-color-bg_color); border-color: var(--theme-color-bd_color); } &:not([class*="trx_addons_"]) > cite, &:not([class*="trx_addons_"]) > p > cite, &:not([class*="trx_addons_"]) > .wp-block-pullquote__citation, &:not([class*="trx_addons_"]) .wp-block-quote__citation { &:before { background-color: var(--theme-color-alter_link); } } } } [class*="type-cpt_"] [class*="_page_content"] blockquote { margin-left: 0; margin-right: 0; } /* drop-cap */ .has-drop-cap:not(:focus):first-letter { font-weight: 500; background-color: transparent; color: var(--theme-color-text_dark); font-size: 57px; margin: 11px 14px 0 0; text-align: left; min-width: 55px; } /* Other tags */ dd { margin-left: 1.5em; } dt, b, strong { font-weight: bold; } dfn, em, i { font-style: italic; } pre, code, kbd, tt, var, samp { font-family: "Courier New", Courier, monospace; font-size: 1em; letter-spacing:0; } pre { overflow: auto; max-width: 100%; } code { overflow: auto; max-width: 100%; padding: 0 1em; display: inline-block; vertical-align: middle; word-wrap:break-word; color: var(--theme-color-alter_text); background-color: var(--theme-color-alter_bg_color); border: 1px solid var(--theme-color-alter_bd_color); } pre > code { display: block; vertical-align: top; padding: 1em; } code a { color: var(--theme-color-alter_link); } code a:hover { color: var(--theme-color-alter_hover); } abbr, acronym { cursor: help; } mark, ins { background-color:transparent; text-decoration: none; } mark { color: var(--theme-color-text_dark); } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 80%; } big { font-size: 120%; } [hidden], template { display: none; } hr { @include content-box; height: 0; border: none; border-top: 1px solid var(--theme-color-bd_color); margin-top: 6.7857em !important; margin-bottom: 6.7857em !important; } .wp-block-separator:not([class*="is-style"]) { width: 15%; } /* Fontello icons */ [class^="icon-"]:before, [class*=" icon-"]:before { @include font(inherit, inherit !important, inherit, inherit); display: inline-block; // Don't use vertical-align: top because meta row can be a tall when large author avatar is used; width:auto; margin:0; } /* Buttons in WP Editor */ .wp-editor-container { border-width: 0 !important; .quicktags-toolbar { border: 1px solid var(--theme-color-bd_color); &:empty { display: none; } input[type="button"] { background-color: var(--theme-color-alter_bg_color); border-color: var(--theme-color-alter_bd_color); color: var(--theme-color-alter_dark); @include box-shadow( 0 1px 0 0 var(--theme-color-alter_bd_hover) ); } input[type="button"]:hover, input[type="button"]:focus { background-color: var(--theme-color-alter_bg_hover); border-color: var(--theme-color-alter_bd_hover); color: var(--theme-color-alter_link); } } } /* Images */ img { max-width: 100%; height: auto; /* Only height: auto; not both! */ vertical-align:top; } /* Fix for WordPress 5.9+ */ /*.wp-block-gallery.has-nested-images,*/ figure.wp-block-gallery { @include flex; @include flex-direction(row); @include flex-wrap(wrap); @include flex-justify-content(flex-start); @include flex-align-items(stretch); } .wp-block-gallery { margin-top: 0; margin-bottom: 1.2em; .blocks-gallery-grid { margin-top: 0; margin-bottom: 0 !important; } .widget & .blocks-gallery-grid { font-size: inherit; padding-left: 0; } } .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { @include flex; @include flex-direction(column); @include flex-align-items(flex-start); // Old value is center @include flex-justify-content(flex-start); } figure, .wp-caption, .wp-caption-overlay .wp-caption { border: 0; margin: 0; padding: 0; overflow: hidden; position: relative; max-width:100%; @include flex; @include flex-direction(column); @include flex-align-items(center); @include flex-justify-content(flex-start); } figure, .wp-caption { margin-bottom: 1em; } p figure, p .wp-caption { margin-bottom: 0; } figure figcaption, .wp-block-image figcaption, .wp-block-audio figcaption, .wp-block-video figcaption, .wp-block-embed figcaption, .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption, .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption, .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption, .wp-caption .wp-caption-text, .wp-caption .wp-caption-dd, .wp-caption-overlay .wp-caption .wp-caption-text, .wp-caption-overlay .wp-caption .wp-caption-dd { @include font(16px, 20px, 400, normal); @include border-box; background: none; bottom: auto; color: var(--theme-color-text); display: block; left: auto; margin: 0; max-height: 6em; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding: 14px 0 5px !important; position: relative; right: auto; text-align: left; top: auto; @include flex-grow(0); @include flex-basis(auto); @include thin-scrollbar(6px); a { color: var(--theme-color-text_dark); &:hover { color: var(--theme-color-text_hover); } } } .blocks-gallery-grid figcaption, .wp-block-gallery figcaption { flex-grow: 0; } .wp-block-image .alignleft figcaption, img.alignleft figcaption, .wp-block-image .alignright figcaption, img.alignright figcaption, .wp-block-image .aligncenter figcaption, img.aligncenter figcaption, .wp-block-image.is-resized figcaption { display: block; color: var(--theme-color-text_dark) !important; } .wp-block-freeform.block-library-rich-text__tinymce dd.wp-caption-dd a { display: inline; } svg:not(:root) { overflow: hidden; } /* Gallery */ .gallery { margin: 0 -5px; @include flex; @include flex-direction(row); @include flex-align-items(flex-start); @include flex-justify-content(center); @include flex-wrap(wrap); } .gallery-item { overflow:hidden; @include border-box; padding: 0 5px; } figure.gallery-item { @include flex-align-items(center); } @for $i from 9 through 1 { .gallery-columns-#{$i} .gallery-item { width: 100% / $i !important; } } .gallery-item a { display: block; } .gallery-item a img { border: none; display: block; width: 100%; } .gallery-columns-9 .gallery-caption { font-size: 0.625em; line-height: 1.75em; } .gallery-columns-8 .gallery-caption { font-size: 0.6875em; line-height: 1.75em; } .gallery-columns-7 .gallery-caption { font-size: 0.75em; line-height: 1.75em; } .gallery-columns-6 .gallery-caption { font-size: 0.8125em; line-height: 1.75em; } /* Audio and Video */ audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } video { width: 100%; height: auto; } audio:not([controls]) { display: none; height: 0; } iframe, video, embed { max-width: 100%; min-height: 100px; vertical-align: top; } .wp-block-embed.alignwide iframe, .wp-block-embed.alignfull iframe { width: 100%; } figure.wp-block-audio, figure.wp-block-video, figure.wp-block-embed { overflow: visible; } figure.wp-block-audio { display: block; } figure.wp-block-audio figcaption, figure.wp-block-video figcaption, figure.wp-block-embed figcaption { margin: 1em 0 0 !important; padding: 0 !important; } /* Embed blocks */ .wp-block-embed.wp-has-aspect-ratio { display: block; } .wp-block-embed .wp-block-embed__wrapper { position: relative; max-width: 100%; } .wp-block-embed.alignwide .wp-block-embed__wrapper iframe, .wp-block-embed.alignfull .wp-block-embed__wrapper iframe, .wp-block-embed[class*="wp-embed-aspect-"] .wp-block-embed__wrapper iframe { @include abs-cover; @include box(100%, 100%); } .wp-block-embed.is-type-video.alignwide .wp-block-embed__wrapper:before, .wp-block-embed.is-type-video.alignfull .wp-block-embed__wrapper:before, .wp-block-embed.is-type-video[class*="wp-embed-aspect-"] .wp-block-embed__wrapper:before { content: ""; display: block; width: 0; } .wp-block-embed.is-type-video.alignwide .wp-block-embed__wrapper:before, .wp-block-embed.is-type-video.alignfull .wp-block-embed__wrapper:before, .wp-block-embed.is-type-video.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before { padding-top: 56.25%; } .wp-block-embed.is-type-video.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before { padding-top: 42.85%; } .wp-block-embed.is-type-video.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before, .wp-block-embed.is-type-video.wp-embed-aspect-2-1 .wp-block-embed__wrapper:before { padding-top: 50%; } .wp-block-embed.is-type-video.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before { padding-top: 75%; } .wp-block-embed.is-type-video.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before { padding-top: 100%; } .wp-block-embed.is-type-video.wp-embed-aspect-3-4 .wp-block-embed__wrapper:before { padding-top: 133.33%; } .wp-block-embed.is-type-video.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before { padding-top: 177.77%; } .wp-block-embed.is-type-video.wp-embed-aspect-9-18 .wp-block-embed__wrapper:before, .wp-block-embed.is-type-video.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before { padding-top: 200%; } .wp-block-embed.is-type-video.wp-embed-aspect-9-21 .wp-block-embed__wrapper:before { padding-top: 233.33%; } /* WordPress Playlist */ .wp-playlist-light { background: none; color: var(--theme-color-alter_dark); .wp-playlist-current-item { background: var(--theme-color-alter_bg_color); } } .wp-playlist-light .wp-playlist-caption { color: var(--theme-color-text_dark); } .wp-playlist-light .wp-playlist-playing { background: none; color: var(--theme-color-alter_link); * { color: var(--theme-color-alter_link) !important; } } .wp-playlist-item { border-color: var(--theme-color-bd_color); } .wp-playlist .wp-playlist-current-item img { background-color: #fff; } .wp-playlist .mejs-container .mejs-controls { background: var(--theme-color-alter_bg_color); } /* Cover image */ .wp-block-cover-image, .wp-block-cover { color: #fff; @include border-box; } .wp-block-cover-image .wp-block-cover-text, .wp-block-cover .wp-block-cover-text { max-width: 90%; @include border-box; } .wp-block-cover-image p, .wp-block-cover p { margin-bottom: 0 !important; line-height: 1.5em !important; } .wp-block-cover-image p + p, .wp-block-cover p + p { margin-top: 1em !important; } .wp-block-cover-image a, .wp-block-cover a { color: inherit; } /* Media & Text */ .wp-block-media-text .has-medium-font-size { line-height: 1.5em; } .wp-block-media-text .has-large-font-size { line-height: 1.4em; } .wp-block-media-text .has-huge-font-size { line-height: 1.3em; } /* Calendar */ .wp-block-calendar table th { color: var(--theme-color-alter_dark); background-color: var(--theme-color-alter_bg_color); } /* Custom font size in blocks */ .has-large-font-size, .has-huge-font-size { line-height: 1.4em; } /* Core columns */ .wp-block-columns { @include flex-wrap(nowrap); margin-bottom: 0; } .wp-block-column:nth-child(odd) { margin-right: 0; } .wp-block-column:nth-child(even) { margin-left: 0; } .wp-block-column:not(:first-child) { margin-left: calc( var(--theme-var-grid_gap) / 2 ); } .wp-block-column:not(:last-child) { margin-right: calc( var(--theme-var-grid_gap) / 2 ); } /* Kadence columns in the editor */ .kt-gutter-default > .innerblocks-wrap > .editor-inner-blocks > .editor-block-list__layout > [data-type="kadence/column"] { margin-right: var(--theme-var-grid_gap); } /* Kadence columns in the frontend */ .kt-gutter-default > .wp-block-kadence-column { margin-right: var(--theme-var-grid_gap); } /* CoBlocks columns in the frontend */ .has-small-gutter > [class*="wp-block-coblocks-"]:not(:first-child) { margin-left: calc( var(--theme-var-grid_gap) / 2 ); } .has-small-gutter > [class*="wp-block-coblocks-"]:not(:last-child) { margin-right: calc( var(--theme-var-grid_gap) / 2 ); } /* Groups */ .wp-block-group.has-background { padding: 1.5em 2em; margin-bottom: 1.5em; } .wp-block-group.has-background .wp-block-group__inner-container > :last-child { margin-bottom: 0; } /* Alignment */ .alignleft { display: inline-block; vertical-align: top; float: left; margin-right: 1.7em !important; margin-bottom: 1em !important; margin-top: 0.5em !important; } .alignright { display: inline-block; vertical-align: top; float: right; margin-left: 1.7em !important; margin-bottom: 1em !important; margin-top: 0.5em !important; } .aligncenter { display: block; text-align:center; clear: both; margin-left: auto !important; margin-right:auto !important; margin-bottom: 1em !important; } figure.alignleft, figure.alignright { margin-top:0.5em !important; } .wp-block-gallery[class*="align"] { @include flex; } .has-left-content { text-align: left; @include flex-justify-content(flex-start); } .has-center-content { text-align: center; @include flex-justify-content(center); } .has-right-content { text-align: right; @include flex-justify-content(flex-end); } /* Align left and right inside narrow content without sidebars */ .sidebar_hide.narrow_content .alignleft.is-style-alignfar, .sidebar_hide.narrow_content .is-style-alignfar > .alignleft, .sidebar_hide.narrow_content .alignright.is-style-alignfar, .sidebar_hide.narrow_content .is-style-alignfar > .alignright { max-width: calc( ( var(--theme-var-page) - var(--theme-var-content_narrow) ) / 2 - var(--theme-var-grid_gap) ); } .sidebar_hide.narrow_content .alignleft.is-style-alignfar, .sidebar_hide.narrow_content .is-style-alignfar > .alignleft { float: left; margin: 1em 1em 1em calc( ( var(--theme-var-page) - var(--theme-var-content_narrow) ) / -2 ); } .sidebar_hide.narrow_content .alignright.is-style-alignfar, .sidebar_hide.narrow_content .is-style-alignfar > .alignright { float: right; margin: 1em calc( ( var(--theme-var-page) - var(--theme-var-content_narrow) ) / -2 ) 1em 2em; } .sidebar_hide.narrow_content .wp-block-image > .alignleft.is-style-alignfar, .sidebar_hide.narrow_content .wp-block-image.is-style-alignfar > .alignleft, .sidebar_hide.narrow_content .wp-block-image > .alignright.is-style-alignfar, .sidebar_hide.narrow_content .wp-block-image.is-style-alignfar > .alignright { max-width: none !important; } /* Align left and right inside normal content without sidebars */ .sidebar_hide.normal_content .alignleft.is-style-alignfar, .sidebar_hide.normal_content .is-style-alignfar > .alignleft { float: left; margin: 1em 1em 1em calc( ( var(--theme-var-page) - var(--theme-var-content) ) / -2 ); } .sidebar_hide.normal_content .post_info_vertical_present .alignleft.is-style-alignfar, .sidebar_hide.normal_content .post_info_vertical_present .is-style-alignfar > .alignleft { margin-left: calc( -1 * ( 17.647% + ( var(--theme-var-page) - var(--theme-var-content) ) / 2 ) ); } .sidebar_hide.normal_content .alignright.is-style-alignfar, .sidebar_hide.normal_content .is-style-alignfar >.alignright { float: right; margin: 1em calc( ( var(--theme-var-page) - var(--theme-var-content) ) / -2 ) 1em 2em; } .sidebar_hide.normal_content .wp-block-image > .alignleft.is-style-alignfar, .sidebar_hide.normal_content .wp-block-image.is-style-alignfar > .alignleft, .sidebar_hide.normal_content .wp-block-image > .alignright.is-style-alignfar, .sidebar_hide.normal_content .wp-block-image.is-style-alignfar > .alignright { max-width: none !important; } /* Wide and Full blocks */ .alignfull > img, .alignwide > img { max-width: none; width: 100%; } body.sidebar_hide .alignwide { position: relative; z-index: 1; left: calc( -88vw / 2 + 100% / 2 ); width: 88vw; max-width: none; } body.sidebar_hide.narrow_content .alignwide, body.sidebar_hide.normal_content .alignwide { left: calc( var(--theme-var-page) / -2 + 50% ); width: var(--theme-var-page); } .sidebar_hide.normal_content .post_info_vertical_present .alignwide { left: calc( var(--theme-var-page) / -2 + 50% - 8.8235% ); } .sidebar_hide.expand_content .post_info_vertical_present .alignwide { left: calc( -88vw / 2 + 100% / 2 - 8.8235% ); } body.sidebar_hide .alignfull { position: relative; z-index: 1; margin-left : calc( -100vw / 2 + 100% / 2 + 8px ); margin-right : calc( -100vw / 2 + 100% / 2 + 8px ); width: calc( 100vw - 16px ); max-width : calc( 100vw - 16px ); } .sidebar_hide:not(.narrow_content) .post_info_vertical_present .alignfull { margin-left: calc( -100vw / 2 + 100% / 2 + 8px - 8.8235% ); } /* 3. Form fields settings -------------------------------------------------------------- */ /* Common rules */ form { margin-bottom:0; } button, input, optgroup, select, textarea, textarea.wp-editor-area { font-family: inherit; font-size: 1em; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ } button:not(.components-button) { overflow: visible; } /* Buttons */ form button:not(.components-button), input[type="button"], input[type="reset"], input[type="submit"], .theme_button, .post_item .more-link, .wp-block-button__link, /* ThemeREX Addons*/ .sc_button:not(.sc_button_simple), .sc_form button, .sc_portfolio_preview_show .post_readmore { @include theme_button_filled; } .wp-block-button__link { white-space: normal; } .sidebar_small_screen_above .sidebar_control { @include theme_button_colors; padding: 17px 57px; align-items: center; vertical-align: top; @include font(16px, 21px, 500); position: relative; border-width: 0 !important; text-align: center; } .sidebar_small_screen_above .sidebar_control:after { content: '\e828'; font-family: $theme_icons; display: inline-block; @include square( 2em); @include transition-properties(color,background-color,transform); @include abs-rt(1em, 0.7em); } .sidebar_small_screen_above .sidebar.opened .sidebar_control:after { @include rotate(180deg); } .sidebar_small_screen_above .sidebar_control { color: var(--theme-color-inverse_link) !important; background-color: var(--theme-color-text_link) !important; &:focus, &:hover { color: var(--theme-color-inverse_link) !important; background-color: var(--theme-color-text_hover) !important; } } /* Square Buttons */ .wp-block-button.is-style-squared .wp-block-button__link { @include border-radius(0); } /* Buttons */ .sc_button_wrap { .sc_button { margin-bottom: 10px; } margin-bottom: -10px; } /* Buttons hover */ form button:not(.components-button):hover, form button:not(.components-button):focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="button"]:hover, input[type="button"]:focus, .post_item .more-link:hover, .comments_wrap .form-submit input[type="submit"]:hover, .comments_wrap .form-submit input[type="submit"]:focus, .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus, /* ThemeREX Addons */ .sc_button_default:hover, .sc_button_default:focus, .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus, .socials_share.socials_type_block .social_icon:hover, .socials_share.socials_type_block .social_icon:focus { @include theme_button_colors_hover; } /* icon */ .sc_button_icon { font-size: 0.9em; line-height: 1em; } .sc_button_decoration .sc_button_icon { font-size: 1em; } .sc_button_icon_left .sc_button_icon { margin-right: 0.55em; } .sc_button_icon_right .sc_button_icon { float: none; margin-left: 0.55em; order: 2; } .sc_button_icon_top { @include flex-direction(column); } .sc_button + .sc_button { margin-left: 0; } .sc_button { margin-right: 2.3em; &:last-child { margin-right: 0; } } /* Style hover */ .sc_button_hover { position: relative; .sc_button_icon, .sc_button_text { @include transition(transform 0.3s ease-out); will-change: transform; } } .sc_button_hover:hover .sc_button_icon, .sc_button_hover:hover .sc_button_text { @include transform(translateX(-1.65rem)); } .sc_button_hover:before { content: '\e9a4'; font-family: $theme_icons; font-size: 10px; font-weight: 400; margin: 0; position: absolute; z-index: 1; right: 0 !important; left: auto !important; top: 50% !important; @include transform(translateY(-50%)); @include transition(opacity 0.3s ease-out,right 0.3s ease-out); background-color: transparent !important; color: inherit !important; opacity: 0; will-change: right,opacity; } .sc_button_hover:hover:before, .sc_button_hover.active:before { right: 3.2em !important; opacity: 1; } /* style hover small */ .sc_button_hover.sc_button_size_small:hover .sc_button_icon, .sc_button_hover.sc_button_size_small:hover .sc_button_text { @include transform(translateX(-1.1rem)); } .sc_button_hover.sc_button_size_small:hover:before, .sc_button_hover.sc_button_size_small.active:before { right: 2.5em !important; } /* Disabled buttons */ button[disabled], input[type="submit"][disabled], input[type="button"][disabled], a.sc_button[disabled], a.theme_button[disabled], button[disabled]:hover, input[type="submit"][disabled]:hover, input[type="button"][disabled]:hover, a.sc_button[disabled]:hover, a.theme_button[disabled]:hover { @include theme_button_disabled(!important); } /* Small button */ .sc_button.sc_button_size_small:not(.sc_button_simple), .theme_button.theme_button_small { padding: 13px 40px 14px; font-size: 15px; } .sc_button.sc_button_bordered.sc_button_size_small { padding: 11px 38px 12px; } /* Large button */ .sc_button.sc_button_size_large:not(.sc_button_simple) { font-size: 17px; padding: 19px 60px 21px; } .sc_button_bordered.sc_button.sc_button_size_large { padding: 17px 58px 19px; } /* Color Styles */ /* shadow */ .color_style_link2 .sc_button.sc_button_shadow:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) { @include box-shadow(0 7px 25px var(--theme-color-text_link2_02)); } .color_style_link3 .sc_button.sc_button_shadow:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) { @include box-shadow(0 7px 25px var(--theme-color-text_link3_02)); } .color_style_dark .sc_button.sc_button_shadow:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) { @include box-shadow(0 7px 25px var(--theme-color-text_dark_02)); } .sc_button_default.color_style_link2, .color_style_link2 .sc_button_default, .sc_button.color_style_link2:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image), .color_style_link2 .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) { @include theme_button_colors_style_link2; } .sc_button_default.color_style_link2:hover, .sc_button_default.color_style_link2:focus, .color_style_link2 .sc_button_default:hover, .color_style_link2 .sc_button_default:focus, .sc_button.color_style_link2:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .sc_button.color_style_link2:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus, .color_style_link2 .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .color_style_link2 .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus { @include theme_button_colors_hover_style_link2; } .sc_button_default.color_style_link3, .color_style_link3 .sc_button_default, .sc_button.color_style_link3:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image), .color_style_link3 .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) { @include theme_button_colors_style_link3; } .sc_button_default.color_style_link3:hover, .sc_button_default.color_style_link3:focus, .color_style_link3 .sc_button_default:hover, .color_style_link3 .sc_button_default:focus, .sc_button.color_style_link3:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .sc_button.color_style_link3:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus, .color_style_link3 .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .color_style_link3 .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus { @include theme_button_colors_hover_style_link3; } .sc_button_default.color_style_dark, .color_style_dark .sc_button_default, .sc_button.color_style_dark:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image), .color_style_dark .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) { @include theme_button_colors_style_dark; } .sc_button_default.color_style_dark:hover, .sc_button_default.color_style_dark:focus, .color_style_dark .sc_button_default:hover, .color_style_dark .sc_button_default:focus, .sc_button.color_style_dark:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .sc_button.color_style_dark:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus, .color_style_dark .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .color_style_dark .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus { @include theme_button_colors_hover_style_dark; } .search_wrap .search_submit:before { color: var(--theme-color-input_text); content: '\e9b6'; font-family: $theme_icons; padding: 1px; } .search_wrap .search_submit:hover:before, .search_wrap .search_submit:focus:before { color: var(--theme-color-input_dark); } /* Decoration button */ .sc_button.sc_button_decoration { position: relative; padding-left: 37px; padding-right: 35px; &.sc_button_icon_top:not(.sc_button_with_icon):not(.sc_button_with_image) { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } &.sc_button_size_small { padding-left: 33px; padding-right: 30px; } &:not(.sc_button_with_icon):not(.sc_button_with_image):after { content: '\e9a4'; font-family: $theme_icons; font-size: 10px; font-weight: 400; margin-left: 50px; } &.sc_button_size_small:not(.sc_button_with_icon):not(.sc_button_with_image):after { margin-left: 24px; } &:hover { color:var(--theme-color-inverse_hover) !important; border-color:var(--theme-color-text_dark) !important; background-color:var(--theme-color-text_dark) !important; } &.sc_button_shadow:hover { @include box-shadow(0 7px 25px var(--theme-color-text_dark_02) !important); } &.color_style_dark:hover { color: var(--theme-color-bg_color) !important; border-color: var(--theme-color-text_dark_blend) !important; background-color: var(--theme-color-text_dark_blend) !important; } } /* Bordered button */ .sc_button.sc_button_bordered, .wp-block-button.is-style-outline > .wp-block-button__link { @include theme_button_bordered; @include box-shadow(none); } .sc_layouts_row_type_narrow .sc_button.sc_button_bordered, .sc_layouts_row_type_narrow .wp-block-button.is-style-outline > .wp-block-button__link { padding: 14px 48px; } .sc_button_bordered:not(.sc_button_bg_image), .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color:var(--theme-color-text_link); border-color:var(--theme-color-text_link); } .sc_button_bordered:not(.sc_button_bg_image):hover, .sc_button_bordered:not(.sc_button_bg_image):focus, .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus { color:var(--theme-color-inverse_link) !important; border-color:var(--theme-color-text_hover) !important; background-color:var(--theme-color-text_hover) !important; } .sc_button_bordered.color_style_link2:not(.sc_button_bg_image), .color_style_link2 .sc_button_bordered:not(.sc_button_bg_image) { color:var(--theme-color-text_link2); border-color:var(--theme-color-text_link2); } .sc_button_bordered.color_style_link2:not(.sc_button_bg_image):hover, .sc_button_bordered.color_style_link2:not(.sc_button_bg_image):focus, .color_style_link2 .sc_button_bordered:not(.sc_button_bg_image):hover, .color_style_link2 .sc_button_bordered:not(.sc_button_bg_image):focus { color:var(--theme-color-inverse_link) !important; border-color:var(--theme-color-text_link2) !important; background-color:var(--theme-color-text_link2) !important; } .sc_button_bordered.color_style_link3:not(.sc_button_bg_image), .color_style_link3 .sc_button_bordered:not(.sc_button_bg_image) { color:var(--theme-color-text_link3); border-color:var(--theme-color-text_link3); } .sc_button_bordered.color_style_link3:not(.sc_button_bg_image):hover, .sc_button_bordered.color_style_link3:not(.sc_button_bg_image):focus, .color_style_link3 .sc_button_bordered:not(.sc_button_bg_image):hover, .color_style_link3 .sc_button_bordered:not(.sc_button_bg_image):focus { color:var(--theme-color-inverse_link) !important; border-color:var(--theme-color-text_link3) !important; background-color:var(--theme-color-text_link3) !important; } .sc_button_bordered.color_style_dark:not(.sc_button_bg_image), .color_style_dark .sc_button_bordered:not(.sc_button_bg_image) { color:var(--theme-color-text_dark); border-color:var(--theme-color-text_dark); } .sc_button_bordered.color_style_dark:not(.sc_button_bg_image):hover, .sc_button_bordered.color_style_dark:not(.sc_button_bg_image):focus, .color_style_dark .sc_button_bordered:not(.sc_button_bg_image):hover, .color_style_dark .sc_button_bordered:not(.sc_button_bg_image):focus { color:var(--theme-color-inverse_hover) !important; border-color:var(--theme-color-text_dark) !important; background-color:var(--theme-color-text_dark) !important; } /* Button Slide */ .sc_button.sc_button_slide { --theme-var-button_slide_color: var(--theme-color-text_link); --theme-var-button_slide_color_hover_text: var(--theme-color-inverse_link); background: none !important; position: relative; z-index: 1; overflow: hidden; .color_style_link2 &, &.color_style_link2 { --theme-var-button_slide_color: var(--theme-color-text_link2); } .color_style_link3 &, &.color_style_link3 { --theme-var-button_slide_color: var(--theme-color-text_link3); } .color_style_dark &, &.color_style_dark { --theme-var-button_slide_color: var(--theme-color-text_dark); --theme-var-button_slide_color_hover_text: var(--theme-color-inverse_hover); } color: var(--theme-var-button_slide_color) !important; > span { position: relative; z-index: 2; color: currentColor; } &:before { content: ""; @include border-radius(inherit); @include abs-cover(); @include box-shadow(inset 0 0 0 2px var(--theme-var-button_slide_color)); } &:after { content: ""; position: absolute; z-index: 1; display: block; width: 100%; height: 120%; top: -10%; left: 0; background-color: currentColor; transform: translateX(-100%); } &.hovered, &:hover { &:after { animation: button-slide-animation 1.2s cubic-bezier(.34,.43,.13,.96) forwards; } > span { animation: button-slide-text-animation 1.2s forwards; } } } @keyframes button-slide-text-animation { 0%, 100%, 75% { color: currentColor } 30%, 50% { color: var(--theme-var-button_slide_color_hover_text) } } @keyframes button-slide-animation { 0% { transform:translateX(-101%) } 50% { transform:translateX(0) } 100% { transform:translateX(101%) } } /* Button Flow */ .sc_button.sc_button_flow { position: relative; z-index: 1; overflow: hidden; --theme-var-button_flow_color_text_hover: var(--theme-color-inverse_link); --theme-var-button_flow_color: var(--theme-color-text_dark); --theme-var-button_flow_color_hover: var(--theme-color-text_link); .color_style_link2 &, &.color_style_link2 { --theme-var-button_flow_color_hover: var(--theme-color-text_link2); } .color_style_link3 &, &.color_style_link3 { --theme-var-button_flow_color_hover: var(--theme-color-text_link3); } .color_style_dark &, &.color_style_dark { --theme-var-button_flow_color_hover: var(--theme-color-text_dark_blend); --theme-var-button_flow_color_text_hover: var(--theme-color-inverse_hover); } color: var(--theme-color-inverse_hover) !important; background-color: var(--theme-var-button_flow_color_hover) !important; > span { position: relative; z-index: 2; } &:before { content: ""; @include border-radius(inherit); @include abs-cover(); @include box-shadow(inset 0 100px 0 0 var(--theme-var-button_flow_color) !important); @include transition-all(0.3s); } &:hover, &:focus, &:active { color: var(--theme-var-button_flow_color_text_hover) !important; &:before { @include box-shadow(inset 0 100px 0 -100px var(--theme-var-button_flow_color) !important); } } &.sc_button_shadow { @include box-shadow(0 7px 25px var(--theme-color-text_dark_02) !important); } } /* Button Veil */ .sc_button.sc_button_veil { --theme-var-button_veil_color: var(--theme-color-text_link); --theme-var-button_veil_color_hover_text: var(--theme-color-inverse_link); background: none !important; position: relative; z-index: 1; overflow: hidden; .color_style_link2 &, &.color_style_link2 { --theme-var-button_veil_color: var(--theme-color-text_link2); } .color_style_link3 &, &.color_style_link3 { --theme-var-button_veil_color: var(--theme-color-text_link3); } .color_style_dark &, &.color_style_dark { --theme-var-button_veil_color: var(--theme-color-text_dark); --theme-var-button_veil_color_hover_text: var(--theme-color-inverse_hover); } color: var(--theme-var-button_veil_color) !important; > span { position: relative; z-index: 2; } &:before { content: ""; @include border-radius(inherit); @include abs-cover(); @include box-shadow(inset 0 0 0 2px var(--theme-var-button_veil_color)); } &:after { content: ""; position: absolute; z-index: 1; display: block; width: 600px; height: 800px; bottom: 100%; left: 50%; background-color: var(--theme-var-button_veil_color); @include border-radius(50%); transform: translateX(-50%); @include transition(all 0.3s ease-out); } &:hover, &:focus, &:active { color: var(--theme-var-button_veil_color_hover_text) !important; &:after { bottom: -100%; } } } /* Button Curtain */ .sc_button.sc_button_curtain { position: relative; z-index: 1; overflow: hidden; --theme-var-button_curtain_color: var(--theme-color-text_link); --theme-var-button_curtain_color_text: var(--theme-color-inverse_link); .color_style_link2 &, &.color_style_link2 { --theme-var-button_curtain_color: var(--theme-color-text_link2); } .color_style_link3 &, &.color_style_link3 { --theme-var-button_curtain_color: var(--theme-color-text_link3); } .color_style_dark &, &.color_style_dark { --theme-var-button_curtain_color: var(--theme-color-text_dark); --theme-var-button_curtain_color_text: var(--theme-color-inverse_hover); --theme-var-button_curtain_color_text_hover: var(--theme-color-inverse_hover); } color: var(--theme-var-button_curtain_color_text) !important; background-color: var(--theme-color-alter_bg_color) !important; > span { position: relative; z-index: 3; } &:before { content: ""; @include border-radius(inherit); @include abs-cover(1); @include box-shadow(inset 0 0 0 2px var(--theme-var-button_curtain_color)); } &:after { content: ""; @include abs-cover(2); background-color: var(--theme-var-button_curtain_color); @include transition(bottom 0.3s cubic-bezier(0.7, 0, 0.2, 1)); } &:hover, &:focus, &:active { color: var(--theme-var-button_curtain_color) !important; &:after { bottom: 100%; } } } /* Button Slant */ .sc_button.sc_button_slant { position: relative; z-index: 1; overflow: hidden; --theme-var-button_curtain_color: var(--theme-color-text_link); --theme-var-button_curtain_color_text: var(--theme-color-inverse_link); .color_style_link2 &, &.color_style_link2 { --theme-var-button_curtain_color: var(--theme-color-text_link2); } .color_style_link3 &, &.color_style_link3 { --theme-var-button_curtain_color: var(--theme-color-text_link3); } .color_style_dark &, &.color_style_dark { --theme-var-button_curtain_color: var(--theme-color-text_dark); --theme-var-button_curtain_color_text: var(--theme-color-inverse_hover); --theme-var-button_curtain_color_text_hover: var(--theme-color-inverse_hover); } color: var(--theme-var-button_curtain_color_text) !important; background-color: var(--theme-color-alter_bg_color) !important; > span { position: relative; z-index: 2; } &:before { content: ""; width: 120%; background-color: var(--theme-var-button_curtain_color); @include abs-pos(0, 0, 0, -10%, 1); @include transform(skew(30deg)); @include transition(transform 0.4s cubic-bezier(0.3, 1, 0.8, 1)); } &:hover, &:focus, &:active { color: var(--theme-var-button_curtain_color) !important; &:before { @include transform(translate3d(100%, 0, 0)); } } } /* Simple button */ .sc_button.sc_button.sc_button_simple { @include font(17px, 20px, 500, normal); background: transparent !important; border: none !important; letter-spacing: 0; padding: 0 1.75em 2px 0; text-transform: none; &:not(.sc_button_with_icon) .sc_button_text { vertical-align: top; } &.sc_button_size_large { font-size: 19px; padding-bottom: 2px; } &.sc_button_size_small { font-size: 15px; } } .sc_button.sc_button.sc_button_simple:before, .sc_button.sc_button.sc_button_simple:after { content:'\e9a4'; font-family:$theme_icons; font-style:normal; font-size: 12px; font-weight: 400; top: 1px; padding-right: 1px; @include transition(right .3s ease, opacity .3s ease); } .sc_button.sc_button.sc_button_simple.sc_button_with_icon { display: inline-flex; @include flex-align-items(center); padding: 0; &.sc_button_icon_right { .sc_button_icon { margin-left: 0.6em; } } .sc_button_icon { position: relative; font-size: 20px; width: 56px; height: 56px; line-height: 56px; text-align: center; @include border-radius(50%); @include box-sizing(border-box); border: 1px solid var(--theme-color-bd_color); > span { @include abs-cc(); width: 30px; height: 30px; line-height: 29px; } } &:before, &:after { display: none; } } /* Simple Small */ .sc_button_simple.sc_button_icon_left .sc_button_icon { margin-right: 0.6em; } .sc_button_size_small.sc_button.sc_button_simple.sc_button_icon_left .sc_button_icon { margin-right: 0; } .sc_button_size_small.sc_button.sc_button_simple.sc_button_icon_left .sc_button_icon + .sc_button_text { margin-left: 0.5em; } .sc_button_size_small.sc_button.sc_button_simple.sc_button_icon_right .sc_button_icon { margin-left: 0; } .sc_button_size_small.sc_button.sc_button_simple.sc_button_icon_right .sc_button_icon + .sc_button_text { margin-right: 0.5em; } .sc_button_size_small.sc_button.sc_button.sc_button_simple.sc_button_with_icon .sc_button_icon { font-size: 12px; @include square(36px); } .sc_button.sc_button_simple:not(.sc_button_bg_image) { color:var(--theme-color-text_link); } .sc_button.sc_button_simple:not(.sc_button_bg_image):hover, .sc_button.sc_button_simple:not(.sc_button_bg_image):focus { color:var(--theme-color-text_hover) !important; } .sc_button.sc_button_simple.color_style_link2:not(.sc_button_bg_image), .color_style_link2 .sc_button.sc_button_simple:not(.sc_button_bg_image) { color:var(--theme-color-text_link2); } .sc_button.sc_button_simple.color_style_link2:not(.sc_button_bg_image):hover, .sc_button.sc_button_simple.color_style_link2:not(.sc_button_bg_image):focus, .color_style_link2 .sc_button.sc_button_simple:not(.sc_button_bg_image):hover, .color_style_link2 .sc_button.sc_button_simple:not(.sc_button_bg_image):focus { color:var(--theme-color-text_hover2) !important; } .sc_button.sc_button_simple.color_style_link3:not(.sc_button_bg_image), .color_style_link3 .sc_button.sc_button_simple:not(.sc_button_bg_image) { color:var(--theme-color-text_link3); } .sc_button.sc_button_simple.color_style_link3:not(.sc_button_bg_image):hover, .sc_button.sc_button_simple.color_style_link3:not(.sc_button_bg_image):focus, .color_style_link3 .sc_button.sc_button_simple:not(.sc_button_bg_image):hover, .color_style_link3 .sc_button.sc_button_simple:not(.sc_button_bg_image):focus { color:var(--theme-color-text_hover3) !important; } .sc_button.sc_button_simple.color_style_dark:not(.sc_button_bg_image), .color_style_dark .sc_button.sc_button_simple:not(.sc_button_bg_image) { color:var(--theme-color-text_dark); } .sc_button.sc_button_simple.color_style_dark:not(.sc_button_bg_image):hover, .sc_button.sc_button_simple.color_style_dark:not(.sc_button_bg_image):focus, .color_style_dark .sc_button.sc_button_simple:not(.sc_button_bg_image):hover, .color_style_dark .sc_button.sc_button_simple:not(.sc_button_bg_image):focus { color:var(--theme-color-text_dark) !important; } /* Theme button */ .theme_button { @include theme_button_colors(!important); } .theme_button:hover, .theme_button:focus { @include theme_button_colors_hover(!important); } .theme_button.color_style_link2, .color_style_link2 .theme_button { @include theme_button_colors_style_link2(!important); } .theme_button.color_style_link2:hover, .theme_button.color_style_link2:focus, .color_style_link2 .theme_button:hover, .color_style_link2 .theme_button:focus { @include theme_button_colors_hover_style_link2(!important); } .theme_button.color_style_link3, .color_style_link3 .theme_button { @include theme_button_colors_style_link3(!important); } .theme_button.color_style_link3:hover, .theme_button.color_style_link3:focus, .color_style_link3 .theme_button:hover, .color_style_link3 .theme_button:focus { @include theme_button_colors_hover_style_link3(!important); } .theme_button.color_style_dark, .color_style_dark .theme_button { @include theme_button_colors_style_dark(!important); } .theme_button.color_style_dark:hover, .theme_button.color_style_dark:focus, .color_style_dark .theme_button:hover, .color_style_dark .theme_button:focus { @include theme_button_colors_hover_style_dark(!important); } /* Buttons in sidebars */ /* Simple button */ [class*="scheme_"].sidebar .sc_button_simple:not(.sc_button_bg_image) { color:var(--theme-color-alter_link); } [class*="scheme_"].sidebar .sc_button_simple:not(.sc_button_bg_image):hover, [class*="scheme_"].sidebar .sc_button_simple:not(.sc_button_bg_image):focus { color:var(--theme-color-alter_hover) !important; } /* Bordered button */ [class*="scheme_"].sidebar .sc_button_bordered:not(.sc_button_bg_image) { color:var(--theme-color-alter_link); border-color:var(--theme-color-alter_link); } [class*="scheme_"].sidebar .sc_button_bordered:not(.sc_button_bg_image):hover, [class*="scheme_"].sidebar .sc_button_bordered:not(.sc_button_bg_image):focus { color:var(--theme-color-alter_hover) !important; border-color:var(--theme-color-alter_hover) !important; } /* All other buttons */ [class*="scheme_"].sidebar button, [class*="scheme_"].sidebar input[type="reset"], [class*="scheme_"].sidebar input[type="submit"], [class*="scheme_"].sidebar input[type="button"], /* ThemeREX Addons */ [class*="scheme_"].sidebar .sc_button_default, [class*="scheme_"].sidebar .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image), [class*="scheme_"].sidebar .socials_share.socials_type_block .social_icon { @include theme_button_colors_style_alter(); } /* All other buttons hovered */ [class*="scheme_"].sidebar button:hover, [class*="scheme_"].sidebar button:focus, [class*="scheme_"].sidebar input[type="reset"]:hover, [class*="scheme_"].sidebar input[type="reset"]:focus, [class*="scheme_"].sidebar input[type="submit"]:hover, [class*="scheme_"].sidebar input[type="submit"]:focus, [class*="scheme_"].sidebar input[type="button"]:hover, [class*="scheme_"].sidebar input[type="button"]:focus, /* ThemeREX Addons */ [class*="scheme_"].sidebar .sc_button_default:hover, [class*="scheme_"].sidebar .sc_button_default:focus, [class*="scheme_"].sidebar .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, [class*="scheme_"].sidebar .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus, [class*="scheme_"].sidebar .socials_share.socials_type_block .social_icon:hover, [class*="scheme_"].sidebar .socials_share.socials_type_block .social_icon:focus { @include theme_button_colors_hover_style_alter(); } /* Text fields */ input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="search"], select, textarea, textarea.wp-editor-area { @include theme_field_template; } /* Text fields */ input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="search"], input[type="password"], .select2-container.select2-container--default span.select2-choice, .select2-container.select2-container--default span.select2-selection, .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container.select2-container--default .select2-selection--multiple, textarea, textarea.wp-editor-area, select.select2-hidden-accessible.filled + .select2-container.select2-container--default span.select2-selection--multiple, select.select2-hidden-accessible.filled + .select2-container.select2-container--default span.select2-selection--single, select.select2-hidden-accessible.filled + .select2-container.select2-container--default span.select2-choice { @include theme_field_colors; text-overflow: ellipsis; } input[type="text"]:focus, input[type="text"].filled, input[type="number"]:focus, input[type="number"].filled, input[type="email"]:focus, input[type="email"].filled, input[type="url"]:focus, input[type="url"].filled, input[type="tel"]:focus, input[type="tel"].filled, input[type="search"]:focus, input[type="search"].filled, input[type="password"]:focus, input[type="password"].filled, .select_container:hover, select option:hover, select option:focus, .select2-container.select2-container--default span.select2-selection--single:hover, .select2-container.select2-container--default span.select2-choice:hover, .select2-container.select2-container--default span.select2-selection--multiple:hover, .select2-container--default.select2-container--open .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single, select.select2-hidden-accessible.filled + .select2-container.select2-container--default.select2-container--open span.select2-selection--multiple, select.select2-hidden-accessible.filled + .select2-container.select2-container--default.select2-container--open span.select2-selection--single, select.select2-hidden-accessible.filled + .select2-container.select2-container--default.select2-container--open span.select2-choice, .select2-container.select2-container--focus span.select2-choice, .select2-container.select2-container--open span.select2-choice, .select2-container.select2-container--focus span.select2-selection--single, .select2-container.select2-container--open span.select2-selection--single, .select2-container.select2-container--focus span.select2-selection--multiple, .select2-container.select2-container--open span.select2-selection--multiple, textarea:focus, textarea.filled, textarea.wp-editor-area:focus, textarea.wp-editor-area.filled { @include theme_field_colors_hover; } textarea, textarea.wp-editor-area { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ vertical-align: top; /* Improves readability and alignment in all browsers */ min-height:10em; } textarea.wp-editor-area { @include border-radius(0); } /* Text fields in widgets */ .widget input[type="text"], .widget input[type="number"], .widget input[type="email"], .widget input[type="url"], .widget input[type="tel"], .widget input[type="password"], .widget input[type="search"], .widget select, .widget textarea, .widget textarea.wp-editor-area { padding: 0.77em 1.2em; } /* Placeholders */ input[placeholder]::-webkit-input-placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } textarea[placeholder]::-webkit-input-placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } input[placeholder]::-moz-placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } textarea[placeholder]::-moz-placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } input[placeholder]:-ms-input-placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } textarea[placeholder]:-ms-input-placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } input[placeholder]::placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } textarea[placeholder]::placeholder { text-overflow:ellipsis; opacity: 1; color: var(--theme-color-input_light); @include transition-color(0.3s); } input[placeholder]:focus::-webkit-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:focus::-webkit-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } input[placeholder]:focus::-moz-placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:focus::-moz-placeholder { opacity: 1; color: var(--theme-color-input_dark); } input[placeholder]:focus:-ms-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:focus:-ms-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } input[placeholder]:focus::placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:focus::placeholder { opacity: 1; color: var(--theme-color-input_dark); } input[placeholder]:active::-webkit-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:active::-webkit-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } input[placeholder]:active::-moz-placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:active::-moz-placeholder { opacity: 1; color: var(--theme-color-input_dark); } input[placeholder]:active:-ms-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:active:-ms-input-placeholder { opacity: 1; color: var(--theme-color-input_dark); } input[placeholder]:active::placeholder { opacity: 1; color: var(--theme-color-input_dark); } textarea[placeholder]:active::placeholder { opacity: 1; color: var(--theme-color-input_dark); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 50000s ease-in-out 90000s, color 50000s ease-in-out 90000s; } /* EDGE autofill */ input[type="password"].edge-autofilled, input[type="email"].edge-autofilled, input[type="text"].edge-autofilled { color: var(--theme-color-input_dark) !important; border-color: var(--theme-color-input_bd_hover) !important; background-color: var(--theme-color-input_bg_hover) !important; } textarea, textarea.wp-editor-area, select, input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="search"], input[type="password"], input[type="checkbox"], input[type="radio"] { @include transition-colors; @include border-box; @include border-sharp; } option { @include border-box; @include border-sharp; color: var(--theme-color-text_dark); background-color: var(--theme-color-bg_color); font-size: inherit; font-weight: inherit; } optgroup { font-style: normal; > option { font-weight: normal; } } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="number"]::-webkit-outer-spin-button { height: 50%; } input[type="number"], input[type="search"] { -webkit-appearance: none; /* Addresses appearance set to searchfield in S5, Chrome */ } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } button[disabled], html input[disabled] { cursor: default !important; } input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="search"], select, textarea, textarea.wp-editor-area { -webkit-appearance: none; outline: none; resize: none; } button:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, select:focus, textarea:focus, textarea.wp-editor-area:focus { outline: 0; } body.show_outline { button:focus, input:focus, select:focus, textarea:focus, textarea.wp-editor-area:focus { outline: thin dotted !important; } } /* Radio buttons and checkboxes */ h3#ship-to-different-address label .input-checkbox, input[type="radio"], input[type="checkbox"], .edd_price_options ul > li > label > input[type="radio"], .edd_price_options ul > li > label > input[type="checkbox"], .wpcf7-radio input[type="radio"], .wpcf7-checkbox input[type="checkbox"], .wpcf7-acceptance input[type="checkbox"] { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; margin:0 !important; padding:0 !important; } label > input[type="radio"], label > input[type="checkbox"], input[type="checkbox"].wpcf7-acceptance { display: inline-block; vertical-align:baseline; position: static !important; clip: auto; } .wpcf7-radio .wpcf7-list-item-label, .wpcf7-checkbox .wpcf7-list-item-label { cursor: pointer; } .edd_price_options ul > li > label > input[type="radio"] + span, .edd_price_options ul > li > label > input[type="checkbox"] + span { display: inline-block; vertical-align:baseline; } h3#ship-to-different-address label > span, input[type="radio"] + label, input[type="checkbox"] + label, input[type="radio"]+.wpcf7-list-item-label, input[type="checkbox"]+.wpcf7-list-item-label, .edd_price_options ul > li > label > input[type="radio"] + span, .edd_price_options ul > li > label > input[type="checkbox"] + span { position:relative; font-size: 14px; padding-left:1.8em; line-height: 20px; display: inline-block; vertical-align: top; a { color: inherit; border-bottom: 1px solid var(--theme-color-text); line-height: 1em; display: inline-block; @include transition-all(0.3s); &:hover { color: var(--theme-color-text_dark); border-color: var(--theme-color-text_dark); } } [class*="scheme_"].footer_wrap & a:hover { color: var(--theme-color-text_dark); border-color: var(--theme-color-text_dark); } } .wpcf7-list-item-label.wpcf7-list-item-right { position:relative; padding-right:1.4em; display: inline-block; vertical-align: top; } h3#ship-to-different-address label > span:before, input[type="radio"] + label:before, input[type="checkbox"] + label:before, input[type="radio"]+.wpcf7-list-item-label:before, input[type="checkbox"]+.wpcf7-list-item-label:before, .wpcf7-list-item-label.wpcf7-list-item-right:before, .edd_price_options ul > li > label > input[type="radio"] + span:before, .edd_price_options ul > li > label > input[type="checkbox"] + span:before { content:' '; font-family: $theme_icons; font-size: 7px; letter-spacing: -0.7px; display:block; text-align:center; border: 1px solid var(--theme-color-bd_color); @include box(16px, 16px, 15px); @include abs-lt(0, 0.35em); @include border-box; @include border-radius(4px); color: var(--theme-color-text_dark); cursor: pointer; @include transition-all(0.3s); } .payment_methods input[type="radio"] + label:before { top: 0.65em; } input[type="radio"] + label, input[type="checkbox"] + label, input[type="radio"]+.wpcf7-list-item-label, input[type="checkbox"]+.wpcf7-list-item-label, .wpcf7-list-item-label.wpcf7-list-item-right, .edd_price_options ul > li > label > input[type="radio"] + span, .edd_price_options ul > li > label > input[type="checkbox"] + span { &:hover:before { border-color: var(--theme-color-text_dark); } } body.show_outline { input[type="radio"]:focus + label:before, input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + .wpcf7-list-item-label:before, input[type="checkbox"]:focus + .wpcf7-list-item-label:before, //.wpcf7-list-item-label.wpcf7-list-item-right:before, .edd_price_options ul > li > label > input[type="radio"]:focus + span:before, .edd_price_options ul > li > label > input[type="checkbox"]:focus + span:before { outline: 0 !important; box-shadow: 0 0 0 1px #000; } } .wpcf7-list-item-label.wpcf7-list-item-right:before { left: auto; right: 0; } h3#ship-to-different-address label input[type="checkbox"]:checked + span:before, input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked+.wpcf7-list-item-label:before, .wpcf7-checkbox .wpcf7-list-item-checked.wpcf7-list-item-right:before, .edd_price_options ul > li > label > input[type="checkbox"]:checked + span:before { content:'\e9f6'; } input[type="radio"]:checked + label:before, input[type="radio"]:checked+.wpcf7-list-item-label:before, .wpcf7-radio .wpcf7-list-item-checked.wpcf7-list-item-right:before, .edd_price_options ul > li > label > input[type="radio"]:checked + span:before { content:'\e9f6'; } input[type="radio"] + label:before, input[type="checkbox"] + label:before, .wpcf7-list-item-label.wpcf7-list-item-right:before { border-color: var(--theme-color-input_bd_color) !important; } input[type="radio"] + label:hover:before, input[type="checkbox"] + label:hover:before, .wpcf7-list-item-label.wpcf7-list-item-right:hover:before { border-color: var(--theme-color-text_dark) !important; } /* Select container (dropdown) */ select { text-overflow:ellipsis; white-space:nowrap; } select::-ms-expand { display: none; } /* Hide all select fields while page loading */ select:not(.esg-sorting-select):not([class*="trx_addons_attrib_"]) { visibility:hidden; } /* Show all select fields when they inside an our wrapper */ .select_container select:not(.esg-sorting-select):not([class*="trx_addons_attrib_"]) { visibility:visible; } /* Our wrapper to decorate select fields */ .select_container { width:100%; position:relative; } .select_container, .select_container:after, .select_container select { @include transition-all; } .select_container:before { content:' '; display:block; @include abs-pos(2px, 2px, 2px, auto); width: 3em; z-index:1; pointer-events: none; cursor:pointer; @include border-radius(0); color: var(--theme-color-input_text); background-color: var(--theme-color-input_bg_color); } .select_container:focus:before, .select_container:hover:before { color: var(--theme-color-input_dark); background-color: var(--theme-color-input_bg_hover); } .sc_input_hover_accent .select_container:before { right:2px; top:2px; bottom: 2px; @include border-sharp; } .select_container:after { content:'\e828'; font-family: $theme_icons; display:block; @include abs-rt(0, 50%, 2); @include square(1em); margin-top:-0.5em; pointer-events: none; cursor:pointer; color: var(--theme-color-input_text); } .select_container:focus:after, .select_container:hover:after { color: var(--theme-color-input_dark); } .select_container select { width: 100% !important; max-width: none !important; padding-right: 3em !important; @include border-box; color: var(--theme-color-input_text); background: var(--theme-color-input_bg_color) !important; border-color: var(--theme-color-input_bd_color); } .select_container select:focus { color: var(--theme-color-input_dark); background-color: var(--theme-color-input_bg_hover) !important; } .widget .select_container select { padding-right: 2em !important; padding-left: 0; padding-top:0.75em; padding-bottom:0.75em; } .widget .select_container:before { width: 2em; } .widget .select_container:after { right: 0; } /* Select2 - Advanced select with search */ .select2-container { width: 100% !important; } .select2-container.select2-container--default span.select2-choice, .select2-container.select2-container--default span.select2-selection { height: auto; border: none; border-bottom: 1px solid var(--theme-color-input_bd_color); padding: 0; @include border-sharp; } .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; } .select2-container--default .select2-selection--single .select2-selection__placeholder { display: inline-block; } .select2-container--default .select2-selection--single span.select2-selection__rendered { color: inherit; line-height: 2.7em; @include transition-all(0.3s); } .select2-selection .select2-selection__arrow { position: relative; text-align: right; b { display: none; } &:before { content: '\e942'; font-family: $theme_icons; } } .select2-container.select2-container--default .select2-selection .select2-selection__arrow { top: 50%; @include translateY; } .select2-drop-active { border: none; } .select2-dropdown { border: 1px solid var(--theme-color-input_bd_color) !important; @include border-radius(0 !important); } .select2-search { padding: 8px; } .select2-dropdown, .select2-container.select2-container--focus span.select2-selection, .select2-container.select2-container--open span.select2-selection { color: var(--theme-color-text_dark); border-color: var(--theme-color-input_bd_color); background: var(--theme-color-bg_color); } .select2-container .select2-results__option { color: var(--theme-color-input_dark); background: var(--theme-color-input_bg_hover); } .select2-dropdown .select2-highlighted, .select2-container .select2-results__option--highlighted[aria-selected] { color: var(--theme-color-inverse_link); background: var(--theme-color-text_link); } .select2-container--default .select2-results__option[aria-selected="true"] { color: var(--theme-color-alter_dark); background-color: var(--theme-color-alter_bg_color); } .select2-container--default .select2-results__option[data-selected="true"] { color: var(--theme-color-inverse_link); background-color: var(--theme-color-text_link); } .select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--theme-color-input_bd_color); &:focus { border-color: var(--theme-color-input_bd_hover); } } /* Required fields */ label.required:after { content:'*'; display: none; vertical-align:text-top; font-size:80%; color:#da6f5b; } /* 4. WP styles and Screen readers -------------------------------------------------------------- */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; margin:0 !important; padding:0 !important; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { display: block; top: 5px; left: 5px; @include box(auto, auto); @include font(0.8em, normal); padding: 1em 1.5em; color: #21759b; background-color: #f1f1f1; border-radius: 3px; clip: auto !important; text-decoration: none; /* Above WP toolbar */ z-index: 100000; @include box-shadow(0 0 2px 2px rgba(0, 0, 0, 0.6)); } .frame_skip_link { @include abs-lt(6px, 6px, 999999); @include translateY(-300px); @include transition-property(transform); } .frame_skip_link:focus { @include translateY(0); outline-offset: -1px; display: block; @include box(auto, auto); font-size: 1em; font-weight: 400; padding: 1em 1.5em; background: #f1f1f1; color: #0073aa; line-height: normal; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); } a.frame_skip_link_anchor { position: absolute; @include box(0,0); } /* 5. Theme grid -------------------------------------------------------------- */ .container, .container-fluid { margin-right: auto; margin-left: auto; padding-left: calc( var(--theme-var-grid_gap) / 2 ); padding-right: calc( var(--theme-var-grid_gap) / 2 ); } .row, .columns_wrap { margin-left: 0; margin-right: calc( -1 * var(--theme-var-grid_gap) ); } .row > [class*="column-"], .columns_wrap > [class*="column-"] { display:inline-block; vertical-align:top; position: relative; z-index: 20; min-height: 1px; padding-left: 0; padding-right: var(--theme-var-grid_gap); @include border-box; } .row.columns_padding_left, .columns_wrap.columns_padding_left, .vc_row.columns_padding_left { margin-left: calc( -1 * var(--theme-var-grid_gap) ); margin-right: 0; } .vc_row.columns_padding_left .vc_column_container > .vc_column-inner, .row.columns_padding_left > [class*="column-"], .columns_wrap.columns_padding_left > [class*="column-"], .row > [class*="column-"].columns_padding_left, .columns_wrap > [class*="column-"].columns_padding_left { padding-left:var(--theme-var-grid_gap); padding-right:0; } .vc_row.columns_padding_right, .row.columns_padding_right, .columns_wrap.columns_padding_right { margin-left: 0; margin-right: calc( -1 * var(--theme-var-grid_gap) ); } .vc_row.columns_padding_right .vc_column_container > .vc_column-inner, .row.columns_padding_right > [class*="column-"], .columns_wrap.columns_padding_right > [class*="column-"], .row > [class*="column-"].columns_padding_right, .columns_wrap > [class*="column-"].columns_padding_right { padding-left:0; padding-right:var(--theme-var-grid_gap); } .vc_row, .row.columns_padding_center, .columns_wrap.columns_padding_center { margin-left: calc( -1 * var(--theme-var-grid_gap) / 2 ); margin-right: calc( -1 * var(--theme-var-grid_gap) / 2 ); } .vc_column_container > .vc_column-inner, .row.columns_padding_center > [class*="column-"], .columns_wrap.columns_padding_center > [class*="column-"], .row > [class*="column-"].columns_padding_center, .columns_wrap > [class*="column-"].columns_padding_center { padding-left:calc( var(--theme-var-grid_gap) / 2 ); padding-right:calc( var(--theme-var-grid_gap) / 2 ); } .row.columns_padding_bottom > [class*="column-"], .columns_wrap.columns_padding_bottom > [class*="column-"], .row > [class*="column-"].columns_padding_bottom, .columns_wrap > [class*="column-"].columns_padding_bottom { padding-bottom: var(--theme-var-grid_gap); } .row.columns_padding_bottom.columns_in_single_row > [class*="column-"], .columns_wrap.columns_padding_bottom.columns_in_single_row > [class*="column-"] { padding-bottom: 0; } .sc_blogger.no_margin .row, .sc_blogger.no_margin .columns_wrap, .row.no_margin, .columns_wrap.no_margin { margin-left: 0 !important; margin-right: 0 !important; } .sc_blogger.no_margin .row > [class*="column-"], .sc_blogger.no_margin .columns_wrap > [class*="column-"], .row.no_margin > [class*="column-"], .columns_wrap.no_margin > [class*="column-"] { padding: 0 !important; } /* Columns, push, pull and offset sizes */ @for $i from 1 through 12 { @for $j from $i through 12 { $s: 100% / $j * $i; @if $j == 1 { .column-#{$i}, .column-#{$i}_#{$j} { width: $s; } } @else { .column-#{$i}_#{$j} { width: $s; } @if ($i < $j) { .push-#{$i}_#{$j} { left: $s } .pull-#{$i}_#{$j} { right: $s; } .offset-#{$i}_#{$j} { margin-left: $s; } } } } } /* Utils */ .clearfix:after, .container:after, .container-fluid:after, .row:after { content: " "; @include clear; } .center-block { display: block; margin-left: auto; margin-right: auto; } .pull-right { float: right !important; } .pull-left { float: left !important; } .affix { position: fixed; @include translate3d(0, 0, 0); } .visible { visibility: visible; } .invisible { visibility: hidden; } .show { display: block !important; } .hide { display: none !important; } .hidden { display: none !important; visibility: hidden !important; } .text-hide { @include font(0, 0); color: transparent; text-shadow: none; background-color: transparent; border: 0; } .vertical-centered { overflow:hidden; } .vertical-centered:before { content:' '; @include box(0, 100%); margin-left:-0.3em; } .vertical-centered:before, .vertical-centered > * { display: inline-block; vertical-align:middle; } .frame_loading, .trx_addons_loading { background-image:url(../../../images/preloader.png) !important; background-position:center !important; background-repeat:no-repeat !important; } .theme_button_close, .trx_addons_button_close, .review-form a.close, #cancel-comment-reply-link { display:block; cursor:pointer; @include square(3rem); @include abs-rt; margin: 0 !important; } .sc_layouts_panel_close.trx_addons_button_close { width: 47px; height: 47px; line-height: 47px; @include border-radius(50%); background-color: var(--theme-color-alter_bg_hover); color: var(--theme-color-alter_dark); right: 50px; top: 48px; font-size: 16px; } .sc_layouts_panel_left { .sc_layouts_panel_close.trx_addons_button_close { right: auto; left: 50px; } } .review-form a.close, #cancel-comment-reply-link, .sc_layouts_cart_widget_close { @include square(2rem); font-size: 16px; } .mfp-close-icon { width: 100% !important; } .mfp-close-icon, .review-form a.close, #cancel-comment-reply-link { text-indent: -300px; overflow: hidden !important; @include transition-property(transform); @include transform-origin(center center); will-change: transform; @include transform(translate(-50%, -50%) rotate(0deg)); } #cancel-comment-reply-link { top: 0.9rem; right: -1.2rem; width: 2rem; height: 2rem; line-height: 2rem; } .mfp-close-icon, .theme_button_close_icon, .trx_addons_button_close_icon { @include border-box; @include rotate(0); position: absolute; z-index: 1; top: 50% !important; left: 50% !important; @include transform(translate(-50%, -50%) rotate(0deg)); transform-origin: center center; width: auto; height: auto; font-size: 15px; } .theme_button_close_icon:after, .trx_addons_button_close_icon:after, .mfp-close-icon:after, .review-form a.close:after, #cancel-comment-reply-link:after { display: none; } .mfp-close-icon:before, .theme_button_close_icon:before, .trx_addons_button_close_icon:before, .mfp-close-icon:before, .review-form a.close:before, #cancel-comment-reply-link:before { position: relative; top:0; left: 0; content:'\e9e1'; font-family:$theme_icons; line-height: 1; text-align: center; border: none; } .mfp-close-icon:before, .review-form a.close:before, #cancel-comment-reply-link:before { position: absolute; right: 0; text-indent: 0; line-height: inherit; } .theme_button_close:hover .theme_button_close_icon, .trx_addons_button_close:hover .trx_addons_button_close_icon, .mfp-close:hover .mfp-close-icon, .review-form a.close:hover, #cancel-comment-reply-link:hover { @include transform(translate(-50%, -50%) rotate(180deg)); } /* Mfp Wrap */ .mfp-close-icon { font-size: 23px; } .mfp-wrap .mfp-close { margin: -50px -50px 0 0; } /* 6. Page layouts -------------------------------------------------------------- */ .page_wrap { min-height:100vh; @include border-box; } .page_wrap, .content_wrap { margin:0 auto; } .body_style_boxed { background-color:#f0f0f0; background-attachment: fixed; @include bg-cover(center top); } .body_style_boxed .page_wrap { width: var(--theme-var-page_boxed); max-width: 100%; } .page_content_wrap { padding-top: 7.1rem; padding-bottom: 7.4rem; } .remove_margins .page_content_wrap { padding-top: 0 !important; padding-bottom: 0 !important; } .content_wrap, .content_container { width: var(--theme-var-page); max-width: 100%; margin:0 auto; } .content_wrap .content_wrap, .content_wrap .content_container, .content_container .content_wrap, .content_container .content_container { width:100%; } .content_wrap:after, .content_container:after { content:" "; @include clear; } .body_style_fullwide .content_wrap { max-width: var(--theme-var-page_fullwide_max); // To prevent stretching content on the extra wide screen margin: 0 auto; width: 100% !important; padding-left: var(--theme-var-page_fullwide_extra); padding-right: var(--theme-var-page_fullwide_extra); @include border-box; } .content, .sidebar, .sidebar_inner { @include border-box; } .page_content_wrap .content_wrap, .page_content_wrap .content_wrap_fullscreen { position:relative; } #page_preloader, .page_content_wrap, .custom-background .content_wrap > .content, .background_banner_wrap ~ .content_wrap > .content { background-color: var(--theme-color-bg_color); } .preloader_wrap > div { background-color: var(--theme-color-text_link); } /* Content and Sidebar */ body.body_style_wide:not(.expand_content) [class*="content_wrap"] > .content, body.body_style_boxed:not(.expand_content) [class*="content_wrap"] > .content { width: var(--theme-var-content); } [class*="content_wrap"] > .sidebar { width: var(--theme-var-sidebar); } .sidebar_hide [class*="content_wrap"] > .content { margin-left: auto; margin-right: auto; } .sidebar_right [class*="content_wrap"] > .content { float: left; } .sidebar_right [class*="content_wrap"] > .sidebar { float: right; } .sidebar_left [class*="content_wrap"] > .content { float: right; } .sidebar_left [class*="content_wrap"] > .sidebar { float: left; } /* Fullwide or Fullscreen with sidebar */ .body_style_fullwide [class*="content_wrap"] > .content, .body_style_fullscreen [class*="content_wrap"] > .content { width: 100%; } .body_style_fullwide.sidebar_right [class*="content_wrap"] > .content, .body_style_fullscreen.sidebar_right [class*="content_wrap"] > .content { padding-right: var(--theme-var-sidebar_and_gap); } .body_style_fullwide.sidebar_right [class*="content_wrap"] > .sidebar, .body_style_fullscreen.sidebar_right [class*="content_wrap"] > .sidebar { margin-left: calc( -1 * var(--theme-var-sidebar) ); } .body_style_fullwide.sidebar_left [class*="content_wrap"] > .content, .body_style_fullscreen.sidebar_left [class*="content_wrap"] > .content { padding-left: var(--theme-var-sidebar_and_gap); } .body_style_fullwide.sidebar_left [class*="content_wrap"] > .sidebar, .body_style_fullscreen.sidebar_left [class*="content_wrap"] > .sidebar { margin-right: calc( -1 * var(--theme-var-sidebar) ); } .body_style_fullscreen .page_content_wrap { padding:0; position:relative; /* Need to correct 'sticky' sidebar position */ } /* Boxed style for articles and sidebar */ .body_style_fullscreen [class*="content_wrap"] > .content > article.page { padding:0; } /* Sticky sidebar */ .fixed_blocks_sticky .sidebar { @include sticky-top(var(--fixed-rows-height)); } .sidebar_fixed_placeholder { min-height: 1px; } /* Sidebar control to show/hide sidebar on mobile devices */ .sidebar_control { display: none; color: var(--theme-color-alter_dark) !important; background-color: var(--theme-color-alter_bg_color); border-color: var(--theme-color-alter_bd_color); } .sidebar_control:hover { color: var(--theme-color-alter_link) !important; background-color: var(--theme-color-alter_bg_color); border-color: var(--theme-color-alter_bd_hover); } .sidebar .sidebar_control, .sidebar .sidebar_control:after { @include border-radius(0); } /* Float Sidebar */ @media #{$media_md} { .sidebar_custom.sidebar_float, .sidebar_default.sidebar_float:not([class*="scheme_"]) { @include box-shadow(10px 10px 10px rgba(0,0,0, 0.05)); .sidebar_small_screen_float.sidebar_left & { @include translateX(calc(-100% - 20px)); } .sidebar_small_screen_float.sidebar_right & { @include translateX(calc(100% + 20px)); } .sidebar_small_screen_float.sidebar_show &.opened { @include translateX(0); } .sidebar_inner { background-color: var(--theme-color-bg_color); padding: 30px; } } } @media #{$media_xs} { .sidebar_custom.sidebar_float, .sidebar_default.sidebar_float:not([class*="scheme_"]) { .sidebar_inner { padding: 20px; } } } /* Banners */ [class*="_banner_wrap"]:not(.background_banner_wrap) { background-color: var(--theme-color-alter_bg_color); } .banner_wrap_title, .sidebar .banner_wrap_title { color: var(--theme-color-alter_light); } .widget_banner:not(.widget_fullwidth) { .image_wrap { padding: 15px; background-color: var(--theme-color-alter_bg_hover); @include box-sizing(border-box); text-align: center; } } /* Fullheight sections */ .frame-full-height { min-height: calc( 100vh - var(--fixed-rows-height) ); } /* 7. Section's decorations =============================================================== */ /* 7.1 Header -------------------------------------------------------------- */ /* Top panel */ .top_panel { position:relative; z-index:8000; // Essential grid lightbox use 8010 padding: 0.02px 0; // Incapsulate margins inside the block without 'overflow: hidden'. Min value is 0.01 for Firefox, 0.02 for Chrome @include bg-cover; } .top_panel, [class*="scheme_"].top_panel, [class*="scheme_"].footer_wrap { color: var(--theme-color-text); background-color: var(--theme-color-bg_color); } .top_panel .row > [class*="column-"], .top_panel .columns_wrap > [class*="column-"] { vertical-align:middle; } .top_panel.with_bg_image:before { content: ' '; @include bg-mask(#000, 0.7, -1); } [class*="scheme_"].top_panel.with_bg_image:before { background-color: var(--theme-color-bg_color_07); } [class*="scheme_"].top_panel .slider_engine_revo .slide_subtitle, .top_panel .slider_engine_revo .slide_subtitle { color: var(--theme-color-text_link); } .top_panel_default .top_panel_navi, [class*="scheme_"].top_panel_default .top_panel_navi { background-color: var(--theme-color-bg_color); } .top_panel_default .top_panel_title, [class*="scheme_"].top_panel_default .top_panel_title { background-color: var(--theme-color-alter_bg_color); } .top_panel_default { .sc_layouts_row_type_normal { padding: 4em 0 5.3em; } .sc_layouts_row_type_compact { padding: 0.8em 0; } &.with_bg_image .sc_layouts_row:not(.sc_layouts_row_fixed_on) { background-color: transparent; } } /* Background video in the header */ #background_video { object-fit: cover; overflow:hidden; @include abs-cc(-1 !important); @include box(100%, 100%); } div#background_video { position: absolute !important; } div#background_video:after { content: ' '; @include abs-lt(0, 0, 2); @include box(100%, 100%); background-color:rgba(255, 255, 255, 0.3); } div#background_video iframe, div#background_video video { @include abs-cc(1, !important); max-width: none; } #tubular-container { display:none; } .top_panel.with_bg_video { background: #000; } /* Header positions */ .header_position_over .page_wrap { position:relative; } .header_position_over .top_panel { @include abs-lt(0, 0, 8000); width: 100%; background: rgba(0,0,0,0) !important; .sc_layouts_row[class*="scheme_"] { @include transition-property(background-color); } } .header_position_over:not(.trx_addons_page_scrolled) .top_panel .sc_layouts_row[class*="scheme_"], .header_position_over .top_panel .sc_layouts_row[class*="scheme_"]:not(.sc_layouts_row_fixed_on) { background-color:transparent; } @media #{$media_not_mobile} { // Fix for sticky sections and header over or under body.header_position_over, body.header_position_under { .elementor-section-height-full.sc_stack_section_on { height: 100vh; } &.fixed_blocks_sticky .sc_stack_section_effect_slide:not(.elementor-element-edit-mode) { top: 0; } &.admin-bar.fixed_blocks_sticky { .elementor-section-height-full.sc_stack_section_on { height: calc(100vh - 32px); } .sc_stack_section_effect_slide:not(.elementor-element-edit-mode) { top: 32px; } } } } .header_position_under .top_panel { position:relative; z-index:2; @include border-box; } .header_position_under .top_panel_mask { display:none; background-color:#000; opacity: 0; pointer-events: none; @include abs-cover(9999); } .header_position_under .page_content_wrap { position:relative; z-index:4; } .header_position_under .footer_wrap { position:relative; z-index:3; } .header_position_under .page_wrap { padding-bottom: 0.1px; /* Fix for Chrome and Safari to allow margin-bottom in the .page_content_wrap when footer is fixed */ } /* Default header layouts ---------------------------------------------- */ /* Main menu in the default header */ .top_panel_default .sc_layouts_menu_nav > li.menu-item-has-children > a:after { content: '\e828'; font-family: $theme_icons; } .top_panel_default .sc_layouts_menu_nav li li.menu-item-has-children > a:after { content: '\e836'; font-family: $theme_icons; } .top_panel_default .sc_layouts_menu_mobile_button .sc_layouts_item_icon:before { content: '\e8ba'; font-family: $theme_icons; } /* Mobile Button */ .sc_layouts_menu_mobile_button, .sc_layouts_menu_mobile_button_burger { .sc_layouts_item_icon { color: var(--theme-color-text_dark); font-size: 16px; &:before { font-family: $theme_icons; content: '\e9d7'; } } } /* Custom layouts --------------------------------- */ [class*="scheme_"].sc_layouts_row { color: var(--theme-color-text); background-color: var(--theme-color-bg_color); } .sc_layouts_row_delimiter, [class*="scheme_"].sc_layouts_row_delimiter { border-color: var(--theme-color-bd_color); } .footer_wrap [class*="scheme_"].vc_row .sc_layouts_row_delimiter, .footer_wrap [class*="scheme_"].sc_layouts_row_delimiter, [class*="scheme_"].footer_wrap .sc_layouts_row_delimiter { border-color: var(--theme-color-alter_bd_color); } .sc_layouts_item_icon { color: var(--theme-color-text_light); } .sc_layouts_item_details_line1 { color: var(--theme-color-text_link); } .sc_layouts_item_details_line2 { color: var(--theme-color-text_dark); } span.trx_addons_login_menu, span.trx_addons_login_menu:after { color: var(--theme-color-alter_text); background-color: var(--theme-color-alter_bg_color); border-color: var(--theme-color-alter_bd_color); } span.trx_addons_login_menu .trx_addons_login_menu_delimiter { border-color: var(--theme-color-alter_bd_color); } span.trx_addons_login_menu .trx_addons_login_menu_item { color: var(--theme-color-alter_text); } span.trx_addons_login_menu .trx_addons_login_menu_item:hover, span.trx_addons_login_menu .trx_addons_login_menu_item:focus { color: var(--theme-color-alter_dark); background-color: var(--theme-color-alter_bg_hover); } .sc_layouts_row_fixed_on { background-color: var(--theme-color-bg_color); } /* Row type: Narrow */ .sc_layouts_row.sc_layouts_row_type_narrow, [class*="scheme_"].sc_layouts_row.sc_layouts_row_type_narrow { color: var(--theme-color-alter_text); background-color: var(--theme-color-alter_bg_color); } .sc_layouts_row_type_narrow .sc_layouts_item, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]), [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]) { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, .sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, .sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover .sc_layouts_item_icon, .sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus .sc_layouts_item_icon { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item_icon { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .sc_layouts_item_details_line1, .sc_layouts_row_type_narrow .sc_layouts_item_details_line2, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item_details_line1, [class*="scheme_"].sc_layouts_row_type_narrow .sc_layouts_item_details_line2 { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .socials_wrap .social_item .social_icon, [class*="scheme_"].sc_layouts_row_type_narrow .socials_wrap .social_item .social_icon, .sc_layouts_row_type_narrow .socials_wrap:not([class*="socials_type_"]) .social_item .social_icon, [class*="scheme_"].sc_layouts_row_type_narrow .socials_wrap:not([class*="socials_type_"]) .social_item .social_icon { background-color: transparent !important; color: var(--theme-color-alter_dark); } .sc_layouts_row_type_narrow .socials_wrap .social_item:hover .social_icon, .sc_layouts_row_type_narrow .socials_wrap .social_item:focus .social_icon, [class*="scheme_"].sc_layouts_row_type_narrow .socials_wrap .social_item:hover .social_icon, [class*="scheme_"].sc_layouts_row_type_narrow .socials_wrap .social_item:focus .social_icon, .sc_layouts_row_type_narrow .socials_wrap:not([class*="socials_type_"]) .social_item:hover .social_icon, .sc_layouts_row_type_narrow .socials_wrap:not([class*="socials_type_"]) .social_item:focus .social_icon, [class*="scheme_"].sc_layouts_row_type_narrow .socials_wrap:not([class*="socials_type_"]) .social_item:hover .social_icon, [class*="scheme_"].sc_layouts_row_type_narrow .socials_wrap:not([class*="socials_type_"]) .social_item:focus .social_icon { color: var(--theme-color-alter_link); } .sc_layouts_row_type_narrow .sc_button_default, .sc_layouts_row_type_narrow .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image), [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_default, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) { background-color: var(--theme-color-alter_link); color: var(--theme-color-inverse_link); } .sc_layouts_row_type_narrow .sc_button_default:hover, .sc_layouts_row_type_narrow .sc_button_default:focus, .sc_layouts_row_type_narrow .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, .sc_layouts_row_type_narrow .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_default:hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_default:focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus { background-color: var(--theme-color-alter_link); color: var(--theme-color-inverse_link); } .sc_layouts_row_type_narrow .sc_button.color_style_link2, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_link2 { background-color: var(--theme-color-alter_link2); color: var(--theme-color-inverse_link); } .sc_layouts_row_type_narrow .sc_button.color_style_link2:hover, .sc_layouts_row_type_narrow .sc_button.color_style_link2:focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_link2:hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_link2:focus { background-color: var(--theme-color-alter_hover2); color: var(--theme-color-inverse_link) !important; } .sc_layouts_row_type_narrow .sc_button.color_style_link3, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_link3 { background-color: var(--theme-color-alter_link3); color: var(--theme-color-inverse_link); } .sc_layouts_row_type_narrow .sc_button.color_style_link3:hover, .sc_layouts_row_type_narrow .sc_button.color_style_link3:focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_link3:hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_link3:focus { background-color: var(--theme-color-alter_hover3); color: var(--theme-color-inverse_link) !important; } .sc_layouts_row_type_narrow .sc_button.color_style_dark, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_dark { background-color: var(--theme-color-alter_dark); color: var(--theme-color-inverse_link); } .sc_layouts_row_type_narrow .sc_button.color_style_dark:hover, .sc_layouts_row_type_narrow .sc_button.color_style_dark:focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_dark:hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button.color_style_dark:focus { background-color: var(--theme-color-alter_link); color: var(--theme-color-inverse_link) !important; } .sc_layouts_row_type_narrow .sc_button_bordered:not(.sc_button_bg_image), [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered:not(.sc_button_bg_image) { color:var(--theme-color-alter_link); border-color:var(--theme-color-alter_link); } .sc_layouts_row_type_narrow .sc_button_bordered:not(.sc_button_bg_image):hover, .sc_layouts_row_type_narrow .sc_button_bordered:not(.sc_button_bg_image):focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered:not(.sc_button_bg_image):hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered:not(.sc_button_bg_image):focus { color:var(--theme-color-alter_hover) !important; border-color:var(--theme-color-alter_hover) !important; } .sc_layouts_row_type_narrow .sc_button_bordered.color_style_link2:not(.sc_button_bg_image), [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_link2:not(.sc_button_bg_image) { color:var(--theme-color-alter_link2); border-color:var(--theme-color-alter_link2); } .sc_layouts_row_type_narrow .sc_button_bordered.color_style_link2:not(.sc_button_bg_image):hover, .sc_layouts_row_type_narrow .sc_button_bordered.color_style_link2:not(.sc_button_bg_image):focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_link2:not(.sc_button_bg_image):hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_link2:not(.sc_button_bg_image):focus { color:var(--theme-color-alter_hover2) !important; border-color:var(--theme-color-alter_hover2) !important; } .sc_layouts_row_type_narrow .sc_button_bordered.color_style_link3:not(.sc_button_bg_image), [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_link3:not(.sc_button_bg_image) { color:var(--theme-color-alter_link3); border-color:var(--theme-color-alter_link3); } .sc_layouts_row_type_narrow .sc_button_bordered.color_style_link3:not(.sc_button_bg_image):hover, .sc_layouts_row_type_narrow .sc_button_bordered.color_style_link3:not(.sc_button_bg_image):focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_link3:not(.sc_button_bg_image):hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_link3:not(.sc_button_bg_image):focus { color:var(--theme-color-alter_hover3) !important; border-color:var(--theme-color-alter_hover3) !important; } .sc_layouts_row_type_narrow .sc_button_bordered.color_style_dark:not(.sc_button_bg_image), [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_dark:not(.sc_button_bg_image) { color:var(--theme-color-alter_dark); border-color:var(--theme-color-alter_dark); } .sc_layouts_row_type_narrow .sc_button_bordered.color_style_dark:not(.sc_button_bg_image):hover, .sc_layouts_row_type_narrow .sc_button_bordered.color_style_dark:not(.sc_button_bg_image):focus, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_dark:not(.sc_button_bg_image):hover, [class*="scheme_"].sc_layouts_row_type_narrow .sc_button_bordered.color_style_dark:not(.sc_button_bg_image):focus { color:var(--theme-color-alter_link) !important; border-color:var(--theme-color-alter_link) !important; } .sc_layouts_row_type_narrow .search_wrap .search_submit, [class*="scheme_"].sc_layouts_row_type_narrow .search_wrap .search_submit { background-color: transparent; color: var(--theme-color-alter_link); } .sc_layouts_row_type_narrow .search_wrap .search_field, [class*="scheme_"].sc_layouts_row_type_narrow .search_wrap .search_field { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .search_wrap .search_field::-webkit-input-placeholder, [class*="scheme_"].sc_layouts_row_type_narrow .search_wrap .search_field::-webkit-input-placeholder { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .search_wrap .search_field::-moz-placeholder, [class*="scheme_"].sc_layouts_row_type_narrow .search_wrap .search_field::-moz-placeholder { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .search_wrap .search_field:-ms-input-placeholder, [class*="scheme_"].sc_layouts_row_type_narrow .search_wrap .search_field:-ms-input-placeholder { color: var(--theme-color-alter_text); } .sc_layouts_row_type_narrow .search_wrap .search_field:focus, [class*="scheme_"].sc_layouts_row_type_narrow .search_wrap .search_field:focus { color: var(--theme-color-alter_dark); } /* Row type: Compact */ .sc_layouts_row_type_compact .sc_layouts_item, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item { color: var(--theme-color-text); } .sc_layouts_row_type_compact .sc_layouts_item a:not(.sc_button):not([class*="button"]), [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item a:not(.sc_button):not([class*="button"]) { color: var(--theme-color-text_dark); } .sc_layouts_row_type_compact .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, .sc_layouts_row_type_compact .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, .sc_layouts_row_type_compact .sc_layouts_item a:hover .sc_layouts_item_icon, .sc_layouts_row_type_compact .sc_layouts_item a:focus .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item a:hover .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item a:focus .sc_layouts_item_icon { color: var(--theme-color-text_dark); } .sc_layouts_row_type_compact .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item_icon { color: var(--theme-color-text_dark); } .sc_layouts_row_type_compact .sc_layouts_item_details_line1, .sc_layouts_row_type_compact .sc_layouts_item_details_line2, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item_details_line1, [class*="scheme_"].sc_layouts_row_type_compact .sc_layouts_item_details_line2 { color: var(--theme-color-text_dark); } .sc_layouts_row_type_compact .socials_wrap .social_item .social_icon, [class*="scheme_"].sc_layouts_row_type_compact .socials_wrap .social_item .social_icon, .sc_layouts_row_type_compact .socials_wrap:not([class*="socials_type_"]) .social_item .social_icon, [class*="scheme_"].sc_layouts_row_type_compact .socials_wrap:not([class*="socials_type_"]) .social_item .social_icon { background-color: transparent; color: var(--theme-color-text_dark); } .sc_layouts_row_type_compact .socials_wrap .social_item:hover .social_icon, [class*="scheme_"].sc_layouts_row_type_compact .socials_wrap .social_item:hover .social_icon, .sc_layouts_row_type_compact .socials_wrap:not([class*="socials_type_"]) .social_item:hover .social_icon, [class*="scheme_"].sc_layouts_row_type_compact .socials_wrap:not([class*="socials_type_"]) .social_item:hover .social_icon { background-color: transparent; color: var(--theme-color-text_hover); } .sc_layouts_row_type_compact .search_wrap .search_submit, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap .search_submit { background-color: transparent; color: var(--theme-color-text_dark); &:before { color: var(--theme-color-text_dark); } } .sc_layouts_row_type_compact .search_wrap .search_submit:hover, .sc_layouts_row_type_compact .search_wrap .search_submit:focus, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap .search_submit:hover, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap .search_submit:focus { background-color: transparent; color: var(--theme-color-text_hover); } .sc_layouts_row_type_compact .search_wrap.search_style_normal .search_submit, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap.search_style_normal .search_submit { color: var(--theme-color-text_link); } .sc_layouts_row_type_compact .search_wrap.search_style_normal .search_submit:hover, .sc_layouts_row_type_compact .search_wrap.search_style_normal .search_submit:focus, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap.search_style_normal .search_submit:hover, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap.search_style_normal .search_submit:focus { color: var(--theme-color-text_hover); } .sc_layouts_row_type_compact .search_wrap .search_field::-webkit-input-placeholder, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap .search_field::-webkit-input-placeholder { color: var(--theme-color-text); } .sc_layouts_row_type_compact .search_wrap .search_field::-moz-placeholder, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap .search_field::-moz-placeholder { color: var(--theme-color-text); } .sc_layouts_row_type_compact .search_wrap .search_field:-ms-input-placeholder, [class*="scheme_"].sc_layouts_row_type_compact .search_wrap .search_field:-ms-input-placeholder { color: var(--theme-color-text); } /* Row type: Normal */ .sc_layouts_row_type_normal .sc_layouts_item, [class*="scheme_"].sc_layouts_row_type_normal .sc_layouts_item { color: var(--theme-color-text); } .sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]), [class*="scheme_"].sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]) { color: var(--theme-color-text); } .sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, .sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, .sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover .sc_layouts_item_icon, .sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, [class*="scheme_"].sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, [class*="scheme_"].sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover .sc_layouts_item_icon, [class*="scheme_"].sc_layouts_row_type_normal .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus .sc_layouts_item_icon { color: var(--theme-color-text_dark); } .sc_layouts_row_type_normal .search_wrap .search_submit, [class*="scheme_"].sc_layouts_row_type_normal .search_wrap .search_submit { background-color: transparent; color: var(--theme-color-input_text); } .sc_layouts_row_type_normal .search_wrap .search_submit:hover, .sc_layouts_row_type_normal .search_wrap .search_submit:focus, [class*="scheme_"].sc_layouts_row_type_normal .search_wrap .search_submit:hover, [class*="scheme_"].sc_layouts_row_type_normal .search_wrap .search_submit:focus { background-color: transparent; color: var(--theme-color-input_dark); } /* Logo */ .sc_layouts_logo b { color: var(--theme-color-text_dark); } .sc_layouts_logo i { color: var(--theme-color-text_link); } .sc_layouts_logo_text, .sc_layouts_logo .logo_text { color: var(--theme-color-text_dark) !important; } .sc_layouts_logo_text:hover, .sc_layouts_logo:hover .logo_text { color: var(--theme-color-text_link) !important; } .sc_layouts_logo_slogan, .sc_layouts_logo .logo_slogan { color: var(--theme-color-text) !important; } .sc_layouts_logo .logo_slogan { @include font(14px, 18px); } /* Search style 'Normal' */ .search_style_normal { &.search_wrap { .search_form { top: 2px; } .search_field { padding: 5px 0 5px 2em !important; &[placeholder]::-webkit-input-placeholder { color: var(--theme-color-input_text); } &[placeholder]::-moz-placeholder { color: var(--theme-color-input_text); } &[placeholder]:-ms-input-placeholder { color: var(--theme-color-input_text); } &[placeholder]::placeholder { color: var(--theme-color-input_text); } } .search_submit { &:before { color: var(--theme-color-text); @include transition(color .3s ease); } &:hover:before, &:focus:before { color: var(--theme-color-text_dark); } } } } /* Search style 'Expand' */ .search_style_expand { &.search_wrap { .search_form { top: 2px; } .search_field { padding: 5px 0 5px 2em !important; &[placeholder]::-webkit-input-placeholder { color: var(--theme-color-input_text); } &[placeholder]::-moz-placeholder { color: var(--theme-color-input_text); } &[placeholder]:-ms-input-placeholder { color: var(--theme-color-input_text); } &[placeholder]::placeholder { color: var(--theme-color-input_text); } } .search_submit { &:before { color: var(--theme-color-text); @include transition(color .3s ease); } &:hover:before, &:focus:before { color: var(--theme-color-text_dark); } } } &.search_opened { background-color: transparent; border-color: transparent; .search_submit { color: var(--theme-color-text); &:hover, &:focus { color: var(--theme-color-text_dark); } } } } /* Search style 'Fullscreen' */ .search_style_fullscreen .search_results { width: 67vw; } .search_style_fullscreen.search_wrap { min-width: 1.55em; min-height: 1.55em; .search_field { padding: 0 0 0 1.55em !important; } .search_submit { bottom: -5px; } } .search_style_fullscreen.search_wrap.search_ajax .search_field { padding-left: 1.55em !important; } .search_style_fullscreen.search_wrap.search_ajax.search_opened .search_field { padding-left: 0 !important; } .search_style_fullscreen.search_opened .search_form_wrap { background-color: var(--theme-color-alter_bg_color); } .search_style_fullscreen.search_opened .search_form { border-color: var(--theme-color-alter_dark_05); } .search_style_fullscreen.search_opened .search_field, .search_style_fullscreen.search_opened .search_close, .search_style_fullscreen.search_opened .search_submit { color: var(--theme-color-alter_dark); } .search_style_fullscreen.search_opened .search_close:hover, .search_style_fullscreen.search_opened .search_close:focus, .search_style_fullscreen.search_opened .search_field:hover, .search_style_fullscreen.search_opened .search_field:focus, .search_style_fullscreen.search_opened .search_submit:hover, .search_style_fullscreen.search_opened .search_submit:focus { color: var(--theme-color-alter_dark); } .search_style_fullscreen.search_opened .search_field::-webkit-input-placeholder {color:var(--theme-color-alter_text) !important; opacity: 1 !important;} .search_style_fullscreen.search_opened .search_field::-moz-placeholder {color:var(--theme-color-alter_text) !important; opacity: 1 !important;}/* Firefox 19+ */ .search_style_fullscreen.search_opened .search_field:-moz-placeholder {color:var(--theme-color-alter_text) !important; opacity: 1 !important;}/* Firefox 18- */ .search_style_fullscreen.search_opened .search_field:-ms-input-placeholder {color:var(--theme-color-alter_text) !important; opacity: 1 !important;} .search_style_fullscreen.search_opened .search_form { width: 68%; } .search_style_fullscreen.search_opened .search_field, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened .search_field { padding: 0 1.5em 0 0 !important; @include font(1.9rem !important, normal !important, 400 !important); height: 3em; letter-spacing: 0; } .search_style_fullscreen.search_opened .search_field[placeholder]::-webkit-input-placeholder, .search_style_fullscreen.search_opened .search_field[placeholder]::-moz-placeholder, .search_style_fullscreen.search_opened .search_field[placeholder]:-ms-input-placeholder, .search_style_fullscreen.search_opened .search_field[placeholder]::placeholder, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened .search_field[placeholder]::-webkit-input-placeholder, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened .search_field[placeholder]::-moz-placeholder, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened .search_field[placeholder]:-ms-input-placeholder, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened .search_field[placeholder]::placeholder { line-height: normal !important; height: 3em !important; } .search_style_fullscreen.search_opened .search_submit, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened .search_submit { font-size: 1.5rem; } .search_style_fullscreen.search_opened.search_ajax .search_submit, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened.search_ajax .search_submit { margin-top: -1.5em; } .search_style_fullscreen.search_opened .search_close { @include font(1.3rem, '', 400); top: -4em; @include transition(transform .3s ease); &:hover { @include transform(rotate(180deg)); } } .search_style_fullscreen.search_opened .search_submit, .sc_layouts_row_type_normal .sc_layouts_column .search_style_fullscreen.search_opened .search_submit { left: auto !important; right: 0 !important; } .search_style_fullscreen.search_opened .search_field, .search_style_fullscreen.search_opened .search_submit, .search_style_fullscreen.search_opened .search_submit:before { @include transition(none); } .search_wrap.search_progress .search_submit { &:before { content: '\E830'; } } /* Search field */ .search_wrap .search_field { padding: 0 0 0 1.7em !important; } /* Search submit */ .search_wrap .search_submit { padding: 1px; bottom: 0; } /* Search close */ .search_close:before { content: '\e9e1'; font-family: $theme_icons; } /* Search Style "Modern" */ .admin-bar .search_modern .search_wrap.search_opened { top: 32px; } @media (max-width: 782px) { .admin-bar .search_modern .search_wrap.search_opened { top: 46px; } } @media (max-width: 600px) { .admin-bar .search_modern .search_wrap.search_opened { top: 0; } } body.search_active .top_panel { z-index: 8002; } body.sc_layouts_search_opened .top_panel { z-index: 8003; } .search_modern { position: relative; z-index: 2000; display: inline-block; vertical-align: middle; &.search_active { z-index: 100005; } > .search_submit { display: block; @include box(1.4em, 1.4em, 1.4em); text-align: center; position: relative; @include transition(all 0.3s cubic-bezier(.46,.03,.52,.96)); opacity: 1; cursor: pointer; padding: 1px; color: var(--theme-color-text_dark); background-color: transparent; &:before { padding: 1px; font-size: 24px !important; font-family: $theme_icons; content: '\e9b6'; margin: 0; @include transition-color(0.3s); } } .sc_layouts_row_type_compact & .search_wrap .search_submit { font-size: inherit; } .search_wrap { position: fixed; left: 0; top: -500px; z-index: 100; @include box(100%, 500px); overflow: hidden; will-change: top, box-shadow; @include transition(top .5s cubic-bezier(.46,.03,.52,.96), box-shadow .3s ease-out); @include box-shadow(0 1px 6px rgba(0,0,0,0)); background-color: var(--theme-color-alter_bg_color); &.search_ajax { overflow: visible; } &.search_progress .search_submit { @include animation(spin 2s infinite linear); &:before { content: '\E830'; } } .search_form { font-size: 1em; position: absolute; z-index: 1; top: 55%; left: 50%; @include transform(translate(-50%, -50%)); width: 100%; border: none; &:after { content: ''; display: block; width: 100%; height: 1px; background-color: var(--theme-color-text_dark); @include transform(scale3d(0, 1, 1)); @include transform-origin(left center); } } .search_field, .search_submit, .search_submit:before { @include transition-none; } } .search_form_wrap { @include abs-cc; width: var(--theme-var-page); height: 100%; .search_field { width:0; visibility:hidden; padding: 0 0 0 1.25em; vertical-align:middle; @include border-box; border: none; background-color: transparent; &[placeholder]::-webkit-input-placeholder { color: var(--theme-color-text); } &[placeholder]::-moz-placeholder { color: var(--theme-color-text); } &[placeholder]:-ms-input-placeholder { color: var(--theme-color-text); } &[placeholder]::placeholder { color: var(--theme-color-text); } } .search_submit { @include font(inherit, inherit, inherit); position: absolute; left: auto; right: 0; top: 50%; @include translateY(-50%); background-color:transparent; padding: 0; &:before { font-size: 24px !important; font-family: $theme_icons; content: '\e9b6'; margin: 0; @include transition-color(0.3s); color: var(--theme-color-text_dark); } } } .search_wrap .search_results { padding: 3em; } .search_results, .sc_layouts_column_align_right & .search_results { top: 6.5em; left: 0; right: auto; width: 100%; } .search_results:after, .sc_layouts_column_align_right & .search_results:after { left: 3em; right: auto; } .search_results .search_results_content { max-height: 30vh; overflow-y: auto; } .search_header_wrap { @include abs-lt; width: 100%; height: auto; z-index: 2; .logo_image { position: absolute; left: 60px; top: 55px; display: inline-block; max-height: 100px; width: auto; } .search_close { position: absolute; right: 60px; top: 60px; @include flex; @include flex-justify-content(center); @include flex-align-items(center); @include box(1.2em, 1.2em, 1.2em); @include font(2rem, '', 400); text-align: center; cursor:pointer; @include transition(none); color: var(--theme-color-text_dark); &:before { position: relative; display: inline-block; content: '\e9e1'; font-family: $theme_icons; font-size: 24px; @include transition(transform .3s ease, color .3s ease); @include transform-origin(50% 50%); } &:hover:before { @include transform(rotate(180deg)); } } } .search_overlay { display: none; @include fixed-pos(); z-index: 1; @include box(1000%, 1000%); background-color: var(--theme-color-alter_bg_color); opacity: .2; } /* search in content */ .content & .search_wrap { max-width: 100%; .search_form_wrap { width: var(--theme-var-page); } } } /* Search Opened */ .search_modern { .search_wrap.search_opened { top: 0; @include transition(top .5s cubic-bezier(.46,.03,.52,.96), box-shadow .3s ease-out); @include box-shadow(0 1px 6px rgba(0,0,0,0.05)); &.search_ajax .search_submit { @include transform(none); margin-top: -1.5em; } .search_field { @include font(1.9rem !important, normal !important, 400 !important); @include box(100%, 3em); letter-spacing: 0; margin: 0; padding: 0 1.5em 0 0; border: none; white-space: pre-wrap; word-wrap: break-word; resize: none; overflow: hidden; display: block; visibility: visible; } .search_field[placeholder]::-webkit-input-placeholder, .search_field[placeholder]::-moz-placeholder, .search_field[placeholder]:-ms-input-placeholder, .search_field[placeholder]::placeholder { line-height: normal !important; height: 3em !important; } .search_submit { position: absolute; left: auto; right: 0; top: 50%; @include translateY(-50%); &:before { font-size: 1.5rem; @include transition-color(0.3s); } } .search_field { padding: 0 1.5em 0 0 !important; } .search_field, .search_field:hover, .search_field:focus { background-color: transparent; } .search_field::-ms-clear { display: none; } } } /* Animation Search */ .search_modern { .search_form { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:after { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; visibility:hidden; } } .search_opened .search_form { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; &:after { -webkit-animation-name: fadeInMove; animation-name: fadeInMove; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } } /* out animation */ .search_out_anim & .search_form { -webkit-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; &:after { -webkit-animation-name: fadeOutMove2; animation-name: fadeOutMove2; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Logo animation */ .logo_image { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; } .search_opened .logo_image { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } .search_out_anim & .logo_image { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:visible; } /* Close button animation */ .search_close:before { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; } .search_opened .search_close:before { -webkit-animation-name: fadeInAnimScale; animation-name: fadeInAnimScale; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; visibility:visible; } .search_out_anim & .search_close:before { -webkit-animation-name: fadeOutAnimScale; animation-name: fadeOutAnimScale; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:visible; } } /* Search results */ .search_wrap { .search_results { background-color: var(--theme-color-bg_color); border-color: var(--theme-color-bd_color); &:after { background-color: var(--theme-color-bg_color); border-left-color: var(--theme-color-bd_color); border-top-color: var(--theme-color-bd_color); } .search_results_close { @include flex; @include flex-justify-content(center); @include flex-align-items(center); @include square(1.4em); font-size: 14px; top: 8px; right: 8px; color: var(--theme-color-text_dark); &:hover { color: var(--theme-color-text_dark); } &:before { font-family: $theme_icons; content: '\e9e1'; @include transition(transform .3s ease); } &:hover:before{ @include transform(rotate(180deg)); } } &.widget_area .post_item + .post_item { border-top-color: var(--theme-color-bd_color); } } } /* Search field inside content --------------------------------------- */ .content .search_wrap { margin:0; .search_form_wrap { width: 100%; } .search_form_wrap .search_field { width:100%; } .search_submit { background-color:transparent; } .search_results { width:100%; } } .post_item_none_search .search_wrap, .post_item_none_archive .search_wrap { max-width: 410px; margin: 0 auto; .search_field { padding: 0.77em 1.2em 0.77em 3.3em !important; border-width: 1px !important; border-style: solid !important; @include border-radius(0); } .search_submit { left: 0; right: auto; top: 0; padding: 0 1em; @include border-radius(0); &:before { @include transition-all(0.3s); } } } /* Page title and breadcrumbs */ .sc_layouts_title .sc_layouts_title_meta, .sc_layouts_title .sc_layouts_title_breadcrumbs, .sc_layouts_title .sc_layouts_title_breadcrumbs a, .sc_layouts_title .sc_layouts_title_description, .sc_layouts_title .post_meta, .sc_layouts_title .post_meta_item, .sc_layouts_title .post_meta .vc_inline-link, .sc_layouts_title .post_meta_item a, .sc_layouts_title .post_meta_item:after, .sc_layouts_title .post_meta_item:hover:after, .sc_layouts_title .post_meta_item.post_meta_edit:after, .sc_layouts_title .post_meta_item.post_meta_edit:hover:after, .sc_layouts_title .post_meta_item.post_categories, .sc_layouts_title .post_meta_item.post_categories a, .sc_layouts_title .post_info .post_info_item, .sc_layouts_title .post_info .post_info_item a, .sc_layouts_title .post_info_counters .post_meta_item { color: var(--theme-color-text_dark); } .sc_layouts_title .post_meta_item a:hover, .sc_layouts_title .post_meta_item a:focus, .sc_layouts_title .sc_layouts_title_breadcrumbs a:hover, .sc_layouts_title .sc_layouts_title_breadcrumbs a:focus, .sc_layouts_title .post_meta .vc_inline-link:hover, .sc_layouts_title .post_meta .vc_inline-link:focus, .sc_layouts_title a.post_meta_item:hover, .sc_layouts_title a.post_meta_item:focus, .sc_layouts_title .post_meta_item.post_categories a:hover, .sc_layouts_title .post_meta_item.post_categories a:focus, .sc_layouts_title .post_info .post_info_item a:hover, .sc_layouts_title .post_info .post_info_item a:focus, .sc_layouts_title .post_info_counters .post_meta_item:hover, .sc_layouts_title .post_info_counters .post_meta_item:focus { color: var(--theme-color-text_hover); } /* Menu --------------------------------- */ .sc_layouts_menu_nav > li > a { color: var(--theme-color-text_dark); } .sc_layouts_menu_nav > li > a:hover, .sc_layouts_menu_nav > li.sfHover > a { color: var(--theme-color-text_link) !important; } .sc_layouts_menu_nav > li.current-menu-item > a, .sc_layouts_menu_nav > li.current-menu-parent > a, .sc_layouts_menu_nav > li.current-menu-ancestor > a { color: var(--theme-color-text_link) !important; } .sc_layouts_menu_nav .menu-collapse > a:before { color: var(--theme-color-alter_dark); font-weight: 400; } .sc_layouts_menu_nav .menu-collapse > a:after { display: none; @include transition-all(0.3s); background-color: var(--theme-color-alter_bg_color); } .sc_layouts_menu_nav .menu-collapse > a:hover:before, .sc_layouts_menu_nav .menu-collapse > a:focus:before { color: var(--theme-color-alter_dark); } .sc_layouts_menu_nav .menu-collapse > a:hover:after, .sc_layouts_menu_nav .menu-collapse > a:focus:after { background-color: var(--theme-color-alter_bg_hover); } /* Submenu */ .sc_layouts_menu_popup .sc_layouts_menu_nav, .sc_layouts_menu_popup .sc_layouts_menu_nav > li > ul, .sc_layouts_menu_nav > li > ul ul, .sc_layouts_menu_nav > li ul:not(.sc_item_filters_tabs) { background-color: var(--theme-color-extra_bg_color); } .widget_nav_menu li.menu-delimiter, .sc_layouts_menu_nav > li li.menu-delimiter { border-color: var(--theme-color-extra_bd_color); } .sc_layouts_menu_popup .sc_layouts_menu_nav > li > a, .sc_layouts_menu_nav > li li > a { color: var(--theme-color-extra_text) !important; } .sc_layouts_menu_popup .sc_layouts_menu_nav > li > a:hover, .sc_layouts_menu_popup .sc_layouts_menu_nav > li.sfHover > a, .sc_layouts_menu_nav > li li > a:hover, .sc_layouts_menu_nav > li li.sfHover > a { color: var(--theme-color-extra_hover) !important; } .sc_layouts_menu_nav > li li > a:hover:after { color: var(--theme-color-extra_hover) !important; } .sc_layouts_menu_nav li[class*="columns-"] li.menu-item-has-children > a:hover, .sc_layouts_menu_nav li[class*="columns-"] li.menu-item-has-children.sfHover > a { color: var(--theme-color-extra_text) !important; background-color: transparent; } .sc_layouts_menu_nav > li li[class*="icon-"]:before { color: var(--theme-color-extra_hover); } .sc_layouts_menu_nav > li li[class*="icon-"]:hover:before, .sc_layouts_menu_nav > li li[class*="icon-"].shHover:before { color: var(--theme-color-extra_hover); } .sc_layouts_menu_nav > li li.current-menu-item > a, .sc_layouts_menu_nav > li li.current-menu-parent > a, .sc_layouts_menu_nav > li li.current-menu-ancestor > a { color: var(--theme-color-extra_hover) !important; } .sc_layouts_menu_nav > li li.current-menu-item:before, .sc_layouts_menu_nav > li li.current-menu-parent:before, .sc_layouts_menu_nav > li li.current-menu-ancestor:before { color: var(--theme-color-extra_hover) !important; } /* Description in the menu */ .sc_layouts_menu_item_description { color: var(--theme-color-extra_light); } .menu_main_nav > li ul [class*="current-menu-"] > a .sc_layouts_menu_item_description, .sc_layouts_menu_nav > li ul li[class*="current-menu-"] > a .sc_layouts_menu_item_description, .menu_main_nav > li ul a:hover .sc_layouts_menu_item_description, .sc_layouts_menu_nav > li ul a:hover .sc_layouts_menu_item_description { color: var(--theme-color-text_light); } .menu_main_nav > li[class*="current-menu-"] > a .sc_layouts_menu_item_description, .sc_layouts_menu_nav > li[class*="current-menu-"] > a .sc_layouts_menu_item_description, .menu_main_nav > li > a:hover .sc_layouts_menu_item_description, .sc_layouts_menu_nav > li > a:hover .sc_layouts_menu_item_description { color: var(--theme-color-text); } /* Menu hovers ----------------------------------------- */ /* fade box */ .menu_hover_fade_box .sc_layouts_menu_nav > a:hover, .menu_hover_fade_box .sc_layouts_menu_nav > li:not(.menu-collapse) > a:hover, .menu_hover_fade_box .sc_layouts_menu_nav > li:not(.menu-collapse).sfHover > a { color: var(--theme-color-alter_link); background-color: var(--theme-color-alter_bg_color); } /* slide_box */ .menu_hover_slide_box .sc_layouts_menu_nav > li#blob { background-color: var(--theme-color-alter_bg_color); } /* slide_line */ .menu_hover_slide_line .sc_layouts_menu_nav > li#blob { background-color: var(--theme-color-text_link); } /* color_line */ .menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:before { background-color: var(--theme-color-text_dark); } .menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:after, .menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse).menu-item-has-children > a:after { background-color: var(--theme-color-text_link); display: block; } .menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse).sfHover > a, .menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:hover, .menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:focus { color: var(--theme-color-text_link); } /* zoom_line */ .menu_hover_zoom_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:after { background-color: var(--theme-color-text_dark); } .menu_hover_zoom_line { .sc_layouts_menu_nav > li > a:hover, .sc_layouts_menu_nav > li.sfHover > a { color: var(--theme-color-text_dark) !important; } > ul > li:not(.menu-collapse) > a:before { display: none; } > ul > li:not(.menu-collapse) > a:after { content: "" !important; display: block !important; position: relative; z-index: 1; top: auto; bottom: -2px; left: 0; @include transform(none); width: 0; height: 2px; @include transition-all(0.2s); } > ul > li:not(.menu-collapse) > a:hover:after, > ul > li:not(.menu-collapse).sfHover > a:after, > ul > li:not(.menu-collapse).current-menu-item > a:after, > ul > li:not(.menu-collapse).current-menu-parent > a:after, > ul > li:not(.menu-collapse).current-menu-ancestor > a:after { width: 100%; } .sc_layouts_menu_nav > li.current-menu-item > a, .sc_layouts_menu_nav > li.current-menu-parent > a, .sc_layouts_menu_nav > li.current-menu-ancestor > a { color: var(--theme-color-text_dark) !important; } } /* path_line */ .menu_hover_path_line .sc_layouts_menu_nav > li:not(.menu-collapse):before, .menu_hover_path_line .sc_layouts_menu_nav > li:not(.menu-collapse):after, .menu_hover_path_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:before, .menu_hover_path_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:after { background-color: var(--theme-color-text_link); } /* roll_down */ .menu_hover_roll_down .sc_layouts_menu_nav > li:not(.menu-collapse) > a:before { background-color: var(--theme-color-text_link); } /* Layouts as submenu --------------------------------- */ .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section, .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row, .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item, .sc_layouts_menu li > ul.sc_layouts_submenu .post_item, .sc_layouts_menu li > ul.sc_layouts_submenu .amount, .sc_layouts_menu li > ul.sc_layouts_submenu li { color: var(--theme-color-extra_text); } .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:not(.sc_button):not([class*="button"]), .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:not(.sc_button):not([class*="button"]), .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:not(.sc_button):not([class*="button"]) { color: var(--theme-color-extra_dark); } .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:not(.sc_button):not([class*="button"]):hover, .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:not(.sc_button):not([class*="button"]):focus, .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:not(.sc_button):not([class*="button"]):hover, .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:not(.sc_button):not([class*="button"]):focus, .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:hover .sc_layouts_item_icon, .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:focus .sc_layouts_item_icon, .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:hover .sc_layouts_item_icon, .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:focus .sc_layouts_item_icon, .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:hover .sc_layouts_item_icon, .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:focus .sc_layouts_item_icon { color: var(--theme-color-extra_link); } ul.sc_layouts_submenu h1, ul.sc_layouts_submenu h2, ul.sc_layouts_submenu h3, ul.sc_layouts_submenu h4, ul.sc_layouts_submenu h5, ul.sc_layouts_submenu h6, ul.sc_layouts_submenu h1 a, ul.sc_layouts_submenu h2 a, ul.sc_layouts_submenu h3 a, ul.sc_layouts_submenu h4 a, ul.sc_layouts_submenu h5 a, ul.sc_layouts_submenu h6 a, ul.sc_layouts_submenu [class*="color_style_"] h1 a, ul.sc_layouts_submenu [class*="color_style_"] h2 a, ul.sc_layouts_submenu [class*="color_style_"] h3 a, ul.sc_layouts_submenu [class*="color_style_"] h4 a, ul.sc_layouts_submenu [class*="color_style_"] h5 a, ul.sc_layouts_submenu [class*="color_style_"] h6 a { color: var(--theme-color-extra_dark); } ul.sc_layouts_submenu h1 a:hover, ul.sc_layouts_submenu h1 a:focus, ul.sc_layouts_submenu h2 a:hover, ul.sc_layouts_submenu h2 a:focus, ul.sc_layouts_submenu h3 a:hover, ul.sc_layouts_submenu h3 a:focus, ul.sc_layouts_submenu h4 a:hover, ul.sc_layouts_submenu h4 a:focus, ul.sc_layouts_submenu h5 a:hover, ul.sc_layouts_submenu h5 a:focus, ul.sc_layouts_submenu h6 a:hover, ul.sc_layouts_submenu h6 a:focus { color: var(--theme-color-extra_link); } ul.sc_layouts_submenu .color_style_link2 h1 a:hover, ul.sc_layouts_submenu .color_style_link2 h1 a:focus, ul.sc_layouts_submenu .color_style_link2 h2 a:hover, ul.sc_layouts_submenu .color_style_link2 h2 a:focus, ul.sc_layouts_submenu .color_style_link2 h3 a:hover, ul.sc_layouts_submenu .color_style_link2 h3 a:focus, ul.sc_layouts_submenu .color_style_link2 h4 a:hover, ul.sc_layouts_submenu .color_style_link2 h4 a:focus, ul.sc_layouts_submenu .color_style_link2 h5 a:hover, ul.sc_layouts_submenu .color_style_link2 h5 a:focus, ul.sc_layouts_submenu .color_style_link2 h6 a:hover, ul.sc_layouts_submenu .color_style_link2 h6 a:focus { color: var(--theme-color-extra_link2); } ul.sc_layouts_submenu .color_style_link3 h1 a:hover, ul.sc_layouts_submenu .color_style_link3 h1 a:focus, ul.sc_layouts_submenu .color_style_link3 h2 a:hover, ul.sc_layouts_submenu .color_style_link3 h2 a:focus, ul.sc_layouts_submenu .color_style_link3 h3 a:hover, ul.sc_layouts_submenu .color_style_link3 h3 a:focus, ul.sc_layouts_submenu .color_style_link3 h4 a:hover, ul.sc_layouts_submenu .color_style_link3 h4 a:focus, ul.sc_layouts_submenu .color_style_link3 h5 a:hover, ul.sc_layouts_submenu .color_style_link3 h5 a:focus, ul.sc_layouts_submenu .color_style_link3 h6 a:hover, ul.sc_layouts_submenu .color_style_link3 h6 a:focus { color: var(--theme-color-extra_link3); } ul.sc_layouts_submenu .color_style_dark h1 a:hover, ul.sc_layouts_submenu .color_style_dark h1 a:focus, ul.sc_layouts_submenu .color_style_dark h2 a:hover, ul.sc_layouts_submenu .color_style_dark h2 a:focus, ul.sc_layouts_submenu .color_style_dark h3 a:hover, ul.sc_layouts_submenu .color_style_dark h3 a:focus, ul.sc_layouts_submenu .color_style_dark h4 a:hover, ul.sc_layouts_submenu .color_style_dark h4 a:focus, ul.sc_layouts_submenu .color_style_dark h5 a:hover, ul.sc_layouts_submenu .color_style_dark h5 a:focus, ul.sc_layouts_submenu .color_style_dark h6 a:hover, ul.sc_layouts_submenu .color_style_dark h6 a:focus { color: var(--theme-color-extra_link); } ul.sc_layouts_submenu dt, ul.sc_layouts_submenu b, ul.sc_layouts_submenu strong, ul.sc_layouts_submenu i, ul.sc_layouts_submenu em, ul.sc_layouts_submenu mark, ul.sc_layouts_submenu ins { color: var(--theme-color-extra_dark); } ul.sc_layouts_submenu s, ul.sc_layouts_submenu strike, ul.sc_layouts_submenu del, ul.sc_layouts_submenu .post_meta { color: var(--theme-color-extra_light); } ul.sc_layouts_submenu .sc_recent_news_header { border-color: var(--theme-color-extra_bd_color); } /* Layouts submenu in the Custom Menu */ .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .post_item{ color: var(--theme-color-text); } .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:not(.sc_button):not([class*="button"]), .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:not(.sc_button):not([class*="button"]), .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:not(.sc_button):not([class*="button"]) { color: var(--theme-color-text_link); } .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:not(.sc_button):not([class*="button"]):hover, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:not(.sc_button):not([class*="button"]):focus, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:hover .sc_layouts_item_icon, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .elementor-section a:focus .sc_layouts_item_icon, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:not(.sc_button):not([class*="button"]):hover, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:not(.sc_button):not([class*="button"]):focus, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:hover .sc_layouts_item_icon, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .vc_row a:focus .sc_layouts_item_icon, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:not(.sc_button):not([class*="button"]):hover, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:not(.sc_button):not([class*="button"]):focus, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:hover .sc_layouts_item_icon, .widget_nav_menu .sc_layouts_menu li > ul.sc_layouts_submenu .sc_layouts_item a:focus .sc_layouts_item_icon { color: var(--theme-color-text_hover); } .widget_nav_menu ul.sc_layouts_submenu h1, .widget_nav_menu ul.sc_layouts_submenu h2, .widget_nav_menu ul.sc_layouts_submenu h3, .widget_nav_menu ul.sc_layouts_submenu h4, .widget_nav_menu ul.sc_layouts_submenu h5, .widget_nav_menu ul.sc_layouts_submenu h6, .widget_nav_menu ul.sc_layouts_submenu h1 a, .widget_nav_menu ul.sc_layouts_submenu h2 a, .widget_nav_menu ul.sc_layouts_submenu h3 a, .widget_nav_menu ul.sc_layouts_submenu h4 a, .widget_nav_menu ul.sc_layouts_submenu h5 a, .widget_nav_menu ul.sc_layouts_submenu h6 a, .widget_nav_menu ul.sc_layouts_submenu [class*="color_style_"] h1 a, .widget_nav_menu ul.sc_layouts_submenu [class*="color_style_"] h2 a, .widget_nav_menu ul.sc_layouts_submenu [class*="color_style_"] h3 a, .widget_nav_menu ul.sc_layouts_submenu [class*="color_style_"] h4 a, .widget_nav_menu ul.sc_layouts_submenu [class*="color_style_"] h5 a, .widget_nav_menu ul.sc_layouts_submenu [class*="color_style_"] h6 a { color: var(--theme-color-text_dark); } .widget_nav_menu ul.sc_layouts_submenu h1 a:hover, .widget_nav_menu ul.sc_layouts_submenu h1 a:focus, .widget_nav_menu ul.sc_layouts_submenu h2 a:hover, .widget_nav_menu ul.sc_layouts_submenu h2 a:focus, .widget_nav_menu ul.sc_layouts_submenu h3 a:hover, .widget_nav_menu ul.sc_layouts_submenu h3 a:focus, .widget_nav_menu ul.sc_layouts_submenu h4 a:hover, .widget_nav_menu ul.sc_layouts_submenu h4 a:focus, .widget_nav_menu ul.sc_layouts_submenu h5 a:hover, .widget_nav_menu ul.sc_layouts_submenu h5 a:focus, .widget_nav_menu ul.sc_layouts_submenu h6 a:hover, .widget_nav_menu ul.sc_layouts_submenu h6 a:focus { color: var(--theme-color-text_link); } .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h1 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h1 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h2 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h2 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h3 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h3 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h4 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h4 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h5 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h5 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h6 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link2 h6 a:focus { color: var(--theme-color-text_link2); } .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h1 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h1 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h2 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h2 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h3 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h3 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h4 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h4 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h5 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h5 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h6 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_link3 h6 a:focus { color: var(--theme-color-text_link3); } .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h1 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h1 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h2 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h2 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h3 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h3 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h4 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h4 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h5 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h5 a:focus, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h6 a:hover, .widget_nav_menu ul.sc_layouts_submenu .color_style_dark h6 a:focus { color: var(--theme-color-text_link); } .widget_nav_menu ul.sc_layouts_submenu dt, .widget_nav_menu ul.sc_layouts_submenu b, .widget_nav_menu ul.sc_layouts_submenu strong, .widget_nav_menu ul.sc_layouts_submenu i, .widget_nav_menu ul.sc_layouts_submenu em, .widget_nav_menu ul.sc_layouts_submenu mark, .widget_nav_menu ul.sc_layouts_submenu ins { color: var(--theme-color-text_dark); } .widget_nav_menu ul.sc_layouts_submenu s, .widget_nav_menu ul.sc_layouts_submenu strike, .widget_nav_menu ul.sc_layouts_submenu del, .widget_nav_menu ul.sc_layouts_submenu .post_meta{ color: var(--theme-color-text_light); } .widget_nav_menu ul.sc_layouts_submenu .sc_recent_news_header { border-color: var(--theme-color-bd_color); } /* Side menu ----------------------------------------------------------- */ body.menu_side_present { width: auto; @include content-box; } body.menu_side_left { margin-left:6rem; } body.menu_side_right { margin-right:6rem; } .menu_side_present .body_wrap { position:relative; overflow: hidden; max-width:100%; } .menu_side_present .menu_side_wrap { @include fixed-pos(0, auto, 0, 0, 20000); width: 6rem; @include transition-properties(left, right); } .menu_side_right .menu_side_wrap { left: auto; right: 0; } .admin-bar .menu_side_wrap { top: 32px; } @media (max-width: 782px) { .admin-bar .menu_side_wrap { top: 46px; } } @media (max-width: 600px) { .admin-bar .menu_side_wrap { top: 0; } } .menu_side_wrap .menu_side_inner { display:block; @include abs-cover; @include border-box; } .menu_side_inner { color: var(--theme-color-alter_text); background-color: var(--theme-color-alter_bg_color); } .menu_side_present .menu_side_wrap .sc_layouts_logo { display: block; padding:25% 10%; text-align:center; border-bottom: 1px solid #ddd; position:relative; z-index:1; } .menu_side_inner .sc_layouts_logo { background-color: var(--theme-color-alter_bg_color); border-color: var(--theme-color-alter_bd_color); } [class*="scheme_"].menu_side_icons .sc_layouts_logo { background-color: var(--theme-color-bg_color); border-color: var(--theme-color-bd_color); } .menu_side_present .menu_side_wrap .logo_text { font-size: 1em; letter-spacing:0; text-align:center; @include rotate(-90deg); } .menu_side_present .menu_side_wrap .logo_slogan { display:none; } .menu_side_wrap .menu_mobile_button { display:block; position:relative; left: 0; right: auto; top: 0; } .menu_side_wrap .menu_side_button { display: none; font-size: 16px; margin-top:-1.5em; overflow:hidden; cursor: pointer; @include abs-lt(-1.5em, 50%); @include square(3em); @include border-box; @include transition-properties(left, right); } .menu_side_right .menu_side_wrap .menu_side_button { text-align:left; padding-left: 10px; @include border-radius(4px 0 0 4px); } .menu_side_left .menu_side_wrap .menu_side_button { left: auto; right: -1.5em; text-align:right; padding-right: 10px; @include border-radius(0 4px 4px 0); } .menu_side_right .menu_side_wrap .menu_side_button:before { content: '\e837'; } .menu_side_right .menu_side_wrap.opened .menu_side_button:before { content: '\e836'; } .menu_side_left .menu_side_wrap .menu_side_button:before { content: '\e836'; } .menu_side_left .menu_side_wrap.opened .menu_side_button:before { content: '\e837'; } [class*="scheme_"].menu_side_wrap .menu_side_button { color: var(--theme-color-alter_dark); border-color: var(--theme-color-alter_bd_color); background-color: var(--theme-color-alter_bg_color_07); } [class*="scheme_"].menu_side_wrap .menu_side_button:hover { color: var(--theme-color-inverse_hover); border-color: var(--theme-color-alter_hover); background-color: var(--theme-color-alter_link); } // TOC menu items #toc_menu { display: none; @include abs-lt(50%, 50%, ''); width: 100%; margin:-50% 0 0 -50%; } .toc_menu_item { position:relative; z-index:1; } .toc_menu_item .toc_menu_icon { display:block; position:relative; color: #888; height:1.5em; line-height:1.5em; text-align:center; } .toc_menu_item .toc_menu_icon:before { display:inline-block; line-height: inherit; color:inherit; } .toc_menu_item .toc_menu_icon_default:before { content: ' '; margin-top: 0.75em; @include box(0.5em, 1px); background-color: #888; } .toc_menu_item:hover .toc_menu_icon, .toc_menu_item_active .toc_menu_icon { color: #292929; } .toc_menu_item:hover .toc_menu_icon_default:before, .toc_menu_item_active .toc_menu_icon_default:before { background-color: #292929; } .toc_menu_item_active .toc_menu_icon_default:before { width: 1.5em; } .toc_menu_item .toc_menu_description { @include abs-rt(-20em, 0, ''); opacity:0; white-space:nowrap; @include transition-all(.6s, ease-out); } .toc_menu_item:hover .toc_menu_description { right: 100%; margin-right: 1.5em; opacity:1; } // TOC menu in the side menu .menu_side_inner #toc_menu { display:block; position:relative; z-index:0; @include transition-property(top); } .menu_side_icons #toc_menu { left:0; top:0; margin:0; } .menu_side_icons .toc_menu_item .toc_menu_description { height: 6rem; @include font(1.0667em, 6rem, bold); text-transform:uppercase; top: 0; } .menu_side_icons .toc_menu_item:hover .toc_menu_description { margin-right:0; } .menu_side_icons .toc_menu_item .toc_menu_description span { display:inline-block; vertical-align:middle; padding: 0 3em; letter-spacing:1px; } .menu_side_icons .toc_menu_item .toc_menu_icon { @include box(100%, 6rem, 6rem); @include content-box; border-bottom: 1px solid #ddd; } .menu_side_icons .toc_menu_item .toc_menu_icon:before { @include font(2rem, inherit, normal); } .menu_side_dots #toc_menu .toc_menu_item .toc_menu_icon { text-align:center; } .menu_side_dots #toc_menu .toc_menu_item .toc_menu_icon_default:before { content: ' '; @include box(5px, 5px, inherit); @include border-round; } .menu_side_dots #toc_menu .toc_menu_item_active .toc_menu_icon_default:before { @include square(9px); } .menu_side_left .toc_menu_item .toc_menu_description { left: -20em; right: auto; } .menu_side_left .toc_menu_item:hover .toc_menu_description { left: 100%; right: auto; } [class*="scheme_"].menu_side_icons .toc_menu_item .toc_menu_icon, .menu_side_inner > .toc_menu_item .toc_menu_icon { background-color: var(--theme-color-bg_color); border-color: var(--theme-color-bd_color); color: var(--theme-color-text_link); } [class*="scheme_"].menu_side_icons .toc_menu_item:hover .toc_menu_icon, [class*="scheme_"].menu_side_icons .toc_menu_item_active .toc_menu_icon, .menu_side_inner > .toc_menu_item:hover .toc_menu_icon, .menu_side_inner > .toc_menu_item_active .toc_menu_icon { background-color: var(--theme-color-text_link); color: var(--theme-color-inverse_link); } [class*="scheme_"].menu_side_icons .toc_menu_icon_default:before, .menu_side_inner > .toc_menu_icon_default:before { background-color: var(--theme-color-text_link); } [class*="scheme_"].menu_side_icons .toc_menu_item:hover .toc_menu_icon_default:before, [class*="scheme_"].menu_side_icons .toc_menu_item_active .toc_menu_icon_default:before, .menu_side_inner > .toc_menu_item:hover .toc_menu_icon_default:before, .menu_side_inner > .toc_menu_item_active .toc_menu_icon_default:before { background-color: var(--theme-color-text_dark); } [class*="scheme_"].menu_side_icons .toc_menu_item .toc_menu_description, .menu_side_inner > .toc_menu_item .toc_menu_description { color: var(--theme-color-inverse_link); background-color: var(--theme-color-text_link); } [class*="scheme_"].menu_side_dots #toc_menu .toc_menu_item .toc_menu_icon { background-color: var(--theme-color-alter_bg_color); color: var(--theme-color-alter_text); } [class*="scheme_"].menu_side_dots #toc_menu .toc_menu_item:hover .toc_menu_icon, [class*="scheme_"].menu_side_dots #toc_menu .toc_menu_item_active .toc_menu_icon { color: var(--theme-color-alter_link); } [class*="scheme_"].menu_side_dots #toc_menu .toc_menu_item .toc_menu_icon:before { background-color: var(--theme-color-alter_link); } [class*="scheme_"].menu_side_dots #toc_menu .toc_menu_item:hover .toc_menu_icon:before { background-color: var(--theme-color-alter_hover); } /* Mobile header ---------------------------------------- */ /* Animation */ @-webkit-keyframes fadeInAnim { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeInAnim { 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes fadeOutAnim { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOutAnim { 0% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes fadeInAnimScale { 0% {opacity: 0; -webkit-transform:scale(0.2) rotate(0);} 100% {opacity: 1; -webkit-transform:scale(1) rotate(180deg);} } @keyframes fadeInAnimScale { 0% {opacity: 0; transform:scale(0.2) rotate(0);} 100% {opacity: 1; transform:scale(1) rotate(180deg);} } @-webkit-keyframes fadeOutAnimScale { 0% {opacity: 1; -webkit-transform:scale(1) rotate(180deg);} 100% {opacity: 0; -webkit-transform:scale(0.2) rotate(0);} } @keyframes fadeOutAnimScale { 0% {opacity: 1; transform:scale(1) rotate(180deg);} 100% {opacity: 0; transform:scale(0.2) rotate(0);} } @-webkit-keyframes fadeInRightPanel { 0% {opacity: 0; -webkit-transform: translateX(30px) ;} 100% {opacity: 1; -webkit-transform: translateX(0) ;} } @keyframes fadeInRightPanel { 0% {opacity: 0; transform: translateX(30px) ;} 100% {opacity: 1; transform: translateX(0) ;} } @-webkit-keyframes fadeOutRightPanel { 0% {opacity: 1; -webkit-transform: translateX(0) ;} 100% {opacity: 0;-webkit-transform: translateX(20px) ;} } @keyframes fadeOutRightPanel { 0% {opacity: 1; transform: translateX(0) ;} 100% {opacity: 0; transform: translateX(20px) ;} } @-webkit-keyframes fadeInMove { 0% {opacity: 0; -webkit-transform: scale3d(0, 1, 1);} 10% {opacity: 1; -webkit-transform: scale3d(0.1, 1, 1); } 100% {opacity: 0.14; -webkit-transform: scale3d(1, 1, 1); } } @keyframes fadeInMove { 0% {opacity: 0; transform: scale3d(0, 1, 1); } 10% {opacity: 1; transform: scale3d(0.1, 1, 1); } 100% {opacity: 0.14; transform: scale3d(1, 1, 1); } } @-webkit-keyframes fadeOutMove { 0% {opacity: 0.14; -webkit-transform: scale3d(1, 1, 1); } 100% {opacity: 0.14; -webkit-transform: scale3d(0, 1, 1); } } @keyframes fadeOutMove { 0% {opacity: 0.14; transform: scale3d(1, 1, 1); } 100% {opacity: 0.14; transform: scale3d(0, 1, 1); } } @-webkit-keyframes fadeOutMove2 { 0% {opacity: 0.8; -webkit-transform: scale3d(1, 1, 1); } 100% {opacity: 0.14; -webkit-transform: scale3d(0, 1, 1); } } @keyframes fadeOutMove2 { 0% {opacity: 0.8; transform: scale3d(1, 1, 1); } 100% {opacity: 0.14; transform: scale3d(0, 1, 1); } } .top_panel_mobile_info p { margin:0; } /* Panel Mobile Menu +++++++++++++++++++++++++++++++++++ */ /* Admin Bar Panel Menu */ .admin-bar .sc_layouts_panel_menu { top: 32px; &.opened, &.sc_layouts_panel_menu_fullscreen.opened { height: calc(100% - 32px) !important; } &.sc_layouts_panel_menu_narrow.opened { height: calc(75% - 32px) !important; } } @media (max-width: 782px) { .admin-bar .sc_layouts_panel_menu { top: 46px; &.opened, &.sc_layouts_panel_menu_fullscreen.opened { height: calc(100% - 46px) !important; } &.sc_layouts_panel_menu_narrow.opened { height: calc(75% - 46px) !important; } } } @media (max-width: 600px) { .admin-bar .sc_layouts_panel_menu { top: 0; &.opened, &.sc_layouts_panel_menu_fullscreen.opened { height: 100% !important; } &.sc_layouts_panel_menu_narrow.opened { height: 100% !important; } } } .sc_layouts_panel_menu_overlay { display:none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index:8001; @include box(100%, 100%); background-color: var(--theme-color-alter_bg_color); opacity: .1; } .sc_layouts_panel_menu { .elementor-section.elementor-section-height-full > .elementor-container { height: 100%; } @include fixed-lt(0, 0, 100002); @include box(100%, 0); will-change: height; @include transition(height .5s cubic-bezier(0.5, 1, 0.89, 1)); &.sc_layouts_panel_menu_fullscreen.opened { height:100%; } &.sc_layouts_panel_menu_narrow.opened { height: 75%; } &.sc_layouts_panel_menu_narrow .sc_layouts_panel_menu_inner { overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width:none; &::-webkit-scrollbar { width:0 } } .sc_layouts_panel_menu_inner { @include abs-cover; height: 100%; width: 100%; overflow:hidden; @include border-box; color: var(--theme-color-alter_text); background-color: var(--theme-color-alter_bg_color); > .elementor, .elementor-section-wrap, .elementor-inner, .elementor-section.elementor-section-height-full { height: 100%; min-height: auto; } } .sc_layouts_panel_menu_inner > p { margin: 0; } /* Panel Menu Header */ .panel_menu_header { padding: 60px 50px; } /* Close Button */ &.scheme_default .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_text, &.scheme_light .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_text { color: var(--theme-color-alter_dark); } .sc_layouts_panel_menu_close { display: inline-block; @include abs-rt(65px, 60px); margin: 0 !important; line-height: 1em; @include flex; @include flex-justify-content(center); @include flex-align-items(center); cursor: pointer; color: var(--theme-color-alter_dark); @include transition(color .3s ease); &:hover { color: var(--theme-color-alter_dark); } .sc_layouts_panel_menu_close_icon { @include font(19px, '', 400); position: relative; z-index: 1; @include border-box; @include transform(rotate(0)); @include transition(transform .3s ease-out); color: var(--theme-color-alter_dark); &:before { position: relative; z-index: 1; content:'\e9e1'; font-family:$theme_icons; line-height: 1; text-align: center; } } &:hover .sc_layouts_panel_menu_close_icon { @include transform(rotate(180deg)); } .sc_layouts_panel_menu_close_text { @include font(17px, 1em, 400); margin-right: 0.9em; color: var(--theme-color-alter_light); } } /* Menu */ /* specific scheme colors */ &.scheme_default .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav li > a, &.scheme_default .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav li > a, &.scheme_light .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav li > a, &.scheme_light .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav li > a { color: var(--theme-color-alter_dark); &:hover { color: var(--theme-color-alter_dark) !important; } } &.scheme_default .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav li[class*="icon-"]:before, &.scheme_default .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav li[class*="icon-"]:before, &.scheme_light .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav li[class*="icon-"]:before, &.scheme_light .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav li[class*="icon-"]:before { color: var(--theme-color-alter_dark); } &.scheme_default .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav > li li > a, &.scheme_default .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav > li li > a, &.scheme_light .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav > li li > a, &.scheme_light .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav > li li > a { color: var(--theme-color-alter_dark) !important; &:hover { color: var(--theme-color-alter_link) !important; } } &.scheme_default .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav > li li.opened > a, &.scheme_default .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav > li li.opened > a, &.scheme_light .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown .sc_layouts_menu_nav > li li.opened > a, &.scheme_light .sc_layouts_menu_dir_horizontal .sc_layouts_menu_nav > li li.opened > a { color: var(--theme-color-alter_link) !important; } /* Vertical Dropdown */ /* align center */ .sc_layouts_column_align_center .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { .sc_layouts_menu_nav { > li > a, > li[class*="icon-"] > a, > li.menu-item-has-children > a { padding: 5px 4.4rem; } li[class*="icon-"]:before { left: 50%; @include transform(translateX(-12rem)); } > li ul li > a, > li li li[class*="icon-"] > a, > li:last-child ul li > a { padding: 0.4rem 3.9rem; } > li li[class*="icon-"]:before { margin-left: 0; } } } /* align right */ .sc_layouts_column_align_right .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { .sc_layouts_menu_nav { li.menu-item-has-children > a > .open_child_menu { right: auto; left: 0; &:before { content: '\EA07'; left: 10px; right: auto; @include transition(left .3s ease-out, color .3s ease, opacity .3s ease-out); } } li.opened > a > .open_child_menu:before, li > a:hover > .open_child_menu:before { right: auto; left: 0; opacity: 1; } > li > a, > li.menu-item-has-children > a { padding-right: 0 !important; padding-left: 2rem; } li[class*="icon-"]:before { left: auto; right: 0; } > li[class*="icon-"].menu-item-has-children > a { padding-right: 2.2rem !important; } li[class*="icon-"] > a { padding-right: 2.2rem !important; } > li.menu-item-has-children > a { padding-left: 4.4rem ; } > li li[class*="icon-"] > a { padding-right: 3.4rem !important; } > li li[class*="icon-"]:before { margin-right: 1.8rem; margin-left: 0; } > li ul li.menu-item-has-children > a, > li:last-child ul li.menu-item-has-children > a { padding-right: 1.7rem; padding-left: 3.9rem; } > li li li > a { padding-right: 3.9rem; padding-left: 3.9rem; } > li ul li li.menu-item-has-children > a { padding-right: 3.9rem; } > li li li[class*="icon-"] > a { padding-right: 5.3rem !important; } > li li li[class*="icon-"]:before { margin-left: 0; margin-right: 3.8rem; } > li li li li > a { padding-right: 5.8rem; padding-left: 3.9rem; } > li ul li li li.menu-item-has-children > a { padding-right: 5.8rem; } li li li li[class*="icon-"] > a { padding-right: 7.3rem !important; padding-left: 3.9rem; } li li li li[class*="icon-"]:before { margin-left: 0; margin-right: 5.8rem; } } } /* Vertical Menu Extra */ &.sc_layouts_vertical_menu_extra .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown, &.sc_layouts_vertical_menu_extra .sc_layouts_column_align_left .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { .sc_layouts_menu_nav { > li > a, > li.menu-item-has-children > a { padding: 5px 0; } > li ul li > a, > li:last-child ul li > a { padding: 0.4rem 0; } li[class*="icon-"]:before, > li li[class*="icon-"]:before { display: none; } ul > li > ul { font-size: 17px; padding: 0.2em 0; } > li.menu-item-has-children > a { padding-left: 0 !important; padding-right: 0 !important; } li.menu-item-has-children > a > .open_child_menu { display: none !important; } > li ul li.menu-item-has-children > a, > li:last-child ul li.menu-item-has-children > a { padding-left: 0 !important; padding-right: 0 !important; } > li li li > a { padding: 0.25em 0; } } } &.sc_layouts_vertical_menu_extra .sc_layouts_column_align_center .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { .sc_layouts_menu_nav { > li li li[class*="icon-"] > a, > li:last-child ul li > a { padding: 0.25em 0; } } } &.sc_layouts_vertical_menu_extra .sc_layouts_column_align_right .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { .sc_layouts_menu_nav { > li > a, > li.menu-item-has-children > a, > li[class*="icon-"].menu-item-has-children > a { padding-left: 0 !important; padding-right: 0 !important; } > li li > a{ padding-right: 0; padding-left: 0; } > li li[class*="icon-"] > a { padding-left: 0; padding-right: 0 !important; } > li ul li.menu-item-has-children > a { padding-right: 0; } > li ul li li.menu-item-has-children > a { padding-right: 0; } > li li li > a { padding-right: 0; } > li li li li > a { padding-right: 0; } > li ul li li li.menu-item-has-children > a { padding-right: 0; } } } /* Vertical Menu Default */ .sc_layouts_menu_dir_vertical.sc_layouts_submenu_popup { .sc_layouts_menu_nav { > li > a, > li.menu-item-has-children > a { padding: 0.25em 0; } > li li > a { color: var(--theme-color-extra_text) !important; } > li li > a:hover, > li li.sfHover > a { color: var(--theme-color-extra_hover) !important; } } } .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { display: block; overflow-x: hidden; overflow-y: scroll; max-height: 45vH; -ms-overflow-style: none; scrollbar-width:none; &::-webkit-scrollbar { width:0 } .sc_layouts_menu_nav { @include font(38px, 1.5em, 500); letter-spacing: 0.6px; text-align: inherit; ul { padding: 1em 0; margin: 0; } > li { display: block; float: none; width: 100%; } > li ul { text-align: inherit; } li > a { position: relative; width: auto; display: inline-block; @include border-box; @include transition(color .3s ease); color: var(--theme-color-alter_text); } li > a:hover { color: var(--theme-color-alter_dark) !important; } > li li > a { color: var(--theme-color-alter_text) !important; } > li li.opened > a, > li li > a:hover { color: var(--theme-color-alter_dark) !important; } > li > ul { padding: 1em 0 0.6em; @include font(19px, 1.5em, 500); letter-spacing: 0.6px; text-align: inherit; } > li > a, > li.menu-item-has-children > a { padding: 5px 2rem 5px 0; } > li.menu-item-has-children > a { padding-right: 4.4rem !important; } > li ul li > a, > li:last-child ul li > a { padding: 0.4rem 1.7rem; } > li ul > li > a { letter-spacing: 0; } > li ul li.menu-item-has-children > a, > li:last-child ul li.menu-item-has-children > a { padding-right: 3.9rem; } > li li li > a { padding-left: 3.9rem; } > li li li li > a { padding-left: 5.8rem; } li.menu-item-has-children > a > .open_child_menu { display: block; width: auto; position: absolute; z-index: 1; top: 1px; right: 0; bottom: auto; padding: 0; @include transition(color .3s ease, background-color .3s ease, border-color .3s ease); line-height: inherit; } li > a > .open_child_menu:before, li.menu-item-has-children > a > .open_child_menu:before { font-family: $theme_icons; content: '\E9A4'; display: inline-block; @include font(16px, '', 400); position: relative; right: 10px; opacity: 0; @include transition(right 0.3s ease-out, color 0.3s ease, opacity 0.3s ease); } > li ul li.menu-item-has-children > a > .open_child_menu { top: 4px; } > li ul li > a > .open_child_menu:before, > li ul li.menu-item-has-children > a > .open_child_menu:before { @include font(8px, '', 400); } li.opened > a > .open_child_menu:before, li > a:hover > .open_child_menu:before { right: 0; opacity: 1; } > li[class*="icon-"] > a { padding-left: 2.2rem; } li[class*="icon-"]:before { @include font(24px, inherit, 400); display: inline-block; padding: 0; width: 1em; position: absolute; top: 9px; left: 0; @include transition(color .3s ease); color: inherit; } > li li[class*="icon-"] > a { padding-left: 3.3rem; } > li li[class*="icon-"]:before { font-size: 18px; margin-left: 1.8rem; top: 8px; } > li li li[class*="icon-"] > a { padding-left: 5.5rem; } > li li li[class*="icon-"]:before { margin-left: 3.9rem; } > li li li li[class*="icon-"] > a { padding-left: 7.3rem; } > li li li li[class*="icon-"]:before { margin-left: 5.7rem; } } } /* Horizontal */ .sc_layouts_menu_dir_horizontal { .sc_layouts_menu_nav { @include font(30px, 1.5em, 500); margin-left: -0.75em; li > a { @include transition(color .3s ease); color: var(--theme-color-alter_text); } > li ul, > li:last-child ul { background-color: transparent; @include box-shadow(none); } > li > ul { @include font(18px, 1.5em, 400); top: 3.6em; left: -0.2em; } > li ul:not(.sc_item_filters_tabs) { width: 12em; background-color: var(--theme-color-alter_bg_color); } > li > ul ul { left: 12em; margin: 0; } > li > a, > li.menu-item-has-children > a { padding: 0.5em 0.75em; } > li > a { color: var(--theme-color-alter_text); } > li > a:hover, > li.sfHover > a { color: var(--theme-color-alter_dark) !important; } > li li > a { padding: 0.45em 1.6em; letter-spacing: 0.7px; color: var(--theme-color-alter_text) !important; } > li li > a:hover, > li li.sfHover > a, > li li.current-menu-item > a, > li li.current-menu-parent > a, > li li.current-menu-ancestor > a { color: var(--theme-color-alter_dark) !important; } li li.menu-item-has-children > a:after { content: '\E9DF'; @include font(9px, '', 400); top: 1em; right: 0; color: inherit !important; } > li[class*="icon-"] + li[class*="icon-"], > li + li[class*="icon-"], > li[class*="icon-"] + li { margin-left: 1em; } > li[class*="icon-"] > a { padding-left: 1.3em; } > li[class*="icon-"]:before { font-size: 24px; color: inherit; padding: 0.8em 0; top: 0; left: 0; } > li li[class*="icon-"] > a { padding-left: 3em; } > li li[class*="icon-"]:before { position: absolute; z-index: 1; top: 50%; left: 1.5em; @include translateY(-50%); color: inherit; } } &.menu_hover_color_line > ul > li:not(.menu-collapse) > a:before, &.menu_hover_color_line > ul > li:not(.menu-collapse) > a:after, &.menu_hover_color_line > ul > li:not(.menu-collapse).menu-item-has-children > a:after { top: 2.3em; } &.menu_hover_color_line > ul > li:not(.menu-collapse).menu-item-has-children > a:before, &.menu_hover_color_line > ul > li:not(.menu-collapse).menu-item-has-children > a:after { right: 1em !important; } &.menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:after, &.menu_hover_color_line .sc_layouts_menu_nav > li:not(.menu-collapse).menu-item-has-children > a:after { background-color: var(--theme-color-text_dark); } } .sc_layouts_column_align_right .sc_layouts_menu_dir_horizontal, .sc_layouts_column_align_center .sc_layouts_menu_dir_horizontal { .sc_layouts_menu_nav > li:first-child > a, .sc_layouts_menu_nav > li.menu-item-has-children:first-child > a { padding-left: 0.75em; } } .sc_layouts_column_align_right .sc_layouts_menu_dir_horizontal { .sc_layouts_menu_nav > li:last-child > a, .sc_layouts_menu_nav > li.menu-item-has-children:last-child > a { padding-right: 0; } } /* Socials */ .sc_socials.sc_socials_default .socials_wrap .social_item { margin-right: 4px; @include transition(color .3s ease); .social_icon { color: var(--theme-color-alter_dark); border-color: var(--theme-color-alter_dark_015); } &:hover .social_icon[class*="facebook"] { color: #4F5FBF !important; } &:hover .social_icon[class*="twitter"] { color: #48BDE9 !important; } &:hover .social_icon[class*="dribble"] { color: #EA4C89 !important; } &:hover .social_icon[class*="instagram"] { color: #C41BD1 !important; } } /* Widget Socials */ .sc_widget_socials .socials_wrap .social_item { font-size: 17px; margin-right: 32px; @include transition(color .3s ease); .social_icon { padding: 0 1px; @include box(auto, auto, inherit); text-align: left; color: var(--theme-color-alter_dark) !important; background-color: transparent !important; &:hover { background-color: transparent !important; } &[class*="facebook"]:hover { color: #4F5FBF !important; } &[class*="twitter"]:hover { color: #48BDE9 !important; } &[class*="dribble"]:hover { color: #EA4C89 !important; } &[class*="instagram"]:hover { color: #C41BD1 !important; } } } /* Socials with names */ .sc_layouts_column_align_center .sc_socials.sc_socials_icons_names .socials_wrap { @include flex-justify-content(center); } .sc_layouts_column_align_right .sc_socials.sc_socials_icons_names .socials_wrap { @include flex-justify-content(flex-end); } .sc_socials.sc_socials_icons_names .socials_wrap { @include flex; @include flex-justify-content(flex-start); .social_item { padding: 0 1px; @include flex; @include flex-align-items(center); margin-right: 1.3em; @include transition(color .3s ease); color: var(--theme-color-alter_dark); &:hover .social_icon { color: var(--theme-color-alter_dark); &[class*="facebook"] { color: #4F5FBF !important; } &[class*="twitter"] { color: #48BDE9 !important; } &[class*="dribble"] { color: #EA4C89 !important; } &[class*="instagram"] { color: #C41BD1 !important; } } &:hover .social_name { color: var(--theme-color-alter_dark); } &:last-child{ margin-right: 0; } .social_icon { padding: 0 1px; @include box(auto, auto, inherit); text-align: left; + .social_name { @include font(14px, 17px, 500); margin: 0 0 0 8px; } } } } .section_divider .elementor-container { padding-top: 30px; padding-bottom: 30px; } .section_divider .elementor-container:before { content: ''; display: block; height: 1px; width: 100%; @include abs-lt; background-color: var(--theme-color-alter_dark); } /* Animation +++++++++++++++++++++++++++ */ /* Close button animation */ .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_icon, .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_text { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; } &.opened .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_icon, &.opened .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_text { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.opened .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_icon { -webkit-animation-name: fadeInAnimScale; animation-name: fadeInAnimScale; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; transform-origin: 50% 54%; } &.out_anim .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_icon, &.out_anim .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_text { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:visible; } &.out_anim .sc_layouts_panel_menu_close .sc_layouts_panel_menu_close_icon { -webkit-animation-name: fadeOutAnimScale; animation-name: fadeOutAnimScale; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Panel with menu style 1 */ /* Logo animation */ .ps1-anim1 .sc_layouts_logo { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; @include transition(color .3s ease); } &.opened .ps1-anim1 .sc_layouts_logo { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps1-anim1 .sc_layouts_logo { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility:visible; } /* Vertical dropdown menu animation */ .ps1-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(6) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } &:nth-child(7) { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; -o-animation-delay: 1.1s; animation-delay: 1.1s; } } &.opened .ps1-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps1-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } &:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(5) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(6) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } &:nth-child(7) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Elementor heading title animation */ .ps1-anim3 .elementor-heading-title { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; } &.opened .ps1-anim3 .elementor-heading-title { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps1-anim3 .elementor-heading-title { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility: visible; } /* Text Editor title animation */ .ps1-anim4.elementor-widget-text-editor h1, .ps1-anim4.elementor-widget-text-editor h2, .ps1-anim4.elementor-widget-text-editor h3, .ps1-anim4.elementor-widget-text-editor h4, .ps1-anim4.elementor-widget-text-editor h5, .ps1-anim4.elementor-widget-text-editor h6 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:hidden; } &.opened .ps1-anim4.elementor-widget-text-editor h1, &.opened .ps1-anim4.elementor-widget-text-editor h2, &.opened .ps1-anim4.elementor-widget-text-editor h3, &.opened .ps1-anim4.elementor-widget-text-editor h4, &.opened .ps1-anim4.elementor-widget-text-editor h5, &.opened .ps1-anim4.elementor-widget-text-editor h6 { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps1-anim4.elementor-widget-text-editor h1, &.out_anim .ps1-anim4.elementor-widget-text-editor h2, &.out_anim .ps1-anim4.elementor-widget-text-editor h3, &.out_anim .ps1-anim4.elementor-widget-text-editor h4, &.out_anim .ps1-anim4.elementor-widget-text-editor h5, &.out_anim .ps1-anim4.elementor-widget-text-editor h6 { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility: visible; } /* Paragraph animation */ .ps1-anim5.elementor-widget-text-editor p > a { @include transition(color .3s ease); } .ps1-anim5.elementor-widget-text-editor p { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility:hidden; } &.opened .ps1-anim5.elementor-widget-text-editor p { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps1-anim5.elementor-widget-text-editor p { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility: visible; } /* Socials animation */ .ps1-anim6 .sc_socials .socials_wrap .social_item, .ps1-anim6 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } } &.opened .ps1-anim6 .sc_socials .socials_wrap .social_item, &.opened .ps1-anim6 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps1-anim6 .sc_socials .socials_wrap .social_item, &.out_anim .ps1-anim6 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility: visible; &:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } &:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(5) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } } /* Panel with menu style 2 */ .ps2-anim1 .sc_layouts_logo { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; @include transition(color .3s ease); } &.opened .ps2-anim1 .sc_layouts_logo { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps2-anim1 .sc_layouts_logo { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility:visible; } /* Horizontal & vertical menu */ .ps2-anim2 .sc_layouts_menu_dir_vertical > ul > li, .ps2-anim2 .sc_layouts_menu_dir_horizontal > ul > li { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(6) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } &:nth-child(7) { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; -o-animation-delay: 1.1s; animation-delay: 1.1s; } } &.opened .ps2-anim2 .sc_layouts_menu_dir_vertical > ul > li, &.opened .ps2-anim2 .sc_layouts_menu_dir_horizontal > ul > li { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps2-anim2 .sc_layouts_menu_dir_vertical > ul > li, &.out_anim .ps2-anim2 .sc_layouts_menu_dir_horizontal > ul > li { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } &:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(5) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(6) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } &:nth-child(7) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Divider */ .ps2-anim3 .elementor-divider-separator { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; @include transform-origin(left center); --divider-border-color: var(--theme-color-alter_dark); --divider-color: var(--theme-color-alter_dark); } &.opened .ps2-anim3 .elementor-divider-separator { -webkit-animation-name: fadeInMove; animation-name: fadeInMove; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps2-anim3 .elementor-divider-separator { -webkit-animation-name: fadeOutMove; animation-name: fadeOutMove; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; visibility:visible; } /* Socials animation */ .ps2-anim4 .sc_socials .socials_wrap .social_item, .ps2-anim4 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(3) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(4) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(5) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } } &.opened .ps2-anim4 .sc_socials .socials_wrap .social_item, &.opened .ps2-anim4 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps2-anim4 .sc_socials .socials_wrap .social_item, &.out_anim .ps2-anim4 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility: visible; &:nth-child(2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(3) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(4) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(5) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Panel with menu style 3 */ /* Logo animation */ .ps3-anim1 .sc_layouts_logo { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; @include transition(color .3s ease); } &.opened .ps3-anim1 .sc_layouts_logo { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps3-anim1 .sc_layouts_logo { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility:visible; } /* Vertical dropdown menu animation */ .ps3-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(6) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } &:nth-child(7) { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; -o-animation-delay: 1.1s; animation-delay: 1.1s; } } &.opened .ps3-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps3-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } &:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(5) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(6) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } &:nth-child(7) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Divider */ .ps3-anim3 .elementor-divider-separator { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; @include transform-origin(left center); --divider-border-color: var(--theme-color-alter_dark); --divider-color: var(--theme-color-alter_dark); } &.opened .ps3-anim3 .elementor-divider-separator { -webkit-animation-name: fadeInMove; animation-name: fadeInMove; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps3-anim3 .elementor-divider-separator { -webkit-animation-name: fadeOutMove; animation-name: fadeOutMove; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; visibility:visible; } /* Socials animation */ .ps3-anim4 .sc_socials .socials_wrap .social_item, .ps3-anim4 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(3) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(4) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(5) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } } &.opened .ps3-anim4 .sc_socials .socials_wrap .social_item, &.opened .ps3-anim4 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps3-anim4 .sc_socials .socials_wrap .social_item, &.out_anim .ps3-anim4 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility: visible; &:nth-child(2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(3) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(4) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(5) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Panel with menu style 4 */ /* Logo animation */ .ps4-anim1 .sc_layouts_logo { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; @include transition(color .3s ease); } &.opened .ps4-anim1 .sc_layouts_logo { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps4-anim1 .sc_layouts_logo { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility:visible; } /* Vertical dropdown menu animation */ .ps4-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(6) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } &:nth-child(7) { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; -o-animation-delay: 1.1s; animation-delay: 1.1s; } } &.opened .ps4-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps4-anim2 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } &:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(5) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(6) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } &:nth-child(7) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Section Divider */ .ps4-anim3 .elementor-divider-separator, .ps4-anim3.section_divider .elementor-container:before { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; @include transform-origin(left center); --divider-border-color: var(--theme-color-alter_dark); --divider-color: var(--theme-color-alter_dark); } &.opened .ps4-anim3 .elementor-divider-separator, &.opened .ps4-anim3.section_divider .elementor-container:before { -webkit-animation-name: fadeInMove; animation-name: fadeInMove; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps4-anim3 .elementor-divider-separator, &.out_anim .ps4-anim3.section_divider .elementor-container:before { -webkit-animation-name: fadeOutMove; animation-name: fadeOutMove; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; visibility:visible; } /* Paragraph animation */ .ps4-anim4.elementor-widget-text-editor p > a { @include transition(color .3s ease); } .ps4-anim4.elementor-widget-text-editor p { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:hidden; } &.opened .ps4-anim4.elementor-widget-text-editor p { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps4-anim4.elementor-widget-text-editor p { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; visibility: visible; } /* Socials animation */ .ps4-anim5 .sc_socials .socials_wrap .social_item, .ps4-anim5 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(3) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(4) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(5) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } } &.opened .ps4-anim5 .sc_socials .socials_wrap .social_item, &.opened .ps4-anim5 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps4-anim5 .sc_socials .socials_wrap .social_item, &.out_anim .ps4-anim5 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility: visible; &:nth-child(2) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; } &:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(4) { -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; -o-animation-delay: 0.15s; animation-delay: 0.15s; } &:nth-child(5) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Panel with menu style 5 */ /* Logo animation */ .ps5-anim1 .sc_layouts_logo { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; @include transition(color .3s ease); } &.opened .ps5-anim1 .sc_layouts_logo { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps5-anim1 .sc_layouts_logo { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility:visible; } /* Paragraph animation */ .ps5-anim2.elementor-widget-text-editor p > a { @include transition(color .3s ease); } .ps5-anim2.elementor-widget-text-editor p { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; visibility:hidden; } &.opened .ps5-anim2.elementor-widget-text-editor p { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps5-anim2.elementor-widget-text-editor p { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility: visible; } .ps5-anim3.elementor-widget-text-editor p > a { @include transition(color .3s ease); } .ps5-anim3.elementor-widget-text-editor p { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; } &.opened .ps5-anim3.elementor-widget-text-editor p { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps5-anim3.elementor-widget-text-editor p { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility: visible; } /* Text Editor title animation */ .ps5-anim4.elementor-widget-text-editor h1, .ps5-anim4.elementor-widget-text-editor h2, .ps5-anim4.elementor-widget-text-editor h3, .ps5-anim4.elementor-widget-text-editor h4, .ps5-anim4.elementor-widget-text-editor h5, .ps5-anim4.elementor-widget-text-editor h6 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:hidden; } &.opened .ps5-anim4.elementor-widget-text-editor h1, &.opened .ps5-anim4.elementor-widget-text-editor h2, &.opened .ps5-anim4.elementor-widget-text-editor h3, &.opened .ps5-anim4.elementor-widget-text-editor h4, &.opened .ps5-anim4.elementor-widget-text-editor h5, &.opened .ps5-anim4.elementor-widget-text-editor h6 { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps5-anim4.elementor-widget-text-editor h1, &.out_anim .ps5-anim4.elementor-widget-text-editor h2, &.out_anim .ps5-anim4.elementor-widget-text-editor h3, &.out_anim .ps5-anim4.elementor-widget-text-editor h4, &.out_anim .ps5-anim4.elementor-widget-text-editor h5, &.out_anim .ps5-anim4.elementor-widget-text-editor h6 { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; visibility: visible; } /* Vertical dropdown menu animation */ .ps5-anim5 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(6) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } &:nth-child(7) { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; -o-animation-delay: 1.1s; animation-delay: 1.1s; } } &.opened .ps5-anim5 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps5-anim5 .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown > ul > li { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } &:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(5) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(6) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } &:nth-child(7) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* Divider */ .ps5-anim6 .elementor-divider-separator { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; @include transform-origin(left center); --divider-border-color: var(--theme-color-alter_dark); --divider-color: var(--theme-color-alter_dark); } &.opened .ps5-anim6 .elementor-divider-separator { -webkit-animation-name: fadeInMove; animation-name: fadeInMove; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps5-anim6 .elementor-divider-separator { -webkit-animation-name: fadeOutMove; animation-name: fadeOutMove; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; visibility:visible; } /* Socials animation */ .ps5-anim7 .sc_socials .socials_wrap .social_item, .ps5-anim7 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(3) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(4) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(5) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } } &.opened .ps5-anim7 .sc_socials .socials_wrap .social_item, &.opened .ps5-anim7 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .ps5-anim7 .sc_socials .socials_wrap .social_item, &.out_anim .ps5-anim7 .sc_widget_socials .socials_wrap .social_item { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility: visible; &:nth-child(2) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; } &:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(4) { -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; -o-animation-delay: 0.15s; animation-delay: 0.15s; } &:nth-child(5) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } } /* Mobile menu ---------------------------------------- */ body.mobile_layout.menu_side_left { margin-left: 0; } body.mobile_layout.menu_side_right { margin-right: 0; } body.mobile_layout.menu_side_right .menu_side_wrap { right: -6rem; } body.mobile_layout.menu_side_left .menu_side_wrap { left: -6rem; } body.mobile_layout.menu_side_right .menu_side_wrap.opened {right: 0; } body.mobile_layout.menu_side_left .menu_side_wrap.opened { left: 0; } body.mobile_layout.menu_side_present .menu_side_wrap .menu_side_button { display:block; } body.mobile_layout.menu_side_left .menu_side_wrap .menu_side_button:hover { right: -2em; } body.mobile_layout.menu_side_right .menu_side_wrap .menu_side_button:hover { left: -2em; } /* Admin Bar Mobile Menu */ .admin-bar .menu_mobile { top: 32px; } .admin-bar .menu_mobile.opened { height: calc(100% - 32px); } @media (max-width: 782px) { .admin-bar .menu_mobile { top: 46px; } .admin-bar .menu_mobile.opened { height: calc(100% - 46px); } } @media (max-width: 600px) { .admin-bar .menu_mobile { top: 0; } .admin-bar .menu_mobile.opened { height: 100%; } } .menu_mobile_overlay { display:none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index:8001; @include box(100%, 100%); background-color: var(--theme-color-alter_bg_color); opacity: .1; } .menu_mobile { @include fixed-lt(0, 0, 100002); @include box(100%, 0); will-change: height; @include transition(height .45s cubic-bezier(0.5, 1, 0.89, 1)); &.opened { height:100%; } .menu_mobile_inner { @include abs-cover; text-align:center; overflow:hidden; color: var(--theme-color-alter_text); background-color: var(--theme-color-alter_bg_color); } .menu_mobile_header_wrap { @include abs-lt(0, 0, 10); width: 100%; padding: 60px 65px; @include flex; @include flex-align-items(center); @include flex-justify-content(space-between); @include border-box; } .menu_mobile_content_wrap.content_wrap { position: relative; z-index: 1; height: 100%; max-height: 100%; @include border-box; } .menu_mobile_content_wrap_inner { position: relative; z-index: 1; height: 100%; max-height: 100%; @include border-box; } .menu_mobile_button { color: var(--theme-color-text_dark); &:hover { color: var(--theme-color-text_link); } } .menu-item > a { display:block; } .menu_mobile_inner a, .menu_mobile_inner .menu_mobile_nav_area li:before { color: var(--theme-color-alter_text); } .menu_mobile_inner a:hover, .menu_mobile_inner .current-menu-ancestor > a, .menu_mobile_inner .current-menu-item > a, .menu_mobile_inner .menu_mobile_nav_area li:hover:before, .menu_mobile_inner .menu_mobile_nav_area li.current-menu-ancestor:before, .menu_mobile_inner .menu_mobile_nav_area li.current-menu-item:before { color: var(--theme-color-alter_dark); } .menu_mobile_inner .menu-item.opened > a { color: var(--theme-color-alter_dark); } [class*="sc_fly_"]:not(.sc_fly_static) { position: static !important; @include transform-none; left: auto; top: auto; right: auto; bottom: auto; } .menu_mobile_nav_area { @include abs-lt(0, 27%); @include box(100%, auto); max-height: 53%; overflow-x: hidden; overflow-y: auto; } .menu_mobile_content_wrap_inner.without_socials .menu_mobile_nav_area { max-height: 65%; } .menu_mobile_nav_area { -ms-overflow-style: none; } /* hide scrollbar Explorer */ .menu_mobile_nav_area { scrollbar-width:none; } /* hide scrollbar FireFox */ .menu_mobile_nav_area::-webkit-scrollbar { width:0 } /* hide scrollbar Chrome */ .menu_mobile_nav_area ul { margin:0 auto; padding:0; list-style:none; width: auto; } .menu_mobile_nav_area ul ul { padding: 1em 0; margin: 0; display:none; } .menu_mobile_nav_area > ul > li > ul { padding: 1em 0 0.6em; } .menu_mobile_nav_area li { margin-bottom:0; width:100%; } .menu_mobile_nav_area .menu-item > a { @include font(19px, 1.5em, 400); letter-spacing: 0; padding: 5px 2em; position:relative; display: inline-block; width: auto; text-align:left; @include border-box; @include transition(color .3s ease); } .menu_mobile_nav_area .menu-item[class*="icon-"] { position: relative; display: block; } .menu_mobile_nav_area .menu-item[class*="icon-"]:before { @include font(24px, inherit, 400); display:inline-block; padding: 0; width: 1em; position: absolute; z-index: 1; top: 24px; left: 50%; @include transform(translateX(-12rem)); @include transition-color; } .menu_mobile_nav_area .menu-item .menu-item[class*="icon-"]:before { top: 6px; font-size: 18px; } .menu_mobile_nav_area > ul { @include flex; @include flex-direction(column); @include flex-align-items(center); width: 100%; > .menu-item:last-child > ul { padding-bottom: 0; } > .menu-item > a { @include font(38px, 1.5em, 500); letter-spacing: 0; } > .menu-item .menu-item > a { padding: 0.4em 3.7em; } } .menu_mobile_nav_area .open_child_menu { display: block; @include abs-rt(0, 1px); padding: 0; @include transition-colors; } .menu_mobile_nav_area .menu-item .menu-item .open_child_menu { top: 5px; background-color:transparent; padding: 0; } .menu_mobile_nav_area li > a > .open_child_menu:before { @include font(16px, '', 400); font-family:$theme_icons; content:'\E9A4'; position: relative; right: 10px; opacity: 0; @include transition(right .3s ease-out, color .3s ease, opacity .3s ease); } .menu_mobile_nav_area li.opened > a > .open_child_menu:before, .menu_mobile_nav_area li > a:hover > .open_child_menu:before { right: 0; opacity: 1; } .menu_mobile_nav_area > ul > li li > a > .open_child_menu:before { font-size: 8px; } /* Layouts as submenu */ .menu_mobile_nav_area { ul.sc_layouts_submenu { display: none; width: auto; text-align: left; padding: 1em; margin: 0 auto; .sc_content { width: 100% !important; } .columns_wrap [class*="column-"], .wpb_column:not([class*="vc_col-xs-"]), .elementor-column:not([class*="elementor-xs-"]) { width: 100%; float: none; } .wpb_column:not([class*="vc_col-xs-"]) + .wpb_column:not([class*="vc_col-xs-"]), .elementor-column:not([class*="elementor-xs-"]) + .elementor-column:not([class*="elementor-xs-"]) { margin-top: 2em; } } li > ul.sc_layouts_submenu ul { display: block; } } /* Search Mobile */ .search_mobile { @include abs-lb(0, 8rem); width: 28rem; margin-left: 0; form { position:relative; } .search_field { width:100%; padding: 1.5em 3em 1.5em 1.5em !important; } .search_submit { @include abs-pos(0, 0, auto, auto); font-size:0.8667em; padding:2em 1.8em; color: var(--theme-color-input_light); background-color:transparent; &:focus, &:hover { color: var(--theme-color-input_dark); } } } /* Socials Mobile */ .socials_mobile { @include abs-lb(0, 2rem); display:block; width: 100%; padding-top: 2.6em; &:before { @include abs-lt; display: block; content: ''; width: 100%; height: 1px; @include transform(scale3d(0, 1, 1)); background-color: var(--theme-color-alter_dark); } } .social_item { display:inline-block; margin: 0 2em 0 0; @include transition(color .3s ease); .social_icon { @include font(16px, '', 400); padding: 0 1px; display:block; @include box(auto, auto, inherit); color: var(--theme-color-alter_dark); @include transition(color .3s ease); opacity: 1; &[class*="facebook"]:hover { color: #4F5FBF !important; } &[class*="twitter"]:hover { color: #48BDE9 !important; } &[class*="dribble"]:hover { color: #EA4C89 !important; } &[class*="instagram"]:hover { color: #C41BD1 !important; } } &:last-child { margin-right: 0; } } /* Close Button */ .menu_mobile_close { position: relative; z-index: 1; margin: 0 0 0 10px !important; line-height: 1em; @include flex; @include flex-justify-content(center); @include flex-align-items(center); cursor: pointer; color: var(--theme-color-alter_dark); @include transition(color .3s ease); &:hover { color: var(--theme-color-alter_dark); } .menu_button_close_icon { @include font(19px, '', 400); position: relative; z-index: 1; @include border-box; @include transform(rotate(0)); @include transition(transform .3s ease-out); color: var(--theme-color-alter_dark); &:before { position: relative; z-index: 1; content:'\e9e1'; font-family:$theme_icons; line-height: 1; text-align: center; } } &:hover .menu_button_close_icon { @include transform(rotate(180deg)); } .menu_button_close_text { @include font(17px, 1em, 400); margin-right: 0.9em; color: var(--theme-color-alter_light); } } &:not(.opened) .menu_button_close_icon { @include transform(none); } /* Menu Mobile With Widgets */ .menu_mobile_inner.with_widgets { text-align: left; .menu_mobile_content_wrap_inner { margin-right: 15%; } .menu_mobile_nav_area .menu-item > a { padding: 5px 2em 5px 0; } .menu_mobile_nav_area > ul { @include flex-align-items(flex-start); } .menu_mobile_nav_area > ul > .menu-item .menu-item > a { padding: 0.4em 3.7em 0.4em 1.7em; } .menu_mobile_nav_area .menu-item[class*="icon-"] { position: relative; } .menu_mobile_nav_area .menu-item[class*="icon-"]:before { left: 0; @include transform(none); } .menu_mobile_nav_area .menu-item[class*="image-"] > a { background-position: 1em center; background-repeat:no-repeat; background-size: 1em; padding-left: 2.3em; } .menu_mobile_nav_area > ul { > .menu-item[class*="icon-"] > a { padding-left: 1.2em; } > .menu-item .menu-item[class*="icon-"]:before { font-size: 18px; margin-left: 1.9em; top: 8px; } > .menu-item .menu-item[class*="icon-"] > a { padding-left: 3.3em; } > .menu-item .menu-item[class*="image-"] > a { background-position: 1.6667em center; padding-left: 3.3em; } > .menu-item[class*="columns-"][class*="icon-"]:before { position:static; margin:0 0 0 0.5em; float:left; } > .menu-item[class*="columns-"][class*="icon-"] > a { float:left; margin-left: -1.5em; } > .menu-item .menu-item .menu-item[class*="icon-"]:before { margin-left: 3.9em; } > .menu-item .menu-item .menu-item[class*="icon-"] > a { padding-left:5.3em; } > .menu-item .menu-item .menu-item[class*="image-"] > a { background-position: 1.6667em center; padding-left: 5.3em; } > .menu-item .menu-item .menu-item .menu-item[class*="icon-"]:before { margin-left: 6em; } > .menu-item .menu-item .menu-item .menu-item[class*="icon-"] > a { padding-left: 7.3em; } > .menu-item .menu-item .menu-item .menu-item[class*="image-"] > a { background-position: 1.6667em center; padding-left: 7.3em; } > .menu-item .menu-item .menu-item > a { padding-left: 3.7em; } > .menu-item .menu-item .menu-item .menu-item > a { padding-left: 5.7em; } > .menu-item .menu-item.menu-delimiter { margin-top: 0 !important; padding-top: 0 !important; text-align: center; overflow: hidden; } > .menu-item .menu-item.menu-delimiter > a { overflow: hidden; padding-top: 0.25em; padding-bottom: 0.25em; padding-right: 0.5em; height: 1px; } > .menu-item .menu-item.menu-delimiter > a:before { content: ' '; display: block; border-top: 1px solid var(--theme-color-alter_bd_color); @include box(100%, 0); } > .menu-item .menu-item.menu-delimiter > a { border-color: var(--theme-color-alter_bd_color); } > .menu-item .menu-item.menu-delimiter > a > * { display: none; } } } .menu_mobile_inner.with_widgets .socials_mobile:before { @include transform-origin(left center); } /* Widgets Area */ .menu_mobile_widgets_area { padding: 100px 70px; @include flex; @include flex-justify-content(flex-start); @include flex-align-items(center); @include abs-rt(0, 0, 5); @include box(24%, 100%); background-color: var(--theme-color-bg_color); @include border-box; /* Global Styles in Widget Area */ a { @include transition(color .3s ease); } .columns_wrap [class*="column-"] { width: 100%; } .columns_wrap .widget + .widget { margin-top: 2em; } .widgets_additional_menu_mobile_fullscreen_wrap { position: relative; z-index: 1; max-height: 90%; height: auto; @include border-box; overflow-y: scroll; overflow-x: hidden; padding-top: 2px; padding-bottom: 2px; } .widgets_additional_menu_mobile_fullscreen_wrap { -ms-overflow-style: none; } /* hide scrollbar Explorer */ .widgets_additional_menu_mobile_fullscreen_wrap { scrollbar-width: none; } /* hide scrollbar FireFox */ .widgets_additional_menu_mobile_fullscreen_wrap::-webkit-scrollbar { width: 0; } /* hide scrollbar Chrome */ /* Custom Html Widget */ .widget_custom_html { .extra_item + .extra_item { margin-top: 4em; } .extra_item h6 { @include font(1em, 1.3em, 400); margin: 0; color: var(--theme-color-text_dark); } .extra_item a { display: inline-block; @include font(1.667em, 1.3em, 500); letter-spacing: -0.8px; color: var(--theme-color-text_dark); } .extra_item a[href*="mailto"] { padding-bottom: 0.2em; } .extra_item a:not([href*="mailto"]) { position: relative; padding-right: calc(1.9em + 8px); } .extra_item a:not([href*="mailto"]):after { font-family: $theme_icons; content: '\E9E2'; @include font(8px, '', 400); position: absolute; top: calc(50% + 2px); right: 8px; color: var(--theme-color-text_link); @include transform(translateY(-50%)); @include transition(right .3s ease-out, color .3s ease, opacity .3s ease ); } .extra_item a:not([href*="mailto"]):hover:after { right: 1px; } .extra_item h6 + a { margin-top: 0.5em; } } } /* Animation +++++++++++++++++++++++++++ */ .menu_mobile_close .menu_button_close_icon, .menu_mobile_close .menu_button_close_text { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; } &.opened .menu_mobile_close .menu_button_close_icon, &.opened .menu_mobile_close .menu_button_close_text { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.opened .menu_mobile_close .menu_button_close_icon { -webkit-animation-name: fadeInAnimScale; animation-name: fadeInAnimScale; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; transform-origin: 50% 54%; } &.out_anim .menu_mobile_close .menu_button_close_icon, &.out_anim .menu_mobile_close .menu_button_close_text { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:visible; } &.out_anim .menu_mobile_close .menu_button_close_icon { -webkit-animation-name: fadeOutAnimScale; animation-name: fadeOutAnimScale; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* logo */ .sc_layouts_logo { display: inline-block; vertical-align: top; text-align:left; margin: 0; font-size: 1em !important; /* Remove this rule if you want to zoom this logo too */ -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:hidden; @include transition(color .3s ease); } &.opened .sc_layouts_logo { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .sc_layouts_logo { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; visibility:visible; } /* menu */ .menu_mobile_nav_area > ul > li { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } &:nth-child(6) { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } &:nth-child(7) { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; -o-animation-delay: 1.1s; animation-delay: 1.1s; } &:nth-child(8) { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; } &:nth-child(9) { -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; -o-animation-delay: 1.3s; animation-delay: 1.3s; } &:nth-child(10) { -webkit-animation-delay: 1.4s; -moz-animation-delay: 1.4s; -o-animation-delay: 1.4s; animation-delay: 1.4s; } } &.opened .menu_mobile_nav_area > ul > li { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .menu_mobile_nav_area > ul > li { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } &:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(5) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(6) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } &:nth-child(7) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } &:nth-child(8), &:nth-child(9), &:nth-child(10) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } } /* Socials */ .menu_mobile_inner .socials_mobile .social_item { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:nth-child(2) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } &:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(4) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } &:nth-child(5) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } } &.opened .menu_mobile_inner .socials_mobile .social_item { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } &.out_anim .menu_mobile_inner .socials_mobile .social_item { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility: visible; &:nth-child(2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } &:nth-child(3) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } &:nth-child(4) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(5) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } /* socials mobile */ .menu_mobile_inner .socials_mobile { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; &:before { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:hidden; } } &.opened .menu_mobile_inner .socials_mobile { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; &:before { -webkit-animation-name: fadeInMove; animation-name: fadeInMove; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } } &.out_anim .menu_mobile_inner .socials_mobile { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:visible; &:before { -webkit-animation-name: fadeOutMove; animation-name: fadeOutMove; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; visibility:visible; } } /* widgets area */ .menu_mobile_inner .menu_mobile_widgets_area { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; visibility:hidden; .widget { + .widget { margin-top: var(--theme-var-grid_gap); } -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; visibility:hidden; &.widget_custom_html { .extra_item { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; visibility:hidden; } } } } &.opened .menu_mobile_inner .menu_mobile_widgets_area { visibility:visible; .widgets_additional_menu_mobile_fullscreen_wrap { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; visibility:visible; } .widget { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:visible; &.widget_custom_html { .extra_item { -webkit-animation-name: fadeInAnim; animation-name: fadeInAnim; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(3) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } } } &:nth-child(2) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } &:nth-child(3) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } } } &.out_anim .menu_mobile_inner .menu_mobile_widgets_area { -webkit-animation-name: fadeOutRightPanel; animation-name: fadeOutRightPanel; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:visible; .widget { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:visible; &.widget_custom_html { .extra_item { -webkit-animation-name: fadeOutAnim; animation-name: fadeOutAnim; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; visibility:visible; &:nth-child(2) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(3) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } } &:nth-child(2) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } &:nth-child(3) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } } } } /* Menu mobile 'Narrow' */ .menu_mobile_narrow { margin-top:0; margin-left: -320px; @include box(320px, 100%); @include transition-properties(margin-left, margin-right); } .menu_mobile_narrow.opened { margin-left: 0; } .menu_side_right .menu_mobile_narrow { margin-right: -320px; margin-left: 0; left: auto; right: 0; } .menu_side_right .menu_mobile_narrow.opened { margin-right: 0; } .menu_mobile_narrow .menu_mobile_close { @include square(4em); } .menu_mobile_narrow .menu_mobile_nav_area ul.sc_layouts_submenu .vc_row, .menu_mobile_narrow .menu_mobile_nav_area ul.sc_layouts_submenu .elementor-section { display: block; } .menu_mobile_narrow .menu_mobile_nav_area .menu-item > a { @include font(1em, 1.5em); text-transform: none; letter-spacing:0; width: 18rem; } .menu_mobile_narrow .menu_mobile_nav_area .menu-item[class*="icon-"]:before { @include translateX(-9rem); } .menu_mobile_narrow .menu_mobile_nav_area > ul > .menu-item > a { @include font(1.25em, 1.5em); } .menu_mobile_narrow .menu_mobile_nav_area > ul > .menu-item > a > .open_child_menu:before { @include font(1em, inherit); } .menu_mobile_narrow .menu_mobile_nav_area .menu-item .menu-item .open_child_menu { padding: 0.4em; } .menu_mobile_narrow .search_mobile { width: 18rem; margin-left: -9rem; } /* Widgets in the Header ------------------------------------------------------------- */ .header_widgets_wrap { position:relative; z-index:2; } .header_widgets_wrap.header_fullwidth { overflow:hidden; } .header_widgets_wrap.header_fullwidth .widget { margin-bottom:0; } /* Custom layouts elements ------------------------------------------------------------- */ /* VC Separator */ [class*="scheme_"].sc_layouts_row .vc_separator.vc_sep_color_grey .vc_sep_line, .sc_layouts_row .vc_separator.vc_sep_color_grey .vc_sep_line { border-color: var(--theme-color-alter_bd_color); } /* Cart */ .sc_layouts_cart_items_short { background-color: var(--theme-color-text_link); color: var(--theme-color-inverse_link); } .sc_layouts_cart .sc_layouts_cart_widget { background-color: var(--theme-color-extra_bg_color); color: var(--theme-color-extra_dark); ul.cart_list li a, ul.cart_list li > b, .total, .total *, .quantity, .quantity * { color: var(--theme-color-extra_dark) !important; } .widget_shopping_cart_content .buttons a.checkout { border-color: var(--theme-color-extra_dark) !important; color: var(--theme-color-extra_dark) !important; &:hover { border-color: var(--theme-color-text_link) !important; color: var(--theme-color-text_link) !important; } } } .sc_layouts_cart_widget .sc_layouts_cart_widget_close { color: var(--theme-color-text_light); } .sc_layouts_cart_widget .sc_layouts_cart_widget_close:hover { color: var(--theme-color-text_dark); } /* Currency Switcher */ .sc_layouts_currency .woocommerce-currency-switcher-form .wSelect-selected { color: var(--theme-color-alter_text); } .sc_layouts_currency .woocommerce-currency-switcher-form .wSelect-selected:hover { color: var(--theme-color-alter_dark); } .sc_layouts_currency .chosen-container .chosen-results, .sc_layouts_currency .woocommerce-currency-switcher-form .wSelect-options-holder, .sc_layouts_currency .woocommerce-currency-switcher-form .dd-options, .sc_layouts_currency .woocommerce-currency-switcher-form .dd-option { background: var(--theme-color-alter_bg_color); color: var(--theme-color-alter_dark); } .sc_layouts_currency .chosen-container .chosen-results li, .sc_layouts_currency .woocommerce-currency-switcher-form .wSelect-option { color: var(--theme-color-alter_dark); } .sc_layouts_currency .chosen-container .active-result.highlighted, .sc_layouts_currency .chosen-container .active-result.result-selected, .sc_layouts_currency .woocommerce-currency-switcher-form .wSelect-option:hover, .sc_layouts_currency .woocommerce-currency-switcher-form .wSelect-options-holder .wSelect-option-selected, .sc_layouts_currency .woocommerce-currency-switcher-form .dd-option:hover, .sc_layouts_currency .woocommerce-currency-switcher-form .dd-option-selected { color: var(--theme-color-alter_link) !important; } .sc_layouts_currency .woocommerce-currency-switcher-form .dd-option-description { color: var(--theme-color-alter_text); } /* 7.2 Sliders -------------------------------------------------------------- */ /* Revolution slider */ .slider_wrap .rev_slider_wrapper { z-index:0; } /* 7.3 Post info (page/post title, category or tag name, author, meta, etc.) -------------------------------------------------------------- */ /* Common styles */ .blog_archive { padding-bottom: 4em; } .post_item { color: var(--theme-color-text); } .post_item > .post_title { margin-top:0; } .post_item .post_title a:hover, .post_item .post_title a:focus { color: var(--theme-color-text_dark); } .post_item .post-more-link, .post_item .more-link, .sc_portfolio_preview_show .post_readmore { margin-top: 1.6em; } /* Post with password */ .post-password-form label { display: inline-block; vertical-align: top; } .post-password-form input[type="password"], .post-password-form input[type="submit"] { height: 50px; } .post-password-form input[type="submit"] { padding: 0 40px; display: inline-block; margin-left: 0.2em; } /* Post info block */ .post_meta, .post_meta_item, .post_meta_item:after, .post_meta_item:hover:after, .post_meta .vc_inline-link, .post_meta .vc_inline-link:after, .post_meta .vc_inline-link:hover:after, .post_meta_item a, .post_info .post_info_item, .post_info .post_info_item a, .post_info_counters .post_meta_item { color: var(--theme-color-text_light); } .post_info_item.post_categories a, .post_info_item.post_categories { color: var(--theme-color-text_dark); } .post_date a:hover, .post_date a:focus, a.post_meta_item:hover, a.post_meta_item:focus, .post_meta_item a:hover, .post_meta_item a:focus, .post_meta .vc_inline-link:hover, .post_meta .vc_inline-link:focus, .post_info .post_info_item a:hover, .post_info .post_info_item a:focus, .post_info_meta .post_meta_item:hover, .post_info_meta .post_meta_item:focus { color: var(--theme-color-text_dark); } .post_meta .post_meta_item, .post_meta .vc_inline-link { font-size: inherit; // Need for Gutenberg editor display: inline-block; margin-left:0; @include transition-property(color); } .post_meta .post_meta_item .post_meta_item_value > .post_meta_item_icon { margin-right: 5px; } .post_meta .post_meta_item > .post_meta_item_title + .post_meta_item_value { margin-left: 8px; } .post_info .post_info_item:after, .post_meta .post_meta_item:after, .post_meta .post_meta_item.post_edit:after, .post_meta .vc_inline-link:after { content: '\e83c'; font-family:$theme_icons; display:inline-block; vertical-align:baseline; @include font(14px, '', 400, normal); margin: 0 0.75em; } .post_info .post_info_item:last-child:after, .post_meta .post_meta_item:last-child:after, .post_meta .post_meta_item.post_edit:last-child:after, .post_meta .vc_inline-link:last-child:after { display:none; } .post_meta a.post_meta_item:before, .post_meta .vc_inline-link:before, .post_meta a.post_meta_item > .post_counters_number { margin-right: 0.3em; } .post_meta .post_meta_item:before { display: none; } .post_meta .vc_inline-link:before { content: '\e8bb'; font-family: $theme_icons; } .post_meta .post_meta_item_label { margin-right: 0.3em; } .post_meta .post_meta_item .post_author_by { margin-right: 0.3em; display: none; } .post_meta .post_meta_item .post_author_avatar { display: inline-block; vertical-align: middle; line-height: inherit; margin-right: 0.3em; } .post_meta .post_meta_item .post_author_avatar > img { @include border-round; @include box(1.25em, 1.25em); @include transform(scale(1, 1) !important); } .post_meta .post_meta_item .post_meta_number + .post_meta_label { margin-left: 0.3em; } .post_meta_item.post_categories:not(.cat_sep) { color: transparent !important; } .post_meta_item.post_categories:not(.cat_sep) > a { margin-right: 0.5em; margin-top: 2px; margin-bottom: 2px; display: inline-block; } .post_meta_item.post_categories:not(.cat_sep) > a:last-child { margin-right: 0; } .post_meta_item.post_categories, .post_meta_item.post_categories a { color: var(--theme-color-text_link); } .post_meta_item.post_categories a:hover, .post_meta_item.post_categories a:focus { color: var(--theme-color-text_hover); } .post_meta_item.post_author { font-weight: 400; } .post_meta_item.post_author, .post_info_item.post_info_posted_by, .post_info_item.post_categories { text-transform: uppercase !important; letter-spacing: 0.8px !important; } /* Sponsored content */ .post_meta .post_meta_item .post_sponsored_label { text-transform: uppercase; font-weight: 500; letter-spacing: 0.8px; color: var(--theme-color-text_link); } .post_meta .post_meta_item a.post_sponsored_label:hover { color: var(--theme-color-text_dark); } .single-post .post_meta_item a.post_sponsored_label, .single-post .post_meta_item .post_sponsored_label { display: inline-block; padding: 6px 16px; @include font(11px, 14px, 500); letter-spacing: 0.8px; text-transform: uppercase; @include border-radius(0); background-color: var(--theme-color-text_link); color: var(--theme-color-inverse_link); margin-top: 3px; margin-bottom: 3px; } .single-post .post_meta_item a.post_sponsored_label:hover { background-color: var(--theme-color-text_hover2); color: var(--theme-color-inverse_link); } /* single */ .post_header_single .post_meta.post_meta_categories a:not(.post_sponsored_label) { @include border-radius(0); background-color: var(--theme-color-text_link2); color: var(--theme-color-inverse_link); text-transform: uppercase; padding: 6px 16px; @include box-sizing(border-box); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.8px; @include transition-all(0.3s); margin: 3px 3px 3px 0; &:last-child { margin-right: 0; } &:hover { background-color: var(--theme-color-text_hover2); color: var(--theme-color-inverse_link); } } /* Socials share in the post meta */ .post_meta_item .social_items { font-size:1em; } .post_meta_item .social_items .social_item .social_icon i { font-style:normal; text-transform:capitalize; } .post_meta_item .socials_share { display:inline-block; vertical-align:baseline; } .socials_share.socials_type_drop .social_items { padding:0.8em 1em; } .post_meta_item .socials_share.socials_type_drop .social_items { bottom:auto; top: 2.5em; } .post_meta_item .socials_share.socials_type_drop .social_items:before { bottom: auto; top: -5px; @include rotate(135deg); } // for pull in blogger .sc_blogger .hover_pull .post_meta_item .socials_share.socials_type_drop .social_items { bottom: 2.5em; top: auto; &:before { display: none; } } .socials_share.socials_type_drop .social_items, .socials_share.socials_type_drop .social_items:before { background-color: var(--theme-color-bg_color); border-color: var(--theme-color-bd_color); color: var(--theme-color-text_light); } .socials_share.socials_type_drop .social_items .social_item { color: var(--theme-color-text_light); } .socials_share.socials_type_drop .social_items .social_item:hover { color: var(--theme-color-text_dark); } /* Tabs (internal and Essential Grid) */ .mptt-navigation-tabs, div.frame_tabs .frame_tabs_titles { list-style-type:none; padding:0; text-align:center; letter-spacing:0; margin: 0 0 3em; } div.esg-filter-wrapper .esg-filterbutton, .mptt-navigation-tabs li, div.frame_tabs .frame_tabs_titles li { display: inline-block; margin: 0 0 3px; @include font(12px, 1.4em, normal); text-transform:uppercase; padding: 0; border: none; @include border-radius(0); } div.esg-filter-wrapper .esg-filterbutton:hover, div.esg-filter-wrapper .esg-filterbutton.selected { @include box-shadow(none); } div.esg-filter-wrapper .esg-filterbutton+.esg-filterbutton, .mptt-navigation-tabs li+li, div.frame_tabs .frame_tabs_titles li+li { margin-left:3px; } div.esg-filter-wrapper .esg-filterbutton > span, .mptt-navigation-tabs li a, div.frame_tabs .frame_tabs_titles li a, div.frame_tabs .frame_tabs_titles li a.ui-tabs-anchor { display:block; float: none; padding: 1.75em 3em; @include transition-colors; color: var(--theme-color-alter_dark); background-color: var(--theme-color-alter_bg_color); } div.esg-filter-wrapper .esg-filterbutton > span:hover, .mptt-navigation-tabs li a:hover, .mptt-navigation-tabs li a:focus, .frame_tabs .frame_tabs_titles li a:hover, .frame_tabs .frame_tabs_titles li a:focus, .frame_tabs .frame_tabs_titles li a.ui-tabs-anchor:hover, .frame_tabs .frame_tabs_titles li a.ui-tabs-anchor:focus { color: var(--theme-color-inverse_link); background-color: var(--theme-color-text_link); } div.esg-filter-wrapper .esg-filterbutton.selected > span, .mptt-navigation-tabs li.active a, .frame_tabs .frame_tabs_titles li.ui-state-active a, .frame_tabs .frame_tabs_titles li.ui-state-active a.ui-tabs-anchor { color: var(--theme-color-bg_color); background-color: var(--theme-color-text_dark); } div.frame_tabs .frame_tabs_content { padding: 0; } div.frame_tabs .frame_tab_content_remove { opacity: 0; } div.frame_tabs .nav-links { margin-top:1em; } [class*="scheme_"].sidebar div.esg-filter-wrapper .esg-filterbutton > span, [class*="scheme_"].sidebar .mptt-navigation-tabs li a, [class*="scheme_"].sidebar .frame_tabs .frame_tabs_titles li a { color: var(--theme-color-alter_dark); background-color: var(--theme-color-alter_bg_hover); } [class*="scheme_"].sidebar div.esg-filter-wrapper .esg-filterbutton > span:hover, [class*="scheme_"].sidebar .mptt-navigation-tabs li a:hover, [class*="scheme_"].sidebar .mptt-navigation-tabs li a:focus, [class*="scheme_"].sidebar .frame_tabs .frame_tabs_titles li a:hover, [class*="scheme_"].sidebar .frame_tabs .frame_tabs_titles li a:focus { color: var(--theme-color-inverse_link); background-color: var(--theme-color-alter_link); } [class*="scheme_"].sidebar div.esg-filter-wrapper .esg-filterbutton.selected > span, [class*="scheme_"].sidebar .mptt-navigation-tabs li.active a, [class*="scheme_"].sidebar .frame_tabs .frame_tabs_titles li.ui-state-active a { color: var(--theme-color-alter_bg_color); background-color: var(--theme-color-alter_dark); } /* Post's banners */ .page_content_wrap { position: relative; } .content .before_post_header_banner_wrap { margin-bottom: 2em; } .content .after_post_header_banner_wrap { margin-bottom: 2em; } /* .custom-background .page_content_wrap { background-color: transparent !important; } */ .custom-background .content_wrap > .content, .background_banner_wrap ~ .content_wrap > .content { padding: 4rem; @include border-box; } /* Post featured block */ .post_featured { overflow:hidden; position:relative; margin-bottom:1.8em; } .post_featured.with_thumb.post_featured_bg { background-size: cover; background-position: center center; } body.sidebar_hide .post_featured.alignwide, body.sidebar_hide .post_featured.alignfull { z-index: 100; } .post_featured.with_gallery { overflow: visible; } .post_featured.with_video { z-index: 2000 !important; &.with_video_sticky_on { z-index: 100100 !important; } &.with_thumb:after { content: ' '; @include abs-cover; background: -moz-linear-gradient(top, rgba(0,0,0,0) 25%, rgba(0,0,0,0.13) 50%, rgba(0,0,0,0.25) 66%, rgba(0,0,0,0.75) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 25%,rgba(0,0,0,0.13) 50%,rgba(0,0,0,0.25) 66%,rgba(0,0,0,0.75) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,0.13) 50%,rgba(0,0,0,0.25) 66%,rgba(0,0,0,0.75) 100%); pointer-events: none; } .post_info_video { @include abs-lb; @include transform-none; z-index: 3; top: auto; right: 0; display: block; opacity: 1; margin: 0; width: 100%; @include border-box; padding: 3em 1.5em 1.5em; text-align: center; pointer-events: none; & > * { color: #fff; } .post_info_meta .post_meta, .post_info_meta .post_meta > .post_meta_item, .post_info_meta .post_meta > .post_meta_item > *, .post_info_subtitle .post_meta, .post_info_subtitle .post_meta > .post_meta_item, .post_info_subtitle .post_meta > .post_meta_item > * { color: inherit; } .post_info_title { margin: 0.25em 0; } } } .post_featured.with_audio { .post_info_audio { text-align: left; } } .post_featured > p { margin: 0; height: 0; } .post_featured_bg { position: relative; &:before { content: ' '; @include box(0, 0); padding-top: 56.25%; display:inline-block; vertical-align: top; margin-left:-0.3em; } & > .post_featured_bg_image, & .post_thumb { @include abs-cover; @include bg-cover; } } // Uncomment this if you want to stretch images to the block's width //.post_featured[class*="hover_"] { // display: block; //} //.post_featured img { // width:100%; // height:auto; //} .post_featured_right { float: right; width: 50%; margin-left: 4.3478%; } .post_featured_left { float: left; width: 50%; margin-right: 4.3478%; } .post_featured .mask { background-color: rgba(0,0,0,0.5); } /* 7.4 Post Formats -------------------------------------------------------------- */ /* Sticky posts */ .sticky { position:relative; &:not(.post_layout_custom) { border: 1px solid var(--theme-color-bd_color); padding: 2em; .label_sticky { display:block; @include abs-rt(-13px, -13px); @include box(0, 0); border: 12px solid transparent; border-top-color:var(--theme-color-text_link); @include rotate(225deg); } } } .sidebar_hide .sticky_wrap .sticky, .body_style_fullwide .sticky_wrap .sticky, .body_style_fullscreen .sticky_wrap .sticky { text-align:center; } ul.sc_layouts_submenu .sticky { border: none; padding: 0; .label_sticky { display: none; } } .sticky_wrap { margin-bottom: 5em; position: relative; z-index: 1; // Need to place share menu over next post .sticky { .post_featured { display: inline-block; margin-bottom: 1.5em; } .post_categories { margin-top: 0.5em; } .post_title { margin-top: 0; margin-bottom:0; } } } .sticky_wrap .sticky.format-gallery .post_featured { display: block; } /* Media elements -------------------------------------- */ // Media elements hook for Safary .me-plugin { position: absolute; @include box(0, 0); } .mejs-container:not(.mejs-video) { height: 60px !important; } .mejs-controls { height: 60px; padding: 10px 18px; } .trx_addons_audio_player_wrap .mejs-controls, .wp-playlist .mejs-controls { padding: 0; height: 42px; } .trx_addons_audio_player_wrap .mejs-container, .wp-playlist .mejs-container { height: 42px !important; } .mejs-container .mejs-controls, .wp-playlist .mejs-container .mejs-controls { background: var(--theme-color-alter_bg_color); } [class*="scheme_"].footer_wrap, .sidebar_default[class*="scheme_"] { .mejs-container .mejs-controls, .wp-playlist .mejs-container .mejs-controls { background: var(--theme-color-bg_color); } } // Icons instead bg image .mejs-controls .mejs-button > button { color: var(--theme-color-text_dark); background: none !important; padding: 0 !important; text-align:center; @include font(1.5em, 20px); @include border-sharp; } .mejs-controls .mejs-button > button:hover, .mejs-controls .mejs-button > button:focus { color: var(--theme-color-text_link); } .mejs-controls .mejs-playpause-button.mejs-play > button:before, .mejs-controls .mejs-playpause-button.mejs-replay > button:before { content: '\e9e9'; font-family:$theme_icons; letter-spacing: -3px; } .mejs-controls .mejs-playpause-button.mejs-pause > button:before { content: '\e8e3'; font-family:$theme_icons; } .mejs-controls .mejs-volume-button.mejs-mute > button:before { content: '\e9b0'; font-family:$theme_icons; } .mejs-controls .mejs-volume-button.mejs-unmute > button:before { content: '\e9af'; font-family:$theme_icons; } .mejs-controls .mejs-button.mejs-fullscreen-button { margin-left: 8px; } .mejs-controls .mejs-button.mejs-fullscreen-button > button:before { content: '\f0b2'; font-family:$theme_icons; letter-spacing: 0; } .mejs-controls .mejs-button.mejs-unfullscreen > button:before { content: '\e918'; font-family:$theme_icons; } .mejs-controls .mejs-time-rail .mejs-time-total, .mejs-controls .mejs-time-rail .mejs-time-loaded, .mejs-controls .mejs-time-rail .mejs-time-hovered, .mejs-controls .mejs-volume-slider .mejs-volume-total, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { background: var(--theme-color-alter_bd_color); } .mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-volume-slider .mejs-volume-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: var(--theme-color-text_link); } .mejs-controls .mejs-time-rail .mejs-time-handle-content { border-color: var(--theme-color-text_link); } .mejs-controls .mejs-volume-slider .mejs-volume-handle, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { background: var(--theme-color-text_link); } .mejs-controls .mejs-time { overflow: visible; margin-top: -1px; padding-left: 0; padding-right: 0; } .post_featured.with_thumb .mejs-container, .post_featured.with_thumb .mejs-controls, .post_featured > div > .mejs-container, .post_featured > div > .mejs-container .mejs-controls, .post_featured > div > div > .mejs-container, .post_featured > div > div > .mejs-container .mejs-controls, .trx_addons_audio_player.with_cover .mejs-container, .trx_addons_audio_player.with_cover .mejs-controls { background: none; } .sidebar .mejs-controls .mejs-time, .footer_wrap .mejs-controls .mejs-time { display:none; } /* Audio */ .format-audio .post_featured { position:relative; max-height: unset; } .format-audio .post_featured .post_info { display: none !important; } .format-audio .post_featured img { position:relative; } .format-audio .post_featured.with_thumb .mask { background-color: rgba(0,0,0,0.6); } .format-audio .post_featured .mask { opacity: 1; } .format-audio .post_featured .post_audio.with_iframe .post_audio_author, .format-audio .post_featured .post_audio.with_iframe .post_audio_title, .single-format-audio .post_featured .post_audio.with_iframe .post_audio_author, .single-format-audio .post_featured .post_audio.with_iframe .post_audio_title, .sc_layouts_blog_item_featured .post_featured .post_audio.with_iframe .post_audio_author, .sc_layouts_blog_item_featured .post_featured .post_audio.with_iframe .post_audio_title { display:none; } .format-audio .post_featured .post_audio_author, .single-format-audio .post_featured .post_audio_author, .sc_layouts_blog_item_featured .post_featured .post_audio_author { @include font(14px, '', 500, normal); text-transform: uppercase; line-height: 1.3em; letter-spacing: 1.8px; } .sc_layouts_blog_item_featured .audio_author { margin-left: 0; margin-right:0; text-transform:none; } .format-audio .post_featured .post_audio_title, .single-format-audio .post_featured .post_audio_title, .trx_addons_audio_player .audio_caption, .sc_layouts_blog_item_featured .post_featured .post_audio_title { @include font(1em, 1.35em, 400); text-transform:none; } .format-audio .post_featured .post_audio_title, .single-format-audio .post_featured .post_audio_title { @include font(28px, 1.3em, 500); margin-top: 0.4em; margin-bottom: 0.8em; } .format-audio .post_featured.with_thumb .post_audio_title { margin-top: 0.2em; margin-bottom: 0.9em; } .format-audio .post_featured.with_thumb .post_audio_author, .single-format-audio .post_featured.with_thumb .post_audio_author, .format-audio .post_featured.with_thumb .post_audio_description, .single-format-audio .post_featured.with_thumb .post_audio_description, .format-audio .post_featured.with_thumb .post_audio_title, .single-format-audio .post_featured.with_thumb .post_audio_title, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_audio_author, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_audio_description, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_audio_title { color: var(--theme-color-extra_dark); } .format-audio .post_featured .post_audio_description, .single-format-audio .post_featured .post_audio_description, .sc_layouts_blog_item_featured .post_featured .post_audio_description { @include font(14px, '', 500); margin-bottom: 1em; } .format-audio .post_featured.with_thumb .post_audio, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_audio { @include abs-pos(auto, 15px, 15px, 15px, 1000); text-align:left; .mejs-controls { padding-left: 15px; padding-right: 15px; background-color: var(--theme-color-alter_bg_color); } } .related_wrap .post_featured.with_thumb .post_audio { .audio_wrap { margin-top: 10px; } .mejs-controls { padding-left: 8px; padding-right: 8px; } } .format-audio .post_featured, .single-format-audio .post_featured:not(.with_video), .sc_layouts_blog_item_featured .post_featured { .mejs-controls { padding-left: 0; padding-right: 0; } } .format-audio .post_featured.without_thumb .post_audio:not(.with_iframe), .single-format-audio .post_featured.without_thumb .post_audio:not(.with_iframe), .sc_layouts_blog_item_featured .post_featured.without_thumb .post_audio:not(.with_iframe) { padding: 3.2em 2.8em; .post_info_audio { margin-top: 10px; } } .format-audio .post_featured.without_thumb .post_audio, .single-format-audio .post_featured.without_thumb .post_audio { background-color: var(--theme-color-alter_bg_color); } .format-audio .post_featured.without_thumb .post_audio_author, .single-format-audio .post_featured.without_thumb .post_audio_author { color: var(--theme-color-alter_dark); } .format-audio .post_featured.without_thumb .post_audio_title, .single-format-audio .post_featured.without_thumb .post_audio_title { color: var(--theme-color-alter_dark); } .format-audio .post_featured.without_thumb .post_audio_description, .single-format-audio .post_featured.without_thumb .post_audio_description { color: var(--theme-color-alter_text); } .format-audio .post_featured.with_thumb, .single-format-audio .post_header_wrap .post_featured.with_thumb { position: relative; &:after { content: ' '; display: block !important; @include abs-cover(2); width:auto; height:auto; padding: 0; margin:0; background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.3) 66%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.3) 66%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.3) 66%,rgba(0,0,0,0.5) 100%); } } .single-format-audio .post_header_wrap .post_featured.with_thumb:not(.with_audio):after { display: none !important; } .single-format-audio .post_header_wrap .post_featured.with_thumb { .post_audio { @include abs-cb(2em, 10); min-width: 460px; margin: 0; .post_audio_author, .post_audio_title, .post_audio_description { color: var(--theme-color-extra_dark); } } .post_audio.with_iframe { min-width: 760px; } } .single-format-audio { .post_header_wrap_in_content, .post_header_wrap_in_header { .post_featured.with_thumb { .post_audio { width: 100%; left: 0; right: 0; bottom: 0; transform: none; } > div > div > .mejs-container .mejs-controls { background-color: var(--theme-color-alter_bg_color); padding-left: 10px; padding-right: 10px; } } } } [class*="single_style_style-"]:not(.single_style_style-1):not(.single_style_style-3) .post_header_wrap_in_header .post_featured.with_audio.with_thumb.audio_inited { .post_audio { opacity: 0; bottom: -100px; @include transition-all(0.3s); } .post_audio.show { opacity: 1; bottom: 0; } } /* Btn for hide audio control on single post */ .post_audio_btn { @include border-round; @include box(4.72rem, 4.72rem, 4.8rem); @include transition(all ease 0.3s); background-color: var(--theme-color-alter_bg_color); color: var(--theme-color-text_dark); cursor: pointer; font-size: 1.2rem; margin-bottom: 1.7em; text-align: center; box-sizing: border-box; padding-right: 0.2em; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); display: block; z-index: 3; box-shadow: 0 0 5px 1px var(--theme-color-inverse_text_03); } .post_audio_btn:hover { background-color: var(--theme-color-alter_bg_color); color: var(--theme-color-alter_hover); cursor: pointer; } .post_audio_btn:before { content: '\EA10'; font-family: $theme_icons; } /* Shortcode "Audio" */ .trx_addons_audio_wrap.resized.list .trx_addons_audio_player { opacity: 0; } .trx_addons_audio_wrap.resized.list .trx_addons_audio_player.current { opacity: 1; } .trx_addons_audio_player { border: none; padding: 0; .audio_info { overflow: visible; } &.without_cover { background: none; border: none; } .audio_author + .audio_caption, .audio_author + .audio_description { margin-top: 5px; } .audio_info + .audio_embed, .audio_info + .audio_frame { margin-top: 25px; } .trx_addons_audio_player_wrap { padding: 3.3em 3em; background: var(--theme-color-alter_bg_color); .audio_author { color: var(--theme-color-text_dark); margin: 0; font-size: 17px; } .audio_caption { font-weight: 500; font-size: 28px; line-height: 1.2em; margin: 0; color: var(--theme-color-text_dark); } .audio_description { font-size: 17px; font-weight: 400; line-height: 20px; color: var(--theme-color-alter_text); margin: 4px 0 0 0; } .audio_now_playing { display: inline-block; padding: 6px 16px; @include font(11px, 14px, 500); margin-top: 0; margin-bottom: 1.55em; letter-spacing: 0.8px; @include border-radius(0); background-color: var(--theme-color-text_dark); color: var(--theme-color-inverse_hover); } } div.mejs-controls .mejs-time { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--theme-color-text_dark); } &.with_cover { padding: 0; @include flex; @include flex-direction(row); @include flex-align-items(center); &:after { display: none; } .trx_addons_audio_player_image { width: 27.5%; max-height: 100%; background-position: center center; background-size: cover; flex-shrink: 0; @include border-box; @include flex-align-self(stretch); } .trx_addons_audio_player_wrap { @include flex; @include flex-direction(column); @include flex-justify-content(space-between); @include border-box; flex-grow: 1; } } .trx_addons_audio_navigation { top: 2.5em; } div.mejs-controls div.mejs-button { width: 42px; } div.mejs-controls div.mejs-button > button { font-size: 12px; background-color: transparent !important; @include box(42px, 42px, 37.5px); letter-spacing: -2px; margin: 0; border: 2px solid var(--theme-color-text_dark); @include border-radius(50%); @include box-shadow(none); @include transition-color(0.3s); } div.mejs-controls div.mejs-button.mejs-pause > button { letter-spacing: 0; } div.mejs-controls div.mejs-button.mejs-volume-button > button { border: none !important; font-size: 18px; letter-spacing: 0; margin-top: 1px; } div.mejs-controls div.mejs-button.mejs-volume-button.mejs-unmute > button { letter-spacing: 8px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: var(--theme-color-text_dark); } div.mejs-controls .mejs-horizontal-volume-slider { margin-left: 5px; } div.mejs-controls .mejs-time.mejs-duration-container { margin-right: 25px; } div.mejs-controls .mejs-time-rail { padding-top: 15px; margin: 0 27px; } .sidebar & { @include flex-direction(column); .trx_addons_audio_player_wrap { width: 100%; padding: 1.8em; background: var(--theme-color-bg_color); @include border-box; .audio_caption { @include font(22px, 1.4em); } .trx_addons_audio_navigation { top: 3em; right: 2em; @include font(13px, 1.3em); > span span { font-size: 1rem; } } } &.with_cover { .trx_addons_audio_player_image { height: 150px; width: 100%; } } } } .trx_addons_audio_wrap.resized.list .audio_frame { bottom: auto; position: relative; } .trx_addons_audio_wrap { .trx_addons_audio_navigation { z-index: 3; @include font(15px, 1.75em, 500); color: var(--theme-color-alter_dark); > span { opacity: 1; } } } /* WP Playlist */ .wp-playlist.wp-audio-playlist { border: none; margin: 0; padding: 0; .mejs-container { padding: 0 2.7em 0 2.7em; @include border-box; min-height: 92px; background: var(--theme-color-alter_bg_color); } .mejs-container .mejs-controls { padding: 0 2.7em; min-height: 42px; margin-bottom: 50px; } div.mejs-controls div.mejs-button > button { border-width: 2px; border-color: var(--theme-color-alter_dark); width: 42px; height: 42px; line-height: 37.5px; letter-spacing: -2px; } div.mejs-controls div.mejs-button.mejs-pause > button { letter-spacing: 0; } div.mejs-controls div.mejs-button.mejs-volume-button > button { border: none !important; font-size: 18px; letter-spacing: 0; margin-top: 1px; } div.mejs-controls div.mejs-button.mejs-volume-button.mejs-unmute > button { letter-spacing: 8px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: var(--theme-color-text_dark); } div.mejs-controls .mejs-horizontal-volume-slider { margin-left: 3px; } div.mejs-controls .mejs-time.mejs-duration-container { margin-right: 15px; } div.mejs-controls .mejs-time-rail { padding-top: 15px; margin: 0 27px; } } .wp-playlist.wp-audio-playlist .wp-playlist-current-item { height: auto; padding: 3.1em 2.8em 1.7em; margin-bottom: 0; @include border-box; } .wp-playlist.wp-audio-playlist .wp-playlist-current-item img { display: none; } .wp-playlist.wp-audio-playlist .wp-playlist-item-title { @include font(28px, 1.2em, 500); } .wp-playlist.wp-audio-playlist .wp-playlist-item-artist { @include font(17px, 22px, 400); padding-bottom: 2px; text-transform: none; color: var(--theme-color-alter_text); } .wp-playlist.wp-audio-playlist .wp-playlist-item-title + .wp-playlist-item-artist { margin-top: 5px; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks { margin-top: 2.3em; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-caption, .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item-length, .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item-title { line-height: 1.3em; font-size: 19px; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item-artist { line-height: 1.3em; font-size: 18px; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item .wp-playlist-item-length { right: 0; top: 20px; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item { padding: 20px 0; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks { font-size: 19px; line-height: 1.3em; .wp-playlist-item-artist { padding: 0; margin: 0; color: var(--theme-color-alter_text); } .wp-playlist-item-title { font-weight: 500; } .wp-playlist-caption { font-weight: 500; } .wp-playlist-item-length { font-weight: 400; } } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-playing .wp-playlist-item-length, .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-playing .wp-playlist-item-title, .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-playing .wp-playlist-item-artist { text-decoration: none; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item:first-child { padding-top: 0; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item:first-child .wp-playlist-item-length { top: 0; } .wp-playlist.wp-audio-playlist .wp-playlist-tracks .wp-playlist-item:last-child { padding-bottom: 0; } .ua_edge .wp-playlist.wp-audio-playlist .wp-playlist-current-item { margin-bottom: -1px; } // Media elements .post_featured.with_thumb .trx_addons_video_player .mejs-controls { background: var(--theme-color-alter_bg_color); } .post_featured > div > .mejs-container { background: var(--theme-color-extra_bg_color_05); } .post_featured > div > .mejs-container .mejs-controls { background: var(--theme-color-alter_bg_color); body.ua_firefox & { bottom: -1px; } } div.mejs-controls .mejs-time-rail { padding-top: 15px; margin: 0 22px; } div.mejs-controls .mejs-time-handle-content { top: -7px; @include border-radius(2px !important); } div.mejs-controls .mejs-time-float { color: #0d0d12; background: #ffffff; } div.mejs-controls .mejs-time-float-corner { border-top-color: #0d0d12; } div.mejs-controls .mejs-time { @include font(16px, '', 500); padding-top: 16px; height: 30px; color: var(--theme-color-text_dark); } .sidebar .mejs-controls .mejs-time, .footer_wrap .mejs-controls .mejs-time { display:none; } div.mejs-button > button { @include border-round; background-image: none !important; } div.mejs-button > button:focus { outline: none; } div.mejs-controls div.mejs-button { width: 40px; flex-shrink: 0; } div.mejs-controls div.mejs-button > button { font-size: 12px; background: none !important; border: 1px solid var(--theme-color-alter_bd_color); @include square(40px); line-height: 38px; margin: 0; @include border-radius(50%); letter-spacing: -4px; @include transition-color(0.3s); } [class*="scheme_"].sidebar { div.mejs-controls div.mejs-button > button, div.mejs-controls div.mejs-button > button:focus, div.mejs-controls div.mejs-button > button:hover { border-color: var(--theme-color-bd_color); } } div.mejs-controls div.mejs-button.mejs-pause > button { letter-spacing: 0; } div.mejs-controls div.mejs-button.mejs-volume-button > button { font-size: 12px; letter-spacing: -1px; } div.mejs-controls div.mejs-button.mejs-volume-button.mejs-unmute > button { letter-spacing: 4px; } div.mejs-controls .mejs-horizontal-volume-total { top: 19px; } div.mejs-controls .mejs-horizontal-volume-slider { margin-left: 20px; } div.mejs-controls .mejs-time { padding-top: 17px; } div.mejs-controls .mejs-time.mejs-currenttime-container { margin-left: 18px; } div.mejs-controls .mejs-time.mejs-duration-container { margin-right: 17px; } .mejs-horizontal-volume-total, .mejs-time-buffering, .mejs-time-current, .mejs-time-float-corner, .mejs-time-hovered, .mejs-time-loaded, .mejs-time-marker, .mejs-time-total { height: 4px !important; } .mejs-time-total { margin: 5px 0 0; will-change: transform; } .mejs-horizontal-volume-total { margin-top: 1px; } /* Video */ .post_featured.without_thumb { display: block; } .post_featured.with_thumb { position:relative; } .post_featured.with_thumb .post_video, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_video { // Next 3 rows added to avoid using translate(-50%, -50%) on the inner iframe // because it move video to the left top corner in the fullscreen mode @include flex; @include flex-align-items(center); @include flex-justify-content(center); @include abs-cover(2); @include transition-all; text-align:center; opacity:0; overflow:hidden; } .post_featured.with_thumb .post_video:before, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_video:before { content:' '; display:inline-block; padding-top:55%; @include box(0, 0); } .post_featured.with_thumb img, .sc_layouts_blog_item_featured .post_featured.with_thumb img { position:relative; z-index:2; } .post_featured.with_thumb.with_audio img, .sc_layouts_blog_item_featured .post_featured.with_thumb.with_audio img { z-index:1; } .post_featured.with_thumb .mask, .sc_layouts_blog_item_featured .post_featured.with_thumb .mask { z-index:3; background-color: rgba(0,0,0,0.5); opacity:0; } .post_featured.with_thumb:hover .mask, .sc_layouts_blog_item_featured .post_featured.with_thumb:hover .mask { opacity:1; } .trx_addons_video_player.with_cover .video_hover, .post_featured.with_thumb .post_video_hover, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_video_hover { @include square(85px); @include border-round; @include transition-all; @include abs-lt(50%, 50%, 2000); @include transform(none); // translate make the bad antialias on Webkit, use the negative margin instead // @include translate(-50%, -50%); margin: -42px 0 0 -42px; font-size: 21px; letter-spacing: -6px; opacity: 1; cursor: pointer; overflow:hidden; color: var(--theme-color-inverse_dark); background-color: var(--theme-color-inverse_link); border: none; } .post_header_wrap .post_featured.with_thumb .post_video_hover { opacity: 1; margin-top: -42px; } .trx_addons_video_player.with_cover:hover .video_hover { opacity: 1; margin-top: -42px; } .trx_addons_video_player.with_cover .video_mask { display: none; } .trx_addons_video_player.with_cover.video_play { background-color: var(--theme-color-inverse_dark); } .trx_addons_video_player.with_cover.video_play img { opacity: 0; } .trx_addons_video_player.with_cover .video_hover:hover, .post_featured.with_thumb .post_video_hover:hover, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_video_hover:hover { color: var(--theme-color-inverse_link); background-color: var(--theme-color-text_link); } [class*="scheme_"].sidebar .trx_addons_video_player.with_cover .video_hover { color: var(--theme-color-alter_link); } [class*="scheme_"].sidebar .trx_addons_video_player.with_cover .video_hover:hover { color: var(--theme-color-inverse_hover); background-color: var(--theme-color-alter_link); } .trx_addons_video_player.with_cover .video_hover, .post_header_wrap .post_featured.with_thumb .post_video_hover, .body_style_fullwide .post_featured.with_thumb .post_video_hover, .post_layout_excerpt .post_featured.with_thumb .post_video_hover { font-size: 21px; @include square(85px); } .widget_video .trx_addons_video_player.with_cover .video_hover { font-size: 21px; } .sidebar_show .post_content_single .trx_addons_video_player.with_cover { &:hover .video_hover, .video_hover { @include square(65px); font-size: 15px; margin: -32px 0 0 -32px; } } .sidebar .trx_addons_video_player.with_cover .video_hover, .footer_wrap .trx_addons_video_player.with_cover .video_hover { font-size: 1.8em; } .trx_addons_video_player.with_cover .video_hover:before, .post_featured.with_thumb .post_video_hover:before, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_video_hover:before { content: '\e9e9'; font-family:$theme_icons; } .post_featured.with_thumb .post_video_hover > a, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_video_hover > a { display: block; @include abs-cover; } .post_featured.post_video_play .post_video, .sc_layouts_blog_item_featured .post_featured.post_video_play .post_video { opacity:1; z-index:100; background-color:#000; } .post_featured.post_video_play .mask, .sc_layouts_blog_item_featured .post_featured.post_video_play .mask { opacity: 1; background-color:#000; } .post_featured.post_video_play .post_video_hover, .sc_layouts_blog_item_featured .post_featured.post_video_play .post_video_hover { display:none; } /* Gallery */ .format-gallery .post_featured.with_thumb, .single-format-gallery .post_header_wrap .post_featured.with_thumb { > img { //opacity: 0; @include scale(0.998, 0.998); } .slider_outer { @include abs-cc(1000); width: 100%; height: 100% !important; .slider_container { height: 100% !important; } } } /* Aside, Link, Status, Quote */ .format-quote .post_content, .format-aside .post_content, .format-link .post_content, .format-status .post_content { padding: 0; text-align:left; } .format-aside .post_content_inner, .post_item_single.format-aside .post_content > p, .format-link .post_content_inner, .post_item_single.format-link .post_content > p, .format-status .post_content_inner, .post_item_single.format-status .post_content > p { @include font(1.6667rem, 1.4em); } .format-aside .post_content_inner { padding: 1em 1.3158em; } .format-aside .post_content_inner { color: var(--theme-color-alter_dark); background-color: var(--theme-color-alter_bg_color); } .format-aside .post_content_inner:after { display:none; } .format-aside .post_content_inner + .post_meta, .format-link .post_content_inner + .post_meta, .format-status .post_content_inner + .post_meta { margin-top:1.6em; } .format-link .post_content_inner, .format-status .post_content_inner { color: var(--theme-color-text_dark); } /* Chat */ .format-chat p > em, .format-chat p > b, .format-chat p > strong { display:inline-block; margin-top:1.7em; } .format-chat p:first-child > em, .format-chat p:first-child > b, .format-chat p:first-child > strong { margin-top:0; } .format-chat p > b, .format-chat p > strong { color: var(--theme-color-text_dark); } /* 7.5 Paginations -------------------------------------------------------------- */ /* Blog pagination: Load more and Infinite */ .sc_item_pagination_load_more, .nav-links-more, .woocommerce-links-more { letter-spacing: 0; text-align: center; margin-top: 2.8em; .nav-links, .nav-load-more, .woocommerce-load-more { @include theme_button_filled; &:hover { background-color: var(--theme-color-text_hover); } } &.loading { span { opacity: 0; } .nav-links:before, .nav-load-more:before, .woocommerce-load-more:before { opacity: 1 !important; } } } // Widget pagination nav.sc_item_pagination { margin-top: 2.5em; } .woocommerce-links-more { margin-top: 1em; } .nav-links-more.nav-links-infinite, .woocommerce-links-more.woocommerce-links-infinite { display:none; } .nav-links-more a, .woocommerce-links-more a { display:inline-block; padding-top: 2em; position:relative; } .sc_item_pagination_load_more a:before, .nav-links-more a:before, .woocommerce-links-more a:before { content: '\e929'; font-family:$theme_icons; font-size:1em; font-weight:normal; display:block; text-align:center; margin-left:-0.5em; margin-top:-0.5em; @include abs-lt(50%, 50%); @include square(1em); opacity: 0; } .nav-links-more.loading a:before, .woocommerce-links-more.loading a:before { content: '\e82d'; @include animation(spin 2s infinite linear); } .nav-links-infinite a span, .woocommerce-links-infinite a span { opacity: 0; } .nav-links-infinite.loading, .woocommerce-links-infinite.loading { display: block; } /* Blog pagination: Prev/Next links */ .nav-links-old { overflow:hidden; @include font(17px, 20px, 500); text-transform: capitalize; margin-top: 3em; color: var(--theme-color-text_dark); a { color: var(--theme-color-text_dark) !important; } } .nav-links-old a:hover { color: var(--theme-color-text_link) !important; } .nav-links-old .nav-prev a:before, .nav-links-old .nav-next a:after { font-family:$theme_icons; font-weight:normal; display:inline; @include abs-lt; font-size: 11px; font-weight: 500; } .nav-links-old .nav-prev { float:left; position:relative; padding-left: 2em; } .nav-links-old .nav-prev a:before { content: '\EA07'; } .nav-links-old .nav-next { float:right; position:relative; padding-right:2em; } .nav-links-old .nav-next a:after { content: '\E9A4'; left: auto; right: 0; } /* Blog pagination: Page numbers */ div.esg-filters, .woocommerce nav.woocommerce-pagination ul, .comments_pagination, .nav-links, .page_links { font-size: 17px; font-weight: 500; text-transform: none; margin-top: 2.8em; text-align:left; border:none; list-style-type:none; clear: both; } .woocommerce nav.woocommerce-pagination ul { margin-top: 1em; } .page_links .page_links_title { display: inline-block; vertical-align: top; margin: 0.75em 0.5em 0 0; } .esg-filters div.esg-navigationbutton, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span.current, .page_links > span:not(.page_links_title), .page_links > a, .comments_pagination .page-numbers, .nav-links .page-numbers { display:inline-block; vertical-align:top; font-size:inherit; font-weight: inherit; margin: 2px 5px 2px 0; padding: 0; border: 1px solid var(--theme-color-bd_color); color: var(--theme-color-text_dark); @include box-sizing(border-box); @include square(52px); line-height: 49px; @include border-radius(50%); @include transition-properties(color, background-color, border-color, background-position); &.dots { border: none; width: 46px; } } .esg-filters div.esg-navigationbutton, .woocommerce nav.woocommerce-pagination ul li a, .page_links > a, .comments_pagination .page-numbers, .nav-links .page-numbers { color: var(--theme-color-text_dark); background-color: var(--theme-color-input_bg_color); } .nav-links .page-numbers.current, .comments_pagination .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current, .esg-filters div.esg-navigationbutton.selected { color: var(--theme-color-inverse_hover); background-color: var(--theme-color-text_dark); border-color: var(--theme-color-text_dark); } .esg-filters div.esg-navigationbutton:hover, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus, .page_links > a:hover, .page_links > span:not(.page_links_title), .comments_pagination a.page-numbers:hover, .nav-links a.page-numbers:hover { color: var(--theme-color-text_dark); background-color: var(--theme-color-alter_bg_color); } .esg-filters .esg-navigationbutton i[class*="eg-icon-"] { color: inherit; } .esg-filters .esg-navigationbutton i.eg-icon-left-open:before { content: '\e939'; font-family: $theme_icons; } .esg-filters .esg-navigationbutton i.eg-icon-right-open:before { content: '\e93a'; font-family: $theme_icons; } .woocommerce nav.woocommerce-pagination { text-align: left; } .woocommerce nav.woocommerce-pagination ul li { border: none; display:inline-block; margin: 0; } .esg-filters div.esg-navigationbutton:hover, .esg-filters div.esg-navigationbutton.selected { @include box-shadow(none); } .nav-links .page-numbers.first, .nav-links .page-numbers.prev, .nav-links .page-numbers.next, .nav-links .page-numbers.last, .comments_pagination .page-numbers.first, .comments_pagination .page-numbers.prev, .comments_pagination .page-numbers.next, .comments_pagination .page-numbers.last, .woocommerce nav.woocommerce-pagination ul li a.first, .woocommerce nav.woocommerce-pagination ul li a.prev, .woocommerce nav.woocommerce-pagination ul li a.next, .woocommerce nav.woocommerce-pagination ul li a.last { text-indent: -200px; overflow: hidden; position: relative; } .nav-links .page-numbers.first:before, .nav-links .page-numbers.prev:before, .nav-links .page-numbers.next:before, .nav-links .page-numbers.last:before, .comments_pagination .page-numbers.first:before, .comments_pagination .page-numbers.prev:before, .comments_pagination .page-numbers.next:before, .comments_pagination .page-numbers.last:before, .woocommerce nav.woocommerce-pagination ul li a.first:before, .woocommerce nav.woocommerce-pagination ul li a.prev:before, .woocommerce nav.woocommerce-pagination ul li a.next:before, .woocommerce nav.woocommerce-pagination ul li a.last:before { font-family: $theme_icons; @include abs-lt; top: 1px; width: 100%; text-align: center; text-indent: 0; font-size: 14px; } .nav-links .page-numbers.first:before, .comments_pagination .page-numbers.first:before, .woocommerce nav.woocommerce-pagination ul li a.first:before { content:'\e8af'; } .nav-links .page-numbers.prev:before, .comments_pagination .page-numbers.prev:before, .woocommerce nav.woocommerce-pagination ul li a.prev:before { content:'\e907'; } .nav-links .page-numbers.next:before, .comments_pagination .page-numbers.next:before, .woocommerce nav.woocommerce-pagination ul li a.next:before { content:'\e908'; } .nav-links .page-numbers.last:before, .comments_pagination .page-numbers.last:before, .woocommerce nav.woocommerce-pagination ul li a.last:before { content:'\e8b0'; } /* Attachments navigation */ .image-navigation .nav-previous, .image-navigation .nav-next { float:none; width:auto; text-align:left; padding:0; margin:0; @include abs-lc(1.5em); } .image-navigation .nav-next { left: auto; right: 1.5em; text-align:right; } .image-navigation .nav-previous a, .image-navigation .nav-next a { display:block; padding: 1.1em 1em; width: 0; max-width:20em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background-color:rgba(0,0,0,0); border:1px solid rgba(0,0,0,0); color: #fff; @include border-radius(50%); } .image-navigation .nav-previous a:hover, .image-navigation .nav-next a:hover { width: auto; color: #fff; background-color:rgba(0,0,0,0.6); border-color:rgba(0,0,0,0.6); @include border-radius(2em); } .image-navigation .nav-previous a:hover { padding-left:3.5em; } .image-navigation .nav-next a:hover { padding-right:3.5em; } .image-navigation .nav-previous a:after, .image-navigation .nav-next a:after { content: '\e8ef'; font-family: $theme_icons; @include abs-lc; @include square(4em); @include border-round; border: 1px solid #000; background-color: #333; color: #fff; } .image-navigation .nav-next a:after { content: '\e8f0'; left: auto; right: 0; } .image-navigation .nav-previous a:hover:after, .image-navigation .nav-next a:hover:after { border-color: transparent; background-color: transparent; } /* 7.6 Full post in the blog ------------------------------------------------------ */ .full_post_loading { position: relative; } .full_post_loading:after { content: ' '; @include bg-mask(#fff, 0.7, 9999); background-color: var(--theme-color-bg_color_07); background-image:url(../../../images/preloader2.png); background-position:center; background-repeat:no-repeat; } .full_post_content { position: relative; .post_header_wrap { .post_header { + .post_featured { margin-top: 30px; } } + .post_content { margin-top: 30px !important; } } } .posts_container .full_post_content { margin-top: 7em; padding-top: 7em; border-top: 1px solid var(--theme-color-bd_color); } .posts_container .full_post_content:not(:last-child) { margin-bottom: 7em; padding-bottom: 7em; border-bottom: 1px solid var(--theme-color-bd_color); } .posts_container { .post_item_container { + .full_post_content { @include flex; flex-direction: column; align-items: flex-end; .full_post_close { margin-bottom: -50px; z-index: 2001; } } &.post_format_audio { .post_featured.with_thumb { .post_audio { .post_info_audio { .post_audio_description, .post_audio_title, .post_audio_author { overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; display: -moz-box; -moz-box-orient: vertical; box-orient: vertical; } .post_audio_author { -webkit-line-clamp: 1; -moz-line-clamp: 1; line-clamp: 1; } .post_audio_title { -webkit-line-clamp: 2; -moz-line-clamp: 2; line-clamp: 2; } .post_audio_description { -webkit-line-clamp: 3; -moz-line-clamp: 3; line-clamp: 3; } } } } } } } .sc_item_posts_container .full_post_content, .sc_item_posts_container .full_post_content:not(:last-child) { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid var(--theme-color-bd_color); } .full_post_opened:first-child + .full_post_content { margin-top: 0; padding-top: 0; border-top: none; } .full_post_read { overflow: visible; } .sc_blogger_item.full_post_read .entry-title, // posts in shortcode Blogger .full_post_read .post_title, // blog posts .full_post_read .sc_layouts_blog_item_title { // custom posts layouts position: relative; } .full_post_read .sc_layouts_blog_item_title { display: inline-block; vertical-align: top; } .sc_blogger_item.full_post_read .entry-title:after, // posts in shortcode Blogger .full_post_read .post_title:after, // blog posts .full_post_read .sc_layouts_blog_item_title:after { // custom posts layouts content: ' '; @include box(2em, 1em); @include abs-lt(-0.5em,-0.2em); @include rotate(-20deg); opacity: 0.7; background-image: url(../../../images/read.png); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; display: none; // Hide read marker by default } .full_post_read .sc_layouts_blog_item_title .post_title:after { display: none; } button.full_post_close { @include sticky-top(12em, 1000); @include square(50px); @include border-box; border-radius: 50% !important; float: right; margin: 0 0 1em 2em; cursor: pointer; color: var(--theme-color-text_link); background-color: var(--theme-color-bg_color); @include box-shadow(0 2px 4px 0 rgba(0,0,0,0.2)); } button.full_post_close:hover { color: var(--theme-color-text_hover); } button.full_post_close:after { content: '\e916'; font-family: $theme_icons; } .full_post_progress { @include abs-lt(0,0,-1); pointer-events: none; display: block; @include square(100%); @include border-round; @include rotate(-90deg); -webkit-backface-visibility: hidden; } .full_post_progress svg { fill: currentColor; } .full_post_progress_bar { fill: transparent; stroke: var(--theme-color-text_link); stroke-width: 2px; stroke-dashoffset: 0; stroke-dasharray: 137.4; } button.full_post_read_complete:after { content: '\e8ab'; } .full_post_read_complete .full_post_progress { display: none; } /* 8. Single page parts -------------------------------------------------------------- */ .structured_data_snippets { display: none; } .post_item_single a.post_meta_item:hover, .post_item_single .post_meta_item > a:hover, .post_item_single .post_meta_item .socials_caption:hover, .post_item_single .post_edit a:hover { color: var(--theme-color-text_hover); } .post_item_single:after { content: ' '; display: block; width: 100%; height: 0; clear: both; } .post_content > p:last-child { margin-bottom: 0; } .post_item_single.format-aside .post_content, .post_item_single.format-link .post_content, .post_item_single.format-status .post_content { padding: 0; text-align:left; } .post_item_single.format-quote .post_content { background-color:transparent; padding-top:0; } .post_item_single.format-quote .post_content > blockquote:first-child { margin-top: 0; } .section_title { margin:0 0 1em; text-align:left; } .sidebar_hide.narrow_content .post_item_single.post_type_post { width: 75%; margin: 0 auto; ~ .show_comments_single, ~ section { width: 75%; margin-left: auto; margin-right: auto; } } .post_content_single:after { content: ' '; display: block; @include box(100%, 0); clear: both; } /* Vertical share */ .sidebar_hide.narrow_content .post_info_vertical { @include abs-lt( calc( -1 * var(--theme-var-padding_narrow) ), 0 ); } .sidebar_show .post_info_vertical, .sidebar_hide:not(.narrow_content) .post_info_vertical, .sidebar_hide.narrow_content .previous_post_content.sidebar_show .post_info_vertical { @include abs-lt; } .sidebar_show .post_info_vertical_present, .sidebar_show .post_info_vertical_present + .post_footer, .sidebar_hide:not(.narrow_content) .post_info_vertical_present, .sidebar_hide:not(.narrow_content) .post_info_vertical_present + .post_footer { padding-left: 15%; } .post_info_vertical_present { position: relative; } .sidebar_show .post_info_vertical_fixed_on, .sidebar_hide.narrow_content .post_info_vertical_fixed_on, .sidebar_hide:not(.narrow_content) .post_info_vertical_fixed_on, .sidebar_hide.narrow_content .previous_post_content.sidebar_show .post_info_vertical_fixed_on { position: fixed !important; z-index: 2; } /* 8.1 Post header ------------------------------------------------------ */ .post_item_single > .post_featured { margin-bottom:3em; text-align:center; // Align the featured image to the center if its width less then width of the content area } .post_item_single > .post_featured > img { width: auto; max-height: 80vh; } .post_featured.post_attachment { margin-bottom: 0.5em; } .entry-caption { text-align:center; font-style:italic; } .post_item_single .post_content > h1:first-child, .post_item_single .post_content > h2:first-child, .post_item_single .post_content > h3:first-child, .post_item_single .post_content > h4:first-child, .post_item_single .post_content > h5:first-child, .post_item_single .post_content > h6:first-child, .post_item_single .post_content > .vc_row:first-child h1:first-child, .post_item_single .post_content > .vc_row:first-child h2:first-child, .post_item_single .post_content > .vc_row:first-child h3:first-child, .post_item_single .post_content > .vc_row:first-child h4:first-child, .post_item_single .post_content > .vc_row:first-child h5:first-child, .post_item_single .post_content > .vc_row:first-child h6:first-child, .post_item_single .post_content .elementor-text-editor > h1:first-child, .post_item_single .post_content .elementor-text-editor > h2:first-child, .post_item_single .post_content .elementor-text-editor > h3:first-child, .post_item_single .post_content .elementor-text-editor > h4:first-child, .post_item_single .post_content .elementor-text-editor > h5:first-child, .post_item_single .post_content .elementor-text-editor > h6:first-child, .post_item_single .post_title { margin-top: 0; } .post_item_single .post_header_single .post_title { margin-bottom: 0; } /* 8.2 Post footer ------------------------------------------------------ */ /* Tags */ .post_item_single .post_tags_single { margin-top: 2.8em; @include flex; @include flex-direction(row); @include flex-justify-content(flex-start); @include flex-wrap(wrap); } .post_item_single .post_tags_single .post_meta_label { display: none; vertical-align: middle; margin-right: 0.5em; } .post_item_single .post_tags_single a { display: inline-block; vertical-align: top; padding: 8px 18px 9px; margin: 0.25em 0.5em 0.25em 0; font-size: 13px; font-weight: 400; line-height: 16px; background-color: var(--theme-color-bg_color); color: var(--theme-color-text); border: 1px solid var(--theme-color-bd_color); @include box-sizing(border-box); @include border-radius(0); @include transition-properties(color); } .post_item_single .post_tags_single a:hover { color: var(--theme-color-text_link); } /* Emotions */ .post_item_single .trx_addons_emotions { margin-top: 3em; } /* Likes and share in the single post */ .post_item_single .post_meta_single { margin-top: 4em; padding-top: 2.2em; border-top: 1px solid var(--theme-color-bd_color); text-align: right; @include flex; @include flex-direction(row); @include flex-justify-content(space-between); @include flex-align-items(center); } .post_item_single .post_content > .trx_addons_emotions + .post_meta_single { @include flex-justify-content(flex-start); } /* Likes */ .post_meta_likes.disabled, .comment_counters_likes.disabled { color: var(--theme-color-text_link); } .post_item_single .post_meta_single .post_meta_likes { margin-right: 10px; flex-shrink: 0; &:before { display: inline-block; font-size: 14px; @include box(43px,43px,46px !important); letter-spacing: -1px; @include border-round; border: 1px solid var(--theme-color-bd_color); color: var(--theme-color-text_dark); @include transition-property(color); content: '\e9cc'; font-family: $theme_icons; margin: 0 0.6em 0 0; } &.trx_addons_icon-heart:before { content: '\e8aa'; font-size: 16px; } &.disabled:before { color: var(--theme-color-text_link); } &:hover:before { color: var(--theme-color-text_hover); } &:after { display: none; } .post_meta_label { display: none; } } /* Share */ .post_item_single .post_meta_single .post_share { &:after { display: none; } .socials_share.socials_type_block .social_item { margin: 3px 0 3px 7px; &:first-child { margin-left: 0; } &:hover { .social_icon { @include transform(translateY(-5px)); } } .social_icon { font-size: 16px; position: relative; display:block; will-change: transform; @include transform(translateY(0px)); @include transition-all(0.3s); @include square(45px); letter-spacing: -1px; @include border-radius(50%); background-color: var(--theme-color-alter_bg_color) !important; color: var(--theme-color-text_dark) !important; &[class*="twitter"] { background-color: #48BDE9 !important; color: #fff !important; } &[class*="facebook"] { background-color: #4F5FBF !important; color: #fff !important; } &[class*="dribble"] { background-color: #EA4C89 !important; color: #fff !important; } &[class*="email"] { background-color: #7A7E83 !important; color: #fff !important; } .icon-twitter-new:before { position: relative; top: -1px; } } } } /* Single page Prev/Next navigation */ .nav-links-single { margin-top: 1.8em; padding-top: 3em; border-top: 1px solid var(--theme-color-bd_color); } .nav-links-single .nav-links { margin-top: 0; text-align: left; overflow:hidden; text-transform:none; a { display:block; } .nav-arrow-label { display: block; text-transform: uppercase; @include font(13px, 16px, 400); letter-spacing: 0.8px; } .nav-arrow-label:before, .nav-arrow-label:after { font-family: $theme_icons; display: inline-block; vertical-align: top; font-size: 9px; position: relative; top: 1px; font-weight: 400; right: 1px; } .nav-previous, .nav-next { width:50%; @include border-box; } .nav-previous { float:left; text-align:left; padding-right:15px; } .nav-previous .nav-arrow-label:before { content: '\e9e5'; margin-right: 10px; right: auto; left: 1px; } .nav-previous .post-title { text-align:left; } .nav-next { float:right; text-align:right; padding-left:15px; } .nav-next .nav-arrow-label:after { content: '\e9e6'; margin-left: 10px; } .nav-next .post-title { text-align:right; } .nav-arrow-label, .post-title, .post_date { @include transition-colors; } .post-title { margin: 12px 0 0; font-size: 19px; line-height: 1.5em; font-weight: 500; } .meta-nav, .post_date { display: block; font-size:12px; font-weight:normal; } .post_date { display: none; } .nav-arrow-label, .meta-nav, .post_date { color: var(--theme-color-text_light); } a:hover .post-title { color: var(--theme-color-text_dark); } } .nav-links-single.nav-links-with-thumbs .nav-links { a { position:relative; min-height: 6em; z-index:1; } a .nav-arrow { @include square(6em); overflow:hidden; text-align:center; @include abs-lt; @include bg-cover; } a .nav-arrow:before { content: ' '; display:block; background-color:#fff; opacity:0; @include abs-cover; @include transition-all; } a:hover .nav-arrow:before { opacity:0.5; } a .nav-arrow:after { content: '\e939'; font-family: $theme_icons; display:inline-block; position:relative; z-index:2; top: 3em; opacity:0; color: #292929; @include transition-all; } a:hover .nav-arrow:after { top: 0; opacity:1; } .nav-previous a { padding-left: 8.5em; } .nav-next a { padding-right: 8.5em; } .nav-next a .nav-arrow { right: 0; left: auto; } .nav-next a .nav-arrow:after { content: '\e93a'; } .post-title { margin:0.1em 0; } } .nav-links-single.nav-links-fixed { position: fixed; z-index: 10; bottom: 100px; left: 20px; right: 20px; opacity: 0; @include transition-property(opacity); margin-top: 0; padding-top: 0; border-top: none; } .menu_side_left .nav-links-single.nav-links-fixed { margin-left: var(--theme-var-menu_side); } .menu_side_right .nav-links-single.nav-links-fixed { margin-right: var(--theme-var-menu_side); } .nav-links-single.nav-links-fixed.nav-links-visible { opacity: 1; } .nav-links-single.nav-links-fixed .nav-links { padding: 0; margin: 0; border-width: 0; border-color: var(--theme-color-bd_color); } .nav-links-single.nav-links-fixed .nav-links .nav-previous, .nav-links-single.nav-links-fixed .nav-links .nav-next { @include abs-lb; width: 280px; padding: 15px; border: 1px solid var(--theme-color-bd_color); background-color: var(--theme-color-bg_color); @include transition-properties(left, right); } .nav-links-single.nav-links-fixed .nav-links .nav-previous { left: -300px; } .nav-links-single.nav-links-fixed.nav-links-visible .nav-links .nav-previous { left: 0; } .nav-links-single.nav-links-fixed .nav-links .nav-next { left: auto; right: -300px; } .nav-links-single.nav-links-fixed.nav-links-visible .nav-links .nav-next { right: 0; } .nav-links-single-scroll.frame_loading { min-height: 3em; margin-top: 4em; } .previous_post_content { margin-top: 6em; padding-top: 6em; border-top: 1px solid var(--theme-color-bd_color); } /* 8.3 Post author ------------------------------------------------------ */ .author_info { margin-top: 3em; padding: 40px; position:relative; background-color: var(--theme-color-alter_bg_color); .author_avatar { @include square(78px); @include abs-lt(30px, 30px); @include border-radius(0); overflow: hidden; } .author_avatar img { @include box(100%, auto); } .author_description { padding-left: 88px; } .author_label { text-transform: uppercase; @include font(13px, 18px, 400); letter-spacing: 0.8px; color: var(--theme-color-text_light); } .author_title { margin: 0 0 10px; font-size: 19px; line-height: 1.3em; font-weight: 500; a { display: inline; } } .author_bio { margin-top: 15px; p { font-size: 16px; margin:0; } p+p { margin-top:0.6em; } .author_links { margin-top: 15px; margin-bottom: -13px; @include flex; @include flex-direction(row); @include flex-justify-content(space-between); @include flex-align-items(center); } .socials_wrap { margin-top: 0; margin-left: -0.3em; line-height: 0; .social_item { margin: 0 20px 0 0; .social_icon { background-color: transparent !important; @include box(auto, auto, inherit); width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; font-size: 13px; } } } } } /* 8.4 Related posts ------------------------------------------------------ */ .related_wrap { margin-top: 5em; } .content_wrap > .related_position_below_page:first-child { margin-top: 0 !important; } .related_wrap { .slider_container:not(.slider_multi):not(.slider_type_images), .slider_container:not(.slider_multi):not(.slider_type_images) .slider-slide { min-height: 130px; } .sc_item_slider.slider_outer_controls_top > .slider_controls_wrap { top: -4.2em; } .slider_outer_controls_bottom > .slider_controls_wrap { margin-top: 2em; } } .post_content .related_wrap { margin: 2em 0 1em; padding: 0.02px 0; border-top: none; } .post_content .related_wrap_slider { margin-bottom: 1em; } .post_content .related_wrap.related_position_inside_left { float: left; margin: 1em 2em 1em 0; max-width: 18em; } .post_content .related_wrap.related_position_inside_right { float: right; margin: 1em 0 1em 2em; max-width: 18em; } .post_content .related_wrap.related_position_inside_left .slider_container:not(.slider_multi):not(.slider_type_images), .post_content .related_wrap.related_position_inside_left .slider_container:not(.slider_multi):not(.slider_type_images) .slider-slide, .post_content .related_wrap.related_position_inside_right .slider_container:not(.slider_multi):not(.slider_type_images), .post_content .related_wrap.related_position_inside_right .slider_container:not(.slider_multi):not(.slider_type_images) .slider-slide { min-height: 5em; } .related_wrap { .related_item { text-align:center; } .post_meta .post_meta_item { .post_sponsored_label { font-weight: 500; letter-spacing: 0.8px; font-size: 14px; color: var(--theme-color-text_link); background: none; @include border-radius(0); padding: 0; } a.post_sponsored_label:hover { background: none; color: var(--theme-color-text_dark); } } .post_categories { font-size: 14px; font-weight: 500; letter-spacing: 0.8px; ul { margin: 0; padding:0; list-style:none; display:inline-block; vertical-align: top; } li, > a { display:inline-block; vertical-align: top; margin: 0; color: var(--theme-color-text_dark); } li + li, > a + a { margin-left: 0; } } .post_meta_item.post_categories, .post_meta_item.post_categories a { color: var(--theme-color-text_dark); } .post_meta_item.post_categories a:hover { color: var(--theme-color-text_link); } .post_title { margin: 0; } .post_meta [class^="icon-"] { @include font(1.2em, inherit); margin-right: .3em; margin-left: 0; vertical-align: top; display: none; } } .post_content.post_info_vertical_present .related_wrap, .narrow_content .related_wrap { .post_featured { .post_title { font-size: 1.25em; } .post_descr { display: none; } } } /* Style 1: Modern */ .related_wrap.related_style_modern .post_featured { margin-bottom: 0; } .related_wrap.related_style_modern .post_featured .post_header { display:block; width: 70%; padding: 1.5em; @include abs-cc(8); @include border-box; @include transition-all; } .related_wrap.related_style_modern .format-audio .post_featured .post_header { display: none; } .related_wrap.related_style_modern .post_title { margin: 0.5em 0; letter-spacing:0; line-height:1.25em; } .related_wrap.related_style_modern .post_meta { @include flex-justify-content(center); } .related_wrap.related_style_modern .post_header { background-color: var(--theme-color-bg_color_08); } .related_wrap.related_style_modern .related_item:hover .post_header { background-color: var(--theme-color-bg_color); } .related_wrap.related_style_modern .post_meta a { color: var(--theme-color-text); } .related_wrap.related_style_modern .related_item:hover .post_meta a { color: var(--theme-color-text_light); } .related_wrap.related_style_modern .related_item:hover .post_meta a:hover { color: var(--theme-color-text_dark); } /* Style 2: Classic */ .related_wrap.team_page_related, .related_wrap.related_style_classic { text-align: left; .related_item { text-align: left; } .post_title { font-size: 24px; line-height: 1.2em; font-weight: 500; a:hover, a { color: var(--theme-color-text_dark); } } /* slider */ .slider_container .swiper-pagination, .slider_outer .swiper-pagination { display: none; } .slider_container.slider_controls_side .slider_controls_wrap > a, .slider_outer_controls_side .slider_controls_wrap > a, .slider_container.slider_controls_side:hover .slider_controls_wrap > a, .slider_outer_controls_side:hover .slider_controls_wrap > a { opacity: 1; &.slider_prev { margin-left: 20px; } &.slider_next { margin-right: 20px; } } } .related_wrap.related_style_classic .related_item:not(.format-image):not(.format-gallery):not(.format-audio):not(.format-video):not(.has-post-thumbnail) { margin-top: -6px; } .related_wrap.related_style_classic .post_featured { margin-bottom: 1em; } .related_wrap.related_style_classic .post_featured[class*="hover_"] { display: inline-block; vertical-align: top; } .related_wrap.related_style_classic .post_featured img { max-width:100%; height: auto; } .related_wrap.related_style_classic .post_meta { text-transform: uppercase; margin-top: 0; margin-bottom: 0.85em; } .team_page_related, .related_wrap.related_style_classic { .trx_addons_video_player.with_cover .video_hover, .post_featured.with_thumb .post_video_hover, .sc_layouts_blog_item_featured .post_featured.with_thumb .post_video_hover { font-size: 14px; width: 50px; height: 50px; line-height: 51px; margin: -25px 0 0 -25px; letter-spacing: -4px; } .format-video { .mejs-time.mejs-currenttime-container, .mejs-time.mejs-duration-container { display: none; } } /* audio */ .format-audio .post_featured.without_thumb .post_audio:not(.with_iframe), .single-format-audio .post_featured.without_thumb .post_audio:not(.with_iframe), .sc_layouts_blog_item_featured .post_featured.without_thumb .post_audio:not(.with_iframe) { padding: 1em; } .format-audio .post_featured .post_audio_title, .single-format-audio .post_featured .post_audio_title { font-size: 18px; margin-top: 0.3em; margin-bottom: 0.1em; } .format-audio { .mejs-time.mejs-currenttime-container, .mejs-time.mejs-duration-container { display: none; } div.mejs-controls .mejs-time-rail { margin: 0 12px; } div.mejs-controls .mejs-horizontal-volume-slider { margin-left: 8px; } .mejs-container:not(.mejs-video) { height: 50px !important; } .mejs-controls { height: 50px; padding: 5px 0; } div.mejs-controls .mejs-time.mejs-duration-container { margin-right: 8px; } div.mejs-controls .mejs-time.mejs-currenttime-container { margin-left: 8px; } } } /* Style 3: Wide */ .related_wrap.related_style_wide .related_item { @include flex; @include flex-direction(row); @include flex-justify-content(flex-start); @include flex-align-items(flex-start); text-align: left; .post_featured { margin: 0 1em 0 0; width: 6em; &[class*="hover_"] { display: block; } img { width:100%; } } .post_title { margin: -0.25em 0 0; } &.format-video, &.format-audio, &.format-gallery { @include flex-direction(column); .post_featured { margin: 0 0 1em 0; width: 100%; } } } .post_content .related_wrap.related_style_wide .columns_wrap.columns_padding_bottom > [class*="column-"], .post_content .related_wrap.related_style_wide .columns_wrap > [class*="column-"].columns_padding_bottom { padding-bottom: 1em; } /* Style 4: List */ .related_wrap.related_style_list .related_item { text-align: left; padding: 0 0 0 1.5em; position: relative; } .related_wrap.related_style_list .related_item:before { content: ' '; @include abs-lt(0, 0.75em); @include square(6px); @include border-round; background-color: var(--theme-color-text_link); } .post_content .related_wrap.related_style_list .columns_wrap.columns_padding_bottom > [class*="column-"], .post_content .related_wrap.related_style_list .columns_wrap > [class*="column-"].columns_padding_bottom { padding-bottom: 1em; } /* Style 5: Short */ .related_wrap.related_style_short .related_item { text-align: left; padding-bottom: 1em; border-bottom: 1px solid #c1c1c1; margin-bottom: 1em; } .related_wrap .related_wrap_slider .related_item_style_short.related_item { border-bottom: none; } .related_wrap.related_style_short .columns_wrap .column-1_4:last-child .related_item, .related_wrap.related_style_short .columns_wrap .column-1_4:nth-last-child(2) .related_item, .related_wrap.related_style_short .columns_wrap .column-1_4:nth-last-child(3) .related_item, .related_wrap.related_style_short .columns_wrap .column-1_4:nth-last-child(4) .related_item, .related_wrap.related_style_short .columns_wrap .column-1_3:last-child .related_item, .related_wrap.related_style_short .columns_wrap .column-1_3:nth-last-child(2) .related_item, .related_wrap.related_style_short .columns_wrap .column-1_3:nth-last-child(3) .related_item, .related_wrap.related_style_short .columns_wrap .column-1_2:last-child .related_item, .related_wrap.related_style_short .columns_wrap .column-1_2:nth-last-child(2) .related_item, .related_wrap.related_style_short .columns_wrap .column-1_1:last-child .related_item { border-bottom: none; } .post_content .related_wrap.related_style_short .columns_wrap.columns_padding_bottom > [class*="column-"], .post_content .related_wrap.related_style_short .columns_wrap > [class*="column-"].columns_padding_bottom { padding-bottom: 1em; } /* 8.5 Comments -------------------------------------------------------- */ /* Contact form */ .page_contact_form { border-color: var(--theme-color-bd_color); } /* Comments */ .body_style_fullscreen .comments_wrap { margin-bottom: 3em; } .comments_wrap { display:none; &.opened { display: block; } } /* Show comments button in full post */ .show_comments_single { text-align: center; margin-top: 5em; .full_post_content & { width: 100%; } .show_comments_button { display: block; padding: 1.2em; @include border-box; border: 2px solid var(--theme-color-text_dark); color: var(--theme-color-text_dark); text-transform: none; @include font(16px, 21px, 500); letter-spacing: 0; } .show_comments_button:after { content: '\e828'; font-family: $theme_icons; display: inline-block; vertical-align: top; margin-left: 1em; } .show_comments_button.opened:after { content: '\e835'; } .show_comments_button:hover, .show_comments_button:focus { color: var(--theme-color-text_hover); border-color: var(--theme-color-text_hover); } } /* Comment list */ .comments_list_wrap { margin-top: 5em; overflow:hidden; } .comments_list_wrap .comments_closed { margin-top:2em; color: var(--theme-color-text_dark); } .comments_list_wrap > ul { padding: 0; margin:0; list-style: none; } .comments_list_wrap ul > li { display: block; // If set to 'list-item' - in Chrome author's name is shifting down (below the top of the avatar). In Firefox - all OK overflow:visible; position:relative; min-height: 100px; } .comments_list_wrap ul > li:before { display:none; } .comments_list_wrap ul ul.children { padding-left: 100px; } .comments_list_wrap ul ul ul.children { padding-left: 50px; } .comments_list_wrap ul ul ul ul ul { padding-left: 0; border-left: none; } body.narrow_content .comments_list_wrap ul ul ul ul { padding-left: 0; } .comments_list_wrap li + li, .comments_list_wrap li ul { margin-top: 35px; } .comments_list_wrap .comment_author_avatar { @include abs-lt; @include square(78px); @include border-radius(0); overflow:hidden; } .comments_list_wrap .comment_author_avatar img { width: 100%; } .comments_list_wrap .comment_content { padding-left: 100px; overflow:hidden; } .comments_list_wrap .comment_info { margin-bottom: 0.8em; margin-top: 0.3em; position:relative; color: var(--theme-color-text_dark); } .comments_list_wrap .bypostauthor .comment_bypostauthor { padding: 0.1em 1em; @include border-radius(0); border: 1px solid var(--theme-color-text_dark); color: var(--theme-color-text_dark); display: inline-block; vertical-align: middle; margin: 0 10px 0 0; @include font(13px, 19px, normal); } .comments_list_wrap .bypostauthor > .comment_body .comment_author_avatar:after { will-change: transform; } .comments_list_wrap .comment_author { margin: -2px 10px 0 0; font-size: 18px; line-height: 23px; font-weight: 500; display: inline-block; vertical-align: middle; } .comments_list_wrap .comment_posted { display: inline-block; position:relative; letter-spacing:0; margin-bottom: 0; vertical-align: middle; color: var(--theme-color-alter_text); font-size: 14px; line-height: 20px; font-weight: 400; } .comments_list_wrap .comment_posted_label { display:none; } .comments_list_wrap .comment_date, .comments_list_wrap .comment_time, .comments_list_wrap .comment_time_label { display:inline-block; vertical-align:baseline; margin-right:0.2em; } .comments_list_wrap .comment_not_approved { padding: 0.2em 0 0.5em 0; font-style:italic; } .comments_list_wrap .trx_addons_reviews_text { font-weight: bold; } .comments_list_wrap .comment_text { margin-bottom: 0.6em; color: var(--theme-color-text); } .comments_list_wrap .comment_text p { font-size: 16px; margin:0; } .comments_list_wrap .comment_text p+p { margin-top: 0.6em; } .comments_list_wrap .comment_text ul, .comments_list_wrap .comment_text ol { margin:0; padding: 0 0 0 1.5em; } .comments_list_wrap .comment_text ul > li, .comments_list_wrap .comment_text ol > li { display: list-item; } .comments_list_wrap .comment_text ul { list-style: disc outside; } .comments_list_wrap .comment_text ul ul { list-style-type: circle; } .comments_list_wrap .comment_text ul ul ul { list-style-type: square; } .comments_list_wrap .comment_text ul ul ul ul { list-style-type: disc; } .comments_list_wrap .comment_text ol { list-style: decimal outside; } .comments_list_wrap .comment_text ol ol { list-style-type: lower-alpha; } .comments_list_wrap .comment_text ol ol ol { list-style-type: upper-roman; } .comments_list_wrap .comment_text ul > li > ul, .comments_list_wrap .comment_text ol > li > ol { margin-top: 0.5em; } .comments_list_wrap .comment_text ul > li, .comments_list_wrap .comment_text ol > li { min-height:0; padding:0; margin:0 0 0.5em 0; overflow:visible; } .comments_list_wrap .comment_text ul, .comments_list_wrap .comment_text ul > li, .comments_list_wrap .comment_text ol, .comments_list_wrap .comment_text ol > li { border:none; } .comments_list_wrap .comment_text blockquote > a, .comments_list_wrap .comment_text blockquote > p > a { padding-left: 0; margin-top: 0; } .comments_list_wrap .comment_counters { display: none; vertical-align:middle; margin-right: 1em; } .comments_list_wrap .comment_counters_item:before { margin: 0 0.3em 0 0; font-style: normal; } .comments_list_wrap .comment_counters .comment_counters_label { display: none; } .comments_list_wrap .comment_counters_item .comment_counters_number_separator { margin: 0 0.2em; } .comments_list_wrap .comment_reply { display:inline-block; vertical-align:middle; @include font(16px, 19px, 500); } .comments_list_wrap .comment_reply a:after { content:'\e9df'; font-family:$theme_icons; font-weight: 400; font-size: 9px; display: inline-block; vertical-align: middle; margin-left: 10px; } .comments_list_wrap .comment_footer a { color: var(--theme-color-text_dark); } .comments_list_wrap .comment_footer a:hover { color: var(--theme-color-text_hover); } .comments_wrap .comments_notes { color: var(--theme-color-text_light); } /* Trackbacks and pingbacks */ .comments_list > li.pingback, .comments_list > li.trackback { list-style:none; margin-left:0; padding-left:0; padding-right:4em; padding-top: 1em; min-height: 0; position:relative; } .comments_list > li.pingback + li, .comments_list > li.trackback + li { margin-top: 1em; } .comments_list > li.pingback p, .comments_list > li.trackback p { font-style:italic; padding-bottom:0.8em; } .comments_list > li.pingback p a, .comments_list > li.trackback p a { font-style:normal; } .comments_list > li.pingback .edit-link, .comments_list > li.trackback .edit-link { @include abs-rt(0, 1em); } /* Comments form */ .section_title.comments_form_title { margin-bottom: 0.5em; } .comment-form p[style*="font-size"] { margin: 0 !important; } .comments_form_wrap { margin-top: 5em; overflow: visible; .wpgdprc-checkbox { margin-bottom: 10px; } } .comments_form_wrap form { position:relative; } .comments_wrap .comments_list_wrap .comments_form_title { margin-top: 1.5em; position:relative; padding-right: 2rem; font-size: 1.5em; } .comments_wrap .comments_notes { font-size:0.8667em; } .comments_wrap .comments_field { margin-bottom: 2em; &.comments_i_agree_privacy_policy input[type="checkbox"] + label { display: inline-block; } } .comments_wrap .comments_author, .comments_wrap .comments_email { width: 48%; float:left; } .comments_wrap .comments_email { float:right; } .comments_wrap .comments_url { clear:both; } .comments_wrap .comments_comment:before { content: ' '; @include clear; } .comments_wrap .comments_field label { display:none; } .comments_wrap .comments_field input[type="checkbox"] + label, .comments_wrap .comments_field input[type="radio"] + label { display: block; } .comments_wrap .comments_field input, .comments_wrap .comments_field textarea { width:100%; padding: 0.6em 0; @include box-shadow(0 15px 15px -14px rgba(0, 0, 0, 0.015)); } .comments_wrap .comments_field textarea { min-height: 6.2em; } /* Submit button */ .comments_wrap .form-submit { margin: 2.3em 0 0; position: relative; } .comments_wrap .form-submit:before { content: ''; @include clear; } .comments_wrap .form-submit input[type="submit"] { display:inline-block; padding: 16px 40px 17px; @include box-shadow(none); } form .error_field { border-color: #F22F2F !important; } /* Rating in the comment form */ .comments_wrap .trx_addons_reviews_mark { display: block; } .comments_wrap form .trx_addons_reviews_mark { margin: -0.5em 0 1em; } /* Social login in the comment form */ .comments_form_wrap form .wp-social-login-widget { @include abs-rt(0, -6.2em); } .comments_form_wrap form .wp-social-login-widget .wp-social-login-connect-with { display:none; } .comments_form_wrap form .wp-social-login-widget .wp-social-login-provider-list { padding:0; } /* 8.6 Page 404 -------------------------------------------------------------- */ .post_item_404 .post_content { padding: 10.5em 0 11.5em; overflow:hidden; } .post_item_404 .page_title { float: none; width: 100%; @include font(270px, 1em); margin: 0; margin-top:0 !important; letter-spacing:0; text-align: center; hyphens: none; color: var(--theme-color-text_dark); position: relative; z-index: 2; } .post_item_404 .page_info { float: none; width: 100%; text-align: center; padding: 0; @include border-box; position: relative; z-index: 2; } .post_item_404 .page_subtitle { margin: 20px 0 0; font-size: 47px; line-height: 1.1em; } .post_item_404 .page_description { font-size: 19px; margin-top: 17px; margin-bottom: 43px; font-weight: 400; text-transform:none; letter-spacing: 0; color: var(--theme-color-text); } .post_item_404 .go_home { @include box-shadow(none); } .search-no-results .page_content_wrap, .error404 .page_content_wrap { padding: 0 !important; background-color: var(--theme-color-bg_color); } /* Anim Parallax */ .post_item_404 .post_content { position: relative; .all-svg { left: 0; position: absolute; top: 0; width: 100%; height: 100%; z-index: 1; .svg-1 { display: block; width: 95px; height: 95px; z-index: 20; left: 40%; position: absolute; top: 15%; svg { width: 100%; height: 100%; fill: #E1D0C6; opacity: 1; } } .svg-2 { left: 38%; position: absolute; bottom: 14%; width: 140px; height: 140px; z-index: 10; svg { width: 100%; height: 100%; fill: transparent; stroke: #F4F0ED; stroke-width: 12px; opacity: 0.4; } } .svg-3 { right: 23%; position: absolute; top: 24%; width: 60px; height: 60px; z-index: 10; svg { width: 100%; height: 100%; fill: var(--theme-color-text_link2); opacity: 1; } } .svg-4 { left: 23%; position: absolute; top: 47%; width: 36px; height: 36px; z-index: 10; svg { width: 100%; height: 100%; fill: var(--theme-color-text_link); opacity: 1; } } } } /* 8.7 Page 'No search results' and 'No archive results' -------------------------------------------------------- */ .search-no-results.woocommerce-page .content, .post_item_none_search .post_content { padding: 6em 0; } .post_item_none_search .page_title, .post_item_none_archive .page_title { font-size: 7em; line-height:1.2em; } .post_item_none_search { .page_info { width: 70%; margin: 0 auto; .page_subtitle { margin: 0; font-size: 57px; line-height: 1em; } .page_description { margin-top: 39px; margin-bottom: 43px; padding: 0 17%; } } } /* 8.8 Author's page ------------------------------------------------------ */ .author_page { @include flex; @include flex-direction(column); @include flex-align-items(center); margin-bottom: 6em; .author_avatar { @include border-round; margin-bottom:1em; overflow: hidden; } .author_title { margin-top: 0; margin-bottom:0.5em; } .author_bio { text-align: center; margin-bottom:1em; } .author_bio p { margin:0; } .author_bio p+p { margin-top:0.6em; } .author_details { text-align: center; .author_posts_total, .author_socials { display: inline-block; vertical-align: top; text-transform: capitalize; } .author_posts_total_value { font-weight: bold; color: var(--theme-color-text_dark); } .author_posts_total + .author_socials { &:before { content: '|'; display: inline-block; vertical-align: baseline; margin: 0 1em; } .socials_wrap { display: inline-block; vertical-align: baseline; margin-left: 0.75em; .social_item { margin: 0 0.75em 0 0; .social_icon { font-size: 17px; padding: 0 1px; background-color: transparent; @include box(auto, auto, inherit); text-align: left; @include border-radius(0); } } } } } } /* 9. Sidebars -------------------------------------------------------------- */ /* Common rules */ .sidebar_default[class*="scheme_"] .sidebar_inner { padding: 4.1em 0; background-color: var(--theme-color-alter_bg_color); color: var(--theme-color-alter_text); } .sidebar_default[class*="scheme_"] .widget { padding: 0 40px; } .sidebar_default[class*="scheme_"] .widget .widget { padding: 0; } .sidebar .widget + .widget, .sidebar_default[class*="scheme_"] .widget + .widget { margin-top: 2.4rem; } .sidebar .widget + .widget.widget_bg_image, .sidebar_default[class*="scheme_"] .widget + .widget.widget_bg_image, .sidebar .widget + .widget.widget_fullwidth, .sidebar_default[class*="scheme_"] .widget + .widget.widget_fullwidth { border-top: none; padding-top: 4rem; padding-bottom: 4rem; } .sidebar .widget.widget_bg_image + .widget, .sidebar_default[class*="scheme_"] .widget.widget_bg_image + .widget, .sidebar .widget.widget_fullwidth + .widget, .sidebar_default[class*="scheme_"] .widget.widget_fullwidth + .widget { border-top: none; } [class*="scheme_"].sidebar a { color: var(--theme-color-alter_link); } [class*="scheme_"].sidebar a:hover { color: var(--theme-color-alter_hover); } [class*="scheme_"].sidebar h1, [class*="scheme_"].sidebar h2, [class*="scheme_"].sidebar h3, [class*="scheme_"].sidebar h4, [class*="scheme_"].sidebar h5, [class*="scheme_"].sidebar h6, [class*="scheme_"].sidebar h1 a, [class*="scheme_"].sidebar h2 a, [class*="scheme_"].sidebar h3 a, [class*="scheme_"].sidebar h4 a, [class*="scheme_"].sidebar h5 a, [class*="scheme_"].sidebar h6 a { color: var(--theme-color-alter_dark); } [class*="scheme_"].sidebar h1 a:hover, [class*="scheme_"].sidebar h2 a:hover, [class*="scheme_"].sidebar h3 a:hover, [class*="scheme_"].sidebar h4 a:hover, [class*="scheme_"].sidebar h5 a:hover, [class*="scheme_"].sidebar h6 a:hover { color: var(--theme-color-alter_link); } .widget p { margin:0; } .widget p+p, .widget p+div, .widget p+form { margin-top:1em; } .widget .widget_title, .widget .widgettitle { margin-bottom: 1.3em; @include font(19px, 1.3em, 500); letter-spacing: 0; margin-top: -7px; } .widget_fullwidth .widget_title, .widget_fullwidth .widgettitle { text-align:center; } .widget ol, .widget ul { margin:0; padding-left:1.2em; list-style-type:none; ul { margin-top: 10px; } li + li { margin-top: 10px; } } ul[class*="wp-block-"], ol[class*="wp-block-"] { margin-bottom: 0; } ul.wp-block-archives-list, ul.wp-block-categories-list, ul.wp-block-rss { padding-left: 1.5em; list-style-type: none; } .widget ol, .widget ul, ul.wp-block-archives-list, ul.wp-block-categories-list, ul.wp-block-rss { > li { position:relative; a:first-child:before { content: ' '; display:block; @include square(6px); @include border-radius(50%); @include abs-lt(-1.1em, 0.75em); @include transition-all(0.3s); background-color: var(--theme-color-text_dark); } a:first-child:hover:before { background-color: var(--theme-color-text_link); } } } .wp-block-latest-comments__comment { line-height: inherit; list-style: none; margin-bottom: 0; } .wp-block-latest-comments, .widget_recent_comments ul { > li { position:relative; &:before { content: ' '; display:block; @include square(6px); @include border-radius(50%); @include abs-lt(-1.1em, 0.75em); @include transition-all(0.3s); background-color: var(--theme-color-text_dark); } a:before { display: none !important; } } } .wp-block-latest-comments__comment-excerpt p { font-size: 1em; line-height: inherit; } .wp-block-latest-comments__comment-date { font-size: 0.9em; color: var(--theme-color-text_light); } .wp-block-latest-comments.has-avatars { padding-left: 0; > li:before { display: none; } } .widget li a img { vertical-align:baseline; } .widget li a > img, .widget li span > img { @include border-radius(50%); } [class*="scheme_"].sidebar li > a, [class*="scheme_"].sidebar .post_title > a { color: var(--theme-color-alter_dark); } [class*="scheme_"].sidebar li > a:hover, [class*="scheme_"].sidebar .post_title > a:hover { color: var(--theme-color-alter_link); } /* Images in widgets */ .widget_area .post_item .post_thumb img, aside .post_item .post_thumb img { @include border-radius(0); } .widget_area .post_item, aside .post_item { @include flex; flex-direction: row; align-items: center; } .widget_area .post_item .post_thumb, aside .post_item .post_thumb { width: 100px; height: 100px; margin: 0 25px 0 0; flex: 100px 0 0; } /* Info in widgets */ .widget_area .post_item .post_categories, aside .post_item .post_categories { display: inline; font-size: inherit; line-height: inherit; font-weight: inherit; margin-top: 0; margin-bottom: 0; position: relative; padding-right: 0; text-transform: inherit; } .widget_area .post_item .post_categories { font-weight: 500; } .post_info_item.post_info_counters .post_meta { font-size: inherit; font-weight: inherit; font-style: normal; line-height: inherit; text-decoration: none; text-transform: none; letter-spacing: 0; margin-top: 0; display: inherit; } .widget_area .post_item .post_info, aside .post_item .post_info { font-size: 14px; line-height: 17px; + .post_title { margin-top: 8px; } } .widget_area .post_item .post_info .post_info_item + .post_info_item:before, aside .post_item .post_info .post_info_item + .post_info_item:before { display: table-caption; margin: 0; } .widget_area .post_item .post_title, aside .post_item .post_title { margin: 0; text-align: left; line-height: 1.45em; font-weight: 500; } /* Posts in widgets */ [class*="scheme_"].sidebar .post_meta, [class*="scheme_"].sidebar .post_meta_item, [class*="scheme_"].sidebar .post_meta_item:after, [class*="scheme_"].sidebar .post_meta_item:hover:after, [class*="scheme_"].sidebar .post_meta .vc_inline-link, [class*="scheme_"].sidebar .post_meta .vc_inline-link:after, [class*="scheme_"].sidebar .post_meta .vc_inline-link:hover:after, [class*="scheme_"].sidebar .post_meta_item a, [class*="scheme_"].sidebar .post_info .post_info_item, [class*="scheme_"].sidebar .post_info .post_info_item a, [class*="scheme_"].sidebar .post_info_counters .post_meta_item { color: var(--theme-color-alter_light); } [class*="scheme_"].sidebar .post_info_item.post_categories a { color: var(--theme-color-alter_dark); } [class*="scheme_"].sidebar .post_date a:hover, [class*="scheme_"].sidebar a.post_meta_item:hover, [class*="scheme_"].sidebar .post_meta_item a:hover, [class*="scheme_"].sidebar .post_meta .vc_inline-link:hover, [class*="scheme_"].sidebar .post_info .post_info_item a:hover, [class*="scheme_"].sidebar .post_info_counters .post_meta_item:hover { color: var(--theme-color-alter_dark); } [class*="scheme_"].sidebar .post_info_item.post_categories a:hover { color: var(--theme-color-alter_link); } [class*="scheme_"].sidebar .post_item .post_title a:hover { color: var(--theme-color-alter_text); } [class*="scheme_"].sidebar .post_meta_item.post_categories, [class*="scheme_"].sidebar .post_meta_item.post_categories a { color: var(--theme-color-alter_link); } [class*="scheme_"].sidebar .post_meta_item.post_categories a:hover { color: var(--theme-color-alter_hover); } [class*="scheme_"].sidebar .socials_share.socials_type_drop .social_items { background-color: var(--theme-color-alter_bg_color); } [class*="scheme_"].sidebar .socials_share.socials_type_drop .social_items, [class*="scheme_"].sidebar .socials_share.socials_type_drop .social_items:before { background-color: var(--theme-color-alter_bg_color); border-color: var(--theme-color-alter_bd_color); color: var(--theme-color-alter_light); } /* Widgets above and below the page (content and sidebar) */ .widgets_above_page_wrap, .widgets_above_content_wrap { font-size:1em; margin-bottom:5em; } .widgets_below_content_wrap, .widgets_below_page_wrap { font-size:1em; margin-top:5em; } .widgets_below_page_wrap { clear:both; } /* Widget: Latest Posts */ .wp-block-latest-posts.wp-block-latest-posts__list { padding-left: 0; &:not(.is-grid) li + li { margin-top: 1em; } li a:first-child:before { display: none; } img { @include border-radius(0 !important); } .wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date { color: var(--theme-color-text_light); font-size: 0.9em; line-height: 1.55em; } .wp-block-latest-posts__post-excerpt { margin: 3px 0 0 0; } .wp-block-latest-posts__featured-image { margin-bottom: 0.5em !important; } .alignleft { margin-right: 1em !important; } .alignright { margin-left: 1em !important; } } /* Widget: Archive */ .widget_archive li, .wp-block-archives li { color: var(--theme-color-text_dark); } [class*="scheme_"].footer_wrap .widget_archive li, [class*="scheme_"].sidebar .widget_archive li { color: var(--theme-color-alter_dark); } /* Widget: Calendar */ .widget_calendar, .wp-block-calendar { a { text-decoration: none; } table { width: 100%; position: relative; } caption { padding-bottom: 0.8em; font-weight: 500; } table > thead > tr { background-color: transparent !important; } caption, tbody td a, th { color: var(--theme-color-text_dark); } [class*="scheme_"].sidebar & { caption, tbody td a, th { color: var(--theme-color-alter_dark); } } th, td { @include font(1em !important, 1.7em, 400 !important, normal); text-align: center; text-transform: capitalize; padding: 2px; border: none !important; background-color: transparent !important; width: 14.2857%; @include border-box; } th { font-weight: 500 !important; } td { line-height:2em; padding:0; } tbody td { color: var(--theme-color-text) !important; } [class*="scheme_"].sidebar & { tbody td { color: var(--theme-color-alter_text) !important; } } tbody td a { display:block; position:relative; font-weight:400; @include border-box; } tbody td a:hover { color: var(--theme-color-text_link); } [class*="scheme_"].sidebar & { tbody td a:hover { color: var(--theme-color-alter_link); } } tbody td a:after { content: ' '; @include abs-cb(4px); @include square(3px); @include transition-bg-color; background-color: var(--theme-color-text_link); } [class*="scheme_"].sidebar & { tbody td a:after { background-color: var(--theme-color-alter_link); } } td#today { position:relative; z-index:2; color: var(--theme-color-inverse_link) !important; } td#today a { color: var(--theme-color-inverse_link); } td#today a:hover { color: var(--theme-color-inverse_hover); opacity: 0.8; } td#today:before { content:' '; @include abs-cc(-1); @include square(1.9em); background-color: var(--theme-color-text_link); } [class*="scheme_"].sidebar & { td#today:before { background-color: var(--theme-color-alter_link); } } td#today a:after { background-color: var(--theme-color-inverse_link); } td#today a:hover:after { background-color: var(--theme-color-inverse_hover); } tfoot { position:relative; top: 0.6em; } tfoot td { text-transform: none !important; } .wp-calendar-nav { @include flex; @include flex-direction(row); @include flex-justify-content(space-between); } td#prev, .wp-calendar-nav-prev { text-align:left; overflow:hidden; } td#next, .wp-calendar-nav-next { text-align:right; overflow:hidden; } td#prev a, td#next a, .wp-calendar-nav a { position:relative; color: var(--theme-color-text_link); } [class*="scheme_"].sidebar & { #prev a, #next a, .wp-calendar-nav a { color: var(--theme-color-alter_link); } } #prev a:hover, #prev a:focus, #next a:hover, #next a:focus, .wp-calendar-nav a:hover, .wp-calendar-nav a:focus { color: var(--theme-color-text_hover); } [class*="scheme_"].sidebar & { #prev a:hover, #prev a:focus, #next a:hover, #next a:focus, .wp-calendar-nav a:hover, .wp-calendar-nav a:focus { color: var(--theme-color-alter_hover); } } td#prev a, .wp-calendar-nav-prev a { padding-left: 0.6em; } td#next a, .wp-calendar-nav-next a { padding-right: 0.6em; } td#prev a:before, td#next a:before, .wp-calendar-nav a:before { @include abs-lt(5px, 4px); @include box(1em, 1em, 1em); display:inline-block; text-align: center; background-color: var(--theme-color-bg_color); } [class*="scheme_"].sidebar &, [class*="scheme_"].footer_wrap & { td#prev a, td#next a, .wp-calendar-nav a { color: var(--theme-color-text_link); &:hover { color: var(--theme-color-text_hover); } } } [class*="scheme_"].sidebar &, [class*="scheme_"].footer_wrap & { td#prev a:before, td#next a:before, .wp-calendar-nav a:before { background-color: var(--theme-color-alter_bg_color); } } td#prev a:before, .wp-calendar-nav-prev a:before { content: '\E837'; font-family:$theme_icons; } td#next a:before, .wp-calendar-nav-next a:before { content: '\E836'; font-family:$theme_icons; left: auto; right: 5px; } } .wp-block-calendar table caption, .wp-block-calendar table tbody { color: var(--theme-color-text_dark); } /* Widget: Categories */ .widget_product_categories li, .widget_categories li { color: var(--theme-color-text_dark); } [class*="scheme_"].sidebar .widget_product_categories li, [class*="scheme_"].sidebar .widget_categories li { color: var(--theme-color-alter_dark); } /* Widget: Recent Posts */ .widget_recent_entries .post-date { display: inline-block; margin-left: 0.5em; color: var(--theme-color-text_light); } [class*="scheme_"].widget_recent_entries .post-date { color: var(--theme-color-alter_light); } /* Widgets: WP Search, WooCommerce Products Search and bbPress Forums Search */ .wc-block-product-search .wc-block-product-search__fields, .widget_search form.search-form, .woocommerce.widget_product_search form, .widget_display_search form, #bbpress-forums #bbp-search-form { width: 100%; overflow: hidden; position: relative; padding-bottom: 1px; } .wc-block-product-search input.wc-block-product-search__field { line-height: 1.5em; } .wc-block-product-search .wc-block-product-search__label { margin-bottom: 8px; display: inline-block; } .wc-block-product-search .wc-block-product-search__fields:after, .widget_search form.search-form:after, .woocommerce.widget_product_search form:after, .widget_display_search form:after, #bbpress-forums #bbp-search-form:after { content: '\e9b6'; font-family: $theme_icons; display: block; @include abs-lt(1.1em, 50%, 0); margin-top: -0.45em; @include square(1em); pointer-events: none; cursor: pointer; @include transition-all; color: var(--theme-color-input_text); } .wc-block-product-search .wc-block-product-search__fields:hover:after, .widget_search form.search-form:hover:after, .woocommerce.widget_product_search form:hover:after, .widget_display_search form:hover:after, #bbpress-forums #bbp-search-form:hover:after { color: var(--theme-color-input_dark); } .wc-block-product-search input.wc-block-product-search__field, .widget_search .search-field, .woocommerce.widget_product_search .search_field, .widget_display_search #bbp_search, #bbpress-forums #bbp-search-form #bbp_search { width:100%; padding: 0.77em 1.2em; padding-left: 3em !important; @include border-box; @include border-radius(0); background-color: transparent !important; border-width: 1px; border-style: solid; margin-top: 1px; } .wc-block-product-search button.wc-block-product-search__button, .widget_search input.search-submit, .woocommerce.widget_product_search .search_button, .widget_display_search #bbp_search_submit, #bbpress-forums #bbp-search-form #bbp_search_submit { display: block; text-indent: -1000px; @include abs-lt; @include box(3em, 100% !important); padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; cursor: pointer; @include box-shadow(none !important); } /* WP Search */ .wp-block-search { .wp-block-search__label { margin-bottom: 8px; display: inline-block; } input.wp-block-search__input { max-height: 50px; padding: 0.75em 1.2em; border-width: 1px; border-style: solid; @include border-radius(0); border-color: var(--theme-color-input_bd_color); &:focus { @include theme_field_colors_hover; } } button.wp-block-search__button { padding: 5px 20px 6px !important; border: none; color: var(--theme-color-inverse_link); background-color: var(--theme-color-text_link); &:hover { color: var(--theme-color-inverse_link); background-color: var(--theme-color-text_hover); } &.has-icon { fill: var(--theme-color-inverse_link); padding: 0 !important; margin-left: 5px; overflow: hidden; width: 50px; min-width: 50px; height: 50px; line-height: 50px; text-align: center; justify-content: center; #search-icon { display: inline-block; } } } &.wp-block-search__button-inside { .wp-block-search__inside-wrapper { border-color: var(--theme-color-input_bd_color); @include border-radius(0); } .wp-block-search__inside-wrapper input.wp-block-search__input { border-radius: 0; border: none; padding: 0 0 0 1em; min-height: 42px; } .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon { width: 42px; min-width: 42px; height: 42px; line-height: 42px; margin-left: 1em; } } } /* Widget: RSS */ .wp-block-rss, .widget_rss { .widget_title { a { display:inline-block; margin-right:6px; } a:first-child:before { content:'\e8ed'; font-family:$theme_icons; display: inline-block; font-size:0.9em; } a:first-child { color: var(--theme-color-text_link); } a:first-child:hover { color: var(--theme-color-text_hover); } img { display:none; } } .wp-block-rss__item-author, .wp-block-rss__item-publish-date { color: inherit; font-size: 1em; } .wp-block-rss__item-publish-date, .rss-date { color: var(--theme-color-text_light); } ul > li:before { display:none; } li + li { margin-top: 1em; } } [class*="scheme_"].sidebar .widget_rss { .wp-block-rss__item-publish-date, .rss-date { color: var(--theme-color-alter_light); } a { color: var(--theme-color-alter_dark); } a:hover { color: var(--theme-color-alter_link); } .widget_title { a:first-child { color: var(--theme-color-alter_link); } a:first-child:hover { color: var(--theme-color-alter_hover); } } } /* Widget WP Block Socials */ .widget ul.wp-block-social-links { padding-left: 0; li + li { margin-top: 0; } > li a:first-child:before { display: none; } } /* Widgets: WP Tag Cloud and WooCommerce Tag Cloud */ .wp-block-tag-cloud, .widget_product_tag_cloud, .widget_tag_cloud { overflow:visible; letter-spacing: -5px; } .wp-block-tag-cloud a, .sc_edd_details .downloads_page_tags .downloads_page_data > a, .widget_product_tag_cloud a, .widget_tag_cloud a { border: 1px solid var(--theme-color-bd_color); color: var(--theme-color-text); display: inline-block; float: none; @include font(13px !important, 17px, 400); letter-spacing: 0; margin: 0 5px 5px 0; @include border-radius(0); padding: 7px 18px 9px; text-transform: none; background-color: var(--theme-color-bg_color); &:hover { color: var(--theme-color-text_link) !important; } } [class*="scheme_"].footer_wrap, [class*="scheme_"].sidebar { .wp-block-tag-cloud a, .sc_edd_details .downloads_page_tags .downloads_page_data > a, .widget_product_tag_cloud a, .widget_tag_cloud a { color: var(--theme-color-alter_text); border-color: var(--theme-color-alter_bd_color); background-color: var(--theme-color-alter_bg_color); &:hover { color: var(--theme-color-alter_link) !important; } } } /* Widget: Instagram Feed */ #sb_instagram { padding-bottom: 0 !important; #sbi_images { padding: 0; } } #sb_instagram .sbi_header_text { padding-top: 0 !important; margin-top:-2px; } #sb_instagram .sb_instagram_header { padding: 0 !important; margin-bottom:0.5em !important; } .footer_fullwidth #sb_instagram .sb_instagram_header { float:none; text-align:center; overflow:hidden; } .footer_fullwidth #sb_instagram .sb_instagram_header > a { float:none; display:inline-block; overflow:hidden; } #sb_instagram .sb_instagram_header h3 { font-size: 1.2308em; line-height:1.5em; } #sb_instagram .sb_instagram_header p { font-size: 1em; line-height:1.5em; } #sb_instagram #sbi_load { margin-top:0.5em; } .no_load #sbi_load { display: none; } #sb_instagram .sbi_photo { position: relative; opacity: 1 !important; &:before { content: ''; display: block; @include abs-cc(); width: 100%; height: 100%; background-color: rgba(0,0,0, 0); @include transition-all(0.4s); } &:hover:before { background-color: rgba(0,0,0, 0.2); } } /* Widget: Instagram */ ul.instagram-pics { margin-right: -5px; } ul.instagram-pics li { float: left; padding: 0 5px 5px 0; margin:0; overflow: hidden; @include box(33.3333%, auto); @include border-box; } .column-1_3 ul.instagram-pics li { width: 25%; } .column-1_2 ul.instagram-pics li { width: 20%; } .column-1_1 ul.instagram-pics li { width: 16.6666%; } ul.instagram-pics li:before { display:none; } /* Widget: About Me */ .widget_aboutme { .aboutme_username { @include font(19px, 1.5em); } .aboutme_description { @include font(17px, 1.5em); } .aboutme_avatar + .aboutme_username { margin-top: 0.7em; } .aboutme_avatar + .aboutme_description, .aboutme_username + .aboutme_description { margin-top: 0.3em; } } /* Widget: Audio */ .widget_audio { .widget_title { margin-top: 0; margin-bottom: 0; } .widget_title + .widget_subtitle { margin-top: 0.5em; @include font(17px, 1.3em); } .widget_title + .trx_addons_audio_wrap, .widget_subtitle + .trx_addons_audio_wrap { margin-top: 1.5em; } } /* Widget: Video List */ .trx_addons_video_list_video_wrap .trx_addons_video_player .video_frame .wp-video { width: unset !important; } .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap a, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap a:hover, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap a:focus, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_meta, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_meta .post_meta_item, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_meta .post_meta_item:after, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_meta .post_meta_item .post_author_name, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_meta .post_meta_item:hover .post_author_name, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_meta .post_meta_item:focus .post_author_name { color: #fff; } .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_meta, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_subtitle { @include font(16px, 1.5em, 400); } .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_title + .trx_addons_video_list_meta, .trx_addons_video_list_video_wrap .trx_addons_video_list_title_wrap .trx_addons_video_list_subtitle + .trx_addons_video_list_title { margin-top: 5px; } .trx_addons_video_list_controller_wrap { scrollbar-width: thin; &::-webkit-scrollbar { width: 7px; } &::-webkit-scrollbar-track { background: var(--theme-color-text_dark_008); } &::-webkit-scrollbar-thumb { background: var(--theme-color-text_dark_015); } .trx_addons_video_list_controller_bottom & { &::-webkit-scrollbar { height: 7px; } } .trx_addons_video_list_controller_item { background-color: var(--theme-color-alter_bg_color); &:hover { background-color: var(--theme-color-alter_bg_hover); } } .trx_addons_video_list_controller_item_active { background-color: var(--theme-color-alter_bg_hover); } .trx_addons_video_list_image { .trx_addons_video_list_image_label { @include font(10px, 14px, 500); letter-spacing: 0.2px; } } .trx_addons_video_list_title + .trx_addons_video_list_meta { margin-top: 6px; } .trx_addons_video_list_title { @include font(1.1em, 1.3em); } .trx_addons_video_list_subtitle { @include font(13px, '', 500); letter-spacing: 1.1px; text-transform: uppercase; a { color: var(--theme-color-text_dark); &:hover { color: var(--theme-color-text_dark); } } } .trx_addons_video_list_meta { @include font(14px, 1.5em, 400); color: var(--theme-color-text_light); } } /* Widget: Gallery */ .widget_media_gallery { .gallery-item { margin-bottom: 10px; } } /* Agree privacy policy */ :where(.trx_addons_popup_form_field_agree, .comments_i_agree_privacy_policy) { label { color: var(--theme-color-text_light); } input[type="checkbox"] + label a { color: inherit; border-color: var(--theme-color-text_light); &:hover { color: var(--theme-color-text_dark); border-color: var(--theme-color-text_dark); } } } /* The GDPR Framework */ .gdpr-terms-container { clear: both; margin: 1em 0; } // Cookie popup .cc-window.cc-theme- { .cc-header { margin-right: 7px; } .cc-close { top: 0; right: 0; padding: 7px; } } /* WP GDPR Compliance and others */ .wpgdprc { color: inherit; } table.wpgdprc-table { margin-bottom: 2em; } div.wpgdprc .wpgdprc-checkbox { display: inline; } #gdpr_woo_consent_field input[type="checkbox"], .gdpr-terms-container input[type="checkbox"], .tinv-wishlist .tinvwl-table-manage-list .product-cb input[type="checkbox"], .wpgdprc-checkbox label input[type="checkbox"] { position: static !important; clip: auto; width: 0; -webkit-appearance: none; -moz-appearance: none; } .gdpr-terms-container input[type="checkbox"], .tinv-wishlist .tinvwl-table-manage-list .product-cb input[type="checkbox"] { position: absolute !important; } #gdpr_woo_consent_field label, .gdpr-terms-container, .comment-form .wpgdprc-checkbox label, .wpgdprc-checkbox label { font-weight: inherit; position: relative; font-size: 14px; padding-left: 1.8em; padding-bottom: 0 !important; line-height: 22px; display: inline-block; vertical-align: top; color: var(--theme-color-text_light); a { color: inherit; border-bottom: 1px solid var(--theme-color-text_light); line-height: 1em; display: inline-block; @include transition-all(0.3s); &:hover { color: var(--theme-color-text_dark); border-color: var(--theme-color-text_dark); } } } #gdpr_woo_consent_field label { color: var(--theme-color-text_light) !important; } .comment-form-cookies-consent label { color: var(--theme-color-text_light); } #gdpr_woo_consent_field input[type="checkbox"]:before, .gdpr-terms-container input[type="checkbox"]:before, .tinv-wishlist .tinvwl-table-manage-list .product-cb input[type="checkbox"]:before, .wpgdprc-checkbox label input[type="checkbox"]:before { content: ''; font-family: $theme_icons; font-size: 7px; display: block; text-align: center; border: 1px solid var(--theme-color-bd_color); color: var(--theme-color-text_dark); @include box(16px, 16px, 15px); @include abs-lt(0, 0.45em); @include border-box; @include border-radius(4px); @include transition-all(0.3s); cursor: pointer; } .gdpr-terms-container { padding-left: 25px; input[type="checkbox"]:before { left: -25px; top: 0.4em; } } .tinv-wishlist .tinvwl-table-manage-list .product-cb input[type="checkbox"]:before { left: -8px; top: -8px; margin: 0; } #gdpr_woo_consent_field input[type="checkbox"]:hover:before, .gdpr-terms-container input[type="checkbox"]:hover:before, .tinv-wishlist .tinvwl-table-manage-list .product-cb input[type="checkbox"]:hover:before, .wpgdprc-checkbox label input[type="checkbox"]:hover:before { border-color: var(--theme-color-text_dark); } #gdpr_woo_consent_field input[type="checkbox"]:checked:before, .gdpr-terms-container input[type="checkbox"]:checked:before, .tinv-wishlist .tinvwl-table-manage-list .product-cb input[type="checkbox"]:checked:before, .wpgdprc-checkbox label input[type="checkbox"]:checked:before { content: '\e9f6'; } /* Touch screen device style goes here */ @media (hover: none) and (pointer: coarse) { .single-format-gallery .post_header_wrap_in_header { overflow: hidden; } } /* 10. Footer areas -------------------------------------------------------------- */ .footer_wrap { position: relative; } [class*="scheme_"].footer_wrap, .footer_wrap [class*="scheme_"].vc_row { background-color: var(--theme-color-alter_bg_color); color: var(--theme-color-alter_text); } .footer_default .sc_layouts_row_type_normal { padding: 3em 0; } .footer_default.footer_wrap .sc_layouts_row .sc_layouts_item, .footer_default.footer_wrap .sc_layouts_row .widget { margin-top: 1.5em !important; margin-bottom: 1.5em !important; } /* Footer widgets */ [class*="scheme_"].footer_wrap .widget, [class*="scheme_"].footer_wrap .sc_content .wpb_column, .footer_wrap [class*="scheme_"].vc_row .widget, .footer_wrap [class*="scheme_"].vc_row .sc_content .wpb_column { border-color: var(--theme-color-alter_bd_color); } [class*="scheme_"].footer_wrap h1, [class*="scheme_"].footer_wrap h2, [class*="scheme_"].footer_wrap h3, [class*="scheme_"].footer_wrap h4, [class*="scheme_"].footer_wrap h5, [class*="scheme_"].footer_wrap h6, [class*="scheme_"].footer_wrap h1 a, [class*="scheme_"].footer_wrap h2 a, [class*="scheme_"].footer_wrap h3 a, [class*="scheme_"].footer_wrap h4 a, [class*="scheme_"].footer_wrap h5 a, [class*="scheme_"].footer_wrap h6 a, .footer_wrap [class*="scheme_"].vc_row h1, .footer_wrap [class*="scheme_"].vc_row h2, .footer_wrap [class*="scheme_"].vc_row h3, .footer_wrap [class*="scheme_"].vc_row h4, .footer_wrap [class*="scheme_"].vc_row h5, .footer_wrap [class*="scheme_"].vc_row h6, .footer_wrap [class*="scheme_"].vc_row h1 a, .footer_wrap [class*="scheme_"].vc_row h2 a, .footer_wrap [class*="scheme_"].vc_row h3 a, .footer_wrap [class*="scheme_"].vc_row h4 a, .footer_wrap [class*="scheme_"].vc_row h5 a, .footer_wrap [class*="scheme_"].vc_row h6 a { color: var(--theme-color-alter_dark); } [class*="scheme_"].footer_wrap h1 a:hover, [class*="scheme_"].footer_wrap h2 a:hover, [class*="scheme_"].footer_wrap h3 a:hover, [class*="scheme_"].footer_wrap h4 a:hover, [class*="scheme_"].footer_wrap h5 a:hover, [class*="scheme_"].footer_wrap h6 a:hover, .footer_wrap [class*="scheme_"].vc_row h1 a:hover, .footer_wrap [class*="scheme_"].vc_row h2 a:hover, .footer_wrap [class*="scheme_"].vc_row h3 a:hover, .footer_wrap [class*="scheme_"].vc_row h4 a:hover, .footer_wrap [class*="scheme_"].vc_row h5 a:hover, .footer_wrap [class*="scheme_"].vc_row h6 a:hover { color: var(--theme-color-alter_link); } [class*="scheme_"].footer_wrap a, .footer_wrap [class*="scheme_"].vc_row a { color: var(--theme-color-alter_dark); } [class*="scheme_"].footer_wrap a:hover, .footer_wrap [class*="scheme_"].vc_row a:hover { color: var(--theme-color-alter_link); } .footer_wrap p { margin: 0; } .footer_wrap .widget[class*="column-"] { margin: 1.5em 0; } .footer_wrap .vc_col-sm-4 .widget li { display:inline-block; width: 45%; margin-right:3%; vertical-align:top; } .footer_wrap .vc_col-sm-4 .widget li li { display:block; width: 100%; margin-right:0; } .footer_wrap .footer_fullwidth { overflow:hidden; } .footer_wrap .widget_title, .footer_wrap .widgettitle { text-align:left; } .footer_wrap .footer_fullwidth .widget_title, .footer_wrap .footer_fullwidth .widgettitle { text-align:center; margin-bottom:1.5em; } /* Footer logo */ .footer_logo_inner { padding:4em 0; overflow:hidden; text-align:center; position:relative; border-color: var(--theme-color-alter_bd_color); } .footer_widgets_wrap + .footer_logo_wrap .footer_logo_inner { border-top-width: 1px; border-top-style: solid; } .footer_logo_inner:after { content:' '; @include abs-lb(50%, 0); @include box(1px, 3em); background-color: var(--theme-color-alter_text); } .trx_addons_absent .footer_logo_inner { padding:1em 0; } .trx_addons_absent .footer_logo_inner:after { display: none; } .footer_logo_inner img { max-width:25%; } .logo_footer_text { @include font(3.3333em, 1em); letter-spacing:6px; margin:0; } .logo_footer_image + .logo_footer_text { margin:0.63em 0 2em; } /* Socials in the default footer */ .footer_socials_inner { padding:2em 0 3em; text-align:center; } .footer_socials_inner .social_item .social_icon { color: var(--theme-color-alter_text); } .footer_socials_inner .social_item:hover .social_icon { color: var(--theme-color-alter_dark); } /* Posts in widgets */ [class*="scheme_"].footer_wrap .post_meta, [class*="scheme_"].footer_wrap .post_meta_item, [class*="scheme_"].footer_wrap .post_meta_item:after, [class*="scheme_"].footer_wrap .post_meta_item:hover:after, [class*="scheme_"].footer_wrap .post_meta .vc_inline-link, [class*="scheme_"].footer_wrap .post_meta .vc_inline-link:after, [class*="scheme_"].footer_wrap .post_meta .vc_inline-link:hover:after, [class*="scheme_"].footer_wrap .post_meta_item a, [class*="scheme_"].footer_wrap .post_info .post_info_item, [class*="scheme_"].footer_wrap .post_info .post_info_item a, [class*="scheme_"].footer_wrap .post_info_counters .post_meta_item { color: var(--theme-color-alter_light); } [class*="scheme_"].footer_wrap .post_date a:hover, [class*="scheme_"].footer_wrap a.post_meta_item:hover, [class*="scheme_"].footer_wrap .post_meta_item a:hover, [class*="scheme_"].footer_wrap .post_meta .vc_inline-link:hover, [class*="scheme_"].footer_wrap .post_info .post_info_item a:hover, [class*="scheme_"].footer_wrap .post_info_counters .post_meta_item:hover { color: var(--theme-color-alter_dark); } [class*="scheme_"].footer_wrap .post_item .post_title a:hover { color: var(--theme-color-alter_link); } [class*="scheme_"].footer_wrap .post_meta_item.post_categories, [class*="scheme_"].footer_wrap .post_meta_item.post_categories a { color: var(--theme-color-alter_link); } [class*="scheme_"].footer_wrap .post_meta_item.post_categories a:hover { color: var(--theme-color-alter_hover); } [class*="scheme_"].footer_wrap .socials_share.socials_type_drop .social_items { background-color: var(--theme-color-alter_bg_color); } [class*="scheme_"].footer_wrap .socials_share.socials_type_drop .social_items, [class*="scheme_"].footer_wrap .socials_share.socials_type_drop .social_items:before { background-color: var(--theme-color-alter_bg_color); border-color: var(--theme-color-alter_bd_color); color: var(--theme-color-alter_light); } /* Menu in the default footer */ .footer_menu_inner { padding:2em 0; text-align:center; } .menu_footer_nav_area > ul, .footer_wrap .sc_layouts_menu > ul { padding:0; margin:0; list-style-type:none; } .menu_footer_nav_area > ul > li, .footer_wrap .sc_layouts_menu > ul > li { display:inline-block; vertical-align: baseline; z-index: auto !important; } .footer_wrap .sc_layouts_row_type_narrow .sc_layouts_menu > ul > li { font-size: 17px; } .menu_footer_nav_area > ul > li > a, .footer_wrap .sc_layouts_menu > ul > li > a { padding: 0.5em 1em; display: inline-block; } .mobile_layout .menu_footer_nav_area > ul > li > a, .mobile_layout .footer_wrap .sc_layouts_menu > ul > li > a { padding: 0.5em 1em; } .footer_wrap .sc_layouts_row_type_narrow .sc_layouts_column_align_left, .footer_wrap .sc_layouts_row_type_compact .sc_layouts_column_align_left { .elementor-widget-wrap .sc_layouts_item:first-child { .sc_layouts_menu > ul > li:first-child > a { padding-left: 0 !important; } } } .footer_wrap .sc_layouts_row_type_narrow .sc_layouts_column_align_right, .footer_wrap .sc_layouts_row_type_compact .sc_layouts_column_align_right { .elementor-widget-wrap .sc_layouts_item:first-child { .sc_layouts_menu > ul > li:last-child > a { padding-right: 0 !important; } } } .menu_footer_nav_area > ul > li ul, .footer_wrap .sc_layouts_menu > ul > li ul { top: auto; bottom: 3em; } .menu_footer_nav_area > ul > li ul ul, .footer_wrap .sc_layouts_menu > ul > li ul ul { top: auto; bottom: -1.4em; margin-left: 2px; } .menu_footer_nav_area > ul > li ul ul.submenu_left, .footer_wrap .sc_layouts_menu > ul > li ul ul.submenu_left { margin-left: -2px; } .menu_footer_nav_area > ul > li ul > li, .menu_footer_nav_area > ul > li ul > li > a, .footer_wrap .sc_layouts_menu > ul > li ul > li, .footer_wrap .sc_layouts_menu > ul > li ul > li > a { font-size: inherit; } .menu_footer_nav_area > ul > li ul > li > a, .footer_wrap .sc_layouts_menu > ul > li ul > li > a { display:block; } .menu_footer_nav_area ul li a { color: var(--theme-color-alter_dark); } .menu_footer_nav_area ul li a:hover { color: var(--theme-color-alter_link); } /* Copyright area in the default footer */ .footer_widgets_wrap + .footer_copyright_wrap .footer_copyright_inner, .footer_logo_wrap + .footer_copyright_wrap .footer_copyright_inner, .footer_socials_wrap + .footer_copyright_wrap .footer_copyright_inner, .footer_menu_wrap + .footer_copyright_wrap .footer_copyright_inner { border-top-width: 1px; border-top-style: solid; } .footer_copyright_inner { font-size: 1em; padding: 1.5em 0; overflow:hidden; text-align:center; background-color: var(--theme-color-bg_color); border-color: var(--theme-color-bd_color); color: var(--theme-color-text_dark); } .footer_copyright_wrap p { margin:0; } .footer_copyright_inner a { color: var(--theme-color-text_dark); } .footer_copyright_inner a:hover { color: var(--theme-color-text_link); } .footer_copyright_inner .copyright_text { color: var(--theme-color-text); } /* 11. Utils -------------------------------------------------------------- */ /* Customizer message */ .frame_customizer_message { padding: 2em; margin:0 auto; max-width:60%; background-color: #f3e6ce; color:#996600; border-left: 3px solid #666600; } .frame_customizer_message b { color: #333300; } /* Debug window */ #debug_log { @include fixed-lt(0, 0, 1000000); display:block; width:100%; background:rgba(0,0,0,0.8); color:#ffffff; } .admin-bar #debug_log { top:32px; } #debug_log_close { @include abs-rt(0, -6px); @include square(20px); font-size:18px; font-weight:bold; cursor:pointer; } #debug_log_content { @include font(12px, 15px); max-height:66px; padding:16px 16px 6px; overflow:auto; word-wrap:normal; white-space:pre-line; } /* 12. Registration and Login popups -------------------------------------------------------------- */ .popup_wrap { @include abs-rt(0, 3.3333em); width: 37.5em; padding: 3em 2.5em 2em; display:none; } .popup_registration { right: -5.5em; } .popup_wrap .popup_close { display:block; font-size:1.25em; @include square(1em); @include abs-rt; margin:0.5em 0.5em 0 0; color: #cccccc; border: 2px solid #ebebeb; background-color:#f4f7f9; } .popup_wrap .popup_close:hover { color: #909090; border: 2px solid #cccccc; background-color:#ffffff; } .popup_wrap .popup_close:before { content:'\e8ac'; font-family:$theme_icons; line-height:1em; padding:0 !important; margin:0 !important; } .popup_wrap .form_wrap { position:relative; overflow:hidden; } .popup_wrap .form_left { float: left; padding-right: 2.5em; width: 54%; border-right: 1px solid #e0e0e0; @include border-box; } .popup_wrap .form_right { float: right; padding-left: 2.5em; width: 45%; @include border-box; } .popup_wrap.popup_registration .form_left { width: 50%; padding-right: 5px; border-right: none; } .popup_wrap.popup_registration .form_right { width: 50%; padding-left: 5px; } .popup_wrap .popup_form_field { margin-bottom:0.625em; } .popup_wrap input[type="text"], .popup_wrap input[type="email"], .popup_wrap input[type="url"], .popup_wrap input[type="password"] { width:100%; border: 2px solid #ebebeb; background-color:#fafafa; } .popup_wrap input:not([type="submit"]):focus { background-color:#ffffff; } .popup_wrap .popup_form_field.iconed_field { position:relative; } .popup_wrap .popup_form_field.iconed_field:before { @include abs-rt(8px, 10px); margin-right:0; color:#c9c9c9; width:1em; } .popup_wrap .popup_form_field.iconed_field input { padding-right:30px; } .popup_wrap .popup_form_field .forgot_password { float: right; line-height: 1.5em; } .popup_wrap .popup_form_field.submit_field { padding:1em 0 4px 4px; } .popup_wrap .popup_form_field .submit_button { width:100%; } .popup_wrap .login_socials_title { color:#222222; @include font(1.5em, 1.3em); margin-bottom:0.5em; } .popup_wrap .login_socials_problem { line-height:1.3em; } .popup_wrap .popup_form_field.remember_field { margin-top: 1.2em; } /* 13. Third part plugins ------------------------------------------------------------------------------------ */ /* WPBakery PageBuilder */ .wpb_row, .wpb_text_column, .wpb_content_element, ul.wpb_thumbnails-fluid > li, .last_toggle_el_margin, .wpb_button { margin-bottom:0 !important; } .sc_gap .vc_row { margin-left:0; margin-right:0; } .sc_gap .vc_column_container { padding-left:0; padding-right:0; } h1 .wpb_text_column p, h2 .wpb_text_column p, h3 .wpb_text_column p, h4 .wpb_text_column p, h5 .wpb_text_column p, h6 .wpb_text_column p { padding-bottom:0 !important; } .top_panel > .vc_row > .wpb_column { z-index: 10; } .top_panel > .vc_row:nth-child(2) > .wpb_column { z-index: 9; } .top_panel > .vc_row:nth-child(3) > .wpb_column { z-index: 8; } .top_panel > .vc_row:nth-child(4) > .wpb_column { z-index: 7; } .top_panel > .vc_row:nth-child(5) > .wpb_column { z-index: 6; } .top_panel > .vc_row:nth-child(6) > .wpb_column { z-index: 5; } .top_panel > .vc_row:nth-child(7) > .wpb_column { z-index: 4; } .top_panel > .vc_row:nth-child(8) > .wpb_column { z-index: 3; } .top_panel > .vc_row:nth-child(9) > .wpb_column { z-index: 2; } .top_panel > .vc_row:nth-child(10) > .wpb_column { z-index:1; } .post_item_single .post_edit .vc_inline-link { display:none; } /* Google conversion */ iframe[name="google_conversion_frame"] { height:1px; min-height:0; display:none; } /* mfp */ .mfp-bg { z-index: 200001; background-color: var(--theme-color-alter_bg_color_07); } .mfp-wrap { z-index: 200002; } .mfp-arrow { background-color: transparent !important; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { right: -20px; padding:0; width: 44px; text-align:center; color: var(--theme-color-text); background: none !important; } .mfp-close-btn-in .mfp-close { color: var(--theme-color-text); } .mfp-image-holder .mfp-close:hover, .mfp-iframe-holder .mfp-close:hover, .mfp-close-btn-in .mfp-close:hover { color: var(--theme-color-text_dark); } .mfp-figure img.mfp-img { padding-bottom: 0; max-height: 75vh; } .mfp-figure figcaption { background-color: var(--theme-color-alter_bg_color); } .mfp-title, .mfp-counter { color: var(--theme-color-alter_dark); } /* Scroll button on the RevSlider */ .theme_scroll_down { display:inline-block; text-align:center; cursor:pointer; text-transform:uppercase; @include font(11px !important, 15px !important); letter-spacing: 2px; } .theme_scroll_down:after { content: '\e938'; font-family:$theme_icons; @include font(16px !important, 30px !important); display:block; text-align:center; } .theme_scroll_down:hover { @include animation(squat 0.5s 1 cubic-bezier(0.2, -0.8, 0.6, -1.2)); } /* Other */ .no-content { height: 0; } /* Post More Link */ .post-more-link { position: relative; display: inline-block; top: auto; left: auto; height: auto; width: auto; @include font(15px, 21px, 500); color: var(--theme-color-text_dark); z-index: 1; overflow: hidden; &:active, &:hover { color: var(--theme-color-text_dark); } .link-text { position: relative; margin-right: 0; display: inline-block; vertical-align: middle; text-indent: -110px; visibility: hidden; opacity: 0; white-space: nowrap; @include transition(visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, color .4s ease, opacity .4s ease); will-change: visibility, margin-right, text-indent, color, opacity; } .more-link-icon { position: relative; display: inline-block; vertical-align: middle; overflow: hidden; @include square(1.4em); &:before { @include font(11px, inherit, 400, inherit); content: '\E9A4'; font-family: $theme_icons; display: inline-block; vertical-align: top; color: currentColor; } } &:hover .link-text { opacity: 1; text-indent: 0; margin-right: 6px; visibility: visible; @include transition(visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, color .4s ease, opacity .4s ease); } } /* Instagram */ #sb_instagram[data-shortcode-atts*="feedOne"], #sb_instagram.feedOne { #sbi_load { margin: 0; } .sbi_follow_btn { margin: 0 !important; @include abs-cc(); a { margin: 0; padding: 15px 25px; @include border-radius(0); font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; background: #ffffff !important; @include box-shadow(none !important); color: #071021; position: relative; &:before { font-family: $theme_icons; font-size: 18px; content: '\e87e'; margin: 0 3px 0 0; display: inline-block; position: relative; bottom: -1px; } } .fa, svg { margin-bottom: -1px; margin-right: 9px; margin-left: 2px; font-size: 17px; font-weight: 400; display: none; } } } #sb_instagram[data-shortcode-atts*="feedTwo"], #sb_instagram.feedTwo { #sbi_load { margin: 0; } .sbi_follow_btn { margin: 0 !important; @include abs-cc(); a { margin: 0; padding: 0 15px; @include border-radius(58px); font-size: 13px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; background: #ffffff !important; @include box-shadow(none !important); color: #071021; height: 102px; min-width: 102px; line-height: 102px; text-align: center; vertical-align: middle; > span { display: none; } } .fa, svg { font-size: 24px; font-weight: 400; margin: 6px; vertical-align: middle; color: #A5A6AA; } } } #sb_instagram[data-shortcode-atts*="feedExtra"], #sb_instagram.feedExtra { #sbi_load { margin: 0; } .sbi_photo { opacity: 1 !important; &:before { display: none !important; } } .sbi_follow_btn { margin: 0 !important; @include abs-cc(); a { margin: 0; padding: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; background: none !important; @include box-shadow(none !important); color: #071021; line-height: 20px; text-align: center; vertical-align: middle; > span { display: none; } } .fa, svg { font-size: 42px; font-weight: 400; margin: 6px; vertical-align: middle; color: #ffffff; } } } /* Layouts Compact */ .sc_layouts_row_type_compact { .sc_layouts_item input[type="text"] { @include font(16px, 1.5em, 400); } /* icons */ .sc_layouts_item_icon + .sc_layouts_item_details { margin-left: 0.7em; } .sc_layouts_item_icon { line-height: 1.1em; font-size: 24px; font-weight: 400; } .elementor-icon { font-size: 21px; } .search_wrap .search_submit { font-size: 24px; } .sc_layouts_iconed_text:not(.sc_layouts_menu_mobile_button):not(.sc_layouts_menu_mobile_button_burger) { .sc_layouts_iconed_text_link { .sc_layouts_iconed_text_icon { font-size: 20px; width: 39px; height: 39px; line-height: 39px; text-align: center; @include border-radius(50%); background-color: var(--theme-color-text_link2); color: var(--theme-color-inverse_link) !important; } } .sc_layouts_item_details { font-size: 22px; font-weight: 400; } } /* mobile button */ .sc_layouts_menu_mobile_button, .sc_layouts_menu_mobile_button_burger { .sc_layouts_item_icon { font-size: 16px; &:before { font-family: $theme_icons; content: '\e9d7'; } } } /* socials */ .sc_socials.sc_socials_default .socials_wrap { margin-bottom: 0; } .sc_socials.sc_socials_default .socials_wrap .social_item { margin: 0 10px 0 0; .social_icon { display: block; width: 42px; height: 42px; line-height: 40px; font-size: 16px; border: none; } } /* Cart */ .sc_layouts_cart { line-height: 1; .sc_layouts_cart_icon { &:before { position: relative; font-family: $theme_icons; content: '\e9f4'; } } .sc_layouts_cart_items_short { font-size: 10px; font-weight: 500; min-width: 15px; min-height: 15px; line-height: 15px; text-align: center; padding: 0 2px; top: auto; bottom: -3px; right: -6px; @include transform(none); } } /* Title */ .sc_layouts_title_caption { font-size: 57px; line-height: 1em; } } /* Layouts Narrow */ .sc_layouts_row_type_narrow { font-size: 13px; line-height: 18px; font-weight: 400; /* icon */ .sc_layouts_item_icon + .sc_layouts_item_details { margin-left: 0.7em; } .sc_layouts_item_icon { line-height: 1em; font-size: 16px; font-weight: 400; } /* socials */ .sc_socials.sc_socials_default .socials_wrap { margin-bottom: 0; } .sc_socials.sc_socials_default .socials_wrap .social_item, .sc_socials.sc_socials_default .socials_wrap:not([class*="socials_type_"]) .social_item { margin: 0 10px 0 0; .social_icon { display: block; width: 38px; height: 38px; line-height: 38px; font-size: 15px; border: none; } } } /* Layouts panel inner */ .sc_layouts_panel_inner { padding: 55px 35px 40px; > .elementor, .elementor-section-wrap, .elementor-inner, .elementor-section.elementor-section-height-full { height: 100%; min-height: auto; } .elementor-section.elementor-section-height-full > .elementor-container { height: 100%; } /* socials */ .sc_socials.sc_socials_default { .socials_wrap .social_item { margin-right: 28px; .social_icon { width: 25px; height: 25px; line-height: 22px; font-size: 18px; text-align: center; border: none; @include border-radius(0); } } &.sc_align_left .socials_wrap { margin-left: -5px; } } .sc_socials.sc_socials_icons_names { &.sc_align_left { margin-left: -8px; } &.sc_align_right { margin-right: -8px; } .socials_wrap .social_item { + .social_item { margin-top: 25px; } &:hover { .social_name, .social_icon { color: var(--theme-color-text); } } } } } .sc_layouts_panel_hide_content.sc_layouts_panel_opened { background-color: transparent; } /* Socials Names */ .sc_socials.sc_socials_icons_names { .socials_wrap .social_item { color: var(--theme-color-text_dark); display: block; text-align: inherit; margin: 0; .social_icon { width: 2em; height: 2em; line-height: 2em; position: relative; display: inline-block; vertical-align: middle; background: none !important; + .social_name { display: inline-block; vertical-align: middle; margin: 0 0 0 7px; font-size: 18px; line-height: 24px; font-weight: 500; } } &:hover { .social_name, .social_icon { color: var(--theme-color-text); } } } } /* Menu */ .menu_hover_color_line > ul > li:not(.menu-collapse).menu-item-has-children > a:before, .menu_hover_color_line > ul > li:not(.menu-collapse).menu-item-has-children > a:after { right: 0.9em !important; } .menu_hover_path_line > ul > li:not(.menu-collapse) > a:after { display: inline-block !important; } .menu_hover_path_line.sc_layouts_menu_dir_vertical.sc_layouts_submenu_popup .sc_layouts_menu_nav > li.menu-item-has-children > a, .menu_hover_path_line.sc_layouts_menu_dir_vertical.sc_layouts_submenu_popup .sc_layouts_menu_nav > li > a { padding: 0.25em; } .menu_hover_path_line.sc_layouts_menu_dir_vertical > ul > li:not(.menu-collapse):before { display: inline-block !important; } .sc_layouts_menu_nav { > li > a, > li.menu-item-has-children > a { padding: 0.9em; } > li[class*="icon-"] > a, > li.menu-item-has-children[class*="icon-"] > a { padding-left: 2em; } > li[class*="icon-"]:before { padding: 1.05em 0; color: var(--theme-color-text_dark); } > li.menu-item-has-children > a:after { display: none; } > li > ul { top: 5.7em; left: -0.7em; } /* columns menu */ > li[class*="columns-"] { > ul ul { margin-right: 5px; } > ul.sub-menu { padding: 2.3em 4.3em; } li li > a { padding: 0.65em 0; } li li[class*="icon-"]:before { left: 0; } li li[class*="icon-"] > a { padding-left: 1.6em; } > ul > li[class*="icon-"] > a { padding-left: 1.2em; } > ul > li[class*="icon-"]:before { top: 17px; left: 0; @include transform(none); } li.menu-item-has-children { > a { padding: 0.65em 0; @include font(19px !important, 1.5em !important, 500 !important); color: var(--theme-color-extra_dark) !important; } > a:hover, &.sfHover > a { color: var(--theme-color-extra_dark) !important; } } } /* Columns Menu in Collapse */ li.menu-collapse li[class*="columns-"] li.menu-item-has-children > a { @include font(inherit !important, 1.5em !important, 500 !important); color: var(--theme-color-extra_dark) !important; > span { font-size: 1.1em; } } li.menu-collapse li[class*="columns-"] li.menu-item-has-children > a:hover, li.menu-collapse li[class*="columns-"] li.menu-item-has-children.sfHover > a { color: var(--theme-color-extra_dark) !important; } /* Stretch window */ > li[class*="columns-"][class*="trx_addons_stretch_window"] { > ul { padding-top: 6.3em; padding-bottom: 6.3em; } li > a, li.menu-item-has-children > a { padding: 0.65em 0; } > ul > li[class*="icon-"] > a { padding-left: 1.2em; } > ul > li[class*="icon-"]:before { top: 17px; left: 0; @include transform(none); } li[class*="icon-"] > a { padding-left: 1.6em; } li[class*="icon-"]:before { left: 0; } } > li[class*="columns-"].trx_addons_stretch_window { > ul { padding-left: 7.6em; padding-right: 7.6em; } } /* Stretch window boxed */ > li[class*="columns-"].trx_addons_stretch_window_boxed { > ul { padding-left: 0; padding-right: 0; } } body.body_style_fullwide & > li[class*="columns-"] { > ul { padding-left: var(--theme-var-page_fullwide_extra); padding-right: var(--theme-var-page_fullwide_extra); } } } /* sub zoom line */ .menu_hover_zoom_line .sc_layouts_menu_nav { li li:not(.menu-collapse) > a > span { display: inline-block; padding: 0; word-break: break-word; @include transition(padding-left .2s ease); } li li:not(.menu-collapse) > a > span:after { content: ""; display: block; position: relative; z-index: 1; top: auto; bottom: -5px; left: 0; @include transform(none); width: 0; height: 1px; @include transition(width 0.2s ease); background-color: var(--theme-color-extra_hover); } li li:not(.menu-collapse) > a:hover > span:after, li li:not(.menu-collapse).sfHover > a > span:after, li li:not(.menu-collapse).current-menu-item > a > span:after, li li:not(.menu-collapse).current-menu-parent > a > span:after, li li:not(.menu-collapse).current-menu-ancestor > a > span:after { width: 100%; } li li:not(.menu-collapse) > a:hover > span, li li:not(.menu-collapse).sfHover > a > span, li li:not(.menu-collapse).current-menu-item > a > span, li li:not(.menu-collapse).current-menu-parent > a > span, li li:not(.menu-collapse).current-menu-ancestor > a > span { padding-left: 9px; } /* columns menu */ li[class*="columns-"] li.menu-item-has-children > a > span { padding-left: 0; } li[class*="columns-"] li.menu-item-has-children > a > span:after { display: none; } } .sc_layouts_menu_popup .sc_layouts_menu_nav > li.menu-item-has-children > a:after, .sc_layouts_menu_nav li li.menu-item-has-children > a:after { font-family: $theme_icons; content: '\e836'; font-weight: normal; position: absolute; z-index: 1; top: 0.55em; right: 1.35em; font-size: 18px; } .sc_layouts_menu_popup .sc_layouts_menu_nav, .sc_layouts_menu_nav > li ul:not(.sc_item_filters_tabs) { width: 15em; padding: 1em 0; } .sc_layouts_menu_popup .sc_layouts_menu_nav, .sc_layouts_menu_popup .sc_layouts_menu_nav > li > ul, .sc_layouts_menu_nav > li > ul ul { left: 15em; top: -1em; margin: 0 0 0 4px; } .sc_layouts_menu_nav > li > ul ul.submenu_left { left: -15em; margin: 0 0 0 -4px; } .sc_layouts_menu_nav > li > ul ul.sc_layouts_submenu.submenu_left { left: auto; right: 15.1428em; margin: 0; } .sc_layouts_menu_popup .sc_layouts_menu_nav > li > a, .sc_layouts_menu_nav > li li > a { padding: 0.65em 1.6em; } .sc_layouts_menu_popup .sc_layouts_menu_nav > li.menu-item-has-children > a, .sc_layouts_menu_nav li li.menu-item-has-children > a { padding-right: 2.2em; } /* Vertical Menus */ .sc_layouts_menu_dir_vertical .sc_layouts_menu_nav li.menu-item-has-children > a > .open_child_menu { display: none; @include abs-rt(0, 0, 2); bottom: 0; width: 2.2em; } /* Vertical dropdown */ .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { display: block; .sc_layouts_menu_nav { font-size: 24px; line-height: 1.4em; > li.menu-item-has-children > a, > li > a { padding: 0.3em 0; } > li.menu-item-has-children > a { padding-right: 1.2em !important; } li.menu-item-has-children > a > .open_child_menu { display: block !important; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 1.2em; text-align: right; line-height: 1.8em; &:before { content:'\e9df'; font-family:$theme_icons; font-size: 9px; font-weight: 400; margin-right: 1px; } } > li > ul { font-size: 18px; line-height: 1.4em; font-weight: 400; } li.menu-item-has-children > a:after { display: none; } /* sub */ > li ul, > li:last-child ul { margin: 0 0 0 10px; padding: 11px 0; li.menu-item-has-children > a > .open_child_menu { width: 1.2em; line-height: 1.9em; } } > li li > a { color: var(--theme-color-text_dark) !important; } > li li > a:hover, > li li.current-menu-item > a, > li li.current-menu-parent > a, > li li.current-menu-ancestor > a { color: var(--theme-color-text_link) !important; } > li ul li > a, > li:last-child ul li > a { padding: 0.4em 0; } > li ul li.menu-item-has-children > a, > li:last-child ul li.menu-item-has-children > a { padding-right: 1.5em; } } } /* Vertical Popup */ .sc_layouts_menu_dir_vertical.sc_layouts_submenu_popup { .sc_layouts_menu_nav { > li.menu-item-has-children > a, > li > a { padding: 0.25em 0; } > li.menu-item-has-children > a:after { display: inline-block; } } } .sc_layouts_panel_inner { .elementor-section.elementor-section-height-full { .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { overflow-y: scroll; max-height: 50vh; } .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { -ms-overflow-style: none; } /* hide scrollbar Explorer */ .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown { scrollbar-width: none; } /* hide scrollbar FireFox */ .sc_layouts_menu_dir_vertical.sc_layouts_submenu_dropdown::-webkit-scrollbar { width: 0; } /* hide scrollbar Chrome */ } } /* Sticky Socials */ .sticky_socials_wrap { position: fixed; top: 50%; z-index: 8001; @include box(auto, auto); @include flex; /* Sticky Socials Style "Default" */ &.sticky_socials_default { left: 55px; max-height: 300px; @include transform(translateY(-50%)); @include flex-direction(column); @include flex-wrap(wrap); @include flex-justify-content(center); @include flex-align-items(center); @include border-box; .social_item { display: inline-block; margin: 4px; @include transition(none); .social_icon { padding: 1px; display: inline-block; text-align: center; @include box(2.5em, 2.5em, 2.5em); @include border-radius(50%); border: 1px solid; color: var(--theme-color-text_dark); background-color: transparent; border-color: var(--theme-color-text_dark_02); will-change: color; @include transition(color .2s ease-out); &.icon-twitter-new { font-size: 82%; } } &:hover .social_icon { color: var(--theme-color-text_link); } } } /* Sticky Socials Style "Modern" */ &.sticky_socials_modern { left: 56px; width: 505px; @include flex-direction(row); @include flex-justify-content(center); @include flex-align-items(center); @include flex-wrap(wrap); @include transform-origin(0 50%); @include transform(rotate(-90deg) translate(-50%, 50%)); @include border-box; .social_item { margin-right: 22px; margin-left: 22px; line-height: 30px; @include flex; @include flex-align-items(center); color: var(--theme-color-text_dark); &:hover { color: var(--theme-color-text_link); } .social_name { @include font(14px, '', 500); } .social_icon { @include font(16px, '', 400); } .social_icon + .social_name { margin-left: 10px; } } } } /* Hotspot */ @keyframes AniMy { 0% { -webkit-transform: scale(0); transform: scale(0); } 80% { -webkit-transform: scale(1); transform: scale(1); @include box-shadow(0 0 0 10px var(--theme-color-text_link_02)); background-color: var(--theme-color-text_link_02); } 100% { -webkit-transform: scale(1); transform: scale(1); @include box-shadow(0 0 0 10px rgba(255,255,255,0)); background-color: rgba(255,255,255,0); } } .wrap_svl_center { line-height: 0; } .point_style { cursor: pointer; } .point_style .pins_animation { border: none; @include box-shadow(0 0 0 10px var(--theme-color-text_link_02)); } .pins_animation.ihotspot_pulse { -moz-animation: AniMy 1.5s infinite !important; -webkit-animation: AniMy 1.5s infinite !important; animation: AniMy 1.5s infinite !important; } #powerTip { padding: 10px 40px 12px; @include box-sizing(border-box); @include border-radius(0 !important); background-color: var(--theme-color-inverse_dark) !important; color: #ffffff !important; .box_view_html { font-size: 16px; line-height: 20px; font-weight: 500; a { color: #ffffff !important; opacity: 0.8; &:hover { opacity: 1; } } p { margin: 0; + p { margin-top: 5px; } } } &.n { margin-bottom: 15px; } &.n:before { border-top: 10px solid var(--theme-color-inverse_dark); bottom: -7px; } &.ne:before, &.nw:before { border-top: 10px solid var(--theme-color-inverse_dark); } &.se:before, &.sw:before { border-bottom: 10px solid var(--theme-color-inverse_dark); } &.s:before { border-bottom: 10px solid var(--theme-color-inverse_dark); } &.e:before { border-right: 10px solid var(--theme-color-inverse_dark); } &.w:before { border-left: 10px solid var(--theme-color-inverse_dark); } &.n:before, &.s:before { border-right: 8px solid transparent; border-left: 8px solid transparent; margin-left: -8px; } } /* BG */ .sc_testimonials_hover { .sc_testimonials_item:after { background-image:url(../images/testimonials-bg.png); } } /* Advanced Popups */ .adp-popup { @include box-shadow(0 3px 46px rgba(0,0,0,0.1)); @include transform(translateZ(1000px)); } .adp-popup-type-content .adp-popup-content { @include box-sizing(border-box); padding: 0; } .adp-popup-inner > p { margin: 0 !important; } .adp-popup .adp-popup-close { cursor: pointer; color: #A5A6AA !important; &:hover { color: #A5A6AA !important; } &:before { @include transform(rotate(0deg)); font-size: 19px; content:'\e9e1'; font-family:$theme_icons; @include transition-all(0.3s); display: block; width: 22px; height: 22px; line-height: 22px; text-align: center; will-change: transform; color: #A5A6AA !important; } &:hover:before { @include transform(rotate(180deg)); color: #A5A6AA !important; } } .ua_firefox .adp-popup .adp-popup-close:before { transform-origin: 50% 52%; } .adp-popup.adp-popup-open[data-light-close="true"] .adp-popup-close { outline: none; color: #dddddd !important; } /* location center */ .adp-popup.adp-popup-location-center { top: 50%; transform: translateY(-50%) translateZ(1000px); right: 0; left: 0; margin: 0 auto; } /* box */ .adp-popup-type-notification-box { .adp-popup-close:hover, .adp-popup-close { color: var(--theme-color-inverse_dark) !important; &:before { color: var(--theme-color-inverse_dark) !important; } } .adp-popup-text { padding: 51px 0 0 0; text-align: center; font-size: 14px; line-height: 1.4em; color: var(--theme-color-inverse_dark); position: relative; &:before { position: absolute; left: 0; top: 0; width: 100%; text-align: center; display: block; font-size: 36px; line-height: 1em; content:'\ea0a'; font-family:$theme_icons; } } .adp-popup-button { margin: 20px auto 0; display: block; width: calc(100% - 18px); @include border-radius(0); font-size: 15px; font-weight: 500; line-height: 21px; text-indent: 0; padding: 13px 15px 15px; @include box-sizing(border-box); text-align: center; background-color: #181D4E; color: #ffffff; cursor: pointer; @include box-shadow(none); &:hover, &:focus { background-color: var(--theme-color-text_link); } } } /* bar */ .adp-popup-type-notification-bar { .adp-popup-close:hover, .adp-popup-close { color: var(--theme-color-inverse_dark) !important; &:before { color: var(--theme-color-inverse_dark) !important; } } .adp-popup-text { padding: 0 20px 0 0; text-align: center; font-size: 14px; line-height: 1.4em; color: var(--theme-color-inverse_dark); position: relative; &:before { display: inline-block; font-size: 28px; line-height: 0; content:'\ea0a'; font-family:$theme_icons; margin: -3px 22px 0 0; vertical-align: middle; } } .adp-popup-button { margin-left: 1.8rem; display: inline-block; @include border-radius(0); font-size: 15px; font-weight: 500; line-height: 21px; text-indent: 0; padding: 10px 30px 12px; @include box-sizing(border-box); text-align: center; background-color: #181D4E; color: #ffffff; cursor: pointer; @include box-shadow(none); &:hover, &:focus { background-color: var(--theme-color-text_link); } } } /* LatePoint */ select[id^="booking_custom_fields_"] { visibility: visible; -webkit-appearance: auto; } .latepoint-step-content .os-form-select-group .select_container:before, .latepoint-step-content .os-form-select-group .select_container:after { display: none; } .latepoint-book-button { @include theme_button_filled; @include box-shadow(0 7px 25px var(--theme-color-text_link_02)); @include transition-all(0.3s); &:focus, &:hover { @include theme_button_colors_hover; @include box-shadow(0 7px 25px var(--theme-color-text_link_02)); } } .latepoint-w .latepoint-booking-form-element .latepoint-summary-w h3.summary-header { padding-right: 29px; } .latepoint-w .latepoint-booking-form-element.latepoint-color-black h1, .latepoint-w .latepoint-booking-form-element.latepoint-color-black h2, .latepoint-w .latepoint-booking-form-element.latepoint-color-black h3, .latepoint-w .latepoint-booking-form-element.latepoint-color-black h4, .latepoint-w .latepoint-booking-form-element.latepoint-color-black h5 { color: #222733; } .latepoint-w .latepoint-booking-form-element.latepoint-color-black .os-items .os-item > .os-item-i:hover { border-color: #222733; } /* twentytwenty */ .twentytwenty-wrapper { .twentytwenty-overlay { background: none; &:hover { background: none; } .twentytwenty-before-label { left: 0; } .twentytwenty-after-label { right: 0; } .twentytwenty-before-label, .twentytwenty-after-label { background: #ffffff; color: #000; opacity: 1; font-size: 14px; line-height: 16px; font-weight: 400; height: auto; width: auto; bottom: 0; padding: 8px 20px; @include border-radius(0); letter-spacing: 0; @include transition-all(0.3s); } } &:hover .twentytwenty-overlay, .twentytwenty-overlay:hover { .twentytwenty-before-label, .twentytwenty-after-label { opacity: 0; } } &.twentytwenty-horizontal .twentytwenty-handle:after, &.twentytwenty-horizontal .twentytwenty-handle:before { display: none; } .twentytwenty-handle { @include border-radius(50%); @include box-shadow(none); width: 66px; height: 66px; line-height: 66px; border: none; background: #ffffff; margin-left: -33px; margin-top: -33px; text-align: center; .twentytwenty-left-arrow, .twentytwenty-right-arrow { border: none !important; width: 20px; line-height: 20px; height: 20px; position: absolute; top: 50%; font-size: 15px; margin-top: -10px; } .twentytwenty-left-arrow { left: 50%; margin-left: -20px; } .twentytwenty-right-arrow { right: 50%; margin-right: -20px; } .twentytwenty-left-arrow:before { content: '\e92a'; font-family: $theme_icons; display: inline-block; color: #000; } .twentytwenty-right-arrow:before { content: '\e92b'; font-family: $theme_icons; display: inline-block; color: #000; } } &.twentytwenty-vertical { .twentytwenty-handle { .twentytwenty-down-arrow, .twentytwenty-up-arrow { border: none !important; width: 20px; line-height: 20px; height: 20px; position: absolute; top: 50%; font-size: 15px; margin-top: -20px; } .twentytwenty-down-arrow { margin-top: 0; margin-bottom: -20px; top: auto; bottom: 50%; } .twentytwenty-down-arrow, .twentytwenty-up-arrow { left: 50%; margin-left: -10px; } .twentytwenty-down-arrow:before { content: '\E929'; font-family: $theme_icons; display: inline-block; color: #000; } .twentytwenty-up-arrow:before { content: '\E92C'; font-family: $theme_icons; display: inline-block; color: #000; } } .twentytwenty-before-label { top: 0; left: 0; bottom: auto; right: auto; } .twentytwenty-after-label { bottom: 0; left: 0; top: auto; right: auto; } .twentytwenty-handle:before, .twentytwenty-handle:after { display: none; } } } /* Demo */ .position-abs-lc { @include abs-lc(); } .round-square .elementor-button { width: 101px; height: 101px; line-height: 100px; padding: 0; } .round-square-2 .elementor-button-link { overflow: hidden; } .round-square-2 .elementor-button { width: 193px; height: 193px; line-height: 193px !important; padding: 0; } .form-position-abs { @include abs-cc(); } .sc_title_default .extra_bg { display: inline-block; padding: 0 5px; } .VanillaTiltHover img { pointer-events:none; } .cursor-pointer { cursor: pointer; } .right_bar g, #Right_Bar g { stroke: var(--theme-color-text_dark); } .social_icon .icon-twitter-new { font-size: 88%; } .size-around .elementor-icon { padding: 10px; } .no-margin { margin: 0 !important; } /* for single team col */ .left_shift { z-index: 5; margin: 0 0 0 -160px; width: calc(100% + 160px) !important; } /* Add custom styles for default button ( with custom class ) */ .custom_icon_btn { &.elementor-widget-button { .elementor-button { font-size: 15px; font-weight: 500; line-height: 21px; padding: 0; background-color: transparent; letter-spacing: 0; .elementor-button-content-wrapper { line-height: 4.22rem; .elementor-button-icon { border: 1px solid var(--theme-color-text_dark_05); font-size: 16px; width: 4.22rem; height: 4.22rem; line-height: 4.22rem; text-align: center; @include border-radius(50%); svg { height: inherit; } } } } &.elementor-align-right { .elementor-button { .elementor-button-content-wrapper { .elementor-button-icon { margin-left: 30px; } } } } } } /* for service single */ .extra_tiny_spacer { height: 8px !important; } .tiny_spacer { height: 13px !important; } .small_spacer { height: 40px !important; } /* Change padding in slider when you use layout as slide */ .small_padding { .slider_container { .slide_content { padding: 0; } .slider-slide { padding-left: 15px; padding-right: 15px; } } .body_style_fullscreen & { .slider-slide { padding-left: 0 !important; padding-right: 0 !important; } } } /* Remove padding in slider when you use layout as slide */ .remove_padding { .slider_container .slide_content { padding: 0; } } /* simple_text_link */ .simple_text_link { &.underline_anim { color: var(--theme-color-text_dark) !important; font-size: 17px !important; padding-bottom: 10px !important; background-image: linear-gradient(to right, currentColor 0%, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; -webkit-background-size: 0 1px; background-size: 0 1px; @include box-sizing(border-box); } &.underline_anim.underline_do_hover { animation: underline_hover_on2 .8s cubic-bezier(0.25, 0.8, 0.25, 1) both; } &.underline_anim.underline_do_hover:hover { animation: underline_hover_off2 .8s cubic-bezier(0.25, 0.8, 0.25, 1) both; } } @-webkit-keyframes underline_hover_on2 { 0% { -webkit-background-size: 0 2px; background-size: 0 2px; } 100% { -webkit-background-size: 100% 2px; background-size: 100% 2px; } } @keyframes underline_hover_on2 { 0% { -webkit-background-size: 0 2px; background-size: 0 2px; } 100% { -webkit-background-size: 100% 2px; background-size: 100% 2px; } } @-webkit-keyframes underline_hover_off2 { 0% { -webkit-background-size: 100% 2px; background-size: 100% 2px; } 100% { -webkit-background-size: 0 2px; background-size: 0 2px; } } @keyframes underline_hover_off2 { 0% { -webkit-background-size: 100% 2px; background-size: 100% 2px; } 100% { -webkit-background-size: 0 2px; background-size: 0 2px; } } .button_bg_icon_color { .icon-envelope-2:before { margin: -1px -3px 0 0; } &.sc_button_simple.sc_button_icon_left .sc_button_icon { margin-right: 0.8em; } .sc_button_icon { background-color: var(--theme-color-bg_color); border: none !important; font-size: 18px !important; } } .button_alter2_icon_color { overflow: visible; &.sc_button_simple.sc_button_icon_left .sc_button_icon { margin-right: 0.8em; } .sc_button_icon { @include box-shadow(0 0 0 4px rgba(234,234,234,0.2)); color: var(--theme-color-text_link2); } } .extra-size-skills { .sc_skills_counter_alter .sc_skills_total { font-size: 130px; letter-spacing: -4px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sc_skills_counter_alter .sc_skills_item_title { font-size: 18px; font-weight: 500; text-transform: uppercase; color: #C5A48E; margin-top: 0 !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sc_skills_counter_alter.sc_skills_counter_style_odometer { .sc_skills_total { letter-spacing: 9px; } } } /* color for menu in footer */ .footer_wrap .extra_menu_in_footer .sc_layouts_menu > ul > li > a { font-size: 16px; font-weight: 400; color: var(--theme-color-text_dark) !important; &:before { color: var(--theme-color-text_dark) !important; } } // Add custom styles for elements on Clients page and shortcodes .alter_clients { .widget_slider { .slider_container { .slider-slide { background-color: #ffffff; img { opacity: 0.2; transition: 0.3s; } &:hover { img { opacity: 1; } } } } } } .awards_slider { .widget_slider .slider_type_images .slider-slide { @include box-sizing(border-box); padding: 20px 60px; min-height: 200px; background-color: #ffffff; border: 1px solid var(--theme-color-bd_color); .slide_info { @include transition-all(0.3s); text-shadow: none; position: absolute; left: 0; top: 0; justify-content: center; flex-direction: column; align-items: center; height: 100%; width: 100%; @include flex; opacity: 0; .slide_title { margin: 0 0 7px 0; font-size: 19px; font-weight: 500; color: #222733 !important; } .slide_cats { font-size: 18px; font-weight: 400; color: #7A7E83 !important; } } .slide_overlay { background: none; border: 1px solid #E5E5E5; left: 0; right: 0; top: 0; bottom: 0; @include box-sizing(border-box); } img { will-change: transform; margin-bottom: 5px; opacity: 1; @include transition-all(0.3s); } &:hover { box-shadow: 0 0 15px 3px var(--theme-color-text_dark_005); transition: 0.3s ease; .slide_info { opacity: 1; } img { opacity: 0; } } } .slider_container { padding: 20px; margin: -20px; } } /* Custom styles for header( inner section absolute, layout title full height ) */ .header_fullscreen { height: 100vh !important; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #000; opacity: 0.4; z-index: 1; pointer-events: none; } .elementor-widget-trx_sc_layouts_title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; .sc_layouts_title { min-height: 100vh; } } } .no-inner-padding .slider_container .slide_content { padding: 0 !important; } .line-height-0 .elementor-grid-item, .line-height-0 .elementor-icon-wrapper { line-height: 0 !important; } body.with_bg_canvas .page_content_wrap { background-color: transparent; } .up-translateZ { @include transform(translateZ(500px)); } .up-translateZ-wrap .elementor-column-wrap, .up-translateZ-wrap .elementor-widget-wrap { @include transform(translateZ(0)) } .up-translateZ-elem { @include transform(translateZ(20px)); } .up-translateZ-elem-front { @include transform(translateZ(200px)); } body:not(.elementor-editor-active) { .no-title img { pointer-events:none; } } .play_center { .elementor-icon-wrapper { line-height: 0; } } .play_center .icon-play:before { letter-spacing: -3px; } .play_center .elementor-icon i, .play_center .elementor-icon svg { left: 2px; } .extra_view_button { .sc_button_wrap .sc_button { margin-bottom: 15px; } .sc_button_wrap { margin-bottom: -15px; } } .extra-icon-padding { .sc_icons_fill .sc_icons_item { padding: 3em 2.2em; } .sc_icons_fill .sc_icons_icon + .sc_icons_item_details, .sc_icons_fill .sc_icons_image + .sc_icons_item_details { margin-top: 1.6em; } .sc_icons_item_title { font-size: 24px; } .sc_icons_fill .sc_icons_item .sc_icons_item_description { font-size: 17px; } } .shop-nav-slider-custom .widget_slider .slider_container.slider_controls_side .slider_controls_wrap > a { background-color: transparent; color: var(--theme-color-text); &:before { font-size: 22px; } &.slider_prev { margin-left: 0; &:before { content: '\e837'; } } &.slider_next { margin-right: 0; &:before { content: '\e836'; } } &:hover { color: var(--theme-color-text_dark); background-color: transparent; } } .extra-big-title .sc_item_title { @include font(5.167em, 1em, 600); letter-spacing: -3.3px; > .trx_addons_text_gradient { padding-right: 2px; padding-left: 2px; } } /* BG Canvas */ .bg_canvas { //background-color: var(--theme-color-bg_color) !important; } /* Autofill Off */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { outline: none; caret-color: #ffffff; -webkit-text-fill-color: var(--theme-color-input_text); @include box-shadow(0 0 0 1000px transparent inset); @include transition(background-color 5000s ease-in-out 0s !important); background: transparent; filter: none; } /* Latepoint */ .latepoint-w.latepoint-with-summary:not(.latepoint-hide-side-panel).latepoint-summary-is-open.show-summary-on-mobile .latepoint-summary-w, .latepoint-w.latepoint-with-summary.latepoint-summary-is-open.show-summary-on-mobile .latepoint-summary-w { z-index: 10000; } @media (min-width: 479px) and (max-width:767px) { .latepoint-w .latepoint-booking-form-element .latepoint-side-panel { display: none; } .latepoint-w .latepoint-summary-w { display: none !important; } .latepoint-w .latepoint-booking-form-element .latepoint-form-w { max-width: 100%; } } @media (max-width:479px) { .os-dates-w { margin: 0 -0.5%; } .latepoint-w .latepoint-booking-form-element .os-monthly-calendar-days, .latepoint-w .latepoint-booking-form-element .os-weekdays { grid-gap: 10px; } .latepoint-w.latepoint-shortcode-booking-form .latepoint-booking-form-element { margin: 0; } .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-img-w { flex: 0 0 40px; height: 40px; margin-right: 10px; } .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-price-w { padding-left: 10px; } .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name-w .os-item-name { font-size: 15px; } .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-price-w .os-item-price { font-size: 16px; } .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-footer .latepoint-btn { padding: 8px; } .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .os-heading-text { font-size: 16px; } .latepoint-w .latepoint-booking-form-element .os-items.os-as-grid .os-item .os-item-i { padding: 8px; } .latepoint-w .latepoint-booking-form-element .os-items.os-as-grid .os-item .os-item-i .os-item-img-w.os-with-avatar { padding: 4px 5px 15px; } .latepoint-w .latepoint-booking-form-element .os-items.os-as-grid .os-item .os-item-i .os-item-name-w { padding-top: 5px; } .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name-w .os-item-name { font-size: 14px; } .latepoint-w .latepoint-booking-form-element .os-items .os-item-details-btn { bottom: -7px; } .os-current-month-label-w .os-current-month-label { font-size: 16px; } .os-monthly-calendar-days .os-day { font-size: 13px; } .latepoint-booking-form-element .os-step-tabs .os-step-tab.active { font-size: 14px; } .latepoint-booking-form-element .os-step-tabs { height: auto; } .latepoint-w .os-form-group.os-form-textfield-group textarea.os-form-control, .latepoint-w .os-form-group.os-form-textfield-group select.os-form-control, .latepoint-w .os-form-group.os-form-textfield-group input[type="password"].os-form-control, .latepoint-w .os-form-group.os-form-textfield-group input[type="email"].os-form-control, .latepoint-w .os-form-group.os-form-textfield-group input[type="number"].os-form-control, .latepoint-w .os-form-group.os-form-textfield-group input[type="text"].os-form-control { font-size: 14px !important; } } /* Backstage */ .backstage-customizer-access-wrapper .backstage-customizer-access-button { font-size: 15px; font-weight: 400; background-color: var(--theme-color-text_link); @include transition-all(0.3s); &:hover { background-color: var(--theme-color-text_hover); } a { padding: 6px 14px; } } // rotate-hover .rotate-hover.elementor-view-framed .elementor-icon { border-color: var(--theme-color-bd_color); fill: var(--theme-color-text_dark); svg { @include transform(rotateZ(0)); @include transition-all(0.3s); } } .sc_cover:hover + .elementor-container .rotate-hover.elementor-view-framed .elementor-icon, .rotate-hover.elementor-view-framed .elementor-icon:hover { border-color: var(--theme-color-text_dark); svg { @include transform(rotateZ(-45deg)); } } // num-hover .num-hover, .num-hover * { color: var(--theme-color-text); @include transition-all(0.3s); .sc_cover:hover + .elementor-container & { color: var(--theme-color-text_link); } } // hover-color-text .hover-color-text, .hover-color-text * { color: var(--theme-color-text_dark); @include transition-all(0.3s); .sc_cover:hover + .elementor-container & { color: var(--theme-color-text); } } // rotate-hover-2 .rotate-hover-2 .elementor-icon svg { @include transition-all(0.3s); @include transform(rotateZ(0)); fill: var(--theme-color-text_dark); } .sc_cover:hover + .elementor-container .rotate-hover-2 .elementor-icon, .rotate-hover-2 .elementor-icon:hover { svg { @include transform(rotateZ(45deg)); fill: var(--theme-color-text_link); } } // divider-hover .divider-hover .elementor-divider-separator { @include transition-all(0.3s); } .sc_cover:hover + [class*="elementor-"] .divider-hover .elementor-divider-separator, .divider-hover:hover .elementor-divider-separator { border-color: var(--theme-color-text_link) !important; } // Timetable style .timetable-style { .elementor-widget-heading .elementor-widget-container { height: 100%; padding: 6px; @include flex(); @include flex-direction(column); @include flex-justify-content(center); background-color: var(--theme-color-alter_bg_color); } .elementor-heading-title { @include font(14px, 1.3em, 400); } @media #{$media_sm} { .elementor-widget-heading { height: auto !important; } } } .nowrap { white-space: nowrap; } /* Tags Ticker */ .tags_ticker { .trx_addons_bg_text { .trx_addons_bg_text_char { font-family: var(--theme-font-h5_font-family); .tag { margin-right: 8px; padding: 13px 30px 15px; color: var(--theme-color-alter_dark); background-color: var(--theme-color-alter_bg_color); @include border-radius(0); @media #{$media_sm} { padding: 9px 24px 10px; } } } } }