/*
Theme Name: Etwas
Version: 1.0
Description: A minimalist theme for portfolios
Author: Drew McKinney
Text Domain: etwas
Tags: simple, no-features, minimal, white
*/

*{border:none;outline:none;font-family: 'Lato',monospace;color:#17191a;line-height: 1.52;}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline;}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:100%}button,input,select,textarea{-webkit-appearance:none;border-radius:0;font-size:100%;line-height:normal!important;margin:0;vertical-align:middle}html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;}img#wpstats{border:none;height:0;overflow:hidden;padding:0;width:0}.ir{background-repeat:no-repeat;direction:ltr;display:block;overflow:hidden;text-align:left;text-indent:-9999em}.hidden{display:none!important;visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{line-height:1.2}a:active,a:hover{outline:0}b,strong{font-weight:500}em{font-style:italic}li{margin-left: 1em;}small{font-size:100%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{-ms-interpolation-mode:bicubic;border:0;height:auto;vertical-align:middle}svg:not(:root){overflow:hidden}legend{border:0;margin-left:-7px;padding:0;white-space:normal}button,input{line-height:1}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;overflow:visible;vertical-align:top}button[disabled],input[disabled]{}input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type=search]{-moz-box-sizing:content-box;-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,a{text-decoration:none}th,td{text-align:left;vertical-align:top}
@media print{*{background:transparent!important;color:#000!important;text-shadow:none!important}body{background:#fff;color:#000;font:12pt Georgia, "Times New Roman", Times, serif;line-height:1.3}section.post-content a:after{content:" (" attr(href) ")"}tr,img{page-break-inside:avoid}img{border:0;max-width:100%!important}nav,aside{display:none}}



::-moz-selection { background: rgba(23,25,26,.05); text-shadow: none; }
::selection { background: rgba(23,25,26,.05); text-shadow: none; }


html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {padding-top: 10px; text-align: center; font-size: 18px; font-weight: 300; background: #FFF; }
img {max-width: 100%;}
img.grid-image{max-width: 49%;}
img.threecol-image{max-width: 28%; margin-right: 8px; display: inline-block;}
img.twocol-image{max-width: 47%; margin-right: 5px;}


section {text-align: left; max-width: 740px; margin: 0em 1em 0em 1em; }
section.bio-in-brief {margin-bottom: 3em;}
section.bio-in-brief h1{font-weight: 500; font-size: 18px; line-height: 30px; margin-top: 24px}
section.bio-in-brief p{margin-bottom: 1.5em; font-size: 18px;}
section.bio-in-brief img.bio-pic {float: right ; display: block;  margin: 0 0 16px 16px; width: 152px;}



section.lean-ux-explained {background: #F9FBFC; max-width: 100%; margin: 0; padding: 16px; padding-bottom: 24px; border-bottom: thin solid #DDD; border-top: thin solid #DDD;}
div.process-block {clear: both; padding: 10px;}
section.lean-ux-explained p {max-width: 740px; display: block; margin: 0 auto;}
img.process-image-mobile, img.process-image-desktop {display: block; margin: 20px auto 20px auto;}

div.header_wrapper {background: white; height: 102px; margin-top: -25px; padding-top: 20px;}
div.body_wrapper {padding-top: 1em; background: #FFF; width: 100%; margin-top: -45px;}
header {background: white;}
footer {height: 100px;}
footer p { color: #a0a9ae; font-size: .85em; }

h1.branding {font-weight: 300; font-size: 28px; display: block; color: gray;}

nav li, .menu li, #pagi a { display: inline-block; margin-right: 14px; margin-left: -4px; }
	nav li a, .menu li a, #pagi a { font-weight: 300; padding: 5px; text-decoration: none; display: inline-block; }
	nav li a:hover, .menu li a:hover, #pagi a:hover { text-decoration: underline; }
	nav li.current_page_item a, nav li.current-menu-item a, nav li.current-post-ancestor a, nav li.current-menu-parent a, nav li.current-post-parent a { color: #007FCE; }
.logo img { max-width: 130px; max-height: 30px; }

p, ul, ol {margin-bottom: 1em; margin-top: 1em; font-weight: 500;}
article p, ul, ol { line-height: 1.7em}
h1, h2, h3, h4, h5, nav, .menu, .gallery { font-weight: 500; margin: .2em 0; font-size: 24px; }
nav { margin-left: -5px; display: block; }

.social-icons {height: 11px; width: 140px; float: right; padding-top: 6px;}
.social-icons .social-icon {width: 11px; height: 11px; margin-left: 10px; float: right;}
.social-icons .social-icon a {width: 11px; height: 11px; display: block; background-size: inherit;}
.social-icons .social-icon a:hover {border-bottom: 2px solid #007FB6;}

.social-icons .social-icon a.linkedin {background: url('/linkedin.svg'); background-size: inherit;}
.social-icons .social-icon a.twitter {background: url('/twitter.svg'); background-size: inherit;}
.social-icons .social-icon a.dribbble {background: url('/dribbble.svg'); background-size: inherit;}
.social-icons .social-icon a.email {background: url('/email.svg'); background-size: inherit;}


small, article p.wp-caption-text, article .wp-caption-text { font-size: .85em; color: #7E7E7E; font-weight: 300; }
a { color: #007FCE; font-size: inherit; font-weight: inherit; text-decoration: none;}
a:hover {  text-decoration: underline; }


strong, b { font-weight: 700; }

h1, h2, h3, h4 {margin-bottom: 32px; margin-top: 56px; line-height: 1.3em;}
h1, h2 { font-size: 24px; font-weight: 700; }
h1:first-child {font-size: 28px; margin: 16px 0 16px 0;}
h3 {font-size: 24px; font-weight: 700;  }
h4 {font-size: 24px; font-weight: 700;  }
h1 a, h2 a { text-decoration: none;}


nav {width: 100px; display: inline-block; float: right;}
nav.menu ul {margin-top: 0; margin-bottom:0; margin-left: 0; }
nav.menu ul li {font-size: 1em;}
nav.menu ul.menu-items {display: inline-block;}
nav.menu ul li a {font-weight: 400;}

div.title { font-size: 18px; width: 160px; margin-top: 8px;  display: inline-block;}

div.title a{color: #333;}
h1.post-title, h2.post-title {margin-top: 1em; font-weight: 700;}
h3.section-head {margin-top: 2em; border-bottom: 1px solid #ccc;  padding-bottom: 5px;}


.caption {font-size: 14px; color: #888; text-align: center; margin-top: 0px; margin-bottom: 48px; display: block; }

article::after { content: "· · ·"; text-align: center; display: block; margin: 2em 0 1em 0; color: #a0a9ae; font-size: .85em; }
/*hr::after { content: "· · ·"; text-align: center; display: block; margin: 2em 0 2em 0; color: #a0a9ae; font-size: .85em; }*/

img { max-width: 100%; margin: 1em 0 1em 0; display: block; }
blockquote { margin-left: 32px; font-style: normal; margin-bottom: 32px;}
blockquote p, article blockquote p * { }
blockquote p strong { font-weight: 100;}
blockquote cite { display: block; margin: .5em 0; color: #666; font-weight: 500; font-size: .85em; font-style: normal; text-transform: uppercase;}
blockquote cite::before { content: "—"; }
article iframe { width: 100%!important; max-width:100% !important; max-height: 394px; }

ul, article ol { margin-left: 1em; }
ul li { list-style: solid-circle; margin-bottom: .5em; }
ol li { list-style: decimal-leading-zero; margin-bottom: .5em; }

.form-body {font-size: 1em; width: 320px; margin: auto;}
.form-body input, textarea { display: block; border: 1px solid #a0a9ae; padding: 8px; margin-bottom: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%;  transition: border .2s; text-decoration: none; }
.form-body input:focus, input:hover, textarea:focus, textarea:hover { border: 1px solid #007FCE; }
.form-body input[type=submit] { width: 120px; height: 44px; background: #007FB6;}


.project-tile {
			width:100%;
			color: #17191a;
      padding: 0px;
      margin-bottom: 40px;
			display: block;
			border-color: #DDD;
}

.project-tile .image-container {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	padding: 0px 8px;
	border: thin solid;
	border-color: inherit;
}

.project-tile:hover {
	text-decoration: none;
	border-color: #AAA;
}

.project-tile .project-description {
	display: inline-block;

}
.project-tile:hover .project-description {
	text-decoration: underline;
}


.project-tile img {
	align-self: flex-end;
	display: block;
	margin: 0px;
}

/*.project-tile {max-width: 344px; display: inline-block; margin-bottom: 30px;}
.project-tile:nth-child(even) {margin: 0 0 0 44px;}

.project-tile .project-title {font-size: 18px; font-weight: 700; display: block; margin: 1em 0 .5em 0;}
.project-tile .project-description {margin-top: -10px; margin-bottom: 20px; font-size: 16px; font-weight: 400; color: #666;}
.project-tile img {display: block; } */

.demo-video {display: block; float: none; margin: auto;}

.button { text-align: center; padding: 9px 30px; margin: 1em auto transition: background .2s; font-weight: 700; }


button, input[type=submit] { background: #17191a; color: #fff; padding: 10px 30px; font-weight: 700; margin-bottom: 5px; width: 100%; transition: background .2s; cursor: pointer; border: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}
button, input[type=submit]:hover {background: #00567C;}
button:hover, .button:hover { background: #a0a9ae; color: #fff; }
button.button { border: none !important; }

::-webkit-input-placeholder { color: #a0a9ae; }
::-moz-placeholder { color: #a0a9ae; }
:-ms-input-placeholder { color: #a0a9ae; }

.gallery { margin: 0 auto 3em auto; }
.gallery-item { float: left; text-align: center; width: 33%; }
.gallery img { }
.gallery-caption { }



@media screen and (min-width: 400px){

	.demo-video {border: thin solid black; float: right; margin-left: 2em;}

	.project-tile .project-title {font-size: 1.3em;}
	/*.project-tile .image-container {height: 202px;}*/


}

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

	img.process-image-desktop {display: none;}
	img.process-image-mobile {display: block;}


}
@media screen and (min-width: 500px){

	img.process-image-desktop {display: block;}
	img.process-image-mobile {display: none;}
	section.lean-ux-explained {margin: 2em 0 0 0;}

	.project-tile {margin-bottom: 80px;}

	section.bio-in-brief img.bio-pic { margin: 0 0 16px 32px;  width: 160px;}
	.project-tile .image-container {padding: 0 16px;}

	/*.project-tile .image-container {height: 232px;}*/

	div.title { font-size: 24px; margin-top: 4px; font-weight: 500; width: 200px;}


	/*img.right-flush{display: block; float: none; width: 100%; margin-left: 0px;}*/

}

@media screen and (min-width: 760px) {
	section {margin: auto;}
	section.lean-ux-explained p {padding: .5em 1em 0em 1em;}
	section.lean-ux-explained { margin: 0em;}

	input { width: 60%; }
	button, .button, input[type=submit] { width: auto; }

	img.twocol-image{display: inline-block; max-width: 47%; margin-right: 16px;}
	img.twocol-image-left{display: inline-block; max-width: 359px; margin-right: 16px;}
	img.twocol-image-right{display: inline-block; max-width: 359px}
	img.threecol-image{display: inline-block; max-width: 30%; margin-right: 16px;}
	img.right-flush{display: block; float: right; width: 320px; margin-left: 8px;}

	/*.project-tile:nth-child(even), .project-tile:nth-child(odd) {margin: 0 0 0 0px; float: none; display: block;}*/
}