/* ==================== 
1. resets & defaults
2. base styles
3. layout
4. components
5. content by pages
==================== */


/* ==================== 1. resets & defaults ==================== */
html,body,
h1,h2,h3,h4,h5,h6,
ul,ol,p,figure,
form,fieldset,input,textarea{
	margin: 0;
	padding: 0;
}

header,nav,main,article,section,aside,footer,figure{
	display: block;
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}

.cl:before,
.cl:after {
  display: table;
  content: " ";
}
.cl:after{
	clear:both;
}

/* ----- */

html,body{
	width: 100%;
	height: 100%;
}

nav ul,.nav ul{list-style: none;}
a img,fieldset{border:0;}

.logo img{display: block;}
.img-container img,
.thumb img,
figure img{
	display: block;
	max-width: 100%;
}

button,
input[type=button],
input[type=submit]{
	cursor: pointer;
	outline: none !important;
}

hr {
    width: 100%;
}

a,a:hover,a:focus{text-decoration: none;}
a.is-active{cursor: default;}

.disabled{opacity: 0.5; pointer-events: none;}
.disabled-click{pointer-events: none;}

/* ----- */

.no-scroll,
.no-scroll body{
	height: 100% !important;
	overflow: hidden;
}

.hidden{display: none !important;}
.item-fade{opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; z-index: -1;}
.item-fade.fade-in{opacity: 1; visibility: visible; z-index: 1;}

.no-padding{padding: 0 !important;}
.no-margin{margin: 0 !important;}

/* ----- */

.float-left{float: left !important;}
.float-right{float: right !important;}

.block-center{margin-left: auto !important; margin-right: auto !important;}

.text-l{text-align: left !important;}
.text-r{text-align: right !important;}
.text-c{text-align: center !important;}

.lowercase{text-transform: lowercase !important;}
.uppercase{text-transform: uppercase !important;}
.nocase{text-transform: none !important;}

.italic{font-style: italic;}

.underline{text-decoration: underline;}
.line-through{text-decoration: line-through;}

.highlight {background-color: #ffff00;}

b{font-weight: 500}
strong{font-weight: 700}

/* ----- */

body{
	background: #eef1f5;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
	
	color: #4d4d4d;
	font-size: 0.875rem;
    word-break: break-word;
}



/* ==================== 2. base styles ==================== */


/* ----------- fonts ----------- */
body,input,textarea,button{
	font-family: 'Roboto', sans-serif;
}
/* ----------- /fonts ----------- */


/* ----------- container ----------- */
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg{
	width: 100%;
    margin: 0 auto;
}

.container-xxs,
.t63-section[data-content-size="xxs"] .container{
    max-width: 400px;
}
.container-xs,
.t63-section[data-content-size="xs"] .container{
    max-width: 600px;
}
.container-sm,
.t63-section[data-content-size="sm"] .container{
    max-width: 860px;
}

.container,
.container-md,
.t63-section[data-content-size="md"] .container{
    max-width: 1200px;
}

.container-lg,
.t63-section[data-content-size="lg"] .container{
    max-width: 1330px;
}

.container-fluid,
.t63-section[data-content-size="fluid"] .container{
    max-width: 100%;
}
/* ----------- /container ----------- */


/* ----------- row ----------- */
.row-lg{
	margin-left: -20px;
	margin-right: -20px;
}
.row-lg > div {
	padding-left: 20px;
	padding-right: 20px;
}

.row-sm{
	margin-left: -10px;
	margin-right: -10px;
}
.row-sm > div {
	padding-left: 10px;
	padding-right: 10px;
}

.row-xs{
	margin-left: -5px;
	margin-right: -5px;
}
.row-xs > div {
	padding-left: 5px;
	padding-right: 5px;
}
/* ----------- /row ----------- */


/* ----------- icons ----------- */
.icon{
	display: inline-block;
	position: relative;
}
.icon::before{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
    background-size: contain;
}

.i-lg::before{
    width: 20px;
    height: 20px;
}

.i-90::before{
	transform: rotate(90deg);
}
.i-180::before{
	transform: rotate(180deg);
}
.i-270::before{
	transform: rotate(270deg);
}
/* ----------- /icons ----------- */


/* ----------- colors ----------- */

/* text */
.text-primary{
	color: #0f76be !important;
}
.text-white{
	color: #fff !important;
}

/* background color */
.bg-primary{
	background-color: #0f76be !important;
}
.bg-white{
	background-color: #fff !important;
}


/* alerts */
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
/* ----------- /colors ----------- */



/* ==================== 3. layout ==================== */


.app{
    display: flex;
    flex-direction: column;
    min-height: 100%;
}


/* ---------- header ---------- */
.app-header{
    width: 100%;
    background-color: #0e76bd;
    position: relative;
    z-index: 350;
}

/* main row */
.app-header .main-row{
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.35);
    padding: 6px 0;
    position: relative;
    z-index: 5;
}
.app-header .main-row > .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-header .app-logo{
    margin-left: -3px;
}
.app-header .app-logo img{
    height: 60px;
}

.app-header .main-row nav > ul{
    display: flex;
    align-items: center;
}
.app-header .main-row nav > ul > li{
    padding: 0 15px;
    position: relative;
}
.app-header .main-row nav a,
.app-header .main-row nav .header-btn{
	display: flex;
    align-items: center;
    position: relative;
    z-index: 2;

	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
    text-align: center;
}
.app-header .main-row nav li:hover > a,
.app-header .main-row nav a:hover{
    opacity: 0.8;
}

.app-header .main-row nav .toggle-sub-nav-btn{
    padding-right: 22px;
}
.app-header .main-row nav .toggle-sub-nav-btn::after{
    content: "";
    width: 16px;
    height: 16px;
    background: url(/images/icons/chevron_solid_white.svg) center no-repeat;
    background-size: contain;
    margin-top: -8px;
    position: absolute;
    right: 0;
    top: 50%;
}

.app-header .main-row nav .sub-nav a{
    display: inline-block;
    text-transform: none;
}

.app-header .main-row nav .header-btn{
    height: 38px;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 4px 7px 3px;
}
.app-header .main-row nav .header-btn img,
.app-header .main-row nav .header-btn i{
    margin: -2px 5px 0 0;
}
.app-header .main-row nav .header-btn i::before{
    width: 20px;
    height: 20px;
}
.app-header .main-row nav .header-btn .i-wifi::before{
    background-image: url(/images/icons/wifi-white.svg);
}

/* user row */
.app-header .user-row{
    background-color: #d5d4d4;
}
.app-header .user-row .links-wrap,
.app-header .user-row .links-wrap li{
    display: flex;
    align-items: center;
}
.app-header .user-row .links-wrap{
    flex-grow: 1;
    justify-content: flex-end;
    height: 43px;
}
.app-header .user-row .links-wrap li{
    color: #0e76bc;
	font-size: 13px;
    text-transform: uppercase;
}
.app-header .user-row .links-wrap li + li::before{
    content: "|";
    margin: 0 5px;
}
.app-header .user-row .links-wrap a{
	color: inherit;
    text-decoration: underline;
}
.app-header .user-row .links-wrap a:hover{
	text-decoration: none;
}

/* course-nav-row */
.course-nav-row{
    background-position:center;
    background-size:cover;
    position:relative;    
}
.course-nav-row > *{
    position:relative;
    z-index:2;
}
.course-nav-row::after {
    content: '';
    background-color: #163f6b;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.8;
    z-index: 1;
}
.course-nav-row .container {
    min-height: 120px;
}

.course-nav-row nav ul{
    list-style: none;
	display: flex;
    white-space:nowrap;
    justify-content: flex-end;
}
.course-nav-row nav li{
    margin: 0 20px;
}
.course-nav-row nav li:last-child{
    margin-right: 0;
}
.course-nav-row nav a{
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 8px 0 0 0;

    color: #fff;
	font-size: 18px;
	font-weight: bold;
    text-align: center;
}
.course-nav-row nav a:hover{
    text-decoration: underline;
}
.course-nav-row nav a i{
	display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
	margin-bottom: 10px;
}
.course-nav-row nav a img {
    display: block;
    width: 30px;
}

