.vizajoso{
    display: flex;
    width: 3.8%;
    height: 8.4%;
    position: fixed;
    top: 3.6%;
    left: 1.9%;
    transition: 0.5s;
   opacity: 0;
   z-index: 30;
    
    
}
.animation-vizajoso{
    animation: replicant 15s ease-in-out 1 !important ;
}
.content-vizajoso{
    display: flex;
    background-color: #0094DC;
    position:fixed;
    top: 4.6%;
    left: 42vw;
    border-top-left-radius:1vw ;
    border-bottom-left-radius:1vw ;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size:0vw;
      z-index: 30;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   

}
.animation-content-vizajoso{
    animation: content 15s ease-in-out 1 !important ;

}
@keyframes replicant {
1%{
opacity: 1;
}

20%{
    transform: translateX(58vw) rotateZ(360deg) scale(1.8);
opacity: 1;
}
25%{
    transform: translateX(58vw) rotateZ(360deg) scale(1.8); 
}
30%{
    
}
35%{
    transform: translateX(58vw) rotateZ(360deg) scale(1.8);
}

50%{

    transform: translateX(58vw) rotateZ(360deg) scale(1.8);

} 
80%{
    transform: translateX(58vw) rotateZ(360deg) scale(1.8);
}
97%{
    opacity: 1;
}
100%{
    opacity: 0;
}

}
@keyframes content {
   0%{
    width: 0%;
   }
   18%{
    width: 0%;
    left: 58vw;
    font-size: 1.1vw;
   }
   21%{
    width: 16.82%;
    height: 6.5%;
    left: 42vw;
    font-size: 1.1vw;
   }
   40% {
    width: 16.82%;
    height: 6.5%;
    left: 42vw;
    font-size: 1.1vw;
   }

   60%{
    width: 16.82%;
    height: 6.5%;
    left: 42vw;
    font-size: 1.1vw;
   }
   75%{
    width: 16.82%;
    height: 6.5%;
    left: 42vw;
    font-size: 1.1vw;
   }
   79%{
    width: 0%;
    left: 58.9vw;
    font-size: 1.1vw;
   }
   90%{
    font-size:0vw;
  
   }
}

@media(orientation:portrait){

    .vizajoso{
                        display: flex;
                        width: 9.6%;
                        height: 6%;
                        position: fixed;
                        top: 5%;
                        left: 1.9%;
                        transition: 0.5s;
                        
                        
                    }
                    #agregar{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        color: white;
                        width: 18%;
                        height: 10%;
                        position: fixed;
                        background-color: blue;
                        border-radius: 50%;
                        font-size: 8vh;
                        font-weight: 600;
                        right: 1%;
                        bottom: 1%;
                        cursor: pointer;
                        }
                        @keyframes replicant {
                            1%{
                            opacity: 1;
                            }
                            
                            20%{
                                transform: translateX(65vw) rotateZ(360deg) scale(1.8);
                            opacity: 1;
                            }
                            25%{
                                transform: translateX(65vw) rotateZ(360deg) scale(1.8); 
                            }
                            30%{
                                
                            }
                            35%{
                                transform: translateX(65vw) rotateZ(360deg) scale(1.8);
                            }
                            
                            50%{
                            
                                transform: translateX(65vw) rotateZ(360deg) scale(1.8);
                            
                            } 
                            80%{
                                transform: translateX(65vw) rotateZ(360deg) scale(1.8);
                            }
                            97%{
                                opacity: 1;
                            }
                            100%{
                                opacity: 0;
                            }
                            
                            }
                            @keyframes content {
                                0%{
                                 width: 0%;
                                }
                                18%{
                                 width: 0%;
                                 left: 64vw;
                                 top: 5.5%;
                                 font-size: 1.4vh;
                                }
                                21%{
                                 width: 35%;
                                 height: 5%;
                                 left: 28.95vw;
                                 top: 5.5%;
                                 font-size: 1.4vh;
                                }
                                40% {
                                    width: 35%;
                                    height: 5%;
                                    top: 5.5%;
                                 left: 28.95vw;
                                 font-size: 1.4vh;
                                }
                             
                                60%{
                                    width: 35%;
                                    height: 5%;
                                    top: 5.5%;
                                 left: 28.95vw;
                                 font-size: 1.4vh;
                                }
                                75%{
                                    width: 35%;
                                    height: 5%;
                                    top: 5.5%;
                                 left: 28.95vw;
                                 font-size: 1.4vh;
                                }
                                79%{
                                 width: 0%;
                                 left: 64vw;
                                 font-size: 1.4vh;
                                 top: 5.5%;
                                }
                                90%{
                                 font-size:0vw;
                               
                                }}
}