/* =================================================================== 
 *
 *  Typerite CSS GENERICO PER tutti i siti di larp TS
 *  Versione 0.0.0
 *  30 set 2019
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  # -
 *  # -
 *  # -
 *
 * =================================================================== */



/* ===================================================================
 * # VARIABILI: i colori principali
 * 
 * ------------------------------------------------------------------- */

:root {

/* Versione standard (es., testo chiaro su fondo scuro) */

--testo: black;      /* testi base */
		--testoB: white;      /* testi alternativi */
		--testoC: #777;      /* testi alternativi ulteriori */
--link: #a10;      /* link/pulsanti base  */
--hover: #a10;      /* link/pulsanti alternativi  */
		--linkB: #ccc;      /* link/pulsanti alternativi ulteriori  */
		--hoverB: white;      /* hover per link/pulsanti base */
		--linkC: #colore;      /* hover per link/pulsanti alternativi */
		--hoverC: #colore;      /* hover per link/pulsanti alternativi ulteriori */
--bg: white;      /* sfondo base  */
		--bgB: #151515;      /* sfondo alternativo */
		--altro: #colore;      /* altro colore base */
		--altroB: #colore;      /* altro colore alternativo */
		--altroC: #colore;      /* altro colore alternativo ulteriore */

/* Versione invertita (es., testo scuro su fondo chiaro) */
--testo2: #ddd;      /* testi base */
		--testoB2: #colore;      /* testi alternativi */
		--testoC2: #999;      /* testi alternativi ulteriori */
--link2: #e54;      /* link/pulsanti base  */
--hover2: #fff;      /* link/pulsanti alternativi  */
		--linkB2: #ddd;      /* link/pulsanti alternativi ulteriori  */
		--hoverB2: #colore;      /* hover per link/pulsanti base */
		--linkC2: #colore;      /* hover per link/pulsanti alternativi */
		--hoverC2: #colore;      /* hover per link/pulsanti alternativi ulteriori */
--bg2: black;      /* sfondo base  */
		--bgB2: #222;      /* sfondo alternativo */
		--altro2: #colore;      /* altro colore base */
		--altroB2: #colore;      /* altro colore alternativo */
		--altroC2: #colore;      /* altro colore alternativo ulteriore */

}


html, body { 
    scroll-behavior: smooth;
}

/* ===================================================================
 * # FONT: Proxima Nova
 * 
 * ------------------------------------------------------------------- */

@font-face {font-family: "proximanova"; src: url("../../../style/ProximaRegular.ttf") format("truetype"); font-weight:normal; font-style:normal; }
@font-face {font-family: "proximanova"; src: url("../../../style/ProximaRegularIt.ttf") format("truetype"); font-weight:normal; font-style:italic; }
@font-face {font-family: "proximanova"; src: url("../../../style/ProximaExtrabold.ttf") format("truetype"); font-weight:bold; font-style:normal; }
@font-face {font-family: "proximanova"; src: url("../../../style/ProximaExtraBoldIt.ttf") format("truetype"); font-weight:bold; font-style:italic; }
@font-face {font-family: "proximanova"; src: url("../../../style/ProximaBlack.ttf") format("truetype"); font-weight:900; font-style:normal; }
@font-face {font-family: "proximanova"; src: url("../../../style/ProximaBlackIt.ttf") format("truetype"); font-weight:900; font-style:italic; }

html, body, h1, h2, h3, h4, h5, h6, p, div, li, b, i, th, td {
	font-family: proximanova,lato,calibri,'sans-serif' !important;
	}

.header__nav > li > a {
	text-transform:uppercase;
	font-weight:bold !important;
}

.header__nav  li  ul {
	font-size:0.8em;
}

h1, h2 {
	text-transform:uppercase;
	font-weight:900 !important;	
}

.header__nav > li > a {
	font-size:1.15em;
}

.format-quote blockquote p {
	font-style:italic;
}
.format-quote blockquote p b{
	font-style:normal;
	font-weight:900;
}

strong, b { font-weight:900; }

/* ===================================================================
 * # MENU' NAVIGAZIONE TS IN CIMA
 * 
 * ------------------------------------------------------------------- */

#navts {
	background: var(--bgB);
	height:1.5em;
	font-size:1.4rem;
	font-family:proximanova,Lato,Calibri,sans-serif;
	font-style:normal;
	font-weight:bold;
	opacity:0.5;
	transition:.3s ease .15s;
	width:180px;
	overflow:hidden;
	float:right;
	position:fixed;
    border-radius: 0px 0px 0px 25px;
    right:0px;
	z-index:13;
}

