@import "../../fonts/font.css";
/*@font-face {
  font-family: 'Century Gothic';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/Century-Gothic.eot');
  src: url('../fonts/Century-Gothic-2.eot') format('embedded-opentype'),
       //url('../fonts/Century-Gothic.woff2') format('woff2'),
       url('../fonts/Century-Gothic.woff') format('woff'),
       url('../fonts/Century-Gothic.ttf') format('truetype');
}

@font-face {
  font-family: 'Century Gothic';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/gothic.eot');
  src: url('../fonts/gothic.woff') format('woff'),
       url('../fonts/gothic.ttf') format('truetype');
}
*/
*,
*:after,
*:before {
  box-sizing: border-box;
}
body {
  font-size: 100%;
  font-family: "Century Gothic", sans-serif;
  line-height: 1.4;
  color: #222;
}
body.rtl {
  font-weight: 300;
  font-size: 1em;
  direction: rtl;
}
body.persian {
  font-family: "Century Gothic", irsans, Tahoma, sans-serif;
}
body.arabic {
  font-family: "Century Gothic", Kufi, irsans, Tahoma, sans-serif;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
/* ============================================================
  LOADER
============================================================ */
.loader {
  margin: auto;
  font-size: 10px;
  position: relative;
  display: inline-block;
  text-indent: -9999em;
  border: 0.2em solid rgba(255, 255, 255, 0.4);
  border-left-color: #666666;
  -webkit-animation: load 1.1s infinite linear;
          animation: load 1.1s infinite linear;
  border-radius: 50%;
  width: 3em;
  height: 3em;
}
.loader.w {
  border-color: rgba(255, 255, 255, 0.4);
  border-left-color: #fff;
}
@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* ============================================================
  PRE-LOADER
============================================================ */
.pre-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  background-color: #fff;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.pre-loader canvas {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 1;
}
.pre-loader p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: color 1.5s;
          transition: color 1.5s;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  z-index: 20;
}
.pre-loader p span {
  font-size: 11px;
  color: #ccc;
  display: block;
}
.pre-loader:after {
  margin: auto;
  font-size: 10px;
  position: relative;
  display: inline-block;
  text-indent: -9999em;
  border: 0.2em solid rgba(255, 255, 255, 0.4);
  border-left-color: #666666;
  -webkit-animation: load 1.1s infinite linear;
          animation: load 1.1s infinite linear;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  visibility: visible;
  opacity: 1;
  position: fixed;
  bottom: 30px;
  left: 50%;
  margin-left: -2em;
  z-index: 300;
  content: '';
  width: 4em;
  height: 4em;
  -webkit-transition: opacity 1s;
          transition: opacity 1s;
}
.pre-loader:after.w {
  border-color: rgba(255, 255, 255, 0.4);
  border-left-color: #fff;
}
.pre-loader.active p {
  color: #333;
  opacity: 1;
  visibility: visible;
  -webkit-animation-name: fadeInOut ;
          animation-name: fadeInOut ;
  -webkit-animation-duration: 2.6s;
          animation-duration: 2.6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.pre-loader.active:after {
  opacity: 0;
}
@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
a {
  text-decoration: none;
}
a,
a:visited {
  color: #1b1b1b;
}
/* ============================================================
  BODY
============================================================ */
#body {
  position: relative;
  width: 100%;
  height: 100%;
}
#body #logo {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  direction: ltr;
  -webkit-transition: all 1s ease-out;
          transition: all 1s ease-out;
  width: 3.5%;
  z-index: 30;
}
#body #logo.no-transition {
  -webkit-transition: none;
          transition: none;
}
#body #logo:not(.back) {
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  top: 53%;
  left: 1.5%;
}
#body #logo h1 {
  position: absolute;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  opacity: 0;
  font-weight: 300;
  overflow: hidden;
  top: 60%;
  left: 69%;
  font-size: 1.1vw;
  letter-spacing: .06vw;
  line-height: 1.1vw;
  margin: 0;
  -webkit-transition: opacity .6s;
          transition: opacity .6s;
}
#body #logo h1 small {
  display: block;
  text-indent: .1vw;
  letter-spacing: 0.2vw;
  font-size: .8vw;
}
#body #logo h1:after {
  content: "";
  display: block;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  position: absolute;
  background: #ffffff;
  background: -webkit-linear-gradient(left, transparent, #ffffff, #ffffff, #ffffff);
  background: linear-gradient(to right, transparent, #ffffff, #ffffff, #ffffff);
  -webkit-transition: left .9s;
          transition: left .9s;
}
#body #logo h1.active {
  -webkit-transition: opacity 1s ease-out;
          transition: opacity 1s ease-out;
  opacity: 1;
}
#body #logo h1.active:after {
  -webkit-transition: left 1.8s ease-out;
          transition: left 1.8s ease-out;
  left: 100%;
}
#body #logo #logo-svg {
  opacity: .9;
  -webkit-transform: scale(0.9, 0.62) skew(0deg, -50deg);
      -ms-transform: scale(0.9, 0.62) skew(0deg, -50deg);
          transform: scale(0.9, 0.62) skew(0deg, -50deg);
  width: 100%;
  -webkit-transition: all 0.5s;
          transition: all 0.5s;
}
#body #logo #logo-svg path {
  stroke-linejoin: miter;
}
#body #logo > a {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
          transition: all 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 25px;
  height: 25px;
  overflow: hidden;
}
#body #logo #back-svg {
  height: 37.5px;
  width: 37.5px;
  -webkit-transform: rotate(135deg) translate(0%, 24%);
      -ms-transform: rotate(135deg) translate(0%, 24%);
          transform: rotate(135deg) translate(0%, 24%);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
