html							{ scroll-behavior:smooth; }
body							{ margin: 0; padding: 0; }
html, body						{ 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 30px 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; font-size:23px; font-weight:bold; margin:25px 0 0 0; }
h2.name							{ margin: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:100%; height:auto; }
section h2 + img				{ margin-top:20px !important; }
section p						{ width:95%; }
#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; }
#map							{ background:#7ac; height:600px; }
#side							{ display:grid; height:100vh; place-items:center; }
.call							{ display:inline-block; background:#5F79B6; color:white; margin-top:8px; padding:10px 20px; border-radius:50px; }
.call:hover						{ background:#55C; color:white; text-decoration:none; }
.circle							{ display:inline-block; background:#5F79B6; border-radius:50%; color:white; padding:6px 5px 5px 7px; }
.circle:hover					{ background:#4285E9; color:white; }
.icons							{ text-align:center; }
.icon							{ display:inline-block; position:relative; width:40px; height:40px; }
.icon img						{ display:inline-block; width:32px; height:32px; transform:translateY(-19px); }
.icons input[type="radio"]:before { border-radius:3px; background:#fff; content:''; display:block; position:absolute; left:0; top:0; width:40px; height:40px; }
.icons input[type="radio"]:checked:before { background:#dfdfdf; }

.intro							{ margin-top: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; display:block; margin-bottom:-2px; }
.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; }

/* - - media queries - - */

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

	#map						{ height:50%; transition:all 1s ease; width:100%; }
    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; }

}

@media only screen and (min-width:768px) {

	#map						{ height:100vh; width:50vw; float:left; }

}