a, a:hover, a *, a:hover *		{ transition:all .3s ease; }
body,html						{ color:rgb(100,100,100); font:15px/25px sans-serif; margin:0; height:100%; padding:0; position:relative; }
#map							{ background:#ccc; float:left; position:relative; width:calc(100% - 400px); height:100%; }
main							{ display:block; height:100%; overflow:auto; position:relative; }
main 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%; background-size: 100%; }
main h2 a						{ color:white !important; }
main > div *					{ margin:20px 30px; }
main p *, main li				{ margin:0; }
main .title						{ margin:60px auto 40px auto; text-align:center; width:100%; }
main .title a					{ background:url(/_/ui/cabo-maps-center.svg) no-repeat center center; display:inline-block; text-indent:-9999px; width:88px; height:75px; }
main img						{ border-radius:7px; display:block; margin:25px 30px; max-width:340px; width:100%; height:auto; }
main .intro						{ color:#5f79b6; font-weight:bold; }
article							{ margin:0 !important; }
footer							{ color:gray; font-size:12px; margin:0 0 30px 0; text-align:center; text-transform:uppercase; }
footer a						{ color:gray; margin:0; text-decoration:none; }
footer a:hover					{ color:#5f79b6; }
.callnow						{ display:inline-block; background:#5F79B6; color:white !important; font-size:11px; margin-right:20px; padding:4px 12px 3px 12px; border-radius:50px; text-decoration:none; }
.callnow:hover					{ background:#46A; color:white; text-decoration:none; }
.close							{ background:url(/_/ui/close.svg) no-repeat center center; border-radius:50%; position:absolute; top:20px; right:20px; width:30px; height:30px; }
.close:hover					{ cursor:pointer; }
.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; }

/* - - - search - - - */
.search							{ display:grid; place-items:center; margin:20px; position:absolute; top:0; left:0; width:calc(100% - 400px); z-index:10; }
.search-container				{ background-color:white; background-image:url(/_/ui/cabo-maps-circle.svg),url(/_/ui/search.svg); background-repeat:no-repeat,no-repeat;
								  background-position:3px 3px, calc( 100% - 15px ) 13.5px; background-size:39px, 18px; border:2px solid rgba(100,100,100,0.2); border-radius:25px;
								  display:inline-block; background-clip:padding-box; padding:10px 20px 10px 55px; min-width:280px; max-width:380px; width:calc(100% - 60px); }
.search-box						{ border:none; font-size:14px; margin-right:20px; outline:none; padding:0; width:calc(100% - 15px); }
.search-results					{ max-height:295px; 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; border-radius:5px; }
.search-results					{ display:block; }
.locations						{ margin:20px; text-align:center; position:absolute; top:60px; left:0; width:calc(100% - 400px); z-index:1; }
.locations div					{ background:rgba(120,120,200,0.8); border-radius:20px; color:white; cursor:pointer; display:inline-block; font-size:11px; padding:2px 11px 1px 11px; transition:all .3s ease; }
.locations div:hover			{ background:rgba(150,150,250,1); transition:all .3s ease; }
.locations div + div			{ margin:0 0 10px 3px; }
.locations span					{ display:none; }
.location						{ margin:0; }

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

	.close						{ display:none; }

}

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

	#map						{ width:100%; height:100%; float:none; }
	main						{ margin:0 auto; height:auto; max-width:550px; }
	main img					{ margin:40px auto; max-width:420px; }
	.more						{ background:transparent url(/_/ui/more.svg) no-repeat center center; width:88px; height:44px;
								  position:absolute; right:50%; bottom:0; scroll-margin:30px; transform:translate(44px, 0); }
	.search						{ width:calc(100% - 40px); }
	.locations					{ width:calc(100% - 40px); }

}

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

	.search						{ width:calc(100% - 80px); }
	.locations div				{ font-size:10px; padding:1px 8px 0px 8px; }

}