/*********************************************************************************/
/* Main Page                                                                     */
/*********************************************************************************/

	body
	{
		font-family: 'Roboto', sans-serif;
		font-size: inherit;
	}

	#logo
	{
		position: relative;
		top: 0;
		left: 0;
		padding: 0;
	}

	#menu
	{
		top: 2em;
	}

	#header
	{
		padding: 0;
	}

	#nav-wrapper
	{
		background: #181818;
	}

	#header-wrapper
	{
		/* padding: 2em 0 2em 0; */
		padding: 0;
	}

	#header-wrapper.page-home
	{
		background: #111111;
		background-image: url(../images/home_image.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 1200px auto;
	}

	#header-wrapper.page-services
	{
		background: #D1CBCB;
		background-image: url(../images/services_image.jpg);
		background-position: center left 33%;
		background-repeat: no-repeat;
		background-size: auto 25vh;
	}

	#header-wrapper.page-team
	{
		background: #0199EF;
		background-image: url(../images/team_image.jpg);
		background-position: center left 33%;
		background-repeat: no-repeat;
		background-size: auto 25vh;
	}

	#header-wrapper.page-careers
	{
		background: #0199EF;
		background-image: url(../images/careers_image.jpg);
		background-position: center left 33%;
		background-repeat: no-repeat;
		background-size: auto 25vh;
	}

	#header-wrapper.page-contactus
	{
		background: #E08333;
		background-image: url(../images/contact_image.jpg);
		background-position: center right 33%;
		background-repeat: no-repeat;
		background-size: auto 25vh;
	}

	#wrapper
	{
		padding: 3em 0 3em 0;
		color: rgba(0,0,0,0.8);
	}

	#blue-wrapper
	{
		padding: 3em 0em;
		background: #2651a8;
		background-size: cover;
	}

	#blue-wrapper
	{
		color: rgba(255,255,255,0.8);
	}

	#banner .title
	{
		margin-bottom: 1em;
	}

	#banner
	{
		padding: 1em 0 0 0;
		height: 25vh;
	}

	@media (min-width: 1200px)
	{
		#header-wrapper.page-home
		{
			background-size: auto 40vh;
			background-size: 1200px auto;
		}

		#header-wrapper.page-services
		{
			background-size: auto 33vh;
		}

		#header-wrapper.page-team
		{
			background-size: auto 33vh;
		}

		#header-wrapper.page-careers
		{
			background-size: auto 33vh;
		}

		#header-wrapper.page-contactus
		{
			background-size: auto 33vh;
		}

		#banner
		{
			height: 33vh;
		}
	}

	#copyright
	{
		padding: 3em 0;
	}

	h1, h2, h3
	{
		margin-bottom: 25px;
	}

	h1, h2, h3, h4, h5, h6
	{
		font-weight: 700;
	}

/*********************************************************************************/
/* Front Page                                                                    */
/*********************************************************************************/

	.page-home #banner
	{
		/* Make the front page splash bigger */
		/* padding: 10em 0; */
	}

/*********************************************************************************/
/* Team Page                                                                     */
/*********************************************************************************/

	h2 + h3.byline
	{
		margin-top: -1em;
	}

	ul.primary-list
	{
		margin-left: 2em;
		margin-right: 1em;
	}

	ul.primary-list li i
	{
		padding-right: 0.5em;
	}

/*********************************************************************************/
/* Social Media Icons                                                            */
/*********************************************************************************/

	ul.icons
	{
		cursor: default;
		list-style: none;
		padding-left: 0;
		float: right;
		margin-top: -2.5em;
		margin-right: 5em;
	}

	ul.icons li
	{
		display: inline-block;
		padding: 0 1em 0 0;
	}

	ul.icons li .icon {
		font-size: 0.58em;
	}

	ul.icons li:last-child
	{
		padding-right: 0;
	}

	ul.icons li .icon:before
	{
		font-size: 2em;
	}

/*********************************************************************************/
/* Careers                                                                       */
/*********************************************************************************/

	#careers p
	{
		color: rgba(0, 0, 0, 0.6);
	}

	ul.list
	{
		display: table;
		margin: 0 auto;
		list-style: none;
		text-align: left;
	}

	ul.bullet
	{
		display: table;
		margin: 0 auto;
		list-style: square;
		text-align: left;
	}

/*********************************************************************************/
/* Contact Form                                                                  */
/*********************************************************************************/

/* Add a background color and some padding around the form */
	#contactus .container
	{
		width: 1000px;
		padding: 0px 100px;
		color: rgba(0, 0, 0, 0.8);
	}

	#contactus .container p
	{
		color: rgba(0, 0, 0, 0.6);
	}

	.contact-form-box
	{
		border-radius: 5px;
		background-color: #f2f2f2;
		padding: 20px;
	} 

	/* Style inputs with type="text", select elements and textareas */
	.contact-form-box input[type=text],
	.contact-form-box select,
	.contact-form-box textarea
	{
		width: 100%; /* Full width */
		padding: 12px; /* Some padding */ 
		border: 1px solid #ccc; /* Gray border */
		border-radius: 4px; /* Rounded borders */
		box-sizing: border-box; /* Make sure that padding and width stays in place */
		margin-top: 6px; /* Add a top margin */
		margin-bottom: 16px; /* Bottom margin */
		resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
	}

	/* Style the submit button with a specific background color etc */
	.contact-form-box input[type=submit]
	{
		cursor: pointer;
		border: none;
		float: right;
	}

	/* When moving the mouse over the submit button, add a darker green color */
	.contact-form-box input[type=submit]:hover
	{
		background: #164198;
	}

/*********************************************************************************/
/* Columns                                                                       */
/*********************************************************************************/

	.title
	{
		text-align: center;
		width: 100%;
	}

	.kbox
	{
		margin-top: 1em;
	}

	.fatbox
	{
		margin-top: 1em;
		margin-button: 2em;
	}
	
	.kbox p
	{
		/* min-height: 11em; */
	}

	.tallbox p
	{
		/* min-height: 14em; */
	}


/*********************************************************************************/
/* Buttons                                                                       */
/*********************************************************************************/

	.button
	{
		padding: 0.8em 1.6em;
		margin-top: 1em;
	}

	a.button:hover
	{
		color: #FFF;
	}
	

/*********************************************************************************/
/* Menu                                                                          */
/*********************************************************************************/

	nav ul
	{
		line-height: 300%;
	}

	nav li a, nav li span
	{
		padding: 1em 1.5em;
		letter-spacing: 1px;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 1.25em;
		color: rgba(255,255,255,0.6);
	}

	nav li:hover a, nav li.active a, nav li.active span
	{
	}

	nav .active a
	{
		background: inherit;
		border-radius: 0;
		color: rgba(255,255,255,1);
	}

	@media (min-width: 992px)
	{
		nav li a, nav li span
		{
			font-size: 0.8em;
		}

		nav .active a
		{
			background: #2651a8;
			border-radius: 6px;
			color: rgba(255,255,255,1);
		}
	}

/*********************************************************************************/
/* Secondary page section                                                        */
/*********************************************************************************/
	.secondary
	{
		position: relative;
		margin: 3em 0em -3em 0em;
		padding: 4em 0em 4em 0em;
		background: #2651a8;
		background-size: cover;
	}

	.secondary .container
	{
		color: rgba(255,255,255,0.8);
	}

	.secondary .title p
	{
		text-align: justify;
	}

	.secondary a
	{
		color: rgba(255,255,255,1);
	}

	.secondary .button
	{
		background: #FFF;
		color: #2651a8;
	}

/*********************************************************************************/
/* Misc                                                                          */
/*********************************************************************************/
	.clear
	{
		clear: both;
	}

	.right
	{
		float: right;
	}

	.center
	{
		text-align: center;
	}

	.fat-clear
	{
		clear: both;
		padding-top: 3em;
	}