.OtiumPage .padding {
    padding-bottom: 0
}

.StartOptions {
    background-color: #fff;
    border: 1px solid #ccc
}

.GetStarted {
    background-color: #f6f6f6;
    padding: 70px 0 150px 0
}

.PointsSection h2:after {
    display: none !important
}

.MainTitle h2:after {
    display: none !important
}

.ScenarioBox h2 {
    font-size: 1.6em !important
}

.MainTitle h2 {
    margin-bottom: 50px;
    font-weight: bold;
    font-size: 2.3em !important;
    color: #000 !important
}

.PointsSection h3:after {
    display: none !important
}

.PointsSection h3 {
    color: #666;
    margin-top: 10px;
    font-size: 1.7em
}

.PointsSection h2 {
    margin-top: 10px;
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 2.3em !important
}

.OtiumWrap h4 {
    font-size: 1.4em !important;
    margin-top: 0
}

    .OtiumWrap h4:after {
        display: none !important
    }

.OtiumWrap h2:after {
    display: none !important
}

.PointsSection h2:after {
    display: none !important
}

.PointsSection img {
    border-bottom: 2px solid #007A99
}

.PointsSection i {
    color: #007A99;
    font-size: 3.4em !important
}

    .PointsSection i:hover {
        color: #041D40
    }

.OtiumWrap .padding {
    padding-bottom: 0 !important
}

.OtiumWrap .Eye {
    font-size: 1.1em !important
}

.PointsOptions {
    font-size: .7em;
    background-color: #fff;
    border: 1px solid #ccc
}

.OtiumWrap .Number {
    font-size: 3.0em;
    line-height: 40px;
    text-align: center;
    color: #041D40;
    font-weight: bold
}

.ScenarioBox {
    background-color: #fff;
    border: 1px solid #ccc
}

.OtiumWrap table thead th {
    vertical-align: top
}

.CollectMethod {
    background-color: #fff;
    border: 1px solid #ccc
}

    .CollectMethod h2 {
        font-size: 2em !important
    }

.OtiumWrap table {
    width: 100%;
    border-collapse: collapse
}

.ScenarioTitle {
    color: #041D40 !important;
    font-weight: 400 !important;
    font-size: 1.7em !important
}

.OtiumWrap td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left
}

.OtiumRewards {
    background-color: #041D40;
    color: #FFF
}

    .OtiumRewards h1 {
        font-size: 3em;
        font-weight: bold
    }

.WhatOtium {
    padding: 60px 0;
    margin-top: 20px;
    background-color: #007A99
}

    .WhatOtium p {
        line-height: 33px;
        color: #000;
        font-size: 1.05em !important
    }

.OtiumExample {
    background: -webkit-linear-gradient(rgba(4,29,64,0.80),rgba(4,29,64,0.90)),url(/content/images/mdlaccesscards.jpg);
    background-position: bottom;
    padding: 70px 0 150px 0;
    background-size: cover;
    margin-top: 50px;
    background-attachment: fixed
}

.CollectPoints {
    background-color: #f6f6f6;
    padding: 70px 0;
    margin-top: 0
}

.StartOptions h2 {
    font-size: 1.4em !important
}

.CollectsPointsOption {
    padding: 40px 0;
    margin-top: 20px
}

.LoginPage {
    padding: 70px 0;
    background: -webkit-linear-gradient(rgba(4,29,64,0.55),rgba(4,29,64,0.45)),url(/content/images/ovm1.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    background-attachment: fixed
}

    .LoginPage .invalid {
        color: #F00;
        border: 2px solid #F00;
        border-radius: 5px
    }

    .LoginPage footer {
        display: none
    }

.Title:after {
    display: none !important
}

.LoginBox .LoginButton {
    font-size: 1em;
    color: #323232
}

.FacebookLogin i {
    color: #3b5998 !important
}

    .FacebookLogin i:hover {
        background-color: #3b5998;
        color: #FFF !important
    }

.TwitterLogin i {
    color: #2caae1 !important
}

    .TwitterLogin i:hover {
        background-color: #2caae1;
        color: #FFF !important
    }

.LinkedinLogin i {
    color: #0E76A8 !important
}

    .LinkedinLogin i:hover {
        background-color: #0E76A8;
        color: #FFF !important
    }

.GoogleLogin i {
    color: #D64937 !important
}

    .GoogleLogin i:hover {
        background-color: #D64937;
        color: #FFF !important
    }

.LoginButton i {
    display: inline-block;
    line-height: 38px;
    border: 1px solid rgba(0,0,0,.1);
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 40px;
    color: #323232;
    font-size: 1em
}

.LoginBox {
    background-color: #FFF;
    max-width: 600px;
    float: none;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.10);
    padding: 50px;
    margin-top: 50px
}

    .LoginBox h2 {
        margin-top: 0
    }

    .LoginBox input {
        width: 100%;
        margin-bottom: 15px;
        border: 0;
        background-color: #f2f2f2;
        padding: 15px 15px 15px 45px
    }

    .LoginBox .iconbefore {
        position: absolute;
        top: 22px;
        color: #041D40;
        left: 30px;
        font-size: .9em
    }

.EventCountdown #demo {
    font-size: 1.1em;
    float: right;
    height: 15px
}

.noline:after {
    display: none !important
}

.whitelink {
    color: #FFF !important
}

    .whitelink:hover {
        color: #007A99 !important
    }

#testimonial-carousel img {
    object-fit: none !important;
    height: inherit !important
}

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
    .modal-dialog {
        margin: 0
    }
}

.YourStory .GreyAngleSection {
    -webkit-clip-path: none !important;
    clip-path: none !important
}

.EmailBox {
    background-color: #1d8595;
    padding: 7px 10px;
    color: #FFF;
    width: 40px;
    height: 40px;
    font-size: 1.1em;
    float: none;
    margin: 0 auto;
    display: inline-block;
    border-radius: 5px
}

    .EmailBox:hover {
        border-radius: 50%;
        transition: border-radius .3s linear
    }

.BoatShowNews {
    background-color: #041D40;
    background-image: -webkit-linear-gradient(rgba(4,29,64,0.85),rgba(4,29,64,0.55)),url(/content/images/oceanbg.jpg);
    color: #FFF;
    background-size: cover
}

    .BoatShowNews h3 {
        font-size: 1.7em;
        line-height: 1.4em
    }

.YouTubeBox {
    background-color: #f00;
    padding: 7px 10px;
    color: #FFF;
    width: 40px;
    height: 40px;
    font-size: 1.1em;
    float: none;
    margin: 0 auto;
    display: inline-block;
    border-radius: 5px
}

    .YouTubeBox:hover {
        border-radius: 50%;
        transition: border-radius .3s linear
    }

.InstaBox {
    background: #f09433;
    background: -moz-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: -webkit-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433',endColorstr='#bc1888',GradientType=1);
    padding: 7px 10px;
    color: #FFF;
    width: 40px;
    height: 40px;
    font-size: 1.1em;
    float: none;
    margin: 0 auto;
    display: inline-block;
    border-radius: 5px
}

    .InstaBox:hover {
        background: #f09431;
        background: -moz-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
        background: -webkit-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
        background: linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433',endColorstr='#bc1888',GradientType=1);
        transition: background-color .4s linear;
        border-radius: 50%;
        transition: border-radius .3s linear
    }

.FacebookBox {
    background-color: #3b5998;
    padding: 7px 10px;
    color: #FFF;
    width: 40px;
    height: 40px;
    font-size: 1.1em;
    margin-right: 20px;
    float: none;
    margin: 0 auto;
    display: inline-block;
    border-radius: 5px
}

    .FacebookBox:hover {
        background-color: #486dbd;
        transition: background-color .4s linear;
        border-radius: 50%;
        transition: border-radius .3s ease
    }

.TwitterBox {
    background-color: #2caae1;
    padding: 10px;
    color: #FFF
}

    .TwitterBox:hover {
        background-color: #2489b5;
        transition: background-color .4s ease
    }

.ListingImage img {
    margin-top: -30px;
    z-index: 0
}

.EventText {
    float: left;
    font-weight: bold;
    font-size: 1.2em
}

#inner-text {
    font-size: 1.1em;
    margin-left: -2px
}

#demo span {
    color: #FFF
}

#timer-days {
    margin-right: 5px
}

#timer-hours {
    margin-right: 5px
}

.EventCountdown {
    float: left;
    width: 100%;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 5px;
    background-color: #007A99 !important
}

#InnerText {
    clear: both;
    float: left;
    display: block
}

.Categoryname {
    padding: 15px 0;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    font-weight: 600
}

.PBerth .GreyAngleSection {
    background-color: #FFF !important
}

.DarkBlue {
    background-color: #041D40 !important
}

.ArticleShare .share {
    float: right
}

.Facilities a {
    font-weight: bold
}

.TermsButton {
    width: 300px
}

.modal-open {
    padding-right: 0 !important
}

    .modal-open nav {
        padding-right: 10px !important
    }

.tcs li {
    margin-bottom: 10px
}

.MarinaToursPage h3:after {
    display: none !important
}

#Content a {
    font-weight: bold !important;
    color: #007A99
}

.Address li a {
    color: #000 !important;
    font-weight: 200 !important
}

.HomeContentHub img {
    width: 100% !important
}

.VideoStory .VideoButton {
    font-size: 12px;
    padding: 8px 10px !important
}

.NoBorder {
    border-bottom: 0 !important
}

.Categories {
    background-color: #F7F7F7;
    padding: 10px
}

    .Categories a {
        color: #007A99;
        font-size: .95em !important
    }

.MainTitles {
    font-size: 1.7em
}

.Interested {
    color: #000
}

.NoDivider {
    color: #000 !important
}

    .NoDivider:after {
        display: none !important
    }

.EventListing hr {
    z-index: 1111111111;
    position: inherit
}

.VideoPlay {
    position: relative;
    float: left;
    width: 100%
}

    .VideoPlay img {
        max-width: 100%;
        width: 100%
    }

.VideoButton {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(227,14,19,0.9);
    color: #fff;
    padding: 10px 12px;
    font-size: 14px
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
    background-repeat: no-repeat,repeat !important;
    background-position: right .7em top 50%,0 0 !important;
    background-size: .65em auto,100% !important;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 .35em
}

.AttachmentButton {
    background-color: #E30E13;
    color: #FFF
}

    .AttachmentButton a {
        color: #FFF;
        text-transform: uppercase;
        letter-spacing: .4px
    }

        .AttachmentButton a:hover {
            color: #FFF !important;
            text-decoration: underline
        }

