@import url(https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
#navbar {

    position: sticky;
    position: -webkit-sticky;
    width: auto;
    top: 0;
    /* padding: 32px 0 32px 0; */
    /*margin: 0 var(--site-margin); /*REMOVED The margin for the entire site. This is because of XD's design artboard at full scale*/
    background-color: var(--white);
    padding: var(--adjustedFontSize32px) var(--site-padding); /*The padding for the site content. */
    z-index: 20; /*Was 6*/
    /*overflow: inherit;*/ /*Solved a mobile bug? No vh instead. Better option*/
    border-bottom: 2px var(--html-background) solid;
}

.relative-div {

    position: relative;
}

#navbar-content {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

#navbar-verte-logo {

    position: relative;
    display: inline-block;
    height: var(--adjusted56px);
    width: calc(var(--adjusted184px) + var(--adjusted138px)*1.5);
    background: url(/images/verte_navbar_logo.f23eec89099e9fb42529.svg) no-repeat;
    background-size: contain;
}

#defocus {

    display: none;
}

#navbar-list-bg {

    display: none;
}

#navbar-toggle-button {

    display: none;
}

#navbar-list {

    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--adjusted56px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
    list-style-type: none;
}
/* 
.navbar-list-item {

    display: inline;
    margin-left: ;
} */

.navbar-link {

    color: var(--gray);

    transition: color 0.2s ease-out;
}

.navbar-link:hover,
.navbar-link:focus,
.navbar-link:active {

    color: var(--rose-madder);
    font-weight: var(--nunito-bold);
}

.navbar-link > span {

    --text_lines_limit: 1;
}

#link-to-profile {

    position: relative;
    padding-left: var(--adjusted56px);
}

#link-to-profile span{

    position: inherit;
}

.navbar-link-profile {

    position: absolute;
    bottom: 50%;
    left: 0%;
    transform: translateY(50%);
    border-radius: var(--adjusted156px);
    height: var(--adjusted64px);
    width: var(--adjusted64px);
    object-fit: cover;
}

#navbar-list[nav-state=home] > li:nth-child(1) > a,
#navbar-list > li:nth-child(1) > a[navigation-state=active],
#navbar-list[nav-state=blog] > li:nth-child(2) > a,
#navbar-list > li:nth-child(2) > a[navigation-state=active],
#navbar-list[nav-state=shop] > li:nth-child(3) > a,
#navbar-list > li:nth-child(3) > a[navigation-state=active],
#navbar-list[nav-state=about] > li:nth-child(4) > a,
#navbar-list > li:nth-child(4) > a[navigation-state=active],
#navbar-list[nav-state=contact] > li:nth-child(5) > a,
#navbar-list > li:nth-child(5) > a[navigation-state=active] {

    padding-left: 12px;
    background-image: url(/images/navbar_highlight_rectangle.b20bf86a0315b2e2cb54.svg);
    background-repeat: no-repeat;
    background-size: 6px;
    background-position: 0;
    font-weight: var(--nunito-bold);
    color: var(--rose-madder);
}

#navbar-list[nav-state=profile] > li:nth-child(6) span::before {

    content: "";
    position: absolute;
    left: 0;
    bottom: calc(var(--adjusted16px)*-1);
    height: 4px;
    width: 16%;
    border-top: 2px solid var(--rose-madder);
}

.navbar-link-current-profile {

    position: relative;
    top: calc(var(--adjusted12px)/2);
    /* transform: scale(1.4); */
}

.navbar-link-current-profile > .nav-current-user {

    transform: translateY(-16%) !important;
}

.navbar-list-item > button {

    padding: 0;
}

.nav-current-user {

    margin-left: var(--adjustedFontSize32px) !important; 
    color: var(--dark-green) !important;
}

.nav-current-user[auth-state=logged-out] {
    
    display: none;
}

.nav-current-user[auth-state=logged-in] {
    
    display: inline-block;
}

#navbar-lighted-dark-green-bg {

    display: none;
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/

/*
    Large desktops - new devices with 1920 * 1080 resolution

    Using min-width to target 1800px and above, for now
*/
@media screen and (min-width: 1800px){

    .navbar-link-profile {

        height: 24px;
    }
}

/* Tab - Landscape */
@media screen and (max-width: 1280px){

}

/*Tab - portrait*/
@media screen and (max-width: 900px){

    #navbar-main {

        position: relative;
        padding: calc(var(--adjusted12px)/2);
        z-index: 22;

        transition: z-index 0.24s ease-in-out;
    }

    #navbar-toggle-button-open {

        position: absolute;
        opacity: 1;
        margin: auto 0;
        transform: rotate(0deg);
    
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #navbar-toggle-button-close {

        position: relative;
        opacity: 0;
        transform: rotate(75deg);
    
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #navbar-list {

        position: absolute;
        top: 0;
        right: 0;
        padding-top: calc(var(--adjusted156px)*0.9);
        flex-direction: column;
        width: max-content;
        align-items: end;
        translate: calc(100% + var(--site-padding) + var(--adjusted64px)) 0;
        
        transition: translate 0.24s ease-in-out;
        /* padding: 8px 0; */
    }

    #navbar-list::before {

        content: "";
        height: 2px;
        width: 0;
        background-color: var(--blond);
        position: absolute;
        top: calc(var(--adjusted138px)/1.5);
        right: 0;

        transition: width 0.4s ease-in-out;
    }

    #navbar-list > a:first-child {
        
        margin-top: 40px;
    }

    #navbar-lighted-dark-green-bg {

        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100lvh;
        background-color: rgba(5, 50, 37, 0.32);
        visibility: hidden;

        transition: visibility 0.24s ease-in-out;
    }

    #navbar-list-bg {

        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 67.5%;
        height: 100lvh;
        background-color: var(--white);
        translate: 100% 0;

        transition: translate 0.24s ease-in-out;
    }

    /* CLOSE GYMNASTICS */

    #defocus {

        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 -50%;
        padding: calc(var(--adjusted12px)/2);
        z-index: 21;
    }

    #defocus::before {

        content: "VII";
        color: red;
        opacity: 0;
    }

    /* Brings defocus to the fore */
    /* #navbar-main:hover, */ /*No longer using hover*/
    #navbar-main:focus,
    #navbar-main:focus-within {

        z-index: 20;
    }

    /* Animates open and close "buttons" */
    /* #navbar-main:hover #navbar-toggle-button-open */ /*No longer using hover*/
    #navbar-main:focus  #navbar-toggle-button-open,
    #navbar-main:focus-within  #navbar-toggle-button-open {

        opacity: 0; /*1 when open*/
        transform: rotate(-135deg);
    }

    /* #navbar-main:hover #navbar-toggle-button-close */
    #navbar-main:focus  #navbar-toggle-button-close,
    #navbar-main:focus-within  #navbar-toggle-button-close {

        opacity: 1; /*0 when open*/
        transform: rotate(0deg);
    }

    /* #navbar-main:hover #navbar-list-bg */
    #navbar-main:focus  #navbar-list-bg,
    #navbar-main:focus-within  #navbar-list-bg {

        translate: 0 0;
    }

    /* #navbar-main:hover #navbar-list */
    #navbar-main:focus  #navbar-list,
    #navbar-main:focus-within  #navbar-list {

        translate: 0 0;
    }

    /* #navbar-main:hover #navbar-list::before */
    #navbar-main:focus  #navbar-list::before,
    #navbar-main:focus-within  #navbar-list::before {

        width: 180%;
    }

    /* #navbar-main:hover + #navbar-lighted-dark-green-bg */
    #navbar-main:focus + #navbar-lighted-dark-green-bg,
    #navbar-main:focus-within + #navbar-lighted-dark-green-bg {

        visibility: visible;
    }




    .navbar-list-opened {

        transform: translateX(0);
    }

    .navbar-link-profile {
        
        position: absolute;
        left: calc(var(--adjustedFontSize24px)*-1);
    }

    .nav-current-user {

        max-width: calc(var(--adjusted138px)*4);
    }

    .nav-current-user[auth-state=logged-in] {
    
        display: -webkit-box;
        transform: translateY(0%);
        max-width: calc(var(--adjusted156px)*1.8);
    }

    .navbar-link-current-profile > .nav-current-user {

        transform: translateY(0%) !important;
    }

    #navbar-toggle-button {

        display: flex;
        align-items: center;
        position: relative;
        background: transparent;
    }
}

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

    /* #navbar-list-bg {

        width: 240px;
    } */
}
#verte-footer {

    padding-top: var(--adjusted40px);
    padding-bottom: var(--adjustedFontSize48px);
    background-color: var(--blond);

    /*ADDED*/
    margin-left: 0;
    margin-right: 0;
}

#footer-company-name {

    margin: 0;
    font-family: var(--font-bree);
    font-size: var(--adjustedFontSize32px);
    color: var(--dark-green);
}

#footer-content-wrapper {

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "meta_     fPage_";
    margin-top: var(--adjusted88px);
}

#footer-meta-wrapper {

    grid-area: meta_;
}

#footer-links-copy-wrapper {

    grid-area: fPage_;
    display: grid;
}

#footer-meta-wrapper > p {

    margin: 0;
    margin-bottom: var(--adjusted40px);
    padding-left: var(--fPL, var(--adjustedFontSize48px));
    background: var(--fBI) no-repeat;
    background-position: left center;
    background-size: var(--fBS, var(--adjustedFontSize24px));
}

#footer-meta-wrapper > p:nth-child(1) {

    --fBI: url(/images/icon_location_black.ae38f50a9712076eba2d.svg);
    --fBS: var(--adjustedFontSize18px);
}

#footer-meta-wrapper > p:nth-child(2) {

    --fBI: url(/images/icon_phone_black.bfc36949b3e7a2b0e35d.svg);
}

#footer-meta-wrapper > p:nth-child(3) {

    --fPL: calc(var(--adjusted88px) + var(--adjusted12px)/4);
    position: relative;
}

#footer-meta-wrapper > p:nth-child(3) > span:nth-child(1) {

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--adjustedFontSize24px);
}

#footer-meta-wrapper > p:nth-child(3) > span:nth-child(1) > img {

    height: 100%;
    object-fit: contain;
}

#footer-meta-wrapper > p:nth-child(3) > span:nth-child(1) > img:nth-child(1) {

    padding-right: var(--adjusted16px);
    border-right: 1px black solid;
}

#footer-meta-wrapper > p:nth-child(3) > span:nth-child(1) > img:nth-child(2) {

    padding-left: var(--adjusted16px);
}

#footer-meta-wrapper > p:nth-child(4) {

    --fBI: url(/images/icon_twitter_black.9b39aab6e9215db39fa9.svg);
}

#footer-meta-wrapper > p:nth-child(2) {

    margin-bottom: var(--adjusted88px);
}

#footer-meta-wrapper > p:nth-last-child() {

    margin-bottom: 0;
}

#footer-links-copy-wrapper > div > a {

    position: relative;
    color: var(--dark-green);
}

#footer-links-copy-wrapper > div > a::before {

    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    border-radius: 60px;
    background-color: var(--dark-blond-form-hover);
    bottom: -4px;
    left: 0;

    transition: width 0.2s ease-out, background-color 0.2s ease-out;
}

#footer-links-copy-wrapper > div > a:hover::before {

    width: 20px;
}

/* #footer-links-copy-wrapper > div > a:active,
#footer-links-copy-wrapper > div > a:focus {

    color: var(--rose-madder);
}

#footer-links-copy-wrapper > div > a:focus::before {

    width: 20px;
    background-color: var(--rose-madder) !important;
} */

/* #footer-links-copy-wrapper > div > a:active::before {

    background-color: var(--rose-madder);
} */

#footer-links-copy-wrapper[link-state=home] > div:nth-child(1) > a:hover::before,
#footer-links-copy-wrapper[link-state=blog] > div:nth-child(2) > a:hover::before,
#footer-links-copy-wrapper[link-state=shop] > div:nth-child(3) > a:hover::before,
#footer-links-copy-wrapper[link-state=about] > div:nth-child(4) > a:hover::before,
#footer-links-copy-wrapper[link-state=contact] > div:nth-child(5) > a:hover::before,
#footer-links-copy-wrapper[link-state=profile] > div:nth-child(6) > a:hover::before {

    width: 0;
}

#footer-links-copy-wrapper > div:not(:last-child) {

    margin-bottom: var(--adjustedFontSize24px);
}

#footer-links-copy-wrapper > div > a {

    float: right;
}

#footer-links-copy-wrapper[link-state=home] > div:nth-child(1) > a,
#footer-links-copy-wrapper > div:nth-child(1) > a[navigation-state=active],
#footer-links-copy-wrapper[link-state=blog] > div:nth-child(2) > a,
#footer-links-copy-wrapper > div:nth-child(2) > a[navigation-state=active],
#footer-links-copy-wrapper[link-state=shop] > div:nth-child(3) > a,
#footer-links-copy-wrapper > div:nth-child(3) > a[navigation-state=active],
#footer-links-copy-wrapper[link-state=about] > div:nth-child(4) > a,
#footer-links-copy-wrapper > div:nth-child(4) > a[navigation-state=active],
#footer-links-copy-wrapper[link-state=contact] > div:nth-child(5) > a,
#footer-links-copy-wrapper > div:nth-child(5) > a[navigation-state=active],
#footer-links-copy-wrapper[link-state=profile] > div:nth-child(6) > a,
#footer-links-copy-wrapper > div:nth-child(6) > a[navigation-state=active] {

    font-weight: var(--nunito-bold);
    padding-left: var(--adjustedFontSize24px);
    background: url(/images/bullet_marker_black.70ab927c2c8b7c88962a.svg) no-repeat;
    background-size: var(--adjusted12px);
    background-position: left center;
}

#footer-links-copy-wrapper > p {

    margin-top: var(--adjusted80px);
    width: max-content;
    transform: translateX(-50%);
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/

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

    #footer-content-wrapper {

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
                            "meta_"
                            "fPage_";
    }

    #footer-meta-wrapper > p:nth-child(2){

        margin-bottom: var(--adjusted64px);
    }

    #footer-meta-wrapper > p:nth-child(3) {

        --fPL: calc(var(--adjusted138px) + var(--adjusted40px));
    }

    #footer-links-copy-wrapper > div > a {

        float: none;
    }

    #footer-links-copy-wrapper > p {

        transform: translateX(0%);
    }
}
/*
    This is the global styling file. It's used for styles used all through the site
*/

/*
    Design multiplicty factor at half, or mathematically at 24px
*/

/* Not the fastest way, but easier to control across the site*/

/*
    Variables
*/
:root{

    /*
        Color variables
    */
    --white: #FFFFFF;
    --dark-green: #053225;
    --dartmouth-green: #04773B;
    --dark-sea-green: #87C38F;
    --rose-madder: #DA2C38;
    --blond: #F4F0BB;
    --dark-blond: #E6E2AE;
    --bone: #DDD8C4;
    --light-black: #2A2727;
    --black: #000000;
    --gray: #707070;

    --dark-blond-form-hover: #D4D09F;

    --html-background: #F8F8F8;

    /*
        Padding and margins - site wise
    */
    --site-margin: 2.917%;
    --site-padding: 2.917%;

    /*
        Font variables
    */
    --font-bree: 'Bree Serif';
    --font-nunito: 'Nunito Sans';
    --nunito-regular: 400;
    --nunito-semi-bold: 600;
    --nunito-bold: 700;

    /*
        Adjusted values
    */
    --adjusted184px: 104px;
    --adjusted156px: 88px; /*not font - 72px*/
    --adjusted138px: 64px;
    --adjusted88px: 56px;
    --adjusted80px: 48px;
    --adjusted64px: 40px; /*Was 64px or 56px or 48px - yea, ambigous - 5.926%*/
    --adjusted56px: 32px; 
    --adjusted40px: 24px;
    --adjusted16px: 10px;
    --adjusted12px: 8px;
    --adjustedFontSize104px: 66px;
    --adjustedFontSize48px: 30px;
    --adjustedFontSize32px: 20px;
    --adjustedFontSize24px: 16px;

    /*
        Added for blog
    */
    --adjustedFontSize20px: 14px;
    --adjustedFontSize18px: 12px;
}

html, body {

    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow-x: hidden;
}

html {

    background-color: var(--html-background);
    font-size: 16px;
}

body {

    background-color: var(--html-background);
    /*
    margin: 0 2.917%; /* The margin for the entire site. This is because of XD's design artboard at full scale*/
    padding: 0 var(--site-margin); /*BROUGHT PADDING BACK. Using site-margin however, for logical changes. Margin brings scrollbar to front, weirdly. The padding for the site content. */
}

#site-wrapper {

    position: relative;
    width: auto;
    height: auto;
    margin: 0; /*var(--site-margin) The margin for the entire site. This is because of XD's design artboard at full scale*/
    /*padding: 0 2.917%; /* The padding for the site content.*/
    background-color: var(--white); /*WAS --html-background*/
}

.section-wrapper {

    position: relative;
    width: auto;
    /* height: inherit; */
    height: auto;
    /*margin: 0 var(--site-margin); /* REMOVED The margin for the entire site. This is because of XD's design artboard at full scale*/
    /* padding: 0 2.917%; The padding for the site content. */
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--white);
}

/*
    For texts
*/
p {

    margin: 0;
    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
    /* hyphens: auto; */
}

* > p:not(:last-of-type) {

    margin-bottom: var(--adjustedFontSize32px);
}

.page-hero-text {

    margin: 0;
    padding-top: var(--adjusted156px);
    font-family: var(--font-bree), serif;
    font-size: var(--adjustedFontSize104px);
    color: var(--dark-green);
}

