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

/* colours / weights

		red:		 #8B302E
		beige:	 	 #F7EEE4
		body: 		 #282828
		gold:		 #8A7336
		light gold:	 #A29061
        vlight gold: #D6C496

		Alegreya Sans 500 & 800
		Gentium Book Plus 700

		Thin 100
		ExtraLight 200
		Light 300
		Regular 400
		Medium 500
		SemiBold 600
		Bold 700
		ExtraBold 800
		Black 900

        Font Sizes

        14px -> 0.875rem
        16px -> 1rem
        18px -> 1.125rem
        20px -> 1.25rem
        22px -> 1.375rem
        24px -> 1.5rem
        40px -> 2.5rem
        62px -> 3.875rem

	*/

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


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

:root {
    --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-normal: 1s; */
    --transition-slow: 0.75s;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: var(--body);
    background-color: var(--dark-green);
}

header {
    position: relative;
}

main {
    margin: 0 auto;
}

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

.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-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(--body);
    text-decoration-color: var(--beige);
    text-decoration-thickness: .125em;
    text-underline-offset: 1.5px;
    transition: all var(--transition-normal) ease-in-out;
}

a:hover {
    color: var(--beige);
}



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

.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-beige,
.text-beige a { color: var(--beige); }

.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

*/

/*  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;
    }

}


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



hr {
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 1px var(--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: 4px solid var(--red);
    padding-left: 1.25rem;
}