/**
 * Theme Name: Knysna Connect
 * Template:   astra
 * 
 */

/**handles:oceanodyssey_fw-style**/
/*!
Theme Name: oceanodyssey_fw
Theme URI: http://underscores.me/
Author: S2 Web Solutions
Author URI: http://www.s2websolutions.co.za
Description: Built on Underscores framework, by S2 Web Solutions, for Ocean Odyssey
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oceanodyssey_fw

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

oceanodyssey_fw is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button;
    appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

body,button,input,optgroup,select,textarea {
    color: #555a64;
    font-family: "Red Hat Display",sans-serif;
    font-size: 16px;
    font-size: 1.1rem;
    line-height: 1.5
}

h1,h2,h3,h4,h5,h6 {
    clear: both
}

.heading-font,h1 {
    color: #409ea6;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 2.5rem
}

h3 {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2;
    color: #409ea6;
    margin: 0;
    text-transform: uppercase
}

p {
    margin-bottom: 1.5em;
    text-align: justify
}

cite,dfn,em,i {
    font-style: italic
}

blockquote {
    margin: 0 1.5em
}

address {
    margin: 0 0 1.5em
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch",Courier,monospace;
    font-size: 15px;
    font-size: .9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em
}

code,kbd,tt,var {
    font-family: Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
    font-size: 15px;
    font-size: .9375rem
}

abbr,acronym {
    border-bottom: 1px dotted #666;
    cursor: help
}

ins,mark {
    background: #fff9c0;
    text-decoration: none
}

big {
    font-size: 125%
}

.entry-title {
    text-align: center
}

.footer-title {
    text-transform: uppercase;
    font-size: 1.35rem;
    color: #404040;
    font-weight: 700
}

.intro-text {
    line-height: 2;
    color: #409ea6;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700
}

.small-text {
    font-size: .85rem
}

html {
    box-sizing: border-box
}

*,:after,:before {
    box-sizing: inherit
}

body {
    background: #fff
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em
}

ol,ul {
    margin: 0 0 1.5rem 0
}

ul {
    list-style: disc
}

ol {
    list-style: decimal
}

li>ol,li>ul {
    margin-bottom: 0;
    margin-left: 1.5em
}

dt {
    font-weight: 700
}

dd {
    margin: 0 1.5em 1.5em
}

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

figure {
    margin: 1em 0
}

table {
    margin: 0 0 1.5em;
    width: 100%
}

button,input[type=button],input[type=reset],input[type=submit] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0,0,0,.8);
    font-size: 12px;
    font-size: .75rem;
    line-height: 1;
    padding: .6em 1em .4em
}

button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover {
    border-color: #ccc #bbb #aaa
}

button:active,button:focus,input[type=button]:active,input[type=button]:focus,input[type=reset]:active,input[type=reset]:focus,input[type=submit]:active,input[type=submit]:focus {
    border-color: #aaa #bbb #bbb
}

input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=range],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px
}

input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=range]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus {
    color: #111
}

select {
    border: 1px solid #ccc
}

textarea {
    width: 100%
}

a {
    color: inherit
}

a:visited {
    color: inherit
}

a:active,a:focus,a:hover {
    color: inherit
}

a:focus {
    outline: 0
}

a:active,a:hover {
    outline: 0
}

.btn {
    color: #fff!important;
    background-color: #4c6570;
    text-decoration: none;
    padding: 1rem;
    font-weight: 500
}

.small-btn {
    max-width: fit-content;
    border-radius: .5rem
}

.long_btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto
}

#footer-menu li a {
    text-decoration: none
}

.main-navigation ul {
    display: none
}

.main-navigation.toggled ul,.menu-toggle {
    display: block
}

button.menu-toggle {
    height: 50px;
    width: 50px;
    font-size: 40px;
    font-size: 2.4rem;
    padding: 0;
    line-height: 1;
    font-weight: 400;
    background: 0 0;
    border: 0;
    outline: 0;
    float: right
}

.main-navigation .menu-toggle-lines {
    width: 2rem;
    background: #000;
    display: block;
    height: 3px;
    transition: .3s all ease-in;
    margin: 0 auto
}

.main-navigation .menu-toggle-lines::after {
    content: '';
    width: 2rem;
    background: #000;
    display: block;
    height: 3px;
    margin-top: 10px;
    position: absolute;
    transition: .3s all ease-in
}

.main-navigation .menu-toggle-lines::before {
    content: '';
    width: 2rem;
    background: #000;
    display: block;
    height: 3px;
    margin-top: -10px;
    position: absolute;
    transition: .3s all ease-in
}

.main-navigation.toggled .menu-toggle-lines {
    background: unset
}

.main-navigation.toggled .menu-toggle-lines::after {
    transform: rotate(45deg);
    margin-top: 0
}

.main-navigation.toggled .menu-toggle-lines::before {
    transform: rotate(320deg);
    margin-top: 0
}

.main-navigation.toggled ul {
    position: fixed;
    top: 3rem;
    height: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #e1ebef;
    margin: 0;
    z-index: 990;
    padding: 0;
    list-style: none
}

.main-navigation.toggled ul li {
    border-bottom: 1px solid #b6b2b2
}

.main-navigation.toggled ul li a {
    text-decoration: none;
    display: block;
    color: inherit;
    width: 100%;
    text-align: center;
    padding: .4em 0
}

.main-navigation.toggled ul li.menu-item-has-children a {
    display: none
}

.main-navigation.toggled ul li.menu-item-has-children .mobile-label {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 5px 0
}

.main-navigation.toggled ul li.menu-item-has-children .mobile-label::after {
    position: absolute;
    width: .85rem;
    height: .85rem;
    margin: 0 auto;
    margin-top: .35rem;
    margin-left: .35rem;
    content: '';
    background-image: url('http://www.oceanodyssey.co.za/wp-content/themes/oceanodyssey_fw/images/svg/chevron-down-nav.svg');
    background-repeat: no-repeat;
    background-position: center
}

.main-navigation [id^=drop] {
    display: none
}

.main-navigation.toggled ul ul {
    display: none
}

.main-navigation.toggled ul li.active ul {
    width: 90%;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    transform: translateX(-230px);
    display: block;
    z-index: 999;
    transform: translateX(0);
    position: static;
    padding: 10px;
    margin: auto;
    box-shadow: 0 0 1px #eee,0 6px 18px rgba(0,0,0,.15);
    background: #fff;
    margin-bottom: 10px
}

.main-navigation.toggled ul li.active ul:after {
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf2;
    border-left: 1px solid #eaedf2
}

.main-navigation.toggled ul li.active ul li {
    border-bottom: 0;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid
}

.main-navigation.toggled ul li.active ul li a {
    display: block;
    font-size: .9em;
    text-align: center
}

.site-main .comment-navigation,.site-main .post-navigation,.site-main .posts-navigation {
    margin: 0 0 1.5em;
    overflow: hidden
}

.comment-navigation .nav-previous,.post-navigation .nav-previous,.posts-navigation .nav-previous {
    float: left;
    width: 50%
}

.comment-navigation .nav-next,.post-navigation .nav-next,.posts-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%
}

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute!important;
    width: 1px;
    word-wrap: normal!important
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
    clip: auto!important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

#content[tabindex="-1"]:focus {
    outline: 0
}

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.clear:after,.clear:before {
    content: "";
    display: table;
    table-layout: fixed
}

.clear:after {
    clear: both
}

.widget {
    margin: 0 0 1.5em
}

.widget select {
    max-width: 100%
}

.sticky {
    display: block
}

.page,.post {
    margin: 0
}

.updated:not(.published) {
    display: none
}
 /*
.entry-content,.entry-summary,.page-content {
    margin: 1.5em 0 0
} */

