/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.hidden,[hidden]{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}@media print{*,::after,::before{background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]::after{content:" (" attr(title) ")"}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}


/* quicksand-regular - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/quicksand-v22-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/quicksand-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/quicksand-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/quicksand-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/quicksand-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/quicksand-v22-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
}

/* quicksand-700 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/quicksand-v22-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/quicksand-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/quicksand-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/quicksand-v22-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/quicksand-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/quicksand-v22-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
}


* {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
}
b {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
}

body {
  background: rgb(70,23,33);
  background: radial-gradient(circle, rgba(0,26,32,1) 0%, rgba(0,0,0,1) 100%); 
}
h1, h2, h3, h4, h5 {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  color: white;
}
p,a {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  color: white;
}
p {
  margin: 1rem 0;
}
p.hero {
  font-size: 2rem;
}
p.small, 
p.small a {
  color: #dddddd;
  font-size: 12px;
  margin: 1rem 0;
  padding: 0;
  text-align: center;
}
a {
  text-decoration: underline;
  transition: color .25s ease;
}
a:hover,
a:focus {
  color: #ff0000;
}

li {
  color: white;
}

/*
hellblau:#00A9D0;
Dunkelblau:#10171F;
*/

.start,
.bauweise {
  background-color: #000;
  background-image: url("../img/sontronics-stc20-closeup.jpg");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.start {
  background-image: url("../img/sontronics-stc20-pack.jpg");
}
.button {
  background-color: #00A9D0;
  color: black;
  border-radius: 5px;
  padding: .25rem 1rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  margin: 2rem 0 0 0;
  display: inline-block;
}
.button.secondary,
.button.disabled {
  background-color: #003947;
  color: #0f0f0f;
}
.button:hover,
.button:focus {
  color: #333;
}

select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}
select::-ms-expand {
  display: none;
}
.select {
  margin: 1rem auto 0;
  width: 80%;
  min-width: 15ch;
  max-width: 30ch;
  border: 0;
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: rgba(255,255,255,.75);
  display: grid;
  grid-template-areas: "select";
  align-items: center;
}
.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: #000;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
}
select,
.select::after {
  grid-area: select;
}


.fp-tableCell {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.logo {
  position: fixed;
}

.footer {
  background-color: #10171F;
  padding:2rem 0;
}




#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background-color: white;
}

/***COOKIE BANNER***/
#cookies-eu-banner {
  margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width:100vw;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
#cookies-eu-banner p {
    font-size: 100%;
  width: 100%;
  max-width: 50%;
    color: #fff;
    padding: 1rem;
    border: 1px solid #fff;
    background-color: #000;
}
#cookies-eu-banner a {
  text-decoration: underline;
}
#cookies-eu-analytics,
#cookies-eu-accept {
  margin-left: 1rem;
}
#cookies-eu-reject,
#cookies-eu-analytics,
#cookies-eu-accept {
  margin-top: 1rem;
}
.button#cookies-eu-analytics,
.button#cookies-eu-reject {
  background-color: #444;
  color: #ccc;
  font-weight: 400;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
  h1,h2,h3,h4,h5,p {
    padding: 0 10%;
    text-align: center;
  }
  h1{
    font-size: 2rem;
  }
  h2{
    font-size: 1.5rem;
  }
  li {
    margin: 0 2rem;
    font-size: 80%;
  }
  img {
    max-width: 80%;
  }
  .logo {
    top: 2%;
    right: 4%;
    width: 125px;
    height: 50px;
  }
  .logo img {
    max-width: none;
  }
  #fp-nav.fp-right {
    right: 0;
  }
  .spezifikationen img {
    max-width: 80px;
  }
  .performance img {
    max-width: 60%;
  }
  .kaufen img {
    max-width: 50%;
  }
  .bauweise .fp-tableCell h2,
  .start .fp-tableCell h1 {
    padding-top: 3rem;
  }
  .bauweise .fp-tableCell,
  .start .fp-tableCell {
    display: table-cell;
    vertical-align: top;
  }
}

/* Medium and up */
@media screen and (min-width: 40em) {
  h1,h2,h3,h4,h5,p {
    padding: 0 10%;
    text-align: center;
  }
  h1{
    font-size: 3rem;
  }
  h2{
    font-size: 2rem;
  }
  p {
    font-size: 1.25rem;
  }
  li {
    margin: 0 2rem;
    font-size: 100%;
  }
  img {
    max-width: 400px;
  }
  .logo {
    top: 2%;
    right: 2%;
    width: 150px;
    height: 80px;
  }
  .logo img {
    max-width: none;
  }
  #fp-nav.fp-right {
    right: 0;
  }
  .zubehoer img {
    max-width: 70%;
  }
  .spezifikationen img {
    max-width: 140px;
  }
  .performance img {
    max-width: 60%;
  }
  .kaufen img {
    max-width: 50%;
  }
  .bauweise .fp-tableCell h2,
  .start .fp-tableCell h1 {
    padding-top: 3rem;
  }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {
  h1{
    font-size: 4rem;
  }
  h2{
    font-size: 3rem;

  }
  img {
    max-width: 800px;
  }
  .logo {
    top: 2%;
    right: 2%;
    width: 300px;
    height:70px;
  }
  .logo img path {
    fill: white;
  }
  .zubehoer img {
    max-width: 40%;
  }
  .spezifikationen img {
    max-width: 80px;
  }
  .performance img {
    max-width: 60%;
  }
  .kaufen img {
    max-width: 25%;
  }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}