.WoolverstonePage h1 {
    font-size: 2.5em !important
}

.HP h3 {
    font-size: 1.9em
}

.CookiePages .box {
    background-color: #007a99;
    padding: 10px;
    color: #FFF;
    border-right: 1px solid #FFF
}

    .CookiePages .box h4 {
        padding: 0;
        margin: 0;
        font-weight: 400;
        font-size: 1em;
        color: #FFF !important
    }

.box h4:after {
    display: none !important
}

.CookiePages .line {
    padding: 7px;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey
}

.CookiePages .first {
    border-left: 1px solid grey
}

.CookiePages .large {
    height: 68px
}

.CookieBox {
    padding: 3px !important;
    font-size: .9em
}

.thankyou {
    padding: 10px;
    background-color: #D4EDDA;
    border-radius: .25rem;
    text-align: center;
    color: #155724;
    font-weight: 500 !important;
    font-size: 1.15em
}

.AddBox p {
    margin-bottom: 0
}

.Staff h4 {
    font-size: 1.6em !important
}

.WhiteForm .page {
    background-color: #FFF;
    border-radius: 5px
}

.ContactUsForm {
    color: #323232
}

.GreyAngleSection .padding {
    padding: 50px 0
}

.homebtnsection {
    background-color: #fff
}

    .homebtnsection .nav-link.active {
        border: transparent
    }

.TabButtons {
    z-index: 999121;
    margin-top: -40px !important;
    background-color: #F7F7F7;
    border-top: 10px solid #FFF !important;
    border-right: 10px solid #FFF !important;
    border-left: 10px solid #FFF !important
}

.homebtnsection .Tabs {
    color: #323232;
    background-color: #FCFCFC
}

.TabButtons .nav-link a:hover {
    color: #041D40 !important
}

.homebtnsection .nav-link:focus {
    border: 0 !important;
    outline: 0 !important
}

.homebtnsection .nav-link:active {
    outline: 0 !important
}

.MarinaIcons {
    width: 55px
}

.Main_Heading {
    font-size: 2.7em;
    font-weight: bold;
    margin: 25px 0
}

.thankyou::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    margin-right: 10px
}

.pagestory blockquote {
    padding: 10px 20px;
    font-size: 1.2em;
    margin: 30px 0;
    font-weight: 400;
    border-left: 4px solid #007A99;
    clear: both
}

.KeyText {
    vertical-align: middle
}

.FormWrapper {
    clear: both
}

.authorName a {
    color: #323232
}

.CollapseTrigger {
    font-weight: bold;
    color: #323232
}

.HiddenPanel {
    padding-top: 15px
}

.pagestory blockquote:before {
    font-family: "Font Awesome 5 Free";
    content: "\f10d";
    color: #007A99;
    font-size: 38px;
    font-weight: 900;
    display: block
}

.Story .rthmb {
    border-bottom: 1px solid rgba(0,0,0,.125)
}

.pagestory blockquote p {
    margin-bottom: 0
}

.pagestory blockquote footer {
    background: 0;
    padding: 0;
    color: #007A99;
    font-size: .8em;
    text-align: left;
    margin-top: 5px;
    position: inherit !important
}

    .pagestory blockquote footer::before {
        content: "— "
    }

.Slide01 #about_big {
    z-index: -1;
    font-family: 'Poppins',sans-serif;
    font-weight: bold;
    font-size: 280px;
    color: rgba(255,255,255,0.5);
    overflow: hidden;
    padding: 0;
    margin: 0;
    bottom: -65px;
    left: 0;
    position: absolute;
    opacity: .2
}

.Slide01 h1 {
    font-family: inherit !important;
    margin-bottom: 0 !important
}

.Slide02 #about_big1 {
    z-index: -1;
    font-family: 'Poppins',sans-serif;
    font-weight: bold;
    font-size: 100px;
    color: rgba(255,255,255,0.5);
    overflow: hidden;
    padding: 0;
    margin: 0;
    bottom: 15px;
    left: 0;
    position: absolute;
    opacity: .2
}

.MainSliderControls {
    bottom: 50px;
    top: auto;
    width: 150px
}

.MainCarousel .carousel-control-prev {
    right: 30px !important;
    left: auto
}

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

.bluelink {
    color: #007A99 !important;
    font-weight: bold !important
}

.outeritem h3 {
    color: #FFF !important
}

.blacklink {
    color: #323232 !important;
    font-weight: bold !important
}

#Content h1, h2, h3, h4 {
    margin-top: 0:
}

#Content h2 {
    color: #007A99
}

#Content h3 {
    color: #007A99
}

#Content h4 {
    color: #007A99
}

#Content h2:after {
    content: '';
    width: 40px;
    height: 3px;
    background: #E30E13;
    display: block;
    margin-top: 10px
}

#Content h3:after {
    content: '';
    width: 40px;
    height: 3px;
    background: #E30E13;
    display: block;
    margin-top: 10px
}

#Content h4:after {
    content: '';
    width: 40px;
    height: 3px;
    background: #E30E13;
    display: block;
    margin-top: 10px
}

.DropdownActive a::after {
    width: 100% !important;
    top: calc(100% + .5rem);
    height: 2px;
    background: #FFF;
    -webkit-transition: width .3s ease-in-out;
    transition: none !important
}

.outside-marina {
    border: 1.5px solid rgba(0,0,0,.125)
}

.OutsideMarina {
    margin-bottom: 0;
    background-color: #2f2f2f;
    padding: 4px 10px;
    font-size: .85em;
    text-transform: uppercase;
    font-weight: 600;
    width: fit-content;
    color: #FFF;
    border-radius: 5px;
    margin: 5px 0 0 0;
    letter-spacing: .5px
}

.outside-marina .MainTitle {
    color: #2f2f2f !important
}

.AtMarina {
    margin-bottom: 0;
    background-color: #007A99;
    padding: 4px 10px;
    font-size: .85em;
    text-transform: uppercase;
    font-weight: 600;
    width: fit-content;
    color: #FFF;
    border-radius: 5px;
    margin: 5px 0 0 0;
    letter-spacing: .5px
}

.MarinaTitleIcon {
    font-size: .8em
}

.List li {
    line-height: 35px
}

.GreyBoxInner {
    padding: 15px;
    background-color: #F7F7F7
}

.greybox h4:after {
    display: none !important
}

.GreyBoxInner h3 {
    color: #26a4b7 !important
}

.whitebox {
    background-color: #FFF;
    padding: 10px 0;
    text-align: center
}

.errorpage h1 {
    font-size: 11em;
    font-weight: 900 !important;
    letter-spacing: 8px
}

.ErrorPage footer {
    clip-path: none
}

.BerthingPage footer {
    clip-path: none
}

.errorpage {
    background-color: #041D40;
    background-size: initial;
    color: #fff;
    background-image: -webkit-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.6)),url('/content/images/errorbg.jpg');
    background-size: cover;
    background-position: bottom
}

.jumbotron {
    background-color: transparent !important
}

.BackToHome {
    color: #FFF
}

.HomeAbout {
    background-image: url('/content/images/onyachthero.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: right;
    padding: 100px 0 80px;
    min-height: 100vh;
    margin-top: -40px
}


.HomeAbout h2 {
    color: #007A99;
    margin: 0;
    font-size: 2.1em
}

.HomeAbout p {
    line-height: 2;
    color: #000
}

.SocialArticleIcons {
    float: none;
    margin: 0 auto
}

.SocialArticle a {
    float: right
}

.share {
    border-radius: 50px;
    height: 35px;
    padding: 5px;
    width: 35px;
    line-height: 26px;
    float: left;
    font-size: .95em !important;
    margin-right: 5px;
    text-align: center
}

    .share i {
        color: #FFF !important
    }

.facebook {
    background-color: #3b5998;
    color: #fff
}

.twitter {
    background-color: #00aced;
    color: #fff
}

.pinterest {
    background-color: #B3001B
}

.linkedin {
    background-color: #0074B0
}

.emails a {
    background-color: #0074B0
}

.greybg {
    background-color: #F7F7F7
}

.whitebg {
    background-color: #FFF
}

.bluelink:hover {
    font-weight: bold
}

.greybox {
    padding: 40px 20px;
    background-color: #F7F7F7
}

    .greybox h4 {
        margin-top: 0
    }

.TariffsTable td {
    vertical-align: inherit !important;
    font-size: .93em
}

.TariffsTable thead th {
    vertical-align: inherit;
    background-color: #F7F7F7
}

.TariffsTable th:first-child {
    width: 70%
}

.TariffSmall {
    display: block
}

.TariffsTable th {
    color: #007a99
}

.TariffText {
    font-style: italic
}

.MarinaStory h3 {
    font-size: 1.2em
}

.Marinabtn {
    color: #FFF
}

    .Marinabtn a {
        color: #FFF
    }

.MarinaStory .rthmb {
    min-height: 150px
}

.MarinaStory h3:after {
    display: none
}

.MarinaStory a {
    text-align: left
}

.MarinaStory:hover {
    background-color: #FFF !important;
    color: #323232 !important
}

.wi .fas {
    color: #007A99
}

.weather-day {
    margin: 25px 0
}

.weather-icon {
    font-size: 2.5em;
    color: #f1c40f
}

.weather-forecast .card:hover {
    background-color: #F9F9F9;
    color: #323232;
    cursor: auto
}

.Tides table {
    width: 100%;
    text-align: center
}

.Tides td {
    border: 1px solid #eee;
    padding: 10px 5px
}

.Tides th {
    border: 1px solid #eee;
    padding: 10px 5px
}

.Tides td:first-child {
    width: 25%
}

.Tides td:nth-child(2) {
    width: 25%
}

.Tides td:nth-child(3) {
    width: 25%
}

.Tides .TideHigh {
    color: #4CAF50;
    width: 17px;
    position: absolute;
    line-height: 35px;
    font-size: 1.2em
}

.Tides .TideLow {
    color: #F44336;
    position: absolute;
    line-height: 20px;
    width: 17px;
    font-size: 1.2em
}

.TideStatus {
    width: 40px;
    display: inline-block
}
/*
.modal-header {
    display: block !important;
    z-index: 9999999;
    width: 100%;
    float: right;
    position: absolute;
    right: 20px;
    top: 15px;
    border: 0
}
*/
/*.modal-open .modal {
    background-color: rgba(0,0,0,0.65);
    top: 0
}*/
/*
.modal-header .close {
    color: #FFF;
    outline: 0;
    opacity: 1
}
*//*
.modal-title {
    display: none !important
}*/
/*
.modal-footer {
    text-align: left;
    display: block;
    bottom: -7px;
    width: 100%;
    margin-top: 10px;
    border: 0;
    padding: 15px;
    float: left;
    position: absolute
}
*//*
.modal-body {
    padding-bottom: 5px
}

.modal-content {
    width: 95%
}*/
/*
.modal {
    z-index: 9999999999999;
    top: 40px
}*/

.LocalEventsPage h3 {
    font-size: 1.4em;
    color: #007A99
}

.LocalEventsPage .EventDate {
    font-size: .9em
}

.LocalEventsPage p {
    font-size: .85em
}

.LocalEventsPage .card {
    margin-bottom: 0
}

.LocalEventsPage .InnerTextSummary p {
    margin-bottom: 0
}

.LocalEventsPage .card:hover {
    background-color: #fff;
    color: #323232
}

.highlighted a {
    width: 20px;
    height: 20px;
    padding: 5px;
    font-weight: bold;
    color: #007A99 !important;
    font-size: 1.3em !important
}

.calendar {
    border: 1px solid #eee;
    padding: 10px
}

    .calendar td {
        border: 1px solid #eee;
        padding: .9rem 0;
        width: 50px;
        text-align: center
    }

    .calendar th {
        border: 1px solid #eee;
        padding: .6rem 0;
        width: 50px;
        text-align: center
    }

    .calendar td:hover {
        background-color: #041D40;
        color: #FFF
    }

    .calendar table {
        width: 100%
    }

.MarinasPage #next, #back {
    border: 1px solid #eee;
    padding: .6rem;
    float: left
}

