/*
Theme Name: JB Portfolio 2018
Theme URI: https://jshbrynt.com
Author: Josh Bryant
Author URI: http://jshbrynt.com
Description: Theme for my portfolio
*/

/*RESET STYLES*/

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{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

/* STICKY FOOTER */

/* ANIMATIONS */

/* FONTS */

@font-face {
font-family: 'Logo';
src:url(fonts/ddn-bold.otf);
}

@font-face {
font-family: 'Thin';
src:url(fonts/colfaxThin.eot);
src:url(fonts/colfaxThin.eot?#iefix) format("embedded-opentype"),
	url(fonts/colfaxThin.woff) format("woff"),
	url(fonts/colfaxThin.ttf) format("truetype"),
	url(fonts/colfaxThin.svg#svgFontName) format("svg");
}

@font-face {
font-family: 'Light';
src:url(fonts/colfaxLight.eot);
src:url(fonts/colfaxLight.eot?#iefix) format("embedded-opentype"),
	url(fonts/colfaxLight.woff) format("woff"),
	url(fonts/colfaxLight.ttf) format("truetype"),
	url(fonts/colfaxLight.svg#svgFontName) format("svg");
}

@font-face {
font-family: 'Regular';
src:url(fonts/colfaxRegular.eot);
src:url(fonts/colfaxRegular.eot?#iefix) format("embedded-opentype"),
	url(fonts/colfaxRegular.woff) format("woff"),
	url(fonts/colfaxRegular.ttf) format("truetype"),
	url(fonts/colfaxRegular.svg#svgFontName) format("svg");
}

@font-face {
font-family: 'Medium';
src:url(fonts/colfaxMedium.eot);
src:url(fonts/colfaxMedium.eot?#iefix) format("embedded-opentype"),
	url(fonts/colfaxMedium.woff) format("woff"),
	url(fonts/colfaxMedium.ttf) format("truetype"),
	url(fonts/colfaxMedium.svg#svgFontName) format("svg");
}

@font-face {
font-family: 'Bold';
src:url(fonts/colfaxBold	.eot);
src:url(fonts/colfaxBold.eot?#iefix) format("embedded-opentype"),
	url(fonts/colfaxBold.woff) format("woff"),
	url(fonts/colfaxBold.ttf) format("truetype"),
	url(fonts/colfaxBold.svg#svgFontName) format("svg");
}

@font-face {
	font-family: mn;
	src: url("fonts/msnn/MaisonNeue-Bold.woff2") format("woff2"),
		url("fonts/msnn/MaisonNeue-Bold.woff") format("woff"),
		url("fonts/msnn/MaisonNeue-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: mn;
	src: url("fonts/msnn/MaisonNeue-Demi.woff2") format("woff2"),
		url("fonts/msnn/MaisonNeue-Demi.woff") format("woff"),
		url("fonts/msnn/MaisonNeue-Demi.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}

.pure-g {
	max-width: 1300px;
	margin: 0 auto;
}

@media screen and (max-width: 80em) {
  .pure-g {
    margin: 0 2em;
  }
}

@media screen and (max-width: 35.5em) {
  .pure-g {
    margin: 0 .5em;
  }
}

.pure-g > div {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
			padding: 3em 1em !important;
        }

header .pure-g > div {
			padding: 2.5em 1em 3em !important;
        }
        
.pure-g > div.empty {
	padding: 0em 1em !important;
}

.pure-g > div.logo {
	padding-top: 3.3em !important;
}

@media screen and (max-width: 35.5em) {
  .pure-g > div {
    padding: 1em 1em !important;
  }
  .pure-g > div.logo {
  	padding-bottom: 1em !important;
  }
}

html {
	background-color: #1a1d20;
}

body {
	background: #1a1d20;
}

.bar {
	height: 4px;
	background-color: #1a1d20;
}

#wrapper {
	background-color: white;
}

/*h1 {
	margin-top: 0 !important;
	color: #1A1D20;
	font-family: Logo !important;
	font-weight: normal !important;
	font-size: 83px !important;
	line-height: 66px;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}*/

h1 {
	display: block;
	width: 100px;
	height: 100px;
	text-indent: -999999px;
	background: url('img/jb-logo.svg') no-repeat left top / auto 75px;
}

h2, h3 {
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

p {
	margin-top: 0 !important;
	margin-bottom: 1.5em;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
	font-family: Light;
	font-size: 22px;
	line-height: 1.4em;
	color: #656D78;
}

p a {
	text-decoration: none;
	text-decoration: none;
	font-weight: normal;
	font-family: Regular;
	color: #1A1D20;
	box-shadow: inset 0 -3px 0 #fff, inset 0 -8px 0 #FFDBE1;
	/*border-bottom: 3px solid #BEE6F6;*/
	/*background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(198,232,248,0) 75%, rgba(192,230,247,1) 83%, rgba(192,230,247,1) 94%, rgba(184,226,245,1) 95%, rgba(184,226,245,1) 97%, rgba(184,226,245,0) 100%); /* FF3.6+ *!/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(75%,rgba(198,232,248,0)), color-stop(83%,rgba(192,230,247,1)), color-stop(94%,rgba(192,230,247,1)), color-stop(95%,rgba(184,226,245,1)), color-stop(97%,rgba(184,226,245,1)), color-stop(100%,rgba(184,226,245,0))); /* Chrome,Safari4+ *!/
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Chrome10+,Safari5.1+ *!/
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Opera 11.10+ *!/
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* IE10+ *!/
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* W3C *!/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00b8e2f5',GradientType=0 ); /* IE6-9 *!/*/
}

p strong {
	font-weight: normal;
	font-family: Regular;
	color: #1A1D20;
}

p.center {
	text-align: center;
}

p.label {
	margin-bottom: 1.5em;
	font-family: mn;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #B6BABF;
	line-height: 24px;
}

p.label.taste {
	color: #6974DD;
	color: #565CB9;
	/*color: #8f6ed5;*/
	padding-left: 32px;
	background: url(img/home-taste-4.svg) left no-repeat;
	background-size: 24px 24px;
}

p.label.services {
	color: #D9A158;
	color: #C37F47;
/*	color: #DBA251;*/
	padding-left: 32px;
	background: url(img/home-services-3.svg) left no-repeat;
	background-size: 22px 24px;
}

p.label.perspective {
	color: #57B182;
	color: #459272;
/*	color: #24b47e;*/
	padding-left: 32px;
	background: url(img/home-perspective-3.svg) left no-repeat;
	background-size: 24px 24px;
}

p.label.experience {
	color: #5096CE;
	color: #3C78B1;
/*	color: #45b2e8;*/
	padding-left: 32px;
	background: url(img/home-experience-3.svg) left no-repeat;
	background-size: 24px 24px;
}

p.label.work {
	color: #AC6FBF;
	color: #8956A7;
/*	color: #b76ac4;*/
/*	color: #8f6ed5;*/
	padding-left: 32px;
	background: url(img/home-work-4.svg) left no-repeat;
	background-size: 24px 24px;
}

ul, ol {
	padding: 0 !important;
}

li {
	list-style: none;
	margin-top: 0 !important;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
	font-family: Light;
	font-size: 22px;
	line-height: 1.4em;
	color: #656D78;
}

button, a {
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

ul.services {
	margin-left: .3em;
	margin-bottom: 3em;
}

.services li {
	list-style: none;
}

.services li::before {
  color: #D9A158;
  content: "\2022";
  font-size: 1em;
  padding-right: .8em;
  position: relative;
  top: 0em; 
}

a.pure-button {
	
}

button.pure-button,
a.pure-button {
	margin-top: 1em;
	padding: 20px 40px;
	font-family: mn;
	font-weight: 600;
	font-size: 16px;
	line-height: 1em;
	letter-spacing: .01em;
	color: #fff;
	border-radius: 4px;
	border: none !important;
	background: rgba(55,156,254,1);
	background: -moz-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(55,156,254,1)), color-stop(100%, rgba(41,124,207,1)));
	background: -webkit-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -o-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -ms-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: linear-gradient(to bottom, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#379cfe', endColorstr='#297ccf', GradientType=0 );
	box-shadow: 0px 2px 4px rgba(0,0,0,.2);
}

button.pure-button:hover,
a.pure-button:hover {
	background: rgba(55,156,254,1);
	background: -moz-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(55,156,254,1)), color-stop(100%, rgba(41,124,207,1)));
	background: -webkit-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -o-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -ms-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: linear-gradient(to bottom, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#379cfe', endColorstr='#297ccf', GradientType=0 );
	box-shadow: 0px 2px 6px rgba(0,0,0,.3);
}

.intro h2 {
	font-size: 52px;
	font-family: bold;
	margin-bottom: .5em;
}

.intro button.pure-button {
	display: block;
	margin: 4em auto 2em;
}

.bluetest {
	background-color: blue;
}

#menu-main-menu, #footer-menu {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

#footer-menu {
	justify-content: center;
	margin-bottom: 4em;
}

footer p {
	color: #a4a5a6;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

@media screen and (max-width: 64em) {
  #menu-main-menu, #footer-menu {
    justify-content: space-between;
  }
}

#menu-main-menu li {
	
}

#menu-main-menu li a, #footer-menu li a {
	display: block;
	padding-top: 64px;
	width: 100px;
	text-align: center;
	font-family: mn;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .05em;
	line-height: 11px;
	text-transform: uppercase;
	text-decoration: none;
	color: #1A1D20;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
}

#footer-menu li a {
	font-weight: 700;
	color: #AAB2BD;
	color: #fff;
	opacity: .6;
}

#footer-menu li a:hover {
	opacity: .9;
}

@media screen and (max-width: 64em) {
  #menu-main-menu li a, #footer-menu li a {
    width: 100%;
  }
}

#menu-main-menu li.current-menu-item a {
	color: #3478f6;
	font-weight: 700;
}

#menu-main-menu li#menu-item-5 a { 
	background-image: url(img/nav-home-8.svg); 
	background-size: 28px 28px;
}

#menu-main-menu li#menu-item-5.current-menu-item a { 
	background-image: url(img/nav-home-active.svg); 
}

#menu-main-menu li#menu-item-13 a {
	background-image: url(img/nav-about-8.svg);
	background-size: 28px 19px;
}

#menu-main-menu li#menu-item-13.current-menu-item a {
	background-image: url(img/nav-about-active.svg);
}

#menu-main-menu li#menu-item-6 a { 
	background-image: url(img/nav-work-8.svg);
	background-size: 28px 28px;
}

#menu-main-menu li#menu-item-6.current-menu-item a { 
	background-image: url(img/nav-work-active.svg);
}

