/*@charset "utf-8";

 
/* body layout 
body {
	width: 100%;
	height: 90px;
	margin: 0px;
	padding: 0px;
	
}*/

a{outline: 0;}

.menucontainer{width: 1200px; height: 190px; margin-left: auto; margin-right: auto;}

@media only screen and (max-width: 920px) { .menucontainer{width: auto; } }

.background{ width: 100%; height: 190px; background:url('/img/blackbkglogo.jpg') no-repeat; padding-top: 0px; }


#flat_menu .col-1 { float: left; padding: 0; margin-top: 70px;}
#flat_menu .col-3 {	float: left; padding: 0; margin: 0;}
#flat_menu .col-4 {	float: left; padding: 0; margin: 0;}
#flat_menu .col-5 {	float: left; padding: 0; margin: 0;}
#flat_menu .col-6 {	float: left; padding: 0; margin: 0;}
#flat_menu .col-7 {	float: left; padding: 0; margin: 0;}
#flat_menu .col-8 {	float: left; padding: 0; margin: 0;}
#flat_menu .col-9 {	float: left; padding: 0; margin: 0;}
#flat_menu .col-10{ float: left; padding: 0; margin: 0;}
#flat_menu .col-11{ float: left; padding: 0; margin: 0;}
#flat_menu .col-12{	float: left; padding: 0; margin: 0;}



/* Targets all elements 
[class*='col-'] {
	float: left;
	padding: 0;
	margin: 0;
}*/

/* Clearfix
.frame:after {
	content: "";
	display: table;
	clear: both;
} */

/* flexible grid system */

#flat_menu .col-1 { width: 100%; padding: 4px;}
#flat_menu .col-2 { width: 50%;padding: 4px; }
#flat_menu .col-3 { width: 33.33%; padding: 4px;}
#flat_menu .col-4 { width: 25%; padding: 4px;}
#flat_menu .col-5 { width: 20%;padding: 4px; }
#flat_menu .col-6 { width: 16.6666666667%;padding: 4px; }
#flat_menu .col-7 { width: 14.2857142857%;padding: 4px; }
#flat_menu .col-8 { width: 12.5%; padding: 4px;}
#flat_menu .col-9 { width: 11.1111111111%;padding: 4px; }
#flat_menu .col-10 { width: 10%;padding: 4px; }
#flat_menu .col-11 { width: 9.09090909091%;padding: 4px; }
#flat_menu .col-12 { width: 8.33%;padding: 4px; }

/* Removes padding, margin behavior */
#flat_menu ul,
#flat_menu li,
#flat_menu a {

	padding: 0;
	display: block;
	list-style: none;
	text-decoration: none;
}

/* flat menu layout */
#flat_menu {
	height: 10px;
	width: 100%;
	min-width: 240px;
	max-width: 1280px;
	background: transparent;
	position: relative;
	z-index: 999;
	font-family: "Montserrat", sans-serif;	/* google web font */
	font-size: 16px;
	letter-spacing:1.1px;
	-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.30);
	box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.30);
}

/* menu parent unorder list position absolute */
#flat_menu > ul { position: absolute; margin-top: 60px;}

/* menu list items layout */
#flat_menu > ul > li {
	height: 90px;
	
}	

/* menu first list items border none */
#flat_menu > ul > li:first-child{
	border-left:none;
}

/* menu a tag layout */
#flat_menu > ul > li > a {
	color: #FFFFFF;
	font-weight: 700;
	line-height: 49px;
	white-space: nowrap;
	width: 100%;
	height: 150px;
	text-align: center;
	display:inline;


}

/* menu a tag hover effect */
#flat_menu > ul > li:hover > a {
	background: transparent;
	
	transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-webkit-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
}

/* menu a tag before hover effect */
#flat_menu > ul > li:hover > a:before {
	content: "";
	display: block;
	height: 5px;
	width: 100%;
	background: none;
	position: absolute;
	top: 0px;
	transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-webkit-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
}

/* half-width class for smaller submenus container */
#flat_menu .half-width {
	position: absolute;
	left: 0px;
	top: 50px;
	width: 50%;
	padding: 0px !important;
	overflow: hidden;
}

/* full-width class for wide submenus container */
#flat_menu .full-width {
	position: absolute;
	left: 0px;
	top: 50px;
	width: 100%;
	padding: 0px !important;
	overflow: hidden;
}

