/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
font-family: 'Morganite Book';
font-style: normal;
font-weight: normal;
src: local('Morganite Book'), url('Morganite-Book.woff') format('woff');
}


@font-face {
font-family: 'Morganite Book Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite Book Italic'), url('Morganite-BookItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite Thin';
font-style: normal;
font-weight: normal;
src: local('Morganite Thin'), url('Morganite-Thin.woff') format('woff');
}


@font-face {
font-family: 'Morganite Thin Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite Thin Italic'), url('Morganite-ThinItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Morganite ExtraLight'), url('Morganite-ExtraLight.woff') format('woff');
}


@font-face {
font-family: 'Morganite ExtraLight Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite ExtraLight Italic'), url('Morganite-ExtraLightItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite Light';
font-style: normal;
font-weight: normal;
src: local('Morganite Light'), url('Morganite-Light.woff') format('woff');
}


@font-face {
font-family: 'Morganite Light Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite Light Italic'), url('Morganite-LightItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite Medium';
font-style: normal;
font-weight: normal;
src: local('Morganite Medium'), url('Morganite-Medium.woff') format('woff');
}


@font-face {
font-family: 'Morganite Medium Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite Medium Italic'), url('Morganite-MediumItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite SemiBold';
font-style: normal;
font-weight: normal;
src: local('Morganite SemiBold'), url('Morganite-SemiBold.woff') format('woff');
}


@font-face {
font-family: 'Morganite SemiBold Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite SemiBold Italic'), url('Morganite-SemiBoldItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite Bold';
font-style: normal;
font-weight: normal;
src: local('Morganite Bold'), url('Morganite-Bold.woff') format('woff');
}


@font-face {
font-family: 'Morganite Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite Bold Italic'), url('Morganite-BoldItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite ExtraBold';
font-style: normal;
font-weight: normal;
src: local('Morganite ExtraBold'), url('Morganite-ExtraBold.woff') format('woff');
}


@font-face {
font-family: 'Morganite ExtraBold Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite ExtraBold Italic'), url('Morganite-ExtraBoldItalic.woff') format('woff');
}


@font-face {
font-family: 'Morganite Black';
font-style: normal;
font-weight: normal;
src: local('Morganite Black'), url('Morganite-Black.woff') format('woff');
}


@font-face {
font-family: 'Morganite Black Italic';
font-style: normal;
font-weight: normal;
src: local('Morganite Black Italic'), url('Morganite-BlackItalic.woff') format('woff');
}

body {
  	background-color: #040608; 
  	margin:0;
  	padding:0;
  	overflow-x:hidden;
}

a {
     text-decoration: none;
     color:inherit;
}


.instagram:hover {
  color: #5d6574;
}

.videopopupjs{
    background-color:#000;
    background-color:rgba(0,0,0,0.6);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    text-align: start!important;
}
.videopopupjs--hide{
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: videoPopupJsHide;
    animation-name: videoPopupJsHide;
}
.videopopupjs__close{
    width:30px;
    height:30px;
    cursor:pointer;
    display:block;
    margin-bottom:10px;
    color:rgba(255, 255, 255, 0.59);
}
.videopopupjs__close:after{
    width:30px;
    height:30px;
    display:block;
    text-align:center;
    content:'X';
    font-family:'Verdana';
    border-radius:50%;
    background:#333;
    line-height:2.2;
    font-size:13px;
}
.videopopupjs__close:hover{
    opacity:0.5;
}
.videopopupjs--animation{
    opacity: 0;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: videoPopupJs;
    animation-name: videoPopupJs;
}
.videopopupjs__content{
    margin:0 auto;
    height:100%;
    height:500px;
    width:100%;
    margin-top:5%;
}
.videopopupjs__content iframe{
    width:100%;
    height:100%;
}
.videopopupjs__block--notfound{
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width:100%;
    height:500px;
    background-color:#fff;
    text-align:center;
    vertical-align: middle;
    line-height: 500px;
    font-family:'Arial';
    font-size:20px;
}

@-webkit-keyframes videoPopupJs{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes videoPopupJs{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@-webkit-keyframes videoPopupJsHide{
    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}

@keyframes videoPopupJsHide{
    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}


.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 6.2%;
  width: 87.6%;
  height: 87.6%;
}


 button[name="play"] {
  width: 80px;
  height: 80px;
  background: none;
  background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7));
  border-width: 2px;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
  z-index:4;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left:-40px;
  margin-top:-40px;
    transition: 0.2s ease; 
  
}
button[name="play"]:focus {
  outline: 0;
  

}

 button[name="play"]::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 1px;
  left: 3px;
  border-style: solid;
  border-width: 12px 0 12px 25px;
  border-color: transparent transparent transparent #eaeaea;
}

 button[name="play"]:hover {
   border-width: 4px;
}




/* GENREALNE VREDNOSTI/////////--------------------------------- */
.PLAN-9-Logo {
 z-index:33;
  margin-top:50px;
  left:6.2%;
  position:absolute;
  object-fit: contain;
}

.uvodAbout {
 z-index:33;
 float:right;
  margin-top:10px;
  right:20.2%;
  position:absolute;
  object-fit: contain;
    color: #eaeaea;
    font-family: 'Morganite ExtraBold';
   font-size: 30px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
}


.GENRE{
   opacity:0; /* Completely visible. */

}
.footerFROST{

padding-top:6%;
}

.darkMaskHero{
width:100%;
height:1440px;
position:fixed;
z-index:6;
top:-1440px;
object-fit: contain;
background-blend-mode: multiply;
background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7));

}
.Bitmap{
  width: 100%;
  object-fit: contain;
  position:relative;
  }
  
  
  .BitmapMobile{
  width: 100%;
  object-fit: contain;
  position:relative;
  }
  
.aboutFilm{
position:relative;
display:inline-block;
padding-left:6.2%;
width:90%;

}

#playButton{
  cursor:pointer;
  z-index:9;
   -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


.logos{
width:15%;
display:inline-block;
padding-bottom:20px;
padding-right:20px;
padding-left:6.2%;
padding-top:10%;

}
.uvodEseji{

display:inline-block;
	margin-top:10%;
	margin-left:10%;
	margin-right:10%;
margin-bottom:10%;
padding-bottom:10%;

  object-fit: contain;
  font-family: Karla;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

}
.esej{

width:80%;
}
.esejSlika1{

padding:100px;
width: 80%;
}
.uvodEsejiMobile{

display:inline-block;
	margin-top:10%;
	margin-left:10%;
	margin-right:10%;
margin-bottom:10%;
padding-bottom:10%;
  height: 430px;
  object-fit: contain;
  font-family: Karla;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

}
.logos-coproducer{
width:30%;
display:inline-block;
padding-bottom:100px;
padding-right:20px;
padding-left:6.2%;
padding-top:10%;

}

.FEATURE-FILM-DRAMA {
  margin-left:6.2%;
  width: 359px;
  height: 60px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 26px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0.06px;
  color: #eaeaea;
}
.aboutFilm div{
display:inline-block;
}
.FILM-TITILE{
padding-top:5%;
margin-left:6.2%;
  width: 527px;
  height: 120px;
  position:relative;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 120px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.21px;
  color: #eaeaea;
}

