/* CSS Document */
/*-------------------------------------------*/

.col-md-2 {
    width: 20%;
}
.calificacion
{
    position: absolute;
    top: 20px;
    z-index: 3;
    left: 39%;
    display: none;
}
.figuras
{
        width: 95px;
    height: 95px;
    background-color: white;
    border-radius: 12px;}

.textos div
{
	width: 19%;
    text-align: center;
    float: left;
    font-size: 21px;
    margin: 2px;
    border-radius: 12px;
}

.miflecha
{
	position: absolute;
    background-color: #FF5722;
    height: 3px;
}

.flecha_1
{
	width: 22%;
    left: 1%;
    top: 61px;
	-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.flecha_2{
    width: 30%;
    left: 6%;
    top: 56px;
    -webkit-transform: rotate(46deg);
    transform: rotate(46deg);
}
.flecha_3
{
    width: 42%;
    left: 9%;
    top: 59px;
    -webkit-transform: rotate(29deg);
    transform: rotate(29deg);
}
.flecha_4
{
    width: 62%;
    left: 8%;
    top: 56px;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.flecha_5
{
    width: 85%;
    left: 10%;
    top: 64px;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}

.flecha_6
{
    width: 30%;
    left: 7%;
    top: 56px;
    -webkit-transform: rotate(134deg);
    transform: rotate(134deg);
}
.flecha_7
{
    width: 144px;
    left: 130px;
    top: 61px;
	-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.flecha_8
{
	
    width: 30%;
    left: 25%;
    top: 56px;
    -webkit-transform: rotate(46deg);
    transform: rotate(46deg);
}

.flecha_9
{
    width: 42%;
    left: 28%;
    top: 59px;
    -webkit-transform: rotate(29deg);
    transform: rotate(29deg);
}

.flecha_10
{
   width: 62%;
    left: 26%;
    top: 56px;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

.flecha_11
{
        width: 42%;
    left: 9%;
    top: 59px;
    -webkit-transform: rotate(151deg);
    transform: rotate(151deg);
}

.flecha_12
{
    width: 30%;
    left: 25%;
    top: 56px;
    -webkit-transform: rotate(46deg);
    transform: rotate(134deg);
}

.flecha_13
{
   width: 144px;
    left: 255px;
    top: 61px;
	-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.flecha_14
{
     width: 30%;
    left: 44%;
    top: 56px;
    -webkit-transform: rotate(46deg);
    transform: rotate(46deg);
}

.flecha_15
{
    width: 42%;
    left: 47%;
    top: 59px;
    -webkit-transform: rotate(29deg);
    transform: rotate(29deg);
}

.flecha_16
{
       width: 62%;
    left: 11%;
    top: 56px;
    -webkit-transform: rotate(20deg);
    transform: rotate(160deg)
}

.flecha_17
{
    width: 42%;
    left: 29%;
    top: 59px;
    -webkit-transform: rotate(151deg);
    transform: rotate(151deg);
}

.flecha_18
{
     width: 30%;
    left: 45%;
    top: 56px;
    -webkit-transform: rotate(46deg);
    transform: rotate(134deg);
}

.flecha_19
{
    width: 144px;
    left: 380px;
    top: 61px;
	-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.flecha_20
{
    width: 30%;
    left: 63%;
    top: 56px;
    -webkit-transform: rotate(46deg);
    transform: rotate(46deg);
}

.flecha_21
{
       width: 85%;
    left: 11%;
    top: 55px;
    -webkit-transform: rotate(15deg);
    transform: rotate(165deg);
}

.flecha_22
{
     width: 62%;
    left: 30%;
    top: 56px;
    -webkit-transform: rotate(20deg);
    transform: rotate(160deg)
}

.flecha_23
{
     width: 42%;
    left: 49%;
    top: 59px;
    -webkit-transform: rotate(151deg);
    transform: rotate(151deg);
}

.flecha_24
{
	 width: 30%;
    left: 64%;
    top: 56px;
    -webkit-transform: rotate(46deg);
    transform: rotate(134deg);
}

.flecha_25
{
    width: 144px;
    left: 505px;
    top: 61px;
	-webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
	#zona_trabajo{
		 
		    min-height: 100%;
    margin-top: -8px;
    padding-top: 22px;
    left: 0px;
    width: 100%;
    border-radius: 12px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
	}

	
	.miimagen
	{
		width: 100%;
   		margin: 7px;
	}
		
	.correcto
	{
		    display: none;
    width: 241px;
    position: absolute;
    left: 39%;
    top: 20px;
    z-index: 20;
	}
	.incorrecto
	{
		    display: none;
    width: 241px;
    position: absolute;
    left: 39%;
    top: 20px;
    z-index: 20;
	}
	
	.botones
	{
		border-radius:20px;
		padding:5px;
		width:185px;
		margin:20px;
		color:white;
		font-family:Chewy;
		font-size:24px;
	}
	
	.color1 { background-color:#F44336; }
	 .color2 { background-color:#E91E63; }
	 .color3 { background-color:#9C27B0; }
	 .color4 { background-color:#3F51B5; }
	  .color5 { background-color:#EF6C00; }
	   .color6 { background-color:#FF5722; }
	 .color7 { background-color:#43A047; }