.MarinasPage #next {
    float: right
}

.MarinasPage #date {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    padding: .6rem;
    float: left;
    width: 80%;
    text-align: center
}

.calendar #nav {
    background-color: #F7F7F7;
    float: left;
    width: 100%;
    margin-bottom: 15px
}

.BigCTA {
    background-color: #007A99;
    padding: 10px;
    text-align: center;
    color: #FFF;
    border-radius: 5px
}

    .BigCTA a:hover {
        color: #FFF !important;
        font-weight: bold
    }

    .BigCTA p {
        margin-bottom: 0;
        font-weight: bold;
        color: #FFF !important
    }

    .BigCTA a {
        color: #FFF !important
    }

.Address {
    padding: 20px;
    background-color: #F7f7f7
}

.Sidebar h4:after {
    content: '';
    width: 40px;
    height: 3px;
    background: #E30E13;
    display: block;
    margin-top: 10px
}

.MarinasPage .Address li {
    list-style-type: none;
    margin: 0
}

.MarinasPage .Address ul {
    margin-bottom: 0;
    margin: 0;
    padding: 0
}

.bluetext {
    font-weight: bold;
    color: #007A99
}

.MarinasPage .IntroText {
    font-weight: bold;
    color: #007A99;
    font-size: 1em
}

.MarinasPage p {
    color: #626262
}

.MarinasPage .card {
    border-radius: 5px;
    font-size: 1.1em;
    border: 1px solid rgba(0,0,0,0.10)
}

.MarinasPage h4 {
    color: #007A99;
    margin: 20px 0 10px 0
}

.MarinasPage h3 {
    color: #007A99;
    margin: 20px 0 10px 0
}

.MarinasPage a {
    color: #323232
}

.Selected {
    background-color: #1d8595;
    color: #FFF !important;
    font-weight: bold
}

    .Selected .fas {
        color: #FFF !important
    }

.RightLine {
    border-right: 1px solid rgba(0,0,0,0.10)
}

.MarinaHero {
    margin-top: 130px;
    height: 350px;
    background-color: grey;
    background-size: cover;
    clip-path: none !important;
    background-attachment: inherit;
    background-position: center
}

#MarinaCarousel img {
    height: auto !important
}

#MarinaCarousel {
    height: auto !important;
    margin-bottom: 20px
}

.MarinaHeader .navbar {
    background-color: #007A99;
    padding: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.10);
    z-index: 99999999
}

.MarinaHero .hero-desc {
    text-align: center;
    width: 100%;
    top: 80% !important;
    position: relative
}

.MarinaHero h1 {
    font-size: 3em !important;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #FFF;
    letter-spacing: 2.5px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8)
}

.WoolverstoneMarina h1 {
    font-size: 2.4em !important
}

.MercuryMarina h1 {
    font-size: 2.4em !important
}

.darkbluebutton {
    padding: 13px 40px !important;
    font-size: 1em;
    background-color: #041E41 !important;
    text-transform: uppercase
}

.bluebutton {
    padding: 13px 40px !important;
    font-size: 1.05em;
    text-transform: uppercase;
    color: #FFF !important
}

.whitebutton {
    padding: 10px 25px !important;
    font-size: 1.05em;
    text-transform: uppercase;
    background-color: #FFF !important;
    color: #041D40 !important
}

    .whitebutton:hover {
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        transition: all .4s;
        color: #007A99 !important;
        font-weight: bold;
        letter-spacing: .2px
    }

.buttonwrap a:hover {
    color: #FFF !important
}

.bluebutton:hover {
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    color: #FFF !important;
    font-weight: bold;
    letter-spacing: .2px
}

.WaveDivider {
    width: 53px;
    float: left;
    height: 6px;
    clear: both;
    margin: 15px 0;
    background-image: url(/content/images/waveblue.png)
}

.WaveDividerMiddle {
    width: 40px;
    float: none;
    margin-top: 15px;
    margin-bottom: 15px;
    height: 6px;
    clear: both;
    margin: 0 auto;
    background-image: url(/content/images/waveblue.png)
}

.rld {
    width: 40px;
    height: 3px;
    margin: 15px 0;
    background-color: #E30E13
}

.rldmiddle {
    width: 40px;
    height: 3px;
    margin: 0 auto;
    background-color: #E30E13
}

.rldright {
    width: 40px;
    height: 3px;
    float: right;
    margin: 15px 0 5px 0;
    background-color: #E30E13
}

a {
    cursor: pointer
}

    a:hover {
        text-decoration: none;
        color: #041D40 !important;
        cursor: pointer
    }

/*.btn {
    background-color: #007A99;
    border: 1px solid #FFF;
    border-radius: 5px !important
}
*/
/*    .btn:hover {
        background-color: #26a4b7 !important;
        border: 1px solid #FFF !important;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        transition: all .4s;
        color: #FFF !important
    }*/

.Newsletterbtn:hover {
    background-color: #26a4b7 !important;
    border: 1px solid #FFF !important;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s
}

.BottomStories h3 {
    font-size: 1em !important
}

a:focus {
    outline: 0
}

.DropActive {
    border-bottom: 1px solid white
}

.dropdown-menu-arrow {
    top: -29px;
    left: 150px;
    width: 0;
    height: 0;
    position: relative
}

.dropdown-menu {
    left: -100px
}

.dropdown-menu-arrow:before, .dropdown-menu-arrow:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-width: 10px 10px;
    border-style: solid;
    border-color: transparent;
    z-index: 1001
}

.dropdown-menu-arrow:after {
    bottom: -18px;
    right: -8px;
    border-bottom-color: #FFF
}

.dropdown-menu-arrow:before {
    bottom: -17px;
    right: -8px;
    border-bottom-color: rgba(0,0,0,.15)
}

.dropdown-menu {
    background-color: #007A99;
    padding: 10px 20px;
    min-width: 250px;
    box-shadow: 0 0 15px rgba(0,0,0,0.10);
    margin-top: 15px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 5px
}

.dropdown.show .dropdown-menu {
    display: block !important
}

.dropdown.open .dropdown-menu {
    display: block !important
}

.dropdown-item {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding: 10px 0
}

    .dropdown-item .fas {
        font-size: .85em
    }

    .dropdown-item:last-child {
        border: 0
    }

.dropdown-menu a {
    color: #FFF;
    text-transform: uppercase;
    font-size: .9em !important;
    font-weight: 500;
    letter-spacing: .5px;
    padding: 10px 0 10px 0
}

.dropdown-item:hover {
    background-color: transparent;
    color: #26a4b7
}

.searchhidden {
    opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    width: 0;
    height: 0
}

    .searchhidden .form-control {
        height: auto
    }

    .searchhidden input {
        padding: 4px !important
    }

.sbtn {
    opacity: 0;
    background-color: #007A99;
    border: 0;
    padding: 4px 15px
}

    .sbtn .fas {
        color: #FFF
    }

.expanded .sbtn {
    opacity: 1;
    display: block
}

.FWrap.searchhidden.expanded {
    border-radius: 0;
    width: 240px;
    margin-right: 16px
}

.searchhidden.expanded {
    opacity: 1
}

.InnerTitle {
    color: #FFF;
    margin: 0
}

.nav-item {
    font-size: .90em
}

    .nav-item a:hover {
        color: #FFF !important;
        font-weight: bold
    }

nav li:last-child {
    margin-right: 0 !important;
    padding-right: 0 !important
}

.nav-link {
    color: #FFF
}

nav .nav-link {
    font-size: .93em;
    text-shadow: 0 1px 10px rgba(0,0,0,0.6)
}

.dropdown-item.active, .dropdown-item:active {
    background-color: transparent;
    font-weight: bold
}

.NavBarBottom {
    border-top: 1px solid rgba(255,255,255,0.25);
    margin-top: 15px;
    z-index: 1111111
}

.NavBarTop {
    margin-bottom: 0
}

    .NavBarTop .btn {
        background-color: transparent;
        color: #FFF;
        border: 1px solid rgba(255,255,255,0.5);
        font-size: .9em;
        padding: 5px 10px
    }

.FirstNavItem {
    margin-left: 0 !important;
    padding-left: 0 !important
}

    .FirstNavItem .nav-link {
        margin-left: 0 !important;
        padding-left: 0 !important
    }

.navbar {
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 111111111 !important
}

    .navbar .nav-item {
        padding: 0rem .1rem;
        margin: 0 .11rem
    }

.logo {
    width: 260px
}

.HiddenItem {
    display: none
}

    .HiddenItem .active {
        background-color: transparent !important;
        font-weight: bold;
        border: 1px solid #FFF !important
    }

    .HiddenItem a {
        background-color: transparent;
        font-size: .92em
    }

.shrink .HiddenItem {
    display: block
}

.shrink .nav-item {
    padding: 0 !important
}