.page-links {
    clear: both;
    margin: 0 0 1.5em
}

.comment-content a {
    word-wrap: break-word
}

.bypostauthor {
    display: block
}

.infinite-scroll .posts-navigation,.infinite-scroll.neverending .site-footer {
    display: none
}

.infinity-end.neverending .site-footer {
    display: block
}

.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0
}

embed,iframe,object {
    max-width: 100%
}

.custom-logo-link {
    display: inline-block
}

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%
}

.wp-caption img[class*=wp-image-] {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption .wp-caption-text {
    margin: .8075em 0
}

.wp-caption-text {
    text-align: center
}

.gallery {
    margin-bottom: 1.5rem;
    display: grid;
    max-width: 1440px;
    margin: 0 auto;
    grid-gap: 1rem
}

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

.gallery-columns-3,.gallery-columns-5,.gallery-columns-6,.gallery-columns-7,.gallery-columns-9 {
    grid-template-columns: repeat(3,1fr)
}

figure.gallery-item {
    margin: 0
}

.gallery-item a {
    display: block;
    line-height: 0
}

.clear_all {
    clear: both;
    display: block
}

.row_start {
    display: inline-block;
    width: 100%;
    float: none;
    clear: both
}

.one_fifth,.one_half,.one_quarter,.one_third,.three_quarter,.two_quarter,.two_third {
    display: block;
    float: none;
    list-style: none;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%
}

#backtotop {
    z-index: 999;
    display: inline-block;
    position: fixed;
    visibility: hidden;
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    text-align: center;
    opacity: .2;
    background: #86a1ae;
    border-radius: 100%;
    color: #fff;
    text-decoration: none
}

