/* ******
Basic mechanics
Hide all paragraphs by default
Show them when they receive the class 'on'
Hide them when they receive the class 'off'
Feel free to adjust the defaults to your needs.
****** */

/*#closed-captions p {
	opacity: 0;
	transition: .05s;
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	top: 440px;
	left: 20px;
	z-index: 2;
}
*/

#closed-captions {
	display: flex;
	justify-content: center;

}

#closed-captions p {
	opacity: 0;
	transition: .05s;
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 2.5em;
	z-index: 2;
	max-width: 58%;


}
#closed-captions .on {
opacity: 1;
}
#closed-captions .off {
transition: .2s;
opacity: 0;
}


body{
overflow: hidden;
background-color: black;
}

#Captions{
display: block;
position: absolute;
}

.button{

	position: fixed;
	bottom: 82%;
	left: 4em;
	z-index: 99;
}

#Bgtoggle{
	background:url(Icon-3.png) no-repeat;
    cursor:pointer;
    border:none;
    width:100px;
    height:100px;
}

#Bgtoggle:active {
	background:url(Icon-4.png) no-repeat;
	/* background-color:red; */
}

body{
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.Bgclass{
	background: url('Friends-appartrment.jpg');
}

.Bgclass #video{
	width: auto;
	position: fixed;
	left: 26em;
	bottom: 28em;/* right: 0; */
	transform: translateX(16em) translatey(3em) scale(0.13) skew(-2deg,1deg) scaley(1.3);
}

@media screen and (max-width: 1314px) {
	.Bgclass #video{
		width: auto;
		position: fixed;
		left: 26em;
		bottom: 28em;
		transform: translateX(16em) translatey(16em) scale(0.13) skew(-2deg,1deg) scaley(1.3) ;
	}
}

.sound0 {
background-color: black;
/* background-size: 400% 400%; */


}

.sound1 #video-placeholder{
animation: alarm 2s ease;
transform: scale(1);



}

@keyframes alarm {
0%{
	transform: scale(1);
}
60%{
	transform: scale(1.2);

}
80%{
transform: scale(1);
}
100%{
transform: scale(1);
}
}

.sound2{
	background: linear-gradient(89deg, #000000, #ff0000, #000000);
	background-size: 600% 600%;
	animation: siren 3s ease ;

}

@keyframes siren {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


}
.sound3 #video-placeholder{



}

.sound3 .baseline {
animation: baseline 3s ease;

}

.baseline{
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(140,190,184,0.73) 45%, rgba(140,190,184,1) 100%);
filter: blur(2px);
height: 20px;
width: 22px;
right: 2em;
bottom: 69%;
transform: translateY(50%);
opacity: 0;
margin-top: -30em;
z-index: 1;


}
.baseline2{
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(140,190,184,0.73) 45%, rgba(140,190,184,1) 100%);
filter: blur(2px);
height: 20px;
width: 22px;
right: 2em;
bottom: 69%;
transform: translateY(50%);
opacity: 0;
margin-top: -30em;
z-index: 1;


}
.baseline3 {
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(140,190,184,0.73) 45%, rgba(140,190,184,1) 100%);
filter: blur(2px);
height: 20px;
width: 22px;
right: 2em;
bottom: 69%;
transform: translateY(50%);
opacity: 0;
margin-top: -30em;
z-index: 1;
}

.baseline4 {
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(140,190,184,0.73) 45%, rgba(140,190,184,1) 100%);
filter: blur(2px);
height: 20px;
width: 22px;
right: 2em;
bottom: 69%;
transform: translateY(50%);
opacity: 0;
margin-top: -30em;
z-index: 1;
}


@keyframes baseline {
0% {
	left: 0%;
		height: 30em;
		opacity: 1;
}

90% {
			left: 87%;
			height: 30em;
			opacity: 1;
					}

100% {
		left: 100%;
		height: 30em;
		opacity: 0;
				}

}

@keyframes baseline2 {
0% {
	left: 0%;
		height: 30em;
		opacity: 1;
}

90% {
			left: 87%;
			height: 30em;
			opacity: 1;
					}

100% {
		left: 100%;
		height: 30em;
		opacity: 0;
				}

}
@keyframes baseline3 {
0% {
	left: 0%;
		height: 30em;
		opacity: 1;
}

90% {
			left: 87%;
			height: 30em;
			opacity: 1;
					}

100% {
		left: 100%;
		height: 30em;
		opacity: 0;
				}

}

