/* resets */

   *, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	*:focus { outline: none; } 
   html, body { height: 100%; }
   body { line-height: 1.5; }   
	body > footer { position: sticky; top: 100vh; }
   table { border-collapse: collapse; }
	img, picture, video, canvas, svg { display: block; max-width: 100%; }
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
	p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
   input, button, textarea, select { font: inherit; }
	textarea { white-space: revert; }
	
	/* fonts */
	
	@font-face { font-family: 'hk'; src: url('fonts/hk300.woff2') format('woff2'); font-weight: 300; font-style: regular; }
	@font-face { font-family: 'hk'; src: url('fonts/hk300i.woff2') format('woff2'); font-weight: 300; font-style: italic; }
	@font-face { font-family: 'hk'; src: url('fonts/hk400.woff2') format('woff2'); font-weight: 400; font-style: regular; }
	@font-face { font-family: 'hk'; src: url('fonts/hk400i.woff2') format('woff2'); font-weight: 400; font-style: italic; }
	@font-face { font-family: 'hk'; src: url('fonts/hk600.woff2') format('woff2'); font-weight: 600; font-style: regular; }
	
	/* structure */
	
	body { text-align: center; background-color: #014f8f; font: 300 20px/1.4 'hk', sans-serif; color: rgba(0,0,0,0.75); }
	.frame { padding: 0 70px; max-width: 1600px; margin: 0 auto; text-align: left; }
	.main.frame { padding-bottom: 70px; background-color: #FFFFFF;  }
	.hero { width: 100%; height: auto;  }
	.hero, .orgs, p, h5, .cells { margin-bottom: 40px; }
	b { font-weight: 600; }
	
	h4 { font-weight: 600; font-size: 20px; margin-bottom: 5px; color: #000000; }
	h5 
	{ 
		text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #eb58b3; 
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0% , rgba(0,0,0,0) 45%, rgba(0,0,0,0.3) 46%, rgba(0,0,0,0.3) 51%, rgba(0,0,0,0) 52%);
	}
	h5 span { display: inline-block; background-color: #FFFFFF; padding: 0 20px; }
	.info { font-size: 18px; font-weight: 300; color: rgba(0,0,0,0.5); }
	p.credit { font-size: 16px; text-align: center; }
	.centered { text-align: center; }
	
	/* sponsor orgs */
	
	.orgs { display: flex; gap: 50px; align-items: center; justify-content: center; }
	.orgs a { width: calc(33.333% - 33px); max-width: 160px; }
	.orgs img { width: 100%; height: auto; }
	
	/* cells */
	
	.cells { display: flex; flex-wrap: wrap; gap: 50px; }
	.cell { width: calc(25% - 38px); line-height: 1.2; cursor: pointer; position: relative; transition: top 0.25s; top: 0; }
	.cell .img { aspect-ratio: 1.5; background-size: contain; background-position: left bottom; 
		background-repeat: no-repeat; margin-bottom: 10px; }
	.cell .title { font-size: 18px; font-weight: 400; color: #000000; margin-bottom: 5px; }
	.cell h4 { color: #0488d2; text-decoration: underline; margin-bottom: 5px; }
	.cell:hover { position: relative; top: -10px; transition: top 0.25s;  }
	.cell:hover h4 { color: #eb58b3; }
	
	/* restaurants */
	
	.restos { display: flex; flex-wrap: wrap; gap: 50px; }
	.resto { width: calc(50% - 25px); }
	.resto .info { font-weight: 400; color: #000000; margin-bottom: 10px; padding-left: 10px; border-left: 8px solid rgba(0,0,0,0.25); }
	.resto p { margin-bottom: 0; }
	.resto h4 { margin-bottom: 10px; }
	
	/* modal */
	
	#modal 
	{ 
		position: fixed; top: 102vh; left: 0; right: 0; height: 100vh; background-color: rgba(2,35,106,0.98); 
		z-index: 10; color: #FFFFFF; opacity: 0; transition: all 0.3s ease-in; overflow: scroll;
	}
	#modal.active { opacity: 1; top: 0; }
	#modal .close 
	{ 
		position: fixed; top: 15px; right: 15px; width: 40px; height: 40px; 
		background: transparent url('images/icon-x.svg') center center no-repeat;
		background-size: contain; opacity: 0.75; cursor: pointer; 
	}
	#modal .close:hover { opacity: 1; }
	#modal .frame { padding-top: 75px; padding-bottom: 75px; }
	#modal .info { font-weight: 400px; color: #FFFFFF; font-size: 20px; margin: 30px 0; padding-left: 10px; border-left: 8px solid rgba(255,255,255,0.3); }
	#modal p { margin: 30px 0; font-weight: 300; color: rgba(255,255,255,0.7); }
	#modal b { color: #FFFFFF; font-weight: 600; }
	#modal h3 { font-weight: 600; font-size: 26px; margin-bottom: 5px; color: #FFFFFF; }
	#modal h3.title { font-weight: 300; }
	#modal .img { aspect-ratio: 1.5; height: 20vh; background-size: contain; background-position: left bottom; 
		background-repeat: no-repeat; margin-bottom: 30px; }
	#modal .back 
	{ 
		color: #18a3f2; font-weight: 600; display: block; margin-bottom: 30px; padding-left: 30px;
		background: transparent url('images/icon-left.svg') left center no-repeat; background-size: 24px auto; 
		cursor: pointer;
	}
	#modal .back:hover { color: #eb58b3; }
		
	/* links and buttons */
	
	a { color: #0488d2; }
	a:hover { color: #eb58b3; }
	a.btn 
	{ 
		text-decoration: none; display: inline-block; color: #FFFFFF; background-color: #0488d2; 
		font-size: 18px; line-height: 1; padding: 7px 12px 4px 12px; font-weight: 600; letter-spacing: 1px;
		text-transform: uppercase;
	}
	a.btn:hover { color: #FFFFFF; background-color: #eb58b3; }
	
	.descriptions { display: none; }
	  
   /* breakpoints */
	
	@media screen and (max-width: 1200px)
   {
		.cell { width: calc(33.333% - 34px); }
   }  
   
   @media screen and (max-width: 900px)
   {
		.cells { gap: 30px; }
		.cell { width: calc(33.333% - 20px); }
		.frame { padding-left: 30px; padding-right: 30px; }
		.restos { gap: 30px; }
		.resto { width: 100%; }
   }  

   @media screen and (max-width: 600px)
   {
		.cell { width: calc(50% - 15px); }
		.frame { padding-left: 30px; padding-right: 30px; }
		h5 { letter-spacing: 0; background: none; }
		h5 span { padding: 0; }
   }  
	
   /* print */

   @media print
   {

   }