/* Preset Tags *******************/

* {
	padding: 0;
	margin: 0;
}

html {
	min-height: 100%;
}

body {
	font-family: Arial,Roboto, Myriad,  Verdana, Sans-Serif;
	font-size: 14px;
	font-weight: 300;
	line-height: normal;
	text-align: left;
}

body.logged-in {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.text-reminder {
	font-size: 10px;
}

.img-container {
	text-align: center;
}

img {
	max-width: 100%;
}

@media (max-width: 768px) {
		
	.wide-phone {
		margin-left: -20px;
		width: calc(100% + 40px);
	}

	.wide-phone img {
		width: 100%;
	}
}

hr {
	width: 100%;
	border: none;
	height: 4px;
	margin: 20px 0;
}

h1 {
	display: block;
	position: relative;
	font-size: 48px;
	font-family: Neuton, Serif;
	font-weight: normal;
	line-height: normal;
	padding-bottom: 24px;
	font-family: Arial,  Sans-Serif;
}

h1:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: 4px;
}

@media (max-width: 768px) {
	
	h1 {
		font-size: 36px;
	}
}

h1.page-title {
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-size: 36px;
	font-weight: 300;
	padding-bottom: 36px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
}

h1.page-title:before {
	content: none;
}

h1 .course-categories {
	position: absolute;
	bottom: -4px;
	left: 70px;
}

h2 {
	font-size: 24px;
	font-weight: lighter;
	line-height: normal;
}

h3 {
	position: relative;
	font-family: Neuton, Serif;
	font-weight: normal;
	font-size: 24px;
	line-height: normal;
	padding-bottom: 12px;
	margin-bottom: 20px;
	font-family: Arial,  Sans-Serif;
}

h3:not(.question):before, h3.question span:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 24px;
}

h3:not(.question):before {
	bottom: 0;
	height: 4px;
}

h3.text-center:before {
	left: 50%;
	margin-left: -12px;
}

h3.question span:before {
	top: 0;
	height: 2px;
	margin-top: 6px;
}

h3.question {
	font-size: 18px;
}

h3.question span {
	display: block;
	position: relative;
	top: 100%;
	padding-top: 12px;
	font-size: 24px;
}

h4 {
	font-size: 18px;
	font-weight: 300;
	line-height: normal;
}

h4 > img {
	display: inline-block;
}

h5 {
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
}

h6 {
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 5px;
}

.title-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.title-container .cta-contextual {
	margin-left: 20px;
}

.title-container h3 + .cta-contextual {
	margin-bottom: 20px;
}

.title-container .custom-select-container {
	margin-left: 20px;
}

.filter-container + .title-container {
	margin-top: 10px;
}

