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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400i,400,700,600);

html, body { min-height: 100%; overflow-x: hidden; }

body { 
	padding: 0px; margin: 0px; 
	background: #EFEFEF;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px; line-height: 26px; letter-spacing: 0.5px;
	color: #2e2e2e;
}

a { color: #a0c4ff; text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 40px; color: #1e1e1e; line-height: 50px; }
h2 { font-size: 26px; color: #1e1e1e; line-height: 34px; }
h3 { font-size: 22px; color: #1e1e1e; }

/* Floats */
.left { float:left; }
.right { float:right; }
.center { margin-left: auto; margin-right: auto; }
.clear { clear:both; }

/* Text Positioning */
.tcenter { text-align:center; }
.tleft { text-align: left; }
.tright { text-align: right; }

/* Fixed */
.fixed { max-width: 1080px; }
h1.fixed { max-width: 1040px; padding:  20px 20px; }

/* Collumns */
.col3 { width: 33.3333%; }
.col2-3 { width: 66.6666%; }
.col2 { width: 49.9999%; }
.col4 { width: 24.9999%; }
.col3-4 { width: 74.99999%; }
.col5 { width: 9.999999%; }
.col4-5 { width: 89.999999%; }


/* Header Setup */
header { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100; text-align:center; background: rgba(0,0,0, 0.7); box-shadow: 0px 0px 10px -4px #1e1e1e; }
	header .logo { display:none; min-height: 75px; width: 75px; margin: 0px 15px 0px; text-indent: -99999px; background: url(../images/slim/logo-new.png) left center no-repeat; background-size: cover; opacity: 0.35; -webkit-opacity: 0.35; transition: ease-in-out all 0.15s; -webkit-transition: ease-in-out all 0.15s; }
		header .logo:hover { opacity: 1.0; -webkit-opacity: 1.0; }
			
	header nav { }
		header nav > a { display: none; }
		header nav ul { padding: 8px 0px 0px; margin: 0px; list-style: none; font-size: 16px; transition: all 0.25s; }
			header nav ul li { background: none; border-bottom: 5px solid rgba(0,0,0,0.30); display: inline-block; padding:5px 0px 0px; margin: 0px 5px; position: relative; font-weight: 600; transition: all 0.15s; }
			header nav ul li:hover, header nav ul li.selected { border-color: rgba(255,255,255,0.8); }
				/* Links */
				header nav ul li a:link, header nav ul li a:visited { color: #FFF; display: block; padding: 10px 20px 10px; transition: all 0.15s; }
				header nav ul li a:hover, header nav ul li a:active, header nav ul li.selected a { text-decoration: none; color: #FFF; -webkit-opacity: 1.0; }
header.top { background: none; box-shadow: none; }
		header.top nav ul {  padding: 45px 0px 0px; }
			header.top nav ul li { background: rgba(0,0,0,0.20); }
header+.spacer { height: 55vh; background-position: center center; background-size: cover; background-repeat: no-repeat; position:relative;}
header+.spacer:after { background-image: url(../images/slim/brown-bg-logo-sm.jpg); opacity: 0.5; content: ""; position:absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; background-position: center center; background-size: cover; background-repeat: no-repeat; }

/* Button Setup */
a.btn_large, button.btn_large { 
	display: inline-block; margin:  15px 10px; padding: 18px 22px; background: #1e1e1e; 
	border: none; border-radius: 10px; border-top-left-radius:  25px; border-bottom-right-radius: 25px;
	color: #FEFEFE; text-decoration:  none; font-weight: bold; text-transform: uppercase;
	transition: all 0.35s; opacity: 0.75; cursor: pointer;
}
a.btn_large:hover, button.btn_large:hover { background-color: #92725b; opacity: 1; text-decoration: none; box-shadow: 0px 0px 10px -3px #1e1e1e; }
a.btn_large.grow:hover, button.btn_large.grow:hover { margin: 10px 5px; padding: 23px 27px; }
a.btn_large.shrink:hover, button.btn_large.shrink:hover { margin: 20px 15px; padding: 13px 17px; }
a.btn_large.flip:hover, button.btn_large.flip:hover { border-radius:  10px; border-top-right-radius:  25px; border-bottom-left-radius: 25px }

/* Social Icon Setup */
.social a.icon_facebook, .social a.icon_twitter, a.icon_linkedin, a.icon_googleplus, a.icon_steam, a.icon_youtube { 
	text-align: left; text-indent: -999999px; width: 40px; height: 40px; display: inline-block; overflow: hidden;
	background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 8px;
} 
.social a.icon_facebook { background-image: url(../images/slim/icons/facebook.png);  }
.social a.icon_twitter { background-image: url(../images/slim/icons/twitter.png); }
.social a.icon_linkedin { background-image: url(../images/slim/icons/linkedin.png); }
.social a.icon_googleplus { background-image: url(../images/slim/icons/googleplus.png); }
.social a.icon_steam { background-image: url(../images/slim/icons/steam.png); }
.social a.icon_youtube { background-image: url(../images/slim/icons/youtube.png); }
.social a.icon_facebook:hover, .social a.icon_twitter:hover, a.icon_linkedin:hover, a.icon_googleplus:hover, a.icon_steam:hover, a.icon_youtube:hover { } 

/* Stream Notification */
.stream_notification { background: #8CF48E; text-align:center; opacity: 1.0; position:absolute; bottom: 0px; left: 0px; right: 0px; transition: all 0.20s; }
.stream_notification:hover { background: #28FF69; }
	.stream_notification a { margin: 0px; padding: 10px; color: #3e3e3e; display:block; }
	.stream_notification a:hover { text-decoration: none; }

/* Sections */
section.fullpage { min-height: 100vh; }
section.default { padding: 25px 0px; }
	section.default > div.fixed { padding: 0px 10px; }
	section.default h1 { position: relative; background: #FFF; font-size: 32px; line-height:  40px; margin-top:  15px; margin-bottom: 25px; border-bottom: 5px solid #92725b; }
		section.default h1 span { font-size: 20px; display: block; color: #6e6e6e; font-weight: 400; font-style: italic; }
	section.default h1:after { position: absolute; top: 0px; left: -50vw; bottom: -0px; right: 0px; background: #FFF; content: ""; z-index: -1; box-shadow: 0px 0px 10px -4px #3e3e3e; }
	section.default:nth-child(even) h1:after { left: 0px; right: -50vw; }
		/* Pagination */
	section.default .pagination { text-align: center;  }
		section.default .pagination a { opacity: 0.5; background: #92725b; color: #FFF; font-weight: bold; text-decoration: none; display: inline-block; padding:  5px 15px; margin:  10px 8px; border-radius: 3px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; transition: all 0.15s; }
		section.default .pagination a:nth-child(even) { border-radius: 3px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; }
		section.default .pagination a:hover { margin: 10px 3px; padding: 5px 20px; opacity: 1.0; }
		section.default .pagination a.active { margin: 10px 3px; padding: 5px 20px; opacity: 0.5;  }
	/* Welcome Screen */
section.welcome, section.gwelcome { width: 100vw; min-height: 100vh; position:relative; text-align: center; background: #92725b; color: #EEE; }
section.gwelcome { width: 49.9999%; background: none; background-position: right bottom; background-size: cover; }
	section.welcome .fixed, section.gwelcome .fixed { position:relative; z-index: 5; padding: 0px 10px; }
	section.welcome h1, section.gwelcome h1 { margin: 0px auto; padding:  30vh 0px 10px; color: #FFF; }
	section.welcome h2, section.gwelcome h2 { color: #FFF; }
	section.welcome p, section.gwelcome p { line-height:  27px; font-size: 22px; margin:  10px auto; display: block;}
	section.welcome .social { }
		section.welcome .social ul { list-style: none; padding:  0px; margin:  0px; }
			section.welcome .social ul li { display: inline-block; padding: 5px 5px; transition: all 0.15s; opacity: 0.70; }
			section.welcome .social ul li:hover { opacity: 1.0; }
section.welcome:after { 
	opacity: 0.2; 
	background-image: url(../images/slim/gbgmscripts-bg.jpg); background-attachment: fixed; background-size: cover; 
	top: 0px; right: 0px; bottom: 0px; left: 0px; position: absolute; content: ""; background-repeat: no-repeat; background-position:center; 
	animation: welcome_bg;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

	/* Garage */
section.garage { height: 70vh; background-position: center; background-size: cover; text-align:center; background-attachment:fixed; text-align:cenet; background-repeat: no-repeat; position:relative; padding-top: 30vh; border-bottom: 2px solid #FFF;}
section.garage.slim { height: 20vh; }
	section.garage .fixed { position:relative; z-index: 5; padding: 0px 10px; }
	section.garage h1, section.garage h2 { margin: 0px auto; padding:  10px 10px; border-radius: 5px; color: #FFF; background: rgba(0,0,0,0.55); max-width: 600px; }
	section.garage p { line-height:  27px; font-size: 22px; margin:  10px auto; display: block; color: #ECECEC; }
section.garage:after { opacity: 0.5; background-attachment: fixed; background-size: cover; top: 0px; right: 0px; bottom: 0px; left: 0px; position: absolute; content: ""; z-index: 1; background-repeat: no-repeat; background-position:center; }

	/* Article/News */
section.news { }
	section.news article { padding: 10px 10px 30px; background: #FFF; margin: 20px 100px 20px 0px; border-radius: 10px; position: relative; box-shadow: 0px 0px 10px -4px #3e3e3e; }
		section.news article > .social { position: absolute; text-align: center; left:100%; top: 5px; bottom: 5px; right: -100px; padding: 20px 20px; margin-left: -5px; z-index: 0; min-height: 100px;  }
		section.news article p { padding:  10px; margin:  0px; }
		section.news article iframe, section.news article img { max-width: 85%; max-height: 420px; margin: 10px auto; display: block; }
		section.news article h2 { font-size: 20px; line-height: 30px; padding: 10px 10px 10px 10px; margin: 0px 5px 5px; border-bottom: 1px solid #CECECE; }
			section.news h1 a, section.news article h2 a { color: #1e1e1e; font-weight: bold; }
		section.news article ol, section.news article ul { margin: 10px 15px; }
			section.news article ol img, section.news article ul img { margin: 0px; }
	section.news article:after { position: absolute; top: 5px; right: -6vw; left: 95%; bottom: 5px; content: ""; background: rgba(0,0,0,0.03); z-index: -1; border-radius: 10px; transition: all 0.25s; }
		section.news article:hover:after { animation: brown_pulse; animation-duration: 10s;animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; }
section.news.list { }
	section.news.list article { padding: 10px 10px 30px; background: #FFF; margin: 20px 8vw 20px 0px; border-radius: 10px; position: relative; box-shadow: 0px 0px 10px -4px #3e3e3e; }
	section.news.list article:nth-child(even) { margin: 20px 0px 20px 8vw; }
		section.news.list article:nth-child(even):after { left: -6vw; right: 95%; }
		section.news.list article h2 { padding: 10px 10px 10px 10px; margin: 0px 0px 5px 0px; }
			section.news.list article h2 span { font-size: 15px; display: block; color: #6D6D6D; }
		section.news.list article > a { background: rgba(0,0,0,0.80); color: #FFF; font-weight: bold; text-transform: uppercase; padding-top: 5px; text-decoration: none;  position: absolute; bottom: 0px; left: 0px; right: 0px; min-height: 35px; text-align: center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px }
			section.news.list article > a:hover { background: rgba(91,116,146,0.80); }
	/* Projects/Sites */
section.project { }
	section.project h1 { }
		section.project h1 > img { background: #92725b; position: absolute; right: 25px; top:10px; bottom: 0px; padding: 10px 10px; overflow: hidden; height: 100%; border-radius: 5px; box-shadow: 0px 0px 10px -2px #3e3e3e; }
	section.project article { overflow: hidden; }
		section.project article h2, section.project article h3, section.project article p { padding-left: 10px; padding-right: 10px; }
section.project.list { overflow: hidden; }
	section.project.list article { width: 33.3333%; float: left; position: relative; }
	section.project.list article:after { background: rgba(255,255,255,0.65); content: ""; position:absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: -1; border-radius: 15px;  }
		section.project.list article a { display: block; margin: 20px; }
		section.project.list article img { display: block; margin:  0px; background: rgba(0,0,0,0.80); border-radius: 15px; padding: 0px; width: 100%; border: 0px; position: relative; }
		section.project.list article:hover img { background: rgba(95,66,45,0.82);}
		section.project.list article h2 { display: none; }
	/* About */
section.about { position: relative; color: #FFF; }
	section.about article { text-align:center; padding: 10vh 10px 50px; z-index: 3; position: relative;}
		section.about article > img { margin: 0px 0px 10px; padding: 10px; background: rgba(255,255,255,0.8); border-radius: 900px; width: 250px; transition: all 0.45s; }
			section.about:hover article > img { background: rgba(0,0,0,0.6); }
		section.about article > h1 { margin: 0px; padding: 0px 5px 15px; color: #FFF; line-height: 50px; }
		section.about article p { max-width: 600px; margin:  10px auto; text-align: left; line-height: 32px; }
		section.about article .social { }
			section.about article .social a { opacity: 0.7; margin: 10px; transition: all 0.25s; }
			section.about article .social a:hover { padding: 5px; margin: 5px; opacity: 1; }
section.about:after { opacity: 0.5; background-attachment: fixed; background-size: cover; top: 0px; right: 0px; bottom: 0px; left: 0px; position: absolute; content: ""; z-index: 1; background-repeat: no-repeat; background-position:center; }
section.about.gb { background: #1e1e1e; }
	section.about.gb:after { background-image: url(../images/slim/gb-bg.jpg); } 
section.about.jt { background: #3e3e3e; }
		section.about.jt:after { background-image: url(../images/slim/jt-bg.jpg); } 
	/* Contact Us */
section.contact { }
	section.contact article { margin: 50px 5vw; padding: 15px 15px; background: #FFF; position:relative; border-radius: 10px; }
		section.contact article p { }
		section.contact article form { }
			section.contact article form label { font-weight: bold; }
				section.contact article form label span { color: red; }
			section.contact article form input, section.contact article form textarea { background: #ececec; width: 92%; border-radius: 5px; padding: 15px; font-size: 15px; margin: 10px auto; border: none; border-bottom-left-radius: 10px; border-top-right-radius: 10px; display: block; }
			section.contact article form label+input, section.contact article form label+textarea { margin: 10px auto 20px; }
			section.contact article form textarea { min-height: 100px; max-width: 92%; }
	section.contact article:after { position: absolute; top: 5px; right: -3vw; left: -3vw; bottom: 5px; content: ""; background: rgba(0,0,0,0.03); z-index: -1; border-radius: 10px; transition: all 0.25s; }

/* Footer */
footer { padding: 25px 0px 50px; }
	footer h3 { list-style: none; position: relative; background: #FFF; font-weight: normal; padding: 20px 15px; font-size: 15px; line-height:  40px; margin-top: 15px; margin-bottom: 15px; border-bottom: 5px solid #92725b;  }
	footer ul { list-style: none; padding: 0px; }
		footer ul li { display: inline-block; margin: 5px; padding: 0px; }
	footer h3:after { position: absolute; top: 0px; left: -50vw; bottom: -0px; right: -50vw; background: rgba(99,77,61,0.7); content: ""; z-index: -1; box-shadow: 0px 0px 10px -4px #3e3e3e; }

@media all and (min-width: 8888888px) {
	.fixed { max-width: 1800px; }
	h1.fixed { max-width: 1760px; padding:  20px 20px; }
	
	section.news.list article {}
		section.news.list article h2:first-child { float: left; height: 150px; width: 250px; border-bottom: none; border-right: 1px solid #CECECE; margin: 0px 10px 0px 0px; }
		section.news.list article > p:nth-child(2) { display: none; }
		section.news.list article > a:before { content: " "; display: block; clear: both; position: relative; }
	
}

@media all and (max-width: 1200px) {
	.fixed { max-width: 1080px; }
	h1.fixed { max-width: 1040px; padding:  20px 20px; }
}

@media all and (max-width: 800px) {
		section.project.list article { width: 49.9999%;}
}

@media all and (max-width: 400px) {
		section.project.list article { width: 100%; float: none; }
}


/* Animations */
@-webkit-keyframes welcome_bg {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.3;
  }
}
@-webkit-keyframes brown_pulse {
  0% {
  	background: rgba(146,114,91,0.30);
  }
  25% {
    background: rgba(146,114,91,0.20);
  }
  50% {
    background: rgba(146,114,91,0.35);
  }
  75% {
    background: rgba(146,114,91,0.15);
  }
  100% {
    background: rgba(146,114,91,0.25);
  }
}