.flip3D1{ width:10px; height:160px; margin:160px;  border-radius: 50%;}
.flip3D1 > .front{
    
	position:absolute;
    text-align: center;   
    color: #fff;
    left:330px; top:104.75px;
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
    -moz-transform: perspective( 600px ) rotateY( 0deg );
    -o-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background:#0066FF; width:125px; height:125px; border-radius: 50%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
	backface-visibility: hidden;
    border: 2px solid white;
	transition: -webkit-transform .5s linear 0s;
    transition: -moz-transform .5s linear 0s;
    transition: -o-transform .5s linear 0s;
	transition: transform .5s linear 0s;
}
.flip3D1 > .back{
    background: #FFFF00;
    color: #ffffff;
    border: 4px solid white;
	position:absolute;
    left:300px; top:104.75px;
	-webkit-transform: perspective( 600px ) rotateY( 180deg );
    -moz-transform: perspective( 600px ) rotateY( 180deg );
    -o-transform: perspective( 600px ) rotateY( 180deg );
	transform: perspective( 600px ) rotateY( 180deg );
	 width:160px; height:160px; border-radius: 50%;
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -webkit-transform .5s linear 0s;
    transition: -moz-transform .5s linear 0s;
    transition: -o-transform .5s linear 0s;
	transition: transform .5s linear 0s;
    
}

.line1 {
    opacity: 1;
        visibility: visible;
        width: 170px;
        height: 50px;
        left:440px; top:220px;
        border-bottom: 3px solid white;
        border-bottom-left-radius: 5%;
        -webkit-transform:
            translateY(5px)
            translateX(-6px)
            rotate(40deg); 
            -moz-transform:
            translateY(5px)
            translateX(-6px)
            rotate(40deg); 
             -o-transform:
            translateY(5px)
            translateX(-6px)
            rotate(40deg); 
        position: absolute;
        -webkit-transition-property: opacity; 
    -webkit-transition-duration: .4s; 
    
     -moz-transition-property: opacity; 
    -moz-transition-duration: .4s; 
    
     -o-transition-property: opacity; 
    -o-transition-duration: .4s; 
    
    transition-property: opacity;
    transition-duration: .4s;
        
        
    }

    
.flip3D1:hover > .front{
	-webkit-transform: perspective( 600px ) rotateX( -180deg );
    -moz-transform: perspective( 600px ) rotateX( -180deg );
    -o-transform: perspective( 600px ) rotateX( -180deg );
	transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D1:hover > .back{
	-webkit-transform: perspective( 1000px ) rotateX( 0deg );
    -moz-transform: perspective( 1000px ) rotateX( 0deg );
    -o-transform: perspective( 1000px ) rotateX( 0deg );
	transform: perspective( 1000px ) rotateY( 0deg );
}
.flip3D1:hover > .line1{
	opacity: 0;
    
}