#backtotop i {
    display: block;
    width: 100%;
    height: 100%;
    line-height: inherit
}

#backtotop.visible {
    visibility: visible;
    opacity: .5
}

#backtotop:hover {
    opacity: 1
}

.grid {
    display: grid;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0
}

.footer-grid,.four-col,.one-col,.three-col,.tour-grid,.two-col,.two-col-auto {
    grid-template-columns: 100%
}

.site-header {
    grid-template-columns: minmax(90px,220px) 1fr auto;
    grid-gap: 0.25rem;
    align-items: center;
    width: 95%
}

.aligned-grid {
    align-items: center
}

.gapped-grid-small {
    grid-gap: 0.5rem
}

.gapped-grid {
    grid-gap: 1rem
}

.gapped-grid-large {
    grid-gap: 2rem
}

.grid-image {
    line-height: 0
}

#masthead,.centered-mobile,.text-centered {
    text-align: center
}

.margin-center-mobile {
    margin: 0 auto
}

.shadowed-item {
    box-shadow: 0 5px 5px rgba(0,0,0,.2)
}

.header-svg-grid,.svg-grid {
    display: grid;
    width: fit-content;
    margin: 0;
    grid-template-columns: 1.5rem auto;
    grid-gap: 0.5rem;
    align-items: center
}

.header-svg-grid>span:first-of-type,.svg-grid>span:first-of-type {
    line-height: 0
}

.header-svg-grid {
    grid-template-columns: 1rem
}

.header-svg-grid>span:nth-of-type(2) {
    display: none
}

.header-svg {
    display: inline-block;
    width: 2.1rem
}

.tour-grid>span {
    padding: .5rem;
    align-self: center;
    height: 100%;
    align-content: center
}

#content,.max-1440,.wrapper {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative
}

#content,.full-width-grid,.max-1440,.nested-grid {
    max-width: 95%
}

#nav-wrapper {
    background-color: rgba(255,255,255,.8);
    position: fixed;
    width: 100%;
    z-index: 999;
    left: 0;
    right: 0;
    margin: 0 auto
}

.white-font {
    color: #fff
}

.blue-font {
    color: #86a1ae
}

.grey-font {
    color: grey
}

.green-font {
    color: #25d366
}

.gray-blue-bg {
    background-color: #86a1ae
}

.alt-bgs,.light-blue-bg {
    background-color: #e1ebef;
    color: grey
}

.bg-info {
    background-color: #e1ebef !important;
}

.alt-bgs:nth-last-of-type(2n),.light-green-bg {
    background-color: #d1ded7
}

.light-grey-bg,.tour-grid>span {
    background-color: #f7f7f7
}

#nav-wrapper.navbar-fixed,.tour-grid:nth-of-type(2n)>span,.white-bg {
    background-color: #fff
}

#nav-wrapper.navbar-fixed {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6)
}

picture,picture>img {
    display: block;
    line-height: 0
}

.site-header-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-gap: 0.5rem;
    align-items: center;
    line-height: 0
}

.site-header-actions .book-online {
    background-color: #86a1ae;
    padding: .5rem;
    border-radius: .25rem;
    color: #fff;
    text-decoration: none
}

#colophon {
    text-align: center
}

#footer-menu,.so-me-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0
}

#footer-menu li {
    display: block;
    margin: .5rem 0
}

.so-me-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 0.5rem;
    width: fit-content
}

#colophon .svg-grid {
    margin: 0 auto
}

.mouse-over {
    position: relative
}

.mouse-over>.mouse-over-image {
    position: relative
}

.mouse-over>.mouse-over-data {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: block;
    background: rgba(69,75,87,0)
}

