
html,body {
	margin:0;
	padding:0;
	width:100%;
	height:101%!important;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	overflow:hidden;
	background-color:#FBF108;
	color:#ffffff !important;	
}


#noscript { 	z-index:200000000; text-align:center; width:100%; position:absolute; left:0; top:0; 	font-family:"Borough Grotesk Regular"; font-size:18px; color:#222211; }


a.noscriptLink { color:#FD88D3; }
a.noscriptLink:hover { color:#222221; }

#feedback {
	position:fixed;
	left:0;
	top:0;
	color:#000000;
	padding:3px;
	font-family:courier;
	font-size:11px;
	text-align:left;
	z-index:200000000;
	background-color:#ffffff;
	display:none;
}

.darkBG {
	background-color:#222221!important;
	transition-duration:.5s
}

.darkBGButton {
	background-color:#222221!important;
	border:4px solid #5AD0F8!important;
	transition-duration:.5s
}



.darkLine {
	border:4px solid #5AD0F8!important;
	transition-duration:.5s
}

.darkChosenCell {
	background-color:#5AD0F8!important
}



.dark-carousel-cell_x {
	border-bottom:4px solid #5AD0F8!important;
	border-left:4px solid #5AD0F8!important;	
}

.dark-main-carousel-cell_x {
	border-bottom:4px solid #5AD0F8!important;
	border-top:4px solid #5AD0F8!important;
	border-right:4px solid #5AD0F8!important;	
	border-left:4px solid #5AD0F8!important;		
}


.dark-movieThumbnail { 
	text-shadow:none;
	}

.darkBGButton:hover {
	border:4px solid #FC87D3 !important;
	transition-duration:.5s
}



.dark-currentDirector {
	color:#FBF108 !important;
	border:4px solid #FBF108 !important;
	background-color:#222221!important;
	transition-duration:.5s
}


.dark-currentDirector:hover {
	color:#FC87D3 !important;
	border:4px solid #FC87D3 !important;
	background-color:#222221!important;
	transition-duration:.5s
}









.leaf_1{
  width:50px;
  height:60px;
  position:absolute;
  background-size: 100% 100%;
  background-image:url(/wp-content/uploads/sites/5/mimeartist_code/live/leaf_1.png);
}


.leaf_2{
  width:50px;
  height:46px;
  position:absolute;
  background-size: 100% 100%;
  background-image:url(/wp-content/uploads/sites/5/mimeartist_code/live/leaf_2.png);
}

.leaf_3{
  width:50px;
  height:45px;
  position:absolute;
  background-size: 100% 100%;
  background-image:url(/wp-content/uploads/sites/5/mimeartist_code/live/leaf_3.png);
}


#siteBG {
	position:fixed;
	left:0;
	top:0px;
	z-index:10000;
	width:100%;
	height:5000px;
	background-color:#FBF108;
}


#leaves {
	position:fixed;
	left:0;
	top:0px;
	z-index:2;
	width:100%;
	height:100%;

}


@font-face {
	font-family:"Borough Grotesk Regular";
	src:url(/wp-content/uploads/sites/5/2020/03/boroughgrotesk-regular-webfont.woff2) format("woff2"),url(/wp-content/uploads/sites/5/2020/03/boroughgrotesk-regular-webfont.woff) format("woff")
}

@font-face {
	font-family:"Borough Grotesk Shaded";
	src:url(/wp-content/uploads/sites/5/2020/03/boroughgrotesk-shaded-webfont.woff2) format("woff2"),url(/wp-content/uploads/sites/5/2020/03/boroughgrotesk-shaded-webfont.woff) format("woff")
}



.clipInfo { position:absolute; z-index:100; width:100%; color:#FBF108; font-size:50px; line-height: 60px; text-align:center; font-family:"Borough Grotesk Regular"; visibility:hidden; 		text-shadow:4px 4px 0 #222221; } 
.topTitle {  bottom:50%; margin-bottom:40px;}
.bottomTitle {  top:50%; margin-top:40px; }


.disableThumbnail { pointer-events:none;    }

.smoothText {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}

/* FAKE ROLL */
.fakeRoll {
	position:absolute;
	z-index:100000;

	cursor:pointer;

}

#roll_1 {
	left:12%;
	top:24%;
	height:54%;
	width:78%
	
	
	

}

