@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

@font-face {
/*   font-family: "Panton"; 
  src: url("Panton-Trial-Regular.ttf");  */
  	font-family: "PantonW05-Regular";
    src: url("PantonW05-Regular.woff2") format("woff2"), url("Panton/PantonW05-Regular.woff") format("woff"); 
  font-weight: normal;
  font-style: normal;
}

body, label, .callout, .friends .list-container.tile-view .view-item .friend-name {
    font-family: Roboto-Regular,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.575;
    letter-spacing: .02em;
    box-sizing: border-box;
    color: #585858;
}

.signupImage {
	display: none;
}

.tree-view.progress-tree-view.nowrap {
	font-size: 18px;
}

.progress-tree-view.nowrap li span {
    margin-left: 5px;
    top: 8px;
}


.required {
    color: #585858 !important;
}
#login-section .lblLoginHeader {
    display: block;
    padding-bottom: 5px;
	font-family: 'PantonW05-Regular';
		src:url("Panton/PantonW05-Regular.woff2") format("woff2"),url("Panton/PantonW05-Regular.woff") format("woff");		
		font-style: normal;
		font-weight: 400;
		font-size: 20px;
		line-height: 52px;
		color: #2F2F2F;
		position: relative;
		top: -30px;
		left: 5px;
}

h1, .page-title, h2, h3, h4, h5, h6, #page-admin-home .adminmenu > li > a p {
	font-family: "PantonW05-Regular";
    /* src: url("PantonW05-Regular.woff2");  */
	/* url("Panton/PantonW05-Regular.woff") format("woff");	 */
}


h1 {
	font-size: 40px;
}

h2 {
	/*font-size: 33px;*/
	padding-bottom :25px;
}
.custom-top-nav {
    height: 100px;
    width: 90%;
    margin: 64px auto;
}

.content-top.with-custom-top-nav {
    margin-top: calc(100px + 60px);
}

.with-custom-top-nav #top-bar {
    height: calc(100px + 76px);
}

.reports h2 {
    color: #2F2F2F;
}

.profile-tooltip .section1 span {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	display: flex;
	align-items: center;
	letter-spacing: 0.02em;
	color: #2F2F2F;
}

.profile-tooltip .profile-points {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.02em;
	color: #0045FF;
}

.tile-side-a {
    display: flex;
    align-content: flex-end;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
}

.tile-side-a .h2-like {
	font-family: 'PantonW05-Regular';
    src:url("Panton/PantonW05-Regular.woff2") format("woff2"),url("Panton/PantonW05-Regular.woff") format("woff");		
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 30px;
	/* identical to box height, or 136% */
	display: flex;
	align-items: center;
	text-align: center;
	color: #2F2F2F;
	justify-content: center;
	margin-top: 10px;
}

.list-view .h2-like {
	font-family: 'PantonW05-Regular';
    src:url("Panton/PantonW05-Regular.woff2") format("woff2"),url("Panton/PantonW05-Regular.woff") format("woff");		
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #2F2F2F;
    justify-content: flex-start;
    margin-top: 10px;
    flex-direction: row;
}
.course-left-column {
    margin-right: 92px;
    flex-basis: 160px;
    min-width: 160px;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
}
.join-community {
	font-family: 'PantonW05-Regular';
    src:url("Panton/PantonW05-Regular.woff2") format("woff2"),url("Panton/PantonW05-Regular.woff") format("woff");		
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 26px;
	/* identical to box height, or 108% */
	text-align: center;
	letter-spacing: 0.02em;
	margin-bottom: 20px;
	color: #2F2F2F;
}

.join-community span {
    top: unset;
}

.flip-tile {
    letter-spacing: 0.04em;
    position: absolute;
    bottom: 25%;
    left: unset;
}

.category-count {
    color: #fff;
    background: #0045FF;
	opacity: unset;
}

.catalog .list-container.tile-view .view-item .item-title, .my-training .list-container.tile-view .view-item .item-title {
    max-height: 120px !important;
}

#course-catalog {
	padding-right: 0.9375rem;
    padding-left: 0.9375rem;
}

#cphContentMain_cphContentMain_mainContent {
    background-color: #fff;
    margin-left: 12px;
	margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
}

