@font-face {
  font-family: 'Astrit';
  src: url('/css/font/bold/font_black.eot');
  src: url('/css/font/bold/font_black.eot#iefix') format('embedded-opentype'), url('/css/font/bold/font_black.woff2') format('woff2'), url('/css/font/bold/font_black.woff') format('woff'), url('/css/font/bold/font_black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Num';
  src: url('/css/font/number/num.eot');
  src: url('/css/font/number/num.eot#iefix') format('embedded-opentype'), url('/css/font/number/num.woff2') format('woff2'), url('/css/font/number/num.woff') format('woff'), url('/css/font/number/num.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Content';
  src: url('/css/font/body/body.eot');
  src: url('/css/font/body/body.eot#iefix') format('embedded-opentype'), url('/css/font/body/body.woff2') format('woff2'), url('/css/font/body/body.woff') format('woff'), url('/css/font/body/body.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.clear {
  float: none;
  clear: both;
}
html,
body {
  color: rgb(29, 53, 78);
  margin: 0px;
}

/*body.off {
  overflow: hidden !important;
}*/

.home {
  overflow: hidden !important;
-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.button:hover ~ {
  filter: blur(20px);
}
body {
  overflow-x: hidden !important;
  
/*  background: -moz-linear-gradient(0deg, rgba(237, 235, 232, 1) 0%, rgba(241, 243, 236, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(237, 235, 232, 1)), color-stop(100%, rgba(241, 243, 236, 1)));
  background: -webkit-linear-gradient(0deg, rgba(237, 235, 232, 1) 0%, rgba(241, 243, 236, 1) 100%);
  background: -o-linear-gradient(0deg, rgba(237, 235, 232, 1) 0%, rgba(241, 243, 236, 1) 100%);
  background: -ms-linear-gradient(0deg, rgba(237, 235, 232, 1) 0%, rgba(241, 243, 236, 1) 100%);
  background: linear-gradient(90deg, rgba(237, 235, 232, 1) 0%, rgba(241, 243, 236, 1) 100%);
  background-attachment: fixed;
  background-position: right;*/


  background-color: #edebe8 !important;
  background-size: 22.5% 100%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to left, rgba(208, 204, 199, .5) 1px,
    transparent 0px, transparent),
    linear-gradient(to left, rgba(208, 204, 199, .5) 1px,
    transparent 0px, transparent);
  /*background-position: left 0px top, left 0px bottom;*/
  min-height: 100vh;
  background-mix-blend-mode: overlay;
}

body.off:not(.single) {
  background: #edebe8 !important;
}

#nav {
  width: 200px;
  height: 70px;
  position: fixed !important;
  display: block;
  left: 0px;
  top: 100px;
  z-index: 999;
}
#ham {
  display: block;
  float: left;
  width: 100px;
  height: 70px;
  background: #fff;
  cursor: pointer;
  position: relative;
  z-index: 4;
  border-right: 1px solid #f3f3f3;
  box-sizing: border-box;
  -webkit-transition-delay: 0.3s !important;
  transition-delay: 0.3s !important;
  transition: margin-left ease-in-out .3s;
}
.bar,
.bar:after,
.bar:before {
  width: 35px;
  height: 3px;
  left: 0%;
  position: absolute;
  right: 0%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 100px;
  transition: all ease-in-out .3s;
}
.bar {
  transform: translateY(34px);
  background: #88979c;
  transition: all 0ms 300ms;
}
.bar.animate {
  background: rgba(255, 255, 255, 0);
}
.bar:before {
  content: "";
  bottom: 10px;
  background: #88979c;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
  content: "";
  top: 10px;
  background: #88979c;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
#logo {
  display: block;
  width: 100px;
  height: 70px;
  float: left;
  margin-left: 0px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  z-index: 2;
  /*transition: margin-left .3s ;*/
  -webkit-transition-delay: all 0.3s;
  transition-delay: all 0.3s;
  outline: none !important;

}
#logo {
  background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.4 27.6"><path fill="rgb(136,151,156)" d="M1.1 27.2h29.4c.5 0 .8-.5.6-1-.6-1-1.7-2.9-2.5-4.4L16.4.8c-.3-.4-.9-.4-1.1 0L.6 26.2c-.3.5 0 1 .5 1zm8.4-6.3l5.8-10c.3-.4.9-.4 1.1 0l5.8 10c.3.4-.1 1-.6 1H10.1c-.5 0-.8-.6-.6-1z"/></svg>') no-repeat center;
  background-size: 30px;
}




.blogo {
  font-size: 18px;
  text-align: center;
  line-height: 70px;
  font-family: "Astrit", sans-serif !important;
  font-weight: normal;
  color: rgb(29, 53, 78);
  text-decoration: none;
  background: #fff !important;
}
/*.blogo:hover {
  text-indent: 20px;
}
.blogo:after {
  content: " ";
  display: none;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(29, 53, 78, 1);
  border-left: 2px solid rgba(29, 53, 78, 1);
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  margin-top: -4px;
  left: 20px;
  transform: rotate(-45deg);
}
.blogo:before {
  content: "GO BACK";
  display: block;
  background: rgba(29, 53, 78, .0);
  position: absolute;
  top: 50%;
  left: 40px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 13px;
}*/

.blogo:hover:after {
  border-color: rgba(29, 53, 78, .8);
  left: 25px;
}
#nav.off #logo {
  margin-left: -100px;
}



nav.on ul {
  bottom: 0px;
}
nav.on {
  visibility: visible;
  opacity: 1;
  /*clip: inherit !important;*/
  z-index: 13;
}
nav {
  position: fixed;
  top: 0px;
  /*left: 0px;*/
  /*bottom: 0;*/
  width: 100vw;
  height: 100vh;
  background-color: #dfe9f3 !important;
  background-size: 22.5% 100%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, rgba(210, 221, 232, 1) 1px, transparent 1px, transparent),
                    linear-gradient(to right, rgba(210, 221, 232, 1) 1px, transparent 1px, transparent);
  background-position: left 0px top,
                       left 0px bottom;
  visibility: hidden;
  opacity: 0;
  display: block;
  z-index: 13;
  overflow: hidden;
  transition: opacity .3s;
}
nav ul {
  bottom: -100px;
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100px;
  margin: 0px;
  padding: 0px;
  display: block;
}
nav li {
  height: 100%;
  width: 22.5%;
  display: block;
  float: left;
  position: relative;
}
.settings {
  width: 10% !important;
}
nav li a {
  position: relative;
  display: block;
  padding: 0 10%;
  height: 100%;
  color: rgb(29, 53, 78);
  overflow: hidden;
  border-right: 1px solid #f3f3f3;
}
nav li {
  overflow: hidden;
}
nav li a span {
  z-index: 2;
}
nav li a:hover {
  color: #fff;
}
nav li a::before,
nav li a::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 100%;
  left: 0;
  z-index: 1;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
nav li a::before {
  background: rgba(29, 53, 78, 0.3);
}
nav li a::after {
  background: rgba(29, 53, 78, 1);
}
nav li a:hover::before,
nav li a:hover::after {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
nav li a:hover::after {
  -webkit-transition-delay: 0.175s;
  transition-delay: 0.175s;
}
nav li a span {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  font-size: 20px;
  font-family: 'Astrit', sans-serif;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
nav li:last-child a {
  border-right: none;
}
#menu a:nth-child(1) {
  transition-delay: .4s;
}
#menu a:nth-child(2) {
  transition-delay: .5s;
}
#menu a:nth-child(3) {
  transition-delay: .6s;
}
#menu a {
  cursor: pointer;
  color: #fff;
  opacity: 0;
  padding-left: 200px;
  width: 100%;
  display: block;
  margin-top: 100px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
#menu.on a {
  opacity: 1;
  padding-left: 260px;
}
#menu a img {
  position: absolute;
}
#menu a:nth-child(1) img {
  width: 280px;
}
#menu a:nth-child(2) img {
  width: 185px;
  margin-bottom: -50px;
}
#menu a:nth-child(3) img {
  width: 360px;
}
#menu a:hover span {
  opacity: 1;
}
#menu a:hover img {
  opacity: 0.1;
}
#menu a span {
  font-family: "Num", sans-serif;
  font-size: 55px;
  opacity: 0.1;
}
.dum {
  width: 100%;
  height: 2000px;
  display: block;
  position: relative;
}
.posts {
  padding: 100px;
  padding-bottom: 40px;
  display: block;
  position: relative;
  height: 100%;
  opacity: 0;
  width: calc(55vw - 200px) !important;
  float: right;
  margin-right: 40px !important;
}
aside.on .posts {
  opacity: 1;
  margin-right: 0px !important;
}
.post {
  display: block;
  clear: both;
  margin-bottom: 65px;
  transition: transform .3s;
}


.post.single {
  margin-bottom: 40px;
}
.num {
  font-size: 64px;
  font-family: "Num", sans-serif;
  font-weight: bold;
  color: #eeeff1;
}
.page span.title {
  text-transform: uppercase;
  font-size: 64px;
  color: #eeeff1;
}
span.title {
  cursor: inherit;
}
span.title:hover {
  opacity: 1;
}
.title {
  font-size: 30px;
  font-family: "Astrit", sans-serif;
  display: block;
  text-decoration: none;
  color: rgb(29, 53, 78);
  max-width: 60%;
}
.single .title {
  max-width: 100%;
}
@media (min-width: 1200px) {
.single .exe { max-width: 670px;}
.post.single .title {font-size: 100px;line-height: 112px;}
.off .post.single .num,
.off .post.single .title, 
.off .post.single .exe {
  opacity: 0;
  transform: translateX(20px);
}

.post.single .num,
.post.single .title, 
.post.single .exe {
  opacity: 1;
  /*transform: translateX(0px);*/
  transition: opacity .8s, transform .8s;
}
.post.single .num {transition-delay:.3s;}
.post.single .title {transition-delay:.4s;}
.post.single .exe {transition-delay:.5s;}


}

