/*  
Theme Name: Leben&Bauen
Theme URI: http://www.leben-bauen.de
Description: Template für Leben&Bauen
Author: Bartosz Koschmieder
Author URI:
*/

@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/fonts/icomoon.eot?jrcnp6');
  src:  url('../fonts/fonts/icomoon.eot?jrcnp6#iefix') format('embedded-opentype'),
    url('../fonts/fonts/icomoon.ttf?jrcnp6') format('truetype'),
    url('../fonts/fonts/icomoon.woff?jrcnp6') format('woff'),
    url('../fonts/fonts/icomoon.svg?jrcnp6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*-------------------------------------------------------------------------------------------------- RESET -------------*/

*, html, body, div,
img, ul, footer, figure, header, nav, section, arcticle, aside {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	font-size: 100%;
	background: transparent;
	box-sizing: border-box;
}

html, body, div,
img, ul, footer, figure, header, nav, section, arcticle, aside {
	display: block;
}

h1, h2, h3, h4, h5, h6, strong, span, p, a, li, small, strong, em, th, td, figcaption {
	vertical-align: baseline;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	-ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

h1, h2, h3, h5, h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	/* transition: color .25s, background-color .5s, padding .5s; */
}

span, p, a, li, h4, th, td, time, figcaption {
	font-family: 'Open Sans', sans-serif;
}

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

ul {
	list-style: none;
}

table {
	border: none;
	border-spacing: 0;
	width: 100%;
	margin-bottom: 2rem;
}

a, a:visited, a:link {
	text-de
	coration: none;
	text-decoration: none;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
}

hr {
  width: 100%;
  height: .0625rem;
  background-color: rgba(220,220,220,1);
  margin-bottom: 4rem;
}

.c_key hr {
  background-color: rgba(0,0,0,0);
  border-bottom: dashed 2px rgba(0,0,0,.5);
  border-bottom: dashed 2px white;
  margin-left: auto;
  margin-right: auto;
  animation: fadein_hr 6s cubic-bezier(.25,0,.25,1) infinite;
}

@keyframes fadein_hr {
	0% {width: 0%;}
	16.6667% {width: 100%; }
	92% {opacity: 1; transform: translateY(0rem);}
	100% {opacity: 0; transform: translateY(-2rem);}
}

/*-------------------------------------------------------------------------------------------------- GLOBAL -------------*/


body {
	padding-top: 6.25rem;
}

.single {
	padding: 0;
}

.wrapper {
	width: 92rem;
	height: 100%;
	margin: 0 auto;
	padding: 0 1.25rem;
	position: relative;
	z-index: 100;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

.c_dark {
	background-color: rgba(20,20,20,1);
}

.c_key {
	background-color: rgba(242,185,12,1);
}

.c_medium {
	background-color: rgba(220,220,220,.5);
}

.c_light {
	background-color: rgba(245,245,245,1);
}

.c_white {
	background-color: white;
}

.margin_b_1 {
  margin-bottom: 1rem;
}

.margin_b_2 {
  margin-bottom: 2rem;
}

.margin_t_05 {
  margin-top: .5rem;
}

.margin_t_2 {
  margin-top: 2rem;
}

.margin_b_4 {
  margin-bottom: 4rem;
}

.border_t {
  border-top: solid .25rem rgba(220,220,220,.5);
}

.border_b {
  border-bottom: solid .25rem rgba(220,220,220,.5);
}


h1 {
	font-size: 3rem;
	background-color: rgba(255,255,255,.85);
	display: inline-block;
	padding: .25rem 2rem;
	margin-bottom: .5rem;
	line-height: 3.5rem;
	text-transform: uppercase;
  animation: movein_from_bottom 1s cubic-bezier(.25,0,.25,1) both;
	animation-delay: .25s;
}

#home h1 {
  animation-delay: .75s;
}

h2 {
	font-size: 2rem;
	line-height: 2.75rem;
	background-color: rgba(255,255,255,.85);
	display: inline-block;
	padding: .25rem 1.5rem;
	font-weight: normal;
  animation: movein_from_bottom 1s cubic-bezier(.25,0,.25,1) both;
	animation-delay: .5s;
}

#home h2 {
  animation-delay: 1s;
}

