/*
    Template Name    : Join
	Description		 : Responsive HTML5 Corporate one page Template.
    Version          : 1.0
*/

/*
================================================
/* Table of Content
==================================================

1. Fonts - Oswald and Opensans
2. Common CSS
3. Loader CSS
4. Scrool top Arrow
5. header-top-area
6. Navigation
7. Slider Area
8. Brand Promotion
9. Our Services
10. About Us Wrapper
11. Blog Wrapper
12. Our Team Wrapper
13. Our Team Wrapper
14. Portfolio Wrapper
15. Contact Us Wrapper
16. Footer
17. Media Quries   

/*
================================================
2. Common CSS
================================================
*/
body {
	overflow-x: hidden;
}
/*

/*
================================================
5. header-top-area
================================================
*/

.header-top-area {
  background: #f3f3f5;
  left: 0;
  top: 0;
  transition: all 0.4s ease 0s;
  width: 100%;
  z-index: 9999;
}
.logo {
    height: 100%;
    margin: 0;
    padding: 23px 0 13px;
}
.logo a {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  text-transform: uppercase;
  z-index: 9999;
}
.contact-button {
  font-size:16px;
  color:#787878;
  font-family: 'Arimo', sans-serif;
  font-weight:700;
  padding:0 0 0 5px;
  margin:0 0 5px;
}
.contact-button i {
  font-size:20px;
  padding:0 5px 0 0;
}
/*** Top Info ***/
.top-info-block::before {
  background: #ffffff none repeat scroll 0 0;
  border-left: 6px solid #2383cb;
  border-bottom: 4px solid #2383cb;
  content: "";
  height: 100%;
  left: -35px;
  position: absolute;
  top: 0;
  transform: skewX(45deg);
  width: 80px;
  z-index: 999;
}
.top-info-block {
	padding: 10px 0;
	position: relative;
}
.top-info-block:after {
  content: "";
  border-bottom: 4px solid #2383cb;
  box-shadow: 0 4px 4px -5px #333;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 2000px;
  z-index: 999;
  background:#fff;
}
.top-info-block ul {
	list-style: outside none none;
	margin: 0;
	padding: 0;
}
.top-info-block ul li:first-child {
   margin:0;
}
.top-info-block ul li {
  border-right: 1px solid #c6c6c6;
  display: inline-block;
  margin: 0 0 0 30px;
  padding: 0 30px 0 0;
  position: relative;
  z-index: 9999;
}
.top-info-block li i {
	color: #2383cb;
	font-size: 30px;
	height: 50px;
	left: 0;
	line-height: 50px;
	margin-top: -25px;
	position: absolute;
	text-align: center;
	top: 40%;
	width: 50px;
}
.top-info-block p {
	color: #787878;
	font-size: 12px;
	font-weight: 600;
	margin-right: 10px;
	padding-left: 50px;
	text-align: left;
	margin-bottom: 0;
	line-height:16px;
}
.top-info-block li:last-child {
	border: medium none;
}
.top-info-block p span {
	color: #787878;
	display: block;
	font-size: 12px;
	font-weight: 500;
}
/*
================================================
6. Navigation
================================================
*/
.menu-bg {
	z-index: 999;
}
.nav-bar {
	width: 100%;
	float: left;
}
.nav-bar.fadeInDown {
	animation-name: none !important;
}
.navbar-default {
	background-color: inherit;
	border-color: inherit;
}
.navbar {
	border-radius: 0;
	min-height: auto;
	margin: 0;
	border: none;
	z-index: 9;
}
.navbar h2 {
	display: none;
}
.navbar-collapse {
	float: left;
	margin: 0;
	padding: 0;
}
.navbar-brand {
	padding: 0;
	height: auto;
}
.navbar-nav > li:first-child {
	padding-left: 0;
}
.navbar-nav > li {
	padding: 0 0 0 40px;
}
.navbar-default .navbar-nav li.active a:hover:after {
	display: none;
}
.navbar-default .navbar-nav li a:after {
	border-bottom: 2px solid #00305b;
	bottom: 0;
	content: "";
	left: 50%;
	position: absolute;
	transform: translateX(-50%) scale(0);
	transition: all 0.4s ease-in-out 0s;
	width: 100%;
}
.navbar-default .navbar-nav li a {
	color: #333;
	font-weight: 600;
	padding: 0 0 4px;
	margin: 21px 0 16px;
	transition: all 0.3s ease 0s;
	text-transform: uppercase;
	background-color: inherit;
}
.navbar-default .navbar-nav li a:hover:after, .navbar-default .navbar-nav > .active > a:hover:after {
	border-bottom: 2px solid #2383cb;
	transform: translateX(-50%) scale(1);
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	color: #2383cb;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #2383cb;
    background: none !important; 
}
.menu-bg .navbar-default .navbar-nav li a {
	transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	background-color: inherit;
	color: #2383cb;
	border-bottom: 2px solid #2383cb;
}