#menu-main-menu li#menu-item-10 a {
	background-image: url(img/nav-contact-8.svg);
	background-size: 24px 28px;
}

#menu-main-menu li#menu-item-10.current-menu-item a {
	background-image: url(img/nav-contact-active.svg);
}

#footer-menu li a {
	background-size: 28px;
}

#footer-menu li#insta a {
	background-image: url(img/footer-insta.svg);
}

#footer-menu li#gitport a {
	background-image: url(img/footer-gitport.svg);
}

#footer-menu li#twit a {
	background-image: url(img/footer-twit.svg);
}

#footer-menu li#dznball a {
	background-image: url(img/footer-dznball.svg);
}

#footer-menu li#lnkdcrng a {
	background-image: url(img/footer-lnkdcrng.svg);
}

.project {
	padding: 3em 0;
}

@media screen and (max-width: 35.5em) {
  .pure-g {
    padding: 1em 0;
  }
}

.project h3 {
	margin: 0 !important;
	padding: 0 !important;
	font-family: Light;
	font-weight: normal !important;
	font-size: 56px;
	color: #fff;
}

.project p {
	color: #fff;
}

.project a {
	text-decoration: none;
	color: inherit;
	font-family: Regular;
}

.project li {
	list-style: disc;
	color: #fff;
	margin: 0 0 .5em 2em;
}

