/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color: #222;
	font-family: 'museo-sans', sans-serif;
	font-size: 1.042vw;
	line-height: 1.2;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #000;
	margin: 1em 0;
	padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
	background: #ff3333;
	color: #fff;
	left: 0;
	margin: 0;
	padding: 16px;
	position: fixed;
	right: 0;
	top: 0;
}

/* ==========================================================================
   Author's custom styles

   red #d92424

   font-family: 'museo-sans', sans-serif; (weights: 100, 300, 300 italic, 700)
   ========================================================================== */

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
}
img,
embed,
object {
	max-width: 100%;
	height: auto;
	width: 100%;
}
a,
a:visited {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}
a:hover {
	color: inherit;
	text-decoration: none;
}
#container {
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.iubenda-links a {
	height: auto !important;
	width: auto !important;
	text-decoration: underline !important;
}
.iubenda-links a:hover {
	text-decoration: none !important;
}

/* ==================================================
   responsive iframe/video embed
   ================================================== */

.embed-container,
.video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.video-embed iframe,
.video-embed object,
.video-embed embed {
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==================================================
   fullscreen bg
   ================================================== */

body {
	background-color: #000;
}

.bg {
	background-image: url('/fileadmin/swissef/img/bg/1_1920.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-repeat: no-repeat;
	background-position: center center fixed;
	background-size: cover;

	bottom: 0;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 0.5s ease-out;
	z-index: 1;
}

/* ==================================================
   responsive iframe
   ================================================== */

.embed-container,
.mediaelement-video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin-top: 16px;
	overflow: hidden;
	max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.mediaelement-video iframe,
.mediaelement-video object,
.mediaelement-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==================================================
   some transitions
   exceptions are made directly at the selector
   ================================================== */

/*a,
table tr {
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}*/

/* ==================================================
   general form definitions
   ================================================== */

label {
	font-size: 0.729166667vw;
}

input[type='text'],
input[type='search'],
input[type='email'],
select,
textarea {
	background: #fff;
	border: 1px solid #fff;
	font-size: 0.729166667vw;
	margin-bottom: 0.416666667vw;
	padding: 0.416666667vw;
	transition: border-color 0.2s;
	width: 100%;
}

input[type='text']:focus,
input[type='text']:hover,
input[type='email']:focus,
input[type='email']:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
	border: 1px solid #545454;
}

input[type='radio'] {
	margin: 0;
}
input[type='checkbox'] {
	margin: 0;
}

input[type='submit'] {
	background: #fff;
	border: 1px solid #fff;
	color: #000;
	display: block;
	font-size: 0.729166667vw;
	margin: 0;
	padding: 0.416666667vw 0.833333333vw;
	transition: border-color 0.2s;
	width: auto;

	-webkit-border-radius: 0;
	border-radius: 0;
}

input[type='submit']:focus,
input[type='submit']:hover {
	border: 1px solid #545454;
}

/* ==================================================
   main area
   ================================================== */

.main {
	color: #000;
	display: grid;
	grid-column-gap: 0.833333333vw;
	grid-template-columns: 15.853658537% auto;
	grid-template-rows: 1fr;
	height: 100vh;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 85.416666667%;
	z-index: 2;
}

.no-cssgrid .main {
	height: auto;
}

.sidebar {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto 1fr;
	-ms-overflow-style: none;
	overflow: auto;
}

.no-cssgrid .sidebar {
	float: left;
	width: 15.853658537%;
}
.page-home .content {
	height: 100vh;
	-ms-overflow-style: none;
	overflow: auto;
}
.no-cssgrid .content {
	float: right;
	height: auto;
	width: 83.170731707%;
}

/* ==================================================
   logo
   ================================================== */

.logo-swissef {
	background: #fff;
	margin-bottom: 0.833vw;
	padding: 1.75vw 0;
}

a.logo-swissef__link {
	background: url('/fileadmin/swissef/img/logo_swissef.svg') no-repeat center center;
	background-size: contain;
	display: block;
	height: 5vw;
	margin: 0 auto;
	width: 10.42vw;
}

/* ==================================================
   menu-btn
   ================================================== */

.menu-btn {
	background: #d92424 url('/fileadmin/swissef/img/menu-btn.svg') no-repeat center center;
	background-size: 24px;
	cursor: pointer;
	display: none;
}

/* ==================================================
   nav
   ================================================== */

.nav {
	background: #fff;
	font-weight: 300;
	margin-bottom: 0.833vw;
	padding: 0 1.667vw;
}

/* =========================
   nav-main
   ========================= */

.nav-main {
	font-size: 1.5625vw;
	line-height: 1.2;
	padding: 1.041666667vw 0 3.125vw;
}

.nav-main__item {
	border-bottom: 1px solid #d92424;
	padding: 0.625vw 0;
}
.nav-main__item:last-child {
	border-bottom: none;
}
a.nav-main__link {
	color: #d92424;
	transition: color 0.2s;
}
a.nav-main__link:hover {
	color: #000;
}
a.nav-main__link--cur {
	color: #000;
	font-style: italic;
}

/* =========================
   nav-meta
   ========================= */

.nav-meta {
	margin-bottom: 0.416666667vw;
}
.nav-meta__item {
	border-bottom: 1px solid #d92424;
	padding: 0.416666667vw 0;
}
a.nav-meta__link {
	color: #d92424;
	transition: color 0.2s;
}
a.nav-meta__link:hover {
	color: #000;
}
.nav-meta__sep {
	color: #d92424;
	margin: 0.26vw;
}

/* =========================
   nav-social
   ========================= */

.nav-social {
	border-bottom: 1px solid #d92424;
	margin-bottom: 0.416666667vw;
	padding-bottom: 0.416666667vw;
}
.nav-social__item {
	float: left;
	margin-right: 1.458333333vw;
}

.nav-social__icon {
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: contain;
	display: block;
}

.nav-social__icon--facebook {
	background-image: url('/fileadmin/swissef/img/facebook--red.svg');
	height: 1.614583333vw;
	width: 0.833333333vw;
}
.nav-social__icon--twitter {
	background-image: url('/fileadmin/swissef/img/twitter--red.svg');
	height: 1.614583333vw;
	width: 1.5625vw;
}
.nav-social__icon--linkedin {
	background-image: url('/fileadmin/swissef/img/linkedin--red.svg');
	height: 1.614583333vw;
	width: 1.614583333vw;
}

/*<nav class="nav-social" role="navigation">
	<ul class="clearfix nav-social__list">
		<li class="nav-social__item"><a href="https://www.facebook.com/" target="_blank"><span class="nav-social__icon facebook"></span>[icon]</a></li>
		<li class="nav-social__item"><a href="https://www.twitter.com/" target="_blank"><span class="icon twitter"></span>[icon]</a></li>
	</ul>
</nav>*/

/* =========================
   kesearch
   ========================= */

/* searchbox in sidebar */

.sidebar div.kesearchbox {
	margin-bottom: 0.9375vw;
	position: relative;
}

.sidebar #ke_search_searchfield_sword {
	background: #fff;
	border: 1px solid #95989a;
	box-shadow: none;
	display: inline;
	height: auto;
	margin: 0;
	padding: 0.15625vw 1.5625vw 0.15625vw 0.15625vw;
	width: 100%;
}

