@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900|Josefin+Sans:400,300,600,700|Slabo+13px&subset=latin,latin-ext);
.josefin, .work-single .part-frame .introduction h5, .work-single .part-frame .introduction h6 {
  font-family: "Josefin Sans", sans-serif; }
.vh105 {
  height: 105vh;
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
   display: block;
}
#video-holder {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
     height: 0;
     width: 100%; /* You can set this width to whatever suits your needs */
     margin: 0 auto;
}
#vmdubai-video { 
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
.vjs-big-play-button {
    left: 0!important;
    right: 0!important;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-top: 22%!important;
}
.service:nth-child(1) .left, .service:nth-child(1) .right {
  -webkit-transform: translateX(0px)!important;
  transform: translateX(0px)!important;
}

/*YOUTUBE*/

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
  top: 0;
  color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
.intro {
    height: 100vh;
    min-height: 65rem;
    max-height: 75rem;
    overflow: hidden;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

#world-holder { width: 100%; }
#world { width: 100%; height: 0; padding-top: 29%; background-image: url(../three/static.png); background-repeat: no-repeat; background-position: center center; background-size: auto 100%; }
#world.hideimage { background-image: none !important; }
#world canvas { position: absolute; top: 0; left: 0; }
#world-text { font-family: "Source Sans Pro", sans-serif; margin: 0 auto; left: 30%; color: #fff; text-align: center; border-top: 2px solid #fff; border-bottom: 2px solid #fff; white-space: nowrap;
width: 40%; font-size: 5vw; letter-spacing: 0.6vw; margin-top: 2vw; line-height: 6vw; }
#world-gs { position: absolute; right: 0px; width: 9%; margin: 0px; top: 50%; margin-top: -7%; z-index: 2; }
@media (max-width: 960px) {
  #world { padding-top: 37%; }
  #world-text { width: 52%; left: 24%; margin-top: 2.5vw; font-size: 6.5vw; line-height: 8vw; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
}
@media (max-width: 800px) {
  #world-gs { width: 20%; margin-top: -10%; }
}
@media (max-width: 650px) {
  #world { padding-top: 45%; }
  #world-text { width: 62%; left: 19%; margin-top: 3vw; font-size: 8.4vw; line-height: 10vw; }
}

.source {
  font-family: "Source Sans Pro", sans-serif; }

.orange {
  background: orange; }

