@charset "UTF-8";
/* CSS Document */

/* -------------------------- */

/* Normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}


/* -------------------------- */
/* -------------------------- */
/* Global */


body {
	line-height: 1;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 100%;
}

a, a:visited {
	color: rgba(255,105,47,1.00);
	text-decoration: none;
	-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
}

a:hover, a:visited:hover {
	color: rgba(47,194,255,1);
	text-decoration: none;
	-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
}



p strong {
	font-weight: 600;
}







/* -------------------------- */
/* -------------------------- */
/* Mobile Portrait */
@media screen and (orientation:portrait) {
		
		
		
	/* Structure */
	
	.page {
		background-color: #ffffff;
	}
	
	.container {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;	
	}
	
	#Home {
		background-image: url("../images/bg-home.jpg");
		background-size: auto;
		background-position: top center;
		background-repeat: repeat;
		padding: 0 6%;
		text-align: center;
		vertical-align: top;
		height: 95vh;
	}
	
		#Home .container {
			padding-top: 10%;	
		}
		
		#Home .container img {
			width: 40%;
			height: auto;	
		}
	
		#Home .twitterlink {
			background-image:url(../images/icon-twitter.png);
			background-size: 28%;
			background-position: top right;
			background-repeat: no-repeat;
			margin-top: 15px;
			padding: 15px 60px 15px 0;
			position: absolute;
			top: 0;
			right: 10px;
			color: #1f88c9;
			text-decoration: none;
		}
			
			#Home .twitterlink:hover {
				color: #1f88c9;
				-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
			}
			
			#Home .twitterlink span {
				opacity: 0;
			}
			
			#Home .twitterlink:hover span {
				opacity: 0;
			}
			
			
			#Home h1 {
				font-size: 1.500em;
				line-height: 1.25em;
				font-weight: 300;
				color: #01296c;
				margin-bottom: .8em;	
			}
			
			#Home h2 {
				font-size: 1.313em;
				line-height: 1.25em;
				font-weight: 300;
				color: #455560;	
				margin-bottom: .08em;	
			}
			
				#Home h2 span {
					font-size: 1.75em;
					line-height: 1.25em;
					font-weight: 300;
					color: #1f88c9;	
					display: block;
					margin: 0;
					padding: 0;
				}
		
		
		
		
		#Arrow {
			width: 25px;
			height: 25px;
			background: url(../images/downarrow.png) top center no-repeat;
			position: absolute;
			bottom: 5%;
			left: calc(50% - 12px);
			-webkit-animation-name: downarrowmobile; /* Chrome, Safari, Opera */
			-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
			-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
			-webkit-animation-timing-function: ease-in-out;
			animation-name: downarrowmobile;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}
		
		
			#Arrow a {
				display: block;
				width: 25px;
				height: 25px;
			}
			
		
	
	#About {
		background-color: #144193;
		padding: 6%;
		text-align: left;
		vertical-align: top;
		color: #ffffff;
	}
	
		#About h3 {
			font-size: 1.50em;
			line-height: 1.5em;
			font-weight: 300;
			color: #ffffff;
			margin: 0 0 1em 0;
		}
		
		
		#About .half {
			display: block;
			width: auto;
			margin: 0 0 3% 0;
			padding: 0 0 0 0;	
			text-align: left;
			vertical-align: top;
		}
		
		#About p {
			font-size: 1em;
			line-height: 1.45em;
			font-weight: 300;
			color: #ffffff;	
			margin: 0 0 1.5em 0;	
		}
		
	
	
	
	#Services {
		background-color: #fff;
		background-size: auto;
		background-position: bottom right;
		background-repeat: no-repeat;
		padding: 6%;
	}
	
		#Services p {
			font-size: .9em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		#Services h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 .8em 0;
		}
		
		#Services h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Services .half {
			display: block;
			width: auto;
			margin: 0 0 0 0;
			padding: 0 0 0 0;	
			text-align: left;
			vertical-align: top;
		}
	
	
	
	#Examples {
		background-color: #efefef;
		padding: 6%;
		text-align: left;
		vertical-align: top;
	}
	
		#Examples h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 .8em 0;
		}
		
		#Examples h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Examples p {
			font-size: .9em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		
	
		
	/* Samples */
	
		.portsection {
			display: block;
			text-align: left;
			vertical-align: top;
			margin: 0 0 15px 0;
			padding: 0;
		}
		
		.port-object {
			border: 10px solid #fff;
			display: inline-block;
			margin: 10px 10px 10px 0;
			width: 120px;
			height: 120px;
			-moz-transition: all 0.2s linear;
			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			transition: all 0.2s linear;
			list-style-type: none;
			background-color: #fff;
			position: relative;
			box-shadow: 0 0 4px #cecece;
		}
		
		
		.port-object img {
			width: 120px;
			height: 120px;
		}
		
		.port-object span {
			opacity: 0;
			padding: 65px 15px 15px 15px;
			color: #efefef;
			font-weight: normal;
			font-size: 1em;
			background-color: rgba(1,42,109,0.80);
			position: absolute;
			top: -10px;
			left: -10px;
			width: 140px;
			height: 90px;
			display: block;
			text-align: center;
			vertical-align: top;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
		
		.port-object:hover span {
			opacity: 1;
		}
		
		.port-object:hover {
			border: 10px solid #fff;
			display: inline-block;
			margin: 10px 20px 20px 0;	
			width: 120px;
			height: 120px;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
		
		.port-object:hover img {
			width: 120px;
			height: 120px;
		}
	
	
	
	
	
	
	#Contact {
		background-color: #ffffff;
		padding: 5% 6% 20% 6%;
	}
	
		#Contact .half {
			display: block;
			width: auto;
			margin: 0 0 0 0;
			padding: 0 0 0 0;	
			text-align: left;
			vertical-align: top;
		}
		
		#Contact h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}
		
		#Contact h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Contact h6 {
			font-size: 1.2em;
			line-height: 1.25em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}	
			
			#Contact h6 span {
				font-size: 2.625em;
				font-weight: 300;
				color: #1e87c8;
				margin: 0 0 1em 0;
			}
			
			
		
		#Contact p {
			font-size: 1em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		.mapit {
			display: inline-block;
			margin: 10px 0 0 0;
			padding: 10px;
			font-size: .8em;
			line-height: .8em;
			font-weight: 400;
			border-radius: 3px;
			border: 0;
			background-color: rgb(234,234,234);
			color: #455560;	
		}
		
			.mapit:hover {
				background-color: rgb(30,135,200);
				color: #fff;	
				-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
			}
		
		
		
		
		
	/* Form */


		.block {
			width: auto;
			text-align: left;
			display: block;
		}
		.element * {
			padding: 5px;
			margin: 2px;
			font-family: 'Raleway', sans-serif;
			font-size: 1em;
			font-weight: 400;
		}
		.element label {
			float: none;
			width: auto;
			display: block;
			font-size: 1em;
			font-weight: 400;
			color: #455560;
			padding-top: 10px;
		}
		.element input.text {
			-webkit-appearance: none;
			float: none;
			width: 80%;
			padding: 10px 0 10px 20px;
			border: 1px solid #cecece;
			font-size: 1em;
			line-height: 1.2em;
			font-weight: 400;
			color: #455560;	
		}
		.element .text-area {
			-webkit-appearance: none;
			height: 100px;
			width: 80%;
			padding-left: 20px;
			border: 1px solid #cecece;
			font-size: 1em;
			font-weight: 400;
			color: #455560;	
		}
		.element .hightlight {
			border: 2px solid #9F1319;
			background: url(../images/iconCaution.gif) no-repeat 2px;
		}
		.element #submit {
			-webkit-appearance: none;
			float: none;
			margin: 10px 5px 0 0;
			padding: 10px 15px;
			font-size: 1.2em;
			font-weight: 300;
			border-radius: 3px;
			border: 0;
			background-color: rgb(30,135,200);
			color: #fff;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
			.element #submit:hover {
				background-color: rgb(255,105,47);
				color: #fff;	
				cursor: pointer;
			}
		
		.loading {
			float:right;
			background:url(../images/ajax-loader.gif) no-repeat 1px;
			height:28px;
			width:28px;
			display:none;
		}
		.done {
			display:none;
		}

		
		