.catalog div.main-catalog-box, .my-training div.main-catalog-box {
    /* width: 100%; */
}

#cphContentMain_plContent {
	background: transparent;  

}
	
.content.grey-background {
    background-color: transparent;
}

.catalog .main-catalog-box .tile-view div:first-of-type.view-item, .my-training .main-catalog-box .tile-view div:first-of-type.view-item {
    border-right: unset;
}

.my-training .main-catalog-box .tile-view div:first-of-type.view-item, .catalog .main-catalog-box .tile-view .view-item, .my-training .main-catalog-box .tile-view .view-item  {
    border-right: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.list-container.tile-view .view-item.next-to-last-item {
    border-bottom: unset;
}
.list-container {
    margin-bottom: 5px;
}
.tile-side-a .row {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#main-communities-page, #page-forum-categories, #page-members, #page-community-events, 
#page-community-articles, .documents-page, #page-community, #page-dashboard, #page-reports,
#page-LeaderBoards {
    color: #1B1F24;
    background: #fff;
    border-radius: 4px;
    margin-left: 10px;
	padding: 10px;
}

#main-communities-page .bordered-row {
    position: relative;
    margin-right: unset;
    margin-left: unset;
}

a, a.link-secondary, a.selected, a:hover, table.data-table a, table.data-table a:hover, .link-button,
.link-button:hover {
	color: #0045FF;
}

.outline {
	 background-color: #EBEBEB; 
	
}

.catalog .main-catalog-box, .my-training .main-catalog-box {
    height: auto;
    overflow: visible;
}
.policy{
	margin-left: 12px;
	margin-right: 12px;
}

/*
.catalog .list-container.list-view .view-item, .my-training .list-container.list-view .view-item {
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

dl.inline {
	font-size: .9em;
    float: left;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.catalog .list-container.list-view .view-item .launch-button-left, .my-training .list-container.list-view .view-item .launch-button-left {
    width: unset;
    float: unset;
}

.catalog .list-container.list-view .view-item .item-title, .my-training .list-container.list-view .view-item .item-title {
    margin-bottom: 12px;
    float: left;
    margin-top: 120px;
	width: 300px;
}

.catalog .list-container.list-view .tile-side-a, .my-training .list-container.list-view .tile-side-a {
    float: left;
    margin-left: -280px;
	margin-top: -50px;
    margin-bottom: 30px;
}

.catalog .list-container.list-view .tile-side-b, .my-training .list-container.list-view .tile-side-b {
    float: right;
    margin-left: 150px;
	width: 30%;
}
*/

.catalog .catalog-welcome-img img, .my-training .catalog-welcome-img img {
    margin-top: -10px; 
}

.catalog .tiles-width, .my-training .tiles-width {
   width: 100%;
}

.flex-right-panel {
    min-width: 358px;
    flex-basis: 358px;
    margin-left: 15px;
    margin-right: 14px;
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}


#top-bar, #footer {
    background-color: #FFFFFF;
    color: #2F2F2F;
	padding-left: 0px;
}

#footer a {
	color: #0045ff !important;
}

.my-sticky {
    background-color: transparent;
}

#login #head select {
    background-color: #F4F6F8;
    border-radius: 4px;
	padding: 10px;
	font-size: 16px;
    line-height: 20px;
}

.profile-tooltip {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

/****** Reports ******/

.yui-navset div.yui-content {
	background-color: #fff;
}



/****** Admin Panel ******/

#page-admin-home .text-right {
	border: 1px solid #0045FF;
    width: 250px;
    margin-left: auto;
    margin-right: 30px;
    border-radius: 4px;
	color: #0045FF;
}

#page-admin-home .text-right:hover {
	border: 1px solid #668FFF;;
    width: 250px;
    margin-left: auto;
    margin-right: 30px;
    border-radius: 4px;
	color: #668FFF;
}

.slide-expand-all {
	background: transparent;
	color: #0045FF;
}

#page-admin-home .adminmenu > li > a {
	color: #2F2F2F;
}

#page-admin-home .adminmenu i[class^="fi-"] {
    font-size: 1.2em;
    line-height: 1.5;
}