footer.seeall {
  background: #de1733; }
footer.menprom {
  background: #030104; }
footer.rcc {
  background: #32439b; }

.work-single .part-frame .introduction {
  margin-top: 8%;
  z-index: 2; }
  .work-single .part-frame .introduction h5 {
    color: white;
    font-size: 70px;
    text-transform: uppercase;
    font-weight: 600; }
  .work-single .part-frame .introduction h6 {
    color: white;
    font-size: 25px;
    padding-right: 20%;
    padding-top: 3%; }
    .work-single .part-frame .introduction h6.blue {
      color: #132771; }
.work-single.rcc {
  background: white url("../images/cases/rcc/dots-top.png") no-repeat center top;
  background-size: 100%; }
  .work-single.rcc .part-frame .header {
    padding: 40px 0;
    background: #32439b; }
    .work-single.rcc .part-frame .header p, .work-single.rcc .part-frame .header h3, .work-single.rcc .part-frame .header h4 {
      padding: 0 10px; }
    .work-single.rcc .part-frame .header .ends {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 5;
      bottom: 0;
      right: 0; }
      .work-single.rcc .part-frame .header .ends .end.left {
        padding: 0;
        width: 100px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0; }
        .work-single.rcc .part-frame .header .ends .end.left .in {
          position: absolute;
          bottom: -50px;
          width: 100px;
          height: 50px;
          background: #282c6a; }
          .work-single.rcc .part-frame .header .ends .end.left .in::before {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px 0 0 100px;
            border-color: transparent transparent transparent #293591;
            position: absolute;
            top: 0;
            content: ' '; }
        .work-single.rcc .part-frame .header .ends .end.left::before {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 60px 250px 0;
          border-color: transparent #293591 transparent;
          position: absolute;
          left: -60px;
          top: 50px;
          content: ' '; }
        .work-single.rcc .part-frame .header .ends .end.left::after {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 0 250px 60px;
          border-color: transparent transparent #293591;
          position: absolute;
          left: -60px;
          bottom: -50px;
          content: ' '; }
      .work-single.rcc .part-frame .header .ends .end.right {
        padding: 0;
        width: 100px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        transform: scaleX(-1); }
        .work-single.rcc .part-frame .header .ends .end.right .in {
          position: absolute;
          bottom: -50px;
          width: 100px;
          height: 50px;
          background: #282c6a; }
          .work-single.rcc .part-frame .header .ends .end.right .in::before {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px 0 0 100px;
            border-color: transparent transparent transparent #293591;
            position: absolute;
            top: 0;
            content: ' '; }
        .work-single.rcc .part-frame .header .ends .end.right::before {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 60px 250px 0;
          border-color: transparent #293591 transparent;
          position: absolute;
          left: -60px;
          top: 50px;
          content: ' '; }
        .work-single.rcc .part-frame .header .ends .end.right::after {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 0 250px 60px;
          border-color: transparent transparent #293591;
          position: absolute;
          left: -60px;
          bottom: -50px;
          content: ' '; }
  .work-single.rcc .part-frame.concept {
    background: #c3d1d7; }
    .work-single.rcc .part-frame.concept .introduction {
      margin-top: 1%; }
  .work-single.rcc .part-frame.brochure {
    background: #333;
    margin-top: -120px;
    padding-top: 100px;
    z-index: 1; }
  .work-single.rcc .part-frame.video {
    background: white;
    padding-bottom: 100px; }
    .work-single.rcc .part-frame.video img {
      cursor: pointer;
      opacity: 1;
      transition: all, .3s linear; }
      .work-single.rcc .part-frame.video img:hover {
        opacity: .6;
        transition: all, .3s linear; }
  .work-single.rcc .part-frame.result {
    background: #32439b; }
    .work-single.rcc .part-frame.result .introduction {
      background: #32439b url("../images/cases/rcc/result.png") no-repeat center top;
      background-size: 100%;
      min-height: 500px; }
      .work-single.rcc .part-frame.result .introduction h5, .work-single.rcc .part-frame.result .introduction h6 {
        color: white; }
  .work-single.rcc .part-frame.gallery {
    margin-top: -120px;
    padding-top: 100px;
    background: #c3d1d7 url("../images/cases/rcc/dots-top.png") no-repeat;
    background-size: 100%; }
    .work-single.rcc .part-frame.gallery .slider {
      padding: 5% 0; }
      .work-single.rcc .part-frame.gallery .slider .stage {
        background: url("../images/cases/princeza/frame.png") no-repeat;
        background-size: 100%;
        padding: 3.1% 5% 5% 5%; }
        .work-single.rcc .part-frame.gallery .slider .stage .princeza-slider .owl-stage-outer {
          width: 100%; }
        .work-single.rcc .part-frame.gallery .slider .stage .princeza-slider .owl-controls {
          width: 100%;
          top: 0;
          bottom: 0;
          position: absolute;
          left: 0;
          display: inline-block; }
          .work-single.rcc .part-frame.gallery .slider .stage .princeza-slider .owl-controls .owl-nav {
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0; }
            .work-single.rcc .part-frame.gallery .slider .stage .princeza-slider .owl-controls .owl-nav .owl-prev {
              position: absolute;
              background: url("../images/cases/princeza/left.png") no-repeat center center;
              width: 70px;
              left: -30%;
              top: 0;
              bottom: 0; }
            .work-single.rcc .part-frame.gallery .slider .stage .princeza-slider .owl-controls .owl-nav .owl-next {
              position: absolute;
              background: url("../images/cases/princeza/right.png") no-repeat center center;
              width: 70px;
              right: -30%;
              top: 0;
              bottom: 0; }
  .work-single.rcc .part-frame .introduction h5, .work-single.rcc .part-frame .introduction h6 {
    color: #555; }
  .work-single.rcc .separator {
    overflow: hidden;
    z-index: 2; }
    .work-single.rcc .separator.one {
      height: 120px; }
      .work-single.rcc .separator.one::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 3000px 120px 0;
        border-color: transparent transparent #c3d1d7;
        position: absolute;
        content: ' '; }
    .work-single.rcc .separator.two {
      height: 120px; }
      .work-single.rcc .separator.two::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 3000px 120px 0;
        border-color: transparent #c3d1d7 transparent transparent;
        position: absolute;
        content: ' '; }
    .work-single.rcc .separator.three {
      height: 120px; }
      .work-single.rcc .separator.three::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 3000px 120px 0;
        border-color: transparent #333 transparent transparent;
        position: absolute;
        content: ' '; }
    .work-single.rcc .separator.four {
      height: 120px; }
      .work-single.rcc .separator.four::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 3000px 120px 0;
        border-color: transparent #c3d1d7 transparent transparent;
        position: absolute;
        content: ' '; }
.work-single.seeall {
  background: url("../images/cases/seeall/top.png") no-repeat center top;
  background-size: 100%; }
  .work-single.seeall .part-frame.svstefan {
    padding-bottom: 12%;
    background: url("../images/cases/seeall/svstefan.png") no-repeat center center;
    background-size: cover; }
  .work-single.seeall .part-frame.bottom {
    padding-bottom: 12%;
    background: url("../images/cases/seeall/bottom.png") no-repeat center center;
    background-size: cover; }
  .work-single.seeall .part-frame.sep {
    background: #de1733; }
    .work-single.seeall .part-frame.sep .introduction {
      margin: 0;
      padding-bottom: 14%; }
  .work-single.seeall .website img {
    width: 100%; }
  .work-single.seeall .website iframe {
    width: 94%;
    left: 3%;
    height: 38vw;
    position: absolute;
    top: 3.5%; }
  .work-single.seeall .separator {
    margin-top: -10%; }
.work-single.menprom {
  background: #010101 url("../images/cases/menprom/top.png") no-repeat center top;
  background-size: 100%; }
  .work-single.menprom .slider {
    padding: 5% 0; }
    .work-single.menprom .slider .stage {
      background: url("../images/cases/princeza/frame.png") no-repeat;
      background-size: 100%;
      padding: 3.1% 5% 5% 5%; }
      .work-single.menprom .slider .stage .princeza-slider .owl-stage-outer {
        width: 100%; }
      .work-single.menprom .slider .stage .princeza-slider .owl-controls {
        width: 100%;
        top: 0;
        bottom: 0;
        position: absolute;
        left: 0;
        display: inline-block; }
        .work-single.menprom .slider .stage .princeza-slider .owl-controls .owl-nav {
          width: 100%;
          position: absolute;
          top: 0;
          bottom: 0; }
          .work-single.menprom .slider .stage .princeza-slider .owl-controls .owl-nav .owl-prev {
            position: absolute;
            background: url("../images/cases/princeza/left.png") no-repeat center center;
            width: 70px;
            left: -30%;
            top: 0;
            bottom: 0; }
          .work-single.menprom .slider .stage .princeza-slider .owl-controls .owl-nav .owl-next {
            position: absolute;
            background: url("../images/cases/princeza/right.png") no-repeat center center;
            width: 70px;
            right: -30%;
            top: 0;
            bottom: 0; }
  .work-single.menprom .part-frame.rostilj {
    min-height: 1300px;
    background: #010101 url("../images/cases/menprom/rostilj.png") no-repeat center bottom;
    background-size: 100%; }
  .work-single.menprom .part-frame.videos {
    min-height: 500px;
    background: #010101 url("../images/cases/menprom/video-back.png") no-repeat center center;
    background-size: cover;
    padding: 4% 0; }
    .work-single.menprom .part-frame.videos img {
      cursor: pointer;
      transition: all, .3s linear; }
      .work-single.menprom .part-frame.videos img:hover {
        opacity: .5;
        transition: all, .3s linear; }
  .work-single.menprom .part-frame.gallery {
    min-height: 500px;
    background: #010101 url("../images/cases/menprom/gallery-back.png") no-repeat center top;
    background-size: cover; }

@media (min-width: 0px) and (max-width: 960px) {
  .work-single.seeall {
    background: url("../images/cases/seeall/top.png") no-repeat center bottom;
    background-size: cover; }
  .work-single.menprom .part-frame.rostilj {
    min-height: 650px; }
  .work-single .part-frame .introduction {
    margin-top: 8%;
    z-index: 2; }
    .work-single .part-frame .introduction h5 {
      text-align: center;
      font-size: 40px;
      text-transform: uppercase;
      font-weight: 600; }
    .work-single .part-frame .introduction h6 {
      text-align: center;
      font-size: 20px;
      padding: 3% 10%; }
      .work-single .part-frame .introduction h6.blue {
        color: #132771; } }