/*
Theme Name: 	MechOne
Author:         Derek Ashauer
Author URI:     http://www.ashwebstudio.com
*/

@import url('https://fonts.googleapis.com/css?family=Karla:400,700');

/* Resets */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 120%; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
input { vertical-align: middle; }
input[type="submit"] { cursor: pointer; }
html,body { height: 100%; }

/* WordPress required styles */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 80%; line-height: 1.2; margin: 0; padding: 0 4px 5px; }

/* ----------------------------------- */
/* COMMON
/* ----------------------------------- */
body { background: #c92027; text-align: center; }
p, div, li, h1, h2, h3, h4, td, th, input, select, textarea { font: normal 20px/1.48 "Karla", sans-serif; color: #3e3e3e; }
p, h1, h2, h3, h4, section ul, section ol, section table { margin-bottom: 15px; }
h1, h2, h3 { line-height: 1.1; }
a img, :link img, :visited img { border: none }
a { color: #0686b1; text-decoration: none; }
a:hover { color: #4fb1d2; }
div.clear { clear: both; overflow: hidden; height: 1px; }
input { vertical-align: middle; }
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
.gfield { margin-left: 0 !important; }

#wrapper { position: relative; width: 100%; right: 0; }
.container { width: 100%; max-width: 1160px; margin: 0 auto; text-align: left; }

.button { display: inline-block; border: none; background: #003047; color: #FFF; padding: 7px 16px; text-decoration: none; cursor: pointer; }
.button:hover { background: #557e9d; color: #FFF; }


/* ----------------------------------- */
/* HEADER
/* ----------------------------------- */
header { position: fixed; left: 0; top: 0; width: 100%; z-index: 100; }
#top-bar { padding: 10px 0; background: #c92027; position: relative; z-index: 100; }
#top-bar a { color: #FFF; }
#top-bar .contact { float: left; }
#top-bar .contact li { float: left; list-style: none; font-size: 18px; margin: 0 40px 0 0; }
#top-bar .contact li a i { color: #e3a3a6; }
#top-bar .contact li a:hover i { color: #FFF; }
#top-bar .social { float: right; }
#top-bar .social li { float: left; list-style: none; font-size: 22px; margin: 0 0 0 15px; }

#header { position: relative; padding: 90px 0; background: transparent; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
#logo { float: left; }
#header nav { float: right; clear: right; margin: 15px 0 0 0; }
#header nav li { float: left; list-style: none; margin: 0 0 0 40px; position: relative; }
#header nav a { text-decoration: none; font-weight: bold; text-transform: uppercase; color: #c92027; }
#header nav a:hover, #header nav .current a { color: #0686b1; }

#header.sticky { padding: 40px 0 10px 0; background: #FFF;  }
#header .container { position: relative; z-index: 50; }
#header.sticky:before {
  	background: #FFF;
  	bottom: 0;
  	content: '';
  	display: block;
  	height: 500px;
  	left: 0;
  	position: absolute;
  	right: 0;
  	transform: skewY(-3deg);
  	transform-origin: 100%;
  	z-index: 1;
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
}

#mobile-menu { display: none; }


#banner { position: relative; background: transparent url(images/banner.jpg) center center no-repeat; background-size: cover; padding: 340px 0 220px 0; }
#banner .container { text-align: center; }
#banner h1 { font-size: 58px; font-weight: bold; color: #0686b1; max-width: 770px; margin: 0 auto 25px auto; padding: 0 0 25px 0; border-bottom: 1px solid rgba(201,32,39,.3); }
#banner h1 span { font-size: 28px; font-weight: normal; text-transform: uppercase; color: #c92027; display: block; }
#banner:before {
  	background: #FFF;
  	bottom: 0;
  	content: '';
  	display: block;
  	height: 100px;
  	left: 0;
  	position: absolute;
  	right: 0;
  	transform: skewY(-3deg);
  	transform-origin: 100%;
  	z-index: 1;
}
#banner:after { content: ""; position: absolute; z-index: 5; left: 50%; bottom: -15px; margin-left: -77px; width: 155px; height: 155px; background: transparent url(images/star-circle-blue.png) center center no-repeat; }

#about { padding: 130px 0; background: #FFF; }
#about .container { max-width: 800px; }
#about h2 { text-align: center; font-size: 30px; color: #c92027; text-transform: uppercase; font-weight: bold; margin: 0 0 50px 0; }
#about p strong { font-size: 22px; color: #0686b1; }

#capabilities { position: relative; padding: 200px 0 150px 0; background: transparent url(images/banner2.jpg) center center no-repeat; background-size: cover; }
#capabilities h2 { text-align: center; font-size: 30px; color: #c92027; text-transform: uppercase; font-weight: bold; margin: 0 0 50px 0; }
#capabilities .col { width: 21%; float: left; margin: 0 2%; }
#capabilities .col:first-of-type { margin-left: 0; }
#capabilities h3 { font-weight: bold; font-size: 20px; }
#capabilities li { margin-left: 20px; font-size: 18px; }
#capabilities:before {
  	background: #FFF;
  	top: 0;
  	content: '';
  	display: block;
  	height: 100px;
  	left: 0;
  	position: absolute;
  	right: 0;
  	transform: skewY(3deg);
  	transform-origin: 100%;
  	z-index: 1;
}
#capabilities:after {
  	background: #FFF;
  	bottom: -100px;
  	content: '';
  	display: block;
  	height: 100px;
  	left: 0;
  	position: absolute;
  	right: 0;
  	transform: skewY(3deg);
  	transform-origin: 100%;
  	z-index: 1;
}


#team { padding: 130px 0; background: #FFF; position: relative; }
#team:before { content: ""; position: absolute; z-index: 5; left: 50%; top: -115px; margin-left: -77px; width: 155px; height: 155px; background: transparent url(images/star-circle-red.png) center center no-repeat; }

#team-desc { width: 40%; float: left; }
#team-desc h2 { font-size: 30px; color: #c92027; font-weight: bold; text-transform: uppercase; }
#team-people { width: 50%; float: right; }
#team-people li { list-style: none; margin: 0 0 30px 0; clear: left; }
#team-people li img { float: left; max-width: 125px; height: auto; margin: 0 0 30px 0; }
#team-people li p { margin: 0 0 0 140px; font-size: 17px; }
#team-people li p.name { color: #c92027; font-size: 19px; font-weight: bold; }
#team-people li p.title { color: #ababab; }
#team-people li.feature { float: left; clear: none; width: 45%; margin-left: 10%; }
#team-people li.feature:nth-child( 2n+1 ) { clear: left; margin-left: 0; }
#team-people li.feature img { float: none; max-width: 100%; margin: 0; }
#team-people li.feature p { margin-left: 0; }
#team-people li.feature p.name { font-size: 23px; }

#projects { position: relative; background: #000; }
#projects h2 { position: absolute; z-index: 50; width: 100%; top: 50%; margin-top: -175px; height: 351px; background: url(images/star.png) center center no-repeat; text-align: center; }
#projects h2 span { position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #0686b1; margin: 0 auto; padding-top: 45px; text-transform: uppercase; font-size: 30px; display: block; max-width: 100px; line-height: 1; }
#instafeed { display: flex; flex-wrap: wrap; }
.instagram-image { width: 25%; height: auto; overflow: hidden; background-size: cover; background-position: center; }
.instagram-image:before {
    content:'';
    float:left;
    padding-top:100%;
}


#projects:before {
  	background: #FFF;
  	top: -100px;
  	content: '';
  	display: block;
  	height: 100px;
  	left: 0;
  	position: absolute;
  	right: 0;
  	transform: skewY(-3deg);
  	transform-origin: 100%;
  	z-index: 1;
}
#projects:after {
  	background: #c92027;
  	bottom: 0;
  	content: '';
  	display: block;
  	height: 100px;
  	left: 0;
  	position: absolute;
  	right: 0;
  	transform: skewY(-3deg);
  	transform-origin: 100%;
  	z-index: 1;
}

