@font-face {
    font-family: "helvetic-r";
    src: url("../fonts/HelveticaNeueW23forSKY-Reg.eot"); /* IE9 Compat Modes */
    src: url("../fonts/HelveticaNeueW23forSKY-Reg.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("../fonts/HelveticaNeueW23forSKY-Reg.otf") format("opentype"), /* Open Type Font */
      url("../fonts/HelveticaNeueW23forSKY-Reg.svg") format("svg"), /* Legacy iOS */
      url("../fonts/HelveticaNeueW23forSKY-Reg.ttf") format("truetype"), /* Safari, Android, iOS */
      url("../fonts/HelveticaNeueW23forSKY-Reg.woff") format("woff"), /* Modern Browsers */
      url("../fonts/HelveticaNeueW23forSKY-Reg.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
/*General css*/

body{
    font-family:'helvetic-r';
    background-color: #161616;
	text-align: right;
    line-height: 1.5em;
    position: relative;
    color: #FFF;
    font-size: 16px;
}
body::-webkit-scrollbar,
.modal::-webkit-scrollbar {
    width: 7px;
} 
body::-webkit-scrollbar-track,
.modal::-webkit-scrollbar {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
  background-color: #8F33CB;
  outline: 1px solid #8F33CB;
	border-radius: 20px;
}

::selection {
  background: #8F33CB; /* WebKit/Blink Browsers */
	color: #fff;
}
::-moz-selection {
  background: #8F33CB; /* Gecko Browsers */
	color: #fff;
}
a{
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
	color: #8F33CB ;
}
a:hover{
	text-decoration: none;
	color: #FFF ;
}
h1,h2,h3,h4,h5,h6{
    font-weight: bold;
    margin: 0;
}
button:focus,
.form-control:focus{
    outline: 0; 
    box-shadow: none; 
    border-color: #8F33CB;
}
img {
	max-width: 100%;
	max-height: 100%;
}
ul,ol,p
{
    padding: 0;
    margin: 0;
}
p {
    line-height: 25px;
    color: #A1A1A1;
}
.btn:focus{box-shadow: none;}
.a-link,
.a-link-transparent {
    padding: 9px 20px 9px;
    background: #8F33CB;
    border: 1px solid #8F33CB;
    color: #FFF;
    display: inline-block;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border-radius: 23px;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    -ms-border-radius: 23px;
    -o-border-radius: 23px;
}
.a-link:hover {
    background-color: #FFF;
    color: #8F33CB;
    border-color: #8F33CB;
}
.a-link-transparent {
    background-color: transparent;
    color: #8F33CB;
}
.a-link-dark:hover {
    background-color: #8F33CB;
    color: #FFF;
}
.dropdown-menu{text-align: center;}
.dropdown-toggle::after {
    border: 1px solid #fff;
    border-width: 0 0 2px 2px;
    width: 8px;
	height: 8px;
    line-height: 0;
    font-size: 0;
    margin-bottom: 4px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.login-buttons .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    left: -25px; /*en*/
}
.dropdown-item.active, 
.dropdown-item:active{background-color: #8F33CB;}

.dropdown .dropdown-menu{
    box-shadow: 0px 3px 6px #00000029;
    background: #8F33CB;
    border: 0;
    padding: 0;
    margin: 0;
    top: 15px !important;
    right: -39px !important;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.dropdown .dropdown-item
{
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid #A051D3;
}
.dropdown .dropdown-item:hover{
    color: #000;
}
.dropdown .dropdown-item:first-of-type {
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
}

.dropdown .dropdown-item:last-of-type {
    border-radius: 0  0 10px 10px;
    -webkit-border-radius: 0  0 10px 10px;
    -moz-border-radius: 0  0 10px 10px;
    -ms-border-radius: 0  0 10px 10px;
    -o-border-radius: 0  0 10px 10px;
    border-bottom: 0;
}
input.form-control:focus,
textarea.form-control:focus  {
    border-color: #8F33CB !important;
    outline: 0;
    box-shadow: none;
}



/* start top header*/

.top-header {
    background-color: #000;
    padding: 18px 0;
    font-size: 14px;
}
.top-header .row {align-items: center;}
.top-header .login-buttons li.first {
    position: relative;
    margin-left: 16px; /*en*/
}
.top-header .login-buttons li.first::after {
    content: '|';
    position: absolute;
    top: 0;
    left: -9px; /*en*/
}
.top-header .login-buttons li img {margin-left: 10px;} /*en*/
.top-header li a{
    color: #fff;
}
.top-header li a:hover {color: #8F33CB;}
.top-header .contact-button {justify-content: space-between;}
.top-header .contact-button i{margin-right: 5px;}
/*login*/
.login-buttons .dropdown{ 
    display: flex;
}
.login-buttons .dropdown-toggle {
    display: flex;
    flex-direction: column;
}
.login-buttons .dropdown-toggle:hover{color: #FFF;} 
.login-buttons .dropdown-toggle .user-name {color: #8F33CB;}
.social ul{
    display: flex;
    justify-content: center;
}
.social li {
    display: inline-block;
    text-align: center;
    margin: 0 10px;
}
.social li a{
    color: #000;
    background: #808080;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #808080;
}
.social li a:hover {
    color: #FFF;
    background-color: #000;
}
.social li a.facebook:hover{background: #3b5998;}
.social li a.twitter:hover{background: #1da1f2;}
.social li a.snap:hover{background: #fffc00;}
.social li a.insta:hover{background: #e1306c;}
.social li .lang {
    color: #FFF;
    border-color: #FFF;
    background-color: transparent;
    padding-top: 2px;
}
.social li .lang:hover {
    background-color: #8F33CB;
    border-color: #8F33CB;
}
 /* start main */
 
.main-header { 
    padding: 16px 0 ;
}
.header-fixed
{
    box-shadow: 0 4px 2px -2px #8F33CB;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    -webkit-animation: fadeInDown 1s;
    animation: fadeInDown 1s;
    /* padding: 5px 0; */
    background-color: #161616;
}
.main-header .row{align-items: center;}
.main-header .header-right,
.main-header .header-left{
    display: flex;
    align-items: center;
}
.main-header .header-left {justify-content: space-between;}
.main-header .logo img {width: 95px;}
.main-header .header-right .lib {
    margin: 0 20px 0 40px;
}
.main-header .header-right .lib:hover a {color: #8F33CB;}
.main-header .header-right .lib a {
    color: #D1D1D1;
    display: flex;
    align-items: center;
}
.main-header .header-right .lib img {margin-left: 4px;}
.main-header .header-right .form {width: 64%;}
.main-header .header-right .form .form-group {margin: 0;}
.main-header .header-right .form .form-control {
    background-color: #000;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: 0;
    color: #FFF;
}
.main-header .header-right .form .form-control:focus + img { filter:brightness(1) ; -webkit-filter:brightness(1) ; }
.main-header .header-left ul {
    display: flex;
    align-items: center;
}
.main-header .header-left ul.links {
    margin-left: 9px; /*en*/
}
.main-header .header-left ul.links li:first-of-type{
    position: relative;
    margin-left: 25px; /*en*/
}
.main-header .header-left ul.links li:first-of-type::after{
    content: '|';
    position: absolute;
    top: 0;
    left: -14px; /*en*/
}
.main-header .header-left ul.links a {color: #D1D1D1;}
.main-header .header-left ul.links a:hover {color: #8F33CB;}
.main-header .header-left .ul-cart li {
    position: relative;
    margin: 0 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 10px 8px;
}
.main-header .header-left .ul-cart li img{ margin-left: 5px;} /*en*/
.main-header .header-left .ul-cart .store-a {
    background-color: #8F33CB;
}
.main-header .header-left .ul-cart .store-a a {
    padding: 0;
    color: #FFF;
}
.main-header .header-left ul .btn-dropdown,
.main-header .header-left .ul-cart .store-a {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.main-header .header-left ul .btn-dropdown:hover,
.main-header .header-left .ul-cart .store-a:hover {background-color: #8f33cb9c;}
.main-header .header-left ul .btn-dropdown .btn {
    color: #FFF;
    padding: 0;
}
.main-header .header-left ul .btn-dropdown .btn:focus {border-color: transparent;}
.main-header .header-left ul .list {
    position: absolute;
    top: 65px;
    left: 0;/*en*/
    min-width: 260px;
    width: 260px;
    background: #000;
    z-index: 99;
    display: none;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.main-header .list .list-body { padding: 0 11px;}
.main-header .list .item {
    padding: 15px 0;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #1A1A1A;
}
.main-header .header-left .ul-cart .list .item img {
    width: 45px;
    height: 45px;
    margin-left: 15px; /*en*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.main-header .list .item p {
    font-size: 13px;
    color: #FFF;
    margin-bottom: 10px;
}
.main-header .list .add-more {
    display: flex;
    justify-content: space-between;
}
.main-header .list .add-more span {
    background-color: #8F33CB;
    font-size: 12px;
    padding: 2px 6px 4px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.main-header .list .item .btn.delete {
    color: #8F33CB;
    font-size: 20px;
    width: 35px;
    display: flex;
}
.main-header .list .item .delete:hover {color: #FFF;}
.main-header .list .total {
    text-align: center;
    color: #FFF;
    opacity: 0.5;
    padding: 6px 6px 11px;
    font-size: 14px;
}
.main-header .list .view-cart {
    background-color: #8F33CB;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    border-radius: 0px 0px 15px 15px;
    display: block;
    padding: 15px 7px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.main-header .list .view-cart:hover {
    background-color: #FFF;
    color: #8F33CB;
}
.main-header .header-left .ul-cart li.balance {border: 1px solid #FFFFFF33;}
.main-header .header-left .ul-cart li.balance span {font-size: 14px;}

.quantity {
    display: flex;
    justify-content: center;
    align-items: center;
}
.quantity .value-button{
    width: 22px;
    height: 22px;
    background: #FFF;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: #8F33CB;
    cursor: pointer;
    border-color: transparent;
}
.quantity input {
    width: 20px;
    background-color: transparent;
    border-color: transparent;
    font-weight: bold;
    outline: 0;
    color: #FFF;
    width: 30px;
    text-align: center;
}
.quantity .value-button::selection{background: transparent;}

/*start main-slider*/
.item-slide{
    position: relative;
}
.main-slider .item-slide img {max-height: 630px;}
.item-slide::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #8F33CB;
    opacity: 0.3;
}
.item-slide .caption
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3;
    text-align: center;
    color: #FFFF;
}

.main-slider .item-slide h1{
    font-size: 40px;
}
.main-slider .item-slide p {
    margin: 30px 0 38px;
    font-size: 20px;
    /* display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden; */
}
.main-slider .item-slide a {
    color: #FFF;
    border-color: #FFF;
}
.main-slider .item-slide a:hover {
    background-color: #8F33CB;
    border-color: #8F33CB;
}
.owl-carousel.owl-theme .owl-nav .owl-next {
    position: absolute;
    left: 0;
}
.owl-carousel.owl-theme .owl-nav [class*=owl-]{
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    border: 1px solid #262626;
    margin: 5px 8px;
    color: #FFF;
    transition: all 0.5s ease-in-out;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover {
    background: #000;
    border-color: #000;
    color: #FFF;
    text-decoration: none;
}
.owl-carousel.owl-theme .owl-nav .owl-next {
    left: 99px; /*en*/
}
.owl-carousel.owl-theme .owl-nav .owl-prev {
    right: 99px; /*en*/
}
.owl-carousel.owl-theme .owl-dots {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}
.owl-carousel.owl-theme .owl-dots .owl-dot {
    width: 20px;
    height: 4px;
    background: #FFF;
    opacity: 0.3;
    border: 0;
    margin: 0 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.owl-carousel.owl-theme .owl-dots .owl-dot.active{ opacity: 1;}

/*start courses section*/

.courses {padding: 70px 0;}
.s-head {
    text-align: center;
    position: relative;
}
.s-head h3 {
    font-size: 25px;
    margin-bottom: 7px;
}
.s-head p {
    color: #A1A1A1;
    line-height: 25px;
}
.s-head::before{
    content: '';
    display: block;
    width: 2%;
    height: 3px;
    background: #8F33CB;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
    margin-top: 5px;
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-pills {
    justify-content: center;
    margin: 50px 0;
}
.nav-pills .nav-link {
    padding: 9px 30px 11px;
    border-radius: 23px;
    margin:  0 12px;
    color: #FFF;
    border-color: transparent;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    -ms-border-radius: 23px;
    -o-border-radius: 23px;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover, 
.nav-pills .show>.nav-link {
    background-color: #8F33CB;
    color: #FFF;
}
.courses .item-slide {
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.courses .item-slide:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.courses .item-slide::before {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.courses .item-slide img {
    max-height: 280px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.courses .item-slide .caption {width: 80%;}
.courses .item-slide h2 {
    font-size: 30px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transform: translateY(60px);
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -o-transform: translateY(60px);
}
.courses .item-slide p {
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    margin: 18px 0 15px;
    transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
}
.courses .item-slide .a-link-transparent {
    border-color: #FFF;
    color: #FFF;
    transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
}
.courses .item-slide .a-link-transparent:hover {
    background-color: #8F33CB;
    border-color: #8F33CB;
}
.courses .item-slide:hover h2 { transform:translateY(0) ; }

.courses .item-slide:hover p,
.courses .item-slide:hover .a-link-transparent {
    transform: translateY(0);
}
.courses .owl-carousel {padding-bottom: 47px;}
.courses .owl-carousel.owl-theme .owl-nav .owl-next{left: -70px;} /*en*/
.courses .owl-carousel.owl-theme .owl-nav .owl-prev{right: -70px;} /*en*/
.courses .owl-carousel.owl-theme .owl-dots{bottom: 0;}
.courses .owl-carousel.owl-theme .owl-dots .owl-dot {opacity: 1;}
.courses .owl-carousel.owl-theme .owl-dots .owl-dot.active {background-color: #8F33CB;}

/*start videos-lib section*/
.videos-lib {
    background: #000 url('../img/video-lib-bg.png') no-repeat;
    background-size: cover;
}
.videos-lib .s-head {margin-bottom: 50px;}
.videos-lib .video-slide {position: relative;}
.videos-lib .see-all {
    position: absolute;
    left: 0;
    top: -100px;
}
.videos-lib .see-all:hover {
    background-color: #8F33CB;
}
.videos-lib .item-slide {margin: 0 10px;}
.videos-lib .item-slide img {
    max-height: 360px;
}
.videos-lib .item-slide .play {
    width: 100px;
    height: 100px;
    margin: auto auto 15px;
}
.videos-lib .item-slide .caption {width: 100%;}
.videos-lib .item-slide a {
    font-size: 22px;
    font-weight: bold;
    color: #FFF;
} 
.videos-lib .item-slide a:hover {color: #8F33CB;}

/*start free-courses*/
.free-courses {
    background: #161616;
}
.course-card:hover .image img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    opacity: 0.5;
}
.course-card .image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.course-card .image  img{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    max-height: 240px;
}

.course-card .image .date {
    position: absolute;
    right: 10px; /*en*/
    top: 12px;
    text-align: center;
    width: 60px;
    height: 60px;
    background-color: #8F33CB;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.course-card .image .date .day {
    font-size: 18px;
    font-weight: bold;
    display: block;
}
.course-card .image .date .month {
    font-size: 14px;
}
.course-card .image .dept {
    position: absolute;
    left: 10px;/*en*/
    top: 12px;
    font-size: 13px;
    background-color: #1E1E1E;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 5px 8px;
}
.course-card .coach {
    display: flex;
    align-items: center;
    margin: 22px 0;
}
.course-card .coach .img {
    width: 40px;
    height: 40px;
    margin-left: 11px; /*en*/
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.course-card .coach span {
    font-size: 14px;
}
.course-card .coach p {
    line-height: 25px;
    font-size: 12px;
    color: #8B8B8B;
}
.course-card .course-name {
    font-size: 18px;
    display: inline-block;
    color: #FFF;
    font-weight: bold;
    margin-bottom: 6px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.course-card .course-name:hover{color: #8F33CB;}
.course-card .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
}
.course-card .price span{
    display: block;
    font-size: 25px;
    font-weight: bold;
}
.course-card .price span.current-price {
    text-decoration: line-through;
    font-size: 16px;
    font-weight: normal;
}
.course-card .card-footer .a-link {padding: 6px 30px;}

/*start why v-hub section*/
.v-hub {
    background: #000 url('../img/why-vhub-section.png') no-repeat;
    background-size: contain;
    padding: 70px 0;
    background-position: right;
    background-attachment: fixed;
}
.v-hub .features {margin: 55px 0;}
.v-hub .feature{
    text-align: center;
}
.v-hub .feature:hover .icon {background-color: #8F33CB;}
.v-hub .feature:hover .icon img {
    filter: brightness(50);
    -webkit-filter: brightness(50);
}
.v-hub .feature .icon {
    width: 150px;
    height: 150px;
    margin: auto;
    background-color: #161616;
    display: flex;
    align-items: center;
    justify-self: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.v-hub .feature .icon img {
    margin: auto;
    
}
.v-hub .feature h3 {
    font-size: 20px;
    position: relative;
    margin: 15px 0 40px;
}
.v-hub .feature h3::before{
    content: '';
    display: block;
    width: 8%;
    height: 3px;
    background: #8F33CB;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
}
.v-hub .feature p {padding: 0 38px;}
.v-hub .my-video-dimensions {
    width: 100%;
    height: 444px;
}
.v-hub .video-js {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.v-hub .vjs-poster {
    background-size: cover;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.v-hub .video-js .vjs-big-play-button {
    width: 100px;
    height: 100px;
    background-color: #8F33CB;
    border: 12px solid #381E49;
    left: 70px;
    /*en*/top: 50%;
    font-size: 5em;
    transform: translateY(-50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.v-hub .video-js .vjs-big-play-button:hover {
    background-color: #381E49;
    border-color: #8F33CB;
}
/*start testmonials section*/
.testmonials {
    padding: 70px 0;
}
.testmonials .s-head {margin-bottom: 90px;}
.testmonials .testmonial-card .image {margin-bottom: -40px;}
.testmonials .testmonial-card .image img {
    width: 88px;
    height: 88px;
    margin: auto;
    border-radius: 50%;
}
.testmonials .testmonial-body {
    text-align: center;
    background-color: #000;
    padding: 55px 20px 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
} 
.testmonials .testmonial-card h6 {
    font-size: 18px;
    color: #ACACAC;
}
.testmonials .testmonial-card p {
    color: #FFF;
    margin: 20px 0;
}
.testmonials .testmonial-card i {
    color: #8F33CB;
    font-size: 30px;
}
/* start blog section*/
.blog {
    background: url('../img/blog-section-bg.png') no-repeat;
    background-size: cover;
    position: relative;
}
.blog .s-head::before{background-color: #FFF;}
.blog.videos-lib .see-all{
    border-color: #FFF;
    color: #FFF;
}
.blog::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #8F33CB;
    opacity: 0.5;
}
.blog-card {
    background-color: #000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 24px;
    text-align: center;
    position: relative;
}
.blog-card .share {
    position: absolute;
    right: 20px;/*en*/
    top: 20px;
    color: #8F33CB;
    font-size: 22px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
}
.blog-card .share:hover {color: #FFF;}

.blog-card .blog-img img {
    width: 176px;
    height: 176px;
    margin: auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid #FFFFFF33;
}
.blog-card h6 {
    font-size: 18px;
    margin: 16px 0;
}
.blog-card ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    color: #ACACAC;
}
.blog-card p {
    margin: 12px 0;
    font-size: 14px;
}
.blog-card .a-link{padding: 7px 30px;}
/*start partners section*/
.partners .partner-card {
    background-color: #000;
    border: 1px solid #FFFFFF33;
    border-radius: 20px;
    text-align: center;
    padding: 25px;
    height: 130px;
    display: flex;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.partners .partner-card:hover{
    opacity: 0.5;
}
.partners .partner-card img {
    max-width: 160px;
    height: 80px;
    margin: auto;
    width: auto;
}

.partners .owl-carousel.owl-theme .owl-nav [class*=owl-] {top: 37%;}
.footer {
    padding: 70px 0;
    background: #000 url('../img/footer-bg.png') no-repeat;
    background-size: cover;
}
.footer .footer-logo p{
    margin-top: 35px;
    color: #FFF;
    width: 80%;
}

.footer .footer-links li a {
    color: #FFF;
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
}

.footer .footer-links li a::before,
.footer .footer-links .active> a::before {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #8F33CB;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
    margin-top: 5px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.footer .footer-links .active>a::before,
.footer .footer-links li a:hover::before {
    width: 50%;
    margin: auto;
    transition: all 0.3s ease-in-out;
}
.footer .social {margin-top: 50px;}
.footer .social li a {
    width: 40px;
    height: 40px;
}
footer .copyrights{
    padding: 15px 0;
    background-color: #161616;
}
footer .copyrights p,
footer .copyrights a{color: #FFF;}
footer .copyrights a:hover{color: #8F33CB;}
footer .copyrights .ibtdi{text-align: left;}
.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9999;
}
.loading:before {
    content: '';
    position: absolute;
    top: 30%;
    text-align: center;
    right: 0;
    left: 0;
    margin: auto;
    animation: loading 2s infinite;
    background: url('../img/logo.svg') no-repeat;
    display: block;
    width: 100%;
    height: 209px;
    background-position: center;
    background-size: 12%;
}
@keyframes loading {
    0% {
    transform: scale(1)    ;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
    50% {
    transform: scale(1.2)    ;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    }
}
.over-cart {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 39;
    display: none;
}

/*start static head*/
.static-head {
    background-color: #000;
    padding: 30px 0 ;
    text-align: center;
}
.static-head h3 {font-size: 25px;}
.static-head p {
    font-size: 14px;

}
.static-head .breadcrumb {
    background-color: transparent;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 0;
}
.static-head .breadcrumb-item a,
.static-head .breadcrumb-item.active{color: #8F8F8F;}
.static-head .breadcrumb-item a:hover{color: #8F33CB;}
.static-head .breadcrumb-item+.breadcrumb-item::before {
    color: #8F8F8F;
    padding: 0 0.5rem;
    content: ">";
}

/*start store page*/
.store .nav-pills {margin: 0 0 35px 0;}
.store .nav-pills .nav-link {
    background-color: #000;
    margin-bottom: 10px;
}

.store .nav-pills .nav-link.active,
.store .nav-pills .nav-link:hover,
.store .nav-pills .show>.nav-link {
    background-color: #8F33CB;
    color: #FFF;
}
.store .nav-pills .nav-link img {margin-left: 8px; /*en*/}
.store .course-card {margin-bottom: 30px;}
.store .course-card .image img {width: 100%;}
.store .course-card .course-name {margin-top: 30px;}

/*start blogs page*/
.blogs .blog-card {margin-bottom: 15px;}
.pagination {
    margin-top: 30px;
    justify-content: center;
}
.pagination .page-link {
    width: 30px;
    height: 30px;
    background-color: #262626;
    display: flex;
    align-items: center;
    justify-self: center;
    border: 0;
    color: #FFF;
    margin: 0 3px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.pagination  .page-item:last-child .page-link,
.pagination  .page-item:first-child .page-link {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.pagination .page-item.active .page-link,
.pagination .page-link:hover {background-color: #8F33CB;}

/*blog single page*/
.static-head .blog-time {
    background: #161616 ;
    border-radius: 10px;
    color: #ACACAC;
    font-size: 14px;
    display: inline-flex;
    padding: 11px;
}
.static-head .blog-time li {margin: 0 8px;}
.static-head .blog-time i {
    margin-left: 7px;/*en*/
    font-size: 16px;
}

/*blog single page*/
.article-page .blog-img img {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    max-height: 500px;
}
.article-page .share-article {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0 ;
}
.article-page .share-article .a-link {margin-left: 20px; /*en*/}
.article-page .share-article .social li {margin: 0 6px;}
.article-page .article-text {
    border: 1px solid #5C5C5C;
    padding: 100px;
    text-align: center;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.article-page .article-text p {
    margin-bottom: 30px;
    color: #FFF;
    text-align: center;
}

/*start premium-course page*/

.premium-course.store .course-card .course-name {margin-top: 0;}

/*login modal*/
.modal {
    overflow-x: hidden;
    overflow-y: scroll;
}
.modal-content {
    background: #161616 url('../img/register-bg.png') no-repeat;
    background-size: cover;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 42px ;
}
.modal-content .close {
    position: absolute;
    left: 16px;
    /*en*/top: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.modal-content .close:hover {
    background-color: #EA4335;
    opacity: 1 !important;
}
.modal-content .head {
    text-align: center;
    margin-bottom: 30px;
}
.modal-content .head img {
    width: 157px;
    max-height: 90px;
}
.modal-content .head h3 {
    font-size: 20px;
    margin: 11px 0;
}
.form .form-group {position: relative;}
.form .icon img {
    position: absolute;
    right: 11px;/*en*/
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    filter: brightness(50);
    -webkit-filter: brightness(50);
}
.form .form-control {
    border: 1px solid #FFF;
    border-radius: 100px;
    height: 45px;
    color: #FFF;
    background: transparent;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    font-size: 14px;
}
.form .form-group.icon .form-control {
    padding-right: 40px /*en*/;
}
.form .form-control::placeholder{
    color: #FFF;
    font-size: 14px;
} 
.form .form-control:focus {border-color: #8F33CB;}
.form .form-control:focus::placeholder {color: #8F33CB;}
.form .form-control:focus + img {
    filter: brightness(1);
    -webkit-filter: brightness(1);
}
.form select.form-control {
    width: 99%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #161616  url('../img/arrow.svg') no-repeat;
    background-position:  4% 50%; /*en*/;
}
.form textarea.form-control {
    min-height: 100px;
    max-height: 100px;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
}
.form .buttons {
    margin-top: 25px;
    width: 100%;
}
.form .a-link-transparent {
    background-color: #000;
    border-color: #000;
    color: #FFF;
}
.form .a-link-transparent:hover {
    background-color: #FFF;
    color: #8F33CB;
    border-color: #FFF;
}
.created .modal-content .head {margin-bottom: 0;}
.forget-password {font-size: 14px;}
.social-login {
    text-align: center;
}
.social-login p {
    margin-bottom: 20px;
    font-size: 14px;
}
.social-login ul {
    display: flex;
    justify-content: space-between;
}
.social-login ul li {width: 30%;}
.social-login ul li a {border-color: transparent;}
.social-login ul li .facebook {background-color: #0670CF;}  
.social-login ul li .google {background-color: #EA4335;}  
.social-login ul li .twitter {background-color: #17A8DF;}
.social-login ul li a:hover {background-color: #8F33CB;}

/*start recover-pass section*/

.recover-pass {
    background-color: #000;
    padding: 75px;
    text-align: center;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.recover-pass .reset-icon {margin-bottom: 35px;}

/* my-skills page*/
.my-skills {
    background-color: #000;
    padding: 40px;
    text-align: center;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.my-skills .profile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.my-skills h3 {
    font-size: 20px;
    margin: 15px 0;
}
.my-skills .status {
    display: flex;
    justify-content: center;
    align-items: center;
}
.my-skills .status .skil-details {
    background-color: #161616;
    padding: 7px 12px;
    margin: 0 10px;
    color: #A2A2A2;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.my-skills .status img {margin-left: 7px; /*en*/}
.my-skills .status span {
    font-size: 14px;
}
.my-skills .status .skil-details.reward {
    background-color: #8F33CB;
    color: #FFF;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.my-skills .status .skil-details.reward:hover {background-color: #8f33cb9c;}
.s-head.skills {margin-bottom: 45px;}
.reward-modal .modal-content {padding: 30px 13px;}
.reward-modal .modal-content .head h3 {font-size: 18px;}
.reward-modal .modal-content .head p {color: #FFF;}
.reward-modal .modal-content .head span {
    background-color: #000;
    font-weight: bold;
    padding: 9px 18px;
    display: inline-block;
    margin: 11px 0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.store.skills-page .course-card .course-name {margin-top: 0;}
/* profile page*/
.profile-box .profile-form{
    background-color: #000;
    padding: 45px 80px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.profile-box .profile-form.edit-log {padding: 45px 147px;}
.profile-box .form select.form-control {
    background: #000 url(../img/arrow.svg) no-repeat;
    background-position: 4% 50%; /*en*/
}
.profile-box .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profile-box .buttons .btn {width: 48%;}
.profile-box .buttons .a-link-transparent {background-color: #161616;}
.profile-box .buttons .a-link-transparent:hover {background-color: #FFF;}

.profile-box .profile-pic {
    width: 135px;
    height: 135px;
    margin: 0 auto 25px;
    display: block;
    border-radius: 50%
}
.profile-box  .file-upload {display: none;}
.profile-box  .circle{
    position: relative;
    width: 135px;
    margin: auto;
}
.profile-box .p-image {
  display: flex;
  position: absolute;
  right: 0;/*en*/
  top: 0;
  justify-content: center;
  align-items: center;
  background: #8F33CB;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.profile-box  .p-image:hover {background-color: #A051D3;}
.profile-box  .upload-button {
    color: #FFF;
    line-height: 1;
    cursor: pointer;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-box  .upload-button:hover {
  transition: all .4s ease-in-out;
  color: #8F33CB;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
}
.profile-banks.profile-box  label {
    color: #ACACAC;
    font-size: 13px;
}
.profile-banks.profile-box  .btn {
    width: 100%;
}
.social-info {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.social-info:last-of-type {margin-bottom: 0;}
.social-info .social-brand {
    display: flex;
    align-items: center;
    border-left: 1px solid #262626; /*en*/
    width: 35%;
}
.social-icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0670CF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.social-info .social-brand span {
    font-weight: bold;
    display: inline-block;
    margin: 0 25px;
}
.social-info .social-status {
    display: flex;
    justify-content: space-between;
    width: 60%;
    align-items: center;
    margin-right: 20px; /*en*/
}
.facebook {
    background-color:#0670CF ;
    border-color: #0670CF;
}
.google {
    background-color:#EA4335 ;
    border-color: #EA4335;
}
.twitter {
    background-color:#17A8DF ;
    border-color: #17A8DF;
}
.connected {
    background-color:#161616 ;
    border-color: #161616;
}
/*start my works page*/
.my-works .my-skills {
    text-align: inherit;
    position: relative;
}
.my-works .status {
    display: block;
}
.my-works .works-text {
    display: flex;
    flex-direction: column;
    margin-right: 23px /*en*/;
}
.my-works .works-text .name {
    color: #FFF;
    font-size: 25px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.my-works .my-skills:hover .name,
.my-works .my-skills:hover i {color: #8F33CB;}
.my-works .my-skills i {
    color: #FFF;
    font-size: 20px;
    position: absolute;
    left: 14px;/*en*/
    top: 50%;
    transform:translateY(-50%) ;
    -webkit-transform:translateY(-50%) ;
    -moz-transform:translateY(-50%) ;
    -ms-transform:translateY(-50%) ;
    -o-transform:translateY(-50%) ;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
/*my courses page*/
.my-courses .add-course {
    background-color: #000;
    padding: 30px 20px;
    margin-bottom: 80px;
    flex-wrap: wrap;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.my-courses .add-course p {
    margin-left: 40px;
    font-size: 20px;
    color: #FFF;
    font-weight: bold;
}
.my-courses .course-card .price {width: 40%;}
.my-courses .course-card .buttons {
    display: flex;
    align-items: center;
    width: 60%;
    flex-wrap: wrap;
}
.my-courses .course-card .card-footer .a-link {margin: 0 3px 0;}
.my-courses .a-link-transparent {
    background-color: #000;
    border-color: #000;
    color: #FFF;
}
.my-courses .a-link-transparent:hover {
    background-color: #FFF;
    border-color: #FFF;
    color: #8F33CB;
}
/*upload-course page*/
.upload-course.store .nav-pills{
    background-color: #000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.upload-course .nav-pills .nav-item {width: 100%;}
.upload-course.store .nav-pills .nav-link {
    margin: 0;
    padding: 10px 15px 11px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.upload-course.store .nav-pills .nav-item:first-of-type .nav-link{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.upload-course.store .nav-pills .nav-item:last-of-type .nav-link{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.upload-course .nav-pills .nav-link i {
    color: #8F33CB;
    padding-left: 14px; /*en*/
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.upload-course  .nav-pills .nav-link.active i, 
.upload-course  .nav-pills .nav-link:hover i, 
.upload-course  .nav-pills .show>.nav-link i {color: #FFF;}
.upload-course .profile-box .circle {
    width: 100%;
    border: 1px solid #FFF;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.upload-course .profile-box .profile-pic {
    width: 100%;
    max-height: 119px;
    margin: 0 auto;
    display: block;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.upload-course .profile-box .p-image{
    width: 55px;
    height: 55px;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
}
.upload-course .profile-box .buttons .btn {width: 100%;}
.upload-course .add-name,
.upload-course .delete-name {
    position: absolute;
    top: 50%;
    font-size: 20px;
    padding: 0;
    border: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.upload-course .add-name {
    left: 15px; /*en*/
    color: #8F33CB;
}
.upload-course .delete-name {
    left: 45px; /*en*/   
    color: #F00;
}
.upload-course .add-name:hover,
.upload-course .delete-name:hover {color: #FFF;}
.upload-course .add-more {
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    display: flex;
    align-items: center;
    border: 0;
}
.upload-course .add-more:hover {color: #8F33CB;}
.upload-course .add-more i {
    margin-left: 14px; /*en*/
    font-size: 20px;
    width: 26px;
    height: 26px;
    background-color: #FFF;
    color: #8F33CB;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
}
.upload-course .units-name {margin-top: 35px;}
.upload-course .units-name .unit {
    background-color: #161616;
    padding: 12px 20px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    align-items: center;
    margin-bottom: 6px;
}
.upload-course .units-name .unit p {
    font-weight: bold;
    color: #FFF;
}

.upload-course .units-name .unit .btn {
    color: #8F33CB;
    padding: 0;
    border: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.upload-course .units-name .unit .btn:hover {color: #FFF;}

.upload-course  .p-video .upload-button{
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    
}
.upload-course  .p-video .upload-button:hover img {opacity: 0.5;}
.upload-course  .p-video .upload-button img{
    transition: all .4s ease-in-out;

    margin-bottom: 7px;
}
.upload-course .unit .lesson {
    display: flex;
    align-items: center;
    width: 91%;
}
.upload-course .unit .lesson .l-img{position: relative;}
.upload-course .unit .lesson .l-img .course-img {
    width: 75px;
    max-height: 75px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.upload-course .unit .lesson .l-img .play-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
} 
.upload-course .unit .lesson .l-info{
    margin-right: 15px; /*en*/
}
.upload-course .lesson .l-name {
    font-weight: bold;
    display: block;
    margin-bottom: 7px;
}
.upload-course .units-name .lesson p {
    font-weight: normal;
    color: #A1A1A1;
}
.upload-course .lesson p .l-time {margin-left: 14px;}
.units-name .question .q-head {width: 90%;}
.units-name .question .q-head p{
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
}
.units-name .question .q-head span {
    color: #8F33CB;
    font-size: 13px;
}
.upload-course .units-name .q-answer{
    border-bottom: 1px solid #A1A1A1;
    padding: 4px 0;
}
.upload-course .units-name .q-answer span {
    width: 180px;
    text-align: center;
}
.upload-course .units-name .q-answer:last-of-type {border-bottom: 0;}
.upload-course .units-name .q-answer p {
    font-size: 14px;
    color: #A1A1A1;
    font-weight: normal;
}
.upload-course .profile-box .buttons.two .btn {
    width: 48%;
}
.upload-course .profile-box .buttons.more-btns {margin-bottom: 1rem;}
.upload-course .profile-box .buttons.more-btns .btn {
    width: 34%;
}
/*cart page*/
.cart-page .product {
    display: flex;
    align-items: center;
    background-color: #000000;
    padding: 20px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    position: relative;
    margin-bottom: 8px;
}
.cart-page .product .p-img{width: 137px;}
.cart-page .product img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.cart-page .product .p-text {
    margin-right: 25px; /*en*/
    width: 100%;
}
.cart-page .product .p-text p {
    color: #FFF;
    width: 80%;
}
.cart-page .product .p-text span {
    color: #999999;
    font-size: 14px;
}
.cart-page .product .p-price {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.cart-page .product .p-price .price {
    background-color: #8F33CB;
    color: #FFF;
    display: inline-block;
    font-size: 16px;
    margin-left: 50px; /*en*/
    font-weight: bold;
    padding: 8px 11px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.cart-page .product .delete {
    position: absolute;
    left: 17px; /*en*/
    top: 20px;
    color: #999999;
    border: 1px solid #999999;
    padding: 8px 12px 7px;
    font-size: 14px;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.cart-page .product .delete:hover {
    background-color: #8F33CB;
    border-color: #8F33CB;
    color: #FFF;
}
.cart-page .total-price {
    text-align: center;
    margin-bottom: 25px;
    font-weight: bold;
}
.cart-page .total-price .t-head {
    background-color: #8F33CB;
    border-radius: 20px 20px 0 0;
    padding: 16px 10px;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    -ms-border-radius: 20px 20px 0 0;
    -o-border-radius: 20px 20px 0 0;
}
.cart-page .total-price .t-body {
    background-color: #000;
    padding: 30px 10px;
    border-radius: 0 0 20px 20px;
    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    -ms-border-radius: 0 0 20px 20px;
    -o-border-radius: 0 0 20px 20px;
}
.cart-page .total-price .t-body span {
    font-size: 25px;
    font-weight: bold;
}
.cart-page .total-price .t-body p {
    font-size: 14px;
    margin-top: 6px;
}
/*.purchases-page */
.purchases-page.cart-page .product {
    align-items: flex-start;
    padding: 20px 70px;
}
.purchases-page.cart-page .product .p-text {
    margin: 0;
}

.purchases-page.cart-page  .report p {
    width: 100%;
    padding: 5px 0;
    text-align: right; /*en*/
}
.purchases-page.cart-page  .report p span {color: #FFF;}
.purchases-page .report p .rep-name {
    min-width: 93px;
    display: inline-block;
}
.purchases-page .report p .rep-value {
    padding-right: 30px;/*en*/
    display: inline-block;
    width: 82%;
    text-align: left;
}

.purchases-page.cart-page .product .delete {
    border-color: #8F33CB;
    color: #FFF;
}
.purchases-page.cart-page .product .delete:hover {
    background-color: #FFF;
    color: #8F33CB;
}
.purchases-page .buttons {margin-top: 20px;}
.purchases-page .buttons .a-link{font-size: 14px;}
.purchases-page .buttons .cancel {
    background-color: #EA4335;
    border-color: #EA4335;
    margin: 0 10px;
}
.purchases-page .buttons .cancel:hover,
.order-details .a-link:hover {
    background-color: #FFF;
    color: #EA4335;
}
.purchases-page .total-orders {
    background-color: #000;
    padding: 13px 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.purchases-page .total-orders .report {
    border: 0;
    margin: 0;
    padding: 0;
}
.purchases-page .total-orders .report p .rep-name {min-width: 117px;}
.purchases-page .total-orders .report p {
    display: flex;
}
.purchases-page .total-orders  .report p .rep-value {
    padding-right: 30px;
    width: 100%;
    text-align: left;
}
.order-details .modal-content {
    padding: 0;
    background: #161616;
}
.order-details .modal-content .close {top: 11px;}
.order-details .modal-content .head {
    background-color: #8F33CB;
    padding: 20px;
    margin: 0;
    border-radius: 20px 20px 0 0;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    -ms-border-radius: 20px 20px 0 0;
    -o-border-radius: 20px 20px 0 0;
}
.order-details .modal-content .head h6 {font-size: 18px;}
.order-details .order-content {
    margin: 35px 0;
}
.order-details .detail {
    display: flex;
    justify-content: space-between;
    padding: 0 17px 25px ;
}
.order-details .detail:last-of-type {padding-bottom: 0;}
.order-details .detail p {color: #FFF;}
.order-details .detail .val.product  span{
    display: block;
    margin-bottom: 25px;
}
.order-details .detail .val.product .amount{
    display: inline-block;
    color: #8F33CB;
    margin: 0 0 0 15px;
}
.order-details .a-link {
    background-color: #EA4335;
    border-color: #EA4335;
    width: 50%;
    margin: 0 auto 25px ;
}
/*subscribe page*/
.subscribe .course-info {
    background-color: #000;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 26px 50px 47px;
    text-align: center;
    width: 81%;
}
.subscribe .course-info .img { 
    border-radius:20px ; 
    -webkit-border-radius:20px ;
    -moz-border-radius:20px ;
    -ms-border-radius:20px ; 
    -o-border-radius:20px ;
 }
.subscribe .course-info .img img {
    width: 168px;
    border: 1px solid #FFFFFF26;
    border-radius:20px ; 
    -webkit-border-radius:20px ;
    -moz-border-radius:20px ;
    -ms-border-radius:20px ; 
    -o-border-radius:20px ;
    height: 123px;
}
.subscribe .course-info h4 {
    font-size: 20px;
    margin-top: 16px;
}
.subscribe .course-card .coach {justify-content: center;}
.subscribe .course-card .coach p {font-size: 16px;}
.subscribe .course-info .course-price span{
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    text-align: center;
    padding: 10px 70px 8px;
    font-weight: bold;
    font-size: 20px;
    border: 1px solid #FFF;
    display: inline-block;
    
}
.subscribe .banks-accounts{
    width: 81%;
    display: none;
}
.subscribe .banks-accounts h4 {
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
}

.subscribe .banks-accounts .bank {
    display: flex;
    align-items: center;
    background-color: #000;
    padding: 16px 4px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    margin-bottom: 15px;
}
.subscribe .banks-accounts .report {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid #FFF;
}
.subscribe .banks-accounts .report p{color: #FFF;}
.subscribe .payment-method h6 {
    font-size: 18px;
    position: relative;
    padding-bottom: 17px;
    margin-bottom: 40px;
    width: 100%;
}
.subscribe .payment-method h6::before{
    content: '';
    display: block;
    width: 4%;
    height: 3px;
    background: #8F33CB;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
    margin-top: 5px;
    position: absolute;
    bottom: 0;
    right: 0; /*en*/
    transform: translateX(-50%);
}
.custom-radios .method {
    display: inline-block;
}
.custom-radios input[type="radio"] {
    display: none;
}
.custom-radios input[type="radio"] + label {
    display: flex;
}
.custom-radios input[type="radio"] + label span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #FFFFFF;
    background: transparent;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    line-height: 44px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.custom-radios input[type="radio"] + label span img {
    opacity: 0;
    transition: all .3s ease;
}

 
.custom-radios input[type="radio"]:checked + label span {
    opacity: 1;
    background: #8F33CB url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg) center center no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
    border-color: #8F33CB;
}
.custom-radios input[type="radio"] + label .payment-text {
    cursor: pointer;
    margin-right: 15px; /*en*/
}
.custom-radios input[type="radio"] + label .payment-text p:first-of-type{
    color: #FFF;
}
.custom-radios input[type="radio"] + label .payment-text p:last-of-type {font-size: 13px;}
.subscribe .form {
    margin-top: 30px;
    background-color: #000;
    padding: 45px 70px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.subscribe .form select.form-control {background-color: #000;}
.form .custom-file {
    margin-bottom: 1.5rem;
}
.form .custom-file-label{
    border: 1px solid #FFF;
    border-radius: 100px;
    height: 45px;
    color: #FFF;
    background: transparent;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    font-size: 14px;
    cursor: pointer;
    padding-right: 40px /*en*/;
    padding-top: 9px;
}
.form .custom-file-label::after{
    display: none;
}
.bank-transfer {display: none;}
.order-payment.course-info{ 
    padding: 0;
}
.order-payment .head{
    background-color: #8F33CB;
    padding: 20px 0;
    font-size: 16px;
    border-radius: 20px 20px 0 0;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    -ms-border-radius: 20px 20px 0 0;
    -o-border-radius: 20px 20px 0 0;
}
.order-payment.course-info .course-price {padding: 20px 0;}
.order-payment.course-info .course-price span {
    border: 0;
}
.order-payment.course-info .course-price span p {font-size: 14px;}
/**unit exam page */
.coach-card {
    background-color: #000;
    text-align: center;
    margin-bottom: 12px;
    padding: 24px 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.coach-card .img img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.coach-card h6 {
    font-size: 16px;
    margin-top: 15px;
}
.coach-card p {
    font-size: 14px;
    color: #808080;
    margin: 7px 0 19px;
}
.coach-card .a-link {
    padding: 6px 20px 7px;
    font-size: 14px;
}
.progress-exam {
    background-color: #000;
    text-align: center;
    margin-bottom: 12px;
    padding: 30px 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.progress-exam p {
    color: #EEEEEE;
    margin-bottom: 25px;
}




.progress-exam .progress {
    width: 100px;
    height: 100px;
    line-height: 160px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
.progress:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px solid #FFF;
    position: absolute;
    top: 0;
    left: 0;
}
.progress-exam .progress > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.progress-exam .progress .progress-left {
    left: 0;
}
.progress-exam .progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 10px;
    border-style: solid;
    position: absolute;
    top: 0;
    border-color: #8F33CB;
}
.progress-exam .progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.progress-exam .progress .progress-right {
    right: 0;
}
.progress-exam .progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}
.progress-exam .progress .progress-value {
    display: flex;
    border-radius: 50%;
    font-size: 1rem;
    text-align: center;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 25px;
    font-weight: bold;
}
.progress-exam .progress .progress-value span {
    font-size: 12px;
    text-transform: uppercase;
}

  /* This for loop creates the necessary css animation names 
  Due to the split circle of progress-left and progress right, we must use the animations on each side. 
  */
.progress-exam .progress[data-percentage="1"] .progress-right .progress-bar {
animation: loading-1 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="1"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="2"] .progress-right .progress-bar {
animation: loading-2 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="2"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="3"] .progress-right .progress-bar {
animation: loading-3 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="3"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="4"] .progress-right .progress-bar {
animation: loading-4 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="4"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="5"] .progress-right .progress-bar {
animation: loading-5 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="5"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="6"] .progress-right .progress-bar {
animation: loading-6 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="6"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="7"] .progress-right .progress-bar {
animation: loading-7 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="7"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="8"] .progress-right .progress-bar {
animation: loading-8 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="8"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="9"] .progress-right .progress-bar {
animation: loading-9 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="9"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="10"] .progress-right .progress-bar {
animation: loading-10 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="10"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="11"] .progress-right .progress-bar {
animation: loading-11 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="11"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="12"] .progress-right .progress-bar {
animation: loading-12 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="12"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="13"] .progress-right .progress-bar {
animation: loading-13 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="13"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="14"] .progress-right .progress-bar {
animation: loading-14 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="14"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="15"] .progress-right .progress-bar {
animation: loading-15 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="15"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="16"] .progress-right .progress-bar {
animation: loading-16 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="16"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="17"] .progress-right .progress-bar {
animation: loading-17 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="17"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="18"] .progress-right .progress-bar {
animation: loading-18 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="18"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="19"] .progress-right .progress-bar {
animation: loading-19 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="19"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="20"] .progress-right .progress-bar {
animation: loading-20 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="20"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="21"] .progress-right .progress-bar {
animation: loading-21 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="21"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="22"] .progress-right .progress-bar {
animation: loading-22 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="22"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="23"] .progress-right .progress-bar {
animation: loading-23 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="23"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="24"] .progress-right .progress-bar {
animation: loading-24 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="24"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="25"] .progress-right .progress-bar {
animation: loading-25 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="25"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="26"] .progress-right .progress-bar {
animation: loading-26 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="26"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="27"] .progress-right .progress-bar {
animation: loading-27 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="27"] .progress-left .progress-bar {
animation: 0;
}
.progress-exam .progress[data-percentage="28"] .progress-right .progress-bar {
animation: loading-28 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="28"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="29"] .progress-right .progress-bar {
animation: loading-29 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="29"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="30"] .progress-right .progress-bar {
animation: loading-30 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="30"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="31"] .progress-right .progress-bar {
animation: loading-31 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="31"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="32"] .progress-right .progress-bar {
animation: loading-32 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="32"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="33"] .progress-right .progress-bar {
animation: loading-33 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="33"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="34"] .progress-right .progress-bar {
animation: loading-34 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="34"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="35"] .progress-right .progress-bar {
animation: loading-35 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="35"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="36"] .progress-right .progress-bar {
animation: loading-36 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="36"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="37"] .progress-right .progress-bar {
animation: loading-37 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="37"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="38"] .progress-right .progress-bar {
animation: loading-38 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="38"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="39"] .progress-right .progress-bar {
animation: loading-39 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="39"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="40"] .progress-right .progress-bar {
animation: loading-40 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="40"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="41"] .progress-right .progress-bar {
animation: loading-41 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="41"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="42"] .progress-right .progress-bar {
animation: loading-42 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="42"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="43"] .progress-right .progress-bar {
animation: loading-43 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="43"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="44"] .progress-right .progress-bar {
animation: loading-44 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="44"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="45"] .progress-right .progress-bar {
animation: loading-45 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="45"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="46"] .progress-right .progress-bar {
animation: loading-46 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="46"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="47"] .progress-right .progress-bar {
animation: loading-47 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="47"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="48"] .progress-right .progress-bar {
animation: loading-48 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="48"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="49"] .progress-right .progress-bar {
animation: loading-49 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="49"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="50"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="50"] .progress-left .progress-bar {
animation: 0;
}

.progress-exam .progress[data-percentage="51"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="51"] .progress-left .progress-bar {
animation: loading-1 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="52"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="52"] .progress-left .progress-bar {
animation: loading-2 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="53"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="53"] .progress-left .progress-bar {
animation: loading-3 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="54"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="54"] .progress-left .progress-bar {
animation: loading-4 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="55"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="55"] .progress-left .progress-bar {
animation: loading-5 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="56"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="56"] .progress-left .progress-bar {
animation: loading-6 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="57"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="57"] .progress-left .progress-bar {
animation: loading-7 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="58"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="58"] .progress-left .progress-bar {
animation: loading-8 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="59"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="59"] .progress-left .progress-bar {
animation: loading-9 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="60"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="60"] .progress-left .progress-bar {
animation: loading-10 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="61"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="61"] .progress-left .progress-bar {
animation: loading-11 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="62"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="62"] .progress-left .progress-bar {
animation: loading-12 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="63"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="63"] .progress-left .progress-bar {
animation: loading-13 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="64"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="64"] .progress-left .progress-bar {
animation: loading-14 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="65"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="65"] .progress-left .progress-bar {
animation: loading-15 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="66"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="66"] .progress-left .progress-bar {
animation: loading-16 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="67"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="67"] .progress-left .progress-bar {
animation: loading-17 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="68"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="68"] .progress-left .progress-bar {
animation: loading-18 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="69"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="69"] .progress-left .progress-bar {
animation: loading-19 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="70"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="70"] .progress-left .progress-bar {
animation: loading-20 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="71"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="71"] .progress-left .progress-bar {
animation: loading-21 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="72"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="72"] .progress-left .progress-bar {
animation: loading-22 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="73"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="73"] .progress-left .progress-bar {
animation: loading-23 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="74"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="74"] .progress-left .progress-bar {
animation: loading-24 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="75"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="75"] .progress-left .progress-bar {
animation: loading-25 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="76"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="76"] .progress-left .progress-bar {
animation: loading-26 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="77"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="77"] .progress-left .progress-bar {
animation: loading-27 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="78"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="78"] .progress-left .progress-bar {
animation: loading-28 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="79"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="79"] .progress-left .progress-bar {
animation: loading-29 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="80"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="80"] .progress-left .progress-bar {
animation: loading-30 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="81"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="81"] .progress-left .progress-bar {
animation: loading-31 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="82"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="82"] .progress-left .progress-bar {
animation: loading-32 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="83"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="83"] .progress-left .progress-bar {
animation: loading-33 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="84"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="84"] .progress-left .progress-bar {
animation: loading-34 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="85"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="85"] .progress-left .progress-bar {
animation: loading-35 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="86"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="86"] .progress-left .progress-bar {
animation: loading-36 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="87"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="87"] .progress-left .progress-bar {
animation: loading-37 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="88"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="88"] .progress-left .progress-bar {
animation: loading-38 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="89"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="89"] .progress-left .progress-bar {
animation: loading-39 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="90"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="90"] .progress-left .progress-bar {
animation: loading-40 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="91"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="91"] .progress-left .progress-bar {
animation: loading-41 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="92"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="92"] .progress-left .progress-bar {
animation: loading-42 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="93"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="93"] .progress-left .progress-bar {
animation: loading-43 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="94"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="94"] .progress-left .progress-bar {
animation: loading-44 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="95"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="95"] .progress-left .progress-bar {
animation: loading-45 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="96"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="96"] .progress-left .progress-bar {
animation: loading-46 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="97"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="97"] .progress-left .progress-bar {
animation: loading-47 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="98"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="98"] .progress-left .progress-bar {
animation: loading-48 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="99"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="99"] .progress-left .progress-bar {
animation: loading-49 0.5s linear forwards 0.5s;
}

.progress-exam .progress[data-percentage="100"] .progress-right .progress-bar {
animation: loading-50 0.5s linear forwards;
}
.progress-exam .progress[data-percentage="100"] .progress-left .progress-bar {
animation: loading-50 0.5s linear forwards 0.5s;
}
  
  @keyframes loading-1 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(3.6);
      transform: rotate(3.6deg);
    }
  }
  @keyframes loading-2 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(7.2);
      transform: rotate(7.2deg);
    }
  }
  @keyframes loading-3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(10.8);
      transform: rotate(10.8deg);
    }
  }
  @keyframes loading-4 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(14.4);
      transform: rotate(14.4deg);
    }
  }
  @keyframes loading-5 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(18);
      transform: rotate(18deg);
    }
  }
  @keyframes loading-6 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(21.6);
      transform: rotate(21.6deg);
    }
  }
  @keyframes loading-7 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(25.2);
      transform: rotate(25.2deg);
    }
  }
  @keyframes loading-8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(28.8);
      transform: rotate(28.8deg);
    }
  }
  @keyframes loading-9 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(32.4);
      transform: rotate(32.4deg);
    }
  }
  @keyframes loading-10 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(36);
      transform: rotate(36deg);
    }
  }
  @keyframes loading-11 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(39.6);
      transform: rotate(39.6deg);
    }
  }
  @keyframes loading-12 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(43.2);
      transform: rotate(43.2deg);
    }
  }
  @keyframes loading-13 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(46.8);
      transform: rotate(46.8deg);
    }
  }
  @keyframes loading-14 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(50.4);
      transform: rotate(50.4deg);
    }
  }
  @keyframes loading-15 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(54);
      transform: rotate(54deg);
    }
  }
  @keyframes loading-16 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(57.6);
      transform: rotate(57.6deg);
    }
  }
  @keyframes loading-17 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(61.2);
      transform: rotate(61.2deg);
    }
  }
  @keyframes loading-18 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(64.8);
      transform: rotate(64.8deg);
    }
  }
  @keyframes loading-19 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(68.4);
      transform: rotate(68.4deg);
    }
  }
  @keyframes loading-20 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(72);
      transform: rotate(72deg);
    }
  }
  @keyframes loading-21 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(75.6);
      transform: rotate(75.6deg);
    }
  }
  @keyframes loading-22 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(79.2);
      transform: rotate(79.2deg);
    }
  }
  @keyframes loading-23 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(82.8);
      transform: rotate(82.8deg);
    }
  }
  @keyframes loading-24 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(86.4);
      transform: rotate(86.4deg);
    }
  }
  @keyframes loading-25 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(90);
      transform: rotate(90deg);
    }
  }
  @keyframes loading-26 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(93.6);
      transform: rotate(93.6deg);
    }
  }
  @keyframes loading-27 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(97.2);
      transform: rotate(97.2deg);
    }
  }
  @keyframes loading-28 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(100.8);
      transform: rotate(100.8deg);
    }
  }
  @keyframes loading-29 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(104.4);
      transform: rotate(104.4deg);
    }
  }
  @keyframes loading-30 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(108);
      transform: rotate(108deg);
    }
  }
  @keyframes loading-31 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(111.6);
      transform: rotate(111.6deg);
    }
  }
  @keyframes loading-32 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(115.2);
      transform: rotate(115.2deg);
    }
  }
  @keyframes loading-33 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(118.8);
      transform: rotate(118.8deg);
    }
  }
  @keyframes loading-34 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(122.4);
      transform: rotate(122.4deg);
    }
  }
  @keyframes loading-35 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(126);
      transform: rotate(126deg);
    }
  }
  @keyframes loading-36 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(129.6);
      transform: rotate(129.6deg);
    }
  }
  @keyframes loading-37 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(133.2);
      transform: rotate(133.2deg);
    }
  }
  @keyframes loading-38 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(136.8);
      transform: rotate(136.8deg);
    }
  }
  @keyframes loading-39 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(140.4);
      transform: rotate(140.4deg);
    }
  }
  @keyframes loading-40 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(144);
      transform: rotate(144deg);
    }
  }
  @keyframes loading-41 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(147.6);
      transform: rotate(147.6deg);
    }
  }
  @keyframes loading-42 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(151.2);
      transform: rotate(151.2deg);
    }
  }
  @keyframes loading-43 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(154.8);
      transform: rotate(154.8deg);
    }
  }
  @keyframes loading-44 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(158.4);
      transform: rotate(158.4deg);
    }
  }
  @keyframes loading-45 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(162);
      transform: rotate(162deg);
    }
  }
  @keyframes loading-46 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(165.6);
      transform: rotate(165.6deg);
    }
  }
  @keyframes loading-47 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(169.2);
      transform: rotate(169.2deg);
    }
  }
  @keyframes loading-48 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(172.8);
      transform: rotate(172.8deg);
    }
  }
  @keyframes loading-49 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(176.4);
      transform: rotate(176.4deg);
    }
  }
  @keyframes loading-50 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(180);
      transform: rotate(180deg);
    }
  }

