.roto {
	width: 100vw;
	margin-left: -12vw;
	position: relative;
	margin-top: 4vw;
	margin-bottom: 4vw;
}

.roto img {
	opacity: 0;
	transition-duration: 500ms;
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 !important;
}

.roto svg {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 100;
	margin: 0;
	padding: 0;
}

.explanation {
	position: absolute;
	opacity: 0;
	padding: 0 !important;
	background: none;
	transition-duration: 500ms;
	font-size: 1.4vw;
	z-index: 10000 !important;
	line-height: 150% !important;
}

.explanation em {
	font-style: normal;
	font-weight: bold;
}

.explanation.tube {
	width: 20% !important;
	top: 30%;
	left: 10%;
}

.explanation.communication {
	width: 23% !important;
	top: 10%;
	left: 60%;
}

.audio-toggle {
	position: fixed;
	top: 5vw;
	left: 5vw;
	display: block;
	padding: 1.6vw;
	background: #fdfbf5 !important;
	border: 1px solid #aaaaa0;
	border-radius: 50%;
	text-transform: uppercase;
	font-family: "Telefon", sans-serif;
	font-size: 0.8em;
	z-index: 10000;
}

.audio-toggle {
	position: absolute;
	top: 0;
	padding: 14px;
	cursor: pointer;
	transition-duration: 500ms;
}

.audio-toggle:hover,
.audio-toggle.active {
	border: 1px solid #201a07;
}

.audio-toggle:hover .img,
.audio-toggle.active .img {
	opacity: 0.6;
}

.audio-toggle.active {
	background: #faf6e9 !important;
}

.audio-toggle.off .img.off {
	background: url("../images/digifys/audio-off.svg");
	background-size: 100%;
	display: block;
}

.audio-toggle.on .img.off {
	display: none;
}

.audio-toggle.on .img.on {
	background: url("../images/digifys/audio-on.svg");
	background-size: 100%;
	display: block;
}

.audio-toggle.off .img.on {
	display: none;
}

.audio-toggle .img {
	height: 28px;
	width: 28px;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.3;
	transition-duration: 500ms;
}


@keyframes sleep {
  0%, 15%   {opacity: 0}
  50%  {opacity: 0.8}
  85%, 100% {opacity: 0}
}

.blinkfast {
	animation: sleep 1s ease infinite;
}

img.blink.active {
	animation: sleep 5s ease infinite;
}

#watercom_left, #watercom_right, #rockcom_left, #rockcom_right, #mobilecom_left, #mobilecom_right {
	cursor: pointer;
}

#layer12, #layer13, #layer11, #layer14, #layer15, #layer16 {
	opacity: 0;
}

#tubeact {
	cursor: pointer;
}

#stones {
	transition-duration: 500ms;
    transform-origin: 368px 310px;
}

#stones>* {
	fill: #fff !important;
	transition-duration: 500ms;
}

.border {
	background: red;
	position: fixed;
	height: 50px;
	width: 50px;
	top: 0;
	left: 0;
	display: block;
}