/* Theme Name: Key Cove Author: RealTech Services Author URI: https://www.rtservices.net Description: Starter theme for making new themes Version: 1.3 11/2018*/
 *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 body {
     background: #acacac;
     margin:0;
}
 .site-wrap {
     background: #FFF;overflow: hidden;
}
 img {
     max-width: 100%;
     height: auto;
}
 iframe {
     max-width: 100%;
}
 html {
     font-size: 100%;
    font-family: roboto, sans-serif;
	font-weight: 400;
	font-style: normal;
}

/*fontello fun*/
@font-face {
  font-family: 'rt-font';
  src: url('font/rt-font.eot?4761947');
  src: url('font/rt-font.eot?4761947#iefix') format('embedded-opentype'),
       url('font/rt-font.woff2?4761947') format('woff2'),
       url('font/rt-font.woff?4761947') format('woff'),
       url('font/rt-font.ttf?4761947') format('truetype'),
       url('font/rt-font.svg?4761947#rt-font') format('svg');
  font-weight: normal;
  font-style: normal;
} 
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'rt-font';
    src: url('../font/rt-font.svg?4761947#rt-font') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "rt-font";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-plus-circled:before { content: '\21'; } /* '!' */
.icon-star:before { content: '\22'; } /* '"' */
.icon-share:before { content: '\23'; } /* '#' */
.icon-reply-all:before { content: '\24'; } /* '$' */
.icon-comment:before { content: '\25'; } /* '%' */
.icon-export-1:before { content: '\26'; } /* '&' */
.icon-basket:before { content: '\27'; } /* ''' */
.icon-heart-circled:before { content: '\28'; } /* '(' */
.icon-cancel:before { content: '\29'; } /* ')' */
.icon-th:before { content: '\2a'; } /* '*' */
.icon-cancel-circled-outline:before { content: '\2b'; } /* '+' */
.icon-eye:before { content: '\2c'; } /* ',' */
.icon-toggle-off:before { content: '\2d'; } /* '-' */
.icon-toggle-on:before { content: '\2e'; } /* '.' */
.icon-balance-scale:before { content: '\31'; } /* '1' */
.icon-location:before { content: '\32'; } /* '2' */
.icon-direction:before { content: '\33'; } /* '3' */
.icon-lightbulb:before { content: '\34'; } /* '4' */
.icon-paper-plane-empty:before { content: '\35'; } /* '5' */
.icon-paper-plane:before { content: '\36'; } /* '6' */
.icon-lightbulb-alt:before { content: '\37'; } /* '7' */
.icon-ok-circled:before { content: '\38'; } /* '8' */
.icon-ok:before { content: '\39'; } /* '9' */
.icon-users:before { content: '\3a'; } /* ':' */
.icon-sliders:before { content: '\3c'; } /* '<' */
.icon-bed:before { content: '\3d'; } /* '=' */
.icon-bath:before { content: '\3e'; } /* '>' */
.icon-guidedog:before { content: '\3f'; } /* '?' */
.icon-paw:before { content: '\40'; } /* '@' */
.icon-swimming:before { content: '\41'; } /* 'A' */
.icon-shower:before { content: '\42'; } /* 'B' */
.icon-wheelchair:before { content: '\43'; } /* 'C' */
.icon-wifi:before { content: '\44'; } /* 'D' */
.icon-signal:before { content: '\45'; } /* 'E' */
.icon-desktop:before { content: '\46'; } /* 'F' */
.icon-toilet:before { content: '\48'; } /* 'H' */
.icon-cafe:before { content: '\49'; } /* 'I' */
.icon-lodging:before { content: '\4a'; } /* 'J' */
.icon-hot-tub:before { content: '\4b'; } /* 'K' */
.icon-tennis:before { content: '\4c'; } /* 'L' */
.icon-bbq:before { content: '\4d'; } /* 'M' */
.icon-linens:before { content: '\4e'; } /* 'N' */
.icon-heart-empty:before { content: '\4f'; } /* 'O' */
.icon-picture:before { content: '\50'; } /* 'P' */
.icon-minus-circled-1:before { content: '\51'; } /* 'Q' */
.icon-attention-circled:before { content: '\52'; } /* 'R' */
.icon-calendar:before { content: '\53'; } /* 'S' */
.icon-help-circled:before { content: '\54'; } /* 'T' */
.icon-cancel-circled-1:before { content: '\55'; } /* 'U' */
.icon-calendar-2:before { content: '\56'; } /* 'V' */
.icon-info-circled-1:before { content: '\e800'; } /* '' */
.icon-globe:before { content: '\e801'; } /* '' */
.icon-group:before { content: '\e802'; } /* '' */
.icon-print:before { content: '\e803'; } /* '' */
.icon-users-1:before { content: '\e804'; } /* '' */
.icon-heart:before { content: '\e805'; } /* '' */
.icon-export-alt:before { content: '\e806'; } /* '' */
.icon-reply-all-1:before { content: '\e809'; } /* '' */
.icon-info-circled:before { content: '\e80d'; } /* '' */
.icon-ok-circle:before { content: '\e812'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-docs:before { content: '\f0c5'; } /* '' */
.icon-pinterest-squared:before { content: '\f0d3'; } /* '' */
.icon-tumblr:before { content: '\f173'; } /* '' */
.icon-tumblr-squared:before { content: '\f174'; } /* '' */
.icon-pinterest:before { content: '\f231'; } /* '' */
.icon-twitter-squared:before { content: '\f304'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */
.icon-instagram:before { content: '\f32d'; } /* '' */
/*end fontello*/
/*heading styles*/
 h1 {
     font-size:36px;
     line-height:1.25;
}
 h2 {
    font-size:30pt;
     line-height:1.25;
}
 h3 {
    font-size: 24px;
     line-height:1.25;
}
h1,h2,h3,h4, .nav li a {font-family: proxima-nova, sans-serif;}
 p {
    font-size:17px;
     line-height:1.6;
	 font-family: roboto, sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#464646;
	letter-spacing:1px;
}
.home p {
    font-weight: 300;
    max-width: 1000px;
    text-align: center;
    margin: 20px auto;
}
.home h2 {text-align: center;
    text-transform: uppercase;
    color: #464646;
    font-size: 36px;
    font-weight: initial;}
div#post-10  {margin: 80px auto; }
.home .content {margin-bottom:80px;padding-top:40px; }
.shortcuts-wrapper.flex-container {justify-content:center; }
.shortcuts-wrapper h3 {text-align:center; color:#5d5d5d; text-transform:uppercase; font-weight:initial; font-size:22px;letter-spacing:1px;   margin-block-start: .5em;}
.shortcuts-wrapper .flex-item {transition:all .3s; transition-timing-function: ease-in-out;max-width:350px; margin:10px; }
.shortcuts-wrapper .flex-item:hover {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.32);transition:all .3s; transition-timing-function: ease-in-out;}
.featuredwrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: baseline;
}
.featuredslider-item {
    flex-basis: 18%;
    outline: 1px solid #ccc;
    outline-offset: 5px;
    border: 1px solid #ccc;
    margin-top: 20px;
}
.fullback { }
.fullback.top {background:url('images/weddings.jpg');background-size:cover;background-position:center center;height: -webkit-fill-available;
    max-height: 500px; min-height:475px; background-repeat: no-repeat; }
	
.fullback.bottom {background:url('images/guide2.jpg');background-size:cover;background-position:center center;height: -webkit-fill-available;
    max-height: 500px; min-height:475px;   background-repeat: no-repeat; }

.homestyle .flex-item, .flex-item.txtpart {margin-right:0!important;}
.halfpage.txtpart {outline:1px solid #ccc; outline-offset:-20px; max-height: 500px; min-height:475px;}
.txtpart-inner { width:100%; outline:1px solid #ccc; outline-offset:-13px; padding:35px; text-align:center; height: -webkit-fill-available; min-height:475px; max-height: 500px;}
.txtpart-inner h3 { color:#105ca1;text-transform:uppercase;font-weight:300; font-size:30px;}
.txtpart-inner p { max-width:475px; }
/*top alert message*/
 @media (max-width:40em) {
    .hide24 {
        font-size:12pt !important;
    }
	.halfpage.txtpart {max-height:none !important;}
	.txtpart-inner h3 {line-height:1}
	.halfpage.txtpart {outline-offset: 0px;}
	p {font-size:14px !important;}
}
 .hide24 {
    color:#888;
     background-color:rgba(255,255,255,.9);
     height:200px;
     width:80%;
     position:absolute;
     top:100px;
     left:0;
     right:0;
     z-index:500;
     height:200px;
     box-shadow:0px 0px 15px rgba(0,0,0,.3);
     font-size:18pt;
     padding:25px;
     margin:0 auto;
}
 .hide24 h3 {
    margin: 0 auto;
     color: #000;
}
 .alert-box-close {
     position: absolute;
     top: 10px;
     right: 20px;
     cursor: pointer;
}
 .hidden {
    display:none;
}
/* end alert css */

   /* when the library loads, each [data-delighter] 
      gets the .delighter class */

   .lefty.delighter {
      transition: all .5s ease-out;
      transform: translateX(-100%);
      opacity: 0;
   }

   /* the .started class is set when the top
      of [data-delighter] is at 0.75 of the viewport 
      (where 0 is top and 1 is bottom) */

   .lefty.delighter.started {
      transform: none;
      opacity: 1;
   }

   /* an extra .ended state is set when the bottom 
      of [data-delighter] is at 0.75 of the viewport
      (where 0 is top and 1 is bottom) */

   .lefty.delighter.started.ended {

   }
   
    .righty.delighter {
      transition: all .5s ease-out;
      transform: translateX(100%);
      opacity: 0;
   }


   .righty.delighter.started {
      transform: none;
      opacity: 1;
   }


   .righty.delighter.started.ended {

   }  
   .ft-top .gform_wrapper input {
    border: 1px solid #ccc;;
}
 
 .ft-top .gform_wrapper ul.gform_fields li.gfield.captcha{min-height:0!important;margin-top:0; } 
 .footerleft {
     float:left;
}
 .footerright {
     float:right;
}
 .footerleft, .footerright {
     padding:.325em 0;
}
 .logo {
     float: left;
     width: auto;
	 -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}
 .logo-smaller {
     display:none;
     transition:.2s all;
}
 .sidebar {
     float: right;
     margin-left: 1%;
     max-width: 29%;
     width: auto;
     padding: 0.625em;
     border-left: 1px solid #f0f0f3;
}
/*if parallax*/


 .parallax-home {
     min-height:800px;
     z-index:1;	     box-shadow: inset 0 100px 100px -50px rgba(0,0,0,.35);    -webkit-box-shadow: inset 0 100px 100px -50px rgba(0,0,0,.35);
}
.parallax-inner {
     min-height:250px;
     z-index:1;
}

.home h1.page-title { text-align:center; text-transform:uppercase; color:#464646; font-size:40px;font-weight:initial;}
.sm-title {text-align:center; display:block;font-size:23px;color:#30b2db; font-weight:300; letter-spacing:.05em; }

/* some blog stuff */
 .widget {
     position: relative;
     margin-bottom:20px;
     background: #f4f4f4;
     border-width: 0px;
     padding: 5px 30px 30px;
}
 .content-left {
     float:left;
     max-width:67%;
     padding-right:20px;
}
 . .featuredimage {
     width: 350px;
     height: 200px;
     overflow: hidden;
}
 .post-prev-img {
     float: left;
     padding: 0 0.95em 0.625em 0;
}
 .article-container {
     background-color: #FAFAFA;
     border: 1px solid #f4f4f4;
     padding: 10px;
     line-height: 1.5;
}
/*end blog*/
/*new mobile menu*/
 ul.clearfix.hide-nav {
     display:inline-block;
}
 .menu-primary-container {
     display:inline-block;
}
 .content-wrap {
     -webkit-transition: -webkit-transform 0.3s;
     transition: transform 0.3s;
}
 .menu-primary-container li:last-child .sub-menu {
     right:0;
}
 .c-menu {
     position: fixed;
     z-index: 200;
     background-color: #f3f3f3;
     transition: transform 0.3s;
}
 .c-menu__items {
     list-style: none;
     margin: 0;
     padding: 0;
}
/** * Close button. */
 .c-menu__close {
    color: #fff;
    background-color: #2f70b0;
     font-size: 12px;
     border: none;
     box-shadow: none;
     border-radius: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
}
/** * Close button resets. */
 .c-menu__close:focus {
     outline: none;
}
/** * Body states. * * When a menu is active, we want to hide the overflows on the body to prevent * awkward document scrolling. */
 body.has-active-menu {
     overflow: hidden;
}
/** * Mask component */
 .content-mask {
     position: fixed;
     z-index: 100;
     top: 0;
     left: 0;
     overflow: hidden;
     width: 0;
     height: 0;
     background-color: #000;
     opacity: 0;
     transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}
 .content-mask.is-active {
     width: 100%;
     height: 100%;
     opacity: 0.7;
     transition: opacity 0.3s;
}
/*actual menu stuff*/
 .c-menu--push-left {
     width: 100%;
     height: 100%;
     overflow-y: scroll;
}
 .content-wrap.is-active {
     width: 100%;
     height: 100%;
     opacity: .7;
     -webkit-transition: opacity .3s;
     transition: opacity .3s;
}
 .content-wrap.has-push-left {
     -webkit-transform: translateX(300px);
     -ms-transform: translateX(300px);
     transform: translateX(300px);
}
 .c-menu--push-left .c-menu__close {
     display: block;
     padding: 12px 24px;
     width: 100%;
}
 .c-menu--push-left.is-active {
     transform: translateX(0);
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
}
 .c-menu--push-left {
     top: 0;
     left: 0;
     transform: translateX(-100%);
     -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
}
 @media (min-width: 320px) {
     .c-menu--push-left {
         transform: translateX(-300px);
         width:300px;
    }
}
 .navclass li {
     list-style-type: none;
     line-height: 40px;
}
 .navclass li ul {
     display: none;
     position: absolute;
     top: 100%;
}
 .navclass li ul {
     position: static;
     padding: 20px;
    /* 20 */
     padding-top: 0;
}
/*end menu*/
/*video full screen styling*/
 .video-section .buttonBar{
     display:none;
}
 .player {
     font-size: 1px;
}
 .pattern-overlay {
     padding: 110px 0 32px;
     height: 700px;
     overflow: hidden;
}
 @media (max-width: 1350px) and (min-width: 1150px) {
     .pattern-overlay {
         height: 600px;
         overflow: hidden;
    }
}
 @media (max-width: 1150px) and (min-width: 768px) {
     .pattern-overlay {
         height: 500px;
         overflow: hidden;
    }
     .headerimage {
         overflow: hidden;
    }
     .mbYTP_wrapper {
         width: 900px!important;
    }
}
 @media (max-width: 767px) and (min-width: 0px) {
     .pattern-overlay {
         height: 400px;
         overflow: hidden;
    }
     .headerimage {
         overflow: hidden;
    }
     .mbYTP_wrapper {
         width: 900px!important;
    }
     .featuredslider-item {
    flex-basis: 48%;
}
}
/*end video*/
 .clear {
     clear: both;
}
 .no-mar {
     margin-right:0px;
}
 .headerright {
     display: block;
     float:right;
     text-decoration: none;
     text-align: center;
     padding: 0 .625em;
     line-height: 2em;
     color: #fff;
     letter-spacing: .07em;
     font-size: 17px;
	 margin-top:5px;.nav ul.menu li a
}
.headerright a{ color:#fff; }
.headerright span{margin-left:30px; }

 .contained {
     max-width: 1500px;
     margin: 0 auto;
     width: 100%;
     padding: .3125em .6125em;
}
/*shrink header*/
/*CHANGE HEIGHT of header-main-wrapper class below. Assign min-height based on header height so the content pushes down;
 you may need to remove this on home page or set as 0px for homepage if you use a photo or slideshow and set it as relative -- this is mostly for the secondary pages if they don't have anything there that's relatively positioned */
 .header-main-wrapper {
     position: relative;
    /*adjust based on actual header height.*/
}
.header.contained {padding-top:0;}
 header {
     width: 100%;
     background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #2f70b0 50%, #2f70b0 100%);
     overflow: visible;
     position: fixed;
     top: 0;
     z-index: 20;
     left: 0;
     -webkit-transition: height 0.3s;
     -moz-transition: height 0.3s;
     -ms-transition: height 0.3s;
     -o-transition: height 0.3s;
     transition: height 0.3s;
     -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
     -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
     box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
     height: 95px;
    /*important so the height transition is smooth to smaller header */
}
 header.smaller {
     height: 60px;
     padding-top: 0px;
    /*background: rgb(0,0,0);
	background: linear-gradient(180deg, #acacac 0%, #acacac 50%, #2f70b0 50%, #2f70b0 100%);
	*/
	background:#2f70b0;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -ms-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
     -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
     -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
     box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}
header.smaller .open-button.toggle-spot {top:7px!important;}

 header.smaller .headerright {font-size:14px; margin-top: 2px; font-style:italic; }
 
 header.smaller img {
    /*max-width: 110px;
     */
    /*change based on image size*/
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -ms-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
}
 header.smaller .logo {
     display:none;
}
 header.smaller .logo-smaller {
     display:block;
     float: left;
     width: auto;
     margin-top: 0px;
	 filter: drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.16));
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -ms-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
}

 
 header.smaller .nav {
     margin-top: 0px;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -ms-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
}
	header.smaller .nav ul.menu li a {margin-bottom:0; }
/*end header*/
 .header-wrap {
     width: 100%;
}
 .logo img {
     vertical-align: middle;
}

 .content {
     width: 100%;
     margin: 0 auto;
     position: relative;
}
 .content-full {
     color: #333;
}
 .footer-wrap {
     width: 100%;
     background: #acacac;
     color: #FFF;
}
 .footer-wrap a {
     color: #FFF;
}
 .footerright, .footerleft {
     font-size: .75em;
}
 .sidebar {
     padding: .625em;
}
 .sidebar h2 {
     font-size: 1.1em;
     margin: .83em 0 .3125em 0;
}
 .sidebar ul {
     list-style-type: none;
     margin: 0.3125em 0 0.625em 0.625em;
     padding-left: 0;
}
 .sidebar li li {
     list-style-type: none;
     margin-left: .95em;
     padding-left: 0;
}
 .ft-top {
     background: #f3f3f3;
     width: 100%;
     padding: 1px 0;
     margin: 0;
	 margin-top:-5px;
	 
}
.ft-top ul {list-style-type:none; padding-inline-start: 0px; }
.ft-top .flex-container {line-height: 1.7;font-size: 18px; color:#231f20; font-weight: 300; }
.ft-top h3 {font-family: roboto, sans-serif;text-transform:uppercase;color:#231f20; font-weight: 300;    margin-block-end: .6em;}
.ft-top a {color:#666;}
/* footer gforms special stryles */
.ft-top .gform_wrapper ul.gform_fields li.gfield {padding-right:0;min-height:45px!important; }
.ft-top .gform_wrapper .gform_footer input[type=submit] {background:#555555;text-transform:uppercase;}
.ft-top .gform_wrapper label.gfield_label {font-weight:300; }
.ft-top .gform_wrapper .gform_footer input[type=submit], .ft-top .gform_wrapper .top_label input.large {width:100%;max-width:300px; min-height:45px!important; border-radius:0; }

.ft-top .gform_wrapper .gform_footer {margin:0!important; padding:0px !important;}


.partners {display:inline-block; text-align:center;  width: 100%;}
.partners img {margin:10px; }

 .threecol h4 {
     margin: 0 0 5px 0;
     color: #333;
}
 .threecol h4 a {
     color: #6d4b70;
     text-decoration: none;
}
 .threecol h4 a:hover {
     text-decoration: underline;
}
/*flexbox designed for 4 footer columns, but can also be used for infinite # of columns/rows*/
 .flex-wrapper {
     margin-bottom: 1em;
     line-height: 1.5;
}
 .flex-fill {
     flex: 1;
     width: 100%;
}
/*whenever you need something to take over the whole width of the row/column, aka "fill" the current column it's in, so that you can nest multiple columns underneath it in the same column, don't close it out until the end of the whole column if there are vertical columns underneath*/
/*flex columns are the two vertical columns with nav links*/
 .flex-column {
     flex-direction: column;
}
/*flex-direction:column is for items that should be displayed vertically, not in a horizontal row, like two vertical columns of links side by side*/
/*flex:auto makes it so the space between the columns is removed, assuming there is space*/
 .flex-item {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row flex-direction: row;
     -webkit-justify-content: space-around;
     justify-content: space-around;
     flex: 1;
    /*this means each column will take up equal space*/
    /*flex: auto;
     */
    /*uncomment if you want the columns to be auto-sized based on natural width*/
    /*flex-wrap:wrap;
     */
    /*uncomment if you want the auto-sized columns to also wrap based on width, which can make them more responsive*/
     margin-right: 20px;
}
 .flex-item:last-child {
     margin-right: 0px;
}
 .flex-container {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row flex-direction: row;
     -webkit-align-items: flex-start;
     align-items: flex-start;
    /*pushes to the top, like vertical-align:top -- can center if preferable*/
     -webkit-justify-content: space-between;
     justify-content: space-between;
    /*alt option is "space-around"*/
     flex-wrap: wrap;
    /*makes items auto-wrap which sort of works as auto-responsiveness, but can be turned off it it makes things funky*/
     flex: 1;
    /*shorthand for flex-grow which means each row/column is of the same width -- can also be auto*/
}
/*if using images next to address/phone number, see below. could probably use flex, but inline-block is easier :D */
 .icon {
     display: inline-block;
     vertical-align: top;
     margin-right: 10px;
     max-width: 10%;
}
.icons a {
    color: #333;
    font-size: 120%;
}
/*max-width keeps the address from wrapping under the icon*/
 .info-block {
     display: inline-block;
     vertical-align: top;
     max-width: 83%;
}
/*the end of icon images*/
 hr {
     height: 1px;
     background: #f0f0f3;
     border: none;
}
/* links */
 a {
     color: #2f70b0;
     text-decoration: none;
     transition: .3s all;
}
 a:hover {
     text-decoration: none;
     color: #8698a5;
}
 .content a {
     color: #2f70b0;
     text-decoration: none;
     transition: .3s all;
}
 .content a:hover {
     color: #8698a5;
}
 .sidebar a {
     color: #2f70b0;
}
 .sidebar a:hover {
     color: #8698a5;
}
 .content a.readmore {
     text-decoration: underline;
}
 .content a.readmore:hover {
     text-decoration: none;
}
 input[type=submit] {
     background: #2f70b0;
     color: #FFF;
     padding: .1875em .4375em;
	 border:0;
     margin: 0.625em 0;
     transition: .3s all;
	 min-height:45px;
}
.mainform input[type=submit] { margin-top:0;}

 input[type=submit]:hover , .ghost-btn:hover, .ft-top .gform_wrapper .gform_footer input[type=submit]:hover{
     background: #BD4D46;
     color: #FFF!important;
}
  a.ghost-btn {margin-top:10px;}

.ghost-btn {background: transparent;
     color: #105ca1 !important;	 font-family:'Proxima Nova';	 font-weight:300;	 text-transform:uppercase;	 letter-spacing:1px;
     padding: 10px 20px;
	 border:1px solid #105ca1;
	 border-radius:0;
     margin: 0.625em 0;
     transition: .3s all;
	 min-width:185px;
	 min-height:45px;
	 display: inline-block;
}
 div.entry {
     position: relative;
}
 .post-prev-img {
     float: left;
     padding: 0 0.95em 0.625em 0;
}
 .alignleft {
     float: left;
}
 .alignright {
     float: right;
}
 .aligncenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 img.alignleft {
     margin: 0 0.625em 0.625em 0;
}
 img.alignright {
     margin: 0 0 0.625em 0.625em;
}
 img.aligncenter {
     margin: 0 auto 0.625em;
}
 .wp-caption {
     margin-bottom: 24px;
     max-width:100%;
     color: #767676;
}
 .wp-caption img[class*="wp-image-"] {
     display: block;
     margin: 0;
}
 .wp-caption-text {
     font-size: 0.75em;
     font-style: italic;
     line-height: 1.5em;
     margin: 0.55em 0;
     padding-right: 0.625em;
}
 .wp-smiley {
     border: 0;
     margin-bottom: 0;
     margin-top: 0;
     padding: 0;
}
 img.wp-post-image {
     border: 1px solid #f0f0f3;
     padding: 2px;
}

/* key west guide list*/
.page-id-105 .coolist {max-width:800px; margin:0 auto; }
.coolist ul{ 
	list-style-image: url('images/bayfront-fish-sm.png');
	font-size: 20px;
}

 @media (min-width: 1025px) {
	 h1.page-title {font-size: 45px; }
     .navclass ul {
         -webkit-padding-start: 0px;
         -webkit-margin-before: 0;
         -webkit-margin-after: 0;
         margin:0;
    }
     .navclass li {
         position: relative;
    }
     .navclass li a {
         display: block;
         text-transform:uppercase;
    }
     .navclass ul.sub-menu {
         padding:10px 0px!important;
         background-color:#2f70b0;
         box-shadow:0px 4px 10px rgba(0,0,0,.3);
    }
    /*this adds the arrow that points down in the main navigation if there's a submenu -- you may need to add again under mobile sizing and change the color*/
     .navclass .menu-item-has-children > a:after {
         width: 0;
         height: 0;
         border: 0.313em solid transparent;
         border-bottom: none;
         border-top-color: #ccc;
        /*change depending on arrow color needed*/
         content: '';
         vertical-align: middle;
         display: inline-block;
         position: relative;
         right: -0.313em;
    }
     .nav {
         clear: right;
         float:right;
		 margin-top: 18px;
    }
     .nav ul.menu > a {
         display: none;
    }
     .nav ul.menu {
         width: auto;
         margin: 0 auto;
         position: relative;
         z-index: 1;
         padding: 0;
         text-align: center;
    }
     .nav ul.menu li {
         list-style-type: none;
         position: relative;
         display: inline-block;
    }
     .nav ul.menu li a {
         display: block;
         text-decoration: none;
         text-align: center;
         padding: 0 .825em;
         line-height: 30px;
         color: #fff;
         letter-spacing: .07em;
         font-size: 18px;
		 font-weight: 300;
    }
     .nav ul.menu li > a {
         position: relative;
         margin-bottom:5px;
    }
     .nav ul.menu li ul li > a {
         position: relative;
         margin-bottom:0px;
    }
     .nav ul.menu li ul li > a:hover:before {
         visibility: hidden;
    }
     .nav ul.menu li > a:hover:before {
         visibility: visible;
         -webkit-transform: scaleX(1);
         transform: scaleX(1);
    }
    /* second level */
     .nav ul.menu li ul {
         display: block;
		 opacity: 0;
		
		 visibility:hidden;
         position: absolute;
         top: 100%;
         padding: 0;
         margin: 0;
		 filter: drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.16));
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -ms-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
	 transition-timing-function: ease-in-out;
    }
     .nav ul.menu li:hover > ul.sub-menu {
         opacity: 1;
		 visibility:visible;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     -ms-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
	 transition-timing-function: ease-in-out;
    }
     .nav ul.menu li ul li {
         white-space: nowrap;
         display: block;
    }
     .nav ul.menu li ul li a {
         text-align: left;
         padding: 0 1.2em;
        /* background: rgba(0, 0, 0, .5);
         */
        /*background color for dropdown links*/
         width: 240px;
         text-transform:none;
         line-height: 30px;
         letter-spacing:.5px;
         font-size:15px;
         color: #fff;
    }
     .nav ul.menu li ul li a:hover {
         background: #fff;
		 color:#2f70b0;
        /*background hover color*/
    }
    /*more levels*/
     .nav ul.menu li ul li {
         white-space: nowrap;
         display: block;
    }
    /*this is the arrow/triangle that points to the right for submenu items with another submenu - you may need to change the color, and also the margin to adjust where it lands. If you want it next to the menu item, change float:right to display:inline-block and remove the margin-top */
     .nav ul.menu li ul li.menu-item-has-children > a:after {
         border: solid white;
         border-width: 0 2px 2px 0;
         float:right;
         margin-top:10px;
        /*may need to change*/
         padding: 3px;
         transform: rotate(-45deg);
         -webkit-transform: rotate(-45deg);
    }
     .nav ul.menu ul ul {
         top: 0;
         left: 100%;
         display: block;
    }
     .nav ul.menu li:hover ul ul {
         display: none;
    }
     .nav ul.menu ul li:hover ul {
         display: block;
    }
}
/* cell phones/small tablets (1024px) */
 @media (max-width: 1024px) {

    /*menu mobile*/
     ul.clearfix.hide-nav {
         display:none;
    }
     header.smaller .navclass .menu-item-has-children > a:after {
         border-top-color: #666!important;
    }
     .navclass li {
         font-size:19px;
    }
     .navclass li a {
	color: #555555;
    }
     #nav-acc > ul > li.has-sub.active > a:after {
         content: '';
         vertical-align: middle;
         position: relative;
         right: -8px;
         bottom: 0em;
         border: solid #666;
         border-width: 0 2px 2px 0;
         display: inline-block;
         padding: 3px;
         transform: rotate(225deg);
         -webkit-transform: rotate(225deg);
         transition:.2s all;
    }
     #nav-acc > ul > li > ul > li.has-sub.active > a:after {
         content: '';
         vertical-align: middle;
         position: relative;
         right: -8px;
         bottom: 0px;
         border: solid #666;
         border-width: 0 2px 2px 0;
         display: inline-block;
         padding: 3px;
         transform: rotate(225deg);
         -webkit-transform: rotate(225deg);
         transition:.2s all;
    }
     .navclass .menu-item-has-children > a:after {
         content: '';
         vertical-align: middle;
         position: relative;
         right: -8px;
         bottom: 1px;
         border: solid #666;
         border-width: 0 2px 2px 0;
         display: inline-block;
         padding: 3px;
         transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
    }
    /*end menu*/
    /*add this section for nav sub-menu down arrow if your nav colors change so you can change the arrow color*/
     #nav .menu-item-has-children > a:after {
         width: 0;
         height: 0;
         border: 4px solid transparent;
         border-bottom: none;
         border-top-color: #fff;
         content: '';
         vertical-align: middle;
         display: inline-block;
         position: relative;
         right: -4px;
    }
    /*toggle applies to the hamburger menu button*/
     .toggle-spot {
         position: relative;
         width:30px;
         height:30px;
		 margin:0 auto;
		 display:block;
		 top:20px;
    }
    /*where do you want hamburger to show up? */
     #toggle {
         display: block;
         width: 60px;
         height: 50px;
         margin: 0;
         position: absolute;
         top: 48px;
         right: 5px;
         cursor:pointer;
    }
     #toggle span:after, #toggle span:before {
         content: "";
         position: absolute;
         left: 0;
         top: -9px;
    }
     #toggle span:after {
         top: 9px;
    }
     #toggle span {
         position: relative;
         display: block;
    }
     #toggle span, #toggle span:after, #toggle span:before {
         width: 100%;
         height: 5px;
         background-color: #f4f4f4;
         transition: all 0.3s;
         backface-visibility: hidden;
         border-radius: 20px;
    }
    /*header sizes on mobile*/
     header.smaller .logo-smaller {
         display: inline-block;
         text-align: left;
         padding-left: 10px;
         width: auto;
    }
     header.smaller .headerright {
         display: none;
    }
	.parallax-home {min-height: 600px; }

     .nav ul.menu li a {
         color: #fff;
         text-decoration: none;
         text-transform: uppercase;
         text-align: left;
         font-size: 16px;
         margin-right: 8%;
    }
     .nav ul.menu li a:hover {
         color: #ccc;
         text-decoration: none;
    }
     .menu {
         -webkit-padding-start: 0;
         margin-left: 25px;
         margin-right: 25px;
    }
     .navclass {
         position: absolute;
         top: 19%;
         right: 0;
         -webkit-padding-start: 0px;
         z-index: 500;
         width: 100%;
    }
     .navclass li {
         list-style-type: none;
         line-height: 40px;
    }
     .navclass > ul {
         height: auto;
         display: none;
         position: absolute;
         left: 0;
         right: 0;
         top: 60px;
         -webkit-margin-before: 0px;
         -webkit-padding-start: 0px;
    }
     .navclass li ul {
         display: block;
         position: absolute;
         top: 100%;
    }
     .navclass li ul {
         position: static;
         padding: 1.25em;
         padding-top: 0;
    }
}
/*flexbox break for smaller screens*/
 @media (min-width: 40em) and (max-width: 60em) {
     .flex-item {
    flex: 2 0 45%;
    margin-right: 5px;
    }
     .flex-column {
         padding: 0 10px;
    }
	  .halfpage.txtpart, .txtpart-inner  {height:auto;    min-height: 450px;}
	  .halfpage p {font-size: 14px;}
}

	
   @media (max-width: 1000px) {
	   
  .txtpart-inner {padding:20px;}
  a.ghost-btn {margin-top:10px;}
  p {font-size:16px;} 	    
  
  
  }
  
 /*640px */
  @media (max-width: 39.9em) {
	  .halfpage.txtpart, .txtpart-inner  {height:auto;    min-height: 450px;}
	  .homestyle .flex-item {min-height:450px; }
	  header {background: linear-gradient(180deg, #acacac 0%, #acacac 50%, #2f70b0 50%, #2f70b0 100%);}
	  .parallax-home {/*background-image: url(images/homeslide1.jpg);*/margin-top:95px; min-height: 460px;    background-repeat: no-repeat;background-size: contain!important;    background-position: unset!important; }
	  .qswrap input[type=submit]:hover {border:4px solid #fff; }
 	 .ft-top .gform_wrapper form {text-align: center;}
    /*headings*/
     h1 {
         font-size:32px;
         line-height:1.25;
    }
     h2 {
        font-size:26pt;
         line-height:1.25;
    }
     h3 {
        font-size: 22px;
         line-height:1.25;
    }
     p {
        font-size:15px;
         line-height:1.6;
    }
    .slidewrap img {
        margin-top: 75px;
    }
     .footer {
         padding: 0 0.31em;
    }
    .headerright {
		 margin-top:0;
    }
	.headerright span{display:none; }
	.logo {box-shadow: none;max-width:150px; }

     .footerleft, .footerright {
         float:none;
         text-align:center;
    }
    /*flexbox stuff*/
     .content-left, .sidebar {
         float:none;
         max-width:100%;
         padding:0px;
         border:0px;
    }
     .flex-item {
         flex: 0 0 100%;
         flex-wrap: wrap;
         margin: 5px auto;
         text-align: center;
    }
     .flex-column {
         flex: 0 0 50% !important;
         align-items: center !important;
    }
    /*if you prefer the nav links to take up 100% width and not be in two columns for mobile, delete this and do flex-column {
         margin:0 auto !important;
     */
    /*end flex*/
	
	}

  
    @media (min-width: 480px) {
		
	}


    .no-rentals {
        margin: 2vh 0vw;
        border: 1px solid #2F70B0;
    }