/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family: Domine, serif;}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-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::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}

/* ==========================================================================
   Main styles
   ========================================================================== */
html,button,input,select,textarea{color:#000}
body{font-size:16px;font-family:Domine, serif;font-weight:400;line-height:1.5;text-align:center;background:url(../img/bg.png);}

a{color:#000;}
a:hover{text-decoration:none;}

hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
img{vertical-align:middle}
fieldset{border:0;margin:0;padding:0}
textarea{resize:vertical}

.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}
.cf{*zoom:1}

/* ==========================================================================
   Website's custom styles
   ========================================================================== */

@font-face {font-family: 'steelfishregular';src: url('../fonts/steelfish_rg-webfont.eot');src: url('../fonts/steelfish_rg-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/steelfish_rg-webfont.woff') format('woff'),url('../fonts/steelfish_rg-webfont.ttf') format('truetype'),url('../fonts/steelfish_rg-webfont.svg#steelfishregular') format('svg');font-weight: normal;font-style: normal;}


.loader {
  height: 5px;
  background: #333;
}
.paused .loader{
  -webkit-animation: loader 1.8s;
     -moz-animation: loader 1.8s;
       -o-animation: loader 1.8s;
          animation: loader 1.8s;
}
.paused h1,
.paused .logo,
.paused .scribble,
.paused .phrase,
.paused nav,
.paused section,
.paused .sidebar,
.paused .project-details
{
  -webkit-animation-play-state: paused;
       -o-animation-play-state: paused;
     -moz-animation-play-state: paused;
          animation-play-state: paused;
}
.fadeOut{
  -webkit-animation: fadeOut 1s both;
     -moz-animation: fadeOut 1s both;
       -o-animation: fadeOut 1s both;
          animation: fadeOut 1s both;
}
em {
	font-style:normal;
	color: #999;
}
h1{
  font-size:6.563em;
  color:#333;
  text-transform:uppercase;
  line-height:normal;
  margin: 0.667em 0 0.567em;
  font-family:'steelfishregular', sans-serif;
  -webkit-animation:rise 1s both;
       -o-animation:rise 1s both;
     -moz-animation:rise 1s both;
          animation:rise 1s both;
}
h2{

  font-size: 3.363em;
  font-weight:normal;
  margin:1.2em 0;

  text-transform: normal;
}
h3{
  font-size: 2.938em;
  color: #999;
  font-weight:normal;
  margin: 2.419em 0 1.129em;
  font-family: 'steelfishregular', sans-serif;
  text-transform: uppercase;
}
p{
  max-width: 630px;
  margin: 1em auto;
  padding: 0 1em;
}
blockquote{
  background:url(../img/quote.png) no-repeat 8px 5px;
  max-width:560px;
  padding: 0 50px;
  color:#878787;
  margin: 8.750em auto;
}
blockquote .author{
  display:block;
  margin:1.875em 0;
  font-style: normal;
}
dl{
  max-width:845px;
  margin:0 auto 40px;
  padding:0 1em;
}
dt{
  float:left;
  background:url(../img/dot.png) no-repeat 100% 50%;
  width:50%;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  clear:both;
  text-align:right;
  padding:8px 4.375em 8px 0;
  font-weight: 700;
}
dd{
  float:left;
  border-left:2px solid #ededee;
  width:50%;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  text-align:left;
  padding:8px 0 8px 4.375em;
  margin:0 0 0 -6px;
}
dd p:first-child{
  margin-top:0;
}
dd p{
  width:auto;
  padding: 0;
}
input[type="text"], textarea{
  width:12.857em;
  background: #e8e8e8;
  border:none;
  padding:5px;
  margin: 0 0 10px 0;
}
textarea{
  height:120px;
}
label{
  width: 12.057em;
  font-weight: 700;
  font-size:0.875em;
  margin: 0 5px 10px 0;
}
form button{
  font-size:0.875em;
  font-weight: 700;
  color:#fff;
  border:none;
  text-transform:uppercase;
  background:url(../img/button.png);
  width:136px;
  line-height:40px;
  padding:0 0 4px;
}
form button:hover{
  background-position:0 -47px;
}
.button{
  font-size:0.875em;
  font-weight: 700;
  color:#fff;
  border:none;
  text-transform:uppercase;
  background:url(../img/button.png);
  width:136px;
  line-height:40px;
  padding: 14px 32px;
  margin: 0 auto 30px;
  text-decoration: none;
}
.button:hover{
  background-position:0 -47px;
}
.buttonL{
  font-size:0.875em;
  font-weight: 700;
  color:#fff;
  border:none;
  text-transform:uppercase;
  background:url(../img/button.png);
  width:136px;
  line-height:40px;
  padding: 11px 20px;
  margin: 0 auto 30px;
  text-decoration: none;
  font-size: .76em;
}
.buttonL:hover{
  background-position:0 -47px;
}
section{
  margin: 10em 0 9.375em;
  -webkit-animation:fadeIn 1s 0.5s both;
       -o-animation:fadeIn 1s 0.5s both;
     -moz-animation:fadeIn 1s 0.5s both;
          animation:fadeIn 1s 0.5s both;
}
section#project{
  margin:0 0 5em;
  clear: both;
}

