/*  www.sinfona.de  */
@font-face {
    font-family: 'FiraSans-Regular';
    src: url("../../files/otosense/fonts/FiraSans-Regular.eot");
    src: url("../../files/otosense/fonts/FiraSans-Regular.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fonts/FiraSans-Regular.woff") format('woff'),
         url("../../files/otosense/onts/FiraSans-Regular.ttf") format('truetype'),
         url("../../files/otosense/fonts/FiraSans-Regular.svg#firasans-regular-") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'FiraSans-Medium';
    src: url("../../files/otosense/fonts/FiraSans-Medium.eot.eot");
    src: url("../../files/otosense/fonts/FiraSans-Medium.eot.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/onts/FiraSans-Medium.eot.woff") format('woff'),
         url("../../files/otosense/fonts/FiraSans-Medium.eot.ttf") format('truetype'),
         url("../../files/otosense/fonts/FiraSans-Medium.eot.svg#firasans-medium") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'FiraSans-ExtraBold';
    src: url("../../files/otosense/fonts/FiraSans-ExtraBold.eot");
    src: url("../../files/otosense/fonts/FiraSans-ExtraBold.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fonts/FiraSans-ExtraBold.woff") format('woff'),
         url("../../files/otosense/fonts/FiraSans-ExtraBold.ttf") format('truetype'),
         url("../../files/otosense/fonts/FiraSans-ExtraBold.svg#firasans-extrabold") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Armata-Regular';
    src: url("../../files/otosense/fonts/Armata-Regular.eot");
    src: url("../../files/otosense/fonts/Armata-Regular.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fontsArmata-Regular.woff") format('woff'),
         url("../../files/otosense/fonts/Armata-Regular.ttf") format('truetype'),
         url("../../files/otosense/fonts/Armata-Regular.svg#armata-regular-") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
  font-family: 'greatest-richmond';
  src: url("../../files/otosense/fonts/greatest-richmond.woff") format('woff'),
       url("../../files/otosense/fonts/greatest-richmond.ttf") format('truetype'),
       url("../../files/otosense/fonts/greatest-richmond.svg#greatest-richmond-") format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
    font-family: 'icon-worksregular';
    src: url("../../files/otosense/fonts/icon-works-webfont.eot");
    src: url("../../files/otosense/fonts/icon-works-webfont.eot?#iefix") format('embedded-opentype'),
         url("../../files/otosense/fonts/icon-works-webfont.woff") format('woff'),
         url("../../files/otosense/fonts/icon-works-webfont.ttf") format('truetype'),
         url("../../files/otosense/fonts/icon-works-webfont.svg#icon-worksregular") format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.ccm-settings-summoner.ccm-show{
  z-index: 990;
}
/*  SECTIONS  */
.section {
	clear: both;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 10em 5em;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
  width: 100%;
  margin-left: 0;
  float: none;
  clear: both;
}
.span_11_of_12 {
  	width: 91.5%;
}
.span_10_of_12 {
  	width: 83%;
}
.span_9_of_12 {
  	width: 74.5%;
}
.span_8_of_12 {
  	width: 66%;
}
.span_7_of_12 {
  	width: 57.5%;
}
.span_6_of_12 {
  	width: 49%;
}
.span_5_of_12 {
  	width: 40.5%;
}
.span_4_of_12 {
  	width: 32%;
}
.span_3_of_12 {
  	width: 23.5%;
}
.span_2_of_12 {
  	width: 15%;
}
.span_1_of_12 {
  	width: 6.5%;
}

/* LAYOUT */
* {
  box-sizing: border-box;
  transition: all .35s ease-in-out;
}
:root{
  --prim: #083EA0;
  --primdunk: #073079;
  --footer: #EBEBEB;
  --schrift: #fff;
  --sf: #95C11F;
  --sfdark: #7A9F15;
  --sfpetrol: #194451;
}
::selection {
  background: #96c11f;
  color: #fff;
}
::-moz-selection {
  background: #96c11f;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
  font: 100%/1.5 'FiraSans-Regular', 'helvetica', sans-serif;
  line-height: 1.5em;
  color: #000;
}
.bg.blue{
  color: var(--schrift);
  transform: skewY(-3deg);
  position: relative;
  top: -3.55em;
  position: relative;
}
.bg.blue .section {
  transform: skewY(3deg);
  padding-top: 10em;
}
#wrapper {
  overflow: hidden;
}
#header {
  overflow: hidden;
  height: 100%;
  position: relative;
  padding: 0 1em 10em;
}
#header .inside {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 2em;
}
#header p, .foot .span_6_of_12 p, .cta p {
  margin: 0;
}
h1, h2{
  color: var(--schrift);
  line-height: 1em;
  margin: 0;
  text-align: left;
  font-family: 'FiraSans-ExtraBold';
  letter-spacing: 2px;
}
h1{
  font-size: 5em;
}
h2{
  font-size: 5em;
  width: fit-content;
}
h3{
  color: var(--schrift);
  line-height: 1em;
  margin: 0;
  font-family: 'FiraSans-ExtraBold';
  font-size: 2em;
}
h4{
  color: var(--schrift);
  line-height: 1em;
  margin: 1em 0 0;
  text-align: center;
  font-size: 1.5em;
}
strong, h4 {
  font-family: 'FiraSans-Medium';
}
h1, h2, h3, h4, h5{
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1, h2, h3, h4, h5, .bbox strong, .tbox strong, .txt p:nth-child(2n){
  text-transform: uppercase;
}
img, svg, iframe{
	display: block;
	max-width: 100%;
	height: auto;
}
svg {
  display: inline-block;
  overflow: visible;
  height: 100%;
}
picture{
  display: block;
}
p, table{
	margin: 1em 0;
}
table, iframe{
	width: 100%;
}
table{
  margin:0;
}
figure{
  margin:0;
}
a {
  color: #000;
  text-decoration: none;
  outline: 0;
  position: relative;
  display: inline-block;
}
a:hover{
  color: var(--prim);
}
.bg.blue a{
  color: var(--schrift);
}
.btn, button{
  padding: .5em 1em;
  text-decoration: none !important;
  text-transform: uppercase;
}
.btn, button{
  background: linear-gradient(to right, var(--primdunk), var(--primdunk) 50%, var(--prim) 50%);
  background-size: 250% 105%;
  background-position: 100%;
  -webkit-text-fill-color: #fff;
  box-shadow: none;
}
.bbox a{
  -webkit-text-fill-color: #fff;
}
.bbox a strong {
  background: linear-gradient(to right, var(--sfpetrol), var(--sfpetrol) 50%, #000 50%);
  background-size: 250% 105%;
  background-position: 100%;
  box-shadow: none;
  padding: .5em .5em .25em .5em;
}
#header .bbox a p{
  margin-top:.75em;
  font-family: 'Armata-Regular';
}
.btn:hover, .bbox a:hover strong{
  background-position: 0 100%;
  box-shadow: none;
}
.span_9_of_12.headline{
  width: fit-content;
  margin: 0 0 5em;
}
.headline h1 span:nth-child(3), .headline h2 span:nth-child(3), .headline h3 span:nth-child(3){
  margin-left: 1.5em;
}
h2 span, .headline span{
  background: #000;
  padding: .25em .6em .15em .6em;
  display: inline-block;
}
.headline, .cta h2 {
  transform: rotate(-4deg);
}
header .span_12_of_12:first-child{
  display: flex;
  align-items: center;
}
.hero {
  justify-content: center;
  display: flex;
  align-items: center;
  padding-top: 17em;
  width: 100%;
}
.hero .section {
  padding: 5em 2em;
}
.hero .headline img{
  position: absolute;
  height: 260px;
  width: auto;
}
.hero .headline img:first-child{
  z-index: 1;
  top: -14em;
}
.hero .headline img:nth-child(2){
  right: 0;
  top: -12.5em;
}
.headline {
  width: fit-content;
}
.hero h1{
  position: relative;
  z-index: 5;
}
.hero h3{
  text-align: right;
  background: var(--prim);
}
.hero h4{
  margin-left: 5em;
}
header .span_4_of_12 {
  width: 23.5%;
}
header .span_4_of_12 img{
  width: 320px;
}
.bbox {
  display: flex;
  justify-content: flex-end;
  text-align: center;
  width: 74.5%;
  margin-top: 2.5em;
} 
.bbox a {
  padding: 1em 1em .65em 1em;
  font-size: 1.3em;
  margin-left: 1em;
}
.bbox a:first-child {
  margin-left: 0;
}
.bbox strong{
  text-transform: uppercase;
  font-size: 1.3em;
}
.bbox a p{
  margin: 0;
}
.bbox p{
  text-transform: uppercase; 
}
.vis1130, .vis720{
  display: none;
}
.tbox{
  margin-bottom: 10em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tbox ul {
  padding: 0;
}
.tbox li::marker{
  content: none;
}
.txt p+p{
  margin-top: 0;
}
.txt p:first-child{
  margin-bottom: 0;
}
.tbott{
  display: inline-flex;
  align-items: end;
  justify-content: end;
  margin-top: 2em;
}
.vbox .span_3_of_12 {
  width: 32%;
}
.vbox strong{
  text-transform: uppercase;
}
.vbox img{
  margin-bottom: 2em;
}
.vbox .col p:last-child {
  line-height: 1em;
}
.headline h3{
  margin-bottom: 1.5em;
  font-size: 3em;
}
.headline, .cta h2 {
  transform: rotate(-4deg);
}
.cta span:first-child{
  margin-left: 1.5em;
}
.cta span:nth-child(3){
  margin-left: 2.5em;
}
sup {
  position: relative;
  vertical-align: baseline;
  top: -0.4em;
}
.bg.blue, #header{
  background: -webkit-linear-gradient(top,  rgba(8,62,160,1) 0%,rgba(41,137,216,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(8,62,160,1) 0%,rgba(41,137,216,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.hero .bg.blue.dark{
  background: none;
}
.bg.grey, #footer{
  background: #EBEBEB
}
.bg h4{
  font-size: 2.5em;
  margin-top: .6em;
  margin-left: 1.5em;
}
.tright, .tright a{
  text-align: right;
}
.tcenter, .tcenter a{
  text-align: center;
}
.tbox strong{
  font-size: 1.2em;
}
.price {
  font-size: 1.7em;
  font-family: 'FiraSans-Medium';
}
[class^="icon-"]::before, [class*=" icon-"]::before {
  font-family: 'icon-worksregular';
  font-style: normal;
  font-size: 1.4em;
  height: 100%;
  width: auto;
  margin-right: .3em;
  bottom: 0;
}
a[class^="icon-tel"]::before {
  content: '\000C0';
}
a[class^="icon-mail"]::before {
  content: '\000C1';
}
a[class^="icon-shop"]::before {
  content: '\0005B';
}
#aside a[class^="icon-"]::before, a[class*=" icon-"]::before {
  color: #2E4291;
}
/*
.icon::before, a[href^="tel:"]::before, a[href^="mailto:"]::before, a[href^="https://"]::before, #container a[href^="http://"]::before, a[href^="files/sinfona/documents/"]::before {
  display: inline-block;
  content: '';
  height: 30px;
  width: 30px;
  margin-right: .25em;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #000;
  bottom: -.25em;
  position: relative;
}
a[href^="https://www.facebook.com/sinfona/"]::before{
  -webkit-mask: url('../../files/otosense/images/icons/facebook.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/facebook.svg') no-repeat 50% 50%;
}
a[href^="https://www.instagram.com/sinfona_gmbh/"]::before{
  -webkit-mask: url('../../files/otosense/images/icons/instagram.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/instagram.svg') no-repeat 50% 50%;
}
a[href^="https://de.linkedin.com"]::before, a[title*="LinkedIn"]::before {
  -webkit-mask: url('../../files/otosense/images/icons/linkedin.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/linkedin.svg') no-repeat 50% 50%;
}
a[href^="https://g.page/r/CTg046rPjaScEBM/review"]::before{
  -webkit-mask: url('../../files/otosense/images/icons/google.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/google.svg') no-repeat 50% 50%;
}
a.newsletter::before{
  -webkit-mask: url('../../files/otosense/images/icons/newsletter.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/newsletter.svg') no-repeat 50% 50%;
}
a.download::before {
  -webkit-mask: url('../../files/otosense/images/icons/download.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/download.svg') no-repeat 50% 50%;
}
a[href^="tel:"]::before {
  -webkit-mask: url('../../files/otosense/images/icons/telefon.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/telefon.svg') no-repeat 50% 50%;
}
a[href^="mailto:"]::before {
  -webkit-mask: url('../../files/otosense/images/icons/email.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/email.svg') no-repeat 50% 50%;
}
a[href^="files/sinfona/documents/"]::before {
  -webkit-mask: url('../../files/otosense/images/icons/paperclip.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/paperclip.svg') no-repeat 50% 50%;
}
a.post::before {
  -webkit-mask: url('../../files/otosense/images/icons/kontakt_klein.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/kontakt_klein.svg') no-repeat 50% 50%;
}
.sign::before {
  -webkit-mask: url('../../files/otosense/images/icons/warning-sign.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/warning-sign.svg') no-repeat 50% 50%;
  height: 40px;
  width: 40px;
  bottom: -.4em;
  position: relative;
  background-color: #95C11F;
}
a.remove::before {
  background: url('../../files/otosense/images/icons/close.svg');
  height: 25px;
  width: 33px;
  display: inline-block;
} 
  a[href^="https://www.facebook.com/sinfona/"]::before, a[href^="https://www.instagram.com/sinfona_gmbh/"]::before, a[href^="https://g.page/r/CTg046rPjaScEBM/review"]::before, #aside a[href^="https://shop.sinfona.de/"]::before, #aside a.post::before, .bg.blue a[href^="tel:"]::before, .bg.blue a[href^="mailto:"]::before{
  background-color: #fff;
}
#footer_sub a[href^="https://shop.sinfona.de/"]::before, #footer_sub a.download::before, #aside a[href^="tel:"]::before, #aside a[href^="mailto:"]::before, .social #container a[href^="https://"]:hover::before, .social #container a[href^="http://"]:hover::before{
  background-color: #95C11F;
}
  #container a[href^="https://"]::before, #container a[href^="http://"].btn::before {
  -webkit-mask: url('../../files/otosense/images/icons/externer-link.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/externer-link.svg') no-repeat 50% 50%;
}
a[href^="https://shop.sinfona.de/"]::before{
  -webkit-mask: url('../../files/otosense/images/icons/shop.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/icons/shop.svg') no-repeat 50% 50%;
}*/
a.remove::before {
  content:'x';
  height: 25px;
  width: 33px;
  display: inline-block;
  font-weight: bold;
}


.footer.first a, a.icon, a[href^="tel:"], a[href^="mailto:"], a[href^="https://"], a[href^="http://"], .sign {
  display: initial;
}
a.btn[href^="https://"], a.btn[href^="http://"]{
  display: inline-flex;
  align-items: center;
}
a.btn[href^="https://"]::before, a.btn[href^="http://"]::before {
  -webkit-mask: url('../../files/otosense/images/inserts/blatt.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/inserts/blatt.svg') no-repeat 50% 50%;
  width: 22px;
  margin-right: .5em;
  bottom: .1em;
  background-color: #fff;
}
.contact-btn::after {
  -webkit-mask: url('../../files/otosense/images/inserts/contact-btn.svg') no-repeat 50% 50%;
  mask: url('../../files/otosense/images/inserts/contact-btn.svg') no-repeat 50% 50%;
  display: inline-block;
  content: '';
  height: 80px;
  width: 100px;
  margin-right: .25em;
  -webkit-mask-size: cover;
  mask-size: cover;
  position: relative;
  background: linear-gradient(to right, var(--primdunk), var(--primdunk) 50%, var(--prim));
  background-size: 250% 105%;
  background-position: 100%;
  -webkit-text-fill-color: #fff;
  box-shadow: none;
}
.contact-btn:hover::after {
  background-position: 0 100%;
  box-shadow: none;
}
a.btn[href^="https://"]::before, a.btn[href^="http://"]::before, #aside a[href^="https://shop.sinfona.de/"]::before{
  bottom: 0;
}
/*#container a.btn[href^="https://"]::before {
  font-family: 'WebHostingHub-Glyphs';
  font-style: normal;
  content: '\f184';
  mask: none;
  -webkit-mask: none;
  background: none;
  font-size: .75em;
  height: 100%;
  width: auto;
  margin: 0 .5em .3em 0;
}*/
#container .img a[href^="https://"]::before, #container .img a[href^="http://"].btn::before{
  content: none;
}
#trockenbox .headline div {
  display: flex;
  align-items: end;
  position: relative;
}
#trockenbox .headline h2 span:nth-child(3) {
  padding-right: 3em;
}
#trockenbox .headline img{
  position: absolute;
  right: -5em;
  height: 260px;
  width: auto;
}
.cta {
  position: relative;
}
.cta img:nth-child(2){
  position: absolute;
  z-index: 5;
  height: 280px;
  width: auto;
  right: 2em;
  top: 6em;
}
.cta span:first-child {
  padding-right: 2em;
}
.cta h2{
  z-index: 3;
  position: relative;
  top: -.55em;
}
.cta img:nth-child(1){
  z-index: 1;
  position: relative;
  width: 300px;
  height: auto;
  left: 7em;
}
#footer {
  position: relative;
}
#footer::before {
  background: url('../../files/otosense/images/inserts/balken.svg') top;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 60%;
  top: -9.2em;
  content: '';
}
#footer .section{
  padding-top: 0;
  padding-bottom: 5em;
}
.nav-foot, .nav-foot .col{
  margin-top: 0;
}
.nav-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2em;
}
.nav-foot .span_2_of_12:last-child{
  text-align: right;
}
.nav-foot .span_2_of_12:last-child a[href^="https://"]::before{
  content: none;
}
.nav-foot a{
  display: block;
}
.foot, .expl{
  font-size: 85%;
}
.author{
  display: flex;
  justify-content: flex-end;
}
#footer .author a{
  background: none;
}
.footer .author a[href^="http://"]::before{
  background: none;
}
.author .icon-heart{
  margin-left: .5em;
}
.author .icon-heart:before{
  display: inline-block;
  color: var(--prim);
}
.author:hover .icon-heart::before{
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{transform: scale(1);}
  10%{transform: scale(1.3);}
  20%{transform: scale(1);}
  30%{transform: scale(1.1);}
  40%{transform: scale(1);}
  50%{transform: scale(1);}
  100%{transform: scale(1);}
}
/*animation*/
.fadescroll .img, .fadescroll .txt, .cta .fadescroll {
  opacity: 0;
  transition: all 1.25s ease-in-out;
}
.fadescroll .img {
  transform: translateX(-90%);
}
.fadescroll .txt, .cta .fadescroll {
  transform: translateX(90%);
}
.fade.tbox .img, .fade.tbox .txt, .cta .fade{
  transform:translateX(0);
  opacity: 1;
}
.vbox .fadescroll:first-child {
  transition: all 1s;
  opacity: 0;
  transform: translate(0, 50px);
}
.vbox .fadescroll:nth-child(2n) {
  transition: all 1.3s;
  opacity: 0;
  transform: translate(0, 70px);
}
.vbox .fadescroll:nth-child(3n) {
  transition: all 1.5s;
  opacity: 0;
  transform: translate(0, 90px);
}
.vbox .fadescroll:nth-child(4n) {
  transition: all 1.7s;
  opacity: 0;
  transform: translate(0, 110px);
}
.vbox .fade:first-child {
  opacity: 1;
  transform: translate(0px, 0);
}
.vbox .fade:nth-child(2n) {
  opacity: 1;
  transform: translate(0px, 0);
}
.vbox .fade:nth-child(3n) {
  opacity: 1;
  transform: translate(0px, 0);
}
.vbox .fade:nth-child(4n) {
  opacity: 1;
  transform: translate(0px, 0);
}
/*aside*/
#aside:after{
  content: "";
  position: absolute;
  width: 300px;
  margin-left: 0;
  bottom: 2em;
  background: url("../../files/otosense/images/inserts/otosense_bildmarke.svg");
  right: -4.75em;
  height: 315px;
  background-size: cover;
}
#aside .content{
  visibility: hidden;
  opacity: 0;
  transform: translateY(10%);
  z-index: 500;
  transition: none;
  height: 100vh;
  color: #fff;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body.active-aside #aside .content{
  color: #fff;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: 999;
  height: 100vh;
  position: relative;
}
#aside{
  position: fixed;
  z-index: 599;
  transition: none;
}
body.active-aside #aside{
  width: 100vw;
  height: 100vh;
  color: #fff;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: 999;
  background: #00303e; /* Old browsers */
  overflow: scroll;
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(30, 37, 62, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(30, 37, 62, 1) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(30, 37, 62, 1) 100%);
}
body.active-aside .contact-btn {
  display: none;
}
#aside .menu, body.active-aside .contact-btn{
  opacity: 0;
}
#aside.navigation .menu, body.active-aside #aside .content{
  opacity: 1;
}
#aside.kontakt .span_12_of_12:first-child {
  display: flex;
  justify-content: flex-end;
}
#aside .span_3_of_12.close {
  text-align: right;
  color: #626161;
}
#aside .contact, #aside .span_12_of_12.menu{
  margin-top: 1.5em;
}
#aside .span_12_of_12{
  float: left;
}
#aside .content .span_6_of_12:last-child {
  transition: transform .25s ease-in-out, opacity 1s ease-in-out;
}
#aside .level_1 {
  padding: 0;
}
#aside .contact-btn{
  position: fixed;
  right: -10em;
  bottom: 5%;
  color: #fff;
  cursor: pointer;
  z-index: 700;
  transition: all .6s ease-in-out;
  padding: 1em;
  border-radius: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .85em;
  line-height: 1.3em;
  text-transform: uppercase;
}
body.scroll #aside .contact-btn {
  right: 2.5em;
}
#aside .contact-btn:hover {
  background-position: right center;
}
body.active-aside #aside .contact-btn{
  display: none;
}
#container .layout_latest .image_container > a:before, #container .sbox a:before, #container .tbox>a:first-child::before, #container .layout_latest h2 a:before {
  content: none !important;
}
.level_1 a[href^="https://"]::before, .level_1 a[href^="http://"].btn::before {
  color: #fff;
}
.sitemap .level_1 a[href^="https://"]::before, .sitemap .level_1 a[href^="http://"].btn::before {
  color: #194451;
}
ul li{
  list-style-type: none;
}
#aside li{
  margin-bottom: .65em;
  font-size: 2.2em;
  text-transform: none;
  padding: 0;
  line-height: 1.3em;
}
#aside li strong{
  opacity: .3;
  color: #fff;
  font-weight: normal;
}
#aside ul li a{
  color: #fff;
  padding: 0;
}
body.active-aside .navi{
  display: none;
}
body.active-aside #aside .inside{
  width: 100%;
  padding: 1em 5.5em 3em;
  transition: none;
  height: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  transition: none;
}
#aside .contact .span_6_of_12:nth-child(3){
  margin-left: 0;
}
#aside .out{
  display: inline-block;
}
#aside .at{
  margin-top: 5em;
}
#aside h3{
  text-transform: none;
  text-align: left;
}
#aside.navigation .desk {
  display: block;
  text-align: center;
}
#aside.kontakt .menu, #aside.navigation .contact, body.active-aside .contact-btn{
  display: none;
}
#aside ul li a::after{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
#aside ul li a:hover::after{
  width: 100%;
}
#aside a, #aside ul li a::after, #aside ul li a::before {
  transition: all .5s;
}
#aside .span_12_of_12 .span_6_of_12:last-child{
  text-align: right;
}
#aside .span_6_of_12 p{
  font-size: 1.4em;
  line-height: 1.5em;
}
#aside a {
  color: #fff;
}
.expl{
  font-size: .75em;
}
#aside a[href^="mailto:"]::after, #aside a[href^="tel:"]::after, #aside [class^="icon-"]::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
  transition: all .5s;
}
#aside a[href^="mailto:"]:hover::after, #aside a[href^="tel:"]:hover::after, #aside [class^="icon-"]:hover::after  {
  width: 100%;
}
.imp a.cbox[href^="https://"]::before, .imp a.cbox[href^="http://"]::before, .acbox .more::before, #aside .icon-remove::after {
  content: none;
}
#container a.cbox[href^="https://"]::before, #container a.cbox[href^="http://"].btn::before {
  content: none;
}
.aside-line{
  font-family: 'greatest-richmond';
  font-size: 3.5em;
  line-height: 1em;
  font-weight: normal;
  color: #fff;
}
#aside li, #aside .contact .span_6_of_12:first-child .aside-line, #aside .contact .span_6_of_12:first-child p{
  transform: translateX(-50%);
  opacity: 0;
  transition: none;
}
#aside.kontakt .contact .span_6_of_12:first-child .aside-line, #aside.kontakt .contact .span_6_of_12:first-child p{
  transform: translateX(0);
  opacity: 1;
  transition: all .5s ease-in-out;
  transition-delay: .2s;
}
#aside p.hlabel{
  font-size: 1.2em;
}
#aside .hlabel{
  font-size: .9em;
}
#aside .content .span_6_of_12:last-child p {
  line-height: 1.2em;
  margin-bottom: 1.3em;
}
body .contact-btn img {
  position: relative;
  z-index: 500;
}
body .contact-btn p:first-child {
  z-index: 501;
  position: absolute;
  margin: 0 .5em 0 0;
}
#aside a.download::before {
  background-color: #fff;
}

