/* Hero Content (PagePictureBar) */

.hero-content {
	width:100%;
	background-image: 
		url("/images/Foto0601_v2.png")
	;
	background-repeat: no-repeat;
	background-position-y: center;
	background-size: cover;
	display:flex;
}

.hero-container {
	background:var(--theme-background);
	box-sizing: border-box;
}

.hero-assoc-box {
	background:white;
    display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:left;
}

.hero-assoc-thumbnail {
	width:8rem;
	height:5rem;
}

@media screen and (orientation:landscape) {
	.hero-content {
		justify-content:space-between;
	}
	.hero-container {
		position:relative;
		max-width:35%;
		padding:2rem;
		margin-top:5rem;
		margin-bottom:5rem;
		left:3rem;
		align-self:start;
	}
	.hero-assoc-box {
		position:relative;
		margin-top:5rem;
		margin-bottom:5rem;
		right:4rem;
		width:10rem;
		padding:0.5rem;
		background:white;
	    display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-evenly;
		align-self:start;
	}
	.hero-assoc-thumbnail {
		width:4rem;
		height:3rem;
	}

}

@media screen and (orientation:portrait) {
	.hero-content {
		position:relative;
		xxmin-height:40rem;
		flex-direction: column;
		box-sizing: border-box;
	}
	.hero-container {
		position:relative;
		padding:2rem;
		width:100%;
		margin: auto;
		top:2rem;
	}
	.hero-assoc-box {
		position: relative;
		width:100%;
		margin-top:3rem;
		justify-content:space-evenly;
	}
}

.hero-supertitle {
	box-sizing: border-box;
	color: var(--theme-supertext);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 3.6px;
	line-height: 15.6px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
	text-transform: uppercase;
}

.hero-title {
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 38.25px;
	margin-bottom: 24px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
	word-break: break-word;
	text-transform: uppercase;
}
.hero-image {
	align-items: stretch;
	background-color: var(--theme-background);
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	display: flex;
	flex-direction: column;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	justify-content: space-between;
	line-height: 25.6px;
	outline-color: var(--theme-outlinecolor);
	padding-inline-end: 16px;
	padding-inline-start: 16px;
	position: relative;
	text-rendering: optimizelegibility
}

.hero-button {
	align-items: center;
	border:1px solid black;
	box-sizing: border-box;
	background-color:var(--theme-background);	
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	color: var(--theme-text);
	color-scheme: light;
	cursor: pointer;
	overflow-wrap: break-word;
	padding-block-end: 5px;
	padding-block-start: 5px;
	padding-inline-end: 12px;
	padding-inline-start: 12px;
	margin-block-end: 8px;
	margin-inline-end: 8px;
	text-align: center;
	text-decoration-line: none;
	/*
	text-decoration-color: rgb(23, 23, 23);
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-rendering: optimizelegibility;
	*/
	vertical-align: middle;
	line-height: 24px;
	text-transform: uppercase;
}

.hero-button:hover {
	color: white;
	background-color: var(--theme-inverse);
}

.hero-slogan {
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	margin-block-start: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 8px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
	text-transform: uppercase;
}

.hero-summary {
	box-sizing: border-box;
	color: var(--theme-text);
	color-scheme: light;
	font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	margin-block-start: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 8px;
	outline-color: var(--theme-outlinecolor);
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	text-rendering: optimizelegibility;
}

/* Blog DIV on the index page */

.blog-div {
	/* Contains all the blog articles */
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	background-color:grey;
}

.blog-article {
	position:relative;
	display:flex;
	width:25rem;
	height:25rem;
	overflow-y:auto;
}

@media screen and (orientation:portrait) {
	.blog-div {
		top:60rem;
	}
}

@media screen and (orientation:landscape) {
	.blog-div {
		top:30rem;
	}
}