.project li span {
	font-family: Regular;
}

.project .worktype {
	margin-top: 1em;
	margin-bottom: 1.5em;
}

.project .worktype li{
	display: inline-block;
	margin: 0 2em 0 0;
	padding-bottom: 1em;
	font-size: 11px;
	font-family: Medium;
/*	text-transform: uppercase;*/
	letter-spacing: .05em;
	line-height: 24px;
	color: black;
}

@media screen and (max-width: 35.5em) {
  .project .worktype li {
    margin-right: 1.5em;
  }
}

.project .worktype .icon {
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	margin-right: .6em;
	background-color: black;
}

.project .worktype .web .icon {
	width: 24px;
	-webkit-mask: url(img/worktype-web.svg) no-repeat left center;
	mask-image: url(img/worktype-web.svg) no-repeat left center;
	-webkit-mask-size: cover cover;
	mask-size: cover;
}

.project .worktype .iphone .icon {
	width: 15px;
	-webkit-mask: url(img/worktype-iphone.svg) no-repeat left center;
	mask-image: url(img/worktype-iphone.svg) no-repeat left center;
	-webkit-mask-size: cover cover;
	mask-size: cover cover;
}

.project .worktype .watchos .icon {
	width: 15px;
	-webkit-mask: url(img/worktype-watchos.svg) no-repeat left center;
	mask-image: url(img/worktype-watchos.svg) no-repeat left center;
	-webkit-mask-size: cover cover;
	mask-size: cover cover;
}

