@keyframes rotatein {
	0% {
		transform: translate(-100px,0px) rotate(-90deg);
		opacity: 0;
	}
	
	100% {
		transform: translate(0px,0px) rotate(0deg);
		opacity: 1;
	}
}

@-webkit-keyframes rotatein {
	0% {
		-webkit-transform: translate(-100px,0px) rotate(-90deg);
		opacity: 0;
	}
	
	100% {
		-webkit-transform: translate(0px,0px) rotate(0deg);
		opacity: 1;
	}
}

@-moz-keyframes rotatein {
	0% {
		-moz-transform: translate(-100px,0px) rotate(-90deg);
		opacity: 0;
	}
	
	100% {
		-moz-transform: translate(0px,0px) rotate(0deg);
		opacity: 1;
	}
}


@keyframes fadein {
	0% {
		transform: translate(0px,-50px) rotate(-30deg);
		opacity: 0;
	}
	
	100% {
		transform: translate(0px,0px) rotate(0deg);
		opacity: 1;
	}
}

@-webkit-keyframes fadein {
	0% {
		-webkit-transform: translate(0px,-50px) rotate(-30deg);
		opacity: 0;
	}
	
	100% {
		-webkit-transform: translate(0px,0px) rotate(0deg);
		opacity: 1;
	}
}

@-moz-keyframes fadein {
	0% {
		-moz-transform: translate(0px,-50px) rotate(-30deg);
		opacity: 0;
	}
	
	100% {
		-moz-transform: translate(0px,0px) rotate(0deg);
		opacity: 1;
	}
}


.spotlight ul li:nth-child(2) {
	.spotlightImage {
		animation-delay: 0.6s;
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay: 0.6s;
	}
	
	h2 {
		animation-delay: 0.6s;
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay: 0.6s;
	}
	
	p {
		animation-delay: 0.6s;
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay: 0.6s;
	}

}

.spotlight ul li:nth-child(3) {
	.spotlightImage {
		animation-delay: 0.8s;
		-webkit-animation-delay: 0.8s;
		-moz-animation-delay: 0.8s;
	}
	
	h2 {
		animation-delay: 0.8s;
		-webkit-animation-delay: 0.8s;
		-moz-animation-delay: 0.8s;
	}
	
	p {
		animation-delay: 0.8s;
		-webkit-animation-delay: 0.8s;
		-moz-animation-delay: 0.8s;
	}

}

.spotlight {	
	max-width: $feature-width-max; 
	margin: 5em auto;
	text-align: center;
	display: block;
	padding-left: 2em;
	padding-right:2em;
	
	
	ul {
		
		li.span-33 {
			width: 30%;
		}
		
		li:nth-child(2) {
			margin-left: 4%;
			margin-right: 4%;
		}
		
		
	}
	
	h2 {
		margin-top: 1.2em;
		
		animation: fadein 0.6s forwards;
		animation-iteration-count: 1;
		animation-delay: 0.4s;
		-webkit-animation: fadein 0.6s forwards;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-delay: 0.4s;
		-moz-animation: fadein 0.6s forwards;
		-moz-animation-iteration-count: 1;
		-moz-animation-delay: 0.4s;
		transform: translate(0px,-50px) rotate(-30deg);
		opacity: 0;
		line-height: 1.2;
		margin-bottom: 1em;

		
		a {
			font-family: "Roboto Condensed", sans-serif;
			font-size: 26px;
			font-weight: 400;
			text-decoration: none;
			color: #414141;
			line-height: 1.2;
		}
	}
	
	p {
		font-family: "Open Sans", sans-serif;
		font-size: 14px;
		font-weight: 300;
		
		animation: fadein 0.6s forwards;
		animation-iteration-count: 1;
		animation-delay: 0.4s;
		-webkit-animation: fadein 0.6s forwards;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-delay: 0.4s;
		-moz-animation: fadein 0.6s forwards;
		-moz-animation-iteration-count: 1;
		-moz-animation-delay: 0.4s;
		transform: translate(0px,-50px) rotate(-30deg);
		opacity: 0;
	}
	
	
	
	.spotlightImage{
		overflow: hidden;
		border-radius: 15em;
		width: 180px;
		height: 180px;
		margin: 0 auto;
		display: block;
		
		animation: rotatein 0.6s forwards;
		animation-iteration-count: 1;
		animation-delay: 0.4s;
		-webkit-animation: rotatein 0.6s forwards;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-delay: 0.4s;
		-moz-animation: rotatein 0.6s forwards;
		-moz-animation-iteration-count: 1;
		-moz-animation-delay: 0.4s;
		transform: translate(-100px,0px) rotate(-90deg);
		opacity: 0;
		
		
		img {
			max-width: none;
			max-height: none;
		}
	}
}

.box{height:100px;width:100px;overflow:hidden}
.wh{height:100%!important}
.ww{width:100%!important}





/* Minimum width of 300 pixels. */
@media screen and (max-width: 300px) {
	
}


/* Minimum width of 600 pixels. */
@media screen and (max-width: 600px) {

	
	.spotlight {
		.row {
			.span-33 {
				width: 100%;
				float: none;
				margin-bottom: 4em;
			}
		}
		
		ul {
			li {
				padding-right: 0em;
			}
		}
		
		.spotlightImage{
			overflow: hidden;
			border-radius: 15em;
			width: 180px;
			height: 180px;
			margin: 0 auto;
			display: block;	 
		}
	
	
		h2 {
			margin-top: 1em;
			
			a {
				font-family: "Roboto Condensed", sans-serif;
				font-size: 32px;
				font-weight: 400;
				text-decoration: none;
				color: #414141;
			}
		}
		
		p {
			font-family: "Open Sans", sans-serif;
			font-size: 18px;
			font-weight: 300;
		}
	
	}
	
}

/* Minimum width of 960 pixels. */
@media screen and (max-width: 960px) {
	
	.spotlight {
		.spotlightImage{
			overflow: hidden;
			border-radius: 15em;
			width: 140px;
			height: 140px;
			margin: 0 auto;
			display: block;	 
		}
	}
}


/* =Print
----------------------------------------------- */

@media print {
  
}