/*
Theme Name: SEPUEDE
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400&display=swap');

:root {
	--gray: #999999;
	--coolgray: #bebebe;
	--blue: #072F4A;
	--green: #003F50;
	--bgreen: #016B6F;
	--turquoise: #00BC83;
	--red: #FF242E;
	--pink: #FFD8D3;
	--lightpurple: #F4C6FF;
	
	--mono: 'JetBrainsMono', monospace;
	--basic: 'Roboto', Helvetica, Arial, sans-serif;
}

@font-face {
	font-family: "PoppinsRegular";
	src: url("assets/fonts/Poppins-Regular.ttf");
}

@font-face {
	font-family: "Poppins-ExtraBold";
	src: url("assets/fonts/Poppins-ExtraBold.ttf");
}

@font-face {
	font-family: "Poppins-Bold";
	src: url("assets/fonts/Poppins-Bold.ttf");
}

::-moz-selection {
  color: #ffffff;
  background: var(--blue);
}

::selection {
  color: #ffffff;
	background: var(--blue);
}

body {
	color: #ffffff;
	font-family: var(--basic);
}

.landing,body,html {
	height: 100%;
}

.landing main {
	height: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

main {
	padding-bottom: 2rem;
	    max-width: 1240px;
    margin: 0 auto;
}

main h1 {
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
}

.landing p {
	font-size: 1.25rem;
	color: var(--blue);
	line-height: 1.6;
	margin-top: 2rem;
}

.landing div {
	max-width: 640px;
	padding: 1rem;
	margin: auto;
}

@media only screen and (max-width: 320px) {
	.landing svg {
		max-width: 280px;
	}
}

/* pages */
header.userbar {
	padding: 1rem;
	margin-bottom: 2rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	background-color: var(--green);
	background-image: url('assets/header-bg.png');
	background-size: auto 600%;
	background-repeat: no-repeat;
	background-position: top 70% right -900px;
}

.userbar > a {
	margin: auto 0;
}

.userbar a figure {
	max-width: 64px;
	max-height: 64px;
}

.userbar a figure img {
	max-width: 64px;
	max-height: 64px;
}

header a.logo svg {
	max-width: 100px;
	max-height: 92px;
	right: 0;
}

@media only screen and (max-width: 414px) {
	header a.logo svg {
		max-width: 60px;
		max-height: 53px;
	}
}

header a svg {
	max-width: 32px;
	max-height: 32px;
}

header svg {
	max-width: 152px;
}

header:not(.userbar) {
	padding: 1rem;
}

@media only screen and (max-width: 414px) {
	header:not(.userbar) {
		padding: .625rem .312rem;
	}
}

header:not(.userbar) svg {
	max-width: 150px !important;
	max-height: 100px !important;
	margin-bottom: 1rem;
}

@media only screen and (max-width: 414px) {
	header:not(.userbar) svg {
		max-width: 100px !important;
		max-height: 90px !important;
		margin-bottom: 0;
	}
}

body {
	color: var(--blue);
}

/* buttons */
.btn {
	-webkit-appearance: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	position: relative;
	z-index: 10;
	outline: 0;
	margin: 0;
	border: 0;
	font-family: inherit;
	font-size: .875rem;
	line-height: 1;
	display: inline-block;
	text-transform: uppercase;
	text-align: center;
	padding: 19px 10px;
	background-color: var(--green);
	color: #ffffff;
	border-radius: 0;
	text-decoration: none;
	font-weight: 600;
	transition: all 120ms linear;
	max-height: 52px;
}

.btn:active { transform: scale(.95); }

.btn.btn-red { background-color: var(--red); }
.btn.btn-blue { background-color: #003f50; }

/* form styles */
.form-wrap {
	max-width: 640px;
	margin: 2rem auto;
	padding: 0 1rem;
	display: flex;
	flex-flow: column nowrap;
}

.form-wrap fieldset {
	margin-bottom: .625rem;
}

.form-wrap fieldset:last-of-type {
	margin-bottom: 0;
}

.form-wrap fieldset:last-of-type .input-container,
.form-wrap fieldset:last-of-type .input-container .input-container:last-of-type {
	margin-bottom: .625rem;
}

.form-wrap fieldset:last-of-type .input-container .input-container {
	margin-bottom: .625rem;
}

.form-wrap .input-container {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	text-align: left;
	margin-bottom: 1rem;
}

.form-wrap .input-container .input-container {
	margin-bottom: .312rem;
}

.form-wrap .input-container .input-container:first-of-type {
	margin-top: .312rem;
}

.form-wrap .input-container:not(.checkbox):not(.radio) label {
	color: var(--green);
	margin-bottom: .625rem;
}

.form-wrap .input-container .input-container.radio label,
.form-wrap .input-container .input-container.checkbox label {
	color: var(--blue);
	margin-bottom: .312rem;
}

/* half */
.form-wrap .input-half {
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 1rem;
}

@media only screen and (max-width: 414px) {
	.form-wrap .input-half {
		flex-flow: column nowrap;
	}
}

.form-wrap .input-half:last-child { margin-bottom: 0; }

.form-wrap .input-half .input-container {
	flex: 0 1 50%;
	min-width: 0;
	margin-bottom: 0;
}

.form-wrap .input-half .input-container:first-child { margin-right: 10px; }
.form-wrap .input-half .input-container:last-child { margin-left: 10px; }

@media only screen and (max-width: 414px) {
	.form-wrap .input-half .input-container:first-child { margin-bottom: 20px; }
	
	.form-wrap .input-half .input-container:first-child,
	.form-wrap .input-half .input-container:last-child {
		margin-right: 0;
		margin-left: 0;
	}
}

.input-container.checkbox,
.input-container.radio {
	display: flex;
	flex-flow: row nowrap;
}

.input-container.checkbox input {
	flex: 0 0 auto;
	transform: scale(2);
	margin-left: .312rem;
}

.input-container.radio input {
	margin-left: .312rem;
}

.input-container.checkbox label,
.input-container.radio label {
	margin-left: .625rem;
}

.form-wrap .input-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.form-wrap .input-container select,
.form-wrap .input-container textarea {
	-webkit-appearance: none;
	outline: none;
	border: 0;
	box-sizing: border-box;
	padding: 1rem;
	font-family: var(--basic);
	font-size: 1rem;
	font-weight: 500;
	color: var(--blue);
	transition: all 120ms linear;
	border: 1px solid #D2DDE0;
}

.form-wrap .input-container small {
	font-size: .75rem;
	font-style: italic;
}

.form-wrap .input-container select {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="16" viewBox="0 0 21 16"><path d="M10.5 0L19.6 0C20.7 0 21.4 1.3 20.7 2.2L16.4 8.5 11.7 15.4C11.1 16.2 9.9 16.2 9.3 15.4L4.6 8.5 0.3 2.2C-0.4 1.3 0.3 0 1.4 0L10.5 0Z" fill="%23283243"/></svg>');
	background-size: 10px 8px;
	background-position: center right 10px;
	background-repeat: no-repeat;
	
}

/* headings */
h2 {
	font-size: 2.25rem;
	color: var(--green);
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 1rem;
}

@media only screen and (max-width: 414px) {
	h2 {
		line-height: 1;
	}
	
	main p {
		padding: 0 .625rem;
	}
}

/* modal */
.modal {
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.85);
	display: flex;
}

