/* #### 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: #eaeaea; 
  	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;
}


@-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;
    }
}
.buttonFILM{
width:180px;
height:60px;
   background-color: transparent;
  font-family: 'Morganite ExtraBold';
  color: #BC3518;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
   letter-spacing: 1px;
  position: relative;
  margin-bottom: 2rem;
   left:6.2%;
   border: solid 3px #BC3518;
    font-size: 46px;
    padding: 10px;

}
.buttonSERIES{
width:180px;
height:60px;
   background-color: transparent;
  font-family: 'Morganite ExtraBold';
  color: #BC3518;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
   letter-spacing: 1px;
  position: relative;
  margin-bottom: 2rem;
   left:6.2%;
   border: solid 3px #BC3518;
    font-size: 46px;
    padding: 10px;

}


.buttonSERIES:hover {

  background-color:#BC3518;
  color: #eaeaea;
   }
   
   .buttonFILM:hover {

  background-color:#BC3518;
  color: #eaeaea;
   }

#aboutFilm2{
display:none;

}
.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 #BC3518;
}

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

.prodPic{
width:450px;
}


.prodPicMobile{
width: 95%;
}

.PAVLE-VUCKOVIC-TITLE{
    font-family: 'Morganite ExtraBold';
  width: 310px;
  font-size: 52px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;
   color: #BC3518;
     margin-left:6.2%;
      padding-top:20px;

}



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

.podnaslov{
  font-size: 22px;

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

.DIRECTORS-BIO {
  
  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: #BC3518;
  position: relative;
  padding-top:50px;
margin-left: 6.2%;
} 

.parent {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.child {
  display: inline-block;
  padding-top: 2rem;
  padding-left: 6.2%;
  vertical-align: middle; 

}

.break{
  height: 40rem;
}

.button {

width:180px;
height:60px;
   background-color: transparent;
  font-family: 'Morganite ExtraBold';
  color: #BC3518;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
   letter-spacing: 1px;
  position: relative;
  margin-bottom: 2rem;
   left:6.2%;
   border: solid 3px #BC3518;
    font-size: 46px;
    padding: 10px;
}
.dailyProg{
padding-left:15px;
padding-right:15px;
padding-top: 5px;
padding-bottom: 5px;
border: solid 2px #BC3518;
}

.dailyProg:hover{
color: #eaeaea;
background-color: #BC3518;;
}


.dailyProg:clocked{

border: solid 1px #BC3518;
color: #eaeaea;
background-color: #BC3518;;
}

#SESION1{
padding-top:20px;
padding-bottom:20px;
}

#SESION2{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESION3{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESION4{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESION5{
display:none;
padding-top:20px;
padding-bottom:20px;
}
#SESION6{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESIONA1{
padding-top:20px;
padding-bottom:20px;
}

#SESIONA2{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESIONA3{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESIONA4{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESIONA5{
display:none;
padding-top:20px;
padding-bottom:20px;
}
#SESIONA6{
display:none;
padding-top:20px;
padding-bottom:20px;
}

#SESIONA7{
display:none;
padding-top:20px;
padding-bottom:20px;
}





.button:hover {

  background-color:#BC3518;
  color: #eaeaea;
   }

.breakPic{
width: 100%;
height:40rem;
object-fit: cover;

}
.smallbreak{
height: 1rem;

background-color: #BC3518;

}
.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;
  border-bottom: solid 1rem #BC3518;



  }
  
  
  .BitmapMobile{
  width: 100%;
  object-fit: contain;
  position:relative;
   border-bottom: solid 0.5rem #BC3518;

  }
  
.aboutFilm{
position:relative;
display:inline-block;
padding-left:6.2%;
padding-top:20px;
width:90%;

}

.aboutFilm2{
position:relative;
display:none;
padding-left:6.2%;
padding-top:20px;
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%;

}

.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{

}
.FILM-TITILE{
padding-top:5%;
margin-left:6.2%;

  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: #BC3518;
}



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: #BC3518;
  display:inline;
  padding-left:21.5%;
  top:60px;
}

.Synopsis-Jovan-start {
 float:left; 
	margin-right:7%;
  width: 40%;
  height: 450px;
  object-fit: contain;
  font-family: Karla;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #BC3518;

  
}


.Project-Details-Dura {
 float:left; 
 padding-right:5%;
  width: 40%;
  height: 457px;
  object-fit: contain;
  font-family: Karla;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #BC3518;
}

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

.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: #BC3518;

}
.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: #BC3518;
}

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

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


.Minus-Icon2ALL{
 width: 3px;
  height: 33px;
 top:-15.5px;
 left:15.5px;
  background-color: #BC3518;
  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: 3px;
  height: 33px;
 top:-15.5px;
 left:15.5px;
background-color: #BC3518;
  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-top:100px;
  padding-left:6.2%;

  font-family: 'Morganite ExtraBold';
  font-size: 120px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.39px;
  color: #BC3518;
  
}    

.Pavle-vukovi-is-bo {
   left:6.2%;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  position: relative;
 color: #BC3518;
 object-fit: contain;
 font-family: 'Karla', sans-serif;
  
   
}

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

}

.bio{
 padding-bottom:5%;
}
.PAVLE-VUCKOVIC-Lorem {
  width: 642px;

  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: #BC3518;
  position:relative;
}

.outerSmallIpad{
position:relative;
overflow: hidden;
width:100%;
}


    
.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: #BC3518;
 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';
}


.breakfoot{
  height: 400px;
  background-color: #BC3518;
  padding-top:100px;
}
.outerSmall{
position:relative;
overflow: hidden;
height:300px;
width:100%;
}







.Rectangle {
 z-index:3;
}
.FIND-OUT-MORE-Button {
 z-index:3;
   }

  	
.DARK-BOX {
  width: 10%;
  height:300px;
  position:absolute;
  object-fit: contain;
  z-index:4;
 
}

.outer{
  position:relative;
}



.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}
.prodPicMobile {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%;
}





.Rectangle {
  width: 208px;
  height: 16px;
  object-fit: contain;
  background-color: #eaeaea;
  position: absolute;
  margin-top:40%;
   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;

}


.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%;
}


   

.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;
}


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

.aboutFilm{
padding-top:80px;
padding-bottom:5rem;
}
.aboutFilm div{
  font-size: 30px;
  width:500px;


}

/* FROST PAGE DESKTOP 1920px */

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