h2, h3 {
  /*font-size: 19px !important;*/
  /*font-family: "Content", sans-serif;*/
  font-weight: normal;
  color: rgb(29, 53, 78);
      font-size: 26px;
    line-height: 38px;
    margin-top: 40px;
    margin-bottom: 30px;
}
h3 {
  margin-bottom: 10px;
  margin-top: 40px;
}


a.title:hover {
  opacity: 0.5;
}

/*:root {
  --highlight-vstart: 0.4em;
  --highlight-vend: 0.9em;
  --highlight-color: yellow;
  --highlight-range: 100%;
}*/

.exe a {
  mix-blend-mode: multiply;
  color: #57626e;

  background: 
    linear-gradient(to bottom,
      white, 
      white 0.4em, 
      transparent 0.4em, 
      transparent 0.9em, 
      white 0.9em, 
      white),
    
    linear-gradient(to right,
      yellow, 
      yellow 100%, 
      white 100%, 
      white)
  ;
}


.exe {
  line-height: 24px;
  margin-top: 10px;
  color: #57626e;
  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif !important;
  font-weight: 400;
  font-style: normal;
  /*font-size: 19px !important;*/
  /*line-height: 1.58;*/
  letter-spacing: -.003em;
      font-size: 20px;
    line-height: 32px;
}
 
.more {
  font-size: 14px;
  font-family: "Astrit", sans-serif;
  text-decoration: none;
  margin-top: 20px;
  display: block;
  color: rgb(29, 53, 78);
}
.more:after {
  display: block;
  content: "";
  width: 15px;
  height: 2px;
  background: rgb(29, 53, 78);
}
.post:hover .more:after {
  width: 80px;
}
#intro {
  position: fixed;
  top: 40vh;
  z-index: 1;
  left: 20vw;
  opacity: 1;
}
body.off #intro {
  left: 5vw;
  opacity: 0;
  filter: blur(40px);
}
body.off #intro .button {
  opacity: 0;
  visibility: hidden;
  margin-left: 80px;
  filter: blur(40px);
}
.button {
  position: relative;
  display: block;
  border: 2px solid rgba(29, 53, 78, 0.2);
  text-transform: uppercase;
  padding: 20px 15px;
  margin-left: 140px;
  margin-top: 30px;
  opacity: 1;
  visibility: visible;
  text-align: center;
  width: 180px;
  cursor: pointer;
  overflow: hidden;
  color: rgb(29, 53, 78);
  font-family: 'Astrit', sans-serif;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
}
.mask {
  background: rgb(29, 53, 78);
  background: rgba(29, 53, 78, 0.5);
}
.mask {
  position: absolute;
  display: block;
  width: 200px;
  height: 100px;
  -webkit-transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
  transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
  -webkit-transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
  transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
}
.button:hover {
  border-color: rgb(29, 53, 78);
}
.button:hover a {
  color: #fff;
}
.button:hover .mask {
  background: #fff;
  -webkit-transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
  transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
}
#intro .button {
  transition-delay: .1s;
}
.button.po {
  color: #fff;
  z-index: 1100;
  position: absolute;
  bottom: 90px;
  right: 190px !important;
  opacity: 0;
  border-color: rgba(255, 255, 255, 0.3);
}
.current .button.po {
  right: 90px !important;
  opacity: 1;
}
#intro.off #sig {
  opacity: 0;
  left: -40px;
}
.single .sig {
  margin-top: 30px;
  display: block;
}
.sig path {
  stroke: rgb(29, 53, 78);
  fill: none;
  stroke-width: 2px;
}

#intro #sig {
  opacity: 1;
  margin-left: 0px;
}
aside {
  background: #fcfcfc;
  width: 100vw;
  min-height: 100%;
  display: block;
  position: absolute;
  right: 0px;
  /*transition: right .3s, width .3s;*/
}
aside.on {
  width: 55vw;
}
aside.zero {
  right: -55vw;
}
aside.zero .post:before {
  display: none;
}
figure {
  width: 100vw;
  height: 100%;
  display: block;
  position: fixed;
  top: 0px;
  opacity: 1;
  bottom: 0px;
  right: 0vw;
  background-color: #edebe8;
  background-size: cover;
  /*background-position: center top;*/
  background-repeat: no-repeat;
  cursor: pointer;
  /*transition: all .3s;*/
  /*transition: right .3s;*/
 /*filter: blur(0px) !important;*/
 /*transform: scale(1) !important;*/
 margin: 0px;
}


body.off figure {
  right: 5vw;
  /*filter: blur(5px) !important;*/
  /*transform: scale(1.1) !important;*/
}
body.off figure ul {
  bottom: -100px;
  opacity: 0;
}
figure ul {
  display: block;
  width: 100%;
  margin: 0px;
  height: 180px;
  padding-left: 40px;
  position: absolute;
  bottom: 0px;
  opacity: 1;
  transition-delay: .4s !important;
  -webkit-box-shadow: inset 0px -111px 133px -40px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0px -111px 133px -40px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px -111px 133px -40px rgba(0, 0, 0, 0.5);
}
figure ul a {
  width: 25px;
  height: 25px;
  display: block;
  float: left;
  cursor: pointer;
  border-radius: 4px;
  margin: 120px 15px 0px 0px;
  /*background-position: center;*/
  /*background-size: 20px auto;*/
  /*background-repeat: no-repeat;*/
  opacity: 1;
  color: #fff;
}
figure ul a:hover {
  opacity: 0.5;
}
.post:before {
  display: block;
  content: "";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #fcfcfc;
  position: absolute;
  margin-left: -80px;
  margin-top: 10px;
  z-index: 1;
}
.post.hov:before {
  margin-left: -120px;
}
.post.single:before {
  display: none;
}


.dr {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgba(255,255,255,1)" viewBox="0 0 24 24"><path d="M12 0c-6.628 0-12 5.373-12 12s5.372 12 12 12 12-5.373 12-12-5.372-12-12-12zm9.885 11.441c-2.575-.422-4.943-.445-7.103-.073-.244-.563-.497-1.125-.767-1.68 2.31-1 4.165-2.358 5.548-4.082 1.35 1.594 2.197 3.619 2.322 5.835zm-3.842-7.282c-1.205 1.554-2.868 2.783-4.986 3.68-1.016-1.861-2.178-3.676-3.488-5.438.779-.197 1.591-.314 2.431-.314 2.275 0 4.368.779 6.043 2.072zm-10.516-.993c1.331 1.742 2.511 3.538 3.537 5.381-2.43.715-5.331 1.082-8.684 1.105.692-2.835 2.601-5.193 5.147-6.486zm-5.44 8.834l.013-.256c3.849-.005 7.169-.448 9.95-1.322.233.475.456.952.67 1.432-3.38 1.057-6.165 3.222-8.337 6.48-1.432-1.719-2.296-3.927-2.296-6.334zm3.829 7.81c1.969-3.088 4.482-5.098 7.598-6.027.928 2.42 1.609 4.91 2.043 7.46-3.349 1.291-6.953.666-9.641-1.433zm11.586.43c-.438-2.353-1.08-4.653-1.92-6.897 1.876-.265 3.94-.196 6.199.196-.437 2.786-2.028 5.192-4.279 6.701z"/></svg>')  no-repeat right center/18px;
}
.be {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgba(255,255,255,1)" viewBox="0 0 24 24"><path d="M22 7h-7v-2h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14h-8.027c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988h-6.466v-14.967h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zm-3.466-8.988h3.584c2.508 0 2.906-3-.312-3h-3.272v3zm3.391 3h-3.391v3.016h3.341c3.055 0 2.868-3.016.05-3.016z"/></svg>')  no-repeat right center/22px;
}
.md {
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="rgba(255,255,255,1)" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.846 6.887c.03-.295-.083-.586-.303-.784l-2.24-2.7v-.403h6.958l5.378 11.795 4.728-11.795h6.633v.403l-1.916 1.837c-.165.126-.247.333-.213.538v13.498c-.034.204.048.411.213.537l1.871 1.837v.403h-9.412v-.403l1.939-1.882c.19-.19.19-.246.19-.537v-10.91l-5.389 13.688h-.728l-6.275-13.688v9.174c-.052.385.076.774.347 1.052l2.521 3.058v.404h-7.148v-.404l2.521-3.058c.27-.279.39-.67.325-1.052v-10.608z"/></svg>')  no-repeat right center/18px;
}
.cp {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="31.665" height="31.665" fill="rgba(255,255,255,1)"><path d="M16.878.415c-.854-.565-1.968-.552-2.809.034L1.485 9.214C.814 9.682.414 10.447.414 11.266v9.444c0 .84.421 1.623 1.122 2.086l12.79 8.455c.836.553 1.922.553 2.758 0l13.044-8.618c.7-.463 1.122-1.246 1.122-2.086v-9.279c0-.839-.421-1.622-1.121-2.085L16.878.415zm9.743 10.23L21.8 13.882l-4.521-3.288-.029-6.467 9.371 6.518zM13.979 4.133v6.329l-4.633 3.24-4.621-3.099 9.254-6.47zM3.458 13.722l2.991 2.004-2.991 2.093v-4.097zm10.6 13.493l-9.331-6.258 4.661-3.258 4.67 3.133v6.383zm-1.772-11.541l3.021-2.113 3.519 2.313-3.119 2.095-3.421-2.295zm5.068 11.541V20.83l4.463-2.991 4.805 3.159-9.268 6.217zm10.6-9.288l-3.168-2.082 3.168-2.125v4.207z"/></svg>')  no-repeat right center/19px;
}



