/*! 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: #000;
	font-family: myriad-pro, sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
}

/*
 * 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: #ccc;
	text-shadow: none;
}

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

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 14px 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 {
	margin: 14px 0;
	background: #ccc;
	color: #000;
	padding: 14px 0;
}

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

   red #b2071b

   font-family: myriad-pro, sans-serif;
   ========================================================================== */

* { box-sizing: border-box; }
img, embed, object, video { max-width: 100%; height: auto; width: 100%; }
a, a:visited { color: #000; cursor: pointer; text-decoration: none; }
a:hover { color: #b2071b; }
html.no-scroll, body.no-scroll { height: 100%; overflow: hidden; }
html.grey, body.grey { background: #e6e6e6; }
.error { color: #b2071b; }
strong { font-weight: 400; }



/* ==================================================
   pageheader
   ================================================== */

.pageheader {
	padding: 25px 25px 45px;
	position: relative;
	transition: background .1s linear;
	z-index: 1002; /* bigger than .teaser */
}

.pageheader--fh {
	height: 100%;
	overflow: scroll;
}


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

.logo {
	background: url('/fileadmin/nvs/img/logo_nvs.svg') no-repeat center center;
	background-size: 100%;
	display: block;
	float: left;
	height: 69px;
	width: 145px;
}

/* temp logo steinbruchtag */
.steinbruchtag {
	background: url('/fileadmin/nvs/img/logo_steinbruchtag_2019.svg') no-repeat center center;
	background-size: 100%;
	display: none;
	float: right;
	height: 48px;
	margin: 0 20px 0 0;
	width: 151px;
}


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

.nav-meta--screen { display: none; }
.nav-meta--mobile { display: block; }

.nav-meta__list {
	font-size: 16px;
	line-height: 1.33;
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

a.nav-meta__link { color: #000; }
a.nav-meta__link:hover { border-bottom: #000 1px solid; }
a.nav-meta__link--logout { color: #b2071b; }


/* =========================
   menu-btn
   > https://codepen.io/designcouch/pen/Atyop
   ========================= */

.menu-btn {
	cursor: pointer;
	float: right;
	height: 48px;
	margin-top: 2px;
	overflow: hidden;
	position: relative;
	transform: rotate(0deg);
	transition: .2s ease-in-out;
	width: 48px;
}

.menu-btn span {
	background: #000;
	display: block;
	height: 2px;
	left: -50%;
	opacity: 1;
	position: absolute;
	transform: rotate(0deg);
	transition: .2s ease-in-out;
	width: 200%;
}

.menu-btn span:nth-child(1) { top: 0px; }
.menu-btn span:nth-child(2), .menu-btn span:nth-child(3) { top: 23px; }
.menu-btn span:nth-child(4) { top: 46px; }
.menu-btn--open span:nth-child(1) { left: 50%; top: 24px; width: 0%; }
.menu-btn--open span:nth-child(2) { transform: rotate(45deg); }
.menu-btn--open span:nth-child(3) { transform: rotate(-45deg); }
.menu-btn--open span:nth-child(4) { left: 50%; top: 24px; width: 0%; }

.menu-btn::before { background: #fff; color: #000; content: 'Menu'; font-size: 12px; left: 50%; padding: 2px; position: absolute; text-transform: uppercase; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.menu-btn--open::before { display: none; }


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

.nav-main {	display: none; }

.nav-main__link { display: block; float: left; width: 75%; }
a.nav-main__link--active { color: #b2071b; }
.nav-main__toggle { cursor: pointer; display: block; float: right; padding-left: 10px; width: 58px; }
.nav-main__toggle::after { content: "+" }
.open-dropdown > .nav-main__toggle::after { content: "–" }

.nav-main-l1 {
	font-size: 22px;
	list-style: none;
	margin: 0 auto;
	max-width: 1024px;
	padding: 120px 0 20px;
	text-transform: uppercase;
	width: 100%;
}

.nav-main-l1__item { margin: 0 0 20px; width: 100%; }
.nav-main-l1__link { padding: 5px 0; }

.nav-main-l2 {
	display: none;
	font-size: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-main-l2__link { padding: 5px 0; }

.nav-main-l3 {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: none;
}

.nav-main-l3__item { margin: 0 0 5px; }
.nav-main-l3__link { color: #666; padding: 5px 0; }


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

.main {
	margin: 0 auto;
	padding: 0 25px 100px;
	width: 100%;
}

/*.main--home { display: none; }*/
.content { margin-bottom: 40px; width: 100%; }
.aside { width: 100%; }

h1 {
	color: #b2071b;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.15;
	margin: 0 0 40px;
}

h2 {
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	margin: 35px 0 14px;
}


.content > div > header:first-of-type > h2:first-of-type,
.content > div:first-of-type > div:first-of-type > header:first-of-type > h2:first-of-type,
.content > div:first-of-type > div:first-of-type > h2:first-of-type { margin-top: 0; }

.content p { margin: 0 0 14px; }
.content ul { list-style-type: none; margin: 0 0 14px; padding-left: 10px; }
.content ul > li:before { color: #b2071b; content: "·"; display: inline-block; float: left; margin-left: -10px; width: 10px; }
.content a { color: #b2071b; }
.content a:hover { border-bottom: 1px solid #000; color: #000; }

a.btn--online-shop {
	background: #b2071b;
	color: #fff;
	display: inline-block;
	font-family: myriad-pro, sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 28px;
	margin: 30px 0 60px 0;
	padding: 10px 40px 12px;
	text-align: center;
	transition: background .2s;
	width: 100%;
}

a.btn--online-shop:hover {
	background: #666666;
	border-bottom: none;
	color: #fff;
	text-decoration: none;
}

#map-canvas {
	height: 300px;
	margin-bottom: 28px;
	width: 100%;
}

#map-canvas img { max-width: none; }


/* =========================
   ce-uploads
   ========================= */

ul.ce-uploads {
	border-top: 1px solid #000;
	font-size: 14px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	width: 100%;
}

.ce-uploads__item { border-bottom: 1px solid #000; }
a.ce-uploads__link { color: #000; }
a.ce-uploads__link:hover {  border: none; color: #b2071b; }
.ce-uploads__icon { display: block; min-height: 32px; padding: 7px 0 7px 25px; }
.ce-uploads__icon--pdf { background: url('/fileadmin/nvs/img/fileicons/pdf.svg') no-repeat left 5px; }
.ce-uploads__icon--docx { background: url('/fileadmin/nvs/img/fileicons/docx.svg') no-repeat left 5px; }
.ce-uploads__icon--doc { background: url('/fileadmin/nvs/img/fileicons/doc.svg') no-repeat left 5px; }

/* fluid_styled_content overrides */
.ce-uploads li { margin: 0; }
.ce-uploads span { display: inline; }


/* =========================
   ce-table
   ========================= */

.ce-table { border-spacing: 0; }
.ce-table thead th { border-bottom: 0; font-weight: 400; text-align: left; }
.ce-table th, .ce-table td { border-top: 1px solid #000; padding: 8px; }


/* =========================
   aside
   ========================= */

.aside h3 {
	font-size: 23px;
	font-weight: 300;
	text-transform: uppercase;
	margin: -3px 0 13px;
}


/* ==================================================
   teaser
   ================================================== */

.teaser {
	background: transparent;
	bottom: 0;
	border-bottom: 25px solid #fff;
	border-left: 25px solid #fff;
	border-right: 25px solid #fff;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity .2s ease-out;
	visibility: hidden;
	z-index: 0;
}

.teaser-img {
	background-color: #fff;
	/*background-image : > random background img via typoscript in lib.teaser.ts;*/
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: 25px;
	left: 25px;
	position: fixed;
	right: 25px;
	top: 140px;
	z-index: 1001;
}

.teaser.visible {
	opacity: 1;
	visibility: visible;
	z-index: 1000;
}


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

.ge-2col__col1, .ge-2col__col2 { margin: 0 0 14px; }


/* ==================================================
   overrides
   ================================================== */

.ce-intext.ce-right .ce-gallery,
.ce-intext.ce-left .ce-gallery,
.ce-above .ce-gallery { margin-bottom: 14px; }
.image { border: 1px solid #000; }
.image .image-caption { padding-top: 4px; }

.ce-gallery { margin-top: 0 !important; }
.ce-textpic { margin-bottom: 14px; }


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

label { display: block; }

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea,
button {
	background-color: #fff;
	border: 1px solid #000;
	font-family: myriad-pro, sans-serif;
	font-weight: 300;
	margin: 0 0 14px;
	padding: 14px;
	transition: background-color .2s, color .2s;
	width: 100%;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
select:hover,
textarea:hover,
button:hover,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus,
button:focus { background-color: #cccccb; }

button:active { background-color: #818181; color: #fff; }
textarea { height: 100px; }
button { padding: 14px 18px; width: auto; }
input[type="radio"] { margin: 0; }
input[type="checkbox"] { margin: 0; }

select {
	background-image: url('/fileadmin/nvs/img/arrow-select--down.svg');
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 30px 11px;
}

select:focus { background-image: url('/fileadmin/nvs/img/arrow-select--up.svg'); }

input[type="submit"] {
    background: #b2071b;
    border: none;
    color: #fff;
    display: block;
	font-family: myriad-pro, sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 28px;
    margin: 0;
    padding: 10px 40px 12px;
    text-align: center;
	transition: background .2s;
    width: 100%;

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

input[type="submit"]:hover {
	background: #666666;
	color: #fff;
}


/* ==================================================
   ext: news
   ================================================== */

.page-navigation:before,
.page-navigation:after { content: " "; /* 1 */ display: table; /* 2 */ }
.page-navigation:after { clear: both; }

.page-navigation p { float: left; width: 50%; }
.f3-widget-paginator { float: right; list-style: none; width: 50%; text-align: right; }
.f3-widget-paginator li { border: 1px solid #000; display: inline-block; margin-left: 10px; text-align: center; min-width: 30px; }
.f3-widget-paginator li:before { content:"" !important; }
.f3-widget-paginator li.next,
.f3-widget-paginator li.previous { border: none; }
.f3-widget-paginator li a { display: block; }

.news-single p.news-img-caption { font-size: 10px; margin-top: 7px; }
.news-single .news-backlink-wrap { margin-top: 14px; }

/*.content > div > .footer > p:first-of-type { margin-top: 0; }*/
.news-list-view > .article:first-of-type > .header > h2 { margin-top: 0; }


/* ==================================================
   ext: felogin
   ================================================== */

.tx-felogin-pi1 legend { display: none; }
.tx-felogin-pi1 fieldset > div { position: relative; }
.tx-felogin-pi1 fieldset label { margin: 14px 0 0 14px; position: absolute; }

.tx-felogin-pi1 fieldset input#user,
.tx-felogin-pi1 fieldset input#pass { padding-left: 105px; }


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

.cc-window .cc-message { padding: 1rem; }
.cc-compliance .cc-w-100 { margin-bottom: 1rem; margin-left: 1rem; width: calc( 100% - 2rem); }
.cc-window .dp--cookie-check { display: none; }
.cc-allow, .cc-deny { display: none !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;
}