/* ===============================================
		CONFIG MODULES
===============================================	*/
/* ===============================================
		Fonts Families

		- Set font display rules in Mixins
===============================================	*/
/* ===============================================
		Font Sizes & Weights
===============================================	*/
/* ===============================================
		Colors
===============================================	*/
/* ===============================================
		Break Points
===============================================	*/
/* ===============================================
		Spacing 
===============================================	*/
/* ===============================================
    Transition
=============================================== */
/* ===============================================
    Grid
=============================================== */
/* ===============================================
    Form Inputs
=============================================== */
/* ===============================================
    Button
=============================================== */
/* ===============================================
		Flexbox
		@include flexbox(row, $mobile);
===============================================	*/
/* ===============================================
		Row Machine
		@include rowMachine(3,5%,$mobile);
===============================================	*/
/* ===============================================
    Responsive Font Size
    @include font-size(12px, 18px); 

    Will scale fronts between the range 12px to 18px
=============================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
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,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
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; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section,
cite {
  display: block; }

html {
  height: 100%; }

body {
  line-height: 1;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

*,
*:after,
*:before {
  min-height: 0;
  min-width: 0;
  box-sizing: border-box; }

/* ===============================================
 		Restore Google Maps Images
 ===============================================	*/
.google-maps-link {
  max-width: 100%; }

.gmnoprint img {
  max-width: none;
  z-index: 9999; }

/* ===============================================
		Wordpress admin
===============================================	*/
#wpadminbar #wp-admin-bar-my-account.with-avatar > a img,
#wp-admin-bar-user-info .avatar {
  min-width: 0px; }

/* ===============================================
		Group Clearfix
===============================================	*/
.group:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

.group {
  display: inline-block; }

/* start commented backslash hack \*/
* html .group {
  height: 1%; }

.group {
  display: block; }

/* ===============================================
		No Script 
===============================================	*/
.no-js [data-srcset] {
  display: none; }

#noscript-warning {
  position: fixed;
  top: 150px;
  width: 30%;
  max-width: 450px;
  background: #000000;
  color: #fff;
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: center;
  z-index: 0;
  line-height: 24px;
  padding-left: 1em;
  padding-right: 1em; }
  @media (max-width: 415px) {
    #noscript-warning {
      display: none; } }

/* Global Styles */
html {
  font-size: 10px; }

@media (min-width: 767px) and (max-width: 1420px) {
  html {
    font-size: calc(10px + 6 * (100vw - 767px) / 653); } }

@media (min-width: 1420px) {
  html {
    font-size: 16px; } }

@media (max-width: 767px) {
  html {
    font-size: 16px; } }

html,
body {
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
  fill: currentColor; }
  @media (max-width: 415px) {
    html,
    body {
      overflow-x: hidden; } }

body {
  background: #001e50;
  color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative; }

.btn a,
.tiny-mce-btn {
  cursor: pointer;
  color: currentColor;
  background: transparent;
  display: inline-block;
  padding: 1rem 1.66rem;
  line-height: .8125rem;
  font-size: .8125rem;
  vertical-align: text-bottom;
  border: 2px solid;
  text-align: center;
  transition: all 0.3s ease-in-out;
  -webkit-appearance: none;
  text-transform: uppercase;
  border-radius: 50em;
  text-shadow: none;
  color: inherit; }
  .btn a:hover,
  .tiny-mce-btn:hover {
    box-shadow: 2px 3px 1px currentColor; }
  .btn a:active,
  .tiny-mce-btn:active {
    box-shadow: 2px 1px 1px currentColor; }
  .btn a:focus,
  .tiny-mce-btn:focus {
    box-shadow: 2px 3px 1px currentColor; }

button {
  background: transparent;
  -webkit-appearance: none;
  color: currentColor;
  border: none;
  padding: 0;
  text-align: left;
  outline: none;
  font-size: inherit;
  font-family: inherit; }
  button:focus {
    background: none; }

