@import url("../petrichor-branding.css");
@import url("../common-stylings.css");
@import url("../flex-box-stylings.css");
@import url("../keyframe-animations.css");

* {
    box-sizing:             border-box;
}


main-menu {
    /* variables */
    --main-menu-height:     100vh; /* default to the main menu covering the full screen */
    --horizon:              25vh;
    --y-offset:             0%; /* default to 0 offset */
    --background-size:      100%;
    --button-width:         80%;
    --btn-border-style:     solid;
    --up-chevron-offset:    -50vh; /* default to off-screen */
    --menu-button-height:   70px;
    /* colours */
    --col-card-bkg-light:   #F6E8CE;
    --col-card-bkg-dark:    #E2D6BE;
    --col-inset-bkg:        #FFF6F2;
    --col-inset-border:     #C6B1AD;
    --col-button-text:      #6B5755;
    /* styling */
    display:                block; /* custom elements default to display: in-line */
    min-height:             var(--main-menu-height);
    background-color:       #757E87;
    width:                  100%;
    position:               relative;
}

#main-menu-area-wrapper {
    width:                  100%;
    min-height:             var(--main-menu-height);
    background-image:       url(../assets/images/sky-2.webp);
    background-size:        var(--background-size);
    /*background-size:        cover;*/
    background-position:    center var(--y-offset);
    top:                    0%;
    position:               absolute;
}

#main-menu-buttons-area {
    transform:              translate(-50%, var(--y-offset)); /* center-x AND transition on the y-offset */
    width:                  var(--button-width);
    justify-content:        center;
    align-content:          space-around;
    align-items:            space-around;
    min-height:             40vh;
    bottom:                 var(--horizon);
}

#main-menu-buttons-area > li {
    flex-basis:             50%;
    min-height:             10vh;
    /*overflow:               hidden;*/
}

.main-menu-button {
    display:                block;
    appearance:             none;
    position:               absolute;
    width:                  calc(1.2 * var(--button-width));
    height:                 var(--menu-button-height);
    border-style:           none;
    border-width:           0px;
    background-color:       var(--col-card-bkg-light);
    background-image:       url(../assets/images/parchment-texture.webp);
    background-size:        var(--menu-button-height) var(--menu-button-height);
    background-repeat:      repeat;
    /*overflow:               hidden;*/
    padding:                10px 10px 10px 10px;
    cursor:                 pointer;
    z-index:                2;
}

#main-menu-buttons-area > li:nth-child(odd) > .main-menu-button {
    right:                  0%;
    padding-left:           calc(0.9 * var(--menu-button-height));
    background-color:       transparent;
    background-image:       url(../assets/images/parchment-tab-eyelet-left.webp);
    background-size:        auto var(--menu-button-height);
    width:                  calc(100% + calc(0.9 * var(--menu-button-height)));
}
#main-menu-buttons-area > li:nth-child(even) > .main-menu-button {
    left:                   0%;
    padding-right:          calc(0.9 * var(--menu-button-height));
    background-position:    right;
    background-color:       transparent;
    background-image:       url(../assets/images/parchment-tab-eyelet-right.webp);
    background-size:        auto var(--menu-button-height);
    width:                  calc(100% + calc(0.9 * var(--menu-button-height)));
}

.main-menu-button > p {
    margin-block-start:     0px;
    margin-block-end:       0px;
    position:               relative;
    font-size:              24px;
    /*font-weight:            bold;*/
    padding-top:            5px;
    height:                 100%;
    border:                 solid 2px var(--col-inset-border);
    background-color:       var(--col-inset-bkg);
    color:                  var(--col-button-text);
    overflow:               hidden;
}
.main-menu-button > p::after {
    content:                "";
    display:                block;
    position:               absolute;
    background-image:       url(../assets/images/dotted-line-long.webp);
    background-repeat:      no-repeat;
    background-size:        cover;
    background-position:    center;
    width:                  90%;
    height:                 10px;
    left:                   50%;
    transform:              translateX(-50%);
    bottom:                 5px;
}

#main-menu-buttons-area > .menu-button-container > .main-menu-button > p { /* only apply to main menu buttons, not top menu */
    white-space:            nowrap;
}

#main-menu-buttons-area > li:nth-child(odd) > .main-menu-button > p {
    text-align:             left;
    padding-left:           5%;
}
#main-menu-buttons-area > li:nth-child(even) > .main-menu-button > p {
    text-align:             right;
    padding-right:          5%;
}

/* Button hover behaviour */
#main-menu-buttons-area > .menu-button-container:hover > .main-menu-button {
    width:                  calc(1.2 * var(--button-width));
}
#main-menu-buttons-area > .menu-button-container > .main-menu-button {    
    transition:             width 0.5s;
}


