/* * * RESPONSIVE.CSS - "SHOP.KEFACOLLECTION.COM" * DESIGN BY LINOOLMOSTUDIO * */ /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏┓ ┏┓ ┏┓ ┏━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━━┛ ┃┃ ┃┃ ┃┃ ┗┫┣┛ ┗┓┏┓┃ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┏━┓┃ ┃┗━━┓ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃ ┃┗━┛┃ ┃┗━━┓ ┃┗━━┓ ┃┗━┛┃ ┃┏━━┛ ┃┃ ┏┓ ┃┃ ┃┃ ┃┃ ┃┃┃┃ ┃┏┓┏┛ ┃┏━━┛ ┗━━┓┃ ┃┏━━┛ ┃┃ ┃┗━┛┃ ┃┗━┛┃ ┏┫┣┓ ┏┛┗┛┃ ┃┃┃┗┓ ┃┗━━┓ ┃┗━┛┃ ┃┃ ┗┛ ┗━━━┛ ┗━━━┛ ┗━━┛ ┗━━━┛ ┗┛┗━┛ ┗━━━┛ ┗━━━┛ ┗┛ */ /*__ FLUID RESPONSIVE __*/ /* Break point for calc init */ @media screen and (max-width: 1920px) { /* Fonts Misc */ html { font-size: calc(14px + (20 - 14) * ( (100vw - 320px) / 1600 )); } h1 {} h2 {} h3 {} h4 {} p, li {} a {} /*__ HEADER __*/ /* Overlay */ /* Back Top */ .back_top { bottom: calc(0px + (10 - 0) * ((100vw - 320px) / 1600 )); right: calc(0px + (10 - 0) * ((100vw - 320px) / 1600 )); width: calc(30px + (60 - 30) * ((100vw - 320px) / 1600 )); } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┃┃ ┃┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┃┗━┛┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗┓┏┛ ┗━━┓┃ ┃┏┛ ┗━━┓┃ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┃ ┏━━┛┃ ┃┃ ┏┛┏┓┗┓ ┗┛ ┗┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ MOBILE PORT - 320 x 520 */ @media screen and (min-width: 480px) { } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┛┏┛┃ ┃┗━━┓ ┗┛┏┛┃ ┃┗━┛┃ ┗┓┏┛ ┃┏┛ ┃┏━┓┃ ┃┏┛ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┗━┛┃ ┃┃ ┃┃ ┏┛┏┓┗┓ ┗┛ ┗━━━┛ ┗┛ ┗┛ ┗━┛┗━┛ TABLET PICCOLO - 768 x 520 */ @media screen and (min-width: 768px) { .s1_title { text-align: left; width: 60%; } #s1_home .sec_i { align-items: center;} .single-product div.product .woocommerce-product-gallery { width: 45%; margin-right: 5%; } .single-product div.product .summary { width: 50%; } .single-product div.product { overflow: visible; } /*.single-product div.product .woocommerce-product-gallery { position: sticky; top: 5vh; }*/ .orologio_pietra_s1 { display: none; } .orologio_pietra { z-index: 1; position: relative; transform: translateY(20%); display: block; } .foot_logo a { width: 30%; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏┓ ┏┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┃┃ ┃┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┃┃ ┃┃ ┏━┛┏┛ ┗━━┓┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃┗━┛┃ ┃ ┗━┓ ┃┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗┛ ┗━┛┗━┛ TABLET - 1024 x 576 */ @media screen and (min-width: 1024px) { .single-product div.product .woocommerce-product-gallery figure img { height: 80vh; object-fit: contain; } .lang_selector { margin-top: 1rem; margin-right: 2rem; } #s1_home .sec_i { height: 100vh; } .s1 .sec_i { padding: 0; height: auto; } .clock { position: relative; } .s1_title { position: absolute; padding-left: 4%; left: 0; } .s1_title * { text-shadow: 0 0 10px rgba(30,30,30,0.8); } .s1_title { width: 34%; text-align: left; } .s1_title h1{ font-size: 2.3rem; } .filter_black{opacity: .2;} .user-cart { margin-top: 1.4rem; } h2 { font-size: 2.2rem; } /*__ HEADER __*/ /* Overlay */ .head_wrapper.active { padding-top: 0; } .link_top_mobile_c { display: none !important; } .head_hamburger.active { display: block; } .head_hamburger button { margin: .7rem; } .single-product .head_hamburger { display: block; } .single-product .link_t { background-color: #1e1e1e; } .single-product .link_w { border-color: #1e1e1e; } /* Back Top */ .back_top { opacity: 1; } /*__ HOMEPAGE __*/ .s1 .sec_i { height: 100vh; justify-content: flex-start; } .s1_title { width: 40%; text-align: left; } .orologio_s1 { display: block; position: relative; } .clock { left: 0; transform: unset; top: 0; right: 0; margin: auto; } .play_button { width: 10rem; height: 10rem; background-color: rgba(255,255,255,.125); border-radius: 50%; display: flex; position: absolute; right: calc(25% - 10rem); top: calc(50% - 5rem); backdrop-filter: blur(5px); transition: .3s ease; } .play_button img { width: 20%; } .play_button:hover { backdrop-filter: blur(0); } .play_button:hover .radius { transform: scale(1); } #s2_home .sec_i { padding-bottom: 1rem; } .testo_sec.w50, .form { width: 50%; } .orologio { width: 25%; } .desc_orologio { width: 50%; padding: 0 5%; } .box_caratt { width: 50%; } .rotate_button, .retro_mobile { display: none; } .orologio_retro { display: block; } .swiper-gallery { width: 35%; float: left; } .video_unboxing { height: 25rem; width: 65%; margin-top: 0; float: right; } .orologi_img { width: 70%; margin: 0 auto; } .piazza { background-position: 20%; background-size: 100%; } .tramonto { background-size: 120%; background-position: 20% top; animation: mymove 70s infinite; background-repeat: repeat-x; } @keyframes mymove { from { background-position: 20% top; } to { background-position: 99% top; } } .testo_sec.w50 { padding-right: 7%; } .cat { text-transform: uppercase; font-weight: 600; font-size: 1.8; } .card-products img { height: ; } .nav { top: calc(50% - 1.5rem); width: 3rem; height: 3rem; } .nav_prev { left: 1rem; } .nav_next { right: 1rem; } #mailpoet_form_1 form.mailpoet_form { padding: 2rem !important; } .box_desc { border-bottom: 1px solid rgba(255,255,255,.4); } .eleno_caratteristiche { width: calc(100% / 3); float: left; margin-bottom: 2rem; padding: 1rem 3rem; } .orologi_slide { height: 25rem; } .border_lr { border: 0; border-left: 1px solid rgba(255,255,255,.4); border-right: 1px solid rgba(255,255,255,.4); } #s5_home h2 { text-align: center; } #s6_home .sec_i { text-align: left !important; } /*__________ FOOTER CONTENT __________*/ .foot_content { overflow: hidden; padding: 10% 7.5% 0 7.5%; text-align: left; } .foot_clock { top: 0; left: 0; opacity: 1; right: unset; bottom: unset; display: block; width: 25%; transform: translate(-42.5%, 5%); } .foot_block { text-align: left; } .foot_blocks { padding-left: 12.5%; align-items: flex-start; } .foot_logo { text-align: center; } .foot_logo a { width: 180px; font-size: 0 !important; } .foot_block { width: calc(100% / 3); padding: 0 2.5%; } .foot_block .foot_block_i { width: 360px; margin: 0 0 0 auto; text-align: left; } .foot_block h2, .foot_block h3, .foot_block h4, .foot_block p, .foot_block a { color: #2c2c2c; font-size: 2rem; } .foot_block h2, .foot_block h3 { font-family: 'Cinzel', serif; line-height: 1.1; margin-bottom: 7.5%; } .foot_block p, .foot_block a { font-size: .9rem; line-height: 1.4; font-weight: 400; } .foot_info p:nth-of-type(2) { margin-top: 2.5%; font-size: 1em; } .foot_info p:nth-of-type(2) a { font-size: 1em; line-height: 1.4; } .foot_block a { display: inline-block; } .foot_block.foot_contact a { font-size: 1.15em; } .foot_block .privacy { margin-top: 7.5%; } .foot_block .privacy a { font-size: 16px; } .social { margin-top: 1em; font-size: 20px; line-height: 0; justify-content: flex-start; } .social li { display: inline-block; } .social a { padding: .25em; line-height: 0; border-radius: .25em; margin-right: .7rem; } .social a:hover { box-shadow: 0 0 .25em rgba(30,30,30,.25); } .social img { width: 2rem; margin: 0; } /*__________ WOOCOMMERCE __________*/ #customer_details { width: 45%; margin-right: 5%; margin-bottom: 0; } #order_review, #order_review_heading { width: 50%; margin-bottom: 0; } .wcopc * { font-size: .7rem; } #billing_first_name_field, #billing_last_name_field, #shipping_first_name_field, #shipping_last_name_field { width: 48% !important; } /*__________ FORM __________*/ #form div.wpforms-container-full .wpforms-form .wpforms-one-half { width: 48%; float: left; margin: 0; } #form div.wpforms-container-full .wpforms-form .wpforms-one-half { margin-left: 4%; } #primary .products .card-products { width: calc(50% - 2rem); margin: 1rem; float: left; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┏━┛┏┛ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃ ┗━┓ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ TABLET GRANDE - 1280 x 720 */ @media screen and (min-width: 1280px) { /*__ HEADER __*/ /* Overlay */ .head_logo { display: inline-flex; width: 50px; } /*__ HOMEPAGE __*/ .box_caratt { width: 20% !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.3) !important; padding: 3rem 1.5rem; } .box_caratt h2 { font-size: 2rem; } .box_caratt p { font-size: .9rem; } #s2_home .sec_i { padding-bottom: 25rem; } .piazza { background-position: center 60%; background-size: 100%; } #primary .products .card-products { width: calc(33.3333333% - 2rem); margin: 1rem; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏┓ ┏┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┃ ┃┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┗━━┓┃ ┗━━┓┃ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃┃ ┃┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗┛ ┗┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ LAPTOP - 1440 x 720 */ @media screen and (min-width: 1440px) { h1 { font-size: 2.5rem; } h2 { font-size: 3rem; word-wrap: normal; -ms-word-wrap: normal; } /*__ HEADER __*/ /* Overlay */ /*__ HOMEPAGE __*/ .box_caratt:first-child br { display: block; } .s1 .sec_i { height: auto; padding: 5%; } #s1_home .sec_i { height: 100vh; padding: 0; } .clock { position: relative; margin: initial; } .s1_title { position: relative; padding-left: 4%; } .s1_title * { text-shadow: 0 0 10px rgba(30,30,30,0.6); } .box_caratt h2 { font-size: 1.8rem; } .box_caratt p { font-size: .8rem; } .mail-input, .name-input { width: 47%; display: inline-block; } .mail-input { margin-left: 2%; } .name-input { margin-right: 2%; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏━━━┓┏┓ ┏┓┏━━━┓┏━━━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┃┏━┓┃┃┗┓┏┛┃┃┏━━┛┃┏━┓┃ ┗┓┃ ┃┗━┛┃ ┗┛┏┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┃┃┗┓┃┃┏┛┃┗━━┓┃┗━┛┃ ┃┃ ┗━━┓┃ ┏━┛┏┛ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┃ ┃┗┛┃ ┃┏━━┛┃┏┓┏┛ ┏┛┗┓ ┏━━┛┃ ┃ ┗━┓ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┃┗━┛┃ ┗┓┏┛ ┃┗━━┓┃┃┃┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ ┗━━━┛ ┗┛ ┗━━━┛┗┛┗━┛ ÜBER - 1920 x 1080 */ @media screen and (min-width: 1920px) { /* .s1 .sec_i { padding: 0; height: auto; } .clock { position: relative; } .s1_title { position: absolute; padding-left: 4%; } .s1_title * { text-shadow: 0 0 10px rgba(30,30,30,0.8); } */ .orologio_s1 { height: 100vh; max-height: unset; } }