@import 'variables', 'mixin'; .sticky-top { z-index: 0; } .simpleParallax { height: auto; max-width: 100%; border: none; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; will-change: transform; transition: transform 0.5s ease-out; } #social__buttons { display: flex; @include absolute(auto, 50px, 50px, auto); @include media-max(1200px){ @include absolute(auto, 30px, 30px, auto); } a { width: 35px; height: 35px; border-radius: 100%; border: 1px solid #000; display: flex; justify-content: center; align-items: center; transition: $transition; @include media-max(1200px) { border: 1px solid #fff; width: 50px; height: 50px; } &:first-of-type { margin-right: 10px; } &:hover { background: #000; .svg-icon { height: 15px; &__path { fill: #fff; } } } .svg-icon { height: 15px; &__path { fill: #000; @include media-max(1200px) { fill: #fff; } } } } } #scroll_down_button { background-color: #fff; } #scroll_down_button::after { content: none; } #scroll_down_button div { position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } #scroll_down { @include absolute(auto, 0, 0, 0); @include media-max(1200px){ @include absolute(auto, 0, -20px, 0); } } #scroll_down a span { position: absolute; top: 0; left: 50%; width: 30px; height: 50px; margin-left: -15px; border: 1px solid #fff; border-radius: 50px; box-sizing: border-box; } #scroll_down a span::before { position: absolute; top: 10px; left: 50%; content: ''; width: 5px; height: 5px; margin-left: -3px; background-color: #fff; border-radius: 100%; -webkit-animation: sdb10 2s infinite; animation: sdb10 2s infinite; box-sizing: border-box; } @-webkit-keyframes sdb10 { 0% { -webkit-transform: translate(0, 0); opacity: 0; } 40% { opacity: 1; } 80% { -webkit-transform: translate(0, 20px); opacity: 0; } 100% { opacity: 0; } } @keyframes sdb10 { 0% { transform: translate(0, 0); opacity: 0; } 40% { opacity: 1; } 80% { transform: translate(0, 20px); opacity: 0; } 100% { opacity: 0; } } #scroll_down a { position: absolute; bottom: 100px; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #fff; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } #scroll_down a:hover { opacity: .5; } .choose-carousel .owl-nav.disabled { display: none; } .choose-carousel .owl-prev { position: absolute; left: -60px !important; top: 50% !important; width: 30px !important; height: 30px !important; background: url("/wp-content/uploads/2022/05/left_nav.png") !important; background-size: 30px !important; text-indent: -9999px; transition: $transition; &:hover { left: -65px !important } } .choose-carousel .owl-next { position: absolute; right: -60px !important; top: 50% !important; width: 30px !important; height: 30px !important; background: url("/wp-content/uploads/2022/05/right_nav.png") !important; background-size: 30px !important; text-indent: -9999px; transition: $transition; &:hover { right: -65px !important } } .labelform { width: 100%; } .selectedoptions { display: block; background: #fdfdfd; border: 1px solid #f1f1f1; font-size: 0.9em; font-weight: 500; align-items: center; padding: 8px; position: relative; padding-right: 70px; cursor: pointer; border: 1px solid #c0c0c0; float: right; width: 60%; } .selectedoptions.active { background: #f9f9f9; } .selectedoptions .wcpa_price { line-height: normal; margin-left: 2px; display: inline !important; } .textoptions { padding: 0px 2px; border: none; } .wcpa_opt_price { text-align: start; } .wcpa_priceouter.text { display: none; } .wcpa_form_outer { margin: 1em 0 3px 0; } .wcpa_form_outer .wcpa_form_item .image-group label { font-size: 15px; display: block; text-align: center; padding: 10px; font-weight: normal; color: #727272; display: flex; flex-direction: column; justify-content: start; width: 100%; } .wcpa_form_outer { text-align: left; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; width: auto; left: 0; right: -15px; padding: 0; background: #fff; z-index: 10; margin-top: 0; width: 100%; } .wcpa_form_outer .wcpa_row { width: 100%; display: inline-block; padding: 5px 0; margin-left: 0; margin-right: 0; } .wcpa_form_outer .wcpa_row.top { width: 100%; } .wcpa_form_outer .wcpa_row.top h3 { font-size: 16px; } .wcpa_form_outer { padding-top: 20px; } .wcpa_form_outer .wcpa_row.full { width: 100%; } .wcpa_form_outer .wcpa_form_item { align-items: center; padding-left: 0; padding-right: 0; } .wcpa_price_summary { background: none; li { padding: 15px 4px; &:last-of-type { border-bottom: 1px solid #bdbcbc; } } } .priceproduct { font-size: 15px; border-bottom: 1px solid #727272; padding: 8px 0; color: #727272; } .wcpa_total { margin-bottom: 20px; font-weight: bold; font-size: 17px; } .wcpa_type_image-group label, .wcpa_form_item.wcpa_type_text label, .wcpa_form_item.wcpa_type_file label, .wcpa_form_item.wcpa_type_textarea label { font-size: 0.9em; font-weight: 500; color: #727272; width: 40%; position: relative; } .wcpa_type_textarea:nth-last-child(2) { display: none; } .selectedoptions-more { font-size: 12px; line-height: 12px; position: absolute; right: 10px; font-weight: 900; top: 0; height: 100%; align-items: center; display: flex; } .image-group { background: #F4F2F0; border: 1px solid #c7bdb3; box-shadow: 0 0 150px rgba(0, 0, 0, 40%); display: none; position: fixed; z-index: 3; top: 10%; width: 90vw; height: auto; left: 0; right: 0; padding: 20px; margin: auto; .owl-dots { text-align: center; } button.owl-dot { background: #000 !important; color: inherit; border: none; padding: 0 !important; font: inherit; width: 10px; height: 10px; margin: 0 5px; border-radius: 100%; opacity: 0.3; &.active { opacity: 1; } } } .wcpa_form_outer .wcpa_form_item .wcpa_disp_type_circle .wcpa_image input:checked+div img, .wcpa_form_outer .wcpa_form_item .wcpa_disp_type_circle .wcpa_image input:checked+img, .wcpa_form_outer .wcpa_form_item .wcpa_disp_type_square .wcpa_image input:checked+div img, .wcpa_form_outer .wcpa_form_item .wcpa_disp_type_square .wcpa_image input:checked+img, .wcpa_form_outer .wcpa_form_item .wcpa_disp_type_squircle .wcpa_image input:checked+div img, .wcpa_form_outer .wcpa_form_item .wcpa_disp_type_squircle .wcpa_image input:checked+img { box-shadow: unset; border: 5px solid #06ac06; } .wcpa_form_outer .wcpa_form_item .required_ast { position: absolute; top: -10px; margin-left: 4px; color: #e34848; font-size: 18px; opacity: 0.8; } .wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon { visibility: visible; color: #fff; background: $primary-color; width: 15px; height: 15px; border-radius: 50%; display: inline-block; text-align: center; line-height: 16px; margin: 0 5px; font-size: 10px; font-weight: 500; margin-top: -2px !important; cursor: default; vertical-align: text-top; position: relative; } .wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon>span { display: none; position: absolute; border-radius: 5px 5px 5px 0; bottom: 23px; color: #000; content: attr(tooltip); padding: 10px 5px; z-index: 98; left: 2px; width: 230px; text-shadow: none; font-size: 12px; line-height: 1.5em; cursor: default; background: rgb(199, 189, 179); border: 1px solid #c7bdb3; } .wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon:hover:before { border: solid; border-color: rgb(199, 189, 179) transparent; border-width: 6px 6px 0; bottom: 17px; content: ""; left: 2px; position: absolute; z-index: 99; cursor: default; } .wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon { margin: 0 0 0 20px; } .backimggroup { background-color: #000; color: #fff; margin-left: auto; margin-right: 0; font-size: 20px; line-height: 20px; border-radius: 100%; width: 31px; height: 30px; border: unset; position: absolute; right: -15px; top: -15px; border: 1px solid #bdbcbc; font-weight: bold; transition: $transition; } .backimggroup:hover { background-color: #fff; color: #000; } #personalize-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 20px; } .optionname { display: block; float: left; text-align: start; font-size: 16px; line-height: 20px; font-weight: 600; padding: 0; color: #000; } #personalizebutton { background: #fff; color: #000; font-weight: bold; padding: 10px; } #personalizebutton:after { width: 14px; height: 14px; content: ""; display: none; background: url(../img/arrow.png); margin-left: 5px; transition: all 0.3s; transform: rotate(-90deg); } #personalizebutton.active:after { transform: rotate(0); } #personalizebutton2 { font-size: 12px; font-weight: 500; } .woocommerce-product-details__short-description { background: rgba($primary-color, 20%); border: 1px solid $primary-color; font-size: 15px; text-align: left !important; margin-top: 30px; margin-bottom: 20px; text-align: left; font-weight: 500; padding: 30px; p { &:last-of-type { margin-bottom: 0; } } } .woocommerce-product-details__short-description p { text-align: left !important; } .woocommerce-product-details__short-description h4 { font-size: 17px; text-align: left !important; font-weight: 700; color: #000; } .product_title.entry-title { position: relative; } .single-product-prices .woocommerce-Price-amount.amount { font-size: 40px; font-weight: 700; color: #000; } .wcpa_form_outer .wcpa_form_item .image-group img { max-width: 100%; display: inline; cursor: pointer; top: 0; bottom: 0; left: 0; right: 0; height: 100%; object-fit: cover; } .wcpa_image>div { position: relative; padding-bottom: 100%; width: 100%; } .woocommerce div.product form.cart { text-align: right; } .woocommerce div.product form.cart .button { display: inline-block; float: none; vertical-align: middle; } .woocommerce div.product .woocommerce-tabs ul.tabs { margin: 0; padding: 0; border-bottom: 2px solid #000; } body { overflow-x: hidden; } #home-all, #home-all * { box-sizing: border-box; } #home-all .hiddendiv { display: none; background: #000; position: relative; color: #fff; padding: 50px 0; } #home-all .hiddendiv h6 { font-size: 27px; margin: 0 0 25px 0; } #home-all .closebutton { position: absolute; right: 10px; top: 10px; background: url(../img/closenew.png) center center no-repeat; width: 28px; height: 28px; cursor: pointer; position: absolute; z-index: 3; } #home-all .hiddendiv .container { z-index: 2; } #home-all .hiddendiv .bgtext { position: absolute; z-index: 1; right: 0; top: 0; opacity: 0.1; font-weight: 800; font-size: 15vw; color: #fff; } /* .example { -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; } */ #home-all a img { border: none; } #home-all a { outline: none; text-decoration: none; } #home-all .clear { clear: both; } #home-all .left { float: left; } #home-all .right { float: right; } #home-all .bold { font-weight: bold; } #home-all .center { text-align: center; } #home-all .text-right { text-align: right; } #home-all .text-left { text-align: left; } #home-all img.respv { max-width: 100%; height: auto; display: block; } #new-menu .menu-container { background: #fff; height: 72px; } #new-menu .fixed { height: 72px } #new-menu .nav .open>a, #new-menu .nav .open>a:focus, #new-menu .nav .open>a:hover { color: #fff; } #new-menu .menu-item a { color: #000; font-size: 16px; } #new-menu .nav-justified>.dropdown .dropdown-menu {} #new-menu .dropdown-menu li a { color: #fff; } #new-menu .navbar { display: flex; } #new-menu .caret { position: absolute; } #new-menu .navbar-toggle { margin: 16px; } #new-menu .dropdown-menu { border: none !important; } #new-menu .navbar-nav>li>a {} #new-menu .menu-container .logo-wrapper img { display: block; max-width: 100%; } #new-menu .menu-container .logo-wrapper { display: block; position: static; float: none; margin: 21px 10px 0 21px; width: 140px; max-width: 100%; display: flex; align-items: center; } #new-menu .cart-contents-count { color: #fff; background-color: transparent; font-size: 14px; font-weight: normal; border-radius: 50%; right: 15px; top: 36px; padding: 4px; position: absolute; line-height: 1; vertical-align: top; width: 24px; height: 24px; line-height: 24px; padding: 0; text-align: center; } #new-menu .navbar-nav { position: static; display: flex; align-items: center; padding-right: 80px; } #new-menu .nav-justified>li { display: block; width: auto; max-width: 140px; } #new-menu #main-menu>.menu-item:last-child { position: absolute; background: #000; right: -1px; width: 100px; top: -1px; height: 72px; overflow: hidden; } #home-all .container { max-width: 1170px; margin: 0 auto; } #new-home-slider { display: flex; flex-wrap: wrap; height: 100vh; color: #000; } .subpage-header { display: flex; } #new-home-slider .owl-nav { display: none !important } #new-home-slider .owl-carousel .owl-stage, #new-home-slider .owl-carousel .owl-stage, #new-home-slider .owl-item {} #new-home-carousel { width: 58%; } #new-home-carousel .item { width: 100%; height: 100vh; background-size: cover !important; } #new-home-content { width: 42%; background: #f3f3f3; display: flex; align-items: center; } #new-home-content>div { margin-left: -20%; width: 120%; padding-top: 40px; position: relative; z-index: 10; } #new-home-content img { padding-bottom: 20px; border-bottom: 2px solid #000; padding-right: 10px; } #new-home-content h1 { font-size: 54px; font-weight: 700; padding: 20px 0; } #new-home-content h1 span { font-weight: 300; display: block; } #new-home-pagination { display: flex; font-size: 0; } #new-home-pagination .item { background-size: cover !important; } #new-home-pagination div { width: 32.33%; padding-bottom: 32.33%; margin-left: 1%; display: inline-block; filter: grayscale(100%); transition: all 0.3s; cursor: pointer; } #new-home-pagination div.active { filter: grayscale(0%); } #new-home-count { width: 50%; position: relative; display: flex; justify-content: space-between; float: right; margin-top: 20px; padding-right: 10px; } #new-home-count { font-size: 25px; font-weight: 700; } #current-slide:after { height: 2px; right: 29px; top: 50%; margin-top: -1px; left: 20px; position: absolute; background: #000; content: ""; } #new-home-slider .owl-nav { display: none; } #who-we-are { display: flex; flex-wrap: wrap; background: url(../img/logo_pion.jpg) 40px bottom no-repeat; background-attachment: fixed; } #who-we-are-left { width: 58%; font-size: 18px; font-weight: 300; padding: 70px 70px 70px 200px; } #who-we-are-left h5 { font-size: 35px; border-bottom: 2px solid #000; margin-bottom: 30px; padding-bottom: 20px; } #who-we-are-right { width: 42%; background: url(../img/who-we-are.jpg) center center no-repeat; background-size: cover !important; padding: 30px; display: flex; } #who-we-are-right h3 { align-self: flex-end; color: #fff; font-size: 30px; font-weight: 300; } #who-we-are-right h3 span { display: block; font-weight: bold; } #sign { height: 411px; width: 100%; background: url(../img/sign_bg.jpg) center center no-repeat; background-attachment: fixed; position: relative; overflow: hidden; } #sign:after { position: absolute; left: 50%; top: 50%; margin-top: -281px; margin-left: -248px; width: 496px; height: 562px; top: 50%; content: ""; background: url(../img/sign.png); } #our-products { display: flex; flex-wrap: wrap; background: url(../img/logo_pion.jpg) 40px bottom no-repeat; background-attachment: fixed; } #our-products-right { width: 58%; font-size: 18px; font-weight: 300; padding: 70px 0 30px 70px; background: url(../img/sign_bg_right.jpg) center center no-repeat; background-size: cover !important; display: flex; color: #000; } #our-products-right-text { width: 60%; } #our-products-right-text a, #influancer-text a { font-size: 24px; display: inline-block; max-width: 200px; } #our-products-right-text a span:after, #influancer-text a span:after { position: absolute; bottom: 0; right: 0; content: ""; width: 250px; background: #000; height: 2px; transition: all 0.3s; } #our-products-right-text a:hover span:after, #influancer-text a:hover span:after { width: 300px; } #our-products-right-text a span, #influancer-text a span { font-weight: bold; position: relative; } #our-products-right-image { width: 40%; background: url(../img/sign_product.png) center right no-repeat; background-size: contain !important; } #our-products-left { width: 42%; background: url(../img/sign_bg_left.jpg) center center no-repeat; background-size: cover !important; padding: 30px; display: flex; } #product-info { background: url(../img/sign2.png) right -60px no-repeat; position: relative; padding-top: 60px; padding-left: 10px; padding-right: 10px; } #product-info h5 { font-size: 39px; margin: 0; font-weight: 400; } #product-info h6, #new-products h6 { font-size: 25px; font-weight: 700; text-align: center; margin: 60px 0 20px 0; } #new-products { background: url(../img/pink.jpg) no-repeat left center; } #home-all #product-info .container { position: relative; z-index: 2; } #product-info-bg { color: #f4f4f4; font-size: 10vw; line-height: 10vw; font-weight: bold; position: absolute; top: 40px; z-index: 1; } #personalize-home-heading { text-align: center; } #personalize-home-heading h6 { display: inline-block; margin: 25px 0 20px 0; padding: 0 30px 15px 30px; font-size: 27px; border-bottom: 2px solid #000; } #personalize-home-up, #personalize-home-down { display: flex; flex-wrap: wrap; } #personalize-home-right-up a { padding: 25px 20px; border: 2px solid #fff; transition: all 0.3s; color: #fff; font-size: 20px; font-weight: bold; display: block; margin: 0 auto; text-align: center; } #personalize-home-right-up a:hover { background: #fff; color: #000; } #personalize-home-right-up span { display: block; font-size: 11.5px; } #personalize-home-right-up { background: url(../img/wzornik.jpg) no-repeat center center; width: 50%; display: flex; align-items: center; } #personalize-home-left-up { background: url(../img/personalize-left-up.jpg) no-repeat left center; background-size: contain; width: 50%; text-align: right; padding: 40px; font-size: 35px; font-weight: 300; } #personalize-home-left-up span { font-weight: bold; } #personalize-home-right-down { background: url(../img/pasek.jpg) no-repeat center right; background-size: contain; width: 50%; text-align: right; padding: 40px; font-size: 35px; font-weight: 300; text-align: left; } #personalize-home-right-down a { font-weight: bold; } #personalize-home-right-down a { position: relative; } #personalize-home-right-down a:before, #personalize-home-right-down a:after { display: none } #personalize-home-right-down a:hover:before { position: absolute; left: -40px; top: 50%; margin-top: -1px; content: ""; width: 20px; height: 2px; background: #000; display: block; } #personalize-home-right-down a:hover:after { position: absolute; left: -60px; top: 50%; margin-top: -1px; content: ""; width: 20px; height: 2px; background: #fff; display: block; } #personalize-home-right-down a:hover span { display: block; } #personalize-home-right-down a span { display: none; position: absolute; font-size: 24px; top: 0; left: -311px; color: #fff; text-transform: uppercase; } #personalize-home-right-down a strong { font-size: 13px; display: block; font-weight: normal; } #personalize-home-left-down { background: url(../img/szczegoly.jpg) no-repeat left center; background-size: cover; width: 50%; display: flex; align-items: center; } #newsletter-box { margin-top: 60px; background: url(../img/newsletter.jpg) no-repeat center center; height: 357px; width: 100%; padding: 30px; } #newsletter-box>div { border: 2px solid #fff; } #home-all #newsletter-box div.container { display: flex; flex-wrap: wrap; align-items: center; min-height: 307px; } #newsletter-box .newsletter-box-half { width: 50%; font-size: 28px; color: #fff; } #newsletter-box .newsletter-box-half form { width: 100%; position: relative; border: 2px solid #fff; } #newsletter-box .newsletter-box-half input[type="email"] { width: 100%; padding-right: 157px; height: 60px; font-size: 17px; background: none; font-family: inherit; border: none; background: rgba(255, 255, 255, 0.3); padding: 0 10px; } #newsletter-box .newsletter-box-half input[type="text"] { display: none } #newsletter-box .newsletter-box-half .es-field-wrap:first-child { display: none } #newsletter-box .newsletter-box-half input::-webkit-input-placeholder { color: #fff; } #newsletter-box .newsletter-box-half input[type="submit"] { width: 157px; position: absolute; border: none; right: 0; top: 0; border-left: 2px solid #fff; background: #000; box-shadow: 0; color: #fff; font-weight: bold; height: 60px; font-family: inherit; border-radius: 0; } #newsletter-box .newsletter-box-half>span { font-size: 48px; display: block; } .es-field-wrap { margin-bottom: 0; } .es-field-wrap label { font-size: 0; display: block; margin-bottom: 0; } #newsletter-box .newsletter-box-half span#es_msg { font-size: 14px; } #newsletter-box .newsletter-box-half strong { display: block; } #newsletter-box .newsletter-box-half:first-child { text-align: right; padding-right: 20px; } #newsletter-box .newsletter-box-half:last-child { padding-left: 20px; padding-right: 20px; } #newsletter-box .es_lablebox, #newsletter-box .es_textbox:first-child { display: none; } #newsletter-box .es_textbox, .es_button, .es_msg { padding: 0 !important } #newsletter-box .es_form_success .es_msg { background: #008600; color: #fff; font-size: 11px !important; } #newsletter-box .es_msg { background: #F00; color: #fff; font-size: 11px !important; text-align: center; } #influancer { display: flex; flex-wrap: wrap; margin-top: 90px; } #influancer-img { width: 35%; background: url(../img/insta.jpg) no-repeat center center; background-size: cover !important; padding-bottom: 40%; } #influancer-text { width: 30%; padding: 50px; font-size: 18px; } .large-text { font-size: 33px; } #influancer-text span { font-weight: bold; } #influancer-images { width: 35%; display: flex; flex-wrap: wrap; } .influancer-img { width: 50%; padding-bottom: 50%; } #home-all .wpcs_product_carousel_slider .product_image_container .product_thumb_link { border-radius: 0; border: none !important; width: 100%; box-shadow: none !important; } #home-all .wpcs_product_carousel_slider .wpcs_rating.woocommerce { display: none; } #woo-product-carousel-wrapper-340678127, .product-carousel .owl-carousel { padding: 0 50px !important; } #home-all .owl-carousel .owl-nav.disabled { display: block; } #home-all .wpcs_product_carousel_slider .owl-item .item h4.product_name a { text-align: center; padding: 0 20px; font-size: 14px; } #home-all .wpcs_product_carousel_slider .cart { display: none; } .products.columns-1 { padding: 0 50px !important; } #home-all .woocommerce ul.products li.product { box-shadow: none; } #home-all .woocommerce ul.products li.product { min-height: 100%; transition: all 0.3s; } #home-all .woocommerce ul.products li.product .button { top: 50%; margin-top: -58px; bottom: auto; left: 50%; margin-left: -25px; opacity: 0; background: url(../img/koszyk.png) center center no-repeat; box-shadow: none; border: none; border-radius: 0; } #home-all .woocommerce ul.products li.product .price { font-size: 1em; } #home-all .woocommerce ul.products li.product:hover .button { opacity: 1; } #home-all .woocommerce ul.products li.product .imagewrapper { background: #000; } #home-all .woocommerce ul.products li.product img { transition: all 0.3s; } #home-all .woocommerce ul.products li.product:hover img { opacity: 0.6; } #home-all .woocommerce ul.products li.product .woocommerce-loop-product__title, #home-all .woocommerce ul.products li.product .price { font-weight: bold; color: #000; } #home-all .product_container { overflow-y: hidden; } #home-all .product-carousel .owl-prev, #home-all .product-carousel .owl-next { position: absolute; top: 50%; left: 0px; margin-top: -18px; width: 36px; text-indent: -9999px; cursor: pointer; height: 36px; background: url(../img/left_nav.png); } #home-all .product-carousel .owl-next { right: 0; left: auto; margin-top: -18px; width: 36px; height: 36px; background: url(../img/right_nav.png); } #home-all .personalize-carousel { padding: 50px; } #home-all .personalize-carousel .owl-prev, #home-all .personalize-carousel .owl-next { position: absolute; top: 50%; left: 0px; margin-top: -18px; width: 36px; text-indent: -9999px; cursor: pointer; height: 36px; background: url(../img/left_nav_white.png); } #home-all .personalize-carousel .owl-next { right: 0; left: auto; margin-top: -18px; width: 36px; height: 36px; background: url(../img/right_nav_white.png); } .more-button-container { text-align: center; padding: 30px; margin-top: 40px; } .black-button { padding: 15px 30px; color: #fff; background: #000; display: inline-block; transition: all 0.3s; } .black-button:hover { background: #d0d0d0; color: #000; } .black-button span { font-weight: bold; } #contact-box { padding: 15px 25px; background: #e8eaeb; margin: 80px auto; display: block; text-align: center; max-width: 500px; font-size: 20px; } #contact-box span { font-weight: bold; } #contact-buttons { display: flex; flex-wrap: wrap; padding: 0 20px; max-width: 800px; width: 100%; margin: 0 auto; margin-bottom: 60px; } #contact-left { text-align: left; width: 50%; font-size: 35px; font-weight: bold; } #contact-right span { font-size: 25px; font-weight: bold; display: block; border-bottom: 2px solid #000; margin-bottom: 10px; padding-bottom: 5px; } #contact-right { font-size: 20px; } #contact-right { text-align: right; width: 50%; } #form-bottom { width: 100%; display: none; } #cspFormShell_4_882784 input:not([type="checkbox"]):not([type="radio"]), #cspFormShell_4_882784 textarea, #cspFormShell_4_882784 .cfsListSelect, #cspFormShell_4_882784 .cfsCheck { font-size: 15px; } #home-all .cfsField_submit input[type="submit"] { padding: 15px 30px !important; color: #fff !important; background: #000 !important; display: inline-block !important; transition: all 0.3s !important; font-size: 15px !important; box-shadow: none !important; } #home-all .paski .woocommerce ul.products li.product .woocommerce-loop-product__title, #home-all .woocommerce ul.products li.product .price { color: #fff; } #home-all .paski .woocommerce.columns-4 { position: relative; z-index: 3; } #create-product { background: url(../img/skomponuj.jpg) no-repeat center center; height: 357px; display: flex; align-items: center; justify-content: space-between; } #create-product a { padding: 25px 5px; border: 2px solid #fff; transition: all 0.3s; color: #fff; font-size: 19px; font-weight: bold; display: block; margin: 0 auto; } #create-product a:hover { background: #fff; color: #000; } #new-footer { background: url(../img/footer.jpg) no-repeat center center !important; background-size: cover !important } #new-footer.footer .widget-title { font-size: 18px; font-weight: bold; text-align: left; border-bottom: 2px solid #fff; margin-top: 15px; padding-bottom: 17px; } #new-footer.footer .nav { text-align: left; } #new-footer .footer-bottom { background: none; font-size: 16px; } #new-footer.footer .nav>li>a { padding: 5px; } #new-footer.footer p { font-size: 16px; } @media screen and (max-width: 1640px) { #personalize-home-right-down { padding-right: 300px; background: url(../img/pasek.jpg) no-repeat bottom right; background-size: 290px; } } @media screen and (max-width: 1380px) { #home-all img.respv { max-width: 290px; width: 100%; } #new-home-content h1 { font-size: 40px; } .nav>li>a { padding: 10px 9px !important; } #new-menu .nav-justified>li { max-width: 130px; } } @media screen and (max-width: 1170px) { #new-home-content h1 { font-size: 35px; } } @media screen and (max-width: 1023px) { #who-we-are-left, #who-we-are-right { width: 100%; } #our-products-right-image { display: none; } #our-products-right-text { width: 100%; padding-right: 20px; } #newsletter-box .newsletter-box-half { width: 100%; } #influancer-images { width: 100%; } #influancer-img { width: 40% } #influancer-text { width: 60% } .influancer-img { width: 33.33%; padding-bottom: 33.33%; } #personalize-home-left-up, #personalize-home-right-down { font-size: 25px; } } @media screen and (max-width: 640px) { .wcpa_form_outer .wcpa_row { width: 100%; } #new-home-content h1 { font-size: 20px; } #personalize-home-right-down { background: url(../img/pasek.jpg) no-repeat bottom right; background-size: 270px; padding-bottom: 200px !important; padding-right: 40px !important } #personalize-home-left-up { background: url(../img/personalize-left-up.jpg) no-repeat left bottom; background-size: 250px; padding-bottom: 210px !important; } #contact-left, #contact-right { width: 100%; text-align: left; margin-top: 20px; } .large-text { font-size: 25px; } #influancer { margin-top: 10px; } #influancer-text { padding: 55px 20px; } #new-home-pagination { display: none; } #new-home-content { padding: 40px 0; } #who-we-are { background: none; } #who-we-are-left { padding: 30px; } #our-products-right { width: 100%; padding: 30px; } #our-products-left { display: none; } #newsletter-box .newsletter-box-half input[type="submit"] { width: 100%; position: static; border-left: 0; } #newsletter-box .newsletter-box-half span { font-size: 27px; } #newsletter-box { padding: 10px; height: auto; } #newsletter-box .newsletter-box-half { font-size: 18px; } #personalize-home-left-up, #personalize-home-right-down, #personalize-home-left-down, #personalize-home-right-up { width: 100%; } #personalize-home-right-down, #personalize-home-left-up { padding: 20px; } #personalize-home-right-up { padding: 40px 0; } } @media screen and (max-width: 480px) { #influancer-img { display: none; } #influancer-text { width: 100%; } #new-home-carousel { width: 80%; } #new-home-content { width: 20%; } #new-home-content>div { margin-left: -180%; width: 280%; } } .jumbotron { padding-right: 50px !important; padding-left: 50px !important; margin-right: 0; margin-left: 0; @include media-max(1200px) { padding-right: 0 !important; padding-left: 0 !important; } } .container, .container-fluid { padding-right: 50px; padding-left: 50px; margin-right: 0; margin-left: 0; @include media-max(1200px) { padding-right: 20px; padding-left: 20px; } } .main-title { font-size: 55px; line-height: 50px; color: #000000; font-family: 'gilroy-regular', sans-serif; margin-bottom: 30px; @include media-max(1200px) { font-size: 35px; line-height: 35px; } } /* Homepage */ .home { p { font-family: 'gilroy-light', sans-serif; } .s1 { margin-top: 60px; padding: 60px 0; position: relative; &__image_before { @include media-min(1200px) { content: ""; @include absolute(0, auto, 0, 50px); background: $primary-color; background-size: cover; width: 30%; z-index: -1; &:before { content: ""; @include absolute(0, 0, 0, 0); width: 100%; height: 100%; background: url("/wp-content/uploads/2022/05/dotted__before.png"); background-size: cover; } } } &__title_rotate { color: #000000; font-weight: 300; text-align: right; text-transform: uppercase; white-space: nowrap; transform-origin: center right 0; position: absolute; top: -15px; left: -310px; font-size: 28px; letter-spacing: 8px; line-height: 28px; @include css3(transform, rotate(-90deg)); } &__text_box { padding: 0 100px 0 40px; @include media-max(1200px) { padding: 20px 0; } .big-title { font-size: 25px; line-height: 30px; margin-bottom: 30px; } } &__buttons { margin-top: 50px; .button { &:first-of-type { margin-right: 10px; color: #fff; &:before { background: #000; width: 100%; } &:hover { color: #000 !important; &:before { width: 0; } } } } } &__box_left { @include media-min(1200px) { margin-left: 50px; } .small__title { font-size: 15px; letter-spacing: 6px; color: #000000; margin-bottom: 8px; text-transform: uppercase; line-height: 1; } .title { font-size: 25px; color: #000000; line-height: 30px; @include media-max(1200px) { margin-bottom: 20px; } } } } .s2 { margin-top: 80px; position: relative; &__title_rotate { color: #fff; font-weight: 300; text-align: right; text-transform: uppercase; white-space: nowrap; transform-origin: center right 0; position: absolute; bottom: 430px; right: -30px; font-size: 28px; letter-spacing: 8px; line-height: 28px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); } .col-sm-12.col-md-4 { @include media-max(1200px) { margin-top: 30px; } } .swiper-slider.type-custom:not(.grid) .slide { @include media-max(1200px) { height: 260px !important; } @include media-max(1600px) { height: 450px; } @include media-min(1601px) { height: 580px; } } .swiper { &-box .swiper-pagination { font-size: 0; left: auto; right: 0; bottom: -30px; display: flex; align-items: center; &-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; margin: 0 2px; opacity: .2; transition: $transition; &-active { width: 10px; height: 10px; background: #000; opacity: 1; } } } } &__buttons { @include media-min(1200px) { padding: 0 50px 100px 50px; } @include media-max(1200px) { margin-top: 30px; width: 100%; } .button { border-color: #fff; background: transparent; color: #fff; position: relative; &:before { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: #fff; transition: all .35s; z-index: -1; } @include media-max(1200px) { border-color: #000; background: transparent; color: #000; position: relative; width: 100%; &:before { background: #000; } &:hover { color: #fff !important; &:before { width: 100%; } } } &:hover { color: #000 !important; background: #fff; &:before { width: 100%; } } } } &__image_before { @include absolute(0, 50px, 50px, auto); width: 30%; overflow: hidden; @include media-max(1200px) { display: none; } } &__text_box { @include media-min(1200px) { padding-left: 150px; } p { font-size: 20px; } } } .s3 { background: url('/wp-content/uploads/2022/05/paralaksa-4.jpg'); background-size: 100%; height: 650px; background-repeat: no-repeat; background-position: center 40%; background-size: cover; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-top: 80px; @supports (-webkit-touch-callout: none) { background-attachment: scroll; } } .s4 { @include media-min(1200px) { padding: 70px 150px; } @include media-max(1200px) { padding: 15px 0; margin-top: 50px } .swiper-wrapper { height: 550px; @include media-max(1200px) { height: 450px; } } .product-box { border: unset; box-shadow: unset; display: block; &:hover { box-shadow: unset; } .product-box-desc { padding: 20px 0; text-align: start } .imagewrapper { height: 450px; border: unset; width: 100%; object-fit: cover; @include media-max(1600px) { height: 350px; } } .product-box-img__hov, .product-box-img { height: 450px; border: unset; @include media-max(1600px) { height: 350px; } } &-desc__price { bdi { font-size: 16px; line-height: 16px; color: #333333; font-weight: 300; } } &-desc__h { font-size: 18px; line-height: 25px; color: #333333; font-weight: bold; margin-bottom: 5px; } } .sub-title { font-size: 20px; line-height: 20px; color: #333333; font-weight: 300; } .swiper { &-box .swiper-pagination { font-size: 0; left: 0; right: 0; bottom: -30px; display: flex; align-items: center; justify-content: center; &-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; margin: 0 2px; opacity: .2; transition: $transition; &-active { width: 10px; height: 10px; background: #000; opacity: 1; } } } } } .s5 { margin-top: 40px; &__center_box { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0px 0px; grid-template-areas: "s5__section_1 s5__section_2 s5__section_3" "s5__section_1 s5__section_4 s5__section_5"; @include media-max(1200px) { display: flex; flex-direction: column; } } &__box_inside { @include absolute(0, 0, 0, 0); padding: 80px; margin-top: auto; margin-bottom: auto; display: flex; flex-direction: column; justify-content: center; @include media-max(1200px) { padding: 20px; } } @each $item in (1 2 3 4 5) { &__section_#{$item} { margin: 10px; position: relative; @include media-max(1200px) { margin: 0 0 15px 0 !important; } } } &__section_1 { grid-area: s5__section_1; margin-left: 0; overflow: hidden; img { object-fit: cover; width: 100%; height: 100%; } } &__section_2 { grid-area: s5__section_2; img { object-fit: cover; width: 100%; height: 100%; } } &__section_3 { grid-area: s5__section_3; background: $primary-color; margin-right: 0; position: relative; @include media-max(1200px) { height: 400px; } &:before { content: ""; @include absolute(0, 0, 0, 0); width: 100%; height: 100%; background: url("/wp-content/uploads/2022/05/dotted__before.png"); background-size: cover; } .button { border-color: #000; background: transparent; position: relative; p { color: #000; z-index: 1; position: relative; } &:before { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: #000; transition: all .35s; z-index: 0; } &:hover { p { color: #fff !important; } &:before { width: 100%; } } } .content { .sub-title { font-size: 15px; letter-spacing: 6px; color: #000; text-transform: uppercase; line-height: 1; } .title { font-size: 35px; line-height: 40px; color: #000; font-family: 'gilroy-regular', sans-serif; margin-top: 10px; margin-bottom: 5px; } .desc { font-size: 16px; margin-bottom: 40px; } } img { object-fit: cover; width: 100%; height: 100%; } } &__section_4 { grid-area: s5__section_4; @include media-max(1200px) { height: 400px; } .s5__box_inside { @include media-min(1200px) { text-align: right; } } .button { border-color: #fff; background: transparent; position: relative; p { color: #fff; z-index: 1; position: relative; } &:before { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: #fff; transition: all .35s; z-index: 0; } &:hover { p { color: #000 !important; } &:before { width: 100%; } } } .content { .sub-title { font-size: 15px; letter-spacing: 6px; color: #fff; text-transform: uppercase; line-height: 1; } .title { font-size: 35px; line-height: 40px; color: #fff; font-family: 'gilroy-regular', sans-serif; margin-top: 10px; margin-bottom: 5px; } .desc { font-size: 16px; margin-bottom: 40px; color: #fff; } } img { object-fit: cover; width: 100%; height: 100%; } } &__section_5 { grid-area: s5__section_5; margin-right: 0; overflow: hidden; img { object-fit: cover; width: 100%; height: 100%; } } } .s6 { @include media-min(1200px) { padding: 70px 150px; } @include media-max(1200px) { padding: 15px 0; } .swiper-wrapper { height: 550px; @include media-max(1200px) { height: 450px; } } .product-box { border: unset; box-shadow: unset; display: block; &:hover { box-shadow: unset; } .product-box-desc { padding: 20px 0; text-align: start } .imagewrapper { height: 450px; border: unset; width: 100%; object-fit: cover; @include media-max(1600px) { height: 350px; } } .product-box-img__hov, .product-box-img { height: 450px; border: unset; @include media-max(1600px) { height: 350px; } } &-desc__price { bdi { font-size: 16px; line-height: 16px; color: #333333; font-weight: 300; } } &-desc__h { font-size: 18px; line-height: 25px; color: #333333; font-weight: bold; margin-bottom: 5px; } } .sub-title { font-size: 20px; line-height: 20px; color: #333333; font-weight: 300; } .swiper { &-box .swiper-pagination { font-size: 0; left: 0; right: 0; bottom: -30px; display: flex; align-items: center; justify-content: center; &-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; margin: 0 2px; opacity: .2; transition: $transition; &-active { width: 10px; height: 10px; background: #000; opacity: 1; } } } } } .s7 { margin-top: 50px; &__left_box { display: flex; height: 100%; align-items: end; padding: 0 60px; @include media-max(1200px) { padding: 0 30px; } } .s7__left_box { background: url("/wp-content/uploads/2022/05/s7__img_left.jpg"); background-size: cover; height: 100%; .button { border-color: #fff; background: transparent; position: relative; p { color: #fff; z-index: 1; position: relative; } &:before { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: #fff; transition: all .35s; z-index: 0; } &:hover { p { color: #000 !important; } &:before { width: 100%; } } } .content { .sub-title { font-size: 15px; letter-spacing: 6px; color: #fff; text-transform: uppercase; line-height: 1; } .title { font-size: 35px; color: #fff; font-family: 'gilroy-regular', sans-serif; } .desc { font-size: 16px; margin-bottom: 40px; color: #fff; } } } .s7__right_box { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "s7__section_1 s7__section_2 s7__section_3" "s7__section_5 s7__section_6 s7__section_3" "s7__section_5 s7__section_4 s7__section_4"; @include media-max(1200px) { display: none; } } @each $item in (1 2 3 4 5 6) { &__section_#{$item} { overflow: hidden; img { transform: scale(1.05); } } } .s7__section_1 { grid-area: s7__section_1; img { width: 100%; } } .s7__section_2 { grid-area: s7__section_2; img { width: 100%; } } .s7__section_3 { grid-area: s7__section_3; overflow: hidden; img { width: 100%; } } .s7__section_4 { grid-area: s7__section_4; img { width: 100%; } } .s7__section_5 { grid-area: s7__section_5; overflow: hidden; img { width: 100%; } } .s7__section_6 { grid-area: s7__section_6; img { width: 100%; } } } .s8 { margin-top: 70px; &__center_box { text-align: center; background: $primary-color; position: relative; padding: 130px 0; @include media-max(1200px) { padding: 130px 30px; } &:after { content: ""; @include absolute(20px, 20px, 20px, 20px); padding: 10px; border: 2px solid #fff; } &:before { content: ""; @include absolute(0, 0, 0, 0); width: 100%; height: 100%; background: url("/wp-content/uploads/2022/05/dotted__before.png"); background-size: contain repeat; } } .title { color: #000; font-size: 55px; line-height: 55px; margin-bottom: 20px; position: relative; z-index: 1; font-family: 'gilroy-light', sans-serif; @include media-max(1200px) { font-size: 35px; line-height: 45px; } a { font-family: 'gilroy-regular', sans-serif; color: #000; @extend %link-color; &:hover { background-size: 100% 2px !important; } } } .sub-title { font-size: 18px; letter-spacing: 5px; color: #000; text-transform: uppercase; position: relative; z-index: 1; } } .s9 { margin-top: 70px; margin-bottom: 70px; .col-sm-12.col-md-8 { padding: 0; } &__title_rotate { color: #fff; font-weight: 300; text-align: right; text-transform: uppercase; white-space: nowrap; transform-origin: center right 0; position: absolute; bottom: 400px; left: -280px; font-size: 28px; letter-spacing: 8px; line-height: 28px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); } &__left_box { @include media-max(1200px) { padding-bottom: 40px; } .title { font-size: 18px; line-height: 28px; color: #252525; text-transform: uppercase; margin-bottom: 20px; padding-left: 60px; position: relative; &:after { content: ""; width: 1px; height: 40px; color: #B1B1B1; border-right: 1px solid #B1B1B1; @include absolute(-6px, 0, auto, 44px); @include media-max(1200px) { display: none; } } @each $item in (1 2 3 4) { &.bg__#{$item} { &:before { content: ""; background: url(/wp-content/uploads/2022/05/s9__icon_#{$item}.png); background-size: contain; background-repeat: no-repeat; @include absolute(auto, 0, 0, 0); width: 40px; height: 100%; @include media-max(1200px) { @include absolute(auto, 0, -5px, 0); } } } } } p { line-height: 1.6; } } &__right_box { display: flex; justify-content: end; align-items: end; position: relative; padding: 60px; overflow: hidden; object-fit: cover; height: 100%; img { width: 100%; position: absolute; object-fit: cover; height: 100%; } @include media-max(1200px) { height: 600px; } .button { border-color: #fff; background: transparent; position: relative; p { color: #fff; z-index: 1; position: relative; } &:before { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: #fff; transition: all .35s; z-index: 0; } &:hover { p { color: #000 !important; } &:before { width: 100%; } } } } } }