body{
	margin: 0px;
	background-color: black;
}

.mood{
	display: none;
	height: 100%;
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%,50%);
}

#introBottom, #introTop{
	font-size: 1.5vw;
	font-family: 'Kelly Slab', cursive;
	color: rgb(255, 196, 0);
}

#doorContainer{
	position: absolute;
	height: 36vw;
	width: 20vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#doorContainer img{
	position: absolute;
	height: 100%;
	width: 100%;
}

#doorContainer #door, #doorContainer #doorBase{
	height: 100%;
	width: 100%	;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#doorContainer #knob{
	position: absolute;
	height: 3%;
	width: 5%;
	top: 3%;
	left: 32%;
}

#doorContainer #pivot, #doorContainer #pivotBase{
	height: 100%;
	left: 0;
	top: 0;
	transition: transform 1s;
}

#placeHolderEnd{
	position: absolute;
	bottom: 0;
	right: 27%;
	height: 10%;
	width: 20%;
}

.flip {
  transform: rotate(90deg);
}

#cabinetClick{
	position: absolute;
	top: 38vh;
	right: 22vw;
	height: 6vh;
	width: 10vw;
}

#archiveClick{
	position: absolute;
	width: 100px;
	height: 50px;
	top: 5px;
	left: 5px;
	background-color: red;
}

#menuHeading, .dialogue h1, #creditsOverlay h1 {
	font-family: 'Bungee', sans-serif;	
	color: rgba(255, 196, 0, 1);
	text-align: center;
	font-size: 7vw;
	padding: 0;
	margin: 0;
	animation: text-flicker 0.5s linear infinite;
}

#menuHeading{
	padding: 0;
	margin: 0;
}

.dialogue h1 {
	position: absolute;
}

#creditsOverlay{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 90%;
	background-color: rgba(110, 58, 0, 0.7);
}

#creditsOverlay h1{
	position: relative;
	top: 0;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.folder{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 80%;
	transform: translate(-50%, -50%);
}

.folderContainer{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 78%;
	height: 100%;
	padding-top: 30px;
}

.folder .content{
	height: 75%;
	position: relative;
}

.folder  .content img{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.book{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 90%;
	transform: translate(-50%, -50%);
}

.navigation{
	position: relative;
	height: 10%;
}

.book .text{
	position: relative;
	column-count: 2;
	column-width: 20%;
	column-height: 100px;
	column-gap: 90px;
	column-fill: auto;
	height: 90%;
}

.bookContainer{
	position: absolute;
	top: 54%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 90%;
	padding-top: 30px;
}

.book p, h1, h2, h3, ul, li{
	color: black;
	font-family: 'Merriweather', serif;
}

.book h1{
	text-align: center;
	font-size: 40px;
	padding-top: 100px;
}

.book p, ul, li{
	font-size: 17px;
}

.book .turnOver{
	bottom: 5px;
	right: 5px;
}	

.book .turnBack{
	bottom: 5px;
	left: 5px;
}

#mapNav{
	display: none;
}

.interactableImage {
	display: none;
	position: absolute;
}

#stove{
	width: 20vw;
	height: 30vh;
	top: 44%;
	left: 45%;
}

#kettle{
	width: 10%;
	top: 39%;
	left: 69%;
}

#envelope{
	height: 10vh;
	top: 30vh;
	left: 30vw;
}

#envelope1{
	height: 50vh;
	width: 50vw;
	top: 40vh;
	left: 25vw;
}

#notebookImage{
	position: absolute;
	width: 100px;
	height: 100px;
	top: 400px;
	left: 400px;
}

#chapter {
	text-align: center;
}

.letter{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 25%;
	height: 80%;
	transform: translate(-50%, -50%);
}

.letter p{
	position: absolute;
	top: 0px;
	text-align: justified;
	padding: 0px;
	margin-left: 16px;
	margin-right: 16px;
	font-size: 1vw;
	color: black;
	font-family: 'DM Mono', monospace;
}

.letter img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.turnOver{
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 0;
	height: 0;
	border-bottom: 50px solid rgba(110, 58, 0, 0.7);
	border-left: 100px solid transparent;
}	