.sidebar #ke_search_searchfield_sword::-webkit-input-placeholder {
	color: #b9b9b9;
}
.sidebar #ke_search_searchfield_sword:-ms-input-placeholder {
	color: #b9b9b9;
}
.sidebar #ke_search_searchfield_sword::-ms-input-placeholder {
	color: #b9b9b9;
}
.sidebar #ke_search_searchfield_sword::placeholder {
	color: #b9b9b9;
}

.sidebar #ke_search_searchfield_submit {
	background: url('/fileadmin/swissef/img/glass.svg') no-repeat center center;
	background-size: 100%;
	border: none;
	height: 1vw;
	padding: 0;
	position: absolute;
	right: 0.25vw;
	top: 0.25vw;
	transition: opacity 0.2s;
	width: 1vw;
}

.sidebar #ke_search_searchfield_submit:hover {
	opacity: 0.5;
}

/* searchbox in content */
.content #form_kesearch_pi1 {
	background: #ebebeb;
	margin-bottom: 1.666666666vw;
	padding: 0.833333333vw;
}
.content #form_kesearch_pi1 .resetbutt {
	display: none;
}
.content #form_kesearch_pi1 fieldset.kesearch_searchbox {
	position: relative;
}
.content #form_kesearch_pi1 fieldset.kesearch_searchbox .clearer {
	display: none;
}
.content #ke_search_sword {
	margin: 0;
}