.shrink {
    background-color: #007A99 !important;
    height: 50px !important;
    transition: all .55s ease-out;
    box-shadow: 0 0 15px rgba(0,0,0,0.10)
}

    .shrink .navbar-nav .nav-link {
        margin-top: 5px
    }

    .shrink .container-fluid {
        padding: 0
    }

    .shrink .logo {
        width: 160px !important
    }

    .shrink .NavBarTop {
        display: none
    }

.navbar-brand {
    margin: 0;
    padding: 0
}

.shrink .dropdown-menu {
    top: 27px !important
}

.shrink .NavBarBottom {
    border: 0;
    margin: 0
}

.navbar .dropdown-menu div[class*="col"] {
    margin-bottom: 1rem
}

.navbar .megamenu {
    border: 0;
    background-color: #333 !important;
    box-shadow: -4px 3px 0 0 rgba(0,0,0,0.05)
}

.megamenu {
    padding: 40px 0
}

.navbar .megamenu {
    width: 100%;
    left: -1px;
    right: 0;
    top: 61px;
    height: 80vh;
    border: 0 !important;
    border-radius: 0;
    z-index: 1111111111111
}

.navbar .megamenu {
    border: 1px solid rgba(0,0,0,.15);
    background-color: #fff
}

.Berthing .card {
    background-color: transparent
}

.Berthing .card-header {
    background-color: #F7F7F7;
    border: 0
}

.Berthing .card a {
    cursor: pointer;
    display: block;
    color: #323232
}

.Berthing h5 {
    color: #007A99
}

.Berthing .card p {
    margin-bottom: 0
}

.DryStackFAQ {
    padding: 30px;
    background-color: #F7f7f7
}

.FreedomBerthing {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.75)),url('/content/images/simplyberthingimage.jpg');
    background-size: cover;
    background-position: center
}

.SimplyBerthing {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.75)),url('/content/images/simplyberthingimage2.jpg');
    background-size: cover;
    background-position: bottom
}

.DryStack .ZoomBox {
    height: 180px !important
}

.DryStackBottom .nav-tabs a {
    color: #323232;
    font-size: 1.3em;
    padding: 15px 0
}

    .DryStackBottom .nav-tabs a:hover {
        color: #007A99 !important
    }

.DryStackBottom .nav-link {
    text-align: center;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.1);
    border-right: 1px solid rgba(0,0,0,.1);
    border-left: 1px solid rgba(0,0,0,.1)
}

.DryStackBottom .tab-pane {
    background-color: #FFF !important;
    padding: 25px
}

.DryStackBottom .tab-content {
    margin-top: -1.5px
}

.DryStackBottom .nav-item .active {
    font-weight: bold;
    border: 0 !important
}

.DSBenefits {
    background-color: #f3f3f3
}

.Member .card {
    border: 0
}

.Member h4 {
    color: #323232 !important
}

.BenefitsWrap {
    background-color: #F7F7F7;
    padding-top: 20px
}

.MDLfuel {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.75)),url('/content/images/mdlfuel.jpg');
    background-size: cover
}

.Drystack {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.75)),url('/content/images/drystackbtn.jpg');
    background-size: cover
}

.ServiceCentre {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.75)),url('/content/images/centreservices.jpg');
    background-size: cover
}

.AboutPageImg {
    border-radius: 5px
}

.ZoomBox h3 {
    font-size: 1.6em;
    margin-top: 0;
    font-weight: 600 !important;
    margin-bottom: 0;
    color: #FFF
}

.InnerContent {
    bottom: 20px;
    width: 100%;
    position: absolute;
    text-align: right;
    z-index: 11;
    right: 30px
}

    .InnerContent h3:after {
        display: none !important
    }

.ContactBox a {
    color: #323232
}

.IYF {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.45)),url('/content/images/introducefriends.jpg');
    color: #FFF;
    background-position: center
}

.Partners {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.45)),url('/content/images/careersbutton.jpg');
    color: #FFF
}

.MoreButton h3 {
    color: #FFF !important
}

.MoreButton .ZoomBox {
    height: 150px !important
}

.MoreButton .InnerContent {
    text-align: left;
    right: 0;
    left: 30px;
    bottom: 10px
}

.Passe {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.45)),url('/content/images/escaleshero.jpg');
    background-position: center;
    color: #FFF
}

.PlatPackage {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.45)),url('/content/images/ourpartnershero.jpg');
    background-position: center;
    color: #FFF
}

.Terms {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.45)),url('/content/images/errorbg.jpg');
    background-position: center;
    color: #FFF
}

.ActiveMarina {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/activemarinas.jpg');
    background-size: cover
}

.Enviro {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/envirobg.jpg');
    background-size: cover
}

.Careers {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/careersbutton.jpg');
    background-size: cover;
    background-position: top
}

.MDLTeam {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/mdlteam.jpg');
    background-size: cover
}

.Sail {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/sailtraining.jpg');
    background-size: cover
}

.ZoomBox {
    width: 100%;
    height: 270px !important;
    height: 100%;
    text-align: left;
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
    cursor: pointer
}

.InnerDiv {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

.ZoomBox:hover .InnerDiv {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2)
}

.ZoomBox:hover .InnerDiv {
    display: block
}

.ContactBox {
    border-radius: 5px;
    background-color: #FFF;
    padding: 50px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.10)
}

.ContactSection h3 {
    color: #FFF
}

.ContactSection a {
    color: #FFF
}

.ContactSection h3:after {
    display: none !important
}

.ContactBox h4:after {
    display: none !important
}

.ContactSection p {
    color: #323232
}

.ContactBox p {
    color: #323232 !important
}

.ContactBox h4 {
    color: #007A99
}

.ContactBox li {
    list-style-type: none
}

.ContactBox ul {
    margin: 0;
    padding: 0
}

.LocalContactBox {
    background-color: #FFF;
    padding: 50px;
    height: 230px !important;
    height: 100%;
    text-align: left
}

    .LocalContactBox a:hover {
        color: #FFF !important;
        font-weight: bold;
        text-decoration: none
    }

    .LocalContactBox h3 {
        font-size: 1.6em;
        margin-top: 0;
        font-weight: 600 !important;
        margin-bottom: 0;
        color: #FFF
    }

    .LocalContactBox p {
        color: #FFF
    }

.InnerText {
    bottom: 0;
    width: 100%;
    position: absolute;
    text-align: right;
    right: 30px
}

.ContactBox a {
    color: #323232
}

.Bray {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/brayaerial.jpg');
    background-size: cover
}

.Brixham {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/brixham_1.jpg');
    background-size: cover
}

.Chatham {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/chathammaritime.jpg');
    background-size: cover
}

.Cobbs {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/cobbs.jpg');
    background-size: cover
}

.Hamble {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/hamble.jpg');
    background-size: cover
}

.Dartside {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/dartside.jpg');
    background-size: cover
}

.Hythe {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/hythe_1.jpg');
    background-size: cover
}

.Mercury {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/mercuryaerial.jpg');
    background-size: cover
}

.Northney {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/northneyaerial.jpg');
    background-size: cover
}

.Ocean {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/oceanmarina.jpg');
    background-size: cover
}

.Penton {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/penton.jpg');
    background-size: cover
}

.PortHamble {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/porthamble.jpg');
    background-size: cover
}

.Saxon {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/saxon_1.jpg');
    background-size: cover
}

.Queen {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/queen.jpg');
    background-size: cover
}

.Shamrock {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/shamrock.jpg');
    background-size: cover
}

.Windsor {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/windsor.jpg');
    background-size: cover
}

.Sparkes {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/sparkes.jpg');
    background-size: cover
}

.Torquay {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/torquay.jpg');
    background-size: cover
}

.Woolver {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/woolver.jpg');
    background-size: cover
}

.Sant {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.85)),url('/content/images/sant.jpg');
    background-size: cover;
    background-position: center
}

.General {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.65)),url('/content/images/marinaofficepic.jpg');
    background-size: cover;
    background-position: center
}

.Comments {
    background-image: linear-gradient(180deg,transparent 5%,rgba(0,0,0,.65)),url('/content/images/yacht.jpg');
    background-size: cover
}

.AngleGrey {
    background-color: #F5F5F5;
    position: relative;
    text-align: left;
    padding-top: 150px;
    float: left;
    width: 100%;
    background-position: center;
    color: #FFF;
    clip-path: polygon(0 0,100% 13%,100% 100%,0% 100%);
    -webkit-clip-path: polygon(0 0,100% 13%,100% 100%,0% 100%);
    margin-top: -110px;
    z-index: -111
}

.GreyAngleSection {
    background-color: #F8F8F8
}

.ContactSection {
    position: relative;
    text-align: left;
    padding-top: 300px;
    float: left;
    width: 100%;
    background-position: center;
    color: #FFF;
    clip-path: polygon(0 0,100% 13%,100% 100%,0% 100%);
    -webkit-clip-path: polygon(0 0,100% 13%,100% 100%,0% 100%);
    margin-top: -250px;
    z-index: -111111
}

    .ContactSection .fas {
        color: #041D40 !important
    }

.Selected i {
    color: #FFF !important
}

.MarinasPage .titles {
    display: none
}

.MarinasPage {
    padding: 40px 0
}

    .MarinasPage .Bread {
        color: #323232 !important
    }

.MarinaButtons .card {
    margin-bottom: 20px
}

    .MarinaButtons .card a {
        display: block;
        border-radius: 5px;
        padding: 20px 10px;
        font-size: .9em;
        letter-spacing: .4px
    }

        .MarinaButtons .card a:hover {
            color: #FFF;
            transition: none;
            text-decoration: none
        }

.ViewBrochure {
    font-size: 1em;
    font-weight: bold;
    color: #FFF !important
}

.TopSection h2 {
    margin: 0
}

.MarinaImage {
    margin-bottom: 10px
}

.MarinaButtons .fas {
    color: #bababa;
    display: block;
    font-size: 1.3em
}

.MarinaButtons .far {
    color: #bababa;
    display: block;
    font-size: 1.3em
}

.MarinaButtons .card:hover {
    background-color: #007A99;
    cursor: pointer;
    color: #FFF !important;
    text-decoration: none
}

.Facilities li {
    line-height: 35px
}

.MarinaButtons .card a:hover {
    color: #FFF !important;
    font-weight: bold
}

.MarinasPage .SVGMarinaMap {
    border: 2px solid #6499CD
}

.NewsItem {
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(23,119,224,.06)
}

    .NewsItem h5 {
        margin-top: 0;
        font-size: 1.2em
    }

    .NewsItem p {
        font-size: .9em
    }

.textinner {
    padding: 15px
}

.NewsWrapper h2 {
    font-size: 1.4em
}

.StoryImage img {
    min-height: 170px
}