#page-admin-home .submenu {
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

#page-admin-home .adminmenu > li:nth-child(6n+1), #page-admin-home .adminmenu > li:nth-child(6n+2), #page-admin-home .adminmenu > li:nth-child(6n+3) {
    background-color: transparent;
}

#page-admin-home .adminmenu > li:nth-child(6n+1), 
#page-admin-home .adminmenu > li:nth-child(6n+2), 
#page-admin-home .adminmenu > li:nth-child(6n+3) {
	background-color: #FFF;
	border: 1px solid #2f2f2f;
}

#page-admin-home .adminmenu > li:nth-child(6n+4), 
#page-admin-home .adminmenu > li:nth-child(6n+5), 
#page-admin-home .adminmenu > li:nth-child(6n+6) {
	background-color: #FFF;
	border: 1px solid #2f2f2f;
}

#page-admin-home .adminmenu a {
    color: #2F2F2F;
}

#page-admin-home .adminmenu a:hover {
    color: #0045FF;
}

#page-admin-home .adminmenu a {
    box-shadow: unset;
}


/****** Navigation ******/


.top-navigation--desktop {
   /*  display: block;  */
   /* margin-top: 15px; */
}

.loginNav a {
    color: #0045ff;
	margin-left: 30px;
}

.navigation .main-menu {
	bottom: unset;
	margin-left: 10px;
	color: #0045ff;
}

.main-navigation a {
    font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	display: flex;
	align-items: center;
	letter-spacing: 0.02em;
	color: #2F2F2F;
	border-bottom: 0.5px solid #BABABA;
	border-radius: unset;
	padding-top: 20px !important;
	padding-bottom: 30px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.main-navigation .icon-chevron--down::before, .main-navigation .icon-chevron--up::before {
	margin-left: unset;
}

#plMainMenu {
    padding-left: 20px;
    padding-right: 20px;
}

.main-navigation a.highlighted, .main-navigation a:hover {
    color: #0045FF;
	background: transparent;
	border-radius: unset;
}

.main-navigation .submenu {
    border-radius: unset;
    margin-left: 0px;
}



/****** Buttons *******/

.btnJoinCommunity {
	border: 1px solid #0045FF;
	box-sizing: border-box;
	border-radius: 4px;
	color: #0045FF !important;
	background: transparent;
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
	margin: 0px 8px;
}
	.btnJoinCommunity:hover {
		color: #FFF !important;
		background-color: #4D7DFF;
	}
	
	.btnJoinCommunity:focused {
		background: #0045FF;
		border: 3px solid #001689;
		box-sizing: border-box;
	}
	
	.btnJoinCommunity:disabled {
		background: #CCDAFF;
	}


.mobile-button.mobile-alert {
    color: #0045FF !important;
    background: transparent !important;
    border: 1px solid #0045FF;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    padding: 0.6em 1em;
    display: inline-block;
}
.button.alert {
    color: #0045FF !important;
    background: transparent !important;
    border: 1px solid #0045FF;
}
	
	.button.alert:hover {
		color:  #668FFF !important;
		background: transparent !important;
		border: 1px solid #668FFF;
	}
	
	.button.alert:focus, .button.alert[visited] {
		background: #0045FF !important;
		border: 3px solid #001689 !important;
		box-sizing: border-box !important;
	}
	
	.button.alert[disabled] {
		background: #CCDAFF !important;
	}
	
	.small-3 {
    width: 20%;
}

.button, .view-item .progress-button, #cphHeader_ucUserModal_lnkLogout{
/*	background-color: transparent;
    color: #fff !important;
		background: #0045FF;
*/
	color: #fff !important;
	background: #0045FF;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 26px;
	border-radius: 4px;
	letter-spacing: 0.02em;
	padding: 0.6em 1em;
}

	.button:hover {
		color: #FFF !important;
		background-color: #4D7DFF !important;
	}
	
	.button:focus, .button[visited] {
		background: #0045FF !important;
		border: 3px solid #001689 !important;
		box-sizing: border-box !important;
	}
	
	.button[disabled] {
		background: #CCDAFF !important;
	}

.btnLogin {
	background-color: transparent;
    color: #fff !important;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	background: #0045FF;
	border-radius: 4px;
	text-transform: capitalize;
}

