@charset "utf-8";
#rightColumn li{
	list-style:none;
	padding:10px;
	background:rgba(77,77,77,0.5);				
	width:10%;
	margin:0 1%;	
	border:2px solid white;	
	height:95%;					
	float:left;				
}  
#rightColumn{
	text-align:center;														
}
.displayPic{
	 margin:10px 5px 5px 5px; border:2px solid white;
}
#rightColumn ul{
	margin:auto;
	height:100%;
	width:100%;			
	padding:0;
}
#rightColumn a{
	height:100%; 
	width:100%; 
	display:inline-block;
}
#titlePart{												
	position: absolute;				
	right:2%;	
	top:5%;		
	z-index:10;
}
#titlePart ul{			
	margin:5px;				
}			
#part1 li{											
	width:30px;
	height:30px;			
	cursor:pointer;	
	margin:10px;
}
#part2 li{
	text-align:center;
	margin:10px 0;	
	height:30px;	
	position:relative;							
}
#part2 span{
	width:0; 
	height:0; 
	border:10px solid rgba(0,0,0,0.6); 
	border-right:0; 
	top:8px; 
	border-top:5px solid transparent; 
	border-bottom:5px solid transparent;
	position:absolute; 
	right:-15px;
	display:block;
}
.toggleMat{
	display:none;
	border-radius:50%;	
	font-size:20px;	
	text-align:center;				
}
#description{
	background-color:rgba(0,0,0,0.4); 
	padding:15px;
	font-size:25px;
	line-height:40px;
	display:none;
	overflow:hidden;				
}
#descriptionText{				
	padding-top:3px;										
	overflow:hidden;
	padding-bottom:15px;			
}
::-webkit-scrollbar{width:0px;background-color:#e1e5ea}

#description span{
	font-size:25px;
}
#description b{
	font-size:36px;
}
ul{
	padding:0;
}
li{
	list-style:none;
}
a{
	cursor:pointer;
}			
#logo{
	color: #fff;
	position: absolute;
	bottom:0;
	width: 100%;
	text-align: center;
	z-index: 101;
	bottom:2%;
	display:block;
}

::selection{
	background-color:rgba(0,0,0,0);
}
.switchImg{
	height:50px; 
	width:50px; 
	
	margin-left:40%;			
}
.switchImg:hover{
	color:white;
}
#displayImg{
	height:100%;
	width:100%;
	background-size:cover;								
}
#display{
	position:absolute; 
	height:83%; 
	width:100%; 				
	background-color:rgba(0,0,0,0.4); 
	top:9%; 
	display:flex;
	z-index:12;	
}
#ImgContainer{
	  flex:3; 
	  padding:10px;
}
#OpenDes{
	position:absolute; 
	top:0;
	right:100%; 
	width:500%;
	height:330px;	
	background-color:rgba(0,0,0,0.6); 								
	border-radius:10px; 
	color:white;
}			
/*@media screen and (max-width: 1600px){					
	#rightColumn{
		
	}
	#description{					
						
	}
}	*/				
@media screen and (max-width: 600px){
	#rightColumn li{
		height:20%;
	}			
	#titlePart{	
		right:-5px;
	}
	#part1 li{
		margin:9px 10px 9px 10px;
	}
	#description{											
		left:13%;
		font-size:15px;	
		line-height:20px;
		overflow-y:scroll;					
	}
	#description span{
		font-size:17px;
	}
	#description b{
		font-size:25px;
	}	
	#descriptionText{
		height:100%;
	}
	#rightColumn{
		left:13%;
		bottom:3%;
		height:12%;
	}
	#logoImg{
		width:15%;					
	}
	#display{
		height:50%;
		top:20%;
	}
	#display div{								
	}
	.switchImg{
		margin:0;
		padding:0;	
		top:40%;
		left:0;			
	}
	#ImgContainer{
		padding:30px 0 30px 0;					
		flex:6;
	}
	#OpenDes{
		width:480%;
	}
}