div.navi, div.menu, div#menu, img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
textarea {
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
/*********************************/
*::selection { background: #aaf !important; color: #000 !important; }
*::-moz-selection { background: #aaf !important; color: #000 !important; }
*::-webkit-selection { background: #aaf !important; color: #000 !important; }
/*********************************/

/* TRANSITIONS */
div.block div, div.block {
  -webkit-transition: all 750ms ease-out;
  -moz-transition: all 750ms ease-out;
  -ms-transition: all 750ms ease-out;
  -o-transition: all 750ms ease-out;
  transition: all 750ms ease-out;
}
body {
  -webkit-transition: all 250ms 250ms ease-out;
  -moz-transition: all 250ms 250ms ease-out;
  -ms-transition: all 250ms 250ms ease-out;
  -o-transition: all 250ms 250ms ease-out;
  transition: all 250ms 250ms ease-out;
}
#menu, div#menu div.vis, div#menu::after {
  -webkit-transition: all 750ms ease-out;
  -moz-transition: all 750ms ease-out;
  -ms-transition: all 750ms ease-out;
  -o-transition: all 750ms ease-out;
  transition: all 750ms ease-out;
}
div.project span.button {
  -webkit-transition: opacity 750ms ease-out, left 750ms ease-out, right 750ms ease-out;
  -moz-transition: opacity 750ms ease-out, left 750ms ease-out, right 750ms ease-out;
  -ms-transition: opacity 750ms ease-out, left 750ms ease-out, right 750ms ease-out;
  -o-transition: opacity 750ms ease-out, left 750ms ease-out, right 750ms ease-out;
  transition: opacity 750ms ease-out, left 750ms ease-out, right 750ms ease-out;
}
.gallery img, .gallery > .text, body {
  -webkit-transition: margin .75s ease-out;
  -moz-transition: margin .75s ease-out;
  -ms-transition: margin .75s ease-out;
  -o-transition: margin .75s ease-out;
  transition: margin .75s ease-out;
}
div.project > div, div.project {
  -webkit-transition: margin 750ms ease-out, opacity 250ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;
  -moz-transition: margin 750ms ease-out, opacity 250ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;
  -ms-transition: margin 750ms ease-out, opacity 250ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;
  -o-transition: margin 750ms ease-out, opacity 250ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;
  transition: margin 750ms ease-out, opacity 250ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;
}
div.project.mo > div.icon {
  -webkit-transition: opacity 250ms ease, width 50ms ease-out;
  -moz-transition: opacity 250ms ease, width 50ms ease-out;
  -ms-transition: opacity 250ms ease, width 50ms ease-out;
  -o-transition: opacity 250ms ease, width 50ms ease-out;
  transition: opacity 250ms ease, width 50ms ease-out;
}
/*div.project.mo > div.icon {*/
  /*-webkit-transition: opacity 50ms ease-out;*/
  /*-moz-transition: opacity 50ms ease-out;*/
  /*-ms-transition: opacity 50ms ease-out;*/
  /*-o-transition: opacity 50ms ease-out;*/
  /*transition: opacity 50ms ease-out;*/
/*}*/
div#menu div::before {
  -webkit-transition: opacity 250ms ease-out;
  -moz-transition: opacity 250ms ease-out;
  -ms-transition: opacity 250ms ease-out;
  -o-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
}
/*div.project > div.icon, div.project {*/
/*-webkit-transition: margin 750ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;*/
/*-moz-transition: margin 750ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;*/
/*-ms-transition: margin 750ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;*/
/*-o-transition: margin 750ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;*/
/*transition: margin 750ms ease-out, left 750ms ease-out, right 750ms ease-out, width 750ms ease-out;*/
/*}*/
.notransition, .notransition * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
div.galery li, body.menu div#menu div {
  -webkit-box-shadow: 2px 5px 9px -4px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 2px 5px 9px -4px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 2px 5px 9px -4px rgba(0, 0, 0, 0.25);
  -o-box-shadow: 2px 5px 9px -4px rgba(0, 0, 0, 0.25);
  box-shadow: 2px 5px 9px -4px rgba(0, 0, 0, 0.25);
}
body.menu #menu::after {
  -webkit-box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.5);
}
.galery .image:not(.visible)::after {
  -webkit-animation: spin 1500ms linear infinite;
  -moz-animation: spin 1500ms linear infinite;
  -o-animation: spin 1500ms linear infinite;
  animation: spin 1500ms linear infinite;
}
/**/
@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/****************************************/
body.loaded #logo.spin svg circle { /*animation: spin_c 3s 1 forwards ease-in-out paused;*/ transform-origin: 50% 50%; stroke: #fff; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
body.loaded #logo.spin svg line:first-of-type { /*!*!*animation: spin_x1 3s 1 ease-in-out paused;*!*!*/ transform-origin: 50% 50%; stroke: #fff; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
body.loaded #logo.spin svg line:last-of-type { /*animation: spin_x2 3s 1 ease-in-out paused;*/ transform-origin: 50% 50%; stroke: #fff; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
/*.visible #logo.spin svg *, #logo.spin.visible svg * { animation-play-state: running !important; }*/
@keyframes spin_c {
  0% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg); stroke: #4a483f; }
  33% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); stroke: #4a483f; }
  67% { -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg); stroke: #4a483f; }
  100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); stroke: #fff; }
}
@keyframes spin_x1 {
  0% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(-45deg); stroke: #4a483f; }
  33% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg); stroke: #4a483f; }
  67% { stroke: #4a483f; }
  100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg); stroke: #fff; }
}
@keyframes spin_x2 {
  0% { -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(45deg); stroke: #4a483f; }
  33% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg); stroke: #4a483f; }
  67% { stroke: #4a483f; }
  100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); stroke: #fff; }
}
/****************************************/
#logo.spin {
  /*-webkit-animation: spin-jump 3s forwards ease-in-out;*/
  /*-moz-animation: spin-jump 3s forwards ease-in-out;*/
  /*animation: spin-jump 3s forwards ease-in-out;*/
}
@keyframes spin-jump {
  37%, 73%, 91%, 100% { top: 50%; -webkit-animation-timing-function: ease-out; }
  0% { left: -117px; top: -117px; -webkit-animation-timing-function: ease-in; -webkit-transform: rotateZ(0deg); }
  37% { left: 20%; }
  55% { top: 25%; -webkit-animation-timing-function: ease-in; }
  73% { }
  82% { top: 37%; -webkit-animation-timing-function: ease-in; }
  91% { }
  96% { top: 48.5%; -webkit-animation-timing-function: ease-in; }
  100% { left: 50%; -webkit-transform: rotateZ(720deg); }
}
/****************************************/
/*.fhade, .fhade .gallery { animation: enter 500ms 1 forwards ease-out paused; transform-origin: 50% 50%; }*/
/*.fhade.a .icon { animation: entera 1.5s 1 forwards ease-in-out paused; transform-origin: 50% 50%; }*/
/*.fhade.b .icon { animation: enterb 1.5s 1 forwards ease-in-out paused; transform-origin: 50% 50%; }*/
/*body.loaded .fhade.visible, body.loaded .fhade.visible .icon { animation-play-state: running !important; }*/
@keyframes enter {
  0% { opacity: 0; }
  /*20% { opacity: 1; }*/
  100% { opacity: 1; }
}
@keyframes entera {
  0% { left: 0; right: 0; width: 100%; z-index: 100; opacity: 1; }
  33% { left: 0; right: 0; width: 100%; z-index: 100; }
  100% { right: 0; left: 35%; width: 65%; z-index: 2; opacity: 1; }
}
@keyframes enterb {
  0% { left: 0; right: 0; width: 100%; z-index: 100; opacity: 1; }
  33% { left: 0; right: 0; width: 100%; z-index: 100; }
  100% { left: 0; right: 35%; width: 65%; z-index: 2; opacity: 1; }
}
/**************************************** /
div.project.hover span.button.view, div.project span.button:hover, #logo.done:hover { animation: shake 500ms 1 forwards ease-out; transform-origin: 50% 50%; }
@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}
/***********************************/