:root {
    --logo-element: 6px;
    --logo-margin: calc(var(--logo-element) / 6);
    --logo-space: calc(var(--logo-element) * 2.25);
    /* space between logotype and logo text */
    --logo-logotype-size: calc(4 * (var(--logo-element) + 2 * var(--logo-margin)));

    --logo-text-horizontal-width: calc(var(--logo-element) * 13);
    --logo-text-horizontal-height: calc(var(--logo-element) * 5.7);
    --logo-text-horizontal-margin-top: calc(var(--logo-margin) * 1.5);

    --logo-text-vertical-width: calc(var(--logo-element) * 9);
    --logo-text-vertical-height: calc(var(--logo-element) * 4);
    --logo-text-vertical-margin-top: calc(var(--logo-element) * 1);

    --main-logo-padding: calc(var(--logo-element) * 2);
}

.logo-all {
    display: inline-block;
    /* margin-top: calc(var(--main-logo-padding) * 1.5);    */
}

html.cds--g100 .logo-all {
    filter: invert(1);
}

.logotype {
    width: var(--logo-logotype-size);
    height: var(--logo-logotype-size);
    margin-top: var(--logo-margin);
    float: left;
}

.logo-item {
    width: var(--logo-element);
    height: var(--logo-element);
    margin: var(--logo-margin);
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.logo-shape-1 {
    background-image: url("/app/assets/img/logo/circle.svg");
}

.logo-shape-2 {
    background-image: url("/app/assets/img/logo/square.svg");
}

.logo-shape-3 {
    background-image: url("/app/assets/img/logo/triangle.svg");
}

.logo-shape-4 {
    background-image: url("/app/assets/img/logo/plus.svg");
}

.logo-shape-5 {
    background-image: url("/app/assets/img/logo/minus.svg");
}

.logotext {
    width: var(--logo-text-horizontal-width);
    height: var(--logo-text-horizontal-height);
    margin-left: var(--logo-space);
    margin-top: var(--logo-text-horizontal-margin-top);
    margin-bottom: calc(-7 * var(--logo-margin));
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
    filter: invert(0);
}

.logo-small-academy {
    background-image: url("/app/assets/img/logo/small-academy.svg");
}

.logo-huge-academy {
    background-image: url("/app/assets/img/logo/huge-academy.svg");
}

.logo-vertical .logotype {
    float: none;
}

.logo-vertical .logotext {
    float: none;
    margin-left: 0;
    margin-top: var(--logo-text-vertical-margin-top);
    width: var(--logo-text-vertical-width);
    height: var(--logo-text-vertical-height);
}

/* white logo */

.logotype-white .logo-shape-1,
.logotype-white .logo-shape-2,
.logotype-white .logo-shape-3,
.logotype-white .logo-shape-4,
.logotype-white .logo-shape-5,
.logotype-white .logo-small-academy,
.logotype-white .logo-huge-academy,
.logotype-white .logo-before-and-after {
    background-color: white;
    mask-size: contain;
    /* -webkit-mask: url("/app/assets/img/logo/circle.svg");
    -webkit-mask-size: contain; */
}

.logotype-white .logo-shape-1 {
    mask: url("/app/assets/img/logo/circle.svg");
}

.logotype-white .logo-shape-2 {
    mask: url("/app/assets/img/logo/square.svg");
}

.logotype-white .logo-shape-3 {
    mask: url("/app/assets/img/logo/triangle.svg");
}

.logotype-white .logo-shape-4 {
    mask: url("/app/assets/img/logo/plus.svg");
}

.logotype-white .logo-shape-5 {
    mask: url("/app/assets/img/logo/minus.svg");
}

.logotype-white .logo-small-academy {
    mask: url("/app/assets/img/logo/small-academy.svg");
}

.logotype-white .logo-huge-academy {
    mask: url("/app/assets/img/logo/huge-academy.svg");
}

.logotype-white .logo-before-and-after {
    mask: url("/app/assets/img/logo/before-and-after.svg");
}