.project .worktype .tvos .icon {
	width: 24px;
	-webkit-mask: url(img/worktype-tvos.svg) no-repeat left center;
	mask-image: url(img/worktype-tvos.svg) no-repeat left center;
	-webkit-mask-size: cover cover;
	mask-size: cover cover;
}

.project .worktype .macos .icon {
	width: 24px;
	-webkit-mask: url(img/worktype-macos.svg) no-repeat left center;
	mask-image: url(img/worktype-macos.svg) no-repeat left center;
	-webkit-mask-size: cover cover;
	mask-size: cover cover;
}

.project .worktype .ipad .icon {
	width: 19px;
	-webkit-mask: url(img/worktype-ipad.svg) no-repeat left center;
	mask-image: url(img/worktype-ipad.svg) no-repeat left center;
	-webkit-mask-size: cover cover;
	mask-size: cover cover;
}

.project .worktype .android .icon {
	width: 15px;
	-webkit-mask: url(img/worktype-android.svg) no-repeat left center;
	mask-image: url(img/worktype-android.svg) no-repeat left center;
	-webkit-mask-size: cover cover;
	mask-size: cover cover;
}

.project button.pure-button {
	margin-top: 1em;
	padding: 22px 48px;
	font-family: Regular;
	font-size: 17px;
	line-height: 1em;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 4px;
	background: none;
	box-shadow: none;
}

