/*==================================== upload css ==================================== */

#upload {
	width: 1100px;
	margin: 30px auto;
	overflow: hidden;
}
.upload {
	width:1100px;
	height:600px;
	overflow:hidden;
	margin:0 10px;
	position:relative;
}




.upload .middle {
	position:absolute;
	text-align:center;
	width:565px;
	height:278px;
	border-radius:100px;
	margin-left:250px;
	top:225px;
	display:block;
	font-size:24px;
	color:#851b4f;
	text-align:center;
	background:transparent url(../images/upload/middle.png) no-repeat center center;
}
.upload .middle h4 {
	padding-right:5px;
	font-size:38px;
	line-height:50px;
	letter-spacing:2px;
	margin:40px 0 5px 0;
}
.upload .middle p {
	font-size:14px;
	line-height:22px;
	margin:0 auto;
}

.upload .middle .border_top {
	margin:0 auto;
	border-top:1px solid #851b4f;
	width:300px;
	height:10px;
	display:block;
}
.upload .middle .play {
	margin:15px auto;
	width:30px;
	height:30px;
	display:block;
	background:transparent url(../images/go_right.png) no-repeat center center;
}
.upload .middle .play:hover {
}

/* ------------------ for javascript ------------------ */

/* CONTAINER IMAGE*/
.ID-Image {
	width:300px;
	height:300px;
	background:none;
	margin:150px auto 0;
}


/* DELAY CONTROL LAYER*/
/* FOLLOW ME LIST*/
ul#social {
	list-style:none;
}
ul#social li {
	width:330px;
	height:100px;
	position:relative;
	font-size: 1.3em;
	color: #fff;
	opacity:0;
	cursor:pointer;
	
	-webkit-transition:all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition:all 0.2s ease-in;
	transition:all 0.2s ease-in;
}
ul#social li:hover {
	margin-left:10px;
}
ul#social a {
	font-size:1.2em;
	width:26px;
	height:18px;
	padding:4px 0;
	margin-top:2px;
	color:#fff;
	background: #851b4f;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	border:2px solid #2ed5ff;
	box-shadow:0px 0px 3px rgba(255,255,255,0.6);
	float:left;
}
ul#social a:hover {
	color:#fff;
}
ul#social p {
	width:250px;
	margin-left:10px;
	font-size:12px;
	float:left;
}
.running #layerSocialControl1 {
	-moz-animation:tooltip 0.35s 0.45slinear forwards;
	-webkit-animation:tooltip 0.35s 0.45s linear forwards;
	animation:tooltip 0.35s 0.45s linear forwards;
}
.running #layerSocialControl2 {
	-moz-animation:tooltip 0.35s 0.65s linear forwards;
	-webkit-animation:tooltip 0.35s 0.65s linear forwards;
	animation:tooltip 0.35s 0.65s linear forwards;
}
.running #layerSocialControl3 {
	-moz-animation:tooltip 0.35s 0.85s linear forwards;
	-webkit-animation:tooltip 0.35s 0.85s linear forwards;
	animation:tooltip 0.35s 0.85s linear forwards;
}
.running #layerSocialControl4 {
	-moz-animation:tooltip 0.35s 1.05s linear forwards;
	-webkit-animation:tooltip 0.35s 1.05s linear forwards;
	animation:tooltip 0.35s 1.05s linear forwards;
}
.running #layerSocialControl5 {
	-moz-animation:tooltip 0.35s 1.25s linear forwards;
	-webkit-animation:tooltip 0.35s 1.25s linear forwards;
	animation:tooltip 0.35s 1.25s linear forwards;
}
.running #layerSocialControl6 {
	-moz-animation:tooltip 0.35s 1.45s linear forwards;
	-webkit-animation:tooltip 0.35s 1.45s linear forwards;
	animation:tooltip 0.35s 1.45s linear forwards;
}
.running #layerSocialControl7 {
	-moz-animation:tooltip 0.35s 1.65s linear forwards;
	-webkit-animation:tooltip 0.35s 1.65s linear forwards;
	animation:tooltip 0.35s 1.65s linear forwards;
}



#social .step1 {
	top:-40px;
	left:86px;
}
#social .step2 {
	top:-50px;
	left:286px;
}
#social .step3 {
	top:30px;
	left:380px;
}
#social .step4 {
	top:50px;
	left:130px;
}
#social .step5 {
	top:-90px;
	left:-230px;
}
#social .step6 {
	top:-335px;
	left:-330px;
}
#social .step7 {
	top:-580px;
	left:-250px;
}








/* ANIMATION LABEL*/
@-moz-keyframes tooltip {
	0% {
	-moz-transform:scale(0,0);
	opacity:0;
}
50% {
	-moz-transform:scale(1.2,1.2);
	opacity:0.3;
}
75% {
	-moz-transform:scale(0.9,0.9);
	opacity:0.7;
}
100% {
	-moz-transform:scale(1,1);
	opacity:1;
}
}
@-webkit-keyframes tooltip {
	0% {
	-webkit-transform:scale(0,0);
	opacity:0;
}
50% {
	-webkit-transform:scale(1.2,1.2);
	opacity:0.3;
}
75% {
	-webkit-transform:scale(0.9,0.9);
	opacity:0.7;
}
100% {
	-webkit-transform:scale(1,1);
	opacity:1;
}
}
@keyframes tooltip {
	0% {
	transform:scale(0,0);
	opacity:0;
}
50% {
	transform:scale(1.2,1.2);
	opacity:0.3;
}
75% {
	transform:scale(0.9,0.9);
	opacity:0.7;
}
100% {
	transform:scale(1,1);
	opacity:1;
}
}


/*---------------REVERSE ANIMATION-------------------*/

/* REVERSE LABEL PROPERTIES*/
.reverse ul#social li {
	width:330px;
	height:100px;
	position:relative;
	font-size: 1.3em;
	color: #fff;
	opacity:1;
	cursor:pointer;
	
	-webkit-transition:all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition:all 0.2s ease-in;
	transition:all 0.2s ease-in;
}
.reverse #layerSocialControl1, .reverse #layerSocialControl2, .reverse #layerSocialControl3, .reverse #layerSocialControl4, .reverse #layerSocialControl5, .reverse #layerSocialControl6, .reverse #layerSocialControl7 {
	-moz-animation:tooltipReverse 0.35s linear forwards;
	-webkit-animation:tooltipReverse 0.35s linear forwards;
	animation:tooltipReverse 0.35s linear forwards;
}


/* ANIMATION LABEL REVERSE*/
@-moz-keyframes tooltipReverse {
	0% {
	-moz-transform:scale(1,1);
	opacity:1;
}
50% {
	-moz-transform:scale(0.9,0.9);
	opacity:0.7;
}
75% {
	-moz-transform:scale(1.2,1.2);
	opacity:0.3;
}
100% {
	-moz-transform:scale(0,0);
	opacity:0;
}
}
@-webkit-keyframes tooltipReverse {
	0% {
	-webkit-transform:scale(1,1);
	opacity:1;
}
50% {
	-webkit-transform:scale(0.9,0.9);
	opacity:0.7;
}
75% {
	-webkit-transform:scale(1.2,1.2);
	opacity:0.3;
}
100% {
	-webkit-transform:scale(0,0);
	opacity:0;
}
}
@keyframes tooltipReverse {
	0% {
	transform:scale(1,1);
	opacity:1;
}
50% {
	transform:scale(0.9,0.9);
	opacity:0.7;
}
75% {
	transform:scale(1.2,1.2);
	opacity:0.3;
}
100% {
	transform:scale(0,0);
	opacity:0;
}
}