#main-menu-overlay-area {
    pointer-events:         none;
    width:                  100%;
    height:                 100%;
    min-height:             100vh;
    transform:              translateY(var(--y-offset));
}

#title-container {
    width:                  100%;
    padding-bottom:         calc(25vh + var(--horizon)); /*calc(2 * var(--horizon));*/
    text-align:             center;
    transform:              translate(-50%, -50%) scale(var(--background-size));
    /*text-shadow:            2px 2px 5px var(--col-off-black);*/ /* include? */
}
#title-container > h1 {
    font-size:              5.5rem;
}
#title-container > h1 > .sub-heading {
    display:                block;
    font-size:              2.5rem;
    letter-spacing:         0.48em;
}

#light-bulb-container {
    background-image:       url(../assets/images/light-bulb-terrarium-crop.webp);
    background-position:    center bottom;
    background-repeat:      no-repeat;
    text-align:             center;
    position:               absolute;
    width:                  100vw;
    min-height:             100vh;
    left:                   50%;
    bottom:                 var(--horizon);
    background-size:        calc(0.9 * var(--background-size));
    transform:              translate(-55%, 10%);
}

#back-to-home-container {
    pointer-events:         auto;
    top:                    calc(var(--up-chevron-offset) - var(--y-offset));
}
.image-button {
    background-color:       transparent;
    border-style:           none;
}
#up-chevron {
    width:                  3vh;
}

#sticky-sub-menu-area {
    --sub-menu-button-width:  80%;
    --sub-menu-button-height: 10vh;
    --sub-menu-area-y:      -20vh;
    position:               fixed;
    top:                    calc(var(--sub-menu-area-y) - 2px);
    justify-content:        space-around;
    align-items:            flex-start;
    padding:                0 5vw;
}

.sub-menu-placeholder#sticky-sub-menu-area {
    width:                  100%;
    height:                 0%;
}

.sub-menu-fixed#sticky-sub-menu-area {
    width:                  100%;
    min-height:             var(--sub-menu-button-height);
    z-index:                5;
}

#sticky-sub-menu-area > .menu-button-container {
    flex-basis:             20%;
    height:                 var(--sub-menu-button-height);
    overflow:               hidden;
    padding-top:            0;
    padding-bottom:         calc(var(--sub-menu-button-height) / 10); /* padding bottom needs to be 0 when --sub-menu-button-height is 0; roughly 10px in all other cases */
}

#sticky-sub-menu-area > .menu-button-container > .top-menu-button {
    height:                 calc(0.7 * var(--sub-menu-button-height));
    width:                  var(--sub-menu-button-width);
}

.top-menu-button {
    background-color:       var(--col-card-bkg-light);
    background-image:       url(../assets/images/parchment-texture.webp);
    background-size:        20%;
    background-repeat:      repeat;
    border-style:           none;
    border-width:           0px;
    padding:                0px 10px 10px 10px;
}

.top-menu-button > p {
    margin-block-start:     0px;
    margin-block-end:       0px;
    text-align:             center;
    padding-top:            1em;
    padding-bottom:         1em;
    height:                 100%;
    border:                 solid 2px var(--col-inset-border);
    background-color:       var(--col-inset-bkg);
    color:                  var(--col-button-text);
}
.top-menu-button > p::after {
    content:                "";
    display:                block;
    position:               absolute;
    background-image:       url(../assets/images/dotted-line.webp);
    width:                  var(--button-width);
    height:                 10px;
    left:                   50%;
    transform:              translateX(-50%);
    bottom:                 20px;
}
.top-menu-button > p:hover {
    
}

#sticky-sub-menu-area > #to-top-container {
    flex-basis:             5%;
    overflow:               hidden;
    padding-top:            0;
    min-height:             var(--sub-menu-button-height);
}
#sticky-sub-menu-area > #to-top-container > .image-button {
    width:                  100%;
    height:                 calc(0.7 * var(--sub-menu-button-height));
    transition:             height 0.5s;
}
#sticky-sub-menu-area > #to-top-container > .image-button > img {
    height:                 calc(0.5 * var(--sub-menu-button-height));
    margin:                 auto;
    transition:             transform 0.5s;
    transform:              translateY(calc(-5px - calc(10vh - var(--sub-menu-button-height))));
    top:                    0;
}


