html{
    margin: 0%;
    padding: 0%;
    width: 100%;
}

body{
    margin: 0%;
    padding: 0%;
    background-size: cover;
    display: table;
    overflow:hidden;
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    
    
    animation: animate 3s cubic-bezier(.5,.5,.53,.54); 
    
}

.bb{
    stroke: white;
}

.wrapper2{
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(1.34);
    width: 100%;
    height: 100%;
    opacity: 0;
    
    animation: animate2 2.2s cubic-bezier(.5,.5,.53,.54) 2.5s; 
    animation-fill-mode: forwards;
    
}

.brillo{
    position:relative;
    border-radius: 16px 16px 16px 16px;
    -moz-border-radius: 16px 16px 16px 16px;
    -webkit-border-radius: 16px 16px 16px 16px;
    width: 7%;
    height: 40%;
    transform: rotate(210deg);
    overflow:hidden;

    animation: brillo 4s cubic-bezier(.5,.5,.53,.54) 2.5s;
    animation-fill-mode: forwards;
    
}

.route{
    position:relative;
    display: block;
    width: 0%;
    height: 0%;
    transform: translate(35.7%,17%);

    animation: translate 2s cubic-bezier(.5,.5,.53,.54) 2.5s;   
}

.texto{
    transform: translate(85%,-45px);
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    color: black;
    opacity: 0;
}

.texto.animate{
    animation: animate2 1s cubic-bezier(.5,.5,.53,.54);
    animation-fill-mode: forwards;
}

.texto.exit{
    animation: exit 1s cubic-bezier(.5,.5,.53,.54);
    animation-fill-mode: forwards;
}

/* .brillo{
    position:relative;
    display: block;
    font-size:70px;
    text-decoration:none;
    color:#333;
    width: 100%;
    height: 95%;
    transform: translate(32%,25%);
    overflow:hidden;

    
} */

/* .brillo span{
	position:relative;
    display: block;
	background:url(brillo.png) no-repeat;
	margin-top:150px;
	height: 20%;
    width: 33%;
    transform: rotate(390deg);
} */

/* .efectoBrillo{
    animation: brillo 1.5s cubic-bezier(.5,.5,.53,.54) 2.5s normal;
    animation-fill-mode: forwards;
} */

.allscreen{
    position: absolute;        
    width: 100%;
    height: 100%;
    opacity: 1;

}

.wrappernoanimate{
        position: absolute;        
        width: 100%;
        height: 100%;
        opacity: 1;

        animation: animate2 1.5s cubic-bezier(.5,.5,.53,.54) 4s; 
        animation-fill-mode: forwards;
}

.wrappernoanimate.animate{
    animation: scale 5s cubic-bezier(0.68, 0.28, 0, 0.88);
    animation-fill-mode: forwards;
}

.back{
    background: url('../img/logo.png') no-repeat 50% 50%;  
}