#body #logo #back-svg path {
  stroke-linejoin: miter;
}
#body #logo.back {
  top: 4.5%;
  left: 2%;
}
#body #logo.back h1,
#body #logo.back #logo-svg {
  opacity: 0;
  visibility: hidden;
}
#body #logo.back > a {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 767px) {
  #body #logo.back {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    left: 12px;
  }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  #body #logo.back {
    top: 6%;
    left: 9px;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  #body #logo.back {
    top: 5%;
  }
}
@media screen and (max-width: 767px) {
  #body #logo {
    z-index: 360;
  }
  #body #logo .main-title {
    position: absolute;
    top: 0;
    left: 40px;
    margin: 0;
    white-space: nowrap;
    line-height: 25px;
    -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
    -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
            transform-origin: left center;
    font-size: 28px;
    visibility: hidden;
    opacity: 0;
  }
  #body #logo.main-title-active .main-title {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  #body #logo:not(.back) {
    top: 52.8%;
    left: 2.5px;
    width: 42px;
    z-index: 340;
  }
  #body #logo:not(.back) h1 {
    top: 61%;
    left: 65%;
    font-size: 13px;
    line-height: 12px;
  }
  #body #logo:not(.back) h1 small {
    letter-spacing: 3px;
    font-size: 9px;
  }
}
#body #net {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
#body #net svg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#body #net svg path {
  z-index: 20;
}
#body #net svg path.completed {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 0.6;
  stroke-opacity: 1;
  stroke: rgba(0, 0, 0, 0.7);
  display: block;
  fill-opacity: 0;
}
#body #net svg.reloaded path.intersect-mask {
  stroke-width: 1.5;
  stroke: rgba(0, 0, 0, 0.5);
}
#body #net svg.reloaded path.h-mask,
#body #net svg.reloaded path.v-mask {
  stroke-width: 0.7vw;
  stroke: #fff;
}
#body #net svg .header-path {
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-out;
          transition: opacity 0.2s ease-out;
}
#body #net svg .header-path.active {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  #body #net svg {
    width: auto;
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  #net-svg path.home-curve-path.active:nth-of-type(2),
  #net-svg path.home-curve-path.active:nth-of-type(5),
  #net-svg path.home-curve-path.active:nth-of-type(6) {
    -webkit-transition: stroke-dashoffset 1.2s;
            transition: stroke-dashoffset 1.2s;
  }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .not-home #net-svg path.home-curve-path.active:nth-of-type(2) {
    stroke-dashoffset: -215 !important;
  }
  .not-home #net-svg path.home-curve-path.active:nth-of-type(5) {
    stroke-dashoffset: -70 !important;
  }
  .not-home #net-svg path.home-curve-path.active:nth-of-type(6) {
    stroke-dashoffset: -33 !important;
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  .not-home #net-svg path.home-curve-path.active:nth-of-type(2) {
    stroke-dashoffset: -175 !important;
  }
  .not-home #net-svg path.home-curve-path.active:nth-of-type(5) {
    stroke-dashoffset: -70 !important;
  }
  .not-home #net-svg path.home-curve-path.active:nth-of-type(6) {
    stroke-dashoffset: -29 !important;
  }
}
.just-stroke {
  fill-opacity: 0;
  stroke-opacity: 1;
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: rgba(0, 0, 0, 0.7);
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
/* ============================================================
  MAIN-MENU
============================================================ */
.main-menu {
  padding: 0;
  margin: 0;
  z-index: 100;
}
@media screen and (min-width: 768px) {
  .main-menu li {
    display: inline-block;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    visibility: hidden;
    -webkit-transform: translate(-100%, -50%);
        -ms-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
  }
  .main-menu li.active,
  .main-menu li.stay {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(10%, -50%);
        -ms-transform: translate(10%, -50%);
            transform: translate(10%, -50%);
    -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out, top 820ms cubic-bezier(0.39, 0.58, 0.57, 1);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out, top 820ms cubic-bezier(0.39, 0.58, 0.57, 1);
  }
  .main-menu li.stay {
    -webkit-transition: none;
            transition: none;
  }
  .main-menu li a {
    -webkit-transition: all 0.4s ease-out;
            transition: all 0.4s ease-out;
    letter-spacing: 1px;
    display: block;
    height: 100%;
    font-size: 0.92vw;
    font-weight: bold;
    line-height: 25px;
  }
  .main-menu li a i {
    display: none;
  }
  .main-menu li:hover a {
    letter-spacing: 3px;
  }
  .main-menu li.stay a {
    letter-spacing: 3px;
    -webkit-transition: none;
            transition: none;
  }
}
@media (max-width: 767px) {
  .main-menu,
  .events-menu {
    position: fixed;
    padding: 5px 0;
    margin: 0;
    bottom: 10%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
    border-top: solid 2px #acacac;
    border-bottom: solid 2px #acacac;
    background-color: rgba(255, 255, 255, 0.8);
  }
  .main-menu.active,
  .events-menu.active,
  .main-menu.float-down,
  .events-menu.float-down {
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  .main-menu li,
  .events-menu li {
    display: block;
    -webkit-perspective: 600px;
            perspective: 600px;
    text-align: center;
    -webkit-transition: all 0.7s ease-out !important;
            transition: all 0.7s ease-out !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 40px;
    opacity: 0;
  }
  .main-menu li a,
  .events-menu li a {
    -webkit-transition: inherit;
            transition: inherit;
    -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  .main-menu li a:active,
  .events-menu li a:active {
    letter-spacing: 3px;
  }
  .main-menu li a,
  .events-menu li a {
    display: block;
  }
  .main-menu li.active,
  .events-menu li.active,
  .main-menu li.fade-in,
  .events-menu li.fade-in {
    opacity: 1;
  }
  .main-menu li.active a,
  .events-menu li.active a,
  .main-menu li.fade-in a,
  .events-menu li.fade-in a {
    -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .main-menu,
  .events-menu {
    -webkit-transform: translateY(120%);
        -ms-transform: translateY(120%);
            transform: translateY(120%);
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .main-menu,
  .events-menu {
    bottom: 0;
    top: 0;
    width: auto;
    right: 10%;
    padding: 0 30px;
    border: 0;
    border-left: solid 2px #acacac;
    border-right: solid 2px #acacac;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
            transform: translateX(200%);
  }
  .main-menu li,
  .events-menu li {
    background-color: transparent;
  }
}
/* ============================================================
  PROJECT-MENU
============================================================ */
@media screen and (min-width: 768px) {
  .project-menu {
    padding: 0;
    margin: 0;
    z-index: 100;
  }
  .project-menu > li {
    display: inline-block;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
    visibility: hidden;
    white-space: nowrap;
    word-break: keep-all;
    -webkit-transform: translate(-115%, -50%);
        -ms-transform: translate(-115%, -50%);
            transform: translate(-115%, -50%);
    height: 11px;
  }
  .project-menu > li.active {
    visibility: visible;
    opacity: 1;
  }
  .project-menu > li > span,
  .project-menu > li > a {
    display: block;
    height: 100%;
    font-size: 0.92vw;
    font-weight: 200;
    line-height: 10px;
    cursor: pointer;
    color: inherit !important;
  }
  .project-menu > li:first-child > span {
    font-size: 1.2vw;
    cursor: default;
  }
  .project-menu > li ul {
    padding: 0;
    margin: 0;
    z-index: 100;
    position: absolute;
    visibility: hidden;
    top: 50%;
    right: 125%;
    opacity: 0.75;
    direction: rtl;
    -webkit-transition: visibility 300ms;
            transition: visibility 300ms;
    min-width: 60px;
  }
  .project-menu > li ul:before {
    display: block;
    height: 1px;
    content: "";
    width: 1%;
    background-color: #000000;
    -webkit-transition: width 250ms ease-out;
            transition: width 250ms ease-out;
  }
  .project-menu > li ul.float-down:before {
    width: 100%;
  }
  .project-menu > li ul li {
    padding: 0 5px;
    font-size: 9px;
    font-weight: 200;
    line-height: 18px;
    list-style-type: none;
    direction: ltr;
    opacity: 0;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
  }
  .project-menu > li ul li.fade-in {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .project-menu > li ul li.selected {
    letter-spacing: 3px;
  }
  .project-menu > li ul.active,
  .project-menu > li ul.float-down {
    visibility: visible;
    -webkit-transition: visibility 0s;
            transition: visibility 0s;
  }
}
@media (max-width: 767px) {
  .project-menu {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 85px;
    left: 0;
    text-align: left;
    width: 100px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
    z-index: 340;
  }
  .project-menu.active,
  .project-menu.float-down {
    visibility: visible;
    opacity: 1;
  }
  .project-menu > li {
    display: block;
    padding: 0 15px;
    -webkit-transition: all 0.7s ease-out !important;
            transition: all 0.7s ease-out !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 40px;
    opacity: 0;
    list-style-type: circle;
    position: relative;
    -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
  .project-menu > li > a,
  .project-menu > li > span {
    -webkit-transition: inherit;
            transition: inherit;
  }
  .project-menu > li > a {
    display: block;
  }
  .project-menu > li.active,
  .project-menu > li.fade-in {
    opacity: 1;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .project-menu ul {
    padding: 0;
    margin: -8px 0 0;
    visibility: hidden;
    opacity: 0.75;
    -webkit-transition: all 300ms;
            transition: all 300ms;
  }
  .project-menu ul:before {
    display: block;
    height: 1px;
    content: "";
    width: 1%;
    background-color: #000000;
    -webkit-transition: width 250ms ease-out;
            transition: width 250ms ease-out;
  }
  .project-menu ul.float-down:before {
    width: 100%;
  }
  .project-menu ul li {
    padding: 0 10px 0 5px;
    font-size: 13px;
    font-weight: 400;
    list-style-type: none;
    text-align: right;
    height: 0;
    line-height: 30px;
    opacity: 0;
    -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transition: all 500ms ease-out;
            transition: all 500ms ease-out;
    overflow: hidden;
  }
  .project-menu ul li.fade-in {
    height: 30px;
    opacity: 1;
    -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  .project-menu ul li.selected {
    letter-spacing: 2px;
    font-weight: 700;
  }
  .project-menu ul.active,
  .project-menu ul.float-down {
    visibility: visible;
    -webkit-transition: visibility 0s;
            transition: visibility 0s;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .project-menu {
    top: 50px;
  }
}
.cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* ============================================================
  PAGES
============================================================ */
.page {
  z-index: 320;
}
@media screen and (min-width: 768px) {
  .page {
    max-width: 490px;
    padding: 0 20px;
    position: absolute;
    left: 50%;
    top: 34%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media screen and (max-width: 767px) {
  .page {
    position: fixed;
    top: 85px;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.8);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
  }
  .page.active {
    visibility: visible;
    opacity: 1;
  }
  .page:before {
    position: fixed;
    top: 0;
    left: 0;
    height: 85px;
    width: 100%;
    z-index: 320;
    content: '';
    background-color: rgba(255, 255, 255, 0.8);
  }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
  .page {
    top: 50px;
  }
  .page:before {
    height: 50px;
  }
}
.page[data-page="about"] .description {
  text-align: justify;
  display: none;
}
.page[data-page="about"] .description.float-down {
  display: block;
}
.page[data-page="about"] .description p {
  line-height: 25px;
  font-size: 15px;
  margin: 0;
  text-align: justify;
  -webkit-transition: opacity 200ms ease-out, -webkit-transform 300ms ease-out;
          transition: opacity 200ms ease-out, transform 300ms ease-out;
  opacity: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
.page[data-page="about"] .description p:nth-child(3n+1) {
  margin-top: 30px;
}
.page[data-page="about"] .description p.fade-in {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.page[data-page="contact"] {
  display: none;
  max-width: 800px;
  top: auto;
  bottom: 27%;
  overflow: auto;
  -webkit-transform: translate(-50%, 100px);
      -ms-transform: translate(-50%, 100px);
          transform: translate(-50%, 100px);
  -webkit-transition: all 0.7s ease-out;
          transition: all 0.7s ease-out;
  opacity: 0;
}
.page[data-page="contact"].active {
  display: block;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 1;
}
.page[data-page="contact"] .col:nth-child(1) {
  padding-right: 15px;
}
@media (min-width: 600px) {
  .page[data-page="contact"] .col {
    float: left;
    width: 50%;
  }
}
.page[data-page="contact"] p {
  margin: 0 0 28px 0;
}
.page[data-page="contact"] .social-links {
  padding: 0;
  margin: 0;
}
.page[data-page="contact"] .social-links li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
}
.page[data-page="contact"] .map {
  position: relative;
  border: solid 1px #ccc;
  padding: 2px 3px;
}
.page[data-page="contact"] .map img {
  max-width: 100%;
  border: solid 1px #ccc;
  vertical-align: middle;
}
.page[data-page="contact"] .map .marker {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
      -ms-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  overflow: hidden;
  width: 30px;
  height: 40px;
  text-align: center;
}
.page[data-page="contact"] .map .marker .fa {
  -webkit-transform: translateY(120%);
      -ms-transform: translateY(120%);
          transform: translateY(120%);
  -webkit-transition: all 1s ease-out;
          transition: all 1s ease-out;
  color: #000;
  font-size: 2em;
  -webkit-animation: hide-marker 0.4s forwards;
          animation: hide-marker 0.4s forwards;
}
.page[data-page="contact"].active .map .marker .fa {
  -webkit-animation: show-marker 2s forwards;
          animation: show-marker 2s forwards;
  -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.5, 1.74);
          animation-timing-function: cubic-bezier(0.42, 0, 0.5, 1.74);
}
@media (max-width: 767px) {
  .page[data-page="contact"] {
    max-width: none;
    bottom: -100px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  .page[data-page="contact"].active {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    bottom: 0;
  }
  .page[data-page="contact"] .col {
    margin-bottom: 20px;
  }
  .page[data-page="contact"] .map {
    max-width: 300px;
  }
}
@media (min-width: 500px) {
  .rtl .page .col {
    float: right;
    width: 50%;
  }
}
@-webkit-keyframes show-marker {
  0% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
  50% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
  100% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
}
@keyframes show-marker {
  0% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
  50% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
  100% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
}
@-webkit-keyframes hide-marker {
  0% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  40% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
  100% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
}
@keyframes hide-marker {
  0% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  40% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
  100% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
  }
}
/* ============================================================
  NAV
============================================================ */
.navigator {
  padding: 0;
  margin: 30px auto;
  display: none;
  text-align: center;
}
.navigator li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}
.navigator li:after {
  content: "";
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  border: solid 1px rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.2);
}
.navigator li.active:after {
  border-color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.4);
}
.navigator li:hover:after {
  border-color: rgba(0, 0, 0, 0.9);
  background-color: rgba(0, 0, 0, 0);
}
/* ============================================================
  GALLERY
============================================================ */
.gallery {
  display: none;
}
.gallery:before,
.gallery:after {
  content: " ";
  display: table;
}
.gallery:after {
  clear: both;
}
.gallery:before,
.gallery:after {
  content: " ";
  display: table;
}
.gallery:after {
  clear: both;
}
.gallery.float-down {
  display: block;
}
@media screen and (min-width: 768px) {
  .gallery .gallery-item {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    border: solid 1px #333;
    float: left;
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
    -webkit-transition: opacity 500ms, -webkit-transform 600ms ease-out;
            transition: opacity 500ms, transform 600ms ease-out;
  }
  .gallery .gallery-item:nth-child(3n-1) {
    -webkit-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
  .gallery .gallery-item:nth-child(3n) {
    -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
  .gallery .gallery-item:nth-child(5n) {
    -webkit-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
  }
  .gallery .gallery-item.fade-in {
    opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .gallery .gallery-item:nth-child(3n-1) {
    border-left: none;
    border-right: none;
  }
  .gallery .gallery-item img {
    width: 100%;
    height: 100%;
  }
  .gallery .gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
            transition: opacity 0.6s ease-out;
  }
  .gallery .gallery-item .overlay .details {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .gallery .gallery-item .overlay .details span {
    display: block;
    line-height: 18px;
    font-size: 13px;
    letter-spacing: 1px;
  }
  .gallery .gallery-item:hover .overlay {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .gallery {
    margin-left: -25px;
    margin-right: -25px;
  }
  .gallery.float-down {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .gallery .gallery-item {
    position: relative;
    width: 150px;
    opacity: 0;
    -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
            transform: scale(0, 0);
    -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
    margin: 0 15px 20px 15px;
  }
  .gallery .gallery-item.fade-in {
    opacity: 1;
    -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  .gallery .gallery-item img {
    width: 100%;
    border: solid 1px #333;
  }
  .gallery .gallery-item .overlay .details span {
    display: block;
    line-height: 18px;
    font-size: 13px;
    letter-spacing: 1px;
  }
}
/* ============================================================
  PROJECTS
============================================================ */
.shape {
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  #project-images {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  #project-images {
    padding-left: 100px;
    display: block;
    text-align: center;
  }
  #project-images.float-down {
    visibility: visible;
    opacity: 1;
  }
  #project-images > a {
    position: relative;
    width: 200px;
    opacity: 0;
    -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
            transform: scale(0, 0);
    -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
    margin: 0 15px 20px 15px;
    max-width: 100%;
    display: inline-block;
    vertical-align: text-top;
    text-align: left;
  }
  #project-images > a.fade-in {
    opacity: 1;
    -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  #project-images > a img {
    width: 100%;
    border: solid 1px #333;
  }
  #project-images > a .content h3 {
    margin: 0;
  }
  #project-images > a .content p {
    font-size: 14px;
    margin-top: 3px;
  }
  #project-images > a.disable {
    opacity: 0.2;
    visibility: hidden;
    height: 0 !important;
    margin: 0;
    -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  #project-images > a.disable img {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
  }
}
@media screen and (max-width: 578px) {
  #project-images {
    padding-right: 10px;
  }
  #project-images > a {
    margin: 0 0 20px 0;
  }
}
.transform3d {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  -webkit-transition: all 600ms ease;
          transition: all 600ms ease;
  -webkit-transform-origin: 0 0 0;
      -ms-transform-origin: 0 0 0;
          transform-origin: 0 0 0;
  padding: 0;
  z-index: 120;
}
.transform3d.disable {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.transform3d.image {
  z-index: 0;
  filter: grayscale(0.75);
}
.transform3d.image.hover {
  border: solid 5px rgba(0, 0, 0, 0.7);
  border-right: 0;
  opacity: 1 !important;
}
.transform3d.hover {
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  -webkit-transform-origin: center !important;
      -ms-transform-origin: center !important;
          transform-origin: center !important;
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  z-index: 180;
}
.transform3d.helper:not(.hover):hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.transform3d.helper .content {
  position: absolute;
  top: 0;
  left: 100%;
  bottom: 0;
  width: 5px;
  padding: 5px 0;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 11px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 600ms ease;
          transition: all 600ms ease;
  z-index: 100;
}
.transform3d.helper .content h3 {
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0);
}
.transform3d.helper .content a {
  color: inherit;
}
.transform3d.helper.hover .content {
  -webkit-animation: show-content 1s forwards;
          animation: show-content 1s forwards;
  visibility: visible;
  opacity: 1;
}
.transform3d.helper.hover .content h3 {
  word-break: keep-all;
  white-space: nowrap;
  margin: 5px 0 10px 0;
  padding-bottom: 5px;
  font-weight: 400;
  text-decoration: underline;
}
.transform3d.left-helper.image.hover {
  border: solid 5px rgba(0, 0, 0, 0.7);
  border-left: 0;
}
.transform3d.left-helper.helper .content {
  left: auto;
  right: 100%;
}
.transform3d.fade-in:not(.disable) {
  opacity: 1;
}
.transform3d.fade-in.disable {
  opacity: 0.2;
}
@-webkit-keyframes show-content {
  70% {
    width: 5px;
    padding: 5px 0;
    color: transparent;
  }
  98% {
    width: 200px;
    padding: 5px 10px;
    color: transparent;
  }
  100% {
    width: 200px;
    padding: 5px 10px;
    color: #fff;
  }
}
@keyframes show-content {
  70% {
    width: 5px;
    padding: 5px 0;
    color: transparent;
  }
  98% {
    width: 200px;
    padding: 5px 10px;
    color: transparent;
  }
  100% {
    width: 200px;
    padding: 5px 10px;
    color: #fff;
  }
}
/***************************
        View Project
***************************/
.view-project {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 500;
  overflow: auto;
  display: none;
}
.view-project .close-project {
  display: inline-block;
  width: 50px;
  line-height: 50px;
  cursor: pointer;
  color: #666;
  text-align: center;
  font-size: 18px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
}
.view-project .close-project i {
  line-height: inherit;
  width: inherit;
  display: inherit;
}
.view-project .close-project:hover {
  background-color: #eee;
}
.view-project .content {
  padding: 50px 15px;
  max-width: 630px;
  margin: auto;
  background-color: #fff;
}
.view-project .content .project-gallery {
  margin-bottom: 20px;
  border-bottom: solid 1px #ddd;
}
.view-project .content .project-gallery .project-image {
  position: relative
  /***** loading ***/
}
.view-project .content .project-gallery .project-image img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  vertical-align: middle;
  -webkit-transition: all 0.7s ease-out;
          transition: all 0.7s ease-out;
}
.view-project .content .project-gallery .project-image .loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(225, 225, 225, 0.7);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.7s ease-out;
          transition: all 0.7s ease-out;
}
.view-project .content .project-gallery .project-image .loading .loader {
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.view-project .content .project-gallery .project-image.loading .loading {
  opacity: 1;
  visibility: visible;
}
.view-project .content .project-gallery .project-image.loading img {
  opacity: 0.6;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.view-project .content .project-gallery .thumbs {
  margin: 0 -5px;
}
.view-project .content .project-gallery .thumbs img {
  width: 50px;
  height: 50px;
  margin: 5px;
  opacity: 0.7;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: all 0.7s ease-out;
          transition: all 0.7s ease-out;
  vertical-align: middle;
}
.view-project .content .project-gallery .thumbs img:not(.active) {
  cursor: pointer;
}
.view-project .content .project-gallery .thumbs img.active {
  -webkit-filter: none;
          filter: none;
  opacity: 1;
}
.view-project .error {
  text-align: center;
  font-size: 30px;
  padding-top: 100px;
}
@media screen and (max-width: 767px) {
  .view-project .project-image.owl-carousel {
    position: relative;
    max-width: 360px;
    margin: auto;
  }
  .view-project .project-image.owl-carousel .owl-nav .owl-prev,
  .view-project .project-image.owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    width: 40px;
    line-height: 40px;
    height: 40px;
    text-align: center;
    border: 0;
    padding: 0 !important;
    outline: none;
    background-color: transparent;
    margin: -20px 0 0 0;
    color: #000;
  }
  .view-project .project-image.owl-carousel .owl-nav .owl-prev {
    left: -10px;
  }
  .view-project .project-image.owl-carousel .owl-nav .owl-next {
    right: -10px;
  }
}
#languages {
  position: fixed;
  bottom: 3px;
  left: 2px;
}
#languages select {
  font-family: inherit;
  z-index: 1000;
  border: solid 1px #ccc;
  background-color: #eee;
  padding: 0 10px;
  font-size: 12px;
  opacity: 0.7;
  height: 34px;
  line-height: 34px;
}
#languages select:hover,
#languages select:focus {
  opacity: 1;
}
#languages select:focus {
  outline: none;
  border: solid 1px #777;
}
#info {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 6000;
  padding: 5px;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.41);
}
/* ============================================================
  EVENTS
============================================================ */
.events-menu {
  z-index: 100;
}
@media screen and (min-width: 768px) {
  .events-menu {
    padding: 0;
    margin: 0;
    width: 0;
    height: 0;
    overflow: visible;
  }
  .events-menu li {
    display: inline-block;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out, top 0s, left 0s;
            transition: opacity 0.5s ease-out, transform 0.5s ease-out, top 0s, left 0s;
    visibility: hidden;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
  }
  .events-menu li.active,
  .events-menu li.stay {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-4px, -50%);
        -ms-transform: translate(-4px, -50%);
            transform: translate(-4px, -50%);
    -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out, top 360ms cubic-bezier(0.39, 0.58, 0.57, 1);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out, top 360ms cubic-bezier(0.39, 0.58, 0.57, 1);
  }
  .events-menu li.stay {
    -webkit-transition: none;
            transition: none;
  }
  .events-menu li a {
    letter-spacing: 1px;
    display: block;
    height: 100%;
    font-size: 1.1vw;
    line-height: 34px;
  }
  .events-menu li a i {
    display: none;
  }
  .events-menu li a:hover {
    line-height: 50px;
  }
  .events-menu li.slow {
    -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out, right 830ms ease-in-out, top 830ms ease-in-out;
            transition: opacity 0.5s ease-out, transform 0.5s ease-out, right 830ms ease-in-out, top 830ms ease-in-out;
  }
}
.awards-menu {
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .awards-menu {
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    line-height: 26px;
    height: 26px;
    z-index: 100;
    top: 15%;
    left: 34.5%;
    -webkit-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
  .awards-menu li {
    display: block;
    float: left;
    -webkit-transition: all 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
            transition: all 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
    -webkit-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
    padding: 0 10px;
    position: relative;
    cursor: pointer;
  }
  .awards-menu li.fade-in:not(.disable) {
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .awards-menu li:not(:last-child):not(.active):after {
    display: inline-block;
    content: '-';
    position: absolute;
    top: 0;
    right: -2px;
  }
  .awards-menu li.active {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 18px;
  }
  .awards-menu.active {
    visibility: visible;
  }
}
@media (max-width: 767px) {
  .awards-menu {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 85px;
    left: 0;
    text-align: left;
    width: 100px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
    z-index: 340;
  }
  .awards-menu.active,
  .awards-menu.float-down {
    visibility: visible;
    opacity: 1;
  }
  .awards-menu > li {
    display: block;
    padding: 0 15px;
    -webkit-transition: all 0.7s ease-out !important;
            transition: all 0.7s ease-out !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 40px;
    opacity: 0;
    position: relative;
    -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
  .awards-menu > li.fade-in {
    opacity: 1;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .awards-menu > li.active {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 18px;
  }
  .awards-menu > li.disable {
    opacity: 0.5;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .awards-menu {
    top: 50px;
  }
}
.page.event-page {
  max-height: 60%;
  overflow: auto;
  max-width: none;
  position: absolute;
  top: 34%;
  width: auto;
  display: none;
}
.page.event-page .description p {
  white-space: nowrap;
  line-height: 36px;
  font-size: 15px;
  margin: 0;
  text-align: justify;
  -webkit-transition: opacity 200ms ease-out, -webkit-transform 300ms ease-out;
          transition: opacity 200ms ease-out, transform 300ms ease-out;
  opacity: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
.page.event-page .description p.fade-in {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.page.event-page[data-page="event-awards"] {
  margin-top: -30px;
  max-height: 65%;
}
@media (max-width: 767px) {
  .page.event-page {
    max-height: none;
    max-width: 100%;
    position: absolute;
    top: 85px;
    width: 100%;
    display: none;
  }
  .page.event-page .description p {
    white-space: normal;
    text-align: inherit;
    line-height: 25px;
    margin-bottom: 10px;
  }
  .page.event-page[data-page="event-awards"] {
    padding-left: 100px;
    max-height: none;
    margin: 0;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .page.event-page {
    top: 50px;
  }
}
@media screen and (min-width: 768px) {
  .awards-content {
    direction: ltr;
    min-width: 540px;
  }
}
.awards-content .award-item {
  float: left;
  position: relative;
  width: 120px;
  height: 120px;
  -webkit-transition: all 0.5s ease-in;
          transition: all 0.5s ease-in;
  -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
          transform: scale(0, 0);
  opacity: 0;
  margin: 30px;
  visibility: hidden;
}
.awards-content .award-item.fade-in {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
}
.awards-content .award-item.disable {
  display: none;
}
.awards-content .award-item img {
  width: 100%;
  height: 100%;
}
.awards-content .award-item a {
  position: absolute;
  left: 103%;
  bottom: 0;
}
.awards-content .award-item.back {
  width: auto;
  height: auto;
  margin: 0 30px;
  cursor: pointer;
  clear: both;
}
@media (max-width: 767px) {
  .awards-content {
    text-align: center;
  }
  .awards-content .award-item {
    float: none;
    display: inline-block;
    vertical-align: text-top;
  }
  .awards-content .award-item.back {
    display: block;
  }
}
.ltr .page.event-page {
  direction: rtl;
}
.ltr .page.event-page .description {
  direction: ltr;
}
.rtl .page.event-page {
  direction: ltr;
}
.rtl .page.event-page .description {
  direction: rtl;
}
.page-title {
  display: none;
}
@media screen and (max-width: 767px) {
  .page-title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    padding-left: 60px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 22px;
    margin: 0;
    z-index: 20;
  }
}
@media screen and (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
  }
}