body {
    width: 100vw;
    margin:0;
}


.container {
   /* width: 100vw;
    height: 90vh;*/
    width: 100vw;
    height: 90vh;
    /*background-color: aqua;*/
    box-sizing: border-box;
         @media  (max-width: 932px) {
		/* CSS for standard mobile devices */
      
		
	}

}


.left {
    width: 50%;
    height:100%;
     /*background-color: yellow;*/
     float:left;
    /*position:relative;*/
     text-align: center;
     	/*@media  (min-width: 666px) and (max-width: 932px) {*/
        @media  (max-width: 932px) {
		/* CSS for standard mobile devices */
		visibility:hidden;
	}

}

.together {
   /* background-color: green;*/
      width:80%;
      height:80%;
   position:relative;
    padding-top: 10%;
    margin-top:2vh;
    margin:auto;
    
   
}
.auntie {
    margin-top: 2vh;
    top:0vh;
    left: -10vw;
    width: 60%;
    position:relative;
    z-index: 9;
    
}

.wing {
     margin-top: 2vh;
    top:17vw;
    left: 12vw;
    width: 53%;
    position:absolute;
   /* left:30%;
    margin-top:13vh;
     top:2vh;
     width:45%;
     position:absolute;*/
    z-index: 0;
}

.right {
    width: 50%;
     height:100%;
     text-align: center;
    /* background-color: pink;*/
     float:left;
          @media  (max-width: 932px) {
		/* CSS for standard mobile devices */
		width: 100%;
        top:0vh;
        position:absolute;
	}

}

.list {
    width:100%;
   /* background-color: blueviolet;*/
    text-align:center;
    padding-top: 10%;
   
}
.logo {
    width: 90%;
    margin-top: 2vh;
    
    
}

.icon1 {
    width: 25%;
    

}

.icon2 {
      width: 25%;
      
      
    
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px 0;
   bottom:0vw;
  
   position:fixed;
   width: 100%;
       
          @media  (max-width: 932px) {
		/* CSS for standard mobile devices */
		width: 100%;
        bottom:0vh;
        position:fixed;
	}

}

/*gallery*/

.header {
	  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
   top:0vh;
   width: 100%;
   height: 20vh;
        position:absolute;
          @media  (max-width: 932px) {
		width: 100%;
        top:0vh;
		  height: 5vh;
        position:absolute;
	}

}

.logo2 {
	width:25vw;
	max-width: 500px;
}

.whole {
	/*background-color: purple;*/
	width: 75%;
	height: 100%;
	margin: auto;
	text-align:center;
	margin-top: 14%;
	        @media  (max-width: 932px) {
		/*width: 100%;
		height:100%;
		margin: auto;
		text-align:center;
		margin-top:2vh;
        top:0vh;*/
       
	}
}


.movie img {
	/*width:500px;
	height:367px;*/
	width:40vw;
	max-width: 750px;
	margin : auto;
	margin-top:1vh;
	        @media  (max-width: 932px) {
		width: 100%;
		margin:auto;
		margin-top:5vh;
        top:0vh;
       
	}

}

.movie {
	
	/*width:500px;
	height:367px;*/
	width: 40vw;
	margin : auto;
	/*background-color: magenta;*/
	margin-bottom:20px;
	        @media  (max-width: 932px) {
		width: 100%;
		margin:auto;
		margin-top:2vh;
        top:0vh;
       
	}

}
.picscontainer {
	/*for small images*/
	/*background-color: blue;*/
	/*top:0vh;
	
	margin: auto;
	width: 75%;
	height: 150%;
	text-align:center;*/
		        @media  (max-width: 932px) {
		width: 90%;
		height:100%;
		margin:auto;
		margin-top:2vh;
       /* top:0vh;*/
			text-align:center;
       
	}
}



.gallery {
	width: 21%;
	float:left;
	margin:2%;
	/*background-color: red;*/
	        @media  (max-width: 932px) {
				width: 94%;
				/*height:15vh;*/
				height:20vh;
				margin-top:1vh;
				float:none;
				margin:auto;

					
		/*width: 90%;
		
		height:150%;
		
		margin:auto;
		margin-top:2vh;
        top:0vh;*/
       
	}

	
}


.gallery img {
/*background-color:yellow;*/
z-index:-1;

	     @media  (max-width: 932px) {
			
		width: 100%;
		height:100%;
		margin:0vh;
		margin-top:1vh;
		padding-top:1vh;
		
        /*top:20vh;*/
       
	}

}



div.gallery img:hover {
   filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
}

.picscontainer2 .gallery  img {
     filter: none;
	-webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    -moz-filter:    grayscale(80%);
    -ms-filter:     grayscale(80%);
    -o-filter:      grayscale(80%);

	
	
}

.picscontainer .gallery img {
	-webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    -moz-filter:    grayscale(80%);
    -ms-filter:     grayscale(80%);
    -o-filter:      grayscale(80%);
    
    width: 100%;
   
}

/*thumbnail enlarge*/

.black {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
    z-index: 1;
	background-color: black;
	opacity: 0.4;	
}

.odiv	{
	/*background-color:yellowgreen;*/
	 background-color: #333;
	/*position:fixed;*/
	position: relative;
	width:90vw;
	top:0vh;
	margin:auto;
	z-index: 10;
		
		        @media  (max-width: 932px) {
		width: 100vw;
		margin:auto;
		margin-top:1vh;
        top:2vh;
		position:fixed;
		   z-index: 11;
       
	}
}
	
	


/*for enlarged pics*/
	
.pic  {
	/*position:relative;
	left: -90px;
	top:0px;*/
    /*width:681px;
	height:500px;*/
	width: 60vw;
	opacity: 1.0;
	margin: auto;
    z-index:12;
	position:relative;
	max-width: 850px;

	        @media  (max-width: 932px) {
		width: 100vw;
		margin:auto;
		margin-top:2vh;
		margin-bottom:2vh;
        top:0vh;
		   z-index: 12;
       
	}
}

.bt {
	top:0vh;
	/*left:15vw;*/
	width:6vw;
	max-width: 50px;
	position:absolute;
	z-index: 25;
		        @media  (max-width: 932px) {
		
       	left:0vw;
		top: 5.1vw;
	
	}
}

/*about page*/

.stuff {
	height: 90vh;
	width: 90vw;
	/*background-color: yellowgreen;*/
	/*top: 150px;*/
	margin:auto;
	text-align:center;
}

.stuff img {
	width: 45vw;
	max-width: 850px;
	height:auto;
	top: 20vw;
	margin:auto;
	position: relative;

}

.stuff p {
bottom: -40vh;
position:relative;
	        @media  (max-width: 932px) {
		bottom: -20vh;
       	
	
	}
}