/* Stylesheet for fullpage */

* {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color: #ffffff;
  overflow: hidden;
  color: #1d1d1b;
  font-size: 0.875rem; /* 14 px */
  font-size: 0.75rem; /* 12 px */
  /* fallback font-size */
  font-size: 12px;
  /* % of viewport height */
  font-size: 1.15vh;
  line-height: 120%;
  -webkit-font-smoothing: subpixel-antialiased;
}

h1 {
  font-size: 4.2rem;
  line-height: 115%;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
}

h2 {
  font-size: 25px;
  /* root em */
  font-size: 2.05rem;
  line-height: 115%;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
}

h1 a,
h2 a {
  text-decoration: none;
}

h1 a:hover,
h2 a:hover {
  text-decoration: underline;
}

a,
a:visited {
  color: black;
  text-decoration: underline;
}

a:hover {
  color: #1d1d1b;
  text-decoration: none;
}

.artists a {
  line-height: 130%;
}

#sticky {
  margin: 0 auto;
  padding: 10px 0;
  height: 100%;
  box-sizing: border-box;
  width: auto;
  z-index: 1000;
  pointer-events: none;
  position: fixed;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

#menu-wrapper,
.output {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

#menu {
  position: fixed;
  z-index: 1010;
  display: none;
}

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* overflow-y: auto; */
}

#menu ul li {
  padding-bottom: 0.4rem;
}

#menu ul li ul {
  padding-top: 0.4rem;
}

#menu a {
  color: #ffffff;
  text-decoration: none;
}

#menu a:hover {
  text-decoration: underline;
}

.wrapper {
  height: 100%;
  width: 100%;
}

.content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
}

.box {
  position: relative;
  width: 50%;
  height: 33.3333%;
  float: left;
  display: inline-block;
}

.Dbox {
  position: relative;
  width: 50%;
  height: 66.6666%;
  float: right;
  display: inline-block;
  overflow: hidden;
}

.boxHhalf {
  position: relative;
  width: 25%;
  height: 33.3333%;
  float: left;
  display: inline-block;
}

.Vhalf {
  position: relative;
  width: 100%;
  height: 50%;
  float: left;
  display: inline-block;
}

.Hhalf {
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
  display: inline-block;
  border: none;
}

.padding {
  padding: 0.8rem 0.8rem;
  box-sizing: border-box;
  overflow: hidden;
}

.Lpadding {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 0.8rem;
}

.Rpadding {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-right: 0.8rem;
}

.RtextContent {
  position: relative;
  padding-right: 0.8rem;
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.LtextContent {
  position: relative;
  padding-left: 0.8rem;
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.grey {
  background-color: #e5e5e5;
}

.full {
  width: 100%;
  height: 100%;
}

.coloredLayer {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.8rem;
}

.padding .bg-grey {
  position: absolute;
  width: calc(100% - 0.8rem);
  height: calc (100% - 0.8rem);
}

.bg-green {
  background-color: #e5e5e5;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.bg-green a:hover {
  color: #1d1d1b;
}

.bg-anthrazit {
  background-color: #1c1b1a;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  text-transform: uppercase;
}

/* https://gist.github.com/amitabhaghosh197/4ae652e506ddfd98a18d */
.loading {	
	background-size: 64px 64px !important;
	background: url(https://sechseinhalb.ch/wp-content/uploads/2016/12/loader.gif) no-repeat #FFFFFF 50%;
}

/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* CSS Statements that only apply on webkit-based browsers: Chrome, Safari, Opera, Android, iOS
	 * not on FireFox, IE
	 */
  .bg-anthrazit {
    overflow-y: auto;
  }
  .bg-anthrazit::-webkit-scrollbar {
    width: 0.5em;
  } /* this targts the default scrollbar (compulsory) */

  .bg-anthrazit::-webkit-scrollbar-thumb {
    background-color: #bbbbbb;
  } /* this will style the thumb, ignoring the track */

  .bg-anthrazit::-webkit-scrollbar-corner {
    background-color: #bbbbbb;
  }
} /* media / webkit query */

h1.seitenTitel {
  font-size: 1.5rem; /* 18 px */
  margin: 0;
  padding: 0;
  font-weight: normal;
  line-height: normal;
}

.plakat {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.artikelBild,
.artikelBild1,
.artikelBild2 {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.artikelBild1 {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2016/12/6-15-12.jpg);
}

.artikelBild2 {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2016/12/6-15-3.jpg);
}

a.fLarge {
  font-size: 1.5rem;
  text-decoration: none;
}

a.fLarge:hover {
  color: #1d1d1b;
}

.exTitel {
  margin: 0;
  font-weight: normal;
  font-size: 3rem;
  line-height: initial;
  word-wrap: break-word;
}

#newsletter {
  padding: 0;
  max-width: 8rem;
  float: left;
}

#newsSubmit {
  float: left;
  padding: 0.6em 0.3em 0.4em;
  margin-left: 1em;
}

