@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');
}

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Nexa Light';
    src: url('/fonts/Nexa Light.eot');
    src: url('/fonts/Nexa Light.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Nexa Light.otf') format('opentype');
}

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Nexa Bold';
    src: url('/fonts/Nexa Bold.eot');
    src: url('/fonts/Nexa Bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Nexa Bold.otf') format('opentype');
}

html {font-size: 9px}
body {height: 100%;width: 100%;margin: 0;}
a {text-decoration: none} 
  
nav {width: 100%;height: 60px;background-color: #1f1f1f;position: absolute;top: 0px;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;top: -60px;visibility: hidden}
.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: 'Nexa Bold', sans-serif;font-size: 1.27em;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;
  bottom: 7%;
  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 {
  visibility: hidden;
}




#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: left;visibility: hidden;position: relative}
.images div {height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.3)}
.images span {color: #ffffff;margin: auto;font-size: 2.66em;font-family: "Nexa Bold";letter-spacing: 6px;display: block;bottom: -80%;text-align: center;visibility: hidden;position: relative;left: -13px}
#images-outer {position: relative;width: 100%;height: 100%;}
#img1 {background-image: url(/DSC05463.jpg)}
#img4 {background-image: url(/DSCF84201.jpg)}
#img3 {background-image: url(/avin.jpg)}
#img2 {background-image: url(/a-10.jpg)}
#footer {position: fixed;bottom: 14px;width: 100%;text-align: center;left: 0}
#footer a , #footer {font-family: sans-serif;color: #9f9f9f}
#footer {font-size: 1.21em;}
#language {margin-left: 15px;font-size: 1.22em;color: #838383}
#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 0% 0 0%}
#main-projects-inner {height: 82%;position: relative;top: 9%}
#container {position: relative;width: 100%;height: 100%;overflow: hidden}
#text1 , #text2 {font-family: 'Nexa Light', sans-serif;display: block}
#text1 {font-size: 5.55em;color: #d8d8d8}
#text2 {position: absolute;top: 20%}
#text2 span {display: block;font-size: 2.1em;margin-top: 10px;color: #969696}

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

#projects {height: 100%;float: left;overflow-x: hidden;white-space: nowrap;overflow-y:hidden;position: absolute;left: 21%;min-width: 87%;}
.box-container {height: 100%;margin-right: 6px;display: none}
.box-container a {width: 100%;background-color: #e2e2e2;margin-top: 6px;color: black;height: 10px;background-size: cover;visibility: hidden;position: relative}
.hover-project {width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);position: absolute;z-index: 5;left: 0;top: 0;display: table;visibility: hidden}
.click-project {width: 100%;height: 100%;position: absolute;z-index: 7;left: 0;top: 0}
.hover-project div {width: 80%;white-space: normal;display: table-cell;vertical-align: middle}
.hover-name {font-family: 'Nexa Bold';font-size: 3em;line-height: 30px;width: 70%;visibility: hidden;display: block;color: white;text-transform: uppercase;margin-left: 10%}
.hover-cat {font-size: 1.22em;font-family: 'Nexa Light' , sans-serif;letter-spacing: 1px;margin-top: 15px;visibility: hidden;display: block;color: white;text-transform: uppercase;margin-left: 10%}
#wait {z-index: 5;width: 100%;height: 100%;position: absolute;background-color: #fcfcfc;display: none}
#wait span {font-family: monospace;font-size: 2em;color: black;letter-spacing: 8px;position: absolute;top: 50%;left: 15%}

#black-screen {width: 100%;height: 100%;position: fixed;z-index: 9999;background-color: rgba(0, 0, 0, 0.85);display: none;visibility: hidden}
#lightbox {width: 87%;height: 68%;margin: auto;position: relative;background-color: #fcfcfc;top: 18%;visibility: hidden}
#info {width: 30%;height: 100%;float: left}
#head {height: 54%;position: relative;left: 50px}
#close {background-image: url(/misc/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: 1.88em;letter-spacing: 3px;color: #0a0a0a;line-height: 29px}
#project-cat {font-size: 1.33em;letter-spacing: 1px;color: #7b7b7b}
#project-desc {font-family: 'Nexa Light', sans-serif;font-size: 1.44em;letter-spacing: 1px;height: 46%;position: relative;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-desc-table {display: table;width: 70%}
.project-desc-table-row {display: table-row;color: #575757;font-size: 1.05em;margin-top: 15px;line-height: 30px;}
.project-desc-titles {color: #0a0a0a;font-size: 0.8em;display: table-cell;width: 100px;}
#project-images {height: 100%;width: 70%;float: left;overflow:hidden;white-space: nowrap;position: relative}
#project-images img {height: 100%;margin-right: 8px;width: auto}
#images-preload {visibility: hidden;width: 100px;height: 100px;position: absolute;z-index: -10;display: none}
.lightboxload {font-family: monospace;font-size: 2.22em;letter-spacing: 3px;color: white;margin-left: 10%;top: 60%;position: absolute;visibility: hidden}
#close div {position: absolute;width: 70px;height: 70px;top: -20px;left: -20px;cursor: pointer}

#header-pic {background-position:50% 48%; position: relative; height: 40%;width: 100%;background-size: cover;visibility: hidden;display: none}
#contact-us {font-family: 'Nexa Light', sans-serif;font-size: 3.88em;letter-spacing: 15px;color: #363636;position: absolute; bottom: 6px;left: 90px;}
#contact-info {font-family: 'Nexa Light', sans-serif;position: relative;margin: auto;width: 28%;visibility: hidden;display: none;height: 60%;top: 15%}
#info-middle {display: table-cell;vertical-align: middle}
#contact-info-title {float: left;width: 46%;font-size: 1.55em;letter-spacing: 3px}
#contact-info-content {float: right;width: 54%;font-size: 1.61em;letter-spacing: 1px;color:#727272}
.span-data-cell span {display: block;line-height: 20px}
.span-data-cell {display: block;margin-bottom: 24px;margin-top: 24px}
#contact-mail {;margin-bottom: 48px;margin-top: 48px}
#map {position: absolute;top: 100%;width: 100%;height:60%;visibility: hidden;display: none}
#map-inner {position: absolute;width: 100%;height:100%}
#photos {top: 160%;width: 100%;height:70%;position: absolute;visibility: hidden;display: none;background-color: #fcfcfc}
#ouroffice {font-family: 'Nexa Light', sans-serif;font-size: 3.1em;letter-spacing: 14px;color: #717171;position: relative; top: 19%;margin: auto;width: 80%;text-align: center}
.photos-inner-inner {width: 24.8%;height: 100%;display: inline-block;background-size: cover;background-position: 50% 50%}
#photos-inner {width: 87%;height: 55%;top: 28%;position: relative;margin: auto;white-space: nowrap}
#contact-inner {width: 100%;height: 100%;background-color: #fcfcfc;position: absolute;box-sizing: border-box;bottom: 0;
-webkit-box-sizing: border-box;padding: 60px 0px 0px 0px}
#zoomin , #zoomout {width: 70px;height: 70px;background-color: #1f1f1f;z-index: 9999;position: absolute;left: 50px;color: white;font-size: 50px;text-align: center;cursor: pointer}
#zoomin {top: 50px;line-height: 70px}
#zoomout {top: 120px;line-height: 5px}

#about-inner {width: 100%;height: 100%;background-color: #1F1F1F;position: absolute;box-sizing: border-box;bottom: 0;
-webkit-box-sizing: border-box;padding: 60px 0px 0px 0px}
#intro {height: 100%;background-color: #1F1F1F;}
#intro_text {position: relative; top: 40%;width: 92%;display: block;margin: auto;font-family:'Nexa Light';font-size: 1.55em;letter-spacing: 1px;line-height: 11px;text-align: center;color: #eaeaea;height: 50%;}
#intro_text_body {position: absolute;top: 50%;width: 100%;visibility: hidden}
#intro_text_header {text-align: center;margin-bottom: 150px;font-family:'Nexa Light';font-size: 2.1em;letter-spacing: 10px;color: #fcfcfc}
#img_full_1{height: 100%;width: 100%;background-position: center;background-size: cover}
#work_field{position: relative;width: 100%;height: 130%;background-color:#1F1F1F;color: white;}
#work_field_header , #clients_logo > span{text-align: center;top: 12%;font-family:'Nexa Light';font-size: 2.55em;letter-spacing: 7px;color: #fcfcfc;position: relative;display: block}
.work_fields {position:absolute;width:33.3%;height:22%}
#work_fields1 {top: 30%;left: 0}
#work_fields2 {top: 30%;left: 33.3%}
#work_fields3 {top: 30%;right: 0}
#work_fields4 {top: 58%;left: 0}
#work_fields5 {top: 58%;left: 33.3%}
#work_fields6 {top: 58%;right: 0}
.work_fields span:not(.work_fields_titles) {display: block;font-family:'Nexa Light';font-size: 1.44em;letter-spacing: 1px;color: #ededed;margin: 8px 0 8px 0;line-height: 18px}
.work_fields_titles {display: block;font-family:'Aspergit Bold';font-size: 1.77em;letter-spacing: 2px;color: #fcfcfc;border-bottom: 2px solid #fcfcfc;margin-bottom: 35px;padding: 12px 0 12px 0}
.work_fields div {display: block;margin: auto;position: relative;width: 60%}
#staff {position: relative;height: 108%; color: black;background-color: #fcfcfc;width: 100%;}
#staff_head_title , #staff_partner_title{text-align: center;top: 15%;font-family:'Nexa Light';font-size: 2.55em;letter-spacing: 7px;color: #1f1f1f;position: relative;width: 90%;margin: auto}
#staff_head {height: 50%;}
#staff_head1 , #staff_head2 , #staff_head3 {position:absolute;top:25%;width:33.3%;height:30%}
#staff_head1 , #staff_partner1 {left: 0}
#staff_head2 , #staff_partner2 {left: 33.3%}
#staff_head3 , #staff_partner3 {right: 0}
#staff_head1 > div , #staff_head2 > div , #staff_head3 > div {display: block;width: 70%;margin: auto;position: relative;text-align: center}
#staff_head span {display: block;text-align: center;font-family:'Nexa Light';font-size: 1.44em;letter-spacing: 1px;color: #3e3e3e;margin: 5px 0 5px 0;line-height: 18px}
.staff_head_names {font-family:'Nexa Bold';font-size: 1.77em;letter-spacing: 2px;color: #1f1f1f;margin-bottom: 10px}
.staff_head_career {font-family:'Aspergit Bold';font-size: 1.55em;letter-spacing: 1px;color: #626262;margin-bottom: 30px}
#staff_partner_title {padding-top: 50px;border-top: 2px solid #efefef}
#staff_partner{position: absolute;bottom: 0px;height: 50%;width: 100%;}
#staff_partner table {margin: auto}
.staff_partner_title {padding-right: 25px;font-family:'Nexa Bold';font-size: 1.66em;color: #7e7e7e;padding-top: 0}
.staff_partner_names {font-family:'Nexa Light';font-size: 1.66em;color: #1f1f1f;padding-bottom: 10px;padding-top: 10px;letter-spacing: 1px}
#staff_partner1 , #staff_partner2 , #staff_partner3 {position:absolute;top:52%;width:33.3%;height:30%}
#img_full_2{height: 100%;width: 100%;background-position: center;background-size: cover;}
#clients_logo {position: relative;width: 100%;text-align: center;background-color: #161616;color: white;height: 100%;}
#logo_image{height: 45%;background-size: cover;width: 75%;margin: auto;background-position: center;top: 27%;position: relative}
#download {position: relative;top: 37%;display: table;width: 210px;height: 55px;margin:auto;border: 1px solid #fcfcfc;border-radius: 10px;color: #fcfcfc;opacity: 0.6}
#download span {display: table-cell;vertical-align: middle;font-family: 'Aspergit Bold';font-size: 1.44em;line-height: 20px;letter-spacing: 1px}
#about_footer {position: relative;height: 55%; width: 100%;background-color: #fcfcfc;}
#sh_logo {top: 15%;position: relative;width: 200px;margin: auto;display: block;background-image: url(/about/logo-small.svg);background-size: cover;height: 50px}
#footer_menu {margin: auto;width: 50%;position: relative;top: 35%;height: 40%}
#footer_menu > div {width: 33.3%;height: 100%;position: absolute;text-align: center}
#footer_menu1 {left: 0}
#footer_menu2 {left: 33.3%}
#footer_menu3 {right: 0}
.footer_menu_header {display: block;font-family:'Nexa Bold';font-size: 1.38em;letter-spacing: 4px;width: 150px;margin: auto;height: 30px;color: #1f1f1f;margin-bottom: 22px;position: relative}
#footer_menu2 .footer_menu_header , #footer_menu3 .footer_menu_header {;border-bottom: 1px solid #b5b5b5}
.footer_menu_items {display: block;font-family:'Nexa Light';font-size: 1.33em;letter-spacing: 1px;width: 160px;margin: auto;color: #000000;margin-bottom: 11px;opacity: 0.60}
#footer_bottom {width: 72%;height: 60px;position: absolute;bottom: 0;border-top: 1px solid #d3d3d3;padding: 0 14% 0 14%;display: table}
#footer_bottom > span , #footer_bottom > a {width: 33%;display: inline-block;white-space: nowrap;text-align: center;line-height: 60px;font-family: sans-serif;font-size: 1.22em;letter-spacing: 1px;position: relative;color: #5d5d5d}
#wisperd_logo {width: 50px;display: inline-block;background-image: url(/about/wis-logo.svg);background-size: cover;height: 50px;vertical-align: middle;margin-right: 30px}
.footer_menu_hover_text {height: 100%;display: block;line-height: 30px}
.footer_menu_hover {width: 100%;height: 0%;position: absolute;top: 0; background-color: #1f1f1f;z-index: 5;overflow: hidden;text-align: center}
.footer_menu_header > div  {height: 100%;position: absolute;width: 100%;}
.footer_menu_hover_inner {color: #fcfcfc;line-height: 30px}
#about_language , #about_wisperd {opacity: 0.6}
#intro , #img_full_1 , #work_field , #staff , #img_full_2 , #clients_logo , #about_footer {display: none;visibility: hidden}



@media only screen and (max-width: 1250px)  {
   
	.hover-name {font-size: 2.9em;line-height: 26px;}
	#info {width: 36%}
	#project-images {width: 64%}
	#projects {left: 26%}
	#side {width: 21%;margin-left: 5%}
	#main-inner {padding: 120px 67px 67px 67px;}
	html {font-size: 7px}
	.images span {font-size: 2.05em;letter-spacing: 2px}
	#contact-us , #ouroffice {letter-spacing: 12px;}
	.work_fields span:not(.work_fields_titles) {font-size: 1.27em;margin: 2px 0 2px 0;}
	#staff_head span {font-size: 1.18em;line-height: 14px;  margin: 4px 0 4px 0;}
	.footer_menu_items {font-size: 1.25em;margin-bottom: 8px;}
	#wisperd_logo {width: 45px;height: 45px}
	#footer_bottom {height: 50px;}
	#footer_bottom > span , #footer_bottom > a {line-height: 50px;}
	#download {width: 180px;height: 50px;border-radius: 8px;}
	#download span {line-height: 18px;}
	.work_fields_titles {margin-bottom: 28px;}
	#about_footer {height: 60%;}
	.footer_menu_header {margin-bottom: 18px;width: 130px;}
	#intro_text {font-size: 1.48em;line-height: 9px;}
	.work_fields div {width: 70%;}
	.staff_partner_names {font-size: 1.45em;padding-bottom: 8px;padding-top: 8px;}
	.staff_partner_title {font-size: 1.55em;}
}

@media only screen and (max-width: 1367px) and (min-width: 1251px)  {
    
	
	.hover-name {font-size: 2.9em;line-height: 27px;}
	#info {width: 32%}
	#project-images {width: 68%}
	#projects {left: 23%}
	#side {width: 18%;margin-left: 5%}
	#main-inner {padding: 120px 70px 75px 70px;}
	html {font-size: 7.5px}
	.images span {font-size: 2.3em;letter-spacing: 4px}
	#contact-us , #ouroffice {letter-spacing: 12px;}
	.work_fields span:not(.work_fields_titles) {font-size: 1.32em;margin: 4px 0 4px 0;}
	#staff_head span {font-size: 1.22em;line-height: 15px;}
	.footer_menu_items {font-size: 1.25em;margin-bottom: 8px;}
	#wisperd_logo {width: 45px;height: 45px}
	#footer_bottom {height: 50px;}
	#footer_bottom > span , #footer_bottom > a {line-height: 50px;}
	#download {width: 180px;height: 50px;border-radius: 8px;}
	#download span {line-height: 18px;}
	.work_fields_titles {margin-bottom: 28px;}
	#about_footer {height: 60%;}
	.footer_menu_header {margin-bottom: 18px;width: 130px;}
}

@media only screen and (max-width: 1450px) and (min-width: 1368px) {
	
	#info {width: 32%}
	#project-images {width: 68%}
	#projects {left: 23%}
	#side {width: 18%;margin-left: 5%}
	#main-inner {padding: 120px 75px 75px 75px;}
	html {font-size: 8px}
	.images span {font-size: 2.35em}
	#contact-us , #ouroffice {letter-spacing: 12px;}
	.work_fields span:not(.work_fields_titles) {font-size: 1.38em;margin: 6px 0 6px 0;}
	#staff_head span {font-size: 1.3em;line-height: 17px;}
	.footer_menu_items {font-size: 1.28em;margin-bottom: 8.5px;}
	#wisperd_logo {width: 45px;height: 45px}
	#footer_bottom {height: 50px;}
	#footer_bottom > span , #footer_bottom > a {line-height: 50px;}
	#download {width: 180px;height: 50px;border-radius: 8px;}
	#download span {line-height: 18px;}

}

@media only screen and (max-width: 1650px) and (min-width: 1451px) {
   	
	#contact-info {width: 32%}
	html {font-size: 8.1px}
	.images span {letter-spacing: 5px}
	.work_fields span:not(.work_fields_titles) {font-size: 1.38em;margin: 6px 0 6px 0;}
	#staff_head span {font-size: 1.3em;line-height: 17px;}
	.footer_menu_items {font-size: 1.28em;margin-bottom: 8.5px;}
	#wisperd_logo {width: 45px;height: 45px}
	#footer_bottom {height: 50px;}
	#footer_bottom > span , #footer_bottom > a {line-height: 50px;}
}

@media only screen and (max-height: 650px) {

	#text2 {display: none}
}

@media only screen and (max-height: 770px) {
   	
	.project-desc-table-row {line-height: 27px;}
	#filters a {margin-top: 5px}
	#project-name {font-size: 1.8em;letter-spacing: 2px;line-height: 25px;}
	#project-cat {font-size: 1.28em;}
        #text2 span {font-size: 1.9em;margin-top: 6px}
}

@media only screen and (max-height: 902px) and (min-height: 771px) {
	#filters a {margin-top: 6px}
}