/* Non-animation */

.cat-item-8 a {
	background:url(../image/pict-brand.png) top center no-repeat;
}
.cat-item-12 a {
	background:url(../image/pict-featured.png) top center no-repeat;
}
.cat-item-7 a {
	background:url(../image/pict-inbound.png) top center no-repeat;
}
.cat-item-6 a {
	background:url(../image/pict-news.png) top center no-repeat;
}
.cat-item-9 a {
	background:url(../image/pict-resources.png) top center no-repeat;
}
.sidebar-wrap {
	display:block;
	float: left;
	width:100%;
}
ul.sidebar {
	overflow: hidden;
}
ul.sidebar.fixe {
	display:block;
	position: fixed;
	bottom: 0;
	top:195px;
	overflow-y:scroll;	
}
.community-content {
	padding: 50px;
	float: right;
}
.featured-container .post {
	width:400px;
	height: 400px;
	overflow: hidden;
	display:block;
	float: left;
	background: #fff;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15);
	box-shadow: 0 0 3px rgba(0,0,0,0.15);
	margin: 15px;
}

.container.featured-container {
	width:1290px;
}

.featured-container .post.category-featured {
	width:830px;
	height: 400px;
}
.community-content {
	border-left: 1px solid #e5e5e5;
}
ul.sidebar li {
	display:block;
	float: left;
	clear: both;
	width:100%;
}
ul.sidebar li.selected {
	background: #fff;
	margin-right: -10px;
}

/* END non-animation */

.block-content {
	display:block;
	clear:both;
	float: left;
}
.block-content .half-left {

}
.half-left {

/*
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
*/
	
}
.half-right {
	height: auto;
}
.results.section .half-right {
	height: auto!important;
}

.block-content {
	position: relative;
}
.results.section .block-content .half-left {
	opacity:0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;	
}
.block-content .half-left {
	position: absolute;
	float: none;
	z-index: 0;	
	margin-top:0;
}

.results.section .block-content#block1 .half-left {
  -webkit-transition: all 0ms ease-out;
  -moz-transition: all 0ms ease-out;
  transition: all 0ms ease-out;	
}

.results.section .block-content .half-left.showthis {
	opacity:1;
}

.block-content .half-left.fixe {
	position: fixed;
	margin-top:260px;
}
#section5 {
	padding-bottom: 50px;
}
#section5 .large-4 {
	padding: 30px;
}

.block-content .half-left,
.block-content .half-left.fixe {
	width:450px!important;	
}
.single-block {
	display:block;
	float: left;
	clear: both;
	width:100%;
	padding-top:80px;
	padding-bottom: 80px;
	position: relative;
	border-bottom: 1px solid #ddd;
	min-height: 600px;
}
.single-block .credits {
	display:block;
	position: absolute;
	bottom: 20px;
	right:0px;
	font-family: "futura-pt", "futura-pt", "Century Gothic";
	font-weight: 500;	
	color:#999;
	}
.single-block p {
	font-size: 24px!important;
	font-family: "futura-pt", "futura-pt", "Century Gothic";
	font-weight: 300;	
	line-height: 44px;
	color:#787878;
	margin: 30px 0;
}
.roadsigns {
	display:block;
	position: absolute;
	width:141px;
	height: 162px;
	background: url(../../image/roadsign.png) no-repeat center center;
	margin-left: 140px;
	margin-top:100px;
}
#single7 .investment,
#single7 .conversion {
	display:none;
}

#single8 p {
	display:block;
	padding: 40px 0 40px 150px;
	
}
#single5 .row label,
#single6 .row label,
#single7 .row label {
	margin: 30px 0;
}
p.challenge1.active {
	background: url(../../image/challenge1.png) no-repeat 10px center;
}
p.challenge2.active {
	background: url(../../image/challenge2.png) no-repeat left center;
}
p.challenge3.active {
	background: url(../../image/challenge3.png) no-repeat 10px center;
}
.single-block p strong {
	font-size: 34px;
	font-family: "futura-pt", "futura-pt", "Century Gothic";
	font-weight: 500;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  transition: all 200ms ease-out;	
}
.single-block p strong.blue {

}

.single-block.stage2 p strong.blue {
	color:#293352;
	font-size: 34px;
}
.single-block.stage1 p strong.green {
	font-size: 34px;
	color:#00bcb5;
}

.single-block .row {
	margin: 10px 0;
}
.single-block .row label {
	line-height: 16px;
	color:#999;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	width:100px;
	float:left;
}

