html {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: #fbfcf6;
}

#landscape_notice {
	display: none;
}

@media screen and (orientation:landscape) {
	
}

@media screen and (orientation:portrait) {
	#landscape_notice {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: rgb(220, 49, 94);
		color:whitesmoke;
		text-align: center;
		box-sizing: border-box;
		font-size: 1.5rem;
		font-weight: bold;
	}

	#landscape_notice p {
		position: absolute;
		top: 50%;
		left: 1rem;
		right: 1rem;
		transform: translateY(-50%);
		margin: 0;
	}
}

.darwin_links {
	margin-top: 1.5rem;
}

.darwin_links a {
	padding: 0.5rem 1rem;
	border-radius: 2rem;
	border: 0.1rem solid burlywood;
	text-decoration: none;
	color: black;
	margin-right: 0.5rem;
}

.darwin_links a:hover {
	background-color: rgb(220, 49, 94);
	border-color: rgb(220, 49, 94);
	color: white;
}
/* 
a {
	color: black;
} */

a {
	color: rgba(0,0,0,0.8);
	text-decoration: solid underline rgba(0,0,0,0.25) 0.15rem;
}

a:hover {
	color: rgba(0,0,0,1);
	text-decoration: solid underline rgba(0,0,0,0.75) 0.15rem;
}


body, html {
	margin: 0; 
	height: 100%; 
	overflow: hidden;
}

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

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

blockquote, i {
	font-family: 'Tiro Telugu', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.page {
	width: 100%;
    height: 100%;
/*    min-height: 100vh;
    min-height: -webkit-fill-available;
*/
	display: block;
    position: fixed;
	overflow: hidden;
}

.page.hidden {
	display: none;
}

.page_half {
	position: absolute;
	height: 100%;
	width: 50%;
	top:0;
}

.page_quarter {
	position: absolute;
	height: 100%;
	width: 25%;
	top:0;
}

.page_threequarter {
	position: absolute;
	height: 100%;
	width: 75%;
	top:0;
}

.left {
	left:0;
}

.right {
	right:0;
}

/* Navigation */

#navigation {
	position: fixed;
	z-index: 800;
	left: 2vw;
	top: 2vw;
	width: auto;
	height: auto;
	/* background-color: #dc315e; */
	overflow: hidden;
	/* border-radius: 0 0 1vw 0; */
}

#navigation .navigation_item {
	font-size: 2.75vw;
	width: 6.3vw;
	height: 6.4vw;
	margin: 0;
	margin-right: 0.5vw;
	box-sizing: border-box;
	text-align: center;
	color: grey;
	font-weight: bolder;
	cursor: pointer;
	float: left;
	line-height: 3vw;
}

#go_back {
	text-indent: -999px;
	overflow: hidden;
	background-image: url(assets/Images/back_black.svg);
	background-size: 90%;
	background-position: center;
	background-repeat: no-repeat;
}

#home {
	text-indent: -999px;
	overflow: hidden;
	background-image: url(assets/Images/go_home_black.svg);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	display: none;
}

#navigation .navigation_item:nth-child(even) {
	/* background-color: rgba(0,0,0,0.05); */
}

.page_choose-experiment #navigation {
	display: none;
}

/*

-> Lightbox */

#lightbox {
	width: 100vw;
	height: 100vh;
	position: relative;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: rgba(25,25,25,0.5);
	box-sizing: border-box;
	/* padding: 8vw 12.5vw; */
}

#lightbox .lightbox-inner {
	height: auto;
	/* top: 7.5%; */
	width: 75vw;
	position: absolute;
	z-index: 25;
	box-sizing: border-box;
	/* overflow-y: scroll; */
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%;
}

#lightbox .content {
	background-color: white;
	padding: calc(2vw + 2vh);

}

#lightbox .content h1 {
	font-size: calc(1.5vw + 1.5vh);
}

#lightbox .content p {
	font-size: 1.33vw;
	line-height: 1.4;
}

#lightbox .content .detail_image {
	float: right;
	width: 40%;
	margin-bottom: 1.5vw;
	margin-left: 1vw;
}

#lightbox .close {
	top: -1.5vw;
	right: -1.5vw;

	width: 3vw;
	height: 3vw;
	/* font-size: calc(1vw + 1vh); */

	border-radius: 50%;
	background-image: url(assets/Images/close.svg);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
	text-indent: -999px;
	overflow: hidden;
	z-index: 50;
	position: absolute;
	color: white;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
}

/*

-> Choose experiment page */

div.choose-experiment {
	position: relative;
}

div.choose-experiment .experiment {
	position: absolute;
	height: 80%;
	width: 60vh;
}

div.choose-experiment .experiment .image_wrap {
	height: 60vh;
	width: 100%;
	border-radius: 50%;
}

div.choose-experiment .experiment .image {
	height: 56vh;
	width: 56vh;
	border-radius: 50%;
	background-color: #eaefdd;
	cursor: pointer;
	margin: 2vh;
}

div.choose-experiment .experiment_2 {
	color: white;
}

div.choose-experiment .experiment .label {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 4vh;
	padding: 3vh 0;
	margin: 0;
}

div.choose-experiment .experiment .label strong {
	display: block;
	font-size: 3vh;
}

div.choose-experiment .experiment_1 {
	top: 10%;
	right: 3vw;
}

div.choose-experiment .experiment_2 {
	top: 10%;
	left: 3vw;
}

div.choose-experiment .experiment_1 .image_wrap {
	border: 0.3vh solid #93a4a1;
}

div.choose-experiment .experiment_2 .image_wrap {
	border: 0.3vh solid #fbfcf6;
}

div.choose-experiment .page_half.right {
	/* background-color: #93a4a1; */
	background-color: #76928d;
}

div.choose-experiment h1 {
    position: absolute;
    top: 0;
    width: 100%;
    font-size: calc(3vw + 3vh);
    font-style: italic;
    text-align: center;
    margin: 0;
    padding: 0;
    padding-top: 5vh;
    height: 8vw;
	box-sizing: border-box;
}

