/*
 Responsive Mega Menu v1.4
 
 Changelog
	v1.3
		- Separated responsive elements into their own file.

 Custom styles for use with your Bootstrap powered site
 Developed by Weborithm.
 Follow me on twitter.com/weborithm
 
*/
@media (max-width: 1024px) {
.header {
    height: 85px;
}

.navbar {
    top: 30%;
    width: 100%;
}
}

/* 979px and below */
/*=================*/
@media (max-width: 768px) {

.nav > li { float: left; }
.nav > li > a { padding: 10px 8px;  }
.nav > li > li > a { padding: 0 0 5px; }

.navbar { left: 0%; }
.navbar {
    top: 30%;
    width: 100%;
}
.footer h3 {
      font-size: 1.1em;
}
}




/* 767px and below */
/*=================*/
@media (max-width: 767px) {

.dropdown .pull-right {
  float: none !important;
}

.header { height: 85px; }

/* Links */
.navbar-inverse .dropdown-menu li.nav-title { color: #bbb; border-bottom: 1px solid #ccc; }
.navbar-inverse .dropdown-menu li > a,.navbar-inverse .dropdown-submenu > a { color: #ddd; }
.navbar-inverse .dropdown-menu li.nav-title span.nav-title-description { color: #bbb; }

.navbar-collapse p { color: #ddd; }

.navbar-toggle { /*margin: 4px 10px 4px 0*/; padding: 6px 6px; }

.navbar-nav {    
background: none repeat scroll 0 0 #2ab0d5; /*#309bdd*/
margin: 0 3%;

	}
.nav > li { padding: 4px 0; width: 100%; }

.navbar-nav .open .dropdown-menu > li > a{ padding: 3px 0; }

.navbar-inverse .navbar-collapse .nav > li > a:hover, .navbar-inverse .navbar-collapse .dropdown-menu a:hover { color: #fff; background: none; }

.navbar-collapse .nav-title, .navbar-collapse .nav .nav-header { color: #ccc; border-bottom: 1px solid #555; }

.navbar-collapse .btn-primary, .navbar-collapse .btn-warning, .navbar-collapse .btn-success, .navbar-collapse .btn-info, .navbar-collapse .btn-danger, .navbar-collapse .btn-inverse { color: #fff !important; }

/* 2 Menus */
.navbar-collapse .mega-menu-2 { width: 100%; }
.navbar-collapse .mega-menu-2 ul { list-style: none; margin: 0; float: none; width: auto; }

/* 3 Menus */
.navbar-collapse .mega-menu-3 { width: 100%; }
.navbar-collapse .mega-menu-3 ul.dropdown-menu, .navbar-collapse .mega-menu-3 ul { list-style: none; margin: 0; float: none; width: 100%; }

/* 4 Menus */
.navbar-collapse .mega-menu-4 { width: 100%; }
.navbar-collapse .mega-menu-4 ul { list-style: none; margin: 0; float: none; width: 100%; }

/* 5 Menus */
.navbar-collapse .mega-menu-5 { width: 100%; }
.navbar-collapse .mega-menu-5 ul { list-style: none; margin: 0; float: none; width: 100%; }

/* 6 Menus */
.navbar-collapse .mega-menu-6 { width: 100%; margin: 0; }
.navbar-collapse .mega-menu-6 ul { list-style: none; margin: 0; float: none; width: auto; }
.navbar-collapse .mega-menu-6 ul ul { width: auto; }

.navbar-collapse .mega-menu-2 .one-column { width: 48.3%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-3 .one-column { width: 31.6%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-4 .one-column { width: 23.3%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-5 .one-column { width: 18.3%; margin: 0 10px 0 0;}
.navbar-collapse .mega-menu-6 .one-column { width: 14.98%; margin: 0 10px 0 0; }

.navbar-collapse .mega-menu-2 .two-column { width: 99%; margin: 0; }
.navbar-collapse .mega-menu-3 .two-column { width: 64.5%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-4 .two-column { width: 48.1%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-5 .two-column { width: 38%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-6 .two-column { width: 31.1%; margin: 0 10px 0 0; }

.navbar-collapse .mega-menu-3 .three-column { width: 99%; margin: 0; }
.navbar-collapse .mega-menu-4 .three-column { width: 73.3%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-5 .three-column { width: 58.3%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-6 .three-column { width: 47%; margin: 0 10px 0 0; }

.navbar-collapse .mega-menu-4 .four-column { width: 99%; margin: 0; }
.navbar-collapse .mega-menu-5 .four-column { width: 77%; }
.navbar-collapse .mega-menu-6 .four-column { width: 63%; }

.navbar-collapse .mega-menu-5 .five-column { width: 99%; margin: 0; }

.navbar-collapse .mega-menu-6 .five-column { width: 80%; margin-right: 10px; }

.navbar-collapse .mega-menu-6 .six-column { width: 99%; margin: 0; }

.navbar-collapse .nav > li > a,
.navbar-collapse .dropdown-menu a,
.navbar-collapse .nav .dropdown-toggle { padding: 5px 8px; }

.navbar-default .nav > li > a {
    color: #f7fafb;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
}

.navbar .dropdown-menu a.btn:hover,
.navbar .dropdown-menu a.btn:focus,
.navbar .dropdown-menu a.btn:active,
.navbar .dropdown-menu a.btn.active,
.navbar .dropdown-menu a.btn.disabled,
.navbar .dropdown-menu a.btn[disabled] { padding-left: 0; }

/* With Products */
.mega-menu-3 .add-products li { width: 30.4%; }
.mega-menu-4 .add-products li { width: 22.5%; }
.mega-menu-5 .add-products li { width: 17.5%; }
.mega-menu-6 .add-products li { width: 30.4%; }

/* sub menu */
.navbar-toggle {
    margin-top: -28px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #e7e7e7;
    color: #edf3f8;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #C8E6FF;
}
.navbar-nav .open .dropdown-menu > li > a {
    padding: 5px 22px;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	color:#9FD8F2;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color:#9FD8F2;
}
.dropdown.open a.dropdown-toggle .caret {
    border-top: 6px solid #9FD8F2;
}

.container-fluid {
    margin-top: 22px;
}
}


/* Between 640px and 480px below */
/*===============================*/

@media (min-width: 480px) and (max-width: 640px) {

.navbar-inverse .navbar-collapse .nav > li > a:hover, .navbar-inverse .navbar-collapse .dropdown-menu a:hover { color: #fff; background: none; }

.navbar-collapse .navbar-form,
.navbar-collapse .navbar-search { float: left; padding: 0; }

li.dropdown { margin-top: 0;     border-bottom: 1px solid #94bbcc; }

.navbar-collapse .nav-title, .navbar-collapse .nav .nav-header { color: #ccc; border-bottom: 1px solid #555; }

.navbar-collapse .btn-primary, .navbar-collapse .btn-warning, .navbar-collapse .btn-success, .navbar-collapse .btn-info, .navbar-collapse .btn-danger { color: #fff !important; }

/* 2 Menus */
.navbar-collapse .mega-menu-2 { width: 100%; }
.navbar-collapse .mega-menu-2 ul { list-style: none; margin: 0; float: left; width: 100%; }

/* 3 Menus */
.navbar-collapse .mega-menu-3 { width: 100%; }
.navbar-collapse .mega-menu-3 ul.dropdown-menu, .navbar-collapse .mega-menu-3 ul { list-style: none; margin: 0; float: none; width: 100%; }

/* 4 Menus */
.navbar-collapse .mega-menu-4 { min-width: 100%; }
.navbar-collapse .mega-menu-4 ul { list-style: none; margin: 0; float: left; width: 100%; }

/* 5 Menus */
.navbar-collapse .mega-menu-5 { min-width: 100%; }
.navbar-collapse .mega-menu-5 ul { list-style: none; margin: 0; float: left; width: 100%; }

/* 6 Menus */
.navbar-collapse .mega-menu-6 { min-width: 100%; margin: 0; }
.navbar-collapse .mega-menu-6 ul { list-style: none; margin: 0; float: none; width: auto; }
.navbar-collapse .mega-menu-6 ul ul { width: auto; }

.navbar-collapse .mega-menu-2 .one-column { width: 47.4%; margin-right: 10px; }
.navbar-collapse .mega-menu-3 .one-column { width: 30.6%; margin-right: 10px; }
.navbar-collapse .mega-menu-4 .one-column { width: 22.4%; margin-right: 10px; }
.navbar-collapse .mega-menu-5 .one-column { width: 17.4%; margin-right: 10px; }
.navbar-collapse .mega-menu-6 .one-column { width: 14.1%; margin-right: 10px; }

.navbar-collapse .mega-menu-2 .two-column { width: 98%; margin: 0; }
.navbar-collapse .mega-menu-3 .two-column { width: 64.3%; margin-right: 10px; }
.navbar-collapse .mega-menu-4 .two-column { width: 47.4%; margin-right: 10px; }
.navbar-collapse .mega-menu-5 .two-column { width: 37.3%; margin-right: 10px; }
.navbar-collapse .mega-menu-6 .two-column { width: 30.8%; margin-right: 10px; }

.navbar-collapse .mega-menu-3 .three-column { width: 99%; margin: 0px; }
.navbar-collapse .mega-menu-4 .three-column { width: 72.5%; margin-right: 10px; }
.navbar-collapse .mega-menu-5 .three-column { width: 57.5%; margin-right: 10px; }
.navbar-collapse .mega-menu-6 .three-column { width: 47.4%; margin-right: 10px; }

.navbar-collapse .mega-menu-4 .four-column { width: 99%; margin: 0; }
.navbar-collapse .mega-menu-5 .four-column { width: 77.5%; margin-right: 0px; }
.navbar-collapse .mega-menu-6 .four-column { width: 64%; margin: 0 10px 0 0; }

.navbar-collapse .mega-menu-5 .five-column { width: 99%; margin: 0; }

.navbar-collapse .mega-menu-6 .five-column { width: 80%; margin: 0; }

.navbar-collapse .mega-menu-6 .six-column { width: 99%; margin: 0; }

.navbar-collapse .nav > li > a,
.navbar-collapse .dropdown-menu a,
.navbar-collapse .nav .dropdown-toggle { padding: 4px 8px; }

/* Wide Menu */
.navbar-collapse .mega-menu-2 ul.mega-wide,
.navbar-collapse .mega-menu-3 ul.mega-wide,
.navbar-collapse .mega-menu-4 ul.mega-wide,
.navbar-collapse .mega-menu-5 ul.mega-wide,
.navbar-collapse .mega-menu-6 ul.mega-wide { width: 100%; margin: 0; }

/* With Gallery */
.navbar-collapse .mega-menu-2 li.with-gallery li { display: inline-block; margin: 0 5px; width: 47%; }
.navbar-collapse .mega-menu-3 li.with-gallery li { display: inline-block; margin: 0 5px; width: 30%; }
.navbar-collapse .mega-menu-4 li.with-gallery li { display: inline-block; margin: 0 5px; width: 47%; }
.navbar-collapse .mega-menu-5 li.with-gallery li { display: inline-block; margin: 0 5px; width: 17%; }
.navbar-collapse .mega-menu-6 li.with-gallery li { display: inline-block; margin: 0 5px; width: 47%; }
.navbar-collapse li.with-gallery li.full-width { display: block; margin: 0; width: auto; }

.navbar-collapse .mega-menu-2 li.with-gallery li img,
.navbar-collapse .mega-menu-4 li.with-gallery li img,
.navbar-collapse .mega-menu-5 li.with-gallery li img,
.navbar-collapse .mega-menu-6 li.with-gallery li img { margin-bottom: 0; }

}

/* 479px and below */
@media (max-width: 480px) {

.navbar-nav {    
background: none repeat scroll 0 0 #2ab0d5; /*#309bdd*/
margin: 0 1%;

	}	

.navbar-collapse .mega-menu-2 .one-column, 
.navbar-collapse .mega-menu-3 .one-column,
.navbar-collapse .mega-menu-4 .one-column,
.navbar-collapse .mega-menu-5 .one-column,
.navbar-collapse .mega-menu-6 .one-column,
.navbar-collapse .mega-menu-2 .two-column, 
.navbar-collapse .mega-menu-3 .two-column,
.navbar-collapse .mega-menu-4 .two-column,
.navbar-collapse .mega-menu-5 .two-column,
.navbar-collapse .mega-menu-6 .two-column,
.navbar-collapse .mega-menu-3 .three-column,
.navbar-collapse .mega-menu-4 .three-column,
.navbar-collapse .mega-menu-5 .three-column,
.navbar-collapse .mega-menu-6 .three-column,
.navbar-collapse .mega-menu-4 .four-column,
.navbar-collapse .mega-menu-5 .four-column,
.navbar-collapse .mega-menu-6 .four-column,
.navbar-collapse .mega-menu-5 .five-column,
.navbar-collapse .mega-menu-6 .five-column { width: 46%; margin: 0 10px 0 0; }
.navbar-collapse .mega-menu-6 .six-column { width: 100%; margin: 0; }


.navbar-collapse .mega-menu-2 .with-gallery,
.navbar-collapse .mega-menu-3 .with-gallery,
.navbar-collapse .mega-menu-4 .with-gallery,
.navbar-collapse .mega-menu-5 .with-gallery,
.navbar-collapse .mega-menu-6 .with-gallery { width: auto; margin: 0; }

/* With Gallery */
.navbar-collapse .mega-menu-2 li.with-gallery li { display: inline-block; margin: 0 5px; width: 45.7%; }
.navbar-collapse .mega-menu-3 li.with-gallery li { display: inline-block; margin: 0 5px; width: 28.9%; }
.navbar-collapse .mega-menu-4 li.with-gallery li { display: inline-block; margin: 0 5px; width: 45.7%; }
.navbar-collapse .mega-menu-5 li.with-gallery li { display: inline-block; margin: 0 5px; width: 45.7%; }
.navbar-collapse .mega-menu-6 li.with-gallery li { display: inline-block; margin: 0 5px; width: 45.7%; }
.navbar-collapse li.with-gallery li.full-width { display: block; margin: 0; width: auto; }

.navbar-collapse .mega-menu-4 li.with-gallery li img,
.navbar-collapse .mega-menu-5 li.with-gallery li img,
.navbar-collapse .mega-menu-6 li.with-gallery li img { margin-bottom: 0; }

}

/* 319px and below */
@media (max-width: 320px) {
	
.navbar-nav {    
background: none repeat scroll 0 0 #2ab0d5; /*#309bdd*/
margin: 0 1%;

	}
.navbar-collapse .mega-menu-2 .one-column, 
.navbar-collapse .mega-menu-3 .one-column,
.navbar-collapse .mega-menu-4 .one-column,
.navbar-collapse .mega-menu-5 .one-column,
.navbar-collapse .mega-menu-6 .one-column,
.navbar-collapse .mega-menu-2 .two-column, 
.navbar-collapse .mega-menu-3 .two-column,
.navbar-collapse .mega-menu-4 .two-column,
.navbar-collapse .mega-menu-5 .two-column,
.navbar-collapse .mega-menu-6 .two-column,
.navbar-collapse .mega-menu-3 .three-column,
.navbar-collapse .mega-menu-4 .three-column,
.navbar-collapse .mega-menu-5 .three-column,
.navbar-collapse .mega-menu-6 .three-column,
.navbar-collapse .mega-menu-4 .four-column,
.navbar-collapse .mega-menu-5 .four-column,
.navbar-collapse .mega-menu-6 .four-column,
.navbar-collapse .mega-menu-5 .five-column,
.navbar-collapse .mega-menu-6 .five-column,
.navbar-collapse .mega-menu-6 .six-column { width: 100%; margin-right: 10px; }

.navbar-collapse .mega-menu-2 .with-gallery,
.navbar-collapse .mega-menu-3 .with-gallery,
.navbar-collapse .mega-menu-4 .with-gallery,
.navbar-collapse .mega-menu-5 .with-gallery,
.navbar-collapse .mega-menu-6 .with-gallery { width: auto; margin: 0; }

.navbar-collapse .mega-menu-2 li.with-gallery li,
.navbar-collapse .mega-menu-3 li.with-gallery li,
.navbar-collapse .mega-menu-4 li.with-gallery li,
.navbar-collapse .mega-menu-5 li.with-gallery li,
.navbar-collapse .mega-menu-6 li.with-gallery li { margin: 0; width: auto; }

.navbar-collapse .mega-menu-2 li.with-gallery li img,
.navbar-collapse .mega-menu-3 li.with-gallery li img,
.navbar-collapse .mega-menu-4 li.with-gallery li img,
.navbar-collapse .mega-menu-5 li.with-gallery li img,
.navbar-collapse .mega-menu-6 li.with-gallery li img { margin-bottom: 0; }

}



/************* to be added or changed ***********************/

#highlight_head {
    border-bottom: 1px solid #12b9ff;
    height: 40px;
    margin: 0;
   /* width: 100%;*/
}

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

.header  {
  background:url(../images/sport-services-header.jpg) -5px 0 no-repeat;
  background-size:cover;
  height: 80px;
  width: 100%;
}

}

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

.header  {
  background:url(../images/sport-services-header.jpg) -15px 0 no-repeat;
  background-size:cover;
  height: 55px;
  width: 100%;
}

}