.cula-header {
    background: url("../img/cula_bg_2.svg") 0 0 !important;
    animation: animatedBackground 280s linear infinite;
    -moz-animation: animatedBackground 280s linear infinite;
    -webkit-animation: animatedBackground 280s linear infinite;
    -o-animation: animatedBackground 280s linear infinite;
}

.cula-header:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../img/cula_bg.svg") 0 0 !important;
    animation: animatedBackground 150s linear infinite;
    -moz-animation: animatedBackground 150s linear infinite;
    -webkit-animation: animatedBackground 150s linear infinite;
    -o-animation: animatedBackground 150s linear infinite;
}

.new-feature:before {
    content: "SOON";
    font-family: Comfortaa, cursive !important;
    font-weight: 600;
    font-size: 10px;
    position: relative;
    top: -1px;
    right: -22px;
    z-index: 3;
    padding: 3px;
    color: white;
    background: #eb5c5f;
    border-radius: 0.25rem;
}

.cula-header2-text, .cula-desc-text {
    font-family: 'Muli', sans-serif !important;
    line-height: 1.5;
}

.cula-header-text {
    font-size: 7rem !important;
    font-family: 'Comfortaa', cursive !important;
    font-weight: 800;
}

.cula-header-text:before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: #eb5c5f;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}

.cula-header-screen {
    width: 90%;
}

.cula-header-screen div {
    margin-bottom: 0.5rem;
    box-shadow: 1px 1px 5px -1px #333;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

.screen-1 {
    height: 6%;
    background: url("../img/header_screen_1.png") no-repeat top left;
    background-size: cover;
}

.screen-2 {
    height: 48%;
    /*background: url("../img/header_screen_2.png") no-repeat top left;*/
}

.screen-2a {
    background: url("../img/header_screen_2a.png") no-repeat top left;
    background-size: cover;
}

.screen-2b {
    background: url("../img/header_screen_2b.png") no-repeat top left;
    background-size: cover;
}

.screen-2c {
    background: url("../img/header_screen_2c.png") no-repeat top left;
    background-size: cover;
}

.screen-3 {
    min-width: 360px;
    margin-right: 0.5rem;
    border-radius: 6px;
    height: 100%;
    background: url("../img/header_screen_3.png") no-repeat top center;
    background-size: cover;
}

.screen-4 {
    height: 100%;
    background: url("../img/header_screen_4.png") no-repeat top left;
    background-size: cover;
}

.cula-features > div:before {
    content: "";
    position: absolute;
    left: 4rem;
    right: 4rem;
    bottom: -1rem;
    height: 1rem;
    background: #e95457;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

@keyframes animatedBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}

@-moz-keyframes animatedBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}

@-webkit-keyframes animatedBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}

@-o-keyframes animatedBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}

@media (max-width: 992px) {
    .cula-header {
        padding-top: 70px !important;
        background-size: cover !important;
    }

    .cula-header:before {
        background: none !important;
        animation: none;
        -moz-animation: none;
        -webkit-animation: none;
        -o-animation: none;
    }

    .cula-header-text:before {
        background: none;
    }

    .cula-desc-text {
        color: #223843 !important;
    }

    .cula-header-screen {
        height: 600px !important;
        margin-right: auto;
    }

    .cula-header-screen div {
        border-radius: 6px;
    }

    .screen-3 {
        min-width: 0px;
    }

    .demo-button {
        color: #223843 !important;
        border-color: #223843 !important;
    }

    .demo-button:before {
        background: #223843 !important;
    }

    .demo-button:hover {
        color: whitesmoke !important;
    }
}

@media (max-width: 525px) {

    .image-splitter {
        width: 100% !important;

    }

    .cula-header-text {
        font-size: 5rem !important;
    }

    .screen-3 {
        min-width: 100%;
        margin-right: 0;
    }

    .screen-4 {
        display: none;
    }
}