.Festivals-Cannes-Fil {
 float:left;
  width: 260px;
  height: 545px;
  object-fit: contain;
  font-family: Karla;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
}

ul{list-style:none;}
li{opacity:0;right:100%;position:relative;
}

.menu{
position:fixed;
z-index:100;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 100px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 1px;
  color: #eaeaea;
  right:10%;
  top:-1440px;
}  
.workTitle{
	 width: 139px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  position:relative;
  font-size: 120px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.21px;
  color: #eaeaea;
  display:inline;
  padding-left:21.5%;
  top:60px;
}

.textWork{
 width: 150px;
 width: 287px;
  height: 100px;
  object-fit: contain;
  font-family: Karla;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position:relative;
  padding-left:21.5%;
  padding-top:5%;
}
.Project-Details-Dura {
 float:left; 
  width: 206px;
  height: 457px;
  object-fit: contain;
  font-family: Karla;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
}
.Synopsis-Jovan-start {
 float:left; 
	margin-right:5%;
  width: 299px;
  height: 430px;
  object-fit: contain;
  font-family: Karla;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  
}

.PLAN-9-Logo.animate {
    transform: scale(2) translateY(40%) translateX(30%);
    transition: transform .5s ease;
}   
.text{
  width: 287px;
  height: 100px;
  object-fit: contain;
  font-family: Karla;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

}
.GENRE {
   position:absolute;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  color: #eaeaea;
  z-index:33;
   transition: all 0.4s ease-in-out;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease; 
    top:40%;
 
}
#minusButtonId{
position: fixed;
top:70px;
 color: #eaeaea;
}

.minusButtonAll{
 position: fixed;
right:8%;
   cursor: pointer;
   z-index: 100;
 
}   
.Minus-Icon{
   position:absolute;
   object-fit: contain;
    width: 33px;
  height: 2px;
   background-color: #edefef;
}

.Minus-IconALL{
   position:absolute;
   object-fit: contain;
    width: 33px;
  height: 2px;
   background-color: #edefef;
}


.Minus-Icon2ALL{
 width: 2px;
  height: 33px;
 top:-15.5px;
 left:15.5px;
  background-color: #edefef;
  position:relative;
  object-fit: contain;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; 
}
.Minus-Icon2{
 width: 2px;
  height: 33px;
 top:-15.5px;
 left:15.5px;
background-color: #edefef;
  position:relative;
  object-fit: contain;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; 
}

.active > .Minus-Icon2 {
    transform: rotate(90deg);
    }
    
.WHO-ARE-WE {
  width: 395px;
 
  padding-left:6.2%;
  padding-top:77px;
  font-family: 'Morganite ExtraBold';
  font-size: 120px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.39px;
  color: #eaeaea;
  
}    
    
.Plan-9-is-a-producti {
  width: 416px;
  height: 161px;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.11;
  letter-spacing: 0.39px;
  color: #eaeaea;
  position:relative;

}   

.bios{
 padding-left:6.2%;
 padding-top:24px;
 position:relative;

}

.bio{
 padding-bottom:5%;
}
.PAVLE-VUCKOVIC-Lorem {
  width: 442px;
  height: 225px;
  object-fit: contain;
  font-family: Karla;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position:relative;
}

.PAVLE-VUCKOVIC-TITLE {
	color: #ffffff;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  line-height: 0.67;
  letter-spacing: 0.14px;
  
}

.outerSmallIpad{
position:relative;
overflow: hidden;
width:100%;
}
.Plan-9-MASKA {
  width: 100%;
  position:absolute;
  object-fit: contain;
  z-index:2;
  top:-10%;
  left: 0;
}
 

    
.PRODUCTION-COMPANY {
  width: 20%;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 4em;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.04px;
  text-align: center;
  color: #1a1a1a;
   z-index:3;
     Bottom: 4%;
    left:50%;
    margin-left:-10%;
     position:absolute;
}


.FOLOW-US-INSTAGRAM-F {
  
  height: 49px;
  object-fit: contain;
  position:relative;
  font-family: 'Morganite ExtraBold';
  font-size: 53px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.92;
  letter-spacing: 0.33px;
  color: #eaeaea;
   left:6.4%;
   z-index:3;
  display : inline; 
  margin-right: 5%;
}


.LETS-WORK-TOGETHER {
 color: #eaeaea;
 position: relative;
 left:6.2%;
 font-family: 'Morganite ExtraBold';
}

.Ready-to-start-your {
  color: #eaeaea;
  position: relative;
  left:6.2%;
  font-family: 'Karla', sans-serif;
} 

.officeplan9rs {
  color: #eaeaea;
  position: relative;
  left:6.2%;
  font-family: 'Morganite ExtraBold';
}

.outerSmall{
position:relative;
overflow: hidden;
height:300px;
width:100%;
}


.IN-PRODUCTION {
  width: 93px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
  position: absolute;
   padding-top:4.2%;
   left:6.2%;
   z-index:3;
}

.FEATURE-FILM {
	 z-index:3;
	 
	 }

.FROST {
    z-index:3;
}

.Lorem-ipsum-dolor-si {
z-index:3;
}
.Rectangle {
 z-index:3;
}
.FIND-OUT-MORE-Button {
 z-index:3;
   }
.SMALL {
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  color: #eaeaea;
  position:absolute;
  z-index:2;
  	left:6.2%;
  	top:50%;
  	margin: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  	 transition: all 0.4s ease-in-out;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease; 
    }
  	
.DARK-BOX {
  width: 10%;
  height:300px;
  position:absolute;
  object-fit: contain;
  z-index:4;
 
}


.workThumbs {
width:100%;
transition: transform .5s ease;
}

.outer{
  position:relative;
}

.outerFROST {
  overflow: hidden;
  position:relative;
 
}
.outerFROST:hover > .outerFROSTimg {
  transform: scale(1.11);
   transition: transform .5s ease;
   
   
}
.outerFROSTimg{

transition: transform .5s ease;
}

.outerSmall:hover .workThumbs{
 transform: scale(1.11);
   transition: transform .5s ease;

   opacity:0.6;

}



.outerSmall:hover > .SMALL{
   transform: scale(2) translateY(-40%) translateX(29.5%);
   transition: transform .5s ease;
  
}

.outerSmall:hover > .GENRE{
  transform: translateX(250px);
   opacity:1; /* Completely visible. */
   transition:1s; 
   transition: transform .5s ease;
  
}

.FIND-OUT-MORE-Button-Copy {
  width: 10%;
  height: 30px;
  position: absolute;
  object-fit: contain;
    font-family: 'Morganite ExtraBold';
  font-size: 30px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  color: #eaeaea;
  z-index:33;
   transition: all 0.4s ease-in-out;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease; 
    left:-15%;
    top:68%;
     border: 1px solid white;
   text-align: center;
   padding-top: 0.5%;
    cursor: pointer;
     opacity:0; 
   
}
.FIND-OUT-MORE-Button-Copy:hover {

  background-color:#eaeaea;
  color: #000000;
   }
   