.content #form_kesearch_pi1 .submitbutt input[type='submit'] {
	background: url('/fileadmin/swissef/img/glass.svg') no-repeat center center;
	background-size: 100%;
	border: none;
	color: transparent;
	height: 1vw;
	padding: 0;
	position: absolute;
	right: 0.25vw;
	top: 0.25vw;
	transition: opacity 0.2s;
	width: 1vw;
}

.content #form_kesearch_pi1 .submitbutt input[type='submit']:hover {
	opacity: 0.5;
}

/* results */

.content .tx-kesearch-pi1 #kesearch_num_results {
	margin-bottom: 1.666666666vw;
}
.content .tx-kesearch-pi1 .result-list-item {
	margin-bottom: 0.833333333vw;
}
.content .tx-kesearch-pi1 .result-title {
	color: #d92424;
}
.content .tx-kesearch-pi1 img {
	width: auto;
}
/*.tx-kesearch-pi1 .hit { color: #d92424; }*/

/* ==================================================
   pagefooter
   ================================================== */

.pagefooter {
	background: #d92424;
	color: #fff;
	font-weight: 300;
	padding: 1.25vw 1.666666667vw;
}

.address p {
	margin: 0;
}
.address a {
	color: #fff;
}

.nav-footer__item {
	border-top: 1px solid #fff;
	margin-top: 0.9375vw;
	padding-top: 0.9375vw;
}
a.nav-footer__link {
	color: #fff;
}
a.nav-footer__link.iubenda-nostyle {
	height: auto !important;
	width: auto !important;
}

/* ==================================================
   hero
   ================================================== */

.hero {
	align-items: center;
	display: flex;
	/*height: 41.729323308vw;*/
	justify-content: center;
	min-height: 20.833333333vw !important;
}

h1.hero__h1 {
	color: #d92424;
	font-size: 4.6875vw;
	font-weight: 100;
	line-height: 1.2;
	text-align: center;
}

.hero__hr {
	border-top: 0.15625vw solid #d92424;
	margin: 1.25vw auto;
	width: 28vw;
}

.hero__icon {
	background: url('/fileadmin/swissef/img/arrow-down.svg') no-repeat center center;
	background-size: 100%;
	display: block;
	height: 2.1875vw;
	margin: 1vw auto 0;
	width: 4.010416667vw;
}

/* ==================================================
   content
   ================================================== */

.content {
	height: 100%;
}
h1 {
	color: #d92424;
	font-size: 1.5625em;
	font-weight: 300;
	margin: 0;
}
h2 {
	color: #d92424;
	font-size: 1em;
	font-weight: 300;
	margin: 0;
}
h3 {
	color: #868686;
	font-size: 1em;
	font-weight: 300;
	margin: 0;
}
p {
	margin: 0 0 1em;
}
.font-size--l {
	font-size: 1.5625vw;
}
.font-color--red {
	color: #d92424;
}
.frame-space-after-large {
	margin-bottom: 5.2vw;
}
.frame-space-after-medium {
	margin-bottom: 2.604166667vw;
}
.frame-space-after-small {
	margin-bottom: 1.3vw;
}
.frame-space-before-large {
	margin-top: 5.2vw;
}
.frame-space-before-medium {
	margin-top: 2.604166667vw;
}
.frame-space-before-small {
	margin-top: 1.3vw;
}
.font-color--red {
	color: #d92424;
}
.font-size--l {
	font-size: 1.5625vw;
}
#stiftungsrat {
	margin-top: 3.833333333vw;
}
figure {
	margin: 0;
}
figcaption.image-caption {
	margin: 0.416666667vw 0 0.833333333vw;
}

.content ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.5625vw;
}

.content ul > li:before {
	content: '—';
	display: inline-block;
	float: left;
	margin-left: -1.5625vw;
	width: 1.5625vw;
}

ul.nav-sub {
	background: #fff;
	line-height: 3vw;
	margin-bottom: 0.833333333vw;
	padding: 0 1.666666667vw;
	position: fixed;
}
ul.nav-sub li {
	display: inline-block;
}
ul.nav-sub > li:before {
	content: '';
}
ul.nav-sub a {
	color: #d92424;
}

/* ==================================================
   uploads
   ================================================== */

.ce-uploads-filetype {
	text-transform: uppercase;
}

/* ==================================================
   columns
   ================================================== */

.columns {
	display: flex;
	justify-content: space-between;
	/*display: flex;*/
	/*height: 100%;*/
	/*justify-content: space-between;*/
	/*margin-bottom: 1.666666667vw;*/
}