.bild {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* background-image: url(http://sechseinhalb.ch/wp-content/uploads/2016/12/zitrone.png); */
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.socials {
  position: absolute;
  bottom: 0;
  right: 0;
}

.socials a:hover {
  color: #ff0000;
}

a.share-FB {
  /* color: #3b5998; */
  padding-right: 4px;
}

a.share-twitter {
  /* color: #55ACEE; */
  padding-right: 4px;
}

a.share-google {
  /* color: #C74538; */
  padding-right: 4px;
}

#menu {
  color: #ffffff;
}

#menu li.active,
#menu li.active a,
#menu li a.active {
  color: #e93b2e;
}

.color-overlay {
  opacity: 0.5;
  display: inline-block;
  top: 0;
  left: 0;
  position: absolute;
}

/* arrows slide */

.fp-controlArrow.fp-prev {
  border-color: transparent #1c1b1a transparent transparent !important;
}

.fp-controlArrow.fp-prev:hover {
  border-color: transparent #6dcaf3 transparent transparent !important;
}

.fp-controlArrow.fp-next {
  border-color: transparent transparent transparent #1c1b1a !important;
}

.fp-controlArrow.fp-next:hover {
  border-color: transparent transparent transparent #6dcaf3 !important;
}

.loader {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

/* http://stackoverflow.com/questions/35004261/fullpage-js-setting-responsivewidth-and-scrolloverflow-breaks-page-on-mobile */
.fp-responsive .fp-section,
.fp-responsive .fp-slide,
.fp-responsive .fp-tableCell {
  height: auto !important;
}

.box-content {
  width: 100%;
  height: 100%;
}

.nav .fa-arrow-up,
.nav .fa-arrow-down {
  text-align: center;
  display: inherit;
}

/* https://codepen.io/rugor/pen/xGXYzB */
.flexslider .slides > li {
  background-position: center;
  height: 100%;
  width: 100%;
  display: none;
  background-size: cover;
  image-rendering: crisp-edges;
}

.noflexslider .slides > li {
  background-position: center;
  height: 100%;
  width: 100%;
  display: block;
  background-size: cover;
}

.flexslider .slides li .fancybox,
.noflexslider .slides li .fancybox { 
  height: 100%;
  width: 100%;
  display: inline-block;
}

.flexslider-container,
.flexslider .slides,
.noflexslider .slides,
.flex-viewport {
  height: 100%;
}

ul.slides {
  margin: 0;
  padding: 0;
}

.flexslider,
.noflexslider {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 0px;
  border-radius: 0;
  overflow: hidden;
}

.flex-direction-nav a,
.flex-direction-nav a:before {
  line-height: 40px;
  color: rgba(255, 255, 255, 0.5);
}

.farbfeld {
  width: 100%;
  height: 100%;
}

.color-overlay,
.bild {
  width: 100%;
  height: 100%;
}

.bg-green,
.colored {
  position: relative;
  width: 100%;
  height: 100%;
}

.galerie-links {
  position: absolute;
  bottom: 0;
  height: 2.88rem;
}

.google-maps {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/icon_google-maps_225px.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 2.8rem;
  height: 2.8rem;
  margin-right: 2px;
}

/* preload hover image */
.google-maps:before {
  content: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/icon_google-maps_hover_225px.png);
  width:0;
  height:0;
  display: none;
  position: absolute;
}

.google-maps:hover {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/icon_google-maps_hover_225px.png);
}

.mail-to {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/Icon_mail_141px.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
}

/* preload hover image */
.mail-to:before {
  content: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/Icon_mail_hover_141px.png);
  width:0;
  height:0;
  display: none;
  position: absolute;
}

.mail-to:hover {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/Icon_mail_hover_141px.png);
}

.fb-seite {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/Icon_fb_141px.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  margin-right: 6px;
}

/* preload hover image */
.fb-seite:before {
  content: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/Icon_fb_hover_141px.png);
  width:0;
  height:0;
  display: none;
  position: absolute;
}

.fb-seite:hover {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/04/Icon_fb_hover_141px.png);
}

.insta {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2020/08/insta.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  margin-right: 6px;
}