.button.textbox-height {
	line-height: unset;
}

.button.small {
    font-size: 14px;
    line-height: 35px;
}

.modal-cancel {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 18px;
     background-color: #0045FF !important; 
    vertical-align: text-bottom;
    color: #fff;
}

/****** Controls ******/

input[type="checkbox"]+label:before {
	border-color: #2F2F2F;
}

.chkRemember input[type="checkbox"]+label {
    color: #585858;
}

.row:not(.expanded) .row {
    max-width: none;
    padding-bottom: 10px;
}


input[type=text].txtSearch, input[type=text].txtSearch.x  {
    background: #F5F5F5 url(/foundation/images/search.png) no-repeat right 15px center !important;
	    border-radius: 0;
}

.search-options {
    background: transparent !important;
}

input[type=text].txtSearch:hover, input[type=text].txtSearch:focus, input[type=text].txtSearch.x:hover, input[type=text].txtSearch.x:focus {
    background: #FFF url(/foundation/images/search.png) no-repeat right 15px center !important;
	    border-radius: 0;
}



select {
	/* margin: unset; */
}

.paging-section .columns, .filterbyabc  {
	height: 50px;
	line-height: 50px;
}

.row .paging-section {
	border-bottom: 0.5px solid #BABABA;
	border-top:  0.5px solid #BABABA;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 24px;
	width: 100%;
	height: 72px;
	display: flex;
    flex-direction: row;
    align-items: center;
}

.floating-label label {
	font-family: Roboto-Regular,sans-serif;
	font-size: 16px;
	font-weight: 400;
	left: 16px;
}

.dropDownFilter, select, 
input[type=text], input[type=password], textarea {
    font-family: Roboto-Regular,sans-serif;
    font-size: 16px;
    font-weight: 400;
    background-color: #f5f5f5 !important;
    border-color: transparent transparent rgba(0,0,0,.15) !important;
    border-style: solid !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
    color: #585858 !important;
    min-height: 40px;
    padding: 11px 15px;
    transition: background-color .5s,border-color .5s !important;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
	line-height: 1.42857143;
}

.dropDownFilter:hover, select:hover, 
.dropDownFilter:focus, select:focus,
input[type=text]:hover, input[type=password]:hover, textarea:hover
input[type=text]:focus, input[type=password]:focus, textarea:focus {
	background-color: #fff !important;
	border-color: transparent transparent rgba(0,0,0,.15) !important;
    border-style: solid !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
    color: #585858 !important;
    box-shadow: unset !important;
}



.display-selector > .display-selector__item, .display-selector > .display-selector__item:first-child, .display-selector > .display-selector__item:last-child {
    background-color: #f5f5f5 !important;
    border-color: transparent transparent rgba(0,0,0,.15) !important;
    border-style: solid !important;
    border-width: 1px !important;
    color: #585858 !important;
    transition: background-color .5s,border-color .5s !important;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
	padding: 11px;
}

.display-selector > .display-selector__item:hover, .display-selector > .display-selector__item.active {
	background-color: #fff !important;
	border-color: transparent transparent rgba(0,0,0,.15) !important;
    border-style: solid !important;
    border-width: 1px !important;
    color: #585858 !important;
    box-shadow: unset !important;
	border-radius: 0px !important;
}


.row .paging-section .large-10 {
	width: 100%;
}	

#cphContentMain_cphContentMain_plWelcome {
	background-color: #fff;
	border-radius: 4px;
}

.catalog .main-catalog-box, .my-training .main-catalog-box {
	-webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
	background-color: unset;
	border-radius: unset;
}

.paging {
	float: right;
	margin-top: 15px;
}

.view-item .progress-button.in-progress:after {
    letter-spacing: unset;
}


/*** ICONS ***/

.icon-print {
    background-image: url(/foundation/images/BlueActive/General/printer@2x.png);
}

.display-selector >  .display-list {
    background: url(/foundation/images/Black/General/list_view.png) no-repeat;
}
	.display-selector > .display-selector__item.active > .display-list, .display-selector > .display-selector__item:hover > .display-list {
		background: url(/foundation/images/BlueActive/General/list_view.png) no-repeat;
		background-color: transparent !important;
	}
	