.page-section-header-text {

    margin: 0;
    font-family: var(--font-bree), serif;
    font-size: var(--adjustedFontSize48px);
    color: var(--dark-green);
}

.page-prelude-text {

    margin: 0;
    font-family: var(--font-nunito), sans-serif;
    font-weight: var(--nunito-semi-bold);
    font-size: var(--adjustedFontSize32px);
    color: var(--light-black);
}

.page-body-text {

    margin: 0;
    font-family: var(--font-nunito), sans-serif;
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
    color: var(--light-black);
}

.bold-body-text {

    font-weight: var(--nunito-bold);
}

.semi-bold-body-text {

    font-weight: var(--nunito-semi-bold);
}

.wrapping-text {

    white-space: normal;
}

.text-lines-limited {

    display: -webkit-box;
    -webkit-line-clamp: var(--text_lines_limit, 4); /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow-y: hidden;
}

.horizontal-scroll-flex {

    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

/*
    Floating labels testing
*/
.hidden--visually {
    
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*The magic of floating labels*/
.floating-label-input {

    margin-bottom: var(--adjusted56px);
    background-color: var(--dark-blond);
    transition: background-color 0.2s ease;
    border-radius: var(--adjusted16px);
    padding: 4px 0;
}
  
.floating-label-input:hover, .floating-label-input:focus-within {

    background-color: var(--dark-blond-form-hover);
 }

.floating-input {
    
    width: 91.71%;
    padding: var(--adjusted16px) var(--adjustedFontSize32px);
    font-family: var(--font-nunito);
    font-size: var(--adjustedFontSize24px);
    caret-color: var(--dark-green); /*The blinking line*/
    border: none;
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(var(--adjustedFontSize24px)); /*Just solve a bug*/
}

/* floating:hover .floating__input {
    border-color: var(--input__border--hover);
  } */
  
.floating-input::placeholder {

    color: rgba(0, 0, 0, 0); /*hidding the placeholder*/
}

.floating-label {

    display: block;
    position: relative;
    max-height: 0;
    /* font-weight: var(--nunito-regular); */
    font-family: var(--font-nunito);
    pointer-events: none;
    padding-bottom: var(--adjusted16px);
}
  
.floating-label::before {

    color: var(--light-black);
    content: attr(data-content);
    display: inline-block;
    filter: blur(0);
    backface-visibility: hidden;
    transform-origin: left top;
    transition: transform 0.2s ease;
    left: var(--adjustedFontSize32px);
    position: relative;
}
  
.floating-label::after {

    bottom: 0; /*was 1rem*/
    content: "";
    height: 0; /*0.1rem*/
    position: absolute;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    opacity: 0;
    left: 0;
    top: 100%;
    margin-top: 0; /*-0.1rem*/
    transform: scale3d(0, 1, 1);
    width: 100%;
    background-color: var(--dark-blond);
}

.floating-input:focus + .floating-label::after {

    transform: scale3d(1, 1, 1);
    opacity: 1;
}
  
.floating-input:placeholder-shown + .floating-label::before {

    /* transform: translate3d(0, -2.2rem, 0) scale3d(1, 1, 1); */
    transform: translate3d(0, -24px, 0) scale3d(1, 1, 1); /*Label size and pos before. Now after*/ /*This is with the placeholder shown*/
}
  
.floating-label::before, .floating-input:focus + .floating-label::before {

    /* transform: translate3d(0, -3.12rem, 0) scale3d(0.82, 0.82, 1); */
    transform: translate3d(0, -34px, 0) scale3d(0.72, 0.72, 1); /*When the input is in focus, and placeholder is thus floated up (higher -ve value)*/
}
  
.floating-input:focus + .floating-label::before {

    color: var(--dark-green); /*Color when input box gets focus*/
}


/*Floating message Label*/

.floating-message-label {

    display: block;
    position: relative;
    /* max-height: 0; */
    font-size: var(--adjustedFontSize20px); /*Was 14px*/
    pointer-events: none;
    padding: var(--adjusted16px) 0 0 var(--adjustedFontSize32px);
}

.message-input {

    position: relative;
    width: 91.71%;
    padding: var(--adjusted16px) var(--adjustedFontSize32px);
    font-family: var(--font-nunito);
    font-size: var(--adjustedFontSize24px);
    caret-color: var(--dark-green); /*The blinking line*/
    border: none;
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(-(var(--adjustedFontSize24px))); /*Just solve a bug*/
    max-height: 180px;
    resize: none;
}

.message-floating-label-input {

    margin-bottom: 0;
}

/*
    For errors
*/
input:invalid {

    box-shadow: none;
}

.floating-label-input input:invalid + .floating-label-input {

    border: 2px var(--rose-madder) solid;
}

.error-input {

    border: 2px var(--rose-madder) solid;
}


/*
    For call to actions
*/
/* .buttons:hover {

    cursor: pointer;
} */

.ctas {

    text-decoration: none;
}

.filled-cta {

    display: inline-block;
    border: 0;
    margin: 0;
    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
    background-color: var(--rose-madder);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--adjusted12px);
}


/*
    Text input areas and buttons. Remove the outlines created by Edge, IE, and Chrome
*/

a {

    text-decoration: none;
}

a:active, a:focus {

    background-color: none;
}

/* a:active, a:visited {

    color: transparent;
    background-color: transparent;
} */

/* Allow clicks on a element to work well, if it has children*/
/* Therefore, will only accept if click-override=true */
a *:not([click-override=true]){

    pointer-events: none;
}

input, textarea, select, button {

    background-color: transparent;
    border: none;
}

input:focus, textarea:focus, select:focus, button:focus {

    outline: none;
}

textarea {

    resize: none;
}

button:hover {

    cursor: pointer;
}

/*Autocomplete highlight issues*/
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {

    -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,0) inset;
    /* box-shadow: 0 0 0 30px rgba(0,0,0,0) inset !important; */

    /* -webkit-box-shadow: 0 0 0px 1000px #000 inset; */
    transition: background-color 5000s ease-in-out 0s;

    /*-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    /* -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both; */
}

/*Hiding arrow number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* @-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
} */

/*To universally deal with scrollbars*/
.no-scrollbars {

    scrollbar-width: none; /*Firefox*/
    -ms-overflow-style: none; /*IE and Edge*/
}

.no-scrollbars::-webkit-scrollbar { /*Chrome and new Edge too*/

    display: none;
}

/*
    CUSTOM RADIO BUTTONS
*/

