@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,300&display=swap');


/*font-family: 'Source Sans Pro', sans-serif;
font-family: 'Montserrat', sans-serif;
*/

html {
font-size:12px;
background-color:black;
color:black;
font-family: 'Montserrat', sans-serif;
}

body {
width:100vw;
height:100vh;
background-color:black;
overflow:hidden;
margin:0 auto;
}

#backgroundtriangle {
	width: 0;
	height: 0;
	border-top: 50vh solid transparent;
	border-left: 0vw solid #EC2566;
transition:border-left 1s;
	border-bottom: 50vh solid transparent;
  position:relative;
  z-index:5;
}

#textcontainer {
position: absolute;
top: 31%;
left: 2%;
width: 46vw;
z-index: 6;
opacity:0;
transition:opacity 1s;
color:black;
}

#qtitlevsmall {
font-family: 'Source Sans Pro', sans-serif;
width: 100%;
text-align: left;
font-size:3rem;
font-weight:bold;
}

#qtitlesmall {
font-family: 'Source Sans Pro', sans-serif;
width: 100%;
text-align: left;
font-size: 4rem;
font-weight:bold;
margin-bottom:2%;
}

.qtitlelsmall {
font-family: 'Source Sans Pro', sans-serif;
width: 100%;
text-align: left;
font-size: 5rem;
font-weight:bold;
margin-bottom:2%;
}

.qtitlelsmallafter {
	font-family: 'Source Sans Pro', sans-serif;
	width: 108%;
	text-align: center;
	font-size: 3.5vw;
	font-weight: bold;
	margin-bottom: 2%;
	margin-top: -19%;
}

.questionsmall {
text-align: left;
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 2%;
}

.questionsmallafter {
	text-align: center;
	font-size: 1.5vw;
	font-family: 'Montserrat', sans-serif;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
}

.questionlarge {
text-align: left;
font-size: 2.2rem;
font-family: 'Montserrat', sans-serif;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 2%;
margin-top: 2%;
font-weight:bold;
}

form {
  width: 90%;
  display: block;
}

#interactioncontainer {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0%;
	background-color: black;
	color: white;
	position: absolute;
	top: 0%;
	right: 1%;
	width: 33%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#questionsubmission {
width: 70%;
margin-left: 137%;
margin-right: auto;
display: block;
margin-top: 2%;
border: 2px solid white;
background-color: black;
color: white;
padding: 5%;
font-size: 2rem;
resize: none;
font-family: 'Montserrat', sans-serif;
height: 49rem;
animation-name: subin;
animation-duration: 1250ms;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes subin {
0% {
  margin-left:137%;
}

80% {
  margin-left:10%;
}

100% {
  margin-left:auto;
}
}


.warning {
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
width: 64%;
color: #EC2566;
opacity: 0;
font-size: 1.9rem;
}

.lengthvis {
opacity:1;
transition:opacity 1s;
animation-name: shakebox;
animation-duration: 0.3s;
animation-fill-mode: both;
animation-iteration-count: 6;
animation-timing-function: ease-in-out;
}

.shakebox {
animation-name: shakeboxanim;
animation-duration: 0.2s;
animation-fill-mode: both;
animation-iteration-count: 10;
animation-timing-function: ease-in-out;
}

@keyframes shakeboxanim {
0% {
margin-left: 15%;
}

25% {
margin-left:14%;
}

25% {
margin-left:15%;
}

75% {
margin-left:16%;
}

100% {
margin-left: 15%;
}

}


@keyframes shakebox {
0% {
height:3%;
}

50% {
height:4%;
}

100% {
height:3%;
}

}

.animatetriangle {
animation-name: triangleexpand;
animation-duration: 1.5s;
animation-delay:0.5s;
animation-fill-mode: both;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}

@keyframes triangleexpand {
0% {
border-top: 50vh solid transparent;
border-left:68vw solid #ec2566;
}

100% {
border-top: 111vh solid transparent;
border-left:40000vw solid #ec2566;
}

}

.fadetext {
animation-name: textdisappear;
animation-duration: 0.8s;
animation-delay:0.5s;
animation-delay:0s;
animation-fill-mode: both;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}

@keyframes textdisappear {
0% {
opacity:1;
}

100% {
opacity:0;
}
}

#submitbutton {
width: 33%;
font-size: 3rem;
border: 2px solid white;
color: black;
background-color: #EC2566;
margin-top: 7%;
margin-left: auto;
margin-right: auto;
display: block;
cursor: pointer;
font-weight:bold;
font-family: 'Montserrat', sans-serif;
padding: 2%;
opacity:0;
transition:opacity 1s;
}

#videooverlay {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index:20;
}