.display-selector >  .display-tile {
    background: url(/foundation/images/Black/General/tile_view.png) no-repeat;
}
	.display-selector > .display-selector__item.active > .display-tile,  .display-selector > .display-selector__item:hover > .display-tile  {
		background: url(/foundation/images/BlueActive/General/tile_view.png) no-repeat;
		background-color: transparent !important;
	}
	
	.display-selector > .display-selector__item:hover {
		background-color: transparent;
	}

.icon-profile {
    background-image: url(/foundation/images/Black/Sections/user@2x.png);
}

	.highlighted .icon-profile {
		background-image: url(/foundation/images/BlueActive/Sections/user@2x.png);
	}

	a:hover .icon-profile {
		background-image: url(/foundation/images/BlueActive/Sections/user@2x.png);
	}

.icon-catalog {
    background-image: url(/foundation/images/Black/Sections/catalog@2x.png);
}

	.highlighted .icon-catalog {
		background-image: url(/foundation/images/BlueActive/Sections/catalog@2x.png);
	}

	a:hover .icon-catalog {
		background-image: url(/foundation/images/BlueActive/Sections/catalog@2x.png);
	}

.icon-training {
    background-image: url(/foundation/images/Black/Sections/my_training@2x.png);
}

	.highlighted .icon-training {
		background-image: url(/foundation/images/BlueActive/Sections/my_training@2x.png);
	}

	a:hover .icon-training {
		background-image: url(/foundation/images/BlueActive/Sections/my_training@2x.png);
	}


.icon-report {
    background-image: url(/foundation/images/Black/General/document@2x.png);
}

	.highlighted .icon-report {
		background-image: url(/foundation/images/BlueActive/General/document@2x.png);
	}

	a:hover .icon-report {
		background-image: url(/foundation/images/BlueActive/General/document@2x.png);
	}

.icon-user {
    background-image: url(/foundation/images/Black/Sections/user@2x.png);
}

	.highlighted .icon-user {
		background-image: url(/foundation/images/BlueActive/Sections/user@2x.png);
	}
	
	a:hover .icon-user {
		background-image: url(/foundation/images/BlueActive/Sections/user@2x.png);
	}
	
.icon-calendar-dates {
    background-image: url(/foundation/images/Black/Sections/calendar-dates@2x.png);
}
	.highlighted .icon-calendar-dates  {
		background-image: url(/foundation/images/BlueActive/Sections/calendar-dates@2x.png);
	}
	
	a:hover .icon-calendar-dates  {
		background-image: url(/foundation/images/BlueActive/Sections/calendar-dates@2x.png);
	}

.icon-custom {
    background-image: url(/foundation/images/Black/Sections/site@2x.png);
}

	.highlighted .icon-custom {
		background-image: url(/foundation/images/BlueActive/Sections/site@2x.png);
	}

	a:hover .icon-custom {
		background-image: url(/foundation/images/BlueActive/Sections/site@2x.png);
	}

.icon-community {
    background-image: url(/foundation/images/Black/Sections/communities@2x.png);
}

	.highlighted .icon-community {
		background-image: url(/foundation/images/BlueActive/Sections/communities@2x.png);
	}

	a:hover .icon-community {
		background-image: url(/foundation/images/BlueActive/Sections/communities@2x.png);
	}

.icon-dashboard {
    background-image: url(/foundation/images/Black/Sections/dashboard@2x.png);
}

	.highlighted .icon-dashboard {
		background-image: url(/foundation/images/BlueActive/Sections/dashboard@2x.png);
	}

	a:hover .icon-dashboard {
		background-image: url(/foundation/images/BlueActive/Sections/dashboard@2x.png);
	}

.icon-usage {
    background-image: url(/foundation/images/BlueActive/header/usage@2x.png);
}

	.highlighted .icon-usage {
		background-image: url(/foundation/images/BlueActive/header/usage@2x.png);
	}

	a:hover .icon-usage {
		background-image: url(/foundation/images/BlueActive/header/usage@2x.png);
	}