.Story p {
    color: #323232;
    font-size: .93em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.Story h3 {
    font-weight: bold;
    font-size: 1.2em
}

.Story {
    text-align: center
}

.NewsWrapper h3 {
    font-size: 1.3em;
    color: #323232;
    font-weight: 500;
    margin-top: 0
}

.NewsWrapper .fas {
    margin-right: 5px
}

.EventsPanel {
    height: auto
}

.StoryImg {
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: 10px
}

.EventDate hr {
    border-color: rgba(0,0,0,.125)
}

.EventDate {
    font-weight: bold
}

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.04) !important
}

.EventsCarousel .card {
    border-radius: 5px
}

.EventsCarousel h3 {
    font-size: 1.4em;
    color: #007A99;
    margin-top: 5px
}

.EventsCarousel .card-body-top {
    padding: 20px 20px 0 20px
}

.EventsCarousel .card .far {
    color: #041D40;
    width: 15px
}

.EventsCarousel .card .fas {
    color: #041D40;
    width: 15px
}

.EventsCarousel {
    height: auto !important;
    padding: 20px 0;
    background-color: #FFF !important
}

    .EventsCarousel .carousel-inner {
        overflow: visible !important
    }

.EventDate li {
    padding: 10px 0
}

.EventsCarousel .carousel-item a {
    color: inherit
}

.EventsCarousel .carousel-item {
    margin-right: 0 !important
}

.EventsCarousel img {
    height: auto !important
}

.EventsCarousel .carousel-item:after {
    display: none
}

.EventSliderControl {
    width: 100px;
    margin: 0 auto;
    display: block
}

.monthbox {
    position: absolute;
    top: 15px;
    z-index: 1111111;
    background-color: #E30E13;
    color: #FFF !important;
    padding: 3px 10px;
    font-weight: bold;
    font-size: .85em;
    float: right;
    text-transform: uppercase;
    right: 0
}

    .monthbox p {
        color: #FFF !important
    }

.EventsPrev {
    float: left;
    width: 50px;
    bottom: 0;
    position: relative !important
}

    .EventsPrev i {
        color: #007A99 !important
    }

.EventsNext i {
    color: #007A99 !important
}

.EventsNext {
    float: left;
    position: relative !important;
    bottom: 0;
    width: 50px
}

.EventDate {
    margin-top: 10px;
    border-top: 1.5px solid #e9e9e9
}

.ArticlePage .Bread a {
    color: #323232
}

article h1 {
    font-weight: bold;
    font-size: 2.7em;
    margin: 25px 0
}

article h2 {
    color: #007A99;
    font-size: 2em
}

article h3 {
    color: #007A99;
    font-size: 2em
}

    article h3:after {
        content: '';
        width: 40px;
        height: 3px;
        background: #E30E13;
        display: block;
        margin-top: 10px
    }

article h2:after {
    content: '';
    width: 40px;
    height: 3px;
    background: #E30E13;
    display: block;
    margin-top: 10px
}

.ArticlePage .Bread {
    color: #323232 !important
}

.pagestory .rthmb {
    margin-bottom: 15px
}

.VideoPanel {
    height: auto !important
}

.videos {
    max-width: 700px
}

.video-wrap {
    position: relative;
    max-width: 700px;
    width: 100%
}

    .video-wrap p {
        position: absolute;
        bottom: 10px;
        color: #FFF !important;
        left: 20px;
        font-size: .85em;
        font-weight: bold
    }

    .video-wrap .fas {
        font-size: .8em;
        margin-right: 10px
    }

    .video-wrap .placeholder {
        max-width: 700px;
        width: 100%
    }

.videowrap .play-btn {
    position: absolute;
    max-width: 700px;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    line-height: 1;
    text-align: center;
    color: #eaeaea;
    background-color: rgba(0,0,0,.6);
    border-radius: 50px;
    transition: all .2s ease;
    z-index: 1111111
}

.video-wrap .play-btn {
    position: absolute;
    max-width: 700px;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    line-height: 1;
    text-align: center;
    color: #eaeaea;
    background-color: rgba(0,0,0,.6);
    border-radius: 50px;
    transition: all .2s ease;
    z-index: 1111111
}

.Smaller {
    width: 30px !important;
    height: 30px !important
}

    .Smaller::after {
        font-size: 12px !important;
        padding-top: 9px !important;
        padding-left: 4px !important
    }

.video-wrap .play-btn:hover, .video-wrap .play-btn:focus {
    color: #000;
    background-color: rgba(255,255,255,.8);
    cursor: pointer
}

.play-btn::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 25px;
    content: "\f04b";
    padding-top: 17px;
    padding-left: 5px
}

.MapIcon {
    font-size: .8em
}

.Features {
    color: #323232
}

    .Features .far {
        float: right;
        margin-top: 5px
    }

    .Features .fas {
        float: right;
        margin-top: 5px
    }

.HP h3 {
    color: #007A99
}

.Parks {
    color: #FFF !important
}

.FBerthing button {
    background-color: transparent;
    border: 0;
    text-align: left;
    width: 100%;
    outline: 0
}

.FBerthing .bluebutton {
    color: #FFF
}

.TabButtons a:hover {
    color: #041D40 !important
}

.card-header {
    border-bottom: 0
}

.FBerthing .card-header {
    padding: 10px
}

.card-header h5 {
    font-size: 1.15em
}

.DropdownPanel p {
    margin-bottom: 0
}

#testimonial-carousel p {
    font-size: .73em;
    line-height: 25px
}

#testimonial-carousel {
    background-color: #F7F7F7;
    height: auto
}

    #testimonial-carousel .fa {
        font-size: .85em
    }

.FBerthing .carousel-indicators li {
    background-color: #007A99;
    padding: 1px 0
}

.TryMDL .pageshero {
    background-position: bottom
}

.StaffLoginPG .pageshero {
    background-image: url(/content/images/sitemaphero.jpg);
    background-position: bottom
}

.Exhibitors .pageshero {
    background-position: bottom
}

.PBerth .pageshero {
    background-image: url(/content/images/berthinghero_2.jpg);
    background-position: bottom
}

.MarinaTours .pageshero {
    background-image: url(/content/images/marinaheroo.jpg);
    background-position: bottom
}

.BoatShows .pageshero {
    background-image: url(/content/images/boatshowhero.jpg)
}

.ContentHubpg .pageshero {
    background-image: url(/content/images/escaleshero.jpg);
    background-position: bottom
}

.CategoryPG .pageshero {
    background-image: url(/content/images/escaleshero.jpg);
    background-position: bottom
}

.Platinum .pageshero {
    background-image: url(/content/images/package.jpg)
}

.MainEventsPage .pageshero {
    background-image: url(/content/images/eventshero.jpg);
    background-attachment: inherit !important;
    background-position: bottom
}

.Covid .pageshero {
    background-image: url(/content/images/sitemaphero.jpg);
    background-position: bottom
}

.EventsInner .pageshero {
    background-image: url(/content/images/package.jpg);
    height: 200px
}

.EventsInner .Bread {
    color: #323232 !important
}

    .EventsInner .Bread a {
        color: #323232 !important
    }

.MainEventsPage .Bread {
    color: #323232 !important
}

    .MainEventsPage .Bread a {
        color: #323232 !important
    }

.Introduce .pageshero {
    background-image: url(/content/images/introducefriends.jpg);
    background-position: bottom
}

.CruisingClub .pageshero {
    background-image: url(/content/images/crusingclub.jpg);
    background-position: bottom
}

.Towergate .pageshero {
    background-image: url(/content/images/towergateinsurance_1.jpg);
    background-position: bottom
}

.PasseportPage .pageshero {
    background-image: url(/content/images/escaleshero.jpg);
    background-position: bottom
}

.capage .pageshero {
    background-image: url(/content/images/crusinghero2.jpg);
    background-position: center
}

.SitemapPage .pageshero {
    background-image: url(/content/images/sitemaphero.jpg);
    background-position: center
}

.bobpage .pageshero {
    background-image: url(/content/images/bedsonboardhero.jpg);
    background-position: bottom
}

.NewsletterPage .pageshero {
    background-image: url(/content/images/newsletterhero.jpg);
    background-position: bottom
}

.OtiumPage .pageshero {
    background-image: url(/content/images/otiumhero.jpg);
    background-position: center;
    background-attachment: inherit
}

.BerthingMainPage .pageshero {
    background-image: url(/content/images/berthhero.jpg);
    background-position: bottom;
    background-attachment: inherit
}

.FreedomBerthingPage .pageshero {
    background-image: url(/content/images/berthinghero_1.jpg);
    background-position: center
}

.FreedomBerthingPartners .pageshero {
    background-image: url(/content/images/ourpartnershero.jpg);
    background-position: center
}

.SimplyBerthingPage .pageshero {
    background-image: url(/content/images/berthinghero_2.jpg);
    background-position: bottom
}

.MyMDLPG .pageshero {
    background-image: url(/content/images/berthinghero_1.jpg);
    background-attachment: inherit !important;
    background-position: center
}

.Managed .number {
    border-radius: 50px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #007998;
    color: #FFF;
    font-size: 1.2em;
    font-weight: bold
}

.Managed a {
    color: #007A99;
    font-weight: bold
}

.bluetitle {
    color: #007A99;
    margin-top: 0
}

.AM h4 {
    color: #007A99;
    margin: 20px 0 10px 0
}

.Heading {
    color: #007A99;
    margin: 20px 0 10px 0;
    font-size: 2em;
    font-weight: bold
}

.AM h2 {
    font-size: 2em
}

.HoildayParks .pageshero {
    background-image: url(/content/images/woolverpagehero_1.jpg);
    background-position: bottom;
    background-attachment: inherit
}

.ArticlePage .pageshero {
    background-image: url(/content/images/marinashero.jpg);
    background-position: center;
    height: 200px !important
}

.CookiesPolicyPage .pageshero {
    background-image: url(/content/images/eventshero.jpg);
    background-position: center
}

.WoolverstonePage .pageshero {
    background-image: url(/content/images/woolverpagehero.jpg);
    background-position: bottom
}

.RiversidePage .hero-desc h1 {
    font-size: 2.6em !important
}

.RiversidePage .pageshero {
    background-image: url(/content/images/riversidehero.jpg);
    background-position: bottom
}

.ContentHub .pageshero {
    background-image: url(/content/images/contenthubhero.jpg);
    background-position: center
}

.LatestNewsPage .pageshero {
    background-image: url(/content/images/latestnewshero.jpg);
    background-position: center
}

