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

:root {--testo: #333; --bianco: #FFF; --rosso: #e40613; --gr_chiaro: #d7d7d7; --gr_scuro: #6f6d6e; --gr_chiaro: #b0aeaf; --spaz-vert: 60px; --min-width: 320px; --max-width: 1920px }
* {font-family: "Poppins", serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}

body {margin: 0; padding: 0; font-size: 17px; color:var(--testo); background:#e6e6e6}
a {margin: 0; padding: 0; text-decoration:none; color:var(--testo)}
h1 {margin: 0; padding: 0; font-size: 60px; line-height: 70px; color: var(--rosso); font-family: var(--font-h1); letter-spacing: 2px; text-shadow: 4px 4px 5px #bbb; text-wrap: balance}
h2 {margin: 0; padding: 0; font-size: 22px; color: var(--rosso); font-weight: 700}
.vspace {width: 100%; height:30px}
.class_option  {font-family: "Poppins", serif}

@media screen and (max-width:800px)
{
  h1 {font-size: 40px; line-height: 50px}
}

/* Header background: rgba(245,250,245, 0.92)*/

#fix_header_wrapper {margin: 0; padding: 0 0 20px 0; min-width: var(--min-width); width: 100%; height:120px; position:fixed; top:0; left:0; transition: all 0.25s linear; z-index:99}
.fix_header_scrolling {top: -200px!important; opacity: 0!important; transition: all 0.5s ease-out}
#spazio_top {margin: 0; padding: 0; width: 100%; height: 140px; background: #000;}

.fix_header_bk, .header_bgw {background:#c4c4c4; transition: all 0.5s linear; box-shadow: 0 4px 5px #333}
.no_scrolling {position:fixed; overflow-y: hidden; width:100vw; height: 100vh}

#header {margin:0px auto; width: 100%; height:120px; min-width:320px; max-width: var(--max-width); display: flex; flex-direction: column}
#header_top {margin:0px auto; width: 100%; height:80px; min-width:320px; display: flex; flex-direction: row; justify-content: space-between; align-items: center}

#logo {margin:0 0 0 20px; padding: 0; width:327px; display:flex; align-items: center; transition: 1s linear}
#marche {margin:0 20px 0 0 ; padding: 0; font-size: 0; display:flex; align-items: center; gap: 30px}
#marche img {width: 30px}
#marche_rsp {display:none}
#marche_rsp img {width: 30px}

@media screen and (max-width:800px)
{
#logo {width:250px; transition: 1s linear}
}

#vismenu {display: none}

#line-1, #line-2, #line-3 {display:block; position:absolute; width:30px; height:4px; border-radius:30px; right:0; margin-right:8px; background:var(--bianco); -webkit-transition:.2s ease; -ms-transition:.2s ease; -moz-transition:.2s ease; -o-transition:.2s ease; transition:.2s ease}
#line-1 {top:11px}
#line-2 {top:21px}
#line-3 {top:31px}
#line-1.open, #line-2.open, #line-3.open {background: var(--rosso); -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 {text-align:center; height: 40px; z-index: 90; font-size: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 40px} 
.menu_item {margin: 0; padding: 0 15px 0 15px; font-size: 14px; position: relative; color: var(--bianco); letter-spacing: 1px; display: inline-block; transition:.2s ease; font-weight: 700}
.menu_item:hover {color: var(--rosso); transition:.2s ease}
.menu_item_attivo {color: var(--rosso)}

@media screen and (max-width:1400px)
{
#fix_header_wrapper {padding: 0; height: 80px}
#header {height:80px}
#spazio_top {height: 100px}
.show {left: 0px!important; opacity: 1!important; transition: all .5s!important}
#vismenu {top: 18px; right: 20px; position:absolute; display:block; width:50px; height:50px; z-index:10000; cursor: pointer; border-radius: 5px; transition: all .5s}
#vismenu:hover {cursor: pointer; transition: all .5s}
#menu {margin: 0; padding: 30px 0 0 0; position: absolute; top: 80px; left: -100%; width:100%; height: calc(100vh - 78px); opacity: 0; transition: all .5s!important; background: #c4c4c4; flex-direction: column; gap: 10px}
.menu_item {margin: 10px 0 10px 0; padding: 10px 30px 10px 15px}
#marche {display:none}
#marche_rsp {padding: 40px 0 0 0; display:flex; justify-content:center; align-items: center; gap: 30px}
}
 
/* HP */

#motore_hp {margin: 0px auto; padding: 140px 0 40px 0; min-width: var(--min-width); width: 100%; max-width: var(--max-width); display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; background: url(img/img-home-page.webp); background-position: center; background-repeat: no-repeat; background-size: cover; border-bottom: 5px solid var(--rosso)}
#carousel {width:60%; height: 30%; background: #FFF;}
#carousel img {width:100%}
#filtro {width:20%}
.filtro_label {margin: 15px 0 5px 0; font-size: 14px; color: #333; font-weight: 700}
.filtro_obj {margin: 0; padding: 5px 10px 5px 10px; font-size: 14px; width:100%; color:#666; appearance: none; -moz-appearance: none; -webkit-appearance: none; border:1px solid #ccc; border-radius: 0; background: url(img/arrow.jpg) no-repeat right #fff;}
.filtro option {margin: 0; padding: 10px; font-size: 16px; width:100%; color:var(--testo)}
.filtro_doppio {margin: 0; padding: 0; width: 100%; display:flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px}
.filtro_doppio_box {margin: 0; padding: 0; width: 50%; display:flex; flex-direction:column; justify-content: flex-start; align-items: flex-start}

#filtro_btt {margin: 20px 0 0 0; padding: 10px; font-size: 18px; width:100%; color: var(--bianco); background-color: var(--rosso); text-align: center; cursor: pointer; border: 0; text-decoration: underline!important; text-underline-offset: 4px}

@media screen and (max-width:1400px)
{
#motore_hp {padding: 100px 0 40px 0}
#carousel {width:60%}
#filtro {padding: 20px; width:30%}
}

@media screen and (max-width:1024px)
{
#carousel {width:100%}
#filtro {padding: 20px; width:100%}
}

/*Slick vetture hp*/

#carousel_vetture {margin: 0px auto; min-width: var(--min-width); width: 100%; max-width: var(--max-width)}
.carousel_vetture_boxes {width: 100%; display: flex; display: row; justify-content: center; align-items: flex-start}
.carousel_vetture_box {width:100%; display:flex; flex-direction:row; justify-content:center; align-items: center}
.carousel_vetture_box .anteprima {margin:10px; padding: 0px; width: 320px; display:flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0; background: #f3f3f3}

/* Vetture */

.griglia {margin: 0px auto; padding: 40px 0; min-width: var(--min-width); width: 100%; max-width: var(--max-width); display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around}
.griglia .anteprima {margin:10px; padding: 0px; width: 320px; display:flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0; background: #f3f3f3}
.anteprima img {width: 100%}
.anteprima_testo {margin:0; padding: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start} 
.anteprima_marca {margin:0; padding: 10px; height:140px; color: #333; font-size:15px; border-bottom: 1px solid #999}
.anteprima_dati {margin:0; padding: 10px; height:100px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end} 
.anteprima_dt {margin:0; padding: 0; width: 65%; font-size: 0; display: flex; flex-direction: column; justify-content: flex-start} 
.anteprima_dt_item {margin:0; padding: 0; width: 100%; display: flex; justify-content: flex-start;  align-items: center; gap: 10px} 
.anteprima_dt_item img {margin:0; padding: 0; width: 25px} 
.anteprima_dt_item_txt {font-size: 14px} 
.anteprima_prezzo {margin:0; padding: 0; width: 35%; text-align: right; color: var(--rosso); font-size:20px; display: flex; justify-content: flex-end;  align-items: flex-end}


@media screen and (max-width: 710px)
{
  .anteprima {margin: 1%; width: 46%; padding: 0 0 2% 0}
  .anteprima_marca {padding: 5px; height:100px; font-size:12px}
  .anteprima_dati {padding: 5px; height:100px} 
  .anteprima_dt {width: 100%} 
  .anteprima_dt_item_txt {font-size: 12px} 
  .anteprima_prezzo {padding: 0 0 5px 0; width: 100%; font-size:14px}
}

/* richiesta servizi */

#servizi_testi {display:flex; flex-direction: row; justify-content: space-around; align-items: center}
#servizi_h1 {width:40%; font-size: 17px; color:var(--testo);}
#servizi_elenco {width:40%}

@media screen and (max-width: 1200px)
{
  #servizi_testi {flex-direction: column; justify-content: flex-start; gap: 30px}
  #servizi_h1 {width:100%}
  #servizi_elenco {width:100%}
}

#rich_servizi {margin:0 auto; padding: 40px 20px; min-width: var(--min-width); width: 100%; max-width: var(--max-width); background: var(--gr_scuro); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-items: center}
.rich_servizio {margin:5px; padding: 20px; width: 240px; background: var(--bianco); display: flex; flex-direction: column; justify-content: center;  align-items: center}
.rich_servizio_txt {margin:0; padding: 10px; width: 100%; font-size: 16px; height: 50px; color:var(--testo); display: flex; flex-direction: column; justify-content: center; align-items: center;  text-align: center;}
.rich_servizio_img {margin: 20px 0; padding: 0}
.rich_servizio_btt {margin: 20px 0 0 0; font-size: 14px; text-align: center; border-bottom: 1px solid var(--testo); transition: all .5s}
.rich_servizio_btt:hover {color: var(--rosso); border-bottom: 1px solid var(--rosso); transition: all .5s}

@media screen and (max-width: 600px)
{
  #rich_servizi {padding: 40px 1%}
  .rich_servizio {margin:1%; padding: 10px; width: 48%}
  .rich_servizio_txt {margin:0; padding: 5px; width: 100%; font-size: 13px}
  .rich_servizio_img {margin: 10px 0; padding: 0}
  .rich_servizio_btt {margin: 10px 0 0 0}
}

.link_underline_w {margin: 20px 0 0 0; padding: 0 0 2px 0; font-size: 14px; text-align: center; border-bottom: 1px solid var(--bianco); transition: all .5s}
.link_underline_w:hover {color: var(--rosso); border-bottom: 1px solid var(--rosso); transition: all .5s}

/* Footer */

#footer_wrapper {margin:0; padding: 0; width: 100%; background: var(--gr_chiaro)}
#footer {margin:0 auto; padding: 50px 5%; min-width: var(--min-width); width: 100%; max-width: var(--max-width); background: var(--gr_chiaro); display: flex; flex-direction: row; justify-content: space-between;  align-items: flex-start; gap: 0}
#footer_logo {height: 100%; display: flex; flex-direction: column; justify-content: center;  align-items: flex-start; color: var(--bianco); font-size: 18px}
#footer_logo img {width:100%; max-width: 327px}
#footer_social_txt {margin: 30px 0 30px 0; font-size: 14px}
#footer_social {display: flex; flex-direction: row; justify-content: center;  align-items: center; gap: 10px}
#footer_social img {width: 38px}
#footer_sedi {display: flex; flex-direction: row; justify-content: flex-end;  align-items: flex-start; gap: 40px}
.footer_sedi_item {display: flex; flex-direction: column; justify-content: flex-start;  align-items: flex-start}
.footer_sedi_item img {padding: 0 0 20px 20px; width: 100%; max-width: 150px}
.footer_sedi_item_txt {padding: 0 0 0 20px; border-left: 1px solid var(--bianco); color: var(--bianco); font-size: 14px}
.footer_sedi_item_txt a {color: var(--bianco); font-size: 14px}

@media screen and (max-width: 1600px)
{
  #footer {flex-direction: column; gap: 60px}
  #footer_logo {justify-content: flex-start;  align-items: flex-start}
  #footer_sedi {flex-direction: column; justify-content: flex-start; gap: 60px}
}

#cprgt_wrapper {margin:0; padding: 0; width: 100%; background: var(--gr_scuro)}
#cprgt {font-family: Arial, sans-serif; margin:0 auto; padding: 20px; min-width: var(--min-width); width: 100%; max-width: var(--max-width); font-size: 12px; color: #ccc; background: var(--gr_scuro); text-align: center}
#cprgt a {font-family: Arial, sans-serif; color: #ccc; font-size: 12px; transition: all .5s}
#cprgt a:hover {color: var(--rosso); transition: all .5s}

/* Img top */
#img_top_wrapper {margin: 0 auto; padding:0 0 0 0; min-width: var(--min-width); width: 100%; max-width: 1920px; border-bottom: 5px solid var(--rosso); font-size:0; background:#bebebe} 
#img_top {margin: 0; padding:0; min-width: var(--min-width); width: 100%; max-width: 1920px} 

#pagina {margin: 0px auto; padding: 0 40px; min-width: var(--min-width); width: 100%; max-width: var(--max-width); background:#FFF; display: flex; flex-direction: column; justify-content: space-around;;  align-items: center}
#pagina_top_space {height: 160px}
#pagina_top_space_s {height: 60px}

@media screen and (max-width:1400px)
{
  #pagina_top_space {height: 120px}
}

@media screen and (max-width:1400px)
{
  #pagina {padding: 0 5%}
}

/* Modulo */

#modulo {margin: 0 auto; padding: 20px; min-width: var(--min-width); width: 100%; max-width: 1600px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;  align-items: flex-start}
.modulo_box {margin: 0; padding: 0; width: 45%; display: flex; flex-direction: column}
.modulo_titolo {margin: 0 auto; padding: 40px 0 0 0; text-align: center; color: var(--rosso); font-size: 28px; font-weight: 700; text-wrap: balance}
.modulo_sottotitolo {margin: 20px 0 10px 0; padding: 0; color: #fff; font-size: 18px; color: var(--rosso)}
.modulo_linea {margin: 0; padding: 0; display:flex; flex-direction: row;}
.modulo_linea_lb {margin: 3px 6px 3px 0; padding: 6px; width: 30%; text-align: right; background: #fff; color: #333; font-size: 14px; font-weight: 600}
.modulo_linea_cti, .modulo_linea_cts {margin: 3px 0; padding: 6px; width: 70%; background: #fff; color:#666; font-size: 14px; appearance: none; -moz-appearance: none; -webkit-appearance: none; border:2px solid #ddd; border-radius: 0; transition: all .5s}
.modulo_linea_cts {background: url(img/arrow.jpg) no-repeat right #fff;}
.modulo_linea_cts option {color: var(--testo); font-size: 14px}
.modulo_textarea {margin: 3px 0; padding: 6px; width: 100%; height: 200px; background: #fff; color: #666; font-size: 20px; appearance: none; -moz-appearance: none; -webkit-appearance: none; border:2px solid #ddd; border-radius: 0; transition: all .5s}
.modulo_checkbox {margin: 10px 0; padding: 6px; width: 20px; height: 20px; font-size: 20px; background: #fff; color: var(--testo); border:1px solid var(--testo)}
.modulo_label {margin: 0 0 0 5px; padding: 0; transition: all .5s; font-size: 14px}
.errore_input {border: 2px solid var(--rosso); transition: all .5s}
.errore_privacy {color: var(--rosso); transition: all .5s}

@media screen and (max-width: 1200px)
{
  .modulo_linea_lb {font-size: 14px}
}

@media screen and (max-width: 1024px)
{
  #modulo {flex-direction: column}
  .modulo_box {width: 98%}
}

@media screen and (max-width: 600px)
{
  .modulo_linea_lb {display: none}
  .modulo_linea_cti, .modulo_linea_cts {width: 100%}
}

input:-moz-placeholder {
  color: #666 !important; opacity:1;
}

input::-webkit-input-placeholder {
  color: #666 !important; opacity:1;
}

input[placeholder],[placeholder],*[placeholder] {
  color: #666 !important; opacity:1;
}

.default_value {color:#e40613}

/* scheda */
#gallery {margin: 2%; padding: 0; width: 96%; max-width: 1200px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; row-gap: 10px; column-gap: 10px}
#descrizione {margin: 2% 20px 2% 20px; padding: 0; width: 96%; max-width: 1200px; text-align: center}

.info_tech {padding: 2%; width: 100%; max-width: 1600px; display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; row-gap:2%; column-gap: 2%}
.info_tech_box {padding: 2%; width:50%; background: #fff} 

@media screen and (max-width: 1240px)
{
  .info_tech { flex-direction: column; align-items: flex-start}
  .info_tech_box {width: 100%;} 
}

#vettura_griglia {margin: 0; padding: 0; width: 100%} 
#vettura_griglia ul {margin: 0; padding: 0; list-style: none} 
.griglia_label {margin: 0 ; padding: 1%; width: 42%; text-align:right; float:left; color: #444; font-weight:700}
.griglia_testo {margin: 0 ; padding: 1%; width: 54%; text-align:left; float:left; border-bottom: 1px dashed #CCC}

/* Veicoli */

#pagina_veicoli  {margin: 0px auto; padding:140px 0 0 0; min-width: var(--min-width); width: 100%; max-width: var(--max-width); background:#fff; display: flex; flex-direction: row; justify-content: space-around;;  align-items:flex-start}
#filtro_veicoli  {margin: 0; padding: 0 10px; width: 20%; background:#fff; transition: all .5s!important}
#griglia_veicoli {margin: 0; padding: 0; width: 80%; }
#btt_visualizza_filtro_rsp, #btt_chiudi_filtro_rsp {display: none; padding: 20px; text-align:right; cursor: pointer} 
.show_filtro_veicoli  {left: 0!important; transition: all .5s!important}

@media screen and (max-width: 1400px)
{
  #pagina_veicoli  {padding:100px 0 0 0}
}


@media screen and (max-width: 1200px)
{
  #btt_visualizza_filtro_rsp, #btt_chiudi_filtro_rsp {display: block!important} 
  #filtro_veicoli {position:fixed; top:0; left: -100%; width: 100%; height: 100vh; background:#bebebe; overflow-y: scroll; z-index: 1000} 
  #griglia_veicoli {margin: 0; padding: 0; width: 96%}
}

/* Altro */

.singolo {padding: 20px}

/* pgf */

.pgf      {margin: 0; padding: 0; width: 100%; display: flex; align-items: stretch; flex-direction: row}
.pgf_1col_cella {margin: 0; width: 100%; display: flex; align-items: center; justify-content: space-around}  
.pgf_2col {margin: 0; padding: 0; width: 100%; display: flex; align-items: stretch; flex-direction: row}
.pgf_2col_reverse {margin: 0; padding: 0; width: 100%; display: flex; align-items: stretch; flex-direction: row-reverse}
.pgf_2col_cella {margin: 0; width: 50%; display: flex; align-items: center; justify-content: space-around}

.pos_abs {position:absolute; top:0; left:0; width:100%; height:100%;}
.pos_rel {position:relative}
.il2x {line-height: 35px}
.p0px {padding: 0}
.p20px {padding: 20px}
.p_distanza {padding: var(--padding)}
.p_distanza_doppia {padding: calc(2 *  var(--padding))}
.w80p {width:80%}
.w90p {width:90%}
.w100p {width:100%}
.h100p {height:100%}
.centrato  {display: block; text-align: center}
.flex_ai_c_jc_sa {display: flex; align-items: center; justify-content: space-around}

.pgf_btt {margin: 20px 0 0 0; padding: 10px; font-size: 18px; width:100%; color: var(--bianco); background-color: var(--rosso); text-align: center; cursor: pointer; border: 0}
.pgf_space {width:100%; height:100px}

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

@media screen and (max-width:1325px)
{
  .pgf {align-items: center; flex-direction: column}
  .pgf_2col {align-items: center; flex-direction: column}
  .pgf_2col_reverse {align-items: center; flex-direction: column}
  .pgf_2col_cella {width: 96%}

  .pgf_space {width:100%; height:80px}
}

/* Sedi */

#sede_grid {width: 100%; display:flex; flex-direction: row; justify-content: center; align-items: center}
.sede_box {width: 50%; color:var(--testo)}
#info_aziendali {padding: 0 5%}

@media screen and (max-width:1325px)
{
  #sede_grid {flex-direction: column}
  .sede_box {padding: 0 0 5% 0; width: 100%}  
}

/* Persone */
.griglia_persone_titolo {margin: 0 auto; padding: 40px 0 0 0; text-align: center; color: var(--rosso); font-size: 28px; font-weight: 700; text-wrap: balance}
.griglia_persone {display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px}
.griglia_persone_ridotta {margin: 0 auto; width: 65%}
.persona {padding: 10px; width: 200px; display:flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px}
.persona_nome {font-weight: 700}
.persona img {width: 100%}
.persona_contatti {margin: 0; padding: 0; display:flex; flex-direction: row; justify-content: center; align-items: center; gap:20px}
.scheda_icona {width: 30px}

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

/* Banner Cookies */

#cookies_wrapper {z-index:10000; position:fixed; bottom: 0; left: 0; width:100%; background: rgb(0,0,0)}
#cookies_box {margin: 0 auto; width:100%; max-width:1280px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #FFF; position: relative}
#cookies_testo {margin: 20px; width:90%; color: #FFF; font-size: 16px;}
#cookies_pulsanti {margin: 10px; width:90%; display: flex; flex-direction: row}
#cookies_pulsanti_sx {width:50%; text-align: left}
#cookies_pulsanti_dx {width:50%; text-align: right}
.cookies_pulsante_sx, .cookies_pulsante_dx {margin: 5px; padding: 10px 20px; font-size: 16px; font-weight: 700; border: 1px solid rgb(7, 39, 12); border-radius: 20px; cursor: pointer; transition:.3s ease}
.cookies_pulsante_sx {background: var(--rosso); color: #FFF}
.cookies_pulsante_dx {background: var(--rosso); color: #FFF}
.cookies_pulsante_sx:hover {background: #fff; color: var(--rosso); transition:.3s ease}
.cookies_pulsante_dx:hover {background: #fff; color: var(--rosso); transition:.3s ease}

@media (max-width:920px)
{
  #cookies_pulsanti {flex-direction:column}
  #cookies_pulsanti_sx {margin: 10px; width:100%; text-align: center}
  #cookies_pulsanti_dx {margin: 10px;width:100%; text-align: center}
}

#cookies_close {position: absolute; top: 0; right: 0; margin: 10px; padding: 10px; background: rgba(32,32,32); font-family:"Arial"; font-size: 20px; border-radius: 5px; cursor: pointer;}

.cookies_consenso_box {margin: 2%; padding: 2%; width: 92%; border: 1px solid #ccc; display: flex; flex-direction: row;}
.cookies_consenso_testo {width: calc(100% - 80px); text-align: left}
.cookies_consenso_checkbox {width: 80px}
#cookies_consenso_invia {color: #FFF;   font-size: 16px; padding: 10px 35px 10px 35px !important;  background-color: var(--rosso); transition: 0.3s ease 0s; border-radius: 20px !important; cursor: pointer; border: 1px solid rgb(7, 39, 12)}
#cookies_consenso_invia:hover {background: #fff; color: var(--rosso); transition:.3s ease}

.cookies_checkbox {position: relative; width: 64px; height: 32px; line-height: 32px; appearance: none; -webkit-appearance: none; background: #ccc; outline: none; border-radius: 20px; box-shadow:inset 0 0 5px rgba(0,0,0,0.2); transition: .5s; cursor: pointer}
.cookies_checkbox[disabled] {background: #F00; cursor: none}
.cookies_checkbox:checked {background: #074D43}
.cookies_checkbox:before {content: ''; position: absolute; width: 32px; height: 32px; border-radius: 20px; top: 0; left: 0; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transform: scale(0.8); transition: .5s}
.cookies_checkbox:after {content: '\f00d'; font-family: 'FontAwesome'; font-size: 24px; position: absolute; width: 32px; height: 32px; top: -1px; left:6px; color: #F00;   transition: .5s}
.cookies_checkbox:checked:before {content: ''; background: #FFF; left: 32px}
.cookies_checkbox:checked:after {content: '\f00c'; font-family: 'FontAwesome'; font-size: 24px; color: #074D43; top: 0; left: 35px}