/*
Theme Name: Andrew Simpson Yachting
Author: Richard Willis-Owen
Author URI: https://www.willisowen.net
Description: Andrew Simpson Yachting
Version: 1.1.2
*/

body {
    font-family: "effra", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2 {
    font-size: 50px;
    color: #081D39;
    font-weight: 300;
    letter-spacing: 2px;
}
h4, h6, .pretitle {
    color: #289BD6;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
}
.about-contact {
    font-size: 20px;
    font-weight: 300;
}
.about-contact span {
    font-size: 14px;
    color: #289BD6;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
}
a {
    text-decoration: none;
    color: unset;
}
a:hover {
    color: unset;
}
nav.navbar {
    background-color: #081D39;
    color: #FFF;
}
.asf-navbar-link {
    color: #FFF;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}
.asf-navbar-link:hover {
    color: #fff;
}
.navbar-brand {
    color: #FFF;
    font-size: 26px;
    font-weight: 300;
}
a.navbar-brand:hover {
    color: #fff;
}
.icon {
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: -4px;
    display: inline-block;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 56px;
    width: 56px;
}
.carousel-control-next-icon {
    background-image: url(/wp-content/themes/andrewsimpsonyachting/img/arrow-right-white.png);
}
.carousel-control-prev-icon {
    background-image: url(/wp-content/themes/andrewsimpsonyachting/img/arrow-left-white.png);
}
.carousel-item {
    transition: transform 1.2s ease-in-out;
}
#general-carousel .carousel-item {
    transition: transform 0.8s ease-in-out;
}
.btn-primary {
    --bs-btn-bg: #289BD6;
    --bs-btn-border-color: #289BD6;
    --bs-btn-hover-border-color: #289BD6;
    --bs-btn-hover-bg: #289BD6;
    --bs-btn-hover-color: rgb(8,29, 57);
    border-radius: 20px;
}
.btn-secondary {
    border-radius: 20px;
}

main, #footer-wave, #main {
    background-color: #eef7fc;
    color: #081D39;
}
#explore-further {
    background-color: #fff;
}
#hp-carousel .carousel-item {
    height: 1000px;
}
#banner-image {
    height: 550px;
    color: #fff;
    text-align: center;
    background-repeat: no-repeat;
    position: relative;
}
#banner-image h1, #hp-carousel .title {
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 2px;
}
#banner-image .subtitle, #hp-carousel .subtitle {
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 300;
}
#banner-image .pretitle, #hp-carousel .pretitle {
    font-size: 17px;
    letter-spacing: 4px;
    margin-bottom: 20px;
}
#banner-image-overlay {
    height: 100%;
    background-color: rgba(8, 29, 57, 0.65);
}
#header-wave {
    background-image: url(/wp-content/themes/andrewsimpsonyachting/img/ASY-Header-Wave.png);
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 165px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: bottom;
    width: 100%;
}
#footer-together {
    background-color:#081D39;
    color: #fff;
    padding-bottom: 160px;
}


.subcategory-title {
    font-size: 50px;
    font-weight: 300;
}
.course-field {
    margin-bottom: 25px;
}
.course-field span {
    font-size: 33px;
    font-weight: 300;
}

.carousel-title {
    font-size: 28px;
    font-weight: 300;
    color: #081d39;
}
.together-heading {
    font-size: 50px;
    font-weight: 300;
}
#strapline-wave {
    height: 28px;
    line-height: 1px; /* font size makes this div want to be taller */
    padding-left: 278px;
    margin-top: -14px;
    margin-bottom: -14px;
}
body.home h1 strong {
    font-style: italic;
    font-weight: 700;
}
.browse-or-find {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
}
.browse-or-find img {
    vertical-align: bottom;
    margin-left: 6px;
}
#opportunities-column {
    padding-right: 90px;
    font-weight: 300;
}
#supporting-column {
    padding-right: 59px;
    font-weight: 300;
}
footer h6 {
    letter-spacing: 3px;
}
#course-outcomes, #course-dates {
    color: #081D39;
    font-size: 15px;
    margin-top: 40px;
}
.category-courses h5 {
    font-size: 23px;
    font-weight: 300;
    margin-top: 30px;
    margin-bottom: 18px;
}
#footer-tel {
    font-size: 40px;
    font-weight: 300
}
#banner-image .pretitle {
    padding-top: 175px;
}
/* https://codepen.io/webmandesign/post/gutenberg-full-width-alignment-in-wordpress-themes */
.alignfull {
    width: 100vw;
    /* margin-left: 50%; */
    margin-left: 49.4%;
    transform: translateX(-50%); /* -> Causes rendering bug! */
}
.has-background.white {
    background-color: #fff;
}
body.home #footer-wave {
    background-color: #fff;
}
/* Button */
.wp-block-button__link {
    color: #fff;
    background-color: #289BD6;
    border-radius: 25px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    /* remove styles changed in WP 6.8 */
    height: unset;
    width: unset;
}
.wp-block-button__link.download {
    background-color: #081D39;
    font-size: 11px;
}
.explore-all {
    font-size: 10px;
    padding-left:25px;
    padding-right: 25px;
    letter-spacing: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Ninja Forms */
input[type="button"].ninja-forms-field.nf-element {
    color: #fff;
    background-color: #289BD6;
    border-radius: 25px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
}
.nf-field .nf-field-element p {
    text-align: left;
    margin-bottom: 0;
    margin-top: 20px;
}
main .nf-form-content input:not([type=button]), main .nf-form-content textarea {
    border: none;
    border-radius: 25px;
    background-color: #fff;
    color: #081D39;
}
main .nf-form-content .listmultiselect-wrap select, main .nf-form-content .list-select-wrap>div select {
    color: #081D39;
    border-radius: 25px;
}
main .nf-form-content .list-select-wrap .nf-field-element>div {
    border-radius: 25px;
    border: none;
    background-color: #fff;
}
main .nf-form-content .listmultiselect-wrap select {
    overflow: hidden;
    border: none;
}
main .nf-form-content select.ninja-forms-field:focus {
    background-color: #fff;
}
main .nf-form-content .nf-field-element ul {
    text-align: left;
}
main .nf-form-content input:not([type=button]):focus, main .nf-form-content textarea:focus {
    color: #081D39;
}
main .nf-form-content input::placeholder {
    color: #081D39;
    font-weight: 300;
    font-size: 15px;
}
hr.ninja-forms-field {
    background: url(/wp-content/themes/andrewsimpsonyachting/img/ASY-Strapline-Wave.png) no-repeat top center;
    height:42px;
	border:none !important;
}
/* Homepage Carousel */
#hp-carousel .carousel-caption {
    top: 40%;
    transform: translateY(-50%);
    bottom: initial;
}
#hp-carousel .carousel-control-prev, #hp-carousel .carousel-control-next {
    position: absolute;
    top: 65%;
    transform: translateY(-50%);
    bottom: initial;
    width: 56px;
    left: 40%;
}
#hp-carousel .carousel-control-next {
    left: initial;
    right: 40%;
}

