.grid {
	margin: 0 auto;
	/* max-width: 50em; */
	padding: 0 1em;
}

.grid__item {
	font-size: 2em;
	display: inline-block;
	/* margin: 0.2em 0.1em; */
	/* padding-top: 2.25em; */
	width: 5.5em;
	height: 5.5em;
	border-radius: 4px;
	/* background: #403E45; */
	color: #9ae854;
	text-align: center;
}

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

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

/* .is-dragging {
	background: #4e4c52;
} */

.is-active {
	z-index: 100;
}

.is-dropped {
	opacity: 0;
	-webkit-transform: scale3d(0.7,0.7,1) !important;
	transform: scale3d(0.7,0.7,1) !important;
}

.is-complete {
	opacity: 1;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s !important;
	transition: opacity 0.3s, transform 0.3s !important;
	-webkit-transform: scale3d(1,1,1) !important;
	transform: scale3d(1,1,1) !important;
}

.animate {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.drop-area {
	position: fixed;
	top: 100%;
	left: 0;
	z-index: 99;
	width: 100%;
	height: 17em;
	/* background: #a63070; */
	text-align: center;
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6,0,0.4,1);
	transition: transform 0.5s cubic-bezier(0.6,0,0.4,1);
	-webkit-transform: translate3d(0,-70%,0) scale(0.5);
	transform: translate3d(0,-70%,0) scale(0.5);
}