/*** Bottom Info ***/
.bottom-info-block{
	border:none;
  	height: 20px;
 	width: 100%;
	height: 50px;
	margin-top: 0;
	border-bottom: 1px solid #2383cb;
	box-shadow: 0 10px 10px -10px #333;
  	margin: -50px auto 10px; 
  	margin-bottom: -5px;
}

/*** Horizontal Info ***/
.horizontal-info-block{
	border-left: 4.5px solid #2383cb;
	margin-left: -8px;
	padding-left: 20px;
}

/*
================================================
17. Media Quries 
================================================
*/
@media (min-width: 1500px) {
/*** header top area ***/
.header-top-area::before {
	width: 35%;
}
}
@media (min-width: 992px) and (max-width: 1024px) {
/*** header top area ***/
.header-top-area::before {
	width: 28%;
}
.navbar-nav > li {
  padding: 0 0 0 25px;
}
.top-info-block ul li {
  margin: 0 0 0 10px;
  padding: 0 10px 0 0;
}
/*** Our Team Wrapper ***/
.our-team-img .textbox h5 {
	padding-top: 50px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
/*** Common styles ***/
#scrool-top {
	right: 15px;
}
/*** Header Top Area ***/
.contact-button {
  padding: 0 0 10px 5px;
  text-align: center;
}
.top-info-block:before {
  display:none;
}
.nav-fixed {
  padding:0;
}
/*** header top area ***/
.header-top-area::before {
	display: none;
}
.header-top-area .container {
	width:100%;
}
/*** navigation ***/
.navigation {
	padding: 0;
}
.navbar-default .contact-button {
	padding: 22px 25px;
}
.logo:after {
	display: none;
}
.logo {
	float: none;
	text-align: center;
}
.top-info-block ul {
	text-align: center;
}
.top-info-block {
	padding: 25px 0;
}
.menu-bg .logo {
	padding-top: 29px;
}
.navbar-toggle {
	margin-right: 0;
	margin-top: -34px;
}
.navbar-default .navbar-nav li a {
	font-size: 15px;
	padding: 23px 18px;
}
.navbar-collapse {
	margin: 6px 0 0;
}
.navigation .navbar-collapse {
	padding: 0;
}
.navbar {
	margin-top: 0px;
}
.menu-bg .navbar-default .navbar-nav li a {
	margin: 17px 0;
}
.navbar-default .navbar-nav li a {
	padding: 0;
	margin: 17px 0 19px;
}
.navbar-nav > li {
	padding: 0 0 0 32px;
}
.about-us {
	padding-left: 50px;
	padding-right: 50px;
}
/*** Banner Wrapper ***/
.hero h1 {
  font-size: 35px;
}
/*** Callouts ***/
.brand-icon {
   float:none;
   margin:0 0 20px;
}
/*** About Us ***/
.about-us-main {
	padding-left: 50px;
	padding-right: 50px;
}
/*** Our Team Wrapper ***/
.our-team-img .textbox h5 {
	padding-top: 120px;
}
/*** Contact Wrapper ***/
.contact-wrapper {
    padding: 69px 0 65px;
}
.contact-form .btn-hero {
	margin:0 0 30px;
}
}
@media (max-width: 767px) {
/*** Common styles ***/	
section h2 {
	font-size: 25px;
}
a.slide-btn {
	font-size: 14px;
	padding: 8px 16px;
	width: 120px;
}
#scrool-top {
	right: 15px;
}
/*** header top area ***/
.header-top-area::before {
	display: none;
}
/*** navigation ***/
.navigation {
	padding: 0;
}
.bg-logo {
	background: #00305b;
	width: 100%;
	padding: 0;
}
.logo:after {
	display: none;
}
.logo {
	float: none;
	text-align: center;
}
.top-info-block ul {
	text-align: center;
}
.top-info-block ul li:first-child {
	margin: 0;
}
.top-info-block ul li {
	margin: 0 0 20px;
	border: none;
}
.navbar-default .navbar-toggle .icon-bar {
	background: #f8f8f8
}
.menu-bg .navbar-toggle .icon-bar {
	background: #fff
}
.menu-bg .navbar-toggle {
	background: #02306a;
	margin-top: 2px;
}
.nav-bar {
	padding: 10px 10px 5px 0;
}
.navbar-toggle {
	margin-right: 0;
	margin-top: 0;
	border: none;
	background: #00305b;
}
.menu-bg .navbar-collapse, .navbar-collapse {
	background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background: #00305b;
}
.navbar-default .navbar-nav li a, .menu-bg .navbar-default .navbar-nav li a {
	padding: 11px 15px;
	color: #eee;
	margin: 0;
}
.menu-bg .logo {
	padding: 10px 0;
}
header .navbar-nav {
	margin: 7.5px 0;
}
.navbar {
	margin: 0;
}
.navbar-brand {
	display: block;
	padding: 0;
	height: auto;
}
.navbar-default .navbar-collapse {
	float: none;
	border: none;
	box-shadow: none;
}
.navbar-nav > li {
	padding: 0;
}
.navbar-default .navbar-nav li a::after, .navbar-default .navbar-nav li a:hover::after, .navbar-default .navbar-nav > .active > a:hover::after {
	border: none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	border: none;
	color: #2383cb !important;
}
.navbar-header > h2 {
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
	display: block;
	font-size:25px;
}
.navbar-default .contact-button {
	float: left;
}
/*** banner ***/
.welcome-control {
	display: none;
}
.single-slide-item h2 {
	font-size: 24px;
	line-height: 26px;
}
.hero {
  top:45%;
}
.hero h1 {
  font-size: 16px;
}
.fade-carousel {
  height: 300px;
}
.fade-carousel .carousel-inner .item {
  height: 300px;
}
.fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2, .fade-carousel .slides .slide-3 {
	height:300px;
}
/*** Brand Promotion ***/
.callouts-inner {
  margin-bottom: 25px;
  top: -115px;
}
/*** Testimonials Wrapper ***/
.testimonials-wrapper {
   padding: 69px 0 60px;
}
.single-testimonial {
  padding: 30px 20px;
}
.testimonials-wrapper .owl-theme .owl-nav {
	display:none !important;
}
.testimonials-wrapper .owl-theme .owl-dots {
	display:block !important;
}
.testimonials-wrapper .owl-theme .owl-dots .owl-dot.active span,
.testimonials-wrapper .owl-theme .owl-dots .owl-dot:hover span  {
	background:#2383cb;
}
.testimonial-item .client-info {
	position: relative;
	text-align: center;
}
/*** Portfolio Wrapper ***/
.portfolio-filter li:first-child {
	margin: 0 5px;
}
.portfolio-filter li::before {
	left: 5px;
}
.portfolio-filter li {
	margin: 8px 5px 0;
	padding: 0 0 0 20px;
}
/*** Contact Wrapper ***/
.contact-wrapper {
  padding: 69px 0 70px;
}
.contact-form .btn-hero {
	margin: 0 0 30px;
}
}