:root {
    --image-text-grey-block-box-height: 199px;
    --image-text-grey-block-img-real-width: unset;
    --image-text-grey-block-img-width: 348px;
    --image-text-grey-block-img-url: '';
    --image-text-grey-block-box-animation-duration: 30s;
}

.image-text-grey-block {
    display: block;
    position: relative;
    width: 100%;
    min-height: var(--image-text-grey-block-box-height);
    margin: 20px 0px 20px 0px;
    width: 100%;
    font-family: "Roboto-Light";
    text-shadow: 0 0;
    font-size: 1.6em;
    line-height: 1.76rem;
    color: #393939;
    text-decoration: none;
    overflow: hidden;
}

.image-text-grey-block .moving-bg {
    animation-name: moving-bg;
    animation-duration: var(--image-text-grey-block-box-animation-duration);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    animation-iteration-count: infinite;
}
.image-text-grey-block .image-text-grey-block-wrapper {
    display: block;
    width: 100%;
    height: var(--image-text-grey-block-box-height);
}
.image-text-grey-block .image-text-grey-block-wrapper .image-text-grey-block-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    grid-template-columns: var(--image-text-grey-block-img-width) auto;
}

.image-text-grey-block-wrapper .image-text-grey-block-image-wrapper {
    display: block;
    width: var(--image-text-grey-block-img-width);
    height: inherit;
}
.image-text-grey-block-wrapper .image-text-grey-block-image-wrapper .image-text-grey-block-image-container {
    position: relative;
    width: inherit;
    height: var(--image-text-grey-block-box-height);
    overflow:hidden;

}
.image-text-grey-block-wrapper .image-text-grey-block-image-wrapper .image-text-grey-block-image-container .image-text-grey-block-image-element {
    position: absolute;
    width: var(--image-text-grey-block-img-real-width);
    min-width: var(--image-text-grey-block-img-width);
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-image: var(--image-text-grey-block-img-url);
    background-position: 0% 0%;
    background-repeat: no-repeat;
}
.image-text-grey-block-wrapper .image-text-grey-block-image-wrapper .image-text-grey-block-image-container .image-text-grey-block-image-element:not(.moving-bg) {
    background-size: cover;
    width: 348px;
    height: var(--image-text-grey-block-box-height);
}

.image-text-grey-block-wrapper .image-text-grey-block-text-wrapper {
    width: 100%;
    background: #F4F4F4;
}
.image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container{
    padding: 40px 39px 35px 69px;
}
.image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container .image-text-grey-block-text-element {
    overflow: hidden;
    height: calc(var(--image-text-grey-block-box-height) - 75px);
    max-height: calc(var(--image-text-grey-block-box-height) - 75px);
    min-height: calc(var(--image-text-grey-block-box-height) - 75px);
}
.image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container .image-text-grey-block-text-element * {
    font-size: inherit;
    line-height: inherit;
}
.image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container .image-text-grey-block-text-element h3 {
    line-height: 1.3em;
    font-weight: 600;
    margin-bottom: 10px;
}
.image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container .image-text-grey-block-text-element a {
    color: #CD1734;
    line-height: 1.2em;
    font-weight: 500;
    text-decoration: none;
}
.image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container .image-text-grey-block-text-element p {
    margin-bottom: 10px;
}

@media only screen and (max-width: 479px) {
    :root {
        --image-text-grey-block-img-width: 280px;
    }
}
@media only screen and (max-width: 767px) {
    :root {
        --image-text-grey-block-img-width: 440px;
    }
    .image-text-grey-block {
        font-size: 1.8em;
        line-height: 1.2em;
    }
    .image-text-grey-block .image-text-grey-block-wrapper {
        height: auto;
    }
    .image-text-grey-block-wrapper .image-text-grey-block-container {
        grid-template-columns: var(--image-text-grey-block-img-width);
        flex-direction: column !important;
    }

    .image-text-grey-block-wrapper .image-text-grey-block-image-wrapper .image-text-grey-block-image-container
    .image-text-grey-block-image-element:not(.moving-bg) {
        width: var(--image-text-grey-block-img-width);
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        background-size: cover;

    }
    .image-text-grey-block-wrapper .image-text-grey-block-text-wrapper {
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }
    .image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container {
        padding: 20px 20px;
    }
    .image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container .image-text-grey-block-text-element {
        height: 100%;
        max-height: 100%;
        min-height: 100%;
    }
}
@media only screen and (max-width: 1023px) {
    .image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container {
        padding: 20px 18px 17px 34px;
    }
    .image-text-grey-block {
        font-size: 1.4em;
        line-height: 1.2em;
    }
}
@media only screen and (max-width: 1199px) {
    .image-text-grey-block {
        font-size: 1.4em;
    }
}

@media only screen and (min-width: 768px){
    .image-text-grey-block-wrapper .image-text-grey-block-text-wrapper .image-text-grey-block-text-container .image-text-grey-block-text-element {
        overflow: hidden;
        height: calc(var(--image-text-grey-block-box-height) - 37px);
        max-height: calc(var(--image-text-grey-block-box-height) - 37px);
        min-height: calc(var(--image-text-grey-block-box-height) - 37px);
    }
}

@media only screen and (min-width: 1024px){

}

@keyframes moving-bg {
    0% { transform: translateX(0); }
    50% { transform: translateX(calc(var(--image-text-grey-block-img-width) - var(--image-text-grey-block-img-real-width))); }
    100% { transform: translateX(0); }
}
@-moz-keyframes moving-bg {
    0% { -moz-transform: translateX(0); }
    50% { -moz-transform: translateX(calc(var(--image-text-grey-block-img-width) - var(--image-text-grey-block-img-real-width))); }
    100% { -moz-transform: translateX(0); }
}
@-o-keyframes moving-bg {
    0% { -o-transform: translateX(0); }
    50% { -o-transform: translateX(calc(var(--image-text-grey-block-img-width) - var(--image-text-grey-block-img-real-width))); }
    100% { -o-transform: translateX(0); }
}
@-webkit-keyframes moving-bg {
    0% { -webkit-transform: translateX(0); }
    50% { -webkit-transform: translateX(calc(var(--image-text-grey-block-img-width) - var(--image-text-grey-block-img-real-width))); }
    100% { -webkit-transform: translateX(0); }
}


