:root{
    --elior-dark-blue: #115b83;
    --elior-light-blue: #005a82;
    --elior-dark-grey: #2f3337;
}

.mainlogo {
    height: 60px;
    width: auto;
        @media screen and (min-width:769px) {
            height: 50px;
            margin: 15px 0;
        }
}

.herocontainer {
    margin-top: 80px;
        @media screen and (min-width:769px) {
            margin-top: 100px;
        }
}

.hero-imagebg {
    background-position: -400px!important;
        @media screen and (min-width:426px) {
            background-position: right!important;
        }
        @media screen and (min-width:769px) {
            background-position: right 30%!important;
        }
}

.clientoveride{
    height: 100%;
    padding: 0;
    align-items: flex-end;

    @media screen and (min-width: 769px){
        align-items: center;
    }
}

.hero-white-small-overlay{
    width: 100%;
    height: 45%;
    justify-content: flex-end;
    padding: 50px 20px;
    background-position: top;
    background-size: 200%;
    background-color: transparent;
        @media screen and (min-width:769px) {
            width: 40%;
            height: 100%;
            padding: 50px;
            background-position: center right;
            justify-content: center;
        }
}

.hero-white-small-overlay h1{
    color: #fff;
    text-align: center;
    @media screen and (min-width: 769px){
        text-align: left;
    }
}

.text-center{
    text-align: center;
    @media screen and (min-width: 769px){
        text-align: left;
    }
}

.hero-bgcolor-alt{
    background-color: var(--elior-light-blue);
}

details {
    background-color: var(--elior-dark-blue);
}

details[open] summary {
    background-color: var(--elior-dark-grey);
}

.details-main {
    border: 1px solid var(--elior-dark-grey);
}

.flip-card-front {
    background-color: var(--elior-dark-grey);
}

.flip-card-back {
    background-color: var(--elior-light-blue);
}