.radio-container {

    display: block;
    position: relative;
    padding-left: var(--adjustedFontSize48px);
    margin-bottom: var(--adjustedFontSize32px);
    cursor: pointer;
    -webkit-user-select: none; /*Text not selectable*/
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*Hide the browser's default radio button*/
.radio-container input {

    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/*Now, our custom radio button*/
.radio-icon {

    position: absolute;
    top: 50%; /*Was 0px - 1.5px*/
    left: 0;
    height: var(--adjustedFontSize20px);
    width: var(--adjustedFontSize20px);
    border: 2px var(--dark-blond) solid;
    /* background-color: var(--dark-blond); */
    border-radius: 50%;
    margin-top: calc(var(--adjustedFontSize24px)*(-1/2 - 1/10)); /*Try calc(var(--adjustedFontSize24px)*(-1/2 - 0.096))*/
}

/*On mouse hover, animate change*/
.radio-container:hover input ~ .radio-icon {

    /* border: 3.2px var(--dark-blond) solid; */
    background-color: var(--dark-blond-form-hover);
}

/*When the radio button is checked, change the icon*/
.radio-container input:checked ~ .radio-icon {

    border-color: var(--rose-madder);
}

.radio-container input:checked ~ .category-label { /*PENDING*/

    font-weight: var(--nunito-bold);
}

/*Create the indicator (dot circle). It's hidden when not checked*/
.radio-icon:after {

    content: "";
    position: absolute;
    display: none;
}

/*Show the indicator, when checked*/
.radio-container input:checked ~ .radio-icon::after {

    display: block;
}

/*Style the indicator (dot/circle)*/
.radio-container .radio-icon::after {

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--rose-madder);
    transform: scale(0.72);
}

/*
Paragraph with custom bullets
*/
.bulleted-p {

    position: relative;
    margin-top: var(--adjustedFontSize32px);
    padding-left: var(--adjustedFontSize32px);
}

.bulleted-p svg {

    position: absolute;
    top: calc(var(--adjusted12px)*0.76);
    left: 0;
    width: var(--adjusted12px);
}


/**
Loading spinner
*/
/*Awesome classes*/
.lds-roller {

    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-roller div {

    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {

    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {

    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {

    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {

    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {

    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {

    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {

    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {

    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {

    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {

    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {

    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {

    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {

    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {

    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {

    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {

    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {

    top: 56px;
    left: 12px;
}

@keyframes lds-roller {
    
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*
    For images loading anim
*/
.no-src-loader[loading-state=loading] {

    background-color: #ccc;
    animation-name: animateSrc !important;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
    background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    -webkit-background-size: 800px 104px;
    background-size: 800px 400px;
}

.no-src-loader[loading-state=loaded] {

    animation-name: none;
}

@keyframes animateSrc {

    0% {

        background-position: -100% 0;
    }

    100% {

        background-position: 100% 0;
    }
}

.new-src-loader[new-src=loading] {

    animation-name: animateNewSrc !important;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;
}

.new-src-loader[new-src=loaded] {

    animation-name: none;
}

@keyframes animateNewSrc {

    0% {

        opacity: 64%;
    }

    50% {

        opacity: 100%;
    }

    100% {

        opacity: 64%;
    }
}

/* LAZY LOADER WITH IMAGE AND CONTENT UI */

.lazy-loader-img-with-content-wrapper > div {

    margin-bottom: var(--adjusted138px);
}

.lazy-loader-img-with-content {

    display: grid;
    grid-template-columns: 15.9099% auto; /*0.1892fr 1fr*/
    grid-template-rows: 1fr;
    grid-template-areas: "image_filler   content_filler";
    transform-origin: left top;

    transition: transform 0.16s ease-out, opacity 0.16s ease-out;
}

.lazy-loader-img-with-content[lazy-state=initial] {

    transform: translate(var(--llTx), var(--llTy)) scale(0.4);
    opacity: 0;
}

.lazy-loader-img-with-content[lazy-state=loading] {

    transform: translate(0, 0) scale(1);
    opacity: 1;
}

.lazy-loader-img-with-content:nth-child(1){

    --llTx: -8%;
    --llTy: -16%
}

.lazy-loader-img-with-content:nth-child(2){

    --llTx: -12%;
    --llTy: -24%
}

.lazy-loader-img-with-content:nth-child(3){

    --llTx: -16%;
    --llTy: -32%
}

.lazy-loader-img-with-content > div:nth-child(1) {

    grid-area: image_filler;
    position: relative;
    width: 100%;
    height: max-content;
    padding-top: 100%;
    border-radius: var(--adjustedFontSize32px);
    overflow: hidden;
}

.lazy-loader-img-with-content > div:nth-child(1) > lazy-loader-ui {

    position: absolute;
    top: 0;
    left: 0;
}

.lazy-loader-img-with-content > div:nth-child(2) {

    grid-area: content_filler;
    padding: var(--adjustedFontSize24px) var(--adjusted88px);
    width: 100%;
}

.lazy-loader-img-with-content > div:nth-child(2) > div {

    height: var(--adjustedFontSize24px);
    border-radius: var(--adjusted184px);
    overflow: hidden;
}

.lazy-loader-img-with-content > div:nth-child(2) > div:nth-child(1) {

    width: calc(var(--adjusted184px)*4);
}

.lazy-loader-img-with-content > div:nth-child(2) > div:nth-child(2) {

    width: calc(var(--adjusted184px)*1);
    margin-top: var(--adjustedFontSize48px);
}

.lazy-loader-img-only {

    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.lazy-loader-img-only[lazy-state=initial] {

    transform: translateY(16%);
    opacity: 0;
}

.lazy-loader-img-only[lazy-state=loading] {

    transform: translateY(0);
    opacity: 1;
}

.lazy-loader-list-only-wrapper > div:not(:last-of-type) {

    margin-bottom: var(--adjusted88px);
}

.lazy-loader-list-only-wrapper > div > lazy-loader-ui {

    display: block;
}

.lazy-loader-list-only-wrapper > div > lazy-loader-ui:nth-of-type(2) {

    margin-top: var(--adjustedFontSize24px);
}

.slide-item {

    transition: transform 0.32s ease-out, opacity 0.32s ease-out;
}

.slide-item[slide-state=down] {

    transform: translateY(16%);
    opacity: 0;
}

.slide-item[slide-state=up] {

    transform: translateY(0);
    opacity: 1;
}

.checkbox-container {

    --iconSqHeight: var(--adjustedFontSize32px);
    --iconHoverColor: rgba(218, 44, 56, .56);
    --iconCheckedColor: var(--rose-madder);
    --tickColor: white;
    display: block;
    position: relative;
    padding: 4px 0 2px 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-container > input {

    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-icon {

    display: inline-block;
    position: absolute;
    top: 2px;
    left: 0;
    height: var(--iconSqHeight);
    width: var(--iconSqHeight);
    border: 2px var(--iconCheckedColor) solid;
    border-radius: calc(var(--adjusted12px)/2);
}

.checkbox-label {

    padding-left: var(--iconSqHeight);
    margin-left: var(--adjustedFontSize24px);
}

.checkbox-container:hover input ~ .checkbox-icon {

    background-color: var(--iconHoverColor);
}

.checkbox-container input:checked ~ .checkbox-icon {

    background-color: var(--iconCheckedColor);
}

.checkbox-icon::after {

    content: "";
    display: none;
    position: relative;
    width: calc(var(--iconSqHeight)*0.72/2);
    height: calc(var(--iconSqHeight)*0.72);
    border: solid var(--tickColor);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: auto;
}

.checkbox-container input:checked ~ .checkbox-icon::after {

    display: block;
}

.btn-submit-contacts {

    position: relative;
}

.btn-submit-contacts > .lds-roller {

    position: absolute;
    right: -44%;
    top: -44%;
    transform: scale(0.48);
    opacity: 0;

    transition: opacity 0.2s ease-out;
}

.btn-submit-contacts > .lds-roller div::after {

    background-color: var(--rose-madder);
    height: var(--adjusted12px);
    width: var(--adjusted12px);
}

.btn-submit-contacts[loading-state=loading] > .lds-roller {

    opacity: 1;
}

.tooltip {

    position: absolute;
    top: 50%;
    background-color: transparent;
    border-radius: var(--bRadius);
    width: max-content;
    border: calc((var(--adjustedFontSize24px)*var(--tipMult)) + var(--leftSpacing)) solid transparent;
    opacity: 0;
    display: none;
    animation: none;

    --tipMult: 1; /*Set to 0 to hide tool tip completely*/
}

.tooltip:hover, .tooltip:focus, .tooltip:focus-within {

    display: block;
    animation: fadeInToolTip 0.4s ease-out 0.2s;
    animation-fill-mode: forwards;
}

.tooltip > * {

    display: block;
    background-color: var(--bgColor) !important;
}

.tooltip > :first-child {

    border-radius: var(--bRadius) var(--bRadius) 0 0;
}

.tooltip > :last-child {

    border-radius: 0 0 var(--bRadius) var(--bRadius);
}

.tooltip, .tooltip::before, .tooltip::after {

    box-sizing: border-box;
}

.tooltip[data-position=left] {

    --leftSpacing: 0px;
    left: 0; /*calc(-1*(var(--leftSpacing) + calc(var(--adjustedFontSize24px)*var(--tipMult))))*/
    right: 0;
    transform: translate(-100%, -50%);
}

.tooltip[data-position=left]::before {

    content: "";
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    width: calc(var(--adjustedFontSize24px)*var(--tipMult));
    height: calc(var(--adjustedFontSize24px)*var(--tipMult));
    border-top: calc(var(--adjustedFontSize24px)*var(--tipMult)/2) solid transparent;
    border-bottom: calc(var(--adjustedFontSize24px)*var(--tipMult)/2) solid transparent;
    border-left: calc(var(--adjustedFontSize24px)*var(--tipMult)) solid var(--bgColor);
}

@keyframes fadeInToolTip {
    
    0% {

        opacity: 0;
    }

    100% {

        opacity: 1;
    }
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/

/*Importing the css we're making the responsive code for*/

/*Worked with cascading, decremental order. Weird. I think cause of variables*/

/*
    Large desktops - new devices with 1920 * 1080 resolution

    Using min-width to target 1800px and above, for now
*/
@media screen and (min-width: 1800px){


    :root {

        /*
            Adjusted values
        */
        --adjusted184px: 180px;
        --adjusted156px: 152px;
        --adjusted138px: 134px;
        --adjusted88px: 84px;
        --adjusted80px: 76px;
        --adjusted64px: 60px;
        --adjusted56px: 52px; 
        --adjusted40px: 36px;
        --adjusted16px: 12px;
        --adjusted12px: 8px;
        --adjustedFontSize104px: 100px;
        --adjustedFontSize48px: 44px;
        --adjustedFontSize32px: 28px;
        --adjustedFontSize24px: 20px;

        /*
            Added for blog
        */
        --adjustedFontSize20px: 16px;
        --adjustedFontSize18px: 14px;
    }

    /*
        For floating label
    */

    .floating-input {
    
        transform: translateY(40%); /*Just solve a bug*/
    }

    .floating-input:placeholder-shown + .floating-label::before {

        /* transform: translate3d(0, -2.2rem, 0) scale3d(1, 1, 1); */
        transform: translate3d(0, -32px, 0) scale3d(1, 1, 1); /*Label size and pos before. Now after*/
    }

    .floating-label::before, .floating-input:focus + .floating-label::before {

        /* transform: translate3d(0, -3.12rem, 0) scale3d(0.82, 0.82, 1); */
        transform: translate3d(0, -42px, 0) scale3d(0.72, 0.72, 1);
    }

    .floating-message-label {

        font-size: 18px;
    }

    .message-input {

        transform: translateY(-(var(--adjustedFontSize24px))); /*Just solve a bug*/
        max-height: 360px;
    }
}

/* Tab - Landscape */
@media screen and (max-width: 1280px){

    /*
        Variables same for tab portrait
    */

    :root{
    
        /*
            Padding and margins - site wise
        */
        --site-margin: 0;
        --site-padding: 2.917%;
    
        /*
            Adjusted values
        */
        --adjusted184px: 104px; /*SAW*/
        --adjusted156px: 80px; /*DONE*/
        --adjusted138px: 58px; /*DONE*/
        --adjusted88px: 52px; /*DONE*/
        --adjusted80px: 48px; /*DONE*/
        --adjusted64px: 24px; /*DONE*/
        --adjusted56px: 32px; /*SAW - same as web*/
        --adjusted40px: 22px; /*DONE*/
        --adjusted16px: 10px; /*DONE*/
        --adjusted12px: 8px;
        --adjustedFontSize104px: 50px; /*DONE*/
        --adjustedFontSize48px: 28px; /*DONE*/
        --adjustedFontSize32px: 19px; /*DONE - was 20px*/
        --adjustedFontSize24px: 15px;

        /*
            Added for blog
        */
        --adjustedFontSize20px: 13px;
        --adjustedFontSize18px: 11px;
    }
}

/*Tab - portrait*/
@media screen and (max-width: 900px){


    .lazy-loader-img-with-content > div:nth-child(1) {

        border-radius: var(--adjustedFontSize20px);
    }

    .lazy-loader-img-with-content > div:nth-child(1) > lazy-loader-ui {

        --br: 0 !important;
    }
}


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

    /*
        Variables
    */
    :root{

        /*
            Padding and margins - site wise
        */
        --site-margin: 0;
        --site-padding: 4.217% /*2.917%*/;

        /*
            Adjusted values
        */
        --adjusted184px: 96px; /*Original*/
        --adjusted156px: 80px; /*Original*/
        --adjusted138px: 40px; /*Original*/
        --adjusted88px: 56px; /*Original. Not changed from Web*/
        --adjusted80px: 40px; /*Original*/
        --adjusted64px: 40px; /**/
        --adjusted56px: 28px; /*28px in design*/ 
        --adjusted40px: 20px; /*Was 24px - Original. Not changed from web*/
        --adjusted16px: 8px; /*Original*/
        --adjusted12px: 6px; /*Original*/
        --adjustedFontSize104px: 34px; /*Original*/
        --adjustedFontSize48px: 24px; /*Original*/
        --adjustedFontSize32px: 16px; /*16px in mobile design*/
        --adjustedFontSize24px: 14px; /*Original*/

         /*
            Added for blog
        */
        --adjustedFontSize20px: 12px;
        --adjustedFontSize18px: 10px;
    }

    /*
        Lazy loader
    */
    .lazy-loader-img-with-content > div:nth-child(2) {

        padding: var(--adjusted12px) var(--adjusted40px);
    }

    .lazy-loader-img-with-content > div:nth-child(2) > div:nth-child(1) {

        width: calc(var(--adjusted184px)*2.4);
    }

    .lazy-loader-img-with-content > div:nth-child(2) > div {

        height: var(--adjustedFontSize20px);
    }

    .lazy-loader-img-with-content > div:nth-child(2) > div:nth-child(2) {

        margin-top: var(--adjustedFontSize24px);
    }
}
.error-ui-wrapper {

    position: relative;
    margin-top: var(--adjusted156px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

div[panel-type=hamburger] {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.hamburger-panel-main-wrapper {

    position: absolute;
    top: 0;
    right: var(--site-margin);
    width: 40.21%;
    height: 100%;
    overflow: hidden;
}

.hamburger-panel-main-content-wrapper {

    position: relative;
    background-color: var(--hpBG);
    box-shadow: -8px 3px var(--adjusted64px) rgba(0, 0, 0, .16);
    height: 100%;
    margin-left: var(--adjusted80px);
    /* translate: 110% 0; */
    /* transform: translate(var(--hpTX), var(--hpTY)); */

    --hpBG: white;
    --hpTX: 0%;
    --hpTY: 0%;
}

/**
* NEW CSS LOGIC
* Affected var changes depending on media query
*/

.hamburger-panel-main-content-wrapper[transition_attr_toggle="1"]{

    animation: TranslateHamburgerOpen 0.4s ease-out;
    animation-fill-mode: both;
}

.hamburger-panel-main-content-wrapper[transition_attr_toggle="0"]{

    animation: TranslateHamburgerClose 0.4s ease-out;
    animation-fill-mode: both;
}

@keyframes TranslateHamburgerOpen{

    0% {

        translate: 110% 0%
    }

    100% {

        translate: 0% 0%
    }
}

@keyframes TranslateHamburgerClose {
    
    0% {

        translate: var(--hpTX) 0%
    }

    100% {

        translate: 110% 0%
    }
}

.hamburger-panel-main-content-wrapper::before{

    content: "";
    position: absolute;
    height: calc(var(--adjustedFontSize104px) + var(--adjustedFontSize24px));
    width: var(--adjusted12px);
    background-color: #E9E9E9;
    border-radius: var(--adjusted64px);
    top: 50%;
    transform: translateY(-50%);
    left: var(--adjusted16px);
}

.hamburger-panel-content-wrapper {

    height: calc(100% - var(--adjusted80px));
    padding: 0 var(--adjusted88px) var(--adjusted80px) var(--adjusted88px);
    overflow-y: auto;
    overflow-x: hidden;
}

.hamburger-panel-title-bar {

    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background-color: white;
    padding-top: var(--adjusted80px);
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-rows: 2fr;
    grid-template-areas: 
            "title      close_btn"
            "subtitle   blank_";
    z-index: 2;
}

.hamburger-panel-title{

    grid-area: title;
    font-size: var(--adjusted40px);
}

.hamburger-panel-title-bar button {

    grid-area: close_btn;
}

.hamburger-panel-title-bar button > span:first-child {

    height: var(--adjusted64px);
    width: var(--adjusted64px);
    transform: translate(16%,0);
}

.hamburger-panel-title-bar button:hover > span:first-child {

    background-color: var(--dark-green);
}

.hamburger-panel-title-bar button > span:first-child > svg {

    height: var(--adjustedFontSize48px);
    width: var(--adjustedFontSize48px);
}

.hamburger-panel-title-bar button > span:first-child > svg path {

    fill: #2A2727;
}

.hamburger-panel-title-bar button:hover > span:first-child > svg path {

    fill: white;
}

.hamburger-panel-subtitle {

    grid-area: subtitle;
    margin-top: var(--adjustedFontSize24px);
}
#hamburger-panel-content-wrapper[view-state=mobile] {

    display: grid;
    grid-template-columns: calc(100% - var(--adjusted64px) - var(--adjustedFontSize32px)) calc(var(--adjusted64px) + var(--adjustedFontSize32px));
    grid-template-rows: 1fr;
    grid-template-areas: "mobile_   close_";
}

#h-panel-mobile-contents-container {

    grid-area: mobile_;
}

#h-panel-ctas-container {

    grid-area: close_;
    margin-top: var(--adjusted80px);
}

#h-panel-mobile-contents-container > #hamburger-panel-title-bar {

    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr;
    grid-template-areas: 
            "title"
            "subtitle";
}

#h-panel-ctas-container button {

    position: sticky;
    position: -webkit-sticky;
    top: var(--adjusted80px);
    margin-left: var(--adjustedFontSize32px);
}

#h-panel-ctas-container > div {

    height: 100%;
}

#h-panel-ctas-container button > span:first-child {

    height: var(--adjusted64px);
    width: var(--adjusted64px);
    transform: translate(16%,0);
}

#h-panel-ctas-container button:hover > span:first-child {

    background-color: var(--dark-green);
}

#h-panel-ctas-container button > span:first-child > svg {

    height: var(--adjustedFontSize48px);
    width: var(--adjustedFontSize48px);
}

#h-panel-ctas-container button > span:first-child > svg path {

    fill: #2A2727;
}

#h-panel-ctas-container button:hover > span:first-child > svg path {

    fill: white;
}

/*Large desktops*/
@media screen and (min-width: 1800px) {

    /*NOTHING*/
}

/*Tab - landscape*/
@media screen and (max-width: 1280px) {

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

        #hamburger-panel-main-wrapper {

            width: 48.21%;
        }
    }
}

/*Tab - portrait*/
@media screen and (max-width: 900px){

    #hamburger-panel-main-wrapper {

        width: 64.21%;
    }
}

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

    #hamburger-panel-main-wrapper {

        width: 100%;
    }

    #hamburger-panel-main-content-wrapper {

        margin-left: 0;
        margin-top: var(--adjusted80px);
        height: calc(100% - var(--adjusted80px));
        padding: 0;
    }

    #hamburger-panel-main-content-wrapper::before {

        height: var(--adjusted12px);
        width: calc(var(--adjustedFontSize104px) + var(--adjustedFontSize24px));
        top: var(--adjusted16px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }

    #hamburger-panel-content-wrapper {

        padding: 0 var(--adjusted56px) var(--adjusted80px) var(--adjusted56px);
    }
}
.notifications-popup-wrapper {

    position: fixed;
    display: grid;
    grid-template-columns: max-content auto max-content;
    grid-template-rows: 1fr;
    grid-template-areas: "marker_       content_        action_";
    max-width: 48%;
    right: var(--adjusted138px);
    bottom: var(--adjustedFontSize48px);
    padding: 0;
    border-radius: var(--adjusted16px);
    box-shadow: 10px 10px 30px rgba(0, 0, 0, .1);
    overflow: hidden;

    transform: translateY(0);
    opacity: 1;
    z-index: 160;

    transition: transform 0.4s ease-out, opacity 0.4s ease-out, z-index 0.4s ease-out;
}

.notifications-popup-wrapper[pop-state=showing] {

    transform: translateY(0);
    opacity: 1;
    z-index: 1000;
}

.notifications-popup-wrapper[pop-state=hidden] {

    transform: translateY(64%);
    opacity: 0;
    z-index: -2;
}

.notifications-popup-wrapper[data-state=no_error] {

    background-color: var(--blond);
}

.notifications-popup-wrapper[data-state=error] {

    background-color: var(--rose-madder);
}

#notif-marker-container {

    grid-area: marker_;
    position: relative;
    padding: var(--adjustedFontSize48px) var(--adjustedFontSize48px) var(--adjustedFontSize48px) var(--adjusted40px);
}

#notif-marker-container[data-state=no_error]{

    background: url(/images/notif_marker_bg.d8b81c6455ee8281faef.svg) no-repeat;
    background-size: cover;
    background-position: center right;

    --errFill: var(--white);
}

#notif-marker-container[data-state=error]{

    background: url(/images/notif_marker_bg_white.325b42ddd4672fa640c8.svg) no-repeat;
    background-size: cover;
    background-position: center right;

    --errFill: var(--rose-madder);
}

#notif-marker {

    position: absolute;
    width: var(--adjustedFontSize32px);
    height: var(--adjustedFontSize32px);
    top: 50%;
    left: 50%;
    transform: translate(-64%, -50%);
}

#notif-content-header-wrapper {

    grid-area: content_;
    padding: var(--adjustedFontSize20px) var(--adjusted64px) var(--adjustedFontSize24px) var(--adjustedFontSize24px);
}

#notif-content-header-wrapper > div {

    width: max-content;
}

#notif-content-header-wrapper[data-state=no_error] p {

    color: var(--light-black);
}

#notif-content-header-wrapper[data-state=error] p {

    color: var(--white);
}

#notif-content-header-wrapper .loading-spinner {

    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%) scale(0.48);
}

#notif-content-header-wrapper .loading-spinner[data-state=loaded] {

    opacity: 0;
}

#notif-content-header-wrapper .loading-spinner[data-state=loading] {

    opacity: 1;
}

#notif-content-header-wrapper .loading-spinner .lds-roller div::after {

    background: var(--rose-madder);
}

#notifications-content {
    
    margin-top: var(--adjustedFontSize24px);
}

#notif-action-wrapper {

    grid-area: action_;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto max-content;
    grid-template-areas: 
                    "nothing_"
                    "action_btn";
}

#notif-action-wrapper[data-state=no_action] {

    display: none;
}

#notif-action-wrapper[data-state=action] {

    display: grid;
}

#notif-action-btn {

    grid-area: action_btn;
    padding: var(--adjustedFontSize18px) var(--adjustedFontSize24px);
    color: var(--white);
}

.notifications-popup-wrapper[data-state=no_error] #notif-action-btn {

    background-color: var(--rose-madder);
}

.notifications-popup-wrapper[data-state=error] #notif-action-btn {

    background-color: #D11723;
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/

/*
    Large desktops - new devices with 1920 * 1080 resolution

    Using min-width to target 1800px and above, for now
*/
@media screen and (min-width: 1800px){

    /*NOTHING YET*/
}

/* Tab - Landscape */
@media screen and (max-width: 1280px){

    .notifications-popup-wrapper {

        max-width: 56%;
    }
}

/*Tab - portrait*/
@media screen and (max-width: 900px){

    .notifications-popup-wrapper {

        max-width: 80%;
        right: var(--adjusted88px);
        bottom: var(--adjustedFontSize48px);
    }
}

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

    .notifications-popup-wrapper {

        max-width: 92%;
        right: var(--adjustedFontSize32px);
        bottom: var(--adjustedFontSize48px);
        grid-template-columns: max-content auto;
        grid-template-rows: max-content max-content;
        grid-template-areas: 
                        "marker_       content_"
                        "marker_       action_";
    }

    #notif-marker-container {

        padding: var(--adjustedFontSize48px) calc(var(--adjustedFontSize48px) + var(--adjusted12px)) var(--adjustedFontSize48px) var(--adjusted40px);
    }

    #notif-marker {

        position: absolute;
        width: var(--adjustedFontSize32px);
        height: var(--adjustedFontSize32px);
        top: 50%;
        left: 50%;
        transform: translate(-72%, -50%);
    }

    #notif-action-wrapper {

        grid-template-columns: auto max-content;
        grid-template-rows: 1fr;
    }

    #notif-action-btn {

        grid-area: -2 / -1 / -1 / -2;
        width: max-content;
    }
}
main-fragment {

    display: block;
}
app-root {

    display: block;
}
child-fragment {

    display: block;
}
#about-section-one {

    display: grid;
    grid-template-columns: 1fr 1.2076fr;
    grid-template-rows: 1fr;
    grid-template-areas: "verte_logo        about_intro_text";
    padding-top: var(--adjusted138px);
    padding-left: 0;
}

#about-us-logo {

    grid-area: verte_logo;
    width: 100%;
    position: relative;
}

#about-us-logo > img {

    position: absolute;
    bottom: 0;
}

#about-us-logo > img:first-of-type {

    width: calc(var(--adjusted184px)*3.3);
    margin-left: calc(var(--adjustedFontSize104px) + var(--adjustedFontSize20px));
    z-index: 2;
}

#about-us-logo > img:nth-of-type(2) {

    width: calc(var(--adjusted184px)*5.1);
    opacity: 0.04;
    z-index: 1;
}

#about-us-intro-container {

    grid-area: about_intro_text;
}

.header-with-line {

    font-size: var(--adjustedFontSize32px);
    width: max-content;
    position: relative;
}

.header-with-line::before {

    content: "";
    position: absolute;
    bottom: calc(var(--adjusted12px)*-1);
    left: 0;
    width: var(--adjustedFontSize48px);
    height: calc(var(--adjusted12px)/3);
    background-color: var(--dark-green);
    border-radius: var(--adjusted16px);
}

#about-us-intro-container > p:first-of-type {

    font-size: var(--adjusted40px);
    margin-bottom: var(--adjustedFontSize20px);
}

#about-us-intro-container > p:first-of-type::after {

    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--adjusted138px);
    width: var(--adjusted156px);
    margin-left: 100%;
    background: url(/images/leaves_art.527f870406db48c0469f.png) no-repeat;
    background-size: contain;
}

#about-us-header {

    padding-top: 0;
    margin-bottom: var(--adjustedFontSize20px);
}

#about-us-prelude {

    margin-bottom: var(--adjusted138px);
    color: var(--dark-green);
    font-size: calc(var(--adjustedFontSize24px) + 2);
}

#about-us-intro-container > a {

    margin-top: var(--adjustedFontSize48px);
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0;
    width: max-content;
}

#about-us-intro-container > a > svg {

    margin-right: var(--adjustedFontSize24px);
    height: var(--adjusted40px);
}

#about-us-intro-container > a > svg > rect {

    transform: translate(26%, 44%);

    transition: transform 0.2s ease-out;
}

#about-us-intro-container > a:hover > svg > rect {

    transform: translate(26%, 16%);
}

#about-us-intro-container > a > span {

    color: var(--rose-madder);
}

#about-section-two {

    display: grid;
    grid-template-columns: 1fr 1.2076fr;
    grid-template-rows: 1fr;
    grid-template-areas: "who_we_are_content        who_we_are_image";
    padding-top: var(--adjusted184px);
}

#consultancy-content {

    grid-area: who_we_are_content;
}

#consultancy-content > .header-with-line,
#ecofriendly-products-content > .header-with-line {

    margin-bottom: var(--adjusted88px);
}

