@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

body {
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
	background-color: #ffffff;
}

.navigation{
  padding: 10rem 0rem;
}
#header{
	background-color: #ffffff;
}
#header > div > h1 {
	text-transform: uppercase;
	font-size: 4rem;
	font-weight: 600;
	margin-bottom: 3.5rem;
}
#header > div > p {
	font-size: 1.8rem;
}

/******************************/
/* Gallery */
/******************************/
section {
	background-color: #ffffff;
	column-width: 300px;
	column-gap: 5px;
	padding: 5px;
}

section img {
	width: 100%;
	cursor: pointer;
	filter: brightness(0.8);
	transition: .5s ease;
}
section img:hover {
	filter: brightness(1.1);
}

.lightbox {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	display: none;
	background: #7f8c8d;
	perspective: 1000;
}

.filter {
	position: absolute;
	width: 100%;
	height: 100%;
	filter: blur(20px);
	opacity: 0.5;
	background-position: center;
	background-size: cover;
}

.lightbox img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(0deg);
	max-height: 95vh;
	max-width: calc(95vw - 100px);
	transition: 0.8s cubic-bezier(0.7, 0, 0.4, 1);
	transform-style: preserve-3d;
}

/*.lightbox:hover img{
    transform: translate(-50%, -50%) rotateY(180deg);
  }*/

[class^="arrow"] {
	height: 200px;
	width: 50px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

[class^="arrow"]:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 20px;
	height: 20px;
}

.arrowr {
	right: 0;
}

.arrowr:after {
	border-right: 2px solid white;
	border-bottom: 2px solid white;
}

.arrowl {
	left: 0;
}

.arrowl:after {
	border-left: 2px solid white;
	border-top: 2px solid white;
}

.close {
	position: absolute;
	right: 0;
	width: 35px;
	height: 35px;
	margin: 20px;
	cursor: pointer;
}

.close:after,
.close:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 100%;
	background: #e74c3c;
}

.close:after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.close:before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.title {
	font-size: 20px;
	color: #000;
	z-index: 1000;
	position: absolute;
	top: 0;
	left: 0;
}