.footer:not(.bold) .copyright {
    margin-bottom: 2em;
    display: none;
}

.app_wrap {
    width: 100%;
    position:absolute;
    text-align:center;
    background-color:white;
    min-height:550px;
}

.main-content .flex {
    overflow: auto;
}




.pumpa_anim_wrap {
    position: relative;
    width: 200px;
    height: 100%;
    margin-top: 30px;
    display: inline-block;
    animation: left_right 3s ease-in-out infinite alternate-reverse;
    transform-origin: 50% 100%;
}



.logo_pumpa {
    width: 150px;
    display: inline-block;
    margin-top: 3vh;
    margin-bottom: 2vh;
}


.logo_wrap {
    height: 180px;
    background: linear-gradient(297.8deg, #0D9799 2.31%, #00CFA4 99.55%);
    width: 100%;
    margin-bottom: 40px;
    margin-top:-30px;
}

.content {
    height: 55vh;
    min-height: 310px;
    justify-self: center;
}


.button_wrap {
    height: 40vh;
    min-height: 152px;
    align-self: start;
    max-width: 400px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    z-index:2;
}


.content_wrap {
    display: inline-grid;
    grid-template-rows: auto  auto;
    justify-items: center;
/*    height: 100vh;
*/    width: 100%;
    position: relative;
    padding: 0;
}

.landing_text {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: #000000;
    max-width: 200px;
    width: 100%;
    display: block;
    margin: 5px auto 20px auto;
}

.landing_header {
    font-family: Verdana, sans-serif;
    font-weight: 900;
    font-size: 32px;
    margin-top:40px;
    line-height: 1.2;
    color: #00CFA4;
    text-transform:uppercase;
    width: 100%;
    margin: 20px auto 40px auto;
    max-width: 250px;
/*    margin-bottom: 20px;
*/}

.landing_header_small {
    font-family: Verdana, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #000000;
    width: 100%;
    margin: auto;
    max-width: 300px;
}


.button {
    color: #fff;
    padding: 30px 15px;
    text-decoration: none;
    cursor: pointer;
    min-width: 200px;
/*    text-transform: uppercase;
*/    display: block;
    width: 100%;
    line-height: 1.4;
    text-align: center;
    margin: 15px auto;
    position: relative;
    overflow: hidden;
    font-size: 20px;
    border-radius: 20px;
    transition: 0.3s ease-in-out box-shadow;
}



.button_back {
    color: #00AEEF;
    padding: 10px 15px;
    text-decoration: none;
    border: 2px solid #00AEEF;
    cursor: pointer;
    min-width: 200px;
    /* text-transform: uppercase; */
    display: block;
    width: 20px;
    line-height: 1.4;
    text-align: center;
    margin: 30px auto 10px auto;
    position: relative;
    overflow: hidden;
    font-size: 16px;
    border-radius: 20px;
    transition: 0.3s ease-in-out box-shadow;
}



.button_back:visited {
    color: #00AEEF;
    text-decoration: none;
    border: 2px solid #00AEEF;

}

    .button_back:hover {
        opacity: 0.5;
        color: #00AEEF;
        text-decoration: none;
        border: 2px solid #00AEEF;
    }

.ar_back {
    width: 16px;
    margin-top: -3px;
}



.violet {
    background-color: #6746d7;
    background: linear-gradient(102.75deg, #8b6cf5 0%, #6746d7 100%);
    box-shadow: 0 3px 0 #5537ba, 0 6px 0 0 rgba(0, 0, 0, 0.10);
}




.purple {
    background-color: #ce47b9;
    background: linear-gradient(102.75deg, #dd5fce 0%, #bf35a9 100%);
    box-shadow: 0 3px 0 #991089, 0 6px 0 0 rgba(0, 0, 0, 0.10);
}

.orange_1 {
    background-color: #ffb144;
    background: linear-gradient(284.3deg, #FF9900 0%, #FCEC96 120%);
    box-shadow: 0 3px 0 #FD9C00, 0 6px 0 0 rgba(0, 0, 0, 0.10);
}


    .green:hover .but_play, .violet:hover .but_play, .orange_1:hover .but_play, .purple:hover .but_play {
        transform: scale(1.2);
        transition: 0.4s ease-in-out;
    }


.but_play {
    position: absolute;
    right: -30px;
    bottom: -30px;
    transition: 0.4s ease-in-out;
}




.but_icon {
width:60px;
height:60px;
margin-right:20px;
}

.progress_line {
    width: 50%;
    height: 4px;
    background-color: white;
    display: inline-block;
    position: absolute;
    left: 20px;
    top: 23px;
    border-left: 10px solid #0d9799;
}


.progress_button {
    background: linear-gradient(102.75deg, #01CEA4 -6.01%, #09AC9E 109.6%);
    color: #fff;
    padding: 11px 15px;
    text-decoration: none;
    cursor: pointer;
    display: block;
    width: 80px;
    line-height: 1.0;
    text-align: center;
    height: 40px;
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 18px;
    border-radius: 30px;
    transition: 0.3s ease-in-out box-shadow;
    box-shadow: 0 2px 0 #0d9799;
}


.progress_button:hover {
  
    color: #fff;
    text-decoration:none;
    box-shadow: 0 2px 0 #0d9799;
    opacity:0.5;
}

.progress_text {
    display: block;
    position: absolute;
    right: 86px;
    font-size: 18px;
    font-weight: 800;
    padding: 0 20px;
    background-color: #aff3e4;
    top: 13px;
    color: #0C5D8A;
}

.green {
    background: linear-gradient(102.75deg, #01CEA4 -6.01%, #09AC9E 109.6%);
    box-shadow: 0 3px 0 #0d9799, 0 6px 0 0 rgba(0, 0, 0, 0.10);
}

.button:hover, .button:visited {
    color: white;
    text-decoration: none;
}

.progress_wrap {
    width: 100%;
    background-color: #aff3e4;
    position: relative;
    padding: 10px;
    height: 50px;
    max-width: 300px;
    margin: auto;
    border-radius: 100px;
    margin-bottom: 40px;
}

/*.green:hover {
    color: white;
    box-shadow: 0 0px 0px 10px rgba(1, 206, 164, 0.10), 0 0px 0px 6px rgba(1, 206, 164, 0.26);
    text-decoration: none;
    transition: 0.4s ease-in-out;
}

.violet:hover {
    color: white;
    box-shadow: 0 0px 0px 10px rgba(1, 55, 206, 0.10), 0 0px 0px 6px rgba(139, 108, 245, 0.33);
    text-decoration: none;
    transition: 0.4s ease-in-out;
}*/
.pumpa_pics {
    height: 100%;
    width: 100%;
    min-height: 280px;
    max-width: 400px;
    display: block;
    margin: 0 auto -200px auto;
}

.img_wrap {
    display: block;
    position: relative;
    height: 55%;
    margin-top: 20px;
    margin-bottom: 4vh;
}
/*picture animation*/


.slider_container_animation_4 {
    width: 418px;
    height: 430px;
    display: block;
    position: absolute;
    padding-top: 20px;
    top: -112px;
    right: -20px;
    transform: scale(.9);
}



.joy_im_1 {
    width: 100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;

}


.joy_anim_1 {
    animation: joy_m_1 10s infinite ease-in-out;
}



.joy_anim_2 {
    animation: joy_m_2 12s infinite ease-in-out;
}

.joy_anim_3 {
    animation: joy_m_3 8s infinite ease-in-out;
}


@keyframes joy_m_1 {
    0%, 100% {
    transform:translateY(0)
    }


    50% {
        transform: translateY(-10%)
    }
}


@keyframes joy_m_3 {
    0%, 100% {
        transform: translateY(0)
    }


    50% {
        transform: translateY(-15%)
    }
}




@keyframes joy_m_2 {
    0%, 100% {
        transform: translateY(0)
    }


    50% {
        transform: translateY(20%)
    }
}


@media screen and (max-width: 320px) {

    .but_icon {
        width: 60px;
        height: 60px;
        margin-right: 10px;
    }
}


@media screen and (max-height: 400px) 
{
    .content_wrap {
        grid-template-rows: 160px auto;
        justify-items: center;
    }
}






@media screen and (min-height: 830px) {

    .pumpa_anim_wrap {
            height: 200px !important;

    }

    .content_wrap {
        grid-template-rows: 210px auto;
 
    }
}





@media screen and (max-height: 400px) {

    .logo_pumpa {
        width: 120px;
        display: inline-block;
        margin-top: 2vh;
        margin-bottom: 0vh;
    }

    .pumpa_pics {
        height: 100%;
        width: 100%;
        min-height: 200px;
        max-width: 200px;
        max-height: 200px;
        display: block;
        margin: 0 auto -200px auto;
    }

    .landing_header {
        font-size: 26px;
    }

    .landing_text {
        margin: 1vh auto 2vh auto;
    }

    .landing_header_small {
        font-size: 18px;
        max-width: 280px;
    }

    .app_wrap {
        min-height: 500px;
    }

    .logo_wrap {
        margin-bottom: 5vh;
        margin-top: -40px;
        color: rgba(110, 110, 110, 0.40);
    }


    .but_icon {
        width: 60px;
        height: 60px;
        margin-right: 20px;
    }


    .progress_wrap {
        margin-bottom: 40px;
    }


    .button {
        padding: 5px 15px;
    }

    .content_wrap {
        grid-template-rows: 160px auto;
        justify-items: center;
    }


    /*   .img_wrap {
        display: block;
        position: relative;
        height: 40%;
        margin-bottom: 2vh;
    }*/


    /*   .landing_header {
     
        font-size: 24px;
 
    }*/
}