@font-face {font-family:'Kefa'; src:url('../fonts/kefa.eot#') format('eot'), url('../fonts/kefa.ttf') format('truetype'), url('../fonts/kefa.otf') format('opentype'), url('../fonts/kefa.svg#Kefa') format('svg'); font-weight:normal; font-style:normal;}
.hide-text {text-indent:100%; white-space:nowrap; overflow:hidden;}

.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}

a:link, a:visited {text-decoration:none; font-weight:bold; color:#122; text-shadow:1px 1px 1px #67A8BD; -webkit-transition:color 0.15s ease-out; -moz-transition:color 0.15s ease-out; -o-transition:color 0.15s ease-out; transition:color 0.15s ease-out}
a:hover, a:focus {color:#DBDAD5;}
a:active {color:#49606B;}

h1, h2, h3, h4, h5, h6, header {font-family: "Kefa";}

h1 {font-size:2em;}
html, body {margin:0; padding:0; border:0; height:100%; width:100%; min-width:920px; font-family:"Helveitca Neue", Helveitca, Arial, sans-serif; font-size: 1em; line-height:1.5em; color: #112222;}
body:before {content:""; position:fixed; left:0; width:100%; z-index:100;
    -webkit-box-shadow:0px 0px 10px #122;
       -moz-box-shadow:0px 0px 10px #122;
            box-shadow:0px 0px 10px #122;
    top:-10px;
    height:10px
}
body {background: url("../images/bg.png");}
header {background-color:#49606B; width:100%;
    -webkit-box-shadow:inset 0 -10px 10px -10px #122;
       -moz-box-shadow:inset 0 -10px 10px -10px #122;
            box-shadow:inset 0 -10px 10px -10px #122;
}
header nav {width:840px; position:relative; margin:0 auto;}
header nav img {margin: 10px 0 5px 5px;}
header nav ul {list-style-type:none; margin:0; padding:0;font-size:1.3em; letter-spacing:0.1em; position:absolute; right:5px; bottom:10px;}
header nav li {display:inline;}
header nav li:first-child a {padding-left:0;}
header nav li:last-child a {padding-right:0;}
header nav li a {padding:0 1em;
    -webkit-transition:color 0.15s ease-out;
       -moz-transition:color 0.15s ease-out;
         -o-transition:color 0.15s ease-out;
            transition:color 0.15s ease-out;
}
nav a, nav a:link, nav a:visited {color:#FFF; text-shadow:-2px 1px 1px #122;}
nav a:hover, nav a:focus {color:#67A8BD;}
nav a:active {color:#122;}

section {
    width: 860px;
    margin: 0 auto;
    padding: 50px 0;
}
body > section > article {
    width: 820px;
    position: relative;
    top: 0;
    padding: 0;
    -moz-border-radius: 20px;
         border-radius: 20px;
    background-image: url("../images/body.png");
    -webkit-box-shadow: 0px 10px 20px -10px #122;
       -moz-box-shadow: 0px 10px 20px -10px #122;
            box-shadow: 0px 10px 20px -10px #122;
    -webkit-transition: opacity 0.25s ease-out, max-height 0s linear 0.25s, padding 0s linear 0.25s;
       -moz-transition: opacity 0.25s ease-out, max-height 0s linear 0.25s, padding 0s linear 0.25s;
         -o-transition: opacity 0.25s ease-out, max-height 0s linear 0.25s, padding 0s linear 0.25s;
            transition: opacity 0.25s ease-out, max-height 0s linear 0.25s, padding 0s linear 0.25s;
    opacity:0; max-height:0px; overflow:hidden;
}
body > section > article:target {
    padding: 20px 20px 0 20px;
    -webkit-transition: opacity 0.25s ease-in 0.25s, max-height 0s linear 0.25s, padding 0s linear 0.25s;
       -moz-transition: opacity 0.25s ease-in 0.25s, max-height 0s linear 0.25s, padding 0s linear 0.25s;
         -o-transition: opacity 0.25s ease-in 0.25s, max-height 0s linear 0.25s, padding 0s linear 0.25s;
            transition: opacity 0.25s ease-in 0.25s, max-height 0s linear 0.25s, padding 0s linear 0.25s;
    max-height:9999em; opacity:1;
}
article > *:first-child {
    margin-top:0;
}
article > h1 {
    text-shadow:2px 1px 1px #DBDAD5;
    text-align: right;
}
article h2 {
    text-shadow:1px 1px 1px #DBDAD5;
}
article#WORK > ul {
    list-style-type: none;
    margin:0; padding:0;
}
article#WORK > ul > li {
    display: inline-block;
    padding: 0 20px 10px 0;
    margin: 0;
}
article#WORK > ul > li:nth-child(6n) {
    padding-right: 0;
}
article#WORK > ul > li > a, article#WORK > ul > li > a > img {
    display: block;
}
article#WORK > ul > li > a > img {
    -moz-border-radius: 10px;
         border-radius: 10px;
    -webkit-box-shadow: 0px 0px 6px #122;
       -moz-box-shadow: 0px 0px 6px #122;
            box-shadow: 0px 0px 6px #122;
}
article > form {
    padding-top: 3em;
}
article > form:first-of-type {
    padding-top: 0;
}
article form ul {
    list-style-type: none;
    margin:0; padding:0;
}
article form ul li {
    padding: 0.25em 0;
    font-size: 0.9em;
}
article form ul li:first-child {
    float: right;
    text-align: right;
}
article form ul li:first-child textarea {
    width: 38em;
    height: 17em;
}
article form ul li:last-child {
    display: none;
}
article form ul li label {
    display: inline-block;
    width: 10em;
}
article form ul li input, article form ul li select, article form ul li textarea {
    padding: 0.3em;
}
article form ul li select {
    font-size: 1.1em;
    width: 14.6em;
}
article form ul li input {
    text-align: center;
}
article form ul li input:only-of-type {
    width: 20em;
    text-align: left;
}
article form ul li input[type="submit"] {
    font-size: 1.1em;
    width: 6em;
    text-align: center;
}
article form ul li label.req:after {
    content: " *";
    color: red;
    font-size: 0.75em;
    font-weight: 200;
}
#footer {
    text-align: center;
    width: 100%;
    font-size: 0.5em;
}
footer.sticky {
    position: absolute;
    bottom: 0;
}
article > *:last-child {
    margin-bottom:0 !important;
    padding-bottom:80px !important;
    background:url("../images/portrait.svg") bottom right no-repeat;
}
/*
    #FFF
    #DBDAD5
    #67A8BD
    #8199A3
    #49606B
    #122
*/