/* ----------------------------------------------------- RESET, GLOBALS, CUSTOMS, & Misc. */
	* {
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	body,
	html {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		font-family: Helvetica, Arial, Verdana, sans-serif;
		font-size: 18px;
		font-weight: 300;
		color: #333333;
		position: relative;
	}
	a,
	a:visited {
		text-decoration: none;
		color: #333333;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
	::selection {
		background: #C84;
		color: #FFF;
	}
	a:hover {
		text-decoration:none;
	}
	a.orange-hover:hover {
		color:orange;
	}
	p {
		font-size: 1.125rem;
	}

/* ------------------------------------------------------ Color Theme ------------------- */
	/* Palette URL: http://paletton.com/#uid=70z0u0kllpBbDD0h0tZp6lKtEgX */
	/* As hex codes */

	.color-primary-0 { color: #CC8844 }	/* Main Primary color */
	.color-primary-1 { color: #FFD0A2 }
	.color-primary-2 { color: #EFAF70 }
	.color-primary-3 { color: #AD6925 }
	.color-primary-4 { color: #87480A }

	.color-secondary-1-0 { color: #CCA344 }	/* Main Secondary color (1) */
	.color-secondary-1-1 { color: #FFE3A2 }
	.color-secondary-1-2 { color: #EFC870 }
	.color-secondary-1-3 { color: #AD8425 }
	.color-secondary-1-4 { color: #87610A }

	.color-secondary-2-0 { color: #394A8A }	/* Main Secondary color (2) */
	.color-secondary-2-1 { color: #8391C2 }
	.color-secondary-2-2 { color: #5666A2 }
	.color-secondary-2-3 { color: #243676 }
	.color-secondary-2-4 { color: #11215C }

	.color-complement-0 { color: #2C6F7E }	/* Main Complement color */
	.color-complement-1 { color: #76AAB6 }
	.color-complement-2 { color: #488594 }
	.color-complement-3 { color: #1A5C6B }
	.color-complement-4 { color: #084554 }

	.rgba-primary-0 { color: rgba(204,136, 68,1) }	/* Main Primary color */
	.rgba-primary-1 { color: rgba(255,208,162,1) }
	.rgba-primary-2 { color: rgba(239,175,112,1) }
	.rgba-primary-3 { color: rgba(173,105, 37,1) }
	.rgba-primary-4 { color: rgba(135, 72, 10,1) }

	.rgba-secondary-1-0 { color: rgba(204,163, 68,1) }	/* Main Secondary color (1) */
	.rgba-secondary-1-1 { color: rgba(255,227,162,1) }
	.rgba-secondary-1-2 { color: rgba(239,200,112,1) }
	.rgba-secondary-1-3 { color: rgba(173,132, 37,1) }
	.rgba-secondary-1-4 { color: rgba(135, 97, 10,1) }

	.rgba-secondary-2-0 { color: rgba( 57, 74,138,1) }	/* Main Secondary color (2) */
	.rgba-secondary-2-1 { color: rgba(131,145,194,1) }
	.rgba-secondary-2-2 { color: rgba( 86,102,162,1) }
	.rgba-secondary-2-3 { color: rgba( 36, 54,118,1) }
	.rgba-secondary-2-4 { color: rgba( 17, 33, 92,1) }

	.rgba-complement-0 { color: rgba( 44,111,126,1) }	/* Main Complement color */
	.rgba-complement-1 { color: rgba(118,170,182,1) }
	.rgba-complement-2 { color: rgba( 72,133,148,1) }
	.rgba-complement-3 { color: rgba( 26, 92,107,1) }
	.rgba-complement-4 { color: rgba(  8, 69, 84,1) }



	/* Generated by Paletton.com © 2002-2014 */
	/* http://paletton.com */
/* ------------------------------------------------------ Specials ---------------------- */

	img.grayedout,
	a.grayedout img {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		/* Firefox 10+ */

		filter: gray;
		-webkit-filter: grayscale(100%);
		-webkit-backface-visibility: hidden;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		opacity: 0.9;
	}
	img.grayedout:hover,
	a.grayedout:hover img {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
		-webkit-filter: grayscale(0%);
		opacity: 1;
	}

/* Image half-grayscaling 
*  from http://jsfiddle.net/KDtAX/487/
***************************************/
	svg image { transition: all .6s ease; }
	svg image:hover { opacity: 0; }
	img.half-grayscale {
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 10+ */
			filter: gray alpha(opacity=50); /* IE6-9 */
			-webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
			-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
			-webkit-backface-visibility: hidden; /* Fix for transition flickering */
	}
	img.half-grayscale:hover {
			filter: none;
			-webkit-filter: grayscale(0%);
	}

/* *************** Headers & Mixins *********** */

	h1, h2, h3, h4, h5, h6 {
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}

	.inline {
		display:inline;
	}
	.inline-block {
		display:inline-block;
	}
	.flex {
		display: flex;
	}

	.icons-list > li, a.icon-link {
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		text-align: center;
	}
	a.icon-link {
		background: #243676 !important;
		color:white !important;
	}
	a.icon-link:hover, a.icon-link:focus {
		text-decoration: none;
		background:#5666A2 !important;
		color: white !important;
	}
	.fixedElement {
	    background-color: #c0c0c0;
	    position:fixed;
	    top:0;
	    width:100%;
	    z-index:100;
	}
/* ---------------------------------------------------------- BASIC STRUCTURE */
	#wrapper {
		min-height: 100%;
		position: relative;
		margin: 0 auto;
		padding: 20px;
		overflow: hidden;
	}
	.m80t {
		margin-top: 80px;
	}
/* ------------------------------------------------------------------- HEADER */
	#header {
		margin-top: 25px;
		overflow: hidden;
		position:relative;
		bottom:auto;
		z-index:6;
	}
	.header_subtitle {
		padding-bottom: 20px;
		font-size: 1.5rem;
	}
	h1 {
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		font-size: 2.4em;
	}
	#title h1 a:hover {
		color:#C84;
	}
	#title p a {
		color: #C84;
	}
	#title p a:hover {
		color: orange;
	}

/* --------------------------------------------------------------------- Navbar */
	.full-width {
		width: 100%;
	}
	.sticky {
		position: fixed;
		top: 0;
		z-index: 999;
		width:100%;
	}
	.main-menu {
		background: #2C6F7E;
		border-bottom: 2px solid #C84;
	}
	.navbar.main-menu {
		margin-bottom: 0px;
	}
	li.main-menu-item > a {
		color: white !important;
	}
	.main-menu-item:hover, .main-menu-item:focus {
		background: #488594;
	}
	.navbar-default .navbar-nav > .main-menu-item.active > a,
	.navbar-default .navbar-nav > .main-menu-item.active > a:hover,
	.navbar-default .navbar-nav > .main-menu-item.active > a:focus {
		background: #488594;
		color: white;
	}

/* --------------------------------------------------------------------- HOME */
	#smile_top {
		padding: 5%;
		background: #C84;
		color: #FFF;
		overflow:hidden;
		-webkit-transition: background 0.7s;
		-moz-transition: background 0.7s;
		-o-transition: background 0.7s;
		transition: background 0.7s;
	}
	#smile_top:hover {
		background:orange;
	}
	.rotating {
		-webkit-transition: all 2s;
		-moz-transition: all 2s;
		-o-transition: all 2s;
		transition: all 2s;
	}

	#smile_top:hover .rotating {
		-ms-transform: skew(-90deg); /* IE 9 */
		-webkit-transform: skew(-90deg); /* Chrome, Safari, Opera */
		-moz-transform: skew(-90deg); /* Mozilla FireFox */
		-o-transform: skew(-90deg); /* Opera, just in case */
		transform: skew(-90deg);
	}
	#smile_top h3:hover {
		color:#FFF !important;
	}
	.top_headline, .heading_orange {
		color: #C84;
		margin-bottom:1.5rem;
		margin-top: 0;
	}
	#headline, .headline {
		color: #FFF !important;
		font-size: 48px;
		line-height: 150%;
	}
	#subtitle {
		font-size: 28px;
		line-height:150%;
	}
	#subtitle strong {
		font-size:30px;
	}


/* -------------------------------------------------------------------- ABOUT */
	#about {
		width:100%;
		margin-bottom:30px;
	}

	#about2 {
		vertical-align: bottom;	
	}
	#about_main, .about_main {
		display: inline-block;
	}
	#about_img {
		float: right;
	}
	#about_img img {
		width: 100%;
	}
	#about_img a {
		display: inline-block;
		position: relative;
		overflow: hidden;
	}
	#about_img img  {
		width: 100%;
	}
	#about_img .caption {
		opacity: 0;
		position: absolute;
		bottom: -100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		color: #FFF;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
	#about_img .caption h3 {
		margin: 6px;
		font-weight: normal;
		font-size: 13px;
	}
	#about_img a:hover .caption {
		opacity: 1;
		bottom: 0px;
	}
	@media (min-width: 992px) {
		.table_display_container {
			display: table;
		}
		.table_display_container > div {
			display: table-cell;
			float:none;
		}
	}

/* --------------------------------------------------------------------- PORTFOLIO */
	#projects {
		overflow: hidden;
		margin-top: 5%;
	}
	#projects * {
		line-height: 130%;
	}
	ul#portfolio_list, .list {
		list-style-type: none;
		padding:0;
	}
	li.portfolio_item, .list li {
		display: inline-block;
		position: relative;
		overflow: hidden;
		padding: 10px;
	}
	a.portfolio_link {
		display: block;
		position: relative;
		width: 100%;
		margin:0; padding:0;
		border: 1px solid gray;
		overflow: hidden;
	}
	div.portfolio_img {
		width:100%;
		height:250px;
		margin:0; padding:0;
		background-size: cover;
		background-position: center top;
	}
	li.portfolio_item .caption {
		opacity: 0;
		position: absolute;
		bottom: -100%;
		width: 100%;
		background: rgba(0,0,0,.7);
		color: #FFF;
		margin:0;
		padding: 10px;
		font-size: 1rem;
		transition: all 0.3s;
	}
	li.portfolio_item:hover .caption {
		opacity: 1;
		bottom:0;
	}
	
