/* https://wirk-stoff.ch/ 
   v2.0 | 12/02/19 */

/* html {
    overflow: scroll; /* Scrollbalken ausblenden 
    overflow-x: hidden;
} */

.body {
  overflow: hidden;
}

em {
	 font-family: 'Roboto Slab', serif;
}

strong {
	 font-weight: 700;
}

/* Headings / Überschrift (Konzentrat / Rubrik)
-------------------------------------------------------------------------------- */

h1 {
	 font-size: 3.75em;
     line-height: 1em;
	 font-weight: normal;
	 margin: 0 0 1.5em 0;
	 text-transform: lowercase;
	 letter-spacing: 3px;
	 text-align: center;
}

h2 { 
	 font-size: 1.875em;
	 line-height: 1em;
	 font-weight: normal;
	 margin: 3em 0;
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 text-align: center;
}

h3 {
	 font-size: 1.5em;
	 line-height: 1.25em;
	 font-weight: light;
	 font-family: 'Roboto Slab', serif;
	 margin: 0 0 0 0;
}

h1.bg-line:before {
	 border-top: 1px solid #d4d4d4;
	 content: "";
	 display: inline-block;
	 position: relative;
	 vertical-align: middle;
	 width: 50%;
	 margin-left: -50%;
	 right: 1em;
}

h1.bg-line:after {
	 border-top: 1px solid #d4d4d4;
	 content: "";
	 display: inline-block;
	 position: relative;
	 vertical-align: middle;
	 width: 50%;
	 left: 1em;
	 margin-right: -50%;
}

h2.bg-line:before { /* Linie links vor E-Mail Adresse */
	 border-top: 1px solid #d4d4d4;
	 content: "";
	 display: inline-block;
	 position: relative;
	 vertical-align: middle;
	 width: 50%;
	 margin-left: -50%;
	 right: 1em;
}

h2.bg-line:after { /* Linie rechts vor E-Mail Adresse */
	border-top: 1px solid #d4d4d4;
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 50%;
	margin-right: -50%;
	left: 1em;
}

h1.bg-line { /* E-Mail Adresse */
	overflow: hidden;
	font-family: 'Roboto Slab', serif;
	font-size: 1.5em; /* Schriftgrösse E-Mail Adresse / Laptop */
	line-height: 2em;
	margin: 0;
}

/* Links
-------------------------------------------------------------------------------- */
a {
	color: #444;
	text-decoration: none;
	border-bottom: 0px solid #444;
	outline: 0;
}

a:visited {
	color: #444;
	text-decoration: none;
	border-bottom: 1px solid #444;
	outline: 0;
}

a:hover {
	border-bottom: none;
	color: #086A87;
}

a:active {
	border-bottom: none;
}

a:focus {
	border-bottom: none;
}

/* Layout
-------------------------------------------------------------------------------- */
/**
 * 1. Center the content. Yes, that's a bit opinionated.
 * 2. Use `max-width` instead `width`
 * 3. Add padding on the sides.
 */
#wrapper {
    margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 1200px;
  	background-color:#; /* 2 */

    padding-right: 5%; /* 3 */
    padding-left:  5%; /* 3 */
}

/* IMAGE Header / suit-flex-embed v1.4.0 | MIT License | github.com/suitcss
-------------------------------------------------------------------------------- */
.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

.FlexEmbed:before {
  content: "";
  font-family: 'Roboto Slab', serif;
  font-size: 2.7em;
  text-align: center;
  margin: 0 0 0 0;
  padding: 1.5em 0; /* Bild-Abstand von oben */
  background: #;
  color: rgba(000.9);
  clear: both;
  display: block;
  width: 100%;
} 

.FlexEmbed--2by1:before {
/* hight Header-Image */
  padding-bottom: 100%;
}

.CoverImage {
  	background-position: 50%;
  	background-repeat: no-repeat;
  	background-size: cover;
  	margin: auto; /* Bild Position */
  	max-height: 100%;
  	max-width: 540px; /* Bild Grösse */
}

/* Layout Content
-------------------------------------------------------------------------------- */
#content {
  flex: 100%;
  min-height: 400px;
  text-align: center;
  background-color:#;
}
/* #content > h2 {
  color: #e4e4e4; 
} */

/* breakpoint screen / Default 980px / Large Display 1200 (1280px)
-------------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
	#content {
	width: 100%;
}

 /* breakpoint screen / Tablet 768px
-------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	 #content {
	 width: 100%;
}

body {
	 font-size: 90%;
}

h1.bg-line {
	 font-size: 1.25em !important; /* Schriftgrösse Tablet */
}

h2.bg-line {
	 margin: 81px 0px 2em 0px;
}

/* breakpoint screen / Mobile 480px
-------------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	#content {
	width: 100%;
}

body {
	font-size: 80%;
}
	h1.bg-line {
	font-size: 1em !important; /* Schriftgrösse Mobil */
}