#navts:hover {
	height:3em;
	width:100%;
	border-radius:0px;
	opacity:1;
}

#navts ul {
	position:absolute;
	right:0.5em;
	margin-top:0em;
	transition:.2s ease .1s;
}

#navts:hover ul {
	margin-top:0.4em;
	color: var(--hover);
}

#navts li {
	float:left;
	list-style:none;
	margin:0em 0.2em 0em 0.4em;
	padding:0em 0.2em 0em 0.4em;
	opacity:0.5;
	border-bottom: 3px solid rgba(0,0,0,0);
	transition: opacity .8s, border .8s;
}

#navts li:hover {
	border-bottom:3px solid var(--hover);
	opacity:0.8;
}

#navts, #navts a  {
	color:var(--testoB);
}

.solomobile {
	display:none !important;
}

/* da fisso, nasconde il nuovo "input" usato per togglare il menù mobile */
.header__menu-toggle {
	display:none !important; 
}

/* ===================================================================
 * # TESTATA: header opzionale con immagine o video del larp
 * 
 * ------------------------------------------------------------------- */


/* Parte SEMPRE VALIDA: nè classe confoto nè classe convideo */

.testata {
	margin: 0 20px 1em 20px;
	padding: 1em;
	height:25vh;
	background: var(--bgB) url("../img/testata.jpg") center center  no-repeat;
	background-size: cover;
	position:relative;
	transition:.5s ease-in-out .5s;
}

.testata h1, .testata a {
  text-align:center;
  font-size:4.3em;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: var(--testoB);
  text-shadow: 0px 0px 7px rgba(0,0,0,0.7);
  transition: opacity 1s;
}

.testata a {
	height:80%;
	width:80%;
	font-size:1.5em;
	transition:opacity 2s !Important;
	display:block; 
	opacity:0;
	transition:2s;
	background: url("../img/youtubeBIG.png") center center  no-repeat;
}

.testata a:hover {
	border-bottom-color:transparent !important;
}

.testata h1.nero {
  color: var(--testo);
  text-shadow: 0px 0px 7px rgba(255,255,255,0.7);
}

.testata h1::after {
	content: attr(sottotitolo);
	display: block;
	font-size: 50%;
	letter-spacing:normal !important;
	text-transform: none;
	font-weight: normal;
	font-style: italic;
	margin: .5em -3em;
}


.testata a span {
  border:20px solid var(--bgB);
  border-radius: 0.5em;
  background: var(--bgB) !important;
}



/* Opzioni SOLO se classe confoto (se NON c'è video in header della home, ma una foto) */

.confoto .media-wrap  {
	display:none !important;
}

.confoto iframe  {
	display:none !important;
}

.confoto .testata h1 {
	width:95%;
	font-size: 3.3em;
}

.confoto .testata:hover {
	height:65vh;
	box-shadow: inset 0px 0px 70px 5px black;
}


.confoto .testata:hover h1{
	opacity:0.3;
}


.confoto .testata:hover a{
	opacity:0.7;
	color: var(--hoverB);
}


/* Opzioni SOLO se classe convideo o fullscreen(se c'è video in header della home) */

.convideo .testata {
	background:none;
	position:absolute;
	z-index:12;
	top: 35vh;
	left:0px;	
	width:calc(100% - 400px);
	margin-left:300px;
	margin-right:100px;
}

.convideo .testata a {
	display:none;
}

.convideo .testata h1 {
	width:70%;
}


/* Opzioni SOLO se classe fullscreen (se c'è video in header della home) */