button.btn {
  cursor: pointer;
  color: currentColor;
  background: transparent;
  display: inline-block;
  padding: 1rem 1.66rem;
  line-height: .8125rem;
  font-size: .8125rem;
  vertical-align: text-bottom;
  border: 2px solid;
  text-align: center;
  transition: all 0.3s ease-in-out;
  -webkit-appearance: none;
  text-transform: uppercase;
  border-radius: 50em;
  text-shadow: none;
  color: inherit; }
  button.btn:hover {
    box-shadow: 2px 3px 1px currentColor; }
  button.btn:active {
    box-shadow: 2px 1px 1px currentColor; }
  button.btn:focus {
    box-shadow: 2px 3px 1px currentColor; }

a {
  text-decoration: none;
  color: inherit; }

a:focus {
  outline: none; }

img {
  max-width: 100%;
  object-fit: contain; }

figure.image {
  font-size: 0; }

/* ===============================================
		Responsive helper classes. 
===============================================	*/
@media (max-width: 767px) {
  .large-screen {
    display: none; } }

@media (min-width: 767px) {
  .small-screen {
    display: none !important; } }

.touch-screen {
  display: none; }

@media (hover: none) and (pointer: coarse) {
  .touch-screen {
    display: block; } }

/* ===============================================
    Buttons
=============================================== */
/* ===============================================
		js classes
===============================================	*/
.visually_hidden {
  opacity: 0;
  visibility: hidden; }

/* ===============================================
		Overflows
===============================================	*/
.overflow-x {
  overflow-x: visible; }

/* ===============================================
		IE WARNING
===============================================	*/
.ie-warning {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  min-height: 150px;
  padding: 20px;
  background: red;
  color: white;
  z-index: 9999; }
  .ie-warning h1 {
    font-size: 22px; }

abbr {
  border-bottom: none;
  text-decoration: none; }

.close-icon {
  fill: #000000;
  width: 1rem; }

.radio-button .check {
  fill: lightcoral; }

.radio-button .border {
  fill: lightblue; }

/* ===============================================
    Grid Wrap
=============================================== */
.grid-container {
  display: grid;
  grid-template-columns: auto 1rem repeat(12, 96.6666666667px) 1rem auto;
  grid-gap: 0;
  box-sizing: content-box; }
  @media (max-width: 1420px) {
    .grid-container {
      grid-template-columns: 5% 1rem repeat(12, 1fr) 1rem 5%; } }

.grid-wrap {
  grid-column: 3/15; }

/* ===============================================
		Wraps / Content Letterboxing
===============================================	*/
.wrap--page {
  position: relative;
  margin: 0 auto;
  max-width: 1420px;
  width: 100%; }

.wrap {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1160px; }
  @media (max-width: 1200px) {
    .wrap {
      padding-left: calc(5% + 16px);
      padding-right: calc(5% + 16px); } }
  @media (max-width: 767px) {
    .wrap {
      padding-left: 5%;
      padding-right: 5%; } }

.wrap-responsive {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1160px; }
  @media (max-width: 1200px) {
    .wrap-responsive {
      padding-left: 2.5%;
      padding-right: 2.5%; } }
  @media (max-width: 767px) {
    .wrap-responsive {
      padding-left: 0;
      padding-right: 0; } }

.wrap--inner {
  max-width: 780px; }

/* ===============================================
    Video Embed
=============================================== */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto; }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*
     _ _      _       _
 ___| (_) ___| | __  (_)___
/ __| | |/ __| |/ /  | / __|
\__ \ | | (__|   < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
                   |__/

 Version: 1.6.0
  Author: Ken Wheeler
 Website: http://kenwheeler.github.io
    Docs: http://kenwheeler.github.io/slick
    Repo: http://github.com/kenwheeler/slick
  Issues: http://github.com/kenwheeler/slick/issues

 */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  display: block;
  overflow: visible;
  margin: 0;
  padding: 0; }

.slick-list:focus {
  outline: none; }

.slick-list.dragging {
  cursor: pointer;
  cursor: hand; }

.slick-active:focus,
.slick-slide:focus {
  outline: 0; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block; }

.slick-track:before,
.slick-track:after {
  display: table;
  content: ''; }

.slick-track:after {
  clear: both; }

.slick-loading .slick-track {
  visibility: hidden; }

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px; }

[dir='rtl'] .slick-slide {
  float: right; }

.slick-slide img {
  display: block; }

.slick-slide.slick-loading img {
  display: none; }

.slick-slide.dragging img {
  pointer-events: none; }

.slick-initialized .slick-slide {
  display: block; }

