/* grid and header */

#case {
	background-color: var(--background-2);
}

#case-header {
	grid-column: 1/3;
	grid-row: 2;
	display: grid;
	grid-template-columns: calc(33% - var(--spacing-xl)/3) var(--spacing-xl) 320px auto;
	column-gap: 0px;
}

#main-header {
	grid-column: 1/4;
	grid-row: 1;
	width: 100%;
	text-align: right;
}

#sub-header {
	grid-column: 3/4;
	grid-row: 2;
	width: 100%;
	position: relative;
	box-sizing: border-box;
}

#sub-header {
	border-left: var(--line-weight) var(--accent) solid;
	padding-left: calc(var(--spacing-case-line) /2);
	margin-bottom: var(--spacing-lg);
}

#sub-header > h4:first-child {
	padding-top: calc(var(--spacing-case-line) /2);
}

#sub-header > p {
	font-size: 14px;
	margin-bottom: var(--spacing-md);
	margin-top: 0px;
}

#sub-header > h4 {
	font-family: univers-bold;
	margin-bottom: var(--spacing-xs);
}

#sub-header > p:last-child {
	margin-bottom: 0px;
}

#header-line {
	width: 100%;
	content: "";
	grid-row: 2;
	grid-column: 3;
	border-top: var(--line-weight) var(--accent) solid;
}

#header-background {
	grid-column: 1/3;
	grid-row: 1/3;
	background-color: var(--background);
	z-index: -1;
	margin-bottom: var(--spacing-md);
}

#main-header > h1, #main-header > h2 {
	padding-right: var(--spacing-case-line);
}

#main-header > h1 {
	color: var(--accent);
	display: inline-block;
	padding-bottom: var(--spacing-case-line);
	border-right: var(--line-weight) var(--accent) solid;
	margin-top: 0px;
}




/* content*/
/* base styles */

h1 {
	grid-column: 1;
	font-family: univers-bold;
	font-size: 32px;
	color: var(--primary);
	text-align: right;

}

h2 {
	grid-column: 2;
	font-size: 24px;
	text-transform: none;
	color: var(--primary);
}

h3 {
	grid-column: 2;
	font-weight: normal;
	font-size: 16px;
	text-transform: uppercase;
}

p {
	grid-column: 2;
	font-size: 16px;
}

.image-container > p {
	font-size: 13px;
	max-width: none;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.image-container > h3 {
	max-width: none;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

ul, ol {
	grid-column: 2;
	font-size: 16px;
	padding-left: var(--spacing-sm);
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

ul#nav-block {
	padding-left: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	width: auto;
}

/* spacing */

h1 {
	margin-top: var(--spacing-lg);
	position: relative;
}

h2 {
	margin-top: var(--spacing-lg);
}

#main-header > h2 {
	margin-top: var(--spacing-md);
}

h1 + h2 {
	margin-top: calc(7px + var(--spacing-lg));
}

p {
	margin-top: var(--spacing-md);
}

p {
	margin-bottom: 0px;
}

h1 + p {
	margin-top: calc(10px + var(--spacing-lg));
}

.image-container {
	margin-top: var(--spacing-md);
}

.image-container + .image-container {
	margin-top: 0px;
}

.image-container > p {
	margin-bottom: var(--spacing-xs);
}

.image-container > h3 {
	margin-bottom: var(--spacing-xs);
	margin-top: 0px;
}

.image-container + h2 {
	margin-top: var(--spacing-lg);
}

.image-container > img + img {
	margin-top: var(--spacing-md);
}

.image-container > img + h3 {
	margin-top: var(--spacing-lg);
}

.image-container > h3 + img {
	margin-top: var(--spacing-sm);
}

li > ol {
	margin-left: 0px;
	list-style-type: lower-latin;
}

li {
	margin-top: var(--spacing-xs);
	margin-left:  var(--spacing-sm);
}

#nav-block > li {
	margin-left: 0px;
}

h3 {
	margin-top: var(--spacing-lg);
	margin-bottom: 0px;
}

h2 + h3 {
	margin-top: var(--spacing-md);
}

h3 + p {
	margin-top: var(--spacing-sm);
}

h3 + h3 {
	margin-top: var(--spacing-xs);
}

p + h2 {
	margin-top: var(--spacing-lg);
}

/*
.section-header::before {
	display: block;
    content: "";
    width: var(--spacing-xxl);
    position: absolute;
    top: calc(-1 * var(--spacing-md));
    right: 0px;
    border-top: var(--accent) solid var(--line-weight);
}
*/

/* images */

.image-container {
	padding: var(--spacing-md) var(--spacing-lg);
	grid-column: 1/3;
	background-color: var(--background);
}

.image-container > img {
	width: 700px;
	margin: auto;
	display: block;
}

footer {
	grid-column: 1/3;
	padding-bottom: var(--spacing-md);
	padding-top: var(--spacing-md);
	padding-left: var(--spacing-lg);
}

p + footer {
	padding-top: var(--spacing-lg);
}

#next {
	margin-left: var(--spacing-xl);
}


/* responsive */

@media (max-width: 1050px) {

	#case-header {
		grid-template-columns: minmax(190px,auto) var(--spacing-lg) 320px 270px;

	}
}

@media (max-width: 850px) {

	#header-background {
		display: none;
	}

	h1 {
		text-align: left;
	}

	h1, h2, h3, p, ol, ul {
		width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	p {
		margin-left: calc(50vw - 350px);
	}

	#nav-block, #case-header {
		background-color: var(--background);
	}

	#case-header {
		grid-template-columns: auto var(--spacing-lg) 320px auto;
	}

	#nav-block::before {
		content: "";
		display: block;
		width: 100%;
		height: var(--spacing-md);
		background-color: var(--background);
		position: absolute;
		top: 0px;
		left: 0px;

	}

	h1 + h2 {
		margin-top: var(--spacing-md);
	}

	#main-header > h2, #main-header > h1, #sub-header > p, #sub-header > h4 {
		width: auto;
		margin-left: 0px;
	}


	.image-container {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 796px) {
	.image-container > p, .image-container > h3, .image-container > img {
		max-width: 100%;
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}

	.image-container {
		padding-left: calc(var(--spacing-md) + var(--spacing-sm));
		padding-right: calc(var(--spacing-md) + var(--spacing-sm));
	}

	h1, h2, h3, p, ol, ul, p {
		margin-left: calc(var(--spacing-md) + var(--spacing-sm));
		margin-right: calc(var(--spacing-md) + var(--spacing-sm));
		width: auto;
	}

	#main-header > h1, #main-header > h2 {
		margin-right: auto;
	}

}

@media (max-width: 680px) {
	h1, h2, h3, p, ol, ul, p {
		margin-left: var(--spacing-md);
		margin-right: var(--spacing-md);
	}

	.image-container {
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}
}

@media (max-width: 595px) {
	footer {
		text-align: center;
		padding-left: 0px;
	}

	#next {
    	margin-left: var(--spacing-md);
	}
}

@media (max-width: 595px) {
	#next {
		display: none;
	}

}

@media (max-width: 495px) {
	#main-header > h1, #main-header > h2 {
		border: none;
		text-align: right;
	}
}

@media (max-width: 450px) {
	h1, h2, h3, p, ol, ul, p {
		margin-left: var(--spacing-sm);
		margin-right: var(--spacing-sm);
	}

	.image-container {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	#nav-block > li {
		margin-right: 16px;
	}

	#active::after {
		margin-right: 2px;
		margin-left: 2px;
	}

	h4 {
		font-size: 12px;
	}

	#case-header {
    	grid-template-columns: auto 1px 320px auto;
    }
}