#consultancy-image {

    grid-area: who_we_are_image;
    position: relative;
    top: 8%;
    width: 72%;
    object-fit: contain;
    margin-left: calc(var(--adjusted88px)*2 + var(--adjusted64px));
}

#about-section-three {

    display: grid;
    grid-template-columns: 1fr 1.2076fr;
    grid-template-rows: 1fr;
    grid-template-areas: "what_we_do_image        what_we_do_content";
    padding-top: var(--adjusted138px);
}

#ecofriendly-products-image {

    grid-area: what_we_do_image;
    width: calc(var(--adjusted184px)*1.4);
    margin-top: var(--adjustedFontSize18px);
    margin-left: var(--adjusted138px);
    object-fit: contain;
}

#ecofriendly-products-content {

    grid-area: what_we_do_content;
    margin-left: var(--adjusted88px);
}

#about-section-four {

    display: grid;
    grid-template-columns: 1fr 1.2076fr;
    grid-template-rows: 1fr;
    grid-template-areas: "in_summary        nan_";
    padding-top: var(--adjusted184px);
}

#about-summary {

    grid-area: in_summary;
    padding-bottom: calc(var(--adjusted156px)*2);
}


#summary-list {

    margin-top: var(--adjusted88px);
    list-style: none;
    padding: 0;
}

#summary-list > li {

    margin-bottom: var(--adjustedFontSize32px);
    background: url(/images/what_we_do_list_icon.4e4aea9b1345aae6cfa4.svg) no-repeat;
    background-size: var(--adjustedFontSize32px);
    background-position: 0 calc(var(--adjusted12px)*0.56);
    padding-left: calc(var(--adjustedFontSize32px) + var(--adjusted16px));
    padding-top: calc(var(--adjusted16px) - var(--adjusted12px));
    padding-bottom: var(--adjusted16px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/


/*
    import about.css file
*/


/*Large desktops*/
@media screen and (min-width: 1800px){

    #about-us-header {

        font-size: calc(var(--adjustedFontSize104px) - var(--adjusted12px)/6);
    }
}


/* Tab - Landscape */
@media screen and (max-width: 1280px){

    #about-us-header {

        font-size: calc(var(--adjustedFontSize104px) + var(--adjusted12px)/1.6);
    }
}


/*Tab - portrait*/
@media screen and (max-width: 900px){

    #about-section-one {

        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content;
        grid-template-areas: 
                        "about_intro_text"
                        "verte_logo";
        padding-top: var(--adjusted156px);
        padding-left: var(--site-padding);
    }

    #about-us-logo > img {

        right: 0;
    }

    #about-us-logo > img:first-of-type {

        width: calc(var(--adjusted184px)*1.6);
    }

    #about-us-logo > img:nth-of-type(2) {

        opacity: 0.03;
    }

    #about-us-intro-container > p:last-of-type {

        width: 64%;
    }

    #about-section-two {

        grid-template-columns: 1fr 0.64fr;
    }

    #consultancy-image {

        width: 180%;
        margin-left: 0;
    }

    #about-section-three {

        grid-template-columns: 1fr 0.64fr;
        grid-template-areas: "what_we_do_content        what_we_do_image";
        padding-top: var(--adjusted184px);
    }

    #ecofriendly-products-content {

        margin-left: 0;
    }

    #about-section-four {

        grid-template-columns: 1fr 0.4076fr;
    }
}


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

    #about-us-header {

        font-size: calc(var(--adjustedFontSize104px) - var(--adjusted12px)/6);
    }

    #about-us-logo {

        width: 100%;
    }

    #about-us-logo > img:first-of-type {

        width: calc(var(--adjusted184px)*1.24);
    }

    #about-section-two {

        grid-template-columns: 1fr 0.5fr;
    }

    #consultancy-image {

        width: 320%;
        top: 32%;
    }

    #about-section-three {

        grid-template-columns: 1fr 0.32fr;
    }

    #ecofriendly-products-image {

        position: absolute;
        top: 16%;
        margin-left: var(--adjusted12px);
        width: 100%;
    }

    #about-section-four {

        grid-template-columns: 1fr;
    }
}
#about-us-logo > .loading-ui-img {

    height: calc(var(--adjusted184px)*3.3);
    border-radius: calc(var(--adjusted184px)*4);
}

#about-section-one > .stacked-loading-texts {

    margin-top: var(--adjusted156px);
}
/*Tab*/
@media screen and (max-width: 900px){

    #about-us-logo > .loading-ui-img {

        height: calc(var(--adjusted184px)*1.6);
        margin-top: var(--adjusted64px);
        margin-left: 0 !important;
    }
}

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

    #about-us-logo > .loading-ui-img {

        height: calc(var(--adjusted184px)*1.24);
        margin-top: var(--adjusted64px);
        margin-left: 0 !important;
    }
}
/*
    Import blog css file - we have some common designs. Has access to global too
*/
/* @import "../../client/client-app-index/styles/global_responsive.css"; */

#blog-article-container {

    padding: 0;
}

#blog-article-meta-container {

    display: grid;
    grid-template-columns: 1fr 8.2437fr 5.9496fr;
    grid-template-rows: 1fr;
}

#blog-article-image-container {

    grid-area: 1 / 1 / 3 / 4;
    width: 100%;
    padding-bottom: 40%;
}

#blog-article-image-container > p {

    position: absolute;
    bottom: 0;
    right: 0;
    translate: 0 100%;
    padding: var(--adjusted12px);
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 0 0 0 var(--adjustedFontSize18px);
    font-size: var(--adjustedFontSize18px);
    max-width: var(--adjusted184px);
}

#blog-article-metadata {

    /* grid-area: 2 / 2 / 4 / 3; */
    grid-column: 2 / 3;
    position: relative;
    top: calc(var(--adjusted138px)*-1);
    height: max-content;
    /* width: 68%; */
    /* margin-left: calc(var(--adjusted156px) + var(--adjusted40px)); */
    padding: var(--adjustedFontSize48px) var(--adjustedFontSize48px);
    background-color: rgba(255,255,255, 0.8);
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: var(--adjustedFontSize20px);
}

#blog-article-header {

    font-size: var(--adjustedFontSize48px);
    font-weight: initial;
}

#blog-article-post-date-time {

    margin-top: var(--adjustedFontSize32px);
}

#blog-article-content-container {

    display: grid;
    grid-template-columns: 1fr 10.2fr 3fr 1fr;
    grid-template-areas: "blank     article_content     share_";
}

#blog-article-content {

    grid-area: article_content;
}

#blog-article-content > #blog-article {

    user-select: none;
}

#blog-article-author-container {

    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: calc(var(--adjusted88px) + 8px) max-content;
    height: calc(var(--adjusted88px) + 8px);
}

#blog-author-image {

    grid-area: 1 / 1 / 4 / 3;
    width: var(--adjusted88px);
    height: var(--adjusted88px);
    border: 4px var(--dark-sea-green) solid;
    border-radius: 50%;
}

#blog-author-name {

    grid-area: 2 / 2 / 3 / 3;
    margin-left: var(--adjustedFontSize32px);
    font-weight: var(--nunito-bold);
    color: var(--dark-green);
}

#blog-updated {

    margin-top: var(--adjusted40px);
}

#blog-updated[data-state=updated] {

    position: relative;
    font-size: var(--adjustedFontSize20px);
    color: var(--gray);
    width: max-content;
}

#blog-updated[data-state=updated]::before{

    content: "";
    position: absolute;
    bottom: calc(var(--adjusted12px)*-1);
    height: 15px;
    width: var(--adjusted64px);
    border-bottom: 2px solid rgba(0, 0, 0, 0.24);
}

#blog-article {

    margin-top: var(--adjustedFontSize48px);
}

#blog-article-share-container {

    grid-area: share_;
    display: grid;
    grid-template-rows: max-content auto;
    grid-template-columns: 1fr;
    grid-template-areas: 
                    "share_buttons"
                    "fake";
}

#blog-article-share-buttons {

    grid-area: share_buttons;
    position: sticky;
    position: -webkit-sticky;
    top: calc(var(--adjusted184px) + var(--adjusted16px));
    margin-left: var(--adjusted56px);
    padding: var(--adjustedFontSize20px);
    background-color: #f0f0f4;
    border-radius: var(--adjustedFontSize20px);
}

#fake-area {

    grid-area: fake;
}

#share-buttons {

    margin-top: var(--adjustedFontSize24px);
    display: flex;
    flex-direction: row;
    gap: var(--adjustedFontSize32px);
}

.share-button-holder {

    position: relative;
    height: var(--adjustedFontSize48px);
    width: var(--adjustedFontSize48px);
    background: var(--shareIcon) no-repeat;
    background-size: contain;
    overflow: hidden;

    transition: transform 0.2s ease-out;
}

.share-button-holder:nth-of-type(1) {

    --shareIcon: url(/images/icon_share_twitter.ff178f19dac677411bc2.png);
}

.share-button-holder:nth-of-type(2) {

    --shareIcon: url(/images/icon_share_fb.a32106e5533ca0eb3e70.png);
}

.share-button-holder:nth-of-type(3) {

    --shareIcon: url(/images/icon_share_whatsapp.75092332ce10270f0ff3.png);
}

.share-button-holder > * {

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: scale(1.4) translateY(2%);
    opacity: 0.001; /*Weird bug with the iframes. I'll figure out later*/
    z-index: 2;
}

.share-button-holder:hover, .share-button-holder:focus {

    transform: scale(1.2);
}

#blog-article figure[data-type=yt-iframe] {

    border-radius: var(--adjusted16px);
    width: 100% !important;
    position: relative;
    padding-top: 56.25% !important;
    overflow: hidden;
}

#blog-article figure[data-type=yt-iframe] iframe {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/


/*
    Import blog-article.css file
*/


/*Large desktops*/
@media screen and (min-width: 1800px) {

    /*NOTHING*/
}


/*Tab - landscape*/
@media screen and (max-width: 1280px) {

    .share-button-holder {

        height: var(--adjusted56px);
        width: var(--adjusted56px);
    }

    #blog-author-image {
        
        border: 3px var(--dark-sea-green) solid;
    }
}


/*Tab - portrait*/
@media screen and (max-width: 900px){

    #blog-article-meta-container {

        grid-template-columns: 1fr 13.9fr 1fr;
    }

    #blog-article-image-container > p {

        top: 0;
        bottom: unset;
        translate: 0 0;
    }
}

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

    #blog-article-meta-container {

        grid-template-columns: 1fr 17fr 1fr;
    }

    #blog-article-metadata {

        padding: var(--adjustedFontSize32px) var(--adjustedFontSize24px);
    }
/* 
    #blog-article-header {

        font-size: var(--adjusted40px);
    } */

    #blog-article-content-container {

        
        grid-template-columns: 1fr 17fr 1fr;
        grid-template-areas: 
                        "blank     share_              blan"
                        "blank     article_content     blan";
        /* margin-top: var(--adjustedFontSize32px); */
    }

    #blog-article-content {

        margin-top: var(--adjusted80px);
    }

    #blog-article-author-container {

        height: calc(var(--adjusted80px) + 8px);
        grid-template-columns: calc(var(--adjusted80px) + 8px) max-content;
    }

    #blog-author-image {

        width: var(--adjusted80px);
        height: var(--adjusted80px);
    }

    #blog-author-name {

        margin-left: var(--adjustedFontSize24px);
    }

    #blog-article-share-container {

        grid-area: share_;
        min-width: 50%;
        width: max-content;
    }

    #blog-article-share-buttons {

        position: relative;
        top: 0;
        margin-left: 0;
    }
}
#blog-article-image-container > .loading-ui-img {

    border-radius: 0;
}

#blog-article-metadata > .loading-ui-text:nth-child(2){

    width: 20%;
    height: var(--adjustedFontSize20px);
}

.author-container-loading > .loading-ui-img {

    border: 4px rgba(0,0,0, 0) solid !important;
    /* border: none !important; */
    overflow: hidden;
}

.author-container-loading > .loading-ui-text {

    width: 1000%;
    height: var(--adjustedFontSize20px);
}

#blog-article {

    resize: none;
}

#blog-article p {

    margin-bottom: var(--adjustedFontSize32px);
    margin-top: 0;
    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
    color: var(--light-black);
}

#blog-article h1, #blog-article h2 {

    margin: var(--adjusted56px) 0;
    font-family: var(--font-bree);
    font-weight: var(--nunito-regular);
    font-size: var(--adjusted40px);
    color: var(--dark-green);
}

#blog-article h3 {

    margin: var(--adjusted40px) 0;
    font-family: var(--font-bree);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize32px);
    color: var(--dark-green);
}

#blog-article img {

    display: block !important;
    margin: var(--adjusted40px) 0;
    border-radius: var(--adjusted12px);
    width: 100% !important; /* max-content */
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    line-height: 0;
    font-size: 0;
}

#blog-article img.align-left, #blog-article img[style="float: left;"] {

    float: left;
    max-width: 50% !important;
    margin-right: var(--adjustedFontSize48px);
}

#blog-article img.align-right, #blog-article img[style="float: right;"] {

    float: right;
    max-width: 50% !important;
    margin-left: var(--adjustedFontSize48px);
}

#blog-article img.align-left:first-child, #blog-article img[style="float: left;"]:first-child {

    margin-top: 0;
}

#blog-article img.align-right:first-child, #blog-article img[style="float: right;"]:first-child {

    margin-top: 0;
}

#blog-article figure {

    display: inline-block;
    margin: 0;
    padding: 0 !important;
    height: max-content !important;
    min-height: max-content !important;
    line-height: var(--adjustedFontSize32px);
}

#blog-article figure.image {

    display: inline-block;
    margin: var(--adjusted40px) 0;
    border-radius: var(--adjusted12px);
    background-color: var(--html-background);
    overflow: hidden;
    width: 100% !important;
    height: max-content !important;
}
  
#blog-article figure.align-left {

    float: left;
    max-width: 50% !important;
    margin-right: var(--adjustedFontSize48px);
}
  
#blog-article figure.align-right {

    float: right;
    max-width: 50% !important;
    margin-left: var(--adjustedFontSize48px);
}
  
#blog-article figure.image img {
    
    margin: 0;
    border-radius: 0;
}
  
#blog-article figure.image figcaption {

    margin: var(--adjusted16px) var(--adjusted12px);
    font-size: var(--adjustedFontSize20px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-semi-bold);
    color: var(--light-black);
    text-align: left;
}

#blog-article ul li, #blog-article ol li {

    margin-bottom: var(--adjustedFontSize32px);
    margin-top: 0;
    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
    color: var(--light-black);
}

#blog-article figure[data-type=yt-iframe] {

    border-radius: var(--adjusted16px);
    position: relative;
    margin: var(--adjustedFontSize48px) 0;
}

/*
    Import global css file - have this imported in client-index. Then rest just work from that
*/
/* @import "../../../styles/global_responsive.css"; */


#section-blog-top {

    display: grid;
    grid-template-columns: 1fr 0.1073fr 0.5873fr; /*Was 0.1213fr 1fr 0.1213fr 0.6606fr*/
    grid-template-rows: 1fr;
    /* grid-template-areas: "featured_blog     featured_blog       "; */
    padding: 0 0 0 var(--site-padding);
}

#featured-blog-container {

    grid-column: 1 / 3;
    grid-row: 1 / 2;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.1203fr 1fr 0.1203fr;
}

#latest-stories-container {

    grid-column: 2 / 4;
    grid-row: 1 / 2;
    margin-top: var(--adjusted56px);
    background-color: var(--blond);
    display: grid;
    grid-template-columns: 1fr 5.4746fr;
    grid-template-rows: 1fr;
    grid-template-areas: "blank     latest_stories_list_container";
    height: max-content;
}

#featured-blog-image-container {

    grid-column: 1 / 4;
    /* grid-row: 1 / 3; */
}

#featured-blog-image {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#featured-blog-meta-container {

    grid-column: 2 / 3;
    /* grid-row-start: 2; */
    position: relative;
    /* top: 20%; */
    top: calc(var(--adjusted138px)*-1);
    display: grid;
    grid-template-columns: 1fr 0.2490fr;
    grid-template-areas: 
                    "blog_title        blank"
                    "blog_desc         link_read";
    background-color: rgba(255,255,255, 0.8);
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
    padding: var(--adjustedFontSize48px);
    height: max-content;
}

#featured-marker {

    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc((var(--adjustedFontSize24px) + var(--adjustedFontSize20px) + var(--adjusted12px) + var(--adjusted12px))*-1);
    height: max-content;
    color: white;
    padding: var(--adjusted12px) var(--adjustedFontSize20px);
    background-color: rgba(214,44,56, 0.8);
    border-radius: var(--adjusted12px);
}

#featured-blog-title {

    grid-area: blog_title;
    margin: 0 var(--adjusted88px) 0 0;
    font-family: var(--font-bree);
    font-size: var(--adjustedFontSize32px);
    color: var(--dark-green);
    -webkit-line-clamp: 2;
}

#featured-blog-description {

    grid-area: blog_desc;
    margin: var(--adjustedFontSize32px) var(--adjusted88px) 0 0;
    -webkit-line-clamp: 2;
}

.article-link {

    text-decoration: none;
    font-family: var(--font-nunito);
    font-size: var(--adjustedFontSize20px);
    color: white;
    background-color: var(--rose-madder);
    padding: var(--adjusted16px) var(--adjustedFontSize20px);
    border-radius: calc(var(--adjusted12px)/1.2);

    transition: padding 0.1s ease-out;
}

.article-link:hover, .article-link:focus {

    padding: var(--adjusted16px) var(--adjustedFontSize24px);
}

