/*
* MALIN - Perfect Coming Soon Template
* Build Date: August 2015
* Author: Madeon08
* Copyright (C) 2015 Madeon08
* This is a premium product available exclusively here : http://themeforest.net/user/Madeon08/portfolio
*/
/*  TABLE OF CONTENTS
    ---------------------------
    *. @Import & Reset
    1. Generic styles
    2. Loading
    3. Navigation
    4. Home part
    5. Content part
    6. Newsletter part
        Annex. Mozaic Variant
        '''''. Constellation Variant
        '''''. YouTube Variant
    7. Media Queries
*/
/* ------------------------------------- */
/* *. @Import & Reset .................. */
/* ------------------------------------- */
/* http://bourbon.io/ Sass Mixin Library */
/* custom CSS files */
@import url(font-awesome.min.css);
@import url(ionicons.min.css);
@import url(bootstrap.min.css);
@import url(animate.css);
@import url(swipebox.css);
@import url(vegas.css);
/* Google Fonts */
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
@import url("http://fonts.googleapis.com/css?family=PT+Sans:400,700");
/*
* http://meyerweb.com/eric/tools/css/reset/ 
* v2.0 | 20110126
* License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; 
}

.table {
    color: #fff !important;
    margin-bottom: 0 !important;
}
.table tr:hover {
    background: rgba(0,0,0,0.5);
}
thead {
    background: rgba(255,255,255,0.2);
}

img {
    width: 100%;
}

/* ------------------------------------- */
/* 1. Generic styles ................... */
/* ------------------------------------- */
#wrap {
  background: url(../img/hero.png) center top/cover no-repeat fixed;
  background-color: #222;
  font-family: "letter-gothic-std", "Yu Gothic", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.5em;
  position: absolute;
  width: 100vw;
  height: 100%;
  letter-spacing: 0.1em;
  overflow-x: hidden;
}

@media only screen and (max-width: 1024px) {
    #wrap {
      background: rgba(0,0,0,0.3);
    }
    body::before {
          content:"";
          display:block;
          position:fixed;
          top:0;
          left:0;
          z-index:-1;
          width:100%;
          height:100%;
          background:url(../img/hero_mid.png) center top/cover no-repeat;
          -webkit-background-size:cover;/*Android4*/
    }
}

@media only screen and (max-width: 768px) {
    #wrap {
      background: rgba(0,0,0,0.5);
    }
    body::before {
          content:"";
          display:block;
          position:fixed;
          top:0;
          left:0;
          z-index:-1;
          width:100%;
          height:100%;
          background:url(../img/hero_mid.png) center top/cover no-repeat;
          -webkit-background-size:cover;/*Android4*/
    }
}

@media only screen and (max-width: 480px) {
    #wrap {
      background: rgba(0,0,0,0.5);
    }
    body::before {
          content:"";
          display:block;
          position:fixed;
          top:0;
          left:0;
          z-index:-1;
          width:100%;
          height:100%;
          background:url(../img/hero_mid.png) center top/cover no-repeat;
          -webkit-background-size:cover;/*Android4*/
    }
}

body, html {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%; }

body, input, select, textarea {
  -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1); }

::selection {
	background: #00f6ff;
}
::-moz-selection {
	background: #00f6ff;
}

.blinking {
    -webkit-animation: 0.8s linear 0s alternate none infinite running blink;
    -moz-animation: 0.8s linear 0s alternate none infinite running blink;
    animation: 0.8s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}

