/*=============================Google Fonts====================*/
/* cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*==================================End Google Fonts=============================================*/

/*==================================NAB Specific Styles==========================================*/

/*----header color-----*/
header.account, header.platform{
	background:#f89829;
}

header.account nav>div>.item>a, 
header.account nav>div.logo>.item h1>a,
body.product_bundles header.account a.product-bundles,
body.courses header.account a.courses,
body.accounts-show header.account .item h1 a.home, 
header.account nav>div>.item.cart a span.filled, 
header.account nav>div>.item>button:focus,
header.account nav>div>.item>button:hover,
header.account nav>div>.item.cart a:hover span.filled, 
header.platform nav>div>.item.cart a:hover span.filled {
	color: #ffffff;
}

header.account nav>div.logo>.item h1>a:hover,
header.account nav>div>.item>a.courses:hover,
header.account nav>div>.item>a:hover,
header.account nav>div>.item>button:hover,
header.account nav>div>.item>button.courses:hover,
header.account nav>div>.item>button.product-bundles:hover,
header.account nav>div>.item>a.product-bundles:hover,
header.account nav>div>.item>a#events-drop:hover, 
header.account nav>div>.item>a:focus,
header.account nav>div>.item>a.courses:focus,
header.account nav>div>.item>a.product-bundles:focus,
header.account nav>div>.item>button.courses:focus,
header.account nav>div>.item>button.product-bundles:focus,
header.account nav>div>.item>button:focus,
header.account nav>div>.item>a:active,
header.account nav>div>.item>a.product-bundles:active,
header.account nav>div>.item>a.courses:active,
header.account nav>div>.item>button:active,
header.account nav>div>.item>button:active,
header.account nav>div>.item>button.courses:active,
header.account nav>div>.item>button.product-bundles:active,
header.account nav>div.logo>.item h1>a:active,
/*adds borderline on selected nav item when that page is active*/
body.courses header.account a.courses, 
body.product_bundles header.account a.product-bundles,
body.accounts-edit header.account a.settings,
body.searches header.account a.searches,
body.accounts-show header.account .item h1 a.home,
body.carts header.account div.cart,
body.users-show header.account div.avatar-wrapper,
body.events header.account a#events-drop,
body.courses-webinars header.account a.courses,
body.courses-surveys header.account a.courses,
body.certificates header.account a.courses {
	box-shadow: inset 0 -2px 0 0 #fff;
	color: #ffffff;
}

/* makes svg icons in header white */
header.account nav>div>.item>a i.icon path,
nav .icon path,
header.account nav>div>.item>a:active i.icon path,
header.account nav>div>.item>button i.icon path,
header.account nav>div>.item>button:active i.icon path,
header.account nav>div>.item>button:hover i.icon path,
header.account nav>div>.item>button:focus i.icon path {
	fill: #fff !important;
}

/* TEMPORARILY REMOVE PRODUCT BUNDLES PAGE */
a.product-bundles{
  display: none !important;
}

/* change NAB to Home in the home button */

a.home{
	margin-right:.6em;
	color: #f89829 !important;
	width: 100%;
}

/*adds word offerings in its place and positions it inline with other menu items*/
a.home:after{
	content:'Home';
	visibility: visible;
	position: absolute;
	left: 27px;
	top: 14.4px;
	color: #fff !important;
}

/* nav .icon:before{
	color:#fff !important;
} */

/*--Hide events--*/
/* hide events in nav */
a#events-drop.dropdown-toggle{
  display: none;
}

a.events.ui-sortable{
  display: none;
}

/*hide events caret and dropdown*/
#events-drop > .caret{
	display: none;
}

#events-drop ~ .dropdown-menu{
	display: none;
}

/*hide live events on events page*/
.webinars.live-events{
	display: none;
}

#live-events-content > header{
	display: none;
}

/*on-demand events tab*/
#on-demand-events-tab{
	display: none;
}

/*search page filters*/
div.bottom-wrapper > div.search-filters > ul > li:nth-child(2),
div.bottom-wrapper > div.search-filters > ul > li:nth-child(4){
	display: none;
}

/*my activity page*/
#events_activity{
	display: none;
}

