/* CSS Document for Screens */

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,300italic,700,700italic);


body { overflow-x: hidden; overflow-y: scroll; }
body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0; }
#page { max-width: 1200px; margin: 0 auto; position: relative; }

* {
	box-sizing: border-box;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}


/* Text */

	h1 { margin: 0 0 1em 0; font-size: 2.6em; font-weight: 700; text-align: center; }
	h2 {
		margin: 0 0 3em 0;
		font-size: 1.2em;
		font-weight: 300;
		color: #54636e;
		letter-spacing: .5em;
		text-transform: uppercase;
		text-align: center;
	}
	h3 { margin: 0 0 .8em 0; font-size: 1.3em; font-weight: 700; }
	h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }


	p { margin: 0 0 1em 0; color: #748796; text-align: justify; }

	a { color: #007eff; }
	a:visited { color: #65b1ff; }

	a.btn {
		font-size: 1.4em; text-decoration: none; text-align: center; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 4px 15px;
		transition: background-color .5s, border .5s, color .5s;
	}
	a.btn:hover {
		background-color: rgba(255,255,255,.1);
		border: 1px solid #fff;
	}
	a.btn:active {
		box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
	}


	.line {
		background-color: #e0e0e0;
		clear: both;
		height: 1px;
		margin: 0 auto;
		padding: 0 0;
		position: relative;
		width: 40%;
	}
	.line.full {
		width: 100%;
		margin: 0 -9999px;
		/* add back negative margin value */
		padding: 0 9999px;
	}


/* Header */

	header { height: 125px; position: relative; }

	header a.logo {
		z-index: 1;
		position: absolute;
		display: block; width: 500px; height: 100px;
		background: url(../images/logo_asken.png) no-repeat left center; background-size: contain;
		top: 25px; left: 20px;
	}


/* Section - All */

	section { margin: 3em 0 3em 0; padding: 0 30px; }
	section::after { content:''; display: block; clear: both; }


/* Section - Hero */

	section.hero {
		background: url(../images/blue.jpg) no-repeat center bottom;
		background-color: #2c89c5;
		/*background-size: 20% 400%;*/
		margin: 0 -9999px;
		/* add back negative margin value */
		padding: 80px 9999px;
	}

	section.hero h1 { display: block; color: #fff; margin: 0 auto; padding: 0 30px; }

	section.hero a { display: block; width: 180px; margin: 40px auto 0 auto; }


/* Section - Services */

	section.services aside { width: 33%; float: left; text-align: center; }
	
	section.services a {
		display: block;
		text-decoration: none;
	}
	section.services a h3 { text-align: center; color: #54636e; }

	section.services p { padding: 0 15px; }

	section.services .content.consulting { background-image: url(../images/icon_person_grey.svg); }
	section.services .content.development { background-image: url(../images/icon_computer_grey.svg); }
	section.services .content.support { background-image: url(../images/icon_phone_grey.svg); }

	section.services .content {
		/*min-height: 400px;*/
		margin: 0 15px;
		background: #fff no-repeat center 30px; background-size: 75px 75px;
		padding-top: 115px;
		border: 1px solid #fff;
		border-radius: 4px;
		transition: border .25s, background-color .25s;
	}
	section.services .content:hover {
		cursor: pointer;
		border: 1px solid #aaa;
		background-color: #f9f9f9;
	}
	

/* Section - Clients */

	section.clients {
		background-color: #f9f9f9;
		margin: 0 -9999px;
		padding: 80px 9999px;
	}

	section.clients .client { padding: 0 30px; height: background-color: #fff; }

	section.clients aside { width: 50%; float: left; text-align: left; }
	
	section.clients .client blockquote { font-size: .9em; }

	section.clients .client blockquote p.quote { font-style: italic; }

	section.clients .client blockquote p.credit span.name { font-weight: 700; }

	.client img { width: auto; height: 80px; margin: 0 0 10px 0; }


/* Section - Leadership */

	section.leadership { padding: 0 0; }

	section.leadership .content {
		margin: 0 auto; 
		padding: 0 30px;
	}
	
	section.leadership h4 {
		letter-spacing: .3em;
		font-weight: 300;
		text-transform: uppercase;
	}

/* Section - Contact */

	section.contact .centernote { max-width: 800px; margin: 0 auto 60px auto; padding: 0 0; }
	section.contact .centernote p { text-align: center; }

	section.contact aside { width: 50%; float: left; padding: 0 30px; }

	section.contact h3 { font-weight: 300; }

	/* contact form */

		#contact-form input[type="text"],
		#contact-form input[type="email"],
		#contact-form input[type="tel"],
		#contact-form label,
		#contact-form textarea,
		#contact-form button[type="submit"] {
			font-family: "Open Sans", sans-serif;
			font-weight: 300;
			font-size: .9em;
			color: #748796;
		}

		#contact-form label span {
			font-size: 1.2em;
			cursor: pointer;
			display: block;
			margin: 5px 0;
		}

		#contact-form input[type="text"],
		#contact-form input[type="email"],
		#contact-form input[type="tel"],
		#contact-form textarea {
			width: 100%;
			box-shadow: inset 0 1px 2px #ddd, 0 1px 0 #fff;
			border: 1px solid #ccc;
			background: #fff;
			margin: 0 0 5px;
			padding: 10px;
			border-radius: 4px;
			transition: border .25s;
		}

		#contact-form input[type="text"]:hover,
		#contact-form input[type="email"]:hover,
		#contact-form input[type="tel"]:hover,
		#contact-form textarea:hover {
			border: 1px solid #aaa;
		}

		#contact-form textarea {
			height: 80px;
			max-width: 100%;
		}

		#contact-form button[type="submit"] {
			cursor: pointer;
			width: 100%;
			border: none;
			background: #0071a9;
			color: #fff;
			margin: 0 0 5px;
			padding: 10px;
			border-radius: 4px;
		}

		#contact-form button[type="submit"]:active {
			box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
		}

		#contact-form input:focus,
		#contact-form textarea:focus {
			outline: 0;
			border: 1px solid #aaa;
		}