h3 {
	font-size: 2rem;
	line-height: 3rem;
	font-weight: normal;
  margin-bottom: 2rem;
}

.c_dark h3 {
  color: white;
}

h4 {
	font-size: 1.25rem;
	color: rgba(80,80,80,1);
}

.c_key h4 {
  color: rgba(255,255,255,1);
  font-weight: normal;
  background-color: red;
  text-align: center;
  display: inline-block;
  padding: .125rem .5rem;
  animation: movein_from_bottom_6s 6s cubic-bezier(.25,0,.25,1) both infinite;
}

h5 {
	margin-left: 2.75rem;
	font-weight: normal;
	color: rgba(80,80,80,1);
  color: inherit;
}

#Unsere_Partner h5 {
  margin-left: 0;
}

#Unsere_Partner hgroup {
  margin-top: 1rem;
}

#Baugruppe_Rosmarinstrasse_GbR h5 {
  margin: auto;
}

article h5 {
	/* font-size: 1.25rem; */
}

h6 {
	font-size: 1.25rem;
	/* margin-left: 2.75rem; */
	font-weight: normal;
	color: rgba(80,80,80,1);
}

.m_t_4 {
  margin-top: 4rem;
}

.m_b_4 {
  margin-bottom: 4rem;
}

.ani_delay_02 {
  animation-delay: .2s !important;
}

.ani_delay_04 {
  animation-delay: .4s !important;
}

.ani_delay_06 {
  animation-delay: .6s !important;
}

.ani_delay_08 {
  animation-delay: .8s !important;
}

.ani_delay_10 {
  animation-delay: 1s !important;
}

.ani_delay_12 {
  animation-delay: 1.2s !important;
}

.ani_delay_14 {
  animation-delay: 1.4s !important;
}

.ani_delay_16 {
  animation-delay: 1.6s !important;
}

.ani_delay_18 {
  animation-delay: 1.8s !important;
}

.ani_delay_20 {
  animation-delay: 2s !important;
}

/*------------------------------------------------ Icon -------------*/

.icon {
	font-family: icomoon;
	font-size: 2rem;
	line-height: 2rem;
}

.icon_supported_text .icon {
	line-height: 1.5rem;
	position: absolute;
}

#Baugruppe_Rosmarinstrasse_GbR .icon_supported_text .icon {
  font-size: 4rem;
  line-height: 4rem;
  position: relative;
  color: rgba(20,20,20,1);
}

#Baugruppe_Rosmarinstrasse_GbR ul {
  animation: movein_from_bottom_6s 6s cubic-bezier(.25,0,.25,1) both infinite;
}

article .icon_supported_text {
  float: left;
  width: 25%;
}

article .partner {
  float: left;
  width: 33.3333%;
}

.four_columns .icon_supported_text, .four_columns .partner {
  float: left;
  width: 25%;
}

.four_columns li:first-child {
  width: 50%;
}

.four_columns img {
  width: 100%;
  height: auto;
  margin: auto;
}

.six_columns .icon_supported_text, .six_columns .partner, .six_columns .gewerke {
  float: left;
  width: 16.6667%;
}

/* .six_columns .gewerke {
  width: 50%;
} */

.eight_columns .icon_supported_text {
  float: left;
  /* width: 12.5%; */
  width: 8.3333%;
}

.icon_supported_text .textbox_margin, .partner .textbox_margin {
  padding-right: .25rem;
  padding-bottom: .25rem;
  width: 100%;
}

.bordered_light {
  border: solid 0.0625rem rgba(0,0,0,.1);
}

.icon_supported_text .textbox, .partner .textbox {
  background-color: rgba(220,220,220,.5);
  padding: .75rem 1rem;
  width: 100%;
  position: relative;
}

.partner .textbox {
  background-color: rgba(255,255,255,1);
  min-height: 10.5rem;
}

.gewerke .textbox {
  min-height: 16rem;
}

