/*ESTILOS DE LA LECCION*/

h3.actividad {
    font-family: 'CabinSketch', sans-serif;
}

svg .state.off  {
    opacity: 0.3;
}

.state:hover, .state.on {
    opacity: 1;
    stroke: #a9a9a9;
    stroke-width: 1;
}

#tooltip {
    /*background: rgba(0, 0, 0, 0.9);
    border: 1px solid grey;
    border-radius: 5px;
    color: white;*/
    font-size: 16px;
    margin: 10px;
    opacity: 0;
    /*padding: 4px;*/
    pointer-events: none;
    position: absolute;
    /*text-align: center;
    width: 250px;*/
}
/*
#tooltip h4 {
margin: 0;
font-size: 14px;
}*/

.tooltip-exploratorios .tooltip-exploratorios-content {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
    transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

.tooltip-exploratorios-content {
    width: 400px;
}

.tooltip-exploratorios-text {
    padding: 3px;
}

/*Estilos actividad de clasificacion bioticos y abioticos*/
#bioticos, #abioticos {
    border: 1px solid #fff;
    border-radius: 50%;
    height: 400px;
    margin: 0 auto;
    transform: scale(0.85);
    transition: all 0.3s;
    width: 400px;
}

#bioticos {
    background: rgba(253, 150, 54, 0.3);
}

#abioticos {
    background: rgba(255, 173, 213, 0.3);
}

.factor{
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    height: 150px;
    margin: 5px;
    transition: transform 0.1s;
    width: 130px;
    z-index: 50;
}
#platanera {
    background-image: url(../img/arrastre-01.png);
}
#alga {
    background-image: url(../img/arrastre-02.png);
}
#hongo {
    background-image: url(../img/arrastre-03.png);
}
#tarantula {
    background-image: url(../img/arrastre-04.png);
}
#pez {
    background-image: url(../img/arrastre-05.png);
}
#gallo {
    background-image: url(../img/arrastre-06.png);
}
#oveja {
    background-image: url(../img/arrastre-07.png);
}
#agua {
    background-image: url(../img/arrastre-08.png);
}
#lava {
    background-image: url(../img/arrastre-09.png);
}
#aire {
    background-image: url(../img/arrastre-10.png);
}
#piedras {
    background-image: url(../img/arrastre-11.png);
}
#glaciar {
    background-image: url(../img/arrastre-12.png);
}

/*Estilos recurso de los atomos a los sistemas*/
#titulo-zoom, .selector-paso {
    font-family: 'CabinSketch', sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.selector-paso {
    margin-top: 20px;
    position: relative;
    z-index: 100;
}

.selector-paso a {
    color: #249A31;
    text-decoration: none;
    transition: 0.1s linear;
}

.selector-paso a:hover {
    color: rgba(36, 154, 48, 0.4);
}

.zoom-in-out {
    height: 600px;
    position: relative;
    width: 600px;
}

ul.zoom-in-out {
    border: 15px solid rgba(0,0,0,0.15);
    border-radius: 80px;
    margin: 0 auto;
}

.zoom-in-out li{
    background-position: center;
    background-size: 100%;
    border-radius: 80px;
    background-repeat: no-repeat;
    top: -15px;
    left: -15px;
    opacity: 0;
    position: absolute;
    transition: all 1s;
    height: 600px;
    width: 600px;
}

.zoom-in-out li.celula{
    background-image: url(../img/1celula.png);
}

.zoom-in-out li.tejido{
    background-image: url(../img/2tejido.png);
    background-size: 10000px;
}

.zoom-in-out li.organo{
    background-image: url(../img/3organo.png);
    background-size: 10000px;
}

.zoom-in-out li.sistema{
    background-image: url(../img/4sistema.png);
    background-position: 0px 600px;
}

.zoom-in-out li.individuo{
    background-image: url(../img/5individuo.png);
    background-position-y: -600px;
}

.zoom-in-out li.poblacion{
    background-image: url(../img/6poblacion.jpg);
    background-size: 10000px;
}

.zoom-in-out li.comunidad{
    background-image: url(../img/7comunidad.jpg);
    background-size: 10000px;
}

.zoom-in-out li.ecosistema{
    background-image: url(../img/8ecosistema.jpg);
    background-position: 0px 600px;
}

