/*Classes for the special font*/
.loveSisterFont{
	font-family: 'Love Ya Like A Sister', cursive;
}

.kalamFont{
	font-family: 'Kalam', cursive;
}

/* Normal font*/
.sansserif {
	font-family: Arial, Helvetica, sans-serif;
}


/*Set the padding-left and padding-right for the whole body*/
#bodyPadding{
	margin-left:60px;
	margin-right:60px;
	background-color: #F1F1F1;
	

}

.clear{
	clear:both;
}

/*Set the scroll behavior as smooth*/
html {
	scroll-behavior: smooth;
}

/*the each section heading decoration css*/
.wavy {
	text-decoration: underline;
	text-decoration-color: salmon;
	text-decoration-style: wavy;
}

/*Style the top navigation bar*/
ul{
	position:fixed;
	left: 0;
	list-style-type: none;
	margin:auto;
	overflow:hidden;
	background-color: #d8d5d5;
	opacity:0.8;
	bottom: 0;
	width:100%;
	height: 8%;
	
}

li{
	
}

.navigation{

	
}

li a {
	float:left;
	display: block;
	color: black;
	text-align: center;
	text-decoration: none;
	font-size:16px;
	padding:14px 16px;
	width:20%;
}

/* Change color on hover */
li a:hover{
	background-color: #00704a;
	color: black;
	opacity:1;

}


/*Section 1 home*/
#home{   
	text-align: center;
	border-bottom-style:dashed;
}

/*The title of the film: MFF World Premiere;*/
.MFF{
	background-color:#d8d5d5;
	font-size:30px;
}

.starbucks{
	background-color:#d8d5d5;
}

/*center the starbucksImage*/
.starbucksImage{
	height:40%;
	width:40%;
	display:block;
	margin-left: auto;
	margin-right: auto;
}

.walkingImage{
	float:left;
	height:22%;
	width:22%;
	padding-left:150px;
	padding-bottom:30px;

}


#stepInto{
	float:left;
	padding-top:35px;
	padding-left:30px;
	font-size:40px;
}

#theFantasy{
	float:left;
	padding-top:20px;
	padding-left:200px;
	font-size:50px;
	text-shadow: 2px 2px 8px #00704a;
	text-align:center;
}


/*The second section: introduction*/;
#introduction{
	
}

.introPic{
	border-radius:50%;
	width:130px;
	height:130px;
	border: 2px solid #00704a;
	filter: drop-shadow(0 0 20px #00704a);

}

.introHeading{
	padding-top:70px;
	padding-bottom:15px;
	font-size:40px;
	background-clip:border-box;
}



/*Add card effect for articles*/
.card{
	float:left;
	background-color: white;
	padding: 30px;
	margin: 30px;
	border:1px solid #00704a;
	border-radius:6px;
}



.poster{
	float:left;
	width:25%;
	height:25%;
	border-radius:4px;
	padding-left:30px;
}



.introDes{
	float:left;
	padding-left:40px;
	width:75%;
}

.keywords{
	color:white;
	margin:8px;
	margin-left:0px;
	padding:5px;
	float:left;
	font-size:15px;
	background-color:#00704a;

}
/*clickButton*/
.button{
	float:left;
	text-align:center;
}



.button p:hover{
	color:#00704a;
	cursor:pointer;

}



#div1{
	display:none;
}


/*The actress and actor image, use "Gallery"*/
div.actImage{
	float:left;
	border:5px solid #ddd;
	border-radius:4px;
	width:200px;
	height:160px;
	margin-left:30px;
	

}

div.actImage:hover{
	border:5px solid #00704a;
}

div.act img{

}
div.desc{
	margin:10px;
	text-align:center;
}

/*Create the actDesc column, which includes the descHeadline and the casting Desc*/

.actDesc{
	float:left;
}

.descHeadline{
	padding-left:30px;
	float:left;
}

/*Create the intro box for the casting*/

.castingDesc{
	position:relative;
	padding-left:30px;
	padding-top:10px;
	float:left;
	width:300px;
}


.peerReviewName{
	padding:5px;
	padding-right:15px;
	background:linear-gradient(to right, #00704a,#d8d5d5);
	color:white;
	margin:auto;
	float:left;

}

.starRating{
	color:#ffb653;
	float:right;
}

/*two peer reviews*/

.mySlides {
	display: none
}

.dot{
	cursor:pointer;
	height:15px;
	width:15px;
	margin:0 2px;
	background-color:#bbb;
	border-radius:50%;
	display:inline-block;
	transition:background-color 0.6s ease;
}

.active, .dot:hover{
	background-color:#717171;
}


/*Fading animation*/
.fade{

	animation-name:fade;
	animation-duration:1.5s;
}

/*Section3 Film*/
#film{
	text-align: center;
	border-top-style:dashed;
}

.filmPic{
	border-radius:50%;
	width:130px;
	height:130px;
	border: 2px solid #00704a;
	filter: drop-shadow(0 0 20px #00704a);

}

/*Section4 behind the Scenes*/
#behindTheScenes{
	border-top-style:dashed;
}

.starbucksFunny{
	border-radius:50%;
	width:130px;
	height:130px;
	border: 2px solid #00704a;
	filter: drop-shadow(0 0 20px #00704a);
}

.mainbodyIntro{
	font-size:16px;
	padding:20px;
	margin:30px;
	background-color:#d8d5d5;
}

.sectionPart_1{
	background-color: white;
	padding: 30px;
	margin: 30px;
	border:1px solid #00704a;
	border-radius:6px;
}

.sectionPart_2{
	background-color: white;
	padding: 30px;
	margin: 30px;
	border:1px solid #00704a;
	border-radius:6px;
}

.sectionPart_3{
	background-color: white;
	padding: 30px;
	margin: 30px;
	border:1px solid #00704a;
	border-radius:6px;
}

.sectionPart_4{
	background-color: white;
	padding: 30px;
	margin: 30px;
	border:1px solid #00704a;
	border-radius:6px;
}

/*The screenshot of shooting the gun and so on*/
.screenshot{
	padding:40px;
	float:left;
	width:30%;
	height:30%;
}

.screenshotHeadline{
	padding-left:40px;
	padding-top:35px;
	padding-bottom:0px;
	float:left;
	width:70%;
}


.screenshotDes{
	padding-left:40px;
	padding-top:0px;
	float:left;
	width:70%;
}

/*Section5 about*/

#aboutus{
	border-top-style:dashed;
}

.paperCoffee{
	border-radius:50%;
	width:130px;
	height:130px;
	border: 2px solid #00704a;
	filter: drop-shadow(0 0 20px #00704a);
}


.thesisOfFilm{
	font-size:30px;
	margin-top:10px;
	padding:30px;
	width:45%;
	text-align:center;
}

.ourFilmFestival_1{
	float:left;
	padding: 30px;
	padding-top:0px;
	margin: 30px;
	width:35%;
}

.iconFest_1{
	border-radius:50%;
	width:120px;
	height:120px;
	border: 2px solid #00704a;
	text-align:center;
	font-size:30px;
	padding-top:40px;
	overflow:hidden;
	filter: drop-shadow(0 0 20px #00704a);
}

.ourFilmFestival_2{
	float:left;
	padding: 30px;
	padding-top:0px;
	margin: 30px;
	width:50%;

}

.iconFest_2{
	border-radius:50%;
	width:120px;
	height:120px;
	border: 2px solid #00704a;
	text-align:center;
	font-size:28px;
	padding-top:15px;
	overflow:hidden;
	filter: drop-shadow(0 0 20px #00704a);
}