// ==========================================================================
// View layout
// Use when you need to quickly see your grid structure
//
// Adapted for Anvil by @see8ch
// ==========================================================================


// ==========================================================================
// Mixin
// ==========================================================================

@mixin mark($color) {
	outline: 4px solid rgba($color, 0.25) !important;
	background-color: rgba($color, 0.15) !important;
}


// ==========================================================================
// Elements to mark
// Add your own selectors for a more complete grid
// ==========================================================================

// Example:
// .container {
//     @include mark(green);
// }

// _grid-responsive
.row {
	@include mark(blue);
}
[class*="span"] {
	@include mark(red);
}

// Creates a line down the middle of the window to help with centering.
html:after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	margin-left: -2px;
	width: 50%;
	border-right: 4px rgba(blue, 0.25) solid;
	z-index: 99;
	pointer-events: none; // Lets users interact with the site normally
}                                                                                                                                                                                                                                                                                               // ==========================================================================
// Animation for miles!
//
// Let the prefixes begin!
// ==========================================================================

// @include keyframes(grow) {
//     0% {
//         @include transform(scale(.3));
//     }
//     60% {
//         @include transform(scale(1.15));
//     }
//     100% {
//         @include transform(scale(1));
//     }
// };
@-webkit-keyframes "grow" {
	0% {
		-webkit-transform: scale(.3);
		-moz-transform: scale(.3);
		-o-transform: scale(.3);
		transform: scale(.3);
	}
	60% {
		-webkit-transform: scale(1.15);
		-moz-transform: scale(1.15);
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@-moz-keyframes grow {
	0% {
		-moz-transform: scale(.3);
		transform: scale(.3);
	}
	60% {
		-moz-transform: scale(1.15);
		transform: scale(1.15);
	}
	100% {
		-moz-transform: scale(1);
		transform: scale(1);
	}
}
// @-ms-keyframes "grow" {
// 	0% {
// 		-ms-transform: scale(.3);
// 		transform: scale(.3);
// 	}
// 	60% {
// 		-ms-transform: scale(1.15);
// 		transform: scale(1.15);
// 	}
// 	100% {
// 		-ms-transform: scale(1);
// 		transform: scale(1);
// 	}
// }
@-o-keyframes "grow" {
	0% {
		-o-transform: scale(.3);
		transform: scale(.3);
	}
	60% {
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	100% {
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes "grow" {
	0% {
		-webkit-transform: scale(.3);
		-moz-transform: scale(.3);
		-o-transform: scale(.3);
		transform: scale(.3);
	}
	60% {
		-webkit-transform: scale(1.15);
		-moz-transform: scale(1.15);
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

// @include keyframes(candy) {
// 	0% {
// 		@include transform(scale(1));
// 	}
// 	20% {
// 		@include transform(scale(1.15));
// 	}
// 	60% {
// 		@include transform(scale(.95));
// 	}
// 	100% {
// 		@include transform(scale(1));
// 	}
// };
@-webkit-keyframes "candy" {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	20% {
		-webkit-transform: scale(1.15);
		-moz-transform: scale(1.15);
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	60% {
		-webkit-transform: scale(.95);
		-moz-transform: scale(.95);
		-o-transform: scale(.95);
		transform: scale(.95);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@-moz-keyframes candy {
	0% {
		-moz-transform: scale(1);
		transform: scale(1);
	}
	20% {
		-moz-transform: scale(1.15);
		transform: scale(1.15);
	}
	60% {
		-moz-transform: scale(.95);
		transform: scale(.95);
	}
	100% {
		-moz-transform: scale(1);
		transform: scale(1);
	}
}
// @-ms-keyframes "candy" {
// 	0% {
// 		-ms-transform: scale(1);
// 		transform: scale(1);
// 	}
// 	20% {
// 		-ms-transform: scale(1.15);
// 		transform: scale(1.15);
// 	}
// 	60% {
// 		-ms-transform: scale(.95);
// 		transform: scale(.95);
// 	}
// 	100% {
// 		-ms-transform: scale(1);
// 		transform: scale(1);
// 	}
// }
@-o-keyframes "candy" {
	0% {
		-o-transform: scale(1);
		transform: scale(1);
	}
	20% {
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	60% {
		-o-transform: scale(.95);
		transform: scale(.95);
	}
	100% {
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes "candy" {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	20% {
		-webkit-transform: scale(1.15);
		-moz-transform: scale(1.15);
		-o-transform: scale(1.15);
		transform: scale(1.15);
	}
	60% {
		-webkit-transform: scale(.95);
		-moz-transform: scale(.95);
		-o-transform: scale(.95);
		transform: scale(.95);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
// @include keyframes(flyer) {
// 	0% {
// 		@include transform(translate3d(0px, 0px, 0px));
// 	}
// 	100% {
// 		@include transform(translate3d(570px, -570px, 0px));
// 	}
// }
@-moz-keyframes flyer {
	0% {
		-moz-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
	100% {
		-moz-transform: translate3d(570px, -570px, 0px);
		transform: translate3d(570px, -570px, 0px);
	}
}
@-webkit-keyframes "flyer" {
	0% {
		-webkit-transform: translate3d(0px, 0px, 0px);
		-moz-transform: translate3d(0px, 0px, 0px);
		-o-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
	100% {
		-webkit-transform: translate3d(570px, -570px, 0px);
		-moz-transform: translate3d(570px, -570px, 0px);
		-o-transform: translate3d(570px, -570px, 0px);
		transform: translate3d(570px, -570px, 0px);
	}
}
// @-ms-keyframes "flyer" {
// 	0% {
// 		-ms-transform: translate3d(0px, 0px, 0px);
// 		transform: translate3d(0px, 0px, 0px);
// 	}
// 	100% {
// 		-ms-transform: translate3d(570px, -570px, 0px);
// 		transform: translate3d(570px, -570px, 0px);
// 	}
// }
@-o-keyframes "flyer" {
	0% {
		-o-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
	100% {
		-o-transform: translate3d(570px, -570px, 0px);
		transform: translate3d(570px, -570px, 0px);
	}
}
@keyframes "flyer" {
	 0% {
		-webkit-transform: translate3d(0px, 0px, 0px);
		-moz-transform: translate3d(0px, 0px, 0px);
		-o-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
	100% {
		-webkit-transform: translate3d(570px, -570px, 0px);
		-moz-transform: translate3d(570px, -570px, 0px);
		-o-transform: translate3d(570px, -570px, 0px);
		transform: translate3d(570px, -570px, 0px);
	}
}