/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	font-family: Fira Sans, Verdana, sans-serif;
}
ul.links, ul.links li,
ul.nav, ul.nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#mobile-nav {
	display: block;
	}

#wrapper {
	font-size: .75em;
	background-color: #e5f8fe;
}
header {
	position: relative;
}
#header-logo {
	padding: 1em;
	max-width: 360px;
	margin: 0 auto;
}
#header-logo .header-logo-nav {
	position: relative;
	width: 75%;
	height: 0;
	margin: 0;
	padding: 0 0 15% 0;
	text-indent: -9999px;
}
#header-logo .header-logo-nav a#header-logo-floridakeys {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/florida-keys-logo-2.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
}
.header-logo-link,
#header-social {
	display: none;
}
#header-logo .header-logo-nav h1 {
	margin: 0;
	padding: 0;
}
#header-social ul {
	width: 10em;
	margin: 0 auto;
	font-size: 1.5em;
}
ul.social {
	display: table;
	margin: 0 auto;
}
ul.social li {
	float: left;
	display: block;
	width: 2em;
	height: 2em;
	font-size: 1em;
	line-height: 2.125em;
	margin: 0 .25em .25em;
	text-align: center;

}
#header-social ul li {
	background-color: #2173ba;
	border-radius: 5px;
}
#header-widget-tab {
	float: right;
	display: table;
	margin: 0 .5em 0 0;
	width: auto;
	max-width: 4em;

}
#header-widget-tab p {
	margin: 0;
	padding: 0;
	font-size: .875em;
	line-height: 1em;
	text-transform: uppercase;
	text-align: center;
}
#header-widget-tab p .fa {
	font-size: 1.75em;
	line-height: 1.5em;
}
#header-widget-tab p a {
	display: block;
	color: #000;
	color: #7b6f02;
	text-decoration: none;
	background-color: #f7dd04;
	padding: .25em .5em .5em;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;;
}

footer ul.social li {
	font-size: 1.5em;
	line-height: 2em;
}
#header-social ul li:nth-child(3) {
	line-height: 2.25em;
}
#header-social ul li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
}
#header-widget {
	display: none;
	background-color: #f7dd04;
}
#header-widget label {
	/* color: #fff !important; */
}
.search-widget button {
	opacity: 1 !important;
}

	#email-signup { 
		padding: 1.5em 0;
	}
	#email-signup form {
		display: table;
		margin: 0 auto;
	}
	#email-signup p.sign-up-to {
		display: block;
		font-size: 1em;
		line-height: 1em;
		text-align: center;
		margin: 0 0 .5em;
		padding: 0;
	}
	#email-signup input {
		margin: .5em;
		padding: .5em .75em .375em;
		border: 1px solid #5294cb;
		border-radius: 3px;
		font-size: 1em;
		line-height: 1.125em;
		max-width: 10em;
	}
	#email-signup input[type=submit] {
		background-color: #5294cb;
		color: #fff;
	}
	#email-signup p.privacy {
		font-size: .75em;
		line-height: 1.5em;
		text-align: center;
		margin: -.75em 0 0;
		padding: 0;
	}
	#email-signup p a:after {
		content: " ›";
	}

	ul.nav li {
		background-image: url(../img/nav-features.jpg);
	}
	ul.nav li span {

	}

	ul.nav li#nav-keylargo {
		background-image: url(../img/nav-keylargo-1.jpg);
	}
	ul.nav li#nav-keylargo a {
		background-color: rgba(91,203,43,0.33);
	}
	ul.nav li#nav-keylargo a span {
		background-color: #5bcb2b;
		background-color: rgba(91,203,43,0.66);
	}

	ul.nav li#nav-islamorada {
		background-image: url(../img/nav-islamorada-1.jpg);
	}
	ul.nav li#nav-islamorada a {
		background-color: rgba(216,0,77,0.33);
	}
	ul.nav li#nav-islamorada span {
		background-color: #d8004d;
		background-color: rgba(216,0,77,0.66);
	}

	ul.nav li#nav-marathon {
		background-image: url(../img/nav-marathon-1.jpg);
	}
	ul.nav li#nav-marathon a {
		background-color: rgba(234,141,62,0.33);
	}
	ul.nav li#nav-marathon span {
		background-color: #ea8d3e;
		background-color: rgba(234,141,62,0.66);
	}

	ul.nav li#nav-lowerkeys {
		background-image: url(../img/nav-lowerkeys-1.jpg);
	}
	ul.nav li#nav-lowerkeys a {
		background-color: rgba(50,72,159,0.33);
	}
	ul.nav li#nav-lowerkeys a span {
		background-color: #32489f;
		background-color: rgba(50,72,159,0.66);
	}

	ul.nav li#nav-keywest {
		background-image: url(../img/nav-keywest-1.jpg);
	}
	ul.nav li#nav-keywest a {
		background-color: rgba(91,203,43,0.33);
	}
	ul.nav li#nav-keywest span {
		background-color: #5bcb2b;
		background-color: rgba(91,203,43,0.66);
	}

	ul.nav li#nav-lodging {
		background-image: url(../img/nav-lodging.jpg);
	}
	ul.nav li#nav-diving {
		background-image: url(../img/nav-diving.jpg);
	}
	ul.nav li#nav-fishing {
		background-image: url(../img/nav-fishing-1.jpg);
	}
	ul.nav li#nav-thingstodo {
		background-image: url(../img/nav-webcams.jpg);
	}
	ul.nav li#nav-weddings {
		background-image: url(../img/nav-weddings.jpg);
	}
	ul.nav li#nav-getting {
		background-image: url(../img/nav-getting.jpg);
	}
	ul.nav li#nav-lgbt {
		background-image: url(../img/nav-lgbt.jpg);
	}
	ul.nav li#nav-calendar {
		background-image: url(../img/nav-calendar.jpg);
	}



	footer {
		position: relative;
		display: block;
		width: 100%;
		min-height: 200px;
		background-color: #5294cb;
		text-align: center;
		color: #fff;
		color: rgba(256,256,256,0.5);
		padding: 1em 0;
		font-size: 1.25em;
	}
	footer p, footer li {
		font-size: .75em;
		line-height: 1.25em;
		padding-left: 1em;
		padding-right: 1em;
	}
	footer p.sm {
		font-size: .625em;
		line-height: 1.25em;
	}
	footer a {
		color: rgba(256,256,256,0.75) !important;
		text-decoration: none;
			-webkit-transition: all 100ms ease-out;
			-moz-transition: all 100ms ease-out;
			-o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
	}
	footer a:hover {
		color: rgba(256,256,256,1);
	}
	footer i {
		font-weight: normal;
		font-style: normal;
		padding: 0 .25em;
	}

	#footer-logo {

	}
	#footer-logo img {
		width: 120px;
		}

	#footer-logo a {
		opacity: .75;
	}

	#footer-weather {

	}
	#footer-weather img {
		width: 120px;
		margin: 0 0 5px 0;
	}

