@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: Helvetica Bold;
    src: url( "../font/Helvetica/Helvetica-Bold-02.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
    font-family: LiberationMono;
    src: url( "../font/LiberationMono/LiberationMono-Regular.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
    font-family: Oswald;
    src: url( "../font/Oswald/Oswald-Regular.ttf") /* TTF file for CSS3 browsers */
}

html { scroll-behavior: smooth; }

.noBorder {
    border: 0px;
    padding:0; 
    margin:0;
    border-collapse: collapse;
}


/* hide scrollbar but allow scrolling */
body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}



html {
        scroll-behavior: smooth;
	padding: 0;
	top: 0;
	left: 0;
	right: 0;
      }

/*bg video*/
#background-video {
  	height: 100vh;
  	width: 100vw;
  	object-fit: cover;
	position: absolute;
 	top: 0;
	right: 0;
	left: 0;
	z-index: -3;	
}

body { 
	overflow-x: hidden;
	overflow-y: scroll;
  width: 100vw;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
  height: 200vh;
}

div {
  width: 200vw;
  position: fixed;
}

#box01{
  	height: 100vh;
  	width: 100vw;
	float: left;
	position: relative;
	margin-left: 0;
	margin-right: 0;
}

#box02{
  	 height: 100vh;
  	width: 100vw;
	float: left;
	position: relative;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0px;
	margin-top: 0px;
}

#wrapper {
	height: 100vh;
	width: 100vw;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
}

#centertext{
 display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
	width: 100vw;
padding: 20px;
animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */

}


/*LINK DECORATION */

a.white:link {color: #FFFFFF; }
a.white:visited {color: #FFFFFF; }
a.white:hover {color: #DBDBDB; }
a.white:focus {color: #FFFFFF; }
a.white:active {color: #FFFFFF; }

a.grey:link {color: #FFFFFF; }
a.grey:visited {color: #FFFFFF; }
a.grey:hover {color: #000000; }
a.grey:focus {color: #FFFFFF; }
a.grey:active {color: #000000; }

a.black:link {color: #000000; }
a.black:visited {color: #000000; }
a.black:hover {color: #FFFFFF; }
a.black:focus {color: #000000; }
a.black:active {color: #FFFFFF; }


a:hover {
        
        background-color: none;
        text-decoration: none;
}
a:link {
      
        text-decoration: none;
}

html {
        scroll-behavior: smooth;

      }

/*LINK DECORATION ENDE */




a#solitude{
width:25vh;
height:50vh;
background: transparent url("../pic/content/Solitude_Plakat.jpg") 0px -0px no-repeat;
background-size: 100%;
	
}
a:hover#solitude{
background: transparent url( "../pic/gif/st_01.gif") no-repeat;
background-size: 100%;
}

a#ganzeinfach{
width:25vh;
height:50vh;
background: transparent url("../pic/content/GE_Cover_Laurels.jpg") 0px -0px no-repeat;
background-size: 100%;
	
}
a:hover#ganzeinfach{
background: transparent url( "../pic/gif/ge_02.gif") 0px -0px no-repeat;
background-size: 100%;
}

a#fluchtpunkt{
width:25vh;
height:50vh;
background: transparent url("../pic/content/FP_Plakat.jpg") 0px -0px no-repeat;
background-size: 100%;
	
}
a:hover#fluchtpunkt{
background: transparent url( "../pic/gif/fp_01.gif") 0px -0px no-repeat;
background-size: 100%;
}



/*enter animation*/
#enter{
 margin: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	
animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */

}

a#enter{
display:block;
width:20vh;
height:20vh;
background: transparent url(  "../pic/layout/enter/ja_logo_black.svg") 0px -0px no-repeat;
background-size: 100%;
	
}
a:hover#enter{
background: transparent url( "../pic/layout/enter/ja_logo.svg") 0px -0px no-repeat;
background-size: 100%;
}

/*enter animation ende*/


/*cookies*/

  body {
      background: #eee;
      font-size: 16px;
    }

	#footer-cookie,
 	 #footer-cookie * {
      box-sizing: border-box;
    }

    #footer-cookie {
      display: none;
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 60px;
      padding-left: 30px;
      padding-right: 30px;
      line-height: 60px;
      background: #000000;
      color: #ffffff;
    }
    
    #footer-cookie a {
      color: #FFFFFF;
    }

    #footer-cookie #description {
      float: left;
    }

    #footer-cookie #accept {
      float: right;
    }

    #footer-cookie #accept a {
      border: 1px solid #fff;
      padding: 5px 10px;
      text-decoration: none;
    }

    @media (max-width: 1200px) {
      #footer-cookie {
        padding-top: 30px;
        padding-bottom: 30px;
        line-height: inherit;
        height: auto;
      }

      #footer-cookie #description {
        width: 100%;
      }

      #footer-cookie #accept {
        width: 100%;
        margin-top: 15px;
      }

      #footer-cookie #accept a {
        width: 100%;
        display: block;
        text-align: center;
      }
		
		
    }

/*cookies ende*/



/*fadein*/

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {  
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {  
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-o-keyframes fadein { 
        opavcity:0;
    }
    to {
        opacity: 1;
    }
}

/*fadein ende*/