/*

-> Auxonometer Intro page */

div.auxanometer-intro-page {

	width: 100%;
    height: 100%;
    display: block;
    position: relative;

	background-color: #9dccca;
	
	/* filter: brightness(110%) saturate(90%) sepia(40%); */
}

div.auxanometer-intro-page h1.auxanometer-title {
	font-family: 'Source Sans Pro', sans-serif;

	color: black;
	position: absolute;
	top: 0;
	width: 100%;
	font-size: 4vw;
	font-style: normal;
	text-align: center;
	margin: 0;
	padding: 0;
	padding-top: 5vh;
	background-color: #fbfcf6;
	padding-bottom: 2vh;
	height: 33.33%;
	font-weight: 300;
}

div.auxanometer-intro-page div.auxanometer-content {
	display: block;
    width: 100%;
    height: 100%;
}

div.auxanometer-intro-page button.auxanometer-explore {
	position: absolute;
    bottom: 2.5vw;
    right: 2.5vw;
    /* transform: translateX(-50%); */
	/* padding-right: 10vw; */


	/* font-size: 2vw;
	color: white;
	background-color: #dc315e;
	font-weight: bold;
	padding: 1vw 2vw;
	border-radius: 0vw;
	cursor: pointer;
	background-image: url(assets/Images/next_white.svg);
	background-repeat: no-repeat;
	background-size: auto 85%;
	padding-right: 5vw;
	background-position: right 0.5vw center; */
}

div.auxanometer-intro-page #auxanometer-3D-wrapper {
	display: block;
	position: absolute;
    top: 0;
	bottom: 0;
	left: 0;
	right: 0;
    border: 0;
    margin: 0;
    padding: 0;
}


div.auxanometer-intro-page #auxanometer_image_credits {
	position: absolute;
	top: 45vh;
	right: 2vw;
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 50%;
	background-color: white;
	color: black;
	line-height: 1.5vw;
	text-align: center;
	cursor: pointer;
	transform: translateX(-50%) translateY(-50%);
}


/* div.auxanometer-intro-page #auxanometer-3D-wrapper canvas {
	display: block;
    width: 100vw!important;
    height: 60vw!important;
    border: 0;
    margin: 0;
    padding: 0;
	position: absolute;
	top: 50%;
	left: 0;
    transform: translateY(-50%);
} */

/*

-> Auxonometer detail page */
.page_auxanometer-detail #navigation .navigation_item{
	color: white;
	filter: invert();
}

div.auxanometer-detail-page {
	width: 100%;
    height: 100%;
    display: block;
    position: relative;
	/* background-color: #f8fdff; */
	opacity: 1;
	background-image: 
		linear-gradient(rgb(160, 175, 170) 2px, transparent 2px), 
		linear-gradient(90deg, rgb(160, 175, 170) 2px, transparent 2px), 
		linear-gradient(rgb(153, 170, 166) 1px, transparent 1px), 
		linear-gradient(90deg, rgb(153, 170, 166) 1px, rgb(147, 164, 161) 1px);
	background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.auxanometer-detail-hotspots {
	position: absolute;
	height: 50vw;
	width: 100vw;
	top: 50%;
	left: 0vw;
    transform: translateY(-50%);
    z-index: 100;
}

.auxanometer-detail-hotspots .hotspot {
	position: absolute;
	width: 4.5vw;
	height: 4.5vw;
	box-sizing: border-box;
	border: 0.15vw solid #dc315e;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
}

/* @keyframes indicate_glow {
	0% {
		border-color: rgba(220, 49, 95, 1);
	}
	50% {
		border-color: rgba(220, 49, 95, 1);
	}
	90% {
		border-color: rgba(220, 49, 95, 0);
	}
	100% {
		border-color: rgba(220, 49, 95, 1);
	}
} */

.auxanometer-detail-hotspots .hotspot button.action {
	font-family: 'Source Sans Pro', sans-serif;
	position: absolute;
	width: calc(100% - 0.7vw);
	left: 0.35vw;
	top: 0.35vw;
    height: calc(100% - 0.7vw);
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: none;
    border-radius: 50%;
	background-color: #dc315e;
	color: white;
	font-size: 2vw;
	
}

.auxanometer-detail-hotspots .hotspot .glow {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	background: radial-gradient(circle at center, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 75%);
	animation: glow 10s;
    animation-iteration-count: infinite;
}

@keyframes glow {
	70% {
		opacity: 0;
		transform: translateX(-50%) translateY(-50%) scaleX(100%) scaleY(100%);
	}
	85% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
		transform: translateX(-50%) translateY(-50%) scaleX(400%) scaleY(400%);
	}
}

div.auxanometer-detail-page .clock {
	position: absolute;
	right: -5%;
	top: -5%;
	width: 12.5vw;
	height: 12.5vw;
	z-index: 99;
}
.auxanometer-item-drawing {
	position: relative;
	height: 40vw;
	width: 80vw;
	top: 55%;
	left: 10vw;
    transform: translateY(-50%);
	/*background-color: red;*/
}

.auxanometer-item-drawing div {
	position: absolute;
	box-sizing: border-box;
}

.auxanometer-item-drawing .moving_part {
	width: 20vw;
	height: 20vw;
	left: 25vw;
	/*background-color: red;*/
	top: 10vw;
	z-index: 100;
}

.auxanometer-item-drawing .moving_part .part_1 {
	width: 2.5vw;
	height: 20vw;
	top: 0vw;
	left: 8.75vw;
	/*background-color: brown;*/
	/*border: 0.1vw solid grey;*/
	background-color: #421;
	box-sizing: border-box;
	display: none;
}

.auxanometer-item-drawing .moving_part .part_2 {
	width: 10vw;
	height: 10vw;
	top: -5vw;
	left: 28.25vw;
	z-index: 100;
	/*background-color: yellow;*/
	animation: react_to_grow 50000ms linear;
	/*animation-timing-function: ease-in-out;*/
    animation-iteration-count: infinite;
}