/* Header styles */

header{
  padding: 6.188em 0 0;
}
.award{
	position: absolute;
	z-index: 100;
	right: 0;
	top: 110px;
	padding: 0;
	margin: 0;
	-webkit-animation: slideRight 0.5s 0.5s both;
	text-align:right;
}
.award2{
	position: absolute;
	z-index: 100;
	right: 0;
	top: 225px;
	padding: 0;
	margin: 0;
	-webkit-animation: slideRight 0.5s 0.5s both;
	text-align:right;
}
.logo{
  background:url(../img/logo.png);
  width:31px;
  height:23px;
  margin:0 auto;
  -webkit-animation:rise 0.5s 0.5s both;
       -o-animation:rise 0.5s 0.5s both;
     -moz-animation:rise 0.5s 0.5s both;
          animation:rise 0.5s 0.5s both;
}
.info{

  position:relative;
  width: 196px;
  height: 303px;
  margin:0 auto 2.813em;
}
.info ul{
  padding:8px 0 5px;
  margin:0;
  list-style:none;
  line-height:29px;
  font-size: 14px;
  z-index:2;
  position:relative;
}
.info li{
  text-decoration:line-through;
}
.cssanimations .info li{
  opacity: 0;
  text-decoration: none;
}
.info li.rise{
  -webkit-animation:rise 0.5s both;
       -o-animation:rise 0.5s both;
     -moz-animation:rise 0.5s both;
          animation:rise 0.5s both;
}
.info .scribble{
  background:url(../img/scribble.png);
  width:186px;
  height:100%;
  position:absolute;
  top:0;
  left:50%;
  margin:0 0 0 -93px;
  z-index:1;
  overflow: hidden;
  -webkit-animation:show 0.5s 4.5s both;
       -o-animation:show 0.5s 4.5s both;
     -moz-animation:show 0.5s 4.5s both;
          animation:show 0.5s 4.5s both;
}
.phrase{
  font-size:2.063em;
  color:#333;
  font-weight:normal;
  display: block;
  margin: 0 0 115px;
  -webkit-animation:rise 1s 2s both;
       -o-animation:rise 1s 2s both;
     -moz-animation:rise 1s 2s both;
          animation:rise 1s 2s both;
}
nav{
  background:url(../img/menu.png) repeat-x;
  line-height:59px;
  height:59px;
  font-size: 2.2em;
  top:0;
  width:100%;
  z-index: 100;
  -webkit-animation:fadeIn 0.5s 2.5s both;
  -o-animation:fadeIn 0.5s 2.5s both;
  -moz-animation:fadeIn 0.5s 2.5s both;
  animation:fadeIn 0.5s 2.5s both;
}
nav.stick{
  position: fixed;
  top: -3px;
}
nav ul{
  padding:0;
  margin:0;
}
nav li{
  display:inline-block;
  font-family:'steelfishregular', sans-serif;
}
nav li a{
  color: #fff;
  text-decoration:none;
  display:block;
  padding: 0 0.880em;
  text-transform:uppercase;
}
nav li a:hover{
  color:#ccc;
}
nav li.active a{
  /* text-decoration: underline; */
  color: #ccc;
}