.mouse-over>.mouse-over-data>a {
    color: #fff;
    margin-top: 10%;
    text-decoration: none;
    display: grid;
    grid-template-columns: 100%;
    align-content: center;
    transform: scale(0);
    transition: .3s ease
}

.mouse-over>.mouse-over-data:hover {
    background: rgba(69,75,87,.8);
    transition: .3s ease
}

.mouse-over>.mouse-over-data:hover>a {
    transform: scale(1)
}

#subscribe-cta {
    cursor: pointer
}

.subscribe_model {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    background-color: rgba(0,0,0,.4)
}

.subscribe_model_data {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: #000!important;
    text-align: center;
    background: #dedede!important;
    padding: 1rem
}

.subscribe_model_content {
    position: relative;
    background-color: #fefefe;
    margin: 3em auto;
    padding: 1.5em;
    border: 1px solid #888;
    width: 95%;
    max-width: 1280px;
    display: block;
    height: 90vh;
    overflow-y: scroll
}

.subscribe_model_content::-webkit-scrollbar {
    width: 1rem;
    background: #ff8080
}

.subscribe_model_content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 .5rem rgba(0,0,0,.3);
    background: #fefefe
}

.subscribe_model_content::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 .5rem rgba(0,0,0,.5);
    background: #888
}

.subscribe_model_content>.closewrapper {
    position: absolute;
    right: 33px;
    top: -1px;
    float: right;
    font-weight: 700;
    line-height: .5
}

.subscribe_model_content>.closewrapper>.close {
    position: fixed;
    width: 50px;
    height: 50px;
    text-align: center;
    background: #888;
    color: #fff;
    vertical-align: middle;
    margin: 0 auto;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 50px;
    z-index: 1100;
    transition: all .25s ease-in
}

.subscribe_model_content>.closewrapper>.close:focus,.subscribe_model_content>.closewrapper>.close:hover {
    background: grey;
    text-decoration: none;
    cursor: pointer
}

.slider_image {
    position: relative
}

.slider_image>input {
    display: none
}

.slider_image>input:first-of-type:checked~ul li:first-of-type {
    margin-left: 0
}

.slider_image>input:nth-of-type(2):checked~ul li:first-of-type {
    margin-left: -100%
}

.slider_image>input:nth-of-type(3):checked~ul li:first-of-type {
    margin-left: -200%
}

.slider_image>input:nth-of-type(4):checked~ul li:first-of-type {
    margin-left: -300%
}

.slider_image>ul {
    position: relative;
    font-size: 0;
    line-height: 0;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    height: calc(100vh - 30px);
    max-height: 1280px;
    min-height: 630px
}

.slider_image>ul>li {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: visible;
    font-size: 15px;
    font-size: initial;
    line-height: normal;
    transition: all .5s cubic-bezier(.4, 1.3, .65, 1);
    vertical-align: top;
    box-sizing: border-box;
    white-space: normal
}

.slider_image.infinity>input:first-of-type:checked~.arrows label.goto-last,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(0),.slider_image>input:nth-of-type(2):checked~.arrows>label:first-of-type,.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2) {
    display: block;
    left: 0;
    right: auto;
    transform: rotate(45deg)
}

.slider_image.infinity>input:last-of-type:checked~.arrows label.goto-first,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3) {
    display: block;
    right: 0;
    left: auto;
    transform: rotate(225deg)
}

.slider_image>.arrows {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.slider_image>.arrows {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 26px;
    z-index: 99;
    box-sizing: content-box;
    max-width: 1920px;
    left: 0;
    right: 0;
    margin: 0 auto
}

.slider_image>.arrows label {
    display: none;
    position: absolute;
    top: -50%;
    padding: 9px;
    box-shadow: inset 2px -2px 0 1px #fff;
    cursor: pointer;
    transition: box-shadow .15s,margin .15s
}

.slider_image>.arrows label:hover {
    margin: 0;
    opacity: .8
}

.slider_image>.arrows label:before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    height: 300%;
    width: 300%
}

.slider_image.infinity>input:first-of-type:checked~.arrows label.goto-last,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(0),.slider_image>input:nth-of-type(2):checked~.arrows>label:first-of-type,.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3) {
    display: block;
    left: 5%;
    right: auto;
    transform: rotate(45deg)
}

.slider_image.infinity>input:last-of-type:checked~.arrows label.goto-first,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),.slider_image>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5) {
    display: block;
    right: 5%;
    left: auto;
    transform: rotate(225deg)
}