.m--dr {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgb(29, 53, 78)" viewBox="0 0 24 24"><path d="M12 0c-6.628 0-12 5.373-12 12s5.372 12 12 12 12-5.373 12-12-5.372-12-12-12zm9.885 11.441c-2.575-.422-4.943-.445-7.103-.073-.244-.563-.497-1.125-.767-1.68 2.31-1 4.165-2.358 5.548-4.082 1.35 1.594 2.197 3.619 2.322 5.835zm-3.842-7.282c-1.205 1.554-2.868 2.783-4.986 3.68-1.016-1.861-2.178-3.676-3.488-5.438.779-.197 1.591-.314 2.431-.314 2.275 0 4.368.779 6.043 2.072zm-10.516-.993c1.331 1.742 2.511 3.538 3.537 5.381-2.43.715-5.331 1.082-8.684 1.105.692-2.835 2.601-5.193 5.147-6.486zm-5.44 8.834l.013-.256c3.849-.005 7.169-.448 9.95-1.322.233.475.456.952.67 1.432-3.38 1.057-6.165 3.222-8.337 6.48-1.432-1.719-2.296-3.927-2.296-6.334zm3.829 7.81c1.969-3.088 4.482-5.098 7.598-6.027.928 2.42 1.609 4.91 2.043 7.46-3.349 1.291-6.953.666-9.641-1.433zm11.586.43c-.438-2.353-1.08-4.653-1.92-6.897 1.876-.265 3.94-.196 6.199.196-.437 2.786-2.028 5.192-4.279 6.701z"/></svg>')  no-repeat right center/18px;
}
.m--be {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgb(29, 53, 78)" viewBox="0 0 24 24"><path d="M22 7h-7v-2h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14h-8.027c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988h-6.466v-14.967h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zm-3.466-8.988h3.584c2.508 0 2.906-3-.312-3h-3.272v3zm3.391 3h-3.391v3.016h3.341c3.055 0 2.868-3.016.05-3.016z"/></svg>')  no-repeat right center/22px;
}
.m--md {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="rgb(29, 53, 78)" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.846 6.887c.03-.295-.083-.586-.303-.784l-2.24-2.7v-.403h6.958l5.378 11.795 4.728-11.795h6.633v.403l-1.916 1.837c-.165.126-.247.333-.213.538v13.498c-.034.204.048.411.213.537l1.871 1.837v.403h-9.412v-.403l1.939-1.882c.19-.19.19-.246.19-.537v-10.91l-5.389 13.688h-.728l-6.275-13.688v9.174c-.052.385.076.774.347 1.052l2.521 3.058v.404h-7.148v-.404l2.521-3.058c.27-.279.39-.67.325-1.052v-10.608z"/></svg>')  no-repeat right center/18px;
}
.m--cp {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="31.665" height="31.665" fill="rgb(29, 53, 78)"><path d="M16.878.415c-.854-.565-1.968-.552-2.809.034L1.485 9.214C.814 9.682.414 10.447.414 11.266v9.444c0 .84.421 1.623 1.122 2.086l12.79 8.455c.836.553 1.922.553 2.758 0l13.044-8.618c.7-.463 1.122-1.246 1.122-2.086v-9.279c0-.839-.421-1.622-1.121-2.085L16.878.415zm9.743 10.23L21.8 13.882l-4.521-3.288-.029-6.467 9.371 6.518zM13.979 4.133v6.329l-4.633 3.24-4.621-3.099 9.254-6.47zM3.458 13.722l2.991 2.004-2.991 2.093v-4.097zm10.6 13.493l-9.331-6.258 4.661-3.258 4.67 3.133v6.383zm-1.772-11.541l3.021-2.113 3.519 2.313-3.119 2.095-3.421-2.295zm5.068 11.541V20.83l4.463-2.991 4.805 3.159-9.268 6.217zm10.6-9.288l-3.168-2.082 3.168-2.125v4.207z"/></svg>')  no-repeat right center/19px;
}



.link.off {
  left: 90vw;
}
.link {
  color: #fff;
  font-size: 14px;
  font-family: "Content", sans-serif;
  line-height: 25px;
  text-decoration: none;
  display: block;
  /*left: 35vw;*/
  width: 140px;
  position: absolute;
  margin: 120px 15px 0px 0px;
  text-align: right;
  left: 35vw;
}
.link span {
  font-family: "Content", sans-serif;
  font-size: 12px;
}
.link span:not(.span-reading-time) {
  margin-right: 10px;
}
.link svg {
  margin-top: -3px;
  margin-right: 0px;
  vertical-align: middle;
   height: 16px;
}


.ptitle {
  display: block;
  clear: both;
  font-size: 64px;
  color: #eeeff1;
  margin-top: 80px;
  font-family: "Astrit", sans-serif;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.person {
  /*background: transparent url(/img/personi.png) no-repeat bottom right;*/
  position: fixed;
  /*background-size: auto 100%;*/
  display: block;
  right: 0px;
  width: auto;
  height: 95vh;
  bottom: 0px;
  z-index: 1;
  margin-right: 0px;
  opacity: 1;
}
/*.person img {
  width: 100%;
  position: absolute;
  bottom: 0px;
}*/
body.off .person {
  margin-right: -80px;
  opacity: 0;
  filter: blur(40px);
}
.dir {
  display: block;
  font-size: 55vw;
  line-height: 96vh;
  /*color: #fff;*/
  color: #edebe8;
  font-family: "Num", sans-serif;
  position: fixed;
  width: 100vw;
  bottom: 0px;
  margin-left: 0px;
  opacity: 1;
  text-align: left;
  z-index: -9;
  text-shadow: rgba(150, 150, 150, 0.2) 0px 0px 90px;
}
body.off .dir {
  margin-left: -100px;
  opacity: 0;
  filter: blur(40px);
}
#next {
  display: block;
  position: fixed;
  max-width: 530px;
  /*height: 200px;*/
  bottom: 20vh;
  margin: 0px;
  z-index: 4;
  font-family: "Title", sans-serif;
  opacity: 0;
  transform: translateX(-40px);
  visibility: hidden;
  color: rgba(29, 53, 78, 0.3);
  cursor: pointer;
  padding: 60px 70px;
  padding-right: 140px;
  text-decoration: none;
  /*font-size: 20vh;*/
  background: #fff;
  transition: all .3s;
}

#next:hover {
  padding-left: 90px;
}
#next.on {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

#next.ne {
  /*font-size: 45px;*/
  /*text-transform: uppercase;*/
  /*top: 80%;*/
}
#next span {
  font-family: "Astrit", sans-serif;
  font-size: 44px;
  line-height: 54px;
  padding-top: 10px;
  text-decoration: none;
  display: block;
  color: rgba(29, 53, 78, 1);
}


#layout #footer {
  display: none;
}


footer {
  padding-top: 40px;
  display: block;
  border-top: 1px solid #eee;
}

#copy {
  display: block;
  /*float: right;*/
  font-family: "Content", sans-serif;
  font-size: 13px;
  margin-top: 5px;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#share {
  display: flex;
}

#share a {
  font-family: "Astrit", sans-serif;
/*  font-family:
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace; */
  font-weight: bold;
  height: 36px;
  width: 15px;
  color: rgb(29, 53, 78);
  text-align: center;
  padding: 0px 12px;
  line-height: 36px;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  margin-right: 10px;
  border: 0px solid #eee;
  border-radius: 4px;
  background-position: center;
  background-size: 22px;
  background-repeat: no-repeat;
  transition: background .4s;
}





#share a.like {
  width: 70px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  background: rgba(238, 238, 238, 1);
  box-sizing: border-box;
}
#share a.like svg {
  fill: red;
  height: 14px;
  transition: transform .4s;
  margin-top: 2px;
}
#share a.like:hover {
  background-color: inherit;
}
#share a.like:active svg{
  transform: scale(1.3);
}
#share a.like.disabled svg {
  fill: rgba(29, 53, 78, .5);
}
#share a.like.disabled  {
  color: rgba(29, 53, 78, .5);
  pointer-events: none;
}
#share a[href^="https://twitter"] {
  background-color: #55acee;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgb(255, 255, 255)" ><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg>');
}

#share a[href^="https://www.facebook"] {
  background-color: #3b5998;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgb(255, 255, 255)" ><path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"/></svg>');
}

#share a[href^="https://plus.google"] {
  background-color: #d34836;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgb(255, 255, 255)" ><path d="M179.7 237.6L179.7 284.2 256.7 284.2C253.6 304.2 233.4 342.9 179.7 342.9 133.4 342.9 95.6 304.4 95.6 257 95.6 209.6 133.4 171.1 179.7 171.1 206.1 171.1 223.7 182.4 233.8 192.1L270.6 156.6C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257 44 332.2 104.7 393 179.7 393 258 393 310 337.8 310 260.1 310 251.2 309 244.4 307.9 237.6L179.7 237.6 179.7 237.6ZM468 236.7L429.3 236.7 429.3 198 390.7 198 390.7 236.7 352 236.7 352 275.3 390.7 275.3 390.7 314 429.3 314 429.3 275.3 468 275.3"/></svg>');
}

