@font-face {
	font-family: 'TT Commons Classic'; /* 400 */
	src: url('/static/fonts/TT_Commons_Classic/TT_Commons_Classic_Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'TT Commons Classic'; /* 500 */
	src: url('/static/fonts/TT_Commons_Classic/TT_Commons_Classic_Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'TT Commons Classic'; /* 700 */
	src: url('/static/fonts/TT_Commons_Classic/TT_Commons_Classic_DemiBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	font-family: 'TT Commons Classic', sans-serif;
	background-color: #fcfdff;
	color: #001522;
}
body.modal { overflow: hidden }
body.modal .app { filter: blur(4px) }

.modal .overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: .5s;
}
.overlay {
	position: fixed;
	z-index: 5;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: .5s;
	display: none;
	background-color: rgb(0, 21, 34, .75);
}
.modal.video .modal_box,
.modal.book .modal_box {
	transform: none;
	top: 55px;
	z-index: 10;
	pointer-events: all;
	opacity: 1;
}
.modal_box {
	transform: scale(.75) translateY(-21px);
	position: fixed;
	top: -100%;
	left: 0;
	right: 0;
	width: max-content;
	margin: 0 auto;
	overflow: hidden;
	transition: .3s;
	opacity: 0;
	z-index: -1;
	pointer-events: none;
}
.modal.side .sidebar {
	right: 0;
	z-index: 10;
}
.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	right: -100%;
	width: 100%;
	z-index: -1;
	transition: .3s;

	display: grid;
	align-items: center;
	width: 450px;
	background-color: #fff;
	padding: 0 25px;
	overflow: hidden;
}
.ajax {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgb(255, 255, 255, .75);
	z-index: -1;
	opacity: 0;
}
.ajax.show {
	opacity: 1;
	z-index: 13;
}
.sidebar .sidebar_box.show {
	transform: none;
	opacity: 1;
	position: relative;
}
.sidebar .sidebar_box {
	position: absolute;
	display: grid;
	gap: 15px;
	opacity: 0;
	transition: .5s;
	transform: translate3d(-200%, 0, 0);
}

.sidebar .close {
	position: absolute;
	top: 25px;
	right: 25px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #a6a8b5;
	z-index: 11;
	cursor: pointer;
}
.sidebar .close:hover { color: #0193eb }
.sidebar .close:hover img { filter: invert(47%) sepia(98%) saturate(3255%) hue-rotate(178deg) brightness(96%) contrast(99%) }
.sidebar_header {
	font-size: 32px;
	text-align: center;
}
.sidebar_body {
	display: grid;
	gap: 25px;
	padding: 15px 0;
}
.sidebar_box .btn {
	font-size: 18px;
	font-weight: 500;
	justify-content: center;
}
.form_data {
	display: grid;
	gap: 25px;
	position: relative;
}
.form_data .error_msg {
	position: absolute;
	color: #ff4b4b;
	opacity: 0;
	transition: opacity 1s ease-out .3s;
}
.form_data .error_msg.show { opacity: 1 }

.form_data label {
	display: grid;
	gap: 5px;
	font-size: 16px;
	color: #001522;
}
.form_data input {
	padding: 15px;
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid #e8ebf1;
	outline: none;
	width: auto;
}
.form_data input.invalid { border-color: #ff4b4b }
.password_box {
	display: flex;
	position: relative;
}
.password_box input {
	padding-right: 45px;
	width: 100%;
}
.password_box a {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;

	display: block;
	width: 24px;
	height: 24px;

	background-size: 24px;
	background-position: center;
	background-repeat: no-repeat;

	cursor: pointer;
}
.password_box a:hover { filter: invert(47%) sepia(98%) saturate(3255%) hue-rotate(178deg) brightness(96%) contrast(99%) }
.password_box a.show { background-image: url('/static/images/icons/ic_show.svg') }
.password_box a.hide { background-image: url('/static/images/icons/ic_hide.svg') }

.btn_user_img {
	position: relative;
	width: max-content;
}
.btn_user_img div {
    width: 100px;
    height: 100px;
    background-color: #e6e7eb;
    border-radius: 8px;
    background-image: url(/static/images/icons/ic_camera.svg);
    background-repeat: no-repeat;
	background-size: 20px;
    background-position: center;
	cursor: pointer;
}
.btn_user_img div.photo { background-size: cover }
.btn_user_img div:hover { filter: brightness(115%) }
.btn_user_img input {
	opacity: 0;
	position: absolute;
	width: 100px;
	padding: 0;
}

.right { text-align: right }

.sidebar_hint {
	display: grid;
	gap: 10px;
	color: #a6a8b5;
	justify-items: center;
	text-align: center;
}
.social_btn_box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
}
.social_btn_box .btn:hover img { filter: invert(47%) sepia(98%) saturate(3255%) hue-rotate(178deg) brightness(96%) contrast(99%) }

video { object-fit: contain }
h1, h2, h3, h4, h5, h6 { margin: 0 }
a {
	text-decoration: none;
	color: #001522;
}
a.blue {
	color: #0193eb;
	cursor: pointer;
}
a.blue:hover { text-decoration: underline }

.app {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.btn {
	display: flex;
	align-items: center;
	border-radius: 5px;
	color: #fff;
	border: 1px solid #0193eb;
	background-color: #0193eb;
	padding: 12px 24px;
	cursor: pointer;
}
.btn:hover { opacity: .75 }
.btn_outline {
	justify-content: center;
	background-color: #fff;
	border: 1px solid #dbdce1;
}
.btn_outline:hover { background-color: #dbdce1 }

.header {
	display: flex;
	width: 100%;
	flex-direction: column;
	box-shadow: 0 6px 10px -2px rgb(195, 201, 214, .28);
	background-color: #fff;
}
.header_bar {
	display: flex;
	align-items: stretch;
}
.header_bar .app_logo {
	flex: 0 0 15%;
}
.header_bar .app_logo a { display: flex }
.header_bar .app_logo img {
	max-width: 100%;
	padding: 20px 10px 20px 0;
}
.header_bar .app_menu {
	flex: 1;
	display: flex;
	justify-content: center;
}
.header_bar .app_menu a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
}
.header_bar .app_menu a span {
	display: flex;
	align-items: center;
	height: 100%;
	border-bottom: 2px solid transparent;
}
.header_bar .app_menu a.current span,
.header_bar .app_menu a:hover span {
	border-bottom: 2px solid #0193eb;
}

.header_bar .app_language {
	display: flex;
	padding: 0 10px;
	align-items: center;
	border-bottom: 2px solid transparent;
}
.header_bar .app_language .curr_lang {
	display: flex;
	align-items: center;
	border-radius: 5px;
	border: 1px solid #dbdce1;
	padding: 12px 24px;
}
.header_bar .app_language .curr_lang img {
	max-width: 20px;
	padding-right: 5px;
}
.header_bar .app_language .lang_list {
	position: absolute;
	opacity: 0;
	transition: .5s;
	z-index: -1;
	display: flex;
	flex-direction: column;
	top: 55px;
	right: 0;
	z-index: -1;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0px 0px 30px 1px rgb(0, 0, 0, .05);
	padding: 0;
}
.header_bar .app_language .lang_list a { padding: 5px 25px }
.header_bar .app_language .lang_list a:hover { background-color: rgb(0, 0, 0, .05) }
.header_bar .app_language .lang_box {
	display: flex;
	position: relative;
	cursor: pointer;
}
.header_bar .app_language .lang_box:hover .curr_lang { background-color: #dbdce1 }
.header_bar .app_language .lang_box:hover .lang_list {
	opacity: 1;
	z-index: 1;
}

.header_bar .app_sign {
	display: flex;
	padding: 0 10px;
	align-items: center;
	border-bottom: 2px solid transparent;
}

.splash_wrap {
	display: flex;
	padding: 55px 0;
	position: relative;
	overflow: hidden;
}
.splash_wrap .splash_arc {
	position: absolute;
	top: -180px;
	right: -162px;
	z-index: 0;
}
.splash_wrap .splash_meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.splash_wrap .splash_meta .splash_text {
	font-size: 3em;
	font-weight: 600;
	margin-bottom: 25px;
}
.splash_wrap .splash_meta .splash_text b {
	font-weight: 600;
	color: #0193eb;
}
.splash_wrap .splash_meta .splash_desc {
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 25px;
}
.splash_wrap .splash_img { flex: 0 0 40% }
.splash_wrap .splash_img img { max-width: 100% }

.levels_wrap {
	display: flex;
	justify-content: center;
	gap: 25px;
	overflow-x: scroll;
	padding: 35px 0;
}
.levels_wrap::-webkit-scrollbar { display: none }
.levels_wrap a {
	display: flex;
	padding: 24px;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0px 0px 30px 1px rgb(195, 201, 214, .28);
	min-width: 294px;
}
.levels_wrap a:hover { background-color: #ebedf3 }
.levels_wrap a img {}
.levels_wrap a .level_meta {
	display: flex;
	flex-direction: column;
	padding-left: 15px;
}
.levels_wrap a .level_meta h6 {
	margin: 0;
	color: #001522;
	font-size: 26px;
}
.levels_wrap a .level_meta span {
	font-size: 20px;
	font-weight: 300;
	text-wrap: nowrap;
}

.advantages {
	padding: 35px;
	text-align: center;
	position: relative;
}
.advantages .left_oblique {
	position: absolute;
	top: 100px;
	left: -50px;
	z-index: 0;
} 
.advantages_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
	margin: 55px 0;
}
.advantages_wrap .advantage_box {
	display: grid;
	justify-items: center;
	align-items: center;
}
.advantages_wrap .advantage_box img {
	max-width: 192px;
	margin-bottom: 25px;
}

.reviews { padding: 35px 0 }
.reviews .reviews_wrap { display: flex }
.reviews .reviews_wrap .review_meta {
	flex: 0 0 40%;
	display: flex;
	flex-direction: column;
}
.reviews .reviews_wrap .review_meta h1 {
	font-size: 2em;
	margin-bottom: 35px;
}
.reviews .reviews_wrap .review_meta img { max-width: 200px }
.reviews .review_list { display: flex }
.reviews .review_list .review_carousel {
	display: flex;
	align-items: flex-end;
}
.reviews .review_list .review_carousel .review_box {
	display: flex;
	flex-direction: column;
}
.reviews .review_list .review_carousel .review_box .review_text { padding: 15px 0 }
.reviews .review_list .review_carousel .review_box .review_author {
	display: flex;
	align-items: center;
}
.reviews .review_list .review_carousel .review_box .review_author img {
	max-width: 56px;
	border-radius: 50%
}
.reviews .review_list .review_carousel .review_box .review_author span {
	padding-left: 15px;
	font-size: 18px;
	font-weight: 600;
}

.mobile_app {
	background-color: #003f65;
	padding: 35px 0;
}
.mobile_app .mobile_app_wrap {
	display: flex;
	padding: 35px 0;
}
.mobile_app .mobile_app_wrap .mobile_app_meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	color: #fff;
}
.mobile_app .mobile_app_wrap .mobile_app_meta h1 { font-size: 3em }
.mobile_app .mobile_app_wrap .mobile_app_meta p {
	font-size: 24px;
	font-weight: 300;
}
.mobile_app .mobile_app_wrap .mobile_app_meta .mobile_app_info { display: flex }
.mobile_app .mobile_app_wrap .mobile_app_meta .mobile_app_info .mobile_app_info_box { flex: 1 }
.mobile_app .mobile_app_wrap .mobile_app_meta .mobile_app_info .mobile_app_info_box p { margin: 10px 0 }

.mobile_app .mobile_app_wrap .mobile_app_icons {
	flex: 1;
	display: flex;
}
.mobile_app .mobile_app_wrap .mobile_app_icons .mobile_app_download {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin: 0 15px;
	padding: 25px;
	border-radius: 25px;
	background-color: rgb(255, 255, 255, .12);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.mobile_app .mobile_app_wrap .mobile_app_icons .mobile_app_download .ic_mobile {
	position: absolute;
	right: -15px;
	bottom: -15px;
	width: 100px;
	height: 100px;
}
.mobile_app .mobile_app_wrap .mobile_app_icons .mobile_app_download .ic_mobile.ios { background-image: url('/static/images/icons/ic_iOS.svg') }
.mobile_app .mobile_app_wrap .mobile_app_icons .mobile_app_download .ic_mobile.android { background-image: url('/static/images/icons/ic_android.svg') }
.mobile_app .mobile_app_wrap .mobile_app_icons .mobile_app_download h6 { font-size: 24px }

.mobile_app .mobile_app_wrap .mobile_app_icons .mobile_app_download a { width: max-content }
.mobile_app .mobile_app_wrap .mobile_app_icons .mobile_app_download img {
	max-width: 100px;
	border-radius: 10px;
}

.module_header {
	padding: 75px 0;
	text-align: center;
}
.module_level {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 8px;
	background-color: #fff;
	overflow: hidden;
	padding: 0 25px;
	box-shadow: 0 3px 20px 0 rgb(195, 201, 214, .28);
	margin-bottom: 35px;
}
.module_level a { padding: 25px 0 }
.module_level a:hover { color: #0193eb }
.module_level a.current { border-bottom: 2px solid #0193eb }

.module_list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-bottom: 35px;
}

.lesson_box {
	display: flex;
	gap: 15px;
	padding: 15px;
	background-color: #fff;
	box-shadow: 0 3px 20px 0 rgb(195, 201, 214, .28);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}
.lesson_box a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.lesson_box:hover { background-color: #ebedf3 }
.lesson_list .module_wrap:nth-child(even) .lesson_box { margin-right: 0 }
.lesson_box .lesson_img {
	max-width: 100px;
	border-radius: 8px;
}
.lesson_box .lesson_meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.lesson_box .lesson_meta h5 {
	font-size: 18px;
	font-weight: 400;
}
.lesson_box .lesson_meta .lesson_info {
	display: flex;
	align-items: center;
	gap: 15px;
}
.lesson_box .lesson_meta .lesson_info .lesson_info_box {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 300;
	color: #7b7e90;
}
.lesson_box .lesson_meta .lesson_info .lesson_info_box span { padding: 0 10px }
.lesson_box .lesson_status { }
.status_bar {
	overflow: hidden;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	background-color: #f0f2f7;
	position: relative;
}
.status_bar .status_val {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 4px;
	border-radius: 4px;
	background-color: #0193eb;
}

.lesson_buttons_wrap {
	display: flex;
	gap: 15px;
	justify-content: space-around;
	padding: 55px 0;
}
.lesson_buttons_wrap .lesson_button_box { flex: 1 }
.lesson_buttons_wrap .lesson_button_box .lesson_button {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 3px 20px 0 rgb(195, 201, 214, .28);
	padding: 40px 0;
}
.lesson_buttons_wrap .lesson_button_box:last-child .lesson_button { margin-right: 0 }
.lesson_buttons_wrap .lesson_button_box img { max-width: 140px }
.lesson_buttons_wrap .lesson_button_box h3 { margin: 15px 0 }
.lesson_buttons_wrap .lesson_button_box a {
	margin-top: 15px;
	padding: 12px 45px;
}

.text_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}
.text_list .text_box {
	display: grid;
	gap: 10px;
	border-radius: 10px;
	padding: 15px;
	background-color: #fff;
	box-shadow: 0 3px 20px 0 rgb(195, 201, 214, .28);
	position: relative;
}
.text_list .text_box:hover { background-color: #ebedf3 }
.text_list .text_box:hover .img { background-size: 115% }
.text_list .text_box .img {
	width: 100%;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	aspect-ratio: 16/11;
	transition: .3s;
}
.category_list .text_box .img { background-position: top center }
.text_list .text_box a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.text_list .text_box .text_meta {
	display: grid;
	gap: 5px;
	font-size: 20px;
}
.category_meta h5 {
	font-weight: 400;
	font-size: 20px;
}
.text_list .text_box .text_meta strong { font-weight: 400 }
.text_list .text_box .text_meta span {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: rgb(123, 126, 144, 1);
}
.text_list .text_box .text_meta img {
	border-radius: 0;
	max-width: 20px;
}
.text_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	background-color: #fff;
	box-shadow: 0 3px 20px 0 rgb(195, 201, 214, .28);
	border-radius: 8px;
	margin-bottom: 35px;
	padding: 15px;
	color: #001522;
}
.text_wrap em {
	font-style: normal;
	font-size: 18px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: .3s;
}
.text_wrap em:hover {
	background-color: #ebedf3;
	border-bottom: 2px solid #0193eb;
}
.text_wrap em.hover {
	background-color: #0193eb;
	color: #fff;
	border-bottom: 2px solid transparent;
}

.video_wrap {
	display: grid;
	grid-template-columns: 3fr 4fr;
	gap: 25px;
	margin-bottom: 35px;
}
.video_wrap img {
	width: 100%;
	border-radius: 10px;
	transition: .3s;
}
.video_wrap .video_image {
	display: grid;
	align-items: center;
	justify-items: center;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/11;
	border-radius: 10px;
	cursor: pointer;
	transition: .3s;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.video_wrap .video_image:hover { background-size: 110% }
.video_wrap .video_image:hover:before { transform: scale(1.05) }
.video_wrap .video_image:before {
	content: '';
	position: absolute;
	width: 45px;
	height: 45px;
	background-image: url('/static/images/icons/ic_video_play.svg');
	background-size: cover;
	background-position: center;
	z-index: 2;
	transition: .3s;
}
.video_wrap .video_info {
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-items: start;
	background-color: #fff;
	box-shadow: 0 3px 20px 0 rgb(195, 201, 214, .28);
	border-radius: 8px;
	padding: 25px 0;
}
.video_wrap .video_info h1 {
	font-size: 22px;
	font-weight: 400;
	border-bottom: 1px solid #ebedf4;
	padding: 0 25px 15px;
}
.video_text { padding: 25px }
.video_text h2 {
	font-size: 20px;
	font-weight: 400;
}
.video_text ol {
	margin: 15px 0;
	padding: 0 15px;
}
.video_wrap .btn {
	max-width: max-content;
	margin: 0 25px;
}

.dictionary_wrap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
	margin-bottom: 35px;
}
.dictionary_column {
	border-radius: 10px;
	padding: 15px 25px;
	background-color: #fff;
	box-shadow: 0 3px 20px 0 rgb(195, 201, 214, .28);
}
.dictionary_box {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
	border-bottom: 1px solid #f0f2f7;
	padding: 10px 0;
	cursor: pointer;
}
.dictionary_box:last-child { border-bottom: none }
.dictionary_box:hover strong { color: #004f7a }
.dictionary_titles {
	display: grid;
	gap: 5px;
}
.dictionary_titles strong {
	font-size: 20px;
	font-weight: 400;
	color: #001522;
}
.dictionary_titles span {
	font-size: 18px;
	color: #7b7e90;
}
.dictionary_box a {
	display: block;
	width: 24px;
	height: 24px;
	background-image: url('/static/images/icons/ic_dictionary_play.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.books_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 35px 25px;
	margin-bottom: 35px;
}
.book_box {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 15px;
	cursor: pointer;
	font-size: 20px;
	font-weight: 300;
	color: #001522;
}
.book_box:hover .book_img { transform: rotateY(-20deg) rotateZ(0deg) }
.book_img {
	width: 100%;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100%;
	box-shadow: 0 0 10px 1px rgb(0, 0, 0, .1);
	aspect-ratio: 10/12.5;
	transition: .3s;
	transform-origin: left;
	transform-style: preserve-3d;
}
.pdf_viewer {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 600px;
	height: calc( 100% - 30px );
	z-index: 9;
	overflow-y: scroll;
	background-color: #fff;
}
.pdf_viewer canvas { max-width: 100% }
.single_header {
	display: flex;
	flex-direction: column;
	padding: 35px 0;
}
.single_header a {
	display: flex;
	align-items: center;
	color: #7b7e90;
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 15px;
}
.single_header a img { padding-right: 5px }
.single_header h1 {
	font-size: 22px;
	font-weight: 400;
}
.page_404 { padding: 35px 0 55px }
.footer {
	padding: 35px 0;
	background-color: #fff;
	box-shadow: 0 6px 10px 10px rgb(195, 201, 214, .28);
}
.footer_wrap {
	display: flex;
	padding: 35px 0;
}
.footer_wrap>div { flex: 1 }
.footer_wrap h3 {
	font-size: 1.2em;
	margin-bottom: 15px;
}
.footer_wrap a { margin-bottom: 5px }
.right_bg {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}
.left_bg {
	position: absolute;
	left: 0;
	bottom: 15%;
	z-index: -1;
}

.pagination {
	display: flex;
	justify-content: center;
	list-style: none;
}
.page-link:hover,
.page-item.active .page-link { background-color: #f3f5f7 }
.page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #2a2f37;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	width: 32px;
	height: 32px;
	margin: 0 5px;
}

.content { flex: 1 }
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	z-index: 2;
}

.flex { display: flex }
.fx_col { flex: 1 }
.fx_40 { flex: 0 0 40% }
.flex.fx_column { flex-direction: column }
.ai_center { align-items: center }
.fx_center { justify-content: center }
.fx_center a { max-width: max-content }
.plr_25 { padding: 0 25px }
.plr_10 { padding: 0 10px }
.mb_15 { margin-bottom: 15px }
.mt_25 { margin-top: 25px }

@media only screen and (max-width: 768px) {
	.container { padding: 0 }
}
@media (min-width: 576px) {
	.container { max-width: 540px }
}
@media (min-width: 768px) {
	.container { max-width: 720px }
}
@media (min-width: 992px) {
	.container { max-width: 960px }
}
@media (min-width: 1200px) {
	.container { max-width: 1140px }
}
@media (min-width: 1400px) {
	.container { max-width: 1180px }
}

div.spinner {
	position: relative;
	width: 54px;
	height: 54px;
	display: inline-block;
	top: 40%;
	left: 50%;
	transform: translateX(-50%);
	padding: 10px;
	border-radius: 10px
}
div.spinner div {
	width: 6%;
	height: 16%;
	background: #777;
	position: absolute;
	left: 49%;
	top: 43%;
	opacity: 0;
	border-radius: 50px;
	box-shadow: 0 0 3px rgb(0, 0, 0, .2);
	animation: fade 1s linear infinite
}
@-webkit-keyframes fade {
	from { opacity: 1 }
	to { opacity: .25 }
}
div.spinner div.bar1 {
	transform: rotate(0) translate(0, -130%);
	animation-delay: 0s
}
div.spinner div.bar2 {
	transform: rotate(30deg) translate(0, -130%);
	animation-delay: -.9167s
}
div.spinner div.bar3 {
	transform: rotate(60deg) translate(0, -130%);
	animation-delay: -833ms
}
div.spinner div.bar4 {
	transform: rotate(90deg) translate(0, -130%);
	animation-delay: -.7497s
}
div.spinner div.bar5 {
	transform: rotate(120deg) translate(0, -130%);
	animation-delay: -667ms
}
div.spinner div.bar6 {
	transform: rotate(150deg) translate(0, -130%);
	animation-delay: -.5837s
}
div.spinner div.bar7 {
	transform: rotate(180deg) translate(0, -130%);
	animation-delay: -.5s
}
div.spinner div.bar8 {
	transform: rotate(210deg) translate(0, -130%);
	animation-delay: -.4167s
}
div.spinner div.bar9 {
	transform: rotate(240deg) translate(0, -130%);
	animation-delay: -333ms
}
div.spinner div.bar10 {
	transform: rotate(270deg) translate(0, -130%);
	animation-delay: -.2497s
}
div.spinner div.bar11 {
	transform: rotate(300deg) translate(0, -130%);
	animation-delay: -167ms
}
div.spinner div.bar12 {
	transform: rotate(330deg) translate(0, -130%);
	animation-delay: -83.3ms
}