#content {
	background-color: #fff;
}
a {
	color: #5294cb;
	text-decoration: none !important;
}
a:visited {
	color: #63a2d9;
}
a:hover,
a:active {
	color: #000;
}
p.page-img {
	max-width: 100%;
	padding: 0 !important;
	margin: 1.5em auto;
	text-align: center;
}
p.page-img img {
	max-width: 100%;
}
p.page-caption {
	font-size: 1em !important;
	line-height: 1.5em;
	margin-top: -1em;
	text-align: center;
	font-weight: 400;
}
.img-sm {
	width: auto !important;
}
.img-block {
	display: block;
	width: auto;
}
.img-block {
	font-size: .6875em;
	line-height: 1.375em;
}
.img-block img {
	width: 100%;
	height: auto;
	margin-bottom: .5em;
}
.img-left {
	float: left;
	margin: 0 1.5em .5em 0;
	max-width: 50%;
	width: 50%;
}
.img-right {
	float: right;
	margin: 0 0 .5em 1.5em;
	max-width: 50%;
	width: 50%;
}
a.expand-img,
a.photoadventure-img {
	position: relative;
	display: inline-block;
	border-bottom: 0 !important;
}
a.expand-img span,
a.photoadventure-img span {
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	color: rgba(256,256,256,0.75);
	padding: .5em;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	font-size: 18px;
	background-color: rgba(0,0,0,0.25);
}

article h1 {
	font-size: 2em;
	line-height: 1.125em;
	font-weight: 700;
	text-align: center;
	color: #cb5252;
}
article h2 {
	font-size: 1.75em;
	line-height: 1.25em;
	font-weight: 700;
	text-align: center;
	color: #222;
}
article h2.multi-listing {
	margin-top: 2em;
	padding-top: 2em;
	border-top: 1px solid #eee;
}
article .spaced li {
	margin-bottom: .75em;
}
article .spaced li:last-child {
	margin-bottom: 0;
}

ul.category-list {
	list-style: none;
}
ul.category-list li {
	font-size: 1.625em;
	line-height: 1.5em;
	font-weight: bold;
/*	border-bottom: 1px dotted rgba(0,0,0,0.1);
	margin-bottom: .25em;
	padding-bottom: .25em; */
}