#featured-article-link {

    grid-area: link_read;
    position: relative;
    color: transparent;
    background-color: transparent;
}

#featured-article-link > .article-link {

    position: absolute;
    right: 0;
    bottom: 0;
    height: max-content;
}

#latest-stories-list-container {

    grid-area: latest_stories_list_container;
    padding: var(--adjusted40px) var(--adjusted64px) var(--adjusted16px) var(--adjusted88px);
}

#verte-talk {

    margin-bottom: calc(var(--adjusted12px)/2);
}

#latest-stories-prelude {

    margin-top: 0;
    font-weight: var(--nunito-regular);
}

#latest-stories-list {

    margin-top: var(--adjusted56px);
    padding: 0;
    list-style-type: none;
}

.latest-stories-item {

    display: grid;
    grid-template-columns: 1fr 5.0244fr;
    grid-template-areas: "story_image       story_content";
    margin-bottom: var(--adjusted40px);
}

.latest-story-image {

    grid-area: story_image;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: var(--adjustedFontSize18px);
    overflow: hidden;
    border: 5px transparent double;
    margin: -5px 0 0 -5px;

    transition: border 0.2s ease-out;
}

.latest-stories-item:hover > .latest-story-image,
.latest-stories-item:focus > .latest-story-image {

    border: 5px #BEBA88 double;
}

.latest-story-image > img {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-story-content {

    grid-area: story_content;
    margin-left: var(--adjustedFontSize24px);
}

.latest-story-content-header {

    font-weight: var(--nunito-bold);
    font-size: var(--adjustedFontSize20px);
    -webkit-line-clamp: 2;
    margin-bottom: 0 !important;
}

.latest-story-content-desc {

    margin-top: var(--adjusted12px);
    font-weight: var(--nunito-regular);
    -webkit-line-clamp: 2;
}

#section-blog-two {

    padding-top: var(--adjusted184px);
}

#search-bar {

    display: grid;
    grid-template-columns: 1fr 0.075fr;
    grid-template-rows: 1fr;
    grid-template-areas: "search_input      search_button";
    width: 540px;
    padding: var(--adjusted12px) var(--adjustedFontSize24px) var(--adjusted12px) var(--adjustedFontSize32px);
    border-radius: var(--adjustedFontSize24px);
    background-color: var(--blond);
}

#search-input {

    grid-area: search_input;
    margin-right: var(--adjustedFontSize32px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-bold);
    font-size: var(--adjustedFontSize24px);
    color: var(--light-black);
}

#search-bar:hover, #search-bar:focus, #search-bar:focus-within {

    background-color: var(--dark-blond);
}

#button-search-blog {

    grid-area: search_button;
    background: url(/images/icon_search.aab31e2c0cecd680f191.svg) no-repeat;
    background-position: center;
    background-size: contain; /*Was var(--adjustedFontSize48px)*/
    margin: var(--adjusted16px) 0;
    /* transform: translateY(4px); */
}

#section-blog-three {

    display: grid;
    grid-template-columns: 1fr 0.093fr 0.3951fr;
    grid-template-areas: "blogs_view      blank       blog_categories";
    padding-top: var(--adjusted138px);
    padding-bottom: calc(var(--adjusted138px)*2);
}

#blog-results {

    grid-area: blogs_view;
}

#blog-results-container {

    margin-top: var(--adjusted88px);
}

.blog-piece {

    display: grid;
    grid-template-columns: 1fr 0.9455fr;
    grid-template-areas: "blog_image        blog_content";
    margin-bottom: var(--adjusted138px);
}

.blog-image-container {

    grid-area: blog_image;
    position: relative;
    width: 100%;
    height: max-content;
    /* padding-bottom: 62.1294%; */
    padding-bottom: 40%;
}

.blog-image-container[variant=featured] {

    grid-area: unset;
    padding-bottom: 40%;
}

.blog-image {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-content {

    grid-area: blog_content;
    padding: var(--adjusted64px) var(--adjusted56px);
    background-color: var(--blond);
}

.blog-header {

    font-family: var(--font-bree);
    font-size: var(--adjusted40px);
    color: var(--dark-green);
    -webkit-line-clamp: 3;
}

.blog-desc {

    -webkit-line-clamp: 3;
}

.blog-meta {

    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize18px);
    color: var(--gray);
    margin-top: var(--adjusted12px);
}

.blog-category {

    /* padding-right: var(--adjusted16px); */
    /* border-right: 2px var(--dark-green) solid; */
    font-weight: var(--nunito-semi-bold);
}

.blog-meta-split {

    display: inline-block;
    width: 2px;
    height: var(--adjustedFontSize20px);
    margin: 0 var(--adjusted16px);
    background-color: rgba(0, 0, 0, .32);
    transform: translateY(calc(var(--adjusted12px)/3.2));
}

.blog-post-time {


}

.blog-article-link {

    margin-top: var(--adjusted88px);
    position: relative;
    z-index: 2;
}

#blog-categories-container {

    grid-area: blog_categories;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto max-content;
    grid-template-areas: 
                    "fake"
                    "sticky_div";
}

#falsified {

    grid-area: fake;
    z-index: -1;
    height: 100%;
}

#blog-categories-list {

    position: sticky;
    position: -webkit-sticky;
    grid-area: sticky_div;
    bottom: var(--adjustedFontSize32px);
    z-index: 3;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: end;
}

#cat-container {

    height: 100%;
    position: relative;
    overflow: hidden;
    padding: var(--adjusted56px) var(--adjustedFontSize32px) var(--adjusted88px) var(--adjustedFontSize32px);
    background-color: #F8F8F8;
    border-radius: var(--adjustedFontSize32px);
}

.blog-categories-list-base {

    max-height: 64vh;
    overflow: hidden;
}

#blog-categories-list-header {

    display: block;
    width: max-content;
}

#blog-categories-filter-icon {

    display: none;
    margin-right: var(--adjustedFontSize24px);
}

#blog-categories-header {

    font-family: var(--font-bree);
}

#blog-categories-header::before {

    content: "Read from our categories ";
}

#blog-categories-list-main-wrapper {

    margin-top: var(--adjusted40px);
    height: 88%;
    overflow-y: auto;
}

#blog-categories-full-list {

    margin-bottom: var(--adjusted64px);
}

#blog-categories-full-list .radio-icon {

    border: 2px #A4A3A3 solid;
}

#blog-categories-full-list .radio-container:hover input ~ .radio-icon {

    background-color: #e2e2e2;
}

#blog-categories-full-list .radio-container input:checked ~ .radio-icon {

    border: 2px var(--rose-madder) solid;
}

#categories-btns-container {

    position: absolute;
    right: var(--adjustedFontSize32px);
    bottom: var(--adjusted64px);
    /* display: flex; */
    display: none;
    flex-direction: column;
    align-items: center;
}
/* 
#categories-btns-container > div {

    position: absolute;
    bottom: 0;
    right: 0;
} */

#button-scroll-down-cat, #button-scroll-down-cat[responsive-state=off], #button-scroll-down-cat[responsive-state=on] {

    position: relative;
    height: var(--adjustedFontSize48px);
    width: var(--adjustedFontSize48px);
    margin-bottom: var(--adjustedFontSize32px);
    background-color: #8F8F8F;
    border-radius: 50%;
    /* box-shadow: 0px 0px 16px rgba(0, 0, 0, .16); */

    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

#button-scroll-down-cat[visibility=visible] {

    transform: rotate(0);
    opacity: 1;
}

#button-scroll-down-cat[visibility=hidden] {

    transform: rotate(180deg);
    opacity: 0;
}

#button-scroll-down-cat > svg {

    width: var(--adjusted16px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -40%);
}

#button-close-categories {

    display: none;
}

#button-close-categories svg {

    position: relative;
    width: var(--adjustedFontSize32px);
}

/* For the loading uis */
.blog-image-container .loading-ui-img {

    border-radius: 0;
}

.blog-piece .stacked-loading-texts {

    background-color: rgba(0, 0, 0, 0.1);
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/


/*
    Import blog.css file
*/


/*Large desktops*/
@media screen and (min-width: 1800px) {

    /*NOTHING*/
}


/*Tab - landscape*/
@media screen and (max-width: 1280px) {

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

        
    }

    #latest-stories-list-container {

        padding: var(--adjusted40px) var(--adjusted64px) var(--adjusted16px) var(--adjusted80px);
    }

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

        #section-blog-three {

            grid-template-columns: 1fr 0.093fr 0.4851fr;
        }
    }

    #blog-categories-list { /*Try using max-width: and overflow-y: scroll;;*/

        bottom: var(--adjustedFontSize32px);
    }
    
    #cat-container {
        
        padding: var(--adjusted56px) var(--adjustedFontSize32px) var(--adjusted64px) var(--adjustedFontSize32px);
    }
}

/*Tab - portrait*/
@media screen and (max-width: 900px){

    #section-blog-top {

        display: grid;
        grid-template-columns: 1fr;
        padding: 0 0;
    }

    #latest-stories-container {

        grid-column: 1 / 2;
        grid-row: 2 / 3;     
        margin-top: var(--adjusted184px);
        border-radius: var(--adjusted16px);
        padding-bottom: var(--adjusted88px);
        grid-template-columns: 0.24fr 5.4746fr 1fr;
        grid-template-areas: "blank     latest_stories_list_container       blan";
        margin-left: var(--site-padding);
        margin-right: var(--site-padding);
    }

    #latest-stories-list {

        margin-top: var(--adjusted80px);
    }

    .latest-stories-item {

        margin-bottom: var(--adjusted56px);
    }

    #section-blog-three {

        grid-template-columns: 100%;
    }

    #blog-results {

        grid-area: 1 / 1 / 2 / 2;
        overflow: hidden;
    }

    #blog-categories-container {

        grid-area: 1 / 1 / 1 / 2;
        width: 40%;
        position: relative;
        right: -60%;
    }

    #blog-categories-list {

        /* Cause sticky is problematic */
        /* position: fixed; */
        /* right: var(--site-padding); */

        bottom: var(--adjustedFontSize32px);
        overflow-y: hidden;
    }

    #cat-container {

        padding: var(--adjusted16px) var(--adjustedFontSize32px);
        /* box-shadow: 10px 10px 30px rgba(0, 0, 0, .1); */
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: calc(var(--adjustedFontSize18px)*2);
        
        transition: padding 0.24s ease-out, 0.24s ease-out;
    }

    .blog-categories-list-base {

        /* height: calc(var(--adjusted40px)); */
        height: max-content;

    }

    /* .blog-categories-list-open {

        height: 456px;
    } */

    #blog-categories-list-main-wrapper {

        max-height: 0;
        max-width: 0;
        margin-top: 0;

        transition: max-height 0.24s ease-out, max-width 0.04s ease-out, margin-top 0.24s ease-out;
    }
    
    /*Categories open close gymnastics*/
    #cat-container:hover,
    #cat-container:focus,
    #cat-container:focus-within {
        
        padding: var(--adjustedFontSize32px) var(--adjustedFontSize32px);
    }


    #cat-container:hover #blog-categories-list-main-wrapper,
    #cat-container:focus #blog-categories-list-main-wrapper,
    #cat-container:focus-within #blog-categories-list-main-wrapper {

        max-height: 45lvh;
        max-width: 100%;
        margin-top: var(--adjusted40px);
    }

    #blog-categories-filter-icon {

        display: inline-block;
    }

    #blog-categories-header::before {

        content: "Categories ";
    }

    #button-scroll-down-cat[responsive-state=off] {

        display: none;
    }

    #button-scroll-down-cat[responsive-state=on] {

        display: block;
    }

    #button-close-categories {

        position: relative;
        display: block;
        width: var(--adjustedFontSize48px);
        height: var(--adjustedFontSize48px);
        background: var(--rose-madder);
        border-radius: 50%;
    }

    .button-close-categories-base {

        transform: rotate(730deg);

        transition: transform 0.6s ease-out;
    }

    .button-close-categories-open {

        transform: rotate(0deg);
    }
}


/*Mobile*/
@media screen and (max-width: 600px){
    
    #featured-blog-container {

        grid-template-columns: 0.032fr 1fr 0.032fr;
    }

    #featured-blog-meta-container {

        grid-template-columns: 1fr max-content;
        grid-template-areas: 
                        "blog_title        blog_title"
                        "blog_desc         blog_desc"
                        "blank             link_read";
        padding-bottom: var(--adjustedFontSize32px);
        border-radius: var(--adjustedFontSize20px);
    }
    
    #featured-blog-title {

        margin: 0;
    }

    #featured-blog-description {

        margin: var(--adjustedFontSize32px) 0 0 0;
    }

    #featured-article-link {

        position: relative;
        margin-top: var(--adjusted56px);
        /*padding: 0 0 0 6px; */
    }

    #latest-stories-container {
   
        margin-top: calc(var(--adjusted64px)*1);
        border-radius: var(--adjusted16px);
        padding-bottom: 0;
        grid-template-columns: 1fr;
        grid-template-areas: "latest_stories_list_container";
    }

    #latest-stories-list-container {

        padding: var(--adjusted40px) var(--adjustedFontSize32px);
    }

    #search-bar {

        width: auto;
        padding-left: var(--adjusted16px);
        border-radius: var(--adjusted16px);
    }

    #search-input > input {

        padding: var(--adjusted16px) var(--adjusted12px);
    }

    #search-input .floating-label::before {

        left: var(--adjustedFontSize18px);
    }

    #blog-results-container {

        margin-top: var(--adjusted64px);
    }

    .blog-piece {

        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content;
        grid-template-areas: 
                            "blog_image"
                            "blog_content";
        border-radius: var(--adjustedFontSize20px);
        overflow: hidden;
    }

    .blog-content {

        padding: var(--adjustedFontSize32px);
        padding-bottom: var(--adjustedFontSize104px);
    }

    .blog-header {

        margin: 0;
    }

    .blog-desc {

        margin-top: var(--adjustedFontSize24px);
    }

    .blog-meta {

        margin-top: var(--adjustedFontSize32px);
    }

    .blog-article-link {

        margin-top: var(--adjustedFontSize48px);
    }

    .article-link {
        
    }

    .blog-article-link {

        margin-top: var(--adjusted56px);
    }

    #blog-categories-container {

        width: 80%;
        right: -20%;
    }

    .blog-categories-list-open {

        height: 408px;
        /* border-radius: var(--adjusted16px); */
    }
}
#featured-blog-image-container > .loading-ui-img {

    border-radius: 0;
}

#featured-blog-container > .loading-ui-img {

    border-radius: 0;
    background-color: gray;
    width: unset;
}

.loading-latest-stories {

    background-color: rgba(0,0,0,.2) !important;
}

.latest-story-image > .loading-ui-img {

    border-radius: var(--adjustedFontSize18px);
}

html {

    scroll-behavior: smooth;
}

#contact-us-section-message {

    display: grid;
    grid-template-columns: 1fr 0.2216fr 1.2216fr;
    /* grid-template-rows: 1fr; */
    grid-template-areas: "message_texts     blank       message_form";
    padding-top: var(--adjusted156px);
}

#message-us-texts-container {

    grid-area: message_texts;
}

#message-us-header {

    padding: 0;
}

#message-us-prelude-text {

    margin-top: var(--adjustedFontSize32px);
    color: var(--dark-green);
}

#message-us-text {

    margin-top: var(--adjusted88px);
}

#quotation-link {

    display: inline-block;
    margin-top: var(--adjusted138px);
    padding-right: var(--adjusted40px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-bold);
    font-size: var(--adjustedFontSize24px);
    color: var(--rose-madder);
    background: url(/images/contact_us_arrow_down.7e66ab350289e179960e.svg) no-repeat;
    background-size: var(--adjusted12px);
    background-position: right;
}

.message-quotation-form-container {

    background-color: var(--blond);
    padding: var(--adjustedFontSize48px) var(--adjustedFontSize48px);
    border-radius: var(--adjusted12px);
}

#message-us-form-container {

    grid-area: message_form;
}

.message-quotation-form {

    margin-top: var(--adjusted64px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-semi-bold);
    font-size: var(--adjustedFontSize24px);
    color: var(--light-black);
}

#message-us-form {

}

.button-submit-client-message {

    margin-top: var(--adjusted64px);
    padding: var(--adjusted16px) var(--adjusted40px);
    border: none;
    border-radius: var(--adjusted12px);
    background-color: var(--rose-madder);
    color: var(--white);
    font-family: var(--font-nunito), sans-serif;
    font-size: var(--adjustedFontSize24px);
}

#get-a-quotation {

    display: grid;
    grid-template-columns: 1fr 0.2216fr 1.2216fr;
    grid-template-areas: "quotation_texts     blank       quotation_form";
    padding-top: var(--adjusted184px);
}

#quotation-texts-container {

    grid-area: quotation_texts;
}

#quotation-text {

    margin-top: var(--adjustedFontSize24px);
}

#quotation-form-container {

    grid-area: quotation_form;
}

#no-forms-wrapper {

    padding-top: var(--adjusted184px);
    padding-bottom: calc(var(--adjusted156px)*2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "links_        img_";
}

#no-forms-texts {

    grid-area: links_;
}

#no-forms-img {

    grid-area: img_;
    width: 80%;
    object-fit: contain;
    margin-left: var(--adjusted88px);
    margin-top: var(--adjusted156px);
}

#no-forms-texts > p:first-of-type {

    margin-bottom: var(--adjustedFontSize20px);
}

#chat-links {

    margin-top: var(--adjustedFontSize104px);
}

#chat-links > a {

    margin-left: calc(var(--adjusted12px)*-1);
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
}

