.bottom-buttons {
    overflow: hidden;
}

.bottom-buttons.visible .bottom-buttons-wrapper {
    bottom: 0;
}

.bottom-buttons-wrapper {
    align-items: flex-end;
    bottom: -70vh;
    margin: 4rem 4rem 6rem;
    position: relative;
    transition: 1s bottom 0.5s;
}

.bottom-buttons-wrapper a.pseudo-button {
    background-color: transparent;
    border: 1px solid #00A0DF;
    color: #00A0DF;
    display: block;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: transform 300ms;
}

.bottom-buttons-wrapper a.pseudo-button:hover {
    color: #fff;
    background-color: #00A0DF;
    transform: translateY(-10%);
}

.bottom-buttons-wrapper > div {
    font-size: 18px;
    width: 33%;
}

.bottom-buttons-wrapper > div > p {
    font-size: 18px;
}

.bottom-buttons-wrapper > div:not(:last-child) {
    margin-right: 5%;   
}

.home-page-article {
    padding: 2rem 0;
}

.home-page-article a {
    display: block;
    margin: 2rem 0;
}

.home-page-article h2 {
    margin-bottom: 2rem;
}

.home-page-article.half-screen > img {
    width: 50%;
}

.home-page-article .half-screen-content {
    height: fit-content;
    padding-left: 5%;
    width: 35%;
}

.home-page-article .half-screen-image {
    height: fit-content;
    left: -100%;
    opacity: 0;
    position: relative;
    transition: left 1s 500ms, opacity 1s 500ms;
    width: 100%;
}

.home-page-article .half-screen-image-wrapper {
    width: 50%;
}

.home-page-article .half-screen-image-wrapper.visible .half-screen-image {
    left: 0;
    opacity: 1;
}

.home-page-article .small-images-slide {
    height: 10rem;
    overflow-x: hidden;
    position: relative;
    min-height: 5rem;
    width: 100%;
}

.home-page-article .small-images-slide .small-images-container {
    height: 10rem;
    left: 100%;
    opacity: 0;
    position: absolute;
    transition: left 1s 500ms, opacity 1s 500ms;
}

.home-page-article .small-images-slide.visible .small-images-container {
    left: 0;
    opacity: 1;
}

.home-page-article .small-images-slide .small-images-container > img {
    max-width: 50%;
    object-fit: cover;
}

.home-page-article .small-images-slide .small-images-container > img:not(:last-child) {
    margin-right: 1rem;
}

.index-header {
    font-size: 35px;
    line-height: 1.25em;
}

.self-advertisement {
    overflow: hidden;
    padding: 8rem 4rem 0 4rem;
    position: relative;
}

.self-advertisement .advertisement-content {
    left: -100%;
    margin: 2rem 2rem 8rem 0;
    position: relative;
    transition: left 1s 500ms;
    width: 100%;
}

.self-advertisement .advertisement-images {
    bottom: -100vh;
    position: relative;
    transition: bottom 1s 500ms;
    width: 100%;
}

.self-advertisement .advertisement-content .app-images > button {
    background-color: transparent;
    width: calc(30% - 1rem);
}

.self-advertisement .advertisement-content .app-images > button:not(:last-child) {
    margin-right: 2rem;
}

.self-advertisement .advertisement-content .app-images > button > img {
    width: 100%;
}

.self-advertisement.visible .advertisement-content {
    left: 0;
}

.self-advertisement.visible .advertisement-images {
    bottom: 0;
}

.self-advertisement .advertisement-images > img {
    height: fit-content;
    position: absolute;
}

.self-advertisement .advertisement-images .close-to-primary-left {
    bottom: min(10vw, 30%);
    left: 7%;
}

.self-advertisement .advertisement-images .close-to-primary-right {
    bottom: min(30vw, 80%);
    right: 18%;
}

.self-advertisement .advertisement-images .not-mobile {
    width: 25%;   
}

.self-advertisement .advertisement-images .side-mobile-logo {
    bottom: 20%;
    right: 0;
    width: 20%;
}

.self-advertisement .primary-advertisement-image {
    align-self: flex-end;
    left: 30%;
    pointer-events: none;
    width: 40%;
}

.self-advertisement .qr-code {
    margin-top: 1rem;
    width: 20%;
}

.self-advertisement-over-image {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.self-advertisement-over-image .article-content {
    margin: 15% auto 0;
    text-align: center;
    width: 45%;
}

.self-advertisement-over-image .article-content p {
    font-size: 16px;
}

.self-advertisement-over-image .article-supporting-images {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    overflow: hidden;
    position: relative;
}

.self-advertisement-over-image .background-image {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    width: 100%;
}

.self-advertisement-over-image .background-image {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    width: 100%;
}

.self-advertisement-over-image .mobile-content-wrapper {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    width: 100%;
    z-index: 1;
}

.self-advertisement-over-image .article-supporting-images .overlay-image {
    bottom: 0;
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    left: 50%;
    margin-top: auto;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, 100%);
    transition: transform 500ms ease-in 1s;
    width: 80rem;
    z-index: 1;
}

