@charset "UTF-8";
/* CSS Document */


/******************/
/* SPECIAL FONTS */
/******************/




/******************/
/* GENERIC STYLES */
/******************/

/* elementi standard */
* { box-sizing:border-box; }
b, strong { font-weight:bold; }
i, em { font-style:italic; }
a { text-decoration:none; color:#e73f1a; }
	a:hover { text-decoration:underline; }
ol li { list-style-type:decimal; }
.cursor { cursor:pointer; }
.rounded { border-radius: 10px; }
.block { display:block; }

/* posizionamenti */		
.clear { clear:both; }
.left { float: left; }
.right { float: right; }
.aligncenter { text-align:center; }
.alignright { text-align:right; }
.alignleft { text-align:left; }
.alignmiddle { align-items:center; }
.border_zero { border:0 !important; }
.fullwidth { width:100%; }

/* spaziature */
.vspaced { padding-top:50px; padding-bottom:50px; }
.hspaced { padding-left:10%; padding-right:10%; }
.topspaced { padding-top:60px; }
.bottomspaced { padding-bottom:60px; }

/* colori */
.bgwhite{ background:#fff; }
.bgblack{ background:#000; color:#fff; }
.bgblack a { color:#fff!important; }

/* display */
.mobile { display:none; }
.desktop { display:block; }

/* colonne */
.flexcontainer { display:flex; justify-content:space-between; flex-flow:row wrap; }
.cols { display:flex; justify-content:space-between; flex-flow: row nowrap; align-items:flex-start; }
	.two>* { width:48%; }
	.split-two>* { width:50%; }
	.three>* { width:32%; }
		.three .main { width:58%; }
	.split-three { width:33.3%; }
	.four>* { width:22%; }
	.center { justify-content:center; }

/* buttons */
main a.button, .bgblack a.button { display:inline-block; background:#e5201c; color:#eed97c!important; border:5px solid #eed97c; font-size:24px; font-weight:bold; margin-top:0;  min-width:350px; text-align:center; cursor: pointer;  white-space: normal; border-radius:50px; padding:25px 50px 25px 50px!important; transition: all 0.3s ease; }
	main a.button:hover, .bgblack a.button:hover { color:#e5201c!important; background-color:#eed97c; text-decoration: none; }


/********************/
/* SPECIAL ELEMENTS */
/********************/

/* gallery */
/* 1. GRIGLIA MINIATURE */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 40px auto; }
.gallery-grid a img { width: 100%; height: 250px; object-fit: cover; border: 1px solid #333; transition: border 0.3s; }
.gallery-grid a:hover img { opacity:0.8 }

/* 2. IL LIGHTBOX */
.lightbox { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); display: none; align-items: center; justify-content: center; }
.lightbox:target { display: flex; }
.lightbox-content { position: relative; max-width: 90%; max-height: 80%; }
.lightbox img { max-width: 100%; max-height: 80vh; border: 2px solid #d4af37; box-shadow: 0 0 30px rgba(212, 175, 55, 0.2); }

/* 3. NAVIGAZIONE INTERNA */
.prev, .next, .close { position: absolute; color: #d4af37; font-size: 30px; text-decoration: none; background: rgba(0,0,0,0.5); padding: 10px 15px; border-radius: 50%; line-height: 1; }
.prev:hover, .next:hover, .close:hover { text-decoration:none; color:#fff; } 
	.close { top: -50px; right: -15px;  }
	.prev { left: -60px; top: 50%; transform: translateY(-50%); }
	.next { right: -60px; top: 50%; transform: translateY(-50%); }


/******************************/
/*    STILI PER IL LAYOUT    */
/****************************/

.mobile { display:none!important; }
.desktop { display:block!important; }

body {color:#666; font-family: 'Open Sans', sans-serif; margin:0; }
	body .background { position:fixed; top:0; z-index:-10; }
		body .background img { width:100%; }

.berkshire { font-family: "Berkshire Swash", serif; font-weight: 400; font-style: normal; }
.decoline { line-height:0; margin: 0; display:block; width:100%; }
		
header { position: fixed; width: 100%; top: 0; left: 0; z-index: 100; box-shadow: 5px 5px 13px -2px #bbb; }
	header .headwrapper { display:flex; justify-content:space-between; align-items:center;  padding: 10px 5%; width:100%; background-color:#fff; }
		header .logo { margin:0; padding:0; position:relative; display:flex; justify-content:flex-start; align-items:center;}
			header .logo img.pittogramma { position:absolute; height:100px; margin-right:20px; top:-5px; }	
			header .logo .logotipo { display:flex; justify-content:flex-start; align-items:center; margin-left:80px; }
				header .logo .logotipo img.text { height:30px; }
				header .logo .logotipo p { margin: 0 0 0 20px; padding:0; }

		header nav #menuIcon { display:none; }
		header nav li { display:inline-block; font-size:12px; text-align:center; line-height:1.4em; color:#ccc; position:relative; font-weight:bold; text-transform: uppercase;  }
			header nav li:hover ul a { font-weight:normal; text-transform: none; }
		header .languages { padding:10px; border:1px solid #fff;  font-size: 10px; color:#fff; }
			header .languages a { display:inline-block; color:#333; margin: 0 0 0 20px; }
			header .languages img { height:20px; }					
				
main { clear:both; }
	main p, main ul li, main ol li { line-height:1.6em; }
		main p:last-of-type { margin-bottom:0!important; }

/* Titles */
main .titlewrapper { margin-bottom:50px; }
	main .titlewrapper .title { font-size:40px; font-weight:lighter; margin:0 auto 5px auto; display:inline-block; line-height:1.2em; }
	main .titlewrapper .subtitle { display:block; font-size:24px; font-style:italic; font-weight:normal; margin:0; color:#d4af37; }
main img.crown { height:30px; margin-right:10px; }

/* HOME */

/*cover*/
main .cover { position:relative; text-align:center; height:98vh; overflow: hidden; display:flex; align-items:center; margin-top:50px; }
	main .deco { position:absolute; bottom:15%; z-index:2; left:15%; width:250px; }
	main .cover .scroll { position:absolute; top:55%; transform: translateY(-50%); z-index:10; right:10%; text-align:right; }
		main .scroll p { color:#fff; font-size:8vw; font-weight:300; margin-bottom:20px; padding-bottom:0; line-height:1em; margin:0; }
		main .scroll img { height:40px; }
	main .cover img.bg { width:100%; }	

main .cover.inner { height:350px; }
	main .cover .scroll { position:absolute; top:50%; right:10%; transform: translateY(-50%); z-index:10; text-align:center; }
	main .cover.inner .scroll { transform:translateX(-50%); left:50%;  }

/* intro */
main .intro { color:#eed97c; text-align:center; background: #e5201c;}
	main .intro h1, main .intro p { color:#eed97c; text-transform: none; font-size:30px; margin:0; padding:0; font-weight:normal; }
	main .intro p.author { font-size:14px; margin-top:20px; }
	main .intro a { color:#eed97c; }

/* home blocks */
main .issue .pic img { width:100%; }


/* PAGES */

/*cats*/
main .cats { display:flex; justify-content: space-between; }
	main .cats article { width:30%; } 
		main .cats article .pic img { width:100%; } 
main .cats article .titlewrapper { margin:0 0 5px 0; }
	main .cats article .title { font-size:28px; font-weight:lighter; margin:0 auto 5px auto; line-height:1.2em; width:100%; }
	main .cats article .subtitle { display:block; font-size:18px; font-style:italic; font-weight:normal; margin:0; color:#d4af37; }
	main .cats article p { margin:0; padding:0; font-size:12px; }

main .breadcrumbs { font-size:12px; }

/*text */	
main .text p { margin-bottom:15px; line-height:1.6em; font-size:18px; }
main .text section, main .text article { margin-bottom:30px; }
	main .text section h2, main .text article h2 { font-size:16px; } 

/* premi */
main table.awards { width:100%; }
	main table.awards tr td { border-bottom:1px solid #f0f0f0; padding:10px;  }
		main table.awards tr td.year { color:#aaa; } 
		main table.awards tr td.cat { font-weight:bold; } 


/* FOOTER*/

/* logos */
main .logos { display:flex; justify-content: center; }
	main .logos img { height:50px; margin:0 20px; }

footer { clear:both; text-align:center; font-size:12px; background:#ddd; padding:3%; }
	footer .social img { height:40px; filter:invert(1); margin:5px; }
	footer h2 { font-size:12px; font-weight:normal; }
		footer h2 strong { font-size:14px; }



/****************************/
/*    STILI PER I MAXI SCHERMI    */
/****************************/
@media only screen and (min-width: 1282px) { }

/****************************/
/*    STILI PER I DESKTOP   */
/****************************/
@media only screen and (min-width: 1025px) { 
	
/*navigazione*/
	header nav #menuIcon { display:none; }
	nav { font-size: 10px; text-transform:uppercase; letter-spacing: 0.2em; }
		nav ul { background:url(../img/backgrounds/default/bg_menu.png) bottom repeat-x; margin:0; padding:0; }
			nav li a, nav li .a { display:block; padding:5px 0; margin:0 20px; color: #666;  }
			nav li strong { text-transform:uppercase; font-size:12px; color:#666; font-style:normal; }
			nav li a.special { color:#e5201c; font-weight:bold;  }
			nav li a:hover, nav a.active { text-decoration:none; border-bottom:1px solid #fff; padding-bottom:4px; }
			/* subnav */
			nav li ul { display:none; }
				nav li:hover ul { display:block; position: absolute; width:200px; background:none; z-index:101; top:10px; padding-top:15px; left:0; background:transparent url(../img/submenu_arrow.png) no-repeat 40px top; }
					nav li:hover li { background:#111; width:200px; text-align:left; border:0; border-bottom:1px solid #333; }
					nav li:hover ul li strong { color:#fff; }
					nav li:hover ul a { color:#fff; margin:0; padding:10px 20px; }
						nav li:hover ul a:hover { background:#333; border:0;  }
		
}


/****************************/
/*    STILI PER I TABLET    */
/****************************/
@media only screen and (max-width: 1024px) { 
.mobile { display:block!important; }
.desktop { display:none!important; }
	
header { overflow:visible; }
	header .logo .logotipo { display:flex; flex-flow:wrap;  }
		header .logo .logotipo p { margin: 0 0 0 20px; padding:0; }

	
/* -- Slideout menu --*/ 

.menu-button,.menu-close-button{background:none;border:none;padding:0;cursor:pointer;display:block}
.menu-close-button{position:absolute;top:20px;right:20px;filter:invert(1);width:30px}

/* -- Sidebar: Base & Animation  -- */
.slideout-sidebar{position:fixed;top:0;left:0;z-index:1000;width:280px; height:100%; padding:60px 20px;background:#e5201c!important;transition:transform 0.4s ease,visibility 0.4s;transform:translateX(-100%);visibility:hidden;overflow-y:auto}
	.slideout-sidebar.is-open{transform:translateX(0);visibility:visible}

/* --- Overlay --- */
.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:999;opacity:0;visibility:hidden;transition:opacity 0.3s}
.menu-overlay.is-visible{opacity:1;visibility:visible}

/* --- Typography & Links --- */
.slideout-sidebar a,.slideout-sidebar .a{color:#fff;text-decoration:none}
.slideout-sidebar ul{list-style:none;margin:0;padding:0}
	.slideout-sidebar ul li{cursor:pointer;padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.3);color:#fff;display:block;transition:0.3s}
	.slideout-sidebar ul li:last-child{border-bottom:0}
	.slideout-sidebar ul li:hover{color:rgba(244,244,244,1)}

/* --- Submenu --- */
.slideout-sidebar ul li ul{display:none;list-style:none}
	.slideout-sidebar ul li:hover ul{display:block;text-align:right;font-size:12px;border-top:1px solid #ccc;margin-top:18px;font-style:italic}
	.slideout-sidebar ul li:hover ul li{color:#aaa;padding:8px 10px 8px 0;display:block;border-bottom:none}
	.slideout-sidebar ul li:hover ul li:last-of-type{margin-bottom:-18px}
	
	
body .cover { display:flex; overflow:hidden; justify-content: center; align-items: flex-end; background-color:#000; }	
	body .cover img.bg { height:60%; width:auto; margin-left:40%; margin-bottom:-20vw; }
	body .cover.inner img.bg { height:100%; }
	body .cover .scroll { top:15vh; transform: translateY(0);}
	body .cover .scroll p { font-size:16vw; }
	body .cover .scroll img { width:80%; height:auto; }

/* gallery */	
main .cats { flex-wrap:wrap; }
	main .cats article { width:48%; margin-bottom:50px; } 	
	main .cats article:last-of-type { margin-bottom:0; }
main .gallery article { width:28%; }	
main .gallery .modal-content img { height:auto; width:100%;  }
}



	



/******************************/
/*    STILI PER SMARTPHONE    */
/******************************/

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

.alignleft, .alignright { text-align:center; }
header .logo a { position:relative; display:flex; justify-content:flex-start; align-items:center; }
	header .logo a img.text { margin-left:0; }
	header .logo a span { margin-left:100px; display:block; }
	
main .cols { flex-flow: row wrap; }
	main .cols>*, main .three .main { width:100%; text-align:center; margin:30px 0; }
	main .split>* { width:100%; text-align:center; }
main .four>* { width:48%; }	
main .text ul li { text-align:left!important; }
body .cover .scroll { top:25vh; }
/* gallery */	
.prev { left: 10px; bottom: -60px; top: auto; } 
.next { right: 10px; bottom: -60px; top: auto; } 
}



@media only screen and (max-width: 500px) {
	main .gallery article { width:45%; margin:2% 0; }
	main .cats article { width:100%; } 
	
/* table */
main table.awards tr { display:flex; flex-direction: column; }
	main table.awards tr td.year { color:#e5201c; font-weight:bold; padding-bottom:20px; }
	main table.awards tr td.win { border-bottom:5px solid #eee; margin-bottom:20px; padding-bottom:15px; } 
}