/*

┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓   ┏━━━┓ ┏━━━┓ ┏━━━┓
┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃   ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃
┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃   ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓
┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃   ┃┃   ┃┃ ┃┃ ┃┃┃┃┃┃   ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃
┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃   ┃┃   ┃┗━┛┃ ┃┃┃┃┃┃   ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃
┗━━━┛ ┗━━━┛ ┗━━━┛   ┗┛   ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET"

DESIGN BY © LO STUDIO

CUSTOM.CSS STYLESHEET FOR => " ___NOME_SITO___ "

BASE (MOBILE) SIZE


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/**
 *
 *  ▐▌ ▐▌  ▄▀▀▄  █▀▀▄  ▄▀▀
 *   ▀▄▀   █▀▀█  █▐█▀   ▀▄
 *    ▀    ▀  ▀  ▀ ▀▀  ▀▀  - VARS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */

.site-content { padding-bottom: 0; overflow: visible; }
.container_total { padding-top: 0 !important; }
section { position: relative; }

#sidenav { display: none !important; }
.p20 { padding: 20px; }
.h100 { height: 100vh !important; }



/**
 *
 *  █  █  █▀▀  ▄▀▀▄  █▀▀▄  █▀▀  █▀▀▄
 *  █▀▀█  █▀▀  █▀▀█  █  █  █▀▀  █▐█▀
 *  ▀  ▀  ▀▀▀  ▀  ▀  ▀▀▀   ▀▀▀  ▀ ▀▀ - HEADER
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


header { display: none !important; }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/


ul.topmenu-links-menu li a { padding: 10px 20px; font-weight: normal; color: #000; border-radius: 23px; }
.topmenu * { box-sizing: initial; }










/**
 *
 *  ▄▀▀▄  ▄▀▀  ▄▀▀  █▀▀  ▀▀█▀▀  ▄▀▀
 *  █▀▀█   ▀▄   ▀▄  █▀▀    █     ▀▄
 *  ▀  ▀  ▀▀   ▀▀   ▀▀▀    ▀    ▀▀  - ASSETS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BUTTONS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.btn {
	display: inline-block; position: relative;
	font: inherit; color: inherit;
	padding: .5em 1em;
	border: 1px solid #3e3e3e;
	background-color: #ccc; font-size: var(--rem); /* DA GUARDARE */
}
.btn:hover, .btn:focus { background-color: ; color: ; }
.btn:active { transform: translateY(1px); }