#chat-links > a:not(:first-of-type) {

    margin-top: var(--adjusted64px);
}

#chat-links > a > span {

    position: relative;
}

#chat-links > a > span:first-of-type {

    height: var(--adjusted56px);
    width: var(--adjusted56px);
    border-radius: var(--adjusted64px);
    background-color: transparent;
    margin-right: var(--adjusted12px);
    display: flex;
    flex-direction: column;
    align-items: center;

    transition: background-color 0.2s ease-out;
}

#chat-links > a:first-of-type > span:nth-of-type(2)::before {

    content: "Just slide into the DM";
    font-size: var(--adjustedFontSize20px);
    position: absolute;
    left: 0;
    bottom: calc(var(--adjusted16px)*-1);
    transform: translateY(100%);
}

#chat-links > a:first-of-type {

    padding-bottom: var(--adjusted40px);
}

#chat-links > a:hover > span:first-of-type,
#chat-links > a:focus > span:first-of-type {

    background-color: #e7e7e7;
}

#chat-links > a > span > svg {

    width: var(--adjustedFontSize32px);
    margin: auto;
}

.g-recaptcha {

    margin-top: var(--adjustedFontSize32px);
}

.captcha-text {
    
    display: block;
    color: var(--rose-madder);
    margin-top: var(--adjustedFontSize32px);
}

.captcha-text[data-state=ok]{

    display: none;
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/


/*
    import contact_us.css
*/

/*Large desktops*/
@media screen and (min-width: 1800px){

    /*NOTHING*/
}

/* Tab - Landscape */
@media screen and (max-width: 1280px){

    .message-quotation-form-container {

        padding: var(--adjustedFontSize48px) var(--adjusted40px);
    }
}

/*Tab - portrait*/
@media screen and (max-width: 900px){

    #contact-us-section-message {

        grid-template-columns: 1fr;
        grid-template-areas: 
                        "message_texts"
                        "message_form";
    }

    #message-us-text {

        width: 75%;
    }

    #quotation-link {

        margin-top: var(--adjusted138px);
    }

    .message-quotation-form-container {

        border-radius: var(--adjustedFontSize24px);
    }

    #message-us-form-container {

        margin-top: var(--adjusted156px);
    }

    #get-a-quotation {

        grid-template-columns: 1fr;
        grid-template-areas: 
                        "quotation_texts"
                        "quotation_form";
    }

    #quotation-text {

        width: 75%;
    }

    #quotation-form-container {

        margin-top: var(--adjusted88px);
    }
}

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

    .message-quotation-form-container {

        padding: var(--adjustedFontSize48px) var(--adjustedFontSize32px);
    }
}
.quotation-form-loading {

    background: rgba(0, 0, 0, .2) !important;
}

.quotation-form-loading > .loading-ui-text {

    width: 67%;
}

.quotation-form-loading .floating-label-input {

    position: relative;
    background-color: transparent;
    height: var(--adjusted64px);
}

.quotation-form-loading .floating-label-input .loading-ui-img {

    box-sizing: border-box;
    border-radius: var(--adjusted16px);
}

/*
    Styling specific to index.html
*/

/* @import "../global/global.css"; */ /*For social media icons*/

#section-one {

    padding-right: 0;
    display: grid;
    grid-template-columns: 1fr 0.8584fr;
    grid-template-areas: "hero_text     hero_img";
}

#hero-text-container {

    grid-area: hero_text;
}

#hero-image-container {

    grid-area: hero_img;
    width: 100%;
    height: max-content;
    padding-top: 95.04%;
    position: relative;
}

#hero-image-container > img[loading-state=loading] {

    animation: opacity 3s ease-out infinite;
}

@keyframes opacity {
    
    0% {

        opacity: 1;
    }

    50% {

        opacity: 0.4;
    }

    100% {

        opacity: 1;
    }
}

#mobile-hero-image {

    /* position: relative; */
    float: right;
    opacity: 0;
    height: 0;
    width: 0;
}

#hero-image {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#hero-text-prelude {

    margin-top: var(--adjusted40px);
    width: max-content;
    max-width: 80%;
}

#hero-body-text {

    margin-top: var(--adjusted88px);
    width: 60%;
}

#cta-quote {

    /* display: inline-block; */
    padding: var(--adjusted16px) var(--adjusted56px);
    margin-top: var(--adjusted40px);
    /* background-color: var(--rose-madder); */
    /* border-radius: 8px; */
}

.section-prelude-text {

    margin-top: var(--adjusted40px);
}

#section-two-content-div {

    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.6974fr;
    grid-template-rows: 1fr;
    grid-template-areas: "section_two_image     section_two_content";
    height: auto;
    margin-top: var(--adjusted88px);
}

#section-two-image {

    /* position: relative; */
    grid-area: section_two_image;
    /* top: 0;
    left: 0; */
    width: 100%;
    /* height: 57.22%; */
    object-fit: cover;
}

#section-two-content-inner-div {

    /* position: relative; */
    /* right: 0; */
    grid-area: section_two_content;
    margin-top: var(--adjusted56px);
    margin-left: var(--adjusted138px);
    /* width: 58.64%; */
    /* float: right; */
}

#cta-inquiry {

    padding: var(--adjusted16px) var(--adjusted40px);
    margin-top: var(--adjusted138px);
}

.section-spacing-base {

    padding-top: var(--adjusted184px);
}

.slider-wrapper {

    position: relative;
}

.slider-button {

    position: absolute;
    top: var(--top, 0);
    left: var(--left, 0);
    transform: translate(var(--trX, 0), var(--trY, 0));
    width: var(--w, var(--adjusted64px));
    height: var(--h, var(--adjusted64px));
    background: var(--bgc, var(--white));
    border-radius: var(--br, var(--adjusted156px));
    box-shadow: 4px 10px 30px rgba(0, 0, 0, 0.16);
    z-index: 1;

    transition: opacity 0.2s ease-out;
}

.slider-button[p_dir=right] {

    left: 100%;
}

.slider-button[slide_state=visible] {

    opacity: 1;
    pointer-events: all;
}

.slider-button[slide_state=invisible] {

    opacity: 0;
    pointer-events: none;
}

.slider-button > svg {

    position: relative;
    top: 4%;
    left: var(--svgL, -4%);
    height: var(--svgH, var(--adjustedFontSize24px));
    transform: rotate(var(--svgRot, 0deg));
}

.slider-button > svg[p_dir=right] {

    --svgL: 4%;
    --svgRot: 180deg;
}

.blog-slider-button {

    --top: 50%;
    --trX: -50%;
    --trY: 10%;
}

.review-slider-button {

    --top: calc(var(--adjusted156px) + var(--adjusted56px));
    --trX: -50%;
    --trY: 10%;
}

#shop-holder-wrapper {

    margin-top: var(--adjusted88px);
    padding-bottom: var(--adjustedFontSize32px);
    font-size: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#images-holder {

    display: flex;
    flex-direction: row;
    align-items: center;
}

#images-holder > img {

    border-radius: var(--adjusted16px);
}

#images-holder > img:first-of-type {

    width: calc(var(--adjusted184px)*3.4);
    box-shadow: var(--adjusted12px) 0 var(--adjustedFontSize24px) rgba(5, 50, 37, .64);
    z-index: 2;
}

#images-holder > img:nth-of-type(2) {

    width: calc(var(--adjusted184px)*2.36);
    box-shadow: var(--adjusted12px) 0 var(--adjustedFontSize32px) rgba(0, 0, 0, 0.16);
    margin-left: calc(var(--adjusted16px)*-1);
}

#shop-holder-text {

    margin-left: var(--adjusted138px);
}

#shop-holder-text > p {

    width: calc(var(--adjusted184px)*2.7);
}

#shop-holder-text > p:first-child {

    margin-bottom: var(--adjustedFontSize48px);
}

#shop-holder-text > p:not(:first-child) {

    margin-bottom: var(--adjusted16px);
}

#shop-holder-text > a,
#shop-holder-text > .shop-location-container {

    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--adjusted12px);
    padding: var(--adjusted12px) var(--adjusted16px);
    background-color: var(--rose-madder);
    width: max-content;
}

#shop-holder-text > a:not(:last-child) {

    margin-bottom: var(--adjustedFontSize48px);
}

#shop-holder-text > a > svg,
#shop-holder-text > .shop-location-container > svg {

    height: var(--adjustedFontSize32px);
    margin-right: var(--adjusted40px);
}

#shop-holder-text > a > span {

    color: white;
}

.shop-location-container {

    padding: 0 0 var(--adjustedFontSize24px) 0 !important;
    background-color: transparent !important;
    border-radius: var(--adjusted12px) !important;
    align-items: flex-start !important;
}

#shop-holder-text > .shop-location-container > svg {

    margin-top: 1%;
}

.shop-location-container > div > p:first-child {

    margin-bottom: var(--adjusted16px);
}

.shop-slider-button {

    --top: 50%;
    --trX: -50%;
    --trY: 10%;
}

.normal-slider {

    display: flex; /*Create a horizontal scroll bar*/
    flex-wrap: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    /*Yaani this is how you remove the scrollbar*/
    scrollbar-width: none; /*Firefox*/
    -ms-overflow-style: none; /*IE and Edge*/

    -webkit-overflow-scrolling: touch;
}

.normal-slider::-webkit-scrollbar { /*Chrome*/

    display: none;
}

#client-slider-normal {

    padding: var(--adjusted138px) 0;
}

.client-slider-card {

    /* display: inline-block; */
    display: grid;
    position: relative;
    grid-template-columns: 1fr 4.9839fr; /*Was 3.9839fr*/
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
                    "client_image      client_name"
                    "blank             client_review";
    /* top: 0; */
    width: 440px;
    height: 156px;
    margin-left: var(--adjusted156px);
    background-color: var(--white);
    border-radius: 40px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto; /*It's display is grid, but its a flex item*/
}

#first-client-slider {

    margin-left: var(--adjustedFontSize32px); /*Was adjusted16px*/
}

.client-slider-image {

    /* position: relative; */
    grid-area: client_image;
    width: 72px; /*Was 72px*/
    height: 72px;
    border: 5px solid var(--blond);
    border-radius: 50%;
    object-fit: cover;
}

.client-slider-name {

    /* display: inline-block; */
    /* position: relative; */
    /* float: right; */
    grid-area: client_name;
    /* width: 100%; */
    padding-left: var(--adjustedFontSize24px);
    padding-right: var(--adjustedFontSize32px);
    padding-top: var(--adjustedFontSize32px);
}

.client-slider-review {

    position: relative;
    /* float: right; */
    grid-area: client_review;
    /* width: 100%; */
    top: -32px;
    text-overflow: ellipsis;
    padding-left: var(--adjustedFontSize24px);
    padding-right: var(--adjustedFontSize32px);
    padding-top: 0;
    /* word-wrap: normal; */
    white-space: normal;
    /*Limit num of lines*/
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow-y: hidden;
}

#blog-slider-normal {

    padding: var(--adjusted88px) 0 0 0;
}

.blog-slider-card {

    display: grid;
    grid-template-columns: 1fr 3.0583fr;
    grid-template-rows: 1fr;
    grid-template-areas: "blog_image        blog_content";
    position: relative;
    width: 480px;
    height: 156px;
    margin-left: var(--adjusted88px);
    background-color: var(--blond);
    border-radius: var(--adjustedFontSize24px);
    text-decoration: none;
    flex: 0 0 auto;

    transition: background-color 0.3s ease-out;
}

.blog-slider-card:hover, .blog-slider-card:focus {
    
    background-color: var(--dark-blond);
}

.blog-slider-card:first-of-type {

    margin-left: 0;
}

.loading-blog-slider-card {

    background-color: rgba(0, 0, 0, 0.1) !important;
}

.blog-slider-image {

    grid-area: blog_image;
    height: 156px;
    width: 156px;
    object-fit: cover;
    border-radius: var(--adjustedFontSize24px) 0 0 var(--adjustedFontSize24px);
}

.blog-slider-content {

    grid-area: blog_content;
    margin: var(--adjusted40px) var(--adjustedFontSize32px) 0 var(--adjustedFontSize24px);

    transition: margin-left 0.2s ease-out;
}

.blog-slider-content > p:nth-child(1) {

    --text_lines_limit: 2;
    font-size: var(--adjustedFontSize24px);
}

.blog-slider-content-blogmeta {

    margin: var(--adjusted16px) 0 var(--adjustedFontSize24px) 0;
    --text_lines_limit: 2;
}

.cta-visit-blog-shop {

    padding: var(--adjusted16px) var(--adjustedFontSize48px);
    margin-top: var(--adjusted88px);
}

#shop-slider-normal {

    padding: var(--adjusted88px) 0 0 0;
}

.shop-slider-card {

    /* display: inline-block; */
    display: grid;
    grid-template-columns: 1fr 2.0041fr;
    grid-template-rows: 1fr;
    grid-template-areas: "prod_image        prod_desc";
    position: relative;
    width: 640px;
    height: 380px;
    margin-left: var(--adjusted138px);
    flex: 0 0 auto;
}

.shop-slider-first-card {

    margin-left: var(--adjusted16px);
}

.shop-slider-product-image {

    /* display: inline-block; */
    position: relative;
    height: inherit;
    width: 308px;
    grid-area: prod_image;
    border-radius: var(--adjusted16px);
    object-fit: cover;
}

.shop-slider-content {

    /* display: inline-block; */
    position: relative;
    /* float: right; */
    grid-area: prod_desc;
    /*bottom: var(--adjustedFontSize24px); /*Changed from 0, because of bug*/
    width: 288px;
    /* height: inherit; */
    margin: var(--adjustedFontSize24px) 0 0 var(--adjusted64px);
}

.content-alignment-div {

    position: absolute;
    bottom: 0;
}

.shop-slider-content-header {

    position: relative;
    margin: 0 0 var(--adjustedFontSize24px) 0;
    color: var(--dark-green);
}

.shop-slider-content-price {

    margin: 0 0 var(--adjustedFontSize48px) 0;
    color: var(--rose-madder);
}

.shop-slider-content-description {

    margin: 0 0 var(--adjusted40px) 0;
}

.shop-slider-button-buy-product {

    padding: var(--adjusted16px) var(--adjustedFontSize32px);
    border: none;
    border-radius: var(--adjusted12px);
    background-color: var(--blond);
    color: var(--dark-green);
    font-family: var(--font-nunito), sans-serif;
    font-weight: var(--nunito-bold);
    font-size: var(--adjustedFontSize24px);
}

.shop-slider-button-buy-product:hover {

    cursor: pointer;
}

.contact-form-area {

    display: grid;
    grid-template-columns: 1fr 0.342fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "contact_form      blank       contact_image";
    margin: var(--adjusted88px) 0 0 0;
}

#contact-us-form {

    /* display: inline-block; */
    position: relative;
    grid-area: contact_form;
    /* width: 100%; */
    font-family: var(--font-nunito);
    font-weight: var(--nunito-regular);
    font-size: var(--adjustedFontSize24px);
    padding: var(--adjusted80px) var(--adjustedFontSize32px) var(--adjusted56px) var(--adjustedFontSize32px);
    border-radius: var(--adjusted16px);
    background-color: var(--blond);
}

#contact-us-image {

    position: relative;
    grid-area: contact_image;
    width: 64%;
    transform: translate(16%, 32%);
}

.button-submit-message {

    margin-top: var(--adjusted64px);
    padding: var(--adjusted16px) var(--adjusted40px);
    border: none;
    border-radius: var(--adjusted12px);
    background-color: var(--rose-madder);
    color: var(--white);
    font-family: var(--font-nunito), sans-serif;
    font-size: var(--adjustedFontSize24px);
}

.button-submit-message:hover {

    cursor: pointer;
}

#section-social {

    padding-bottom: var(--adjusted156px);
}

#social-icons-container {

    display: grid;
    grid-gap: var(--adjusted80px);
    grid-template-columns: 1fr 0.8fr 1fr; /*Autofit restricts to same number.., autofill increases number, with weird sizing*/
    height: auto; /*var(--adjusted80px)*/
    margin-top: var(--adjusted88px);
}

.social-link-container {

    display: inline-block;
    position: relative;
    /* height: inherit; */
    transform: translateY(-10px);
}

.social-link-container > a {

    display: inherit;
    /* height: inherit; */
}

.social-link {

    text-decoration: none;
}

.fa {

    padding: var(--adjustedFontSize24px) calc(var(--adjustedFontSize32px) + 1px);
    font-size: var(--adjustedFontSize32px);
    /* text-align: center; */
    border-radius: 50%;
}

.fa-facebook {

    color: var(--white);
    background-color: #4267B2;
}

.social-text {

    display: inline-block;
    height: inherit;
    /* margin-top: calc(var(--adjusted80px)/2); */
    margin-left: var(--adjustedFontSize32px);
    font-family: var(--font-nunito);
    font-size: var(--adjustedFontSize24px);
    color: var(--light-black);
    /* text-align: center; */
 }

.icon-container {

    margin-left: var(--adjusted156px);
}

.fa-twitter {

    padding: calc(var(--adjustedFontSize24px)/1.5) calc(var(--adjustedFontSize24px)/1.3);
    /* transform: translateY(4px); */
    color: var(--white);
    background-color: #1da1f2;
    font-size: var(--adjustedFontSize48px);
}

#twitter-text {

    transform: translateY(-4px);
}

.fa-instagram {

    /* padding: calc(var(--adjusted12px)) calc(var(--adjusted12px) + 4px); */
    padding: 0;
    /* transform: translateY(14px); */
    color: var(--white);
    /* background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); */
    /* font-size: var(--adjusted56px); */
    border-radius: var(--adjusted16px);
}

