/********** Setting the fonts section ***************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

div.flat-nav, div.flat-nav input, div.flat-nav, textarea{
	font-family : 'Open Sans';
}


/********** Setting the Color section ***************/

div.flat-nav>ul>li:nth-child(even){
	background-color : rgba(0, 0, 0, .1)
}

div.flat-nav>ul>li:nth-child(odd){
	background-color : rgba(0, 0, 0, .05)
}

div.flat-nav>ul>li>ul, div.flat-nav>ul>li>div{
	background-color : #69B796;
}

/********** Normal Style for Navigation & utilities ***************/

div.flat-nav{
	display : table;
	width : 100%;
	padding : 0 20px;
	font-size : 15px;
	box-sizing : border-box;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	background-color: #7EC7AB;

}

div.flat-nav .logo{
	font-family : Open sans;
	float : left;
	color : white;	
	display : block;
	text-align : center;
	font-weight:bold;
}

div.flat-nav .responsive-bar{
	display : none;
	width : 100%;
	cursor : pointer;
	line-height : 50px;
}

div.flat-nav .responsive-bar>span{
	float : left;
	color : #ffffff;
	font-size : 25px;
}

div.flat-nav .responsive-bar>i{
	color : #fff;
	font-size : 25px;
	float : right;
	display : inline-block;
	line-height : 50px;
}

div.flat-nav>ul{
	list-style : none;
	float : right;
	margin : 0;
	padding : 0;
	display : table;
	font-size : 0;
}

div.flat-nav>ul>*{
	font-size : 11px;
}

div.flat-nav>ul>li{
	display : inline-block;
	vertical-align : top;
}

div.flat-nav>ul>li>a{
	height : 85px;
	padding : 0 10px;
	color : white;	
	cursor : pointer;
	min-width : 75px;
	text-align : center;
	display : block;
	font-size : 12px;
	position : relative;
	overflow : hidden;
	text-decoration:none;
}

div.flat-nav>ul>li>a>span{
	padding-top : 5px;
	display : block;
	width : 100%;
	left : 0;
	transition : transform .5s, font-size .5s, padding .5s, margin .5s;
	-webkit-transition : -webkit-transform .5s, font-size .5s, padding .5s, margin .5s;
	-o-transition : transform .5s, font-size .5s, padding .5s, margin .5s;
	text-decoration:none;
}

div.flat-nav>ul>li>a>i{
    color: #fff;
    display: block;
    font-size: 25px;
    opacity: 0.65;
	filter: alpha(opacity=45);
    padding-top: 12px;
	transition : transform .5s, font-size .5s, padding .5s, margin .5s;
	-webkit-transition : -webkit-transform .5s, font-size .5s, padding .5s, margin .5s;
}

div.flat-nav>ul>li:hover>ul{
	display : block;
}

div.flat-nav>ul>li:hover>div{
	display : block;
}

div.flat-nav li>ul{
	position : absolute;
	list-style : none;
	padding : 0;
	display : none;
	color : #ffffff;
	z-index : 1000;
}

div.flat-nav li>ul>li{
	list-style : none;
}

div.flat-nav li>ul>li>a{
	padding : 5px;
	display : block;
	color : #ffffff;
	min-width : 125px;
	padding : 10px 20px;
	cursor : pointer;
	font-size : 12px;
	transition : background-color .3s;
	-webkit-transition : background-color .3s;
}

div.flat-nav li>ul.row-based>li{
	text-align : left;
}

div.flat-nav li>ul.row-based>li>a:hover{
	background-color : rgba(0, 0, 0, .2);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff');
}

div.flat-nav>ul>li>div{
	position : absolute;
	right : 20px;
	display : none;
	z-index: 1000;
}

div.flat-nav form{
	padding : 20px;
}

div.flat-nav form input, div.flat-nav form textarea{
	display : block;
	width : 190px;
	border : 0;
	padding : 5px;
	margin : 10px 0;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	font-size : 13px;
}

div.flat-nav ul.column-based{
	right : 20px;
	font-size : 0;
}

div.flat-nav ul.column-based>*{
	font-size : 12px;
}

div.flat-nav ul.column-based>li{
	display : inline-block;
	min-width : 160px;
	vertical-align : top;
	padding : 5px 0;
	
	transition : background-color .2s;
	-webkit-transition : background-color .2s;
}

.column-based a i{
    color: #000000;
    display: block;
    font-size: 31px;
    opacity: 0.4;
	filter: alpha(opacity=40);
    text-align: center;
}

div.flat-nav ul.column-based span{
    display: block;
    padding: 5px 0;
    text-align: center;
}

