@charset "UTF-8";

/* ////////////////////////////////////////

	GS v6 STYLES 2016
	Created By: Aaron L Krantz - GrandSimple Creative
	with help from a billion other devlopers.

//////////////////////////////////////// */

/* ***************************************
	Table of Contents

	1.	Font Faces
	2.	Global Elements
	3.	Masthead
	4.	Main Navigation
	5. 	Header
	6. 	Portfolio Grid
	7.	Bio
	8.	Contact Form
	9.	Footer
	10. Services

*************************************** */


/* ***************************************
	2.	Font Faces
*************************************** */
@font-face {
    font-family: 'proxima_novathin';
    src: url('./fonts/proximanova-thin-webfont.eot');
    src: url('./fonts/proximanova-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/proximanova-thin-webfont.woff2') format('woff2'),
         url('./fonts/proximanova-thin-webfont.woff') format('woff'),
         url('./fonts/proximanova-thin-webfont.ttf') format('truetype'),
         url('./fonts/proximanova-thin-webfont.svg#proxima_novathin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'proxima_novaregular';
    src: url('./fonts/proximanova-regular-webfont.eot');
    src: url('./fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/proximanova-regular-webfont.woff2') format('woff2'),
         url('./fonts/proximanova-regular-webfont.woff') format('woff'),
         url('./fonts/proximanova-regular-webfont.ttf') format('truetype'),
         url('./fonts/proximanova-regular-webfont.svg#proxima_novaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ***************************************
	1.	Global Elements
*************************************** */
html, body
{
    overflow-x: hidden;
}

body {
	background-color:#111;
	font-family:"proxima_novaregular", Helvetica, Arial, sans-serif;
}

h1 {
	font-size:5vw;
	color:#fff;
	font-family:"proxima_novathin", Helvetica, Arial, sans-serif;
}

h2 {

}

h3 {
	font-family:"proxima_novaregular", Helvetica, Arial, sans-serif;
}

p {
	color:#fff;
	font-family:"proxima_novaregular", Helvetica, Arial, sans-serif;
}

a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}

a:link, a:visited {
	color:rgba(33,168,195,1.00);

}

a:hover {
	color:rgba(199,199,147,1.00);
}

::selection {
  color:#fff; background:#21A8C3;
}

/* ***************************************
	3. Masthead
*************************************** */
header #masthead {
	text-align:center;
	display:flex;
	color:#fff;
	width:100%;
	box-sizing:border-box;
	height:3em;
	line-height:3em;
	justify-content:space-between;
	background: linear-gradient(to bottom, #111 0%,#000 100%);
	border-bottom: 1px solid #151515;
	font-family:"proxima_novathin", Helvetica, Arial, sans-serif;
}

#logo {
	width:45%;
	text-align:left;
	padding-left:2em;
}

#menu {
	width:5%;
	min-width:115px;
	text-align:center;
	background: radial-gradient(ellipse at center, #21a8c3 0%,#0682a8 100%);
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

#menu a:link, #menu a:hover, #menu a:visited, #menu a:active {
	color:#fff;
}

#email_icon {
	width:45%;
	text-align:right;
	padding-right:2em;
}

#email_icon img {
	vertical-align:middle;
}


/* ***************************************
	4. Main Navigation
*************************************** */
.home_main_nav {
	background-color:rgba(0,0,0,.75);
	box-sizing:border-box;
}

.home_main_nav #nav_list {
	display:flex;
	justify-content:space-between;
	height:8vw;
	line-height:8vw;
	text-align:center;
	border-bottom: 1px solid #151515;
}

#nav_list a {
	width:25%;
	border-right:1px solid #151515;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.25);
	background: linear-gradient(to bottom, #000 0%,#111 100%);
}

#nav_list li {
	font-size:1.35vw;
	line-height:8.35vw;
}

#nav_list li:hover {
	background: linear-gradient(to bottom, #000 0%,#151515 100%);
}

#nav_list li:last-of-type {
	border-right:none;
}

/* ***************************************
	5.	Header
*************************************** */
.home_main_content {
	position:relative;
	width: 100%;
}

.home_main_content header{
	font-size: 0;
	background-image:url(./images/home/GS_Home_Header_Bkg.jpg);
	background-size:cover;
	height: 25vw;
	overflow: hidden;
}

.header_title p {
	line-height: 2em;
}

/* Video Styles */
.videoContainer video {
	 width: 100%;
     height:auto;
}

video {
	object-fit: contain;
	margin-top: -10px;
}


.home_main_content .header_title {
	position:absolute;
	top:5vw;
	left:2.45vw;
}

.home_main_content h1 {
	margin:0;
	padding:0;
}

