* {
	margin: 0;
	padding: 0;
}

body {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* background: linear-gradient(#1790f3, #BBDEFB); */
	/* background-image: url('../img/B.png'); */
	background-image: url('../images/foodmbg.png');
	background-size: contain;
}


/* For device width 400px and larger: */
@media only screen and (min-device-width: 600px) {
	body { 
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* background: linear-gradient(#1790f3, #BBDEFB); */
	background-image: url('../img/BG2.png');
	background-size: cover;
	background-position: inherit;
	background-repeat: no-repeat;
  }
 
}

.row1{
	height: 25%;
	
	/* background-color: red; */
}


.row2{
	height: 40%;
	/* background-color: blue; */
	
}



.row3{
	height: 35%;
	/* background-color: yellow; */
	
}






/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	#color{
		/* background-color: #F5F5F5; */
		margin: 3%;
		border-radius: 8px;
		height: 100vh;
		width: 94%;
		/* box-shadow: 0px 8px 10px 2px  #ef9a9a; */
	}
 
}


/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	#rh{
		height: 100%;
	}
 
}

.star{
	height:100%;
	margin-left: -400px;
}

/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.star{
		width:75%;
		margin-left: 0px;
	}
 
}




.beverage{
margin-top: -110px;
width:80% 
/* background-color: red; */
}


/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.beverage{
		width:60%;
		margin-top: 0px;
	}
 
}


.santa{
	margin-top: -80px;
	
}


/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.santa{
		width:75%;
		margin-top: 0px;
	}
 
}


.furniture{
	margin-top: -100px;
	/* margin-left: -50px; */
	/* background-color: red; */
	}

	

/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.furniture{
		width:90%;
		margin-top: 0px;
	}
 
}


.greet{
	margin-top: -60px;
	margin-left: -40px;
}


/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.greet{
		width:75%;
		margin-top: 0px;
		margin-left: 0px;
}
	}
 



.tree{
	margin-top: -60px;
	margin-left: -40px;
}


/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.tree{
		width:45%;
		margin-top: 0px;
	}
 
}

.church{
	margin-top: -80px;
	/* background-color: red; */
	}

	/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.church{
		width:78%;
		margin-top: 0px;
	}
 
}

.tuk{
	height:70%; 
	margin-top: 20px;
	margin-left:30px;
	/* background-color: red; */
	}
		/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.tuk{
		
		width:75%;
		margin-top: 0px;
		margin-left:0px;
	}
 
}

.nativity{
	margin-top: -50px;
	margin-left:60px;
}

		/* For device width 400px and larger: */
		@media only screen and (max-device-width: 600px) {
			.nativity{
				
				width:70%;
				margin-top: 0px;
				margin-left:0px;
			}
		 
		}

.supermarket{
	/* margin-left:120px; */
	margin-top: -40px;
}

		/* For device width 400px and larger: */
		@media only screen and (max-device-width: 600px) {
			.supermarket{
				
				width:92%;
				margin-top: 0px;
				
			}
		 
		}

.food{
	margin-left:-80px;
	margin-top: -40px;
}

/* For device width 400px and larger: */
@media only screen and (max-device-width: 600px) {
	.food{
		
		width:85%;
		margin-top: 0px;
		margin-left:-0px;
	}
 
}



/* new-------------------------------- */


/* new */


#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	}

@media only screen and (min-device-width: 600px) {
	
#overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	
	}
}



#overlay2 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	}

@media only screen and (min-device-width: 600px) {
	
#overlay2 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	
	}
}



#overlay3 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	}

@media only screen and (min-device-width: 600px) {
	
#overlay3 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	
	}
}


#overlay4 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	}

@media only screen and (min-device-width: 600px) {
	
#overlay4 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	
	}
}


#overlay5 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	}

@media only screen and (min-device-width: 600px) {
	
#overlay5 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 1;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-color: rgb(33,33,33,0.5);
	
	
	}
}




#mbvideo{
	width: 100%;
	
}



@media only screen and (min-device-width: 600px) {
	#mbvideo{
		width: 70%;
		background-color: rgb(33,33,33)
	}
}

#closebtn{
	margin-right: 2%;
}


@media only screen and (min-device-width: 600px) {
	#closebtn{
		margin-right: 15%;
	}
	
}