.slick-loading .slick-slide {
  visibility: hidden; }

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

.post-previews--prev,
.post-previews--next {
  fill: #56c2b6;
  cursor: pointer;
  width: 66px; }
  .post-previews--prev:hover,
  .post-previews--next:hover {
    fill: #001e50; }

.slick-dots-container {
  position: absolute;
  bottom: 3rem;
  display: grid;
  grid-template-columns: auto 1rem repeat(12, 96.6666666667px) 1rem auto;
  grid-gap: 0;
  box-sizing: content-box;
  width: 100%; }
  @media (max-width: 1420px) {
    .slick-dots-container {
      grid-template-columns: 5% 1rem repeat(12, 1fr) 1rem 5%; } }
  .slick-dots-container .slick-dots {
    grid-column: 3/14; }
  .slick-dots-container li {
    display: inline-block;
    padding-right: .5rem; }
  .slick-dots-container button {
    height: 1rem;
    width: 1rem;
    font-size: 0px;
    background: #fff;
    border-radius: 100%;
    transition: all 0.3s ease-in-out; }
    .slick-dots-container button:hover {
      background: #56c2b6; }

/* ===============================================
    Lightbox 
=============================================== */
#lightbox-container.lightbox-active {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 50; }

#imagelightbox {
  position: fixed;
  z-index: 51;
  -ms-touch-action: none;
  touch-action: none; }

body.lightbox-active {
  background: yellow; }

/* ===============================================
		Modules
===============================================	*/
/* ===============================================
    Sticky Footer
=============================================== */
body {
  display: flex;
  flex-direction: column; }

.main {
  text-align: center;
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.coastal_kids {
  fill: #fff;
  width: 31.25rem;
  max-width: 80%;
  margin-bottom: 5rem; }
  @media (max-width: 767px) {
    .coastal_kids {
      margin-bottom: 2rem; } }

.title {
  font-weight: 700;
  color: #56c2b6;
  font-size: 1.75rem;
  padding-bottom: .25rem; }
  @media (max-width: 767px) {
    .title {
      font-size: 1.45rem;
      line-height: 1.2;
      padding-bottom: 1rem; } }

.opening-hours {
  font-size: .7375rem;
  text-transform: uppercase;
  letter-spacing: 3px; }
  @media (max-width: 767px) {
    .opening-hours {
      letter-spacing: 2px; } }

.top-right-graphic {
  width: 15.875rem;
  max-width: 35%;
  max-height: 75vh;
  fill: #56c2b6;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1; }

.bottom-left-graphic {
  width: 19.5rem;
  max-width: 55%;
  fill: #56c2b6;
  position: absolute;
  bottom: 0rem;
  left: 0;
  z-index: 1; }
  @media (max-width: 767px) {
    .bottom-left-graphic {
      bottom: 2.0rem; } }

/* ===============================================
    Contact Details
=============================================== */
.contact-details {
  flex: 1; }
  .contact-details li {
    display: block;
    line-height: 2; }
  .contact-details a {
    display: flex;
    flex-direction: row;
    align-items: center; }

/* ===============================================
    Footer
=============================================== */
.page-footer {
  background: #fff;
  color: #001e50;
  font-size: 1rem;
  position: relative;
  z-index: 2;
  padding-top: 2rem;
  padding-bottom: 4rem; }
  @media (max-width: 767px) {
    .page-footer {
      padding-bottom: 2rem; } }
  .page-footer .wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }

.smiley,
.location-pin {
  fill: #001e50;
  width: 1.5rem;
  margin-right: .5rem; }

.social-media li {
  display: inline-block;
  padding-left: .25rem; }

.social-icon {
  fill: #001e50;
  width: 1.25rem; }

/* ===============================================
    Footer Wave Pattern
=============================================== */
.repeating-wave-pattern {
  position: relative;
  z-index: 2; }

/* ===============================================
	 Posts
=============================================== */
.gallery {
  padding-bottom: 1rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr; }
  .gallery .gallery-item {
    grid-column: span 1; }
  .gallery img {
    width: 100%; }

.gallery-columns-1 {
  /* the slides */
  /* the parent */ }
  .gallery-columns-1 .slick-slide {
    margin: 0 .5rem; }

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr); }

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr); }

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr); }

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr); }

