/*ICP42016-ANIMATION TRANSITION: ON CLICK*/
h1 {color:#FFF;
font-size:62px;}

body {
	width:100%;
	
	margin:auto;
	text-align:center;
	

	}
	div.wrapper {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
width:100%;
height:800px;

		
		}

.box{
  background-color: #218d98;
  height: 100px;
  width: 100px;
}

.transform{
  transition: all 2s ease;
}

.transform-active{
  background-color: #45cee0;
  height: 200px;
  width: 200px;
}
.box2{
  background:#2db34a;
  height: 95px;
  width: 95px;
  padding:50px;
  line-height: 95px;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  transition-property: background, border-radius, color;
  transition-duration: .2s, 1s, 2s;
  transition-timing-function: linear, ease-in, linear;
  transition-delay: 0s, 1s, 0s;
  box-sizing:content-box;
 }

.box2:hover{
  background: #ff7b29;
  border-radius: 50%;
  color: red;
}
figure {
	width:200px;
	height:200px;
	display:inline-block;
	vertical-align:top;
	margin:10px 5%;
	background-color:#CCC;
	box-shadow:1px 1px 10px #333;
	position:relative;
	z-index:1;
	
	}
	.art2 {
		text-align:center;
		
		
	 }
	img[alt="CSS Validate"], img[alt="html5 Validate"] {
	 width:64px;
	 height:22px;
	display:inline-block;
	 margin: 10px auto;
	 text-align:center;
	 }
	 div.val {
		 width:100%;
		 margin:40px auto;
		 text-align:center}