@font-face {
    font-family: "nimbus-sans";
    src: url("../fonts/NimbusSansT-BoldCondensed.woof2") format("woff"), url("../fonts/NimbusSansT-BoldCondensed.woff2")  format("truetype"),
    src: url("../fonts/NimbusSansT-BoldCondensed.otf") format("opentype");
}




/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%; height: auto;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

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

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

table {font-size: inherit; font: 100%;}

/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */
textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Apply box sizing to some input elements so percentage width and other measures work together */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=date],
input[type=time],
input[type=url],
textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {/*filter: expression(document.execCommand("BackgroundImageCache", false, true));*/}

/* =============================================================================
   Code
   ========================================================================== */
/**
 * Redeclare monospace font family: h5bp.com/j
 */
pre,
code,
kbd,
samp {
  font: 1em Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
  color: #009933;
}
pre {
  /* Blue stribes to make it look like paper */

  background-color: #fefefe;
  background-image: -moz-linear-gradient(to top, #e2f1f7 1px, transparent 1px);
  background-image: -ms-linear-gradient(to top, #e2f1f7 1px, transparent 1px);
  background-image: -webkit-linear-gradient(to top, #e2f1f7 1px, transparent 1px);
  background-image: -o-linear-gradient(to top, #e2f1f7 1px, transparent 1px);
  background-image: linear-gradient(to top, #e2f1f7 1px, transparent 1px);
  background-size: 100% 26px;
  box-shadow: inset 0 1px 1px #ffffff, 0 0 15px rgba(204, 204, 204, 0.35);
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  color: #222222;
  font-size: 14px;
  line-height: 26px;
  padding: 26px 25px;
  margin: 0 0 25px;
  position: relative;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre code {
  background: none;
  color: inherit;
  font: inherit;
}
pre ol.linenums {
  line-height: 26px;
}
/**
 * Line numbering for the Google Prettify script
 */
/* Add to red stribes to make it look like a notebook */
pre[class*="linenums"]:before {
  border: 1px solid #f1e9ea;
  border-width: 0 1px;
  content: "";
  width: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50px;
  z-index: 1;
}
ol.linenums {
  color: #aeaeae;
  margin: 0 0 0 0;
  padding: 0 0 0 24px;
}
ol.linenums li {
  padding-left: 24px;
}
/*  Google Code Prettify */
.pln {
  color: #000;
}
.str {
  color: #008800;
}
.kwd {
  color: #000088;
}
.com {
  color: #880000;
}
.typ {
  color: #660066;
}
.lit {
  color: #006666;
}
.pun,
.opn,
.clo {
  color: #666600;
}
pre .tag {
  color: #000088;
}
.atn {
  color: #660066;
}
.atv {
  color: #008800;
}
.dec,
.var {
  color: #660066;
}
.fun {
  color: #ff0000;
}

/**
 * Simple grid system
 * @credits Twitter Bootstrap
 */
.row {
  width: 100%;
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
}
.row:after {
  clear: both;
}
.row [class*="span"] {
  float: left;
  margin-left: 2.127659574%;
  *margin-left: 2.0744680846382977%;
}
.row [class*="span"]:first-child {
  margin-left: 0;
}
.row .span12 {
  width: 99.99999998999999%;
  *width: 99.94680850063828%;
}
.row .span11 {
  width: 91.489361693%;
  *width: 91.4361702036383%;
}
.row .span10 {
  width: 82.97872339599999%;
  *width: 82.92553190663828%;
}
.row .span9 {
  width: 74.468085099%;
  *width: 74.4148936096383%;
}
.row .span8 {
  width: 65.95744680199999%;
  *width: 65.90425531263828%;
}
.row .span7 {
  width: 57.446808505%;
  *width: 57.3936170156383%;
}
.row .span6 {
  width: 48.93617020799999%;
  *width: 48.88297871863829%;
}
.row .span5 {
  width: 40.425531911%;
  *width: 40.3723404216383%;
}
.row .span4 {
  width: 31.914893614%;
  *width: 31.8617021246383%;
}
.row .span3 {
  width: 23.404255317%;
  *width: 23.3510638276383%;
}
.row .span2 {
  width: 14.89361702%;
  *width: 14.8404255306383%;
}
.row .span1 {
  width: 6.382978723%;
  *width: 6.329787233638298%;
}

/* =============================================================================
   Alert messages, taken from http://jayj.dk/a-free-html5-and-css3-theme
   ========================================================================== */
.alert {
  background-color: #ededed;
  border-left: 5px solid #d9d9d9;
  border-radius: 0 5px 5px 0;
  color: #222222;
  padding: 10px 14px;
  margin-bottom: 25px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert h4 {
  border-bottom: 0;
  color: inherit;
  padding-bottom: 0;
  margin: 10px 0;
}
.alert p + p {
  margin-bottom: 5px;
}
.alert-warning {
  background-color: #fef9c7;
  border-color: #fcdd4a;
  color: #3b3601;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #54b646;
  color: #0d370d;
}
.alert-danger,
.alert-error {
  background-color: #f2dede;
  border-color: #ce838f;
  color: #7a0b0a;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #049cdb;
  color: #0c3346;
}

/* =============================================================================
   Lists: http://jayj.dk/a-free-html5-and-css3-theme/
   ========================================================================== */
ul,
ol {
  line-height: 1.5;
  margin: 1em 0;
  padding: 0 0 0 1.25em;
}
ul {
  list-style: square;
}
ol {
  list-style-type: decimal;
}
ol ol {
  list-style: upper-roman;
}
ol ol ol {
  list-style: lower-roman;
}
ol ol ol ol {
  list-style: upper-alpha;
}
ol ol ol ol ol {
  list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
  margin: 10px 0;
}











/* ==|== primary styles =====================================================
   Author: info@sah-company.com for DBMK Designbureau
   ========================================================================== */

html, body {
	width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
}

body {
	font-family: 'Helvetica', sans-serif;
	font-style: normal;
	font-weight: 300;
  font-size: 18px;
	line-height: 1.33;
	color: rgb(152, 159, 149);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/**
 * Use this, if you want a fixed width header centered
 */
/*
#wrapper-header {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 120px;
	z-index: 1000;
	background-image: url(/upload/sm-verlauf-header-1x108.png);
	background-repeat: repeat-x;
	background-color: white;
}
*/

/**
 * Use this, if you want a header using full browser window width
 */

#wrapper-header {
}


/**
 * header that strechtes browser window
 * Either use this or the second variant (together with #wrapper-header above)
 */

header {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 120px;
	z-index: 1000;
}

/**
 * header with fixed width, centered
 * Use this together with #wrapper-header
 */
/*
header {
	position: relative;
	width: 1024px;
	height: 120px;
	margin: 0 auto;
}
*/

header h1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 120px;
	/*background-image: url(/upload/sm-verlauf-header-1x108.png);
	background-repeat: repeat-x;*/
	background-color: white;
}

header h1 a {
	background-image: url(/upload/logo-sondermann-moeller.svg);
	background-position: right center;
	position: absolute;
	top: 24px;
	right: 72px;
	width: 240px;
	height: 70px;
}

#wrapper {
	margin-top: 120px;
	min-height: calc(100vh - 120px);
}

body#index #wrapper {
	background-image: url(/upload/index-background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.infobox {
	display: none;
	background-color: white;
	background-image: url(/upload/sm-schliessen-icon.svg);
	background-position: 98% 12px;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	border-bottom: 4px solid rgb(250, 184, 66);
	position: absolute;
	color: rgb(152, 159, 149);
	padding: 24px;
	z-index: 999;
}
.infobox:hover {
	cursor: pointer;
}

/**
 * No slicknav by default.
 */
.slicknav_menu {
 	display: none;
}

/**
 * Main navigation
 */
ul.main-navigation {
	position: absolute;
	top: 24px;
	left: 24px;
	padding: 0;
	margin: 0;
	width: calc(100% - 336px);
	height: 48px;
	background-color: transparent;
	list-style: none;
}

ul.main-navigation > li {
	display: inline;
	float: left;
}

ul.main-navigation > li > a {
	font-family: "nimbus-sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	display: block;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(152, 159, 149);
	font-size: 1.125rem;
	line-height: 48px;
	padding: 0 24px;
	letter-spacing: 1px;
	transition: color 0.666s;
}

ul.main-navigation > li > a:hover,
body#profile li.domain-32 a,
body#project li.domain-33 a,
body#detail li.domain-33 a,
body#portfolio li.domain-34 a,
body#testimonial li.domain-35 a,
body#contact li.domain-36 a,
body#imprint li.domain-38 a,
body#legal li.domain-39 a,
body#contact li.domain-42 a {
	color: rgb(250, 184, 66);
}

/* dont show 2nd level on desktop */
ul.main-navigation li ul {
	display: none;
}

/**
 * CURRENTLY NOT USED!
 * 2nd level navigation within main navigation.
 *
 * This was not worked out further because the requirement
 * said we had to fix the top level navigation item, but scroll
 * the second level as well as have them in the sitemap when showing
 * a mobile menu. The 2nd level menus are now generated by two modules
 * and in the desktop the ul is not shown, while on mobile it is.
 */

/*
ul.main-navigation li ul {
	display: none;
}

body#profile ul.main-navigation li ul,
body#portfolio ul.main-navigation li ul {
	display: block;
	position: absolute;
	top: 120px;
	left: 0;
}

ul.main-navigation li ul li {
	display: inline-block;
	width: calc(25% - 24px);
	width: auto;
	margin-right: 24px;
	margin-bottom: 24px;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.main-navigation li ul li:nth-child(5) {
	clear: left;
}

ul.main-navigation li ul li a {
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 12px 12px;
	font-family: 'nimbus-sans', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: rgb(152, 159, 149);
	text-transform: uppercase;
	border: 1px solid rgb(152, 159, 149);
	background-color: white;
	letter-spacing: 1px;
	transition: all 0.666s;
}

ul.main-navigation li ul li a:hover,
ul.main-navigation li ul li a.active {
	border: 1px solid rgb(250, 184, 66);
	color: rgb(250, 184, 66);
}
*/

/**
 * Helpers
 */

strong, em {
	font-family: "nimbus-sans", "Helvetica", sans-serif;
	font-style: normal;
	font-weight: 400;
}

#content .divider {
	clear: both;
	padding-top: 156px;
}

/* Styling content */

#content {
	padding: 0 24px 156px 24px;
	font-size: 1rem;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	font-family: "nimbus-sans", "Helvetica", sans-serif;
	font-weight: 400;
	color: rgb(152, 159, 149);
	letter-spacing: 1px;
	font-size: 1.125rem;
}

#content p,
#content ul,
#content ol {
	font-family: "Helvetica", sans-serif;
	font-weight: 400;
	color: rgb(152, 159, 149);
	margin-bottom: 24px;
}

body#imprint #content p,
body#imprint #content ul,
body#imprint #content ol,
body#legal #content p,
body#legal #content ul,
body#legal #content ol {
	width: 60%;
}

#content a {
	color: rgb(250, 184, 66);
	text-decoration: none;
}

