/*slideAnimations.css*/


/*--------------------CLASSES--------------------*/

/*General rules*/
.go .slide-up, .go .slide-right, .go .slide-down, .go .slide-left{
	z-index: 2;
	width: 100%;
	height: 100%;
	animation-duration: 1s;
}

/*Assigning one of these classes will cause a tile to slide to an adjacent position and hold there for a little while.*/
.go .slide-up{
	animation-name: slide, slideUp;
}
.go .slide-right{
	animation-name: slide, slideRight;
}
.go .slide-down{
	animation-name: slide, slideDown;
}
.go .slide-left{
	animation-name: slide, slideLeft;
}

/*Assigning one of these classes will cause a tile to fade out while sliding off the edge of the board, then fade in while sliding in from the opposite edge.*/
.go .slide-up.wrap{
	animation-name: slide, wrap, slideWrapUp;
}
.go .slide-right.wrap{
	animation-name: slide, wrap, slideWrapRight;
}
.go .slide-down.wrap{
	animation-name: slide, wrap, slideWrapDown;
}
.go .slide-left.wrap{
	animation-name: slide, wrap, slideWrapLeft;
}



/*-------------------KEYFRAMES-------------------*/


/*Animations to move a player piece from one place to an adjacent place*/

/*Applies to all slide transitions, causing them to shrink then grow during the transition.*/
@keyframes slide{
	0% { transform: scale(1);   }
	25%{ transform: scale(0.5); }
	50%{ transform: scale(0.5); }
	75%{ transform: scale(1);   }
}

/*Applies to all wrapping slides, causing them to fade out and back in.*/
@keyframes wrap{
	0% { opacity: 1; }
	37%{ opacity: 0; }
	38%{ opacity: 0; }
	75%{ opacity: 1; }
}



/*Animations for mobile layout*/
@keyframes slideUp {
	0%  { margin-top: 0; }
	75% { margin-top: calc(-100% - 2vw); }
	100%{ margin-top: calc(-100% - 2vw); }
}
@keyframes slideRight {
	0% { margin-left: 0; }
	75%{ margin-left: calc(100% + 2vw); }
	100%{ margin-left: calc(100% + 2vw); }
}
@keyframes slideDown {
	0% { margin-top: 0; }
	75%{ margin-top: calc(100% + 2vw); }
	100%{ margin-top: calc(100% + 2vw); }
}
@keyframes slideLeft {
	0% { margin-left: 0; }
	75%{ margin-left: calc(-100% - 2vw); }
	100%{ margin-left: calc(-100% - 2vw); }
}


@keyframes slideWrapUp {
	0% {
		margin-top: 0;
		grid-row: 1;
	}
	37%{
		margin-top: calc(-100% - 2vw);
		grid-row: 1;
	}
	38%{
		margin-top: calc(100% + 2vw);
		grid-row: -2;
	}
	75%{
		margin-top: 0;
		grid-row: -2;
	}
	100%{
		margin-top: 0;
		grid-row: -2;
	}
}
@keyframes slideWrapRight {
	0% {
		margin-left: 0;
		grid-column: -2;
	}
	37%{
		margin-left: calc(100% + 2vw);
		grid-column: -2;
	}
	38%{
		margin-left: calc(-100% - 2vw);
		grid-column: 1;
	}
	75%{
		margin-left: 0;
		grid-column: 1;
	}
	100%{
		margin-left: 0;
		grid-column: 1;
	}
}
@keyframes slideWrapDown {
	0% {
		margin-top: 0;
		grid-row: -2;
	}
	37%{
		margin-top: calc(100% + 2vw);
		grid-row: -2;
	}
	38%{
		margin-top: calc(-100% - 2vw);
		grid-row: 1;
	}
	75%{
		margin-top: 0;
		grid-row: 1;
	}
	100%{
		margin-top: 0;
		grid-row: 1;
	}
}
@keyframes slideWrapLeft {
	0% {
		margin-left: 0;
		grid-column: 1;
	}
	37%{
		margin-left: calc(-100% - 2vw);
		grid-column: 1;
	}
	38%{
		margin-left: calc(100% + 2vw);
		grid-column: -2;
	}
	75%{
		margin-left: 0;
		grid-column: -2;
	}
	100%{
		margin-left: 0;
		grid-column: -2;
	}
}