.bar-chart {
	display:block;
	float: left;
	height: 30px;
	background: #00bcb5;
}

.bar-chart.blue {
	background: #293352;
}
.client-list {
	width:900px;
	overflow: hidden;
	display:block;
}
.client-list a.single-client {
	display:block;
	float: left;
	width:300px;
	text-align: center;
	height: 200px;
	background-position: bottom center;
	opacity:.3;
	text-indent: -9999px;
}
.client-list.featured-clients {

}
.client-list.featured-clients .owl-item .item {
}


.client-list .single-client:hover {
	background-position: top center;
	opacity:1;
}

.mini-container h1 {
	font-size: 52px;
	text-align: center;
	margin: 80px 0;
}
.full-height .container,
.full-height {
	min-height: 400px!important;
}

.dc-difference-section .mini-container {
	display:block;
	float: left;
	border-bottom: 1px solid #ddd;
}
.dc-difference-section .half {
	float: right;
	position: relative;
}
.dc-difference-section .half .half-wrapper {
	display:block;
	position: absolute;
	top:50%;
	width:100%;
	margin-top:-150px;
	text-align: center;
}
.dc-difference-section .half h3 strong,
.dc-difference-section .half h3 {
	font-size: 80px;
	color:#333;
	font-weight: 500;
	font-family: "futura-pt", "futura-pt", "Century Gothic";
	line-height: 120px;	
}
.dc-difference-section label {
	font-family: "futura-pt", "futura-pt", "Century Gothic";
	font-size: 18px;
	font-weight: 500;
	color:#999;
	line-height: 30px;

}
.dc-difference-section strong {
	color:#00cccc;
	font-size: 30px;
	line-height: 30px;
	font-weight: 500;
	font-family: "futura-pt", "futura-pt", "Century Gothic";

}

.dc-difference-section {
	background: #f5f5f5!important;
}

.dc-difference-section .half-left {
	display:block;
	float: left;
	position: relative;
}
.dc-difference-section .half-left div {
	display: block;
	position: absolute;
  -webkit-transition: all 800ms ease-out;
  -moz-transition: all 800ms ease-out;
  transition: all 800ms ease-out;	
}
.dc-1-a {
	width:251px;
	height: 194px;
	background: url(../../image/dc-1-a.png) no-repeat center center;
	top:50%;
	margin-top: -97px;
	left:50%;
	margin-left:-125px;
}

.dc-1-b {
	width:0;
	height: 194px;
	background: url(../../image/dc-1-b.png) no-repeat left bottom;
	top:50%;
	margin-top: -107px;
	left:50%;
	margin-left:-115px;
}

.dc-difference-block.activate .dc-1-b {
	width:251px;
}

.dc-2-a {
	width:252px;
	height: 195px;
	top:50%;
	left:50%;
	margin-top:-97px;
	margin-left: -126px;
	background: url(../../image/dc-2-a.png) no-repeat center center;
}

