@import url('https://fonts.googleapis.com/css?family=PT+Sans|Roboto');

*
{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}
body
{
	margin:0;
	padding:0px;
	padding-bottom:20px;
	background-color: #fff;
}

main
{
	position:relative;
}

.row
{
	margin:0 -10px;
}

.row:after
{
	content: "";
	display: table;
	clear: both;
}

.grid-item
{
	float:left;
	display:block;
	width:calc(100% / 3);
	height: 305px;
	/*padding:0 10px;
	margin-bottom:20px;*/
	text-align: center;
	background-color: cyan;
	line-height:250px;

}

.item
{
	height:100%;
	padding:5px;
	letter-spacing: 4px;
	animation:scales 5s ease-in-out infinite;
	transition: all 0.2s ease-in-out;
}

.l{
	transform:none;
	animation:none;
}

/*
.item:hover
{
	animation:random 0.2s ease-in-out infinite;
}

.l:hover
{
	font-size:inherit;
}
*/

.grid-item:nth-child(1)
{
	background-color:#D6E681;

}

.grid-item:nth-child(2)
{
	background-color: #BABF95;
}

.grid-item:nth-child(3)
{
	background-color: #C4AD83;
}

.grid-item:nth-child(4)
{
	background-color: #DBB957;
}

.grid-item:nth-child(5)
{
	animation:random 5s ease-in-out infinite;
}

.grid-item:nth-child(6)
{
	background-color: #BABF95;
}

.grid-item:nth-child(7)
{
	background-color: #C6B677;
}
.grid-item:nth-child(8)
{
	background-color: #D6E681;
}
.grid-item:nth-child(9)
{
	background-color: #DBB957;
}


@keyframes random
{
	0%
	{
		background-color:#D6E681;
	}
	25%
	{
		background-color:#BABF95;
	}
	50%
	{
		background-color:#C4AD83;
	}
	75%
	{
		background-color:#DBB957;
		
	}
	100%
	{
		background-color:#D6E681;
		
	}
	
	
}

@keyframes scales
{
	0%
	{
		transform:rotate(0deg);
		transform:scale(1);
	}
	25%
	{
		transform:rotate(20deg);
		transform:scale(1.2);
	}
	50%
	{
		transform:rotate(0deg);
		transform:scale(1);
	}
	75%
	{
		transform:rotate(-20deg);
		transform:scale(0.8);
	}
	100%
	{
		transform:rotate(0deg);
		transform:scale(1);
	}
	
}