.column--50 {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 1fr;
	height: 100vh;
	-ms-overflow-style: none;
	overflow: auto;
	width: 49.4%;
}

.no-cssgrid .column--50 {
	height: auto;
}

/*.column--66 { width: 64%; }*/
/*.column--50 { width: 49.4%; }*/
/*.column--33 { width: 31.5%; }*/
/*.column--25 { width: 23%; }*/

/* ==================================================
   gridelements
   ================================================== */

/* =========================
   ge-box-white
   ========================= */

.ge-box--white {
	background: #fff;
	margin-bottom: 0.833333333vw;
	padding: 1.25vw 1.666666667vw;
}

.ge-box--white:last-child {
	margin-bottom: 0;
}

.ge-box--white--fullheight {
	height: 100vh;
	-ms-overflow-style: none;
	overflow: auto;
}
.no-cssgrid .ge-box--white--fullheight {
	height: auto;
}

/* ==================================================
   content-elements
   ================================================== */

/* =========================
   ce-quote
   ========================= */

.ce-quote {
	color: #d92424;
	margin-bottom: 1em;
}
p.ce-quote__text {
	font-size: 1.5625vw;
	margin-bottom: 0;
}
p.ce-quote__name {
	margin-bottom: 0;
}

/* =========================
   ce-person
   ========================= */

.ce-person {
	margin-bottom: 0.833333333vw;
}
.ce-person__img {
	float: left;
	margin: 0 0.833333333vw 0 -1.666666667vw;
	max-width: 43%;
}
.ce-person__text p {
	margin-bottom: 0.25em;
}
a.ce-person__linkedin {
	background: url('/fileadmin/swissef/img/linkedin-bug--black.png') no-repeat center left;
	background-size: contain;
	display: inline-block;
	width: 25px;
}
p.ce-quote__text {
	font-size: 1.5625vw;
	margin-bottom: 0;
}
p.ce-quote__name {
	margin-bottom: 0;
}

/* =========================
   ce-donator
   ========================= */

.ce-donator {
	border-bottom: 1px solid #d92424;
	margin-bottom: 0.833333333vw;
	padding: 0 0 0.833333333vw 0;
}
.ce-donator__link {
	display: block;
}
.ce-donator__content {
	align-items: center;
	display: flex;
}
.ce-donator__img-wrap {
	margin-right: 7.5%;
	width: 25%;
}
.ce-donator__text {
	flex-grow: 1;
}
.ce-donator__text p {
	margin: 0;
}

/* ==================================================
   powermail
   ================================================== */

.tx-powermail {
	background: #ebebeb;
	margin: -0.416666667vw -0.833333334vw;
	padding: 0.833333333vw;
}
.tx-powermail legend {
	display: none;
}
.tx-powermail h3 {
	display: none;
}
.tx-powermail .powermail_fieldwrap_datenschutzbestimmungen {
	margin: 0.416666667vw 0 0.833333334vw;
}
.tx-powermail .powermail_fieldwrap_datenschutzbestimmungen > label {
	display: none;
}
.tx-powermail .powermail_fieldwrap_datenschutzbestimmungen a {
	color: #d92424;
}

ul.parsley-errors-list {
	color: #d92424;
	font-size: 0.729166667vw;
	list-style: none;
	margin: 0 0 0.833333333vw;
	padding: 0;
}

ul.parsley-errors-list > li:before {
	content: '';
}
input.parsley-error {
	border: 1px solid #d92424;
}

/* ==================================================
   clever reach newsletter form
   ================================================== */

.cr_form {
	background: #ebebeb;
	margin: -0.416666667vw -0.833333334vw;
	padding: 0.833333333vw;
}
.cr_button {
	background: #fff;
	border: 1px solid #fff;
	color: #000;
	display: block;
	font-size: 0.729166667vw;
	margin: 0;
	padding: 0.416666667vw 0.833333333vw;
	transition: border-color 0.2s;
	width: auto;

	-webkit-border-radius: 0;
	border-radius: 0;
}

.cr_button:focus,
.cr_button:hover {
	border: 1px solid #545454;
}

input[type='text'].clever_form_error,
input[type='email'].clever_form_error,
select.clever_form_error,
textarea.clever_form_error {
	border: 1px solid #d92424;
}

/* ==================================================
   news
   ================================================== */

/* =========================
   grid-article
   ========================= */