.top-navigation .icon-info {
    background-image: url(/foundation/images/BlueActive/header/help@2x.png);
}

	.highlighted .top-navigation .icon-info {
		background-image: url(/foundation/images/BlueActive/header/help@2x.png);
	}

	a:hover .top-navigation .icon-info {
		background-image: url(/foundation/images/BlueActive/header/help@2x.png);
	}

.icon-contact-us {
    background-image: url(/foundation/images/BlueActive/header/mail@2x.png);
}

	.highlighted .top-navigation .icon-contact-us {
		background-image: url(/foundation/images/BlueActive/header/mail@2x.png);
	}

	a:hover .top-navigation .icon-contact-us {
		background-image: url(/foundation/images/BlueActive/header/mail@2x.png);
	}

.icon-faq {
    background-image: url(/foundation/images/BlueActive/header/faq.png);
}

	.highlighted .top-navigation .icon-faq {
		background-image: url(/foundation/images/BlueActive/header/faq.png);
	}

	a:hover .top-navigation .icon-faq {
		background-image: url(/foundation/images/BlueActive/header/faq.png);
	}
	.icon-activity-stream {
    background-image: url(/foundation/images/BlueActive/sections/union.png);
}
.icon-contrast {
    background-image: url(/foundation/images/BlueActive/header/high-contrast@2x.png);
}

.custom-top-nav {
    height: 100px;
    width: 90%;
    margin: 64px auto;
}

.content-top.with-custom-top-nav {
    margin-top: calc(100px + 60px);
}

.with-custom-top-nav #top-bar {
    height: calc(100px + 76px);
}

/******* Responsive Sections *******/
@media screen and (max-width: 480px) {
    /*.custom-top-nav {
        height: 100px;
    }

    .content-top.with-custom-top-nav {
        margin-top: calc(100px + 60px);
    }

    .with-custom-top-nav #top-bar {
        height: calc(100px + 82px);
    }*/
}

@media screen and (min-width: 768px) {
    #login .background {
        background-image: url(upload/AdobeStock_414170132_2000x1200.jpg);
        background-position: top left;
        background-repeat: no-repeat;
        background-size: cover;
        height: 125%;
        position: relative;
    }
	#login .logo {
		background-image: url("custom/HARTMANN_logo.png");
		background-repeat: no-repeat;
		background-size: contain;
		color: transparent;
		display: inline-block;
		width: 97px;
		height: 41.2px;
		position: absolute;
		top: 29.4px;
		left: 54px;
	}
    #login-section {
        position: absolute;
        left: 100px;
        width: 410px;
        padding: 20px 0 0;
        padding-top: 50px;
        top: 10%;
        background: rgba(255, 255, 255, 0.8);
    }
	
	#login-section  .row:first-child::before {
		font-family: 'PantonW05-Regular';
		src:url("Panton/PantonW05-Regular.woff2") format("woff2"),url("Panton/PantonW05-Regular.woff") format("woff");		
		font-style: normal;
		font-weight: 400;
		font-size: 25px;
		line-height: 35px;
		color: #2F2F2F;
		position: relative;
		top: -30px;
		left: 20px;
	}
	
	.row .dashboard-userprofile, .card-section .row {
		margin-left: -13px;
		margin-right: -13px;
	}
	

	.list-container.tile-view .view-item {
		width: 358px;
	}
	
	.list-container .view-item.last-row {
		border-bottom: unset;
	}
	
	.content-top .navigation-row li a.selected, .content-top .navigation-row li a:hover {
		background: transparent;
		border-bottom: 2px solid #0045FF;
		color: #0045FF;
		font-weight: normal;
		
	}
	
	.content-top .navigation-row li a {
		background: transparent;
		border-bottom: 2px solid #ACACAC;
		color: #757575;
		font-weight: normal;
	}

    .custom-top-nav {
        height: 50px;
        width: 90%;
        margin: 64px auto;
    }

    .content-top.with-custom-top-nav {
        margin-top: calc(100px + 48px);
    }

    .with-custom-top-nav #top-bar {
        height: calc(100px + 48px);
    }
}

