/* STYLESHEET FILE DESCRIPTION: Styles for Solutions/SEO page  */

#heading .box {
	border-radius: 0;
}

/* INTRO
#########################################*/
#intro {
	width: 720px;
	margin: 0 auto;
	padding: 40px 0 60px 0;
}

#intro p {
	text-align: center;
	font-size: 16px;
	line-height: 21px;
}


/* SERVICES
#########################################*/
#services {
	height: 270px;
}

#services .item {
	width: 205px;
	position: absolute;
}

#services .item .icon {
	width: 184px;
	height: 184px;
	margin-left: 10px;
	background-color: rgba(255,255,255,0.3);
	border-radius: 184px;
}

#services .item .icon .dots {
	width: 184px;
	height: 184px;
	background: url('/images/sections/solutions/seo-dots.png') no-repeat 50% 50%;
	position: absolute;
}

#services .item .icon .circle {
	width: 146px;
	height: 146px;
	margin: 19px 0 0 19px;
	background-color: #d9e021;
	border-radius: 146px;
	position: absolute;
}

#services .item .icon .image {
	width: 184px;
	height: 184px;
	background-image: url('/images/sections/solutions/seo-icons.png');
	background-repeat: no-repeat;
	position: absolute;
}

#services .item .title {
	width: 205px;
	margin-top: 15px;
	text-align: center;
	font-size: 16px;
	font-family: BasefontBoldItalic;
	text-transform: uppercase;
	color: #d9e022;
}

#services .promotion {margin-left: 153px;}
#services .ads {margin-left: 437px;}
#services .seo {margin-left: 721px;}

#services .promotion .image {background-position: 0 0;}
#services .ads .image {background-position: -184px 0;}
#services .seo .image {background-position: -368px 0;}

#services .promotion .icon .dots {
	animation: spin 5s linear infinite;
	-moz-animation: spin 5s linear infinite;
	-webkit-animation: spin 5s linear infinite;
	-o-animation: spin 5s linear infinite;
}
#services .ads .dots {
	animation: spin 12s linear infinite;
	-moz-animation: spin 12s linear infinite;
	-webkit-animation: spin 12s linear infinite;
	-o-animation: spin 12s linear infinite;
}
#services .seo .dots {
	animation: spin 10s linear infinite;
	-moz-animation: spin 10s linear infinite;
	-webkit-animation: spin 10s linear infinite;
	-o-animation: spin 10s linear infinite;
}

@keyframes spin {
  from { 
  	transform: rotate(0deg); 
  }
  to { 
  	transform: rotate(360deg); 
  }
}

@-moz-keyframes spin {
  from { 
  	-moz-transform: rotate(0deg); 
  }
  to { 
  	-moz-transform: rotate(360deg); 
  }
}

@-webkit-keyframes spin {
  from { 
  	-webkit-transform: rotate(0deg); 
  }
  to { 
  	-webkit-transform: rotate(360deg); 
  }
}

@-o-keyframes spin {
  from { 
  	-o-transform: rotate(0deg); 
  }
  to { 
  	-o-transform: rotate(360deg); 
  }
}


/* AGENCY
#########################################*/
#agency {
	margin-bottom: 80px;
}

#agency .text {
	text-align: center;
	font-size: 14px;
	line-height: 19px;	
}

#agency .buttonwrap {
	width: 287px;
	height: 83px;
	margin: 0 auto;
	margin-top: 20px;
	background-color: #fff;
	border-radius: 83px;
}

.bigbutton {
	margin: 15px 0 0 15px;
	position: absolute;
}

.bigbutton,
.bigbutton span,
.bigbutton em {
	width: 256px;
	height: 58px;
	display: block;
}

.bigbutton,
.bigbutton em {
	background-image: url('/images/sections/solutions/seo-button.png');
	background-repeat: no-repeat;	
}

.bigbutton span {
	text-indent: -9000px;
}

.bigbutton span,
.bigbutton em {
	position: absolute;
}

.bigbutton em {
	opacity: 0;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;

}

.bigbutton:hover em,
.bigbutton:active em {
	opacity: 1;
}

.bigbutton:active {
	background: none;
}

.bigbutton em {background-position: 0 -100px;}
.bigbutton:active em {background-position: 0 -200px;}