.news-list-view .gutter-sizer {
	width: 1.173881145%;
}

.news-list-view .grid-article {
	background: #fff;
	margin-bottom: 0.833333333vw;
	padding: 0 1.5625vw 1.5625vw 1.5625vw;
	position: relative;
	width: 49.413059428%;
}

.news-list-view .grid-article h2 {
	float: left;
	font-size: 2.083333333vw;
	font-weight: 700;
	line-height: 1.2;
	margin: 2.1vw 0 1.302083333vw;
	max-width: 24.479166667vw;
}

.news-list-view .grid-article .news-list-date {
	background: #d92424;
	color: #fff;
	display: inline-block;
	float: left;
	margin-right: 1.5625vw;
	padding: 0.15625vw 0.833333333vw 0.260416667vw;
	text-align: center;
	width: 4.010416667vw;
}

.news-list-view .grid-article .news-list-date-month {
	display: block;
	font-size: 2.083333333vw;
	font-weight: 300;
}
.news-list-view .grid-article .news-list-date-year {
	display: block;
	font-weight: 100;
}

.news-list-view .grid-article a.more {
	background: url('/fileadmin/swissef/img/plus--red.svg') no-repeat center center;
	background-size: contain;
	display: block;
	height: 1.197916667vw;
	position: absolute;
	right: 1.041666667vw;
	top: 0.833333333vw;
	width: 1.197916667vw;
}

/* =========================
   latest-article
   ========================= */

.latest-article {
	background: #d92424;
	color: #fff;
	margin-bottom: 0.833333333vw;
	padding: 1.5625vw;
	position: relative;
	width: 100%;
	z-index: 2;
}

.latest-article--fixed {
	position: fixed;
	top: 0;
}

.latest-article .news-img-wrap {
	float: left;
	margin-right: 3%;
	width: 25%;
}

.latest-article__text {
	float: right;
	width: 72%;
}

.latest-article h2 {
	color: #fff;
	font-size: 2.083333333vw;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.302083333vw;
	max-width: 24.479166667vw;
}

.latest-article h2 a {
	color: #fff;
}

.latest-article a.more {
	background: url('/fileadmin/swissef/img/plus--white.svg') no-repeat center center;
	background-size: contain;
	display: block;
	height: 1.197916667vw;
	position: absolute;
	right: 1.041666667vw;
	top: 0.833333333vw;
	width: 1.197916667vw;
}

/* =========================
   news-single
   ========================= */

.news-single .news-img-wrap {
	margin: 0 0 0.833333333vw;
}
.news-single .news-img-caption {
	margin: 0.416666667vw 0 0;
}
.mediaelement-video iframe {
	border: none;
}

/* ==================================================
   ext: dp_cookieconsent
   ================================================== */

.cc-compliance .cc-btn.cc-allow {
	background: rgba(255, 255, 255, 0.8);
	border-top: 1px solid #000;
	color: #000000;
	width: 100%;
}
.cc-compliance .cc-btn.cc-deny {
	display: none;
}

/* ==================================================
   ext: cookies
   ================================================== */

/* #tx_cookies_inner {
	background: #000;
	bottom: 0;
	color: #fff;
	font-size: 12px;
	left: 0;
	padding: 25px;
	position: fixed;
	right: 0;
	z-index: 999999999999;
}

#tx_cookies_accept input[type='submit'] {
	background: #000;
	border: 2px solid #fff;
	color: #fff;
	float: right;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	transition: opacity 0.2s;
	width: auto;
}

#tx_cookies_close {
	display: none;

	background: #000;
	border: none;
	color: #fff;
	margin: 0 0 10px;
	padding: 0;
	text-align: right;
	text-decoration: underline;
	width: 100%;
}

#tx_cookies_close:hover {
	text-decoration: none;
}
#tx_cookies_inner h3 {
	display: none;
}
.cookie_text {
	float: left;
	margin-top: 0;
	max-width: 70%;
}
.cookie_text p {
	margin: 0;
}
#tx_cookies_link a {
	color: #fff;
	text-decoration: underline;
}
#tx_cookies_link a:hover {
	text-decoration: none;
}
#tx_cookies_accept input[type='submit']:hover {
	opacity: 0.5;
} */

/* ==================================================
   fancybox
   ================================================== */

/*.fancybox-caption-wrap { background: transparent !important; }*/
.fancybox-caption {
	border-top: 0 !important;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	-webkit-clip-path: none;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
	white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: ' '; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}