/*Rules here will only apply to screens whose width 
is greater than 600px*/
@media only screen and (min-width: 601px) {


/*Animations to move a player piece from one place to an adjacent place*/
@keyframes slideUp {
	0% { margin-top: 0; }
	75%{ margin-top: calc(-100% - 6vw/15); }
	100%{ margin-top: calc(-100% - 6vw/15); }
}
@keyframes slideRight {
	0% { margin-left: 0; }
	75%{ margin-left: calc(100% + 6vw/15); }
	100%{ margin-left: calc(100% + 6vw/15); }
}
@keyframes slideDown {
	0% { margin-top: 0; }
	75%{ margin-top: calc(100% + 6vw/15); }
	100%{ margin-top: calc(100% + 6vw/15); }
}
@keyframes slideLeft {
	0% { margin-left: 0; }
	75%{ margin-left: calc(-100% - 6vw/15); }
	100%{ margin-left: calc(-100% - 6vw/15); }
}

@keyframes slideWrapUp {
	0% {
		margin-top: 0;
		grid-row: 1;
	}
	37%{
		margin-top: calc(-100% - 6vw/15);
		grid-row: 1;
	}
	38%{
		margin-top: calc(100% + 6vw/15);
		grid-row: -2;
	}
	75%{
		margin-top: 0;
		grid-row: -2;
	}
	100%{
		margin-top: 0;
		grid-row: -2;
	}
}
@keyframes slideWrapRight {
	0% {
		margin-left: 0;
		grid-column: -2;
	}
	37%{
		margin-left: calc(100% + 6vw/15);
		grid-column: -2;
	}
	38%{
		margin-left: calc(-100% - 6vw/15);
		grid-column: 1;
	}
	75%{
		margin-left: 0;
		grid-column: 1;
	}
	100%{
		margin-left: 0;
		grid-column: 1;
	}
}
@keyframes slideWrapDown {
	0% {
		margin-top: 0;
		grid-row: -2;
	}
	37%{
		margin-top: calc(100% + 6vw/15);
		grid-row: -2;
	}
	38%{
		margin-top: calc(-100% - 6vw/15);
		grid-row: 1;
	}
	75%{
		margin-top: 0;
		grid-row: 1;
	}
	100%{
		margin-top: 0;
		grid-row: 1;
	}
}
@keyframes slideWrapLeft {
	0% {
		margin-left: 0;
		grid-column: 1;
	}
	37%{
		margin-left: calc(-100% - 6vw/15);
		grid-column: 1;
	}
	38%{
		margin-left: calc(100% + 6vw/15);
		grid-column: -2;
	}
	75%{
		margin-left: 0;
		grid-column: -2;
	}
	100%{
		margin-left: 0;
		grid-column: -2;
	}
}
}/*End greater than 600px*/

/*Rules here will only apply to screens whose width 
is greater than 800px and which are in landscape orientation.*/
@media only screen 
and (min-width: 801px) 
and (orientation: landscape){


/*Animations to move a player piece from one place to an adjacent place*/
@keyframes slideUp {
	0% { margin-top: 0; }
	75%{ margin-top: calc(-100% - 4vw/15); }
	100%{ margin-top: calc(-100% - 4vw/15); }
}
@keyframes slideRight {
	0% { margin-left: 0; }
	75%{ margin-left: calc(100% + 4vw/15); }
	100%{ margin-left: calc(100% + 4vw/15); }
}
@keyframes slideDown {
	0% { margin-top: 0; }
	75%{ margin-top: calc(100% + 4vw/15); }
	100%{ margin-top: calc(100% + 4vw/15); }
}
@keyframes slideLeft {
	0% { margin-left: 0; }
	75%{ margin-left: calc(-100% - 4vw/15); }
	100%{ margin-left: calc(-100% - 4vw/15); }
}

@keyframes slideWrapUp {
	0% {
		margin-top: 0;
		grid-row: 1;
	}
	37%{
		margin-top: calc(-100% - 4vw/15);
		grid-row: 1;
	}
	38%{
		margin-top: calc(100% + 4vw/15);
		grid-row: -2;
	}
	75%{
		margin-top: 0;
		grid-row: -2;
	}
	100%{
		margin-top: 0;
		grid-row: -2;
	}
}
@keyframes slideWrapRight {
	0% {
		margin-left: 0;
		grid-column: -2;
	}
	37%{
		margin-left: calc(100% + 4vw/15);
		grid-column: -2;
	}
	38%{
		margin-left: calc(-100% - 4vw/15);
		grid-column: 1;
	}
	75%{
		margin-left: 0;
		grid-column: 1;
	}
	100%{
		margin-left: 0;
		grid-column: 1;
	}
}
@keyframes slideWrapDown {
	0% {
		margin-top: 0;
		grid-row: -2;
	}
	37%{
		margin-top: calc(100% + 4vw/15);
		grid-row: -2;
	}
	38%{
		margin-top: calc(-100% - 4vw/15);
		grid-row: 1;
	}
	75%{
		margin-top: 0;
		grid-row: 1;
	}
	100%{
		margin-top: 0;
		grid-row: 1;
	}
}
@keyframes slideWrapLeft {
	0% {
		margin-left: 0;
		grid-column: 1;
	}
	37%{
		margin-left: calc(-100% - 4vw/15);
		grid-column: 1;
	}
	38%{
		margin-left: calc(100% + 4vw/15);
		grid-column: -2;
	}
	75%{
		margin-left: 0;
		grid-column: -2;
	}
	100%{
		margin-left: 0;
		grid-column: -2;
	}
}
}/*End greater than 800px width landscape*/