.sector {position: relative; display: flex; flex-direction: column; justify-content: space-between}
.sector > .heading,
.sector > .social,
.sector > .main {margin: 15px auto 30px; padding: 15px}
.sector > .content {margin: 15px auto 0; padding: 0}

/* overhead (parallax) image */

.sector > .overhead > hcms-field:not(:empty) {display: block; height: 50vh}
.sector > .overhead > hcms-field > picture img,
.sector > .overhead > hcms-field > video {width: 100%; height: 125%; object-fit: cover}

/* credits */

.sector > .overhead > .credits {display: flex; align-items: center; position: absolute; left: 0; bottom: 30px; padding: 10px 15px; font-size: 9pt; color: #776c69; background: hsla(0, 0%, 96%, 1)}
.sector > .overhead > .credits span {display: none; margin-right: 12px; white-space: nowrap}
.sector > .overhead > .credits a {text-decoration: underline}
.sector > .overhead > .credits i.icon {font-size: 15pt; cursor: pointer}

/* content */

.sector > .content > hcms-field {display: block; padding: 15px}
.sector > .content > hcms-field + hcms-field {margin-top: -15px; padding-top: 0px}
.sector > .content > hcms-field:empty {display: none}
.sector > .content p,
.sector > .content q {display: block; margin: 15px 30px; font-family: 'Aileron', sans-serif; font-size: 15pt}
.sector > .content blockquote {margin: 15px 15px 15px 30px; font-family: 'Merriweather', serif; font-size: 15pt; line-height: 1.5}
.sector > .content blockquote::before {display: block; margin: 0 0 -30px; content: '‟'; font-family: 'Merriweather'; font-size: 45pt}
.sector > .content cite {font-family: 'Aileron', sans-serif; font-size: 12pt; font-style: normal}
.sector > .content cite::before {display: inline; margin: 0 15px 0 30px; content: '—'}
.sector > .content a {color: rgb(78, 78, 82)}
.sector > .content a:hover {text-decoration: underline}
.sector > .content ul {margin: 15px 30px; padding: 0 15px}
.sector > .content ul li {margin: 3px 0; padding: 0 15px}
.sector > .content button.call-to-action {margin: 30px 30px 15px}

/* borders between sectors */

hcms-part[template^='sectors/main'] + hcms-part[template^='sectors/main'] .sector {border-top: 1px solid white}

/* media queries */

@media (max-width: 659px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: calc(100vw - 30px)}
}

@media (min-width: 660px) and (max-width: 705px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 630px}
}

/* 2 columns */
@media (min-width: 705px) and (max-width: 989.99px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 675px}
}

/* 3 columns */
@media (min-width: 990px) and (max-width: 1274.99px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 960px}
}

/* 4 columns */
@media (min-width: 1275px) and (max-width: 1619.99px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 1245px}
}

/* 5 columns */
@media (min-width: 1620px) and (max-width: 1904.99px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 1530px}
}

/* 6 columns */
@media (min-width: 1905px) and (max-width: 2219.99px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 1815px}
}

/* 7 columns */
@media (min-width: 2220px) and (max-width: 2534.99px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 2100px}
}

/* 8 columns */
@media (min-width: 2535px) {
	.sector > .heading,
	.sector > .social,
	.sector > .content,
	.sector > .main {width: 2385px}
}


/* --- simple --- */

.sector.simple > .content {margin: 15px auto; padding: 0}


/* --- header --- */

#header {min-height: 100vh; color: white}

#header > .menu {margin: 0 auto; padding: 30px 0}
#header > .center {margin: 0 auto; padding: 60px 5vw}
#header > .center > h1 {padding: 0 9px; text-align: center; font-family: Roboto, Arial, sans-serif; font-weight: 350; color: hsla(0, 0%, 100%, .72); text-transform: uppercase; /*text-decoration: underline; *//*word-break: break-all; hyphens: auto*/}
#header > .center > h1 .logo {width: 450px; max-width: 90vw}
#header > .bottom {margin: 30px auto; padding: inherit}
#header > .background {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -900; overflow: hidden; background-color: hsla(0, 0%, 0%, 1)}
#header > .background > .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -825; background-color: black; opacity: .3}
#header > .background > hcms-field {position: relative; top: 0; left: 0; right: 0; bottom: 0; z-index: -900}
#header > .background > hcms-field > picture:not(:only-child) {display: none}
#header > .background > hcms-field > picture > img {width: 100%; height: 100%; object-fit: cover}
#header > .background > hcms-field > video {width: 100%; height: 100%; object-fit: cover}

/* credits */

#header > .credits {display: flex; align-items: center; position: absolute; left: 0; bottom: 30px; padding: 10px 15px; font-size: 9pt; color: #776c69; background: hsla(0, 0%, 96%, 1)}
#header > .credits span {display: none; margin-right: 12px; white-space: nowrap}
#header > .credits a {text-decoration: underline}
#header > .credits i.icon {font-size: 15pt; cursor: pointer}

#header.menu-open > .menu {color: white; background-color: hsla(0, 0%, 0%, .9)}
#header.menu-open > .submenu {color: white; background-color: hsla(0, 0%, 0%, .9)}
#header.menu-open > .center {display: none}
#header.menu-open > .bottom {display: none}

#header.menu-closed > .submenu {display: none}


/* --- footer --- */

#footer {min-height: 100vh; color: white}

#footer > .bottom {margin: 30px auto; padding: inherit}
#footer > .background {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -900; overflow: hidden; background-color: hsla(0, 0%, 0%, 1)}
#footer > .background > .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -825; background-color: black; opacity: .45}
#footer > .background > hcms-field {position: relative; top: 0; left: 0; right: 0; bottom: 0; z-index: -900}
#footer > .background > hcms-field > picture > img {width: 100%; height: 100%; object-fit: cover}


/* --- main --- */

.sector.main + .sector.main {border-top: 1px solid white}

.sector.main > * > hcms-area {height: 100%}

.sector.main > .heading {color: #776c69; margin: 20px auto 5px; padding: 0 15px}
.sector.main > .heading h2 {display: flex; margin: 10px 5px}
.sector.main > .social {color: #776c69; margin: 0 auto; padding: 6px 15px}
.sector.main > .social x-button {font-size: 21pt; cursor: pointer}
.sector.main > .main {background-color: hsla(0, 0%, 100%, 1)}
.sector.main > .background {background-color: hsla(0, 0%, 96%, .9); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -900; overflow: hidden}
.sector.main > .background > .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -825}
.sector.main > .background > hcms-field {position: relative; top: 0; left: 0; right: 0; bottom: 0; z-index: -900}
.sector.main > .background img {width: 100%; height: 100%; object-fit: cover}

/* special options */

/* .sector.main:not([show-social='true']) > .social {display: none} */