#content a:hover {
	border-bottom: 1px solid rgb(250, 184, 66);
}

/* Footer */
footer {
    background-color: white;
    color: rgb(152, 159, 149);
    position: relative;
    font-family: "nimbus-sans", "Helvetica", sans-serif;
    font-style: normal;
    font-weight: 400;
    border-bottom: 4px solid rgb(250, 184, 66);
}

/**
 * Isotope
 */

#projects-container a.item {
	display: block;
	text-decoration: none;
	background-color: white;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border: none;

}

#projects-container a.item:hover {
	text-decoration: none;
	border: none;
}

#projects-container a.item img {
	width: 100%;
	height: 100%;
}

.item .project-hover-info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: table;
	visibility: hidden;
	opacity: 0;
	transition: visibilty 0.666s, opacity 0.666s;
}

.item:hover .project-hover-info {
	background-color: rgba(152, 159, 149, .66);
	visibility: visible;
	opacity: 1;
	width: 100%;
	height: 100%;
}

#content a.item h2 {
	font-family: 'nimbus-sans', "Helvetica", sans-serif;
	font-weight: 300;
	font-size: 0.875rem;
	color: white;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

#content a.item.big h2 {
}

/**
 * Isotope filter stuff
 */

#filters {
	padding-bottom: 24px;
	border-bottom: 1px solid rgb(152, 159, 149);
	margin-bottom: 24px;
}