@media only screen and (max-width: 1560px) {
  #footer::before {
    top: -7em;
  }
}
@media only screen and (max-width: 1300px) {
  .hero .section {
    padding-left: 2em;
    padding-right: 2em;
  }
  .bbox {
    margin-top: 1.5em;
  } 
}
@media only screen and (max-width: 1280px) {
  .cta img:nth-child(2) {
    height: 230px;
    top: 8.5em;
  }
  .cta span:nth-child(3) {
    margin-left: 1.75em;
  }
  .cta h2 {
    font-size: 4.5em;
  }
  h1, h2 {
    letter-spacing: 1px;
  }
}
@media only screen and (max-width: 1240px) {
  .bbox a {
    padding: .75em .75em .5em .75em;
  }
  .bbox strong {
    font-size: 1.1em;
  }
}
@media only screen and (max-width: 1170px) {
  .nav-foot .span_2_of_12:nth-child(2){
    width: 32%;
  }
  #footer::before {
    top: -5.4em;
  }
}
@media only screen and (max-width: 1130px) {
  .cta img:nth-child(2) {
    height: 180px;
    top: 7.5em;
    right: 4em;
  }
  .cta span:nth-child(3) {
    margin-left: 1.75em;
  }
  .cta h2 {
    font-size: 4em;
  }
  .cta img:nth-child(1) {
    width: 250px;
  }
}
@media only screen and (max-width: 1115px) {
  header .span_12_of_12:first-child{
    display: block;
    text-align: center;
  }
  header .span_4_of_12, .bbox{
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .bbox {
    justify-content: center;
    margin-top: 2em;
  } 
}
@media only screen and (max-width: 1050px) {
  .section.group {
    padding: 6.5em 3em;
  }
}
@media only screen and (max-width: 1020px) {
  .hero .section {
    padding: 5em 2em;
  }
}
@media only screen and (max-width: 950px) {
  h2 {
    font-size: 4em;
  }
  .cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cta span:first-child {
    margin-left: .5em;
  }
  .cta h2 {
    font-size: 3.5em;
  }
  .cta img:nth-child(2) {
    right: 6em;
  }
  .cta img:nth-child(1) {
    left: -12.5em;
  }
}
@media only screen and (max-width: 870px) {
  .cta h2, .headline h3  {
    font-size: 3em;
  }
  .cta span:first-child {
    margin-left: .25em;
  }
  .cta img:nth-child(2) {
    height: 156px;
    top: 6.75em;
    right: 4em;
  }
  .cta img:nth-child(1) {
    width: 220px;
  }
}
@media only screen and (max-width: 830px) {
  .cta h2 {
    font-size: 2.5em;
  }
  .cta img:nth-child(2) {
    top: 6.2em;
  }
  .cta img:nth-child(1) {
    top: 1em;
  }
  #article-9.bg.blue .section {
    padding-top: 6em;
  }
}
@media only screen and (max-width: 800px) {
  #trockenbox .headline img {
    right: -2.5em;
    height: 220px;
  }
  h1 {
    font-size: 4em;
  }
  .hero .headline img:first-child {
    left: -2em;
  }
  #header .inside {
    padding: 1em 0;
  }
}
@media only screen and (max-width: 780px) {
  .headline h3 {
    margin-bottom: 1.5em;
    font-size: 2.3em;
  }
  .hero .headline img:nth-child(2) {
    right: 0;
  }
  .bbox a {
    margin-left: .5em;
  }
  .vbox .span_3_of_12{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em;
  }
  .vbox .span_3_of_12:nth-child(2n+1){
    margin-left: 0;
  }
  .vbox img, .vbox p {
    margin-bottom: .5em;
  }
  .vbox p:last-child {
    margin-top: 0;
  }
}
@media only screen and (max-width: 750px) {
  .cta img:nth-child(2) {
    order: 3;
    position: relative;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
  .cta img:nth-child(1) {
    order: 1;
    left:0;
  }
  .cta h2{
    order: 2;
    text-align: center;
  }
  .cta span:first-child {
    padding-right: .6em;
  }
  .cta span:nth-child(3) {
    margin-left: 0;
  }
  .cta p{
    order: 4;
    width: 100%;
    margin-top: 1.5em;
  }
}
@media only screen and (max-width: 730px) {
  h2 {
    font-size: 3em;
  }
  .tbox .span_6_of_12{
    width: 100%;
    margin-left: 0;
  }
  .span_9_of_12.headline {
    margin: 0 0 3em;
  }
  .tbox {
    margin-bottom: 5em;
  }
  .tbox:last-child {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 720px) {
  .bbox, .vis1130{
    display: block;
  }
  .vis720 {
    display: inline-block;
  }
  .bbox a{
    margin-top: 1em;
  }
  .bbox a p{
    display: none;
  }
  .bbox {
    order:3;
    margin-top: 3em;
  } 
  header .ce_text{
    display: grid;
  }
  header .span_4_of_12{
    order: 1;
  }
  .hero{
    order: 2;
  }
  #header {
    padding: 0 1em 8em;
  }
}
@media only screen and (max-width: 650px) {
  .tbott {
    display: block;
  }
  .tbott ul, .tbott li:last-child, .tbott .span_6_of_12:first-child{
    margin-bottom: 0;
  }
  .tbott ul:last-child, .tbott .span_6_of_12:last-child{
    margin-top: 0;
  }
  .headline h1 span:nth-child(3), h1 span:first-child {
    padding-left: .4em;
    padding-right: .4em;
  }
  .hero h4 {
    margin-left: 0;
  }
  .hero .headline img:nth-child(2){
    display: none;
  }
  .hero .headline img:first-child {
    left: 50%;
    transform: translateX(-50%);
  }
  #header p{
    text-align: center;
  }
}
@media only screen and (max-width: 630px) {
  .section.group {
    padding: 6.5em 2em;
  }
  .hero .section {
    padding: 5em 1em 0;
  }
  body.active-aside #aside .inside {
    padding: 1em 2.5em 3em;
  }
}
@media only screen and (max-width: 600px) {
  .vbox .span_3_of_12{
    width: 100%;
    margin-left: 0;
    margin-bottom: 2em;
  }
  #footer .section {
    padding-bottom: 5em;
  }
  .nav-foot {
    display: flow-root;
  }
  .nav-foot .span_4_of_12:first-child{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
  }
  .nav-foot .span_2_of_12:nth-child(2), .nav-foot .span_2_of_12:last-child{
    width: 49%;
  }
  .nav-foot .span_2_of_12:nth-child(2){
    margin-left: 0;
  }
  #trockenbox .headline img {
    right: 0;
    height: 180px;
  }
  .nav-foot .span_4_of_12 p{
    margin-top: 0;
  }
}
@media only screen and (max-width: 550px) {
  h1 {
    font-size: 3.5em;
  }
  .headline h1 span:nth-child(3) {
    margin-left: 1em;
  }
}
@media only screen and (max-width: 540px) {
  .headline h2{
    order: 2;
  }
  .headline h4{
    width: 100%;
    top: 0;
    margin-left: 0;
  }
  #trockenbox .headline img {
    right: 0;
    order: 1;
    position: relative;
  }
  #trockenbox .headline div {
    flex-wrap: wrap;
    justify-content: center;
  }
  #trockenbox .headline h2 span{
    padding-right: 1.5em;
  }
    #trockenbox .headline h2 span:nth-child(3){
    padding-right: 1em;
  }
  .bg h4 {
    font-size: 1.7em;
  }
}
@media only screen and (max-width: 530px) {
  #aside .contact .span_6_of_12 {
    width: 100%;
    margin-left: 0;
  }
  #aside .span_12_of_12 .span_6_of_12:last-child {
    text-align: left;
  }
}
@media only screen and (max-width: 500px) {
  .foot {
    margin-top: 3em;
  }
  .foot .span_6_of_12{
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .author{
    justify-content: center;
  }
}
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }

  .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	   width: 100%;
	}
  h2, .cta h2 {
    font-size: 2.5em;
  }
  .headline h2 span:nth-child(3), .headline h3 span:nth-child(3){
    margin-left: 1em;
  }
  h4 {
    margin-left: 2em;
  }
  .tbox {
    margin-bottom: 5em;
  }
  .tbox:last-child {
    margin-bottom: 0;
  }
  h1 {
    font-size: 3em;
  }
  .hero h4,.bbox strong{
    font-size: 1.3em;
  }
  .bbox, .foot {
    margin-top: 2.5em;
  }
  .bg.blue .section {
    padding-top: 5em;
  }
}
@media only screen and (max-width: 450px) {
  .section.group {
    padding: 4em 1.5em;
  }
  #header .inside{
    padding: 1em 0;
  }
  .hero .section {
    padding: 5em 1em 0;
  }
  header .span_4_of_12 img {
    width: revert-layer;
  }
  .hero .headline img:first-child {
    height: 230px;
    top: -12em;
  }
  .hero {
    padding-top: 13em;
  }
  body.scroll #aside .contact-btn {
    right: .5em;
  }
  #aside .contact-btn {
    bottom: 2%;
  }
}
@media only screen and (max-width: 430px) {
  .headline h3 {
    margin-bottom: 1.5em;
    font-size: 2em;
  }
  .cta img:nth-child(2) {
    max-width: 100%;
    height: auto;
  }
}
@media only screen and (max-width: 390px) {
  h1 {
    font-size: 2.8em;
    letter-spacing: 0;
  }
  .headline h1 span:nth-child(3) {
    margin-left: 1em;
  }
}
@media only screen and (max-width: 380px) {
  .nav-foot .span_2_of_12:nth-child(2), .nav-foot .span_2_of_12:last-child {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .nav-foot .span_2_of_12:last-child {
    margin-top: 1.5em;
  }
  #trockenbox .headline h2 span:nth-child(3), #trockenbox .headline h2 span{
    padding-right: .5em;
  }
  #footer::before {
    top: -4em;
  }
  .hero .headline img:first-child {
    top: -12em;
  }
  .bbox {
    margin-top: 2em;
  }
  .bbox a {
    font-size: 1.1em;
    margin-top: .75em;
  }
  h1 {
    font-size: 2.5em;
    letter-spacing: 0;
  }
}
@media only screen and (max-width: 315px) {
  h1 {
    font-size: 2.3em;
  }
}