.MDLFuel .pageshero {
    background-image: url(/content/images/sailthero.jpg);
    background-position: bottom
}

.BerthingPage .pageshero {
    background-image: url(/content/images/berthingheroimg.jpg);
    background-position: center
}

.BerthingPage .padding {
    padding-bottom: 0
}

.PartnersPage .pageshero {
    background-image: url(/content/images/ourpartnershero.jpg);
    background-position: center
}

.YourJourney .pageshero {
    background-image: url(/content/images/yourjourneyhero.jpg);
    background-position: center
}

.EnviroPage .pageshero {
    background-image: url(/content/images/enviromenthero.jpg);
    background-position: bottom
}

.DryStack .pageshero {
    background-image: url(/content/images/drystack.jpg);
    background-position: bottom
}

.ManagedServicesPage .pageshero {
    background-image: url(/content/images/managedserviceshero.jpg);
    background-position: bottom
}

.StoragePage .pageshero {
    background-image: url(/content/images/storageunits_1.jpg);
    background-position: top
}

.YourStory .pageshero {
    background-image: url(/content/images/storyhero.jpg);
    background-position: bottom
}

.ServicesDirectory .pageshero {
    background-image: url(/content/images/serviceshero.jpg);
    background-position: top
}

.MDLTeamPage .pageshero {
    background-image: url(/content/images/mdlteamhero_1.jpg);
    background-position: bottom
}

.BoatyardBox {
    padding: 30px 5px;
    text-align: center;
    background-color: #F7F7F7;
    background-position: center
}

    .BoatyardBox h4 {
        color: #FFF !important
    }

        .BoatyardBox h4:hover {
            font-weight: 600
        }

        .BoatyardBox h4:after {
            display: none !important
        }

    .BoatyardBox h4 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.4em
    }

.BoatyardService .pageshero {
    background-image: url(/content/images/boatyardhero.jpg);
    background-position: center
}

.PrivacyPage .pageshero {
    background-image: url(/content/images/privacyhero.jpg);
    background-position: bottom
}

.SailTrainingPage .pageshero {
    background-image: url(/content/images/sailthero.jpg);
    background-position: bottom
}

.PropertiesPage .pageshero {
    background-image: url(/content/images/boatpropertyhero.jpg);
    background-position: bottom
}

.CareersPage .pageshero {
    background-image: url(/content/images/careershero.jpg);
    background-position: bottom
}

.Aboutus .pageshero {
    background-image: url(/content/images/aboutusmdl.jpg);
    background-position: center
}

.AdvertisePage .pageshero {
    background-image: url(/content/images/advertisehero.jpg);
    background-position: bottom
}

.MarinasHomePage .titles {
    display: none
}

.MarinasHomePage .FreedomLogo {
    display: none
}

.pageshero {
    background-color: #007A99;
    background-attachment: fixed;
    background-size: cover;
    height: 550px;
    position: relative;
    text-align: center;
    padding-top: 55px;
    float: left;
    width: 100%;
    background-position: center ;
      background-image: url(/content/images/berthhero.jpg);
}

.rthmb {
    display: block;
    max-width: 100%;
    height: auto
}

.pageshero .overlay {
    background: url(/content/images/overlayimage.png) repeat-x rgba(13,38,67,0.1);
    opacity: .9;
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    z-index: 1
}

.errorpage .overlay {
    left: 0;
    background: url(/content/images/overlayimage.png) repeat-x rgba(13,38,67,0.1);
    opacity: .8;
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    z-index: 1
}

.pageshero .hero-desc {
    top: auto !important;
    text-align: left;
    width: 70% !important;
    bottom: 0 !important
}

.pageshero h1 {
    font-size: 3.1em;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #FFF;
    letter-spacing: 2.5px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8)
}

.content a {
    color: #007a99;
    font-weight: bold
}

.ContentTitleSmall small {
    color: #9ea9b3;
    letter-spacing: 10px
}

.ContentTitleSmall h2 {
    color: #323232 !important
}

    .ContentTitleSmall h2:after {
        display: none !important
    }

.ContentTitleSmall h3:after {
    display: none !important
}

.content h4 {
    margin: 0;
    padding: 0;
    color: #007a99;
    font-weight: bold;
    font-size: 2em
}

.Bread .fa-home {
    display: none
}

.Bread {
    color: #FFF;
    letter-spacing: 1.5px;
    font-size: .75em
}

.pageshero .Bread a {
    color: #FFF !important
}

.Bread p {
    margin-bottom: 0
}

#Panels a {
    color: #E30E13 !important
}

#Panels .fas {
    color: #E30E13 !important
}

.SearchInput {
    padding: 13px 15px !important;
    height: auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

#paging {
    display: block;
    float: right;
    text-transform: uppercase;
    font-size: .85em;
    font-weight: bold
}

    #paging .prev {
        border-radius: 5px;
        padding: 10px 15px;
        margin-right: 20px;
        border: 1px solid rgba(0,0,0,.1);
        color: #26a4b7
    }

    #paging .next {
        border-radius: 5px;
        padding: 10px 15px;
        border: 1px solid rgba(0,0,0,.1);
        color: #26a4b7
    }

.serb {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

#results ul {
    padding: 0
}

#results h2 {
    padding: 0;
    margin-top: 20px;
    color: #007A99;
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase
}

#results h3 {
    padding: 0;
    margin-top: 0;
    color: #007A99;
    font-weight: bold;
    font-size: 1.5em
}

#results p {
    color: #323232;
    margin-bottom: 0;
    font-size: .9em
}

#results li {
    list-style-type: none
}

.padding {
    padding: 45px 0;
    clear: both
}

.Search .fa {
    color: #FFF
}

.clearfix {
    width: 100%;
    height: 10px;
    display: block;
    clear: both
}

.clearfixLarge {
    width: 100%;
    height: 15px;
    display: block;
    clear: both
}

.clearfixNone {
    width: 100%;
    display: block;
    clear: both
}

.Land {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/land.jpg')
}

.Containers {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/storagecontainers.jpg');
    background-size: cover;
    background-position: center
}

.Shed {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/shed.jpg');
    background-size: cover;
    background-position: center
}

.StorageUnits {
    background-image: linear-gradient(180deg,transparent 10%,rgba(0,0,0,.55)),url('/content/images/storageunits.jpg');
    background-size: cover;
    background-position: center
}

.content {
    position: relative;
    width: 90%;
    max-width: 400px;
    margin: auto;
    overflow: hidden
}

.InnerContentStorage {
    bottom: 20px;
    width: 100%;
    position: absolute;
    text-align: left;
    z-index: 11;
    left: 30px
}

.content .content-overlay {
    background: rgba(0,0,0,0.7);
    position: absolute;
    height: 99%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all .4s ease-in-out 0s;
    -moz-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s
}

.content:hover .content-overlay {
    opacity: 1;
    transform: scale(0.7)
}

.content-image {
    width: 100%
}

.statusbox {
    position: absolute;
    top: 15px;
    z-index: 1111111;
    background-color: #E30E13;
    color: #FFF;
    padding: 3px 10px;
    font-weight: bold;
    font-size: .85em;
    float: right;
    text-transform: uppercase;
    right: 0
}

.content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.content:hover .content-details {
    top: 50%;
    left: 50%;
    opacity: 1
}

.content-details h3 {
    color: #fff;
    font-weight: 500;
    letter-spacing: .15em;
    margin-bottom: .5em;
    text-transform: uppercase
}

.content-details p {
    color: #fff;
    font-size: .8em
}

.fadeIn-bottom {
    top: 80%
}

.fadeIn-top {
    top: 20%
}

.fadeIn-left {
    left: 20%
}

.fadeIn-right {
    left: 80%
}

.line {
    border-right: 1px solid rgba(0,0,0,.125)
}

.TopLine {
    border-top: 1px solid rgba(0,0,0,.125)
}

.Available {
    font-size: 1.1em;
    margin: 0 0 10px 0;
    font-weight: bold;
    text-transform: uppercase
}

.StorageServices .bluelink {
    font-weight: 400 !important;
    display: block;
    font-size: .9em
}

.hero-desc {
    position: absolute;
    width: 50%;
    z-index: 111111;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.SliderButton {
    padding: 13px 40px !important;
    font-size: .9em
}

.blueButton {
    padding: 13px 40px !important;
    font-size: .9em
}

.carousel {
    background-color: #000
}

.hero-desc h2 {
    font-size: 5.8em;
    line-height: .9;
    color: #FFF;
    font-weight: 300;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8)
}

.hero-desc .toptext {
    font-size: 3em;
    line-height: 1.2;
    color: #FFF;
    font-weight: 900;
    width: 100%;
    float: left;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8)
}

.hero-desc .bottomtext {
    font-size: 1.5em;
    line-height: 1;
    color: #FFF;
    text-transform: uppercase;
    float: left;
    margin: 20px 0;
    font-weight: 400;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8)
}

.hero-desc p {
    text-shadow: 0 1px 10px rgba(0,0,0,0.8);
    color: #FFF
}

.hero-desc .btn {
    text-transform: uppercase;
    font-weight: bold
}

.MainCarousel .carousel-item:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    background: url(/content/images/overlayimage.png) repeat-x rgba(13,38,67,0.3);
    opacity: 1
}

.carousel {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.Tabs .nav-link {
    color: #58585a;
    font-weight: 700;
    font-size: 1.1em;
    padding: 50px 0
}

.Tabs .active {
    color: #323232 !important;
    background-color: #FFF !important
}

.nav-link .active {
    background-color: #FFF !important;
    border: 0 !important;
    color: #323232 !important;
    margin: 0
}

.nav-tabs .nav-link.active {
    border-right: 0 !important;
    border-top: 0;
    border-radius: 0 !important
}

.tab-pane {
    padding: 30px 0
}

    .tab-pane h3 {
        margin-bottom: 0
    }

    .tab-pane p {
        color: #323232
    }

.Tabs .nav-item {
    border-right: 1px solid #c7c7c7;
    height: 220px
}

    .Tabs .nav-item:last-child {
        border: 0
    }

.nav-tabs {
    border: 0 !important
}

    .nav-tabs .nav-item {
        margin-bottom: 0 !important
    }

.Tabs li:hover {
    background-color: #FFF
}

.arrow {
    display: none
}

.active .arrow {
    display: block !important;
    margin-top: 10px;
    font-size: 1.3em;
    -webkit-animation-name: bouncey;
    animation: bouncey 1s infinite alternate;
    -webkit-animation: bouncey 1s infinite alternate
}

@keyframes bouncey {
    from {
        transform: translateY(0px)
    }

    to {
        transform: translateY(-5px)
    }
}

@-webkit-keyframes bouncey {
    from {
        transform: translateY(0px)
    }

    to {
        transform: translateY(-5px)
    }
}

.carousel .carousel-inner img {
    display: block;
    object-fit: cover;
    height: 100vh
}

.MainCarousel {
    clip-path: polygon(50% 0,100% 0,100% 33%,100% 100%,84% 99%,53% 95%,14% 88%,0 100%,0% 35%,0 0);
    -webkit-clip-path: polygon(50% 0,100% 0,100% 33%,100% 100%,84% 99%,53% 95%,14% 88%,0 100%,0% 35%,0 0)
}

.carousel .carousel-inner {
    height: 100%
}

video {
    object-fit: cover;
    display: block;
    height: 100vh
}

#cookiePopup {
    padding: 10px 0;
    font-size: 14px;
    text-align: center;
    background: rgba(50,50,50,0.85);
    color: #FFF;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
    position: fixed;
    bottom: 15px;
    right: 30px;
    width: 17%;
    z-index: 999999999;
    display: none
}

    #cookiePopup a {
        color: #FFF
    }