/* initially empty */
#filters #cat-box {
	display: block;
	margin-top: 48px;
}

#filters button {
	font-family: "nimbus-sans", "Helvetica", sans-serif;
	border: 0;
	font-size: 1.125rem;
	font-weight: 400;
	padding: 0;
	margin: 0;
	text-align: left;
	outline: none;
	background: none;
	letter-spacing: 1px;
	transition: all 0.666s;
}

#filters button.selector {
	color: rgb(152, 159, 149);
	width: 25%;
	float: left;
	margin-bottom: 12px;
}

#filters button.selector:hover,
#filters button.selector.active {
	color: rgb(250, 184, 66);
}

#filters .bar {
	width: 100%;
}

#filters .bar button,
#current-filter-text {
	color: rgb(152, 159, 149);
	text-transform: uppercase;
	line-height: 24px;
}

#filters .bar button {
	float: left;
}

#current-filter-text {
	font-family: "nimbus-sans", "Helvetica", sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: right;
	float: right;
}

#filters button#toggle-the-cat {
	color: rgb(152, 159, 149);
	background-image: url(/upload/sm-oeffnen-icon.svg);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	padding-right: 18px;
	transition: all 0.666s;
}

#filters button#toggle-the-cat:hover,
#filters button#toggle-the-cat.active {
	color: rgb(250, 184, 66);
}