.slider-grid {
    display: grid;
    width: 100%;
    max-width: 1920px;
    grid-template-columns: 100%;
    margin: 0 auto
}

.slider-grid>.slider-grid-image {
    grid-row: 1;
    grid-column: 1;
    position: relative
}

.slider-grid>.slider-grid-image>picture,.slider-grid>.slider-grid-image>picture>img {
    object-fit: cover;
    height: calc(100vh - 30px);
    max-height: 1280px;
    min-height: 630px
}

.slider-grid>.slider-grid-image>picture::after {
    content: '';
    background-color: rgba(0,0,0,.3);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0
}

.slider-grid>.slider-grid-content {
    grid-row: 1;
    grid-column: 1;
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    align-content: center
}

.slider-grid>.slider-grid-content>.slider-grid-content-wrapper {
    display: grid;
    width: 75%;
    margin: 0 auto;
    text-align: center
}

.slider-grid>.slider-grid-content>.slider-grid-content-wrapper>.slider-grid-content-title {
    font-size: 2rem;
    color: #fff;
    font-family: "Red Hat Display",sans-serif;
    font-weight: 400
}

.slider-grid>.slider-grid-content>.slider-grid-content-wrapper>.slider-grid-content-text {
    font-size: 1.3rem;
    color: #fff;
    font-family: "Red Hat Display",sans-serif;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase
}

@media screen and (max-width: 1080px) {
    .slider_image.infinity>input:first-of-type:checked~.arrows label.goto-last,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(0),.slider_image>input:nth-of-type(2):checked~.arrows>label:first-of-type,.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3) {
        left:4%
    }

    .slider_image.infinity>input:last-of-type:checked~.arrows label.goto-first,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),.slider_image>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5) {
        right: 4%
    }
}

@media screen and (max-width: 568px) {
    .slider_image.infinity>input:last-of-type:checked~.arrows label.goto-first,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),.slider_image>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5) {
        right:5%
    }
}

@media screen and (max-width: 667px) {
    .slider_image>.arrows label {
        padding:7px
    }
}

@media screen and (max-width: 480px) {
    .slider_image>.arrows label {
        padding:6px
    }
}

@media screen and (max-width: 384px) {
    .slider_image>.arrows label {
        padding:5px
    }
}

@media screen and (max-width: 375px) {
    .slider_image.infinity>input:last-of-type:checked~.arrows label.goto-first,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),.slider_image>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5) {
        right:6%
    }
}

@media screen and (max-width: 320px) {
    .slider_image.infinity>input:last-of-type:checked~.arrows label.goto-first,.slider_image>input:first-of-type:checked~.arrows>label:nth-of-type(2),.slider_image>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),.slider_image>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),.slider_image>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5) {
        right:7%
    }
}

@media screen and (min-width: 1024px) {
    .slider-grid>.slider-grid-content>.slider-grid-content-wrapper>.slider-grid-content-title {
        font-size:3rem
    }

    .slider-grid>.slider-grid-content>.slider-grid-content-wrapper>.slider-grid-content-text {
        font-size: 1.8rem
    }

    .slider-grid>.slider-grid-content>.slider-grid-content-wrapper {
        width: 100%;
        max-width: 980px
    }
}

@media screen and (min-width: 420px) {
    .main-navigation.toggled ul {
        top:100px
    }
}

@media screen and (min-width: 720px) {
    .tour-grid {
        grid-template-columns:1fr 3fr;
        grid-gap: 0.5rem
    }

    .tour-grid>span {
        padding: 1rem
    }
}