a {
  -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  cursor: pointer;
  text-decoration: none;
  color: #FFFFFF; }
  a:hover {
    color: #00af94;
    text-decoration: none !important;
    outline: none !important; }
  a:active, a:focus {
    outline: none !important;
    text-decoration: none !important;
    color: #FFFFFF; }

button {
  -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  cursor: pointer; }
  button:hover, button:active, button:focus {
    outline: none !important;
    text-decoration: none !important;
    color: #2B2D35; }

strong, b {
  font-weight: 600;
  font-style: italic !important;
}

em, i {
  font-style: italic; }

p {
  margin: 0;
  font-size: 1em;
  line-height: 1.6em;
  color: #FFFFFF;
  font-weight: 400; }

h1, h2, h3, h4, h5, h6 {
  font-family: "letter-gothic-std", "Yu Gothic", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
  color: #000000;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5em; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none; }
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: inherit; }

h1 {
  font-size: 90px;
  font-weight: 600;
  color: #FFFFFF; 
}

h2 {
  font-size: 4rem;
  font-weight: 700;
  color: #323a45;
  margin-bottom: 25px; 
}

h3 {
  font-size: 30px;
  font-weight: 700;
  color: #323a45;
  margin-bottom: 25px;
}

.hilight {
    background-color: #00f6ff;
    opacity: 0.8;
}

h4 {
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 25px; }

h5 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 25px; }

h6 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 25px; }

sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em; }

sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em; }

.clear {
  clear: both; }

.display-none {
  display: none !important; }

.align-left {
  text-align: left; }

.align-center {
  text-align: center; }

.align-right {
  text-align: right; }

.no-margin-bottom {
  margin-bottom: 0; }

.opacity-0 {
  opacity: 0 !important;
  visibility: hidden !important; }

.opacity-03 {
  opacity: 0.3 !important; }

.opacity-1 {
  opacity: 1 !important;
  visibility: visible !important; }

.index-999 {
  z-index: -999 !important; }

.open-menu-mobile {
  display: none; }

.scale-uni {
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  -o-transform: scale(1) !important;
  transform: scale(1) !important; }

.item-title {
  position: absolute;
  z-index: 0;
  left: 0;
  padding: 0;
  top: 50vh;
  width: 100%;
  padding: 0 30%;
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 1;
  visibility: visible; }
  .item-title p {
    color: #F8F8F8;
    letter-spacing: 3px;
    margin-top: 15px; }

.item-title a {
    margin-top:200px;
}

p.copyright {
  bottom: 0;
  right: 105px;
  height: 30px;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 15px;
  line-height: 30px;
  font-weight: 400;
  text-align: right;
  position: fixed;
  z-index: 99;
  padding: 0;
  opacity: 1;
  visibility: visible; }

p.lang {
  top: 5px;
  right: 105px;
  height: 30px;
  font-size: 0.7em;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 15px;
  line-height: 30px;
  font-weight: 600;
  text-align: right;
  position: absolute;
  z-index: 99;
  padding: 0;
  opacity: 1;
  visibility: visible; }
  p.lang a {
    color: rgba(255, 255, 255, 0.5); }
    p.lang a:hover {
      color: white;
      text-decoration: none !important;
      outline: none !important; }
    p.lang a:active, p.lang a:focus {
      outline: none !important;
      text-decoration: none !important;
      color: white; }
    p.lang a.active {
      color: white; }

.overlay {
  /* background: rgba(10, 26, 36, 0.6); */
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }

.darky-overlay {
  background: rgba(10, 26, 36, 0.7); }

.btn {
  font-family: "letter-gothic-std", "Yu Gothic", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  border: 2px solid;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 400;
  height: 50px;
  letter-spacing: 1px;
  line-height: 46px;
  padding: 0 40px;
  margin-top: 20px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.btn-color {
    font-weight: 700;
  background: rgba(215, 65, 247, 0.5);
  border-color: rgba(215, 65, 247, 0.7); }
  .btn-color:hover, .btn-color:active, .btn-color:focus {
    background: #d741f7;
    color: #fff !important; }

.btn-light {
    font-weight: 700;
  background: rgba(255, 255, 255, 0.3);
  border-color: #FFFFFF; }
  .btn-light:hover, .btn-light:active, .btn-light:focus {
    background: rgba(255, 255, 255, 0.7);
    color: #333; }

/* ------------------------------------- */
/* 2. Loading .......................... */
/* ------------------------------------- */
.loading-part {
  position: fixed;
  background: #f2f3f7;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; }
  .loading-part .loader-part {
    min-height: 100%;
    min-width: 100%; }
    .loading-part .loader-part .loader-circle {
      width: 32px;
      height: 32px;
      clear: both;
      margin: 0 auto 5px;
      position: relative;
      top: calc(50% - 16px);
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      border-top: 16px rgba(43, 45, 53, 0.75) solid;
      border-left: 16px rgba(43, 45, 53, 0.25) solid;
      border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
      border-right: 16px rgba(43, 45, 53, 0.25) solid;
      -webkit-animation: spSlices 1s infinite linear;
      -moz-animation: spSlices 1s infinite linear;
      animation: spSlices 1s infinite linear; }
@-webkit-keyframes spSlices {
  0% {
    border-top: 16px rgba(43, 45, 53, 0.75) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  25% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.75) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  50% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.75) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  75% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.75) solid; }
  100% {
    border-top: 16px rgba(43, 45, 53, 0.75) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; } }
@-moz-keyframes spSlices {
  0% {
    border-top: 16px rgba(43, 45, 53, 0.75) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  25% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.75) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  50% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.75) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  75% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.75) solid; }
  100% {
    border-top: 16px rgba(43, 45, 53, 0.75) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; } }
