/* Features
================================================= */

.featureIcon {
	background-color: #68C3B0;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	-webkit-transition: all 4s cubic-bezier(1, -0.53, 0.405, 1.425) 0s;
       -moz-transition: all 4s cubic-bezier(1, -0.53, 0.405, 1.425) 0s;
        -ms-transition: all 4s cubic-bezier(1, -0.53, 0.405, 1.425) 0s;
	     -o-transition: all 4s cubic-bezier(1, -0.53, 0.405, 1.425) 0s;
            transition: all 4s cubic-bezier(1, -0.53, 0.405, 1.425) 0s;	
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

.featureIcon.analytics {background: url(../images/icons/icon-feature-analytics.png) center center no-repeat; background-color: #68C3B0;}
.featureIcon.imac  {background: url(../images/icons/icon-feature-imac.png) center center no-repeat; background-color: #68C3B0;}
.featureIcon.copywriting      {background: url(../images/icons/icon-feature-copywriting.png) center center no-repeat; background-color: #68C3B0;}
.featureIcon.dnm {background: url(../images/icons/icon-feature-dnm.png) center center no-repeat; background-color: #68C3B0;}
.featureIcon.layout    {background: url(../images/icons/icon-feature-layout.png) center center no-repeat; background-color: #68C3B0;}
.featureIcon.easel     {background: url(../images/icons/icon-feature-easel.png) center center no-repeat; background-color: #68C3B0;}

.featureDesc {
	margin: 0 0 20px 0px;
	clear: both;
	text-align: center;
	padding: 0 20px;
}
.featureTitle {
	line-height: 40px;
	display: block;
	height: 40px;
	margin-top: 0px;
	padding-top: 10px;
	text-align: center;
	-webkit-transition: all .3s ease-out;
       -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
	     -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
}
.featureWrap {
	margin-top: 20px;
}
.featureWrap:hover .featureIcon {
	-webkit-transform: rotate(720deg);
	   -moz-transform: rotate(720deg);
	     -o-transform: rotate(720deg);
	    -ms-transform: rotate(720deg);
	        transform: rotate(720deg);
}
.featureIconLarge {
	width: 80px;
	height: 80px;
}

.featureTitleLarge {
	line-height: 60px;
	height: 60px;
	
}
.featureDescLarge {
	margin: 0 0 20px 0px;
}

#servicesAni {
	position:relative;
	width:520px;
	height:347px;
	margin:20px auto 10px;
	float: right;
}
#saMain {
	position:absolute;
	top:35px;
	left:90px;
	opacity: 0;
	-webkit-transition: all 3s ease;
       -moz-transition: all 3s ease-in-out;
         -o-transition: all 3s ease-in-out;
        -ms-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
}
#sa1, #sa2, #sa3, #sa4, #sa5, #sa6, #sa7, #sa8 {
	width:20px;
	height:20px;
	-webkit-border-radius: 20px;
	   -moz-border-radius: 20px;
		    border-radius: 20px;
	position:absolute;
	background-color: rgba(255,51,185,0.7);
	-webkit-transition: all 2s ease;
       -moz-transition: all 2s ease-in-out;
         -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
            transition: all 2s ease-in-out;  /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in where appropriate. */
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#sa1 {
	-webkit-transition-delay: 0.1s; 
	-moz-transition-delay: 0.1s;
	-ms-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	transition-delay: 0.1s;
	left:70px; top:140px; 
}
#sa2 {
	-webkit-transition-delay: 0.2s; 
	-moz-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s; 
	left:50px; top:260px; 
}
#sa3 {
	-webkit-transition-delay: 0.3s; 
	-moz-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	transition-delay: 0.3s; 
	left:190px; top:170px; 
}
#sa4 {
	-webkit-transition-delay: 0.4s; 
	-moz-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s; 
	left:290px; top:300px;
}
#sa5 {
	-webkit-transition-delay: 0.5s; 
	-moz-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	transition-delay: 0.5s; 
	left:380px; top:190px;
}
#sa6 {
	-webkit-transition-delay: 0.6s; 
	-moz-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s; 
	left:470px; top:230px; 
}
#sa7 {
	-webkit-transition-delay: 0.7s; 
	-moz-transition-delay: 0.7s;
	-ms-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	transition-delay: 0.7s; 
	left:410px; top:180px; 
}
#sa8 {
	-webkit-transition-delay: 0.8s; 
	-moz-transition-delay: 0.8s;
	-ms-transition-delay: 0.8s;
	-o-transition-delay: 0.8s;
	transition-delay: 0.8s; 
	left:400px; top:70px; 
}
#servicesAni:hover #saMain {opacity:1;}
#servicesAni:hover #sa1 {
	-webkit-transform: translate(-30px,-120px);
	-moz-transform: translate(-30px,-120px);
	-ms-transform: translate(-30px,-120px);
	-o-transform: translate(-30px,-120px);
	transform: translate(-30px,-120px);
	background-color: rgba(154,189,66,0.7);
}
#servicesAni:hover #sa2 {
	-webkit-transform: translate(-24px,-234px);
	-moz-transform: translate(-24px,-234px);
	-ms-transform: translate(-24px,-234px);
	transform: translate(-24px,-234px);
	-o-transform: translate(-24px,-234px);
	background-color: rgba(154,189,66,0.7);
}
#servicesAni:hover #sa3 {
	-webkit-transform: translate(-170px,-130px);
	-moz-transform: translate(-170px,-130px);
	-ms-transform: translate(-170px,-130px);
	-o-transform: translate(-170px,-130px);
	transform: translate(-170px,-130px);
	background-color: rgba(154,189,66,0.7);
}
#servicesAni:hover #sa4 {
	-webkit-transform: translate(-264px,-246px);
	-moz-transform: translate(-264px,-246px);
	-ms-transform: translate(-264px,-246px);
	-o-transform: translate(-264px,-246px);
	transform: translate(-264px,-246px);
	background-color: rgba(154,189,66,0.7);
}
#servicesAni:hover #sa5 {
	-webkit-transform: translate(-340px,-130px);
	-moz-transform: translate(-340px,-130px);
	-ms-transform: translate(-340px,-130px);
	-o-transform: translate(-340px,-130px);
	transform: translate(-340px,-130px);
	background-color: rgba(154,189,66,0.7);
}
#servicesAni:hover #sa6 {
	-webkit-transform: translate(-416px,-176px);
	-moz-transform: translate(-416px,-176px);
	-ms-transform: translate(-416px,-176px);
	-o-transform: translate(-416px,-176px);
	transform: translate(-416px,-176px);
	background-color: rgba(154,189,66,0.7);
}
#servicesAni:hover #sa7 {
	-webkit-transform: translate(-350px,-140px);
	-moz-transform: translate(-350px,-140px);
	-ms-transform: translate(-350px,-140px);
	-o-transform: translate(-350px,-140px);
	transform: translate(-350px,-140px);
	background-color: rgba(154,189,66,0.7);
}
#servicesAni:hover #sa8 {
	-webkit-transform: translate(-346px,-44px);
	-moz-transform: translate(-346px,-44px);
	-ms-transform: translate(-346px,-44px);
	-o-transform: translate(-346px,-44px);
	transform: translate(-346px,-44px);
	background-color: rgba(154,189,66,0.7);
}