@media (max-width: 768px) {
	
	.title-container {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}
	
	.title-container > .back-btn {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.title-container > .back-btn + h1,
	.title-container > .back-btn + h2,
	.title-container > .back-btn + h3,
	.title-container > .back-btn + h4 {
		margin-left: 56px;
	}
	
	.title-container > .back-btn + h1 {
		margin-top: -6px;
	}
	
	.title-container > .back-btn + h2,
	.title-container > .back-btn + h4 {
		line-height: 38px;
	}
	
	.title-container .custom-select-container {
		margin-top: 20px;
		margin-left: 0;
	}
	
	.title-container h3 + .cta-contextual {
		margin-left: 0;
	}
}

.title-choice {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
}

.title-choice h2 {
	width: auto;
	margin-bottom: 0;
}

.title-choice h2 + h2 {
	margin-left: 40px;
}

.title-choice h2 a {
	font-size: 18px;
	text-decoration: underline;
}

.cta-container.steps-btn-container {
	display: flex;
	justify-content: flex-end;
}

.cta-container.steps-btn-container a + a {
	margin-left: auto;
}

p {
	line-height: 24px;
}

.intro-p {
	font-size: 18px;
	line-height: 1.67;
}

@media (max-width: 768px) {
	
	.intro-p {
		font-size: 16px;
		line-height: 1.88;
	}
}

.legend-p {
	font-family: Neuton, Serif;
	font-size: 18px;
}

a {
	text-decoration: none;
	cursor: pointer;
	font-weight: 500;
}

a:hover {
	text-decoration: underline;
}

a > .fa {
	font-size: 18px;
	padding-right: 8px;
}

.simple-icon-container {
	display: inline-flex;
	align-items: center;
}

.full-width {
	width: 100%;
	max-width: 100% !important;
	box-sizing: border-box;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

@media (max-width: 768px) {
	
	.text-center-phone {
		text-align: center;
	}
}

.round-container-36 {
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	min-width: 36px;
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff;
	box-sizing: border-box;
	font-size: 18px;
}

.obsolete {
	font-size: 14px;
	text-decoration: line-through;
}

.disabled {
	cursor: default;
	pointer-events: none;
}

.unstyled {
	list-style-type: none;
	display: inline-block;
}

.fl-content-inline {
	margin-left: 10px;
}

.fl-container-inline {
	display: inline-block;
	margin-left: 20px;
}

.following-content {
	display: block;
	margin-top: 20px;
}

table.following-content {
	display: table;
	width: 100%;
	margin-top: 20px;
}

.following-container {
	display: block;
	margin-top: 40px;
}

.inner {
	padding: 20px;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	
	.full-width-phone {
		width: 100%;
		box-sizing: border-box;
	}
	
	.fl-container-inline:not(.fl-container-inline-phone) {
		margin-top: 20px;
		display: block;
		margin: 20px auto 0;
		margin-left: 0;
	}
	
	.inner {
		padding: 20px 0;
	}
	
	.inner-mobile {
		padding: 20px;
		box-sizing: border-box;
	}
	
	.following-container-phone {
		display: block;
		margin-top: 20px;
	}
}

section.inner {
	padding: 40px 30px;
}

section.inner:not(.colored-row-container) + section.inner:not(.colored-row-container) {
	padding: 0 30px 40px;
}

@media (max-width: 768px) {
	
	section.inner {
		padding: 20px;
	}
}

.col-container {
	display: flex;
}

.col-container.top {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.col-container.middle {
	align-items: center;
	flex-wrap: nowrap;
}

.col-container.bottom {
	align-items: flex-end;
	flex-wrap: nowrap;
}

.col-container .col-1,
.col-container .col-2,
.col-container .col-3,
.col-container .col-4,
.col-container .col-5,
.col-container .col-6,
.col-container .col-7,
.col-container .col-8,
.col-container .col-9,
.col-container .col-10,
.col-container .col-11,
.col-container .col-12 {
	box-sizing: border-box;
}

body .col-1 {
	width: 8.33%;
}

body .col-2 {
	width: 16.66%;
}

body .col-3 {
	width: 25%;
}

body .col-4 {
	width: 33.33%;
}

body .col-5 {
	width: 41.66%;
}

body .col-6 {
	width: 50%;
}

body .col-7 {
	width: 58.33%;
}

body .col-8 {
	width: 66.66%;
}

body .col-9 {
	width: 75%;
}

body .col-10 {
	width: 83.33%;
}

body .col-11 {
	width: 91.66%;
}

body .col-12 {
	width: 100%;
}

body .col-unique {
	margin: 0 auto;
	display: block;
	padding: 0 !important;
}

.col-container:not(.three-col-container) > [class*="col-"]:not(.col-12):first-child {
	padding-right: 15px;
}

.col-container:not(.three-col-container) > [class*="col-"]:not(.col-12) + [class*="col-"]:nth-child(2n) {
	padding-left: 15px;
}

.three-col-container > [class*="col-"]:not(.col-12):not(:nth-child(3n)) {
	padding-right: 15px;
}

.three-col-container > [class*="col-"]:not(.col-12):nth-child(2n),
.three-col-container > [class*="col-"]:not(.col-12):nth-child(3n) {
	padding-left: 15px;
}

@media (max-width: 768px) {
	
	.col-container {
		flex-wrap: wrap;
	}
	
	.col-container .col-1,
	.col-container .col-2,
	.col-container .col-3,
	.col-container .col-4,
	.col-container .col-5,
	.col-container .col-6,
	.col-container .col-7,
	.col-container .col-8,
	.col-container .col-9,
	.col-container .col-10,
	.col-container .col-11,
	.col-container .col-12 {
		width: 100%;
	}
	
	.col-container:not(.three-col-container) > [class*="col-"]:not(.col-12):first-child {
		padding-right: 0;
	}
	
	.col-container:not(.three-col-container) > [class*="col-"]:not(.col-12) + [class*="col-"]:nth-child(2n) {
		padding-left: 0;
	}
	
	.three-col-container > [class*="col-"]:not(:first-child) {
		margin-top: 20px;
	}
	
	.three-col-container > [class*="col-"]:not(.col-12):not(:nth-child(3n)) {
		padding-right: 0;
	}

	.three-col-container > [class*="col-"]:not(.col-12):nth-child(2n),
	.three-col-container > [class*="col-"]:not(.col-12):nth-child(3n) {
		padding-left: 0;
	}
}

.pull-right {
	align-self: flex-end;
}

.video-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 55%;
}
.video-wrapper iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

/* Favorite *******************/

.favorite i {
	font-size: 14px;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	padding: 0;
}

/* Visibility *******************/

@media (max-width: 1024px) {

	.visible-desktop {
		display: none !important;
	}
}

@media (min-width: 1025px) {

	.hidden-desktop {
		display: none !important;
	}
}

@media (max-width: 768px) {

	.hidden-phone {
		display: none !important;
	}
}

@media (min-width: 769px) {

	.visible-phone {
		display: none !important;
	}
}

/* Scrollbar *******************/

.custom-scrollbar {
	overflow-x: auto;
	padding-bottom: 20px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.custom-scrollbar ::-webkit-scrollbar-track {
	border-radius: 6px;
}

.custom-scrollbar::-webkit-scrollbar,
.custom-scrollbar ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.custom-scrollbar ::-webkit-scrollbar-thumb {
	border-radius: 6px;
}

/* Profile Picture *******************/

.pic-220 {
	display: inline-block;
	width: 220px;
	max-width: 220px;
	height: 220px;
	max-height: 220px;
	border-radius: 50%;
}

.pic-120 {
	display: inline-block;
	width: 120px;
	max-width: 120px;
	height: 120px;
	max-height: 120px;
	border-radius: 50%;
}


.pic-84 {
	display: inline-block;
	width: 84px;
	max-width: 84px;
	height: 84px;
	border-radius: 50%;
}

.pic-64 {
	display: block;
	width: 64px;
	max-width: 64px;
	min-width: 64px;
	height: 64px;
	max-height: 64px;
	border-radius: 50%;
}

.pic-48 {
	display: block;
	width: 48px;
	max-width: 48px;
	min-width: 48px;
	height: 48px;
	max-height: 48px;
	border-radius: 50%;
}

.pic-36 {
	display: block;
	width: 36px;
	height: 36px;
	max-height: 36px;
	max-width: 36px;
	min-width: 36px;
	border-radius: 50%;
}

.pic-36-max {
	display: flex;
	max-width: 36px;
	max-height: 36px;
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

@media (max-width: 768px) {
	
	.pic-220 {
		width: 170px;
		max-width: 170px;
		min-width: 170px;
		max-height: 170px;
		height: 170px;
	}
	
	.pic-64,
	.pic-48 {
		width: 36px;
		max-width: 36px;
		min-width: 36px;
		height: 36px;
		max-height: 36px;
	}
}

/* Label / Input Text *******************/

label {
	display: inline-block;
	width: 100%;
	max-width: 300px;
}

label.large {
	max-width: 460px;
}

label.full-width {
	max-width: 100%;
}

label.above {
	font-size: 12px;
	text-transform: uppercase;
}

label.above input[type="text"],
label.above input[type="password"],
label.above input[type="number"],
label.above select,
label.above textarea {
	display: block;
}

@media (max-width: 768px) {
	label,
	label.large {
		max-width: inherit;
	}
}

::placeholder {
	font-size: 14px;
}

.discreet {
	font-size: 12px;
}

input[type="text"],
input[type="password"],
input[type="number"],
.input-file {
	display: inline-block;
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	resize: none;
	overflow: auto;
	outline: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled {
	border-bottom: none;
}

input[type="number"] {
	width: 75px;
}

label input[type="text"],
label input[type="password"],
label input[type="number"] {
	height: 30px;
	margin-top: -5px;
	font-size: 18px;
	line-height: 22px;
}

/* Email Field *******************/

label.email-field {
	display: inline-block;
	background-image: none;
	box-sizing: border-box;
	position: relative;
	border-width: 2px;
	border-style: solid;
	max-width: 220px;
}

label.email-field input {
	background-color: transparent;
	border: none;
	line-height: 30px;
	outline: none;
	padding: 0 40px 0 10px;
	width: 100%;
	height: 30px;
	box-sizing: border-box;
	margin: 0;
	font-size: inherit;
	overflow: inherit;
}

label.email-field a,
label.email-field button {
	line-height: 30px;
	width: 20px;
	display: inline-block;
	text-align: center;
	position: absolute;
	top: 0;
	right: 10px;
	border: none;
	background: none;
}

label.email-field .fa {
	line-height: 30px;
}

/* Textarea *******************/

textarea {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	resize: none;
	overflow: auto;
	outline: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	margin-bottom: 20px;
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-size: 18px;
	line-height: 24px;
}

textarea:focus {
	font-style: initial;
}

/* Radio / Checkbox *******************/

.input-option-container {
	display: inline-block;
	text-align: left;
	position: relative;
	width: auto;
	max-width: inherit;
	font-size: 12px;
}

.input-option-container input[type=checkbox],
.input-option-container input[type=radio] {
	display: none;
}

.col-12 .checkbox-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
	align-items: center;
}

.col-6 .checkbox-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
	align-items: center;
}

input[type=checkbox] + span,
input[type=radio] + span {
	display: inline-flex;
	box-sizing: border-box;
	position: relative;
}

input[type=checkbox] + span span:not(:empty),
input[type=radio] + span span:not(:empty) {
	padding: 10px 25px 10px 35px;
}

input[type=checkbox] + span span:empty,
input[type=radio] + span span:empty {
	display: inline-block;
	width: 24px;
}

input[type=checkbox] + span:before,
input[type=radio] + span:before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 50%;
	border-width: 2px;
	border-style: solid;
	margin-top: -12px;
}

input[type=checkbox] + span i {
	display: none;
}

input[type=checkbox]:checked + span i {
	content: '';
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -12px;
	border-radius: 50%;
	text-align: center;
	line-height: 24px;
}

input[type=checkbox]:checked + span .fa-check {
	display: block;
}

input[type=radio] + span:before {
	border-radius: 50%;
}

input[type=radio]:checked + span:after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	position: absolute;
	left: 8px;
	top: 50%;
	margin-top: -4px;
	border-radius: 50%;
}

label input[type=checkbox] + span,
label input[type=radio] + span {
	cursor: pointer;
}

input[disabled],
input[disabled] + span,
input[disabled] + span i,
input[disabled] + span:before {
	cursor: default !important;
	pointer-events: none !important;
}

.input-option-container.inversed-checkbox input[type=checkbox] + span:before {
	left: inherit;
	right: 25px;
}

.input-option-container.inversed-checkbox input[type=checkbox] + span span:not(:empty) {
	padding: 10px 60px 10px 0px;
}

.input-option-container.inversed-checkbox input[type=checkbox]:checked + span i {
	left: inherit;
	right: 25px;
}

@media (max-width: 768px) {
	
	.col-12 .checkbox-container,
	.col-6 .checkbox-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.checkbox-container .input-option-container {
		width: 100%;
		box-sizing: border-box;
	}
}

/* Input File *******************/

.input-file {
	box-sizing: border-box;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
}

.input-file .label {
	display: block;
}

.input-file .filename {
	display: block;
	font-size: 18px;
	font-weight: normal;
	line-height: 22px;
	text-transform: initial;
	text-overflow: ellipsis;
	overflow: hidden;
}

.input-file input {
	display: none;
}

.input-icon {
	position: relative;
}

.input-icon input,
.input-icon.input-file {
	padding-right: 30px;
	box-sizing: border-box;
}

.input-icon > a,
.input-icon .fa {
	display: inline-block;
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	bottom: 0;
	text-align: center;
	line-height: 30px;
	padding-right: 0;
}

/* UI Menu *******************/

.ui-autocomplete {
	display: inline-block;
	list-style-type: none;
	z-index: 2;
	line-height: 48px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	margin-top: 10px;
	overflow-y: auto;
	max-height: 250px;
}

.ui-autocomplete li {
	padding: 0 20px;
	font-weight: 500;
}

.ui-helper-hidden-accessible {
	display: none;
}

/* Select *******************/

.custom-select-container {
	display: inline-flex;
	flex-direction: column;
	width: 100%;
	max-width: 300px;
	min-width: 120px;
}

.custom-select-container.small {
	max-width: 120px;
	min-width: 120px;
}

.custom-select-container label {
	position: relative;
}

.custom-select {
	display: inline-block;
	position: relative;
	max-width: 300px;
	width: 100%;
	height: 30px;
	white-space: nowrap;
	line-height: 30px;
	box-sizing: border-box;
}

.custom-select ul {
	list-style-type: none;
}

.custom-select:not(.open) > ul {
	height: 30px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.custom-select.multiline {
	height: auto;
}

.custom-select.multiline .select-list {
	font-size: 12px;
	min-height: 30px;
	position: relative;
}

.custom-select.multiline:not(.open) .select-list {
	position: relative;
}

.custom-select.multiline.open .select-list {
	border-bottom: 1px solid transparent;
}

.custom-select.multiline .select-list > li:last-child {
	position: absolute;
	top: 100%;
	overflow-y: auto;
	border-width: 1px;
	border-style: solid;
}

.custom-select.multiline:not(.open) > ul,
.custom-select.multiline .select-list .placeholder {
	height: auto;
}

.custom-select.multiline .select-list .placeholder {
	margin-bottom: -1px;
	min-height: 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.custom-select.multiline .select-list .placeholder .option-legend {
	font-size: 14px;
	line-height: 14px;
	padding-bottom: 8px;
}

.custom-select.multiline.open .select-list > li:last-child,
.custom-select.multiline.open .select-list ul {
	display: block;
	min-width: 100%;
	width: 100%;
}

.custom-select.multiline .select-list ul li {
	display: block;
	padding: 0;
	min-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

.custom-select.multiline .select-list ul li[data-value] {
	padding: 0 20px;
	box-sizing: border-box;
}

.custom-select.multiline .select-list ul ul {
	border: none;
	box-shadow: none;
}

.custom-select.multiline .select-list ul .ligroup {
	padding-bottom: 10px;
}

.custom-select.multiline .select-list ul .ligroup > span {
	display: block;
	padding: 5px 10px;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 20px;
	box-sizing: border-box;
}

.custom-select.multiline .select-list .ligroup ul {
	padding: 0 20px;
}

.custom-select.multiline .select-list .ligroup ul > li {
	border-top-width: 1px;
	border-top-style: solid;
	padding: 6px 0;
	font-weight: bold;
	line-height: 14px;
	box-sizing: border-box;
}

.custom-select.multiline li > span {
	pointer-events: none;
}

.custom-select.multiline .select-list .ligroup .option-legend {
	display: block;
	font-weight: normal;
}

.custom-select.flag-select {
	width: 75px;
}

.custom-select i {
	display: block;
	position: absolute;
	right: 10px;
	top: 0;
	pointer-events: none;
	line-height: 30px;
}

.custom-select.flag-select i {
	top: 2px;
}

.select-list {
	position: absolute;
	width: 100%;
	top: 0;
	box-sizing: border-box;
}

.select-list .placeholder {
	display: block;
	cursor: pointer;
	padding: 0;
	border-left: none;
	border-right: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	font-size: 14px;
	background-color: transparent;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 32px;
	height: 30px;
	font-weight: 400;
	margin-top: -1px;
}

.custom-select-container.disabled .select-list {
	border-bottom: none !important;
}

.select-list .placeholder.selected {
	font-size: 18px;
}

.custom-select.flag-select:not(.open) > ul {
	border: none;
}

.flag-select .select-list .placeholder {
	padding: 2px 10px;
	font-size: 12px;
}

.flag-select .placeholder img {
	padding-top: 4px;
}

.select-list > li:last-child {
	display: none;
	box-sizing: border-box;
	overflow-y: auto;
	max-height: 250px;
	position: relative;
	z-index: 5;
	overflow: visible;
	top: 0;
	min-width: 100%;
	width: intrinsic;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
}

.flag-select .select-list > li:last-child {
	max-height: 180px;
	min-width: 100%;
}

.select-list ul {
	width: auto;
	border-style: solid;
	border-width: 1px;
	max-width: 250px;
	min-width: 100%;
	box-sizing: border-box;
	overflow-x: visible;
	overflow-y: auto;
}

.select-list ul li {
	position: relative;
	padding: 10px 20px;
	line-height: 30px;
	font-weight: 500;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flag-select .select-list ul li {
	height: 36px;
	padding: 6px 10px;
	line-height: 24px;
}

.flag-select img {
	float: left;
	padding-right: 10px;
	pointer-events: none;
}

.flag-select:not(.open) .select-list .placeholder {
	border: none;
}

.custom-select.open .select-list > li:last-child {
	display: flex;
}

.custom-select.open .select-list ul li:hover {
	cursor: pointer;
}

@media (max-width: 768px) {
	
	.custom-select-container,
	.custom-select-container .custom-select {
		max-width: inherit;
	}
}

/* Multiselect *******************/

.multiple-select-container {
	display: inline-flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	position: relative;
}

.multiple-select-container label {
	bottom: -2px;
	position: relative;
}

.multiple-select-container input[type="text"] {
	margin-top: -6px;
	font-size: 18px;
	border-bottom: none !important;
}

.multiple-select-container .multiple-select-btn {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
}

.multiple-select-container .multiple-select-btn .fa {
	position: static;
}

.multiple-select-container .custom-select {
	max-width: 100%;
	min-height: 30px;
	height: inherit !important;
}

.multiple-select-container .select-list {
	position: relative;
	min-height: 30px;
	height: inherit !important;
	border-bottom-width: 1px !important;
	border-bottom-style: solid !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.multiple-select-container .select-list ul,
.multiple-select-container .select-list ul .multiple-select-option {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.multiple-select-container .select-list .placeholder {
	white-space: normal;
	overflow: auto;
	min-height: 30px;
	height: inherit;
	line-height: initial;
	padding-top: 5px;
	box-sizing: border-box;
	margin-bottom: -1px;
	cursor: default;
}

.multiple-select-container .select-list > li:last-child {
	position: absolute;
	top: 100%;
	max-width: 100%;
}

.multiple-select-container .multiple-select-option .fa {
	border-radius: 50%;
	position: static;
	display: inline-block;
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	text-align: center;
	line-height: 30px;
	padding-right: 0;
	margin-left: -10px;
	margin-right: 10px;
}

.multiple-select-container .selected-option {
	display: inline-block;
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
	font-size: 12px;
	height: 16px;
	line-height: 16px;
	padding-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
}

.multiple-select-container .selected-option .delete-option {
	display: inline-block;
	position: static;
	pointer-events: auto;
	line-height: 16px;
	padding: 0 5px;
	cursor: pointer;
}

/* Call To Action *******************/

.cta-contextual {
	display: inline-block;
	height: 48px;
	line-height: 48px;
	border-radius: 3px;
	padding-left: 40px;
	padding-right: 40px;
	border-width: 2px;
	border-style: solid;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	position: relative;
	background-color: transparent;
	outline: none;
	white-space: nowrap;
}

.cta-contextual.disabled {
	opacity: 0.5;
}

.cta-contextual .fa {
	display: inline-block;
	height: 48px;
	line-height: 48px;
}

.cta-contextual > span + .fa {
	padding-right: 0;
	padding-left: 10px;
}

.cta-contextual:hover {
	text-decoration: none;
}

.cta-contextual:active:before,
.cta-contextual.selected:before {
	content: '';
	display: block;
	border-width: 1px;
	border-style: solid;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

.cta-contextual.multiline {
	display: block;
	height: auto;
	line-height: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
	white-space: normal;
}

.cta-contextual.multiline span span {
	display: block;
	font-weight: normal;
	font-size: 12px;
}

.cta-contextual.simplified {
	height: auto;
	line-height: inherit;
	padding: 5px 20px;
}

.cta-action {
	display: inline-block;
	height: 48px;
	line-height: 48px;
	white-space: nowrap;
	text-align: left;
	position: relative;
	background-image: none;
	background-color: transparent;
	border: none;
	outline: none;
	cursor: pointer;
}

.cta-action:hover {
	text-decoration: none;
}

.cta-action .fa {
	display: inline-block;
	width: 48px;
	min-width: 48px;
	height: 48px;
	border-radius: 50%;
	text-align: center;
	font-size: 18px;
	line-height: 48px;
	text-align: center;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
	padding: 0;
}

.cta-action.light .fa {
	box-shadow: none;
	border-width: 2px;
	border-style: solid;
	box-sizing: border-box;
	line-height: 44px;
}

.cta-action .fa + span,
.cta-action span + .fa {
	margin-left: 15px;
}

.cta-action.small {
	height: 36px;
	line-height: 36px;
}

.cta-action.small .fa {
	width: 36px;
	min-width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 14px;
}

@media (max-width: 768px) {
	
	.cta-action:not(.light):not(.cta-timer) {
		display: inline-flex;
		border-radius: 48px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
		max-width: 100%;
		max-width: 300px;
		justify-content: center;
	}
	
	.cta-action.small:not(.light):not(.cta-timer) {
		border-radius: 36px;
	}
	
	.cta-action:not(.light):not(.cta-timer) .fa {
		box-shadow: none;
		background-color: transparent !important;
	}
	
	.cta-action:not(.light):not(.cta-timer) span:first-child {
		padding-left: 20px;
	}
	
	.cta-action:not(.light):not(.cta-timer) .fa + span {
		padding-right: 20px;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.cta-action:not(.light):not(.cta-timer) .fa + span,
	.cta-action:not(.light):not(.cta-timer) span + .fa {
		margin-left: 0;
	}
}

.cta-timer .timer-progression {
	position: absolute;
	display: block;
	width: 56px;
	height: 56px;
	top: -1px;
	left: -4px;
}

.cta-action .fa + .timer-progression {
	margin-left: 0;
}

.cta-timer .timer-data {
	display: inline-block;
	font-size: 24px;
	line-height: 48px;
	font-weight: 300;
	margin-left: 15px;
}

.cta-timer .semi-circle span:before {
	border-width: 4px;
	border-style: solid;
}

.progression-circle .semi-circle + .semi-circle span {
	-webkit-transition-delay: 0;
	-moz-transition-delay: 0;
	-ms-transition-delay: 0;
	-o-transition-delay: 0;
	transition-delay: 0;
}

/* Progression circles *******************/

.progression-circle {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.progression-circle .semi-circle:first-child,
.progression-circle .semi-circle + .semi-circle {
	content: '';
	display: block;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.progression-circle .semi-circle:first-child {
	left: 50%;
}

.semi-circle span {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-ms-transition: 500ms;
	-o-transition: 500ms;
	transition: 500ms;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-transform-origin: center left;
	-moz-transform-origin: center left;
	-ms-transform-origin: center left;
	-o-transform-origin: center left;
	transform-origin: center left;
}

.progression-circle .semi-circle + .semi-circle span {
	left: 100%;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

.semi-circle span:before {
	content: '';
	display: block;
	width: 200%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -100%;
	border-radius: 50%;
	box-sizing: border-box;
}

.progression-circle[data-value="0"] .semi-circle:first-child span { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.progression-circle[data-value="1"] .semi-circle:first-child span { -webkit-transform: rotate(183.6deg); -moz-transform: rotate(183.6deg); -ms-transform: rotate(183.6deg); -o-transform: rotate(183.6deg); transform: rotate(183.6deg); }
.progression-circle[data-value="2"] .semi-circle:first-child span { -webkit-transform: rotate(187.2deg); -moz-transform: rotate(187.2deg); -ms-transform: rotate(187.2deg); -o-transform: rotate(187.2deg); transform: rotate(187.2deg); }
.progression-circle[data-value="3"] .semi-circle:first-child span { -webkit-transform: rotate(190.8deg); -moz-transform: rotate(190.8deg); -ms-transform: rotate(190.8deg); -o-transform: rotate(190.8deg); transform: rotate(190.8deg); }
.progression-circle[data-value="4"] .semi-circle:first-child span { -webkit-transform: rotate(194.4deg); -moz-transform: rotate(194.4deg); -ms-transform: rotate(194.4deg); -o-transform: rotate(194.4deg); transform: rotate(194.4deg); }
.progression-circle[data-value="5"] .semi-circle:first-child span { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -ms-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); }
.progression-circle[data-value="6"] .semi-circle:first-child span { -webkit-transform: rotate(201.6deg); -moz-transform: rotate(201.6deg); -ms-transform: rotate(201.6deg); -o-transform: rotate(201.6deg); transform: rotate(201.6deg); }
.progression-circle[data-value="7"] .semi-circle:first-child span { -webkit-transform: rotate(205.2deg); -moz-transform: rotate(205.2deg); -ms-transform: rotate(205.2deg); -o-transform: rotate(205.2deg); transform: rotate(205.2deg); }
.progression-circle[data-value="8"] .semi-circle:first-child span { -webkit-transform: rotate(208.8deg); -moz-transform: rotate(208.8deg); -ms-transform: rotate(208.8deg); -o-transform: rotate(208.8deg); transform: rotate(208.8deg); }
.progression-circle[data-value="9"] .semi-circle:first-child span { -webkit-transform: rotate(212.4deg); -moz-transform: rotate(212.4deg); -ms-transform: rotate(212.4deg); -o-transform: rotate(212.4deg); transform: rotate(212.4deg); }
.progression-circle[data-value="10"] .semi-circle:first-child span { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
.progression-circle[data-value="11"] .semi-circle:first-child span { -webkit-transform: rotate(219.6deg); -moz-transform: rotate(219.6deg); -ms-transform: rotate(219.6deg); -o-transform: rotate(219.6deg); transform: rotate(219.6deg); }
.progression-circle[data-value="12"] .semi-circle:first-child span { -webkit-transform: rotate(223.2deg); -moz-transform: rotate(223.2deg); -ms-transform: rotate(223.2deg); -o-transform: rotate(223.2deg); transform: rotate(223.2deg); }
.progression-circle[data-value="13"] .semi-circle:first-child span { -webkit-transform: rotate(226.8deg); -moz-transform: rotate(226.8deg); -ms-transform: rotate(226.8deg); -o-transform: rotate(226.8deg); transform: rotate(226.8deg); }
.progression-circle[data-value="14"] .semi-circle:first-child span { -webkit-transform: rotate(230.4deg); -moz-transform: rotate(230.4deg); -ms-transform: rotate(230.4deg); -o-transform: rotate(230.4deg); transform: rotate(230.4deg); }
.progression-circle[data-value="15"] .semi-circle:first-child span { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -ms-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); }
.progression-circle[data-value="16"] .semi-circle:first-child span { -webkit-transform: rotate(237.6deg); -moz-transform: rotate(237.6deg); -ms-transform: rotate(237.6deg); -o-transform: rotate(237.6deg); transform: rotate(237.6deg); }
.progression-circle[data-value="17"] .semi-circle:first-child span { -webkit-transform: rotate(241.2deg); -moz-transform: rotate(241.2deg); -ms-transform: rotate(241.2deg); -o-transform: rotate(241.2deg); transform: rotate(241.2deg); }
.progression-circle[data-value="18"] .semi-circle:first-child span { -webkit-transform: rotate(244.8deg); -moz-transform: rotate(244.8deg); -ms-transform: rotate(244.8deg); -o-transform: rotate(244.8deg); transform: rotate(244.8deg); }
.progression-circle[data-value="19"] .semi-circle:first-child span { -webkit-transform: rotate(248.4deg); -moz-transform: rotate(248.4deg); -ms-transform: rotate(248.4deg); -o-transform: rotate(248.4deg); transform: rotate(248.4deg); }
.progression-circle[data-value="20"] .semi-circle:first-child span { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -ms-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); }
.progression-circle[data-value="21"] .semi-circle:first-child span { -webkit-transform: rotate(255.6deg); -moz-transform: rotate(255.6deg); -ms-transform: rotate(255.6deg); -o-transform: rotate(255.6deg); transform: rotate(255.6deg); }
.progression-circle[data-value="22"] .semi-circle:first-child span { -webkit-transform: rotate(259.2deg); -moz-transform: rotate(259.2deg); -ms-transform: rotate(259.2deg); -o-transform: rotate(259.2deg); transform: rotate(259.2deg); }
.progression-circle[data-value="23"] .semi-circle:first-child span { -webkit-transform: rotate(262.8deg); -moz-transform: rotate(262.8deg); -ms-transform: rotate(262.8deg); -o-transform: rotate(262.8deg); transform: rotate(262.8deg); }
.progression-circle[data-value="24"] .semi-circle:first-child span { -webkit-transform: rotate(266.4deg); -moz-transform: rotate(266.4deg); -ms-transform: rotate(266.4deg); -o-transform: rotate(266.4deg); transform: rotate(266.4deg); }
.progression-circle[data-value="25"] .semi-circle:first-child span { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
.progression-circle[data-value="26"] .semi-circle:first-child span { -webkit-transform: rotate(273.6deg); -moz-transform: rotate(273.6deg); -ms-transform: rotate(273.6deg); -o-transform: rotate(273.6deg); transform: rotate(273.6deg); }
.progression-circle[data-value="27"] .semi-circle:first-child span { -webkit-transform: rotate(277.2deg); -moz-transform: rotate(277.2deg); -ms-transform: rotate(277.2deg); -o-transform: rotate(277.2deg); transform: rotate(277.2deg); }
.progression-circle[data-value="28"] .semi-circle:first-child span { -webkit-transform: rotate(280.8deg); -moz-transform: rotate(280.8deg); -ms-transform: rotate(280.8deg); -o-transform: rotate(280.8deg); transform: rotate(280.8deg); }
.progression-circle[data-value="29"] .semi-circle:first-child span { -webkit-transform: rotate(284.4deg); -moz-transform: rotate(284.4deg); -ms-transform: rotate(284.4deg); -o-transform: rotate(284.4deg); transform: rotate(284.4deg); }
.progression-circle[data-value="30"] .semi-circle:first-child span { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -ms-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); }
.progression-circle[data-value="31"] .semi-circle:first-child span { -webkit-transform: rotate(291.6deg); -moz-transform: rotate(291.6deg); -ms-transform: rotate(291.6deg); -o-transform: rotate(291.6deg); transform: rotate(291.6deg); }
.progression-circle[data-value="32"] .semi-circle:first-child span { -webkit-transform: rotate(295.2deg); -moz-transform: rotate(295.2deg); -ms-transform: rotate(295.2deg); -o-transform: rotate(295.2deg); transform: rotate(295.2deg); }
.progression-circle[data-value="33"] .semi-circle:first-child span { -webkit-transform: rotate(298.8deg); -moz-transform: rotate(298.8deg); -ms-transform: rotate(298.8deg); -o-transform: rotate(298.8deg); transform: rotate(298.8deg); }
.progression-circle[data-value="34"] .semi-circle:first-child span { -webkit-transform: rotate(302.4deg); -moz-transform: rotate(302.4deg); -ms-transform: rotate(302.4deg); -o-transform: rotate(302.4deg); transform: rotate(302.4deg); }
.progression-circle[data-value="35"] .semi-circle:first-child span { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -ms-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); }
.progression-circle[data-value="36"] .semi-circle:first-child span { -webkit-transform: rotate(309.6deg); -moz-transform: rotate(309.6deg); -ms-transform: rotate(309.6deg); -o-transform: rotate(309.6deg); transform: rotate(309.6deg); }
.progression-circle[data-value="37"] .semi-circle:first-child span { -webkit-transform: rotate(313.2deg); -moz-transform: rotate(313.2deg); -ms-transform: rotate(313.2deg); -o-transform: rotate(313.2deg); transform: rotate(313.2deg); }
.progression-circle[data-value="38"] .semi-circle:first-child span { -webkit-transform: rotate(316.8deg); -moz-transform: rotate(316.8deg); -ms-transform: rotate(316.8deg); -o-transform: rotate(316.8deg); transform: rotate(316.8deg); }
.progression-circle[data-value="39"] .semi-circle:first-child span { -webkit-transform: rotate(320.4deg); -moz-transform: rotate(320.4deg); -ms-transform: rotate(320.4deg); -o-transform: rotate(320.4deg); transform: rotate(320.4deg); }
.progression-circle[data-value="40"] .semi-circle:first-child span { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); }
.progression-circle[data-value="41"] .semi-circle:first-child span { -webkit-transform: rotate(327.6deg); -moz-transform: rotate(327.6deg); -ms-transform: rotate(327.6deg); -o-transform: rotate(327.6deg); transform: rotate(327.6deg); }
.progression-circle[data-value="42"] .semi-circle:first-child span { -webkit-transform: rotate(331.2deg); -moz-transform: rotate(331.2deg); -ms-transform: rotate(331.2deg); -o-transform: rotate(331.2deg); transform: rotate(331.2deg); }
.progression-circle[data-value="43"] .semi-circle:first-child span { -webkit-transform: rotate(334.8deg); -moz-transform: rotate(334.8deg); -ms-transform: rotate(334.8deg); -o-transform: rotate(334.8deg); transform: rotate(334.8deg); }
.progression-circle[data-value="44"] .semi-circle:first-child span { -webkit-transform: rotate(338.4deg); -moz-transform: rotate(338.4deg); -ms-transform: rotate(338.4deg); -o-transform: rotate(338.4deg); transform: rotate(338.4deg); }
.progression-circle[data-value="45"] .semi-circle:first-child span { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); }
.progression-circle[data-value="46"] .semi-circle:first-child span { -webkit-transform: rotate(345.6deg); -moz-transform: rotate(345.6deg); -ms-transform: rotate(345.6deg); -o-transform: rotate(345.6deg); transform: rotate(345.6deg); }
.progression-circle[data-value="47"] .semi-circle:first-child span { -webkit-transform: rotate(349.2deg); -moz-transform: rotate(349.2deg); -ms-transform: rotate(349.2deg); -o-transform: rotate(349.2deg); transform: rotate(349.2deg); }
.progression-circle[data-value="48"] .semi-circle:first-child span { -webkit-transform: rotate(352.8deg); -moz-transform: rotate(352.8deg); -ms-transform: rotate(352.8deg); -o-transform: rotate(352.8deg); transform: rotate(352.8deg); }
.progression-circle[data-value="49"] .semi-circle:first-child span { -webkit-transform: rotate(356.4deg); -moz-transform: rotate(356.4deg); -ms-transform: rotate(356.4deg); -o-transform: rotate(356.4deg); transform: rotate(356.4deg); }

.progression-circle[data-value="50"] .semi-circle:first-child span,
.progression-circle[data-value="51"] .semi-circle:first-child span,
.progression-circle[data-value="52"] .semi-circle:first-child span,
.progression-circle[data-value="53"] .semi-circle:first-child span,
.progression-circle[data-value="54"] .semi-circle:first-child span,
.progression-circle[data-value="55"] .semi-circle:first-child span,
.progression-circle[data-value="56"] .semi-circle:first-child span,
.progression-circle[data-value="57"] .semi-circle:first-child span,
.progression-circle[data-value="58"] .semi-circle:first-child span,
.progression-circle[data-value="59"] .semi-circle:first-child span,
.progression-circle[data-value="60"] .semi-circle:first-child span,
.progression-circle[data-value="61"] .semi-circle:first-child span,
.progression-circle[data-value="62"] .semi-circle:first-child span,
.progression-circle[data-value="63"] .semi-circle:first-child span,
.progression-circle[data-value="64"] .semi-circle:first-child span,
.progression-circle[data-value="65"] .semi-circle:first-child span,
.progression-circle[data-value="66"] .semi-circle:first-child span,
.progression-circle[data-value="67"] .semi-circle:first-child span,
.progression-circle[data-value="68"] .semi-circle:first-child span,
.progression-circle[data-value="69"] .semi-circle:first-child span,
.progression-circle[data-value="70"] .semi-circle:first-child span,
.progression-circle[data-value="71"] .semi-circle:first-child span,
.progression-circle[data-value="72"] .semi-circle:first-child span,
.progression-circle[data-value="73"] .semi-circle:first-child span,
.progression-circle[data-value="74"] .semi-circle:first-child span,
.progression-circle[data-value="75"] .semi-circle:first-child span,
.progression-circle[data-value="76"] .semi-circle:first-child span,
.progression-circle[data-value="77"] .semi-circle:first-child span,
.progression-circle[data-value="78"] .semi-circle:first-child span,
.progression-circle[data-value="79"] .semi-circle:first-child span,
.progression-circle[data-value="80"] .semi-circle:first-child span,
.progression-circle[data-value="81"] .semi-circle:first-child span,
.progression-circle[data-value="82"] .semi-circle:first-child span,
.progression-circle[data-value="83"] .semi-circle:first-child span,
.progression-circle[data-value="84"] .semi-circle:first-child span,
.progression-circle[data-value="85"] .semi-circle:first-child span,
.progression-circle[data-value="86"] .semi-circle:first-child span,
.progression-circle[data-value="87"] .semi-circle:first-child span,
.progression-circle[data-value="88"] .semi-circle:first-child span,
.progression-circle[data-value="89"] .semi-circle:first-child span,
.progression-circle[data-value="90"] .semi-circle:first-child span,
.progression-circle[data-value="91"] .semi-circle:first-child span,
.progression-circle[data-value="92"] .semi-circle:first-child span,
.progression-circle[data-value="93"] .semi-circle:first-child span,
.progression-circle[data-value="94"] .semi-circle:first-child span,
.progression-circle[data-value="95"] .semi-circle:first-child span,
.progression-circle[data-value="96"] .semi-circle:first-child span,
.progression-circle[data-value="97"] .semi-circle:first-child span,
.progression-circle[data-value="98"] .semi-circle:first-child span,
.progression-circle[data-value="99"] .semi-circle:first-child span,
.progression-circle[data-value="100"] .semi-circle:first-child span {
	-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }

.progression-circle[data-value="51"] .semi-circle + .semi-circle span { -webkit-transform: rotate(363.6deg); -moz-transform: rotate(363.6deg); -ms-transform: rotate(363.6deg); -o-transform: rotate(363.6deg); transform: rotate(363.6deg); }
.progression-circle[data-value="52"] .semi-circle + .semi-circle span { -webkit-transform: rotate(367.2deg); -moz-transform: rotate(367.2deg); -ms-transform: rotate(367.2deg); -o-transform: rotate(367.2deg); transform: rotate(367.2deg); }
.progression-circle[data-value="53"] .semi-circle + .semi-circle span { -webkit-transform: rotate(370.8deg); -moz-transform: rotate(370.8deg); -ms-transform: rotate(370.8deg); -o-transform: rotate(370.8deg); transform: rotate(370.8deg); }
.progression-circle[data-value="54"] .semi-circle + .semi-circle span { -webkit-transform: rotate(374.4deg); -moz-transform: rotate(374.4deg); -ms-transform: rotate(374.4deg); -o-transform: rotate(374.4deg); transform: rotate(374.4deg); }
.progression-circle[data-value="55"] .semi-circle + .semi-circle span { -webkit-transform: rotate(378deg); -moz-transform: rotate(378deg); -ms-transform: rotate(378deg); -o-transform: rotate(378deg); transform: rotate(378deg); }
.progression-circle[data-value="56"] .semi-circle + .semi-circle span { -webkit-transform: rotate(381.6deg); -moz-transform: rotate(381.6deg); -ms-transform: rotate(381.6deg); -o-transform: rotate(381.6deg); transform: rotate(381.6deg); }
.progression-circle[data-value="57"] .semi-circle + .semi-circle span { -webkit-transform: rotate(385.2deg); -moz-transform: rotate(385.2deg); -ms-transform: rotate(385.2deg); -o-transform: rotate(385.2deg); transform: rotate(385.2deg); }
.progression-circle[data-value="58"] .semi-circle + .semi-circle span { -webkit-transform: rotate(388.8deg); -moz-transform: rotate(388.8deg); -ms-transform: rotate(388.8deg); -o-transform: rotate(388.8deg); transform: rotate(388.8deg); }
.progression-circle[data-value="59"] .semi-circle + .semi-circle span { -webkit-transform: rotate(392.4deg); -moz-transform: rotate(392.4deg); -ms-transform: rotate(392.4deg); -o-transform: rotate(392.4deg); transform: rotate(392.4deg); }
.progression-circle[data-value="60"] .semi-circle + .semi-circle span { -webkit-transform: rotate(396deg); -moz-transform: rotate(396deg); -ms-transform: rotate(396deg); -o-transform: rotate(396deg); transform: rotate(396deg); }
.progression-circle[data-value="61"] .semi-circle + .semi-circle span { -webkit-transform: rotate(399.6deg); -moz-transform: rotate(399.6deg); -ms-transform: rotate(399.6deg); -o-transform: rotate(399.6deg); transform: rotate(399.6deg); }
.progression-circle[data-value="62"] .semi-circle + .semi-circle span { -webkit-transform: rotate(403.2deg); -moz-transform: rotate(403.2deg); -ms-transform: rotate(403.2deg); -o-transform: rotate(403.2deg); transform: rotate(403.2deg); }
.progression-circle[data-value="63"] .semi-circle + .semi-circle span { -webkit-transform: rotate(406.8deg); -moz-transform: rotate(406.8deg); -ms-transform: rotate(406.8deg); -o-transform: rotate(406.8deg); transform: rotate(406.8deg); }
.progression-circle[data-value="64"] .semi-circle + .semi-circle span { -webkit-transform: rotate(410.4deg); -moz-transform: rotate(410.4deg); -ms-transform: rotate(410.4deg); -o-transform: rotate(410.4deg); transform: rotate(410.4deg); }
.progression-circle[data-value="65"] .semi-circle + .semi-circle span { -webkit-transform: rotate(414deg); -moz-transform: rotate(414deg); -ms-transform: rotate(414deg); -o-transform: rotate(414deg); transform: rotate(414deg); }
.progression-circle[data-value="66"] .semi-circle + .semi-circle span { -webkit-transform: rotate(417.6deg); -moz-transform: rotate(417.6deg); -ms-transform: rotate(417.6deg); -o-transform: rotate(417.6deg); transform: rotate(417.6deg); }
.progression-circle[data-value="67"] .semi-circle + .semi-circle span { -webkit-transform: rotate(421.2deg); -moz-transform: rotate(421.2deg); -ms-transform: rotate(421.2deg); -o-transform: rotate(421.2deg); transform: rotate(421.2deg); }
.progression-circle[data-value="68"] .semi-circle + .semi-circle span { -webkit-transform: rotate(424.8deg); -moz-transform: rotate(424.8deg); -ms-transform: rotate(424.8deg); -o-transform: rotate(424.8deg); transform: rotate(424.8deg); }
.progression-circle[data-value="69"] .semi-circle + .semi-circle span { -webkit-transform: rotate(428.4deg); -moz-transform: rotate(428.4deg); -ms-transform: rotate(428.4deg); -o-transform: rotate(428.4deg); transform: rotate(428.4deg); }
.progression-circle[data-value="70"] .semi-circle + .semi-circle span { -webkit-transform: rotate(432deg); -moz-transform: rotate(432deg); -ms-transform: rotate(432deg); -o-transform: rotate(432deg); transform: rotate(432deg); }
.progression-circle[data-value="71"] .semi-circle + .semi-circle span { -webkit-transform: rotate(435.6deg); -moz-transform: rotate(435.6deg); -ms-transform: rotate(435.6deg); -o-transform: rotate(435.6deg); transform: rotate(435.6deg); }
.progression-circle[data-value="72"] .semi-circle + .semi-circle span { -webkit-transform: rotate(439.2deg); -moz-transform: rotate(439.2deg); -ms-transform: rotate(439.2deg); -o-transform: rotate(439.2deg); transform: rotate(439.2deg); }
.progression-circle[data-value="73"] .semi-circle + .semi-circle span { -webkit-transform: rotate(442.8deg); -moz-transform: rotate(442.8deg); -ms-transform: rotate(442.8deg); -o-transform: rotate(442.8deg); transform: rotate(442.8deg); }
.progression-circle[data-value="74"] .semi-circle + .semi-circle span { -webkit-transform: rotate(446.4deg); -moz-transform: rotate(446.4deg); -ms-transform: rotate(446.4deg); -o-transform: rotate(446.4deg); transform: rotate(446.4deg); }
.progression-circle[data-value="75"] .semi-circle + .semi-circle span { -webkit-transform: rotate(450deg); -moz-transform: rotate(450deg); -ms-transform: rotate(450deg); -o-transform: rotate(450deg); transform: rotate(450deg); }
.progression-circle[data-value="76"] .semi-circle + .semi-circle span { -webkit-transform: rotate(453.6deg); -moz-transform: rotate(453.6deg); -ms-transform: rotate(453.6deg); -o-transform: rotate(453.6deg); transform: rotate(453.6deg); }
.progression-circle[data-value="77"] .semi-circle + .semi-circle span { -webkit-transform: rotate(457.2deg); -moz-transform: rotate(457.2deg); -ms-transform: rotate(457.2deg); -o-transform: rotate(457.2deg); transform: rotate(457.2deg); }
.progression-circle[data-value="78"] .semi-circle + .semi-circle span { -webkit-transform: rotate(460.8deg); -moz-transform: rotate(460.8deg); -ms-transform: rotate(460.8deg); -o-transform: rotate(460.8deg); transform: rotate(460.8deg); }
.progression-circle[data-value="79"] .semi-circle + .semi-circle span { -webkit-transform: rotate(464.4deg); -moz-transform: rotate(464.4deg); -ms-transform: rotate(464.4deg); -o-transform: rotate(464.4deg); transform: rotate(464.4deg); }
.progression-circle[data-value="80"] .semi-circle + .semi-circle span { -webkit-transform: rotate(468deg); -moz-transform: rotate(468deg); -ms-transform: rotate(468deg); -o-transform: rotate(468deg); transform: rotate(468deg); }
.progression-circle[data-value="81"] .semi-circle + .semi-circle span { -webkit-transform: rotate(471.6deg); -moz-transform: rotate(471.6deg); -ms-transform: rotate(471.6deg); -o-transform: rotate(471.6deg); transform: rotate(471.6deg); }
.progression-circle[data-value="82"] .semi-circle + .semi-circle span { -webkit-transform: rotate(475.2deg); -moz-transform: rotate(475.2deg); -ms-transform: rotate(475.2deg); -o-transform: rotate(475.2deg); transform: rotate(475.2deg); }
.progression-circle[data-value="83"] .semi-circle + .semi-circle span { -webkit-transform: rotate(478.8deg); -moz-transform: rotate(478.8deg); -ms-transform: rotate(478.8deg); -o-transform: rotate(478.8deg); transform: rotate(478.8deg); }
.progression-circle[data-value="84"] .semi-circle + .semi-circle span { -webkit-transform: rotate(482.4deg); -moz-transform: rotate(482.4deg); -ms-transform: rotate(482.4deg); -o-transform: rotate(482.4deg); transform: rotate(482.4deg); }
.progression-circle[data-value="85"] .semi-circle + .semi-circle span { -webkit-transform: rotate(486deg); -moz-transform: rotate(486deg); -ms-transform: rotate(486deg); -o-transform: rotate(486deg); transform: rotate(486deg); }
.progression-circle[data-value="86"] .semi-circle + .semi-circle span { -webkit-transform: rotate(489.6deg); -moz-transform: rotate(489.6deg); -ms-transform: rotate(489.6deg); -o-transform: rotate(489.6deg); transform: rotate(489.6deg); }
.progression-circle[data-value="87"] .semi-circle + .semi-circle span { -webkit-transform: rotate(493.2deg); -moz-transform: rotate(493.2deg); -ms-transform: rotate(493.2deg); -o-transform: rotate(493.2deg); transform: rotate(493.2deg); }
.progression-circle[data-value="88"] .semi-circle + .semi-circle span { -webkit-transform: rotate(496.8deg); -moz-transform: rotate(496.8deg); -ms-transform: rotate(496.8deg); -o-transform: rotate(496.8deg); transform: rotate(496.8deg); }
.progression-circle[data-value="89"] .semi-circle + .semi-circle span { -webkit-transform: rotate(500.4deg); -moz-transform: rotate(500.4deg); -ms-transform: rotate(500.4deg); -o-transform: rotate(500.4deg); transform: rotate(500.4deg); }
.progression-circle[data-value="90"] .semi-circle + .semi-circle span { -webkit-transform: rotate(504deg); -moz-transform: rotate(504deg); -ms-transform: rotate(504deg); -o-transform: rotate(504deg); transform: rotate(504deg); }
.progression-circle[data-value="91"] .semi-circle + .semi-circle span { -webkit-transform: rotate(507.6deg); -moz-transform: rotate(507.6deg); -ms-transform: rotate(507.6deg); -o-transform: rotate(507.6deg); transform: rotate(507.6deg); }
.progression-circle[data-value="92"] .semi-circle + .semi-circle span { -webkit-transform: rotate(511.2deg); -moz-transform: rotate(511.2deg); -ms-transform: rotate(511.2deg); -o-transform: rotate(511.2deg); transform: rotate(511.2deg); }
.progression-circle[data-value="93"] .semi-circle + .semi-circle span { -webkit-transform: rotate(514.8deg); -moz-transform: rotate(514.8deg); -ms-transform: rotate(514.8deg); -o-transform: rotate(514.8deg); transform: rotate(514.8deg); }
.progression-circle[data-value="94"] .semi-circle + .semi-circle span { -webkit-transform: rotate(518.4deg); -moz-transform: rotate(518.4deg); -ms-transform: rotate(518.4deg); -o-transform: rotate(518.4deg); transform: rotate(518.4deg); }
.progression-circle[data-value="95"] .semi-circle + .semi-circle span { -webkit-transform: rotate(522deg); -moz-transform: rotate(522deg); -ms-transform: rotate(522deg); -o-transform: rotate(522deg); transform: rotate(522deg); }
.progression-circle[data-value="96"] .semi-circle + .semi-circle span { -webkit-transform: rotate(525.6deg); -moz-transform: rotate(525.6deg); -ms-transform: rotate(525.6deg); -o-transform: rotate(525.6deg); transform: rotate(525.6deg); }
.progression-circle[data-value="97"] .semi-circle + .semi-circle span { -webkit-transform: rotate(529.2deg); -moz-transform: rotate(529.2deg); -ms-transform: rotate(529.2deg); -o-transform: rotate(529.2deg); transform: rotate(529.2deg); }
.progression-circle[data-value="98"] .semi-circle + .semi-circle span { -webkit-transform: rotate(532.8deg); -moz-transform: rotate(532.8deg); -ms-transform: rotate(532.8deg); -o-transform: rotate(532.8deg); transform: rotate(532.8deg); }
.progression-circle[data-value="99"] .semi-circle + .semi-circle span { -webkit-transform: rotate(536.4deg); -moz-transform: rotate(536.4deg); -ms-transform: rotate(536.4deg); -o-transform: rotate(536.4deg); transform: rotate(536.4deg); }
.progression-circle[data-value="100"] .semi-circle + .semi-circle span { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); }

/* Gauges *******************/

.gauge-circle {
	display: inline-block;
	height: 48px;
	line-height: 48px;
	white-space: nowrap;
	text-align: left;
	position: relative;
}

.gauge-circle.large {
	transform: scale(1.4);
}

.gauge-circle.large-120 {
	height: 120px;
}

.gauge-circle .gauge-value {
	display: inline-block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	text-align: center;
	font-size: 14px;
	line-height: 48px;
	text-align: center;
	padding: 0;
	border-width: 2px;
	border-style: solid;
}

.gauge-circle.large-120 .gauge-value {
	display: flex;
	flex-direction: column;
	width: 120px;
	height: 120px;
	line-height: initial;
	border-style: dashed;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.gauge-circle.large-120 .gauge-value-number {
	display: block;
	margin-top: -10px;
	font-size: 14px;
	font-weight: bold;
}

*::-ms-backdrop, .gauge-circle.large-120 .gauge-value-number { /* IE11 */
	margin-top: 20px;
	line-height: 16px;
}

.gauge-circle.large-120 .gauge-value-number span {
	font-size: 36px;
}

.gauge-horizontal .gauge-value {
	position: absolute;
}

.gauge-circle .gauge-progression {
	position: absolute;
	display: block;
	width: 52px;
	height: 52px;
	top: 0px;
	left: 0px;
}

.gauge-circle.large-120 .gauge-progression {
	width: 124px;
	height: 124px;
}

.gauge-circle .semi-circle span:before {
	border-width: 2px;
	border-style: solid;
}

.gauge-circle.large-120 .semi-circle span:before {
	border-width: 4px;
}

.gauge-circle.large-120 .progression-circle {
	overflow: visible;
}

.gauge-circle.large-120 .progression-circle:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-top: -2px;
	margin-left: -2px;
	border-radius: 50%;
}

.gauge-circle.large-120 .progression-circle:after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 0;
	left: 50%;
	box-sizing: border-box;
	margin-top: -4px;
	margin-left: 0;
	border-width: 3px;
	border-style: solid;
	border-radius: 50%;
	transform-origin: 0 66px;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-ms-transition: 500ms;
	-o-transition: 500ms;
	transition: 500ms;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	-o-transition-timing-function: linear;
}

.gauge-circle.large-120 .progression-circle[data-value="0"]:after { -webkit-transform: rotate(-3.6deg); -moz-transform: rotate(-3.6deg); -ms-transform: rotate(-3.6deg); -o-transform: rotate(-3.6deg); transform: rotate(-3.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="1"]:after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
.gauge-circle.large-120 .progression-circle[data-value="2"]:after { -webkit-transform: rotate(3.6deg); -moz-transform: rotate(3.6deg); -ms-transform: rotate(3.6deg); -o-transform: rotate(3.6deg); transform: rotate(3.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="3"]:after { -webkit-transform: rotate(7.2deg); -moz-transform: rotate(7.2deg); -ms-transform: rotate(7.2deg); -o-transform: rotate(7.2deg); transform: rotate(7.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="4"]:after { -webkit-transform: rotate(10.8deg); -moz-transform: rotate(10.8deg); -ms-transform: rotate(10.8deg); -o-transform: rotate(10.8deg); transform: rotate(10.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="5"]:after { -webkit-transform: rotate(14.4deg); -moz-transform: rotate(14.4deg); -ms-transform: rotate(14.4deg); -o-transform: rotate(14.4deg); transform: rotate(14.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="6"]:after { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); }
.gauge-circle.large-120 .progression-circle[data-value="7"]:after { -webkit-transform: rotate(21.6deg); -moz-transform: rotate(21.6deg); -ms-transform: rotate(21.6deg); -o-transform: rotate(21.6deg); transform: rotate(21.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="8"]:after { -webkit-transform: rotate(25.2deg); -moz-transform: rotate(25.2deg); -ms-transform: rotate(25.2deg); -o-transform: rotate(25.2deg); transform: rotate(25.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="9"]:after { -webkit-transform: rotate(28.8deg); -moz-transform: rotate(28.8deg); -ms-transform: rotate(28.8deg); -o-transform: rotate(28.8deg); transform: rotate(28.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="10"]:after { -webkit-transform: rotate(32.4deg); -moz-transform: rotate(32.4deg); -ms-transform: rotate(32.4deg); -o-transform: rotate(32.4deg); transform: rotate(32.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="11"]:after { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
.gauge-circle.large-120 .progression-circle[data-value="12"]:after { -webkit-transform: rotate(39.6deg); -moz-transform: rotate(39.6deg); -ms-transform: rotate(39.6deg); -o-transform: rotate(39.6deg); transform: rotate(39.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="13"]:after { -webkit-transform: rotate(43.2deg); -moz-transform: rotate(43.2deg); -ms-transform: rotate(43.2deg); -o-transform: rotate(43.2deg); transform: rotate(43.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="14"]:after { -webkit-transform: rotate(46.8deg); -moz-transform: rotate(46.8deg); -ms-transform: rotate(46.8deg); -o-transform: rotate(46.8deg); transform: rotate(46.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="15"]:after { -webkit-transform: rotate(50.4deg); -moz-transform: rotate(50.4deg); -ms-transform: rotate(50.4deg); -o-transform: rotate(50.4deg); transform: rotate(50.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="16"]:after { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -ms-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); }
.gauge-circle.large-120 .progression-circle[data-value="17"]:after { -webkit-transform: rotate(57.6deg); -moz-transform: rotate(57.6deg); -ms-transform: rotate(57.6deg); -o-transform: rotate(57.6deg); transform: rotate(57.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="18"]:after { -webkit-transform: rotate(61.2deg); -moz-transform: rotate(61.2deg); -ms-transform: rotate(61.2deg); -o-transform: rotate(61.2deg); transform: rotate(61.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="19"]:after { -webkit-transform: rotate(64.8deg); -moz-transform: rotate(64.8deg); -ms-transform: rotate(64.8deg); -o-transform: rotate(64.8deg); transform: rotate(64.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="20"]:after { -webkit-transform: rotate(68.4deg); -moz-transform: rotate(68.4deg); -ms-transform: rotate(68.4deg); -o-transform: rotate(68.4deg); transform: rotate(68.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="21"]:after { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }
.gauge-circle.large-120 .progression-circle[data-value="22"]:after { -webkit-transform: rotate(75.6deg); -moz-transform: rotate(75.6deg); -ms-transform: rotate(75.6deg); -o-transform: rotate(75.6deg); transform: rotate(75.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="23"]:after { -webkit-transform: rotate(79.2deg); -moz-transform: rotate(79.2deg); -ms-transform: rotate(79.2deg); -o-transform: rotate(79.2deg); transform: rotate(79.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="24"]:after { -webkit-transform: rotate(82.8deg); -moz-transform: rotate(82.8deg); -ms-transform: rotate(82.8deg); -o-transform: rotate(82.8deg); transform: rotate(82.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="25"]:after { -webkit-transform: rotate(86.4deg); -moz-transform: rotate(86.4deg); -ms-transform: rotate(86.4deg); -o-transform: rotate(86.4deg); transform: rotate(86.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="26"]:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.gauge-circle.large-120 .progression-circle[data-value="27"]:after { -webkit-transform: rotate(93.6deg); -moz-transform: rotate(93.6deg); -ms-transform: rotate(93.6deg); -o-transform: rotate(93.6deg); transform: rotate(93.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="28"]:after { -webkit-transform: rotate(97.2deg); -moz-transform: rotate(97.2deg); -ms-transform: rotate(97.2deg); -o-transform: rotate(97.2deg); transform: rotate(97.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="29"]:after { -webkit-transform: rotate(100.8deg); -moz-transform: rotate(100.8deg); -ms-transform: rotate(100.8deg); -o-transform: rotate(100.8deg); transform: rotate(100.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="30"]:after { -webkit-transform: rotate(104.4deg); -moz-transform: rotate(104.4deg); -ms-transform: rotate(104.4deg); -o-transform: rotate(104.4deg); transform: rotate(104.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="31"]:after { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); }
.gauge-circle.large-120 .progression-circle[data-value="32"]:after { -webkit-transform: rotate(111.6deg); -moz-transform: rotate(111.6deg); -ms-transform: rotate(111.6deg); -o-transform: rotate(111.6deg); transform: rotate(111.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="33"]:after { -webkit-transform: rotate(115.2deg); -moz-transform: rotate(115.2deg); -ms-transform: rotate(115.2deg); -o-transform: rotate(115.2deg); transform: rotate(115.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="34"]:after { -webkit-transform: rotate(118.8deg); -moz-transform: rotate(118.8deg); -ms-transform: rotate(118.8deg); -o-transform: rotate(118.8deg); transform: rotate(118.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="35"]:after { -webkit-transform: rotate(122.4deg); -moz-transform: rotate(122.4deg); -ms-transform: rotate(122.4deg); -o-transform: rotate(122.4deg); transform: rotate(122.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="36"]:after { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -ms-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); }
.gauge-circle.large-120 .progression-circle[data-value="37"]:after { -webkit-transform: rotate(129.6deg); -moz-transform: rotate(129.6deg); -ms-transform: rotate(129.6deg); -o-transform: rotate(129.6deg); transform: rotate(129.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="38"]:after { -webkit-transform: rotate(133.2deg); -moz-transform: rotate(133.2deg); -ms-transform: rotate(133.2deg); -o-transform: rotate(133.2deg); transform: rotate(133.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="39"]:after { -webkit-transform: rotate(136.8deg); -moz-transform: rotate(136.8deg); -ms-transform: rotate(136.8deg); -o-transform: rotate(136.8deg); transform: rotate(136.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="40"]:after { -webkit-transform: rotate(140.4deg); -moz-transform: rotate(140.4deg); -ms-transform: rotate(140.4deg); -o-transform: rotate(140.4deg); transform: rotate(140.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="41"]:after { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -ms-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); }
.gauge-circle.large-120 .progression-circle[data-value="42"]:after { -webkit-transform: rotate(147.6deg); -moz-transform: rotate(147.6deg); -ms-transform: rotate(147.6deg); -o-transform: rotate(147.6deg); transform: rotate(147.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="43"]:after { -webkit-transform: rotate(151.2deg); -moz-transform: rotate(151.2deg); -ms-transform: rotate(151.2deg); -o-transform: rotate(151.2deg); transform: rotate(151.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="44"]:after { -webkit-transform: rotate(154.8deg); -moz-transform: rotate(154.8deg); -ms-transform: rotate(154.8deg); -o-transform: rotate(154.8deg); transform: rotate(154.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="45"]:after { -webkit-transform: rotate(158.4deg); -moz-transform: rotate(158.4deg); -ms-transform: rotate(158.4deg); -o-transform: rotate(158.4deg); transform: rotate(158.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="46"]:after { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); }
.gauge-circle.large-120 .progression-circle[data-value="47"]:after { -webkit-transform: rotate(165.6deg); -moz-transform: rotate(165.6deg); -ms-transform: rotate(165.6deg); -o-transform: rotate(165.6deg); transform: rotate(165.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="48"]:after { -webkit-transform: rotate(169.2deg); -moz-transform: rotate(169.2deg); -ms-transform: rotate(169.2deg); -o-transform: rotate(169.2deg); transform: rotate(169.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="49"]:after { -webkit-transform: rotate(172.8deg); -moz-transform: rotate(172.8deg); -ms-transform: rotate(172.8deg); -o-transform: rotate(172.8deg); transform: rotate(172.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="50"]:after { -webkit-transform: rotate(176.4deg); -moz-transform: rotate(176.4deg); -ms-transform: rotate(176.4deg); -o-transform: rotate(176.4deg); transform: rotate(176.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="51"]:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.gauge-circle.large-120 .progression-circle[data-value="52"]:after { -webkit-transform: rotate(183.6deg); -moz-transform: rotate(183.6deg); -ms-transform: rotate(183.6deg); -o-transform: rotate(183.6deg); transform: rotate(183.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="53"]:after { -webkit-transform: rotate(187.2deg); -moz-transform: rotate(187.2deg); -ms-transform: rotate(187.2deg); -o-transform: rotate(187.2deg); transform: rotate(187.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="54"]:after { -webkit-transform: rotate(190.8deg); -moz-transform: rotate(190.8deg); -ms-transform: rotate(190.8deg); -o-transform: rotate(190.8deg); transform: rotate(190.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="55"]:after { -webkit-transform: rotate(194.4deg); -moz-transform: rotate(194.4deg); -ms-transform: rotate(194.4deg); -o-transform: rotate(194.4deg); transform: rotate(194.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="56"]:after { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -ms-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); }
.gauge-circle.large-120 .progression-circle[data-value="57"]:after { -webkit-transform: rotate(201.6deg); -moz-transform: rotate(201.6deg); -ms-transform: rotate(201.6deg); -o-transform: rotate(201.6deg); transform: rotate(201.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="58"]:after { -webkit-transform: rotate(205.2deg); -moz-transform: rotate(205.2deg); -ms-transform: rotate(205.2deg); -o-transform: rotate(205.2deg); transform: rotate(205.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="59"]:after { -webkit-transform: rotate(208.8deg); -moz-transform: rotate(208.8deg); -ms-transform: rotate(208.8deg); -o-transform: rotate(208.8deg); transform: rotate(208.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="60"]:after { -webkit-transform: rotate(212.4deg); -moz-transform: rotate(212.4deg); -ms-transform: rotate(212.4deg); -o-transform: rotate(212.4deg); transform: rotate(212.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="61"]:after { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
.gauge-circle.large-120 .progression-circle[data-value="62"]:after { -webkit-transform: rotate(219.6deg); -moz-transform: rotate(219.6deg); -ms-transform: rotate(219.6deg); -o-transform: rotate(219.6deg); transform: rotate(219.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="63"]:after { -webkit-transform: rotate(223.2deg); -moz-transform: rotate(223.2deg); -ms-transform: rotate(223.2deg); -o-transform: rotate(223.2deg); transform: rotate(223.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="64"]:after { -webkit-transform: rotate(226.8deg); -moz-transform: rotate(226.8deg); -ms-transform: rotate(226.8deg); -o-transform: rotate(226.8deg); transform: rotate(226.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="65"]:after { -webkit-transform: rotate(230.4deg); -moz-transform: rotate(230.4deg); -ms-transform: rotate(230.4deg); -o-transform: rotate(230.4deg); transform: rotate(230.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="66"]:after { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -ms-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); }
.gauge-circle.large-120 .progression-circle[data-value="67"]:after { -webkit-transform: rotate(237.6deg); -moz-transform: rotate(237.6deg); -ms-transform: rotate(237.6deg); -o-transform: rotate(237.6deg); transform: rotate(237.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="68"]:after { -webkit-transform: rotate(241.2deg); -moz-transform: rotate(241.2deg); -ms-transform: rotate(241.2deg); -o-transform: rotate(241.2deg); transform: rotate(241.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="69"]:after { -webkit-transform: rotate(244.8deg); -moz-transform: rotate(244.8deg); -ms-transform: rotate(244.8deg); -o-transform: rotate(244.8deg); transform: rotate(244.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="70"]:after { -webkit-transform: rotate(248.4deg); -moz-transform: rotate(248.4deg); -ms-transform: rotate(248.4deg); -o-transform: rotate(248.4deg); transform: rotate(248.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="71"]:after { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -ms-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); }
.gauge-circle.large-120 .progression-circle[data-value="72"]:after { -webkit-transform: rotate(255.6deg); -moz-transform: rotate(255.6deg); -ms-transform: rotate(255.6deg); -o-transform: rotate(255.6deg); transform: rotate(255.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="73"]:after { -webkit-transform: rotate(259.2deg); -moz-transform: rotate(259.2deg); -ms-transform: rotate(259.2deg); -o-transform: rotate(259.2deg); transform: rotate(259.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="74"]:after { -webkit-transform: rotate(262.8deg); -moz-transform: rotate(262.8deg); -ms-transform: rotate(262.8deg); -o-transform: rotate(262.8deg); transform: rotate(262.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="75"]:after { -webkit-transform: rotate(266.4deg); -moz-transform: rotate(266.4deg); -ms-transform: rotate(266.4deg); -o-transform: rotate(266.4deg); transform: rotate(266.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="76"]:after { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
.gauge-circle.large-120 .progression-circle[data-value="77"]:after { -webkit-transform: rotate(273.6deg); -moz-transform: rotate(273.6deg); -ms-transform: rotate(273.6deg); -o-transform: rotate(273.6deg); transform: rotate(273.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="78"]:after { -webkit-transform: rotate(277.2deg); -moz-transform: rotate(277.2deg); -ms-transform: rotate(277.2deg); -o-transform: rotate(277.2deg); transform: rotate(277.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="79"]:after { -webkit-transform: rotate(280.8deg); -moz-transform: rotate(280.8deg); -ms-transform: rotate(280.8deg); -o-transform: rotate(280.8deg); transform: rotate(280.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="80"]:after { -webkit-transform: rotate(284.4deg); -moz-transform: rotate(284.4deg); -ms-transform: rotate(284.4deg); -o-transform: rotate(284.4deg); transform: rotate(284.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="81"]:after { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -ms-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); }
.gauge-circle.large-120 .progression-circle[data-value="82"]:after { -webkit-transform: rotate(291.6deg); -moz-transform: rotate(291.6deg); -ms-transform: rotate(291.6deg); -o-transform: rotate(291.6deg); transform: rotate(291.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="83"]:after { -webkit-transform: rotate(295.2deg); -moz-transform: rotate(295.2deg); -ms-transform: rotate(295.2deg); -o-transform: rotate(295.2deg); transform: rotate(295.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="84"]:after { -webkit-transform: rotate(298.8deg); -moz-transform: rotate(298.8deg); -ms-transform: rotate(298.8deg); -o-transform: rotate(298.8deg); transform: rotate(298.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="85"]:after { -webkit-transform: rotate(302.4deg); -moz-transform: rotate(302.4deg); -ms-transform: rotate(302.4deg); -o-transform: rotate(302.4deg); transform: rotate(302.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="86"]:after { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -ms-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); }
.gauge-circle.large-120 .progression-circle[data-value="87"]:after { -webkit-transform: rotate(309.6deg); -moz-transform: rotate(309.6deg); -ms-transform: rotate(309.6deg); -o-transform: rotate(309.6deg); transform: rotate(309.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="88"]:after { -webkit-transform: rotate(313.2deg); -moz-transform: rotate(313.2deg); -ms-transform: rotate(313.2deg); -o-transform: rotate(313.2deg); transform: rotate(313.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="89"]:after { -webkit-transform: rotate(316.8deg); -moz-transform: rotate(316.8deg); -ms-transform: rotate(316.8deg); -o-transform: rotate(316.8deg); transform: rotate(316.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="90"]:after { -webkit-transform: rotate(320.4deg); -moz-transform: rotate(320.4deg); -ms-transform: rotate(320.4deg); -o-transform: rotate(320.4deg); transform: rotate(320.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="91"]:after { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); }
.gauge-circle.large-120 .progression-circle[data-value="92"]:after { -webkit-transform: rotate(327.6deg); -moz-transform: rotate(327.6deg); -ms-transform: rotate(327.6deg); -o-transform: rotate(327.6deg); transform: rotate(327.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="93"]:after { -webkit-transform: rotate(331.2deg); -moz-transform: rotate(331.2deg); -ms-transform: rotate(331.2deg); -o-transform: rotate(331.2deg); transform: rotate(331.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="94"]:after { -webkit-transform: rotate(334.8deg); -moz-transform: rotate(334.8deg); -ms-transform: rotate(334.8deg); -o-transform: rotate(334.8deg); transform: rotate(334.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="95"]:after { -webkit-transform: rotate(338.4deg); -moz-transform: rotate(338.4deg); -ms-transform: rotate(338.4deg); -o-transform: rotate(338.4deg); transform: rotate(338.4deg); }
.gauge-circle.large-120 .progression-circle[data-value="96"]:after { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); }
.gauge-circle.large-120 .progression-circle[data-value="97"]:after { -webkit-transform: rotate(345.6deg); -moz-transform: rotate(345.6deg); -ms-transform: rotate(345.6deg); -o-transform: rotate(345.6deg); transform: rotate(345.6deg); }
.gauge-circle.large-120 .progression-circle[data-value="98"]:after { -webkit-transform: rotate(349.2deg); -moz-transform: rotate(349.2deg); -ms-transform: rotate(349.2deg); -o-transform: rotate(349.2deg); transform: rotate(349.2deg); }
.gauge-circle.large-120 .progression-circle[data-value="99"]:after { -webkit-transform: rotate(352.8deg); -moz-transform: rotate(352.8deg); -ms-transform: rotate(352.8deg); -o-transform: rotate(352.8deg); transform: rotate(352.8deg); }
.gauge-circle.large-120 .progression-circle[data-value="100"]:after { -webkit-transform: rotate(356.4deg); -moz-transform: rotate(356.4deg); -ms-transform: rotate(356.4deg); -o-transform: rotate(356.4deg); transform: rotate(356.4deg); }


.gauge-horizontal {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2;
}

.gauge-horizontal .gauge-display {
	display: block;
	height: 3px;
}

/* Award Badge *******************/

ul.award-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 170px);
	grid-gap: 15px;
	justify-content: center;
}

.award-list li {
	display: flex;
	padding: 25px 15px;
	flex-direction: column;
	align-items: center;
}

.award-list li:hover a {
	text-decoration: none;
}

.award-badge {
	width: 140px;
	height: 140px;
	background-image: url(../image/award-badge.png);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.award-badge.received {
	background-image: url(../image/award-badge-received.png);
}

.award-badge .award-badge-icon {
	font-size: 40px;
}

.award-badge .gauge-circle-container {
	position: absolute;
	left: 50%;
	width: 106px;
	height: 106px;
	transform: translate(-53px, 0);
}

.award-badge .gauge-circle {
	height: 106px;
	line-height: 100px;
}

.award-badge .gauge-value {
	width: 100px;
	height: 100px;
	line-height: 100px;
}

.award-badge .gauge-progression {
	width: 108px;
	height: 108px;
	top: -1px;
	left: -1px;
}

.award-badge .gauge-circle .gauge-value {
	border-width: 3px;
}

.award-badge.received .semi-circle {
	display: none;
}

.award-badge .progression-circle .semi-circle + .semi-circle {
	left: 1px;
}

.award-badge .semi-circle span:before {
	border-width: 4px;
}

.award-badge-name {
	margin-top: 10px;
	font-weight: bold;
	text-align: center;
}

.award-popup {
	width: 460px;
	height: 540px;
	max-width: 100%;
	max-height: 100%;
}

@media (max-width: 768px) {
	
	ul.award-list {
		grid-template-columns: repeat(auto-fill, 140px);
		grid-gap: 15px;
	}

	.award-list li {
		padding: 10px;
	}
	
	.award-list .award-badge {
		transform: scale(0.8);
	}
	
	.award-badge-name {
		margin-top: 0;
	}
	
	.award-popup {
		width: 100%;
		height: 100%;
	}
}

/* Toolbar *******************/

.toolbar ul {
	display: inline-block;
	height: 48px;
	font-size: 0;
	white-space: nowrap;
	vertical-align: top;
}

.toolbar ul li {
	display: inline-block;
	height: 48px;
	box-sizing: border-box;
	padding: 8px 0;
}

.toolbar ul li {
	margin-left: 10px;
}

.toolbar ul a .fa {
	display: inline-block;
	width: 32px;
	text-align: center;
	line-height: 32px;
	font-size: 20px;
	padding-right: 0;
	border-radius: 50%;
}

.toolbar .toolbar-toggle-btn + ul {
	max-width: 0;
	width: auto;
	overflow: hidden;
	-webkit-transition: max-width 1s; /* Safari */
	transition: max-width 1s;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

.toolbar .toolbar-toggle-btn.open + ul {
	max-width: 400px;
}

/* Badge *******************/

.badge-container {
	display: inline-block;
	position: relative;
	padding: 0;
	white-space: nowrap;
}

.badge-container i {
	padding-right: 0;
}

.badge {
	display: inline-block;
	min-width: 24px;
	height: 24px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	z-index: 1;
	position: relative;
	padding: 0 2px;
	text-align: center;
	
	border-width: 2px;
	border-style: solid;
	box-sizing: border-box;
}

.badge-container .badge {
	top: -2px;
	margin-left: -4px;
}

/* Ranking Badge *******************/

.ranking-badge-container {
	display: flex;
	justify-content: center;
}

.ranking-badge-container li + li {
	margin-left: 10px;
}


/* Keyword *******************/

.keyword {
	display: inline-block;
	width: auto;
	max-width: inherit;
	margin-bottom: 10px;
}

.keyword > span,
.keyword input:not(disabled) + span {
	display: inline-block;
	padding: 2px 14px;
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 400;
	box-sizing: border-box;
}

.keyword input,
.keyword input:not(disabled) + span:before {
	display: none;
}

.keyword input:not(disabled) + span {
	cursor: pointer;
}

/* indicator *******************/

.indicator {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	display: inline-block;
}

.indicator + .indicator {
	margin-left: 30px;
}

.indicator i {
	font-size: 20px;
}

.indicator i + span {
	padding-left: 4px;
}

@media (max-width: 768px) {

	.indicator {
		font-size: 18px;
	}
	
	.indicator + .indicator {
		margin-left: 15px;
	}
	
	.indicator i {
		font-size: 24px;
	}
}

/* Banner *******************/

.banner-container {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
}

.banner {
	display: block;
	width: 200px;
	position: relative;
	left: -100px;
	top: 0;
	padding: 26px 0 10px;
	transform-origin: 100px 0;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	text-align: center;
	font-size: 10px;
	line-height: 12px;
}

.list-mode .banner {
	padding: 22px 0 6px;
}

.banner.small {
	padding: 15px 0 5px;
}

@media (max-width: 768px) {

	.banner {
		padding: 22px 0 6px;
	}
}

/* Icon Container *******************/

.icon-container {
	width: 64px;
	min-width: 64px;
	line-height: 64px;
	height: 64px;
	font-size: 24px;
	text-align: center;
	margin-right: 20px;
}

/* Star Ranking *******************/

.star-ranking {
	display: inline-block;
	font-size: 0;
}

.star-ranking:not(.disabled) {
	cursor: pointer;
}

.star-ranking i {
	font-size: 18px;
	padding-right: 5px;
}

.star-ranking.small i {
	font-size: 12px;
	padding-right: 4px;
}

/* Radio Ranking *******************/

.radio-ranking-container {
	display: inline-block;
	position: relative;
}

label + .radio-ranking-container {
	margin-top: 10px;
}

.radio-ranking {
	display: flex;
	flex-direction: row-reverse;
	position: relative;
}

.radio-ranking input[type=radio] {
	display: none;
}

.radio-ranking label {
	width: auto;
	max-width: inherit;
}

.radio-ranking input[type=radio] + label {
	display: inline-flex;
	width: 30px;
	min-height: 24px;
	box-sizing: border-box;
	cursor: pointer;
	padding-right: 6px;
}

.radio-ranking input[type=radio] + label:before,
.radio-ranking input[type=radio] + label ~ label:before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	position: relative;
	left: 0;
	top: 50%;
	border-width: 2px;
	border-style: solid;
	margin-top: -12px;
	border-radius: 50%;
}

.radio-ranking input[type=radio]:checked + label:after,
.radio-ranking input[type=radio]:checked + label ~ label:after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	position: relative;
	margin-left: -16px;
	top: 50%;
	margin-top: -4px;
	border-radius: 50%;
}

.radio-ranking input[type=radio] + label span {
	position: absolute;
	left: 100%;
	transform: translate(0px, -50%);
	top: 50%;
	margin-left: 5px;
	display: none;
	white-space: nowrap;
}

.radio-ranking input[type=radio]:checked + label span {
	display: inline-block;
}

.radio-ranking:hover input[type=radio] + label span {
	display: none;
}

.radio-ranking input[type=radio]:hover + label span {
	display: inline-block !important;
}

/* Counter *******************/

.counter {
	display: inline-block;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

.counter span {
	display: block;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 1px;
}

@media (max-width: 768px) {
	
	.counter.inline-phone {
		display: inline-flex;
		align-items: center;
	}
	
	.counter.inline-phone span {
		display: inline-block;
		margin-left: 10px;
	}
}

/* Stats Graphic *******************/

.stats-graphic {
	display: block;
	width: 400px;
	height: 360px;
	position: relative;
	margin: 0 auto 40px;
}

.stats-graphic.small {
	width: 360px;
	height: 200px;
	transform: scale(0.5);
}

.stats-graphic .cover,
.stats-graphic .stats-graphic-section {
	position: absolute;
	display: block;
	width: 160px;
	height: 160px;
	left: 50%;
	top: 50%;
	margin-left: -80px;
	margin-top: -80px;
}

.stats-graphic .third-circle {
	content: '';
	display: block;
	width: 200px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
	margin-top: -200px;
	-webkit-transform-origin: center left;
	-moz-transform-origin: center left;
	-ms-transform-origin: center left;
	-o-transform-origin: center left;
	transform-origin: center left;
}

.stats-graphic .third-circle span {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	-webkit-transform-origin: center left;
	-moz-transform-origin: center left;
	-ms-transform-origin: center left;
	-o-transform-origin: center left;
	transform-origin: center left;
	-webkit-transform: rotate(300deg);
	-moz-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	-o-transform: rotate(300deg);
	transform: rotate(300deg);
}

.stats-graphic .stats-graphic-section-2 .third-circle {
	-webkit-transform: rotate(240deg);
	-moz-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	-o-transform: rotate(240deg);
	transform: rotate(240deg);
}

.stats-graphic .stats-graphic-section-3 .third-circle {
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	transform: rotate(120deg);
}

.stats-graphic .third-circle span:before {
	content: '';
	display: block;
	width: 160px;
	height: 160px;
	position: absolute;
	top: 50%;
	left: -80px;
	border-radius: 50%;
	margin-top: -80px;
	opacity: 0.7;
	box-shadow: 0 0 0 0 transparent;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-ms-transition: 500ms;
	-o-transition: 500ms;
	transition: 500ms;
}

.stats-graphic .cover {
	z-index: 1;
	border-radius: 50%;
	text-align: center;
	line-height: 160px;
	font-size: 60px;
	box-shadow: 0 0 24px 0 rgba(51, 106, 152, 0.54);
}

.stats-text-section {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 250px;
}

.stats-text-section-1 {
	margin-left: 160px;
	margin-top: -110px;
}

.stats-text-section-2 {
	right: 380px;
	margin-top: -70px;
	text-align: right;
	left: auto;
}

.stats-text-section-3 {
	margin-top: 185px;
	margin-left: 0;
}

.stats-graphic [data-value="0"] + .stats-text-section-1,
.stats-graphic [data-value="1"] + .stats-text-section-1,
.stats-graphic [data-value="2"] + .stats-text-section-1,
.stats-graphic [data-value="3"] + .stats-text-section-1,
.stats-graphic [data-value="4"] + .stats-text-section-1,
.stats-graphic [data-value="5"] + .stats-text-section-1 { margin-left: 130px; margin-top: -100px; }
.stats-graphic [data-value="0"] + .stats-text-section-2,
.stats-graphic [data-value="1"] + .stats-text-section-2,
.stats-graphic [data-value="2"] + .stats-text-section-2,
.stats-graphic [data-value="3"] + .stats-text-section-2,
.stats-graphic [data-value="4"] + .stats-text-section-2,
.stats-graphic [data-value="5"] + .stats-text-section-2 { right: 345px; margin-top: -70px; }
.stats-graphic [data-value="0"] + .stats-text-section-3,
.stats-graphic [data-value="1"] + .stats-text-section-3,
.stats-graphic [data-value="2"] + .stats-text-section-3,
.stats-graphic [data-value="3"] + .stats-text-section-3,
.stats-graphic [data-value="4"] + .stats-text-section-3,
.stats-graphic [data-value="5"] + .stats-text-section-3 { margin-top: 150px; margin-left: 0; }

.stats-text-section i {
	float: left;
	line-height: 28px;
	font-size: 14px;
}

.stats-text-section-2 i {
	float: right;
	margin-left: 0;
}

.stats-text-section span {
	display: block;
	line-height: 24px;
}

.stats-text-section .value {
	display: inline-block;
	font-size: 48px;
	font-weight: 300;
	position: absolute;
	left: 10px;
	width: 60px;
	text-align: center;
}

.stats-text-section .value + span {
	font-size: 18px;
	padding-left: 70px;
}

.stats-text-section-2 .value {
	left: auto;
	right: 10px;
}

.stats-text-section-2 .value + span {
	padding-left: 0;
	padding-right: 70px;
}

@media (max-width: 768px) {
	
	.stats-graphic {
		margin-bottom: 180px;
	}
	
	.stats-graphic.small {
		width: 400px;
		height: 360px;
		transform: scale(1);
		margin-bottom: 220px;
	}
	
	.stats-text-section {
		margin: 0 !important;
		text-align: left;
		width: 100%;
		position: relative;
		top: 380px !important;
		left: 0 !important;
		display: flex;
		align-items: center;
		line-height: 48px;
	}
	
	.stats-text-section i {
		float: none;
		padding-right: 10px;
		position: relative;
		bottom: -5px;
	}
	
	.stats-text-section .value {
		left: 0;
		right: auto;
		position: static;
		width: auto;
		text-align: left;
		padding-right: 15px;
		line-height: inherit;
	}
	
	.stats-text-section .value + span {
		padding-left: 0;
		padding-right: 0;
		position: relative;
		bottom: -5px;
	}
}

@media (max-width: 480px) {
	
	.stats-graphic {
		margin-top: 20px;
		margin-bottom: 170px;
		width: 300px;
		height: 300px;
	}
	
	.stats-text-section {
		top: 320px !important;
	}
}

/* Category Course And Community Preview *******************/

.preview {
	display: block;
	position: relative;
}

.preview > a {
	display: block;
	width: 100%;
}

.preview:hover,
.preview:hover a {
	text-decoration: none;
}

.preview .inner > p {
	font-weight: 400;
}

.preview.category-preview::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Course Choices *******************/

.course-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-gap: 25px;
	justify-items: center;
}

*::-ms-backdrop, .course-choices { /* IE11 */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.course-choice {
	width: 220px;
}

*::-ms-backdrop, .course-choice { /* IE11 */
	margin: 10px;
}

.course-choice label {
	cursor: pointer;
}

.course-choice .img-container:before {
	content: '';
	border-width: 1px;
	border-style: solid;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.course-choice img {
	display: block;
}

.course-choice .course-choice-content {
	padding: 10px 10px 10px 44px;
	position: relative;
}

.course-choice input[type=checkbox] {
	display: none;
}

.course-choice input[type=checkbox] ~ .course-choice-content i {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	position: absolute;
	left: 10px;
	top: 12px;
	border-width: 2px;
	border-style: solid;
	text-align: center;
	line-height: 20px;
}

/* Card Mode *******************/

.card-mode {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-gap: 25px;
	align-items: stretch;
	list-style-type: none;
}

*::-ms-backdrop, .card-mode { /* IE11 */
	display: flex !important;
	justify-content: space-around !important;
	flex-wrap: wrap;
}

*::-ms-backdrop, .card-mode li, /* IE11 */
*::-ms-backdrop, .card-mode > a {
	width: 280px;
	min-width: 280px;
}

*::-ms-backdrop, .card-mode .course-preview { /* IE11 */
	max-width: 300px;
	margin-bottom: 20px;
}

.card-mode.small {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card-mode.small .course-preview {
	max-width: 220px;
}

.card-mode .gauge-horizontal .gauge-value {
	right: 12px;
	bottom: 20px;
}

*::-ms-backdrop, .card-mode .category-preview { /* IE11 */
	margin-bottom: 20px;
}

.card-mode .preview.category-preview img,
.card-mode .preview.course-preview img,
.card-mode .preview.community-preview img {
	display: block;
	width: 100%;
}

.card-mode .preview.category-preview .inner {
	position: absolute;
	bottom: 24px;
	left: 60px;
	right: 24px;
}

.card-mode .preview.category-preview .fa {
	position: absolute;
	right: 100%;
	width: 40px;
	font-size: 18px;
	text-align: right;
	padding-right: 20px;
}

.card-mode .preview.course-preview,
.card-mode .preview.community-preview {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.card-mode .preview.default-course-preview {
	border-radius: 6px;
	overflow: hidden;
	height: 100%;
}

*::-ms-backdrop, .card-mode .preview.default-course-preview { /* IE11 */
	height: auto;
}

.card-mode .preview.default-course-preview .banner-container .banner {
	text-transform: uppercase;
	font-size: 12px;
	line-height: 14px;
}

.card-mode .preview.default-course-preview:hover .banner-container {
	display: none;
}

.card-mode .preview.default-course-preview .banner-container .banner {
	text-transform: uppercase;
	font-size: 12px;
	line-height: 14px;
}

.card-mode .preview.default-course-preview > div.inner {
	padding: 20px;
}

.card-mode .preview.default-course-preview .list-preview-content {
	display: none;
}

.card-mode .preview.default-course-preview .metadata {
	align-items: center;
	justify-content: space-between;
}

.preview.default-course-preview .subject-type {
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 13px;
}

.preview.default-course-preview .subject-type i,
.preview.default-course-preview .subject-type img {
	font-size: 18px;
	padding-right: 10px;
}

*::-ms-backdrop, .preview.default-course-preview .subject-type img { /* IE11 */
	width: auto;
}

.card-mode .preview.default-course-preview .optional-action i {
	font-size: 24px;
	padding-right: 0;
}

.hearted i {
	display: block;
	position: relative;
}

.hearted i span {
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.hearted > i::before {
	font-size: 28px;
}

.hearted.selected span i {
	display: flex;
	align-items: center;
}

.hearted.selected span i::before {
	font-size: 12px;
}

.preview.default-course-preview h3 {
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 0;
}

.card-mode .preview.default-course-preview h3 {
	height: 72px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.preview.default-course-preview h3::before {
	display: none;
}

.preview.default-course-preview .other-data {
	display: flex;
	margin-top: 10px;
}

.preview.default-course-preview .other-data i {
	font-size: 14px;
	padding-right: 10px;
}

.preview.default-course-preview .other-data span:not(:last-child) {
	margin-right: 40px;
}

.card-mode .preview.default-course-preview .preview-hover {
	display: none;
}

.card-mode .preview.default-course-preview:hover .preview-hover {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: transparent;
}

.card-mode .preview.default-course-preview:hover .preview-hover p {
	line-height: 24px;
}

.card-mode .preview.default-course-preview:hover .preview-hover b i {
	padding-right: 10px;
}

.card-mode .preview.default-course-preview:hover .preview-hover .cta-container {
	display: block;
	position: absolute;
	right: 0;
	bottom: 30px;
}

.card-mode .preview.course-preview .image-container,
.card-mode .preview.community-preview .image-container {
	width: 100%;
	position: relative;
}

.card-mode .preview.course-preview:hover .image-container::before,
.card-mode .preview.community-preview:hover .image-container::before,
.card-mode .preview.course-preview .counter-container,
.card-mode .preview.community-preview .counter-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.card-mode .preview.course-preview:hover .image-container::before,
.card-mode .preview.community-preview:hover .image-container::before {
	content: '';
	display: block;
}

.card-mode .preview.course-preview .counter-container,
.card-mode .preview.community-preview .counter-container {
	display: none;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	grid-gap: 5px;
	align-items: center;
	padding: 20px 40px;
}

.card-mode .preview.course-preview .image-container.stats .counter-container {
	padding: 20px 74px 44px 10px;
	align-items: flex-end;
}

.card-mode .preview.course-preview .gauge-circle-container {
	display: none;
}

.card-mode .preview.course-preview:hover .counter-container,
.card-mode .preview.community-preview:hover .counter-container {
	display: flex;
	display: grid;
}

*::-ms-backdrop, .card-mode .preview.course-preview:hover .counter-container { /* IE11 */
	justify-content: center;
}


.card-mode .preview.course-preview .cta-container,
.card-mode .preview.community-preview .cta-container {
	display: none;
}

.card-mode .preview.course-preview .cta-stats {
	display: block;
	position: absolute;
	right: 12px;
	bottom: 44px;
	z-index: 2;
	pointer-events: none;
	border-width: 1px;
	border-style: solid;
	width: 48px;
	height: 48px;
	line-height: 48px;
	font-size: 24px;
	border-radius: 100%;
	text-align: center;
	box-sizing: border-box;
}

.card-mode .preview.course-preview .cta-action,
.card-mode .preview.community-preview .cta-action {
	display: block;
	position: absolute;
	right: 12px;
	bottom: -24px;
	z-index: 2;
}

.card-mode .preview.course-preview .cta-action span {
	display: none;
}

.card-mode .preview.course-preview:hover .cta-container,
.card-mode .preview.community-preview:hover .cta-container {
	display: block;
}

.card-mode .preview.course-preview .inner,
.card-mode .preview.community-preview .inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.card-mode .preview.course-preview .inner {
	padding: 12px 24px 18px;
}

.card-mode .preview.community-preview .inner {
	padding: 12px 24px 0;
}

.card-mode .preview.course-preview .inner > span {
	display: inline-block;
}

.card-mode .preview.course-preview .inner > .course-categories {
	display: none;
}

.card-mode .preview.course-preview .inner > p,
.card-mode .preview.community-preview .inner > p {
	display: inline-block;
	margin-top: 12px;
	margin-bottom: 12px;
}

.card-mode .preview.course-preview .inner > h5,
.card-mode .preview.community-preview .inner > h5,
.card-mode .preview.course-preview .inner > span,
.card-mode .preview.community-preview .inner > span {
	padding-right: 48px;
}

.card-mode .preview.course-preview .inner > span,
.card-mode .preview.community-preview .inner > span {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
	box-sizing: border-box;
}

.card-mode .preview.course-preview p,
.card-mode .preview.community-preview p {
	height: 54px;
	height: calc(18px * 3); /* 3 Lines */
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 18px;
}

.card-mode .preview.community-preview .users-container {
	display: grid;
	grid-template-columns: repeat(6, 16.6667%);
	padding: 0 24px 18px;
	grid-gap: 4px 0;
	width: 100%;
	box-sizing: border-box;
}

.card-mode .preview.community-preview .users-container > a,
.card-mode .preview.community-preview .users-container > span,
.card-mode .preview.community-preview .users-container .more {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}

*::-ms-backdrop, .card-mode .preview.community-preview .users-container > span {
	display: inline-block;
}

*::-ms-backdrop, .card-mode .preview.community-preview .users-container .more {
	display: inline-block;
	width: 36px;
	height: 36px;
}

.card-mode .preview.community-preview .users-container .more > span {
	margin: auto;
	box-sizing: border-box;
	border-style: solid;
	border-width: 2px;
	font-size: 12px;
	font-weight: 500;
	line-height: 100%;
	align-items: center;
	justify-content: center;
}

.card-mode .preview.default-course-preview .add-button-container {
	position: absolute;
	top: 30px;
	right: 0;
}

.card-mode .preview.default-course-preview .add-button-container .cta-container {
	display: block;
}

@media (max-width: 1024px) {
	
	.card-mode.small {
		grid-template-columns: repeat(auto-fill, 220px);
	}
	
	.card-mode.small .preview.course-preview .inner {
		padding: 12px;
	}
	
	.preview.default-course-preview .other-data span:not(:last-child) {
		margin-right: 20px;
	}
}

@media (max-width: 768px) {
	
	.card-mode {
		grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
		justify-content: center;
	}
	
	.card-mode.three-col-container {
		display: flex;
	}
	
	.card-mode.three-col-container .user-preview + .user-preview {
		margin-top: 20px;
	}
	
	.card-mode .preview.default-course-preview h3 {
		height: auto;
	}
}

/* List Mode *******************/

.list-mode .gauge-horizontal .gauge-value {
	right: 12px;
	bottom: 12px;
}

.list-mode > li + li,
.list-mode > .preview + .preview {
	margin-top: 10px;
}

.list-mode .preview.category-preview {
	display: flex;
}

.list-mode .preview.category-preview img,
.list-mode .preview.category-preview::before {
	display: block;
	width: 100px;
}

.list-mode .preview.category-preview img {
	max-width: inherit;
}

.list-mode .preview.category-preview::before {
	right: auto;
}

.list-mode .preview.category-preview .inner {
	padding: 10px 20px;
	overflow: hidden;
}

.list-mode .preview.category-preview .fa {
	position: absolute;
	width: 100px;
	text-align: center;
	left: 0;
	font-size: 18px;
	padding-top: 20px;
}

.list-mode .preview.course-preview {
	display: flex;
}

.list-mode .preview.course-preview p,
.list-mode .preview.course-preview .gauge-horizontal,
.list-mode .preview.course-preview .counter-container,
.list-mode .preview.course-preview .cta-stats {
	display: none;
}

.list-mode .preview.course-preview img,
.list-mode .preview.course-preview::before {
	display: block;
	width: 64px;
	height: 64px;
	max-width: inherit;
}

.list-mode .preview.course-preview::before {
	right: auto;
}

.list-mode .preview.course-preview .cta-container {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 25%;
	padding-right: 20px;
	box-sizing: border-box;
}

.list-mode .preview.course-preview .gauge-circle-container {
	width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-mode .preview.course-preview .inner {
	width: calc(75% - 164px);
	padding: 10px 20px;
	position: relative;
}

.list-mode .preview.course-preview.progression-preview .inner {
	padding: 0 20px 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.list-mode .preview.course-preview .inner .star-ranking-container {
	position: absolute;
	width: 100px;
	right: -100px;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.list-mode .preview .inner h5,
.list-mode .preview .inner span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
	max-width: 100%;
}

.list-mode .preview.default-course-preview {
	border-radius: 6px;
	overflow: hidden;
}

.card-mode .preview.default-course-preview.hoverless:hover .image-container:before,
.card-mode .preview.default-course-preview.hoverless:hover .preview-hover {
	display: none;
}

.card-mode .preview.default-course-preview.hoverless:hover .banner-container {
	display: block;
}

.list-mode .preview.default-course-preview .banner-container {
	top: 12px;
	left: 12px;
	border-top-left-radius: 4px;
}

.list-mode .preview.default-course-preview .banner-container .banner {
	text-transform: uppercase;
	font-size: 10px;
	line-height: 12px;
}

.list-mode .preview.default-course-preview .image-container {
	position: relative;
	width: 128px;
	min-width: 128px;
	margin: 12px;
}

.list-mode .preview.default-course-preview .image-container img {
	width: auto;
	height: auto;
	max-width: 100%;
	border-radius: 4px;
	overflow: hidden;
}

.list-mode .preview.default-course-preview > div.inner {
	width: 100%;
	padding: 20px 24px 20px 10px;
}

.list-mode .preview.default-course-preview .inner span {
	display: inline;
	width: auto;
}

.list-mode .preview.default-course-preview .preview-hover {
	width: 100% !important;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.list-mode .preview.default-course-preview .preview-hover *,
.list-mode .preview.default-course-preview .card-preview-content {
	display: none;
}

.list-mode .preview.default-course-preview .list-preview-content {
	display: flex;
	align-items: center;
}

.list-mode .preview.default-course-preview .list-preview-content .data-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.list-mode .preview.default-course-preview h3 {
	width: 100%;
	margin-top: 5px;
	padding-bottom: 5px;
}

.list-mode .preview.default-course-preview .data {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.list-mode .preview.course-preview.default-course-preview .metadata {
	display: flex;
	align-items: center;
	width: 100%;
}

.list-mode .preview.default-course-preview .other-data {
	margin-top: 0;
}

.list-mode .preview.default-course-preview .subject-type {
	display: inline-flex;
	margin-right: 20px;
}

.list-mode .preview.default-course-preview .subject-type img {
	display: inline-block;
	width: auto !important;
	height: auto !important;
}

.list-mode .preview.default-course-preview .inner .star-ranking-container {
	position: relative;
	right: 0;
	display: block;
}

.list-mode .preview.default-course-preview > div.inner .cta-container {
	width: 48px;
	display: flex;
	align-items: center;
	padding-right: 0;
	position: static;
	margin: 0 20px;
}

.list-mode .preview.default-course-preview > div.inner .cta-action {
	overflow: visible;
}

.list-mode .preview.default-course-preview > div.inner .optional-action {
	margin: 0 20px;
}

.list-mode .preview.default-course-preview .optional-action i {
	font-size: 24px;
	padding-right: 0;
}

.list-mode .preview.default-course-preview .add-button-container {
	width: 200px;
}

@media (max-width: 1024px) {

	.list-mode .preview.default-course-preview .data-container .hashtag,
	.list-mode .preview.default-course-preview .data-container h3 {
		padding-right: 40px;
		box-sizing: border-box;
	}
	
	.list-mode .preview.course-preview .inner .star-ranking-container {
		width: auto;
		white-space: nowrap;
	}
	
	.list-mode .preview.course-preview .inner .subject-type {
		margin-right: 0;
	}

	.list-mode .preview.default-course-preview > div.inner .cta-container,
	.list-mode .preview.default-course-preview > div.inner .add-button-container .cta-action span {
		display: none;
	}
	
	.list-mode .preview.default-course-preview > div.inner .optional-action {
		position: absolute;
		top: 20px;
		right: 0;
	}
	
	.list-mode .preview.default-course-preview > div.inner .add-button-container {
		width: auto;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	
	.list-mode .preview.default-course-preview > div.inner .add-button-container .cta-container {
		display: block;
		margin: 0;
	}
}

@media (max-width: 768px) {
	
	.list-mode .preview.course-preview:not(.progression-preview) img,
	.list-mode .preview.course-preview:not(.progression-preview)::before {
		width: 48px;
		height: 48px;
	}
	
	.list-mode .preview.course-preview .cta-container {
		display: none;
	}
	
	.list-mode .preview.course-preview .inner,
	.list-mode .preview.course-preview.progression-preview .inner {
		width: calc(100% - 48px);
		display: flex;
		flex-wrap: wrap;
		padding: 12px;
	}
	
	.list-mode .preview.course-preview .inner h5 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.list-mode .preview.course-preview .inner span {
		display: inline-block;
		width: calc(100% - 100px);
	}
	
	.list-mode .preview.course-preview .inner .star-ranking-container {
		position: static;
		display: flex;
		display: inline-flex;
		text-align: right;
		justify-content: flex-end;
		align-items: flex-end;
	}
	
	.list-mode .preview:not(.category-preview) .inner h5 {
		overflow: inherit;
		text-overflow: inherit;
		white-space: inherit;
	}
	
	.list-mode .preview .inner h5,
	.list-mode .preview .inner span {
		line-height: 18px;
	}
	
	.list-mode .preview.course-preview .gauge-circle-container {
		display: none;
	}
	
	.list-mode .preview.course-preview .gauge-horizontal {
		display: block;
	}
	
	.list-mode .preview.default-course-preview > div.inner {
		padding: 15px 24px 20px 10px;
	}
	
	.list-mode .preview.default-course-preview .list-preview-content {
		align-items: flex-start;
		flex-wrap: wrap;
	}
	
	.list-mode .preview.default-course-preview .banner-container {
		width: 48px;
		height: 48px;
	}
	
	.list-mode .preview.default-course-preview .banner {
		padding: 18px 0 5px;
	}
	
	.list-mode .preview.default-course-preview .image-container {
		width: 64px;
		min-width: 64px;
		max-width: 64px;
		height: 48px;
	}
	
	.list-mode .preview.default-course-preview .image-container img {
		width: 100%;
		height: 48px;
	}
	
	.list-mode .preview.default-course-preview .inner span {
		width: auto;
	}
	
	.list-mode .preview.default-course-preview .data-container {
		min-height: 52px;
	}
	
	.list-mode .preview.default-course-preview .data {
		margin-top: 5px;
		justify-content: flex-start;
	}
	
	.list-mode .preview.course-preview.default-course-preview .metadata {
		width: auto;
	}
	
	.list-mode .preview.default-course-preview .list-data-phone {
		width: calc(100% + 86px);
		margin-left: -86px;
		flex-direction: column;
	}
}

/* User Preview *******************/

.user-preview span {
	font-size: 14px;
	font-weight: 500;
}

.card-mode .user-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 20px 40px;
	font-weight: 300;
}

.card-mode .user-preview h4 {
	margin-top: 10px;
}

.card-mode .user-preview .image-container img {
	display: inline-block;
	width: 84px;
	max-width: 84px;
	height: 84px;
	border-radius: 50%;
}

.card-mode .user-preview hr {
	width: 30px;
	border: none;
	height: 1px;
	margin: 20px 0;
}

.list-mode {
	list-style-type: none;
}

.list-mode .user-preview {
	display: flex;
	padding: 12px 24px 12px 12px;
	font-weight: 300;
	justify-content: space-between;
	align-items: stretch;
}

.list-mode .user-preview .image-container {
	margin-right: 12px;
}

.list-mode .user-preview .image-container img {
	display: inline-block;
	width: 64px;
	max-width: 64px;
	height: 64px;
	border-radius: 50%;
}

.list-mode .user-preview hr {
	display: none;
}

.list-mode .user-preview .profile-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.list-mode .user-preview .profile-container,
.list-mode .user-preview .profile-container span,
.list-mode .user-preview span {
	width: 100%;
	text-align: left;
}

.list-mode .user-preview span {
	width: 100%;
	text-align: center;
	align-self: center;
}

@media (max-width: 768px) {

	.list-mode .user-preview {
		flex-wrap: wrap;
		min-height: 68px;
	}

	.list-mode .user-preview .image-container {
		display: block;
		position: absolute;
		left: 12px;
		top: 16px;
	}
	
	.list-mode .user-preview .image-container img {
		width: 36px;
		max-width: 36px;
		height: 36px;
	}
	
	.list-mode .user-preview .profile-container,
	.list-mode .user-preview > span {
		width: 100%;
		box-sizing: border-box;
		padding-left: 48px;
		text-align: left;
	}
}

/* Subject Preview *******************/

.subject-preview {
	display: flex;
}

.subject-highlights {
	width: 15%;
	max-width: 120px;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 25px 20px;
	justify-content: space-between;
	box-sizing: border-box;
}

.subject-highlights .category {
	font-size: 46px;
	margin-bottom: 20px;
}

.subject-data {
	display: flex;
	padding: 25px;
	flex-wrap: wrap;
	align-items: center;
	width: 85%;
	box-sizing: border-box;
}

.subject-data h5,
.subject-data .indicator-container {
	width: 100%;
}

.subject-data h5 {
	margin-bottom: 10px;
}

.subject-data .image-container {
	display: inherit;
	margin-right: 20px;
}

.subject-data .image-container img {
	margin-right: 10px;
}

.subject-data .subject-author {
	display: inline-block;
	line-height: 36px;
}

.subject-data .keyword {
	margin-right: 5px;
	margin-bottom: 5px;
}

.subject-data .indicator-container {
	white-space: nowrap;
	margin-top: 20px;
}

@media (max-width: 768px) {
	
	.subject-highlights {
		padding: 20px 10px;
	}
	
	.subject-highlights .category {
		font-size: 36px;
	}
	
	.subject-data {
		padding: 20px 15px;
	}
	
	.subject-data .image-container {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	
	.subject-data .image-container span {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Lesson Preview *******************/

.lesson-preview-container {
	display: flex;
	flex-wrap: wrap;
}

.lesson-preview-container > li:nth-child(n + 3) {
	margin-top: 15px;
}

.lesson-preview .lesson-preview-content {
	width: calc(100% - 84px);
	padding-right: 20px;
	box-sizing: border-box;
}

.lesson-preview .lesson-preview-content h4 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 768px) {

	.lesson-preview-container > li + li {
		margin-top: 15px;
	}
}

/* Accordion *******************/

.accordion {
	padding: 25px 50px;
	position: relative;
}

.accordion-simple > a {
	text-decoration: none;
}

.accordion-simple > a i {
	font-size: 14px;
}

.accordion-button {
	background-image: none;
	background-color: transparent;
	border: none;
	outline: none;
	position: absolute;
	top: 25px;
	left: 15px;
	cursor: pointer;
}

.accordion-button .fa {
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	box-sizing: border-box;
	font-size: 12px;
	border-style: solid;
	border-width: 1px;
	border-radius: 50%;
	text-align: center;
}

.accordion-simple.active .fa-chevron-right,
.accordion.active .fa-chevron-right {
	display: none;
}

.accordion-simple:not(.active) .fa-chevron-down,
.accordion:not(.active) .fa-chevron-down,
.accordion-simple:not(.active) .accordion-panel,
.accordion:not(.active) .accordion-panel {
	display: none;
}

/* Comments *******************/

.comment-author {
	display: flex;
	flex-wrap: wrap;
}

.comment-author h4 {
	margin-right: 10px;
}

.comment-author .author-status {
	margin-right: 20px;
}

.comment-author i {
	line-height: 24px;
}

.comments > .comment-author {
	align-items: center;
	padding-bottom: 20px;
}

.comments > .comment-author img {
	margin-right: 20px;
}

.comment-list {
	display: block;
	width: 100%;
	margin-top: 20px;
}

.comment-list .comment {
	border-top-width: 2px;
	border-top-style: solid;
	margin-top: 10px;
	padding-top: 20px;
	padding-left: 58px;
	box-sizing: border-box;
}

.comment-list > .comment:last-child {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	padding-bottom: 10px;
}

.comment-list .comment-author {
	align-items: flex-start;
	padding-left: 0;
	box-sizing: border-box;
	position: relative;
}

.comment-list .comment-author img {
	position: absolute;
	left: -58px;
}

.comment-list .star-ranking-container {
	width: 100%;
}

.comment-list p {
	box-sizing: border-box;
	padding-bottom: 10px;
}

.comment-list ul {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.new-comment-block {
	padding: 20px;
	position: relative;
}

.comment-author + .new-comment-block::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	position: absolute;
	left: 20px;
	top: -10px;
}

.new-comment-block .star-ranking-container {
	margin-bottom: 10px;
}

.author-status {
	padding: 2px 6px;
}

@media (max-width: 768px) {
	
	.comments .comment-author img {
		margin-right: 10px;
	}
	
	.comment-list .comment {
		padding-left: 46px;
	}
	
	.comment-list .comment-author img {
		left: -46px;
	}
	
	.comment-list .comment-author h4 {
		width: 100%;
		margin-right: 0;
		margin-bottom: 5px;
	}
	
	.comment-list p {
		padding-top: 10px;
	}
	
	.comment-list ul {
		position: relative;
		left: -46px;
		width: calc(100% + 46px);
	}
	
	.comment-author + .new-comment-block::before {
		left: 8px;
	}
}

/* Tables *******************/

.table-container table {
	white-space: nowrap;
	border-collapse: collapse;
	width: 100%;
}

table.complex th,
table.complex td {
	padding: 18px 24px 12px 0;
}

table.simplified th,
table.simplified td {
	padding: 15px 24px 15px 0;
}

table.complex tbody tr:not(:first-child),
table.simplified tbody tr:not(:first-child) {
	border-top-width: 1px;
	border-top-style: solid;
}

table.complex thead th:not(.checkbox-container):first-child,
table.complex td:not(.checkbox-container):first-child {
	padding: 24px;
}

table.complex thead th.checkbox-container:first-child,
table.complex td.checkbox-container:first-child {
	padding: 24px 10px 24px 24px;
}

table.complex thead th.checkbox-container:first-child .input-option-container,
table.complex td.checkbox-container:first-child .input-option-container {
	display: block;
	height: 24px;
	width: 24px;
	margin-top: 4px;
}

table.complex thead {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

table.complex tbody td:first-child {
	box-sizing: border-box;
	border-left-width: 3px;
	border-left-style: solid;
	font-size: 18px;
	font-family: Neuton;
	font-weight: Normal;
}

table.complex tbody td:first-child a {
	text-decoration: none;
	cursor: pointer;
}

table.complex tbody td:not(:first-child) {
	font-size: 12px;
}

table.complex tbody td:not(:first-child).pending,
table.complex tbody td:not(:first-child).valid,
table.complex tbody td:not(:first-child).attention,
table.complex tbody td:not(:first-child).error {
	font-weight: bold;
}

table.simplified td {
	font-weight: normal;
}

table.simplified td:first-child {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

.table-list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.table-list li {
	display: flex;
	padding: 5px 20px;
}

.table-list .header {
	padding: 10px 20px;
	background-color: transparent;
}

.table-list li:not(:first-child) {
	margin-top: 4px;
}

.table-list-col {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	padding: 5px 0;
	position: relative;
}

.table-list-col:not(:first-child) {
	padding-left: 10px;
}

.table-list-col:not(:last-child) {
	padding-right: 10px;
}

.table-list .input-option-container input[type=checkbox] + span span:not(:empty) {
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
}

.table-list .input-option-container img {
	display: inline-block;
	margin-right: 10px;
}

.table-list .input-option-container span {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
}

.table-list-col > i {
	font-size: 24px;
	margin-right: 10px;
}

.table-list li.selected {
	position: relative;
}

.table-list li.selected:before {
	content: '';
	display: block;
	width: 2px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}

.table-list li.highlighted .table-list-col-chevron,
.table-list li.active .table-list-col-chevron {
	display: inline-block;
}

.table-list li.active {
	z-index: 2;
}

.table-list-col-chevron {
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	right: -5px;
}

@media (max-width: 1024px) {
	
	.table-list .header {
		display: none;
	}
	
	.table-list li {
		width: 100%;
		padding: 0;
		flex-direction: column;
	}
	
	.table-list li:not(:first-child) {
		margin-top: 0;
	}
	
	.table-list li:nth-child(n + 3) {
		margin-top: 20px;
	}
	
	.table-list .table-list-col {
		width: 100% !important;
		padding: 10px;
		border-bottom-width: 2px;
		border-bottom-style: solid;
	}
	
	.table-list .table-list-mobile-col {
		width: 30%;
		min-width: 120px;
	}

	.table-list-col-chevron {
		right: 10px;
	}
}

@media (max-width: 768px) {
	
	table.complex tbody td:first-child {
		font-size: 14px;
	}
}

/* Timeline Table *******************/

.timeline-table-accordion-button {
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	padding: 20px 20px 20px 50px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	cursor: pointer;
}

.timeline-table-accordion-button h5 {
	font-weight: bold;
}

.timeline-table-accordion-button .chevron-right,
.timeline-table-accordion-button .chevron-down {
	position: absolute;
	top: 18px;
	left: 12px;
	font-size: 20px;
}

.timeline-table-accordion-button.active .chevron-right,
.timeline-table-accordion-button:not(.active) .chevron-down {
	display: none;
}

.timeline-table-wrapper {
	padding-left: 20px;
	border-top-width: 2px;
	border-top-style: solid;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	box-sizing: border-box;
}


.timeline-table-accordion-button + .timeline-table-wrapper {
	border-top: none;
	border-bottom: none;
}

.timeline-table-wrapper table {
	border-top-width: 2px;
	border-top-style: solid;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	position: relative;
	top: -2px;
	margin-bottom: -4px;
}

.timeline-table-accordion-button:not(.active) + .timeline-table-wrapper,
.timeline-table-accordion-button:not(.active) + .timeline-table {
	display: none;
}

.table-container .timeline-table tr {
	width: calc(100% - 20px);
}

.timeline-table tr:first-child > td {
	padding-top: 30px;
}

.timeline-table tr:last-child > td {
	padding-bottom: 30px;
}

.timeline-table tr td:first-child {
	border-left-width: 1px;
	border-left-style: solid;
}

.timeline-table td {
	padding: 15px 0 15px 30px;
	position: relative;
}

.timeline-table .indentation {
	margin-left: 50px;
	position: relative;
}


.timeline-table .status {
	position: absolute;
	left: -10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
	border-width: 2px;
	border-style: solid;
	box-sizing: border-box;
}

.timeline-table .status-current::before {
	content: '';
	display: block;
	width: 1px;
	height: 21px;
	position: absolute;
	bottom: 18px;
	left: 7px;
	border-left-width: 1px;
	border-left-style: solid;
}

.timeline-table td .content {
	width: 100%;
	display: block;
	overflow: hidden;
	max-width: 100%;
}

.timeline-table td b {
	display: inline-block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.timeline-table td p {
	white-space: normal;
	font-weight: normal;
}

/* Popup *******************/

.popup-container {
	display: none;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
}

.popup-container.visible {
	display: block;
	position: absolute;
}

*::-ms-backdrop, .popup-container.visible { /* IE11 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-background {
	content: '';
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	z-index: 1;
}

.popup {
	position: fixed;
	left: 4rem;
	top: 2rem;
	right: 4rem;
	bottom: 4rem;
	max-width: 960px;
	width: 100%;
	margin: auto;
	z-index: 2;
}

.popup > .close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: block;
	width: 21px;
	height: 21px;
	overflow: hidden;
}

.popup > .close-btn::before,
.popup > .close-btn::after {
	content: '';
	display: block;
	position: absolute;
	width: 21px;
	height: 21px;
	box-sizing: border-box;
	transform: rotate(45deg);
}

.popup > .close-btn::before {
	border-right-style: solid;
	border-right-width: 1px;
	right: 7px;
	bottom: 7px;
}

.popup > .close-btn::after {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	right: -7px;
	bottom: 7px;
}

.popup-sidebar,
.popup-content {
	height: 100%;
	padding: 50px 20px 20px;
	box-sizing: border-box;
	position: relative;
}

.popup-sidebar > .custom-scrollbar,
.popup-content > .custom-scrollbar {
	max-height: 100%;
	padding: 0 20px 20px;
	box-sizing: border-box;
}

.popup-sidebar i {
	display: inline-block;
	width: 10px;
	padding-right: 4px;
}

.popup-sidebar ul ul {
	display: block;
	padding-left: 14px;
}

.popup-content h1 {
	text-align: center;
	margin-bottom: 20px;
}

.popup-content h1::before {
	left: 50%;
	margin-left: -24px;
}

.popup-content .cta-container a {
	margin-right: 20px;
}

.popup.small {
	max-width: 600px;
	top: 6rem;
	bottom: 8rem;
	padding: 60px 40px 40px;
}

*::-ms-backdrop, .popup.small { /* IE11 */
	left: 50%;
	margin-left: -340px;
}

@media (max-width: 1024px) {

	*::-ms-backdrop, .popup { /* IE11 */
		left: 2rem;
		right: 2rem;
	}
}

@media (max-width: 768px) {
	
	body .popup,
	body .popup.small {
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		max-width: 100%;
		padding: 0;
		margin-left: auto;
	}
	
	body .popup.small .popup-content {
		padding: 50px 20px 20px;
	}
	
	.popup.visible-content .popup-sidebar,
	.popup:not(.visible-content) .popup-sidebar + .popup-content {
		display: none;
	}
}

/* Advanced Search *******************/

.advanced-search-container {
	position: relative;
}

.advanced-search {
	display: none;
	padding: 20px;
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.advanced-search.visible {
	display: block;
}

/* Notification *******************/

.notification {
	display: flex;
	align-items: center;
	font-style: italic;
}

.notification .notification-icon {
	margin-right: 20px;
}

.notification .cta-contextual {
	margin-left: 20px;
}

/* Category Menu *******************/

.category-menu-container {
	display: inline-flex;
	position: relative;
}

.category-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	margin-top: 10px;
}

.category-menu::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	position: absolute;
	top: -8px;
	left: 20px;
	z-index: 1;
}

.category-menu::after {
	content: '';
	display: block;
	width: 250px;
	height: 10px;
	position: absolute;
	top: -10px;
}

.category-menu ul {
	display: none;
	width: 250px;
	position: absolute;
	top: 0;
	padding: 10px 0;
	left: 100%;
}

.category-menu > ul {
	left: 0;
}

.category-menu-container:hover .category-menu,
.category-menu-container.active .category-menu,
.category-menu-container:hover .category-menu > ul,
.category-menu-container.active .category-menu > ul,
.category-menu li:hover > ul,
.category-menu li.active > ul {
	display: block;
}

.category-menu li {
	display: flex;
	width: 100%;
	padding: 0 20px 0 15px;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 32px;
}

.category-menu li a {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.category-menu li > i {
	position: absolute;
	line-height: 32px;
	right: 10px;
}

@media (max-width: 768px) {
	
	.category-menu li:hover,
	.category-menu li.active {
		flex-wrap: wrap;
	}
	
	.category-menu li:hover > ul,
	.category-menu li.active > ul {
		position: relative;
		left: -15px;
		min-width: 250px;
		width: 250px;
	}
}

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

.main-container > section.inner,
.main-container .colored-row-container > section {
	max-width: 1024px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* Header *******************/

header {
	width: 100%;
	display: flex;
	min-height: 160px;
}

.header-content {
	width: calc(100% - 280px);
	display: flex;
	align-content: space-between;
	flex-wrap: wrap;
	white-space: nowrap;
}

header .logged-in-profile-container {
	display: flex;
	align-items: center;
	width: 280px;
	padding: 25px 80px 25px 30px;
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
	flex-direction: column;
}

header .logged-out-profile-container {
	display: flex;
	width: 280px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

header .logged-out-profile-container .cta-contextual {
	position: relative;
	left: -10px;
}

header .logged-out-profile-container .cta-contextual + .cta-contextual {
	margin-left: 10px;
}

header .logged-in-profile-container img {
	display: block;
}

header .logged-in-profile-container .profile-pic {
	display: block;
	max-width: 64px;
	margin: 0 auto;
	padding-bottom: 10px;
}

header .logged-in-profile {
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}

header .logged-in-profile > span {
	display: block;
	text-align: center;
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

header .logged-in-profile > .name {
	font-size: 20px;
	font-weight: 300;
}

header .logged-in-profile > .score {
	font-size: 14px;
	font-weight: bold;
}

header .logged-in-profile-container .profile-pic:hover ~ .logged-in-profile .nav-submenu,
header .logged-in-profile-container .logged-in-profile:hover .nav-submenu {
	display: block;
}

header .logged-in-profile-container .logged-in-profile:hover {
	cursor: pointer;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu {
	margin-top: -10px;
	text-transform: uppercase;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu .flag-select {
	width: 100%;
	height: auto;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu .flag-select .select-list {
	position: relative;
}

header .profile-reminders {
	position: absolute;
	top: 25px;
	right: 20px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

header .profile-reminders a + a {
	margin-top: 15px;
}

header .manager-logo-container {
	display: inline-block;
	padding: 20px 25px;
	max-width:300px;
}

header .header-search-container {
	display: none;
}

.main-nav {
	display: inline-block;
	padding-top: 25px;
	line-height: 30px;
}

.main-nav ul {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: normal;
	font-stretch: condensed;
	flex-wrap: wrap;
}

.main-nav ul > li {
	position: relative;
}

.main-nav a:hover {
	text-decoration: none;
}

.main-nav > ul > li + li {
	margin-left: 20px;
}

.main-nav > ul > li:hover .nav-submenu {
	display: block;
}

.main-nav a.selected .fa {
	position: relative;
}

.main-nav > ul > li > a.selected .fa:after {
	content: '';
	position: absolute;
	height: 1px;
	width: 24px;
	bottom: -12px;
	right: -24px;
}

.header-content .optional-nav > ul > li + li,
.header-content .optional-nav span + i,
.header-content .optional-nav i + span {
	margin-left: 10px;
}

.header-content .optional-nav i {
	font-size: 13px;
}

.header-content .optional-nav .header-select {
	position: relative;
}

.header-content .optional-nav .header-select a {
	text-decoration: none;
}

.header-content .optional-nav .header-select:hover .nav-submenu {
	display: block;
}

header .header-select {
	cursor: pointer;
}

.header-row {
	display: flex;
	width: 100%;
	position: relative;
}

.side-nav-btn {
	display: flex;
	width: 84px;
	height: 48px;
	float: right;
	cursor: pointer;
	text-align: center;
	flex-direction: column;
	justify-content: center;
}

.side-nav-btn .fa {
	font-size: 24px;
	padding-right: 0;
}

.side-nav-btn span {
	display: block;
}

header h1 {
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-size: 36px;
	font-weight: 300;
	display: block;
	clear: both;
	padding-left: 25px;
	padding-right: 60px;
}

header h1:before {
	content: none;
	position: relative;
}

header h1 > .fa {
	padding-right: 12px;
}

header .help {
	border-width: 1px;
	border-style: solid;
	border-radius: 50%;
	line-height: 20px;
	height: 22px;
	width: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	position: absolute;
	right: 20px;
	top: 16px;
}

header .help .fa {
	padding-right: 0;
}

@media (max-width: 1024px) {
	
	.header-content {
		width: calc(100% - 260px);
	}
	
	header .logged-in-profile-container {
		width: 260px;
		padding: 25px;
	}
	
	header .logged-in-profile-container img {
		width: 48px;
		height: 48px;
		min-width: 48px;
	}
	
	header .logged-in-profile-container .profile-pic .badge-container {
		min-width: 48px;
	}
	
	header .logged-in-profile-container .profile-pic .badge {
		position: absolute;
		top: auto;
		bottom: -4px;
		margin-left: -10px;
		left: 48px;
	}
	
	header .logged-out-profile-container {
		width: 260px;
	}
}

@media (max-width: 768px) {
	
	header {
		min-height: auto;
	}
	
	.header-content {
		width: calc(100% - 80px);
	}
	
	header .logged-in-profile-container {
		width: 80px;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	
	header .logged-in-profile-container .profile-pic {
		font-size: 0;
		margin: 0 auto 0 5px;
		padding-bottom: 0;
	}
	
	header .logged-in-profile-container img {
		width: 36px;
		height: 36px;
		min-width: 36px;
		margin-bottom: 0;
	}
	
	header .logged-in-profile-container .profile-pic .badge {
		position: absolute;
		top: 2px;
		bottom: auto;
		margin-left: auto;
		left: 30px;
	}
	
	header .logged-out-profile-container {
		width: auto;
		padding: 0 20px;
	}
	
	header .logged-out-profile-container .cta-contextual {
		padding: 0;
		border: none;
	}
	
	header h1.page-title {
		line-height: 48px;
		font-size: 14px;
		padding-bottom: 0;
		padding-right: 0;
	}
	
	.side-nav-btn {
		width: 48px;
		height: 48px;
		font-size: 10px;
	}
	
	.side-nav-btn .fa {
		font-size: 18px;
	}
}

/* Nav Submenu *******************/

header .nav-submenu {
	display: none;
	position: absolute;
	padding: 10px 0;
	min-width: 180px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
	white-space: nowrap;
	z-index: 10;
	margin-top: 8px;
	margin-left: -60px;
	left: 50%;
	top: 100%;
	font-size: 12px;
	line-height: 30px;
}

header .nav-submenu::before {
	content: '';
	display: block;
	width: 100%; 
	height: 8px; 
	position: absolute;
	top: -8px;
}

header .nav-submenu::after {
	content: '';
	display: block;
	width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	position: absolute;
	top: -8px;
	left: 50px;
}

header .nav-submenu > li a {
	padding: 5px 20px;
	display: block;
	text-align: left;
	text-decoration: none;
}

/* Footer *******************/

footer {
	padding: 30px;
	font-size: 12px;
	line-height: 20px;
	display: flex;
	justify-content: space-between;
	display: grid;
	grid-column-gap: 20px;
	grid-template-columns: 4fr 3fr 230px;
}

*::-ms-backdrop, .footer-tagline { /* IE11 */
	max-width: 40%;
}

footer .footer-logo-container,
footer .col h5 {
	height: 60px;
}

footer .footer-logo-container,
footer .footer-tagline {
	grid-column-start: 1;
	grid-column-end: 2;
}

footer .social-media-col {
	grid-column-start: 2;
	grid-column-end: 3;
}

footer .newsletter-col {
	grid-column-start: 3;
	grid-column-end: 4;
}

footer .social-media-list {
	display: block;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
	padding-left: 20px;
	box-sizing: border-box;
}

footer .social-media-list li {
	display: block;
	width: 20px;
}

*::-ms-backdrop, footer .social-media-list li { /* IE11 */
	display: inline-block;
	width: 20px;
	margin-right: 5px;
}

footer .social-media-list i {
	font-size: 18px;
}

@media (max-width: 1024px) {
	
	*::-ms-backdrop, .footer-tagline { /* IE11 */
		max-width: 25%;
	}
}


@media (max-width: 768px) {
	
	footer {
		flex-direction: column;
		grid-column-gap: 0;
		grid-row-gap: 40px;
		grid-template-columns: 1fr;
	}

	*::-ms-backdrop, .footer-tagline { /* IE11 */
		max-width: 100%;
	}

	*::-ms-backdrop, footer > div { /* IE11 */
		display: block;
		width: 100%;
	}
	
	*::-ms-backdrop, footer > div + div { /* IE11 */
		margin-top: 20px !important;
	}

	footer .footer-logo-container,
	footer .col h5 {
		height: inherit;
	}
	
	footer .col h5 {
		margin-bottom: 20px;
	}
	
	footer .footer-logo-container,
	footer .footer-tagline,
	footer .col {
		grid-column-start: 1;
		grid-column-end: 2;
	}
	
	footer .footer-tagline {
		grid-row: 4;
	}
}

/* Side Nav *******************/

#sidebar-nav-container {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	pointer-events: none;
}

.open-side-menu #sidebar-nav-container {
	opacity: 1;
	pointer-events: inherit;
}

#sidebar-nav-container:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

#sidebar-nav-container .sidebar-nav {
	width: 60%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1001;
	padding-top: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	transform: translate(-100%, 0);
	transition: 200ms;
}

.open-side-menu #sidebar-nav-container .sidebar-nav {
	transform: translate(0, 0);
}

#sidebar-nav-container .sidebar-header {
	margin-bottom: 16px;
	padding: 0 0 10px 20px;
}

#sidebar-nav-container .sidebar-header a {
	display: inline-block;
}

#sidebar-nav-container .sidebar-header .fa {
	font-size: 14px;
	padding-right: 0;
}

#sidebar-nav-container .sidebar-header .close-btn {
	background-color: transparent !important;
	display: inline-block;
	padding: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	float: right;
	margin-right: 20px;
	margin-top: 5px;
	border-width: 1px;
	border-style: solid;
	text-align: center;
}

#sidebar-nav-container .sidebar-nav-list li {
	display: block;
}

#sidebar-nav-container .sidebar-nav-list li > a {
	display: block;
	position: relative;
	padding: 10px 40px 10px 60px;
}

#sidebar-nav-container .sidebar-nav-list li:not(.active) > a:not(.selected) {
	font-weight: 300;
}

#sidebar-nav-container .sidebar-nav-list a:hover {
	text-decoration: none;
}

#sidebar-nav-container .sidebar-nav-list .selected {
	text-transform: uppercase;
}

#sidebar-nav-container .sidebar-nav-list .fa {
	position: absolute;
	margin-left: -35px;
}

#sidebar-nav-container .sidebar-nav-list .fa-chevron-left {
	display: inline-block;
	font-size: 14px;
	line-height: 20px;
}

#sidebar-nav-container .sidebar-nav-list .fa-chevron-left,
#sidebar-nav-container .sidebar-nav-list ul {
	display: none;
}

#sidebar-nav-container.open-side-submenu .sidebar-header,
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li:not(.active),
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active .fa {
	display: none;
}

#sidebar-nav-container.open-side-submenu .sidebar-nav-list ul,
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active > a > .fa-chevron-left,
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active ul .fa:not(.fa-chevron-left) {
	display: block;
}

#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active > a {
	text-transform: uppercase;
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	
	#sidebar-nav-container .sidebar-nav {
		width: 85%;
	}
}

/* Side Profile *******************/

#sidebar-profile-container {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	pointer-events: none;
}

.open-profile-menu #sidebar-profile-container {
	opacity: 1;
	pointer-events: inherit;
}

#sidebar-profile-container:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

#sidebar-profile-container .sidebar-profile {
	width: 60%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	transform: translate(100%, 0);
	transition: 200ms;
}

.open-profile-menu #sidebar-profile-container .sidebar-profile {
	transform: translate(0, 0);
}

#sidebar-profile-container .close-btn {
	background-color: transparent !important;
	display: inline-block;
	padding: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	position: absolute;
	left: 20px;
	margin-top: 5px;
	border-width: 1px;
	border-style: solid;
	text-align: center;
}

#sidebar-profile-container .close-btn .fa {
	font-size: 14px;
	padding-right: 0;
}

#sidebar-profile-container .profile-pic {
	display: block;
	width: 64px;
	margin: 0 auto 10px;
}

#sidebar-profile-container .logged-in-profile {
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}

#sidebar-profile-container .logged-in-profile > span {
	display: block;
	text-align: center;
	width: 100%;
	white-space: normal;
}

#sidebar-profile-container .logged-in-profile > .name {
	font-size: 18px;
	font-weight: 300;
}

#sidebar-profile-container .logged-in-profile > .score {
	font-size: 14px;
	font-weight: bold;
}

#sidebar-profile-container .profile-reminders {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	max-width: 200px;
	margin: 40px auto 0;
	line-height: 24px;
}

#sidebar-profile-container .nav-submenu {
	width: 100%;
	margin-top: 40px;
}

#sidebar-profile-container .nav-submenu a {
	display: block;
	padding: 10px 0;
	font-weight: 300;
	text-decoration: none;
}

#sidebar-profile-container .nav-submenu .fa {
	float: right;
	padding-right: 0;
	font-size: 14px;
}

#sidebar-profile-container .nav-submenu .custom-select {
	width: calc(100% + 40px);
	max-width: none;
	margin-left: -20px;
	height: auto;
}

#sidebar-profile-container .nav-submenu .custom-select .fa {
	right: 20px;
}

#sidebar-profile-container .nav-submenu .custom-select .select-list {
	position: relative;
}

#sidebar-profile-container .nav-submenu .custom-select .select-list .placeholder {
	font-size: 14px;
	font-weight: 300;
	padding: 2px 20px;
}

#sidebar-profile-container .nav-submenu .custom-select .select-list ul li {
	padding: 6px 20px;
}

#sidebar-profile-container .nav-submenu .logout {
	margin-top: 60px;
}

/* Sidebar Column *******************/

.main-container.sidebar-column-display {
	display: grid;
	grid-template-columns: 1fr 1024px 1fr;
	overflow: hidden;
}

.main-container.sidebar-column-display .main-column {
	grid-column-start: 1;
	grid-column-end: 3;
	display: grid;
	grid-template-columns: 1fr 1024px;
}

.main-container.sidebar-column-display .main-column > section {
	grid-column-start: 2;
	grid-column-end: 3;
	max-width: 1024px;
	width: 100%;
	box-sizing: border-box;
}

.main-container.sidebar-column-display .sidebar-column-container {
	grid-column-start: 3;
	grid-column-end: 4;
	display: flex;
	justify-content: flex-end;
}

.main-container.sidebar-column-display .sidebar-column {
	width: 280px;
}

.main-container.sidebar-column-display .sidebar-column-content li {
	position: relative;
	display: flex;
	align-items: center;
}

.main-container.sidebar-column-display .sidebar-column-content li span {
	display: block;
}

@media (max-width: 1304px) {
	
	.main-container.sidebar-column-display {
		display: flex;
	}
	
	.main-container.sidebar-column-display .main-column {
		display: block;
		width: calc(100% - 280px);
	}
}

@media (max-width: 1024px) {
	
	.main-container.sidebar-column-display {
		flex-wrap: wrap;
	}
	
	.main-container.sidebar-column-display .main-column,
	.main-container.sidebar-column-display .sidebar-column-container,
	.main-container.sidebar-column-display .sidebar-column-container .sidebar-column {
		width: 100%;
	}
	
	.main-container.sidebar-column-display .sidebar-column {
		padding: 20px 30px;
	}
	
	.main-container.sidebar-column-display .sidebar-column-button {
		margin-bottom: 0;
	}
	
	.main-container.sidebar-column-display .sidebar-column:not(.active) .sidebar-column-button .fa-chevron-down,
	.main-container.sidebar-column-display .sidebar-column.active .sidebar-column-button .fa-chevron-up,
	.main-container.sidebar-column-display .sidebar-column:not(.active) .sidebar-column-content {
		display: none;
	}
	
	.main-container.sidebar-column-display .sidebar-column.active .sidebar-column-button {
		margin-bottom: 30px;
	}
}

@media (max-width: 768px) {
	
	.main-container.sidebar-column-display .sidebar-column-container .sidebar-column {
		padding: 20px;
	}
}

/* Leaderboard *******************/

.leaderboard {
	width: 100%;
}

.leaderboard li {
	position: relative;
	padding: 5px 30px;
	margin-left: -30px;
	width: calc(100% + 60px);
	box-sizing: border-box;
}

.leaderboard li + li {
	margin-top: 10px;
}

.leaderboard li > div {
	overflow: hidden;
}

.leaderboard .image-container {
	position: relative;
	margin-right: 10px;
	min-width: 48px;
}

.leaderboard .image-container span {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	font-size: 18px;
	line-height: 48px;
	font-weight: normal;
	text-align: center;
	font-weight: bold;
	box-sizing: border-box;
	border-radius: 50%;
}

.leaderboard span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.leaderboard li.selected:before {
	content: '';
	display: block;
	position: absolute;
	left: -20px;
	width: 0; 
	height: 0; 
	border-top: 29px solid transparent;
	border-bottom: 29px solid transparent; 
	border-right-width: 20px; 
	border-right-style: solid;
}

.leaderboard li.selected .image-container span {
	border-width: 2px;
	border-style: solid;
}

.leaderboard li.selected span {
	font-weight: bold;
}

@media (max-width: 768px) {
	
	.leaderboard .image-container {
		min-width: 36px;
	}

	.leaderboard .image-container span {
		line-height: 36px;
	}
}

/* Content Menu *******************/

.contextual-menu {
	height: 68px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
	box-sizing: border-box;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.contextual-menu ul {
	display: block;
	height: 68px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	box-sizing: border-box;
}

.contextual-menu > ul > li {
	display: inline-block;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
	height: 68px;
}

.contextual-menu > ul > li.selected {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.contextual-menu > ul > li .badge {
	margin-left: 10px;
}

.contextual-menu > .options > li .fa {
	padding-left: 10px;
}

.contextual-menu > ul > li > a,
.contextual-menu > ul > li > span {
	display: inline-block;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
	line-height: 68px;
}

.contextual-menu ul ul {
	display: none;
	z-index: 101;
}

.contextual-menu > ul > li:hover ul,
.contextual-menu > ul > li.hover ul {
	display: block;
	position: absolute;
	border-width: 1px;
	border-style: solid;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
}

.contextual-menu > ul > li li {
	display: block;
	padding: 0 20px;
	line-height: 48px;
	white-space: nowrap;
}

.contextual-menu > ul.options > li + li {
	margin-left: 2rem;
}

.contextual-menu > ul.options > li:last-child {
	margin-right: 2rem;
}

.contextual-menu > ul > li li a,
.contextual-menu > ul > li li span {
	text-decoration: none;
}

@media (max-width: 768px) {

	.contextual-menu > ul.options > li + li {
		margin-left: 10px;
	}
}}

/* Settings *******************/

.settings-container {
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
	max-width: 100%;
	width: 100%;
}

.settings-container.title-container h1,
.settings-container.title-container h2,
.settings-container.title-container h3,
.settings-container.title-container h4 {
	white-space: normal;
}

.settings {
	display: inline-flex;
	align-self: center;
	list-style-type: none;
	text-decoration: none;
}

.settings-container.title-container .settings {
	align-self: center;
}

.settings-container.title-container h3 + .settings {
	margin-bottom: 20px;
}

.settings > li .fa {
	padding: 0 10px;
}

.settings-container .settings {
	text-decoration: none;
	white-space: nowrap;
}

.settings-container .settings:hover span {
	text-decoration: underline;
}

@media (max-width: 768px) {
	
	.settings-container.title-container {
		flex-wrap: nowrap;
	}
	
	.settings-container.title-container .settings .card-mode-btn,
	.settings-container.title-container .settings .list-mode-btn {
		display: none;
	}
	
	.default-settings-container {
		display: flex;
		justify-content: space-between;
	}
	
	.default-settings-container.title-container .settings .card-mode-btn,
	.default-settings-container.title-container .settings .list-mode-btn {
		display: block;
	}
}

/* Filter Container *******************/

.filter-container {
	display: none;
	margin-top: -20px;
}

.filter-container.active {
	display: block;
}

.filter-container .filter-group {
	margin-bottom: 20px;
}

.filter-container .cta-container a + a {
	margin-left: 20px;
}

@media (max-width: 1024px) {
	
	.filter-container {
		margin-top: 10px;
	}
}

@media (max-width: 768px) {
	
	.filter-container {
		display: block;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		pointer-events: none;
		margin-top: 0;
	}
	
	.filter-container.active {
		opacity: 1;
		pointer-events: inherit;
	}
	
	.filter-container .filter-group {
		margin-bottom: 0;
	}
	
	.filter-container:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.filter-container .filter-content {
		width: 60%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		padding: 20px;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: hidden;
		transform: translate(100%, 0);
		transition: 200ms;
	}

	.filter-container.active .filter-content {
		transform: translate(0, 0);
	}
	
	.filter-container .filter-content .close-btn {
		display: inline-block;
		padding: 0;
		width: 24px;
		height: 24px;
		line-height: 24px;
		border-radius: 50%;
		float: right;
		margin-top: 5px;
		border-width: 1px;
		border-style: solid;
		text-align: center;
	}
	
	.filter-container .filter-content .close-btn .fa {
		font-size: 14px;
		padding-right: 0;
	}
	
	.filter-container h5,
	.filter-container .cta-container {
		margin-top: 20px;
	}
	
	.filter-container .cta-container a + a {
		display: table;
		margin-top: 20px;
		margin-left: 0;
	}
}

/* Breadcrumbs *******************/

.breadcrumbs-container {
	width: 100%;
	font-size: 0;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
}

.back-btn {
	border-style: solid;
	border-width: 1px;
	border-radius: 50%;
	display: inline-block;
	width: 36px;
	min-width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	margin-right: 20px;
}

.back-btn .fa {
	font-size: 25px;
	line-height: 36px;
	padding-right: 0;
}

.breadcrumbs {
	display: inline-flex;
	padding: 20px 0 0;
	line-height: 38px;
	list-style-type: none;
	font-size: 12px;
	white-space: nowrap;
	overflow-x: auto;
	align-items: center;
	box-sizing: border-box;
	box-sizing: border-box;
}

.back-btn + .breadcrumbs {
	width: calc(100% - 58px);
}

.breadcrumbs li:last-child {
	padding-right: 20px;
}

.breadcrumbs li:before {
	content: '';
	display: inline-block;
	position: relative;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-right: 5px;
	top: -1px;
}

.breadcrumbs li + li {
	margin-left: 12px;
}

.breadcrumbs li a {
	text-decoration: none;
}

@media (max-width: 768px) {
	
	.breadcrumbs-container {
		border-bottom: none;
		margin-bottom: 10px;
	}
	
	.breadcrumbs {
		width: 100%;
	}

	.breadcrumbs li:last-child {
		padding-right: 0;
	}
}

/* Stats Recap *******************/

.recap-data-container {
	display: flex;
	align-items: stretch;
}

.recap-data {
	display: inline-block;
	border-radius: 3px;
	width: 180px;
	border-width: 1px;
	border-style: solid;
}

.recap-data:hover {
	text-decoration: none;
}

.recap-data:not(:first-child) {
	margin-left: 10px;
}

.recap-data .value-number {
	font-size: 42px;
	font-weight: bolder;
}

@media (max-width: 1024px) {
	
	.recap-data {
		width: 140px;
		min-width: 140px;
		padding: 10px;
	}
	
	.recap-data .value-number {
		font-size: 24px;
	}
}

/* Column Nav Container *******************/

.column-nav-container {
	padding: 0 30px 20px;
}

@media (max-width: 768px) {
	
	.main-container section.column-nav-container {
		width: calc(100% - 40px);
		margin: 0 20px 0;
		padding: 0 0 20px;
	}
	
	.main-container section.column-nav-container .col-4 img {
		display: none;
	}
}

/**************************************************/
/* Pages */ 
/**************************************************/

/* Login *******************/

#login {
	display: flex;
}

#login .login-background {
	width: 50%;
	position: fixed;
	top: 0;
	left: 0;
	right: 50%;
	bottom: 0;
	background-position: center center;
	background-size: cover;
}

#login .login-content {
	margin-left: 50%;
	width: 50%;
	height: 100%;
	padding: 2rem 2rem 2rem 4rem;
	display: flex;
	flex-direction: column;
}

#login .flag-select {
	align-self: flex-end;
}

#login h1 {
	margin-bottom: 1rem;
}

#login form {
	margin-top: 4rem;
}

#login .cta-container {
	margin-top: 2rem;
	clear: both;
}

#login input[type="text"] {
	margin-bottom: 2rem;
}

#login input[type="password"] {
	margin-bottom: 1rem;
}

#login .forgotten-password {
	line-height: 36px;
}

#login footer {
	padding: 0;
	margin-top: 6rem;
	display: flex;
	align-items: flex-end;
}

#login footer ul {
	list-style-type: none;
	width: 50%;
}

#login footer .app-version {
	display: block;
	width: 50%;
	text-align: right;
	padding-left: 1rem;
	box-sizing: border-box;
}

@media (max-width: 1280px) and (min-width: 1025px) {
	
	#login .login-background {
		width: 40%;
	}

	#login .login-content {
		width: 60%;
		margin-left: 40%;
	}
}

@media (max-width: 1024px) and (min-width: 481px) {
	
	#login .login-background {
		width: 25%;
	}
	
	#login .login-content {
		width: 75%;
		margin-left: 25%;
	}
}

@media (max-width: 768px) {
	
	#login .login-content {
		padding: 2rem;
		position: relative;
	}
	
	#login .flag-select {
		position: absolute;
		top: 2rem;
		right: 2rem;
		z-index: 1;
		margin-top: 10px;
	}
	
	#login form {
		display: flex;
		flex-wrap: wrap;
	}
	
	#login .cta-container {
		width: 100%;
		text-align: center;
		order: 1;
	}
	
	#login .forgotten-password {
		display: block;
		order: 2;
		width: 100%;
		margin-top: 1rem;
		text-align: center;
	}
	
	#login footer {
		flex-wrap: wrap;
		margin-top: 4rem;
	}
	
	#login footer .footer-options {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 480px) {
	
	#login .login-background {
		display: none;
	}

	#login .login-content {
		width: 100%;
		margin-left: 0;
		padding: 2rem;
	}
}

/* Home *******************/

.home-col-left {
	box-sizing: border-box;
	padding: 50px 15px 0 30px;
}

.home-col-left > section,
.home-col-right > section {
	padding-bottom: 40px;
}

.home-col-left > section:not(:first-child),
.home-col-right > section:not(:first-child) {
	border-top-width: 1px;
	border-top-style: solid;
}

.home-col-left > section:not(:first-child) {
	margin-left: -30px;
	width: 100%;
	padding: 30px 15px 40px 30px;
}

.home-col-left h3 {
	width: 100%;
}

.main-presentation-container {
	background-size: cover;
	background-position: bottom right;
	background-repeat: no-repeat;
	padding: 100px 0 0;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}

.home-col-left .multi-col-presentation-container img {
	width: auto;
}

.home-col-left .multi-col-presentation-container .profile-highlights {
	justify-content: center;
}

.home-col-left .multi-col-presentation-container .courses-highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-col-left .multi-col-presentation-container .courses-highlight h5 {
	max-width: 320px;
	width: 100%;
}

.home-col-left .multi-col-presentation-container .courses-highlight p {
	font-size: 12px;
	max-width: 320px;
	width: 100%;
}

.home-col-left .cta-contextual + .cta-contextual {
	margin-left: 10px;
}

.home-col-left .multi-col-presentation-container .col-more {
	font-style: italic;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.home-col-right {
	box-sizing: border-box;
	border-left-width: 1px;
	border-left-style: solid;
	padding: 50px 30px 0 15px;
}

.home-col-right > section:not(:first-child) {
	margin-left: -15px;
	width: 100%;
	padding: 30px 30px 40px 15px;
}

.home-col-right .table-container {
	max-width: 100%;
}

.home-stats-graphic-container {
	overflow: hidden;
}

.news-item:not(:last-child) {
	margin-bottom: 10px;
}

.news-item {
	display: inline-flex;
	font-size: 12px;
}

.news-item .image-container {
	display: block;
	margin-right: 10px;
}

.news-item .image-container img {
	max-width: 60px;
}

.home-col-right .social-media-list {
	font-size: 0;
}

.home-col-right .social-media-list li {
	display: inline-block;
	margin-bottom: 5px;
}

.home-col-right .social-media-list li:not(:last-child) {
	margin-right: 5px;
}

.campagne-main-container {
	position: relative;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -50px;
	margin-right: -15px;
	width: calc(100% + 45px);
	left: -30px;
}

.campagne-main-container .image-container {
	background-size: cover;
	background-position: bottom left;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.campagne-main-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.campagne-main-content h2 {
	max-width: 75%;
	font-weight: bold;
	text-align: center;
}

*::-ms-backdrop, .campagne-main-content h2 { /* IE11 */
	margin-top: 20px;
}

.campagne-main-content p,
.campagne-main-content .cta-contextual {
	margin-top: 10px;
	max-width: 75%;
}

.campagne-main-content .cta-contextual {
	border: none !important;
}

.formation-decision-popup-active:before {
	content: '';
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.formation-decision-popup-container .popup {
	max-width: 600px;
	top: auto;
	left: auto;
	right: 2rem;
	bottom: 2rem;
	padding: 0;
}

.formation-decision-container {
	padding: 0;
}

.formation-decision-container section.inner {
	padding: 20px !important;
}

.formation-decision-container section + section {
	border-top-width: 1px;
	border-top-style: solid;
}

.formation-decision-container textarea,
.formation-decision-container label.above + p {
	margin-top: 5px;
}

.formation-decision-container .cta-container a {
	margin-right: 20px;
}

.formation-request-sidebar {
	width: calc(100% + 30px);
	margin-left: -30px;
	margin-top: -40px;
	margin-bottom: -40px;
	padding: 20px !important;
}

.preview.formation-summary {
	border-radius: 6px;
	overflow: hidden;
	max-width: 345px;
}

.preview.formation-summary .image-container:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.preview.formation-summary .image-container img {
	display: block;
	width: 100%;
}

.preview.formation-summary .card-preview-content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
}

.preview.formation-summary h3 {
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 0;
	max-width: 100%;
}

.preview.formation-summary h3:before {
	display: none;
}

.formation-request-label {
	margin-bottom: 5px;
}

.formation-request-data {
	margin-top: 5px;
}

.formation-request-main-col {
	padding-left: 30px !important;
}

.formation-request-main-col .formation-request-header {
	display: flex;
	justify-content: space-between;
}

.formation-request-main-col .formation-request-owner,
.formation-request-main-col .formation-request-session {
	display: flex;
	align-items: center;
}

.formation-request-main-col .formation-request-owner img,
.formation-request-main-col .formation-request-session img {
	margin-right: 10px;
}

.formation-request-main-col .formation-request-comment {
	position: relative;
}

.formation-request-main-col .formation-request-comment::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	position: absolute;
	left: 15px;
	top: -10px;
}

.formation-request-main-col .formation-request-comment p {
	line-height: 20px;
}

.formation-request-main-col .formation-request-decision {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.formation-request-main-col .formation-request-status {
	display: flex;
	align-items: center;
}

.formation-request-main-col .formation-request-status img {
	margin-right: 10px;
}

.formation-creation-chosen-collaborator ul {
	width: 100%;
}

.formation-creation-chosen-collaborator li {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	padding: 5px 10px 5px 0;
	justify-content: space-between;
}

.formation-choice-filters-container {
	display: flex;
	justify-content: space-between;
}

.formation-choice-filters-container .custom-select-container {
	max-width: 200px;
}

.formation-choice-filters-container > section {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
}

@media (max-width: 1280px) {
	
	.campagne-main-container .image-container {
		background-size: contain;
	}
}

@media (max-width: 1080px) {
	
	.home-more-news .card-mode {
		grid-template-columns: repeat(auto-fill, minmax(220px, 320px));
		justify-content: center;
		justify-items: center;
	}
}

@media (max-width: 1024px) {
	
	.home-col-left .main-presentation-container .col-container {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.home-col-left .main-presentation-container .cta-contextual + .cta-contextual {
		margin-left: 0;
		margin-top: 10px;
	}
	
	.home-col-left .course-presentation-container,
	.home-col-left .profile-presentation-container {
		flex-wrap: wrap;
	}
	
	.home-col-left .course-presentation-container [class*="col-"],
	.home-col-left .profile-presentation-container [class*="col-"] {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 20px;
	}
	
	.home-col-left .course-presentation-container .card-mode {
		grid-template-columns: repeat(1, minmax(220px, 320px));
		justify-content: center;
	}
	
	.home-col-left .course-presentation-container .card-mode .preview {
		max-width: 320px;
	}
	
	.formation-request-container {
		flex-wrap: wrap;
	}
	
	.formation-request-sidebar {
		width: 100% !important;
		order: 2;
		margin: 20px 0 0 0 !important;
		padding: 20px !important;
	}
	
	.formation-request-sidebar .preview.formation-summary {
		margin-top: 0;
	}
	
	.formation-request-main-col {
		width: 100% !important;
		padding: 0 !important;
	}
	
	.formation-request-main-col .simple-icon-container:first-child {
		margin-bottom: 10px;
	}
	
	.formation-request-main-col .formation-request-header {
		flex-wrap: wrap;
	}
	
	.formation-request-main-col .formation-request-owner,
	.formation-request-main-col .formation-request-session {
		width: 100%;
	}
	
	.formation-request-main-col .formation-request-session {
		margin-top: 20px;
	}
	
	.formation-request-main-col .formation-request-comment::before {
		display: none;
	}
	
	.formation-request-main-col .formation-request-decision {
		flex-wrap: wrap;
	}
	
	.formation-request-main-col .formation-request-decision > * {
		width: 100%;
	}
	
	.formation-request-main-col .formation-request-decision > * + * {
		margin-top: 20px;
	}
	
	.formation-choice-filters-container section {
		flex-wrap: wrap;
	}
}

@media (max-width: 768px) {
	
	.home-main-image img {
		width: 100%;
	}
	
	.home-more-news .card-mode {
		grid-template-columns: repeat(4, minmax(220px, 220px));
		justify-content: flex-start;
	}
	
	.home-more-news .home-col-left,
	.home-more-news .home-col-right {
		padding: 0;
	}
	
	.home-more-news .home-col-left > section,
	.home-more-news .home-col-right > section {
		box-sizing: border-box;
		padding: 20px;
		margin-left: 0;
	}
	
	.home-col-right {
		border-left-width: 0;
		border-top-width: 1px;
		border-top-style: solid;
	}
	
	.home-col-left .main-presentation-container .col-container {
		flex-direction: row;
	}
	
	.home-col-left .main-presentation-container .cta-contextual + .cta-contextual {
		margin-left: 10px;
		margin-top: 0;
	}
	
	.home-col-left .profile-presentation-container [class*="col-"] {
		width: 100%;
		padding-top: 20px;
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-bottom: 20px;
	}
	
	.campagne-main-container {
		width: 100%;
		margin-top: 0;
		margin-right: 0;
		left: 0;
	}
	
	.formation-decision-popup-container .popup {
		max-width: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
	}
	
	.formation-choice-container .cta-contextual,
	.formation-collaborator-choice-container .cta-contextual {
		width: 100%;
		height: 52px;
		box-sizing: border-box;
	}
	
	.formation-choice-container .col-container > .fl-container-inline-phone {
		text-align: right;
	}
	
	.formation-choice-cta-container {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 20px;
		box-sizing: border-box;
		text-align: center;
		z-index: 2;
	}
	
	.main-container .formation-choice-list {
		padding-bottom: 120px;
	}
	
	.formation-choice-filters-container .hearted-total { 
		position: absolute;
		top: 45px;
		right: 20px;
	}
	
	.formation-choice-filters-container > section .col-container { 
		display: flex;
		width: 100%;
	}
}

/* Courses *******************/

.course-highlights .counter-container {
	display: grid;
	grid-template-columns: repeat(7, minmax(100px, 1fr));
	align-items: center;
	justify-content: center;
	text-align: center;
}

.course-highlights .counter-container img {
	margin: 5px auto 0;
}

@media (max-width: 768px) {
	
	.course-highlights .counter-container {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	
	.course-highlights .counter-container > div {
		display: flex;
		width: 50%;
		flex-direction: column;
		justify-content: flex-start;
		margin: 20px 0;
	}
	
	.course-highlights .counter-container > div:nth-child(1) {
		order: 0;
	}
	
	.course-highlights .counter-container > div:nth-child(2) {
		order: 2;
	}
	
	.course-highlights .counter-container > div:nth-child(3) {
		order: 4;
	}
	
	.course-highlights .counter-container > div:nth-child(4) {
		order: 3;
	}
	
	.course-highlights .counter-container > div:nth-child(5) {
		order: 1;
	}
	
	.course-highlights .counter-container > div:nth-child(7) {
		order: 5;
	}
}

/* Parcours *******************/

.parcours-header-icon {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}

@media (max-width: 768px) {
	
	.parcours-header-icon {
		width: 52px;
		height: 52px;
	}
	
	.parcours-conditions {
		display: flex;
		align-items: center;
	}
	
	.parcours-header-icon + .parcours-conditions-description {
		padding-left: 10px;
	}
}

/* Catalogue *******************/

.catalogue-search-container {
	display: inline-flex;
	align-items: flex-end;
	margin-right: 20px;
}

.catalogue-search-container label {
	margin-left: 20px;
}

.catalogue-search-container .fa-search {
	font-size: 28px;
	bottom: 8px;
}

.catalogue-search-results {
	max-width: 964px;
	padding: 20px 0 10px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.default-catalogue-search-container {
	width: 100%;
}

.default-catalogue-search-container .select-group-container {
	display: inline-flex;
	width: 100%;
}

*::-ms-backdrop, .default-catalogue-search-container .select-group-container { /* IE11 */
	width: auto;
}

.select-group-container .select-list ul li.selected {
	font-weight: bold;
}

.default-catalogue-search-container label input {
	height: 46px;
	font-size: 16px;
	border-radius: 6px;
	padding-left: 10px;
	padding-right: 40px;
}

.default-catalogue-search-container label input::placeholder {
	font-size: 16px;
}

.default-catalogue-search-container label.input-icon > a {
	right: 5px;
}

.default-catalogue-search-container label .fa-search {
	font-size: 20px;
}

.default-catalogue-search-container .custom-select-container:not(:first-child) {
	margin-left: 20px;
}

.default-catalogue-search-container .settings {
	white-space: nowrap;
	margin-left: 20px;
}

.default-catalogue-search-container .settings:hover {
	text-decoration: none;
}

.default-catalogue-search-container .settings:hover span {
	text-decoration: underline;
}

.default-catalogue-search-container .hearted-total {
	margin-top: -5px;
	margin-left: 20px;
}

.hearted-total {
	display: inline-flex;
	align-self: center;
}

.hearted-total i {
	display: block;
	position: relative;
}

.hearted-total i span {
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hearted-total i::before {
	font-size: 36px;
}

.criteria-group-container:empty {
	display: none;
}

.selected-criteria {
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
}

.selected-criteria:not(:last-child) {
	margin-right: 10px;
}

.selected-criteria i {
	margin-left: 10px;
	font-size: 14px;
	cursor: pointer;
	position: relative;
}

.catalogue-requests-search-container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.catalogue-requests-search-container .settings-container {
	margin-left: 20px;
}

@media (max-width: 1024px) {
	
	.catalogue-search-results {
		margin: 0 30px;
		width: auto;
	}
	
	.catalogue-requests-search-container {
		flex-wrap: wrap;
	}
	
	.catalogue-requests-search-filters {
		width: 100%;
		margin-top: 20px;
	}
	
	.catalogue-requests-search-filters {
		width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 768px) {
	
	.default-catalogue-search-container {
		flex-wrap: wrap;
		position: relative;
	}
	
	.default-catalogue-search-container .select-group-container {
		padding-right: 50px;
	}
	
	.default-catalogue-search-container > .input-icon {
		margin-top: 20px;
		margin-left: 0;
		width: calc(100% - 150px);
	}
	
	.default-catalogue-search-container > .settings {
		margin-top: 15px;
	}
	
	.default-catalogue-search-container .hearted-total {
		position: absolute;
		top: 0;
		right: 0;
	}
}

/* Profile *******************/

.profile-highlights {
	position: relative;
	display: flex;
	align-items: center;
	padding: 20px 30px 40px;
}

.profile-highlights::before {
	content: '';
	display: block;
	position: absolute;
	left: -1000px;
	top: -1000px;
	right: -1000px;
	bottom: 0;
	z-index: -1;
}

.profile-highlights .profile-preview-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: -20px;
}

.profile-highlights .profile-preview-container h2 {
	margin-top: 20px;
	text-align: center;
}

.profile-highlights .profile-highlight {
	width: 136px;
	height: 136px;
	border-style: solid;
	border-width: 4px;
	border-radius: 50%;
	display: flex;
	align-content: center;
	text-align: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-left: -20px;
	padding: 0 15px;
	box-sizing: border-box;
	font-size: 18px;
}

.profile-highlights.small .profile-highlight {
	width: 80px;
	height: 80px;
	min-width: 80px;
	align-self: flex-start;
	margin-top: 20px;
	margin-left: -40px;
	font-size: 12px;
}

.profile-highlights .profile-highlight span {
	display: block;
	width: 100%;
	font-size: 36px;
}

.profile-highlights.small .profile-highlight span {
	font-size: 20px;
}

.profile-highlights .profile-options {
	width: 100%;
	max-width: 220px;
	position: absolute;
	top: 20px;
	right: 30px;
}

.profile-password-container {
	display: flex;
	align-items: center;
	padding: 20px;
	white-space: none;
}

.profile-password-container label {
	width: inherit;
}

.profile-password-container label + a {
	margin-left: 20px;
}

.profile-feed li + li {
	margin-top: 25px;
}

.profile-feed i {
	display: block;
	width: 36px;
	text-align: center;
	margin-right: 10px;
}

@media (max-width: 768px) {
	
	.profile-highlights {
		flex-wrap: wrap;
		justify-content: center;
		padding: 20px 20px 40px;
	}
	
	.profile-highlights .profile-preview-container {
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	
	.profile-highlights .profile-highlight {
		width: 84px;
		height: 84px;
		font-size: 12px;
		position: relative;
		left: 16px;
	}
	
	.profile-highlights .profile-highlight span {
		font-size: 16px;
	}
	
	.profile-highlights .profile-options {
		position: static;
		width: 100%;
		max-width: inherit;
		margin-top: 20px;
	}
}

/* Community *******************/

.community-subject-header .counter + .counter {
	margin-left: 20px;
}

.community-subject-header-participants {
	display: flex;
	align-items: center;
}

.community-subject-header-participants ul {
	display: inline-flex;
}

.community-subject-header-participants li {
	margin-right: 10px;
}

.community-subjects-container {
	max-width: 1024px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.community-subjects-filters {
	border-right-width: 2px;
	border-right-style: solid;
	padding: 20px 30px;
}

.community-subjects-filters .filter-container {
	display: block;
	margin-top: 0;
}

.community-subjects-filters .keyword-list {
	margin-left: 35px;
}

.main-container .community-subjects-container.col-container .community-subjects-filters + .community-subjects {
	padding: 20px 30px;
}

.community-subjects-list li + li {
	margin-top: 20px;
}

.community-subject-author {
	text-align: center;
}

.community-subject-appreciation .indicator {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}

.community-subject ul {
	padding-left: 20px;
}

@media (max-width: 768px) {
	
	.community-subject-header .counter-container {
		margin-left: 58px;
		margin-bottom: 20px;
	}
	
	.main-container .community-subjects-container.col-container .community-subjects-filters {
		padding: 20px;
	}
	
	.community-subject-header-participants .cta-action.light span {
		display: none;
	}
	
	.community-subjects-sorting .custom-select-container {
		margin-right: 20px;
		max-width: 300px;
	}
	
	.community-subjects {
		display: flex;
		flex-direction: column;
		padding: 30px 20px !important;
	}
	
	.community-subjects > .community-subjects-list {
		order: -1;
	}
	
	.community-subjects > .cta-container {
		order: 2;
		margin-top: 20px;
		text-align: center;
	}
	
	.community-subject-header .settings-container.title-container {
		flex-wrap: wrap;
	}
	
	.community-subject-header .settings-container.title-container .settings {
		margin-top: 20px;
		margin-left: 56px;
	}
	
	.subject-author-mobile {
		display: flex;
		align-items: center;
	}
	
	.subject-author-mobile img {
		margin-right: 10px;
	}
}

/* Pricing *******************/

.pricing-container {
	display: flex;
	justify-content: stretch;
	flex-wrap: wrap;
}

.pricing-container > .inner {
	width: 100%;
}

.pricing-content {
	position: relative;
	border-width: 1px;
	border-style: solid;
}

.pricing-content img {
	display: block;
	margin: 0 auto;
}

.pricing-content .pricing-highlights-list {
	position: relative;
	list-style-type: none;
	margin-left: 20px;
}

.pricing-content .pricing-highlights-list .icon {
	position: absolute;
	right: 100%;
	padding-right: 10px;
}

.pricing-content .pricing-highlights-list li span {
	font-size: 12px;
}

.pricing-content .pricing-highlights-list li + li {
	margin-top: 20px;
}

/* Agenda *******************/

.agenda-left-col {
	padding: 50px 20px;
	min-width: 260px;
	box-sizing: border-box;
	margin-top: -40px;
	margin-bottom: -40px;
	margin-left: -30px
}

.agenda-left-col .agenda-entry-content {
	margin-left: 10px;
}

.agenda-left-col .agenda-entry-content span {
	font-family: Neuton, Serif;
	font-size: 16px;
}

.agenda-content {
	margin-top: -40px;
	overflow-x: auto;
	position: relative;
}

.agenda-content::-webkit-scrollbar-track {
	border-radius: 6px;
}

.agenda-content::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.agenda-content::-webkit-scrollbar-thumb {
	border-radius: 6px;
}

.agenda-content .rsContentScrollArea {
	height: auto !important;
}

.agenda-content .rsHeader {
	display: flex;
	align-items: center;
	padding: 20px;
}

.agenda-content .rsHeader > p {
	order: 1;
	white-space: nowrap;
}

.agenda-content .rsHeader > h2 {
	order: 2;
	position: relative;
	font-family: Neuton, Serif;
	font-weight: normal;
	font-size: 32px;
	line-height: normal;
	padding-bottom: 12px;
	margin-left: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.agenda-content .rsHeader > h2:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 24px;
	bottom: 0;
	height: 4px;
}
.agenda-content .rsHeader .rsPrevDay,
.agenda-content .rsHeader .rsNextDay {
	font-family: FontAwesome;
	font-size: 0;
}

.agenda-content .rsHeader .rsPrevDay:hover,
.agenda-content .rsHeader .rsNextDay:hover {
	text-decoration: none;
}

.agenda-content .rsHeader .rsPrevDay:before,
.agenda-content .rsHeader .rsNextDay:before {
	font-size: 20px;
	padding: 0 10px;
	line-height: 80px;
}

.agenda-content .rsHeader .rsPrevDay:before {
	content: "\f053";
}

.agenda-content .rsHeader .rsNextDay:before {
	content: "\f054";
}

.agenda-content .rsHeader > ul {
	order: 3;
	list-style-type: none;
	display: flex;
}

.agenda-content .rsHeader > ul li {
	font-family: FontAwesome;
	font-size: 0;
}

.agenda-content .rsHeader > ul .rsLast {
	margin-left: 20px;
}

.agenda-content .rsHeader > ul li:hover {
	cursor: pointer;
}

.agenda-content .rsHeader .rsToday,
.agenda-content .rsHeader .rsDatePickerActivator {
	display: none;
}

.agenda-content .rsHeader > ul li:first-child,
.agenda-content .rsHeader > ul li:nth-child(2) {
	display: none;
}

.agenda-content .rsHeader > ul li:nth-child(3):before,
.agenda-content .rsHeader > ul li:nth-child(4):before {
	font-size: 14px;
}

.agenda-content .rsHeader > ul li:nth-child(3):before {
	content: "\f00a";
}

.agenda-content .rsHeader > ul li:nth-child(4):before {
	content: "\f039";
}

.agenda-content .rsHorizontalHeaderTable th {
	padding: 5px;
	width: 20%;
	box-sizing: border-box;
	text-transform: capitalize;
}

.agenda-content .rsContent > table {
	border-collapse: collapse;
	border-spacing: 0;
}

.agenda-content .rsContentTable {
	border-collapse: collapse;
	border-spacing: 0;
}

.agenda-content .rsContentTable td {
	border-width: 1px;
	border-style: solid;
	padding: 5px;
	box-sizing: border-box;
}

.agenda-content .rsApt {
	height: auto !important;
	border-radius: 5px;
	box-sizing: border-box;
	max-width: 100%;
	padding: 5px 20px 5px 5px;
	position: relative;
	font-size: 10px;
}

.agenda-content .rsApt br {
	display: none;
}

.agenda-content .rsAptContent {
	font-weight: bold;
}

.agenda-content .rsAptContent:before {
	content: '● ';
}

.agenda-content .rsAptDelete {
	font-size: 0;
	font-family: FontAwesome;
	position: absolute;
	right: 5px;
	top: 5px;
}

.agenda-content .rsAptDelete:before {
	font-size: 14px;
	content: "\f00d";
}

.agenda-content .rsApt .rsAptDelete:hover {
	text-decoration: none;
}

@media (max-width: 1024px) {
	
	.agenda-content .rsHeader > ul {
		order: 0;
		margin-right: 20px;
	}
}

@media (max-width: 768px) {
	
	.agenda-left-col {
		min-width: calc(100% + 40px);
		margin-top: -20px;
		margin-left: -20px;
		box-sizing: border-box;
		margin-bottom: 40px;
	}
}

.agenda-content .rsHorizontalHeaderWrapper {
	display: none;
}

.agenda-content .rsAgendaView,
.agenda-content .rsContentWrapper {
	height: auto !important;
}

.agenda-content .rsAgendaTable {
	width: 100%;
	border-collapse: collapse;
}

.agenda-content .rsAgendaTable .rsAgendaRow td {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 0 20px;
	box-sizing: border-box;
}

.agenda-content .rsAgendaDateHeader {
	border-style: solid;
	border-width: 1px;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	width: 100px;
}

.agenda-content .rsAgendaDateHeader .rsDateHeader {
	font-size: 20px;
	font-weight: bold;
}

.agenda-content .rsAgendaDateHeader em {
	font-size: 12px;
	font-weight: normal;
	font-style: inherit;
}

.agenda-content .rsAgendaDateHeader small {
	font-size: 10px;
	font-weight: normal;
	font-style: inherit;
}

.agenda-content .rsAgendaDateHeader .rsDateBox strong,
.agenda-content .rsAgendaDateHeader .rsDateBox em,
.agenda-content .rsAgendaDateHeader .rsDateBox small {
	display: block;
}

/* Lesson *******************/

.lesson-container {
	width: 100%;
}

.lesson-timeline-container {
	min-width: 320px;
}

.lesson-timeline-intro {
	position: relative;
}

.lesson-timeline-intro .breadcrumbs {
	padding: 0;
}

.lesson-timeline-intro .counter-container {
	display: flex;
	justify-content: space-around;
}

.lesson-timeline-intro .gauge-horizontal {
	bottom: 1px;
}
.lesson-timeline-intro .gauge-horizontal .gauge-value {
	bottom: 10px;
	left: 20px;
}

.lesson-timeline {
	list-style-type: none;
	width: calc(100% + 15px);
}

.lesson-timeline .lesson-step {
	padding: 25px 20px 25px 80px;
	position: relative;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.lesson-timeline .lesson-step > span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
}

.lesson-timeline .lesson-step .lesson-step-status {
	position: absolute;
	left: 39px;
	top: 22px;
	width: 22px;
	height: 22px;
	line-height: 20px;
	border-radius: 50%;
	text-align: center;
	font-size: 10px;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
	z-index: 1;
}

.lesson-timeline .lesson-step i + span {
	padding-left: 5px;
}

.lesson-timeline .lesson-step.done:before,
.lesson-timeline .lesson-step.current:before {
	content: '';
	display: block;
	width: 1px;
	position: absolute;
	bottom: 50%;
	top: -50%;
	left: 50px;
}

.lesson-content {
	position: relative;
}

.lesson-content .video-container,
.lesson-content .img-container {
	margin-left: -45px;
	width: calc(100% + 75px);
	max-width: calc(100% + 75px);
}

@media (max-width: 768px) {
	
	.lesson-timeline-container {
		width: 100%;
	}
	
	.lesson-content {
		padding-top: 50px;
	}
	
	.lesson-content .title-container {
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.lesson-content .video-container,
	.lesson-content .img-container {
		margin-left: -20px;
		width: calc(100% + 55px);
		max-width: calc(100% + 55px);
	}
}

/* Revision *******************/

.revision-steps {
	display: flex;
	margin: 20px auto 0;
	justify-content: center;
}

.revision-step {
	display: flex;
	flex-wrap: wrap;
	width: 170px;
	flex-direction: column;
	align-items: center;
	font-weight: bold;
	text-align: center;
}

.revision-step span {
	display: block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-width: 1px;
	border-style: solid;
	text-align: center;
	border-radius: 50%;
	margin-bottom: 10px;
	position: relative;
}

.revision-step + .revision-step span:before {
	content: '';
	display: block;
	width: 110px;
	height: 1px;
	border-top-width: 1px;
	border-top-style: solid;
	position: absolute;
	top: 18px;
	right: 48px;
}

.revision-btn-container {
	border-top-style: solid;
	border-top-width: 1px;
	display: flex;
	justify-content: center;
}

.revision-btn-container .cta-container {
	width: 100%;
	max-width: 640px;
}

/* Message Box *******************/

.sidebar-message-box {
	padding: 50px 20px;
	min-width: 260px;
	box-sizing: border-box;
	margin-top: -40px;
	margin-bottom: -40px;
	margin-left: -30px;
}

.sidebar-message-box-menu {
	list-style-type: none;
	margin-top: 20px;
}

.sidebar-message-box-menu li {
	position: relative;
	left: -20px;
	width: calc(100% + 35px);
	box-sizing: border-box;
	line-height: 14px;
}

.sidebar-message-box-menu .input-option-container {
	display: none;
}

.sidebar-message-box-menu li a {
	display: block;
	padding: 10px 10px 10px 20px;
	font-size: 12px;
	text-decoration: none;
	height: 20px;
}

.sidebar-message-box-menu li a i {
	padding-right: 15px;
	display: inline-block;
	width: 20px;
}

.sidebar-message-box-menu li.selected a {
	font-weight: bold;
}

.message-box-options {
	display: inline-block;
	list-style-type: none;
	margin-left: 10px;
	padding-left: 5px;
	border-left-style: solid;
	border-left-width: 1px;
}

.message-box-options li {
	display: inline-block;
}

.message-box-options li a {
	padding: 0 5px;
}

.message-box-options li i {
	padding-right: 0;
}

.message-box-header {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.message-box-header h4 {
	padding-bottom: 20px;
}

table.message-box-content thead {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	text-transform: uppercase;
}

table.message-box-content thead th {
	font-weight: normal;
}


table.message-box-content th,
table.message-box-content td {
	padding: 20px 0 20px 24px;
	box-sizing: border-box;
	height: 64px;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}

table.message-box-content th:last-child,
table.message-box-content td:last-child {
	padding-right: 24px;
}

table.message-box-content td {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

table.message-box-content th > a,
table.message-box-content th > span,
table.message-box-content td > a,
table.message-box-content td > span {
	white-space: nowrap;
}

table.message-box-content th .input-option-container,
table.message-box-content td .input-option-container,
table.message-box-content th .input-option-container > span,
table.message-box-content td .input-option-container > span {
	display: block;
}

.message-box-content td a {
	text-decoration: none;
}

.message-box-content tr.unread a {
	font-weight: bold;
}

.message-box-content .message-box-date {
	font-size: 11px;
}

.message-attachments-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.message-attachment-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

.message-attachment-list li {
	display: inline-flex;
	width: 150px;
	height: 50px;
	position: relative;
	align-items: center;
	margin-right: 20px;
	margin-bottom: 10px;
}

.message-attachment-list .message-attachment-thumbnail {
	display: flex;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	min-width: 50px;
	min-height: 50px;
	max-width: 50px;
	max-height: 50px;
	margin-right: 10px;
	align-items: center;
	justify-content: center;
}

.message-attachment-list span {
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 10px;
	font-size: 12px;
	font-weight: bold;
}

.message-attachment-list img {
	max-height: 50px;
}

.message-attachment-list .delete-attachement {
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	border-radius: 50%;
	position: absolute;
	top: -12px;
	right: -12px;
}

.message-attachment-list .delete-attachement .fa {
	font-size: 12px;
	padding: 0; 
}

.message-attachments-container .add-attachment {
	display: block;
	height: 50px;
	line-height: 50px;
}

@media (max-width: 768px) {
	
	.sidebar-message-box {
		padding: 20px 30px;
		padding-right: 30px !important;
		min-width: 260px;
		box-sizing: border-box;
		margin-top: -20px;
		margin-bottom: 0;
		margin-left: 0;
		position: relative;
		left: -20px;
		width: calc(100% + 40px);
		min-width: calc(100% + 40px);
	}
	
	*::-ms-backdrop, .sidebar-message-box { /* IE11 */
		min-width: 100%;
	}
	
	.sidebar-message-box-menu li {
		left: -30px;
		width: calc(100% + 60px);
	}
	
	*::-ms-backdrop, .sidebar-message-box-menu li { /* IE11 */
		width: calc(100% + 80px);
	}
	
	.sidebar-message-box-menu li a {
		padding: 10px 60px 10px 30px;
	}
	
	.sidebar-message-box-menu .input-option-container {
		display: block;
		width: 24px;
		height: 24px;
		pointer-events: none;
		position: absolute;
		right: 20px;
		top: 10px;
	}
	
	.sidebar-message-box-menu li input[type=checkbox] + span i {
		content: '';
		width: 24px;
		height: 24px;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -12px;
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		padding-right: 0;
	}

	.sidebar-message-box-menu li input[type=checkbox] + span .fa-check {
		display: none;
	}
	
	.sidebar-message-box-menu li.selected input[type=checkbox] + span .fa-check {
		display: block;
	}
	
	table.message-box-content {
		margin-left: -20px;
		width: calc(100% + 40px);
	}
	
	table.message-box-content th, 
	table.message-box-content td {
		padding: 10px 0 10px 20px;
	}
	
	table.message-box-content th:last-child,
	table.message-box-content td:last-child {
		padding-right: 20px;
	}
	
	table.message-box-content th > a,
	table.message-box-content th > span,
	table.message-box-content td > a,
	table.message-box-content td > span {
		display: block;
		position: relative;
	}
	
	table.message-box-content td > a + a {
		margin-top: 5px;
	}
	
	table.message-box-content .message-box-date {
		text-align: right;
		right: 0;
	}
}

/* News Page *******************/

.news-filter {
	display: flex;
}

.news-filter .custom-select-container + .custom-select-container {
	margin-left: 20px;
}

.news-cards {
	display: flex;
	flex-wrap: wrap;
	display: grid;
	column-gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style-type: none;
}

.news-cards > li {
	width: 100%;
}

.news-preview {
	display: block;
	border-top-style: solid;
	border-top-width: 1px;
	padding: 20px 5px 20px 0;
}

.news-header {
	display: flex;
	position: relative;
}

.news-header .bookmarking-container {
	position: absolute;
	top: -10px;
	right: 0;
}

.bookmarking-container {
	width: 18px;
	height: 24px;
	background-image: url('../image/bookmark.png');
	cursor: pointer;
}

.bookmarking-container.bookmarked {
	background-image: url('../image/bookmarked.png');
}

.news-header .img-container {
	display: block;
	min-width: 96px;
	max-width: 96px;
	margin-right: 10px;
}

.news-header .img-container img {
	display: block;
}

.news-header-content {
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.news-header-content .course-categories {
	padding-right: 35px;
}

.news-header-content h5 {
	white-space: normal;
	line-height: 18px;
	overflow: hidden;
	max-height: 36px;
}

.news-preview-info {
	display: flex;
	align-items: center;
	margin-top: 5px;
}

.news-preview-info .news-date {
	font-size: 10px;
}

.star-ranking-container {
	margin-left: 10px;
}

.news-body-content {
	display: block;
	margin-top: 15px;
}

.news-body-content p {
	font-size: 12px;
	line-height: 18px;
}

.month-feed-container ul {
	margin-left: -20px;
	position: relative;
	width: calc(100% + 40px);
}

.month-feed-container ul {
	margin-left: -20px;
	position: relative;
	width: calc(100% + 40px);
}

.month-feed-container li + li {
	margin-top: 10px;
}

.monthly-news,
.monthly-news a,
.monthly-news:hover,
.monthly-news:hover a {
	display: flex;
	text-decoration: none;
}

.monthly-news .img-container {
	display: block;
	min-width: 96px;
	max-width: 96px;
	padding: 2px;
	position: relative;
}

.monthly-news .img-container img {
	display: block;
}

.monthly-news .img-container .fa {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
}

.monthly-news-content {
	margin: 10px;
	overflow: hidden;
}

.monthly-news-content p {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monthly-news-content .cta-action {
	margin-top: 10px;
	font-size: 12px;
}

.newsletter-feed-container li {
	display: flex;
	align-items: center;
}

.newsletter-feed-container li + li {
	margin-top: 6px;
}

.newsletter-item .image-container {
	width: 48px;
	min-width: 48px;
	height: 48px;
	margin-right: 10px;
}

.newsletter-item {
	overflow: hidden;
}

.newsletter-item h5 {
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.newsletter-item a {
	display: block;
	height: 48px;
	line-height: 48px;
	margin-left: 10px;
	text-align: center;
}

@media (max-width: 768px) {

	.month-feed-container ul {
		margin-left: 0;
		width: 100%;
	}
}

.news-intro-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.news-intro-info .star-ranking-container {
	margin-left: 40px;
}

.news-source {
	font-style: italic;
}

.news-intro-container,
.news-image-container {
	min-height: 250px;
}

.news-image-container img {
	display: block;
	margin: 0 auto;
}

@media (max-width: 768px) {

	.news-intro-container,
	.news-image-container {
		min-height: inherit;
	}
}

/* Coaching *******************/

.coaching-intro {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.coaching-intro .image-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.resources-cards {
	display: flex;
	flex-wrap: wrap;
	display: grid;
	row-gap: 24px;
	column-gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
	list-style-type: none;
}

.resource-preview {
	display: block;
	position: relative;
}

*::-ms-backdrop, .resource-preview { /* IE11 */
	width: 215px;
	margin: 0 20px 20px 0;
}

.resource-preview .resource-preview-action-container,
.resource-preview .resource-preview-info {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.resource-preview .resource-preview-action-container {
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.resource-preview .resource-preview-info {
	align-items: flex-start;
	justify-content: flex-end;
	font-size: 12px;
}

.resource-preview .resource-preview-info h5 {
	margin-top: 5px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.resource-preview img {
	display: block;
	width: 100%;
}

/* News Wall *******************/

.news-wall-container {
	position: relative;
	overflow: hidden;
	padding: 0 60px 0 0;
}

.col-12 > .news-wall-container {
	padding: 0 60px;
}

@media (max-width: 1024px) {
	
	.col-12 > .news-wall-container {
		padding: 0 60px 0 0;
	}
}

.news-wall {
	display: flex;
	height: 430px;
	position: relative;
	width: 100%;
	-webkit-transition: transform 1s;
	transition: transform 1s;
}

.news-wall-btn {
	display: flex;
	position: absolute;
	width: 60px;
	height: 430px;
	top: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 1;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.news-wall-btn i {
	display: flex;
	font-size: 36px;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
}

.news-wall-previous-btn {
	left: -2px;
	display: none;
}

.col-12 > .news-wall-container .news-wall-previous-btn {
	display: flex;
}

@media (max-width: 1024px) {
	
	.col-12 > .news-wall-container .news-wall-previous-btn {
		display: none;
	}
}

.news-wall-next-btn {
	right: -2px;
	z-index: 2;
}

.news-wall-pagination {
	margin-top: 40px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% + 60px);
}

.col-12 > .news-wall-container .news-wall-pagination {
	width: 100%;
}

@media (max-width: 1024px) {
	
	.col-12 > .news-wall-container .news-wall-pagination {
		width: calc(100% + 60px);
	}
}

.col-12 > .news-wall-container .news-wall-pagination {
	justify-content: center;
}

.news-wall-pagination a + a {
	margin-left: 10px;
}

.news-wall-pagination a,
.news-wall-pagination a .fa,
.news-wall-pagination a:hover .fa {
	font-size: 10px;
	padding: 0;
	-webkit-transition: color 500ms;
	transition: color 500ms;
}

.news-wall-pagination .current,
.news-wall-pagination .current .fa,
.news-wall-pagination .current:hover .fa {
	font-size: 14px;
}

.news-wall-col {
	display: inline-flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
	font-size: 14px;
	white-space: normal;
	padding-right: 30px;
}

.news-wall-row {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 300px;
	min-width: 300px;
}

.news-wall-row:hover {
	cursor: pointer;
	text-decoration: none;
}

.news-wall-file-container {
	justify-content: center;
}

.news-wall-category {
	display: block;
	position: relative;
	z-index: 1;
	margin-bottom: 10px;
}

.news-wall-row-xl {
	padding: 30px 20px;
	height: 100%;
}

.news-wall-file-container.news-wall-row-xl {
	padding-bottom: 68px;
}

.news-wall-row-m {
	padding: 20px;
	height: 205px;
	width: 248px;
	min-width: 248px;
}

.news-wall-file-container.news-wall-row-m {
	padding-bottom: 68px;
}

.news-wall-row-m + .news-wall-row-m {
	margin-top: 20px;
}

.news-wall-row-xs {
	padding: 15px;
	height: 130px;
	width: 248px;
	min-width: 248px;
}

.news-wall-file-container.news-wall-row-xs {
	padding-bottom: 63px;
}

.news-wall-row-xs + .news-wall-row-xs {
	margin-top: 20px;
}

.news-wall-title {
	font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
	font-weight: 600;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

.news-wall-title:before,
.news-wall-title:after {
	display: none !important;
}

.news-wall-row-xl .news-wall-title {
	font-size: 36px;
}

.news-wall-row-m .news-wall-title {
	font-size: 24px;
}

.news-wall-row-xs .news-wall-title {
	font-size: 20px;
}

.news-wall-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 0;
}

.news-wall-background:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.news-wall-background img {
	width: 100%;
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
	min-width: 100%;
	min-height: 100%;
}

.news-wall-row p {
	margin-top: 10px;
	line-height: 20px;
}

.news-wall-file {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48px;
	align-items: center;
	font-weight: bold;
}

.news-wall-file .img-container {
	width: 48px;
	min-width: 48px;
	height: 48px;
	overflow: hidden;
	position: relative;
}

.news-wall-file .img-container img {
	display: block;
	width: 48px;
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
	min-height: 48px;
}

.news-wall-file-desc {
	padding: 0 12px;
}

/* SPOC Menu *******************/

.spoc-container {
	display: flex;
	min-height: 100vh;
}

/* SPOC Left */

.spoc-sidebar-container {
	width: 320px;
	min-width: 320px;
}

.spoc-sidebar-header {
	position: relative;
}

.spoc-sidebar-breadcrumbs {
	height: 48px;
	padding: 10px 20px;
	box-sizing: border-box;
}

.spoc-sidebar-breadcrumbs a:hover {
	text-decoration: none;
}

.spoc-sidebar-breadcrumbs a i {
	font-size: inherit;
	padding-right: 0;
}

.spoc-sidebar-header .img-container:before {
	content: '';
	display: block;
	position: absolute;
	height: 100px;
	left: 0;
	right: 0;
	bottom: 0;
}

.spoc-sidebar-header img {
	display: block;
}

.spoc-sidebar-header .gauge-horizontal {
	height: inherit;
	bottom: 0;
	z-index: 2;
}

.spoc-sidebar-header .gauge-value {
	position: relative;
	left: 20px;
	bottom: 12px;
	font-size: 16px;
	font-weight: bold;
}

.spoc-sidebar-header .gauge-display {
	bottom: 0;
	height: 4px;
}

.spoc-sidebar-title {
	padding: 20px;
}

.spoc-sidebar-title h5 {
	font-weight: bold;
}

.spoc-side-menu {
	width: 100%;
	margin-top: 10px;
}

.spoc-side-menu li,
.spoc-side-menu a {
	display: block;
	width: 100%;
}

.spoc-side-menu a {
	padding: 15px 40px 15px 60px;
	box-sizing: border-box;
	text-decoration: none;
	line-height: 16px;
}

.spoc-side-menu a i {
	position: absolute;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -50px;
	padding-right: 0;
	margin-right: 0;
	font-size: 14px;
	line-height: 16px;
}

.spoc-sidebar .lesson-timeline {
	width: 100%;
	overflow: hidden;
}

.spoc-sidebar .lesson-timeline .lesson-step .lesson-step-status {
	top: 12px;
}

.spoc-sidebar .lesson-timeline .lesson-step {
	padding: 15px 20px 15px 80px;
}

.spoc-sidebar .lesson-timeline .lesson-step:before {
	display: none;
}

.spoc-sidebar .lesson-timeline .lesson-step > span {
	display: block;
	white-space: normal;
	line-height: 18px;
	position: relative;
	overflow: visible;
}

.spoc-sidebar .lesson-timeline .lesson-step.done > span:before,
.spoc-sidebar .lesson-timeline .lesson-step.current > span:before {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	left: -30px;
	bottom: 100%;
	top: -150px;
}

@media (max-width: 768px) {
	
	.spoc-sidebar-container {
		position: fixed;
		top: 0;
		width: 320px;
		left: -320px;
		bottom: 0;
		z-index: 10;
		right: 50%;
		-webkit-transition: left 200ms;
		transition: left 200ms;
	}
	
	.spoc-sidebar-container.active {
		left: 0;
	}
	
	.spoc-sidebar-container:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 100%;
		width: 100px;
		bottom: 0;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: opacity 200ms;
		transition: opacity 200ms;
	}
	
	.spoc-sidebar-container.active:before {
		opacity: 1;
	}
	
	.spoc-sidebar-container .close-btn {
		position: absolute;
		right: 20px;
		top: 12px;
		z-index: 1;
		display: inline-flex;
		padding: 0;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border-width: 1px;
		border-style: solid;
		align-items: center;
		justify-content: center;
	}
	
	.spoc-sidebar-container .close-btn i {
		padding-right: 0;
	}
	
	.spoc-sidebar {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		overflow-y: auto;
	}
}

/* SPOC Right */

.spoc-content {
	width: calc(100% - 320px);
}

@media (max-width: 768px) {
	
	.spoc-content {
		width: 100%;
	}
}

/* SPOC Banner */

.spoc-banner {
	height: 48px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	box-sizing: border-box;
}

.spoc-banner a {
	display: flex;
	align-items: center;
}

.spoc-banner a.previous {
	margin-right: auto;
}

.spoc-banner a.next {
	margin-left: auto;
}

.spoc-banner a:hover {
	text-decoration: none;
}

.spoc-banner a:hover span {
	text-decoration: underline;
}

/* SPOC Main Container */

.spoc-main-container .table-container > .timeline-table-accordion-button,
.spoc-main-container .table-container > .timeline-table-wrapper {
	min-width: 480px;
}

.spoc-main-container .table-container .timeline-table td {
	padding-right: 20px;
}

.spoc-main-container .table-container .timeline-table .status {
	border-width: 1px;
	left: -11px;
}

.spoc-main-container .table-container .timeline-table .status-current::before {
	left: 9px;
}

.spoc-cta-container {
	display: flex;
	text-align: left;
	align-items: center;
}

.spoc-cta-container a {
	margin-right: 10px;
}

.spoc-lesson-container {
	width: calc(100% - 20px);
	padding-left: 20px;
}

.spoc-lesson {
	display: flex;
	min-width: 480px;
	width: calc(100% - 20px);
	border-top-width: 2px;
	border-top-style: solid;
}

.spoc-lesson:last-child {
	border-bottom-width: 2px;
	border-bottom-style: solid;
}

.spoc-lesson > div {
	padding: 15px 20px 30px 30px;
	position: relative;
}

.spoc-lesson-content {
	width: 70%;
	padding-bottom: 30px;
	position: relative;
}

.spoc-lesson-action {
	width: 30%;
	display: flex;
	align-items: center;
}

.spoc-lesson:first-child > .spoc-lesson-content {
	padding-top: 30px;
}

.spoc-lesson-content .indentation {
	margin-left: 50px;
	position: relative;
}

.spoc-lesson-content .status {
	position: absolute;
	left: -10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
	z-index: 1;
}

.spoc-lesson .status-current::before {
	content: '';
	display: block;
	width: 1px;
	height: 21px;
	position: absolute;
	bottom: 18px;
	left: 7px;
}

.spoc-lesson-content .content {
	width: 100%;
	display: block;
	max-width: 100%;
	position: relative;
}

.spoc-lesson-content .content:before {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	left: -30px;
	bottom: 100%;
	top: -150px;
}

.spoc-lesson-content b {
	display: inline-block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.spoc-lesson-content p {
	white-space: normal;
	font-weight: normal;
}

.spoc-main-tutor-container {
	display: flex;
	width: 100%;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
}

.spoc-main-tutor-container .img-container {
	margin-right: 20px;
}

.spoc-main-tutor h4 {
	display: block;
	margin-bottom: 10px;
}

.spoc-main-tutor .author-status {
	display: inline-block;
	margin-bottom: 10px;
}

/* REORGANIZE FRONT HEADER*/
h1.page-title {
    display:none;
}

.header-content .manager-logo-container {
    display: block;
    position: absolute;
    top: 15px;
    left: 35px;
    z-index:50;
}

@media (max-width: 1650px) {
    .header-content .manager-logo-container {
        top: -10px;
        left: 0px;
    }
}

@media (max-width: 1024px) {
    .header-content .manager-logo-container {
        top: 25px;
        left: 50px;
    }
}

.header-content .main-nav {
    display: block;
    width: 100%;
    position: absolute;
    padding-top:110px
}

header .main-nav ul {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 40px;
}

header .main-nav ul > li > a {
    font-size: 16px;
    font-weight: bold;
}

header .main-nav > ul > li > a.selected .fa:after {
    display:none;
}

header .main-nav > ul > li > a.selected:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    bottom: -15px;
    left: 0%;
    margin-left: 28px;
}

header .help {
    top: 120px;
}

.header-search-block {
    top: 20px;
    right: 300px;
    border-radius: 5px;
}

.home-stats-graphic-container{
    padding : 0px;
}

table.complex tbody td:first-child {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
}

.cta-contextual.minor {
    border-width:0px;
}

.logged-in .main-container > .inner {
    padding-top:25px;
}

.note-editor button[title]:hover:after {
    content: attr(title);
    display:none;
}

.cta-container a.cta-action + a {
    padding-left:20px;
}

header .main-nav ul.nav-submenu {    
    padding-left: 0px;
    left:0%;
}

.logged-in-profile ul.nav-submenu a {
    padding-left: 40px;
}

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

.main-container > section.inner,
.main-container .colored-row-container > section {
	max-width: 1024px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* Header *******************/

header {
	width: 100%;
	display: flex;
	min-height: 160px;
}

.header-content {
	width: calc(100% - 280px);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	white-space: nowrap;
}

.header-content .help {
	display: none;
}

header .logged-in-profile-container {
	display: flex;
	align-items: center;
	width: 280px;
	padding: 25px 80px 25px 30px;
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
	flex-direction: column;
}

header .logged-out-profile-container {
	display: flex;
	width: 280px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

header .logged-out-profile-container .cta-contextual {
	position: relative;
	left: -10px;
}

header .logged-out-profile-container .cta-contextual + .cta-contextual {
	margin-left: 10px;
}

header .logged-in-profile-container img {
	display: block;
}

header .logged-in-profile-container .profile-pic {
	display: block;
	max-width: 64px;
	margin: 0 auto;
	padding-bottom: 10px;
}

header .logged-in-profile {
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}

header .logged-in-profile > span {
	display: block;
	text-align: center;
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

header .logged-in-profile > .name {
	font-size: 20px;
	font-weight: 300;
}

header .logged-in-profile > .score {
	font-size: 14px;
	font-weight: bold;
}

header .logged-in-profile-container .profile-pic:hover ~ .logged-in-profile .nav-submenu,
header .logged-in-profile-container .logged-in-profile:hover .nav-submenu {
	display: block;
}

header .logged-in-profile-container .logged-in-profile:hover {
	cursor: pointer;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu {
	margin-top: -10px;
	text-transform: uppercase;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu .li-lang {
	line-height: 12px;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu .flag-select {
	width: 100%;
	height: auto;
	line-height: 44px;
}

header .flag-select .placeholder img {
	padding-top: 8px;
}

header .custom-select.flag-select i {
	top: 6px;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu .flag-select .select-list {
	position: relative;
}

header .flag-select .select-list .placeholder {
	padding-bottom: 7px;
}

header .profile-reminders {
	position: absolute;
	top: 25px;
	right: 20px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

header .profile-reminders a + a {
	margin-top: 15px;
}

header .manager-logo-container {
	display: inline-block;
	padding: 20px 25px;
	position: absolute;
}

.header-search-block {
	transition: all 1s;
	top: 20px;
	right: 300px;
	border-radius: 5px;
	position: absolute;
	z-index: 10;
	min-width: 20%;
	background-color: #ffffff;
}

.header-search-block .multiselect-input-auto-complete {
	padding-left: 10px;
}

.header-search-block .multiple-select-btn {
	bottom: 3px;
}

.main-nav {
	display: flex;
	padding-top: 25px;
	line-height: 30px;
	align-self: flex-end;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 280px;
	max-width: 1024px;
	width: 100%;
}

.main-nav ul {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-size: 16px;
	font-stretch: condensed;
	flex-wrap: wrap;
}

.main-nav ul a {
	font-weight: bold;
}

.main-nav ul > li {
	position: relative;
}

.main-nav a:hover {
	text-decoration: none;
}

.main-nav > ul > li + li {
	margin-left: 20px;
}

.main-nav > ul > li:hover .nav-submenu {
	display: block;
}

.main-nav a.selected .fa {
	position: relative;
}

.main-nav > ul > li > a.selected .fa:after {
	content: '';
	position: absolute;
	height: 4px;
	width: 40px;
	bottom: -25px;
	right: -44px;
}

.side-nav-btn {
	display: flex;
	width: 84px;
	height: 48px;
	float: right;
	cursor: pointer;
	text-align: center;
	flex-direction: column;
	justify-content: center;
}

.side-nav-btn .fa {
	font-size: 24px;
	padding-right: 0;
}

.side-nav-btn span {
	display: block;
}

@media (max-width: 1600px) {
	
	.main-nav {
		width: auto;
		margin-left: 0;
	}
}

@media (max-width: 1280px) {
	
	header .manager-logo-container {
		position: static;
	}
	
	.main-nav {
		padding-left: 0;
	}
	
	.main-nav ul {
		font-size: 12px;
	}
	
	.main-nav > ul > li + li {
		margin-left: 10px;
	}
}

@media (max-width: 1024px) {
	
	header .manager-logo-container {
		padding: 10px;
		order: 2;
	}
	
	.manager-logo-container img {
		max-height: 60px;
	}
	
	.header-row {
		display: flex;
		width: auto;
		position: relative;
	}
	
	.header-search-block {
		top: auto;
		max-width: 240px;
	}
	
	.header-content {
		width: calc(100% - 260px);
	}
		
	
	header .logged-in-profile-container {
		width: 260px;
		padding: 25px;
	}
	
	header .logged-in-profile-container .profile-pic,
	header .logged-in-profile,
	header .logged-in-profile > span {
		cursor: auto;
	}
	
	header .logged-in-profile-container img {
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
	}
	
	header .logged-in-profile-container .profile-pic .badge-container {
		min-width: 48px;
	}
	
	header .logged-in-profile-container .profile-pic .badge {
		position: absolute;
		top: auto;
		bottom: -4px;
		margin-left: -10px;
		left: 48px;
	}
	header .logged-out-profile-container {
		width: 260px;
	}
}

@media (max-width: 768px) {
	
	header {
		min-height: auto;
	}
	
	.header-content {
		width: calc(100% - 80px);
	}
	
	header .manager-logo-container {
		padding: 0;
		margin: auto;
	}
	
	header .manager-logo-container img {
		max-height: 36px;
	}
	
	header .logged-in-profile-container {
		width: 80px;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	
	header .logged-in-profile-container .profile-pic {
		font-size: 0;
		margin: 0 auto 0 5px;
		padding-bottom: 0;
	}
	
	header .logged-in-profile-container img {
		width: 36px;
		height: 36px;
		min-width: 36px;
		min-height: 36px;
		margin-bottom: 0;
	}
	
	header .logged-in-profile-container .profile-pic .badge {
		position: absolute;
		top: 2px;
		bottom: auto;
		margin-left: auto;
		left: 30px;
	}
	
	header .logged-out-profile-container {
		width: auto;
		padding: 0 20px;
	}
	
	header .logged-out-profile-container .cta-contextual {
		padding: 0;
		border: none;
	}
	.side-nav-btn {
		width: 48px;
		height: 48px;
		font-size: 10px;
	}
	
	.side-nav-btn .fa {
		font-size: 18px;
	}
}

/* Nav Submenu *******************/

header .nav-submenu {
	display: none;
	position: absolute;
	padding: 10px 0;
	min-width: 180px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
	white-space: nowrap;
	z-index: 10;
	margin-top: 8px;
	margin-left: -60px;
	left: 50%;
	top: 100%;
	font-size: 12px;
	line-height: 30px;
}

header .nav-submenu::before {
	content: '';
	display: block;
	width: 100%; 
	height: 8px; 
	position: absolute;
	top: -8px;
}

header .nav-submenu::after {
	content: '';
	display: block;
	width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	position: absolute;
	top: -8px;
	left: 50px;
}

header .nav-submenu > li a {
	padding: 5px 20px;
	display: block;
	text-align: left;
	text-decoration: none;
}

@media (max-width: 1650px) {
    .header-content .manager-logo-container {
        top: -15px;
    }
}

.colored-row-container.trainings.highlight {
    
	display: none;

}


/* modif css login 4.4  */
body#login .cta-action {
    background-color: #1A6E3C;
    border-color: #1A6E3C;
    color: #ffffff;
}

body#login .cta-action:hover, body#login .cta-contextual.primary:hover {
    background-color: #1A6E3C;
    border-color: #1A6E3C;
}

body#login h2 {
    color: #1A6E3C;
}


.cta-contextual {
	border-color: #1A6E3C;
}

.cta-contextual:hover {
	border-color: #1A6E3C;
}

.cta-contextual:active,
.cta-contextual.selected,
.cta-contextual:active:before,
.cta-contextual.selected:before {
	border-color: #254f71;
}

.cta-contextual.primary {
	background-color:#1A6E3C;
	border-color: #1A6E3C;
	color: #ffffff;
}

body#login .cta-action {
    background-color: #ffffff;
}



.cta-contextual.primary:hover {
    background-color: #1A6E3C;
    border-color: #1A6E3C;
}