@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: 1600px; --verde_scuro: #1b612a; --verde_chiaro: #74927b; --grigio_chiaro: #eff2f7; --px_small_font: 15px; --gap: 40px; --gap_rsp:20px; --menu_item_px: 16px}
* {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:#fff}
h1 {text-align: center; text-wrap:balance; color: var(--verde_scuro)}
a {text-decoration:none}
.vspace {height:60px}
.vspace_20p {height:20px}
.vspace_10p {height:10px}

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

/* Header background: rgba(245,250,245, 0.92)*/
#fix_header_wrapper {position:fixed; margin:0px auto; top:0; left:0; width: 100%; transition: all 0.25s linear; z-index:99; display: flex; flex-direction: column}
#fix_header_wrapper_top { background:#eff2f7; height: 168px; border-bottom: 3px solid #FFF}
#fix_header_wrapper_bottom { background: #ebebeb; height: 57px; transition: all 0.5s ease-out}

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

#header_top {margin:0px auto; background: var(--grigio_chiaro); min-width: var(--min-width); width: 100%; max-width: var(--max-width); height: 165px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; position: relative}
#logo_top {width:224px; height: 100%; display:flex; justify-content: center; align-items: center; transition: 1s linear; position: absolute; top: 0; left: 20px}
#logo_top a img {width:100%}
#img_top {width: 734px; transition: 1s linear}
#logo_rsp {display: none; padding: 0 0 50px 0; width: 200px}

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

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

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

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

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

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

#menu_btt {position: relative; display: none; width: 30px; height:30px;}
#vismenu {display: none; padding: 10px; background: rgba(255,255,255,0.8); font-size: 30px; color: var(--verde_scuro); cursor: pointer; transition: all .5s; position: absolute; top: 20px; right: 20px}
#vismenu:hover {background: var(--verde_scuro); color: rgba(255,255,255,0.8); transition: all .5s}
#close_menu {display: none; font-size: 30px; color: var(--verde_scuro); cursor: pointer; transition: all .5s; position: absolute; top: 20px; right: 20px}
#close_menu:hover {color: var(--rosso); transition: all .5s}

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

.menu_item_lie {padding: 0 10px 0 80px; display: flex; gap: 10px}
.menu_item_l {font-size: var(--menu_item_px); color: var(--verde_scuro); font-family: 'Oswald'}

#pagina {margin: 0px auto; padding: 250px 0 0 0; min-width: var(--min-width); width: 100%; max-width: var(--max-width); position: relative; overflow-x: hidden}

@media screen and (max-width:900px)
{
#fix_header_wrapper_bottom {height: 0; transition: all 0.5s ease-out}
#header {justify-content: flex-end}
#menu_btt {display:inline-block}
#vismenu {display:inline-block}
#menu_rsp_icons {display: flex; flex-direction: row; justify-content: center; align-items: center; column-gap: 50px}
#close_menu {display:inline-block}
#menu {position: absolute; top: 0; right: -100%; width:100%; height: 100vh; opacity: 0; transition: all .5s!important; background: var(--grigio_chiaro); flex-direction: column; justify-content: center; align-items: center; z-index:1000; overflow-y: auto;}
.menu_item {margin: 10px 0 0 0; padding: 0 10px 0 10px}
.menu_show {right: 0px!important; opacity: 1!important; transition: all .5s!important}
#logo_rsp {display: block}

.menu_item_lie {padding: 30px 10px 0 10px}

#pagina {padding: 180px 0 0 0}
}


/* Footer */
#vspace_bottom {height:30px}
#footer_wrapper {width: 100%; background: #cecece; border-top: 1px solid var(--blu)}
#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;color: var(--verde_scuro); border-bottom: 1px solid var(--verde_scuro)}
.footer_txt a {font-size: 14px; transition: all .5s}
.footer_txt a:hover {color: var(--blu); 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}
.bottom_space {height:15px}

.w80p {margin: 0 auto; width:80%}
.w90p {margin: 0 auto; width:90%}
.w100p {width:100%}

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

/* Griglia foto */

.griglia_flips {margin: 0 auto; padding: 50px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 40px; overflow: hidden; position: relative}
.griglia_flips::before {content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.75); pointer-events: none}

.flip-container {width: 300px; height: 310px; perspective: 1000px}
.flipper {width: 100%; height: 100%; transition: 0.6s; transform-style: preserve-3d}
.flip-container.hover .flipper {transform: rotateX(180deg)}
.front, .back {position: absolute; width: 100%; height: 100%; backface-visibility: hidden}
.front img {width: 100%; height: 100%; object-fit: cover}
.front_txt {position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255, 0.7); color: var(--verde_scuro); font-size: 22px; font-weight: 700}
.back {padding: 10px; background: rgb(212, 241, 219); color: var(--verde_scuro); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transform: rotateX(180deg); font-size: 18px; gap: 20px}
.back span { color:var(--verde_scuro); font-size: 23px; font-weight: 700;}

/* HP */

.carosello {padding: 0 0 10px 0; background: var(--verde_scuro)}

#certificazioni {padding: 30px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly; align-items: center;  background: #eff2f7; gap: 40px}

@media screen and (max-width:600px)
{
#certificazioni {flex-wrap: nowrap; flex-direction: column; justify-content: center}   
}

/* certificazioni */

#griglia_certificazioni {display: flex; flex-direction: column; gap: 30px}
.certificazione {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px}
.certificazione_img {background: #eff2f7}
.certificazione img {padding: 20px}
.certificazione_txt {padding: 20px}

@media screen and (max-width:1024px)
{
.certificazione_img {width: 100%; text-align: center;}
.certificazione {flex-direction: column} 
}




/* 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(--bianco); 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}  
}


.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)} */




/* HP */