.outerSmall:hover > .FIND-OUT-MORE-Button-Copy{
  transform: translateX(223%);
   transition: transform .5s ease;
   opacity:1; /* Completely visible. */
}

.Hero-Video {
  width: 100%;
  object-fit: contain;
}

.Mraz-1 {
  width: 100%;
  object-fit: contain;
}

.RectangleFORST {
  width: 100%;
  object-fit: contain;
  top:-50px;
  position:relative;
}

.rectangleSame {
  width: 88.5%;
  position: relative;
  left:6.2%;
  object-fit: contain;
  padding-bottom:5%;
}

.rectangleBLOCK {
  width: 88.5%;
   position: relative;
    left:6.2%;
    padding-bottom:7.05%;
  object-fit: contain;  
}

.Hero-Video-CopyiPad {
 width: 100%;
  object-fit: contain;
}

.Mraz-1-iPAD { 
 width: 100%;
  object-fit: contain;
}


 .FIND-OUT-MORE-Button:hover {

  background-color:#eaeaea;
  color: #000000;
   }
   
 .Copy-right-PLAN9-201 {
  color: #eaeaea;
  display:inline;
  padding-bottom:1%;
  font-family: 'Karla', sans-serif;
  padding-left:6.2%;
  padding-bottom:5%;
} 



@media (min-width: 1921px) and (max-width:2881px) {
  #workWrapIpad {display:none}  
#workWrapMobile {display:none}
.Mraz-1-iPAD { display:none;}
.Hero-Video-CopyiPad {display:none}
.Rectangle-Copy-10 { display:none;}
.Hero-Video-Copy {display:none}
 .Mraz-1-Copy {display:none} 
 .RectangleFORSTIpad {display:none}
 .BitmapMobile{display:none}

.PLAN-9-Logo {
  width: 200px;
  float:left;
  object-fit: contain;
   position: absolute;
   left:6.2%;
   top:100px;
}
.darkMaskHero{
height:1800px;
top:-1800px;
}

.menu{
  font-size: 200px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 1px;
  right:10%;
  top:-1400px;
}  

#minusButtonId{

top:190px;
 right: 10%; 
 
}    
.Minus-Icon {
  width: 70px;
  height: 6px;
  object-fit: contain;
  position: absolute;
  
}

.Minus-Icon2{
 width: 6px;
  height: 70px;
 top:-33.5px;
 left:33.5px;
background-color: #edefef;
  position:relative;
  object-fit: contain;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; 
}

.Stroke-1 {
  width: 99.6px;
  height: 99.6px;
  object-fit: contain;
  left: 50%;
  top: 50%;
  position:absolute;
  z-index:5;
  margin-left:-49.8px;
  margin-top:-49.8px;
}

.Stroke-3 {
  width: 39.7px;
  height: 39.7px;
  object-fit: contain;
  left: 50%;
  top: 50%;
  position:absolute;
    z-index:5;
    margin-left:-18px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


 button[name="play"] {
  width: 120px;
  height: 120px;
  background: none;
   background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7));
  border-width: 4px;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
  z-index:100;
  position:absolute;
	left: 50%;
  top: 50%;
   z-index:4;
  
}
button[name="play"]:focus {
  outline: 0;
  border: 1px solid hsl(210, 58%, 69%);
  box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}

 button[name="play"]::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 1px;
  left: 3px;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent white;
}



.Rectangle-Copy {
  width: 2px;
  height: 33px;
  transform: rotate(-270deg);
  background-color: #edefef;
  position: absolute;
   top:85px;
   right:104px;
}


.Sit-amet-nisl-purus {
 width: 736px;
  height: 186px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 75px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.96;
  letter-spacing: 0.35px;
  text-align: center;
  color: #eaeaea;
  position: absolute;
 	left:37%;
    top: 82%;
}
.Down-Arrow {
  width: 32px;
  height: 18px;
  object-fit: contain;
  position: absolute;
  left:50%;
  top:85%;
   margin-left:-16px
}



.IN-PRODUCTION {
  width: 593px;

  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 66px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
  position: absolute;
   padding-top:7.2%;
   left:6.2%;
}

.FEATURE-FILM {
  width: 234px;
 
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 100px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
	position: absolute;
	left:6.2%;
	padding-top:19%;
}

.FROST {
  width: 295px;
  font-size: 480px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;

   padding-top:220px;
   left:6.2%;
}



.Rectangle {
  width: 208px;
  height: 16px;
  object-fit: contain;
  background-color: #eaeaea;
  position: absolute;
  margin-top:40%;
   left:6.2%;
}

.Lorem-ipsum-dolor-si {
  width: 455px;
  
  object-fit: contain;
  font-family: Karla;
  font-size: 32px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
  position: absolute;
  margin-top:43%;
   left:6.2%;
}
  

.LETS-WORK-TOGETHER {
   width: 1944px;
  object-fit: contain;
  font-size: 220px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.49px;
 

}
.Ready-to-start-your {
  width: 500px;
  object-fit: contain;
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.04px;
  color: #eaeaea;
} 

.officeplan9rs {
  width: 193px;
  height: 49px;
  font-size: 100px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.92;
  letter-spacing: 0.13px;
   padding-bottom:8%;
}
.FOLOW-US-INSTAGRAM-F{
  font-size: 100px;

}

 .Copy-right-PLAN9-201 {
 padding-bottom:6%;
 font-size: 26px;
} 



/* WORK PAGE DESKTOP 2800px//////////------------------------------------------------------ */
.workTitle{
	 width: 139px;
  font-size: 220px;
  padding-left:21.5%;
  top:130px;
}


.FILM-TITILE{
 font-size: 220px;
 width:1000px;
}


.GENRE {
  width:15%;
  height: 60px;
  font-size: 55px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  left:-30px;
  top:49%;
}


   
.SMALL{
  width: 504px;
  height: 70px;
  object-fit: contain;
  font-size: 85px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.78;
  letter-spacing: 0.38px;

 }     
.outerSmall{
height:480px;

}
.FIND-OUT-MORE-Button-Copy {
  width: 10%;
  height: 50px;
  position: absolute;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 40px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
}

.textWork{
 width: 450px;
  height: 100px;
  object-fit: contain;
  font-family: Karla;
  font-size: 26px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position:relative;
  padding-left:21.5%;
  padding-top:5%;
}

.FEATURE-FILM-DRAMA{
  width: 659px;
  padding-top:100px;
  font-size: 56px;
}

.aboutFilm{
padding-top:80px;
padding-bottom:10%;
}
.aboutFilm div{
  font-size: 30px;
  width:500px;
  height:650px;

}

/* FROST PAGE DESKTOP 1920px */

.RectangleFROST {
  width: 100%;
  object-fit: contain;
}
.FROSTmain {
 width: 266px;
  height: 264px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 420px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:3%;
   left:6.2%;
}



.SINOPSIS {
 width: 94px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 100px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
   position: relative;
 	margin-top:20%;
   left:6.2%;
}

.A-rational-police-de {
  width: 1156px;
  height: 420px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 32px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  margin-top:2%;
   position: relative;
   left:6.2%;
}


