.balls {position:relative;margin-top:-130px;width:100%;display:inline-block;}

.ball			{-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; top:0;display:inline-block;position:absolute;border:10px solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 2px 0 #ccc;-moz-box-shadow:0 2px 0 #ccc;box-shadow:0 2px 0 #ccc;-webkit-backface-visibility: hidden; -moz-backface-visibility:hidden;-ms-backface-visibility:hidden;}
.ball:before 	{content:"";position:absolute;top:-40px;left:0;background:url(/public/archives/static/xmas14/images/theme2/cap.png) 50% 100% no-repeat;width:100%;height:33px;}
.ball:after 		{content:"";height:700px;width:0;border-left:1px solid #3C4C5B;position:absolute;left:50%;-webkit-box-shadow:-2px -5px 0 #ccc;-moz-box-shadow:-2px -5px 0 #ccc;box-shadow:-2px -5px 0 #ccc;}
.ball  a 			{-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display:block;overflow:hidden;float:left;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.ball img 		{display:block;opacity:0;width:100%;background:#fff;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

.greeting 	{opacity:0;background:#fff;width:100%;height:100%;max-width:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;position:absolute;top:0;left:0;padding:45px;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.g-wrap 		{padding:3% 0 0;}
.greeting h2 {font-size:22px;font-weight:400;padding:5% 0 10px;}
.greeting p 	{color:#3D4C5B;padding:0;line-height:1.2;}

.ball:hover img,
.ball:focus img,
.open .greeting {opacity:1;}
.open:hover img,
.open:focus img {opacity:0;}

.b310 	 		{width:310px;height:310px;}
.b310:after 		{bottom:320px;}
.b310 a 			{width:290px;height:290px;}
.b310 .greeting 	{width:290px;height:290px;}
.b310 .g-wrap 	{padding:15% 0 0;}
.b310 img 		{-webkit-border-radius:145px;-moz-border-radius:145px;border-radius:145px;}

.b300 	 		{width:300px;height:300px;}
.b300:after 		{bottom:310px;}
.b300 a 			{width:280px;height:280px;}
.b300 .greeting 	{width:280px;height:280px;}
.b300 .g-wrap 	{padding:25% 0 0;}
.b300 img 		{-webkit-border-radius:140px;-moz-border-radius:140px;border-radius:140px;}

.b240			{width:240px;height:240px;}
.b240:after		{bottom:250px;}
.b240 a 			{width:220px;height:220px;}
.b240 .greeting 	{padding:50px 40px;width:220px;height:220px;}
.b240 p 			{font-size:13px;}
.b240 img 		{-webkit-border-radius:110px;-moz-border-radius:110px;border-radius:110px;}

.b185			{width:185px;height:185px;}
.b185:after 		{bottom:195px;}
.b185 a 			{width:165px;height:165px;}
.b185 .greeting 	{padding:60px 20px;width:165px;height:165px;}
.b185 h2			{font-size:17px;}
.b185 p 			{font-size:13px;}
.b185 img 		{-webkit-border-radius:83px;-moz-border-radius:83px;border-radius:83px;}

.b160			{width:160px;height:160px;}
.b160:after 		{bottom:170px;height:300px;}
.b160 a 			{width:140px;height:140px;}
.b160 .greeting 	{padding:25px;width:140px;height:140px;}
.b160 h2			{font-size:16px;}
.b160 p 			{font-size:13px;}
.b160 img 		{-webkit-border-radius:70px;-moz-border-radius:70px;border-radius:70px;}


.first 	{z-index:2;left:2.9%;top:60px;}
.second 	{z-index:3;left:17.8%;top:400px;}
.third 	{z-index:8;left:31.4%;top:90px;}
.fourth 	{z-index:5;left:41.4%;top:450px;}
.fifth 	{z-index:6;left:63.4%;top:40px;}
.sixth 	{z-index:7;left:70.3%;top:275px;}


@-webkit-keyframes ball {
	0% {opacity: 0;-webkit-transform: translateY(-2000px);}
	60% {opacity: 1;-webkit-transform: translateY(30px);}
	80% {-webkit-transform: translateY(-10px);}
	100% {-webkit-transform: translateY(0);}
}

@-moz-keyframes ball {
	0% {opacity: 0;-moz-transform: translateY(-2000px);}
	60% {opacity: 1;-moz-transform: translateY(30px);}
	80% {-moz-transform: translateY(-10px);}
	100% {-moz-transform: translateY(0);}
}

@-o-keyframes ball {
	0% {opacity: 0;-o-transform: translateY(-2000px);}
	60% {opacity: 1;-o-transform: translateY(30px);}
	80% {-o-transform: translateY(-10px);}
	100% {-o-transform: translateY(0);}
}

@keyframes ball {
	0% {opacity: 0;-ms-transform: translateY(-2000px);}
	60% {opacity: 1;-ms-transform: translateY(30px);}
	80% {-ms-transform: translateY(-10px);}
	100% {-ms-transform: translateY(0);}
}

@keyframes ball {
	0% {opacity: 0;transform: translateY(-2000px);}
	60% {opacity: 1;transform: translateY(30px);}
	80% {transform: translateY(-10px);}
	100% {transform: translateY(0);}
}

.main {min-height:750px;}

@media screen and (max-width: 1200px) {
.sixth {left:auto;right:0;}
}

@media screen and (min-width: 960px) {
.first 	{-webkit-animation:ball 2.5s linear forwards; -moz-animation: ball 2.5s linear forwards; -o-animation:ball 2.5s linear forwards;-ms-animation:ball 2.5s linear forwards; animation:ball 2.5s linear forwards;}
.second 	{-webkit-animation:ball 1.5s linear forwards; -moz-animation: ball 1.5s linear forwards; -o-animation:ball 1.5s linear forwards;-ms-animation:ball 1.5s linear forwards; animation:ball 1.5s linear forwards;}
.third 	{-webkit-animation:ball 3.5s linear forwards; -moz-animation: ball 3.5s linear forwards; -o-animation:ball 3.5s linear forwards;-ms-animation:ball 3.5s linear forwards; animation:ball 3.5s linear forwards;}
.fourth 	{-webkit-animation:ball 2.5s linear forwards; -moz-animation: ball 2.5s linear forwards; -o-animation:ball 2.5s linear forwards;-ms-animation:ball 2.5s linear forwards; animation:ball 2.5s linear forwards;}
.fifth 	{-webkit-animation:ball 4.5s linear forwards; -moz-animation: ball 4.5s linear forwards; -o-animation:ball 4.5s linear forwards;-ms-animation:ball 4.5s linear forwards; animation:ball 4.5s linear forwards;}
.sixth 	{-webkit-animation:ball 2.5s linear forwards; -moz-animation: ball 2.5s linear forwards; -o-animation:ball 2.5s linear forwards;-ms-animation:ball 2.5s linear forwards; animation:ball 2.5s linear forwards;}
}

@media screen and (max-width: 768px) {
.balls 	{margin:50px 0 0;}
.ball 	{position:relative;top:auto;left:auto;float:left;margin:20px 10px;max-width:100%;}
.ball:after 	{display:none;}
}