#filters button#toggle-the-cat.active {
	background-image: url(/upload/sm-schliessen-icon.svg);
}

/**
 * Testimonial / Referenzen
 */

#testimonial #content {
	column-count: 2;
}

#testimonial h1 {
	font-family: 'nimbus-sans', "Helvetica", sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.5;
	letter-spacing: 1px;
}

#testimonial ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1.5;
}

/**
 * 2nd level navigation with modules.
 */

#content ul#nav-on-page {
	list-style: none;
	padding: 12px 24px;
	margin: 0 0 0 -24px;
	width: 100%;
	background-color: rgb(233, 233, 233);
}

#content ul#nav-on-page li {
	display: inline-block;
	width: auto;
	margin: 12px 24px 12px 0;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

#content ul#nav-on-page li:nth-child(5) {
	clear: left;
}

#content ul#nav-on-page a {
	display: block;
	text-align: center;
	padding: 12px 12px;
	font-family: 'nimbus-sans',  "Helvetica", sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	color: rgb(152, 159, 149);
	text-transform: uppercase;
	border: 1px solid rgb(152, 159, 149);
	background-color: white;
	letter-spacing: 1px;
	transition: all 0.666s;
}

#content ul#nav-on-page a:hover,
#content ul#nav-on-page a.active,
#content ul#nav-on-page li.active a {
	border: 1px solid rgb(250, 184, 66);
	color: rgb(250, 184, 66);
}

/* Portfolio and profile boxes */

#content .merit,
#content .box {
	width: 100%;
	margin-top: 24px;
	margin-bottom: 24px;
	padding: 12px 0;
}

/* apply the .clearfix implicit */
#content .merit:before, #content .merit:after { content: ""; display: table; }
#content .merit:after { clear: both; }
#content .merit { *zoom: 1; }

#content .box:before, #content .box:after { content: ""; display: table; }
#content .box:after { clear: both; }
#content .box { *zoom: 1; }

#content .merit h2,
#content .box h2,
#content .divider h2 {
	font-family: 'nimbus-sans',  "Helvetica", sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	margin: 1rem 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#content .merit img,
#content .box img {
	float: left;
	width: 50%;
	margin-right: 48px;
	margin-bottom: 24px;
}

#content .merit:nth-child(odd) {
	background-color: rgb(244, 244, 244);
	width: 100%;
	padding: 24px;
	margin-left: -24px;
}

#content .merit:nth-child(odd) img,
#content .box:nth-child(even) img {
	float: right;
	margin-right: 0;
	margin-left: 48px;
}

