@charset "utf-8";
/* CSS Document */

.gallery-container {
	width:100%;
	height: 400px;
	display: flex;
	justify-content: center;
}

.event_menu {
	width: 200px;
	margin-top: 22px;
}

.event_link {
	width: 180px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	cursor: pointer;
}

.event_link:hover, .event_link_name:hover {
	background-color: var(--site-color-hover-01);
}


.event_link img {
	width: 40px;
	height: 40px;
	padding-right: 5px;
}


.event_link img {
	width: 40px;
	height: 40px;
	padding-right: 5px;
}

.event_link img {
	width: 40px;
	height: 40px;	
}

.main-gallery {
	width: 600px;
	padding-top: 20px;
	padding-left: 10px;
}

.main-gallery img {
	max-width: 200px;
	max-height: 120px;
	margin: 2px;
}

.main-gallery img:hover {
	cursor: pointer;
	filter: brightness(70%);
	transform:  scale(0.8) rotate(-15deg);
	border-radius: 20px;
	box-shadow: 0 32px 75px rgba(68,77,136, 0.2);
	}

#FullImageView {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .9);
	text-align: center;
	justify-content: center;
}

#FullImage {
	padding: 24px;
	max-width: 90;
	max-height:  90%;
}

#CloseButton {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 2rem;
	color: #fff;
	cursor: pointer;
}
.gallery-buttons {
	width: 700px;
	hight: 80px;
	margin-top: 400px;
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
}

.next-button {
	display: flex;
	justify-content: flex-end;
}

.pervous-button {
	display: flex;
	justify-content: flex-start;
	padding-left: 150px;
}
	
.next-button, .pervous-button img {
	width: 170px;
}

.footer-main {
		margin-top: 580px;
}


/* Mobile Layout: 600px and below. */
@media only screen and (max-width: 600px){
	
	.gallery-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	h2{
		font-size: .9rem;
	}
	
	.event_menu {
		margin-top: 0;
		margin-left: 33px;
	}
	
	.event_menu {
		display: flex;
		margin-top: 0;
		margin-left: 33px;
	}
	
	.event_link {
		width: 100px;
	}
	
	.event_link:nth-child(1) {
		width: 150px;
	}
	
	.section-gallery-header {
		width: 300px;
		margin-top: -30px;
	}
	
	.main-gallery {
		width: 400px;
		padding-top: 20px;
		margin-left: -30px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.main-gallery img {
		max-width: 200px;
		max-height: 120px;
		margin: 2px;
	}
	
	.event_menu {
		width: 100%;
		padding-left: 30px;
	}
	
	#FullImageView {
		display: none;
		position: fixed;
		top: 120px;
	}
	
	#FullImage {
		padding: 24px;
		max-width: 90;
		max-height:  70%;
	}
	
	.gallery-buttons {
		width: 400px;
		hight: 80px;
		display:flex;
		margin-top: 720px;
		justify-content: center;
		align-items: center;
	}

	.next-button {
		display: flex;
		justify-content: flex-end;
	}

	.pervous-button {
		display: flex;
		justify-content: flex-start;
		padding-left: 0;
	}

	.footer-main {
		margin-top: 730px;
	}
	
}

/* Media Query for Tablets */
@media only screen and (min-width : 601px) and (max-width : 768px) {

	.footer-main {
		margin-top: 160px;
	}
	
	.main-gallery {
		min-width: 300px;
		max-height: 300px;
		padding: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.d-photographer {
		padding-left: 40px;
		display: flex;
		align-self: center;
	}
	
	.main-gallery img {
		max-width: 200px;
		max-height: 120px;
		margin: 2px;
	}

	.gallery-buttons {
		width:550px;
		hight: 80px;
		display:flex;
		margin-top: 720px;
		justify-content: flex-end;
		align-items: center;
	}

	.next-button {
		display: flex;
		justify-content: flex-end;
	}

	.pervous-button {
		display: flex;
		justify-content: flex-start;
		padding-left: 0;	
	}

	.footer-main {
		margin-top:800px;
	}
}