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

:root {--spaz-vert: 60px; --min-width: 320px; --max-width: 1920px; --rosso: #950909; --blu: #0a0e81; --bianco: #FFF; --menu_item_px: 20px; --gr_scuro: #333; --gr_chiaro: #bbb; --panna: #fff3d5; --px_small_font: 15px; --oro: #af8f4d; --verde: #022717; --blu_logo: #171720; --gap: 40px; --gap_rsp:20px; --px_header: 19px}
* {margin: 0; padding: 0; color: #222; font-family: 'Nunito', sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}

body {font-size: 17px; background:var(--verde)}
a {text-decoration:none}
.vspace {height:60px}
h1, h2 {text-wrap: balance}

@media screen and (max-width:1400px)
{
  :root {--px_header: 15px}
  .vspace {height:40px}
}

/* Header background: rgba(245,250,245, 0.92)*/
#fix_header_wrapper {margin: 0; min-width: var(--min-width); width: 100%!important; position:fixed; top:0; left:0; transition: all 0.25s linear; z-index:99; background:#011a0f}
.fix_header_scrolling {top: -200px!important; opacity: 0!important; transition: all 0.5s ease-out}
.no_scrolling {position:fixed; overflow-y: hidden; width:100vw; height: 100vh}

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


#logo {width:100px; display:flex; flex-direction: row; justify-content: center; align-items: center; transition: 1s linear; position: absolute; top: 0; left: 20px}
#logo img {width:100%}
#logo_rsp {width: 50%; max-width:220px; display: none}
#logo_rsp img {width:100%}

@media screen and (max-width:1499px)
{
#logo_rsp {display: block}
}

@media screen and (max-width:440px)
{
  #header {padding: 20px 10px 20px 10px}
}

#menu {padding: 0 20px 0 0; position: relative; display: flex; flex-direction: row; justify-content: flex-end; align-items: center}
.menu_item, .menu_item_l_box {padding: 0 10px 0 10px; font-size: var(--menu_item_px); color: var(--panna); font-family: 'Oswald';}
.menu_item_l {margin: 0 0 0 20px; padding: 10px 0 10px 0; font-size: var(--menu_item_px); display: flex; flex-direction: row; justify-content: center; align-items: center}

.cool-attivo::after  {content:''; margin: 2px 0 0 0; display:block; width:100%; height:3px; background: var(--rosso)} 
.cool-attivo {display: inline-block; font-size: var(--menu_item_px); font-family: var(--font-tit); font-family: 'Oswald';} 

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

#menu_btt {position: relative; display: none; width: 30px; height:30px;}
#vismenu {display: none; font-size: 30px; color: var(--panna); cursor: pointer; transition: all .5s; position: absolute; top: 0; right: 0}
#vismenu:hover {color: var(--rosso); transition: all .5s}
#close_menu {display: none; font-size: 30px; color: var(--panna); cursor: pointer; transition: all .5s; position: absolute; top: 20px; right: 20px}
#close_menu:hover {color: var(--rosso); transition: all .5s}
.vismenu_hide {opacity: 0!important; transition: all .5s!important}

#menu_contatti_rsp {margin: 4vh 0 2vh 0; display:none}
#menu_contatti_rsp i {font-size:  40px; color: var(--panna);}

@media screen and (max-width:1499px)
{
#menu_btt {display:inline-block}
#vismenu {display:inline-block}
#close_menu {display:inline-block}
#menu {position: absolute; top: 0; right: -100%; width:100%; height: 100vh; opacity: 0; transition: all .5s!important; background: #011a0f; flex-direction: column; justify-content: center; align-items: center; z-index:1000; overflow-y: auto;}
.menu_item {margin: 2vh 0 0 0; padding: 0 10px 0 10px}
.menu_item_l {margin: 20px; padding: 10px 0 10px 0}
.menu_item_l_box {margin: 0; padding: 0 10px 0 10px}
.menu_show {right: 0px!important; opacity: 1!important; transition: all .5s!important}
#menu_contatti_rsp {display: flex; justify-content: center; align-items: center; gap: 50px}
}

#cart_btt {padding: 0 10px 0 0; display: flex; flex-direction: row; align-items: center}
#cart_btt i {padding: 0 15px 0 15px; font-size: 30px; color: var(--panna)}
#cart_btt i:hover {color: var(--rosso); transition: all .5s}
#item_carrello {position: absolute; padding: 0px 5px 0px 5px; bottom: -10px; right: -5px; background: rgb(96, 96, 96); color: var(--panna); font-size: var(--px_small_font); opacity: 1; transition: all 1s ease-out!important}
.ic_nv {opacity: 0!important; transition: all 0.1s ease-out!important}

@media screen and (max-width:440px)
{
  #cart_btt i {padding: 0 15px 0 15px;}
}

/* H1 box*/

#h1_box {padding: 100px; background-color: var(--panna); display:flex; flex-direction: column; justify-content: center; align-items: center; text-align: center}

@media screen and (max-width:800px)
{
  #h1_box {padding:20px}
}

/* Strillato */

#strillato_wrapper {margin: 5% 0; padding: 0}
#strillato {margin:0 auto; padding: 2%; width:60%; font-size: 30px; font-weight:700; color: var(--rosso); background: #FFF; border: 3px solid var(--gr_scuro); border-radius: 10px; text-align: center; text-wrap: balance;}
@media screen and (max-width:1200px)
{
  #strillato {padding: 5%; width:90%}
}

/* Cart */

#cart {position: fixed; top: 0; right:-100%; opacity: 0; width:100%; height:100%; background: var(--verde); z-index: 900; transition: all .5s!important; display:flex; justify-content: center; align-items: center}
.cart_show {right: 0px!important; opacity: 1!important; transition: all .5s!important}
#close_cart {position: absolute; top: 20px; right:20px; font-size: 30px; color: var(--gr_scuro);  cursor: pointer}

#cart_flex {margin:0 auto; padding: 20px; height:100%; width: 100%; max-width: 1240px; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: #FFF; position: relative} 
#cart_titolo {margin: 0 0 20px 0; padding: 0 0 5px 0; font-size: 18px; letter-spacing: 2px; text-shadow: 4px 4px 5px #bbb; border-bottom: 1px solid var(--rosso)}
#cart_items {padding: 10px 0 10px 0; width: 100%; display:flex; flex-direction: column; overflow-y: auto;}
#cart_bottom {padding: 30px 0 0 0; width:100%; text-align: right}
#cart_invio {padding: 5px 20px; font-size: 20px; width:100%; background: #333; color: #fff; border: 1px solid #333; border-radius: 10px; text-align: center; cursor: pointer; transition: all .5s!important}
#cart_invio:hover {background: #fff; color: #333; transition: all .5s!important}

/* Qt Spinner */

.qt_spinner {width:100%; max-width: 400px; display:flex; flex-direction: row; justify-content: space-between; align-items: center; border: 1px solid var(--blu_logo)}
.qt_spinner_value {font-size: 20px; width:100%; text-align: center; border: 0}
.qt_spinner_btt {padding: 20px; width:60px!important; font-size: 20px; background: var(--blu_logo); color: #fff; text-align: center; cursor: pointer; transition: all .5s!important}
.qt_spinner_btt:hover {background: var(--rosso); transition: all .5s!important}

/* search */

#search {position: fixed; top: 0; right:-100%; opacity: 0; width:100%; height:100%; background: var(--verde); z-index: 900; transition: all .5s!important; display:flex; justify-content: center; align-items: center}
.search_show {right: 0px!important; opacity: 1!important; transition: all .5s!important}
#close_search {position: absolute; top: 20px; right:20px; font-size: 30px; color: var(--blu-logo);  cursor: pointer}
#search_flex {margin:0 auto; padding: 20px; height:100%; width: 100%; max-width: 1240px; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: #FFF; position:relative} 
.search_flex_input {padding: 0 0 20px 0}
#search_flex_nr_items {padding: 0 0 20px 0}
#search_items {padding: 10px 0 10px 0; width: 100%; display:flex; flex-direction: column; overflow-y: auto;}
.search_item img {width:120px; height: 120px}
.search_item {padding: 10px; width: 100%; display:flex; flex-direction: row; align-items:flex-start; gap:10px; border-bottom: 1px solid #aaa}
.search_item_txt {width: 100%}
.search_item_txt_comp {padding: 10px 0 10px 0; font-weight: 700; color: var(--rosso)}
.search_item_prz {padding: 10px 0 10px 0; font-weight: 700}
#view_search_btt {margin: 0 0 0 20px; padding: 5px 20px; font-size: 20px; color: var(--panna); background: var(--blu_logo); text-align: center; transition: all .5s; border-radius: 10px}
#view_search_btt:hover {background: var(--rosso); transition: all .5s}

#search_wait {position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; display:none}
.search_wait_show {display: flex!important; justify-content: center; align-items: center}

@media screen and (max-width:800px)
{
  .search_item_txt, .search_item_txt_comp, .search_item_prz {font-size: var(--px_small_font)}
  #view_search_btt {margin: 5px 0 0 0}
}

/* Img top */
#vspace_top {height:100px}
#pagina {margin: 0px auto; min-width: var(--min-width); width: 100%; max-width: var(--max-width); position: relative; overflow-x: hidden}

/* richiesta servizi */

#rich_servizi {margin:0 auto; padding: 40px 20px; min-width: var(--min-width); width: 100%; max-width: var(--max-width); display: flex; flex-direction: row; justify-content: space-around;  align-items: center}
.rich_servizio {margin:5px; padding: 20px; width: 30%; background: var(--bianco); display: flex; flex-direction: column; justify-content: center;  align-items: center; border: 1px solid var(--gr_chiaro)}
.rich_servizio_tit {padding: 10px; width: 100%; font-family: "Oswald"; font-weight: 700; font-size: 36px; height: 100px; color:var(--gr_scuro); display: flex; flex-direction: column; justify-content: center; align-items: center;  text-align: center;}
.rich_servizio_txt {padding: 10px; width: 100%; font-family: "Oswald"; font-weight: 700; font-size: 18px; height: 200px; color:var(--gr_scuro); display: flex; flex-direction: column; justify-content: center; align-items: center;  text-align: center;}
#rich_servizi i {font-size: 50px; color: var(--blu_logo)}
.rich_servizio_btt {margin: 20px 0 0 0; padding: 10px; width: 100%; display: block; font-size: 22px; color: var(--panna); background: var(--blu_logo); text-align: center; transition: all .5s; border-radius: 10px; max-width: 500px}
.rich_servizio_btt:hover {background: var(--rosso); transition: all .5s}

@media screen and (max-width: 1080px)
{
  #rich_servizi {padding: 5%; flex-direction: column}
  .rich_servizio {margin:3%; padding: 30px; width: 94%}
  .rich_servizio img {width:80%}
  .rich_servizio_tit {padding: 10px; width: 100%; font-size: 26px}
  .rich_servizio_txt {margin:0; padding: 5px; width: 100%; font-size: var(--px_small_font); height: auto}
  .rich_servizio_btt {max-width: none}
}

/* pgf */
.p_w {margin: var(--gap); width: calc(100% - 2  * var(--gap))}
.pgf_1col_cella {width: 100%; display: flex; align-items: center; justify-content: space-around}  
.pgf_2col {width: 100%; display: flex; align-items: stretch; flex-direction: row}
.pgf_2col_reverse {width: 100%; display: flex; align-items: stretch; flex-direction: row-reverse}
.pgf_2col_cella {width: 50%; display: flex; justify-content: space-around}
.pgf_2col_cella_txt {width: 80%; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--gap)}
.titolo {margin: var(--gap) 0 var(--gap) 0; font-family: "Oswald"; font-weight: 700; font-size: 40px; color: var(--panna); letter-spacing: 2px; border-bottom: 1px solid var(--rosso)}

@media screen and (max-width:1325px)
{
  .p_w {margin: var(--gap_rsp); width: calc(100% - 2  * var(--gap_rsp))}
  .pgf_2col {align-items: center; flex-direction: column}
  .pgf_2col_reverse {align-items: center; flex-direction: column}
  .pgf_2col_cella {width: 100%}
  .pgf_2col_cella_txt {padding: 20px 0 0 0; width: 100%; gap: var(--gap_rsp)}
  .titolo {margin: var(--gap_rsp) 0 var(--gap_rsp) 0; font-size: 25px}  
}

.w80p {width:80%}
.w90p {width:90%}
.w100p {width:100%}
.flex_fdc_jcc_aic {display: flex; flex-direction: column; justify-content: center; align-items: center}
.flex_fdc_jcc_afs {display: flex; flex-direction: column; justify-content: center; align-items: flex-start}
.flex_fdc_jcs_afc {display: flex; flex-direction: column; justify-content: flex-start; align-items: center}
.flex_fdc_jcfs_aifs {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}
.pad20 {padding: 20px}
.bk_bianco {background: var(--bianco)}
.c_verde {color: var(--verde)}


@media screen and (max-width:1499px)
{
 .w90p  {padding: 5% 0 5% 0}
}

/* SS */

#ss {margin: 0; padding: 0; min-width: var(--min-width); width:100%; position:relative; font-size: 0; overflow: hidden}
.ss_box {margin: 0; padding: 0; width:100%; position:absolute}
.img_ss {opacity:0%; margin: 0; padding: 0; width:100%; position:absolute; transition: opacity 1.5s linear!important}

#logo_ss {width:100%; max-width:1080px}

@media screen and (max-width:640px)
{
  #logo_ss {width:100%}
}

.EffectFadeIn {opacity:100%!important; transition: opacity 1.5s linear!important}

.carousel-flex {opacity:0%; position: absolute; top: 0; left: 0; margin: 0; padding: 0 10vw 0 10vw; width:100%; height: 100%; transition: opacity 1.5s linear; display: flex; flex-direction: column; justify-content: center; align-items: center}
.carousel-flex-txt {text-align: center; font-family: 'Oleo Script'; font-weight: 700; font-size: min(7vw, 140px) ; line-height: min(8vw, 170px); color: var(--panna); text-shadow: 3px 0 var(--blu_logo), -3px 0 var(--blu_logo), 0 3px var(--blu_logo), 0 -3px var(--blu_logo)}

@media screen and (max-width:1920px)
{
.carousel-flex-txt { font-size: 7vw; line-height: 8vw}
}


@media screen and (max-width:800px)
{
.carousel-flex {padding: 0 5vw 0 5vw}
.carousel-flex-txt { font-size: 15vw; line-height: 18vw}
}

/* Brand HP */

#brand_hp {padding: 10px; background: #FFF; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 15px; border: 1px solid var(--gr_chiaro)}
#brand_hp img {width:125px; height: 125px}
@media screen and (max-width: 800px)
{
  #brand_hp img {width:110px; height: 110px}
}


/* Footer */
#vspace_bottom {height:30px}
#footer_wrapper {width: 100%; background: var(--panna); box-shadow: 0 -3px 3px var(--blu-logo)}
#footer {margin:0 auto; padding: 20px; min-width: var(--min-width); width: 100%; max-width: var(--max-width); display: flex; flex-direction: row; justify-content: space-around;  align-items: flex-start}
.footer_txt {padding: 20px; width: 25%; font-size: 14px}
.footer_txt .tit_footer {margin: 0 0 20px 0; padding: 0 0 5px 0; font-size: 18px; letter-spacing: 2px; text-shadow: 1px 1px 1px #bbb; border-bottom: 1px solid var(--rosso)}
.footer_txt a {font-size: 14px; transition: all .5s}
.footer_txt a:hover {color: var(--rosso); transition: all .5s}
#social {display: flex; flex-direction: row; align-items: center; column-gap: 10px}
#social i {font-size: 30px}

@media screen and (max-width: 800px)
{
  #footer {flex-direction: column}
  .footer_txt {width: 100%}
}

/* Menu bottom */

#menu_bottom {display: flex; flex-direction: column; justify-content: center; align-items: flex-start}
.menu_bottom_item {padding: 0 0 5px 0; font-size: 14px}
.menu_bottom_item:hover {color: var(--rosso); transition: all .5s}
.menu_bottom_item_attivo  {padding: 0 0 5px 0; color: var(--rosso);}
.bottom_space {height:15px}

/* Griglia Cat */

#griglia_cat {padding: 0 1% 0 1%; width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-items: stretch; gap: 20px}
#griglia_cat a {width: 322px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-radius: 10px}
#griglia_cat a .tit_cat {padding:10px; width: 100%; color: #FFF; font-size: var(--px_header); font-weight: 700; background: var(--blu_logo); border-top-right-radius: 10px; border-top-left-radius: 10px; text-align: center}
#griglia_cat a .img_cat {width: 100%; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px}

@media screen and (max-width: 800px)
{
  #griglia_cat {padding: 0 3% 0 3%}
  #griglia_cat a {width: 45%}
}

/* Griglia Art */

#griglia_art {padding: 0 1% 0 1%; width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-items: stretch; gap: 20px}
.art_box {width: 322px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-top-right-radius: 20px; border-top-left-radius: 20px; background: #fff}
.art_up {width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center}
.art_cod {padding:10px; width: 100%; color: #FFF; font-size: var(--px_header); font-weight: 700; background: var(--blu_logo); border-top-right-radius: 10px; border-top-left-radius: 10px; text-align: center}
.art_tit {padding: 10px; width: 100%; font-size: var(--px_header); font-weight: 700; color: var(--gr_scuro); text-align: center}
.art_down {margin: 3%; width:94%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center}
.art_img {width:100%}
.art_prezzo {padding: 10px 0 10px 0; font-weight: 700;}

.art_bottom_moto {width:100%; display: flex; flex-direction: row; justify-content: flex-end;  align-items: center}

@media screen and (max-width: 800px)
{
  #griglia_art {padding: 0%}
  .art_box {width: 45%}
  .art_tit {font-size: var(--px_small_font)}
  .art_prezzo {font-size: var(--px_small_font)}
  .art_qt {font-size: var(--px_small_font)}
  .art_add_to_txt {font-size: var(--px_small_font)}  
}

/* Articolo*/
#griglia_articolo {padding: 0 1% 0 1%; width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-items: stretch; gap: 20px}
.articolo_box {width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-top-right-radius: 20px; border-top-left-radius: 20px; background: #fff}
.articolo_up {width: 100%}
.articolo_cod {padding:10px; width: 100%; color: #FFF; background: var(--blu_logo); border-top-right-radius: 10px; border-top-left-radius: 10px; font-size: var(--px_small_font); text-align: center}
.articolo_tit {padding: 10px; width: 100%; font-size: 17px; color: var(--gr_scuro); text-align: center}
.articolo_down {margin: 3%; width:94%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center}
.articolo_img {width:100%; max-width: 640px}
.articolo_prezzo {padding: 10px; font-weight: 700}

@media screen and (max-width: 800px)
{
  #griglia_articolo {padding: 3%}
  .articolo_tit {font-size: var(--px_small_font)}
  .articolo_prezzo {font-size: var(--px_small_font)}
  .articolo_qt {font-size: var(--px_small_font)}
  .articolo_add_to_txt {font-size: var(--px_small_font)}  
}

/* CE */

.ce_select, .ce_input {padding: 5px; background-color: #FFF;}
#box_destinazione {margin: 20px 0 0 0; width: 100%; flex-direction: column; align-items: center; display: none}
.bd_riga {display: flex; flex-direction: row}
.bd_label {padding: 0 10px 0 0; width: 200px; text-align: right}
#box_destinazione input {width: 400px}

@media screen and (max-width: 800px)
{
  .bd_riga {width: 100%; flex-direction: column} 
  .bd_label {width: 100%; text-align: center}
  #box_destinazione input {width: 100%!important; max-width: none}
}

/* Azienda */

.par_azienda {margin: 0 0 40px 0; padding: 2%; width: 100%; line-height: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2%; background: var(--panna); color: var(--gr_scuro)}
.par_azienda_txt {width: 90%; text-align: left; text-wrap: balance;}
.foto_gallery {margin: 0 0 40px 0; width: 100%}

.par_azienda_ss {width: 33%}
.par_azienda_img_box {width: 90%}
.par_azienda_img_box img{width: 100%; height: auto}
.azienda_ss {width: 100%}
.azienda_ss_item {width: 100%}
.par_azienda_carbig {font-size: 30px}
.par_azienda_i {font-style: italic}


@media screen and (max-width: 800px)
{
 .par_azienda {padding: 20px; gap: 20px; flex-direction: column}
 .par_azienda_txt {width: 100%;  text-align: left;}
 .par_azienda_carbig {font-size: 16px}
 .par_azienda_img_box {width: 100%}

}

.pdf_tecnici {margin: 0 0 0 5%}


/* Motociclo */

.immagini_motociclo {width:100%; padding: 1vw 5vw 1vw 5vw; display:flex; flex-direction: column; align-items: center}

@media screen and (max-width:800px)
{
  .immagini_motociclo {padding: 20px}
}

#gallery_big {margin: 0 auto; padding: 0; width:80%; max-width: 600px; position:relative}
#gallery_big_img {width:100%}
#gallery_big_lente {position:absolute; right: 0; bottom: 0; width: 60px; height: 60px; background-color: rgba(255,255,255,0.9); display: flex; justify-content: center; align-items: center; cursor: pointer}
#gallery_big_lente i {font-size: 30px; color:var(--rosso_logo)}
#gallery_big_img_overlay {position:absolute; top: 0; left: 0; width:100%; opacity: 0}
.gallery_big_img_show {opacity: 1!important; transition: 0.5s ease}

#gallery {margin: 0 auto; padding: 0; width:80%!important}
#gallery .slick-prev:before {color: var(--rosso_logo)}
#gallery .slick-next:before {color: var(--rosso_logo)}

.gallery_item {padding: 10px; cursor: pointer;}
.gallery_item_img {width:100%}

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

@media screen and (max-width: 800px) {
  #gallery_big_lente {display:none}
}

.pulsante {padding: 10px; margin: 0 auto; width: 280px; color: #FFF; font-size: 22px; background-color: var(--verde); display:block; cursor: pointer; border-radius:10px; transition: 0.3s; text-align: center}
.pulsante:hover {color: #E01010; background-color: var(--blu_logo); transition: 0.3s}

/* 360 */
.modal {opacity:0; position: fixed; z-index: -700; left: 0; top: 0; width:100vw; height:100vh; background-color: rgba(0,0,0,0.97); font-size:0; border:none; transition: 0.5s ease}
.modal_show {opacity:1!important; z-index: 700!important; transition: 0.5s ease}

.modal_close {display:block; color: white; position: absolute; top: 20px; right: 20px; font-size: 40px!important; z-index: 701; cursor: pointer}
.modal_close:hover,.modal_close:focus {color: #999; text-decoration: none}
.modal-content {position: relative; margin: 0; padding: 0; width:100vw; height:100vh; display:flex; justify-content: center; align-items: center}
.modal-content_box {margin:0; padding:0; position:relative; width:100%; max-width:800px}
.mySlides {display: none; width: 100%; border:none}
.mySlides img {width: 100%}
.prev360, .next360 {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; color: var(--rosso_logo); font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none}
.prev360 {left: 20px; border-radius: 3px 0 0 3px}
.next360 {right: 20px; border-radius: 3px 0 0 3px}
.prev360:hover, .next360:hover {background-color: rgba(0, 0, 0, 0.8);}
.img-container {width: 100%; margin: 0; padding:0; cursor: ew-resize}

.zoom {display:inline-block; position: relative; cursor:zoom-in}

/* news */

#griglia_news {width:100%; display: flex; flex-direction: column; gap: 20px}
.news_box {width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch}
.news_img {width: 100%; max-width: 400px; height: auto}
.news_img_rsp {display: none}
.news_txt {width: 100%; display: flex; flex-direction: column}
.news_tit {padding: 10px; width: 100%; color: #FFF; font-size: var(--px_header); font-weight: 700; background: var(--blu_logo); border-top-right-radius: 10px; border-top-left-radius: 0}
.news_testo {padding: 3%; width:100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: #FFF; gap: 20px}

@media screen and (max-width: 800px)
{
  .news_tit {font-size: var(--px_small_font); border-top-left-radius: 10px;}
  .news_img {display: none}
  .news_img_rsp {display: block; width: 100%}
  .news_testo {justify-content: flex-start; align-items: flex-start}
}

/* CE */

.ce_wrapper {display: flex; justify-content: space-around}
.ce_pgf_2col {display: flex; flex-direction: row; justify-content: space-around;  gap: 40px}
.ce_pgf_2col_cella {padding: 40px; background: var(--bianco)} 
.ce_pgf_2col_cella input[type="text"], .ce_pgf_2col_cella input[type="password"] {padding: 5px; width: 100%; max-width: 400px;}
.ce_chk_box {padding: 5px; width: 100%; max-width: 600px;}
.ce_errore {margin: 10px 0; padding: 20px; color: #F00; background-color: #FF0;}
.ce_errore li {margin: 8px 0 8px 20px; color: #F00}

@media screen and (max-width: 1200px)
{
  .ce_pgf_2col {flex-direction: column}
  .ce_pgf_2col_cella {padding: 10px}
}

#tot_carrello {margin: 20px 0; padding: 20px 0; font-size: 22px; text-align: right; border-bottom: 1px solid #aaa}
#carrello_disc {margin: 20px 0; padding: 20px 0; font-size: 20px; color: #F00; text-align: center}
.conf_input {border: none; width: 150px!important; font-size: 22px; font-weight: 700; color: var(--verde); text-align: right;}

#ce_griglia_richieste {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px}
.ce_box_richiesta {padding: 10px; width: 300px; font-size: 17px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border: 1px solid #333}

/* foto gallery */

.foto_gallery {display: block; font-size: 0px; color: #F00; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start}
.foto_gallery .item {display: inline-block; position: relative; cursor: pointer}
.foto_gallery .item_txt {position: absolute; margin: 0 10% 0 10%; width: 80%; padding: 3% 10% 3% 10%; bottom: 10%; font-size: 20px; color: #FFF; background: rgba(0,0,0,0.75); text-align: center; transition: 0.5s ease}
.foto_gallery .item_txt:hover {color: #222; background: rgba(144, 144, 144, 0.75); transition: 0.5s ease}

/* svg_icon */

.svg_icon {padding: 0 0 20px 0; width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 26px}
.svg_icon img {width: 40px; height: 40px}

@media screen and (max-width: 800px)
{
  .svg_icon {font-size: 20px}
}

/* Form contatti*/

#hp_contatti_form {width: 100%; padding: 20px; background: #FFF; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; font-size: 22px;}
#hp_contatti_form .form_lbl {width:100%; margin: 0 0 5px 0; color: var(--verde); font-size: 22px; font-weight: 700; text-align: left} 
#hp_contatti_form input[type="text"], textarea {width:100%; margin: 0 0 20px 0; padding: 10px; font-size: 18px; color: var(--blu); background: transparent; appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; border-bottom: 1px solid var(--gr_chiaro)} 

.errore_input {border: 1px solid #F00!important; transition: all .5s!important}