#roll_2 {
		display:none; left:20%;
	top:10%;
	height:80%;
	width:22%
}

#roll_3 {
		display:none; left:40%;
	top:0;
	height:100%;
	width:22%
}

#roll_4 {
		display:none;
	top:10%;
	height:80%;
	width:20%
}

#roll_5 {
	display:none;
	left:80%;
	top:25%;
	height:50%;
	width:20%
}

#roll_6 {
	display:none;
	left:12%;
	top:24%;
	height:55%;
	width:78%
}

#roll_7 {
	display:none; 
		left:24%;
	top:5%;
	height:90%;
	width:52%
}

/* CONTACT STUFF */
#contactOpenButton {
	position:fixed;
	right:-4px;
	top:-4px;
	z-index:10000000000;
	cursor:pointer;
	width:90px;
	border:4px solid #222221;
	background-color:#fff;
	visibility:hidden;
}

#contactCloseButton {
	position:fixed;
	right:-4px;
	top:-4px;
	z-index:10000000000;
	display:none;
	cursor:pointer;
	width:90px;
	border:4px solid #222221;
	background-color:#fff
}

#contactText {
	position:absolute;
	left:0;
	top:50px;
	width:100%;
	z-index:1000000;
	visibility:hidden
}

#contact {
	position:fixed;
	z-index:1000;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-image:url(/wp-content/uploads/sites/5/2020/03/final_contact_web.png);
	background-position:center bottom;
/* Center the image */
	background-repeat:no-repeat;
/* Do not repeat the image */
	background-size:contain;
	margin-top:100%
}

/* ABOUT/LOGO/SPOTLIGHT HOVER */
#logoHolder {
	position:absolute;
	left:50%;
	top:-500px;
	visibility:hidden;
}

#logoHolderInside {
	position:absolute;
	height:150px;
	width:150px;
	left:0px;
	top:0px;
	margin-left:-75px;
	margin-top:-75px;
	background-color:#FC87D3;
	box-sizing:border-box;
	border-radius:50%;
	border:4px solid #222221
}


#logoImage {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%
}

#spotlight {
	position:fixed;
	top:50%;
	left:50%;
	height:400px;
	width:2000px;
	background-color:#222221;
	border:4px solid #222221;
	z-index:1001;
	margin-top:-200px;
	margin-left:-2000px;
	box-sizing:border-box;
	padding:20px;
	padding-right:220px;
	z-index:30;
	visibility:hidden
}

#about {
	z-index:100;
	position:absolute;
	width:140px;
	height:140px;
	margin-left:-70px;
	margin-top:-70px;
	top:50%;
	left:50%;
	text-align:center;
	z-index:100;
	background-color:#FC87D3;
	border-radius:50%;
	visibility:hidden
}

#aboutText {
	position:absolute;
	width:100%;
	top:50%;
	left:0;
	height:0px;
	padding:0;
	font-size:30px;
	line-height:0px;
	letter-spacing:-2px;
	color:#222221;
	font-family:"Borough Grotesk Regular",sans-serif
}

/* VOLCANOS */
.volcano_box {
	position:absolute;
	width:1px;
	height:1px;
	z-index:900;
	left:100%;
	top:1000px;
	visibility:hidden;
}




.volcanoMarker { position:absolute;  left:0px; top:0px; width:1px; height:1px; z-index:11;   }

.volcano_box_image {
	width:100%
	
}

.volcanoBoxInside {
	position:absolute;
	left:0;
	top:0;
	z-index:10;
}




#volcanoBoxInside1 {
	width:164px;
	height:223px;
	margin-left:0px;
	margin-top:-223px;
}

#volcanoBoxInside2 {
	width:164px;
	height:223px;
	margin-left:0;
	margin-top:-223px
}


#volcanoBoxInside3 {
	width:230px;
	height:337px;
	margin-left:-38px;
	margin-top:-60px;
}


#volcanoBoxInside4 {
	width:165px;
	height:455px;
	margin-left:0px;
	margin-top:-118px
}


#volcanoBoxInside5 {
	width:250px;
	height:312px;
	margin-left:-205px;
	margin-top:-40px;
}



#volcanoBoxInside6 {
	width:165px;
	height:223px;
	margin-left:-160px;
	margin-top:0px
}


