/* GLOBAL STYLES
----------------
Add styles beneath this line that you want to be applied across your entire site */

/* Website Background Color */
body {
	background-color: #000;
}

/* Main width */
#wrapper, .col-full {
	max-width: 100% !important;
}

input, textarea {
	padding: 5px;
	background: #efefef;
	border: 1px solid #fff;
}

.clearfix { 
	clear: both;
	display: table;
	content: " ";
}

/* About Us background image */
.page-id-7 #content {
background-image:url('http://hatchstudios.com/wp-content/uploads/about_bg.jpg');
background-repeat:no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* Services background image */
.page-id-4578 #content {
background-image:url('http://hatchstudios.com/wp-content/uploads/services_bg.jpg');
background-repeat:no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* Work background image */
.archive #content {
background-image:url('http://hatchstudios.com/wp-content/uploads/work_bg.jpg');
background-repeat:repeat-y;
background-position: center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}

/* Blog background image */
.page-id-3381 #content, .single-post #content {
background-image:url('http://hatchstudios.com/wp-content/uploads/blog_bg.jpg');
background-repeat:no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* Contact background image */
.page-id-11 #content {
background-image:url('http://hatchstudios.com/wp-content/uploads/contact_bg.jpg');
background-repeat:no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* Search background image */
.search #content {
background-image:url('http://hatchstudios.com/wp-content/uploads/search_bg.jpg');
background-repeat:no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* Style project client text */
.project-client {
	color: #efefef;
	text-align: center;
	font-size: 72px;
	font-weight: 600;
	line-height: 1.2em;
	padding-top: 75px;
	text-transform: uppercase;
}

/* Style project name text */
.project-name {
	color: #efefef;
	text-align: center;
	font-size: 48px;
	font-weight: 100;
	font-style: italic;
	line-height: 1.2em;
	padding-bottom: 75px;
}

/* Style project details text */
.project-details, .project-website, .project-credits, .project-similar-title {
	font: 700 1.8em/1.5em "museo-sans", Helvetica, sans-serif;
	color: #ccc;
	line-height: 1.5em;
}

/* Style project description text */
.project-description {
	font: 300 16px/1.5em "museo-sans", Helvetica, sans-serif;
}

.project-website {
	padding-bottom: 5px;
}

/* Style similar project */
.similar-projects {
font-size: 16px;
font-weight: 700;
}

.similar-projects a:hover {
font-size: 16px;
font-weight: 700;
text-decoration: none;
}

a, p, h1, h2, h3, h4, span, li { 
	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
	font-family: 'museo-sans', Helvetica, sans-serif;
}

/* Remove borders from images */
.entry img, img.thumbnail, #portfolio .group.portfolio-img img {
    height: auto;
    padding: 0; 
    border: none;
}

.entry, .entry p {
    font: 300 16px/1.5em "museo-sans", Helvetica, sans-serif;
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
    margin: auto !important;
}

/* Global fade in and out color & transition for links */
a, a:link, a:visited, a img, .post .title a:link, .post .title a:visited  {
	-webkit-transition: all 0.1s ease; 
	transition: all 0.1s ease-out; 
	color: #ffd005;
}

/* Global hover fade in and out color & transition for links */
a:hover, h2 a:hover, .post .title a:hover, .post-more a:hover, .post-meta a:hover, .post p.tags a:hover { 
	-webkit-transition: all 0.1s ease; 
	transition: all 0.1s ease-out; 
	text-decoration: none;
	color: #fff;
}

/* Main headline font color */
h1, h2, h3, h4, h5, h6 {
	color: #efefef;
}

/* Main font color */
body, p, .entry, .entry p {
	color: #efefef;
}


#wrapper, #inner-wrapper {
padding: 0px;
background-color: #222;
}

/* Header BG color */
#header {
padding-top: 90px;
padding-bottom: 5px;
background-color: #000;
}

#logo {
  float: none;
}

#port-tags {
	margin: auto !important;
}

.post .title {
	margin: auto;
}