.modal .modal-header {
	margin-bottom: 1.25rem;
}

.modal .modal-header svg {
	max-width: 100px;
	max-height: 70px;
}

.modal .modal-content {
	margin: auto;
	max-width: 640px;
	padding: 2rem;
	background-color: var(--green);
}

.modal .modal-content p {
	color: #ffffff;
	font-size: 1rem;
	line-height: 1.6;
}

/* course list */
.course-list {
	max-width: 640px;
	margin: 2rem auto;
}

@media only screen and (max-width: 414px) {
	.course-list {
		margin: 1rem;
		padding-bottom: 2rem;
	}
}

.course-list ul li {
	margin-bottom: 1rem;
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	text-align: left;
	overflow: hidden;
}

.course-list ul li .course-meta h3 {
	font-size: 1.25rem;
	font-weight: 400;
	text-transform: uppercase;
	background-color: var(--turquoise);
	background-image: url('assets/title-bg.png');
	background-size: auto 140%;
	background-repeat: no-repeat;
	background-position: top 50% right -100%;
	color: #ffffff;
	padding: 1rem;
}

.course-list ul li:nth-child(3n+2) h3 {
	background-color: var(--red);
}

.course-list ul li:nth-child(3n+3) h3 {
	background-color: var(--bgreen);
}

.course-list ul li .course-meta p {
	padding: 0;
}

.course-list ul li figure {
	flex: 1 0 100%;
	max-height: 250px;
	overflow: hidden;
}

@media only screen and (max-width: 414px) {
	.course-list ul li figure {
		overflow: hidden;
		flex: 0 0 100%;
	}
}

.course-list ul li figure img {
	width: 100%;
}

@media only screen and (max-width: 414px) {
	.course-list ul li figure img {
		width: 100%;
	}
}

.course-list ul li .course-action {
	padding: 0 .625rem;
	background-color: var(--green);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 100px;
}

@media only screen and (max-width: 414px) {
	.course-list ul li .course-action {
		flex: 0 0 100%;
	}
	
	.course-list ul li .course-action a {
		padding: 1rem 0;
		width: 100%;
	}
}

.course-list ul li .course-action a {
	text-decoration: none;
	margin: auto;
	color: #ffffff;
	font-weight: 600;
	text-align: center;
}

/* course card */
.course-card {
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--coolgray);
	max-width: 640px;
	margin: 2rem auto;
}

@media only screen and (max-width: 414px) {
	.course-card {
	 margin-right: 1rem;
	 margin-left: 1rem;
	}
}

.course-card .course-card-background {
	max-height: 200px;
	overflow: hidden;
}

.course-card .course-card-background img {
	max-width: 100%;
}

.course-card .course-card-meta {
	padding: 1rem;
}

.course-card .course-card-meta .userPic {
	max-width: 46px;
	max-height: 46px;
	margin-bottom: 2rem;
	margin-top: -2rem;
}

.course-card .course-card-meta .userPic img {
	max-width: 100%;
}

.course-card .course-card-meta h2 {
	font-size: 1.25rem;
	margin-bottom: 0;
}

/* questionarie */
.qestionarie {
	border-radius: 16px;
	max-width: 640px;
	margin: 2rem auto;
}

@media only screen and (max-width: 414px) {
	.qestionarie {
		padding: 0;
		margin-right: 1rem;
		margin-left: 1rem;
	}
	
	.qestionarie .form-wrap {
		margin: .625rem auto 0;
	}
}

.qestionarie .q {
	font-size: 1.125rem;
	font-weight: 600;
	color: #000000;
	margin-bottom: 1rem;
	display: block;
}

.qestionarie fieldset {
	margin-bottom: 2rem !important;
}

.qestionarie .group-container {
	border-radius: 16px;
	padding: .625rem 1rem;
	background-color: #F3F3F3;	
}

.qestionarie .group-container .input-container {
	padding: .625rem 0;
}

.qestionarie .group-container .input-container:not(:last-child) {
	margin-bottom: 0;
	border-bottom: 1px solid #DCDCDC;
}

.qestionarie .group-container .input-container label[for] {
	font-weight: 400;
}

.qestionarie .group-container .input-container input[type="radio"] {
  position:absolute;
  clip: rect(0,0,0,0);
  clip: rect(0 0 0 0);
}

#foo:checked,
.qestionarie .group-container .input-container input[type="radio"] + label::before {
	margin-right: .625rem;
	position: relative;
	top: 4px;
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 64 64"><path d="M32 0C49.7 0 64 14.3 64 32 64 49.7 49.7 64 32 64 14.3 64 0 49.7 0 32 0 14.3 14.3 0 32 0ZM32 4C16.5 4 4 16.5 4 32 4 47.5 16.5 60 32 60 47.5 60 60 47.5 60 32 60 16.5 47.5 4 32 4ZM43.6 20.8L47.8 25.1 27.6 45.3 16.2 33.9 20.4 29.6 27.6 36.8 43.6 20.8Z" fill="%23DCDCDC"/></svg>');
}

.qestionarie .group-container .input-container input[type="radio"]:checked + label::before {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 60 60"><path d="M30 0C46.6 0 60 13.4 60 30 60 46.6 46.6 60 30 60 13.4 60 0 46.6 0 30 0 13.4 13.4 0 30 0ZM41.6 18.8L25.6 34.8 18.4 27.6 14.2 31.9 25.6 43.3 45.8 23.1 41.6 18.8Z" fill="%2300BC83"/></svg>');
}