#share a[href^="https://pinterest"] {
  background-color: #BD081C;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgb(255, 255, 255)" ><path d="M266.6 76.5c-100.2 0-150.7 71.8-150.7 131.7 0 36.3 13.7 68.5 43.2 80.6 4.8 2 9.2 0.1 10.6-5.3 1-3.7 3.3-13 4.3-16.9 1.4-5.3 0.9-7.1-3-11.8 -8.5-10-13.9-23-13.9-41.3 0-53.3 39.9-101 103.8-101 56.6 0 87.7 34.6 87.7 80.8 0 60.8-26.9 112.1-66.8 112.1 -22.1 0-38.6-18.2-33.3-40.6 6.3-26.7 18.6-55.5 18.6-74.8 0-17.3-9.3-31.7-28.4-31.7 -22.5 0-40.7 23.3-40.7 54.6 0 19.9 6.7 33.4 6.7 33.4s-23.1 97.8-27.1 114.9c-8.1 34.1-1.2 75.9-0.6 80.1 0.3 2.5 3.6 3.1 5 1.2 2.1-2.7 28.9-35.9 38.1-69 2.6-9.4 14.8-58 14.8-58 7.3 14 28.7 26.3 51.5 26.3 67.8 0 113.8-61.8 113.8-144.5C400.1 134.7 347.1 76.5 266.6 76.5z"/></svg>');
}

#share a:hover {
  background-color: #57626e;
}
#short {
  font-family: 'Content', sans-serif;
  color: rgb(29, 53, 78);
  text-align: left;
  padding: 0px 15px;
  line-height: 36px;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  background: rgba(238, 238, 238, 1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 53, 78)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>')  no-repeat right 12px center/18px;
  font-weight: normal;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
  padding-right: 40px;
}


 #short.done {
  color: rgba(78, 204, 163, 1);
  border-color: rgba(78, 204, 163, .5);
   background: rgba(78, 204, 163, .1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4ecca3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>')  no-repeat right 12px center/18px;
}
.bi {
  margin-top: 50px;
}
.award {
  display: block;
  float: left;
  min-width: 50%;
  margin-top: 30px;
}
.slide {
  position: relative;
}
.ui {
  position: absolute;
  width: 100%;
  height: 190px;
  text-indent: 190px;
  opacity: 0;
  line-height: 90px;
  font-size: 30px;
  font-family: "Astrit", sans-serif;
  cursor: pointer;
  color: #fff;
  display: block;
  bottom: 0px;
  z-index: 1000;
  -webkit-box-shadow: inset 0px -300px 133px -200px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px -300px 133px -200px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px -300px 133px -200px rgba(0, 0, 0, 0.3);
  font-family: 'Content', sans-serif;
}
.slide.current .ui {
  text-indent: 90px;
  opacity: 1;
}
.nr {
  font-family: "Num", sans-serif;
  font-size: 55px;
}

.handle:before {
  content: 'Projects Projects';
  position: absolute;
  display: none;
  width: 100%;
  font-size: 100vh;
  line-height: 100vh;
  opacity: 0.2;
  font-family: "Num", sans-serif;
  text-transform: uppercase;
  color: #edebe8;
  text-shadow: rgba(150, 150, 150, 0.99) -17px 1.76667px 100px;
}
body.off .handle:before {
  opacity: 0;
  line-height: 50vh;
}
blockquote {
  padding: 35px;
  clear: both;
  display: block;
  margin: 20px auto;
  background: #f8f8f8;
}
i {
  font-style: italic;
}
strong {
  font-weight: bold;
}
p {
  margin: 0px;
  padding: 0px;
}
body .icon {
  width: 40px;
  height: 40px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  opacity: 1;
  cursor: pointer;
  z-index: 5;
  transition: all .3s;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 40px;
  text-indent: 50px;
  font-family: 'Astrit', sans-serif;
}
body .icon i {
  width: 2px;
  height: 14px;
  background: #FFF;
  display: block;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 19px;
  position: absolute;
  top: 13px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
body .icon i:after {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  background: #F0F2EB;
  position: absolute;
  left: -6px;
  top: 6px;
}
body .icon:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  left: 15px;
  top: 15px;
  -webkit-box-shadow: 14px 0px 0px rgb(29, 53, 78), -14px 0px 0px rgb(29, 53, 78);
  box-shadow: 14px 0px 0px rgb(29, 53, 78), -14px 0px 0px rgb(29, 53, 78);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: -1;
}
body .icon:before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -webkit-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -o-transform: scale(0.25);
  -ms-transform: scale(0.25);
  transform: scale(0.25);
  background: rgb(29, 53, 78);
  position: absolute;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
body .icon.active:before {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
body .icon.active:after {
  -webkit-box-shadow: 0px 0px 0px rgb(29, 53, 78), 0px 0px 0px rgb(29, 53, 78);
  box-shadow: 0px 0px 0px rgb(29, 53, 78), 0px 0px 0px rgb(29, 53, 78);
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
}
body .icon.active i {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
body .tap {
  width: 80px;
  height: 80px;
  display: block;
  position: absolute;
  left: -20px;
  top: -20px;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background-color: rgba(29, 53, 78, 0.6);
}
body .tap.active {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.op {
  top: 30px !important;
  text-align: left;
  text-indent: 20px;
  line-height: 100px;
  opacity: 0;
  display: block;
  position: relative;
  transition: all .3s;
  font-family: 'Astrit', sans-serif;
  font-size: 14px;
  border-right: 1px solid #f3f3f3;
  cursor: pointer;
}
.op svg {
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 20px;
}
.op:before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  float: left;
  border-radius: 100%;
  position: relative;
  margin-top: 36px;
  margin-left: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 25px;
}

.op.on {
  opacity: 1;
  top: 0px !important;
}
.me {
  transition: all .3s;
}
.me.on {
  margin-top: -100px !important;
  opacity: 0;
}
#options {
  clip: rect(1px, 1px, 1px, 1px);
  height: 90vh;
  opacity: 0;
  display: block;
  position: absolute;
  bottom: 0px;
  transition: all .3s;
}
#options.on {
  clip: inherit !important;
  height: 100vh !important;
  opacity: 1;
}
#options div {
  width: 100vw;
  height: 90vh;
  display: block;
  left: 0px;
  bottom: 0px;
  opacity: 0;
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
}
#options div.on {
  opacity: 1;
  height: 100vh;
  clip: inherit !important;
}
.ok .op {
  opacity: 0.3;
}
audio {
  display: none !important;
}
#options span {
  font-size: 35vh;
  text-align: center;
  display: block;
  margin: 0px auto;
  color: #fff;
  width: 1000px;
  line-height: 65vh;
  font-family: "Num", sans-serif;
  text-transform: uppercase;
  text-shadow: rgba(150, 150, 150, 0.3) 0px 0px 90px;
}
#options p {
  display: block;
  position: absolute !important;
  width: 1000px;
  top: 50%;
  left: 0px;
  text-align: center;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  font-size: 28px;
  line-height: 38px;
  font-family: "Content", sans-serif;
}
#camb span,
#camb p {
  position: relative;
  z-index: 100;
}
#video,
#cam {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 450px;
  height: 400px;
}
.nc.on #video,
.nc.on #cam {}


.filter #ham {
  margin-left: -100px;
}
#nav.filter {
  width: 400px !important;
}
.off #ham {
  margin-left: 0px;
}
.off .search {
  width: 100px !important;
  margin-left: -100px !important;
}
.search.on {
  width: 300px;
}

mark {
  background: transparent;
  color: inherit;
  box-shadow: inset 0px -15px 0px rgba(255, 255, 0, 0.5);
}
.searching .title {

  /*border-bottom: 1px dotted #ccc;*/
}

.searching .num {
  font-size: 24px;
}
.searching .more,
.searching .exe,
.searching .numm {
  display: none;
}
.searching .post {
  margin-bottom: 20px
}
.search {
  background: #fff;
  display: block;
  width: 100px;
  height: 70px;
  float: left;
  margin-left: 0px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
#search {
  width: 230px;
  outline: none;
  border: 0px;
  border-right: 1px solid #f3f3f3;
  height: 70px;
  font-size: 25px !important;
  font-family: "Astrit";
  color: rgb(29, 53, 78);
  text-transform: uppercase;
  position: absolute;
  padding: 0px;
  top: 0px;
  margin: 0px;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  display: none ;
}
.on #search {
  display: block ;
}
#search::-webkit-input-placeholder {
  color: #eeeff1;
}
#search::-moz-placeholder {
  color: #eeeff1;
}
#search:-ms-input-placeholder {
  color: #eeeff1;
}
#search:-moz-placeholder {
  color: #eeeff1;
}


.loop {
  width: 100px;
  height: 70px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(136, 151, 156)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
  box-sizing: border-box;
  position: absolute;
  transition: all .3s;
  right: 0px;
}
.on .loop {
  width: 70px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(136, 151, 156)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') !important;
}