@media (min-width: 992px){
    .app-header .hamburger{
        display: none;
    }
    .app-header .main-row nav{
        display: block !important;
    }
    .app-header .main-row nav li:last-child{
        padding-right: 0;
    }

    .app-header .main-row nav .sub-nav{
        display: none !important;
        min-width: 200px;
        padding-top: 32px;
        position: absolute;
        top: 0;
        left: -15px;
        z-index: 1;
    }
    .app-header .main-row nav .sub-nav ul{
        background-color: #3085c4;
        border-radius: 10px;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
        padding: 10px 15px 10px 30px;
    }
    .app-header .main-row nav .sub-nav li{
        margin: 10px 0;
    }
    
    .app-header .main-row nav li:hover > .sub-nav {
        display: block !important;
    }

    .course-nav-row > .container{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    .course-nav-row nav{
        margin-left:auto;
    }
}
@media (max-width: 991px){
    .app-header .main-row nav{
        display: none;
        background-color: #0e76bd;
        border-top: 1px solid rgba(255,255,255,0.2);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.35);
        padding: 20px 0;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 300;
    }
    .app-header .main-row nav > ul{
        display: block;
    }
    .app-header .main-row nav > ul > li{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 12px 0;
    }
    .app-header .main-row nav a:not(.header-btn){
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .app-header .main-row nav .toggle-sub-nav-btn{
        margin-left: 20px;
    }
    .app-header .main-row nav .toggle-sub-nav-btn::after{
        transition: all 0.2s ease;
    }
    .app-header .main-row nav .toggle-sub-nav-btn.is-active::after{
        transform: rotate(-90deg);
    }
    .app-header .main-row nav .sub-nav{
        display: none;
        width: 100%;
        text-align: center;
    }
    .app-header .main-row nav .sub-nav li{
        margin: 5px 0;
    }
    .app-header .main-row nav .sub-nav a{
        font-size: 14px;
    }

    .course-nav-row > .container{
        padding-top:25px;
        text-align:center;
    }

    .course-nav-row nav ul{
        justify-content:center;
    }
    .course-nav-row nav li {
        margin: 0 5px;
    }

    .course-nav-row nav a{
        font-size: 14px;
    }
}

/* mobile */
.mobile .app-header .user-row{
    display: none;
}
.mobile .app-header nav .links-wrap{
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 10px;
    margin-top: 10px;
}
.mobile .app-header nav .fa-plus{
    font-size: 12px;
    margin-left: 4px;
}
.mobile .app-header nav .text-primary{
    color: inherit !important;
}
/* ---------- /header ---------- */


/* ---------- breadcrumbs ---------- */
.breadcrumbs{
	width: 100%;
	padding: 3px 0 10px;
    position: relative;
    z-index: 10;
}
.breadcrumbs ul{
	display: flex;
}
.breadcrumbs li{
	display: flex;
	
	color: #757575;
	font-size: 13px;
}
.breadcrumbs li + li::before{
	content: ">";
    margin: 0 8px;
}

.breadcrumbs li a{
	color: #337ab7;
	text-decoration: underline;
}
.breadcrumbs li a:hover{
    color: #23527c;
	text-decoration: none;
}
@media (max-width: 767px){
    .breadcrumbs{
        display: none;
    }
}
/* ---------- /breadcrumbs ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
	width: 100%;
    padding-bottom: 60px;
	position: relative;
}

.page-title{
    margin: 30px 0;
    text-align: center;
}
.breadcrumbs + .app-page .page-title{
    margin-top: 20px;
}

/* page nav */
.page-nav {
    border-bottom: 3px solid #0f76be;
    margin-bottom: 13px;
}
.page-nav ul{
    display: flex;
}
.page-nav a{
    display: block;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 15px 13px;

    color: #3e3e3e;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}
.page-nav a:hover,
.page-nav a.active{
    color: #fff;
}
.page-nav a:hover{
    background-color: #96bfdc;
}
.page-nav a.active{
    background-color: #0f76be;
}
@media (max-width: 575px){
    .page-nav a{
        padding: 10px 10px 5px;
        font-size: 10px;
    }
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer{
    width: 100%;
    background-color: #0e76bc;
    padding: 34px 0;
    position: relative;

    color: #fff;
}
.app-footer ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-footer a,
.app-footer h6{
    color: inherit;
}

.app-footer .container{
    display: flex;
    align-items: flex-start;
}

.app-footer .app-logo{
    flex-shrink: 0;
    padding: 0 55px 0 0px;
}
.app-footer .app-logo img{
    display: block;
    width: 158px;
}

.app-footer .links-wrap{
    flex-grow: 1;
    padding-right: 30px;
    text-transform: uppercase;
}
.app-footer .links-wrap .title{
    margin: 2px 0 8px;
}
.app-footer .links-wrap ul{
    padding-top: 32px;
}
.app-footer .links-wrap .title + ul{
    padding-top: 0;
}
.app-footer .links-wrap li {
    margin-bottom: 10px;
}
.app-footer .links-wrap a{
    display: block;
    font-size: 13px;
}

.app-footer .contact-info{
    flex-grow: 1;
    max-width: 290px;
    border-left: 1px solid #fff;
    padding-left: 26px;
}
.app-footer .contact-info > div:not(:last-child){
    margin-bottom: 30px;
}

.app-footer .contact-info a{
    display: block;
    font-size: 19px;
    font-weight: 300;
}
.app-footer .contact-info a:hover{
    text-decoration: none;
}

@media (max-width: 991px){
    .app-footer .app-logo{
        padding-left: 10px;
    }
}
@media (max-width: 767px){
    .app-footer{
        padding: 44px 0 40px;
        text-align: center;
    }
    .app-footer .app-logo{
        display: none;
    }
    .app-footer .container{
        display: block;
    }
    .app-footer .links-wrap{
        padding-right: 0;
        margin-bottom: 30px;
    }
    .app-footer .links-wrap ul{
        padding-top: 0;
    }
    .app-footer .contact-info{
        max-width: none;
        border: 0;
        padding-left: 0;
        text-align: center;
    }
    .app-footer .contact-info > div:not(:last-child){
        margin-bottom: 20px;
    }
}
@media (max-width: 374px){
    .app-footer .link-wrap h6{
        font-size: 14px;
    }
    .app-footer .contact-info h6,
    .app-footer .contact-info a{
        font-size: 15px;
    }
}
/* ---------- /footer ---------- */



/* ==================== 4. components ==================== */


/* ----------- hamburger ----------- */
.hamburger{
    flex-shrink: 0;
	display: block;
	width: 20px;
	height: 16px;
	background-color: transparent;
	border: 0;
	outline: none !important;
	cursor: pointer;
	padding: 0;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	overflow: visible;
	position:relative;
	z-index: 50;
}
.hamburger:before{
	content: "";
	position: absolute;
	top: -12px;
	bottom: -12px;
	left: -12px;
	right: -12px;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
	display: block;
	width: 20px;
	height: 2px;
	background-color: #fff;
    border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger span{
	top: 0;
}
.hamburger span::before,
.hamburger span::after {
	content: "";
	display: block;
}
.hamburger span::before {
	top: 7px;
	transition-property: transform, opacity;
	transition-timing-function: ease;
	transition-duration: 0.15s;
}
.hamburger span::after {
	top: 14px;
}

.hamburger.is-active span{
	transform: translate3d(-1px, 7px, 0) rotate(45deg);
}
.hamburger.is-active span::before{
	transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
	opacity: 0;
}
.hamburger.is-active span::after{
	transform: translate3d(0, -14px, 0) rotate(-90deg);
}
.hamburger.is-active span,
.hamburger.is-active span::before,
.hamburger.is-active span::after{
	width: 22px;
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
h1, h2, h3, h4, h5, h6,
.title,
.sub-title{
	display: block;
    font-weight: bold;
    line-height: 1.25;
}

.title{
    color: #0f76be;
}

.title * {
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.title:not(.slide-title):not(.full-featured) * {
    font-size: inherit;
}

.t63-section .title:not([class*=title-]){
    /*font-size: 28px;*/
	font-size: 1.75rem;
}

.sub-title{
    color: #4d4d4d;
    font-size: 24px;
}

.title-xxl{
	/*font-size: 50px;*/
    font-size: 3.125rem;
    line-height: 1.15;
}

h1,
.title-xl{
	/*font-size: 44px;*/
	font-size: 2.75rem;
    line-height: 1.2;
}

h2,
.title-lg{
	/*font-size: 40px;*/
	font-size: 2.5rem;
}

h3,
.title-md{
	/*font-size: 32px;*/
	font-size: 2rem;
}

h4,
.title-sm{
	/*font-size: 28px;*/
	font-size: 1.75rem;
}

h5,
.title-xs{
	/*font-size: 24px;*/
	font-size: 1.5rem;
}

h6,
.title-xxs{
	/*font-size: 20px;*/
	font-size: 1.25rem;
}


.text,
.text-wrap{
	color: #4d4d4d;
    font-size: 1rem;
}
.text-xl{
    /*font-size: 20px;*/
	font-size: 1.25rem;
}
.text-lg{
    /*font-size: 18px;*/
    font-size: 1.125rem;
}
.text-sm{
    font-size: 14px;
}
.text-xs{
    font-size: 12px;
}

@media (max-width: 1199px){
	html{
		font-size: 14px;
	}
}
@media (max-width: 991px){
	/*html{
		font-size: 12px;
	}
    .text,
    .text-wrap{
        font-size: 14px;
    }*/
    .title-xxl{
        font-size: 2.75rem;
    }

    h1,
    .title-xl{
	    font-size: 2.5rem;
    }

    h2,
    .title-lg{
	    font-size: 2.25rem;
    }
}

.text-emphasis{
    color: #909090;
    font-family: 'PT Serif', sans-serif;
    font-size: 14px;
}

.text-wrap:before,
.text-wrap:after {
  display: table;
  content: " ";
}
.text-wrap:after{
	clear:both;
}

.text-wrap > *{margin-bottom:20px;}
.text-wrap > *:last-child{margin-bottom:0;}
.text-wrap ul,.text-wrap ol{padding-left:40px;}
.text-wrap li + li,.text-wrap li ul,.text-wrap li ol{margin-top:10px;}

.text-wrap img{
    max-width: 100%;
    height: auto;
    border-radius: 15px;
	margin-bottom: 5px;
}
.text-wrap img[style*="float: left"]{
    margin-right: 15px;
}
.text-wrap img[style*="float: right"]{
    margin-left: 15px;
}

.text-wrap hr{
    margin: 35px 0;
}
.text-wrap hr + img,
.text-wrap hr + * img{
    margin-top: 8px;
}

.link,
.link:hover,
.text-wrap a:not(.btn),
.text-wrap a:not(.btn):hover{
	color: #007bff;
}
.text-wrap [data-toggle="tooltip"]{
    color: #ed2224;
}
.link,
.text-wrap a:not(.btn){
	text-decoration:underline;
}
.link:hover,
.text-wrap a:not(.btn):hover,
.text-wrap [data-toggle="tooltip"]:hover{
	text-decoration:none;
}

button.link{
    background: none;
    border: 0;
    padding: 0;
}

.text-wrap audio,
.text-wrap video{
    display: block;
    width: 100%;
    outline: none;
}
.text-wrap video{
    height: auto;
}

.text-wrap iframe{
    display: block;
    max-width: 100%;
}

.text-wrap table {
    width: 100%;
    border: 1px solid #dee2e6;
    color: inherit;
}
.text-wrap table th,
.text-wrap table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    vertical-align: top;
}
.text-wrap table thead th {
    border-bottom: 2px solid #dee2e6;
    vertical-align: bottom;
}
.text-wrap table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.text-wrap .table-plain {
    border: 0;
}
.text-wrap .table-plain th,
.text-wrap .table-plain td {
    border: 0;
    border-top: 1px solid #dee2e6;
}

.text-container,
.text-container-sm{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

hr{
    width: 100%;
}
/* ---------- /title,text ---------- */


/* ---------- buttons ---------- */
.btn{
    border-radius: 5px;    
    padding: 8px 12px 7px;
    font-size: 14px;
    text-transform: uppercase;
}
.btn-xs {
    padding: 3px 4px 2px;
    font-size: 11px;
}
.btn-sm{
    padding: 5px 8px 4px;
    font-size: 13px;
}
.btn-lg{
    padding: 10px 16px 9px;
    font-size: 16px;
}

.btn-primary{
    background-color: #0f76be;
    border-color: #0f76be;
}
.btn-primary:hover{
    background-color: #2164a0;
    border-color: #2164a0;
}

.btn-outline-light {
    color: #ccc;
    border-color: #ddd;
}
.btn-outline-light:hover {
    color: #212529;
    background-color: #ddd;
    border-color: #ddd;
}


.close-btn{
    display: inline-block;
    background: transparent;
    border: 0;
	padding: 9px;
    position: relative;
	cursor: pointer;
}
.close-btn i{
    display: block;
	width: 12px;
	height: 12px;
    position: relative;
}
.close-btn i:before,
.close-btn i:after{
	content:"";
	
	position: absolute;
	top: 50%;
	left: 0;
	
	width: 100%;
	height: 1px;
	background: #7f7f6f;
}
.close-btn i:before{
	transform: rotate(-45deg);
}
.close-btn i:after{
	transform: rotate(45deg);
}
.close-btn-lg i{
    width: 20px;
	height: 20px;
}


/* btn-row */
.app-page .btn-row{
	margin: 20px 0;
}
.app-page .btn-row:last-child{
	margin-bottom: 0;
}
.app-page .btn-row > div{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	padding-left: -6px;
	padding-right: -6px;
}
.app-page .btn-row > div > *{
	margin: 6px;
}
/* ---------- buttons ---------- */


/* ---------- form ---------- */
.form-group label {
    color: #73787c;
    margin-bottom:2px;
}

.form-control {
    background-color: #f6f7fb;
    border-color: #ccc;
    box-shadow: none;
    height:38px;
}

.fieldset{
    margin-bottom: 40px;
}
.fieldset-head {
    margin: 0 0 20px;
    border-bottom: 1px solid #4a86db;
    display: flex;
    justify-content: space-between;
}

.fieldset-head .title {
    color: #0f76be;
    font-size: 24px;
    font-weight: 300;
    text-align: left;
    margin: 0 0 5px;
}


/* checkbox, radio */
.custom-control{
	display: inline-block;
	min-height: 18px;
	padding: 0;
	margin: 0;
}
.custom-control-label{
	display: flex;
    color: #2d2d2d;
    font-size: 16px;
    font-weight: 400;
	line-height: 20px;
}
.custom-control-label b{
    font-weight: bold;
}
.custom-control-label::before,
.custom-control-label::after{
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	
	box-shadow: none !important;
	margin: 0 8px 0 0;
	position: relative;
	top: 1px;
	left: 0;
}
.custom-control-label::before{
	background: #fff;
	/*border: 1px solid rgba(0,0,0,0.2);*/
}
.custom-control-label::after{
	position: absolute;
}

.custom-control-input[type="checkbox"] ~ .custom-control-label::before,
.custom-control-input[type="checkbox"] ~ .custom-control-label::after{
	background-position: -100px center;
	background-repeat: no-repeat;
    border-radius: 3px;
}
.custom-control-input[type="checkbox"] ~ .custom-control-label::before{
	background-color: #fff;
    background-image: url("../images/icons/tick_white.svg");
	background-size: contain;
}
.custom-control-input[type="checkbox"] ~ .custom-control-label::after{
	background-image: url("../images/icons/indeterminate_white.svg");
	background-size: 6px 6px;
	opacity: 0;
}

.custom-control-input[type="radio"] ~ .custom-control-label::before{
    border-radius: 50%;
}
.custom-control-input[type="radio"] ~ .custom-control-label::after{
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    left: 5px;
    top: 6px;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-label::before{
	background-color: #007bff;
    border-color: #007bff;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-label::after{
	background-position: center;
}

.custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-label::after{
	opacity: 1;
}
/* ---------- /form ---------- */


/* ---------- img, bg-img ---------- */
.bg-img{
	display: block;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}
.bg-img::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.bg-img--cover{
	background-size: cover;
}
.bg-img--contain{
	background-size: contain;
}

.bg-img.fit-container{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.img--cover,
img.embed-responsive-item{
	object-fit: cover;
}
.img--contain{
	object-fit: contain;
}

.img-21by9 {
    padding-top: 42.857143%;
}
.img-16by9 {
    padding-top: 56.25%;
}
.img-4by3 {
    padding-top: 75%;
}
.img-1by1 {
    padding-top: 100%;
}
/* ---------- /img, bg-img ---------- */


/* ---------- slick ---------- */
.slick-slide{
    outline: none;
}
.slick-arrow{
    display: block;
    width: 32px;
    height: 32px;
    background: transparent url(/images/icons/arrow_right.svg) center no-repeat !important;
    background-size: 32px 32px !important;
    border: 0;
    outline: 0;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    top: 50%;
    z-index: 10;

    transform: translateY(-50%);
}
.slick-prev{
    left: -30px;
	transform: rotate(180deg) translateY(-50%);
    transform-origin: 50% 0;
}
.slick-next{
    right: -30px;
}

.slick-slider .slick-dots{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height: 10px;
	padding: 0;
}
.slick-slider .slick-dots li{
    margin: 0 4px;
}
.slick-slider .slick-dots button{
    display:block;
	width: 10px;
	height: 10px;
	background-color: #fff;
	border: 1px solid #0f76be;
	border-radius: 50%;
    outline: none !important;
    padding:0;
    overflow:hidden;
    text-indent:-9999px;
}
.slick-slider .slick-dots button:hover,
.slick-slider .slick-dots .slick-active button{
	background-color: #0f76be !important;
    border-color: #0f76be !important;
}
/* ---------- /slick ---------- */


/* ---------- hello bar ---------- */
.hello-bar {
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.4);
    padding: 10px 0;

    position: relative;
    z-index: 1;
}
.hello-bar .container{
    position: relative;
    z-index:2;
}

.hello-bar .row{
    align-items: flex-start;
}
.hello-bar .row > div{
    margin: auto 0;
}

.hello-bar,
.hello-bar .title {
    color: #fff;
}

.hello-bar .title {
    font-size: 22px;
    line-height: 1.2;
    text-align: left;
    margin: 0;
}

.hello-bar .title + * {
    margin-top: 6px;
}

.hello-bar .btn-wrap {
    display: flex;
    margin-left: -5px;
    margin-right: -5px;
}

.hello-bar .btn-wrap .btn {
    outline: none !important;
    margin: 0 5px;
}


.hello-bar .info-wrap .row > div,
.hello-bar .form-wrap{
    padding-top: 8px;
    padding-bottom: 8px;
}

.hello-bar .info-wrap .row {
    justify-content: center;
}

.hello-bar .form-col{
    min-width: 350px;
}
.hello-bar .form-wrap .row {
    margin-left: 0;
    margin-right: 0;
}

.hello-bar .form-wrap .row > div {
    padding-left: 0;
    padding-right: 0;
}

.hello-bar .form-wrap .form-control {
    height: 42px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.hello-bar .form-wrap .btn {
    display: block;
    width: 100%;
    outline: none !important;
}
.hello-bar .form-wrap .input-group{
    z-index:2;
}
.hello-bar .overlay {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.8;
    z-index: 1;
}
.hello-bar .overlay:after {
    content: '';
}


@media (max-width: 991px){
    .app-header .hello-bar .container{
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* ---------- /hello bar ---------- */


/* ---------- expand-collapse ---------- */
.slide-toggle-btn{
    background: none;
    border: 0;
    outline: none;
    padding: 0;

    color: #fff;
    font-size: 13px;
}
.slide-toggle-btn::before{
    content: attr(data-expand-text);
}
.is-expanded .slide-toggle-btn::before{
    content: attr(data-collapse-text);
}

.slide-toggle-btn::after{
    content: "";
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fff;
    margin-left: 8px;
    position: relative;
    top: 1px;
    transition: all 0.3s ease;
}
.is-expanded .slide-toggle-btn::after{
    transform: rotate(90deg);
}

.slide-toggle-btn:hover::before{
    text-decoration: underline;
}
/* ---------- /expand-collapse ---------- */


/* ---------- slideToggle ---------- */
[data-expandable] .expand,
[data-expandable] .collapse{
    position: relative;
    padding-right: 14px;
    cursor: pointer;
}
[data-expandable] .expand:after,
[data-expandable] .collapse:after {
    content: "";
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #fff;

    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;

    transition: all 0.3s ease;
}
[data-expandable] .collapse:after {
    transform: rotate(90deg);
}

.card-head .expand,
.card-head .collapse{
    flex-shrink: 0;
    color: #fff;
}
/* ---------- /slideToggle ---------- */


/* ---------- modal ---------- */
.modal{
    z-index:99999 !important;
}
.modal-header .modal-title{
    padding-top: 1px;
    font-size: 24px;
}
.modal-header .close{
    padding: 0.9rem;
}
/* ---------- modal ---------- */


/* ---------- auth ---------- */
.auth-modal .modal-dialog{
    max-width: 414px;
}

.auth-modal .modal-content{
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 40px 28px 44px;
    position: relative;

    color: #fff;
    font-size: 14px;
}

.auth-modal .modal-header,
.auth-modal .modal-body{
    border: 0;
    padding: 0;
}

.auth-modal .close{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    opacity: 0.8;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;

    color: #fff;
    font-weight: 100;
    line-height: 0.4;
    text-shadow: none;
}

.auth-modal .modal-title{
    color: #fff;
    margin-bottom: 25px;
}

.auth-modal .form-group{
    margin-bottom: 28px;
}

.auth-modal  .flex-group{
    display: flex;
}
.auth-modal .custom-control-label{
    color: #929497;
    font-size: 14px;
}
.auth-modal .flex-group .link{
    margin-left: auto;
}

.auth-modal .links-wrap{
    margin-top: 20px;
    text-align: center;
}
.auth-modal .link{
    color: #fff;
}

.auth-modal .submit-btn {
    display: block;
    width: 100%;
    max-width: 226px;
    margin: 0 auto;
}

@media (max-width: 575px){
    .auth-modal .modal-content{
        padding: 30px 20px 34px;
    }
    .auth-modal .modal-content,
    .auth-modal .custom-control-label{
        font-size: 13px;
    }
}
@media (max-width: 374px){
    .auth-modal .modal-content{
        padding: 30px 15px 34px;
    }
    .auth-modal .modal-content,
    .auth-modal .custom-control-label{
        font-size: 12px;
    }
}
/* ---------- /auth ---------- */


/* ---------- accordion ---------- */
.accordion-item{
    margin-bottom: 4px;
}

.accordion-item-head,
.accordion-item-body{
    background-color: #f2f2f2;
}

.accordion-item-head{
    display: flex;
    padding: 13px 14px 13px 24px;
    cursor: pointer;

}
.accordion-item-head .title{
    color: #666;
    font-size: 18px;
}
.accordion-item-head::after{
    flex-shrink: 0;
    content: "";
    width: 16px;
    height: 16px;
    background: url(/images/icons/list_triangle.svg) center no-repeat;
    background-size: contain;
    margin: auto 0 auto auto;

    transition: transform 0.2s ease;
    transform: rotate(90deg);
}
.accordion-item.is-open > .accordion-item-head::after{
    transform: rotate(-90deg);
}

.accordion-item-body{
    border-top: 1px solid #ddd;
    padding: 18px 20px;
}

@media (max-width: 991px){
    .accordion-item-body{
        padding: 18px 15px;
    }
}
@media (max-width: 767px){
    .accordion-item-body{
        padding: 15px 10px;
    }
}


/* --- tree --- */
.accordion-tree > .accordion-item > .accordion-item-body{
    padding: 22px 0 22px 30px;
}

.accordion-tree .accordion-item .accordion-item{
    position: relative;
    margin: 0;
}
.accordion-tree .accordion-item .accordion-item .accordion-item-head{
    min-height: 53px;
    position: relative;
}
.accordion-tree .accordion-item .accordion-item .accordion-item-head .title{
    padding-left: 3px;
    margin: auto 0;
    font-size: 16px;
}
.accordion-tree .accordion-item .accordion-item .accordion-item-body{
    border: 0;
    padding: 0 26px 0 0;
}

.accordion-tree .accordion-item .accordion-item .accordion-item-head,
.accordion-tree .accordion-item .accordion-item .accordion-item-body{
    background-color: transparent;
    padding-left: 30px;
}


.accordion-tree .accordion-item .accordion-item .accordion-item-content{
    background-color: #fff;
    border: 1px solid #b3b3b3;
    padding: 20px 5px 0 20px;
}

/* line and circle */
.accordion-tree .accordion-item .accordion-item::before{
    content: "";
    width: 1px;
    background-color: #b3b3b3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7px;
}
.accordion-tree .accordion-item .accordion-item:first-child::before{
    top: 27px;
}
.accordion-tree .accordion-item .accordion-item:not(.is-open):last-child::before{
    bottom: 27px;
}

.accordion-tree .accordion-item .accordion-item .accordion-item-head::before{
    content: "";
    width: 15px;
    height: 15px;
    background-color: #f2f2f2;
    border: 1px solid #b3b3b3;
    border-radius: 50%;

    position: absolute;
    top: 50%;
    left: 0;
    
    transform: translateY(-50%);
}

@media (max-width: 575px){
    .accordion-tree > .accordion-item > .accordion-item-head{
        padding-left: 15px;
    }
    .accordion-tree > .accordion-item > .accordion-item-body {
        padding: 10px 0 10px 15px;
    }
    .accordion-tree .accordion-item .accordion-item .accordion-item-head,
    .accordion-tree .accordion-item .accordion-item .accordion-item-body {
        padding-left: 25px;
    }
    .accordion-tree .accordion-item .accordion-item .accordion-item-content{
        padding: 15px;
    }

    .accordion-tree .courses-grid .courses-grid-item{        
        margin-bottom: 25px;
    }
    .accordion-tree .courses-grid > .row > div:last-child .courses-grid-item{
        margin-bottom: 5px;
    }
    
    .accordion-tree .courses-grid-item{
        flex-direction: column;
    }
    .accordion-tree .courses-grid-item .img-wrap,
    .accordion-tree .courses-grid-item figure{
        width: 100%;
    }
    .accordion-tree .courses-grid-item .info-wrap{
        padding: 10px 0 0 0;
    }
    .accordion-tree .courses-grid-item .info-wrap .title{
        min-height: inherit;
    }
}
/* ---------- accordion ---------- */


/* ---------- progress ---------- */
.progress{
    height: 20px;
}
.progress-bar{
    width: 0;
}
/* ---------- /progress ---------- */


/* ---------- info items list ---------- */
.info-items-list{
    list-style: none;
}
.info-items-list li{
	display: flex;
	margin-bottom: 15px;    
}
.info-items-list.row li{
	justify-content:center;
}
.info-items-list li > i{
	flex-shrink: 0;
	font-size: 16px;
	margin-right: 10px;
}
.info-items-list li [class*="title-"]{
	line-height: 1;
    margin: 0;
}
.info-items-list li p{
	margin-top: 5px;
	
	color: #808184;
	font-size: 14px;
	line-height: 1.3;
}
.info-items-list li .social-media-wrap{
	margin-top: 3px;
}

.info-items-list:last-child{
	margin-bottom: -15px;
}
/* ---------- /info items list ---------- */


/* ---------- card ---------- */
.card{
    background: #fff;        
    border-radius: 5px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
    position: relative;
    margin-bottom: 20px;
}

.card.box-shaddow {
    box-shadow: 1px 1px 3px 0px rgb(112, 115, 139);
}

.card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0f76be;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 12px;

    color: #fff;
    font-size: 13px;
    margin: 0;
}
.card-head *{
    color: inherit;
}
.card-head .title{
    font-size: 20px;
}

.card-head.tab-nav-container{
    padding: 0;
}
.card-head.tab-nav-container ul{
    display: flex;
    height: 45px;
}
.card-head.tab-nav-container li{
    padding: 9px 14px 0;
}
.card-head.tab-nav-container li a{
    display: block;
    padding: 3px 0;

	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
}
.card-head.tab-nav-container li a:hover:not(.active){
    text-decoration: underline;
}
.card-head.tab-nav-container li a.active{
	border-bottom: 3px solid #fff;
	cursor: default;
    text-decoration: none;
}

.card-header:first-child {
    border-radius: 5px 5px 0 0;
    padding-left: 10px;
    padding-right: 10px;
}
.card-body{
    padding: 10px;
}

.card-section{
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.card-section:first-child{
    padding-top: 5px;
}
.card-section:last-child{
    border-bottom: 0;
}
.card-section.text-wrap{
    padding: 10px 20px 15px;
}
.card-section.text-wrap > *{
    margin: 10px 0;
}

.card .files-list{
    list-style: none;
}
.card .files-list a{
	display: flex;
    align-items: center;
    border-radius: 4px;
	padding: 15px 5px 15px 15px;
    position: relative;

	color: #484848;
    font-size: 14px;
	text-decoration:none;
    white-space: nowrap;
}
.card .files-list a:hover{
	background:#f7f7f7;
}
.card .files-list a i{
	flex-shrink: 0;
    margin-right: 10px;
    color: #0f76be;
}
.card .files-list a i::before{
    color: inherit;
}
.card .files-list a .name{
    flex-grow: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card .files-list a .name + *{
    padding: 0 10px 0 5px;
}

.card-plain,
.card-transparent,
.card-transparent .card-head{
    background-color: transparent;
}
.card-plain .card-head{
    background-color: #fff;
}
.card-plain .card-head .title{
    color: #0f76be;
}

.card-transparent .card-head {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
/* ---------- /card ---------- */


/* ---------- sections list card ---------- */
.sections-list-card{
    overflow: hidden;
}
.sections-list-card .card-body{
    counter-reset: list-counter;
    padding: 0;
}

.sections-list-card .list-wrap {
    list-style: none;
}
.sections-list-card .list-wrap li {
    display: flex;
    align-items: stretch;
    border-top: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
    background-color: #eee;
    position: relative;

    transition: all 0.3s ease;
}
.sections-list-card .list-wrap li::before{
    flex-shrink: 0;
    counter-increment: list-counter;
    content: counter(list-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    background-color: #ddd;

    transition: all 0.3s ease;

    font-size: 16px;
    font-weight: 700;
    color: #666;
    text-align: center;
    text-transform: uppercase;
}

.sections-list-card .list-wrap li > div {
    flex-grow: 1;
    display: flex;
    position: relative;
    padding: 20px 20px 20px 50px;
}
.sections-list-card .list-wrap li .left-col{
    flex-grow: 1;
}
.sections-list-card .list-wrap li .right-col{
    flex-shrink: 0;
    padding-left: 15px;
    margin: auto 0;
}


.sections-list-card .list-wrap li .text{
    display: flex;
    align-items: start;
    position: relative;

    font-size: 16px;
    color: #666;
}
.sections-list-card .list-wrap li .text p{
    margin: 0;
}
.sections-list-card .list-wrap li .text > i{
    margin-right: 15px;
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-54%);
}
.sections-list-card .list-wrap .text a {
    color: inherit;
}

.sections-list-card .list-wrap li .description {
    font-size: 14px;
    color: #A6A6A6;
    margin-top: 10px;
}

.sections-list-card .list-wrap li:hover {
    background-color: #fff;
    border-top: 1px solid #eee;
}
.sections-list-card .list-wrap li:hover + li {
    border-top: 1px solid #eee;
}
.sections-list-card .list-wrap li:hover::before {
    background-color: #37abf2;
    color: #fff;
}

@media (max-width: 767px) {
    .sections-list-card .list-wrap li::before{
        width: 30px;
        font-size: 12px;
    }
    .sections-list-card .list-wrap li > div{
        padding: 15px 10px 15px 45px;
    }
    .sections-list-card .list-wrap li .text {
        font-size: 13px;
    }
    .sections-list-card .list-wrap li .description{
        font-size: 12px;
        margin-top: 5px;
    }
}
/* ---------- /sections list card ---------- */


/* ---------- announcement ---------- */
.announcement-card{
	background: #fffede 18px 18px no-repeat;
	padding: 20px 20px 20px 20px;
	margin-bottom: 20px;
	box-shadow:none;
    line-height: 1.6;
}
.announcement-card-icon {
    background-image: url(../images/icons/bullhorn.png);
    padding-left:92px;
}
.announcement-card .title{
	color: #646464;
    text-align: center;
	margin: 0 20px 15px 0;
}
.announcement-card .close-btn{
	position: absolute;
	top: 5px;
	right: 5px;
}
@media (max-width: 767px){
	.announcement-card{
		background-size: 30px auto;
		padding: 18px 20px 20px 59px;
		
		font-size: 13px;
	}
	.announcement-card .title{
		font-size: 18px;
		margin-bottom: 10px;
	}
}
/* ---------- /announcement ---------- */


/* ---------- box badge ---------- */
.has-badge{
    position: relative;
}
.box-badge {  
    display: block;
    width: 120px;
    background: #0e76bc;
    background: linear-gradient(#0e76bc 0%, #0e76bd 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    overflow: hidden;

    position: absolute;
    top: 65px;
    right: 0;
    z-index: 1;

    transform: rotate(45deg);
    transform-origin: bottom right;

    clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px,  110px 30px);

    color: #FFF;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
}
.box-badge-course{
    right: 9px;
}
.box-badge-green{
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
}
.box-badge-red{
    background: #A90329;
    background: linear-gradient(#A90329 0%, #6D0019 100%);
}
/* ---------- /box badge ---------- */


/* ---------- calendar date badge ---------- */
.calendar-date-box{
    flex-shrink: 0;
    width: 60px;
    border: 1px solid #0f76be;
    border-radius: 4px;
    overflow: hidden;
}
.calendar-date-box > *{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.calendar-date-box .head{
    height: 28px;
    background-color: #0f76be;

    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}
.calendar-date-box .body{
    height: 36px;
    color: #dc3545;
    font-size: 21px;
}
/* ---------- /calendar date badge ---------- */


/* ---------- section ---------- */
.section {
    padding: 55px 0;
}
.section:nth-child(even) {
    background-color: #f2f2f2;
}
.section-title,
.section-sub-title{
    margin: 0 0 50px;
    text-align: center;
}
.section-title + .section-sub-title,
.section-sub-title + .section-title{
    margin-top: -30px;    
}
@media (max-width: 991px){
    .section {
        padding: 40px 0;
    }
    .section-title,
    .section-sub-title{
        margin-bottom: 30px;
    }
}
/* ---------- /section ---------- */


/* ---------- article ---------- */
.article-list-item{
	display: block;
	width: 100%;
	overflow: hidden;
}
.article-list-item .title{
    font-size:25px;
}
.article-list-item .img{
    display: block;
    padding-top: 50%;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.article-list-item .img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.article-list-item .info-wrap{
	display: flex;
}
.article-list-item .info-wrap > div{
	margin: auto 0;
}
.article-list-item .info-wrap .title{
    text-align: left;
}
.article-list-item .date{
    display: block;
    font-size: 16px;
}
.article-list-item .info-wrap .text{
	color: #4d4d4d;
}
.article-list-item .info-wrap > div > *{
	margin: 8px 0;
}
.article-list-item .info-wrap > div > *:first-child{
    margin-top: 0;
}
.article-list-item .info-wrap .link{
	font-size: 14px;
}

.article-list-item .title a{
	text-decoration:none !important;
}

.article-list-item::after{
	content: "";
	display: block;
	width: 100%;
	margin: 20px 0;
    border: 0;
    height: 2px;
    background: #0e76bd;
    background: -webkit-gradient(linear, left top, right top, color-stop(20%, #0e76bd), color-stop(0%, #BCBCBC));
    background: linear-gradient(to right, #0e76bd 20%, #BCBCBC 0%);
}
.article-list-item:last-child::after{
	display: none;
}

a.article-list-item:hover .title{
	color: #eb252a;
}

.article .sub-title{
	margin-bottom: 6px;
}
.article .title{
	margin-bottom: 20px;    
}
.article .date{
    display: block;
    font-size: 16px;
}
.article .date{
	display: block;
	margin-bottom: 10px;
	
	font-size: 14px;
}
.article .img-wrap{
	float: left;
	width: 40%;
	margin-right: 20px;
}

.article .title + .text-wrap{
	margin-top: 20px;
}

@media (max-width:991px) {
	.article .img-wrap {
		width:100%;
		margin-bottom:10px;
	}
}
/* ---------- /article ---------- */


/* ---------- blog ---------- */
.row.blog-posts > div{
    margin-bottom: 46px;
}
.blog-posts .item {
    width: 100%;
    min-height: 100%;
    background-color: #f6f6f6;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    padding-bottom: 23px;
}

.blog-posts .item .thumb {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.blog-posts .item .thumb::before{
    content: "";
    display: block;
    padding-top: 56.25%;
}

.blog-posts .item .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.blog-posts .item .text-wrap {
    min-height: 160px;
    padding: 0px 20px 16px;
}

.blog-posts .item h2 {
    color: #242424;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 16px;
    padding: 20px 20px 0px 20px;
}

.blog-posts .item p {
    color: #787878;
    font-size: 14px;
    line-height: 1.4;
}

.blog-posts .item a {
    text-decoration:none !important;
}

.blog-posts .item .btn {
    display: inline-block;
    border-radius: 20px;
    padding: 5px 20px;
    margin: 0 auto;
    font-size: 13px;
    text-decoration: none;
    margin-left: 20px;
}

.blog-posts + .btn-row{
    margin: 0;
}

@media (max-width: 767px) {
    .row.blog-posts > div {
        margin-bottom: 25px;
    }

    .blog-posts .item h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

.blog figure {
    margin-bottom: 20px;
}
.blog figure img{
    margin:0 auto;
}
/* ---------- /blog ---------- */


/* ---------- products ---------- */
.products-section .row{
    margin-left: -10px;
    margin-right: -10px;
}
.products-section .row > div{
    padding-left: 10px;
    padding-right: 10px;
}

.products-grid:not(:last-child){
    margin-bottom: 100px;
}
.products-grid > .head{
    display: flex;
    align-items: end;
}
.products-grid > .head > div{
    margin-left: auto;
}
.products-grid > .head .btn{
    min-width: 180px;
    text-align: center;
}
.products-grid > .head .btn i{
    margin-right: 3px;
}
.products-grid-item{
    margin-bottom: 40px;
}
.products-grid-item .head{
    background-position: center;
    background-size: cover;
    position: relative;
}
.products-grid-item .head::before{
    content: "";
    display: block;
    padding-top: 63%;
}
.products-grid-item .head::after{
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(39,118,189,1) 0%,rgba(255,255,255,0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.products-grid-item .head .datetime-wrap{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;

    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}
.products-grid-item .head .datetime-wrap img{
    margin-right: 7px;
}

.products-grid-item .head .badge{
    margin: 0;
    position: absolute;
    bottom: 16px;
    right: 14px;
    z-index: 2;
}

.products-grid-item .body,
.products-grid-item .foo{
    padding-left: 16px;
    padding-right: 16px;
}

.products-grid-item .body{
    padding-top: 18px;
}
.products-grid-item .body .title{
    min-height: 44px;
    color: #2776bd;
    font-size: 18px;
    text-align: left;
    margin-bottom: 18px;
}
/*.products-grid-item .body .text{
    height: 63px;
    overflow: hidden;
    margin-bottom: 20px;
}
.products-grid-item .body .title + .text{
    margin-top: -10px;
}*/
.products-grid-item .body > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e6e6e6;
    padding: 18px 0;
}
.products-grid-item .body .price{
    display: flex;
    align-items: center;

    color: #b3b3b3;
    font-size: 18px;
    font-weight: bold;
}
.products-grid-item .body .price img{
    margin-right: 7px;
}
.products-grid-item .body .price b{
    color: #2776bd;
    margin-left: 5px;
}


.products-grid-item .btn{
    display: block;
    border-radius: 0;
    padding: 4px 16px;

    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

@media (max-width: 991px){
    .products-grid-item .body,
    .products-grid-item .foo{
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 575px){
    .products-grid > .head{
        flex-direction: column;
    }
    .products-grid > .head .title{
        margin: 0 auto;
    }
    .products-grid > .head > div{
        margin: 25px auto 0;
    }
}
/* ---------- /products ---------- */

/* ---------- filters ---------- */
.filters-group {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.filters-group-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.filters-group-head .title {
    color: #666;
    font-size: 16px;
}

.filters-group-body ul {
    list-style: none;
}

.filters-group-body ul li {
    padding-bottom: 8px
}

.filters-group-body ul li:last-child {
    padding-bottom: 0;
}

.filters-group .custom-control-label::before,
.filters-group .custom-control-label::after {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    top: 2px;
}

.filters-group .custom-control-label {
    font-size: 13px;
}

.filters-group .custom-control-input[type="radio"] ~ .custom-control-label::after {
    left: 4px;
}

.filters-group .price-wrap {
    display: flex;
    align-items: center;
}

.filters-group .price-wrap .input-col {
    flex-grow: 1;
    position: relative;
}

.filters-group .price-wrap .separator-col,
.filters-group .price-wrap .btn-col {
    flex-shrink: 0;
}

.filters-group .price-wrap .separator-col {
    padding: 0 8px;
}

.filters-group .price-wrap .btn-col {
    padding-left: 8px;
}

.filters-group .price-wrap .form-control {
    height: 35px;
    padding: 4px 6px 4px 16px;
}

.filters-group .price-wrap .input-col i {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    font-size: 12px;
}

.filters-group .price-wrap .btn {
    width: 35px;
    height: 35px;
    border-radius: .25rem;
    padding: 0;
}

.filters-group .search-wrap .form-control {
    height: 35px;
}

.filters-group .search-wrap .btn {
    width: 35px;
    border-color: #ced4da !important;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    padding: 0;
}


.filters-popup {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.filters-popup .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    background-color: #516886;
    padding-left: 15px;
}

.filters-popup .head .title {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
}

.filters-popup-close-btn {
    background-color: transparent;
    border: 0;
    padding: 15px;
}

.filters-popup-close-btn i {
    color: #fff;
    font-size: 16px;
}

.filters-popup .body {
    width: 100%;
    padding: 20px 15px;
    overflow: auto;
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
}

.filters-popup .body .filters-wrap {
    display: block !important;
}
/* ---------- /filters ---------- */


/* ---------- events ---------- */
.event-item-card {
    background-color: #fff;
    box-shadow: 0 0 16px #ccc;
    margin-bottom: 20px;
}

.event-item-card .img-wrap::before {
    padding-top: 50%
}

.event-item-card .info-wrap .title {
    font-size: 14px;
}

.event-item-card .info-wrap .text-wrap {
    margin-top: 16px;
    font-size: 12px;
}

.event-item-card .info-wrap .text-wrap ul {
    padding-left: 20px;
}

.event-item-card .info-wrap .description {
    margin-top: 5px;
    color: #999;
    font-size: 13px;
    font-weight: 500;
}

.event-item-card .info-wrap .description a {
    color: inherit;
}

.event-item-card .info-wrap .description a:hover {
    text-decoration: underline;
}

.event-item-card .details-wrap .top-row {
    display: flex;
    justify-content: flex-end;
}

.event-item-card .details-wrap .top-row > div {
    display: flex;
    align-items: center;
}

.event-item-card .details-wrap .top-row > div + div::before {
    content: "";
    display: block;
    width: 1px;
    height: 22px;
    background-color: #808080;
    opacity: 0.6;
    margin: 0 10px;
}

.event-item-card .details-wrap .top-row-btn {
    background-color: transparent;
    border: 0;
    padding: 0;
}

.event-item-card .details-wrap .top-row-btn i {
    display: block;
    opacity: 0.85;
    color: #808080;
    font-size: 18px;
}

.event-item-card .details-wrap .top-row-btn:hover i {
    opacity: 1;
}

.event-item-card .details-wrap .center-row {
    color: #999;
    font-size: 12px;
    text-align: center;
}

.event-item-card .details-wrap .center-row .price {
    color: #545454;
    font-size: 16px;
    font-weight: bold;
}

.event-item-card .details-wrap .bottom-row .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px;
    font-size: 13px;
}

.event-item-card .details-wrap .bottom-row .btn i {
    margin-right: 6px;
}

.event-item-card .details-wrap .bottom-row .wifi-button .wifi-gray {
    display: block;
}

.event-item-card .details-wrap .bottom-row .wifi-button .wifi-white {
    display: none;
}

.event-item-card .details-wrap .bottom-row .wifi-button:hover .wifi-gray {
    display: none;
}

.event-item-card .details-wrap .bottom-row .wifi-button:hover .wifi-white {
    display: block;
}

@media (min-width: 768px) {
    .event-item-card {
        display: flex;
        padding: 16px;
    }

    .event-item-card .img-wrap {
        flex-shrink: 0;
        width: 36%;
    }

    .event-item-card .info-wrap {
        flex-grow: 1;
        padding: 0 16px;
    }

    .event-item-card .details-wrap {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        width: 190px;
        border-left: 1px solid #e6e6e6;
        padding-left: 10px;
    }

    .event-item-card .details-wrap .center-row {
        padding: 10px 0;
        margin: auto 0;
    }

    .event-item-card .details-wrap .bottom-row {
        margin-top: auto;
    }
}

@media (max-width: 767px) {
    .event-item-card .info-wrap,
    .event-item-card .details-wrap {
        padding: 16px;
    }

    .event-item-card .details-wrap {
        display: flex;
        align-items: center;
        padding-top: 4px;
    }

    .event-item-card .details-wrap .top-row {
        order: 2;
        margin-left: auto;
    }

    .event-item-card .details-wrap .bottom-row {
        order: 3;
        margin-left: auto;
    }

    .event-item-card .details-wrap .bottom-row .btn {
        padding: 4px 10px;
        font-size: 12px;
    }
}
/* ---------- /events ---------- */



/* ---------- packages ---------- */
.package-box {
    background-color: #fff;
    filter: drop-shadow(0 0 2.8125rem rgba(0,0,0,.08));
    position: relative;
    margin-bottom: 120px;
}
.package-box:before {
    content: "";
    height: 88px;
    background-image: url(/images/price-shp2.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1;
}

.package-head {
    border-bottom: 1px dashed #d1d1d0;
    padding: 40px 20px 50px;

    position: relative;
    z-index: 1;

    text-align: center;
}

.package-head .title {
    min-height: 54px;
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;    
    padding-bottom:15px;
}
.package-head > span {
    color: #2776bd;
    font-size: 70px;
    font-weight: 700;
    line-height: 1;
}
.package-head > span sup {
    color: #2776bd;
    font-size: 50%;
    font-weight: 400;
    top: -30px;
}
.package-head > i {
    background: #fff url(/images/icons/ticket.png) center no-repeat;
    background-size: contain;
    height: 45px;
    width: 72px;

    position: absolute;
    left: 50%;
    bottom: -12px;
    z-index: 1;

    transform: translateX(-50%);
}
.package-body {
    padding: 40px 40px 5px 40px;
    text-align: center;
}
.package-body > p {
    color: #4d4d4d;
    font-size: 14px;
}
.package-body > p ~ .btn {
    margin-top: 25px;
}
.package-body > .btn + span {
    margin-top: 5px;
}
.package-body > span {
    display: block;
    font-size: 15px;
    color: #505150;
    font-weight: 300;
}
.package-body .btn {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 15px;
}
/* ---------- /packages ---------- */


/* ---------- social media ---------- */
.social-media-section .section-title{
    margin-bottom: 30px;
}
.social-media-section ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}          
.social-media-section ul li {
    width: 120px;
    margin: 15px;
}
.social-media-section ul li div {
    width: 120px;
    height: 120px;
    background-color: #0e76bd;
    transition: all 0.5s ease;

    color: #74d4b3;
    font-size: 3.4em;
    text-align: center;
    line-height: 120px;
}
.social-media-section ul li div:hover {
    border-radius: 100px;
    transform: rotate(360deg);
}

.social-media-section ul li a {
    color: #fff;
}
.social-media-section ul li span {
    display: block;
    width: 120px;
    height: 20px;
    padding-top: 10px;

    color: #0e76bd;
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: center;
}
/* ---------- /social media ---------- */



/* ==================== 5. content by pages ==================== */


/* ---------- home ---------- */
.page-home{
    background-color: #fff;
    padding: 0;
}
/*.page-home .section {
    padding: 55px 0;
}
.page-home .section:nth-child(even) {
    background-color: #f2f2f2;
}
.page-home .section-title{
    margin: 0 0 50px;
    text-align: center;
}*/

.page-home .intro-section{
    display: flex;
    align-items: stretch;
    height: 70vh;
    padding: 0;
}
.page-home .intro-section a{
    width: 25%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.page-home .intro-section a::before{
    content:"";
    width: 100%;
    height: 80%;
    background: linear-gradient(to top, rgba(39,118,189,0.5) 0%,rgba(39,118,189,0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.page-home .intro-section a div{
    padding: 20px 35px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
}
.page-home .intro-section a .title{
    color: #fff;
    font-size: 36px;
    text-transform: uppercase;
}
.page-home .intro-section a div img{
    display: block;
    margin-bottom: 20px
}

.page-home .intro-section a .logo-afip{
    max-width: 82px;
}
.page-home .intro-section a .logo-prodprep-live{
    height: 68px;
}
.page-home .intro-section a .logo-gundermann{
    max-width: 200px;
}

@media (min-width: 992px) {
    .page-home .intro-section a,
    .page-home .intro-section a .title {
        transition: all 0.6s ease;
    }

    .page-home .intro-section:hover a:not(:hover) .title {
        font-size: 20px;
    }

    .page-home .intro-section a:hover {
        width: 45%;
    }
}

@media (max-width: 1680px) {
    .page-home .intro-section a .title{
        font-size: 32px;
    }
}
@media (max-width: 1500px) {
    .page-home .intro-section a .title{
        font-size: 26px;
    }
}

@media (max-width: 1300px){
    .page-home .intro-section a div{
        padding-left: 15px;
        padding-right: 15px;
    }
    .page-home .intro-section a .title{
        font-size: 24px;
    }
    .page-home .intro-section a div img{
        max-width: 62px;
        margin-bottom: 15px
    }
}
@media (max-width: 1199px) {
    .page-home .intro-section a .logo-gundermann {
        max-width: 80%;
    }
}
@media (max-width: 991px) {
    .page-home .intro-section a .title {
        font-size: 20px;
    }
}
@media (max-width: 767px) {
    .page-home .intro-section{
        flex-wrap: wrap;
        height: auto;
    }
    .page-home .intro-section a {
        width: 100%;
        min-height: 160px;
    }
    .page-home .intro-section a .logo-gundermann {
        max-width: 180px;
    }
}
/* ---------- /home ---------- */


/* ---------- promo ---------- */
.page-promo{
    padding-top: 60px;
    padding-bottom: 60px;
}

.page-promo > *:not(:last-child){
    margin-bottom: 50px;
}

.page-promo .video-container{
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.21);
    padding: 8px;
    position: relative;
    z-index: 2;
}

.page-promo .form-container{
    width: 100%;
    max-width: 500px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 11px;
    padding: 12px 15px;
}

.page-promo .form-container .title{
    color: #323232;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.1;
    margin: 7px 0 17px;
}

.page-promo .form-container .error-text{
    font-size: 12px;
    margin: 3px 0 0 3px; 
}

.page-promo .form-container .btn-wrap{
    padding: 0 15px;
}
.page-promo .form-container .submit-btn{
    display: block;
    width: 100%;
    height: 40px;
    background-color: #0f6bb5;
    border: 1px solid #0f6bb5;
    border-radius: 6px;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0;
    color: #fff;
    font-size: 20px;
    font-weight: bold;    
    text-align: center;
}

.page-promo .info-items-row{
    margin-bottom: -50px;
}
.page-promo .info-item{
    margin-bottom: 50px;
    text-align: center;
}
.page-promo .info-item .icon-wrap{
    display: block;
    margin-bottom: 35px;
}
.page-promo .info-item .icon-wrap i{
    display: block;
    color: #0e76bd;
    font-size: 60px;
}
.page-promo .info-item .title{
    color: #2e2e2e;
    font-size: 24px;
    margin-bottom: 15px;
}
.page-promo .info-item .text{
    font-size: 14px;
}

@media (max-width: 991px){
    .page-promo .form-container{
        margin: 30px auto 5px;
    }

    .page-promo .info-items-row{
        margin-bottom: -25px;
    }
    .page-promo .info-item{
        margin-bottom: 25px;
    }
}
@media (max-width: 767px) {
    
}
/* ---------- /promo ---------- */


/* ---------- landing ---------- */
.page-landing{
    background-color: #fff;
    padding: 0;
}

/*.page-landing .section:nth-child(even){
    background-color: #f2f2f2;
}*/

@media (max-width: 767px){
    .page-landing .section .container > .title{
        font-size: 32px;
    }
}

/* intro */
.page-landing .intro-section{
    display: flex;
    flex-direction: column;
    height: 600px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 85px 0;
    position: relative;
}
.page-landing .intro-section::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(39,118,189,1) 0%,rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.page-landing .intro-section .container{
    position: relative;
    z-index: 2;
}

.page-landing .intro-section .title{
    color: #fff;
    font-size: 40px;
    text-transform: uppercase;
}
.page-landing .intro-section .title span{
    display: block;
    font-weight: 300;
}

.page-landing .intro-section img{
    display: block;
    max-width: 100%;
    margin: 0 0 21px;
}
.page-landing .intro-section .title + img{
    margin: 21px 0 0;
}

@media (max-width: 767px){
    .page-landing .intro-section{
        height: auto;
    }
}

/* about */
.page-landing .about-section .text-wrap{
    text-align: justify;
}

/* features */
.page-landing .features-section{
    padding-bottom: 0;
}
.page-landing .features-section .row > div{
    margin-bottom: 57px;
}
.page-landing .features-section-item{
    min-height: 100%;
    background-color: #f2f2f2;
}
.page-landing .features-section-item .head{
    display: flex;
    flex-direction: column;
    min-height: 60px;
    background-color: #2776bd;
    padding: 10px 30px;
}
.page-landing .features-section-item .head .title{
    margin: auto 0;

    color: #fff;
    /*font-size: 22px;*/
    font-size: 1.375rem;
    text-align: center;
}
.page-landing .features-section-item .body{
    padding-top: 30px;
}
.page-landing .features-section-item .body ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-landing .features-section-item .body li{
    background: url(/images/landing/list_triangle.svg) 20px 4px no-repeat;
    background-size: 10px 16px;
    padding: 0 10px 30px 38px;

    color: #4d4d4d;
    font-size: 1rem;
}
.page-landing .features-section-item .body li ul{
    margin-top: 18px;
}
.page-landing .features-section-item .body li li{
    background-position: 0 4px;
    padding: 0 0 15px 18px;
}
.page-landing .features-section-item .body li li:last-child{
    padding-bottom: 0;
}

/* pricing */
.page-landing .price-card-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.page-landing .pricing-section .price-card {
    width: 100%;
    max-width: 460px;
    background-color: #fff;
    padding: 45px 15px;
    margin: 5px 15px;
    text-align: center;
}
@media (min-width: 992px){
    .page-landing .pricing-section .price-card{
        padding-left: 25px;
        padding-right: 25px;
    }
}
.page-landing .pricing-section .price-wrap{
    display: flex;
}
.page-landing .pricing-section .price-wrap > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 162px;
    height: 162px;
    background-color: #2776bd;
    border-radius: 50%;
    margin: 0 auto;

    color: #fff;
    font-size: 19px;
    font-weight: bold;
    line-height: 1;
}
.page-landing .pricing-section .price-wrap > div > *{
    display: block;
}
.page-landing .pricing-section .price-wrap .price{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 2px;

    font-size: 35px;
    line-height: 0.8;
}
.page-landing .pricing-section .price-wrap .price span{
    margin: 2px 5px 0 0;
}
.page-landing .pricing-section .price-wrap .price b{
    font-size: 67px;
}

.page-landing .pricing-section hr{
    max-width: 352px;
    border-top-color: #d9d9d9;
    margin: 34px auto 40px;
}

.page-landing .pricing-section .text-wrap{
    color: #666;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.page-landing .pricing-section .text-wrap .text-small{
    font-size:16px
}
.page-landing .pricing-section .text-wrap > *:not(:last-child){
    margin-bottom: 22px;
}

/* pricing list */
.page-landing .pricing-list-section .section-title{
    margin-bottom: 41px;
}
.page-landing .pricing-list-section .section-title + .section-sub-title,
.page-landing .pricing-list-section .section-sub-title + .section-title{
    margin: -41px 0 41px;
}
.page-landing .pricing-list-section .row{
    justify-content: center;
    margin-bottom: 40px;
}
.page-landing .pricing-list-section .row > div{
    margin-bottom: 20px;
}
.page-landing .pricing-list-section .price-card{
    min-height: 100%;
    padding: 35px 15px 40px;
    margin: 0;

    color: #4d4d4d;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.page-landing .pricing-list-section .price-card .title{
    color: #333;
    font-size: 35px;
    line-height: 1;
}
.page-landing .pricing-list-section .price-wrap{
    margin: 26px 0 35px;
}
@media (max-width: 767px){
    .page-landing .pricing-list-section .price-card{
        max-width: 320px;
        margin: 0 auto;
    }
    .page-landing .pricing-list-section .price-card .title{
        font-size: 30px;
    }
}
@media (min-width: 768px){
    .page-landing .pricing-list-section .price-card .title{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 70px;
    }
}

/* teachers */
.page-landing .teachers-section{
    padding-bottom: 0;
}
.page-landing .teachers-section .row > div{
    margin-bottom: 57px;
}
.page-landing .teacher-item{
    display: flex;
    min-height: 100%;
    background-color: #f2f2f2;
}
.page-landing .teacher-item .img-wrap{
    flex-shrink: 0;
    width: 188px;
}
.page-landing .teacher-item .img-wrap figure{
    margin: -12px 0 0 -12px;
    position: relative;
}
.page-landing .teacher-item .img-wrap figure::before{
    content: "";
    display: block;
    padding-top: 132%;
}
.page-landing .teacher-item .img-wrap figure img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.page-landing .teacher-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 29px 15px 25px;
}
.page-landing .teacher-item .title{
    font-size: 30px;
}
.page-landing .teacher-item .text-wrap{
    margin: 20px 0 15px;
    text-align: justify;
}
.page-landing .teacher-item .show-more-btn{
    display: block;
    width: 100%;
    max-width: 156px;
    height: 44px;
    background-color: #2776bd;
    border: 0;
    outline: none;
    margin-top: auto;

    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}
.page-landing .teacher-item .show-more-btn:hover{
    opacity: 0.8;
}

.page-landing .teacher-item-details{
    display: block;
    max-width: 715px;
    margin: 0 auto 55px;
}
.page-landing .teacher-item-details:last-child{
    margin-bottom: 0;
}
.page-landing .teacher-item-details .img-wrap{
    float: left;
    margin-right: 15px;
}
.page-landing .teacher-item-details .info-wrap{
    display: block;
}

@media (min-width: 992px){
    .page-landing .teacher-item-details .info-wrap{
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 991px){
    .page-landing .teacher-item .img-wrap figure{
        margin: -6px 0 0 -6px;
    }
}
@media (max-width: 575px){
    .page-landing .teacher-item .img-wrap{
        width: 110px;
    }
}

/* teacher modal */
.teacher-modal{
    overflow: hidden;
}
.teacher-modal .modal-dialog{
    max-width: 720px;
}
.teacher-modal .modal-content{
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 32px;
}
.teacher-modal button.close{
    width: auto;
    height: auto;
    background-color: transparent;
    border: 0;
    outline: 0;
    border-radius: 0;
    padding: 10px;
    opacity: 1;
    position: absolute;
    top: 5px;
    right: 5px;
}
.teacher-modal button.close img{
    display: block;
    width: 14px;
}
.teacher-modal button.close:hover{
    opacity: 0.8;
}

.teacher-modal article figure{
    float: left;
    width: 200px;
    margin: 0 20px 10px 0;
    position: relative;
}
.teacher-modal article figure::before{
    content: "";
    display: block;
    padding-top: 132%;
}
.teacher-modal article figure img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.teacher-modal article .title{
    padding-top: 30px;
}
.teacher-modal article .sub-title-sm{
    font-size: 14px;
    margin-top: 20px;
}
.teacher-modal article .text-wrap{
    color: #6d6e70;
    font-size: 16px;
    margin-top: 20px;
}

@media (max-width: 991px){
    .teacher-modal{
        padding-right: 0 !important;
    }
}
@media (max-width: 575px){
    .teacher-modal .modal-content{
        padding: 32px 15px;
    }
    .teacher-modal article figure{
        float: none;
        margin: 0 0 25px;
    }
    .teacher-modal article .title{
        padding-top: 0;
    }
}


/* --- afip --- */
.page-afip .intro-section img{
    width: 184px;
}
@media (max-width: 767px){
    .page-afip .intro-section img{
        width: 140px;
    }
}

/* --- afip 2 --- */
@media (min-width: 1200px) {
    .page-afip-2 .container{
        padding-left: 75px;
    }
}

.page-afip-2 .intro-section .img-wrap,
.page-afip-2 .teacher-item .img-wrap{
    flex-shrink: 0;
    width: 210px;
}
.page-afip-2 .intro-section .info-wrap,
.page-afip-2 .teacher-item .info-wrap{
    flex-grow: 1;
    padding-left: 56px;
}
@media (max-width: 991px) {
    .page-afip-2 .intro-section .img-wrap,
    .page-afip-2 .teacher-item .img-wrap{
        width: 184px;
    }
    .page-afip-2 .intro-section .info-wrap,
    .page-afip-2 .teacher-item .info-wrap{
        padding-left: 20px;
    }
}

.page-afip-2 .intro-section{
    display: flex;
    flex-direction: column;
    padding: 70px 0;
}
.page-afip-2 .intro-section::before{
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%)
}

.page-afip-2 .intro-section .container{
    margin-top: auto;
}

.page-afip-2 .intro-section .content{
    display: flex;
}

.page-afip-2 .intro-section img{
    display: block;
    width: 100%;
    margin-top: 58px;
}

.page-afip-2 .intro-section .title{
    max-width: 540px;
    margin: 32px 0 40px;
}
.page-afip-2 .intro-section .title-sm{
    margin: 0;
}

.page-afip-2 .intro-section .afip-box{
    display: flex;
}
.page-afip-2 .intro-section .afip-box > div{
    background-color: #2676bd;
    padding: 16px 26px 18px;

    color: #fff;
    font-size: 32px;
    line-height: 1.1;
    text-transform: uppercase;
}
.page-afip-2 .intro-section .afip-box > div > *{
    display: block;
    font-weight: bold;
}
.page-afip-2 .intro-section .afip-box > div > strong{
    font-size: 40px;
}

@media (max-width: 991px) {
    .page-afip-2 .intro-section img{
        margin-top: 44px;
    }

    .page-afip-2 .intro-section .title{
        font-size: 28px;
        margin: 20px 0 28px;
    }
    .page-afip-2 .intro-section .title-sm {
        font-size: 24px;
        margin: 0;
    }

    .page-afip-2 .intro-section .afip-box > div{
        font-size: 26px;
    }
    .page-afip-2 .intro-section .afip-box > div > strong{
        font-size: 30px;
    }
}
@media (max-width: 767px) {
    .page-afip-2 .intro-section .content{
        display: block;
    }
    .page-afip-2 .intro-section img {
        margin: 0 0 30px;
    }
}
@media (max-width: 575px) {
    .page-afip-2 .intro-section .img-wrap{
        width: 110px;
    }
    .page-afip-2 .intro-section img{
        margin-bottom: 20px;
    }

    .page-afip-2 .intro-section .title{
        font-size: 26px;
        margin: 15px 0 20px;
    }
    .page-afip-2 .intro-section .title-sm {
        font-size: 26px;
        margin: 0;
    }

    .page-afip-2 .intro-section .afip-box > div{
        font-size: 22px;
    }
    .page-afip-2 .intro-section .afip-box > div > strong{
        font-size: 26px;
    }
}


.page-afip-2 .teachers-section{
    padding: 70px 0;
}
.page-afip-2 .teacher-item .img-wrap figure{
    margin: 0;
}
.page-afip-2 .teacher-item .img-wrap figure::before{
    padding-top: 126%;
}
.page-afip-2 .teacher-item .info-wrap{
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.page-afip-2 .teacher-item .title{
    font-size: 42px;
}
.page-afip-2 .teacher-item .text-wrap{
    color: #000;
    font-size: 25px;
    line-height: 1.2;
    margin: 20px 0 28px;
}
.page-afip-2 .teacher-item .btn-wrap{
    margin-top: auto;
}
.page-afip-2 .teacher-item .btn{
    box-shadow: none;
    padding: 7px 25px 6px;
    outline: none;

    font-size: 40px;
    font-weight: bold;
    font-style: normal;
}
@media (max-width: 991px) {
    .page-afip-2 .teacher-item .title{
        font-size: 36px;
    }
    .page-afip-2 .teacher-item .text-wrap{
        font-size: 22px;
    }
    .page-afip-2 .teacher-item .btn{
        font-size: 34px;
    }
}
@media (max-width: 767px) {
    .page-afip-2 .teachers-section{
        padding: 55px 0;
    }
    .page-afip-2 .teacher-item .img-wrap{
        width: 110px;
    }
    .page-afip-2 .teacher-item .title{
        font-size: 26px;
    }
    .page-afip-2 .teacher-item .text-wrap{
        font-size: 16px;
        margin: 8px 0 12px;
    }
    .page-afip-2 .teacher-item .btn{
        font-size: 16px;
    }
}


.page-afip-2 .features-section{
    padding: 70px 0;
}
.page-afip-2 .features-section .container{
    max-width: 850px;
}

.page-afip-2 .features-section .container > .title{
    font-size: 36px;
    margin-bottom: 20px;
}
.page-afip-2 .features-section .container > .title + .text-wrap{
    font-size: 25px;
    text-align: center;
    margin-bottom: 40px;
}

.page-afip-2 .features-section .text-wrap,
.page-afip-2 .features-section-item .body,
.page-afip-2 .features-section-item .body li{
    color: #000;
    font-size: 22px;
}

.page-afip-2 .features-section-item{
    margin-bottom: 40px;
}
.page-afip-2 .features-section-item .body{
    padding: 40px 48px;
}

.page-afip-2 .features-section-item .body-title{
    color: #2676bd;
    font-size: 30px;
    font-weight: normal;

    margin: 0 0 25px;
}

.page-afip-2 .features-section-item .body ul{
    margin: 0 0 10px;
}
.page-afip-2 .features-section-item .body li{
    background: url(/images/landing/list_triangle_2.png) 0 2px no-repeat;
    padding: 0 0 16px 30px;
}

.page-afip-2 .features-section-item .body p{
    margin: 0;
}

@media (max-width: 991px) {
    .page-afip-2 .features-section-item .body-title{
        font-size: 28px;
    }
    .page-afip-2 .features-section .text-wrap,
    .page-afip-2 .features-section-item .body,
    .page-afip-2 .features-section-item .body li{
        font-size: 20px;
    }
}
@media (max-width: 767px) {
    .page-afip-2 .features-section{
        padding: 55px 0;
    }
    .page-afip-2 .features-section .container > .title{
        font-size: 32px;
        margin-bottom: 12px;
    }
    .page-afip-2 .features-section .container > .title + .text-wrap{
        font-size: 16px;
        margin-bottom: 30px;
    }
    .page-afip-2 .features-section-item .body {
        padding: 15px 18px;
    }
    .page-afip-2 .features-section-item .body-title{
        font-size: 22px;
        margin-bottom: 15px;
    }
    .page-afip-2 .features-section .text-wrap,
    .page-afip-2 .features-section-item .body,
    .page-afip-2 .features-section-item .body li{
        font-size: 16px;
    }

    .page-afip-2 .features-section-item .body li{
        padding: 3px 0 12px 24px;
    }
}

.free-webinars-modal{    
    padding: 10px;
}
.free-webinars-modal .modal-dialog{
    width: 100%;
    max-width: 930px;
    margin: auto;
}
.free-webinars-modal .close{
    padding: 4px 12px 8px;
    outline: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    cursor: pointer;
    font-size: 30px;
}
.free-webinars-modal .modal-body{
    display: flex;
    padding: 0;
}

.free-webinars-modal .img-wrap{
    flex-shrink: 0;
    width: 394px;
    margin-top: auto;
}
.free-webinars-modal .img-wrap img{
    width: 100%;
}

.free-webinars-modal .content-wrap{
    padding: 70px 20px 70px 0;
}

.free-webinars-modal .text-wrap{
    color: #000;
    font-size: 36px;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 40px;
}

.free-webinars-modal .form{
    max-width: 450px;
    margin: 0 auto;
    text-align: center;
}
.free-webinars-modal .form-control{
    height: 50px;
    margin-bottom: 15px;

    font-size: 26px;
    font-weight: bold;
    text-align: center;
}
.free-webinars-modal .form .btn{
    display: block;
    width: 100%;
    outline: none;
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}
.free-webinars-modal .form p{
    color: #ab9e9e;
    font-size: 28px;
}

@media (max-width: 920px){
    .free-webinars-modal .modal-dialog{
        max-width: 700px;
    }

    .free-webinars-modal .content-wrap{
        padding: 40px 15px;
    }
    .free-webinars-modal .img-wrap{
        width: 260px;
    }
    .free-webinars-modal .text-wrap{
        font-size: 26px;
    }

    .free-webinars-modal .form p{
        font-size: 22px;
    }
}
@media (max-width: 767px) {
    .free-webinars-modal .img-wrap{
        display: none;
    }

    .free-webinars-modal .text-wrap{
        font-size: 18px;
        margin-bottom: 25px;
    }

    .free-webinars-modal .form-control{
        height: 43px;

        font-size: 18px;
    }
    .free-webinars-modal .form .btn{
        padding: 8px 12px;
        font-size: 18px;
    }
    .free-webinars-modal .form p{
        font-size: 18px;
    }
}

/* --- prodprep-live --- */
.page-prodprep-live .intro-section img{
    width: 170px;
}
.page-prodprep-live .intro-section .container{
    margin: auto;
}

/* --- insurence-prep --- */
.page-insurence-prep .intro-section .container{
    margin: auto auto 0;
}
.page-insurence-prep .intro-section img{
    max-width: 300px;
}
.page-insurence-prep .intro-section .title{
    font-weight: normal;
}

@media (min-width: 767px){
    .page-insurence-prep .intro-section{
        height: 460px;
    }
}
@media (max-width: 767px){
    .page-insurence-prep .intro-section img{
        max-width: 200px;
    }
}

/* ---------- /landing ---------- */


/* ---------- course ---------- */
.page-courses{
    background-color: #fff;
}


/* --- course intro --- */
.courses-intro-section{
    display: flex;
    border-left: 2px solid #fff;
}
ul.courses-intro-section{
    list-style: none;
}
.courses-intro-section.nav{
    flex-wrap: nowrap;
}

.courses-intro-item{
    display: flex;
}
.courses-intro-item,
.courses-intro-item .head{
    flex: 0 0 102px;
    transition: all 0.2s linear;
}
.courses-intro-item .head {
    transition-duration: 100ms;
}
.courses-intro-item .head > *{
    width: 102px;
}
.courses-intro-item.is-open{
    flex-grow: 1;
    width: 100%;
}
.courses-intro-item.is-open .head{
    opacity: 0;
    flex: 0 0 0;
}


.courses-intro-item .title{
    color: #fff;
    font-size: 36px;
    text-transform: uppercase;
}

/* head */
.courses-intro-item .head{
    flex-shrink: 0;
    background: rgb(23,87,165);
    background: linear-gradient(0deg, rgba(23,87,165,1) 0%, rgba(39,118,189,1) 100%);
    overflow: hidden;
    position: relative;
}
.courses-intro-item .head > *{
    height: 100%;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.courses-intro-item .head > * > span{
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 0 10px;
    white-space: nowrap;

    position: absolute;
    top: 100%;
    left: 50%;
    transform-origin: 0 0;
    transform: rotate(-90deg) translate(5px, -50%);
}
.courses-intro-item .head img{
    display: block;
    max-width: 100%;
    margin-right: 24px;
}
/* body */
.courses-intro-item .body{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 244px;
    /*min-height: 244px;
    max-height: 600px;*/
    overflow: hidden;
    position: relative;
}
/*.courses-intro-item .body::before{
    content: "";
    display: block;
    padding-top: 56.25%;
}*/
.courses-intro-item .body::before {
    content: "";
    width: 100%;
    height: 80%;
    background: linear-gradient(to top, rgba(39,118,189,0.5) 0%,rgba(39,118,189,0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.courses-intro-item .body figure{
    /*width: calc(100vw - 306px - 2px);*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.courses-intro-item .body figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.courses-intro-item .body figcaption{
    padding: 11px 21px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
}
@media (max-width: 991px){
    .courses-intro-item,
    .courses-intro-item .head{
        flex: 0 0 62px;
    }
    .courses-intro-item .head > * {
        width: 62px;
    }
    .courses-intro-item .title{
        font-size: 21px;
    }
    .courses-intro-item .head > *{
        padding: 5px 8px;
    }
    .courses-intro-item .head img{
        margin-right: 10px;
    }

    /*.courses-intro-item .body figure {
        width: calc(100vw - 186px - 2px);
    }*/
    .courses-intro-item .body figcaption{
        padding: 10px 18px;
    }
}
@media (max-width: 767px){
    .courses-intro-item,
    .courses-intro-item .head{
        flex: 0 0 42px;
    }
    .courses-intro-item .head > * {
        width: 42px;
    }
    .courses-intro-item .title{
        font-size: 18px;
    }
    .courses-intro-item .head > *{
        padding: 0 5px;
    }
    .courses-intro-item .head img{
        margin-right: 6px;
    }

    /*.courses-intro-item .body figure {
        width: calc(100vw - 126px - 2px);
    }*/
    .courses-intro-item .body figcaption{
        padding: 7px 15px;
    }
}

@media (min-width: 768px) {
    .courses-intro-item .body{
        height: 480px;
    }
}
@media (min-width: 1200px) {
    .courses-intro-item .body{
        height: 520px;
    }
}
@media (min-width: 1921px) {
    .courses-intro-item .body{
        height: 600px;
    }
}


/* --- courses grid --- */
.courses-grid-section {
    margin: 50px 0 80px;
}
.courses-grid-section .container{
    max-width: 956px;
}
.courses-grid-section .section-title{
    margin-bottom: 45px;
}

.courses-grid{
    width: 100%;
    overflow: hidden;
}
.courses-grid .courses-grid-item{
    margin-bottom: 20px;
}

.courses-grid-item{
    display: flex;
    align-items: flex-start;
}
.courses-grid-item .img-wrap,
.courses-grid-item figure{
    flex-shrink: 0;
    width: 196px;
}
.courses-grid-item figure::before{
    padding-top: 61.74%;
}

.courses-grid-item .img-wrap figure{
    width: 100%;
}

.courses-grid-item .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}
.courses-grid-item .info-wrap .title{
    margin-bottom: 5px;
    font-size: 18px;
}
.courses-grid-item .info-wrap ul{
    list-style: none;
}
.courses-grid-item .info-wrap li{
    display: flex;
    margin-top: 4px;

    color: #4d4d4d;
    font-size: 14px;
    line-height: 1.2;
}
.courses-grid-item .info-wrap li img{
    display: block;
    width: 14px;
    margin-right: 10px;
}
.courses-grid-item .info-wrap li > i{
    display: block;
    width: 16px;
    margin-right: 10px;
    color: #2677BC;
    text-align: center;
}
.courses-grid-item .info-wrap li > span{
    margin: auto 0;
}

.courses-grid-item.is-locked figure::after{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;

    content: "\f30d";
    font-family: "Font Awesome 5 Pro";
    color: #fff;
    font-size: 30px;
    font-weight: 300;
}

/* progress */
.courses-grid-item .progress{
    height: 6px;
    border-radius: 0;
    overflow: visible;
}
.courses-grid-item .progress-bar{
    width: 0;
    position: relative;
    overflow: visible;
}
.courses-grid-item .progress-bar > span{
    background-color: #007bff;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    padding: 2px 4px;
    margin-bottom: 8px;

    position: absolute;
    bottom: 100%;
    right: 0;

    font-size: 10px;
    line-height: 1.2;
}
.courses-grid-item .progress-bar > span::after{
    content: "";
    border-bottom: 8px solid transparent;
    border-right: 8px solid #007bff;
    position: absolute;
    top: 100%;
    right: 0;
}
.courses-grid-item .progress-bar.bg-success > span{
    background-color: #28a745;
}
.courses-grid-item .progress-bar.bg-success > span::after{
    border-right-color: #28a745;
}
.courses-grid-item .progress-bar.bg-info > span{
    background-color: #17a2b8;
}
.courses-grid-item .progress-bar.bg-info > span::after{
    border-right-color: #17a2b8;
}
.courses-grid-item .progress-bar.bg-warning > span{
    background-color: #ffc107;
}
.courses-grid-item .progress-bar.bg-warning > span::after{
    border-right-color: #ffc107;
}
.courses-grid-item .progress-bar.bg-danger > span{
    background-color: #dc3545;
}
.courses-grid-item .progress-bar.bg-danger > span::after{
    border-right-color: #dc3545;
}

@media (max-width: 991px) {
    .courses-grid-section {
        margin: 35px 0 60px;
    }

    .courses-grid-section .section-title {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px){
    .courses-grid-item .img-wrap,
    .courses-grid-item figure{
        width: 154px;
    }
    .courses-grid-item .info-wrap .title {
        font-size: 16px;
    }
    .courses-grid-item .info-wrap li{
        font-size: 13px;
    }
}

@media (max-width: 374px){
    .courses-grid .courses-grid-item{        
        margin-bottom: 25px;
    }
    
    .courses-grid-item{
        flex-direction: column;
    }
    .courses-grid-item .img-wrap,
    .courses-grid-item figure{
        width: 100%;
    }
    .courses-grid-item .info-wrap{
        padding: 10px 0 0 0;
    }
    .courses-grid-item .info-wrap .title{
        min-height: inherit;
    }
}


/* --- chapter --- */
.chapter {
    counter-reset: chapter-sections-counter;
    border-bottom: 1px solid #f1f1f2;
}

.chapter .head {
    display: flex;
    justify-content: space-between;
    background-color: #0e76bd;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 14px 18px;
}

.chapter + .chapter .head {
    border-radius: 0;
}

.chapter .head > * {
    margin-top: auto;
    margin-bottom: auto;
}

.chapter .head .title {
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.2;
}

.chapter .body li {
    display: flex;
    align-items: stretch;
    background-color: #f1f1f2;
    border-top: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
    position: relative;
}

.chapter .body li.disabled {
    pointer-events: auto;
}

.chapter .body li::before {
    flex-shrink: 0;
    counter-increment: chapter-sections-counter;
    content: counter(chapter-sections-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    background-color: #ddd;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 700;
    color: #666;
    text-align: center;
    text-transform: uppercase;
}

.chapter .body li .content,
.chapter .body li > i {
    margin-top: auto;
    margin-bottom: auto;
}

.chapter .body li > i {
    flex-shrink: 0;
    margin-right: 20px;
}

.chapter .body li .content {
    flex-grow: 1;
    position: relative;
    padding: 20px;
}

.chapter .body li .content > * + * {
    margin-top: 10px;
}

.chapter .body li .content .text {
    position: relative;
    line-height: 1.3;
}

.chapter .body li .content .text-muted {
    color: #a6a6a6;
}

.chapter .body li .content .text > i {
    margin-right: 15px;
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-54%);
}

.chapter .body li .content .text a {
    color: inherit;
}

.chapter .body li .progress-wrap {
    flex-shrink: 0;
    display: flex;
    width: 23px;
    position: relative;
    margin-right: 10px;
}

.chapter .body li .progress-wrap::before {
    content: "";
    width: 3px;
    height: 100%;
    background-color: #d4d4d4;
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 1;
}

.chapter .body li .progress-wrap i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    background-color: #d4d4d4;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    margin: auto 0;
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 12px;
}

.chapter .body li .progress-wrap i::before {
    opacity: 0;
}

.chapter .body li .progress-wrap.finished::before,
.chapter .body li .progress-wrap.finished i {
    background-color: #37abf2;
}

.chapter .body li .progress-wrap.finished i {
    border-color: #37abf2;
}

.chapter .body li .progress-wrap.finished i::before {
    opacity: 1;
}

.chapter .body li,
.chapter .body li::before,
.chapter .body li .progress-wrap i {
    transition: all 0.3s ease 0s;
}

.chapter .body li:hover {
    background-color: #fff;
    border-top: 1px solid #eee;
}

.chapter .body li:hover + li {
    border-top: 1px solid #eee;
}

.chapter .body li.current:before,
.chapter .body li:hover::before {
    background-color: #37abf2;
    color: #fff;
}

.chapter .body li:hover .progress-wrap:not(.finished) i {
    background-color: #fff;
}

.chapter .body li.disabled{
    pointer-events: none;
}

@media (max-width: 575px) {
    .chapter .body li::before {
        display: none;
    }

    .chapter .head {
        padding-left: 15px;
        padding-right: 15px;
    }

    .chapter .body li .content {
        padding: 15px;
    }
}


/* course section */
.page-course-section .media-container > .row > div{
    display: flex;
    flex-direction: column;
}
.page-course-section .media-container .card{
    flex-grow: 1;
}

.page-course-section .main-video-container{
    position: relative;
}
/*.page-course-section .main-video-container > *{
    position: absolute;
    top: 0;
    left: 0;
}*/
.page-course-section .main-video-play-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor:pointer;
    z-index: 2;
}

.page-course-section .media-container .files-col section{
    margin-bottom: 10px;
}
.page-course-section .media-container .files-col section > .title{
    margin: 12px 12px 5px 12px;
    color: #4d4d4d;
    font-size: 18px;
}
.page-course-section .media-container .video-items-list{
    list-style: none;
}
.page-course-section .media-container .video-items-list li{
    display: flex;
    border-bottom: 1px solid #e7e6e5;
    padding: 12px;
}
.page-course-section .media-container .video-items-list li:not(.active){
    cursor: pointer;
}
.page-course-section .media-container .video-items-list a{
    color: inherit;
    text-decoration: none;
}
.page-course-section .media-container .video-items-list figure{
    flex-shrink: 0;
    width: 104px;
}
.page-course-section .media-container .video-items-list figure img{
    display: block;
    width: 100%;
    height: 60px;
    object-fit: cover;
}
.page-course-section .media-container .video-items-list li > div{
    display: flex;
    flex-direction: column;
    padding-left: 12px;
}
.page-course-section .media-container .video-items-list .name{
    margin: auto;

    color: #337ab7;
    font-size: 13px;
    line-height: 14px;
    text-decoration: none;
}
.page-course-section .media-container .video-items-list .description{
    color: #6b6b6b;
    font-size: 12px;
    line-height: 13px;
}

.page-course-section .media-container .files-list a{
    padding: 12px 5px 12px 12px;
}

.page-course-section .media-container .video-items-list li:hover,
.page-course-section .media-container .video-items-list li.active,
.page-course-section .media-container .files-list a:hover,
.page-course-section .media-container .files-list a.active{
    background-color: #96bfdc;
}
.page-course-section .media-container .video-items-list li:hover .name,
.page-course-section .media-container .video-items-list li.active .name,
.page-course-section .media-container .files-list a:hover .name,
.page-course-section .media-container .files-list a.active .name {
    color: #fff;
}

.page-course-section .details-container .card-body{
    padding: 20px;
}
.page-course-section .bookmarks-controls-container > div{
    margin-bottom: 10px;
}
.page-course-section .bookmarks-controls-container .btn-wrap{
    background: #f7f7f7;
    padding: 8px 18px;
}
.page-course-section .bookmarks-controls-container .btn-wrap a{
    color: #0f76be;
    font-size: 14px;
    font-weight: bold;
}
.page-course-section .bookmarks-controls-container .form-wrap{
    display: none;
    padding: 0 5px 0 18px;
}
.page-course-section .bookmarks-controls-container .form-wrap .form-control,
.page-course-section .bookmarks-controls-container .form-wrap .btn{
    height: 38px;
    font-size: 14px;
}
.page-course-section .bookmarks-controls-container .form-wrap .btn{
    padding: 8px 12px 6px
}
.page-course-section .bookmarks-controls-container .form-wrap .time-col > div{
    width: 180px;
}
.page-course-section .bookmarks-controls-container .form-wrap .btn-col{
    display: flex;
}
.page-course-section .bookmarks-controls-container .form-wrap .close-btn{
    padding: 7px;
    margin-left: 5px;
}

.page-course-section .bookmarks-list{
    list-style: none;
}
.page-course-section .bookmarks-list li{
    display: flex;
    align-items: center;
    padding: 8px 18px;

    color: #2e2e2e;
    font-size: 18px;
    font-weight: 300;
    white-space: nowrap;
}
.page-course-section .bookmarks-list li:nth-child(odd) {
    background: #f7f7f7;
}
.page-course-section .bookmarks-list li:hover {
    background-color: #dfdede;
}
.page-course-section .bookmarks-list li a{
    color: inherit;
}
.page-course-section .bookmarks-list li .name{
    flex-grow: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-course-section .bookmarks-list li > *:not(.name){
    flex-shrink: 0;
    margin-left: 10px;
}
/* ---------- /course ---------- */


/* ---------- course sections aside ---------- */
.course-sections-aside {
    width: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 400;
}
.course-sections-aside .close-btn{
    padding: 5px;
    position: absolute;
    top: 0;
    right: 0;
}
.course-sections-aside .close-btn i:before,
.course-sections-aside .close-btn i:after{
    height: 2px;
    background-color: #0f76be;
}

.course-sections-aside > div {
    background-color: #f1f1f2;
    box-shadow: -5px 0 5px 0 rgba(0,0,0,0.1);
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

html:not(.desktop) .course-sections-aside > div {
    webkit-overflow-scrolling: touch;
    overflow: auto;
}

.course-sections-aside.show,
.course-sections-aside > div {
    width: 360px;
}
.course-sections-aside.show > div {
    transform: translateX(0);
}

.course-sections-aside .scrollable-container{
    width: 100%;
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
}
.course-sections-aside .mCSB_scrollTools {
    width: 4px !important;
    margin: 2px 0 !important;
}

.course-sections-aside .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(255,255,255,0.8) !important;
}

.course-sections-aside .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.course-sections-aside .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: rgba(255,255,255,0.8) !important;
}

.course-sections-aside .chapter .head {
    border-radius: 0;
}

.course-sections-aside .chapter .head .title {
    font-size: 16px;
}

.course-sections-aside .chapter .body li::before {
    width: 30px;
}

.course-sections-aside .chapter .body li .content {
    padding: 15px;
}

.course-sections-aside .chapter .body li .progress-wrap {
    margin-right: 5px;
}

.course-sections-aside .chapter .body li .content > * + * {
    margin-top: 5px;
}

.course-sections-aside .chapter .body .text {
    font-size: 14px;
}

.course-sections-aside .chapter .body .text-sm {
    font-size: 12px;
}

.course-sections-aside .chapter .body li > i {
    margin-right: 12px;
    transform: translateY(1px);
}

.course-sections-aside .chapter:last-child {
    border-bottom: 1px solid #d4d4d4;
}

/* audio */
.course-section-audio-container {
    text-align: center;
}

.course-section-audio-container audio {
    outline: none;
}

.course-section-audio-container.position-fixed {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 300;
}

.course-section-audio-container.position-fixed audio {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
}

.course-section-audio-container + .app-page {
    padding-bottom: 100px;
}
/* ---------- /course sections aside ---------- */


/* ---------- quiz ---------- */
.quiz-section .section-title{
    margin: 30px 0;
}

.quiz-card {
    padding: 14px;
}

/* counter */
.quiz-card > .counter-wrap{
    margin: 15px 0 30px;
    text-align: center;
}
.quiz-card .counter-wrap a{
    color: #0f76be;
    font-size: 15px;
}
.quiz-card .counter-wrap a:hover{
    text-decoration: underline;
}

/* --- head --- */
.quiz-card .card-head{
    height: 50px;
    border-radius: 5px;
    padding: 0 46px;
    position: relative;
    margin-bottom: 30px;
}
.quiz-card .card-head ul{
    list-style: none;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.quiz-card .card-head li{
    padding: 0 10px;
}
.quiz-card .card-head li a {
    display: flex;
    align-items: center;

    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
    text-decoration: none;
    text-transform: uppercase;
}
.quiz-card .card-head li a i{
    flex-shrink: 0;
    margin-right: 6px;
}

.quiz-card .card-head .controls a{
	display: block;
	width: 36px;
	height: 36px;
	background-color: #fff;

    position: absolute;
	top: 50%;
    transform: translateY(-50%);
}
.quiz-card .card-head .controls .prev{
	left: 10px;
}
.quiz-card .card-head .controls .next{
	right: 10px;
}
.quiz-card .card-head .controls a:before{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -8px;
	
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
.quiz-card .card-head .controls .prev:before{
	left: 12px;
	border-right: 10px solid #0f76be;
}
.quiz-card .card-head .controls .next:before{
	right: 12px;
	border-left: 10px solid #0f76be;
}
@media (max-width: 991px){
    /*.quiz-card .card-head li a{
        font-size: 10px;
    }
    .quiz-card .card-head li a i img{
        width: 24px;
    }*/
}
@media (max-width: 767px){
    .quiz-card .card-head li a > span{
        display: none;
    }
    .quiz-card .card-head li a i img{
        width: 24px;
    }
}

/* --- body --- */
.quiz-card .card-body{
    padding: 25px 40px 0;
}
.quiz-card .counter-wrap + .card-body,
.quiz-card .card-head + .card-body{
    padding-top: 0;
}
.quiz-card .card-body > .title{
    margin: 0 0 10px -18px;
}

.quiz-card .card-body > *,
.quiz-card .question-item > *{
    margin-bottom: 20px;
}

.quiz-card .question-item > figure img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.quiz-card .question-item fieldset{
    background: #f7f7f7;
    border-radius: 4px;
    padding: 7px 10px;
}
.quiz-card .question-item fieldset .row > div{
    margin: 4px 0;
}
.quiz-card .question-item fieldset .custom-control {
    border-radius: 4px;
    padding: 5px 10px;
    margin-bottom: -4px;
}

.quiz-card .question-item .custom-control.highlight .custom-control-label{
    color: #2d2d2d;
}

.quiz-card .question-item .correct.highlight{
	background: #99dda0;
}
.quiz-card .question-item .wrong.highlight{
	background: #d9534f;
}

.quiz-card .alert .close-btn{
    position: absolute;
    right: 0;
    top: 5px;
}
.quiz-card .alert .close-btn + *{
    margin-right: 10px;
}
@media (max-width: 767px){
    .quiz-card .card-body {
        padding: 20px 0 0;
    }
}


/* finish, results */
.quiz-finish-section .card,
.quiz-results-section .card{
    padding: 60px 44px;
}
.quiz-finish-section .card .title,
.quiz-results-section .card .title{
    text-align: center;
    margin-bottom: 30px;
}

.quiz-finish-section .card{
    flex-direction: row;
    align-items: flex-start;
}
.quiz-finish-section .card > i{
    flex-shrink: 0;
    display: flex;
    width: 64px;
    height: 64px;
    border: 5px solid transparent;
    border-radius: 100%;
    margin-right: 30px;
    transform: translate(0, -10px);
}
.quiz-finish-section .card > i.success-icon{
    border-color: #55c65d;
}
.quiz-finish-section .card > i img{
    display: block;
    margin: auto;
}

.quiz-results-section .card{
    text-align: center;
}
.quiz-results-section .answers-statistic-container{
    border-top: 1px solid #c9c9c9;
    padding-top: 20px;
    margin-top: 60px;
}
.quiz-results-section .answers-statistic-container .row{
    justify-content: center;
}
.quiz-results-section .answers-statistic-container .item {
    display: flex;
    flex-direction: column;
    width: 248px;
    height: 98px;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.28);

    color: #fff;
    text-align: center;
}
.quiz-results-section .answers-statistic-container .item > div{
    margin: auto;
}
.quiz-results-section .answers-statistic-container .item > div > strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.4;
}
.quiz-results-section .answers-statistic-container .item > div > span {
    display: block;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}
@media (max-width: 767px){
    .quiz-finish-section .card,
    .quiz-results-section .card {
        padding: 30px 20px;
    }
    .quiz-results-section .answers-statistic-container .row{
        display: block;
    }
    .quiz-results-section .answers-statistic-container .row > div + div{
        margin-top: 30px;
    }
    .quiz-results-section .answers-statistic-container .item{
        margin: 0 auto;
    }
}

.questions-modal .modal-dialog{
    width: 100%;
    max-width: 600px;
}
.questions-modal .modal-body{
    padding: 15px 20px;
}
.questions-modal .questions-list{
    list-style: none;
}
.questions-modal .questions-list > *{
    margin: 10px 0;
}
.questions-modal .questions-list-item{
    display: block;
    padding-left: 22px;

    color: #404040;
    font-size: 15px;
}
.questions-modal .questions-list-item.answered{
    color: #919191;
    text-decoration: line-through;
}
.questions-modal .questions-list-item.correct{
    color: #2f8e3c;
    background: url(../images/icons/success_small.png) left no-repeat;
}
.questions-modal .questions-list-item.wrong{
    color: #b51110;
    background: url(../images/icons/fail.png) left no-repeat;
}
.questions-modal .questions-list-item:hover{
    color: #0f76be;
    text-decoration: underline;
}
/* ---------- /quiz ---------- */

/* ---------- events ---------- */
.event-item-card {
    background-color: #fff;
    box-shadow: 0 0 16px #ccc;
    margin-bottom: 20px;
}

.event-item-card .img-wrap::before {
    padding-top: 50.84745%
}

.event-item-card .info-wrap .title {
    font-size: 16px;
}

.event-item-card .info-wrap .text-wrap {
    margin-top: 16px;
    font-size: 12px;
}

.event-item-card .info-wrap .text-wrap ul {
    padding-left: 20px;
}

.event-item-card .info-wrap .description {
    margin-top: 5px;
    color: #999;
    font-size: 13px;
    font-weight: 500;
}

.event-item-card .info-wrap .description a {
    color: inherit;
}

.event-item-card .info-wrap .description a:hover {
    text-decoration: underline;
}

.event-item-card .details-wrap .top-row {
    display: flex;
    justify-content: flex-end;
}

.event-item-card .details-wrap .top-row > div {
    display: flex;
    align-items: center;
}

.event-item-card .details-wrap .top-row > div + div::before {
    content: "";
    display: block;
    width: 1px;
    height: 22px;
    background-color: #808080;
    opacity: 0.6;
    margin: 0 10px;
}

.event-item-card .details-wrap .top-row-btn {
    background-color: transparent;
    border: 0;
    padding: 0;
}

.event-item-card .details-wrap .top-row-btn i {
    display: block;
    opacity: 0.85;
    color: #808080;
    font-size: 18px;
}

.event-item-card .details-wrap .top-row-btn:hover i {
    opacity: 1;
}

.event-item-card .details-wrap .center-row {
    color: #999;
    font-size: 12px;
    text-align: center;
}

.event-item-card .details-wrap .center-row .price {
    color: #545454;
    font-size: 16px;
    font-weight: bold;
}

.event-item-card .details-wrap .bottom-row .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px;
    font-size: 13px;
}

.event-item-card .details-wrap .bottom-row .btn i {
    margin-right: 6px;
}

.event-item-card .details-wrap .bottom-row .wifi-button .wifi-gray {
    display: block;
}

.event-item-card .details-wrap .bottom-row .wifi-button .wifi-white {
    display: none;
}

.event-item-card .details-wrap .bottom-row .wifi-button:hover .wifi-gray {
    display: none;
}

.event-item-card .details-wrap .bottom-row .wifi-button:hover .wifi-white {
    display: block;
}

@media (min-width: 768px) {
    .event-item-card {
        display: flex;
        padding: 16px;
    }

    .event-item-card .img-wrap {
        flex-shrink: 0;
        width: 36%;
    }

    .event-item-card .img-wrap::before {
        padding-top: 50.84745%
    }

    .event-item-card .info-wrap {
        flex-grow: 1;
        padding: 0 16px;
    }

    .event-item-card .details-wrap {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        width: 190px;
        border-left: 1px solid #e6e6e6;
        padding-left: 10px;
    }

    .event-item-card .details-wrap .center-row {
        padding: 10px 10px;
        margin: auto 0;
    }

    .event-item-card .details-wrap .bottom-row {
        margin-top: auto;
    }
}

@media (max-width: 767px) {
    .event-item-card .info-wrap,
    .event-item-card .details-wrap {
        padding: 16px;
    }

    .event-item-card .details-wrap {
        display: flex;
        align-items: center;
        padding-top: 4px;
    }

    .event-item-card .details-wrap .top-row {
        order: 2;
        margin-left: auto;
    }

    .event-item-card .details-wrap .bottom-row {
        order: 3;
        margin-left: auto;
    }

    .event-item-card .details-wrap .bottom-row .btn {
        padding: 4px 10px;
        font-size: 12px;
    }
}
/* ---------- /events ---------- */




/* ---------- dashboard ---------- */
.page-dashboard{
    display: flex;
    flex-direction: column;
    padding: 20px 0 60px;
}
.dashboard-container{
    flex-grow: 1;
    display: flex;
}

/* nav */
.dashboard-container > nav{
    flex-shrink: 0;
    width: 168px;
}
.dashboard-nav-item{
    display: block;
    padding: 0 22px;
    position: relative;
    opacity: 0.8;

    color: #5a5a5a;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}
.dashboard-nav-item::after{
    content: "";
    width: 4px;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
}
.dashboard-nav-item > span{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70px;
}
.dashboard-container > nav li + li .dashboard-nav-item > span{
    border-top: 1px solid #c8c7c8;
}
.dashboard-container > nav li:last-child .dashboard-nav-item > span{
    border-bottom: 1px solid #c8c7c8;
}
.dashboard-nav-item i {
    font-size: 20px;
    margin-bottom: 8px;
}
.dashboard-nav-item span span {
    display: block;
    line-height: 15px;
}

.dashboard-nav-item:hover,
nav li.active .dashboard-nav-item{
    color: inherit;
    opacity: 1;
}
nav li.active .dashboard-nav-item{
    background-color: #fff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
nav li.active .dashboard-nav-item > span{
    border-color: transparent !important;
}
.dashboard-container > nav li.active + li .dashboard-nav-item > span{
    border-top-color: transparent !important;
}

/* main */
.dashboard-container > main{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background: #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    padding: 24px 40px 40px;
    overflow: hidden;
}
.dashboard-container .page-title{
    margin: 0;
}
.dashboard-container .page-title + hr{
    margin: 20px 0 25px;
}

@media (max-width: 991px){
    .dashboard-container{
        padding-left: 0;
        padding-right: 10px;
    }
    .dashboard-container > nav{
        width: 100px;
    }
    .dashboard-nav-item{
        padding: 0 10px;
    }

    .dashboard-container > main{
        padding: 24px 20px 30px;
    }
}
@media (max-width: 767px){
    .dashboard-container{
        padding-left: 5px;
    }
    .dashboard-container > nav{
        width: 40px;
    }
    .dashboard-nav-item{
        padding: 0;
    }
    .dashboard-nav-item > span{
        height: 40px;
    }
    .dashboard-nav-item i{
        margin: 0;
    }
    .dashboard-nav-item span span{
        display: none;
    }

    .dashboard-container > main{
        padding: 24px 15px 30px
    }
}


/* --- content --- */

/* exams */
.dashboard-exams-container{
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
}
.dashboard-exams-container .dashboard-exam-item:not(:last-child){
    margin-bottom: 30px;
}
.dashboard-exam-item{
    border: 10px solid #57626f;
    border-radius: 15px;
    padding: 30px 30px 35px;
    position: relative;
    text-align: center;
}
.dashboard-exam-item > *{
    margin-bottom: 15px;
}
.dashboard-exam-item > *:last-child{
    margin-bottom: 0;
}
.dashboard-exam-item .title{
    margin-bottom: 12px;
}
.dashboard-exam-item .progress{
    margin-bottom: 30px;
}

.dashboard-exam-item .box-badge{
    top: 55px;
    right: -10px;
}

.dashboard-exam-item .locked-info-wrap > *{
    margin-top: 4px;
}

@media (max-width: 767px){
    .dashboard-exam-item{
        border-width: 5px;
        padding: 20px 15px 25px;
    }
    .dashboard-exam-item .box-badge {
        top: 60px;
        right: -5px;
    }
}

/* event-list */
.dashboard-events-list li{
    display: flex;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.dashboard-events-list .info-wrap{
    margin: auto 0;
    padding-left: 15px;
}
.dashboard-events-list .info-wrap > *{
    margin: 2px 0;
}

/* table */
.dashboard-container .table-wrap{
    flex-grow: 1;
    max-width: 100%;    
    border: 1px solid #dedede;
    border-radius: 9px;
    padding: 0 15px 20px;
    overflow: auto;
}
.dashboard-container .table-wrap .table{
    min-width: 400px;
}
.dashboard-container .table{
    border-bottom: 1px solid #F2F5F8;
    margin: 0;
}
.dashboard-container .table th,
.dashboard-container .table td{
    padding: 10px;
    vertical-align: middle;

    line-height: 1.25;
    text-align: center;
}
.dashboard-container .table th {
    border: 0;
    color: #93a2a9;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}
.dashboard-container .table td {
    border-top-color: #F2F5F8;
    color: #8896a0;
    font-size: 14px;
    white-space: nowrap;
}
.dashboard-container .table tr:hover {
    background-color: #f9fafb;
}
.dashboard-container .table .icon-wrap{
    display: flex;
    width: 37px;
    height: 38px;
    border-radius: 3px;

    color: #fff;
    font-size: 22px;
    text-align: center;
}
.dashboard-container .table .icon-wrap i{
    margin: auto;
}
.dashboard-container .table .badge{
    padding: 3px 5px 4px;
    font-size: 80%;
}
.dashboard-container .table a:not(.badge):hover{
    color: #007bff;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .dashboard-container .table-wrap{
        padding: 0 0 10px;
    }
}

/* courses */

@media (min-width: 992px){
    .dashboard-container .accordion-tree{
        width: auto;
        margin: 0 -16px;
    }
}
/* ---------- /dashboard ---------- */


/* ---------- basket ---------- */
a.side-button {
    position: fixed;
    right: 0;
    top: 250px;
    z-index: 100;
    display: block;
    height: 60px;
    background-color: rgba(0,0,0,0.8);
    border: 1px solid #fff;
    padding: 0 50px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.page-basket{
    background-color: #fff;
}
.page-basket > .container{
    padding-left: 15px;
    padding-right: 15px;
}

.basket-items-container{
    width: 100%;
    overflow: auto;
    margin-bottom: 30px;
}
.basket-items-container .table{
    min-width: 540px;
}
.basket-items-container .table th,
.basket-items-container .table td{
    height: 60px;
    background-color: #fff;
    border: 0;
    padding: 15px 15px;
    vertical-align: middle;
    font-size:16px;
}
.basket-items-container .table th{
    height: auto;
    padding-top: 0;
    text-transform: uppercase;
}
.basket-items-container .table tr:nth-child(odd) td{
    background-color: #f6f7fb;
}
.basket-items-container .table th:last-child,
.basket-items-container .table td:last-child{
    width: 60px;
    padding-left: 15px;
    padding-right: 15px;
}
.basket-items-container .basket-item-quantity-input{
    width:40px;
    text-align:center;
}


















.page-basket .discount-coupon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    padding: 0px 10px;
    font-size: 12px;
}

.page-basket .discount-coupon-item .remove-btn {
    width: 20px;
    border-left: 1px solid #cacbcc;
    padding: 2px 10px;
}



.page-basket .cart-container{
    background-color: #f6f7fb;
    box-sizing: border-box;
    padding: 30px 20px 20px;
    position: relative;
    color: #999;
    margin: 30px 0;
}
.page-basket .cart-container .form-control{
    background-color:#fff;
}
.page-basket .cart-container.position-fixed{
    position: fixed;
    top: 20px;
}

.page-basket .cart-container .total-price-wrap{
    display: flex;
    justify-content: space-between;            
    align-items:center;
    font-size: 14px;
    font-weight: bold;
}
.page-basket .cart-container .total-price-wrap strong{
    color: #2776bd;
    font-size:20px;
}

.page-basket .cart-container .payment-method-wrap{
    background-color: #fff;
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 18px;
}
.page-basket .cart-container .payment-method-wrap label{
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 7px;
    cursor: pointer;
}
.page-basket .cart-container .payment-method-wrap label:last-child{
    margin-bottom: 0;
}
.page-basket .cart-container .payment-method-wrap input{
    position: absolute;
    top: -100%;
    left: 0;
    opacity: 0;
}
.page-basket .cart-container .payment-method-wrap label span{
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 6px;
}
.page-basket .cart-container .payment-method-wrap label img{
    display: block;
    width: 26px;
    margin-right: 10px;
}

.page-basket .cart-container .payment-method-wrap input:checked + span{
    background-color: #f2f2f2;
    border-radius: 4px;
}

.page-basket .cart-container .checkbox{
    font-weight: normal;
    margin: 0 0 24px 6px;
}
.page-basket .cart-container .checkbox input{
    position: relative;
    margin-left: 0;
    margin-right: 4px;
}
.page-basket .cart-container .btn{
    display: block;
    width: 100%;
    color: #fff;    
}
.page-basket .cart-container .coupon-item{
    background-color:#fff;
}
.page-basket .cart-container .coupon-item span {
    padding: 0 10px;
    color: #4e4e4e;
    font-size: 12px;
}
.page-basket .cart-container .coupon-item .remove-btn {
    width: 24px;
    height: 26px;
    background-color: transparent;
    border: 0;  
    border-left: 1px solid #cacbcc;
}

@media (max-width: 991px){
    .page-basket .cart-container{
        width: 100% !important;
        position: relative !important;
        margin-top: 30px;
    }
}
@media (max-width: 767px){
    .basket-items-container .table th,
    .basket-items-container .table td{
        font-size: 14px;
    }
}
/* ---------- /basket ---------- */

/* ---------- help modal ---------- */
.help-modal {
    width: 1200px;
    height: 800px;
    background-color: #edeff5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 999999;
    cursor: move;
}

.help-modal iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
}

.help-modal-head {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    cursor: move;
}

.help-modal-close-btn {
    display: flex;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 0;
    border-radius: 50%;
    outline: none;
    margin-left: auto;
    opacity: 0.7;
    color: #000;
    font-size: 22px;
    line-height: 1.1;
    justify-content: center;
}

.help-modal-close-btn:hover {
    opacity: 1;
}

.help-modal-body {
    width: 100%;
    overflow: auto;
    position: absolute;
    top: 40px;
    bottom: 20px;
    left: 0;
}
/* ---------- /help modal ---------- */


/* ---------- 404 ---------- */
.page-404{
    display: flex;
    flex-direction: column;
    padding: 60px 0 100px;
}
.page-404 .container{
    max-width: 800px;
    margin: auto;
}
.page-404 img{
    display: block;
    max-width: 100%;
}
.page-404 .title{
    display: block;
    font-size: 65px;
    line-height: 60px;
    margin-bottom: 20px;
}
.page-404 .text{
    color: #545454;
    font-size: 25px;
}
.page-404 .text a{
    text-decoration: none;
}
.page-404 .text a:hover{
    text-decoration:underline;
}

@media (max-width: 767px){
    .page-404{
        text-align: center;
    }
    .page-404 .row{
        flex-direction: column;
    }
    .page-404 img{
        max-width: 180px;
        margin: 0 auto 10px;
    }
    .page-404 .title{
        font-size: 40px;
    }
    .page-404 .text{
        font-size: 18px;
    }
}
/* ---------- /404 ---------- */


/* ---------- learning path ---------- */
.learning-path-accordion-tree > .accordion-item > .accordion-item-body {
    padding: 20px;
}
.learning-path-accordion-tree .accordion-item-content{
    background-color: #fff;
    border: 1px solid #b3b3b3;
    padding: 20px;
}

.learning-paths-grid{
    margin-left: -10px;
    margin-right: -10px;
}
.learning-paths-grid > div{
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}
.learning-paths-grid:last-child{
    margin-bottom: -15px;
}

.learning-paths-grid > div,
.learning-paths-grid-item,
.learning-paths-grid-item .info-wrap{
    display: flex;
    flex-direction: column;
}
.learning-paths-grid-item{
    flex-grow: 1;
}
.learning-paths-grid-item .top-wrap{
    flex-shrink: 0;
    position: relative;
}

.learning-paths-grid-item .top-wrap > figure::before{
    padding-top: 56.25%;
}
.learning-paths-grid-item .top-wrap > figure img{
    transition: transform 0.4s ease;
}
.learning-paths-grid-item:hover .top-wrap > figure img{
    transform: scale(1.1);
}

.learning-paths-grid-item .top-wrap .btn-wrap{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.learning-paths-grid-item .btn-group .btn{
    padding: 6px 14px 5px;
    box-shadow: none !important;
    font-size: 12px;
}
.learning-paths-grid-item .btn-group .btn:first-child{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.learning-paths-grid-item .btn-group .btn:last-child{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.learning-paths-grid-item .btn-group .btn + .btn{
    border-left: 1px solid #eef1f5;
}

.learning-paths-grid-item .info-wrap{
    flex-grow: 1;
    background-color: #eef1f5;

    font-size: 14px;
    text-align: center;
}
.learning-paths-grid-item .title{
    font-size: 14px;
}
/* ---------- /learning path ---------- */











/*
==============================================
animations
==============================================
*/
.animated {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    visibility: visible !important;
}


/* ---------- fadeIn ---------- */
.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 1;
    }
}


/* ---------- fadeInUp ---------- */
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/* ---------- fadeInDown ---------- */
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/* ---------- fadeInLeft ---------- */
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

/* ---------- fadeInRight ---------- */
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

/* ---------- fadeInLeftLg ---------- */
@-webkit-keyframes fadeInLeftLg {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInLeftLg {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeftLg {
    -webkit-animation-name: fadeInLeftLg;
    animation-name: fadeInLeftLg;
}

/* ---------- fadeInRightLg ---------- */
@-webkit-keyframes fadeInRightLg {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInRightLg {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRightLg {
    -webkit-animation-name: fadeInRightLg;
    animation-name: fadeInRightLg;
}

/* ---------- wiggle ---------- */
.wiggle{
    animation: wiggle 5s linear infinite;
    animation-play-state: running;
    animation-delay: 2s;
}

@keyframes wiggle{
    2% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    4% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    6% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    8% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    10% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    12% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    14% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    16% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    18% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }

    20% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

.grecaptcha-badge { visibility: hidden; }

.course-documents .accordion-item {
    margin-bottom: 0;
}

.course-documents .accordion-item-head,
.course-documents .accordion-item-body {
    background-color: #fff;
}

.course-documents .list-group-item.accordion-tree {
    padding: 0;
}

.course-documents .accordion-item-body hr:last-child {
    display: none;
}

.course-documents .accordion-tree .accordion-item .accordion-item::before {
    width: 0;
}

.course-documents .files-list .list-group-item {
    border: 0;
}

.course-documents .files-list .title i{
    font-size: 26px;
}

.course-documents .files-list .accordion-item-head {
    padding-left: 12px;
}

.course-documents .files-list hr {
    margin-top: 0;
    margin-bottom: 0;
}

.course-documents .files-list .accordion-tree > .accordion-item > .accordion-item-body {
    padding-top: 5px;
    padding-bottom: 0;
}

@media (min-width: 992px) {
    .border-lg-top {
        border-top: 1px solid #dee2e6 !important;
    }

    .border-lg-right {
        border-right: 1px solid #dee2e6 !important;
    }

    .border-lg-bottom {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .border-lg-left {
        border-left: 1px solid #dee2e6 !important;
    }
}

@media (max-width: 991px) {
    .border-md-top {
        border-top: 1px solid #dee2e6 !important;
    }
    .border-md-right {
        border-right: 1px solid #dee2e6 !important;
    }
    .border-md-bottom {
        border-bottom: 1px solid #dee2e6 !important;
    }
    .border-md-left {
        border-left: 1px solid #dee2e6 !important;
    }
}

.link-unstyled {
    color: inherit;
    text-decoration: inherit;
}

.announcement-modal .modal-dialog{
    overflow-y: initial !important
}
.announcement-modal .modal-body{
    max-height: 80vh;
    overflow-y: auto;
}

.radio-toggles {
    align-items: center;
    background: #f6f7fb;
    border: 1px solid lightgrey;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    margin: 20px auto;
    overflow: hidden;
    padding: 4px;
    position: relative;
}

.radio-toggles label {
    cursor: pointer;
    padding: 10px 20px;
    margin: 0px;
    text-align: center;
    width: 33.33%;
    z-index: 2;
}

.radio-toggles .slide-item {
    background: white;
    border-radius: 9999px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    height: calc(100% - 8px);
    left: 4px;
    position: absolute;
    width: calc(33.33% - 8px);
    transition: left .4s;
    z-index: 0;
}

.radio-toggles input[type="radio"] {
    left: -9999px;
    position: absolute;
    z-index: -1;
}

.radio-toggles input[type="radio"]:nth-of-type(2):checked ~ .slide-item {
    left: calc(33.33% + 4px);
}

.radio-toggles input[type="radio"]:nth-of-type(3):checked ~ .slide-item {
    left: calc(66.66% + 4px);
}

radio-toggles[data-items="1"] label,
.radio-toggles[data-items="1"] .slide-item {
    width: calc(100% - 8px);
}

.radio-toggles[data-items="2"] label,
.radio-toggles[data-items="2"] .slide-item {
    width: calc(50% - 8px);
}
.radio-toggles[data-items="2"] input[type="radio"]:nth-of-type(2):checked ~ .slide-item {
    left: calc(50% + 4px);
}

radio-toggles[data-items="4"] label,
.radio-toggles[data-items="4"] .slide-item {
    width: calc(25% - 8px);
}
.radio-toggles[data-items="4"] input[type="radio"]:nth-of-type(2):checked ~ .slide-item {
    left: calc(25% + 4px);
}
.radio-toggles[data-items="4"] input[type="radio"]:nth-of-type(3):checked ~ .slide-item {
    left: calc(50% + 4px);
}
.radio-toggles[data-items="4"] input[type="radio"]:nth-of-type(4):checked ~ .slide-item {
    left: calc(75% + 4px);
}