/*---Change "Courses" to "Offerings"---*/
/*top nav*/
/*hides original text*/
/*have to use !important tag on color to force hidden visibility. Using visibiity hidden loose the border underline on hover and select. Have to taget links and not wrapping divs due to lack of classes/ids at div level.*/
/*width 100% forces underline to be the size of div*/
a.courses{
	margin-right:.6em;
	color: #f89829 !important;
	width: 100%;
}

/*adds word offerings in its place and positions it inline with other menu items*/
a.courses:after{
	content:'Offerings';
	visibility: visible;
	position: absolute;
	left: 27px;
	top: 14.4px;
	color: #fff !important;
}

/*footer color changes and visibility*/
footer.account > div > ul.navigation > li > a.courses{
	visibility: hidden;
}

footer.account > div > ul.navigation > li > a.courses:after{
	color: #666666 !important;
}

/*homepage header*/
.icon-course ~ span{
	visibility: hidden;
}

.icon-course ~ span:after{
	content: 'Featured Offerings';
	visibility: visible;
	position: relative;
	left: -68px;
}

/*Courses/offerings page, and product bundles page*/
/* Section commeneted out as offerings header removed along with other headers on main landing page */
/* body.courses #main-container-header > hgroup > h2 > span{
	visibility: hidden;
}

body.courses #main-container-header > hgroup > h2 > span:after{
	content: 'Explore Offerings';
	visibility: visible;
	position: relative;
	left: -28px;
}

body.courses #main-container-header > hgroup > h2 > span:after{
	position: absolute;
	left: 68px;
} */

/*Removes course header on search results page*/
.result.course > hgroup > span{
	visibility: hidden;
}

.result.course > hgroup > span:after{
	content: 'Offering';
	visibility: visible;
	position: relative;
	left: -54px;
}

/*couses to offerings for breadcrumbs on webcast live, archive, surveys and certificate pages*/
body.courses-webinars  div.bread-crumbs > ol > li:nth-child(1) > a,
body.certificates  div.bread-crumbs > ol > li:nth-child(1) > a,
body.courses-video_presentations  div.bread-crumbs > ol > li:nth-child(1) > a,
body.courses-surveys  div.bread-crumbs > ol > li:nth-child(1) > a{
	visibility: hidden;
}

body.courses-webinars  div.bread-crumbs > ol > li:nth-child(1) > a:after,
body.certificates div.bread-crumbs > ol > li:nth-child(1) > a:after,
body.courses-video_presentations  div.bread-crumbs > ol > li:nth-child(1) > a:after,
body.courses-surveys  div.bread-crumbs > ol > li:nth-child(1) > a:after{
	content: 'Offerings';
	visibility: visible;
	position: relative;
	left: -59px;
	margin-right: -52px;
}

/*courses to offerings on my activity page*/
#courses_activity{
	visibility: hidden;
	margin-right: -60px; 
}

#courses_activity:after{
	content: "Offerings";
	visibility: visible;
	position: relative;
	left:-62px;
}

section.course > div.bread-crumbs ol li a{
	visibility: hidden;
}

section.course > div.bread-crumbs ol li a:after{
	content:"Offerings";
	visibility: visible;
	margin-left: -50px;
}

/*postions "Offerings" correctly in footer*/
footer > div.wrapper.pull-left > ul > li > a.courses:after{
	position: unset;
	margin-left: -70px;
}

/*adds hover to new pseudo text and adds underline to active page. So hacky, but there aren't unique classes on the div only on the hidden pseduo element*/
header.account nav>div>.item:hover,
body.courses {
	box-shadow: inset 0 -2px 0 0 #fff;
}

/*makes icon visible*/
i.icon-course{
	visibility: visible;
}
/*end top nav*/

/*--Responsive columns--*/
.columns-4{
	width:24%;
	display: inline-block;
	padding: .7em;
}

.columns-5{
	width: 19%;
	display:inline-block;
	padding: .7em;
}

/* hide headers on landing pages */
/* home page header */
header#main-container-header.with-banner{
  display: none;
}

/*=========================Sign up and forgot password pages==========================================*/

/*hides on offerings page*/
a[href="/nab/courses/9062"],
a[href="/nab/courses/9063"],
article[data-id="9062"],
article[data-id="9063"],
/*hides "offerings" breadcrumbs on sign up and forgot password pages*/
section[data-id="9062"] > .bread-crumbs,
section[data-id="9063"] > .bread-crumbs{
	display: none !important;
}