.turnBack{
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 0;
	height: 0;
	border-bottom: 50px solid rgba(110, 58, 0, 0.7);
	border-right: 100px solid transparent;
}

.notes .turnOver {
	bottom: 15px;
	right: 15px;
}

.notes .turnBack {
	bottom: 15px;
	left: 15px;
}

.turnOver:hover{
	border-bottom-color: rgba(255, 196, 0, 0.7);
	transition: 0.5s;
}

.turnOver:active{
	animation: turnPage 1s ease;
}

.turnBack:hover{
	border-bottom-color: rgba(255, 196, 0, 0.7);
	transition: 0.5s;
}

.turnBack:active{
	animation: turnPage 1s ease;
}


.notes{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 90%;
	transform: translate(-50%, -50%);
}

.notesContainer{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 80%;
	padding-top: 30px;
	column-count: 2;
	column-width: 20%;
	column-gap: 90px;
	column-fill: auto;
}

.notes p{

}

.notes p{
	text-align: justified;
	font-size: 15px;
	color: black;
	font-family: 'Rock Salt', cursive;
	padding: 0px;
	margin-left: 30px;
	margin-right: 30px;
}

.notes ul{
	text-align: left;
	font-family: 'Rock Salt', cursive;
}

.notes li{
	height: auto;	
}

.notes img{
	width: 100%;
	height: 100%;
}



@keyframes turnPage{
	
	0% {
		border-bottom: 50px solid rgba(255, 196, 0, 0.7);
	}
	
	40% {
		border-bottom: 50px solid rgba(110, 58, 0, 0.7);
	}
	100% {
		border-bottom: 50px solid rgba(255, 196, 0, 0.7);
	}
}

#introTop{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
}

#introBottom{
	position: absolute;
	bottom: 50px;
	text-align: center;
	width: 100%;
	padding-left: 0;
	margin-left: 0;
}


mark{
	background-color: rgba(110, 58, 0, 0.7);
	color: rgb(255, 196, 0);
}

.dialogue p{
	position: relative;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 0px;
	font-size: 1.5vw;
	font-family: 'Kelly Slab', cursive;
	color: rgb(255, 196, 0);
	margin-top: 50px;
	padding-top: 0px;
}

.dialogue h2{
	position: relative;
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 0px;
	font-size: 3vw;
	font-family: 'Kelly Slab', cursive;
	color: rgb(255, 196, 0);
	margin-top: 50px;
	padding-top: 0px;
}

#creditsOverlay p{
	position: relative;
	margin-left: 50px;
	margin-right: 50px;
	font-size: 1.5vw;
	font-family: 'Kelly Slab', cursive;
	color: rgb(255, 196, 0);
	margin-top: 0px;
	padding-top: 0px;
	column-count: 2;
	text-align: left;
}

.stageOverlay{
	width: 100%;
	height: 100%;
	display: none;
	height: 100%;
	margin-left: 0px;
	margin-top: 0px;
	top: 0px;
	left: 0px;
	position: fixed;
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	user-select: none;
	filter: blur(10px);
	background: inherit;
}

.stage {
	display: none;
	width: 100%;
	height: 100%;
	margin-left: 0px;
	margin-top: 0px;
	position: fixed;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	user-select: none;
}

.calibration{
	background-image: url('images/placeholder backgrounds/calibration.jpg');
	animation: fade 2s;
}

.page1Sleep{
	background: black;
}

.page1{
	background-image: url('images/placeholder backgrounds/page1.jpg');
	animation: fade 2s;
}

.page1Kitchen{
	background-image: url('images/placeholder backgrounds/page1Kitchen.jpg');
	animation: fade 1s;
}

.page1Mail{
	background-image: url('images/placeholder backgrounds/page1Mail.jpg');
	animation: fade 1s;
}

.page1MailOpen{
	background-image: url('images/placeholder backgrounds/page1MailOpen.jpg');
	animation: fade 1s;
}

.page1Coffee1{
	background-image: url('images/placeholder backgrounds/coffee1.jpg');
	animation: fade 1s;
}

.page1Coffee2{
	background-image: url('images/placeholder backgrounds/coffee2.jpg');
	animation: fade 1s;
}