.listing-block {
	margin: 0 0 1.5em 0;
	font-size: 1em;
	clear: both;
}
.listing-block ul {
	font-size: .875em;
}
.listing-block.listing-calendar {
	margin: 0 0 3em 0;
}
.listing-block ul {
	padding: 0;
}
.listing-block li {
	margin: 0;
	padding: 0;
	display: block;
	font-size: .875em;
	line-height: 1em;
	font-weight: 400;
	/* width: 90% !important;
	margin: 0 auto !important; */
}
.listing-block li.listing-name {
	font-size: 1.625em !important;
	line-height: 1.25em;
	font-weight: 700;
	margin: 0 .5em .25em 0;

	text-transform: uppercase;
}
.listing-block li.listing-name a {
	border-bottom: 2px solid #004da3;
}

.listing-block.listing-premium li.listing-name {
	border-bottom: 1px solid rgba(256,256,256,0.25);
}
.listing-block .listing-img {
	position: relative;
	display: block;
	width: 100% !important;
	height: 15em;
	padding: 0 !important;
	margin: 1em auto !important;
	/* background-color: #238dcb; */
	text-align: center;
}




.listing-block .fa {
	display: inline-block;
/*	width: 1.5em !important; */
	margin: 0 .25em 0 0;
	text-align: center;
}


.listing-block li.listing-info {
	margin-bottom: .125em;
}

.listing-block .listing-img .fa {
	width: auto !important;
	margin: 0;
}
.listing-block li.listing-address {
	padding-left: 1.5625em;
	text-indent: -1.5625em;
}
.listing-block li.listing-address,
.listing-block.listing-sponsored li.listing-contact {
	line-height: 1.5em;
	margin-top: .25em;
	margin-bottom: .25em;
}
.listing-block li.listing-address .fa {
	text-indent: 0 !important;
	padding: 0 !important;
}
.listing-block li.listing-info > span,
.listing-block li.listing-contact > span,
.listing-block li.listing-extras > span,
.listing-block li.listing-address span.listing-zip {
	margin: 0 .75em 0 0;
	white-space: nowrap;
}
.listing-block li.listing-address .listing-address-1:after,
.listing-block li.listing-address .listing-address-2:after,
.listing-block li.listing-address .listing-city:after {
	content: ", ";
}
.listing-block li span a,
.listing-block li a span.listing-map {
	white-space: nowrap;
}
.listing-block li .listing-link {
	font-weight: 700;
	text-transform: uppercase;
}
.listing-block .listing-description {
	margin: .5em 0 0 0;
	font-size: 1em;
	line-height: 1.5em;
}
.listing-block.listing-calendar .listing-desc {

}

.listing-block li a {
	color: #004da3;
}

.listing-block.listing-plus .listing-name,
.listing-block.listing-premium .listing-name {
	text-transform: uppercase;
}
.listing-block.listing-plus {
	background-color: rgba(57,154,216,0.1);
	padding: 1.5em 0;
}
.listing-block.listing-premium {
	background-color: #399ad8;
	padding: 0 0 1.5em 0;
	min-height: 15em;
}

.listing-block .listing-name,
.listing-block .listing-button {
	display: inline-block;

}
.listing-block .listing-button {

}
.listing-block .listing-button a {
	display: block;
	margin: .5em .25em .5em .25em;
	background-color: #004da3;
	line-height: 1em;
	padding: .5em .125em .5em .75em;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 5px;
		-webkit-transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1);
		-moz-transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1);
		-o-transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1);
		transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.listing-block .listing-button.listing-webcam a {
	background-color: #a3004d;
}
.listing-block .listing-button.listing-keyscoupon a {
	background-color: #4da300;
}

.listing-block.listing-sponsored {
	padding: 1.5em;
	color: rgba(0,0,0,0.75);
	margin: 0 -1.5em 1.5em -1.5em;
}
.listing-block.listing-sponsored ul {
	font-size: .9375em;
}
.listing-block.listing-sponsored li.listing-name a {
	border-bottom: none !important;
}
.listing-block.listing-sponsored a {
	color: rgba(0,0,0,1) !important;
}
.listing-block.listing-sponsored.listing-gold {
	background-color: #ffd700;
}
.listing-block.listing-sponsored.listing-silver {
	background-color: #c0c0c0;
}
.listing-block.listing-sponsored.listing-bronze {
	background-color: #daa520;
}
.listing-block.listing-sponsored.listing-available {
	border: 4px solid #ffd700;
	background-color: #fff;
}
.listing-block.listing-sponsored ul {
	margin: 0;
	padding: 0;
}
.listing-block .listing-sponsor {
	font-size: 10px !important;
	line-height: 1.125em;
	text-transform: uppercase;
	opacity: .5;
}
.listing-block.listing-sponsored .listing-name {
	float: left;
	border-bottom: 2px solid rgba(0,0,0,0.75) !important;
}
.listing-block.listing-sponsored .listing-image {
	clear: both;
	float: left;
	text-indent: -9999px;
	width: 70px;
	height: 70px;
	margin: .5em 0 1em 0;
}
.listing-block.listing-sponsored .listing-image a {
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	   -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	        box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	border: 2px solid #fff;
	border-radius: 0;
}
.listing-block.listing-sponsored .listing-contact {
	float: left;
	width: 75%;
	width: calc(100% - 90px);
	margin-left: 20px;
}
.listing-block.listing-sponsored .listing-description {
	clear: both;
	width: 100%;
}