@keyframes spSlices {
  0% {
    border-top: 16px rgba(43, 45, 53, 0.75) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  25% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.75) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  50% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.75) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; }
  75% {
    border-top: 16px rgba(43, 45, 53, 0.25) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.75) solid; }
  100% {
    border-top: 16px rgba(43, 45, 53, 0.75) solid;
    border-right: 16px rgba(43, 45, 53, 0.25) solid;
    border-bottom: 16px rgba(43, 45, 53, 0.25) solid;
    border-left: 16px rgba(43, 45, 53, 0.25) solid; } }
    .loading-part .loader-part .loader-text {
      color: rgba(10, 26, 36, 0.8);
      position: absolute;
      top: calc(50% + 24px);
      padding-left: 6px;
      width: 100%;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 5px; }

/* ------------------------------------- */
/* 3. Navigation ....................... */
/* ------------------------------------- */

#navigation {
  position: fixed;
  z-index: 99;
  top: 0;
  bottom: 0;
  height: 100vh;
  overflow: hidden;
  display: block;
  width: 90px;
  background: rgba(0,0,0,0.2);
   }
  #navigation:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    border: 1px solid #FFFFFF;
    opacity: 0.2; }
  #navigation ul {
    height: 100%;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    display: inline-block;
    -webkit-overflow-scrolling: touch; }
    #navigation ul li {
      width: 100%;
      -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
      -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
      -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
      -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
      transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); }
      #navigation ul li a {
        display: block;
        position: relative;
        padding: 2em 0;
        font-size: 0.6rem;
        letter-spacing: 1px;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        font-weight: 600;
        overflow: hidden;
        text-transform: uppercase;
        -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); }
        #navigation ul li a i {
          font-size: 1.4rem;
          display: block;
          margin-bottom: 0; }
        #navigation ul li a:after {
          background: #fff;
          content: "";
          height: 200px;
          left: -150px;
          opacity: .2;
          position: absolute;
          top: -50px;
          -webkit-transform: rotate(35deg);
          -moz-transform: rotate(35deg);
          -ms-transform: rotate(35deg);
          -o-transform: rotate(35deg);
          transform: rotate(35deg);
          -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
          -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
          -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
          -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
          transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
          width: 90px;
          z-index: 1; }
        #navigation ul li a:hover {
          color: white;
          border-bottom: 1px solid white; }
          #navigation ul li a:hover:after {
            left: 150px;
            -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
            -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
            -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
            -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
            transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); }
        #navigation ul li a:active, #navigation ul li a:focus {
          color: rgba(255, 255, 255, 0.8); }
  #navigation ul.bottom-nav {
    display: inline-block;
    bottom: 0;
    overflow-y: auto;
    height: auto;
    left: 0; }
    #navigation ul.bottom-nav li a {
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      border-bottom: none; }
      #navigation ul.bottom-nav li a:hover {
        border-top: 1px solid white; }