.project a {
	display: inline-block;
	padding: 22px 48px;
	font-family: Medium;
	font-weight: normal;
	font-size: 15px;
	line-height: 1em;
	color: #fff;
	letter-spacing: .05em;
	box-shadow: 0px 2px 4px rgba(0,0,0,.2);
	background: #404040; /* Old browsers */
	background: -moz-linear-gradient(top, #404040 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #404040 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #404040 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	border: none;
	border-radius: 5px;
}

.project .figure-1 {
	margin: 0 1em 0 0;
}

.project .figure-2 {
	margin: 0 0 0 1em;
}

@media screen and (max-width: 64em) {
  .project .figure-1, .project .figure-2 {
    margin: 0;
  }
}


/*.homerow {
	background-color: #F7F8FA;
}

.homerow2 {
	background-color: #EDEFF2;
	background-color: #F7F8FA;
}*/

.medable figure {
	float: right;
	width: 100%;
	padding-top: 79%;
	background: url(img/medable-real.png) top left no-repeat;
	background-size: 100%;
}

.medable { background-color: #1C74D9;  }
.medable h3, { color: #99C9FF; }
.medable .worktype li { color: #99C9FF; }
.medable .worktype .icon { background-color: #99C9FF; }

.project.medable a {
	color: #2349AE;
	background: #EAF3FF; /* Old browsers */
	background: -moz-linear-gradient(top, #EAF3FF 0%, #CAE0FF 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #EAF3FF 0%,#CAE0FF 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #EAF3FF 0%,#CAE0FF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAF3FF', endColorstr='#CAE0FF',GradientType=0 ); /* IE6-9 */
}

.fuzzbox figure {
	float: right;
	width: 100%;
	padding-top: 84%;
	background: url(img/fuzzbox-real.png) top right no-repeat;
	background-size: 100%;
}

.fuzzbox { background-color: #B1B2B5; }
.fuzzbox h3 { color: #1C1C1C; }
.fuzzbox p { color: #333333	; }
.fuzzbox .worktype li { color: #363636; }
.fuzzbox .worktype .icon { background-color: #363636; }

.myoffice figure {
	float: right;
	width: 100%;
	padding-top: 90.5%;
	background: url(img/myoffice-real.png) top left no-repeat;
	background-size: 100%;
}

.myoffice { background-color: #15192B; }
.myoffice h3, .myoffice button.pure-button { color: #6F58F2; }
.myoffice .worktype li { color: #6F58F2; }
.myoffice .worktype .icon { background-color: #6F58F2; }

.apple figure {
	float: right;
	width: 100%;
	padding-top: 73%;
	background: url(img/apple-real.png) top right no-repeat;
	background-size: 100%;
}

.apple { background-color: #fff; }
.apple h3 { color: #000; }
.apple p { color: #000; }
.apple .worktype li { color: #000; }
.apple .worktype .icon { background-color: #000; }
.apple button.pure-button {
	font-family: Medium;
	font-weight: normal;
	font-size: 15px;
	line-height: 1em;
	color: #fff;
	box-shadow: 0px 2px 4px rgba(0,0,0,.2);
	background: #404040; /* Old browsers */
	background: -moz-linear-gradient(top, #404040 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #404040 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #404040 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	border: none;
}

.twitter figure {
	float: right;
	width: 100%;
	padding-top: 73%;
	background: url(img/twtr-real.png) top right no-repeat;
	background-size: 100%;
}

.twitter { background-color: #1C99E6; }
.twitter h3, .twitter button.pure-button { color: #fff; }
.twitter p { color: #fff; }
.twitter .worktype li { color: #8CCDFF; }
.twitter .worktype .icon { background-color: #8CCDFF; }

.pixelboard figure {
	float: right;
	width: 100%;
	padding-top: 73%;
	background: url(img/pixelboard-real.png) top left no-repeat;
	background-size: 100%;
}

.pixelboard { background-color: #9F358A; }
.pixelboard h3 { color: #FBC065; }
.pixelboard p { color: #fff; }
.pixelboard .worktype li { color: #FBC065; }
.pixelboard .worktype .icon { background-color: #FBC065; }
.project.pixelboard a {
	color: #9F358A;
	background: #ffcc80; /* Old browsers */
	background: -moz-linear-gradient(top, #ffcc80 0%, #ffb84c 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffcc80 0%,#ffb84c 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffcc80 0%,#ffb84c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc80', endColorstr='#ffb84c',GradientType=0 ); /* IE6-9 */
}


.lululemon figure {
	float: right;
	width: 100%;
	padding-top: 62%;
	background: url(img/lululemon-real.png) top left no-repeat;
	background-size: 100%;
}

.lululemon { background-color: #918652; background-color: #EFE8CF; }
.lululemon h3, .lululemon button.pure-button { color: #631248	; }
.lululemon p, .lululemon li { color: #6E6434; }
.lululemon .worktype li { color: #8C876C; }
.lululemon .worktype .icon { background-color: #8C876C; }

.stockx figure {
	float: right;
	width: 100%;
	padding-top: 88%;
	background: url(img/stockx-real.png) top right no-repeat;
	background-size: 100%;
}

.stockx { background-color: #2B2B2B; }
.stockx h3, .stockx button.pure-button { color: #00BCE2; }
.stockx p { color: #fff; }
.stockx .worktype li { color: #737373; }
.stockx .worktype .icon { background-color: #737373; }
.project.stockx a {
	color: #2B2B2B;
	background: #9EF0A0; /* Old browsers */
	background: -moz-linear-gradient(top, #9EF0A0 0%, #66CC68 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #9EF0A0 0%,#66CC68 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #9EF0A0 0%,#66CC68 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9EF0A0', endColorstr='#66CC68',GradientType=0 ); /* IE6-9 */
}

.dcp figure {
	float: right;
	width: 100%;
	padding-top: 61.5%;
	background: url(img/dcp-real.png) top left no-repeat;
	background-size: 100%;
}

.dcp { background-color: #48CFC4; background-color: #B4DEDA; }
.dcp h3, .dcp button.pure-button { color: #161A1C; }
.dcp p { color: #161A1C; }
.dcp .worktype li { color: #31948A	; }
.dcp .worktype .icon { background-color: #31948A; }

.droplr figure {
	float: right;
	width: 100%;
	padding-top: 59.5%;
	background: url(img/droplr-real.png) top right no-repeat;
	background-size: 100%;
}

.droplr { background-color: #48CFC4; background-color: #D5DADA; }
.droplr h3, .dcp button.pure-button { color: #5B636F; }
.droplr p { color: #5B636F; }
.droplr .worktype li { color: #5B636F	; }
.droplr .worktype .icon { background-color: #5B636F; }

.donna figure {
	float: right;
	width: 100%;
	padding-top: 83%;
	background: url(img/donna-real.png) top left no-repeat;
	background-size: 100%;
}

.donna { background-color: #7A726A; background-color: #7A726A; }
.donna h3, .donna button.pure-button { color: #3A3836	; }
.donna p { color: #F7F7F5; }
.donna .worktype li { color: #B8B2A5	; }
.donna .worktype .icon { background-color: #CCC7BC; }

.ancestry figure {
	float: right;
	width: 100%;
	padding-top: 69%;
	background: url(img/ancestry-real.png) top right no-repeat;
	background-size: 100%;
}

.ancestry { background-color: #3B3836; }
.ancestry h3, .ancestry p.desc, .ancestry button.pure-button { color: #d5c4a1; }
.ancestry .pure-button { border-color: #d5c4a1 !important; }
.ancestry .worktype li { color: #9AA68D; }
.ancestry .worktype .icon { background-color: #9AA68D; }

.profile div.img {
	display: block;
	margin: -2em auto 3em;
	max-width: 100%;
	padding-top: 59%;
	background: url(img/profile-3.jpg) no-repeat top;
	background-size: cover;
}

.wpforms-form label {
	margin-top: 1.5em !important;
	margin-bottom: 1.5em;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
	font-family: Light !important;
	font-weight: normal !important;
	font-size: 22px !important;
	line-height: 1.4em !important;
	color: #656D78;
}

.wpforms-form label.wpforms-field-sublabel {
	margin-top: 0 !important;
	margin-bottom: 1.5em;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
	font-family: Light !important;
	font-weight: normal !important;
	font-size: 16px !important;
	line-height: 1.4em !important;
	color: #656D78;
}

.wpforms-form label.wpforms-error {
	margin-top: 0 !important;
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea{
	padding-top: 25px !important;
	padding-bottom: 25px !important;
	font-family: Regular !important;
	font-size: 18px !important;
	color: #1A1D20 !important;
	background: #F5F5F5 !important;
	border: none !important;
	border-radius: 5px !important;
	resize: none !important;
}

.wpforms-form button[type="submit"] {
	margin-top: 2em !important;
	padding: 18px 48px !important;
	font-family: mn !important;
	font-size: 16px !important;
	letter-spacing: .01em !important;
	font-weight: 600 !important;
	line-height: 1em !important;
	color: #fff !important;
	border-radius: 5px !important;
	border: none !important;
	background: rgba(55,156,254,1) !important;
	background: -moz-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%) !important;
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(55,156,254,1)), color-stop(100%, rgba(41,124,207,1))) !important;
	background: -webkit-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%) !important;
	background: -o-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%) !important;
	background: -ms-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%) !important;
	background: linear-gradient(to bottom, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#379cfe', endColorstr='#297ccf', GradientType=0 ) !important;
	box-shadow: 0px 2px 4px rgba(0,0,0,.2) !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

.wpforms-form button[type="submit"]:hover {
	box-shadow: 0px 2px 6px rgba(0,0,0,.4) !important;
}

footer#footer {
	background-color: #1A1D20;
	padding-bottom: 2em;
}

form.post-password-form {
	display: block;
	max-width: 1300px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 3em 1em !important;
}

form.post-password-form p {
	max-width: 700px;
}

form.post-password-form label {
	color: #1A1D20;
}

form.post-password-form input[type="password"] {
	display: block;
	margin: .2em 0 2em !important;
	padding: 10px 15px !important;
	font-family: Regular !important;
	font-size: 18px !important;
	color: #1A1D20 !important;
	background: #F5F5F5 !important;
	border: none !important;
	border-radius: 5px !important;
	resize: none !important;
	width: 85%;
	max-width: 350px !important;
}

form.post-password-form input[type="submit"] {
	padding: 16px 44px;
	font-family: mn !important;
	font-weight: 600 !important;
	font-size: 16px;
	letter-spacing: .01em;
	line-height: 1em;
	color: #fff;
	letter-spacing: .02em;
	border-radius: 4px;
	border: none !important;
	background: rgba(55,156,254,1);
	background: -moz-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(55,156,254,1)), color-stop(100%, rgba(41,124,207,1)));
	background: -webkit-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -o-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: -ms-linear-gradient(top, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	background: linear-gradient(to bottom, rgba(55,156,254,1) 0%, rgba(41,124,207,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#379cfe', endColorstr='#297ccf', GradientType=0 );
	box-shadow: 0px 2px 4px rgba(0,0,0,.2);
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

@media screen and (max-width: 80em) {
  form.post-password-form {
    margin: 0 2em;
	padding-top: 0em !important;
  }
}

@media screen and (max-width: 35.5em) {
  form.post-password-form {
    margin: 0 .5em;
  }
}