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


@-webkit-keyframes fade {

from {opacity:0;}
to { oopacity:1;}
}

@keyframes fade{
	from {opacity:0;}
	to	{opacity:1;}
}


#btn{
	-webkit-transform-origin:center;
	-webkit-animation: fade 1s ease-in-out;
	
	transform-origin:center;
	animation: fade 1s ease-in-out;
}	



#middle{
	-webkit-transform-origin:40px;
	transform-origin:40px;
	
	-webkit-transform:scale(0,1);
	transform:scale(0,1);
	
	opacity:0.5}

#textBox{
	-webkit-transform-origin:40px;	
	transform-origin:40px;	}

#textBox{
	-webkit-transform:scale(0,1);
	transform:scale(0,1);}

#left, #right{
	-webkit-transform-origin:center center; opacity:0.5;
	transform-origin:center center; opacity:0.5;	
	}

#left{
	-webkit-transform:translateX(0px);
	transform:translate(0px);}
#right{
	-webkit-transform:translateX(-319px);
	transform:translateX(-319px)}

#btn:hover {cursor:pointer; opacity:1;}



#btn:hover #right{
	-webkit-transform:translateX(0px);
	transform:translateX(0px);	
	
	opacity:1;
}

#btn:hover #left{
	opacity:1;
}

#btn:hover #middle{
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
	opacity:1;
	}
	
#btn:hover #textBox{
	-webkit-transform:scale(1,1);
	transform:scale(1,1)
}

#middle, #right, #textBox{
		-webkit-transition: -webkit-transform .25s ease-in-out;
		transition: transform .25s ease-in-out;
}



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

#middle{
	-webkit-transform-origin:40px;
	transform-origin:40px;
	
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
	
	opacity:1}

#textBox{
	-webkit-transform-origin:40px;	
	transform-origin:40px;	}

#textBox{
	-webkit-transform:scale(1,1);
	transform:scale(1,1);}

#left, #right{
	-webkit-transform-origin:center center; opacity:1;
	transform-origin:center center; opacity:1;	
	}

#left{
	-webkit-transform:translateX(0px);
	transform:translate(0px);}
#right{
	-webkit-transform:translateX(0);
	transform:translateX(0)}	

	

}