*, p, h1, h2, form, ul, li {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: #fff;
	font-family: 'Poppins', sans-serif;
	color: #212121;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

img {
	max-width: 100%;
	transition: transform 0.2s ease-in-out;
}

.container {
	width: 100%;
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}

.container-full-width {
	text-align: center;
	margin: 0 20px;
}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

header {
	margin-bottom: 20px;
}
header .logo {
	text-align: center;
}
header .logo img {
	width: 100%;
	max-width: 280px;	
}
header nav ul {
	text-align: center;
	list-style: none;
}
header nav li {
	display: inline-block;
	margin: 0 20px;
}
header nav li a, header nav li avisited {
	text-decoration: none;
	color: #000;
}
header nav li a:hover, header nav li a.active {
	border-bottom: 2px solid #000;
	padding-bottom: 3px;
}

.content {
	margin-bottom: 40px;
	animation: 4s ease-out 0s 1 fadeInAnimation;
}

.content h3 {
	margin: 20px 0 10px;
}

.content .inline li {
  display: inline-block;
}

.main-image {
	width: 100%;
	max-width: 600px;
	margin: 20px 0 40px;
}

.gallery-container {
	width: 100%;
	max-width: 2500px;
	margin: 0 auto;
	columns: 1;
	column-gap: 20px;
	padding: 15px 15px;
	animation: 1s ease-out 0s 1 fadeInAnimation;
}
.box {
	margin-bottom: 15px;
}
.box:hover img{
	filter: grayscale(90%);
	transform: scale(1.03);
}

#gallery-container .box.animation1 {
	animation: 4s ease-out 0s 1 fadeInAnimation;
}
#gallery-container .box.animation2 {
	animation: 6s ease-out 0s 1 fadeInAnimation;
}
#gallery-container .box.animation3 {
	animation: 8s ease-out 0s 1 fadeInAnimation;
}
#gallery-container .box.animation4 {
	animation: 3s ease-out 0s 1 slideInFromLeft;
}

footer {
	font-size: 12px;
	margin: 20px 0;
}

@media (max-width: 768px) {
	header .logo img {
		max-width: 180px;	
	}
	
	.container {
		width: auto;
		max-width: 1200px;
		text-align: center;
		margin: 0 20px;
	}
}
@media (min-width: 768px) {
	.gallery-container {
		columns: 2;
	}
}
@media (min-width: 1024px) {
	.gallery-container {
		columns: 4;
	}
}
@media (min-width: 1440px) {
	.gallery-container {
		columns: 6;
	}
}

/* Fancybox */
.fancybox__container {
	--fancybox-bg: rgba(21, 21, 21, 0.70);
}