/*Whole Site overrides*/

body, html {
    height: 100%;
    /*overflow: hidden;*/
    background-color: #051c2c;
}

a {
    text-decoration: none;
}

body, h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
}

.wwp-darkBlue,.wwp-darkBlue:hover {
    color: #051c2c;
}

.wwp-lightBlue,.wwp-lightBlue:hover {
    color: #44a9cb;
}

.wwp-darkBlue-background,.wwp-hover-darkBlue-background:hover {
    background-color: #051c2c!important;
}

.wwp-lightBlue-background,.wwp-hover-lightBlue-background:hover {
    background-color: #44a9cb!important;
}

.wwp-lightGrey {
    color: #e5e7eb;
}

.wwp-lightBlue-border {
    border-color: #44a9cb!important;
}

.wwp-lightGrey-border {
    border-color: #e5e7eb!important;
}

.wwp-hover-hand:hover {
    cursor: pointer;
}

h1{
    color: #44a9cb;
    font-size: 48px;
    font-weight: 600;
    padding-top: 32px;
}

h2{
    font-size: 24px;
    padding-top: 32px;
}

h3{
    color: #051c2c;
    font-size: 18px;
}

h5{
    color: #051c2c;
    font-weight: bold;
    font-size: 14px;
}

p{
    padding-bottom: 24px;
    font-size: 14px;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.centre-button {
    display: block;
    margin: 0 auto;
}

.square-image {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.team-image {
    width: 100%;
    object-fit: contain;
}

.team-modal-image {
    width: 100%;
    padding-top: 16px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.team-name {
    color: #051c2c;
    font-size: 18px;
    font-weight: bolder;
}

.team-role {
    color: #44a9cb;
    font-size: 16px;
}

.mySlides1,.mySlides2,.mySlides3,.mySlides4,.mySlides5,.mySlides6,.mySlides7,.mySlides8,.mySlides9,.mySlides10,.mySlides11,.mySlides12,.mySlides13,.mySlides14,.mySlides15,.mySlides16 {
    width: 100%;
    height: 460px;
    object-fit: contain;
    display:none
}

.slideshowControls {
    padding: 0;
    margin: 0;
}

.slideshowControlsLeft {
    text-align: left;
    padding-left: 20px;
}

.slideshowControlsRight {
    text-align: right;
    padding-right: 20px;
}

.slideshowControlsCenter {
    text-align: center;
}

.dots1:hover {
    color: #051c2c;
}

.mapImage {
    width: 100%;
    object-fit: fill;
    /*display:none*/
}

.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

@media (prefers-reduced-motion: no-preference) {

    /* Initial state: hidden and shifted down */
    p,h1,h2,h3,.w3-xxlarge,.wwp-div-vis,.wwp-img-vis {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* Visible state: fully opaque and in position */
    p.visible,h1.visible,h2.visible,h3.visible,.w3-xxlarge.visible,.wwp-div-vis.visible,.wwp-img-vis.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /*Home Page Animation Classes*/

    .zoom {
        animation: scale 5000ms alternate infinite;
    }

    @keyframes scale {
        100% {
            transform: scale(1.2);
        }
    }
}

/*Home Page Classes*/

.hideOverflow{
    overflow: hidden;
}

.bgimg,.bgimg2,.bgimg3 {
    filter: brightness(0.6) contrast(80%) hue-rotate(345deg);
}

.bgimg {
    background-image: url('../images/home/LeithWalk1500.jpg');
    min-height: 100%;
    background-position: center;
    background-size: cover;
}

.bgimg2 {
    background-image: url('../images/home/Verity1500.jpg');
    min-height: 100%;
    background-position: center;
    background-size: cover;
}

.bgimg3 {
    background-image: url('../images/home/Whighams1500.jpg');
    min-height: 100%;
    background-position: center;
    background-size: cover;
}

.homepagelogo {
    margin-top: 32px;
    width:100%;
    height:80%;
    object-fit:contain;
}

/*Code for Hamburger Nav*/

header {
    display: flex;
    width: 100%;
}

header > * {
    /*   flex-grow: 1; */
}

header a {
    text-decoration: none;
}

/* "Hide" checkbox -- moves it off screen*/
#menu-btn {
    position: absolute;
    top: -100%;
    left: -100%;
}

/* Hide hamburger for bigger screens */
.menu-icon {
    visibility: hidden;
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 600px) {

    header {
        display: grid;
        grid-template-areas:
       "title   title   hamburger"
       "nav     nav     nav";
    }

    .menu a {
        text-decoration: none;
        /*color: white;*/
    }

    .menu-btn {
        display: none;
    }

    .menu-icon {
        grid-area: hamburger;
        cursor: pointer;
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        padding: 30px 20px 30px 0;
        position: relative;
        user-select: none;
        visibility: visible;
    }

    .navicon {
        background: white;
        display: block;
        height: 2px;
        width: 18px;
        position: relative;
    }

    .navicon:before {
        top: 5px;
    }

    .navicon:after {
        top: -5px;
    }

    .navicon:before, .navicon:after {
        background: white;
        display: block;
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        transition: all .2s ease-out;
    }

    .menu {
        grid-area: nav;
        max-width: unset;
        max-height: 0;
        transition: max-height .2s ease-out;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .menu a {
        padding: 20px 20px;
        /*border-right: 1px solid #f4f4f4;*/
        /*background-color: #eee;*/
        width: 100%;
        text-align: center;
    }

    .menu-btn:checked ~ .menu {
        max-height: 240px;
    }

    .menu-btn:checked ~ .menu-icon .navicon {
        background: transparent;
    }

    .menu-btn:checked ~ .menu-icon .navicon:before {
        transform: rotate(-45deg);
    }

    .menu-btn:checked ~ .menu-icon .navicon:after {
        transform: rotate(45deg);
    }

    .menu-btn:checked ~ .menu-icon .navicon:before,
    .menu-btn:checked ~ .menu-icon .navicon:after {
        top: 0;
    }
}