* {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; margin:0; padding:0; border:0; line-height: 1.3; font-weight: 400; font-size: 1.1rem; box-sizing: border-box; text-align: left; vertical-align: top; text-decoration: none; list-style-type: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; outline: none;}
html, body {height: 100%;}

#window, textarea, a, section, form, input, fieldset, label, td, th, div, header, p, h1, h2, h3, h4, h5, h6, b, details, summary, time, li, nav, button {transition-duration: 0.2s;}

html, body, header, main, form, label, fieldset, p, h1, h2, h3, h4, h5, h6, b, a, details, section {position: relative;}

b, b * {font-weight: 600;}
a {color: mediumblue; font-weight: 550;}
a:hover {color: red; border-color: red;}
code {background-color: #eee; padding: 4px 6px; border-radius: 3px 3px; color: #444;}
hr {margin: 1rem 0; border-top: 1px solid rgba(255,255,255,0.3);}

body {background-color: #ddd; overflow: hidden; background-image:url("../bg.jpg"); background-repeat: no-repeat; background-size: cover;}
small, small * {vertical-align: text-bottom; font-size: 0.9rem;}
details {background-image:none; -webkit-appearance:none;}
time[title] {border-bottom: 1px dotted rgba(0,0,0,0.3);}
details summary {cursor: pointer;-webkit-appearance:none;}
details summary::-webkit-details-marker {display:none;}


main {margin:0 auto; width: 600px;}

#entry {width: auto; padding: 4rem 2rem; min-height: 600px;}
#entry, #entry * {text-align: center;}
#entry button {font-family: 'Great Vibes', cursive; position:absolute; bottom:1rem; color:#fff; padding:2rem 2rem 2.05rem 2rem; width: calc(100% - 2rem); margin:4rem 0 0 0; border-radius: 3px 3px; font-weight: 350; font-size:3rem; border-top: 1px solid rgba(255,255,255,0.6); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); line-height: 1; background-color:blue; left:1rem; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);

background: #1488CC;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #2B32B2, #1488CC);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #2B32B2, #1488CC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



}
#entry button:hover, #entry button:focus { background: linear-gradient(#444, #222) !important;}
#entry h1 {font-family: 'Great Vibes', cursive; font-size:5rem; margin:2rem 0; text-shadow: 0 1px 3px #000; color:#fff;}
#entry h2 {color:#fff;}
#entry p {color:#fff; text-shadow: 0 1px 3px #000; font-weight: 650;}


#main {position: absolute; top:0; left:0; right:0; bottom:0; transform: scale(2); width: 600px; z-index: 99; display: none; opacity: 0; transition: all 0.5s; overflow: auto; padding:0.5rem 1rem; min-height: 700px;}

#main details.icons {display: inline-block; width:calc( (100% / 2) - (1rem / 2)); margin:0 1rem 1rem 0; background-color:red; border-radius: 5px 5px; border:1px solid #eee; border-bottom:1px solid #aaa; background: linear-gradient(180deg, rgba(160,160,160,0.1) 10%, rgba(255,255,255,0.01) 100%); }
#main details.icons:nth-of-type(2n){margin-right:0;}

#main details.icons summary {text-align: center; padding:30px 10px 0 10px; background-repeat: no-repeat; background-position: center 55px; background-size:80px 80px; position: relative;}
#main details.icons summary:before { display: block; font-size:50px;}
#main details.icon-restaurant summary:before {content:"🍽"; text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);}
#main details.icon-transportation summary:before {content:"🚎";}
#main details.icon-keys summary:before {content:"🧳";}
#main details.icon-wifi summary:before {content:"🧑🏼‍💻";}
#main details.icon-parking summary:before {content:"🅿️";}
#main details.icon-attractions summary:before {content:"🎉";}
#main details.icon-hospitals summary:before {content:"🏥";}
#main details.icon-survey summary:before {content:"📋";}
#main details.icon-info summary:before {content:"📖";}



#main.visible {display: block; transform: scale(1); opacity: 100%; background-color:#fff;}

#main details.icons section.content, #main details.icons summary section.content * {color:#fff;}
#main details.icons section.content {position: absolute; top:0; left:0; width: calc(600px - 2rem); background-color:#000; z-index: 99; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; padding:12px; border-radius: 3px 3px;}
#main details.icons:nth-of-type(2n) section.content {left:calc(-300px + 0.5rem);}


#main details.icons section.content h1 {font-family: 'Great Vibes', cursive; font-size:3rem; text-align: center; margin: 0 0 1rem 0; border-bottom:1px solid #fff; line-height: 1; padding:10px;}
#main details.icons section.content h2 {font-family: 'Georgia', serif; font-size:2rem; margin: 0 0 0.2rem 0;}
#main details.icons section.content h2:not(:first-of-type) {margin-top:1rem;}

section.card table {width: calc(100% - 2rem); margin:0 2rem 3rem 1rem; border-collapse: collapse; border-bottom:5px solid #000;}
section.card table th, section.card table td {padding:10px 0;}
section.card table th {border-bottom:3px solid #000; font-weight: 650;}
section.card table td {width:50%; border-bottom:1px solid #000; color:#222;}
section.card table td b {color:#000;}

section.card {width: 100%; z-index: 99; padding:0 1rem 100px 1rem; background-color:rgba(255,255,255,1);  height:1px; display: none; position: absolute; top:0; left:0;}
section.card table {width:100%; margin:0 0 2rem 0;}
section.card h1 {font-family: 'Great Vibes', cursive; margin: 0 0 1.8rem 0; border-bottom:3px solid #000; line-height: 1; padding:20px 50px 10px 10px; text-align: left; font-size:2rem; position: sticky; top:-1rem; left:0; z-index: 999; width: 100%; background-color:rgba(255, 255, 255, 1);}
section.card h1 small.close {position: absolute; bottom:1rem; right:0;}
section.card h1 small.close, #main details.icons section.content h1 small.close * {line-height: 1;}
section.card h1 small.close a {border:1px solid #000; color:#000; padding:5px; border-radius: 3px 3px;}
section.card h2 {font-family: 'Georgia', serif; font-size:1.7rem;}
section.card h2:not(:first-of-type) {margin-top:1rem;}

section.card .box {margin:5px 0 1rem 0; padding:0.8rem 1.1rem 1.1rem 1.1rem; background-color:#ccc; border:1px solid #ccc; border-radius: 3px 3px;}
section.card .box h2 {text-align: center; line-height: 1.1; margin:0 0 1rem 0;}

/*Miscellaneous*/
.noanim {transition-duration: 0s;}
.thr th:last-of-type, .thr td:last-of-type {text-align: right; padding-right: 10px;}
.tc {text-align: center;}
.whitebg {background-color:#fff !important; background-image: none;}
a.btn {display: inline-block; padding:1rem 2rem; text-align: center; color:#fff; background-color:darkblue; border-radius: 3px 3px;}

#main details.icons.faded {opacity: 0.3;}

/*Mobile*/
@media (max-width: 600px) 
	{
	* {font-size:1rem; line-height: 1.2;}
	body, main {width: auto !important; margin: 0; min-width: 100%; max-width: 100%;}
	#main {width: auto !important; padding-top:1rem;}
	#entry {margin:0; padding:1rem 0;  overflow-x:hidden;}
	#entry h1 {font-size:3.5rem;}
	#main details.icons {height:150px;}
	#main details.icons summary {position: absolute; bottom:35px; width: 100%; background-position:center center}
	#main details.icons summary {font-size:0.9rem;}
	#main details.icons section.content {width: calc((100% * 2) + 1rem );}
	#main details.icons:nth-of-type(2n) section.content {left: calc((-100%) - 1rem);}
	#main details.icons section.content table {width:100%; margin:0 0 2rem 0;}
	#main details.icons section.content h1 {text-align: left; padding-right:50px; margin:0 0 0.5rem 0; padding:0.4rem 0; font-size:2rem;}
	#main details.icons section.content h1 small.close {position: absolute; bottom:1rem; right:0;}
	#main details.icons section.content h1 small.close, #main details.icons section.content h1 small.close * {line-height: 1;}
	#main details.icons section.content h1 small.close a {border:1px solid #000; color:#000; padding:5px; border-radius: 3px 3px;}
	}