#volcanoBoxInside7 {
	width:165px;
	height:223px;
	margin-left:-157px;
	margin-top:-218px
}



#volcanoBoxInside8 {
	width:248px;
	height:258px;
	margin-left:-200px;
	margin-top:-238px
}









.volcanoBoxInsideImage {
	width:100%;
	height:100%
}

/* HORSES */
#horseCarousel {
	position:fixed;
	left:-5000px;
	top:50%;
	margin-top:-75px;
	height:150px;
	width:100%;
	z-index:10;
	visibility:hidden;
}

.horseSquare {
	position:fixed;
	width:271px;
	height:150px;
	border:3px solid #221;
	box-sizing:border-box;
	margin-right:20px;
	background-position:center;
/* Center the image */
	background-repeat:no-repeat;
/* Do not repeat the image */
	background-size:cover;

}

/* GIRL */
#girl {
	position:fixed;
	z-index:899;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-image:url(/wp-content/uploads/sites/5/2020/03/ff_girl_full_v2.png);
	background-position:center top;
/* Center the image */
	background-repeat:no-repeat;
/* Do not repeat the image */
	background-size:cover;
	margin-top:200%
}

/* CLOUDS */
#clouds {
	position:fixed;
	z-index:1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-image:url(/wp-content/uploads/sites/5/2020/03/ff_clouds_full.png);
	background-position:center bottom;
/* Center the image */
	background-repeat:no-repeat;
/* Do not repeat the image */
	background-size:cover;
	margin-top:100%
}

/* FLICKITY BUTTONS FOR MOBILE */
.flickity-prev-next-button {
	display:none;
}

/* big buttons, no circle */
.flickity-prev-next-button {
	margin:0;
	padding:0;
	width:30px;
	height:30px;
	background:none;
}

.flickity-button:hover { 
		background:transparent !important;
	}



.flickity-prev-next-button:hover {
	background:transparent !important;
}

/* arrow color */
.flickity-prev-next-button .arrow {
	fill:#222221
}

.flickity-prev-next-button.no-svg {
	color:#222221
}

/* hide disabled button */
.flickity-prev-next-button:disabled {
background:transparent !importan
}

/* position outside */
.flickity-prev-next-button.previous {
	left:5px
}

.flickity-prev-next-button.next {
	right:5px
}

a.directorNameHolderMobile {
	font-family:"Borough Grotesk Regular",sans-serif;
	color:#FC87D3!important;
	cursor:pointer;
	text-align:center;
	font-size:24px;
	margin-left:5px;
	margin-right:5px;
	display:inline;
	transition-duration:.5s
}

a.directorNameHolderMobile:hover,a.currentDirectorMobile {
	color:#FBF108!important
}


/* DIRECTORS NAVIGATION CIRCLES */
#directorsNav {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	color:#222221;
	z-index:10000
}

#directorsNavMobile {
	position:absolute;
	width:100%;
	text-align:center;
	top:-1000px;
	padding-left:20px;
	padding-right:20px;
	box-sizing:border-box;
	visibility:hidden;
}

.directorHolder {
	position:fixed;
	top:50%;
	left:50%;
	visibility:hidden;
}

.directorNameHolder {
	position:absolute;
	height:150px;
	width:150px;
	left:0px;
	top:0px;
	margin-left:-75px;
	margin-top:-75px;
	color:#5AD0F8;
	background-color:#F63D08;
	box-sizing:border-box;
	border-radius:50%;
	border:4px solid #222221;
	cursor:pointer
}

.directorNameHolder:hover {
	background-color:#5AD0F8;
	color:#FD88D4
}




.directorNameInside {
	font-family:"Borough Grotesk Regular",sans-serif;
	cursor:pointer;
	text-align:center;
	font-size:22px;
	line-height:22px;
	text-align:center;
	padding-left:5px;
	padding-right:5px;
	position:relative;
	top:50%;
	-ms-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%)
}

.directorNameInside p {
	margin-top:0;
	margin-bottom:0;
	margin-block-start:0
}

.currentDirector {
	background-color:#FBF108;
}

#carouselHolder {
	position:fixed;
	z-index:1000;
	width:100%;
	height:100%;
	left:0;
	top:0
}

#mainCarousel {
	position:fixed!important;
	left:-3000px;
	z-index:1001;
	background-color:#222221;
	bottom:200px;
	width:100%
}

