@charset "utf-8";
/* CSS Document */
	html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit; vertical-align: baseline;}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
	body {line-height: 1;}
	ul, ol {list-style: none;}
	table {border-collapse: collapse; border-spacing: 0;}
	figure {position: relative;} figure img {width: 100%;} /** {margin: 0; padding: 0;}*/
/* #Basic Styles ================================================== */
body {background-color: #fff; color: #003763; font-family: 'robotolight'; font-size: 16px; line-height: 22px; margin: 0; /*overflow-x: hidden;*/ }
html {scroll-behavior: smooth;}
.wow {visibility: hidden;}
/* #Typography ================================================== */
@font-face {font-family: 'playfair_displaybold';src: url('../fonts/playfairdisplay-bold-webfont.eot'); src: url('../fonts/playfairdisplay-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/playfairdisplay-bold-webfont.woff2') format('woff2'),  url('../fonts/playfairdisplay-bold-webfont.woff') format('woff'), url('../fonts/playfairdisplay-bold-webfont.ttf') format('truetype'), url('../fonts/playfairdisplay-bold-webfont.svg#playfair_displaybold') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'montserratregular'; src: url('../fonts/montserrat-regular-webfont.eot'); src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/montserrat-regular-webfont.woff2') format('woff2'), url('../fonts/montserrat-regular-webfont.woff') format('woff'), url('../fonts/montserrat-regular-webfont.ttf') format('truetype'), url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'robotolight'; src: url('../fonts/roboto-light-webfont.eot');src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto-light-webfont.woff2') format('woff2'), url('../fonts/roboto-light-webfont.woff') format('woff'), url('../fonts/roboto-light-webfont.ttf') format('truetype'), url('../fonts/roboto-light-webfont.svg#robotolight') format('svg'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'playfair_displaybold_italic'; src: url('../fonts/playfairdisplaybolditalic/playfairdisplay-bolditalic-webfont.woff2') format('woff2'), url('../fonts/playfairdisplaybolditalic/playfairdisplay-bolditalic-webfont.woff') format('woff'), url('../fonts/playfairdisplaybolditalic/playfairdisplay-bolditalic-webfont.ttf') format('truetype'), url('../fonts/playfairdisplaybolditalic/playfairdisplay-bolditalic-webfont.svg#playfair_displaybold_italic') format('svg');font-weight: normal;font-style: normal;}

h1 {color: #488aed; font-family: 'playfair_displaybold'; font-size: 46px; font-weight: normal; line-height: 52px; margin: 0 auto; padding-bottom: 8px;}
h2 {color:#003763;font-family: 'montserratregular'; font-size: 40px; font-style: normal; font-weight: 700; line-height: 48px; letter-spacing: -.04em; margin: 0 auto; padding-bottom: 10px;}
h3 {color: #003763;font-family: 'montserratregular'; font-size: 30px; font-style: normal; font-weight: normal; line-height: 38px;letter-spacing: -.01em; margin: 0 auto; padding-bottom: 10px;}
p {color: #003763; font-family: 'robotolight', Arial, sans-serif; font-style: normal; font-weight: normal; line-height: 22px; padding-bottom: 16px; white-space: normal;}
a:link {text-decoration: none;} a {transition: color 0.3s ease 0s;}
em {font-style: italic; line-height: 14px;}
.small {font-size: 80%;}
strong {font-weight: bold;}

/* Alternate text styles and colors */
.center-text {text-align: center;}
.subtitle-bold {font-weight: 700;}
.sub-header-para {font-family: 'robotolight', Arial, sans-serif; font-size: 28px; letter-spacing: 0; padding-bottom: 0; line-height: 32px; font-weight: bold;}
.color-white {color: #fff;}
.color-black {color: #000;}
.color-teal {color: #488aed;}
.color-blue {color: #003763;}

hr {border: 0;border-bottom: 1px dotted #c2c2c2; margin: 0 0 10px 0; padding: 0; clear: both;}
.break{ display: inline-block; width: 100%; height: 0;}
.divider-blue {border: 0;border-bottom: 2px solid #003763; margin: 6px 0 35px 0; padding: 0; clear: both;}
.divider-wht {border: 0;border-bottom: 2px solid #fff; margin: 6px 0 35px 0; padding: 0; clear: both;}

/* ----- Image Styles ---------------------------------------------------*/
img {display: block; height: auto; margin: 0 auto; max-width: 100%;}
.floatleft {float: left; height: auto;margin: 10px 25px 15px 0; max-width: 100%;}
.floatright {float: right; height: auto;margin: 0 auto; padding: 5px 0 10px 25px; max-width: 100%;}
.floatcenter {display: block; height: auto; margin: 0 auto; max-width: 100%; padding-bottom: 25px;}
a img {border:none;}
.footer-logo {display: inline-block; height: auto; margin-bottom: 10px; max-width: 100%; position: relative;}

/* ------------ buttons -------------------*/
.button-main a {border-radius: 50px; display: inline-block; font-size: 30px; font-weight: bold; height: auto; line-height: 30px; margin: 0 auto; padding:6px 30px 10px; position: relative; text-align: center;}
.quickbtn a {background-color: #f47f24; color: #fff;}
.quickbtn a:hover {background-color: #4d4d4d; color: #fff;}

/* ------------ icons -------------------*/
.jump-up {margin: 0 auto;padding: 0;max-width: 100%;height: auto;position: absolute; bottom: 0;left: 0;right: 0;}
.gsicon {margin: 0 auto; padding: 6px 0 2px 0;}
.social-icons {display: inline-block; height: auto; margin: 0; padding-right: 5px; position: relative;}
/* #CLearFix */.clearfix:before,.clearfix:after {content: " "; display: table;}.clearfix:after {clear: both;}.clear {clear: both;}.clearfix:after {clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden;}

.wrapper {background-color: #5a9fff; height: auto; margin: 0 auto; min-height: 100%; max-width: 100%; min-height: 100vh; position: relative;}
.content {padding:20px;}

/* ----------TEMP NEW LANDING PAGE CSS ADDED 06 09 2021--------------*/
.landingpage-container {background: #fff url('../images/fl-footerbk.png') bottom center no-repeat; height: auto; margin: 0 auto; max-width: 100%; padding-top: 130px; position: relative;}
.landingpage-content {height: auto; margin: 0 auto; max-width: 100%; min-height: 820px; padding: 0; position: relative;}

/* ----------------------UPDATED LOGO AND HEADER COLORS AND GRAPHICS 02 21 2021--------------------------*/
.header-blue {background: rgb(0,55,99);background: linear-gradient(180deg, rgba(0,55,99,1) 0%, rgba(0,55,99,1) 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); height: 125px; width: 100%;}
.header-blue:after {background: url('../images/dec-home-header-wave3-flat.svg') center left no-repeat;bottom: 0; content: ''; height: 217px; left: 0; position: absolute; right: 0; top: 22px; width: 100%;}
.header-container2 {margin: 0 auto; max-width: 1200px; padding: 6px 20px 0 20px; position: relative;}
.logo-container2 {float: left; height: 118px; margin: 0 auto; max-width: 440px; position: absolute; z-index: 1000;}
.logo2 {display: inline-block; margin: 0 auto; max-width: 100%; position: relative; transition: all 0.5s ease 0s;}

.header-beach-container2 {background:rgb(87,139,231);background: linear-gradient(180deg, rgba(87,139,231,1) 0%, rgba(87,139,231,1) 24%, rgba(231,227,226,1) 25%); opacity: 1;height: 117px; width: 100%;}
.header-beach-container-inner {background:rgb(87,139,231);background: linear-gradient(180deg, rgba(87,139,231,1) 0%, rgba(87,139,231,1) 24%, rgba(231,227,226,1) 25%); opacity: 1;height: 117px; width: 100%;}

/* ----------------------very top header---------------------------*/
.site-header {padding: 0;position: relative;width: 100%;z-index: 99;} /*change padding to 95px for more slider or to 0 if header is transparent*/
.header-wrap {background: rgb(0,55,99);background: linear-gradient(180deg, rgba(0,55,99,1) 65%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 80%, rgba(0,55,99,1) 80%); height: 75px; width: 100%;}
.icon-top-container {height: 50px; padding: 0; position: absolute; right: 0; top: 0; width: auto;}
.icons-left {display: inline-block; height: auto; margin: 0 4px 0 0; max-width: 100%; padding: 0; vertical-align: middle;} /* phone icon in top header */
.phone-text {color: #e7e3e2; letter-spacing: .5px; line-height: 24px; padding: 8px 0 5px 10px; position: relative; text-align: right; width: auto;}
.phone-text a {color: #e7e3e2;}
.phone-text a:hover {color: #fff;}

/* -------------------- main navigation ---------------------------------*/
.nav-container {color: white; display: block; height: 40px; max-width: 100%; padding: 0; position: relative; width: auto; z-index: 1000;}
nav {font-family: 'robotolight'; margin: 0 auto; margin-right: 13%; text-align: right;}/*width: 60%;*/
nav ul {/*display: table;*/ margin: 0 auto; position: relative; text-align: right;}
nav ul li {display:inline-block; padding: 0; margin: 0;} /*float: right;*/
nav ul li a {color: #fff; display: block; font-size: 16px; letter-spacing: 0.01em; line-height: 24px; padding: 8px 12px; transition: all 0.5s ease 0s; width: auto;}
nav ul li a:hover {color: #488aed; transition: all 0.5s ease 0s;}
.menu-toggle {cursor: pointer; padding: 1em; position: absolute; right: .5em; top: 0; z-index: 3000;}
.hamburger,
.hamburger::before,
.hamburger::after {background: #fff; border-radius: 3px; content: ''; display: block; height: 3px; transition: all ease-in-out 500ms; width: 1.75em;}
.hamburger::before {transform: translateY(-6px);}
.hamburger::after {transform: translateY(3px);}
.open .hamburger {transform: rotate(45deg);}
.open .hamburger::before {opacity: 0;}
.open .hamburger::after {transform: translateY(-3px) rotate(-90deg);}
@media (min-width: 960px) {.menu-toggle {display: none;}}
/* ------------------------------ BACKGROUND SECTION COLORS------------------------------------*/
.alt-bkgnd-teal {background-color: #10cfc8; min-height: 500px;}/* -------- Home welcome---------*/
.alt-bkgnd-cream {background-color: #f6dfa3; min-height: 500px;}
.alt-bkgnd-blue {background-color: #003763; min-height: 500px;}
.alt-bkgnd-white {background-color: rgba(255,255,255, 0.7); padding: 10px 0 10px 0;}
/* ----- Special areas ---------------------------------------------------*/
.section-header {text-align: center; margin: 30px 0 80px;}
.block-padding {padding: 120px 0 120px;}
article {height: auto;width: 100%;}
.article-header {clear: both; height: auto; margin: 0 auto; padding-top: 50px;width: 100%;}

/* ---------------------- NEW FLORIDA ELITE HOME PAGE ONLY PRODUCT CARDS WITH CART AND BEACH IMAGES ADDED 11 03 2021----------------------------------*/
.location {height: auto; margin: 0 auto; max-width: 100%; padding: 0; position: relative; width: 100%;}
.location-card-row {display: flex; padding-right: 20px;/* equal height of the children */}
.location-card-col {flex: 1; /* additionally, equal width */}

.card {background-color:#f1f1f1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); font-family: 'montserratregular'; margin:6px; padding: 4px; position: relative; text-align: center;} /*margin: auto; padding: 6px;*/
.card:hover .overlay {opacity: 0.9;}
.card-image {display: block; height: auto; padding-bottom: 10px; width: 100%;}
.card-content {background-color: #fff;}
.card button {border: none;outline: 0; padding: 12px;color: white;background-color: #003763;text-align: center;cursor: pointer;width: 100%;font-size: 18px;}
.card button:hover {opacity: 0.7;}
.button-title {display: block; font-family: 'montserratregular'; font-size: 22px; line-height: 26px; margin: 0 auto; padding: 0;}
.button-title-smaller {display: block; font-family: 'montserratregular'; font-size: 20px; line-height: 26px; margin: 0 auto; padding: 0;}
.button-subtitle {display: block; font-family: 'montserratregular'; font-size: 18px; line-height: 20px; padding: 0;margin: 0;}

.card-cart {height: auto; max-width: 100%; padding-top: 20px; position: relative;}
.overlay {background-color: #10cfc9; bottom: 0; height: 100%; left: 0; right: 0; opacity: 0; position: absolute; top: 0; transition: .5s ease; width: 100%;} 
.overlay-box-button a {border: #fff solid 2px; background-color: #fff; color: #000; font-family: 'montserratregular'; font-weight: 400; font-size: 14px; left: 15%; line-height: 20px; outline: thin solid #fff; outline-offset: 10px; position: absolute; padding: 10px; right: 15%; top: 35%; text-align: center; text-decoration: none; text-transform: uppercase;}
/*.overlay-box-button a {border: #fff solid 2px; background-color: #fff; color: #000; font-family: 'montserratregular'; font-weight: 400; font-size: 16px; left: 50%; line-height: 18px; outline: thin solid #fff; outline-offset: 10px; position: absolute; padding: 10px; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; text-decoration: none; text-transform: uppercase;} ORIG */
.overlay-box-button a:hover {background-color: #488aed; color: #fff;}

@media (max-width: 810px) {
  .overlay-box-button a {left: 10%; right: 10%;}
  .button-title {font-size: 18px; line-height: 22px;}
  .button-title-smaller {font-size: 16px; line-height: 22px;}
  .button-subtitle {font-size: 16px; line-height: 18px;}
}
@media (max-width: 700px) {
  .location-card-row {display: block; padding: 0;}
  .location-card-col {float: left; width: 50%;}
  .card {margin: 15px;}
}
@media (max-width: 414px) {
.location-card-col {float: none; width: 100%;}
}

/* ---------------------- NEW WAVES ADDED 11 03 2021----------------------------------*/
.waves {height:15vh;margin-bottom:-7px; /*Fix for safari gap*/min-height:100px; max-height:150px; position:relative; width: 100%;}
/* Animation */
.parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s; animation-duration: 20s;}
@keyframes move-forever {0% {transform: translate3d(-90px,0,0);}100% {transform: translate3d(85px,0,0);}}
/*Shrinking for mobile*/
@media (max-width: 768px) {.waves {height:40px; min-height:40px;}}

/* ----- footer new for florida landing page ---------------------------------------------------*/
footer {background-color: #488aed;bottom: 0; margin: 0 auto; min-height: 400px; padding: 30px 0; position: relative; width: 100%;} /* changed background color from #488aed */
footer p {color: #fff; line-height: 23px;}
footer a {color: #fff; display: inline-block;}
footer a:hover {color: #003763;}
.footer-title-h3 {color: #003763; font-family: 'montserratregular'; font-weight: normal; letter-spacing: -.01em; font-size: 26px; line-height: 28px; margin: 0 auto; padding-bottom: 20px;}
.footer-nav ul {margin: 0 auto; position: relative;}
.footer-nav li {letter-spacing: 0.02em; list-style-type: none; padding-bottom: 6px;}
.footer-nav li a {color: #fff; font-weight: normal; text-decoration: none;}
.footer-nav li a:hover {color: #003763; font-weight: normal; text-decoration: underline;}
.social-icon-box {margin: 0 auto; padding: 0; position: relative; width: 100%;}
/*--------------------------copyright_area--------------------*/
.copyright {background-color: #488aed;min-height: 50px; margin: 0 auto; position: relative; width: 100%;}
.copyright p {color:#fff; text-align: center;}
.copyright a {color: #fff; text-decoration: none;}.copyright a:hover {color: #000;}
.sitecredit {padding-top: 10px;}

/*-------------------------------------------MOBILE MOBILE MOBILE DEVICE AREA SETTINGS----------------------------------------------*/
/*Styles for screen 960px and lower for N A V I G A T I O N */
@media only screen and (max-width: 960px) {
.icon-top-container {right: 100px;}
.header-container2 {padding: 6px 0 0 40px;}
.nav-container {padding: 0; z-index: 1000;}
.navbar-collapse {height: 1vh; overflow: hidden; position: absolute; right: 0; top: 0; transition: all 0.6s ease; z-index: 1000;}
.collapse {height: 100vh;}
nav {background: rgb(0,55,99);background: linear-gradient(180deg, rgba(0,55,99,1) 0%, rgba(0,55,99,1) 45%, rgba(255,255,255,0) 60%); display: block; /*float: right;*/ height: 100vh; padding: 0; position: relative; right: 0; top: 44px; transition: 0.5s; width: 215px; z-index: 1500;}
nav ul {display: block; padding: 0;}
nav ul li {display: block; list-style: none; padding: 0; width: 100%;}
nav ul li a {border-bottom: 1px solid #fff; color: #fff; display: block; font-size: 16px; line-height: 20px; padding: 15px 20px; text-align: left;}
nav ul li a:hover {background-color: #488aed; color: #fff; border-top: 0; border-right: 0; border-left: 0;}
}
/* ------------------ END NAVIGATION --------------------- */
/*Styles for screen 960px to 768px*/
@media screen and (max-width: 960px) and (min-width: 768px) {}

/*Styles for screen 900px and lower*/
@media screen and (max-width: 900px) {
h1 {font-size: 46px; line-height: 50px;}
h2 {font-size: 36px; line-height: 40px;}
h3 {font-size: 26px; line-height: 30px;}
}

/*Styles for screen 880px and lower*/
@media screen and (max-width: 880px) {
.block-padding {padding: 10px 0 20px 0;}
.sub-header-para {font-size: 24px; line-height: 30px;}
.footer-title-h3 {font-size: 22px; line-height: 26px;}
}

/*Styles for screen 768px and lower*/
@media screen and (max-width: 768px) {
h1 {font-size: 40px; line-height: 46px;}
h3 {font-size: 20px; line-height: 24px;}
.phone-text {padding: 5px 0;}
.landingpage-container {padding-top: 110px;}
}

/*Styles for screen 603px and lower*/
@media screen and (max-width: 603px) {
.article-header {padding: 20px 0;}
.section-header {margin: 30px 0;}
h1 {font-size: 34px; line-height: 42px; padding: 0 0 12px; text-align: center;}
h2 {text-align: center;}
h3 {font-size: 30px; line-height: 32px; text-align: center;}
.landingpage-container {padding-top: 80px;}
.landingpage-content {min-height: 1400px;}
.smaller {width: 50%;}
.floatright {float: none; padding: 10px;}
.floatleft {float: none; margin: 0 auto; padding: 10px;}

footer {padding: 0;}
footer p {text-align: center;}
footer a {color: #fff; display: inline;}
.footer-nav li {padding-bottom: 4px;}
.footer-nav li {text-align: center;}
.footer-title-h3 {text-align: center;}
.social-icon-box {text-align: center;}
.footer-logo {display: block; text-align: center;}
}
/*Styles for screen 450px and lower*/
@media only screen and (max-width : 450px) {
.article-header {padding: 20px 0 0 0;}
.section-header {margin: 20px 0;}
.floatleft {float: none;}
.block-padding {padding: 20px 0 35px;}
.icon-top-container {right: 60px;}
.logo2 {padding-top: 10px; max-width: 90%;}
.header-beach-container-inner {height: 150px; position: relative; display: inline-block;}
.card-content {padding-top: 20px;}
.card-image {display: none;}
.button-title {font-size: 24px; line-height: 26px;}
.button-title-smaller {font-size: 20px; line-height: 26px;}
.card-cart {max-width: 60%;}
}

/*Styles for screen 380px and lower*/
@media only screen and (max-width : 380px) {
.bodycontent {padding: 0;}
h1 {font-size: 30px; line-height: 38px;}
h2 {font-size: 28px; line-height: 34px;}
h3 {font-size: 26px; line-height: 30px;letter-spacing: -.018em; padding-bottom: 14px;}
.sub-header-para {font-size: 22px; line-height: 28px; padding-bottom: 0;}
footer p {line-height: 20px; padding-top: 10px;}
.logo2 {padding-top: 25px;}
}