.ABOUT-THE-PROJECT {
  width: 705px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
   font-size: 100px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;

  position: relative;
 	top:65px;
   left:6.2%;
}

.Frost-is-a-modern-fa {
width: 1556px;
  height: 785px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 32px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

  position: relative;
 	top:86px;
 	padding-bottom:10%;
   left:6.2%;
}
 
 
 .DIRECTORS-BIO {
    width: 657px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 100px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
 	top:65px;
   left:6.2%;
} 

.Pavle-vukovi-is-bo {
    width: 1256px;
  height: 644px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 32px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
   
}
.DIRECTORS-STATMENT {
  width: 518px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 100px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
   left:6.2%;
   top:65px;
}


.This-subject-and-ide {
   width: 1256px;
  height: 1004px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 32px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
 
}

.Frost-Myth {
  width: 1556px;
  height: 500px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 32px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;

}


}
@media (min-width: 1441px) and (max-width:1920px) {
.Mraz-1-iPAD { display:none;}
  #workWrapIpad {display:none}  
#workWrapMobile {display:none}
.Hero-Video-CopyiPad {display:none}
.BitmapMobile {display:none}
.Hero-Video-CopyiPad {display:none}
.Rectangle-Copy-10 { display:none;}
.Hero-Video-Copy {display:none}
 .Mraz-1-Copy {display:none} 
 .RectangleFORSTIpad {display:none}
.PLAN-9-Logo {
   width: 82px;
  height: 33px;
	 left:6.2%;

	   object-fit: contain;
	   z-index:99;
	    transform: scale(1);
	    transition: transform .5s ease;
}

.Minus-Icon {
  width: 33px;
  height: 2px;
  object-fit: contain;
  position: absolute;
   
}

.Rectangle-Copy {
  width: 2px;
  height: 33px;
  transform: rotate(-270deg);
  background-color: #edefef;
  position: absolute;
   top:85px;
   right:104px;
}


.Sit-amet-nisl-purus {
 width: 336px;
  height: 86px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 45px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.96;
  letter-spacing: 0.35px;
  text-align: center;
  color: #eaeaea;
  position: absolute;
 	left:41%;
    top: 81%;
}

.Down-Arrow {
  width: 32px;
  height: 18px;
  object-fit: contain;
  position: absolute;
  left:50%;
  top:75%;
   margin-left:-16px
}

.FEATURE-FILM {
  width: 234px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
	position: absolute;
	left:6.2%;
	padding-top:15%;
	 z-index:3;
	 }

.FROST {
  width: 295px;
  height: 220px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 220px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:21.8%;
   left:6.2%;
    z-index:3;
}


.FROSTmain {
  width: 295px;
  height: 220px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 220px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:34px;
   left:6.2%;
}

.A-rational-police-de {
  width: 556px;
  height: 220px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
    position: relative;
  padding-top:289px;
   left:6.2%;
}

.SINOPSIS {
  width: 94px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
   position: relative;
 	top:277px;
   left:6.2%;
}



.ABOUT-THE-PROJECT {
  width: 350px;
  height: 60px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
 	top:65px;
   left:6.2%;
}

.Frost-is-a-modern-fa {
  width: 720px;
  height: 485px;
  object-fit: contain;
  font-family: Karla;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
  position: relative;
 	top:86px;
   left:6.2%;
}
.Rectangle {
  width: 108px;
  height: 8px;
  object-fit: contain;
  background-color: #eaeaea;
  position: absolute;
  margin-top:35%;
   left:6.2%;
}


.Lorem-ipsum-dolor-si {
  width: 305px;
  height: 100px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
  position: absolute;
  margin-top:38%;
   left:6.2%;
}

.FIND-OUT-MORE-Button {
  width: 190px;
  height: 45px;
   border: 1px solid white;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.01px;
  color: #eaeaea;
  object-fit: contain;
   position: absolute;
  margin-top:48%;
   left:6.2%;
   text-align: center;
   padding-top: 10px;
  
   
   }


.LETS-WORK-TOGETHER {
   width: 744px;
  height: 144px;
  object-fit: contain;
  font-size: 120px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.49px;
  

}
.Ready-to-start-your {
  width: 320px;
  height: 91px;
  object-fit: contain;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.04px;
} 

.officeplan9rs {
  width: 193px;
  height: 49px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 53px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.92;
  letter-spacing: 0.13px;
  color: #eaeaea;
    position: relative;
   left:6.2%;
   padding-bottom:18%;
}


.Copy-right-PLAN9-201 {
  width: 320px;
  height: 24px;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.04px;
}
/* WORK PAGE DESKTOP 1920px/////////------------------------- */

 .SMALL{
  width: 304px;
  height: 70px;
  object-fit: contain;
  font-size: 45px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.78;
  letter-spacing: 0.38px;
 } 
.textWork{
 width: 350px;
  height: 60px;
  object-fit: contain;
  font-family: Karla;
  position:relative;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: 0.04px;
  color: #ffffff;
  
}

.GENRE {
  width:110px;
  height: 60px;
  font-size: 30px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  left:-135px;

 
}

.outerSmall:hover > .GENRE{
  transform: translateX(280px);
   opacity:1; /* Completely visible. */
   transition:1s; 
   transition: transform .5s ease;
  
}

/* FROST PAGE DESKTOP 1920px */

.RectangleFROST {
  width: 100%;
  object-fit: contain;
}
.FROSTmain {
 width: 266px;
  height: 264px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 220px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:34px;
   left:6.2%;
}

.A-rational-police-de {
  width: 556px;
  height: 220px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
    position: relative;
  padding-top:289px;
   left:6.2%;
}

.SINOPSIS {
 width: 94px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
   position: relative;
 	top:277px;
   left:6.2%;
}

.A-rational-police-de {
  width: 556px;
  height: 220px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  
   position: relative;

   left:6.2%;
}


.ABOUT-THE-PROJECT {
  width: 305px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;

  position: relative;
 	top:65px;
   left:6.2%;
}

.Frost-is-a-modern-fa {
 width: 672px;
  height: 485px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

  position: relative;
 	top:86px;
   left:6.2%;
}
 
 
 .DIRECTORS-BIO {
    width: 257px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
 	top:65px;
   left:6.2%;
} 

.Pavle-vukovi-is-bo {
  width: 695px;
  height: 324px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
   
}
.DIRECTORS-STATMENT {
  width: 518px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
   left:6.2%;
   top:65px;
}



.This-subject-and-ide {
  width: 755px;
  height: 614px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
}

.Frost-Myth {
 width: 595px;
  height: 344px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;

}


}
@media (min-width: 1279px) and (max-width:1440px) {

  #workWrapIpad {display:none}  
#workWrapMobile {display:none}
.Mraz-1-iPAD { display:none;}
.Hero-Video-CopyiPad {display:none}
.Hero-Video-CopyiPad {display:none}
.Rectangle-Copy-10 { display:none;}
.Hero-Video-Copy {display:none}
 .Mraz-1-Copy {display:none} 
 .BitmapMobile{display:none;}
 .RectangleFORSTIpad {display:none}
  
.LETS-WORK-TOGETHER {
   width: 740px;
  height: 144px;
  object-fit: contain;
  font-size: 120px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.29px;
}

.Ready-to-start-your {
  width: 320px;
  height: 91px;
  object-fit: contain;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.04px;
} 

.officeplan9rs {
  width: 193px;
  height: 49px;
  object-fit: contain;
  font-size: 53px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.92;
  letter-spacing: 0.13px;
  padding-bottom:10%;
}

 .Copy-right-PLAN9-201 {
  width: 320px;
  height: 24px;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.04px;
} 

 .SMALL{
  width: 304px;
  height: 70px;
  object-fit: contain;
  font-size: 45px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.78;
  letter-spacing: 0.38px;
 } 
/* 
  PRIVREMENA MAIN PAGE
*/

.FILM-TITILE{

  width: 727px;
}
.Hero-Video {
  width: 100%;
    object-fit: contain;
}

.PLAN-9-Logo {
  width: 82px;
  height: 33px;
	 left:6.2%;
	   object-fit: contain;
	   z-index:99;
	    transform: scale(1);
	    transition: transform .5s ease;
}

.Minus-Icon {
  width: 33px;
  height: 2px;
  object-fit: contain;
  position: absolute;
   
}

.Rectangle-Copy {
  width: 2px;
  height: 33px;
  transform: rotate(-270deg);
  background-color: #edefef;
}

.Sit-amet-nisl-purus {
  width: 336px;
  height: 86px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 45px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.96;
  letter-spacing: 0.35px;
  text-align: center;
  color: #eaeaea;
   position: absolute;
 	left:38%;
    bottom: 10%;
}

.Down-Arrow {
  width: 32px;
  height: 18px;
  object-fit: contain;
  position: absolute;
  left:50%;
  top:80%;
  margin-left:-16px
}

.IN-PRODUCTION {
    width: 913px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
  position: absolute;
   padding-top:7.2%;
   left:6.2%;
}

.FEATURE-FILM {
  width: 434px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
	position: absolute;
	left:6.2%;
	padding-top:14%;
}

.FROST {
   width: 266px;
  height: 264px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 220px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:8%;
   left:6.2%;
}

.Rectangle {
  width: 108px;
  height: 8px;
  object-fit: contain;
  background-color: #eaeaea;
  position: absolute;
  margin-top:40%;
   left:6.2%;
}


.Lorem-ipsum-dolor-si {
  width: 286px;
  height: 100px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: absolute;
  margin-top:44%;
   left:6.2%;
}


.GENRE {
  width:110px;
  height: 60px;
  font-size: 30px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  left:-135px;

 
}


/* 
  FROST MAIN PAGE
*/


.FROSTmain {
 width: 266px;
  height: 264px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 220px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:34px;
   left:6.2%;
   }
   
.SINOPSIS {
  width: 94px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
   position: relative;
 	top:277px;
   left:6.2%;
}

.A-rational-police-de {
 width: 556px;
  height: 220px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

    position: relative;
  padding-top:289px;
   left:6.2%;
}



.ABOUT-THE-PROJECT {
   width: 305px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
 	top:65px;
   left:6.2%;
   padding-bottom:20px;
}

.Frost-is-a-modern-fa {
  width: 720px;
  height: 525px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
  position: relative;
 	 padding-top:3%;
   left:6.2%;
}
 
  
 .DIRECTORS-BIO {
    width: 257px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
 	top:65px;
   left:6.2%;
   padding-bottom:20px;
} 

.Pavle-vukovi-is-bo {
  width: 695px;
  height: 324px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
   
}
.DIRECTORS-STATMENT {
  width: 518px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
   left:6.2%;
   top:65px;
   padding-bottom:20px;
}



.This-subject-and-ide {
  width: 755px;
  height: 514px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
}

.Frost-Myth {
 width: 595px;
  height: 344px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;

}

  
}
@media (min-width: 1024px) and (max-width:1279px) {
.BitmapMobile{display:none;}
  #workWrapMobile {display:none;} 
#workWrap {display:none;}
.Mraz-1-iPAD { display:none;}
.Hero-Video-CopyiPad {display:none}
.Hero-Video-CopyiPad {display:none}
.Rectangle-Copy-10 { display:none;}
.Hero-Video-Copy {display:none}
 .Mraz-1-Copy {display:none} 

    
.LETS-WORK-TOGETHER {
   width: 740px;
  height: 144px;
  object-fit: contain;
  font-size: 120px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.29px;
 

}

.Ready-to-start-your {
  width: 320px;
  height: 91px;
  object-fit: contain;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.04px;
} 

.officeplan9rs {
  width: 193px;
  height: 49px;
  object-fit: contain;
  font-size: 53px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.92;
  letter-spacing: 0.13px;
}

 

/* 
  PRIVREMENA MAIN PAGE
*/


.Hero-Video {
  width: 100%;
    object-fit: contain;
}

.PLAN-9-Logo {
  width: 82px;
  height: 33px;

   top:10px;

}

.Minus-Icon {
  width: 33px;
  height: 2px;
  object-fit: contain;
  position: absolute;
   
}

.Rectangle-Copy {
  width: 2px;
  height: 33px;
  transform: rotate(-270deg);
  background-color: #edefef;
}

.Sit-amet-nisl-purus {
  width: 336px;
  height: 86px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  
  font-size: 38px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.96;
  letter-spacing: 0.5px;
  text-align: center;
  color: #eaeaea;
   position: absolute;
 	left:34%;
    top: 36%;
}

.Down-Arrow {
  width: 30px;
  height: 18px;
  object-fit: contain;
  position: absolute;
  left:50%;
  top:80%;
   margin-left:-15px
}

.IN-PRODUCTION {
    width: 913px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
  position: absolute;
   padding-top:7.2%;
   left:6.2%;
}

.FEATURE-FILM {
  width: 434px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
	position: absolute;
	left:6.2%;
	padding-top:20%;
}

.FROST {
   width: 266px;
  height: 264px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 220px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:23%;
   left:6.2%;
}

.Rectangle {
  width: 108px;
  height: 8px;
  object-fit: contain;
  background-color: #eaeaea;
  position: absolute;
  margin-top:40%;
   left:6.2%;
}


.Lorem-ipsum-dolor-si {
  width: 286px;
  height: 100px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: absolute;
  margin-top:45%;
   left:6.2%;
}


/* 
  WORK  PAGE
*/
 
.SMALL{
  width: 298px;
  height: 35px;
  object-fit: contain;
  font-size: 35px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.78;
  letter-spacing: 0.08px;
}

 .GENRE {
  width:300px;
  height: 50px;
  font-size: 26px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  left:-135px;

 
}

.FIND-OUT-MORE-Button-Copy {
  width: 10%;
  height: 20px;
  font-size: 25px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  color: #eaeaea;
  z-index:3;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease; 
    left:-50px;
    top:60%;
     border: 1px solid white;
   text-align: center;
  padding: 8px 12px;
    cursor: pointer;
   
   
}

.outerSmallIpad:hover > .SMALL{
   transform: scale(1.9) translateY(-20px) translateX(70px);
   transition: transform .5s ease;
  
}

.outerSmallIpad:hover > .GENRE{
  transform: translateX(200px);
   transition: transform .5s ease;
    opacity:1; /* Completely visible. */
  
}

.outerSmallIpad:hover > .FIND-OUT-MORE-Button-Copy{
  transform: translateX(115px);
   transition: transform .5s ease;
  opacity:1;
}

 .outerSmallIpad:hover .workThumbs{
 transform: scale(1.11);
   transition: transform .5s ease;
   opacity:0.6;
}
/* 
  FROST MAIN PAGE
*/


.FROSTmain {
 width: 266px;
  height: 264px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 220px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.07px;
  color: #eaeaea;
  position: absolute;
   padding-top:34px;
   left:6.2%;
   }
   
.SINOPSIS {
  width: 94px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
   position: relative;
 	top:277px;
   left:6.2%;
}

.A-rational-police-de {
 width: 556px;
  height: 220px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

    position: relative;
  padding-top:289px;
   left:6.2%;
}



.ABOUT-THE-PROJECT {
   width: 305px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
 	top:65px;
   left:6.2%;
   padding-bottom:20px;
}

.Frost-is-a-modern-fa {
  width: 720px;
  height: 475px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
  position: relative;
 	 padding-top:3%;
   left:6.2%;
}
 
  
 .DIRECTORS-BIO {
    width: 257px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
 	top:65px;
   left:6.2%;
   padding-bottom:20px;
} 

.Pavle-vukovi-is-bo {
  width: 695px;
  height: 324px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
   
}
.DIRECTORS-STATMENT {
  width: 518px;
  height: 72px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: relative;
   left:6.2%;
   top:65px;
   padding-bottom:20px;
}




.This-subject-and-ide {
  width: 755px;
  height: 514px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
}

.Frost-Myth {
 width: 595px;
  height: 344px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;

}


.FILM-TITILE{
width: 739px;
  height: 120px;
  object-fit: contain;
  font-size: 120px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.18px;
  padding-bottom:4%;
}
  

}
@media (min-width: 768px) and (max-width: 1023px) {
.Mraz-1-Copy {display:none}  
.Hero-Video {display:none}  
.Mraz-1 {display:none} 
.Hero-Video-Copy {display:none} 
.Rectangle-Copy-10 { display:none;} 
 .BitmapMobile{display:none;}
  #workWrapMobile {display:none} 
  #workWrap {display:none} 

.GENRE {

  left:-235px;

 
}
.PLAN-9-Logo {
  width: 72px;
  height: 33px;
  top:12px;

}

.Minus-Icon {
  width: 33px;
  height: 2px;
  object-fit: contain;
  position: absolute;
   
}

.Rectangle-Copy {
  width: 2px;
  height: 33px;
  transform: rotate(-270deg);
  background-color: #edefef;
  position: absolute;
   top:85px;
   right:104px;
}


.Sit-amet-nisl-purus {
   width: 234px;
  height: 56px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 30px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.08;
  letter-spacing: 0.2px;
  text-align: center;
  color: #eaeaea;
  position: absolute;
 	left:36%;
    top: 44%;
}
.Down-Arrow {
  width: 28px;
  height: 18px;
  object-fit: contain;
  position: absolute;
  left:50%;
  top:82%;
   margin-left:-14px
}



.LETS-WORK-TOGETHER {
  width: 550px;
  height: 120px;
  object-fit: contain;
  font-size: 100px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.24px;
}
.Ready-to-start-your {
   width: 320px;
  height: 91px;
  object-fit: contain;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.04px;
} 

.officeplan9rs {
 width: 164px;
  height: 49px;
  object-fit: contain;
  font-size: 45px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.09;
  letter-spacing: 0.11px;
}

/* 
  IPAD WORK PAGE------------------------------------------------------------------
*/



.SMALL{
  width: 298px;
  height: 35px;
  object-fit: contain;
  font-size: 35px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.78;
  letter-spacing: 0.08px;
}

 .GENRE {
  width:300px;
  height: 50px;
  font-size: 26px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  left:-135px;

 
}

.FIND-OUT-MORE-Button-Copy {
  width: 10%;
  height: 20px;
  font-size: 25px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0.53px;
  color: #eaeaea;
  z-index:3;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease; 
    left:-50px;
    top:60%;
     border: 1px solid white;
   text-align: center;
  padding: 8px 12px;
    cursor: pointer;
   
   
}

.outerSmallIpad:hover > .SMALL{
   transform: scale(1.8) translateY(-18px) translateX(75px);
   transition: transform .5s ease;
  
}

.outerSmallIpad:hover > .GENRE{
  transform: translateX(200px);
   transition: transform .5s ease;
    opacity:1; /* Completely visible. */
  
}

.outerSmallIpad:hover > .FIND-OUT-MORE-Button-Copy{
  transform: translateX(115px);
   transition: transform .5s ease;
  opacity:1;
}

 .outerSmallIpad:hover .workThumbs{
 transform: scale(1.11);
   transition: transform .5s ease;
   opacity:0.6;
}
.FILM-TITILE{
width: 739px;
  height: 120px;
  object-fit: contain;
  font-size: 100px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.18px;
}

.FEATURE-FILM-DRAMA{
  width: 359px;
  height: 26px;
  font-size: 26px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.06px;
}
.Synopsis-Jovan-start {
  width: 299px;
  height: 430px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
}
.Project-Details-Dura {
  width: 206px;
  height: 457px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
}
.Festivals-Cannes-Fil{
width: 260px;
  height: 545px;
  object-fit: contain;
  font-family: Karla;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
}

/* 
  IPAD FORST PAGE
*/

.Rectangle-Copy-10 {
  width: 1024px;
  height: 768px;
}

.FROSTmain {
   width: 194px;
  height: 192px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 160px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: absolute;
   padding-top:34px;
   left:6.2%;
}

.SINOPSIS {
 width: 56px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
   position: relative;
 	top:230px;
   left:6.2%;
}


.A-rational-police-de {
  width: 525px;
  height: 198px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
    position: relative;
  padding-top:253px;
   left:6.2%;
}



.ABOUT-THE-PROJECT {
    width: 223px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;

  position: relative;
 	top:54px;
   left:6.2%;
}

.Frost-is-a-modern-fa {
  width: 640px;
  height: 485px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

  position: relative;
 	top:43px;
   left:6.2%;
}
 
  
 .DIRECTORS-BIO {
   width: 194px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
  position: relative;
 	top:61px;
   left:6.2%;
} 

.Pavle-vukovi-is-bo {
  width: 695px;
  height: 424px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   top:86px;
   
}
.DIRECTORS-STATMENT {
 width: 331px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;

  position: relative;
   left:6.2%;
   top:59px;
}





.This-subject-and-ide {
 width: 688px;
  height: 524px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

  position: relative;
   left:6.2%;
   padding-top:103px;
}

.Frost-Myth {
 width: 595px;
  height: 344px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:64px;

}

  
 
}
@media (min-width: 681px) and (max-width: 767px) {

 #workWrapIpad{display:none;} 
  #workWrap{display:none;} 
.Mraz-1-Copy {display:none}  
.Hero-Video {display:none}  
.Mraz-1 {display:none} 
.Hero-Video-Copy {display:none} 
.Rectangle-Copy-10 { display:none;} 
.Rectangle{ display:none;} 
.BitmapMobile  { display:none;} 
.menu{

  font-size: 80px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.91;
  letter-spacing: 1px;
  color: #eaeaea;

  padding-top:20%;
}


.BitmapMobile{
  width: 100%;
  object-fit: contain;
  position:relative;
  }
.PLAN-9-Logo {
  width: 62px;
  height: 33px;
  
}

.Minus-Icon {
  width: 24px;
  height: 2px;
  object-fit: contain;
  position: absolute;
}


.Minus-Icon2{
 width: 2px;
  height: 24px;
 top:-11.5px;
 left:11.5px;
  color: #eaeaea;
  position:relative;
  object-fit: contain;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; 
} 

.Rectangle-Copy {
  width: 2px;
  height: 33px;
  transform: rotate(-270deg);
  background-color: #edefef;
  position: absolute;
   top:85px;
   right:104px;
}


.Sit-amet-nisl-purus {
   width: 194px;
  height: 56px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 26px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.08;
  letter-spacing: 0.2px;
  text-align: center;
  color: #eaeaea;
  position: absolute;
 	left:38%;
    top: 76%;
}
.Down-Arrow {
  width: 32px;
  height: 18px;
  object-fit: contain;
  position: absolute;
  left:50%;
  top:72%;
}


.SMALL{
  width: 298px;
  height: 35px;
  object-fit: contain;
  font-size: 45px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.78;
  letter-spacing: 0.08px;
}

.FILM-TITILE{
width: 539px;
  height: 100px;
  object-fit: contain;
  font-size: 100px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.18px;
}

.FEATURE-FILM-DRAMA{
  width: 359px;
  height: 26px;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.06px;
}
.Synopsis-Jovan-start {
  width: 299px;
  height: 430px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
}
.Project-Details-Dura {
  width: 206px;
  height: 457px;
   font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
}
.Festivals-Cannes-Fil{
width: 260px;
  height: 545px;
  object-fit: contain;
  font-family: Karla;
    font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
}



.LETS-WORK-TOGETHER {
  width: 550px;
  height: 120px;
  font-size: 100px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.24px;
}
.Ready-to-start-your {
   width: 320px;
  height: 91px;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.04px;
} 

.officeplan9rs {
 width: 164px;
  height: 49px;
  font-size: 45px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.09;
  letter-spacing: 0.11px;
}

 .Copy-right-PLAN9-201 {
  position:relative;
  width: 320px;
  height: 22px;
  object-fit: contain;

  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.02px;
  
} 


/* 
  IPAD FORST PAGE
*/

.Rectangle-Copy-10 {
  width: 1024px;
  height: 768px;
}

.FROSTmain {
   width: 194px;
  height: 192px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 160px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
  color: #eaeaea;
  position: absolute;
   padding-top:34px;
   left:6.2%;
}

.SINOPSIS {
 width: 156px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
   position: relative;
 	top:230px;
   left:6.2%;
}


.A-rational-police-de {
  width: 425px;
  height: 198px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
    font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
    position: relative;
  padding-top:253px;
   left:6.2%;
}



.ABOUT-THE-PROJECT {
    width: 223px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;

  position: relative;
 	top:54px;
   left:6.2%;
}

.Frost-is-a-modern-fa {
  width: 430px;
  height: 585px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
    font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

  position: relative;
 	top:43px;
   left:6.2%;
}
 
  
 .DIRECTORS-BIO {
   width: 294px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;
  position: relative;
 	top:61px;
   left:6.2%;
} 

.Pavle-vukovi-is-bo {
  width: 435px;
  height: 424px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   top:86px;
   
}
.DIRECTORS-STATMENT {
 width: 231px;
  height: 43px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.03px;
  color: #eaeaea;

  position: relative;
   left:6.2%;
   top:59px;
}

.This-subject-and-ide {
 width: 438px;
  height: 400px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
   font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;

  position: relative;
   left:6.2%;
   padding-top:103px;
}

.Frost-Myth {
 width: 435px;
  height: 344px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
    font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:64px;
} 
    .videopopupjs__content{
        max-width:90%!important;
    }


}