.backRobot{
    background: url('../img/sky.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    transform: scale(0);
}

.backRobot.scalerobot{
    animation: scalerobot 5s cubic-bezier(0.49, 0.49, 0.49, 0.49) 0.8s; 
    animation-fill-mode: forwards;
}

.gateright{
    width: 35%;
    height: 102.5%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(0%,-100.5%);
    background-image: url('../img/porton-original2.png');
}

.gateleft{
    width: 37%;
    height: 97.5%;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    background-image: url('../img/porton-original.png');
}
/* 
.turndoor{
    width: 100%;
    height: 100%;
    transform: translate(100%,100%);
    display: inline-block;
}
 */


.door{
    width: 37%;
    height: 97.5%;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

.post{
    width: 13%;
    height: 101%;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

.right{
    background-image: url('../img/porton2.png');
    transform: translate(-136%,-2.8%);
}

.rightPost{
    background-image: url('../img/poste2.png');
    transform: translate(-136%,0%);
}

.right.animate{
    animation: BounceInLeft 1s cubic-bezier(.5,.5,.53,.54);
    animation-fill-mode: forwards;
}

.right.scale{
    animation: rightscale 1.2s cubic-bezier(0.14, 0.23, 1, 0.71);
    animation-fill-mode: forwards;
}

.right.open{
    animation: rightopen 1s cubic-bezier(0.14, 0.23, 1, 0.71);
    animation-fill-mode: forwards;
}

.back.animate{
    animation: exit 1.5s cubic-bezier(.5,.5,.53,.54);
    animation-fill-mode: forwards;
}

.rightPost.animate{
    animation: BounceInLeftPost 1s cubic-bezier(0.68, 0.28, 0, 0.88);
    animation-fill-mode: forwards;
}

.rightPost.scale{
    animation: rightpostscale 1s cubic-bezier(0.14, 0.23, 1, 0.71);
    animation-fill-mode: forwards;
}

.left{
    background-image: url('../img/porton.png');
    transform: translate(135%,-2.2%);
}

.left.animate{
    animation: BounceInRight 1s cubic-bezier(.5,.5,.53,.54);
    animation-fill-mode: forwards;
}

.left.scale{
    animation: Leftscale 1.2s cubic-bezier(0.14, 0.23, 1, 0.71);
    animation-fill-mode: forwards;
}

.leftPost{
    background-image: url('../img/poste1.png');
    transform: translate(135%,0%);
}

.leftPost.scale{ 
    animation: Leftpostscale 1s cubic-bezier(0.14, 0.23, 1, 0.71) !important;
    animation-fill-mode: forwards;
}

.leftPost.finish{ 
    animation-play-state:initial;
}


.leftPost.animate{
    animation: BounceInRightPost 1s cubic-bezier(.5,.5,.53,.54) ;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0%{
        opacity: 0;
        stroke-dasharray: 10;
    }
    100%{
        opacity: 1;
        stroke-dasharray: 30;  
    }
}

@keyframes animate2 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes exit {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@keyframes rightscale{
    0%{
        transform:scale(1) translate(0%,-2.8%);
        opacity: 1;
    }
    80%{
        transform:scale(1.4) translate(-30.5%,-2.8%);
        opacity: 1;
    }
    100%{
        transform:scale(1.5) translate(-37.2.5%,-2.8%);
        opacity: 0;
    }
}

@keyframes rightopen{
    0%{
        transform:scale(1.6) translate(-30.5%,-2.8%) ;
        opacity: 1;
    }
    100%{
        transform:scale(1.6) translate(-60.5%,-2.8%) ;
        opacity: 0;
    }
}

@keyframes rightpostscale{
    0%{
        transform:scale(1) translate(9%,0%);
    }
    100%{
        transform:scale(1.4) translate(-150%,-2.8%);
    }
}

@keyframes scalerobot{
    0%{
        transform:scale(0);
        opacity: 1;
    }

    7%{
        transform:scale(0.5);
        opacity: 1;
    }

    15%{
        transform:scale(1);
        opacity: 1;
    }

    25%{
        transform:scale(2);
        opacity: 0.7;
    }
    50%{
        transform:scale(3);
        opacity: 0.4;
    }
    100%{
        transform:scale(4);
        opacity: 0;
    }
}

@keyframes Leftscale{
    0%{
        transform:scale(1) translate(-1%,-2.2%);
        opacity: 1;
    }
    80%{
        transform:scale(1.4) translate(28%,-2.2%);
        opacity: 1;
    }
    100%{
        transform:scale(1.6) translate(75.25%,-2.2%);
        opacity: 0;
    }
}

@keyframes Leftpostscale{
    0%{
        transform:scale(1) translate(-13%,0%);
    }
    100%{
        transform:scale(1.4) translate(100.5%,-2.8%);
    }
}


@keyframes BounceInLeft{
    0%{
        transform: translate(-136%,-2.8%);
    }
    100%{
        transform: translate(0%,-2.8%);
    }
}

@keyframes BounceInLeftPost{
    0%{
        transform: translate(-200%,0%);
    }
    100%{
        transform: translate(9%,0%);
    }
}

/* @keyframes BounceInLeftPostExit{
    0%{
        transform: translate(9%,0%);
        width: 12%;
        opacity: 1;
    }
    90%{
        width: 12%;
        opacity: 1;
        transform: translate(-200%,0%);
    }
} */


@keyframes BounceInRight{
    100%{
        transform: translate(-1%,-2.2%);
    }
    0%{
        transform: translate(135%,-2.2%);
    }
}

@keyframes BounceInRightPost{
    100%{
        transform: translate(-13%,0%);
    }
    0%{
        transform: translate(200%,-2.2%);
    }
}


@keyframes brillo {
    from{
        opacity: 0.5;
        /* background-color: white; */
        background: rgba(255, 254, 254, 0.425);
        /* background-position: 850px 0px;   */
    }
    
    to{
        opacity: 0.3;
        height: 100%;
        /* background-position: -850px 0px; */
    } 

}

@keyframes translate {
    from{
        transform: translate(35.7%,17%);
        height: 100%;width: 100%;
    }
    
    to{
        transform: translate(70%,58%);
        height: 100%;width: 100%;
    }
}