page-contents {
    --page-contents-height: 0vh; /* default to no height */
    --strap-opacity:        1; /* start off fully visible */
    --horizon-duration:     0s;
    /* colours */
    --col-light-heading:    #E0E0D9;
    --col-os-headings-bkg:  #C6B1AD;
    --col-card-bkg-light:   #F6E8CE;
    --col-card-bkg-dark:    #E2D6BE;
    --col-inset-bkg:        #FFF6F2;
    --col-inset-border:     #C6B1AD;
    --col-button-text:      #6B5755;
    --col-tag-bkg:          #C6B1AD;
    /* styling */
    display:                block; /* custom elements default to display: in-line */
    min-height:             var(--page-contents-height); /* -1px so that we have overlap between the background elements */
    background-color:       transparent;
    width:                  100%;
    position:               relative;
}

#page-contents-area-wrapper {
    --background-size:      100%;
    --horizon:              35vh;
    width:                  100%;
    min-height:             calc(var(--page-contents-height));
    background-image:       url(../assets/images/earth-tileable.webp); /* fallback */
    background:             linear-gradient(to bottom, transparent 20%, #000000cc), url(../assets/images/earth-tileable.webp) center calc(-1 * var(--horizon) + 1px);
    background-size:        var(--background-size);
    /*background-position:    center calc(-1 * var(--horizon) + 1px); /* condense into one property so we can specify this background-position for the earth-repeat, but a backgorund position of 0 for the gradient */
    top:                    0px;
    position:               relative;
}
#page-contents-area-wrapper::before {
    display:                block;
    content:                "";
    background-image:       url(../assets/images/earth-top-3.webp);
    width:                  100%;
    height:                 var(--horizon);
    background-repeat:      no-repeat;
    background-size:        var(--background-size);
    background-position:    center top;
    transform:              translateY(calc(-100% + 1px));
    position:               absolute;
    transition:             all var(--horizon-duration);
}

.last-in-section {
    padding-bottom:         min(var(--page-contents-height), 200px); /* height of the wave at the top of the footer area */
}

#contents-heading {
    --y-offset:             0%;
    text-align:             center;
    font-size:              var(--font-size-h1);
    transform:              translateY(var(--y-offset));
    position:               relative;
    width:                  100%;
}

.light-text {
    color:                  var(--col-light-heading);
}

#strapline-container {
    position:               absolute;
    width:                  100%;
    bottom:                 6vh;
    text-align:             center;
    opacity:                var(--strap-opacity);
    transition:             opacity 1.5s;
}
#strapline-container > p {
    color:                  var(--col-off-white);
    font-family:            var(--font-headings);
    font-size:              1.5em;
    letter-spacing:         0.1em;
}


our-services-content {
    /* styling */
    display:                block;
    width:                  100%;
    min-height:             50vh;
    height:                 auto;
}

.our-services-content-area {
    padding:                10vw 12vw;
}

#our-services-details-area {
    padding-bottom:         50px;
}

.our-services-detail-card-container {
    --titles-font-size:     2em;
    --card-heading-height:  calc(calc(2 * 1.67em) + var(--titles-font-size));
    padding-top:            calc(1.2 * var(--card-heading-height));
    padding-bottom:         calc(0.8 * var(--card-heading-height));
}

.card-content-heading-container {
    background-color:       var(--col-accent);
    position:               absolute;
    z-index:                1;
    min-width:              25vw;
    height:                 var(--card-heading-height);
    padding-left:           3.5%;
    padding-right:          3.5%;
    border-color:           var(--col-mid-grey);
    border-style:           solid;
    border-width:           1px;
}
.card-content-heading-container > * {
    color:                  var(--col-off-black);
}

.card-content-text-container {
    background-color:       var(--col-off-black-80P);
    margin-top:             calc(0.5 * var(--card-heading-height));
    margin-bottom:          5vh;
    padding-top:            calc(0.5 * var(--card-heading-height) + 2vh);
    padding-left:           5vw;
    padding-right:          5vw;
    padding-bottom:         2vh;
    width:                  85%;
}
.card-content-text-container > p {
    color:                  var(--col-off-white);
}

#our-services-details-flex-container > .our-services-detail-card-container:nth-child(odd) > .card-content-text-container {
    margin-left:            0;
    margin-right:           auto;
}
#our-services-details-flex-container > .our-services-detail-card-container:nth-child(odd) > .card-content-heading-container {
    left:                   5%;
    text-align:             left;
}
#our-services-details-flex-container > .our-services-detail-card-container:nth-child(even) > .card-content-text-container {
    margin-left:            auto;
    margin-right:           0;
}
#our-services-details-flex-container > .our-services-detail-card-container:nth-child(even) > .card-content-heading-container {
    right:                  5%;
    text-align:             right;
}