/*p, h1, h2, h3, h4, #logo, .post-more, .project-client, .project-name, .project-details, .project-website, .project-credits, .project-similar-title, .similar-projects, #contact-page.page, #navigation .menus, #blog-page.page, .entry*/

#logo, #navigation .menus, .archive.tax-clients #main, .page-id-7 #main, .page-id-4578 #main, .page-id-3381 #main, .page-id-11 #main, .project-client, .project-name, .project-details, .project-website, .project-credits, .project-similar-title, .similar-projects, .single-portfolio p, .search #main, #port-tags, #single_map_canvas,
.single-post .type-post, .post-entries {
	max-width: 960px!important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 25px;
	padding-right: 25px;
}

#single_map_canvas {
	padding:0;
}

.woo-sc-hr, .woo-sc-divider {
	margin-bottom: 0px;
	padding-top: 0px;
}

#footer .col-left {
    float: none;
    text-align: center;
}

/* blog only */
#post-author, #connect {
border: none;
background: #666;
}

/* About Page Profile Pic */
.profile-pic {
	border: none !important;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	padding: 20px 0;
	background-color: #c8c8c8 !important;
}

/* remove border for global images */
.hatch-working-with-us, .hatch-services { 
	border: none !important;
	background: #c8c8c8 !important;
	display: inline;
	padding: 1px 1px !important;
	margin: 11px;
}


/* Remove padding under navigation */
#navigation {
	margin-bottom: 0 !important;
}

/* Add padding above content for About, Services, Blog & Contact*/
.page-id-7 #content, .page-id-4578 #content, .page-id-3381 #content, .archive #content, .page-id-11 #content, .search #main, .single-post .type-post  {
	padding-top: 40px !important;
}

#contact-page ol.forms textarea {
	width: 87%;
}

.social-icons-container {
    width: 260px;
    height: 48px;
    border: none;
    margin-top: 20px;
}

.social-icons {
    width: 48px;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    margin: 0 !important;
}

.social-icons:hover {
	opacity: 0.7;
}

/* FULLSCREEN VIDEO SECTION */

.bg_video {
    width: 100%;
    height: auto;
}

/* Welcome to Hatch Text */
.introtext {
    font: 600 128px "museo-sans", Helvetica, sans-serif;
    font-size: 3vw;
    line-height: 4vw;
    position: absolute;
    padding: 5px 20px;
    top: 44%;
    border: 0.6vw solid #fff;
    left: 27%;
    color: #fff;
    text-align: center;
}

.page-id-2 #main-sidebar-container #main {
    padding-left: 0;
    padding-right: 0;
}


.page-id-2 #content {
    padding: 0 0 0px;
}

@media (max-width: 767px) {
    .page-id-2 .video {
	height: 315px;
     background: url('http://hatchstudios.com/wp-content/uploads/home_bg.jpg') center center / cover no-repeat;
    }

    .page-id-2 .bg_video {
        display: none;
    }
}




/*portfolio image group styles*/

/* Portfolio Tags */
#portfolio #port-tags .port-cat a {
    padding: 2px 6px;
    margin: 0 0 0 5px;
    background: #303030;
    border: 1px solid #505050;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

/* Portfolio Tags Hover */
#portfolio #port-tags .port-cat a:hover, #portfolio #port-tags .port-cat a.current {
    background: #505050;
}

/* Make featured image 100% */
.woo-image.portfolio-img {
	width: 100%;
}

#portfolio .group.portfolio-img {
	width: 30.0%;
	margin: 0 1.6% 2.8% 1.6%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	height: auto!important;
}

/*.entry img, 
img.thumbnail, */
#portfolio .group.portfolio-img img {
	width: 100%;
	border: 0px;
	padding: 0px;
	opacity: .99;
}


