@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {--padding: 20px; --grigio_chiaro: #eee; --grigio_scuro: #222; --blu: #002746; --blu_chiaro: #0058b0; --verde: #4e7b4d; --max-w-page: 1920px}
* {margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Nunito", sans-serif; font-size: 16px; font-optical-sizing: auto; font-style: normal; color: #222}

body {background:#fff}
a {text-decoration:none}
h1 {margin: 0 0 30px 0; font-size: 50px; color: var(--blu); text-align: center}
h1 span {font-size: 40px; color: var(--blu_chiaro); text-align: center}
h2 {width: 100%; padding: 0 0 10px 0; font-size: 40px; color: var(--verde); border-bottom: 1px solid var(--verde); text-align: center}
.vspace {width: 100%; height: 60px}

@media screen and (max-width:800px)
{
h1 {font-size: 30px}
h1 span {font-size: 22px}
h2 {font-size: 20px}
.vspace {height: 40px}
}

#fix_header_wrapper {width: 100%; position:fixed; top:0; left:0; transition: all 0.5s ease-in; z-index:99; box-shadow: 0 0 5px var(--blu); background: var(--grigio_chiaro)}
.fix_header_scrolling {top: -500px!important; opacity: 0!important; transition: all 0.5s ease-out}

#header {margin:0px auto; padding: 10px 0 10px 0; width: 90%; min-width:320px; max-width: var(--max-w-page); display: flex; flex-direction: row; justify-content: space-between; align-items: center}

#logo_img {padding: 0; width:150px; transition: width 1s}
#spazio_top {width: 100%; height: 90px}

.no_scrolling {position:fixed; overflow-y: hidden; width:100vw; height: 100vh}

@media screen and (max-width:1450px)
{
#logo_img {padding: 10px; width:120px; transition: width 1s}
#spazio_top {height: 137px}
}

#vismenu {display: none}

#line-1, #line-2, #line-3 {display:block; position:absolute; width:30px; height:4px; border-radius:30px; right:0; margin-right:10px; background:var(--blu); -webkit-transition:.2s ease; -ms-transition:.2s ease; -moz-transition:.2s ease; -o-transition:.2s ease; transition:.2s ease}
#line-1 {top:13px}
#line-2 {top:23px}
#line-3 {top:33px}
#line-1.open, #line-2.open, #line-3.open {background: #F00; -webkit-transition:.2s ease; -ms-transition:.2s ease; -moz-transition:.2s ease; -o-transition:.2s ease; transition:.2s ease; transform-origin:50% 50%}
#line-1.open {top:23px; margin-right:5px; width:40px; transform:rotate(45deg);-webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg)}
#line-2.open {opacity:0}
#line-3.open {top:23px; margin-right:5px; width:40px;transform:rotate(-45deg);}

#menu {width:100%; text-align:right; z-index: 90}
#menu > ul {position:relative; width:100%; z-index: 91}
#menu > ul > li {padding: 0 15px 0 15px; display: inline-block;  position: relative; font-size: 20px}
#menu > ul > li > a {display:inline-block; font-size: 20px}

.attivo::after  {content:''; margin: 1px 0 0 0; display:block; width:100%; height:3px; background: var(--blu)} 
.attivo {display: inline-block; font-size: 20px; font-family: var(--font-tit)} 

.cool-link::after  {content:''; margin: 1px 0 0 0; display:block; width:0; height:3px; background: var(--blu_chiaro); transition: width .2s}   
.cool-link:hover::after  {margin: 1px 0 0 0; width:100%; transition: width .2s}

@media screen and (max-width:1450px)
{
#vismenu {top: 10px; right: 10px; position:absolute; display:block; width:50px; height:50px; z-index:10000; cursor: pointer}

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

#menu {position: absolute; top: 120px; left: -100%; height: calc(100vh - 120px); opacity: 0; transition: all .5s!important; background: var(--grigio_chiaro)}
#menu > ul {width: 100%}
#menu > ul > li {width:100%; padding: 15px 20px}
}

/* Carousel */
.carousel_wrapper {margin:0 auto; padding: 0; min-width:320px; width: 100%; max-width: var(--max-w-page)}
.carousel {width: 100%; position: relative}
.carousel-item {height:auto; position: relative}
.carousel-item img {width: 100%;}

/* par_hp */

#par_hp {margin:0 auto; width: 70%; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: 50px}
#par_hp_img {width: 40%; display: flex; justify-content: center; align-items: center}
#par_hp_txt {width: 60%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 25px; font-style: oblique; text-align: center; gap: 20px}

@media screen and (max-width:1240px)
{
#par_hp {width: 90%; flex-direction: column}
#par_hp_img, #par_hp_txt {width: 100%}
}

/* Pagina */

#pagina {margin: 0 auto; padding: 20px 20px 0 20px; min-width: 320px; width: 100%; max-width: 1600px; background:#FFF; overflow: hidden; transition: all 0.5s}

@media screen and (max-width:1240px)
{
#pagina {padding:20px 20px 0 20px; transition: all 0.5s}
}

.pgf      {width: 100%; display: flex; flex-direction: column; align-items: stretch}
.pgf_1col_cella {width: 100%; display: flex}  
.pgf_2col {width: 100%; display: flex; align-items: stretch}
.pgf_2col_cella {display: flex; width: 50%}

.w50p {width: 50%}
.w70p {width: 70%}
.w100p {width:100%}

.f_fd_co { flex-direction: column}
.f_jc_ce {justify-content: center}
.f_ai_ce {align-items: center}

@media screen and (max-width:900px)
{
  .w50p {width:100%}
  .w70p {width:100%}  
}

@media screen and (max-width:1500px)
{
  .pgf_2col_cella {width: 100%}
}

@media screen and (max-width:1325px)
{
  .pgf {flex-direction: column}
  .pgf_2col {flex-direction: column}
}

/* Chiusura */

#wrapper_chiusura {width: 100%; background:#000; display: flex; flex-direction: row; justify-content: center;}
#chiusura {min-width: 320px; width:100%; max-width: 1920px; display: flex; flex-direction: row; justify-content: space-around;}  
 
.chiusura_cella {padding: 40px; width: 33%; color:#FFF}
.chiusura_cella h2 {margin: 0 0 30px; padding: 0 0 10px 0; width:100%; color:#FFF; font-size: 20px; border-bottom: 1px solid var(--blu_chiaro)}

.chiusura_cella a {margin: 10px 0 0 0; display: flex; align-items: center; color:#FFF; transition:.3s ease; gap: 20px}
.chiusura_cella a:hover {color:var(--blu_chiaro); transition:.3s ease}
.chiusura_cella p a {padding: 0 0 15px 0}

.attivo_bottom::after  {content:''; margin: 1px 0 0 0; display:block; width:100%; height:3px; background: var(--blu)} 
.attivo_bottom {display: inline-block} 

.cool-link_bottom::after  {content:''; margin: 1px 0 0 0; display:block; width:0; height:3px; background: var(--azzurro); transition: width .2s}   
.cool-link_bottom:hover::after  {margin: 1px 0 0 0; width:100%; transition: width .2s}

@media screen and (max-width:1300px)
{
  #chiusura {flex-direction: column}
  .chiusura_cella {width: 100%} 
}

.contatti_linea {padding: 0 0 10px 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px}

#cprgt {padding: 10px; width: 100%; background: #222; text-align: center; color: #eee; font-size:14px}
#cprgt a {color:#eee; font-size:14px}

/* anteprime */

#griglia_anteprima {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch}
.anteprima {margin: 10px; width: 24%; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #ccc; transition:.3s ease;}
.anteprima:hover {box-shadow: 4px 4px 4px rgba(0,88,166,.3); transition: all 0.3s ease; border: 1px solid var(--blu)}
.anteprima img {width: 100%}
.anteprima_marca {padding: 20px 20px 0 20px; width: 100%; text-align: center; font-size: 14px; font-weight: 700; color: var(--blu)}
.anteprima_versione {padding: 0 20px; width: 100%; text-align: center; font-size: 14px; height: 50px}
.anteprima_prezzo {padding: 10px 20px; width: 100%; text-align: center; font-weight: 700; font-size: 16px}
.anteprima_sep {margin: 0px auto; width: 90%; background: var(--blu_chiaro); height: 1px!important}
.anteprima_car_tec {padding: 20px; width: 100%; text-align: center; font-size: 14px}

@media screen and (max-width:1000px)
{
 .anteprima {margin: 5px; width: 47%}
 .anteprima_marca {height: 80px}
 .anteprima_versione {height: 80px} 
}

/* scheda */

#scheda_vettura_img {margin: 0 auto; width: 100%; max-width: 1440px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px}
#scheda_vettura_img img {width: 100%} 
#scheda_vettura_img_principale {margin: 0 auto; width: 100%; max-width: 1024px} 
#gallery {margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px}
#gallery a {width: 150px}
#testo_scheda {margin: 0 auto; width: 100%; max-width: 1024px; text-align: left}
#testo_scheda ul {margin:30px 0 30px 30px}

@media screen and (max-width:900px)
{
#gallery {gap: 2%}
#gallery a {width: 31%}
}

#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}

/* usato */

#ul_usato {margin:30px 0 30px 30px}