/**
 * Project detail page.
 */

#content .project-detail .headline {
	margin-bottom: 48px;
}

#content .project-detail h1 {
	font-family: 'nimbus-sans',  "Helvetica", sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 1px;
}

#content .project-intro {
	margin-bottom: 24px;
}

/* container for the hero image */
#content .project-intro .hero {
	width: calc(66.6% - 24px);
	margin-right: 24px;
	float: left;
}

/* container of project specs */
#content .project-intro .sedcard {
	width: calc(33.3% - 24px);
	float: left;
	border-top: 2px solid rgb(250, 184, 66);
	border-bottom: 2px solid rgb(250, 184, 66);
	padding-top: 24px;
}


#content .project-gallery .item {
	display: block;
	text-decoration: none;
	background-color: white;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border: none;

}

#content .project-gallery .item {
	position: relative;
	width: calc(33.3% - 24px);
	height: 0px;
	/*padding-bottom: 75%;*/
	margin-bottom: 24px;
	float: left;
	margin-right: 24px;
}

/**
 * Accordion styles 
 * 
 * @see https://codepen.io/raubaca/pen/PZzpVe
 * 
 */
.tab>input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}


.tabs {
  margin-top: 1rem;
  border-radius: 0;
  overflow: hidden;
}

.tab {
  width: calc(100% - 2px);
  border: 1px solid gray;
  overflow: hidden;
  margin-bottom: 1rem;
  width: 60%;
}
.tab-label {
  display: flex;
  justify-content: space-between;
  font-size: 1.5rem;
  padding: 1rem;
  font-weight: bold;
  cursor: pointer;
  color: rgb(34, 34, 34);
  /* Icon */
}
.tab-label:hover {
}
.tab-label::after {
  content: "+";
  color: rgb(250, 184, 66);
  width: 1rem;
  height: 1rem;
  text-align: center;
}
.tab-content {
  max-height: 0;
  height: 0;
  padding: 0 1rem 0 1rem;
  transition: all 0.35s;
}
.tab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  font-size: 0.75em;
  cursor: pointer;
}
.tab-close:hover {
}

.tab>input:checked + .tab-label {
}
.tab>input:checked + .tab-label::after {
  content: "—";
}
.tab>input:checked ~ .tab-content {
  height: auto;
  max-height: 100vh;
  padding: 1rem;
}

/**
 * Slicknav.
 */
.slicknav_menu {
	font-family: 'nimbus-sans',  "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 1.125rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2000;
	background: transparent;
	width: 100%;
}

.slicknav_btn {
	background-color: transparent;
}

ul.slicknav_nav {
	margin-top: 95px;
	background: rgb(152, 159, 149);
	font-size: 1rem;
	height: calc(100vh - 100px);
	overflow-y: scroll;
	padding-bottom: 48px;
}

ul.slicknav_nav li {
	width: 80%;
}

.slicknav_nav .slicknav_row:hover {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background: inherit;
	color: inherit;
}

.slicknav_nav a:hover {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background: inherit;
	color: inherit;
}

/* using local fonts? make sure to read up on Paul Irish's
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #222;}

a {color: #333;} /*#03f*/
a:hover {color: #666;} /*#69f*/

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
/*a:link {-webkit-tap-highlight-color: #fcd700;}*/

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}



/* Rounded gravatar: A background-image tag in html */
.circular {
	width: 72px;
	height: 72px;
	border-radius: 36px;
	-webkit-border-radius: 36px;
	-moz-border-radius: 36px;
	background: url(/img/glyphicons/glyphicons_003_user.png) center center;
	background-repeat: no-repeat;
	background-color: white; /* stanze */
    -webkit-box-shadow: 0px 1em 1em rgba(0, 0, 0, .66);
}

.circular .circular-48 {
	width: 48px;
	height: 48px;
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
}

.circular .circular-32 {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
}

