@font-face {
  font-family: 'Apercu bold italic';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f0c8f2d619bdc13d3d2792_apercu_bold_italic-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f0c8f17a0b2d237271c00c_apercu_bold_italic-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f0c8f27a0b2d237271c00e_apercu_bold_italic-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f0c8f17a0b2d237271c00d_apercu_bold_italic-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f0c8f220b4d4ca3dde3a6f_apercu_bold_italic-webfont.svg') format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Apercu bold';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2561f11273cb52ac47e24_apercu_bold-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2561e92936c517e191efc_apercu_bold-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2561f3b646f43524abce8_apercu_bold-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2561f6d1541507eedcbe3_apercu_bold-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2561f6d1541507eedcbe4_apercu_bold-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Apercu italic';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25bac11273cb52ac48541_apercu_italic-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25bac92936c517e192164_apercu_italic-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25bac11273cb52ac48542_apercu_italic-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25bac3b646f43524ac2bc_apercu_italic-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25bac32bf3fb02ad125c6_apercu_italic-webfont.svg') format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Apercu light italic';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c08acfdc04c5240666a_apercu_light_italic-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c0892936c517e192172_apercu_light_italic-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c0892936c517e192173_apercu_light_italic-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c0892936c517e192174_apercu_light_italic-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c0892936c517e192175_apercu_light_italic-webfont.svg') format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Apercu light';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f266522da54da36eb45d53_apercu_light-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2665292936c517e1939c7_apercu_light-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f266523b646f43524ad719_apercu_light-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f266522da54da36eb45d54_apercu_light-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2665292936c517e1939c8_apercu_light-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Apercu medium italic';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c5632bf3fb02ad1261b_apercu_medium_italic-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c563b646f43524ac2e1_apercu_medium_italic-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c5611273cb52ac4861e_apercu_medium_italic-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c56acfdc04c5240666d_apercu_medium_italic-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c566d1541507eedd2b5_apercu_medium_italic-webfont.svg') format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Apercu medium';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c8711273cb52ac48765_apercu_medium-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c8792936c517e1921a5_apercu_medium-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c876d1541507eedd2ba_apercu_medium-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c8832bf3fb02ad1261e_apercu_medium-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25c883b646f43524ac2e6_apercu_medium-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Apercu mono';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25cb192936c517e1923d0_apercu_mono-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25cb13b646f43524ac2f8_apercu_mono-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25cb16d1541507eedd2bf_apercu_mono-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25cb192936c517e1923d1_apercu_mono-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25cb132bf3fb02ad12624_apercu_mono-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Apercu regular';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25ccb32bf3fb02ad12627_apercu_regular-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25ccb3b646f43524ac2fc_apercu_regular-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25ccb6d1541507eedd31e_apercu_regular-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25ccb11273cb52ac4876f_apercu_regular-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f25ccbacfdc04c52406679_apercu_regular-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Tiempos text regular italic';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2685192936c517e193f06_tiempos_text_regular_italic-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268512da54da36eb45e57_tiempos_text_regular_italic-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268512da54da36eb45e58_tiempos_text_regular_italic-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268513b646f43524ada47_tiempos_text_regular_italic-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268513b646f43524ada48_tiempos_text_regular_italic-webfont.svg') format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Tiempos text regular';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f26891d9cb98a86e4de78f_tiempos_text_regular-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268912da54da36eb45ea0_tiempos_text_regular-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f26891d9cb98a86e4de790_tiempos_text_regular-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f26892d9cb98a86e4de791_tiempos_text_regular-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f26892d9cb98a86e4de792_tiempos_text_regular-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Tiempos text semibold italic';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268c8acfdc04c52407686_tiempos_text_semibold_italic-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268c892936c517e193fca_tiempos_text_semibold_italic-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268c83b646f43524adb66_tiempos_text_semibold_italic-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268c992936c517e193fcb_tiempos_text_semibold_italic-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f268c9d9cb98a86e4de797_tiempos_text_semibold_italic-webfont.svg') format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Tiempos text semibold';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f269023b646f43524adb83_tiempos_text_semibold-webfont.woff2') format('woff2'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f26902d9cb98a86e4de7ab_tiempos_text_semibold-webfont.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f269023b646f43524adb84_tiempos_text_semibold-webfont.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f2690292936c517e193fd7_tiempos_text_semibold-webfont.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/56f26902d9cb98a86e4de7ac_tiempos_text_semibold-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Tiemposheadline';
  src: url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/5996a8167488150001d1c08a_TiemposHeadline-Medium.eot') format('embedded-opentype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/5996a8166dd4d50001b7f385_TiemposHeadline-Medium.woff') format('woff'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/5996a8163f1ad60001cd0169_TiemposHeadline-Medium.ttf') format('truetype'), url('https://daks2k3a4ib2z.cloudfront.net/56e7dd1a0b15f5eb36389d7f/5996a8167488150001d1c08b_TiemposHeadline-Medium.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

a {
text-decoration: none;
color: #333;
}
body {    
font-family: 'Apercu light', sans-serif;
font-size: 16px;
opacity: 1;
display: block;
transition: opacity 600ms ease-in;
color: #333;
padding: 30px;
}
p,ul li {
line-height: 25px;
color: #666;
}
html {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
.mb2r {
margin-bottom: 2rem;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 120px;
box-shadow: 0 0 15px 5px rgba(241, 241, 241, 0.8);
-webkit-transition: margin 250ms cubic-bezier(.25,.46,.45,.94),border .4s cubic-bezier(.55,.085,.68,.53);
transition: margin 250ms cubic-bezier(.25,.46,.45,.94),border .4s cubic-bezier(.55,.085,.68,.53);
text-decoration: none;
}
.inner-wrapper {       
position: relative;
width: 100%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
}
.header {
margin: 0 auto;
}
.wrapper:after,
.header:after {
content: '';
display: table;
clear: both;
}
.header .logo {
text-transform: uppercase;
float: left;
position: relative;
z-index: 10;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.header .logo-mobile {
display: none;
}
.header .logo a {
font-family: 'Apercu medium', sans-serif;
font-size: 48px;
line-height: 60px;
letter-spacing: -1px;
text-transform: capitalize;
}
.header .navigation {
float: right;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
padding-top: 25px;
}
.header .navigation li {
display: inline-block;
margin-left: 40px;
line-height: 1px;
}
.header .navigation a:hover {
/*border-bottom: 3px solid #333;*/
color: #ff0030
}
.header .navigation a.active {
border-bottom: 3px solid #ff0030;
color: #ff0030
}
.header .navigation a.active:before {
  display: none
}
.header .navigation a.active:after {
  display: none
}
.header .navigation a {
font-family: 'Apercu regular',Arial,sans-serif;
font-size: 20px;
padding-bottom: 18px;
display: inline-block;
position: relative;
}
.header .navigation a:before,
.header .navigation a:after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #ff0030;
}

.header .navigation a:before {
  opacity: 0;
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
  -webkit-transition: -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}

.header .navigation a:after {
  opacity: 0;
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.header .navigation a:hover:before,
.header .navigation a:hover:after,
.header .navigation a:focus:before,
.header .navigation a:focus:after {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.header .navigation a:hover:before,
.header .navigation a:focus:before {
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.header .navigation a:hover:after,
.header .navigation a:focus:after {
  -webkit-transition: -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
  transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}

.hero {
margin: 200px 0;    
font-family: 'Tiemposheadline' ,Arial,sans-serif;
color: #333;
font-size: 25px;
line-height: 58px;
font-weight: 400;
letter-spacing: -.2px;
}

.hero .title {
/*font-family: 'Apercu light',Arial,sans-serif;
text-transform: capitalize;
letter-spacing: -1px;
font-size: 40px;
display: inline;    
line-height: 60px;*/
}
.about_hero span,
.hero .title span {
display: block;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
/*.hero .title > span:last-child {
font-size: 20px;
color: #888;
font-weight: 400;
letter-spacing: 9px;
line-height: 48px;
}*/
.projects {
margin: 0 auto;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.projects h2 {
margin-bottom: 60px;
font-size: 18px;
font-family: 'Apercu light',Arial,sans-serif;
font-weight: 600;
}
.projects_inner {
overflow: hidden;
}
.project {
display: block;
width: 48%;
float: left;
position: relative;
margin-bottom: 4%;
overflow: hidden;
}
.projects_inner .project:nth-child(odd) {
margin-left: 0;
}
.projects_inner .project:nth-child(even) {
margin-left: 4%;
}
.project_content_container {
position: absolute;
left: 0;
top: 0;
background: #f7f7f7;
width: 100%;
height: 100%;
opacity: 0;
transition: 0.5s all;
}
.project_thumbnail {
transition: 0.5s all;
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.project:hover .project_content_container {
opacity: 1;
}
.project:hover .project_thumbnail {
-ms-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
opacity: 0;
}
.project:hover .project_content .project_name {
-webkit-transform: scale(1) translateY(0px);
-ms-transform: scale(1) translateY(0px);
transform: scale(1) translateY(0px);
transition: 0.6s all;
}
.project_content {
display: table;
width: 100%;
height: 100%;
}
.project_content .h3 {
color: #555;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.project:hover .project_line {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
transition: 0.5s all;
}
.project_line {
display: inline-block;
height: 1px;
width: 20px;
border-top: 1px solid #999;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
transition: 0.5s all;
}
.project .project_name {
font-size: 18px;
display: block;
color: #555;
-webkit-transform: scale(.65) translateY(10px);
-ms-transform: scale(.65) translateY(10px);
transform: scale(.65) translateY(10px);
transition: 0.5s all;
}
.project_content .project_line {
margin-top: 20px;
}
.project_content .project_type {
display: block;
font-size: 15px;
color: #999;
padding-top: 15px;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
transition: 0.6s all;
}
.project:hover .project_content .project_type {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.project:hover .project_content .project_line {
width: 60px;
}
.project:hover .project_content .project_tech {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.project_content .project_tech {
font-size: 15px;
display: block;
padding-top: 15px;
color: #aaa;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
transition: 0.6s all;
letter-spacing: 1px;
}
.project_content p {
color: #888;
text-align: justify;
}
.project_thumbnail img {
width: 100%;
}
.content {
margin-bottom: 100px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.box {
overflow: hidden;
margin-bottom: 100px;
}
.box h3 {
color: #444 !important;
font-weight: 600;
}
.box h2 {
float: left;
width: 15%;
line-height: 38px;
margin-bottom: 20px;
font-size: 20px;
font-family: 'Apercu medium',Arial,sans-serif;
letter-spacing: -.5px;
}
.box .time {
color: #bbb;
font-weight: 400;
padding-left: 10px;
font-size: 14px;
}
.box > div {
float: left;
width: 83%;
}
.box > div ul li,
.box > div p,
.box > div table,
.box > div h3 {
line-height: 38px;
color: #888;
font-size: 18px
}
.box > div table {
text-align: left;
}
.box > div table th {
width: 100px;
text-align: left;
color: #444;
font-weight: 600;
}
.fw600 {
font-weight: 600;
}
.mobile-nav-button {
background: transparent;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
width: 40px;
height: 40px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
color: #222;
position: absolute;
top: 3%;
right: 20px;
z-index: 11;
display: none;
outline: none;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.mobile-nav-button span {
display: block;
position: absolute;
top: 22px;
left: 9px;
right: 9px;
height: 2px;
background: #222222;
-webkit-transition: background 0s 0.3s;
transition: background 0s 0.3s;
}
.mobile-nav-button span::before, .mobile-nav-button span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background-color: #222222;
content: "";
-webkit-transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.mobile-nav-button span:before {
top: -6px;
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.mobile-nav-button span::after {
bottom: -6px;
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
.nav-shown .mobile-nav-button span::before, .nav-shown .mobile-nav-button span::after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}
.nav-shown .mobile-nav-button span::before {
top: 0;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-shown .mobile-nav-button span::after {
bottom: 0;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-shown .mobile-nav-button span {
background: none;
}
.mobile-nav ul li {
padding: 10px;
}
.mobile-nav {
position: fixed;
width: 100%;
height: 100%;
left:0;
background: #fff;
z-index: -1;
padding-top: 50px;
text-align: center;
opacity: 0;
-webkit-transition: 0.5s all;
transition: 0.5s all;
}
.footer {
margin: 0 auto;
overflow: hidden;
-webkit-animation-delay: 2s;
animation-delay: 1.5s;
width: 100%;
color: #333;
font-size: 16px;
max-width: 1200px;
font-family: 'Apercu regular',Arial,sans-serif;
padding-top: 50px
}
.footer p {
float: left;
color: #111;
}
.footer ul {
float: right;
}
.footer ul li {
display: inline-block;
margin-right: 20px;
}
.footer ul li a:hover {
/*text-decoration: underline;*/
}
.about_hero {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.circle_list li {
list-style-type: circle;
margin-left: 20px;
}
.view_icon {
width: 22px;
padding-left: 5px;
}
.project_tech li a {
color: #666;
}
.about_project_name {
  color: #616161;
  font-family: 'Apercu regular';
}
/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media screen and (max-width: 992px) {
    body {
    padding:0;
    }
    .wrapper {
    margin: 0;
    border: 10px solid #f0f0f0;
    padding: 80px;
    box-shadow: none;
    }
    .mobile-nav {
      border: 10px solid #f0f0f0;
      border-top: none;
    }
}
@media screen and (max-width:768px) {
    .wrapper {
    padding: 50px;
    }
    .box > div {
      width: auto;
    }
    .hero {
    font-size: 45px;
    margin-top: 120px;
    margin-bottom: 120px;
    }
    .header .logo-mobile {
    display: block
    }
    .header .logo-full {
    display: none;
    }
    .mobile-nav-button {
    display: block;
    top: 25px;
    right: 0;
    }
    .mobile-nav-button span {
    top: 7px;
    }
    .navigation {
    display: none;
    }
    .project:last-child {
    border-bottom: 1px solid #ccc;
    }
    .project {
    max-height: inherit;
    margin-bottom: 0px;
    border-top: 1px solid #ccc;
    padding: 55px 5px;
    width: 100%;
    overflow: inherit;
    }
    .project_content_container {
    background: #fff;
    opacity: 1;
    }
    .projects_inner .project:nth-child(even),
    .projects_inner .project:nth-child(odd) {
    margin-left: 0;
    }
    .project > div:first-child {
    display: none;
    }
    .project_content_container {
    width: 100%;
    padding: 0;
    margin: 0;
    }
    .project_content .h3 {
    padding: 0 5px;
    }
    .project_content .project_name {
    font-size: 15px;
    margin-bottom: 0px;
    font-weight: bold;
    float: left;
    -webkit-transform: scale(1) translateY(0px);
    -ms-transform: scale(1) translateY(0px);
     transform: scale(1) translateY(0px);
    }
    .project_content_container p {
    font-size: 15px;
    }
    .project_content_container:before,
    .project_content_container:after {
    border: none;
    }
    .project_content p {
    display: none;
    }
    .project_content .h3 .project_tech {
    display: inline-block;
    padding-top: 10px;
    float: right;
    font-weight: 400;
    font-size: 15px;
    color: #666;
    margin: 0;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
     transform: translateY(0px);
    }
    .projects h2 {
    line-height: 100px;
    margin-bottom: 0;
    font-size: 16px;
    }
    .projects {
    margin: 0 auto;
    }
    .footer ul li  {
    margin-right: 10px;
    }
    .box {
    margin-bottom: 50px;
    }
    .box h2 {
    width: 100%;
    margin-bottom: 10px;
    font-size: 20px;
    }
    .footer {
    margin-top: 50px;
    padding-top: 40px;
    }
    .project_content .h3 span {
    border: none;
    margin: 0;
    width: inherit;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    }
    .project_content .h3 {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }
    .box .time {
    display: block;
    padding-left: 0;
    }
    .project_tech li {
    float: left;
    margin-left: 30px;
    }
    .project_tech li:first-child {
    margin-left: 0;
    }
    .project_tech li b {
    display: none;
    }
    .project_tech li i {
    font-size: 20px;
    }
    .project_line {
    display: none;
    }
    .h3 > div {
    float: left;
    }
    .box > div ul li, .box > div p, .box > div table, .box > div h3 {
      font-size: 16px;
    }
    .project_content .h3 .project_type {
    text-align: left;
    margin-top: 10px;
    }
    .hero .title > span:last-child {
    font-size: 43px;
    color: #343434;
    font-weight: 400;
    }
    .footer {
        display: none
    }
}
@media only screen and (min-width: 769px) and (max-width: 1100px) {
    .project,
    .project_thumbnail {
    width: 100%
    }
    .projects_inner .project:nth-child(even),
    .projects_inner .project:nth-child(odd) {
    margin-left: 0;
    }
    .box h2 {
    width: 20%;
    }
    .box > div {
    width: 80%;
    }
}
@media screen and (max-width: 562px) {
    .hero .title > span:last-child {
    font-size: 16px;
    color: #888;
    letter-spacing: 2.6px;
    line-height: 31px;
    }
}
@media screen and (max-width: 480px) {
    .wrapper {
    border: none;
    padding: 0;
    width: 90%;
    margin: 0 auto;
    }
    .header {
    margin: 0
    }
    .header .logo a {
    margin-bottom: 40px;
    font-size: 35px;
    }
    .box > div {
      width: auto;
    }
    .mobile-nav {
    border: none
    }
}

/*------------------------------------*\
    ANIMATION
\*------------------------------------*/

.animated {
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes fadeInUp {
    0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    }
    100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
    opacity: 0;
    transform: translateY(20px);
    }
    100% {
    opacity: 1;
    transform: translateY(0);
    }
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInLeft {
    0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    }
    100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
    opacity: 0;
    transform: translateX(-30px);
    }
    100% {
    opacity: 1;
    transform: translateX(0);
    }
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
    0% {
    opacity: 0;
    -webkit-transform: translateX(30px);
    }
    100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
    opacity: 0;
    transform: translateX(30px);
    }
    100% {
    opacity: 1;
    transform: translateX(0);
    }
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}


/*html {
background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/stardust.png");
}
.hero {
color: #fff;
}
.logo a {
color: #fff;
}
.logo span {
font-weight: 400;
}*/