.home_main_content p {
	margin:0;
	padding:0;
	text-align:right;
	/* font-size:1.5vw; */
}
.home_main_content header p {
	font-size: 1.85vw;
}

.text_color_1 {
	color:rgba(199,199,147,1.00);
}

.text_color_2 {
	color:rgba(157,157,157,1.00);
}

.text_color_3 {
	color:rgba(33,168,195,1.00);
}

#tagline {
	margin-left: 1.125em;
}

/* ***************************************
	6.	Portfolio Grid
*************************************** */
.image_grid_row {
	width:100%;
	font-size:0;
}

.image_grid_row h1,
.image_grid h1 {
	padding:1.75em 0 0 .5em;
}

.image_grid_row .img_hover:hover,
.image_grid .img_hover:hover {
	transition: background-size 0.5s ease-in-out;
	background-size: 110%;
	background-position:center;
	background-repeat:no-repeat;
}
.image_grid.full_width_fixed_height .img_hover:hover {
	transition: none;
	background-size: 100%;
}

.image_grid_row .image_1 {
	height: 25vw;
	background-image:url(./images/home/GS_Home_Design.jpg);
	transition: background-size .4s ease-in-out;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	width:50%;
	box-sizing:border-box;
	color:white;
}

.image_grid_row .image_2 {
	height: 25vw;
	background-image:url(./images/home/GS_Home_Motion.jpg);
	transition: background-size .4s ease-in-out;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	width:50%;
	box-sizing:border-box;
	color:white;
}

.image_grid_row .image_3 {
	height: 25vw;
	background-image:url(./images/home/GS_Home_Photography.jpg);
	transition: background-size .4s ease-in-out;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	width:50%;
	box-sizing:border-box;
	color:white;
}


.image_grid_row .image_4 {
	height: 25vw;
	background-image:url(./images/home/GS_Home_Illustration.jpg);
	transition: background-size .4s ease-in-out;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	width:50%;
	box-sizing:border-box;
	color:white;
}

article.half_width {
	width:50%;
	box-sizing:border-box;
	float: left;
}
.img_home_entry {
	height: auto;
	min-height: 25vw;
	transition: background-size .4s ease-in-out;
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	/* display:inline-block; */
	display: block;
	width:100%;
	box-sizing:border-box;
	color:white;
}
.image_grid.half_width .img_home_entry {
	max-height: 25vw;
	overflow:hidden;
}
.image_grid.full_width .img_home_entry,
.image_grid.full_width_fixed_height .img_home_entry {
	clear: both;
}
.image_grid.half_width .section_content {
	box-sizing:border-box;
	margin: 0 0 0 5.5%;
	/* font-size: 1.35vw; */
	font-size:calc(.375rem + 1.2vw);
	padding-bottom: 3.5vw;
	padding-top: .125vw;
	color:rgba(199,199,147,1.00);
}
.image_grid.full_width .section_content {
	font-size:calc(.375rem + 1.2vw);
	color: rgba(199,199,147,1.00);
}
.image_grid.full_width .section_content,
.image_grid.full_width_fixed_height .section_content {
	box-sizing:border-box;
	/* height: 25vw; */
	width:93vw;
	/* margin: 0 auto; */
	margin: 0 0 0 2.5%;
	text-align: left;
	padding-bottom: 3.5vw;
}
.image_grid.full_width .section_content h1,
.image_grid.full_width_fixed_height .section_content h1 {
	/* padding:1em 0 0 .5em;*/
}
.full_width_fixed_height .img_home_entry {
	height: 35vw;
	transition: none;
}
.image_grid .section_content {
	text-align: left;
	font-size: 1.25rem;
	line-height: 1.65rem;
}
.image_grid .section_content p {
	padding-bottom: 1em;
	text-align: left;
}
.image_grid .section_content p:first-of-type {
	padding-top:1em;
}


/* ***************************************
	7.	Bio
*************************************** */
.bio {
	background-image:url(./images/home/GS_Home_Bio.jpg);
	background-size:cover;
	min-height: 35vw;
	clear:both;
}

.bio h1 {
	padding:1em 0 0 .5em;
}

.bio p {
	/*font-size:1.25rem;*/
	font-size: calc(.375rem + 1.2vw);
	line-height:2.125rem;
	text-align:left;
	padding-bottom:1em;
}

.bio p:first-of-type {
	padding-top:1em;
}

#bio_description
{
	box-sizing:border-box;
	/*width:85vw;*/
	width:93vw;
	margin:0 auto;
}


/* ***************************************
	8. Contact Form
*************************************** */
#contact_info {
	padding:2em 0;
	color:#999;
	font-family:"proxima_novaregular", Helvetica, Arial, sans-serif;
}

