@media only screen and (min-width:20px) and (max-width:1200px){

    body > .html-container > .page {
        /*
        background-image: url(../../img/background-horizontal.png);
        background-position: bottom center;
        background-size: 100%;
        */
        background-image: none;
    }

    body > .html-container {
        background-color: #B3B3AB;
    }

    body > .html-container > .page > section {
        height: auto;
        background-color: #fff;
        background-size: 70%;
    }

    body > .html-container > .page > section > .wrapper {
        top: initial;
        transform: initial;
    }

    body > .html-container > .page > section > .wrapper > .content {
        width: 100%;
        text-align: center;
        /*padding-bottom: 20vh;*/
        padding-bottom: 0px;
    }

    body > .html-container > .page > section > .wrapper > .content > figure {
        margin: 0 auto;
        max-width: 240px;
    }

    body > .html-container > .page > section > .wrapper > .content > h1 {
        font-size: 24px;
    }

    body > .html-container > .page > section > .wrapper > .content > .button-container > .button > span {
        font-size: 20px;
    }

    body > .html-container > .page > section > .wrapper > .content > .button-container > text {
        margin: 0 auto;
    }

    footer {
        position: relative;
        overflow: visible;
    }
    
    footer::before {
        position: relative;
        display: block;
        width: 100%;
        height: 20vh;
        background-image: url(../../img/background-horizontal.jpg);
        background-position: top center;
        background-size: 100%;
        content: '';

    }

    /*
    footer >.wrapper::after {
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0px;
        height: 100%;
        background-color: #B3B3AB;
        content: '';
    }
        */

    footer > .wrapper {
        text-align: center;
    }

    footer > .wrapper > .block {
        width: auto!important;
    }

}