@font-face {
  font-family: 'Droid Sans';
  font-weight: normal;
  src: url(../fonts/DroidSans.ttf); 
}

@font-face {
  font-family: 'Droid Sans';
  font-weight: bold;
  src: url(../fonts/DroidSans-Bold.ttf); 
}

html, body{
	font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
	/*background: #F5F5F5;*/
}

.wrapper{
	margin: 0 auto;
	width: 100%;
	max-width:960px;
	overflow: auto;
	background:#DBF4FF;

	box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px; 
	-khtml-border-radius: 12px;
}

.box{
	float: left;
	width: 20%;
	padding-bottom: 20%;
	margin: 2.5%;
	/*background: #FDE925;*/
	box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
	border:6px solid #E28304;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px; 
	-khtml-border-radius: 12px;

}

.pinkColors{
	background: #D82F8C;
	border-color: #7A0064;
}

.greenColors{
	background: #96D826;
	border-color: #058E0E;
}

.blueColors{
	background: #56C2E5;
	border-color: #1042A9;
}

.yellowColors{
	background: #FDE925;
	border-color: #E28304;
}

@media screen and (max-width:800px){

	.box{
		width: 25%;
		padding-bottom: 25%;
		margin: 4%;
	}
}

@media screen and (max-width:600px){

	.box{
		width: 35%;
		padding-bottom: 35%;
		margin: 7%;
	}
}

@media screen and (max-width:420px){

	.box{
		width: 60%;
		padding-bottom: 60%;
		margin-left: 20%;
	}
}