#slideshow h1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	z-index: 1;
	margin: 0;
	padding: 0;
}
#slideshow h1 a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.section-key-west #slideshow h1 a {
	background-color: rgba(131,166,71,0.25);
	background-image: url(/img/key-west/section-logo-kw.png);
}
.section-lower-keys #slideshow h1 a {
	background-color: rgba(44,79,158,0.25);
	background-image: url(/img/lower-keys/section-logo-lk.png);
}
.section-marathon #slideshow h1 a {
	background-color: rgba(242,91,43,0.25);
	background-image: url(/img/marathon/section-logo-mara.png);
}
.section-islamorada #slideshow h1 a {
	background-color: rgba(218,31,93,0.25);
	background-image: url(/img/islamorada/section-logo-isla.png);
}
.section-key-largo #slideshow h1 a {
	background-color: rgba(113,150,62,0.25);
	background-image: url(/img/key-largo/section-logo-kl.png);
}

.section-more {
	display: table;
	margin-left: auto;
	margin-right: auto;
}
.section-more li {
	color: #ddd;
}
.section-more a {
	border-bottom: none !important;
}
.back-to-the-top {
	clear: both;
	text-align: center;
	font-size: .875em;
	line-height: 1.5em;
	text-transform: uppercase;
}
.back-to-the-top.main {
	display: table;
	font-weight: bold;
	font-size: .75em;
	margin-left: auto;
	margin-right: auto;
}
.back-to-the-top.main .fa {
	text-align: center;
	display: block;
	font-size: 4.5em;
	line-height: 1em;
}
.new {
	border: 4px dotted #f2d4d4;
	padding: .5em 1.5em;
	margin-bottom: 2em;
}
.new p, .new li, .new h1, .new h2, .new h3 {
	color: #d77d7d;
}

.img-left {
	float: left;
	margin: 0 1.5em .5em 0;
	max-width: 50%;
	width: auto;
}
.img-right {
	float: right;
	margin: 0 0 .5em 1.5em;
	max-width: 50%;
	width: auto;
}
.weather > div {
	text-align: center;
}
.weather > div table {
	display: table;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin: 1.5em auto;
}
.weather > div table th, .weather > div table td {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	padding: .25em 1em;
	text-align: center;
	font-size: 1.25em;
	line-height: 1.5em;
}
.weather > div table th {
	font-weight: bold;
	background-color: rgba(0,0,0,0.1);
	font-size: .75em;
	line-height: 2em;
	text-transform: uppercase;
}
.weather > div table tr td:first-child {
	text-align: left;
	font-weight: 300;
}
.weather > div table tr:nth-child(odd) td {
	background-color: rgba(256,256,256,0.2);
}
.weather > div table, .weather > div table th, .weather > div table td {
	border-color: #fff;

}
.weather > div table#weather-high {
	background-color: #fea488;
}
.weather > div table#weather-low {
	background-color: #0080b1;
	color: #fff;
}


.banner {
	display: block;
	margin: 2em auto;
	/* background-color: #ccc; */
}
.banner.banner-728x90 {
	width: 320px; 
	height: 50px;
	max-width: 100%;
	max-height: 50px;
}
.banner.banner-300x250 {
	width: 18.75em;
	height: 15.625em;
	max-width: 300px;
	max-height: 250px;
}
.banner-300x250-block {
	display: table; 
	height: 250px; 
	margin: 3em auto;
}