.newsletter-color {
  background: rgba(0, 246, 255, 0.3);
  border-color: #00c8aa; }
  .newsletter-color:hover {
    background: rgba(0, 246, 255, 0.5);
    border-color: #00af94; }

.twitter-color {
  background: rgba(0, 172, 237, 0.3);
  border-color: #00aced; }
  .twitter-color:hover {
    background: #0099d3;
    border-color: #0099d3; }

.facebook-color {
  background: rgba(59, 89, 152, 0.3);
  border-color: #3b5998; }
  .facebook-color:hover {
    background: #344e86;
    border-color: #344e86; }

.youtube-color {
  background: rgba(187, 0, 0, 0.3);
  border-color: #bb0000; }
  .youtube-color:hover {
    background: #a20000;
    border-color: #a20000; }

.instagram-color {
  background: rgba(202, 45, 149, 0.3);
  border-color: #CA2D95; }
  .instagram-color:hover {
    background: #CA2D95;
    border-color: #CA2D95; }

.tumblr-color {
  background: rgba(50, 80, 109, 0.3);
  border-color: #32506d; }
  .tumblr-color:hover {
    background: #2a435c;
    border-color: #2a435c; }

.vimeo-color {
  background: rgba(170, 212, 80, 0.3);
  border-color: #aad450; }
  .vimeo-color:hover {
    background: #a0cf3c;
    border-color: #a0cf3c; }

.flickr-color {
  background: rgba(255, 0, 132, 0.3);
  border-color: #ff0084; }
  .flickr-color:hover {
    background: #e60077;
    border-color: #e60077; }

.soundcloud-color {
  background: rgba(255, 58, 0, 0.3);
  border-color: #ff3a00; }
  .soundcloud-color:hover {
    background: #e63400;
    border-color: #e63400; }

/* ------------------------------------- */
/* 4. Home part ........................ */
/* ------------------------------------- */
#home-part {
  position: relative;
  top: 0;
  left: 0;
  width: calc(100vw - 180px) !important;
  margin: auto;
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); }

.brand-logo {
  max-width: 500px;
  display: block;
  margin: auto;
  margin-bottom: 70px;
  font-weight: 400;
}

.glitch {
  display: block;
  margin-bottom: 40px;
  line-height: 1;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: #ffffff;
}

.glitch:before, .glitch:after {
  display: block;
  content: '#sess1on_';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .8;
}

.glitch:after {
  color: #f0f;
  z-index: -2;
}

.glitch:before {
  color: #0ff;
  z-index: -1;
}

.glich:hover {
  cursor: pointer;
}

.glitch:before {
  -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
          animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.glitch:after {
  -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
          animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

@-webkit-keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}


/* ------------------------------------- */
/* 5. Content part ..................... */
/* ------------------------------------- */
#content-part {
  position: relative;
  /* background: #f2f3f7; */
  top: 0;
  left: 0;
  width: calc(100vw - 180px) !important;
  margin: auto;
  padding: 0;
  z-index: 10;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
  #content-part .inner-content {
    padding: 100px 100px;
     }
    #content-part .inner-content:last-child {
      border-bottom: 1px solid #24262d; }
  #content-part p {
    word-break: break-all;
    color: #fff; }


/* ===== overlay BG ===== */

#home-part:before, #info-content:before, #services-content:before, #credit:before, exhibition-content:before {
  content: '';
  position: absolute;
  margin: 3% -10% 0;
  background: #000;
  opacity: 0.4;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: 0;
}
#home-part:before {
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
}
#info-content:before {
  top: 1%;
  left: 0;
  width: 120%;
  height: 65%;
}
#exhibition-content:before {
  top: 1%;
  left: 0;
  width: 120%;
  height: 44%;
}
#services-content:before {
  top: 69%;
  left: 0;
  width: 120%;
  height: 15%;
}
#credit:before {
  top: 88%;
  left: 0;
  width: 120%;
  height: 7%;
}

/*
#ticket:before {
  top: 12%;
  left: 0;
  width: 100%;
  height: 50%;
}
*/


@media only screen and (max-width: 1024px) {
    #home-part:before,  #info-content:before, #services-content:before, #credit:before {
      background: none;
    }
}

@media only screen and (max-width: 768px) {
    #home-part:before,  #info-content:before, #services-content:before, #credit:before {
      background: none;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
    #home-part:before,  #info-content:before, #services-content:before, #credit:before {
      background: none;
    }
}

.dayinfo {
    margin-bottom: 60px;
}
.timetable {
    padding: 0 40px 0 20px;
}

.timetable li {
    color: white;
    font-size: 130%;
    padding: 10px 0;
    border-bottom: 1px solid #ffffff;
}
.timetable li:first-child {
    border-top: 1px solid #fff;
}



/* ===== About ===== */
#main-about {
  height: 400px;
  width: 100%;
  background-size: cover;
  position: relative; }
  #main-about:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    /*background: rgba(10, 26, 36, 0.7);*/ }
  #main-about .item-title {
    top: 50%; }

#countdown_dashboard {
  display: block;
  margin: 10px auto 0; }
  #countdown_dashboard .dash-glob {
    border-left: none;
    text-align: center; }
    #countdown_dashboard .dash-glob.first-dash-glob {
      margin-left: 0;
      border-left: none; }
    #countdown_dashboard .dash-glob .dash {
      padding-bottom: 0;
      position: relative;
      width: 100%;
      opacity: 1; }
      #countdown_dashboard .dash-glob .dash .digit {
        color: #FFFFFF;
        font-size: 50px;
        font-weight: 700;
        display: inline-block;
        overflow: hidden;
        text-align: center;
        height: 50px;
        line-height: 50px;
        position: relative;
        vertical-align: middle;
        opacity: 1; }
      #countdown_dashboard .dash-glob .dash .text-right {
        color: #FFFFFF;
        font-size: 1em;
        font-weight: 400;
        display: block;
        clear: both;
        overflow: hidden;
        text-align: center;
        height: auto;
        line-height: 2em;
        position: relative;
        vertical-align: middle; }
  #countdown_dashboard .text-news {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 50px;
    margin: 20px 0; }
    #countdown_dashboard .text-news .point {
      color: #00f6ff; }

