@font-face { 
    font-weight: normal;
    font-style: normal;
    font-family: 'corbert';
    src: url('/fonts/Corbert-Regular.eot');
    src: url('/fonts/Corbert-Regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Corbert-Regular.otf') format('opentype');
} 
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Aspergit Bold';
    src: url('/fonts/Aspergit Bold.eot');
    src: url('/fonts/Aspergit Bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Aspergit Bold.otf') format('opentype');
}
 
body {height: 100%;width: 100%;margin: 0;}
a {text-decoration: none} 
  
nav {width: 100%;height: 60px;background-color: #1f1f1f;position: absolute;top: 0;z-index: 999;visibility: hidden}
nav ul {margin: 0;height: 100%;margin: auto;width: 67%;padding: 0}
nav li {display: inline-block;vertical-align: middle;height: 100%;position: relative;}
.menu-items-text {height: 100%;display: block;vertical-align: middle;line-height: 60px;color: white;margin: 0 4px 0 4px}
#logo div {background-image: url(/logo.svg);height: 60px;width: 210px;background-size: cover;display: block;vertical-align: middle;background-position: 0 -70px;position: absolute;top: 50%;margin-top:-35px;background-repeat: no-repeat;opacity: 1}
#logo {position: absolute;height: 60px}
.menu-items {float: right;margin-left:6%;font-family: 'corbert', sans-serif;font-size: 11.5px;letter-spacing: 2px;}
.menu-select {width: 100%;height: 4px;position: absolute;top: 0;background-color: #e0e0df;z-index: 2;display: none}
.menu-hover {width: 100%;height: 0px;position: absolute;top: 0; background-color: #e0e0df;z-index: 5;overflow: hidden;text-align: center}
.menu-hover-inner {color: #1f1f1f;line-height: 60px}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 80%;
  left: 0;
  right: 0;
  
  height: 5px;
  width: 45%;
  background: #d8d8d8;
  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 100%;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #838383;
}

.pace.pace-inactive {
  display: none;
}

body.loaded .pace {
  display: none;
}




#main-inner {width: 100%;height: 100%;background-color: #1f1f1f;position: absolute;box-sizing: border-box;bottom: 0;
-webkit-box-sizing: border-box;padding: 120px 80px 80px 80px}
.images {height: 100%;width: 25%;float: left;background-size: cover;background-position: right}
#images-outer {position: relative;width: 100%;height: 100%;display: none}
#img1 {background-image: url(/DSCF12171.jpg)}
#img4 {background-image: url(/DSCF84201.jpg)}
#img3 {background-image: url(/1%D8%A2%D9%88%DB%8C%D9%86.jpg)}
#img2 {background-image: url(/5-42.jpg)}
#footer {position: absolute;bottom: 10px;width: 100%;text-align: center;left: 0}
#footer a , #footer {font-family: sans-serif;color: #9f9f9f}
#footer {font-size: 10px;}
#language {margin-left: 15px;font-size: 12px;color: #838383}
#language:hover , #wisperd:hover {color: black}
/*#waiting {width: 100%;height: 100%;position: absolute;z-index: 1500;background-color: #1f1f1f}*/
#main {width: 100%;height: 100%}




#main-projects {width: 100%;height: 100%;background-color: #fcfcfc;position: absolute;box-sizing: border-box;bottom: 0;
-webkit-box-sizing: border-box;padding: 60px 6% 0 6%}
#main-projects-inner {height: 84%;position: relative;top: 8%}

#footer {position: absolute;bottom: 10px;width: 100%;text-align: center;left: 0}
#footer a , #footer {font-family: sans-serif;color: #9f9f9f}
#footer {font-size: 10px;}
#language {margin-left: 15px;font-size: 12px;color: #838383}
#language:hover , #wisperd:hover {color: black}
#text1 , #text2 {font-family: 'corbert', sans-serif;display: block}
#text1 {font-size: 50px;margin-bottom: 25%;color: #d8d8d8}
#text2 span {display: block;font-size: 20px;margin-top: 10px;color: #969696}

#side {width: 20%;height: 100%;float: left;position: relative;left: -6%;visibility: hidden}
#filters a , #projects a {display: block}
#filters a {color: white;margin-top: 11px;font-family: 'Aspergit Bold', sans-serif;color: #0a0a0a;letter-spacing: 1px;font-size: 14px;padding: 5px 8px 5px 8px;}
#filters {bottom: 0;position: absolute;float: left;}

#projects {width: 80%;height: 100%;float: left;overflow-x: auto;white-space: nowrap;overflow-y: hidden;visibility: hidden}
.box-container {height: 100%;margin-right: 6px;display: inline-block}
.box-container a {width: 100%;background-color: #e2e2e2;margin-top: 6px;color: black;height: 10px;;background-size: cover}
#wait {z-index: 5;width: 100%;height: 100%;position: fixed;background-color: white;display: none}

#black-screen {width: 100%;height: 100%;position: absolute;z-index: 9999;background-color: rgba(0, 0, 0, 0.65);display: none}
#lightbox {width: 85%;height: 85%;margin: auto;position: relative;background-color: #fcfcfc;top: 10%}
#info {width: 30%;height: 100%;float: left}
#head {height: 60%;position: relative;left: 50px}
#close {background-image: url(close.svg);background-size: cover;width: 30px;height: 30px;position: absolute;top: 40px;left: 0;}
#head span {font-family: 'Aspergit Bold', sans-serif;text-transform: uppercase;display: block;margin-top: 15px}
#titles {;position: absolute;bottom: 0;left: 0;width: 70%}
#project-name {font-size: 18px;letter-spacing: 3px;color: #0a0a0a;line-height: 29px}
#project-cat {font-size: 13px;letter-spacing: 1px;color: #7b7b7b}
#project-desc {font-family: 'corbert', sans-serif;font-size: 14px;letter-spacing: 1px;height: 40%;position: relative;color: #0a0a0a;display: table;width: 100%;margin: auto;left: 50px;}
#project-desc div {height: 60%;position: relative;display: table-cell;line-height: 30px;vertical-align: middle;}
#project-images {height: 100%;width: 70%;float: left;overflow-x: auto;overflow-y: hidden;white-space: nowrap}
#project-images img {height: 100%;margin-right: 8px}
.titles {display: block;font-size: 14px;color: #575757}
.titles span {font-size: 11px;color: #0a0a0a}
#images-preload {visibility: hidden;width: 100px;height: 100px;position: absolute;z-index: -10}