a .entry:hover img, 
a img.thumbnail:hover, 
#portfolio .group.portfolio-img:hover img {
	opacity: .75;
}
#portfolio .group.portfolio-img h3 {
     padding-left: 0;
     width: 100%;
     text-align: center;
	font-size: 14px;
	display: block;
	position: relative;
	margin-top: -4em;
	background: #2a2a2a;
	background: rgba(0,0,0,0.5);
}
#portfolio .group.portfolio-img h3 a {
	padding: .5em;
	display: block;
	color: #fff;
}
#portfolio .group.portfolio-img h3 a:hover,
#portfolio .group.portfolio-img:hover h3 a  {
	color:#ffd005;
	background: rgba(0,0,0,1);
  	text-decoration: none;
}



/* Large search icon */
#navigation ul.nav-search a.search-contents {
	display: none;
}

/* Main search bar */
#navigation ul.nav-search a.search-contents + ul {
     display: block;
     position: absolute;
     right: 0;
     top: 100%;
	visibility: visible;
	padding: 0 1em;
	margin: 0px; 
	height: 44px;
	border-radius: 0px;
	background-color: #202020;
	width: 160px;
	font-size: 0.8em;
	-webkit-transition: all 0.1s ease; 
	transition: all 0.1s ease-out; 
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: 1.1em;
	font-weight: lighter;
	letter-spacing: 1px;
}

/* Search text */
#navigation ul.nav-search .searchform input.s {
    box-sizing: border-box;
    padding: 0.6em 2.99em 0.828em 1.414em;
    width: 100%;
    font: 300 14px/1.2 "museo-sans", Helvetica, sans-serif;
}

/* Search icon */
#navigation ul.nav-search .searchform .submit {
    margin-top: -12px;
    font: 600 14px/1.2 "museo-sans", Helvetica, sans-serif;
}

/* Search icon hover */
#navigation ul.nav-search .searchform .submit:hover{
	color: red;
}

/* Search product result thumbnails 100x100 */
body.search #content img {
max-width: 100px;
}

/* Display search 'total of x results' */
.archive_header {
color: #efefef;
}

/* Search portfolio title formatting */
.post .title {
margin: 0;
font-size: 1.5em;
}

/* Hide page titles */
.page-title, .page .title {
margin: 0;
font-size: 1.5em;
display: none;
} 

.page-id-3381 .title {display: block;}

/* Style menu bar */
#navigation {
border-top: solid 2px #ffd005;
border-bottom: solid 1px #000;
border-radius: 0px;
margin-top: 0px;
font-weight: bold;
color: #d8d8d8;
text-shadow: none;
background: #303030;
}

ul.nav {
margin-left: 0.5em;
margin-right: 0px; 
}

/* Make menu blocks */
#navigation ul.nav > li {
padding-right: 40px;
background-color: #303030;
text-transform: uppercase;
-webkit-transition: background-color .4s ease; 
-moz-transition: background-color .4s ease; 
-o-transition: background-color .4s ease; 
transition: background-color .4s ease; 

}


/* Center text in menu buttons */
ul.nav li a {
font-size: 16px;
padding: 0;
color: #c8c8c8;
display: block;
text-align: center;
padding-top: 12px!important;
padding-bottom: 13px!important;
}

/* Add box shadow on hover */
#navigation ul.nav > li a:hover, 
#navigation ul.nav > li:hover, 
#navigation ul.nav li ul, 
#navigation ul.cart > li:hover, 
#navigation ul.cart > li > ul > div, 
#navigation ul.nav li.current_page_item a, 
#navigation ul.nav li.current_page_parent a, 
#navigation ul.nav li.current-menu-ancestor a, 
#navigation ul.nav li.current-cat a, 
#navigation ul.nav li.current-menu-item a {
color: #ffd005;
background-color: #303030;
}



a.button, input.button, 
button.button, #contact-page ol.forms li.buttons .submit {
padding: 3px 10px 3px 10px;
border: none;
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10;
-webkit-transition: all 0.1s ease; 
transition: all 0.1s ease-out; 
}


/* Wooslider Pagination color */
.wooslider .wooslider-control-nav li a {
    border: 2px solid #999;
}