/* ===== Information ===== */
#info-content h4 {
    line-height: 1.2em;
    word-break: break-word;
}
.inner-day1 {
    margin-bottom: 30px;
}
.inner-day1 h5, .inner-day2 h5 {
    margin-bottom: 10px;
}
.inner-day2 {
    margin-bottom: 60px;
}
/* ===== Portfolio ===== */
.portfolio {
  overflow: hidden;
 
}
.portfolio div {
    padding: 0;
    overflow: hidden; 
}

.portfolio ul li {
    float: left;
    width: 180px;
    margin: 15px;
}

.portfolio h4 {
    margin-bottom: 5px;
}
.day1, .day2 {
    margin-top: 30px;
}

.portfolio h6 {
    text-align: center;
}
 
.artist-head {
    background: rgba(0,0,0,0.5);
}

.large-square {
  background: url(../img/big-square.jpg);
  width: 100%;
  background-color: #2B2D35;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: none;
  outline: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .large-square:before {
    display: block;
    content: " ";
    padding-top: 100%; }
  .large-square:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
    .large-square:hover .hover-info {
      opacity: 1;
      bottom: 0;
      -webkit-transform: scale(0.85);
      -moz-transform: scale(0.85);
      -ms-transform: scale(0.85);
      -o-transform: scale(0.85);
      transform: scale(0.85); }

.small-square {
  background: url(../img/small-square-1.jpg);
  width: 100%;
  background-color: #2B2D35;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: none;
  outline: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .small-square:before {
    display: block;
    content: " ";
    padding-top: 100%; }
  .small-square:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
    .small-square:hover .hover-info {
      opacity: 1;
      bottom: 0;
      -webkit-transform: scale(0.85);
      -moz-transform: scale(0.85);
      -ms-transform: scale(0.85);
      -o-transform: scale(0.85);
      transform: scale(0.85); }

.small-square-head {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: none;
  outline: none;
 }
  .small-square-head:before {
    display: block;
    content: " ";
    padding-top: 100%; }


  .small-square-head.d1-head01 {
    background: url(../img/day1/day1-head01.png) rgba(0,0,0,0.5);
    background-size: cover;
}
  .small-square-head.d1-head02 {
    background: url(../img/day1/day1-head02.png) rgba(0,0,0,0.5);
    background-size: cover;
}

  .small-square.d1-0st {
    background-image: url(../img/day1/remocon.png)}
  .small-square.d1-1st {
    background-image: url(../img/day1/blacklolita.png); }
  .small-square.d1-2nd {
    background-image: url(../img/day1/CasualKiller.png); }
  .small-square.d1-3rd {
    background-image: url(../img/day1/Polyphonix.png); }
  .small-square.d1-4th {
    background-image: url(../img/day1/kasa.png); }
  .small-square.d1-5th {
    background-image: url(../img/day1/nhato.png); }
  .small-square.d1-6th {
    background-image: url(../img/day1/taishi.png); }

  .small-square-head.d2-head01 {
    background: url(../img/day2/day2-head01.png) rgba(0,0,0,0.5);
    background-size: cover;
}
  .small-square-head.d2-head02 {
    background: url(../img/day2/day2-head02.png) rgba(0,0,0,0.5);
    background-size: cover;
}

  .small-square.d2-1st {
    background-image: url(../img/day2/dj_Ashura.png); }
  .small-square.d2-2nd {
    background-image: url(../img/day2/tkm.png); }
  .small-square.d2-3rd {
    background-image: url(../img/day2/big-g.png);}
  .small-square.d2-4th {
    background-image: url(../img/day2/AlL_D_DRAGON.png); }
  .small-square.d2-5th {
    background-image: url(../img/day2/aj.png);}
  .small-square.d2-6th {
    background-image: url(../img/day2/no-image.png); opacity: 0.5; }

.large-square .hover-info, .small-square .hover-info {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(43, 45, 53, 0.8);
  color: #FCFCFC;
  padding: 0;
  opacity: 0;
  text-align: center;
  -webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .large-square .hover-info h4, .small-square .hover-info h4 {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 0;
    line-height: 1.2em;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%; }
  .large-square .hover-info p, .small-square .hover-info p {
    color: #EFEFEF !important;
    font-size: 0.8em;
    line-height: 1.4em;
    margin: 0; }
  .large-square .hover-info .date-info, .small-square .hover-info .date-info {
    font-family: "letter-gothic-std", "Yu Gothic", "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
    font-size: 0.7em;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 0;
    line-height: 1;
    position: absolute;
    right: 15px;
    bottom: 15px; }

/*  
 * Skin Gallery
 */
#swipebox-overlay {
  background: rgba(10, 26, 36, 0.8);
  -webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }

.full-scale {
  left: 0 !important;
  opacity: 1 !important; }

#swipebox-bottom-bar,
#swipebox-top-bar {
  background: rgba(10, 26, 36, 0.8);
  opacity: 1;
  min-height: 50px; }

#swipebox-bottom-bar {
  border-top: 1px solid #2B2D35; }

#swipebox-top-bar {
  color: #FFFFFF !important;
  border-bottom: 1px solid #2B2D35;
  font-size: 15px;
  line-height: 50px;
  font-weight: 600; }