#our-services-details-flex-container > .our-services-detail-card-container > .card-content-heading-container {
    background-color:       var(--col-os-headings-bkg);
    border-style:           none;
}
#our-services-details-flex-container > .our-services-detail-card-container > .card-content-heading-container > * {
    color:                  var(--col-button-text);
    font-size:              var(--title-font-size);
    margin-block-start:     1em;
}
#our-services-details-flex-container > .our-services-detail-card-container > .card-content-heading-container > *::after {
    content:                "";
    display:                block;
    position:               absolute;
    background-image:       url(../assets/images/dotted-line-white.webp);
    width:                  80%;
    height:                 20px;
    left:                   50%;
    transform:              translateX(-50%);
    bottom:                 0px;
}


#the-tech-we-use-intro-area {
    padding-top:            0vw;
    padding-bottom:         10vw;
}
#tech-bar-sticking-point {
    min-height:             10vh;
    padding:                0;
}

#the-tech-we-use-details-area {
    position:               relative;
    min-height:             25vh;
    /*background-color:       var(--col-sub);*/
    background-image:       linear-gradient(to bottom, var(--col-sub-80P), var(--col-sub) 10%);
    background-image:       url(../assets/images/tech-we-use-bkg_5.webp);
    background-repeat:      no-repeat;
    background-size:        100%;
    background-position:    center -12vh;
    padding-top:            5vh;
    padding-bottom:         0px;
}

#the-tech-we-use-details-area::after {
    content:                "";
    display:                block;
    background-color:       var(--col-sub);
    width:                  100%;
    height:                 10vh;
    clip-path:              url("#outro-curve");
    position:               absolute;
    top:                    99%;
    left:                   0;
    z-index:                2;
}

#tech-details-carousel-container {
    --panel-to-show:        1;
    width:                  100vw;
    overflow:               hidden;
}

.tech-details-carousel-item {
    flex-basis:             100vw;
    min-width:              calc(100vw - 20px); /* margin for padding */
    justify-content:        space-between;
    align-items:            center;
    transform:              translateX(calc(-1 * calc(calc(var(--panel-to-show) - 1) * 100%)));
    transition:             transform 0.5s;
}

.carousel-content-holder {
    flex-basis:             80%;
}

.carousel-content-holder > .text-headings {
    font-size:              28px;
    color:                  var(--col-primary);
    margin-bottom:          0px;
    margin-block-start:     0px;
}

.carousel-content-holder > .carousel-item-text-container > .text-emphasis {
    font-size:              calc(0.9 * var(--font-size-emphasis));
    color:                  var(--col-primary);
}

.carousel-content-holder > .carousel-item-text-container > .text-body {
    font-size:              calc(1.2 * var(--font-size-body));
    color:                  var(--col-off-black);
}

#tech-bar-container {
    --tech-bar-offset:      100%; /* default to just off-screen */
    background-image:       linear-gradient(to bottom, transparent 45%, var(--col-sub-80P));
    background-image:       url(../assets/images/tech-we-use-bkg_5.webp);
    background-size:        100%;
    background-position:    center bottom 12vh;
    /*background-image:       linear-gradient(to top,
        rgba(168, 209, 200, 1) 0%,
        rgba(168, 209, 200, 0.738) 19%,
        rgba(168, 209, 200, 0.541) 34%,
        rgba(168, 209, 200, 0.382) 47%,
        rgba(168, 209, 200, 0.278) 56.5%,
        rgba(168, 209, 200, 0.194) 65%,
        rgba(168, 209, 200, 0.126) 73%,
        rgba(168, 209, 200, 0.075) 80.2%,
        rgba(168, 209, 200, 0.042) 86.1%,
        rgba(168, 209, 200, 0.021) 91%,
        rgba(168, 209, 200, 0.008) 95.2%,
        rgba(168, 209, 200, 0.002) 98.2%,
        rgba(168, 209, 200, 0) 100%
    ); from https://css-tricks.com/easing-linear-gradients/ */
    position:               fixed;
    z-index:                1;
    bottom:                 0%;
    width:                  100%;
    min-height:             10vh;
    transform:              translateY(var(--tech-bar-offset));
}

#tech-bar-flex-container {
    justify-content:        space-around;
    align-items:            stretch;
    width:                  100%;
    height:                 100%;
    padding:                0% 3vw;
}

.tech-item-flex-container {
    flex-basis:             15%;
    max-width:              calc(100vw / 8);
    min-width:              calc(100vw / 8);
    width:                  100%;
    height:                 100%;
    justify-content:        space-around;
    align-items:            center;
    align-content:          center;
    gap:                    2vh;
    transition:             transform 0.5s;
}