.btn_color { background-color: #2980b9; border-color: #; color: #; }
.btn_color:hover, .btn_color:focus { background-color: #2574a8; }
.btn_color:active { background-color: #2472a4; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

a.link {
	display: inline-block; position: relative;
	font: inherit; color: inherit;
	padding: .4em 1.25em;
	border: 2px solid #ffffff; border-radius: 4rem;
	background-color: transparent; font-size: var(--rem); color: var(--white); font-weight: 900; text-transform: uppercase;
}
a.link:hover, .link:focus, .link:active { background-color: rgba(255,255,255,.25); box-shadow: .125rem .125rem .5rem #1C3739; }


a.link_white { background-color: var(--white); color: var(--teal); }
a.link_white:hover { color: var(--white); }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.filter_color {
	background-color: var(--color);
	mix-blend-mode: multiply;
	opacity: .5;
}




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CONTENT FORMAT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.text :where(p, ul, ol) { margin-top: 1.5em; }
.text :where(p, ul, ol):first-of-type { margin-top: 0; }
.text :where(h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p), 
.text :where(h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p):first-of-type, 
.text :where(h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul, p + ul),
.text :where(h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul, p + ul):first-of-type,
.text :where(h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol, p + ol),
.text :where(h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol, p + ol):first-of-type { margin-top: 1em; }

.text :where(p a, li a) { display: inline-block; }

.text .link { margin-top: 1.5em; }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.nav_btn { width: 2.5em; top: 50%; transform: translateY(-50%); z-index: 1; background-color: transparent !important; filter: drop-shadow(0 0 1rem rgb(30 30 30 / 50%)); transition: .2 ease; }
.nav_btn:hover { opacity: .75; }
.nav_prev { left: .5rem; }
.nav_next { right: .5rem; }
.nav_btn img { width: 100%; }

.nav_btn.swiper-button-disabled { display: none; }





.btn_gallery, .btn_podcast { width: 4rem; margin: 1.5rem 1rem 1rem 0; cursor: pointer; display: block; transition: .2s ease; }
.btn_gallery img, .btn_podcast img { width: 100%; }


.btn_gallery:hover, .btn_podcast:hover { opacity: .85; transform: scale(.95); }


.sg_evento.swiper { display: none; }



/**
 *
 *  █▀▀  ▄▀▀▄  ▄▀▀▄  ▀▀█▀▀  █▀▀  █▀▀▄
 *  █▀▀  █  █  █  █    █    █▀▀  █▐█▀
 *  ▀     ▀▀    ▀▀     ▀    ▀▀▀  ▀ ▀▀ - FOOTER
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


footer, .bottom-footer { display: none !important; }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FOOTER CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/





/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.credits p, .credits a { display: inline-block; }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACK TO TOP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/










/**
 *
 *  █▀▀▄  ▄▀▀▄  ▄▀▀▀   █▀▀  ▄▀▀
 *  █  █  █▀▀█  █  ▀▌  █▀▀   ▀▄
 *  █▀▀   ▀  ▀   ▀▀▀   ▀▀▀  ▀▀  - TEMPLATES _ PAGINE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */

.col_yellow { color: var(--yellow); }
.col_red { color: var(--red); }
.col_teal { color: var(--teal); }

.col_fucsia { color: var(--fucsia); }
.col_blue { color: var(--blue); }
.col_orange { color: var(--orange); }
.col_purple { color: var(--purple); }


main { background-color: var(--teal); padding-bottom: 2rem; }
section .container { z-index: 1; }


.bkg_part { background-image: url(bkg_part.png); opacity: .5; }

.bkg_frame { position: absolute; z-index: 1; background-size: cover !important; }
.bkg_frame_l { background: url(frame_l.png) no-repeat right; width: .75rem; height: 100%; left: 0; top: 0; }
.bkg_frame_r { background: url(frame_r.png) no-repeat left; width: .75rem; height: 100%; right: 0; top: 0; }
.bkg_frame_t { background: url(frame_t.png) no-repeat bottom; width: 100%; height: 3rem; top: 0; left: 0; }
.bkg_frame_b { background: url(frame_b.png) no-repeat top; width: 100%; height: 3rem; bottom: 0; left: 0; }





.link_top { width: calc(100% - 3rem); position: absolute; top: 3rem; left: 1.5rem; z-index: 2; }
.link_top a, .link_top button { color: var(--white); font-weight: 700; background-color: transparent !important; font-size: 1rem; }
.link_top a:hover, .link_top button:hover { color: var(--yellow); }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SEC 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.s1_title { padding-top: 25vh; }

.s1_title h1 { text-shadow: -.125rem .125rem .125rem #1C3739; }
.s1_title h1 span { font-size: 140%; }

.s1_title a { display: inline-block; }
.s1_title a:hover { color: var(--yellow); }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SEC 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.text h3 { font-size: 1.5rem; line-height: 1.1; margin-top: 1rem; }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SEC 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.event_wrapper { padding-bottom: 9rem; width: 100%; }
.event_wrapper:after { content: ""; width: 5rem; height: 9rem; position: absolute; left: 50%; bottom: 0; transform: translate(-45%, 1rem); background: url(tatteggio_mob_scheda.svg) no-repeat center; background-size: contain; }

.event_wrapper:last-of-type { padding-bottom: 0; }
.event_wrapper:last-of-type:after, .event_wrapper:last-of-type .tratteggio_desk { display: none; }


.img_container { margin-bottom: 1rem; }
.personaggio { z-index: 1; width: auto; height: 10rem; margin-bottom: -3rem; filter: drop-shadow(0 0.5rem 0.25rem rgba(30,30,30,.1)); }
.palloncino_info { width: 70%; }

.text_info { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90%; }
.text_info p { font-weight: 700; font-size: 1.4rem; line-height: 1.2; }
.text_info hr { background-color: var(--white); margin: .75rem auto; width: 40%; }

.card_content h2 { font-size: 4rem; font-weight: 500; text-shadow: -.125rem .125rem .125rem #1C3739; }
.card_content h3 { font-size: 1.5rem; font-weight: 700; text-shadow: -.125rem .125rem .125rem #1C3739; text-shadow: unset; }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SEC 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.info_prenota , .info_contatti { padding: 7% 0; }

.icon { width: 3rem; height: 3rem; margin-bottom: 1rem; }
.info_prenota a, .info_contatti a { display: inline-block; }
.info_prenota a:hover, .info_contatti a:hover { color: var(--yellow); }

.img_qr { width: 6rem; margin-top: 1rem; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SEC 5 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.logo_partner { height: 3rem; width: auto; margin: .75rem; }
.logo_partner img { width: 100%; height: 100%; object-fit: contain; }





/**
 * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
 *
 * RESPONSIVE
 *
 * Settare se necessario regole fluid per minmax di elemtni specifici basandosi sulle seguenti regole:
 *	=>	ORIGINAL CALC			->	calc( 12px + (24 - 12) * ( (100vw - 320px) / (1920 - 320) ) )
 *	=>	CALC 1920px -> 320px	->	calc( 12px + (24 - 12) * ( (100vw - 320px) / 1600 ) )
 *	=>	CALC 1280px -> 320px	->	calc( 12px + (24 - 12) * ( (100vw - 320px) / 960 ) )
 *	=>	CALC 1024px -> 320px	->	calc( 12px + (24 - 12) * ( (100vw - 320px) / 704 ) )
 *
 * Da creare fluid dinamico con 2 step per i calc iniziali =   1920 -> 1024   1024 -> 320
 *
 * __________________________________________________________________________________________________________________________________________________________________________
 */






/**
 *
 *  █▄ ▄█  ▄▀▀▄  █▀▀▄  ▀  █     █▀▀
 *  █ █ █  █  █  █▀▀█  █  █  ▄  █▀▀
 *  ▀   ▀   ▀▀   ▀▀▀   ▀  ▀▀▀▀  ▀▀▀ - MOBILE PORT | 481 -> 767
 *
 * Stylesheet: 481px and Up Stylesheet
 * This stylesheet is loaded for larger devices. 
 * It's set to 481px because at 480px it would load on a landscaped iPhone.
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 481px) {}






/**
 *
 *  ▀▀█▀▀  ▄▀▀▄  █▀▀▄  █     █▀▀  ▀▀█▀▀
 *    █    █▀▀█  █▀▀█  █  ▄  █▀▀    █
 *    ▀    ▀  ▀  ▀▀▀   ▀▀▀▀  ▀▀▀    ▀   - TABLET |  768 x 1024  ->  1023 x 1280
 *
 * Stylesheet: Tablet & Big Tablet Stylesheet
 * Here's where you can start getting into the good stuff.
 * This size will work on iPads, other tablets, and desktops.
 * So you can start working with more styles, background images, and other resources. 
 * You'll also notice the grid starts to come into play.
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 768px) {


    .link_top { width: calc(100% - 4rem); top: 3rem; left: 2rem; }





    .event_wrapper { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; padding-bottom: 0; width: 33rem; max-width: 100%; margin: 0 auto; }
    .event_wrapper:nth-of-type(odd) { flex-direction: row-reverse; }
    .event_wrapper:after { display: none; }

    .tratteggio_desk { height: 11rem; width: 100%; }
    .tratteggio_desk:after { content: ""; background: url(trattegio_desktop.svg) no-repeat center; background-size: contain; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
    .event_wrapper:nth-of-type(odd) .tratteggio_desk:after { transform: scaleX(-1); }


    .img_container { width: 40%; padding-right: 5%; z-index: 1; margin-bottom: 0; }
    .event_wrapper:nth-of-type(odd) .img_container { padding-left: 5%; padding-right: 0; }
    .palloncino_info { width: 90%; }
    
    .text_info { width: 70%; }
    .text_info p { font-size: 1rem; }


    .card_content { width: 60%; text-align: left; }
    .card_content h2 { font-size: 4.5rem; }
    .link_container { justify-content: flex-start; }
    .card_content .link:nth-of-type(2) { margin-left: .75rem; }






    .info_prenota, .info_contatti { display: flex; justify-content: flex-start; align-items: flex-start; }
    .info_prenota .text, .info_contatti .text { padding: 0 2rem; }
    .info_prenota .text h3,  { margin-top: 0; }
    .img_qr { margin-top: 0; }





    .logo_partner { height: 2.5rem; }




    .btn_gallery, .btn_podcast { width: 6rem; }
    .btn_new { justify-content: flex-start; }

}



/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀▀█▀▀  ▄▀▀▄  █▀▀▄      ▄▀▀  █▄ ▄█  ▄▀▀▄  █    █ 
 *  █  █  █▀▀   ▀▄  █▀▄     █    █  █  █  █       ▀▄  █ █ █  █▀▀█  █ ▄  █ ▄ 
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀    ▀     ▀▀   █▀▀       ▀▀   ▀   ▀  ▀  ▀  ▀▀▀  ▀▀▀  - LAPTOP |  1024 x 768  ->  1280 x 720
 * 
 * Stylesheet: Small Desktop Stylsheet
 * This is the SWITCH breakpoints between vertical layout and horizontal layout 
 * due to the change in screen size orientations.
 * It's larger than an iPad so it will only be seen on the Desktop.
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1024px) {


    

}






/**
 *
 *  █     ▄▀▀▄  █▀▀▄  ▀█▀  ▄▀▀▄  █▀▀▄
 *  █  ▄  █▀▀█  █  █   █   █  █  █  █
 *  ▀▀▀▀  ▀  ▀  █▀▀    ▀    ▀▀   █▀▀  - LAPTOP |  1281 x 720  ->  1366 x 768
 *
 * Stylesheet: Super Large Monitor Stylesheet
 * You can add some advanced styles here if you like. 
 * This kicks in on larger screens.
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1281px) {

    .h100 { height: 130vh !important; }


    .bkg_frame_l { width: 1rem; }
    .bkg_frame_r { width: 1rem; }



    .s1_title { padding-top: 14vh; }
    .s1_title h2 { text-align: right; margin-right: -15%; margin-top: 1rem; font-size: 1.2rem; }



    .event_wrapper { width: 50rem; }
    .tratteggio_desk { height: 16.3rem; }

    .personaggio { height: 12rem; }
    .text_info p { font-size: 1.2rem; }
    .card_content h2 { font-size: 6.7rem; }





    .info_prenota, .info_contatti { padding: 2rem; }
    .img_qr { width: 9rem; }



    .logo_partner { height: 3.1rem; }




    .btn_gallery, .btn_podcast { width: 8rem; }


}






/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀█▀  ▄▀▀▄  █▀▀▄
 *  █  █  █▀▀   ▀▄  █▀▄    █   █  █  █  █
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀   ▀    ▀▀   █▀▀  - LAPTOP |  1367 x 768  ->  1919 x 1080
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1367px) {

    #s2_racconti .text { max-width: 80%; margin: 0 auto; }
    .text h3 { font-size: 1.7rem; }


    .text_info p { font-size: 1.5rem; }


    .logo_partner { height: 3.5rem; }

}






@media screen and (min-width: 1680px) {

    .event_wrapper { width: 55rem; }
    .tratteggio_desk { height: 18.2rem; }

    .personaggio { height: 15rem; margin-bottom: -4rem; }
    .text_info p { font-size: 1.6rem; }

    .card_content h2 { font-size: 7rem; }


}



/**
 *
 *  █  █  █▀▀▄  █▀▀  █▀▀▄
 *  █  █  █▀▀█  █▀▀  █▐█▀
 *   ▀▀   ▀▀▀   ▀▀▀  ▀ ▀▀ - ÜBER | 1920 -> ...
 * __________________________________________________________________________________________________________________________________________________________________________
 */

@media screen and (min-width: 1921px) {}