#swipebox-prev,
#swipebox-next,
#swipebox-close {
  color: #FFFFFF !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  top: 0;
  text-align: center; }

#swipebox-close {
  font-size: 25px; }
  #swipebox-close:hover {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #FFFFFF; }

/* ===== Ticket ===== */
.caption {
    font-size: 0.7rem;
}
.amount {
    padding: 8px 20px !important;
}

/* ===== Services ===== */
.service-item {
  margin-top: 50px; }
  .service-item i {
    display: block;
    font-size: 4em;
    color: #00f6ff;
    margin-bottom: 10px; }
  .service-item h4 {
    margin-bottom: 10px; }

/* ===== Map ===== */
#map {
  height: 300px;
  width: 100%;
  position: relative;
  z-index: 5;
  top: 0;
  left: 0;
  margin-top: 15px;
  color: #333333 !important; }
  #map .gm-style-iw {
    top: 12px !important; }
  #map h6 {
    font-weight: 500;
    color: #333333;
    font-size: 1em;
    margin-bottom: 0.2em; }
  #map p {
    font-weight: 400;
    color: #747c83;
    font-size: 1em;
    line-height: 1.5; }

/* ===== Credit ===== */
.credit-logo {
    float: left;
    margin: 20px 80px 30px 0;
}
.credit-logo:hover {
    opacity: 0.7;
}