.tech-bar-flex-item-container {
    min-height:             100%;
}

.tech-bar-flex-item-container > .tech-item-flex-container > .text-headings {
    color:                  var(--col-inset-bkg);
    font-weight:            normal;
    margin-top:             0px;
    font-family:            var(--font-emphasis);
}

.tech-bar-flex-item-container.selected > .tech-item-flex-container > .text-headings {
    transition:             font-size 0.5s;
}

.tech-bar-flex-item-container > .tech-item-flex-container {
    transition:             transform 0.5s;
}

.tech-bar-flex-item-container.selected > .tech-item-flex-container {
    transform:              translateY(35%) scale(1.9);
}
.tech-bar-flex-item-container.selected > .tech-item-flex-container > .text-headings {
    font-size:              0px;
}

.tech-item-flex-container:hover {
    transform:              translateY(-15%) scale(1.1);
}

.tech-item-flex-container > img {
    height:                 50%;
    transition:             max-width 1.5s;
}
.fixed-to-bottom > #tech-bar-flex-container > .tech-bar-flex-item-container > .tech-item-flex-container > img {
    max-width:              60px;
    min-width:              50px;
}
.bound-to-tech-details > #tech-bar-flex-container > .tech-bar-flex-item-container > .tech-item-flex-container > img {
    min-height:             65px;
    max-width:              80px;
    min-width:              65px;
}

.bound-to-tech-details > #tech-bar-flex-container > .tech-bar-flex-item-container > .tech-item-flex-container {
    min-height:             136px;
}

.chevron-button {
    background-color:       transparent;
    border-style:           none;
    width:                  60px;
    height:                 60px;
    background-size:        contain;
}

.chevron-back {
    background-image:       url(../assets/icons/left-chevron-button-text.webp);
}

.chevron-next {
    background-image:       url(../assets/icons/right-chevron-button-text.webp);
}

h4.tech-bar-tech-headings {
    font-size:              12px;
    text-align:             center;
    margin-top:             auto;
}

#about-us-area {
    min-height:             60vh;
    background-color:       var(--col-button-text);
    background-color:       var(--col-primary);
    position:               relative;
}

#about-us-content-area {
    padding-top:            15vh;
    padding-bottom:         0vh;
}

#about-us-content-area > .text-headings {
    color:                  var(--col-card-bkg-dark);
}

#about-us-text-area {
    width:                  60vw;
    margin:                 auto;
    margin-top:             5vh;
    margin-bottom:          2vh;
}
#about-us-text-area > p {
    color:                  var(--col-inset-bkg);
    margin-bottom:          2em;
}



webinars-content {
    display:                block;
    width:                  100%;
    min-height:             50vh;
    height:                 auto;
}

#webinars-grid {
    justify-content:        space-around;
    align-items:            flex-start;
    margin:                 5vh 10vw;
}

.page-navigation-container {
    min-height:             10vh;
    justify-content:        space-around;
}

#search-and-filter-bar {
    height:                 70px;
    width:                  100%;
    background-color:       var(--col-off-black-80P);
    padding:                20px 40px;
}

.fixed-to-bottom#search-and-filter-bar {
    position:               fixed;
    bottom:                 0px;
    z-index:                1;
}

#search-and-filter-bar > .flex-item {
    margin:                 0px 10px;
}

.search-bar {
    min-width:              545px;
    border:                 solid 2px var(--col-mid-grey);
    background-color:       var(--col-off-white);
    font-family:            var(--font-emphasis);
    color:                  var(--col-button-text);
    padding-left:           10px;
}

#search-and-filter-bar > .image-button {
    width:                  30px;
    height:                 30px;
}

#search-and-filter-bar > .image-button > img {
    height:                 100%;
}

#search-and-filter-bar > #cancel-search-button {
    padding-left:           0px;
    margin-left:            5px;
}

#search-and-filter-bar > #currently-applied-tags-area {
    margin-left:            auto;
}

#search-and-filter-section {
    min-height:             40vh;
    background-color:       var(--col-off-black-80P);
}

.webinar-tag-button > p {
    pointer-events:         none;
}

.content-not-found {
    width:                  100%;
    flex-basis:             100%;
    align-items:            center;
    background-image:       linear-gradient(to right, transparent, var(--col-os-headings-bkg) 25%, var(--col-os-headings-bkg) 75%, transparent);
}

.content-not-found > p {
    margin-left:            auto;
    margin-right:           auto;
    width:                  50%;
    text-align:             center;
    color:                  var(--col-button-text);
}



