/* HEADER */

.header{display: block; background: #000; background-size: cover; position: relative;}
.header .inner{display: flex; flex-wrap: wrap;}
.header .logo{width: 240px; padding: 10px 0; display:flex; flex-direction:row;}
.header .navigation{width: calc(100% - 420px);}
.jcb-logo, .jcb-logo-mobile{width:180px;}
.jcb-logo-mobile{display:none;}

#breadcrumbs{padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: #ccc; border-top: 5px #FEC52E solid; border-bottom: 5px #f5f5f5 solid;}
#breadcrumbs span{display: block; width: 100%; max-width: 1200px; margin: 0 auto;}
#breadcrumbs span span{display: inline-block; width: auto; margin: 0;}
#breadcrumbs a{padding: 0 7px; font-weight: 700; color: #000;} #breadcrumbs a:hover{color: #777;}
#breadcrumbs .breadcrumb_last{padding: 0 7px; font-weight: 700; color: #777;}

/* NAVIGATION */

#cssmenu{display: block; position: relative; font-size: 0; text-align: right; z-index: 999;}
#cssmenu ul li{display: inline-block; position: relative; list-style-type: none; margin:0;}
#cssmenu ul li a{display: block; padding: 45px 15px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; text-decoration: none;}
#cssmenu ul li a:hover{background: #333;}
#cssmenu ul ul{display: none;}
#cssmenu #menu-button{display: none;}

.sub-hover{background: #333 !important;}

/* SUBNAV */

.sub-dropdown{display: none; position: absolute; background: #fff; width: 100%; padding: 30px 0; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); z-index: 9999;}

.sub-dropdown ul{display: flex; flex-wrap: wrap; }
.sub-dropdown ul li{width: calc(20% - 4px); text-align: center; border: 1px #ddd solid; margin: 2px; list-style-type: none;}

.sub-dropdown ul li a{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 150px; padding: 25px 15px 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 18px; color: #555; border-bottom: 7px transparent solid;}
.sub-dropdown ul li a:hover{background: #fafafa; border-bottom: 7px #FEC52E solid;}
.sub-dropdown ul li a .fa{width: 100%; font-size: 48px; color: #999;}
.sub-dropdown ul li a span{width: 100%;}

.sub-dropdown .column4 p.subnav-bold{margin-bottom: 10px; font-size: 24px; font-weight: 700; text-transform: uppercase;}
.sub-dropdown .column4 p{font-size: 14px; line-height: 22px;}
.sub-dropdown .column4 .btn{background: #FEC52E; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 0; padding: 10px 24px;}

/*similar nav dropdown layout for landing page*/
.specialty ul{display: flex; flex-wrap: wrap;}
.specialty ul li{width: calc(25% - 4px); text-align: center; border: 1px #ddd solid; margin: 2px; list-style-type: none;}

.specialty ul li a{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 150px; padding: 25px 15px 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 18px; color: #555; border-bottom: 7px transparent solid;}
.specialty ul li a:hover{background: #fafafa; border-bottom: 7px #FEC52E solid;}
.specialty ul li a .fa{width: 100%; font-size: 48px; color: #999;}
.specialty ul li a span{width: 100%;}

.specialty .column4 p.subnav-bold{margin-bottom: 10px; font-size: 24px; font-weight: 700; text-transform: uppercase;}
.specialty .column4 p{font-size: 14px; line-height: 22px;}
.specialty .column4 .btn{background: #FEC52E; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 0; padding: 10px 24px;}

@media only screen and (max-width: 1365px){
	#cssmenu ul li a{padding: 45px 10px; font-size: 14px;}
}

@media only screen and (max-width: 1220px){
	#breadcrumbs, #hero-slider{border-top: none;}
	.jcb-logo{display:none;}
	.jcb-logo-mobile{display:block; padding-left:10px!important;}
	.header .inner{padding: 0;}
	.header .logo{width: 100%; max-width:246px; padding: 15px 20px; text-align: center;}
	.header .logo img{max-height: 75px; margin: 0 auto;}
	.header .navigation{width: 100%;}
	.sub-dropdown{display: none !important;}
	.sub-hover{background: #333 !important;}

	#cssmenu ul li a.yellow-btn{background:#fec52e!important;}
	#cssmenu ul{display: none; text-align: left;}
	#cssmenu ul li{display: block; border-top: 1px #555 solid;}
	#cssmenu ul li a{background: #333; font-size: 12px; padding: 15px 20px; color: #fff!important;}
	#cssmenu ul li a:hover{background: #444;}
	#cssmenu ul li a:after{display: none;}
	#cssmenu ul ul{display: none; position: relative; left: 0;}
	#cssmenu ul ul li{border-top: 1px #777 solid;}
	#cssmenu ul ul li a{background: #555; width: 100%; padding: 15px 20px;}
	#cssmenu ul ul li a:hover{background: #666;}
	#cssmenu #menu-button{display: block; background: #FEC52E; padding: 15px 20px; font-size: 14px; font-weight: 700; text-align: center; text-transform: uppercase; color: #000; cursor: pointer;}
	#cssmenu #menu-button:after{position: absolute; top: 16px; right: 20px; font-family: FontAwesome; font-size: 16px; content: '\f0c9';}
	#cssmenu #menu-button.menu-opened:after{content: '\f00d';}
	#cssmenu .submenu-button{position: absolute; display: block; height: 44px; width: 100%; cursor: pointer;}
	#cssmenu .submenu-button:after{position: absolute; top: 17px; right: 20px; font-family: FontAwesome; font-size: 12px; content: '\f067'; color: #fff;}
	#cssmenu .submenu-button.submenu-opened:after{content: '\f068';}
}