@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; --blu: #2c338e; --giallo: #fdcc1a; --bianco: #FFF; --gr_scuro: #333; --gr_chiaro: #eee; --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:url(img/back.png)}
a {text-decoration:none}
.vspace_top {height:170px}
.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:#999; height: 83px; border-bottom: 4px solid var(--giallo)}
#fix_header_wrapper_bottom { background:var(--blu); height: 57px}

.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(--bianco); 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; position: relative}
#logo_top {width:75px; display:flex; flex-direction: row; justify-content: center; align-items: center; transition: 1s linear; position: absolute; top: 0; left: 20px}
#logo_top img {width:100%}
#top_ARS {padding: 0 0 0 105px; display: flex; flex-direction: row; justify-content: center; align-items: flex-end}
.top_ARS_CL {font-size: 50px; color: var(--giallo); font-weight: 900; transition: 1s linear}
.top_ARS_LL {font-size: 50px; color: var(--blu); font-weight: 900; transition: 1s linear}
#img_top {width: 286px; transition: 1s linear}

@media screen and (max-width:940px)
{
  .top_ARS_CL, .top_ARS_LL {font-size: 30px; transition: 1s linear}
}

@media screen and (max-width:800px)
{
  #logo_top {left: 10px; transition: 1s linear}  
  #header_top {justify-content: flex-start}
  #top_ARS {padding: 0 0 0 85px}
  #img_top {opacity:0; width: 0; transition: 1s linear}
}

@media screen and (max-width:420px)
{
  .top_ARS_CL, .top_ARS_LL {font-size: 20px; transition: 1s linear}
}

#header {margin:0px auto; padding: 0 0 0 105px; 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}
#header_icone {width: 286px; padding: 0 0 0 20px; display: flex; flex-direction: row; justify-content: center; align-items: center}

@media screen and (max-width:800px)
{
  #header_icone {padding: 0 30px 0 20px; justify-content: flex-end}
}

#logo_rsp {display: none; width: 80px}

#menu {padding: 0 20px 0 0; width: 100%; 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(--bianco); font-family: 'Oswald';}

.cool-attivo::after  {content:''; margin: 2px 0 0 0; display:block; width:100%; height:3px; background: var(--giallo)} 
.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(--giallo); 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(--bianco); 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(--bianco); 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}

@media screen and (max-width:1200px)
{
#header {justify-content: flex-end}
#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: var(--blu); 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}
}

#icone {padding: 0 10px 0 0; display: flex; flex-direction: row; align-items: center}
#icone i {padding: 0 15px 0 15px; font-size: 30px; color: var(--bianco)}
#icone i:hover {color: var(--giallo); transition: all .5s}

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

/* Footer */
#vspace_bottom {height:30px}
#footer_wrapper {width: 100%; background: var(--gr_chiaro); 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; border-bottom: 1px solid var(--blu)}
.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}
.menu_bottom_item_attivo  {padding: 0 0 5px 0; color: var(--blu); font-weight: 700;}
.bottom_space {height:15px}

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

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

/* Img top */
#vspace_top {height:138px}
#pagina {margin: 0px auto; min-width: var(--min-width); width: 100%; max-width: var(--max-width); position: relative; overflow-x: hidden; background: var(--bianco); border-left: 1px solid #eee; border-right: 1px solid #eee;}

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

.w80p {margin: 0 auto; width:80%}
.w90p {margin: 0 auto; 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)
{
 .w80p {margin: 0 auto; width:90%}
 .w90p  {padding: 5% 0 5% 0}
}

/* HP */

#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_XXX {width:100%; max-width:1080px}

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

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

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

@media screen and (max-width:440px)
{
  #h1_box {font-size: 22px; padding: 20px}
}

