/*! 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: 1em;
	font-style: normal;
	font-weight: 400;
	line-height: 1.15;
}

/*
 * 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 #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 {
	margin: 16px;
	background: #f33;
	color: #fff;
	padding: 16px;
}

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

   red #b20e10

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

img, embed, object { max-width: 100%; height: auto; width: 100%; }
a, a:visited { color: #b20e10; cursor: pointer; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }
#container { }
.center { margin: 0 auto; max-width: 1024px; padding: 0 16px; }
.screen { display: none; }
.mobile { display: inline-block; }
* { box-sizing: border-box; }


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

a {
	-webkit-transition: color .2s ease-out, border-color .2s ease-out;
	-moz-transition: color .2s ease-out, border-color .2s ease-out;
	-o-transition: color .2s ease-out, border-color .2s ease-out;
	transition: color .2s ease-out, border-color .2s ease-out;
}


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

.pageheader { margin: 16px 0; position: relative;}

a.logo-main {
	background: url('/img/logo_naturstein_swiss.svg') no-repeat 0 0;
	display: block;
	float: left;
	height: 46px;
	width: 217px;
}


/* =========================
   menu-btn
   (off-canvas-navigation)
   ========================= */

.menu-btn {
	background: url('/img/burger.svg') no-repeat 0 0;
	cursor: pointer;
	display: block;
	float: right;
	height: 22px;
	margin: 1px 15px 0 0;
	position: relative;
	width: 34px;
	z-index: 9999999999999;
}

.menu-btn:hover { opacity: .5; }

.pushy-open-left .menu-btn,
.pushy-open-right .menu-btn {
	background: url('/img/close.svg') no-repeat 0 0;
	width: 22px;
}


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

.nav-main {
	display: none;
	font-family: myriad-pro-semi-condensed, sans-serif;
	font-size: 1em; /* 16px */
	list-style: none;
	margin: 30px 0 0 275px;
	padding: 0;
	text-transform: uppercase;
}