.wf-logo {
    margin-top: -3px;
}

#credit .credit-logo:first-child img {height: 50px; width: auto;}
#credit .credit-logo:nth-child(2) img {height: 100px; width: auto;}
#credit .credit-logo:last-child img {height: 55px; width: auto;}

/* ------------------------------------- */
/* particles ........................ */
/* ------------------------------------- */
#particles-js {
  position: fixed;
  top: 0vh;
  left: 0vw;
  width: 100vw;
  height: 100vh;
  z-index: -10;
}

/* ------------------------------------- */
/* 7. Media Queries .................... */
/* ------------------------------------- */
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1600px) {
  .item-title {
    padding: 0 17%; }

  .cd-words-wrapper {
    width: 100% !important; } }

/* Notebook devices */
/* Medium Devices, Desktops */
@media only screen and (max-width: 1024px) {
  body {
    position: relative !important;
    height: 100vh !important; }

  h1 {
    font-size: 70px; }
    
 h2 {
    font-size: 2.7rem;
    word-break: break-all;}

  p.lang {
    top: 5px;
    right: 15px; }

  p.copyright {
    right: 15px; }

  #home-part {
    width: 100vw !important; }
    
    #navigation {
        display: none; }

  .mbYTP_wrapper {
    width: 100% !important;
    min-width: 0 !important;
    left: 0 !important; }

  #content-part {
    width: 100vw !important; }
    #content-part .inner-content {
      padding: 50px 50px; }

  .mCSB_scrollTools {
    z-index: 999; }

  .mCSB_scrollTools {
    right: 0 !important; }

  .right-content {
    left: calc(0px + 90px) !important; }

  .item-title {
    width: 100% !important;
    left: 0 !important; } }

    #ticket, #access {
        margin-bottom: 60px;}


/* Small Devices, Tablets */
@media only screen and (max-width: 767px) {
  .loading-part .loader-part .loader-circle {
    top: calc(50% - 50px); }
  .loading-part .loader-text {
    top: calc(50% - 10px) !important; }

  h1 {
    font-size: 60px; }
    
 h2 {
    font-size: 2.1rem;
    word-break: break-all;}

  .newsletter-title {
    font-size: 3em; }

  .item-title {
    padding: 0 5% !important; }

  #main-about h1 {
    font-size: 50px !important; }
    
    #content-part .inner-content {
      padding: 30px 30px; }

  .dark-button {
    background: rgba(10, 26, 36, 0.3); }

  #navigation {
    background: #0a1a24;
    left: -20%;
    width: 20%;
    height: 100%; }
    #navigation a {
      padding: 1em 0 !important; }
      #navigation a:hover:after {
        left: -150px !important;
        -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        -ms-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        -o-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
        transition: all 0.3s cubic-bezier(0, 0, 0.58, 1); }

  #countdown_dashboard .dash-glob .dash .digit {
    font-size: 40px;
    height: 40px;
    line-height: 40px; }
  #countdown_dashboard .dash-glob .dash .text-right {
    font-size: 0.9em; }
  #countdown_dashboard .text-news {
    font-size: 3em; }
    #countdown_dashboard .text-news .point {
      display: block; }

  .right-content {
    left: 0 !important; }

  .translate-nav {
    left: 0 !important; }

  .translate-button {
    left: 20% !important; }

  .large-square .hover-info {
    opacity: 1;
    bottom: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  .large-square:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
    .large-square:hover .hover-info {
      opacity: 1;
      bottom: 0;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }

  .small-square .hover-info {
    opacity: 1;
    bottom: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  .small-square:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
    .small-square:hover .hover-info {
      opacity: 1;
      bottom: 0;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }

  .large-square .hover-info, .small-square .hover-info {
    display: block;
    position: absolute;
    min-height: 38px;
    top: auto;
    bottom: 0; }
 .large-square .hover-info h4, .small-square .hover-info h4 {
     font-size: 15px;
     font-weight: 700;
    }

  /*  
   * Skin Gallery
   */
  #swipebox-overlay {
    background: #0a1a24;
    -webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }

  .full-scale {
    left: 0 !important;
    opacity: 1 !important; }

  #swipebox-bottom-bar,
  #swipebox-top-bar {
    background: #0a1a24;
    opacity: 1;
    min-height: 50px; } }