.cookietext {
    text-align: center;
    float: left;
    margin-top: 5px;
    font-size: .95em
}

#cookieClose {
    font-size: 1em;
    font-weight: 500;
    float: right;
    padding: 4px;
    margin-bottom: 0;
    background: #007A99;
    border-radius: 0
}

#cookiePopup .learnmore {
    text-decoration: underline !important
}

#cookieClose a {
    color: #000
}

.learnmore:hover {
    color: #FFF !important
}

footer i.fab {
    display: inline-block;
    line-height: 38px;
    border: 1px solid #9faebe;
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 40px;
    color: #9faebe;
    font-size: 1em
}

.Address a {
    font-weight: 200 !important
}

footer i.fab:hover {
    background-color: #1d8595
}

.FDivider {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin: 40px 0 55px 0
}

footer form {
    display: flex;
    flex-direction: row;
    background: white;
    border-radius: 5px;
    border: 1px solid grey;
    width: 80%;
    float: none;
    margin: 0 auto;
    padding: 5px
}

.NewsletterSignUp h5 {
    font-size: 1.6em;
    font-weight: 600;
    margin-top: 15px;
    color: #9faebe;
    text-transform: uppercase
}

footer input {
    flex-grow: 2;
    border: 0
}

footer i:hover {
    color: #FFF
}

footer li {
    list-style: none;
    margin-bottom: 10px;
    color: #9faebe !important
}

footer a {
    color: #9faebe !important
}

    footer a:hover {
        color: #FFF !important
    }

footer ul {
    margin: 0;
    padding: 0
}

.Homepage .hero-desc {
    width: 50% !important
}

.transition-timer-carousel-progress-bar {
    height: 5px;
    background-color: #007A99;
    width: 0;
    margin: 0;
    border: 0;
    z-index: 1111;
    position: relative
}

.carousel-fade {
    opacity: 1
}

    .carousel-fade .carousel-item {
        -moz-transition: opacity ease-in-out .7s;
        -o-transition: opacity ease-in-out .7s;
        -webkit-transition: opacity ease-in-out .7s;
        transition: opacity ease-in-out .7s;
        left: 0 !important;
        opacity: 0;
        top: 0;
        position: absolute;
        width: 100%;
        display: block !important;
        z-index: 1
    }

        .carousel-fade .carousel-item:first-child {
            top: auto;
            position: relative
        }

        .carousel-fade .carousel-item.active {
            opacity: 1;
            -moz-transition: opacity ease-in-out .7s;
            -o-transition: opacity ease-in-out .7s;
            -webkit-transition: opacity ease-in-out .7s;
            transition: opacity ease-in-out .7s;
            z-index: 2
        }

.carousel-control-next, .carousel-control-prev {
    z-index: 10
}

.video-container {
    position: relative;
    background-size: cover;
    width: 100%;
    height: 100vh
}

.Slide1 {
    background-image: url(/content/images/slider1bg.jpg);
    height: 100vh;
    background-size: cover;
    background-position: bottom
}

.Slide3 {
    background-image: url(/content/images/woolverstoneparkhero.jpg);
    height: 100vh;
    background-size: cover;
    background-position: bottom
}

.Slide4 {
    background-image: url(/content/images/storagehero_1.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center
}

.Slide5 {
    background-image: url(/content/images/boatyardslide.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center
}

.Homepage footer {
    margin-top: -60px
}

footer {
    clip-path: polygon(0 10px,10% 0,81% 30px,100% 5px,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 10px,10% 0,81% 30px,100% 5px,100% 100%,0 100%);
    clear: both;
    width: 100%;
    background-color: #041D40
}

    footer .btn {
        background-color: transparent;
        color: #FFF
    }

        footer .btn:hover {
            background-color: #FFF
        }

.FooterTop {
    padding: 120px 0 50px
}

.Border {
    border-right: 1px solid rgba(255,255,255,0.15)
}

.FooterCopyright {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 20px 0;
    text-align: center;
    color: #9faebe;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8em
}

.Newsletter {
    border-radius: 5px;
    border: 0;
    padding: 10px;
    width: 300px
}

.Newsletterbtn {
    border: 0;
    padding: 10px;
    width: 130px
}

.Newsletterbtn {
    border: 1px solid #007A99;
    background: #007A99;
    color: #fff;
    border-radius: 5px
}

.NewsletterTitle {
    font-size: 1.6em;
    font-weight: 400;
    margin-top: 15px;
    color: #9faebe;
    text-transform: uppercase
}

nav .nav-link::after {
    content: '';
    display: block;
    width: 0;
    top: calc(100% + .5rem);
    height: 2px;
    background: white;
    -webkit-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out
}

nav .nav-link:hover::after {
    width: 100%
}

.active.nav-link::after {
    width: auto;
    top: calc(100% + .5rem);
    height: 2px;
    background: #FFF;
    -webkit-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out
}

header .nav-link:hover {
    color: #FFF
}

#sitemap ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: black
}

    #sitemap ul li ul {
        margin: 0 0 15px 15px;
        padding: 0;
        color: black;
        list-style-type: none
    }

    #sitemap ul li a {
        font-size: 1.953em;
        color: black !important
    }

    #sitemap ul li ul li a {
        font-size: 1.563em;
        color: black
    }

    #sitemap ul li ul li ul li a {
        font-size: 1em;
        color: black
    }

@media(max-width:768px) {
    .dropdown-content {
        min-width: 100% !important;
        background-color: #00647d;
    }
}

@media(min-width:768px) {
    .container-small {
        width: 700px
    }
}

@media(min-width:992px) {
    .container-small {
        width: 750px
    }
}

@media(min-width:1200px) {
    .container-small {
        width: 950px
    }
}

.container-small {
    max-width: 100%
}

.container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem
}

.SearchButton {
    padding: 0 !important
}

    .SearchButton i {
        padding: 9px !important
    }

@media screen and (min-width:601px) and (max-width:769px) {
    .navbar {
        padding: 1px 5px !important
    }

    .searchhidden {
        height: auto
    }

    #cookiePopup {
        width: 23%
    }

    .navbar-nav {
        display: inherit
    }

    .NavBarBottom {
        margin-top: 15px !important;
        width: 100% !important
    }

    .navbar-collapse {
        top: 40px !important
    }

    nav .nav-link::after {
        display: none
    }

    .dropdown-menu-arrow {
        left: 30px
    }

    .logo {
        width: 160px !important
    }

    .HiddenItem {
        display: none !important
    }

    .navbar-collapse {
        width: 50% !important
    }

    .MyMdl {
        width: 48.7% !important;
        float: right;
        padding: 15px 0;
        margin: 10px 0
    }

    .ContactButton {
        width: 48.7% !important;
        float: left;
        padding: 15px 0;
        margin: 10px 0
    }

    .GetQuote {
        width: 100% !important;
        padding: 15px 0
    }

    .navbar-brand {
        padding: 5px 5px 0 10px
    }

    .shrink .NavBarTop {
        display: block
    }

    .SearchButton {
        display: none
    }

    .FWrap.searchhidden {
        width: 97%;
        opacity: 1
    }

    .sbtn {
        display: block;
        opacity: 1;
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: 0 5px 5px 0
    }

    .shrink {
        padding: 0 10px !important
    }

    .navbar {
        padding: 0 !important;
        background-color: #007A99 !important;
        z-index: 111111111 !important
    }

    .RightLine {
        border: 0
    }

    .Homepage .hero-desc {
        width: 80% !important
    }

    .mobborder {
        border-right: 0;
        padding: 11px 0
    }

    footer {
        clip-path: inherit !important
    }

    .Border {
        border-right: 0
    }

    .MainCarousel {
        height: 60vh !important
    }

    .pageshero {
        height: 400px;
        background-size: cover;
        background-attachment: inherit !important
    }

    .HomeAbout {
        min-height: 70vh !important
    }

    .hero-desc {
        top: 30% !important
    }

    .dropdown-menu {
        background-color: #00a8bd;
        margin-top: 15px;
        box-shadow: none !important;
        border: 0;
        border-radius: 0
    }

    .shrink .navbar-nav .nav-link {
        margin-top: 0 !important
    }

    .navbar {
        height: 50px !important
    }

    .shrink .NavBarBottom {
        border-top: 1px solid rgba(255,255,255,0.25) !important
    }

    .dropdown-menu a {
        color: #FFF
    }
}

