html { scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; min-height: 100vh; display: flex; flex-direction: column; } body { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; main { position: relative; } } main{ min-height: 70vh; } a:not(.btn) { transition: all 0.5s ease; &:hover { opacity: 0.6; text-decoration: none; } } button:focus, a:focus, div:focus, .btn:focus { outline: none !important; box-shadow: none !important; } * { -webkit-tap-highlight-color: transparent; } .row.wi-snippet-21 { .pt-20 { padding-top: 0px !important; } >div{margin-bottom: 0 !important;} p{ margin-bottom: 0px; } } @media (max-width: 768px) { .row.wi-snippet-21>div:not(:last-child) p { margin-bottom: 16px; } }.display-1, .d1 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 96px; font-weight: 400; font-style: normal; color: #000000; line-height: 100px; } .display-2, .d2 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 76px; font-weight: 400; font-style: normal; color: #000000; line-height: 80px; } .h1, h1 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 60px; font-weight: 500; font-style: normal; color: #000000; line-height: 72px; } .h2, h2 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 48px; font-weight: 500; font-style: normal; color: #000000; line-height: 56px; } .h3, h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 500; font-style: normal; color: #000000; line-height: 38px; } .h4, h4 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 500; font-style: normal; color: #000000; line-height: 24px; } .subtitle-1, .s1 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 600; font-style: normal; color: #000000; line-height: 24px; } .subtitle-2, .s2 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; } .subtitle-3, .s3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; font-style: normal; color: #000000; line-height: 18px; } .body-1, .b1, p { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; } .body-2, .b2 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 300; font-style: normal; color: #000000; line-height: 20px; } .body-3, .b3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 300; font-style: normal; color: #000000; line-height: 18px; } .body-4, .b4 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 300; font-style: normal; color: #000000; line-height: 16px; } .caption, .t1 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; font-style: normal; color: #000000; line-height: 14px; } .overline, .t2 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; font-style: normal; color: #000000; line-height: 16px; } a { transition: all 0.2s ease-in-out; text-decoration: none; color: inherit; font-weight: inherit; font-style: inherit; font-size: inherit; line-height: inherit; font-family: inherit; &:hover { color: inherit; text-decoration: none; cursor: pointer; } } .breadcrumbs { display: flex; align-items: center; justify-content: flex-start; background-color: transparent; > div { display: flex; align-items: center; justify-content: flex-start; height: 40px; justify-content: left; ul { list-style: none; padding-left: 0; margin: 0; li { max-width: 400px; overflow: hidden; text-overflow: ellipsis; display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; font-weight: 700; line-height: 1; a { text-decoration: none; } &:not(:last-child) { &:after { content: ' /'; } } } } } } .icon{ background-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-position: center; align-items: center; display: flex; min-height: 10px; transition: all .2s ease; background-color: #7389B5;; } .icon.menu{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Menu.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Menu.svg'); } .icon.phone-1{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Telefono_tipo_1.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Telefono_tipo_1.svg'); } .icon.phone-2{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Telefono_tipo_2.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Telefono_tipo_2.svg'); } .icon.pin { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Pin.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Pin.svg'); } .icon.apri { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Apri.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Apri.svg'); } .icon.chiudi { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chiudi.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chiudi.svg'); } .icon.arrow-right-1{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_1.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_1.svg'); } .icon.arrow-right-2{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_2.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_2.svg'); } .icon.arrow-right-3{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_3.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_3.svg'); } .icon.arrow-right-4{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_4.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_4.svg'); } .icon.arrow-right-5{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_5.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_5.svg'); } .icon.arrow-left-1{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_1.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_1.svg'); } .icon.arrow-left-2{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_2.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_2.svg'); } .icon.arrow-left-3{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_3.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_3.svg'); } .icon.arrow-left-4{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_4.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_4.svg'); } .icon.arrow-left-5{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_5.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_5.svg'); } .icon.arrow-select-down-1{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_1.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_1.svg'); } .icon.arrow-select-down-2{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_2.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_2.svg'); } .icon.arrow-select-down-3{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_3.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_3.svg'); } .icon.arrow-select-up-1{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_up_tipo_1.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_up_tipo_1.svg'); } .icon.arrow-select-up-2{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_up_tipo_2.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_up_tipo_2.svg'); } .icon.arrow-select-up-3{ width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_up_tipo_03.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_up_tipo_03.svg'); } .icon.reset { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Refresh.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Refresh.svg'); } .icon.download { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Download.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Download.svg'); } .icon.close-primary { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chiudi_principale.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chiudi_principale.svg'); } .icon.close-secondary { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chiudi_seondario.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chiudi_seondario.svg'); } .icon.search { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cerca.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cerca.svg'); } .icon.filters { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Filtri.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Filtri.svg'); } .icon.back { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Torna_indietro.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Torna_indietro.svg'); } .icon.trash { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cestino.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cestino.svg'); } .icon.share { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Condividi.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Condividi.svg'); } .icon.go-to { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Vai_a.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Vai_a.svg'); } .icon.check { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Check.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Check.svg'); } .icon.simple-check { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Check.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Check.svg'); } .icon.gallery { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Gallery.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Gallery.svg'); } .icon.video { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Video.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Video.svg'); } .icon.virtual-360 { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Virtual_360.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Virtual_360.svg'); } .icon.info { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Info.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Info.svg'); } .icon.scheda { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Scheda.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Scheda.svg'); } .icon.social-facebook { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Facebook.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Facebook.svg'); } .icon.social-twitter { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Twitter.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Twitter.svg'); } .icon.social-instagram { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Instagram.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Instagram.svg'); } .icon.social-linkedin { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Linkedin.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Linkedin.svg'); } .icon.social-youtube { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Youtube.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Youtube.svg'); } .icon.social-tiktok { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Tiktok.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Tiktok.svg'); } .icon.social-whatsapp { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Whatsapp.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Whatsapp.svg'); } .icon.mail { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Mail.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Mail.svg'); } .icon.auto { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Auto.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Auto.svg'); } .icon.moto { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Moto.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Moto.svg'); } .icon.fuel { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Alimentazione.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Alimentazione.svg'); } .icon.power { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Potenza.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Potenza.svg'); } .icon.gear { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cambio.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cambio.svg'); } .icon.km { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chilometri.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Chilometri.svg'); } .icon.km-per-year { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Km_per_anno.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Km_per_anno.svg'); } .icon.calendar { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Immatricolazione.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Immatricolazione.svg'); } .icon.calendar-alt { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Calendar.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Calendar.svg'); } .icon.cilindrata { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cilindrata.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cilindrata.svg'); } .icon.cilindrata-alt { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cilindrata_1.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Cilindrata_1.svg'); } .icon.codice-veicolo { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Codice_veicolo.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Codice_veicolo.svg'); } .icon.colore { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Colore.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Colore.svg'); } .icon.garanzia { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Garanzia.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Garanzia.svg'); } .icon.emissioni { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Emissioni.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Emissioni.svg'); } .icon.porte { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Porte.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Porte.svg'); } .icon.posti { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Posti.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Posti.svg'); } .icon.anticipo { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Anticipo.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Anticipo.svg'); } .icon.durata { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Durata.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Durata.svg'); } .icon.orari { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Orari.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Orari.svg'); } .icon.vic { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Vic.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Vic.svg'); } .icon.carusel-01-dx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_01_dx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_01_dx.svg'); } .icon.carusel-01-sx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_01_sx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_01_sx.svg'); } .icon.carusel-02-dx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_dx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_dx.svg'); } .icon.carusel-02-sx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_sx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_sx.svg'); } .icon.carusel-03-dx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_03_dx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_03_dx.svg'); } .icon.carusel-03-sx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_03_sx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_03_sx.svg'); } .icon.carusel-04-dx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_04_dx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_04_dx.svg'); } .icon.carusel-04-sx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_04_sx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_04_sx.svg'); } .icon.carusel-05-dx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_05_dx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_05_dx.svg'); } .icon.carusel-05-sx { width: 32px; height: 32px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_05_sx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_05_sx.svg'); } .swiper-button-prev, .swiper-button-next{ .icon { background-color: #7389B5;; } } .brand { display: block; aspect-ratio: 1; width: auto; background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; &.abarth { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/abarth.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/abarth.svg'); } &.alfa\2D romeo { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/alfa\20 romeo.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/alfa\20 romeo.svg'); } &.alpine { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/alpine.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/alpine.svg'); } &.amg { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/amg.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/amg.svg'); } &.audi { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/audi.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/audi.svg'); } &.bmw { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/bmw.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/bmw.svg'); } &.cupra { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/cupra.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/cupra.svg'); } &.dacia { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/dacia.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/dacia.svg'); } &.dodge { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/dodge.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/dodge.svg'); } &.fiat { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/fiat.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/fiat.svg'); } &.fiat\2D pro { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/fiat\20 pro.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/fiat\20 pro.svg'); } &.hyundai { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/hyundai.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/hyundai.svg'); } &.isuzu { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/isuzu.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/isuzu.svg'); } &.jaecoo { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/jaecoo.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/jaecoo.svg'); } &.jeep { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/jeep.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/jeep.svg'); } &.kia { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/kia.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/kia.svg'); } &.lancia { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/lancia.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/lancia.svg'); } &.lexus { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/lexus.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/lexus.svg'); } &.mercedes\2D benz { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/mercedes\2D benz.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/mercedes\2D benz.svg'); } &.mg { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/mg.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/mg.svg'); } &.mini { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/mini.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/mini.svg'); } &.nissan { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/nissan.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/nissan.svg'); } &.omoda { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/omoda.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/omoda.svg'); } &.opel { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/opel.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/opel.svg'); } &.peugeot { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/peugeot.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/peugeot.svg'); } &.porsche { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/porsche.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/porsche.svg'); } &.ram { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/ram.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/ram.svg'); } &.renault { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/renault.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/renault.svg'); } &.renault\2D pro { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/renault\20 pro.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/renault\20 pro.svg'); } &.seat { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/seat.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/seat.svg'); } &.skoda { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/skoda.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/skoda.svg'); } &.smart { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/smart.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/smart.svg'); } &.toyota { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/toyota.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/toyota.svg'); } &.toyota\2D pro { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/toyota\20 pro.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/toyota\20 pro.svg'); } &.volkswagen { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/volkswagen.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/volkswagen.svg'); } &.volkswagen\2D vic { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/volkswagen\20 vic.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/volkswagen\20 vic.svg'); } &.volvo { -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/volvo.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/brands/volvo.svg'); } } .vehicle-card { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; display: flex; -ms-flex-direction: column; flex-direction: column; margin-bottom: 40px; transition: all 0.5s ease; border-radius: 24px; .img { background-color: transparent; border-radius: 24px 24px 0 0; overflow: hidden; img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 24px 24px 0 0; } .owl-nav { button { position: absolute; background-repeat: no-repeat !important; background-size: cover !important; height: 24px; width: 24px; &.owl-prev { left: 0; } &.owl-next { right: 0; } &.disabled { opacity: 0.5; } } } } .more { background-color: transparent; padding: 12px; border-radius: 0 0 24px 24px; .info { .refId { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; .erpId { width: 50%; } .image-count { display: flex; align-items: center; justify-content: flex-end; width: 50%; margin-left: auto; .icon { display: flex; align-items: center; justify-content: flex-end; } .owl-numbers { display: flex; align-items: center; justify-content: flex-end; min-width: 40px; text-align: right; } } } .title { margin-bottom: 14px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #d5d5d5; border-bottom: 1px solid #d5d5d5; padding-bottom: 14px; } .prices { margin-bottom: 14px; text-align: left; border-bottom: 1px solid #d5d5d5; padding-bottom: 14px; } .features { margin-bottom: 14px; } } .detail-btn { margin-top: 16px; color: #000; display: flex; justify-content: end; width: 100%; .btn { background: transparent; display: flex; align-items: center; justify-content: center; .icon-container { background-color: #000; border-radius: 100%; margin-left: 8px; padding: 4px; display: flex; align-items: center; justify-content: center; .icon { background-color: white; } } } } } &.horizontal { @media (min-width: 768px) { display: flex; flex-direction: row; } .img { @media (min-width: 768px) { width: 350px; border-radius: 24px 0 0 24px; } img { @media (min-width: 768px) { border-radius: 24px 0 0 24px; } } } .more { flex: 1; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; @media (min-width: 768px) { border-radius: 0 24px 24px 0; width: 60%; } .info { display: flex; flex-direction: column; height: 100%; .title { order: 1; margin-bottom: 0; padding: 0 0 8px 0; max-width: 100%; .brand-model, .version { width: 100%; max-width: 100%; } } .prices { order: 2; margin-bottom: 0; text-align: left; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; .archive { order: 2; margin-left: auto; } div:not(.archive) { order: 1; } } .features { padding: 8px 0; order: 3; margin-bottom: 0; } .refId { padding: 0; order: 4; margin-top: auto; margin-bottom: 0; display: flex; justify-content: end; align-items: center; .erpId { margin: 0; } .image-count { margin: 0; margin-left: auto; .icon { align-items: center !important; justify-content: flex-end !important; } .owl-numbers { align-items: center !important; justify-content: flex-end !important; } } } } } .detail-btn { display: none !important; } } } .rental-card { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; display: flex; -ms-flex-direction: column; flex-direction: column; margin-bottom: 40px; transition: all 0.5s ease; border-radius: 24px; .img { background-color: transparent; border-radius: 24px 24px 0 0; height: 200px; img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 24px 24px 0 0; } } .more { background-color: transparent; padding: 12px; border-radius: 0 0 24px 24px; .info { .title { margin-bottom: 12px; border-bottom: 1px solid #d5d5d5; padding-bottom: 12px; } .prices { margin-bottom: 12px; text-align: left; border-bottom: 1px solid #d5d5d5; padding-bottom: 12px; } .features { display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px; margin-bottom: 12px; line-height: small; .features-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; .feature-label { display: flex; flex-direction: row; align-items: center; gap: 5px; } } } } .detail-btn { margin-top: 16px; color: #000; display: flex; justify-content: end; width: 100%; .btn { background: transparent; display: flex; align-items: center; justify-content: center; .icon-container { border-radius: 100%; margin-left: 8px; padding: 4px; display: flex; align-items: center; justify-content: center; .icon { background-color: #fff; } } } } } } .vehicle-card { border-radius: 2px; box-shadow: 0px 2px 12px #0000000D; &:hover { border-color: #FEBA03; background-color: #FFFFFF; } .img { border-top-left-radius: 2px; border-top-right-radius: 2px; img { border-top-left-radius: 2px; border-top-right-radius: 2px; } padding-top: 0px; padding-right: 0px; padding-left: 0px; .owl-nav { button { bottom: 0; position: absolute; background-repeat: no-repeat !important; background-size: cover !important; height: 30px; width: 30px; &.owl-prev { left: 0; width: 25px; height: 25px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_4.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_sx_tipo_4.svg'); background-color: #7389B5; background-color: #FFFFFF; } &.owl-next { right: 0; width: 25px; height: 25px; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_4.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_dx_tipo_4.svg'); background-color: #7389B5; background-color: #FFFFFF; } &.disabled { opacity: 0.5; } } } } .more { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; .info { .prices { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #E2E2E2; } .title { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #E2E2E2; } .features { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; .features-item { line-height: 1; display: flex; justify-content: flex-start; align-items: center; width: 48%; margin-bottom: 6px; .icon { margin-right: 8px; width: 24px; height: 24px; } .feature-label { display: none; } } } .detail-btn { .btn { line-height: 1; .icon-container { .icon { } } } display: none !important; } } } &.horizontal { .img { @media (min-width: 768px) { border-top-left-radius: 2px; border-bottom-left-radius: 2px; img { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } } padding-top: 0px; padding-bottom: 0px; padding-left: 0px; } .more { @media (min-width: 768px) { border-radius: 0px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } } } } .rental-card { border-radius: 2px; box-shadow: 0px 2px 12px #0000000D; &:hover { border-color: #FEBA03; background-color: #FFFFFF; } .img { border-top-left-radius: 2px; border-top-right-radius: 2px; img { border-top-left-radius: 2px; border-top-right-radius: 2px; } padding-top: 0px; padding-right: 0px; padding-left: 0px; } .more { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; .info { .prices { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #E2E2E2; > div { display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px; .final-price, .vat { margin-bottom: 0; padding-bottom: 0; line-height: 1; } } } .title { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #E2E2E2; } .detail-btn { .btn { line-height: 1; .icon-container { .icon { width: 24px; height: 24px; } } } display: none !important; } } } } .vehicle-card { cursor: pointer; border-width: 0px; border-color: #D1D1D1; border-style: solid; .brand-model { font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .version { font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vat { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erpId { line-height: 1; } .initial-price { text-decoration: line-through; line-height: 1; } .final-price { font-size: 18px; font-weight: 700; line-height: 1; } .detail-btn { display: none; } } .rental-card { border-width: 0px; border-color: #D1D1D1; border-style: solid; border-radius: 2px; box-shadow: 0px 2px 12px #0000000D; .brand-model { font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .version { font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .final-price { font-size: 18px; font-weight: 700; line-height: 1; align-items: flex-end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vat { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-items: flex-end; } .features { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; .features-item { line-height: 1; .feature-label { } .icon { } } } } .si-contact-form-element { background-color: #F0F0F0; .form { .formInfo { border-radius: 0px; box-shadow: 0px 0px 0px #000; padding-block: 30px; .form-title { font-size: 22px; font-weight: 600; line-height: 1; padding: 6px; } .form-subtitle { font-size: 18px; font-weight: 400; line-height: 1; padding: 6px; } .fields { >div{ padding: 6px; } display: flex; flex-wrap: wrap; gap: 0; margin-block: 10px; a { text-decoration: underline; } .text-fields { &:focus-within, &.active { opacity: 1 !important; } } } .form-bottom { display: flex; flex-direction: column; padding: 10px; } .input-wrapper { &.select-box { background: none; border: none; } &.checkbox-container { display: flex; align-items: start; margin-bottom: 16px } } .checkbox { label { line-height: 1; } ::after{ border-left-color: #FEBA03; border-bottom-color: #FEBA03; } } a { text-decoration: underline; } } } &.vertical { .form { .fields { display: flex; flex-direction: column; > div { width: 100%; padding-left: 0; padding-right: 0; } .input-wrapper { &.text-fields { height: auto; } &.text-area { height: auto; min-height: 120px; textarea { min-height: 120px; } } } } .form-bottom { margin-top: 10px; margin-bottom: 20px; .col { width: 100%; display: flex; justify-content: center; .btn { width: 100%; max-width: 320px; } } } } } @media (max-width: 768px) { .form .fields { width: 100%; .input-wrapper { width: 100%; } } .form-bottom .btn { width: 100%; display: flex; justify-content: center; } } } .button-group { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .btn { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; line-height: 1; padding: 0; } .btn.btn-small { transiton: all 0.5s ease; border-width: 0px; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; font-style: normal; color: #000000; line-height: 18px; font-size: 14px; font-weight: 400; color: #151515; line-height: 1; padding: 0.5rem 1rem; gap: 0.5rem; &:hover { color: #000000; color: #151515; } .btn-label { order: 1; }; .icon { margin-left: 0.2rem; order: 2; width: 25px; height: 25px; }; } .btn.btn-medium { transiton: all 0.5s ease; background-color: #FEBA03; border-width: 0px; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; color: #FFFFFF; line-height: 1; padding: 0.8rem 1.5rem; gap: 0.5rem; &:hover { background-color: #FECC03; color: #000000; color: #FFFFFF; } .icon { }; } .btn.btn-big { transiton: all 0.5s ease; background-color: #FEBA03; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; color: #FFFFFF; line-height: 1; padding: 1rem 2rem; gap: 0.5rem; &:hover { background-color: #FECC03; color: #000000; color: #FFFFFF; } .btn-label { order: 1; }; .icon { margin-left: 0.2rem; order: 2; width: 30px; height: 30px; }; } .input-wrapper { input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; } padding: 2px 0; width: 100%; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; font-size: 14px; font-weight: 400; color: #151515; line-height: 1; background-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #E2E2E2; &.active { background-color: #FEBA03; border-color: #FEBA03; } &.checkbox-switch { border: none; background-color: transparent; } } .checkbox-switch { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; background-color: #FFFFFF; label { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; font-size: 16px; font-weight: 400; line-height: 1; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } input[type='checkbox'] { position: relative; width: 40px; height: 20px; -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; border-radius: 20px; transition: background-color 0.4s; background-color: #8C9FC6; opacity: 0.9; &:before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background-color: white; top: 2px; left: 2px; transition: transform 0.4s; } &:checked { background-color: #FEBA03; } &:checked:before { transform: translateX(20px); } &:disabled { cursor: not-allowed; } &:disabled:before { opacity: 0.5; } } } .checkbox { border: none; background-color: transparent; display: flex; cursor: pointer; gap: 10px; label { margin: 0; display: flex; align-items: center; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; font-size: 14px; font-weight: 400; color: #151515; line-height: 1; } input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; position: relative; cursor: pointer; border-radius: 4px; &:before { content: ""; width: 20px; height: 20px; border-style: solid; border-width: 1px; border-color: #E2E2E2; background-color: #FFFFFF; border-radius: 4px; } &:checked:after { content: ""; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; width: 10px; height: 6px; border-left-style: solid; border-left-width: 3px; border-bottom-style: solid; border-bottom-width: 3px; border-left-color: #E2E2E2; border-bottom-color: #E2E2E2; background: transparent; transform: translate(-50%, -50%) rotate(-45deg); } &:disabled, &.disabled { pointer-events: none; cursor: not-allowed; border-color: #898989; } } } .big-checkbox { label { display: flex; justify-content: center; align-items: center; text-transform: uppercase; cursor: pointer; transition: all 0.5s ease; width: 100%; height: 100%; margin: 0; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; font-size: 14px; font-weight: 400; color: #151515; line-height: 1; line-height: 1; padding: 10px; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #112245; &:hover, &.active { border-bottom-color: #FEBA03; } input { opacity: 0; width: 1px; height: 1px; position: absolute; } } } .radio-group{ border: none; background-color: transparent; display: flex; gap: 10px; margin-bottom: 20px; .radio-item { border: none; background-color: transparent; display: flex; align-items: center; gap: 10px; padding: 0 10px; label { margin: 0; cursor: pointer; display: flex; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; font-size: 14px; font-weight: 400; color: #151515; line-height: 1; } input[type='radio'] { --radio-size: 1.2rem; --checked-size: 0.8rem; display: block; width: 1.2rem; height: 1.2rem; aspect-ratio: 1; border-radius: 50%; outline-style: solid; outline-width: 2px; outline-color: #E2E2E2; appearance: none; -webkit-appearance: none; cursor: pointer; &:checked { background-color: transparent; position: relative; cursor: pointer; } &:checked::before { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; background-color: #FEBA03; border-radius: 99rem; width: 0.8rem; height: 0.8rem; aspect-ratio: 1; } &:disabled { pointer-events: none; cursor: not-allowed; border-color: #898989; opacity: 0.5; &:checked:before { display: none; } } } } } .text-fields { &.text-area{ textarea{ border: none !important; height: auto; min-width: 100%; max-width: 100%; height: 90px; } label:not(.error){ top: 25px; } } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; } position: relative; input[type="text"],input[type="email"],textarea { background-color: transparent; padding-top: 20px; padding-left: 10px; outline: none; box-shadow: none !important; width: 100%; border-radius: 5px; &:focus, &:not(:placeholder-shown):not(:focus) { + label { top: 8px; font-size: 10px; padding: 0 5px; } } } label:not(.error) { top: 20%; } label:not(.error) { border: none; position: absolute; left: 5px; top: 50%; z-index: 3; transform: translateY(-50%); padding: 0 5px; pointer-events: none; transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); background-color: transparent; transition-duration: 0.3s; white-space: nowrap; } &:focus-within, &.active { background-color: #FEBA03; border-color: #FEBA03; transition: background-color 0.3s ease; opacity: 0.8; border-top-left-radius: 2px; border-top-right-radius: 2px; } .text-fields:has(input[type="text"]:disabled), .text-fields:has(input[type="email"]:disabled), .text-fields:has(textarea:disabled){ border-color: #898989; opacity: 0.5; } } .file-upload-wrapper,.input-drop-file-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin-block: 20px; min-height: 86px; background: white; transition: all 0.2s ease; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; font-size: 14px; font-weight: 400; color: #151515; line-height: 1; background-color: #FFFFFF; border-style: solid; border-width: 1px; border-color: #E2E2E2;; input[type="file"] { position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; opacity: 0; &:focus { outline: none; } &:disabled { cursor: not-allowed; opacity: 0.5; } } /* chrome */ input[type="file"]::-webkit-file-upload-button { cursor: pointer; } .file-upload-label { span { display: flex; align-items: center; justify-content: center; line-height: 20px; gap: 4px; img { transition: all .5s; } } } &:disabled { opacity: 0.5; } } .select-wrapper { position: relative; width: 100%; display: inline-block; &::after { content: ""; position: absolute; top: 50%; right: 5px; right: 12px; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_1.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/Set_01/01_Freccia_select_down_tipo_1.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: #000000; transition: all 0.5s ease; } &:hover::after { } &:focus-within::after { } } select { padding: 5px 8px; display: flex; align-items: center; outline: none !important; box-shadow: none !important; appearance: none; transition: all 0.5s ease; width: 100%; height: 100%; border: none; background-image: none; border-width: 1px; border-color: #B0B9CA; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; font-style: normal; color: #000000; line-height: 22px; font-weight: 400; line-height: 1; &:active, &:focus, &.active { border-color: #2E4676; } &:disabled { border-color: #E2E2E2; } &:hover { border-color: #2E4676; text-decoration: none; } border-radius: 9999px; padding: 5px 15px; border-style: solid; } .select-couple { display: flex; align-items: center; justify-content: center; height: 100%; .select-wrapper { width: 50%; &:first-child { margin-right: 15px; select { border-top-right-radius: 0; border-bottom-right-radius: 0; } } &:last-child { margin-left: 15px; select { border-top-left-radius: 0; border-bottom-left-radius: 0; } } } } select::-ms-expand { display: none; }.countdownCnt { text-align: center; padding: 30px 0; display: flex; flex-direction: column; .countdownTitle { text-align: left; margin-bottom: 10px; } .countdown { display: flex; justify-content: flex-start; .countdown-item { display: flex; flex-direction: column; align-items: center; margin-right: 3px; &:last-child { margin-right: 0; } } .countdown-value { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.25); min-width: 30px; min-height: 30px; border-radius: 4px; } .countdown-label { font-size: 10px; font-weight: 300; text-align: center; margin-top: 5px; } } } .mobile-footer-nav { position: fixed; z-index: 1200; box-sizing: border-box; bottom: -1px; left: 0; width: 100%; height: 60px; border-top-left-radius: 24px; border-top-right-radius: 24px; left: 1vw; right: 1vw; width: 98vw; border-bottom: none; background-color: #112245; box-shadow: 0px -3px 6px #00000029; .inner { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; box-sizing: border-box; padding-left: 0; padding-right: 0; > div { flex: 1 1 0; min-width: 0; width: auto; cursor: pointer; height: 100%; display: flex; align-items: center; justify-content: center; a{ color: #fff; } .icon { background-color: #FFFFFF; } &.active { .icon { background-color: #FEBA03; } } } } a { display: block; } } .mobile-footer-modal { &.mobile-footer-search, &.mobile-footer-contact { position: fixed; z-index: 1100; box-shadow: 0 -5px 15px rgba(0,0,0,0.15); background-color: #D6E1F4;; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 15px; overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; left: 0; right: 0; width: 100%; padding-bottom: 70px; bottom: 0; transition: max-height 0.8s cubic-bezier(.4,0,.2,1), opacity 0.4s cubic-bezier(.4,0,.2,1); .inner { padding: 10px; padding-bottom: 80px; } &.active { max-height: 75vh; opacity: 1; overflow-y: auto; pointer-events: auto; } } &.mobile-footer-search { .reset-filters { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; > div { display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; background-color: #d0021b; background-color: #112245; border-radius: 24px; box-shadow: 0px 2px 4px rgba(0,0,0,0.15); padding: 8px 14px; .icon { width: 20px; height: 20px; background-color: #fff; margin-left: 8px; } } } .search-form-wrap { display: flex; flex-direction: column; .select-wrapper { height: 45px; } } .submitFilter { position: fixed; display: flex; justify-content: center; align-items: center; text-align: center; left: 10vw; right: 10vw; width: 80vw; bottom: 75px; z-index: 1300; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 1s ease, transform 1s ease; .submit-button { display: flex; align-items: center; justify-content: center; margin: auto; vertical-align: middle; background-color: #d0021b; background-color: #112245; color: #fff; gap: 10px; border: none; border-radius: 32px; padding: 12px 32px; font-size: 1.5rem; font-weight: bold; box-shadow: 0 2px 12px rgba(0,0,0,0.15); transition: background 0.2s; span { font-size: 18px; } .icon { width: 24px; height: 24px; background-color: #fff; } &:disabled { opacity: 0.5; pointer-events: none; } } } &.active { .submitFilter { opacity: 1; transform: translateY(0); pointer-events: auto; } } &.form-control { border-radius: 8px; height: 40px; margin-bottom: 10px; } } &.mobile-footer-contact { left: 0; right: 0; width: 100%; .form { width: 100%; max-width: 500px; margin: 0 auto; .form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .form-description { margin-bottom: 20px; } .fields { display: flex; flex-direction: column; gap: 16px; } } .form-bottom { position: fixed; display: flex; justify-content: center; align-items: center; text-align: center; left: 10vw; right: 10vw; width: 80vw; bottom: 75px; z-index: 1300; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 1s ease, transform 1s ease; .contact-btn { display: flex; align-items: center; justify-content: center; margin: auto; vertical-align: middle; background-color: #d0021b; background-color: #112245; color: #fff; gap: 10px; border: none; border-radius: 32px; padding: 12px 32px; font-size: 1.5rem; font-weight: bold; box-shadow: 0 2px 12px rgba(0,0,0,0.15); transition: background 0.2s; span { font-size: 18px; } .icon { width: 24px; height: 24px; background-color: #fff; } &:disabled { opacity: 0.5; pointer-events: none; } } } &.active { .form-bottom { opacity: 1; transform: translateY(0); pointer-events: auto; } } } }.generic-contact-form-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1050; display: flex; align-items: center; justify-content: center; overflow-y: auto; .modal-dialog { position: relative; width: 100%; max-width: 1140px; margin: 1.75rem auto; } .modal-content { position: relative; display: flex; flex-direction: column; background-color: #F0F0F0; border-radius: 0.3rem; outline: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 0; padding-top: 1rem; padding-right: 1rem; border-bottom: none; .modal-title { margin: 0; font-size: 1.25rem; font-weight: 500; color: #000; } } .modal-body { position: relative; flex: 1 1 auto; padding: 0; } .close { float: right; border: none; background: none; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; opacity: 0.5; cursor: pointer; } }/* Pager */ .lSSlideOuter .lSPager.lSpg { margin: 10px 0 0; padding: 0; text-align: center; } .lSSlideOuter .lSPager.lSpg > li { cursor: pointer; display: inline-block; padding: 0 5px; } .lSSlideOuter .lSPager.lSpg > li a { background-color: #222222; border-radius: 0; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a { background-color: #428bca; } .lSSlideOuter .media { opacity: 0.8; } .lSSlideOuter .media.active { opacity: 1; } /* End of pager */ /** Gallery */ .lSSlideOuter .lSPager.lSGallery { list-style: none outside none; padding-left: 0; margin: 0; overflow: hidden; transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lSSlideOuter .lSPager.lSGallery li { overflow: hidden; -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s; transition: border-radius 0.12s linear 0s 0.35s linear 0s; } .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover { border-radius: 0; } .lSSlideOuter .lSPager.lSGallery img, .lSSlideOuter .lightSlider li img { border-radius: 0; aspect-ratio: 4/3; object-fit: cover; object-position: center; display: block; height: auto; max-width: 100%; border-radius: 6px; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after { content: " "; display: table; } .lSSlideOuter .lSPager.lSGallery:after { clear: both; } /* End of Gallery*/ /* slider actions */ .lSAction > a { width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; top: 50%; background-image: none; cursor: pointer; position: absolute; z-index: 99; margin-top: -16px; opacity: 0.5; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; span.icon { display: block; background-color: white; width: 30px; height: 30px; } } .lSAction > a:hover { opacity: 1; } .lSAction > .lSPrev { background-position: 0 0; left: 10px; } .lSAction > .lSNext { background-position: -32px 0; right: 10px; } .lSAction > a.disabled { pointer-events: none; } .cS-hidden { height: 1px; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } /* vertical */ .lSSlideOuter.vertical { position: relative; } .lSSlideOuter.vertical.noPager { padding-right: 0px !important; } .lSSlideOuter.vertical .lSGallery { position: absolute !important; right: 0; top: 0; } .lSSlideOuter.vertical .lightSlider > * { width: 100% !important; max-width: none !important; } /* vertical controlls */ .lSSlideOuter.vertical .lSAction > a { left: 50%; margin-left: -14px; margin-top: 0; } .lSSlideOuter.vertical .lSAction > .lSNext { background-position: 31px -31px; bottom: 10px; top: auto; } .lSSlideOuter.vertical .lSAction > .lSPrev { background-position: 0 -31px; bottom: auto; top: 10px; } .si-footer { margin-top: auto; display: block; .legal-notes-bar { display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 20px; background-color: #FFFFFF; height: 30px; border: none; border-top-style: solid; border-top-width: 0px; @media (max-width: 767px) { padding-inline: 16px; padding-block: 16px; height: auto !important; .footer-content { font-size: 14px; line-height: 1.4; } } } .social-bar { cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: #112245; height: 80px; font-size: 14px; font-weight: 400; color: #FEBA03; line-height: 24px; border: none; border-top-style: solid; border-top-width: 1px; border-top-color: #FFFFFF; @media (max-width: 767px) { padding-inline: 16px; padding-block: 12px; height: auto !important; flex-direction: column; gap: 8px; } .follow-us { display: block; @media (max-width: 767px) { margin-bottom: 4px; } } .social-icons { cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; @media (max-width: 767px) { flex-wrap: wrap; gap: 12px; justify-content: center; } .icon { } a.social-link { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; @media (max-width: 767px) { width: 32px; height: 32px; } } } } .mobile-footer-nav-dock-bg { height: 65px; pointer-events: none; background-color: #FFFFFF; @media (max-width: 360px) { height: 55px; /* Per schermi molto piccoli */ } } } .si-header{ background-color: #112245; border-bottom-width: 1px; border-bottom-color: #FFFFFF; border-bottom-style: solid; @media (max-width: 767px) { padding-inline: 16px; } position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all 0.3s ease; .logo{ display: inline-flex; } .burger-menu{ cursor: pointer; display: flex; align-items: center; .btn-nav-toggle { display: block; width: 40px; height: 40px; position: relative; cursor: pointer; span { display: block; background-color: #FFFFFF; height: 3px; width: 26px; position: absolute; left: 8px; transition: all .2s ease-in-out; transform-origin: center; &:nth-child(1) { top: 12px; } &:nth-child(2) { top: 19px; } &:nth-child(3) { top: 26px; } } @media (hover: hover) { &:hover span { background-color: #FFFFFF; } } &.active span { background-color: #FFFFFF; &:nth-child(1) { top: 50%; transform: rotate(45deg); } &:nth-child(2) { opacity: 0; } &:nth-child(3) { top: 50%; transform: rotate(-45deg); } } } } .phone-box { gap: 0px; margin-left: 14px; .icon { margin-left: 5px; background-color: #FEBA03; &.small{mask-size: 28px; width: 28px; height: 28px;} &.medium{mask-size: 32px; width: 32px; height: 32px;} &.big{mask-size: 40px; width: 40px; height: 40px;} &.none{display: none;} } .phone-number { @media (max-width: 767px){ display: none; } font-weight: 600; color: #FEBA03; line-height: 1; padding-inline: 0px; } } .cta-box{ margin-left: 14px; } .gap-10{ gap:10px; } } .si-sub-header { background-color: #FEBA03; position: fixed; z-index: 9; left: 0; right: 0; padding-inline: 0px; .logo{ display: inline-flex; } } .mega-menu { display: none; position: absolute; text-align: left; left: 0; right: 0; top: -200px; z-index: 2; padding-block: 40px 100px; cursor: auto; background-color: #112245; .col{ display: flex; flex-direction: column; } .si-mm-item{ font-weight: 400; padding-block: 5px; &.title{ font-weight: 500; @media min-width: 768px{ margin-bottom: 16px; } a, span{ font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; color: #FEBA03; line-height: 1; } } a,span{ font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; color: #FEBA03; line-height: 1; } } &.active{ display: block; } } .first-level-menu{ list-style: none; margin: 0; display: flex; align-items: center; gap: 14px; li{ display: inline-block; position: relative; } } .second-level-menu{ background-color: #112245; position: absolute; top: 100%; left: 0; display: none; padding: 20px; margin-left: -22px; li{ padding-block: 0px; padding-bottom: 5px; &:last-child{ padding-bottom: 0px; } } } .third-level-menu{ background-color: #112245; position: absolute; top: 0; left: 100%; display: none; padding: 0; padding: 20px; li{ padding-block: 0px; padding-bottom: 5px; &:last-child{ padding-bottom: 0px; } } } .first-level-menu li a, .second-level-menu li a, .third-level-menu li a, .first-level-menu li span, .second-level-menu li span, .third-level-menu li span { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; color: #FFFFFF; line-height: 1; } .first-level-menu li:hover > a, .second-level-menu li:hover > a, .third-level-menu li:hover > a, .first-level-menu li:hover > span, .second-level-menu li:hover > span, .third-level-menu li:hover > span{ opacity: 0.6; } .first-level-menu li:hover .second-level-menu, .second-level-menu li:hover .third-level-menu{ width: max-content; display: block; z-index: 1; } .second-level-menu li, .third-level-menu li{ display: block; margin: 0; padding-inline: 8px; } .si-sub-header{ height: 35px; .first-level-menu{ padding-inline: 0; justify-content: center; gap: 22px; >li{ height: 35px; align-items: center; display: flex; } } .first-level-menu li a, .second-level-menu li a, .third-level-menu li a, .first-level-menu li span, .second-level-menu li span, .third-level-menu li span{ font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; font-style: normal; color: #000000; line-height: 18px; font-size: 14px; font-weight: 600; color: #112245; line-height: 1; } .first-level-menu li:hover > a, .second-level-menu li:hover > a, .third-level-menu li:hover > a{ opacity: 0.6; } .second-level-menu, .third-level-menu{ background-color: #FEBA03; } } .mega-menu-mobile { display: none; position: fixed; text-align: left; left: 0; right: 0; top: 0; z-index: 2; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; padding-block: 20px; background-color: #112245; &.active { display: block; height: auto; max-height: 80vh; overflow-y: auto; } .mobile-menu-list { list-style: none; padding: 0; margin: 0; width: 100%; } .mobile-menu-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 15px 16px; &:last-child { border-bottom: none; padding-bottom: 0; } } .menu-header { width: 100%; } .menu-toggle, .submenu-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; &.expanded .expander-icon { transform: rotate(180deg); } } .expander-icon { width: 24px; height: 24px; position: relative; transition: transform 0.3s ease; &:before, &:after { content: ''; position: absolute; background-color: #fff; transition: all 0.3s ease; } &:before { width: 2px; height: 12px; top: 6px; left: 11px; opacity: 1; } &:after { width: 12px; height: 2px; top: 11px; left: 6px; } &.small { width: 18px; height: 18px; &:before { height: 8px; top: 5px; left: 8px; } &:after { width: 8px; top: 8px; left: 5px; } } } .expanded .expander-icon:before { opacity: 0; } .mobile-submenu, .mobile-subsubmenu { list-style: none; padding: 0; margin: 0; overflow: hidden; transition: max-height 0.3s ease; max-height: 1000px; &.collapsed { max-height: 0; } } .mobile-submenu { padding-left: 16px; } .mobile-subsubmenu { padding-left: 32px; padding-top: 10px; padding-bottom: 10px; } .mobile-menu-subitem { padding: 10px 0; &:first-child { padding-top: 20px; } } .si-mm-item { font-weight: 400; &.title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; color: #FEBA03; line-height: 1; } a, span { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; font-style: normal; color: #000000; line-height: 20px; color: #FEBA03; line-height: 1; display: block; text-decoration: none; } } } .si-rental { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; padding: 15px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; .rental-introduction { h1, h2, h3, h4, h5, h6 { font-size: 32px; line-height: 50px; } p, li { font-size: 16px; line-height: 20px; } font-size: 16px; line-height: 20px; } .accordion-content { &.body-1 { h1, h2, h3, h4, h5, h6 { line-height: 1; } p, li { line-height: 1; } line-height: 1; } } .accordion-header { display: inline-flex; align-items: center; justify-content: flex-end; cursor: pointer; font-weight: 500; transition: all 0.5s ease-in-out; margin-top: 10px; &.h4 { font-size: 12px; line-height: 1; } } .rental-search-container { #vehicleSearchElement { padding: 20px; background-color: #D1D1D1; margin-bottom: 30px; position: relative; z-index: 1; box-shadow: none; border: none; .search-title { line-height: 1; padding-top: 5px; padding-bottom: 5px; } .row { .form-group { padding-top: 5px; padding-bottom: 5px; } } .reset { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; height: 100%; transition: all 0.5s ease; outline: none !important; appearance: none; &::-moz-focus-inner, button::-moz-focus-inner { border: 0; } .btn { .icon { outline: none; appearance: none; width: 32px; height: 32px; } padding: 0.1rem !important; outline: none !important; appearance: none; &::-moz-focus-inner { border: 0; } &:focus-visible { outline: none !important; } } &:active, &:focus, &:focus-visible { outline: none !important; appearance: none; } } .form-group { select, label, option { line-height: 1; } .select-wrapper, .input-wrapper { } } button[type="submit"] { display: flex; justify-content: flex-end; transition: all 0.5s ease; margin-top: 5px; span { line-height: 1; } .vehicle-counter { line-height: 1; } .icon { } } } } } .si-vehicle-detail.rental{ -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; .top { display: flex; align-items: center; margin: 20px 0; @media (min-width:992px) { padding-top: 40px; margin-bottom: 20px; } @media (max-width:992px) { padding-top: 16px; margin-bottom: 20px; } .model-version { display: flex; flex-direction: column; align-items: flex-start; .brand-model { line-height: 1; } .version { line-height: 1; } } .header-rentalFee { display: flex; flex-direction: column; align-items: flex-end; .rentalFee { line-height: 1; } .vat { line-height: 1; margin-left: 5px; } } } #vehicle-top { transition: all 0.3s ease; .hidden { display: none; } &.fixed { .top { margin: 0; padding: 5px 0; } position: fixed; width: 100%; z-index: 100; box-shadow: 0px 1px 3px #1515154D; left: 0; margin: 0; } } .vehicle-detail-images { img { object-fit: cover; aspect-ratio: 4/3 !important; width: 100%; height: 100%; } padding-bottom: 20px; .lSAction > a { background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s; &:hover { background-color: rgba(0, 0, 0, 0.5); } span.icon { width: 32px; height: 32px; } } } .selected-options { padding-bottom: 20px; border-radius: 8px; padding: 8px; .selected-item { transition: all 0.5s ease; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 8px; margin-bottom: 10px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000; .selected-label { line-height: 1; } .selected-value { line-height: 1; } } .btn-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px; width: 100%; } } .show-options { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 500; transition: all 0.5s ease; padding: 8px 15px; line-height: 1; border-bottom: 2px solid black; .icon { width: 32px; height: 32px; } .less { display: none; } &.expanded { .icon { transform: rotate(180deg); } .more { display: none; } .less { display: inline-flex; align-items: center; justify-content: center; } } } .rental-options-container { padding-bottom: 20px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease; .rental-option-card { display: none; background-color: #F0F0F0; } &.expanded { margin-top: 10px; max-height: 1000px; .rental-option-card { display: block; cursor: pointer; border-style: solid; border-width: 0px; border-color: #B5B6B6; padding: 15px; margin-bottom: 15px; width: 100%; transition: all 0.3s ease; opacity: 0.8; background-color: #F0F0F0; .option-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #151515; .option-rentalFee { font-size: 22px; line-height: 1; } .vat { } .option-check { display: flex; align-items: center; justify-content: center; .circle-outer { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border-style: solid; border-width: 2px; border-color: black; } .icon { width: 25px; height: 25px; border-radius: 50%; background-color: transparent; transition: all 0.3s ease; } } } .option-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #151515; .option-label { font-size: 14px; line-height: 1; } .option-value { font-size: 14px; line-height: 1; } } .option-item:last-child { border-bottom: none; } &.active { opacity: 1; .option-title { .option-check { .circle-outer { background-color: black; } .icon { background-color: #F0F0F0; } } } } &:hover { opacity: 1; transition: all 0.3s ease; } } } } .show-features { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 500; transition: all 0.5s ease; padding: 15px; .features-main-title { line-height: 1; } .icon { background-color: black; width: 32px; height: 32px; } &.expanded { .icon { transform: rotate(180deg); } } } .features-container { margin-bottom: 20px; line-height: 1; border: none; .vehicle-features-container { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; .vehicle-feature { display: none; } &.expanded { margin: 10px 0 25px 0; max-height: 1000px; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; .vehicle-feature { display: flex; justify-content: space-between; padding: 8px 0; border-bottom-style: solid; border-bottom-width: 1px; .feature-label { line-height: 1; } .feature-value { line-height: 1; } } } } } .services-container { margin-bottom: 20px; line-height: 1; border: none; .show-services { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 500; transition: all 0.5s ease; padding: 15px; .service-main-title { line-height: 1; } .icon { background-color: black; color: black; width: 32px; height: 32px; } &.expanded { .icon { transform: rotate(180deg); } } } .services-list-container { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; .service-card { display: none; } &.expanded { margin: 10px 0 25px; max-height: 1000px; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; .service-card { display: block; padding: 15px; border-style: solid; border-width: 1px; border-color: #D1D1D1; .service-title { display: flex; align-items: center; justify-content: start; margin-bottom: 8px; line-height: 1; .icon { width: 25px; height: 25px; } } .service-content { font-size: 14px; line-height: 18px; p { font-size: 14px; line-height: 18px; } } } } } } .relatedVehicles { padding-block: 80px; margin-bottom: 80px; #owlVehicles { .owl-item { .item { padding-bottom: 15px; } } .owl-dots { text-align: center; button { height: 5px; width: 30px; background-color: black; margin: 0 4px; &.active { background-color: red; } } } } .seeAll { a { top: -15px; position: relative; z-index: 5; } } } .si-contact-form-element { padding-bottom: 20px; .form { padding: 20px; .form-head { .form-title { line-height: 1; } .form-subtitle { line-height: 1; } } .fields { > div { padding: 6px; } a { color: inherit; text-decoration: none; } } } } } .chat { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 9999 !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; cursor: pointer !important; transition: all 0.3s ease; opacity: 0.6; .icon { background-color: #D81B43; width: 50px; height: 50px; } &:hover { opacity: 1; transform: scale(1.1); } } .si-vehicles { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; .vehicle-list{row-gap: 40px:} } .main-title { font-size: 22px; font-weight: 500; text-transform: capitalize; } .search-container { transition: all 0.5s ease; #vehicleSearchElement { padding: 20px; margin-top: 16px; margin-bottom: 40px; padding-top: 30px; padding-bottom: 50px; .form-group { select, label, option { font-size: 16px; font-weight: 400; } .select-wrapper, .input-wrapper { } } background-color: #D9E1EE; border-radius: 4px; border: none; box-shadow: none; .search-title { font-size: 18px; line-height: 30px; padding-top: 12px; padding-bottom: 12px; } .row{ > div { padding-inline: 12px; } .form-group { margin-top: 12px; margin-bottom: 12px; } } .big-checkbox { height: 40px; height: 40px; display: flex; align-items: center; } .group { display: flex; align-items: center !important; justify-content: start; flex-wrap: wrap; label { display: flex; justify-content: center; font-size: 14px; font-weight: 600; color: #151515; .icon { background-color: #151515; } } .big-checkbox { label { padding-right: 15px !important; padding-left: 15px !important; } } } .archive { display: flex; align-items: center !important; justify-content: center; flex-wrap: wrap; label { display: flex; justify-content: center; font-size: 14px; font-weight: 600; color: #151515; } .big-checkbox { flex: 1; } } .archive-row { display: flex; flex-direction: row; align-items: center !important; justify-content: flex-start; width: 100%; margin-bottom: 4px; gap: 8px; .big-checkbox { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; } label { display: flex; justify-content: center; width: 100%; font-size: 14px; font-weight: 600; color: #151515; } } .reset { display: flex; justify-content: flex-start; align-items: center; height: 100%; transition: all 0.5s ease; outline: none !important; appearance: none; &::-moz-focus-inner, button::-moz-focus-inner { border: 0; } .btn { color: #151515; padding: 0.1rem !important; outline: none !important; appearance: none; &::-moz-focus-inner { border: 0; } &:focus-visible { outline: none !important; } .icon { outline: none; appearance: none; width: 32px; height: 32px; background-color: #151515; } } &:active, &:focus, &:focus-visible { outline: none !important; appearance: none; } } button[type="submit"] { display: flex; justify-content: flex-end; background-color: #112245; margin-top: 12px; span { font-size: 16px; font-weight: 500; color: #FFFFFF; } .vehicle-counter { font-weight: 600; color: #FFFFFF; } .icon { width: 16px; height: 16px; background-color: #FFFFFF; } } } &.style2 { background-color: #D9E1EE; #vehicleSearchElement { .group { display: flex; align-items: center !important; justify-content: start; } .search-toggler { display: flex; justify-content: center; align-items: center; text-align: center; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: pointer; padding-inline: 12px; margin: 12px; .icon { transition: all 0.5s ease; width: 30px; height: 30px; margin-left: 10px; &.rotate { transform: rotate(180deg); } } } .closed { display: none; height: 0; } .closable-search { margin-top: 20px; } .reset { justify-content: flex-end; } } } &:not(.style2) { #vehicleSearchElement { .select-couple { .select-wrapper { &:first-child { margin-right: 1px; } &:last-child { margin-left: 1px; } } } } } } .vehicle-list-results-tags { row-gap: 10px; display: flex; flex-flow: wrap; } .tag { background-color: #FFF176; border-style: solid; border-width: 2px; border-color: #151515; box-shadow: none; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 10px; border-radius: 0px; margin-right: 10px; font-weight: 600; color: #00897B; line-height: 1; .x { width: 15px; height: 15px; cursor: pointer; .icon { background-color: black; background-color: #00897B; width: 15px; height: 15px; display: inline-block; } } } .vehicle-ordering { display: flex; align-items: center; justify-content: flex-end; .select-wrapper { position: relative; width: 200px; select { width: 100%; padding-right: 35px; text-overflow: ellipsis; line-height: 1; } } } .paginator { display: flex; justify-content: center; align-items: center; margin-top: 2rem; margin-bottom: 1rem; .prev, .next { display: flex; justify-content: center; align-items: center; margin: 0 20px; a { display: flex; align-items: center; text-decoration: none; transition: color 0.3s ease; font-size: 14px; font-weight: 400; line-height: 1; &:hover { opacity: 0.9; } } .icon { width: 25px; height: 25px; } } ul.pagination { display: flex; list-style: none; padding: 0; margin: 0; overflow: hidden; li { margin: 0; position: relative; &:not(:last-child) { border-right: none; } a, span { display: flex; justify-content: center; align-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 0; border: 1px solid #dee2e6; transition: all 0.3s ease; margin-right: -1px; font-size: 14px; font-weight: 600; color: #D1D1D1; line-height: 1; text-decoration: none; &:hover { opacity: 0.9; } } &:first-child a, &:first-child span { } &:last-child a, &:last-child span { margin-right: 0; } &.active a { color: #151515; position: relative; z-index: 2; } &.disabled span { cursor: not-allowed; } } } } .si-vehicle-detail { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; .top { display: flex; align-items: center; margin: 20px 0; .title { display: flex; align-items: center; justify-content: start; .model-version { display: flex; flex-direction: column; align-items: flex-start; .brand-model { line-height: 1; } .version { line-height: 1; } } } .prices { display: flex; align-items: flex-end; flex-direction: column; .finalPrice { font-size: 24px; font-weight: 600; line-height: 30px; } .listPrice { font-size: 16px; font-weight: 400; line-height: 1; text-decoration: line-through; } .vat { font-size: 14px; font-weight: 400; line-height: 1; } } } #vehicle-top { transition: all 0.3s ease; .hidden { display: none; } &.fixed { .top { margin: 0; padding: 5px 0; } position: fixed; width: 100%; z-index: 100; left: 0; margin: 0; } } .vehicle-images { margin-bottom: 20px; margin-bottom: 0px; width: 100%; .images-cnt { width: 100%; @media (min-width:992px) { display: grid; grid-column-gap: 8px; grid-row-gap: 8px; height: auto; overflow: hidden; } img { object-fit: cover; aspect-ratio: 4/3 !important; width: 100%; height: 100%; } @media (min-width:992px) { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; max-width: 100%; box-sizing: border-box; } .image { cursor: pointer; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); transition: all .3s; aspect-ratio: 4/3 !important; width: 100%; height: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; &.image0 { grid-area: 1 / 1 / 3 / 2; } &.image1 { grid-area: 1 / 2 / 2 / 3; } &.image2 { grid-area: 1 / 3 / 2 / 4; } &.image3 { grid-area: 2 / 2 / 3 / 3; } &.image4 { grid-area: 2 / 3 / 3 / 4; } } } .lSAction > a { background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s; &:hover { background-color: rgba(0, 0, 0, 0.5); } span.icon { width: 32px; height: 32px; } } } .optional-actions { padding: 10px 10px; margin-bottom: 32px; .optional-actions-font { font-size: 16px; font-weight: 500; line-height: 1; } width: 100%; display: flex; flex-direction: row; justify-content: center; > div { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 5px; span:not(:first-child)::before { content: '|'; margin: 0 5px; } } .gallery-btn, .tour-btn, .download-btn, .social-btn, .info-btn { padding: 5px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; .icon { min-width: 32px !important; min-height: 32px !important; background-color: #112245; } &:hover { & + span::before { opacity: 1; } .icon, span:not(::before) { opacity: 0.8; } } } &.secondary-column { padding-bottom: 32px; flex-direction: column; > div { flex-direction: column; align-items: stretch; justify-content: center; padding: 5px; width: 100%; margin-bottom: 10px; span:not(:first-child)::before { display: none; } } .gallery-btn, .tour-btn, .download-btn, .social-btn, .info-btn { padding: 12px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); justify-content: flex-start; &:last-child { margin-bottom: 0; border-bottom: none; } .icon { width: 32px; height: 32px; } } } @media (max-width: 768px) { padding: 15px 10px; flex-direction: column; > div { flex-direction: column; align-items: stretch; padding: 5px; width: 100%; margin-bottom: 10px; span:not(:first-child)::before { display: none; } } .gallery-btn, .tour-btn, .download-btn, .social-btn, .info-btn { padding: 12px 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); justify-content: flex-start; &:last-child { margin-bottom: 0; border-bottom: none; } .icon { width: 32px; height: 32px; } } } } .vehicle-features { padding: 20px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; .features-container { display: grid; width: 100%; grid-template-columns: repeat(6, 1fr); gap: 20px; @media (max-width: 1200px) { grid-template-columns: repeat(5, 1fr); } @media (max-width: 992px) { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px; } @media (max-width: 480px) { grid-template-columns: repeat(2, 1fr); } &:has(.feature-item:nth-child(10):last-child) { grid-template-columns: repeat(5, 1fr); @media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); } @media (max-width: 480px) { grid-template-columns: repeat(2, 1fr); } } &:has(.feature-item:nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { grid-template-columns: repeat(2, 1fr); } } .feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px; position: relative; width: auto; &:after { content: ''; position: absolute; right: -10px; top: 15%; height: 80%; width: 1px; background-color: rgba(0, 0, 0, 0.1); display: block; } &:nth-child(6n):after { display: none; } @media (max-width: 1200px) { &:nth-child(6n):after { display: block; } &:nth-child(5n):after { display: none; } } @media (max-width: 992px) { &:nth-child(5n):after { display: block; } &:nth-child(4n):after { display: none; } } @media (max-width: 768px) { &:nth-child(4n):after { display: block; } &:nth-child(3n):after { display: none; } } @media (max-width: 480px) { &:nth-child(3n):after { display: block; } &:nth-child(2n):after { display: none; } } .features-container:has(.feature-item:nth-child(10):last-child) & { &:nth-child(6n):after { display: block; } &:nth-child(5n):after { display: none; } @media (max-width: 768px) { &:nth-child(5n):after { display: block; } &:nth-child(3n):after { display: none; } } @media (max-width: 480px) { &:nth-child(3n):after { display: block; } &:nth-child(2n):after { display: none; } } } .features-container:has(.feature-item:nth-child(8):last-child) & { &:nth-child(6n):after { display: block; } &:nth-child(5n):after { display: block; } &:nth-child(4n):after { display: none; } @media (max-width: 768px) { &:nth-child(4n):after { display: block; } &:nth-child(2n):after { display: none; } } @media (max-width: 480px) { &:nth-child(3n):after { display: block; } &:nth-child(2n):after { display: none; } } } > span:not(.icon) { width: 100%; margin-top: 10px; display: flex; flex-direction: column; .feature-label { line-height: 1; display: block; margin-bottom: 5px; } .feature-value { line-height: 1; display: block; } } .icon { width: 32px; height: 32px; min-width: 32px; } } } &.secondary-column { margin-bottom: 20px; padding: 20px 15px; margin-bottom: 20px; @media (max-width: 768px) { padding: 20px 15px; } .features-container { width: 100%; display: flex; flex-direction: column; gap: 10px; .feature-item { width: 100%; margin-bottom: 10px; padding: 5px; flex-direction: row; align-items: center; text-align: left; position: relative; border-bottom: none; &:after { display: none; } &:not(:last-child) { position: relative; &:before { content: ''; position: absolute; bottom: -10px; left: 5%; width: 90%; height: 1px; background-color: rgba(0, 0, 0, 0.1); } } &:last-child { margin-bottom: 0; } .icon { width: 32px; height: 32px; margin-right: 15px; margin-bottom: 0; } > span:not(.icon) { margin-top: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; .feature-label { line-height: 1; margin-bottom: 0; margin-right: 5px; } .feature-value { line-height: 1; display: inline; } } } } } } .location { padding-bottom: 20px; width: 100%; display: flex; flex-wrap: wrap; background-color: #9E0909; .img { flex: 0 0 auto; width: 30%; order: 2; img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; } } .info { flex: 1; display: flex; flex-direction: column; order: 1; padding: 20px; gap: 5px; .location-title { line-height: 1; } .location-address { line-height: 1; } .location-contacts { a { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; color: inherit; } display: flex; flex-wrap: wrap; gap: 5px; line-height: 1; .icon { } } } @media (max-width: 768px) { flex-direction: column; .img { width: 100%; order: 1; border-radius: 0; img { border-radius: 0; } } .info { order: 2; border-radius: 0; } } &.secondary-column { padding-bottom: 20px; flex-direction: column; .img { width: 100%; order: 1; border-radius: 0; img { border-radius: 0; } } .info { order: 2; border-radius: 0; } } } .tab-box { margin-bottom: 70px; width: 100%; .nav-tabs { display: flex; flex-wrap: nowrap; width: 100%; .nav-item { flex: 1; min-width: 0; } .nav-link { font-size: 16px; font-weight: 600; color: #151515; line-height: 1; transition: all 0.3s ease; cursor: pointer; white-space: normal; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: center; align-items: center; height: 100%; } } .tab-content { background-color: #F0F0F0; .tab-pane { padding: 20px; display: none; line-height: 1; .row { display: flex; flex-wrap: wrap; } ul { padding-left: 20px; li { display: flex; align-items: center; margin-bottom: 10px; .icon { width: 32px; height: 32px; margin-right: 10px; } } } .appearance, .tecnical-features { width: 50%; @media (max-width: 768px) { width: 100%; } margin-bottom: 20px; .voice { border-radius: 4px; display: flex; margin-bottom: 5px; padding: 5px 15px; width: 100%; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: thin solid black; > span { width: 50%; text-align: left; } } .title { padding: 5px 15px; width: 100%; display: flex; align-items: center; font-weight: bold; margin-bottom: 10px; } } .appearance { padding-left: 15px; padding-right: 5px; } .tecnical-features { padding-left: 5px; padding-right: 15px; } .option-item { width: 48%; margin-right: 2%; margin-bottom: 8px; display: flex; align-items: flex-start; } .option-item .icon { margin-right: 10px; flex-shrink: 0; } @media (max-width: 768px) { .option-item { width: 100%; margin-right: 0; } } .consumption-data, .note-emissions { width: 100%; margin-bottom: 20px; .title { padding: 5px 15px; width: 100%; display: flex; align-items: center; font-weight: bold; margin-bottom: 10px; } } .consumption-data { ul { padding-left: 20px; list-style: none; li { display: flex; align-items: center; margin-bottom: 10px; .icon { width: 32px; height: 32px; margin-right: 10px; } } } } .emissions-note { padding: 0 15px; font-size: 0.9em; font-style: italic; opacity: 0.8; } &.active { display: block; } } } &.style1 { .nav-tabs { .nav-item { margin-right: 6px; &:last-child { margin-right: 0; } white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-link { border-top-left-radius: 0px; border-top-right-radius: 0px; opacity: 0.75; background-color: #F0F0F0; position: relative; z-index: 2; border-bottom: none; padding: 10px 20px; &.active { border-bottom: 0 !important; border-bottom-width: 0 !important; border-bottom-style: none !important; opacity: 1; } } .nav-item.active { margin-bottom: -5px; position: relative; z-index: 3; .nav-link { border-bottom-color: transparent !important; border-bottom-width: 0 !important; border-bottom-style: none !important; &:after { content: ''; position: absolute; bottom: -2px; height: 12px; left: 0; right: 0; background-color: #F0F0F0; z-index: 10; } } } } .tab-content { transition: all 0.3s ease; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; position: relative; z-index: 1; } } &.style2 { .nav-tabs { .nav-link { border: none !important; padding: 10px 20px; text-align: center; opacity: 0.75; transition: all 0.3s ease; color: #151515; position: relative; &.active { opacity: 1; &:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #000; } } } } .tab-content { transition: all 0.3s ease; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; position: relative; z-index: 1; } } @media (max-width: 768px) { .tab-content .content { .row { flex-direction: column; } .appearance, .tecnical-features { width: 100%; padding: 0 10px; } } } } .expander-box { margin-bottom: 70px; background-color: #F0F0F0; .expander-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; cursor: pointer; transition: all 0.3s ease; font-size: 16px; font-weight: 600; color: #151515; line-height: 1; .icon { width: 32px; height: 32px; background-color: #151515; transition: all 0.3s ease; transform: rotate(0deg); } &.active { .icon { transform: rotate(180deg); } } } .expander-content { max-height: 0; overflow: hidden; transition: all 0.4s ease; padding: 0 15px; line-height: 1; .row { display: flex; flex-wrap: wrap; } .appearance, .tecnical-features { width: 48%; @media (max-width: 768px) { width: 100%; } margin-bottom: 20px; .title { padding: 5px 15px; width: 100%; display: flex; align-items: center; margin-bottom: 10px; margin-left: 10px; font-size: 16px; font-weight: 600; color: #151515; line-height: 1; @media (max-width: 768px) { margin-left: 0; } } .voice { border-radius: 4px; display: flex; margin-bottom: 5px; padding: 5px 15px; width: 100%; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: thin solid black; > span { width: 50%; text-align: left; } } } .appearance { padding-left: 15px; padding-right: 5px; @media (max-width: 768px) { padding-left: 10px; } } .tecnical-features { padding-left: 5px; padding-right: 15px; @media (max-width: 768px) { padding-right: 10px; } } ul { padding-left: 20px; li { display: flex; align-items: center; margin-bottom: 10px; .icon { width: 32px; height: 32px; margin-right: 10px; } } } .option-item { width: 45%; margin-bottom: 4px; display: flex; align-items: center; justify-content: flex-start; } .option-item .icon { margin-right: 10px; flex-shrink: 0; } @media (max-width: 768px) { .option-item { width: 100%; margin-right: 0; } } .consumption-data, .note-emissions { width: 100%; margin-bottom: 20px; .title { padding: 5px 15px; width: 100%; display: flex; align-items: center; font-weight: bold; margin-bottom: 10px; color: #151515; } } .consumption-data { ul { padding-left: 20px; list-style: none; li { display: flex; align-items: center; margin-bottom: 10px; .icon { width: 32px; height: 32px; margin-right: 10px; } } } } .emissions-note { padding: 0 15px; font-size: 0.9em; font-style: italic; opacity: 0.8; } &.active { max-height: 4000px; padding: 0 15px; margin-bottom: 15px; } } @media (max-width: 768px) { .row { flex-direction: column; } .appearance, .tecnical-features { width: 100%; padding: 0 10px; } } &.style1 { border: none; padding: 0; overflow: visible; .expander { margin-bottom: 0; border: none; border-radius: 0; background: transparent; overflow: visible; } .expander-header { background-color: transparent; color: #151515; opacity: 1; padding: 15px; border: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0, 0, 0, 0.1); &:hover { opacity: 0.9; } &.active { opacity: 1; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0, 0, 0, 0.1); } .icon { width: 32px; height: 32px; background-color: #151515; } } .expander-content { background-color: transparent; &.active { padding: 15px; border-top: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0, 0, 0, 0.1); margin-bottom: 0; } } .expander:first-child, .expander:last-child, .expander:first-child .expander-header, .expander:last-child .expander-header, .expander:last-child .expander-content.active { border-radius: 0; } } &.style2 { background: transparent; border: none; .expander { background-color: #F0F0F0; border-radius: 0px; margin-bottom: 15px; .expander-header { border-radius: 0px; &:hover { opacity: 0.9; } &.active { font-weight: bold; } } .expander-content.active { border-radius: 0px; } } } } .relatedVehicles { margin-bottom: 70px; .related-vehicles-title { font-size: 22px; font-weight: 500; line-height: 1; margin-bottom: 20px; } #owl-nav{ display: flex; justify-content: center; align-items: center; gap: 15px; >button{ border: none; background-color: #B5B6B6; background-color: black; background-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-position: center; align-items: center; display: flex; min-height: 10px; transition: all .2s ease; width: 20px; height: 20px; padding:0; &.owl-prev{ -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_sx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_sx.svg'); } &.owl-next{ -webkit-mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_dx.svg'); mask-image: url('/bundles/stretchintranet/theme/designs/aurora/icons/carousel_set/c_02_dx.svg'); } span{ display: none; } } #owl-dots{ display:flex; gap: 8px; .owl-dot{ width: 8px; height: 8px; padding:0; background-color: #E2E2E2; border-radius: 100%; border-width: thin; border-style: solid; border-color: #FFFFFF; &.active{ background-color: #FEBA03; border-color: #FEBA03; } } } } } .financing-box { margin-bottom: 70px; background-color: #D1D1D1; overflow: hidden; .financing-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; .financing-title { font-size: 16px; font-weight: 600; color: #151515; line-height: 1; } .fee-amount { font-size: 20px; line-height: 1; } .toggle-icon-container { .toggle-icon { cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .icon { width: 32px height: 32px; background-color: #151515; transition: all 0.3s ease; } .toggle-icon.active { transform: rotate(180deg); } } } .financing-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .financing-content.active { max-height: 1000px; transition: max-height 0.5s ease-in; } .financing-details-container { display: flex; padding: 15px; } .financing-subtitle { flex: 0 0 50%; padding: 8px 0; padding-right: 20px; font-size: 14px; line-height: 1; } .financing-params-container { flex: 0 0 50%; .financing-params { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1; li { padding: 8px 0; display: flex; justify-content: space-between; align-items: center; } li:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } } } .financing-disclaimer { padding: 15px; .disclaimer-content { margin: 0; font-size: 10px; line-height: 1; } } &.secondary-column { margin-bottom: 70px; .financing-details-container { flex-direction: column; padding: 0 15px 15px; } .financing-subtitle { flex: 0 0 100%; padding: 8px 0; padding-right: 0; margin-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .financing-params-container { flex: 0 0 100%; width: 100%; .financing-params { li { flex-direction: column; align-items: flex-start; gap: 5px; } } } } } .si-contact-form-element { padding: 0; padding-bottom: 40px; .form { padding: 20px; background-color: #F0F0F0; .form-head { .form-title { font-size: 22px; font-weight: 600; line-height: 1; } .form-subtitle { font-size: 16px; font-weight: 400; line-height: 1; } } .fields { > div { padding: 6px; } a { color: inherit; text-decoration: none; } } } } } .chat { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 9999 !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; cursor: pointer !important; transition: all 0.3s ease; opacity: 0.6; .icon { width: 32px; height: 32px; } &:hover { opacity: 1; transform: scale(1.1); } } .modal-lg { max-width: 50% !important; max-height: 80vh !important; .modal-body { transition: width 0.35s ease; } } .si-team-member-detail { margin-top: 60px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 100px; .title { font-size: 40px; font-weight: 500; line-height: 40px; padding-block: 10px; } .nome-cognome{ line-height: 30px; } .member-link{ display: flex; align-items: center; gap: 10px; &.phone{ .icon{ } span{ line-height: 1; } } &.mail{ .icon{ } span{ line-height: 1; } } } .date { padding-bottom: 10px; } @media (max-width: 767px) { .sidebar{ padding-top: 20px; } } } .si-team-members{ margin-top: 60px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 200px; .filter-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; .tags { .btn { height: 28px; margin-right: 4px; cursor: pointer; padding-inline: 10px; background-color: #FFFFFF; border-style: solid; border-color: #E2E2E2; border-width: 1px; font-size: 14px; font-weight: 400; line-height: 1; &.active, &:hover { background-color: #FEBA03; border-style: solid; border-color: #FEBA03; border-width: 1px; } } } } .list{ row-gap: 40px; } .card { ; overflow: hidden; .card-title { font-size: 16px; line-height: 1; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .card-role { font-size: 14px; font-weight: 400; line-height: 1; } .img-top{ &:hover { overflow: hidden; } } .card-body{ padding: 0; padding: 16px; } .card-button{ display: flex; justify-content: flex-end; padding: 16px; padding-top: 0; } } }