#menu a{
    opacity: 0;
    margin-left:100px;
}
#menu.on .contact{
    opacity: 0;
    margin-left:100px;
}
#menu.on #menu1{
    animation: menuslide 1s ease-in-out .3s both;
}
#menu.on #menu2{
    animation: menuslide 1s ease-in-out .4s both;
}
#menu.on #menu3{
    animation: menuslide 1s ease-in-out .5s both;
}
#menu.on #menu4{
    animation: menuslide 1s ease-in-out .6s both;
}
#menu.on #menu5{
    animation: menuslide2 1s ease-in-out .7s both;
}
#menu.on #menu6{
    animation: menuslide2 1s ease-in-out .8s both;
}
#menu.on .contact{
    animation: menuslide2 1s ease-in-out .9s both;
}

@keyframes menuslide {
    0%{
        margin-left:100px;
        opacity: 0;
    }
    100%{
        margin-left:0px;
        opacity: 1;
    }
}

@keyframes menuslide2{
    0%{
        margin-left:100px;
        opacity: 0;
    }
    100%{
        margin-left:0px;
        opacity: 0.55;
    }
}

@keyframes menuslide3{
    0%{
        margin-left:100px;
        opacity: 0;
    }
    100%{
        margin-left:0px;
        opacity: 1;
    }
}



@keyframes sparkle1 {
    0%{
        fill:#111;
    }
    10%{
        fill:#FFD802;
    }
    20%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle2 {
    0%{
        fill:#111;
    }
    10%{
        fill:#111;
    }
    20%{
        fill:#FFD802;
    }
    30%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle3 {
    0%{
        fill:#111;
    }
    20%{
        fill:#111;
    }
    30%{
        fill:#FFD802;
    }
    40%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle4 {
    0%{
        fill:#111;
    }
    30%{
        fill:#111;
    }
    40%{
        fill:#FFD802;
    }
    50%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle5 {
    0%{
        fill:#111;
    }
    40%{
        fill:#111;
    }
    50%{
        fill:#FFD802;
    }
    60%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle6 {
    0%{
        fill:#111;
    }
    50%{
        fill:#111;
    }
    60%{
        fill:#FFD802;
    }
    70%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle7 {
    0%{
        fill:#111;
    }
    60%{
        fill:#111;
    }
    70%{
        fill:#FFD802;
    }
    80%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle8 {
    0%{
        fill:#111;
    }
    70%{
        fill:#111;
    }
    80%{
        fill:#FFD802;
    }
    90%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle9 {
    0%{
        fill:#111;
    }
    80%{
        fill:#111;
    }
    90%{
        fill:#FFD802;
    }
    100%{
        fill:#111;
    }
}


#btn_menu{
    display: inline-block;
    transition: all .6s ease-in-out;
}

#btn_menu.main #square_item_1{
    animation: sparkle1 10s linear 0s infinite running;
}
#btn_menu.main #square_item_2{
    animation: sparkle2 10s linear 0s infinite running;
}
#btn_menu.main #square_item_3{
    animation: sparkle3 10s linear 0s infinite running;
}
#btn_menu.main #square_item_4{
    animation: sparkle4 10s linear 0s infinite running;
}
#btn_menu.main #square_item_5{
    animation: sparkle5 10s linear 0s infinite running;
}
#btn_menu.main #square_item_6{
    animation: sparkle6 10s linear 0s infinite running;
}
#btn_menu.main #square_item_7{
    animation: sparkle7 10s linear 0s infinite running;
}
#btn_menu.main #square_item_8{
    animation: sparkle8 10s linear 0s infinite running;
}
#btn_menu.main #square_item_9{
    animation: sparkle9 10s linear 0s infinite running;
}



#btn_menu.about #square_item_7{
    animation: sparkle1 10s linear 0s infinite running;
}
#btn_menu.about #square_item_4{
    animation: sparkle2 10s linear 0s infinite running;
}
#btn_menu.about #square_item_1{
    animation: sparkle3 10s linear 0s infinite running;
}
#btn_menu.about #square_item_2{
    animation: sparkle4 10s linear 0s infinite running;
}
#btn_menu.about #square_item_3{
    animation: sparkle5 10s linear 0s infinite running;
}




