@import url("../../../global/css/main.css");

@media 
screen and (max-width: 672px) {
    .cookie-alert {
        position: fixed;
        top: 90vh;
        left: 5%;
        width: 90%;
        height: 5rem;
        border-radius: 7px;
        background-color: white;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        -ms-border-radius: 7px;
        -o-border-radius: 7px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        z-index: 150;
        animation: alertIn 1s;
        -webkit-animation: alertIn 1s forwards, alertOut 1s 5s forwards;
        opacity: 0;
        overflow: hidden;
    }
    
    @keyframes alertIn {
        100% {
            top: 80vh;
            opacity: 1;
        }
    }
    
    @keyframes alertOut {
        100% {
            top: 95vh;
            opacity: 0;
        }
    }
    
    .cookie-alert .cookie-icon {
        position: relative;
        top: .75rem;
        left: .5rem;
        height: 3.5rem;
    }
    
    .cookie-alert .cookie-headline {
        position: relative;
        top: -3rem;
        left: 4.5rem;
        font-weight: 500;
        font-size: 1rem;
        color: var(--primary);
        max-width: 60%;
    }
    
    .cookie-alert .cookie-text {
        position: relative;
        top: -2.8rem;
        left: 4.5rem;
        font-weight: 400;
        font-size: 1rem;
    }
    
    .cookie-alert .close-btn {
        position: absolute;
        top: 0;
        right: .5rem;
        line-height: 5rem;
        font-size: 2rem;
        transition: .2s;
        -webkit-transition: .2s;
        -moz-transition: .2s;
        -ms-transition: .2s;
        -o-transition: .2s;
    }
    
    .cookie-alert .close-btn:hover {
        cursor: pointer;
        color: var(--primary);
    }
}