/*
    
    Objetivo Creativo
    www.objetivocreativo.com
    
*/
span {
    font-family: Escolar, EscolarNegra, 'Times New Roman', Times, serif;
    font-weight: 600;
    font-size: 50px;
}

#volver {
    position: absolute;
    top: 1%;
    left: 7%;
}

#exito {
    position: absolute;
    width: 25%;
    top: 40%;
    left: 45%;
    z-index: 5000;
}

.carousel-control-prev {
    position: absolute;
    top: 45%;
    height: 20%
}

.carousel-control-next {
    position: absolute;
    top: 45%;
    height: 20%
}

.circulo-letra {
    font-family: EscolarNegra, Escolar, 'Times New Roman', Times, serif;
    font-size: 30px;
    position: absolute;
    top: 0%;
    right: 9%;
    border-radius: 50%;
    padding: 3px 5px;
    color: white;
}

.circulo-fake {

    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    
    transition-duration: 150ms;
    
}

.cuadrado-fake {
 
    transition-duration: 150ms;
    
    border: 3px dashed transparent;
    
} 
.rectangulo-fake {
 
    transition-duration: 150ms;
    
    border: 3px dashed transparent;
    
} 
.rombo-fake {
 
    transition-duration: 150ms;
    
    border: 3px dashed transparent;

    transform: rotate(45deg);
    
} 

.triangulo-fake {
    width: 0;
    height: 0;
    border-right: 150px solid transparent;
    border-top: 0px solid transparent;
    border-left: 150px solid transparent;
    border-bottom: 250px solid #f0ad4e;

}

.triangulo1-fake {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-top: 0px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 150px solid transparent;
    position: absolute;
    margin-top: 21%; 
    margin-left: 55%;

}

.pos-10 {
    width: 200px;
    height: 200px;
    margin: 50px auto;

}
.pos-20 {
    width: 150px;
    height: 150px;
    margin-left: 70%;
}

.pos-21 {
    width: 150px;
    height: 150px;
    margin-left: 10%;
    margin-top: 0%
}
.pos-31 {
    position: absolute;
    width: 150px;
    height: 150px;
    margin-left: 30%;
    margin-top: 5%;

}
.pos-32 {
    position: absolute;
    width: 150px;
    height: 150px;
    margin-left: 27%;
    margin-top: 38%;

}

.pos-a-20 {
    width: 180px;
    height: 180px;
    margin-top: 50px;
    margin-left: 50%;
}
.pos-a-21 {
    width: 150px;
    height: 150px;
    margin: 10px auto;
}

.pos-e-20 {
    width: 150px;
    height: 150px;
    margin-top: 50px;
    margin-left: 50%;
}
.pos-e-21 {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 65%;
    left: 20%;
}

.pos-i-20 {
    width: 150px;
    height: 150px;
    margin-left: 70%;
}
.pos-i-21 {
    width: 150px;
    height: 150px;
    margin-left: 10%;
    margin-top: 20%
}

.pos-o-30 {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 60%;
    left: 5%
}
.pos-o-31 {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 35%;
    left: 40%
}
.pos-o-32 {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 55%;
    left: 70%
}

.pos-u-40 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 35%;
    left: 40%
}
.pos-u-41 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 55%;
    left: 20%
}
.pos-u-42 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 45%;
    left: 60%
}
.pos-u-43 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 70%;
    left: 40%
}

.silabas {
    height: 300px;
}

.silaba-left {
    position: absolute;
    top: 50%;
    left: 25%;
}
.silaba-right {
    position: absolute;
    top: 50%;
    left: 55%;
}

#directas{
    color: green;
    font-size: 40px;
    margin-left: 37%;
}

#ir-inversas {
    font-family: EscolarNegra, 'Times New Roman', Times, serif;
    position: absolute;
    top: 80%;
    left: 34%;
    border: 2px solid green;
    color: green;
    font-size: 30px;
    border-radius: 20px;
    padding: 5px;
}
#ir-inversas:hover {
    border: 3px solid green;
    text-decoration: none;

}