.circular .circular-16 {
	width: 16px;
	height: 16px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.no-shadow {
    -webkit-box-shadow: none;
}











/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {

	img, object, embed {
		min-width: 100%;
	}

	header {
		position: fixed;
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100px;
		z-index: 1000;
	}

	header h1 {
		height: 100px;
	}

	header h1 a {
		background-image: url(/upload/logo-sondermann-moeller.svg);
		background-position: center;
		top: 10px;
		left: calc(50% - 120px);
		width: 240px;
		height: 60px;
		z-index: 2002;
	}

	#wrapper {
		margin-top: 100px;
		min-height: auto;
	}

	body#index #content {
		min-height: 41vh;
	}

	.infobox {
		top: 148px;
		left: 24px;
		right: 24px;
	}

	ul.main-navigation,
	ul#nav-on-page,
	#filters {
		display: none;
	}

	.slicknav_menu {
		display: block;
		overflow-y: scroll;
	}

	body#imprint #content p,
	body#imprint #content ul,
	body#imprint #content ol,
	body#legal #content p,
	body#legal #content ul,
	body#legal #content ol {
		width: 100%;
	}

	#content h2::before {
		display: block;
	    content: " ";
	    margin-top: -100px;
	    height: 100px;
	    visibility: hidden;
	}

	/**
	 * Profile
	 */

	#content .team {
		width: 100%;
		margin-right: 0;
		float: none;
	}

	#content .ceo {
		width: 100%;
		margin-right: 0;
		float: none;
	}

	#content .ceo img {
		width: 100%;
		margin-right: 0;
		margin-bottom: 24px;
		float: none;
	}

	/**
	 * Isotope items, spacers and gutters.
	 */
	.item-sizer,
	.item {
		position: relative;
		width: 100%;
		height: 0px;
		margin-bottom: 24px;
	}

	.item {
		float: none;
	}

	.item.big {
		width: 100%;
	}

	.gutter-sizer {
		width: 24px;
	}

	/**
	 * Testimonial.
	 */
  #testimonial #content {
    column-count: 1;
    margin-bottom: 24px;
  }

	/**
	 * Location / Standorte
	 */

	#content .facility {
		width: 100%;
		float: none;
		margin-bottom: 24px;
	}

	#content .facility img {
		float: none;
		margin-right: 0;
		margin-bottom: 24px;
	}

	#content .facility h2 {
		margin-top: 12px;
	}

	#content .facility h2,
	#content .facility h3 {
		line-height: 1;
		font-size: 1.25rem;
	}

	/* container for the hero image */
	#content .project-intro .hero {
		width: 100%;
		margin-right: 0;
		margin-bottom: 24px;
		float: none;
	}

	/* container of project specs */
	#content .project-intro .sedcard {
		width: 100%;
		float: none;
		margin-bottom: 24px;
	}

	#content .project-gallery .item {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	footer #whatwedo {
	    padding: 0;
	    margin: 0;
	    width: 100%;
	    padding: 24px 0;
	    background-color: rgb(152, 159, 149);
	}

	footer #whatwedo ul {
	    padding: 0;
	    margin: 0;
	    text-align: center;
	    list-style: none;
	}

	footer #whatwedo ul li {
	    display: block;
	    font-family: "nimbus-sans",  "Helvetica", sans-serif;
	    font-style: normal;
	    font-weight: 400;
	    font-size: 1.5rem;
	    text-transform: uppercase;
	    color: white;
	    letter-spacing: 1px;
	}

	footer #lastupdate,
	footer #whoweare {
		margin: 0;
		padding: 0;
		text-align: center;
		margin: 12px 0;
	}

	/* Footer navigation */
	footer ul.footer-navigation {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	footer ul.footer-navigation li {
		text-align: center;
	}

	footer ul.footer-navigation li a {
		font-family: "nimbus-sans",  "Helvetica", sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 0.875rem;
		text-transform: uppercase;
		text-decoration: none;
		color: rgb(152, 159, 149);
		letter-spacing: 1px;
		transition: color 0.666s;
		display: inline-block;
		line-height: 20px;
	}

	footer ul.footer-navigation li a:hover {
		color: rgb(250, 184, 66);
	}

  .tab {
    width: calc(100% - 2px);
  }

}