@media (min-width: 320px) and (max-width: 681px) {
.Mraz-1-iPAD { display:none;}
.Hero-Video {display:none}  
.Hero-Video-CopyiPad {display:none}
.Mraz-1 {display:none} 
#workWrap {display:none}
#workWrapIpad {display:none}
.introMask {display:none} 
.Rectangle {display:none}
 .GENRE {display:none}
.Bitmap {display:none}
 .RectangleFORSTIpad {display:none}

.Mraz-1-Copy {
   width: 100%;
  object-fit: contain;
}

.Hero-Video-Copy {
  width: 100%;
  object-fit: contain;
}
.PLAN-9-Logo {
   width: 57px;
  height: 23px;
   left:6%;
}

#minusButtonId{
 top:44px;
}
.PLAN-9-Logo.animate {
    transform: scale(1.4) translateY(40%) translateX(30%);
    transition: transform .5s ease;
    z-index:22;
} 
.menu{
position:fixed;
z-index:100;
  width: 68px;
  height: 50px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 55px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.91;
  letter-spacing: 1px;
  color: #eaeaea;
  left:6%;
  padding-top:40%;
}

.Minus-Icon {
  width: 23px;
  height: 2px;
  object-fit: contain;
  position: absolute;
}
.minusButton{
   position: fixed;
   bottom:12%;
   right:34px;
   cursor: pointer;
   z-index: 100;
}
.minusButtonAll{
  right:36px;
  padding-top:15px;

}
.Minus-Icon2{
 width: 2px;
  height: 23px;
 top:-10.5px;
 left:10.5px;
  color: #eaeaea;
  position:relative;
  object-fit: contain;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; 
} 