.nav-control {
  display:none;
  padding:7px 20px;
  margin: 4px 0 -4px;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
  background: none;
  border: 0;
  border-color:#040404 #040404 #000000;
  background:#2a2a2a url(../img/logo-alt.png) no-repeat 50% 50%;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}
.nav-control:hover,
.nav-control:active,
.nav-control.active,
.nav-control.disabled,
.nav-control[disabled] {
  background-color:#222;
}

/* Content styles */

.photo{
  position:relative;
  max-width:343px;
  padding: 0 3em;
  margin:8.750em auto 0;
}
.photo img{
  width: 100%;
}
.photo figcaption{
  position:absolute;
  bottom:20px;
  left:0;
  background:#f7f7f7;
  font-size: 0.760em;
  color:#333;
  line-height:normal;
  padding:1.250em;
  line-height: 1.4;
}
#who blockquote{
  margin-top:20px;
}
.cv{
  background:url(../img/cv.png) no-repeat 50% 20px;
  padding: 96px 0 30px;
  display:block;
  text-align:center;
  display:inline-block;
}
.mid{ margin: 3em auto 0;}
.portfolio{
  padding:0;
  margin:45px auto;
  list-style:none;
  max-width:1020px;
}
.portfolio li{
  width: 32.333%;
  margin: 0 0.5% 1.5%;
  float: left;
  position:relative;
}






.portfolio li a{
  display:block;

}
.portfolio img{
  display: block;
  width: 100%;
}
.portfolio li .hover{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color:#fff;
  font-size:0.875em;
  line-height:normal;
  display:none;
}
.portfolio li .hover strong{
  display:block;
  font-size:2.750em;
  font-weight:normal;
  position:absolute;
  top: 37%;
  width:100%;
  font-family:'steelfishregular', sans-serif;
  text-transform: uppercase;
}
.portfolio li .hover p{
  position:absolute;
  top: 47%;
  padding:0 2.250em;
  width:auto;
}

/* Portfolio hover sequence */
.portfolio li a:hover .hover{
  display:block;
}
.portfolio li a:hover .hover img{
 -webkit-animation: fadeIn 1s both;
      -o-animation: fadeIn 1s both;
    -moz-animation: fadeIn 1s both;
         animation: fadeIn 1s both;
}
.portfolio li a:hover .hover .shade{
 -webkit-animation: fadeIn 0.5s 1s both;

      -o-animation: fadeIn 0.5s 1s both;
    -moz-animation: fadeIn 0.5s 1s both;
         animation: fadeIn 0.5s 1s both;
}
.portfolio li a:hover .hover strong{
 -webkit-animation: rise 0.5s 1.5s both;
      -o-animation: rise 0.5s 1.5s both;
    -moz-animation: rise 0.5s 1.5s both;
         animation: rise 0.5s 1.5s both;
}

.portfolio li a:hover .hover p{
 -webkit-animation: rise 0.5s 2s both;
      -o-animation: rise 0.5s 2s both;
    -moz-animation: rise 0.5s 2s both;
         animation: rise 0.5s 2s both;
}

.shade{
  position:absolute;
  width:100%;
  height:100%;
  box-shadow: 0 0 60px 30px rgba(0, 0, 0, 0.3) inset;





  background: rgba(0,0,0,0.5);


  top:0;
  left:0;
}
.star{
  background:url(../img/star.png);
  width:15px;
  height:14px;
  display:inline-block;
}

/* Inner page styles */

h1.small{
  font-size:5em;
  margin:0 0 45px;
}
.project-details{
 -webkit-animation: rise 0.5s 0.5s both;
      -o-animation: rise 0.5s 0.5s both;
    -moz-animation: rise 0.5s 0.5s both;
         animation: rise 0.5s 0.5s both;
}

