* {
    margin:0;
    padding:0;
}

/*ORIENTATION*/
@media screen and (orientation:landscape) {
    .anuncios, #Cocos2dGameContainer{
      visibility: visible;
      /*background: url('../sprites/STARS.gif');      */
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      margin: auto;
    }
    #Cocos2dGameContainer{
        /*zoom: 85%;
        margin-top: 5% !important;  */
    }
    
    h1{
      margin: auto 0;
    }
    #sinVoltear{
      display: none;
    }

    canvas{
        /*background: url('../sprites/STARS.gif');
        background-repeat: no-repeat;
        background-size: cover;*/
        margin-bottom: 5rem;
        /*zoom: 86%;        
        margin-left: 2% !important; */       
        display: block;
    }

    img.teresita2 {
        left: 48px !important;
        top: 312px !important;
    }

    img.teresita {
        top: 196px !important;
        left: -16px !important;
    }

  }

@media screen and (orientation:portrait) {
    /*#sinVoltear{
      display: block;
      font-size: 5rem;
      background: black;
      color: white;
      text-align: center
    }
    .anuncios, #Cocos2dGameContainer{
        visibility: hidden;
    }*/
  }

body {
    background-color: #030319 !important;
}


canvas{
    /*background: url('../sprites/STARS.gif');
    background-repeat: no-repeat;
    background-size: cover;*/
    margin-bottom: 5rem;
    margin: auto;
    display: block;
}
img.teresita {
    /*position: absolute;
    top: 265px;
    left: 0px;*/
    width: 211px;
    display: block;
    margin: auto;
    transform: scaleX(-1) translateY(-400px) translateX(205px);
}
img.teresita2 {
    /*position: absolute;
    left: 46px;*/
    width: 100px;
    /*top: 385px;*/
    /*transform: scaleX(-1);*/
    display: block;
    margin: auto;
    transform: scaleX(-1) translateX(250px) translateY(-278px);
    animation-name: tereRotation;
    animation-duration: 4s;
    animation-iteration-count: infinite;

}
@keyframes tereRotation {
    40% {
        transform: scaleX(-1) translateX(250px) translateY(-278px) rotateZ(5deg);
    }
    90% {
        transform: scaleX(-1) translateX(250px) translateY(-278px) rotateZ(0deg);
    }
    
}


@media only screen and (min-width: 590px) {
    /*.btn-screen{
        visibility: visible !important;
    }*/
    img.teresita2{
        transform: scaleX(-1) translateX(285px) translateY(-118px);
    }

    img.teresita {        
        transform: scaleX(-1) translateY(-200px) translateX(263px);
    }

    .elementoFondo1 {
        display: none;
        position: absolute;
        width: 200px;
        top: 95px;
        left: 941px;
        opacity: 0;
        animation-name: pajaritos;
        animation-duration: 15s;
        animation-iteration-count: infinite;
    }

    .avion {
        position: absolute;
        width: 50px;
        top: 45px;
        left: 50px;    
        opacity: 0;
        filter: contrast(0);
        transform: scaleX(-1) rotateZ(30deg);
        animation-name: avion;
        animation-duration: 60s;
        animation-iteration-count: infinite;
    }
    

    @keyframes tereRotation {
        40% {
            transform: scaleX(-1) translateX(285px) translateY(-118px) rotateZ(5deg);
        }
        90% {
            transform: scaleX(-1) translateX(285px) translateY(-118px) rotateZ(0deg);
        }
        
    }

    @keyframes avion {
        0% {
            left: 600px;
            opacity: 0;
        }
        20% {
            opacity: 1;
        }   
        90% {
            left: 50px;
            opacity: 0;
        }
        
    }

    @keyframes pajaritos {
        0% {
            left: 0px;
            opacity: 0;
            transform: scaleX(1);
        }
        40% {
            left: 600px;
            opacity: 1;
        }
        90% {
            left: 0px;
            opacity: 0;
            transform: scaleX(-1);
        }
        
    }
  }

.modal-body {
    background-position: center;
    background-size: cover !important;
}
.btnIniciar {
    position: relative;
    width: 7vw;
    margin: auto;
    display: block;
    margin-top: -24vh;
}
.btnStep {
    width: 500px;
    top: 80px;
    left: 345px;
    position: absolute;
}
.anuncios {
    /*width: 1200px;
    height: 660px;*/
    width: auto;
}
.fondo {
    display: block;
    width: auto;
    margin: auto;
    margin-top: 0;
    height: 100vh;
}
.btn-screen {
    font-size: 3rem;
    position: absolute;
    width: 80px;
    top: 15px;
    left: 15px;
    background: #0000008c;
    color: #fff;
    padding: 15px;
    border-radius: 50px;
    box-shadow: 3px 3px 8px 2px black;
    z-index: 2;
    visibility: hidden;
}

:fullscreen{
    zoom: 150%;
    margin: auto !important;
    display: block !important;
}

.elementoFondo1 {
    display: none;
    position: absolute;
    width: 100px;
    top: 55px;
    left: 541px;
    opacity: 0;
    animation-name: pajaritos;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

@keyframes pajaritos {
    0% {
        left: 20%;
        opacity: 0;
        transform: scaleX(1);
    }
    40% {
        left: 65%;
        opacity: 1;
    }
    90% {
        left: 20%;
        opacity: 0;
        transform: scaleX(-1);
    }
    
}

.avion {
    position: absolute;
    width: 40px;
    top: 25px;
    left: 50px;    
    opacity: 0;
    filter: contrast(0);
    transform: scaleX(-1) rotateZ(30deg);
    animation-name: avion;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}

@keyframes avion {
    0% {
        left: 65%;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }   
    90% {
        left: 30%;
        opacity: 0;
    }
    
}