#questionconfirm {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 42vw;
	z-index: 6;
	background-color: #EC2566;
	color: black;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin-left: 4%;
}

#selectedvideo {
width: 50vw;
background-color: #EC2566;
margin-left: auto;
margin-right: auto;
display: block;
position:absolute;
top:0%;
left:0%;
}

#resetbutton {
	width: 13vw;
	font-size: 1.5vw;
	border: 2px solid white;
	color: black;
	background-color: #EC2566;
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	cursor: pointer;
	font-weight: bold;
	font-family: 'Source Sans Pro', sans-serif;
	position: absolute;
	bottom: 39vh;
	right: 18.5%;
	padding: 1%;
	transition: opacity 1s;
	opacity: 0;
}

.invisible {
pointer-events:none;
opacity:0;
transition:opacity 0.5s;
}

.visible {
pointer-events:all;
opacity:1;
transition:opacity 0.5s;
}

#videoshape {
width: 50vw;
position: absolute;
top: 0%;
right: 0%;
height: 100%;
}

.folded {
clip-path: polygon(100% 0%,50% 0%,0% 0);
}

.unfold {
animation-name: unfoldvid;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}

@keyframes unfoldvid {
0% {
clip-path: polygon(100% 0%,50% 0%,0% 0);
}

100% {
clip-path: polygon(100% 0%,50% 28vw,0% 0);
}
}
  #disclaimer span {
    background: none repeat scroll 0 0 #EC2566;
    border: 5px solid white;
    color: #000000;
    font-size: 1.1rem;
    height: 70vh;
    margin: 0 auto;
    position: absolute;
    text-align: justify;
    font-style: bold;
    top: -65vh;
    left: -86%;
    display:none;
    padding: 0 20px;
    width: 29vw;
    z-index: 6;
    overflow-y: scroll;
overflow-x: hidden;
}

  #disclaimer span::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom:10px;
    width: 10px;
    height: 10px;
    border-bottom: 5px solid white;
    border-right: 5px solid white;
    background: #EC2566;
    left: 100%;
    margin-left: -5px;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(-45deg);
}

#hover {
  display:inline-block;
  cursor:pointer;
  text-decoration: underline;
  color: #ec2566;
}

#disclaimer:hover span {
  display:inline-block;
}

#disclaimer {
	margin-top: 3%;
	position: relative;
	cursor: pointer;
	opacity: 0;
	transition: opacity 1s;
	width: 84%;
	font-style: italic;
	margin-left: auto;
	margin-right: auto;
}

#videocaption {
color:black;
font-family:'Montserrat', sans-serif;
position: absolute;
width: 50%;
right: 0%;
bottom: 40vh;
height: 20%;
transition:opacity 1s;
opacity:0;
}

.name {
width:100%;
display:block;
text-align:center;
font-size:2.5vw
}

.inst {
width:100%;
display:block;
text-align:center;
font-size:1.2vw;
}

.animatepulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
animation-duration:0.3s;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1 1.1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


#landscapenote {
  opacity:0;
display:flex;
width:100vw;
height:100vh;
overflow:hidden;
z-index:100;
position:relative;
background: none repeat scroll 0 0 #EC2566;
pointer-events: none;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute ;
top:0%;
left:0%;
}

#lnsymbol {
	font-size: 10rem;
	text-align: center;
}

#lndesc {
	font-size: 2rem;
	width: 50%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#phonenote {
  opacity:0;
  display:flex;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index:100;
  position:relative;
  background: none repeat scroll 0 0 #EC2566;
  pointer-events: none;
  flex-direction: column;
justify-content: center;
align-items: center;
position: absolute ;
top:0%;
left:0%;
  }
  
  #phsymbol {
    font-size: 10rem;
    text-align: center;
  }
  
  #phdesc {
    font-size: 2rem;
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

@media only screen and (max-width:1600px) {
#submitbutton {
  width:55%;
}

form {
  width:100%;
}

#disclaimer span {
  width:38vw;
}

}

@media only screen and (max-width:1300px) {
#qtitlevsmall {
  font-size: 2rem;
}

#qtitlesmall {
  font-size:3rem;
}

.questionsmall {
  font-size:1rem;
}

.questionlarge {
  font-size:1.6rem;
}

#questionsubmission {
  font-size:1.5rem;
  height:33rem;
}

#submitbutton {
  font-size:2rem;
}


#disclaimer span {
  width:42vw;
}
}


@media only screen and (min-width:768px) and (orientation:portrait) {
#landscapenote {
  opacity:1;
  pointer-events: all;
}
}

@media only screen and (max-width:765px) {
  #phonenote {
    opacity:1;
    pointer-events: all;
  }

  #landscapenote {
    opacity:0;
    pointer-events: none;
  }
  }