.goToComputer{
	background-image: url('images/placeholder backgrounds/goToComputer.png');
	animation: fade 1s;
}

.station{
	background-image: url('images/placeholder backgrounds/station.png');
	animation: fade 1s;
}

.stationSquare{
	background-image: url('images/placeholder backgrounds/stationSquare.png');
	animation: fade 1s;
}

.archives{
	background-image: url('images/placeholder backgrounds/archives.jpg');
	animation: fade 1s;
}

.hospitalDesk{
	background-image: url('images/placeholder backgrounds/hospitalDesk.jpg');
	animation: fade 1s;
}

.sunroomConnie{
	background-image: url('images/placeholder backgrounds/sunroomConnie.jpg');
	animation: fade 1s;
}

.sunroomConnieTurn{
	background-image: url('images/placeholder backgrounds/sunroomConnieTurn.jpg');
	animation: fade 1s;
}

.sunroomNoConnie{
	background-image: url('images/placeholder backgrounds/sunroomNoConnie.jpg');
	animation: fade 1s;
}

.park{
	background-image: url('images/placeholder backgrounds/park.png');
	animation: fade 1s;
}

.house1{
	background-image: url('images/placeholder backgrounds/house1.jpg');
	animation: fade 1s;
}

.house1Facade{
	background-image: url('images/placeholder backgrounds/house1Facade.jpg');
	animation: fade 1s;
}

.house2Site{
	background-image: url('images/placeholder backgrounds/house2Site.png');
	animation: fade 1s;
}

.house1Interior{
	background-image: url('images/placeholder backgrounds/house1Interior.jpg');
	animation: fade 1s;
}

.house1Interior2{
	background-image: url('images/placeholder backgrounds/house1Interior2.jpg');
	animation: fade 1s;
}

.house2Interior{
	background-image: url('images/placeholder backgrounds/house2Interior.jpg');
	animation: fade 1s;
}

.house3Site{
	background-image: url('images/placeholder backgrounds/house3Site.png');
	animation: fade 1s;
}

.deviceOff{
	background-image: url('images/placeholder backgrounds/deviceOff.jpg');
	animation: fade 1s;
}

.deviceOn{
	background-image: url('images/placeholder backgrounds/deviceOn.jpg');
	animation: fade 1s;
}

.portalbg{
	background-image: url('images/placeholder backgrounds/portalbg.png');
	animation: fade 1s;
}

.conniesHouse{
	background-image: url('images/placeholder backgrounds/conniesHouse.jpg');
	animation: fade 1s;
}

.dacha{
	background-image: url('images/placeholder backgrounds/dacha.jpg');
	animation: fade 1s;
}

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

#menuContainer{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45%;
	height: 50%;
	transform: translate(-50%, -50%);
}

#menuContainer ul{
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top: -50px;
}

#menuContainer li{
	margin-bottom: 10px;
}

#continueOption{
	display: none;
}

#choices button{
	display: inline;
	position: relative;
}

button{
	display: inline;
	position: absolute;
	margin: 0px auto;
	font-family: 'Kelly Slab', sans-serif;	
	color: rgba(255, 196, 0, 1);
	text-align: center;
	font-size: 2vw;
	animation: text-flicker 0.5s linear infinite;
	background-color: rgba(110, 58, 0, 0.7);
	border: none;
}

#checkNotes {
	position: absolute;
	right: 0;
}

#mapButton {
	position: absolute;
	right: 250px;
}

#hospitalNav{
	position: absolute;
	top: 300px;
	left: 600px;
}

#archivesNav{
	position: absolute;
	top: 500px;
	left: 1000px;
}

#house1Nav{
	display: none;
	position: absolute;
	top: 300px;
	left: 1100px;
}

.afterBlueprints #house1Nav{
	display: block;
}

#menuList button {
	width: 100%;
	position: relative;
}

button:hover{
	transition: 0.5s;
	background-color: rgba(255, 196, 0, 1);
	color: rgba(110, 58, 0, 0.7);
}

button:active{
	transition: 0.2s;
	background-color: rgba(110, 58, 0, 0.7);
	color: rgba(255, 196, 0, 1);
	border: none;
}


