/*
	###################################
	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 {
    --orange:       #E8A139;
    --dark-orange:  #BF7200;
    --grey:         #323A40;
    --light-grey:   #EBEBEB;
    --green:        #006988;
    --light-green:  #75ABBC;
    --vlight-green: #AEECFF;
    --dark-green:   #00242E;
    --beige:        #C9C2B0;
    --light-beige:  #E1DDD2;
    --body:         #FFFFFF;
    --gold:         #4D4328;
    --transition-normal: 0.25s;
    --transition-slow: 0.5s;
}

html {
    scroll-behavior: smooth;
}

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

header {
    position: relative;
}

main {
    margin: 0 auto;
/*     overflow-x: hidden; */
}

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

#hero .container-fluid,
#location .container-fluid {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}

.bg-orange       { background-color: var(--orange); }
.bg-grey         { background-color: var(--grey); }
.bg-grey-light   { background-color: var(--light-grey); }
.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); }

.text-grey,
.text-grey:active,
.text-grey:focus,
.text-grey:hover   { color: var(--grey); }
.text-green        { color: var(--light-green); }
.text-green-light  { color: var(--vlight-green); }
.text-gold         { 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-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); }




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

/*
    – Specific aspect ratio
    – Image should cover the area
*/

.bg-bottom-fade-top:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 1%;
    width: 98%;
    height: 100%;
    background: url(/images/bg-stone.jpg) no-repeat bottom center;
    background-size: cover;
    z-index: -2;
}

.bg-bottom-fade-top:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 36, 46);
    background: linear-gradient(180deg, rgba(0, 36, 46, 1) 60%, rgba(0, 36, 46, .75) 85%, rgba(0, 36, 46, 0.2) 100%);
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 1) 50%, rgba(0, 36, 46, .5) 75%, rgba(0, 36, 46, 0) 100%); */
    z-index: -1;
}

.overlay-fade-bottom {
    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%);
}


@media (max-width: 1199px) {

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

}


@media (max-width: 1023px) {


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

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

}



@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;
    }

}

@media (max-width: 767px) {

    .crop-xl img,
    img.crop-xl {
        max-height: 360px;
    }

}



/*
    ###################################
    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: 4px solid var(--red);
    padding-left: 1.25rem;
}


.bg-chevron {
    position: relative;
    overflow: hidden;
}

.bg-chevron.bg-chevron-white:after {
    display: block;
    position: absolute;
    content: '';
    width: 815px;
    height: 500px;
    top: -370px;
    left: auto;
    right: -330px;
    background: url('../images/shape-outline-white.svg') no-repeat;
    z-index: 0;
}