/*this css file use in image selector game where we drag a alphabaet and drop in bucket*/


.content {
    max-width: 30em;
    display: inline-block;
}

.grid__item:hover {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.grid__item:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.basket {
    width: 12em;
    display: inline-block;
}

.grid__item {
    height: 4.5em;
    font-size: 1.6em;
}

    .grid__item img {
        width: 80%;
    }

.container1 {
    width: 46em;
    margin: 0 auto;
}

.basket img {
    width: auto;
    max-width: 100%;
}

#jumparrow {
	position: absolute;
    margin-top:22%;
    margin-left:60px;
	-webkit-animation: jump 1s infinite;
	-moz-animation: jump 1s infinite;
	-o-animation: jump 1s infinite;
	-ms-animation: jump 1s infinite;
	animation: jump 1s infinite;
	cursor: pointer;
}

@media screen and (max-width: 70em) {
    #jumparrow {
        margin-top:30%;
    }
}

@media screen and (max-width: 57em) {
    h1 {
        font-size: 20px;
    }
}

@media screen and (max-width: 47em) {
    .grid__item {
        font-size: 1.3em;
    }

    .container1 {
        width: 35em;
    }

    .content {
        max-width: 25em;
    }

    .basket {
        width: 7em;
    }

    #jumparrow {
        margin-top:35%;
        margin-left:40px;
    }
}

@media screen and (max-width: 36em) {
    h1 {
        font-size: 15px;
    }

    .grid__item {
        font-size: 1em;
    }

    .container1 {
        width: 28em;
    }

    .content {
        max-width: 20em;
    }

    .basket {
        width: 7em;
    }
    #jumparrow {
        margin-top:45%;
        margin-left:40px;
    }
}

@media screen and (max-width: 27em) {
    h1 {
        font-size: 15px;
    }

    .grid__item {
        font-size: 1em;
    }

    .content {
        max-width: 16em;
    }

    .basket {
        width: 5em;
    }

    .container1 {
        width: 22em;
    }

    #jumparrow {
        margin-top:65%;
        margin-left:30px;
    }
}


@media screen and (max-width: 24em) {
    #jumparrow {
        margin-top:100%;
        margin-left:30px;
    }
}

@-webkit-keyframes jump {
	0% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 20px;
		-webkit-animation-timing-function: ease-out;
	}
	55% {top: 20px;
		-webkit-animation-timing-function: ease-in;}
	65% {top: 20px;
		-webkit-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-webkit-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
}

@-moz-keyframes jump {
	0% {top: 0;
		-moz-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 20px;
		-moz-animation-timing-function: ease-out;
	}
	55% {top: 20px;
		-moz-animation-timing-function: ease-in;}
	65% {top: 20px;
		-moz-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-moz-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-moz-animation-timing-function: ease-in;
	}
}

@-ms-keyframes jump {
	0% {top: 0;
		-ms-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 20px;
		-ms-animation-timing-function: ease-out;
	}
	55% {top: 20px;
		-ms-animation-timing-function: ease-in;}
	65% {top: 20px;
		-ms-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-ms-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-ms-animation-timing-function: ease-in;
	}
}

@keyframes jump {
	0% {
		top: 0;
		animation-timing-function: ease-in;
	}
	50% {
		top: 20px;
		animation-timing-function: ease-out;
	}
	55% {
		top: 20px; 
		animation-timing-function: ease-in;
	}
	65% {
		top: 20px; 
		animation-timing-function: ease-out;
	}
	95% {
		top: 0;		
		animation-timing-function: ease-in;
	}
	100% {
		top: 0;
		animation-timing-function: ease-in;
	}
}