/***********************************************************************************/
/* @rem
/* @boxsizing
/* @grid
/* @viewport
/* @fonts
/***********************************************************************************/

/***********************************************************************************/
/* reset
/***********************************************************************************/

html, 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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
  background-repeat:no-repeat;
}

body {
  line-height:1;
  scroll-behavior: smooth;
}

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

nav ul {
  list-style: none;
}

blockquote, q {
  quotes:none;
}

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

a {
  margin:0;
  padding:0;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: .1rem dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:.1rem;
  border:0;
  border-top:.1rem solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

/***********************************************************************************/
/* basics
/***********************************************************************************/

*, *:before, *:after {
  /* float: left; */
  box-sizing: inherit;
}

@viewport {
  width: device-width;
  zoom:1;
}

html {
  font-family: Arial, sans-serif;
  font-size: 62.5%;
  box-sizing: border-box;
}

/*@media screen and (min-width: 1600px) {
  html {font-size: 93.75%;}
}*/

body {
  position: relative;
  width: 100%;
  width: 100 vw;
  min-height: 100%;
  min-height: 100vh;
}

img {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 100%;
  vertical-align: top;
}

a {
  color: #d0103e;
  text-decoration: none;
}

a:hover {
  text-decoration: underline !important;
}

img.lazyload {
  width: 100%;
}

.hidden {
  display: none;
}

div,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  width: 100%;
}

/***********************************************************************************/
/* grid
/***********************************************************************************/

.wrapper {
  width: 100%;
  overflow-x: hidden;
}

.container {
  float: none;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
}

.column {
  float:left;
  padding:0 2rem;
}

.column.gutterLess {
  padding: 0 !important;
}

.column.gutterLeft {
  padding: 0 0 0 2rem !important;
}

.column.gutterRight {
  padding: 0 2rem 0 0 !important;
}

@media screen and (max-width:700px) {
  .column {padding: 0 1rem;}
  .sm1 { width: 25%; }
  .sm2 { width: 50%; }
  .sm3 { width: 75%; }
  .sm4 { width:100%; }
}

@media screen and (min-width:700px) and (max-width:959px) {
  .md1 {  width:  8.33333333333%; }
  .md2 {  width: 16.6666666667%;  }
  .md3 {  width: 25.0%;           }
  .md4 {  width: 33.3333333333%;  }
  .md5 {  width: 41.6666666667%;  }
  .md6 {  width: 50.0%;           }
  .md7 {  width: 58.3333333333%;  }
  .md8 {  width: 66.6666666667%;  }
  .md9 {  width: 75.0%;           }
  .md10 { width: 83.3333333333%;  }
  .md11 { width: 91.6666666667%;  }
  .md12 { width:100%;             }
}

@media screen and (min-width:960px) {
  .lg1 {  width:  8.33333333333%; }
  .lg2 {  width: 16.6666666667%;  }
  .lg3 {  width: 25.0%;           }
  .lg4 {  width: 33.3333333333%;  }
  .lg5 {  width: 41.6666666667%;  }
  .lg6 {  width: 50.0%;           }
  .lg7 {  width: 58.3333333333%;  }
  .lg8 {  width: 66.6666666667%;  }
  .lg9 {  width: 75.0%;           }
  .lg10 { width: 83.3333333333%;  }
  .lg11 { width: 91.6666666667%;  }
  .lg12 { width:100%;             }
}

/***********************************************************************************/
/*  layout
/***********************************************************************************/

.pageRotate {
  /* transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg); */
  /* transform: translateY(-300px); */
  /* margin: -12rem 0 0 7rem; */
  /* width: 1080px;
  height: 1920px; */
  /* transform-origin:  50%; */
  /* position: absolute;
  top: -840px;
  left: 840px; */
}

iframe {
  width: 23%;
  height: 1920px;
  margin-left: 4.5rem;
  float: left;
  overflow: hidden;
  scroll-behavior: smooth;
}
iframe:first-of-type{margin-left: 12.5rem}
body, html {
  width:1080px ;
  height: 1920px;
  overflow:hidden;
  background: #4d4d4d;
  /* margin-left: -30rem; */
}


/***********************************************************************************/
/*  Loop
/***********************************************************************************/

html,
body {
  height: 100%;
  overflow: hidden;
}

.Loop {
  position: relative;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.Loop *, .Loop *:before, .Loop *:after {
  float: none !important;
}

section {
  position: relative;
  text-align: center;
  min-height: 15rem;
  max-height:46.5rem;
  height: 80%;
}

::scrollbar {
  display: none;
}


body {
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
}
.animated{
  animation: transitionIn 2s
}
/* iframe:first-of-type,iframe:nth-of-type(3){
  top:3rem;
  position: relative;
}
iframe:nth-of-type(2),iframe:nth-of-type(5){
  top:-33rem;
  position: relative;
} */
.one {
  background: #81234e;
}

.two {
  background: #df5252;
}

.three {
  background: #ff9a56;
}

.four {
  background: #371465;
}

h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 80px;
  letter-spacing: 5px;
  color: #fff;
  text-transform: uppercase;
}
a{
  color: white;
}
section{
  position: relative;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center center;
}
section.p70{
  background-size: 49%;
  max-height: 32.5rem;
}
section.p95{
  background-size: 66.5%;
}
section.p110{
  background-size: 77%;
}
.linkFull{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 12;
  -webkit-tap-highlight-color: transparent;
}

.linkFull:focus,.linkFull:focus-within,.linkFull:focus-visible{
  background-color: transparent;
}
.flag{
  top: 46%;
  display: block;
  background:url('../Melitta_Flagge.png') no-repeat;
  background-size:contain;
  height: 16rem;
  width: 10rem;
  position: absolute;
  left: 0;
}

/***********************************************************************************/
/*  Menu
/***********************************************************************************/


.mainNav{
  position: absolute;
  top: 58.3%;
  background: #5B5B5B;
  width: auto;
  font-size: 6rem;
}
.mainNav ul{padding: 2.25rem}
.mainNav ul li{
  list-style: none;
}

.mainNav ul li a{
  background:  #444444;
  border-radius: 10px;
  width: 5rem;
  height: 5rem;
  display: block;
  margin-bottom: 1.5rem;
}
.mainNav ul li:last-of-type a{margin-bottom: 0;}
.mainNav ul li a.disabled{
  opacity: .4;
  pointer-events: none;
}
.mainNav ul li a.active{
  background: white;
}

#next,#prev{
  display: none;
}

/***********************************************************************************/
/*  SVG Menu Icon colors
/***********************************************************************************/

.transparent{fill:none;}
.lightgrey{fill:#E3E3E3;}
.mcsRed{fill:#E20021;}
.active .lightgrey{fill: #444444}
.disabled .lightgrey, .disabled .mcsRed{fill:#959595;}

/***********************************************************************************/
/* Animation fadeIn on swipe
/***********************************************************************************/

@keyframes transitionIn {
  from {
    opacity: 0;
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform-origin: center;
  }
}



.parent {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 2rem;
  column-gap: 4.5rem;
  position: absolute;
  top: 25rem;
  width: 69%;
  left: 16rem;
  height: 81%;
}

.parent > div {
  text-align: center;
  padding: 20px 0;
  position: relative;
  font-size: 30px;
}
.parent > div a,.highlight > div a{color: transparent;}

.highlight > div{
  position: absolute;
  width: 27rem;
  height: 24rem;
  right: 12rem;
}
.highlight > div:nth-child(1) {
  top: 43%;
}
.highlight > div:nth-child(2) {
  top: 50%;
}
.highlight > div:nth-child(3) {
  top: 57%;
}