.letra-izq {
    font-size: 80px;
    position: absolute;
    left: 10px;
}

.letra-dcha {
    font-size: 80px;
    margin-left: 400px;
}

.letra-dcha-dos-letras {
    font-size: 80px;
    margin-left: 370px;
}

.anima-letra-dcha {
    -webkit-animation-name: anima-dcha; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-name: anima-dcha;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}

@keyframes anima-dcha {
    0%   {margin-left: 400px; font-size: 80px;}
    33%  {color:red; margin-left: 250px; font-size: 80px;}
    66%  {color:red; margin-left: 100px; font-size: 80px;}
    100% {color:red; margin-left: 10px; font-size: 80px;}
}

@-webkit-keyframes anima-dcha {
    0%   {margin-left: 400px; font-size: 80px;}
    33%  {color:red; margin-left: 250px; font-size: 80px;}
    66%  {color:red; margin-left: 100px; font-size: 80px;}
    100% {color:red; margin-left: 10px; font-size: 80px;}
}

.anima-letra-izda {
    -webkit-animation-name: anima-izda; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-name: anima-izda;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}

@keyframes anima-izda {
    0%   {position: absolute; left: 10px; font-size: 80px;}
    33%  {color:red; position: absolute; left: 130px; font-size: 80px;}
    66%  {color:red; position: absolute; left: 220px; font-size: 80px;}
    100% {color:red; position: absolute; left: 245px; font-size: 80px;}
}

@-webkit-keyframes anima-izda {
    0%   {position: absolute; left: 10px; font-size: 80px;}
    33%  {color:red; position: absolute; left: 130px; font-size: 80px;}
    66%  {color:red; position: absolute; left: 220px; font-size: 80px;}
    100% {color:red; position: absolute; left: 235px; font-size: 80px;}
}

.anima-letra-izda-dos-letras {
    -webkit-animation-name: anima-izda-dos-letras; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-name: anima-izda-dos-letras;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}

@keyframes anima-izda-dos-letras {
    0%   {position: absolute; left: 10px; font-size: 80px;}
    33%  {color:red; position: absolute; left: 120px; font-size: 80px;}
    66%  {color:red; position: absolute; left: 190px; font-size: 80px;}
    100% {color:red; position: absolute; left: 205px; font-size: 80px;}
}

@-webkit-keyframes anima-izda-dos-letras {
    0%   {position: absolute; left: 10px; font-size: 80px;}
    33%  {color:red; position: absolute; left: 120px; font-size: 80px;}
    66%  {color:red; position: absolute; left: 190px; font-size: 80px;}
    100% {color:red; position: absolute; left: 205px; font-size: 80px;}
}

.anima-letra-dcha-dos-letras {
    -webkit-animation-name: anima-dcha-dos-letras; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-name: anima-dcha-dos-letras;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}

@keyframes anima-dcha-dos-letras {
    0%   {margin-left: 370px; font-size: 80px;}
    33%  {color:red; margin-left: 250px; font-size: 80px;}
    66%  {color:red; margin-left: 100px; font-size: 80px;}
    100% {color:red; margin-left: 0px; font-size: 80px;}
}

@-webkit-keyframes anima-dcha-dos-letras {
    0%   {margin-left: 370px; font-size: 80px;}
    33%  {color:red; margin-left: 250px; font-size: 80px;}
    66%  {color:red; margin-left: 100px; font-size: 80px;}
    100% {color:red; margin-left: 0px; font-size: 80px;}
}

/* colores, tamaños de letras y fuentes*/
.escolar-negra {
    font-family: Escolarnegra;
}
.escolar-fina {
    font-family: Escolar;
}
.peque {
    font-size: 105px;
}

.mediana {
    font-size: 125px;
}

.grande {
    font-size: 175px;
}

.red {
    color: red;
}
.blue {
    color: blue;
}
.yellow {
    color: yellow;
}
.green {
    color: green;
}
.orange {
    color: orange;
}
.indigo {
    color: indigo;
}
.lightblue {
    color: lightblue;
}
.purple {
    color: purple;
}
.brown {
    color: brown;
}