/*Step 0*/
.zoom-in-out.step-0 li.celula{
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.zoom-in-out.step-0 li.tejido{
    opacity: .5;
}

/*Step 1*/
.zoom-in-out.step-1 li.celula, .zoom-in-out.step-1 li.tejido{
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.zoom-in-out.step-1 li.celula{
    background-size: 0px;
    opacity: 0;
}

.zoom-in-out.step-1 li.tejido{
    background-size: 600px;
    opacity: 1;
}

.zoom-in-out.step-1 li.organo{
    opacity: .3;
}

/*Step 2*/
.zoom-in-out.step-2 li.tejido, .zoom-in-out.step-2 li.organo{
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

.zoom-in-out.step-2 li.tejido{
    background-size: 0px;
    opacity: 0;
}

.zoom-in-out.step-2 li.organo{
    background-size: 600px;
}

/*Step 3*/
.zoom-in-out.step-3 li.organo, .zoom-in-out.step-3 li.sistema{
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.zoom-in-out.step-3 li.organo{
    background-size: 600px;
    background-position: 0px -600px;
    opacity: 0;

}
.zoom-in-out.step-3 li.sistema{
    background-position: center;
    z-index: 1;
}

/*Step 4*/
.zoom-in-out.step-4 li.sistema, .zoom-in-out.step-4 li.individuo{
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.zoom-in-out.step-4 li.individuo{
    background-size: 600px;
    background-position: center;
    opacity: 1;
}

.zoom-in-out.step-4 li.poblacion{
    opacity: .5;
}

/*Step 5*/
.zoom-in-out.step-5 li.individuo, .zoom-in-out.step-5 li.poblacion{
    opacity: 1;
    z-index: 1;

}

.zoom-in-out.step-5 li.individuo{
    background-position: center;
    background-size: 0px;
    opacity: 0;
}

.zoom-in-out.step-5 li.poblacion{
    background-size: 600px;
}

.zoom-in-out.step-5 li.comunidad{
    opacity: .3;
}

/*Step 6*/
.zoom-in-out.step-6 li.poblacion, .zoom-in-out.step-6 li.comunidad{
    opacity: 1;
    z-index: 1;

}

.zoom-in-out.step-6 li.poblacion{
    background-size: 0px;
    opacity: 0;
}

.zoom-in-out.step-6 li.comunidad{
    background-size: 600px;
}

/*Step 7*/
.zoom-in-out.step-7 li.comunidad, .zoom-in-out.step-7 li.ecosistema{
    opacity: 1;

}

.zoom-in-out.step-7 li.comunidad{
    background-size: 600px;
    background-position: 0px -600px;
    opacity: 0;
}

.zoom-in-out.step-7 li.ecosistema{
    background-position: center;
    z-index: 1;
}

/* niveles-organizacion */
#contenedor-niveles-organizacion-seres-vivos #contenedor-destino {
    background-image: url(../img/bg.png);
    height: 490px;
    width: 850px;
    position: relative;
    margin: 0 auto;
    top: 40px;
    background-repeat: no-repeat;
    background-position: center;
}

#contenedor-niveles-organizacion-seres-vivos #list-origen-ec {
    list-style: none;
    padding: 0;/*
    position: absolute;
    top: 500px;*/margin: auto;
    width: 660px;
    text-align: center;
    background-image: url("../img/sombras.png");
    background-repeat: no-repeat;
    background-position: center;
}

#contenedor-niveles-organizacion-seres-vivos #list-origen-ec li {
    height: 83px;
    width: 162px;
    margin-bottom: 3.4px;
    display: inline-block;
    margin-bottom: 4px;
    vertical-align: middle;
}

#contenedor-niveles-organizacion-seres-vivos #list-destino-ec {
    list-style: none outside none;
    padding: 0px;
    position: relative;
    /*right: 0px;*/
    top: -26px;
    width: 844px;
}

#contenedor-niveles-organizacion-seres-vivos #list-destino-ec li {
    /*border:solid thin red;*/
    background-image: url('../img/contenedor.png');
    display: inline-block;
    height: 86px;
    margin: 0px 26px 168px 31px;
    position: relative;
    vertical-align: top;
    width: 154px;
    z-index: 1;
}

#contenedor-niveles-organizacion-seres-vivos ul.labels{
    position: absolute;
    top: 68px;
    left: 0;
    padding-left: 0px;
    /*width: 100%;*/
}

#contenedor-niveles-organizacion-seres-vivos ul.labels li {
    color: #3c763d;
    display: inline-block;
    height: 155px;
    line-height: 19px;
    font-size: 18px;
    margin-bottom: 107px;
    margin: 10px 18px 85px;
    padding: 5px;
    position: relative;
    right: 0;
    text-align: center;
    vertical-align: top;
    width: 172px;
}

#btn_calificar {
    margin-top: 60px;
}