.qestionarie .group-container .input-container input[type="radio"]:checked + label {
	font-weight: 700;
}

.qestionarie .good,
.qestionarie .bad {
	position: relative;
}

.qestionarie .good::after,
.qestionarie .bad::after {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 60 60"><path d="M30 0C46.6 0 60 13.4 60 30 60 46.6 46.6 60 30 60 13.4 60 0 46.6 0 30 0 13.4 13.4 0 30 0ZM36.9 18.8L30 25.8 23.1 18.8 18.8 23.1 25.8 30 18.8 36.9 23.1 41.2 30 34.2 36.9 41.2 41.2 36.9 34.2 30 41.2 23.1 36.9 18.8Z" fill="%23FF232E"/></svg>');
	position: absolute;
	right: -28px;
	top: 7px;
}
.qestionarie .good::after {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 60 60"><path d="M30 0C46.6 0 60 13.4 60 30 60 46.6 46.6 60 30 60 13.4 60 0 46.6 0 30 0 13.4 13.4 0 30 0ZM41.6 18.8L25.6 34.8 18.4 27.6 14.2 31.9 25.6 43.3 45.8 23.1 41.6 18.8Z" fill="%2300BC83"/></svg>');
}

/* results */
.result {
	max-width: 640px;
	margin: 2rem auto;
	border: 1px solid var(--coolgray);
	padding: 0;
}

@media only screen and (max-width: 414px) {
	.result {
		margin-right: 1rem;
		margin-left: 1rem;
	}
}

.result .head {
	height: 80px;
	background-color: var(--green);
	background-image: url('assets/title-bg.png');
	background-size: 140%;
	background-position: top 50% right -750px;
	background-repeat: no-repeat;
}

.result .content {
	padding: 1rem;
}

.result h1 {
	font-size: 4rem;
	font-weight: 900;
	color: var(--green);
}

.result h3 {
	font-size: 1.25rem;
	color: var(--blue);
}

/* lectures */
.lectures {
	max-width: 640px;
	margin: 2rem auto;
	padding: 1rem;
	border: 1px solid var(--coolgray);
	border-radius: 16px;
}

@media only screen and (max-width: 414px) {
	.lectures {
		margin-right: 1rem;
		margin-left: 1rem;
	}
}