@media screen and (min-width: 1024px) {
	
	.catalog .main-catalog-box .tile-view .view-item:hover, .my-training .main-catalog-box .tile-view .view-item:hover,
.catalog .list-container.tile-view .view-item:hover, .my-training .list-container.tile-view .view-item:hover,
.catalog .main-catalog-box .tile-view div:first-of-type.view-item:hover, .my-training .main-catalog-box .tile-view div:first-of-type.view-item:hover,
.catalog .list-container.tile-view div:first-of-type.view-item:hover, .my-training .list-container.tile-view div:first-of-type.view-item:hover  {
	width: 428px;
	height: 428px;
	z-index: 1000;
	margin-top: -50px;
	margin-right: -15px !important;
	margin-left: -30px; 
}
	
	.large-9 {
		width: 100%;
	}
	
	#login #top-bar, #login #header {
		height: 50px !important;
		font-size: 16px;
	}
	
	#content-main #top-bar {
		height: 130px;
	}
	
	.content {
		margin-left: 245px;
	}
	
	.global-nav {
		width: 259px;
	}
	.content-top {
		margin-left: 259px;
	}
	
	.list-container.tile-view .view-item {
		border: unset;
		border-radius: 4px !important;
		background: #FFF;
		margin-bottom: 24px;
		margin-right: 24px;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	
	.list-container .view-item {
		border: unset;
		border-radius: 4px !important;
		background: #FFF;
		margin-bottom: 24px;
	}
	
	#login .top-navigation {
		position: absolute;
		top: 29.5px;
		right: 54px;
	}
	
	#login .logo {
		background-image: url("custom/HARTMANN_logo.png");
		background-repeat: no-repeat;
		background-size: contain;
		color: transparent;
		display: inline-block;
		width: 97px;
		height: 41.2px;
		position: absolute;
		top: 29.4px;
		left: 54px;
	}
	
	#content-main .logo {
		background-image: url("custom/HARTMANN_logo.png");
		background-repeat: no-repeat;
		background-size: contain;
		color: transparent;
		display: inline-block;
		width: 97px;
		height: 41.2px;
		position: absolute;
		top: 29.4px;
		left: 29.4px;
	}

.custom-top-nav {
    height: 100px;
    width: 90%;
    margin: 64px auto;
	overflow:visible;
}

.content-top.with-custom-top-nav {
    margin-top: calc(100px + 60px);
}

.with-custom-top-nav #top-bar {
    height: calc(100px + 76px);
}

  

    .custom-top-nav .top-bar-contact-us {
        position: absolute;
        z-index: 3;
        right: 25%;
        top: 30px;
        width: 50%;
    }
}

@media screen and (max-width: 1023px) {
    #login .background {
        background-image: unset;
        background-color: #fff;
    }

    #login-section {
        width: 100%;
        position: relative;
        left: 0;
        top: 100px;
        box-shadow: none;
        border-radius: 0;
    }
}

@media screen and (min-width: 64em) {
    #login .background, #login .background.bg-type-b, #login .background.bg-type-c {
        /* background-size: 113% 100%;  
		background-size: 113% auto; */
        min-height: 600px;
    }
	/*#login .logo {
		background-image: url("custom/HARTMANN_logo.png");
		background-repeat: no-repeat;
		background-size: contain;
		color: transparent;
		display: inline-block;
		width: 97px;
		height: 41.2px;
		position: absolute;
		top: calc(40% - 166px);/*29.4px;*/
		left: 54px;
	}*/

}

@media screen and (min-width: 1365px) {
    
}

@media screen and (max-width: 1643px) {
.my-training .main-catalog-box .catalog-welcome-img, .catalog .main-catalog-box .catalog-welcome-img  {
    max-width: 560px !important;
}
.catalog .main-catalog-box .catalog-welcome-img img {
    margin-top: 0px;
}
#login .logo {
		background-image: url("custom/HARTMANN_logo.png");
		
	}
	#content-main .logo {
		background-image: url("custom/HARTMANN_logo.png");
		background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    display: inline-block;
    height: 52px;
    width: 100%;
    margin-left: 16px;
	}
}

@media screen and (max-width: 63.9375em) {
.navigation {
    overflow: visible;
}
.with-custom-top-nav #top-bar {
    height: calc(100px + 32px);
}
#footer {
    padding-top: 100px;
}
}