/* ============================================================================= */

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

	nav {
		max-width: 360px;
		margin: 0 auto;
	}
	header {
		
	}
	ul.nav {
		background-color: #fff;
	}
	ul.nav li {
		position: relative;
		width: 100%;
		height: 5em;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left top;
	}
	.no-widget #content {
		margin-top: 1em;
	}
	#content-features ul.nav li {
		float: left;
		width: 50%;
		height: 10em;
		background-size: cover;
		background-position: center center;
	}



	ul.nav li a {
		color: #fff;
		text-decoration: none;
		text-align: left;
		font-size: 2em;
		line-height: 1.875em;
		width: 100%;
		display: block;
	}
	ul.nav li a span {
		display: block;
	}
	#districts ul.nav li a span {
		margin: 0 0 0 3.3125em;
		padding: .3125em 0 .3125em .5em;
	}
	#content-features ul.nav li {
		position: relative;
	}
	#content-features ul.nav li a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: #fff !important;
		text-decoration: none;
		text-align: center;
		font-size: 1.3125em;
		line-height: 1em;
	}
	#content-features ul.nav li a span {
		position: absolute;
		display: block;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: .5em 0;
		background-color: rgba(0,0,0,0.5);
	}
	#content #content-features a {
		color: #fff !important;
	}
	ul.nav li a strong,
	ul.nav li a em {
		display: block;
	}
	ul.nav li a strong {
		font-weight: 700;

	}
	ul.nav li a strong:after {
		/* content: "›";
		padding: 0 0 0 .25em;
		margin: 0 -.5em 0 0; */
	}
	ul.nav li a em {
		font-style: normal;
		font-weight: 300;
		font-size: .75em;
		line-height: 1em;
		opacity: .75;
	}
	#slideshow {
		display: block;
		position: relative;
		width: 100%;
		height: 0;
		/* padding-bottom: 50%; */
		padding-bottom: 18.75%;
		margin: 0;
		overflow: hidden;
	}
	.page-front #slideshow {
		padding-bottom: 33.33%;
		margin: 0 0 1em 0;
	}
	#slideshow img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		max-width: 100%;
		height: auto;
	}

	.mobile-icon {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		color: #fff;
		font-size: 2em;
		line-height: 1.5em;
		padding: .5em;
		/* height: 100%; */
		background-color: rgba(0,0,0,0.5);
		text-shadow: 0 0 15px rgba(0,0,0,0.75);
	}
	#slideshow .slider {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	#content {
		width: 100%;
	}

	#content article {
		padding: .5em 1.5em;
	}
	#content article p,
	#content article li {
		font-size: 1.25em;
		line-height: 1.5em;
	}

}

/* ============================================================================= */

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

	#header-logo .header-logo-nav {
		padding: 0 0 10% 0;
		margin: 0 auto;
	}

	.page-front #slideshow {
		padding-bottom: 33%;
	}
	.listing-block.listing-sponsored .listing-description {
		clear: none;
	}
	.listing-block.listing-sponsored .listing-contact,
	.listing-block.listing-sponsored .listing-description {
		float: left;
		width: 75%;
		width: calc(100% - 90px);
		margin-left: 20px;
	}
	.section-more {
		display: block;
		list-style: none;
		margin: 0 0 2em;
		padding: 0;
		text-align: center;
	}
	.section-more li {
		display: inline-block;
		font-weight: bold;
		margin: 0 .75em !important;
	}

	ul.category-list.columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
	ul.category-list.columns li {
		white-space: nowrap;
	}

	.weather > div {
		width: 50%;
		float: left;
	}

	.img-block.img-25 {
		width: 25%;
	}
	.img-block.img-33 {
		width: 33.33%;
	}
	.img-block.img-50 {
		width: 50%;
	}

}

/* ============================================================================= */

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

	#content-features ul.nav li {
		width: 25%;
		height: 15em;
	}
	#content article {
		padding: 2em 4em;
	}
	.mobile-icon {
		
	}

}

/* ============================================================================= */

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

	article h1 {
		line-height: 1.25em;
		margin-top: 0;
	}

	#footer-logo {
		position: absolute;
		top: 0;
		left: 0;
		width: 100px;
	}
	#footer-logo img {
		width: 100%;
		padding: 1.5em;
		}

	#footer-logo a {
		opacity: .75;
	}
	#footer-logo a:hover {
		opacity: 1;
	}
	#footer-weather {
		position: absolute;
		top: 3em;
		right: 2em;
		font-size: 12px;
		width: 100px;
		padding: 0;
	}
	#footer-weather img {
		margin: 0 0 5px 0;
		width: 100%;
	}
	#footer-text {
		width: 32em;
		margin: 0 auto;
		}
	ul.category-list {
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
	ul.category-list.columns {
		display: block;
		/* width: 75%; */
	}
	.listing-block ul {
		font-size: 1em;
	}
	.listing-block.listing-sponsored {
		font-size: 1.125em;
	}
	.listing-block.listing-sponsored {
		margin-left: 0;
		margin-right: 0;
	}

}

/* ============================================================================= */

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

	#footer-text {
		width: 40em;
		}
	#footer-logo,
	#footer-weather {
		width: 160px;
	}
	.banner.banner-728x90 {
		width: 728px; 
		height: 90px;
		max-width: 728px;
		max-height: 90px;
	}
}

