div.navigation{
position: fixed;
left: 3%;
top: 2%;
width: ;
height:60px;
background-color: #000;
text-align:center;
z-index:999;
opacity:1;


/*animation: navanim 2s;
-moz-animation: navanim 2s; /* Firefox */
/*-webkit-animation: navanim 2s; /* Safari and Chrome */
/*-o-animation: navanim 2s; /* Opera */

}
div.navbox{
position:absolute;
width:100px;
height:50px;
background-color: transparent;
color: #eee;
 -webkit-transition-property: color, background;
 -webkit-transition-duration: 0.5s, 0.5s;
 -webkit-transition-timing-function: linear, ease-in;

 -moz-transition-property: color, background;
 -moz-transition-duration: 0.5s, 0.5s;
 -moz-transition-timing-function: linear, ease-in;

 -o-transition-property: color, background;
 -o-transition-duration: 0.5s, 0.5s;
 -o-transition-timing-function: linear, ease-in;
}
div.navbox:hover{
cursor: pointer;
background-color:transparent;
color:orange;

}
div.navbox:active{
cursor: pointer;
background-color:#transparent;
color:#fff;

}
div.navboxbelow{
position:absolute;
top:46px;
width:100px;
height:4px;
background-color:#222;
}
.navbox:hover > #project{background-color:red;}
.navbox:hover > #research{background-color:green;}
div.navbox:hover > #photo{background-color:yellow;}
div.navbox:hover > #music{background-color:orange;}
div.navbox:hover > #extra{background-color:teal;}
div.navbox:hover > #nb6{background-color:orange;}


div.sop{
position:absolute;
color:#fff;
font-size:16px;
top:69%;
width:99%;
height:30px;
text-align:center;
animation: sopanim 5s;
-moz-animation: sopanim 5s; /* Firefox */
-webkit-animation: sopanim 5s; /* Safari and Chrome */
-o-animation: sopanim 5s; /* Opera */

}

.debbani{
color:orange;
text-shadow: 1px 1px 2px yellow, 2px 2px 3px red;
animation: sopanim 5s;
-moz-animation: sopanim 5s; /* Firefox */
-webkit-animation: sopanim 5s; /* Safari and Chrome */
-o-animation: sopanim 5s; /* Opera */

}

/*animaiton for navbar*/

@keyframes navanim
{
from {top: 0%;}
to {top:2%;}
}
@-moz-keyframes navanim /* Firefox */
{
from {top: 0%;}
to {top:2%;}
-webkit-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
   -moz-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
    -ms-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
     -o-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
        transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650); /* custom */

}

@-webkit-keyframes navanim /* Safari and Chrome */
{
from {top: 0%;}
to {top:2%;}
}

@-o-keyframes navanim /* Opera */
{
from {top: 0%;}
to {top:2%;}
} 


/*sop animation*/

@keyframes sopanim
{
from {opacity:0;}
to {opacity:1;}
}
@-moz-keyframes sopanim /* Firefox */
{
from {opacity:0;}
to {opacity:1;}
-webkit-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
   -moz-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
    -ms-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
     -o-transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650);
        transition-timing-function: cubic-bezier(0.305, 0.015, 0.410, 1.650); /* custom */

}

@-webkit-keyframes sopanim /* Safari and Chrome */
{
from {opacity:0;}
to {opacity:1;}
}

@-o-keyframes sopanim /* Opera */
{
from {opacity:0;}
to {opacity:1;}
}