.Pavle-vukovi-is-bo {
    width: 1256px;
  height: 644px;
  object-fit: contain;

  font-size: 28px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #BC3518;
  position: relative;
   left:6.2%;
   padding-top:100px;
   
}

}
@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}
 .prodPicMobile {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;
}
img{width: 50%;}
.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%;
}

.Rectangle {
  width: 108px;
  height: 8px;
  object-fit: contain;
  background-color: #eaeaea;
  position: absolute;
  margin-top:35%;
   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%;
}

.breakfoot{
  height: 800px;
  background-color: #BC3518;
  padding-top:100px;
}

.break{
  height: 40rem;
}

.breakPic{
width: 100%;
height:40rem;
object-fit: cover;

}
.smallbreak{
height: 1rem;

background-color: #BC3518;

}
.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/////////------------------------- */



.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;
}

 .DIRECTORS-BIO {
  

  font-size: 60px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.05px;
 
 	top:65px;

} 

.Pavle-vukovi-is-bo {
  width: 60%;
 
  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #BC3518;
  position: relative;
   left:6.2%;
   padding-top:50px;
   padding-bottom:100px;
   
}

.PAVLE-VUCKOVIC-Lorem{
width:600px;
padding-right:30%;
}

}
@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}
 .prodPicMobile {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;
} 

/* 
  PRIVREMENA MAIN PAGE
*/

.aboutFilm{
padding-top:5rem;

}


.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%;
}


.PAVLE-VUCKOVIC-Lorem {
 width:580px;
  font-size: 18px;
 
 
}


.prodPic{
 margin-top:20px;
}
/* 
  FROST MAIN PAGE
*/

 .DIRECTORS-BIO {
  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: #BC3518;
  position: relative;
   padding-bottom:10px;
} 

.Pavle-vukovi-is-bo {
  width: 695px;

  object-fit: contain;
  font-family: 'Karla', sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  color: #BC3518;
  position: relative;
   left:6.2%;
   padding-top:20px;
    padding-bottom:100px;
   
}

.breakfoot{
  height: 500px;
  background-color: #BC3518;
  padding-top:20px;
}

  
}
@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} 
 .prodPicMobile {display:none} 
 
 .break{
  height: 30rem;
}

.breakPic{
height:30rem;
}



.prodPic {
width: 400px;

}
.PAVLE-VUCKOVIC-Lorem {
  width: 450px;
  font-size: 18px;
  line-height: 1.38;
  letter-spacing: 0.06px;
  

}

.LETS-WORK-TOGETHER {
   width: 740px;
 
  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;
}

.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;
}


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


/* 
  WORK  PAGE
*/


 .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;
}

/* 
  FROST MAIN PAGE
*/


  
 .DIRECTORS-BIO {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding-top:65px;
 
} 

.Pavle-vukovi-is-bo {
  width: 695px;
  font-size: 20px;
  line-height: 1.38;
  letter-spacing: 0.06px;
  padding-top:20px;
  padding-bottom:20px;
}

.FILM-TITILE{
 
  font-size: 105px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.18px;

}

.Synopsis-Jovan-start{
  width: 40%;
   height: 400px;
}
.Project-Details-Dura{

  width: 40%;
   height: 600px;
}
.Festivals-Cannes-Fil {

  width: 70%;
  height: 200px;
 
}

}
@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} 
  
.prodPic {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;
   
}

.prodPicMobile {width:80%;} 

.button {

width:160px;
height:55px;
  
   letter-spacing: 0.9px;
  position: relative;

   left:6.2%;
   border: solid 3px #BC3518;
    font-size: 38px;
    padding: 0.5rem;
}

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

 .break{
  height: 25rem;
}

.breakPic{
height:25rem;
}