#contact_info label {
	color:#888;
	display:block;
	font-size:1.25rem;
}

#contact_info #form_container {
	margin:auto;
	width:93vw;
	display:flex;
	justify-content:space-between;
	flex-direction:row;
}

#contact_info #contact_details {
	width:50%;
	box-sizing:border-box;
}

#contact_info #contact_message {
	width:50%;
	box-sizing:border-box;
	overflow:hidden;
}

#contact_info input {
	width:95%;
	background-color:#C7C4A8;
	height:2em;
	font-size: 1rem;
	padding:.25em 0 .25em .5em;
	box-sizing: border-box;
	margin: .5em 0 .5em 0;
}

#contact_info textarea {
	width:100%;
	margin-top:.45em;
	height:8em;
	resize:none;
	font-size:1rem;
	padding:.5em;
	background-color:#C7C4A8;
	box-sizing:border-box;
	font-family:"proxima_novaregular", Helvetica, Arial, sans-serif;
}

#contact_info input[type=submit]{
	cursor:pointer;
	width:100%;
	border:none;
	background-color:rgba(33,168,195,1.00);
	color:#fff;
	font-size: 1rem;
	font-family:"proxima_novaregular", Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	margin: .5em 0 0 0;
	padding: 0;
}

#contact_info input[type=submit]:hover {
	color:rgba(199,199,147,1.00);
	background: linear-gradient(to top, #21A8C3 0%,#1B8DA4 100%);
}

fieldset {
	border:none;
}

legend {
	background:#fff;
}

input, select {
	cursor:pointer;
}

input[type='text'] {
	cursor:text;
}

textarea, input, select, input[type='text'], select, textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover, textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus {
}

textarea, input[type='text'], select {
	border:none;
}

textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover {
	border-color:#999999;
}

textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus {
	border-color:#999999;
	outline:2px solid #E1E1E1;
	outline:0px none transparent
}


/* ***************************************
	9. Footer
*************************************** */
.footer {
	width:100%;
	clear: both;
}

/*
.footer p {
	color:#888;
	text-align:right;
	padding-right:3.5em;
}
*/

.footer h1 {
	padding:1em 0 0 .5em;
	color:#fff;
}

.footer footer {
	color:#fff;
	width:100%;
	line-height:3.5em;
	border-bottom:1px #222 solid;
	border-top:1px #222 solid;
	display:flex;
	justify-content:space-between;
	padding-left:1.75em;
}

.footer ul {
	display:inline-block;
	font-family:"proxima_novathin", Helvetica, Arial, sans-serif;
}

.footer ul li {
	display:inline-block;
	padding-right:1em;
}

#footer_text {
	text-align: center;
	width: 100%;
	color:#888;
}

#social_links h3 {
	display:inline-block;
	padding-right:1em;
	color:#888;
}


/* ***************************************
	10.	Services
*************************************** */
.services {
	position:relative;
	background: linear-gradient(to top, #111 0%,#222 100%);
}

.services header {
	height: 30vw;
	background-image: url(./images/site/GS_About_Header.jpg);
	background-size: cover;
}

.services article {
	color: #fff;
	margin-top: 1em;
	box-sizing: border-box;
}

.services h1 {
	padding:.5em 0 0 .5em;
}

.services p {
	font-size: calc(.375rem + 1.2vw);
    line-height: 2.125rem;
	text-align:left;
	padding-bottom:1em;
}

.services article p:first-of-type {
	padding-top:1em;
}

.services_description {
	box-sizing:border-box;
	width:93vw;
	margin:0 auto;
}

.services_list {
	background-image:url(./images/site/GS_Services_Background.jpg);
	overflow: hidden;
	background-size: cover;
	background-attachment: fixed;
	background-position: calc(100% - 5%) calc(100% - 5%);
	width: 100%;
	min-height: 25vw;
}

article.services_list {
	margin: 3em 0 2em 0;
	padding: 2em 0;
}

.services_list h2 {
	font-size: 2.25em;
	font-family:"proxima_novathin", Helvetica, Arial, sans-serif;
	margin-bottom: .5em;
	color:rgba(199,199,147,1.00);
}

.services_list ul {
	width: 93vw;
	margin: 0 auto;
	padding: 1em 0;
	box-sizing: border-box;
	font-size: calc(.375rem + 1.2vw);
    line-height: 2.6rem;
}

.skills {
	width: 85vw;
	margin: 0 auto;
	min-height: 35vw;
	padding:0 1em;
	box-sizing: border-box;
	vertical-align: top;
}
.skills_list {
	border: 1px solid #555;
	display: inline-block;
	vertical-align: top;
	width: 30%;
	background-color: #222;
}

.skills_list li{
	margin: 0;
	padding: 0;
}