/*
Designed by Media Flare
http://wwww.media-flare.com
Copyright © 2011 Media Flare. All rights reserved.
*/

@font-face {
	  font-family: 'FuturaLight';
    src: url('../font/futura-ltcn-bt-light-webfont.eot');
    src: url('../font/futura-ltcn-bt-light-webfont.eot?iefix') format('eot'),
         url('../font/futura-ltcn-bt-light-webfont.woff') format('woff'),
         url('../font/futura-ltcn-bt-light-webfont.ttf') format('truetype'),
         url('../font/futura-ltcn-bt-light-webfont.svg#webfontHLATdYNX') format('svg');
    font-weight: normal;
    font-style: normal;

}

.masthead ul.cols{margin-top:33px;min-height:244px;list-style:none;margin-left:0}

.masthead ul.cols li{width:306px;float:left;text-align:center;font-size:14px;margin-right:31px;padding-top:146px;position:relative;color:#6d6d6d;line-height:1em;position:relative}

.masthead ul.cols li.work-anywhere .stage{width:206px;height:121px;position:absolute;left:49px;top:10px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}

.masthead ul.cols li.work-anywhere .stage.action{opacity:1;filter:alpha(opacity=100)}

.masthead ul.cols li.work-anywhere .stage div{position:absolute;display:block;-webkit-transition:left .3s ease-in-out;-moz-transition:left .3s ease-in-out}

.masthead ul.cols li.work-anywhere .stage .web{
	width:190px;
	height:160px;
	top:9px;
	left:17px;
	z-index:100;
	background-image: url(../images/design.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.masthead ul.cols li.work-anywhere .stage .web:hover{
	background-position: 0 -160px;

}

.masthead ul.cols li.start-using .stage{width:212px;height:121px;position:absolute;left:49px;top:12px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}

.masthead ul.cols li.start-using .stage div{position:absolute;display:block;background-repeat:none;background-position:left top;-moz-transition-property:left,top,-moz-transform;-moz-transition-duration:.3s,.3s,.3s;-moz-transition-timing-function:ease-in-out,ease-in-out,ease-in-out;-webkit-transition-property:left,top,-webkit-transform;-webkit-transition-duration:.3s,.3s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out}

.masthead ul.cols li.start-using .cloud{
	width:190px;
	height:160px;
	display:block;
	position:absolute;
	left:57px;
	top:15px;
	z-index:100;
	background-color: transparent;
	background-image: url(../images/host.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.masthead ul.cols li.start-using .cloud:hover{
	background-position: 0 -160px;
}

.masthead ul.cols li.start-using{position:relative}

.masthead ul.cols li.with-anyone{margin-right:0;position:relative}

.masthead ul.cols li.with-anyone .stage{position:absolute;width:212px;height:109px;display:block;top:31px;left:47px}

.masthead ul.cols li.with-anyone .stage div{position:absolute;display:block;background-repeat:none;background-position:left top;-moz-transition-property:left,top,-moz-transform;-moz-transition-duration:.3s,.3s,.3s;-moz-transition-timing-function:ease-in-out,ease-in-out,ease-in-out;-webkit-transition-property:left,top,-webkit-transform;-webkit-transition-duration:.3s,.3s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out}

.masthead ul.cols li.with-anyone .stage .p1{
	width:190px;
	height:160px;
	background-image:url(../images/market.png);
	top:-7px;
	left:10px;
	background-position: 0px 0px;
}

.masthead ul.cols li.with-anyone .stage .p1:hover{
	background-position: 0 -160px;
}

.masthead ul.cols li .text{margin:39px 11px 0 28px; line-height:1.4em}

li .text p{
	font-family: Helvetica Neue, Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	color:#c2c2c2;
	font-size:15px;
	}

.masthead ul.cols li h3{
	font-family: 'FuturaLight';
	font-size:40px;
	font-weight:normal;
	color:#fff;
	position:relative;
	line-height:1.0em;
	margin-bottom:5px;
	text-transform:uppercase;
	}

.masthead ul.cols li.work-anywhere span.arrow{width:142px;height:48px;background:url(../images/masthead-arrow1.png) no-repeat left top;display:block;position:absolute;top:0;right:-85px;-webkit-transition:.2s all linear;-webkit-transform:rotate3d(0,0,0,0deg)}


.csstransforms3d .masthead ul.cols li.work-anywhere span.arrow{-webkit-transform:rotate3d(0,0,0,0deg)}

.masthead ul.cols li.work-anywhere span.arrow.a{margin-right:42px;-webkit-transform:rotate(-30deg);opacity:0;filter:alpha(opacity=0)}

.csstransforms3d .masthead ul.cols li.work-anywhere span.arrow.a{-webkit-transform:rotate3d(0,0,0,-30deg)}


.masthead ul.cols li.start-using span.arrow{width:132px;height:45px;background:url(../images/masthead-arrow2.png) no-repeat left top;right:-62px;top:6px;position:absolute;-webkit-transition:.2s -webkit-transform linear,.2s margin-right linear}


.csstransforms3d .masthead ul.cols li.start-using span.arrow.a{-webkit-transform:rotate3d(0,0,0,0deg)}

.masthead ul.cols li.start-using span.arrow.a{margin-right:42px;-webkit-transform:rotate(-30deg);opacity:0;filter:alpha(opacity=0)}

.csstransforms3d .masthead ul.cols li.start-using span.arrow.a{-webkit-transform:rotate3d(0,0,0,-30deg)}

.ie7 .masthead ul.cols li a.start-using{
	margin-top:170px
	}