/*========================== Common style ===========================*/ .skip-link, .skip-link:hover { display: inline-block; position: absolute; top: -9999px; left: 50px; background: #f5f5f5; padding: 15px 25px; box-shadow: 0 2px 4px rgba($black_color, 0.16); color: $black_color; font-size: 0.8888em; font-weight: 600; z-index: -1; -webkit-transition: none; -moz-transition: none; transition: none; } .skip-link:focus { z-index: 999; top: 50px; } .archive .site-main .woocommerce-products-header { display: none; } #mega-menu-wrap-primary { display: flex; flex: 1; justify-content: center; align-items: center; } #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link .mega-description-group .mega-menu-description { position: absolute; top: 0; right: -10px; background: $secondary_color; color: $white_color; line-height: 1.3; font-size: 8px; font-weight: 700; padding: 3px 5px; z-index: 9; &::after { content: ""; border-top: 5px solid $secondary_color; border-right: 6px solid transparent; position: absolute; bottom: -5px; left: 3px; } } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { width: 980px; } body[class*="mega-menu-"] .header-main .site-branding { width: auto; } span.comments svg { margin-right: 5px; } .fa-phone { @include transform(rotate(90deg)); } .page-template-default .site-main .entry-content, .page-template-default .site-main .entry-content p:first-child { margin-top: 0; } .custom-background { .site { max-width: 85%; margin: 0 auto; background: $white_color; }//.site .sticky-header { max-width: 85%; margin-left: auto; margin-right: auto; }//.sticky-header }//.custom-background .container { max-width: 1220px; margin: 0 auto; } section[class*="-section"] { margin-top: 100px; margin-bottom: 100px; } .site-content + [class*="-section"] { margin-top: 0; } .fallback-svg { vertical-align: top; } .woocommerce-store-notice, p.demo_store { font-size: 0.8em; background: #ee7f4b; padding-top: 0.5em; padding-bottom: 0.5em; box-shadow: none; } .woocommerce-store-notice a:hover, p.demo_store a:hover { text-decoration: none; } div.wpcf7 { position: relative; .ajax-loader { background-color: rgba($white_color, 0.75); background-repeat: no-repeat; background-position: center; background-size: 25px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }//.ajax-loader }//div.wpcf7 %close-shared { padding: 0; width: 40px; height: 40px; background: rgba($white_color, 0.5); border-radius: 100%; position: absolute; top: 20px; right: 20px; cursor: pointer; @include transition(all ease 0.35s); &:hover { background: rgba($white_color, 0.8); } &:before, &:after { content: ""; background: $black_color; width: 20px; height: 2px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; @include transform(rotate(45deg)); } &:after { @include transform(rotate(-45deg)); } }//.close .section-title, section[class*="-section"] .widget-title { margin-top: 0; margin-bottom: 15px; font-size: 2em; font-family: $secondary_font; text-align: center; line-height: 1.25em; } .section-desc { font-size: 1em; text-align: center; margin-bottom: 40px; color: #868E96; p { margin-top: 0; margin-bottom: 20px; } } .entry-title a { color: #202020; } .entry-title a:hover { color: $secondary_color; } .entry-meta { > span { display: inline-block; font-size: 0.6em; line-height: 1.17em; font-weight: 700; color: #868E96; margin-right: 30px; text-transform: uppercase; letter-spacing: 1px; &:last-child { margin-right: 0; } a { color: #868e96; &:hover { color: #202020; } } &.category a { display: inline-block; margin-right: 10px; margin-bottom: 5px; &:last-child { margin-right: 0; } } } }//.entry-meta article { .btn-readmore { display: inline-block; position: relative; font-size: 0.7em; line-height: 1em; font-weight: 700; color: #202020; letter-spacing: 1px; padding-left: 40px; &:before, &:after { content: ""; background: #868E96; width: 30px; height: 2px; position: absolute; top: 50%; left: 0; @include transform(translateY(-60%)); @include transition(all ease 0.35s); } &:after { left: auto; right: 0; width: 0; visibility: hidden; } &:hover { padding-left: 0; padding-right: 40px; &:before { width: 0; visibility: hidden; } &:after { width: 30px; visibility: visible; } } }//.btn-readmore }//article .dropcap { float: left; font-size: 3.5em; font-weight: 700; line-height: 0.8em; margin-top: 7px; margin-right: 10px; color: $secondary_color; } #back-to-top { padding: 0; position: fixed; bottom: 0; right: 30px; width: 50px; height: 50px; background: rgba($white_color, 0.8); border: 4px solid rgba(0,0,0,0.15); text-align: center; line-height: 43px; color: rgba($black_color, 0.65); font-size: 18px; border-radius: 100%; cursor: pointer; opacity: 0; visibility: hidden; z-index: 999; @include transition(all ease 0.35s); &.active { opacity: 1; filter: alpha(opacity=100); visibility: visible; bottom: 30px; } &:hover { background: #202020; color: $white_color; } }//#back-to-top .owl-carousel { .owl-nav { button { &[class*="owl-"] { position: absolute; top: 40%; left: 0; background-image: url('data:image/svg+xml; utf-8, '); background-repeat: no-repeat; background-position: center; text-indent: 100px; overflow: hidden; width: 35px; height: 30px; @include transform(translateY(-50%)); } &.owl-prev:hover { background-image: url('data:image/svg+xml; utf-8, '); } &.owl-next { left: auto; right: 0; background-image: url('data:image/svg+xml; utf-8, '); &:hover { background-image: url('data:image/svg+xml; utf-8, '); } }//.owl-next } }//.owl-nav .owl-dots { margin-top: 45px; text-align: center; display: flex; flex: 1; flex-wrap: wrap; justify-content: center; .owl-dot { margin: 3px; display: flex; width: 35px; height: 35px; border-radius: 100%; justify-content: center; flex-direction: column; align-items: center; position: relative; &:before { content: ""; border: 1px solid #868E96; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border-radius: 100%; opacity: 0; visibility: visible; @include transition(all ease 0.35s); } &:hover:before, &.active:before { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; filter: alpha(opacity=100); visibility: visible; } span { display: inline-block; width: 6px; height: 6px; background: #868E96; border-radius: 100%; }//span }//.owl-dot }//.owl-dots }//.owl-carousel .page-template-default { .site-main { .page-content { margin-top: 0; p { margin-top: 30px; margin-bottom: 0; &:first-child { margin-top: 0; } }//p }//.page-content }//.site-main } //.page-template-default .yith-wcwl-wishlistaddedbrowse, .yith-wcwl-wishlistexistsbrowse { font-size: 0.7em; line-height: 1.5; margin-top: 10px; a { color: rgba($black_color, 0.5); text-decoration: underline; &:hover { color: $black_color; text-decoration: none; } } } .mCSB_scrollTools { .mCSB_dragger { .mCSB_dragger_bar { background-color: $secondary_color; width: 5px; margin-right: 0; }//.mCSB_dragger_bar &:hover, &:active, &.mCSB_dragger_onDrag { .mCSB_dragger_bar { background-color: $secondary_color; } }//&:hover }//.mCSB_dragger .mCSB_draggerRail { width: 5px; margin-right: 0; background-color: #F0F0F0; }//.mCSB_draggerRail }//.mCSB_scrollTools .edit-link { display: block; margin-top: 10px; width: 100%; .post-edit-link { display: inline-block; font-size: 0.6em; text-transform: uppercase; font-weight: 700; color: $black_color; background: $primary_color; letter-spacing: 1px; line-height: 1.5; padding: 5px 10px; &:hover { color: $white_color; background: $secondary_color; } }//.post-edit-link }//.edit-link .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { color: $white_color; background: $black_color; border-radius: 0; font-size: 0.7em; text-transform: uppercase; letter-spacing: 1px; padding: 20px 30px; &:hover { background: $secondary_color; color: $white_color; } } #yith-quick-view-content .onsale { position: absolute; top: 0; left: 15px; text-transform: uppercase; font-size: 0.6em; font-weight: 700; background: $black_color; color: $white_color; line-height: 1.35; padding: 5px 10px; text-align: center; z-index: 9; margin: 0; min-width: auto; min-height: auto; border-radius: 0; right: auto; @include transform(rotate(-90deg)); @include transform-origin(25px 28px); &::before, &::after { content: ""; border-right: 10px solid $black_color; border-bottom: 13px solid transparent; position: absolute; top: 0px; left: -10px; } &::after { top: auto; bottom: 0; border-bottom: none; border-top: 13px solid transparent; } } .yith-wcqv-main { .product { .summary { .product_title { font-size: 1.5em; font-weight: 700; font-family: $secondary_font; margin-bottom: 0; }//.product_title .woocommerce-product-rating { margin-bottom: 1em; }//.woocommerce-product-rating .star-rating { font-size: 0.7em; margin-top: 10px; color: #FFB001; }//.star-rating p.price { margin: 0; font-size: 1em; line-height: 1.5; color: $black_color; font-weight: 600; letter-spacing: 1px; del { margin-right: 10px; opacity: 0.5; filter: alpha(opacity=50) } ins { background: none; } }//p.price .woocommerce-product-details__short-description { font-size: 0.8em; } table.woocommerce-grouped-product-list { tbody { tr { background: none; border-bottom: 1px solid rgba($black_color, 0.1); td { .button { background: $black_color; color: $white_color; font-size: 0.7em; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; padding: 10px 15px; line-height: 1.5; &:hover { background: $secondary_color; } }//.button label { a { color: $black_color; font-size: 0.8em; font-weight: 700; }//a }//label input[type="number"] { width: 100%; padding-left: 10px; padding-right: 10px; }//input[type="number"] .woocommerce-Price-amount { font-size: 0.8em; font-weight: 600; }//.woocommerce-Price-amount del { opacity: 0.5; filter: alpha(opacity=50); margin-right: 5px; } ins { background: none; } p.stock.out-of-stock { margin-top: 0; margin-bottom: 0; } }//td }//tr }//tbody }//table.woocommerce-grouped-product-list .single_add_to_cart_button { background: $black_color; font-size: 0.7em; padding: 20px 30px; border-radius: 0; &:hover { background: $secondary_color; } }//.single_add_to_cart_button .product_meta { border-top: 1px solid rgba($black_color, 0.1); padding-top: 15px; margin-top: 20px; font-size: 0.6em; text-transform: uppercase; font-weight: 700; color: $black_color; letter-spacing: 1px; width: 100%; > span { display: block; margin-bottom: 10px; a, span { display: inline-block; color: rgba($black_color, 0.5); margin-left: 10px; } a:hover { color: $secondary_color; } } }//.product_meta .quantity { .qty { padding: 5px; height: 54px; width: 5em; }//.qty }//.quantity }//.summary }//.product }//.yith-wcqv-main .item { position: relative; text-align: center; .star-rating { overflow: hidden; position: relative; height: 1em; width: 5.4em; font-family: star; line-height: 1; font-size: 0.7em; margin-left: auto; margin-right: auto; margin-bottom: 10px; &::before { content: "\73\73\73\73\73"; color: #d3ced2; float: left; top: 0; left: 0; position: absolute; } > span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; &::before { content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0; color: #ffb001; } }//span }//.star-rating .onsale, .outofstock { position: absolute; top: 0; left: 15px; text-transform: uppercase; font-size: 0.6em; font-weight: 700; background: $black_color; color: $white_color; line-height: 1.35; padding: 5px 10px; text-align: center; z-index: 9; margin: 0; min-width: auto; min-height: auto; border-radius: 0; right: auto; @include transform(rotate(-90deg)); @include transform-origin(25px 28px); &::before, &::after { content: ""; border-right: 10px solid $black_color; border-bottom: 13px solid transparent; position: absolute; top: 0px; left: -10px; } &::after { top: auto; bottom: 0; border-bottom: none; border-top: 13px solid transparent; } }//.onsale .outofstock { background: #cc444d; @include transform-origin(40px 41px); &::before, &::after { border-right-color: #cc444e; } }//.outofstock .recent-prod-image, .popular-prod-image, .cat-image, .product-image { position: relative; overflow: hidden; margin-bottom: 30px; .yith-wcwl-add-button { position: absolute; top: 10px; right: 0; width: auto; height: auto; line-height: 0; opacity: 0; visibility: hidden; @include transition(all ease 0.35s); &::before { content: "Add to Wishlist"; background: $black_color; position: absolute; white-space: nowrap; font-size: 0.6em; top: 50%; right: 100%; text-indent: 0; color: $white_color; line-height: 1.5; padding: 5px 10px; box-shadow: 4px 4px 8px rgba($black_color, 0.3); opacity: 0; visibility: hidden; @include transform(translateY(-50%)); @include transition(all ease 0.35s); } &::after { content: ""; border-left: 5px solid $black_color; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; top: 50%; right: calc(100% - 5px); opacity: 0; visibility: hidden; @include transform(translateY(-50%)); @include transition(all ease 0.35s); } &:hover { &::before { right: calc(100% + 5px); opacity: 1; filter: alpha(opacity=100); visibility: visible; } &::after { right: 100%; opacity: 1; filter: alpha(opacity=100); visibility: visible; } }//&:hover &:focus-within { &::before { right: calc(100% + 5px); opacity: 1; filter: alpha(opacity=100); visibility: visible; } &::after { right: 100%; opacity: 1; filter: alpha(opacity=100); visibility: visible; } }//&:focus-within .add_to_wishlist { width: 40px; height: 40px; border-radius: 0; display: inline-block; overflow: hidden; background-color: $white_color; background-image: url('data:image/svg+xml; utf-8, '); background-repeat: no-repeat; background-position: center; background-size: 16px; text-indent: 50px; white-space: nowrap; &:hover { background-color: $primary_color; } &:focus-within { background-color: $primary_color; } }//.add_to_wishlist .ajax-loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }//.ajax-loading }//.yith-wcwl-add-button .yith-wcqv-button { display: inline-block; width: 40px; height: 40px; white-space: nowrap; position: absolute; top: 10px; right: 0; background-color: $white_color; background-image: url('data:image/svg+xml; utf-8, '); background-repeat: no-repeat; background-position: center; background-size: 16px; white-space: nowrap; font-size: 0; opacity: 0; visibility: hidden; @include transition(all ease 0.35s); &::before { content: "Quick View"; background: $black_color; position: absolute; top: 50%; right: 100%; font-size: 12px; text-indent: 0; color: $white_color; line-height: 1.5; box-shadow: 4px 4px 8px rgba($black_color, 0.3); padding: 5px 10px; opacity: 0; visibility: hidden; @include transform(translateY(-50%)); @include transition(all ease 0.35s); } &::after { content: ""; border-left: 5px solid $black_color; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; top: 50%; right: calc(100% - 5px); opacity: 0; visibility: hidden; @include transform(translateY(-50%)); @include transition(all ease 0.35s); } &:hover { background-color: $primary_color; &::before { right: calc(100% + 5px); opacity: 1; filter: alpha(opacity=100); visibility: visible; } &::after { right: 100%; opacity: 1; filter: alpha(opacity=100); visibility: visible; } }//&:hover &:focus-within { background-color: $primary_color; &::before { right: calc(100% + 5px); opacity: 1; filter: alpha(opacity=100); visibility: visible; } &::after { right: 100%; opacity: 1; filter: alpha(opacity=100); visibility: visible; } }//&:hover }//.yith-wcqv-button .compare-button { position: absolute; top: 10px; right: 0; width: auto; height: auto; line-height: 0; opacity: 0; visibility: hidden; @include transition(all ease 0.35s); &::before { content: "Compare"; background: $black_color; position: absolute; white-space: nowrap; font-size: 0.6em; top: 50%; right: 100%; text-indent: 0; color: $white_color; line-height: 1.5; padding: 5px 10px; box-shadow: 4px 4px 8px rgba($black_color, 0.3); opacity: 0; visibility: hidden; @include transform(translateY(-50%)); @include transition(all ease 0.35s); } &::after { content: ""; border-left: 5px solid $black_color; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; top: 50%; right: calc(100% - 5px); opacity: 0; visibility: hidden; @include transform(translateY(-50%)); @include transition(all ease 0.35s); } &:hover { &::before { right: calc(100% + 5px); opacity: 1; filter: alpha(opacity=100); visibility: visible; } &::after { right: 100%; opacity: 1; filter: alpha(opacity=100); visibility: visible; } a:hover { background-color: $primary_color; } }//&:hover &:focus-within { &::before { right: calc(100% + 5px); opacity: 1; filter: alpha(opacity=100); visibility: visible; } &::after { right: 100%; opacity: 1; filter: alpha(opacity=100); visibility: visible; } a:hover { background-color: $primary_color; } }//&:focus-within a { width: 40px; height: 40px; border-radius: 0; display: inline-block; overflow: hidden; background-color: $white_color; background-image: url('data:image/svg+xml; utf-8, '); background-repeat: no-repeat; background-position: center; background-size: 16px; text-indent: 50px; white-space: nowrap; padding: 0; font-weight: 400; }//a }//.compare-button .yith-wcwl-add-to-wishlist { margin-top: 0; + .clear { + .yith-wcqv-button { top: 55px; + .compare.button { top: 100px; } } + .compare.button { top: 55px; } }//.clear + .yith-wcqv-button { top: 55px; + .compare-button { top: 100px; } } + .compare-button { top: 55px; } }//.yith-wcwl-add-to-wishlist > a + .yith-wcqv-button + .compare-button { top: 55px; } .product_type_external, .product_type_simple, .product_type_grouped, .product_type_variable { position: absolute; bottom: -30px; left: 0; right: 0; background: $white_color; text-align: center; font-size: 0.7em; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; color: $black_color; padding: 15px 10px; line-height: 1.3; border-bottom: 1px solid rgba($black_color, 0.1); opacity: 0; visibility: hidden; @include transition(all ease 0.35s); &::before { content: "+"; margin-right: 5px; } &:hover { background: $primary_color; } &.added { bottom: 0; } }//.product_type_external .added_to_cart { display: inline-block; font-size: 0.7em; text-transform: uppercase; font-weight: 700; color: $black_color; letter-spacing: 1px; &:hover { color: rgba($black_color, 0.5); } }//.added_to_cart }//.recent-prod-image &:hover, &.hover { .yith-wcwl-add-button, .yith-wcqv-button, .compare-button { right: 10px; opacity: 1; filter: alpha(opacity=100); visibility: visible; } .product_type_external, .product_type_simple, .product_type_grouped, .product_type_variable { bottom: 0; opacity: 1; filter: alpha(opacity=100); visibility: visible; &.added { bottom: 35px; } } }//&:hover &:focus-within { .yith-wcwl-add-button, .yith-wcqv-button, .compare-button { right: 10px; opacity: 1; filter: alpha(opacity=100); visibility: visible; } .product_type_external, .product_type_simple, .product_type_grouped, .product_type_variable { bottom: 0; opacity: 1; filter: alpha(opacity=100); visibility: visible; &.added { bottom: 35px; } } }//&:focus-within h3 { margin-top: 0; margin-bottom: 15px; font-size: 0.7em; text-transform: uppercase; letter-spacing: 1px; a { color: $black_color; &:hover { color: $secondary_color; } }//a }//h3 .price { margin-top: 0; margin-bottom: 0; font-size: 0.7em; text-transform: uppercase; color: #868E96; line-height: 1.5; justify-content: center; del { margin-right: 5px; opacity: 0.5; filter: alpha(opacity=50); }//del ins { background: none; }//ins }//.price }//.item .select2-container .select2-selection--single, .widget .select2-container .select2-selection--single { height: 50px; margin: 0; font-size: 0.7em; } .select2-container--default .select2-selection--single, .widget .select2-container--default .select2-selection--single { border-color: rgba($black_color, 0.1); border-radius: 0; } .select2-container--default .select2-selection--single .select2-selection__rendered, .widget .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px; padding-right: 15px; padding-left: 15px; } .select2-container--default .select2-selection--single .select2-selection__arrow, .widget .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; right: 10px; top: 0; } .select2-container--default .select2-results > .select2-results__options, .widget .select2-container--default .select2-results > .select2-results__options { font-size: 0.8em; } .woocommerce-error, .woocommerce-info, .woocommerce-message { font-size: 0.8em; a { color: $secondary_color; &:hover { text-decoration: underline; } } } .page-template-blossom-portfolio { .portfolio-holder { margin-top: 60px; margin-bottom: 60px; }//.portfolio-holder }//.page-template-blossom-portfolio .single-blossom-portfolio { .portfolio-holder { margin-top: 60px; }//.portfolio-holder .site-content { margin-bottom: 60px; }//.site-content }//.single-blossom-portfolio .post-shop-wrap { .header { position: relative; text-align: center; z-index: 1; &::after { content: ""; background: rgba($black_color, 0.1); width: 100%; height: 1px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1; } .title { margin-top: 0; margin-bottom: 0; font-size: 0.6666em; text-transform: uppercase; font-weight: 600; display: inline-block; background: $white_color; padding: 8px 20px; } }//.header }//.post-shop-wrap .blossomthemes-email-newsletter-wrapper { form { .subscribe-inner-wrap { position: relative; overflow: hidden; input[type="checkbox"] { display: inline-block; position: absolute; top: -20px; left: 0; }//input[type="checkbox"] }//.subscribe-inner-wrap }//form }//.blossomthemes-email-newsletter-wrapper .woocommerce-product-search { .form-group { display: flex; flex: 1; flex-wrap: wrap; background: rgba($white_color, 0.9); .search-field { padding-top: 0; padding-bottom: 0; border: none; width: calc(100% - (40% + 60px)); height: 60px; background: none; font-size: 0.8em; font-weight: 400; }//.search-field .cat-dropdown { padding-top: 0; padding-bottom: 0; border: none; border-left: 1px solid rgba($black_color, 0.1); background-color: transparent; width: 40%; height: 60px; font-size: 0.8em; font-weight: 400; }//.cat-dropdown button { height: 60px; width: 60px; padding: 0; background: $secondary_color; font-size: 1em; font-weight: normal; &:hover, &:active, &:focus { background: $black_color; color: $white_color; } svg { width: 22px; margin-top: -5px; vertical-align: middle; }//svg }//button }//.form-group }//.woocommerce-product-search @include media(lg) { .container { max-width: 1170px; } }//@include media(lg) @include media(md) { .container { max-width: 1000px; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { width: 74vw; } }//@include media(md) @include media(sm) { .container { max-width: 768px; padding-left: 15px; padding-right: 15px; } #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { width: 100%; } }//@include media(sm) @include media(xs) { .custom-background { .site, .sticky-header { max-width: 90%; }//.site }//.custom-background .container { max-width: 420px; } section[class*="-section"] { margin-top: 60px; margin-bottom: 60px; } .woocommerce-product-search { .form-group { flex-direction: column; .search-field { width: 100%; text-align: center; }//.search-field .cat-dropdown { text-align: center; width: 100%; border-left: none; border-top: 1px solid rgba($black_color, 0.1); }//.cat-dropdown button { width: 100%; }//button }//.form-group }//.woocommerce-product-search }//@include media(xs)