webinar-card {
    /* variables */
    --card-min-height:      465px;
    --card-inset-margin:    20px;
    /* styling */
    flex-basis:             28%;
    min-width:              400px;
    background-color:       var(--col-card-bkg-dark);
    background-image:       url(../assets/images/parchment-texture.webp);
    background-size:        20%;
    background-repeat:      repeat;
    min-height:             var(--card-min-height);
    margin-bottom:          5vh;
}

.webinar-card-button {
    width:                  100%;
    height:                 var(--card-min-height);
    padding:                0px;
    min-height:             var(--card-min-height);
    border:                 none 0px;
}

.webinar-card-inset {
    width:                  calc(100% - calc(var(--card-inset-margin) * 2));
    height:                 calc(100% - calc(var(--card-inset-margin) * 2));
    min-height:             calc(100% - calc(var(--card-inset-margin) * 2));
    margin:                 auto;
    background-color:       var(--col-inset-bkg);
    border:                 solid 2px var(--col-inset-border);
}
.webinar-card-inset::after {
    content:                "";
    display:                block;
    position:               relative;
    width:                  80%;
    height:                 15px;
    background-image:       url(../assets/images/dotted-line.webp);
    background-repeat:      no-repeat;
    background-size:        contain;
    background-position:    center;
    left:                   50%;
    transform:              translateX(-50%);
    bottom:                 10px;
}

.webinar-thumbnail {
    box-sizing:             content-box;
    width:                  calc(100% - 20px); /*calc(100% + 4px); /* additional width to cover the border on the inset */
    margin:                 10px;
    max-width:              600px;
    /*transform:              translate(-2px, -2px);*/
}

.webinar-grid-description-container {
    width:                  100%;
    padding-left:           20px;
    padding-right:          20px;
}

.webinar-grid-description-container > p.text-emphasis {
    text-align:             left;
    font-size:              1.2em;
}

.webinar-grid-description-container > p.text-body {
    text-align:             left;
    font-size:              1.1em;
}

.webinar-card-end {
    margin-top:             auto;
}



full-screen-webinars-content {
    display:                block;
    width:                  100%;
    min-height:             100vh;
    height:                 auto;
}

#back-to-webinars-icon {
    width:                  5vh;
    margin:                 2vh;
}

#full-screen-webinar-contents-container {
    width:                  90%;
    margin:                 auto;
    align-items:            center;
    padding-bottom:         calc(min(var(--page-contents-height), 200px) + 20vh);
    transition:             transform 0.5s;
}

#full-screen-webinar-video-container {
    flex-basis:             70vw;
    min-height:             70vh;
}
#full-screen-webinar-video-container > * {
    position:               absolute;
    z-index:                2;
}

#full-screen-webinar-details-container {
    flex-basis:             20vw;
    background-image:       linear-gradient(to bottom, transparent 20%, var(--col-off-black-80P) 20%, var(--col-off-black-80P) 95%, transparent 0);
    padding-top:            2%;
    padding-bottom:         3.2%;
    justify-content:        space-between;
}

.full-screen-webinar-title-area {
    width:                  calc(90% + 20px);
    left:                   -20px;
    background-color:       var(--col-card-bkg-dark);
    background-image:       url(../assets/images/parchment-texture.webp);
    background-size:        20%;
    background-repeat:      repeat;
    padding:                20px 20px 20px 0px;
}

.full-screen-webinar-title-area > .full-screen-webinar-headings {
    font-size:              24px;
    color:                  var(--col-button-text);
    background-color:       var(--col-inset-bkg);
    border:                 solid 2px var(--col-inset-border);
    transform:              translateX(-2px); /* hide left-hand-border */
    padding:                1em 1.5em 2em 0.5em;
    text-align:             left;
    position:               relative;
    left:                   20px;
    width:                  90%;
}
.full-screen-webinar-title-area > .full-screen-webinar-headings::after {
    content:                "";
    display:                block;
    position:               absolute;
    background-image:       url(../assets/images/dotted-line.webp);
    background-repeat:      no-repeat;
    background-position:    center;
    width:                  90%;
    height:                 10px;
    left:                   50%;
    transform:              translateX(-50%);
    bottom:                 20px;
}

.full-screen-webinar-details {
    /*background-color:       var(--col-off-black-80P);*/
    flex-basis:             75%;
}

.full-screen-webinar-description-area {
    padding:                20px 40px 40px 20px;
}

.full-screen-webinar-description-area > p {
    color:                  var(--col-inset-bkg);
}

.full-screen-webinar-details-end {
    margin-top:             auto;
    justify-content:        space-between;
    padding-right:          15px;
}