@media screen and (min-width:1200px) {
	
		
	.fullscreen .testata {
		background:none;
		position:absolute;
		z-index:12;
		top: 35vh;
		left:0px;	
		width:calc(100% - 400px);
		margin-left:300px;
		margin-right:100px;
	}

	.fullscreen .testata a {
		display:none;
	}

	 .fullscreen .testata h1 {
		width:70%;
	}

	.confoto.fullscreen .media-wrap  {
		display:block!important;
	}


	.fullscreen .media-wrap {
		margin-top: -6em;
		z-index: 12;
		margin-left: -330px;
		margin-right: -100px;
		width: 100vw;
		
	}

	.fullscreen .testata   {
		margin-left: 100px;
		margin-right: 100px;
		width: calc(100vw - 200px);
		pointer-events: none;
	}


	.fullscreen .testata h1 {
		width:100%;
		font-size: 5em;
		text-align: center;
		letter-spacing:0.35em;
	}


	.fullscreen .testata h1::after {
		animation: glow 2s ease-in-out .35s infinite alternate, fadin 10s linear 0s;
	}

	.fullscreen .testata  h1 span {
	  display:inline-block;
	  animation: glow 2s ease-in-out .35s infinite alternate, fadin 10s linear 0s, ingrand 30s ease-out;
	}  

	.confoto.fullscreen .testata  h1 span {
	  display:inline-block;
	  animation: glow 2s ease-in-out .35s infinite alternate, fadin2 10s ease-in 0s, ingrand 15s ease-out;
	}  

		
	@keyframes glow {
	from {
	  text-shadow: 0 0 6px #edb;
	}
	to {
	  text-shadow: 0 0 30px #f4eeee, 0 0 15px #fff173;
	}
	}

	@keyframes fadin {
	0% { opacity: 0 ; }
	10% { opacity: 0 ; }  
	40% { opacity: 0.4 ; }  
	100% { opacity: 1; }
	}

	@keyframes fadin2 {
	0% { opacity: 0 ; }
	40% { opacity: 0.4 ; }  
	100% { opacity: 1; }
	}

	@keyframes ingrand {
	0% {  letter-spacing:0; transform:scale(0.6,0.6)}
	20% {  letter-spacing:0.15em; transform:scale(0.8,0.8)}
	60% {  letter-spacing:0.3em;  transform:scale(1,1)}
	100% {  letter-spacing:0.35em;  transform:scale(1,1)}  
	}

	.fullscreen .cornice {
		box-shadow: inset 0px 0px 60px 20px rgba(0,0,0,0.7), inset 0px -60px 30px 15px rgba(0,0,0,1), 0px 0px 10px 10px rgba(0,0,0,1), 0px 0px 30px 30px rgba(0,0,0,1);
		z-index: 12;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: calc((100vw * 9 / 16  - 40px));
		pointer-events: none;
	}


	.fullscreen .cornice::after {
		content:"";
		width:100vw;
		height:30px;
		background:yellow;
		z-index:101;
	}

	.confoto.fullscreen .video-container {
		background: url("../img/testata.jpg") no-repeat fixed;
		background-size: 100% auto;
	}

}


/* ===================================================================
 * # IMMAGINI E COLORI DI SFONDO
 * 
 * ------------------------------------------------------------------- */

/* IMMAGINE DI SFONDO */
#top {
	background: url('../img/sfondolight.jpg') no-repeat fixed;
	background-size:cover;
}
.masonry .entry__text {
	background-color: var(--bg);
	color: var(--testoC);

} 

/* DIV GENERALE: Riduce margine eccessivo */

.s-content {
	padding-top:3em !important;
	}


/* Riduce distanza tra logo e prima voce del menù (barra di sx) */

.header__nav-wrap {
	margin-top: 1.6em;
}


/* LINK , TITOLI, HOVER */

a {
	color: var(--link);
	border-bottom: 2px solid rgba(0,0,0,0);
}

a:hover {
  color: var(--hover);
}

.s-content a:hover {
	border-color: var(--hover);
}

h2.entry__title a, div.link-wrap a {
  display:block;
  border-bottom: 3px solid rgba(0,0,0,0);
 transition: color 2s !important, border-bottom 0.15s ease 0.25s !important;
}
	
h2.entry__title a:hover, div.link-wrap a:hover {
  color:var(--hover) !important;
  border-bottom: 3px solid var(--hover);
}


/* ICONE SOCIAL e icone varie*/

.header__logo img {
    width: 80%;
    height: auto;
}

.header__social a::after {
    height: 2rem;
    width: 2rem;
}

.header__social a:hover::after {
    height: 3rem;
    width: 3rem;
}


.header__social .ss-youtube a::after {
  background-image: url(../img/icons/icon-video.png);
}

.header__social .ss-mail a::after {
  background-image: url(../img/icons/icon-mail.png);
}

.header__social .ss-terre a::after {
  background-image: url(../img/icons/icon-terre.png);
}


.header__social .ss-facebook a::after {
  background-image: url(../img/icons/icon-facebook.png);
}

.header__social .ss-instagram a::after {
  background-image: url(../img/icons/icon-instagram.png);
}

.format-link .entry__thumb::before {
    background-image: url(../img/icons/icon-link.png);
}

.pull-quote blockquote:before {
  background-repeat: no-repeat;
  background: center center;
  background-size: contain;
  background-image: url(../img/icons/icon-quote.svg);  
}