/* Second home page carousel */


#general-carousel .carousel-inner .carousel-item.active,
#general-carousel .carousel-inner .carousel-item-next,
#general-carousel .carousel-inner .carousel-item-prev,
#course-carousel .carousel-inner .carousel-item.active,
#course-carousel .carousel-inner .carousel-item-next,
#course-carousel .carousel-inner .carousel-item-prev {
    display: flex;
}
body.home #general-carousel .carousel-control-prev {
    /* left: -10%; */
    left: 2%;
    width: 56px;
}
body.home #general-carousel .carousel-control-next {
    /* right: -10%; */
    right: 2%;
    width: 56px;
}
body.home #general-carousel .carousel-control-next-icon {
    background-image: url(/wp-content/themes/andrewsimpsonyachting/img/arrow-right-gray.png);
    margin-top: -84px;
}
body.home #general-carousel .carousel-control-prev-icon {
    background-image: url(/wp-content/themes/andrewsimpsonyachting/img/arrow-left-gray.png);
    margin-top: -84px;
}
.course-carousel.carousel-control-next-icon {
    background-image: url(/wp-content/themes/andrewsimpsonyachting/img/arrow-right-gray.png);
}
.course-carousel.carousel-control-prev-icon {
    background-image: url(/wp-content/themes/andrewsimpsonyachting/img/arrow-left-gray.png);
}

/* medium and up screens */
@media (min-width: 768px) {

    #general-carousel .carousel-inner .carousel-item-end.active,
    #general-carousel .carousel-inner .carousel-item-next {
        transform: translateX(33%);
    }

    #general-carousel .carousel-inner .carousel-item-start.active,
    #general-carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-33%);
    }
    #course-carousel .carousel-inner .carousel-item-end.active,
    #course-carousel .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }

    #course-carousel .carousel-inner .carousel-item-start.active,
    #course-carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}

#general-carousel .carousel-inner .carousel-item-end,
#general-carousel .carousel-inner .carousel-item-start,
#course-carousel .carousel-inner .carousel-item-end,
#course-carousel .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

/* Find Your Adventure menu */
#menu-find-your-adventure-container {
    background-color: #081D39;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    padding: 50px 38px;
    width: 348px;
    position: absolute;
    right: 0;
    z-index: 1;
    display: none;
    border-radius: unset;
}
#menu-find-your-adventure-container li:not(:last-child) {
    padding-bottom: 30px;
}
#menu-find-your-adventure-container ul.list-unstyled li::before {
    content: unset;
}
#menu-find-your-adventure-container ul li {
    margin: initial;
    text-indent: unset;
}
#menu-find-your-adventure-container ul {
    padding: initial;
    margin-bottom: 0;
}

/* List */
/* Requires class list-unstyled in the block editor */
main ul.list-unstyled {
    padding-left: 24px;
}
main ul.list-unstyled li::before {
    /* content: "→"; */
    content: "\2192";
    display: inline-block;
    padding-right: 4px;
}
main ul li {
    margin-top: 5px;
    margin-bottom: 5px;
    text-indent: -13px;
}
ul.wp-block-list li {
    text-indent: -5px;
}
body.privacy-policy main ul li {
    text-indent: unset;
}

