#banner{
	height: 200px; 
	display: flex; 
	margin: auto;
	justify-content: center; 
	align-items: center; 
	background-color: white; 
	width: 100%; 
}

h1{
	padding: 20px; 	
}

#banner img{
	height: 200px; 		
}

#vertical_rule{
	height: 100px; 
	background-color: black; 
	width: 5px; 	
}

#contacts{
	position: absolute; 
	top: 20px; 
	left: 20px; 
	background-color: #e6e6e6;
	border-radius: 10px; 
	padding: 10px; 
	padding-bottom: 20px;
	text-align: center; 
}

#to_contacts{
	background-color: #b3b3b3; 
	color: white; 
	padding: 5px 0px;	
	width: 100%; 
	display: block; 
}

#contacts a:hover{
	opacity: 0.4; 
	cursor: pointer; 
	
}
#contacts a:hover{
	opacity: 0.4; 
	cursor: pointer; 
	
}
#contact_links{
	padding: 10px 0px; 
}

#contacts .fa{
	font-size: 25px;	
}


.fa{
	padding: 20px;
	width: 30px;
	text-align: center;
	text-decoration: none;
	margin: 0px 2px;
}

.fa-twitter {
	background: #55ACEE;
	color: white;
}

.fa-instagram {
	background: #55ACEE;
	color: white;
}

.fa-youtube{
	background: #55ACEE;
	color: white;
}

#preview_board{
	z-index: 1000;
	display: flex; 
	position: relative; 
	justify-content: center; 
	align-items: center; 
	position: sticky; 
	top: 50%;
	
}

#preview_board div{
	visibility: hidden; 
	z-index: 1000; 
	position: absolute; 
	padding: 1000px 500px; 
	width: 100%; 
}

#preview_board div img{
	width: 60%;
	margin-left: 20%;  
	
	
	
}



nav{
	display: flex; 
	justify-content: space-between; 
	font-size: 18px; 
	position: sticky; 
	top: 0px; 
	background-color: white;
	z-index: 10; 
	min-width: 800px; 
	justify-items: center; 
	
}

nav a:hover{
	color: white; 
	background-color: #C2C2C2;
	
}

nav a{
	padding: 20px 60px; 
	text-align: center; 
}


#mobile_contacts .fa{
	font-size: 25px;
}

#mobile_contacts{ 
	background-color: #e6e6e6;
	justify-content: center; 
	text-align: center; 
	padding: 20px; 
	display: none; 
}


#to_mobile{
	background-color: #b3b3b3; 
	color: white; 
	padding: 10px 0px;	
	display: block; 
	width: 228px; 
	margin: auto; 
	font-size: 20px; 
}

#mobile_links{
	padding: 10px 0px; 
}


#mobile_contacts a:hover{
	opacity: 0.4; 
	cursor: pointer; 
	
}

#image_board{
	display: flex; 
	flex-wrap: wrap; 
	gap: 20px; 
	width: 100%; 
	justify-content: center; 
	margin: auto; 
	margin-top: 30px;
}



#image_board > div:hover{
	z-index: 100; 
	
}

#image_board div img{
	height: 100%; 
	width: 100%; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	border-radius: 20px; 
	position: absolute; 
	object-fit: contain;
}

#image_board div img:hover{
	animation-name: grow;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	cursor: pointer; 
}



	
@keyframes grow{
	from{
		height: 100%; 
		width: 100%; 
		left: 0;
		top: 0;		
		border: 10px transparent solid; 
	}
	
	to{
		height: 120%; 
		width: 120%; 
		left: -10%;
		top: -10%;
		border: 10px white solid;  
	}

}


a{
	color: black;
	text-decoration: none; 
	}



footer{
	height: 100px; 
}


@media (max-width: 900px) {

	#preview_board div img{
	width: 80%;
	margin-left: 10%;  
	}

}