/* ============================================================================= */

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

	#wrapper {
		font-size: .875em;
		max-width: 100em;
		min-width: 80em;
		margin: 0 auto;
	}
	header {
		width: 100%;
		height: 7.375em;
		background-color: #e5f8fe;
		font-size: 1.25em;
	}
	.desktop-wrapper {
		position: relative;
		width: 60em;
		margin: 0 auto;
		}
	.header-block {
		display: block;
		position: absolute;
		top: 0;
		width: 50%;
	}
	#header-logo {
		padding: 0;
		font-size: .8em;
	}
	#header-logo.header-block { 
		left: 0;
	}
	#header-widget-tab {
		display: none;
	}
	#header-social.header-block { 
		display: block;
		right: 19em;
		text-align: right;
		width: 3em;
		padding-top: 12px;
	}
	#header-widget.header-block {
		display: block;
		top: 1em; 
		right: 0;
		text-align: right;
		width: 16em;
		background-color: transparent;
	}
	#header-widget label {
		color: #000 !important;
	}
	#header-logo {
		margin-top: 5px;
		min-width: 35em; 
	}
	#header-logo .header-logo-nav {
		width: 43.75em;
		height: 8.5625em;
		margin: 0;
		padding: 0;
		font-size: 1em;
		text-indent: -9999px;
		}
	#header-logo .header-logo-nav a#header-logo-floridakeys {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-image: url(../img/florida-keys-logo-2.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}
	#header-logo .header-logo-nav a.header-logo-link {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		bottom: 0;
		height: 28%;
		/* background-color: rgba(0,0,0,0.5); */
	}
	#header-logo .header-logo-nav a.header-logo-link#header-logo-kl {
		left: 20.5%;
		width: 16%;
	}
	#header-logo .header-logo-nav a.header-logo-link#header-logo-isla {
		left: 36.5%;
		width: 16.5%;
	}
	#header-logo .header-logo-nav a.header-logo-link#header-logo-mara {
		left: 53%;
		width: 15%;
	}
	#header-logo .header-logo-nav a.header-logo-link#header-logo-lk {
		left: 70%;
		width: 16.5%;
	}
	#header-logo .header-logo-nav a.header-logo-link#header-logo-kw {
		left: 86.5%;
		width: 13.5%;
	}
	#header-social {
	}
	#header-social ul {
		position: absolute;
		top: .75em;
		right: 0;
		width: 3em;
		font-size: 1em;
	}
	#header-social ul li {
		float: left;
		display: block;
		width: 2em;
		height: 2em;
		line-height: 2.125em;
		font-size: 1em;
		margin: .5em;
		background-color: #2173ba;
		text-align: center;
		border-radius: 5px;
		opacity: .75;
			-webkit-transition: all 100ms ease-out;
			-moz-transition: all 100ms ease-out;
			-o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
		}
	#header-social ul li:nth-child(3) {
		line-height: 2.25em;
	}
	#header-social ul li a {
		display: block;
		width: 100%;
		height: 100%;
		color: #fff;
	}
	#header-social ul li:hover {
		opacity: 1;
		transform: scale(1.25);
	}
	#slideshow {
		position: relative;
		display: block;
		width: 100%;
		height: 0;
		padding-bottom: 18.75%;
		overflow: hidden;
	}
	.page-front #slideshow {
		padding-bottom: 33.33%;
	}

	#slideshow .slider img {
		max-width: 100%;
		height: auto;
	}

	#book-now {
		height: 100px;
		background-color: #fff;
	}
	#book-now p {
		font-size: 3em;
		line-height: 100px;
		font-weight: 300;
		text-align: center;
		opacity: .25;
		margin: 0;
		padding: 0;
	}
	.listing-block .listing-button a:hover {
		background-color: #98c100;
	}

	ul.nav {
		background-color: #fff;
	}
	ul.nav li {
		position: relative;
		float: left;
		width: 20%;
		height: 0;
		padding-bottom: 15%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		opacity: .875;
	}
	ul.nav li:hover {
		opacity: 1;
		background-size: 110% 110%;
	}
	ul.nav li:nth-child(even) {
		/* background-color: #ddd; */
	}

	ul.nav li {
		background-image: url(../img/nav-features.jpg);
	}
	ul.nav li span {
		background-color: rgba(0,0,0,0.5);
	}
	ul.nav li:nth-child(even) span {
		/* background-color: rgba(0,0,0,0.25); */
	}

	ul.nav li#nav-keylargo {
		background-image: url(../img/nav-keylargo-1.jpg);
	}
	ul.nav li#nav-keylargo a {
		background-color: rgba(91,203,43,0.33);
	}
	ul.nav li#nav-keylargo a span {
		background-color: #5bcb2b;
		background-color: rgba(91,203,43,0.66);
	}

	ul.nav li#nav-islamorada {
		background-image: url(../img/nav-islamorada-1.jpg);
	}
	ul.nav li#nav-islamorada a {
		background-color: rgba(216,0,77,0.33);
	}
	ul.nav li#nav-islamorada span {
		background-color: #d8004d;
		background-color: rgba(216,0,77,0.66);
	}

	ul.nav li#nav-marathon {
		background-image: url(../img/nav-marathon-1.jpg);
	}
	ul.nav li#nav-marathon a {
		background-color: rgba(234,141,62,0.33);
	}
	ul.nav li#nav-marathon span {
		background-color: #ea8d3e;
		background-color: rgba(234,141,62,0.66);
	}

	ul.nav li#nav-lowerkeys {
		background-image: url(../img/nav-lowerkeys-1.jpg);
	}
	ul.nav li#nav-lowerkeys a {
		background-color: rgba(50,72,159,0.33);
	}
	ul.nav li#nav-lowerkeys a span {
		background-color: #32489f;
		background-color: rgba(50,72,159,0.66);
	}

	ul.nav li#nav-keywest {
		background-image: url(../img/nav-keywest-1.jpg);
	}
	ul.nav li#nav-keywest a {
		background-color: rgba(91,203,43,0.33);
	}
	ul.nav li#nav-keywest span {
		background-color: #5bcb2b;
		background-color: rgba(91,203,43,0.66);
	}


	ul.nav li a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-size: 1.75em;
		line-height: 1em;
	}
	ul.nav li a span {
		position: absolute;
		display: block;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: .5em 0;
	}
	#districts ul.nav li a span {
		padding: .75em 0;
	}
	ul.nav li:hover a {
		background-color: transparent !important;
	}
	ul.nav li:hover a span {
		padding: .875em 0 !important;
		text-shadow: 2px 2px 5px rgba(0,0,0,0.75);
	}
	ul.nav li a strong,
	ul.nav li a em {
		display: block;
	}
	ul.nav li a strong {
		font-weight: 700;

	}
	ul.nav li a strong:after {
		/* content: "›";
		padding: 0 0 0 .25em;
		margin: 0 -.5em 0 0; */
	}
	ul.nav li a em {
		font-style: normal;
		font-weight: 400;
		font-size: .75em;
		line-height: 1em;
		opacity: 0;
	}
	ul.nav li a:hover em {
		opacity: .75;
	}

	ul.nav li,
	ul.nav li a,
	ul.nav li a span {
			-webkit-transition: all 100ms ease-out;
			-moz-transition: all 100ms ease-out;
			-o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
	}

	#mobile-nav {
		display: none;
	}
	nav#sections {
		display: block;

		width: 100%;
		height: 3em;
		background-color: rgba(0,124,205,0.75);
		text-align: center;

		z-index: 102;
		font-size: .875em;
	}
	.section-key-west nav#sections {
		background-color: #83a647;
	}
	.section-lower-keys nav#sections {
		background-color: #2c4f9e;
	}
	.section-marathon nav#sections {
		background-color: #f25b2b;
	}
	.section-islamorada nav#sections {
		background-color: #da1f5d;
	}
	.section-key-largo nav#sections {
		background-color: #71963e;
	}
	nav#sections > ul > li {
		display: inline-block;