@keyframes react_to_grow {
	0% {
		transform: rotate(-3deg);
	}
	/*50% {
		transform: rotate(0deg);
	}*/
	100% {
		transform: rotate(-30deg);
	}
}

.auxanometer-item-drawing .moving_part .part_2 .pin {
	width: 10%;
	height: 10%;
	background-color: black;
	left: 45%;
	top: 45%;
	border-radius: 50%;
	z-index: 150;
}

.auxanometer-item-drawing .moving_part .part_2 .long_thing {
	width: 300%;
	height: 20%;
	top: 40%;
	left: -130%;
	/*background-color: green;*/
	background-image: url(assets/Images/Auxanometer/pointer.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/*border: 0.1vw solid grey;*/
	box-sizing: border-box;
}

.auxanometer-item-drawing .moving_part .part_2 .long_thing .pen {
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1px;
}

.auxanometer-item-drawing .moving_part .part_3 {
	width: 3vw;
	height: 3vw;
	top: -6vw;
	left: -8vw;
	border-radius: 50%;
	border:0.5vw black solid;

	animation: rotate 50000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
	display: none;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-359deg);
	}
}

.auxanometer-item-drawing .moving_part .part_3 .wheel_1 {
	height: 10%;
	width: 100%;
	left: 0;
	top: 45%;
	background-color: black;
}

.auxanometer-item-drawing .moving_part .part_3 .wheel_2 {
	height: 100%;
	width: 10%;
	top: 0;
	left: 45%;
	background-color: black;
}

.auxanometer-item-drawing .auxanometer {
	left: 13%;
	bottom: 37%;
	height: 55%;
	width: 55%;
}

