@charset "ISO-8859-1";
body{-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;}
#stage{ background: #231f20}
.multi-clm{ max-width: 1420px; padding-bottom: 20px}
.multi-clm.light{ background: rgba(277,277,277,0.0); box-shadow:0 0 40px rgba(0,0,0,0);}
.share.inline li{ font-size: 16px; margin-right: 5px}
a{ color: #fdf101}
/*INTRO*/
.videoWall{ object-fit: cover; height: 100vh; background-color: #231f20}
.main-search form input, input.input-text{ box-shadow: 0 0 20px rgba(0,0,0,0.8)}
#search-home .pul-search a{ display: flex; align-items: center; justify-content: center}
#search-home .pul-search a:hover{ background-color:#231f20 }
.audio-control{ float: left; margin-right: 10px}
.audio-control a{ display: flex; flex-direction: row-reverse; height: 55px; width: 190px; align-items: center; justify-content: center; color: #fff; font-size: 30px}
.audio-control small{font-size:14px; margin:0 8px;; max-width: 100px; text-align: right}
.navbar .sb-toggle-right{ padding: 0; display: flex; height: 55px; width: 55px; align-items: center; justify-content: center; color: #333; flex-direction: column; background: #fff; padding: 15px }
.navbar{ background: none}
.menu-up.slidebar .menu-secondario{font-family: 'Cabin', sans-serif; }
.menu-up.slidebar .menu-secondario li{ display: inline-block}
.clm.pr-20{ padding-right: 20%}

/*
Footer nav
*/
#footer-nav{ position: absolute; bottom: 40px; left: 0; z-index: 200;  width: 100%;}
#footer-nav .content{ background: none; text-align: center; padding: 20px}
#footer-nav a{ padding: 15px; background: #fff; color: #333; font-size: 16px; display: inline-block}

/*Name container*/
.name-container{ height: 100vh}
#container.home #stage, #container.home .slider, #container.home .sequence-theme, #container.home #sequence{ height: 100vh}

/*Titoli ed head*/
.testata .title-testata{ font-size: 3.5em}
.share.inline ul:after{ display: none}

/*BOX NEWS*/
#stage .calendario .search-result p.no-result{ min-height: 210px; display: flex; max-width: 200px; margin: 0 auto; align-items: center; color: #ccc !important}
#stage #search-list.masonry .box{ border: 0; margin: 20px 0; box-shadow: 0 0 30px rgba(0,0,0,0.8)}
#stage #search-list.masonry .box img{ max-height: none}
.masonry{ column-gap:30px}
.box.sr article{ display: flex; min-height: 300px; flex-direction: row-reverse}
.box.sl article{ display: flex; min-height: 300px; align-items: stretch}
#stage .box.sr figure, #stage .box.sl figure{ width: 50%}
#stage .box.sr .card-body, #stage .box.sl .card-body{ width: 50%; display: flex; align-items: center; flex-direction: column; }
#stage .box.sr .card-body h2, #stage .box.sl .card-body h2{ width: 100%}
#stage .box.sr .card-body .data, #stage .box.sl .card-body .data{ width: 100%}
#stage .box.sr figure img, #stage .box.sl figure img{ height: 100%; width: 100%; object-fit: cover}
#stage .box h2{ text-align:inherit;   font-family: 'Merriweather', serif; font-size:1.4em; padding:1em 20px; overflow:hidden;  font-weight:600; letter-spacing: -0.3px }
#stage .box h2 a{ color:#333}

.primo-piano figure{ height: 360px}
.primo-piano figure img{ height: 100%; width: 100%; object-fit: cover}
.primo-piano h1{ font-size: 2.7em; margin-top: 20px}

.primo-piano .calendario{ }
.mCSB_inside>.mCSB_container{ margin-right: 10px!important;margin-left: 10px!important }

/*Articolo*/
#article header .testata h1, #article .article-content h1{ font-size: 3em}
#article header .testata .italy-map{ width: 30%; margin: 0; padding: 0}
#article header .testata .italy-map #svgobject{ max-height: 280px }
#stage.internal .testata .content{ max-width: 1420px; display: flex;  align-items: flex-end}
.testata .text-container{ position: relative; left: auto; right: auto; top: auto; bottom: auto; height: auto }
.testata.big{ height: 60vh; min-height: 600px}
#stage.internal article .content{ max-width: 1420px; overflow: visible; padding: 0 20px}
.article-content{ padding-right: 40px}
#article aside .lista-nomi{ border: 1px solid #333; margin-bottom: 40px; margin-top: 10px }
#article .lista-nomi .search-result{ margin-bottom: 0}
#article aside h2{ font-family: 'Cabin', sans-serif}
#article header .testata .path{ padding: 0}
.share{ left: 20px}
#stage #article .share ul { padding-left: 0}
#stage #article .share ul li{ padding-bottom: 0;}
    #stage #article .share ul li a{ color: #333}
#stage #article .share ul li a:hover{ color: #fff}
#article header .testata.big h1{ font-size:3.5em; font-family: 'Merriweather', serif;}
#stage #article .side-content .box.map, .box.map{ min-height: 0; padding-right: 20px}
#stage #article .side-content .box.map article, .box.map article{ min-height: 0; height: auto; display: flex; flex-direction: row; align-items: center}
#stage #article .side-content .box, #modal .box{ box-shadow: 0 0 30px rgba(0,0,0,0.8); padding: 0; border: 0; margin-bottom: 20px}
#stage #article .side-content .box h2{ text-transform: none }
#stage #article .side-content .box.map img, .box.map img{ object-fit: contain; width: 100px; height: auto}
#stage #article .side-content .box.map h2, .box.map h2{  font-family: 'Cabin', sans-serif; font-size: 20px; color: #fff; margin: 0; padding: 0}
#stage #article .side-content .box.map h2 a, .box.map h2 a{ color: #fff;}
#stage .testata { border-bottom: 1px solid #333}
#stage .testata .title-testata{ border: 0}
#stage #article ul { padding-left: 20px}
#stage #article ul li{ color: #fff; font-size: 1.1em; font-family: 'Merriweather', serif; padding-bottom: 5px}
#stage #article ul li a{ color: #fa8501}
#stage #article #paging ul li a{ color: #fff; font-family: 'Cabin', sans-serif;}
#stage #article #paging ul li.attivo a{ color: #333; }
#stage #article .allegati ul{ padding-left: 0}
#stage #article .tag-list ul{ padding-left: 0}
#stage #article .tag-list ul li.tag a{ background: #333; border-radius: 2px; font-family: 'Cabin', sans-serif; color: #fff}

/*21 marzo*/
.title-section{ padding:40px 20px; text-align: center; font-size: 1.5em; color: #666; border-top: 1px solid #333; max-width: 1420px; box-sizing: border-box; margin: 40px auto 0 auto}
#stage .testata h1{ font-size: 1.2em; color: #fff; text-align: right; padding:0; }
#stage.marzo .testata .title-testata{z-index: 200; position: relative}
#stage.marzo #article h2{ font-size: 2.2em; text-align: left; padding: 20px; padding-top: 0}
#stage.marzo #article .share.inline, #stage #article .share.inline{ padding: 20px; padding-bottom: 0; text-align: left}
#stage.marzo #article p{ text-align: left; padding: 10px 20px}

#stage.marzo #article{ height:100%; background:#fa8501; background:transparent;
	-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
#stage.marzo article{ height:100%}
#stage.marzo .video-box { max-width:800px; margin:20px auto; text-align:center; padding:0 20px}
#stage.marzo .video-box iframe{ display:inline-block}
#stage.marzo .video-box .dida{ max-width: 400px; margin: 0 0 0 auto}
.compact #stage.marzo #article { margin-top:0px}
.title, #stage.marzo .slider h2.title{ margin-top:60px}
#stage.marzo #article p.testo{ padding-left: 20px !important }
#stage.marzo .spinner.top{ padding: 0 20px; height: auto !important}
#stage.marzo #article li h2{ margin-bottom: 0; padding-bottom: 0}

.splide{ max-width: 1400px; width: 100%; margin: 0 auto; }
.splide .multi-clm{ display: flex; width: 100%; height: 80vh; min-height: 650px}
.splide .text-container{ justify-content: flex-start}
.splide .image-container img{ max-width: 300px; box-shadow: 0 0 20px rgba(0,0,0,1);  margin: 0 auto}
.splide .clm{ display: flex; align-items: stretch; flex-direction: column; justify-content: center}
.splide .gallery { padding: 20px 0}
.splide .gallery ul{ padding: 0}
.splide .gallery li img{ width: 100px; height: 80px; object-fit:cover}
.splide__arrow{ background: none; color: #fff}
.splide__arrow path{fill:#fff}
.splide__arrow .splide__arrow--prev{ justify-content: flex-start}
.splide__arrow .splide__arrow--next{ justify-content: flex-end}
#stage #article ul li.splide__slide{ font-size: 1em}

.splide.nav-splide .splide__track{ width: 90%; margin: 0 auto}
.splide.nav-splide .splide__slide{font-family: 'Cabin', sans-serif !important; display: flex; justify-content: center; align-items: center; color: #e20075 !important; font-weight: 800; /*font-family: 'Merriweather', serif;*/ font-size: 25px !important; cursor: pointer}
.splide.nav-splide .splide__slide a{ color: #e20075 !important; }
#stage #article .splide--nav>.splide__track>.splide__list>.splide__slide.is-active{ border-color:transparent; color: #fff !important}
.splide.nav-splide .splide__slide a{ color: #e20075}
.splide--nav>.splide__track>.splide__list>.splide__slide.is-active a{color: #fff}
.splide h2{ font-family: 'Merriweather', serif; font-size: 20px}
.splide.nav-splide.sticked{ position: fixed; top: 65px; width: 100%; z-index: 3000; background: #231f20; box-shadow: 0 0 20px rgba(0,0,0,1) }
#stage.marzo #article .splide p{ text-align: left}

#stage.marzo audio{ display:block; width:100%; max-width:600px }
#stage.marzo .audio{ position:relative;font-size:1.22em; line-height:1.5em; margin:1.5em auto; max-width:600px; padding:0em 20px 0em 50px}
#stage.marzo .audio:before{ content:'\f028'; font-style:normal; font-size:30px; font-family:FontAwesome; position:absolute; left:5px; top:0.1em; display:inline-block; color:#e20075}
#stage.marzo .audio footer{ display:block; padding:10px 0; font-size:16px; text-align:center; color:#999999;font-family: 'Cabin', sans-serif; font-style:normal}

/*RICERCA NOMI*/
.search-filter{ width: 100%; position: relative; z-index: 20000}
.search-filter.sticked{ position: fixed; top: 65px; background-color: rgba(35, 31, 32, 0.9); box-shadow: 0 0 20px rgba(0,0,0,1);}
.two-col{column-count: 2;-moz-column-count: 2; padding: 20px 0; display: block;
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;}
.compact .search-result form{ padding-top: 20px}
#stage.lista-nomi  form{ padding-bottom: 5px; width: auto; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; flex-wrap: wrap}
.lista-nomi .pul-search{ top: auto; bottom: auto; right: auto; position: relative; border: 1px solid transparent}
.lista-nomi .pul-search a{ background: transparent; font-size: 1em}
#stage.lista-nomi  label{ width: auto;min-width: 30%; border: 1px solid transparent}
#stage.lista-nomi  label.small{ width: 20%; min-width: 0}
#stage.lista-nomi  label.small .combo{ height: 2em; line-height: 2em }
#stage.lista-nomi  label span.label{ padding: 0 0 5px 0}
#stage.lista-nomi .testata h1{ font-size: 1.1em !important; color: #fff; text-align: right; padding:0; }
#stage.lista-nomi .testata .title-testata{z-index: 200; position: relative}
#stage.lista-nomi #article h2{ font-size: 2.2em; text-align: left; padding: 20px; padding-top: 0}
#stage.lista-nomi #article .share.inline{ padding: 20px; padding-bottom: 10px; text-align: left}
#stage.lista-nomi #article p{ text-align: left; padding: 10px 20px}
#stage.lista-nomi #article .search-result{ height: 100vh; height: auto;}
#stage.lista-nomi #article  .search-result p{}
#stage.lista-nomi #article ul.name-list li p strong{ color: #fa8501}
#stage.lista-nomi .spinner.top{ padding: 0 20px; height: auto !important}
#stage.lista-nomi input.input-text{ height: 2em}
#stage.lista-nomi #article p.note, #stage.mappa #article p.note{ padding: 20px 20px !important; margin:5px 20px; border: 1px solid #fdf101; background:#fdf101; background: none; color: #fdf101}

ul.name-list{ display: flex; padding: 20px; max-width: 1420px; margin: 0 auto; flex-direction: row; flex-wrap: wrap;  justify-content: flex-start}
ul.name-list li{ display: flex; width: 30.3%; margin: 0 1.5%; flex-direction: column; padding: 15px }
ul.name-list li.loading{ width: 100%; text-align: center; padding: 40px;}
ul.name-list li.open{}
#stage.lista-nomi #article ul.name-list li h2, #ul_anagrafiche li h2{ font-size: 1.5em; padding: 10px 0 0 0; text-align: left; color: #fff; font-family: 'Merriweather', serif; text-transform: none; font-weight: 700}
#stage.lista-nomi #article ul.name-list li h2 a, #ul_anagrafiche li a{color: #fff !important}
#stage.lista-nomi #article ul.name-list li p, #ul_anagrafiche li p{ font-size: 1em; padding: 5px 0; font-family: 'Cabin', sans-serif; text-align: left !important}
#ul_anagrafiche{ font-size: 16px; padding-left: 0 !important}
#ul_anagrafiche li h2{ padding-left: 20px}
#ul_anagrafiche li, #stage #ul_anagrafiche li{ font-size: 0.95em !important}
#ul_anagrafiche li p strong{ color: #fa8501 !important}
.lista-news ul, #stage #article .lista-news ul{ padding-left: 0}

/*path*/
#stage #article .path ul{ padding-left: 0; margin-left: 50px}

/*calendario*/
.calendario #ul_anagrafiche li p{ text-align: center !important}
#stage .calendario .search-result{ border: 1px solid #333; box-shadow: 0 0 20px rgba(0,0,0,0.2); background: none}
.calendario .select-month, #stage .calendario .select-month{ border-bottom: 1px solid #333; box-shadow: 0 10px 10px rgba(0,0,0,0.2)}
.compact .calendario .search-result form{ padding-top: 0; margin-top: 0}

/*Mappa dellimpegno*/
#stage.mappa { padding-bottom: 0}
#stage.mappa  form{ padding: 20px; padding-bottom: 5px; width: auto; max-width: 1420px; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; flex-wrap: wrap; font-size: 22px}
.mappa .pul-search{ top: auto; bottom: auto; right: auto; position: relative; border: 1px solid transparent}
.mappa .pul-search a{ background: transparent; font-size: 1em; color:#ccc; text-align:center; line-height:2em; height:2em; width:40px; display:block}
.mappa .pul-search a i{ font-size:1.1em}
.mappa .pul-search a:hover{ background:#000; color:#fff}
#stage.mappa label{ width: auto; min-width: 30%; border: 1px solid transparent}
#stage.mappa label.small{ width: 200px; min-width: 0}
#stage.mappa label.small .combo{ height: 2em; line-height: 2em }
#stage.mappa label span.label{ padding: 0 0 5px 0}
#stage.mappa .testata h1{ font-size: 1.1em !important; color: #fff; text-align: right; padding:0; }
#stage.mappa .testata .title-testata{z-index: 200; position: relative}
#stage.mappa #article h2{ font-size: 2.2em; text-align: left; padding: 20px; padding-top: 0}
#stage.mappa #article .share.inline{ padding: 20px; padding-bottom: 10px; text-align: left}
#stage.mappa #article p{ text-align: left; padding: 10px 20px}
#stage.mappa #article .search-result{ height: 100vh; height: auto;}
#stage.mappa #article  .search-result p{}
#stage.mappa #article ul.name-list li p strong{ color: #fa8501}
#stage.mappa .spinner.top{ padding: 0 20px; height: auto !important}
#stage.mappa input.input-text{ height: 2em}
#map{ height: 100vh}
.mapSearch{ display: none}
form hr{ border: 0; padding: 0; margin: 0; flex-basis: 100%; display: block;  height: 0;}
.check-container{ display: flex; flex-direction: row; height: 60px; align-items: center}
.check-container label, #stage.mappa .check-container label { width: 22px}
.label.check{ margin-right: 20px; display: flex; flex-direction: row; align-items: center}
.label.check span{ padding: 0 5px; display: block}
.label.check i{ display: block; font-size: 2em; padding: 0 2px 0 0}
#no-name{ position: absolute; display: flex; flex-direction: row; align-items: center; top: auto; left: auto; bottom: -200px; margin: 0; width: 100%; max-width: 600px}
#stage.mappa #article #no-name p{ font-family: 'Cabin', sans-serif; font-size: 15px; padding: 5px}

/*Variante per statistciche*/
.stats{ padding-right: 20px}
#stage.mappa .small-form label .combo{ font-size: 16px}
#stage.mappa .small-form label.small.x100{ width: 250px} 
#stage.mappa .small-form label.small.x50{ width: 120px} 
#stage.mappa .small-form .pul{ padding: 0 10px}

.numbers{ max-width: 1000px; margin: 0 auto}
#stage #article .numbers { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center}
#stage #article .numbers .box{ background: none; height: 100px; padding: 0;  text-align: center}
#stage #article .numbers .box h2{ padding: 0; text-align: center; font-size: 3em}
#stage #article .numbers .box p{ padding: 0; font-family: 'Cabin', sans-serif; font-size: 15px; text-align: center; }

/*MODAL*/
#myModal{ height: 100%}
#modal{  position: relative; display: none;  color: #fff; height: 100%}
#modal .modal-text h2{font-family: 'Merriweather', serif; font-size: 30px;}
#modal p{ font-size: 16px; line-height: 1.3em; padding-bottom: 1em}
.fancybox-skin{ background: #231f20;}
.modal-head{display: flex; flex-direction: column; position: absolute; height: 110px; top: 0; left: 0; width: 100%; padding: 20px 20px 5px 20px;  background: #231f20;}
.modal-head h2{ font-size: 30px; font-family: 'Merriweather', serif; color: #fff; margin-bottom: 5px}
.modal-head p strong{ color: #ff8b00}
.modal-body{ display: flex; flex-direction: row; height: 100%; width: 100%; padding: 20px; padding-top: 110px; padding-bottom: 80px;  }
.modal-footer{display: flex; position: absolute; height: 80px; bottom: 0; left: 0; width: 100%; justify-content: center;  background: #231f20; box-shadow: 0 0 30px rgba(0,0,0,0.5); align-items: center}
.modal-footer .pul{ padding: 0; margin: 0 5px}
.pul.chiudi a{ background: #fff; color: #333}
.modal-text{ width: 60%; padding-right: 20px; box-sizing: border-box; max-height: 100%; overflow-y: auto; color: #fff}
.modal-side{ width: 40%}
.modal-side .box h2{ font-size: 14px; padding-right: 10px}
.modal-side .box.map{ box-shadow: none !important}
.modal-side .box.map img { width: 100%; max-width: 100px}
.modal-side h3{ font-size: 15px; text-transform: uppercase; text-align: center; padding: 20px 0 10px 0; border-bottom: 1px solid #333; color:#fff }
#modal .lista-news h1{ font-size: 18px;}
#modal .lista-news ul{ height: auto}
#modal .lista-news{ height: auto; padding-bottom: 20px}
#modal .lista-news li:last-child{ height: auto}
#modal p.data{font-family: 'Cabin', sans-serif !important; padding-bottom: 5px}
#modal .lista-news article{ padding: 10px}

/*NUOVA HOME - PROGETTO*/
.primo-piano{ border-top: 0}
#stage .primo-piano .data{ padding-bottom: 0}
.primo-piano .multi-clm.w-100{ width: 100%}
.primo-piano a{color: #fdf101}
.primo-piano h2{color: #fdf101; margin:20px 0 10px 0; padding:0 20px;  font-family: 'Merriweather', serif; color:#fff; font-size:2em}
#stage .primo-piano p{ margin:0; padding:1em 20px;  color:#ccc; font-size:1em; line-height: 1.3em; text-align:left; margin: 0 ; font-family: 'Cabin', sans-serif; max-width: none}
.categoria{ padding: 20px 20px 0px 20px; color: #fa8501; font-size: 16px; font-weight: 700}
#stage .primo-piano p{}
.video-box .dida{ padding: 10px 20px 0 20px; text-align: right; font-size: 0.9em}
.masonry.pp{ column-count: initial; display: flex; flex-direction: row; padding: 0 20px}
#stage #search-list.masonry.pp .box, .masonry.pp .box{ background: none; color: #fff}
#stage .box.dark h2 a{color: #fdf101}
 .no-border{ border: 0 !important}

#stage #search-list.masonry.pp .box img{ max-height: 200px; object-fit: cover}
a.btn_link{ color: #fff !important; padding: 0px 20px 20px 20px; font-size: 1em; display: inline-block}

/*Banner*/
.banner{ max-width: 1400px; margin: 40px auto;  height: 350px; display: flex; flex-direction: row; align-items: center; border: 1px solid #333}
.banner figure{ height: 100%; overflow: hidden; width: 50%; position: relative}
.banner figure:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(35,31,32);
background: linear-gradient(90deg, rgba(35,31,32,0) 10%, rgba(35,31,32,1) 100%);}
.banner figure img{ width: 100%; height: 100%; object-fit: cover}
.banner h2{ margin: 10px 0; text-align: left; color: #fff; font-size: 2em}
.banner .categoria{ padding-left: 0;  font-family: 'Cabin', sans-serif; padding-top: 10px}
#stage .banner p, .banner p{ text-align: left; color: #fff; font-size: 1em; margin: 0;  font-family: 'Cabin', sans-serif;}
.banner a{ color:#fdf101; color: #fff }
.banner .pul, #stage.mappa .banner .pul {  font-family: 'Cabin', sans-serif; text-align: left; padding: 0 10px}
.banner .pul a{ height: 2.5em; line-height: 2.5em; padding: 0 20px; font-size: 1em  }
.banner .text-container { width: 50%; height: auto; padding: 20px; padding-left: 6%}
.banner form, #stage.mappa .banner form{ padding: 20px 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size: 1em}
.banner form input, #stage.mappa .banner form input{ max-width: 50%; height: 2.5em}

/*ICON BOX*/
.icon-box{ padding: 40px 0}
.icon-box figure{ display: block; text-align: center}
.icon-box img{ display: inline-block; width: 100%; max-width: 150px;}
#stage .icon-box a{ color: #fdf101}
#stage .icon-box h2{ text-align: center; font-size: 1.5em; padding:20px 20px 10px 20px}
#stage .icon-box p{ text-align: center; color: #fff; font-size: 1em; padding: 0 20px;  font-family: 'Cabin', sans-serif; }

/*FORM CONTRIBUISCI E CONTATTI E NEWSLETTER*/
#box-info{ max-width: 1400px; margin: 0 auto; border: 1px solid #333 }
#stage.mappa #box-info label{ width: 100%; }
#stage.mappa #article #box-info h2{ text-align: center; color: #ccc; font-size: 1.5em}
#stage.mappa #box-info form{font-size: 17px}
#box-info textarea, #box-careers textarea{font-family: 'Cabin', sans-serif; padding: 10px}

/*ARCHIVIO NEWS*/
.lista-news .side-menu{ padding-top: 10px}
.lista-news .side-menu .label{ padding-top: 0}

/*CUSTOM SCROLL BAR*/
html {
  --scrollbarBG: #333;
  --thumbBG: #fff;
}
.modal-text::-webkit-scrollbar {
  width: 11px;
}
.modal-text {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.modal-text::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
.modal-text::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

@media only screen and (min-width: 1200px) {
    .testata.big{ height: 80vh; min-height: 600px}
    #article header .testata.big h1{ font-size: 4.5em}
}
@media only screen and (max-width: 768px) {
     ul.name-list li{ width: 47%;}
    .audio-control small{ display: none}

}
@media only screen and (max-width: 550px) {
    .clm.pr-20{ padding-right: 0%}
    .navbar .sb-toggle-right, .audio-control a{ height: 45px; width: 45px}
    .splide .multi-clm{ flex-direction: column; height: auto}
    .splide.nav-splide .splide__track{ width: auto; margin-left: 50px; margin-right: 50px}
    .splide.nav-splide .splide__slide{ font-size: 18px; }
    .splide .image-container img{ max-width: 150px; margin: 20px auto}
    .splide .gallery li{ width: 30%; padding: 0 0 5px 0}
    
    #stage.marzo #article li h2{ font-size: 1.8em}
    
    .two-col{column-count:1 ; padding: 20px 0}
    .lista-nomi form{ padding: 10px 20px}
    #stage.lista-nomi form{ font-size: 18px; justify-content: flex-start}
    ul.name-list li{ width: 100%; padding: 10px 0}
    #stage.lista-nomi #article ul.name-list li h2{ padding-bottom: 0}
    #stage.lista-nomi #article .search-result{ height: auto}
    .search-result ul{ padding: 0}
    .calendario h2, #stage .calendario h2{ font-size: 1.2em}
    #stage.lista-nomi #article h2{ font-size: 1.8em}
    #stage.lista-nomi  label{ width: 90%; padding-bottom: 5px}
    #stage.lista-nomi  label.small{ width: 40%;}
    
    /*article*/
    #article header .testata h1, #article .article-content h1{ font-size: 2em}
    .testata .title-testata.smallText, .testata .title-testata{ font-size: 2em}
    #stage.internal .testata .content{ padding: 0}
    .x70{ width: 100%}
    .share{ left: auto; margin-left: 0}
    #stage.internal article .content{ padding-left: 20px; padding-right: 20px}
    .article-content, .side-content{ padding-right: 0; padding-left: 0}
    .videoWall{ height: 450px; right: auto; width: 100%}
    #article .article-content blockquote, #stage #article .article-content p, .article-content .video-box, .video-box{ padding-right: 0}
    .gallery{ padding-right: 0 }
    .gallery li{ width: 49%; padding-right: 0}
    .gallery li img{ width: 100%; height: 80px; object-fit: cover}
    
    /*News*/
    .masonry{ column-count:1; padding: 20px}
    .box.sr article, .box.sl article{ min-height: 200px}
    .primo-piano figure{ height: 200px}
    .share li a{ height: 30px; line-height: 30px; width: 30px;}
    
    /*ARCHIVIO NEWS*/
    #stage .lista-news h2 span.number{ display: block; float: none}
    #stage .lista-news h2{ padding-left: 20px}
    
    /*mappa*/
    .label.check{ margin-right: 0px; padding-left: 5px; font-size: 10px}
    #stage.mappa label{ min-width: 80%}
    #map{ height: 80vh}
    #stage.mappa form{ justify-content: space-between; }
    .label.check span{ width: 100%; display: none}
    
    /*statistiche*/
    .stats{ padding: 50px 0 20px 0}
    #stage.mappa .small-form label.small.x100{ width: 100%} 
    #stage.mappa .small-form label.small.x50{ width: 50%} 
    #stage.mappa .small-form .pul{ padding: 5px 10px; text-align: center; width: 100%}
    
    /*home progetto*/
    .masonry.pp{ flex-direction: column;}
    .primo-piano h1{ font-size: 2em}
    #stage .calendario .search-result{ max-width: 90%}
   
    
    /*banner*/
    .banner{ flex-direction: column; height: auto; margin: 20px auto}
    .banner figure, .banner .text-container{ width: 100%}
    .banner h2{ font-size: 1.5em}
    .banner form input{ max-width: 60%}
    .banner form .pul{ width: 40%; padding: 0 0 0 10px; text-align: right}
    .banner .text-container{ padding-left: 20px}
    /*MODAL*/
    .modal-body{ flex-direction: column; overflow-y: auto; padding-top: 130px }
    .modal-head{ height: 130px}
    .modal-head h2{ font-size: 25px}
    .modal-text{ overflow: visible; width: 100%; height: auto; max-height: none; padding-bottom: 20px; padding-right: 0; font-size: 1.2em}
    .modal-side{ overflow: visible; width: 100%; height: auto; padding-top: 20px; border-top: 1px solid #333}
    .modal-side .box.map article{ min-height: 0; padding: 5px 0}
    
    /*ICON BOX*/
    .icon-box { padding: 20px 0}
    .icon-box .clm{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding-bottom: 10px}
    .icon-box figure img{ width: 80px}
    #stage .icon-box h2{ text-align: left; padding: 10px}
    #stage .icon-box p{ text-align: left; padding: 0 10px}
}