.course-content {
    margin-bottom: 12px;
}
 .course-content .head{
    background-color: #8F33CB;
    border-radius: 15px 15px 0px 0px;
    -webkit-border-radius: 15px 15px 0px 0px;
    -moz-border-radius: 15px 15px 0px 0px;
    -ms-border-radius: 15px 15px 0px 0px;
    -o-border-radius: 15px 15px 0px 0px;
    padding: 14px 20px 15px;
    text-align: center;
}
.course-content .head h6{font-size: 16px;}
.course-content .card-header{
    border-bottom: 1px solid #313131;
    margin-bottom: 0;
}
.course-content .card-header a {
    font-weight: bold;
    color: #FFF;
    display: block;
}
.course-content .card-header a:hover{color: #8F33CB;}
.course-content .card {
    background-color: #000;
    border-radius: 0 0 15px 15px;
    -webkit-border-radius: 0 0 15px 15px;
    -moz-border-radius: 0 0 15px 15px;
    -ms-border-radius: 0 0 15px 15px;
    -o-border-radius: 0 0 15px 15px;
}
[data-toggle="collapse"] .fa::after {  
    content: "\f078";
    font-size: 12px;
}

[data-toggle="collapse"].collapsed .fa::after {
    content: "\f053";
    font-size: 12px;

}
.course-content .card-body a {
    color: #FFF;
    font-size: 14px;
    display: flex;
}
.course-content .card-body a:hover {color: #8F33CB;}
.course-content .card-body a i{
    color: #8F33CB;
    padding-left: 10px; /*en*/
}
.course-content .card-body a .l-time {
    display: block;
    color: #999999;
}
.questions .question {
    background-color: #000;
    padding: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin-bottom: 8px;
}
.questions .question-text {
    font-weight: bold;
    color: #FFF;
    margin-bottom: 20px;
}
.questions .answer {margin-bottom: 13px;}
.questions .answer label {cursor: pointer;}
.questions .answer p {
    margin-right: 20px; /*en*/
    color: #FFF;
}
.questions .a-link {
    padding: 9px 40px;
    margin-top: 40px;
}
.pass-exam .progress-exam {
    background-color: transparent;
    margin: 0;
    padding: 0;
}
.pass-exam .progress-exam h6 {
    font-size: 18px;
    margin-top: 20px;
}
.pass-exam .progress-exam .result {
    background-color: #000;
    padding: 8px 15px;
    margin: 25px auto;
    width: 50%;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.pass-exam .progress-exam .a-link {
    width: 50%;
    margin: auto;
}
/*course-page*/
.course-page .v-hub {
    padding: 0;
    background: transparent;
    position: relative;
}
.course-page .v-hub .video-js .vjs-big-play-button {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    opacity: 0.5;
}
.v-title {
    background: transparent linear-gradient(180deg, #8F33CB99 0%, #8F33CB00 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px 20px 0px 0px;
    color: #FFF;
    position: absolute;
    z-index: 888;
    width: 100%;
    padding: 13px 20px;
}
.v-title h3 {
    font-size: 25px;
}
.course-page .course-date {
    background-color: #161616;
    font-size: 14px;
    padding: 8px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.course-date .progress-exam p {margin-bottom: 15px;}
.course-page .course-date img {
    margin-left: 8px; /*en*/
}
.course-page.store .nav-pills {margin: 60px 0;}
.course-page .form {
    background-color: #000;
    padding: 10px 15px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.course-page .form .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.course-page .prof-img img {
    width: 40px;
    max-height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.course-page .form .form-group .form-control {
    margin: 0 15px;
    border-color: transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.course-page .form .form-group .form-control::placeholder{color: #999999;}
.course-page .form .form-group input.form-control:focus {border-color: transparent !important;}
.course-page .all-notes {
    background-color: #000;
    padding: 0 16px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    margin: 8px 0;
}
.course-page .all-notes .note {
    display: flex;
    border-bottom: 1px solid #313131;
    padding: 15px 0;
    position: relative;
    align-items: center;
}
.course-page .all-notes .note .note-text {
    margin: 0 15px;
    width: 73%;
}
.course-page .all-notes .note .note-text p{
    color: #FFF;
    font-size: 14px;
}
.course-page .all-notes .note span {
    display: inline-block;
    font-size: 13px;
    color: #999999;
}
.course-page .all-notes .note .n-time {
    width: 100px;
    text-align: left; /*en*/
}
    
.course-page .all-notes .note:last-of-type {border-bottom: 0;}
.course-page .all-notes .trainer-replay {
    padding-right: 58px; /*en*/
}
.course-page .course-overview p {
    color: #FFF;
    margin-bottom: 25px;
}
.unotherize {
    text-align: center;
}
.unotherize span {
    display: inline-block;
    margin: 12px 0 10px;
    font-weight: bold;
}
.unotherize .a-link {margin-top: 10px;}

.course-page .all-notes .note .note-text.form{
    width: 100%;
    margin: 10px 0;
}
.course-page .all-notes .note .note-text.form .form-control{
    border-color: #313131;
    margin: 0;
    
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.course-page .all-notes .note .note-text.form .form-control:focus {
    border-color: #8F33CB !important;
}
.course-page .all-notes .note .note-text.form .answer{
    position: absolute;
    left: 5px;
    top: 50%;
    padding: 3px 20px 4px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.course-page .all-notes .note  .help-btn i {color: #999999;}
/*start sales-reports page*/
.sales-reports .progress-exam {
    background-color: transparent;
    
}
.sales-reports .progress-exam p {
    margin: 16px 0 10px;
}
.sales-reports .progress-exam .amount {
    font-size: 25px;
    font-weight: bold;
    color: #8F33CB;
}
/*library-page*/
.library-page.videos-lib {
    background: #161616;
}

/*v-hub-page*/
.v-hub.v-hub-page{
    overflow: hidden;
    background: #161616;
}
.v-hub.v-hub-page .my-video-dimensions {
    width: 100%;
    height: 350px;
}
.v-hub.v-hub-page .vjs-poster {background-size: cover;}
.v-hub.v-hub-page .video-js .vjs-big-play-button {
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
}
.v-hub.v-hub-page .why-video {
    margin-bottom: 25px;
}
.video-modal .modal-content {
    padding: 0 18px;
    background: #161616;
} 

.video-modal .v-hub.v-hub-page {
    padding: 69px 0 0 0;
}