/*reset*/
.body {

    margin: 0;
    padding: 0;
    overflow-y: visible;
    background-color: blueviolet;
    
}

/*utility classes*/
.container{
    margin:auto;
    max-width: 1920px;
    overflow: 0 10px;
    padding: 0 05px;
    position: relative;
    
}
#showcase{
    display: block;
    
    
}
.slide{
    width: 100%;
    height: 100%;
    
    

}
#logo{
    width: 300px;
    height: auto;
    position: absolute;
    margin-top: -110vh;
    margin-left: 85vh;
    margin-right: auto;
}

.btn{
    
    margin-top: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    margin-left: 74vh;;
    
}
.tmn{
    width: 480px;
    --time: 0.7s;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    


}
.tmn:hover{
    
    width: 500px;
    transition: 0.2s;
    
}
.notificacion {
    
    width: 300px;
    background-color: #ffffff;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 2px solid white;
    position: fixed;
    top: 34vh;
    left: 85vh;
    z-index: 12;
    border-radius: 10px;
    overflow: hidden;
}
.batman {
   width: 280px;
    height: auto;
    position: relative;
    top: 15px;
    left: 4px;
}


.notificacion{
    align-self: flex-start;
    padding: 10px;
    height: 615px;
}
.salir {
    position: absolute;
    top: 20px;
    right: 20px;
}

.salir:hover{
    cursor: pointer;
}
.hide {
    visibility: hidden;
    z-index: -10;
    opacity: 0;
}

@media screen and (max-width:1620px){

 #logo{
    width: 250px;
    height: auto;
    position: absolute;
    margin-top: -75vh;
    margin-left: 63vh;
    margin-right: auto;
}

.btn{
    margin-top: 30vh;
    margin-left: 56vh;
    
}


.tmn{
    width: 380px;
    --time: 0.7s;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    


}
.tmn:hover{
    
    width: 420px;
    transition: 0.2s;
    
}
.notificacion {
    left: 59vh;
    width: 22vw;
    border: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 5px;
    height: 533px;
    top: 30vh;

} 
.batman {
    width: 250px;
    height: auto;
    position: relative;
    top: 0px;
    left: 41px;

}
.salir {
    position: absolute;
    top: 20px;
    right: 20px;
}
 
} 
 @media screen and (max-width:1200px){
    .container{
        margin:auto;
        max-width: 1200px;
        height: auto;
        
    }
    #logo{
        width: 200px;
        height: auto;
        position: absolute;
        margin-top: -55vh;
        margin-left: 46vh;
        margin-right: auto;
    }
    
    .btn{
        margin-top: 25vh;
        margin-left: 36vh;
        
    }
    .tmn{
        width: 380px;
        --time: 0.7s;
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    
    
    }
    .tmn:hover{
        width: 340px;
        --time: 0.7s;
    }
    .notificacion {
        left: 43vh;
        width: 22vw;
        border: 2px solid white;
        border-bottom: 2px solid white;
        border-radius: 5px;
        height: 44%;
        top: 17vh;
    
    } 
    .batman {
        width: 221px;
        height: auto;
        position: relative;
        top: 0px;
        left: 12px;
        
    }
    .salir {
        position: absolute;
        top: 20px;
        right: 20px;
    }
 }
 @media screen and (max-width:768px){
    
    .container{
        margin:auto;
    }    

    .w-100{
        width: 200%;
        
        
        
    }
    
    #logo{
        width: 400px;
    height: auto;
    position: absolute;
    margin-top: -105vh;
    margin-left: 15vh;
    margin-right: auto;
    }
    
    .btn{
        margin-top: 50vh;
        margin-left: 4vh;
        
    }
    .tmn{
        width: 600px;
        --time: 0.7s;
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    
    
    }
    .tmn:hover{
        width: 340px;
        --time: 0.7s;
    }
    .carousel-item{
        width: 300%;
        
        
    }
    .notificacion {
        width: 100vw;
    }
    .notificacion img {
        padding: 0 45px;
    }
    .notificacion {
        left: 15vh;
        width: 438px;
        height: auto;
        border: 2px solid white;
        border-bottom: 2px solid white;
        border-radius: 5px;
    } 
    .batman {
        width: 403px;
        height: auto;
        position: relative;
        top: 15px;
        left: 16px;
    
    }
    .salir {
        position: absolute;
        top: 20px;
        right: 20px;
   }
 @media screen and (max-width:414px){
    
    .container{
        margin:auto;
        
    }    

    .w-100{
        margin-top: auto;
        width: 100%;
        height: 95vh;
        
        
    }
    
    #logo{
        width: 290px;
        height: auto;
        position: absolute;
        margin-top: -93vh;
        margin-left: 6vh;
        margin-right: auto;
    }
    
    .btn{
        margin-top: 40vh;
        margin-left: 1vh;
        
    }
    .tmn{
        width: 340px;
        --time: 0.7s;
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    
    
    }
    .tmn:hover{
        width: 340px;
        --time: 0.7s;
    }
    .mob{
        width: 300%;
        
        
    }
    .notificacion {
         left: 2vh;
         width: 331px;
         height: auto;
         border: 2px solid white;
         border-bottom: 2px solid white;
         margin-top: -13vh;
         border-radius: 5px;
    } 
    .batman {
        width: 359px;
        height: auto;
        position: relative;
        top: 13px;
        left: 0px;
    
    }
    .salir {
        position: absolute;
        top: 20px;
        right: 20px;
   }
}    

 @media screen and (max-width:375px){
    
    .container{
        margin:auto;
        
        height: 70vh;
    }    

    .w-100{
        margin-top: auto;
        width: 100%;
        height: 98vh;
        
        
    }
    
    #logo{
        width: 250px;
        height: auto;
        position: absolute;
        margin-top: -68vh;
        margin-left: 8vh;
        margin-right: auto;
    }
    
    .btn{
        margin-top: 36vh;
        margin-left: -1vh;
        
    }
    .tmn{
        width: 340px;
        --time: 0.7s;
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    
    
    }
    .tmn:hover{
        width: 340px;
        --time: 0.7s;
    }

   
        
        
     .mob{
        width: 350%;
        
        
    }
    .notificacion {
        left: 4vh;
        width: 42vh;
        top: 15vh;
        height: 78vh;
        border: 2px solid white;
        border-bottom: 2px solid white;
        border-radius: 5px;
   } 
   .batman {
            width: 300px;
            height: auto;
            position: relative;
            top: 42px;
            left: 5px;
    }
    .salir {
        position: absolute;
        top: 20px;
        right: -9px;
    }
    
 }

}