/* --- section basics --- */

/*
.section a {color: darkgray !important}
.section a:hover {color: gray !important}
*/

hcms-area[name='sections'] > hcms-part {display: block}
hcms-area[name='sections'] > hcms-part ~ hcms-part {margin-top: 30px}

.section {display: flex; /*padding: 15px 0;*/ min-width: 0; min-height: 0}

.section .hidden {display: none}

.section > hcms-field[name='overhead'] {flex: 0 0 100%; margin-bottom: 30px}
.section > hcms-field[name='overhead']:empty {display: none}
.section > hcms-field[name='overhead'] picture img {width: 100%; height: 45vh; object-fit: cover}
.section > section {flex: 0 0 calc(100% - 90px); min-width: 0; min-height: 0}
.section > section > hcms-area {display: flex; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: hidden; align-items: stretch}
.section > section > hcms-area:empty {display: none}
.section > section > hcms-area.scroll-lock {overflow-x: hidden}
.section > section > hcms-area.scroll-unlock {overflow-x: auto}
.section > section > hcms-area > hcms-part {}
.section > section > hcms-area > hcms-part:not(:last-child) {display: flex; margin-right: 15px}
.section > x-buttons {display: none; flex: 0 0 30px; justify-content: flex-start; color: rgba(0, 0, 0, .6); overflow: hidden}
.section > x-buttons x-button {display: flex; flex: 0 0 30px; overflow: hidden; justify-content: center; align-items: center; font-size: 1.5em; cursor: pointer}
.section > x-buttons x-button.letter {font-size: 1.8em; overflow: hidden}


/* --- header & footer sections --- */

#header .section > x-buttons,
#footer .section > x-buttons {color: hsla(0, 0%, 100%, .84)}


/* --- section auxiliary top part with generic content --- */

.section.content > hcms-field {display: block; padding: 15px 30px}
.section.content > hcms-field:empty {display: none}


/* --- forms --- */

.section > section > form {flex: 0 0 calc(100% - 90px); min-width: 0; min-height: 0}
.section > section > form > hcms-area {display: flex; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: hidden; align-items: stretch}
.section > section > form > hcms-area:empty {display: none}
.section > section > form > hcms-area.scroll-lock {overflow-x: hidden}
.section > section > form > hcms-area.scroll-unlock {overflow-x: auto}
.section > section > form > hcms-area > hcms-part {}
.section > section > form > hcms-area > hcms-part:not(:last-child) {display: flex; margin-right: 15px}


/* --- simple / flexible section --- */

.section.simple {flex-wrap: wrap}