.lectures ul {
	list-style-type: none;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

.lectures ul li {
	position: relative;
	z-index: 10;
	margin: 0 2rem;
	width: 32px;
	height: 32px;
	background-color: var(--gray);
	color: #ffffff;
	font-weight: 700;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 414px) {
	.lectures ul li {
		flex: 0 0 32px;
		margin: 0 .625rem;
	}
}

.lectures ul li:first-child {
	margin-left: 0;
}

.lectures ul li:last-child {
	margin-right: 0;
}

.lectures ul li:not(:last-child):after {
	top: 14px;
	left: 32px;
	content:'';
	width: 64px;
	height: 2px;
	background-color: var(--coolgray);
	position: absolute;
	z-index: 1;
}

@media only screen and (max-width: 414px) {
	.lectures ul li:not(:last-child):after {
		width: 20px;
	}
}

.lectures ul li.done {
	background-color: var(--green);
}

.lectures ul li.done:not(:last-child):after {
	background-color: var(--green);
}

hr {
	max-width: 640px;
	margin: 2rem auto;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.share {
	max-width: 640px;
	margin: 0 auto 3rem;
}

.share a {
	padding: 1rem;
	border-radius: 1rem;
	background-color: var(--blue);
	color: #ffffff;
	text-decoration: none;
}

@media only screen and (max-width: 414px) {
	.share {
		margin-right: 1rem;
		margin-left: 1rem;
	}
	
	.share a {
		display: block;
		margin-bottom: .625rem;
	}
}

.prizes {
	max-width: 640px;
	margin: 2rem auto;
}

.prizes ul {
	margin-top: 2rem;
	list-style-type: none;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

.prizes ul li {
	flex: 0 0 100px;
	position: relative;
	z-index: 10;
	margin: 0 1rem;
	width: 100px;
	height: 100px;
	background-color: #d7d8dc;
	color: #ffffff;
	font-weight: 700;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 414px) {
	.prizes ul li {
		width: 50px;
		height: 50px;
		flex: 0 0 50px;
		margin: 0 .625rem;
	}
}

.prizes .big-prize {
	margin: 2rem auto;
	width: 200px;
	height: 200px;
	background-color: #d7d8dc;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* user-details */
.profile-photo {
	max-width: 320px;
	max-height: 320px;
	margin: 1rem auto;
}

.profile-photo img {
	margin: 0 auto;
	max-width: 220px;
}

.user-details {
	max-width: 640px;
	margin: 2rem auto;
	border: 1px solid var(--coolgray);
	border-radius: 1rem;
	overflow: hidden;
}

@media only screen and (max-width: 414px) {
	.user-details {
		margin-right: 1rem;
		margin-left: 1rem;
	}
}

.user-details .row {
	padding: .312rem 0;
	display: flex;
	flex-flow: row nowrap;
}

.user-detais .row:not(:last-child) {
	margin-bottom: .625rem;
}

.user-details .row div {
	padding: .312rem .625rem;
	flex: 0 0 50%;
	text-align: left;
	line-height: 1.5;
}

@media only screen and (max-width: 414px) {
	.user-details .row {
		flex-flow: column nowrap;
	}
	
	.user-details .row div {
		line-height: 1.2;
	}
}

.user-details .row:nth-child(even) {
	background-color: #FFE4E4;
}

.user-details .row div h4 {
	font-weight: 600;
	color: var(--green);
}


/* home page */
.home {
	height: auto;
	background-color: #F9D7D2;
}

.home header {
	background-color: var(--green);
	background-image: url('assets/header-bg.png');
	background-size: 50%;
	background-position: top 110% right;
	background-repeat: no-repeat;
}

.home header .header-top {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	position: relative;
}

.home header .header-top > figure {
	margin-left: 60px;
}

.home header button {
	margin: 1rem 1rem 1rem auto;
}

.home header nav {
	margin-bottom: 1rem;
}

.home header nav ul {
	margin: 0 auto;
	list-style-type:  none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

.home header nav ul li:not(:last-child) {
	margin-right: 2rem;
}

.home header nav ul li a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	padding-bottom: .625rem;
	border: 2px solid transparent;
	transition: border 130ms linear;
}

.home header nav ul li a.active,
.home header nav ul li a:hover {
	border-bottom: 2px solid var(--turquoise);
}

/* mobile nav */
/*header nav ul li ul,
header nav .nav-logos {
	display: none !important;
}*/

@media only screen and (max-width: 60rem) {
	.nav-active {
		overflow-y: hidden;
	}
}

/*********************************************************************************************
Mobile Navigation
*********************************************************************************************/
/* @media screen and (max-width: 60rem) {*/
	header {
		position: inherit;
		transition-delay: .2s;
	}
	
	.nav-active {
		overflow: hidden;
	}
	
	.home header .btn-search {
		padding: .312rem !important;
	}
	
	.nav-active header svg {
		width: 203px;
		height: 38px;
	}
	
	.nav-active .btn-search svg {
		max-width: 24px !important;
		max-height: 24px !important;
	}
	
	#nav-toggle {
		display: block;
		-webkit-appearance: none;
		outline: 0;
		border: 0;
		cursor: pointer;
		position: absolute;
		left: 10px;
		top: 18px;
		width: 50px;
		height: 50px;
		z-index: 200;
	}
	
	.nav-toggle {
		background-color: transparent;
	}
	
	.nav-toggle .icon-hamb {
		fill: #ffffff;
		width: 48px;
		height: 48px;
		margin: 0 auto;
	}
	
	.nav-active .nav-toggle .icon-hamb {
		display: none;
	}
	
	.nav-toggle .icon-close {
		display: none;
		fill: #ffffff;
		width: 20px;
		height: 20px;
	}
	
	.nav-active .nav-toggle {
		transition: .2s;
		background-color: transparent;
	}
	
	.nav-active .nav-toggle .icon-close {
		display: block;
		margin: 0 auto;
	}
	
	.nav-toggle .screen-reader-text {
		position: absolute !important;
		clip: rect(1px,1px,1px,1px);
	}
	
	header nav {
		position: fixed;
		top: 0;
		padding: 0;
		margin: 0;
		background: rgba(0,0,0,.95);
		overflow: scroll;
		opacity: 0;
		visibility: hidden;
		backface-visibility: hidden;
		z-index: -1;
		width: 100%;
		max-height: 100vh;
		-webkit-transition: 120ms;
		transition: 120ms;
	}
	
	.nav-active header nav {
		top: 100px;
		opacity: 1;
		visibility: visible;
		z-index: 100;
		left: 0;
		padding: 1rem 2rem;
	}
	
	.nav-active header nav ul {
		text-align: left;
		flex-flow: column nowrap;
	}
	
	.nav-active header nav ul li a {
		text-transform: none;
		font-weight: 300;
		color: #ffffff;
		display: block;
	}
	
	.nav-active header nav .top-links ul {
		padding-top: 1rem;
		display: flex;
		flex-flow: row nowrap;
		padding-bottom: .625rem;
		border-bottom: 1px solid #646464;
	}
	
	.nav-active header nav .top-links ul li {
		flex: 0 1 50%;
		text-align: center;
	}
	
	.home header nav ul li:not(:last-child) {
		margin-right: 0;
	}
	
	.nav-active header nav ul li a {
		padding: .625rem 0;
	}
	
	.nav-active header nav ul li ul {
		padding-left: 1.25rem;
	}
	
	.nav-active header nav ul ul li a {
		color: #00BC83;
	}
	
	.nav-active header nav .nav-logos {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	
	.nav-active header nav .nav-logos {
		margin-top: 2rem;
	}
	
	.nav-active header nav .nav-logos figure:last-child img {
		max-width: 64px;
	}
	
	.nav-active header nav .nav-logos figure:first-child img {
		max-width: 100px;
	}
	
	header a.logo svg {
		max-width: 80px !important;
		margin-right: .625rem;
	}
/*}*/

@media only screen and (max-width: 320px) {
	header nav ol {
		flex-flow: column nowrap;
	}
	
	header nav ol li {
		flex: 0 1 auto;
		margin: 0 0 1rem 0;
	}
	
	header nav ol > li a {
		font-size: 1.125rem;
		letter-spacing: -.5px;
		line-height: 1.2;
	}
	
	nav ol li:not(:last-child) {
		margin-right: .625rem;
	}
	
	.nav-active > header nav ol {
		padding-bottom: 4rem;
	}
}

.home header .btn-search {
	padding: .625rem;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,.3);
	background-color: rgba(255,255,255,0.25);
}

.home header .btn-search svg {
	margin-bottom: 0;
}

.home main {
	padding-bottom: 0;
}

.home .hero {
	position: relative;
	/*min-height: 390px;
	background-color: #342C25;*/
	display: flex;
	margin-left: 12%;
	/* justify-content: center; */
	align-items: center;
	color: #ffffff;
}

/* .home .hero:after {
	content: '';
	background-image: url('assets/marker.png');
	width: 200px;
	height: 32px;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
} */

.home .hero h2 {
	color: #ffffff;
}

/* .home .hero .hero-wrap > div {
	display: flex;
	flex-flow: row nowrap;
} */

@media only screen and (max-width: 414px) {
	.home .hero .hero-wrap > div {
		flex-flow: column nowrap;
	}
}

.home .hero .hero-wrap div > div {
	flex: 0 1 480px;
	margin: auto 0;
}

@media only screen and (max-width: 414px) {

	header nav {
		width: auto !important;
	}

	#nav-toggle {
		right: 10px;
		left: 25% !important;
	}

	.home header .header-top > figure {
		margin-left: 105px;
	}

	a.logo {
		left: 10px !important;
		right: 85% !important;
	}

	.nav-active header nav {
		right: 0;
		left: 25% !important;
	}

	.nav-active header nav .top-links ul {
		flex-flow: column nowrap !important;
		border: 0 !important;
	}

	.home .hero .hero-wrap div > div {
		text-align: center;
		flex: 0 1 auto;
	}

	#action_ingresar {
		border-radius: 12px;
		padding: 0.3rem !important;
		width: 100%;
		border: 1px solid #fff;
	}

	#action_subscribirse {
		margin-top: 1.5rem;
	}

	#action_subscribirse a {
		font-weight: bold;
    	text-decoration: underline;
	}
	
}

.hero-wrap .left {
	margin-right: 2rem !important;
	text-align: justify;
	line-height: 5px;
}

.hero-wrap .left h2 {
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: 1px;
	/* color: #29245d; */
	color: white;
}