@media screen and (min-width: 978px) {
    .centered-mobile {
        text-align:unset
    }

    .margin-center-mobile {
        margin: unset
    }

    .menu-toggle {
        display: none
    }

    .main-navigation ul li.menu-item-has-children a {
        display: block
    }

    .main-navigation ul li.menu-item-has-children .mobile-label {
        display: none
    }

    .main-navigation ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        flex-basis: auto;
        text-transform: none;
        align-items: center;
        font-size: .85rem;
        line-height: 4
    }

    .main-navigation ul li {
        flex: auto;
        position: relative;
        text-align: center
    }

    .main-navigation ul>li.menu-item-has-children>a {
        padding-right: .65rem
    }

    .main-navigation ul>li.menu-item-has-children>a::after {
        position: absolute;
        width: .85rem;
        height: .85rem;
        margin: 0 auto;
        margin-top: 1.2rem;
        margin-left: .35rem;
        content: '';
        background-image: url('http://www.oceanodyssey.co.za/wp-content/themes/oceanodyssey_fw/images/svg/chevron-down-nav.svg');
        background-repeat: no-repeat;
        background-position: center
    }

    .main-navigation ul.sub-menu:after {
        position: absolute;
        top: -9px;
        left: 0;
        right: 0;
        margin: 0 auto;
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 3px 0 0 0;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf2;
        border-left: 1px solid #eaedf2
    }

    .main-navigation ul li:hover>ul.sub-menu {
        display: inherit
    }

    .main-navigation ul.sub-menu {
        min-width: 580px;
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
        transform: translateX(-230px);
        display: none;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #eaedf2;
        padding: 1rem;
        position: absolute;
        top: 55px;
        left: 0;
        box-shadow: 0 0 1px #eee,0 6px 18px rgba(0,0,0,.15);
        z-index: 999;
        line-height: 1em
    }

    .main-navigation ul li ul.sub-menu li {
        color: #666;
        display: inherit;
        padding: 3px 0 0 0;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
        width: 100%
    }

    .main-navigation a {
        color: #86a1ae;
        text-decoration: none
    }

    .main-navigation ul li ul.sub-menu li:hover a,.main-navigation ul li:hover {
        color: #86a1ae
    }

    .main-navigation ul li ul.sub-menu li a {
        font-size: .85rem;
        padding: 4px;
        display: block;
        border-bottom: 1px solid #b6b2b2;
        color: #666;
        text-align: left
    }

    .main-navigation a {
        display: block;
        text-decoration: none;
        font-weight: 500
    }

    .one_fifth:first-of-type,.one_half:first-of-type,.one_quarter:first-of-type,.one_third:first-of-type,.three_quarter:first-of-type,.two_quarter:first-of-type,.two_third:first-of-type {
        margin-left: 0;
        clear: left
    }

    .one_fifth,.one_half,.one_quarter,.one_third,.three_quarter,.two_quarter,.two_third {
        display: block;
        float: left;
        margin: 0 0 0 3.06748466257669%
    }

    .one_half,.two_quarter {
        width: 48.46625766871166%
    }

    .one_quarter {
        width: 21.69938650306748%
    }

    .three_quarter {
        width: 74.23312883435584%
    }

    .one_third {
        width: 31.28834355828221%
    }

    .two_third {
        width: 62.47668711656442%
    }

    .one_fifth {
        width: 17.29938650306748%
    }

    .two-col-auto {
        grid-template-columns: auto auto
    }

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

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

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

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

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

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

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

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

    #colophon {
        text-align: left
    }

    #colophon .svg-grid,#footer-menu,.so-me-grid {
        margin: 0
    }

    #footer-menu li::before {
        content: '';
        width: .65rem;
        height: .65rem;
        display: inline-block;
        background-image: url('http://www.oceanodyssey.co.za/wp-content/themes/oceanodyssey_fw/images/svg/chevron-right-menu.svg');
        background-repeat: no-repeat;
        background-position: center;
        margin-right: .5rem;
        filter: grayscale(1)
    }
}

@media screen and (min-width: 1140px) {
    #content,.full-width-grid,.max-1440,.nested-grid {
        max-width:98%
    }

    .header-svg-grid {
        grid-template-columns: 1rem auto
    }

    .header-svg-grid>span:nth-of-type(2) {
        display: unset
    }

    .header-svg {
        width: 2.1rem
    }

    .main-navigation ul {
        max-width: 820px;
        font-size: .9rem;
        float: right
    }

    .main-navigation ul>li.menu-item-has-children>a::after {
        margin-top: 1.3rem
    }
}

@media screen and (min-width: 1440px) {
    #content,.max-1440 {
        max-width:1280px
    }

    .main-navigation ul {
        font-size: unset
    }

    .site-header {
        width: 100%
    }

    .main-navigation ul>li.menu-item-has-children>a::after {
        margin-top: 1.75rem;
        margin-left: .5rem
    }
}

@media screen and (min-width: 1500px) {
    #content,.max-1440,.nested-grid {
        max-width:1440px
    }

    .full-width-grid {
        max-width: 100%
    }
}

@media screen and (min-width: 1920px) {
    .full-width-grid,.wrapper {
        width:100%;
        max-width: 1920px
    }
}