/*
Theme Name: AquaSport
Theme URI: https://tactusmarketing.com
Author: Jalin Burton
Author URI: https://jalinburton.com
Description: Custom theme built for AquaSport Boats.
Version: 7.1.98
Tested up to: 6.5
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tactus
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
bumble is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
/* ------------------------------
General Styles
------------------------------ */
@-ms-viewport {
width: device-width;
}
/* html {
overflow-x: hidden;
} */
body {
font-size: 18px;
color: #272727;
background: #fff;
/* overflow: hidden; */
}
html {
scroll-padding-top: 40px;
}
/* body::-webkit-scrollbar,
*::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
background: #fff;
}
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
background-color: #272727;
border-radius: 5px;
border: 1.5px solid #fff;
} */
h1,
h2,
h3,
h4,
h5 {
color: #272727;
letter-spacing: normal;
font-weight: 600;
/* text-transform: uppercase; */
/* line-height: 1em; */
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2.25em;
}
h3 {
font-size: 1.85em;
}
h4 {
font-size: 1em;
}
h1:not(.site-title):before,
h2:before {
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
.btn,
a.btn {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
.btn {
padding: .5em 3.5em !important;
text-shadow: none !important;
}
.btn-white {
background: #fff !important;
}
.btn-white-stroke {
background: transparent !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.btn-white-stroke-hover:hover {
background: transparent !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.btn-black {
background: #272727 !important;
}
.btn-black-stroke {
background: transparent !important;
border: 1px solid #272727 !important;
color: #272727 !important;
}
.btn-black-stroke-hover:hover {
background: transparent !important;
border: 1px solid #272727 !important;
color: #272727 !important;
}
.gradient-title {
font-weight: 900;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: repeat;
background-image: -webkit-linear-gradient(left, #CEE480 0%, #57C71D 100%);
background-size: 100%;
}
.gradient-title-grey {
font-weight: 900;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: repeat;
background-image: -webkit-linear-gradient(left, #595959 0%, #ABB2BC 100%);
background-size: 100%;
}
.header-small {
font-size: 1.75em !important;
}
.header-medium {
font-size: 2.75em !important;
font-weight: 900;
line-height: 1.25em;
}
.header-large {
font-size: clamp(2.5em, 10vw, 5em) !important;
}
.header-xl {
font-size: clamp(2em, 10vw, 3em) !important;
font-weight: 700;
line-height: 1;
}
h1.header-xl {
font-size: clamp(2em, 10vw, 4em) !important;
}
/* IE10+ */
/* @media screen and (min-width: 640px), screen\9 {
.header-large {
font-size: 3.5em !important;
}
} */
.special-font {
font-weight: 100 !important;
}
.special-font.fw-5 {
font-weight: 500 !important;
}
section {
position: relative;
z-index: 5;
}
/* .section-header {
text-transform: uppercase;
position: relative;
padding: 0 30px;
display: inline-block;
text-align: center;
}
.section-header:after {
content: "";
position: absolute;
width: 100%;
height: 40%;
border-radius: 20px;
background: red;
left: 0;
top: 35%;
z-index: -1;
} */
/* --------------------
Section Fade in on Scroll */
.to-transition {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in-out;
}
.to-transition.transitioned {
opacity: 1;
visibility: visible;
}
/* Section Fade in on Scroll
-------------------- */
.p-large {
font-size: 1.25em;
}
.z-n1 {
z-index: -1 !important;
}
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-top {
z-index: 10;
position: relative;
}
a {
color: unset;
transition: all 0.25s ease-in-out;
text-decoration: none;
}
a:visited,
a:focus {
outline: 0;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a.anchor-dark {
color: #3b3b3a;
}
a.anchor-white {
color: #fff !important;
}
a.anchor-white-hover:hover {
color: #fff !important;
}
a.anchor-black {
color: #272727 !important;
}
a.anchor-black-hover:hover {
color: #272727 !important;
}
.color-primary-hover:hover {
color: #272727 !important;
}
p a {
text-decoration: underline !important;
}
p {
font-size: 1em;
line-height: 1.5em;
}
ul {
padding-left: 20px;
}
.pt-100 {
padding-top: 100px !important;
}
.pb-100 {
padding-bottom: 100px !important;
}
.py-100 {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
.pt-150 {
padding-top: 150px !important;
}
.pb-150 {
padding-bottom: 150px !important;
}
.py-150 {
padding-top: 150px !important;
padding-bottom: 150px !important;
}
.pt-200 {
padding-top: 200px !important;
}
.pb-200 {
padding-bottom: 200px !important;
}
.py-200 {
padding-top: clamp(100px, 20vw, 200px) !important;
padding-bottom: clamp(100px, 20vw, 200px) !important;
}
/* IE10+ */
/* @media screen and (min-width: 640px), screen\9 {
.py-200 {
padding-top: 150px !important;
padding-bottom: 150px !important;
}
} */
.mt-100 {
margin-top: 100px !important;
}
.mb-100 {
margin-bottom: 100px !important;
}
.my-100 {
margin-top: 100px !important;
margin-bottom: 100px !important;
}
.mt-150 {
margin-top: 150px !important;
}
.mb-150 {
margin-bottom: 150px !important;
}
.my-150 {
margin-top: 150px !important;
margin-bottom: 150px !important;
}
.mt-200 {
margin-top: 200px !important;
}
.mb-200 {
margin-bottom: 200px !important;
}
.mb-250 {
margin-bottom: 250px !important;
}
.mb-n5 {
margin-bottom: -4em !important;
}
.mt-n5 {
margin-top: -4em !important;
}
blockquote {
background: #f2f2f2;
padding: 20px 30px;
font-family: "Anton", sans-serif;
overflow: visible;
margin: 30px 0;
}
blockquote p {
margin-bottom: 0;
position: relative;
font-style: normal;
line-height: 30px;
font-size: 1.375em;
}
blockquote p:before {
content: "\201C";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #215aa8;
font-size: 125px;
position: absolute;
top: 1px;
left: -42px;
}
.text-underline {
text-decoration: underline;
}
.underline {
position: relative;
margin-bottom: 50px;
}
.underline:after {
content: "";
background-color: #00bcd4;
width: 100px;
height: 5px;
position: absolute;
left: 0;
bottom: -20px;
}
.rounded {
border-radius: 1em !important;
}
.border-curve {
border-bottom-right-radius: 15vw;
overflow: hidden;
}
.border-top-left {
border-top-left-radius: 5vw;
}
.border-top-right {
border-top-right-radius: 5vw;
}
b,
strong {
font-weight: 700;
}
hr {
opacity: 1 !important;
border-width: 2px;
}
.vertical-hr {
width: 1px;
margin: 0 auto;
height: 100%;
}
/* Colors */
.white {
color: #fff !important;
}
.light {
color: #f7f7f7 !important;
}
.medium {
color: #595959 !important;
}
.dark {
color: #333 !important;
}
.black {
color: #272727 !important;
}
/* Hovers */
.white-hover:hover {
color: #fff !important;
}
.light-hover:hover {
color: #f7f7f7 !important;
}
.dark-hover:hover {
color: #333 !important;
}
.black-hover:hover {
color: #272727 !important;
}
/* Text Gradients */
.grey-text-gradient {
background-image: -webkit-linear-gradient(bottom, #ABB2BC 0%, #737E90 33%, #565F6C 66%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
background-size: 100%;
background-repeat: repeat;
}
/* Block Gradients */
.block-grey-text-gradient {
background-image: -webkit-linear-gradient(bottom, #ABB2BC 33%, #737E90 33%, #737E90 66%, #565F6C 66%);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
background-size: auto 162px;
background-repeat: repeat;
background-position: bottom;
word-break: break-word;
}
/* Backgrounds */
.bg-white {
background: #fff !important;
}
.bg-light {
background: #f7f7f7 !important;
}
.bg-medium {
background: #595959 !important;
}
.bg-dark {
background: #333 !important;
}
.bg-black {
background: #272727 !important;
}
/* Hovers */
.bg-white-hover:hover {
background: #fff !important;
}
.bg-light-hover:hover {
background: #f7f7f7 !important;
}
.bg-dark-hover:hover {
background: #333 !important;
}
.bg-black-hover:hover {
background: #272727 !important;
}
/* Background Images */
.bg-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.bg-blur {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.bg-blur.bg-black {
background: rgba(10, 10, 10, 0.75) !important;
}
.bg-bottom {
background-position: bottom;
}
.bg-fw {
position: relative;
}
.bg-fw:after, .bg-fw:before {
background-color: inherit;
content: "";
position: absolute;
left: 100%;
top: 0;
width: 200vw;
height: 100%;
}
.bg-fw:before {
left: unset;
right: 100%;
}
.border-circle {
border-radius: 50%;
}
.text-extra-small {
font-size: 0.65em !important;
}
.text-small {
font-size: 0.75em !important;
}
.text-medium {
font-size: 0.875em !important;
}
.text-large {
font-size: 1.25em !important;
line-height: 1.5em;
}
.text-extra-large {
font-size: 2.5em !important;
}
.text-huge {
font-size: 2.75em !important;
}
.title-xl {
font-size: 4em;
}
.quote-icon {
font-size: clamp(4em, 30vw, 10em);
margin-top: -20px;
line-height: 1;
}
.font-weight-black,
.fw-black {
font-weight: 900;
}
.border-right {
border-color: #fff !important;
z-index: 1;
}
.border-white {
border-color: #fff !important;
}
.border-grey {
border-color: #7c7c7c !important;
}
.border-dark {
border-color: #3b3b3a !important;
}
.border-width {
border-width: 5px !important;
}
.img-border {
border-bottom: 5px solid !important;
}
.border {
border-width: 5px !important;
border-color: #fff !important;
}
.cursor-pointer {
cursor: pointer;
}
.check-list {
list-style: none;
padding-left: 10px !important;
}
.check-list li {
position: relative;
padding-left: 70px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.check-list li:before,
.check-list li:after {
font-family: "Font Awesome 5 Free";
font-size: 1.75em;
font-weight: 900;
color: #3cc47b;
position: absolute;
left: 13px;
z-index: 1;
}
.check-list li:before {
content: "\f00c";
}
.check-list li:after {
content: "";
background: #fff;
border-radius: 50%;
width: 50px;
height: 50px;
z-index: 0;
left: 0;
}
ul.numbers li {
position: relative;
counter-increment: step-counter;
left: 35px;
min-height: 70px;
max-width: 90%;
}
ul.numbers li:before {
content: counter(step-counter);
position: absolute;
top: 12px;
left: -54px;
font-size: 1.25em;
text-align: center;
width: 40px;
}
ul.numbers li:after {
content: "";
position: absolute;
top: 8px;
left: -55px;
width: 40px;
height: 40px;
border: 2px solid #f7f7f7;
border-radius: 50%;
}
ul.numbers {
list-style: none;
}
ol.number-list li {
counter-increment: theme-counter;
line-height: initial;
margin-bottom: 20px;
}
ol.number-list li:before {
font-weight: 900;
content: counter(theme-counter) ". ";
font-size: 2em;
}
.list-style-inside {
list-style: inside;
}
.triangle-list {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
.triangle-list li::before {
content: "";
border-color: transparent #d05069;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
.container-max {
max-width: 1600px;
margin: 0 auto;
padding: 0 15px;
}
.container-large {
max-width: 1460px;
margin: 0 auto;
padding: 0 15px;
}
.container-hero {
max-width: 1800px;
margin: 0 auto;
padding: 0 15px;
}
.container-slider {
max-width: calc(1320px + 25%);
margin: 0 auto;
padding: 0 15px;
}
.container-half {
max-width: 640px;
padding: 5vw 15px;
width: 100%;
}
.w-60 {
width: 60% !important;
}
.header-padding-sm {
padding-top: 115px;
}
.header-padding-md {
padding-top: 200px;
}
.header-padding-lg {
padding-top: 300px;
}
.footer-padding {
padding-top: 120px;
}
.shadow {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}
.shadow-lg {
box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
}
.bg-gradient {
background: #87d3ee;
background: -moz-linear-gradient(left, #87d3ee 0%, #215aa8 100%);
background: -webkit-linear-gradient(left, #87d3ee 0%, #215aa8 100%);
background: linear-gradient(to right, #87d3ee 0%, #215aa8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87d3ee', endColorstr='#215aa8',GradientType=1 );
}
.gradient-border {
background: -webkit-linear-gradient(right, #215aa8, #87d3ee);
height: 2px;
width: 100%;
}
.dark-gradient {
background: #1e5799;
background: -moz-linear-gradient(-45deg, #215aa8 0%, #3e78c9 100%);
background: -webkit-linear-gradient(-45deg, #215aa8 0%, #3e78c9 100%);
background: linear-gradient(135deg, #215aa8 0%, #3e78c9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#215aa8', endColorstr='#3e78c9',GradientType=1 );
}
.bg-opaque {
opacity: 0.25;
}
.bg-opaque-1 {
opacity: 0.1;
}
.bg-opaque-25 {
opacity: 0.25;
}
.bg-opaque-50 {
opacity: 0.5;
}
.bg-opaque-75 {
opacity: 0.75;
}
.bg-whhite-opaque {
background-color: rgba(255, 255, 255, 0.25);
}
.bg-black-opaque {
background-color: rgba(0, 0, 0, 0.75);
}
.bg-black-opaque-50 {
background-color: rgba(0, 0, 0, 0.5);
}
.bg-black-opaque-25 {
background-color: rgba(0, 0, 0, 0.25);
}
.bg-gold-opaque {
background-color: rgba(188, 154, 96, .75) !important;
}
.bg-white-opaque {
background-color: rgba(255, 255, 255, 0.75);
}
.hide {
display: none;
opacity: 0;
}
.animate {
display: -ms-flexbox !important;
display: flex !important;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.line-height-reset {
line-height: 1.8;
}
.overlay-top {
top: -1px;
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
pointer-events: none;
}
.overlay-bottom {
bottom: -2px;
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom;
pointer-events: none;
}
.upsidedown {
transform: rotate(180deg);
display: inline-block;
padding-bottom: 5px;
padding-right: 5px;
margin-right: -5px;
}
/* ------------------------------
Bootstrap Modal
------------------------------ */
.modal {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
background: rgba(0, 0, 0, 0.15);
}
/* .modal-dialog {
max-width: 600px;
} */
/* .modal-dialog {
max-width: 900px;
} */
.modal-xl {
max-width: 1140px;
}
a.modal-link::after {
display: none;
}
.modal-header {
border: 0;
}
.close {
opacity: 1;
transition: color 0.25s ease-in-out;
}
.fade,
body {
padding-right: 0 !important;
}
.video-modal {
max-width: 900px;
}
.modal-content {
background: none;
box-shadow: none;
border: 0;
}
.modal-header {
padding: 0;
}
/* .modal-body {
box-shadow: 0px 10px 30px rgba(0,0,0,0.5)
} */
.modal-fullscreen {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen .modal-footer,
.modal-fullscreen .modal-header {
border-radius: 0;
}
.modal-fullscreen .modal-body {
overflow-y: auto;
}
.modal .close-btn {
box-shadow: 5px 5px 0 #d05069;
width: 3em;
height: 3em;
}
.modal .btn-close {
box-sizing: content-box;
width: 20px;
height: 20px;
padding: 0;
background: transparent
url('data:image/svg+xml,')
center/1.25em auto no-repeat;
border: 0;
border-radius: 0;
opacity: 1;
margin: 0;
}
.modal-backdrop.fade.show {
display: none !important;
}
.form-modal {
max-width: 700px;
}
/* Modal Slide in Right */
.modal.fade {
display: flex !important;
justify-content: end;
pointer-events: none;
padding: 0 !important;
}
.modal.fade.show {
pointer-events: all;
}
.fade:not(.show) .modal-dialog {
transform: translate(150%, 0);
}
.fade.show .modal-dialog {
transform: translate(0, 0);
}
.fade .modal-dialog {
transition: transform 5s ease-in-out;
}
/* Modal Scroll */
.modal-body::-webkit-scrollbar {
width: 15px;
}
.modal-body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
background-color: #ccc;
border: 1px solid transparent;
}
.modal-body::-webkit-scrollbar-thumb {
background-color: #0a0a0a;
outline: 1px solid transparent;
border-radius: 0px;
}
/* ------------------------------
Shadow for text on bg images
------------------------------ */
#home-hero, #small-hero, .full-width-bg {
text-shadow: 3px 3px 8px rgba(0,0,0,.5);
}
.full-width-bg .modal {
text-shadow: none;
}
/* ------------------------------
GDPR Modal
------------------------------ */
.moove-gdpr-company-logo-holder {
text-align: center !important;
}
.moove-gdpr-company-logo-holder img {
min-height: 80px;
}
/* ------------------------------
Responsive Videos & YouTube
------------------------------ */
.video-wrap .play-button {
position: absolute;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
top: calc(50% - 75px);
left: calc(50% - 60px);
opacity: 1;
transition: all 0.75s ease;
pointer-events: none;
width: 120px;
height: 150px;
z-index: 1;
clip-path: polygon(0 0, 100% 50%, 0 100%);
background: rgba(255, 255, 255, 0.25);
}
.video-wrap .play-button.hide {
opacity: 0;
}
.video-wrap:hover .play-button {
transform: scale(1.25);
}
/* Resonsive Video */
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
box-shadow: 0px 17px 5px -10px rgba(0, 0, 0, 0.5);
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
/* YouTube Playlist */
#ypt_wrapper {
width: 100%;
background: #131313;
color: #fff;
overflow: hidden;
max-width: 100%;
}
#ypt_thumbs div {
list-style: none;
margin: 0;
position: relative;
font-size: 0;
}
#ypt_thumbs div::after {
content: "\25b6";
display: block;
width: 100px;
background: rgba(0, 0, 0, 0.6);
position: absolute;
font-size: 30px;
text-align: center;
color: #215aa8;
height: 70px;
border-radius: 20%;
line-height: 70px;
margin-left: calc(50% - 50px);
bottom: calc(50% - 35px);
pointer-events: none;
}
#ypt_thumbs div.ypt-now-playing::after {
display: none;
}
#ypt_thumbs div img {
width: 100%;
}
#ypt_thumbs div p {
font-family: arial;
font-size: 10px;
background: rgba(0, 0, 0, 0.5);
display: none;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 5%;
margin: 0;
}
#ypt_thumbs div:hover p {
display: block;
cursor: pointer;
}
#ypt_thumbs .ypt-now-playing p {
display: block;
}
#ypt_thumbs .ypt-now-playing span::after {
content: "\25b6 Now playing"; /* A traingle pointing right */
margin-top: -1em;
display: block;
width: 100%;
padding: 5%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
position: absolute;
bottom: 0;
font-size: 10px;
}
#ypt_wrapper .video {
position: relative;
width: 100%;
padding-bottom: 48.4%;
float: left;
}
#ypt_wrapper .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
}
/* ------------------------------
Forms
------------------------------ */
.gform_body input {
border-radius: 7px !important;
border: 1.5px solid #eee !important;
padding: 10px 15px !important;
margin: 0 !important;
box-shadow: none !important;
font-weight: 600 !important;
}
.ginput_complex .name_first {
padding-left: 0 !important;
}
.gform_body li {
margin: 30px 0 0 !important;
}
.gform_body .ginput_container {
margin: 0 !important;
}
.gform_wrapper.gravity-theme .ginput_container_date input {
width: auto !important;
}
.gform_body input, .gform_body textarea {
outline: none !important;
border-radius: 7px !important;
border: 1.5px solid #eee !important;
}
.gform_body input:focus,
.gform_body textarea:focus {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
}
input[type="submit"]:hover {
background: #fff;
color: #00bcd4;
}
.gform_wrapper .ginput_complex .address_city,
.gform_wrapper .ginput_complex .address_state,
.gform_wrapper .ginput_complex .address_zip {
margin-top: 30px !important;
width: calc(33% - 8px) !important;
margin-right: 16px !important;
padding-right: 0 !important;
}
.gform_wrapper .ginput_complex .address_zip {
margin-right: 0 !important;
}
.gform_body .attachment-input input {
border: none !important;
padding-left: 0 !important;
border-radius: 0 !important;
}
.gform_body .attachment-input input:focus {
box-shadow: none !important;
}
.gform_fields {
row-gap: 20px !important;
}
.gform_footer.before {
padding-bottom: 0 !important;
}
/* .gform-body input.button {
width: auto;
background: #00bcd4;
color: #fff;
font-weight: 900;
border: none !important;
transition: all 0.25s ease-in-out;
font-size: 1em;
}
.gform-body input.button:hover {
background: #272727;
}
.gform-body input.gform_previous_button {
color: #fff !important;
}
.gform-body input.gform_previous_button:hover {
color: #272727 !important;
} */
/* HubSpot */
/* .hs-form-required {
color: #ff0000;
margin-left: 3px;
}
input[type="submit"] {
border: 0;
border-radius: 0;
font-size: .875em;
font-weight: normal;
padding: .313em 1.875em;
transition: all .25s ease-in-out;
margin-top: 30px;
line-height: 1.5;
} */
/* Contact Form */
.contact-form .form-columns-2 > div {
width: 50% !important;
float: left !important;
}
.contact-form .form-columns-2 input,
.contact-form .form-columns-2 select {
width: 100%;
}
.contact-form select {
width: 100% !important;
padding-left: 3px !important;
}
.contact-form fieldset {
margin-bottom: 20px !important;
}
.contact-form label {
color: #3b3b3a;
font-size: 0.875em;
margin-bottom: 0;
}
.contact-form input:not(.btn),
.contact-form select {
color: #6e6e6e;
border-color: #ccc !important;
font-size: 0.875em;
padding: 5px 7px;
background: #fff;
}
.contact-form textarea {
width: 100% !important;
}
.contact-form input[type="submit"] {
margin-top: 0;
}
/* Newsletter Form */
.hs-newsletter-signup .hs-input {
width: 100%;
margin-bottom: 20px;
}
#data-removal {
max-width: 1400px;
margin: 7rem auto;
}
/* Footer Form */
/* Multi-Step Form */
#footer-form {
margin-top: -3rem;
margin-bottom: -3rem;
box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
}
#quote-form .gform-body {
/* height: 600px; */
position: relative;
}
#footer-form .gform_wrapper.gravity-theme .gform_footer,
#footer-form .gform_wrapper.gravity-theme .gform_page_footer {
position: absolute;
bottom: 0;
}
.gform_page_fields {
margin-bottom: 100px;
height: 550px;
overflow-y: auto;
}
.gform_confirmation_wrapper {
height: 770px;
display: flex;
flex-wrap: wrap;
align-items: start;
}
#footer-form .gform_wrapper.gravity-theme .gfield_label {
font-weight: 400 !important;
font-size: 14px !important;
}
.gform_wrapper.gravity-theme .gfield_required {
font-weight: 700;
}
/* .gform-body input,
.gform-body textarea {
border: 1px solid #c5c9d2 !important;
border-radius: 0 !important;
border-bottom-right-radius: 20px !important;
background: #dfe1e5;
} */
input.gform_next_button, input.gform_previous_button {
background-color: #272727 !important;
padding: .5em 3.5em !important;
border-radius: 2em !important;
border-color: transparent !important;
box-shadow: none !important;
color: #fff !important;
}
input.gform_next_button:hover, input.gform_previous_button:hover {
background-color: transparent !important;
color: #272727 !important;
border: 1px solid #272727 !important;
}
#footer-form .gform-body input,
#footer-form .gform-body textarea {
width: 100%;
}
.gform-body select {
padding: 10px 15px !important;
border-radius: 7px !important;
width: 100% !important;
border: 1.5px solid #eee !important
}
.gform-body input.button {
width: auto !important;
}
.gform_body input:focus,
.gform_body input:focus, .gform_body textarea:focus {
border-color: #00a1e8 !important;
box-shadow: 0px 0px 2px 2px rgba(0, 161, 232, 0.15) !important;
}
div#input_1_7 {
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.gchoice input,
.gchoice label {
width: 100%;
max-width: 100% !important;
}
.gchoice input {
height: 100%;
position: absolute;
top: 0 !important;
left: 0;
z-index: 0;
border: none !important;
box-shadow: none;
border-color: transparent;
}
.gchoice label {
pointer-events: none;
z-index: 2;
margin: 0;
text-align: center;
font-size: 0.75em !important;
font-weight: 700;
margin-bottom: 10px !important;
}
.gform_wrapper.gravity-theme .gf_progressbar_percentage {
height: 5px !important;
border-radius: 3px !important;
margin-top: 25px;
font-weight: 400;
}
.gf_progressbar.gf_progressbar_custom {
border-radius: 3px !important;
background: #c5c9d2 !important;
}
.gform_wrapper.gravity-theme .gf_progressbar_percentage span {
position: absolute;
top: -20px;
margin: 0 !important;
}
.number-progress {
float: right;
color: #272727;
}
p.gf_progressbar_title {
display: none;
}
.gf_progressbar_wrapper {
font-weight: 700;
color: #c72c4b;
margin-bottom: 50px;
}
.gchoice {
z-index: 1;
position: relative;
margin: 0 0 10px 0;
padding: 0;
height: 70px;
}
input.gfield-choice-input {
z-index: 2;
appearance: none;
margin: 0;
padding: 0;
width: 100%;
border-radius: 5px;
height: 100%;
transition: 0.3s all ease-in-out;
position: absolute;
background: #dfe1e5;
}
input.gfield-choice-input:hover,
.gchoice label:hover {
cursor: pointer;
}
.gfield-choice-input:hover {
background: rgba(0, 188, 212, 0.2);
}
input.gfield-choice-input:checked {
background: #00bcd4;
}
input.gfield-choice-input:checked + label {
color: #fff;
}
.gchoice {
min-width: calc(33% - 20px);
min-height: 95px;
margin-bottom: 20px;
margin-right: 20px;
display: flex;
align-items: end;
flex-wrap: wrap;
position: relative;
padding: 0 !important;
justify-content: center;
color: #979ba5;
}
.gchoice input:focus {
border-color: transparent !important;
box-shadow: none !important;
}
input.gfield-choice-input + label:after {
content: "";
position: absolute;
right: -10px;
transform: translateY(-50%);
width: 30px;
height: 30px;
z-index: 2;
bottom: 10px;
transition: 0.3s all ease-in-out;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 25px;
font-weight: 700;
}
input[type="checkbox"].gfield-choice-input + label:after {
border-radius: 5px;
opacity: 0;
}
input[type="radio"].gfield-choice-input + label:after {
border-radius: 50px;
}
input.gfield-choice-input:checked + label:after {
content: "\00D7";
border: 2px solid #fff;
}
/* Service Type Checkboxes */
.gchoice label::before {
position: absolute;
content: "\f007";
font-family: "Font Awesome 5 Free";
font-size: 3em;
top: 0;
left: 0;
right: 0;
font-style: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-weight: 900;
margin-top: 5px;
}
label#label_1_7_1:before {
content: "\f2d0";
}
label#label_1_7_2:before {
content: "\f121";
}
label#label_1_7_3::before {
content: "\e13a";
}
label#label_1_7_4:before {
content: "\f002";
}
label#label_1_7_5:before {
content: "\f11c";
}
label#label_1_7_6:before {
content: "\f3ce";
}
label#label_1_7_7:before {
content: "\e595";
}
label#label_1_7_8:before {
content: "\f51c";
}
label#label_1_7_9:before {
content: "\f059";
}
label#label_1_7_11:before {
content: "\f10b";
}
label#label_1_7_12:before {
content: "\f13e";
}
label#label_1_7_13:before {
content: "\f059";
}
/* ------------------------------
Header
------------------------------ */
.swoosh {
background-image: url("/wp-content/uploads/2023-logo-swoosh.svg");
background-size: 100%;
background-repeat: no-repeat;
top: 20px;
left: 18px;
width: 230px;
height: 45px;
z-index: 1000;
background-position: left;
pointer-events: none;
}
/* ------------------------------
Navigation
------------------------------ */
.blend {
mix-blend-mode: difference !important;
color: #fff;
position: relative;
z-index: 2;
}
.modal-open #sticky-nav {
opacity: 0;
z-index: 1;
}
.sticky-nav {
position: fixed;
top: 0;
height: 43px;
z-index: 9999;
transition: all 0.33s ease-in-out;
width: 100%;
overflow: hidden;
}
.sticky-nav:hover {
background-color: rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.sticky-nav-disabled .sticky-nav {
position: absolute;
}
.sticky-nav .logo {
width: 300px;
}
.sticky-nav #nav-btn {
width: 60px;
z-index: 999;
}
.sticky-nav #nav-btn .icon {
position: relative;
width: 100%;
height: 100%;
fill: none;
stroke-width: 8;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #fff;
}
/* ------------------------------
Sticky Sub Navigation
------------------------------ */
.sub-nav-title {
font-size: 1.65rem;
}
.boat-model-title {
font-style: italic;
}
.boat-model-title .upsidedown {
transform: rotate(180deg);
display: inline-block;
padding-bottom: .05em;
margin-right: 0;
margin-left: -5px;
padding-right: 0;
}
.sub-nav-wrap a {
font-size: 1rem !important;
}
.sub-nav-dropdown {
font-size: 16px;
}
.sticky-sub-nav {
opacity: 1;
transition: opacity .25s ease-in-out;
top: 43px;
}
body.modal-open .sticky-sub-nav {
opacity: 0;
}
.sticky-sub-nav .dropdown-menu {
width: 100dvw;
left: 0 !important;
}
.sticky-sub-nav .sub-nav-menu-item:after {
content: '';
position: absolute;
bottom: -2px;
background: #272727;
height: 2px;
width: 0;
left: 0;
right: 0;
margin: 0 auto;
transition: width .25s ease-in-out;
}
.sticky-sub-nav .sub-nav-menu-item.active:after {
width: 100%;
}
.underline-hover:after {
content: '';
position: absolute;
bottom: -2px;
background: #272727;
height: 2px;
width: 0;
left: 0;
right: 0;
margin: 0 auto;
transition: width .25s ease-in-out;
}
.underline-hover:hover:after {
width: 100%;
}
.modal-open .sticky-top {
z-index: 1;
}
/* ------------------------------
Legacy Models
------------------------------ */
.legacy-btn-wrap {
background-color: transparent;
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
transition: all .5s ease-in-out;
}
.legacy-img:hover .legacy-btn-wrap {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-color: rgba(0, 0, 0, 0.1);
}
.section-wrap:last-of-type .legacy-model hr {
display: none;
visibility: hidden;
}
/* ------------------------------
Hero
------------------------------ */
#home-hero {
height: 100vh;
min-height: 600px;
max-height: 1600px;
}
#small-hero {
height: 60vh;
min-height: 400px;
max-height: 800px;
}
.hero-spacer {
height: 100px;
background: #333;
position: relative;
}
.hero-media-rounded {
border-radius: 30px;
}
/* Video Block Hero */
.video-container {
position: relative;
width: 300px;
height: 500px;
}
.video-sm {
height: 320px;
}
.video-container h2 {
color: #0A0A0A;
font-weight: 900;
font-size: 100px;
position: absolute;
}
.video-container h2.top {
top: 20px;
left: -100px;
}
.video-container h2.middle {
top: calc(50% - 60px);
right: -100px;
}
.video-container h2.bottom {
bottom: 20px;
left: calc(100% - 100px);
}
.video-container .video-block {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.video-container .video-block h2 {
color: #f7f7f7;
z-index: 2;
}
.video-container .video-block video {
z-index: 1;
position: absolute;
}
/* Interior Hero */
/* Quote Box / Form Box */
.quote-box {
max-width: 550px;
width: 100%;
margin-top: -30px;
position: relative;
z-index: 5;
transform: translate(0, 100%);
transition: all .75s ease-in-out;
}
.quote-box.in-view {
transform: translate(0, 0%);
}
.communities-page .quote-box {
transform: translate(0, 0%);
}
.form-box {
margin-top: -100px;
position: relative;
z-index: 5;
}
/* ------------------------------
About Section
------------------------------ */
.angled-block {
transform: skewY(-3deg);
top: 0;
z-index: 1;
}
.angle-normal {
transform: skewY(3deg);
}
.angled-img {
max-width: 400px;
transform: rotate(15deg);
width: 100%;
}
.home .angled-img {
width: 50%;
}
.square-shadow {
box-shadow: 10px 10px 0 #efa933;
}
.mt-50 {
margin-top: 50%;
}
/* ------------------------------
Content Block: BG Full Width
------------------------------ */
.full-width-bg {
height: 100vh;
min-height: 800px;
max-height: 1600px;
}
.full-width-bg .btn-white-stroke-hover, .full-width-bg .btn-black-stroke-hover {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* ------------------------------
Content Block: Image List
------------------------------ */
.border-bottom {
border-width: 2px !important;
border-color: #0A0A0A !important;
}
.image-list li:last-of-type, .spec-list li:last-of-type {
border: none !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
/* ------------------------------
Content Block: Boat Highlight
------------------------------ */
.spec-border {
height: 3px;
}
.boat-highlight-model {
top: 20px;
left: 20px;
}
.boat-highlight-btn {
top: 20px;
right: 20px;
opacity: 0;
transition: opacity .33s ease-in-out;
}
.boat-highlight:hover .boat-highlight-btn {
opacity: 1;
}
.boat-highlight-img {
transition: all .5s ease-in-out;
transform: scale(1);
pointer-events: none;
max-width: 800px;
width: 100%;
}
.col-lg .boat-highlight-img {
max-width: 620px;
}
.boat-highlight:hover .boat-highlight-img {
transform: scale(1.05);
}
.boat-highlight:hover .model-link {
color: #272727 !important;
}
.boat-highlight:hover .model-link:hover {
color: #fff !important;
}
/* ------------------------------
Content Block: Boat CTA
------------------------------ */
/* .boat-cta {
height: 100vh;
min-height: 800px;
max-height: 1600px;
} */
/* ------------------------------
Content Block: CTA FORM
------------------------------ */
.cta-content {
max-width: 450px;
width: 100%;
}
.cta-form .gform_confirmation_wrapper {
height: auto;
color: #fff;
}
/* ------------------------------
Content Block: Build Price
------------------------------ */
.build-price-single {
transition: all .5s ease-in-out;
}
.build-price-single:hover {
border-radius: 0em !important;
background-color: #cbcbcb !important;
}
.build-price-img {
max-width: 500px;
width: 100%;
transition: all .75s ease-in-out;
}
.build-price-single:hover .build-price-img {
transform: scale(1.1);
}
/* ------------------------------
Content Block: Boat Table & Specs
------------------------------ */
section#specs {
z-index: 6;
}
.single-color {
height: 35px;
width: 35px;
margin-right: 10px;
transition: all .33s ease-in-out;
}
.single-color:hover {
transform: scale(1.15);
}
.single-boat-table {
border: 1px solid #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: fit-content;
}
.single-boat-table td {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
padding: 10px;
}
.single-boat-table td:last-of-type {
border-right: none;
}
.single-boat-table th {
padding: 10px;
height: 75px;
}
.table-modal {
max-width: 1400px;
width: 100%;
}
.modal .single-boat-table, .modal .single-boat-table td {
border-color: #272727;
}
.boat-specs-wrap .spec-single {
border-bottom: 1px solid #fff !important;
}
.boat-specs-wrap .col-12:last-of-type .spec-single, .boat-specs-wrap .col-12:nth-last-child(2) .spec-single {
border-color: transparent !important;
}
/* ------------------------------
Resources
------------------------------ */
.resource-wrap {
border: 1px solid #272727;
}
/* ------------------------------
Staff
------------------------------ */
.staff-member {
max-width: 400px;
margin: 0 auto;
}
.staff-content
.social-link.px-2.border-end.border-dark.d-inline-block:last-of-type {
border: none !important;
}
/* ------------------------------
Pagination
------------------------------ */
.page-numbers {
border: 1px solid #337b81;
color: #337b81 !important;
padding: 0 5px;
margin: 0 5px;
}
.page-numbers:hover {
background: #52c1cb;
border: 1px solid #52c1cb;
color: #fff !important;
}
.page-numbers.current {
background: #337b81;
color: #fff !important;
}
.page-numbers.current:hover {
border: 1px solid #337b81;
}
.next.page-numbers,
.prev.page-numbers {
border: none;
margin: 0 10px !important;
}
.next.page-numbers:hover,
.prev.page-numbers:hover {
background: none;
color: #52c1cb !important;
}
/* ------------------------------
Content Block: Image Grid
------------------------------ */
.grid-img img {
transition: all .5s ease-in-out;
}
.grid-img:hover img {
transform: scale(1.05);
}
/* ------------------------------
CTA
------------------------------ */
.cta-title {
font-size: 4.375em;
}
.cta-sub-title {
font-size: 2.25em;
}
.two-column-cta .overlay-top {
background-image: url("/wp-content/uploads/inspiration-top.svg");
background-position: top center;
background-size: 1320px;
background-repeat: no-repeat;
}
.two-column-cta .overlay-bottom {
background-image: url("/wp-content/uploads/inspiration-bottom.svg");
background-position: bottom center;
background-size: 1320px;
background-repeat: no-repeat;
}
.left-cta .overlay-top {
background-position: top left;
}
.left-cta .overlay-bottom {
background-position: bottom left;
}
.right-cta .overlay-top {
background-position: top right;
}
.right-cta .overlay-bottom {
background-position: bottom right;
}
/* ------------------------------
Password Protected Form
------------------------------ */
.ppw-ppf-desc {
margin-bottom: 20px;
font-size: 1.25em;
font-weight: bold;
color: #d05069;
}
input.ppw-pwd-submit-btn {
background: #22ab9e;
border: none;
border-radius: 20px;
padding: 10px;
font-size: 1em;
color: #fff;
text-transform: uppercase;
font-family: sofia-pro-soft, sans-serif !important;
transition: all 0.25s ease-in-out;
}
input.ppw-pwd-submit-btn:hover {
background: #272727;
color: #fff;
}
.ppw-pwd-label {
font-weight: bold;
text-transform: uppercase;
}
.ppw-pwd-label input {
height: 40px;
border-radius: 20px;
border: #22ab9e 1px solid;
margin: 0 10px;
}
p.ppw-ppf-field-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.ppw-ppf-desc {
display: none;
}
/* ------------------------------
Instagram Feed
------------------------------ */
.instagram-single {
height: 14vw;
margin: 0 1vw;
width: 14vw;
}
.instagram-single .bg-img {
transition: opacity 0.25s ease-in-out;
opacity: 1;
}
.instagram-single:hover .bg-img {
opacity: 0.25;
}
.instagram-bg {
font-size: 3.5em;
transform: rotate(-20deg);
top: -50px;
left: 20px;
color: #fdeeef;
z-index: -1;
}
.overlay-instagram.position-absolute.h-100.w-100 {
top: 30px;
left: 0;
z-index: -1;
}
img.bg-svg {
width: 100%;
}
.insta-wrap {
box-shadow: 10px 10px 0 #d05069;
background-color: #f0b5b4;
/* border: 3px solid transparent; */
}
/* .insta-wrap:hover {
border-color: #d05069;
} */
.instagram-single:nth-child(3n + 3) .insta-wrap {
box-shadow: 10px 10px 0 #22ab9e !important;
background-color: #a4ddd8;
}
/* .instagram-single:nth-child(3n+3) .insta-wrap:hover {
border-color: #22ab9e;
} */
.instagram-single:nth-child(1) .insta-wrap,
.instagram-single:nth-child(4) .insta-wrap {
box-shadow: 10px 10px 0 #efa933;
background-color: #f9ddad;
}
/* .instagram-single:nth-child(1) .insta-wrap:hover, .instagram-single:nth-child(4) .insta-wrap:hover {
border-color: #efa933;
} */
.insta-link {
font-size: 4em;
opacity: 0;
transition: all 0.25s ease-in-out;
z-index: 1;
}
.insta-wrap:hover .insta-link {
opacity: 1;
}
.arrow-bg {
bottom: 50px;
right: 0;
transform: rotate(160deg);
z-index: -1;
}
.arrow-svg svg path {
fill: #a4ddd8 !important;
}
/* ------------------------------
Portfolio Pages
------------------------------ */
.client-logo {
max-width: 350px;
max-height: 250px;
width: 100%;
}
.client-title {
font-size: 2em;
font-weight: 700;
}
.portfolio-example .insta-link {
font-size: 1em;
}
.portfolio-example:hover .bg-img {
opacity: 0.1;
}
.port-img {
box-shadow: 0 0 60px rgba(0, 0, 0, 0.075);
max-width: 100%;
}
.col-port {
width: 33%;
}
.port-middle {
margin-top: 10vw;
z-index: 1;
}
.port-middle .port-img {
max-width: 120%;
margin-left: -10%;
}
.port-right {
margin-top: 4vw;
}
.blissfully-port-bg {
background-color: #dfe1e5;
height: 92%;
width: 100%;
bottom: 0;
}
/* #portfolio-611 h3 {
color: orange;
}
#portfolio-611 .portfolio-card:hover h3 {
color: #fff;
} */
.team-photo {
max-width: 125px;
border-radius: 50%;
}
.team .underline {
margin-bottom: 35px;
}
/* ------------------------------
Content Block: Quote
------------------------------ */
.quote-title {
font-size: 2.25em !important;
font-weight: 500;
line-height: 1.35em;
}
/* ------------------------------
Blog / Default Posts
------------------------------ */
.single-post h3 {
margin-bottom: 20px;
text-transform: uppercase;
margin-top: 40px;
}
.pink-stripes {
top: -5vw;
left: 0;
z-index: -1;
}
.pink-stipes-home {
left: unset;
right: -5vw;
display: inline-block;
top: -8vw;
z-index: 1;
}
.nav-links {
display: flex;
justify-content: center;
align-items: center;
}
.posts-navigation .nav-links .nav-previous,
.posts-navigation .nav-links .nav-next {
padding: 10px;
}
/* .posts-navigation .nav-links a {
background: #22ab9e;
width: 40px;
height: 40px;
display: block;
background-image: url('data:image/svg+xml,