.self-advertisement-over-image .article-supporting-images.visible .overlay-image {
    transform: translate(-50%, 0);
}

.self-advertisement-over-image .pseudo-button {
    background-color: #00A0DF;
    color: #fff;
    display: block;
    padding: 0.75rem 2rem;
    margin: 1rem auto 0;
    transition: transform 300ms;
    width: fit-content;
}
.self-advertisement-over-image .pseudo-button:hover {
    background-color: #0089bf;
    text-decoration: none;
    transform: translateY(-10%);
}

@media screen and (max-width: 1200px) {
    .bottom-buttons-wrapper {
        row-gap: 1rem;
    }
    
    .bottom-buttons-wrapper:not(div.new-wrap) {
        align-items: center;
        flex-direction: column;
    }
    
    .bottom-buttons-wrapper > div:not(:last-child) {
        margin: 0;
    }
    
    .bottom-buttons-wrapper > div {
        width: 60%;
    }
    
    .bottom-buttons-wrapper > div,
    .bottom-buttons-wrapper > div > p {
        font-size: 20px;
    }
    
    .bottom-buttons-wrapper a.pseudo-button {
        padding: 0.5rem;
    }

    .self-advertisement:not(div.new-wrap) {
        flex-direction: column;
        padding: 4rem 2rem 0 2rem;
    }
    
    .self-advertisement .advertisement-content {
        left: -150%;
        margin-left: 4rem;
        width: 60%;
    }
    
    .self-advertisement .advertisement-content .app-images > button {
        width: calc(50% - 1rem);
    }
    
    .self-advertisement .advertisement-images {
        bottom: -150vh;
        min-height: 25rem;
    }
    
    .self-advertisement .advertisement-images .close-to-primary-left {
        left: 15%;
    }
    
    .self-advertisement .advertisement-images .close-to-primary-right {
        bottom: min(37vw, 77%);
        left: min(59vw, 67%);
    }
    
    .self-advertisement .primary-advertisement-image {
        aspect-ratio: 9 / 25;
        bottom: -20vw;
        left: 37%;
        width: min(38vw, 22rem);
    }
    
    .self-advertisement-over-image .article-content {
        margin: 5% auto -20%;
        width: 75%;
    }
    
    .self-advertisement-over-image .article-content p {
        font-size: min(17.5px, 4vw);
    }
    
    .self-advertisement-over-image .article-supporting-images {
        display: grid;
        grid-row: 2 / 2;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    
    .self-advertisement-over-image .article-supporting-images .overlay-image {
        width: 60rem;
    }
    
    .self-advertisement-over-image .mobile-content-wrapper {
        background-color: #EAEFF4;
    }
}

@media screen and (max-width: 800px) {
    .index-header {
        font-size: 25px;
        line-height: 1.25em;
    }
}

@media screen and (max-width: 600px) {
    
    .bottom-buttons-wrapper > div {
        width: 100%;
    }
    
    .bottom-buttons-wrapper:not(div.new-wrap) {
        margin: 2rem 2rem 4rem;
    }

    .home-page-article.half-screen {
    	flex-direction: column;
    }
    
    .home-page-article .half-screen-image-wrapper {
    	width: 90%;
    }
    
    .home-page-article.half-screen .half-screen-content {
    	padding: 1rem;
    	width: calc(100% - 2rem);
    }
    
    .self-advertisement .advertisement-content {
        margin: 2rem 1rem 8rem;
        width: 80%;
    }
    
    .self-advertisement .advertisement-images {
        min-height: 15rem;
    }
    
    .self-advertisement .primary-advertisement-image {
        bottom: -45vw;
        left: 5%;
        width: min(35vh, 49%);
    }
    
    .self-advertisement .advertisement-images .side-mobile-logo {
        aspect-ratio: 1 / 1;
        bottom: min(80%, 50vw);
        right: 10%;
        width: max(30%, 20vw);
    }
    
    .self-advertisement-over-image .article-content {
        margin: 10% auto -20%;
        width: 90%;
    }

    .self-advertisement-over-image .article-supporting-images .overlay-image {
        width: 45rem;
    }
    
    .self-advertisement-over-image .pseudo-button {
        font-size: 14px;
        font-weight: bold;
        width: 50%;
    }
}

@media screen and (max-width: 500px) {
    .self-advertisement .primary-advertisement-image {
        width: min(35vh, 55%);
    }
}

@media screen and (max-width: 400px) {
    .self-advertisement-over-image .article-content {
        margin: 10% auto 0;
    }
    
    .self-advertisement .primary-advertisement-image {
        left: 5%;
        bottom: -45vw;
        width: min(35vh, 67%);
    }
}