/* submenu layout */
#flat_menu li > #submenu {
	background: #000000;
	position: absolute;
	margin-top: 0px;
	z-index: 999;
	min-width: 200px;
	visibility: hidden;
	opacity: 0;
	height: 0px;
	overflow: hidden;
	}

/* submenu-music for business layout */
#flat_menu li > #submenu .music {
	background: #000000;
	position: absolute;
	margin-top: 120px;
	z-index: 999;
	min-width: 200px;
	visibility: hidden;
	opacity: 0;
	height: 0px;
	overflow: hidden;
	}



/* submenu list items layout */
#flat_menu #submenu li {
	clear: both;
	width: 100%;
	position: relative;
		color: #00CCFF;
}

/* submenu a tag layout */
#flat_menu #submenu li a {

	font-weight: bold;
	font-size: 14px;
	margin: -11px 21px 12px;
	
	padding-top: 5px;
	padding-bottom: 5px;
	color: #fff;
}

/* submenu a tag + fontawesome direction icon hover effect */
#flat_menu #submenu li:hover > a,
#flat_menu #submenu li:hover > .fa.fa-angle-right {
	color: #ebebeb;
	background-color: rgba(0,0,0,0.01);
}

/* h2 tag layout */
#flat_menu #submenu h2 {
	font-size: large;
	color: #00CCFF;
	font-weight: bold;
	margin: 14px 22px 20px;
	border-bottom: 1px solid rgba(221,226,230,0.50);
	padding-bottom: 8px;
	position: relative
}



/* h3 tag layout */
#flat_menu #submenu h3 {
	padding: 0px;
	margin: 0px;
}



/* float-left + float-right class for float the elements */
#flat_menu .float-left { float: left !important }
#flat_menu .float-right { float: right !important }
#flat_menu #submenu #submenu {
	position: absolute;
	left: 100%;
	top: -19px;
}

/* table layout */
#flat_menu table {

	overflow: hidden;
	margin: 16px 16px 16px 10%;

	position: relative;
	width: 80%;
	overflow:hidden;
}

/* table td, th layout */
#flat_menu table td,th {
	border-bottom: 1px solid #E0E0E0;
	padding: 2.5% 18px 2.5% 2.5%;
	font-size: 14px;
	text-indent: -2px;
	color: #3E3E3E;
}

/* table td hover effect */
#flat_menu table td:hover { background: #f0f0f0 }

/* fontawesome icons layout with in table */
#flat_menu table td i {
	position: relative;
	left: -12px;
	top: 0px;
}

/* a tag layout with in table */
#flat_menu table td a {
	display: inline-block;
	color: #000000;
}


/* submit button layout */
#flat_menu input[type="submit"] {
	margin-top: 27px;
	margin-right: 44px;
	margin-bottom: 31px;
	width: 26%;
	cursor: pointer;
	-webkit-box-shadow: 2px 2px rgba(0,0,0,0.30);
	box-shadow: 2px 2px rgba(0,0,0,0.30);
	font-size: large;
	padding: 7px;
	border:none;
	background: #000000;
	color: #FFFFFF
}

/* submit button hover effect */
#flat_menu input[type="submit"]:hover { background: #1abc9c; }

/* with in table every last td bodder bottom none */
#flat_menu table tr:last-child td { border-bottom: none; }

/* submenu fontawsome arrow icon layout */
#flat_menu #submenu .fa.fa-angle-right {
	position: absolute;
	top: 5px;
	right: 20px;
	color: #34495e;
	cursor: pointer
}

/* image layout */
#flat_menu #submenu img {
	width: 85%;
	position: relative;
	height: auto;
	border: 10px solid #FFFFFF;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.11);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.11);
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 20px;
	margin-bottom: 10px;
	left: 7%;
}

/* badge class layout */
#flat_menu .badge {
	position: absolute;
	color: black;
	right: 30px;
	top: 4px;
	font-size: x-small;
	font-weight: bold;
	padding: 5px;
	border-radius: 100px;
	-webkit-box-shadow: inset 0px 1px 7px rgba(0,0,0,0.27);
	box-shadow: inset 0px 1px 7px rgba(0,0,0,0.27);
}

/* text-box class layout */
#flat_menu #submenu .text-box {
	background-color: rgba(0,0,0,0.03);
	width: 100%;
	height: auto;
	display: block;
	border-radius: 5px;
	padding: 15px;
	font-size: medium;
	color: #343434;
	border: 20px solid rgba(255,255,255,1.00);
	border-bottom-width: 10px;
	border-top: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	top: 3px;
}