.drop-area.show {
	-webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.drop-area > div {
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 0.4s 0.3s;
	transition: transform 0.4s 0.3s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.drop-area.show > div {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.drop-area__item {
	position: relative;
	display: inline-block;
	margin: 1.25em 1% 1% 1%;
	/* max-width: 13em; */
	width: 60%;
	height: 12em;
	border-radius: 4px;
	background: url("../assets/plato-back.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-transition: -webkit-transform 0.3s, background 0.3s;
	transition: transform 0.3s, background 0.3s;
	/* -webkit-backface-visibility: hidden; */
}

.drop-area__item.highlight {
	-webkit-transform: scale3d(1.08,1.08,1);
	transform: scale3d(1.08,1.08,1);
}

.drop-area__item::before,
.drop-area__item::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: rgba(0,0,0,0.35);
	font-size: 1.8em;
	margin-top: -0.35em;
	font-family: FontAwesome;
	pointer-events: none;
}

.drop-area__item::before {
	content: '\f067';
}

.drop-feedback.drop-area__item::before {
	opacity: 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
}

.drop-area__item::after {
	color: rgb(0, 121, 10);
	content: '\f00c';
	font-size: 3em;
	margin-top: -0.5em;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1);
}

.drop-feedback.drop-area__item::after {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.dummy,
.dummy::after {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0.25em 0;
	height: 0.65em;
	border-radius: 2px;
	background: rgba(0,0,0,0.15);
	/* -webkit-backface-visibility: hidden; */
}

.drop-area__item .front {
	position: absolute;
	left: 0;
	display: inline-block;
	width: 100%;
	height: 12em;
	border-radius: 4px;
	background: url("../assets/plato-front.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-transition: -webkit-transform 0.3s, background 0.3s;
	transition: transform 0.3s, background 0.3s;
}

.dummy {
	width: 90%;
}

.dummy::after {
	width: 60%;
	content: '';
}

.drop-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	pointer-events: none;
}

.drop-area.show + .drop-overlay {
	opacity: 1;
}

.helper {
	position: absolute !important;
	margin: 0;
}


@media only screen and (orientation: landscape) and (max-width: 2000px){
	
	.grid__item {
/* 		margin: 1em 0em; */
		padding-top: 0.2em;
/* 		width: 11.3vw; */
		width: 19vh;
		height: 17vh;
		font-size: inherit;
	}
	.objeto {
		max-width: 17vw;
		top: -25%;
	}
	.plato{
		margin-top: 20px;
	}
	.plato .objeto {
		width: 32%;
		top: -30%;
	}
	.aviso h1,
	.aviso h2,
	.aviso button{ 
		font-size: 1.5rem;
	}
	.icono img{
		max-height: 70px;
	}
}


@media only screen and (orientation: landscape) and (min-width: 1280px) and (max-width: 1439px){	
	.grid__item {
/* 		margin: 1em 0em; */
		padding-top: 0.2em;
		height: 18vh;
		font-size: inherit;
	}
	
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	.grid__item {
		margin: 0.2em 0em;
		width: 4.5em;
		height: 4.5em;
	}
}

@media only screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px){
	
	
	.grid__item {
		margin: 0.2em 0em;
		/* padding-top: 2.25em; */
	}

	.h1, h1 {
		font-size: 1.6rem;
	}
	.h3, h3 {
		font-size: 1.25rem;
	}
	
}
@media only screen and (orientation: landscape) and (min-width: 800px) and (max-width: 1023px){
	
	
	.grid__item {
		margin: 0.2em -0.5em;
		/* padding-top: 2.25em; */
	}

	.h1, h1 {
		font-size: 1.6rem;
	}
	.h3, h3 {
		font-size: 1.25rem;
	}
}


@media (max-width: 900px) {
	.grid__item {
		margin: 0.2em -0.5em;
		width: 4em;
		height: 3.5em;
		/* padding-top: 2.25em; */
	}

	.h1, h1 {
		font-size: 1.6rem;
	}
	.h3, h3 {
		font-size: 1.25rem;
	}
}



/* ------------------------------------------------------------------------------------------ */
/* --------------------------------------- LANSCAPE ----------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------ IPHONE XS MAX --------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
/* @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 896px) 
    and (-webkit-device-pixel-ratio : 3)
	and (orientation : landscape) {
		.grid__item {
			font-size: 1.5em ;
			margin: 0em 0.5em ;
			padding-top: 1em ;
			width: 5.5em;
			height: 5.5em;
		}

	 } */



/* ------------------------------------------------------------------------------------------ */
/* --------------------------------------- LANSCAPE ----------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
/* --------------------------------------- IPHONE X ----------------------------------------- */
/* ------------------------------------------------------------------------------------------ */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) {
	.grid__item {
		font-size: 1.2em ;
		margin: 0em 0.2em ;
		padding-top: 1em ;
	}
	.juego .logo {  
		top: 0em;
		position: relative;
	}
	
	.container {
		max-width: initial;
		padding-left: env(safe-area-inset-left);
    	padding-right: env(safe-area-inset-right);
	}
	.aviso .col-12 {
		max-width: 70vw;
	}
	.score {
		margin: 0px;
	}
	.score .h1,.score h1 {
		font-size: 1.5em;
		line-height: 1.3em;
	}
	.h1, h1 {
		font-size: 1.5rem;
	}
	.h3, h3 {
		font-size: 1rem;
	}
	.aviso .h1, h1 {
		font-size: 1.4em;
    	line-height: 1em;
	}
	.aviso .h2, h2 {
		font-size: 1.2em;
		line-height: 1em;
	}
	.grid__item {
		font-size: 1.2em;
		margin: 0.1em 0.5em ;
		padding-top: 0;
		/* width: 5.5em;
		height: 5.5em; */
	}
	#elementos .grid__item::after {
		padding: 2px 9px;
		font-size: 0.7em;
	}
	.drop-area {
		top: 110%;
	}
	
	.aviso .icono img{
		width: 50px;
	}
	.aviso button {
		font-size: 1.4rem;
		margin-top: -6px;
		padding: 6px 30px;
	}
	.plato .objeto {
		width: 38%;
		top: -80%;
	}
	.plato .drop-area__item,
	.plato .drop-area__item .front {
		height: 4em;
	}

	.objeto {
		top: -26%;
		max-width: 23vw;
	}
	
	.plato {
		margin-top: 0px;
	}
	.p-md-4{
		padding: 0.7rem!important;
	}
	.pt-md-4, .py-md-4{
		padding-top: 0.5rem!important;
	}

	/* .grid__item {
		font-size: 1.2em ;
		margin: 0em 0.2em ;
		padding-top: 1em ;
	}
	.aviso button {
		font-size: 1.5rem;
		margin-top: 8px;
	}
	.aviso .h1, h1 {
		font-size: 1.7rem;
		line-height: 1.5em;
	}
	.aviso .h2, h2 {
		font-size: 1.7rem;
		line-height: 1.5rem;
	}
	.aviso .icono img{
		width: 70px;
	}
	.p-md-4{
		padding: 0.7rem!important;
	}
	.pt-md-4, .py-md-4{
		padding-top: 0.5rem!important;
	}
	.objeto{
		top: -20%;
		max-width: 20vw;
	} */
}