img.size-full {
  width: 100%; }

.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.single-post__content h1,
.single-post__content h2,
.single-post__content h3,
.single-post__content h4,
.single-post__content h5 {
  font-size: 1.5rem;
  padding-bottom: 1rem;
  padding-top: 1em; }

.wysiwyg ul,
.single-post__content ul {
  font-size: 1.125rem;
  padding-bottom: 1em;
  list-style-type: disc;
  list-style-position: inside; }
  .wysiwyg ul ul,
  .single-post__content ul ul {
    padding-left: 1em;
    padding-top: 0; }

.wysiwyg ol,
.single-post__content ol {
  list-style-type: none; }

.wysiwyg p,
.single-post__content p {
  font-size: 1.125rem;
  padding-bottom: 1rem; }

.wysiwyg a,
.single-post__content a {
  text-decoration: underline; }
  .wysiwyg a:hover,
  .single-post__content a:hover {
    color: #56c2b6; }

.wysiwyg .wp-caption-text,
.single-post__content .wp-caption-text {
  color: #abacad;
  font-size: .875rem;
  padding-top: 1rem; }

/* ===============================================
		Partials
===============================================	*/
.accordion-container:last-of-type {
  border-bottom: 1px solid;
  padding-bottom: 1rem; }

.accordion-toggle-icon {
  width: 1rem;
  fill: #56c2b6; }

.accordion-title {
  background: transparent;
  -webkit-appearance: none;
  color: currentColor;
  border: none;
  padding: 0;
  text-align: left;
  outline: none;
  font-size: inherit;
  font-family: inherit;
  border-top: 1px solid;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  margin-top: 1rem;
  cursor: pointer; }
  .accordion-title:focus {
    background: none; }

.accordion-title.active .accordion-toggle-icon {
  transform: rotate(180deg); }

.accordion-content {
  display: none;
  padding-top: 1rem; }

.animate-load {
  opacity: 0;
  transition: opacity .6s ease-in-out, transform 1s ease-in-out; }

.animate-transform {
  transform: translate(-0.5rem, -0.5rem) scale(1); }

.view-detected.animate-load {
  opacity: 1;
  transform: translate(0, 0) scale(1); }

/* ===============================================
  opacity    
=============================================== */
.load-delay--01,
.load-delay--1 {
  transition-delay: .2s; }

.load-delay--02,
.load-delay--2 {
  transition-delay: .4s; }

.load-delay--03,
.load-delay--3 {
  transition-delay: .6s; }

.load-delay--04,
.load-delay--4 {
  transition-delay: .8s; }

.load-delay--05,
.load-delay--5 {
  transition-delay: 1.0s; }

.load-delay--06,
.load-delay--6 {
  transition-delay: 1.2s; }

.load-delay--07,
.load-delay--7 {
  transition-delay: 1.4s; }

.load-delay--08,
.load-delay--8 {
  transition-delay: 1.6s; }

.load-delay--09,
.load-delay--9 {
  transition-delay: 1.8s; }

.load-delay--10 {
  transition-delay: 2s; }

.load-delay--11 {
  transition-delay: 2.2s; }

.load-delay--12 {
  transition-delay: 2.4s; }

.load-delay--13 {
  transition-delay: 2.6s; }

.load-delay--14 {
  transition-delay: 2.8s; }

.load-delay--15 {
  transition-delay: 3.0s; }

.load-delay--16 {
  transition-delay: 3.2s; }

.load-delay--17 {
  transition-delay: 3.4s; }

.load-delay--18 {
  transition-delay: 3.6s; }

.load-delay--19 {
  transition-delay: 3.8s; }

.load-delay--20 {
  transition-delay: 4s; }

.load-delay--21 {
  transition-delay: 4.2s; }

.load-delay--22 {
  transition-delay: 4.4s; }

.load-delay--23 {
  transition-delay: 4.6s; }

.load-delay--24 {
  transition-delay: 4.8s; }

.load-delay--25 {
  transition-delay: 5.0s; }

.load-delay--26 {
  transition-delay: 5.2s; }

.load-delay--27 {
  transition-delay: 5.4s; }

.load-delay--28 {
  transition-delay: 5.6s; }

.load-delay--29 {
  transition-delay: 5.8s; }

.load-delay--30 {
  transition-delay: 6s; }

/* ===============================================
    Transform
=============================================== */
.load-move--up {
  transform: translate(0, 10px); }

.load-move--down {
  transform: translate(0, -10px); }

.load-move--left {
  transform: translate(10px, 0px); }

.load-move--right {
  transform: translate(-10px, 0px); }

.load-move--up-left {
  transform: translate(10px, 10px); }

.load-move--up-right {
  transform: translate(-10px, 10px); }

.load-move--down-left {
  transform: translate(10px, -10px); }

.load-move--down-right {
  transform: translate(-10px, -10px); }

/* ===============================================
    Scale 
=============================================== */
.load-scale--up {
  transform: scale(0.8); }

.load-scale--down {
  transform: scale(1.6); }

.input::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
  font-family: "Roboto", sans-serif;
  transition: color .5s ease-in;
  font-size: 1rem; }
  .input::-webkit-input-placeholder:focus {
    color: #fff; }

.input:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
  font-family: "Roboto", sans-serif;
  transition: color .5s ease-in;
  font-size: 1rem; }
  .input:-ms-input-placeholder:focus {
    color: #fff; }

.input:-moz-placeholder {
  color: inherit;
  opacity: 1;
  font-family: "Roboto", sans-serif;
  transition: color .5s ease-in;
  font-size: 1rem; }
  .input:-moz-placeholder:focus {
    color: #fff; }

.input::-moz-placeholder {
  color: inherit;
  opacity: 1;
  font-family: "Roboto", sans-serif;
  transition: color .5s ease-in;
  font-size: 1rem; }
  .input::-moz-placeholder:focus {
    color: #fff; }

/* ===============================================
		Autofill 
===============================================	*/
/* This overides the google autofill background yellow styling. Puts a white box shadow over it */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px lightgrey inset; }

/* ===============================================
		Form Defaults
===============================================	*/
.input__label {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
  font-family: "Roboto", sans-serif; }
  .input__label span {
    font-size: 0;
    padding-right: 1em;
    transition: font-size 0.3s ease-in-out; }
  .input__label .input_label--always-visible {
    font-size: 1rem;
    flex: 1; }

.input__label--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .input__label--checkbox span {
    flex: 1;
    padding-left: 1rem; }
  .input__label--checkbox a {
    color: #56c2b6; }

.input:focus + span {
  font-size: 1rem; }

.input,
.input--text-area,
.input-text {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 1px solid #56c2b6;
  background: #fff;
  font-family: "Roboto", sans-serif;
  padding: .88rem 1.66rem;
  line-height: 1;
  font-size: 1rem;
  transition: all .2s ease-in-out;
  flex: 3; }
  .input:focus,
  .input--text-area:focus,
  .input-text:focus {
    outline: none; }

.input--select {
  border: 1px solid #56c2b6;
  border-radius: 0;
  background: #fff;
  font-size: 1rem;
  width: 100%;
  padding: .88rem 1.66rem;
  color: #8c8c8c; }
  .input--select option:first-of-type {
    color: #595959; }
  .input--select option:hover,
  .input--select option:checked {
    color: #000000; }

/* ===============================================
	Text Area
=============================================== */
.input--text-area {
  resize: vertical;
  min-height: 6rem; }

/* ===============================================
		Radion Button 
=============================================== */
.radio__container {
  font-size: 1rem;
  padding-bottom: 1rem; }

.input--radio-option {
  display: block;
  margin-top: .4rem;
  margin-bottom: .4rem; }

.input--radio-option-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  padding: .2rem 0;
  border: 1px solid transparent;
  transition: all 0.3s ease-in-out; }

.radio__button {
  display: none; }

.radio__button:hover + .input--radio-option-label {
  cursor: pointer; }
  .radio__button:hover + .input--radio-option-label .radio-button-icon {
    fill: #c6ebe7; }

.radio__button:checked + .input--radio-option-label .radio-button-icon {
  fill: #56c2b6; }

.radio-button-icon {
  width: 1rem;
  fill: #fff;
  margin-right: 1rem; }

#radio-button-icon-border {
  fill: #56c2b6; }

.radio__button:checked + .input--radio-option-label .radio-button-icon #radio-button-icon-check {
  fill: #56c2b6; }

.input--radio-option {
  outline: none; }

/* ===============================================
		Error 
===============================================	*/
.error::-webkit-input-placeholder,
.error:-moz-placeholder,
.error::-moz-placeholder,
error:-ms-input-placeholder {
  color: #cc0000; }

/* ===============================================
		Button 
=============================================== */
.button-container .required {
  float: left; }

.button-container .form_submit_button {
  float: right; }

.form_submit_button {
  cursor: pointer;
  color: currentColor;
  background: transparent;
  display: inline-block;
  padding: 1rem 1.66rem;
  line-height: .8125rem;
  font-size: .8125rem;
  vertical-align: text-bottom;
  border: 2px solid;
  text-align: center;
  transition: all 0.3s ease-in-out;
  -webkit-appearance: none;
  text-transform: uppercase;
  border-radius: 50em;
  text-shadow: none;
  color: inherit; }
  .form_submit_button:hover {
    box-shadow: 2px 3px 1px currentColor; }
  .form_submit_button:active {
    box-shadow: 2px 1px 1px currentColor; }
  .form_submit_button:focus {
    box-shadow: 2px 3px 1px currentColor; }

/* ===============================================
    Image Proportions / Ratios
=============================================== */
.image--image__square {
  padding-bottom: 100%; }

.image--image__portrait {
  padding-bottom: 125%; }

.image--image__landscape {
  padding-bottom: 68%; }

.image--image__panorama {
  padding-bottom: 24%; }

/* ===============================================
		Background Image
===============================================	*/
.image {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1; }

.background-size--cover {
  background-size: cover; }

.background-size--contain {
  background-size: contain; }

/* ===============================================
		CMS Helper Functions
===============================================	*/
.background-position--center--top {
  background-position: center top; }

.background-position--left--top {
  background-position: left top; }

.background-position--right--top {
  background-position: right top; }

.background-position--left--center {
  background-position: left center; }

.background-position--center--center {
  background-position: center center; }

.background-position--right--center {
  background-position: right center; }

.background-position--left--bottom {
  background-position: left bottom; }

.background-position--center--bottom {
  background-position: center bottom; }

.background-position--right--botton {
  background-position: right bottom; }

.module--bookings-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease-in-out;
  padding-top: 4em; }
  .module--bookings-modal .module-content {
    background: #56c2b6;
    border: 25px solid #fff;
    padding: 25px;
    position: relative;
    max-width: 500px;
    width: 40vw; }
    @media (max-width: 767px) {
      .module--bookings-modal .module-content {
        width: 80vw;
        font-size: 14px; } }
  .module--bookings-modal .title {
    text-align: center;
    color: #fff;
    font-size: 36px;
    line-height: 1.16;
    padding-bottom: .5em; }
    @media (max-width: 767px) {
      .module--bookings-modal .title {
        text-align: left; } }

.bookings_visible {
  overflow: hidden; }
  .bookings_visible .module--bookings-modal {
    opacity: 1;
    visibility: visible;
    transition: all .5s ease-in-out;
    padding-top: 0; }

.close-modal-button {
  stroke: #fff;
  width: 44px;
  height: 44px;
  position: absolute;
  top: -70px;
  right: -70px; }
  @media (max-width: 767px) {
    .close-modal-button {
      height: 30px;
      width: 30px;
      right: -22px; } }

.module-content {
  position: relative; }

.overlay-container {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 1rem repeat(12, 96.6666666667px) 1rem auto;
  grid-gap: 0;
  box-sizing: content-box; }
  @media (max-width: 1420px) {
    .overlay-container {
      grid-template-columns: 5% 1rem repeat(12, 1fr) 1rem 5%; } }
  .overlay-container .overlay-content {
    display: flex;
    flex-direction: column;
    justify-content: center; }
  .overlay-container .overlay-alignment--left {
    grid-column: 3/7; }
  .overlay-container .overlay-alignment--center {
    grid-column: 7/12; }
  .overlay-container .overlay-alignment--right {
    grid-column: 11/15; }

/* ===============================================
    Overlay Positioning
=============================================== */
.overlay-position--top {
  justify-content: flex-start; }

.overlay-position--center {
  justify-content: center; }

.overlay-position--bottom {
  justify-content: flex-end; }