#btn_menu.contact #square_item_3{
    animation: sparkle1 10s linear 0s infinite running;
}
#btn_menu.contact #square_item_6{
    animation: sparkle2 10s linear 0s infinite running;
}
#btn_menu.contact #square_item_5{
    animation: sparkle3 10s linear 0s infinite running;
}
#btn_menu.contact #square_item_8{
    animation: sparkle4 10s linear 0s infinite running;
}
#btn_menu.contact #square_item_7{
    animation: sparkle5 10s linear 0s infinite running;
}



#btn_menu.portfolio #square_item_1{
    animation: sparkle1 10s linear 0s infinite running;
}
#btn_menu.portfolio #square_item_4{
    animation: sparkle2 10s linear 0s infinite running;
}
#btn_menu.portfolio #square_item_7{
    animation: sparkle3 10s linear 0s infinite running;
}
#btn_menu.portfolio #square_item_8{
    animation: sparkle4 10s linear 0s infinite running;
}
#btn_menu.portfolio #square_item_9{
    animation: sparkle5 10s linear 0s infinite running;
}
#btn_menu.portfolio #square_item_6{
    animation: sparkle6 10s linear 0s infinite running;
}
#btn_menu.portfolio #square_item_3{
    animation: sparkle7 10s linear 0s infinite running;
}







@keyframes sparkle1_1 {
    0%{
        fill:#111;
    }
    10%{
        fill:#FFD802;
    }
    20%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle1_2 {
    0%{
        fill:#111;
    }
    10%{
        fill:#111;
    }
    20%{
        fill:#FFD802;
    }
    30%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle1_3 {
    0%{
        fill:#111;
    }
    20%{
        fill:#111;
    }
    30%{
        fill:#FFD802;
    }
    40%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle1_4 {
    0%{
        fill:#111;
    }
    30%{
        fill:#111;
    }
    40%{
        fill:#FFD802;
    }
    50%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}
@keyframes sparkle1_5 {
    0%{
        fill:#111;
    }
    40%{
        fill:#111;
    }
    50%{
        fill:#FFD802;
    }
    60%{
        fill:#111;
    }
    100%{
        fill:#111;
    }
}

#btn_menu.hire #square_item_3{
    animation: sparkle1_1 10s linear 0s infinite running;
}
#btn_menu.hire #square_item_6{
    animation: sparkle1_2 10s linear 0s infinite running;
}
#btn_menu.hire #square_item_9{
    animation: sparkle1_3 10s linear 0s infinite running;
}
#btn_menu.hire #square_item_8{
    animation: sparkle1_4 10s linear 0s infinite running;
}
#btn_menu.hire #square_item_7{
    animation: sparkle1_5 10s linear 0s infinite running;
}


#btn_menu.menu{
    transform: rotate(90deg);
}
#btn_menu.menu rect{
    fill:#FFD802;
}



#menu a{
    transition: all 1s ease-in-out;
}
#menu .main_link a:hover{
    background: #FFD802;
    padding-left:10px;
    padding-right:10px;
}
#menu a.on{
    color:#FFD802;
    background: #F9F9F9;
}





@keyframes loading {
    0%{
        transform: rotate(0deg);
        opacity: 1;
    }
    25%{
        transform: rotate(90deg) scale(.9);
        opacity: .3;
    }
    50%{
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }
    75%{
        transform: rotate(270deg) scale(.9);
        opacity: .3;
    }
    100%{
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}
#loading svg{
    animation: loading 5s linear 0s infinite running;
}




@keyframes blink {
    0%{
        opacity: 1;
    }
    25%{
        opacity: .3;
    }
    50%{
        opacity: 1;
    }
    75%{
        opacity: .3;
    }
    100%{
        opacity: 1;
    }
}
#contact .section_title.blink{
    animation: blink 3s linear 0s 2;
}