.volver {
    margin-top: 60%;
}

.canasta-grande {
    position: absolute;
    top: 110px;
    left: 380px;
    width: 200px;
    height: 200px;
}

.canasta-peque {
    position: absolute;
    top: 130px;
    left: 50px;
    width: 120px;
    height: 120px;
}

.canasta-grande-rectangulo {
    position: absolute;
    top: 150px;
    left: 310px;
    width: 280px;
    height: 180px;
}

.canasta-peque-rectangulo {
    position: absolute;
    top: 130px;
    left: 50px;
    width: 180px;
    height: 100px;
}

.triangulo-fake0 {
    width: 0;
    height: 0;
    border-right: 80px solid transparent;
    border-top: 0px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 130px solid brown;
}

.triangulo-fake1 {
    width: 0;
    height: 0;
    border-right: 120px solid transparent;
    border-top: 0px solid transparent;
    border-left: 120px solid transparent;
    border-bottom: 200px solid orange;
}

.box-frases {
    font-size: 40px;
    line-height: 30px;
}

.img-encesta {
    max-height: 80px;
}
.letra-encesta {
    font-size: 30px;
    font-weight: 1;
    text-align: center;
}
.center {
    text-align: center;
}

.exito {
    max-width: 100px;
    z-index: 20000;
}

.mira-silaba-div {
    position: absolute;
    text-align: center;
    top: 510px;
    left: 120px;
}
.mira-silaba {
    margin-top: 30%;
    padding-left: 10px;
    padding-right: 10px;
}

.lineas {
    font-size: 20px;
    color: blue;
}

.img-nombre {
    height: 117px;
    margin-top: 20px;
}

.silabas-2 {}
.silabas-3 {
    left: 200px;
}
.silabas-4 {
    left: 160px;
}
.silabas-6 {
    left: 75px;
}
.frases {
    font-size: 40px;
    margin-left: auto;
}
.cuadro {
    border: 1px solid blue;
    border-bottom: 2px solid blue;
    height: 50px;
    margin-left: 5px;
}
.mitad {
    display: block;
    width: 50%;
}

.full {
    display: block;
    width: 100%;  
}

.letra-elige {
    font-size: 50px;
}

.row-top-left {
    margin-top: 50px;
    margin-left: 20px;
}

.ordena {
    font-size: 40px;
    font-weight: normal;
    line-height: 2;
}

.img-peque {
    position: absolute;
    width: 15%;
    left: 80px;
    top: 200px;
}
.img-mediano {
    position: absolute;
    width: 20%;
    left: 240px;
    top: 180px;
}
.img-grande {
    position: absolute;
    width: 25%;
    left: 400px;
    top: 165px;
}

.drag {
    position: absolute;
    z-index: 2000;
}
.drag-peque { width: 10%; }

.drag-mediano { width: 17%; } 

.drag-grande { width: 25%; }

#estanteria {
    max-width: 200px;
}

.libro {
    z-index: 2000;
    max-width: 30px;
}

.img-central {
    position: absolute;
    max-width: 150px;
}
.ardilla, .nube, .gato, .raton {
    position: absolute;
    max-width: 100px;
    z-index: 1000;
}
.id-objetivo {
    position: absolute; 
    width: 300px;
    height: 150px;
}
.id-objetivo-lr {
    position: absolute; 
    width: 220px;
    height: 150px;
    border: 1px solid blue;
}
.flores {
    max-width: 140px;
}
.mariquitas, .anillos {
    max-width: 85px;
}
.absolute {
    position: absolute; 
}
.puno, .mano {
    max-width: 190px;
}
.izquierda {
    left: 15px;
    top: 15px;
}
.derecha {
    left: 350px;
    top: 15px;
}
.comprobar {

    border: 1px solid red;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 20px;
    margin-left: 230px;

}
input[type=text] {
    font-size: 30px;
    border: 1px solid blue;
    border-radius: 20px;
}