/*
	###################################
	GENERAL
	###################################
*/


/* 	*, ::after, ::before {
	  box-sizing: border-box;
	  outline: 1px solid limegreen !important;
	} */


/* html {
    overflow-x: hidden;
} */

:root {
    --primary:   #1c257c;
    --secondary: #b80195;
    /* --primary:   #2A3173; */
    /* --secondary: #9D1D64; */
    --tertiary:  #6E2F79;

    --primary--transparent:   #2A317300;
    --secondary--transparent: #9D1D6400;

    --primary-1: #504B95;
    --primary-2: #7C74AF;
    --primary-3: #A7A0CA;
    --primary-4: #D2CEE4;

    --secondary-1 : #CA53AB;
    --secondary-2 : #DA81BF;
    --secondary-3 : #E9AAD4;
    --secondary-4 : #FFF1D6;

    --bg-body: var(--white);
    --bg-body--dark: var(--primary);

    --text-body: var(--primary);
    --text-body-white: var(--white);
    --text-body-white--hover: var(--secondary-3);
    --text-body--hover: var(--primary-1);
    --text-title: var(--secondary);

    --white:        #FFFFFF;
    --green:        #006988;
    --light-green:  #75ABBC;
    --vlight-green: #AEECFF;
    --dark-green:   #00242E;
    --beige:        #C9C2B0;
    --light-beige:  #E1DDD2;
    --body:         #FFFFFF;
    --gold:         #4D4328;
    --tan:          #876A18;
    --transition-normal: 0.5s;
    --transition-slow: 0.75s;
    
    --background-image: url(../images/bg-soccer.jpg);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: var(--text-body);
    background-color: var(--bg-body);
}

header {
    position: relative;
}

main {
    margin: 0 auto;
}

.container-fluid {
    position: relative;
    margin: 0 auto;
    width: 96%;
    max-width: 1440px;
}

.bg-body--dark {background-color: var(--bg-body--dark);}
.bg-gradient--primary {  background: linear-gradient( 60deg, var(--primary) 30%, var(--secondary) 90% ); }
.bg-gradient--primary-2 {  background: linear-gradient( -30deg, var(--secondary) 0%, var(--primary) 30% ); }

.bg-green                  { background-color: var(--green); }
.bg-green-light            { background-color: var(--light-green); }
.bg-green-vlight           { background-color: var(--vlight-green); }
.bg-green-dark             { background-color: var(--dark-green); }
.bg-beige                  { background-color: var(--beige); }
.bg-beige-light            { background-color: var(--light-beige); }
.bg-gold                   { background-color: var(--gold); }

.border-green              { border: 1px solid var(--green); }
.border-top-green          { border-top: 1px solid var(--green); }
.border-right-green        { border-right: 1px solid var(--green); }
.border-bottom-green       { border-bottom: 1px solid var(--green); }
.border-left-green         { border-left: 1px solid var(--green); }

.border-green-light        { border: 1px solid var(--light-green); }
.border-top-green-light    { border-top: 1px solid var(--light-green); }
.border-right-green-light  { border-right: 1px solid var(--light-green); }
.border-bottom-green-light { border-bottom: 1px solid var(--light-green); }
.border-left-green-light   { border-left: 1px solid var(--light-green); }

.border-beige              { border: 1px solid var(--light-beige); }
.border-top-beige          { border-top: 1px solid var(--light-beige); }
.border-right-beige        { border-right: 1px solid var(--light-beige); }
.border-bottom-beige       { border-bottom: 1px solid var(--light-beige); }
.border-left-beige         { border-left: 1px solid var(--light-beige); }


.bg-soccer:before          { background-image: url(../images/bg-soccer.jpg) !important; }
.bg-f1:before          { background-image: url(../images/bg-f1.jpg) !important; }