.webinar-tag-button {
    background-color:       var(--col-tag-bkg);
    border:                 solid 1px var(--col-inset-bkg);
    border-radius:          5px;
    margin:                 10px;
}

.webinar-tag-button.currently-selected {
    margin-top:             auto;
    margin-bottom:          auto;
}
.webinar-tag-button.currently-selected:after {
    content:                "X";
    display:                block;
    position:               absolute;
    text-align:             center;
    font-family:            var(--font-emphasis);
    font-size:              0.65em;
    color:                  var(--col-button-text);
    background-color:       var(--col-card-bkg-dark);
    border:                 solid 2px var(--col-button-text);
    border-radius:          50px;
    width:                  12px;
    height:                 12px;
    left:                   97%;
    top:                    -6px;
}

.webinar-tag-button > .webinar-tag-text {
    font-size:              14px;
    font-weight:            bold;
    color:                  var(--col-off-black);
    margin-block-start:     0.2em;
    margin-block-end:       0.2em;
}

#full-screen-webinar-contents-container > .content-not-found {
    margin-top:             10vh;
}



careers-content {
    display:                block;
    width:                  100%;
    min-height:             50vh;
    height:                 auto;
}

#careers-content-area > .content-not-found {
    margin-top:             5vh;
}



contact-us-content {
    --query-label-width:    30%;
    /* stylings */
    display:                block;
    width:                  100%;
    min-height:             50vh;
    height:                 auto;
}

#back-to-previous-button {
    position:               absolute;
    left:                   0;
    top:                    -5vh;
}

#back-to-previous-icon {
    width:                  5vh;
    margin:                 2vh;
}

#contact-email-container {
    align-items:            center;
    justify-content:        center;
    width:                  100%;
}

#email-icon {
    content:                url(../assets/icons/email-inset-bkg.webp);
    width:                  30px;
    height:                 30px;
    margin-right:           18px;
}

#contact-email-container > .email-text {
    color:                  var(--col-inset-bkg);
    text-align:             center;
    font-size:              16px;
}

#contact-us-centre-container {
    width:                  30%;
    min-width:              550px;
    height:                 52vh;
    padding-bottom:         10vh;
    margin:                 auto;
    background-color:       var(--col-off-black-80P);
    align-items:            center;
    justify-content:        space-between;
}

#contact-us-text-container > p {
    color:                  var(--col-inset-bkg);
    width:                  80%;
    margin:                 auto;
    text-align:             center;
    margin-bottom:          2em;
}

#social-links-container {
    width:                  90%;
    justify-content:        space-around;
}

#social-links-container > .socials-link {
    margin-right:           1em;
}


/* old */
#contact-us-content-area {
    width:                  100%;
    margin:                 auto;
    justify-content:        space-evenly;
    height:                 60vh;
}

#contact-us-information-area {
    flex-basis:             34%;
    padding-left:           5vw;
    padding-right:          5vw;
    justify-content:        space-evenly;
    max-height:             40vh;
}

#contact-us-information-area > p {
    color:                  var(--col-inset-bkg);
    text-align:             right;
}

#contact-us-information-area > .text-emphasis {
    padding-left:           3vw;
}

#contact-us-form-area {
    flex-basis:             66%;
    background-color:       var(--col-off-black-80P);
    margin-top:             -10px;
    padding-top:            calc(50px + 2em);
    max-height:             60vh;
}

#contact-us-form {
    max-height:             60vh;
}

#contact-us-form-left {
    min-width:              400px;
    flex:                   1 1 30%;
}

#contact-us-form-right {
    flex:                   1 1 70%;
}

.form-field {
    margin-bottom:          10vh;
    align-items:            flex-start;
}

.form-label {
    color:                  var(--col-inset-bkg);
    text-align:             right;
    flex-basis:             25%;
    padding-top:            5px;
    padding-right:          2vw;
    font-size:              20px;
    min-width:              140px;
}

.form-input {
    flex-basis:             75%;
    font-size:              18px;
    padding:                5px 5px;
    font-family:            var(--font-emphasis);
    background-color:       var(--col-inset-bkg);
    border:                 solid 2px var(--col-inset-border);
}

.form-field > #cu-name, .form-field > #cu-email {
    max-width:              300px;
}

.form-input#cu-query {
    font-family:            var(--font-body);
}

#cu-submit {
    margin-top:             -5vh;
    margin-left:            max(140px, 25%);
    width:                  40%;
}



