/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}

body{
margin:0
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
display:block
}

audio,canvas,progress,video{
display:inline-block;
vertical-align:baseline
}

audio:not([controls]){
display:none;
height:0
}

[hidden],template{
display:none
}

a{
background:transparent
}

a:active,a:hover{
outline:0
}

abbr[title]{
border-bottom:1px dotted
}

b,strong{
font-weight:bold
}

dfn{
font-style:italic
}

h1{
font-size:2em;
font-family: 'Oswald', sans-serif;
margin:0.67em 0
}

h1 a{
color: #00a5e5;
text-decoration:none;
}

mark{
background:#ff0;
color:#000
}

small{
font-size:80%
}

.attrib{
font-size:65%;
font-family:Verdana, Geneva, sans-serif;
}

sub,sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}

sup{
top:-0.5em
}

sub{
bottom:-0.25em
}

img{
border:0
}

svg:not(:root){
overflow:hidden
}

figure{
margin:1em 40px
}

hr{
box-sizing:content-box;
height:0
}

pre{
overflow:auto
}

code,kbd,pre,samp{
font-family:monospace,monospace;
font-size:1em
}

button,input,optgroup,select,textarea{
color:inherit;
font:inherit;
margin:0
}

button{
overflow:visible
}

button,select{
text-transform:none
}

button,html input[type="button"],input[type="reset"],input[type="submit"]{
-webkit-appearance:button;
cursor:pointer
}

button[disabled],html input[disabled]{
cursor:default
}

button::-moz-focus-inner,input::-moz-focus-inner{
border:0;
padding:0
}

input{
line-height:normal
}

input[type="checkbox"],input[type="radio"]{
box-sizing:border-box;
padding:0
}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{
height:auto
}

input[type="search"]{
-webkit-appearance:textfield;
box-sizing:content-box
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
-webkit-appearance:none
}

fieldset{
border:1px solid #c0c0c0;
margin:0 2px;
padding:0.35em 0.625em 0.75em
}

legend{
border:0;
padding:0
}

textarea{
overflow:auto
}

optgroup{
font-weight:bold
}

table{
border-collapse:collapse;
border-spacing:0
}

td,th{
padding:0
}

*{
box-sizing:border-box
}

html,body,.app{
position:relative;
height:100%
}

body{
font-family:"HelveticaNeue";
font-weight:300
}

h1,h2,h3,h4,h5,h6{
margin:0
}

html,body{
height:100%
}

body{
font-family:"Georgia","Times","Times New Roman",serif;
color:#2d3642
}

header{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
height:100px
}

@media screen and (max-width:500px){
header{
height:auto;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}
}

header h1{
/*width:10rem;*/
width:16rem;
margin:0.3em 0 0 2rem
}

header h1 span{
width:1px;
height:1px;
position:absolute!important;
clip:rect(1px,1px,1px,1px);
overflow:hidden
}

@media screen and (max-width:500px){
header h1{
margin-left:0;
margin-right:0
}
}

header nav{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
margin:0 2em 0 0;
font-family: 'Oswald', sans-serif;
}

header nav a{
position:relative;
margin:0 0 0 1em;
padding:0.15em 0.25em;
text-transform:uppercase;
font-size:1rem;
letter-spacing:1px;
color:#2d3642;
text-decoration:none;
background-color:transparent;
-webkit-transition:300ms background-color;
transition:300ms background-color
}

header nav a:hover:after{
content:'';
position:absolute;
top:100%;
right:0;
left:0;
height:0.2em;
margin:-1px 0 0 0;
background-color:#00a5e5
}

@media screen and (max-width:500px){
header nav{
margin:1rem 0 1rem 0;
width:100%;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}


}

.content a:not(.plain){
position:relative;
text-decoration:none;
color:#2d3642;
font-weight:bold
}

.content a:not(.plain):visited{
color:#2d3642
}

.content a:not(.plain):hover{
color:#00a5e5
}

.content-centered{
margin:0 auto;
padding:1em
}

@media screen and (min-width:800px){
.content-centered{
width:800px
}


}

.portfolio-detail{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
width:75%;
/*Original height:400px;*/
height:500px;
margin:1rem auto 2rem auto;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}

.portfolio-detail.active{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}

@media screen and (max-width:800px){
.portfolio-detail{
width:90%
}


}

@media screen and (max-width:500px){
.portfolio-detail{
width:90%;
height:auto;
margin-top:0
}


}

.portfolio-detail-primary{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
padding:1rem 3rem 1rem 1rem
}

@media screen and (max-width:500px){
.portfolio-detail-primary{
width:100%;
margin:1rem 0 1rem 0;
padding:0.25rem
}


}

.portfolio-detail-primary img{
max-width:100%
}

.portfolio-detail-secondary{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
width:35%
}

@media screen and (max-width:500px){
.portfolio-detail-secondary{
width:100%;
margin:1rem 0 0 0
}


}

.portfolio-detail-secondary h2{
margin:0 0 0.5em 0;
font-family:'Oswald';
text-transform:uppercase;
font-size:1.3rem;
letter-spacing:1px;
font-weight:300;
color:/*#d6bf36*/#00a5e5;
}

.portfolio-detail-secondary .description{
margin:0 0 1.2rem 0;
line-height:1.5
}

.portfolio-detail-secondary .buy{
font-size:1.15em;
font-style:italic
}

.portfolio-detail-secondary .views button{
display:inline-block;
border:none;
background:#00a5e5;
width:12px;
height:12px;
margin:0 0.5em 0 0;
opacity:0.30
}

.portfolio-detail-secondary .views button.active{
opacity:1
}

.portfolio-detail-secondary .views button:active,.portfolio-detail-secondary .views button:focus{
outline:none
}

.portfolio-grid{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}

.portfolio-grid-item{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
width:200px;
height:200px;
padding:0;
background:none;
background-size:cover;
background-repeat:no-repeat;
border:none;
z-index:1;
overflow:hidden
}

.portfolio-grid-item img{
margin:0;
padding:0;
display:block;
width:100%
}

.portfolio-grid-item:active,.portfolio-grid-item:focus{
outline:none;
z-index:2
}

.portfolio-grid-item:hover{
text-decoration:none
}

.portfolio-grid-item:hover:after{
display:none
}

[data-page="about"] img{
max-width:100%
}

@media screen and (max-width:500px){
[data-page="about"] .greeting{
display:none
}


}

[data-page="about"] .greeting-stacked{
display:none
}

@media screen and (max-width:500px){
[data-page="about"] .greeting-stacked{
display:block
}


}

[data-page="about"] p{
font-size:1.4em;
line-height:1.4
}