#Baugruppe_Rosmarinstrasse_GbR .icon_supported_text .textbox {
  background-color: inherit;
  text-align: center;
}

article .ready .textbox {
  background-color: rgba(180,180,180,1);
  text-decoration: line-through;
}

/* article .ready .textbox::before {
  content: 'y';
	font-family: icomoon !important;
	font-size: 2rem;
	line-height: 1.5rem;
  position: absolute;
  right: 1rem;
} */

article .now .textbox {
	background-color: rgba(242,185,12,1);
}

article .internal .textbox {
  border-left: solid .25rem rgba(242,31,12,1);
  color: rgba(0,0,0,1);
}

/*-------------------------------------------------------------------------------------------------- Main-Nav -------------*/

#main_nav {
	width: 100%;
	height: 6rem;
	background-color: rgba(242,185,12,1);
	position: fixed;
	top: 0;
	z-index: 1000;
	box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
	color: white;
}

#logo {
	width: 20rem;
	height: 5rem;
	margin-top: .5rem;
	/* background-color: rgba(90,90,90,1); */
	float: left;
}

#logo img {
  width: 100%;
  height: auto;
}

#main_nav nav {
	margin-top: 2.5rem;
	float: right;
}

#main_nav li {
	color: white;
	float: left;
	font-size: 1rem;
	padding: .25rem .5rem;
	margin-left: 1rem;
}

.close {
  display: none;
}

/* ------------------------------ progress --------------------- */

#progress {
	border-bottom: solid .25rem rgba(255,255,255,1);
}

hgroup {
	position: absolute;
  left: 0;
	text-align: center;
	margin-top: 10rem;
	z-index: 1000;
	width: 100%;
}

#Unsere_Partner hgroup {
	position: relative;
	text-align: left;
}

@keyframes movein_from_bottom {
	0% {opacity: 0; transform: translateY(6rem);}
	100% {opacity: 1; transform: translateY(0rem);}
}

@keyframes movein_from_bottom_6s {
	0% {opacity: 0; transform: translateY(6rem);}
	16.6667% {opacity: 1; transform: translateY(0rem);}
	92% {opacity: 1; transform: translateY(0rem);}
	100% {opacity: 0; transform: translateY(-2rem);}
}

.main_img {
	width: 100%;
	height: 45rem;
  overflow: hidden;
}

.main_img img {
	width: auto;
  height: 100%;
}

.img_loader {
	background-image: url('../img/bauprojekt_rosmarinstrasse_visualisierung.jpg');
  background-size: auto 100%;
	width: 82%;
	height: 45rem;
	border-right: .5rem rgba(242,185,12,1);
	position: absolute;
	border-style: double;
  animation: percentage_ani 1s cubic-bezier(.25,0,.25,1) forwards;
  overflow: hidden;
}

@keyframes percentage_ani {
	0% {width: 0%;}
	100% {width: 82%;}
}

#percentage {
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,.85);
	margin-bottom: 1rem;
	margin-right: 1rem;
	padding: .25rem 1rem;
}

.img_loader p {
	font-size: 1rem;
	color: rgba(80,80,80,1);
	text-transform: uppercase;
	font-weight: bold;
}

.info_caption {
  animation: movein_from_right .5s cubic-bezier(.25,0,.25,1) both;
	animation-delay: .5s;
	margin-top: .5rem;
}

@keyframes movein_from_right {
	0% {opacity: 0; transform: translateX(10rem);}
	100% {opacity: 1; transform: translateX(0rem);}
}

.img_loader p span {
	font-weight: bold;
	margin-left: .25rem;
}

.value {
	font-size: 6rem;
	line-height: 5rem;
	color: rgba(242,185,12,1);
}

.unit {
	font-size: 3rem;
	color: rgba(80,80,80,1);
}

/* ------------------------------ progress-detail --------------------- */


#progress_detail {
	background-color: rgba(245,245,245,1);
}

#progress_detail li {
	width: 60%;
	float: left;
	background-color: rgba(220,220,220,.5);
	padding: 1rem;
	/* border-bottom: double .25rem rgba(242,185,12,1); */
}