div.flat-nav ul.column-based>li>a:hover{
	background-color : #7EC7AB;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff');
}

div.flat-nav ul.column-based>li>a{
	padding : 10px 15px; 
	font-size : 12px;
	-moz-box-sizing : border-box;
	box-sizing : border-box;
	-webkit-box-sizing : border-box;
}


div.flat-nav ul.column-based>li:nth-child(1){
	background-color : rgba(0, 0, 0, .05);
}

div.flat-nav ul.column-based>li:nth-child(2){
	background-color : rgba(0, 0, 0, .1);
}

div.flat-nav ul.column-based>li:nth-child(3){
	background-color : rgba(0, 0, 0, .15);
}

div.flat-nav ul.column-based>li:nth-child(4){
	background-color : rgba(0, 0, 0, .2);
}

div.flat-nav ul.column-based>li:nth-child(5){
	background-color : rgba(0, 0, 0, .25);
}

div.flat-nav ul.column-based>li:nth-child(6){
	background-color : rgba(0, 0, 0, .3);
}

div.flat-nav ul.column-based>li:nth-child(7){
	background-color : rgba(0, 0, 0, .35);
}

div.flat-nav ul.column-based>li:nth-child(8){
	background-color : rgba(0, 0, 0, .4);
}

div.flat-nav ul.column-based>li:nth-child(9){
	background-color : rgba(0, 0, 0, .45);
}

div.flat-nav ul.column-based>li:nth-child(10){
	background-color : rgba(0, 0, 0, .5);
}

div.flat-nav ul.column-based ul{
	display : block;
	position : relative;
}

div.flat-nav ul.column-based img{
	width : 120px;
	border : solid 3px rgba(256, 256, 256, 0.20);
}

div.flat-nav ul.column-based p{
	max-width : 150px;
	color : #ffffff;
	font-size : 12px;
}

div.flat-nav ul.column-based span{
	display : block;
	padding-bottom : 10px;
}

div.flat-nav ul.column-based ul>li{
	padding-left : 5px;
}

div.flat-nav ul.column-based ul>li>a{
	padding : 5px 10px;
	transition : padding-left .3s;
	-webkit-transition : padding-left .3s;
	font-size : 12px;
}

div.flat-nav ul.column-based ul>li>a:hover{
	padding-left : 15px;
}


/********** Transition & EFFECTS section ***************/


div.flat-nav>ul>li.effect1:hover>a>i{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	font-size : 35px;
	padding-top : 25px;
}

div.flat-nav>ul>li.effect1:hover>a>span{
	position : absolute;
	padding-top : 50px;
}

div.flat-nav>ul>li.effect2:hover>a>i{
	padding-top : 5px;
}

div.flat-nav>ul>li.effect2:hover>a>span{
	padding-top : 20px;
}

div.flat-nav>ul>li.effect3:hover>a>i{
	transform : scale(-1, 1);
	-webkit-transform : scale(-1, 1);
}

div.flat-nav>ul>li.effect3:hover>a>span{
	padding-top : 10px;
}

div.flat-nav>ul>li.effect4:hover>a>i{
	padding-top : 45px;
}

div.flat-nav>ul>li.effect4:hover>a>span{
	margin-top : -60px;
	position : absolute;
}

div.flat-nav>ul>li.effect5:hover>a>i{
	margin-left : -20px;

}

div.flat-nav>ul>li.effect5:hover>a>span{
	margin-left : 10px;
	position : absolute;
}


/********** Make it responsive ***************/


@media screen and (max-width:768px) {

	
	div.flat-nav .responsive-bar{
		display : table;
	}

	div.flat-nav>div.logo{
		width: 100%;
		text-align : center;
		display : none;
	}
	
	div.flat-nav>ul{
		width : 100%;
		text-align : center;
		display : none;
	}	
	
	div.flat-nav.show-it>ul{
		display : block;
	}
	
	div.flat-nav>ul>li{
		display : block;
		position : relative;
		width : 80%;
		margin-left : 10%;
	}
	
	div.flat-nav>ul>li>ul, div.flat-nav>ul>li>div{	
		right  : auto;
		left : 0;
		width : 100%;
	}
}

@media screen and (min-width:769px) and (max-width:868px) {

	div.flat-nav>div.logo{
		width: 100%;
		text-align : center;
	}
	
	div.flat-nav>ul{
		width : 100%;
		text-align : center;
	}
	
	div.flat-nav>ul>li>ul.column-based{
		right : auto;
		left : 0;
	}
	
	div.flat-nav>ul.column-based>li{
		text-align : center;
	}
}