@media (max-width: 820px) {
    body, html{
        min-width: 100px;
        min-height: 0 !important;
        overflow: auto;
        overflow-x: hidden;
    }

    header{
        height: auto;
        margin-top: 20px;
    }
    .header-container{
        width: 100%;
    }
    .header-wrapper:first-child{
        transform: translateY(-100px);
        opacity: 0;
        animation: header-anim 1.5s forwards;
    }
    .header-wrapper{
        transform: translateY(-100px);
        opacity: 0;
        animation: header-anim 2s forwards;
        animation-delay: .25s;
    }
    @keyframes header-anim {
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }
    .header-container:last-child{
        display: none;
    }

	main{
        flex-direction: column !important;
        height: 650px;
    }
    .main-container, .main-wrapper, .main-elements>p{
        width: 100%;
    }
    .main-container:first-child{
        height: 40%;
    }
    .main-container:last-child{
        height: 60%;
    }
    .main-elements>p{
        text-align: center;
    }
    .main-container-bg {
        top: 0%;
    }
    .main-video-bg{
        transform: translate(0%, 0%);
        width: 100%;
        animation: anim-vid 1s forwards;
        animation-delay: 1.5s;
        height: 62%;
    }
    @keyframes anim-vid {
        100%{
            transform: translate(-7%, 7%);
        }
    }
    .button-marxiz::before{
        transform: translate(0%, 0%);
        animation: anim-btn 1s forwards;
        animation-delay: 1.9s;
        z-index: -1;
    }
    @keyframes anim-btn {
        100%{
            transform: translate(1%, 10%);
        }
    }
    .main-video{
        width: 70%;
        height: 90%;
    }
    .main-elements:nth-child(1){
        height: 65%;
        font-size: 40px;
        transform: translateX(-500px);
        opacity: 0;
        animation: anim-main 1s forwards;
    }
    .main-elements:nth-child(2) {
        height: 30%;
        font-size: 30px;
        transform: translateX(500px);
        opacity: 0;
        animation: anim-main 1s forwards;
        animation-delay: .3s;
    }
    .main-elements:nth-child(3) {
        display: none;
    }
    @keyframes anim-main {
        100%{
            opacity: 1;
            transform: translateX(0);
        }
    }
    .button-marxiz{
        width: 70%;
        background-color: rgba(255, 255, 255, 0);
        
    }
    .button-marxiz::before{
        background-color: rgba(255, 255, 255, 0);
    }
    .button-marxiz>p{
        display: none;
    }
    .marxiz-mb{
        display: flex;
        align-items: center;
        height: 15%;
        margin-bottom: 20px;
        z-index: 1;
    }
    .fix-top{
        transform: translateY(-40px);
        z-index: 1;
    }
    .main-video>iframe{
        width: 100%;
        height: 60%;
        left: 0;
        animation: anim-iframe 2s forwards;
        transform: translateY(-110px);
    }
    .main-video-bgi{
        height: 60%;
        left: 0;
        animation: anim-iframe 2s forwards;
        transform: translateY(-110px);
    }
    @keyframes anim-iframe {
        100%{
            transform: translateY(0);
        }
    }
    .main-container-bg{
        top: 30%;
        height: 70%;
        left: 35%;
        width: 65%;
    }
    .main-video-title{
        text-align: center;
        padding: 0;
        opacity: .5;
        animation: anim-title 1s forwards;
        animation-delay: 2s;
    }
    
    @keyframes anim-title {
        100%{
            opacity: 1;
        }
    }

    footer{
        height: auto;
        
    }
    .footer-wrapper{
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px;
    }
    .footer-elements {
        width: 50%;

    }
    
    .footer-elements-text{
        font-size: 17px;
    }
    .footer-elements-icon{
        height: 100%;
    }
    .footer-elements:last-child{
        margin-top: 10px;
    }
}
@media (min-height: 836px){
    main{
        height: 750px;
    }
}

@media (max-width: 640px) {
    
    .header-wrapper:last-child>p{
        font-size: 3vw;
    }
    .main-elements:nth-child(1){
        font-size: 5.9vw;
    }
    .main-elements:nth-child(2) {
        font-size: 20px;
    }
    .footer-elements-text{
        font-size: 2.5vw;
    }
    .marxiz-mb{
        font-size: 3.5vw;
    }
    .main-video{
        width: 90%
    }
    .main-elements:nth-child(1){
        padding-bottom: 0 !important;
    }
    .main-elements:nth-child(2){
        padding-top: 0 !important;
    }
    .main-video-bgi{
        height: 60%;
    }
    .marquiz__button{
        font-size: 13px !important;
    }
}

@media (min-width: 1979px) {
    .header-wrapper:last-child{
        font-size: 30px;
    }
    .header-container{
        font-size: 21px;
    }
    .main-elements:nth-child(1){
        font-size: 50px;
    }
    .main-elements:nth-child(2){
        font-size: 40px;
    }
    .button-marxiz{
        font-size: 34px;
    }
    .footer-elements-text{
        font-size: 32px;
    }
    .main-video-title{
        font-size: 35px;
    }

}