@charset "utf-8";

/*	--------------------------------------------------
	:: TABLE OF CONTENTS
	
	:: Global
	:: Header
	:: Content
	:: Footer
-------------------------------------------------- */


/*	--------------------------------------------------
:: Global
-------------------------------------------------- */
	
	html {
		background-color: #191c26;
	}

	body {
		font-size: 100%;
		background-color: #3dbde8;
		min-width: 980px;
		-webkit-text-size-adjust:100%
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: "Roboto", Helvetica, sans-serif;
		font-weight: 700;
	}

	h2 {
		font-size: 3.375em;
		color: #313d3f;
		margin-bottom: .5em;
		text-shadow: 0px 1px 2px rgba(28, 31, 41, 0.35);
	}

	h3 {
		font-size: 1.8em;
		line-height: 1.2em;
		margin-bottom: .5em;
		color: #3dbde8;
		text-shadow: 0px 1px 2px rgba(28, 31, 41, 0.35);
	}

	h4 {
		font-size: 1.5em;
		color: #3dbde8;
		margin-bottom: .5em;
		text-shadow: 0px 1px 2px rgba(28, 31, 41, 0.35);
	}

	p {
		font-family: "Roboto", Helvetica, sans-serif;
		line-height: 1.3em;
		font-weight: 400;
		color: #3e453e;
	}

	strong {
		font-weight: bolder;
	}

	a:link {
		color: inherit;
		text-decoration: none;
	}

	a:hover, a:focus {
		text-decoration: underline;
	}

	a:active{
		text-decoration: none;
	}

	a:visited{
		color: inherit;
	}

	button {
		font-family:  "Roboto", Helvetica, sans-serif;
		border: none;

		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;

		-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
		-moz-box-shadow:    0px 1px 2px rgba(0, 0, 0, 0.6);
		box-shadow:         0px 1px 2px rgba(0, 0, 0, 0.6);

		-webkit-transition: background-color ease 0.3s;
		-moz-transition: background-color ease 0.3s;
		-o-transition: background-color ease 0.3s;
		-ms-transition: background-color ease 0.3s;
		transition: background-color ease 0.3s;
	}

	button:hover, button:focus {
		background-color: #cd4205;
	}

	button:active {
		-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
		-moz-box-shadow:    0px 0px 1px rgba(0, 0, 0, 0.6);
		box-shadow:         0px 0px 1px rgba(0, 0, 0, 0.6);
	}

	.main-btn {
		/*position: relative;*/
		font-size: 32px;
		color: #f6f7f1;
		background-color: #e75200;
		padding: 20px 60px;
		/*margin: 40px 0 0;*/
		/*z-index: 10;*/
	}

	.secondary-btn {
		position: relative;
		font-size: 16px;
		color: #f6f7f1;
		background-color: #e75200;
		padding: 8px 20px;
		z-index: 10;
	}

	.row {
		margin: 0 auto;
		width: 960px;
	}

	.column-1 {
			float: left;
			width: 380px;
	}

	.column-2 {
			float: left;
			width: 400px;
	}

	.page {
			background-color: #fff;;
			overflow: hidden;
			padding: 0 30px 40px;
			width: 890px;
			margin: 0 auto;

			-webkit-border-top-right-radius: 5px;
			-webkit-border-top-left-radius: 5px;
			-moz-border-radius-topright: 5px;
			-moz-border-radius-topleft: 5px;
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;

			-webkit-box-shadow: 0 -2px 5px rgba(0,0,0,.31);
			-moz-box-shadow: 0 -2px 5px rgba(0,0,0,.31);
			box-shadow: 0 -2px 5px rgba(0,0,0,.31);
		}

	.clearfix:after {
	     content: "";
	     visibility: hidden;
	     display: block;
	     font-size: 0;
	     clear: both;
	     height: 0;
	     }
	.clearfix { display: inline-block; }
	/* start commented backslash hack \*/
	* html .clearfix { height: 1%; }
	.clearfix { display: block; }
	/* close commented backslash hack */