ins {
  text-decoration: none !important;
}
.keyboard {
  margin: 0px auto;
  display: block;
  width: 1000px;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.keyboard dfn {
  height: 40px;
  display: inline-block;
  font-family: "Astrit", sans-serif;
  font-size: 14px;
  margin-right: 15px;
  font-style: normal;
}
.keyboard abbr {
  display: none;
  clear: both;
  width: 100%;
  margin-top: 10px;
  text-indent: 10px;
}
.keyboard kbd {
  display: block;
  border-radius: 2px;
  margin-right: 5px;
  font-family: "Astrit", sans-serif;
  font-size: 11px !important;
  float: left;
  color: #ccc;
  background: #fff;
  text-align: left;
  box-sizing: border-box;
  min-width: 50px;
  height: 40px;
  line-height: 50px;
  text-indent: 10px;
  padding-right: 10px;
  transition: all .2s;
  box-shadow: rgba(50, 50, 50, 0.0980392) -30.6px 30.6667px 90px;
}
dfn {
  cursor: pointer;
}
dfn:active kbd {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin-top: 2px;
  transition: all .1s;
}
dfn:before {
  display: block;
  content: attr(tip);
  position: absolute;
  margin-top: -100px;
  visibility: hidden;
  opacity: 0;
  left: 0px;
  right: 0px;
  font-size: 28px;
  font-weight: normal;
  font-family: "Content", sans-serif;
  transition: all .3s;
}
dfn:hover::before {
  visibility: visible;
  opacity: 1;
}
/*.parallax > use {
  animation: move-forever 2s linear infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 9s;
  fill: rgba(255, 255, 255, 1);
}
.parallax > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: rgba(255, 255, 255, 0.4);
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 5s;
  fill: rgba(255, 255, 255, 0.6);
}
@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
.nv.on .editorial {} .editorial {
  display: block;
  visibility: visible;
  width: 100vw;
  height: 10vh;
  padding-bottom: 90px;
  margin: 0;
  position: absolute;
  bottom: 0px;
}
@media (max-width: 50em) {
  .content h1 {
    font-size: 12vmax;
  }
  .editorial {
    height: 17vw;
  }
}*/


/*PROJECT */


/* Works slider */

.slider_cont {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60vh;
  margin: auto;
}

.parallax_slider {
  position: relative;
  overflow-x: hidden;
}

.parallax__layer {
  position: absolute;
  left: 0;
  top: 0;
}

.parallax__layer--bg {
  pointer-events: none;
  width: 125%;
  max-width: 1200px;
  height: 100%;
  margin-left: -40%;
  display: table;
}

.parallax__layer--bg span {
  color: #203a5a;
  font-size: 28vw;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 2.3;
  white-space: nowrap;
  display: table-cell;
  vertical-align: middle;
  opacity: 0.2;
  font-family: "Num", sans-serif;
      /*text-shadow: rgba(150, 150, 150, 0.4) 0px 0px 80px;*/
}

.parallax__layer__cell {
  position: absolute;
  width: 100%;
  margin: 0 5%;
  height: 100%;
}

.parallax__layer__cell:nth-child(1) {
  left: 0%;
}

.parallax__layer__cell:nth-child(2) {
  left: 60%;
}

.parallax__layer__cell:nth-child(3) {
  left: 120%;
}

.parallax__layer__cell:nth-child(4) {
  left: 180%;
}

.parallax__layer__cell:nth-child(5) {
  left: 240%;
}


/* carousel */
.carousel-cell {
  height: auto;
  width: 55%;
  max-width: 870px;
  margin: 40px 6%;
  /* total width = 50% + 5% + 5% = 60% */
  opacity: 1;
  /*transform: scale(1);*/
  background-color: rgb(29, 53, 78);
}

.carousel-cell {
    box-shadow: 0px 81px 125px -40px rgba(17,31,49, 0.8),
      0px 221px 225px -190px rgba(17,31,49, 0.3);
  box-sizing: border-box;
  transition: box-shadow .3s;
}
.flickity-button {
  display: none !important; 
}

.carousel-cell.is-next {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.carousel-cell.is-previous {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.carousel-cell.is-selected {
  opacity: 1;
  visibility: visible;
  -webkit-transition: transform 0.6s;
  transition: transform 0.6s;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
  opacity: 0.52;
  transition: opacity 0.6s;
  z-index: 4;
}

.carousel-cell.is-selected .overlay {
  opacity: .1;
}

.carousel-cell img {
  width: 100%;
}

.carousel-cell .button {
  display: block;
  background: #fff;
  border-radius: 60px;
  position: absolute;
  bottom: 90px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  font-size: 12px;
  border: 0px ;
  box-shadow: 0px 0px 0px 0px rgba(255,255,255, 0),
              0px 0px 0px 0px rgba(255,255,255, 0);
  transform: translateY(40px);
  opacity: 0;
}
.carousel-cell:hover .button {
  transform: translateY(0px);
  opacity: 1;
}
.button:hover {
  box-shadow: 0px 0px 0px 12px rgba(255,255,255, 0.1),
              0px 0px 0px 22px rgba(255,255,255, 0.03);
}
/* Aditional styling */

.flickity-prev-next-button.next:after {
  position: relative;
  content: 'next';
}

.flickity-prev-next-button.previous:after {
  position: relative;
  content: 'prev';
}

.flickity-prev-next-button .arrow {
  display: none;
}


.flickity-prev-next-button:hover {
  background: transparent;
}


/* hide disabled button and dots */

.flickity-prev-next-button:disabled {
  display: none;
}

.flickity-page-dots {
  display: none;
}

.flickity-prev-next-button {
  font-size: 0.95em;
  background: transparent!important;
  color: #ccc;
}


/* Slider status */

.slider_status {
  display: inline-block;
  position: relative;
  top: 100%;
  text-align: center;
  margin: auto;
  width: 100%;
  height: 10%;
  bottom: 10%;
  font-size: 0.75em;
  text-align: center;
  color: #333;
  letter-spacing: 20px;
}

.slider_status .cell_number {
  color: #bbb;
}

.slider_status .dash_line {
  letter-spacing: 2em;
}

.title_cont {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  display: block;
  max-width: 100%;
  cursor: pointer;
  z-index: 10;
  overflow: hidden;
  text-align: center;
}

.case_title {
  display: block;
  font-size: 3.3em;
  font-weight: bold;
      font-family: "Astrit", sans-serif;
  color: white;
  text-transform: uppercase;
}

.subtitle_cont {
  display:block;
  overflow:hidden;
  height:18px;
}

.subtitle {
  display: block;
  height:100%;
  color:#fff;
}


.touch .carousel-cell {
    width: 80%;
    margin: 40px 10%;
    overflow: hidden;
    height: 60vh;
  }
.touch .carousel-cell img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 60vh;
    width: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
.touch  .parallax__layer__cell--bg span {
    font-size: 30vh;
  }
.touch  body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
 }


/*@media (min-width:1549px) {
  .parallax__layer__cell--bg span {
    font-size: 17.5em;
  }
}*/


.off .carousel-cell {
transform: translateX(-100px);
opacity: 0;
}
.carousel-cell:nth-child(1) {
transition-delay: .1s;
}
.carousel-cell:nth-child(2) {
transition-delay: .2s;
} 
.slider_cont, .flickity-viewport {
height: 100vh !important;
}
.carousel-cell {
margin: calc(50vh - 15%) 6% !important;
}
.parallax__layer__cell--bg span {
font-size: 25vw;
line-height: 100vh;
}
.edhe {
opacity: 0.5;
transition: all .3s;
transition-delay: .2s;

}
.off .edhe {
opacity: 0;
transform: translateX(-40px);
}
.carousel-cell {
outline: none;
text-decoration: none;
}
/*.carousel-cell span {
  color: #000;
  position: absolute;
  bottom: 0px;
  z-index: -1;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  text-align: left;
  font-size: 20px;
    font-family: "Content", sans-serif;
  transition: all .3s;
}
.carousel-cell:hover span {
  bottom: -60px;
  
}*/


.carousel-cell {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 550px;
outline: none;
border-radius: 3px;
overflow: hidden;
}
.carousel-cell.is-selected .overlay {
opacity: 0;
}

/*mobile css */

@media screen and (max-width: 780px) {
  
.carousel-cell {
    margin: calc(25vh - 15%) 6% !important;
}

} /*end responsve */


.thevideo {
  width: auto;
  height: 550px;
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s;
}
/*! Flickity v2.1.1
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: #333;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/*project inside */
/*project inside */
/*project inside */
/*project inside */
/*project inside */
/*project inside */

.project--content {
     width: 70vw;
     margin: 0px auto;
     position: relative;
     z-index: 2;
}
 .project--hero {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     z-index: 0;
     position: relative;
     transition: all .3s;
}
 .hero--img {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     background-size: cover;
     background-attachment: fixed;
     filter: blur(0px);
     position: relative;
     transition: all .6s;
     background-color:rgb(29, 53, 78); 
}
 .project--breaf {
     display: block;
     width: 100%;
     height: 40vh;
     line-height: 60vh;
     padding: 0px 10vh;
     box-sizing: border-box;
     color: #ffffff;
     bottom: 0px;
     position: absolute;
     background: rgb(34,63,93);
     background: linear-gradient(0deg, rgba(34,63,93,1) 0%, rgba(0,212,255,0) 80%);
}
 .project--breaf h1 {
     margin: 0px;
     font-size: 30px;
     font-family: "Content", sans-serif;
     text-transform: none;
     max-width: 50%;
     display: inline-block;
     font-weight: normal;
}
 .hero--img canvas {
     transition: all .3s;
}
 .off .hero--img canvas{
     filter: blur(15px);
     transform: scale(1.2) translateY(-20px);
}
 .project--breaf{
     transition: all .3s;
}
 .off .project--breaf {
     transform: translate(0px, 20px) !important;
     opacity: 0 !important;
}
 .hero--img svg {
     opacity: 1;
     transform: none;
     transition: all .3s;
}
 .off .hero--img svg {
     top: 42% !important;
     opacity: 0 !important;
}
 .project--year, .project--service {
     font-weight: normal;
     text-align: right;
     float: left;
     font-size: 30px;
}
 .project--year div, .project--service div {
     text-transform: uppercase;
     font-size: 14px;
}
 .project--screen .project--img--large {
     width: 100% ;
     height: auto ;
}
 .project--snip {
     font-family: "Content" !important;
     font-weight: 300;
     font-style: normal;
     font-size: 16px !important;
     line-height: 1.58;
     letter-spacing: .003em;
     width: 80%;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     float: right;
}
 .sect .sect--title{
     font-family: "Astrit", sans-serif;
     font-size: 30px;
     font-weight: bold;
     text-transform: uppercase;
}
 .sect {
     width: 100%;
     display: flex;
     flex-direction: row;
     font-family: "Content" !important;
     font-weight: 300;
     font-style: normal;
     font-size: 16px !important;
     line-height: 1.58;
     letter-spacing: .003em;
     margin-bottom: 120px;
}
 .sect--col {
     box-sizing: border-box;
}
 .sect-col.first {
     width: 80% !important;
     padding-right: 20px !important;
}
 .project--intro {
     text-align: left;
     font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif !important;
     font-weight: 200;
     font-style: normal;
     margin: 0px auto;
     font-size: 35px !important;
     line-height: 1.58;
     letter-spacing: .003em;
     width: 100%;
     box-sizing: border-box;
     padding: 6% 10%;
     background: #fff;
     /*margin-bottom: 120px;*/
}
 .project--intro div {
     max-width: 70vw;
     display: block;
     margin: 0px auto;
}
 .project--screen {
     position: relative;
     display: block;
     width: 100%;
     clear: both;
     margin-bottom: 120px;
}
 .project--screen:hover:before {
     width: 0px;
}
 h1:after, .project--year:after, .project--service:after {
     display: block;
     position: absolute;
     text-transform: uppercase;
     top: 40px;
     font-size: 14px;
     opacity: 0.5;
     margin-left: 2px;
}
 h1:after {
     content: "Project";
}
 .project--year:after {
     content: "Year";
}
 .project--service:after {
    content: "Role"
}
 .project--year, .project--service {
     position: relative !important;
}
 .dts {
     float: right;
     display: inline-block;
     font-family: "Content", sans-serif;
}
 .project--year {
     margin-right: 80px;
}
 .project--logo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) !important;
     margin-top: -30px;
     z-index: 100;
     height: 60px;
}
 .project--logo path,
 .project--logo rect,
 .project--logo polygon {
     fill: #ffffff;
}
.frutiger {
  height: 80px;
}
.project--logo.mik {
  top: 40%;
}