#navCarousel {
	position:fixed!important;
	width:100%;
	height:150px;
	left:3000px;
	bottom:20px;
	z-index:1000;
	border-bottom:4px solid #222221
}

.main-carousel {
}

.main-carousel-cell {
	position:absolute;
	width:800px;
	height:100%;
	left:0;
	top:0;
	background-color:#222221;
	color:#FD88D4;
	cursor:pointer;
	border:4px solid #222221;
	margin-right:-4px
}

.movieThumbnailA {
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
text-shadow:2px 2px 0 #222221;
}

.nav-carousel {
}

.carousel-cell {
	position:absolute;
	width:266px;
	height:150px;
	left:0;
	top:0;
	border-left:4px solid #222221;
	border-bottom:4px solid #222221;
	margin-left:0;
	background-color:#5AD0F8;
	color:#F63D08
}

.carousel-cell:hover {
	color:#FBF108;
}

.thumbnailHolder {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	display:block
}

.thumbnail {
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%
}

.movieThumbnail {
	font-family:"Borough Grotesk Regular",sans-serif;
	cursor:pointer;
	text-align:center;
	font-size:24px;
	line-height:20px;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
	position:relative;
	top:50%;
	-ms-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
			text-shadow:2px 2px 0 #222221;
}

.chosenCell {
	background-color:#FD88D4;
	color:#FBF108
}

.thePlayer {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:32;
}

.thePlayerHolder {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:31
}







/* MAX HEIGHT TESTS */
@media all and (max-height: 730px) {
	
	
	.directorNameHolder, #logoHolderInside {
		position:absolute;
	
	}
	

	
	#horseCarousel {
		margin-top:-58px;
		}
	
	.horseSquare {
		width:207px;
		height:115px
	}
	
	.elementor-button-text {
		font-size:20px!important
	}
	
	.elementor-heading-title {
		font-size:20px!important
	}
	
	.elementor-column-wrap {
		font-size:20px;
		line-height:22px
	}
	
	.contactTitleA,.contactTitleB,.fill {
		padding-top:30px;
		padding-bottom:20px
	}
	

	
	
}

@media all and (max-height: 600px) {



	.directorNameHolder, #logoHolderInside {
		position:absolute;

	}



	#directorsNavMobile {
		
		top:10px;
		padding-left:5px;
		padding-right:5px;
		line-height:25px!important
	}
	
	a.directorNameHolderMobile {
		font-size:21px!important
	}
	
	.movieThumbnail {
		font-size:21px
	}
	
	#contactOpenButton,#contactCloseButton {
		border:3px solid #222221
	}
	

	
	.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-7 .jw-display-controls .jw-display-icon-container .jw-icon,.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-6 .jw-display-controls .jw-display-icon-container .jw-icon,.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-5 .jw-display-controls .jw-display-icon-container .jw-icon,.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-4 .jw-display-controls .jw-display-icon-container .jw-icon,.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-3 .jw-display-controls .jw-display-icon-container .jw-icon,.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-2 .jw-display-controls .jw-display-icon-container .jw-icon {
		
	}
	
	.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-1 .jw-display-controls .jw-display-icon-container .jw-icon,.jwplayer.jw-skin-freshface.jw-state-idle.jw-breakpoint-0 .jw-display-controls .jw-display-icon-container .jw-icon {

	

	}
}