/* Wooslider Pagination hover color */
.wooslider .wooslider-control-nav li a:hover, 
.wooslider .wooslider-control-nav li a.wooslider-active {
    border-color: #eee;
    background: #333;
}


/* Adjust slider images to fit better in frame */
.wooslider {
margin: 20px 0 60px;
background: #fff;
border: none;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
zoom: 1;
}

/* Spacing below portfolio slider buttons */
#wooslider-id-1 {
margin-top: 75px!important;
margin-bottom: 75px!important;
}

.slider-pagination {
margin-bottom: 30px;
}

/* Reduce footer height */
#footer {
padding-top: 8px;
padding-bottom: 0px;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
color: #999;
background-color: #000;
}


/* Make Vimeo video responsive */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


/* Set content width to 100% instead of right side */
body.single-portfolio.one-col-960 #post-gallery, 
body.single-portfolio.one-col-960 .post-embed {
	width: 100%;
}

body.single-portfolio .hentry {
float: left;
width: 100%;
}


#mc_embed_signup {
	padding: 25px 0 0px 0;
}

/* DESKTOP STYLES
-----------------

/*screens smaller than 1012px*/
@media only screen and (max-width: 1012px) {
	.hatch-working-with-us, .hatch-services { 
		display: block;
		margin: 20px auto;
	}
}

/*screens smaller than 768px*/
@media only screen and (max-width: 767px) {
	body > #wrapper { overflow-x: visible;}


	body.single-portfolio.one-col #post-gallery, body.single-portfolio.one-col .post-embed {
    		width: 100%;
	}

	#inner-wrapper {
		padding: 0!important; 
	}
	.nav-toggle {
		margin: 0!important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	#navigation {
	border-top: none;
	}
	#navigation .nav-home,
	#navigation h3 { display: none;}

	#nav-search {
		width: 100%;
	}
/*
	#nav-search:hover .search_main .searchform input.s, 
	#nav-search .search_main .searchform input.s:hover, 
	#nav-search .search_main .searchform input.s:focus,
	#nav-search .search_main .searchform input.s, 
	#searchform input#s {
		width: 100%;
		padding: 0 1em;
		background: #368DD1!important;
		color: #fff;
	}*/
.searchform, #searchform {
		width: 100%;
		position: relative;	
		border: none;
		border-radius: 0;
	}

	#navigation ul {
		margin-bottom: 0; 
	}

	#navigation ul.nav-search a.search-contents + ul {
		position: inherit;
    		display: block;
		padding: 0;
		margin: 0;
		border-radius: 0px;
		width: 100%;
		height: inherit;
	}

	.searchform .icon-search:hover:before { color: #fff;}

	#content {
		padding-top: 0em;
	}


	ul.nav li a {
		padding: .5em 1em;
		display: block;
		color: #d8d8d8;
		font: bold 14px/1.2em "museo-sans", Helvetica, sans-serif;
		font-weight: bold;
	}

	/* Menu hover */

	ul.nav {
    		margin-left: 0px;
    		margin-right: 0px;
	}

	ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a, ul.nav li.current-cat a, ul.nav li.current-menu-item a, 	#navigation ul.nav > li a:hover  {
		background: #505050;
		text-shadow: none;
		color: #ffd005;
		text-decoration: none;
	}

	#portfolio .group.portfolio-img h3 {
		font-size: 12px;
	}

	#navigation #main-nav > li {
		border-bottom: 1px solid #000;
	}

	#navigation ul.nav > li {
    		padding-right: 0px; 
	}

	#navigation .menus, .page-id-3381 #content {
    		padding-left: 0px;
    		padding-right: 0px;
	}
}

/*screens smaller than 560px*/
@media only screen and (max-width: 35em) {
	ul.products li.product,
	#portfolio .group.portfolio-img {
		max-width: 100%!important;
		margin: 0 0 2em;
		min-width: 100%;
		width: 100px;
	}
	#portfolio .group.portfolio-img img {
		min-width: 100%;
	}
	#portfolio .group.portfolio-img h3 {
		font-size: 14px;
	}
}