/*project gris */

 .project--intro {
    padding-bottom: 300px;
  }
  .bg--tel--n {
   background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
   padding-top: 120px;
   padding-bottom: 120px;
  }
  .project--screen .project--img--large {
    box-shadow: 0px 0px 110px -40px rgba(0, 0, 0, 0.6);
    /*border-radius: 6px;*/
  }
  .bg--tel-n1 .sect {
    background: whitesmoke;
    padding: 220px;
    box-sizing: border-box;
    box-shadow: 0px 0px 110px -40px rgba(0, 0, 0, 0.6);

  }
  video {
     box-shadow: 0px 0px 110px -40px rgba(0, 0, 0, 0.6);
  }
  .project--content.grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 4em;
    -moz-column-gap: 4em;
    -o-column-gap: 4em;
    column-gap: 4em;
    /*display: flex;*/
    /*justify-content: space-between;*/
  }
  .grid img {
    display: block;
    float: left;
    margin: 0 0 4em;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px 0px 110px -40px rgba(0, 0, 0, 0.6);
  }



  .initial {
    margin-top: -200px;
  }

.project--mobile {
    padding: 200px 0px;
    background-size: 11.5% 100%;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, #f2f2f2 1px, #fff 1px, #fff), linear-gradient(to right, #f2f2f2 1px, transparent 1px, transparent);
    background-position: left 0px top, left 0px bottom;
    
  }
  .project--mobile .project--content {
    display: flex;
    justify-content: space-between; 
     /*flex-direction: row;*/
  }
  .project--img--mobile {
    align-self: center;
    border-radius: 8px;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .02), 0px -25px 0px 10px #fff, 0px 25px 0px 10px #fff, 0px 0px 0px 10px #fff, 0px 0px 100px 12px rgba(0, 0, 0, 0.1);
    /*box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.3);*/
    box-sizing: border-box;
    width: 382px;
    float: left;
    display: block;
    /*margin: 30px;*/
    /*vertical-align: top;*/
  }
 /* .project--img--mobile::before {
    content: "asd";
  }*/
  /*.project--img--mobile.two { margin-top: 150px;  }*/
  /*.project--img--mobile.three { margin-top: 250px;  }*/

/*noise background*/

.noise {
  z-index: -10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
}
.post-can {display: none;}
.post-can.on {display: block;}

.post-can canvas {
    touch-action: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-51%, -51%) scale(1.2);
    cursor: inherit;
    position: absolute;
}

/*.noise {
  opacity: .04;
}*/




/*transitions*/
/*transitions*/
/*transitions*/
/*transitions*/
/*transitions*/


nav ul {
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   transition: bottom 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 nav {
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   transition: opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.dir, #intro, #intro .button, .person {
   transition: opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
               margin-left 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
               filter 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
               margin-right 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
               left 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
               transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

aside {
   transition: right 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
               width 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
               transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.more:after {  
  transition: width 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.post:before {  
  transition: margin-left 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}



.posts { 
  transition: opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              margin-right 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }
.search {  
  transition: width 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              margin-left 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
figure ul {  
  transition: bottom 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.link {  
  transition: left 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.login {
  transition: transform 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              visibility 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

#options div{  
  transition: opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              height 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.blogo:before,
.blogo:after {
  transition: background-color 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
  left 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
  width 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.blogo, #logo {
  transition: line-height 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),color 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),text-indent 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),margin-left 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000) !important;
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
#short{  
  transition: color 250ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              background 250ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.carousel-cell .button, .carousel-cell .button:hover {
  transition: transform 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              box-shadow 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
              opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
figure {  
  transition: right 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
             filter 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
             box-shadow 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000),
             background 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

 .project, .hero--data,  .project--intro {
    transition: transform 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
.mobile__post a, .mobile__image {
    transition: transform 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000), opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.carousel-cell {
  transition: transform 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000), opacity 450ms cubic-bezier(0.215, 0.610, 0.355, 1.000) !important;
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) !important;
}
.hmv {
  animation: figureblur 1.3s ;
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
@keyframes figureblur {
  0% { 
    filter: brightness(1.5);
  }
  100% {
    filter: brightness(1);
   }
}

/*about font size :*/

#main .about {
  font-size: 24px;
  line-height: 40px;
}


/*login */
/*login */
/*login */
/*login */

.login {
  position: fixed;
  width: 200px;
  height: 45px;
  visibility: hidden;
  top: 170px;
  left: 0px;
  font-size: 0;
  transform: translateY(-45px);
  z-index: 9;
}
/*.login.off {
  transform: translateY(-45px);
  visibility: visible;
}*/
.loggedin .login {
  /*display: block;*/
  transform: translateY(0px);
  visibility: visible;
}

.login form input {
  display: block !important;
  width: 100%;
  height: 45px;
  border: 0px solid;
  border-top: 1px solid #f3f3f3;
  padding: 10px 20px;
  box-sizing: border-box;
  font-family: "Content", sans-serif;
  font-size: 16px;
  outline: none;
}

input[type="submit"] {visibility:hidden;width: 1px;height: 0px;}

/*.login span {
  margin-bottom: 30px;
  font-size: 16px;
  color: #fff;
  font-family: "Content",sans-serif;
  text-align: left;
  display: block;
}*/
/*.login svg {
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  margin-right: 20px;
}*/

.login input[name=pwd] {
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(136, 151, 156)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/></svg>') no-repeat left 10px center;
  background-size: 24px;
  padding-left: 44px;
}
/*code */

pre {

  padding: 30px;
      word-wrap: normal;
    background-color: rgb(255, 255, 255);
    overflow: auto;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 2px ;
        font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
        font-size: 12px;
    color: rgb(51, 51, 51);
    text-align: left;
    direction: ltr;
        text-rendering: auto;
        line-height: 1.4;
        font-weight: 400;
        margin-left: -30px; 
        width: calc(100% + 60px);
        box-sizing: border-box;
}

/*pre:hover,
pre:focus {
  width: min-content;
}*/

/*responsive */
/*responsive */
/*responsive */
/*responsive */
/*responsive */
/*responsive */
/*responsive */
@media screen and (max-width: 780px) ,only screen and (max-width: 1024px) and (min-width: 780px)  {
  #nav.off {
    bottom: -80px !important;
  }

  #nav.off ~ .on {
    bottom: 0px !important;
  }
  #nav.off.menuopen {
    bottom: 0px !important;
  }
  #nav {
    width: 100vw;
    bottom: 0px;
    top: inherit;
    background: #fff;
    border-top: 1px solid #f3f3f3;
    transition: all .3s;
  }

  #ham,
  #logo {
    width: 50vw;
  }
  #nav.off #logo {
    margin-left: 0px;
  }
  #nav.off #ham {
    margin-left: 0px;
  }

  nav ul {
    top: 0px;
    height: 100%;
    height: -webkit-calc(100% - 70px);
    height: -moz-calc(100% - 70px);
    height: calc(100% - 70px);
  }
  nav ul li {
    width: 100%;
    height: 25%;
    border-bottom: 1px solid #f3f3f3;
  }
