/* CSS Document */

div.default label
{ width:28%;}

div.default
{ width:400px;}

.flex {
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.flex > DIV {
  margin:2px;
  background:#0066FF;
  border:1px solid #bbb;
  font-size:24pt;
  color:#666;
}
.flex > div div.dcr {

color:#FFFFFF;
padding:.5em;
max-width:175px;
min-width:175px;
margin:.5em;
font-weight:normal;
font-size:.8em;
}


.flex > DIV > A {
  display:block;
  padding:25px;
  text-decoration:none;
  color:#FFFFFF;
  font-weight:bold;
}

.flex > DIV:hover {
  animation:scaling 0.2s;
}

/* animation keyframes */
@keyframes scaling 
{
	  0% { transform:scale3d( 1, 1, 1 ); }
	 25% { transform:scale3d( 0.98, 0.98, 0.98 ) rotate(5deg); }
	 50% { transform:scale3d( 0.95, 0.95, 0.95 ) rotate(10deg); }
	 75% { transform:scale3d( 0.98, 0.98, 0.98 ) rotate(5deg); }
	100% { transform:scale3d( 1, 1, 1 ); }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
.flex > DIV {
width:48%;
}

}