@charset "UTF-8";
/* CSS Document */


#boxcontainer{
    position: relative;
    width:700px;
    height:500px;
	margin: 0 auto;
	padding-top: 200px;
}





/* BOX 1 */
.box1{
    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:5px;
}
.Inside1{    
    background:#CfCfCf;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
}
.Inside1:hover{
    z-index:100;
    width: 25px;
    height:300px;
    background:#0CF;
	margin-left: +30px;
	
}





/* BOX 2 */
.box2{
    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:5px;
}
.Inside2{    
    background:#CfCfCf;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
}
.Inside2:hover{
    z-index:100;
    margin-top:-150px;
    background:#FC0;
	border-radius: 100px;
}

/* BOX 3 */

.box3{
    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:5px;
}
.Inside3{    
    background:#CfCfCf;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
   -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow: hidden;
}
.Inside3:hover{
    z-index:100;
    width:100px;
    height:100px;
    background:#5CE6B8;
	-webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
	
}


/* BOX 4 */
.box4{
    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:5px;
}
.Inside4{    
    background:#CfCfCf;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 1.5s ease-in-out;
}
.Inside4:hover{
    z-index:100;
	opacity: 0;
    width:100px;
    height:100px;
    background: #ff19ff;	
	
}



/* BOX 5 */
.box5{
    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:5px;
}
.Inside5{  
	transform-style: preserve-3d;  
    background:#CfCfCf;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
}


.Inside5:hover{
    z-index:100;
    width:50px;
    height:50px;
    background:#F90;
	margin-left: +25px;
	margin-top: +25px;

	
	
}

/* BOX 6 */
.box6{
    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:5px;
}
.Inside6{    
    background:#CfCfCf;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
}
.Inside6:hover{
    z-index:100;
    width:125px;
    height:25px;
    background:red;
	border-radius:100px;
	margin-top: +35px;
	
}