#creditsOverlay button{
	background-color: rgba(255, 196, 0, 1);
	font-family: 'Kelly Slab', sans-serif;	
	color: rgba(110, 58, 0, 0.7);
	text-align: center;
	font-size: 2vw;
	border: 2px solid rgba(255, 196, 0, 1);
	box-shadow: 0px 0px 5px rgba(255, 196, 0, 1);
	position: absolute;
	bottom: 10px;
	right: 10px;
}

#creditsOverlay button:hover, .dialogue button:hover{
	transition: 0.5s;
	background-color: rgba(110, 58, 0, 0.7);
	color: rgba(255, 196, 0, 1);
}

#creditsOverlay button:active, .dialogue button:active{
	transition: 0.2s;
	background-color: rgba(255, 196, 0, 1);
	color: rgba(110, 58, 0, 0.7);
}

#creditsOverlay li {
	width: 35vw;
	padding-right: 1vw;
	padding-left: 1vw;
	text-align: justify;
}

@keyframes text-flicker {

	0% {
		opacity:0.9;
		text-shadow: 0px 0px 10px rgba(255, 196, 0, 1);
	}
	50%{
		opacity:1;
		text-shadow: 0px 0px 15px rgba(255, 196, 0, 0.9);
	}
	100% {
		opacity:0.9;
		text-shadow: 0px 0px 10px rgba(255, 196, 0, 1);
	}
}

#bird1 {
	position: absolute;
	top: 10px;
	left: 10px;
}
#bird2 {
	position: absolute;
	top: 50px;
	left: 250px;
}
#cat {
	position: absolute;
	bottom: 300px;
	left: 150px;
}

section{
	display: none;
	margin: 0;
	padding: 0;
}

.computerScreen{
	position: absolute;
	top: 40%;
	left: 55%;
	height: 25vw;
	width: 32vw;
	transform: translate(-50%, -50%);
}

#search{
	position: absolute;
	width: 4.5%;
	height: 2%;
	top: 40.2%;
	left: 61.8%;
}

#easternTimes{
	position: absolute;
	width: 200px;
	height: 50px;
	top: 30vh;
	left: 46vw;
	transform: translate(-50%, -50%);
}

#search:hover{
	background: red;
	opacity: 0.5;
}

#search:active{
	background: yellow;
	opacity: 0.5;
}

.dialogue{
	display: none;
	position: fixed;
	padding-left: 10%;
	padding-bottom: 2%;
	padding-right: 10%;
	width: 80%;
	bottom: 0px;
	text-align: justify;
	font-family: 'Kelly Slab', cursive;
	color: rgb(255, 196, 0);
	font-size: 2vw;
}

#end{
	top: 50%;
	left: 50%;
	width: 80%;
	height: 10%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.dialogue h1{
	font-family: 'Bungee', sans-serif;
	position: relative;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin: auto;
	padding: auto;
}

.dialogue h2{
	position: relative;
	padding: auto;
	margin: auto;
	text-align: center;
	font-family: 'Kelly Slab', cursive;
}

.dialogue mark{
	animation: dialogue-prompt 1s ease;
}

#choices{
	text-align: center;
	padding: 0;
	margin: 0;
	margin-	bottom: 5px;
	margin-top: 0;
}



.dialogue button{
	top: 0;
	margin: 0;
	background-color: rgba(255, 196, 0, 1);
	color: rgba(110, 58, 0, 0.7);
	text-align: center;
	border: 2px solid rgba(255, 196, 0, 1);
	box-shadow: 0px 0px 5px rgba(255, 196, 0, 1);
}