site-footer {
    /* variables */
    --site-footer-height:   0vh; /* default to no height */
    /* colours */
    --col-light-heading:    #E0E0D9;
    --col-os-headings-bkg:  #C6B1AD;
    --col-card-bkg-light:   #F6E8CE;
    --col-card-bkg-dark:    #E2D6BE;
    --col-inset-bkg:        #FFF6F2;
    --col-inset-border:     #C6B1AD;
    --col-button-text:      #6B5755;
    --col-tag-bkg:          #C6B1AD;
    /* stylings */
    display:                block;
    min-height:             calc(var(--site-footer-height));
    margin-top:             calc(-1 * var(--site-footer-height));
    width:                  100%;
    position:               relative;
    top:                    -1px;
}

#footer-area-wrapper {
    width:                  100%;
    min-height:             calc(var(--site-footer-height) + 1px);
    background-color:       var(--col-sub);
    top:                    0%;
    position:               relative;
}

#footer-area-wrapper::before {
    content:                "";
    display:                block;
    background-color:       var(--col-sub);
    width:                  100%;
    min-height:             min(var(--site-footer-height), 300px);
    clip-path:              url(#curve);
    transform:              translateY(calc(-100% + 5px));
    position:               absolute;
    z-index:                2;
}

.clip-path-definition {
    width:                  0px;
    height:                 0px;
    position:               absolute;
}

#contact-us-button {
    --c-u-button-height:    10vh;
    position:               absolute;
    z-index:                1;
    right:                  10vw;
    width:                  28vw;
    height:                 var(--c-u-button-height);
    top:                    0px;
    transform:              translateY(calc(-100% + 4px));
    background-color:       var(--col-card-bkg-dark);
    background-image:       url(../assets/images/parchment-texture.webp);
    background-size:        20%;
    background-repeat:      repeat;
    border-color:           transparent;
    padding-top:            5px;
    cursor:                 pointer;
}

#contact-us-button > p {
    --c-u-text-height:      24px;
    background-color:       var(--col-inset-bkg);
    border:                 solid 2px var(--col-inset-border);
    border-bottom:          solid 5px var(--col-inset-bkg);
    font-size:              var(--c-u-text-height);
    font-weight:            bold;
    padding-top:            calc(calc(var(--c-u-button-height) - var(--c-u-text-height) - 30px) / 2);
    padding-bottom:         calc(calc(var(--c-u-button-height) - var(--c-u-text-height) - 15px) / 2);
    margin-block-start:     0em;
    margin-block-end:       0em;
    color:                  var(--col-button-text);
}
#contact-us-button > p::after {
    content:                "";
    display:                block;
    position:               absolute;
    background-image:       url(../assets/images/dotted-line.webp);
    background-repeat:      no-repeat;
    background-position:    center;
    width:                  90%;
    height:                 10px;
    left:                   50%;
    transform:              translateX(-50%);
    bottom:                 20px;
}

#address-wrapper {
    position:               absolute;
    z-index:                3;
    top:                    0px;
    left:                   2vw;
    transform:              translateY(-100px);
}

#address-wrapper > p.text-headings {
    font-size:              16px;
    color:                  var(--col-primary-25D);
}

#address-wrapper > p.text-body {
    margin-block-start:     0.5em;
    margin-block-end:       0.5em;
    padding-left:           1.25em;
}

#contact-container {
    position:               absolute;
    right:                  10px;
    top:                    10px;
    align-items:            flex-end;
}

#footer-email-container {
    align-items:            center;
    justify-content:        flex-end;
}

#footer-email-container > .email-text {
    color:                  var(--col-inset-bkg);
    text-align:             center;
    font-size:              16px;
}

#socials-container {
    margin-left:            auto;
    padding-top:            0px;
    padding-right:          0px;
    margin-bottom:          auto;
}

.socials-container {
    padding:                0px;
    margin-left:            2vw;
}

.socials-link {
    align-items:            center;
    padding-bottom:         0px;
    text-decoration:        none;
}

.socials-link > p {
    margin-block-start:     0.5em;
    margin-block-end:       0.5em;
    font-size:              0.9em;
    color:                  var(--col-off-white);
    text-decoration:        none;
}

.socials-logo {
    margin:                 auto;
    width:                  24px;
    height:                 24px;
    margin-right:           5px;
}

#footer-bottom-bar {
    align-items:            flex-end;
}

.small-print {
    padding:                0;
    margin:                 0;
}

.small-print > p {
    margin-block-end:       0.5em;
    font-size:              0.8em;
}

#copyright-small-print {
    margin-left:            auto;
}

#footer-bottom-bar {
    position:               absolute;
    width:                  100%;
    left:                   0px;
    bottom:                 0px;
    padding-bottom:         0px;
}