/* import the fonts */
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700");
body {
  font-family: 'Roboto Condensed';
  text-transform: uppercase;
  background-color: #222222;
  height: 100%;
  overflow: hidden; }

/* this next line of CSS creates the animation that occurs when we hover over the page. it uses transform to change the perspective, scale, and positioning of the .front section to reveal the new nav hiding beneath it */
.show-menu {
  transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);
  -ms-transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);
  /* IE 9 */
  -webkit-transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);
  /* Safari */
  /* hover over the text to check out the effect! */ }

h1 {
  font-size: 35px;
  text-align: center; }

.language {
  position: absolute;
  right: 0;
  top: 20%;
  width: 150px;
  padding: 10px;
}
.language button {
  float: right;
  width: 80px;
  height: 50px;
  border: none;
  background-color: white;
  transition: ease 0.3s;
  cursor: pointer;
  margin-bottom: 10px;
  font-weight: bold;
}
.language button:hover {
  background-color: black;
  color: white;
}
.language button:focus {
  outline: none;
}

.layer {
  display: flex;
  /* the following two css selectors aren't recognized by all browsers -- you may need to use some -webkit- prefixes */
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* let's create some styling to smooth out the transition when we hover over the body of the page */
  transition: transform .4s;
  transform: perspective(800px) scale(1) translateX(0) rotateY(0);
  -ms-transform: perspective(800px) scale(1) translateX(0) rotateY(0);
  /* IE 9 */
  -webkit-transform: perspective(800px) scale(1) translateX(0) rotateY(0);
  /* Safari */
  transform-style: preserve-3d; }

::-webkit-scrollbar {
  width: 8px; }

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }

.menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: 15px 25px;
  z-index: 10;
  cursor: pointer; }
  .menu-btn img {
    transition: ease .2s; }
  .menu-btn:hover img {
    filter: invert(25%); }

nav {
  vertical-align: center; }
  nav ul {
    padding-left: 66.66%;
    font-size: larger;
    /* font-size: larger is a cool trick that sets the font-size to exactly one size larger than the font size of the parent element */
    line-height: 2; }
    nav ul li {
      list-style-type: none;
      cursor: pointer; }
      nav ul li a {
        /* let's change that ugly default anchor tag styling */
        text-decoration: none;
        color: #fff;
        transition: ease .2s; }
        nav ul li a:hover {
          color: #cdcdcd; }
    nav ul .active {
      color: #cdcdcd; }

.menu-btn-mobile {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: 15px 25px;
  z-index: 10;
  cursor: pointer; }
  .menu-btn-mobile img {
    transition: ease .2s; }
  .menu-btn-mobile:hover img {
    filter: invert(25%); }

.mobile-nav {
  z-index: 20;
  position: absolute;
  width: 100%;
  height: 100vh;
  margin: 50px 0; }
  .mobile-nav ul {
    padding: 0; }
    .mobile-nav ul li {
      list-style-type: none;
      font-size: 40px;
      text-align: center;
      background-color: black;
      transform-origin: right;
      transition: ease 0.2s;
      transform: rotateY(90deg); }
    .mobile-nav ul .active {
      background-color: #cdcdcd; }

@media (min-width: 800px) {
  .menu-btn-mobile {
    display: none; }

  .menu-btn {
    visibility: visible; }

  nav {
    display: none; } }
.productions {
  font-size: 2rem;
  width: 80%;
  height: 90vh;
  overflow: hidden;
  display: block;
  padding: 0 0 0 150px;
  text-transform: none; }
  .productions ul {
    padding: 0;
    margin: 0;
    list-style: none; }
    .productions ul li {
      float: left;
      width: 150px;
      text-align: center;
      cursor: pointer;
      padding: 0 20px 25px 20px; }
    .productions ul .active-tab {
      background-color: rgba(255, 255, 255, 0.5); }
  .productions .section {
    height: 100%;
    width: 1025px;
    overflow-y: scroll;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.5); }
    /*box covers*/
    .metro {
      background-color: #107613;
    }
    .bosna {
      background-color: white;
    }
    .productions .section .box {
      width: 170px;
      height: 170px;
      margin: 15px 0 0 15px;
      cursor: pointer;
      float: left;
      position: relative;
      overflow: hidden; }
      .productions .section .box h1 {
        color: black;
        text-align: left;
        padding: 5px;
      }
      .productions .section .box img {
        width: 100%;
      }
      .productions .section .box .box-cover {
        position: absolute;
        z-index: 4;
        top: -170px;
        width: 170px;
        height: 170px;
        background-color: rgba(255,255,255,0.9);
        transition: ease 0.5s;
      }
      .productions .section .box .box-cover img {
        width: 100%;
      }
      .productions .section .box:hover .box-cover {
        top: 0;
      }
      .productions .section .box .image {
        width: 100%;
        height: 50px;
        text-align: center;
        padding: 5px; }
      .productions .section .box p {
        text-align: center;
        color: black;
        font-size: .5em;
        margin: 0;
        padding: 50px 5px; }

@media (max-width: 800px) {
  .productions {
    width: 100%;
    padding: 50px 0; }
    .productions ul li {
      width: 90%; }
    .productions .section {
      width: 100%;
      font-size: 16px; }
      .productions .section .box {
        width: 90%;
        height: 100px; } }
.front {
  background: #cdcdcd;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2); }
  .front video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover; }
  .front .main {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; }
    .front .main .title-main {
      font-size: 4rem;
      display: flex;
      margin: auto;
      text-align: center;
      flex-direction: column;
      width: 100%;
      color: white; }
      .front .main .title-main .sub {
        font-size: .4em; }
    .front .main .content {
      font-size: 4rem;
      display: flex;
      margin: 30px 30px;
      color: white;
      height: 90vh;
      overflow: hidden; }
      .front .main .content .title {
        transform: rotateZ(90deg);
        transform-origin: left top;
        margin: 0;
        padding: 0;
        left: 120px;
        position: absolute; }
      .front .main .content .text {
        font-size: 2rem;
        width: 80%;
        height: 100%;
        display: block;
        padding: 0 0 0 150px;
        text-transform: none; }
        .front .main .content .text .contact {
          color: white !important;
          width: 100%; }
        .front .main .content .text img {
          width: 150px;
          float: left;
          margin: 0 20px 0 0;
          -webkit-filter: grayscale(100%);
          /* Safari 6.0 - 9.0 */
          filter: grayscale(100%); }
      @media (max-width: 800px) {
        .front .main .content .title {
          display: none; }
        .front .main .content .text {
          padding: 50px 0;
          width: 100%;
          font-size: 16px; } }

/*# sourceMappingURL=main.css.map */