#insta {

    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    /* Also define standard property for compatibility */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--adjusted88px); /* change this to change the size*/
}

#insta-text {

    transform: translateY(-14px);
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/


/*
    For big desktops
*/
@media screen and (min-width: 1800px){

    
    .client-slider-card {

        width: 600px;
        height: 230px;
        border-radius: 56px;
    }

    .client-slider-image {

        width: 106px;
        height: 106px;
        border: 6px solid var(--blond);
    }

    .client-slider-name {

        width: 424px;
    }

    .client-slider-review {

        width: 424px;
        top: -40px;
    }

    .blog-slider-card {

        width: 730px;
        height: 224px;
    }

    .blog-slider-image {

        height: 224px;
        width: 224px;
    }

    .blog-slider-content {

        width: 456px;
    }

    .shop-slider-card {

        width: 962px; /*-16*/
        height: 608px;
    }

    .shop-slider-product-image {

        width: 470px;
    }

    .shop-slider-content {

        width: 430px;
    }

    #twitter-text {

        transform: translateY(-6px);
    }

    #insta {

        font-size: var(--adjusted80px);
    }

    #insta-text {

        transform: translateY(-20px);
    }
}


/*
    For Tab - landscape
*/
@media screen and (max-width: 1280px){

    #section-one {

        grid-template-columns: 1fr 1fr;
    }

    #hero-body-text {

        width: 72%;
    }

    .slider-button {

        display: none;
    }

    /* KINDLE ISSUE */
    @media screen and (min-width: 1100px){

        #section-two {

            padding-top: 0;
        }
    }
}


/*For Tab - Portrait*/
@media screen and (max-width: 900px){

    #section-one {

        grid-template-columns: 100%;
    }

    #hero-image-container {

        grid-area: 1 / 1 / 2 / 2;
        padding-top: 77.4194%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #hero-image-container > .loading-ui-img {

        right: 0;
        left: unset;
        bottom: 0;
        top: unset;
        width: 20%;
        height: 70%;
    }

    #mobile-hero-image {

        position: absolute;
        right: 0;
        opacity: 1;
        bottom: 0%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom left;
        z-index: 1; /*This was the trick to avoid the snipping ya pleb!*/
    }

    #mobile-hero-image[hero-state=custom] {

        height: 0;
    }

    #hero-image {

        display: none;
        position: absolute; 
        height: 100%;
        width: 24%;
        left: 100%;
        top: 0;
        transform: translateX(-100%);
        object-position: bottom;
    }

    #hero-body-text {
    
        width: 56.31%;
    }

    #hero-text-prelude {

        max-width: 64%;
    }

    #cta-quote {

        position: relative;
        z-index: 1;
    }

    #section-two {

        padding-top: calc(var(--adjusted184px) + var(--adjusted88px));
    }

    .section-prelude-text {

        margin-top: 12px;
    }

    #section-two-image {

        transform: translateY(0);
        width: 100%;
    }

    #shop-holder-wrapper {

        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 0;
    }

    #shop-holder-text {

        margin-left: 0;
        margin-top: var(--adjusted138px);
    }

    #shop-holder-text > p {

        width: calc(var(--adjusted184px)*3.7);
    }

    .contact-form-area {

        grid-template-columns: 1fr  0.5574fr;
        grid-template-areas: "contact_form      blank";
    }

    #contact-us-form {

        width: auto;
    }

    #contact-us-image {

        display: none;
    }

    #social-icons-container {

        grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    }

    .social-link-container {

        display: block;
    }

    .social-text {

        display: inline-block;
     }

    .icon-container {

        margin-left: 0;
        margin-top: var(--adjustedFontSize104px);
    }

    .fa-instagram {

        transform: translateY(0px);
    }

    #insta {

        font-size: 48px;
     }
 
     #insta-text {
 
         transform: translateY(-12px);
     }
}


/*For mobile*/
@media screen and (max-width: 600px){
    
    #landing-hero-text {
    
        position: relative;
        z-index: 2;
    }

    #hero-image-container {

        padding-top: 177.18%;
    }
    
    #hero-body-text {
    
        width: 72%;
    }

    #cta-quote {

        margin-top: 32px;
    }

    #images-holder > img:first-of-type {

        width: calc(var(--adjusted184px)*2.4);
    }

    #images-holder > img:nth-of-type(2) {

        width: calc(var(--adjusted184px)*1.36);
        margin-left: calc(var(--adjusted16px)*-3.2);
    }

    #shop-holder-text > p {

        width: calc(var(--adjusted184px)*2.8);
    }

    #section-two-content-div {

        grid-template-columns: 1fr 0.3537fr;
        grid-template-areas: "section_two_content       section_two_image";
        margin-top: var(--adjusted64px);
    }

    #section-two-content-inner-div {

        margin-top: 8px;
    }

    #section-two-content-inner-div {

        margin-left: 0;
        margin-right: var(--adjustedFontSize24px);
    }

    #section-two-image {

        transform: translateY(50%);
        width: 200%;
    }

    #client-slider-normal {

        padding: 48px 0;
    }

    .client-slider-card {

        grid-template-columns: 1fr 2.75fr;
        grid-template-rows: 1fr 3.0938fr;
        grid-template-areas: 
                    "client_image      client_name"
                    "client_review     client_review";
        width: 240px;
        height: 198px;
        margin-left: 48px;
        border-radius: 16px;
    }

    .client-slider-image {

        width: 56px;
        height: 56px;
        border: 4px solid var(--blond);
    }

    .client-slider-name {

        padding-top: calc(var(--adjusted16px)*3);
    }

    .client-slider-review {

        position: relative;
        top: 0;
        padding-left: var(--adjustedFontSize32px);
        padding-top: var(--adjustedFontSize48px);
    }

    #blog-slider-normal {

        padding: 64px 0 0 0;
    }

    .blog-slider-card {

        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1.8293fr;
        grid-template-areas: 
                    "blog_image"
                    "blog_content";
        width: 256px;
        height: 300px;
        margin-left: var(--adjustedFontSize48px);
        border-radius: var(--adjusted16px);
        text-decoration: none;
    }

    .blog-slider-first-card {

        margin-left: 0;
    }

    .blog-slider-image {

        display: block;
        height: 164px;
        width: 256px;
        border-radius: var(--adjusted16px) var(--adjusted16px) 0 0;
    }

    .blog-slider-content {

        margin: var(--adjustedFontSize32px) var(--adjustedFontSize32px) var(--adjusted16px) var(--adjustedFontSize32px);
    }

    .cta-visit-blog-shop {

        padding: var(--adjusted16px) var(--adjusted40px);
        margin-top: 40px;
    }

    .shop-slider-card {

        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2.1953fr;
        grid-template-areas: 
                    "prod_image"
                    "prod_desc";
        width: 256px;
        height: 572px;
    }

    .shop-slider-first-card {

        margin-left: 0;
    }

    .shop-slider-product-image {

        display: block;
        height: 256px;
        width: 256px;
        border-radius: var(--adjusted16px) var(--adjusted16px) 0 0;
    }

    .shop-slider-content {

        width: 256px;
        margin: var(--adjustedFontSize48px) 0 0 0;
    }

    .content-alignment-div {

        top: 0;
        height: inherit;
    }

    .shop-slider-content-price {

        margin: 0 0 var(--adjusted64px) 0;
    }

    .shop-slider-content-description { 

        max-height: 116px;
        overflow-y: hidden;
        text-overflow: ellipsis;
    }
    
    .shop-slider-button-buy-product {
    
        position: absolute;
        bottom: 0;
    }

    .contact-form-area {

        grid-template-columns: 1fr;
        grid-template-areas: "contact_form";
    }

    #contact-us-form {

        width: auto;
        padding: var(--adjusted80px) var(--adjustedFontSize32px) var(--adjustedFontSize32px) var(--adjustedFontSize32px);
        border-radius: var(--adjustedFontSize32px);
    }
}

.loading-ui-img{

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0,0,0,.2); /*html-background*/
    border-radius: var(--adjustedFontSize32px) 0 0 var(--adjustedFontSize32px);
}

.loading-ui::after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border-radius: var(--adjustedFontSize32px) 0 0 var(--adjustedFontSize32px);
  background-image: linear-gradient(#DDD 100%, transparent 0),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
   /* linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%)
   linear-gradient(#DDD 100px, transparent 0),
   linear-gradient(#DDD 16px, transparent 0),
   linear-gradient(#DDD 50px, transparent 0); */
  background-repeat: no-repeat;
  background-size: 10% 100%;
  background-position: -100% 0;
  box-sizing: border-box;
  animation: animloader 1s linear infinite;
}

@keyframes animloader {
  to {
    background-position: 100% 0;
  }
}

.loading-ui-text {

    position: relative;
    display: block;
    height: var(--adjustedFontSize24px);
    background: rgba(0,0,0,.2); /*html-background*/
    border-radius: var(--adjusted64px);
}

.home-hero-text {

    margin: var(--adjusted156px) var(--adjusted64px) 0 0;
}

.override-loading {

    width: 67% !important;
    margin-top: var(--adjustedFontSize104px) !important;
}

.override-stack-home {

    margin-top: var(--adjustedFontSize104px) !important;
}

.stacked-loading-texts > .loading-ui-text:not(:first-child) {

    margin-top: var(--adjustedFontSize24px);
}

.stacked-loading-texts > .loading-ui-text:nth-child(2){

    width: 67%;
}

.stacked-loading-texts > .loading-ui-text:nth-child(3){

    width: 33%;
}

/*
    Contains global styling for the shop and shop product
*/
.item-image-texts {

    display: flex;
}

.product-image-carousel-container {

    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
    border-radius: var(--adjustedFontSize32px);
    border: var(--adjusted12px) solid white;
    box-sizing: border-box;
}

.product-image-carousel {

    display: flex;
    overflow-x: auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    --n: 1; /*Number of images in carousel.*/
    width: calc(var(--n)*100%); /*New width now dependent on number of images in carousel*/
    transform: translate(calc(var(--i, 0)/var(--n)*-100%)); /*Had + var(--tx, 0px)*/

    user-select: none;
    -webkit-user-select: none;
}

.product-image {

    /* min-width: 100%; */
    width: 100%;
    /* height: 100%; */ /*Enforced by cloudinary code*/
    flex-shrink: 0;
    object-fit: cover;

    /*Snapping*/
    /* CURRENT way. */
    /* scroll-snap-align: start; */


    /*Trying js scrolling*/
    width: calc(100%/var(--n));
    pointer-events: none;
}

.prod-image-swipe-btns {

    position: absolute;
    bottom: var(--adjusted12px);
    left: 0;
    margin-left: 50%;
    translate: -50%;
    display: flex;
    gap: calc(var(--adjusted12px)/2);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.btn-swipe-image {

    position: relative;
    height: var(--adjustedFontSize24px);
    width: calc(var(--adjusted16px));
    opacity: 0.78;
    transition: opacity 0.4s;
    background-size: contain !important;
    background-position: center !important;
    padding: 0;
}

.btn-swipe-image:focus, .btn-swipe-image:hover {

    opacity: 1;
}

.btn-swipe-img-left {

    background: url(/images/left_button_image.e7eee5c4de6feda93886.svg) no-repeat;
    /* opacity: var(--opac,  1); */ /* Change to 0 default */
    opacity: 0.78;
}

.btn-swipe-img-right {

    background: url(/images/right_button_image.0db9b955625989b531f1.svg) no-repeat;
    opacity: 0.78;
}

.product-image-carousel-container:hover .btn-swipe-img-right {

    opacity: var(--opacR, 1);
}

.product-image-carousel-container:hover .btn-swipe-img-left {

    opacity: var(--opac,  0);
}

.product-image-carousel-numbers {

    position: absolute;
    top: var(--adjusted12px);
    right: var(--adjusted12px);
    width: max-content;
    height: var(--adjustedFontSize32px);
    padding: 0 var(--adjusted12px);
    background-color: black;
    border-radius: calc(var(--adjusted12px)*0.8);
    display: flex;
    align-items: center;
}

.carousel-number {

    font-weight: var(--nunito-bold);
    color: var(--white);
    font-size: var(--adjustedFontSize18px);
}

.product-image-carousel-tooltip {

    display: none; /*FOR NOW ONLY*/
    position: absolute;
    left: 0;
    margin-left: 50%;
    bottom: var(--adjustedFontSize48px);
    width: max-content;
    font-size: var(--adjusted16px);
    border-radius: var(--adjusted16px);
    color: var(--white);
    padding: var(--adjusted12px);
    background-color: rgba(0, 0, 0, .58);

    opacity: 0;
    translate: -50% var(--adjustedFontSize32px);
    transition: opacity 0.4s ease-out, translate 0.4s ease-out;
}

@media screen and (min-width: 1280px){

    .product-image-carousel-container:hover .product-image-carousel-tooltip {

        opacity: 1;
        translate: -50% 0;
    }
}

.product-images-filter-main-wrapper {

    display: none; /*For now*/
    position: absolute;
    right: var(--adjustedFontSize32px);
    bottom: var(--adjusted16px);
}

.product-images-filter-content-main-wrapper {

    --minMaxW: calc(var(--adjusted184px)*2.4);
    --minMaxH: calc(var(--adjusted184px)*4);
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: var(--adjusted64px);
    max-height: var(--adjusted64px);
    background-color: rgba(5, 50, 37, .72);
    border-radius: 240px;
    overflow: hidden;

    transition: max-width 0.4s ease-out, max-height 0.4s ease-out, border-radius 0.4s ease-out;
}

.product-images-filter-content-wrapper {

    --btnBoxDim: calc(var(--adjusted16px)*3 + var(--adjusted12px));
    --tXY: calc(100% * -1 + var(--btnBoxDim));
    transform: translate(var(--tXY), var(--tXY));
    width: max-content;
    min-width: var(--minMaxW);
    max-width: var(--minMaxW);
    padding-top: var(--adjustedFontSize24px);

    transition: transform 0.4s ease-out;
}

.product-images-filter-content-main-wrapper:focus,
.product-images-filter-content-main-wrapper:focus-within {

    max-width: var(--minMaxW);
    max-height: var(--minMaxH);
    border-radius: var(--adjustedFontSize24px);
}

.product-images-filter-content-main-wrapper:focus .product-images-filter-content-wrapper,
.product-images-filter-content-main-wrapper:focus-within .product-images-filter-content-wrapper {

    transform: translate(0, 0);
}

.filter-button-wrapper {

    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "nothing_      btn_";
}

.product-images-filter-button {

    position: relative;
    grid-area: btn_;
    padding: var(--adjusted16px);
    width: var(--btnBoxDim);
    height: var(--btnBoxDim);
}

.product-images-filter-button > svg {

    width: calc(var(--adjusted16px) + var(--adjusted12px));
    overflow: visible;
}

.product-images-filter-content {

    padding: 0 var(--adjusted40px);
    margin-bottom: var(--adjusted40px);
}

.product-images-filter-content > p {

    color: white;
}

.image-filter-radios-container {

    margin-top: var(--adjustedFontSize32px);
    max-height: calc(var(--adjusted184px)*2.16);
    overflow-y: auto;
}

.image-filter-radios-container .image-filter-label {

    color: white;
    padding-left: var(--adjustedFontSize48px);
}

.image-filter-radios-container .radio-container {

    margin-bottom: 0;
    padding-left: 0;
}

.image-filter-radios-container .radio-container:not(:first-child) {

    margin-top: var(--adjustedFontSize18px);
}

.image-filter-radios-container .radio-container .radio-icon {

    border: 2px white solid;
    top: calc(var(--adjustedFontSize32px)*0.58);
}

.image-filter-radios-container .radio-container .radio-icon::after {

    background-color: white;
}

.image-filter-radios-container .radio-container:hover .radio-icon {

    background-color: var(--dark-green);
}

.image-filter-radios-container .radio-container input:checked ~ .radio-icon {

    border-color: white;
}

.image-filter-radios-container .radio-container expandable-list {

    margin-top: var(--adjustedFontSize24px);
    --currMaxH: 0 !important;
}

.image-filter-radios-container .radio-container input:checked ~ expandable-list {

    --currMaxH: var(--calcMaxH) !important;
}

.image-filter-radios-container .radio-container expandable-list .image-filter-options:not(:first-child) {

    margin-top: var(--adjustedFontSize24px);
}

.image-filter-options > .filter-option:not(:first-child) {

    margin-top: var(--adjustedFontSize24px);
}

.image-filter-options > .filter-option > p {

    color: white;
}

.image-filter-options > .filter-option > .filter-option-radios {

    margin-top: var(--adjusted16px);
}

.product-wholesale-details-wrapper {

    margin-top: var(--adjusted64px);
    background-color: #AFAC9E;
    border-radius: var(--adjustedFontSize18px);
    padding: var(--adjusted16px) var(--adjustedFontSize20px);
    width: max-content;
}

.product-wholesale-details-wrapper > p {

    font-size: var(--adjustedFontSize20px);
}

.set-num-text {

    background-color: #AFAC9E;
    border-radius: var(--adjusted12px);
    padding: var(--adjusted12px) var(--adjusted16px);
    width: max-content;
    font-size: var(--adjusted16px);
    margin-bottom: 0 !important;
    color: white;
}

.product-title {

    font-size: var(--adjustedFontSize48px) !important;
    margin-top: var(--adjusted16px);
    margin-bottom: 0 !important;
}

.product-price-text {

    margin-top: var(--adjusted12px) !important;
    margin-bottom: 0 !important;
    color: var(--dartmouth-green);
}

.product-price-text[data-state=on-offer] > span:first-child {

    position: relative;
    font-weight: var(--nunito-regular);
}

.product-price-text > span:nth-of-type(2) {

    display: none;
    margin-left: var(--adjustedFontSize18px);
}

.product-price-text[data-state=on-offer] > span:first-child {

    font-size: var(--adjustedFontSize20px);
}

.product-price-text[data-state=on-offer] > span:first-child::before {

    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--dartmouth-green);
}