/* Navigation */

	nav {
		position: absolute;
		top: 45px; left 0px;
		width: 100%;
	}

	nav ul { list-style: none; margin: 0; padding: 0 30px; }

	nav ul li a {
		display: inline-block;
		color: #54636e;
		padding: 10px 20px;
		text-decoration: none;
		width: 125px;
		position: relative;
		transition: color .25s;
	}
	
	nav ul li a.leadership {
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
	}
	
	nav ul li a:hover { color: #0091c9; }
	nav ul li a:visited { color: #54636e; }

	nav > ul {
		float: right;
	}

	nav > ul > li {
		float: left;
	}
	
	nav > ul > li > a {
		padding: 10px 20px 15px;
		width: auto;
	}


/* Footer */

	footer { font-size: .8em; margin: 40px; color: #999; }

	footer .content { display: inline; }

	footer a { margin-left: 30px; color: #777; }
	footer a:visited { color: #777; }
	footer a:hover { color: #000; }



/* Media Queries */

	@media screen and (max-width: 1000px) {

		h1 { font-size: 2.4em; }

	}

	@media screen and (max-width: 825px) {

		h1 { font-size: 2.2em; }
	
		p { font-size: .9em; }
		section.clients .client blockquote { font-size: .9em; }

		.client img { width: auto; height: 60px; margin: 0 0 5px 0; }

	}

	@media screen and (max-width: 768px) {

		h1 { font-size: 1.8em; }
		h2 { font-size: 1em; }
		h3 { font-size: 1em; }
		h4 { font-size: .8em; }

		a.btn { font-size: 1em; }

		header { height: 100px; }

		header a.logo {
			display: block; width: 300px; height: 75px;
			top: 25px; left: 20px;
		}


		section.services aside { width: 100%; float: none; text-align: left; }

		section.services .content h3 { text-align: left; margin: 0 0 .2em 15px; }

		section.services .content {
			margin: 10px 5px;
			padding: 5px 0px 5px 65px;
			background-size: 50px 50px;
			background-position: 10px 10px;
		}

		section.clients aside { width: 100%; float: none; text-align: left; }

		section.clients .client { padding: 15px 30px; height: background-color: #fff; }

		.client img { width: auto; height: 50px; margin: 0 0 5px 0; }

		section.contact aside {
			width: 100%; float: none;
			margin: 0px 0px;
			padding: 30px 0px 0px 0px;
		}

		#contact-form input[type="text"],
		#contact-form input[type="email"],
		#contact-form input[type="tel"],
		#contact-form label,
		#contact-form textarea,
		#contact-form button[type="submit"] {
			font-size: .9em;
		}

		#contact-form label span {
			font-size: .9em;
		}

		#contact-form input[type="text"],
		#contact-form input[type="email"],
		#contact-form input[type="tel"],
		#contact-form textarea {
			margin: 0 0;
			padding: 3px;
		}

		nav { position: static; width: 100%; padding: 15px 0px; background-color: #fff; }

		nav ul { float: none; }
		nav ul li { float: none; }
		
		nav ul li a {
			display: inline-block;
			margin: 5px 0px;
			padding: 10px 20px;
			text-align: center;
			text-decoration: none;
			width: 100%;
			position: relative;
			transition: color .25s;
			border: 1px solid #e0e0e0;
			border-radius: 4px;
			background-color: #0071a9;
			color: #fff;
		}

	
		nav ul li a:hover { color: #fff; }
		nav ul li a:visited { color: #54636e; }

	}


	@media screen and (max-width: 625px) {

		h1 { font-size: 1.3em; }

		a.btn { font-size: .9em; }

		p { font-size: .8em; }

		header { height: 75px; }

		header a.logo {
			display: block; width: 250px; height: 50px;
			top: 25px; left: 20px;
		}

		section.services .content h3 { text-align: left; margin: 0 0 15px 50px; }

		section.services .content {
			margin: 10px 5px;
			padding: 12px 0px 5px 0px;
			background-size: 30px 30px;
			background-position: 10px 10px;
		}

		.client img { width: auto; height: 40px; margin: 0 15px 10px 0; float: left; }

		/* Footer */
		footer div.content { display: block; margin-top: 15px; }

		footer div.content a { margin: 0 20px 0 0; }

	}