@keyframes baseline4 {
0% {
	left: 0%;
		height: 30em;
		opacity: 1;
}

90% {
			left: 87%;
			height: 30em;
			opacity: 1;
					}

100% {
		left: 100%;
		height: 30em;
		opacity: 0;
				}

}




.sound3 {
	background: black;
}


.sound6 .baseline2 {
animation: baseline 3s ease;

}
.sound7 .baseline3 {
animation: baseline 3s ease;

}
.sound19 .baseline4 {
animation: baseline 5s ease;

}

.sound8{
background:#A0AD98;
}

.sound8 .noise{
position: absolute;
top: -1%;
left: -2%;
/* right: -50%; */
/* bottom: -50%; */
width: 200%;
height: 200vh;
background: url('1-final.gif') repeat 0 0;
background-repeat: round;
opacity: 1;
visibility: visible;
z-index: -1;
animation: noise0 3s ease forward;
}

@keyframes noise0 {

0%{
	opacity: 0;

}


100%{
	opacity: 1;
}
}


.sound9 .noise{
position: absolute;
top: -1%;
left: -2%;
/* right: -50%; */
/* bottom: -50%; */
width: 200%;
height: 200vh;
background: url('2-final.gif') repeat 0 0;
background-repeat: round;
/* animation: noise .2s infinite; */
opacity: 1;
visibility: visible;
z-index: -1;
animation: noise 3s ease forward;
}

@keyframes noise {
	0% {
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}



.sound9 .noise{
	position: absolute;
	top: -1%;
	left: -2%;
	width: 200%;
	height: 200vh;
  background: url('3-final.gif') repeat 0 0;
  background-repeat: round;
  opacity: 1;
  visibility: visible;
	z-index: -1;
	animation: noise2 3s ease forward;
}

@keyframes noise2 {
	0%{
		opacity: 0;

	}
	100%{
		opacity: 1;
	}
}

.sound11 .noise{
	position: absolute;
	top: -1%;
	left: -2%;
	/* right: -50%; */
	/* bottom: -50%; */
	width: 200%;
	height: 200vh;
	background: url('4-final.gif') repeat 0 0;
	background-repeat: round;
	/* animation: noise .2s infinite; */
	opacity: 1;
	visibility: visible;
	z-index: -1;
	animation: noise3 3s ease forward;
}

@keyframes noise3 {
	0%{
		opacity: 0;

	}
	100%{
		opacity: 1;
	}
}


.sound12{
background: #AAB5A3;
animation: none;
}

.sound12 .noise{
opacity: 0;
background: none;
}

.sound13{
background: black;
transition: .4s;

}

.sound14{
	background: #AAB5A3;
}

.sound14 .noise{
	position: absolute;
	top: -1%;
	left: -2%;
	/* right: -50%; */
	/* bottom: -50%; */
	width: 200%;
	height: 200vh;
  background: url('3-final.gif') repeat 0 0;
  background-repeat: round;
  /* animation: noise .2s infinite; */
  opacity: 1;
  visibility: visible;
	z-index: -1;
	animation: noise14 3s ease forward;
}

@keyframes noise14 {

	0%{
		opacity: 0;

	}


	100%{
		opacity: 1;
	}
}

.sound15{
	background: black !important;
	animation: none;
	z-index: 0;
}

.sound15 .noise{
  opacity: 0;
	background: none;
}

.sound16{
	background: #252525;
}

/* .anomaly{
	opacity: 0;
}

.anomaly .sound15{
	position: absolute;
	background: rgb(97,202,171);
	background: linear-gradient(90deg, rgba(97,202,171,1) 0%, rgba(203,219,194,1) 17%, rgba(203,219,194,1) 64%, rgba(86,189,156,1) 100%);
	height: 112px;
	width: 236px;
	right: 19em;
	bottom: 36%;
	opacity: 1;
	margin-top: -30em;
	z-index: 1;
	animation: anomalybeep 2s ease;
}

@keyframes anomalybeep {
0%{
	transform: scale(1);
}
60%{
	transform: scale(1.2);

}
80%{
transform: scale(1);
}
100%{
transform: scale(1);
} */

.sound17 .noise{
	position: absolute;
	top: -1%;
	left: -2%;
	/* right: -50%; */
	/* bottom: -50%; */
	width: 200%;
	height: 200vh;
	background: url('4-final.gif') repeat 0 0;
	background-repeat: round;
	/* animation: noise .2s infinite; */
	opacity: 1;
	visibility: visible;
	z-index: -1;
	animation: noise17 3s ease forward;
}

@keyframes noise17 {

	0%{
		opacity: 0;

	}


	100%{
		opacity: 1;
	}
}

/* back to black */
.sound18{
	background: black !important;
	animation: none;
	z-index: 0;

}

.sound18 .noise{
	opacity: 0;
}


.sound19{


}

/* back to noise */
.sound20 .noise{
	position: absolute;
	top: -1%;
	left: -2%;
	/* right: -50%; */
	/* bottom: -50%; */
	width: 200%;
	height: 200vh;
	background: url('4-final.gif') repeat 0 0;
	background-repeat: round;
	/* animation: noise .2s infinite; */
	opacity: 1;
	visibility: visible;
	z-index: -1;
	animation: noise20 3s ease forward;
}

@keyframes noise20 {

	0%{
		opacity: 0;

	}


	100%{
		opacity: 1;
	}
}

/* back to nothing */
.sound21{
	/* background: #AAB5A3 !important;  */
	animation: none;
	z-index: 0;
	background: linear-gradient(0deg, rgba(143,0,32,1) 0%, rgba(82,0,18,1) 19%, rgba(48,0,11,1) 47%, rgba(0,0,0,1) 86%)!important;
	background-size: 400% 400%!important;
	/* animation: Detected 4s ease !important; */


}

/* @keyframes Detected {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
} */

.sound21 .noise{
	opacity: 0;
}





#container{
text-align: center;
margin: 0 auto;
margin-top: 5em;
max-width: 50%;

}

