@media all and (min-height: 1px){
    #app{
        max-width: 350px;
    }

    .logo{
        max-width: 65%;
        margin-bottom: 7rem;
    }

    .btn {
        width: 16rem;
        height: 3.6rem;
        line-height: 3.6rem;
    }

    .btn span {
        font-size: 1.4rem;
    }

    .intro--text{
        max-width: 300px;
    }

    .intro--text p{
        font-size: 1.6rem;
        line-height: 1.8rem;
    }

    .swiper--navigation--button {
        width: 40px;
        height: 66px;
        margin-top: -33px;
    }

    .hero-select--text {
        font-size: 1.6rem;
        line-height: 1.8rem;
        max-width: 300px;
    }

    .hero-select--title {
        font-size: 2.5rem;
    }

    .fight--flash{
        transform: translate(-50%, -50%) rotate(-330deg);
        margin-top: -20px;
    }
}

@media all and (min-height: 600px){
    #app{
        max-width: 480px;
    }

    .btn {
        width: 26rem;
        height: 5.2rem;
        line-height: 5.2rem;
    }

    .btn span {
        font-size: 2rem;
    }
}

@media all and (min-height: 768px) and (min-width: 768px){
    #app{
        max-width: 614px;
    }

    .logo{
        max-width: 50%;
        margin-bottom: 16rem;
    }

    .btn {
        width: 38rem;
        height: 7.1rem;
    }

    .btn span {
        font-size: 2.5rem;
    }

    .btn.btn-small {
        width: 19rem;
        height: 6rem;
    }

    .btn.btn-small-font span {
        font-size: 1.6rem;
        line-height: 1;
    }

    .intro--text{
        max-width: 500px;
    }

    .intro--text p{
        font-size: 2.3rem;
        line-height: 2.8rem;
    }

    .swiper--navigation--button {
        width: 60px;
        height: 100px;
        margin-top: -50px;
    }

    .hero-select--text {
        font-size: 2.4rem;
        line-height: 2.9rem;
        max-width: 500px;
    }

    .hero-select--title {
        font-size: 4rem;
    }


    .training--text {
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 1.6rem;
        line-height: 1.8rem;
        text-align: center;
        color: #FFFFFF;
    }

    .training--text {
        font-size: 2.2rem;
        line-height: 2.8rem;
        max-width: 400px;
        margin: auto;
        display: block;
    }

    .training--description {
        max-width: 500px;
        margin: auto;
    }

    .fight--question--step,
    .training--step{
        font-size: 1.8rem;
    }

    .fight--enemy--title span, .fight--hero--title span{
        font-size: 2.2rem;
    }

    .fight--question--text{
        font-size: 3rem;
        line-height: 3.6rem;
    }

    .fight--answer--text {
        font-size: 2.4rem;
        line-height: 2.8rem;
    }

    .fight--answer--title{
        font-size: 3.0rem;
    }

    .fight--result--text{
        font-size: 2.4rem;
        line-height: 2.9rem;
    }

    .fight--result--staff{
        max-width: 400px;
        margin: auto;
    }

    .fight--result--title {
        font-size: 3.2rem;
        line-height: 3.6rem;
    }

    .fight--enemy--title span, .fight--hero--title span {
        font-size: 3rem;
        line-height: 1;
    }

    .fight--flash.fight--flash-1{
        transform: translate(-50%, -50%) rotate(20deg);
        margin-top: -20px;
    }

    .fight--flash.fight--flash-2{
        transform: translate(-50%, -50%) rotate(-175deg);
        margin-top: 20px;
    }

    .btn.btn-fb, .btn.btn-viber, .btn.btn-telegram {
        display: block;
        width: 12rem;
        height: 5.6rem;
    }

}

@media all and (orientation: portrait){

    #app{
        max-width: 100%;
    }
}

@media all and (orientation: landscape){
    body{
        background: url('/assets/body-bg.jpg') no-repeat center/cover;
    }
}