*{
    margin:0;
    padding:0;
}

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

body{
   
    
    width: 100%;
    position:relative;
	height: 98%;
	min-height: 100%;
	overflow-x: hidden;
	
	
	
}

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

/* Hide scrollbar for IE, Edge and Firefox */
html, body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

.section{
    margin:0px;
    bottom:0px;
    width: 98vw;
    position: absolute;
    height:100%;
   
	overflow-y: auto;
}

.black,
.black.inactive {
   
    background:#fff;
	left: 0;
}
.black.inactive {   
    background:#000;
	left: 0;
}

.white,
.white.inactive{
    
    background:#000;	
	left: 98vw;
}

.swapper {
	/* position: absolute; */
	position: relative;
	width: 198%;	
	/* height: 100%; */
	height: auto;
			
	-webkit-transform: translateX(-48%);
	-moz-transform:    translateX(-48%);
	-ms-transform:     translateX(-48%);
	-o-transform:      translateX(-48%);
	transform:         translateX(-48%);
		

	-webkit-transition: transform 1s ease;
    -moz-transition:    transform 1s ease;
    -o-transition:      transform 1s ease;
    -ms-transition:     transform 1s ease;
    transition:         transform 1s ease;

}
.swapper.left {	
	-webkit-transform: translateX(0);
	-moz-transform:    translateX(0);
	-ms-transform:     translateX(0);
	-o-transform:      translateX(0);
	transform:         translateX(0);
}


/* .swapper::after {
	content: "";
	width: 101px;
	height: 785px;
	position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	margin: 0 auto;
	background-image: url('Zwhatt-Klebeband-170-2p.png');
	background-repeat: no-repeat;
	background-size: 94px auto;
	background-position: 0;
	pointer-events: none;
	
} */

.section {
	position: absolute;
	
}

#section1 {
	position: relative;
	
}
#section2 {
	height: 101vh;
	top: 0;
}
#section2.inactive {
	height: 100%;
}


.section .overlay {
	opacity: 0;	
	transition: opacity 1s ease;	
	z-index: 25;
}

.inactive .overlay {
	opacity: 0.8;		
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	/* cursor: w-resize; */
	/* cursor: pointer; */
	
	
}
.section.black {
	overflow: hidden;
}


div.tape {
	width: 140px;
	height: calc(100% - 20px);
	position: absolute;
	z-index: 30;
	top: 20px;
	left: 0;
	right: 111px;
	margin: 0 auto;
	background-image: url('210416_Zwhatt-Klebeband.png');
	/* background-repeat: repeat-y;
	background-size: 134px 90vh; */
	/* background-repeat: no-repeat; */
	background-repeat: repeat-y;
	background-size: 134px auto;
	background-position: 0 0;
	cursor: pointer;
	transition: all .2s ease;
	transform: translateX(10px);	
}

div.tape.loaded {
	animation: horizontal-shaking 1s 1 .4s forwards;		
}

div.tape:hover {	
	animation: horizontal-shaking-half 1s 1 forwards;	
}

@keyframes horizontal-shaking {
 0% { transform: translateX(10px) } 
 20% { transform: translateX(10px) }
 30% { transform: translateX(-20px) }
 40% { transform: translateX(-15px) }
 50% { transform: translateX(-20px) }
 65% { transform: translateX(-20px) }
 80% { transform: translateX(10px) }
 90% { transform: translateX(15px) }
 100% { transform: translateX(10px) }
}

@keyframes horizontal-shaking-half {
 0% { transform: translateX(10px) } 
 20% { transform: translateX(10px) }
 30% { transform: translateX(-5px) }
 40% { transform: translateX(0px) }
 50% { transform: translateX(-5px) }
 
 100% { transform: translateX(10px) }
}



@media screen and (max-width: 1280px) {
	div.tape {
		width: 74px;
		right: 42px;
		height: calc(100% - 20px);		
		background-image: url('210416_Zwhatt-Klebeband-mobile.png');
		background-repeat: repeat-y;
		background-size: 64px auto;
		background-position: 0 0;		
	}
}

@media screen and (max-width: 980px) {
	div.tape {
		width: 54px;
		right: 15px;
		height: calc(100% - 20px);		
		background-image: url('210416_Zwhatt-Klebeband-mobile.png');
		background-repeat: repeat-y;
		background-size: 48px auto;
		background-position: 0 0;		
	}	
}


@media screen and (max-width: 680px) {
	/*
	div.tape {
		width: 54px;
		right: 15px;
		height: calc(100% - 20px);		
		background-image: url('210416_Zwhatt-Klebeband-mobile.png');
		background-repeat: repeat-y;
		background-size: 48px auto;
		background-position: 0 0;		
	}
	*/
	
	
	.swapper {		
		width: 190%;		
				
		-webkit-transform: translateX(-44.5%);
		-moz-transform:    translateX(-44.5%);
		-ms-transform:     translateX(-44.5%);
		-o-transform:      translateX(-44.5%);
		transform:         translateX(-44.5%);		

	}
	
	.white,
	.white.inactive{		
		left: 94vw;
	}
	
	.section{		
		width: 94vw;		
	}
	
}

@media screen and (max-width: 380px) {
	div.tape {
		width: 54px;
		right: 5px;
		height: calc(100% - 20px);		
		background-image: url('210416_Zwhatt-Klebeband-mobile.png');
		background-repeat: repeat-y;
		background-size: 40px auto;
		background-position: 0 0;		
	}
}