@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron&family=Nunito&display=swap');

:root {--padding: 1.67%; --padding_pulsanti: 1%; --grigio_scuro: #999; --grigio_chiaro: #f8f8f8; --colore_h2: #eb4e48; --colore_h_old: #0b57ae; --colore_h: #333; --azzurro: #aedadb; --blu: #005762; --rosso: #F00; --font-tit: 'Bebas Neue', cursive; --spaz-vert: 30px; --max-w-page: 1600px; --border-shadow: 1px solid #ccc; --webkit-box-shadow: 3px 3px 3px -3px #333; --box-shadow: 3px 3px 3px -3px #333}
* {font-family: 'Nunito', sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}

.hidden {opacity:0} 
.visible {opacity:1}

body {margin: 0; padding: 0; font-size: 20px; color: #444; background:#fff}
a {margin: 0; padding: 0; text-decoration:none; color: #444}
input, select, option, textarea {margin: 0; padding: 0; font-size: 20px; color: #444}
h1 {font-size: 70px; line-height: 70px; color: var(--blu); font-family: 'Orbitron', cursive;}
.sottotitolo_h1 {font-size: 30px; line-height: 40px; color: #444}
h2 {margin:0; padding: 20px; font-size: 50px; line-height: 50px; color: var(--blu); font-family: 'Orbitron', cursive;}
h3 {margin:0; padding: 20px; font-size: 30px; line-height: 30px; color: var(--blu); font-family: var(--font-tit)}

.vspace {margin: 0; padding: 0; width: 100%; height: var(--spaz-vert)}
.vspace2x {margin: 0; padding: 0; width: 100%; height: calc(2 * var(--spaz-vert))}
.vspace3x {margin: 0; padding: 0; width: 100%; height: calc(3 * var(--spaz-vert))}
.clearfix::after {content: ""; clear: both; display: table}

#spazio_top_hp {margin: 0; padding: 0; width: 100%; height: 0}
#spazio_top {margin: 0; padding: 0; width: 100%; height: calc(4 * var(--spaz-vert))}

@media screen and (max-width:1450px)
{
  h1 {font-size: 35px; line-height: 35px}
  .sottotitolo_h1 {font-size: 26px; line-height: 26px}  
  h2 {font-size: 26px; line-height: 26px}
  #spazio_top_hp {height: 80px}
  #spazio_top {height: 60px}
  
}

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

#fix_header_wrapper {margin: 0; padding: 0 0 20px 0; width: 100%; position:fixed; top:0; left:0; transition: all 0.5s ease-in; z-index:99; border-bottom: 1px solid var(--blu); background: rgba(245,250,245, 0.60)}
.fix_header_scrolling {top: -500px!important; opacity: 0!important; transition: all 0.5s ease-out}

#header {margin:0px auto; width: 100%; min-width:320px; max-width: var(--max-w-page)}

#logo {width:300px; float:left; z-index: 100; position:relative}
#logo_img {padding: 10px 0 0 10px; width:300px; transition: width 1s; display:block; z-index: 101}

@media screen and (max-width:1450px)
{
#logo {width:200px}
#logo_img {padding: 10px; width:200px; transition: width 1s}
}

#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: 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 {width:100%; text-align:right; z-index: 90}
#menu > ul {margin: 0; padding: 0; position:relative; width:100%; z-index: 91}
#menu > ul > li {padding: 70px 15px 0 15px; display: inline-block; text-align: center; font-size: 20px; vertical-align: top; position: relative}
#menu > ul > li > a {display:inline-block; color: #4A443D; vertical-align:top; font-size: 25px; font-family: var(--font-tit), serif}

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

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

#bandiere {display: flex; align-items: center; justify-items: center;}
.bandiera {margin: 0; padding: 0px 3px; width:50px; text-align:center; display:inline-block; vertical-align:top}
.bandiera a {margin: 0; padding: 0 5px; display: block; border: 1px solid #333; transition: 0.4s ease; font-size: 20px; font-family: var(--font-tit), serif}
.bandiera a:hover {color: var(--blu); background: var(--azzurro); transition: 0.4s ease}
.bandiera_on {margin: 0; padding: 0 5px; display: block; border: 1px solid #333; color: var(--azzurro); background: var(--blu); font-size: 20px; font-family: var(--font-tit), serif}

@media screen and (max-width:1450px)
{
#fix_header_wrapper {padding: 0 0 10px 0}  
#vismenu {top: 10px; right: 10px; position:absolute; display:block; width:50px; height:50px; border: 1px solid var(--blu); z-index:10000; cursor: pointer}

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

#menu {position: absolute; top: 71px; left: -100%; opacity: 0; transition: all .5s!important}
#menu > ul {width: 100%}
#menu > ul > li {width:100%; float:none; padding: 5px; background: #FFF}
#menu > ul > li:last-child {padding: 0 0 20px 0; border-bottom: 1px solid var(--blu)}
#menu > ul > li > ul {position: static; overflow: hidden; max-height: 0; transition: all .4s; border: none; width: 100%}
#menu > ul > li > ul > li {width: 100%; float: none}

#bandiere ul li {display:inline-block; padding: 10px 3px 0 3px; height: 60px!important}

.paragrafo {padding: 10%}
}

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

/* Strillato */

#strillato_wrapper {margin: var(--spaz-vert) 0 var(--spaz-vert) 0; padding: 0}
#strillato {margin:0 auto; padding: var(--spaz-vert); width:60%; background: rgb(235,235,255); border: 3px solid var(--azzurro); border-radius: 10px; text-align: center}
@media screen and (max-width:1200px)
{
  #strillato {width:90%}
}

/* Pagina */

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

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

.pulsante_nero {display: block; margin: 40px auto; padding: var(--padding_pulsanti); color: #FFF; background: var(--azzurro); border: 1px solid var(--blu); transition:.2s ease; width: 240px; border-radius: 5px;}
.pulsante_nero:hover {color: #FFF; background: var(--blu); transition:.3s ease}

.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_cella_sx {margin: 0; padding: 20px; width: 25%; display: flex; align-items: center; justify-content: space-around}
.pgf_2col_cella_dx {margin: 0; padding: 20px; width: 75%; display: flex; align-items: center; justify-content: space-around}
.testo {line-height: 40px}
.bordo_scuro {border: var(--border-shadow); -webkit-box-shadow: var(--webkit-box-shadow); box-shadow: var(--webkit-box-shadow)}
.bk_grigio {background: var(--grigio_chiaro)}

.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}
.p40px {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}

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

@media screen and (max-width:1500px)
{
  .pgf_2col_cella_sx {width: 34%}
  .pgf_2col_cella_dx {width: 66%}
}

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

/* Chiusura */

#wrapper_chiusura {width: 100%; background:#999; 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 {margin: 0; padding: 40px; width: 25%; color:#FFF; display: flex; flex-direction: column; justify-content: flex-start; align-items: center}
.chiusura_cella h2{margin: 0; padding: 0; color:#FFF; font-size: 24px; font-family: var(--font-tit)}
.chiusura_cella li {margin: 0; padding: 10px;list-style-type: none;}
.chiusura_cella li a:hover {color:#FFF}
.chiusura_cella a {color:#FFF; transition:.3s ease}
.chiusura_cella a:hover {color:#0058B0; transition:.3s ease}
.chiusura_cella p {margin: 0px; padding: 0px; text-align: center}

.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%} 
}

#tabella_contatti {margin: 0px auto}
#tabella_contatti td {padding: 3px 5px}

#cprgt {margin:0 auto; padding: 10px 10px 20px 10px; line-height: 16px; color:#333; font-size:14px; display:block}
#cprgt a {color:#333; transition:.3s ease}
#cprgt a:hover {color:var(--blu); transition:.3s ease}

#topcontrol, #goback {margin: 0; padding: 2px; width: 54px; height: 54px; z-index: 1000}

/* HP */

#partner_hp {margin:0; padding: 0; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center}
.partner_hp_box {margin:5px; padding: 5px; width:320px}

/* Prodotti */

#prodotti {margin:0; padding: 20px; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch;}
.prodotti_box {margin:5px; padding: 20px; width:320px; transition: .2s}
.prodotti_box:hover {border-color: var(--colore_h); transition: .2s}
.prodotti_box_titolo {padding: 15px; font-size: 28px; font-weight: 700; color: var(--blu)  }
.prodotti_box_pdf {margin: 20px 0 0 0; width:100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
.prodotti_box_pdf img{padding: 0 10px 0 0; width:60px}
.prodotti_box_pdf a {color: #444}
.prodotti_box_pdf a:hover {color: #00386E}

.button {width: 100%; padding: 10px 30px; background: #027E8B; border-radius: 5px; color: #FFFFFF; text-align: center; text-decoration: none; transition: all 0.5s linear; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px}
.button:hover {background: #00974D; transition: all 0.5s linear}

/* Prodotto Sticky */

#pgf_prodotto {margin: 0; padding: 0; width: 100%; display: flex; flex-direction: row}
#pgf_prodotto_img {margin: 0; width: calc(300px + 10%); padding: 5%; background: #005762; display: flex; flex-direction: column; justify-content: flex-start; align-items: center}
#pgf_prodotto_img img {width:100%}
#pgf_prodotto_txt {margin: 0; width: calc(90% - 300px); padding: 5%; font-size: 20px; background: #FFF}
.prodotto_button {width: 100%; padding: 10px 20px; background: #027E8B; border-radius: 5px; color: #FFFFFF; text-align: center; text-decoration: none; transition: all 0.5s linear; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px}
.prodotto_button:hover {background: #00974D; transition: all 0.5s linear}

@media screen and (max-width:1300px)
{
  #pgf_prodotto {flex-direction: column}
  #pgf_prodotto_img {width: 100%}
  #pgf_prodotto_txt {width: 100%}
}

/* Gallery */

#gallery {margin:0; padding: 0; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly}
#gallery a {padding: 10px; width:200px; height:200px}
#gallery a img {padding: 0; width:180px; height:180px}