.Sit-amet-nisl-purus {
 width: 135px;
  height: 40px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.11;
  letter-spacing: 0.14px;
  text-align: center;
  color: #eaeaea;
  position: absolute;
 	left:30%;
    top: 85%;
}

.Down-Arrow{
 width: 22px;
  height: 12px;
  object-fit: contain;
   position: absolute;
  left:50%;
  top:92%;
  margin-left:-11px;
 }
 

.IN-PRODUCTION {
 width: 47px;
  height: 22px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.02px;
  color: #eaeaea;
  position: absolute;
   padding-top:7.2%;
   left:6.2%;
}

.FEATURE-FILM {
   width: 49px;
  height: 18px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.02px;
  color: #eaeaea;
	position: absolute;
	left:6.2%;
	padding-top:45.6%;
}

.FROST {
  width: 61px;
  height: 61px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 50px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.02px;
  color: #eaeaea;

  position: absolute;
   padding-top:52%;
   left:6.2%;
}

.Lorem-ipsum-dolor-si {
  width: 100px;
  height: 100px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 10px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: 0.04px;
  color: #ffffff;

  position: absolute;
  margin-top:67%;
   left:6.2%;
}



 
 .LETS-WORK-TOGETHER {
  width: 325px;
  height: 61px;
  object-fit: contain;
  font-size: 50px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.12px;
}
.Ready-to-start-your {
    width: 191px;
  height: 49px;
  object-fit: contain;
  font-size: 10px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: 0.02px;
} 