.hero-wrap .left h3 {
	font-size: 3rem;
	font-weight: 900;
}

.hero-wrap .right {
	margin-top: 0.7rem !important;
	text-align: left;
}

@media only screen and (max-width: 414px) {
	.hero-wrap .left {
		margin: 1rem 0 !important;
		text-align: center;
		line-height: 5px;
	}

	.hero-wrap .right{
		margin-top: 7rem !important;
		text-align: center;
		line-height: 5px;
	}

	.hero-wrap {
		width: 100% !important;
	}

	.hero-wrap .right .btn{	
		margin-top: 1rem !important;
		margin-bottom: 1rem !important;
		text-align: center;
		line-height: 5px;
		width: 20rem !important;
		border-radius: 12px;
		padding: 1.5rem !important;
	}

	.bg-banner{
		background-image: url("assets/img/aei_learning_panama_plant_.png") !important;
		background-size: cover;
		background-position: top center;
		background-repeat: no-repeat;
	
	}
	.bg-banner .shadow{
		background-color: rgb(0, 0 ,0 , 5%);
		width: 100% !important;
		height: 100%;
	}

	.home .hero {
		justify-content: center !important;
		margin-left: 0 !important;
	}
}

.hero-wrap .right .btn {
	background-color: transparent;
	color: #29245d;
	padding: 1rem 2rem;
	border: 2px solid #29245d;
}

.home .home-panel {
	background-color: #ffffff;
	margin: 0 auto;
	/*max-width: 1140px;*/
	padding: 4rem 0;
}

.home-panel .courses {
	margin: 0 auto 4rem;
	padding: 2rem 3rem;
	display: flex;
	flex-flow: column nowrap;
}

@media only screen and (max-width: 1080px) {
	.home .home-panel {
		padding: 0.2rem 0 !important;
	}

	.home-panel .courses {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}

	.home-panel .categories-section {
		padding-right: 0.25rem !important;
    	padding-left: 0.25rem !important;
	}
}

