*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    font-family: Arial, sans-serif;
    scroll-behavior: auto;
}

hr {
    margin: revert;
}

img, picture, video, canvas, svg, figure {
    display: block;
    max-width: 100%;
}

/* because of max-width, images can get deformed without auto height. Should apply only on CKEditor images */
figure.image img {
    height: auto;
    width: 100%;
    min-width: 10px;
}

figure.image-style-align-left {
    float: left;
    margin-right: 1.5em;
}

figure.image-style-align-right {
    float: right;
    margin-left: 1.5em;
}

figure.image,
figure.image-style-align-center {
    display: block;
    margin: 0.9em auto;
}

figure.image-style-block-align-left {
    display: block;
    margin-right: auto;
    margin-left: 0;
}

figure.image-style-block-align-right {
    display: block;
    margin-right: 0;
    margin-left: auto;
}

figure.image-style-align-center img,
figure.image-style-block-align-left img,
figure.image-style-block-align-right img {
    display: inline-block;
}

figure.image-style-block-align-left {
    text-align: left;
}

figure.image-style-block-align-right {
    text-align: right;
}

figure.image-style-align-center {
    text-align: center;
}

input, button, textarea, select {
    font: inherit;
}

/* Ckeditor font-size  */
.text-tiny {
    font-size: 0.7em;
}

.text-small {
    font-size: 0.85em;
}

.text-big {
    font-size: 1.4em;
}

.text-huge {
    font-size: 1.8em;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-break: break-word;
    font-weight: 300;

    strong {
        font-weight: 600;
    }
}

embed {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

#root, #__next {
    isolation: isolate;
}

button, a.button {
    border: 0;
    word-break: break-word;
}

h1,h2,h3,h4,h5 {
    font-size: 1em;
}

ul, ol {
    padding: 0;
    margin: 0 0 1em 1em;
}

.page {
    width: 100%;
    min-height: 100vh;
}

.section-grid {
    display: grid;
    grid-template-columns: [fw-start] 1fr 24px [column-start] minmax(0, 1196px) [column-end] 24px 1fr [fw-end];
    grid-template-rows: 1fr;
}

.section {
    max-width: 1196px;
    grid-column: column-start / column-end; /* Centers the content in the grid*/
    display: grid;
    grid-template-rows: 1fr;
    grid-gap: 16px;
}

.column-wrapper {
    max-width: 100%;
    min-width: 20px;
}

.column {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 25%;
    box-sizing: border-box;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.element-wrapper {
    max-width: 100%;
}

.element {
    max-width: 100%;
}

.subscribe-form {
    position: relative;
}
.subscribe-form.in-suspense::before {
    position: absolute;
    z-index: 10;
    content: " ";
    inset: -5px;
    background-color: rgba(0,0,0,0.3);
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.subscribe-form.in-suspense::after {
    content: " ";
    position: absolute;
    z-index: 20;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    display: inline-block;
    height: 60px;
    width: 60px;
    animation: rotation 600ms infinite linear;
    border: 10px solid rgba(255, 255, 255, .3);
    border-top-color: rgba(255, 255, 255, .9);
    border-radius: 100%;
}

.subscribe-form .form-field-wrapper.is-invalid input[type=text],
.subscribe-form .form-field-wrapper.is-invalid input[type=email],
.subscribe-form .form-field-wrapper.is-invalid input[type=date],
.subscribe-form .form-field-wrapper.is-invalid input[type=number],
.subscribe-form .form-field-wrapper.is-invalid select {
    outline: 1px solid rgba(200, 0 , 0) !important;
    box-shadow: 0 0 4px 4px rgba(200, 0, 0, 0.75) !important;
}

.subscribe-form .form-field-wrapper.is-multichoice-field.is-invalid .fields-group,
.contact-form .form-field-wrapper.is-multichoice-field.is-invalid .fields-group {
    transition: padding-left 0.3s;
    position: relative;
    padding-left: 13px;
}

.subscribe-form .form-field-wrapper.is-multichoice-field.is-invalid .fields-group:before,
.contact-form .form-field-wrapper.is-multichoice-field.is-invalid .fields-group:before {
    content: " ";
    position: absolute;
    top: 10px;
    left: 0;
    bottom: 10px;
    background-color: #EA4027;
    width: 4px;
    border-radius: 3px;
}

.field-error-message {
    padding-left: .75em;
    color: #EA4027;
    font-size: 0.9em;
}

.error-message {
    border: 2px solid #df8d90;
    padding: .75em;
    background: #ecc4c6;
    color: #ae2b1a;
    font-size: 0.9em;
    margin: 10px;
}

.footer {
    grid-column: fw-start / fw-end;
    width: 100%;
    position: relative;
    height: 115px;
    display: flex;
    justify-content: center;
    background-color: #f3f3f3;
    color: #565656;
    align-self: flex-end;
}

.footer > * {
    position: relative;
    z-index: 2;
}
.footer a {
    align-self: center;
}
.footer img {
    width: 240px;
}

@media (max-width: 991px) {
    .section-grid {
        display: block !important;
        padding: 0 !important;
    }

    .section {
        display: block;
    }

    .column-wrapper {
        display: grid !important;
        grid-template-columns: [fw-start] 1fr [column-start] minmax(0, 640px) [column-end] 1fr [fw-end] !important;
        grid-template-rows: 1fr !important;
    }

    .column {
        grid-column: column-start / column-end !important;
        padding: 0 30px;
    }
}