.officeplan9rs {
   width: 95px;
  height: 49px;
  object-fit: contain;
  font-size: 26px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.88;
  letter-spacing: 0.06px;
}


.FOLOW-US-INSTAGRAM-F {
 
  height: 49px;
  object-fit: contain;
  position:relative;
  font-family: 'Morganite ExtraBold';
   font-size: 26px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.92;
  letter-spacing: 0.33px;
  color: #eaeaea;
  z-index:3;
  display : inline; 
  margin-right: 5%;

}

 .Copy-right-PLAN9-201 {
position:relative;
  width: 320px;
  height: 22px;
  object-fit: contain;
	font-family: 'Karla', sans-serif;
  font-size: 10px;
  line-height: 2;
  letter-spacing: 0.02px;
  
} 

/* 
  STRANICA O FILMU ZASEBNA mobile----------------------------- PAGE Mobile
*/

#playButton{
  cursor:pointer;
  z-index:9;
   -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* 
  FROST PAGE Mobile
*/
.Mraz-1-iPAD { display:none;}
.RectangleFORST{display:none;}
.Rectangle-Copy-10 {
  width: 100%;
  object-fit: contain;
}

 button[name="play"] {
  width: 50px;
  height: 50px;
  background: none;
   background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7));
  border-width: 2px;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
  z-index:100;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left:-25px;
  margin-top:-25px;
   z-index:4;
  
}