.courses .spot-head {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.courses .spot-head .btn {
	padding: 1rem 3rem;
}

@media only screen and (max-width: 414px) {
	.courses .spot-head .btn {
		padding-right: 1rem;
		padding-left: 1rem;	
		flex: 1 0 auto;
	}
}

.courses .spot-head h2 {
	margin-bottom: 0;
	padding: .875rem 1rem;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 2rem;
}

@media only screen and (max-width: 414px) {
	.courses .spot-head h2 {
		font-size: 1.25rem;
		text-align: left;
		flex: 0 1 auto;
	}

	.courses .course-avail ul {
		display: flex;
		flex-flow: initial !important;
		justify-content: space-between;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        overflow: auto;
        -ms-overflow-style: none; /* IE 11 */
        scrollbar-width: none; /* Firefox 64 */
	}

	.courses .course-avail ul li {
		display: inline-block !important;
	}
}

.courses .spot-head h2 span {
	font-weight: 700;
}

.courses .course-avail ul {
	list-style-type: none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

@media only screen and (max-width: 840px) {
	/* .courses .course-avail ul {
		flex-flow: column nowrap!important;
	} */
}

.courses .course-avail ul li {
	border: 1px solid #DDE6E8;
	flex: 0 0 320px;
	text-align: left;
	transition: all 140ms linear;
}

@media only screen and (max-width: 1180px) {
	.courses .course-avail ul li {
		flex: 0 1 auto;
	}
	
	.courses .course-avail ul li:not(:last-child) {
		margin-right: 1rem;
	}	
}

@media only screen and (max-width: 840px) {
	.courses .course-avail ul li {
		margin-bottom: 1.25rem;
		margin-right: 0 !important;
	}
}

.courses .course-avail ul li:hover {
	border-color: transparent;
	box-shadow: 0 10px 40px rgba(224,224,224,0.9);
}

.courses .course-avail ul li h2 {
	padding: 1rem;
	margin-bottom: 0;
	color: #ffffff;
	background-color: var(--turquoise);
	background-image: url('assets/title-bg.png');
	background-repeat: no-repeat;
	background-position: 280px -7px;
	background-size: 427px 68px;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
}

.courses .course-avail ul li:nth-child(even) h2 {
	background-color: var(--red);
}

.courses .course-avail ul li .course-meta {
	padding: 1.25rem;
}

.courses .course-avail ul li .course-meta .course-top {
	margin-bottom: .625rem;
	display: flex;
	flex-flow: row nowrap;
}

.courses .course-avail ul li .course-meta h3 {
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--green);
}

.courses .course-avail ul li .course-meta p {
	margin-bottom: .625rem;
}

.courses .course-avail ul li .course-meta .course-info-det {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.courses .course-avail ul li .course-meta .course-info-det figure {
	margin-right: .312rem;
}

@media only screen and (max-width: 1080px) {
	.courses .course-avail ul li > figure img {
		width: 100%;
	}
}

.courses .course-avail ul li .course-meta .course-info-det div {
	flex: 0 0 auto;
	display: flex;
	flex-flow: row nowrap;
	font-size: .875rem;
}

.courses .course-avail ul li .course-meta .course-info-det div figure {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.courses .course-avail ul li .course-meta .btn {
	margin-top: .625rem;
	width: 100%;
}

.courses.ours {
	padding-bottom: 4rem;
	margin-bottom: 0;
	background-color: #F5F7F7;
}

.ad-banner {
	background-image: url('assets/movistar.png');
	background-size: 100%;
}

@media only screen and (max-width: 1140px) {
	.ad-banner figure img {
		max-width: 100%;
	}
}

.sponsors {
	padding: 4rem 3rem;
}

.sponsors ul {
	list-style-type: none;
	justify-content: center;
	display: flex;
	flex-flow: row wrap;
}

.sponsors ul li {
	text-align: center;
	flex: 0 0 33.33%;
}

.sponsors ul li figure {
	margin-bottom: 2rem;
}

.sponsors ul li figure img {
	margin: 0 auto;
}

footer {
	padding: 2rem 1rem;
	background-color: #000000;
}

footer .footer-top {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-flow: row nowrap;
}

@media only screen and (max-width: 500px) {

	footer .footer-top {
		flex-flow: column nowrap;
	}
}

footer .footer-top > a {
	margin-right: 2rem;	
}
@media screen and (max-width: 500px) {
  	.logosfooter{ 
			width: 100%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
	}
	.logosfooter .item{ width: 75px !important; margin: 0 auto;}
	.logosfooter .item img{
		width: 100%;
		/*max-width: 100px!important;*/
		max-height: 75px!important
	}
	 .logosfooter .item svg{
		width: 100%!important;
		max-height: 100px!important;
		max-width: 75px;
	}
}

@media only screen and (max-width: 475px) {
	
}
@media only screen and (max-width: 375px) {
	footer .footer-top > a {
		margin-right: 0;
	}
}

footer .footer-top > a svg {
	max-width: 60px;
	max-height: 60px;
}

footer .footer-top .nav-footer {
	margin: auto auto auto 0;
}

footer .footer-top .nav-footer ul {
	list-style-type: none;
	display: flex;
	flex-flow: row nowrap;
}

@media only screen and (max-width: 414px) {
	footer .footer-top .nav-footer {
		margin: 0;
	}
	
	footer .footer-top .nav-footer ul {
		flex-flow: column nowrap;
		text-align: center;
	}
	
	footer .footer-top .nav-footer ul li {
		text-align: center !important;
	}
}

footer .footer-top .nav-footer ul li {
	text-align: left;
}

footer .footer-top .nav-footer ul li:not(:last-child) {
	margin-right: 1.25rem;
}

footer .footer-top .nav-footer ul li a {
	font-size: .875rem;
	text-decoration: none;
	color: #ffffff;
}

footer .linkmobile svg {
	width: 103px;
	height: 32px;
}

footer .linkmobile_logo  {
	display: flex;
	justify-content: center;
	height: 32px;
}

@media only screen and (max-width: 414px) {
	.footer-top figure img {
		margin: 0 auto;
	}
}

/* icons */
.icon {
	flex: 0 0 16px;
	max-width: 16px;
	max-height: 16px;
}

.icon.heart {
	margin-left: auto;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 100 93"><path fill="%2300BC83" d="M49.8 92.2C50.9 92.2 52.6 91.4 53.8 90.7 81.8 72.7 99.7 51.7 99.7 30.5 99.7 12.6 87.4 0 71.6 0 61.8 0 54.4 5.4 49.8 13.7 45.4 5.4 37.9 0 28.1 0 12.3 0 0 12.6 0 30.5 0 51.7 17.8 72.7 45.8 90.7 47.1 91.4 48.7 92.2 49.8 92.2Z"/></svg>');
	background-size: 16px 16px;
}

.icon.heartline {
	margin-left: auto;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="93" viewBox="0 0 100 93"><path d="M49.8 92.2C50.9 92.2 52.6 91.4 53.8 90.7 81.8 72.7 99.7 51.7 99.7 30.5 99.7 12.6 87.4 0 71.1 0 61.8 0 54.4 4.4 49.8 11.1 45.4 4.4 37.9 0 28.5 0 12.3 0 0 12.6 0 30.5 0 51.7 17.8 72.7 45.8 90.7 47.1 91.4 48.7 92.2 49.8 92.2ZM49.8 83C49.7 83 49.3 82.7 48.8 82.4 27.9 68.5 8.8 48.7 8.8 30.4 8.8 17.4 17.2 8.7 28.7 8.7 37.9 8.7 43.2 14.4 46.4 19.3 47.7 21.3 48.6 21.9 49.8 21.9 51.1 21.9 51.8 21.3 53.3 19.3 56.7 14.5 61.8 8.7 71 8.7 82.5 8.7 90.9 17.4 90.9 30.4 90.9 48.7 71.8 68.5 50.8 82.4 50.4 82.7 50 83 49.8 83Z" fill="%2300BC83"/></svg>');
	background-size: 16px 16px;
}

.icon.user {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="103" height="103" viewBox="0 0 103 103"><title>  user</title><g fill="none"><path d="M51.9 102.3C79.8 102.3 103 79.1 103 51.2 103 23.2 79.8 0 51.8 0 23.9 0 0.7 23.2 0.7 51.2 0.7 79.1 23.9 102.3 51.9 102.3ZM51.9 48.3C45 48.3 39.6 42.5 39.6 34.8 39.6 27.6 45 21.6 51.9 21.6 58.7 21.6 64.2 27.6 64.2 34.8 64.2 42.5 58.7 48.4 51.9 48.3ZM73.7 76L30.1 76C28.1 76 27.1 74.7 27.1 72.8 27.1 67.6 35 53.9 51.9 53.9 68.8 53.9 76.7 67.6 76.7 72.8 76.7 74.7 75.7 76 73.7 76Z" fill="%23FF232F"/></g></svg>');
	background-size: 16px 16px;
}

.icon.rating {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 112 107"><path d="M90 105.8C92.1 104.3 92.6 101.6 91.3 97.8L81 67 107.4 48C110.6 45.7 111.9 43.3 111.1 40.7 110.2 38.1 107.7 36.9 103.8 37L71.4 37.2 61.5 6.2C60.2 2.4 58.4 0.4 55.7 0.4 53 0.4 51.1 2.4 49.8 6.2L40 37.2 7.5 37C3.6 36.9 1.1 38.1 0.3 40.7 -0.6 43.3 0.7 45.7 3.9 48L30.4 67 20 97.8C18.7 101.6 19.2 104.3 21.4 105.8 23.5 107.5 26.2 106.9 29.4 104.6L55.7 85.4 81.9 104.6C85.1 106.9 87.8 107.5 90 105.8Z" fill="%23FF232F"/></svg>');
	background-size: 16px 16px;
}

.icon.clock {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="103" height="104" viewBox="0 0 103 104"><path d="M51.9 103.2C79.8 103.2 103 80 103 52 103 24.1 79.8 0.9 51.8 0.9 23.9 0.9 0.7 24.1 0.7 52 0.7 80 23.9 103.2 51.9 103.2ZM51.8 57.7L26.1 57.7C24 57.7 22.5 56.2 22.5 54.1 22.5 52 24 50.5 26.1 50.5L48.2 50.5 48.2 20.8C48.2 18.8 49.8 17.1 51.8 17.1 53.9 17.1 55.5 18.8 55.5 20.8L55.5 54.1C55.5 56.2 53.9 57.7 51.8 57.7Z" fill="%23FF232F"/></svg>');
	background-size: 16px 16px;
}

/* certificate */
.certificate {
	position: relative;
	margin: 2rem auto;
	width: 640px;
	height: 879px;
	background-image: url('assets/cert_pa.jpg');
	background-size: 640px 879px;
	background-repeat: no-repeat;
}

.certificate_2 {
    position: relative;
    margin: auto;
    width: 800px;
    height: 580px;
	background-size: 800px 580px;
    background-image: url('assets/cert_2.png');
    background-repeat: no-repeat;
}

.certificate_3 {
	position: relative;
	border: inset;
    border-color: black;
	margin: 2rem auto;
	width: 640px;
	height: 879px;
	background-image: url('assets/cert_3.png');
	background-size: 640px 879px;
	background-repeat: no-repeat;
}

.certificate_2 h1 {
	font-family: Times New Roman, serif;
    margin: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-weight: 700;
    color: #003F50;
    font-size: 28px;
}

@media only screen and (max-width: 680px) {
	.certificate {
		width: 500px;
		height: 686px;
		background-size: 500px 686px;
	}

	.certificate_3 {
		width: 500px;
		height: 686px;
		background-size: 500px 686px;
	}

	.certificate_2 {
		width: 500px;
		height: 686px;
		background-size: 500px 686px;
	}
}

@media only screen and (max-width: 520px) {
	.certificate {
		width: 440px;
		height: 604px;
		background-size: 440px 604px;
	}

	.certificate_3 {
		width: 440px;
		height: 604px;
		background-size: 440px 604px;
	}

	.certificate_2 {
		width: 440px;
		height: 604px;
		background-size: 440px 604px;
	}
}

@media only screen and (max-width: 460px) {
	.certificate {
		width: 390px;
		height: 535px;
		background-size: 390px 535px;
	}

	.certificate_3 {
		width: 390px;
		height: 535px;
		background-size: 390px 535px;
	}

	.certificate_2 {
		width: 350px;
    	height: 270px;
    	background-size: 350px 270px;
	}
}

@media only screen and (max-width: 375px) {
	.certificate {
		width: 360px;
		height: 494px;
		background-size: 360px 494px;
	}

	.certificate_3 {
		width: 319px;
		height: 494px;
		background-size: 319px 494px;
	}

	.certificate_2 {
		width: 340px;
    	height: 270px;
    	background-size: 340px 270px;
	}
}

@media only screen and (max-width: 320px) {
	.certificate {
		width: 300px;
		height: 412px;
		background-size: 300px 412px;
	}

	.certificate_3 {
		width: 300px;
		height: 412px;
		background-size: 300px 412px;
	}

	.certificate_2 {
		width: 300px;
		height: 412px;
		background-size: 300px 412px;
	}
}

.certificate h1 {
	font-family: Times New Roman, serif;
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	font-weight: 700;
	color: #003F50;
	font-size: 41px;
}


.certificate_3 h1 {
	font-family: 'PoppinsRegular' !important;
	/* font-family: Times New Roman, serif; */
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color: #003F50;
	font-size: 41px;
}

@media only screen and (max-width: 680px) {
	.certificate h1 {
		font-size: 36px;
	}

	.certificate_3 h1 {
		font-size: 36px;
	}
}

@media only screen and (max-width: 414px) {
	.certificate h1 {
		font-size: 24px;
	}

	.certificate_3 h1 {
		font-size: 12px;
	}
	.certificate_2 h1 {
		top: 46%;
		font-size: 15px;
	}
}

.certificate h2 {
	font-family: Times New Roman, serif;
	font-weight: 300;
	text-transform: uppercase;
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 68%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.certificate_3 h2 {
	font-family: 'PoppinsRegular' !important;
	/* font-family: Times New Roman, serif; */	
	color: #987E3F;
	font-weight: 300;
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 68%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

@media only screen and (max-width: 680px) {
	.certificate h2 {
		font-size: 24px;
	}

	.certificate_3 h2 {
		top: 70%;
		font-size: 15px;
	}
}

@media only screen and (max-width: 414px) {
	.certificate h2 {
		font-size: 20px;
	}

	.certificate_3 h2 {
		top: 68%;
		font-size: 15px;
	}
}

.certificate .time-date {
	font-family: 'PoppinsRegular' !important;
	font-size: 16px;
	font-weight: 600;
	position: absolute;
	top: 78%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.certificate_3 .time-date {
	font-size: 12px;
	font-weight: 600;
	position: absolute;
	top: 78%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

@media only screen and (max-width: 680px) {
	.certificate .time-date {
		font-size: 16px;
	}
}

@media only screen and (max-width: 460px) {
	.certificate .time-date {
		width: 100%;
		font-size: 16px;
	}
}

@media only screen and (max-width: 414px) {
	.certificate .time-date {
		width: 100%;
		font-size: 14px;
	}
}

/* new lesson */
.course-header {
	max-width: 100%;
	max-height: 400px;
	overflow: hidden;
}

.course-header img {
	transform: translateY(-20%);
	max-width: 100%;
}

.course-steps {
	margin: 2rem auto;
	max-width: 640px;
	border-radius: 14px;
	padding: 2rem 1rem;
	box-shadow: 0 2px 14px rgba(0,0,0,.25);
}

.course-steps ol {
	list-style-type: none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

.course-steps ol li {
	border-radius: 20px;
	padding: .312rem .624rem;
	border: 2px solid #D2DDE0;
	color: #D2DDE0;
	position: relative;
	background-color: #ffffff;
	margin:0 0.2rem;
}

@media only screen and (max-width: 320px) {
	.course-steps ol li {
		font-size: .875rem;
		font-weight: 700;
		padding: .156rem .312rem;
	}
}

.course-steps ol li:not(:last-child):after {
	content:'';
	display: block;
	width: 40px;
	height: 2px;
	background-color: #D2DDE0;
	position: absolute;
	top: 14px;
	left: 30px;
	z-index: -1;
}

@media only screen and (max-width: 375px) {
	.course-steps ol li:not(:last-child):after {
		width: 20px;
		top: 15px;
		left: 20px;
	}
}

@media only screen and (max-width: 320px) {
	.course-steps ol li:not(:last-child):after {
		width: 10px;
		top: 10px;
	}
}

.course-steps ol li.done {
	color: transparent;
	border-color: transparent;
}

.course-steps ol li.done:before {
	position: absolute;
	top: -2px;
	left: -2px;
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 60 60"><path d="M30 0C46.6 0 60 13.4 60 30 60 46.6 46.6 60 30 60 13.4 60 0 46.6 0 30 0 13.4 13.4 0 30 0ZM41.6 18.8L25.6 34.8 18.4 27.6 14.2 31.9 25.6 43.3 45.8 23.1 41.6 18.8Z" fill="%2300BC83"/></svg>');
}

@media only screen and (max-width: 320px) {
	.course-steps ol li.done:before {
		content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 60 60"><path d="M30 0C46.6 0 60 13.4 60 30 60 46.6 46.6 60 30 60 13.4 60 0 46.6 0 30 0 13.4 13.4 0 30 0ZM41.6 18.8L25.6 34.8 18.4 27.6 14.2 31.9 25.6 43.3 45.8 23.1 41.6 18.8Z" fill="%2300BC83"/></svg>');
	}
}

.course-steps ol li.done:after {
	background-color: #00BC83;
}

.course-steps ol li.active:before {
	position: absolute;
	top: -20px;
	left: 6px;
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" viewBox="0 0 23 13"><polygon points="20.5 -0.1 22.6 2.1 11.8 12.9 0.9 2.1 3.1 -0.1 11.8 8.6" fill="%23648A94"/></svg>');
}

@media only screen and (max-width: 320px) {
	.course-steps ol li.active:before {
		left: 0;
	}	
}

.course-details {
	text-align: left;
	max-width: 920px;
	margin: 2rem auto;
}

.course-details h1 {
	text-align: left;
	margin-bottom: .625rem;
	font-size: 2rem;
	font-weight: 700;
	color: var(--blue);
}

.course-details-meta ul {
	list-style-type: none;
	border-top: 1px solid #D2DDE0;
}

.course-details-meta ul li {
	text-align: left;
}

.course-details-meta ul li:not(:first-child) {
	display: flex;
	flex-flow: row nowrap;
}

.course-details-meta.lesson ul li {
	display: flex;
	flex-flow: row nowrap;
}

.course-details-meta ul li {
	padding: .625rem 0;
	border-bottom: 1px solid #D2DDE0;
}

.course-details-meta ul li div:first-child {
	flex: 0 0 100px;
}

.course-details-meta.lesson ul li div:first-child {
	flex: 0 0 160px;
}

.course-details-meta ul li div:first-child h4,
.course-details-meta ul li:first-child h4 {
	font-weight: 700;
	color: var(--blue);
}

.course-details-meta ul li div:last-child p,
.course-details-meta ul li:first-child p {
	font-weight: 300;
}

.course-details h5 {
	padding: .312rem;
	background-color: #003E52;
	text-transform: uppercase;
	font-size: 1rem;
	color: #ffffff;
	font-weight: 700;
	text-align: left;
	display: inline-block;
}

.course-lesson-list {
	margin: 2rem auto;
}

.course-lesson-list h3 {
	text-align: left;
	font-weight: 700;
	margin-bottom: .625rem;
}

.course-lesson-list ol {
	padding: 1rem;
	border-radius: 16px;
	background-color: #F3F3F3;
	list-style: none;
	counter-reset: my-awesome-counter;
}

.course-lesson-list ol li {
	padding: 1rem 0 1rem 2rem;
	counter-increment: my-awesome-counter;
	text-align: left;
}

.course-lesson-list ol li:not(:last-child) {
	border-bottom: 1px solid #DCDCDC;
}

.course-lesson-list ol li::before {
  content: counter(my-awesome-counter);
	color: #ffffff;
	padding: .312rem .625rem;
  font-weight: 700;
	background-color: #A0A0A0;
	border-radius: 20px;
	margin-right: 12px;
	position: absolute;
	margin-left: -45px;
}

.course-lesson-list ol li.completed::before {
	background-color: #00BC83;
	position: absolute;
}

.lesson-content {
	max-width: 920px;
	margin: 2rem auto;
	text-align: left;
}

.lesson-content figure {
	margin-bottom: 2rem;
}

.lesson-content h2 {
	font-size: 1.25rem;
	margin-bottom: .625rem;
}

.lesson-content p {
	line-height: 1.8;
	margin-bottom: 1rem;
}

.lesson-content p + h2 {
	margin-top: 2rem;
}



@media only screen and (max-width: 375px) {
	.lesson-content p iframe {

		width: 300px;
		height: 200px;
	}
}

@media only screen and (max-width: 450px) {
	.lesson-content p iframe {

		max-width: 350px;
		max-height: 250px;
	}
}

.menu-right {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	box-shadow: 0 12px 20px rgba(0,0,0,.15);
}

.menu-right ul {
	list-style-type: none;
}

.menu-right ul li a {
	display: block;
	padding: .625rem 1rem;
}

.menu-right ul li a svg {
	max-width: 24px;
	max-height: 24px;
}

.default-pictures {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}

.default-pictures button {
	background-color: #ffffff;
}

.default-pictures button img {
	max-width: 64px;
}

@media only screen and (max-width: 440px) {
	.default-pictures button img {
		max-width: 42px;
	}	
}

/* profile */
.profile h1 {
	margin: 0;
	max-width: 640px;
	text-align: left;
	font-size: 2rem;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1;
}

.profile span {
	font-weight: 700;
	display: block;
}

.profile h3 {
	max-width: 640px;
	margin: 2rem 0 1rem;
	font-size: 1.25rem;
	text-transform: uppercase;
	font-weight: 700;
	color: #646464;
	text-align: left;
}

.profile .img {
	background-color: #ffffff;
	padding: .625rem;
	margin: 0rem auto 4rem;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	border: 1px solid #D2DDE0;
	font-size: 1.25rem;
	color: #003E52;
}

.profile .img svg {
	max-width: 32px;
	max-height: 32px;
	margin-right: 1rem;
}

.profile .ac svg {
	max-width: 100px;
	max-height: 100px;
	margin: 2rem auto;
}

/* results new */
.lesson-results {
	max-width: 640px;
	margin: 2rem auto;
	background-color: #F3F3F3;
	padding: 1rem;
	border-radius: 16px;	
}

.lesson-results h4 {
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #505050;
	margin-bottom: .625rem;
}

.lesson-results div {
	padding: 1rem 0;
}

.lesson-results div:first-child {
	border-bottom: 1px solid #DCDCDC;
}

.sponsors ul {
	list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 5px; 
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 500px) {
	.sponsors ul {
		grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 
	}
}

.sponsors .figure_sponsor img {
    max-width: 100%; 
    max-height: 120px; 
    object-fit: contain; 
}

.figure_sponsor_dpd img {
    max-width: 100%; 
    max-height: 160px; 
    object-fit: contain; 
}