/* Copyright */			
		
	.copyright {
		background-color: #144193;
		padding: 6%;
		font-size: .8em;
		line-height: 1.2em;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
	}
		
		
		
/* Page Location Dots */	
	
	
	.legend {
		position: fixed;
		top: 20px;
		left: 10px;
	}
	
	.legend ul {
		display: block;	
		margin: 0;
		padding: 0;
	}
	
	.legend ul li {
		display: block;	
		margin: 0 0 5px 0;
		padding: 0;
	}
	
		.legend ul li a {
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background-color: #98c9e8;
			display: block;
			text-decoration: none;
			position: relative;
		}
		
			.legend ul li a:hover {
			}
			
			.legend ul li a.active {
				background-color: #1e87c8;
			}

		.legend ul li a span {
			display: none;
		}
			
			.legend ul li:hover a span {
				display: none;
			}
		
		
		
}





/* -------------------------- */
/* -------------------------- */
/* Mobile Landscape */
@media screen and (max-width:768px) and (orientation:landscape) {
		
		
	/* Structure */
	
	.page {
		background-color: #ffffff;
	}
	
	.container {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;	
	}
	
	#Home {
		background-image: url(../images/bg-home.jpg);
		background-size: auto;
		background-position: top center;
		background-repeat: repeat;
		padding: 0 6%;
		text-align: center;
		vertical-align: top;
		height: 95vh;
	}
	
		#Home .container {
			padding-top: 5%;	
		}
		
		#Home .container img {
			width: 15%;
			height: auto;	
		}
	
		#Home .twitterlink {
			background-image:url(../images/icon-twitter.png);
			background-size: 28%;
			background-position: top right;
			background-repeat: no-repeat;
			margin-top: 15px;
			padding: 15px 60px 15px 0;
			position: absolute;
			top: 0;
			right: 10px;
			color: #1f88c9;
			text-decoration: none;
		}
			
			#Home .twitterlink:hover {
				color: #1f88c9;
				-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
			}
			
			#Home .twitterlink span {
				opacity: 0;
			}
			
			#Home .twitterlink:hover span {
				opacity: 0;
			}
			
			
			#Home h1 {
				font-size: 1.2500em;
				line-height: 1.25em;
				font-weight: 400;
				color: #01296c;
				margin-bottom: .8em;	
			}
			
			#Home h2 {
				font-size: 1em;
				line-height: 1.25em;
				font-weight: 500;
				color: #455560;	
				margin-bottom: .08em;	
			}
			
				#Home h2 span {
					font-size: 1.5em;
					line-height: 1.25em;
					font-weight: 400;
					color: #1f88c9;	
					display: block;
					margin: 0;
					padding: 0;
				}
		
		
		
		
		#Arrow {
			width: 25px;
			height: 25px;
			background: url(../images/downarrow.png) top center no-repeat;
			position: absolute;
			bottom: 10%;
			left: calc(50% - 12px);
			-webkit-animation-name: downarrow; /* Chrome, Safari, Opera */
			-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
			-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
			-webkit-animation-timing-function: ease-in-out;
			animation-name: downarrow;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}
		
		
		
		
	
	#About {
		background-color: #144193;
		padding: 6%;
		text-align: left;
		vertical-align: top;
		color: #ffffff;
	}
	
		#About h3 {
			font-size: 1.50em;
			line-height: 1.5em;
			font-weight: 300;
			color: #ffffff;
			margin: 0 0 1em 0;
		}
		
		
		#About .half {
			display: block;
			width: auto;
			margin: 0 0 3% 0;
			padding: 0 0 0 0;	
			text-align: left;
			vertical-align: top;
		}
		
		#About p {
			font-size: 1em;
			line-height: 1.45em;
			font-weight: 300;
			color: #ffffff;	
			margin: 0 0 1.5em 0;	
		}
		
	
	
	
	#Services {
		background-color: #fff;
		background-size: auto;
		background-position: bottom right;
		background-repeat: no-repeat;
		padding: 6%;
	}
	
		#Services p {
			font-size: .9em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		#Services h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 .8em 0;
		}
		
		#Services h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Services .half {
			display: block;
			width: auto;
			margin: 0 0 0 0;
			padding: 0 0 0 0;	
			text-align: left;
			vertical-align: top;
		}
	
	
	
	#Examples {
		background-color: #efefef;
		padding: 6%;
		text-align: left;
		vertical-align: top;
	}
	
		#Examples h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 .8em 0;
		}
		
		#Examples h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Examples p {
			font-size: .9em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		
	
		
	/* Samples */
	
		.portsection {
			display: block;
			text-align: left;
			vertical-align: top;
			margin: 0 0 15px 0;
			padding: 0;
		}
		
		.port-object {
			border: 10px solid #fff;
			display: inline-block;
			margin: 10px 10px 10px 0;
			width: 120px;
			height: 120px;
			-moz-transition: all 0.2s linear;
			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			transition: all 0.2s linear;
			list-style-type: none;
			background-color: #fff;
			position: relative;
			box-shadow: 0 0 4px #cecece;
		}
		
		
		.port-object img {
			width: 120px;
			height: 120px;
		}
		
		.port-object span {
			opacity: 0;
			padding: 65px 15px 15px 15px;
			color: #efefef;
			font-weight: normal;
			font-size: 1em;
			background-color: rgba(1,42,109,0.80);
			position: absolute;
			top: -10px;
			left: -10px;
			width: 140px;
			height: 90px;
			display: block;
			text-align: center;
			vertical-align: top;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
		
		.port-object:hover span {
			opacity: 1;
		}
		
		.port-object:hover {
			border: 10px solid #fff;
			display: inline-block;
			margin: 10px 20px 20px 0;	
			width: 120px;
			height: 120px;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
		
		.port-object:hover img {
			width: 120px;
			height: 120px;
		}
	
	
	
	
	
	
	#Contact {
		background-color: #ffffff;
		padding: 5% 6% 20% 6%;
	}
	
		#Contact .half {
			display: block;
			width: auto;
			margin: 0 0 0 0;
			padding: 0 0 0 0;	
			text-align: left;
			vertical-align: top;
		}
		
		#Contact h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}
		
		#Contact h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Contact h6 {
			font-size: 1.2em;
			line-height: 1.25em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}	
			
			#Contact h6 span {
				font-size: 2.625em;
				font-weight: 300;
				color: #1e87c8;
				margin: 0 0 1em 0;
			}
			
			
		
		#Contact p {
			font-size: 1em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		.mapit {
			display: inline-block;
			margin: 10px 0 0 0;
			padding: 10px;
			font-size: .8em;
			line-height: .8em;
			font-weight: 400;
			border-radius: 3px;
			border: 0;
			background-color: rgb(234,234,234);
			color: #455560;	
		}
		
			.mapit:hover {
				background-color: rgb(30,135,200);
				color: #fff;	
				-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
			}
		
		
		
		
		
	/* Form */


		.block {
			width: auto;
			text-align: left;
			display: block;
		}
		.element * {
			padding: 5px;
			margin: 2px;
			font-family: 'Raleway', sans-serif;
			font-size: 1em;
			font-weight: 400;
		}
		.element label {
			float: none;
			width: auto;
			display: block;
			font-size: 1em;
			font-weight: 400;
			color: #455560;
			padding-top: 10px;
		}
		.element input.text {
			-webkit-appearance: none;
			float: none;
			width: 50%;
			padding: 10px 0 10px 20px;
			border: 1px solid #cecece;
			font-size: 1em;
			line-height: 1.2em;
			font-weight: 400;
			color: #455560;	
		}
		.element .text-area {
			-webkit-appearance: none;
			height: 100px;
			width: 50%;
			padding-left: 20px;
			border: 1px solid #cecece;
			font-size: 1em;
			font-weight: 400;
			color: #455560;	
		}
		.element .hightlight {
			border: 2px solid #9F1319;
			background: url(../images/iconCaution.gif) no-repeat 2px;
		}
		.element #submit {
			-webkit-appearance: none;
			float: none;
			margin: 10px 5px 0 0;
			padding: 10px 15px;
			font-size: 1.2em;
			font-weight: 300;
			border-radius: 3px;
			border: 0;
			background-color: rgb(30,135,200);
			color: #fff;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
			.element #submit:hover {
				background-color: rgb(255,105,47);
				color: #fff;	
				cursor: pointer;
			}
		
		.loading {
			float:right;
			background:url(../images/ajax-loader.gif) no-repeat 1px;
			height:28px;
			width:28px;
			display:none;
		}
		.done {
			display:none;
		}

		
		