#progress_detail li .icon {
	color: rgba(120,120,120,1);
}

#progress_bar li:first-child, #progress_bar li:last-child {
	width: 20%;
	background-color: rgba(220,220,220,0);
}


/* ------------------------------ band --------------------- */

.band {
	padding-top: 4rem;
	padding-bottom: 8rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* article {
	width: 60%;
	font-size: 1.25rem;
	line-height: 2.5rem;
  margin-bottom: 2rem;
} */

.left_column {
  width: 70%;
  padding-right: 4rem;
  float: left;
}

.content_centre .left_column {
  width: 50%;
}

article figure {
  position: relative;
  float: left;
  width: 100%;
  overflow: hidden;
}

#Unsere_Partner figure {
  float: none;
  margin-bottom: .5rem;
}

/* #Unsere_Partner .gewerke figure {
  float: left;
  width: 25%;
} */

#infografik_untergruppen {
	background-color: rgba(242,185,12,1);
  padding: 2rem;
}

.circle {
  width: 26rem;
  height: 26rem;
  background-color: rgba(255,255,255,1);
  border-radius: 100rem;
  padding: 10%;
  margin: auto;
  animation: paddingin 6s cubic-bezier(.25,0,.25,1) both infinite;
}

@keyframes paddingin {
  0% {padding: 0%;}
  16.6667% {padding: 10%;}
  92% {opacity: 1;}
  100% {opacity: 0;}
}

.inner_cirlce {
  width: 100%;
  height: 100%;
	background-color: rgba(242,185,12,1);
  border-radius: 100rem;
}

.circle_separator_1, .circle_separator_2, .circle_separator_3 {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: .125rem;
	background-color: rgba(242,185,12,1);
}

.circle_separator_1 {
  transform: rotateZ(90deg);
  animation: rotatingin_90 6s cubic-bezier(.25,0,.25,1) both infinite;
}

@keyframes rotatingin_90 {
  0% {transform: rotateZ(0deg); height: 20rem;}
  16.6667% {transform: rotateZ(90deg); height: .125rem;}
}

.circle_separator_2 {
  transform: rotateZ(150deg);
  animation: rotatingin_150 6s cubic-bezier(.25,0,.25,1) both infinite;
}

@keyframes rotatingin_150 {
  0% {transform: rotateZ(0deg); height: 20rem;}
  16.6667% {transform: rotateZ(150deg); height: .125rem;}
}

.circle_separator_3 {
  transform: rotateZ(210deg);
  animation: rotatingin_210 6s cubic-bezier(.25,0,.25,1) both infinite;
}

@keyframes rotatingin_210 {
  0% {transform: rotateZ(0deg); height: 20rem;}
  16.6667% {transform: rotateZ(210deg); height: .125rem;}
}

.gallery .left_column {
  padding-right: 1rem;
}

article.gallery img {
  margin: 0;
}

article figcaption {
  background-color: rgba(255,255,255,.85);
  padding: .5rem .75rem;
  position: absolute;
  bottom: .5rem;
  left: .5rem;
}

.content_centre figure {
  float: right;
  width: 50%;
}

.content_golden_left .left_column {
  width: 37.5%;
}

.content_golden_right .left_column {
  width: 82.5%;
}

.content_golden_left .right_column {
  width: 82.5%;
  float: right;
}

.content_golden_right .right_column {
  width: 37.5%;
  float: right;
}

.right_column_imgs figure:first-child {
  margin-bottom: 1rem;
}

article img {
  width: 100%;
  height: auto;
}

#Baugruppe_in_Medien img {
  border: 0.0625rem solid black;
}

.left_column, .content_golden_left   {
  margin-bottom: 3rem;
}

article > p {
	font-size: 1.25rem;
	line-height: 2.5rem;
  margin-bottom: 2rem;
}

.band aside {
	width: 30%;
	float: left;
	background-color: rgba(220,220,220,.5);
}

.contact li {
  font-size: 1.25rem;
}
/* ------------------------------ button --------------------- */

.button {
  display: block;
  margin-bottom: 2rem;
  margin-top: 4rem;
}

