* { margin: 0; padding: 0; }

body {
	background: #eee;
	font-family: sans-serif;
}

body.index { background: #fff; }

a {
	color: #111;
	text-decoration: none;
	transition: .3s color;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Orelega One', sans-serif;
	font-weight: normal;
	line-height: 1.05;
	margin-bottom: 1em;
}

h2 {
	font-size: 27px;
}

h3 {
	font-size: 25px;
}

h4 {
	font-size: 23px;
}

p {
	line-height: 1.42;
	margin: .5em 0;
}

mark { background-color: #fea; }

.dim { color: #777; }

.container { margin: 0 auto; width: 92%; }

.btn,
input[type=submit] {
	background-color: #1574d9;
	border: none;
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	font-weight: bold;
	padding: .65em 1.2em .6em;
}

label { color: #666; }
label:after { content: ''; display: block; }

input[type=text],
input[type=password],
select,
textarea {
	border: 1px solid #ccc;
	font-size: 16px;
	font-family: sans-serif;
	margin: 5px 0;
	outline: none;
	padding: .6em;
	max-width: 100%;
}

input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus { border-color: #05c; }

button,
input[type=submit] {
	font-size: 16px;
	padding: .6em 1em;
}

form .form-group { margin-bottom: 1em; }

form .error {
	color: #f1675b;
	font-size: 90%;
}


header {
	border-bottom: 1px solid #eee;
	padding: 1em 0;
	margin-bottom: 2em;
}

header .container {
	align-items: center;
	display: flex;
	justify-content: space-between;
	max-width: none;
}

header .container > div { align-items: center; display: flex; }

header .logo a {
	align-items: center;
	border: none;
	display: flex;
	font-size: 20px;
	line-height: 1;
}
header .logo img { margin-right: 15px; max-height: 75px; max-width: 75px; }
header .logo strong { color: #0055ce; font-size: 27px; display: block; font-family: "Orelega One", sans-serif; font-weight: normal; }
header .logo small { color: #777; font-size: 13px; }

header .account { margin-left: 2em; }

footer {
	margin-top: 2em;
	min-height: 50px;
}

.social-icons {  }
.social-icons a {
	background: url(/i/sc-icons.png) no-repeat;
	border: none;
	border-radius: 50%;
	display: inline-block;
	height: 30px;
	margin-left: 5px;
	width: 30px;
	transition: 1s all;
	}

.social-icons a.fb { background-position: -30px 0; }
.social-icons a.ok { background-position: -60px 0; }
.social-icons a.tw { background-position: -90px 0; }
.social-icons a.ig { background-position: -120px 0; }
.social-icons a.yt { background-position: -150px 0; }
.social-icons a.tg { background-position: -180px 0; }
.social-icons a.dg { background-position: -210px 0; }

.index .main.container {
	margin: 0 auto;
	width: 92%;
}

.home h2 {
	font-size: 32px;
}

.home h5 {
	font-size: 23px;
}

.note {
	border: 1px solid #f5cb9a;
	border-radius: 10px;
	margin-bottom: 3em;
	padding: 1.2em 1.5em .8em;
}
.note h6 { color: #fa6812; font-size: 20px; margin-bottom: .5em; }
.note p {
	font-size: 14px;
}

.about { margin-top: 5em; }
.about p { font-size: 15px; color: #777; }

.lesson-list { display: flex; flex-wrap: wrap; }

.lesson-list > a {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 16px #eee;
	margin: 0 2em 1em 0;
	max-width: 400px;
	padding: 1.5em 2em 1.3em;
	transition: .5s all;
}
.lesson-list > a:hover { box-shadow: 8px 8px 32px #eee; }

.lesson-list h5 {
	color: #2762bb;
	margin-bottom: 1em;
}
.lesson-list p { color: #999; }

.lesson-list .tags span {
	background-color: #eee;
	border-radius: 4px;
	color: #333;
	display: inline-block;
	font-size: 13px;
	margin: 0 .2em;
	padding: .3em .7em;
}

.lesson-list .btn { margin-top: 1em; }



.lesson {
	box-sizing: border-box;
	overflow: hidden;
	padding-left: 25%;
	position: relative;
	width: 100%;
}

.lesson-container {
	align-items: center;
	display: flex;
	height: 80vh;
	transform: translateX(0vw);
	transition: transform .5s ease-in-out;
	width: 9999%;
}

.lesson-slide {
	align-items: center;
	background: #fff;
	border-radius: 20px;
	box-sizing: border-box;
	display: flex;
	font-family: 'Orelega One', sans-serif;
	margin: 0 20px;
	height: 80vh;
	max-height: 800px;
	opacity: .7;
	overflow: hidden;
	position: relative;
	transform: scale(0.9);
	transition: .3s all;
	width: 400px;
}

.lesson-slide.active {
	opacity: 1;
	transform: scale(1);
}

.lesson-nav {
	align-items: center;
	bottom: 15px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	left: 0;
	margin: 0 5%;
	position: fixed;
	width: 90%;
}

.lesson-nav .slide-prev,
.lesson-nav .slide-next {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23222' d='M9 17.523L10.39 19 17 12l-6.61-7L9 6.477 14.215 12z'/%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
	display: inline-block;
	height: 30px;
	width: 30px;
}

.lesson-nav .slide-next {  }
.lesson-nav .slide-prev { transform: scaleX(-1); }

.lesson-nav .dots > span {
	background: #ddd;
	border-radius: 50%;
	display: inline-block;
	height: 6px;
	margin: 0 2px;
	width: 6px;
}

.lesson-nav .dots > span.active { background-color: #9cd39c; }

.lesson-slide.lesson-cover { justify-content: center; }
.lesson-slide.lesson-cover > div { text-align: center; }
.lesson-slide.lesson-cover h1 { font-size: 36px; margin: .5em 0; }
.lesson-slide.lesson-cover p { font-family: "Montserrat", sans-serif; }
.lesson-slide.lesson-cover p > span {
	background-color: #eee;
	border-radius: 4px;
	font-size: 13px;
	display: inline-block;
	margin: 0 .2em;
	padding: .3em .7em;
}

.lesson-slide > .text-slide,
.lesson-slide > .audio-slide {
	align-items: center;
	background-size: cover;
	background-position: center;
	display: flex;
	font-size: 24px;
	height: 100%;
	justify-content: center;
	padding: 10%;
	text-align: center;
	width: 100%;
}
.lesson-slide > .audio-slide { align-items: flex-end; }
.lesson-slide > .audio-slide .play-button {
	background: #fff;
	border-radius: 50%;
	display: block;
	height: 100px;
	margin-bottom: 10%;
	position: relative;
	width: 100px;
}
.lesson-slide > .audio-slide .play-button > button {
	background: none;
	border-color: transparent transparent transparent #1574d9;
	border-style: solid;
	box-sizing: border-box;
	border-width: 20px 0px 20px 32px;
	height: 32px;
	left: 50%;
	margin: -20px 0 0 -10px;
	padding: 0;
	position: absolute;
	top: 50%;
	width: 32px;
}
.lesson-slide > .audio-slide .play-button svg {
	animation: none;
	animation-timing-function: linear;
	height: 100%;
	left: 0;
	position: absolute;
	stroke-dasharray: 299; /* 2 * pi * r */
	stroke-dashoffset: 299;
	top: 0;
	transform: rotate(-90deg);
	width: 100%;	
}
.lesson-slide > .audio-slide .play-button svg.progress { animation-name: roundprogress; }
@keyframes roundprogress { to { stroke-dashoffset: 0; } }

.video-container { max-width: 100%; }
.video-container video {
	position: absolute;
	z-index: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.lesson-slide .lessonblock-bg-00 { background: white; box-shadow: inset 0 0 1px #999; }
.lesson-slide .lessonblock-bg-01 { background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); }
.lesson-slide .lessonblock-bg-02 { background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%); }
.lesson-slide .lessonblock-bg-03 { background-image: linear-gradient(to bottom, #ffecd2 0%, #fcb69f 100%); }
.lesson-slide .lessonblock-bg-04 { background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); }
.lesson-slide .lessonblock-bg-05 { background-image: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%); }
.lesson-slide .lessonblock-bg-06 { background-image: linear-gradient(to right, #141e30, #243b55); }
.lesson-slide .lessonblock-bg-image { color: #fff; }

.imagepick {
	margin: 0 auto;
	text-align: center;
	width: 90%;
}

.imagepick p {
	font-size: 20px;
	line-height: 1.2;
	margin-bottom: 1em;
}

.imagepick .variants {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 1em;
}

.imagepick .variants > div {
	background-size: cover;
	background-position: center;
	border-radius: 5px;
	margin-bottom: 4%;
	overflow: hidden;
	padding-bottom: 48%;
	position: relative;
	width: 48%;
}

.imagepick .variants label {
	border: 5px solid transparent;
	box-sizing: border-box;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.imagepick .variants .active { border-image: linear-gradient(to bottom, #fa0, #d40) 1; }
.imagepick .variants input { opacity: 0; }


.login {
	margin: 0 auto;
	width: 92%;
}

.login form {
	display: block;
	margin: auto auto;
	width: 200px;
}

.login form input {
	box-sizing: border-box;
	width: 100%;
}


.viewed { display: flex; flex-wrap: wrap; }

.viewed > a {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 16px #eee;
	margin: 0 2em 1em 0;
	min-width: 100px;
	padding: 1.5em 2em 1.3em;
	transition: .5s all;
}
.viewed h5 {
	color: #2762bb;
	font-size: 20px;
	margin-bottom: 1em;
}
.viewed p { color: #999; }

.viewed .tags span {
	background-color: #eee;
	border-radius: 4px;
	color: #333;
	display: inline-block;
	font-size: 13px;
	margin: 0 .2em;
	padding: .3em .7em;
}