/* text-box hover effct */
#flat_menu #submenu .text-box:hover { color: #0B0B0B; }

/* fontawesome arrow icon layout only for h2 */
#flat_menu #submenu h2 .fa.fa-angle-right {
	font-size: x-large;
	position: absolute;
	right: -20px;
	top: -3px;
}

/* fontawesome every main first icon margin left */
#flat_menu #submenu i:first-of-type { margin-left: 22px; }

/* fontawsome facebook icon layout */
#flat_menu #submenu .fa.fa-facebook {
	background: #3b5997;
	color: #FFFFFF;
	padding: 14px 18px;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 10px;
}

/* fontawsome twitter icon layout */
#flat_menu #submenu .fa.fa-twitter {
	background: #00b8f4;
	color: #FFFFFF;
	padding: 14px 13px;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 10px;
	
}

/* fontawsome youtube icon layout */
#flat_menu #submenu .fa.fa-youtube-play {
	background: red;
	padding: 14px 13px;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 10px;
	color: #FFFFFF;
}

/* grid-center extra class which only used for
 grid system represent you can remove it */
#flat_menu .grid-center {
	text-align: center;
	color: #000000;
	padding: 10px 0px;
	position: relative;
	overflow: hidden;
	line-height: 14px;
	height: 42px;
	border: 4px solid #FFFFFF;
	top: 0px;
	background: #F0F0F0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

/* tablet layout */ 

@media (min-width: 900px) {

/* li hover to display submenu */
#flat_menu li:hover > #submenu {
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
	transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-webkit-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
}
}

/* tablet layout */

@media (max-width: 900px) {

/* flexible grid system */
#flat_menu .col-1,
#flat_menu .col-2,
#flat_menu .col-3,
#flat_menu .col-4,
#flat_menu .col-5,
#flat_menu .col-6,
#flat_menu .col-7,
#flat_menu .col-8,
#flat_menu .col-9,
#flat_menu .col-10,
#flat_menu .col-11,
#flat_menu .col-12 {
	width: 100%;
	position: relative
}

#flat-menu{ position: relative; margin-top: -520px;}


/* half class only works on tablet layout,
this class for half the column width */
#flat_menu .half { width: 50% !important }

/* half-third class for divide the column into three sections */
#flat_menu .half-third { width: 33.3333333333% !important }

/* half-fourth class for divide the column into four sections */
#flat_menu .half-fourth { width: 25% !important }


/* menu list items layout test */
#flat_menu > ul > li {
	position: relative;
	background: #000000;
	border-left: none;
	border-bottom: 1px solid #22303E;
	text-align: center;
	height: 100%;
}


/* submenu hover effect */
#flat_menu li:hover > #submenu {
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
	transition: all 0.2s linear 0.2s;
	-moz-transition: all 0.2s linear 0.2s;
	-webkit-transition: all 0.2s linear 0.2s;
	-o-transition: all 0.2s linear 0.2s;
	-ms-transition: all 0.2s linear 0.2s;
}

/* second level submenu layout */
#flat_menu #submenu #submenu {
	position: relative;
	left: 0px;
	top: -2px;
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
	box-shadow: none;
}

/* fontawesome arrow icon layout */
#flat_menu #submenu .fa.fa-angle-right {
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

/* h2 fontawesome arrow icon layout */
#flat_menu #submenu h2 .fa.fa-angle-right { right: 10px; }

/* submenu a tag layout */
#flat_menu #submenu li a {
	width: auto%;
	text-align: center;
	padding-right: 10%;
	text-indent: 2%;
}

/* table layout */
#flat_menu table {
	margin: 16px 16px 16px 7%;
	width: 87%;
}
}

/* mobile layout */

@media (max-width: 480px) {
	
/* flexible grid system */
#flat_menu .col-1,
#flat_menu .col-2,
#flat_menu .col-3,
#flat_menu .col-4,
#flat_menu .col-5,
#flat_menu .col-6,
#flat_menu .col-7,
#flat_menu .col-8,
#flat_menu .col-9,
#flat_menu .col-10,
#flat_menu .col-11,
#flat_menu .col-12 {
	width: 100% !important;
	position: relative
}



/* table layout */
#flat_menu table {
	margin: 16px 16px 16px 7%;
	width: 85%;
}

/* table td, th layout */
#flat_menu table td,th {
	padding: 2%;
}
}