.auxanometer-item-drawing .auxanometer > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.auxanometer-item-drawing .auxanometer_base  {
	background-image:url(assets/Images/Auxanometer/auxanometer_base.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 20;
}

.auxanometer-item-drawing .auxanometer_cylinder_1  {
	background-image:url(assets/Images/Auxanometer/auxanometer_cylinder_1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 49;
}

.auxanometer-item-drawing .auxanometer_cylinder_2  {
	background-image:url(assets/Images/Auxanometer/auxanometer_cylinder_2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 50;
	animation: rotate_cylinder 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate_cylinder {
	0% {
		z-index: 46;
	}
	47.5% {
		z-index: 46;
	}
	50% {
		z-index: 51;
	}
	100% {
		z-index: 51;
	}
}

.auxanometer-item-drawing .auxanometer_key  {
	background-image:url(assets/Images/Auxanometer/auxanometer_key.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 60;
}

.auxanometer-item-drawing .auxanometer_mechanism  {
	background-image:url(assets/Images/Auxanometer/auxanometer_mechanism.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 40;
	animation: machanism_turn 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes machanism_turn {
	0% {
		background-image:url(assets/Images/Auxanometer/auxanometer_mechanism.png);
	}
	25% {
		background-image:url(assets/Images/Auxanometer/auxanometer_mechanism.png);
	}
	50% {
		background-image:url(assets/Images/Auxanometer/auxanometer_mechanism_2.png);
	}
	75% {
		background-image:url(assets/Images/Auxanometer/auxanometer_mechanism_2.png);
	}
	100% {
		background-image:url(assets/Images/Auxanometer/auxanometer_mechanism.png);
	}
}

.auxanometer-item-drawing .auxanometer_lever  {
	background-image:url(assets/Images/Auxanometer/auxanometer_lever.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 45;
	animation: lever_turn 5s;
	animation-delay: 4.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes lever_turn {
	0% {
		background-image:url(assets/Images/Auxanometer/auxanometer_lever_active.png);
	}
	15% {
		background-image:url(assets/Images/Auxanometer/auxanometer_lever_active.png);
	}
	16% {
		background-image:url(assets/Images/Auxanometer/auxanometer_lever.png);
	}
	100% {
		background-image:url(assets/Images/Auxanometer/auxanometer_lever.png);
	}
}

.auxanometer-item-drawing .auxanometer_wheel_1  {
	background-image:url(assets/Images/Auxanometer/auxanometer_wheel_1.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 60;
}

.auxanometer-item-drawing .auxanometer_wheel_2  {
	background-image:url(assets/Images/Auxanometer/auxanometer_wheel_2.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 59;
	animation: rotate_wheel 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate_wheel {
	0% {
		z-index: 59;
	}
	49% {
		z-index: 59;
	}
	50% {
		z-index: 61;
	}
	100% {
		z-index: 61;
	}
}


.auxanometer-item-drawing .cylinder_thread {
	left: 41.2%;
	top: 12.75%;
	height: 1%;
	width: 35%;

	background-image: url(assets/Images/Auxanometer/small_thread.png);
	background-size: contain;
	background-position: center right 0%;
	background-repeat: repeat-x;
	z-index: 55;
	transform: translateX(-50%) translateY(-50%) rotate(2.1deg);

	animation: move_thread 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	animation-fill-mode: none;
}

@keyframes move_thread {
	0% {
		background-position: center right 0%;
	}
	49% {
		background-position: center right 0%;
	}
	90% {
		background-position: center right 0%;
	}
	100% {
		background-position: center right 4.52%;
	}
}

.auxanometer-item-drawing .weight_wrap {
	left: 19.25%;
	top: 14%;
	height: 35%;
	width: 4%;
	animation: move_weight 50s linear;
    animation-iteration-count: infinite;
}

.auxanometer-item-drawing .weight_wrap .weight {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-image: url(assets/Images/Auxanometer/weight.png);
	background-size: contain;
	background-position: bottom center;
	background-repeat: no-repeat;
	z-index: 40;
}

.auxanometer-item-drawing .weight_wrap .weight_thread {
	position: absolute;
	top: 0;
	bottom: 12.3vw;
	left: 50%;
	width: 12.5%;
	/* height: 12.5%; */
	transform: translateX(-50%);
	background-image: url(assets/Images/Auxanometer/thread_weight.png);
	background-size: contain;
	background-position: bottom center;
	background-repeat: repeat-y;
}


@keyframes move_weight {
	0%, 9% {
		height: 35%;
	}
	10%, 19% {
		height: 36%;
	}
	20%, 29% {
		height: 37%;
	}
	30%, 39% {
		height: 38%;
	}
	40%, 49% {
		height: 39%;
	}
	50%, 59% {
		height: 40%;
	}
	60%, 69% {
		height: 41%;
	}
	70%, 79% {
		height: 42%;
	}
	80%, 89% {
		height: 43%;
	}
	90%, 99% {
		height: 44%;
	}
	100% {
		height: 45%;
	}
}

.auxanometer-item-drawing .tripod {
	left: 60.5%;
	bottom: 30%;
	height: 80%;
	width: 25%;

	background-image: url(assets/Images/Auxanometer/tripod.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 20;
}

.auxanometer-item-drawing .base {
	left: 15%;
	bottom: 22.5%;
	height: 30%;
	width: 50%;

	background-image:url(assets/Images/Auxanometer/base.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 20;
}

.auxanometer-item-drawing .table {
	left: 0%;
	bottom: -80%;
	height: 125%;
	width: 100%;
	background-image:url(assets/Images/Auxanometer/table.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 10;
}

.auxanometer-item-drawing .plant_wrap {
	width: 12.5%;
	height: 45%;
	left: 77%;
	bottom: 30%;
	z-index: 30;
}

.auxanometer-item-drawing .plant_wrap * {
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
}

.auxanometer-item-drawing .plant_wrap .bucket {
	background-image:url(assets/Images/Auxanometer/bucket.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 10;
}

.auxanometer-item-drawing .plant_wrap .bucket_front {
	background-image:url(assets/Images/Auxanometer/bucket_front.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 30;
}

.auxanometer-item-drawing .plant_wrap .plant {
	background-image:url(assets/Images/Auxanometer/plant.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 20;
	animation: grow 50000ms;
	animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

@keyframes grow {
	0% {
		transform: translateX(0%) translateY(0%) rotate(0deg);
	}
	20% {
		transform: translateX(0%) translateY(-5%) rotate(-2.5deg);
	}
	40% {
		transform: translateX(5%) translateY(-10%) rotate(0deg);
	}
	60% {
		transform: translateX(5%) translateY(-15%) rotate(2.5deg);
	}
	80% {
		transform: translateX(5%) translateY(-20%) rotate(0deg);
	}
	100% {
		transform: translateX(0%) translateY(-25%) rotate(0deg);
	}
}

.auxanometer-item-drawing .thread {
	width: 2%;
	height: 10%;
	left: 83%;
	bottom: 68%;
	animation: move_with_plant 50000ms;
	animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.auxanometer-item-drawing .thread_upper {
	background-image:url(assets/Images/Auxanometer/thread_upper.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 15;
}


.auxanometer-item-drawing .thread_upper_front {
	background-image:url(assets/Images/Auxanometer/thread_upper_front.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 100;
}

.auxanometer-item-drawing .thread_lower {
	background-image:url(assets/Images/Auxanometer/thread_lower.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 50;
}

@keyframes move_with_plant {
	0% {
		transform: translateX(0%) translateY(0%) rotate(0deg);
	}
	30% {
		transform: translateX(-15%) translateY(-25%) rotate(0deg);
	}
	50% {
		transform: translateX(45%) translateY(-55%) rotate(0deg);
	}
	100% {
		transform: translateX(5%) translateY(-110%) rotate(0deg);
	}
}

.auxanometer-item-drawing .recorder_cube {
	left: 46.5%;
	top: 12%;
	height: 40%;
	width: 13%;
	overflow: hidden;
	z-index: 90;
}
/* 
.auxanometer-item-drawing .recorder_cube .spindle{
	top: 0;
	left: 10%;
	width: 80%;
	background-color: #421;
	height: 10%;
}

.auxanometer-item-drawing .recorder_cube .spindle_2{
	top: 0;
	left: 8%;
	width: 84%;
	background-color: #421;
	height: 3%;
}

.auxanometer-item-drawing .recorder_cube .spindle_3{
	top: 7%;
	left: 8%;
	width: 84%;
	background-color: #421;
	height: 3%;
} */

.auxanometer-item-drawing .recorder_cube .paper {
	width: 200%;
	height: 150%;
	top: 0%;
	/* right: -100%; */
	transform: translateY(-0%) translateX(50%);
	/* background-color: rgba(102, 143, 157, 0.25); */
	/* background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236f7068' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */

	animation: paper_move 50000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.auxanometer-item-drawing .recorder_cube .paper div {
	position: absolute;
	width: 0.15vw;
	height: 0.15vw;
	border-radius: 50%;
	background-color: #dc315e;
}

@keyframes paper_move {
	0% {
		transform: translateY(-0%) translateX(50%);
	}
	9% {
		transform: translateY(-0%) translateX(50%);
	}
	10% {
		transform: translateY(-1%) translateX(45%);
	}
	19% {
		transform: translateY(-1%) translateX(45%);
	}
	20% {
		transform: translateY(-2%) translateX(40%);
	}
	29% {
		transform: translateY(-2%) translateX(40%);
	}
	30% {
		transform: translateY(-3%) translateX(35%);
	}
	39% {
		transform: translateY(-3%) translateX(35%);
	}
	40% {
		transform: translateY(-4%) translateX(30%);
	}
	49% {
		transform: translateY(-4%) translateX(30%);
	}
	50% {
		transform: translateY(-5%) translateX(25%);
	}
	59% {
		transform: translateY(-5%) translateX(25%);
	}
	60% {
		transform: translateY(-6%) translateX(20%);
	}
	69% {
		transform: translateY(-6%) translateX(20%);
	}
	70% {
		transform: translateY(-7%) translateX(15%);
	}
	79% {
		transform: translateY(-7%) translateX(15%);
	}
	80% {
		transform: translateY(-8%) translateX(10%);
	}
	89% {
		transform: translateY(-8%) translateX(10%);
	}
	90% {
		transform: translateY(-9%) translateX(5%);
	}
	99% {
		transform: translateY(-9%) translateX(5%);
	}
	100% {
		transform: translateY(-10%) translateX(0%);
	}
}

/* @keyframes paper_move {
	0% {
		right: -100%;
		top: 0;
	}
	100% {
		right: -50%;
		top: -5%;
	}
} */


/*

-> Feed-Plant Intro page */

.page_feed-plant-intro #navigation .navigation_item{
	color: white;
	filter: invert();
}

div.feed-plant-intro-page {
	width: 100%;
    height: 100%;
    display: block;
    position: relative;

	/*filter: brightness(110%) saturate(90%) sepia(40%);*/
}

body.page_feed-plant-intro {
	background-color: #93a4a1;
	background-color: #76928d;
}

body.page_feed-plant-intro h1.feed-plant-title {
    font-size: 3vw;
	margin-bottom: 1.8vw;
}

h1.feed-plant-title {
	color: #fff;
    width: 100%;
    font-size: 2vw;
    text-align: left;
    margin: 0;
    padding: 0;
    padding-top: 0vh;
    /*text-shadow: 0.5vw 0 1vw #8599a32f;*/
}


div.feed-plant-content {
	display: block;
    width: 45%;
    height: 90%;
    position: absolute;
    left: 10vw;
	top: 5.5%;
	z-index: 10;
}

.feed-plant-interactive-page div.feed-plant-content {
    width: 66%;
}

div.feed-plant-content p {
    font-size: 1.3vw;
	color: #fff;
	line-height: 1.4;
}

.page_feed-plant-intro div.feed-plant-content p {
	padding-right: 12.5vw;
}

div.feed-plant-content blockquote {
	position: relative;
    font-size: 1.5vw;
	color: #fff;
	line-height: 1.3;
	padding-left: 3.25vw;
	padding-right: 3.25vw;
	margin: 0 0 2vw;
	font-style: italic;
}

div.feed-plant-content blockquote small {
	font-family: 'Source Sans Pro', sans-serif;
	display: block;
	font-size: 1.2vw;
	text-align: right;
	font-style: normal;
}

div.feed-plant-content blockquote::before {
	content: "‘";
	position: absolute;
	left: 1.5vw;
	top: -1vw;
	font-size: 3vw;
	color: rgba(255,255,255,0.75);
}

div.feed-plant-content blockquote::after {
	content: "’";
	position: absolute;
	right: 1.5vw;
	bottom: -0.75vw;
	font-size: 3vw;
	color: rgba(255,255,255,0.75);
}



button.feed-plant-explore {
	margin-top: 1vw;
    /*color: #fff;
    width: auto;
    height: auto;
    font-size: calc(1.5vw + 1.5vh);
    margin: 0;
    border:0;
    border-radius: 5vw;
    background-color: #374;
    display: inline-block;
    padding: 2.5vh 2.5vw;
    cursor: pointer; */
}

.action-button {
	font-family: 'Source Sans Pro', sans-serif;
    color: #fff;
    width: auto;
    height: auto;
    font-size: 2vw;
    margin: 0;
    border:0;
    border-radius: 0vw;
    background-color: #dc315e;
    display: inline-block;
    padding: 1.75vh 2vw;
    cursor: pointer;
	font-weight: 800;
	
	font-size: 2vw;
	color: white;
	background-color: #dc315e;
	font-weight: bold;
	padding: 1vw 2vw;
	border-radius: 0vw;
	cursor: pointer;
	background-image: url(assets/Images/next_white.svg);
	background-repeat: no-repeat;
	background-size: auto 85%;
	padding-right: 5vw;
	background-position: right 0.5vw center;
}

div.feed-plant-images {
	width: 50vw;
    height: 50vw;
    position: absolute;
    left: 75vw;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

div.feed-plant-images .feed-plant-image {
	position: absolute;
    transform: translateX(-50%) translateY(-50%);
	overflow: hidden;
	border-radius: 50%;
	z-index: 50;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

div.feed-plant-images .circle-behind {
	position: absolute;
    transform: translateX(-50%) translateY(-50%);
	overflow: hidden;
	border-radius: 50%;
	box-sizing: padding-box;
	border: 0.2vw solid white;
	z-index: 40;
	padding: 0.75vw;
}

.feed-plant-image-1 {
	left: 50%;
	top: 35%;

	width: 50%;
	height: 50%;
}

.feed-plant-image-2 {
	left: 20%;
	top: 65%;

	width: 40%;
	height: 40%;
}

.feed-plant-image-3 {
	left: 65%;
	top: 72.5%;

	width: 40%;
	height: 40%;
}

.feed-plant-image img {
	height: 100%;
	width: auto;
}

.feed-plant-intro-page #drosera_image_credits {
	position: absolute;
	bottom: 2vw;
	right: 2vw;
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 50%;
	background-color: white;
	color: black;
	line-height: 1.5vw;
	text-align: center;
	cursor: pointer;
}


/*

-> Feed-Plant Interactive page */


.feed-plant-interactive-page {
	position: relative;
	width: 100%;
	height: 100%;
	/* height: 50vw;
	width: 100vw;
	top: 50%;
	left: 0%;
    transform: translateY(-50%); */
	/*background-color: red;*/
}


#reaction_layer {
	position: relative;
	width: 100%;
	height: 100%;
}

.feed-plant-interactive h1.feed-plant-title {
	color: black;
}

.feed-plant-interactive div.feed-plant-content p {
	color: black;
	margin-top: 0;
}

.feed-plant-interactive div.feed-plant-content h2 {
	font-family: 'Source Sans Pro', sans-serif;
	margin-bottom: 0.25vw;
	font-size: 1.5vw;
}


.feed-plant-interactive .page_quarter {
	background-color: #dc315e;
}

.feed-plant-interactive .page_threequarter {
	/* background-color: #fbfcf6; */
	z-index: 50;
}

.feed-plant-interactive .page_threequarter > div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* transition: opacity 1s linear; */
}

.feed-plant-interactive .page_threequarter .content-detail {
	display: none;
	/* background-color: white;
	z-index: 999; */
}

.feed-plant-interactive .page_threequarter .content-detail .return {
	position: absolute;
	bottom: 3vw;
	right: 3vw;
	font-size: 2vw;
	color: white;
	background-color: #dc315e;
	font-weight: bold;
	padding: 1vw 2vw;
	border-radius: 10vw;
	cursor: pointer;
	background-image: url(assets/Images/Drosera/tongs_open.png);
	background-repeat: no-repeat;
	background-size: auto 75%;
	padding-right: 10vw;
	background-position: right 2vw center;
	/* opacity: 0; */
}

.feed-plant-interactive.detail .page_threequarter .content-detail {
	display: block;
	opacity: 0;
	animation: show_c 1s linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail .page_threequarter .content-landing {
	/* display: none; */
	opacity: 1;
	animation: hide_c 1s linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail .clock {
	display: block;
	opacity: 0;
	animation: show_c 1s linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.hide .page_threequarter .content-detail {
	display: block;
	opacity: 1;
	animation: hide_c 1s linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.hide .page_threequarter .content-landing {
	/* display: none; */
	opacity: 0;
	animation: show_c 1s linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.hide .clock {
	display: block;
	opacity: 1;
	animation: hide_c 1s linear;
	animation-fill-mode: forwards;
}


@keyframes hide_c {
	0% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}

@keyframes show_c {
	0%, 50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.feed-plant-interactive #dropArea {
	position: absolute;
	top: 50%;
    transform: translateX(-50%) translateY(-92.5%);
	width: 12.5vw;
	height: 12.5vw;
	left: 75%;
	z-index: 40;
	/* background-color: rgba(255,255,255,0.5); */
}

.feed-plant-interactive-page.draggingFood #dropArea {
	/* background-color: rgba(255,255,255,1); */
}

.feed-plant-interactive-page.draggingFood #dropArea.hovered {
	/* background-color: rgba(255,0,0,1); */
}

.highlight {
	display: none;
}

.feed-plant-interactive-page.draggingFood .highlight {
	display: block;
}

.highlight .glow {
	top: 10%;
	left: 10%;
	position: absolute;
	width: 80%;
	height: 80%;
	background: radial-gradient(circle at center, rgb(248, 248, 217) 0%, rgba(248, 248, 217,0.65) 40%, rgba(248, 248, 217,0) 75%);
}

.feed-plant-interactive-page.draggingFood .highlight .glow {
	animation: glow_pulsate 3000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes radiate_x {
	0% {
		transform: scaleY(10%) scaleX(80%);
	}
	50% {
		transform: scaleY(10%) scaleX(30%);
	}
	100% {
		transform: scaleY(10%) scaleX(80%);
	}
}

@keyframes radiate_y {
	0% {
		transform: scaleX(10%) scaleY(30%);
	}
	50% {
		transform: scaleX(10%) scaleY(80%);
	}
	100% {
		transform: scaleX(10%) scaleY(30%);
	}
}

@keyframes glow_pulsate {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}


.feed-plant-interactive-page #carnivorousPlant {
	position: absolute;
	top: 50%;
    transform: translateX(-50%) translateY(-50%);
	width: 30vw;
	height: 40vw;
	overflow: hidden;
	left: 75%;
	box-sizing: border-box;
	z-index: 30;
}

.feed-plant-interactive-page #carnivorousPlant .plant-graphic {
	width: 100%;
	height: 100%;
	position: relative;
	background-size: contain;
	background-repeat: none;
	background-position: center;
}

.feed-plant-interactive-page #carnivorousPlant .plant-graphic > div {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: contain;
	background-repeat: none;
	background-position: center;
	transition: opacity 1s linear;
}

.feed-plant-interactive-page #carnivorousPlant .plant-graphic .image-default {
	background-image: url(assets/Images/Drosera/drosera_1.png);
	opacity: 1;
}

.feed-plant-interactive-page #carnivorousPlant .plant-graphic .image-eat_1 {
	background-image: url(assets/Images/Drosera/drosera_2.png);
	opacity: 0;
}

.feed-plant-interactive-page #carnivorousPlant .plant-graphic .image-eat_2 {
	background-image: url(assets/Images/Drosera/drosera_3.png);
	opacity: 0;
}

.feed-plant-interactive-page #carnivorousPlant .plant-graphic .image-die {
	background-image: url(assets/Images/Drosera/drosera_4.png);
	opacity: 0;
}

/* plant eat */
.feed-plant-interactive.detail.play .eat #carnivorousPlant .plant-graphic .image-default {
	animation: plant_eat_default 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .eat #carnivorousPlant .plant-graphic .image-eat_1 {
	animation: plant_eat_1 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .eat #carnivorousPlant .plant-graphic .image-eat_2 {
	animation: plant_eat_2 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

/* plant eat cobra */
.feed-plant-interactive.detail.play .eat_cobra #carnivorousPlant .plant-graphic .image-default {
	animation: plant_eat_default_cobra 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .eat_cobra #carnivorousPlant .plant-graphic .image-eat_1 {
	animation: plant_eat_1_cobra 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .eat_cobra #carnivorousPlant .plant-graphic .image-eat_2 {
	animation: plant_eat_2_cobra 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

/* plant die */
/* .feed-plant-interactive.detail.play .die #carnivorousPlant .plant-graphic .image-default {
	animation: plant_eat_default 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
} */

/* .feed-plant-interactive.detail.play .die #carnivorousPlant .plant-graphic .image-die {
	animation: plant_die 10s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
} */

.feed-plant-interactive.detail.play .die .highlight {
	display: block;
	opacity: 0;
	animation: plant_die_2 12.5s;
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .die .highlight .glow {
	opacity: 1;
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0,0.65) 40%, rgba(0, 0, 0,0) 75%);
}

@keyframes plant_eat_default {
	0%, 40% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}

@keyframes plant_eat_1 {
	40% {
		opacity: 0;
	}
	50%, 90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes plant_eat_2 {
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes plant_eat_default_cobra {
	0%, 7.5% {
		opacity: 1;
	}
	17.5%, 100% {
		opacity: 0;
	}
}

@keyframes plant_eat_1_cobra {
	7.5% {
		opacity: 0;
	}
	17.5%, 90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes plant_eat_2_cobra {
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


@keyframes plant_die {
	40% {
		opacity: 0;
	}
	50%, 90% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes plant_die_2 {
	0% {
		opacity: 0;
	}
	33%, 80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.feed-plant-interactive.detail.play .try_again {
	display: block;
	animation: try_again 1s;
	animation-delay: 11.5s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail .content-detail .return {
	opacity: 0;
	display: block;
	animation: try_again 1s;
	animation-delay: 11.5s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	z-index: 50;
}

#lightbox .darwin_summary p {
	font-size: 1.15vw;
}

/* .feed-plant-interactive.detail.hide .content-detail .return {
	opacity: 1;
	display: block;
	animation: try_again 1s;
	animation-delay: 11.5s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-direction: reverse;
} */

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

.feed-plant-interactive.detail.play .slow .clock .minute-pointer {
	animation: turn calc(9.5s / 12);
	animation-iteration-count: 14.5;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .slow .clock .hour-pointer {
	animation: turn 9.5s;
	animation-iteration-count: calc(14.5 / 12);
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .fast .clock .minute-pointer {
	animation: turn calc(70s / 12);
	animation-iteration-count: 2;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .fast .clock .hour-pointer {
	animation: turn 70s;
	animation-iteration-count: calc(2 / 12);
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .forever .clock .minute-pointer {
	animation: turn calc(2.5s / 12);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .forever .clock .hour-pointer {
	animation: turn 2.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.feed-plant-interactive.detail.play .twodays .clock .minute-pointer {
	animation: turn calc(2.5s / 12);
	animation-iteration-count: calc(12 * 4);
	animation-timing-function: linear;
}

.feed-plant-interactive.detail.play .twodays .clock .hour-pointer {
	animation: turn 2.5s;
	animation-iteration-count: 4;
	animation-timing-function: linear;
}


.feed-plant-interactive.detail.play .dissolve #dropArea .image {
	animation: dissolve 10s;
    /* animation-iteration-count: infinite; */
    animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes dissolve {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.9;
	}
	100% {
		opacity:0;
	}
}

.feed-plant-interactive-page.draggingFood #carnivorousPlant {
	border-color: red;
}

.feed-plant-interactive-page.draggingFood #carnivorousPlant.hovered {
	border-color: green;
}

.food-wrapper {
	position: absolute;
	height: 50vw;
	width: 100%;
	top: 50%;
	left: 0vw;
    transform: translateY(-50%);
    z-index: 100;
	box-sizing: border-box;
}

.food-item {
	position: absolute;
	width: 15vw;
	height: 15vw;
	transform: translateX(-50%) translateY(-50%);
}

.food-item h2 {
	color: black;
    width: 100%;
    font-size: 2vw;
    text-align: left;
    margin: 0;
    padding: 0;
    padding-top: 0vh;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.food-item-mover {
	position: absolute;
	width: 100%;
    height: 100%;
	top:0;
	left:0;
	z-index: 90;
}

.food-item-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.food-item.active .food-item-inner {
	transform: translateX(20%) translateY(2%);
}

.food-item-wrap {
	position: absolute;
	width: 5vw;
    height: 5vw;
    border: 0;
    margin: 0;
	box-sizing: border-box;
	padding: 0;
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	left: 50%;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 100;
}

.food-item.active .food-item-wrap {
	height: 10vw;
	
	animation: dangle 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes dangle {
	0% {
		transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
	25% {
		transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	}
	75% {
		transform: translateX(-50%) translateY(-50%) rotate(25deg);
	}
	100% {
		transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
}

.food-item .tongs_top, .food-item .tongs_bottom {
	display: none;
}

.food-item.active .tongs {
	display: block;
	width: 10vw;
	height: 5vw;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-86%) translateY(-55%);
}

.food-item.active .tongs_top {

	display: block;
	width: 10vw;
	height: 5vw;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-86%) translateY(-55%);

	background-image: url(assets/Images/Drosera/tongs_closed_top.png);
	background-size: contain;
	background-repeat: none;
	z-index: 200;
}
.food-item.active .tongs_bottom {

	display: block;
	width: 10vw;
	height: 5vw;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-86%) translateY(-55%);

	background-image: url(assets/Images/Drosera/tongs_closed.png);
	background-size: contain;
	background-repeat: none;
	z-index: 90;
}

.feed-plant-interactive-page .food-item.active {
	z-index: 100;
}

.feed-plant-interactive-page .food-item.active {
	z-index: 100;
}

.feed-plant-interactive-page.draggingFood .food-item .food-item-wrap {
	pointer-events: none;
}

.food-item .image {
	position: absolute;
	width: 5vw;
    height: 5vw;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: none;
    overflow: hidden;
    background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
    cursor: pointer;
	bottom: 0;
}

#dropArea .image {
	position: absolute;
	width: 6vw;
    height: 6vw;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: none;
    overflow: hidden;
    background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	bottom: 0;
	opacity: 1;
}

.food-item .source-image {
	position: absolute;
	width: 60%;
    height: 60%;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: none;
    overflow: hidden;
    background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	left: 0;
	top: 0;
	z-index: 0;
}

#feed-plant-overlay {
	/* display: none; */
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: rgba(25,25,25,0.5);
	display: none;
}

#feed-plant-overlay .inner {
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	background-color: white;
	border-radius: 0;
	position: absolute;
	z-index: 25;
	box-sizing: border-box;
	padding: calc(2vw + 2vh);
	overflow-y: scroll;
}

#feed-plant-overlay .content h1 {
	font-size: calc(1.5vw + 1.5vh);
}

#feed-plant-overlay .content p {
	font-size: calc(0.5vw + 0.5vw);
}

#feed-plant-overlay .close {
	top: 10%;
	right: 10%;

	width: calc(3vw + 3vh);
	height: calc(3vw + 3vh);
	font-size: calc(1vw + 1vh);

	border-radius: 50%;

	background-color: black;

	z-index: 50;
	position: absolute;

	color: white;

	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;

	transform: translateX(25%) translateY(-25%);
}

.feed-plant-interactive .clock {
	position: absolute;
	left: 2vw;
	top: 2vw;
	width: 10vw;
	height: 10vw;
	display: none;
}

.feed-plant-interactive .try_again {
	position: absolute;
	left: 12vw;
	top: 0vw;
	width: auto;
	height: auto;
	opacity: 0;
	font-size: 3vw;
	color: white;
	cursor: pointer;
	display: none;
}

/* .feed-plant-interactive .darwins_summary {
	z-index: 500;
	color: white;
	font-size: 2vw;
	text-align: right;
	margin: 0;
	padding: 0;
	padding-top: 0px;
	padding-top: 0vh;
	position: absolute;
	bottom: 2vw;
	right: 2vw;
	z-index: 10;
	cursor: pointer;
	display: none;
	opacity: 0;
	width: 20vw;
	z-index: 999;
} */

.feed-plant-interactive .darwins_summary {
	z-index: 500;
	color: white;
	font-size: 1.75vw;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0vw;
	z-index: 10;
	cursor: pointer;
	display: none;
	opacity: 0;
	width: 23vw;
	z-index: 999;
	padding-right: 9vw;
	box-sizing: border-box;
	height: 10vw;
	line-height: 10vw;
	bottom: 0;
}

.feed-plant-interactive.reveal .darwins_summary {
	display: block;
	animation: show_summary 1s linear;
	animation-fill-mode: forwards;
	animation-delay: 0s;
}

@keyframes show_summary {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* 
.feed-plant-interactive .darwins_summary .darwin {
	width: 10vw;
	height: 10vw;
	margin-bottom: 1vw;
	background-image: url(assets/Images/Drosera/darwin.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: color-dodge;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	right: 0;
	bottom: 100%;
} */


.feed-plant-interactive .darwins_summary .darwin {
	width: 6vw;
	height: 6vw;
	background-image: url(assets/Images/Drosera/darwin.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: color-dodge;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	right: 1.5vw;
	bottom: 50%;
	transform: translateY(50%);
}

/*
.food-item .glow {
	position: absolute;
	width: 200%;
	height: 200%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	background: radial-gradient(circle at center, rgba(100,100,255,0) 0%, rgba(100,100,255,0) 20%, rgba(100,100,255,0.25) 30%, rgba(100,100,255,0) 40%, rgba(100,100,255,0) 75%);
	animation: glow 2500ms;
    animation-iteration-count: infinite;
}*/


/* CLOCK */

.clock {
	position: relative;
	border-radius: 50%;
	width: 6vw;
	height: 6vw;
	overflow: hidden;
	box-sizing: border-box;
	/* border: solid 0.5vw black; */

	background-image:url(assets/Images/Auxanometer/clock.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

}

.clock .center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 10%;
	height: 10%;
	border-radius: 50%;
	/* background-color: black; */
}

.clock .pointer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	height: 100%;
	width: 20%;
}

.clock .pointer .pointer-inner {
	position: absolute;
	width: 100%;
	height: 50%;
	bottom: 47%;
	/* background-color: black; */
}

.clock .minute-pointer .pointer-inner {
	width: 50%;
	left: 23%;
	height: 42%;

	background-image:url(assets/Images/Auxanometer/pointer_minutes.png);
	background-size: contain;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.clock .hour-pointer .pointer-inner {
	left: 10%;
	width: 80%;
	height: 40%;

	background-image:url(assets/Images/Auxanometer/pointer_hours.png);
	background-size: contain;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.clock.play_infinite .minute-pointer {
	animation: turn 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.clock.play_infinite .hour-pointer {
	animation: turn calc(5s * 12);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes turn {
	0% {
		transform: translateX(-50%) translateY(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) translateY(-50%) rotate(360deg);
	}
}

@media only screen and (max-width: 1000px) {
	div.feed-plant-content p {
		font-size: 1.4vw;
	}
	.feed-plant-interactive div.feed-plant-content h2 {
		font-size: 3vw;
	}
	div.feed-plant-interactive.detail .page_threequarter .content-detail {
		overflow-y: scroll;
		/*height: 100vh;*/
	}	
	div.feed-plant-interactive.detail .page_threequarter .content-detail .feed-plant-content {
		padding-bottom: 2rem;
		height: auto;
	}

	.feed-plant-interactive.detail .content-detail .return {
		position: fixed;
		right: calc(25% + 2rem);
	}

	#lightbox {
		overflow-y: scroll;
	}

	#lightbox .lightbox-inner {
  		height: auto;
  		width: 100%;
  		position: relative;
  		z-index: 25;
  		box-sizing: border-box;
  		overflow-y: scroll;
		padding: 15vh 10vw;
		transform:none;
		left:auto;
		top:auto;
	}

	#lightbox .close {
		top: 0vw;
		position: fixed;
		right: 0vw;
		width: 4vw;
  		height: 4vw;
		border-radius:0;
	}
	div#lightbox .lightbox-inner p {
		font-size:1.5vw;
	}

	.food-wrapper {
		height:95%;
	}

	div.choose-experiment .experiment {
	        position: absolute;
        	height: 80%;
	        width: 50vh;
	}

	div.choose-experiment .experiment .image_wrap {
        	height: 50vh;
        	width: 100%;
        	border-radius: 50%;
	}

	div.choose-experiment .experiment .image {
        	height: 46vh;
        	width: 46vh;
        	border-radius: 50%;
        	background-color: #eaefdd;
        	cursor: pointer;
        	margin: 2vh;
	}

}