/*	--------------------------------------------------
:: Header
-------------------------------------------------- */
	
	.header {
		height: 160px;
	}

	.logo {
		float: left;
		margin-top: 45px;
	}

	/* Nav */
		ul.nav {
			font: 400 1em "Roboto", Helvetica, sans-serif, "Arial Narrow", Helvetica, sans-serif;
			position: relative;
			color: #f5f5f6;
			line-height: 16px;
			float: right;
			margin-top: 56px;
			
			text-shadow: 0px 1px 2px rgba(28, 31, 41, 0.35);
		}

		ul.nav li {
			float: left;
			padding: 10px 20px;

			-webkit-transition: background 0.3s ease;
			-moz-transition: background 0.3s ease;
			-o-transition: background 0.3s ease;
			transition: background 0.3s ease;
		}

		ul.nav li:hover , ul.nav li:focus {
			background-color: #6dd1ef;
		}

		ul.nav li:active {
			background-color: #82d7f1;
		}

		ul.nav li:last-of-type {
			font-size: .7em;
			background-color: transparent;
			padding: 0;
			margin-left: 20px;
		}

		ul.nav li a {
			text-decoration: none;
		}
	/* /end Nav */

/*	--------------------------------------------------
:: Content
-------------------------------------------------- */
	
	.content h2, .content h3, .content p, .social, .map {
		margin-bottom: 20px;
	}

	.section-header {
		position: relative;
		background-color: #313d3f;
		color: #f3f4eb;
		padding: 20px 60px;
		margin: 0 -60px;
	}

	.submenu {
		position: absolute;
		float: right;
		top: 40px;
		right: 60px;
	}

	.content h2 a {
		font-size: .3em;
		font-weight: 400;
		float: left;
		margin-left: 20px;
		padding: 5px 20px;
		background-color: rgba(255, 255, 255, .07);

		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;

		text-shadow: 0px 1px 1px rgba(0, 0, 0, .8);

		box-shadow:inset 0px 0px 3px rgba(0,0,0,.6);
		-webkit-box-shadow:inset 0px 0px 3px rgba(0,0,0,.6);
		-moz-box-shadow:inset 0px 0px 3px rgba(0,0,0,.6);

		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.content h2 a:hover, .content h2 a:focus {
		color: #3ebee8;
		text-decoration: none;
		background-color: rgba(255, 255, 255, .1);		
	}

	.section {
		margin: 20px 0;
		padding: 20px;
		background-color: #e6e7e2;
		background-color: rgba(178, 179, 166, .2);
	}

	.break {
		border-top: 1px dashed #686959;
	}

	.login-container {
		position: relative;
		display: inline-block;
		margin: 40px;
	}

	.login-form, .login-form-lite {
		font: 300 16px/20px "Roboto Condensed", "Arial Narrow", Helvetica, sans-serif;
		background-color: #a1b7b8;
		padding: 15px;

		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;

		-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
		-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
	}


	.login-form label, .login-form-lite label {
		color: #3e453e;
		display: block;
		text-align: center;
		margin-bottom: 15px;
	}
	
	.login-form input[type="text"], .login-form-lite input[type="text"] {
		padding: 5px 10px;
		text-align: right;
		line-height: 20px;

		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 0;
		-webkit-border-bottom-left-radius: 5px;
		-webkit-border-bottom-right-radius: 0;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.login-form input[value="Send"], .login-form-lite input[value="Send"] {
		background-color: #545d54;
		color: #f6f7f1;
		padding: 5px 15px;
		margin-left: -4px;
		line-height: 24px;

		-webkit-appearance: none;

		-webkit-border-top-right-radius: 5px;
		-webkit-border-top-left-radius: 0;
		-webkit-border-bottom-right-radius: 5px;
		-webkit-border-bottom-left-radius: 0;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;

		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.login-form input[value="Send"]:hover, .login-form-lite input[value="Send"]:hover {
		background-color: #3e453e;
	}

	.login-form {
		/*display: none;*/
		/*position: absolute;*/
		/*bottom: 0px;*/
	}

	.login-form-lite {
		/*display: none;*/
		position: absolute;
		right: 0px;
		top: 55px;
		z-index: 10;

		text-shadow: none;
	}

	.login-form-lite:after {
		content: "";
		position: absolute;
		display: block;
		right: 50px;
		top: -11px;
		background: url(../img/sprite-ui.png) -200px -150px no-repeat;
		width: 22px;
		height: 11px
	}

	/* Home */
		.main-copy {
			padding-top: 140px;
			text-align: center;
		}

		.main-copy h2 {
			font-size: 3.375em;
			color: #3dbde8;
			margin-bottom: .2em;
			text-shadow: 0px 1px 2px rgba(28, 31, 41, 0.35);
			background-color: transparent;
		}
		
		.main-copy p {
			font: 300 1.5em/1.4em "Roboto Condensed", "Arial Narrow", Helvetica, sans-serif;
			color: #f6f7f1;
			margin-bottom: 0;
		}

		/*@media only screen and (max-device-width: 480px) {      
        	li.cta-icon-1, 
			li.cta-icon-2, 
			li.cta-icon-3, 
			li.cta-icon-4 { -webkit-text-size-adjust:100% }               
		}*/

		ul.cta-icons {
			padding: 100px 0 0;
			margin: 0 105px;
		}

		li.cta-icon-1, 
		li.cta-icon-2, 
		li.cta-icon-3, 
		li.cta-icon-4 {
			font: 300 16px/20px "Roboto Condensed", "Arial Narrow", Helvetica, sans-serif;
			color: #f6f7f1;
			position: relative;
			float: left;
			width: 127px;
			padding: 5px 10px;
			margin: 0 20px;
			z-index: 10;
			letter-spacing: -0.5px;

		}

		li.cta-icon-1:before,
		li.cta-icon-2:before,
		li.cta-icon-3:before,
		li.cta-icon-4:before  {
			content: "";
			position: absolute;
			right: 10px;
			top: -63px;
			width: 127px;
			height: 114px;
			z-index: -1;
		}

		li.cta-icon-1:before {
			background: url(../img/sprite-ui.png) 0 -250px no-repeat;
		}

		li.cta-icon-2:before {
			background: url(../img/sprite-ui.png) -150px -250px no-repeat;
		}

		li.cta-icon-3:before {
			background: url(../img/sprite-ui.png) -300px -250px no-repeat;
		}

		li.cta-icon-4:before {
			background: url(../img/sprite-ui.png) -450px -250px no-repeat;
		}

		.home-bg {
			background: url(../img/home-bg.png) center top no-repeat;
		}
	/* /end Home*/

	/* Testimonial */

		.testimonial ul {
			width: 870px;
			overflow: hidden;
			margin: 40px 45px 0;
			padding-bottom: 60px;
		}

		.testimonial ul li {
			position: relative;
			background-color: #f6f7f8;
			float: left;
			width: 210px;
			height: 360px;
			padding: 20px;
			margin: 0 20px;

			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;

			-webkit-box-shadow: 0 -2px 5px rgba(0,0,0,.31);
			-moz-box-shadow: 0 -2px 5px rgba(0,0,0,.31);
			box-shadow: 0 -2px 5px rgba(0,0,0,.31);
		}

		.testimonial p {
			font-family: "Roboto", Helvetica, sans-serif;
			font-weight: 300;
			color: #4e5859;
			line-height: 1.4em;
			margin-bottom: 1.4em;
		}
		
		.testimonial p:last-of-type {
			font-style: italic;
			color: #3dbde8;
			text-align: right;
		}

		.partner-logo {
			position: absolute;
			bottom: 0;
			width: 230px;
			margin: 0 -20px 0px;
			padding: 10px;
			text-align: center;
			background-color: #e3e3de;
			border-top: 1px dashed #abab9f;

			-webkit-border-bottom-right-radius: 5px;
			-webkit-border-bottom-left-radius: 5px;
			-moz-border-radius-bottomright: 5px;
			-moz-border-radius-bottomleft: 5px;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
		}
	/* /end Testimonial*/

	/* Solutions */
		.section a, .section a:hover{
			text-decoration: none;
		}
		.section h3 {
			font-size: 2.375em;
			line-height: 1.15em;
			margin-left: 20px;
			color: #4e5450;
			margin-bottom: 5px;
		}

		.section h4 {
			text-transform: uppercase;
			margin-left: 20px;
		}

		.section ul li:before {
			content: "";
			position: absolute;
			background: url(../img/sprite-ui.png) -250px 0 no-repeat;
			width: 30px;
			height: 29px;
			top: -3px;
			left: -40px;
		}

		.section ul {
			margin-bottom: 0;
			color: #3e453e;
		}

		.section ul li {
			font: 300 1.5em/1.25em "Roboto Condensed", "Arial Narrow", Helvetica, sans-serif;
			position: relative;
			margin: 20px 20px 20px 60px;
		}

		button small {
			font-size: 18px;
			font-weight: 300;
			display: block;
		}

		.feature-group {
			float: left;
			margin: 20px 0 0;
		}

		.free-easy:before, 
		.migrate:before, 
		.email-downtime:before, 
		.project-manager:before, 
		.comprehensive:before,
		.leading-solution:before {
			content: "";
			position: absolute;
			width: 85px;
			height: 85px;
			top: -10px;
			left: -65px;
		}
		
		.feature-group2 {
			float: right;
			margin: 20px 0 0;
		}

		.free-easy:before {
			background: url(../img/sprite-ui.png) 0 -50px no-repeat;
		}

		.migrate:before {
			background: url(../img/sprite-ui.png) -100px -50px no-repeat;
		}

		.email-downtime:before {
			background: url(../img/sprite-ui.png) 0 -150px no-repeat;
			top: -30px;
		}

		.project-manager:before {
			background: url(../img/sprite-ui.png) -100px -150px no-repeat;
			top: -16px;
		}

		.comprehensive:before {
			background: url(../img/sprite-ui.png) -200px -50px no-repeat;
		}

		.leading-solution:before {
			background: url(../img/sprite-ui.png) -300px -50px no-repeat;
		}			

		.feature {
			position: relative;
			margin-left: 60px;
			margin-right: 40px;
			float: left;
			width: 300px;
		}

		.feature h4 {
			margin-left: 0;
			line-height: 1.1em;
		}

		.feature-group blockquote:before {
			content: "";
			position: absolute;
			background: url(../img/sprite-ui.png) -300px 0 no-repeat;
			width: 20px;
			height: 33px;
			top: 58px;
			left: -18px;
		}

		.feature-group blockquote {
			position: relative;
			float: right;
			font-weight: 300;
			padding: 20px;
			background-color: #eff1f0;
			width: 340px;
		}
		
		.feature-group blockquote_large {
			position: relative;
			float: right;
			font-weight: 300;
			padding: 20px;
			background-color: #eff1f0;
			width: 380px;
		}

		.feature-group blockquote p {
			color: #3ebee8;
			font-size: .9em;
		}

		.feature-group blockquote p:last-of-type {
			text-align: right;
			font-style: italic;
			color: #898f8d;
			margin-bottom: 0;
		}
	/* /end Solutions*/

	/* Clients */
		.feature-group h4 {
			margin-left: 0;
		}
		.testimonial-2 {
			position: relative;
			margin-left: 20px;
			margin-right: 40px;
			float: left;
			width: 340px;
		}
		.testimonial-3 {
			position: relative;
			margin-left: 20px;
			margin-right: 40px;
			float: left;
			width: 300px;
		}
		.testimonial-2 img {
			margin-bottom: 10px;
		}
	/* /end Clients*/

	/* Contact */

		.map-box-1, .map-box-2 {
			-webkit-box-shadow: 0 -2px 5px rgba(0,0,0,.31);
			-moz-box-shadow: 0 -2px 5px rgba(0,0,0,.31);
			box-shadow: 0 -2px 5px rgba(0,0,0,.31);

			-webkit-border-top-right-radius: 5px;
			-webkit-border-top-left-radius: 5px;
			-moz-border-radius-topright: 5px;
			-moz-border-radius-topleft: 5px;
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;
		}

		#map-canvas-1, #map-canvas-2 {
			width: 400px;
			height: 380px;
			background-color: silver;

			-webkit-border-top-right-radius: 5px;
			-webkit-border-top-left-radius: 5px;
			-moz-border-radius-topright: 5px;
			-moz-border-radius-topleft: 5px;
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;
		}

		.maps {
			margin: 40px 0;
		}

		.map-box-1 {
			float: left;
		}

		.map-box-2 {
			float: right;
		}

		.caption {
			background-color: #fff;
			padding: 20px;

			-webkit-border-bottom-right-radius: 5px;
			-webkit-border-bottom-left-radius: 5px;
			-moz-border-radius-bottomright: 5px;
			-moz-border-radius-bottomleft: 5px;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
		}

		.caption p:last-of-type {
			margin-bottom: 0;
		}

		.page a {
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}

		.page a:hover {
			color: #3ebee8;
		}

		.facebook a, .google a, .linkedin a, .twitter a {
			float: left;
			margin-right: 10px;
			text-indent: -9999px;
			width: 40px;
			height: 40px;
			opacity: .8;
		}

		.facebook a:hover, .google a:hover, .linkedin a:hover, .twitter a:hover,
		.facebook a:focus, .google a:focus, .linkedin a:focus, .twitter a:focus{
			opacity: 1;
		}

		.facebook a {
			background: url(../img/sprite-ui.png) 0 top no-repeat;
		}

		.google a {
			background: url(../img/sprite-ui.png) -50px top no-repeat;
		}

		.linkedin a {
			background: url(../img/sprite-ui.png) -100px top no-repeat;
		}

		.twitter a {
			background: url(../img/sprite-ui.png) -150px top no-repeat;
		}

		.facebook, 
		.google, 
		.linkedin, 
		.twitter {
			-webkit-transition: all 0.25s ease;
			-moz-transition: all 0.25s ease;
			-o-transition: all 0.25s ease;
			transition: all 0.25s ease;
		}

		/* Contact form */

			.contact-form {
				font-family: "Roboto", Helvetica, sans-serif;
				background-color: #badce6;
				float: right;
				width: 300px;

				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;

				-webkit-box-shadow: 0px 0px 5px rgba(8, 0, 0, 0.47);
				-moz-box-shadow: 0px 0px 5px rgba(8, 0, 0, 0.47);
				box-shadow: 0px 0px 5px rgba(8, 0, 0, 0.47);
			}
			
			.contact-form legend {
				position: relative;
				font-size: 1.5em;
				font-weight: 400;
				text-align: center;
				color: #f5f5f6;
				background-color: #313d3f;
				padding: 20px 10px;
				/*margin: 0 0 20px;*/
				width: 280px;

				-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 8, 0.35);
				-moz-box-shadow: 0px 2px 3px rgba(0, 0, 8, 0.35);
				box-shadow: 0px 2px 3px rgba(0, 0, 8, 0.35);

				-webkit-border-top-left-radius: 5px;
				-webkit-border-top-right-radius: 5px;
				-moz-border-radius-topleft: 5px;
				-moz-border-radius-topright: 5px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}

			.contact-form legend:after {
				content: "";
				position: absolute;
				display: block;
				left: 145px;
				bottom: -9px;
				background: url(../img/sprite-ui.png) -200px 0 no-repeat;
				width: 13px;
				height: 9px;
			}
			
			.contact-form label {
				font-weight: 500;
				color: #1a171b;
				display: block;
				margin: 0 20px 10px;
			}

			.contact-form input, textarea {
				font: 300 1em/1.2em "Roboto Condensed", "Arial Narrow", Helvetica, sans-serif;
				border: none;
				margin: 0 20px 20px;
				padding: 10px;
				width: 240px;
				background-color: #f5f5f6;

				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}

			textarea {
				resize: none;
			}

			textarea:focus, input:focus {
				background-color: #e8faff;
			}

			.contact-form button {
				display: block;
				margin: 0 auto 20px;
				font-size: 1.2em;
			}
		/* /end Contact form */
	/*/end Contact*/

/*	--------------------------------------------------
:: Footer
-------------------------------------------------- */

	.footer {
		padding: 20px 10px 40px;
		background-color: #191c26;
	}

	.footer p, .footer ul li {
		font-family: "Roboto Condensed", "Arial Narrow", Helvetica, sans-serif;
		font-weight: 300;
		color: #b4b4b4;
	}

	.footer ul {
		float: left;
		margin: 0 20px 20px;
	}

	.footer ul li {
		margin: 10px 0;
	}

	.footer ul li:first-of-type {
		margin-bottom: 20px;
		text-transform: uppercase;
		font-weight: 500;
		color: #dadada;
	}

	.footer a:hover, .footer a:focus {
		color: #dadada;
	}

	.footer p {
		clear: both;
		text-indent: 1em;
	}
	
/*	--------------------------------------------------
:: API DOCUMENTATION
-------------------------------------------------- */

.api-body {
	width: 600px;
	float: right;
	margin-top: 40px;
	line-height: 1.5em;
	font-family: verdana;
	font-size: 14px;
	padding-right: 50px;
}

.api-body p {
	font-family: verdana;
	font-size: 14px;
}

.api-index {
	width: 200px;
	float: left;
	margin-top: 40px;
	line-height: 1.3em;
	font-family: "Roboto", Helvetica, sans-serif;
	color: #808080;
	hover: none;
}

.api-index a:hover {
	color: #B0B0B0;
}

.api-header {
	font-family: "Roboto", Helvetica, sans-serif;
	font-weight: 1000;
	font-size: 1.5em;
}

.api-list {
	list-style: disc;
	padding: 0 0 0 30px;
	line-height: 1.5em;
}

.api-list li {
	line-height: 1.45em;
	font-family: verdana;
}

.api-list-body {
	font-family: verdana;
	margin: 0 0 10px 0;
	padding: 10px 10px 10px 10px;
	font-size: 14px;
}

.bullet-text {
	font-weight: 700;
}

.api-index-section {
	font-family: "Roboto", Helvetica, sans-serif;
	font-weight: 1200;
	font-size: 1.1em;
	color: #000;
}

.api-index-list {
	list-style: none;
	padding: 5px 0 10px 20px;
	line-height: 1.5em;
}