/* ------------------------------------------------------------------ CONTACT */
/* This area mostly relies on bootstrap stylings :); */

	#contact_form input {
		padding: 5px;
		display:block;
		width:100%;
		-webkit-transition: all 0.9s;
		-moz-transition: all 0.9s;
		-o-transition: all 0.9s;
		transition: all 0.9s;
	}
	#contact_form textarea {
		height: 150px; 
		width: 100%; 
		resize: none;
	}
	#contact_form input[type=submit]:hover {
		background:#C84;
	}

/* ------------------------------------------------------------------- Connect */

	.lower-ribbon {
		background: #CCC;
		color: black;
	}
	.header-connect {
		margin: 0; padding: 0;
	}
	.social-list {
		margin:0 0 0 20px;
	}
	.flex_container {
		justify-content: center;
		align-items: center;
		align-content: space-between;
	}
	.flex_container > * {
		align-self: center;
	}
	.ptb20 {
		margin: 20px auto;
	}
	.connect-icon {
		color: #2C6F7E;
		transition: color 1s;
		cursor: pointer;
	}
	.fa.connect-icon {
		font-size: 1.5rem;
	}
	.connect-icon:hover, .connect-icon:focus {
		color: #C84;
	}


/* ------------------------------------------------------------------- FOOTER */
	
	/*.footer-container {
		position: absolute;
		bottom: 0;
	}*/

	#footer {
		width: 100%;
		display: inline-block;
		clear: both;
		margin-top: 25px;
		margin-bottom: 25px;
		text-align: center;
		font-size: 0.8em;
	}
	#footer a {
		color: #C84;
	}
	#footer a:hover {
		color: #333333;
	}
	#footer .social-media {
		padding-top:50px;
		margin-bottom:0;
	}
	#footer .social-media img {
		height:40px;
	}
	#contact_side .social-media img{
		height:64px;
	}
	.social-media img {
		display:inline-block;
		-webkit-transition: all 0.9s;
		-moz-transition: all 0.9s;
		-o-transition: all 0.9s;
		transition: all 0.9s;
	}