@media all and (max-height: 600px) {
	
	
	
		.clipInfo { font-size:30px; line-height:30px; text-shadow:2px 2px 0 #222221;  }
		.topTitle {  margin-bottom:50px;}
.bottomTitle {  margin-top:50px; }
		
	.elementor-button-text {
		font-size:17px!important
	}
	
	.elementor-heading-title {
		font-size:17px!important
	}
	
	.elementor-column-wrap {
		font-size:17px;
		line-height:18px
	}
	
	.contactTitleA,.contactTitleB,.fill {
		padding-top:20px;
		padding-bottom:10px
	}
	
	}





@media all and (max-height: 480px) {
	.horseSquare {
		width:207px;
		height:115px
	}
	
	.elementor-button-text {
		font-size:15px!important
	}
	
	.elementor-heading-title {
		font-size:15px!important
	}
	
	.elementor-column-wrap {
		font-size:15px;
		line-height:17px
	}
	
	.contactTitleA,.contactTitleB,.fill {
		padding-top:20px;
		padding-bottom:10px
	}
}




/* MAX WIDTHS */
@media screen and (max-width: 850px) {
	
			.clipInfo { font-size:40px; line-height:40px; text-shadow:3px 3px 0 #222221;  }
	.topTitle {   margin-bottom:40px;}
.bottomTitle { margin-top:40px; }
	}

@media screen and (max-width: 768px) {
	
			.clipInfo { font-size:30px; line-height:30px; text-shadow:3px 3px 0 #222221;  }
	.topTitle {   margin-bottom:40px;}
.bottomTitle { margin-top:40px; }
	}


@media all and (max-width: 467px) {
	
	.flickity-prev-next-button {
		display:block
	}
	
		.clipInfo { font-size:30px; line-height:30px; text-shadow:2px 2px 0 #222221; }
	.topTitle {   margin-bottom:30px; }
.bottomTitle { margin-top:30px; }



	#navCarousel {
		border-bottom:0!important;
		height:70px
	}
	
	.movieThumbnail {
		line-height:38px;
		text-shadow:2px 2px 0 #222221;
		margin-top:-10px
	}
	

	
	.directorNameHolderMobile {
		text-shadow:2px 2px 0 #222221
	}
	

	
	.thumbnailHolder {
		display:none
	}
	
	.carousel-cell {
		width:100%;
		border-left:0;
		border-bottom:0!important;
		background-color:transparent;
		color:#FBF108;
		height:100px
	}
	
	.carousel-cell:hover {
		background-color:transparent;
		color:#FBF108
	}
	
	.chosenCell {
		background-color:transparent;
		color:#FBF108
	}
	

	
	
}

@media all and (max-width: 450px) {


#girl {
background-position:center top;

}

	
	.clipInfo { font-size:30px; line-height:30px; text-shadow:2px 2px 0 #222221;  }
	.topTitle {   margin-bottom:30px;}
.bottomTitle { }


	
	.main-carousel-cell {
		border:0;
		border-top:4px solid #222221;
		border-bottom:4px solid #222221;
		margin-right:0
	}
	
	.movieThumbnail {
		font-size:22px;
		line-height:30px;
		text-shadow:2px 2px 0 #222221
	}
	
	a.directorNameHolderMobile {
		font-size:22px;
		line-height:28px
	}
	

	
	#clouds {
		display:none
	}
	

	
	.volcano_box {
	visibility:hidden;
	}
	
		
		
	.jw-title-primary,.jw-title-secondary {
		display:none
	}
}



@media all and (max-width: 350px) {
	
/* 	ULTRA SMALL MOBILE */
	
	a.directorNameHolderMobile {
		font-size:18px!important;
			line-height:20px!important;
	}
	
	
	#directorsNavMobile {
		
		line-height:0px!important;
	}
	
	.movieThumbnail {
		font-size:18px;
		line-height:25px;
		text-shadow:2px 2px 0 #222221
	}
	
	
	}








   .contactTitleA, .contactTitleB {
	display:block;
       text-align:left;
       color:#222221;
		   font-family: "Borough Grotesk Shaded";
		font-size: 48px;
		z-index:2;
	}


 .contactTitleB { text-align:right; }

	.contactTitleA .fill, 	.contactTitleB .fill {
	    font-family: "Borough Grotesk Regular";
		font-size: 48px;
	
		position: absolute;

top:-2px;
		color:#FBF108;
			z-index:-1;
	}


	.contactTitleA .fill {
	 left:0px;   
	}



	.contactTitleB .fill {
	 right:0px;   
	}


.forceFifty { width:50%; }


@media screen and (max-width: 767px){ 
    
        	.contactTitleA,     	.contactTitleB,	.contactTitleA .fill, 	.contactTitleB .fill {

		font-size: 36px;
		
}
}
@media screen and (max-width: 450px){ 
    
        	.contactTitleA,     	.contactTitleB,	.contactTitleA .fill, 	.contactTitleB .fill {

		font-size: 24px;
		
}
}



/* enable Flickity by default */
  #horseCarousel:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media all and ( max-width: 767px ) {
  /* disable Flickity for large devices */
  
    #horseCarousel, .volcano_box {
	    display:none !important;
	    }
  
  
  #horseCarousel:after {
    content: '';
  }
}

