html, body {
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    .box {
        width: 500px;
        height: 100px;
        border-radius: 8px;
        background: #e5e3f5;
        border: 3px solid #9f98e2;
    }
}

@media screen and (max-width: 767px) {
    .box {
        width: 400px;
        height: 100px;
        border-radius: 8px;
        background: #e5e3f5;
        border: 3px solid #9f98e2;
    }
}



.text-cursor {
    animation: blink 0.3s linear infinite alternate;
    font-weight: bold;
}

@keyframes blink {
    0% {
        color: transparent;
    }

    30% {
        color: transparent;
    }

    100% {
        color: black;
    }
}

.index-background {
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    background: linear-gradient(82deg,#594ae2 0%,#7467ef 100%);
}

    .index-background.color-blue {
        background: #4aafe2;
    }

.index-project-background {
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    background: linear-gradient(82deg,#E8E2E2 0%,#D8CCE2 100%);
}

.index-section {
    padding-top: 0px;
    position: relative;
}

.index-bg.color-black {
    position: relative;
    height: 600px;
    width: 100%;
    background: #000000;
    z-index: -2;
}

.index-bg-container {
    position: relative;
    height: 100%;
    width: 100%;
}

    .index-bg-container.index-bg {
        height: 500px;
    }

@media screen and (min-width: 768px) {
    .index-carousel {
        height: 800px;
    }
}

@media screen and (max-width: 767px) {
    .index-carousel {
        height: 500px;
    }
}

.graphic-wrapper {
    position: relative;
    text-align: right;
    top: -400px;
    right: -10%
}

.demonstration {
    width: 300px;
    height: 300px;
}

.demonstration-sm {
    top: 300px;
    right: 20%;
    position: absolute;
    z-index: 99;
}

.graphic-wrapper .demonstration {
    position: relative;
    z-index: 20;
    top: 200px;
    right: 200px;
}

.stripe {
    width: 100%;
    height: 200px;
    z-index: -1;
    position: relative;
}

.index-bg-video {
    position: absolute;
    z-index: -1;
    width: 100%;
    max-height: 1080px;
    top: -39%;
}

    .index-bg-video.md {
        margin-left: 50vw;
        transform: translate(-50%);
        top: 0px;
        width: auto;
        height: 600px;
    }

.index-bg-abs-position {
    position: absolute;
    height: 100%;
    top: 50px;
}


.skew.stripe {
    transform: skewY(-12deg);
}

    .skew.stripe.reverse {
        height: 200px;
        transform: skewY(3deg);
    }

/* //link:script.js:.image-logo */
.image-logo {
}

    /* //link:script.js:.image-logo */
    .image-logo a:hover {
    }

@keyframes shadow {
    0% {
        filter: drop-shadow(0px 0px 0px #000000);
    }

    100% {
        filter: drop-shadow(1px 1px 2px #000000);
    }
}

.display-flex {
    display: flex;
    height: 80%;
}

.display-flex-center {
    display: flex;
    justify-content: center;
    height: 80%;
}


/*------------------------------------------------------------------------------*/

.lazy-background-icon {
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
    width: 40px;
    opacity: 0.2;
}

.lazy-stiker {
    z-index: 100;
    position: relative;
    text-align: center;
}

    .lazy-stiker img {
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .lazy-stiker :hover {
        filter: drop-shadow(1px 1px 2px #000000);
    }


@media screen and (min-width: 768px) {
    .section-manager {
        position: fixed;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media screen and (max-width: 767px) {
    .section-manager {
        visibility: hidden;
    }
}

@media screen and (min-width: 768px) {
    .index-42-size {
        width: 600px;
    }
}

@media screen and (max-width: 767px) {
    .index-42-size {
        width: 300px;
    }
}

.section-manager .circle {
    transform: translateY(50%);
    margin-left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #41285A;
    outline: solid 2px white;
}

    .section-manager .circle.ok {
        transform: translateY(0%);
        margin-left: 10px;
        width: 30px;
        height: 30px;
        background-color: #B9A9C9;
    }

.section-manager .size-down {
    animation-duration: 0.5s;
    animation-name: size-down;
    animation-fill-mode: forwards;
}

.section-manager .size-up {
    animation-duration: 0.5s;
    animation-name: size-up;
    animation-fill-mode: forwards;
}

.section-manager .text-bg {
    font-size: 25px;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: white;
}

@keyframes size-up {
    from {
        width: 20px;
        height: 20px;
        transform: translateY(50%);
        background-color: #41285A;
    }

    to {
        width: 30px;
        height: 30px;
        transform: translateY(0%);
        background-color: #B9A9C9;
    }
}

@keyframes size-down {
    from {
        width: 30px;
        height: 30px;
        transform: translateY(0%);
        background-color: #B9A9C9;
    }

    to {
        width: 20px;
        height: 20px;
        transform: translateY(50%);
        background-color: #41285A;
    }
}