.bg-lake:before            { background-image: url(../images/bg-lake.jpg) !important; }
.bg-forest:before          { background-image: url(../images/bg-forest.jpg) !important; }
.bg-ocean:before           { background-image: url(../images/bg-ocean.jpg) !important; }
.bg-stone:before           { background-image: url(../images/bg-stone.jpg) !important; }
.bg-bees:before            { background-image: url(../images/bg-bees.jpg) !important; }
.bg-butterfly:before       { background-image: url(../images/bg-butterfly.jpg) !important; }




/*
    ###################################
    LINKS / BUTTONS
    ###################################
*/



a {
    color: var(--text-body);
    text-decoration-color: var(--text-body--hover);
    text-decoration-thickness: .125em;
    text-underline-offset: 1.5px;
    transition: all var(--transition-normal) ease-in-out;
}

a:hover {
    color: var(--text-body--hover);
}

.text-primary        { color: var(--primary) !important; }
.text-secondary      { color: var(--secondary) !important; }
.text-tertiary       { color: var(--tertiary) !important; }


.text-white        { color: var(--white); }
a.text-white       { text-decoration-color: var(--white); }
a.text-white:hover { color: var(--text-body-white--hover) !important; }


.text-gradient--white {background: linear-gradient( 60deg, #ffffff 20%, #3E4CCE 120% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: all var(--transition-normal) ease-in-out; }

a:hover .text-gradient--white {background: linear-gradient( 60deg, #ffffff 20%, #FFFFFF 120% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.text-gradient--primary {background: linear-gradient( 60deg, var(--primary) 20%, var(--secondary) 80% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.text-gradient--secondary {background: linear-gradient( 60deg, var(--primary) 20%, var(--secondary) 80% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }




.text-green         { color: var(--light-green); }
a.text-green        { text-decoration-color: var(--vlight-green); }
a.text-green:hover  { color: var(--vlight-green) !important; }

.text-green-light          { color: var(--vlight-green); }
a.text-green-light        { text-decoration-color: var(--light-green); }
a.text-green-light:hover  { color: var(--light-green) !important; }

.text-gold,
.text-gold a { color: var(--gold); }

.text-gold a,
a.text-gold       { text-decoration-color: var(--tan); }

.text-gold a:hover,
a.text-gold:hover { color: var(--tan) !important; }





/*
    ###################################
    IMAGES / CROPPING
    ###################################
*/



/*
    BLEED IMAGE ON THE LEFT OR RIGHT
    – Uses psuedo elements for bg and overlay
    – D-flex in parent div allows text element to be centred vertically
    – If parent div has no content, needs height/min-height declaration for bg to show
    – Pseudo divs will expand to cover parent div
    – On desktop bg is W-50 to create columns, when stacked bg is W-100
*/


/*
    Use this to crop images in a trapezoid.
    The section can take the height of the image or
    We can set the section to have a specific height based on the breakpoint
*/

.bg-skew {
    transform: skewY(-14deg);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.bg-skew .content {
    position: relative;
    transform: skewY(14deg);
    margin: -20% 0;
}


/* Use to add a slant at the top and bottom of sections */

.section-skew {
    position: relative;
    transform: skewY(-14deg);
    overflow: hidden;
    /* margin-top: -10%; */
    /* padding-top: 10%; */
    margin-bottom: 10%;
    /* padding-bottom: 10%; */
}

.section-skew .content {
    transform: skewY(14deg);
}

/*  PARENT DIV  */

.bg-bleed-left,
.bg-bleed-right,
.bg-pin-top,
.bg-pin-bottom {
    position: relative;
/*     min-height: 30vw; */
}

/*
    PSEUDO ELEMENTS
    :before -> bg
    :after -> gradient overlay
*/

.bg-bleed-left:before,
.bg-bleed-left:after,
.bg-bleed-right:before,
.bg-bleed-right:after {
    content: "";
    position: absolute;
    left: auto;
    right: auto;
    top: 0;
    bottom: 0;
    width: calc(100vw - 0.5 * var(--bs-gutter-x) - 3px);
}


.bg-pin-top:before,
.bg-pin-top:after,
.bg-pin-bottom:before,
.bg-pin-bottom:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*  SET BACKGROUND  */

.bg-bleed-left:before,
.bg-bleed-right:before {
    background: url(../images/bg-bees.jpg) no-repeat bottom center;
    background-size: cover;
    z-index: -2;
}

.bg-pin-top:before {
    background: url(../images/bg-stone.jpg) no-repeat top center;
    background-size: cover;
    z-index: -2;
}

.bg-pin-bottom:before {
    background: url(../images/bg-stone.jpg) no-repeat bottom center;
    background-size: cover;
    z-index: -2;
}


/*  SET OVERLAY  */

.bg-mask-bottom:after {
    background: rgb(0, 36, 46);
    background: linear-gradient(180deg, rgba(0, 36, 46, 0) 60%, rgba(0, 36, 46, .75) 85%, rgba(0, 36, 46, 1) 100%);
    z-index: -1;
}

.bg-soft.bg-mask-bottom:after {
    background: rgb(0, 36, 46);
    background: linear-gradient(180deg, rgba(0, 36, 46, 0.3) 40%, rgba(0, 36, 46, .75) 65%, rgba(0, 36, 46, 1) 100%);
    z-index: -1;
}

.bg-mask-top:after {
    background: rgb(0, 36, 46);
    background: linear-gradient(180deg, rgba(0, 36, 46, 1) 40%, rgba(0, 36, 46, .75) 65%, rgba(0, 36, 46, 0) 80%);
    z-index: -1;
}

.bg-soft.bg-mask-top:after {
    background: rgb(0, 36, 46);
    background: linear-gradient(180deg, rgba(0, 36, 46, 1) 50%, rgba(0, 36, 46, .75) 75%, rgba(0, 36, 46, 0.3) 90%);
    z-index: -1;
}

/*
    DESKTOP WIDTH
    – Adjust height and width of pseudo elements to create columns
*/

@media (min-width: 992px) {

    .bg-bleed-left,
    .bg-bleed-right {
/*         min-height: 40vw; */
    }

    .bg-bleed-left:before,
    .bg-bleed-left:after,
    .bg-bleed-right:before,
    .bg-bleed-right:after {
        right: 0;
        width: calc(50vw - 0.25 * var(--bs-gutter-x) - 1.5px);
    }

    /*
        IMAGE IN RIGHT COLUMN
        – Adjust left/right values to bleed image to the sides
    */

    .bg-bleed-right:before,
    .bg-bleed-right:after {
        left: 0px;
        right: auto;
    }

}




/*
    PIN IMAGE AT THE BOTTOM AND FADE TO THE TOP
    – Uses psuedo elements for bg and overlay
    – :before -> bg
    – :after -> gradient overlay
    – Image should have a specific aspect ratio (?)
    – Image should cover the area (?)
*/



/*
.bg-pin-bottom-fade-top:before,
.bg-pin-bottom-fade-top:after {
    background: url(../images/bg-stone.jpg) no-repeat bottom center;
    background-size: cover;
    z-index: -2;
}

.bg-pin-bottom-fade-top:after {
    background: rgb(0, 36, 46);
    background: linear-gradient(180deg, rgba(0, 36, 46, 1) 40%, rgba(0, 36, 46, .75) 65%, rgba(0, 36, 46, 0) 80%);
    z-index: -1;
}

 */





/*
    OVERLAY DIV TO MASK IMAGE BELOW
    – Parent div needs to be position relative
    – Image should have a specific aspect ratio (?)
    – Image should cover the area (?)
*/


.bg-overlay-fade-bottom-green {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0, 36, 46);
    background: linear-gradient(180deg, rgba(0, 36, 46, 0) 60%, rgba(0, 36, 46, .75) 85%, rgba(0, 36, 46, 1) 100%);
}

.bg-overlay-fade-bottom-beige {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(201, 194, 176);
    background: linear-gradient(180deg, rgba(201, 194, 176, 0) 60%, rgba(201, 194, 176, .75) 85%, rgba(201, 194, 176, .9) 100%);
}

.bg-overlay-fade-top-left-beige {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(201, 194, 176);
    background: linear-gradient(-45deg, rgba(201, 194, 176, 0) 70%, rgba(201, 194, 176, 0.7) 85%, rgba(201, 194, 176, 0.95) 100%);
}


.bg-fade-top-beige,
.bg-fade-bottom-green {
    position: relative;
}

.bg-fade-top-beige:before,
.bg-fade-bottom-green:before {
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    background: rgb(0, 36, 46);
    background: linear-gradient(0deg, rgba(0, 36, 46, 0) 0%, rgba(0, 36, 46, 1) 100%);
    z-index: 0;
}

.bg-fade-bottom-green:before {
    top: auto;
    bottom: 0;
    left: 0;
    background: rgb(201, 194, 176);
    background: linear-gradient(180deg, rgba(201, 194, 176, 0) 0%, rgba(201, 194, 176, 1) 100%);
    z-index: 0;
}







@media (max-width: 991px) {

    .crop-md-360 img,
    img.crop-md-360,
    .crop-md-250 img,
    img.crop-md-250 {
        object-fit: cover;
        /* Do not scale the image */
        object-position: center;
        /* Center the image within the element */
        width: 100%;
        max-height: 360px;
    }

    .crop-md-250 img,
    img.crop-md-250 {
        max-height: 250px;
    }

}



/*
    ###################################
    TEAM MEMBER
    ###################################
*/

/* FROM THIS WIDTH */
@media (min-width: 1400px) {
    #team-list.g-xxl-8 {
        --bs-gutter-y: 8rem;
        --bs-gutter-x: 8rem;
    }
}

.team-member[data-style=member-list] {
    cursor: pointer;
    /* padding: 2.25rem; */
}

.team-member[data-style=member-list] .team-member-image {
    line-height: 0;
    overflow: hidden;
    margin-bottom: 30px
}

.team-member[data-style=member-list] .team-member-image-inner {
    display: flex;
    justify-content: center;
}

.team-member[data-style=member-list] .team-member-image,
.team-member[data-style=member-list] .team-member-image-inner {
    -webkit-transition: transform .8s cubic-bezier(.05,.2,.1,1);
            transition: transform .8s cubic-bezier(.05,.2,.1,1);
    transition-delay: 0ms !important;
}

.team-member[data-style=member-list]:hover .team-member-image-inner {
    -webkit-transform: scale(1.15);
            transform: scale(1.15)
}

.team-member[data-style=member-list]:hover .team-member-image {
    -webkit-transform: scale(.95);
            transform: scale(.95)
}

.team-member[data-style=member-list]:hover .team-member-image .team-member-image-inner img {
    /* max-width: 250px; */
}





/*
    ###################################
    DIVIDERS / BORDERS
    ###################################
*/



hr {
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 1px var(--vlt-gold) solid;
    opacity: 1;
}

hr.tall {
    margin-top: 80px;
    margin-bottom: 80px;
}

.divider {
    width: 100%;
    height: 50px;
    margin-top: 80px;
    margin-bottom: 80px;
    background: url('../images/divider.svg') no-repeat center center;
}

.border-left {
    border-left: 6px solid var(--secondary);
    border-image:
    linear-gradient(
      to bottom,
      var(--secondary),
      rgba(0, 0, 0, 0)
    ) 1 100%;
    padding-left: 1.25rem;
}

.text-white .border-left {
    border-left: 6px solid var(--white);
    border-image:
    linear-gradient(
      to bottom,
      var(--white),
      rgba(255, 255, 255, 0)
    ) 1 100%;
    padding-left: 1.25rem;
}

.ddm-border-bottom {
    border-bottom: 6px solid var(--secondary);
}