.button a {
  padding: .5rem 1.25rem;
	background-color: rgba(242,185,12,1);
	font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 2rem;
  display: inline-flex;
  transition: background-color .5s, color .25s;
  transition-timing-function: ease-in-out;
}

.button a:hover {
  background-color: rgba(80,80,80,1);
  color: rgba(255,255,255,1);
}

.button.active {
  font-weight: bold;
}

.button .icon {
  margin-left: 2rem;
  font-size: 1.5rem;
  transform: translateX(-.5rem);
  transition: transform .5s ease-out;
}

.button a:hover .icon {
  transform: translateX(0rem);
}

.button_link {
  margin-bottom: 0;
  margin-top: 0;
  float: left;
}

#main_nav .button_link a {
  color: rgba(0,0,0,1);
}

.button_link a {
  padding: .25rem .5rem;
	color: rgba(255,255,255,1);
  background-color: rgba(242,185,12,0);
  font-size: 1rem;
  transition: color .25s, background 1s;
}

.button_link .icon {
  opacity: 0;
	font-size: 1.5rem;
  transform: translateX(-1rem);
  transition: transform .5s ease-out, opacity .5s ease-out;
}

.button_link a:hover span {
  opacity: 1;
}

.button_link a:hover {
  background-color: rgba(242,31,12,1);
}

#main_nav .button_link a:hover {
  color: rgba(255,255,255,1);
}


/* ------------------------------ full_img --------------------- */

.full_img {
  background-color: rgba(80,80,80,1);
  width: 100%;
  overflow: hidden;
}

.full_img img {
  width: 100%;
  height: auto;
}

/* ------------------------------ aside --------------------- */

aside {
  padding: 1.25rem 0;
  animation: movein_from_right .5s cubic-bezier(.25,0,.25,1) both;
	animation-delay: 1s;
}

aside li {
  padding: .5rem 1.25rem;
}

aside p {
  color: rgba(80,80,80,1);
}

.facts li {
  border-bottom: 0.0625rem solid rgba(255,255,255,.5);
}

.facts .even {
  background-color: rgba(255,255,255,.25);
}

.facts li:last-child {
  margin-bottom: 0;
}

.facts .icon {
  width: 18%;
  float: left;
  padding: .5rem;
}

.facts .textbox {
  width: 76%;
  float: right;
  padding-top: .25rem;
}

.facts p {
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: bold;
  color: rgba(242,185,12,1);
}

.facts h5 {
  margin-left: 0;
}

.gallery img, .gallery object {
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  display: block;
  transition: opacity .25s ease-in;
}

.gallery a  {
  background-color: rgba(242,185,12,1);
  display: block;
  position: relative;
}

.crop {
  overflow: hidden;
  height: 12rem;
}

.gallery a:hover object {
  opacity: .8;
}

.link_extern {
  opacity: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	line-height: 1rem;
  padding: .25rem .5rem;
  top: .5rem;
  right: .5rem;
	position: absolute;
  z-index: 1000;
	color: rgba(80,80,80,1);
  background-color: rgba(255,255,255,1);
  transition: opacity .5s ease-out;
}

a:hover .link_extern {
  opacity: 1;
}

.now h6 {
	font-weight: bold;
	color: rgba(20,20,20,1);
}

/* ------------------------------ timeline  --------------------- */
#timeline {
  border-bottom: solid 0.25rem rgba(0,0,0,.75);
}

#timeline li {
  float: left;
  width: 12.5%;
  border-left: solid 0.25rem rgba(0,0,0,.5);
  padding-bottom: .5rem;
  text-align: center;
  animation-name: fadein_timeline;
  animation-duration: 8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.25,0,.25,1);
  animation-iteration-count: infinite;
}

#timeline span {
  margin-left: -50%;
  width: 100%;
  font-weight: bold;
  display: block;
  color: black;
  background-color: rgba(242,185,12,1);
}

#stonemarks {
  /* margin-top: -1.5rem; */
  width: 100%;
}