/*		float: left;
		width: 20%; */
	}
	nav#sections ul li:nth-child(even) {
/*		background-color: #a0a0a0; */
	}
	nav#sections > ul > li > a {
		color: #fff;
		font-size: 1em;
		line-height: 3em;
		padding: 0 .5em;
		font-weight: 700;
	}

	#nav-home {
		display: none;
	}
	nav#sections li.nav-mobile-link {
		display: none;
	}
	nav#sections > ul {
		position: relative;
		display: block;
		margin: 0 auto;
	}
	nav#sections > ul > li {
		position: relative;
		margin: 0;
		line-height: 3em;
		font-weight: 300;
	}
	nav#sections > ul > li .fa {
		/* margin-left: 5px; */
		/* margin-right: 5px; */
	}
	nav#sections > ul > li .fa-angle-down {
		margin-right: 0;
		margin-left: 5px;
	}
	nav#sections > ul > li > a {
		display: inline-block;
		text-decoration: none;
		padding: 0 .5em;
	}
	nav#sections > ul > li:hover > a {
		color: #fff;
		text-decoration: none !important;
	}
	nav#sections > ul > li:hover > a,
	nav#sections ul li ul li a {
		background-color: #000;
	}

	.section-key-west nav#sections > ul > li:hover > a,
	.section-key-west nav#sections ul li ul li a {
		background-color: #688c2e;
	}
	.section-lower-keys nav#sections > ul > li:hover > a,
	.section-lower-keys nav#sections ul li ul li a {
		background-color: #003883;
	}
	.section-marathon nav#sections > ul > li:hover > a,
	.section-marathon nav#sections ul li ul li a {
		background-color: #d23c11;
	}
	.section-islamorada nav#sections > ul > li:hover > a,
	.section-islamorada nav#sections ul li ul li a {
		background-color: #bc0047;
	}
	.section-key-largo nav#sections > ul > li:hover > a,
	.section-key-largo nav#sections ul li ul li a {
		background-color: #587c25;
	}

	nav#sections > ul > li > ul {

		padding: 0;
		position: absolute;
		/* margin-top: 20px; */
		left: 0;
		opacity: 0;
		visibility: hidden;
		z-index: 999;
		background-color: rgba(256,256,256,.25);
	}
	nav#sections > ul > li > ul {
		width: auto;
	}
	nav#sections > ul > li > ul > li {
		font-size: .875em;
		line-height: 1.5em;
		font-weight: 400;
		text-transform: none;
		height: auto;
		margin: 0;
		padding: 0 !important;
		text-align: left;
		white-space: nowrap;
	}
	nav#sections > ul > li > ul > li {
		padding: 0 0 !important;
	}
	nav#sections ul li ul li a {
		display: block;
		text-align: left;
		margin: 0 !important;
		padding: 0 1.25em !important;
		line-height: 2.25em !important;
	}
	nav#sections ul li ul li:nth-child(odd) a {

	}
	nav#sections ul li ul li {
		background-color: #555;
		display: block;
		color: #fff;
		float: none;
		border-top: 1px solid #fff;
	}

	nav#sections ul li ul li a:hover { 
		color: #fff;
		text-decoration: none;
		background-color: #000 !important;
	}
	nav#sections ul li ul li a { 
		display: block;
		color: #fff;
		text-decoration: none;
		}

	nav#sections ul li:hover ul {
		opacity: 1;
		z-index: 9999;
		visibility: visible;
	}
	nav#sections ul li.nav-icon {
		position: absolute;
		top: 0;
		text-align: center;
		display: block;
		padding: 0 !important;
	}


	nav#sections ul li.nav-icon a {
		display: block;
		font-size: .625em;
		line-height: 1.25em;
		text-transform: uppercase;
		text-align: center;
		padding: 1.5em 0 !important;
		width: 7em;
	}
	nav#sections ul li.nav-icon a span {
		font-size: 1.5em;
		line-height: 1.5em;
		text-align: center;
	}
	

	.banner-300x250-block .banner.banner-300x250 {
		float: left; 
		margin: 1.5em;
	}
	.banner-side {

	}
	.banner-fixed {
		position: fixed;
		top: 0;
	}
	.banner-fixed.bottom {
		position: absolute;
		bottom: 0;
	}

	.no-widget #email-signup {
		font-size: .75em;
		padding: 1em 0 0 0;
	}
	#email-signup { 
			padding: 1.5em 0 0 0;
	}
	#email-signup p.sign-up-to {
			font-size: .875em;
			line-height: 1.5em;
	}
	#email-signup input {
			margin: 1em .5em;
			font-size: .875em;
			line-height: 1.125em;
	}
	#email-signup input[type=submit] {
			opacity: .75;
			-webkit-transition: all 100ms ease-out;
			-moz-transition: all 100ms ease-out;
			-o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
	}
	#email-signup input[type=submit]:hover {
		opacity: 1;
	}

	#content {
		width: 75em;
		margin: 0 auto;
	}
	.content-block {
		position: relative;
		float: left;
		margin: 1em 0;
	}
	.content-block.content-continued {
		margin: -4em 0 1em;
	}
	.content-main {
		width: 47.25em;
		padding: 0 3em;
	}
	.content-side {
		width: 18.75em;
		padding: 0 3em 0 0;
	}
	.content-full {
		width: 100%;
		padding: 0;
	}
	.content-full article {
		padding: 0 3em;
	}
	.page-front .content-full {
		width: auto; 
		padding: 0 3em;
	}
	.page-front .content-full article {
		padding: 0;
	}
	.content-full .content-side {
		float: right;
		padding: 0 0 0 3em;
	}
	#content-features {
		margin-bottom: 1.5em;
	}
	#content-features li {
		position: relative;
		float: left;
		display: block;
		width: 25%;
		height: 0;
		padding-bottom: 25%;
	/*	text-indent: -9999px;  */
		background-color: #00a0cf;
	}
	#content-features li:nth-child(3n+2) {
	/*	width: 34%; */
	}
	#content-features li:nth-child(even) {
	/*	background-color: #267fb5; */
	}
	#content-features li a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	ul.nav li#nav-diving strong {
		font-size: .75em;
	}

	article {
		padding: 1em 0;
	}
	article p,
	article li {
		font-size: 1.25em;
		line-height: 1.5em;
	}

	.listing-block li.listing-address:before {

	}
	.listing-block li.listing-address,
	.listing-block li.listing-contact {

	}


	footer .desktop-wrapper {

	}
	footer ul.social {
		display: none;
	}
	#footer-logo img,
	#footer-weather img {
		padding: 0;
	}
	#footer-weather {
		top: -1em;
		right: 0;
	}
	#footer-text {
		width: 40em;
		margin: 0 auto;
		}

}

@media only screen and (min-width: 1280px) {
	#wrapper {
		font-size: 1em;
	}
}







/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}