.sidebar{
  position:fixed;
  z-index: 100;
  right:0;
  top:250px;
  padding:0;
  margin:0;
  list-style:none;
 -webkit-animation: slideRight 0.5s 0.5s both;
      -o-animation: slideRight 0.5s 0.5s both;
    -moz-animation: slideRight 0.5s 0.5s both;
         animation: slideRight 0.5s 0.5s both;
}
.sidebar li a{
  display:block;
  width:63px;
  height:58px;
  text-indent:-9999px;
  background:url(../img/sidebar.png) no-repeat  0 0 #e6e6e6;
  position: relative;
}
.sidebar a:before {
  position: absolute;
  right: 110%;
  top: 50%;
  margin-top: -13px;
  /* background: #fff; */
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  color: #333;
  padding: 0 6px;
  text-transform: uppercase;
  text-indent: 0;
  font-size: 0.8em;
  line-height: 26px;
  white-space: nowrap;
  font: 1.8em 'steelfishregular', sans-serif;
}
.sidebar a:hover:before {
  opacity: 1;
  visibility: visible;
}
.sidebar .all a{
  background-position:0 0;
}
.sidebar .all a:hover{
  background-position:-63px 0;
}
.sidebar .all a:before {
  content: 'All Projects';
}
.sidebar .next a{
  background-position:0 -58px;
}
.sidebar .next a:hover{
  background-position:-63px -58px;
}
.sidebar .next a:before {
  content: 'Next Project';
}
.sidebar .prev a{
  background-position:0 -116px;
}
.sidebar .prev a:hover{
  background-position:-63px -116px;
}
.sidebar .prev a:before {
  content: 'Previous Project';
}
.sidebar .home a{
  background-position:0 -174px;
}
.sidebar .home a:hover{
  background-position:-63px -174px;
}
.sidebar .home a:before {
  content: 'Back to Top';
}
.sidebar .contact a{
  background-position:0 -232px;
}
.sidebar .contact a:hover{
  background-position:-63px -232px;
}
.sidebar .contact a:before {
  content: 'Contact Me';
}
.project{
  padding:0;
  list-style:none;
  max-width:1150px;
  margin:0 auto;
}
.project li{
  float:left;
  width:49%;
  position:relative;
  margin:0 0.5% 1%;
  box-shadow: 0px 0px 5px 1px #ddd;
}
.project li.big{
  width: 99%;
}
.project li.small{
  width: 24%;
  margin: 0 .5% 1%;
}
.project li.big-static{
  width: 99%;
  box-shadow:none;
}

.project li.left{
  clear: left;
}
.project li img{
  width: 100%;
}
.project li .hover{
  color:#fff;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display:none;
}
.project li strong{
  display:block;
  position:absolute;
  font-size: 1em;
  top: 20px;
  left: 30px;
  width: 80%;
  font-weight:normal;
  /* text-transform:uppercase; */
  text-align: left;
  line-height:normal;
  /* font-family:'steelfishregular', sans-serif; */
}

/* Project hover sequence */
.project li:hover .hover{
  display:block;
}
.project li:hover .hover .shade{
 -webkit-animation: fadeIn 0.5s both;
      -o-animation: fadeIn 0.5s both;
    -moz-animation: fadeIn 0.5s both;
         animation: fadeIn 0.5s both;
}

.project li:hover .hover strong{
 -webkit-animation: rise .7s 0.5s both;

 -o-animation: rise 0.7s 0.5s both;


 -moz-animation: rise 0.7s 0.5s both;

 animation: rise 0.7s 0.5s both;
}

.slider{
  background:url(../img/slider.png) no-repeat;
  background-size: contain;
  max-width:1031px;
  margin:30px auto;
  position: relative;
}
.slides{
  padding:0;
  margin:0;
  list-style:none;
  position:relative;
}
.slides li{
  position:relative;
  width: 100%;
  padding: 3% 3% 20%;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  display: none;
}
.slides li img{
  width: 100%;
}
.phone-slides {
  background: url(../img/phone-frame.png) no-repeat 50% 50%;
  width: 200px;
  height: 402px;
  position: absolute;
  z-index: 5;
  bottom: 0px;
  right: 70px;
  padding:0;
  margin:0;
  list-style:none;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  padding: 45px 12px;
}
.phone-slides li{
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  background: #000;
}
.phone-slides img {
  width: 100%;
}
#company{
  margin:0 0 80px;
}
#company .phrase{
  font-size:1.938em;
  color:#999;
  font-weight:normal;
  margin:60px 0 0;
  display:block;
  font-family:'ITCSymbolStd-Medium', serif;
}

#hire{
  max-width:900px;
  margin:0 auto;
}
#hire h3{
  margin:0.774em 0 1.452em;
}