/* megamenu */
.dropdown-menu.megamenu {
    border-radius: unset;
    padding-bottom: 0;
}
.megamenu {
    background-color: #142843;
}
.megamenu a {
    color: #fff;
}
.footer-links a {
    color: #081D39;
}

/* Navigation Menu */
.navbar-collapse {
    flex-grow: unset;
}
.dropdown-menu {
    border: none;
    padding-left: 8px;
}

.navbar-toggler {
    color: #fff;
}
#navbar-toggler-text {
    text-transform: uppercase;
    font-size: 14px;
}
.navbar-toggler-icon {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

/* --------------    RESPONSIVE     ----------------- */





/* below tablet */
@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 10px;
        line-height: 12px;
        white-space: unset;
    }
    #navbar-brand-name {
        width: 60px;
    }
    .navbar-nav .dropdown-menu {
        display: block;
        text-align: center;
    }
    /* hide 2nd and 3rd levels */
    #mega-menu-container ul ul, #mega-menu-container ul ul ul {
        display: none;
    }
    /* add a down caret to each top level item */
    #mega-menu-container .chevron, #mega-menu-container .chevron-up {
        display: inline-block;
        margin-left: 6px;
        height: 20px;
        width: 24px;
        font-size: 20px;
    }
    #mega-menu-container .chevron::before {
        /* ⌄ */
        content: "\2303";
        display: inline-block;
        transform: rotate(180deg);
    }
    #mega-menu-container .chevron.open::before {
        /* ⌃ */
        content: "\2303";
        transform: none;
    }
    .megamenu li a {
        font-weight: 300;
    }
    ul#menu-mega-menu > li > a {
        font-size: 13px;
        color: #289BD6;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 2px;
        padding-top: 9px;
        padding-bottom: 9px;
        display: block;
    }
    .sub-menu li a {
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #strapline-wave {
        padding-left: 0;
    }
    .navbar-brand {
        margin-right: 2px;
    }
    .navbar-toggler {
        padding-left: 0;
    }
    #hp-carousel .carousel-caption {
        top: 35%;
    }
    #hp-carousel .carousel-control-prev, #hp-carousel .carousel-control-next {
        top: 70%;
    }
    #hp-carousel .carousel-control-prev {
        left: 30%;
    }
    #hp-carousel .carousel-control-next {
        right: 30%;
    }
    #hp-carousel .pretitle, #banner-image .pretitle {
        font-size: 14px;
    }
    #hp-carousel .title, #banner-image h1 {
        font-size: 28px;
    }
    #hp-carousel .subtitle, #banner-image .subtitle {
        font-size: 20px;
    }
    #hp-carousel .carousel-item {
        height: 650px;
    }
    #footer-together {
        padding-bottom: 50px;
    }
    #footer-tel {
        font-size: 24px; 
    }
    #banner-image .pretitle {
        padding-top: 75px;
    }
    #opportunities-column {
        padding-left: 20px;
        padding-right: 20px;
    }
    #supporting-column {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* tablet and above */
@media (min-width: 992px) {
    #mega-menu-container {
        /* this uses a linear equation to scale x padding between 40px and a maximum of 300px starting a 1920px */
        padding: 65px min( calc(40px + 0.28 * (100vw - 992px)), 300px);
    }
    .megamenu .col-lg-3 > div:not(:last-child) {
        margin-bottom: 65px;
    }
    .megamenu .col-lg-3 > div > a {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-decoration: underline;
        color: #71BAE0;
        margin-bottom: 15px;
        display: block;
    }
    .megamenu .col-lg-3 > div > ul > li > a {
        font-size: 15px;
        font-weight: 700;
        display: inline-block;
        margin-top: 15px;
        margin-bottom: 12px;
    }
    .megamenu .col-lg-3 > div > ul > li > ul > li {
        font-size: 15px;
        font-weight: 300;
        margin-bottom: 10px;
    }
}
/* tablet to desktop */
@media (min-width: 768px) and (max-width: 991.98px) {
    #hp-carousel .pretitle {
        font-size: 14px;
    }
    #hp-carousel .title, #hp-carousel .subtitle {
        font-size: 30px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #hp-carousel .pretitle {
        font-size: 15px;
    }
    #hp-carousel .title, #hp-carousel .subtitle {
        font-size: 40px;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #hp-carousel .title, #hp-carousel .subtitle {
        font-size: 44px;
    }
}
@media (min-width: 1200px) {
    .megamenu .col-lg-3 > div > a {
        text-underline-offset: 10px;
    }
}
/* Retina */
@media (min-width: 1921px) {
    #header-wave {
        background-repeat: no-repeat;
        background-size: cover;
        height: 220px;
    }
    #banner-image {
        background-repeat: no-repeat;
        background-size: cover;
    }
    #hp-carousel .carousel-item {
        width: 100%;
    }
    #footer-wave img {
        width: 100%;
    }
}
/* megamenu */
/* ============ desktop view ============ */
@media all and (min-width: 992px) {

    .navbar .has-megamenu{position:static!important;}
    .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }

}	
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
        max-height: 90vh;
        margin-top:10px;
    }
}
/* ============ mobile view .end// ============ */