@media screen and (min-width: 400px) and (max-width: 925px) {

	img, object, embed {
		min-width: 100%;
	}

	header {
		position: fixed;
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100px;
		z-index: 1000;
	}

	header h1 {
		height: 100px;
	}

	header h1 a {
		background-image: url(/upload/logo-sondermann-moeller.svg);
		background-position: center;
		top: 10px;
		left: calc(50% - 120px);
		width: 240px;
		height: 60px;
		z-index: 2002;
	}

	.slicknav_menu {
		display: block;
		overflow-y: scroll;
	}

	ul.main-navigation,
	ul#nav-on-page,
	#filters {
		display: none;
	}

	#wrapper {
		margin-top: 100px;
		min-height: auto;
	}

	body#index #content {
		min-height: 41vh;
	}

	#content h2::before {
		display: block;
	    content: " ";
	    margin-top: -100px;
	    height: 100px;
	    visibility: hidden;
	}

	.infobox {
		top: 148px;
		left: 24px;
		right: 24px;
	}

	body#imprint #content p,
	body#imprint #content ul,
	body#imprint #content ol,
	body#legal #content p,
	body#legal #content ul,
	body#legal #content ol {
		width: 100%;
	}

	/**
	 * Profile
	 */

	#content .team {
		width: 100%;
		margin-right: 0;
		float: none;
	}

	#content .ceo {
		width: 100%;
		margin-right: 0;
		float: none;
	}

	#content .ceo img {
		width: 100%;
		margin-right: 0;
		margin-bottom: 24px;
		float: none;
	}

	/**
	 * Isotope items, spacers and gutters.
	 */
	.item-sizer,
	.item {
		position: relative;
		width: 100%;
		height: 0px;
		margin-bottom: 24px;
	}

	.item {
		float: none;
	}

	.item.big {
		width: 100%;
	}

	.gutter-sizer {
		width: 24px;
	}

	/**
	 * Testimonial.
	 */
	#content .testimonial {
		width: 100%;
		float: none;
		margin-bottom: 24px;
	}

	/**
	 * Location / Standorte
	 */

	#content .facility {
		width: 100%;
		float: none;
		margin-bottom: 24px;
	}

	#content .facility img {
		float: none;
		margin-right: 0;
		margin-bottom: 24px;
	}

	#content .facility h2 {
		margin-top: 12px;
	}

	#content .facility h2,
	#content .facility h3 {
		line-height: 1;
		font-size: 1.25rem;
	}

	/* container for the hero image */
	#content .project-intro .hero {
		width: 100%;
		margin-right: 0;
		margin-bottom: 24px;
		float: none;
	}

	/* container of project specs */
	#content .project-intro .sedcard {
		width: 100%;
		float: none;
		margin-bottom: 24px;
	}

	#content .project-gallery .item {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	footer #whatwedo {
	    padding: 0;
	    margin: 0;
	    width: 100%;
	    padding: 24px 0;
	    background-color: rgb(152, 159, 149);
	}

	footer #whatwedo ul {
	    padding: 0;
	    margin: 0;
	    text-align: center;
	    list-style: none;
	}

	footer #whatwedo ul li {
	    display: block;
	    font-family: "nimbus-sans",  "Helvetica", sans-serif;
	    font-style: normal;
	    font-weight: 400;
	    font-size: 1.5rem;
	    text-transform: uppercase;
	    color: white;
	    letter-spacing: 1px;
	}

	footer #lastupdate,
	footer #whoweare {
		margin: 0;
		padding: 0;
		text-align: center;
		margin: 12px 0;
	}

	/* Footer navigation */
	footer ul.footer-navigation {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	footer ul.footer-navigation li {
		text-align: center;
	}

	footer ul.footer-navigation li a {
		font-family: "nimbus-sans",  "Helvetica", sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 0.875rem;
		text-transform: uppercase;
		text-decoration: none;
		color: rgb(152, 159, 149);
		letter-spacing: 1px;
		transition: color 0.666s;
		display: inline-block;
		line-height: 20px;
	}

	footer ul.footer-navigation li a:hover {
		color: rgb(250, 184, 66);
	}

  .tab {
    width: calc(100% - 2px);
  }

}

