@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
:root {--max-width: 1920px; --min-width: 320px; --font-size: 16px; --menu_item_px: 20px; --side-padding: 2vw; --interlinea: 40px; --oro: #a78d48; --blu: #002b40; --gr_scuro: #333;  --gr_chiaro: #6d6e71}
* { margin:0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif}
@media screen and (max-width:800px)
{
  :root {--font-size: 14px; --menu_item_px: 20px; --side-padding: 5vw;}
}

body{line-height: 1.5; font-weight: 400; position:relative; background: #FFF}
a {text-decoration: none; font-size: 0}
.vspace {width: 100%; height: var(--interlinea)}
.vspace_top {width:100%; height: 120px}

@media(max-width: 600px){
  .vspace_top {width:100%; height: 100px}
} 

/* Animated */

body {-webkit-backface-visibility: hidden; backface-visibility: hidden}
.animated {-webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both}

@-webkit-keyframes fadeInUp {0% {opacity: 0; -webkit-transform: translateY(var(--an-mov))} 100% {opacity: 1; -webkit-transform: translateY(0)}}
@-moz-keyframes fadeInUp {0% {opacity: 0; -moz-transform: translateY(var(--an-mov))} 100% {opacity: 1; -moz-transform: translateY(0)}}
@-o-keyframes fadeInUp {0% {opacity: 0; -o-transform: translateY(var(--an-mov))} 100% {opacity: 1; -o-transform: translateY(0)}}
@keyframes fadeInUp {0% {opacity: 0; transform: translateY(var(--an-mov))} 100% {opacity: 1; transform: translateY(0)}}

.animated.fadeInUp {-webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp}

@-webkit-keyframes fadeInRight {0% {opacity: 0; -webkit-transform: translateX(var(--an-mov))} 100% {opacity: 1; -webkit-transform: translateX(0)}}
@-moz-keyframes fadeInRight {0% {opacity: 0; -moz-transform: translateX(var(--an-mov))}	100% {opacity: 1; -moz-transform: translateX(0)}}
@-o-keyframes fadeInRight {0% {opacity: 0; -o-transform: translateX(var(--an-mov))}	100% {opacity: 1; -o-transform: translateX(0)}}
@keyframes fadeInRight {0% {opacity: 0; transform: translateX(var(--an-mov))} 100% {opacity: 1; transform: translateX(0)}}

.animated.fadeInRight {	-webkit-animation-name: fadeInRight;	-moz-animation-name: fadeInRight;	-o-animation-name: fadeInRight;	animation-name: fadeInRight}

/* Header */

.fix_header_scrolling {top: -500px!important; opacity: 0!important; transition: all 0.5s ease-out}
.no_scrolling {position:fixed; overflow-y: hidden; width:100vw; height: 100vh}

#header_wrapper {width: 100%; background: #FFF; border-bottom: 1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,0.2); position: fixed; left:0; top:0; z-index: 990; transition: all 0.5s ease-out}
header {margin: 0px auto; padding: 20px var(--side-padding); width: clamp(var(--min-width), 100%, var(--max-width)); display: flex; flex-direction: row; justify-content:space-between; align-items: center; transition: all 0.5s ease-out}
#ods_logo {width: 200px}
#ods_logo_rsp {width: 250px; display: none}

#menu {position: relative; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 3vw; transition: all 0.5s ease-out; background: #FFF!important}
.menu_item {font-size: 0.9vw; color: var(--gr_chiaro); font-weight: 700}

.cool-attivo::after  {content:''; margin: 2px 0 0 0; display:block; width:100%; height:2px; background: var(--blu)} 
.cool-attivo {display: inline-block; font-size: 18px} 

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

#menu_rsp_icons {padding: 30px 0 40px 0; display: none}
.menu_rsp_icon {width: 50px; height: 50px; color: var(--oro)}
#menu_rsp_loghi {display: none}
.menu_rsp_logo {width: 100px}

#vismenu {display: none; width: 30px; height: 30px; color: var(--blu); cursor: pointer; transition: all .5s}
#vismenu:hover {color: var(--rosso); transition: all .5s}
#close_menu {display: none; width: 40px; height: 40px; color: var(--blu); cursor: pointer; transition: all .5s; position: absolute; top: 20px; right: 20px}
#close_menu:hover {color: var(--oro); transition: all .5s}
.menu_show {right: 0px!important; opacity: 1!important; transition: all .5s!important}

@media screen and (max-width:1400px)
{
  header {padding: 10px var(--side-padding)}
  #menu {gap: 10px}
  .menu_item {font-size: 1.2em}
  #menu_r {gap: 0}  
  .menu_r_loghi {display: none}
  #vismenu {display:block}
  #ods_logo_rsp {display: block}
  #menu_rsp_icons {display: flex; flex-direction: row; justify-content: center; align-items: center; column-gap: 50px}
  #menu_rsp_loghi {display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 5px}
  #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;}
}

/* Footer */

#footer_wrapper {width: 100%; padding: 40px 0; background: var(--blu)}
#footer {margin: auto; padding: 20px var(--side-padding); width: clamp(var(--min-width), 100%, var(--max-width)); display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; column-gap: 30px}
.footer_box {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; color: #FFF; font-size: 15px; line-height: 25px}
.footer_box_tit {padding: 0 0 30px 0; color: #FFF; font-size: 21px; font-weight: 700}
.footer_box a {color: #FFF; font-size: 15px; line-height: 25px; transition: all .5s}
.footer_box a:hover {color: var(--oro); transition: all .5s}

#copy {padding: 20px; font-size: 12px; width: 100%; color: var(--gr_scuro); background: #FFF; display: flex; justify-content: center; align-items: center}
#copy a {font-size: 14px; color: var(--gr_scuro)}

@media(max-width: 1240px){
  #footer {width: 90%}
}

@media(max-width: 800px){
  #footer_wrapper {padding: 50px 0 50px 0}
  #footer {padding: 0 var(--side-padding); flex-direction: column; gap: 30px}
  #copy {flex-direction: column; gap: 30px}
}

/* Pagine */

#pagina {margin: 0 auto; width: clamp(var(--min-width), 100%, var(--max-width)); overflow: hidden}
/* HP SS */
#hp_spot {position:relative; background: #000; width:100%; height: 100vh; z-index:500; display: flex; justify-content: center; align-items: center; overflow: hidden}
#hp_spot_img {width: 0; opacity: 0}
#hp_spot_txt {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index:501; display: flex; flex-direction: column; justify-content: flex-start; align-items: center}
#hp_spot_txt_t0 {width: 100%; height: 70%}
#hp_spot_txt_t1 {padding: 0 0 30px 0; width: 100%; opacity: 0; font-size: 2vw; color: #FFF; text-align: center; font-weight: 700; font-style: normal}
#hp_spot_txt_t2 {width: 100%; opacity: 0; font-size: 30px; color: #FFF; text-align: center}
.EffectFadeIn_Img {width: 100%!important; opacity:1!important; transition: all 3s ease-out!important}
.EffectFadeIn_Txt {opacity:1!important; transition: all 1.5s linear!important}

@media screen and (max-width:800px)
{
  #hp_spot {height: 100dvh}
  #hp_spot_txt_t0 {height: 60%}
  #hp_spot_txt_t1 {padding: 0 20px 30px 20px; font-size: 6vw}
}

/* pulsante */

.pulsante_hp {padding: 10px 40px; display: inline-block; font-size: var(--font-size); color: #fff; border: 1px solid var(--oro); border-radius: 100px; transition: all 300ms linear!important}
.pulsante_hp:hover {background: var(--oro); transition: all 300ms linear!important}

.pulsante {padding: 10px 40px; display: inline-block; font-size: var(--font-size); color: var(--blu); border: 1px solid var(--oro); border-radius: 100px; transition: all 300ms linear!important}
.pulsante:hover {color: #FFF; background: var(--oro); transition: all 300ms linear!important}
 
/* pgf*/

.pgf {padding: 0; width: 100%; display: flex; font-size: 0}
.pgf_2c {padding: 0; width: 100%; display: flex; flex-direction: row; font-size: 0; column-gap: var(--interlinea)}
.pgf_2c_cella {padding: 0; display: flex}
.pgf_2c_cella img {width:100%}

.f_fd_ro {flex-direction: row}
.f_fd_co {flex-direction: column}
.f_jc_fs {justify-content: flex-start}
.f_jc_fe {justify-content: flex-end}
.f_jc_ce {justify-content: center}

.f_ai_le {align-items: left}
.f_ai_ce {align-items: center}
.f_ai_fe {align-items: flex-end}
.f_ai_st {align-items: stretch}

.w33p {width: 33%}
.w50p {width: 50%}
.w60p {width: 60%}
.w67p {width: 67%}
.w70p {width: 70%}
.w300 {width: 300px}

@media(max-width: 600px){
  .pgf_2c {flex-direction: column}
  .pgf_2c_cella {width: 100%}

  .w50p {width: 90%}
  .w60p {width: 90%}  
}

/* Stili vari */

#carosello_items {width: 100%; position: relative}
.item_hp, .item {padding: 0 15px 0 15px; position: relative}
.item {width: clamp(300px, 100%, 420px)}
.item img {width: 100%}
.item_overlay {padding: 10px 30px; position: absolute; bottom: 0; left: 0; width:100%; height: 20%; display: flex; justify-content: flex-start; background: rgba(255,255,255,0.7); color: var(--blu); font-size: var(--font-size); font-weight: 700; overflow: hidden;}

.titolo_par {padding: 3vw 0 0 5vw; font-size: 6vw; color: var(--blu); font-weight: 600}
.img_hp {display: none; aspect-ratio: 1; width: 100%; object-fit: cover}
.testo_hp {padding: 3vw var(--side-padding) 0 10vw; font-size: var(--font-size); text-wrap: balance}
.testo_pi {padding: 3vw var(--side-padding) 0 20vw; font-size: var(--font-size); text-wrap: balance; width: 70%}
#marchi_grid {padding: 0 var(--side-padding) 0 20vw; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 20px}
#marchi_grid img {width: 150px}
#grid_items_tit {padding: 100px 0 0 0; width:100%; text-align: center; font-size: 20px; color: var(--gr_scuro)}
#grid_items {padding: 0 var(--side-padding) 0 var(--side-padding); width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px}

@media(max-width: 600px){
  .titolo_par {font-size: 30px }
  .img_hp {display: blocK}
  .testo_pi {width: 90%}
  #marchi_grid {padding: 0 var(--side-padding) 0 var(--side-padding); justify-content: center; gap: 20px}
}

#sicurezza_grid {padding: 0 var(--side-padding) 0 20vw; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 2%}
.sicurezza_grid_box {padding: var(--side-padding) 0 0 0; width: 32%; font-size: var(--font-size); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}
.sicurezza_grid_box img {padding: 0 0 20px 0; width: 150px}
.sicurezza_grid_box li {margin: 0 0 0 20px; font-size: 14px; color: var(--blu)}

@media(max-width: 1280px){
  .sicurezza_grid_box {width: 49%}
}

@media(max-width:800px){
  .sicurezza_grid_box {width: 98%}
}

#sicurezza_timeline {padding: 0 var(--side-padding) 0 var(--side-padding); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap:3%}
.sicurezza_timeline_box {padding: var(--side-padding) 0 0 0; font-size: 18px; color: var(--blu); display: flex; justify-content: center; align-items: center}
.sicurezza_timeline_box img {width: 40px}

@media(max-width:800px){
  #sicurezza_timeline {padding: 0 var(--side-padding) 0 var(--side-padding); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap:10%}
}


/* Img timeline  */
#img_timeline {margin: 0; padding: 7vh var(--side-padding); width: 100%; text-align: center}

@media(max-width: 600px){
  #img_timeline {padding: 1vh var(--side-padding)}
}

/* Carosello accessori */

#carosello_acc {width: 100%}
.carosello_acc_box {width: 100%}
.carosello_acc_box_frame {width: 100%; height: 40vh; position:relative; display: flex; align-items: center}
.carosello_acc_strip {width: 100%; height: 150px; background: #dfe0e2; display: flex; align-items: center}
.carosello_acc_txt {width: 100%; padding: 0 calc(40vh + 15vw) 0 0; font-size: 24px; color: var(--blu); text-align: right}
.carosello_acc_img {position: absolute; top: 0; right: 5vw; height: 40vh}

@media(max-width: 800px){
  .carosello_acc_txt {display:none}
  .carosello_acc_strip {display:none}
  .carosello_acc_img {margin: 0px auto; right: 0; left: 0; height: 35vh}
}

/* Servizi */

#servizi_grid {padding: 0 var(--side-padding); width: 100%; display: grid; gap: 100px 10vw; grid-template-columns: auto auto; justify-content: center} 
.servizi_box_tit {padding: 0 0 20px 0; font-size: 26px; font-style: italic; color: var(--blu)}
.servizi_box li {margin: 0 0 0 20px; color: var(--blu)}

@media(max-width: 1000px){
  #servizi_grid {gap: 60px 0; grid-template-columns: auto} 
}

/* Contatti */

#contattaci {padding: 0 7vw; display: flex; flex-direction: column; row-gap: 20px}
#contattaci input[type="text"], textarea {padding: 10px; width: clamp(var(--min-width), 30%, 50%);  font-size: var(--font-size); color: var(--blu); background: #dfe0e2; border: 1px solid #dfe0e2; border-radius: 25px}
#messaggio {height: 150px}
.errore_input {border: 1px solid #F00!important; transition: all .5s!important}

/* Scheda */

#gallery_big_box {margin: 0 auto; width:90%; position:relative}
#gallery_big {width:100%}
.gallery_big_item {width:100%; cursor: w-resize}
.gallery_big_item img {width:100%}
#gallery_prev, #gallery_next {position: absolute; bottom: 10px; padding: 10px; background:rgba(255,255,255,0.5); display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 20px; transition: all 200ms linear}
#gallery_prev:hover, #gallery_next:hover {background:rgba(255,255,255,0.7); transition: all 200ms linear}
#gallery_prev {left: 10px; transform: rotate(180deg)}
#gallery_next {right: 10px}

#gallery {margin: 0 auto; width:90%!important}
.gallery_item {cursor: pointer;}
.gallery_item img {width:100%}
 
#scheda {display:flex; flex-direction: row; justify-content: center; align-items: center}
#scheda_img {display:flex; flex-direction: column; justify-content: center; align-items: center; width: 33%}
#scheda_testo {padding:0px 5% 0px 5%; width: 67%;}
#scheda_titolo {color: var(--blu); font-size: 30px; font-weight: 700}
#scheda_sottotitolo {color: var(--blu); font-size: 26px; font-weight: 700}
#scheda_descrizione {color: var(--grigio); font-size: 20px}
#scheda_descrizione li {margin: 0 0 0 20px}

#scheda_immagini {padding:0px; margin: 0px; display:flex; flex-direction: row; justify-content: center; align-items: center}
.miniatura {padding: 13px 18px 0px 18px; margin: 0; width:100px; height: 75px; float: left; text-align: center}

@media screen and (max-width: 1200px) {
  #scheda {flex-direction: column}
  #scheda_img, #scheda_testo {width: 100%}
  #gallery_big_box {width:100%}
}

/* news */

#news_items {padding: 0 var(--side-padding); width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px} 
.news_item {width: 100%; display: flex; flex-direction:row; justify-content: flex-start; align-items: flex-start; gap: 20px} 
.news_item img {width: 40%}
.news_item_txt {width: 60%}

@media screen and (max-width: 1200px) {
  .news_item {flex-direction:column} 
  .news_item img {width: 100%}
  .news_item_txt {width: 100%}
}