/* preload hover image */
.insta:before {
  content: url(https://sechseinhalb.ch/wp-content/uploads/2020/08/insta_hover.png);
  width:0;
  height:0;
  display: none;
  position: absolute;
}

.insta:hover {
  background-image: url(https://sechseinhalb.ch/wp-content/uploads/2020/08/insta_hover.png);
}

.mc4wp-form-fields input,
.yikes-mailchimp-container input {
  font-family: "Roboto", sans-serif;
}

.mc4wp-form-fields input[type="email"],
.yikes-mailchimp-container input[type="email"] {
  border-radius: 0;
  border: 1px solid #000;
  color: #000;
  background-color: transparent;
  padding: 1rem;
  width: calc(100% - 1rem);
}

.yikes-mailchimp-container input[type="email"]:focus,
.mc4wp-form-fields input[type="email"]:focus {
  border-color: #000000;
  outline: none;
}

.mc4wp-form-fields input[type="submit"],
.yikes-mailchimp-container input[type="submit"],
.yikes-easy-mc-submit-button {
  border: none;
  text-decoration: underline;
  color: #000;
  text-align: left;
  background-color: transparent;
  text-transform: uppercase;
  box-shadow: none;
  padding: 0;
  font-size: 4.4rem;
  line-height: 110%;
  font-weight: normal;
  text-shadow: none;
  font-family: "Roboto", sans-serif;
}

.yikes-mailchimp-container input[type="submit"]:after,
.mc4wp-form-fields input[type="submit"]:after {
  content: ".";
}

.mc4wp-form-fields input[type="submit"]:hover,
.yikes-mailchimp-container input[type="submit"]:hover,
.yikes-easy-mc-submit-button:hover {
  text-decoration: none;
  box-shadow: none;
}

.yikes-mailchimp-container .edit-link {
  display: none;
}

/* hide the boxes */
.box_overlay {
  display: none;
}

/* screen height > 800 px and screen width > 1000 px */
@media only screen and (min-height: 800px), (min-width: 1000px) {
  /* https://www.fourfront.us/blog/jquery-window-width-and-media-queries */
  #sampleClass {
    float: right;
  }
}

/* screen height < 800px and screen width < 1000px */
@media only screen and (max-height: 800px), (max-width: 1000px) {
  html,
  body {
    /* fallback in px */
    font-size: 14px;
    /* % of viewport width */
    font-size: 1.9vw;
    /*
		font-size: 1.9vmin;
		*/
    line-height: 120%;
    /* reset max-width */
    max-width: none;
  }

  h1 {
    font-size: 4rem;
    line-height: normal;
  }

  h2 {
    font-size: 2rem;
    line-height: normal;
  }

  #sampleClass {
    float: left;
  }

  .wrapper {
    height: auto;
  }

  .box,
  .Dbox {
    position: relative;
    width: 100%;
    height: auto;
  }

  .box:before {
    content: "";
    display: block;
    padding-top: 70.71%; /* 1 : SQR 2 */
  }

  .Dbox:before {
    content: "";
    display: block;
    padding-top: 141.42%; /* 1 : SQR 2 */
  }

  .bg-green,
  .colored {
    position: relative;
    z-index: -10;
    width: 100%;
    height: 100%;
  }

  /* change to absolute */
  .box-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: 100% 100%;
  }

  .box_overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-top: 1px solid #1d1d1b;
    border-left: 1px solid #1d1d1b;
    border-right: 1px solid #1d1d1b;
    background-size: 100% 100%;
    z-index: 10;
    pointer-events: none;
  }

  #box_one {
    background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/01/box_one.svg);
  }

  #box_two {
    background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/01/box_two.svg);
  }

  #box_three {
    background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/01/box_three.svg);
  }

  #box_four {
  }

  #box_five {
    background-image: url(https://sechseinhalb.ch/wp-content/uploads/2017/01/box_five.svg);
  }

  .box-content .artikelBild,
  .box-content .bild,
  .box-content .color-overlay,
  .five .bg-green {
    width: calc(100% - 1.6rem);
    height: calc(100% - 1.6rem);
    margin: 0.8rem;
  }

  .section:last-of-type .five {
    border-bottom: 1px solid #1d1d1b;
  }

  .socials {
    /* display: none;  */
  }

  .farbfeld {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    margin-right: 0.8rem;
    width: calc(100% - 0.8rem);
    height: calc(100% - 1.6rem);
  }

  .color-overlay,
  .bild {
    position: absolute;
    width: calc(100% - 0.8rem) !important;
    height: calc(100% - 1.6rem) !important;
    margin-right: 0;
    z-index: -10;
  }

  .flexslider,
  .noflexslider {
    width: calc(100% - 1.6rem);
    height: calc(100% - 1.6rem);
    margin: 0.8rem;
  }

  #menu {
    position: absolute;
  }
}

.startseite .box-content.three .Hhalf.padding p {
  hyphens: auto;
  margin-bottom: .8rem;
}

.box-content.one .Hhalf .Vhalf.padding {

}

.archiv {
    background-color: #e93b2e;
    display: inline-block;
    padding: 0 .5rem;
    color: #FFF;
    letter-spacing: 1px;
    font-weight: bold;
}

/* screen height < 800 px and screen width > 1100 px */
@media only screen and (max-height: 800px) and (min-width: 1100px) {
  html,
  body {
    font-size: 21px;
    line-height: 120%;
  }
}

/* screen width < 500px */
@media only screen and (max-width: 500px) {
  html,
  body {
    font-size: 10px;
    line-height: 120%;
    min-width: 500px;
  }
}