/* Copyright */			
		
	.copyright {
		background-color: #144193;
		padding: 6%;
		font-size: .8em;
		line-height: 1.2em;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
	}
		
		
		
/* Page Location Dots */	
	
	
	.legend {
		position: fixed;
		top: 20px;
		left: 10px;
	}
	
	.legend ul {
		display: block;	
		margin: 0;
		padding: 0;
	}
	
	.legend ul li {
		display: block;	
		margin: 0 0 5px 0;
		padding: 0;
	}
	
		.legend ul li a {
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background-color: #98c9e8;
			display: block;
			text-decoration: none;
			position: relative;
		}
		
			.legend ul li a:hover {
			}
			
			.legend ul li a.active {
				background-color: #1e87c8;
			}

		.legend ul li a span, .legend ul li a.active span {
			display: none;
		}
			
			.legend ul li:hover a span, .legend ul li:hover a.active span {
				display: none;
			}
		
		
		
}





/* -------------------------- */
/* -------------------------- */
/* Desktop */
@media screen and (min-width:769px) {
	
	/* Structure */
	
	.page {
		background-color: #ffffff;
	}
	
	.container {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;	
	}
	
	#Home {
		background-image: url(../images/bg-home.jpg);
		background-size: auto;
		background-position: top center;
		background-repeat: repeat;
		padding: 0 5%;
		text-align: center;
		vertical-align: top;
		height: 95vh;
	}
	
		#Home .container {
			padding-top: 5%;	
		}
		
		#Home .container img {
			width: 100%;
			max-width: 208px;
			height: auto;	
		}
	
		#Home .twitterlink {
			background-image:url(../images/icon-twitter.png);
			background-size: 28%;
			background-position: top right;
			background-repeat: no-repeat;
			margin-top: 15px;
			padding: 15px 60px 15px 0;
			position: absolute;
			top: 3%;
			right: 3%;
			color: #1f88c9;
			text-decoration: none;
		}
			
			#Home .twitterlink:hover {
				color: #1f88c9;
				-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
			}
			
			#Home .twitterlink span {
				opacity: 0;
			}
			
			#Home .twitterlink:hover span {
				opacity: 1;
				-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
			}
			
			
			
			#Home h1 {
				font-size: 2.125em;
				line-height: 1.25em;
				font-weight: 300;
				color: #01296c;
				margin-bottom: .8em;	
			}
			
			#Home h2 {
				font-size: 1.313em;
				line-height: 1.25em;
				font-weight: 300;
				color: #455560;	
				margin-bottom: .08em;	
			}
			
				#Home h2 span {
					font-size: 2.0em;
					line-height: 1.25em;
					font-weight: 300;
					color: #1f88c9;	
					display: block;
					margin: 0;
					padding: 0;
				}
		
		
		
		
		#Arrow {
			width: 25px;
			height: 25px;
			background: url(../images/downarrow.png) top center no-repeat;
			position: absolute;
			bottom: 10%;
			left: calc(50% - 12px);
			-webkit-animation-name: downarrow; /* Chrome, Safari, Opera */
			-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
			-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
			-webkit-animation-timing-function: ease-in-out;
			animation-name: downarrow;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: ease-in-out;
		}
		
			#Arrow a {
				display: block;
				width: 25px;
				height: 25px;
			}
				
		
		
	
	#About {
		background-color: #144193;
		padding: 4% 3% 3% 3%;
		text-align: center;
		vertical-align: top;
		color: #ffffff;
	}
	
		#About h3 {
			font-size: 1.50em;
			line-height: 1.5em;
			font-weight: 300;
			color: #ffffff;
			margin: 0 0 1em 0;
		}
		
		
		#About .half {
			display: inline-block;
			width: 45%;
			margin: 0 -4px 0 0;
			padding: 0 2.5% 3% 2.5%;	
			text-align: center;
			vertical-align: top;
		}
		
		#About p {
			font-size: 1em;
			line-height: 1.45em;
			font-weight: 300;
			color: #ffffff;	
			margin: 0 0 1.5em 0;	
		}
		
	
	
	
	#Services {
		background-color: #fff;
		background-size: auto;
		background-position: bottom right;
		background-repeat: no-repeat;
		padding: 5% 3%;
	}
	
		#Services p {
			font-size: .9em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		#Services h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}
		
		#Services h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Services .half {
			display: inline-block;
			width: 45%;
			margin: 0 -4px 0 0;
			padding: 0 5% 0 0;	
			text-align: left;
			vertical-align: top;
		}
	
	
	
	#Examples {
		background-color: #efefef;
		padding: 5% 3%;
		text-align: left;
		vertical-align: top;
	}
	
		#Examples h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}
		
		#Examples h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Examples p {
			font-size: .9em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		
	
		
	/* Samples */
	
		.portsection {
			display: block;
			text-align: left;
			vertical-align: top;
			margin: 0 0 15px 0;
			padding: 0;
		}
		
		.port-object {
			border: 10px solid #fff;
			display: inline-block;
			margin: 10px 20px 20px 0;
			width: 150px;
			height: 150px;
			-moz-transition: all 0.2s linear;
			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			transition: all 0.2s linear;
			list-style-type: none;
			background-color: #fff;
			position: relative;
			box-shadow: 0 0 4px #cecece;
		}
		
		
		.port-object img {
			width: 150px;
			height: 150px;
		}
		
		.port-object span {
			opacity: 0;
			padding: 65px 15px 15px 15px;
			color: #efefef;
			font-weight: normal;
			font-size: 1em;
			background-color: rgba(1,42,109,0.80);
			position: absolute;
			top: -10px;
			left: -10px;
			width: 140px;
			height: 90px;
			display: block;
			text-align: center;
			vertical-align: top;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
		
		.port-object:hover span {
			opacity: 1;
		}
		
		.port-object:hover {
			border: 10px solid #fff;
			display: inline-block;
			margin: 10px 20px 20px 0;	
			width: 150px;
			height: 150px;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
		
		.port-object:hover img {
			width: 150px;
			height: 150px;
		}
	
	
	
	
	
	
	#Contact {
		background-color: #ffffff;
		padding: 5% 3% 20% 3%;
	}
	
		#Contact .half {
			display: inline-block;
			width: 45%;
			margin: 0 -4px 0 0;
			padding: 0 5% 0 0;	
			text-align: left;
			vertical-align: top;
		}
		
		#Contact h2 {
			font-size: 2.625em;
			line-height: 1em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}
		
		#Contact h5 {
			font-size: 1.2em;
			line-height: 1em;
			font-weight: 500;
			color: #1e87c8;
			margin: 0 0 1em 0;
		}
		
		#Contact h6 {
			font-size: 1.2em;
			line-height: 1.25em;
			font-weight: 300;
			color: #455560;
			margin: 0 0 1em 0;
		}	
			
			#Contact h6 span {
				font-size: 2.625em;
				font-weight: 300;
				color: #1e87c8;
				margin: 0 0 1em 0;
			}
			
			
		
		#Contact p {
			font-size: 1em;
			line-height: 1.4em;
			font-weight: 400;
			color: #455560;	
			margin: 0 0 2em 0;
		}
		
		.mapit {
			display: inline-block;
			margin: 10px 0 0 0;
			padding: 10px;
			font-size: .8em;
			line-height: .8em;
			font-weight: 400;
			border-radius: 3px;
			border: 0;
			background-color: rgb(234,234,234);
			color: #455560;	
		}
		
			.mapit:hover {
				background-color: rgb(30,135,200);
				color: #fff;	
				-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
			}
		
		
		
		
		
	/* Form */


		.block {
			width: 390px;
			text-align: left;
			display: inline-block;
		}
		.element * {
			padding: 5px;
			margin: 2px;
			font-family: 'Raleway', sans-serif;
			font-size: 1em;
			font-weight: 400;
		}
		.element label {
			float: left;
			width: 100px;
			font-size: 1em;
			font-weight: 400;
			color: #455560;
			padding-top: 10px;
		}
		.element input.text {
			-webkit-appearance: none;
			float: left;
			width: 245px;
			padding: 10px 0 10px 20px;
			border: 1px solid #cecece;
			font-size: 1em;
			line-height: 1.2em;
			font-weight: 400;
			color: #455560;	
		}
		.element .text-area {
			-webkit-appearance: none;
			height: 100px;
			width: 240px;
			padding-left: 20px;
			border: 1px solid #cecece;
			font-size: 1em;
			font-weight: 400;
			color: #455560;	
		}
		.element .hightlight {
			border: 2px solid #9F1319;
			background: url(../images/iconCaution.gif) no-repeat 2px;
		}
		.element #submit {
			-webkit-appearance: none;
			float: right;
			margin: 10px 5px 0 82px;
			padding: 10px 15px;
			font-size: 1.2em;
			font-weight: 300;
			border-radius: 3px;
			border: 0;
			background-color: rgb(30,135,200);
			color: #fff;
			-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
		}
			.element #submit:hover {
				background-color: rgb(255,105,47);
				color: #fff;	
				cursor: pointer;
			}
		
		.loading {
			float:right;
			background:url(../images/ajax-loader.gif) no-repeat 1px;
			height:28px;
			width:28px;
			display:none;
		}
		.done {
			display:none;
		}

		
		
