@font-face {
	font-family: 'Roboto';
	src: local('Roboto'), url('fonts/Roboto-Regular.ttf');
}

@font-face {
	font-family: 'Roboto-black';
	src: local('Roboto-black'), url('fonts/Roboto-Black.ttf');
}

@font-face {
	font-family: 'Roboto-light';
	src: local('Roboto-light'), url('fonts/Roboto-Light.ttf');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p {
	margin: .8rem 0;
	text-align: justify;
	text-indent: 1.5rem;
}

a {
	font-weight: 800;
	color: #363222;
	/* text-decoration: none; */
}

h1 {
	font-size: 2rem;
	margin: 3rem 0 1.5rem 0;
	border-bottom: 1px solid #c7c2b0;
}

li {
	text-align: justify;
	margin: .3rem 0 .4rem 3rem;
}

img {
	border: 1px solid lightgray;
	border-radius: 6px;
}

details {
	margin-left: 1.5rem;
}

details p {
	margin: 0 0 .3rem 0;
	margin-left: 2rem;
	padding-left: 1rem;
	text-indent: 0;
	font-size: .8em;
	border-left: 1px solid #84542a;
}

summary {
	cursor: pointer;
}


body {
	font-family: 'Roboto-light', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	background-color: #fbf9f6;
	color: #363222;
	font-size: 1.2rem;
}

body>div {
	padding: 1rem 2rem;
}

#topimg {
	padding: 0;
	width: 100%;
	height: 30vh;
	display: flex;
	flex-direction: column;
	justify-content: end;
	background: url(img/bkg_head.jpg) no-repeat center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	color: white;
	text-align: center;
}

#topimg div {
	position: relative;
	font-size: 3vw;
	font-size: calc((3vw + 3rem)/2);
	line-height: .9em;
	padding-top: 1rem;
}

#topimg small {
	font-size: 1.7vw;
	font-size: calc((1.7vw + 1.7rem)/2);
	margin-bottom: .5rem;
}

.headtxt {
	position: relative;
}

.black-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: .6;
}

#about {
	margin-top: 1rem;
	padding: 1rem;
	text-align: center;
	font-size: 2vw;
	font-size: calc((2vw + 2rem)/2);
}

#about span {
	display: block;
	font-size: 3vw;
	font-size: calc((3vw + 3rem)/2);

}


.cards {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.card {
	width: 20%;
	margin: .7rem;
	background-color: #f3f6ec;
	border-radius: 10px;
}

.card a {
	font-weight: inherit;
	text-decoration: none;
}

.card-title {
	background-color: #f9f0e4;
	color: #84542a;
	border-bottom: 2px solid #84542a;
	border-radius: 6px;
	padding: .5rem 0;
	font-size: 1.8vw;
	font-size: calc((1.8vw + 1.8rem)/2);
	font-weight: 800;
	text-align: center;
}

.card-body {
	padding: 1rem;
	font-size: 1.2rem;
	font-size: calc((1.2vw + 1.2rem)/2);
	text-align: center;
}

.card-body img {
	width: 100%;
}

#page {
	padding: 2em;
	line-height: 1.4em;
}

[class^=img-in-text] {
	width: 20%;
}

.img-in-text-r {
	float: right;
	margin: 0 0 1rem 1.5rem;

}

.img-in-text-l {
	float: left;
	margin: 0 1.5rem 0.5rem 0;

}

#map {
	display: flex;
	justify-content: center;
	padding: 1em .5em;
	margin: 0 6vw;
	background-color: #f4e9d0;
}

#docs summary {
	cursor: pointer;
}

#bottom-doc p {
	text-align: left;
}

#bottom {
	margin-top: 2rem;
	padding: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: #342413;
	color: white;
	font-weight: 500;
}

#bottom p {
	padding-left: 0;
	margin: 1.2rem 0;
	text-align: left;
	text-indent: 0;
}

#bottom li {
	list-style-type: none;
}

#bottom a {
	color: white;
	text-decoration: none;
}

#bottom>div {
	margin: 2rem 3rem;
}

#bottom>div:last-child {
	display: flex;
	align-items: end;
	font-size: 1rem;
}

#bottom>div:last-child li {
	padding: 0;
	margin: 0;
}


@media (max-width: 1024px) {
	.card {
		width: 40%;
	}

	.card-body {
		font-size: 1.2rem;
	}

}

@media (max-width: 576px) {
	p {
		text-align: left;
	}

	li {
		text-align: left;
	}

	#topimg div {
		font-size: 5vw;
	}

	.card {
		width: 90%;
	}

	[class^=img-in-text] {
		display: none;
	}
}