.product-price-text[data-state=on-offer] > span:nth-of-type(2) {

    display: inline-block;
}

.product-wholesale-text > span {

    position: relative;
}

.product-wholesale-text > span:first-child, .product-wholesale-text > span:nth-of-type(2) {

    display: block;
}

.product-wholesale-text > span:nth-of-type(2) {

    margin-top: var(--adjusted12px);
}

.product-wholesale-text > span:nth-of-type(3), .product-wholesale-text > span:nth-of-type(4) {

    margin-top: var(--adjusted12px);
    display: inline-block;
}

.product-wholesale-text > span:nth-of-type(4) {

    font-weight: var(--nunito-bold);
    color: var(--dartmouth-green);
}

.product-wholesale-text > span:nth-of-type(3) {

    display: none;
    font-weight: var(--nunito-regular);
    font-size: var(--adjusted16px);
    color: var(--dartmouth-green);
    margin-right: var(--adjusted12px);
}

.product-wholesale-text[data-state=on-offer] > span:nth-of-type(3)::before {

    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--dartmouth-green);
}

.product-wholesale-text[data-state=on-offer] > span:nth-of-type(3) {

    display: inline-block;
}

.offer-text {

    font-size: var(--adjustedFontSize24px);
    margin-top: var(--adjusted12px);
}

.product-description-wrapper {

    margin-top: var(--adjustedFontSize48px);
}

.product-description {

    background: url(/images/desc_leaf.ab58e8109b88dc1d9bea.svg) no-repeat;
    background-position-y: calc(var(--adjusted12px)*0.85);
    background-size: var(--adjusted16px);
    padding-left: var(--adjustedFontSize32px);
}

.product-description:not(:last-child){

    margin-bottom: var(--adjusted16px);
}

.product-ctas-container {

    position: relative;
}

.product-ctas-cart{

    position: relative; /*Absolute*/
    left: 0;
    /* bottom: 0; */
    top: 0;
    display: grid;
    grid-template-columns: max-content max-content;
    /* grid-template-rows: var(--adjusted88px); */
    grid-gap: var(--adjustedFontSize48px);
    grid-template-areas: "btn_add_remove        input_amount";
}

.button-add-to-cart {

    grid-area: btn_add_remove;
    /* width: max-content; */
    height: max-content;
    padding: var(--adjustedFontSize20px) var(--adjustedFontSize24px);
    border-radius: var(--adjustedFontSize18px);
    background-color: var(--rose-madder);
    color: var(--white);
    font-family: var(--font-nunito);
    font-size: var(--adjustedFontSize24px);

    /* transition: background-color 0.4s ease-out, color 0.4s ease-out, width 0.4s ease-out; */
}

.button-add-to-cart-added {

    background-color: var(--dark-blond);
    color: var(--dark-green);
}

.input-product-quantity {

    display: none; /*FOR NOW*/
    grid-area: input_amount;
    width: var(--adjusted184px);
    margin-bottom: 0;
    background-color: var(--dark-blond);
    border-radius: var(--adjusted12px);
    font-family: var(--font-nunito);
    transform: translateX(-16%);
    opacity: 0;
    visibility: hidden;

    transition: transform 0.4s ease-out, opacity 0.3s ease-out, visibility 0.4s ease-out;
}

.input-product-quantity-visible {

    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.floating-product-number-input {

    background-color: transparent;
    width: var(--adjusted138px);
}

.floating-product-number-input:focus {

    background-color: transparent;
}

.product-cta-favorite {

    display: none; /*FOR NOW*/
    width: max-content;
    position: absolute;
    right: 0;
    bottom: var(--adjustedFontSize20px);
    background-color: var(--dark-blond);
    width: var(--adjusted64px);
    height: var(--adjusted64px);
    border-radius: 600px;
}

.favorite-heart {

    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.favorite-heart > svg {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: var(--adjustedFontSize24px);
    overflow: visible;
}

.favorite-heart > svg > path {

    fill: none;
    stroke: var(--dark-green);
    animation: none;
}

.product-cta-favorite:focus > .favorite-heart > svg > path {

    fill: var(--rose-madder);
    stroke: var(--rose-madder);
}

.product-cta-favorite:focus > .favorite-heart {

    animation: scale-easeOutElastic;
    animation-duration: 0.24s;
}

@keyframes scale-easeOutElastic {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.24);
	}

	100% {
		transform: scale(1);
	}
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/

/*
    Large desktops - new devices with 1920 * 1080 resolution

    Using min-width to target 1800px and above, for now
*/
@media screen and (min-width: 1800px){

    /*NOTHING YET*/
}

/* Tab - Landscape */
@media screen and (max-width: 1280px){

    .product-images-filter-content-main-wrapper {
        
        max-width: calc(var(--adjusted64px) + var(--adjusted16px));
        max-height: calc(var(--adjusted64px) + var(--adjusted16px));
    }

    .product-images-filter-content-wrapper {

        --btnBoxDim: calc(var(--adjustedFontSize24px) + var(--adjusted16px)*2);
    }

    .product-images-filter-button > svg {

        width: var(--adjustedFontSize24px);
    }
    
    .product-cta-favorite {

        bottom: var(--adjustedFontSize24px);
        width: calc(var(--adjusted64px) + var(--adjusted16px));
        height: calc(var(--adjusted64px) + var(--adjusted16px));
    }
}

/*Tab - portrait*/
@media screen and (max-width: 900px){

    .product-images-filter-content-main-wrapper {

        --minMaxW: calc(var(--adjusted184px)*2);
    }

    .image-filter-radios-container {

        max-height: calc(var(--adjusted184px)*1.72);
    }

    .product-ctas-cart{

        grid-template-columns: 1fr;
        grid-gap: 0;
        grid-template-rows: max-content max-content;
        grid-template-areas: 
                        "btn_add_remove"
                        "input_amount";
    }

    .button-add-to-cart {

        width: max-content;
    }

    .input-product-quantity {

        margin-top: 0;
        max-height: 0;
        transform: translateX(0%);

        transition: transform 0.4s ease-out, opacity 0.3s ease-out, visibility 0.4s ease-out, margin-top 0.4s ease-out;
    }

    .input-product-quantity-visible {

        margin-top: var(--adjustedFontSize48px);
        max-height: 150px;
    }
}

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

    .product-images-filter-content-main-wrapper {

        max-width: calc(var(--adjusted56px) + var(--adjusted16px)*0.32);
        max-height: calc(var(--adjusted56px) + var(--adjusted16px)*0.32);
    }

    .product-images-filter-content-wrapper {

        --btnBoxDim: calc(var(--adjusted16px)*3 + var(--adjusted12px));
    }

    .product-image-carousel-numbers {

        padding: var(--adjusted12px) var(--adjusted16px);
    }

    .set-num-text {

        font-size: var(--adjustedFontSize18px);
    }

    .product-cta-favorite {

        bottom: var(--adjustedFontSize24px);
        width: var(--adjusted64px);
        height: var(--adjusted64px);
    }
}
/* Global css file imported in client-app-index */
/* @import "../shop-global/cart_responsive.css"; OLD COMMENT */


#shop-section-one {

    display: grid;
    grid-template-columns: 1fr 1.9494fr;
    grid-template-rows: 1fr;
    grid-template-areas: "shop_headers      shop_hero_image";
    padding-right: 0;
}

#shop-headers-container {

    grid-area: shop_headers;
    margin-top: var(--adjusted156px);
    margin-bottom: calc(var(--adjusted156px)*2);
}

#shop-hero-image {

    grid-area: shop_hero_image;
    width: 100%;
    object-fit: contain;
    position: relative;
}

/* Attempts
#shop-hero-image {

    grid-area: shop_hero_image;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#main-image-container {

    overflow: hidden;
}

#main-image-container > #image-screen {

    width: 100%;
    overflow: hidden;
    rotate: -47deg;
    translate: 20%;
}

#support-images {

    position: relative;
    z-index: 1;
    width: 100%;
}

#support-images > img:nth-child(1) {

    height: var(--adjusted156px);
}

#support-images > img:nth-child(2) {

    height: var(--adjustedFontSize104px);
}

#main-image-container > #image-screen > img {

    width: 100%;
    object-fit: contain;
    rotate: 47deg;
    scale: 110%;
    translate: 0 -27%;
} */

#shop-hero-text {

    padding-top: 0;
    margin-bottom: 0;
}

#shop-header-body-text {

    margin-top: var(--adjusted40px);
}

#shop-info {

    position: relative;
    margin: var(--adjusted64px) var(--site-padding);
    max-width: 45%;
    border-radius: var(--adjustedFontSize24px);
    background-color: #E9E9E9;
    padding: var(--adjustedFontSize32px) var(--adjustedFontSize32px) var(--adjusted80px) var(--adjustedFontSize32px);
}

#shop-info::before {

    content: "";
    position: absolute;
    bottom: calc(var(--adjusted64px)*-1);
    left: 0;
    margin-left: calc(100% + var(--adjustedFontSize104px));
    font-family: var(--font-bree);
    font-size: var(--adjusted184px);
    opacity: 0.04;
}

#shop-info > p:first-of-type {

    font-size: var(--adjustedFontSize32px);
    margin-bottom: var(--adjustedFontSize48px);
}

#shop-info-tab {

    margin-top: var(--adjusted64px);
    margin-bottom: var(--adjusted64px);
}

#shop-info-tab > p {

    margin-bottom: var(--adjusted16px);
}

#shop-info-tab > a,
.shop-location-container {

    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--adjusted12px);
    padding-right: var(--adjusted12px);
    margin-bottom: var(--adjustedFontSize32px);
    width: max-content;
    z-index: 1;
    overflow: hidden;
}

#shop-info-tab > a::after {

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--adjusted56px);
    height: 100%;
    border-radius: var(--adjusted12px);
    background-color: var(--rose-madder);
    z-index: -1;

    transition: width 0.2s ease-out;
}

#shop-info-tab > a:hover::after {

    width: calc(var(--adjusted156px)*3.8);
}

#shop-info-tab > a > span {

    transition: color 0.2s ease-out;
}

#shop-info-tab > a:hover > span {

    color: white;
}

#shop-info-tab > a > svg,
.shop-location-container > svg {

    height: var(--adjusted40px);
    border-radius: var(--adjusted12px);
    padding: var(--adjusted12px);
    background-color: var(--rose-madder);
    margin-right: var(--adjustedFontSize24px);
}

.shop-location-container {

    width: 100% !important;
    align-items: flex-start !important;
}

.shop-location-container > svg {

    background-color: transparent !important;
    padding: 0 !important;
}

.shop-location-container p:first-child {

    margin-bottom: var(--adjusted16px);
}

.slh {

    font-size: var(--adjustedFontSize20px);
}

#mail-shop {

    margin-top: var(--adjusted56px);
    padding: var(--adjusted16px) var(--adjustedFontSize32px);
    background-color: var(--rose-madder);
    border-radius: var(--adjusted16px);
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    font-size: 0;
}

#mail-shop > svg {

    height: var(--adjusted40px);
    margin-left: var(--adjusted56px);

    transition: transform 0.2s ease-out;
}

#mail-shop > span {

    font-size: var(--adjustedFontSize24px);
    color: white;
}

#browse-products {

    display: inline-block;
    margin-top: var(--adjusted64px);
    padding: 0.4em 0.4em 0.4em var(--adjusted64px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-bold);
    font-size: var(--adjustedFontSize24px);
    color: var(--dartmouth-green);
    background: url(/images/shopping_icon.533d9b3f96b5ce8783b5.svg) no-repeat;
    background-size: var(--adjusted40px);
}

#section-shop-search {

    padding-top: calc(var(--adjusted184px) + var(--adjusted64px));
    padding-bottom: var(--adjusted64px);
}

#search-bar {

    display: grid;
    grid-template-columns: 1fr 0.075fr;
    grid-template-rows: 1fr;
    grid-template-areas: "search_input      search_button";
    width: calc(var(--adjusted184px)*5); /*540px*/
    padding: var(--adjusted12px) var(--adjustedFontSize24px) var(--adjusted12px) var(--adjustedFontSize32px);
    border-radius: var(--adjustedFontSize24px);
    background-color: var(--blond);
}

#search-input {

    grid-area: search_input;
    margin-right: var(--adjustedFontSize32px);
    font-family: var(--font-nunito);
    font-weight: var(--nunito-bold);
    font-size: var(--adjustedFontSize24px);
    color: var(--light-black);
}

#search-bar:hover, #search-bar:focus, #search-bar:focus-within {

    background-color: var(--dark-blond);
}

#button-search-shop {

    grid-area: search_button;
    background: url(/images/icon_search.aab31e2c0cecd680f191.svg) no-repeat;
    background-position: center;
    background-size: contain; /*Was var(--adjustedFontSize48px)*/
    margin: var(--adjusted16px) 0;
    /* transform: translateY(4px); */
}

#shop-products {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--adjusted64px);
    padding-top: var(--adjusted184px);
    padding-bottom: var(--adjusted184px);
}

.shop-product-item {

    min-width: 46%; /*was 46.4%*/
    max-width: 46%;
    height: max-content;
    /* flex-grow: 1; */
    flex-shrink: 0;
    border-radius: var(--adjustedFontSize32px);
    padding: var(--adjusted12px) var(--adjustedFontSize20px) var(--adjustedFontSize20px) var(--adjusted12px);
    background-color: #D1CCB9;
}

.shop-product-item:last-child {

    /* flex-grow: 0; */
}

.product-image-carousel-container-wrapper {

    position: relative;
    height: max-content;
    width: 45%;
    flex-shrink: 0;
    flex-grow: 0;
}

.product-details-container {
    
    padding: var(--adjusted12px) 0 0 var(--adjusted40px);
}

.product-details {

    
}

.product-details-texts {

    
}

.product-ctas-container {

    margin-top: var(--adjusted64px);
    padding: 0 var(--adjusted12px) 0 var(--adjusted12px);
}

.product-image-carousel-anchors {

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--adjustedFontSize24px);
    padding-left: var(--adjusted64px);
    padding-right: var(--adjusted64px);
    max-width: calc(var(--adjusted138px)*2);
    display: none; /*Was flex*/
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.carousel-anchor {

    flex-shrink: 0;
    width: calc(var(--adjusted16px)/1.6);
    height: calc(var(--adjusted16px)/1.6);
    border: calc(var(--adjustedFontSize24px)/8) var(--white) solid;
    border-radius: 50%;
    margin-right: var(--adjusted16px);
}

.full-product-details-link {

    /* display: inline-block; */
    display: none;
    margin-top: var(--adjusted40px);
    padding-left: var(--adjusted64px);
    background: url(/images/arrow_right_view_product_details.ab583a666188895014ed.svg) no-repeat;
    background-size: var(--adjustedFontSize32px);
    background-position-y: center;
    font-family: var(--font-nunito);
    font-weight: var(--nunito-bold);
    font-size: var(--adjustedFontSize24px);
    color: var(--dark-green);
}
/*
    Media queries

    Breakpoints:
        600px – phone
        900px – tablet portrait
        1200px – tablet landscape ---Chose 1280px to cater for kindle fire and galaxy tabs in landscape. Check css tricks link in docs - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
        1800px – desktop
        >1800px – large desktops
*/


/*
    Import shop.css file
*/


/*
    Large desktops - new devices with 1920 * 1080 resolution

    Using min-width to target 1800px and above, for now
*/
@media screen and (min-width: 1800px){

    /*NOTHING YET*/
}

/* Tab - Landscape */
@media screen and (max-width: 1280px){
    
    /*PENDING PORTRAIT*/
}

/*Tab - portrait*/
@media screen and (max-width: 900px){

    #shop-section-one {

        grid-template-columns: 1fr 0.7556fr;
    }

    #shop-hero-image {

        height: calc(100%); /*calc(100% + var(--adjusted184px))*/
        object-fit: cover;
        object-position: left;
        z-index: 2;
    }

    #shop-products {

        flex-direction: column;
        flex-wrap: nowrap;
    }

    .shop-product-item {

        flex-grow: 1;
        max-width: 100%;
    }
}

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

    #shop-section-one {

        grid-template-columns: 1fr auto; /*1fr 0.5357fr*/
    }

    #red-dot {

        margin-right: var(--adjustedFontSize18px);
    }

    #browse-products {

        padding-left: var(--adjustedFontSize48px);
        background-position-y: center;
    }

    #search-bar {

        width: calc(var(--adjusted184px)*3);
    }

    #shop-products {

        padding-top: var(--adjusted184px);
        flex-direction: column;
        /* flex-wrap: nowrap; */
    }

    .shop-product-item {

        padding: var(--adjusted12px) var(--adjusted12px) var(--adjustedFontSize20px) var(--adjusted12px);
    }

    .item-image-texts {

        flex-direction: column;
    }

    .product-image-carousel-container-wrapper {

        width: 100%;
    }

    .product-details-container {

        padding: 0;
        margin-top: var(--adjustedFontSize24px);
    }

    .product-details {

        padding: 0 var(--adjustedFontSize18px);
    }

    .product-ctas-container {

        padding: 0 var(--adjustedFontSize18px);
    }

    #shop-info {

        max-width: 100%;
    }
}
#shop-section-one > .stacked-loading-texts {

    width: 80%;
}