/* * * RESPONSIVE.CSS - "NOME_SITO" * DESIGN BY LINOOLMOSTUDIO * */ /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏┓ ┏┓ ┏┓ ┏━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━━┛ ┃┃ ┃┃ ┃┃ ┗┫┣┛ ┗┓┏┓┃ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┏━┓┃ ┃┗━━┓ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃ ┃┗━┛┃ ┃┗━━┓ ┃┗━━┓ ┃┗━┛┃ ┃┏━━┛ ┃┃ ┏┓ ┃┃ ┃┃ ┃┃ ┃┃┃┃ ┃┏┓┏┛ ┃┏━━┛ ┗━━┓┃ ┃┏━━┛ ┃┃ ┃┗━┛┃ ┃┗━┛┃ ┏┫┣┓ ┏┛┗┛┃ ┃┃┃┗┓ ┃┗━━┓ ┃┗━┛┃ ┃┃ ┗┛ ┗━━━┛ ┗━━━┛ ┗━━┛ ┗━━━┛ ┗┛┗━┛ ┗━━━┛ ┗━━━┛ ┗┛ */ /*__ FLUID RESPONSIVE __*/ /* Break point for calc init */ @media screen and (max-width: 1920px) { /* Fonts Misc */ .em { font-size: calc(12px + (24 - 12) * ((100vw - 480px) / (1920 - 480))); } h1 { font-size: calc(40px + (90 - 40) * ((100vw - 480px) / (1920 - 480))); } h2 { font-size: calc(35px + (70 - 35) * ((100vw - 480px) / (1920 - 480))); } h3 { font-size: calc(30px + (50 - 30) * ((100vw - 480px) / (1920 - 480))); } h4 { font-size: calc(30px + (50 - 30) * ((100vw - 480px) / (1920 - 480))); } p, li { font-size: calc(18px + (20 - 18) * ((100vw - 480px) / (1920 - 480))); } a { font-size: calc(18px + (20 - 18) * ((100vw - 480px) / (1920 - 480))); } /* Header */ .head_logo { width: calc(110px + (230 - 110) * ((100vw - 480px) / (1920 - 480))); } .menu_custom { padding-top: calc(22px + (39 - 22) * ((100vw - 1280px) / (1920 - 1280))); } /* Homepage */ #s1_home .s1_title_i { padding-top: calc(80px + (170 - 80) * ((100vw - 480px) / (1920 - 480))); } .swiper_nav { width: calc(30px + (80 - 30) * ((100vw - 480px) / (1920 - 480))); height: calc(30px + (80 - 30) * ((100vw - 480px) / (1920 - 480))); top: calc(50% - calc(15px + (40 - 15) * ((100vw - 480px) / (1920 - 480)))); } .slider { padding: 5% calc(35px + (85 - 35) * ((100vw - 480px) / (1920 - 480))); } /* Footer */ .credits_row p, .credits_row a { font-size: calc(10px + (16 - 10) * ((100vw - 480px) / (1920 - 480))); } /* Page */ /* Archive */ /* Single */ /* Extra */ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏━━━┓┏┓ ┏┓┏━━━┓┏━━━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┃┏━┓┃┃┗┓┏┛┃┃┏━━┛┃┏━┓┃ ┗┓┃ ┃┗━┛┃ ┗┛┏┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┃┃┗┓┃┃┏┛┃┗━━┓┃┗━┛┃ ┃┃ ┗━━┓┃ ┏━┛┏┛ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┃ ┃┗┛┃ ┃┏━━┛┃┏┓┏┛ ┏┛┗┓ ┏━━┛┃ ┃ ┗━┓ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┃┗━┛┃ ┗┓┏┛ ┃┗━━┓┃┃┃┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ ┗━━━┛ ┗┛ ┗━━━┛┗┛┗━┛ ÜBER */ @media screen and (min-width: 1920px) { /*__ HEADER __*/ /* Menu */ /*__ HOMEPAGE __*/ /* Section 1 */ /* Section 2 */ /*__ FOOTER __*/ /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏┓ ┏┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┃ ┃┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┗━━┓┃ ┗━━┓┃ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃┃ ┃┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗┛ ┗┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ LAPTOP */ @media screen and (max-width: 1440px) { /*__ HEADER __*/ /* Menu */ /*__ HOMEPAGE __*/ /*__ FOOTER __*/ /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┏━┛┏┛ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃ ┗━┓ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ TABLET GRANDE */ @media screen and (max-width: 1280px) { /*__ HEADER __*/ /* Menu */ /* .menu_custom { padding-top: 20px; } .head_hamburger { padding-top: 18px; display: block; z-index: 2; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: #fff; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #cd0b0b; } .overlay_menu { background-color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; text-align: center; } .overlay_menu_i { height: 100%; } .overlay_menu .download2:before { left: 70px; } .overlay_menu a { color: #cd0b0b; margin: 20px 0; } */ .menu_custom .hover_menu { display: none; } .menu_custom_fixed { position: relative; background-color: #cd0b0b; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .menu_custom_fixed .hover_menu { width: calc((100% / 3) - 1px); border-left: 1px solid #fff; padding: 10px 0; border-bottom: none !important; } .menu_custom_fixed .hover_menu:first-child { border: none; } .download2 { background-position: 30px; } /*__ HOMEPAGE __*/ .prodotto img { width: 70px; } .prodotto_i p { font-size: 18px; } .prodotto a { font-size: 14px; } .s5_i { padding: 5%; } /*__ FOOTER __*/ /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏━━━┓ ┏━━━┓ ┏┓ ┏┓ ┏━━━┓┏━┓┏━┓ ┏┛┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┓┃ ┃┃ ┃┃ ┗┛┏┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗┓┏┛ ┃┃ ┃┃ ┃┃ ┏━┛┏┛ ┗━━┓┃ ┃┏━━┛ ┏┛┗┓ ┏┛┗┓ ┃┗━┛┃ ┃ ┗━┓ ┃┃ ┃┃ ┏┛┏┓┗┓ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗┛ ┗━┛┗━┛ TABLET */ @media screen and (max-width: 1024px) { /*__ HEADER __*/ /* Menu */ /* Back Top */ .back_top { opacity: 1; } /*__ HOMEPAGE __*/ .dim_prodotto { width: 50%; } .prodotto { height: 340px; margin-bottom: 0; } /*__ FOOTER __*/ .box_footer a, .box_footer p { font-size: 15px; } .social img { width: 30px; margin: 0 6px; } .s4_i { display: block; } .bkg_s42, .testo_s4 { display: block; width: 100%; } .testo_s4 .testo_i { padding: 0; padding-bottom: 5%; } .bkg_s42 { height: 400px; } .bkg_s4 { display: none; } /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ FORM __*/ /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┗┛┏┛┃ ┃┗━━┓ ┃┗━┛┃ ┃┗━┛┃ ┗┓┏┛ ┃┏┛ ┃┏━┓┃ ┃┏━┓┃ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ TABLET PICCOLO */ @media screen and (max-width: 768px) { /*__ HEADER __*/ /* Menu */ .menu_custom_fixed { display: block; } .menu_custom_fixed .hover_menu { width: calc(33% - 1px); float: left; border-bottom: 1px solid #fff !important; } .menu_custom_fixed .download2 { background-image: unset; /*width: 100%; border: none; border-bottom: 1px solid #fff !important;*/ } .btn_chiamata span { display: none; } /*__ HOMEPAGE __*/ .prodotto { height: auto; margin-bottom: 0; } .prodotto_i { padding: 10% 5%; } .prodotto a { margin-top: 30px; } .testo_s4 { text-align: center; } .bkg_s42 { height: 300px; } .testo_s5 { height: auto !important; border-radius: 20px 20px 0 0; } .form_s5 { border-radius: 0 0 20px 20px; } /*__ FOOTER __*/ a.foot_logo { width: 80%; margin: 0 auto; display: block; } .box_footer { margin-bottom: 50px; text-align: center !important; display: block; } /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ FORM __*/ .fw50.form-input { width: 100%; float: none; margin: 0; margin-bottom: 40px; } /*__ EXTRA __*/ .s2_i, .s3_i, .s4_i, .s5_i { padding: 7% 5%; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.05); transform: scale(1.05); } .btn_s1, .menu_custom { display: none; } .call_us_s1 { display: inline-block !important; } } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏┓ ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓┏━┓┏━┓ ┃┃ ┃┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃┗┓┗┛┏┛ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┗━┛┃ ┗┓┏┛ ┗━━┓┃ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━━┛ ┏┛┗┓ ┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┏┛┏┓┗┓ ┗┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛┗━┛ MOBILE PORT */ @media screen and (max-width: 480px) { /* Fonts Misc */ h1 { font-size: 23px; } h2 { font-size: 35px; } h3 { font-size: 30px; } h4 { font-size: 30px; } p, li { font-size: 16px; } a { font-size: 16px; } /*__ HEADER __*/ .head_logo { width: 140px; } a.btn_chiamata { padding: 10px 20px; } /*__ MENU __*/ /*__ HOMEPAGE __*/ #s1_home .btn_w { margin-right: 0px; } .dim_prodotto_i { padding: 0; } .prodotto a { font-size: 15px; padding: 15px 30px; } .download { position: relative; padding-right: 70px; font-size: 12px; } .download:before { content: ""; position: absolute; right: 31px; top: 12px; height: 17px; width: 23px; background-image: url(../images/svg/download.svg); background-repeat: no-repeat; } .bkg_s42 { height: 180px; } .testo_s5 { text-align: center; } .riga { margin: 7% auto; } /*__ FOOTER __*/ .credits_row p, .credits_row a { font-size: 10px; } /*__ PAGE __*/ /* Page 1 Name */ /* Page 2 Name */ /*__ FORM __*/ .form-submit input[type="submit"] { font-size: 15px; } /*__ EXTRA __*/ } /*__________________________________________________________________________________________________________________________________________________________________________*/ /* ┏━━━┓ ┏━━━┓ ┏┓ ┏┓ ┏━━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┗┓┏┓┃ ┃┏━━┛ ┃┗┓┏┛┃ ┗┫┣┛ ┃┏━┓┃ ┃┏━━┛ ┃┏━┓┃ ┃┃┃┃ ┃┗━━┓ ┗┓┃┃┏┛ ┃┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃┃┃ ┃┏━━┛ ┃┗┛┃ ┃┃ ┃┃ ┏┓ ┃┏━━┛ ┗━━┓┃ ┏┛┗┛┃ ┃┗━━┓ ┗┓┏┛ ┏┫┣┓ ┃┗━┛┃ ┃┗━━┓ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━┛ ┗━━━┛ ┗━━━┛ ┗━━━┛ SPECIFIC DEVICE */ /* If is Device */ @media screen and (max-device-width: 1280px){} @media screen and (max-device-width: 768px){} @media screen and (max-device-width: 480px){}