.nav-main__item { float: left; margin-right: 10px; }
.nav-main__item:last-child { margin-right: 0; }
a.nav-main__link { color: #000; }
a.nav-main__link:hover, a.nav-main__link--active { color: #b20e10; }


/* =========================
   nav-language
   ========================= */

.nav-language {
	display: none;
	font-family: myriad-pro-semi-condensed, sans-serif;
	font-size: .875em; /* 14px */
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	top: 0;
}

.nav-language__item { float: left; margin-right: 10px; }
.nav-language__item:last-child { margin-right: 0; }
a.nav-language__link { color: #000; }
a.nav-language__link:hover { color: #b20e10; }



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

.content { font-size: .875em; /* 14px */ }
.content p { margin: 20px 0; }

.h1 {
	font-family: myriad-pro-semi-condensed, sans-serif;
	font-size: 1.571428571em; /* 22px*/
	font-style: normal;
	font-weight: 600;
	line-height: 1.090909091;
	margin: 30px 0 30px;
	text-transform: uppercase;
}

.h2 {
	font-family: myriad-pro-semi-condensed, sans-serif;
	font-size: 1.142857143em; /* 16px */
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	margin: 30px 0 20px;
	text-transform: uppercase;
}
.title { font-family: myriad-pro-semi-condensed, sans-serif; font-style: normal; font-weight: 600; text-transform: uppercase; }
.quarry { margin-bottom: 0; padding-bottom: 0; position: relative; }
.quarry__hr { border-bottom: 1px solid #000; height: 1px; margin: 30px 0; width: 60px; }

/*.quarry:after {
	content: "";
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 60px;
}*/

.list { margin: 20px 0; padding: 0 0 0 1.2em; }
.list__item { margin: 0 0 20px; }

.dl__item { margin-top: 20px; }
.dl__dd { margin: 0; }

.box { margin: 40px 0; padding: 15px 10px; }
.box--red { background: #b20e10; color: #fff; }
.box--red a { color: rgba(255,255,255,.75); transition: color .2s ease-out; }
.box--red a:hover { color: rgba(255,255,255,1); }
.box :first-child { margin-top: 0; }
.box :last-child { margin-bottom: 0; }

.font-size--tiny { font-size: .642857143em; /* 9px */ }

.gallery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.gallery a { display: block; height: 30vw; margin-bottom: 4%; width: 48%; }
.gallery a img { height: 100%; object-fit: cover; width: 100%; }


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

.pagefooter {
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	font-size: .75em; /* 12px */
	line-height: 1.333;
	margin-bottom: 20px;
	padding: 10px 0;
	text-align: center;
}

.pagefooter a { border-bottom: 1px solid #000; color: #000; }
.pagefooter a:hover { border-color: #fff; }

.address__sep { margin: 0 5px; }


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

.columns { margin: 0; overflow: hidden; }


/* ==================================================
   map
   ================================================== */

.map-container {
	margin: 60px 0 40px;
	padding-bottom: 63%;
	position: relative;
	width: 100%;
}

.map-hint {
	background: rgba(255,255,255,.7);
	cursor: pointer;
	display: none;
	font-size: 1.571428571em; /* 22px */
	height: 88px;
	left: 50%;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 485px;
	z-index: 1;
}

.map-hint__close {
	background: url('/img/close--square.svg') no-repeat 0 0;
	float: right;
	height: 11px;
	margin: 3px;
	width: 11px;
}

/*.mobile-blocker { height: 100%; position: absolute; width: 100%; z-index: 2; }*/
#map { height: 100%; position: absolute; width: 100%;  }
.tooltip_templates { display: none; }
.dot { cursor: pointer; }

.company {
	background: #fff;
	border: 1px solid #000;
	font-size: .875em; /* 14px */
	overflow: hidden;
	padding: 10px;
	width: 220px;
}

.company--2col { width: 480px; }
.company--3col { width: 720px; }
.company :first-child { margin-top: 0; }
.company :last-child { margin-bottom: 0; }


/* =========================
   map legend
   ========================= */

.map-legend { display: none; left: 0; position: absolute; top: 0; }
.map-legend :first-child { margin-bottom: 5px; margin-top: 0; }
.list-legend { list-style: none; margin: 0; padding: 0; }
.list-legend__item { margin: 0 0 5px 0; padding: 0 0 0 20px; }
.list-legend__item--pink { background: url('/img/dot--pink.svg') no-repeat 0 1px;  }
.list-legend__item--yellow { background: url('/img/dot--yellow.svg') no-repeat 0 1px;  }
.list-legend__item--blue { background: url('/img/dot--blue.svg') no-repeat 0 1px;  }
.list-legend__item--green { background: url('/img/dot--green.svg') no-repeat 0 1px;  }
.list-legend__item--red { background: url('/img/dot--red.svg') no-repeat 0 1px;  }
.list-legend__item--brown { background: url('/img/dot--brown.svg') no-repeat 0 1px;  }


/* =========================
   list on home
   ========================= */

.list-box { list-style: none; margin: 0; padding: 0; }
.list-box__item { margin: 0 0 20px 0; padding: 0 0 0 35px; }
.list-box__item--1 { background: url('/img/box--1.svg') no-repeat 0 0;  }
.list-box__item--2 { background: url('/img/box--2.svg') no-repeat 0 0;  }
.list-box__item--3 { background: url('/img/box--3.svg') no-repeat 0 0;  }
.list-box__item--4 { background: url('/img/box--4.svg') no-repeat 0 0;  }
.list-box__item--5 { background: url('/img/box--5.svg') no-repeat 0 0;  }
.list-box__item--6 { background: url('/img/box--6.svg') no-repeat 0 0;  }
.list-box__item--7 { background: url('/img/box--7.svg') no-repeat 0 0;  }
.list-box__item--8 { background: url('/img/box--8.svg') no-repeat 0 0;  }
.list-box__item--9 { background: url('/img/box--9.svg') no-repeat 0 0;  }
.list-box__item--10 { background: url('/img/box--10.svg') no-repeat 0 0;  }
.list-box__item--11 { background: url('/img/box--11.svg') no-repeat 0 0;  }
.list-box__item--12 { background: url('/img/box--12.svg') no-repeat 0 0;  }
.list-box__item--13 { background: url('/img/box--13.svg') no-repeat 0 0;  }
.list-box__item--14 { background: url('/img/box--14.svg') no-repeat 0 0;  }
.list-box__item--15 { background: url('/img/box--15.svg') no-repeat 0 0;  }


/* =========================
   tooltipster jQuery-plugin
   overrides
   ========================= */

.tooltipster-sidetip .tooltipster-content {
	color: #000 !important;
	padding: 0 !important;
}

.tooltipster-sidetip .tooltipster-box {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
}


/* ==================================================
   banner
   ================================================== */

.banner {
	background: #e6e6e6;
	bottom: 50%;
	display: none;
	font-size: .875em; /* 14px */
	right: 50%;
	padding: 20px 30px;
	position: fixed;
	transform: translate(50%, 50%);
	width: 100%;
	z-index: 9;
}

.banner--closed {
	background: #e6e6e6;
	bottom: auto;
	right: 0;
	top: calc( 100% - 40px);
	transform: translate(0,0);
	width: 60px;
}

.banner__toggle--close {
	background: url('/img/banner-close.svg') no-repeat center center;
	background-size: 11px;
	display: inline-block;
	cursor: pointer;
	float: right;
	height: 11px;
	margin: -20px -30px 0 0;
	padding: 20px;
	width: 11px;
}

.banner__toggle--open {
	background: url('/img/banner-open--steinbruchtag.svg') no-repeat center center;
	background-size: auto 30px;
	display: inline-block;
	cursor: pointer;
	float: right;
	height: 40px;
	margin: -20px -30px 0 0;
	padding: 10px;
	width: 60px;
}

.banner__content { margin-top: 20px; }
.banner__img { margin-bottom: 20px; }
p.banner__text { margin: 0; }
.banner__link * { color: #000; }













/* ==========================================================================
   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;
}