.dc-2-b {
	width:213px;
	height: 8px;
	background: url(../../image/dc-2-b.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -107px;
	margin-top:-60px;
}

.dc-2-c {
	width:213px;
	height: 8px;
	background: url(../../image/dc-2-b.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -107px;
	margin-top:-38px;
}

.dc-2-d {
	width:213px;
	height: 8px;
	background: url(../../image/dc-2-b.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -107px;
	margin-top:-16px;
}

.dc-2-e {
	width:213px;
	height: 8px;
	background: url(../../image/dc-2-b.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -107px;
	margin-top:6px;
}

.dc-2-f {
	width:213px;
	height: 8px;
	background: url(../../image/dc-2-b.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -107px;
	margin-top:28px;
}

.dc-2-g {
	width:213px;
	height: 8px;
	background: url(../image/dc-2-b.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -107px;
	margin-top:50px;
}

.dc-2-h {
	width:213px;
	height: 8px;
	background: url(../image/dc-2-c.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -107px;
	margin-top:72px;
}


.dc-difference-block.activate .dc-2-b {
	margin-top:-38px;	
}
.dc-difference-block.activate .dc-2-c {
	margin-top:-16px;	
}
.dc-difference-block.activate .dc-2-d {
	margin-top:6px;	
}
.dc-difference-block.activate .dc-2-e {
	margin-top:28px;	
}
.dc-difference-block.activate .dc-2-f {
	margin-top:50px;	
}
.dc-difference-block.activate .dc-2-g {
	margin-top:72px;	
}
.dc-difference-block.activate .dc-2-h {
	margin-top:-60px;	
}

.dc-3-a {
	width:160px;
	height: 155px;
	background: url(../image/dc-3-a.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-left: -80px;
	margin-top: -77.5px;
	z-index: 2;
}

.dc-3-b {
	width:120px;
	height: 50px;
	font-size: 28px;
	top:50%;
	left:50%;
	margin-left: -80px;
	margin-top: -25px;	
	text-align: center;
	color:#00CCCC;
	font-family: "futura-pt", "futura-pt", "Century Gothic";
	font-weight: 500;	
}


.dc-4-a {
	width:20px;
	height: 18px;
	background: url(../image/dc-4-a.png) no-repeat center center;
	background-size:100% 100%;
	top:50%;
	left:50%;
	z-index: 2;
	margin-left: -10px;
	margin-top: -9px;

}
.dc-difference-block.activate .dc-4-a {
	width:200px;
	height: 180px;
	margin-left: -100px;
	margin-top: -90px;
}
.dc-4-b {
	
}
.dc-5-a {
	width:74px;
	height: 10px;
	background: url(../image/dc-5-a.png) no-repeat top center;
	bottom:50%;
	left:50%;
	margin-bottom:-60px;
	margin-left: 50px;
}

.dc-5-b {
	width:74px;
	height: 10px;
	background: url(../image/dc-5-a.png) no-repeat top center;
	bottom:50%;
	left:50%;
	margin-bottom:-60px;
	margin-left: -50px;
}
.dc-difference-block.activate .dc-5-a {
	height: 110px;
}
.dc-difference-block.activate .dc-5-b {
	height: 60px;
}

.dc-3-a {
    
    /* 
     * Make the initial position to be the center of the circle you want this
     * object follow.
     */

    /*
     * Sets up the animation duration, timing-function (or easing)
     * and iteration-count. Ensure you use the appropriate vendor-specific 
     * prefixes as well as the official syntax for now. Remember, tools like 
     * CSS Please are your friends!
     */
    -webkit-animation: myOrbit 2s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 2s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 2s linear infinite; /* Opera 12+ */
            animation: myOrbit 2s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
    
    
}


/*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}





.methodology.section {

	padding: 100px 0;
	position: relative;
	overflow: hidden;
}

.method-browser {
	display:none;
	position: fixed;
	top:35px;
	left:50%;
	width:294px;
	height: 213px;
	background: url(../image/browser.png) no-repeat center center;
	background-size: 100% 100%;
	margin-top:-100px;
	margin-left: 50px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;	
  z-index: 2;
}
.methodology.section.secondary {
	background: #f5f5f5;
}
.method-browser.meth2 {
	width:147px;
	height: 107px;
	margin-top:100px;
}

.method-browser.meth6 {
	width:147px;
	height: 107px;
	margin-top:-50px;
	margin-left: 200px;
}


.methodology-tools {
	display:block;
	position: absolute;
	top:0;
	width:300px;
	left:50%;
	margin-left: 100px;
	height: 99999px;
	background: url(../image/tools.png) repeat-y center;
}

.methodology-hand {
	display:block;
	position: absolute;
	width:278px;
	height: 456px;
	background: url(../image/hand.png) no-repeat center center;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left: 80px;
	z-index: 3;
}

.methodology-publish {
	background: #eee;
	width:80px;
	height: 75px;
	display:block;
	position: absolute;
	left:50%;
	top:50%;
	z-index: 4;
	margin-top:-100px;
	margin-left: 65px;
}

.methodology-publish.publish-2 {
	margin-left: 155px;
}

.methodology-publish.publish-3 {
	margin-left: 245px;
}

.methodology-publish.publish-4 {
	margin-top:-15px;

}

.methodology-publish.publish-5 {
	margin-top:-15px;
	margin-left: 155px;
}

.methodology-publish.publish-6 {
	margin-top:-15px;
	margin-left: 245px;
}

.methodology-publish.active {
	background: #00bdb5;
}

.methodology-longhand {
	display:block;
	position: absolute;
	left:50%;
	top:50%;
	width: 142px;
	height: 142px;
	background: url(../image/longhand.png) no-repeat top center;
	z-index: 5;
	margin-top:-40px;
	margin-left: 315px;
}

.methodology-shorthand {
	display:block;
	position: absolute;
	left:50%;
	top:50%;
	width: 118px;
	height: 118px;
	background: url(../image/shorthand.png) no-repeat top center;
	z-index: 5;
	margin-top: -28px;
	margin-left: 327px;
}

.methodology-clock {
	display:block;
	width:245px;
	height: 294px;
	background: url(../image/clock.png) no-repeat center center;
	left:50%;
	top:50%;
	position: absolute;
	z-index: 4;
	margin-top:-150px;
	margin-left: 270px;
}
.methodology-magnifying {
	display:block;
	position: absolute;
	top:50%;
	left:50%;
	width:307px;
	height: 382px;
	background: url(../image/magnifying.png) no-repeat center center;
	z-index: 5;
	margin-top:-120px;
	margin-left: 0;
  -webkit-transition: all 1000ms ease-out;
  -moz-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
	
}
.methodology-mask {
	display:block;
	position: absolute;
	width:190px;
	height: 190px;
	background: url(../image/code.png) no-repeat;
	background-position: 50px 0;
	-moz-border-radius:500px;
	-webkit-border-radius:500px;
	border-radius:500px;
	left:50%;
	top:50%;
	margin-top:-115px;
	margin-left: 2px;
	z-index: 4;
  -webkit-transition: all 1000ms ease-out;
  -moz-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
  opacity:0;
}
.methodology.section.active .methodology-magnifying {
	margin-left: 200px;
}
.methodology.section.active .methodology-mask {
	margin-left: 202px;
	background-position: -150px 0;
	opacity:1;
}

.gameplay {
	display:block;
	position: absolute;
	width:0;
	height:0;
	background-position: center center;
	background-repeat: no-repeat;
	left:50%;
	top:50%;
	-moz-border-radius:500px;
	-webkit-border-radius:500px;
	border-radius:500px;
}

.gameplay1 {
	background-image: url(../image/gameplay1.png);
	margin-top:70px;
	margin-left: 180px;
}

.gameplay2 {
	background-image: url(../image/gameplay2.png);
/*
	margin-top:-525px;
	margin-left: -115px;	
*/
	margin-top:-175px;
	margin-left: 235px;
}

.gameplay3 {
	background-image: url(../image/gameplay3.png);
/*
	margin-top:-350px;
	margin-left: 100px;
*/
	margin-top: 0px;
	margin-left: 450px;
}


.methodology-gear {
	display:block;
	position: absolute;
	width:52px;
	height: 52px;
	top:50%;
	left:50%;
	margin-left: 150px;
	margin-top:-60px;
	background: url(../image/gear.png) no-repeat center center;
	z-index: 4;
}
.methodology-gear.small-gear {
	background-size: 30px 30px;
	width:30px;
	height: 30px;
	margin-left: 195px;
	margin-top:-20px;
}

.scribble {
	display:block;
	position: absolute;
	top:50%;
	left:50%;
	margin-left: 75px;
	margin-top:-80px;
	z-index: 5;
	width:0px;
	height: 12px;
	background: url(../image/scribble.png) no-repeat left center;
  -webkit-transition: all 1600ms ease-out;
  -moz-transition: all 1600ms ease-out;
  transition: all 1600ms ease-out;	
}

.methodology.section.active .scribble {
	width:200px;
}

.methodology-promote {
	display:block;
	position: absolute;
	top:50%;
	left:50%;
	width:389px;
	height: 389px;
	margin-left: 80px;
	margin-top:-230px;
	z-index: 3;
	background: url(../image/promote1.png) no-repeat center center;
	display:none;
}

.promote1 {
	background: url(../image/promote1.png) no-repeat center center;
	display:block;
}
.promote2 {
	background: url(../image/promote2.png) no-repeat center center;
}
.promote3 {
	background: url(../image/promote3.png) no-repeat center center;
}
.promote4 {
	background: url(../image/promote4.png) no-repeat center center;
}
.promote5 {
	background: url(../image/promote5.png) no-repeat center center;
}
.promote6 {
	background: url(../image/promote6.png) no-repeat center center;
}
.promote7 {
	background: url(../image/promote7.png) no-repeat center center;
}
.promote8 {
	background: url(../image/promote8.png) no-repeat center center;
}


.bar-graph {
	display:block;
	position: absolute;
	background: #dedede;
	width:15px;
	height: 0;
	bottom:0;
	left:50%;
	  -webkit-transition: all 1000ms ease-out;
  -moz-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;

}

.bar1 {
	margin-left: 30px;
}

.bar2 {
	margin-left: 60px;
}

.bar3 {
	margin-left: 90px;
}

.bar4 {
	margin-left: 120px;
}

.bar5 {
	margin-left: 150px;
}

.bar6 {
	margin-left: 180px;
}

.bar7 {
	margin-left: 210px;
}

.bar8 {
	margin-left: 240px;
}

.bar9 {
	margin-left: 270px;
}

.bar10 {
	margin-left: 300px;
}

.bar11 {
	margin-left: 330px;
}

.bar12 {
	margin-left: 360px;
}

.bar13 {
	margin-left: 390px;
}

.bar14 {
	margin-left: 420px;
}

.bar15 {
	margin-left: 450px;
	background: #00bdb5;
}

.methodology.section.active .bar1 {
	height:5%;
}

.methodology.section.active .bar2 {
	height: 10%;
}

.methodology.section.active .bar3 {
	height: 12%;
}

.methodology.section.active .bar4 {
	height: 20%;
}

.methodology.section.active .bar5 {
	height: 25%;
}

.methodology.section.active .bar6 {
	height: 30%;
}

.methodology.section.active .bar7 {
	height: 39%;
}

.methodology.section.active .bar8 {
	height: 45%;
}

.methodology.section.active .bar9 {
	height: 50%;
}

.methodology.section.active .bar10 {
	height: 55%;
}

.methodology.section.active .bar11 {
	height: 63%;
}

.methodology.section.active .bar12 {
	height: 72%;
}

.methodology.section.active .bar13 {
	height: 80%;
}

.methodology.section.active .bar14 {
	height: 85%;
}

.methodology.section.active .bar15 {
	height: 90%;
}

.bar-graph.ruler {
	background: url(../image/ruler.png) no-repeat top center;
	height: 0;
	margin-left: 480px;
	width:37px;
}

.methodology.section.active .bar-graph.ruler {
	height: 90%;
}

.knob {
	display:block;
	position: absolute;
	top:50%;
	left:50%;
	width:300px;
	height: 300px;
	margin-left: 250px;
	margin-top:-170px;
	background: url(../image/knob1.jpg) no-repeat center center;
	display:none;
}

.knob1 {
	background: url(../image/knob1.jpg) no-repeat center center;	
	display:block;
}
.knob2 {
	background: url(../image/knob2.jpg) no-repeat center center;	
}
.knob3 {
	background: url(../image/knob3.jpg) no-repeat center center;	
}
.knob4 {
	background: url(../image/knob4.jpg) no-repeat center center;	
}
.knob5 {
	background: url(../image/knob5.jpg) no-repeat center center;	
}
.knob6 {
	background: url(../image/knob6.jpg) no-repeat center center;	
}
.knob7 {
	background: url(../image/knob7.jpg) no-repeat center center;	
}
.knob8 {
	background: url(../image/knob8.jpg) no-repeat center center;	
}
.knob9 {
	background: url(../image/knob9.jpg) no-repeat center center;	
}
.knob10 {
	background: url(../image/knob10.jpg) no-repeat center center;	
}


.knobhandle {
	display:block;
	position: absolute;
	width:171px;
	height: 171px;
	background: url(../image/knob-handle.png) no-repeat center center;
	left:50%;
	top:50%;
	margin-top:-107px;
	margin-left: 317px;
	transform:rotate(-120deg);
	-ms-transform:rotate(-120deg); /* IE 9 */
	-webkit-transform:rotate(-120deg); /* Opera, Chrome, and Safari */
  -webkit-transition: all 1100ms linear;
  -moz-transition: all 1100ms linear;
  transition: all 1100ms linear;	
}

.methodology.section.active .knobhandle {
	transform:rotate(0deg);
	-ms-transform:rotate(0deg); /* IE 9 */
	-webkit-transform:rotate(0deg); /* Opera, Chrome, and Safari */
}

.methodology.section.active .knobhandle.part2 {
	transform:rotate(-65deg);
	-ms-transform:rotate(-65deg); /* IE 9 */
	-webkit-transform:rotate(-65deg); /* Opera, Chrome, and Safari */
}

.methodology.section.active .knobhandle.part2.part3 {
	transform:rotate(0deg);
	-ms-transform:rotate(0deg); /* IE 9 */
	-webkit-transform:rotate(0deg); /* Opera, Chrome, and Safari */
}

.method-browser.meth8 {
	width:147px;
	height: 107px;
	margin-top:-50px;	
  -webkit-transition: all 1100ms linear;
  -moz-transition: all 1100ms linear;
  transition: all 1100ms linear;		
}

.method-browser.meth8.part2 {
	width:197px;
	height: 157px;
	margin-top:-75px;	
}

.method-browser.meth8.part3 {
	width:147px;
	height: 107px;
	margin-top:-50px;	
}