.format-quote .entry__thumb::before {
  background-image: url(../img/icons/icon-calendar.svg);
}

/* BARRA VERTICALE A DESTRA */

.header__search-trigger::before {
    height: calc(100vh - 250px);
}
  
.header__search-trigger::after {
    content: "£\00a0\00a0SIGN\00a0UP\00a0";
	opacity:0.8;
	text-shadow: 0px 0px 3px rgba(255,255,255,0.9), 0px 0px 7px rgba(255,255,255,0.7), 0px 0px 14px rgba(255,255,255,1.4);
    font-family: proximanova,lato,calibri,'sans-serif' !important;
    font-weight: bold;
    font-size: 12px;
    top: 120px;
	letter-spacing: 7px;
    left: 0;
	transition:0.4s;
}

.header__search-trigger:hover::after{
	color:var(--testo);
	text-shadow: 0px 0px 3px rgba(255,150,0,0.9), 0px 0px 7px rgba(255,150,0,0.7), 0px 0px 14px rgba(255,150,0,1.4);

}

a.header__search-trigger:hover {
     border-color: transparent !important; 
}

.header__search-trigger {
    /* background-image: url(../img/icons/icon-terreblack.svg); */
    background-image: none;
}  




/* ===================================================================
 * # MENU DROPDOWN SENZA JAVASCRIPT
 * Menù specifico del larp (da fisso)
 * ------------------------------------------------------------------- */

/* Riduce interlinea all'interno delle voci di menù lunghe (due righe) e per compensare la aumenta tra una voce di menù e l'altra */
.header__nav > li > a {
	line-height: 1.8rem;
    margin-top: 2.5rem;
}

