/* Home page style
*/

#header-image img {
	width: 100%;
}

#masthead {
	padding: 0;
	display: block;
}

.menu-wrapper {
	position: absolute;
	top: 22px;
	right: 28px;
}

@media (max-width: 768px) {
	.menu-wrapper {
		top: 0;
		right: 0;
	}
}



.page-titles h1 {
	font: 700 80px / 1.15 'Noto Sans', sans-serif;
}

.hero-citation {
	font-family: 'Raleway', sans-serif;
	padding: 2em 10%;
	text-align: center;
}

.hero-citation blockquote {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.4;
}


/* reset site content set by style.css*/
.site-content {
	max-width: none;
}

@media (min-width: 48em) {
	.site-content {
		width: 85%;
	}
}

@media (min-width: 1208px) {
	.site-content {
		width: 71.429%;
		min-width: 1050px;
	}
}


@media (min-width: 64em) {
	.hero-citation {
		padding: 93px 20%;
	  }

	#hero-citation-wrapper {
		max-width: 960px;
		margin: 0 auto;
	}

	.hero-citation blockquote {
		font-size: 1.5rem;
	}

}


.hero-citation p {
	text-align: center;
	font-size: 0.875rem;
	font-family: 'Catamaran', sans-serif;
}

#hero-citation-wrapper .button {
	display: inline-block;
	margin: 1.429em auto 0;
	background: #1e1e1e;
	border: none;
	color:#fff;
	font: 35px / 1.2 'Noto Sans', sans-serif;
	padding: 0.486em 1.486em;
	text-decoration: none;
	transition: background-color 0.4s;
}

#hero-citation-wrapper .button:hover {
	background-color: #ea8500;
}

#potpis {
	display: block;
}

#primary {
	margin: auto;
	min-height: 0vw;
	line-height: 1.1;
}

.box {
	width: 100%;
	overflow-y: hidden;
}

.box-text {
	padding: 4% 5%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}

.box-text li::after,
.box-text p::after {
	content: "";
	width: 6ch;
	border-bottom: 1px solid #fff;
	display: inline-block;
	margin-left: 1ch;
}

.box-text li::after {
	width: 3ch;
}

#primary div .box-img {
	height: 100%;
	display: block;
	object-fit: cover;
}

/* fonts in lower boxes */
@media (min-width: 48.001em) {
	#primary h2 {
	font-size: 7.5rem;
  }
}

#primary h2 {
   font: 700 60px / 1.2 'Noto Sans', sans-serif;
	margin: 0;
}

#primary a {
	text-decoration: none;
}

.group-wrapper {
	display: flex;
	flex-flow: wrap;
}

.illustrative-arrow {
	margin-left: 8%;
}

.group-wrapper:first-child .box-text:nth-child(2) .illustrative-arrow {
	margin-left: 0;
}

@media (min-width: 768.01px) {
	.group-wrapper{
		margin-bottom: 20px;
		/* clip-path: path("m69.1 0h981l-69.1 263h-981z"); */
		clip-path: polygon(6.5714% 0%, 100% 0%, 93.3333% 100%, 0% 100%);
	}

	.group-wrapper:nth-child(1) {
		transform: translateX(-45px);
	}

	.group-wrapper:nth-child(2) {
		transform: translateX(75px);
	}

	.group-wrapper:nth-child(3) {
		transform: translateX(-75px);
	}

	.group-wrapper:nth-child(4) {
		transform: translateX(35px);
		margin-bottom: 0;
	}

	.group-wrapper:nth-child(even) .box-text {
		padding-left: 8%;
	}
}



@media (max-width: 768px) {
	.group-wrapper {
		flex-wrap: wrap;
	}

	.group-wrapper > * {
		width: 100%;
	}
}

.gold, a.gold, .gold a, .gold h2 {
	background: #F0F0F0;
	color: #1e1e1e;
}

.box ul {
	font: 400 1em / 1.15 'Catamaran', sans-serif;
	margin: 2em 0 0;
	padding: 0;
	list-style: none;
}

.box ul li {
	margin-bottom: 0.8em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* hover effect */
.group-wrapper .box-text h2:hover {
	transform: translateX(0.3ch);
}

.group-wrapper .box-text h2:hover {
	transform: translateX(16px);
}

.group-wrapper .box-text ul li:hover {
	transform: translateX(1rem);
}

.group-wrapper .box-text h2,
.group-wrapper .box-text ul li {
	transition: transform ease-out 0.5s;
}



@media screen and (min-width:48em) {
	#primary .box {
		width: 50%;
	}
}

@media screen and (max-width:47.99em) {
	/* hero image start to crop */
	#header-image {
		object-fit: cover;
		width:auto;
		height: 319.5px;
	}


	/* respect image ratio */
	.box img {
		height: auto;
		object-fit: contain;
	}

	.img-text {
		order: 1;
	}
	.box-text{
		order: 2;
	}

}

@media (max-width:25em) {

	.box ul {
		margin-top: 1.5em;
	}

	.box ul li {
		margin-bottom: 0.5em;
	}

	.box ul li::after {
		content: none;
	}
}