.navigationMather {
    width:100%;
    background-color:black;
}
div.navigation{
	font-family :΢ÈíÑźÚ;
	
    /*background-image:url(../images/bgtop.gif);*/
    
	/*background-repeat:repeat-x;*/
	/*padding-top : 5px;
	padding-bottom : 0px;
	padding-left:30px;*/
	width:900px;
    margin:0px auto;
	height:75px;
    color:white;
    line-height:30px;

}
/* ====== Navigation Menu ====== */
div.navigation>ul{
	margin : 0px;
	margin-top : 12px;
}

div.navigation>ul>li{
	list-style : none;
	display :inline;
	float:left;
	height : 30px;
	width : 90px;
	/*background-image:url(../images/bgbuttom.gif);*/
	/*background-repeat:repeat-x;*/
    background-color:black;
	text-align : center;
	line-height : 30px;
	margin : 2px;
	border:1px solid white;
}

div.navigation ul li a{
	cursor : pointer;
}

div.navigation>ul>li>a{
	position : relative;
	display : block;
	color:white;
    font-weight:900;
	font-size : 14px;
	text-decoration:none;
}

/* ====== Back Button ====== */
div#back{
	position : relative;
	float : right;
	display : none;
	height : 50px;
	width : 50px;
	background-image : url('../images/back.png');
	margin-right : 40px;
	top : -15px;
}

/* ====== Sub menu====== */

div.navigation>ul>li>ul{
	position : absolute;
	padding : 0;
	margin-top : 3px;
	display : none;
}

div.navigation>ul>li>ul>li{
	position : relative;
	float : left;
	display : block;
	height : 50px;
	line-height : 50px;
	list-style : none;
	margin-right : 3px;
}

div.navigation>ul>li>ul>li>a{
	position : relative;
	display : block;
	font-size : 14px;
	height : 100%;
	width : 100%;
	color : black;
	text-decoration : none;
}

/* ====== Color class ======*/
.color6
{
    background-color : red;
    
}

/* ====== title span ====== */

div.navigation span{
	position : relative;
	font-family : 'Open Sans';
	font-weight : 900;
	margin-left : 40px;
	font-size : 20px;
	color :white;
    top:10px;
}


/* ======== Fliping ======== */

.animated{
	-webkit-animation-duration:0.4s;
	-moz-animation-duration:0.4s;
	-o-animation-duration:0.4s;
	animation-duration:0.4s;

	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both
}

.flipIn_right{
	-webkit-animation-name: flipIn_right;
	-moz-animation-name: flipIn_right;
	-o-animation-name: flipIn_right;
	animation-name: flipIn_right;
}

.flipIn_left{
	-webkit-animation-name:flipIn_left;
	-moz-animation-name:flipIn_left;
	-o-animation-name:flipIn_left;
	animation-name:flipIn_left;
}

.flipIn_top{
	-webkit-animation-name:flipIn_top;
	-moz-animation-name:flipIn_top;
	-o-animation-name:flipIn_top;
	animation-name:flipIn_top;
}

.flipIn_bottom{
	-webkit-animation-name:flipIn_bottom;
	-moz-animation-name:flipIn_bottom;
	-o-animation-name:flipIn_bottom;
	animation-name:flipIn_bottom;
}

.flipIn_right_back{
	-webkit-animation-name:flipIn_right_back;
	-moz-animation-name:flipIn_right_back;
	-o-animation-name:flipIn_right_back;
	animation-name:flipIn_right_back;
}
.do{
	transform: scale(0.98, 0.98);
	-webkit-transform: scale(0.98, 0.98); /* Safari and Chrome */
}