/*

Theme Name:     Hackerthreads Theme

Description:    Child theme for thinkRedBarn theme

Author:         A Meyerson

Template:       thinkRedBarnTheme

*/



@import url("../thinkRedBarnTheme/style.css");



html, body {background: url(img/bkg.jpg) top center repeat #333; font-family: 'Open Sans Condensed', sans-serif; font-size: 16px; color: #fff;}



.header.rbtg, #footer {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}





h1, h2, h3, h4, h5 h6 {font-family: 'Open Sans', sans-serif;}



h2.web, h3.web, a.web, .category-web-design .entry-title a {border-bottom: 2px solid #00746b !important;}

h2.branding, h3.branding, a.branding, .category-company-branding .entry-title a {border-bottom: 2px solid #00708f !important;}

h2.graphics, h3.graphics, a.graphics, .category-graphics .entry-title a {border-bottom: 2px solid #ddb65d !important;}

h2.promotional, h3.promotional, a.promotional, .category-promotional .entry-title a  {border-bottom: 2px solid #bf3f34 !important;}





#content a.fancybox {border-bottom: none;}



#body {width: 1495px;}



/****** Header  ****/

.header.rbtg {border-bottom: 1px solid #000;}





/** subheader **/

.subheader h1 {position: relative;}

.subheader a.logo {background: url(img/logo-hackerthreads.png) 0 0 no-repeat; width: 22%; height: 100px;  background-size: contain; margin-top: 0; position: absolute; z-index: 999;}



.header.subheader {background: transparent; }

.header.subheader {height: 75px; padding: 0;}

.header.subheader .inner {width: 1300px;}



.footer.links {border-top: #222; background: #383838;}



/** access **/

#access {width: 76%; float: right; margin-top: 10px;}

#access ul {margin: 0; background: url(img/bkg-menubar.png) right center no-repeat;}

#access li {width: 18%; background: url(img/bkg-menubar.png) left center no-repeat;}

#access li:first-child {width: 10%;}

#access li:nth-child(6) {background: url(img/bkg-menubar.png) left center no-repeat, url(img/bkg-menubar.png) right center no-repeat ;}

#access li:nth-child(7) {display: none;}

#access a {background: transparent; box-shadow: none; color: #fff; padding: 10px 10%; line-height: 1.1em; text-align: center; border: none; 

			font-size: 1.125em; font-weight: 500px; text-shadow: 1px 1px #000;}

#access a span {display: block;}

#access li:first-child a {line-height: 2.2em;}

#access li:hover > a, #access li.current_page_item a {padding: 10px 10%; margin: 0; border: none; background: transparent; box-shadow: none; color: #ed1c24;}

#access li.current_page_item a {font-weight: bold;}

.page-id-50 #access li.current_page_item a, #access li:nth-child(5):hover > a {color: #00746b;}

.page-id-44 #access li.current_page_item a, #access li:nth-child(2):hover > a {color: #00708f;}

.page-id-46 #access li.current_page_item a, #access li:nth-child(3):hover > a {color: #ddb65d;}

.page-id-48 #access li.current_page_item a, #access li:nth-child(4):hover > a {color: #bf3f34;}

 

 /** BANNER **/

 .banner {margin: 0;}

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

 

 /*** squares ***/

#content .columns .sixty {width: 60%; padding-right: 0;}

.columns.three div h2 {color: #fff; font-size: 1.6em; font-weight: 600; line-height: 1em; text-align: center; text-transform: uppercase; text-shadow: 1px 1px #000;}

.columns.three div {font-family: 'Open Sans', sans-serif; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 1em;}

#content .columns.three > div {width: 30%; padding: 1em; margin-right: 3%; height: 295px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5);}

.columns.three div:nth-child(1) {color: #00d4ff;

		background: #00708f;

		background-image: linear-gradient(bottom, rgb(0,112,143) 0%, rgb(0,79,101) 100%);

		background-image: -o-linear-gradient(bottom, rgb(0,112,143) 0%, rgb(0,79,101) 100%);

		background-image: -moz-linear-gradient(bottom, rgb(0,112,143) 0%, rgb(0,79,101) 100%);

		background-image: -webkit-linear-gradient(bottom, rgb(0,112,143) 0%, rgb(0,79,101) 100%);

		background-image: -ms-linear-gradient(bottom, rgb(0,112,143) 0%, rgb(0,79,101) 100%);



		background-image: -webkit-gradient(

			linear,

			left bottom,

			left top,

			color-stop(0, rgb(0,112,143)),

			color-stop(1, rgb(0,79,101))

		);

}

.columns.three div:nth-child(2) {color: #f1eb94;

	background: #ddb65d;

	background-image: linear-gradient(bottom, rgb(221,183,93) 0%, rgb(154,127,65) 100%);

	background-image: -o-linear-gradient(bottom, rgb(221,183,93) 0%, rgb(154,127,65) 100%);

	background-image: -moz-linear-gradient(bottom, rgb(221,183,93) 0%, rgb(154,127,65) 100%);

	background-image: -webkit-linear-gradient(bottom, rgb(221,183,93) 0%, rgb(154,127,65) 100%);

	background-image: -ms-linear-gradient(bottom, rgb(221,183,93) 0%, rgb(154,127,65) 100%);



	background-image: -webkit-gradient(

		linear,

		left bottom,

		left top,

		color-stop(0, rgb(221,183,93)),

		color-stop(1, rgb(154,127,65))

	);

}

.columns.three div:nth-child(3) {color: #ff6c5c;

	background: #bf3f34;

	background-image: linear-gradient(bottom, rgb(191,63,52) 0%, rgb(133,44,36) 100%);

	background-image: -o-linear-gradient(bottom, rgb(191,63,52) 0%, rgb(133,44,36) 100%);

	background-image: -moz-linear-gradient(bottom, rgb(191,63,52) 0%, rgb(133,44,36) 100%);

	background-image: -webkit-linear-gradient(bottom, rgb(191,63,52) 0%, rgb(133,44,36) 100%);

	background-image: -ms-linear-gradient(bottom, rgb(191,63,52) 0%, rgb(133,44,36) 100%);



	background-image: -webkit-gradient(

		linear,

		left bottom,

		left top,

		color-stop(0, rgb(191,63,52)),

		color-stop(1, rgb(133,44,36))

	);

}

.columns.three div:nth-child(1) a{color: #00d4ff !important;}

.columns.three div:nth-child(2) a{color: #f1eb94 !important;}

.columns.three div:nth-child(3) a{color: #ff6c5c !important;}



#content .columns .forty {width: 40%; padding-left: 0;}



#social h3 {float: left; font-style: italic; font-size: 1.6em; font-weight: 600; line-height: 48px; margin: 10px 0 0;}

#social span {float: right; text-align: right; font-size: 1.17em; margin: 10px 0 0;}

#social span a {margin: 0 5px; border-bottom: none;}

#social img {vertical-align:middle; height: 48px; width: 48px;}



/*

.latest-title {padding-top: .5em;}

.latest-title span {float: right; font-size: .6em;}

*/

.latest-title {margin: .5em 0; margin-right: .2em; padding: .4em; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5);

background-image: linear-gradient(bottom, rgb(113,113,113) 0%, rgb(94,94,94) 100%);

background-image: -o-linear-gradient(bottom, rgb(113,113,113) 0%, rgb(94,94,94) 100%);

background-image: -moz-linear-gradient(bottom, rgb(113,113,113) 0%, rgb(94,94,94) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(113,113,113) 0%, rgb(94,94,94) 100%);

background-image: -ms-linear-gradient(bottom, rgb(113,113,113) 0%, rgb(94,94,94) 100%);



background-image: -webkit-gradient(

	linear,

	left bottom,

	left top,

	color-stop(0, rgb(113,113,113)),

	color-stop(1, rgb(94,94,94))

);

}

h2.latest-title.branding {border-bottom: none !important; background-image: linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);

background-image: -o-linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);

background-image: -moz-linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);

background-image: -ms-linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);



background-image: -webkit-gradient(

	linear,

	left bottom,

	left top,

	color-stop(0, rgb(0,89,116)),

	color-stop(1, rgb(0,79,101))

);

}

h2.latest-title.graphics {border-bottom: none !important; background-image: linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);

background-image: linear-gradient(bottom, rgb(172,145,76) 0%, rgb(155,128,65) 100%);

background-image: -o-linear-gradient(bottom, rgb(172,145,76) 0%, rgb(155,128,65) 100%);

background-image: -moz-linear-gradient(bottom, rgb(172,145,76) 0%, rgb(155,128,65) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(172,145,76) 0%, rgb(155,128,65) 100%);

background-image: -ms-linear-gradient(bottom, rgb(172,145,76) 0%, rgb(155,128,65) 100%);



background-image: -webkit-gradient(

	linear,

	left bottom,

	left top,

	color-stop(0, rgb(172,145,76)),

	color-stop(1, rgb(155,128,65))

);

}

h2.latest-title.promotional {border-bottom: none !important; background-image: linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);

background-image: linear-gradient(bottom, rgb(148,51,42) 0%, rgb(133,44,36) 100%);

background-image: -o-linear-gradient(bottom, rgb(148,51,42) 0%, rgb(133,44,36) 100%);

background-image: -moz-linear-gradient(bottom, rgb(148,51,42) 0%, rgb(133,44,36) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(148,51,42) 0%, rgb(133,44,36) 100%);

background-image: -ms-linear-gradient(bottom, rgb(148,51,42) 0%, rgb(133,44,36) 100%);



background-image: -webkit-gradient(

	linear,

	left bottom,

	left top,

	color-stop(0, rgb(148,51,42)),

	color-stop(1, rgb(133,44,36))

);

}

h2.latest-title.web {border-bottom: none !important; background-image: linear-gradient(bottom, rgb(0,89,116) 0%, rgb(0,79,101) 100%);

background-image: linear-gradient(bottom, rgb(0,100,95) 0%, rgb(0,93,88) 100%);

background-image: -o-linear-gradient(bottom, rgb(0,100,95) 0%, rgb(0,93,88) 100%);

background-image: -moz-linear-gradient(bottom, rgb(0,100,95) 0%, rgb(0,93,88) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(0,100,95) 0%, rgb(0,93,88) 100%);

background-image: -ms-linear-gradient(bottom, rgb(0,100,95) 0%, rgb(0,93,88) 100%);



background-image: -webkit-gradient(

	linear,

	left bottom,

	left top,

	color-stop(0, rgb(0,100,95)),

	color-stop(1, rgb(0,93,88))

);

}



.latest-title span {float: right; font-size: .6em; color: #fff;}

.latest-title span a:hover {color: #ed1c24 !important;}



hr{border: 0; border-bottom: 3px dashed #505050;}

 

#posts img, img.shadow { -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .5); box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .5); max-width: 95%; height: auto;}

.no-shadow {-webkit-box-shadow: none !important; box-shadow: none !important;}



.home .forty #posts > div:last-child {display: none;}

.home #content .three h2 {margin-top: 1em; font-size: 1.6em; text-decoration: none;}

.home #content .three a {text-decoration: none;}

 

#under-boxes {width: 27%; float: left;} 

#content h2{margin-top: 0; margin-bottom: .2em; color: #fff; text-transform: uppercase;  text-shadow: 1px 1px #000; font-size: 1.4em; font-weight: 600;}

#under-image {width: 67%; float: left; margin-left: 2%;}

#under-image img {-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5);width: 100%; height: auto;} 

 

#content h2 a {color: #fff; font-weight: 600; }

#content a {color: #fff; font-weight: 400; border-bottom: none; text-decoration: underline; }

#content a:hover {color: #ed1c24;}

.page-id-50  #content a:hover, #content .category-web-design a:hover, .page-id-50 .products span, .page-id-50 strong, .page-id-50 #content a.heavy  {color: #00746b;}

.page-id-44  #content a:hover , #content .category-company-branding a:hover , .page-id-44 .products span, .page-id-44 strong, .page-id-44 #content  a.heavy {color: #00708f;}

.page-id-46  #content a:hover, #content .category-graphics a:hover, .page-id-46 .products span, .page-id-46 strong, .page-id-46 #content a.heavy  {color: #ddb65d;}

.page-id-48  #content a:hover, #content .category-promotional a:hover, .page-id-48 .products span, .page-id-48 strong, .page-id-48 #content a.heavy  {color: #bf3f34;}

#content .byline { color: #ccc;}

#content .byline a {font-weight: 400; border-bottom: none; text-decoration: underline;}

h3.entry-title {font-size: 1.8em; line-height: 1.2em;  margin-bottom: .2em;}





.stacked strong {font-size: 1.2em;}

#content a.heavy {font-size: 1.2em; font-weight: bold;}

#content a.heavy:hover {color: #fff;}



.products.horizontal li {display: block; float: left;}

.products span {font-weight: bold;}



.left-col {width: 72%}

.right-col {width: 22%; padding: 1em 2em; background: #f0f0f0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5);}



#content .entry-title a { text-decoration: none; border-bottom: 2px solid #ed1c24;}

#content .post{border-top: 3px dashed #505050;}



.nav-next, .nav-previous {font-size: 16px;}



.widget-title {color: #555;}





/*** pages **/

#content .columns.stacked {padding-right: 3%;}

#content .columns.stacked > div {margin-bottom: 1em;}

#content .columns.stacked .row-left {clear: both; padding: 0 !important; padding-right: 2% !important; padding-left: 0 !important;}

#content .columns.stacked .row-right {padding: 0 !important; padding-left: 2% !important; padding-right: 0 !important;}



#content .columns.stacked .long {width: 67% !important;}

#content .columns.stacked .short {width:29% !important;}

#content .columns.stacked .fifty {width:48% !important;}

#content .columns.stacked .photo > div {width: 100%; height: 0; background-size: contain; background-position: center center; background-repeat: no-repeat; } 

#content .columns.stacked .short.photo > div {padding-bottom: 125%;} 

#content .columns.stacked .long.photo > div {padding-bottom: 50%;} 

#content .columns.stacked .fifty.photo > div {padding-bottom: 75%;} 



#content li {margin-top: .2em;}



#interior-banner{width: 100%; height: 175px; position: relative; z-index: 9999; background-size: auto 100%, auto 100%; background-repeat: no-repeat, no-repeat; background-position: top left, top right;

							background-image: url(img/bkg-rotator-left.png), url(img/bkg-rotator-right.png);}

#interior-banner-container {width: 100%; height: 100%; background-position: right center; background-repeat: no-repeat;margin-bottom: 2em; position: relative;}

#interior-banner-container h2 {width: 475px; height: 130px;margin: 0; position: absolute; top: 0; left: 0; background-position: right center; background-repeat: no-repeat; font-family: 'Open Sans Condensed', sans-serif;

								color: #fff; text-transform: uppercase; text-shadow: 1px 1px #000; font-size: 2.7em; font-weight: 600; text-align: center; line-height: 42px; padding-top: 45px; padding-right: 125px; padding-left: 75px;}



.blog #interior-banner-container	{background-position: center center;}									

.tag #interior-banner-container	{background-position: center center;}						

.tag #interior-banner-container h2 {width: 230px; font-size: 2em; line-height: 30px;} 								

								

.page-id-52 #primary {margin-top: 2em;}

.wpcf7-form .wpcf7-text, .wpcf7-form textarea {-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5);} 							

input[type="button"], input[type="reset"], input[type="submit"] {-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .5); background: #bbb;}

								

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

#body {width: 1140px;}

.header.rbtg .inner {width: 1140px;}

.header.subheader .inner {width: 1080px;}

#access a {font-size: .95em;}

#content .columns.three h2 {font-size: 1.3em;}

#under-boxes {width: 96%;} 

#under-image {width: 96%; margin-left: 0; margin-top: 0;}

.bx-wrapper .bx-pager {right: 630px !important;}

.bx-wrapper .bx-caption {left: 150px !important;}



#interior-banner-container h2 {width: 320px;}

.tag #interior-banner-container h2 {width: 180px;}



}



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

#body {width: 960px;}

.header.rbtg .inner {width: 960px;}



.bx-wrapper .bx-pager {right: 460px !important;}

.bx-wrapper .bx-caption {left: 130px !important;}

.bx-wrapper .bx-caption span {font-size: 1.5em !important; padding: 1.5em 2em !important;}



#content .columns.three > div {width: 97%; margin-right: 3%; height: auto; margin-bottom: .5em;}

.forty #posts > div:last-child {display: block;}



.tag #interior-banner-container h2 {width: 140px;}

}



 

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

/*** TABLET ***/

.header.HPC .fullscreen {display: block;}

.header.HPC .mobile {display: none;}

.header .HPC .inner {width: 920px !important; padding-right: 0 !important; padding-left:0 !important;}

#body {width: 96%; padding-right: 2%; padding-left: 2%;}

#content .columns.three > div{width: 100% !important; margin-right: 0;}

#under-boxes {width: 100%;} 

#under-image {width: 100%;}

.bx-wrapper .bx-pager {right: 15% !important; width: 80%; }

.bx-wrapper .bx-caption {right: 10% !important; left: auto !important; width: 80% !important; }

.bx-wrapper .bx-caption span {padding: 1.2em .5em !important;}



#interior-banner{height: 90px;}

#interior-banner-container {background-size: auto 100%; background-position: right center !important;}

.blog #interior-banner-container	, .archive #interior-banner-container{background-position: center center !important;}

#interior-banner-container h2 {width: 225px; height: 75px; font-size: 1.5em; line-height: 30px; padding-top: 15px; padding-right: 120px; padding-left: 40px;}

.tag #interior-banner-container h2 {font-size: 1.2em; line-height: 35px;}

/** switch to mobile menu **/

.subheader a.logo {height: 75px; width: 175px;}



#access {height: auto; clear: both; width: 100%; margin-top: -20px;}

#access a.mobile {display: block; height: 100%; color: #fff; text-decoration: none; width: auto; font-size: 20px; font-weight: 400; line-height: 40px;}

#access .menu-link {float: right; margin: 0; margin-top: 47px; padding: 0; padding-left: 2em; line-height: 1em !important;}

#menu-main {overflow: hidden; max-height: 0; clear: both; margin-bottom: 1em !important; }

#menu-main.active {max-height: 15em; height: auto;margin-top: 40px;}

#menu-main li{display: block; float: none; width: 100%; padding: 0 !important; background: #eee !important; border-bottom: 1px solid #ccc;}

#menu-main > li:hover {background: #fff !important;}

#menu-main .current-menu-item {background: #fff;}



#menu-main > li:first-child {background: transparent !important;}

#menu-main > li:first-child a span {display: none;}



#menu-main > li > a {padding-left: 10px !important; color: #333; line-height: 1em !important;}

#menu-main > li.current_page_item a {color: #ed1c24;}



#menu-main a {text-shadow: none; text-align: left;}

#menu-main a span {display: inline;}



#access li:nth-child(7) {display: block;}



#social h3 {font-size: 1.2em;}



}

 

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

/*** mobile ***/

.bx-wrapper .bx-caption {display: none;}

.bx-wrapper .bx-pager {display: none;}



h3.entry-title {line-height: 1.2em;}



#content .columns.stacked .short, #content .columns.stacked .long, #content .columns.stacked .fifty {width: 96% !important;}

#content .columns.stacked .short, #content .columns.stacked .long, #content .columns.stacked .fifty{padding-right: 2% !important; padding-left: 2% !important;}



#interior-banner-container h2 {width: 105px;}

.tag #interior-banner-container h2 {display: none;}

.page-id-46 #interior-banner-container h2 {font-size: 1em; line-height: 1em; width: 125px; height: 60px; padding-top: 30px;}

.page-id-48 #interior-banner-container h2 {font-size: 1em; line-height: 1em; width: 105px; height: 60px; padding-top: 30px;}





}

 

 

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





}