#stonemarks li {
  position: absolute;
  border-left: solid 0.125rem rgba(242,31,12,1);
  padding-top: 1rem;
  color: white;
  z-index: 10;
  animation-name: fadein_stonmarks;
  animation-duration: 8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.25,0,.25,1);
  animation-iteration-count: infinite;
}

#infografik_untergruppen #stonemarks li {
  border-top: solid 0.125rem rgba(242,31,12,1);
  border-left: none;
  padding-left: 10%;
  padding-top: 0;
  animation-name: fadein_stonmarks_from_left;
  animation-duration: 6s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.25,0,.25,1);
  animation-iteration-count: infinite;
  margin: auto;
}

.stonmark_1 {
  left: 59%;
  top: 21%;
}

.stonmark_2 {
  left: 69%;
  top: 50%;
}

.stonmark_3 {
  left: 59%;
  top: 79%;
}

.stonmark_4 {
  right: 59%;
  top: 21%;
}

.stonmark_5 {
  right: 69%;
  top: 50%;
}

.stonmark_6 {
  right: 59%;
  top: 79%;
}

#stonemarks .even {
  padding-top: 3rem;
  animation-name: fadein_stonmarks_even;
  z-index: 1;
}

#infografik_untergruppen #stonemarks .even {
  padding: 0;
  padding-right: 10%;
  animation-name: fadein_stonmarks_from_right;
  /* z-index: 1; */
}

@keyframes fadein_timeline {
	0% {opacity: 0; transform: translateY(.5rem); }
	10% {opacity: 1; transform: translateY(0rem); }
	92% {opacity: 1; transform: translateY(0rem); }
	100% {opacity: 0; transform: translateY(-.25rem); }
}

@keyframes fadein_stonmarks {
	0% {opacity: 0; padding-top: 0rem;}
	10% {opacity: 1; padding-top: 1rem;}
  92% {opacity: 1; padding-top: 1rem;}
	100% {opacity: 0; padding-top: 1.5rem;}
}

@keyframes fadein_stonmarks_from_left {
	0% {opacity: 0; padding-left: 0%;}
	16.667% {opacity: 1; padding-left: 10%;}
	76% {opacity: 1; padding-left: 10%;}
	84% {opacity: 0; padding-left: 16%;}
	100% {opacity: 0; padding-left: 16%;}
}

@keyframes fadein_stonmarks_from_right {
	0% {opacity: 0; padding-right: 0%;}
	16.667% {opacity: 1; padding-right: 10%;}
	76% {opacity: 1; padding-right: 10%;}
	84% {opacity: 0; padding-right: 16%;}
	100% {opacity: 0; padding-right: 16%;}
}

@keyframes fadein_stonmarks_even {
	0% {opacity: 0; padding-top: 0rem;}
	10% {opacity: 1; padding-top: 3rem;}
  92% {opacity: 1; padding-top: 3rem;}
	100% {opacity: 0; padding-top: 3.5rem;}
}

#stonemarks span {
  background-color: rgba(242,31,12,1);
  border-top: solid 0.125rem rgba(242,185,12,1);
  border-right: solid 0.125rem rgba(242,185,12,1);
  border-bottom: solid 0.125rem rgba(242,185,12,1);
  padding: .125rem .5rem;
}

#infografik_untergruppen #stonemarks span {
  border: none;
}

/* ------------------------------ footer --------------------- */

footer {
  background-color: rgba(20,20,20,1);
	padding: 4rem 0;
}

footer .button_link:first-child {
  margin-right: 2rem;
}

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

  .main_img {
  	height: 60rem;
  }

  .img_loader {
  	height: 60rem;
  }
}

@media screen and (max-width: 1490px) {
  .wrapper {
    width: 80rem;
  }

  .main_img {
  	height: 36rem;
  }

  .img_loader {
  	height: 36rem;
  }

  .content_golden_left   {
    margin-bottom: 0;
  }

}

@media screen and (max-width: 1300px) {

  .wrapper {
    width: 68rem;
  }

  .circle {
    width: 20rem;
    height: 20rem;
  }

  #progress_detail .wrapper {
    width: 100%;
  }

  #progress_detail li {
  	width: 50%;
  }

  #progress_bar li:first-child, #progress_bar li:last-child {
  	width: 25%;
  }

  .main_img {
  	height: 30rem;
  }

  .img_loader {
  	height: 30rem;
  }

}