.midform h3{text-align:center;margin: 1.419em 0 1em;color: #333;font-size: 3.8em;line-height: 1em;margin: .5em 0;}
.midform .contact-form p{text-align:center;margin:0 0 1em;font-size: .95em;}
.midform .contact-form{
  border:20px solid #333;
  max-width:100%;
  width: 540px;
  margin: 2em auto;
  padding: 3em;
  background: url(../img/logo.png) no-repeat center 30px;
  float: none;
}
.midform .contact-form input[type="text"],
.midform .contact-form textarea{
  clear: both;
  width: 94%;
  font-size: 1.2em;
  background: #333;
  color: #fff;
  padding: 10px 3%;
}
.midform .contact-form label,
.midform .contact-form button
{
  clear: both;
}
.midform input[type="text"], .midform textarea{
  padding:10px;
}
.midform .contact-form button{
  float: none;
  margin: 10px auto;
  display: block;
}
.contact-form{
  border-right:2px solid #ededee;
  width:50%;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  float:left;
  text-align:left;
  padding:0 1em 50px 1em;
}
.contact-form input[type="text"],
.contact-form textarea,
.contact-form label{
  float: left;
  clear: none;
}
.contact-form label,
.contact-form button
{
  clear: left;
}
.contact-form button{
  float:left;
  margin:10px 0 0 12.857em;
}
.contact-info{
  width: 50%;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  float:left;
  text-align:left;
  padding:0 0 0 7em;
}
.contact-form p{
  margin:0 5em 0 0px;
  padding:0;
}
.contact-info dl{
  font-size:0.875em;
  margin:0 0 20px;
  line-height: 28px;
  padding:0;
}
.contact-info dl a{
  text-decoration:none;
}
.contact-info dl a:hover{
  text-decoration:underline;
}
.contact-info dt{
  width:50;
  padding:0;
  background:none;
  text-align:left;
  font-weight: normal;
}
.contact-info dd{
  margin:0;
  padding:0;
  width:50%;
  border:none;
  font-weight: 700;
}
.contact-info .cv{
  font-size: 0.8em;
}
.mid{margin:3em auto;font-size: 1.5em;}
/* Footer styles */

footer{
  height:56px;
  background:#333;
  margin:75px 0 0;
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Animation: rise */

@keyframes rise{
  0% {
    transform:         translate(0,50px);
    -ms-transform:     translate(0,50px); /* IE 9 */
    -webkit-transform: translate(0,50px); /* Safari and Chrome */
    -o-transform:      translate(0,50px); /* Opera */
    -moz-transform:    translate(0,50px); /* Firefox */
    opacity: 0;
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */
    -o-transform:      translate(0,0); /* Opera */
    -moz-transform:    translate(0,0); /* Firefox */
    opacity: 1;
  }
}

@-moz-keyframes rise{ /* Firefox */
  0% {
    transform:         translate(0,50px);
    -ms-transform:     translate(0,50px); /* IE 9 */
    -webkit-transform: translate(0,50px); /* Safari and Chrome */
    -o-transform:      translate(0,50px); /* Opera */
    -moz-transform:    translate(0,50px); /* Firefox */
    opacity: 0;
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */
    -o-transform:      translate(0,0); /* Opera */
    -moz-transform:    translate(0,0); /* Firefox */
    opacity: 1;
  }
}

@-webkit-keyframes rise{ /* Safari and Chrome */
  0% {
    transform:         translate(0,50px);
    -ms-transform:     translate(0,50px); /* IE 9 */
    -webkit-transform: translate(0,50px); /* Safari and Chrome */
    -o-transform:      translate(0,50px); /* Opera */
    -moz-transform:    translate(0,50px); /* Firefox */
    opacity: 0;
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */
    -o-transform:      translate(0,0); /* Opera */


    -moz-transform:    translate(0,0); /* Firefox */
    opacity: 1;
  }
}

@-o-keyframes rise{ /* Opera */
  0% {
    transform:         translate(0,50px);
    -ms-transform:     translate(0,50px); /* IE 9 */
    -webkit-transform: translate(0,50px); /* Safari and Chrome */
    -o-transform:      translate(0,50px); /* Opera */
    -moz-transform:    translate(0,50px); /* Firefox */
    opacity: 0;
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */
    -o-transform:      translate(0,0); /* Opera */
    -moz-transform:    translate(0,0); /* Firefox */
    opacity: 1;
  }
}

/* Animation: fadeIn */

@keyframes fadeIn{
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn{ /* Firefox */
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadeIn{ /* Safari and Chrome */
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn{ /* Opera */
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Animation: fadeOut */

@keyframes fadeOut{
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fadeOut{ /* Firefox */
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes fadeOut{ /* Safari and Chrome */
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fadeOut{ /* Opera */
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Animation: show */

@keyframes show{
  0% { height: 0; }
  100% { height: 100%; }
}
@-moz-keyframes show{ /* Firefox */
  0% { height: 0; }
  100% { height: 100%; }
}
@-webkit-keyframes show{ /* Safari and Chrome */
  0% { height: 0; }
  100% { height: 100%; }
}
@-o-keyframes show{ /* Opera */
  0% { height: 0; }
  100% { height: 100%; }
}

/* Animation: slideRight */

@keyframes slideRight{
  0% {
    transform:         translate(100px,0);
    -ms-transform:     translate(100px,0); /* IE 9 */
    -webkit-transform: translate(100px,0); /* Safari and Chrome */
    -o-transform:      translate(100px,0); /* Opera */
    -moz-transform:    translate(100px,0); /* Firefox */
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */
    -o-transform:      translate(0,0); /* Opera */
    -moz-transform:    translate(0,0); /* Firefox */
  }
}
@-moz-keyframes slideRight{ /* Firefox */
  0% {
    transform:         translate(100px,0);
    -ms-transform:     translate(100px,0); /* IE 9 */
    -webkit-transform: translate(100px,0); /* Safari and Chrome */
    -o-transform:      translate(100px,0); /* Opera */
    -moz-transform:    translate(100px,0); /* Firefox */
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */

    -o-transform:      translate(0,0); /* Opera */
    -moz-transform:    translate(0,0); /* Firefox */
  }
}
@-webkit-keyframes slideRight{ /* Safari and Chrome */
  0% {
    transform:         translate(100px,0);
    -ms-transform:     translate(100px,0); /* IE 9 */

    -webkit-transform: translate(100px,0); /* Safari and Chrome */
    -o-transform:      translate(100px,0); /* Opera */
    -moz-transform:    translate(100px,0); /* Firefox */
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */
    -o-transform:      translate(0,0); /* Opera */
    -moz-transform:    translate(0,0); /* Firefox */
  }
}
@-o-keyframes slideRight  { /* Opera */
  0% {
    transform:         translate(100px,0);
    -ms-transform:     translate(100px,0); /* IE 9 */
    -webkit-transform: translate(100px,0); /* Safari and Chrome */
    -o-transform:      translate(100px,0); /* Opera */
    -moz-transform:    translate(100px,0); /* Firefox */
  }
  100% {
    transform:         translate(0,0);
    -ms-transform:     translate(0,0); /* IE 9 */
    -webkit-transform: translate(0,0); /* Safari and Chrome */
    -o-transform:      translate(0,0); /* Opera */
    -moz-transform:    translate(0,0); /* Firefox */
  }
}

/* Animation: loader */

@-webkit-keyframes loader {
  0% { width: 0; }
  10% { width: 4%; }
  20% { width: 15%;}
  60% { width: 64%; }
  85% { width: 95%; }
  100% { width: 100%; }
}
@-moz-keyframes loader {
  0% { width: 0; }
  10% { width: 4%; }
  20% { width: 15%;}
  60% { width: 64%; }
  85% { width: 95%; }
  100% { width: 100%; }
}
@-o-keyframes loader {
  0% { width: 0; }
  10% { width: 4%; }
  20% { width: 15%;}
  60% { width: 64%; }
  85% { width: 95%; }
  100% { width: 100%; }
}
@keyframes loader {
  0% { width: 0; }
  10% { width: 4%; }
  20% { width: 15%;}
  60% { width: 64%; }
  85% { width: 95%; }
  100% { width: 100%; }
}

/* ==========================================================================
   Media queries
   ========================================================================== */

/* All mobile devices */
@media (max-width: 1024px) {
}

/* Landscape tablets */
@media (min-width: 769px) and (max-width: 1024px) {
}

/* Portrait tablets */
@media (min-width: 481px) and (max-width: 768px) {
  nav li a{
    padding: 0 0.4em;
  }
  .contact-form, .contact-info{
    width: 100%;
    float: none;
    padding: 2em;
  }
  .contact-form{
    border-right: 0;
    border-bottom: 2px solid #ededee;
  }
}

/* All tablets */
@media (min-width: 481px) and (max-width: 1024px) {
  body{
    font-size: 14px;
  }
}

/* Landscape phones */
@media (min-width: 321px) and (max-width: 480px) {
  .portfolio li{
    width: 90%;
    margin: 0 5% 5%;
  }
}

/* Portrait phones */
@media (max-width: 320px) {
  dt{
    float: none;
    width: auto;
    padding: 8px;
    text-align: inherit;
    background: none;
  }
  dd{
    float: none;
    width: auto;
    border: 0;
    margin: 0;
    padding: 8px;
    text-align: inherit;
  }
  .portfolio li{
    width: 96%;
    margin: 0 2% 2%;
  }

}

/* All phones */
@media (max-width: 480px) {
  .hidden_mobile {
    display: none;
  }
  
  body{
    font-size: 14px;
  }
  nav{
    position: fixed !important;
    background: #333;
    height: auto;
    line-height: 60px;
    font-size: 1.8em;
  }
  nav li {
    display: block;

  }
  nav li a{
    padding: 0 0.34em;
  }
  nav li a .long{
    display: none;
  }
  nav ul{
    display: none;
    height: 400px;
    line-height: 2em;
    font-size: 1.5em;
  }
  .nav-control{
    display:inline-block;
    padding: 18px 20px;
  }
  .sidebar{
    top: 0;
    left: 0;
    width: 100%;
            animation: none;
       -moz-animation: none;
    -webkit-animation: none;
         -o-animation: none;
  }
  .sidebar li{
    float: left;
    width: 20%;
    background-color: #333333;
    text-align: center;
    height: 57px;
  }
  .sidebar li a{
    height: 57px;
    display: inline-block;
  }
  .sidebar a:before {
    display: none;
  }
  .project li,
  .project li.small {
    width: 96%;
    margin: 0 2% 2%;
    float: none;
  }
  /*
  .slider{
    background:none;
    width:auto;
    height:auto;
    margin:2em auto;
  }
  .slides li{
    position:static;
    display: block !important;
    opacity: 1 !important;
    margin: 0 1em 10px;
  }
  .slides li img{
    width: 100%;

  }
  */
  .portfolio li .hover {
    position: static;
    display: block;
  }
  .portfolio li .hover strong,
  .portfolio li .hover p {
    position: static;
    background: #333;
    padding: 5px;
    width: auto;
    margin: 0;
  }
  .portfolio li .hover strong {
    padding-top: 10px;
  }
  .portfolio li .hover p {
    padding-bottom: 15px;
  }
  .portfolio li a {
    text-decoration: none;
  }
  .portfolio img {
    display: none;
  }
  .portfolio .hover img,
  .portfolio li .hover strong,
  .portfolio li .hover p {
    -webkit-animation: none !important;
    -o-animation: none !important;
    -moz-animation: none !important;
    animation: none !important;
    display: block;
  }
  .portfolio li
  .shade {
    display: none;
  }
  .contact-form, .contact-info{
    width: 100%;
    float: none;
    padding: 2em;
  }
  .contact-form{
    border-right: 0;
    border-bottom: 2px solid #ededee;
  }
  .project li.big {
    width:96%;
  }
  dt{padding:8px 1.375em 8px 0;}
  dd{padding:8px 0 8px 1.375em;}
  .contact-info .cv {width:100%;}
  footer{display:none;}
  h3{text-align:center;}
  input[type="text"], textarea{width:100%;height:2em;}
  .contact-form label  { width: 100%;text-align:center;font-size: 1.14em;}
  .contact-form button {margin: 10px auto;background: #666;width: 100%;font-size: 1.3em;padding: 5px;}
}
/* Not phones */
@media (min-width:481px) {
  nav ul{
    display:block !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  * {
      background: transparent !important;
      color: #000 !important; /* Black prints faster: h5bp.com/s */
      box-shadow: none !important;
      text-shadow: none !important;
  }

  a,
  a:visited {
      text-decoration: underline;
  }

  a[href]:after {
      content: " (" attr(href) ")";
  }

  abbr[title]:after {
      content: " (" attr(title) ")";
  }

  /*
   * Don't show links for images, or javascript/internal links
   */

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
      content: "";
  }

  pre,
  blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
  }

  thead {
      display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
      page-break-inside: avoid;
  }

  img {
      max-width: 100% !important;
  }

  @page {
      margin: 0.5cm;
  }

  p,
  h2,
  h3 {
      orphans: 3;
      widows: 3;
  }

  h2,
  h3 {
      page-break-after: avoid;
  }
}