@media only screen and (min-width: 13.9em) {

    input.input-circle {
        position: fixed;
        left: -10px;
        top: -10px;
    }

    .sky, #start-game{position: relative; overflow: hidden; cursor: pointer;}

    div#start-game div.sky img.d-block.d-sm-none {position: absolute; top: 20px;}

    .sky, .wrapper {
        height: 400px;
        background: -webkit-linear-gradient(top, hsla(210, 70%, 80%, 1) 0%, hsla(210, 50%, 100%, 1) 100%);
        position: relative;
        background: #2888b6;
        background: -moz-linear-gradient(top, #2888b6 1%, #fef4c7 100%);
        background: -webkit-linear-gradient(top, #2888b6 1%, #fef4c7 100%);
        background: linear-gradient(to bottom, #2888b6 1%, #fef4c7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2888b6', endColorstr='#fef4c7', GradientType=0);
        font-family: 'Roboto', sans-serif;
    }


    /*play area*/
    .wrapper {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
        counter-reset: butterflies;
        cursor: url(../img/juego/cursor.png), auto;
    }

    /*count dead butterflies*/
    .input-circle:checked {
        counter-increment: butterflies;
    }

    .sum {
        z-index: 10;
        font-size: 0.75em;
    }

    /*print to screen dead butterflies*/
    .sum:after {
        content: counter(butterflies);
    }

    .input-circle~.mariposa {
        opacity: 0;
        transition: 0.3s cubic-bezier(0, .43, 1, 0);
        animation: move 8s infinite alternate;
    }

    .input-circle1:not(:checked)~.mariposa1,
    .input-circle2:not(:checked)~.mariposa2,
    .input-circle3:not(:checked)~.mariposa3,
    .input-circle4:not(:checked)~.mariposa4,
    .input-circle5:not(:checked)~.mariposa5,
    .input-circle6:not(:checked)~.mariposa6 {
        opacity: 1;
    }

    .input-circle1:checked~.mariposa1 span,
    .input-circle2:checked~.mariposa2 span,
    .input-circle3:checked~.mariposa3 span,
    .input-circle4:checked~.mariposa4 span,
    .input-circle5:checked~.mariposa5 span,
    .input-circle6:checked~.mariposa6 span {
        display: block;
    }

    .mariposa {
        position: absolute;
        left: 0;
        cursor: url(../img/juego/cursor.png), auto;
    }

    .mariposa>span {
        display: none;
        position: absolute;
        z-index: 2;
        left: 15%;
        bottom: 10%;
        background: url(../img/juego/estrella-mobile.png);
        width: 30px;
        height: 30px;
    }

    .mariposa1 {
        top: 50px;
        animation-delay: -2s !important;
        transform: scale(0.9);
    }

    .mariposa2 {
        top: 100px;
        animation-delay: -4s !important;
        transform: scale(0.5);
    }

    .mariposa3 {
        top: 0px;
        animation-delay: -3s !important;
        transform: scale(1.4);
    }

    .mariposa4 {
        top: 50px;
        animation-delay: -12s !important;
        transform: scale(0.9);
    }

    .mariposa5 {
        top: 100px;
        animation-delay: -16s !important;
        transform: scale(0.5);
    }

    .mariposa6 {
        top: 125px;
        animation-delay: -17s !important;
        transform: scale(1.4);
    }


    @keyframes move {
        0% {
            left: 0%;
        }

        20% {
            left: 20%;
            top: 50%;
        }

        40% {
            top: 30%;
            left: 60%;
        }

        60% {
            top: 80%;
            left: 80%;
        }

        80% {
            top: 10%;
            left: 20%:
        }

        100% {
            top: 30%;
            left: 20%;
        }
    }


    .timer {
        background: transparent;
        width: 200px;
        height: 65px;
        position: absolute;
        background: url(../img/juego/timer-white.png);
        top: 6%;
        /*right: 0%;*/
        left: 10px;
    }

    .timer span {
        display: block;
        background: url(../img/juego/timer.png);
        width: 200px;
        height: 65px;
        animation: timer 10s linear;
    }

    .timer span:before {
        content: "Tiempo restante";
        display: block;
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        top: 5px;
        bottom: 0;
        text-align: center;
        line-height: 50px;
        font-size: 1em;
        font-weight: bold;
    }


    @keyframes timer {
        0% {
            width: 10px;
        }

        100% {
            width: 200px;
            display: block;
        }
    }


    .gameover {
        position: absolute;
        z-index: 100000;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.8);
        animation: gameover 10s linear forwards;
        color: white;
        font-weight: bold;
        text-align: center;
        text-indent: 0;
        font-size: 1.8em;
        line-height: 380px;
    }


    @keyframes gameover {
        0% {
            left: -5000px;
            bottom: 100%;
        }

        97% {
            left: -5000px;
            bottom: 100%;
        }

        100% {
            left: 0px;
        }
    }


    /*-------------- body of the butterfly --------------*/

    .mariposa {
        position: absolute;
        margin-top: -20px;
        margin-left: -10px;
        width: 50px;
        height: 50px;
        animation: planeo 0.8s linear infinite;
        z-index: 999;
    }

    .mariposa:after,
    .mariposa:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
    }

    .mariposa1:after,
    .mariposa2:after,
    .mariposa3:after {
        margin-top: -20px;
        margin-left: -15px;
        width: 40px;
        height: 32px;
        transform: rotateZ(45deg);
        background: url(../img/juego/mariposa-mobile.png);
    }

    .mariposa4:after,
    .mariposa5:after,
    .mariposa6:after {
        margin-top: -20px;
        margin-left: -15px;
        width: 40px;
        height: 38px;
        transform: rotateZ(45deg);
        background: url(../img/juego/mariposa-verde-mobile.png);
    }


    /*-------------- butterfly animation --------------*/

    @keyframes planeo {
        40% {
            transform: rotateZ(2deg) translateX(2px) translateY(10px) translateZ(0);
            line-height: 16px;
            font-size: 0.6em;
        }

        80% {
            transform: rotateZ(-2deg) translateX(5px) translateY(8px) translateZ(0);
        }
    }



    /*-------------- carnivoras --------------*/


    .planta {
        position: absolute;
        z-index: 3;
    }

    .montana {
        position: absolute;
        bottom: -50px;
        z-index: 2;
    }

    .planta1 {
        width: 100px;
        height: 322px;
        left: 15px;
        bottom: -140px;
    }

    .planta2 {
        width: 219px;
        height: 286px;
        left: 460px;
        bottom: 25px;
    }

    .planta3 {
        width: 225px;
        height: 327px;
        right: -10px;
        bottom: 55px;
    }

    .montana1 {
        width: 134px;
        height: 252px;
        left: 0px;
        bottom: -150px;
    }

    .montana2 {
        width: 419px;
        height: 203px;
        left: 250px;
    }

    .montana3 {
        width: 225px;
        height: 220px;
        right: 0px;
    }




}



/*-----------------------------------------------------
8. Media Queries
------------------------------------------------------*/



@media only screen and (min-width: 23.9em) {
}

@media only screen and (min-width: 33.9em) {
}

@media only screen and (min-width: 43.9em) {
    .sky, .wrapper {height: 300px;}
}

@media only screen and (min-width: 53.9em) {
    /*body {background-color: blue}*/
    .sky, .wrapper {height: 400px;}

    .planta1 {
        width: 234px;
        bottom: 85px;
    }
    .montana1 {
        width: 234px;
        bottom: -50px;
    }
    .mariposa1:after,
    .mariposa2:after,
    .mariposa3:after {
        margin-top: -33px;
        margin-left: -35px;
        width: 80px;
        height: 64px;
        transform: rotateZ(45deg);
        background: url(../img/juego/mariposa.png);
    }

    .mariposa4:after,
    .mariposa5:after,
    .mariposa6:after {
        margin-top: -38px;
        margin-left: -41px;
        width: 80px;
        height: 75px;
        transform: rotateZ(45deg);
        background: url(../img/juego/mariposa-verde.png);
    }

    .gameover {
        font-size: 5em;
        line-height: 550px;
    }

    .sum {
        font-size: 1em;
    }

    .timer {
        /*right: 9%;*/
        left: 50px;
    }

    .mariposa>span {
        width: 60px;
        height: 60px;
        background: url(../img/juego/estrella.png);
        left: 0%;
        bottom: 0%;
    }



}

@media only screen and (min-width: 73.9em) {
    /*body {background-color: purple}*/
    .sky, .wrapper {height: 550px;}
}