@media screen and (min-width: 926px) {

	/**
	 * Profile
	 */

	#content .team {
		width: calc(50% - 24px);
		margin-right: 24px;
		float: left;
	}

	#content .ceo {
		width: calc(50% - 24px);
		margin-right: 24px;
		float: left;
	}

	#content .ceo img {
		width: 100%;
		margin-right: 24px;
		float: left;
	}

	/**
	 * Isotope items, spacers and gutters.
	 */
	.item-sizer,
	.item {
		position: relative;
		width: calc(50% - 24px);
		height: 0px;
		/*padding-bottom: 75%;*/
		margin-bottom: 24px;
	}

	.item {
		float: left;
	}

	.item.big {
		width: calc(100% - 24px);
	}

	.gutter-sizer {
		width: 24px;
	}

	/**
	 * Location / Standorte
	 */

	#content .facility {
		width: 100%;
		float: left;
		margin-bottom: 24px;
	}

	#content .facility img {
		float: left;
		margin-right: 24px;
	}

	#content .facility h2 {
		margin-top: 12px;
	}

	#content .facility h2,
	#content .facility h3 {
		line-height: 1;
		font-size: 1.25rem;
	}

	/* Footer */
	body#index footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	footer #whatwedo {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 72px;
		padding-top: 24px;
		background-color: rgb(152, 159, 149);
	}

	footer #whatwedo ul {
		padding: 0;
		margin: 0;
		text-align: center;
		list-style: none;
	}

	footer #whatwedo ul li {
		display: inline-block;
		font-family: "nimbus-sans",  "Helvetica", sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 1.5rem;
		text-transform: uppercase;
		color: white;
		letter-spacing: 1px;
	}

	footer #whatwedo ul li:after {
		content: ' + ';
		color: rgb(250, 184, 66);
	}

	footer #whatwedo ul li:last-child:after {
		content: '';
	}

	/* Footer navigation */
	footer ul.footer-navigation {
		padding: 0;
		margin: 0;
		list-style: none;
		text-align: center;
	}

	footer ul.footer-navigation li {
		display: inline-block;
	}

	footer ul.footer-navigation li a {
		font-family: "nimbus-sans",  "Helvetica", sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 0.875rem;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0 12px;
		line-height: 48px;
		color: rgb(152, 159, 149);
		letter-spacing: 1px;
		transition: color 0.666s;
	}

	footer ul.footer-navigation li a:hover,
	body#imprint li.domain-38 a,
	body#legal li.domain-39 a,
	body#contact li.domain-42 a {
		color: rgb(250, 184, 66);
	}

	footer #lastupdate {
		position: absolute;
		bottom: 12px;
		left: 48px;
		line-height: 24px;
	}

	footer #whoweare {
		position: absolute;
		bottom: 12px;
		right: 48px;
		line-height: 24px;
	}

}

/**
 * Full desktop screen.
 */
@media screen and (min-width: 1024px) {

	/**
	 * Profile
	 */

	#content .team {
		width: calc(20% - 24px);
		margin-right: 24px;
		float: left;
	}

	#content .ceo {
		width: calc(50% - 24px);
		margin-right: 24px;
		float: left;
	}

	#content .ceo img {
		width: 37.41%;
		margin-right: 24px;
		float: left;
	}

	/**
	 * Isotope items, spacers and gutters.
	 */
	.item-sizer,
	.item {
		position: relative;
		width: calc(25% - 24px);
		height: 0px;
		/*padding-bottom: 75%;*/
		margin-bottom: 24px;
	}

	.item {
		float: left;
	}

	.item.big {
		width: calc(50% - 24px);
	}

	.gutter-sizer {
		width: 24px;
	}

	.infobox {
		top: calc(50% - 120px);
		right: 24px;
		width: 568px;
		height: 176px;
	}

	/**
	 * Location / Standorte
	 */

	#content .facility {
		width: 50%;
		float: left;
	}

	#content .facility img {
		float: left;
		margin-right: 24px;
	}

	#content .facility h2 {
		margin-top: 12px;
	}

	#content .facility h2,
	#content .facility h3 {
		line-height: 1;
		font-size: 1.25rem;
	}

}