/*  #nav.off {
    margin-bottom: 0px !important;
  }*/
  .person {
    height: 97vh;
    bottom: 0px;
    margin-right: 0px !important;
    right: 0px !important;
  }
  #sig {
    display: none;
  }
  .dir {
    font-size: 127vw;
        line-height: 132vh;
        margin-left: -108px;
  }
  #intro {
    bottom: 105px !important;
    top: inherit;
    left: 0px !important;
    width: 100vw;
  }
  .posts {
    padding: 40px;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0px !important;
  }
  aside {
    width: 100vw !important;
    overflow: hidden;
    padding-bottom: 70px;
  }
  aside .title {
    /*font-size: 25px !important;*/
    padding-top: 0px !important;
    color: rgb(29, 53, 78) !important;
  }
  .num {
    font-size: 45px;
  }
  .button {
    margin: 0px auto !important;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
  #menu a {
    margin: 40px 0px 0px 40px;
    padding: 0px !important;
    line-height: 30px;
    border-bottom: 0px;
  }
  #menu a span {
    margin: 0px;
    font-size: 30px;
    opacity: 1 !important;
  }
/*  #share {
    height: 100%;
    float: left;
    clear: both;
    width: 100%;
  }
  #share a {
    width:72px;
    min-height: 72px;
    margin: 0px;
    margin-right: 15px;
    margin-bottom: 6%;
    float: left;
    display: block;
    box-sizing: border-box !important;
  }
  #share a:nth-child(4) {
    margin-right: 0px !important;
  }*/
  footer {
    display: block;
  }
  #share a{
     flex: 1 1 auto;
  }
  #share a.like {
    width: 58px;
  }
  #share a:last-child{
    margin-right: 0px;
  }
  #copy {
    margin-top: 20px;
  }
  .single #main,
  .single #main.on.zero {
    right: 0px;
    width: 100vw !important;
  }
  /*    .single #main.on {
    margin-top: 45vh ;
  }*/
  .single figure {
    height: 100vh;
    position: fixed;
  }
  .single figure ul {
    height: 100%;
  }
  .link.off {
    left: inherit;
    bottom: 13vh;
  }
  .link {
    left: inherit;
    bottom: 58vh;
  }
  .windows {
    float: inherit;
    margin: 5vw auto 13vh 5vw !important;
  }
  .browser {
    width: 90vw;
    margin-bottom: 5vw;
  }
  .thumbs div {
    background: #88979c !important;
    height: 10px !important;
    width: 20px !important;
  }
  .thumbs {
    right: 10px !important;
    left: inherit !important;
    bottom: 95px !important;
  }

  .prn span,
  .ord {
    display: none !important;
  }
  .prn {
    border-top: 1px solid #f3f3f3;
    width: 100vw !important;
    left: 0px !important;
    font-size: 18px !important;
    text-indent: 20px !important;
    color: #88979c !important;
    height: 70px !important;
    background: #fff !important;
    bottom: 70px !important;
    line-height: 70px !important;
  }
  nav li a::before,
  nav li a::after {
    display: none !important;
  }
  .mobile__image {
    width: 100vw;
    height: auto;
    margin: -40px;
    margin-bottom: 60px;
    box-sizing: border-box;
  }


  /*projects*/
.mobile__post {
  display: block;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 50px;
  background-color: #11243c !important;
      background-size: 22.5% 100%;
      background-repeat: repeat-x;
      background-image: linear-gradient(to right, #142944 1px, transparent 1px, transparent), linear-gradient(to right, #142944 1px, transparent 1px, transparent);
      background-position: left 0px top, left 0px bottom;
  
}
  .mobile__post a {
    width: 100%;
    position: relative;
    min-height: 240px;
    background: #fff;
    display: block;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 3px;
    z-index: 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(0px);
        /*box-shadow: 0px 21px 25px -10px rgba(29, 53, 78, 1),*/
                    /*0px 41px 65px -60px rgba(29, 53, 78, 1);*/
  }
  .off .mobile__post a {
  transform: translateY(20px);
  opacity: 0;
  }
  .going .mobile__post a {
  transform: translateY(-20px);
  opacity: 0;
  }

  .mobile__post a:nth-child(1) {
  transition-delay: .1s !important;
  } 
  .mobile__post a:nth-child(2) {
  transition-delay: .2s !important;
  } 
  .mobile__post a:nth-child(3) {
  transition-delay: .3s !important;
  } 
  .mobile__post a:nth-child(4) {
  transition-delay: .4s !important;
  } 
  .mobile__post a:nth-child(5) {
  transition-delay: .5s !important;
  } 
  .mobile__post a:nth-child(6) {
  transition-delay: .6s !important;
  } 

  .off .post, .off footer {
    transform: translateY(30px);
    opacity: 0;
  }
  .off .mobile__image {
    transform: translateY(-30px);
    opacity: 1;
  }
 .gist {
    width: 114% !important;
    margin: 30px -25px !important ;
    /*padding: 25px !important;*/
  }
  nav {
    background-image: none;
  }
  .hero--img--mobile img{
    width: 100%;
  }
  .project--hero {
    height: auto;
  }
  .project--intro {
    padding: 40px !important;
    font-size: 24px !important;
  }
  .project--intro div {
    max-width: 100%;
  }
  .hero--data {
    /*border-top: 1px solid #f3f3f3;*/
    /*border-bottom: 1px solid #f3f3f3;*/
    background: #fff;
    /*height: 70px;*/
    font-size: 0;
  }
  .hero--img--mobile {
    font-size: 0;
  }
  .hero--data div {
    display: inline-block;
    /*display: table-cell;*/
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 20px;
    margin: 0px;
    font-size: 14px;
    font-family: "Astrit", sans-serif !important;
    font-weight: normal;
    border-right: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    text-align: center;
  }
  .hero--data div:after {
    opacity: 0.5;
    font-size: 10px;
  }
  .hero--data div:nth-child(1):after {
    content: "PROJECT";
    display: block;
  }
  .hero--data div:nth-child(2):after {
    content: "YEAR";
    display: block;
  }
  .hero--data div:nth-child(3):after {
    content: "ROLE";
    display: block;
  }
  .off .project {
    transform: translateY(-30px);
  }
  .off .hero--data {
    transform: translateY(-40px);
  }
  .off .project--intro {
    transform: translateY(-60px);
  }
  .sect {
    display: block;
    padding: 40px !important;
    margin-bottom: 0px;
  }
  .sect-col, .sect-col.first  {
    width: 100% !important;
    display: block !important;
  }
  .project--intro {
    margin-bottom: 0px;
    padding-bottom: 200px !important;
  }
  .project--content {
    width: 100%;
    padding: 40px;
    padding-bottom: 0px;
    box-sizing: border-box;
  }
  .grid.mik {
    padding: 0px;
  }
  .project--img--mobile {
    margin: 0px !important;
    width: 100%;
    margin-bottom: 120px !important;
  }
  .project--screen {
    margin-bottom: 40px;
  }
  .project--content.grid {
    column-count: 1;
  }
  .grid img {
    margin-bottom: 40px;
  }
  .project--mobile {
    padding: 40px 0px;
  }
  .bg--tel-n1.mik {
    margin-bottom: 40px;
  } 
  .project.mik {
    padding-bottom: 80px;
  }
  .bg--tel-n1.project--content.mik {
    padding-top: 0px;
    padding-bottom: 0px !important;
    margin-bottom: 0px;
  }
  /*nav mobile */

    nav {
    background-color: #fff !important;
  }
  nav a {
    font-size: 20px;
    font-family: 'Astrit', sans-serif;
    border-right: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    box-sizing: border-box;
    height: 40.65vh;
    width: 50vw;
    display: inline-block;
    float: left;
    text-decoration: none;
    text-align: center;
    color: currentColor;
    line-height: 40vh;
    background-size: auto 25px  !important;
    background-position: center !important;
    transform: translateY(20px);
    opacity: 0;
    transition: opacity .3s, transform .3s;
  }

  nav.on a {
  transform: translateY(0px);
  opacity: 1;
  }
  nav a:nth-child(1) {transition-delay: .03s;}
  nav a:nth-child(2) {transition-delay: .05s;}
  nav a:nth-child(3) {transition-delay: .07s;}
  nav a:nth-child(4) {transition-delay: .09s;}
  nav a:nth-child(5) {transition-delay: .11s;}
  nav a:nth-child(6) {transition-delay: .13s;}
  nav a:nth-child(7) {transition-delay: .15s;}
  nav a:nth-child(8) {transition-delay: .17s;}
  nav a[class*="m--"] {
    width: calc(100% / 4);
    height: 10vh;
    background-color: rgba(249, 249, 249, .3);
  }
  .single .title, .title {
    max-width: 100%;
  }
  .exe img {
    width: 100%;
  }

}
@media only screen and (max-width: 1024px) and (min-width: 780px) {
  .posts, .mobile__post, .project--content, .project--intro {
    padding: 100px !important;
  }
  .project--intro {
    padding-bottom: 200px !important;
  }
  .mobile__post a {
    min-height: 400px;
  }
  .hero--data div {
    font-size: 22px;
  }
  .project--content.grid.mik {
    padding: 0px !important;
  }
  .no--ipad {
    display: none !important;
  }
}
@media screen and (min-width: 1224px) {}
@media screen and (min-width: 1824px) {}




