* { margin: 0; padding: 0; } a { text-decoration: none; } li { list-style: none; } body { background-color: #faf9f9; font-family: 'Open Sans', sans-serif; overflow: auto; position: relative; } body::-webkit-scrollbar { width: 0; } .fe-main-container { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 100%; min-height: 100vh; transition: all .2s ease; } header { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; position: fixed; top: 0; z-index: 102; width: 100%; height: 8.5rem; background-color: #fff; transition: all .2s ease; } .fe-header-info { display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: relative; width: 80%; margin-top: 0.5rem; transition: all .2s ease; } .fe-header-location { display: flex; flex-direction: row; align-items: center; justify-content: center; width: auto; height: 1rem; color: #000; user-select: none; transition: all .2s ease; } .fe-header-location i { font-size: 1.3rem; transition: all .2s ease; } .fe-header-language { width: 8rem; margin-left: 1rem; transition: all .2s ease; } .fe-header-language a { color: #BBB; padding: 5px; transition: all .2s ease; border-radius: 5px; } .fe-header-language a:hover { color: #fff; background-color: #157DEC; } .active-lang { background-color: #157DEC; } .active-lang { color: #fff !important; } .fe-other-platforms { width: 80%; transition: all .2s ease; } .fe-header-ul-info { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; width: 100%; height: 1rem; transition: all .2s ease; } .fe-header-li-info a { font-size: 0.8rem; margin-left: 1rem; color: #BBB; padding: 0.4rem; transition: all .2s ease-out; } .fe-header-li-info a:hover { color: #000; } #fe-li-info-1 { color: #fff; padding: 0.4rem; background-color: #157DEC; border-radius: 5px; transition: all .2s ease; } #fe-header-ul-menu { top: -70%; right: 0; font-size: 2.5rem; position: absolute; display: none; transition: all .2s ease; } .bur-active { display: block !important; transition: all .2s ease; } .fe-header-other { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; position: relative; width: 80%; height: 6rem; transition: all .2s ease; } .fe-header-logo { display: flex; align-items: center; justify-content: start; width: 18%; height: 90%; color: #000; transition: all .2s ease; } .fe-header-logo img { height: auto; width: 100%; transition: all .2s ease; } .fe-header-search { display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; width: 40%; height: 90%; transition: all .2s ease; } .fe-header-search-form { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; transition: all .2s ease; } .fe-header-search-form input { width: 80%; height: 3rem; padding-left: 7rem; border: none; font-style: italic; background-color: #F5F5F5; font-family: 'Open Sans', sans-serif; border-top: 1px solid #157DEC; border-bottom: 1px solid #157DEC; transition: all .2s ease; } .fe-header-search-form input:focus { outline: none !important; background: #F5F5F5 !important; border-top: 1px solid #157DEC; border-bottom: 1px solid #157DEC; } .arrow-down { display: flex; align-items: center; justify-content: flex-start; position: absolute; z-index: 99; height: 2.8rem; width: 7rem; left: 0; padding-right: 0.2rem; border-radius: 5px 0 0 5px; border: 1px solid #157DEC; background-color: #157DEC; } .arrow-down p { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 0 0.1rem 0 0.5rem; height: 3rem; width: 4.5rem; margin-right: 0.5rem; z-index: 99; background-color: #157DEC; color: #fff; font-size: 0.9rem; border-radius: 5px 0 0 5px; cursor: pointer; font-family: 'Open Sans', sans-serif; } .arrow-down .bxs-down-arrow { cursor: pointer; } .arrow-down i { color: #fff; cursor: pointer; } #search-category { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #search-category i { font-size: 0.7rem; margin-left: 0.2rem; transition: all .2s ease-in-out; } #search-btn { display: flex; align-items: center; justify-content: center; width: 4rem; height: 3rem; border: none; background-color: #F5F5F5; border: 1px solid #157DEC; border-left: none; border-radius: 0 5px 5px 0; cursor: pointer; } #search-btn i { font-size: 1.5rem; line-height: 1.8rem; color: #000; } .fe-search-popup { width: 100%; height: 100vh; position: fixed; z-index: 99999; padding-top: 3rem; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); display: none; } .fe-popup-list { display: flex; flex-direction: column; align-items: center; justify-content: start; position: relative; width: 45rem; height: 47.5rem; background-color: #fff; border-radius: 20px; margin: 0px auto; } #close-popup { margin: 0.5rem; font-size: 2.3rem; position: absolute; top: 0; right: 0; cursor: pointer; } .fe-popup-category-list { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 90%; height: 90%; margin-top: 2.5rem; } .fe-popup-category-items { display: flex; flex-direction: row; align-items: center; justify-content: start; width: 100%; height: 93%; } .fe-popup-cat-item { display: flex; flex-direction: column; align-items: center; justify-content: start; height: 100%; width: 50%; } #popup-category-all { display: flex; flex-direction: row; align-items: flex-start; justify-content: start; position: relative; width: 40%; font-size: 0.9rem; font-weight: bold; padding: 0.7rem 0 0.7rem 2.2rem; margin-bottom: 0.5rem; cursor: pointer; transition: all .2s ease-in-out; } #popup-category-all:hover { background-color: rgb(238, 254, 248); color: #157DEC; } #popup-category-all i { position: absolute; left: 2%; top: 18%; font-size: 1.6rem; color: #157DEC; } #popup-category { display: flex; flex-direction: row; align-items: flex-start; justify-content: start; position: relative; width: 80%; font-size: 0.9rem; font-weight: bold; padding: 0.7rem 0 0.7rem 2.2rem; margin-bottom: 0.5rem; cursor: pointer; transition: all .2s ease-in-out; } #popup-category:hover { background-color: rgb(238, 254, 248); color: #157DEC; } #popup-category i { position: absolute; left: 2%; top: 18%; font-size: 1.6rem; color: #157DEC; } .fe-header-ul { display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: relative; width: 35%; height: 90%; } .fe-header-li { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: all .2s ease-out; } .disabled { opacity: 0; z-index: -99rem; } .count-of-header { position: absolute; top: 0; right: 0; height: 1rem; width: 1rem; padding: 0.1rem; border-radius: 50%; text-align: center; color: #fff; background-color: #157DEC; } .count-of-count-of-header { position: absolute; top: -1px; left: 25%; } .fe-header-li i { font-size: 1.6rem; margin-bottom: 0.3rem; color: #000; transition: all .2s ease-out; } .fe-header-li a { color: #000; transition: all .2s ease-out; } .fe-header-link { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.9rem; width: 6rem; } .fe-header-li:hover #fe-header-link { color: #157DEC; } .active { display: block !important; } #ownroom-btn, #login-btn { border: none; border-radius: 5px; padding: 0.5rem; width: 100%; cursor: pointer; transition: all .2s ease; font-family: 'Open Sans', sans-serif; } #login-btn { background-color: #157DEC; color: #fff; margin-bottom: 0.5rem; } #ownroom-btn { background-color: #F5F5F5; color: #157DEC; font-weight: bold; } #login-btn:hover { background-color: #116dcf; } #ownroom-btn:hover { background-color: #eaeaea; } .fe-login-reg { display: none; position: fixed; background-color: rgba(0, 0, 0, 0.5); top: 0; z-index: 105; width: 100%; height: 100vh; padding-top: 5rem; } .fe-lore-popup { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; position: relative; width: 20rem; height: 15rem; margin: 0px auto; padding: 3rem; border-radius: 10px; background-color: #fff; } #close-lore-popup { font-size: 2rem; position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer; } .fe-lore-popup h2 { margin-bottom: 2rem; } .fe-popup-code { display: none; height: 100vh; width: 100%; } .fe-popup-confirm { position: relative; display: none; height: 100vh; width: 100%; } .fe-popup-code h4, .fe-popup-confirm h4 { margin-bottom: 1rem; font-size: 1.2rem; } .fe-popup-code form, .fe-popup-confirm form { display: flex; flex-direction: column; justify-content: center; } .fe-popup-code form input, .fe-popup-confirm form input { padding: 0.5rem; width: calc(100%-0.5rem); font-size: 1rem; margin-bottom: 1rem; border: 2px solid #BBB; border-radius: 5px; font-family: 'Open Sans', sans-serif; } .fe-popup-confirm form input { text-align: center; } .fe-popup-code form input:focus { outline: none !important; border: 2px solid #157DEC; } .fe-popup-confirm form input:focus { outline: none !important; border: 2px solid #157DEC; } #code-send-btn { background-color: #157DEC; border: none; padding: 0.7rem; color: #fff; font-size: 1rem; border-radius: 5px; cursor: pointer; font-family: 'Open Sans', sans-serif; } #back-page-btn { width: 100%; background: none; border: none; color: #157DEC; font-size: 1rem; margin-top: 1rem; cursor: pointer; font-family: 'Open Sans', sans-serif; } #change-num-btn { background: none; border: none; font-size: 1rem; color: #157DEC; margin-bottom: 1rem; cursor: pointer; font-family: 'Open Sans', sans-serif; } #resend-btn { background: none; border: none; font-size: 1rem; padding: 0.5rem; color: #157DEC; cursor: pointer; font-family: 'Open Sans', sans-serif; } .fe-popup-confirm a { position: absolute; bottom: -1rem; left: 28%; margin: 0px auto; color: #157DEC; margin-top: 0.5rem; } /* */ /* */ /* */ /* */ /* ---- TOP HEADER CATEGORY ---- */ /* */ /* */ /* */ /* */ .fe-top-header-categories { margin-top: 8.5rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 2rem; z-index: 101; background-color: #fff; position: relative; border-bottom: 1px solid #ccc; } .fe-top-header-categories-ul { display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; width: 80%; height: 3.4rem; } .fe-top-header-categories-li { display: flex; align-items: center; justify-content: center; text-align: center; position: relative; flex-grow: 1; } .fe-categories-link { font-size: 0.8rem; width: 100%; color: #000; padding: 0.5rem; border-bottom: 2px solid #fff; cursor: pointer; transition: all .2s ease-out; } .fe-categories-link:hover { color: #157DEC; border-bottom: 2px solid #157DEC; } .active-border { color: #157DEC !important; border-bottom: 2px solid #157DEC !important; } .fe-catalog-list-cont { display: flex; position: absolute; opacity: 0; top: 10.5rem; width: 100%; height: 100vh; z-index: -100; margin: 0px auto; background-color: rgba(0, 0, 0, 0.3); transition: all .2s ease-in-out; } .fe-dropdown-cat { display: flex; align-content: center; justify-content: center; position: absolute; left: 10%; display: none; top: 2rem; z-index: 100; width: 79.1%; height: 25rem; transition: all .2s ease-in-out; } .back-page-btn { display: none; height: 2rem; width: 2rem; margin-bottom: 1rem; } .back-page-btn i { font-size: 2rem; } .fe-catalog-list-box { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; height: 24rem; padding: 0.5rem; background-color: #fff; transition: all .2s ease-in-out; } #head-cat-log { display: none; } #close-side-bar { position: absolute; top: 1.5rem; right: 1rem; font-size: 2rem; display: none; cursor: pointer; } #open-side-bar { position: absolute; left: 1rem; top: 0.5rem; font-size: 2rem; display: none; cursor: pointer; } .activated { display: block !important; } .diactivated { display: none !important; } .gray-bg { display: none; position: fixed; background: rgba(0, 0, 0, 0.5); height: 100vh; width: 100%; z-index: 199rem; top: 10.5rem; left: 0; } .fe-catalog { width: 60%; height: 24rem; } .fe-catalog-list { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: start; width: 100%; height: 24rem; } .fe-header-category-list { /*display: flex;*/ /*flex-direction: column;*/ /*align-items: flex-start;*/ /*justify-content: start;*/ margin-bottom: 0.5rem; margin-right: 0.5rem; width: 8rem; } #fe-header-category-list-text { font-weight: bold; font-size: 0.9rem; margin-bottom: 0.3rem; color: #000; } .fe-header-category-list a { text-align: left; font-size: 0.8rem; margin-bottom: 0.5rem; color: #555; border-bottom: 1px solid #fff; } #fe-header-category-list-text:hover { color: #157DEC; border-bottom: 1px solid #157DEC; } .fe-header-category-list a:hover { color: #157DEC; border-bottom: 1px solid #157DEC; } .fe-catalog-add { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; width: 40%; height: 24rem; } #fe-catalog-add { width: 45%; } #fe-catalog-add .fe-ad-blog-description h2 { font-size: 0.9rem; margin-left: 0.2rem; margin-bottom: 0.2rem; } #fe-catalog-add .fe-ad-blog-description #fe-satyn-al { font-size: 0.9rem; } /* */ /* */ /* */ /* */ /* ---- TOP HEADER BRANDS ---- */ /* */ /* */ /* */ /* */ .fe-top-header-brands { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; height: 6rem; margin-top: 1rem; flex: 1; } .fe-carousel-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; } .fe-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; width: 5rem; height: 5rem; margin: 0.5rem; overflow: hidden; background-color: #fff; border: 1px solid #fff; box-shadow: rgb(100 100 111 / 20%) 0px 0px 16px 0px; transition: all .2s ease-out; } .fe-brand:hover { border: 1px solid #157DEC; } .fe-brand img { width: 4rem; height: 4rem; } #fe-brand-name { font-size: 0.8rem; text-align: center; color: #000; transition: all .2s ease-out; } .fe-brand:hover #fe-brand-name { color: tomato; } .brand-slim { width: 100%; } /* */ /* */ /* */ /* */ /* ---- TOP HEADER COROUSEL ---- */ /* */ /* */ /* */ /* */ .sim-slider-element img { width: 100% !important; height: 17.5rem; transition: all .2s ease; } .sim-slider { width: 80%; height: 17.5rem; margin-top: 3rem; background-color: white; transition: all .2s ease; } .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; width: 100%; left: 0; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 60px; height: 60px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; transition: all .2s ease; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("../images/Corousel/chevron-left-solid-60.png") no-repeat; transition: all .2s ease; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("../images/Corousel/chevron-right-solid-60.png") no-repeat; transition: all .2s ease; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; transition: all .2s ease; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; } /* */ /* */ /* */ /* */ /* ---- CONTENT ---- */ /* */ /* */ /* */ /* */ .fe-content-blog { width: 85%; height: auto; flex: 1; } .fe-sale-blog { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top: 3rem; border-radius: 10px; height: auto; } .fe-sale-header-links { margin: 1rem 0; position: relative; } #fe-sale-blog-text { width: auto; color: #000; font-size: 1.5rem; margin-bottom: 1rem; margin-left: 1.5rem; padding: 0.5rem; transition: all .2s ease-out; } #fe-sale-blog-text:hover { padding-left: 1.5rem; } #fe-see-all { position: absolute; top: 0.2rem; right: 1rem; color: #000; font-size: 0.9rem; color: #157DEC; } .fe-sale-items { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; height: auto; margin-bottom: 1rem; margin-left: 1rem; } .fe-sale-item { display: flex; flex-direction: column; align-items: center; justify-content: start; position: relative; overflow: hidden; width: 90%; height: 280px; margin: 1%; border-radius: 5px; background-color: #fff; transition: all .2s ease-out; box-shadow: rgb(100 100 111 / 20%) 0px 0px 0px 0px; } .fe-sale-item:hover { box-shadow: rgb(100 100 111 / 20%) -1px 15px 20px 4px; } .sale-lent { position: absolute; top: 0.8rem; left: 0; width: 4rem; height: 1.1rem; line-height: 1.2rem; font-size: 0.5rem; padding: 0.2rem 0; color: #fff; text-align: center; background-color: #157DEC; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .new-lent { position: absolute; top: 0.8rem; left: 0; width: 4rem; height: 1.1rem; line-height: 1.2rem; font-size: 0.5rem; padding: 0.2rem 0; color: #fff; text-align: center; background-color: #157DEC; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .product-heart { position: absolute; display: flex; align-items: center; justify-content: center; top: 0.5rem; right: 0.5rem; width: 0.8rem; height: 0.8rem; padding: 0.5rem; border-radius: 50%; background-color: #fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .product-heart i { color: #BBB; font-size: 1.2rem; transition: all .2s ease-out; } .product-heart .bxs-heart { color: red; } .product-heart i:hover { color: red; font-size: 1.2rem; } .product-heart i:active { color: red; font-size: 1.2rem; } .item-preloader { width: 100%; height: 18rem; background: #fff; background-image: url('../images/Brands/preloader_color.png'); background-repeat: no-repeat; background-size: contain; background-position-y: center; } .fe-sale-item img { width: 100%; height: 10rem; } .fe-sale-item-info { display: flex; flex-direction: column; align-items: center; justify-content: start; text-align: left; position: relative; width: 95%; margin-bottom: 1rem; color: #000; background-color: #fff; } .fe-item-rating-colors { width: 95%; height: 2rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .fe-item-rating { position: relative; width: auto; height: 1.5rem; display: flex; flex-direction: row; justify-content: space-evenly; } .fe-item-rating i { font-size: 1rem; line-height: 1.8rem; color: gold; } #fe-rating { margin-left: 0.3rem; } #fe-rating-num { color: #BBB; font-size: 0.8rem; margin-left: 0.3rem; } .colors-set { position: absolute; top: 55%; right: 0.5rem; padding: 0.2rem; border-radius: 50%; background-color: #fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .colors-set img { width: 1.5rem; height: 1.5rem; } .fe-sale-item-info a { color: #000; width: 95%; margin: 0.2rem 0; text-align: left; font-size: 1.2rem; border-bottom: 2px solid #fff; } .fe-sale-item-info p { width: 95%; margin: 0.4rem 0; font-size: 1rem; text-align: left; } #fe-product-price { font-size: 1rem; color: #157DEC; } #fe-product-old-price { width: 95%; font-size: 0.8rem; color: #000; } /* */ /* */ /* */ /* */ /* ---- AD BLOG ---- */ /* */ /* */ /* */ /* */ .fe-ad-blogs { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; margin-top: 3rem; width: 85%; height: auto; } .fe-ad-blog { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 23%; height: auto; border-radius: 5px; margin: 1rem 0; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); transition: all .2s ease-out; } .fe-ad-blog img { width: 100%; border-radius: 5px 5px 0 0; } .fe-ad-blog-description { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; background-color: #000; color: #fff; border-radius: 0 0 5px 5px; transition: all .2s ease-out; } .fe-ad-blog-description h2 { font-weight: 100; font-size: 1rem; color: #fff; margin: 0.3rem 0 0 0.7rem; } #fe-satyn-al { color: #fff; margin: 0.3rem; opacity: 0; transition: all .2s ease-out; } .fe-ad-blog:hover .fe-ad-blog-description { background-color: #157DEC; } .fe-ad-blog:hover #fe-satyn-al { opacity: 1; } /* */ /* */ /* */ /* */ /* ---- AD ---- */ /* */ /* */ /* */ /* */ .fe-full-width-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; height: auto; flex: 1; } .fe-full-ad { margin-top: 3rem; width: 100%; height: 10rem; background-color: #157DEC; transition: all .2s ease-out; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .fe-full-ad:hover { box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5); } .fe-full-ad img { width: 100%; height: 100%; } .fe-tree-part-ad { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; height: 10rem; margin-top: 3rem; } .fe-one-part-of-tree { width: 32%; height: 10rem; background-image: url('../images/Brands/preloader_color.png'); background-repeat: no-repeat; background-size: contain; background-position-y: center; transition: all .2s ease-out; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .fe-one-part-of-tree:hover { box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5); } .fe-one-part-of-tree img { width: 100%; height: 100%; border-radius: 5px; } /* */ /* */ /* */ /* */ /* ---- FOOTER ---- */ /* */ /* */ /* */ /* */ footer { display: flex; flex-direction: column; align-items: center; justify-content: start; position: relative; width: 100%; height: 35rem; background-color: #000; margin-top: 3rem; } .fefooter-info { width: 80%; height: auto; margin-left: 10%; } .fe-footer-info-ul { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; margin-top: 1.5rem; } .fe-footer-info-list { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; width: 25%; } #fe-footer-head-text { font-size: 1.5rem; color: #fff; margin-bottom: 0.5rem; } .fe-footer-qr { display: flex; flex-direction: row; align-items: center; justify-content: start; } .fe-footer-qr #fe-qr img { width: 4rem; height: 5rem; margin-right: 1rem; } .fe-footer-qr #fe-qr, #fe-logo { border-bottom: none; } #fe-border { font-size: 1.2rem; color: #fff; padding: 0.2rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid white; } .fe-footer-pay { display: flex; flex-direction: row; align-items: flex-start; justify-content: start; } .fe-footer-pay a { width: 4rem; height: 3rem; } .fe-footer-pay img { width: 100%; height: 100%; } .fe-footer-social { display: flex; flex-direction: row; align-items: flex-start; justify-content: start; } .fe-footer-social i { color: #000; margin: 0.5rem; background-color: #fff; border-radius: 5rem; padding: 0.4rem; } .fe-footer-social i:hover { border: none; } .fe-footer-info-list a { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; margin: 0.5rem 0; border-bottom: 1px solid #000; transition: all .2s ease-out; } .fe-footer-info-list a:hover { border-bottom: 1px solid #fff; } .fe-footer-info-list i { font-size: 2rem; margin-right: 0.5rem; } .fe-footer-copy-links { display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; bottom: 0; width: 100%; height: 4rem; background-color: #222; } .fe-footer-back { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 70%; padding: 0.5rem 0; } .fe-footer-copyrights { display: flex; flex-direction: row; align-items: center; justify-content: center; color: #fff; } .fe-footer-links { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 50%; } .fe-footer-links a { font-size: 1rem; color: #fff; border-bottom: 1px solid #222; transition: all .2s ease-out; } .fe-footer-links a:hover { border-bottom: 1px solid #fff; } /* */ /* */ /* */ /* */ /* ---- FAVORITES ---- */ /* */ /* */ /* */ /* */ .fe-content-container { display: flex; flex-direction: row; align-items: flex-start; justify-content: start; width: 85%; min-height: 30rem; margin-top: 3rem; } .fe-left-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 20%; height: auto; } .fe-left-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 100%; height: auto; } .fe-left-content h2 { margin-top: 3rem; } .fe-left-links { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 100%; height: auto; } .fe-left-links a { color: #000; margin-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #ccc; } .fe-left-links a:last-child { border-bottom: none; } #open-login, #book-product { color: #157DEC; cursor: pointer; } .fe-fav-main-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; min-height: 30rem; } .fe-favourite-items { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: start; width: 100%; } .fe-favourite-items .fe-sale-item { width: 18rem; position: relative; } .fe-favourite-items .fe-sale-item .colors-set img { margin-bottom: -0.2rem; } .fe-fav-cart-items { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; width: 100%; min-height: 30rem; } .cart-item { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 70%; min-height: 20rem; } .cart-item-box { display: flex; flex-direction: row; align-items: center; justify-content: space-around; margin-bottom: 1rem; width: 100%; min-height: 5rem; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } .cart-item-box img { height: 4rem; width: 4rem; } .cart-item-info-seca { font-size: 0.8rem; margin-top: 0.2rem; } .cart-delete-btn button { background: none; border: none; } .cart-delete-btn button i { font-size: 1.5rem; color: #157DEC; cursor: pointer; } .cart-check { display: flex; align-items: center; justify-content: center; position: relative; padding: 1rem; width: 20%; min-height: 10rem; background: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } .order-check-all, .order-check-delivery { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin: 0.8rem 0; } .order-total h3 { margin-bottom: 1rem; } .order-total { width: 100%; } .check-text { font-size: 0.8rem; } .order-check-delivery { padding-bottom: 0.5rem; border-bottom: 1px solid #ccc; } .order-check-total { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .order-list-price { font-size: 0.8rem; } #total-sale { background-color: #157DEC; color: #fff; width: 7rem; padding: 0.2rem; text-align: center; border-radius: 5px; font-size: 0.7rem; } #total-price { color: #157DEC; font-size: 1.2rem; } /* */ /* */ /* */ /* */ /* ---- ORDERLIST ---- */ /* */ /* */ /* */ /* */ .fe-ord-main-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 30rem; } #to-order { position: absolute; bottom: -3rem; width: 99%; padding: 0.5rem 0; text-align: center; font-size: 1.2rem; border-radius: 5px; border: 1px solid #157DEC; background-color: #157DEC; color: #fff; transition: all .2s ease; } #to-order:hover { background-color: #fff; color: #157DEC; } #to-order:active { background-color: #157DEC; color: #fff; } /* */ /* */ /* */ /* */ /* ---- CASTS ---- */ /* */ /* */ /* */ /* */ .fe-cast-main-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 30rem; } /* */ /* */ /* */ /* */ /* ---- TOP-CATEGORY LIST ---- */ /* */ /* */ /* */ /* */ .fe-top-category-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; } .fe-top-category-container>.fe-sale-items { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: start; position: relative; } .fe-top-category-container>.fe-sale-items>.fe-sale-item { position: relative; width: 22%; } .fe-top-category-container>.fe-sale-items>.fe-sale-item>.colors-set img { margin-bottom: -0.2rem; } .fe-little-category { display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; width: 90%; padding: 0.8rem 0; border-bottom: 1px solid #BBB; transition: all 0.2s ease-in-out; } .fe-lit-cat-text { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; transition: all 0.2s ease-in-out; } .fe-lit-cat-text p { font-size: 0.9rem; } .fe-lit-cat-items { top: 2rem; width: 100%; margin-top: 0.5rem; } .lit-sub-menu { position: absolute; opacity: 0; z-index: -99999; transition: all 0.1s ease-in-out; } .fe-lit-cat-items ul { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; background-color: #fff; } .fe-lit-cat-items ul li { margin: 0.3rem; font-size: 0.8rem; background-color: #fff; } .label-lit-cat { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 0.5rem; } .label-lit-cat input { height: 1rem; width: 1rem; margin: 0.3rem; } .label-lit-cat p { font-size: 0.8rem; } .label-lit-cat-color { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; } .fe-footer-searchs { width: 85%; height: auto; } .fe-footer-search-list { width: 100%; height: auto; } .fe-footer-search-list ul { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: start; } .fe-footer-search-list ul li { display: flex; align-items: center; margin: 0.2rem; line-height: 0.8rem; } .fe-footer-search-list ul li a { color: #000; font-size: 0.8rem; border: 1px solid #ccc; border-radius: 10px; padding: 0.4rem; transition: all 0.2s ease; } .fe-footer-search-list ul li a:hover { color: #157DEC; border: 1px solid #157DEC; } .about-category { width: 85%; margin-top: 2rem; } .about-category h3 { margin-bottom: 1rem; } .about-category p { line-height: 1.5rem; color: rgb(120, 120, 120); } /* */ /* */ /* */ /* */ /* ---- PRODUCT CONTAINER ---- */ /* */ /* */ /* */ /* */ .fe-product-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 85%; min-height: 30rem; margin-top: 3rem; } .fe-product-box { display: flex; flex-direction: row; align-items: flex-start; justify-content: start; width: 80%; min-height: 35rem; } .fe-product-img { width: 50%; height: 100%; } .slide-slow-prod { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .slide-slow-prod img { object-fit: cover; width: 100% !important; height: 100%; border-radius: 5px; } .fe-product-type { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; height: 100%; width: 40%; margin-left: 10%; } .fe-product-type .fe-item-rating { position: relative; width: 75%; line-height: 2rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: start; } .fe-product-type h3 { width: 75%; padding: 1rem 0; border-bottom: 1px solid #157DEC; } #fe-per-product-price { margin-top: 1rem; font-size: 1.2rem; } .fe-product-anthracite { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 100%; height: 7rem; margin-top: 1rem; } .fe-anthracite-img { width: 75%; height: 5.25rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: start; margin-top: 0.5rem; } .anthracite-color { height: 5.25rem; width: 5rem; margin: 0.25rem 0.25rem 0.25rem 0; } .anthracite-color img { height: 5rem; width: 100%; cursor: pointer; padding-bottom: 0.1rem; } .anth-act { border-bottom: 4px solid #157DEC; } .anth-dct { border-bottom: 4px solid #faf9f9; } .fe-product-size { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 100%; height: auto; margin: 1rem 0; } .fe-product-sizes { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: start; width: 75%; height: auto; margin-top: 0.5rem; } .fe-prod-size { position: relative; padding: 0.5rem 1.2rem; width: 1rem; margin: 0.2rem; text-align: center; border: 1px solid #ccc; color: #ccc; cursor: pointer; border-radius: 5px; transition: all .2s ease-in-out; user-select: none; } .fe-prod-size:hover { border: 1px solid #157DEC !important; color: #157DEC !important; } .prod-active { border: 1px solid #157DEC !important; color: #157DEC !important; } .prod-none { background-color: #ccc; color: #fff; cursor: default; } .prod-none:hover { border: 1px solid #ccc !important; color: #fff !important; } .fe-favor-cast { display: flex; flex-direction: row; align-items: center; justify-content: start; width: 75%; height: auto; } #like-btn { position: absolute; top: 0; right: 0; width: 2rem; height: 2rem; line-height: 2rem; background: #fff; border: none; font-size: 2rem !important; border-radius: 50%; cursor: pointer; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } #like-btn i { color: red; font-size: 1.4rem; } .fe-favor-cast #open-login, #book-product { width: 32%; height: 3rem; border-radius: 5px; transition: all .2s ease-in-out; } .fe-favor-cast #open-login, #book-product { background: #157DEC; color: #fff; border: 2px solid #fff; border: none; font-size: 1.1rem; font-family: 'Open Sans', sans-serif; } .fe-favor-cast #open-login:active, #book-product:active { background: #fff; color: #157DEC; border: 2px solid #157DEC; } .fe-product-info { width: 80%; margin-top: 3rem; } .fe-prod-main-info, .fe-prod-more-info { width: 100%; border-top: 1px solid #ccc; padding: 3rem 0; } .fe-prod-main-info h3, .fe-prod-more-info h3 { margin-bottom: 1rem; } .fe-prod-detail h4 { cursor: pointer; } .fe-prod-detail ul { margin-top: 1rem; padding-left: 1rem; } .fe-prod-main-info p, .fe-prod-detail li { line-height: 1.5rem; color: rgb(120, 120, 120); } .fe-prod-detail { display: flex; flex-direction: column; align-items: flex-start; position: relative; width: 100%; padding: 1rem 0; border-top: 1px solid #ccc; } .fe-prod-detail span { position: absolute; top: 0.7rem; right: 0; font-size: 1.5rem; cursor: pointer; } .prod-detail { display: none; } .fe-prod-detail:last-child { border-bottom: 1px solid #ccc; } .fe-product-info .fe-sale-items { display: flex; flex-direction: column; align-items: flex-start; position: relative; margin-left: -0.01rem; border-bottom: 1px solid #ccc; } #prod-sale-item { margin: 1.5rem 0; padding-bottom: 1rem; width: 100%; border-bottom: 1px solid #ccc; } .fe-prod-comment { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .fe-prod-comment label { width: 100%; } .rate-product { margin-top: 1rem; user-select: none; } .rate-product p { font-weight: bold; margin-right: 3rem; } .rate-product i { color: gold; font-size: 2rem; margin-top: 1rem; cursor: pointer; } #rate-count { font-size: 2rem; margin-left: 1rem; } .fe-prod-comment label input, .fe-prod-comment label textarea { width: 98.5%; padding: 0.5rem; margin-top: 1rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 5px; font-family: 'Open Sans', sans-serif; } .fe-prod-comment label textarea { max-width: 98.5%; min-width: 98.5%; max-height: 10rem; min-height: 10rem; resize: none; } .fe-prod-comment label input:focus { outline: none !important; border: 1px solid #157DEC; } .fe-prod-comment label textarea:focus { outline: none !important; border: 1px solid #157DEC; } .fe-prod-comment button { border: 1px solid #157DEC; background: none; width: 10rem; height: 2.5rem; margin-top: 0.8rem; border-radius: 5px; color: #157DEC; font-size: 1rem; transition: all .2s ease; cursor: pointer; font-family: 'Open Sans', sans-serif; } .fe-prod-comment button:hover { background: #157DEC; color: #fff; } .other-comments-container { width: 100%; height: auto; margin-bottom: 2rem; } .no-comment-text { margin: 1rem 1rem; } .other-comments { background-color: #fff; padding: 1rem; border-radius: 10px; position: relative; border: 1px solid gainsboro; margin-bottom: 1rem; } .comment-star { display: flex; flex-direction: row; position: absolute; right: 1rem; top: 1rem; } .comment-star i { color: gold; } .comment-text { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid gainsboro; } #fav-to-ord { /*display: flex;*/ /*align-items: center;*/ /*justify-content: center;*/ position: absolute; bottom: .6rem; right: 0.5rem; width: 2rem; font-size: 1.2rem; padding: 0.3rem; border-radius: 5px; background: #fff; color: #157DEC; border: none; cursor: pointer; transition: all .2s ease; box-shadow: rgb(100 100 111 / 20%) 0px 0px 20px 4px; } #fav-to-ord:hover { background: #157DEC; color: #fff; } .basket-act { background: #157DEC !important; color: #fff !important; } .basket-count { display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; width: 5rem; height: 3rem; } #count-p, #count-m { background: #157DEC; color: #fff; border: 1px solid #157DEC; width: 2.5rem; font-size: 1.2rem; height: 1.4rem; text-align: center; cursor: pointer; } #count-p { border-radius: 3px 0 0 3px; } #count-m { border-radius: 0 3px 3px 0; } .basket-count p { height: 1.3rem; width: 4rem; padding: 0 0.1rem; text-align: center; border: 1px solid #ccc; } /* */ /* */ /* */ /* */ /* ---- PROFILE CONTAINER ---- */ /* */ /* */ /* */ /* */ .fe-prof-main-container { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; height: 50vh; width: 100%; } #profile-coupon, #profile-edit, #profile-order, #profile-push { font-size: 1.2rem; } #profile-edit { color: #157DEC; } .fe-profile-info-box { display: flex; flex-direction: column; align-items: center; height: 100%; width: 100%; } #prof-info { margin-bottom: 1rem; } .profile-label { width: 25rem; margin-bottom: 3rem; border-radius: 10px; padding: 1rem; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); transition: all .2s ease-in-out; } .profile-label:hover { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); } .profile-label p { font-size: 1rem; margin-top: 0.5rem; } .fe-profile-coupons { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .fe-profile-coupons a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; border-bottom: 1px solid #157DEC; } .fe-profile-coupons a:last-child { border-bottom: none; } .fe-profile-coupons img { width: 15rem; height: auto; margin: 0.5rem; } /* */ /* */ /* */ /* */ /* ---- PROFILE EDIT CONTAINER ---- */ /* */ /* */ /* */ /* */ .fe-profile-edit-box { display: flex; align-items: center; width: 100%; height: auto; } #prof-link { color: #000; font-size: 2rem; font-weight: 700; } .fe-profile-edit-box form { width: 50%; margin: 0px auto; border-radius: 10px; padding: 1rem; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .profile-edit-label { display: flex; flex-direction: column; align-items: center; justify-content: start; box-shadow: none; } .profile-edit-label h3 { width: 100%; text-align: left; margin-top: 1rem; } .profile-edit-label input { width: 97%; margin-top: 0.5rem; padding: 0.5rem; font-size: 1.2rem; font-family: 'Open Sans', sans-serif; border: 2px solid #ccc; border-radius: 5px; } .profile-edit-label input:focus { outline: none !important; background: #F5F5F5 !important; border: 2px solid #157DEC; } #edit-btn { width: 100%; height: 3rem; margin-top: 1rem; border-radius: 5px; border: 2px solid #157DEC; background-color: #157DEC; color: #fff; font-size: 1.2rem; cursor: pointer; font-family: 'Open Sans', sans-serif; transition: all .2s ease; } #edit-btn:active { background-color: #fff; color: #157DEC; } /* */ /* */ /* */ /* */ /* ---- COUPON CONTAINER ---- */ /* */ /* */ /* */ /* */ .fe-coupon-main-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 78%; } .fe-coupons { display: flex; flex-wrap: wrap; width: 100%; height: auto; } .fe-coupons img { width: 15rem; height: 10rem; margin: 0.8rem 0.8rem 0.8rem 0; } /* */ /* */ /* */ /* */ /* ---- PUSH CONTAINER ---- */ /* */ /* */ /* */ /* */ .fe-push-main-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 77%; height: auto; } .fe-pushes-box { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; width: 100%; height: auto; } .fe-push { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; position: relative; width: 95%; height: 4rem; margin: 1rem; padding: 0.5rem; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } #push-icon { width: 1rem; height: 1rem; background: #157DEC; border-radius: 50%; margin: 0 1rem; } #push-date { position: absolute; right: 1rem; color: #aaa; } /* */ /* */ /* */ /* */ /* ---- BOOK CONTAINER ---- */ /* */ /* */ /* */ /* */ .fe-book-box { display: flex; flex-direction: column; align-items: center; justify-content: start; width: 100%; height: 100%; } .book-order { display: flex; flex-direction: column; align-items: center; justify-content: start; margin-top: 2rem; width: 30rem; height: auto; border-radius: 10px; padding: 1rem; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .book-label { display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: start; margin-bottom: 1rem; } .book-label p { width: 90%; padding: 0.5rem; text-align: left; font-size: 1.1rem; } .book-label input { width: 90%; border-radius: 5px; padding: 0.5rem; font-size: 1.1rem; border: 2px solid #ccc; font-family: 'Open Sans', sans-serif; } .book-label input:focus { outline: none !important; background: #F5F5F5 !important; border: 2px solid #157DEC; } #book-btn { width: 95%; margin: 1rem 0; font-size: 1.1rem; padding: 0.5rem; border-radius: 5px; color: #fff; background: #157DEC; border: 2px solid #157DEC; transition: all .2s ease; } #book-btn:hover { color: #157DEC; background: #fff; } #book-btn:active { color: #fff; background: #157DEC; } /* */ /* */ /* */ /* */ /* ---- PAYMENT CONTAINER ---- */ /* */ /* */ /* */ /* */ .payment-order { display: flex; flex-direction: column; align-items: center; justify-content: start; margin-top: 2rem; width: 20rem; height: auto; border-radius: 10px; padding: 1rem; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .payment-order h3 { margin-bottom: 1rem; width: 100%; text-align: left; } .payment-lbl { display: flex; flex-direction: row; align-items: center; justify-content: start; width: 100%; margin-bottom: 1rem; } .payment-lbl p { font-size: 1.1rem; cursor: pointer; } .payment-lbl input { border-radius: 5px; margin-right: 0.5rem; width: 1rem; height: 1rem; border: 2px solid #ccc; cursor: pointer; } .payment-lbl input:focus { outline: none !important; background: #F5F5F5 !important; border: 2px solid #157DEC; } #payment-btn { width: 95%; margin: 1rem 0; font-size: 1.1rem; padding: 0.5rem; border-radius: 5px; color: #fff; background: #157DEC; border: 2px solid #157DEC; transition: all .2s ease; } #payment-btn:hover { color: #157DEC; background: #fff; } #payment-btn:active { color: #fff; background: #157DEC; }