/*área de juego*/
.contenido{
	position: relative;
	z-index: 0;
  padding: 0px;
  margin: auto;
	background-image: url("../img/Cactus-21.png");
	background-size: 100vh 100vh;
	background-repeat: no-repeat;
  width: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body{
    background-color:  #c9e4bb;
}
audio{
	display: none;
}
/* Gatgets del index */
.itemBegin{
	position: absolute;
	left: 10%;
	bottom:5%;
	cursor: pointer;
}
.begin{
	position: absolute;
	color: white;
	z-index: 10;
	font-size: 230%;
	font-family: fantasy;
	left: 12%;
	bottom:16%;
		cursor: pointer;
}
.begin:hover{
	padding: 5px;
}
/*Estilos de Main*/
.textHeaderBox{
	position: absolute; top: 2%; left: 0%; width: 100%; height: 25%; display: flex; flex-flow: row wrap;
border: 1px solid #ffffff;
background: rgba(179, 214, 223, 0.5);
border-radius: 5px;
font-size: 35px;color: white;display: flex; flex-flow: row wrap;
padding: 10px;align-content: center;
}
.speaker{
	position: absolute;
	left:-20%;
	top: 20%;
	-webkit-transition: .1s linear;
	transition: .1s linear;
	cursor: pointer;
}
.speaker:hover{
		padding: 5px;
}

.cactus{
	position: absolute;
	z-index: 10;
	width: 40%;
	left: 25%;
	bottom: 2%;
}
.espina{
	position: absolute ;
	z-index: 9;
	left: 53%;
	top: 70%;
	animation-name: espina;
	animation-duration: .1s;
	animation-timing-function: linear;
}
.espinaWard{
	position: absolute;
	z-index: 9;
	left: 53%;
	top: 70%;
}
@keyframes espina {
	0%{
		left: 53%;
		top: 70%;
	}
	100%{
		left: 53%;
		top: -10%;
	}
}

/*Globo 1 */
.globo1{
	position:absolute;
	left: 60%;
	top:40%;
	animation-name: globo_1;
	animation-duration: 15s;
	animation-timing-function: linear;
}
@keyframes globo_1 {
	0%{
		left: -40%;
	  top:40%
	}
	10%{
		left: -30%;
		top:30%
	}
	20%{
		left: -20%;
		top:40%
	}
	30%{
		left: -10%;
		top:30%
	}
	40%{
		left: 0%;
		top:40%
	}
	50%{
		left: 10%;
		top:30%
	}
	60%{
		left: 20%;
		top:40%
	}
	70%{
		left: 30%;
	  top:30%
	}
	80%{
		left: 40%;
		top:40%
	}
	90%{
		left: 50%;
	  top:30%
	}
	100%{
		left: 60%;
		top:40%;
	}
}

/*Globo 2 */
.globo2{
	position:absolute;
	left: 70%;
	top:20%;
	animation-name: globo_2;
	animation-duration: 10s;
	animation-timing-function: linear;
}
@keyframes globo_2 {
	0%{
		left: -30%;
	  top: 20%
	}
	10%{
		left: -20%;
		top:10%
	}
	20%{
		left: -10%;
		top:20%
	}
	30%{
		left: 0%;
		top:10%
	}
	40%{
		left: 10%;
		top:20%
	}
	50%{
		left: 20%;
		top:10%
	}
	60%{
		left: 30%;
		top:20%
	}
	70%{
		left: 40%;
	  top:10%
	}
	80%{
		left: 50%;
		top:20%
	}
	90%{
		left: 60%;
	  top:10%
	}
	100%{
		left: 70%;
		top:20%;
	}
}

/*Globo 3 */
.globo3{
	position:absolute;
	left: 70%;
	top:35%;
	animation-name: globo_3;
	animation-duration: 12s;
	animation-timing-function: linear;
}
@keyframes globo_3 {
	0%{
		left: -50%;
	  top: 35%
	}
	10%{
		left: -40%;
		top:40%
	}
	20%{
		left: -30%;
		top:35%
	}
	30%{
		left: -20%;
		top:40%
	}
	40%{
		left: -10%;
		top:35%
	}
	50%{
		left: 0%;
		top:40%
	}
	60%{
		left: 20%;
		top:35%
	}
	70%{
		left: 40%;
	  top:40%
	}
	80%{
		left: 50%;
		top:35%
	}
	90%{
		left: 60%;
	  top:40%
	}
	100%{
		left: 70%;
		top:35%;
	}
}

/*Globo 4 */
.globo4{
	position:absolute;
	left: 70%;
	top:40%;
	animation-name: globo_4;
	animation-duration: 11s;
	animation-timing-function: linear;
}
@keyframes globo_4 {
	0%{
		left: -30%;
	  top: 40%
	}
	10%{
		left: -20%;
		top:45%
	}
	20%{
		left: -10%;
		top:40%
	}
	30%{
		left: 0%;
		top:45%
	}
	40%{
		left: 10%;
		top:40%
	}
	50%{
		left: 20%;
		top:45%
	}
	60%{
		left: 30%;
		top:40%
	}
	70%{
		left: 40%;
	  top:45%
	}
	80%{
		left: 50%;
		top:40%
	}
	90%{
		left: 60%;
	  top:45%
	}
	100%{
		left: 70%;
		top:40%;
	}
}

/*Globo 5 */
.globo5{
	position:absolute;
	left: 75%;
	top:10%;
	animation-name: globo_5;
	animation-duration: 15s;
	animation-timing-function: linear;
}
@keyframes globo_5 {
	0%{
		left: -25%;
	  top: 10%
	}
	10%{
		left: -15%;
		top:5%
	}
	20%{
		left: -5%;
		top:10%
	}
	30%{
		left: 5%;
		top:5%
	}
	40%{
		left: 15%;
		top:10%
	}
	50%{
		left: 25%;
		top:5%
	}
	60%{
		left: 35%;
		top:10%
	}
	70%{
		left: 45%;
	  top:5%
	}
	80%{
		left: 55%;
		top:10%
	}
	90%{
		left: 65%;
	  top:5%
	}
	100%{
		left: 75%;
		top:10%;
	}
}

/*Globo 6 */
.globo6{
	position:absolute;
	left: 75%;
	top:10%;
	animation-name: globo_6;
	animation-duration: 20s;
	animation-timing-function: linear;
}
@keyframes globo_6 {
	0%{
		left: -25%;
	  top: 0%
	}
	10%{
		left: -15%;
		top:5%
	}
	20%{
		left: -5%;
		top:10%
	}
	30%{
		left: 5%;
		top:5%
	}
	40%{
		left: 15%;
		top:10%
	}
	50%{
		left: 25%;
		top:5%
	}
	60%{
		left: 35%;
		top:10%
	}
	70%{
		left: 45%;
	  top:5%
	}
	80%{
		left: 55%;
		top:10%
	}
	90%{
		left: 65%;
	  top:5%
	}
	100%{
		left: 75%;
		top:10%;
	}
}

/*Globo 7 */
.globo7{
	position:absolute;
	left: 75%;
	top:5%;
	animation-name: globo_7;
	animation-duration: 8s;
	animation-timing-function: linear;
}
@keyframes globo_7 {
	0%{
		left: -25%;
	  top: 5%
	}
	10%{
		left: -15%;
		top:0%
	}
	20%{
		left: -5%;
		top:5%
	}
	30%{
		left: 5%;
		top:0%
	}
	40%{
		left: 15%;
		top:5%
	}
	50%{
		left: 25%;
		top:0%
	}
	60%{
		left: 35%;
		top:5%
	}
	70%{
		left: 45%;
	  top:0%
	}
	80%{
		left: 55%;
		top:5%
	}
	90%{
		left: 65%;
	  top:0%
	}
	100%{
		left: 75%;
		top:5%;
	}
}

/*Globo 8 */
.globo8{
	position:absolute;
	left: 75%;
	top:5%;
	animation-name: globo_8;
	animation-duration:6s;
	animation-timing-function: linear;
}
@keyframes globo_8 {
	0%{
		left: -25%;
	  top: 5%
	}
	10%{
		left: -15%;
		top:0%
	}
	20%{
		left: -5%;
		top:5%
	}
	30%{
		left: 5%;
		top:0%
	}
	40%{
		left: 15%;
		top:5%
	}
	50%{
		left: 25%;
		top:0%
	}
	60%{
		left: 35%;
		top:5%
	}
	70%{
		left: 45%;
	  top:0%
	}
	80%{
		left: 55%;
		top:5%
	}
	90%{
		left: 65%;
	  top:0%
	}
	100%{
		left: 75%;
		top:5%;
	}
}

/*Globo 9 */
.globo9{
	position:absolute;
	left: 75%;
	top:5%;
	animation-name: globo_9;
	animation-duration: 13s;
	animation-timing-function: linear;
}
@keyframes globo_9 {
	0%{
		left: -25%;
	  top: 5%
	}
	10%{
		left: -15%;
		top:0%
	}
	20%{
		left: -5%;
		top:5%
	}
	30%{
		left: 5%;
		top:0%
	}
	40%{
		left: 15%;
		top:5%
	}
	50%{
		left: 25%;
		top:0%
	}
	60%{
		left: 35%;
		top:5%
	}
	70%{
		left: 45%;
	  top:0%
	}
	80%{
		left: 55%;
		top:5%
	}
	90%{
		left: 65%;
	  top:0%
	}
	100%{
		left: 75%;
		top:5%;
	}
}

/*Globo 10 */
.globo10{
	position:absolute;
	left: 70%;
	top:30%;
	animation-name: globo_10;
	animation-duration: 8s;
	animation-timing-function: linear;
}
@keyframes globo_10 {
	0%{
		left: 0%;
	  top: 30%
	}
	10%{
		left: 10%;
		top:25%
	}
	20%{
		left: 20%;
		top:30%
	}
	30%{
		left: 25%;
		top:25%
	}
	40%{
		left: 35%;
		top:30%
	}
	50%{
		left: 40%;
		top:25%
	}
	60%{
		left: 50%;
		top:30%
	}
	70%{
		left: 55%;
	  top:25%
	}
	80%{
		left: 60%;
		top:30%
	}
	90%{
		left: 65%;
	  top:25%
	}
	100%{
		left: 70%;
		top:30%
	}
}


.circle{
	position: absolute;
	width: 10%;
	height: 10%;
	z-index: 11;
	border-radius: 50%;
	background-color: white;
	font-size: 350%;
	text-align: center;
	font-family: fantasy;
}