.map-box, #map-canvas { width: 100%; height: 19.6875rem; margin-top: 0.625rem; margin-bottom: 0.9375rem; }

@media only screen and (min-width: 41.75em) { .map-box, #map-canvas { height: 19.0625rem; } }

.map-box img, #map-canvas img { max-width: none; }

@media only screen and (min-width: 41.75em) { .directions { padding-left: 1.5rem; } }

#map-wrapper { position: relative; }

@media only screen and (min-width: 41.75em) { #map-wrapper { box-sizing: content-box; height: 525px; border: 5px solid #ccc; } }

#map-wrapper * { box-sizing: border-box; }

@media only screen and (max-width: 41.6875em) { #map-wrapper .MapContainer { padding-top: 60px; } }

@media only screen and (min-width: 41.75em) { #map-wrapper .MapContainer { width: 65%; height: 525px; border-left: 5px solid #ccc; float: right; } }

@media only screen and (min-width: 64.0625em) { #map-wrapper .MapContainer { width: 71%; } }

#map-wrapper .MapContainer #mapDiv { width: 99.9%; height: 455px; }

@media only screen and (min-width: 41.75em) { #map-wrapper .MapContainer #mapDiv { height: 525px; } }

#map-wrapper .MapContainer #mapDiv .gmnoprint img { max-width: none; }

#map-wrapper .MapContainer #mapDiv .pin-marker { background: url("../img/map/pin.png") no-repeat scroll 0 0 transparent; cursor: pointer; height: 40px; width: 32px; background-size: 34px auto; }
#map-wrapper .MapContainer #mapDiv .marker-cat-hotel { background: url("../img/map/hotel.png") no-repeat scroll 0 0 transparent; height: 39px; width: 45px; }


#map-wrapper .MapContainer #mapDiv .marker-cat-hotel .pin-label { display: none; }

#map-wrapper .MapContainer #mapDiv .pin-label { color: #fff; font-size: 14px; font-weight: bold; height: 100%; line-height: 30px; text-align: center; width: 100%; }

@media only screen and (max-width: 41.6875em) { #map-wrapper #category-wrapper { overflow: hidden; position: absolute; top: 60px; width: 100%; background: #fff; max-height: 0; transition-property: all; transition-duration: .25s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); }
  #map-wrapper #category-wrapper.active { max-height: 455px; height: 455px; overflow-y: auto; } }

@media only screen and (min-width: 41.75em) { #map-wrapper #category-wrapper { display: block; width: 35%; overflow-y: auto; overflow-x: hidden; height: 82.5%; } }

@media only screen and (min-width: 64.0625em) { #map-wrapper #category-wrapper { width: 29%; } }

@media only screen and (min-width: 41.75em) { #map-wrapper #category-wrapper #categories { padding-top: 0; margin: 0 5px; } }

#map-wrapper #category-wrapper #categories .cat-link { display: block; margin-bottom: 5px; height: 45px; background: #fcbe60; color: #000; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 15px; line-height: 45px; font-weight: bold; }

@media only screen and (min-width: 41.75em) { #map-wrapper #category-wrapper #categories .cat-link { height: auto; line-height: normal; min-height: 45px; padding-bottom: 16px; padding-right: 25px; padding-top: 17px; position: relative; } }

#map-wrapper #category-wrapper #categories .cat-link:after { content: "\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; font-family: FontAwesome; position: absolute; right: 0; }

@media only screen and (min-width: 41.75em) { #map-wrapper #category-wrapper #categories .cat-link:after { line-height: 45px; margin-top: -23px; top: 50%; } }

#map-wrapper #category-wrapper #categories .on .cat-link:after { content: "\f077"; }

#map-wrapper #category-wrapper #categories .point-list { display: none; list-style: none; margin-left: 0; }

#map-wrapper #category-wrapper #categories .point-list li { overflow: hidden; margin-bottom: 10px; }

#map-wrapper #category-wrapper #categories .point-list li a { color: #000; display: block; padding-left: 10px; }

#map-wrapper #category-wrapper #categories .point-list li a.active { color: #9c5e02; }

#map-wrapper #category-wrapper #categories .point-list li a.active span { color: #000; }

#map-wrapper #category-wrapper #categories .point-list li a span.list-pin { float: left; text-align: center; display: inline-block; margin-right: 10px; height: 40px; width: 33px; line-height: 31px; background: url("../img/map/pin.png") no-repeat scroll 0 0 transparent; background-size: 34px auto; }

#map-wrapper #category-wrapper #categories .point-list li a em { display: block; overflow: hidden; width: auto; font-style: normal; }

#map-wrapper .cat-menu { display: none; height: 60px; width: 100%; background: #ff9900; color: #000; text-decoration: none; text-transform: uppercase; text-align: center; font-size: 14px; line-height: 60px; font-weight: bold; position: absolute; top: 0; padding-right: 15px; }

@media only screen and (max-width: 41.6875em) { #map-wrapper .cat-menu { display: block; } }

#map-wrapper .cat-menu:after { content: "\f078"; display: inline-block; position: absolute; right: 0; padding-left: 10px; padding-right: 10px; font-family: FontAwesome; }

#map-wrapper .cat-menu.active:after { content: "\f077"; }

#map-wrapper .map-logo { display: none; width: 29%; margin: 15px 0 25px; text-align: center; }

@media only screen and (min-width: 41.75em) { #map-wrapper .map-logo { display: block; width: 35%; } }

@media only screen and (min-width: 64.0625em) { #map-wrapper .map-logo { width: 29%; } }

#map-wrapper .map-logo .logo { display: block; margin: 0 auto; width: 100px; height: 40px; line-height: 40px; color: #fff; background: #276fd4; text-align: center; text-transform: uppercase; }

#map-wrapper.type-pois .cat-link { display: none !important; }

#map-wrapper.type-pois #category-wrapper #categories { padding-top: 15px; }

@media only screen and (max-width: 41.6875em) { .infoBox { width: 200px !important; } }

.infoBox .close-box { position: absolute; right: -17px; top: -17px; height: 25px; width: 25px; border-radius: 50%; background: #000; border: 2px solid #fff; color: #fff; text-align: center; cursor: pointer; }

.infoBox .close-box:before { content: "\00D7"; font-size: 15px; font-family: Verdana; width: 25px; line-height: 20px; font-weight: bold; }

.infoBox .close-box .close-elem { content: "X"; font-size: 15px; }

.infoBox .infoWindowContent { background: #fff; border: 5px solid #f6b26b; float: left; margin: 0em 0 3em 15px; padding: 20px; position: relative; width: 100%; font-size: 13px; }



@media only screen and (min-width: 64.0625em) { .infoBox .infoWindowContent { width: 315px; } }

.infoBox .infoWindowContent:before { border-color: transparent #f6b26b; border-style: solid; border-width: 20px 23px 20px 0; bottom: auto; content: ""; display: block; left: -23px; position: absolute; top: 18px; width: 0; }

.infoBox .infoWindowContent:after { border-color: transparent #f6b26b; border-style: solid; border-width: 15px 17px 15px 0; bottom: auto; content: ""; display: block; left: -17px; position: absolute; top: 20px; width: 0; }

.infoBox .infoWindowContent h3 { font-size: 1.2em; font-weight: bold; }

.infoBox .infoWindowContent .description p { font-size: 1em; }

.infoBox .infoWindowContent .inset img { width: 100%; }

@media only screen and (max-width: 41.6875em) { .infoBox .infoWindowContent { padding: 15px; }
  .infoWindow .inset { display: none; }
  .infoWindow .description { max-height: 275px; overflow-y: auto; } }

@media only screen and (min-width: 41.75em) and (max-width: 64em) { ::-webkit-scrollbar { width: 8px; }
  /* Track */
  ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; }
  /* Handle */
  ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }
  ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.4); } }


.infoWindowContent h4,
.infoWindowContent p {
	color: #000 !important;
}

.blue-hotel-styles #map-wrapper #category-wrapper #categories .point-list li a span.list-pin { background-image: url("/images/map/resorts/bluehotel/pushpin.gif") }
.blue-hotel-styles #map-wrapper .MapContainer #mapDiv .pin-marker { background-image: url("/images/map/resorts/bluehotel/pushpin.gif") }
.blue-hotel-styles #map-wrapper .MapContainer #mapDiv .marker-cat-hotel { background-image: url("/images/map/resorts/bluehotel/house.gif") }
.blue-hotel-styles .infoBox .infoWindowContent { border-color: #006585; }
.blue-hotel-styles .infoBox .infoWindowContent:before { border-color: transparent #006585;  }
.blue-hotel-styles .infoBox .infoWindowContent:after { border-color: transparent #006585; }

.mutiny-styles #map-wrapper #category-wrapper #categories .point-list li a span.list-pin { background-image: url("/images/map/resorts/mutiny/pushpin.gif") }
.mutiny-styles #map-wrapper .MapContainer #mapDiv .pin-marker { background-image: url("/images/map/resorts/mutiny/pushpin.gif") }
.mutiny-styles #map-wrapper .MapContainer #mapDiv .marker-cat-hotel { background-image: url("/images/map/resorts/mutiny/house.gif") }
.mutiny-styles .infoBox .infoWindowContent { border-color: #336462; }
.mutiny-styles .infoBox .infoWindowContent:before { border-color: transparent #336462;  }
.mutiny-styles .infoBox .infoWindowContent:after { border-color: transparent #336462; }


.ocean-pointe-styles #map-wrapper #category-wrapper #categories .point-list li a span.list-pin { background-image: url("/images/map/resorts/oceanpointe/pushpin.gif") }
.ocean-pointe-styles #map-wrapper .MapContainer #mapDiv .pin-marker { background-image: url("/images/map/resorts/oceanpointe/pushpin.gif") }
.ocean-pointe-styles #map-wrapper .MapContainer #mapDiv .marker-cat-hotel { background-image: url("/images/map/resorts/oceanpointe/house.gif") }
.ocean-pointe-styles .infoBox .infoWindowContent { border-color: #006585; }
.ocean-pointe-styles .infoBox .infoWindowContent:before { border-color: transparent #006585;  }
.ocean-pointe-styles .infoBox .infoWindowContent:after { border-color: transparent #006585; }

.sailport-styles #map-wrapper #category-wrapper #categories .point-list li a span.list-pin { background-image: url("/images/map/resorts/sailport/pushpin.gif") }
.sailport-styles #map-wrapper .MapContainer #mapDiv .pin-marker { background-image: url("/images/map/resorts/sailport/pushpin.gif") }
.sailport-styles #map-wrapper .MapContainer #mapDiv .marker-cat-hotel { background-image: url("/images/map/resorts/sailport/house.gif") }
.sailport-styles .infoBox .infoWindowContent { border-color: #193f6c; }
.sailport-styles .infoBox .infoWindowContent:before { border-color: transparent #193f6c;  }
.sailport-styles .infoBox .infoWindowContent:after { border-color: transparent #193f6c; }

.sunset-styles #map-wrapper #category-wrapper #categories .point-list li a span.list-pin { background-image: url("/images/map/resorts/sunset/pushpin.gif") }
.sunset-styles #map-wrapper .MapContainer #mapDiv .pin-marker { background-image: url("/images/map/resorts/sunset/pushpin.gif") }
.sunset-styles #map-wrapper .MapContainer #mapDiv .marker-cat-hotel { background-image: url("/images/map/resorts/sunset/house.gif") }
.sunset-styles .infoBox .infoWindowContent { border-color: #734629; }
.sunset-styles .infoBox .infoWindowContent:before { border-color: transparent #734629;  }
.sunset-styles .infoBox .infoWindowContent:after { border-color: transparent #734629; }