@media screen and (max-width: 1110px) {

  html {
    font-size: 85%;
  }

  .wrapper {
    width: 100%;
    padding: 0 2rem;
  }



  #infografik_untergruppen {
      padding: 2rem 2rem 6rem 2rem;
  }

  .circle_separator_1, .circle_separator_2, .circle_separator_3 {
      top: -3rem;
  }

  .circle {
      width: 12rem;
      height: 12rem;
  }

  @keyframes fadein_stonmarks_from_right {
  	0% {opacity: 0; padding-right: 0%;}
  	16.667% {opacity: 1; padding-right: 2%;}
  	76% {opacity: 1; padding-right: 2%;}
  	84% {opacity: 0; padding-right: 4%;}
  	100% {opacity: 0; padding-right: 4%;}
  }

  @keyframes fadein_stonmarks_from_left {
  	0% {opacity: 0; padding-left: 0%;}
  	16.667% {opacity: 1; padding-left: 2%;}
  	76% {opacity: 1; padding-left: 2%;}
  	84% {opacity: 0; padding-left: 4%;}
  	100% {opacity: 0; padding-left: 4%;}
  }

  #infografik_untergruppen #stonemarks {
      padding-left: 2%;
  }

  #infografik_untergruppen #stonemarks .even {
      padding-right: 2%;
      padding-left: 0;
  }

  .stonmark_5 {
    right: 66%;
    top: 42%;
  }

  .stonmark_2 {
      left: 65%;
      top: 42%;
  }

  .stonmark_6, .stonmark_3 {
      top: 63%;
  }

  #progress_detail li, #progress_bar li:first-child, #progress_bar li:last-child {
  	width: 33.3333%;
  }

  .left_column {
    width: 100%;
  }

  .content_golden_left .right_column {
    width: 37.5%;
  }

  .content_golden_left .left_column {
    width: 62.5%;
  }

  .band {
   padding-bottom: 2rem;
  }

  #chronic {
    padding-bottom: 8rem;
  }

  .band aside {
  	width: 100%;
    margin-bottom: 4rem;
  }

  aside li {
    float: left;
    width: 50%;
  }

  .facts .even {
      background-color: rgba(255,255,255,0);
  }

  aside li:first-child {
    width: 100%;
  }

}

@media screen and (max-width: 1024px) {

  html {
    font-size: 75%;
  }

  article .icon_supported_text {
    width: 33.3333%;
  }

  .six_columns .partner, .six_columns .gewerke {
    width: 25%;
  }
}