.s-header {
	padding-top:5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.s-header::-webkit-scrollbar {display:none;}

.logovert {
	max-height: calc(70vh - 350px);
	height:700px;
	background: transparent  url("../img/logoeventovert.png");
	background-repeat: no-repeat;  background-size: contain; background-position: center;
}

.header__social {
	margin-top:2rem;
}

/* Sposta più in alto la freccetta "tendina" nei menù che hanno sotto menù */
.header__nav li.has-children > a::after {
  top: 8px;
}

/* Toglie il padding (per il max-width successivo), annulla il "display:none" */
.header__nav li ul { padding-bottom:0px; padding-top:0px; display:block;}

/* Di base, i sottomenù hanno altezza e opacità zero (e no overflow) */
.header__nav li ul li {
	overflow: hidden;
	max-height:0px;
	opacity:0;
	transition: max-height .8s ease .1s, opacity 1s;
}

/* MA li mostra se hoveri o focusi sul menù che contiene il submenu */
.header__nav li:hover ul li, .header__nav li a:focus + ul li, .header__nav li a:active + ul li {
	opacity: 1;
	max-height:3.5rem;
}


/* ===================================================================
 * # PER LE SINGOLE PAGINE
 * 
 * ------------------------------------------------------------------- */
 p, h1, h2, h3, h4, blockquote {min-width:90%}
 .nascondivideo .testatavideo {display:none;}
 .nascondifoto .testatafoto {display:none;}
  
 
/* ===================================================================
 * # Menù mobile - PULSANTE HAMBURGER nel checkbox
 * 
 * ------------------------------------------------------------------- */
input.hamburger:before { content:""; display:inline-block; width:100%; height:100%; background: black url("../img/icons/hamburger1.png"); background-repeat: no-repeat;  background-size: cover;  }



/* ===================================================================
 * # ALTRI STILI E FORMATTAZIONI
 * 
 * ------------------------------------------------------------------- */
h2 { font-size: 3.4rem; }
h3 { font-size: 3.1rem; }
h4 { font-weight:700; text-transform: uppercase;}

.drop-cap:first-letter {
	font-family: proximanova,lato,calibri,'sans-serif';
	font-weight: 900;
	font-size: 9.4rem;
	line-height:6.7rem;
}

.entry__header-meta {
    font-size: 2rem;
    font-style: italic;
	opacity:0.6;	
}


blockquote cite {
	font-family: proximanova,lato,calibri,'sans-serif';
    font-weight:700;
	font-size: 1.8rem;
	text-transform:uppercase;
}

article li {
	line-height: 140%;
    padding-bottom: 1em;
}

article .column {
	/* margin: auto 0px; */  /* Per centrare verticalmente i column */
}

.pull-quote blockquote {
    background-color: rgba(220,220,220,0.7);
} 

hr {
  width:100%;
  border: 1px solid #d0d0d0;
}

.btn, button, input[type="submit"], input[type="reset"], input[type="button"] {
    letter-spacing: 0.4rem;
}

/* ===================================================================
 * # SFONDO & INVERTI (sezioni del sito con sfondo colorato)
 * 
 * ------------------------------------------------------------------- */
html, body, #top {overflow-x: hidden !important; /* Hide horizontal scrollbar */}

body{ /* Hide horizontal scrollbar (Android) */
height: 100% !important;
width: 100% !important;
position: fixed !important;
}

.sfondomenuvert {
	background-color: var(--bgB);
	position:fixed;
	left:0;
	z-index:1;
	width:300px;
	max-width:300px;
	height:100%;
}

@media screen and (max-width:1600px) {
  .sfondomenuvert {width: 290px;}
}

@media screen and (max-width:1200px) {
  .sfondomenuvert {width: 270px;}
}

@media screen and (max-width:1100px) {
  .sfondomenuvert { max-width:0px;}
}

.header__nav a {  
	color: var(--linkB);
	text-shadow: 0px 0px 2px black, 0px 0px 5px var(--bgB);
	opacity:0.8;
}


/* Allarga immagine - comune per TUTTI gli sfondi allargati */
.sfondo {
  margin-left: calc(-100vw + 50%);
  margin-right: calc(-100vw + 50%);
  background: url("../img/sfondolight.jpg") no-repeat fixed;
  background-size: cover;
  padding-left: calc(100vw - 50%);
  padding-right: calc(100vw - 50%);
  padding-top:4em;
  padding-bottom:4em;
  z-index:6;
}

/* Personalizza immagine di sfondo a seconda della classe selezionata */
.sfondo.imm2 {background: url("../img/sfondolight2.jpg") no-repeat fixed; background-size: cover;}
.sfondo.imm3 {background: url("../img/sfondolight3.jpg") no-repeat fixed; background-size: cover;}
.sfondo.inverti {background: url("../img/sfondodark.jpg") no-repeat fixed; background-size: cover;}
.sfondo.imm2.inverti {background: url("../img/sfondodark2.jpg") no-repeat fixed; background-size: cover;}
.sfondo.imm3.inverti {background: url("../img/sfondodark3.jpg") no-repeat fixed; background-size: cover;}


/* Se colori invertiti ("night mode"), cambia i colori degli stili */
.inverti {
  color: var(--testo2);
}

.inverti h1, .inverti h2, .inverti h3, .inverti h4, .inverti blockquote p, .inverti th, .inverti .btn--stroke, .inverti button.btn--stroke  {
	color: var(--testo2);
	border-color: var(--testo2);
}

.inverti .btn--stroke:hover, .inverti button.btn--stroke:hover  {
	background: var(--testo2) !important;
	border: 0.2rem solid var(--testo2) !important;
	color: var(--testo);
}
.inverti blockquote {
	  border-color: var(--testo2);
}


.inverti .pull-quote blockquote {
  background-color: rgba(60,60,60,0.7);
}

.inverti a {
	color: var(--link2);
}

.inverti a:hover {
	border-color: var(--link2);
}

.navts a:hover , nav a:hover  { border-color:transparent !important; }

.inverti .s-footer {
    color: rgba(255, 255, 255, 0.3);
}


.inverti .masonry .entry__text {
    background-color: var(--bgB2);
	color: var(--testoC2);

}

.inverti .format-quote .entry__thumb,
.inverti .format-link .entry__thumb {
  background: var(--bgB2);
}

.inverti .masonry .entry__title a {
    color: var(--testo2);
}

/* ANNULLA l'inversione dei colori quando c'è un DIV sfondo chiaro in un documento con sfondo scuro */

.inverti .sfondo:not(.inverti) {
  color: var(--testo);
}


.inverti .sfondo:not(.inverti) h1, .inverti .sfondo:not(.inverti) h2, .inverti .sfondo:not(.inverti) h3, .inverti .sfondo:not(.inverti) h4, .inverti .sfondo:not(.inverti) blockquote p, .inverti .sfondo:not(.inverti) th, .inverti .sfondo:not(.inverti) .btn--stroke, .inverti .sfondo:not(.inverti) button.btn--stroke  {
	color: var(--testo);
	border-color: var(--testo);
}

.inverti .sfondo:not(.inverti) .btn--stroke:hover, .inverti .sfondo:not(.inverti) button.btn--stroke:hover  {
	background: var(--testo) !important;
	border: 0.2rem solid var(--testo) !important;
	color: var(--testo2);
}

.inverti .sfondo:not(.inverti) blockquote  {
	  border-color: var(--testo);
}


.inverti .sfondo:not(.inverti) .pull-quote blockquote {
  background-color: rgba(220,220,220,0.7);
}

.inverti .sfondo:not(.inverti) a {
	color: var(--link);
}

.inverti .sfondo:not(.inverti) a:hover {
	border-color: var(--link);
}


/* ===================================================================
 * # MENU' VERTICALE a SCOMPARSA
 * 
 * ------------------------------------------------------------------- */

.menusx-toggle {
	display:none;
	}

:root {
	--contpadleft:330px; 
	--contpadright:100px; 
	--contmaxwid:2140px;
}

@media screen and (min-width:1100px) {
	.menusx-toggle {
		display:block !important; 
		position:fixed;
		left:235px;
		top:10px;	
		z-index:10;
		height: 20px;
		width: 20px;
		transform:rotate(-270deg);
		opacity: 0.2;
		transition:1s ease-in-out;
	}

	.menusx-toggle:checked {
		transform:none;
		height: 40px;
		width: 40px;
		left:10px;
	}

	.s-header, .sfondomenuvert {
		transition: 0.4s ease-in-out .15s;
	}	

	.menusx-toggle:checked ~ .s-header {
		opacity:0;
	}
	.menusx-toggle:checked + .sfondomenuvert {
		max-width:0px;
		z-index:10;
	}
}

@media screen and (min-width:1200px){	.menusx-toggle {left:255px;} }
@media screen and (min-width:1600px) {	.menusx-toggle {left:265px;} }
/* 

 */

/* ===================================================================
 * # NUOVASEZIONE
 * 
 * ------------------------------------------------------------------- */

/* 

 */



/* ===================================================================
 * # MEDIA QUERIES - MOBILE, STAMPANTI, TABLET
 * 
 * ------------------------------------------------------------------- */


@media screen and (max-width:1600px) {
	.testata h1 {
		font-size: 4em;
	}
	
	.confoto .testata h1 {
		font-size: 2.5em;
	}

}

/* ------------------------------------------------------------------- 
 * ## medium screen devices
 * ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
	
	.testata a {font-size:1em; background-size: 60%;}
	
	.btn, button, input[type="submit"], input[type="reset"], input[type="button"] {
		letter-spacing: 0.2rem;
	}

	.testata h1 {
		font-size:3em;
	}
		
	.confoto .testata h1 {
		font-size: 2.5em;
	}

	.header__logo img {
		width: 50%;
		height: auto;
	}

	.solomobile {
		display:block !important;
	}
	
	.nomobile{
		display:none!important;
	}


}

@media screen and (max-width:1100px) {

.s-header {
	padding-top:0rem;
}


.s-content {
	padding-top:0em !important;
	}

	.confoto .testata {
		margin-top: -5em;
	}
	.convideo:not(.fullscreen) .media-wrap {
		margin-top: -4.5em;
	}


	.header__menu-toggle {
		display:block !important; 
		position:fixed;
		opacity:0.6;
		transition:.7s ease-in-out;
	}

	.header__menu-toggle:checked  {
		transform:rotate(270deg);
	}
	
	.header__nav-wrap {
		transition: 0.35s ease-in-out 0.1s;
	}
	
	.header__menu-toggle:checked + .header__nav-wrap {
		opacity: 1 !important;
		visibility: visible !important;
	}
	
	.convideo .testata {
		top: 17vw;
		width:95%;
		margin-left:1em;
		margin-right:-.5em;
	}


	.convideo .testata h1 {
		width:85%;
	}

}
/* ------------------------------------------------------------------- 
 * ## tablets
 * ------------------------------------------------------------------- */
@media screen and (max-width:800px) {

	.testata h1 {
			font-size:2.5em;
		}

	.confoto .testata h1 {
		font-size: 2em;
	}
	


}

/* ------------------------------------------------------------------- 
 * ## mobile devices 
 * ------------------------------------------------------------------- */
@media screen and (max-width:600px) {

	.testata h1 {
		font-size:2.3em;
	}

	
  div {
	  
  }

}

/* ------------------------------------------------------------------- 
 * ## small mobile devices <= 400px
 * ------------------------------------------------------------------- */
@media screen and (max-width:400px) {


}

/* ------------------------------------------------------------------- 
 * ## Printers - stampanti
 * ------------------------------------------------------------------- */
@media print {



}