.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-weight: 700; font-size: min(7vw, 140px) ; line-height: min(8vw, 170px); color: var(--bianco); text-shadow: 0 0 10px var(--blu)}
.h1_ARS {padding: 0 0 0 0; color: var(--blu); display: flex; flex-direction: row; justify-content: center}
.h1_ARS_CL {font-size: min(7vw, 140px); color: var(--giallo); font-weight: 900; transition: 1s linear; text-shadow: 0 0 20px #FFF}
.h1_ARS_LL {font-size: min(7vw, 140px); color: var(--blu); font-weight: 900; transition: 1s linear; text-shadow: 0 0 20px #FFF}
#logo_ss {width: 300px}


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


@media screen and (max-width:800px)
{
  .carousel-flex {padding: 0 2vw 0 2vw}
  .carousel-flex-txt, .h1_ARS_CL, .h1_ARS_LL { font-size: 10vw; line-height: 18vw}
}

#strillato {margin: 40px 0; padding: 40px; font-size: 40px; color: var(--giallo); background: var(--blu); text-align: center; text-wrap: balance; border-radius: 20px;} 

#partnership_grid {margin: 0px auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center}
.partnership {width: 250px; height: 250px; display: flex; flex-direction: row; justify-content: center; align-items: center}
.partnership img {width: 100%}

/* Rivista */

.titolo_paragrafo {margin: 0 0 20px 0; font-size: 22px; color: var(--blu); font-weight: 700; border-bottom: 2px solid var(--giallo)}

.rivista_anno {padding: 20px 0 0 0; font-size: 50px; color: var(--blu); font-weight: 700; background: #FFF; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; cursor:pointer;}
.rivista_anno_arrow {width:30px; transition: 300ms}
.rivista_anno_rotate {transform: rotate(180deg); transition: 300ms}
.riviste_anno {display: none}


#rivista_grid {margin: 0px auto; width: 80%; display: flex; flex-direction: column; justify-content: flex-start; background-color: #2c338e}
.rivista_top {background: var(--blu); display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--giallo)}
.rivista_top_titolo {padding: 10px; color: var(--bianco); font-weight: 700; cursor: pointer;}
.rivista_top_comandi {display: flex; flex-direction: row; align-items: center; gap: 20px}
.rivista_top_comando {padding: 10px; color: var(--giallo); font-weight: 700; cursor: pointer}

.rivista_articoli {padding: 20px; background: var(--bianco); display: none}
.rivista_articolo {margin: 0 0 20px 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
.rivista_articolo_titolo {margin: 0 0 5px 0; font-size: 24px; font-weight: 700; color: var(--blu); border-bottom: 2px solid var(--giallo)}
.rivista_articolo_autore {margin: 0 0 10px 0; font-size: 15px}
.rivista_articolo_testo a {color: var(--blu); font-weight: 700} 

.dwnlpdf {width: 30px}

@media screen and (max-width:1499px)
{
  #rivista_grid {width: 96%}
  .rivista_top {flex-direction: column}
  .rivista_top_titolo {font-size: 25px; font-weight: 700}  
  .rivista_top_comandi {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 20px; font-size: 17px}  
  .rivista_articoli {padding: 10px}
  .rivista_articolo {margin: 0 0 30px 0}
  .rivista_articolo_titolo {font-size: 20px}
}

/* Persone */

.persone_grid {margin: 0px auto; width: 100%; max-width: 980px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; gap: 40px}
.persona {width: 300px; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; background-color: #f8f8f8; border: 1px solid #ccf; border-radius: 10px}
.persona_id {color: var(--blu); font-size: 22px; font-weight: 700}
.persona_nome {font-size: 20px}
.persona_nome i{font-size: 18px}
.persona img {width:100%; max-width:300px}

.documenti_grid {margin: 0px auto; width: 100%; max-width: 980px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px}
.documenti_grid b {color: var(--blu); font-weight: 700}

@media screen and (max-width:1499px)
{
  .documenti_grid {width: 90%; gap: 20px}
}

.pulsante {padding: 20px; display: block; background: var(--blu); color: var(--bianco); border-radius: 10px; transition: 300ms linear}
.pulsante:hover {background: var(--gr_scuro); color: var(--giallo); transition: 300ms linear}

/* Moduli */

.mdl_grid {margin: 20px 0 20px 0; padding:30px; background: #f8f8f8; border-radius:3px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); border: 1px solid #bbb; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 40px}
.mdl_unit {width: 100%; display: flex; flex-direction: row; flex-wrap:wrap; justify-content: flex-start; align-items: stretch; row-gap: 15px; column-gap: 2%}
.mdl_box {width: 23.5%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}
.mdl_box_lab {font-size: 15px; color: var(--blu)}
.mdl_box_inp {width:100%}
.mdl_box_inp select, input, option {padding: 2px; width:100%; background: #FFF; font-size: 17px; border-radius: 0;}

@media screen and (max-width:1240px)
{
  .mdl_box {width: 49%}
}

@media screen and (max-width:800px)
{
  .mdl_unit {column-gap: 0%}
  .mdl_box {width: 100%}
}

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

/* News */

#news_grid {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; gap: 20px}
.news_anteprima {width: 30%; max-width: 500px; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; background-color: #f8f8f8; border: 1px solid #ccf; border-radius: 10px}
.news_anteprima img {padding: 0 0 20px 0; width: 100%; height: 300px; object-fit: cover}
.news_data {font-size: 16px; font-style: italic}
.news_titolo {color: var(--blu); font-size: 22px; font-weight: 700}
.news_testo  {padding: 20px 0 20px 0}

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

@media screen and (max-width:600px)
{
  .news_anteprima {width: 98%}
}

/* foto gallery */
.foto_gallery {margin: 0px auto; width: 100%; max-width: 1600px}ù
#immagini_news  {Width:100%}
#immagini_news .item {cursor: pointer}
#immagini_news .item_alone {cursor: pointer; width: 100%; max-width:1600px}

/*@media screen and (max-width:1600px) {.foto_gallery {width: 1024px}}
@media screen and (max-width:1024px) {.foto_gallery {width:  600px}}
@media screen and (max-width:600px)  {.foto_gallery {width:   100%}; #testi_news{padding: 10px}}*/