.dialogue .standalone{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@keyframes dialogue-prompt {
	0% {
		background-color: 	rgba(110, 58, 0, 0.7);
	}

	60% {
		background-color: 	rgba(110, 58, 0, 0.7);
	}

	75% {
		background-color: 	rgba(255, 196, 0, 0.7);
	}

	80% {
		background-color: 	rgba(255, 196, 0, 1);
	}

	85% {
		background-color: 	rgba(255, 196, 0, 0.7);
	}

	100% {
		background-color: 	rgba(110, 58, 0, 0.7);
	}
}

.second, .third, .fourth, .fifth, .sixth, .seventh, .eighth, .ninth, .tenth, .eleventh{
	display: none;
}

/*PORTALS*/

.portalEnd{
	position: absolute;
	height: 200px;
	width: 250px;
	top: 100px;
	left: 100px;
	transform-origin: 50% 50% 0;
	animation: pulsate 1s infinite linear;
	mix-blend-mode: color-dodge;
}



@keyframes pulsate{
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

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

.portal{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	margin-left: 0px;
	margin-top: 0px;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.portal p{
	font-size: 1.5vw;
	font-family: 'Kelly Slab', cursive;
	color: rgb(255, 196, 0);
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 10%;
	transform: translate(-50%, -50%);
}


.clip-animation { 
	clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
	animation: clip 1s infinite linear;

}


@keyframes clip {

  0% {
    clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
  }
  25% {
    clip-path: polygon(58% 21%, 51% 23%, 43% 23%, 35% 24%, 31% 30%, 25% 35%, 24% 41%, 26% 50%, 28% 57%, 34% 62%, 41% 64%, 46% 65%, 55% 64%, 61% 60%, 66% 54%, 71% 50%, 74% 43%, 74% 33%, 68% 26%);
  }
   50% {
    clip-path: polygon(44% 28%, 39% 31%, 33% 34%, 32% 38%, 31% 44%, 30% 49%, 30% 55%, 33% 59%, 35% 62%, 40% 64%, 44% 64%, 49% 65%, 55% 64%, 61% 60%, 64% 52%, 66% 46%, 63% 35%, 59% 31%, 52% 28%	);
  }

  75%{
	clip-path: polygon(58% 21%, 51% 23%, 43% 23%, 35% 24%, 31% 30%, 25% 35%, 24% 41%, 26% 50%, 28% 57%, 34% 62%, 41% 64%, 46% 65%, 55% 64%, 61% 60%, 66% 54%, 71% 50%, 74% 43%, 74% 33%, 68% 26%);
  }

  100%{
	clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
  }
}

.clip-animationTransitionIn{ 
	clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
	animation: clipIn 1s linear;
}

@keyframes clipIn {

  0% {
    clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
  }

  100%{
	clip-path: polygon(0% 64%, 10% 88%, 26% 81%, 39% 91%, 61% 94%, 81% 90%, 87% 68%, 81% 55%, 93% 47%, 97% 41%, 98% 27%, 84% 11%, 64% 7%, 37% 1%, 25% 9%, 12% 16%, 22% 23%, 20% 46%, 10% 53%);
  }
}

.clip-animationHover{ 
	clip-path: polygon(12% 57%, 14% 66%, 23% 73%, 36% 74%, 55% 72%, 63% 69%, 76% 68%, 78% 61%, 83% 52%, 84% 40%, 78% 28%, 70% 25%, 59% 23%, 43% 13%, 29% 15%, 16% 15%, 10% 25%, 9% 37%, 13% 45%);
	animation: clipHover 1s infinite linear;
}

@keyframes clipHover {
  0% {
    clip-path: polygon(0% 64%, 10% 88%, 26% 81%, 39% 91%, 61% 94%, 81% 90%, 87% 68%, 81% 55%, 93% 47%, 97% 41%, 98% 27%, 84% 11%, 64% 7%, 37% 1%, 25% 9%, 12% 16%, 22% 23%, 20% 46%, 10% 53%);
  }
  25% {
    clip-path: polygon(10% 65%, 10% 78%, 23% 88%, 41% 96%, 61% 89%, 92% 93%, 97% 69%, 88% 58%, 88% 45%, 97% 41%, 90% 27%, 87% 2%, 64% 15%, 37% 1%, 25% 9%, 20% 21%, 4% 29%, 0 40%, 5% 53%);
  }
   50% {
    clip-path: polygon(8% 71%, 8% 85%, 25% 91%, 45% 86%, 63% 94%, 85% 84%, 93% 69%, 95% 59%, 95% 52%, 96% 28%, 82% 20%, 75% 8%, 61% 5%, 40% 3%, 28% 12%, 9% 9%, 9% 29%, 0 40%, 7% 51%);
  }

  75%{
	clip-path: polygon(10% 65%, 10% 78%, 23% 88%, 41% 96%, 61% 89%, 92% 93%, 97% 69%, 88% 58%, 88% 45%, 97% 41%, 90% 27%, 87% 2%, 64% 15%, 37% 1%, 25% 9%, 20% 21%, 4% 29%, 0 40%, 5% 53%);
  }

  100%{
	clip-path: polygon(0% 64%, 10% 88%, 26% 81%, 39% 91%, 61% 94%, 81% 90%, 87% 68%, 81% 55%, 93% 47%, 97% 41%, 98% 27%, 84% 11%, 64% 7%, 37% 1%, 25% 9%, 12% 16%, 22% 23%, 20% 46%, 10% 53%);
  }
}

.clip-animationTransitionOut{ 
	clip-path: polygon(0% 64%, 10% 88%, 26% 81%, 39% 91%, 61% 94%, 81% 90%, 87% 68%, 81% 55%, 93% 47%, 97% 41%, 98% 27%, 84% 11%, 64% 7%, 37% 1%, 25% 9%, 12% 16%, 22% 23%, 20% 46%, 10% 53%);
	animation: clipOut 1s linear;
}

@keyframes clipOut {

  0% {
    clip-path: polygon(0% 64%, 10% 88%, 26% 81%, 39% 91%, 61% 94%, 81% 90%, 87% 68%, 81% 55%, 93% 47%, 97% 41%, 98% 27%, 84% 11%, 64% 7%, 37% 1%, 25% 9%, 12% 16%, 22% 23%, 20% 46%, 10% 53%);
  }

  100%{
	clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
  }
}

.clip-animationTransitionHoverOpen{ 
	clip-path: polygon(0 52%, 0 73%, 0 100%, 26% 100%, 42% 100%, 56% 100%, 73% 100%, 100% 100%, 100% 74%, 100% 50%, 100% 24%, 100% 0, 77% 0, 58% 0, 38% 0, 18% 0, 0 0, 0 16%, 0 35%);
	animation: clipHoverOpen 4s linear;
}

@keyframes clipHoverOpen {

  0% {
    clip-path: polygon(0% 64%, 10% 88%, 26% 81%, 39% 91%, 61% 94%, 81% 90%, 87% 68%, 81% 55%, 93% 47%, 97% 41%, 98% 27%, 84% 11%, 64% 7%, 37% 1%, 25% 9%, 12% 16%, 22% 23%, 20% 46%, 10% 53%);
  }

  10%{
  	  clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
  }

  80%{
  	  clip-path: polygon(0% 64%, 10% 88%, 26% 81%, 39% 91%, 61% 94%, 81% 90%, 87% 68%, 81% 55%, 93% 47%, 97% 41%, 98% 27%, 84% 11%, 64% 7%, 37% 1%, 25% 9%, 12% 16%, 22% 23%, 20% 46%, 10% 53%);
  }

  100%{
	clip-path: polygon(-50% 52%, -50% 73%, -50% 150%, 26% 150%, 42% 150%, 56% 150%, 73% 150%, 150% 150%, 150% 74%, 150% 50%, 150% 24%, 150% -50%, 77% -50%, 58% -50%, 38% -50%, 18% -50%, -50% -50%, -50% 16%, -50% 35%);
  }
}

.clip-animationAppear { 
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
	animation: clipAppear 1s linear;
}

@keyframes clipAppear {

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

  100%{
	clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
  }
}

.clip-animationDisappear { 
	clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
	animation: clipDisappear 1s linear;
}

@keyframes clipDisappear {

  0% {
    clip-path: polygon(59% 24%, 51% 23%, 43% 25%, 36% 26%, 31% 30%, 27% 38%, 26% 43%, 27% 50%, 30% 56%, 37% 58%, 42% 61%, 48% 62%, 54% 62%, 61% 60%, 66% 54%, 71% 50%, 73% 43%, 70% 36%, 66% 29%);
  }

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