/*camera motion stylizing */


#motions {
  visibility: visible !important;
  position: fixed;
  bottom: 70px !important;
  right: 40px;
  border-radius: 1300px;
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, .2);
  object-fit: cover;
  overflow: hidden;
  transition: all .3s;
  z-index: 12;
  transition: all .6s;
}
#motions video {
  visibility: visible !important;
  width: 200px;
  height: 200px;
  margin-top: -50px;
  margin-left: -50px
}

.avatar--visualizer {
    width: 110px;
    height: 110px;
    background-color: rgba(255,255,255,.1);
    /*opacity: .1;*/
    border-radius: 50%;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    position: fixed !important;
    right: 35px;
    bottom: 95px;
    z-index: 1;
    box-shadow: 0px 0px 0px 2px #11243c, 0px 0px 1px 3px rgba(255,255,255,.1);
}


/*.circle-btn {
  position: absolute;
    width: 140px;
    height: 140px;
  border-radius: 70px;
  outline: none;
  background-color: white;
}*/
.stop--motions {
  width: 70px;
  height: 30px;
  background: red;
  border-radius: 100px;
  position: fixed;
  bottom: 10px;
  right: 48px;
  color: #fff;
  font-weight: bold;
  font-family: "Content", sans-serif;
  font-size: 14px;
  line-height: 30px;
  text-align: right;
  padding-right: 10px;
  z-index: 12;
  cursor: pointer ;
  transition: all .6s;
} 
.stop--motions svg {
  float: left;
  height: 20px;
  margin-top: 5px;
  margin-left: 4px;
  
}
.amo {
  margin-right: -200px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
.amo.active {
  opacity: 1;
  visibility: visible;
  margin-right: 0px;
}
.amo.active .stop--motions {
  bottom: 40px !important;
}
.amo.active #motions {
  bottom: 100px !important;
}

.single--project {

        background-color: #11243c !important;
    background-size: 22.5% 100%;
    background-repeat: repeat-x;
    background-image: linear-gradient(to right, #142944 1px, transparent 1px, transparent), linear-gradient(to right, #142944 1px, transparent 1px, transparent);
    background-position: left 0px top, left 0px bottom;
  
}

/*portfolio */


  .portfolio--wrapper .parallax_slider {
        background-color: #11243c !important;
        background-size: 22.5% 100%;
        background-repeat: repeat-x;
        background-image: linear-gradient(to right, #142944 1px, transparent 1px, transparent), linear-gradient(to right, #142944 1px, transparent 1px, transparent);
        background-position: left 0px top, left 0px bottom;
  }
  .portfolio--wrapper .noise {
    z-index: 1;
    opacity: 0.09;
  }
  .portfolio--wrapper .carousel {
    z-index: 2;
    /*position: absolute;*/
  }
  .portfolio--wrapper .carousel-cell.hv {
    font-family: "Content", sans-serif;
    color: #fff;
    font-size: 24px;
    /*padding: 4%;*/
  }
  .portfolio--wrapper .carousel-cell.hv .overlay {
    display: block;
    opacity: 0.5;
  }
  .portfolio--wrapper .txti {
    position: relative;
    z-index: 2;
    padding: 60px;
  }
  .portfolio--wrapper #vocvs, .portfolio--wrapper #vofg {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 0;

  }


/*button*/
/*button*/
/*button*/
/*button*/


.portfolio--wrapper .learn-more {
  /*position: relative;*/
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: "Content", sans-serif;
      position: absolute;
    bottom: 100px;
    opacity: 0;
    visibility: 0;
    left: 50%;
    margin-left: -6rem;
    transition: all .3s;
    z-index: 6;
}
.portfolio--wrapper .is-selected:hover {
  background: #1c3452 !important;
  /*border-radius: 300px;*/
}
.portfolio--wrapper .is-selected:hover .learn-more {
  bottom: 120px;
  opacity: 1;
  visibility: 1;
}
.portfolio--wrapper .is-selected .learn-more:hover ~ video {
  /*filter: blur(8px);*/
  /*opacity: .1;*/
  /*height: 650px !important; */

}
/*.carousel-cell.is-selected .overlay {
  z-index: 2;
}*/
.portfolio--wrapper .carousel-cell.is-selected .learn-more:hover ~ .overlay {
  /*filter: blur(8px);*/
  /*opacity: 0.8 !important;*/
  /*background-color: #fff;*/
}
.portfolio--wrapper .learn-more {
  width: 12rem;
  height: auto;
}
.portfolio--wrapper .learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: rgba(255,255,255,.2);
  border-radius: 1.625rem;
}
.portfolio--wrapper .learn-more:hover p {
  color: #1c3452 !important;
}
.portfolio--wrapper .learn-more:hover .circle{
  background: #fff;
  box-shadow: 0px 20px 40px -15px rgba(0, 0, 0, .3);
}

.portfolio--wrapper .learn-more:hover .circle .iconmo.arrow::before {
border-color: #1c3452 !important;
}
.portfolio--wrapper .learn-more:hover .circle .iconmo.arrow {
  background-color: #1c3452 !important;
}
.portfolio--wrapper .learn-more .circle .iconmo {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #1c3452;
}
.portfolio--wrapper .learn-more .circle .iconmo.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.portfolio--wrapper .learn-more .circle .iconmo.arrow::before {
  position: absolute;
  content: '';
  top: -0.30rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.portfolio--wrapper .learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
.portfolio--wrapper .learn-more:hover .circle {
  width: 100%;
}
.portfolio--wrapper .learn-more:hover .circle .iconmo.arrow {
  background: #fff;
  -webkit-transform: translate(1rem, 0);
          transform: translate(1rem, 0);
}
.portfolio--wrapper .learn-more:hover .button-text {
  color: #fff;
}

.portfolio--wrapper .carousel-cell.lgoz {
  background: transparent !important;
  box-shadow: none !important;
  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    box-shadow: none !important;
    width: 400px !important;
}
.portfolio--wrapper .carousel-cell.hv {
  background: transparent !important;
  box-shadow: none !important;
}

.portfolio--wrapper .lgoz svg {
  transform: scale(2.6);
}

    .novagear--project.cont {
    /*height: 200vh;*/
    width: 100vw;
    overflow: hidden;
    margin-bottom: 120px;
    }
    
    .novagear--project .grid-layout {
    padding: 2em;
    width: 100%;
    height: 150vh;
    /*margin-bottom: 80px;*/
    background-color: #505050;
    }
    .novagear--project .holdrz {
    width: 120%;
    -webkit-webkit-transform:rotate(-25deg) ;
    -moz-webkit-transform:rotate(-25deg) ;
    -ms-webkit-transform:rotate(-25deg) ;
    -o-webkit-transform:rotate(-25deg) ;
    webkit-transform:rotate(-25deg) ;
    transform: rotate(-25deg) translateY(-400px) ;
    overflow: hidden;
    -webkit-column-count: 6;
    -moz-column-count: 6;
    -o-column-count: 6;
    column-count: 6;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    -o-column-gap: 2em;
    column-gap: 2em;
    box-sizing: border-box;
    }
    .novagear--project .grid-layout img {
    border-radius: 2px;
    display: block;
    float: left;
    margin: 0 0 2em;
    width: 100% !important;
    box-sizing: border-box;
    }

    canvas#vocvs, canvas#vofg {
      position: fixed;
      z-index: 1;
      top: 0px;
      display: block;
      width: 100vw !important;
      height: 100vh !important;
          mix-blend-mode: overlay;
    }

        .load {
      position: relative;
      z-index: 30;
    }
    .loading:not(.menuopen) .bar:before {
      bottom: 0px;
      transition: all .1s;
      background-color: #fff;
      transition-delay: .4s;
    }
    .loading:not(.menuopen) .bar:after {
      top: 0px;
      transition: all .1s;
      background-color: #fff;
      transition-delay: .4s;
    }
    .loading:not(.menuopen) .bar {
      background-color: #fff;
      z-index: 0;
      transition-delay: .4s;
    }


    .loading:not(.menuopen) .load:before {
      content: "";
      position: absolute;
      height: 3px;
      border-radius: 15px;
      background-color: #88979c;
      -webkit-animation: load 1.5s cubic-bezier(0, 0, 0.58, 1) infinite;
              animation: load 1.5s cubic-bezier(0, 0, 0.58, 1) infinite;
    }
    @-webkit-keyframes load {
      0% {
        left: 0;
        right: 90%;
      }
      25% {
        left: 0;
        right: 0;
      }
      50% {
        left: 90%;
        right: 0;
      }
      75% {
        left: 0;
        right: 0;
      }
      100% {
        left: 0;
        right: 90%;
      }
    }

    @keyframes load {
      0% {
        left: 0;
        right: 90%;
      }
      25% {
        left: 0;
        right: 0;
      }
      50% {
        left: 90%;
        right: 0;
      }
      75% {
        left: 0;
        right: 0;
      }
      100% {
        left: 0;
        right: 90%;
      }
    }

    .mobile__post .txti {
      color: #fff;
      font-family: "Content", sans-serif;
      padding: 40px 0px;
      font-size: 20px;
      text-align: center;
    }