/* ----------------------------------------------------------------------------------------------------- */
/* -------------------------------------------- LANSCAPE  ---------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------- */
/* --------------------------------------- IPHONE 6, 7, 8 PLUS ----------------------------------------- */
/* ----------------------------------------------------------------------------------------------------- */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { 
	.container {
		max-width: initial;
	}
	.aviso .col-12 {
		max-width: 70vw;
	}
	.score {
		margin: 0px;
		transform: translate(0%, 20%);
	}
	.score .h1,.score h1 {
		font-size: 1.5em;
		line-height: 1.3em;
	}
	.h1, h1 {
		font-size: 1.5rem;
	}
	.h3, h3 {
		font-size: 1rem;
	}
	.aviso .h1, h1 {
		font-size: 1.4em;
    	line-height: 1em;
	}
	.aviso .h2, h2 {
		font-size: 1.2em;
		line-height: 1em;
	}
	.grid__item {
		margin: 0em 0em ;
	}
	.drop-area {
		top: 108%;
	}
	
	.aviso .icono img{
		width: 50px;
	}
	.aviso button {
		font-size: 1.4rem;
		margin-top: -6px;
		padding: 6px 30px;
	}
	.plato .objeto {
		width: 38%;
		top: -80%;
	}
	.plato .drop-area__item,
	.plato .drop-area__item .front {
		height: 4em;
	}
}

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------ LANSCAPE  ------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
/* --------------------------------------- IPHONE 6, 7, 8 ----------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 
	.container {
		max-width: initial;
	}
	.grid {
		padding:  1em 1em;
	}
	.grid__item {
		font-size: 1.1em ;
		margin: 0.2em 0em ;
		padding-top: 0px ;
	}
	.score {
		margin: 0px;
		transform: translate(0%, 20%);
	}
	.score .h1,.score h1 {
		font-size: 1.5em;
		line-height: 1.3em;
	}
	.h3, h3 {
		font-size: 1.2em;
	}
	.aviso .col-12 {
		max-width: 80vw;
	}
	.aviso .h1, h1 {
		font-size: 1.4em;
    	line-height: 1em;
	}
	.aviso .h2, h2 {
		font-size: 1.1em;
		line-height: 1em;
	}
	
	.aviso .icono img{
		width: 50px;
	}
	.aviso button {
		font-size: 1.1rem;
		margin-top: -6px;
		padding: 6px 30px;
	}
	.drop-area {
		top: 110%;
	}
	#elementos .grid__item::after {
		padding: 2px 9px;
		font-size: 0.8em;
	}
	.objeto {
		max-width: 20vw;
		top:0%;
	}
	.plato .drop-area__item,
	.plato .drop-area__item .front {
		height: 3em;
	}
	.plato {
		margin-top: 0px;
	}
	.plato .objeto {
		width: 25%;
	}
}


/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------- LANSCAPE  ------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* ---------------------------------------- iPhone 5 & 5S ----------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
	.grid__item {
		font-size: 0.9em;
		margin: 0.7em 0em;
		padding-top: 0em ;
	}
	.score {
		margin: 0px;
		transform: translate(0%, 20%);
	}
	.h1, h1 {
		font-size: 1.5rem;
	}
	.h3, h3 {
		font-size: 1rem;
	}
	.aviso .col-12 {
		max-width: 80vw;
	}
	.aviso .h1, h1 {
		font-size: 1.2em;
    	line-height: 1em;
	}
	.aviso .h2, h2 {
		font-size: 1.1em;
		line-height: 1em;
	}
	
	.aviso .icono img{
		width: 50px;
	}
	.aviso button {
		font-size: 1.1rem;
		margin-top: -6px;
		padding: 6px 30px;
	}
	#elementos .grid__item::after {
		padding: 2px 9px;
		font-size: 0.8em;
	}
	.drop-area {
		top: 112%;
	}
	.objeto {
		max-width: 20vw;
		top:0%;
	}
	.plato .drop-area__item,
	.plato .drop-area__item .front {
		height: 3em;
	}
	.plato {
		margin-top: 0px;
	}
	.plato .objeto {
		width: 25%;
	}
}

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------- LANSCAPE  ------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* ----------------------------------------- iPhone 2G-4S ----------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 
	.container {
		max-width: inherit !important;
	}
	.grid {
		max-width: initial;
		margin-top: 3vh;
		padding: 0px;
	}
	.grid__item {
		font-size: 0.8em;
		margin: 0.2em 0em;
		padding-top: 0em ;
	}
	.h1, h1 {
		font-size: 1.5rem;
	}
	.h3, h3 {
		font-size: 1rem;
	}
	.juego .logo img {
		width: 23vw;
		margin: 10px 0px ;
	}
	.juego .logo .textos {
		width: 74vw;
	}
	.drop-area{
		height: inherit;
	}
	.drop-area__item {
		width: 80%;
	}
	.objeto{
		top: 3%;
	}
	.aviso .col-12 {
		max-width: 80vw;
	}
	.aviso .col-12.p-5{
		padding: 2rem !important;
	}
	.aviso .h1, h1 {
		font-size: 1em;
    	line-height: 1em;
	}
	.aviso .h2, h2 {
		font-size: 1.1em;
		line-height: 1.1em;
	}
	.aviso .icono img{
		width: 50px !important;
	}
	.aviso button {
		font-size: 1.1rem;
		margin-top: -6px;
		padding: 6px 30px;
	}
	.plato {
		margin-top: 0px;
	}
	.score {
		margin: 0px;
		transform: translate(0%, 20%);
	}
	.score h1{
		font-size: 1.5em;
	}
	.drop-area {
		top: 104%;
	}
	#elementos .grid__item::after {
		padding: 2px 9px;
		font-size: 0.8em;
	}
	.objeto {
		max-width: 20vw;
	}
	.plato .drop-area__item,
	.plato .drop-area__item .front {
		height: 3em;
	}
}








/* --------------------------------------------------------------------------------------------- */
/* ---------------------------------------- PORTRAIT  ------------------------------------------ */
/* --------------------------------------------------------------------------------------------- */
/* -------------------------------------- IPHONE 2G-4S ----------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 
	.container {
		max-width: inherit !important;
	}
	.score {
		margin: initial;
		transform: translate(0%, -20%);
		position: absolute;
		right: 0px;
		
	}

	.grid {
		max-width: initial;
		margin: 0px -15px;
		padding: 0px
	}
	.h1, h1 {
		font-size: 1.3rem;
	}
	.h3, h3 {
		font-size: 1rem;
	}
	.juego .logo img {
		width: 48vw;
		margin: 20px 0vw 19px 0 !important;
	}
	.grid__item {
		font-size: 1em;
		width: 4em ;
		height: 6em ;
		margin: 0.0em 0.2em;
		padding: initial;
	}
	.grid__item img{
		padding: 5px;
	}
	#elementos .grid__item::after {
		padding: 2px 9px;
		font-size: 0.8em;
	}
	.drop-area{
		height: inherit;
	}
	.drop-area__item {
		width: 90%;
		margin: inherit !important;
		height: 9em !important;
	}
	.front {
		height: 9em !important;
	}
	.objeto{
		top: 1%;
		max-width: 22vw;
	}

	.aviso .col-12 {
		max-width: 90vw;
	}

	.plato .drop-area__item {
		width: 100%;
		height: 6em !important;
	}
	.plato .drop-area__item .front {
		height: 6em !important;
	}
	.plato .objeto {
		top: -10%;
	}

	.aviso .h1, h1 {
		font-size: 1.5rem;
		line-height: 1.2em;
	}
	.aviso .h2, h2 {
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
	.aviso .icono img{
		width: 50px;
	}
	.aviso button {
		font-size: 1rem;
		margin-top: 0px;
		padding: 6px 25px;
	}
	.manos .separacion
	{
		margin-top: 0vh;
	}
	.manos .index {
		margin-top: 1vh;
	}

 }



/* --------------------------------------------------------------------------------------------- */
/* ----------------------------------------- PORTRAIT ------------------------------------------ */
/* --------------------------------------------------------------------------------------------- */
/* -------------------------------------- IPHONE 5 & 5S ---------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
	.grid__item {
		width: 4em;
		height: 4.5em;
	}
	.manos .separacion
	{
		margin-top: 0vh;
	}
	.manos .index {
		margin-top: 1vh;
	}
 }



/* ------------------------------------------------------------------------------------------------ */
/* ----------------------------------------- PORTRAIT --------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------- IPHONE 6, 7, & 8  ---------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 
	.grid__item {
		width: 5em;
		height: 5.7em;
	}
	.plato .drop-area__item {
		width: 100%;
		height: 7em !important;
	}
	.plato .drop-area__item .front {
		height: 7em !important;
	}
	.manos .separacion
	{
		margin-top: 0vh;
	}
	.manos .index {
		margin-top: 1vh;
	}
}



/* ------------------------------------------------------------------------------------------------ */
/* ----------------------------------------- PORTRAIT --------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
/* ----------------------------------- IPHONE 6, 7, & 8 Plus -------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 
	.grid__item {
		font-size: 1.2em;
	}
	.objeto {
		top: -10%;
	}
	.manos .separacion
	{
		margin-top: 0vh;
	}
	.manos .index {
		margin-top: 1vh;
	}
 }



/* ------------------------------------------------------------------------------------------------ */
/* ----------------------------------------- PORTRAIT --------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------- IPHONE x ------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { 
	.grid__item {
		width: 6em;
		height: 7.5em;
		font-size: 1.1em;
	}
	.manos .separacion
	{
		margin-top: 0vh;
	}
	.manos .index {
		margin-top: 1vh;
	}

 }