.section.simple > section > h3 {margin: 0 0 30px; padding: 30px 30px 18px; color: #776c69; text-decoration: none; font-weight: 600; border-top: 4px solid}
.section.simple > section > h3:empty {display: none}
.section.simple > section > h3 > hcms-field {}
.section.simple > section > h3 > hcms-field:empty {display: none}
.section.simple > picture:not(:empty) + section > h3 > hcms-field {padding-top: 0}

.section.simple > section > .content {padding: 0 30px 30px; column-rule: 1px solid #776c69; column-gap: 15px; column-width: 300px}
.section.simple > section > .content h3 {color: #776c69}
.section.simple > section > .content h3 + .two-columns {margin-top: -30px}
.section.simple > section > .content h4 {color: #776c69; margin-top: 15px}
.section.simple > section > .content p,
.section.simple > section > .content q {display: block; line-height: 1.8; padding: 0 15px}
.section.simple > section > .content q {font-style: italic}
.section.simple > section > .content q + q {margin-top: 18px}
.section.simple > section > .content p.em {line-height: 1.5; font-size: 15pt}
.section.simple > section > .content p.announce {font-family: Roboto; line-height: 1.5; font-size: 12pt; font-weight: 600; color: #776c69; border: 2px solid; padding: 15px}
.section.simple > section > .content p.strong {font-family: Roboto; line-height: 1.35; font-size: 15pt; margin: 9px auto}
.section.simple > section > .content p.cite {margin-left: 15px; font-style: italic}
.section.simple > section > .content p.cite::before {display: inline-block; content: '—'}
.section.simple > section > .content ul.inline-menu {padding-left: 15px; color: #776c69}
.section.simple > section > .content ul.inline-menu li {padding-left: 15px; margin: 3px 0}
.section.simple > section > .content ul.inline-menu li:hover::after {float: right; content: '\f121'; font-family: 'LineAwesome'; text-rendering: auto}
.section.simple > section > .content em {display: block; margin: 18px 0; font-family: 'Merriweather', monospace; font-size: 12pt; line-height: 18pt}
.section.simple > section > .content video {display: block; width: calc(100% + 2 * 30px); margin: auto -30px}
.section.simple > section > .content .two-columns,
.section.simple > section > .content .three-columns {display: flex}
.section.simple > section > .content .column {flex: 1 1}

/* special case for better optics */

[template='sections/simple'] + [template='sections/simple'] > .section.simple > hcms-field[name='overhead'] {margin-top: 30px}

@media (max-width: 704px) {
	.section.simple > section > .content .two-columns {flex-direction: column}
}

@media (min-width: 705px) {
	.section.simple > section > .content .two-columns {flex-direction: row}
	.section.simple > section > .content .two-columns .column:not(:last-child) {margin-right: 75px}
}

@media (max-width: 989px) {
	.section.simple > section > .content .three-columns {flex-direction: column}
}

@media (min-width: 990px) {
	.section.simple > section > .content .three-columns {flex-direction: row}
	.section.simple > section > .content .three-columns .column:not(:last-child) {margin-right: 75px}
}


/* --- quote --- */

.section.quote q {font-size: 16.5pt}
.section.quote p {font-size: 12pt}


/* --- grid --- */

/* variable width & bottom buttons */
@media (max-width: 659px) {
	.section {width: calc(100vw - 60px); flex-direction: column}
	.section > x-buttons {margin-top: 15px}
	.section > x-buttons.all {display: flex; order: 10; margin-top: 15px; flex-direction: row; justify-content: flex-end}
	.section > x-buttons x-button {border-right: 1px solid}
	.section > x-buttons x-button:first-child {border-left: 1px solid}
}

/* fixed width & side buttons */
@media (min-width: 660px) {
	.section {width: 600px; flex-direction: row}
	.section > x-buttons {margin-left: 15px}
	.section > x-buttons.left {display: flex; order: 10; flex-direction: column}
	.section > x-buttons.right {display: flex; order: 20; flex-direction: column}
	.section > x-buttons x-button {border-bottom: 1px solid}
	.section > x-buttons x-button:first-child {border-top: 1px solid}
}

/* fixed width & side buttons, 2 columns */
@media (min-width: 705px) and (max-width: 989.99px) {
	.section {width: 645px}
}

/* fixed width & side buttons, 3 columns */
@media (min-width: 990px) and (max-width: 1274.99px) {
	.section {width: 930px}
}

/* fixed width & side buttons, 4 columns */
@media (min-width: 1275px) and (max-width: 1619.99px) {
	.section {width: 1215px}
}

/* fixed width & side buttons, 5 columns */
@media (min-width: 1620px) and (max-width: 1904.99px) {
	.section {width: 1500px}
}

/* fixed width & side buttons, 6 columns */
@media (min-width: 1905px) and (max-width: 2219.99px) {
	.section {width: 1785px}
}

/* fixed width & side buttons, 7 columns */
@media (min-width: 2220px) and (max-width: 2534.99px) {
	.section {width: 2070px}
}

/* fixed width & side buttons, 8 columns */
@media (min-width: 2535px) {
	.section {width: 2355px}
}


/* --- menu section -- */

.section.menu > section {margin: 0; flex: 1 1 auto; flex-wrap: wrap}
.section.menu > section > hcms-area {flex-wrap: wrap}


/* --- reflowing section --- */

.section.reflowing [name="blocks"] {margin: -7.5px; flex-wrap: wrap}
.section.reflowing [name="blocks"] > hcms-part {padding: 7.5px; margin: 0}