@media screen and (max-width: 640px) {
  .gewerke .textbox {
    min-height: 14rem;
  }
  .wrapper {
    padding: 0 1.25rem;
  }
  .six_columns .partner, .six_columns .gewerke {
    width: 50%;
  }

  #Unsere_Partner figure {
    padding: 0 20%;
  }

  #stonemarks .mobile-fix {
      padding-top: 3rem;
      z-index: 5;
      animation-name: fadein_stonmarks_even;
  }

  #stonemarks .mobile-fix.even {
      padding-top: 5rem;
      z-index: 1;
      animation-name: fadein_stonmarks_mobile;
  }

  #stonemarks .mobile-fix-2 {
      padding-top: 1rem;
      z-index: 10;
      animation-name: fadein_stonmarks;
  }

  @keyframes fadein_stonmarks_mobile {
  	0% {opacity: 0; padding-top: 0rem;}
  	10% {opacity: 1; padding-top: 5rem;}
    92% {opacity: 1; padding-top: 5rem;}
  	100% {opacity: 0; padding-top: 5.5rem;}
  }

  @keyframes fadein_stonmarks_even {
  	0% {opacity: 0; padding-top: 0rem;}
  	10% {opacity: 1; padding-top: 3rem;}
    92% {opacity: 1; padding-top: 3rem;}
  	100% {opacity: 0; padding-top: 3.5rem;}
  }

  .circle {
      width: 14rem;
      height: 14rem;
  }

  .four_columns .icon_supported_text, .four_columns .partner {
      float: left;
      width: 50%;
  }

  .four_columns li:first-child {
      width: 100%;
  }

  #main_nav {
    height: 5rem;
  }

  body {
      padding-top: 5.25rem;
  }

  #logo {
      width: 18rem;
      height: 4rem;
  }

  #main_nav nav {
      margin-top: 2.5rem;
      float: right;
  }

  #main_nav li {
    background-color: rgba(242,185,12,1);
    width: 100%;
    margin: 0;
    padding: 0;
    display: none;
  }

  #main_nav .button_link a {
    padding: 1.5rem 2rem;
    font-size: 1.5rem;
    width: 100%;
  }

  #main_nav .active.button_link a {
    color: white;
    background-color: rgba(242,31,12,1);
  }

  .close.icon {
    font-size: 3rem !important;
    line-height: 3rem;
    padding: 1rem !important;
    position: absolute;
    width: auto !important;
    right: 0;
    top: 0;
  }

  .showButton {
    display: block !important;
  }

  h1 {
  	font-size: 1.5rem;
  	line-height: 2.25rem;
  }

  h2 {
  	font-size: 1.25rem;
  	line-height: 1.5rem;
  }

  hgroup {
    margin-top: 2rem;
  }

  .main_img {
    height: 20rem;
  }

  .img_loader {
    height: 20rem;
  }

  #percentage {
      margin-bottom: 0;
      margin-right: 0;
      transform: scale(0.75);
  }

  .value {
    font-size: 4rem;
    line-height: 4rem;
  }

   #progress_detail .wrapper {
     padding: 0;
   }

   #progress_detail li, #progress_bar li:first-child, #progress_bar li:last-child {
     width: 100%;
   }

  .band {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  .full_img {
    height: 18rem;
  }

  .full_img img {
    height: 100%;
    width: auto;
    margin-left: -11rem;
  }

  .button {
    margin-bottom: 1rem;
    margin-top: 2rem;
  }

  .band aside {
    margin-bottom: 2rem;
  }

  aside li {
      width: 100%;
  }

  .facts .even {
      background-color: rgba(255,255,255,.25);
  }

  article .icon_supported_text {
    width: 100%;
  }

  .content_golden_left .right_column {
    width: 100%;
    margin-bottom: 2rem;
  }

  .content_golden_left .left_column {
    width: 100%;
  }

  .content_golden_right .left_column {
      width: 100%;
  }

  .gallery .left_column {
    padding-right: 0;
  }

  .left_column {
      padding-right: 0;
  }

  .content_golden_right .right_column {
    width: 100%;
  }

  .left_column, .content_golden_left {
    margin-bottom: 1rem;
  }

  .content_golden_right {
    margin-bottom: 2rem;
  }

  .left_column_img {
    max-height: 14rem;
    overflow: hidden;
  }

  .border_b {
    border-bottom: solid .5rem rgba(220,220,220,1);
  }

  .border_t {
      border-top: solid .5rem rgba(220,220,220,1);
  }

  hr {
    height: .25rem;
    margin-bottom: 2rem;
  }

  #Baugruppe_Rosmarinstrasse_GbR .six_columns .icon_supported_text{
      width: 25%;
  }

  #Baugruppe_Rosmarinstrasse_GbR .six_columns li:first-child {
    display: none;
  }

  #Baugruppe_Rosmarinstrasse_GbR .eight_columns .icon_supported_text .textbox_margin {
      padding-right: 0;
  }

  #Baugruppe_Rosmarinstrasse_GbR .icon_supported_text .textbox {
    padding: 0;
  }

  #Baugruppe_Rosmarinstrasse_GbR .eight_columns .icon_supported_text .icon {
      font-size: 3rem;
  }

  footer {
    padding: 0 0 2rem 0;
  }
}

@media screen and (max-width: 320px) {
  .six_columns .partner, .six_columns .gewerke {
    width: 100%;
  }
}