.smallbreak{
height: 0.7rem;
}
.Bitmap{
 border-bottom: solid 0.7rem #BC3518;
 }
 
 .BitmapMobile{
 border-bottom: solid 0.7rem #BC3518;
 }
.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%;
}

.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;
}


 .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;
}


.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:40%;
  height: 560px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
}
.Project-Details-Dura {

width:40%;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  
}
.Festivals-Cannes-Fil{
width: 70%;
  height: 300px;
  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;
  padding-top: 30px;

}

/* 
  IPAD FORST PAGE
*/

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

 .DIRECTORS-BIO {
 
  font-size: 50px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 1px; 
 
} 

.Pavle-vukovi-is-bo {
  width:600px;	
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  padding-bottom:2rem; 
   padding-top:1rem; 
   margin-bottom:20px;
}

.FILM-TITILE{


  object-fit: contain;
  font-size: 90px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.18px;
 
}

.WHO-ARE-WE{
 font-size: 100px;

}

.PAVLE-VUCKOVIC-Lorem{
  font-size: 18px;
  width:80%;

}
 
}
@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;} 
.prodPic{ 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%;
}

 .break{
  height: 20rem;
}

.breakPic{
height:20rem;
}
.smallbreak{
height: 0.5rem;
}
.button {
width:160px;
height:55px;
   letter-spacing: 0.9px;
  position: relative;
   left:6.2%;
   border: solid 3px #BC3518;
    font-size: 38px;
    padding: 0.5rem;
}

.child {

padding-right:1rem; 
}

.BitmapMobile{
  width: 100%;
  object-fit: contain;
  position:relative;
   border-bottom: solid 0.7rem #BC3518;
  }
.PLAN-9-Logo {
  width: 62px;
  height: 33px;
  
}
.Bitmap{
 border-bottom: solid 0.7rem #BC3518;
 }
 

.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%;
}


.FILM-TITILE{


  object-fit: contain;
  font-size: 80px;
  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:70%;
  height: 400px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
}
.Project-Details-Dura {
width:70%;
	height:400px;
	padding-right:20%;
   font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
 
}
.Festivals-Cannes-Fil{

	height:200px;

    font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;

}



.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;
}
 
 .DIRECTORS-BIO {

   font-size: 42px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 1.5px;


 
} 

.Pavle-vukovi-is-bo {
  width: 80%;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: 0.06px;
  padding-bottom: 1rem;
   
}

.WHO-ARE-WE{
 font-size: 100px;
}

.PAVLE-VUCKOVIC-Lorem{
  width: 600px;
 font-size: 18px;
}


}
@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}
  .prodPic {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%;
}
.button {

width:150px;
height:50px;
  
   letter-spacing: 0.5px;
  position: relative;

   left:6.2%;
   border: solid 3px #BC3518;
    font-size: 36px;
    padding: 0.5rem;
}
.prodPic {
width: 320px;

}
#minusButtonId{
 top:44px;
}
.PLAN-9-Logo.animate {
    transform: scale(1.4) translateY(40%) translateX(30%);
    transition: transform .5s ease;
    z-index:22;
} 

.break{
  height: 18rem;
}

.breakPic{
height:18rem;
}


.smallbreak{
height: 0.5rem;
}
.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%;
}

.child {

padding-right:1rem; 
}

.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; 
} 

.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%;
}

 .LETS-WORK-TOGETHER {
 
  height: 61px;
  object-fit: contain;
  font-size: 64px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.12px;
}
.Ready-to-start-your {
    width: 200px;
  height: 49px;
  object-fit: contain;
  font-size: 14px;
  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: 32px;
  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: 32px;
  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: 12px;
  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;
}


.DIRECTORS-BIO {
  font-size: 32px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.8px;
  position: relative;
  padding-bottom:10px;
}
 
.Pavle-vukovi-is-bo {
  width: 80%;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: 0.04px;
   padding-bottom:2rem;  
}
.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: 310px;
  font-size: 38px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.07px;

}

.PAVLE-VUCKOVIC-Lorem {
  width: 85%;

  object-fit: contain;
  font-family: Karla;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: 0.5px;

}


.FILM-TITILE{
  padding-top:28px;
  margin-left:6.2%;
  width: 380px;
  height: 50px;
  font-size: 60px;
  letter-spacing: 0.09px;
} 

.WHO-ARE-WE{
  font-size: 60px;
  width:50%;

}
.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;
}

.Synopsis-Jovan-start {
 float:left; 
 margin-right:20px;
 width: 90%;
height: 500px;
  font-family: Karla;
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: 0.04px;
}

.Project-Details-Dura {
 	width: 95%;
 	height: 500px;
  	font-size: 16px;
  	line-height: 1.22;
  	letter-spacing: 0.04px;
  	padding-right:5%;
  	
}

.Festivals-Cannes-Fil {
   width: 140px;
  height: 200px;
  font-size: 16px;
  line-height: 1.22;
  letter-spacing: 0.04px; 
  
}

.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;


}

.outerSmall{
height:144px;
}

.logos{
width:35%;
}

.logos-coproducer{
width:35%;
}

}

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