* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  background-color: #FAFAFA;
  overflow-x: hidden;
  font: "Ubuntu", "Verdana", sans-serif; }

.btn {
  font-family: "Ubuntu", "Verdana", sans-serif;
  padding: 0.875em 2.875em; }

.btn-primary {
  background-color: #598EE5;
  border-color: #598EE5; }
  .btn-primary:not(:disabled):not(.disabled):hover {
    background-color: #82A9EB;
    border-color: #82A9EB; }
  .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:focus, .btn-primary.focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: #5283D7;
    border-color: #5283D7; }

.btn-success {
  background-color: #6EB359;
  border-color: #6EB359; }
  .btn-success:not(:disabled):not(.disabled):hover {
    background-color: #82CB6C;
    border-color: #82CB6C; }
  .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:focus, .btn-success.focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: #65A84F;
    border-color: #65A84F; }

.btn-danger {
  background-color: #D95F5C;
  border-color: #D95F5C; }
  .btn-danger:not(:disabled):not(.disabled):hover {
    background-color: #E28684;
    border-color: #E28684; }
  .btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:focus, .btn-danger.focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: #C94F4C;
    border-color: #C94F4C; }

.btn-outline {
  border-color: #D5DAE5;
  background-color: #fff;
  color: #656565; }
  .btn-outline:not(:disabled):not(.disabled):hover {
    border-color: #A9C4EF;
    color: #82A9EB;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(0, 0, 0, 0.02);
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(0, 0, 0, 0.02); }
  .btn-outline:not(:disabled):not(.disabled).active:focus, .btn-outline:not(:disabled):not(.disabled):active:focus, .btn-outline:focus, .btn-outline.focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    border-color: #A9C4EF;
    color: #82A9EB; }

.btn:disabled, .btn.disabled {
  background-color: #E1E4EB;
  border-color: #E1E4EB; }
  .btn:disabled.btn-outline, .btn.disabled.btn-outline {
    background-color: #FAFAFE;
    border-color: #E1E4EB;
    color: #E1E4EB; }

.btn-round {
  text-decoration: none;
  border: 1px solid #598EE5;
  background-color: #FAFAFA;
  outline: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0; }
  .btn-round.btn-icon svg {
    width: 20px;
    height: 20px;
    fill: #598EE5; }
  .btn-round:not(:disabled):not(.disabled):hover {
    background-color: #DCE9FF; }
  .btn-round:not(:disabled):not(.disabled).active:focus, .btn-round:not(:disabled):not(.disabled):active:focus, .btn-round:focus, .btn-round.focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: #598EE5; }
    .btn-round:not(:disabled):not(.disabled).active:focus svg, .btn-round:not(:disabled):not(.disabled):active:focus svg, .btn-round:focus svg, .btn-round.focus svg {
      fill: #fff; }
  .btn-round:disabled, .btn-round.disabled {
    background-color: #E1E4EB;
    border-color: #E1E4EB; }
    .btn-round:disabled svg, .btn-round.disabled svg {
      fill: #fff; }

.btn-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.btn-arrow {
  width: 2.1875rem;
  height: 2.1875rem;
  background-color: #fff;
  border: 1px solid #C8CFDD;
  padding: 0;
  border-radius: 50%; }
  .btn-arrow.btn-icon svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: #000; }
  .btn-arrow:not(:disabled):not(.disabled):hover {
    border-color: #DCE9FF; }
    .btn-arrow:not(:disabled):not(.disabled):hover svg {
      fill: #A9C4EF; }
  .btn-arrow:not(:disabled):not(.disabled).active:focus, .btn-arrow:not(:disabled):not(.disabled):active:focus, .btn-arrow:focus, .btn-arrow.focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    border-color: #598EE5; }
    .btn-arrow:not(:disabled):not(.disabled).active:focus svg, .btn-arrow:not(:disabled):not(.disabled):active:focus svg, .btn-arrow:focus svg, .btn-arrow.focus svg {
      fill: #598EE5; }
  .btn-arrow:disabled, .btn-arrow.disabled {
    background-color: #FAFAFE;
    border-color: #E1E4EB; }
    .btn-arrow:disabled svg, .btn-arrow.disabled svg {
      fill: #E1E4EB; }

.btn-arrow-reverse {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }

.btn-voice {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #598EE5;
  -webkit-box-shadow: none;
          box-shadow: none;
  position: relative;
  z-index: 1; }
  .btn-voice:not(:disabled):not(.disabled).active:focus, .btn-voice:not(:disabled):not(.disabled):active:focus, .btn-voice:focus, .btn-voice.focus, .btn-voice:hover {
    -webkit-box-shadow: none;
            box-shadow: none; }
  .btn-voice svg {
    width: 30px;
    height: 30px;
    fill: #fff;
    vertical-align: middle;
    position: relative;
    z-index: 3; }
  .btn-voice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #598EE5;
    border-radius: 50%;
    z-index: 2; }
  .btn-voice::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #D2DFF5;
    z-index: -1;
    display: block;
    border-radius: 50%;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    z-index: 1;
    opacity: 0;
    visibility: hidden; }
  .btn-voice.voice-talk::after {
    -webkit-transform: scale(1.4);
        -ms-transform: scale(1.4);
            transform: scale(1.4);
    opacity: 1;
    visibility: visible; }
  .btn-voice.voice-pulse::after {
    -webkit-animation: pulseVoise 1s infinite ease-in-out alternate;
            animation: pulseVoise 1s infinite ease-in-out alternate; }

@-webkit-keyframes pulseVoise {
  0%, 100% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4); }
  50% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@keyframes pulseVoise {
  0%, 100% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4); }
  50% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

.wrap-lg, .wrap-md, .wrap {
  padding-left: 15px;
  padding-right: 15px;
  margin: auto; }

.wrap-lg {
  max-width: 1670px; }

.wrap-md {
  max-width: 1120px; }

.wrap {
  max-width: 570px; }

.header {
  padding-top: 34px;
  padding-bottom: 27px;
  height: 110px;
  background-color: #fff;
  border-bottom: 1px solid #E2E2E2; }
  .header .wrap-lg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }

.header-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative; }

.btn-header {
  outline: none;
  background-color: transparent;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  cursor: pointer;
  margin-left: 32px; }
  .btn-header:not(:last-of-type) {
    margin-right: 32px; }
  .btn-header:hover, .btn-header:focus, .btn-header:active {
    outline: none; }
  .btn-header .btn-icon {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background-color: #EDEFF3;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }
    .btn-header .btn-icon .icon {
      width: 1.25rem;
      height: 1.25rem; }
  .btn-header .btn-text {
    font-family: "Ubuntu", "Verdana", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    margin-right: 20px; }
  .btn-header .icon-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 24px;
    height: 24px; }
    .btn-header .icon-set .icon-dot {
      width: 4px;
      height: 4px;
      margin: 2px;
      display: block;
      background-color: #333333;
      -webkit-transition: background-color .2s ease-in-out, -webkit-transform .2s .2s ease-in-out;
      transition: background-color .2s ease-in-out, -webkit-transform .2s .2s ease-in-out;
      -o-transition: background-color .2s ease-in-out, transform .2s .2s ease-in-out;
      transition: background-color .2s ease-in-out, transform .2s .2s ease-in-out;
      transition: background-color .2s ease-in-out, transform .2s .2s ease-in-out, -webkit-transform .2s .2s ease-in-out; }
  .btn-header.active .btn-text {
    color: #598EE5; }
  .btn-header.active .btn-icon {
    background-color: #598EE5; }
    .btn-header.active .btn-icon .icon {
      fill: #fff; }
  .btn-header.active .icon-set .icon-dot {
    background-color: #fff; }
    .btn-header.active .icon-set .icon-dot:nth-child(2) {
      -webkit-transform: translateY(8px);
          -ms-transform: translateY(8px);
              transform: translateY(8px); }
    .btn-header.active .icon-set .icon-dot:nth-child(4) {
      -webkit-transform: translateX(8px);
          -ms-transform: translateX(8px);
              transform: translateX(8px); }
    .btn-header.active .icon-set .icon-dot:nth-child(6) {
      -webkit-transform: translateX(-8px);
          -ms-transform: translateX(-8px);
              transform: translateX(-8px); }
    .btn-header.active .icon-set .icon-dot:nth-child(8) {
      -webkit-transform: translateY(-8px);
          -ms-transform: translateY(-8px);
              transform: translateY(-8px); }

.sign-set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 23px; }
  .sign-set .btn {
    margin-left: 9px;
    margin-right: 9px; }

.menu-nav {
  right: 0; }

.voc-nav {
  left: 0; }

.menu-nav, .voc-nav {
  z-index: 5;
  background-color: #fff;
  border-radius: 8px;
  width: 400px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 90px;
  max-height: 0;
  -webkit-transition: all .4s .2s ease-in-out;
  -o-transition: all .4s .2s ease-in-out;
  transition: all .4s .2s ease-in-out; }
  .menu-nav.active, .voc-nav.active {
    max-height: 1000px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; }
    .menu-nav.active .menu-list, .menu-nav.active .voc-list, .voc-nav.active .menu-list, .voc-nav.active .voc-list {
      opacity: 1;
      visibility: visible;
      -webkit-transition: all .4s .2s ease-in-out;
      -o-transition: all .4s .2s ease-in-out;
      transition: all .4s .2s ease-in-out; }

.menu-list, .voc-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }

.voc-list {
  padding: 20px 40px 20px; }
  .voc-list li {
    padding-top: 8px;
    padding-bottom: 8px; }
    .voc-list li a {
      text-decoration: none;
      color: #656565;
      font-weight: 600;
      display: block; }
      .voc-list li a::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border-radius: 50%; }
      .voc-list li a .value {
        font-weight: 400; }
  .voc-list .difficult a::before {
    background-color: #D95F5C; }
  .voc-list .study a::before {
    background-color: #6EB359; }
  .voc-list .memorized a::before {
    background-color: #598EE5; }

.menu-list li a:hover {
  color: #598EE5; }

.menu-list > li:not(.person-menu) {
  padding-top: 8px;
  padding-bottom: 8px; }
  .menu-list > li:not(.person-menu) a {
    padding-left: 50px;
    padding-right: 50px; }

.menu-list > li a {
  text-decoration: none;
  color: #656565;
  font-weight: 600; }

.menu-list > li:last-child {
  margin-bottom: 40px; }

.person-menu {
  padding: 35px 40px;
  border-bottom: 1px solid #E1E4EB; }
  .person-menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .person-menu a .person-name {
      display: block;
      color: #598EE5; }
    .person-menu a .person-login {
      display: block;
      font-weight: 400;
      font-size: 12px;
      color: #C8CFDD; }
  .person-menu .submenu {
    padding-left: 100px; }
  .person-menu + li {
    margin-top: 20px; }

.person-img {
  position: relative;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
  display: block; }

.person-info {
  margin-left: 30px; }

.has-submenu > a::after {
  content: '';
  width: 10px;
  height: 10px;
  display: inline-block;
  background-image: url("../img/icons/arrow.svg");
  background-size: contain;
  margin-left: 12px;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }

.has-submenu.open-submenu > a::after {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }

.has-submenu.open-submenu .submenu {
  opacity: 1;
  visibility: visible;
  max-height: 500px;
  margin-top: 10px; }

.submenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out; }
  .submenu li a {
    font-weight: 400; }

.footer {
  margin-top: 100px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: #656565;
  bottom: 0; }

.panel-full {
  font-family: "Ubuntu", "Verdana", sans-serif;
  margin-top: 90px;
  margin-bottom: 90px;
  background-color: #fff;
  padding-top: 80px;
  padding-bottom: 90px; }
  .panel-full .like-h1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto; }
  .panel-full .form-group {
    display: block; }

.form-group {
  margin-top: 12px;
  margin-bottom: 12px; }

.form-control {
  font-family: "Ubuntu", "Verdana", sans-serif;
  padding: 23px 27px;
  margin-top: 10px; }
  .form-control::-webkit-input-placeholder {
    color: #C8CFDD; }
  .form-control:-ms-input-placeholder {
    color: #C8CFDD; }
  .form-control::-ms-input-placeholder {
    color: #C8CFDD; }
  .form-control::placeholder {
    color: #C8CFDD; }

.submit-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 40px; }
  .submit-row .text-link {
    text-align: right; }

.soc-enter-row {
  display: inline-block;
  font-size: 18px;
  color: #656565;
  margin-top: 70px;
  margin-bottom: 10px;
  width: 100%; }

.enter-text {
  display: block;
  margin-bottom: 20px; }

.soc-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 15px;
  margin-right: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); }

.soc-enter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .soc-enter.facebook img {
    width: 50px;
    height: 50px; }
  .soc-enter.google img {
    width: 25px;
    height: 25px; }

.soc-name {
  display: block;
  width: calc(100% - 70px); }

.soc-enter-row__center {
  margin-top: 50px;
  margin-bottom: 70px; }
  .soc-enter-row__center .soc-enter-inner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }

.help-title {
  font-size: 16px;
  display: block;
  text-align: center; }

.like-h1 {
  font-family: "Ubuntu", "Verdana", sans-serif;
  font-size: 36px;
  font-weight: 400;
  margin-top: 25px;
  margin-bottom: 25px; }

.like-h2 {
  font-family: "Ubuntu", "Verdana", sans-serif;
  font-size: 36px;
  font-weight: 400; }

.cover {
  position: absolute;
  left: -10000%;
  right: -10000%;
  top: -10000%;
  bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform: scale(0.1);
      -ms-transform: scale(0.1);
          transform: scale(0.1); }

.course-main {
  margin-top: 100px; }

.course-grid {
  margin-top: 65px;
  margin-bottom: 65px; }

.course-panel {
  position: relative;
  overflow: hidden;
  padding: 90px 44px 68px;
  border-radius: 8px;
  margin-top: 18px;
  margin-bottom: 18px; }
  .course-panel .type {
    font-family: "Open Sans", "Verdana", sans-serif;
    font-size: 12px;
    color: #E1E4EB;
    text-transform: uppercase; }
  .course-panel .like-h2 {
    margin-bottom: 20px;
    max-width: 512px;
    color: #fff; }
  .course-panel p {
    max-width: 512px;
    color: #EDEFF3; }
  .course-panel .panel-items {
    margin-top: 50px; }
  .course-panel .course-img {
    z-index: -2; }
  .course-panel::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.6)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); }

.panel-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.v-line {
  width: 1px;
  height: 64px;
  margin-left: 70px;
  margin-right: 70px;
  background-color: #fff; }

.panel-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  color: #FFFFFF; }
  .panel-item.simple {
    color: #82CB6C; }
  .panel-item.medium {
    color: #E7B56B; }
  .panel-item.high {
    color: #E05D3B; }
  .panel-item .all {
    opacity: .4; }
  .panel-item .panel-item-text {
    margin-top: 5px;
    text-align: center; }

.icon-item {
  position: relative;
  width: 38px;
  height: 38px; }
  .icon-item .icon {
    width: 38px;
    height: 38px;
    fill: #6B757D; }
  .icon-item .icon-next {
    width: 70%;
    overflow: hidden;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
    .icon-item .icon-next .icon {
      fill: #fff; }

.points-block .icon {
  width: 38px;
  height: 38px;
  fill: #6B757D; }

.person-block .icon-round {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .person-block .icon-round .icon {
    width: 30px;
    height: 30px;
    fill: #fff; }

.progress-icon {
  width: 40px;
  height: 40px;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  position: relative; }
  .progress-icon .icon {
    width: 40px;
    height: 40px; }
  .progress-icon .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
        -ms-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg); }

.progress__meter,
.progress__value {
  fill: none; }

.progress__meter {
  stroke: #6B757D; }

.progress__value {
  stroke: #fff;
  stroke-linecap: round; }

/*single course - lessons*/
.lessons-main {
  padding-top: 50px; }

.main-progress {
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: 0 !important;
  margin-right: 0 !important; }

.main-progress-col {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.main-progress-block {
  height: 8px;
  overflow-y: visible; }

.bg-success {
  background-color: #6EB359 !important; }

.progress-current-value {
  position: absolute;
  top: -46px;
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: #6EB359;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%); }
  .progress-current-value::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin: 5px auto;
    border: 1px solid #6EB359;
    background-color: #fff;
    border-radius: 50%; }

.progress-summ-value {
  color: #C9C9C9;
  font-weight: 400;
  font-size: 24px;
  text-align: right; }

.course-cards {
  margin-top: 30px;
  margin-bottom: 100px; }

.card {
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  border: none;
  margin-top: 10px;
  margin-bottom: 10px; }
  .card .progress {
    height: 5px;
    margin-top: -2.5px;
    background-color: transparent; }

.card-title {
  font-family: "Ubuntu", "Verdana", sans-serif;
  color: #333333; }

.card-text {
  font-family: "Open Sans", "Verdana", sans-serif;
  color: #C8CFDD; }

.card-main-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 30px; }

.card-info {
  width: calc(100% - 50px); }

.card-buttons .btn-width {
  width: 100%;
  padding-left: 5px;
  padding-right: 5px; }

.btn-card {
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: #fff;
  border: 1px solid #E1E4EB;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .btn-card.focus, .btn-card.btn:focus {
    -webkit-box-shadow: none;
            box-shadow: none; }
  .btn-card .icon {
    width: 20px;
    height: 20px;
    fill: #E1E4EB; }
  .btn-card.active {
    background-color: #6EB359;
    border-color: #6EB359; }
    .btn-card.active .icon {
      fill: #fff; }

.card-status {
  margin-bottom: 30px; }
  .card-status .panel-item {
    margin-left: 0;
    margin-right: 0; }
    .card-status .panel-item .panel-item-text {
      color: #C9C9C9;
      font-size: 12px; }
      .card-status .panel-item .panel-item-text .all {
        opacity: 1; }
  .card-status .col {
    padding-left: 4px;
    padding-right: 4px; }
  .card-status .progress-icon .progress-text {
    color: #6EB359; }
  .card-status .icon-item .icon {
    fill: #C9C9C9; }
  .card-status .progress__value {
    stroke: #C9C9C9; }
  .card-status .progress__meter {
    stroke: #6EB359; }
  .card-status .icon-item .icon-next .icon {
    fill: #6EB359; }

.course-grid-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

.panel-label-info {
  background-color: #fff;
  border: 1px solid #E1E4EB;
  border-radius: 10px;
  position: relative;
  padding: 57px 42px 40px;
  margin-top: 10px;
  margin-bottom: 20px; }
  .panel-label-info .label-main {
    font-family: "Ubuntu", "Verdana", sans-serif;
    font-size: 70px;
    font-weight: 300; }
  .panel-label-info .label-under {
    font-size: 24px; }
  .panel-label-info .line {
    height: 4px;
    width: 100%;
    background-color: #EDEFF3;
    margin-top: 46px;
    margin-bottom: 26px; }
  .panel-label-info .progress {
    height: 4px;
    background-color: #EDEFF3; }
    .panel-label-info .progress .progress-bar {
      background-color: #A8E295; }

.main-progress.current-main-progress {
  margin-top: 0;
  margin-bottom: 0; }
  .main-progress.current-main-progress .progress-current-value {
    top: -7px; }
    .main-progress.current-main-progress .progress-current-value::after {
      width: 12px;
      height: 12px; }

.current-progress {
  border: 1px solid #6EB359; }

.progress-label .label-main {
  color: #6EB359; }

.progress-label .label-under {
  color: #A8E295; }

.time-label .progress-icon {
  width: 150px;
  height: 150px;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: block; }
  .time-label .progress-icon .icon {
    width: 150px;
    height: 150px; }
  .time-label .progress-icon .progress__value {
    stroke: #E09D3B; }
  .time-label .progress-icon .progress__meter {
    stroke: #EDEFF3; }

.time-label .progress-text {
  position: absolute;
  font-size: 70px;
  font-weight: 300;
  color: #E09D3B;
  top: 50%;
  left: 60%; }

.time-label .progress-under-text {
  position: absolute;
  top: 50%;
  left: 30%;
  text-align: center;
  font-size: 14px;
  color: #EDCB9A;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
      -ms-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg); }

.panel-label-info.hard-label .level-img {
  width: 160px;
  height: 120px; }

.panel-label-info.hard-label .label-under {
  text-align: center;
  color: #E9ACAB;
  font-size: 14px;
  display: block;
  width: 160px;
  margin-top: 20px; }

.btn-settings {
  position: absolute;
  top: 33px;
  right: 40px;
  background-color: transparent;
  outline: none !important;
  text-decoration: none;
  border: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer; }
  .btn-settings .icon {
    width: 24px;
    height: 24px;
    fill: #656565; }

.panel-label-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .panel-label-footer .icon {
    width: 25px;
    height: 25px;
    fill: #656565; }
  .panel-label-footer .text {
    padding-left: 10px;
    font-size: 16px;
    color: #656565;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px; }

.mob-progress {
  display: none;
  width: 40px;
  height: 40px;
  background-color: transparent;
  outline: none !important;
  text-decoration: none;
  border: none;
  padding: 0;
  margin-right: 10px; }
  .mob-progress .icon {
    width: 40px;
    height: 40px; }

.modal-header {
  border: none;
  font-family: "Ubuntu", "Verdana", sans-serif;
  font-size: 24px;
  padding: 40px 45px 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .modal-header .close {
    outline: none;
    border: 1px solid #C8CFDD;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .modal-header .close .icon {
      width: 20px;
      height: 20px;
      fill: #656565; }

.modal-body {
  padding: 30px 45px 90px; }

.choose-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px; }
  .choose-radio input {
    display: none; }
    .choose-radio input:checked ~ .radio-icon::after {
      opacity: 1; }
  .choose-radio .radio-icon {
    display: block;
    width: 22px;
    height: 22px;
    border: 1px solid #598EE5;
    border-radius: 50%;
    position: relative; }
    .choose-radio .radio-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      display: block;
      background-color: #598EE5;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      opacity: 0; }
  .choose-radio .radio-text {
    font-family: "Open Sans", "Verdana", sans-serif;
    font-size: 16px;
    margin-left: 10px;
    display: block; }

.header-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 30px;
  margin-bottom: 40px; }

.header-control-title {
  margin-left: 30px;
  margin-right: 30px;
  font-family: "Ubuntu", "Verdana", sans-serif;
  font-size: 18px;
  color: #3420A7; }

.progress-line .row {
  margin-left: -3px;
  margin-right: -3px; }

.progress-line .col {
  padding-left: 3px;
  padding-right: 3px; }

.progress-line .progress {
  height: 8px; }

.content-title .like-h1 {
  font-size: 30px;
  margin-top: 15px;
  margin-bottom: 15px; }

.content .like-h2 {
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #598EE5; }

.content .help-title {
  text-align: left;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  will-change: max-height;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }

.content-buttons {
  margin: 25px -8px; }
  .content-buttons .col {
    padding-left: 8px;
    padding-right: 8px; }

.text-line {
  display: block;
  padding: 10px 30px;
  border: 1px solid #C8CFDD;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer; }
  .text-line.active {
    color: #598EE5;
    border-color: #598EE5; }
  .text-line:hover {
    border-color: #598EE5;
    color: #598EE5; }

.content-title {
  margin-top: 26px;
  margin-bottom: 12px; }

.content-body {
  margin-top: 12px;
  margin-bottom: 26px; }

.content-footer {
  margin-top: 52px;
  margin-bottom: 52px; }

.verify-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .verify-buttons .btn {
    width: 100%; }

.added-points {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .added-points .point-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .added-points .point-icon .icon {
      width: 20px;
      height: 20px; }
  .added-points .text {
    margin-left: 15px; }

.wrong .check-answer .check-answer-icon {
  background-color: #FFDFDF; }
  .wrong .check-answer .check-answer-icon .icon {
    fill: #D95F5C; }

.wrong .check-answer .text {
  color: #D95F5C; }

.wrong .btn {
  background-color: #D95F5C;
  border-color: #D95F5C; }

.success .check-answer .check-answer-icon {
  background-color: #E6FFDF; }
  .success .check-answer .check-answer-icon .icon {
    fill: #6EB359; }

.success .check-answer .text {
  color: #6EB359; }

.success .btn {
  background-color: #6EB359;
  border-color: #6EB359; }

.success .point-icon {
  background-color: #E6FFDF; }
  .success .point-icon .icon {
    fill: #6EB359; }

.success .text {
  color: #6EB359; }

.check-answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .check-answer .check-answer-icon {
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 50%; }
    .check-answer .check-answer-icon .icon {
      width: 24px;
      height: 24px; }
  .check-answer .text {
    margin-left: 25px;
    font-size: 24px;
    font-weight: 600; }

.content-img {
  border-radius: 8px;
  max-width: 100%;
  margin-bottom: 25px; }

.content-body-title {
  color: #6EB359;
  font-family: "Open Sans", "Verdana", sans-serif;
  font-size: 18px;
  margin-bottom: 10px;
  display: block; }

.choose-inner {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 8px;
  margin-bottom: 8px; }
  .choose-inner .checkbox-icon {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px; }

.label-checkbox {
  display: block;
  cursor: pointer; }
  .label-checkbox input {
    display: none; }
  .label-checkbox .checkbox-icon {
    width: 27px;
    height: 27px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #C8CFDD;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }
    .label-checkbox .checkbox-icon .icon {
      opacity: 0;
      visibility: hidden;
      width: 15px;
      height: 15px;
      fill: #598EE5;
      -webkit-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out; }
  .label-checkbox input:checked ~ .checkbox-icon {
    border-color: #598EE5; }
    .label-checkbox input:checked ~ .checkbox-icon .icon {
      opacity: 1;
      visibility: visible; }
  .label-checkbox:hover .checkbox-icon {
    border-color: #598EE5; }

.label-checkbox_image {
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }
  .label-checkbox_image:hover {
    -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
            transform: scale(1.03); }

.label-checkbox ~ .btn-voice {
  margin-left: 15px;
  display: block; }

.btn-voice ~ .label-checkbox {
  margin-left: 15px;
  display: block; }

.label-voice {
  margin-top: 10px;
  margin-bottom: 10px; }

.less-opacity {
  opacity: .5; }

.drag-zone {
  border-bottom: 1px solid #C8CFDD;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px; }
  .drag-zone .drag-zone-inner {
    min-height: 45px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: 15px; }
    .drag-zone .drag-zone-inner .letter {
      margin-left: 2px;
      margin-right: 2px; }

.drag-line {
  margin-top: 10px;
  margin-bottom: 10px; }

.letter, .draggable-item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px dashed #C8CFDD;
  border-radius: 5px;
  cursor: move;
  font-family: "Open Sans", "Verdana", sans-serif;
  font-size: 16px;
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px; }
  .letter::before, .draggable-item::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("../img/icons/drag.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }

.letter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 60px;
  text-align: center; }

.draggable-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 22px 27px 22px 10px;
  margin-bottom: 15px; }
  .draggable-item span {
    display: block;
    margin-left: 10px;
    max-width: calc(100% - 55px); }

.drag-square {
  width: 100%;
  height: 50%;
  background-color: #fff;
  border: 1px solid #C8CFDD;
  margin-bottom: 15px; }

.draggable-words,
.draggable-words_to-block {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .draggable-words .draggable-item,
  .draggable-words_to-block .draggable-item {
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px; }

.drag-word {
  width: 20%;
  height: auto;
  border: 1px solid #C8CFDD;
  background-color: #fff;
  opacity: .6;
  border-radius: 5px; }

.drag-letter {
  width: 60px;
  height: auto;
  max-height: 46px;
  border: 1px solid #C8CFDD;
  background-color: #fff;
  opacity: .8;
  border-radius: 5px; }

.correct-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", "Verdana", sans-serif; }
  .correct-list li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    margin-bottom: 30px; }
  .correct-list .btn-voice {
    margin-left: 24px;
    margin-right: 28px; }

.correct-input {
  display: inline-block;
  padding: 22px 27px;
  background-color: #fff;
  border: 1px solid #D5DAE5;
  border-radius: 5px;
  outline: none;
  width: calc(100% - 150px);
  color: #D95F5C; }

.drag-amount {
  margin-top: 50px; }

.words-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 40px;
  margin-bottom: 20px; }
  .words-container .word {
    margin-left: 10px; }

.small-voice {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  margin-right: 10px; }
  .small-voice svg {
    width: 20px;
    height: 20px; }

.voice-item span {
  max-width: calc(100% - 120px); }

.center-btn {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px; }

.dialog {
  padding-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E1E4EB; }

.replica {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #656565; }

.inner-word,
.inner-sentence {
  display: inline-block;
  min-width: 85px;
  min-height: 42px;
  vertical-align: middle; }
  .inner-word:empty,
  .inner-sentence:empty {
    background-color: #FAFAFA;
    border: 1px dashed #C8CFDD;
    border-radius: 5px; }
  .inner-word .draggable-item,
  .inner-sentence .draggable-item {
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0; }
  .inner-word.no-added,
  .inner-sentence.no-added {
    min-width: 50px;
    text-align: center;
    font-size: 28px;
    color: #D95F5C;
    height: 20px;
    vertical-align: middle; }
  .inner-word.contenteditable,
  .inner-sentence.contenteditable {
    display: inline-block;
    padding: 10px 22px;
    font-size: 16px;
    border: 1px solid #C8CFDD;
    text-align: center;
    background-color: #fff;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px; }

.contenteditable {
  cursor: text; }

.inner-sentence {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .inner-sentence .draggable-item {
    margin-left: 2px;
    margin-right: 2px; }

.draggable-words_to-block {
  margin-top: 30px; }

.const-order {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .const-order .draggable-item {
    padding: 10px;
    margin: 0;
    -ms-flex-item-align: center;
        align-self: center; }

.const-word {
  padding: 10px 14px;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  margin: 5px;
  border-radius: 5px; }

.draggable-item.contenteditable {
  color: #598EE5; }
  .draggable-item.contenteditable span {
    max-width: none; }

.text-answers {
  width: 100%; }

.checkbox-text {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .checkbox-text .checkbox-inner {
    width: calc(100% - 42px); }

.connect-text-container .text-line {
  padding: 17px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.connect-text-container .text-line-content {
  width: calc(100% - 55px);
  margin-left: 15px; }

.text-line-number {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  border-radius: 50%;
  border: 1px solid #598EE5;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.connect-number .text-line-number {
  background-color: #A9C4EF;
  border-color: #A9C4EF;
  color: #fff; }

.connect-number .text-line {
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }
  .connect-number .text-line:hover .text-line-number, .connect-number .text-line.selected .text-line-number {
    background-color: #fff;
    border-color: #598EE5;
    color: #598EE5; }
  .connect-number .text-line.selected {
    background-color: #598EE5;
    color: #fff; }
    .connect-number .text-line.selected:hover {
      color: #fff; }

.connect-text {
  margin-top: 30px; }

.const-place,
.const-enter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-bottom: 1px solid #C8CFDD;
  min-height: 46px;
  padding-bottom: 4px;
  margin-bottom: 40px; }

.const-enter {
  margin-top: 10px;
  vertical-align: middle;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 10px;
  padding-right: 10px; }
  .const-enter:active, .const-enter:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    outline: none; }

.draggable-dialog:not(.draggable-active) .draggable-item {
  border-style: solid; }
  .draggable-dialog:not(.draggable-active) .draggable-item::before {
    display: none; }
  .draggable-dialog:not(.draggable-active) .draggable-item span {
    max-width: calc(100% - 150px); }

.draggable-dialog .draggable-item {
  padding-right: 10px; }
  .draggable-dialog .draggable-item span {
    margin-left: 10px;
    margin-right: 10px; }
    .draggable-dialog .draggable-item span.text {
      max-width: calc(100% - 160px); }
  .draggable-dialog .draggable-item .small-voice {
    margin-left: auto; }

.dialog-person-img {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #C8CFDD;
  overflow: hidden;
  margin-right: 10px; }

.matches-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  .matches-section .match-block {
    padding: 7px;
    border: 1px solid #C8CFDD;
    border-radius: 5px;
    margin: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    color: #656565;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }
    .matches-section .match-block .match-number {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: 28px;
      height: 28px;
      font-size: 14px;
      vertical-align: middle;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      border: 1px solid #C8CFDD;
      -webkit-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out; }
    .matches-section .match-block .match-text {
      display: block;
      margin-left: 5px;
      margin-right: 5px; }
    .matches-section .match-block:hover, .matches-section .match-block.selected {
      color: #fff; }
      .matches-section .match-block:hover .match-number, .matches-section .match-block.selected .match-number {
        background-color: #fff; }
    .matches-section .match-block.primary {
      border-color: #598EE5; }
      .matches-section .match-block.primary .match-number {
        border-color: #598EE5;
        background-color: #598EE5; }
      .matches-section .match-block.primary:hover, .matches-section .match-block.primary.selected {
        background-color: #598EE5; }
        .matches-section .match-block.primary:hover .match-number, .matches-section .match-block.primary.selected .match-number {
          background-color: #fff;
          border-color: #598EE5;
          color: #598EE5; }
    .matches-section .match-block.violet {
      border-color: #3420A7; }
      .matches-section .match-block.violet .match-number {
        border-color: #3420A7;
        background-color: #3420A7; }
      .matches-section .match-block.violet:hover, .matches-section .match-block.violet.selected {
        background-color: #3420A7; }
        .matches-section .match-block.violet:hover .match-number, .matches-section .match-block.violet.selected .match-number {
          background-color: #fff;
          border-color: #3420A7;
          color: #3420A7; }
    .matches-section .match-block.green {
      border-color: #6EB359; }
      .matches-section .match-block.green .match-number {
        border-color: #6EB359;
        background-color: #6EB359; }
      .matches-section .match-block.green:hover, .matches-section .match-block.green.selected {
        background-color: #6EB359; }
        .matches-section .match-block.green:hover .match-number, .matches-section .match-block.green.selected .match-number {
          background-color: #fff;
          border-color: #6EB359;
          color: #6EB359; }
    .matches-section .match-block.orange {
      border-color: #E09D3B; }
      .matches-section .match-block.orange .match-number {
        border-color: #E09D3B;
        background-color: #E09D3B; }
      .matches-section .match-block.orange:hover, .matches-section .match-block.orange.selected {
        background-color: #E09D3B; }
        .matches-section .match-block.orange:hover .match-number, .matches-section .match-block.orange.selected .match-number {
          background-color: #fff;
          border-color: #E09D3B;
          color: #E09D3B; }
    .matches-section .match-block.indian {
      border-color: #D95F5C; }
      .matches-section .match-block.indian .match-number {
        border-color: #D95F5C;
        background-color: #D95F5C; }
      .matches-section .match-block.indian:hover, .matches-section .match-block.indian.selected {
        background-color: #D95F5C; }
        .matches-section .match-block.indian:hover .match-number, .matches-section .match-block.indian.selected .match-number {
          background-color: #fff;
          border-color: #D95F5C;
          color: #D95F5C; }
    .matches-section .match-block.magenta {
      border-color: #AE25E9; }
      .matches-section .match-block.magenta .match-number {
        border-color: #AE25E9;
        background-color: #AE25E9; }
      .matches-section .match-block.magenta:hover, .matches-section .match-block.magenta.selected {
        background-color: #AE25E9; }
        .matches-section .match-block.magenta:hover .match-number, .matches-section .match-block.magenta.selected .match-number {
          background-color: #fff;
          border-color: #AE25E9;
          color: #AE25E9; }

.matches-selection {
  margin-top: 30px; }
  .matches-selection .match-block {
    color: #656565; }
    .matches-selection .match-block .match-number {
      color: #656565; }
    .matches-selection .match-block:hover {
      border-color: #598EE5;
      background-color: #fff;
      color: #598EE5; }
      .matches-selection .match-block:hover .match-number {
        color: #598EE5;
        border-color: #598EE5; }
    .matches-selection .match-block.primary, .matches-selection .match-block.primary:hover {
      border-color: #598EE5;
      background-color: #fff;
      color: #598EE5; }
      .matches-selection .match-block.primary .match-number, .matches-selection .match-block.primary:hover .match-number {
        color: #598EE5;
        background-color: #fff; }
    .matches-selection .match-block.violet, .matches-selection .match-block.violet:hover {
      border-color: #3420A7;
      background-color: #fff;
      color: #3420A7; }
      .matches-selection .match-block.violet .match-number, .matches-selection .match-block.violet:hover .match-number {
        color: #3420A7;
        background-color: #fff; }
    .matches-selection .match-block.green, .matches-selection .match-block.green:hover {
      border-color: #6EB359;
      background-color: #fff;
      color: #6EB359; }
      .matches-selection .match-block.green .match-number, .matches-selection .match-block.green:hover .match-number {
        color: #6EB359;
        background-color: #fff; }
    .matches-selection .match-block.orange, .matches-selection .match-block.orange:hover {
      border-color: #E09D3B;
      background-color: #fff;
      color: #E09D3B; }
      .matches-selection .match-block.orange .match-number, .matches-selection .match-block.orange:hover .match-number {
        color: #E09D3B;
        background-color: #fff; }
    .matches-selection .match-block.indian, .matches-selection .match-block.indian:hover {
      border-color: #D95F5C;
      background-color: #fff;
      color: #D95F5C; }
      .matches-selection .match-block.indian .match-number, .matches-selection .match-block.indian:hover .match-number {
        color: #D95F5C;
        background-color: #fff; }
    .matches-selection .match-block.magenta, .matches-selection .match-block.magenta:hover {
      border-color: #AE25E9;
      background-color: #fff;
      color: #AE25E9; }
      .matches-selection .match-block.magenta .match-number, .matches-selection .match-block.magenta:hover .match-number {
        color: #AE25E9;
        background-color: #fff; }

/*info panels*/
.info-div {
  position: relative; }

.info-panel {
  position: absolute;
  top: 90%;
  right: 0;
  z-index: 5;
  background-color: #fff;
  margin-top: 10px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
  .info-panel.active {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; }

.btn-level .icon {
  position: absolute;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.btn-level .icon-clicked {
  opacity: 0;
  visibility: hidden; }

.btn-level.active .icon-clicked {
  opacity: 1;
  visibility: visible; }

.btn-level.active .icon-simple {
  opacity: 0;
  visibility: hidden; }

.info-level {
  padding: 10px;
  margin-top: 25px; }

.info-level-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  cursor: pointer; }
  .info-level-row .icon {
    width: 28px;
    height: auto;
    display: block;
    margin-right: 24px; }
  .info-level-row .text {
    font-size: 14px; }
    .info-level-row .text.simple {
      color: #6EB359; }
    .info-level-row .text.medium {
      color: #E7B56B; }
    .info-level-row .text.high {
      color: #D95F5C; }

.star-amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 15px;
  cursor: pointer; }
  .star-amount.choosed {
    background-color: rgba(89, 142, 229, 0.15); }
  .star-amount svg {
    margin: 2px 2px;
    width: 20px;
    height: 20px;
    stroke: #598EE5;
    fill: none; }
    .star-amount svg.fill {
      fill: #598EE5; }

.info-button.active {
  background-color: #598EE5; }
  .info-button.active svg {
    fill: #fff; }

.info-button:active, .info-button:focus {
  background-color: #fff; }
  .info-button:active svg, .info-button:focus svg {
    fill: #598EE5; }

.content-title {
  position: relative; }

.book-panel {
  width: 100%;
  padding: 20px 0; }
  .book-panel .row {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }

.btn-plus {
  background-color: #598EE5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  margin-left: auto;
  margin-right: 10px;
  font-size: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .btn-plus svg {
    width: 15px;
    height: 15px;
    fill: #fff; }
  .btn-plus.unactive {
    background-color: rgba(0, 0, 0, 0.5); }

.book-row {
  padding: 10px 20px; }

/*content active - show answers*/
.done {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }

.word-answer {
  display: none; }

.doing {
  opacity: 1;
  visibility: visible;
  max-height: 300rem;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }

.const-answer {
  display: none; }

.text-answer {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  font-size: 14px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.content.active .help-title {
  margin-top: 15px;
  margin-bottom: 25px;
  max-height: 50rem;
  opacity: 1;
  visibility: visible; }

.content.active .text-line {
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
  .content.active .text-line[data-answer='false'] {
    border-color: #D95F5C;
    color: #D95F5C;
    background-color: #FFDFDF; }
  .content.active .text-line[data-answer='true'] {
    border-color: #6EB359;
    color: #6EB359;
    background-color: #E6FFDF; }

.content.active .label-checkbox[data-answer='false'] input ~ .checkbox-icon {
  border-color: #D95F5C; }
  .content.active .label-checkbox[data-answer='false'] input ~ .checkbox-icon .icon {
    opacity: 0;
    visibility: hidden; }

.content.active .label-checkbox[data-answer='true'] input ~ .checkbox-icon {
  border-color: #6EB359; }
  .content.active .label-checkbox[data-answer='true'] input ~ .checkbox-icon .icon {
    opacity: 1;
    visibility: visible;
    fill: #6EB359; }

.content.active .drag-zone-inner > .letter {
  display: none; }

.content.active .draggable-square {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out; }
  .content.active .draggable-square .draggable-item {
    border-style: solid;
    border-color: #6EB359;
    color: #6EB359;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }
    .content.active .draggable-square .draggable-item::before {
      display: none; }

.content.active .word-answer {
  display: block; }
  .content.active .word-answer .letter {
    border-style: solid;
    width: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #6EB359;
    border-color: #6EB359; }
    .content.active .word-answer .letter::before {
      display: none; }

.content.active .doing {
  opacity: 0;
  visibility: hidden;
  max-height: 0; }

.content.active .correct-list .correct-input {
  border-color: #6EB359;
  font-size: 0; }
  .content.active .correct-list .correct-input::before {
    content: attr(data-answer);
    font-size: 16px;
    color: #6EB359;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; }

.content.active .inner-word:not(.no-added), .content.active .inner-sentence:not(.no-added) {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fff;
  border-style: solid;
  border-color: #6EB359; }
  .content.active .inner-word:not(.no-added)::before, .content.active .inner-sentence:not(.no-added)::before {
    content: attr(data-answer);
    color: #6EB359;
    font-size: 16px; }

.content.active .inner-word.contenteditable, .content.active .inner-sentence.contenteditable {
  font-size: 0; }

.content.active .inner-sentence {
  border-width: 1px;
  border-radius: 5px; }
  .content.active .inner-sentence .draggable-item {
    display: none; }
  .content.active .inner-sentence::before {
    margin-left: 5px;
    margin-right: 5px; }

.content.active .const-word {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  pointer-events: none; }

.content.active .place-for-word {
  margin-left: 5px;
  margin-right: 5px; }
  .content.active .place-for-word::before {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    content: attr(data-answer);
    display: inline-block;
    color: #6EB359; }

.content.active .checkbox-text[data-answer="false"] .text-line {
  border-color: #D95F5C;
  color: #D95F5C; }

.content.active .checkbox-text[data-answer="true"] .text-line {
  border-color: #6EB359;
  color: #6EB359; }

.content.active .connect-text-container .text-line {
  border-color: #6EB359;
  color: #6EB359; }

.content.active .connect-number .text-line-number {
  background-color: #6EB359;
  border-color: #6EB359;
  color: #fff !important; }

.content.active .connect-text .text-line-number {
  border-color: #6EB359;
  font-size: 0; }
  .content.active .connect-text .text-line-number::before {
    content: attr(data-answer);
    font-size: 16px; }

.content.active .matches-selection .match-block[data-answer-color="primary"] {
  border-color: #598EE5;
  color: #598EE5; }
  .content.active .matches-selection .match-block[data-answer-color="primary"] .match-number {
    border-color: #598EE5;
    color: #598EE5; }

.content.active .matches-selection .match-block[data-answer-color="violet"] {
  border-color: #3420A7;
  color: #3420A7; }
  .content.active .matches-selection .match-block[data-answer-color="violet"] .match-number {
    border-color: #3420A7;
    color: #3420A7; }

.content.active .matches-selection .match-block[data-answer-color="green"] {
  border-color: #6EB359;
  color: #6EB359; }
  .content.active .matches-selection .match-block[data-answer-color="green"] .match-number {
    border-color: #6EB359;
    color: #6EB359; }

.content.active .matches-selection .match-block[data-answer-color="orange"] {
  border-color: #E09D3B;
  color: #E09D3B; }
  .content.active .matches-selection .match-block[data-answer-color="orange"] .match-number {
    border-color: #E09D3B;
    color: #E09D3B; }

.content.active .matches-selection .match-block[data-answer-color="indian"] {
  border-color: #D95F5C;
  color: #D95F5C; }
  .content.active .matches-selection .match-block[data-answer-color="indian"] .match-number {
    border-color: #D95F5C;
    color: #D95F5C; }

.content.active .matches-selection .match-block[data-answer-color="magenta"] {
  border-color: #AE25E9;
  color: #AE25E9; }
  .content.active .matches-selection .match-block[data-answer-color="magenta"] .match-number {
    border-color: #AE25E9;
    color: #AE25E9; }

.content.active .matches-selection .match-block .match-number {
  font-size: 0; }
  .content.active .matches-selection .match-block .match-number::before {
    content: attr(data-answer);
    font-size: 16px; }

.content.active .const-answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.content.active .const-place .const-word {
  background-color: #fff;
  border: 1px solid #6EB359;
  color: #6EB359;
  margin: 5px;
  border-radius: 5px;
  padding: 10px 14px; }

.content.active .const-order {
  -webkit-transition: none;
  -o-transition: none;
  transition: none; }

.content.active .text-answer {
  opacity: 1;
  visibility: visible;
  max-height: 20rem;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
  max-width: 100%;
  color: #D95F5C; }

.game-main .header-control-title {
  color: #F2A116; }

.game-main .bg-success {
  background-color: #F2A116 !important; }

.game-main .bg-warning {
  opacity: .8; }

.game-main .current-progress {
  border-color: #F2A116; }

.game-main .progress-current-value {
  color: #F2A116; }
  .game-main .progress-current-value::after {
    border: 4px solid #F2A116;
    background-color: #FFAF3A; }

.game-main .btn-voice {
  background-color: #F2A116; }
  .game-main .btn-voice::before {
    background-color: #F2A116; }
  .game-main .btn-voice::after {
    background-color: rgba(242, 161, 22, 0.32); }

.game-main .btn-round {
  border-color: #F2A116; }
  .game-main .btn-round svg {
    fill: #F2A116; }

.game-main .info-button.active {
  background-color: #F2A116; }
  .game-main .info-button.active svg {
    fill: #fff; }

.game-main .btn-plus {
  background-color: #F2A116; }

.game-main .btn.focus, .game-main .btn:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(242, 161, 22, 0.32);
          box-shadow: 0 0 0 0.2rem rgba(242, 161, 22, 0.32); }

.game-main .btn-round:not(:disabled):not(.disabled):hover {
  background-color: rgba(242, 161, 22, 0.32); }

.game-main .btn-round:not(:disabled):not(.disabled).active:focus, .game-main .btn-round:not(:disabled):not(.disabled):active:focus, .game-main .btn-round:focus, .game-main .btn-round.focus {
  background-color: #F2A116; }
  .game-main .btn-round:not(:disabled):not(.disabled).active:focus svg, .game-main .btn-round:not(:disabled):not(.disabled):active:focus svg, .game-main .btn-round:focus svg, .game-main .btn-round.focus svg {
    fill: #F2A116; }

.game-main .content .like-h2 {
  color: #F2A116; }

.game-main .text-line:hover, .game-main .text-line.active {
  border-color: #F2A116;
  color: #F2A116; }

.game-main .btn-arrow:not(:disabled):not(.disabled):hover {
  border-color: #F2A116; }
  .game-main .btn-arrow:not(:disabled):not(.disabled):hover svg {
    fill: #F2A116; }

.game-main .btn-arrow:not(:disabled):not(.disabled).active:focus, .game-main .btn-arrow:not(:disabled):not(.disabled):active:focus, .game-main .btn-arrow:focus, .game-main .btn-arrow.focus {
  border-color: #F2A116; }
  .game-main .btn-arrow:not(:disabled):not(.disabled).active:focus svg, .game-main .btn-arrow:not(:disabled):not(.disabled):active:focus svg, .game-main .btn-arrow:focus svg, .game-main .btn-arrow.focus svg {
    fill: #F2A116; }

.game-main .letter::before, .game-main .draggable-item::before {
  background-image: url("../img/icons/drag-yellow.svg"); }

.color-field {
  height: 110px;
  border: 1px solid #C8CFDD;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  position: relative;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
  .color-field .color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; }
  .color-field .text {
    opacity: 0;
    font-size: 16px;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; }
  .color-field.active .color {
    opacity: 1; }
  .color-field.active .text {
    opacity: 1; }
  .color-field.finished {
    background-color: rgba(110, 179, 89, 0.2);
    border-color: #6EB359; }
    .color-field.finished .color, .color-field.finished .text {
      opacity: 0; }
  .color-field.red .color {
    background-color: red; }
  .color-field.blue .color {
    background-color: blue; }
  .color-field.green .color {
    background-color: green; }
  .color-field.yellow .color {
    background-color: yellow; }

@media (max-width: 1600px) {
  .v-line {
    margin-left: 30px;
    margin-right: 30px; }
  .panel-item {
    margin-left: 7px;
    margin-right: 7px; } }

@media (max-width: 1200px) {
  .like-h1 {
    font-size: 28px; }
  .like-h2 {
    font-size: 28px; }
  .course-main {
    margin-top: 50px; }
  .course-grid {
    margin-top: 25px;
    margin-bottom: 45px; }
  .course-panel {
    padding: 60px 20px 40px; }
  .panel-items {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .panel-items .v-line {
      display: none; } }

@media (max-width: 1199px) {
  .mob-progress {
    margin-left: auto;
    display: block; }
  .section-summ-progress {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; }
    .section-summ-progress.active {
      opacity: 1;
      visibility: visible;
      max-height: 2000px; } }

@media (max-width: 991px) {
  .panel-items {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .panel-items .v-line {
      display: block; }
  .progress-current-value {
    font-size: 18px;
    top: -36px;
    text-align: left; }
    .progress-current-value::after {
      width: 15px;
      height: 15px; }
  .progress-summ-value {
    position: absolute;
    font-size: 18px;
    bottom: -30px;
    right: 0; }
  .header-control {
    margin-top: 20px;
    margin-bottom: 25px; }
  .content-title .like-h1 {
    font-size: 28px; } }

@media (max-width: 767px) {
  .sign-set {
    display: none; }
  .panel-full {
    padding-top: 40px;
    padding-bottom: 50px;
    margin: 0 -15px; }
    .panel-full .like-h1 {
      margin-top: 15px;
      margin-bottom: 15px; }
  .enter-text {
    text-align: center; }
  .soc-enter-row {
    margin-top: 50px; }
  .soc-enter-inner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .soc-img {
    margin-left: 0;
    margin-right: 0; }
  .soc-name {
    display: none; }
  .submit-row {
    display: block;
    margin-top: 30px; }
    .submit-row .text-link {
      margin-top: 15px;
      text-align: center; } }

@media (max-width: 640px) {
  .header {
    padding-top: 13px;
    padding-bottom: 12px;
    height: 64px; }
    .header .logo {
      width: 91px; }
      .header .logo img {
        max-width: 100%; }
  .btn-header {
    margin-left: 10px; }
    .btn-header .btn-text {
      display: none; }
    .btn-header .btn-icon {
      width: 38px;
      height: 38px; }
    .btn-header:not(:last-child) {
      margin-right: 0; }
  .footer {
    margin-top: 30px; }
  .voc-nav, .menu-nav {
    max-width: 280px; }
  .voc-nav {
    left: auto;
    right: 0; }
  .voc-list {
    padding: 20px 15px; }
  .person-menu {
    padding: 15px 20px; }
    .person-menu .submenu {
      padding-left: 60px; }
  .person-img {
    width: 40px;
    height: 40px; }
  .person-info {
    margin-left: 20px; }
  .menu-list > li:not(.person-menu) a {
    padding-left: 20px;
    padding-right: 20px; }
  .person-menu + li {
    margin-top: 15px; }
  .menu-list > li:last-child {
    margin-bottom: 20px; }
  .course-panel .panel-items {
    margin-top: 20px; }
  .header-control {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .panel-items {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around; }
    .panel-items .v-line {
      display: none; }
    .panel-items .btn-primary {
      width: calc(100% + 30px);
      -webkit-box-ordinal-group: 11;
          -ms-flex-order: 10;
              order: 10;
      display: block;
      margin-left: -15px;
      margin-right: -15px;
      border-radius: 0; }
    .panel-items .panel-item {
      margin-bottom: 15px; }
  .course-grid .col {
    padding-left: 0;
    padding-right: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto; }
  .course-panel {
    border-radius: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 25px; }
  .correct-list li {
    margin-bottom: 15px; }
  .correct-list .btn-voice {
    margin-left: 10px;
    margin-right: 15px; }
  .correct-input {
    width: calc(100% - 100px);
    padding: 10px 15px; } }

@media (max-width: 575px) {
  .header-control-title {
    margin-left: 15px;
    margin-right: 15px; }
  .content-title {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse; }
    .content-title .like-h1 {
      text-align: center;
      margin-top: 15px;
      margin-bottom: 15px; }
  .content-buttons {
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center; }
    .content-buttons .btn {
      margin-left: auto;
      margin-right: auto; }
  .content-body .single-btn {
    margin: 0 auto 20px; }
  .content-footer {
    margin-top: 30px; }
    .content-footer .btn {
      margin-top: 5px;
      margin-bottom: 5px; }
  .verify-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse; }
  .text-line {
    padding-left: 15px;
    padding-right: 15px; }
  .draggable-dialog .draggable-item {
    padding-right: 10px; }
    .draggable-dialog .draggable-item span {
      margin-left: 10px;
      margin-right: 10px; }
      .draggable-dialog .draggable-item span.text {
        font-size: 14px;
        max-width: calc(100% - 130px); }
    .draggable-dialog .draggable-item .small-voice {
      margin-left: auto; }
  .dialog-person-img {
    width: 20px;
    height: 20px; } }

@media (max-width: 480px) {
  .panel-item .panel-item-text {
    display: none; } }