@font-face {
  font-family: SweetlyBroken;
  src: url(../fonts/SweetlyBroken.ttf) format("truetype")
}


body {
    overflow: hidden; /* Hide scrollbars */
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    background-image:    url(../img/background.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center;
    background-color: #000000;
    height: 100vh;
}

a, a hover, a visited {
  color: #ffffff;
  text-decoration: none;
}

.page {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: relative;
}


/* NAVIGATION */
nav {
  width: 100vw;
  height: 50px;
  margin: 0;
  background: #000000;
  padding: 50px 0;
}
nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}

/* SHIFT */
nav.shift ul li a {
  position:relative;
  z-index: 1;
}
nav.shift ul li a:hover {
  color: #91640F;
}
nav.shift ul li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #F1C40F;
  visibility: none;
  opacity: 0;
  z-index: -1;
}
nav.shift ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

/* End NAVIGATION */

.logo {
    font-family: SweetlyBroken, Helvetica, Arial, sans-serif;
    font-size: 70px;
    left:auto;
    bottom: 110px;
    color: #ffffff;
    position: absolute;
}

.alternateDesignsNav {
  font-size: 12px;
  left:auto;
  bottom: 100px;
  color: #ffffff;
  position: absolute;
  width: 700px;
}



.contact {
 bottom: 5px;
 position: absolute;
 color: #ffffff;
 display: flex;
 justify-content: center;
 align-items: center;
}


.panel {
	display: none;
  position: absolute;
	overflow: visible !important;
  width: 90vw;
  height: 90vh;
  left: 5vw;
  top: 5vh;
}

.panel.aboutBox {
  background-color: #F1C40F;
  justify-content: center;
}

.aboutText {
  font-size: 20px;
  padding: 50px;
  justify-content: space-between;
}

.aboutTextSpace {
  width: 100px;
}

.panelFullScreenClose {
  display: none;
  position: absolute;
  right: 6vw;
  top: 6vh;
}

/* **************************************
  		Begin Bilder Galerie
     **************************************/
     .mySlides {display: none}

     /* Slideshow container */
     .slideshow-container {
      width: 100%;
      position: relative;
      
      /*
        margin: auto;
      */
     }
     
     /* Next & previous buttons */
     .slideShowprev, .slideShownext {
      
      /*
        
        cursor: pointer;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        border-radius: 0 3px 3px 0;	  
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease; 
        user-select: none;
      */
      
      position: absolute;
         bottom: 0px;
         color: white;
      cursor: pointer;
     }
     
     /* Position the "next button" to the right */
     .slideShownext {
         right: 20px;
     }
  
     .slideShowprev {
      left: 20px;
      }
     
        
     /* Number text (1/3 etc) */
     .slideShownumbertext {
      color: #FFFFFF;
      position: absolute;
      bottom: 34px;
      left: 50%
     }
     
     /* The dots/bullets/indicators */
     .slideShowdot {
       cursor: pointer;
       height: 15px;
       width: 15px;
       margin: 0 2px;
       background-color: #bbb;
       border-radius: 50%;
       display: inline-block;
       transition: background-color 0.6s ease;
     }
     
     .slideShowNav {
      width: 100%;
      height: 55px;
      bottom:5px;
      position:relative;
      background-color: #000000;
     }
  
     .slideShowactive, .slideShowdot:hover {
       background-color: #717171;
     }
     
     /* Fading animation */
     .slideShowfade {
       animation-name: fade;
       animation-duration: 1.5s;
     }
     
     @keyframes slideShowfade {
       from {opacity: .4} 
       to {opacity: 1}
     }
     
     /* On smaller screens, decrease text size */
     @media only screen and (max-width: 300px) {
       .slideShowprev, .slideShownext {font-size: 11px}
     }
  
  /* **************************************
        Ende Bilder Galerie
     **************************************/

  /*******************************
    Mobile Version
  ********************************/
  .mobile {
    display: none;
  }

  .startPageMobile {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.backgroundMobile {
    position: absolute;
}

.textMobile {
    z-index: 2;
    position: relative;
    top: 28vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mobileContainer {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

  @media screen and (max-width: 600px) {
    .page {display: none;}
    .mobile {display: flex}
    a, a hover, a visited {
      color: #0000ff;
      text-decoration: none;
    }
  }