#contact { padding: 90px 0 130px 0; }
#contact .container { text-align: center; }
#contact h2 { font-size: 35px; color: #FFF; margin: 0 0 30px 0; }
#contact ul { margin: 0 0 50px 0; }
#contact li { width: 20%; float: left; list-style: none; margin: 0 2.5%; font-size: 22px; color: #FFF; }
#contact li a { color: #FFF; }
#contact li i { color: #e3a3a6; display: block; font-size: 40px; margin: 0 0 10px 0; }
#contact li:hover i { color: #FFF; }
#contact p { color: #dc777b; font-size: 15px; }
#contact p a { color: #dc777b; }
#contact p a:hover { color: #FFF; }

/* ----------------------------------- */
/* MOBILE
/* ----------------------------------- */

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

	.container { padding-left: 5%; padding-right: 5%; width: 90%; }

	#header .container { text-align: center; }
	#logo { float: none; }
	#header nav { display: none; }

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

	#top-bar nav li a span { display: none; }
	#logo img { max-width: 300px; height: auto; }

	#capabilities .col { width: 100%; float: none; margin: 0 0 40px 0; }

	#team-desc, #team-people { float: none; width: 100%; }

	.instagram-image:nth-of-type( 5 ),
	.instagram-image:nth-of-type( 6 ),
	.instagram-image:nth-of-type( 7 ),
	.instagram-image:nth-of-type( 8 ) { display: none; }
	.instagram-image { width: 50%; }

    #contact li { width: 45%; margin-bottom: 40px; }

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

	#banner h1 { font-size: 40px; }

    #projects h2 { top: -125px; margin-top: 0; height: 250px; background-size: contain; }
    #projects h2 span { font-size: 24px; padding-top: 35px; }
    .instagram-image { width: 100%; }

    #contact li { width: 100%; }

}