@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Outfit:wght@400;700&display=swap');

:root {--min-width: 320px; --max-width: 1920px; --padding: 3vw; --rosso_logo: #F00000; --gs_transition: ease 300ms}
* {margin: 0; padding: 0; font-family: 'Outfit', sans-serif; color: #333; font-size: 18px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}

body {background:#FFF}
a {margin: 0; padding: 0; text-decoration:none; color: #333}
b {font-size: inherit; color: inherit; font-weight: 700}
h1 {font-size: 35px; line-height: 40px}
.vspace {width: 100%; height:60px}
.vspace30 {width: 100%; height:30px}
#spazio_top {margin: 0; padding: 0; width: 100%; height:230px}

@media screen and (max-width:1024px)
{
  h1 {font-size: 25px; line-height: 30px}
  #spazio_top {height:170px}
}

/* Header */

#fix_header_wrapper {min-width: var(--min-width); width: 100%; position:fixed; top:0; left:0; transition: all 0.5s linear; z-index: 90}
.fix_header_scrolling {top: -500px!important; opacity: 0!important; transition: all 0.5s linear}

.fix_header_bk, .header_bgw {background:rgb(255, 255, 255)!important; transition: all 0.5s linear; box-shadow: rgba(0,0,0,0.1) 0px 10px 30px 0px}
.no_scrolling {position:fixed; overflow-y: hidden; width:100vw; height: 100vh}

#header {margin:0px auto; width: 100%; min-width:320px; max-width: var(--max-width); position: relative}
#header_flex {width: 100%; padding: 20px; display:flex; flex-direction: row; justify-content: space-between}

#logo {width:200px}
#logo img {width: 100%}
#logo_rsp {display: none; padding: 0 0 100px 0}

#menu {position:relative; z-index: 90; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start}
.menu-box {display: flex; flex-direction: row; justify-content: flex-start; align-items: center}
.menu_item, .menu_item_attivo {padding: 7px 15px 7px 15px; font-size: 18px; font-weight: 700}
.menu_item {color: var(--rosso_logo); cursor: pointer}
.menu_item:hover {color: #FFF; transition: all .5s; background: var(--rosso_logo)}

.menu_item {color: var(--rosso_logo); transition: all .5s}

.menu_item:hover {color: #FFF; transition: all .5s}
.menu_item_attivo {color: #FFF; background: var(--rosso_logo)}

.menu_divisorio {color: var(--rosso_logo); width:2px; height:100%; background: var(--rosso_logo)}

#vismenu {display:none; padding: 8px 0 0 0; cursor: pointer; transition: all .5s; width:80px; height: 80px; ; transition: all .5s}

#close-button {display: none; position: absolute; top: 28px; right: 30px; cursor:pointer; font-size: 50px!important; transition: all .5s; color: #FFF; font-weight: 400}

.show {left: 0px!important; opacity: 1!important; transition: all .5s!important}

@media screen and (max-width:1024px)
{
#vismenu {display:block}
#close-button {display: block}
#logo {width:120px}

#menu {padding: 10px 0 10px 0; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: -100%; width:100%; height:100vh; opacity: 0; transition: all .5s!important; background: #000; z-index: 1000; overflow-y: auto;}
.menu-box {width: 100%; flex-direction: column; justify-content: center; align-items: center}
.menu_item, .menu_item_attivo {padding: 20px; color: #FFF; font-size: 25px}
.menu_item a {color:  #FFF; font-size: 25px}
#logo_rsp {display: block}
.menu_divisorio {display:none}
}

#pagina {margin:0px auto; width: 100%; min-width:320px; max-width: var(--max-width); background: #fcfcfc; display: flex; flex-direction: column;}
#corpo_centrale {margin:0 auto; padding: 0 5% 0 5%; width: 100%; display:flex; flex-direction: column; justify-content: center}

/* HP VIDEO */

#hp_video_box {position: relative; width: 100%; height: 100vh; background: #000; overflow: hidden}
#hp_video_container {position: absolute; top: -100px; left: -100px; width: calc(1920px / 2); height: calc(1080px / 2)}
#myVideo {width: 100%}

.paragrafo {margin: 3% 10% 3% 10%}
.te_ce {text-align: center; text-wrap: balance}

.titolo {width: 100%; padding: 20px 20px 20px 10px; border-bottom: 2px solid var(--rosso_logo); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 20px}
.titolo img {width: 80px}
.titolo_txt {font-size: 26px; color: var(--rosso_logo)}

.pulsante {margin: 0 auto; padding: 20px; min-width: 300px; width: 100%; max-width: 600px; color: #fff; font-size: 24px; font-weight: 700; background: var(--rosso_logo); border-radius: 10px; text-align: center; transition: var(--gs_transition)}
.pulsante:hover {color: var(--rosso_logo); background: #222; transition: var(--gs_transition); cursor: pointer}

@media screen and (max-width:800px)
{
  .pulsante {margin: 5%; width: 90%; max-width: none}
}

/* HP */

#filtro {margin: 0 auto; width: 80%; padding: 20px; min-width:310px; text-align: center; border: 1px solid #AAA; border-radius: 10px; background: #F8F8F8; display:block}
#filtro_boxes {display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px}
.filtro_box {display: inline-block; vertical-align: top}
.filtro_box select {padding: 5px; width: 280px}

@media screen and (max-width:1024px)
{
  #filtro {width: 90%}
}

/* vetture */

#griglia_vetture {margin: 0 auto; padding: 20px; width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px}
.vettura {position: relative; width:320px; background: #FFF; border:1px solid #AAA; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 10px; transition: var(--gs_transition)}
.vettura:hover {transform: scale(1.07); transition: var(--gs_transition); box-shadow: 0 0 10px #222}

.vettura_titolo {margin: 5px; padding: 20px 0 10px 0; width:298px; height:80px; text-align:center; font-size: 22px; color:var(--rosso_logo); overflow: hidden}
.vettura_img {width: 100%}

.vettura_icone {width:100%; display:flex; flex-direction: row; flex-wrap: wrap}
.vettura_icone_box_sx, .vettura_icone_box_dx {width:50%; padding: 10px 15px 10px 15px; font-size: 15px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 10px}
.vettura_icone_box_sx {width:55%}
.vettura_icone_box_dx {width:45%}
.vettura_svg {width: 20px}

.vettura_venduta {width: 100%; z-index: 10; position:absolute; top:100px}
.vettura_prezzo {padding: 10px; font-size: 26px; font-weight: 700; width: 100%; color: #FFF; background: #222; text-align: right}

/* Chiusura */


#chiusura {padding: 40px 0; min-width:320px; width: 100%; background: #111; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 100px}
.chiusura_box {margin: 0; padding: 10px; width: 320px; font-size: 18px; color:#FFF; text-align:left; line-height: 26px}
.chiusura_box a {color: #fff; font-size: 18px}
.chiusura_box a:hover {color: #F00}
.chiusura_box b {color: #F00; font-size: 22px; font-weight:700}

#cprgt {padding: 10px 0; font-size: 12px; color:#fff; background: #222; text-align: center}
#cprgt a {color:#fff; font-size: 12px}

@media screen and (max-width:800px)
{
  #chiusura {gap: 50px}
}

/* Azienda*/

@media screen and (max-width:800px)
{
  #azienda_top {width: 100%; height: 150px}
}

.par_azienda {margin:0 auto; width: 60%; line-height: 30px; text-wrap: balance}
.par_azienda ul {padding: 5% 0 0 10%}

@media screen and (max-width:800px)
{
  .par_azienda {width: 80%}
  .par_azienda ul {padding: 5% 0 0 5%}
}

/* scheda */

#vettura_titolo {padding: 0 5%; color: var(--rosso_logo); font-size: 30px; text-align: center; text-wrap: balance}

#scheda_vettura {width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start}
#scheda_vettura_img {width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#scheda_vettura_txt {width: 50%; padding: 0 2%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}

#vettura_testo {margin: 0 auto; width: 90%; font-size: 20px; text-align: center; text-wrap: balance}

.scheda_vettura_img_principale {width: 100%}
.main_img_container {position: relative}
#finger-click {display:none; position: absolute; opacity: 0; bottom: 20px; right: 20px; width: 30px; height: 30px; -webkit-animation:finger_move 2500ms ease-in-out infinite;  animation:finger_move 2500ms ease-in-out infinite} 
/*@-webkit-keyframes finger_move {0% {transform:translate(0px)} to {transform:translate(-30px)}}
@keyframes finger_move {0% {transform:translate(0px)} to {transform:translate(-30px)}}*/

@-webkit-keyframes finger_move {
0%    { opacity: 0; }
60%   { opacity: 0; }
80%   { opacity: 1; }
100%  { opacity: 0; }}
@keyframes finger_move {
  0%    { opacity: 0; }
  60%   { opacity: 0; }
  80%   { opacity: 1; }
  100%  { opacity: 0; }}
        

#vettura_venduta {width: 100%; padding: 30px; color: #FFF; background: var(--rosso_logo); font-size: 30px; text-align: center}
#vettura_griglia {width:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 2%}
.vettura_griglia_box {width:49%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}
.vettura_griglia_item {width:100%; padding: 10px 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 2%}
.griglia_label {width: 40%; text-align:right; color: #444; font-weight:700}
.griglia_testo {width: 60%; text-align:left; border-bottom: 1px dashed #CCC}

#opzioni {margin: 0 auto; width: 90%; column-count: 3}
#opzioni ul {margin: 0; padding: 0; width: 100%; list-style-image: url('img/pallino.png')}
#opzioni ul li{margin:0 0 0 20px; padding:10px 0 0 0 ; text-align:left}
#opzioni_disclaimer {margin: 0 auto; padding: 20px 0 0 0; width: 90%; font-size: 13px; text-align: center; text-wrap: balance}

#scheda_vettura_prezzo {width: 100%; color: var(--rosso_logo); font-size: 30px; text-align: center}

#modulo_richiesta {margin: 0 auto; width: 90%; text-align:center; display: flex; flex-direction: column; justify-content: center; align-items: center}
#modulo_richiesta input {margin: 0 0 10px 0; padding: 5px; width: 100%}
#modulo_richiesta textarea {margin: 0 0 10px 0; padding: 5px; width: 100%}
#modulo_richiesta input[type="CHECKBOX"]  {margin: 0; padding: 0; width: 30px}

#gallery {margin: 0 auto; padding: 0; width: 96%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px}
#gallery a {width: 200px}
#gallery a img {width: 100%}

@media screen and (max-width:800px)
{
  #gallery {display:none}
  #finger-click {display:block}
}

@media screen and (max-width:1024px)
{
  #scheda_vettura {flex-direction: column}
  #scheda_vettura_img {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
  #scheda_vettura_txt {width: 100%; padding: 0 2%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}  
}

@media screen and (max-width:1400px)
{
  #vettura_griglia {flex-direction: column}
  .vettura_griglia_box {width:100%}
}

@media screen and (max-width:850px)
{
#opzioni {column-count: 2}
}

@media screen and (max-width:850px)
{
#opzioni {column-count: 2}
}

@media screen and (max-width:600px)
{
#opzioni {column-count: 1}
}