iframe{
display: block;
margin: 0 auto;
margin-top: 2em;
width: 50em;
height: 30em;
}

#video{
	width: 100%;
}

.voice1{
font-family: helvetica;
color: yellow;
font-style: normal;
}

.voice2{
font-family: helvetica;
color: white;
font-style: normal;
}

.voice3{
font-family: helvetica;
color: red;
font-style: italic;
font-weight: bold;

}

.soundeffect{
	font-family: helvetica;
	color: #A52A2A;
	font-style: normal;
	margin-top: 5em;

}




/* ******
The first paragraph, with extended timing for
all siblings. Basically what it does is that
it shows the text after a delay, which
corresponds with the time that the word is
spoken.
You probably want to change the styling.
****** */
.p0 span {
opacity: 0;
font-family: helvetica;
color: yellow;
}

.p0.on span:first-of-type {
opacity: 1;
transition: 0s;

}
.p0.on span:nth-of-type(2) {
opacity: 1;
transition: 0s .4s;
margin-right: -.25em;

}
.p0.on span:nth-of-type(3) {
opacity: 1;
transition: 0s .5s;
margin-right: -.25em;


}
.p0.on span:nth-of-type(4) {
opacity: 1;
transition: 0s .7s;
margin-right: -.25em;


}
.p0.on span:nth-of-type(5) {
opacity: 1;
transition: 0s 1.1s;
margin-right: -.25em;

}
.p0.on span:nth-of-type(6) {
opacity: 1;
transition: 0s 1.4s;
margin-right: -.25em;

}
.p0.on span:nth-of-type(7) {
opacity: 1;
transition: 0s 1.7s;
margin-right: -.25em;

}
.p0.on span:nth-of-type(8) {
opacity: 1;
transition: 0s 2s;

}

/* let's */
.p0.on span:nth-of-type(9) {
opacity: 1;
transition: 0s 3s;

}
.p0.on span:nth-of-type(10) {
opacity: 1;
transition: 0s 3.2s;

}
.p0.on span:nth-of-type(11) {
opacity: 1;
transition: 0s 3.7s;

}
.p1.on span:first-of-type{
/background: #2980b9;/
}
.p6.on span{
animation: fuck 2.5s ease;
opacity: 1;
transition: 0s 3.7s;
font-style: italic;
font-weight: bold;

}

@keyframes fuck {
 0%{font-size:1.5em;
 opacity: 1;}
 100%{font-size:0.5em;
 opacity: .1;}
}

/*.voice1 span:first-of-type{
background: #345A5B;
}*/