button[name="play"]:focus {
  outline: 0;
  border: 1px solid hsl(210, 58%, 69%);
  box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}

 button[name="play"]::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 1px;
  left: 3px;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #eaeaea;
}
.FROSTmain {
 width: 61px;
  height: 61px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 60px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.02px;
  color: #eaeaea;
  position: absolute;
  padding-top:34px;
  left:6.2%;
 
}

.SINOPSIS {
 width: 28px;
  height: 22px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
 letter-spacing: 0.8px;
  color: #eaeaea;
   position: relative;
 	top:95px;
 	  padding-top:14px;
   left:6.2%;
}

.A-rational-police-de {
  width: 269px;
  height: 127px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
 font-size: 11px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.2;
  letter-spacing: 0.04px;
  color: #ffffff;

    position: relative;
  padding-top:115px;
   left:6.2%;
}

.ABOUT-THE-PROJECT {
   width: 162px;
  height: 22px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
 letter-spacing: 0.8px;
  color: #eaeaea;
  padding-bottom:10px;
  position: relative;
 	top:20px;
   left:6.2%;
}

.Frost-is-a-modern-fa {
   width: 285px;
  height: 410px;
  object-fit: contain;
 font-family: 'Karla', sans-serif;
  font-size: 11px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.2;
  letter-spacing: 0.04px;
  color: #ffffff;
  position: relative;
 	 padding-top:3%;
   left:6.2%;
}

.DIRECTORS-BIO {
  width: 147px;
  height: 22px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
 letter-spacing: 0.8px;
  color: #eaeaea;
   position: relative;
 	top:20px;
   left:6.2%;
     padding-bottom:10px;
}


 
.Pavle-vukovi-is-bo {
  width: 266px;
  height: 300px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: 0.04px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;
   
}
.DIRECTORS-STATMENT {
 width: 290px;
  height: 22px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.8px;
  color: #eaeaea;
  position: relative;
   left:6.2%;
   top:20px;
   padding-bottom:10px;
   }


.This-subject-and-ide {
   width: 271px;
  height: 509px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: 0.04px;
  color: #ffffff;

  position: relative;
   left:6.2%;
   padding-top:3%;
}

.Frost-Myth {
 width: 271px;
  height: 179px;
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: 0.04px;
  color: #ffffff;
  position: relative;
   left:6.2%;
   padding-top:3%;

}

.darkMaskHero{
height:1440px;
position:fixed;
z-index:6;
top:-1440px;
object-fit: contain;
background-blend-mode: multiply;
background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7));

}

.BitmapMobile{
  width: 100%;
  object-fit: contain;
  position:relative;
   display: flex;
  align-items: center;
  justify-content: center;
  }

.Stroke-3 {
  width: 20px;
  height: 20px;
  object-fit: contain;
  left: 50%;
  top: 50%;
  position:absolute;
    z-index:5;
    margin-left:-10px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  
}
.Stroke-1 {
  width: 52px;
  height: 52px;
  object-fit: contain;
  left: 50%;
  top: 50%;
  position:absolute;
  z-index:5;
  margin-left:-26px;
  margin-top:-26px;
}
 
 
/*
    MOBILE: Main Page
*/

.PAVLE-VUCKOVIC-TITLE{
  width: 77px;
  height: 18px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
  color: #ffffff;
  position:relative;
}

.PAVLE-VUCKOVIC-Lorem {
  width: 172px;
  height: 66px;
  object-fit: contain;
  font-family: Karla;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: 0.02px;
  color: #eaeaea;
}


.FILM-TITILE{
  padding-top:28px;
  margin-left:6.2%;
  width: 280px;
  height: 50px;
  font-size: 50px;
  letter-spacing: 0.09px;
} 
.FEATURE-FILM-DRAMA {
  width: 214px;
  height: 18px;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.04px;
  color: #eaeaea;
}

.aboutFilm{
padding-top:10px;

}

.Synopsis-Jovan-start {
 float:left; 
 margin-right:98px;
 width: 272px;
 height: 108px;
  font-family: Karla;
  font-size: 10px;
  line-height: 1.22;
  letter-spacing: 0.04px;
}

.Project-Details-Dura {
 	width: 130px;
 	height: 267px;
  	font-size: 10px;
  	line-height: 1.22;
  	letter-spacing: 0.04px;
  	
}

.Festivals-Cannes-Fil {
   width: 140px;
  height: 263px;
  font-size: 10px;
  line-height: 1.22;
  letter-spacing: 0.04px; 
  padding-left:6.2%; 
}


/*
    MOBILE FROST Page------------------------------------------------------------------------
*/



/*
    MOBILE WORK Page------------------------------------------------------------------------
*/
.workTitle{
width: 58px;
  height: 120px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 50px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.4;
  letter-spacing: 0.09px;
  color: #eaeaea;
  padding-left:34%;
     top:44px;


}
.textWork{
 width: 150px;
  height: 60px;
  object-fit: contain;
  font-family: Karla;
  position:relative;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: 0.04px;
  color: #ffffff;
  margin-left:12%;
}

.SMALL {
     width: 241px;
  height: 35px;
  object-fit: contain;
  font-family: 'Morganite ExtraBold';
  font-size: 32px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.09;
  letter-spacing: 0.06px;
  color: #eaeaea;
    }

.outerSmall{
height:144px;
}



.logos{
width:35%;
}

.logos-coproducer{
width:35%;
}
.videopopupjs__content{
    margin:0 auto;
    height:100%;
    height:250px;
    width:100%;
    margin-top:5%;
}
}

/*
    GitHub URL: https://github.com/gucastiliao/video-popup-js
*/