/*===========================================Mobile Styles===========================================*/

/*----removes hover on search item when dropdown displays */
@media screen and (min-width: 1088px){
		header.account nav>div>.item.global-searching:hover{
		box-shadow: none;
	}
}

/*---remove underline border box-shadow, replace colors on background, icons, text and hovers----*/
@media screen and (max-width: 843px){
	header.account nav>div.flexible>.item>a {
		border-radius: 0px;
	}

	header.account nav>div.logo>.item h1>a:hover,
	header.account nav>div>.item>button:active,
	header.account nav>div>.item>button:focus,
	header.account nav>div>.item>button:hover,
	body.courses header.account a.courses, 
	body.product_bundles header.account a.product-bundles,
	body.accounts-edit header.account a.settings,
	body.searches header.account a.searches,
	body.accounts-show header.account .item h1 a.home,
	body.carts header.account div.cart,
	body.users-show header.account div.avatar-wrapper,
	body.events header.account a#events-drop {
		box-shadow: none;
		transition: all 0.1s linear;
	}

	header.account nav>div>.item>a i.icon:before{
		background: #f89829;
		color: #fff;
		transition: all 0.1s linear;
	}

	body.events header.account a#events-drop,
	body.courses header.account a.courses, 
	body.product_bundles header.account a.product-bundles,
	body.accounts-edit header.account a.settings,
	body.searches header.account a.searches,
	body.carts header.account div.cart,
	body.users-show header.account div.avatar-wrapper,
	header.account nav>div>.item>a:hover i.icon:before, 
	header.account nav>div>.item>a:focus i.icon:before, 
	header.account nav>div>.item>a:active i.icon:before,
	body.events header.account a#events-drop i.icon:before,
	body.courses header.account a.courses i.icon:before,
	body.accounts-show header.account a.accounts-show i.icon:before,
	body.accounts-edit header.account a.settings i.icon:before,
	body.product_bundles header.account a.product-bundles i.icon:before,
	body.searches header.account a.searches i.icon:before,
	body.users-show header.account div.avatar-wrapper i.icon:before,
	body.users-show header.account span.profile-text,
	body.carts header.account div.cart i.icon:before,
	body.carts header.account span.cart-text,
	header.account nav>div>.item.cart a:hover span.filled,
	body.carts header.account nav>div>.item.cart a span.filled,
	header.account nav>div>.item>a#events-drop:hover{
		background: #fff;
		color: #f89829;
		transition: all 0.1s linear;
	}

	header.account nav>div.flexible>.item>a:hover,
	header.account nav>div>.item>a:hover i.icon path {
		background: #fff;
		color: #f89829;
		fill: #f89829;
		transition: all 0.1s linear;
	}
	
	header.account nav.open div.pull-left.logo, 
	header.platform nav.open div.pull-left.logo {
		border-bottom: none;
	}

/*----Hacky "Offerings" menu----*/
	/*this removes the hover and active page underline for offerings on mobile*/
	header.account nav>div>.item:hover{
		box-shadow: none;
	}
	/*poisitions menu item correctly*/
	a.courses:after{
		top: inherit;
	}
	/*below fixes the hover color and active item color*/
	body.courses header.account a.courses,
	a.courses:hover{
		color: #ffffff !important;
	}

	body.courses header.account a.courses:after,
	a.courses:hover:after{
		color: #f89829 !important;
	}

	/*header.account nav.open div.item:hover,*/
	header.account nav>div>.item:hover>a i.icon:before {
		background: #fff;
		color: #f89829;
		transition: all 0.1s linear;
	}

	header.account nav.open div.item:hover > a.courses:after{
		color: #f89829;
		transition: all 0.1s linear;
	}
}

@media screen and (max-width: 768px) {
	/*Responsive columns*/
	.columns-4,
	.columns-5{
		width: 48%;
	}
	/*positions footer "Offerings" correctly on smaller screens*/
	footer > div.wrapper.pull-left > ul > li > a.courses:after{
		left: 113px;
	}
}

@media screen and (max-width: 480px) {
	.columns-4,
	.columns-5 {
		width: 100%;
	}

	footer > div.wrapper.pull-left > ul > li > a.courses:after{
		top:24px;
	}
}
/*==================================END NAB Specific Styles=======================================