header{
    #block-quartiers-de-demain-logoquartiersdedemain{
        .field_field_logo{
            .qdd-header{
                opacity: 0;
                animation-delay: 0.9s;
                animation-name: scale;
                animation-duration: 2.8s;
                &.animated{
                    opacity: 1;
                    transform: scale(2); 
                    @media(max-width:820px) {
                        transform: scale(1);
                    }
                    .blink-blue {
                        opacity: 0;
                        // animation: blink 3s 3;
                        animation-delay: 0.1s;
                        animation-name: blink;
                        animation-duration: 5s;
                    }
    
                    .blink-red {
                        opacity: 0;
                        animation-delay: 0.3s;
                        animation-name: blink;
                        animation-duration: 5s;
                    }
    
                    .blink-black {
                        opacity: 0;
                        animation-delay: 0.5s;
                        animation-name: blink;
                        animation-duration: 5s;        
                    }
    
                    .blink-black2 {
                        opacity: 0;
                        animation-delay: 0.7s;
                        animation-name: blink;
                        animation-duration: 5s;
                    }
                    @keyframes blink {
                        0%, 100% {
                            opacity: 0;
                        }
                        50% {
                            opacity: 1;
                        }
                    }

                    .consultation{
                        display: none;
                        animation-name: slideIn;
                        animation-delay: 0.5s;
                        animation-duration: 1s;
                    } 

                    @keyframes slideIn {
                        0%{
                            transform: translateX(0px) ;
                        }
                        100%{
                            transform: translateX(600px) ;
                        }
                    } 

                    @keyframes scale {
                        0%{
                            transform: scale(2);
                        }
                        100% {
                            transform: scale(1);
                        }
                    }
    
                           
                }
            }

        }
    }
}


