h1,
h1+p {
	margin: 0px 0px 0;
	font-weight: 300;
}
h1+p a {
	color: #333;
}
h1+p a:hover {
	text-decoration: none;
}
h2 span {
	margin-left: 1em;
	color: #aaa;
	font-size: 85%;
}
.columntest {
	margin: 0px 0px 0;
	padding: 0;
}
.columntest:last-child {
	padding-bottom: 0px;
}
.columntest::after {
	content: '';
	clear: both;
	display: block;
}
.columntest div {
	position: relative;
	float: left;
	width: 14.27%;
	height: 300px;
	margin: 0 0 0 0px;
	padding: 0;
	text-align: center;
}
.columntest div:first-child {
	margin-left: 0;
}
.columntest div span {
	position: absolute;
	bottom: 0px;
	left: 0;
	z-index: -1;
	display: block;
	width: 14.27%;
	padding: 0;
	color: #444;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
			margin: 0;

}
figure {
	width: 240px;
	height: 240px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
			margin: 0 auto;

}
figure:hover+span {
	bottom: -36px;
	opacity: 1;

}



/* Circle */
.hover15 figure {
	position: relative;
}
.hover15 figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.hover15 figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}	

@import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght@300&display=swap");

/*General styling for structure*/
.scroll-container {height: 571px; min-height: 571px; padding: 2rem 1rem; display: flex; align-items: center; box-sizing: border-box;}
.scroll-container:nth-of-type(1) {background-color: white;}
.scroll-element, .scroll-caption {width: 50%;}
.scroll-element {min-height: 571px;; height: 100%; background-color: #ffffff;}
.scroll-caption {margin: 1rem; vertical-align: text-top;}

@media screen and (max-width: 650px) {
.scroll-container, .scroll-container:nth-of-type(even) {flex-direction: column; align-content: inherit;}
.scroll-element {height: 100%;}
.scroll-element, .scroll-caption {width: 100%;}}

/**Styling scrollable elements*/
.js-scroll {opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}

@keyframes slide-in-left {
  0% {-webkit-transform: translateX(-100px); transform: translateX(-100px);opacity: 0;}
  100% {-webkit-transform: translateX(0); transform: translateX(0); opacity: 1;}}

@keyframes slide-in-right {
  0% {-webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0;}
  100% {-webkit-transform: translateX(0); transform: translateX(0); opacity: 1;}}

@keyframes fade-in-bottom {
  0% {-webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0;}
  100% {-webkit-transform: translateY(0); transform: translateY(0); opacity: 1;}}

@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}}