@media screen and (max-width:600px) {
    .AngleGrey {
        margin-top: 0;
        clip-path: inherit;
        position: inherit;
        padding-top: 50px
    }

    .OtiumWrap table {
        background-color: #FFF
    }

    .OtiumWrap tr {
        font-size: .85em
    }

    .OtiumWrap table {
        margin-left: -20px
    }

    .LoginBox {
        margin-top: 0;
        padding: 25px
    }

    .EventsInner .pageshero {
        height: 130px !important
    }

    .buttonwrap a {
        width: 100%
    }

    .MobBtn {
        width: 100%
    }

    .EventCountdown {
        margin-top: 15px
    }

    .errorpage {
        padding: 20px !important
    }

        .errorpage h1 {
            font-size: 7em !important
        }

    #News h3 {
        font-size: 1.1em !important
    }

    .GreyAngleSection {
        margin-top: 0;
        clip-path: inherit;
        position: inherit;
        padding-top: 50px
    }

    #about_big1 {
        display: none !important
    }

    .NewsWrapper .newsbox {
        margin-bottom: 10px !important
    }

    .shrink .navbar-nav .nav-link {
        margin-top: 0 !important
    }

    .NavBarBottom {
        border-top: 1px solid rgba(255,255,255,0.25) !important
    }

    .shrink .logo {
        width: 180px !important
    }

    .NavBarBottom .nav-item {
        padding: 5px 5px !important
    }

    .NewsWrapper h3 {
        font-size: 1em !important
    }

    .NewsWrapper .rld {
        display: none !important
    }

    .ListingImage img {
        margin: 0
    }

    .outeritem {
        padding: 0
    }

    .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
        padding: 0 !important;
    }

    .StackBenefits {
        padding-left: 0;
        margin-left: 0
    }

    .pageshero .hero-desc {
        top: 60% !important
    }

    .MainSliderControls {
        width: 15%
    }

    .dropdown-menu-arrow {
        left: 30px
    }

    .ServiceDirectoryListing h2 {
        font-size: 1.5em;
        margin-bottom: 15px
    }

    .serb {
        width: 100%;
        border-radius: 0 !important
    }

    .SearchInput {
        border-radius: 0 !important
    }

    .mobborder {
        border: .2px solid rgba(0,0,0,.1) !important;
        padding: 13px 0
    }

    .ContactSection {
        margin-top: 0;
        padding-top: 50px;
        position: inherit
    }

    .LocalContactBox {
        height: 150px !important
    }

    .dropdown-menu {
        background-color: #007A99;
        margin-top: 0;
        box-shadow: none !important;
        border: 0;
        border-radius: 0
    }

        .dropdown-menu a {
            color: #FFF
        }

    nav .nav-link {
        text-shadow: none
    }

    .dropdown-menu-arrow {
        display: none
    }

    .Tabs .nav-item {
        border-right: 0
    }

    .DryStackFAQ {
        padding: 15px
    }

    .NavBarTop {
        display: block
    }

    .NavBarBottom {
        width: 100% !important
    }

    .Date {
        display: none
    }

    .StoryImage img {
        min-height: auto
    }

    .StoryImage {
        min-height: auto
    }

    .SocialArticle a {
        float: left
    }

    .MarinasPage #date {
        width: 73%
    }

    .MarinaStory .rthmb {
        min-height: auto
    }

    .MarinaStory h3 {
        font-size: 1em
    }

    .HiddenItem {
        display: none !important
    }

    .MarinaHero {
        height: 170px;
        margin-top: 70px
    }

    .ViewBrochure {
        width: 100%;
        margin-top: 15px
    }

    .MarinaHero .hero-desc {
        top: 70% !important
    }

    .MarinaHero h1 {
        font-size: 2.3em !important
    }

    .RightLine {
        border: 0
    }

    .hero-desc .toptext {
        font-size: 1.8em
    }

    .SliderButton {
        padding: 10px 25px
    }

    .pageshero .hero-desc {
        width: 90% !important;
        top: 32%
    }

    .Homepage .hero-desc {
        width: 95% !important;
        top: 30% !important
    }

    .hero-desc .bottomtext {
        font-size: 1.5em
    }

    .MyMdl {
        width: 48.7% !important;
        float: right;
        padding: 15px 0;
        margin: 10px 0
    }

    .ContactButton {
        width: 48.7% !important;
        float: left;
        padding: 15px 0;
        margin: 10px 0
    }

    .GetQuote {
        width: 100% !important;
        padding: 15px 0
    }

    .navbar-brand {
        padding: 5px 5px 0 10px
    }

    .shrink .NavBarTop {
        display: block
    }

    .SearchButton {
        display: none
    }

    .FWrap.searchhidden {
        width: 97%;
        opacity: 1
    }

    .sbtn {
        display: block;
        opacity: 1;
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: 0 5px 5px 0;
        padding: 3px 15px !important
    }

    .shrink {
        padding: 0 10px !important
    }

    .navbar {
        padding: 0 !important;
        background-color: #007A99 !important;
        z-index: 111111111 !important
    }

    .pageshero {
        height: 40vh !important;
        background-attachment: inherit !important
    }

    .MainCarousel {
        height: 60vh !important;
        clip-path: none
    }

    #about_big {
        display: none
    }

    .FreedomLogo {
        width: 75px
    }

    .phonenumber {
        font-weight: 200 !important
    }

    #cookiePopup {
        width: 100%;
        right: 0;
        bottom: 0;
        font-size: .75em;
        text-align: center
    }

    .logo {
        width: 180px !important;
        margin-bottom: 5px;
        margin-left: 4px
    }

    .NavBarBottom {
        display: block;
        margin-top: 50px !important;
        max-height: 500px;
        overflow-y: auto;
        height: 100%
    }

        .NavBarBottom .after {
            background-color: #00a8bd
        }

    .nav-item .active {
        margin-top: 0 !important;
        padding-left: 5px !important
    }

    .DropdownActive {
        background-color: #00a8bd;
        padding-left: 5px !important
    }

        .DropdownActive a::after {
            display: none
        }

    footer {
        clip-path: inherit;
        padding-bottom: 75px
    }

    .FooterTop {
        padding: 70px 0 0 0
    }

    footer form {
        width: 100%
    }

    footer .Border {
        border: 0
    }

    .Newsletterbtn {
        width: 80%;
        min-width: 110px
    }

    .socialsection {
        border-top: 1px solid rgba(255,255,255,0.15);
        margin: 30px 0 0 0
    }

    .FDivider {
        margin: 30px 0
    }

    .NewsletterSignUp h5 {
        font-size: 1.1em
    }

    .pageshero h1 {
        font-size: 2.2em !important
    }
}

@media screen and (max-width:991px) {
    .ContactSection {
        clip-path: none
    }

    .logo {
        width: 190px
    }

    .navbar {
        padding: 0 5px 10px 5px
    }

    .navbar-collapse.collapsing {
        right: -75%;
        transition: height 0s ease
    }

    .navbar-collapse.show {
        right: 0;
        transition: right 500ms ease-in-out;
        z-index:1000;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: right 500ms ease-in-out
    }

    .navbar-collapse {
        position: fixed;
        top: 50px;
        right: 0;
        padding: 15px;
        width: 90%;
        background-color: #007A99 !important;
        height: 100vh
    }

    .navbar-toggler span {
        display: block;
        background-color: #FFF;
        height: 4px;
        width: 27px;
        margin-top: 6px;
        margin-bottom: 6px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        position: relative;
        left: 0;
        opacity: 1
    }

        .navbar-toggler span:nth-child(1), .navbar-toggler span:nth-child(3) {
            -webkit-transition: transform .35s ease-in-out;
            -moz-transition: transform .35s ease-in-out;
            -o-transition: transform .35s ease-in-out;
            transition: transform .35s ease-in-out
        }

    .navbar-toggler:not(.collapsed) span:nth-child(1) {
        position: absolute;
        left: 12px;
        top: 10px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
        opacity: .9
    }

    .navbar-toggler:not(.collapsed) span:nth-child(2) {
        height: 12px;
        visibility: hidden;
        background-color: transparent
    }

    .navbar-toggler:not(.collapsed) span:nth-child(3) {
        position: absolute;
        left: 12px;
        top: 10px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
        opacity: .9
    }

    .NavBarBottom {
        display: block
    }

        .NavBarBottom .nav-item {
            border-bottom: 1px solid rgba(255,255,255,0.5);
            font-size: 1.1em;
            padding: 5px 5px
        }

    .navbar-toggler:focus, .navbar-toggler:active {
        outline: 0
    }

    button.navbar-toggler.navbar-toggler-right {
        position: relative
    }
}

@media screen and (min-width:1700px) {
    .container {
        max-width: 1400px
    }
}

.navbar {
    padding: 0 !important;
    background-color: #007A99 !important;
    z-index: 111111111 !important
}



/*Communication channel item */
.prefs_channel .item {
    border: 1px dashed #333333;
    padding: 25px;
    margin: 5px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    max-width:390px;
}

    .prefs_channel .item:hover {
        border: 1px dashed #00342B;
        background-color: rgba(0, 0, 0, .25);
    }



.image_email {
    content: url('/content/images/opened-email-envelope.png');
    float: left;
}

.image_sms {
    content: url('/content/images/speech-bubble.png');
    float: left;
}

.image_mail {
    content: url('/content/images/mail_direct.png');
    float: left;
}

.image_phone {
    content: url('/content/images/phone-call.png');
    float: left;
}

.image_PushNotification {
    content: url('/content/images/PushNotification.png');
    float: left;
}

.image_WebPushNotification {
    content: url('/content/images/WebPushNotification.png');
    float: left;
}

.image_WhatsApp {
    content: url('/content/images/WhatsApp.png');
    float: left;
}



.k-radio:checked + .k-radio-label:after {
    content: "";
    width: 14px !important;
    height: 14px !important;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    [type="radio"]:checked + label,
    [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
        margin: 0 15px;
    }

        [type="radio"]:checked + label:before,
        [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #5d5a5a;
            border-radius: 100%;
            background: #fff;
        }

.k-radio:checked + .k-radio-label:before,
.k-checkbox:checked + .k-checkbox-label:after,
.k-checkbox-label:after {
    border-color: #5d5a5a !important;
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #007A99;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.title_email, #OptIn_Email, .title_sms, #OptIn_Mobile, .title_mail, #OptIn_Mail, .title_phone, #OptIn_Phone {
    text-align: center;
}


.main {
    border: solid 1px #eee;
    box-shadow: none;
    margin-top: 25px;
    margin: 5px;
    padding: 5px 0;
    max-width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.125);
    background-color:#FFFFFF;
    border-radius:5px;
}

* {
    box-sizing: border-box;
}

.input-container {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    border: 2px solid #000;
    border-radius: 5px;
    background-color: #f2f2f2;
}
    .input-container:hover, .input-container:focus{
        border: 2px solid dodgerblue !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* Style the form icons */
.icon {
    background-color: transparent;
    color: black;
    min-width: 50px;
    text-align: center;
}

/* Style the input fields */
.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    border: none;
    background-color: #f2f2f2;
}

.validation {
    /*background-color: #C33;*/
    /*color: #FFF;*/
    list-style-type: none;
    margin: 0;
    padding: 10px;
    font-size: 1em;
    margin-bottom: 10px;
    width: 100%;
}

#Validator_Credentials:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f071";
    float: left;
    display: inline-block;
    margin: 0 10px 0 5px;
}

.btn-outline-select {
    color: #007A99 !important;
    border-color: #007A99;
}