/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  #navigation {
    background: #0a1a24;
    left: -50%;
    width: 50%; }

  .translate-nav {
    left: 0 !important; }

  .translate-button {
    left: 50% !important; }

  h1 {
    font-size: 50px; }

  .newsletter-title {
    font-size: 2em; }

    #content-part .inner-content {
      padding: 30px 30px; } 
    .inner-day1, .inner-day2 {
        padding: 0;
    }
    
    .service-item {
        margin-top: 0;
    }
    .service-item img {
        max-width: 200px;
    }
    
    #services-content, #credit {
        margin-top: 60px;
    }

  #main-about h1 {
    font-size: 40px !important; }

  p {
    font-size: 0.9em;
    line-height: 1.4em; }

  .item-title h2 {
    font-size: 1.7em !important; }

  #countdown_dashboard .dash-glob .dash .digit {
    font-size: 24px;
    height: 24px;
    line-height: 24px; }
  #countdown_dashboard .text-news {
    font-size: 2em; }
    #countdown_dashboard .text-news .point {
      display: block; }

  #subscribe #notifyMe {
    max-width: 100%;
    margin: auto;
    margin-top: 2em; }
    #subscribe #notifyMe .form-group {
      margin-bottom: 1em; }
      #subscribe #notifyMe .form-group .form-control {
        border: none;
        float: none !important;
        width: 100% !important;
        margin-bottom: 20px; }
      #subscribe #notifyMe .form-group button.submit {
        width: 100% !important;
        border: none !important; }
  #subscribe .block-message {
    min-height: 50px; }

  .fa-spinner {
    display: none !important; }

  #answer {
    min-height: 50px; }

  #home-part .item-title {
    -webkit-transform: translateY(calc(-50% - 30px));
    -moz-transform: translateY(calc(-50% - 30px));
    -ms-transform: translateY(calc(-50% - 30px));
    -o-transform: translateY(calc(-50% - 30px));
    transform: translateY(calc(-50% - 30px)); }

  #newsletter-part .item-title {
    -webkit-transform: translateY(calc(-50% + 10px));
    -moz-transform: translateY(calc(-50% + 10px));
    -ms-transform: translateY(calc(-50% + 10px));
    -o-transform: translateY(calc(-50% + 10px));
    transform: translateY(calc(-50% + 10px)); } }
/* Only for tablet in landscape mode */
/* Only for phone in landscape mode */
@media screen and (max-device-width: 667px) and (orientation: landscape) {
  #navigation {
    background: #0a1a24;
    left: -20%;
    width: 20%; }
    #navigation ul li a {
      padding: 0.5em 0 !important; }
      #navigation ul li a i {
        display: none; }

  #main-about {
    height: 50vh; }

  .translate-nav {
    left: 0 !important; }

  .translate-button {
    left: 20% !important; }

  .brand-logo {
    max-width: 100px; }

  h1 {
    font-size: 2em; }

  p {
    font-size: 0.9em;
    line-height: 1.4em; }

  .item-title h2 {
    font-size: 3em !important; }

  #countdown_dashboard .dash-glob .dash .digit {
    font-size: 7em; }
  #countdown_dashboard .text-day h3 {
    font-size: 2em; }

  #subscribe #notifyMe {
    max-width: 100%;
    margin: auto;
    margin-top: 2em; }
    #subscribe #notifyMe .form-group {
      margin-bottom: 1em; }
      #subscribe #notifyMe .form-group .form-control {
        border: none;
        float: none !important;
        width: 100% !important;
        margin-bottom: 20px; }
      #subscribe #notifyMe .form-group button.submit {
        width: 100% !important;
        border: none !important; }
  #subscribe .block-message {
    min-height: 40px; }

  #answer {
    min-height: 40px; } }