/* Copyright */			
		
	.copyright {
		background-color: #144193;
		padding: 5% 3% 5% 3%;
		font-size: .8em;
		line-height: .8em;
		font-weight: 400;
		color: #ffffff;	
	}
		
		
		
/* Page Location Dots */	
	
	
	.legend {
		position: fixed;
		top: 40%;
		right: 4%;
	}
	
	.legend ul {
		display: block;	
		margin: 0;
		padding: 0;
	}
	
	.legend ul li {
		display: block;	
		margin: 0 0 10px 0;
		padding: 0;
	}
	
		.legend ul li a {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: #98c9e8;
			display: block;
			text-decoration: none;
			position: relative;
		}
		
			.legend ul li a:hover {
				display: block;
				text-decoration: none;
			}
			
			.legend ul li a.active {
				background-color: #1e87c8;
			}

		.legend ul li a span {
			display: none;
		}
			
			.legend ul li:hover a span {
				display: block;
				position: absolute;
				right: 20px;
				top: 0;
				font-size: .8em;
				color: #999999;
				font-weight: 400;
			}
		
	
	
}


/* -------------------------- */
/* -------------------------- */
/* Tablet tweaks */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	
	
	.legend ul li a span, .legend ul li a.active span {
		display: none;
	}
		
		.legend ul li:hover a span, .legend ul li:hover a.active span {
			display: none;
		}
		
}



/* -------------------------- */
/* -------------------------- */
/* Animations */


/* Chrome, Safari, Opera */
@-webkit-keyframes downarrowmobile {
	0%   {bottom:5%;}
	50%  {bottom:10%;}
	100% {bottom:5%;}
}

/* Standard syntax */
@keyframes downarrowmobile {
	0%   {bottom:5%;}
	50%  {bottom:10%;}
	100% {bottom:5%;}
}



/* -------------------------- */
/* -------------------------- */
/* Animations */


/* Chrome, Safari, Opera */
@-webkit-keyframes downarrow {
	0%   {bottom:10%;}
	50%  {bottom:15%;}
	100% {bottom:10%;}
}

/* Standard syntax */
@keyframes downarrow {
	0%   {bottom:10%;}
	50%  {bottom:15%;}
	100% {bottom:10%;}
}