html							{ scroll-behavior:smooth; }
body							{ margin: 0; padding: 0; }
html, body, #map				{ height: 100%; }
html,body						{ color:#666; font:15px/24px sans-serif; height:100%; margin:0; padding:0; }
a,a:hover,a *, a:hover *		{ transition:all 0.3s ease; }
h1.title						{ margin:70px auto 0 auto; text-align:center; width:100%; }
h1.title a						{ background:url(/_/cabo-maps.svg) no-repeat center center; display:inline-block; text-indent:-9999px; width:82px; height:75px; }
h2								{ -webkit-text-fill-color:transparent; -moz-text-fill-color:transparent; background-clip:text; -webkit-background-clip:text; -moz-background-clip:text;
								  background-color:#5a5; background-image:linear-gradient(30deg,#5a5,#7af); background-size:100%; display:inline-block; margin:20px 0 5px 0; }
p,ol,ul							{ margin-bottom:20px; }
section							{ line-height:25px; margin:0 auto; padding:30px 30px 0px 30px; width:90%; max-width:550px; }
section img.pic					{ border-radius:7px; display:inline-block; margin:5px auto 0 auto; width:95%; height:auto; }
section p						{ width:95%; }
#map							{ background:#7ac; height:50%; transition:all 0.3s ease; }
#features						{ font-family:sans-serif; height:50% !important; overflow-y:scroll; overflow-x:hidden !important; }
#logo							{ background:url(/_/cabo-maps.svg) no-repeat left top; width:66px; height:58px; position:fixed; top:10px; left:50px; text-indent:-9999px; z-index:0; }
.intro b						{ color:#5F79B6; }
.logo							{ display:block; margin:80px auto; }
.marker 						{ border-radius:50%; background-size:cover; cursor:pointer; transition:0.05s width ease, 0.05s height ease; }
.marker.xl						{ width:45px !important; height:45px !important; transition:0.05s width ease, 0.05s height ease; z-index:1; }
.pic							{ margin:0 auto; width:90%; max-width:550px; }
.pic img						{ border-radius:5px; display:inline-block; width:98%; height:auto; }
.entered						{ background:white; box-shadow:0px 5px 5px rgba(0,0,0,0.25); }
.maplibregl-ctrl-compass		{ display:none !important; }
.maplibregl-popup 				{ max-width:200px; z-index:10; }
.maplibregl-popup-close-button	{ display:none; }
.maplibregl-popup-content		{ border-radius:6px; padding:0 0 15px 0; text-align:center; }
.maplibregl-popup-content a		{ border:none !important; outline:none !important; text-decoration:none !important; }
.maplibregl-popup-content a:focus { border:none !important; }
.maplibregl-popup-content a *	{ border:none !important; outline:none !important; text-decoration:none !important; }
.maplibregl-popup-content h3	{ color:#555; font:bold 12px/14px sans-serif; margin:8px 0 0 0; padding:8px 15px 0 15px; }
.maplibregl-popup-content img	{ border-radius:6px 6px 0 0 !important; margin-bottom:-8px; }
.maplibregl-popup-content p		{ color:#555; font:12px/14px sans-serif; margin:0; padding:0 15px; }
footer.copyright				{ color:gray; font:12px sans-serif; margin:40px 0; text-align:center; text-transform:uppercase; }
footer.copyright a				{ color:gray; text-decoration:none; }
footer.copyright a:hover		{ color:blue; }

/* - - search - - */

.loupe							{ background:white url(_/ui/loupe.svg) no-repeat center center; border-radius:4px; box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 0px 2px; cursor:pointer; position:absolute; top:117px; left:10px; width:29px; height:29px; z-index:1; }
.search-container				{ position:absolute; top:111px; left:51px; z-index:1; width:240px; background:white; border-radius:4px; box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 0px 2px; visibility:hidden; }
.search-container.show			{ visibility:visible; }
.search-box						{ width:100%; padding:12px 16px 13px 16px; border:none; border-radius:8px; font-size:14px; outline:none; box-sizing:border-box; }
.search-results					{ position:absolute; top:100%; left:0; right:0; background:white; border-radius:0 0 8px 8px; box-shadow:0 4px 6px rgba(0,0,0,0.1); max-height:200px; overflow-y:auto; display:none; }
.search-result-item				{ padding:10px 16px; cursor:pointer; transition:background-color 0.2s; }
.search-result-item:hover		{ background-color:#f5f5f5; }
.search-container.active .search-results { display:block; }
.show							{ visibility:visible; }

/* - - view transitions - - */

@view-transition { navigation: auto; }

#map	{ view-transition-name: mapper; }

/* - - media queries - - */

@media only screen and (min-width:1024px) {
	#map						{ width:calc(100vw - 400px); height:100%; }
	#features					{ width:400px; height:100% !important; padding-left:10px; position:absolute; top:0; right:0; }
}

@media (min-width:768px) and (max-width:1023px) {
	#map						{ width:calc(100vw - 320px); height:100%; }
	#features					{ width:320px; height:100% !important; padding-left:10px; position:absolute; top:0; right:0; }
}

@media only screen and (max-width:767px) {
	#features   				{ height:25% !important; transition:all 1s ease; width:100%; }
	#features.tall				{ height:65% !important; transition:all 1s ease; }
	#map						{ height:75%; transition:all 1s ease; width:100%; }
	#map.short					{ height:35%; transition:all 1s ease; }
    h1.title					{ display:none; }
	#logo						{ position:absolute; left:5px; top:calc( 75% - 55px ); transition:all 1s ease; width:55px; height:50px; z-index:100; }
	#logo.short					{ left:calc( 50vw - 33px ); top:calc( 35% - 80px ); transition:all 1s ease; width:88px; height:80px; }
	.search-container			{ top:10px; }

}