/* Global Variables */
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  min-height: 100vh;
  font-family: "Rubik", "Helvetica", "Arial", "sans-serif";
  color: #666;
  font-size: 16px;
  line-height: 24px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

header, footer, aside, article, section, nav, svg, iframe {
  display: block;
}

ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

input, textarea {
  border: none;
  background: none;
  outline: none;
  font: normal 400 16px/18px Rubik, Arial, sans-serif;
  color: #666;
  min-height: 48px;
}
input.placeholder, textarea.placeholder {
  color: #ccc;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #ccc;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ccc;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #ccc;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ccc;
}
input:-webkit-autofill, textarea:-webkit-autofill {
  box-shadow: 0 0 0 30px #fff inset;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0 0 15px;
}

#page,
#page.dashboard {
  width: 100%;
  margin: 80px auto 0 !important;
  -webkit-flex: 1 0 auto;
  -moz-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 20px;
}

.section-title {
  margin: 0 0 20px;
  font: normal 700 30px/38px Rubik, Arial, sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.section-title.separator {
  position: relative;
  margin: 0 0 80px;
  color: #444;
}
.section-title.separator:after {
  position: absolute;
  bottom: -35px;
  left: 50%;
  width: 70px;
  height: 6px;
  background: #e5e5e5;
  content: "";
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.section-title.separator:before {
  position: absolute;
  top: -35px;
  left: 50%;
  width: 70px;
  height: 6px;
  border-radius: 5.3px;
  background-color: #6447cf;
  content: "";
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.section-title.normal {
  text-transform: none;
  font-weight: 500;
}

.section-description {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 18px;
  text-align: center;
  line-height: 28px;
  font-weight: 300;
}
.section-description a {
  color: #00c0d6;
  text-decoration: underline;
}
.section-description a:hover {
  text-decoration: none;
}

#ua-tab, #ua-page {
  padding: 60px 0 0;
}

.flex-h-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

#header {
  padding: 0 20px;
  width: 100%;
  height: 80px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background: #fff;
  position: fixed;
  z-index: 1000;
  /*********************************
      Burger menu
  *********************************/
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header .mobile {
    display: none;
  }
}
#header #main-menu {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  /*********************************
      Primary Menu
  *********************************/
  /*********************************
      Secondary Menu
  *********************************/
}
#header #main-menu .logo {
  margin-top: -10px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  transition: opacity 0.1s ease;
  -moz-transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  -o-transition: opacity 0.1s ease;
  position: relative;
  z-index: 1006;
}
@media screen and (max-device-width: 414px) {
  #header #main-menu .logo {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 414px) {
  #header #main-menu .logo {
    margin-left: 60px;
    transition: margin-left 0.2s ease;
    -moz-transition: margin-left 0.2s ease;
    -webkit-transition: margin-left 0.2s ease;
    -o-transition: margin-left 0.2s ease;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .logo {
    margin-left: 0;
    transition: margin-left 0.2s ease;
    -moz-transition: margin-left 0.2s ease;
    -webkit-transition: margin-left 0.2s ease;
    -o-transition: margin-left 0.2s ease;
  }
  #header #main-menu .logo:hover {
    opacity: 0.8;
    transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
    -webkit-transition: opacity 0.1s ease;
    -o-transition: opacity 0.1s ease;
  }
}
#header #main-menu .logo img {
  width: 155px;
  max-width: 100%;
  display: block;
}
#header #main-menu .primary-menu {
  transition: right 0.4s ease-in-out, opacity 0.3s ease-in-out;
  -moz-transition: right 0.4s ease-in-out, opacity 0.3s ease-in-out;
  -webkit-transition: right 0.4s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: right 0.4s ease-in-out, opacity 0.3s ease-in-out;
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu {
    padding: 0;
    width: 100%;
    height: 100vh;
    display: block;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 1000;
  }
}
@media screen and (max-width: 1200px) {
  #header #main-menu .primary-menu {
    min-width: 280px;
  }
}
@media screen and (min-width: 1200px), screen and (min-device-width: 1200px) {
  #header #main-menu .primary-menu {
    width: auto;
  }
}
@media screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu .mobile-hide-menu {
    padding-top: 80px;
    width: 100%;
    height: 80px;
    display: block;
    pointer-events: none;
    background-color: #fff;
    box-shadow: 0 10px 8px 1px rgba(255, 255, 255, 0.6);
    transition: left 0.4s ease-in-out;
    -moz-transition: left 0.4s ease-in-out;
    -webkit-transition: left 0.4s ease-in-out;
    -o-transition: left 0.4s ease-in-out;
    position: fixed;
    left: -100%;
    top: 0;
    z-index: 1001;
  }
}
#header #main-menu .primary-menu.active {
  opacity: 1;
  left: 0;
}
@media screen and (min-width: 414px) and (max-width: 1024px) {
  #header #main-menu .primary-menu.active::after {
    opacity: 1;
    left: 0;
  }
}
@media screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu.active .mobile-hide-menu {
    left: 0;
  }
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu .primary-list {
    padding: 80px 0 40px;
    height: 100%;
    overflow-y: auto;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .primary-list {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
  }
}
#header #main-menu .primary-menu .primary-list li {
  margin: 0 10px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  box-shadow: inset 0 0 #8441e2;
  transition: box-shadow 0.1s ease-in-out;
  -moz-transition: box-shadow 0.1s ease-in-out;
  -webkit-transition: box-shadow 0.1s ease-in-out;
  -o-transition: box-shadow 0.1s ease-in-out;
  position: relative;
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu .primary-list li {
    margin: 0;
    display: block;
    border-top: 1px solid #e6ebf0;
    line-height: 16px;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .primary-list li {
    height: 100%;
  }
  #header #main-menu .primary-menu .primary-list li:hover > a,
  #header #main-menu .primary-menu .primary-list li:hover .active-lang {
    box-shadow: inset 0 4px #8441e2;
    color: #333333;
  }
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu .primary-list li:hover > a,
  #header #main-menu .primary-menu .primary-list li:hover .active-lang {
    box-shadow: inset 4px 0 #8441e2;
    color: #8441e2;
  }
}
#header #main-menu .primary-menu .primary-list li.active > a {
  font-weight: 500;
  color: #8441e2;
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu .primary-list li.active > a {
    box-shadow: inset 4px 0 #8441e2;
  }
}
#header #main-menu .primary-menu .primary-list li.hidden-secondary {
  display: none;
}
#header #main-menu .primary-menu .primary-list li a,
#header #main-menu .primary-menu .primary-list li .active-lang {
  outline: none;
  color: #333333;
  word-break: break-word;
  white-space: normal;
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header #main-menu .primary-menu .primary-list li a,
  #header #main-menu .primary-menu .primary-list li .active-lang {
    padding: 20px 24px 20px 24px;
    display: block;
    font-size: 18px;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .primary-list li a,
  #header #main-menu .primary-menu .primary-list li .active-lang {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #666666;
  }
}
#header #main-menu .primary-menu .primary-list li a.menu-item-no-wrap {
  white-space: nowrap;
}
#header #main-menu .primary-menu .dropdown {
  margin: 0;
  transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out;
}
@media screen and (max-width: 1140px) {
  #header #main-menu .primary-menu .dropdown.active {
    background-color: #fafafa;
  }
  #header #main-menu .primary-menu .dropdown.active .dd-list {
    max-height: 300px;
    transition: max-height 0.2s ease-in-out;
  }
}
@media screen and (min-width: 1140px) {
  #header #main-menu .primary-menu .dropdown:hover {
    background-color: #fafafa;
  }
  #header #main-menu .primary-menu .dropdown:hover .dd-list {
    max-height: 300px;
    transition: max-height 0.2s ease-in-out;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .dropdown a,
  #header #main-menu .primary-menu .dropdown .active-lang {
    padding: 0 10px;
  }
}
#header #main-menu .primary-menu .dropdown .active-lang {
  display: flex;
  align-items: center;
  text-align: left;
}
#header #main-menu .primary-menu .dd-list {
  width: auto;
  min-width: 100%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .dd-list {
    overflow: hidden;
    max-height: 0;
    border: none;
    background-color: #fafafa;
    transition: max-height 0.2s ease-in-out;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
#header #main-menu .primary-menu .dd-list li {
  border: none;
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .dd-list li {
    margin: 0;
  }
  #header #main-menu .primary-menu .dd-list li:hover {
    box-shadow: none;
  }
  #header #main-menu .primary-menu .dd-list li:hover > a {
    box-shadow: none;
    color: #fff;
  }
}
#header #main-menu .primary-menu .dd-list li:first-of-type {
  border: none;
}
#header #main-menu .primary-menu .dd-list a {
  padding: 14px 30px;
  width: 100%;
  border: none;
  background-color: transparent;
  text-align: left;
  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
#header #main-menu .primary-menu .dd-list a.active {
  box-shadow: inset 8px 0 #4fcefa;
  cursor: default;
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .dd-list a {
    padding: 5px 18px 5px 14px;
    word-break: break-word;
    white-space: normal;
  }
  #header #main-menu .primary-menu .dd-list a.active {
    box-shadow: none;
  }
  #header #main-menu .primary-menu .dd-list a.active, #header #main-menu .primary-menu .dd-list a:hover {
    border: none;
    background-color: #719de1;
    color: #fff;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
  }
}
#header #main-menu .primary-menu .dd-lang {
  min-width: 44px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  #header #main-menu .primary-menu .dd-lang .dd-list a {
    padding: 5px 10px;
  }
}
#header #main-menu .secondary-menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header #main-menu .secondary-menu {
    height: 40px;
    position: absolute;
    top: 20px;
    right: 24px;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .secondary-menu {
    z-index: 100;
  }
  #header #main-menu .secondary-menu:hover .user-links {
    /* padding-top: 28px;
    padding-bottom: 40px; */
    max-height: 600px;
    box-shadow: 0 7px 6px 1px rgba(0, 0, 0, 0.1);
    transition: max-height 0.3s ease-out;
  }
}
#header #main-menu .secondary-menu .std-text-button {
  font-size: 15px;
  color: #666;
  text-decoration: none;
  text-transform: capitalize;
  transition: color 0.1s ease;
  -moz-transition: color 0.1s ease;
  -webkit-transition: color 0.1s ease;
  -o-transition: color 0.1s ease;
}
@media screen and (max-width: 414px) {
  #header #main-menu .secondary-menu .std-text-button {
    width: 34px;
    height: 34px;
    display: block;
    background-image: url("../../img/svg/login-icon.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    font-size: 0;
  }
}
@media screen and (min-device-width: 1200px) {
  #header #main-menu .secondary-menu .std-text-button:hover {
    color: #8441e2;
  }
}
#header #main-menu .secondary-menu .border-button {
  margin: 0 0 0 20px;
  border-color: #8441e2;
  color: #8441e2;
  transition: color 0.1s ease, background-color 0.1s ease;
  -moz-transition: color 0.1s ease, background-color 0.1s ease;
  -webkit-transition: color 0.1s ease, background-color 0.1s ease;
  -o-transition: color 0.1s ease, background-color 0.1s ease;
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #header #main-menu .secondary-menu .border-button {
    display: none;
  }
}
@media screen and (min-device-width: 1200px) {
  #header #main-menu .secondary-menu .border-button:hover {
    background-color: #8441e2;
    color: #fff;
  }
}
#header #main-menu .secondary-menu .user {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1200px) {
  #header #main-menu .secondary-menu .user::before, #header #main-menu .secondary-menu .user:after {
    content: "";
    height: 2px;
    width: 24px;
    background-color: #8441e2;
    transform-origin: 0 0;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .secondary-menu .user::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 20px;
    display: inline-block;
    border-style: solid;
    border-width: 6px 3px 0 3px;
    border-color: #1b253a transparent transparent transparent;
  }
  #header #main-menu .secondary-menu .user:hover {
    color: #8441e2;
  }
}
#header #main-menu .secondary-menu .user img {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  #header #main-menu .secondary-menu .user img {
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .secondary-menu .user img {
    margin-right: 10px;
  }
}
#header #main-menu .secondary-menu .user .user-name {
  display: none;
}
@media screen and (min-width: 1200px) {
  #header #main-menu .secondary-menu .user .user-name {
    display: inline-block;
  }
}
#header #main-menu .secondary-menu .user-links {
  padding: 0 58px;
  display: block;
  background-color: #fff;
}
@media screen and (max-width: 1200px) {
  #header #main-menu .secondary-menu .user-links {
    padding-top: 80px;
    height: 100vh;
    width: 300px;
    min-width: 340px;
    overflow: auto;
    transition: right 0.4s ease-in-out;
    -moz-transition: right 0.4s ease-in-out;
    -webkit-transition: right 0.4s ease-in-out;
    -o-transition: right 0.4s ease-in-out;
    position: fixed;
    right: -100%;
    top: 0;
    z-index: 1002;
  }
}
@media screen and (max-device-width: 1200px) {
  #header #main-menu .secondary-menu .user-links {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  #header #main-menu .secondary-menu .user-links {
    max-height: 0;
    height: auto;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    transform: translateX(-20%);
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 100;
  }
}
#header #main-menu .secondary-menu .user-links a {
  display: block;
  font-size: 16px;
  color: #94979b;
  line-height: 18px;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
#header #main-menu .secondary-menu .user-links a:not(:last-child) {
  margin-bottom: 20px;
}
@media screen and (min-device-width: 1200px) {
  #header #main-menu .secondary-menu .user-links a:hover {
    color: #8441e2;
  }
}
#header #main-menu .secondary-menu .user-links a.active {
  cursor: default;
  color: #8441e2;
}
#header #main-menu .secondary-menu .user-links a.active::before {
  opacity: 1;
  filter: grayscale(0);
}
@media screen and (max-device-width: 1200px) {
  #header #main-menu .secondary-menu .user-links > a:not(.my-kids) {
    padding-left: 54px;
  }
}
#header #main-menu .secondary-menu .user-links .my-kids::before,
#header #main-menu .secondary-menu .user-links .user-setting-links a::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  opacity: 0.5;
  filter: grayscale(100%);
  vertical-align: middle;
}
@media screen and (max-device-width: 1200px) {
  #header #main-menu .secondary-menu .user-links .my-kids::before,
  #header #main-menu .secondary-menu .user-links .user-setting-links a::before {
    width: 24px;
    height: 24px;
    margin-right: 30px;
  }
}
@media screen and (min-device-width: 1200px) {
  #header #main-menu .secondary-menu .user-links .my-kids::before,
  #header #main-menu .secondary-menu .user-links .user-setting-links a::before {
    width: 18px;
    height: 18px;
    margin-right: 16px;
  }
}
@media screen and (min-device-width: 1200px) {
  #header #main-menu .secondary-menu .user-links .my-kids:hover::before,
  #header #main-menu .secondary-menu .user-links .user-setting-links a:hover::before {
    opacity: 1;
    filter: grayscale(0);
  }
}
#header #main-menu .secondary-menu .user-links .my-kids {
  margin-top: 36px;
}
#header #main-menu .secondary-menu .user-links .my-kids::before {
  background-image: url("../../img/svg/ic-db-kids.svg");
}
#header #main-menu .secondary-menu .user-links .my-payments::before {
  background-image: url("../../img/svg/ic-db-payments.svg");
}
#header #main-menu .secondary-menu .user-links .my-settings::before {
  background-image: url("../../img/svg/ic-db-settings.svg");
}
#header #main-menu .secondary-menu .user-links .exit {
  margin-bottom: 36px;
}
#header #main-menu .secondary-menu .user-links .exit::before {
  background-image: url("../../img/svg/ic-db-kids.svg");
}
#header #main-menu .secondary-menu .user-links .user-setting-links {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid #e6ebf0;
}
@media screen and (max-width: 1200px) {
  #header #main-menu .secondary-menu.active .user {
    position: relative;
    z-index: 1004;
  }
  #header #main-menu .secondary-menu.active .user::before, #header #main-menu .secondary-menu.active .user:after {
    transition: opacity 0.3s ease-in-out 0.1s;
    -moz-transition: opacity 0.3s ease-in-out 0.1s;
    -webkit-transition: opacity 0.3s ease-in-out 0.1s;
    -o-transition: opacity 0.3s ease-in-out 0.1s;
    opacity: 1;
  }
  #header #main-menu .secondary-menu.active .user::before {
    transform: rotate(45deg) translate(-50%, -50%);
  }
  #header #main-menu .secondary-menu.active .user:after {
    transform: rotate(-45deg) translate(-50%, -50%);
  }
  #header #main-menu .secondary-menu.active .user img {
    opacity: 0;
  }
  #header #main-menu .secondary-menu.active .user-links {
    transition: right 0.4s ease-in-out;
    -moz-transition: right 0.4s ease-in-out;
    -webkit-transition: right 0.4s ease-in-out;
    -o-transition: right 0.4s ease-in-out;
    right: 0;
  }
}
#header .burger {
  display: none;
  opacity: 0;
  transition: opacity 0.1s ease 0.1s;
  -moz-transition: opacity 0.1s ease 0.1s;
  -webkit-transition: opacity 0.1s ease 0.1s;
  -o-transition: opacity 0.1s ease 0.1s;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 1001;
}
@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #header .burger {
    display: block;
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
    -moz-transition: opacity 0.2s ease 0.1s;
    -webkit-transition: opacity 0.2s ease 0.1s;
    -o-transition: opacity 0.2s ease 0.1s;
    left: 24px;
  }
}
#header .burger .jcf-checkbox {
  display: none;
}
#header .burger label {
  padding: 8px 0;
  margin: 0;
  display: block;
  cursor: pointer;
}
#header .burger label > span {
  width: 24px;
  height: 2px;
  display: block;
  background: #8441e2;
  text-indent: -9999px;
  transition: background 0.01s 0.3s ease;
  -moz-transition: background 0.01s 0.3s ease;
  -webkit-transition: background 0.01s 0.3s ease;
  -o-transition: background 0.01s 0.3s ease;
  position: relative;
}
#header .burger label > span:before, #header .burger label > span:after {
  content: "";
  width: 24px;
  height: 2px;
  background: #8441e2;
  transition: top 0.3s 0.35s ease, transform 0.3s 0.05s ease;
  -moz-transition: top 0.3s 0.35s ease, transform 0.3s 0.05s ease;
  -webkit-transition: top 0.3s 0.35s ease, transform 0.3s 0.05s ease;
  -o-transition: top 0.3s 0.35s ease, transform 0.3s 0.05s ease;
  position: absolute;
  left: 0;
}
#header .burger label > span:before {
  top: -8px;
}
#header .burger label > span:after {
  top: 8px;
}
#header .burger .jcf-checked ~ label > span {
  background: transparent;
}
#header .burger .jcf-checked ~ label > span:after, #header .burger .jcf-checked ~ label > span:before {
  transition: top 0.2s 0.02s ease, transform 0.2s 0.3s ease;
  -moz-transition: top 0.2s 0.02s ease, transform 0.2s 0.3s ease;
  -webkit-transition: top 0.2s 0.02s ease, transform 0.2s 0.3s ease;
  -o-transition: top 0.2s 0.02s ease, transform 0.2s 0.3s ease;
  top: 0;
}
#header .burger .jcf-checked ~ label > span:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#header .burger .jcf-checked ~ label > span:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* @media screen and ( max-width: $desktop ), screen and ( max-device-width: $desktop ) {
    #header {
        #main-menu {
            .primary-menu {
                padding: 80px 0 40px;
                // width: 100%;
                height: 100%;
                // @include flex-flow(column nowrap);
                // @include justify-content(flex-start);
                display: block;

                background: $white;
                box-shadow: 0 0 30px rgba(0, 0, 0, .15);

                opacity: 0;

                position: fixed;
                top: 0;
                right: -100%;
                z-index: 1000;

                li {
                    margin: 0;
                    display: block;

                    border-bottom: 1px solid #ddd;

                    line-height: 16px;

                    &:first-of-type {
                        border-top: 1px solid #ddd;
                    }

                    &.active,
                    &:hover {
                        & > a {
                            box-shadow: inset 8px 0 #4fcefa;
                        }
                    }

                    a,
                    .active-lang {
                        padding: 20px 30px 20px 30px;

                        @include flex(1, 0, 0);

                        font-size: 18px;
                    }
                }
            }

            .secondary-menu {
                margin: 0 50px 0 0;
            }
        }

        .burger {
            display: block;

            @include translate(0, -50%);

            position: absolute;
            top: 50%;
            right: 20px;
            z-index: 1001;
        }
    }
}

@media screen and ( max-width: $desktop ) {
    #header {
        #main-menu {
            .primary-menu {
                width: auto;
            }
        }
    }
}

@media screen and ( max-device-width: $desktop ) {
    #header {
        #main-menu {
            .primary-menu {
                width: 100%;

                &.active {
                    .mobile-hide-menu {
                        padding-top: 80px;
                        // max-width: 381px;
                        width: 100%;
                        height: 80px;
                        display: block;

                        pointer-events: none;
                        background-color: $white;

                        position: fixed;
                        top: 0;
                        right: 0;
                        z-index: 1001;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
    #header #main-menu {
        .primary-menu {
            li.hidden-secondary {
                padding: 20px 30px 0 30px;
                display: block;

                border: none;

                &:hover,
                &.active {
                    box-shadow: none;
                }

                a {
                    padding: 0;
                    @include justify-content();
                    font-size: 12px;
                }

                .btn-gray-wolf-border:hover {
                    color: $white;
                }
            }
        }

        .secondary-menu {
            display: none;
        }
    }
}
 */
#footer {
  position: relative;
  padding: 80px 20px 100px;
  background: #7eaffc;
}
#footer.white {
  background: #fff;
  border-top: 1px solid #eee;
}
#footer.white .footer-container .mindhub-general p, #footer.white .footer-container .mindhub-general .copyright, #footer.white .footer-container .mindhub-contacts p, #footer.white .footer-container .mindhub-contacts .copyright {
  color: #666;
}
#footer.white .footer-container > div dl dt {
  color: #333;
}
#footer.white .footer-container > div dl dd a {
  color: #666;
  opacity: 0.6;
}
#footer .footer-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}
#footer .footer-container .mindhub-general {
  -webkit-flex: 4 0 40%;
  -moz-flex: 4 0 40%;
  -ms-flex: 4 0 40%;
  flex: 4 0 40%;
}
#footer .footer-container .mindhub-general p {
  margin: 20px 0 40px;
  max-width: 350px;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: #fff;
}
#footer .footer-container .mindhub-general .copyright {
  color: #fff;
  opacity: 0.6;
}
#footer .footer-container .mindhub-contacts .copyright {
  display: none;
  margin: 40px 0 0;
  color: #fff;
  opacity: 0.6;
}
#footer .footer-container > div {
  -webkit-flex: 2 0 20%;
  -moz-flex: 2 0 20%;
  -ms-flex: 2 0 20%;
  flex: 2 0 20%;
}
#footer .footer-container > div dl {
  margin: 0;
}
#footer .footer-container > div dl dt {
  margin: 0 0 20px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
}
#footer .footer-container > div dl dd {
  margin: 0 0 8px;
}
#footer .footer-container > div dl dd a {
  color: #fff;
  font-weight: 300;
  opacity: 0.8;
  font-size: 18px;
  transition: opacity 0.1s ease;
  -moz-transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  -o-transition: opacity 0.1s ease;
}
#footer .footer-container > div dl dd a:hover {
  opacity: 1;
}
#footer .footer-container > div dl dd.socials {
  margin: 30px 0 0 -5px;
  font-size: 0;
}
#footer .footer-container > div dl dd.socials a {
  display: inline-block;
}
#footer .footer-container > div dl dd.socials a img {
  margin: 0 5px;
}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  #footer .footer-container .mindhub-general {
    padding: 0 30px 0 0;
  }
  #footer .footer-container .mindhub-general p {
    max-width: none;
  }
  #footer .footer-container .mindhub-information, #footer .footer-container .mindhub-training {
    display: none;
  }
}
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  #footer {
    width: 100%;
    padding: 50px 20px;
  }
  #footer .footer-container {
    display: block;
  }
  #footer .footer-container > div {
    text-align: center;
  }
  #footer .footer-container > div dl dd.socials {
    margin: 20px 0 0;
  }
  #footer .footer-container .mindhub-general {
    display: block;
    padding: 0;
  }
  #footer .footer-container .mindhub-general img {
    margin: 0 auto;
  }
  #footer .footer-container .mindhub-general p {
    margin: 20px auto 30px;
  }
  #footer .footer-container .mindhub-general .copyright {
    display: none;
  }
  #footer .footer-container .mindhub-contacts {
    display: block;
  }
  #footer .footer-container .mindhub-contacts dt {
    display: none;
  }
  #footer .footer-container .mindhub-contacts .copyright {
    display: block;
  }
}
.std-text-button {
  text-decoration: underline;
  font-size: 13px;
  color: #adadad;
  text-transform: uppercase;
}
.std-text-button:hover {
  text-decoration: none;
  color: #adadad;
}

.std-button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  font: normal 500 14px/25px Rubik, Arial, sans-serif;
  text-transform: uppercase;
  padding: 0 30px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  border-radius: 5px;
  letter-spacing: 0.025em;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
}

.border-button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  font: normal 500 14px/25px Rubik, Arial, sans-serif;
  text-transform: uppercase;
  padding: 0 30px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  border-radius: 5px;
  letter-spacing: 0.025em;
  border: 2px solid;
  cursor: pointer;
  text-decoration: none !important;
}

/**/
.btn-gray-wolf-border {
  transition: background 0.1s ease, color 0.1s ease;
  -moz-transition: background 0.1s ease, color 0.1s ease;
  -webkit-transition: background 0.1s ease, color 0.1s ease;
  -o-transition: background 0.1s ease, color 0.1s ease;
  border-color: #555;
  color: #555;
}
.btn-gray-wolf-border:hover {
  background: #555;
  color: #fff;
}

.btn-white-bear-border {
  transition: background 0.1s ease, color 0.1s ease;
  -moz-transition: background 0.1s ease, color 0.1s ease;
  -webkit-transition: background 0.1s ease, color 0.1s ease;
  -o-transition: background 0.1s ease, color 0.1s ease;
  border-color: #fff;
  color: #fff;
}
.btn-white-bear-border:hover {
  background: #fff;
  color: #fff;
}
.btn-white-bear-border:hover {
  color: #87b1f2;
}

.btn-gray-fox-border {
  transition: background 0.1s ease, color 0.1s ease;
  -moz-transition: background 0.1s ease, color 0.1s ease;
  -webkit-transition: background 0.1s ease, color 0.1s ease;
  -o-transition: background 0.1s ease, color 0.1s ease;
  border-color: #bbb;
  color: #bbb;
}
.btn-gray-fox-border:hover {
  background: #bbb;
  color: #fff;
}

.btn-dolphin {
  transition: background 0.1s ease;
  -moz-transition: background 0.1s ease;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  background: #93b4e8;
}
.btn-dolphin:hover {
  background: #719de1;
  color: #fff;
}

.btn-purple-turtle {
  transition: background 0.1s ease;
  -moz-transition: background 0.1s ease;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  background: #ae99e9;
}
.btn-purple-turtle:hover {
  background: #9377e2;
  color: #fff;
}

.btn-gray-wolf {
  transition: background 0.1s ease;
  -moz-transition: background 0.1s ease;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  background: #555;
}
.btn-gray-wolf:hover {
  background: #414141;
  color: #fff;
}

.btn-white-bear {
  transition: background 0.1s ease;
  -moz-transition: background 0.1s ease;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  background: #fff;
  color: #87b1f2;
}
.btn-white-bear:hover {
  background: #ebebeb;
  color: #fff;
}
.btn-white-bear:hover {
  background: #8e90cc;
  color: #fff;
}

.btn-red-dragon {
  transition: background 0.1s ease;
  -moz-transition: background 0.1s ease;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  background: #f15f5f;
}
.btn-red-dragon:hover {
  background: #ee3939;
  color: #fff;
}

.btn-disabled-fish {
  transition: background 0.1s ease;
  -moz-transition: background 0.1s ease;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  background: #eee;
}
.btn-disabled-fish:hover {
  cursor: not-allowed;
}

.btn-dolphin-glow {
  box-shadow: 0 8px 30px rgba(147, 180, 232, 0.35);
}

.btn-gray-wolf-glow {
  box-shadow: 0 8px 30px rgba(85, 85, 85, 0.35);
}

.btn-blue-whale-glow {
  box-shadow: 0 8px 30px rgba(58, 86, 130, 0.35);
}

/**/
.btn-small {
  height: 40px;
  font: normal 500 12px/14px Rubik, Arial, sans-serif;
  padding: 0 20px;
}

.btn-medium {
  height: 50px;
}

/**/
.hidden {
  display: none;
}

.text-align-center {
  text-align: center;
}

.medium-bold {
  font-weight: 500;
}

.input-error-message {
  font-size: 12px;
  color: #ea7e7e;
  display: block;
  margin: 10px 0 0;
  line-height: 18px;
}

#fader {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 8000;
}

.hero-image {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  padding: 40px 20px;
  min-height: 350px;
  text-align: center;
}
.hero-image.junior {
  background: url(../../img/hero.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.hero-image.junior:before {
  background: rgba(255, 172, 36, 0.8);
}
.hero-image.middle {
  background: url(../../img/hero.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.hero-image.middle:before {
  background: rgba(0, 213, 137, 0.8);
}
.hero-image.senior {
  background: url(../../img/hero.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.hero-image.senior:before {
  background: rgba(0, 192, 214, 0.8);
}
.hero-image.demo {
  background: url(../../img/hero.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.hero-image.demo:before {
  background: rgba(132, 65, 226, 0.8);
}
.hero-image:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
}
.hero-image.translate {
  margin-top: -30px;
}
.hero-image h1, .hero-image span {
  position: relative;
  color: #fff;
}
.hero-image h1 a, .hero-image span a {
  color: #fff;
  text-decoration: underline;
}
.hero-image h1 a:hover, .hero-image span a:hover {
  text-decoration: none;
}
.hero-image h1 {
  font-size: 34px;
  margin: 0;
}
.hero-image span {
  font-size: 18px;
  font-weight: 400;
}
.hero-image .std-button {
  position: relative;
  margin-top: 30px;
}

.hero-text {
  position: relative;
  margin: -60px 0 70px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  padding: 30px;
  background: #fff;
  text-align: center;
}
.hero-text p {
  text-align: left;
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.hero-text p:first-of-type {
  margin: 0;
}
.hero-text .readmore {
  display: inline-block;
  border-radius: 30px;
  border: 1px solid #ddd;
  padding: 6px 20px;
  font-size: 12px;
  text-transform: uppercase;
  color: #a5a5a5;
  cursor: pointer;
  transition: border 0.1s ease, color 0.1s ease;
  -moz-transition: border 0.1s ease, color 0.1s ease;
  -webkit-transition: border 0.1s ease, color 0.1s ease;
  -o-transition: border 0.1s ease, color 0.1s ease;
}
.hero-text .readmore:hover {
  border: 1px solid #c4c4c4;
  color: #8c8c8c;
}

.trainings-list .training {
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  margin: 30px 0 0;
}
.trainings-list .training:first-of-type {
  margin: 0;
}
.trainings-list .training .heading {
  padding: 12px 12px 12px 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid #e7e7e7;
  background: #fdfdfd;
  position: relative;
}
.trainings-list .training .heading .group-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 0 70%;
  position: relative;
}
.trainings-list .training .heading .group-name > span {
  padding: 5px 10px 4px;
  max-width: 72px;
  pointer-events: none;
  font-size: 11px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -90px;
  z-index: 2;
}
.trainings-list .training .heading .group-name > span:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid;
  border-left: 10px solid transparent;
  position: absolute;
  bottom: -10px;
  left: 0;
}
.trainings-list .training .heading .group-name > span:after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 6px;
}
.trainings-list .training .heading .group-name > span.junior {
  background: #ffac24;
}
.trainings-list .training .heading .group-name > span.junior:before {
  border-top-color: #ffac24;
}
.trainings-list .training .heading .group-name > span.junior:after {
  background: -webkit-linear-gradient(45deg, #ffac24, rgba(0, 0, 0, 0.2)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #ffac24, rgba(0, 0, 0, 0.2)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #ffac24, rgba(0, 0, 0, 0.2)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #ffac24, rgba(0, 0, 0, 0.2)); /* Standard syntax (must be last)} */
}
.trainings-list .training .heading .group-name > span.middle {
  background: #00d589;
}
.trainings-list .training .heading .group-name > span.middle:before {
  border-top-color: #00d589;
}
.trainings-list .training .heading .group-name > span.middle:after {
  background: -webkit-linear-gradient(45deg, #00d589, rgba(0, 0, 0, 0.2)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #00d589, rgba(0, 0, 0, 0.2)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #00d589, rgba(0, 0, 0, 0.2)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #00d589, rgba(0, 0, 0, 0.2)); /* Standard syntax (must be last)} */
}
.trainings-list .training .heading .group-name > span.senior {
  background: #00c0d6;
}
.trainings-list .training .heading .group-name > span.senior:before {
  border-top-color: #00c0d6;
}
.trainings-list .training .heading .group-name > span.senior:after {
  background: -webkit-linear-gradient(45deg, #00c0d6, rgba(0, 0, 0, 0.2)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #00c0d6, rgba(0, 0, 0, 0.2)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #00c0d6, rgba(0, 0, 0, 0.2)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #00c0d6, rgba(0, 0, 0, 0.2)); /* Standard syntax (must be last)} */
}
.trainings-list .training .heading .group-name > span.teen-1 {
  background: #a92cfc;
}
.trainings-list .training .heading .group-name > span.teen-1:before {
  border-top-color: #a92cfc;
}
.trainings-list .training .heading .group-name > span.teen-1:after {
  background: -webkit-linear-gradient(45deg, #a92cfc, rgba(0, 0, 0, 0.2)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #a92cfc, rgba(0, 0, 0, 0.2)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #a92cfc, rgba(0, 0, 0, 0.2)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #a92cfc, rgba(0, 0, 0, 0.2)); /* Standard syntax (must be last)} */
}
.trainings-list .training .heading .group-name > span.teen-2 {
  background: #162ccb;
}
.trainings-list .training .heading .group-name > span.teen-2:before {
  border-top-color: #162ccb;
}
.trainings-list .training .heading .group-name > span.teen-2:after {
  background: -webkit-linear-gradient(45deg, #162ccb, rgba(0, 0, 0, 0.2)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #162ccb, rgba(0, 0, 0, 0.2)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #162ccb, rgba(0, 0, 0, 0.2)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #162ccb, rgba(0, 0, 0, 0.2)); /* Standard syntax (must be last)} */
}
.trainings-list .training .heading .group-name > span.teen-3 {
  background: #005418;
}
.trainings-list .training .heading .group-name > span.teen-3:before {
  border-top-color: #005418;
}
.trainings-list .training .heading .group-name > span.teen-3:after {
  background: -webkit-linear-gradient(45deg, #005418, rgba(0, 0, 0, 0.2)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #005418, rgba(0, 0, 0, 0.2)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #005418, rgba(0, 0, 0, 0.2)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #005418, rgba(0, 0, 0, 0.2)); /* Standard syntax (must be last)} */
}
.trainings-list .training .heading .group-name > span.demo {
  background: #8441e2;
}
.trainings-list .training .heading .group-name > span.demo:before {
  border-top-color: #8441e2;
}
.trainings-list .training .heading .group-name > span.demo:after {
  background: -webkit-linear-gradient(45deg, #8441e2, rgba(0, 0, 0, 0.2)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #8441e2, rgba(0, 0, 0, 0.2)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #8441e2, rgba(0, 0, 0, 0.2)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #8441e2, rgba(0, 0, 0, 0.2)); /* Standard syntax (must be last)} */
}
.trainings-list .training .heading .group-name a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.trainings-list .training .heading .group-name a strong {
  margin-right: 20px;
  display: block;
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: #666;
}
.trainings-list .training .heading .group-name a .tag-accelerated {
  padding: 6px 8px;
  border-radius: 12px;
  background-color: #bc56fd;
  background: linear-gradient(to bottom, rgb(189, 86, 253) 0%, rgb(189, 86, 253) 50%, rgb(171, 41, 252) 51%, rgb(171, 41, 252) 100%);
  font-weight: 600;
  font-size: 10px;
  color: #fff;
  line-height: 1;
}
.trainings-list .training .heading .group-name a .tag-accelerated::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  display: inline-block;
  background-image: url("../img/svg/icon-clock.svg");
  pointer-events: none;
  user-select: none;
  position: relative;
  bottom: -1px;
}
.trainings-list .training .heading .group-name a:hover strong {
  text-decoration: underline;
}
.trainings-list .training .heading .group-name p {
  margin: 0;
  font-size: 11px;
  color: #6f6f6f;
  left: 1.1em;
}
.trainings-list .training .heading .nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  -webkit-flex: 3 1 30%;
  -moz-flex: 3 1 30%;
  -ms-flex: 3 1 30%;
  flex: 3 1 30%;
  text-align: right;
  white-space: nowrap;
}
.trainings-list .training .heading .nav .std-button,
.trainings-list .training .heading .nav .std-text-button {
  width: 116px;
  margin: 0 2px;
  text-align: center;
}
.trainings-list .training .heading .nav .inappropriate-groups {
  margin: 0 0 0 20px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}
.trainings-list .training .heading .nav .inappropriate-groups .std-button {
  margin: 0;
}
.trainings-list .training .heading .nav .inappropriate-groups .std-button:hover + .tooltip {
  display: block;
}
.trainings-list .training .heading .nav .inappropriate-groups .tooltip {
  top: -50px;
  right: 0;
  left: auto;
}
.trainings-list .training .heading .nav .inappropriate-groups .tooltip:before {
  right: 30px;
  left: auto;
}
.trainings-list .training .heading .nav .inappropriate-groups .tooltip:after {
  right: 30px;
  left: auto;
}
@media screen and (max-width: 864px) {
  .trainings-list .training .additional-info ul {
    padding: 20px;
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
  }
}
@media screen and (min-width: 865px) {
  .trainings-list .training .additional-info ul {
    padding: 20px 30px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
}
.trainings-list .training .additional-info ul li {
  padding: 0 0 0 25px;
  text-transform: uppercase;
  position: relative;
}
@media screen and (max-width: 864px) {
  .trainings-list .training .additional-info ul li {
    margin: 20px 0 0;
  }
}
@media screen and (min-width: 865px) {
  .trainings-list .training .additional-info ul li {
    margin: 0 0 0 50px;
  }
}
.trainings-list .training .additional-info ul li:first-of-type {
  margin: 0;
}
.trainings-list .training .additional-info ul li.date {
  background: url(../img/svg/icon-calendar.svg) no-repeat left 2px;
  -webkit-background-size: 14px;
  -moz-background-size: 14px;
  -o-background-size: 14px;
  background-size: 14px;
}
.trainings-list .training .additional-info ul li.time {
  background: url(../img/svg/icon-clock.svg) no-repeat left 2px;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}
@media screen and (max-width: 864px) {
  .trainings-list .training .additional-info ul li.location {
    display: inline-block;
  }
}
@media screen and (min-width: 865px) {
  .trainings-list .training .additional-info ul li.location {
    background: url(../img/svg/icon-mappin.svg) no-repeat left 2px;
    -webkit-background-size: 14px;
    -moz-background-size: 14px;
    -o-background-size: 14px;
    background-size: 14px;
  }
}
.trainings-list .training .additional-info ul li.price {
  background: url(../img/svg/icon-dollar.svg) no-repeat left 2px;
  -webkit-background-size: 20px;
  -moz-background-size: 20px;
  -o-background-size: 20px;
  background-size: 20px;
}
.trainings-list .training .additional-info ul li.price strike {
  display: inline-block;
  margin: 0 5px 0 0;
}
.trainings-list .training .additional-info ul li.price strong {
  color: #60bb29;
  font-weight: 500;
}
.trainings-list .training .additional-info ul li span {
  display: block;
  font-size: 12px;
  color: #bbb;
  line-height: 18px;
}
.trainings-list .training .additional-info ul li p {
  margin: 0;
  font-size: 13px;
  color: #888;
  line-height: 16px;
}
.trainings-list .training .additional-info ul li p.more {
  border-bottom: 1px dotted #ccc;
  cursor: help;
}
.trainings-list .training .additional-info ul li p.more:hover + .tooltip {
  display: block;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .trainings-list .training .heading {
    padding: 15px;
    display: block;
    text-align: center;
  }
  .trainings-list .training .heading .group-name {
    display: block;
  }
  .trainings-list .training .heading .group-name > span {
    margin: 0 0 10px;
    display: inline-block;
    line-height: 17px;
    transform: initial;
    position: relative;
    top: initial;
    left: initial;
  }
  .trainings-list .training .heading .group-name > span:before, .trainings-list .training .heading .group-name > span:after {
    content: none;
  }
  .trainings-list .training .heading .group-name a {
    display: block;
    margin: 0 0 15px;
  }
  .trainings-list .training .heading .group-name a .tag-accelerated {
    margin: 6px auto;
  }
  .trainings-list .training .heading .nav {
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column-reverse nowrap;
    -moz-flex-flow: column-reverse nowrap;
    -ms-flex-flow: column-reverse nowrap;
    flex-flow: column-reverse nowrap;
    text-align: center;
  }
  .trainings-list .training .heading .nav .std-button {
    margin: 0 0 10px;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .trainings-list .training .heading .nav .inappropriate-groups {
    margin: 0 0 10px;
  }
  .trainings-list .training .heading .nav .inappropriate-groups .tooltip {
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    right: auto;
    left: 50%;
  }
  .trainings-list .training .heading .nav .inappropriate-groups .tooltip:before {
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    right: auto;
    left: 50%;
  }
  .trainings-list .training .heading .nav .inappropriate-groups .tooltip:after {
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    right: auto;
    left: 50%;
  }
}
.program-segments {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.program-segments .segment {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 0 31.33%;
  -moz-flex: 1 0 31.33%;
  -ms-flex: 1 0 31.33%;
  flex: 1 0 31.33%;
  margin: 0 0 0 3%;
  padding: 50px 30px 30px;
  background: #fff;
  text-align: center;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.06);
}
.program-segments .segment:first-of-type {
  margin: 0;
}
.program-segments .segment.junior:before {
  background: #ffac24;
}
.program-segments .segment.junior strong a {
  color: #ffac24;
}
.program-segments .segment.middle:before {
  background: #00d589;
}
.program-segments .segment.middle strong a {
  color: #00d589;
}
.program-segments .segment.senior:before {
  background: #00c0d6;
}
.program-segments .segment.senior strong a {
  color: #00c0d6;
}
.program-segments .segment:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  content: "";
}
.program-segments .segment .header {
  position: relative;
  display: block;
  margin: 0 0 35px;
  padding: 0 0 35px;
}
.program-segments .segment .header:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 3px;
  background: #e8e8e8;
  content: "";
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.program-segments .segment .header strong a, .program-segments .segment .header span {
  display: block;
  text-transform: uppercase;
}
.program-segments .segment .header strong a {
  font: normal 400 44px/48px "Fredoka One", Arial, sans-serif;
  margin: 0 0 8px;
  transition: opacity 0.1s ease;
  -moz-transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  -o-transition: opacity 0.1s ease;
}
.program-segments .segment .header strong a:hover {
  opacity: 0.9;
}
.program-segments .segment .header span {
  font-size: 14px;
  line-height: 24px;
  color: #aaa;
}
.program-segments .segment .information {
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
}
.program-segments .segment .information p {
  font-size: 16px;
  color: #999;
}
.program-segments .segment .footer {
  margin: 35px auto 0;
}
.program-segments .segment .footer .std-text-button {
  display: block;
  margin: 20px 0 0;
}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  .program-segments .segment {
    -webkit-flex: 0 1 48.5%;
    -moz-flex: 0 1 48.5%;
    -ms-flex: 0 1 48.5%;
    flex: 0 1 48.5%;
    margin-top: 40px;
  }
  .program-segments .segment:first-of-type {
    margin-top: 40px;
  }
  .program-segments .segment:nth-of-type(3n) {
    margin-left: 0;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .program-segments .segment {
    -webkit-flex: 0 1 100%;
    -moz-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    margin: 30px 0 0;
  }
}
.program-levels {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.program-levels .level {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 0 31.33%;
  -moz-flex: 1 0 31.33%;
  -ms-flex: 1 0 31.33%;
  flex: 1 0 31.33%;
  margin: 0 0 0 3%;
  padding: 50px 30px 30px;
  background: #fff;
  text-align: center;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.06);
}
.program-levels .level:first-of-type {
  margin: 0;
}
.program-levels .level.junior:before {
  background: #ffac24;
}
.program-levels .level.junior strong a {
  color: #ffac24;
}
.program-levels .level.middle:before {
  background: #00d589;
}
.program-levels .level.middle strong a {
  color: #00d589;
}
.program-levels .level.senior:before {
  background: #00c0d6;
}
.program-levels .level.senior strong a {
  color: #00c0d6;
}
.program-levels .level:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  content: "";
}
.program-levels .level .header {
  position: relative;
  display: block;
  margin: 0 0 35px;
  padding: 0 0 35px;
}
.program-levels .level .header:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 3px;
  background: #e8e8e8;
  content: "";
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.program-levels .level .header strong a, .program-levels .level .header span {
  display: block;
  text-transform: uppercase;
}
.program-levels .level .header strong a {
  font: normal 400 44px/48px "Fredoka One", Arial, sans-serif;
  margin: 0 0 8px;
  transition: opacity 0.1s ease;
  -moz-transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  -o-transition: opacity 0.1s ease;
}
.program-levels .level .header strong a:hover {
  opacity: 0.9;
}
.program-levels .level .header span {
  font-size: 14px;
  line-height: 24px;
  color: #aaa;
}
.program-levels .level .information {
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
}
.program-levels .level .information p {
  font-size: 16px;
  color: #999;
}
.program-levels .level .footer {
  margin: 35px auto 0;
}
.program-levels .level .footer .std-text-button {
  display: block;
  margin: 20px 0 0;
}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  .program-levels .level {
    -webkit-flex: 0 1 48.5%;
    -moz-flex: 0 1 48.5%;
    -ms-flex: 0 1 48.5%;
    flex: 0 1 48.5%;
    margin-top: 40px;
  }
  .program-levels .level:first-of-type {
    margin-top: 40px;
  }
  .program-levels .level:nth-of-type(3n) {
    margin-left: 0;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .program-levels .level {
    -webkit-flex: 0 1 100%;
    -moz-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    margin: 30px 0 0;
  }
}
.empty-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  background: #fff;
  padding: 30px;
  margin: 0;
}
.empty-list.borderless {
  border: none;
  box-shadow: none;
}

.notifications-center {
  max-width: 1200px;
  margin: 0 auto;
}

.alert {
  position: relative;
  border: 1px solid;
  padding: 20px;
  margin: 0 0 40px;
  border-radius: 3px;
}
.alert p {
  font-size: 16px;
  margin: 0;
}
.alert .alert-close {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  right: 20px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background: url(../img/svg/icon-cross.svg) no-repeat center center;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}
.alert .alert-close:hover {
  opacity: 0.8;
}
.alert.alert-success {
  background: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert.alert-success .alert-close {
  background: url(../img/svg/icon-cross-green.svg) no-repeat center center;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}
.alert.alert-error {
  background: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.alert.alert-error .alert-close {
  background: url(../img/svg/icon-cross-red.svg) no-repeat center center;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}
.alert.alert-warning {
  background: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}
.alert.alert-warning .alert-close {
  background: url(../img/svg/icon-cross-yellow.svg) no-repeat center center;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}

.topics-list {
  position: relative;
  padding: 60px 80px;
}
.topics-list .sub-heading {
  color: #444;
  text-align: center;
  margin: 0 0 40px;
  font: normal 700 30px/34px Rubik, Arial, sans-serif;
  text-transform: uppercase;
}
.topics-list .sub-heading + span {
  display: block;
  text-align: center;
  font-size: 20px;
  color: #ccc;
}
.topics-list .topic {
  position: relative;
  box-shadow: inset 2px 0 0 #e8e8e8;
  padding: 0 0 80px 50px;
}
.topics-list .topic:before {
  position: absolute;
  top: 0;
  left: -20px;
  width: 40px;
  height: 40px;
  background: #fff url(../img/svg/icon-bars.svg) no-repeat center center;
  -webkit-background-size: 14px 13px;
  -moz-background-size: 14px 13px;
  -o-background-size: 14px 13px;
  background-size: 14px 13px;
  border: 2px solid #e8e8e8;
  content: "";
  border-radius: 50%;
}
.topics-list .topic span {
  font-size: 13px;
  font-weight: 300;
  color: #bbb;
  display: block;
}
.topics-list .topic h2 {
  font-size: 24px;
  font-weight: 400;
  color: #666;
  margin: 0 0 15px;
}
.topics-list .topic p {
  font-size: 16px;
  font-weight: 300;
  color: #666;
  line-height: 25px;
  margin: 0;
}
.topics-list .topic:last-of-type {
  padding-bottom: 20px;
}
.topics-list .topic:last-of-type:after {
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #e8e8e8;
  content: "";
  border-radius: 50%;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .topics-list .topic {
    padding-bottom: 40px;
  }
}
.topics-list-level {
  position: relative;
  padding: 60px 80px;
}
.topics-list-level .sub-heading {
  color: #444;
  text-align: center;
  margin: 0 0 40px;
  font: normal 700 30px/34px Rubik, Arial, sans-serif;
  text-transform: uppercase;
}
.topics-list-level .sub-heading + span {
  display: block;
  text-align: center;
  font-size: 20px;
  color: #ccc;
}
.topics-list-level .topic-level {
  position: relative;
  box-shadow: inset 2px 0 0 #e8e8e8;
  padding: 0 0 80px 50px;
}
.topics-list-level .topic-level:before {
  position: absolute;
  top: 0;
  left: -20px;
  width: 40px;
  height: 40px;
  background: #fff url(../img/svg/icon-bars.svg) no-repeat center center;
  -webkit-background-size: 14px 13px;
  -moz-background-size: 14px 13px;
  -o-background-size: 14px 13px;
  background-size: 14px 13px;
  border: 2px solid #e8e8e8;
  content: "";
  border-radius: 50%;
}
.topics-list-level .topic-level span {
  font-size: 13px;
  font-weight: 300;
  color: #bbb;
  display: block;
}
.topics-list-level .topic-level h2 {
  font-size: 24px;
  font-weight: 400;
  color: #666;
  margin: 0 0 15px;
}
.topics-list-level .topic-level h2 a {
  color: #666;
  text-decoration: none;
  text-transform: uppercase;
}
.topics-list-level .topic-level h2 a:hover {
  color: #9f80ea;
  text-decoration: none;
}
.topics-list-level .topic-level h2 a:visited {
  color: #666;
  text-decoration: none;
}
.topics-list-level .topic-level h2:hover a {
  color: #9f80ea;
}
.topics-list-level .topic-level p {
  font-size: 16px;
  font-weight: 300;
  color: #666;
  line-height: 25px;
  margin: 0;
}
.topics-list-level .topic-level:last-of-type {
  padding-bottom: 20px;
}
.topics-list-level .topic-level:last-of-type:after {
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #e8e8e8;
  content: "";
  border-radius: 50%;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .topics-list-level .topic {
    padding-bottom: 40px;
  }
}
.modules-list .sub-heading {
  font-size: 30px;
  color: #444;
  text-align: center;
  font-weight: 700;
  margin: 0 0 15px;
  text-transform: uppercase;
}
.modules-list .sub-heading + .section-description {
  margin-bottom: 40px;
}
.modules-list .sub-heading + .section-description strong {
  font-weight: 500;
}
.modules-list ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}
.modules-list ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  align-items: center;
  margin: 10px 0 0;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  background: #fff;
}
.modules-list ul li .module-num {
  padding: 16px 25px;
  text-align: center;
  border-right: 1px solid #e7e7e7;
}
.modules-list ul li .module-num * {
  display: block;
}
.modules-list ul li .module-num strong {
  color: #999;
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
}
.modules-list ul li .module-num span {
  font-size: 14px;
  line-height: 24px;
  color: #d4d4d4;
  text-transform: uppercase;
}
.modules-list ul li .module-name {
  padding: 0 20px;
  font-size: 18px;
  color: #505050;
  -webkit-flex: 8 0 0;
  -moz-flex: 8 0 0;
  -ms-flex: 8 0 0;
  flex: 8 0 0;
  width: 100%;
}
.modules-list ul li .module-action {
  padding: 10px 20px;
  white-space: nowrap;
}
.modules-list ul li .module-action.junior a {
  color: #ffac24;
  border-color: #ffac24;
}
.modules-list ul li .module-action.junior a:hover {
  border-color: #f09500;
}
.modules-list ul li .module-action.middle a {
  color: #00d589;
  border-color: #00d589;
}
.modules-list ul li .module-action.middle a:hover {
  border-color: #00a268;
}
.modules-list ul li .module-action.senior a {
  color: #00c0d6;
  border-color: #00c0d6;
}
.modules-list ul li .module-action.senior a:hover {
  border-color: #0092a3;
}
.modules-list ul li .module-action a {
  display: block;
  padding: 8px 20px;
  border: 2px solid;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  transition: border, 0.1s, linear;
  -moz-transition: border, 0.1s, linear;
  -webkit-transition: border, 0.1s, linear;
  -o-transition: border, 0.1s, linear;
}
.modules-list ul li .module-action a:hover {
  text-decoration: none;
}
.modules-list ul li .module-action-level {
  padding: 10px 20px;
  white-space: nowrap;
}
.modules-list ul li .module-action-level.junior a {
  color: #ffac24;
  border-color: #ffac24;
}
.modules-list ul li .module-action-level.junior a:hover {
  border-color: #f09500;
}
.modules-list ul li .module-action-level.middle a {
  color: #00d589;
  border-color: #00d589;
}
.modules-list ul li .module-action-level.middle a:hover {
  border-color: #00a268;
}
.modules-list ul li .module-action-level.senior a {
  color: #00c0d6;
  border-color: #00c0d6;
}
.modules-list ul li .module-action-level.senior a:hover {
  border-color: #0092a3;
}
.modules-list ul li .module-action-level a {
  display: block;
  padding: 8px 20px;
  border: 2px solid;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  transition: border, 0.1s, linear;
  -moz-transition: border, 0.1s, linear;
  -webkit-transition: border, 0.1s, linear;
  -o-transition: border, 0.1s, linear;
}
.modules-list ul li .module-action-level a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  .modules-list ul li {
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    margin: 20px 0 0;
    padding: 20px;
    text-align: center;
  }
  .modules-list ul li .module-num {
    border: none;
    padding: 10px;
  }
  .modules-list ul li .module-name {
    padding: 0 20px 10px;
  }
}
.mentors {
  background: #f8f8f8;
  border-top: 1px solid #e3e3e3;
  padding: 40px 20px;
}
.mentors .sub-heading {
  font-size: 34px;
  color: #444;
  text-align: center;
  font-weight: 600;
  margin: 0 0 40px;
}
.mentors > ul {
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
}
.mentors > ul li {
  margin: 15px;
  text-align: center;
}
.mentors > ul li .mentor img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 15px;
}
.mentors > ul li .mentor strong {
  display: block;
  font-weight: 500;
}

.basic-form {
  /* Titles */
  /* Rows */
  /* Input Wrapper */
  /* Buttons Wrapper */
  /* Form Helpers - Remember Me, Forgot Password, etc. */
}
.basic-form.singular {
  max-width: 550px;
  margin: 40px auto 0;
  background: #fff;
  padding: 50px 50px 40px;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
}
.basic-form.with-tabs {
  position: relative;
  padding: 120px 50px 40px;
}
.basic-form .form-tabs {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  border-bottom: 1px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}
.basic-form .form-tabs li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex: 1 0 50%;
  -moz-flex: 1 0 50%;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  font: normal 700 18px/30px Rubik, Arial, sans-serif;
  text-transform: uppercase;
}
.basic-form .form-tabs li:not(.active) {
  background: #fcfcfc;
  color: #ccc;
}
.basic-form .form-tabs li:not(.active) a {
  color: #ccc;
}
.basic-form .form-tabs li:not(.active):first-of-type {
  box-shadow: inset -7px -3px 20px -7px rgba(0, 0, 0, 0.2);
}
.basic-form .form-tabs li:not(.active):last-of-type {
  box-shadow: inset 7px -3px 20px -7px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 1024px) {
  .basic-form .form-tabs li:not(.active):hover {
    background: #f3f3f3;
  }
}
.basic-form .form-tabs li.active {
  background-color: #fff;
  box-shadow: inset 0 8px 0 #61499b;
}
.basic-form .form-tabs li.active a {
  color: #666;
}
.basic-form .form-tabs li a {
  padding: 20px 10px;
  width: 100%;
  display: block;
  text-align: center;
}
.basic-form .section-title {
  font-size: 18px;
}
.basic-form .section-title.separator:after {
  width: 50px;
  height: 4px;
  bottom: -25px;
}
.basic-form .form-row {
  margin: 20px 0 0;
}
.basic-form .form-row:first-of-type {
  margin: 0;
}
.basic-form .input-wrapper {
  position: relative;
  border: 1px solid #e4e4e4;
  border-radius: 3px;
  padding: 0 20px 0 70px;
  background-color: #fff !important;
  transition: border 0.1s ease;
  -moz-transition: border 0.1s ease;
  -webkit-transition: border 0.1s ease;
  -o-transition: border 0.1s ease;
}
.basic-form .input-wrapper.noimg {
  padding: 0 20px;
}
.basic-form .input-wrapper.noimg:before {
  content: none;
}
.basic-form .input-wrapper input {
  padding: 0;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.basic-form .input-wrapper:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 55px;
  height: 100%;
  content: "";
  border-right: 1px solid #e5e5e5;
}
.basic-form .input-wrapper:hover {
  border: 1px solid #cecece;
}
.basic-form .input-wrapper .jcf-select {
  background-position: right center;
}
.basic-form .action-buttons-holder {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 30px 0 40px;
}
.basic-form .action-buttons-holder.active {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 30px 0 40px;
}
.basic-form .action-buttons-holder.active .btn-dolphin {
  background: #9060e5;
}
.basic-form .action-buttons-holder.active .btn-dolphin:hover {
  background: #8752e4;
}
.basic-form .form-helpers {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  margin: 35px 0;
}
.basic-form .form-helpers .remember-me {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.basic-form .form-helpers .remember-me label {
  margin: 0;
}
.basic-form .form-helpers .forgotten-password a {
  color: #666;
}
.basic-form .form-helpers .forgotten-password a:hover {
  text-decoration: underline;
}
.basic-form .input-user {
  position: relative;
  background: url(../../img/svg/icon-user.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-password {
  position: relative;
  background: url(../../img/svg/icon-locker.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-phone {
  position: relative;
  background: url(../../img/svg/icon-phone.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-email {
  position: relative;
  background: url(../../img/svg/icon-email2.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-location {
  position: relative;
  background: url(../../img/svg/icon-pin.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-hall {
  position: relative;
  background: url(../../img/svg/icon-building.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-payment {
  position: relative;
  background: url(../../img/svg/icon-payment.svg) no-repeat 18px center;
  -webkit-background-size: 20px 18px;
  -moz-background-size: 20px 18px;
  -o-background-size: 20px 18px;
  background-size: 20px 18px;
}
.basic-form .input-discount {
  position: relative;
  background: url(../../img/svg/icon-discount.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-calendar {
  position: relative;
  background: url(../../img/svg/icon-calendar.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-calendar.active {
  position: relative;
  background: url(../../img/svg/icon-calendar-green.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-ticket {
  position: relative;
  background: url(../../img/svg/icon-ticket.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .input-ticket.active {
  position: relative;
  background: url(../../img/svg/icon-ticket-green.svg) no-repeat 18px center;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  background-size: 18px 18px;
}
.basic-form .add-child-on-register {
  margin: 0 0 0;
  background: #fcfcfc;
  padding: 20px;
}
.basic-form .add-child-on-register .section-title {
  color: #444;
}
.basic-form .terms-and-conds {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 35px 0;
}
.basic-form .terms-and-conds a {
  color: #00c0d6;
}
.basic-form .terms-and-conds a:hover {
  text-decoration: underline;
}
.basic-form .terms-and-conds label {
  margin: 0;
}
.basic-form .use-generated-pass {
  margin: 30px 0 0;
  text-align: center;
}
.basic-form .use-generated-pass a {
  color: #00c0d6;
}
.basic-form .use-generated-pass a:hover {
  text-decoration: underline;
}
.basic-form .final-price {
  background: #fbfbfb;
  padding: 30px;
  margin: 20px 0 0;
  font-size: 18px;
}
.basic-form .final-price > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.basic-select {
  border: 1px solid #ccc;
}

@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  .basic-form.singular {
    padding: 30px;
  }
  .basic-form.with-tabs {
    padding: 100px 30px 30px;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .basic-form.singular {
    max-width: 100%;
  }
}
@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  .basic-form .form-tabs li {
    font: normal 500 14px/26px Rubik, Arial, sans-serif;
  }
  .basic-form .form-helpers {
    display: block;
    text-align: center;
    margin: 25px 0;
  }
  .basic-form .form-helpers .remember-me {
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 0 15px;
  }
  .basic-form .form-helpers .forgotten-password {
    display: block;
  }
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50.1%, -50.1%);
  -moz-transform: translate(-50.1%, -50.1%);
  -ms-transform: translate(-50.1%, -50.1%);
  -o-transform: translate(-50.1%, -50.1%);
  transform: translate(-50.1%, -50.1%);
  width: 90%;
  max-width: 640px;
  background: #fff;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  z-index: 9000;
}
.modal .modal-header {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background: #2d2d2d;
  padding: 20px;
}
.modal .modal-header strong {
  font: normal 500 14px/22px Rubik, Arial, sans-serif;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.modal .modal-header .modal-close {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.modal .modal-header .modal-close:hover {
  opacity: 0.8;
}
.modal .modal-header .modal-close img {
  width: 14px;
  height: 14px;
}
.modal .modal-content {
  padding: 20px;
}
.modal .modal-content .modal-section-heading {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 0 20px;
}
.modal .modal-content .modal-section-heading.mt15 {
  margin-top: 15px;
}
.modal .modal-content .modal-section-heading > * {
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.modal .modal-content .modal-section-heading strong {
  font: normal 600 14px/24px Rubik, Arial, sans-serif;
  color: #666;
}
.modal .modal-content .modal-section-heading > div {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.modal .modal-content .modal-section-heading > div svg {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.modal .modal-footer {
  border-top: 1px solid #eaeaea;
  padding: 15px 20px;
}
.modal .modal-footer ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.modal .modal-footer ul li {
  margin: 0 0 0 10px;
}
.modal .modal-footer ul li.remove-action {
  margin: 0 auto 0 0;
}

@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  .modal .modal-footer li a[data-modal-close] {
    display: none;
  }
}
.exit-intent-modal-container {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 8000;
}
.exit-intent-modal-container .exit-intent-modal {
  position: fixed;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 90%;
  max-width: 840px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  z-index: 9000;
}
.exit-intent-modal-container .exit-intent-modal .modal-close {
  position: absolute;
  top: -30px;
  right: 0;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.1s ease;
  -moz-transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  -o-transition: opacity 0.1s ease;
}
.exit-intent-modal-container .exit-intent-modal .modal-close:hover {
  opacity: 1;
}
.exit-intent-modal-container .exit-intent-modal .modal-close img {
  width: 18px;
  height: 18px;
}
.exit-intent-modal-container .exit-intent-modal .promo-hero-image {
  position: relative;
  -webkit-flex: 4 1 40%;
  -moz-flex: 4 1 40%;
  -ms-flex: 4 1 40%;
  flex: 4 1 40%;
  background: url(../img/course.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: 5px 0 0 5px;
}
.exit-intent-modal-container .exit-intent-modal .promo-hero-image:after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  background: rgba(255, 172, 36, 0.8);
  border-radius: 5px 0 0 5px;
}
.exit-intent-modal-container .exit-intent-modal .promo-hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-30%, -30%);
  -moz-transform: translate(-30%, -30%);
  -ms-transform: translate(-30%, -30%);
  -o-transform: translate(-30%, -30%);
  transform: translate(-30%, -30%);
  z-index: 10;
}
.exit-intent-modal-container .exit-intent-modal .promo-details {
  -webkit-flex: 6 1 60%;
  -moz-flex: 6 1 60%;
  -ms-flex: 6 1 60%;
  flex: 6 1 60%;
  background: #f5f5f5;
  text-align: center;
  padding: 50px 40px;
  border-radius: 0 5px 5px 0;
}
.exit-intent-modal-container .exit-intent-modal .promo-details h3 {
  color: #222;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 34px;
  margin: 0 0 25px;
}
.exit-intent-modal-container .exit-intent-modal .promo-details p {
  max-width: 320px;
  margin: 0 auto 30px;
  font-weight: 300;
  line-height: 34px;
  font-size: 22px;
  color: #333;
}
.exit-intent-modal-container .exit-intent-modal .promo-details p strong {
  font-weight: 500;
}
.exit-intent-modal-container .exit-intent-modal .promo-details span {
  display: block;
  margin: 0 0 15px;
  color: #949494;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font: 400 12px Arial, Rubik, sans-serif;
}
.exit-intent-modal-container .exit-intent-modal .promo-details .promo-code {
  position: relative;
  color: #fff;
  height: 60px;
  max-width: 230px;
  margin: 0 auto 40px;
  line-height: 46px;
  background: url(../img/prices/promo-code-bg.png) no-repeat center center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  text-transform: uppercase;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.exit-intent-modal-container .exit-intent-modal .promo-details .promo-code:after {
  position: absolute;
  bottom: -16px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 30px;
  height: 3px;
  background: #dcdcdc;
  content: "";
}

@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  .exit-intent-modal-container .exit-intent-modal {
    display: block;
  }
  .exit-intent-modal-container .exit-intent-modal .promo-hero-image {
    border-radius: 5px 5px 0 0;
  }
  .exit-intent-modal-container .exit-intent-modal .promo-hero-image:after {
    border-radius: 5px 5px 0 0;
  }
  .exit-intent-modal-container .exit-intent-modal .promo-hero-image img {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .exit-intent-modal-container .exit-intent-modal .promo-details {
    padding: 100px 40px 50px;
    border-radius: 5px;
  }
}
.tooltip {
  display: none;
  position: absolute;
  top: -35px;
  left: 0;
  padding: 10px 20px;
  min-width: 200px;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  font-size: 12px;
  white-space: nowrap;
}
.tooltip:before {
  position: absolute;
  bottom: -11px;
  left: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ccc;
}
.tooltip:after {
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}

#upcoming-trainings-subscribe-form {
  display: block;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
#upcoming-trainings-subscribe-form .field-email {
  margin-top: 20px;
  display: flex;
}
#upcoming-trainings-subscribe-form .field-email button, #upcoming-trainings-subscribe-form .field-email input {
  height: 48px;
}
#upcoming-trainings-subscribe-form .field-hall {
  display: block;
  padding: 0 12px 0 14px;
  border-radius: 6px;
  border: solid 1px #dcdcdc;
  background-color: #fff;
  font-weight: 300;
  color: #383736;
  line-height: 1;
}

.ua-tabs {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.ua-tabs ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.ua-tabs ul li {
  border-right: 1px solid #e6e6e6;
}
.ua-tabs ul li:first-of-type {
  border-left: 1px solid #e6e6e6;
}
.ua-tabs ul li a {
  position: relative;
  display: block;
  padding: 25px 30px;
  color: #999;
  transition: color 0.1s ease;
  -moz-transition: color 0.1s ease;
  -webkit-transition: color 0.1s ease;
  -o-transition: color 0.1s ease;
  margin: 0 0 -1px;
  font-size: 15px;
}
.ua-tabs ul li a.returning.active {
  background: #fcfcfc;
  font-weight: 500;
}
.ua-tabs ul li a:hover {
  color: #111;
}
.ua-tabs ul li a.active {
  background: #fcfcfc;
  font-weight: 500;
  color: #111;
}
.ua-tabs ul li a.soon {
  color: #dedede;
}
.ua-tabs ul li a span {
  position: absolute;
  top: -15px;
  left: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 25px;
  height: 25px;
  background: #ff9f2e;
  border-radius: 15px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.ua-tabs ul li a span.soon {
  background: #666;
  width: 70px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 400;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .ua-tabs ul li a {
    padding: 20px;
  }
}
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
  .ua-tabs ul li a {
    padding: 20px 15px;
  }
}
.parent-profile {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: #ac94e9 url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 200px;
}
.parent-profile > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.parent-profile > div img {
  border-radius: 50%;
  margin: 0 20px 0 0;
  box-shadow: 0 5px 50px rgba(255, 255, 255, 0.5);
}
.parent-profile > div div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  color: #fff;
  font-weight: 400;
}
.parent-profile > div div span {
  display: block;
  font-size: 16px;
}
.parent-profile > div div strong {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  .parent-profile {
    min-height: 120px;
  }
  .parent-profile > div img {
    display: none;
  }
  .parent-profile > div div {
    text-align: center;
  }
}
.section-hero-intro {
  position: relative;
  box-shadow: 0 2px 50px rgba(0, 0, 0, 0.2);
}
.section-hero-intro:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url(../img/home/party-pattern.png);
  background-repeat: no-repeat;
  background-color: #ac94e9;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.section-hero-intro:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s 1s ease;
  -moz-transition: opacity 0.5s 1s ease;
  -webkit-transition: opacity 0.5s 1s ease;
  -o-transition: opacity 0.5s 1s ease;
  z-index: 10;
}
.section-hero-intro.playing-video:after {
  opacity: 1;
}
.section-hero-intro .section-container {
  position: relative;
  max-width: 1100px;
  padding: 70px 20px 100px;
}
.section-hero-intro .section-container h2 {
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
  font-size: 46px;
  font-weight: 500;
  line-height: 50px;
}
.section-hero-intro .section-container h2 + p {
  color: #fff;
  font-size: 20px;
  max-width: 860px;
  text-align: center;
  line-height: 32px;
  font-weight: 300;
  margin: 0 auto;
}
.section-hero-intro .video-container {
  position: relative;
  top: 0;
  margin: 50px 0 0;
  padding-top: 56.25%;
  max-width: 100%;
  box-shadow: 0 20px 100px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 11;
  transition: top 0.3s ease, box-shadow 0.3s ease;
  -moz-transition: top 0.3s ease, box-shadow 0.3s ease;
  -webkit-transition: top 0.3s ease, box-shadow 0.3s ease;
  -o-transition: top 0.3s ease, box-shadow 0.3s ease;
}
.section-hero-intro .video-container:hover {
  top: -8px;
  box-shadow: 0 30px 140px rgba(0, 0, 0, 0.6);
}
.section-hero-intro .video-container.playing-video {
  top: -8px !important;
  box-shadow: 0 30px 140px rgba(0, 0, 0, 0.6) !important;
  padding-top: 56.25%;
}
.section-hero-intro .video-container img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
}
.section-hero-intro .video-container #what-is-mh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.section-free-lesson {
  position: relative;
  background: #736498;
}
.section-free-lesson:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url(../img/hero-demos.jpg) no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.08;
}
.section-free-lesson .section-container {
  position: relative;
  max-width: 1100px;
  padding: 70px 20px;
}
.section-free-lesson span {
  display: block;
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 5px;
}
.section-free-lesson strong {
  display: block;
  font-size: 34px;
  line-height: 38px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.section-free-lesson p {
  font-size: 18px;
  color: #fff;
  line-height: 30px;
  margin: 25px 0 0;
  font-weight: 300;
}
.section-free-lesson .signup-for-demo {
  position: absolute;
  right: 20px;
  top: 90px;
  width: 100%;
  text-align: right;
}
.section-free-lesson .signup-for-demo .selectize-control {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  font: normal 500 14px/25px Rubik, Arial, sans-serif;
  max-width: 200px;
  width: 100%;
  height: 50px;
  margin: 0 20px 0 0;
  background: url(../img/svg/icon-arrow-down-white.svg) no-repeat;
  background-position: calc(100% - 15px) center;
  -webkit-background-size: 12px;
  -moz-background-size: 12px;
  -o-background-size: 12px;
  background-size: 12px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  border-radius: 5px;
  border: 2px solid #fff;
  cursor: pointer;
  transition: background-color 0.1s ease;
  -moz-transition: background-color 0.1s ease;
  -webkit-transition: background-color 0.1s ease;
  -o-transition: background-color 0.1s ease;
}
.section-free-lesson .signup-for-demo .selectize-control:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-input {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 35px 0 15px;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-input input {
  display: none !important;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown {
  position: absolute;
  z-index: 1000;
  background: #fff;
  margin: 20px 0 0;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown:after {
  position: absolute;
  top: -10px;
  right: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown .option {
  border-top: 1px solid #ddd;
  padding: 10px 20px;
  font-weight: 400;
  color: #999;
  text-align: left;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown .option.selected {
  font-weight: 700;
  color: #333;
  background: #fcfcfc;
  border-radius: 5px 5px 0 0;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown .option:hover {
  background-color: #f9f9f9;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown .option:first-of-type {
  border-top: none;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown .option:first-of-type:hover {
  border-radius: 5px 5px 0 0;
}
.section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown .option:last-of-type:hover, .section-free-lesson .signup-for-demo .selectize-control .selectize-dropdown .option:last-of-type.selected {
  border-radius: 0 0 5px 5px;
}

.section-main-features {
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 2px 50px rgba(0, 0, 0, 0.06);
}
.section-main-features .features-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.section-main-features .features-list li {
  -webkit-flex: 1 0 33.33%;
  -moz-flex: 1 0 33.33%;
  -ms-flex: 1 0 33.33%;
  flex: 1 0 33.33%;
  padding: 0 20px;
  text-align: center;
}
.section-main-features .features-list li img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.section-main-features .features-list li strong {
  display: block;
  margin: 40px 0 20px;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}
.section-main-features .features-list li p {
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
}

.learn-with-mindhub .section-container {
  padding: 100px 20px 0;
}
.learn-with-mindhub .mindhub-in-action {
  margin: 50px 0 0;
}
.learn-with-mindhub .mindhub-in-action img {
  width: 100%;
}
.learn-with-mindhub .mindhub-in-action .gallery-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid.flex-7 {
  -webkit-flex: 7 0 70%;
  -moz-flex: 7 0 70%;
  -ms-flex: 7 0 70%;
  flex: 7 0 70%;
}
.learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid.flex-3 {
  -webkit-flex: 3 0 30%;
  -moz-flex: 3 0 30%;
  -ms-flex: 3 0 30%;
  flex: 3 0 30%;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}
.learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid figure {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 2px;
  box-shadow: inset 0 0 0 2px #fff;
}
.learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid figure.first-lead {
  background: url(../img/index-gallery/img1.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid figure.second-lead {
  background: url(../img/index-gallery/img4.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid figure figcaption {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: calc(100% - 4px);
  background: rgba(0, 0, 0, 0.6);
  padding: 15px 20px;
  font-size: 14px;
  color: #fff;
}

.section-starting-trainings .trainings-list, .section-starting-trainings .flex-h-container {
  margin: 60px 0 0;
}

.section-tools {
  position: relative;
  background: url(../img/home/tools.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.section-tools:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  background: rgba(132, 65, 226, 0.8);
}
.section-tools .section-container {
  position: relative;
  z-index: 10;
}
.section-tools .section-container .section-description {
  color: #fff;
}
.section-tools .section-container .section-description a {
  color: #fff;
  text-decoration: underline;
}
.section-tools .section-container .section-description a:hover {
  text-decoration: none;
}
.section-tools .section-container .used-tools {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 60px 0 0;
}
.section-tools .section-container .used-tools li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  text-align: center;
}
.section-tools .section-container .used-tools li img {
  width: 120px;
  height: 120px;
}
.section-tools .section-container .used-tools li span {
  display: block;
  margin: 30px 0 0;
  font-size: 20px;
  line-height: 30px;
  text-transform: uppercase;
  color: #fff;
}

.section-program-segments .program-segments {
  margin: 80px 0 0;
}

.section-testimonials {
  position: relative;
  background: url(../img/home/happy-parent.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.section-testimonials:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  background: rgba(132, 65, 226, 0.8);
}
.section-testimonials .section-container {
  position: relative;
  z-index: 10;
}
.section-testimonials .section-container .section-description {
  color: #fff;
}
.section-testimonials .section-container .section-description a {
  color: #fff;
  text-decoration: underline;
}
.section-testimonials .section-container .section-description a:hover {
  text-decoration: none;
}
.section-testimonials .section-container .testimonials-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 80px 0 0;
}
.section-testimonials .section-container .testimonials-container .testimonial {
  position: relative;
  -webkit-flex: 1 0 47.5%;
  -moz-flex: 1 0 47.5%;
  -ms-flex: 1 0 47.5%;
  flex: 1 0 47.5%;
  margin: 0 0 0 5%;
  padding: 50px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 5px;
}
.section-testimonials .section-container .testimonials-container .testimonial:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  content: "";
  background: #fff url(../img/svg/icon-quotes.svg) no-repeat center center;
  -webkit-background-size: 30px;
  -moz-background-size: 30px;
  -o-background-size: 30px;
  background-size: 30px;
  border-radius: 50%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate(-35%, -35%);
  -moz-transform: translate(-35%, -35%);
  -ms-transform: translate(-35%, -35%);
  -o-transform: translate(-35%, -35%);
  transform: translate(-35%, -35%);
}
.section-testimonials .section-container .testimonials-container .testimonial:first-of-type {
  margin: 0;
}
.section-testimonials .section-container .testimonials-container .testimonial p {
  font-size: 18px;
  line-height: 30px;
  margin: 15px 0;
}
.section-testimonials .section-container .testimonials-container .testimonial span {
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
}

.section-news .news-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 120px 0 0;
}
.section-news .news-container .news-story {
  -webkit-flex: 1 0 47.5%;
  -moz-flex: 1 0 47.5%;
  -ms-flex: 1 0 47.5%;
  flex: 1 0 47.5%;
  margin: 0 0 0 5%;
  padding: 50px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
  background: #fff;
}
.section-news .news-container .news-story:first-of-type {
  margin: 0;
}
.section-news .news-container .news-story h3 a {
  font: normal 500 24px/30px Rubik, Arial, sans-serif;
  color: #444;
}
.section-news .news-container .news-story h3 a:hover {
  text-decoration: underline;
}
.section-news .news-container .news-story h3 + p {
  font-size: 18px;
  line-height: 30px;
  margin: 15px 0 0;
}
.section-news .news-container .news-story h3 + p a {
  color: #00c0d6;
  text-decoration: underline;
}
.section-news .news-container .news-story h3 + p a:hover {
  text-decoration: none;
}
.section-news .news-container .news-story .author {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 30px 0 0;
}
.section-news .news-container .news-story .author .author-photo {
  margin: 0 20px 0 0;
}
.section-news .news-container .news-story .author .author-photo img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.section-news .news-container .news-story .author .author-info {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  font-size: 16px;
  color: #999;
}
.section-news .news-container .news-story .author .author-info strong {
  font-weight: 500;
}
.section-news .news-container .news-story .author .author-info span {
  color: #c9c9c9;
  font-weight: 300;
  line-height: 20px;
}

.section-getstarted-bottom .section-container {
  padding-top: 20px;
}
.section-getstarted-bottom .flex-h-container {
  margin: 60px 0 0;
}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  .learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid.flex-7 {
    -webkit-flex: 6 0 60%;
    -moz-flex: 6 0 60%;
    -ms-flex: 6 0 60%;
    flex: 6 0 60%;
  }
  .learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid.flex-3 {
    -webkit-flex: 4 0 40%;
    -moz-flex: 4 0 40%;
    -ms-flex: 4 0 40%;
    flex: 4 0 40%;
  }
  .section-news .news-container, .section-testimonials .section-container .testimonials-container {
    display: block;
  }
  .section-news .news-container .news-story, .section-testimonials .section-container .testimonials-container .news-story {
    margin: 30px 0 0;
  }
  .section-news .news-container .testimonial, .section-testimonials .section-container .testimonials-container .testimonial {
    padding: 30px 40px;
    margin: 70px 0 0;
  }
  .section-news .news-container .testimonial:before, .section-testimonials .section-container .testimonials-container .testimonial:before {
    width: 70px;
    height: 70px;
    left: 30px;
    -webkit-background-size: 25px;
    -moz-background-size: 25px;
    -o-background-size: 25px;
    background-size: 25px;
    -webkit-transform: translate(0, -60%);
    -moz-transform: translate(0, -60%);
    -ms-transform: translate(0, -60%);
    -o-transform: translate(0, -60%);
    transform: translate(0, -60%);
  }
}
@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
  .section-free-lesson {
    text-align: center;
  }
  .section-free-lesson .signup-for-demo {
    position: relative;
    top: 0;
    right: 0;
    margin: 30px 0 0;
    text-align: center;
  }
}
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  .section-main-features .features-list, .section-tools .section-container .used-tools {
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
  }
  .section-main-features .features-list li, .section-tools .section-container .used-tools li {
    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    margin: 60px 0 0;
  }
  .section-main-features .features-list li:first-of-type, .section-tools .section-container .used-tools li:first-of-type {
    margin: 0;
  }
  .learn-with-mindhub .mindhub-in-action .gallery-row {
    display: block;
  }
  .learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid figure.first-lead,
  .learn-with-mindhub .mindhub-in-action .gallery-row .flex-grid figure.second-lead {
    display: table;
    padding-top: 100%;
  }
}
@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  .section-free-lesson .signup-for-demo > * {
    width: 100%;
    margin: 20px 0 0;
  }
  .section-free-lesson .signup-for-demo .selectize-control {
    max-width: none;
  }
  .section-free-lesson .signup-for-demo .std-button {
    display: block;
    line-height: 50px;
  }
}
#page.prices .page-container {
  padding-top: 80px;
}
#page.prices .page-container .plans-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 50px 0 0;
}
#page.prices .page-container .plans-list .plan {
  position: relative;
  -webkit-flex: 1 0 50%;
  -moz-flex: 1 0 50%;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  margin: 0 0 0 3%;
  max-width: 400px;
  padding: 0 0 100px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  text-align: center;
}
#page.prices .page-container .plans-list .plan:first-of-type {
  margin: 0;
}
#page.prices .page-container .plans-list .plan.demo .header {
  background: #41dc8e;
}
#page.prices .page-container .plans-list .plan.demo .header:after {
  background: #41dc8e;
}
#page.prices .page-container .plans-list .plan.demo .information .summary .price {
  color: #41dc8e;
}
#page.prices .page-container .plans-list .plan.regular .header {
  background: #349fde;
}
#page.prices .page-container .plans-list .plan.regular .header:after {
  background: #349fde;
}
#page.prices .page-container .plans-list .plan.regular .information .summary .price {
  color: #349fde;
}
#page.prices .page-container .plans-list .plan .header {
  position: relative;
  display: block;
  padding: 20px 15px;
  color: #fff;
  margin: -1px;
}
#page.prices .page-container .plans-list .plan .header strong, #page.prices .page-container .plans-list .plan .header span {
  display: block;
  text-transform: uppercase;
}
#page.prices .page-container .plans-list .plan .header strong {
  font-size: 26px;
  line-height: 34px;
}
#page.prices .page-container .plans-list .plan .header span {
  font-size: 14px;
}
#page.prices .page-container .plans-list .plan .information {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 50px 25px 40px;
}
#page.prices .page-container .plans-list .plan .information .summary .basic-form {
  margin: 20px 0;
}
#page.prices .page-container .plans-list .plan .information .summary .price {
  margin-top: 30px;
  text-transform: uppercase;
  font-size: 0;
  font-weight: 700;
  line-height: 30px;
}
#page.prices .page-container .plans-list .plan .information .summary .price span {
  font-size: 48px;
}
#page.prices .page-container .plans-list .plan .information .summary .price span:last-of-type {
  font-size: 18px;
  margin: 0 0 0 4px;
  font-weight: 400;
}
#page.prices .page-container .plans-list .plan .information .summary .duration {
  display: block;
  color: #ccc;
  text-transform: uppercase;
}
#page.prices .page-container .plans-list .plan .information .summary p {
  font-weight: 300;
  font-size: 16px;
}
#page.prices .page-container .plans-list .plan .information .summary .modules > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 10px 0 0;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#page.prices .page-container .plans-list .plan .information .summary .modules > div:first-of-type {
  margin: 40px 0 0;
}
#page.prices .page-container .plans-list .plan .information .summary .modules > div span {
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  border-left: 1px solid #e6e6e6;
  color: #aaa;
  background: #fff;
  border-radius: 0 5px 5px 0;
  font-size: 14px;
  padding: 10px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background, 0.1s, linear;
  -moz-transition: background, 0.1s, linear;
  -webkit-transition: background, 0.1s, linear;
  -o-transition: background, 0.1s, linear;
}
#page.prices .page-container .plans-list .plan .information .summary .modules > div span:first-of-type {
  border: none;
  border-radius: 5px 0 0 5px;
}
#page.prices .page-container .plans-list .plan .information .summary .modules > div span.active, #page.prices .page-container .plans-list .plan .information .summary .modules > div span.active:hover {
  background: #fbd96c;
  box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.08);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
#page.prices .page-container .plans-list .plan .information .summary .modules > div span:hover {
  background: #f9f9f9;
}
#page.prices .page-container .plans-list .plan .footer {
  position: absolute;
  bottom: 40px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 70%;
  margin: 50px auto 0;
}
#page.prices .page-container .plans-list .plan .footer .border-button {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  #page.prices .page-container .plans-list .plan {
    margin-top: 40px;
  }
  #page.prices .page-container .plans-list .plan:first-of-type {
    margin-top: 40px;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #page.prices .page-container .plans-list {
    display: block;
  }
  #page.prices .page-container .plans-list .plan {
    max-width: 100%;
    margin: 0;
    margin-top: 30px;
  }
}
#page.segments {
  overflow: hidden;
  position: relative;
  background: #fcfcfc;
}
#page.segments:before {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 600px;
  background: url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  content: "";
  z-index: 1;
  -webkit-transform: skewY(10deg) rotate(-8deg);
  -moz-transform: skewY(10deg) rotate(-8deg);
  -ms-transform: skewY(10deg) rotate(-8deg);
  -o-transform: skewY(10deg) rotate(-8deg);
  transform: skewY(10deg) rotate(-8deg);
}
#page.segments .page-container {
  position: relative;
  z-index: 3;
}
#page.segments .headings {
  text-align: center;
  margin: 80px 0;
}
#page.segments .headings h1 {
  font-size: 40px;
  line-height: 40px;
  color: #fff;
  font-weight: 500;
  margin: 0 0 20px;
}
#page.segments .headings p {
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}

@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
  #page.segments .headings {
    margin: 60px 0 0;
  }
  #page.segments .headings h1 {
    font-size: 30px;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #page.segments:before {
    top: 0;
    left: 0;
    height: 640px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
#page.segment {
  background: #fcfcfc;
}
#page.segment .hero-image h1 {
  font: normal 400 50px/50px "Fredoka One", Arial, sans-serif;
  text-transform: uppercase;
}
#page.segment .hero-image .std-button {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
#page.segment .hero-image.junior .std-button {
  color: #ffac24;
}
#page.segment .hero-image.junior .std-button:hover {
  background: #ffac24;
  color: #fff;
}
#page.segment .hero-image.middle .std-button {
  color: #00d589;
}
#page.segment .hero-image.middle .std-button:hover {
  background: #00d589;
  color: #fff;
}
#page.segment .hero-image .senior .std-button {
  color: #00c0d6;
}
#page.segment .hero-image .senior .std-button:hover {
  background: #00c0d6;
  color: #fff;
}

#page.levels {
  overflow: hidden;
  position: relative;
  background: #fcfcfc;
}
#page.levels:before {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 600px;
  background: url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  content: "";
  z-index: 1;
  -webkit-transform: skewY(10deg) rotate(-8deg);
  -moz-transform: skewY(10deg) rotate(-8deg);
  -ms-transform: skewY(10deg) rotate(-8deg);
  -o-transform: skewY(10deg) rotate(-8deg);
  transform: skewY(10deg) rotate(-8deg);
}
#page.levels .page-container {
  position: relative;
  z-index: 3;
}
#page.levels .headings {
  text-align: center;
  margin: 80px 0;
}
#page.levels .headings h1 {
  font-size: 40px;
  line-height: 40px;
  color: #fff;
  font-weight: 500;
  margin: 0 0 20px;
}
#page.levels .headings p {
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}

@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
  #page.levels .headings {
    margin: 60px 0 0;
  }
  #page.levels .headings h1 {
    font-size: 30px;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #page.levels:before {
    top: 0;
    left: 0;
    height: 640px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
.badge {
  padding: 0.25em 0.4em;
  font-size: 50%;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1px;
  vertical-align: baseline;
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  right: 0;
  /* text-align: center; */
  padding-top: 5px;
  line-height: 15px;
}

.badge.badge-new {
  color: white;
  background-color: #ac93e9;
  border-radius: 20px;
  width: 25px;
  height: 25px;
}

#page.level {
  background: #fcfcfc;
}
#page.level .hero-image h1 {
  font: normal 400 50px/50px "Fredoka One", Arial, sans-serif;
  text-transform: uppercase;
}
#page.level .hero-image .std-button {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
#page.level .hero-image.junior .std-button {
  color: #ffac24;
}
#page.level .hero-image.junior .std-button:hover {
  background: #ffac24;
  color: #fff;
}
#page.level .hero-image.middle .std-button {
  color: #00d589;
}
#page.level .hero-image.middle .std-button:hover {
  background: #00d589;
  color: #fff;
}
#page.level .hero-image .senior .std-button {
  color: #00c0d6;
}
#page.level .hero-image .senior .std-button:hover {
  background: #00c0d6;
  color: #fff;
}
#page.level .module-description {
  position: relative;
  padding: 50px 80px;
  margin: 80px 0 0;
  background: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#page.level .module-description > span {
  background: #222;
  padding: 8px 15px 7px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#page.level .module-description .duration {
  text-align: center;
  text-transform: uppercase;
  color: #ccc;
}
#page.level .module-description > h2 {
  font-weight: 500;
  text-transform: none;
}
#page.level .module-description > p {
  font-size: 16px;
  line-height: 28px;
}
#page.level .module-description > p br {
  line-height: 40px;
}

#page.module .hero-image {
  min-height: 250px;
}
#page.module .hero-image h1 {
  font: normal 400 50px/50px "Fredoka One", Arial, sans-serif;
  text-transform: uppercase;
}
#page.module .hero-image .std-button {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
#page.module .hero-image.junior .std-button {
  color: #ffac24;
}
#page.module .hero-image.junior .std-button:hover {
  background: #ffac24;
  color: #fff;
}
#page.module .hero-image.middle .std-button {
  color: #00d589;
}
#page.module .hero-image.middle .std-button:hover {
  background: #00d589;
  color: #fff;
}
#page.module .hero-image .senior .std-button {
  color: #00c0d6;
}
#page.module .hero-image .senior .std-button:hover {
  background: #00c0d6;
  color: #fff;
}
#page.module .module-description {
  position: relative;
  padding: 50px 80px;
  margin: 80px 0 0;
  background: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#page.module .module-description > span {
  background: #222;
  padding: 8px 15px 7px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#page.module .module-description .duration {
  text-align: center;
  text-transform: uppercase;
  color: #ccc;
}
#page.module .module-description > h2 {
  font-weight: 500;
  text-transform: none;
}
#page.module .module-description > p {
  font-size: 16px;
  line-height: 28px;
}
#page.module .module-description > p br {
  line-height: 40px;
}

#page.starting-trainings .filter-groups-returning, #page.contact-center .filter-groups-returning {
  margin: 0 0 30px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#page.starting-trainings .filter-groups-returning ul, #page.contact-center .filter-groups-returning ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#page.starting-trainings .filter-groups-returning ul li:not(:first-of-type), #page.contact-center .filter-groups-returning ul li:not(:first-of-type) {
  margin: 0 0 0 1.5%;
}
#page.starting-trainings .filter-groups-returning ul li a, #page.contact-center .filter-groups-returning ul li a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 50px;
  padding: 0 20px;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #aaa;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
  -moz-transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
  -webkit-transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
  -o-transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li a:hover, #page.contact-center .filter-groups-returning ul li a:hover {
    border: 1px solid #888;
    color: #888;
  }
}
#page.starting-trainings .filter-groups-returning ul li.active .junior, #page.contact-center .filter-groups-returning ul li.active .junior {
  border-color: #ffac24;
  background-color: #ffac24;
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li .junior:hover, #page.contact-center .filter-groups-returning ul li .junior:hover {
    border-color: #ffac24;
    background-color: #ffac24;
    color: #fff;
  }
}
#page.starting-trainings .filter-groups-returning ul li.active .middle, #page.contact-center .filter-groups-returning ul li.active .middle {
  border-color: #00d589;
  background-color: #00d589;
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li .middle:hover, #page.contact-center .filter-groups-returning ul li .middle:hover {
    border-color: #00d589;
    background-color: #00d589;
    color: #fff;
  }
}
#page.starting-trainings .filter-groups-returning ul li.active .senior, #page.contact-center .filter-groups-returning ul li.active .senior {
  background-color: #00c0d6;
  border-color: #00c0d6;
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li .senior:hover, #page.contact-center .filter-groups-returning ul li .senior:hover {
    border-color: #00c0d6;
    background-color: #00c0d6;
    color: #fff;
  }
}
#page.starting-trainings .filter-groups-returning ul li.active .teen-1, #page.contact-center .filter-groups-returning ul li.active .teen-1 {
  background-color: #a92cfc;
  border-color: #a92cfc;
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li .teen-1:hover, #page.contact-center .filter-groups-returning ul li .teen-1:hover {
    border-color: #ffac24;
    background-color: #ffac24;
    color: #fff;
  }
}
#page.starting-trainings .filter-groups-returning ul li.active .teen-2, #page.contact-center .filter-groups-returning ul li.active .teen-2 {
  background-color: #162ccb;
  border-color: #162ccb;
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li .teen-2:hover, #page.contact-center .filter-groups-returning ul li .teen-2:hover {
    border-color: #162ccb;
    background-color: #162ccb;
    color: #fff;
  }
}
#page.starting-trainings .filter-groups-returning ul li.active .teen-3, #page.contact-center .filter-groups-returning ul li.active .teen-3 {
  background-color: #005418;
  border-color: #005418;
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li .teen-3:hover, #page.contact-center .filter-groups-returning ul li .teen-3:hover {
    border-color: #005418;
    background-color: #005418;
    color: #fff;
  }
}
#page.starting-trainings .filter-groups-returning ul li.active .demo, #page.contact-center .filter-groups-returning ul li.active .demo {
  background-color: #8441e2;
  border-color: #8441e2;
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .filter-groups-returning ul li .demo:hover, #page.contact-center .filter-groups-returning ul li .demo:hover {
    border-color: #8441e2;
    background-color: #8441e2;
    color: #fff;
  }
}
#page.starting-trainings .filter-groups-returning .jcf-select, #page.contact-center .filter-groups-returning .jcf-select {
  width: 300px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 50px;
  font-size: 12px;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: border 0.1s ease, color 0.1s ease;
  -moz-transition: border 0.1s ease, color 0.1s ease;
  -webkit-transition: border 0.1s ease, color 0.1s ease;
  -o-transition: border 0.1s ease, color 0.1s ease;
}
#page.starting-trainings .filter-groups-returning .jcf-select:hover, #page.contact-center .filter-groups-returning .jcf-select:hover {
  border: 1px solid #888;
  color: #888;
}
#page.starting-trainings .filter-groups-returning .jcf-select .jcf-reset-appearance, #page.contact-center .filter-groups-returning .jcf-select .jcf-reset-appearance {
  z-index: 1;
  cursor: pointer;
}
#page.starting-trainings .filter-groups-returning .jcf-select .jcf-select-text, #page.contact-center .filter-groups-returning .jcf-select .jcf-select-text {
  margin: 0 0 0 20px;
  color: #aaa;
}
#page.starting-trainings .filter-groups-returning .jcf-select .jcf-select-opener, #page.contact-center .filter-groups-returning .jcf-select .jcf-select-opener {
  right: 20px;
}

#page.starting-trainings .hero-image {
  background: url(../../img/hero-demos.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.starting-trainings .hero-image:before {
  background: rgba(132, 65, 226, 0.8);
}
#page.starting-trainings .hero-image h1 {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: 40px;
  color: #fff;
  line-height: 40px;
}
#page.starting-trainings .hero-image span {
  max-width: 900px;
  margin: 0 auto;
  display: block;
  font-size: 16px;
  color: #fff;
  line-height: 28px;
}
#page.starting-trainings .page-container {
  margin-top: 50px;
}
#page.starting-trainings .page-container .filter-groups {
  margin: 0 0 30px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#page.starting-trainings .page-container .filter-groups ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#page.starting-trainings .page-container .filter-groups ul li:not(:first-of-type) {
  margin: 0 0 0 1.5%;
}
#page.starting-trainings .page-container .filter-groups ul li:first-of-type {
  margin: 0 25px 0 0;
}
#page.starting-trainings .page-container .filter-groups ul li:first-of-type.active a {
  border-color: #7eaffc;
  background: #7eaffc;
  color: #fff;
}
#page.starting-trainings .page-container .filter-groups ul li.active .junior {
  border-color: #ffac24;
  background: #ffac24;
  color: #fff;
}
#page.starting-trainings .page-container .filter-groups ul li.active .middle {
  border-color: #00d589;
  background: #00d589;
  color: #fff;
}
#page.starting-trainings .page-container .filter-groups ul li.active .senior {
  border-color: #00c0d6;
  background: #00c0d6;
  color: #fff;
}
#page.starting-trainings .page-container .filter-groups ul li.active .demo {
  border-color: #8441e2;
  background: #8441e2;
  color: #fff;
}
#page.starting-trainings .page-container .filter-groups ul li a {
  padding: 0 20px;
  height: 34px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 50px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: #aaa;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  transition: border 0.1s ease, color 0.1s ease;
  -moz-transition: border 0.1s ease, color 0.1s ease;
  -webkit-transition: border 0.1s ease, color 0.1s ease;
  -o-transition: border 0.1s ease, color 0.1s ease;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .page-container .filter-groups ul li a:hover {
    border: 1px solid #888;
    color: #888;
  }
}
#page.starting-trainings .page-container .filter-groups .jcf-select {
  width: 170px;
  height: 34px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: #aaa;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border 0.1s ease, color 0.1s ease;
  -moz-transition: border 0.1s ease, color 0.1s ease;
  -webkit-transition: border 0.1s ease, color 0.1s ease;
  -o-transition: border 0.1s ease, color 0.1s ease;
}
@media screen and (min-device-width: 1200px) {
  #page.starting-trainings .page-container .filter-groups .jcf-select:hover {
    border: 1px solid #888;
    color: #888;
  }
}
#page.starting-trainings .page-container .filter-groups .jcf-select .jcf-reset-appearance {
  cursor: pointer;
  z-index: 1;
}
#page.starting-trainings .page-container .filter-groups .jcf-select .jcf-select-text {
  margin: 0 0 0 20px;
  color: #aaa;
}
#page.starting-trainings .page-container .filter-groups .jcf-select .jcf-select-opener {
  right: 20px;
}

/*********************************
	New style for age tags
*********************************/
.all {
  color: #a92cfc;
}

.junior {
  color: #ffac24;
}

.middle {
  color: #00d589;
}

.senior {
  color: #00c0d6;
}

.teen-1 {
  color: #a92cfc;
}

.teen-2 {
  color: #162ccb;
}

.teen-3 {
  color: #005418;
}

.demo {
  color: #8441e2;
}

.wrkg-cours-name {
  margin: 0 0 6px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
}

.wrkg-cours-info {
  font-weight: 400;
  font-size: 14px;
  color: #929292;
  line-height: 1;
}

[class*=wrkg-tag-] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  line-height: 1;
  position: absolute;
  top: 12px;
  z-index: 4;
}

.wrkg-tag-age {
  padding: 0 10px 0 0;
  height: 36px;
  background-color: currentColor;
  font-size: 14px;
  left: 0;
}
.wrkg-tag-age::before, .wrkg-tag-age::after {
  content: "";
  position: absolute;
  left: -10px;
}
.wrkg-tag-age::before {
  height: 100%;
  width: 10px;
  background-color: currentColor;
}
.wrkg-tag-age::after {
  width: 0;
  height: 0;
  border-top: 10px solid;
  border-left: 10px solid transparent;
  border-top-color: currentColor;
  filter: brightness(0.5);
  bottom: -10px;
}
.wrkg-tag-age span {
  color: #fff;
}

.wrkg-tag-online {
  padding: 0 10px;
  height: 30px;
  border-radius: 4px;
  background-color: #a92cfc;
  font-size: 15px;
  color: #fff;
  line-height: 0.8;
  text-transform: uppercase;
}
.wrkg-tag-online::before {
  content: "";
  width: 16px;
  height: 13px;
  margin-right: 6px;
  background-image: url("/img/svg/groups/icon-laptop.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  display: inline-block;
}

/*********************************
	New style for group list boxs
*********************************/
.wrkg-item-lists {
  padding-bottom: clamp(40px, 6vw, 84px);
}
@media screen and (min-width: 768px) {
  .wrkg-item-lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(352px, 1fr));
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
}

@media screen and (max-width: 767px) {
  .wrg-list-item {
    padding-bottom: 14px;
  }
}
@media screen and (min-width: 768px) {
  .wrg-list-item {
    padding-right: 13px;
    padding-left: 13px;
    padding-bottom: 26px;
  }
  .wrg-list-item:only-child .wrk-group-box {
    margin-left: 0;
  }
}

.wrk-group-box {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 1.6px 2.5px 8.5px 0.5px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
  .wrk-group-box {
    max-width: 352px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
@media screen and (min-device-width: 1200px) {
  .wrk-group-box {
    transition: box-shadow 0.2s ease;
  }
  .wrk-group-box:hover {
    box-shadow: 2px 3px 14px 0.5px rgba(0, 0, 0, 0.4);
  }
}
.wrk-group-box .wrkg-head {
  height: 112px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: relative;
}
@media screen and (min-device-width: 1200px) {
  .wrk-group-box .wrkg-head:hover img {
    transform: scale(1.05);
  }
}
.wrk-group-box .wrkg-head .wrkg-img-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: relative;
}
.wrk-group-box .wrkg-head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}
.wrk-group-box .wrkg-head .wrkg-tag-online {
  right: 10px;
}
.wrk-group-box .wrkg-body {
  padding: 12px 20px;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.wrk-group-box .wrkg-cours-name {
  font-size: 18px;
}
.wrk-group-box [class*=wrkg-tag-] {
  top: 12px;
}
.wrk-group-box .wrkg-cours-descritption {
  margin: 14px 0;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  line-height: 1.4;
}
.wrk-group-box .wrkg-location-hall {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 400;
  font-size: 14px;
  color: #9b9b9b;
  line-height: 1.2;
}
.wrk-group-box .wrkg-location-hall::before {
  content: "";
  width: 13px;
  height: 18px;
  margin-right: 6px;
  display: inline-block;
  background-image: url("/img/svg/groups/icon-pin.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.wrk-group-box .wrkg-location-hall span {
  width: calc(100% - 20px);
  display: block;
}
.wrk-group-box .wkg-footer {
  padding: 0 20px 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.wrk-group-box .wkg-footer::before {
  content: "";
  width: 100%;
  height: 1px;
  margin-bottom: 16px;
  display: inline-block;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}
.wrk-group-box .wkg-footer .btn, .wrk-group-box .wkg-footer .btn-7, .wrk-group-box .wkg-footer .btn-6 {
  min-width: 156px;
  margin: 0;
}
.wrk-group-box .wkg-footer img {
  max-width: 126px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/*********************************
	END
*********************************/
@media screen and (max-width: 860px), screen and (max-device-width: 860px) {
  #page.starting-trainings .page-container .filter-groups {
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
  }
  #page.starting-trainings .page-container .filter-groups ul {
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0 -10px;
  }
  #page.starting-trainings .page-container .filter-groups ul li {
    -webkit-flex: 1 0 49%;
    -moz-flex: 1 0 49%;
    -ms-flex: 1 0 49%;
    flex: 1 0 49%;
    margin: 0;
    padding: 10px;
  }
  #page.starting-trainings .page-container .filter-groups ul li:first-of-type {
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    margin: 0;
  }
  #page.starting-trainings .page-container .filter-groups .jcf-select {
    margin: 10px 0 0;
    width: 100%;
  }
  #page.starting-trainings .page-container .filter-groups-returning, #page.contact-center .page-container .filter-groups-returning {
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
  }
  #page.starting-trainings .page-container .filter-groups-returning ul, #page.contact-center .page-container .filter-groups-returning ul {
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: start;
    justify-content: start;
  }
  #page.starting-trainings .page-container .filter-groups-returning ul li, #page.contact-center .page-container .filter-groups-returning ul li {
    margin: 0 10px 10px 0;
  }
  #page.starting-trainings .page-container .filter-groups-returning .jcf-select, #page.contact-center .page-container .filter-groups-returning .jcf-select {
    width: 100%;
    margin: 10px 0 0;
  }
}
#page.contact-us .page-container {
  padding-bottom: 100px;
}
#page.contact-us .hero-image {
  min-height: 400px;
}
#page.contact-us .hero-image .hero-image-container {
  width: 100%;
  max-width: 1160px;
  z-index: 11;
  text-align: left;
}
#page.contact-us .hero-image .hero-image-container > div {
  max-width: 600px;
}
#page.contact-us .hero-image .hero-image-container > div h1 {
  font-size: 50px;
  line-height: 50px;
  margin: 0 0 30px;
  font-weight: 500;
}
#page.contact-us .hero-image .hero-image-container > div span {
  font-weight: 300;
}
#page.contact-us .hero-image .map-central-office {
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 100%;
}
#page.contact-us .hero-image:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 600px;
  background: #93b4e8;
  content: "";
  opacity: 0.8;
  z-index: 11;
}
#page.contact-us .contact-details {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  z-index: 12;
}
#page.contact-us .contact-details h3 {
  font-weight: 300;
}
#page.contact-us .contact-details .contact-form {
  padding: 60px;
  -webkit-flex: 7 0 70%;
  -moz-flex: 7 0 70%;
  -ms-flex: 7 0 70%;
  flex: 7 0 70%;
}
#page.contact-us .contact-details .contact-form h3 {
  margin: 0 0 50px;
  font-size: 28px;
}
#page.contact-us .contact-details .contact-form form label {
  display: block;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
#page.contact-us .contact-details .contact-form form .user-details, #page.contact-us .contact-details .contact-form form .user-message {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
#page.contact-us .contact-details .contact-form form .user-details > div, #page.contact-us .contact-details .contact-form form .user-message > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 0 31.33%;
  -moz-flex: 1 0 31.33%;
  -ms-flex: 1 0 31.33%;
  flex: 1 0 31.33%;
  padding: 0 0 0 3%;
}
#page.contact-us .contact-details .contact-form form .user-details > div:first-of-type, #page.contact-us .contact-details .contact-form form .user-message > div:first-of-type {
  margin: 0 0 0 -3%;
}
#page.contact-us .contact-details .contact-form form .user-details > div input, #page.contact-us .contact-details .contact-form form .user-details > div textarea, #page.contact-us .contact-details .contact-form form .user-message > div input, #page.contact-us .contact-details .contact-form form .user-message > div textarea {
  width: 100%;
  height: 32px;
  padding: 0 0 10px;
  font-weight: 500;
}
#page.contact-us .contact-details .contact-form form .user-details > div input.placeholder, #page.contact-us .contact-details .contact-form form .user-details > div textarea.placeholder, #page.contact-us .contact-details .contact-form form .user-message > div input.placeholder, #page.contact-us .contact-details .contact-form form .user-message > div textarea.placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.contact-us .contact-details .contact-form form .user-details > div input:-ms-input-placeholder, #page.contact-us .contact-details .contact-form form .user-details > div textarea:-ms-input-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div input:-ms-input-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div textarea:-ms-input-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.contact-us .contact-details .contact-form form .user-details > div input:-moz-placeholder, #page.contact-us .contact-details .contact-form form .user-details > div textarea:-moz-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div input:-moz-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div textarea:-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.contact-us .contact-details .contact-form form .user-details > div input::-moz-placeholder, #page.contact-us .contact-details .contact-form form .user-details > div textarea::-moz-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div input::-moz-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div textarea::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.contact-us .contact-details .contact-form form .user-details > div input::-webkit-input-placeholder, #page.contact-us .contact-details .contact-form form .user-details > div textarea::-webkit-input-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div input::-webkit-input-placeholder, #page.contact-us .contact-details .contact-form form .user-message > div textarea::-webkit-input-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.contact-us .contact-details .contact-form form .user-details > div input:focus + .border:before, #page.contact-us .contact-details .contact-form form .user-details > div textarea:focus + .border:before, #page.contact-us .contact-details .contact-form form .user-message > div input:focus + .border:before, #page.contact-us .contact-details .contact-form form .user-message > div textarea:focus + .border:before {
  width: 100%;
}
#page.contact-us .contact-details .contact-form form .user-details > div .input-holder, #page.contact-us .contact-details .contact-form form .user-message > div .input-holder {
  position: relative;
}
#page.contact-us .contact-details .contact-form form .user-details > div .input-holder .border, #page.contact-us .contact-details .contact-form form .user-message > div .input-holder .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #ddd;
}
#page.contact-us .contact-details .contact-form form .user-details > div .input-holder .border:before, #page.contact-us .contact-details .contact-form form .user-message > div .input-holder .border:before {
  position: absolute;
  content: "";
  height: 2px;
  bottom: 0;
  left: 0;
  background: #222;
  width: 0%;
  transition: width 0.2s ease;
  -moz-transition: width 0.2s ease;
  -webkit-transition: width 0.2s ease;
  -o-transition: width 0.2s ease;
}
#page.contact-us .contact-details .contact-form form .user-message {
  margin: 40px 0 0;
}
#page.contact-us .contact-details .contact-form form .user-message textarea {
  width: 100%;
  background: none;
  border: none;
  height: auto;
  padding: 10px 0 0 !important;
  min-height: 100px;
  resize: none;
}
#page.contact-us .contact-details .contact-form form .flex-h-container {
  margin: 30px 0 0;
}
#page.contact-us .contact-details .contact-additional-info {
  padding: 60px;
  -webkit-flex: 3 0 30%;
  -moz-flex: 3 0 30%;
  -ms-flex: 3 0 30%;
  flex: 3 0 30%;
  background: #8dade0;
}
#page.contact-us .contact-details .contact-additional-info h3 {
  color: #fff;
  margin: 0 0 50px;
  font-size: 28px;
}
#page.contact-us .contact-details .contact-additional-info ul li {
  margin: 40px 0 0;
  color: #ccc;
  padding: 0 0 0 40px;
}
#page.contact-us .contact-details .contact-additional-info ul li a {
  color: #fff;
  font-size: 16px;
  line-height: 20px;
}
#page.contact-us .contact-details .contact-additional-info ul li a:hover {
  text-decoration: underline;
}
#page.contact-us .contact-details .contact-additional-info ul li p {
  margin: 0;
}
#page.contact-us .contact-details .contact-additional-info ul li p span {
  display: block;
  margin: 0 0 10px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  white-space: nowrap;
}
#page.contact-us .contact-details .contact-additional-info ul li p span label {
  background: #7294ca;
  font: normal 400 11px/11px Rubik, Arial, sans-serif;
  text-transform: uppercase;
  padding: 4px 6px 3px;
  margin: 0 0 0 7px;
  color: #fff;
}
#page.contact-us .contact-details .contact-additional-info ul li.location {
  background: url(../img/svg/icon-mappin2.svg) no-repeat left 5px;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}
#page.contact-us .contact-details .contact-additional-info ul li.phone {
  background: url(../img/svg/icon-mobile-phone.svg) no-repeat left 5px;
  -webkit-background-size: 17px;
  -moz-background-size: 17px;
  -o-background-size: 17px;
  background-size: 17px;
}
#page.contact-us .contact-details .contact-additional-info ul li.email {
  background: url(../img/svg/icon-email.svg) no-repeat left 2px;
  -webkit-background-size: 20px;
  -moz-background-size: 20px;
  -o-background-size: 20px;
  background-size: 20px;
}
#page.contact-us .contact-details .contact-additional-info ul li.socials {
  margin: 30px 0 0;
  font-size: 0;
}
#page.contact-us .contact-details .contact-additional-info ul li.socials a {
  display: inline-block;
  opacity: 0.8;
  transition: opacity 0.1s ease;
  -moz-transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  -o-transition: opacity 0.1s ease;
}
#page.contact-us .contact-details .contact-additional-info ul li.socials a:hover {
  opacity: 1;
}
#page.contact-us .contact-details .contact-additional-info ul li.socials a img {
  margin: 0 10px 0 0;
}
#page.contact-us .outro-text {
  margin: 100px 0 0;
  text-align: center;
}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  #page.contact-us .hero-image .hero-image-container > div {
    margin: 0 auto;
    text-align: center;
  }
  #page.contact-us .contact-details {
    display: block;
  }
  #page.contact-us .contact-details .contact-additional-info {
    text-align: center;
  }
  #page.contact-us .contact-details .contact-additional-info ul li {
    padding: 60px 0 0;
  }
  #page.contact-us .contact-details .contact-additional-info ul li p span {
    -webkit-justify-content: center;
    justify-content: center;
  }
  #page.contact-us .contact-details .contact-additional-info ul li.location {
    background: url(../img/svg/icon-mappin2.svg) no-repeat center top;
    -webkit-background-size: 28px;
    -moz-background-size: 28px;
    -o-background-size: 28px;
    background-size: 28px;
  }
  #page.contact-us .contact-details .contact-additional-info ul li.phone {
    background: url(../img/svg/icon-mobile-phone.svg) no-repeat center top;
    -webkit-background-size: 28px;
    -moz-background-size: 28px;
    -o-background-size: 28px;
    background-size: 28px;
    padding: 70px 0 0;
  }
  #page.contact-us .contact-details .contact-additional-info ul li.email {
    background: url(../img/svg/icon-email.svg) no-repeat center top;
    -webkit-background-size: 28px;
    -moz-background-size: 28px;
    -o-background-size: 28px;
    background-size: 28px;
  }
  #page.contact-us .contact-details .contact-additional-info ul li.socials {
    margin: 0;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #page.contact-us .contact-details .contact-form {
    padding: 50px 40px;
  }
  #page.contact-us .contact-details .contact-form form .user-details {
    display: block;
  }
  #page.contact-us .contact-details .contact-form form .user-details > div {
    padding: 0;
    margin: 30px 0 0;
    display: block;
  }
  #page.contact-us .contact-details .contact-form form .user-details > div:first-of-type {
    margin: 0;
  }
  #page.contact-us .contact-details .contact-additional-info {
    padding: 50px 40px;
  }
}
#page.about-us .section-founders .section-title.separator {
  margin: 0 0 100px;
}
#page.about-us .section-founders .founder {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#page.about-us .section-founders .founder .introduction {
  -webkit-flex: 7 0 65%;
  -moz-flex: 7 0 65%;
  -ms-flex: 7 0 65%;
  flex: 7 0 65%;
  font-weight: 300;
  line-height: 30px;
}
#page.about-us .section-founders .founder .introduction p:first-of-type {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 30px;
  line-height: 34px;
}
#page.about-us .section-founders .founder .member {
  -webkit-flex: 3 0 30%;
  -moz-flex: 3 0 30%;
  -ms-flex: 3 0 30%;
  flex: 3 0 30%;
  margin: 0 0 0 5%;
  max-width: 350px;
}
#page.about-us .section-founders .founder .member img {
  width: 100%;
  height: auto;
}
#page.about-us .section-founders .founder .member .member-info {
  background: #fff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  text-align: center;
}
#page.about-us .section-founders .founder .member .member-info strong {
  display: block;
  font-weight: 500;
  font-size: 18px;
}
#page.about-us .section-founders .founder .member .member-info span {
  font-weight: 300;
  font-size: 13px;
}
#page.about-us .section-skills {
  position: relative;
  background: url(../img/aboutus/about-skills.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.about-us .section-skills:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  background: rgba(132, 65, 226, 0.85);
}
#page.about-us .section-skills .section-container {
  position: relative;
  z-index: 10;
}
#page.about-us .section-skills .section-container .section-title, #page.about-us .section-skills .section-container .section-description {
  color: #fff;
}
#page.about-us .section-skills .section-container .features-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
#page.about-us .section-skills .section-container .features-list li {
  -webkit-flex: 1 0 27.33%;
  -moz-flex: 1 0 27.33%;
  -ms-flex: 1 0 27.33%;
  flex: 1 0 27.33%;
  margin: 50px 3% 0;
  text-align: center;
  color: #fff;
}
#page.about-us .section-skills .section-container .features-list li img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
#page.about-us .section-skills .section-container .features-list li strong {
  display: block;
  margin: 40px 0 20px;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}
#page.about-us .section-skills .section-container .features-list li p {
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
}
#page.about-us .section-team .team-members {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 60px 0 0;
}
#page.about-us .section-team .team-members .member {
  -webkit-flex: 0 1 27.33%;
  -moz-flex: 0 1 27.33%;
  -ms-flex: 0 1 27.33%;
  flex: 0 1 27.33%;
  margin: 0 3% 100px;
}
#page.about-us .section-team .team-members .member img {
  width: 100%;
  height: auto;
}
#page.about-us .section-team .team-members .member .member-info {
  position: relative;
  margin: -30px auto 0;
  background: #fff;
  padding: 15px;
  max-width: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  text-align: center;
}
#page.about-us .section-team .team-members .member .member-info strong {
  display: block;
  font-weight: 500;
  font-size: 18px;
}
#page.about-us .section-team .team-members .member .member-info span {
  font-weight: 300;
  font-size: 13px;
}
#page.about-us .section-advisers {
  background: #fcfcfc;
}
#page.about-us .section-advisers .member {
  max-width: 250px;
  margin: 60px auto 0;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
  border: 1px solid #eee;
}
#page.about-us .section-advisers .member img {
  width: 100%;
  height: auto;
}
#page.about-us .section-advisers .member .member-info {
  background: #fff;
  padding: 15px;
  max-width: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  text-align: center;
}
#page.about-us .section-advisers .member .member-info strong {
  display: block;
  font-weight: 500;
  font-size: 18px;
}
#page.about-us .section-advisers .member .member-info span {
  font-weight: 300;
  font-size: 13px;
}
#page.about-us .section-join-us form {
  margin: 80px 0 0;
}
#page.about-us .section-join-us form .user-details {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#page.about-us .section-join-us form .user-details > div {
  -webkit-flex: 1 0 31.33%;
  -moz-flex: 1 0 31.33%;
  -ms-flex: 1 0 31.33%;
  flex: 1 0 31.33%;
  margin: 0 0 0 3%;
}
#page.about-us .section-join-us form .user-details > div:first-of-type {
  margin: 0;
}
#page.about-us .section-join-us form .user-details > div input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: none;
  outline: none;
  height: 50px;
  padding-left: 15px;
  transition: border 0.1s ease;
  -moz-transition: border 0.1s ease;
  -webkit-transition: border 0.1s ease;
  -o-transition: border 0.1s ease;
}
#page.about-us .section-join-us form .user-details > div input.placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.about-us .section-join-us form .user-details > div input:-ms-input-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.about-us .section-join-us form .user-details > div input:-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.about-us .section-join-us form .user-details > div input::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.about-us .section-join-us form .user-details > div input::-webkit-input-placeholder {
  color: #aaa;
  font-weight: 300;
}
#page.about-us .section-join-us form .user-details > div input:focus {
  border-color: #999;
}
#page.about-us .section-join-us .flex-h-container {
  margin: 30px 0 0;
}

@media screen and (max-width: 1000px), screen and (max-device-width: 1000px) {
  #page.about-us .section-founders .founder {
    display: block;
  }
  #page.about-us .section-founders .founder .introduction p:first-of-type {
    text-align: center;
  }
  #page.about-us .section-founders .founder .member {
    margin: 50px auto 0;
  }
  #page.about-us .section-skills .section-container .features-list {
    margin: 60px 0 0;
  }
  #page.about-us .section-skills .section-container .features-list li {
    -webkit-flex: 1 0 44%;
    -moz-flex: 1 0 44%;
    -ms-flex: 1 0 44%;
    flex: 1 0 44%;
  }
}
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  #page.about-us .section-skills .section-container .features-list {
    display: block;
  }
  #page.about-us .section-skills .section-container .features-list li {
    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }
  #page.about-us .section-team .team-members .member {
    -webkit-flex: 0 1 44%;
    -moz-flex: 0 1 44%;
    -ms-flex: 0 1 44%;
    flex: 0 1 44%;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #page.about-us .section-join-us form .user-details {
    display: block;
  }
  #page.about-us .section-join-us form .user-details > div {
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    margin: 15px 0 0;
  }
}
@media screen and (max-width: 540px), screen and (max-device-width: 540px) {
  #page.about-us .section-team .team-members {
    display: block;
  }
  #page.about-us .section-team .team-members .member {
    -webkit-flex: 0 1 100%;
    -moz-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }
}
#page.halls .page-container {
  padding-top: 100px;
}
#page.halls .section-title {
  margin: 0 0 100px;
}
#page.halls .hall {
  position: relative;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  margin: 60px 0 0;
}
#page.halls .hall > img {
  width: 100%;
}
#page.halls .hall .visiting-children {
  position: absolute;
  top: -15px;
  left: 50%;
  background: #00c0d6;
  padding: 15px 25px;
  color: #fff;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}
#page.halls .hall .visiting-children > strong {
  font-weight: 500;
}
#page.halls .hall .hall-info > ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background: #fcfcfc;
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
#page.halls .hall .hall-info > ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  -webkit-align-items: center;
  align-items: center;
  border-left: 1px solid #e7e7e7;
  padding: 20px 30px;
}
#page.halls .hall .hall-info > ul li:first-of-type {
  border: none;
}
#page.halls .hall .hall-info > ul li img {
  height: 40px;
  margin: 0 20px 0 0;
}
#page.halls .hall .hall-info > ul li a {
  color: #666;
}
#page.halls .hall .hall-info > ul li a:hover {
  text-decoration: underline;
}
#page.halls .hall .hall-info .hall-description {
  padding: 50px;
}
#page.halls .hall .hall-info .hall-description p {
  font-size: 18px;
  font-weight: 300;
}
#page.halls .hall .hall-info .hall-description p a {
  color: #7eaffc;
}
#page.halls .hall .hall-info .hall-description p a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1200px), screen and (max-device-width: 1200px) {
  #page.halls .hall {
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    margin: 40px 0 0;
  }
  #page.halls .hall .hall-info > ul {
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
  }
  #page.halls .hall .hall-info > ul li {
    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-align-items: center;
    align-items: center;
    border: none;
    border-top: 1px solid #e7e7e7;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #page.halls .hall {
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    margin: 40px 0 0;
  }
  #page.halls .hall .visiting-children {
    display: none;
  }
}
#page.news {
  background: #fcfcfc;
}
#page.news .page-container {
  padding-top: 100px;
}
#page.news .page-container .single-news {
  position: relative;
  border: 1px solid #e7e7e7;
  padding: 60px 50px;
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  background: #fff;
}
#page.news .page-container .single-news:before {
  position: absolute;
  top: -25px;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  background: #333 url(../img/svg/icon-newspaper.svg) no-repeat center center;
  -webkit-background-size: 20px;
  -moz-background-size: 20px;
  -o-background-size: 20px;
  background-size: 20px;
  content: "";
}
#page.news .page-container .single-news .news-meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 0 50px;
}
#page.news .page-container .single-news .news-meta li {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 0 0 25px;
  margin: 0 0 0 22px;
}
#page.news .page-container .single-news .news-meta li:first-of-type {
  margin: 0;
  padding: 0;
}
#page.news .page-container .single-news .news-meta li:first-of-type:before {
  content: none;
}
#page.news .page-container .single-news .news-meta li:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  background: #ccc;
  content: "";
  border-radius: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#page.news .page-container .single-news .news-meta li time {
  color: #999;
}
#page.news .page-container .single-news .news-meta li span {
  font-weight: 500;
  white-space: nowrap;
}
#page.news .page-container .single-news .news-meta li img {
  width: 32px;
  height: 32px;
  margin: 0 10px 0 0;
  border-radius: 50%;
}
#page.news .page-container .single-news .news-meta li a {
  border-bottom: 1px solid transparent;
  transition: border 0.1s ease;
  -moz-transition: border 0.1s ease;
  -webkit-transition: border 0.1s ease;
  -o-transition: border 0.1s ease;
}
#page.news .page-container .single-news .news-meta li a.fb {
  color: #3b5998;
}
#page.news .page-container .single-news .news-meta li a.fb:hover {
  border-color: #3b5998;
}
#page.news .page-container .single-news .news-meta li a.tw {
  color: #1da1f2;
}
#page.news .page-container .single-news .news-meta li a.tw:hover {
  border-color: #1da1f2;
}
#page.news .page-container .single-news .news-content {
  max-width: 700px;
  margin: 0 auto;
}
#page.news .page-container .single-news .news-content a {
  color: #00c0d6;
  text-decoration: underline;
}
#page.news .page-container .single-news .news-content a:hover {
  text-decoration: none;
}
#page.news .page-container .single-news .news-content p {
  margin: 0 0 20px;
  line-height: 28px;
}
@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  #page.news .page-container .single-news .news-meta li.fb-share, #page.news .page-container .single-news .news-meta li.tw-share {
    display: none;
  }
}
#page.group .hero-image {
  min-height: 200px;
}
#page.group .hero-image h1 {
  font: normal 400 50px/50px "Fredoka One", Arial, sans-serif;
  text-transform: uppercase;
}
#page.group .group-description {
  position: relative;
  padding: 60px;
  margin: 80px 0 0;
  background: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#page.group .group-description > span {
  background: #222;
  padding: 8px 15px 5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: -16px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#page.group .group-description > h2 {
  font-weight: 500;
  text-transform: none;
}
#page.group .group-description > p {
  font-size: 16px;
  line-height: 28px;
}
#page.group .group-description > p br {
  line-height: 40px;
}
#page.group .group-description .group-additional-info {
  margin: 0 0 30px;
  border: 1px solid #e7e7e7;
  background: #fefefe;
}
#page.group .group-description .group-additional-info ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#page.group .group-description .group-additional-info ul li {
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  position: relative;
  padding: 15px 30px 15px 50px;
  text-transform: uppercase;
  border-left: 1px solid #e7e7e7;
}
#page.group .group-description .group-additional-info ul li:first-of-type {
  margin: 0;
  border: none;
}
#page.group .group-description .group-additional-info ul li.date {
  background: url(../img/svg/icon-calendar.svg) no-repeat 25px 18px;
  -webkit-background-size: 14px;
  -moz-background-size: 14px;
  -o-background-size: 14px;
  background-size: 14px;
}
#page.group .group-description .group-additional-info ul li.time {
  background: url(../img/svg/icon-clock.svg) no-repeat 25px 18px;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}
#page.group .group-description .group-additional-info ul li.location {
  background: url(../img/svg/icon-mappin.svg) no-repeat 25px 18px;
  -webkit-background-size: 14px;
  -moz-background-size: 14px;
  -o-background-size: 14px;
  background-size: 14px;
}
#page.group .group-description .group-additional-info ul li.price {
  background: url(../img/svg/icon-dollar.svg) no-repeat 25px 18px;
  -webkit-background-size: 10px;
  -moz-background-size: 10px;
  -o-background-size: 10px;
  background-size: 10px;
  white-space: nowrap;
}
#page.group .group-description .group-additional-info ul li.price strike {
  display: block;
}
#page.group .group-description .group-additional-info ul li.price strong {
  color: #60bb29;
  font-weight: 500;
}
#page.group .group-description .group-additional-info ul li span {
  display: block;
  font-size: 12px;
  color: #bbb;
  line-height: 18px;
}
#page.group .group-description .group-additional-info ul li p {
  font-size: 13px;
  color: #888;
  margin: 0;
  line-height: 16px;
}
#page.group .group-description .group-additional-info ul li p.more {
  border-bottom: 1px dotted #ccc;
  cursor: help;
}
#page.group .group-description .group-additional-info ul li p.more:hover + div {
  display: block;
}
#page.group .group-description .group-additional-info ul li div {
  display: none;
  position: absolute;
  top: -35px;
  left: 0;
  padding: 10px 20px;
  min-width: 200px;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  font-size: 12px;
  white-space: nowrap;
}
#page.group .group-description .group-additional-info ul li div:before {
  position: absolute;
  bottom: -11px;
  left: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ccc;
}
#page.group .group-description .group-additional-info ul li div:after {
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}
#page.group .group-description .flex-h-container {
  margin: 30px 0 0;
}
#page.group .group-description .flex-h-container .inappropriate-groups {
  position: relative;
}
#page.group .group-description .flex-h-container .inappropriate-groups .std-button:hover + .tooltip {
  display: block;
}
#page.group .group-description .flex-h-container .inappropriate-groups .tooltip {
  top: -50px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#page.group .group-description .flex-h-container .inappropriate-groups .tooltip:before {
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#page.group .group-description .flex-h-container .inappropriate-groups .tooltip:after {
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#page.group .topics-list .sub-heading {
  margin: 0 0 10px;
}
#page.group .topics-list .sub-heading + span {
  margin: 0 0 40px;
}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
  #page.group .group-description {
    padding: 40px 60px;
  }
}
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  #page.group .group-description .group-additional-info ul {
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
  }
  #page.group .group-description .group-additional-info ul li {
    border-left: none;
    border-top: 1px solid #e7e7e7;
  }
}
#page.login {
  background: #03bfd6 url(../img/home/registration-background.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.login .page-container {
  position: relative;
  padding: 80px 20px;
  z-index: 10;
}
#page.login .basic-form {
  padding: 90px 50px 40px;
  min-width: 760px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 1.7px 2.5px 29px 0 rgba(0, 0, 0, 0.17);
  /* .form-tabs li {
      &.active {
          box-shadow: inset 7px 0 20px -7px rgba($black,.2), 0 -8px 0 #a92cfc; background: #fcfcfc; color: #ccc;
      }
  } */
}
#page.login .basic-form .btn-login {
  background: #a92cfc;
}
#page.login .basic-form .group-info-wrapper {
  margin-bottom: 50px;
}
#page.login .basic-form .group-info-wrapper .group-sign-up-note {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  color: #696969;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper {
  padding-top: 11px;
  min-height: 100px;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-info .group-item-info-row:first-child {
  text-align: left;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-image {
  background: url(../img/login/group-item.png) no-repeat;
  min-width: 91px;
  min-height: 81px;
  margin-right: 30px;
  float: left;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-age-info {
  font-family: Rubik;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  color: #02c0d6;
  display: block;
  max-height: 15px;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-level-info {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  color: #929292;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-name {
  font-family: Rubik;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  float: left;
  margin-right: 10px;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-location {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #9b9b9b;
  padding-top: 5px;
}
#page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-location img {
  padding-right: 10px;
  vertical-align: middle;
  display: unset;
}
#page.login .basic-form .action-buttons-holder {
  margin-bottom: 0;
}
#page.login .basic-form .form-tabs li:first-child {
  border-top-left-radius: 12px;
}
#page.login .basic-form .form-tabs li:last-child {
  border-top-right-radius: 12px;
}
#page.login .basic-form .form-row {
  width: 300px;
  margin: 20px auto;
}
#page.login .basic-form .form-row input {
  min-height: 40px !important;
}
#page.login .basic-form .forgotten-password {
  text-align: center;
}
#page.login .basic-form .forgotten-password a {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.57;
  letter-spacing: normal;
  text-align: left;
  color: #696969;
}
#page.login .basic-form .remember-me label {
  color: #383736;
}
#page.login .basic-form .jcf-checkbox {
  border-radius: 6px;
}
#page.login .basic-form .jcf-checkbox.jcf-checked span {
  display: block;
  width: 100%;
  height: 100%;
  background: #03bfd6 url(../../img/svg/icon-check-white.svg) no-repeat center center;
  -webkit-background-size: 14px 14px;
  -moz-background-size: 14px 14px;
  -o-background-size: 14px 14px;
  background-size: 14px 14px;
}
#page.login .basic-form .jcf-checkbox input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}

@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  #page.login .basic-form {
    min-width: unset;
  }
  #page.login .basic-form .action-buttons-holder .std-button {
    display: block;
    width: 100%;
  }
  #page.login .basic-form .form-row {
    width: unset;
    margin: 20px auto;
  }
  #page.login .basic-form .group-info-wrapper {
    margin-bottom: 70px;
  }
  #page.login .basic-form .group-info-wrapper .group-sign-up-note {
    font-family: Rubik;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    color: #696969;
  }
  #page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-image {
    margin-right: 5px;
    float: left;
  }
  #page.login .basic-form .group-info-wrapper .group-item-wrapper .group-item-name {
    float: left;
    margin-right: 10px;
  }
}
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  #page.login .basic-form {
    min-width: unset;
  }
  #page.login .basic-form .action-buttons-holder .std-button {
    display: block;
    width: 100%;
  }
  #page.login .basic-form .form-row {
    width: unset;
    margin: 20px auto;
  }
}
#page.register {
  background: #03bfd6 url(../img/home/registration-background.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
}
#page.register .page-container {
  position: relative;
  padding: 80px 20px;
  z-index: 10;
}
#page.register .basic-form {
  min-width: 760px;
  border-radius: 12px;
  box-shadow: 1.7px 2.5px 29px 0 rgba(0, 0, 0, 0.17);
  background-color: #ffffff;
  padding: 90px 50px 40px;
  /* .form-tabs li {
      &.active {
          box-shadow: inset 7px 0 20px -7px rgba($black,.2), 0 -8px 0 #a92cfc;
          background: #fcfcfc; color: #ccc;
      }
  } */
}
#page.register .basic-form p {
  text-align: left;
}
#page.register .basic-form .add-child-on-register .section-title {
  margin-left: initial;
  text-align: left;
  color: #383736;
  margin-bottom: 0;
}
#page.register .basic-form .register-container {
  display: flex;
}
#page.register .basic-form .register-container .form-row-label {
  text-align: left;
  padding: 2px 0;
}
#page.register .basic-form .register-container .register-column {
  flex: 0 0 50%;
}
#page.register .basic-form .register-container .register-column .full-address-bar {
  overflow: visible;
}
#page.register .basic-form .register-container .register-column .full-address-bar .input-wrapper {
  width: 630px;
}
#page.register .basic-form .btn-login {
  background: #a92cfc;
}
#page.register .basic-form .group-info-wrapper {
  margin-bottom: 50px;
}
#page.register .basic-form .group-info-wrapper .group-sign-up-note {
  font-weight: normal;
  font-family: Rubik;
  font-style: normal;
  font-stretch: normal;
  font-size: 14px;
  color: #696969;
  text-align: left;
  letter-spacing: normal;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper {
  padding-top: 11px;
  min-height: 100px;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper .group-item-info .group-item-info-row:first-child {
  text-align: left;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper .group-item-image {
  background: url(../img/login/group-item.png) no-repeat;
  min-width: 91px;
  min-height: 81px;
  margin-right: 30px;
  float: left;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper .group-item-age-info {
  font-family: Rubik;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  color: #02c0d6;
  display: block;
  max-height: 15px;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper .group-item-level-info {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  color: #929292;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper .group-item-name {
  font-family: Rubik;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  float: left;
  margin-right: 10px;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper .group-item-location {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #9b9b9b;
  padding-top: 5px;
}
#page.register .basic-form .group-info-wrapper .group-item-wrapper .group-item-location img {
  padding-right: 10px;
  vertical-align: middle;
  display: unset;
}
#page.register .basic-form .action-buttons-holder {
  margin-bottom: 0;
}
#page.register .basic-form .form-tabs li:first-child {
  border-top-left-radius: 12px;
}
#page.register .basic-form .form-tabs li:last-child {
  border-top-right-radius: 12px;
}
#page.register .basic-form .benefits {
  margin: 30px 0;
  text-align: left;
}
#page.register .basic-form .benefits li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin: 10px 0;
}
#page.register .basic-form .benefits li img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
#page.register .basic-form .action-buttons-holder {
  margin-bottom: 0;
}
#page.register .basic-form .form-row:not(.terms-and-conds) {
  max-width: 300px;
  margin: 20px auto;
}
#page.register .basic-form .form-row:not(.terms-and-conds) input {
  min-height: 40px !important;
}
#page.register .basic-form .form-row:not(.terms-and-conds) .jcf-select {
  height: 40px;
  max-height: 40px;
}
#page.register .basic-form .form-row:not(.terms-and-conds) .jcf-select-register-day-select, #page.register .basic-form .form-row:not(.terms-and-conds) .jcf-select-register-month-select {
  width: 25%;
  float: left;
  margin-right: 15px;
}
#page.register .basic-form .form-row:not(.terms-and-conds) .small-note {
  font-size: 10px;
}
#page.register .basic-form .terms-and-conds {
  -webkit-justify-content: unset;
  justify-content: unset;
  -webkit-align-items: unset;
  align-items: unset;
  margin: 15px 0;
}
#page.register .basic-form .terms-and-conds p {
  margin: 0;
}
#page.register .basic-form .jcf-checkbox {
  border-radius: 6px;
}
#page.register .basic-form .jcf-checkbox.jcf-checked span {
  display: block;
  width: 100%;
  height: 100%;
  background: #03bfd6 url(../../img/svg/icon-check-white.svg) no-repeat center center;
  -webkit-background-size: 14px 14px;
  -moz-background-size: 14px 14px;
  -o-background-size: 14px 14px;
  background-size: 14px 14px;
}
#page.register .basic-form .jcf-checkbox input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}

@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  #page.register .basic-form .action-buttons-holder .std-button {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
  #page.register .basic-form {
    padding-left: 20px;
    padding-right: 20px;
    min-width: unset;
  }
  #page.register .basic-form .action-buttons-holder .std-button {
    display: block;
    width: 100%;
  }
  #page.register .basic-form .form-row {
    width: unset;
    margin: 20px auto;
  }
  #page.register .basic-form .register-container {
    display: unset;
  }
  #page.register .basic-form .register-container .register-column .full-address-bar .input-wrapper {
    width: unset;
  }
  #page.register .basic-form .benefits {
    margin: 0;
  }
}
#page.password-reset {
  background: #ac94e9 url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.password-reset:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ac94e9;
  content: "";
  opacity: 0.4;
}
#page.password-reset .page-container {
  position: relative;
  padding: 80px 20px;
  z-index: 10;
}
#page.password-reset .basic-form {
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.15), inset 0 8px 0 #e2d7ff;
}
#page.password-reset .basic-form > p {
  text-align: center;
  margin: 0 0 20px;
}
#page.password-reset .basic-form .action-buttons-holder {
  margin-bottom: 0;
}

@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  #page.password-reset .basic-form {
    padding: 40px 30px;
  }
  #page.password-reset .basic-form .action-buttons-holder .std-button {
    display: block;
    width: 100%;
  }
}
#page.manual-password-reset {
  background: #ac94e9 url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.manual-password-reset:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ac94e9;
  content: "";
  opacity: 0.4;
}
#page.manual-password-reset .page-container {
  position: relative;
  padding: 80px 20px;
  z-index: 10;
}
#page.manual-password-reset .basic-form {
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.15), inset 0 8px 0 #e2d7ff;
}
#page.manual-password-reset .basic-form > p {
  text-align: center;
  margin: 0 0 20px;
}
#page.manual-password-reset .basic-form .action-buttons-holder {
  margin-bottom: 0;
}

@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  #page.manual-password-reset .basic-form {
    padding: 40px 30px;
  }
  #page.manual-password-reset .basic-form .action-buttons-holder .std-button {
    display: block;
    width: 100%;
  }
}
#page.demo {
  background: #fcfcfc;
}
#page.demo .hero-image {
  background: url(../../img/hero-demos.jpg) no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.demo .hero-image:before {
  background: rgba(126, 175, 252, 0.9);
}
#page.demo .hero-image span {
  display: block;
  font-size: 32px;
  font-weight: 300;
  line-height: 36px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 15px;
}
#page.demo .hero-image strong {
  position: relative;
  display: block;
  font-size: 42px;
  line-height: 42px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}
#page.demo .hero-image .selectize-control {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  font: normal 500 14px/25px Rubik, Arial, sans-serif;
  max-width: 350px;
  width: 100%;
  height: 50px;
  margin: 30px 0 0;
  background: url(../img/svg/icon-arrow-down-white.svg) no-repeat calc(100% - 15px) center;
  -webkit-background-size: 12px;
  -moz-background-size: 12px;
  -o-background-size: 12px;
  background-size: 12px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  border-radius: 5px;
  border: 2px solid #fff;
  cursor: pointer;
  transition: background-color 0.1s ease;
  -moz-transition: background-color 0.1s ease;
  -webkit-transition: background-color 0.1s ease;
  -o-transition: background-color 0.1s ease;
}
#page.demo .hero-image .selectize-control:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#page.demo .hero-image .selectize-control .selectize-input {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 35px 0 15px;
}
#page.demo .hero-image .selectize-control .selectize-input input {
  display: none !important;
}
#page.demo .hero-image .selectize-control .selectize-dropdown {
  position: absolute;
  z-index: 1000;
  background: #fff;
  margin: 20px 0 0;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}
#page.demo .hero-image .selectize-control .selectize-dropdown:after {
  position: absolute;
  top: -10px;
  right: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
}
#page.demo .hero-image .selectize-control .selectize-dropdown .option {
  border-top: 1px solid #ddd;
  padding: 10px 20px;
  font-weight: 400;
  color: #999;
  text-align: left;
}
#page.demo .hero-image .selectize-control .selectize-dropdown .option.selected {
  font-weight: 700;
  color: #333;
  background: #fcfcfc;
  border-radius: 5px 5px 0 0;
}
#page.demo .hero-image .selectize-control .selectize-dropdown .option:hover {
  background-color: #f9f9f9;
}
#page.demo .hero-image .selectize-control .selectize-dropdown .option:first-of-type {
  border-top: none;
}
#page.demo .hero-image .selectize-control .selectize-dropdown .option:first-of-type:hover {
  border-radius: 5px 5px 0 0;
}
#page.demo .hero-image .selectize-control .selectize-dropdown .option:last-of-type:hover, #page.demo .hero-image .selectize-control .selectize-dropdown .option:last-of-type.selected {
  border-radius: 0 0 5px 5px;
}
#page.demo .page-container {
  padding-top: 60px;
}
#page.demo .page-container .demo-intro-text {
  max-width: 700px;
  margin: 0 auto 30px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  text-align: center;
}
#page.demo .page-container .redo-classes-text {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 30px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
}
#page.demo .page-container iframe {
  max-width: 100%;
  margin: 0 auto;
}
#page.demo .page-container .add-child-on-register .children-container .new-kid-separator {
  height: 1px;
  background: #e4e4e4;
  margin: 30px 0;
}
#page.demo .page-container .add-child-on-register .action-buttons-holder {
  margin: 20px auto 0;
}
#page.demo .page-container .action-buttons-holder {
  margin-bottom: 0;
}
#page.demo .basic-form .form-row:first-of-type {
  height: 100%;
  min-height: 48px;
}
#page.demo .basic-form .form-row .input-error-message {
  display: none;
}
#page.demo .basic-form .form-row:first-of-type .input-ticket {
  height: 100%;
  min-height: 48px;
}
#page.demo .basic-form .form-row:first-of-type .input-ticket .jcf-select {
  height: 100%;
  min-height: 48px;
  line-height: normal;
}
#page.demo .basic-form .form-row:first-of-type .input-ticket .jcf-select .jcf-select-text span {
  white-space: normal;
}

.whole-page-overlay {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100% !important;
  z-index: 1050;
  display: none;
}

.whole-page-overlay .center-loader {
  top: 50%;
  left: 46%;
  position: absolute;
  color: white;
}

#page.raffle {
  background: #ac94e9 url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.raffle:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ac94e9;
  content: "";
  opacity: 0.4;
}
#page.raffle .page-container {
  position: relative;
  padding: 80px 20px;
  z-index: 10;
}
#page.raffle .basic-form {
  max-width: 1000px;
}
#page.raffle .basic-form .raffleGame {
  text-align: center;
  font-size: 50px;
  font-weight: 300;
  line-height: normal;
}
#page.raffle .basic-form .action-buttons-holder {
  margin-bottom: 0;
}
#page.raffle .basic-form #winners-table {
  width: 100%;
  margin: 30px 0 0;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-collapse: collapse;
}
#page.raffle .basic-form #winners-table tr th {
  font-weight: 500;
  font-size: 16px;
  border: 1px solid #e7e7e7;
  background: #f4f4f4;
  padding: 10px 20px 8px;
  line-height: 28px;
}
#page.raffle .basic-form #winners-table tr td {
  font-size: 14px;
  border: 1px solid #e7e7e7;
  padding: 10px 20px 8px;
  text-align: center;
}

@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  #page.raffle .basic-form .action-buttons-holder .std-button {
    display: block;
    width: 100%;
  }
}
.after-message {
  padding-top: 60px;
  text-align: center;
}
.after-message.demo-signup {
  background: #ac94e9 url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.after-message.demo-signup:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ac94e9;
  content: "";
  opacity: 0.4;
}
.after-message.demo-signup .page-container {
  position: relative;
  padding: 0 20px 80px;
  z-index: 10;
}
.after-message .basic-form {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.after-message .basic-form img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.after-message .basic-form .payment-message-heading {
  display: block;
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  margin: 20px 0 30px;
}
.after-message .basic-form .payment-message p {
  margin: 0 0 20px;
}

#page.terms .page-container {
  padding-top: 100px;
}
#page.terms .page-container .section-title {
  margin-bottom: 100px;
}
#page.terms .page-container h3, #page.terms .page-container h4, #page.terms .page-container h5, #page.terms .page-container h6 {
  font-weight: 500;
}
#page.terms .page-container h3 {
  font-size: 24px;
  margin: 40px 0 30px;
}
#page.terms .page-container h4 {
  font-size: 18px;
}
#page.terms .page-container p {
  line-height: 26px;
}
#page.terms .page-container p a {
  color: #00c0d6;
  text-decoration: underline;
}
#page.terms .page-container p a:hover {
  text-decoration: none;
}

/*************************************************************************
	Tests styles
*************************************************************************/
.test-start-page {
  padding: 30px 24px 0 24px;
  width: 100%;
  background-color: #fafafa;
}
@media screen and (min-device-width: 1025px) {
  .test-start-page {
    padding: 64px 20px 0 20px;
  }
}
.test-start-page section {
  padding-bottom: 10px;
}
.test-start-page .section-start-test {
  margin-bottom: 50px;
}
.test-start-page .section-start-test .test-enter-code-label {
  font-family: Rubik;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  display: block;
  color: #000;
  margin-bottom: 17px;
}
.test-start-page .section-start-test input.test-enter-code {
  width: 239px;
  height: 55px;
  padding: 20px 31px 20px 23px;
  border-radius: 8px;
  background-color: #ffffff;
  border: solid 2px #e1e1e1;
  margin-right: 15px;
}
.test-start-page .section-start-test input.test-enter-code:focus {
  border: solid 2px #9a62fa;
}
@media screen and (max-width: 767px) {
  .test-start-page .section-start-test input.test-enter-code {
    width: 100%;
  }
}
.test-start-page .section-start-test button.start-test-button {
  cursor: pointer;
  width: 239px;
  height: 55px;
  border-radius: 8px;
  border: none;
  background-color: #9a62fa;
  font-family: Rubik;
  font-size: 22px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}
.test-start-page .section-start-test button.start-test-button:disabled {
  background-color: #d7d7d7;
}
.test-start-page .section-start-test button.start-test-button:focus {
  outline: 0 !important;
}
@media screen and (max-width: 767px) {
  .test-start-page .section-start-test button.start-test-button {
    width: 100%;
    margin-top: 30px;
  }
}
.test-start-page .section-tests {
  padding-top: 180px;
  background-image: url("../../img/tests/test-home-page.png");
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: top;
}
@media screen and (max-width: 1023px) {
  .test-start-page .section-tests {
    background-image: unset;
    padding-top: 60px;
  }
}
.test-start-page .section-tests .db-section-title {
  font-family: Rubik;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  font-size: 46px;
  line-height: 0.96;
  color: #000;
  margin-bottom: 0;
}
.test-start-page .section-tests .db-section-subtitle {
  font-family: Rubik;
  font-size: 30px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.37;
  letter-spacing: normal;
  text-align: left;
  color: #79828b;
  margin-bottom: 80px;
  margin-top: 0;
}
@media screen and (max-width: 1023px) {
  .test-start-page .section-tests .db-section-subtitle {
    margin-bottom: 20px;
  }
}
.test-start-page .section-tests .db-container.new-test {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .test-start-page .section-tests .db-container.new-test .half-row-wrapper:nth-of-type(1) {
    margin-bottom: 60px;
  }
}
.test-start-page .section-tests .db-container.new-test .db-box {
  padding: 44px 100px 40px 50px;
}
@media screen and (max-width: 1023px) {
  .test-start-page .section-tests .db-container.new-test .db-box {
    padding: 44px 50px 40px 50px;
  }
}
.test-start-page .section-tests .db-container.new-test .new-test-title {
  font-family: Rubik;
  font-size: 22px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: black;
  margin-bottom: 17px;
}
.test-start-page .section-tests .db-container.new-test .new-test-module {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: black;
  margin-bottom: 34px;
}
.test-start-page .section-tests .db-container.new-test .new-test-age {
  font-family: Rubik;
  font-size: 22px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  padding-bottom: 34px;
}
.test-start-page .section-tests .db-container.new-test .new-test-duration {
  width: 33%;
}
.test-start-page .section-tests .db-container.new-test .new-test-duration .new-test-duration-measure {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.test-start-page .section-tests .db-container.new-test .new-test-duration .new-test-duration-value {
  font-family: Rubik;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}
.test-start-page .section-tests .db-container.new-test .new-test-pass-score {
  width: 33%;
}
.test-start-page .section-tests .db-container.new-test .new-test-pass-score .new-test-score-measure {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.test-start-page .section-tests .db-container.new-test .new-test-pass-score .new-test-score-value {
  font-family: Rubik;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}
.test-start-page .section-tests .db-container.new-test .new-test-questions {
  width: 33%;
}
.test-start-page .section-tests .db-container.new-test .new-test-questions .new-test-questions-label {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.test-start-page .section-tests .db-container.new-test .new-test-questions .new-test-questions-value {
  font-family: Rubik;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}

.tag-purple::before,
.tag-purple .tag {
  color: #9a62fa;
}

.test-background {
  position: fixed;
  display: flex;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1001;
  background-image: url("../../img/tests/test-background.jpg");
}
@media screen and (max-width: 767px) {
  .test-background {
    display: block;
  }
}
.test-background .test-content {
  width: 100%;
}
.test-background .test-content .test-header {
  height: 102px;
  text-align: right;
  padding-top: 49px;
  padding-right: 22px;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-header {
    height: 80px;
    padding-top: 30px;
  }
}
.test-background .test-content .test-header a {
  font-family: Rubik;
  font-size: 30px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  width: 177px;
  height: 59px;
  padding: 17px 58px 15px;
  border-radius: 30px;
  background-color: #9b63fc;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-header a {
    font-size: 18px;
    padding: 13px 55px 12px;
  }
}
.test-background .test-content .test-card {
  width: calc(100% - 44px);
  height: calc(100% - 152px);
  margin: 27px 22px 32px 22px;
  padding: 22px 28px 27px;
  border-radius: 18.3px;
  box-shadow: 1.7px 2.5px 73px 0 rgba(0, 0, 0, 0.29);
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card {
    width: 100%;
    height: calc(100% - 180px);
    display: block;
    position: absolute;
    margin: 0px 0px 0px 0px;
  }
}
.test-background .test-content .test-card .test-card-top, .test-background .test-content .test-card .test-card-bottom {
  height: 50%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-top, .test-background .test-content .test-card .test-card-bottom {
    height: unset;
  }
}
.test-background .test-content .test-card .test-card-icon {
  width: 100%;
  text-align: center;
}
.test-background .test-content .test-card .test-card-icon img {
  height: 104px;
  width: 105px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-icon img {
    display: none;
  }
}
.test-background .test-content .test-card .test-card-question {
  width: 100%;
  font-family: Rubik;
  font-size: 46px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #000;
  margin-top: 43px;
}
@media screen and (max-width: 1199px) {
  .test-background .test-content .test-card .test-card-question {
    font-size: 37px;
    margin-top: 16px;
  }
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-question {
    font-size: 24px;
    margin-top: 0px;
  }
}
.test-background .test-content .test-card .test-card-explanation {
  width: 335px;
  height: 67px;
  background-image: url("../../img/tests/test-graphic.png");
  background-repeat: no-repeat;
  font-family: Rubik;
  font-size: 30px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  padding: 10px 15px 15px 15px;
  margin-top: 32px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-explanation {
    font-size: 18px;
    width: 280px;
    margin-bottom: 10px;
    padding: 13px 15px 15px 15px;
    margin-top: 13px;
    background-size: contain;
  }
}
.test-background .test-content .test-card .test-card-answers {
  display: flex;
  flex-flow: wrap;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers {
    position: absolute;
    display: inline-block;
  }
}
.test-background .test-content .test-card .test-card-answers a {
  width: calc(50% - 5px);
  height: calc(50% - 5px);
  font-family: Rubik;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
  padding: 44px 47px 42px 47px;
  border-radius: 10.2px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1023px) {
  .test-background .test-content .test-card .test-card-answers a {
    font-size: 24px;
    padding: 20px 20px 20px 20px;
  }
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a {
    width: calc(100% - 5px);
    font-size: 16px;
    padding: 13px 10px 13px 10px;
    margin-bottom: 10px;
    height: unset;
  }
}
.test-background .test-content .test-card .test-card-answers a span {
  height: 47px;
  min-width: 47px;
  margin-right: 40px;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a span {
    background-size: contain;
    height: 20px;
    min-width: 20px;
    margin-right: 15px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(1) {
  background-color: #e65372;
  margin-right: 5px;
  margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(1) {
    width: calc(100% - 5px);
    font-size: 16px;
    padding: 13px 10px 13px 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(1) span {
  background-image: url("../../img/tests/test-answer-square.png");
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(1) span {
    background-size: contain;
    height: 20px;
    min-width: 20px;
    margin-right: 15px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(2) {
  background-color: #28a5e2;
  margin-left: 5px;
  margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(2) {
    width: calc(100% - 5px);
    font-size: 16px;
    padding: 13px 10px 13px 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(2) span {
  background-image: url("../../img/tests/test-answer-circle.png");
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(2) span {
    background-size: contain;
    height: 20px;
    min-width: 20px;
    margin-right: 15px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(3) {
  background-color: #e19d00;
  margin-right: 5px;
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(3) {
    width: calc(100% - 5px);
    font-size: 16px;
    padding: 13px 10px 13px 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(3) span {
  background-image: url("../../img/tests/test-answer-romb.png");
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(3) span {
    background-size: contain;
    height: 20px;
    min-width: 20px;
    margin-right: 15px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(4) {
  background-color: #00bca9;
  margin-left: 5px;
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(4) {
    width: calc(100% - 5px);
    font-size: 16px;
    padding: 13px 10px 13px 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
  }
}
.test-background .test-content .test-card .test-card-answers a:nth-of-type(4) span {
  background-image: url("../../img/tests/test-answer-triangle.png");
}
@media screen and (max-width: 767px) {
  .test-background .test-content .test-card .test-card-answers a:nth-of-type(4) span {
    background-size: contain;
    height: 20px;
    min-width: 20px;
    margin-right: 15px;
  }
}
.test-background .test-sidebar {
  width: 179px;
  height: 100%;
  margin: 0 0 0 0;
  padding: 29px 32px 43px 39px;
  background-color: #000;
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar {
    width: 100%;
    height: 70px;
    padding: 5px 0px 0px 0px;
    display: flex;
  }
}
.test-background .test-sidebar hr {
  width: 100%;
  color: #ffffff;
  height: 3px;
  background-color: #ffffff;
  margin-bottom: 20px;
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar hr {
    display: none;
  }
}
.test-background .test-sidebar .test-timer {
  background-image: url("../../img/tests/test-timer.png");
  background-repeat: no-repeat;
  width: 79px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  font-family: Rubik;
  font-size: 36px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  padding-top: 16px;
  color: #ffffff;
  height: 78px;
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar .test-timer {
    width: 25%;
    display: inline-block;
    background-position: center;
    background-size: contain;
    margin-top: 6px;
    height: 50px;
    font-size: 24px;
    padding-top: 13px;
  }
}
.test-background .test-sidebar .test-correct-answers, .test-background .test-sidebar .test-wrong-answers {
  font-family: Rubik;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar .test-correct-answers, .test-background .test-sidebar .test-wrong-answers {
    width: 25%;
    height: 100%;
    display: inline-block;
    font-size: 10px;
  }
}
.test-background .test-sidebar .test-correct-answers-count, .test-background .test-sidebar .test-wrong-answers-count {
  font-family: Rubik;
  font-size: 72px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  height: 75px;
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar .test-correct-answers-count, .test-background .test-sidebar .test-wrong-answers-count {
    height: unset;
    font-size: 34px;
  }
}
.test-background .test-sidebar .test-help {
  position: absolute;
  bottom: 43px;
  left: 50px;
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar .test-help {
    padding-top: 5px;
    display: inline-block;
    position: unset;
    width: 25%;
    left: unset;
    bottom: unset;
  }
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar .test-help a {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .test-background .test-sidebar .test-help a img {
    height: 50px;
    display: inline-block;
  }
}

.test-success-background {
  background-image: url("../../img/tests/test-success-background.jpg");
}

.test-failed-background {
  background-image: url("../../img/tests/test-fail-background.jpg");
}

.test-success-background, .test-failed-background {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1101;
  cursor: pointer;
}
.test-success-background .test-success-wrapper, .test-success-background .test-failed-wrapper, .test-failed-background .test-success-wrapper, .test-failed-background .test-failed-wrapper {
  width: 100%;
  position: absolute;
  top: 100px;
  text-align: center;
  padding: 0px 150px 0px 150px;
}
@media screen and (max-width: 1023px) {
  .test-success-background .test-success-wrapper, .test-success-background .test-failed-wrapper, .test-failed-background .test-success-wrapper, .test-failed-background .test-failed-wrapper {
    padding: 0px 50px 0px 50px;
  }
}
@media screen and (max-width: 413px) {
  .test-success-background .test-success-wrapper, .test-success-background .test-failed-wrapper, .test-failed-background .test-success-wrapper, .test-failed-background .test-failed-wrapper {
    padding: 0px 10px 0px 10px;
    top: 40px;
  }
}
.test-success-background .test-success-wrapper img, .test-success-background .test-failed-wrapper img, .test-failed-background .test-success-wrapper img, .test-failed-background .test-failed-wrapper img {
  margin-top: 100px;
  display: inline-block;
}
@media screen and (max-width: 1023px) {
  .test-success-background .test-success-wrapper img, .test-success-background .test-failed-wrapper img, .test-failed-background .test-success-wrapper img, .test-failed-background .test-failed-wrapper img {
    margin-top: 70px;
  }
}
@media screen and (max-width: 413px) {
  .test-success-background .test-success-wrapper img, .test-success-background .test-failed-wrapper img, .test-failed-background .test-success-wrapper img, .test-failed-background .test-failed-wrapper img {
    margin-top: 10px;
  }
}
.test-success-background .test-success-wrapper .test-success-title, .test-success-background .test-success-wrapper .test-failed-title, .test-success-background .test-failed-wrapper .test-success-title, .test-success-background .test-failed-wrapper .test-failed-title, .test-failed-background .test-success-wrapper .test-success-title, .test-failed-background .test-success-wrapper .test-failed-title, .test-failed-background .test-failed-wrapper .test-success-title, .test-failed-background .test-failed-wrapper .test-failed-title {
  font-family: Rubik;
  font-size: 72px;
  font-weight: bold;
  font-stretch: normal;
  font-style: italic;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}
@media screen and (max-width: 1023px) {
  .test-success-background .test-success-wrapper .test-success-title, .test-success-background .test-success-wrapper .test-failed-title, .test-success-background .test-failed-wrapper .test-success-title, .test-success-background .test-failed-wrapper .test-failed-title, .test-failed-background .test-success-wrapper .test-success-title, .test-failed-background .test-success-wrapper .test-failed-title, .test-failed-background .test-failed-wrapper .test-success-title, .test-failed-background .test-failed-wrapper .test-failed-title {
    font-size: 60px;
  }
}
@media screen and (max-width: 413px) {
  .test-success-background .test-success-wrapper .test-success-title, .test-success-background .test-success-wrapper .test-failed-title, .test-success-background .test-failed-wrapper .test-success-title, .test-success-background .test-failed-wrapper .test-failed-title, .test-failed-background .test-success-wrapper .test-success-title, .test-failed-background .test-success-wrapper .test-failed-title, .test-failed-background .test-failed-wrapper .test-success-title, .test-failed-background .test-failed-wrapper .test-failed-title {
    font-size: 30px;
  }
}
.test-success-background .test-success-wrapper .test-success-title .test-icon img, .test-success-background .test-success-wrapper .test-failed-title .test-icon img, .test-success-background .test-failed-wrapper .test-success-title .test-icon img, .test-success-background .test-failed-wrapper .test-failed-title .test-icon img, .test-failed-background .test-success-wrapper .test-success-title .test-icon img, .test-failed-background .test-success-wrapper .test-failed-title .test-icon img, .test-failed-background .test-failed-wrapper .test-success-title .test-icon img, .test-failed-background .test-failed-wrapper .test-failed-title .test-icon img {
  margin-top: 10px;
}
.test-success-background .test-success-wrapper .test-success-subtitle, .test-success-background .test-success-wrapper .test-failed-subtitle, .test-success-background .test-failed-wrapper .test-success-subtitle, .test-success-background .test-failed-wrapper .test-failed-subtitle, .test-failed-background .test-success-wrapper .test-success-subtitle, .test-failed-background .test-success-wrapper .test-failed-subtitle, .test-failed-background .test-failed-wrapper .test-success-subtitle, .test-failed-background .test-failed-wrapper .test-failed-subtitle {
  font-family: Rubik;
  font-size: 42px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  margin-top: 42px;
  margin-bottom: 42px;
}
@media screen and (max-width: 1023px) {
  .test-success-background .test-success-wrapper .test-success-subtitle, .test-success-background .test-success-wrapper .test-failed-subtitle, .test-success-background .test-failed-wrapper .test-success-subtitle, .test-success-background .test-failed-wrapper .test-failed-subtitle, .test-failed-background .test-success-wrapper .test-success-subtitle, .test-failed-background .test-success-wrapper .test-failed-subtitle, .test-failed-background .test-failed-wrapper .test-success-subtitle, .test-failed-background .test-failed-wrapper .test-failed-subtitle {
    font-size: 38px;
  }
}
@media screen and (max-width: 413px) {
  .test-success-background .test-success-wrapper .test-success-subtitle, .test-success-background .test-success-wrapper .test-failed-subtitle, .test-success-background .test-failed-wrapper .test-success-subtitle, .test-success-background .test-failed-wrapper .test-failed-subtitle, .test-failed-background .test-success-wrapper .test-success-subtitle, .test-failed-background .test-success-wrapper .test-failed-subtitle, .test-failed-background .test-failed-wrapper .test-success-subtitle, .test-failed-background .test-failed-wrapper .test-failed-subtitle {
    font-size: 18px;
  }
}

.test-question-preview {
  background-image: url("../../img/tests/test-preview-background.jpg");
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1101;
}
.test-question-preview .test-question-preview-wrapper {
  width: 100%;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.test-question-preview .test-question-preview-wrapper .test-question-preview-title {
  width: 70%;
  padding: 30px 169px 30px 167px;
  box-shadow: 1.7px 2.5px 73px 0 rgba(0, 0, 0, 0.16);
  background-color: #ffffff;
  font-family: Rubik;
  font-size: 52px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #000;
  margin-left: auto;
  margin-right: auto;
  border-radius: 100px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .test-question-preview .test-question-preview-wrapper .test-question-preview-title {
    padding: 30px 100px 30px 100px;
    font-size: 34px;
  }
}
@media screen and (max-width: 413px) {
  .test-question-preview .test-question-preview-wrapper .test-question-preview-title {
    padding: 30px 30px 30px 30px;
    font-size: 22px;
    width: 90%;
  }
}
.test-question-preview .test-question-preview-wrapper .test-question-preview-timer {
  font-family: Rubik;
  font-size: 54px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .test-question-preview .test-question-preview-wrapper .test-question-preview-timer {
    font-size: 34px;
  }
}
@media screen and (max-width: 413px) {
  .test-question-preview .test-question-preview-wrapper .test-question-preview-timer {
    font-size: 22px;
  }
}
.test-question-preview .test-question-preview-wrapper .test-question-preview-timer .test-question-preview-timer-seconds {
  font-family: Rubik;
  font-size: 140px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  margin-top: 37px;
}
@media screen and (max-width: 1023px) {
  .test-question-preview .test-question-preview-wrapper .test-question-preview-timer .test-question-preview-timer-seconds {
    font-size: 100px;
  }
}

#ua-tab.social-feed {
  max-width: 980px;
  margin: 0 auto;
}
#ua-tab.social-feed .event-container {
  width: 50%;
  padding: 50px 20px 0;
}
#ua-tab.social-feed .event-container .event {
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  background: #fff;
  border: 1px solid #e7e7e7;
  width: 450px;
  text-align: center;
}
#ua-tab.social-feed .event-container .event.wo-img {
  padding: 50px 0 0;
}
#ua-tab.social-feed .event-container .event.wo-img .event-meta {
  padding-top: 10px;
}
#ua-tab.social-feed .event-container .event .module {
  position: absolute;
  top: -18px;
  left: 50%;
  font-size: 20px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  font-weight: 700;
  color: #fff;
  padding: 8px 15px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  z-index: 20;
}
#ua-tab.social-feed .event-container .event .module.junior {
  background: #ffac24;
}
#ua-tab.social-feed .event-container .event .module.middle {
  background: #00d589;
}
#ua-tab.social-feed .event-container .event .module.senior {
  background: #00c0d6;
}
#ua-tab.social-feed .event-container .event .cover-image {
  position: relative;
  display: block;
  transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
}
#ua-tab.social-feed .event-container .event .cover-image:hover {
  opacity: 0.8;
}
#ua-tab.social-feed .event-container .event .cover-image span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #111;
  border-radius: 3px;
  color: #fff;
  padding: 1px 10px 0;
  font-size: 12px;
  text-transform: uppercase;
}
#ua-tab.social-feed .event-container .event .cover-icon {
  position: relative;
  display: inline-block;
  background: #e3e3e3;
  width: 128px;
  height: 128px;
  border-radius: 50%;
}
#ua-tab.social-feed .event-container .event .cover-icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#ua-tab.social-feed .event-container .event .event-meta {
  padding: 30px;
}
#ua-tab.social-feed .event-container .event .event-meta h2 {
  margin: 0;
}
#ua-tab.social-feed .event-container .event .event-meta h2 a {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  line-height: 30px;
}
#ua-tab.social-feed .event-container .event .event-meta h2 a:hover {
  color: #666;
}
#ua-tab.social-feed .event-container .event .event-meta h2 + span {
  display: block;
  font-size: 13px;
  color: #c0c0c0;
  margin: 5px 0 15px;
}
#ua-tab.social-feed .event-container .event .event-meta p {
  color: #777;
  font-size: 15px;
  text-align: left;
  margin: 0;
}
#ua-tab.social-feed .event-container .event .event-meta .gallery {
  display: none;
  margin: 0 0 20px;
}
#ua-tab.social-feed .event-container .event .event-meta .action-buttons-holder {
  margin-top: 20px;
}

@media screen and (max-width: 1000px), screen and (max-device-width: 1000px) {
  #ua-tab.social-feed .event-container {
    width: 100%;
  }
  #ua-tab.social-feed .event-container .event {
    width: 100%;
  }
}
.inner-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/*********************************
	Tag Styles
*********************************/
.tag-junior {
  color: #F5A623 !important;
}

.tag-middle {
  color: #A2D273 !important;
}

.tag-senior {
  color: #719DE1 !important;
}

.tag-teen-1 {
  color: #a92cfc;
}

.tag-teen-2 {
  color: #162ccb;
}

.tag-teen-1 {
  color: #a92cfc;
}

.tag-teen-2 {
  color: #162ccb;
}

/*********************************
	Buttons styles
*********************************/
.btn, .btn-7, .btn-6 {
  padding: 0 14px;
  min-width: 120px;
  height: 48px;
  display: inline-block;
  outline: none;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 46px;
  text-align: center;
  transition: color 0.1s ease, border 0.1s ease, background-color 0.1s ease;
}
@media screen and (min-width: 768px) {
  .btn, .btn-7, .btn-6 {
    min-width: 158px;
    cursor: pointer;
  }
}

.btn-1 {
  background-color: #8441E2;
  color: #fff;
}
.btn-1:not(:last-of-type) {
  margin-right: 10px;
}
@media screen and (min-width: 1024px) {
  .btn-1:hover {
    background-color: #9b72d4;
  }
}

.btn-2 {
  background-color: #93b4e8;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .btn-2:hover {
    background-color: #4a90e2;
  }
}

.btn-3 {
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .btn-3:hover {
    background-color: #fff;
    color: #4a90e2;
  }
}

.btn-4 {
  border: none;
  background-color: #fff;
  color: #8441e2;
}
@media screen and (min-width: 1024px) {
  .btn-4:hover {
    color: #4a90e2;
  }
}

.btn-5 {
  border: 1px solid #9013fe;
  background-color: transparent;
  color: #9013fe;
}
@media screen and (min-width: 1024px) {
  .btn-5:hover {
    background-color: #9013fe;
    color: #fff;
  }
}

.btn-6 {
  background-color: #a92cfc;
  color: #fff;
}
@media screen and (min-device-width: 1024px) {
  .btn-6:hover {
    background-color: #7403bf;
  }
}

.btn-7 {
  border: 1px solid #9013fe;
  background-color: transparent;
  min-width: 250px;
  color: #9013fe;
}
@media screen and (min-width: 1024px) {
  .btn-7:hover {
    background-color: #9013fe;
    color: #fff;
  }
}

/*********************************
	Slick Styles
*********************************/
.slick-arrow {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 0;
  transition: color 0.1s ease, border 0.1s ease, background-color 0.1s ease;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
}
@media screen and (min-width: 1024px) {
  .slick-arrow:hover::before {
    border: solid #9b72d4;
  }
}
.slick-arrow::before {
  content: "";
  padding: 6px;
  display: inline-block;
  border: solid #8441E2;
  transform: rotate(45deg);
}
.slick-arrow.slick-prev::before {
  border-width: 0 0 1px 1px;
}
.slick-arrow.slick-next::before {
  border-width: 1px 1px 0 0;
}

.slick-dots {
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: -30px;
  z-index: 4;
}
@media screen and (min-width: 1024px) {
  .slick-dots {
    bottom: -50px;
  }
}
.slick-dots li,
.slick-dots button {
  width: 10px;
  height: 10px;
  display: block;
}
.slick-dots li:not(:last-child) {
  margin-right: 10px;
}
.slick-dots .slick-active button {
  background-color: #8441E2;
}
.slick-dots button {
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #D8D8D8;
  outline: none;
  font-size: 0;
}

/*********************************
	Level Block
*********************************/
.leve-block:not(:last-child) {
  margin-right: 14px;
}
@media screen and (min-width: 1024px) {
  .leve-block:not(:last-child) {
    margin-right: 20px;
  }
}
.leve-block .level-title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
}
.leve-block .level-age {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 11px;
  color: #999999;
  line-height: 1;
}

/*********************************
	Hero section
*********************************/
.section-hero-text {
  padding: 0 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #8441E2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: left;
  position: relative;
}
.section-hero-text::before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgb(113, 42, 212) 0%, rgba(168, 45, 250, 0.57) 51%, rgba(165, 87, 201, 0.15) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.section-hero-text .inner-container {
  position: relative;
  z-index: 2;
}

.hero-title {
  margin: 0 auto 14px;
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .hero-title {
    max-width: 720px;
    margin: 0 0 10px;
    font-size: 42px;
    line-height: 1.4;
    text-align: left;
  }
}

.hero-sub-title {
  margin: 0 auto;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .hero-sub-title {
    max-width: 800px;
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    text-align: left;
  }
}

.section-label {
  padding: 0;
  margin: 0 auto 20px;
  font-weight: 500;
  font-size: 24px;
  color: #333333;
  text-align: center;
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .section-label {
    font-size: 31px;
    text-align: left;
  }
}
@media screen and (min-width: 1200px) {
  .section-label {
    margin: 0;
  }
}

.workshops-holder {
  padding: 48px 20px 54px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (min-width: 1200px) {
  .workshops-holder {
    padding: 80px 0 54px;
  }
}

/*********************************
	Error Alert Messages
*********************************/
.form-message::before,
.alert-message::before {
  content: "";
  display: inline-block;
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.form-message.error-message,
.alert-message.error-message {
  color: #d0021b;
}
.form-message.error-message::before,
.alert-message.error-message::before {
  background-image: url("../../img/svg/workshop/icon-error.svg");
}
.form-message.success-message,
.alert-message.success-message {
  color: #7ed321;
}
.form-message.success-message::before,
.alert-message.success-message::before {
  background-image: url("../../img/svg/workshop/icon-successes.svg");
}

.form-message {
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.form-message::before {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.form-message.general-message {
  margin: 10px auto 0;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .form-message.general-message {
    margin-top: 30px;
  }
}

.alert-message {
  padding: 10px 20px;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
  text-align: left;
  position: relative;
}
.alert-message::before {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  z-index: 8;
}
@media screen and (min-width: 1024px) {
  .alert-message::before {
    width: 40px;
    height: 40px;
  }
}
.alert-message p {
  width: calc(100% - 40px);
  margin: 0;
  font-size: 18px;
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 1024px) {
  .alert-message p {
    font-size: 24px;
  }
}
.alert-message .close {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.2);
  outline: none;
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .alert-message .close {
    width: 40px;
    height: 40px;
    cursor: pointer;
    top: -20px;
    right: -20px;
  }
  .alert-message .close:hover::after {
    opacity: 0.6;
  }
}
.alert-message .close::after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 auto;
  background-image: url("../../img/svg/icon-cross-black.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  transition: opacity 0.1s ease;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
@media screen and (min-width: 1024px) {
  .alert-message .close::after {
    width: 16px;
    height: 16px;
  }
}

/*********************************
	Section Top
*********************************/
.section-top {
  padding: 0 20px;
  height: auto;
  display: block;
  background-color: #fff;
}
@media screen and (min-width: 1200px) {
  .section-top {
    height: 106px;
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 1200px) {
  .section-top .inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.section-top form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.section-top .jcf-select,
.section-top select {
  width: 48%;
  height: 54px;
  border-radius: 3px;
  background-color: #F6F6F6;
  font-size: 15px;
  color: #9B9B9B;
  line-height: 1;
}
.section-top .jcf-select:not(:last-child):not(:nth-last-child(2)),
.section-top select:not(:last-child):not(:nth-last-child(2)) {
  margin-bottom: 14px;
}
@media screen and (min-width: 768px) {
  .section-top .jcf-select,
  .section-top select {
    min-width: 172px;
    width: auto;
  }
  .section-top .jcf-select:not(:last-child):not(:nth-last-child(2)),
  .section-top select:not(:last-child):not(:nth-last-child(2)) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 900px) {
  .section-top .jcf-select:not(:last-child),
  .section-top select:not(:last-child) {
    margin-right: 30px;
  }
}
.section-top .jcf-select:hover,
.section-top select:hover {
  background-color: #ececec;
}
.section-top .jcf-select {
  padding: 0 14px;
}
.section-top optgroup,
.section-top option {
  background-color: #fff;
}
.section-top optgroup {
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.section-top option {
  text-indent: 0;
  padding: 0 0 5px;
  font-size: 15px;
  line-height: 1.3;
  color: #333333;
}
.section-top .option-label {
  color: #9B9B9B;
}

/*********************************
	Content Workshop
*********************************/
.content-workshops {
  background-color: #fafafa;
}

/*********************************
	Section Base Compoenent
*********************************/
.section-base-block {
  padding: 40px 20px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
  position: relative;
}
@media screen and (min-width: 768px) {
  .section-base-block {
    padding: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .section-base-block {
    padding: 46px 60px;
  }
}

@media screen and (min-width: 1024px) {
  .container-divide {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1024px) {
  .container-divide .content-half {
    width: 50%;
  }
}

/*********************************
	Startting Workshops
*********************************/
.starting-workshops {
  position: relative;
}
.starting-workshops .section-hero-text {
  max-height: 286px;
  height: auto;
  background-image: url("../../img/workshop/online_banner.png");
}
@media screen and (min-width: 768px) {
  .starting-workshops .section-hero-text {
    height: 562px;
  }
}
.starting-workshops .section-hero-text .inner-container {
  padding-top: 20px;
}
@media screen and (max-width: 768px) {
  .starting-workshops .section-hero-text .inner-container {
    text-align: center;
  }
}
@media screen and (min-width: 1025px) {
  .starting-workshops .section-hero-text .inner-container {
    padding-bottom: 20px;
  }
}
.starting-workshops .section-hero-text .hero-title {
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .starting-workshops .section-hero-text .hero-sub-title {
    display: none;
  }
}
.starting-workshops .section-hero-text .btn, .starting-workshops .section-hero-text .btn-6, .starting-workshops .section-hero-text .btn-7 {
  position: relative;
}
@media screen and (max-width: 1024px) {
  .starting-workshops .section-hero-text .btn, .starting-workshops .section-hero-text .btn-6, .starting-workshops .section-hero-text .btn-7 {
    margin-bottom: -24px;
    bottom: -10px;
  }
}
@media screen and (min-width: 1025px) {
  .starting-workshops .section-hero-text .btn, .starting-workshops .section-hero-text .btn-6, .starting-workshops .section-hero-text .btn-7 {
    min-width: 204px;
    margin-top: 14px;
  }
}
@media screen and (max-width: 1024px) {
  .starting-workshops .content-section {
    padding-top: 56px;
  }
}
@media screen and (min-width: 1025px) {
  .starting-workshops .content-section {
    padding-top: 34px;
  }
}
.starting-workshops .section-top {
  padding: 20px;
}
@media screen and (min-width: 1200px) {
  .starting-workshops .section-top {
    padding: 0 20px;
  }
}
.starting-workshops .wrks-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.starting-workshops #wkrs-list {
  width: 2px;
  height: 1px;
  position: absolute;
  top: -90px;
}
.starting-workshops .wrkg-head {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: relative;
}
.starting-workshops .wrkg-tag-age,
.starting-workshops .wrkg-tag-online {
  top: 22px;
}
.starting-workshops .wrkg-tag-online {
  right: 10px;
}
@media screen and (max-width: 1024px) {
  .starting-workshops .filter-content.mobile-phone {
    margin-bottom: 24px;
  }
}

/*********************************
	Summer Camp
*********************************/
.summer-camp.detail-workshops .section-hero-text {
  height: 562px;
  background-image: none;
  background-image: url("../../img/workshop/hero-summer-camp.jpg");
}
.summer-camp.detail-workshops .section-hero-text::before {
  display: none;
}
.summer-camp.detail-workshops .section-top {
  padding: 20px;
}
@media screen and (min-width: 1200px) {
  .summer-camp.detail-workshops .section-top {
    padding: 0 20px;
  }
}

/*********************************
	Workshop Box
*********************************/
.workshop-box {
  max-width: 580px;
  width: 100%;
  margin: 0 auto 40px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
  .workshop-box {
    width: calc(50% - 20px);
    margin: 0 0 40px;
  }
}
@media screen and (min-device-width: 1200px) {
  .workshop-box {
    transition: box-shadow 0.2s ease;
  }
  .workshop-box:hover {
    box-shadow: 2px 3px 14px 0.5px rgba(0, 0, 0, 0.4);
  }
}
.workshop-box .wrk-image {
  width: 100%;
  height: 178px;
  display: block;
  overflow: hidden;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  position: relative;
}
@media screen and (min-device-width: 1200px) {
  .workshop-box .wrk-image:hover img {
    transform: scale(1.05);
  }
}
.workshop-box .wrk-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 2;
}
.workshop-box .wrk-image .tag {
  padding: 4px 14px;
  min-width: 104px;
  height: 28px;
  background-color: #fff;
  font-size: 13px;
  line-height: 20px;
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 4;
}
.workshop-box .wrk-info {
  padding: 20px 24px;
}
.workshop-box .wrk-row {
  padding: 0;
}
@media screen and (max-width: 1024px) {
  .workshop-box .wrk-row:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (max-width: 414px) {
  .workshop-box .wrk-row {
    display: flex;
  }
}
.workshop-box .wrk-row:nth-last-child(2) {
  margin-bottom: 20px;
}
.workshop-box .wrk-row:last-child {
  padding-top: 12px;
  padding-bottom: 0;
  flex-direction: column;
  border-top: 1px solid #E8E8E8;
}
.workshop-box .wrk-row:last-child .additional-hall-details {
  margin-top: 13px;
}
.workshop-box .wrk-row:last-child .btn, .workshop-box .wrk-row:last-child .btn-6, .workshop-box .wrk-row:last-child .btn-7 {
  margin-top: 20px;
}
.workshop-box .wrk-level {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media screen and (max-width: 1199px) {
  .workshop-box .wrk-level {
    margin: 0 auto;
    justify-content: space-evenly;
  }
}
@media screen and (min-width: 1200px) {
  .workshop-box .wrk-level {
    max-width: initial;
    margin: 0;
    justify-content: flex-start;
  }
}
.workshop-box .leve-block {
  margin-bottom: 20px;
}
.workshop-box .wrk-price {
  padding: 0 0 0 14px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 20px);
  color: #02d589;
  line-height: 0.8;
  text-transform: uppercase;
}
@media screen and (min-width: 1024px) {
  .workshop-box .wrk-price {
    flex: 1;
  }
}
.workshop-box .wrk-price::before {
  content: "";
  width: 20px;
  height: 18px;
  margin-right: 8px;
  display: inline-block;
  background-image: url("/img/online-landing/icons/icon_wallet.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.courses-box .workshop-box .wrk-price {
  justify-content: flex-end;
}
.workshop-box .wrk-title {
  width: 90%;
  margin: 0 auto 20px;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  line-height: 1.3;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .workshop-box .wrk-title {
    width: 100%;
    margin: 0;
    text-align: left;
  }
}
.workshop-box .wb-lector,
.workshop-box .wrk-location,
.workshop-box .wrk-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  color: #000;
  line-height: 1.1;
  text-align: left;
  position: relative;
}
@media screen and (min-width: 768px) {
  .workshop-box .wb-lector,
  .workshop-box .wrk-location,
  .workshop-box .wrk-time {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}
.workshop-box .wb-lector::before,
.workshop-box .wrk-location::before,
.workshop-box .wrk-time::before {
  content: "";
  width: 26px;
  height: 20px;
  margin-right: 8px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}
@media screen and (min-width: 768px) {
  .workshop-box .wb-lector::before,
  .workshop-box .wrk-location::before,
  .workshop-box .wrk-time::before {
    margin-right: 12px;
  }
}
.workshop-box .wb-lector > div,
.workshop-box .wrk-location > div,
.workshop-box .wrk-time > div {
  text-align: left;
}
.workshop-box .wb-lector span,
.workshop-box .wb-lector address,
.workshop-box .wrk-location span,
.workshop-box .wrk-location address,
.workshop-box .wrk-time span,
.workshop-box .wrk-time address {
  display: inline-block;
}
@media screen and (max-width: 1024px) {
  .workshop-box .wrk-location,
  .workshop-box .wb-lector {
    margin-bottom: 4px;
  }
}
@media screen and (min-width: 1201px) {
  .workshop-box .wrk-location,
  .workshop-box .wb-lector {
    padding-right: 24px;
  }
}
.workshop-box .wrk-location {
  margin-right: 2px;
  margin-bottom: 10px;
}
@media screen and (min-width: 1200px) {
  .workshop-box .wrk-location {
    margin-bottom: 0;
  }
}
.workshop-box .wrk-location::before {
  background-image: url("../../img/svg/workshop/icon-location.svg");
  background-size: auto 100%;
}
.workshop-box .wrk-location address {
  font-style: normal;
}
.workshop-box .wb-lector::before {
  background-image: url("../../img/online-landing/icons/mentor-icon.jpg");
  background-size: 100% auto;
}
@media screen and (min-width: 1201px) {
  .workshop-box .wrk-time {
    padding-left: 24px;
    border-left: 1px solid #ebebeb;
  }
}
.workshop-box .wrk-time::before {
  background-image: url("../../img/svg/workshop/icon-time.svg");
}
.workshop-box .wrkg-head {
  position: relative;
}
.workshop-box .wrkg-tag-age,
.workshop-box .wrkg-tag-online {
  top: 22px;
}
.workshop-box .wrkg-tag-online {
  right: 10px;
}

.load-more {
  padding-top: 24px;
  width: 100%;
  text-align: center;
}

/*********************************
	Detail Workshop
*********************************/
.detail-workshops .section-hero-text {
  height: 600px;
  background-image: url("../../img/hero-demos.jpg");
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .detail-workshops .section-hero-text {
    height: 812px;
    text-align: left;
  }
}
@media screen and (min-width: 1024px) {
  .detail-workshops .section-hero-text .hero-title {
    max-width: 60%;
  }
}
.detail-workshops .section-hero-text .hero-sub-title {
  max-width: 50%;
  margin-bottom: 38px;
}
.detail-workshops .section-hero-text .btn:not(:last-child), .detail-workshops .section-hero-text .btn-6:not(:last-child), .detail-workshops .section-hero-text .btn-7:not(:last-child) {
  margin-right: 44px;
}
.detail-workshops .section-top {
  padding: 20px;
}
@media screen and (min-width: 1200px) {
  .detail-workshops .section-top {
    padding: 0 20px;
  }
}
.detail-workshops .wrk-level,
.detail-workshops .wrk-gen-info {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 1200px) {
  .detail-workshops .wrk-level,
  .detail-workshops .wrk-gen-info {
    justify-content: flex-start;
  }
}
.detail-workshops .wrk-level {
  margin-bottom: 20px;
}
@media screen and (min-width: 1200px) {
  .detail-workshops .wrk-level {
    width: 36%;
    margin-bottom: 0;
  }
}
.detail-workshops .leve-block .level-title {
  margin-bottom: 10px;
}
.detail-workshops .leve-block .level-age {
  color: #000;
}
.detail-workshops .wrk-gen-info {
  flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
  .detail-workshops .wrk-gen-info {
    justify-content: space-between;
  }
}
@media screen and (min-width: 1200px) {
  .detail-workshops .wrk-gen-info {
    width: 64%;
  }
}

.wrk-gen-info h3 {
  margin: 0 12px;
  font-weight: 400;
  font-size: 18px;
}
@media screen and (min-width: 1024px) {
  .wrk-gen-info h3 {
    margin: 0;
  }
}
.wrk-gen-info .label {
  color: #8441E2;
}
.wrk-gen-info .value {
  color: #000;
}

/*********************************
	Workskhop Details
*********************************/
.workshop-details {
  padding: 39px 20px;
}
@media screen and (min-width: 1024px) {
  .workshop-details {
    padding: 70px 20px;
  }
}
.workshop-details .section-label {
  margin-bottom: 56px;
}
.workshop-details .wrk-info {
  margin-bottom: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (min-width: 1024px) {
  .workshop-details .wrk-info {
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .workshop-details .info-block {
    width: 100%;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 769px) and (min-width: 1024px) {
  .workshop-details .info-block {
    padding-left: 5%;
    width: 44%;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .workshop-details .info-block {
    padding-left: 0;
    width: auto;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1200px) {
  .workshop-details .info-block:not(:last-child) {
    margin-right: 80px;
  }
}
.workshop-details .info-label {
  margin-bottom: 14px;
  display: block;
  font-size: 16px;
  color: #9B9B9B;
  line-height: 1;
}
.workshop-details .info-value {
  font-size: 16px;
  color: #333333;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
}
.workshop-details .info-value::before {
  content: "";
  width: 28px;
  height: 28px;
  margin-right: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.workshop-details .info-value span,
.workshop-details .info-value address {
  display: block;
  font-style: normal;
}
.workshop-details .date .info-value::before {
  background-image: url("../../img/svg/workshop/icon-calendar.svg");
}
.workshop-details .time .info-value::before {
  background-image: url("../../img/svg/workshop/icon-clock.svg");
}
.workshop-details .location .info-value::before {
  background-image: url("../../img/svg/workshop/icon-location.svg");
}
.workshop-details .price .info-value {
  font-weight: 700;
  color: #00C853;
}
.workshop-details .price .info-value::before {
  background-image: url("../../img/svg/workshop/icon-dollar.svg");
}
.workshop-details .content-half {
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .workshop-details .content-half {
    margin-bottom: 0;
    text-align: left;
  }
}
.workshop-details .content-half p {
  margin-bottom: 20px;
  font-size: 16px;
  color: #333333;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .workshop-details .content-half p {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1200px) {
  .workshop-details .content-half p {
    max-width: 95%;
  }
}
.workshop-details .workshop-gallery {
  max-width: 460px;
  height: 290px;
}
.workshop-details .workshop-gallery.workshop-gallery-full {
  max-width: initial;
  height: auto;
}
.workshop-details .workshop-gallery-full {
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
@media screen and (min-width: 1200px) {
  .workshop-details .workshop-gallery-full {
    margin-bottom: 100px;
  }
}
.workshop-details .gallery-item {
  height: 290px;
}

.workshop-gallery {
  margin: 0 auto;
  border-radius: 10px;
  position: relative;
}
.workshop-gallery .slick-prev {
  left: -50px;
}
.workshop-gallery .slick-next {
  right: -50px;
}
.workshop-gallery .gallery-item {
  border-radius: 10px;
  overflow: hidden;
}
.workshop-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/*********************************
	Section Topics
*********************************/
.section-topics {
  padding: 40px 40px 0 40px;
}
@media screen and (min-width: 1024px) {
  .section-topics {
    padding: 72px 20px 0 20px;
  }
}
.section-topics .section-label {
  margin-bottom: 40px;
}

.topics-content .topic-row {
  padding-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .topics-content .topic-row {
    padding-bottom: 40px;
  }
}
.topics-content .topic-row:not(:last-child) {
  margin-bottom: 30px;
  border-bottom: 1px solid #F4F4F4;
}
@media screen and (min-width: 768px) {
  .topics-content .topic-row:not(:last-child) {
    margin-bottom: 50px;
  }
}
.topics-content .topic-label {
  margin-bottom: 10px;
  display: block;
  font-weight: 400;
  font-size: 16px;
  color: #8441E2;
  line-height: 1;
}
.topics-content .topic-title {
  margin: 0 0 20px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  line-height: 1.3;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .topics-content .topic-title {
    margin-bottom: 40px;
    font-size: 24px;
  }
}
.topics-content .topic-title span:last-child {
  width: calc(100% - 46px);
}
.topics-content .topic-number {
  width: 46px;
}
.topics-content .topic-detail {
  padding-left: 60px;
  margin-bottom: 16px;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .topics-content .topic-detail {
    font-size: 16px;
  }
}

.topics-simple .topic-row {
  padding: 0;
}

.summer-camp .topics-content .topic-detail {
  padding-left: 0;
}

.section-technology {
  padding: 40px 20px;
  display: flex;
  align-items: center;
  background-image: url("../../img/hero-demos.jpg");
  background-color: #8441E2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .section-technology {
    padding: 0 20px;
    height: 506px;
  }
}
.section-technology::before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #8441E2 0%, rgba(24, 79, 136, 0.3) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.section-technology .inner-container {
  position: relative;
  z-index: 2;
}
.section-technology .content-half {
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .section-technology .content-half {
    text-align: left;
  }
}
.section-technology .technology-title {
  margin: 0 auto 20px;
  font-weight: 500;
  color: #fff;
  font-size: 24px;
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .section-technology .technology-title {
    margin: 0 0 20px;
    font-size: 30px;
  }
}
.section-technology .technology-descritption {
  margin-bottom: 20px;
  font-weight: 400;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}
@media screen and (min-width: 1024px) {
  .section-technology .technology-descritption {
    max-width: 80%;
    font-size: 16px;
  }
}
.section-technology .video-holder {
  padding-top: 25px;
  padding-bottom: 56.25%; /* 16:9 */
  max-width: 564px;
  height: 0;
  margin: 40px auto;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .section-technology .video-holder {
    margin: 0;
    margin-left: auto;
  }
}
.section-technology iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.summer-camp .section-technology {
  background-image: none;
  background-image: url("../../img/workshop/weekly-program-bg.jpg");
}
.summer-camp .section-technology::before {
  display: none;
}

/*********************************
	Enter Workshop
*********************************/
.enter-workshop .content-workshops {
  padding: 44px 20px 60px;
}
.enter-workshop .section-label {
  margin-bottom: 30px;
}
.enter-workshop .content-half:last-child {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.enter-workshop .content-half .section-label {
  max-width: 80%;
  margin: 0 auto 16px;
  line-height: 1.3;
}
@media screen and (min-width: 1024px) {
  .enter-workshop .content-half .section-label {
    margin: 0 0 16px;
  }
}
.enter-workshop .content-half p {
  margin-bottom: 30px;
}
.enter-workshop .workshop-gallery {
  max-width: 476px;
  height: auto;
}
@media screen and (min-width: 1200px) {
  .enter-workshop .workshop-gallery {
    height: 306px;
  }
}
.enter-workshop .workshop-gallery .gallery-item {
  height: auto;
}
@media screen and (min-width: 1200px) {
  .enter-workshop .workshop-gallery .gallery-item {
    height: 306px;
  }
}
.enter-workshop .workshop-gallery .slick-dots {
  bottom: -30px;
}
@media screen and (min-width: 1024px) {
  .enter-workshop .workshop-gallery .slick-dots {
    bottom: 10px;
  }
}
.enter-workshop .wrk-info {
  padding-top: 60px;
}
@media screen and (min-width: 1024px) {
  .enter-workshop .wrk-info {
    padding-top: 0;
    padding-left: 30px;
  }
}
.enter-workshop .info-block {
  padding-left: 40px;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .enter-workshop .info-block {
    padding-left: 74px;
  }
}
.enter-workshop .info-block::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 24px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 10px;
}
@media screen and (min-width: 1024px) {
  .enter-workshop .info-block::before {
    left: 30px;
  }
}
.enter-workshop .info-block:not(:last-child) {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px dashed #DCDCDC;
}
.enter-workshop .info-block:last-child {
  margin-bottom: 40px;
}
.enter-workshop .info-block.date::before {
  background-image: url("../../img/svg/workshop/icon-calendar.svg");
}
.enter-workshop .info-block.time::before {
  background-image: url("../../img/svg/workshop/icon-clock.svg");
}
.enter-workshop .info-block.location::before {
  background-image: url("../../img/svg/workshop/icon-location.svg");
}
.enter-workshop .info-block .info-value {
  font-weight: 700;
  color: #333333;
  font-size: 14px;
  line-height: 1.3;
}
.enter-workshop .info-block address {
  font-style: normal;
}
.enter-workshop .info-block .info-label {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: #9B9B9B;
  line-height: 1.3;
}
.enter-workshop form {
  margin-top: auto;
}
@media screen and (min-width: 1024px) {
  .enter-workshop form {
    padding-left: 30px;
  }
}
.enter-workshop form .row {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid #DCDCDC;
  background-color: #fff;
  position: relative;
}
.enter-workshop form .jcf-select,
.enter-workshop form select {
  border: none;
}
.enter-workshop form .jcf-select,
.enter-workshop form .discount {
  padding: 14px 16px 10px 40px;
}
@media screen and (min-width: 768px) {
  .enter-workshop form .jcf-select,
  .enter-workshop form .discount {
    padding: 15px 20px 12px 66px;
  }
}
.enter-workshop form option {
  font-size: 14px;
}
.enter-workshop form .child::before,
.enter-workshop form .payment::before,
.enter-workshop form .discount::before {
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 10px;
}
@media screen and (min-width: 768px) {
  .enter-workshop form .child::before,
  .enter-workshop form .payment::before,
  .enter-workshop form .discount::before {
    left: 30px;
  }
}
.enter-workshop form .child {
  font-weight: 700;
  font-size: 14px;
  color: #333333;
  line-height: 1.3;
}
.enter-workshop form .child::before {
  background-image: url("../../img/svg/workshop/icon-user.svg");
  background-size: 180%;
}
.enter-workshop form .payment::before {
  background-image: url("../../img/svg/workshop/icon-payment.svg");
}
.enter-workshop form .discount {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.enter-workshop form .discount::before {
  background-image: url("../../img/svg/workshop/icon-discount.svg");
}
.enter-workshop form .discount input {
  width: 60%;
  height: 16px;
  min-height: 16px;
  border-radius: 0;
  border: none;
  background-color: transparent;
}
@media screen and (min-width: 1024px) {
  .enter-workshop form .discount input {
    width: 70%;
  }
}
.enter-workshop form .discount button {
  cursor: pointer;
  outline: none;
  border: none;
  background-color: transparent;
  font-weight: 700;
  font-size: 14px;
  color: #8441E2;
  line-height: 1;
  transition: color 0.1s ease, border 0.1s ease, background-color 0.1s ease;
}
@media screen and (min-width: 1024px) {
  .enter-workshop form .discount button:hover {
    color: #9b72d4;
  }
}
.enter-workshop form .sending {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(216, 216, 216, 0.2);
}
.enter-workshop form .sending .price {
  font-weight: 700;
  font-size: 20px;
  color: #00C853;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .enter-workshop form .sending .price {
    font: 24px;
  }
}
.enter-workshop form .sending .btn, .enter-workshop form .sending .btn-6, .enter-workshop form .sending .btn-7 {
  cursor: pointer;
  border: none;
}
.enter-workshop form .info-form {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  color: #333333;
  line-height: 1.3;
}
.enter-workshop form .form-message {
  padding-left: 34px;
  margin-bottom: 10px;
}

.message-block {
  padding: 40px;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .message-block {
    padding: 52px 100px 84px;
  }
}
.message-block::before {
  content: "";
  width: 54px;
  height: 54px;
  margin: 0 auto 40px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.message-block .msg-title {
  padding: 0;
  margin: 0 auto 30px;
}
.message-block .msg-info,
.message-block p {
  max-width: 90%;
  margin: 0 auto 40px;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
}
@media screen and (min-width: 1024px) {
  .message-block .msg-info,
  .message-block p {
    max-width: 60%;
  }
}
.message-block .msg-info strong,
.message-block p strong {
  display: block;
}
.message-block.msg-successes {
  color: #00C853;
}
.message-block.msg-successes::before {
  background-image: url("../../img/svg/workshop/icon-successes.svg");
}
.message-block.msg-error {
  color: #D50000;
}
.message-block.msg-error::before {
  background-image: url("../../img/svg/workshop/icon-error.svg");
}

.payment-info,
.event-detail {
  font-size: 14px;
  color: #333333;
}
@media screen and (min-width: 768px) {
  .payment-info,
  .event-detail {
    display: flex;
    align-items: center;
    font-size: 16px;
  }
}

.payment-info {
  padding-top: 40px;
  margin-bottom: 30px;
  justify-content: center;
  border-top: 1px solid #E8E8E8;
  font-weight: 700;
}
.payment-info .order {
  padding-right: 6px;
  margin-right: 6px;
}
@media screen and (min-width: 768px) {
  .payment-info .order {
    border-right: 1px solid #333333;
  }
}

.event-detail {
  padding: 20px;
  margin-bottom: 40px;
  justify-content: space-between;
  border-radius: 10px;
  background-color: rgba(216, 216, 216, 0.2);
}
@media screen and (min-width: 1024px) {
  .event-detail {
    padding: 24px 60px;
    margin-bottom: 70px;
  }
}
.event-detail .event-title {
  max-width: 70%;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .event-detail .event-title {
    max-width: initial;
  }
}
.event-detail .price {
  font-weight: 700;
  font-size: 18px;
  color: #00C853;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .event-detail .price {
    font-size: 24px;
  }
}

.separator:not(.section-title) {
  width: 65px;
  height: 4px;
  margin: 35px 0;
  border-radius: 5.3px;
  background-color: #6447cf;
}

/*********************************
	Summer Camp workshops holder
*********************************/
.sc-workshops-holder {
  padding: 10px 20px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (min-width: 1200px) {
  .sc-workshops-holder {
    padding: 12px 0px 54px;
    margin: 0 auto;
  }
}
.sc-workshops-holder::after {
  content: "";
  max-width: 580px;
  display: inline-block;
}
@media screen and (max-width: 1200px) {
  .sc-workshops-holder::after {
    width: calc(50% - 20px);
  }
}
@media screen and (min-width: 1200px) {
  .sc-workshops-holder::after {
    width: calc(33.3% - 20px);
    height: 1px;
  }
}

/*********************************
	Section Top
*********************************/
.sc-section-top {
  padding: 0 16px;
  height: auto;
  display: block;
  background-color: #8441e2;
  color: #fff;
  position: sticky;
  top: 80px;
  z-index: 20;
}
@media screen and (max-width: 768px) {
  .sc-section-top {
    padding-bottom: 20px;
    margin: 10px;
    max-height: 600px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    transition: max-height 0.24s ease-in-out;
  }
}
@media screen and (max-width: 1200px) {
  .sc-section-top {
    padding-bottom: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .sc-section-top {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (min-device-width: 1200px) {
  .sc-section-top {
    box-shadow: 0 5px 8px 0px #fafafa;
  }
}
@media screen and (max-width: 768px) {
  .sc-section-top.close-filter {
    max-height: 64px;
    transition: max-height 0.24s ease-in-out;
  }
  .sc-section-top.close-filter .section-label::after {
    background-image: url("../../img/svg/workshop/icon-filter.svg");
    transition: background-image 0.24s ease-in-out;
  }
  .sc-section-top.close-filter .filter-label {
    opacity: 1;
    transition: opacity 0.24s ease-in-out;
  }
  .sc-section-top.close-filter .title-label {
    opacity: 0;
    transition: opacity 0.24s ease-in-out;
  }
}
@media screen and (min-width: 1200px) {
  .sc-section-top .inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.sc-section-top .section-label {
  font-size: 20px;
  color: #fff;
  line-height: 1.2;
  text-align: left;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .sc-section-top .section-label {
    padding-top: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .sc-section-top .section-label {
    max-width: 10%;
  }
}
@media screen and (max-device-width: 768px) {
  .sc-section-top .section-label::after {
    content: "";
    width: 20px;
    height: 20px;
    background: transparent url("../../img/svg/icon-cross.svg") left top no-repeat;
    background-size: 100%;
    transition: background-image 0.24s ease-in-out;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
  }
}
.sc-section-top .filter-label {
  display: none;
}
@media screen and (max-width: 1200px) {
  .sc-section-top .filter-label {
    margin: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.24s ease-in-out;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1;
  }
}
@media screen and (max-width: 1200px) {
  .sc-section-top .title-label {
    opacity: 1;
    transition: opacity 0.24s ease-in-out;
  }
}
.sc-section-top form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1200px) {
  .sc-section-top form {
    width: 85%;
    margin-left: 100px;
  }
}
@media screen and (max-width: 768px) {
  .sc-section-top form .btn, .sc-section-top form .btn-6, .sc-section-top form .btn-7 {
    width: calc(50% - 10px);
    margin: 0;
  }
}
@media screen and (min-width: 1026px) and (max-width: 1024px) {
  .sc-section-top form .btn, .sc-section-top form .btn-6, .sc-section-top form .btn-7 {
    width: 172px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .sc-section-top .full-half-day {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (max-width: 900px) {
  .sc-section-top .full-half-day {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
.sc-section-top .full-half-day .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sc-section-top .full-half-day .row {
    width: calc(50% - 10px);
    margin: 0;
  }
}
@media screen and (min-width: 768px) {
  .sc-section-top .full-half-day .row {
    justify-content: space-between;
  }
}
@media screen and (max-width: 900px) {
  .sc-section-top .full-half-day .row:not(:last-child) {
    margin-right: 30px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 900px) {
  .sc-section-top .full-half-day .row:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .sc-section-top .full-half-day label {
    width: 100%;
    min-width: 144px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 2;
  }
}
@media screen and (min-width: 768px) {
  .sc-section-top .full-half-day label {
    margin-left: 14px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
  }
}
.sc-section-top .jcf-checkbox,
.sc-section-top input[type=checkbox] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: solid 1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  .sc-section-top .jcf-checkbox,
  .sc-section-top input[type=checkbox] {
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
}
@media screen and (max-width: 768px) {
  .sc-section-top .jcf-checked + label,
  .sc-section-top input:checked + label {
    background-color: #fff;
    color: #333333;
  }
}
.sc-section-top .jcf-select,
.sc-section-top select {
  width: calc(50% - 10px);
  height: 46px;
  border-radius: 3px;
  background-color: #F6F6F6;
  font-size: 15px;
  color: #9B9B9B;
  line-height: 1;
}
.sc-section-top .jcf-select:not(:last-child):not(:nth-last-child(2)),
.sc-section-top select:not(:last-child):not(:nth-last-child(2)) {
  margin-bottom: 14px;
}
@media screen and (max-width: 768px) {
  .sc-section-top .jcf-select:not(:last-child):not(:nth-last-child(2)),
  .sc-section-top select:not(:last-child):not(:nth-last-child(2)) {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 900px) {
  .sc-section-top .jcf-select,
  .sc-section-top select {
    margin: 0;
  }
}
@media screen and (min-width: 768px) {
  .sc-section-top .jcf-select,
  .sc-section-top select {
    min-width: 172px;
    width: auto;
  }
  .sc-section-top .jcf-select:not(:last-child):not(:nth-last-child(2)),
  .sc-section-top select:not(:last-child):not(:nth-last-child(2)) {
    margin-bottom: 0;
  }
}
.sc-section-top .jcf-select:hover,
.sc-section-top select:hover {
  background-color: #ececec;
}
.sc-section-top .jcf-select {
  padding: 0 14px;
}
.sc-section-top optgroup,
.sc-section-top option {
  background-color: #fff;
}
.sc-section-top optgroup {
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.sc-section-top option {
  text-indent: 0;
  padding: 0 0 5px;
  font-size: 15px;
  line-height: 1.3;
  color: #333333;
}
.sc-section-top .option-label {
  color: #9B9B9B;
}

/*********************************
	Startting Workshops
*********************************/
.sc-starting-workshops .section-hero-text {
  height: 432px;
  background-image: url("../../img/workshop/hero-summercamp.jpg");
}
@media screen and (max-width: 768px) {
  .sc-starting-workshops .section-hero-text {
    height: auto;
  }
}
.sc-starting-workshops .section-hero-text::before {
  display: none;
}
@media screen and (max-width: 768px) {
  .sc-starting-workshops .section-hero-text .inner-container {
    padding: 34px 0 68px;
  }
}
@media screen and (min-device-width: 1200px) {
  .sc-starting-workshops .section-hero-text .inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1200px) {
  .sc-starting-workshops .sc-hero-text {
    max-width: 64%;
  }
}
.sc-starting-workshops .sc-logo {
  display: none;
}
@media screen and (min-width: 1200px) {
  .sc-starting-workshops .sc-logo {
    max-width: 354px;
    width: 100%;
    height: auto;
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .sc-starting-workshops .hero-title,
  .sc-starting-workshops .hero-sub-title {
    max-width: initial;
  }
}
.sc-starting-workshops .hero-title {
  font-size: 40px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .sc-starting-workshops .hero-title {
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1.2;
  }
}
@media screen and (max-width: 768px) {
  .sc-starting-workshops .section-top {
    margin-top: -48px;
    position: relative;
    z-index: 4;
  }
}
@media screen and (min-width: 1200px) {
  .sc-starting-workshops .section-top {
    padding: 0 20px;
  }
}

.result-count {
  width: 100%;
  font-weight: normal;
  font-size: 17px;
  color: #b4b4b4;
}
@media screen and (min-width: 1200px) {
  .result-count {
    padding: 9px 0;
    margin-bottom: 16px;
  }
}

/*********************************
	Workshop Box
*********************************/
.sc-workshop-box {
  width: 100%;
  margin: 0 auto 40px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .sc-workshop-box {
    width: calc(50% - 20px);
    margin: 0 0 40px;
  }
}
@media screen and (min-width: 1200px) {
  .sc-workshop-box {
    max-width: 580px;
    width: calc(33.33% - 20px);
    margin: 0 0 36px;
  }
}
.sc-workshop-box .wrk-info {
  padding: 20px 24px;
}
.sc-workshop-box .level-title {
  text-align: left;
}
.sc-workshop-box .wrk-row {
  text-align: center;
}
.sc-workshop-box .wrk-row:not(:nth-child(2)) {
  padding: 0 0 20px 0;
}
@media screen and (max-width: 1200px) {
  .sc-workshop-box .wrk-row:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}
@media screen and (min-width: 1200px) {
  .sc-workshop-box .wrk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}
.sc-workshop-box .wrk-row:last-child {
  padding-top: 12px;
  padding-bottom: 0;
  border-top: 1px solid #E8E8E8;
}
.sc-workshop-box .wrk-level {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1024px) {
  .sc-workshop-box .wrk-level {
    max-width: initial;
    margin: 0;
  }
}
.sc-workshop-box .wrk-price {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: #60BB29;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .sc-workshop-box .wrk-price {
    width: 158px;
  }
}
.sc-workshop-box .wrk-title {
  width: 100%;
  margin: 0 auto 20px;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  line-height: 1.3;
}
@media screen and (max-width: 414px) {
  .sc-workshop-box .wrk-title {
    text-align: center;
  }
}
@media screen and (max-width: 1200px) {
  .sc-workshop-box .wrk-title {
    text-align: left;
  }
}
@media screen and (min-width: 1200px) {
  .sc-workshop-box .wrk-title {
    margin: 0 0 14px;
    text-align: left;
  }
}
.sc-workshop-box .wrk-location,
.sc-workshop-box .wrk-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  color: #9B9B9B;
  line-height: 1.1;
  position: relative;
}
.sc-workshop-box .wrk-location::before,
.sc-workshop-box .wrk-time::before {
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 8px 10px 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.sc-workshop-box .wrk-location > div,
.sc-workshop-box .wrk-time > div {
  text-align: left;
}
.sc-workshop-box .wrk-location span,
.sc-workshop-box .wrk-location address,
.sc-workshop-box .wrk-time span,
.sc-workshop-box .wrk-time address {
  display: inline-block;
}
.sc-workshop-box .wrk-location::before {
  background-image: url("../../img/svg/workshop/icon-location.svg");
}
.sc-workshop-box .wrk-location address {
  font-style: normal;
}
.sc-workshop-box .wrk-time::before {
  background-image: url("../../img/svg/workshop/icon-clock.svg");
}

.wrk-groups .btn, .wrk-groups .btn-6, .wrk-groups .btn-7,
.wrk-group-item .btn,
.wrk-group-item .btn-6,
.wrk-group-item .btn-7,
.starting-workshops .btn,
.starting-workshops .btn-6,
.starting-workshops .btn-7 {
  border-radius: 10px;
}
.wrk-groups .all, .wrk-groups.all,
.wrk-group-item .all,
.wrk-group-item.all,
.starting-workshops .all,
.starting-workshops.all {
  color: #a92cfc;
}
.wrk-groups .junior, .wrk-groups.junior,
.wrk-group-item .junior,
.wrk-group-item.junior,
.starting-workshops .junior,
.starting-workshops.junior {
  color: #ffac24;
}
.wrk-groups .middle, .wrk-groups.middle,
.wrk-group-item .middle,
.wrk-group-item.middle,
.starting-workshops .middle,
.starting-workshops.middle {
  color: #00d589;
}
.wrk-groups .senior, .wrk-groups.senior,
.wrk-group-item .senior,
.wrk-group-item.senior,
.starting-workshops .senior,
.starting-workshops.senior {
  color: #00c0d6;
}
.wrk-groups .teen-1, .wrk-groups.teen-1,
.wrk-group-item .teen-1,
.wrk-group-item.teen-1,
.starting-workshops .teen-1,
.starting-workshops.teen-1 {
  color: #a92cfc;
}
.wrk-groups .teen-2, .wrk-groups.teen-2,
.wrk-group-item .teen-2,
.wrk-group-item.teen-2,
.starting-workshops .teen-2,
.starting-workshops.teen-2 {
  color: #162ccb;
}
.wrk-groups .teen-3, .wrk-groups.teen-3,
.wrk-group-item .teen-3,
.wrk-group-item.teen-3,
.starting-workshops .teen-3,
.starting-workshops.teen-3 {
  color: #005418;
}
.wrk-groups .demo, .wrk-groups.demo,
.wrk-group-item .demo,
.wrk-group-item.demo,
.starting-workshops .demo,
.starting-workshops.demo {
  color: #8441e2;
}
.wrk-groups .content-section,
.wrk-groups .section-subscribe,
.wrk-group-item .content-section,
.wrk-group-item .section-subscribe,
.starting-workshops .content-section,
.starting-workshops .section-subscribe {
  padding-right: 20px;
  padding-left: 20px;
}
.wrk-groups .tag-accelerated,
.wrk-group-item .tag-accelerated,
.starting-workshops .tag-accelerated {
  position: relative;
  padding: 6px 8px;
  margin-left: auto;
  cursor: pointer;
  border-radius: 12px;
  background-color: #bc56fd;
  background: linear-gradient(to bottom, rgb(189, 86, 253) 0%, rgb(189, 86, 253) 50%, rgb(171, 41, 252) 51%, rgb(171, 41, 252) 100%);
  font-weight: 600;
  font-size: 10px;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
}
.wrk-groups .tag-accelerated .tooltip,
.wrk-group-item .tag-accelerated .tooltip,
.starting-workshops .tag-accelerated .tooltip {
  color: #6e6e6e;
  top: -62px;
  font-weight: normal;
  border-radius: 10px;
  padding: 20px;
}
.wrk-groups .tag-accelerated:hover > .tooltip,
.wrk-group-item .tag-accelerated:hover > .tooltip,
.starting-workshops .tag-accelerated:hover > .tooltip {
  display: block;
}
.wrk-groups .tag-accelerated::before,
.wrk-group-item .tag-accelerated::before,
.starting-workshops .tag-accelerated::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  display: inline-block;
  background-image: url("../img/svg/icon-clock.svg");
  pointer-events: none;
  user-select: none;
  position: relative;
  bottom: -1px;
}
.wrk-groups .tag-accelerated + [class*=btn-],
.wrk-group-item .tag-accelerated + [class*=btn-],
.starting-workshops .tag-accelerated + [class*=btn-] {
  margin-left: 20px !important;
}

.filter-info-label {
  margin-bottom: 26px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
}
.filter-info-label strong {
  color: #a92cfc;
}

.wrk-groups .content-section .filter-groups .inner-container,
.starting-workshops .content-section .filter-groups .inner-container {
  padding-right: 0;
  padding-left: 0;
}
.wrk-groups .filter-groups .inner-container,
.starting-workshops .filter-groups .inner-container {
  padding-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .wrk-groups .filter-groups .inner-container,
  .starting-workshops .filter-groups .inner-container {
    padding-right: 13px;
    padding-left: 13px;
  }
}
.wrk-groups .filters-group-form,
.wrk-groups .selct-filters,
.starting-workshops .filters-group-form,
.starting-workshops .selct-filters {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .wrk-groups .filters-group-form,
  .wrk-groups .selct-filters,
  .starting-workshops .filters-group-form,
  .starting-workshops .selct-filters {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
@media screen and (min-width: 768px) {
  .wrk-groups .filters-group-form,
  .wrk-groups .selct-filters,
  .starting-workshops .filters-group-form,
  .starting-workshops .selct-filters {
    align-items: center;
    justify-content: flex-start;
  }
}
.wrk-groups .selct-filters,
.starting-workshops .selct-filters {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .wrk-groups .selct-filters,
  .starting-workshops .selct-filters {
    justify-content: flex-start;
  }
}
@media screen and (min-width: 768px) {
  .wrk-groups .selct-filters .filter-content + .filter-content,
  .starting-workshops .selct-filters .filter-content + .filter-content {
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .wrk-groups .filter-content,
  .wrk-groups .filter-checkbox,
  .starting-workshops .filter-content,
  .starting-workshops .filter-checkbox {
    margin: 0 auto 15px;
  }
}
@media screen and (min-width: 768px) {
  .wrk-groups .filter-content,
  .wrk-groups .filter-checkbox,
  .starting-workshops .filter-content,
  .starting-workshops .filter-checkbox {
    margin-bottom: 15px;
  }
}
.wrk-groups .filter-content,
.starting-workshops .filter-content {
  padding: 0;
  width: 100%;
  max-width: 348px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.35);
  position: relative;
}
@media screen and (min-width: 768px) {
  .wrk-groups .filter-content,
  .starting-workshops .filter-content {
    margin-right: 17px;
  }
}
.wrk-groups .filter-content::before,
.starting-workshops .filter-content::before {
  content: "";
  margin-right: 20px;
  display: inline-block;
  pointer-events: none;
  background-image: url("/img/svg/groups/icon-filter.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  transform: translateY(-50%);
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 4;
}
@media screen and (max-width: 1023px) {
  .wrk-groups .filter-content::before,
  .starting-workshops .filter-content::before {
    width: 21px;
    height: 21px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-groups .filter-content::before,
  .starting-workshops .filter-content::before {
    width: 18px;
    height: 18px;
  }
}
.wrk-groups .filter-content .jcf-select,
.wrk-groups .filter-content select,
.starting-workshops .filter-content .jcf-select,
.starting-workshops .filter-content select {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 10px;
  font-weight: 400;
  font-size: 16px;
  color: #2a2a2a;
  line-height: 1;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .wrk-groups .filter-content .jcf-select,
  .wrk-groups .filter-content select,
  .starting-workshops .filter-content .jcf-select,
  .starting-workshops .filter-content select {
    padding-left: 59px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-groups .filter-content .jcf-select,
  .wrk-groups .filter-content select,
  .starting-workshops .filter-content .jcf-select,
  .starting-workshops .filter-content select {
    padding-left: 56px;
  }
}
@media screen and (min-device-width: 1200px) {
  .wrk-groups .filter-content .jcf-select,
  .wrk-groups .filter-content select,
  .starting-workshops .filter-content .jcf-select,
  .starting-workshops .filter-content select {
    transition: background-color 0.2s ease;
  }
  .wrk-groups .filter-content .jcf-select:hover,
  .wrk-groups .filter-content select:hover,
  .starting-workshops .filter-content .jcf-select:hover,
  .starting-workshops .filter-content select:hover {
    background-color: #ececec;
  }
}
.wrk-groups .filter-content optgroup,
.wrk-groups .filter-content option,
.starting-workshops .filter-content optgroup,
.starting-workshops .filter-content option {
  background-color: #fff;
}
.wrk-groups .filter-content optgroup,
.starting-workshops .filter-content optgroup {
  padding-left: 0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.wrk-groups .filter-content option,
.starting-workshops .filter-content option {
  padding: 0 0 5px;
  font-size: 16px;
  line-height: 1.3;
  color: #2a2a2a;
  text-indent: 0;
}
.wrk-groups .filter-content .option-label,
.starting-workshops .filter-content .option-label {
  color: #9B9B9B;
}
.wrk-groups .show-courses,
.starting-workshops .show-courses {
  width: 100%;
  display: flex;
  justify-content: center;
}
.wrk-groups .filter-checkbox,
.starting-workshops .filter-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media screen and (min-device-width: 1200px) {
  .wrk-groups .filter-checkbox:hover .jcf-checkbox:not(.jcf-checked),
  .wrk-groups .filter-checkbox:hover input[type=check]:not(:checked),
  .starting-workshops .filter-checkbox:hover .jcf-checkbox:not(.jcf-checked),
  .starting-workshops .filter-checkbox:hover input[type=check]:not(:checked) {
    background-color: #ececec;
  }
  .wrk-groups .filter-checkbox:hover label,
  .starting-workshops .filter-checkbox:hover label {
    color: #2a2a2a;
  }
}
.wrk-groups .filter-checkbox .jcf-checkbox,
.wrk-groups .filter-checkbox input[type=check],
.starting-workshops .filter-checkbox .jcf-checkbox,
.starting-workshops .filter-checkbox input[type=check] {
  width: 26px;
  height: 26px;
  display: block;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);
}
@media screen and (min-device-width: 1200px) {
  .wrk-groups .filter-checkbox .jcf-checkbox,
  .wrk-groups .filter-checkbox input[type=check],
  .starting-workshops .filter-checkbox .jcf-checkbox,
  .starting-workshops .filter-checkbox input[type=check] {
    transition: background-color 0.2s ease;
  }
}
.wrk-groups .filter-checkbox .jcf-checked,
.starting-workshops .filter-checkbox .jcf-checked {
  background-color: #a92cfc;
}
.wrk-groups .filter-checkbox .jcf-checked span,
.starting-workshops .filter-checkbox .jcf-checked span {
  background: url("/img/svg/groups/icon-check.svg") no-repeat center center;
  background-size: 60%;
}
.wrk-groups .filter-checkbox label,
.starting-workshops .filter-checkbox label {
  width: calc(100% - 26px - 12px);
  font-weight: 400;
  font-size: 13px;
  color: #a1a1a1;
  line-height: 1.3;
  white-space: nowrap;
}
@media screen and (min-device-width: 1200px) {
  .wrk-groups .filter-checkbox label,
  .starting-workshops .filter-checkbox label {
    transition: background-color 0.2s ease;
  }
}
@media screen and (min-width: 768px) {
  .wrk-groups .filter-ages,
  .starting-workshops .filter-ages {
    width: 100%;
    height: 36px;
    margin-top: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
.wrk-groups .filter-ages li:not(:last-child),
.starting-workshops .filter-ages li:not(:last-child) {
  margin-right: 16px;
}
.wrk-groups .filter-ages button,
.starting-workshops .filter-ages button {
  min-width: 96px;
  height: 36px;
  text-align: center;
  outline: none;
  border-radius: 18px;
  border: solid 2px #e5e5e5;
  background-color: #fff;
  box-shadow: 2.8px 4.1px 5px 0 rgba(199, 199, 199, 0.09);
}
@media screen and (min-device-width: 1200px) {
  .wrk-groups .filter-ages button,
  .starting-workshops .filter-ages button {
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
}
.wrk-groups .filter-ages button span,
.starting-workshops .filter-ages button span {
  color: #c2c2c2;
}
.wrk-groups .filter-ages button:not(.active),
.starting-workshops .filter-ages button:not(.active) {
  cursor: pointer;
}
.wrk-groups .filter-ages button.active,
.starting-workshops .filter-ages button.active {
  border-color: currentColor;
  background-color: currentColor;
}
.wrk-groups .filter-ages button.active span,
.starting-workshops .filter-ages button.active span {
  color: #fff;
}
@media screen and (min-device-width: 1200px) {
  .wrk-groups .filter-ages button.active span,
  .starting-workshops .filter-ages button.active span {
    transition: color 0.2s ease;
  }
}
@media screen and (min-device-width: 1200px) {
  .wrk-groups .filter-ages button:hover,
  .starting-workshops .filter-ages button:hover {
    border-color: currentColor;
    background-color: currentColor;
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
  .wrk-groups .filter-ages button:hover span,
  .starting-workshops .filter-ages button:hover span {
    color: #fff;
    transition: color 0.3s ease;
  }
}

.wrk-groups {
  color: #2a2a2a;
}
.wrk-groups .content-section {
  padding-top: clamp(28px, 3vw, 34px);
}
.wrk-groups .section-hero-text {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media screen and (max-width: 1023px) {
  .wrk-groups .section-hero-text {
    background-image: url("/img/groups/header_hero_bg-mob.jpg");
  }
}
@media screen and (min-width: 1024px) {
  .wrk-groups .section-hero-text {
    background-image: url("/img/groups/header_hero_bg.jpg");
  }
}
.wrk-groups .section-hero-text .inner-container {
  padding-top: clamp(18px, 4vw, 80px);
  padding-bottom: clamp(24px, 5vw, 110px);
}
.wrk-groups .hero-title,
.wrk-groups .hero-sub-title {
  margin-right: auto;
  margin-left: auto;
  color: #fff;
  text-align: center;
}
.wrk-groups .hero-title {
  font-weight: 500;
  margin-bottom: clamp(30px, 3.2vw, 35px);
}
.wrk-groups .hero-sub-title {
  max-width: 700px;
  font-weight: 400;
  font-size: 14px;
}

.wrk-group-item .content-section {
  position: relative;
}
.wrk-group-item .content-section .content-img-wrapper {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .content-section .content-img-wrapper {
    height: 188px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .content-section .content-img-wrapper {
    height: 300px;
  }
}
.wrk-group-item .content-section .content-img-wrapper picture {
  width: 100%;
  height: 100%;
  display: block;
}
.wrk-group-item .content-section .content-img-wrapper img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.wrk-group-item .content-section .inner-container {
  position: relative;
  z-index: 6;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .content-section .inner-container {
    padding-top: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .content-section .inner-container {
    padding-top: 104px;
  }
}
.wrk-group-item .wrkg-item-box {
  width: 100%;
  margin: 0 auto clamp(42px, 4.4vw, 46px);
  background-color: #fff;
  box-shadow: 0px 3px 8.5px 0.5px rgba(0, 0, 0, 0.25);
  position: relative;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .wrkg-item-box {
    padding: 74px 20px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .wrkg-item-box {
    padding: 40px 68px 68px;
    max-width: 1000px;
  }
}
.wrk-group-item .wrkg-item-box [class*=wrkg-tag-] {
  top: clamp(24px, 3vw, 34px);
}
.wrk-group-item .wrkg-item-box .subscribe-us {
  background: #ffffff;
}
.wrk-group-item .wrkg-item-box .wrkg-cours-name {
  font-size: clamp(22px, 2.3vw, 24px);
  text-align: center;
}
.wrk-group-item .wrkg-item-box .wrkg-cours-info {
  margin: 0 auto 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wrk-group-item .wrkg-item-box .wrkg-cours-info::after {
  content: "";
  width: 60px;
  height: 5px;
  margin-top: 16px;
  display: inline-block;
  background-color: #e5e5e5;
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .wrkg-item-box .item-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.wrk-group-item .wrkg-item-box .body-success,
.wrk-group-item .wrkg-item-box .body-no-groups {
  flex-wrap: wrap;
  text-align: center;
}
.wrk-group-item .wrkg-item-box .body-success p,
.wrk-group-item .wrkg-item-box .body-no-groups p {
  max-width: 680px;
  width: 100%;
  margin: 0 auto clamp(30px, 3.5vw, 40px);
  font-weight: 400;
  font-size: 20px;
  color: #555;
  line-height: 1.1;
}
.wrk-group-item .wrkg-item-box .body-success img,
.wrk-group-item .wrkg-item-box .body-no-groups img {
  max-width: 210px;
  margin: 0 auto;
}
.wrk-group-item .wrkg-item-box .body-success form,
.wrk-group-item .wrkg-item-box .body-no-groups form {
  margin: 0 auto;
}
.wrk-group-item .wrkg-item-box .body-success form .form-row,
.wrk-group-item .wrkg-item-box .body-no-groups form .form-row {
  max-width: 444px;
  margin: 0 auto clamp(40px, 5vw, 70px);
  position: relative;
}
@media screen and (max-width: 414px) {
  .wrk-group-item .wrkg-item-box .body-success form .form-row,
  .wrk-group-item .wrkg-item-box .body-no-groups form .form-row {
    display: block;
    text-align: left;
  }
}
@media screen and (min-width: 415px) {
  .wrk-group-item .wrkg-item-box .body-success form .form-row,
  .wrk-group-item .wrkg-item-box .body-no-groups form .form-row {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.wrk-group-item .wrkg-item-box .body-success form .form-row::before,
.wrk-group-item .wrkg-item-box .body-no-groups form .form-row::before {
  content: "";
  width: 20px;
  height: 12px;
  background-image: url("/img/svg/groups/icon-email.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  position: absolute;
  left: 20px;
  z-index: 6;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .wrkg-item-box .body-success form .form-row::before,
  .wrk-group-item .wrkg-item-box .body-no-groups form .form-row::before {
    top: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .wrkg-item-box .body-success form .form-row::before,
  .wrk-group-item .wrkg-item-box .body-no-groups form .form-row::before {
    transform: translateY(-50%);
    top: 50%;
  }
}
.wrk-group-item .wrkg-item-box .body-success form input,
.wrk-group-item .wrkg-item-box .body-no-groups form input {
  padding-right: 0;
  padding-left: 60px;
  height: 40px;
  border-right: transparent;
  background-color: #fff;
  font-weight: 400;
  font-size: 14px;
  color: #383736;
}
@media screen and (max-width: 414px) {
  .wrk-group-item .wrkg-item-box .body-success form input,
  .wrk-group-item .wrkg-item-box .body-no-groups form input {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
  }
}
@media screen and (min-width: 415px) {
  .wrk-group-item .wrkg-item-box .body-success form input,
  .wrk-group-item .wrkg-item-box .body-no-groups form input {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top: solid 1px #dcdcdc;
    border-bottom: solid 1px #dcdcdc;
    border-left: solid 1px #dcdcdc;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .wrk-group-item .wrkg-item-box .body-success form input,
  .wrk-group-item .wrkg-item-box .body-no-groups form input {
    max-width: 304px;
  }
}
.wrk-group-item .wrkg-item-box .body-success form input,
.wrk-group-item .wrkg-item-box .body-success form button,
.wrk-group-item .wrkg-item-box .body-no-groups form input,
.wrk-group-item .wrkg-item-box .body-no-groups form button {
  position: relative;
  z-index: 2;
}
.wrk-group-item .wrkg-item-box .body-success .available-into,
.wrk-group-item .wrkg-item-box .body-no-groups .available-into {
  font-size: 14px;
  color: #000;
  text-align: left;
}
.wrk-group-item .wrkg-item-box .body-success .available-into span,
.wrk-group-item .wrkg-item-box .body-no-groups .available-into span {
  margin-bottom: clamp(20px, 2.5vw, 30px);
  display: block;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  .wrk-group-item .wrkg-item-box .body-success .available-into ul,
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .wrk-group-item .wrkg-item-box .body-success .available-into ul,
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .wrk-group-item .wrkg-item-box .body-success .available-into ul li,
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul li {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .wrk-group-item .wrkg-item-box .body-success .available-into ul li,
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul li {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
  }
  .wrk-group-item .wrkg-item-box .body-success .available-into ul li:not(:last-child),
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul li:not(:last-child) {
    margin-right: 14px;
  }
  .wrk-group-item .wrkg-item-box .body-success .available-into ul li:not(:last-child)::after,
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 18px;
    margin-left: 14px;
    display: inline-block;
    background-color: #a92cfc;
  }
}
.wrk-group-item .wrkg-item-box .body-success .available-into ul a,
.wrk-group-item .wrkg-item-box .body-no-groups .available-into ul a {
  font-weight: 500;
  color: #a92cfc;
}
@media screen and (min-device-width: 1024px) {
  .wrk-group-item .wrkg-item-box .body-success .available-into ul a,
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul a {
    transition: color 0.2s ease;
  }
  .wrk-group-item .wrkg-item-box .body-success .available-into ul a:hover,
  .wrk-group-item .wrkg-item-box .body-no-groups .available-into ul a:hover {
    color: #7403bf;
  }
}
.wrk-group-item .wrkg-item-box .body-no-groups {
  display: block;
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .wrkg-item-box .item-info,
  .wrk-group-item .wrkg-item-box .item-filters {
    width: 50%;
  }
}
.wrk-group-item .wrkg-item-box .item-info {
  font-weight: 300;
  font-size: 14px;
  color: #000;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .wrkg-item-box .item-info {
    margin-bottom: 40px;
  }
}
.wrk-group-item .wrkg-item-box .item-info > p {
  margin-bottom: clamp(30px, 3.5vw, 40px);
  line-height: 1.4;
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .wrkg-item-box .item-info > p {
    padding-right: 64px;
  }
}
.wrk-group-item .wrkg-item-box .item-info span {
  margin-bottom: 20px;
  display: block;
}
.wrk-group-item .wrkg-item-box .item-info ul li {
  line-height: 1;
}
.wrk-group-item .wrkg-item-box .item-info ul a {
  font-weight: 500;
  color: #a92cfc;
  line-height: 1.4;
}
@media screen and (min-device-width: 1024px) {
  .wrk-group-item .wrkg-item-box .item-info ul a:hover {
    color: #7403bf;
  }
}
.wrk-group-item .wrkg-item-box .item-filters .filter-content,
.wrk-group-item .wrkg-item-box .item-filters .action-content {
  padding: 0;
  max-width: 380px;
  width: 100%;
  height: 44px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 767px) {
  .wrk-group-item .wrkg-item-box .item-filters .filter-content,
  .wrk-group-item .wrkg-item-box .item-filters .action-content {
    margin: 0 auto;
  }
  .wrk-group-item .wrkg-item-box .item-filters .filter-content:not(:last-child),
  .wrk-group-item .wrkg-item-box .item-filters .action-content:not(:last-child) {
    margin-bottom: 16px;
  }
}
.wrk-group-item .wrkg-item-box .item-filters .filter-content {
  border-radius: 6px;
  border: solid 1px #dcdcdc;
  background-color: #fff;
}
.wrk-group-item .wrkg-item-box .item-filters .filter-content::before {
  content: "";
  width: 17px;
  height: 17px;
  margin-right: 20px;
  display: inline-block;
  pointer-events: none;
  background-image: url("/img/svg/groups/icon-filter-gray.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  transform: translateY(-50%);
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 4;
}
.wrk-group-item .wrkg-item-box .item-filters .jcf-select,
.wrk-group-item .wrkg-item-box .item-filters select {
  padding-left: 42px;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 6px;
  font-weight: 400;
  font-size: 16px;
  color: #2a2a2a;
  line-height: 1;
  position: relative;
}
@media screen and (min-device-width: 1200px) {
  .wrk-group-item .wrkg-item-box .item-filters .jcf-select,
  .wrk-group-item .wrkg-item-box .item-filters select {
    transition: background-color 0.2s ease;
  }
  .wrk-group-item .wrkg-item-box .item-filters .jcf-select:hover,
  .wrk-group-item .wrkg-item-box .item-filters select:hover {
    background-color: #ececec;
  }
}
.wrk-group-item .date-lists {
  margin-bottom: clamp(40px, 6vw, 70px);
}
.wrk-group-item .date-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  border: solid 1px #ededed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0px 2px 3px 0 rgba(0, 0, 0, 0.08);
  position: relative;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .date-box {
    padding: 42px 32px 32px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .date-box {
    padding: 24px 32px;
  }
}
.wrk-group-item .date-box::before {
  content: "";
  width: 100%;
  height: 6px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  background-color: currentColor;
  position: absolute;
  top: 0;
  left: 0;
}
.wrk-group-item .date-box:not(:last-child) {
  margin-bottom: clamp(16px, 2.4vw, 30px);
}
@media screen and (max-width: 414px) {
  .wrk-group-item .date-box > div {
    width: 100%;
  }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .wrk-group-item .date-box > div {
    width: 50%;
  }
}
.wrk-group-item .date-box .wrkg-tag-online {
  border-bottom-left-radius: 0;
  top: -15px;
  left: 0;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .date-box .tag-accelerated {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 6;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .date-box .btn, .wrk-group-item .date-box .btn-6, .wrk-group-item .date-box .btn-7 {
    margin-left: auto;
    min-width: 138px;
  }
}
.wrk-group-item .date-box [class*=course-] {
  padding-left: 28px;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .date-box [class*=course-] {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .date-box [class*=course-] {
    padding-right: 28px;
  }
}
.wrk-group-item .date-box [class*=course-]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wrk-group-item .date-box span:not(.wrkg-tag-online) {
  display: block;
  text-transform: uppercase;
}
.wrk-group-item .date-box .box-label {
  font-size: 13px;
  color: #b8b8b8;
  line-height: 1.2;
}
.wrk-group-item .date-box .box-value {
  font-size: 14px;
  color: #6e6e6e;
  line-height: 15px;
  margin-top: 7px;
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .date-box .course-date {
    width: 22%;
  }
}
.wrk-group-item .date-box .course-date::before {
  background-image: url("/img/svg/groups/icon-calendar.svg");
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .date-box .course-duration {
    width: 18%;
  }
}
.wrk-group-item .date-box .course-duration::before {
  background-image: url("/img/svg/groups/icon-clock.svg");
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .date-box .course-price {
    width: 12%;
  }
}
.wrk-group-item .date-box .course-price::before {
  background-image: url("/img/svg/groups/icon-wallet.svg");
}
.wrk-group-item .date-box .course-price .box-value {
  font-weight: 500;
  color: #59c41b;
}
.wrk-group-item .date-box .course-price .box-value .strike-price {
  display: block;
  color: #ff7474;
  text-decoration: line-through;
  margin-bottom: 5px;
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .date-box .course-hall {
    width: 24%;
  }
}
.wrk-group-item .date-box .course-hall::before {
  background-image: url("/img/svg/icon-mappin.svg");
}
.wrk-group-item .module-head {
  padding-right: 20px;
  padding-left: 20px;
  color: currentColor;
  position: relative;
}
.wrk-group-item .module-head::before {
  content: "";
  width: 100%;
  height: 364px;
  background-color: currentColor;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.wrk-group-item .module-head .inner-container {
  padding-top: clamp(38px, 4vw, 46px);
  position: relative;
  z-index: 4;
}
.wrk-group-item .module-head .module-cours-name,
.wrk-group-item .module-head .module-cours-info {
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(22px, 2.3vw, 24px);
  color: #fff;
  text-align: center;
}
.wrk-group-item .module-head .module-cours-name {
  margin-bottom: clamp(30px, 3.2vw, 36px);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.4;
}
.wrk-group-item .module-head .module-cours-info {
  max-width: 900px;
  margin-bottom: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.2;
}
.wrk-group-item .module-badges {
  margin-bottom: clamp(60px, 10vw, 116px);
}
@media screen and (min-width: 768px) {
  .wrk-group-item .module-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
}
@media screen and (max-width: 767px) {
  .wrk-group-item .module-badges .program-item {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 768px) {
  .wrk-group-item .module-badges .program-item {
    padding-bottom: 24px;
  }
}
.wrk-group-item .module-badges .program-box {
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 3px 15px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .wrk-group-item .module-badges .program-box {
    max-width: 260px;
  }
}
@media screen and (min-device-width: 1200px) {
  .wrk-group-item .module-badges .program-box:hover .header-section img {
    transform: none;
  }
}
.wrk-group-item .module-badges .header-section {
  height: 128px;
}
.wrk-group-item .module-badges .header-section-title {
  margin: 0 auto 10px;
  font-weight: 500;
  font-size: 18px;
  color: #666;
  line-height: 1.6;
}
.wrk-group-item .module-badges .header-section-content img {
  max-height: 74px;
  margin: 0 auto;
}
.wrk-group-item .module-badges .header-section-content .bonus {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 24px;
  color: #9013fe;
  text-align: center;
  line-height: 1;
}
.wrk-group-item .module-badges .header-section-content .bonus .value {
  margin-bottom: 0;
  display: block;
  font-size: 48px;
  line-height: 1;
}
.wrk-group-item .module-badges .header-section-content .tools {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.wrk-group-item .module-badges .header-section-content .tools img {
  max-width: 96px;
  max-height: 28px;
}
.wrk-group-item .module-badges .body-section {
  padding: 12px 0 0;
  height: 92px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e8e2e7;
}
.wrk-group-item .module-badges .body-section p {
  font-weight: 400;
  font-size: 13px;
  color: #000;
  line-height: 1.6;
}
.wrk-group-item .program-segment-content {
  padding: 0;
}
.wrk-group-item .module-box {
  width: 100%;
  height: auto;
  margin-bottom: clamp(26px, 3vw, 40px);
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
}
.wrk-group-item .module-box .module-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: currentColor;
}
.wrk-group-item .module-box .module-points {
  padding: 12px clamp(20px, 4vw, 54px) 10px;
  margin: auto 0px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.wrk-group-item .module-box .module-points::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url("/img/svg/workshop/icon-star.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.wrk-group-item .module-box .module-points span {
  margin-top: 4px;
  color: #fff;
}
.wrk-group-item .module-box .module-content {
  padding: 24px clamp(20px, 4vw, 54px);
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .module-box .module-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .module-box .module-content > div {
    width: 50%;
    align-self: stretch;
  }
}
.wrk-group-item .module-box .module-content p,
.wrk-group-item .module-box .module-content ol {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  line-height: 1.4;
}
.wrk-group-item .module-box .module-content ol {
  list-style: decimal;
  list-style-position: inside;
}
@media screen and (max-width: 1023px) {
  .wrk-group-item .module-box .module-ifno {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .module-box .module-ifno {
    padding-right: 24px;
    border-right: 1px solid #e8e2e7;
  }
}
@media screen and (min-width: 1024px) {
  .wrk-group-item .module-box .module-thmes {
    padding-left: 54px;
  }
}
.wrk-group-item .module-box .module-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 18px;
  color: #000;
  line-height: 1.3;
}
.wrk-group-item .section-subscribe {
  background-color: #9013fe;
}
.wrk-group-item .section-subscribe .inner-container {
  padding: 34px 0;
  color: #fff;
  text-align: center;
}
.wrk-group-item .section-subscribe h2 {
  margin-top: 0;
  margin-bottom: 10px;
  margin-top: 0;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 31px);
  line-height: 1.4;
}
.wrk-group-item .section-subscribe p {
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}
.wrk-group-item .mentors strong {
  color: #666;
}

@media screen and (max-width: 1024px) {
  .available-into {
    position: relative;
    z-index: 4;
  }
}
@media screen and (min-width: 1024px) {
  .available-into {
    padding-right: 64px;
    line-height: 1.3;
  }
}
.available-into .available-courses-count {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  color: #a92cfc;
  font-weight: bold;
}
@media screen and (min-width: 1025px) {
  .available-into .available-courses-count {
    position: relative;
    z-index: 4;
  }
}
.available-into .available-courses-count::before {
  content: "";
  width: 14px;
  height: 18px;
  margin-right: 12px;
  display: inline-block;
  background-image: url("/img/online-landing/icons/icon_location-2.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}
.available-into .available-courses-count span {
  margin: 0;
  margin-bottom: 0 !important;
  display: inline-block !important;
  cursor: pointer;
  line-height: 0.8;
}
@media screen and (max-width: 1024px) {
  .available-into .available-courses-count span {
    font-weight: 400;
    color: #000;
  }
}
@media screen and (min-width: 1025px) {
  .available-into .available-courses-count span:hover {
    text-decoration: underline;
  }
}
.available-into .available-courses-count .location-list {
  height: auto;
}
@media screen and (max-width: 1024px) {
  .available-into .available-courses-count .location-list {
    padding-left: 26px;
    width: 100%;
    margin-top: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .available-into .available-courses-count .location-list {
    padding: 20px;
    width: 256px;
    display: none;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    bottom: 30px;
    z-index: 4;
  }
}
.available-into .available-courses-count .location-list li {
  display: block;
}
.available-into .available-courses-count .location-list li:not(:last-child) {
  margin-bottom: 8px;
}
.available-into .available-courses-count .location-list li a {
  font-weight: 400 !important;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
}
@media screen and (min-width: 1025px) {
  .available-into .available-courses-count .location-list li a {
    color: #000000 !important;
  }
  .available-into .available-courses-count .location-list li a:hover {
    color: #a92cfc !important;
  }
}
@media screen and (min-width: 1025px) {
  .available-into .available-courses-count.open .location-list {
    display: block;
  }
}

/*************************************************************************
	Dahsboard styles
*************************************************************************/
.dahsboard,
.dahsboard-settings,
.dahsboard-payments,
.dahsboard-kid,
.dahsboard-feedback {
  padding: 30px 24px 0 24px;
  width: 100%;
  background-color: #fafafa;
}
@media screen and (min-device-width: 1025px) {
  .dahsboard,
  .dahsboard-settings,
  .dahsboard-payments,
  .dahsboard-kid,
  .dahsboard-feedback {
    padding: 64px 20px 0 20px;
  }
}
.dahsboard section,
.dahsboard-settings section,
.dahsboard-payments section,
.dahsboard-kid section,
.dahsboard-feedback section {
  padding-bottom: 10px;
}

@media screen and (min-width: 1024px) {
  .db-section-half .inner-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .db-section-half .inner-container > section {
    width: calc(50% - 20px);
  }
}

.db-section-title {
  margin: 0 0 24px;
  font-weight: 500;
  font-size: 24px;
  color: #333333;
  line-height: 1.45;
  letter-spacing: normal;
}
@media screen and (min-device-width: 1025px) {
  .db-section-title {
    margin-bottom: 22px;
  }
}

@media screen and (min-width: 768px) {
  .db-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.db-box {
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.06);
  font-weight: 400;
  font-size: 12px;
  color: #79828b;
  line-height: 1.3;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .db-box {
    padding: 30px 22px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .db-box {
    padding: 46px 58px 22px 58px;
    margin-bottom: 38px;
  }
}
.db-box.tag-purple::before, .db-box.tag-junior::before, .db-box.tag-middle::before, .db-box.tag-senior::before, .db-box.tag-teen-1::before, .db-box.tag-teen-2::before {
  content: "";
  width: 100%;
  height: 6px;
  background-color: currentColor;
  position: absolute;
  top: 0;
  left: 0;
}
.db-box.tag-junior::before,
.db-box.tag-junior .tag {
  color: #F5A623;
}
.db-box.tag-middle::before,
.db-box.tag-middle .tag {
  color: #A2D273;
}
.db-box.tag-senior::before,
.db-box.tag-senior .tag {
  color: #719DE1;
}
.db-box.tag-teen-1::before,
.db-box.tag-teen-1 .tag {
  color: #a92cfc;
}
.db-box.tag-teen-2::before,
.db-box.tag-teen-2 .tag {
  color: #162ccb;
}
.db-box .tag {
  font-weight: bold;
  font-size: 14px;
  color: currentColor;
  line-height: 1;
}

.db-box-link {
  text-align: center;
}
@media screen and (max-device-width: 767px) {
  .db-box-link {
    background-color: transparent;
    box-shadow: none;
  }
}
@media screen and (min-device-width: 1024px) {
  .db-box-link {
    padding: 22px 12px;
  }
}
.db-box-link .img-holder {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e6ebf0;
}
@media screen and (max-device-width: 767px) {
  .db-box-link .img-holder {
    display: none;
  }
}
.db-box-link .img-holder img {
  width: 96px;
  height: 96px;
  margin: 0 auto;
}
.db-box-link .btn, .db-box-link .btn-6, .db-box-link .btn-7 {
  width: 128px;
  min-width: initial;
  height: 38px;
  font-size: 12px;
  line-height: 38px;
}

.db-box-title,
.db-sub-title {
  margin: 0 0 10px;
  font-weight: 500;
  color: #333333;
  line-height: 1.42;
  letter-spacing: 0.5px;
}

.db-box-title {
  font-size: 24px;
}

.db-sub-title {
  font-size: 14px;
}

.db-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dahsboard .section-active-trainings .db-row {
  align-items: flex-start;
}
.db-row:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e6ebf0;
}
.dahsboard .section-active-trainings .db-row > div {
  width: calc(100% - 68px - 50px);
  display: flex;
  flex-direction: column;
}
.db-row img {
  width: 50px;
  height: 50px;
  margin-right: 18px;
}
@media screen and (max-device-width: 1023px) {
  .db-row img {
    margin-right: 30px;
  }
}
.db-row .db-box-title {
  font-size: 14px;
  line-height: 1.3;
}
.db-row p {
  margin-bottom: 0;
}
.db-row .link-arrow {
  align-self: center;
}

.vritaul-room {
  margin-top: 10px;
  display: inline-block;
  font-size: 14px;
  color: #8441e2;
}
@media screen and (min-width: 1024px) {
  .vritaul-room {
    margin-left: auto;
  }
}
@media screen and (min-device-width: 1023px) {
  .vritaul-room:hover {
    text-decoration: underline;
  }
}
.vritaul-room span {
  padding-top: 1px;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.link-arrow {
  min-width: 20px;
  min-height: 30px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #79828b;
  text-align: center;
  position: relative;
}
.link-arrow::before, .link-arrow::after {
  content: "";
  position: absolute;
}
.link-arrow::before {
  width: 20px;
  height: 20px;
  background-color: #f9f9f9;
  top: 0;
  left: 0;
}
.link-arrow::after {
  padding: 3px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: #cacaca #cacaca transparent transparent;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  top: 6px;
  left: 4px;
}
.link-arrow span {
  white-space: nowrap;
  transform: translateX(-50%);
  position: absolute;
  top: 26px;
  left: 50%;
}
@media screen and (max-width: 1024px) {
  .link-arrow span {
    display: none !important;
  }
}
.link-arrow .db-less {
  display: none;
}
.link-arrow .db-more {
  display: block;
}
@media screen and (max-width: 1023px) {
  .link-arrow {
    min-height: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .link-arrow:hover {
    color: #8441e2;
  }
  .link-arrow:hover::before {
    background-color: #8441e2;
  }
  .link-arrow:hover::after {
    border-color: #fdfdfd #fdfdfd transparent transparent;
  }
}

.open .accordion::after {
  border-color: transparent #cacaca #cacaca transparent;
  top: 4px;
  left: 6px;
}
.open .accordion .db-less {
  display: block;
}
.open .accordion .db-more {
  display: none;
}

/*********************************
	My Kids
*********************************/
.section-my-kids .db-box {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .section-my-kids .db-box {
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 1025px) {
  .section-my-kids .db-box {
    width: calc(50% - 20px);
    transition: box-shadow 0.24s ease-in-out;
  }
  .section-my-kids .db-box:hover {
    box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.2);
  }
}
.section-my-kids .db-box:not(.db-box-link) {
  padding: 0;
  display: block;
  align-self: stretch;
}
@media screen and (max-width: 1023px) {
  .section-my-kids .db-box:not(.db-box-link) {
    padding: 30px 22px;
  }
}
@media screen and (min-width: 1025px) {
  .section-my-kids .db-box:not(.db-box-link) {
    padding: 46px 58px 22px 58px;
  }
}
@media screen and (min-width: 768px) {
  .section-my-kids .db-box:nth-child(odd) + .db-box-link {
    margin-right: auto;
    margin-left: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .section-my-kids .db-box:nth-child(odd) + .db-box-link {
    margin-left: 40px;
  }
}
.section-my-kids .db-box header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6ebf0;
}
.section-my-kids .db-box header div {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
}
.section-my-kids .db-box header button {
  background-color: #a92cfc;
}
.section-my-kids .db-box [class^=tag-],
.section-my-kids .db-box .points {
  margin-bottom: 4px;
}
.section-my-kids .db-box .tag {
  padding: 0;
  position: relative;
  top: initial;
  left: initial;
}
.section-my-kids .db-box .points,
.section-my-kids .db-box .age {
  display: block;
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: #a92cfc;
}
.section-my-kids .db-box .points > div,
.section-my-kids .db-box .age > div {
  font-weight: bold;
}
.section-my-kids .db-box .points {
  font-weight: 500;
  font-size: 14px;
}
.section-my-kids .db-box .promos-count {
  color: #a92cfc;
}
.section-my-kids .db-box .promos-count > div {
  font-size: 14px;
  font-weight: bold;
}
.section-my-kids .db-box .age {
  font-weight: normal;
  font-size: 17px;
  color: #9b9b9b;
}
.section-my-kids .db-box footer {
  padding-top: 12px;
}
@media screen and (min-device-width: 1025px) {
  .section-my-kids .db-box footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.section-my-kids .db-box footer .db-sc-title {
  width: 100%;
  margin: 0 0 10px;
  font-weight: 500;
  font-size: 14px;
  color: #8441e2;
  line-height: 2;
  letter-spacing: 0.3px;
}
.section-my-kids .db-box footer .db-title-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-device-width: 1025px) {
  .section-my-kids .db-box footer .db-title-wrapper {
    width: 100%;
    margin-bottom: 18px;
  }
}
.section-my-kids .db-box footer .db-title-wrapper .db-sc-title {
  width: auto;
}
@media screen and (min-device-width: 1025px) {
  .section-my-kids .db-box footer .db-title-wrapper .db-sc-title {
    margin-bottom: 0;
  }
}
.section-my-kids .db-box footer .db-title-wrapper .vritaul-room {
  margin-top: 0;
}
.section-my-kids .db-box footer h4:not(.db-sc-title) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-my-kids .db-box footer > div:not(:last-child):not(.db-title-wrapper) {
  margin-bottom: 6px;
}
@media screen and (max-device-width: 1024px) {
  .section-my-kids .db-box footer > div:not(:last-child):not(.db-title-wrapper) {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e6ebf0;
  }
}
.section-my-kids .db-box footer > div p {
  margin: 0;
}
.section-my-kids .db-box footer > div p:not(:last-child) {
  margin-bottom: 6px;
}
.section-my-kids .db-box footer h4 .btn-1 {
  margin-left: 5px;
}
.section-my-kids .db-box footer .db-sc-title .btn-small {
  height: 28px;
  float: right;
}
.section-my-kids .db-box footer strong {
  display: inline;
  color: #333333;
}
.section-my-kids .db-box footer span {
  color: #9b9b9b;
}
.section-my-kids .db-box-link {
  width: 260px;
}
@media screen and (max-device-width: 767px) {
  .section-my-kids .db-box-link {
    margin: 0 auto;
  }
}

/*********************************
	General Info
*********************************/
.section-general-info .db-box {
  padding: 12px 22px;
}
@media screen and (min-width: 1024px) {
  .section-general-info .db-box {
    width: calc(25% - 20px);
    align-self: stretch;
  }
}
.section-general-info .db-box-title {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.1;
}
.section-general-info .db-all {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.section-general-info .db-all div {
  width: 33.3%;
  text-align: center;
}

/*********************************
	Active Trainings
*********************************/
.section-active-trainings .db-box,
.section-rankings .db-box {
  padding: 30px 22px;
  width: 100%;
}
@media screen and (min-device-width: 1025px) {
  .section-active-trainings .db-box,
  .section-rankings .db-box {
    padding: 30px 58px;
  }
}

/*********************************
	Rankings
*********************************/
.section-rankings .db-row {
  position: relative;
}
.section-rankings .db-row:last-child .rank {
  transform: translateY(-50%);
}
.section-rankings .rank {
  width: 28px;
  font-weight: bold;
  font-size: 24px;
  color: #333333;
  line-height: 1.3;
  text-align: center;
  transform: translateY(calc(-50% - 10px));
  position: absolute;
  top: 50%;
  left: -36px;
}
@media screen and (max-device-width: 1024px) {
  .section-rankings .rank {
    display: none;
  }
}
.section-rankings .point-score {
  margin-left: auto;
  text-align: right;
}
.section-rankings .point-score strong {
  display: block;
  font-weight: bold;
  font-size: 24px;
  color: #333333;
  line-height: 1.3;
}

/*********************************
	Active Workshops
*********************************/
.section-active-workshops {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .section-active-workshops .db-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.section-active-workshops .db-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (min-width: 768px) {
  .section-active-workshops .db-box {
    width: calc(50% - 20px);
    align-self: stretch;
  }
}
.section-active-workshops .db-box > div,
.section-active-workshops .db-box .db-box-title {
  width: 100%;
}
.section-active-workshops .db-levels {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dahsboard-kid .section-active-workshops .db-box-title {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e6ebf0;
}
.section-active-workshops .db-wrk-title {
  margin: 0 auto 20px;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  line-height: 1.3;
}
.section-active-workshops .wrk-location,
.section-active-workshops .wrk-time {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  color: #9B9B9B;
  line-height: 1.1;
  position: relative;
}
.section-active-workshops .wrk-location::before,
.section-active-workshops .wrk-time::before {
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.section-active-workshops .wrk-location > div,
.section-active-workshops .wrk-time > div {
  text-align: left;
}
.section-active-workshops .wrk-location span,
.section-active-workshops .wrk-location address,
.section-active-workshops .wrk-time span,
.section-active-workshops .wrk-time address {
  display: inline-block;
}
.section-active-workshops .wrk-location::before {
  background-image: url("../../img/svg/workshop/icon-location.svg");
}
.section-active-workshops .wrk-location address {
  font-style: normal;
}
.section-active-workshops .wrk-time::before {
  background-image: url("../../img/svg/workshop/icon-clock.svg");
}
.section-active-workshops .btn, .section-active-workshops .btn-6, .section-active-workshops .btn-7 {
  margin-top: auto;
  margin-left: auto;
}

/*********************************
	All Certificates
*********************************/
.section-all-certificates .db-box {
  width: 100%;
}
.section-all-certificates .db-row {
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .section-all-certificates .db-row {
    display: block;
    border: none;
  }
}
.section-all-certificates .db-row > div {
  display: flex;
  justify-content: flex-start;
}
.section-all-certificates .username {
  align-items: center;
}
@media screen and (max-width: 1023px) {
  .section-all-certificates .username {
    padding-bottom: 14px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e6ebf0;
  }
}
@media screen and (min-width: 1024px) {
  .section-all-certificates .username {
    width: 16%;
    margin-right: 22px;
  }
}
.section-all-certificates .username .db-box-title {
  margin: 0;
}
@media screen and (max-width: 1023px) {
  .section-all-certificates .certificate {
    margin-bottom: 22px;
    align-items: flex-start;
  }
}
@media screen and (min-device-width: 1024px) {
  .section-all-certificates .certificate {
    padding-right: 2%;
    min-width: 42%;
    align-items: center;
  }
}
@media screen and (min-device-width: 1025px) {
  .section-all-certificates .certificate {
    flex: 1 0 auto;
  }
}
.section-all-certificates .certificate img {
  width: 98px;
  max-height: 70px;
  height: auto;
  margin-right: 22px;
}
.section-all-certificates .certificate .certificate-info {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
}
.section-all-certificates .certificate p {
  color: #9b9b9b;
}
@media screen and (max-width: 1024px) {
  .section-all-certificates .certificate p {
    padding-right: 30px;
  }
}
@media screen and (min-device-width: 1024px) {
  .section-all-certificates .certificate p {
    width: 220px;
  }
}
.section-all-certificates .certificate strong {
  margin-bottom: 8px;
  color: #333333;
}
.section-all-certificates .certificate .download-link {
  font-size: 10px;
  color: #79828b;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .section-all-certificates .certificate .download-link {
    margin-top: 15px;
    margin-left: auto;
  }
}
@media screen and (min-width: 1024px) {
  .section-all-certificates .certificate .download-link {
    margin-left: 20px;
  }
}
.section-all-certificates .certificate .download-link::before {
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 auto 7px;
  display: block;
  background-image: url("../../img/svg/download-button.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.5;
  filter: grayscale(100%);
}
@media screen and (min-device-width: 1024px) {
  .section-all-certificates .certificate .download-link:hover {
    color: #8441e2;
  }
  .section-all-certificates .certificate .download-link:hover::before {
    opacity: 1;
    filter: grayscale(0);
  }
}

/*********************************
	Tests History
*********************************/
.section-tests .db-box {
  width: 100%;
}
.section-tests .db-row {
  min-height: 50px;
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .section-tests .db-row {
    display: block;
  }
}
.section-tests .db-row > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.section-tests .first-part-wrapper {
  width: 50%;
  display: flex;
}
@media screen and (max-width: 1023px) {
  .section-tests .first-part-wrapper {
    width: 100%;
    display: flex;
    height: 60px;
  }
  .section-tests .first-part-wrapper .test-separator {
    display: none;
  }
}
.section-tests .first-part-wrapper .test-passed {
  align-items: center;
  width: 20%;
}
.section-tests .first-part-wrapper .test-passed span {
  width: 70px;
  height: 30px;
  padding: 7px 12px 7px 12px;
  border-radius: 8px;
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.21;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  display: inline-block;
  margin-right: 10px;
}
.section-tests .first-part-wrapper .test-passed span.passed {
  background-color: #57ce89;
}
.section-tests .first-part-wrapper .test-passed span.failed {
  background-color: #ff6350;
}
@media screen and (max-width: 1023px) {
  .section-tests .first-part-wrapper .test-passed {
    width: 30%;
    text-align: center;
  }
}
.section-tests .first-part-wrapper .test-title {
  width: 80%;
}
@media screen and (max-width: 1023px) {
  .section-tests .first-part-wrapper .test-title {
    width: 70%;
    text-align: center;
  }
}
.section-tests .first-part-wrapper .test-title .test-info-details {
  font-family: Rubik;
  font-size: 14px;
  color: #868686;
  margin-top: 4px;
}
.section-tests .first-part-wrapper .test-title .test-title-value {
  font-family: Rubik;
  font-size: 18px;
  font-weight: 500;
  color: black;
}
.section-tests .second-part-wrapper {
  width: 40%;
  display: flex;
}
@media screen and (max-width: 1023px) {
  .section-tests .second-part-wrapper {
    width: 100%;
    display: flex;
    height: 70px;
  }
}
.section-tests .second-part-wrapper .test-date {
  text-align: center;
  align-content: center;
  align-items: center;
  width: 33%;
  font-family: Rubik;
  font-size: 14px;
}
.section-tests .second-part-wrapper .test-answers {
  text-align: center;
  align-content: center;
  align-items: center;
  width: 33%;
}
.section-tests .second-part-wrapper .test-answers .test-answers-value {
  font-family: Rubik;
  font-size: 23.5px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}
.section-tests .second-part-wrapper .test-answers .test-answers-label {
  font-family: Rubik;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.04;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.section-tests .second-part-wrapper .test-score {
  text-align: center;
  align-content: center;
  align-items: center;
  width: 33%;
}
.section-tests .second-part-wrapper .test-score .test-score-measure {
  font-family: Rubik;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.section-tests .second-part-wrapper .test-score .test-score-value {
  font-family: Rubik;
  font-size: 23.5px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}
.section-tests .third-part-wrapper {
  width: 10%;
  min-width: 150px;
  display: flex;
}
@media screen and (max-width: 1023px) {
  .section-tests .third-part-wrapper {
    width: 100%;
    height: 50px;
  }
}
.section-tests .third-part-wrapper .test-action {
  text-align: center;
  align-content: center;
  align-items: center;
  width: 100%;
}
.section-tests .third-part-wrapper .test-action a {
  padding: 9px 17px 9px 17px;
  border-radius: 8px;
  background-color: #9a62fa;
  font-family: Rubik;
  font-size: 15px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  width: 150px;
}
.section-tests .test-separator {
  width: 1px;
  height: 35px;
  margin: 0px 10px;
  background-color: #ebebeb;
}
.section-tests .db-container.new-test .half-row-wrapper:nth-of-type(1) {
  display: block;
  text-align: unset;
}
.section-tests .db-container.new-test .half-row-wrapper {
  width: 50%;
  height: 133px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .section-tests .db-container.new-test .half-row-wrapper {
    width: 100%;
    flex-wrap: wrap;
  }
}
.section-tests .db-container.new-test .test-separator {
  width: 1px;
  height: 133px;
  margin: 0px 60px;
  background-color: #ebebeb;
}
@media screen and (max-width: 1023px) {
  .section-tests .db-container.new-test .test-separator {
    display: none;
  }
}
.section-tests .db-container.new-test .db-box {
  padding: 34px 58px 34px 100px;
}
@media screen and (max-width: 767px) {
  .section-tests .db-container.new-test .db-box {
    padding: 62px 30px 34px 34px;
  }
}
.section-tests .db-container.new-test .new-test-ribbon {
  position: relative;
  top: 61px;
  left: -15px;
  width: 100px;
  height: 38px;
  background-color: #57ce89;
  z-index: 1;
  text-align: center;
  color: white;
  font-family: Helvetica;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  padding: 11px 0 12px 0;
}
@media screen and (max-width: 767px) {
  .section-tests .db-container.new-test .new-test-ribbon {
    top: 50px;
  }
}
.section-tests .db-container.new-test .new-test-ribbon:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  border-top: 15px solid #35c973;
  border-left: 15px solid transparent;
}
.section-tests .db-container.new-test .new-test-ribbon:before {
  left: 0;
  border-right: 0px;
}
.section-tests .db-container.new-test .new-test-title {
  font-family: Rubik;
  font-size: 22px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: black;
  margin-bottom: 17px;
}
@media screen and (max-width: 767px) {
  .section-tests .db-container.new-test .new-test-title {
    font-size: 18px;
  }
}
.section-tests .db-container.new-test .new-test-module {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: black;
  margin-bottom: 34px;
}
.section-tests .db-container.new-test .new-test-valid-until {
  font-family: Rubik;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #9358e5;
}
.section-tests .db-container.new-test .new-test-valid-until span {
  color: black;
}
.section-tests .db-container.new-test .new-test-duration {
  width: 20%;
}
@media screen and (max-width: 767px) {
  .section-tests .db-container.new-test .new-test-duration {
    width: 34%;
  }
}
.section-tests .db-container.new-test .new-test-duration .new-test-duration-measure {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.section-tests .db-container.new-test .new-test-duration .new-test-duration-value {
  font-family: Rubik;
  font-size: 30.5px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}
.section-tests .db-container.new-test .new-test-pass-score {
  width: 20%;
}
@media screen and (max-width: 767px) {
  .section-tests .db-container.new-test .new-test-pass-score {
    width: 33%;
  }
}
.section-tests .db-container.new-test .new-test-pass-score .new-test-score-measure {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.section-tests .db-container.new-test .new-test-pass-score .new-test-score-value {
  font-family: Rubik;
  font-size: 30.5px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}
.section-tests .db-container.new-test .new-test-action {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .section-tests .db-container.new-test .new-test-action {
    width: 100%;
  }
}
.section-tests .db-container.new-test .new-test-action a {
  padding: 15px 24px 15px 23px;
  border-radius: 8px;
  background-color: #9a62fa;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}
.section-tests .db-container.new-test .new-test-questions {
  width: 20%;
}
@media screen and (max-width: 767px) {
  .section-tests .db-container.new-test .new-test-questions {
    width: 33%;
  }
}
.section-tests .db-container.new-test .new-test-questions .new-test-questions-label {
  font-family: Rubik;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #79828b;
}
.section-tests .db-container.new-test .new-test-questions .new-test-questions-value {
  font-family: Rubik;
  font-size: 30.5px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: black;
}

/*************************************************************************
	Dahsboard Settings {
*************************************************************************/
@media screen and (min-width: 1024px) {
  .dahsboard-settings .db-section-half section {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
}
@media screen and (min-width: 1024px) {
  .dahsboard-settings .db-section-half .db-container {
    height: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .dahsboard-settings .db-section-half .db-box {
    align-self: stretch;
  }
}

.fm-row {
  height: 50px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 10px;
  border: solid 1px #dcdcdc;
  background-color: #fff;
  font-size: 15px;
  color: #9b9b9b;
  line-height: 1;
}
.fm-row::before {
  width: 18px;
  height: 18px;
  margin: 0 28px 0 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-device-width: 1024px) {
  .fm-row:hover {
    border-color: #8441e2;
  }
}
.fm-row input {
  padding: 10px;
  flex: 1 0 auto;
  text-align: left;
}

.field-user::before {
  background-image: url("../../img/svg/icon-user.svg");
}

.field-phone::before {
  background-image: url("../../img/svg/icon-phone.svg");
}

.field-email::before {
  background-image: url("../../img/svg/icon-email2.svg");
}

.field-password::before {
  background-image: url("../../img/svg/icon-locker.svg");
}

.field-address::before {
  background-image: url("../../img/svg/icon-pin.svg");
}

.field-address2::before {
  background-image: url("../../img/svg/icon-pin.svg");
}

.field-preferred_hall_id::before {
  background-image: url("../../img/svg/icon-building.svg");
}

.section-personal-info .db-box,
.section-notifications .db-box {
  width: 100%;
}
@media screen and (min-device-width: 1024px) {
  .section-personal-info .db-box,
  .section-notifications .db-box {
    padding: 40px 30px;
  }
}
.section-personal-info form,
.section-notifications form {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-device-width: 1024px) {
  .section-personal-info .btn, .section-personal-info .btn-6, .section-personal-info .btn-7,
  .section-notifications .btn,
  .section-notifications .btn-6,
  .section-notifications .btn-7 {
    margin-top: 28px;
  }
}

/*********************************
	Personal Info
*********************************/
.section-personal-info .fm-row::before {
  content: "";
}
.section-personal-info .fm-row .jcf-select {
  width: 100%;
}

/*********************************
	Notifications
*********************************/
@media screen and (max-device-width: 1023px) {
  .section-notifications .db-box {
    padding: 30px 35px;
  }
}
@media screen and (min-device-width: 1024px) {
  .section-notifications .db-box {
    padding-top: 80px;
  }
}
.section-notifications form {
  max-width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.section-notifications form > div {
  margin: 0 auto;
}
@media screen and (min-device-width: 1024px) {
  .section-notifications form > div {
    width: 80%;
  }
}
.section-notifications .fm-row {
  padding: 0;
  margin-bottom: 0;
  border: none;
}
.section-notifications .fm-row::before {
  display: none;
}
.section-notifications .jcf-checkbox,
.section-notifications .jcf-radio,
.section-notifications input[type=radio],
.section-notifications input[type=checkbox] {
  width: 22px;
  height: 22px;
  margin-right: 28px;
}
@media screen and (min-device-width: 1024px) {
  .section-notifications .jcf-checkbox:hover ~ label,
  .section-notifications .jcf-radio:hover ~ label,
  .section-notifications input[type=radio]:hover ~ label,
  .section-notifications input[type=checkbox]:hover ~ label {
    color: #8441e2;
  }
}
.section-notifications .jcf-radio.jcf-checked span {
  background-color: #8441e2;
}
.section-notifications label {
  font-size: 14px;
  color: #333333;
}
@media screen and (min-device-width: 1024px) {
  .section-notifications label:hover {
    color: #8441e2;
  }
}
.section-notifications p {
  font-size: 14px;
  color: #333333;
  line-height: 1.3;
}
@media screen and (max-device-width: 1024px) {
  .section-notifications p {
    margin-top: 16px;
  }
}

/*********************************
	Notification Bar
*********************************/
.notification-bar {
  margin: 0 0 22px 0;
  border-radius: 10px;
  background-color: rgba(216, 216, 216, 0.2);
  font-size: 16px;
  color: #333333;
  line-height: 1.3;
}
@media screen and (max-width: 1024px) {
  .notification-bar {
    padding: 20px 24px;
    text-align: center;
  }
  .notification-bar .payment-details-button {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .notification-bar {
    padding: 10px 30px;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1025px) {
  .notification-bar {
    padding: 10px 100px;
  }
}
@media screen and (max-width: 1024px) {
  .notification-bar p {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .notification-bar p {
    margin-bottom: 0;
  }
}
.notification-bar span {
  font-weight: bold;
  color: #8441e2;
}

/*************************************************************************
	Dashboard Payments
*************************************************************************/
.dahsboard-payments .db-box {
  padding: 0;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
@media screen and (max-width: 1200px) {
  .dahsboard-payments .db-box {
    background: none;
  }
}
@media screen and (max-width: 1200px) {
  .dahsboard-payments .db-row-header {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row-header {
    background-color: #eeeeee;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    position: sticky;
    top: 80px;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row-header .cl-status {
    text-align: center;
  }
}
.dahsboard-payments .db-row {
  padding: 0;
  font-size: 14px;
  color: #52575a;
}
@media screen and (max-width: 1200px) {
  .dahsboard-payments .db-row {
    padding: 20px 24px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.06);
  }
  .dahsboard-payments .db-row:not(:last-child) {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row {
    padding: 0 10px 0 0;
    border-bottom: 1px solid #e6ebf0;
  }
  .dahsboard-payments .db-row:hover:not(.db-row-header) {
    background-color: #fdfdfd;
  }
  .dahsboard-payments .db-row:not(:last-child) {
    margin-bottom: initial;
  }
}
@media screen and (max-width: 1200px) {
  .dahsboard-payments .db-row [class^=cl-] {
    display: flex;
    align-items: center;
  }
  .dahsboard-payments .db-row [class^=cl-]::before {
    content: attr(data-title);
    padding: 8px 2% 8px 0;
    width: 28%;
    height: auto;
    margin-right: 6%;
    display: inline-flex;
    align-self: stretch;
    align-items: center;
    border-right: 1px solid #e6ebf0;
    font-weight: bold;
    color: #333333;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row [class^=cl-] {
    padding: 22px 10px;
    display: block;
    word-wrap: break-word;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row .cl-kid,
  .dahsboard-payments .db-row .cl-price {
    width: 10%;
    text-align: center;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row .cl-date {
    width: 12%;
    text-align: center;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row .cl-training {
    width: 30%;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row .cl-method {
    width: 14%;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row .cl-promo {
    width: 12%;
  }
}
.dahsboard-payments .db-row .cl-status {
  color: #8441e2;
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row .cl-status {
    width: 12%;
  }
}
.dahsboard-payments .db-row p {
  margin-bottom: 0;
}
@media screen and (max-width: 1199px) {
  .dahsboard-payments .db-row p {
    width: 62%;
  }
}
@media screen and (min-width: 1200px) {
  .dahsboard-payments .db-row p {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.dahsboard-payments .db-row .did-not {
  color: #9b9b9b;
}
.dahsboard-payments .db-row .confirm {
  color: #d67b3c;
}

.section-payment-info .db-box {
  width: 100%;
}
@media screen and (max-width: 1200px) {
  .section-payment-info .db-row:not(.db-row-header) {
    display: block;
  }
}

/*************************************************************************
	Dahsboard Kid
*************************************************************************/
.dahsboard-kid .section-my-kids .db-box {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .dahsboard-kid .section-my-kids .db-box {
    padding: 30px 22px;
  }
}
@media screen and (min-width: 1025px) {
  .dahsboard-kid .section-my-kids .db-box {
    padding: 46px 58px 22px 58px;
  }
  .dahsboard-kid .section-my-kids .db-box:hover {
    box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.06);
  }
}
@media screen and (min-width: 1024px) {
  .dahsboard-kid .section-general-info .db-box {
    padding: 18px;
    width: calc(50% - 20px);
  }
}
@media screen and (min-width: 1024px) {
  .dahsboard-kid .section-all-certificates .certificate:not(:last-child) {
    padding-right: 100px;
  }
}
.dahsboard-kid .section-all-certificates .download-link {
  margin-left: auto;
}

.db-row-content {
  margin-top: 20px;
  max-height: 0;
  height: auto;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: max-height 0.3s ease-out, border-color 0.3s ease-out 0.2s;
}

.open .db-row-content {
  max-height: 1000px;
  border-color: #e6ebf0;
  transition: max-height 0.3s ease-out 0.1s, border-color 0.3s ease-out;
}

.section-trainings .db-box,
.section-feedback .db-box {
  width: 100%;
}
.section-trainings .db-row,
.section-feedback .db-row {
  padding-bottom: 0;
  display: block;
}
@media screen and (max-width: 1024px) {
  .section-trainings .db-row,
  .section-feedback .db-row {
    border-bottom: 1px solid #e6ebf0;
  }
  .section-trainings .db-row:not(:last-child),
  .section-feedback .db-row:not(:last-child) {
    margin-bottom: 30px;
  }
}
.section-trainings .db-row-head,
.section-trainings .db-ct-row,
.section-feedback .db-row-head,
.section-feedback .db-ct-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .section-trainings .db-kid-module,
  .section-feedback .db-kid-module {
    width: calc(50% - 110px);
  }
}
@media screen and (min-width: 1024px) {
  .section-trainings .db-start,
  .section-trainings .db-end,
  .section-feedback .db-start,
  .section-feedback .db-end {
    width: 14%;
  }
}
.section-trainings .db-end img,
.section-feedback .db-end img {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  display: block;
}
@media screen and (max-width: 1024px) {
  .section-trainings .db-hall,
  .section-feedback .db-hall {
    width: 40%;
  }
}
@media screen and (min-width: 1024px) {
  .section-trainings .db-hall,
  .section-feedback .db-hall {
    width: 22%;
  }
}
.section-trainings .link-arrow,
.section-feedback .link-arrow {
  margin-left: 0;
}
@media screen and (max-width: 1023px) {
  .section-trainings .accordion,
  .section-feedback .accordion {
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: -31px;
  }
}
.section-trainings .db-ct-row,
.section-feedback .db-ct-row {
  padding: 14px 0;
  align-items: flex-start;
}
@media screen and (max-width: 1024px) {
  .section-trainings .db-ct-row .db-end,
  .section-feedback .db-ct-row .db-end {
    width: 40%;
  }
}

/*********************************
	Trainings
*********************************/
.section-trainings p:not(.db-info),
.section-feedback p:not(.db-info) {
  font-size: 14px;
  color: #333333;
}
@media screen and (min-width: 1024px) {
  .section-trainings p:not(.db-info),
  .section-feedback p:not(.db-info) {
    margin-bottom: 8px;
  }
}

@media screen and (max-width: 1023px) {
  .section-trainings .db-box {
    padding: 0;
    border-radius: initial;
    background-color: transparent;
    box-shadow: none;
  }
}
@media screen and (max-width: 1023px) {
  .section-trainings .db-row {
    padding: 30px 22px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.06);
  }
  .section-trainings .db-row:not(:last-child) {
    margin-bottom: 20px;
  }
}
.section-trainings .db-row-head {
  flex-wrap: wrap;
}
@media screen and (max-width: 1023px) {
  .section-trainings .db-row-head > div:not(:last-of-type) {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .section-trainings .db-row-head > div {
    padding-right: 2%;
    width: 32%;
  }
}
.section-trainings .db-row-head .db-box-title {
  margin-bottom: 20px;
  font-size: 17px;
}
@media screen and (min-width: 1024px) {
  .section-trainings .db-row-head .db-box-title {
    margin-bottom: 14px;
  }
}
.section-trainings .db-row-content {
  border-top: 1px solid #e6ebf0;
}
.section-trainings .db-moudle-state {
  width: 50px;
  height: 50px;
  margin-right: 18px;
  text-align: center;
}
.section-trainings .db-moudle-state::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  background-color: #eeeded;
}
.section-trainings .db-box-title {
  width: 100%;
}
.section-trainings .db-ct-row {
  padding: 14px 0;
  align-items: flex-start;
  color: #9b9b9b;
}
.section-trainings .db-ct-row:not(:last-child)::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e6ebf0;
  position: absolute;
  right: 0;
  bottom: 6px;
}
@media screen and (min-width: 1024px) {
  .section-trainings .db-ct-row:not(:last-child)::after {
    width: calc(100% - 68px);
  }
}
@media screen and (max-width: 1023px) {
  .section-trainings .db-ct-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
.section-trainings .db-ct-row .db-box-title {
  opacity: 0.6;
  color: #333333;
}
@media screen and (max-width: 1023px) {
  .section-trainings .db-ct-row .db-kid-module {
    width: calc(100% - 100px);
    margin-bottom: 22px;
  }
}
@media screen and (max-width: 1023px) {
  .section-trainings .db-ct-row .db-start,
  .section-trainings .db-ct-row .db-end {
    width: 30%;
  }
}
@media screen and (max-width: 1023px) {
  .section-trainings .db-ct-row .link-arrow {
    position: absolute;
    top: 20px;
    right: 0;
  }
}
.section-trainings .active {
  color: #9b9b9b;
}
.section-trainings .active .db-moudle-state::before {
  background-color: #A2D273;
}
.section-trainings .active .db-box-title {
  opacity: 1;
}
.section-trainings .active .link-arrow {
  display: block;
}
@media screen and (max-width: 1200px) {
  .section-trainings .db-start .db-box-title,
  .section-trainings .db-end .db-box-title,
  .section-trainings .db-hall .db-box-title {
    margin-bottom: 6px;
  }
  .section-trainings .db-start p,
  .section-trainings .db-end p,
  .section-trainings .db-hall p {
    font-size: 13px;
  }
}

.db-info {
  font-size: 12px;
  color: #9b9b9b;
  display: flex;
  align-items: center;
}
.db-info::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 4px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.info-hall::before {
  background-image: url("../../img/svg/workshop/icon-location.svg");
}

.info-date::before {
  background-image: url("../../img/svg/workshop/icon-clock.svg");
}

.info-price::before {
  background-image: url("../../img/svg/workshop/icon-dollar.svg");
}

/*********************************
	Filters
*********************************/
.db-filters form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .db-filters form {
    padding-bottom: 10px;
  }
}
@media screen and (min-width: 1025px) {
  .db-filters form {
    margin-bottom: 50px;
  }
}
.db-filters select,
.db-filters .jcf-select {
  padding: 0 14px;
  height: 55px;
  border-radius: 3px;
  background-color: #f6f6f6;
  font-size: 15px;
  line-height: 1.1;
  color: #9b9b9b;
  outline: none !important;
}
@media screen and (max-width: 1024px) {
  .db-filters select,
  .db-filters .jcf-select {
    width: calc(50% - 5px);
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 1024px) {
  .db-filters select,
  .db-filters .jcf-select {
    width: calc(25% - 20px);
  }
}
.db-filters select:hover,
.db-filters .jcf-select:hover {
  background-color: #fff;
}
.db-filters select optgroup,
.db-filters select option,
.db-filters .jcf-select optgroup,
.db-filters .jcf-select option {
  background-color: #fff;
  color: #333333;
}
.db-filters select .label,
.db-filters .jcf-select .label {
  margin-bottom: 10px;
  color: gray;
}

/*********************************
	Dashboard Feedback
*********************************/
.dahsboard-feedback .db-row-head {
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: block;
  border-bottom: 1px solid #e6ebf0;
}
@media screen and (min-width: 1024px) {
  .dahsboard-feedback .db-row-head {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1024px) {
  .dahsboard-feedback .db-row-head > div:not(.db-fb-user) {
    margin-bottom: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .dahsboard-feedback .db-row-head > div:not(.db-fb-user) {
    width: 33.3%;
  }
}
.dahsboard-feedback .db-fb-user {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dahsboard-feedback .db-box-title {
  font-size: 17px;
}
.dahsboard-feedback .db-sub-title {
  margin-bottom: 0;
}

/*********************************
	Feedback
*********************************/
@media screen and (max-width: 1023px) {
  .section-feedback .db-row-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
@media screen and (max-width: 1023px) {
  .section-feedback .db-row-head .db-kid-module {
    width: calc(100% - 80px);
    margin-bottom: 22px;
  }
}
@media screen and (max-width: 1023px) {
  .section-feedback .db-row-head .db-start,
  .section-feedback .db-row-head .db-end {
    width: 30%;
  }
}
.section-feedback .db-row {
  border-bottom: none;
}
@media screen and (max-width: 1023px) {
  .section-feedback .db-ct-row .db-kid-module {
    padding-right: 5%;
    width: 60%;
  }
}
@media screen and (min-width: 1024px) {
  .section-feedback .db-ct-row .db-kid-module {
    margin-left: 68px;
  }
}
.section-feedback .db-ct-row .db-end {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (min-width: 1024px) {
  .section-feedback .db-ct-row .db-end {
    margin-left: 14%;
  }
}

#copyMeetingPasswordModal {
  display: none;
  max-width: 800px;
  text-align: center;
  padding: 40px;
}
#copyMeetingPasswordModal .close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 20px;
  cursor: pointer;
}
#copyMeetingPasswordModal .img-container img {
  margin: auto;
}
#copyMeetingPasswordModal .copy-password-info {
  margin-top: 35px;
  font-size: 19px;
  color: #000000;
}
#copyMeetingPasswordModal .copy-password-info a {
  color: #162ccb;
}
#copyMeetingPasswordModal .copy-password-info a:hover {
  text-decoration: underline;
}
#copyMeetingPasswordModal .password-label {
  text-transform: uppercase;
  margin-top: 35px;
  font-size: 18px;
  color: #9b9b9b;
}
#copyMeetingPasswordModal .copy-password-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#copyMeetingPasswordModal .copy-password-wrapper .coppied-to-clipboard {
  display: none;
  color: #01d589;
  padding: 5px 10px;
  border-radius: 8px;
  margin-top: 10px;
}
#copyMeetingPasswordModal .copy-password-wrapper .copy-to-clipboard-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
#copyMeetingPasswordModal .copy-password-wrapper .copy-to-clipboard-container .password-container {
  color: #000000;
  border: solid 1px #dbdbdb;
  padding: 2px;
  border-radius: 8px 0 0 8px;
  min-width: 150px;
}
#copyMeetingPasswordModal .copy-password-wrapper .copy-to-clipboard-container .copy-button {
  border-radius: 8px;
  background-color: #01d589;
  color: #ffffff;
  text-transform: uppercase;
  padding: 5px 15px;
  position: relative;
  left: -10px;
}

#redeem-points-popup {
  max-height: 100%;
  overflow: auto;
}
#redeem-points-popup:before {
  content: "";
  width: 100%;
  height: 6px;
  background-color: currentColor;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px 8px 0 0;
  background-color: #02c0d6;
}
#redeem-points-popup .modal-close {
  font-size: 20px;
  right: 17px !important;
  top: 20px !important;
  cursor: pointer;
  color: #9b9b9b;
}
@media screen and (max-width: 1023px) {
  #redeem-points-popup {
    width: 100%;
    height: 100%;
  }
}
#redeem-points-popup .title {
  font-size: 22px;
  font-weight: bold;
  color: #232323;
}
#redeem-points-popup .sub-title {
  font-size: 16px;
  color: #232323;
}
#redeem-points-popup .modal-close {
  position: absolute;
  right: 0;
  top: 0;
}
#redeem-points-popup .modal-content .row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#redeem-points-popup .modal-content .row .form-details {
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #e6ebf0;
  text-align: center;
}
#redeem-points-popup .modal-content .row .form-details .icon {
  color: #8548dc;
  object-fit: contain;
}
#redeem-points-popup .modal-content .row .form-details .icon.gift-card {
  width: 35px;
}
#redeem-points-popup .modal-content .row .form-details .available-points {
  margin-top: 20px;
  color: #a92cfc;
}
#redeem-points-popup .modal-content .row .form-details .available-points .available-points-label {
  text-transform: uppercase;
  font-size: 13px;
  line-height: normal;
}
#redeem-points-popup .modal-content .row .form-details .available-points .available-loyalty-points {
  font-weight: bold;
  font-size: 17px;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container {
  margin-top: 20px;
  width: 100%;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-label {
  font-size: 16px;
  color: #232323;
  text-align: center;
  font-weight: bold;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list {
  max-height: 150px;
  overflow: auto;
  text-transform: uppercase;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-amount {
  font-size: 15px;
  color: #a92cfc;
  padding: 0 15px;
  min-width: 120px;
  text-align: right;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-codename {
  font-size: 15px;
  color: #162bcb;
  font-weight: 500;
  padding: 0 15px;
  border-left: 1px solid #c3c2c2;
  min-width: 175px;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-copy-button {
  display: flex;
  flex-direction: row;
  color: #a92cfc;
  font-size: 14px;
  cursor: pointer;
  width: 85px;
}
#redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-copy-button .check {
  display: none;
}
@media screen and (max-width: 1023px) {
  #redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item {
    border-top: 1px solid #c3c2c2;
    padding-top: 10px;
    flex-direction: column;
  }
  #redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item:first-of-type {
    border-top: none;
  }
  #redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-amount, #redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-codename, #redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-copy-button {
    width: 100%;
    text-align: center;
    border: none;
    padding: 2px;
  }
  #redeem-points-popup .modal-content .row .generated-promocodes-container .generated-promocodes-list .generated-promocode-list-item .generated-promocode-copy-button {
    display: flex;
    justify-content: center;
  }
}
#redeem-points-popup .modal-content .row .redeem-details {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#redeem-points-popup .modal-content .row .redeem-details .available-points-label {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #232323;
}
#redeem-points-popup .modal-content .row .redeem-details .redeemed-codes-container {
  margin-top: 30px;
}
#redeem-points-popup .modal-content .row .redeem-details .form-group-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
#redeem-points-popup .modal-content .row .redeem-details .form-group-row .form-group, #redeem-points-popup .modal-content .row .redeem-details .form-group-row .form-details {
  text-align: center;
}
#redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-points-input.form-group {
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  padding: 8px 10px;
}
#redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-points-input.form-group .amount-container, #redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-points-input.form-group .points-label {
  font-size: 15px;
  color: #a3a1a2;
}
#redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-points-input.form-group input.form-control[type=number] {
  min-width: 100px;
  text-align: center;
  font-size: 17px;
  min-height: 0;
}
#redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-button {
  background-color: #a92cfc;
  color: #ffffff;
  font-weight: bold;
  min-height: 0;
  border-radius: 0 4px 4px 0;
  padding: 11px;
  cursor: pointer;
}
#redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-button:disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
@media screen and (max-width: 1023px) {
  #redeem-points-popup .modal-content .row .redeem-details .form-group-row {
    flex-direction: column;
  }
  #redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-points-input.form-group {
    border-radius: 4px;
  }
  #redeem-points-popup .modal-content .row .redeem-details .form-group-row .redeem-button {
    margin-top: 8px;
    border-radius: 4px;
  }
}

/*********************************
	Program New Syles
*********************************/
/*********************************
	Telerik Bar
*********************************/
.telerik-bar {
  padding: 0 20px;
  background-color: #f6f6f6;
}
.telerik-bar .inner-container {
  padding-top: 14px;
  padding-bottom: 14px;
}
@media screen and (min-width: 1024px) {
  .telerik-bar .inner-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
.telerik-bar .telerik-logo {
  width: auto;
}
@media screen and (max-width: 1024px) {
  .telerik-bar .telerik-logo {
    height: 40px;
    margin: 0 auto 10px;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-bar .telerik-logo {
    height: 36px;
    margin-right: 86px;
  }
}
.telerik-bar p {
  font-weight: 400;
  color: #000;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .telerik-bar p {
    margin: 0 auto;
    font-size: 11px;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .telerik-bar p {
    margin: 0;
    font-size: 14px;
  }
}

/*********************************
	Sgment Hero Intro
*********************************/
.segment-hero-intro {
  width: 100%;
  position: relative;
}
@media screen and (min-device-width: 768px) {
  .program-new .segment-hero-intro, .program-level .segment-hero-intro {
    height: 276px;
  }
  .program-segment .segment-hero-intro {
    height: auto;
  }
}
.segment-hero-intro .segment-hero-content {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  height: 100%;
}
@media screen and (max-device-width: 1024px) {
  .segment-hero-intro .segment-hero-content {
    padding-bottom: 30px;
  }
}
.program-segment .segment-hero-intro .segment-hero-content {
  padding-top: 40px;
}
@media screen and (max-device-width: 767px) {
  .segment-hero-intro .segment-hero-content {
    position: relative;
    z-index: 4;
  }
  .program-new .segment-hero-intro .segment-hero-content, .program-level .segment-hero-intro .segment-hero-content {
    padding-top: 20px;
    padding-bottom: 60px;
  }
  .program-segment .segment-hero-intro .segment-hero-content {
    padding-bottom: 176px;
  }
}
@media screen and (min-device-width: 768px) {
  .segment-hero-intro .segment-hero-content {
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 4;
  }
  .program-new .segment-hero-intro .segment-hero-content, .program-level .segment-hero-intro .segment-hero-content {
    position: absolute;
    top: 0;
    left: 0;
  }
  .program-segment .segment-hero-intro .segment-hero-content {
    padding-bottom: 196px;
    position: relative;
  }
}
.segment-hero-intro .inner-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-device-width: 1024px) {
  .segment-hero-intro .inner-container {
    align-items: flex-start;
  }
}
.segment-hero-intro .segment-title,
.segment-hero-intro .segment-short {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .segment-hero-intro .segment-title,
  .segment-hero-intro .segment-short {
    padding: 0 20px;
    margin: 0 auto;
    text-align: center;
  }
}
@media screen and (min-width: 1025px) {
  .program-new .segment-hero-intro .segment-title,
  .program-new .segment-hero-intro .segment-short {
    max-width: 50%;
  }
  .program-level .segment-hero-intro .segment-title,
  .program-level .segment-hero-intro .segment-short {
    max-width: 80%;
  }
}
.segment-hero-intro .segment-title {
  margin-top: 0;
  font-weight: 700;
  font-size: 31px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .segment-hero-intro .segment-title {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .segment-hero-intro .segment-title {
    text-align: left;
  }
}
.segment-hero-intro .segment-short {
  margin-bottom: 0;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .segment-hero-intro .segment-short {
    font-size: 13px;
  }
}
.segment-hero-intro .segment-bg {
  height: 100%;
}
@media screen and (max-device-width: 768px) {
  .segment-hero-intro .segment-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
}
@media screen and (min-device-width: 768px) {
  .program-new .segment-hero-intro .segment-bg, .program-level .segment-hero-intro .segment-bg {
    position: relative;
  }
  .program-segment .segment-hero-intro .segment-bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
@media screen and (min-device-width: 1024px) {
  .segment-hero-intro .segment-bg {
    height: 100%;
  }
}
.segment-hero-intro .segment-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
@media screen and (max-device-width: 768px) {
  .segment-hero-intro .segment-bg img {
    object-position: left;
  }
}
@media screen and (min-device-width: 768px) {
  .segment-hero-intro .segment-bg img {
    object-position: center;
  }
}
.program-new .segment-hero-intro .segment-bg::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #8441e2, rgba(24, 79, 136, 0.5));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

/*********************************
	Program Content
*********************************/
.program-segment-content {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #fafafa;
}
@media screen and (max-width: 768px) {
  .program-segment-content .inner-container {
    padding-top: 40px;
    padding-bottom: 30px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment-content .inner-container {
    padding-top: 30px;
    padding-bottom: 1px;
  }
  .program-segment .program-segment-content .inner-container {
    padding-top: 40px;
  }
}
.program-segment-content .section-label {
  margin-bottom: 30px;
}
.program-level .program-segment-content .section-label {
  margin-bottom: 0;
}
.program-segment-content .section-sub-label {
  font-weight: 400;
  color: #000;
}
@media screen and (max-width: 768px) {
  .program-segment-content .section-sub-label {
    margin-bottom: 40px;
    font-size: 13px;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .program-segment-content .section-sub-label {
    margin-bottom: 32px;
    font-size: 14px;
  }
}
.program-segment-content .program-container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
@media screen and (min-width: 1024px) {
  .program-level .program-segment-content .program-container {
    margin-bottom: 22px;
    border-bottom: 1px solid #e8e2e7;
  }
}
.program-segment-content .program-container.justify-content-space-between {
  justify-content: space-between;
}

/*********************************
	Program Box
*********************************/
.program-box {
  width: 100%;
  margin: 0 10px 40px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.24s ease-in-out;
  position: relative;
}
@media screen and (min-width: 768px) {
  .program-box {
    width: calc(50% - 20px);
  }
}
@media screen and (min-width: 1024px) {
  .program-new .program-box {
    max-width: 580px;
    width: calc(33.33% - 20px);
    margin: 0 10px 54px;
  }
  .program-level .program-box {
    width: 23%;
    margin: 0 0 40px;
  }
}
@media screen and (min-width: 1025px) {
  .program-level .program-box {
    max-width: 260px;
    margin: 0 0 40px;
  }
}
@media screen and (min-width: 1200px) {
  .program-box:hover {
    box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.24s ease-in-out;
  }
  .program-box:hover .header-section img {
    transform: scale(1.1);
    transition: transform 0.24s ease-in-out;
  }
}
.program-box .header-section {
  display: block;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .program-level .program-box .header-section {
    height: 162px;
  }
  .program-box .header-section img {
    transition: transform 0.24s ease-in-out;
  }
}
.program-box .segment-img {
  height: 100%;
  position: relative;
  z-index: 1;
}
.program-box .segment-img::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.program-box .segment-img img {
  width: 100%;
  height: 100%;
  display: block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  object-fit: cover;
  object-position: center;
}
.program-box .segment-type {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
.program-box .segment-type .type-label {
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}
.program-new .program-box .segment-type .type-label {
  font-size: 48px;
}
.program-level .program-box .segment-type .type-label {
  font-size: 38px;
}
.program-box .segment-type .years {
  font-weight: 400;
  font-size: 24px;
  color: #fff;
  line-height: 1.1;
}
.program-box.coming-soon .segment-type {
  opacity: 0.5;
}
.program-box.coming-soon .body-section p {
  text-align: left;
}
.program-box.coming-soon .body-section .btn, .program-box.coming-soon .body-section .btn-6, .program-box.coming-soon .body-section .btn-7 {
  pointer-events: none;
}
.program-box .body-section {
  padding-top: 24px;
  padding-right: 20px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  .program-box .body-section {
    padding-bottom: 22px;
  }
}
@media screen and (min-width: 768px) {
  .program-box .body-section {
    padding-bottom: 18px;
    display: flex;
    flex-direction: column;
  }
  .program-new .program-box .body-section {
    min-height: 130px;
  }
  .program-level .program-box .body-section {
    min-height: 130px;
  }
}
@media screen and (min-width: 1024px) {
  .program-level .program-box .body-section {
    min-height: 164px;
  }
}
@media screen and (min-width: 1200px) {
  .program-level .program-box .body-section {
    min-height: initial;
  }
}
.program-box .body-section p {
  margin-bottom: 0;
  font-weight: 500;
  color: #000;
  text-align: center;
}
.program-new .program-box .body-section p {
  margin-bottom: 15px;
}
.program-level .program-box .body-section p {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .program-box .body-section p {
    font-size: 13px;
    line-height: 1.6;
  }
}
@media screen and (min-width: 768px) {
  .program-box .body-section p {
    font-size: 14px;
    line-height: 1.5;
  }
}
@media screen and (min-width: 1025px) {
  .program-level .program-box .body-section p {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  .program-box .body-section .links {
    margin-top: auto;
  }
  .program-new .program-box .body-section .links {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.program-box .body-section .links .btn, .program-box .body-section .links .btn-6, .program-box .body-section .links .btn-7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.program-level .program-box .body-section .links .btn, .program-level .program-box .body-section .links .btn-6, .program-level .program-box .body-section .links .btn-7 {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .program-box .body-section .links .btn, .program-box .body-section .links .btn-6, .program-box .body-section .links .btn-7 {
    width: 100%;
  }
  .program-box .body-section .links .btn:not(:last-child):not(:only-child), .program-box .body-section .links .btn-6:not(:last-child):not(:only-child), .program-box .body-section .links .btn-7:not(:last-child):not(:only-child) {
    margin-bottom: 22px;
  }
}
@media screen and (min-width: 768px) {
  .program-box .body-section .links .btn, .program-box .body-section .links .btn-6, .program-box .body-section .links .btn-7 {
    padding: 0 4px;
    min-width: initial;
    height: 38px;
    font-size: 13px;
  }
  .program-new .program-box .body-section .links .btn, .program-new .program-box .body-section .links .btn-6, .program-new .program-box .body-section .links .btn-7 {
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 1025px) {
  .program-new .program-box .body-section .links .btn, .program-new .program-box .body-section .links .btn-6, .program-new .program-box .body-section .links .btn-7 {
    width: calc(50% - 20px);
  }
  .program-level .program-box .body-section .links .btn, .program-level .program-box .body-section .links .btn-6, .program-level .program-box .body-section .links .btn-7 {
    padding: 0;
    height: 100%;
    border: none;
    font-size: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
  }
  .program-level .program-box .body-section .links .btn:hover, .program-level .program-box .body-section .links .btn-6:hover, .program-level .program-box .body-section .links .btn-7:hover {
    background-color: transparent;
  }
}

.coming-soon {
  user-select: none;
  pointer-events: none;
  cursor: default;
}
.coming-soon .header-section,
.coming-soon .body-section,
.coming-soon .partners-logo {
  opacity: 0.35;
}

@media screen and (max-width: 1024px) {
  .arrow {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .arrow {
    width: 0;
    height: 16px;
    margin-top: 74px;
    display: block;
    pointer-events: none;
    user-select: none;
    position: relative;
  }
  .arrow::before, .arrow::after {
    content: "";
    width: 2px;
    height: 16px;
    background-color: #9013fe;
    position: absolute;
    left: -6px;
  }
  .arrow::before {
    transform: rotate(45deg);
    transform-origin: 100% 100%;
    bottom: -3px;
  }
  .arrow::after {
    transform: rotate(-45deg);
    transform-origin: 0 0;
    top: -3px;
  }
}

.tag {
  padding: 6px 10px;
  background-color: #fff;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  line-height: 1;
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 6;
}
@media screen and (max-width: 1023px) {
  .program-item .tag {
    left: 20px;
  }
}

.level-1 .segment-bg::after {
  background-color: #ffac24;
}
.level-1 .segment-img::after {
  background-color: rgba(255, 172, 36, 0.7);
}

.level-2 .segment-bg::after {
  background-color: #00d589;
}
.level-2 .segment-img::after {
  background-color: rgba(0, 213, 137, 0.7);
}

.level-3 .segment-bg::after {
  background-color: #00c0d6;
}
.level-3 .segment-img::after {
  background-color: rgba(0, 192, 214, 0.7);
}

.level-4 .segment-bg::after {
  background-color: #a92cfc;
}
.level-4 .segment-img::after {
  background-color: rgba(169, 44, 252, 0.7);
}

.level-5 .segment-bg::after {
  background-color: #162ccb;
}
.level-5 .segment-img::after {
  background-color: rgba(22, 44, 203, 0.7);
}

.level-6 .segment-bg::after {
  background-color: #005418;
}
.level-6 .segment-img::after {
  background-color: rgba(0, 84, 24, 0.7);
}

.segment-bg::after {
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.9;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

/*************************************************************************
	Program Level styles
*************************************************************************/
.program-level .program-container::before, .program-level .program-container::after {
  content: "";
  height: 1px;
  margin: 0;
  display: block;
}
@media screen and (min-width: 1024px) {
  .program-level .program-container::before, .program-level .program-container::after {
    width: 23%;
  }
}
@media screen and (min-width: 1025px) {
  .program-level .program-container::before, .program-level .program-container::after {
    max-width: 260px;
  }
}
.program-level .program-container::before {
  order: 2;
}
.program-level .program-container::after {
  order: 3;
}
.program-level .partners-logo {
  padding-bottom: 15px;
}
.program-level .partners-logo img {
  margin: 0 auto;
}
.program-level .programs-more {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .program-level .programs-more {
    padding-bottom: 50px;
    margin: 0 -20px;
  }
}
@media screen and (min-width: 1200px) {
  .program-level .programs-more {
    padding-right: 300px;
  }
  .program-level .programs-more::after {
    content: "";
    max-width: 260px;
    width: 100%;
    height: 10px;
    display: block;
  }
}
.program-level .program-item {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .program-level .program-item {
    padding: 0 20px;
  }
}
@media screen and (min-width: 768px) {
  .program-level .program-item {
    width: calc(50% - 20px);
  }
}
@media screen and (min-width: 1024px) {
  .program-level .program-item {
    width: 23%;
    margin: 0 0 40px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
  }
}
@media screen and (min-width: 1200px) {
  .program-level .program-item {
    max-width: 260px;
    width: 100%;
  }
  .program-level .program-item:hover {
    box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.24s ease-in-out;
  }
  .program-level .program-item:hover .header-section img {
    transition: transform 0.24s ease-in-out;
    transform: scale(1.1);
  }
}
@media screen and (max-width: 1024px) {
  .program-level .program-item .btn, .program-level .program-item .btn-6, .program-level .program-item .btn-7 {
    width: calc(100% - 28px);
    margin: 0 14px 20px;
  }
}
@media screen and (min-device-width: 1200px) {
  .program-level .program-item .btn, .program-level .program-item .btn-6, .program-level .program-item .btn-7 {
    display: none;
  }
}
.program-level .program-item .program-box {
  margin: 0;
  width: 100%;
  display: block;
  position: initial;
}
@media screen and (max-width: 1023px) {
  .program-level .program-item .program-box {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .program-level .program-item .program-box {
    height: 100%;
    align-self: stretch;
    box-shadow: none;
  }
  .program-level .program-item .program-box::after {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
}
.program-level .program-item .header-section {
  width: 100%;
  height: 74px;
  display: block;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.program-level .program-item .header-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.program-level .program-item .header-section::after {
  display: none;
}
.program-level .program-item .body-section {
  padding: 20px 14px;
  height: calc(100% - 74px - 48px - 20px);
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  .program-level .program-item .body-section {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
.program-level .program-item .body-section p {
  margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
  .program-level .program-item .partners-logo {
    padding-bottom: 15px;
  }
}
.program-level .program-item .partners-logo img {
  margin: 0 auto;
}

/*************************************************************************
	Program Segment styles
*************************************************************************/
@media screen and (max-width: 768px) {
  .program-segment {
    background-color: #fafafa;
  }
}
.program-segment .links {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .program-segment .links {
    padding: 0 23px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .links {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 1024px) {
  .program-segment .links {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .program-segment .links .btn, .program-segment .links .btn-6, .program-segment .links .btn-7 {
    width: 100%;
  }
  .program-segment .links .btn:not(:last-child), .program-segment .links .btn-6:not(:last-child), .program-segment .links .btn-7:not(:last-child) {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .links .btn:not(:last-child), .program-segment .links .btn-6:not(:last-child), .program-segment .links .btn-7:not(:last-child) {
    margin-right: 38px;
  }
}
.program-segment .program-segment-top-content {
  padding-left: 20px;
  padding-right: 20px;
}
.program-segment .program-container {
  margin-top: -150px;
  position: relative;
  z-index: 4;
}
@media screen and (min-width: 768px) {
  .program-segment .program-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.program-segment .program-container::before, .program-segment .program-container::after {
  content: "";
  height: 1px;
  margin: 0;
  display: block;
}
@media screen and (min-width: 1024px) {
  .program-segment .program-container::before, .program-segment .program-container::after {
    width: 23%;
  }
}
@media screen and (min-width: 1025px) {
  .program-segment .program-container::before, .program-segment .program-container::after {
    max-width: 260px;
  }
}
.program-segment .program-container::before {
  order: 2;
}
.program-segment .program-container::after {
  order: 3;
}
.program-segment .program-box {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .program-segment .program-box {
    margin: 0 0 24px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .program-box {
    max-width: calc(50% - 20px);
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .program-segment .program-box {
    max-width: 23%;
    margin: 0 0 40px;
  }
}
@media screen and (min-width: 1200px) {
  .program-segment .program-box {
    max-width: 260px;
  }
}
.program-segment .program-box .header-section {
  padding-top: 20px;
}
@media screen and (min-width: 768px) {
  .program-segment .program-box .header-section {
    height: 148px;
    overflow: hidden;
  }
}
.program-segment .program-box .header-section-title {
  margin: 0 auto 10px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
}
.program-segment .program-box .header-section-content img {
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 767px) {
  .program-segment .program-box .header-section-content img {
    max-height: 90px;
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .program-box .header-section-content img {
    max-height: 74px;
  }
}
.program-segment .program-box .header-section-content .bonus {
  padding-top: 10px;
  font-weight: 500;
  font-size: 24px;
  color: #9013fe;
  text-align: center;
}
.program-segment .program-box .header-section-content .bonus span {
  display: block;
  margin-bottom: 4px;
  font-size: 48px;
}
.program-segment .program-box .header-section-content .tools {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.program-segment .program-box .header-section-content .tools img {
  margin-bottom: 14px;
  display: block;
}
@media screen and (max-width: 767px) {
  .program-segment .program-box .header-section-content .tools img {
    max-width: 124px;
    max-height: 34px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .program-box .header-section-content .tools img {
    max-width: 96px;
    max-height: 28px;
  }
}
.program-segment .program-box .header-section-content .telerik {
  padding-top: 16px;
}
.program-segment .program-box .body-section {
  padding: 12px 0;
  border-top: 1px solid #e8e2e7;
}
@media screen and (min-width: 768px) {
  .program-segment .program-box .body-section {
    height: 104px;
  }
}
.program-segment .program-box .body-section p {
  font-weight: 400;
  font-size: 13px;
  color: #000;
  line-height: 1.6;
}
.program-segment .segment-info {
  position: relative;
  z-index: 6;
}
@media screen and (max-width: 768px) {
  .program-segment .segment-info {
    padding: 30px 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .segment-info {
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e8e2e7;
  }
}
@media screen and (min-width: 1024px) {
  .program-segment .segment-info {
    padding: 14px 0;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .program-segment .segment-info .segment-box {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 769px) {
  .program-segment .segment-info .segment-box {
    margin-right: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
}
.program-segment .segment-info .segment-icon {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .program-segment .segment-info .segment-icon {
    width: 42px;
    height: 42px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .segment-info .segment-icon {
    width: 20px;
    height: 20px;
    margin-right: 20px;
  }
}
.program-segment .segment-info .segment-icon img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 767px) {
  .program-segment .segment-info .btn, .program-segment .segment-info .btn-6, .program-segment .segment-info .btn-7 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .program-segment .segment-info .btn, .program-segment .segment-info .btn-6, .program-segment .segment-info .btn-7 {
    margin-left: auto;
  }
}
.program-segment .segment-info p {
  font-weight: 400;
  font-size: 13px;
  color: #000;
}
@media screen and (min-width: 768px) {
  .program-segment .segment-info p {
    margin-bottom: 0em;
  }
}
.program-segment .module-box {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 25px 53px 0 rgba(0, 0, 0, 0.07);
}
@media screen and (max-width: 768px) {
  .program-segment .module-box {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .module-box {
    margin-bottom: 40px;
  }
}
.program-segment .module-box .module-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #9013fe;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .program-segment .module-box .module-header {
    padding: 8px 20px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .module-box .module-header {
    padding: 12px 54px 10px;
  }
}
.program-segment .module-box .module-points {
  margin: auto 0px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.program-segment .module-box .module-points::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  background-image: url("/img/svg/workshop/icon-star.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.program-segment .module-box .module-points span {
  padding-top: 5px;
}
@media screen and (max-width: 768px) {
  .program-segment .module-box .module-content {
    padding: 30px 20px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .module-box .module-content {
    padding: 24px 54px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }
}
@media screen and (max-width: 767px) {
  .program-segment .module-box .module-content > div {
    width: 100%;
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .module-box .module-content > div {
    width: 50%;
    align-self: stretch;
  }
}
@media screen and (max-width: 767px) {
  .program-segment .module-box .module-content .module-ifno {
    padding-bottom: 30px;
    border-bottom: 1px solid #e8e2e7;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .module-box .module-content .module-ifno {
    padding-right: 24px;
    border-right: 1px solid #e8e2e7;
  }
}
@media screen and (max-width: 767px) {
  .program-segment .module-box .module-content .module-thmes {
    padding-top: 30px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .module-box .module-content .module-thmes {
    padding-left: 54px;
  }
}
.program-segment .module-box .module-content .module-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 18px;
  color: #000;
  line-height: 1.3;
}
.program-segment .module-box .module-content p {
  font-weight: 400;
  font-size: 13px;
  color: #000;
  line-height: 1.4;
}
.program-segment .module-box .module-content ol {
  list-style: decimal;
  list-style-position: inside;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .program-segment .module-box .module-content ol li {
    margin-bottom: 20px;
  }
}
.program-segment .banner-mh {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #9013fe;
}
.program-segment .banner-mh .inner-container {
  padding: 34px 0;
  color: #fff;
  text-align: center;
}
.program-segment .banner-mh h2 {
  margin-top: 0;
  line-height: 1.4;
  font-weight: 600;
  font-size: 31px;
}
@media screen and (max-width: 767px) {
  .program-segment .banner-mh h2 {
    margin-bottom: 22px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .banner-mh h2 {
    margin-bottom: 10px;
  }
}
.program-segment .banner-mh p {
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .program-segment .banner-mh p {
    padding: 0 10px;
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 768px) {
  .program-segment .banner-mh p {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  .program-segment .banner-mh .btn, .program-segment .banner-mh .btn-6, .program-segment .banner-mh .btn-7 {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}

/*************************************************************************
	HOme Page styles
*************************************************************************/
.half-content {
  display: block;
}
@media screen and (min-width: 1024px) {
  .half-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.half-content .half-box {
  position: relative;
  z-index: 4;
}
@media screen and (max-width: 1024px) {
  .half-content .half-box {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .half-content .half-box {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .item-1 .half-content .half-box, .home-hero-intro .half-content .half-box {
    order: 1;
  }
}
@media screen and (min-width: 1200px) {
  .item-1 .half-content .half-box, .home-hero-intro .half-content .half-box {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  .item-1 .half-content .half-box.hero-img-holder, .home-hero-intro .half-content .half-box.hero-img-holder {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .item-1 .half-content .half-box.hero-img-holder, .home-hero-intro .half-content .half-box.hero-img-holder {
    order: 2;
  }
}
@media screen and (min-width: 1200px) {
  .item-1 .half-content .half-box.hero-img-holder, .home-hero-intro .half-content .half-box.hero-img-holder {
    width: 60%;
  }
}
@media screen and (min-width: 414px) {
  .half-content.half-exchange .half-box:first-child {
    order: 2;
  }
}

.page-home > div:not(.summer-camp-intro) {
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .page-home .inner-container {
    max-width: 967px;
  }
}
.page-home .segment-title,
.page-home .section-label {
  font-weight: 600;
  color: #333333;
  line-height: 1.5;
}
@media screen and (max-width: 1024px) {
  .page-home .segment-title,
  .page-home .section-label {
    margin: 0 0 16px 0;
    font-size: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .page-home .segment-title,
  .page-home .section-label {
    margin: 0 0 30px 0;
    font-size: 26px;
  }
}
@media screen and (min-width: 1200px) {
  .page-home .segment-title,
  .page-home .section-label {
    font-size: 32px;
  }
}
.page-home .second-title {
  margin: 0 0 20px;
  font-weight: 500;
  color: #333333;
  line-height: 1.6;
}
@media screen and (max-width: 1024px) {
  .page-home .second-title {
    font-size: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .page-home .second-title {
    font-size: 22px;
  }
}
.page-home .segment-short,
.page-home .section-sub-label {
  margin: 0 0 30px 0;
  font-weight: 400;
  font-size: 16px;
  color: rgba(21, 20, 57, 0.4);
  line-height: 1.8;
}
@media screen and (max-width: 1023px) {
  .page-home .links {
    text-align: center;
  }
}
@media screen and (min-width: 415px) and (max-width: 1023px) {
  .page-home .links .btn, .page-home .links .btn-6, .page-home .links .btn-7 {
    padding: 0 10px;
    height: 40px;
    margin: 0 10px;
    line-height: 40px;
  }
}
@media screen and (max-width: 414px) {
  .page-home .links .btn, .page-home .links .btn-6, .page-home .links .btn-7 {
    margin: 0 auto 20px;
    display: block;
  }
}
@media screen and (min-width: 1023px) {
  .page-home .links .btn, .page-home .links .btn-6, .page-home .links .btn-7 {
    margin-right: 22px;
  }
}
.page-home .program-segment-content {
  margin-bottom: 24px;
  background-color: transparent;
}
@media screen and (max-width: 1024px) {
  .page-home .program-segment-content .section-sub-label {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .page-home .program-segment-content .section-sub-label {
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 413px) {
  .page-home .program-segment-content .program-box {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: 0;
  }
}
@media screen and (min-width: 414px) {
  .page-home .program-segment-content .program-box {
    width: calc(50% - 20px);
    margin-right: 10px;
    margin-bottom: 24px;
    margin-left: 10px;
  }
}
@media screen and (min-width: 1023px) {
  .page-home .program-segment-content .program-box {
    width: calc(33.3% - 20px);
    margin: 0 10px 40px;
  }
}
.page-home .program-segment-content .header-section {
  height: 178px;
}
.page-home .program-segment-content .type-label {
  font-size: 48px;
}
.page-home .program-segment-content .years {
  font-size: 16px;
}
.page-home .program-segment-content .body-section {
  padding-top: 15px;
  padding-bottom: 15px;
}
.page-home .program-segment-content .body-section p {
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  line-height: 1.6;
}

.center-contetn .segment-title,
.center-contetn .section-label,
.center-contetn .section-sub-label {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media screen and (max-width: 414px) {
  .center-contetn .segment-title,
  .center-contetn .section-label {
    max-width: 90%;
  }
}
@media screen and (min-width: 414px) {
  .center-contetn .segment-title,
  .center-contetn .section-label {
    max-width: 60%;
  }
}
@media screen and (min-width: 1024px) {
  .center-contetn .section-sub-label {
    max-width: 70%;
  }
}

.home-hero-intro {
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .home-hero-intro {
    padding-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .home-hero-intro {
    padding-top: 70px;
    padding-bottom: 120px;
  }
}
.home-hero-intro .inner-container {
  max-width: 1200px;
  position: relative;
}
.home-hero-intro .inner-container::before {
  content: "";
  width: 100%;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  background-image: url("/img/home/svg-spots-illustrations/herospot.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .home-hero-intro .inner-container::before {
    height: 54%;
  }
}
@media screen and (min-width: 768px) {
  .home-hero-intro .inner-container::before {
    max-width: 474px;
    height: 100%;
    top: 10%;
    right: 0;
  }
}
.home-hero-intro .segment-title {
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .home-hero-intro .segment-title {
    font-size: 24px;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .home-hero-intro .segment-title {
    max-width: 70%;
  }
}
@media screen and (min-width: 1024px) {
  .home-hero-intro .segment-title {
    font-size: 36px;
  }
}
@media screen and (max-width: 768px) {
  .home-hero-intro .segment-short {
    margin-bottom: 40px;
    font-size: 14px;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .home-hero-intro .segment-short {
    margin: 0 0 30px;
  }
}
@media screen and (min-width: 1024px) {
  .home-hero-intro .segment-short {
    max-width: 80%;
    font-size: 16px;
    text-align: left;
  }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .home-hero-intro .links {
    text-align: left;
  }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .home-hero-intro .links .btn, .home-hero-intro .links .btn-6, .home-hero-intro .links .btn-7 {
    margin-left: 0px;
  }
}
@media screen and (max-width: 767px) {
  .home-hero-intro .hero-img-holder img {
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .home-hero-intro .hero-img-holder img {
    max-width: 84%;
    width: 100%;
    margin-left: auto;
  }
}

.hero-slider {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 14px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .hero-slider {
    /* max-height: 960px;
    min-height: 960px; */
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 769px) {
  .hero-slider {
    margin-bottom: 120px;
  }
}
@media screen and (min-width: 769px) {
  .hero-slider .mobile {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .hero-slider .desktop {
    display: none !important;
  }
}
.hero-slider .slick-arrow {
  width: 50px;
  height: 50px;
  display: block;
  transform-origin: 50% 50%;
  z-index: 8;
}
.hero-slider .slick-arrow::before {
  padding: 10px;
}
.hero-slider .slick-arrow.slick-prev {
  left: 2%;
}
.hero-slider .slick-arrow.slick-prev::before {
  margin-left: 10px;
}
.hero-slider .slick-arrow.slick-next {
  left: calc(98% - 50px);
}
.hero-slider .slick-arrow.slick-next::before {
  margin-right: 10px;
}
.hero-slider .slick-dots {
  bottom: 0;
}
.hero-slider .hero-item {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .hero-slider .hero-item {
    max-height: 960px;
    min-height: 850px;
  }
}
@media screen and (min-width: 769px) {
  .hero-slider .hero-item {
    min-height: 490px;
  }
}
@media screen and (min-width: 1200px) {
  .hero-slider .hero-item {
    height: auto;
  }
}
.hero-slider .hero-item .inner-container {
  max-width: 1200px;
  position: relative;
}
@media screen and (max-width: 1250px) {
  .hero-slider .hero-item .inner-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.hero-slider .hero-item .segment-title {
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .hero-slider .hero-item .segment-title {
    font-size: 24px;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hero-slider .hero-item .segment-title {
    max-width: 70%;
  }
}
@media screen and (min-width: 1024px) {
  .hero-slider .hero-item .segment-title {
    font-size: 36px;
  }
}
@media screen and (max-width: 768px) {
  .hero-slider .hero-item .segment-short {
    margin-bottom: 40px;
    font-size: 14px;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hero-slider .hero-item .segment-short {
    margin: 0 0 30px;
  }
}
@media screen and (min-width: 1024px) {
  .hero-slider .hero-item .segment-short {
    max-width: 80%;
    font-size: 16px;
    text-align: left;
  }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .hero-slider .hero-item .links {
    text-align: left;
  }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .hero-slider .hero-item .links .btn, .hero-slider .hero-item .links .btn-6, .hero-slider .hero-item .links .btn-7 {
    margin-left: 0px;
  }
}
.hero-slider .item-1 {
  height: 100%;
  align-items: center;
}
.hero-slider .item-1 .inner-container {
  height: 100%;
}
.hero-slider .item-1 .inner-container::before {
  content: "";
  width: 100%;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  background-image: url("/img/home/svg-spots-illustrations/herospot.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .hero-slider .item-1 .inner-container::before {
    height: 54%;
  }
}
@media screen and (min-width: 768px) {
  .hero-slider .item-1 .inner-container::before {
    max-width: 474px;
    height: 100%;
    top: 10%;
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  .hero-slider .item-1 .hero-img-holder img {
    margin: 0 auto 90px;
  }
}
@media screen and (min-width: 1024px) {
  .hero-slider .item-1 .hero-img-holder img {
    max-width: 84%;
    width: 100%;
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  .hero-slider .item-2 {
    background-color: #963cec;
  }
}
.hero-slider .item-2 img {
  max-width: initial;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .hero-slider .item-2 img {
    height: 100%;
    object-position: right;
  }
}
.hero-slider .item-2 .inner-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .hero-slider .item-2 .inner-container {
    padding-bottom: 30px;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 769px) {
  .hero-slider .item-2 .inner-container {
    align-items: flex-start;
    justify-content: center;
  }
}
@media screen and (min-width: 1200px) {
  .hero-slider .item-2 .inner-container {
    padding-left: 3%;
  }
}
.hero-slider .item-2 .segment-title,
.hero-slider .item-2 .segment-short {
  color: #fff;
}
@media screen and (min-width: 778px) {
  .hero-slider .item-2 .segment-title,
  .hero-slider .item-2 .segment-short {
    max-width: 42%;
  }
}

@media screen and (max-width: 414px) {
  .home-learn-with-mh {
    padding-bottom: 40px;
  }
}
@media screen and (min-width: 414px) {
  .home-learn-with-mh {
    padding-bottom: 60px;
  }
}
@media screen and (min-width: 1024px) {
  .home-learn-with-mh {
    padding-bottom: 116px;
  }
}
@media screen and (max-width: 768px) {
  .home-learn-with-mh .section-label {
    text-align: left;
  }
}
@media screen and (min-width: 768px) {
  .home-learn-with-mh .section-label {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .home-learn-with-mh .section-sub-label {
    text-align: left;
  }
}
@media screen and (min-width: 768px) {
  .home-learn-with-mh .section-sub-label {
    text-align: center;
  }
}
@media screen and (max-width: 1024px) {
  .home-learn-with-mh .section-sub-label {
    margin: 0 auto 20px;
  }
}
@media screen and (min-width: 1024px) {
  .home-learn-with-mh .section-sub-label {
    max-width: 70%;
    margin: 0 auto 80px;
  }
}

@media screen and (max-width: 767px) {
  .learn-gallery {
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
  .learn-gallery .slick-dots {
    bottom: 0;
  }
}
@media screen and (max-width: 414px) {
  .learn-gallery {
    margin: 0 -20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }
}
@media screen and (min-width: 767px) {
  .learn-gallery {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1024px) {
  .learn-gallery {
    display: grid;
    grid-auto-rows: 306px;
    grid-gap: 24px;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .learn-gallery .learn-item {
    padding: 0 10px;
    width: 100%;
    margin: 0 0 24px;
  }
}
@media screen and (max-width: 414px) {
  .learn-gallery .learn-item {
    padding: 0 20px;
  }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .learn-gallery .learn-item {
    width: calc(50% - 10px);
    margin: 0 0 20px;
  }
}
@media screen and (min-width: 1024px) {
  .learn-gallery .learn-item {
    max-width: 306px;
  }
  .learn-gallery .learn-item:nth-child(1) {
    grid-row: 1/2;
    grid-column: 1;
  }
  .learn-gallery .learn-item:nth-child(2) {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
  }
  .learn-gallery .learn-item:nth-child(3) {
    grid-row: 1/2;
    grid-column: 2;
  }
  .learn-gallery .learn-item:nth-child(4) {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
  }
  .learn-gallery .learn-item:nth-child(5) {
    grid-row: 1;
    grid-column: 3;
  }
  .learn-gallery .learn-item:nth-child(6) {
    grid-row: 2;
    grid-column: 3;
  }
}
.learn-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
}
.learn-gallery img:first-child {
  margin-bottom: 24px;
}

.summer-camp-intro {
  background-color: #f6f3fe;
}
@media screen and (max-width: 414px) {
  .summer-camp-intro {
    padding-bottom: 70px;
  }
}
@media screen and (min-width: 414px) {
  .summer-camp-intro {
    padding: 54px 0;
  }
}
.summer-camp-intro .sumemr-item {
  display: flex !important;
}
.summer-camp-intro .slick-arrow {
  width: 50px;
  height: 50px;
  display: block;
  transform-origin: 50% 50%;
  z-index: 8;
}
.summer-camp-intro .slick-arrow::before {
  padding: 10px;
}
.summer-camp-intro .slick-arrow.slick-prev {
  left: 2%;
}
.summer-camp-intro .slick-arrow.slick-prev::before {
  margin-left: 10px;
}
.summer-camp-intro .slick-arrow.slick-next {
  left: calc(98% - 50px);
}
.summer-camp-intro .slick-arrow.slick-next::before {
  margin-right: 10px;
}
@media screen and (max-width: 1024px) {
  .summer-camp-intro .half-content .half-box:last-child {
    margin-top: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .summer-camp-intro .half-content .half-box:last-child .section-label,
  .summer-camp-intro .half-content .half-box:last-child .section-sub-label,
  .summer-camp-intro .half-content .half-box:last-child .links {
    padding-left: 54px;
  }
}
@media screen and (max-width: 768px) {
  .summer-camp-intro .section-label,
  .summer-camp-intro .section-sub-label {
    padding: 0 20px;
    margin: 0 auto 20px;
  }
}
@media screen and (min-width: 1024px) {
  .summer-camp-intro .section-label {
    padding-top: 0px;
  }
}
.summer-camp-intro img {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 414px) {
  .summer-camp-intro img {
    width: 100%;
    max-height: 240px;
  }
}
@media screen and (min-width: 414px) {
  .summer-camp-intro img {
    width: 80%;
    max-height: 260px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .summer-camp-intro img {
    width: 100%;
    max-height: 418px;
  }
}
.summer-camp-intro img:first-child {
  max-height: initial;
  height: auto;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  z-index: 1;
}
@media screen and (max-width: 414px) {
  .summer-camp-intro img:first-child {
    width: 100%;
    height: 240%;
    object-fit: cover;
    object-position: bottom;
    top: 20%;
  }
}
@media screen and (min-width: 414px) {
  .summer-camp-intro img:first-child {
    width: 95%;
    max-height: 290px;
    margin: 0 auto;
    top: 60%;
  }
}
@media screen and (min-width: 1024px) {
  .summer-camp-intro img:first-child {
    max-width: 476px;
    width: 100%;
    max-height: initial;
    top: 50%;
  }
}
@media screen and (max-width: 1024px) {
  .summer-camp-intro .slick-dots {
    bottom: -32px;
  }
}
@media screen and (min-width: 1024px) {
  .summer-camp-intro .slick-dots {
    bottom: -12px;
  }
}
@media screen and (max-width: 414px) {
  .summer-camp-intro .links {
    padding: 0 20px;
  }
}
@media screen and (min-width: 1024px) {
  .summer-camp-intro .links {
    margin-bottom: 60px;
  }
}

.telerik-intro {
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .telerik-intro {
    padding: 40px 0 30px 0;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro {
    padding: 100px 0 90px 0;
  }
}
.telerik-intro .logos {
  margin-bottom: 18px;
  padding-left: 54px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 414px) {
  .telerik-intro .logos {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1024px) {
  .telerik-intro .logos {
    justify-content: center;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro .logos {
    justify-content: flex-start;
  }
}
.telerik-intro .logos img {
  max-height: 72px;
  margin: 0;
  width: auto;
}
.telerik-intro .logos img[alt*=MindHub] {
  max-height: 28px;
  margin-right: 20px;
  position: unset;
  transform: unset;
  width: auto;
  margin-left: 0;
}
.telerik-intro .eaf-diploma-wrapper img {
  max-height: unset !important;
  max-width: 90% !important;
  position: unset !important;
  left: unset !important;
  transform: unset !important;
}
@media screen and (max-width: 1024px) {
  .telerik-intro .half-box:first-child {
    margin-bottom: 40px;
  }
}
.telerik-intro .half-box-img {
  position: relative;
}
.telerik-intro .half-box-img::before {
  content: "";
  max-width: 502px;
  width: 100%;
  opacity: 0.6;
  background-image: url("/img/home/svg-spots-illustrations/testemonialspot.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .telerik-intro .half-box-img::before {
    height: 100vw;
    transform: translateX(-50%);
    left: 50%;
    top: -24%;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro .half-box-img::before {
    height: 536px;
    transform: translateY(-50%);
    top: 34%;
    right: -10%;
  }
}
.telerik-intro .half-box-img img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .telerik-intro .half-box-img img {
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro .half-box-img img {
    margin-top: -94px;
    margin-left: 54px;
  }
}
.telerik-intro .section-label,
.telerik-intro .section-sub-label {
  padding-top: 0;
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .telerik-intro .section-label,
  .telerik-intro .section-sub-label {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 1023px) {
  .telerik-intro .section-label,
  .telerik-intro .section-sub-label {
    max-width: 90%;
    text-align: left;
  }
}
@media screen and (max-width: 414px) {
  .telerik-intro .section-sub-label {
    margin-bottom: 30px;
  }
}

.telerik-intro {
  background-color: #fff;
}
@media screen and (max-width: 414px) {
  .telerik-intro {
    padding-bottom: 70px;
  }
}
@media screen and (min-width: 414px) {
  .telerik-intro {
    padding: 54px 0;
  }
}
.telerik-intro .sumemr-item {
  display: flex !important;
}
.telerik-intro .slick-arrow {
  width: 50px;
  height: 50px;
  display: block;
  transform-origin: 50% 50%;
  z-index: 8;
}
.telerik-intro .slick-arrow::before {
  padding: 10px;
}
.telerik-intro .slick-arrow.slick-prev {
  left: 2%;
}
.telerik-intro .slick-arrow.slick-prev::before {
  margin-left: 10px;
}
.telerik-intro .slick-arrow.slick-next {
  left: calc(98% - 50px);
}
.telerik-intro .slick-arrow.slick-next::before {
  margin-right: 10px;
}
@media screen and (max-width: 1024px) {
  .telerik-intro .half-content .half-box:last-child {
    margin-top: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro .half-content .half-box:last-child .section-label,
  .telerik-intro .half-content .half-box:last-child .section-sub-label,
  .telerik-intro .half-content .half-box:last-child .links {
    padding-left: 54px;
  }
}
@media screen and (max-width: 768px) {
  .telerik-intro .section-label,
  .telerik-intro .section-sub-label {
    padding: 0 20px;
    margin: 0 auto 20px;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro .section-label {
    padding-top: 0px;
  }
}
.telerik-intro img {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 414px) {
  .telerik-intro img {
    width: 100%;
    max-height: 240px;
  }
}
@media screen and (min-width: 414px) {
  .telerik-intro img {
    width: 80%;
    max-height: 260px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro img {
    width: 100%;
    max-height: 418px;
  }
}
.telerik-intro img:first-child {
  max-height: initial;
  height: auto;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  z-index: 1;
}
@media screen and (max-width: 414px) {
  .telerik-intro img:first-child {
    width: 100%;
    height: 240%;
    object-fit: cover;
    object-position: bottom;
    top: 20%;
  }
}
@media screen and (min-width: 414px) {
  .telerik-intro img:first-child {
    width: 95%;
    max-height: 290px;
    margin: 0 auto;
    top: 60%;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro img:first-child {
    max-width: 476px;
    width: 100%;
    max-height: initial;
    top: 50%;
  }
}
@media screen and (max-width: 1024px) {
  .telerik-intro .slick-dots {
    bottom: -32px;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro .slick-dots {
    bottom: -12px;
  }
}
@media screen and (max-width: 414px) {
  .telerik-intro .links {
    padding: 0 20px;
  }
}
@media screen and (min-width: 1024px) {
  .telerik-intro .links {
    margin-bottom: 60px;
  }
}

.mindhub-methods {
  background-color: #f6f3fe;
}
@media screen and (max-width: 413px) {
  .mindhub-methods {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media screen and (min-width: 413px) {
  .mindhub-methods {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1024px) {
  .mindhub-methods .section-sub-label {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .mindhub-methods .section-sub-label {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .mindhub-methods .mehtod-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.mindhub-methods .method-box {
  /* .section-sub-label {
  	@media screen and ( max-width: $tablet - 1px ) {
  		max-width: 80%;
  		margin: 0 auto;
  	}

  	@media screen and ( min-width: $tablet - 1px ) {
  		text-align: left;
  	}
  } */
}
@media screen and (max-width: 1023px) {
  .mindhub-methods .method-box {
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .mindhub-methods .method-box {
    max-width: calc(33.3% - 20px);
    text-align: center;
  }
}
.mindhub-methods .method-box img {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  display: inline-block;
}
.mindhub-methods .method-box ul {
  margin: 0 auto;
  list-style-position: inside;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  line-height: 1.6;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .mindhub-methods .method-box ul {
    max-width: 60%;
  }
}
@media screen and (max-width: 414px) {
  .mindhub-methods .method-box ul {
    max-width: 80%;
  }
}
.mindhub-methods .method-box ul li {
  padding-left: 5px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mindhub-methods .method-box ul li::before {
  content: "";
  padding: 4px 8px;
  margin-top: 3px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  border-style: solid;
  border-width: 2px;
  border-color: transparent transparent #9013fe #9013fe;
  transform: rotate(-45deg);
  transform-origin: 0 50%;
}
.mindhub-methods .method-box ul li p {
  margin: 0 0 0 10px;
}

@media screen and (max-width: 1023px) {
  .program-lang {
    padding-top: 20px;
  }
}
.program-lang .section-content {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.program-lang .program-logo {
  margin-bottom: 80px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
@media screen and (max-width: 1023px) {
  .program-lang .program-logo {
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 1023px) {
  .program-lang .program-logo {
    width: calc(25% - 10px);
  }
}
.program-lang .program-logo img {
  width: auto;
  max-height: 54px;
  display: block;
}

.right-choice {
  background-color: #9013fe;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .right-choice {
    padding: 40px 0;
  }
}
@media screen and (min-width: 768px) {
  .right-choice {
    padding: 68px 0;
  }
}
@media screen and (min-width: 1023px) {
  .right-choice .half-box:first-child {
    width: 60%;
  }
}
@media screen and (min-width: 1023px) {
  .right-choice .half-box:first-child .section-sub-label {
    width: 70%;
    margin: 0;
  }
}
@media screen and (min-width: 1023px) {
  .right-choice .half-box:last-child {
    width: 40%;
  }
}
.right-choice .segment-title,
.right-choice .section-sub-label {
  color: #fff;
}
@media screen and (max-width: 414px) {
  .right-choice .segment-title,
  .right-choice .section-sub-label {
    text-align: left;
  }
}
@media screen and (min-width: 414px) {
  .right-choice .segment-title,
  .right-choice .section-sub-label {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
@media screen and (min-width: 1023px) {
  .right-choice .segment-title,
  .right-choice .section-sub-label {
    text-align: left;
  }
}
@media screen and (max-width: 1023px) {
  .right-choice .links {
    width: 100%;
    justify-content: center;
  }
}
@media screen and (min-width: 1023px) {
  .right-choice .links {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 414px) {
  .right-choice .links .btn, .right-choice .links .btn-6, .right-choice .links .btn-7 {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 414px) {
  .right-choice .links .btn:last-child, .right-choice .links .btn-6:last-child, .right-choice .links .btn-7:last-child {
    margin-left: 22px;
  }
}

.mentors-content {
  padding-top: 66px;
  padding-bottom: 76px;
  text-align: center;
}
@media screen and (min-width: 414px) {
  .mentors-content .section-label,
  .mentors-content .section-sub-label {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.mentors-content .mentors-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.mentors-content .mentors-container::before, .mentors-content .mentors-container::after {
  content: "";
  max-width: 307px;
  width: 100%;
  height: 1px;
  display: block;
}
@media screen and (max-width: 1023px) {
  .mentors-content .mentors-container::before, .mentors-content .mentors-container::after {
    width: calc(50% - 10px);
  }
}
.mentors-content .mentors-container::before {
  order: 3;
}
.mentors-content .mentors-container::after {
  order: 2;
}
@media screen and (max-width: 767px) {
  .mentors-content .mentors-slider {
    padding-bottom: 30px;
    margin: 0 -10px;
  }
}
@media screen and (max-width: 414px) {
  .mentors-content .mentors-slider {
    margin: 0 -20px;
  }
}
.mentors-content .slick-dots {
  bottom: 30px;
}
.mentors-content .mentor-item {
  margin-bottom: 48px;
  order: 1;
}
@media screen and (max-width: 767px) {
  .mentors-content .mentor-item {
    padding: 0 10px;
  }
}
@media screen and (max-width: 414px) {
  .mentors-content .mentor-item {
    padding: 0 20px;
  }
}
@media screen and (min-width: 414px) and (max-width: 1023px) {
  .mentors-content .mentor-item {
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 1023px) {
  .mentors-content .mentor-item {
    max-width: 307px;
  }
}
.mentors-content .mentors-box {
  border-radius: 10px;
  box-shadow: 0 0 2px 1px #ebeaed;
}
.mentors-content .segment-img {
  width: 100%;
  height: auto;
  overflow: hidden;
  /* @media screen and ( max-width: $tablet - 1px ) {
  	height: auto;
  }

  @media screen and ( min-width: $tablet - 1px ) {
  	height: 175px;
  } */
}
.mentors-content .segment-img img {
  width: 100%;
  height: 100%;
  display: block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  object-fit: cover;
  object-position: center;
}
.mentors-content .body-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mentors-content .mentor-name {
  font-weight: 500;
  color: #333333;
  line-height: 1.5;
}
@media screen and (max-width: 1023px) {
  .mentors-content .mentor-name {
    font-size: 16px;
  }
}
@media screen and (min-width: 1023px) {
  .mentors-content .mentor-name {
    font-size: 22px;
  }
}
.mentors-content .mentor-postions {
  font-weight: 500;
  color: #9013fe;
  line-height: 1.48;
}
@media screen and (max-width: 1023px) {
  .mentors-content .mentor-postions {
    font-size: 12px;
  }
}
@media screen and (min-width: 1023px) {
  .mentors-content .mentor-postions {
    font-size: 14px;
  }
}
.mentors-content .btn, .mentors-content .btn-6, .mentors-content .btn-7 {
  margin: 0 auto;
}

.news-content {
  padding-top: 36px;
  padding-bottom: 100px;
  background-color: #ebeaed;
}
.news-content .news-item {
  padding: 0 16px;
}
.news-content .slick-arrow {
  width: 50px;
  height: 50px;
  display: block;
  transform-origin: 50% 50%;
  z-index: 8;
}
.news-content .slick-arrow::before {
  padding: 10px;
}
.news-content .slick-arrow.slick-prev {
  left: -4%;
}
.news-content .slick-arrow.slick-prev::before {
  margin-left: 10px;
}
.news-content .slick-arrow.slick-next {
  right: -4%;
}
.news-content .slick-arrow.slick-next::before {
  margin-right: 10px;
}
@media screen and (max-width: 1023px) {
  .news-content .section-sub-label {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.news-content .news-box {
  max-width: 307px;
  width: 100%;
  display: block;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 4px 1px #ebeaed;
}
.news-content .segment-img {
  height: 178px;
}
.news-content .segment-img img {
  width: 100%;
  height: 100%;
  display: block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  object-fit: cover;
  object-position: center;
}
.news-content .body-section {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-content .body-section p {
  margin: 0;
  font-size: 16px;
  color: #333333;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .news-content .slick-dots {
    bottom: -72px;
  }
}

.testimonial-content {
  padding-top: 40px;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 1023px) {
  .testimonial-content {
    padding-bottom: 80px;
  }
}
.testimonial-content .inner-container {
  position: relative;
}
.testimonial-content .inner-container::before {
  content: "";
  max-width: 502px;
  width: 100%;
  display: inline-block;
  background-image: url("/img/home/svg-spots-illustrations/testemonialspot.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .testimonial-content .inner-container::before {
    height: 100vw;
    top: 0;
    right: 0;
  }
}
@media screen and (min-width: 1024px) {
  .testimonial-content .inner-container::before {
    height: 304px;
    transform: translateY(-50%);
    top: 61%;
    right: -15%;
  }
}
.testimonial-content .illustration {
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .testimonial-content .illustration {
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .testimonial-content .illustration {
    width: 40%;
    height: auto;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: -5%;
  }
}
.testimonial-content .section-label {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 414px) {
  .testimonial-content .section-label {
    max-width: 80%;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
}
.testimonial-content .section-sub-label {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 414px) {
  .testimonial-content .section-sub-label {
    margin-bottom: 30px;
    text-align: left;
  }
}
@media screen and (min-width: 414px) {
  .testimonial-content .section-sub-label {
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
  }
}
.testimonial-content .testimonial-row {
  position: relative;
  z-index: 4;
}
@media screen and (min-width: 1023px) {
  .testimonial-content .testimonial-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
.testimonial-content .user-avatar {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .testimonial-content .user-avatar {
    margin: 0 0 20px;
  }
}
@media screen and (min-width: 1023px) {
  .testimonial-content .user-avatar {
    margin-right: 30px;
  }
}
.testimonial-content .user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.testimonial-content .user-content {
  width: 100%;
  margin-bottom: 80px;
  font-weight: 400;
  font-size: 18px;
  color: rgba(21, 20, 57, 0.4);
  line-height: 1.6;
  text-align: left;
}
@media screen and (min-width: 1023px) {
  .testimonial-content .user-content {
    max-width: 60%;
  }
}
.testimonial-content .user-name {
  padding-top: 12px;
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  line-height: 1.8;
}

/*************************************************************************
	Demo Page V2
*************************************************************************/
html {
  scroll-behavior: smooth;
}

@media screen and (min-device-width: 1024px) {
  .demo2 {
    display: block;
  }
}
.demo2 .section-hero-text {
  align-items: flex-start;
  background-image: url("../../img/hero-demos-new.png");
  background-position: top right;
  background-size: cover;
  background-color: unset;
}
@media screen and (max-width: 1024px) {
  .demo2 .section-hero-text {
    padding: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .demo2 .section-hero-text {
    padding-top: 34px;
    z-index: 2;
  }
}
.demo2 .section-hero-text::before {
  /*background: rgba(115,37,223,0.8);*/
  background: unset;
}
.demo2 .section-hero-text .hero-title {
  width: 100%;
  max-width: 100%;
}
@media screen and (max-width: 1024px) {
  .demo2 .section-hero-text .hero-title {
    margin: 0 auto 14px;
    font-size: 26px;
  }
}
@media screen and (max-width: 768px) {
  .demo2 .section-hero-text .hero-sub-title {
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .demo2 .section-hero-text .slide-down {
    width: 40px;
    height: 20px;
    margin: 30px auto 0;
    display: block;
    animation-name: bounce;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    position: relative;
  }
  .demo2 .section-hero-text .slide-down::before, .demo2 .section-hero-text .slide-down::after {
    content: "";
    width: 4px;
    height: 24px;
    border-radius: 4px;
    background-color: #fff;
    transform-origin: 50%;
    position: absolute;
    top: -2px;
  }
  .demo2 .section-hero-text .slide-down::before {
    transform: rotate(-45deg);
    left: 11px;
  }
  .demo2 .section-hero-text .slide-down::after {
    transform: rotate(45deg);
    right: 11px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .section-hero-text .slide-down {
    display: none;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.demo2 .section-hero-text .inner-container {
  padding-top: clamp(18px, 4vw, 80px);
  padding-bottom: clamp(24px, 5vw, 110px);
}
@media screen and (max-width: 768px) {
  .demo2 .scroll-to {
    position: absolute;
    top: -80px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .scroll-to {
    display: none;
  }
}
.demo2 .filters-result {
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}
@media screen and (max-width: 1024px) {
  .demo2 .filters-result {
    padding: 20px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2 .filters-result {
    padding: 30px 20px;
  }
}
.demo2 .filters-result p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
@media screen and (max-width: 1024px) {
  .demo2 .filters-result p {
    margin: 0 auto;
    font-size: 16px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2 .filters-result p {
    font-size: 18px;
    line-height: 1.2;
  }
}
.demo2 .filters-result p::before {
  content: "";
  width: 8px;
  height: 16px;
  margin-top: -6px;
  margin-right: 24px;
  display: inline-block;
  border-bottom: 4px solid #9013fe;
  border-right: 4px solid #9013fe;
  transform: rotate(45deg);
}
.demo2 .filters-result p span {
  max-width: 80%;
}
@media screen and (max-width: 768px) {
  .demo2 .hall-contact-info .inner-container {
    padding: 30px 40px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .hall-contact-info .inner-container {
    padding: 44px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.demo2 .contact-info-block {
  /* @media screen and ( max-width: $tablet-p ) {
  	width: 50%;
  	flex-wrap: wrap;
  	justify-content: center;
  } */
}
@media screen and (max-width: 768px) {
  .demo2 .contact-info-block {
    width: 100%;
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .demo2 .contact-info-block {
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1300px) {
  .demo2 .contact-info-block {
    width: 50%;
    margin-bottom: 20px;
    justify-content: center;
  }
}
@media screen and (min-width: 1300px) {
  .demo2 .contact-info-block {
    max-width: 25%;
    width: auto;
    min-width: 220px;
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .demo2 .contact-info-block:not(:last-child) {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1300px) {
  .demo2 .contact-info-block:not(:last-child) {
    padding-right: 2.2vw;
  }
}
.demo2 .contact-info-block .pictogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  color: #9013fe;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .demo2 .contact-info-block .pictogram {
    min-width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    font-size: 26px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .contact-info-block .pictogram {
    min-width: 54px;
    height: 54px;
    margin-right: 1.3vw;
    font-size: 30px;
  }
}
.demo2 .contact-info-block .info-text {
  margin: 0;
  font-weight: 500;
  color: #333333;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .demo2 .contact-info-block .info-text {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .contact-info-block .info-text {
    max-width: 210px;
    font-size: 18px;
  }
}
.demo2 .cn-places .pictogram {
  border-radius: 50%;
  border: 2px solid currentColor;
}
@media screen and (min-width: 768px) {
  .demo2 .cn-places .info-text {
    max-width: 120px;
  }
}
.demo2 .cn-location .pictogram {
  background-image: url("../../img/svg/icon-mappin2-purple.svg");
}
.demo2 .cn-phone .pictogram {
  background-image: url("../../img/svg/icon-mobile-phone-purple.svg");
}
.demo2 .cn-phone .info-text {
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .demo2 .cn-phone .info-text {
    display: block;
  }
}
.demo2 .cn-bus .pictogram {
  width: 56px;
  background-image: url("../../img/svg/icon-bus-purple.svg");
}
.demo2 .section-personal {
  background-color: #f5f9ff;
}
@media screen and (max-width: 768px) {
  .demo2 .section-personal {
    padding: 40px 20px 30px 20px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .section-personal {
    padding: 60px 20px 56px 20px;
  }
}
.demo2 .personal-block {
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
}
@media screen and (max-width: 768px) {
  .demo2 .personal-block {
    padding: 30px 40px 40px 40px;
    max-width: 420px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .personal-block {
    padding: 40px 100px 56px 100px;
    max-width: 560px;
  }
}
.demo2 .personal-block .personal-header {
  font-weight: 500;
  color: #333333;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .demo2 .personal-block .personal-header {
    margin-bottom: 20px;
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .personal-block .personal-header {
    margin-bottom: 24px;
    font-size: 24px;
  }
}
.demo2 .personal-block #personal-info {
  width: 100%;
  display: block;
}
.demo2 .personal-block #personal-info .personal-header {
  padding-top: 36px;
  margin-bottom: 32px;
  border-top: 1px solid #f5f9ff;
}
.demo2 .personal-block .form-row {
  position: relative;
}
@media screen and (max-width: 768px) {
  .demo2 .personal-block .form-row {
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .personal-block .form-row {
    margin-bottom: 14px;
  }
}
.demo2 .personal-block .form-row::before {
  content: "";
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  z-index: 4;
}
@media screen and (max-width: 768px) {
  .demo2 .personal-block .form-row::before {
    left: 18px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .personal-block .form-row::before {
    left: 20px;
  }
}
.demo2 .personal-block .form-row.btn-row {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .demo2 .personal-block .form-row.btn-row:not(:last-child) {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .personal-block .form-row.btn-row:not(:last-child) {
    margin-bottom: 50px;
  }
}
.demo2 .personal-block .form-row.input-date::before {
  background-image: url("../../img/svg/icon-ticket.svg");
}
.demo2 .personal-block .form-row.input-user::before {
  background-image: url("../../img/svg/icon-user.svg");
}
.demo2 .personal-block .form-row.input-email::before {
  background-image: url("../../img/svg/icon-email2.svg");
}
.demo2 .personal-block .form-row.input-phone::before {
  background-image: url("../../img/svg/icon-phone.svg");
}
.demo2 .personal-block .form-row.input-years::before {
  background-image: url("../../img/svg/icon-calendar.svg");
}
.demo2 .personal-block input,
.demo2 .personal-block textarea {
  width: 100%;
  border-radius: 10px;
  border: solid 1px #dcdcdc;
  background-color: #fff;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .demo2 .personal-block input,
  .demo2 .personal-block textarea {
    padding-left: 44px;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .personal-block input,
  .demo2 .personal-block textarea {
    padding-left: 58px;
  }
}
.demo2 .personal-block .btn, .demo2 .personal-block .btn-6, .demo2 .personal-block .btn-7 {
  margin: 0 auto;
}
.demo2 .content-demo2 {
  position: relative;
  z-index: 4;
}
@media screen and (min-width: 768px) {
  .demo2 .section-filters {
    padding: 0 20px;
  }
}
@media screen and (max-width: 1024px) {
  .demo2 .section-filters #filters-demo {
    padding: 20px;
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .demo2 .section-filters #filters-demo {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.demo2 .filter-box {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 6px 24px 7px rgba(13, 37, 62, 0.15);
}
@media screen and (min-width: 414px) {
  .demo2 .filter-box {
    max-width: 420px;
    margin: 0 auto 20px;
  }
}
@media screen and (max-width: 768px) {
  .demo2 .filter-box {
    padding: 20px;
    width: 100%;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .demo2 .filter-box {
    padding: 20px;
    width: calc(33.3% - 20px);
    height: auto;
  }
}
@media screen and (min-width: 1024px) {
  .demo2 .filter-box {
    padding: 20px 60px;
    width: calc(33.3% - 20px);
    height: 178px;
    margin-top: -64px;
  }
}
.demo2 .filter-head {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo2 .filter-head .order {
  font-weight: 600;
  color: #8441e2;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .demo2 .filter-head .order {
    margin-right: 10px;
    font-size: 30px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2 .filter-head .order {
    margin-right: 14px;
    font-size: 40px;
  }
}
.demo2 .filter-head .text {
  font-weight: 500;
  color: #333333;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .demo2 .filter-head .text {
    font-size: 16px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2 .filter-head .text {
    font-size: 20px;
  }
}
.demo2 .filter-demo,
.demo2 .jcf-select {
  width: 100%;
  height: 54px;
  border-radius: 3px;
  background-color: #F6F6F6;
  font-size: 15px;
  color: #9B9B9B;
  line-height: 1;
}
.demo2 .filter-demo optgroup,
.demo2 .filter-demo option,
.demo2 .jcf-select optgroup,
.demo2 .jcf-select option {
  background-color: #fff;
}
.demo2 .filter-demo option,
.demo2 .jcf-select option {
  text-indent: 0;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.3;
  color: #333333;
}
.demo2 .jcf-select {
  padding: 0 14px;
}
.demo2 .jcf-select.jcf-focus {
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
}

/*************************************************************************
	Demo Page V2
*************************************************************************/
html {
  scroll-behavior: smooth;
}

@media screen and (min-device-width: 1024px) {
  .demo2-online {
    display: block;
  }
}
.demo2-online .section-hero-text {
  align-items: flex-start;
}
@media screen and (max-width: 1024px) {
  .demo2-online .section-hero-text {
    padding: 20px;
    background-image: url("../../img/hero-online-mob-2.png");
  }
}
@media screen and (min-width: 1024px) {
  .demo2-online .section-hero-text {
    padding-top: 34px;
    height: 562px;
    background-image: url("../../img/hero-online.png");
    z-index: 2;
  }
}
.demo2-online .section-hero-text::before {
  background: linear-gradient(0deg, #8441E2 0%, rgba(24, 79, 136, 0.3) 40%);
}
@media screen and (max-width: 1024px) {
  .demo2-online .section-hero-text .hero-title {
    margin: 0 auto 14px;
    font-size: 26px;
  }
}
@media screen and (min-width: 1024px) {
  .demo2-online .section-hero-text .hero-title {
    width: 46%;
  }
}
@media screen and (max-width: 768px) {
  .demo2-online .section-hero-text .hero-sub-title {
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .section-hero-text .hero-sub-title {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .demo2-online .section-hero-text .slide-down {
    width: 40px;
    height: 20px;
    margin: 30px auto 0;
    display: block;
    animation-name: bounce;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    position: relative;
  }
  .demo2-online .section-hero-text .slide-down::before, .demo2-online .section-hero-text .slide-down::after {
    content: "";
    width: 4px;
    height: 24px;
    border-radius: 4px;
    background-color: #fff;
    transform-origin: 50%;
    position: absolute;
    top: -2px;
  }
  .demo2-online .section-hero-text .slide-down::before {
    transform: rotate(-45deg);
    left: 11px;
  }
  .demo2-online .section-hero-text .slide-down::after {
    transform: rotate(45deg);
    right: 11px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .section-hero-text .slide-down {
    display: none;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@media screen and (max-width: 768px) {
  .demo2-online .scroll-to {
    position: absolute;
    top: -80px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .scroll-to {
    display: none;
  }
}
.demo2-online .filters-result {
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}
@media screen and (max-width: 1024px) {
  .demo2-online .filters-result {
    padding: 20px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2-online .filters-result {
    padding: 30px 20px;
  }
}
.demo2-online .filters-result p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
@media screen and (max-width: 1024px) {
  .demo2-online .filters-result p {
    margin: 0 auto;
    font-size: 16px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2-online .filters-result p {
    font-size: 18px;
    line-height: 1.2;
  }
}
.demo2-online .filters-result p::before {
  content: "";
  width: 8px;
  height: 16px;
  margin-top: -6px;
  margin-right: 24px;
  display: inline-block;
  border-bottom: 4px solid #9013fe;
  border-right: 4px solid #9013fe;
  transform: rotate(45deg);
}
.demo2-online .filters-result p span {
  max-width: 80%;
}
@media screen and (max-width: 768px) {
  .demo2-online .hall-contact-info .inner-container {
    padding: 30px 40px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .hall-contact-info .inner-container {
    padding: 44px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .demo2-online .contact-info-block {
    width: 100%;
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .demo2-online .contact-info-block {
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1300px) {
  .demo2-online .contact-info-block {
    width: 50%;
    margin-bottom: 20px;
    justify-content: center;
  }
}
@media screen and (min-width: 1300px) {
  .demo2-online .contact-info-block {
    max-width: 25%;
    width: auto;
    min-width: 220px;
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .demo2-online .contact-info-block:not(:last-child) {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1300px) {
  .demo2-online .contact-info-block:not(:last-child) {
    padding-right: 2.2vw;
  }
}
.demo2-online .contact-info-block .pictogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  color: #9013fe;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .demo2-online .contact-info-block .pictogram {
    min-width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    font-size: 26px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .contact-info-block .pictogram {
    min-width: 54px;
    height: 54px;
    margin-right: 1.3vw;
    font-size: 30px;
  }
}
.demo2-online .contact-info-block .info-text {
  margin: 0;
  font-weight: 500;
  color: #333333;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .demo2-online .contact-info-block .info-text {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .contact-info-block .info-text {
    max-width: 210px;
    font-size: 18px;
  }
}
.demo2-online .cn-places .pictogram {
  border-radius: 50%;
  border: 2px solid currentColor;
}
@media screen and (min-width: 768px) {
  .demo2-online .cn-places .info-text {
    max-width: 120px;
  }
}
.demo2-online .cn-location .pictogram {
  background-image: url("../../img/svg/icon-mappin2-purple.svg");
}
.demo2-online .cn-phone .pictogram {
  background-image: url("../../img/svg/icon-mobile-phone-purple.svg");
}
.demo2-online .cn-phone .info-text {
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .demo2-online .cn-phone .info-text {
    display: block;
  }
}
.demo2-online .cn-bus .pictogram {
  width: 56px;
  background-image: url("../../img/svg/icon-bus-purple.svg");
}
.demo2-online .section-personal {
  background-color: #f5f9ff;
}
@media screen and (max-width: 768px) {
  .demo2-online .section-personal {
    padding: 40px 20px 30px 20px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .section-personal {
    padding: 60px 20px 56px 20px;
  }
}
.demo2-online .personal-block {
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
}
@media screen and (max-width: 768px) {
  .demo2-online .personal-block {
    padding: 30px 40px 40px 40px;
    max-width: 420px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .personal-block {
    padding: 40px 100px 56px 100px;
    max-width: 560px;
  }
}
.demo2-online .personal-block .personal-header {
  font-weight: 500;
  color: #333333;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .demo2-online .personal-block .personal-header {
    margin-bottom: 20px;
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .personal-block .personal-header {
    margin-bottom: 24px;
    font-size: 24px;
  }
}
.demo2-online .personal-block #personal-info {
  width: 100%;
  display: block;
}
.demo2-online .personal-block #personal-info .personal-header {
  padding-top: 36px;
  margin-bottom: 32px;
  border-top: 1px solid #f5f9ff;
}
.demo2-online .personal-block .form-row {
  position: relative;
}
@media screen and (max-width: 768px) {
  .demo2-online .personal-block .form-row {
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .personal-block .form-row {
    margin-bottom: 14px;
  }
}
.demo2-online .personal-block .form-row::before {
  content: "";
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  z-index: 4;
}
@media screen and (max-width: 768px) {
  .demo2-online .personal-block .form-row::before {
    left: 18px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .personal-block .form-row::before {
    left: 20px;
  }
}
.demo2-online .personal-block .form-row.btn-row {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .demo2-online .personal-block .form-row.btn-row:not(:last-child) {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .personal-block .form-row.btn-row:not(:last-child) {
    margin-bottom: 50px;
  }
}
.demo2-online .personal-block .form-row.input-date::before {
  background-image: url("../../img/svg/icon-ticket.svg");
}
.demo2-online .personal-block .form-row.input-user::before {
  background-image: url("../../img/svg/icon-user.svg");
}
.demo2-online .personal-block .form-row.input-email::before {
  background-image: url("../../img/svg/icon-email2.svg");
}
.demo2-online .personal-block .form-row.input-phone::before {
  background-image: url("../../img/svg/icon-phone.svg");
}
.demo2-online .personal-block .form-row.input-years::before {
  background-image: url("../../img/svg/icon-calendar.svg");
}
.demo2-online .personal-block input,
.demo2-online .personal-block textarea {
  width: 100%;
  border-radius: 10px;
  border: solid 1px #dcdcdc;
  background-color: #fff;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .demo2-online .personal-block input,
  .demo2-online .personal-block textarea {
    padding-left: 44px;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .personal-block input,
  .demo2-online .personal-block textarea {
    padding-left: 58px;
  }
}
.demo2-online .personal-block .btn, .demo2-online .personal-block .btn-6, .demo2-online .personal-block .btn-7 {
  margin: 0 auto;
}
.demo2-online .content-demo2 {
  position: relative;
  z-index: 4;
}
@media screen and (min-width: 768px) {
  .demo2-online .section-filters {
    padding: 0 20px;
  }
}
@media screen and (max-width: 1024px) {
  .demo2-online .section-filters #filters-demo {
    padding: 20px;
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .demo2-online .section-filters #filters-demo {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.demo2-online .filter-box {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 6px 24px 7px rgba(13, 37, 62, 0.15);
}
@media screen and (min-width: 414px) {
  .demo2-online .filter-box {
    max-width: 420px;
    margin: 0 auto 20px;
  }
}
@media screen and (max-width: 768px) {
  .demo2-online .filter-box {
    padding: 20px;
    width: 100%;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .demo2-online .filter-box {
    padding: 20px;
    width: calc(33.3% - 20px);
    height: auto;
  }
}
@media screen and (min-width: 1024px) {
  .demo2-online .filter-box {
    padding: 20px 60px;
    width: calc(33.3% - 20px);
    height: 178px;
    margin-top: -64px;
  }
}
.demo2-online .filter-head {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo2-online .filter-head .order {
  font-weight: 600;
  color: #8441e2;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .demo2-online .filter-head .order {
    margin-right: 10px;
    font-size: 30px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2-online .filter-head .order {
    margin-right: 14px;
    font-size: 40px;
  }
}
.demo2-online .filter-head .text {
  font-weight: 500;
  color: #333333;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .demo2-online .filter-head .text {
    font-size: 16px;
  }
}
@media screen and (min-device-width: 1024px) {
  .demo2-online .filter-head .text {
    font-size: 20px;
  }
}
.demo2-online .filter-demo, .demo2-online .jcf-select {
  width: 100%;
  height: 54px;
  border-radius: 3px;
  background-color: #F6F6F6;
  font-size: 15px;
  color: #9B9B9B;
  line-height: 1;
}
.demo2-online .filter-demo optgroup, .demo2-online .filter-demo option, .demo2-online .jcf-select optgroup, .demo2-online .jcf-select option {
  background-color: #fff;
}
.demo2-online .filter-demo option, .demo2-online .jcf-select option {
  text-indent: 0;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.3;
  color: #333333;
}
.demo2-online .jcf-select {
  padding: 0 14px;
}
.demo2-online .jcf-select.jcf-focus {
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
}

/*************************************************************************
    Filters New
*************************************************************************/
.filter-section {
  padding: 0 20px;
  position: relative;
  z-index: 4;
}
@media screen and (max-width: 1024px) {
  .filter-section .filters-form {
    padding: 20px;
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .filter-section .filters-form {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.filter-section .filter-box {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 6px 24px 7px rgba(13, 37, 62, 0.15);
}
@media screen and (min-width: 414px) {
  .filter-section .filter-box {
    max-width: 420px;
  }
}
@media screen and (max-width: 768px) {
  .filter-section .filter-box {
    padding: 20px;
    width: 100%;
    margin: 0 auto 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .filter-section .filter-box {
    padding: 20px;
    width: calc(33.3% - 20px);
    height: auto;
  }
}
@media screen and (min-width: 1024px) {
  .filter-section .filter-box {
    padding: 36px 60px 33px 60px;
    width: calc(33.3% - 20px);
    height: 178px;
    margin-top: -44px;
  }
}
.filter-section .filter-head {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-section .filter-head .order {
  font-weight: 600;
  color: #8441e2;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .filter-section .filter-head .order {
    margin-right: 10px;
    font-size: 30px;
  }
}
@media screen and (min-device-width: 1024px) {
  .filter-section .filter-head .order {
    margin-right: 14px;
    font-size: 38px;
  }
}
.filter-section .filter-head .text {
  font-weight: 500;
  color: #333333;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .filter-section .filter-head .text {
    font-size: 16px;
  }
}
@media screen and (min-device-width: 1024px) {
  .filter-section .filter-head .text {
    font-size: 20px;
  }
}
.filter-section .filter-demo,
.filter-section .jcf-select {
  width: 100%;
  height: 54px;
  border-radius: 3px;
  background-color: #F6F6F6;
  font-size: 15px;
  color: #9B9B9B;
  line-height: 1;
}
.filter-section .filter-demo optgroup,
.filter-section .filter-demo option,
.filter-section .jcf-select optgroup,
.filter-section .jcf-select option {
  background-color: #fff;
}
.filter-section .filter-demo option,
.filter-section .jcf-select option {
  text-indent: 0;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.3;
  color: #333333;
}
.filter-section .jcf-select {
  padding: 0 14px;
}
.filter-section .jcf-select.jcf-focus {
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
}
.filter-section .fiter-action {
  text-align: center;
}
.filter-section .filter-months {
  padding-top: 30px;
  max-width: 1200px;
  width: 100%;
  margin: 36px auto 18px;
  border-top: 1px solid #ebebeb;
}
.filter-section .filter-months ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  /* @media screen and ( min-width: $desktop ) {
      padding: 0 26px;
  } */
}
.filter-section .filter-months li {
  margin-bottom: 20px;
}
.filter-section .filter-months li:not(:last-child) {
  margin-right: 18px;
}
.filter-section .filter-months .filter-month-button {
  padding: 0 20px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 50px;
  background-color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #aaa;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
  -moz-transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
  -webkit-transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
  -o-transition: border 0.1s ease, color 0.1s ease, background-color 0.1s ease;
}
@media screen and (min-device-width: 1200px) {
  .filter-section .filter-months .filter-month-button:hover {
    border: 1px solid #6d3dd7;
    background-color: #6d3dd7;
    color: #fff;
  }
}
.filter-section .filter-months .filter-month-button.active {
  cursor: default;
  border: 1px solid #6d3dd7;
  background-color: #6d3dd7;
  color: #fff;
}

/*************************************************************************
	Contact US V2
*************************************************************************/
.contact-us .contact-map,
.contact-us .contact-hero,
.contact-center .contact-map,
.contact-center .contact-hero {
  width: 100%;
  background-color: lightgray;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .contact-us .contact-map,
  .contact-us .contact-hero,
  .contact-center .contact-map,
  .contact-center .contact-hero {
    padding: 40px 0 20px 0;
    min-height: 300px;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .contact-map,
  .contact-us .contact-hero,
  .contact-center .contact-map,
  .contact-center .contact-hero {
    min-height: 640px;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .contact-map .inner-container,
  .contact-us .contact-hero .inner-container,
  .contact-center .contact-map .inner-container,
  .contact-center .contact-hero .inner-container {
    height: 100%;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 4;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .inner-container,
  .contact-us .page-container,
  .contact-center .inner-container,
  .contact-center .page-container {
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1240px;
  }
}
.contact-us .contact-form,
.contact-center .contact-form {
  max-width: 430px;
  background-color: #fff;
  box-shadow: 1.7px 2.5px 29px 0 rgba(0, 0, 0, 0.17);
  z-index: 4;
}
.contact-us .contact-form .success-contact img,
.contact-us .contact-form .fail-contact img,
.contact-center .contact-form .success-contact img,
.contact-center .contact-form .fail-contact img {
  margin: auto;
  padding-top: 30px;
}
.contact-us .contact-form .success-contact .success-contact-message,
.contact-us .contact-form .fail-contact .success-contact-message,
.contact-center .contact-form .success-contact .success-contact-message,
.contact-center .contact-form .fail-contact .success-contact-message {
  width: 90%;
  font-family: Rubik;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: 0.4px;
  text-align: center;
  color: #6d3dd7;
  margin: 60px auto;
}
@media screen and (max-width: 1024px) {
  .contact-us .contact-form,
  .contact-center .contact-form {
    padding: 24px 13px 18px;
    width: 90%;
    margin: 0 auto;
    border-radius: 6px;
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .contact-form,
  .contact-center .contact-form {
    padding: 38px 44px 26px;
    width: 100%;
    border-radius: 12px;
    transform: translateY(-50%);
    position: absolute;
    left: 20px;
    top: 50%;
  }
}
.contact-us .contact-form::before,
.contact-center .contact-form::before {
  content: "";
  width: 100%;
  height: 10px;
  display: inline-block;
  background-color: #8441e2;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .contact-us .contact-form::before,
  .contact-center .contact-form::before {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .contact-form::before,
  .contact-center .contact-form::before {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}
.contact-us .contact-form .form-title,
.contact-center .contact-form .form-title {
  margin: 0 0 30px;
  font-weight: bold;
  font-size: 26px;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #383736;
}
.contact-us .contact-form .ct-row,
.contact-center .contact-form .ct-row {
  position: relative;
}
.contact-us .contact-form .ct-row:not(.field-message):not(.field-office),
.contact-center .contact-form .ct-row:not(.field-message):not(.field-office) {
  margin-bottom: 10px;
}
.contact-us .contact-form .ct-row:not(.field-message):not(.field-office)::before,
.contact-center .contact-form .ct-row:not(.field-message):not(.field-office)::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: absolute;
  top: 13px;
  left: 12px;
  z-index: 2;
}
.contact-us .contact-form .ct-row.field-office,
.contact-center .contact-form .ct-row.field-office {
  margin-bottom: 24px;
}
.contact-us .contact-form .ct-row.field-message,
.contact-center .contact-form .ct-row.field-message {
  margin-bottom: 20px;
}
.contact-us .contact-form .ct-row.field-message label,
.contact-center .contact-form .ct-row.field-message label {
  padding-top: 14px;
}
.contact-us .contact-form .ct-row.field-message label::after,
.contact-center .contact-form .ct-row.field-message label::after {
  content: "*";
  color: red;
}
.contact-us .contact-form .ct-row.field-message .alert-success,
.contact-center .contact-form .ct-row.field-message .alert-success {
  top: 52px;
}
.contact-us .contact-form label,
.contact-center .contact-form label {
  width: calc(100% - 34px);
  margin-bottom: 10px;
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.1;
}
.contact-us .contact-form .jcf-select,
.contact-us .contact-form select,
.contact-us .contact-form input,
.contact-us .contact-form textarea,
.contact-center .contact-form .jcf-select,
.contact-center .contact-form select,
.contact-center .contact-form input,
.contact-center .contact-form textarea {
  min-height: initial;
  width: calc(100% - 34px);
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  font-weight: 300;
}
@media screen and (max-width: 1024px) {
  .contact-us .contact-form .jcf-select,
  .contact-us .contact-form select,
  .contact-us .contact-form input,
  .contact-us .contact-form textarea,
  .contact-center .contact-form .jcf-select,
  .contact-center .contact-form select,
  .contact-center .contact-form input,
  .contact-center .contact-form textarea {
    height: 44px;
    font-size: 13px;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .contact-form .jcf-select,
  .contact-us .contact-form select,
  .contact-us .contact-form input,
  .contact-us .contact-form textarea,
  .contact-center .contact-form .jcf-select,
  .contact-center .contact-form select,
  .contact-center .contact-form input,
  .contact-center .contact-form textarea {
    height: 40px;
    font-size: 14px;
  }
}
.contact-us .contact-form .jcf-select,
.contact-us .contact-form select,
.contact-center .contact-form .jcf-select,
.contact-center .contact-form select {
  border-color: #f6f6f6;
  background-color: #f6f6f6;
}
.contact-us .contact-form .jcf-select option,
.contact-us .contact-form select option,
.contact-center .contact-form .jcf-select option,
.contact-center .contact-form select option {
  font-weight: 300;
  font-size: 14px;
  line-height: 2.2;
  color: #383736;
}
.contact-us .contact-form input,
.contact-us .contact-form textarea,
.contact-center .contact-form input,
.contact-center .contact-form textarea {
  min-height: initial;
  border-color: #dcdcdc;
}
.contact-us .contact-form input,
.contact-center .contact-form input {
  padding: 0 12px 0 44px;
  line-height: 1;
}
.contact-us .contact-form .jcf-select,
.contact-us .contact-form select,
.contact-us .contact-form textarea,
.contact-center .contact-form .jcf-select,
.contact-center .contact-form select,
.contact-center .contact-form textarea {
  padding: 12px;
}
.contact-us .contact-form textarea,
.contact-center .contact-form textarea {
  height: 76px;
  resize: none;
}
.contact-us .contact-form .error-msg,
.contact-center .contact-form .error-msg {
  padding: 4px 0 0 12px;
  margin: 0;
  display: none;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.1;
  color: #f01a29;
}
.contact-us .contact-form .alert-success,
.contact-center .contact-form .alert-success {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url("../../img/svg/workshop/icon-successes.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  position: absolute;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .contact-us .contact-form .alert-success,
  .contact-center .contact-form .alert-success {
    top: 11px;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .contact-form .alert-success,
  .contact-center .contact-form .alert-success {
    top: 10px;
  }
}
.contact-us .contact-form .btn-1,
.contact-center .contact-form .btn-1 {
  margin-left: 0;
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;
}
@media screen and (max-width: 1024px) {
  .contact-us .contact-form .btn-1,
  .contact-center .contact-form .btn-1 {
    width: calc(100% - 34px);
  }
}
.contact-us .contact-form .btn-1:disabled,
.contact-center .contact-form .btn-1:disabled {
  background-color: #dbdbdb;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.contact-us .page-container {
  padding-top: 48px;
}
.contact-us .filter-offices {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
@media screen and (max-width: 1024px) {
  .contact-us .filter-offices {
    margin-bottom: 18px;
    justify-content: center;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .filter-offices {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 22px;
    justify-content: flex-start;
  }
}
.contact-us .filter-offices li {
  display: block;
}
.contact-us .filter-offices button, .contact-us .filter-offices a.filter-offices-button {
  display: block;
  text-align: center;
  min-width: 96px;
  border-radius: 18px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 3px 4px 5px 0 rgba(199, 199, 199, 0.09);
  outline: none;
  font-weight: 400;
  font-size: 13px;
  color: #c2c2c2;
  transition: color 0.1s ease, border 0.1s ease, background-color 0.1s ease;
}
@media screen and (max-width: 1024px) {
  .contact-us .filter-offices button, .contact-us .filter-offices a.filter-offices-button {
    padding: 2px 10px;
    margin: 0 3px 8px;
  }
}
@media screen and (min-width: 1024px) {
  .contact-us .filter-offices button, .contact-us .filter-offices a.filter-offices-button {
    padding: 4px 18px;
    margin: 0 9px 10px;
  }
}
@media screen and (min-device-width: 1024px) {
  .contact-us .filter-offices button, .contact-us .filter-offices a.filter-offices-button {
    cursor: pointer;
  }
  .contact-us .filter-offices button:hover, .contact-us .filter-offices a.filter-offices-button:hover {
    background-color: #8441e2;
    color: #fff;
  }
}
.contact-us .filter-offices button.active, .contact-us .filter-offices a.filter-offices-button.active {
  background-color: #8441e2;
  color: #fff;
}

.contact-form-phone-info {
  width: calc(100% - 34px);
  background: #f8eeff;
  border-radius: 6px;
  color: #7c00e6;
  display: none;
  padding: 5px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.contact-form-phone-info svg {
  width: 14px;
  margin-left: 20px;
  margin-right: 5px;
}

.ct-holder {
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .ct-holder {
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .ct-holder .g-map-img {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .ct-holder {
    height: 640px;
    position: relative;
  }
}
.ct-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  ovbject-posstion: center;
}

.hall-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  border-radius: 6px;
  background-color: #fff;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .hall-box {
    margin: 0 auto 30px;
    box-shadow: 0px 3px 29.1px 1.9px rgba(0, 0, 0, 0.19);
  }
}
@media screen and (min-width: 1024px) {
  .hall-box {
    margin-bottom: 18px;
    justify-content: space-between;
    box-shadow: 1.7px 2.5px 18px 0 rgba(0, 0, 0, 0.17);
  }
}
@media screen and (min-device-width: 1024px) {
  .hall-box {
    transition: border box-shadow 0.1s ease;
  }
  .hall-box:hover {
    box-shadow: 1.7px 2.5px 18px 0 rgba(0, 0, 0, 0.5);
  }
}
.hall-box .hall-box-link {
  display: none;
}
@media screen and (min-device-width: 1024px) {
  .hall-box .hall-box-link {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 2;
  }
}
.hall-box > div {
  align-self: stretch;
}
@media screen and (max-width: 1024px) {
  .hall-box .hall-cover {
    width: calc(100% - 118px);
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-cover {
    padding: 26px;
    width: 212px;
    order: 1;
  }
}
.hall-box .hall-cover img {
  object-fit: cover;
  object-position: top;
}
@media screen and (max-width: 1024px) {
  .hall-box .hall-cover img {
    width: 100%;
    height: 144px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-cover img {
    width: 160px;
    height: 150px;
    border-radius: 6px;
  }
}
.hall-box .hall-courses {
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #8441e2;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .hall-box .hall-courses {
    padding: 26px 22px;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-courses {
    padding: 8px;
    justify-content: center;
    order: 3;
  }
}
.hall-box .hall-courses .number {
  display: block;
  font-size: 52px;
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-courses .number {
    margin-bottom: 18px;
  }
}
.hall-box .hall-courses p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
@media screen and (max-width: 1024px) {
  .hall-box .hall-content {
    padding: 40px 26px 10px;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content {
    padding: 26px 0;
    width: calc(100% - 212px - 118px - 4px - 34px);
    margin: 0 34px 0 4px;
    flex: 1;
    order: 2;
  }
}
@media screen and (max-width: 1024px) {
  .hall-box .hall-content > div {
    text-align: left;
  }
}
.hall-box .hall-content .hall-name {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content .hall-name {
    font-size: 23px;
  }
}
.hall-box .hall-content .hall-phone {
  position: relative;
  z-index: 4;
}
@media screen and (max-width: 1024px) {
  .hall-box .hall-content .hall-phone {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content .hall-phone {
    padding: 2px 6px;
    margin-bottom: 16px;
    font-size: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content .hall-description p {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content .hall-stats {
    padding-top: 22px;
    padding-bottom: 0;
    border-top: 1px solid #ebebeb;
    border-bottom: none;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content .hall-stats > div::before {
    width: 36px;
    height: 27px;
    margin-right: 10px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content .hall-stats .label,
  .hall-box .hall-content .hall-stats .stat-bio {
    font-size: 11px;
  }
}
.hall-box .hall-content .more {
  /* @media screen and ( min-device-width: $tablet ) {
  	&:hover {
  		text-decoration: underline;
  	}
  } */
}
@media screen and (max-width: 1024px) {
  .hall-box .hall-content .more {
    padding: 22px 4px 10px;
    margin: 0 auto;
    display: inline-flex;
    font-weight: 500;
    font-size: 14px;
    color: #939393;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .hall-content .more {
    display: none;
  }
}
.hall-box .tag-hall {
  width: 106px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -15px;
  z-index: 4;
}
@media screen and (max-width: 1024px) {
  .hall-box .tag-hall {
    top: 18px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-box .tag-hall {
    top: 26px;
  }
}
.hall-box .tag-hall::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  position: absolute;
  bottom: -15px;
  left: 0;
  z-index: 2;
}
.hall-box .tag-hall.new-hall {
  background-color: #57ce89;
}
.hall-box .tag-hall.new-hall::before {
  border-color: transparent #35c973 transparent transparent;
}
.hall-box .tag-hall.upcoming-hall {
  background-color: #F5A623;
}
.hall-box .tag-hall.upcoming-hall::before {
  border-color: transparent #F5A623 transparent transparent;
}
.hall-box .tag-hall p {
  margin: 0;
  font-size: 14px;
  color: #fff;
  line-height: 1.1;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .hall-content {
    width: 100%;
  }
}
.hall-content .hall-name {
  margin: 0 0 16px 0;
  font-weight: 500;
  color: #666666;
  line-height: 1;
  text-transform: uppercase;
}
@media screen and (max-width: 1024px) {
  .hall-content .hall-name {
    font-size: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-content .hall-name {
    font-size: 36px;
  }
}
.hall-content .hall-phone {
  padding: 6px 8px;
  display: inline-block;
  border-radius: 6px;
  background-color: #f6f8fc;
  font-weight: 400;
  font-size: 14px;
  color: #9c9c9c;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .hall-content .hall-phone {
    margin-bottom: 34px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-content .hall-phone {
    margin-bottom: 50px;
  }
}
@media screen and (min-device-width: 1024px) {
  .hall-content .hall-phone {
    transition: background-color 0.1s ease, color 0.1s ease;
  }
  .hall-content .hall-phone:hover {
    background-color: #8441e2;
    color: #fff;
  }
}
.hall-content .hall-phone span {
  text-transform: uppercase;
}
.hall-content .hall-description {
  color: #9d9d9d;
  line-height: 1.5;
  text-align: left;
}
.hall-content .hall-description p {
  color: #9d9d9d;
  line-height: 1.5;
}
@media screen and (max-width: 1024px) {
  .hall-content .hall-description p {
    margin-bottom: 24px;
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-content .hall-description p {
    margin-bottom: 18px;
    font-size: 18px;
  }
}
.hall-content .hall-stats {
  border-bottom: 1px solid #ebebeb;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .hall-content .hall-stats {
    padding-bottom: 36px;
  }
}
@media screen and (min-width: 900px) {
  .hall-content .hall-stats {
    padding-bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.hall-content .hall-stats > div {
  padding-left: 50px;
  position: relative;
}
@media screen and (max-width: 900px) {
  .hall-content .hall-stats > div:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
.hall-content .hall-stats > div::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .hall-content .hall-stats > div::before {
    width: 36px;
    height: 27px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-content .hall-stats > div::before {
    width: 40px;
    height: 30px;
  }
}
.hall-content .hall-stats .st-location::before {
  background-image: url("../../img/svg/icon-mappin2-purple.svg");
}
.hall-content .hall-stats .st-transport::before {
  background-image: url("../../img/svg/icon-bus-purple.svg");
}
.hall-content .hall-stats .st-course::before {
  background-image: url("../../img/svg/icon-group2-purple.svg");
}
.hall-content .hall-stats .label,
.hall-content .hall-stats .stat-bio {
  width: 100%;
  margin: 0;
  display: block;
  font-style: normal;
  line-height: 1.2;
  text-transform: uppercase;
}
@media screen and (max-width: 1024px) {
  .hall-content .hall-stats .label,
  .hall-content .hall-stats .stat-bio {
    font-size: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .hall-content .hall-stats .label,
  .hall-content .hall-stats .stat-bio {
    font-size: 14px;
  }
}
.hall-content .hall-stats .label {
  color: #c1c1c1;
}
.hall-content .hall-stats .stat-bio,
.hall-content .hall-stats time {
  color: #939393;
}

@media screen and (max-width: 1024px) {
  .contact-center .contact-form {
    display: none;
  }
}
.contact-center .page-container {
  padding-top: 50px;
}
.contact-center .hall-content {
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .contact-center .hall-stats {
    margin-bottom: 28px;
  }
}
@media screen and (min-width: 1024px) {
  .contact-center .hall-stats {
    margin-bottom: 60px;
  }
}
.contact-center .hall-description {
  font-weight: 300;
  color: #646464;
}
.contact-center .hall-description p {
  font-weight: 300;
  color: #646464;
}
.contact-center .filter-courses {
  background-color: #f4f2ff;
}
@media screen and (max-width: 1024px) {
  .contact-center .filter-courses .inner-container {
    padding: 45px 0;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .contact-center .filter-courses .inner-container {
    padding: 56px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.contact-center .filter-courses .coming-courses {
  padding: 0 40px;
  height: 52px;
  margin: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  border: none;
  font-weight: 500;
  font-size: 18px;
  color: #701fdd;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .contact-center .filter-courses .coming-courses:not(:last-child) {
    margin-bottom: 14px;
  }
}
@media screen and (min-device-width: 1024px) {
  .contact-center .filter-courses .coming-courses {
    cursor: pointer;
  }
  .contact-center .filter-courses .coming-courses:hover {
    background-color: #e6dbfb;
  }
}
.contact-center .filter-courses .coming-courses.active {
  background-color: #e6dbfb;
  cursor: default;
}

.subscribe-us {
  background-color: #f4f2ff;
}
@media screen and (max-width: 1024px) {
  .subscribe-us .inner-container {
    padding: 50px 0;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .subscribe-us .inner-container {
    padding: 74px 0;
  }
}
.subscribe-us .inner-container img {
  margin: auto;
}
.subscribe-us .sub-title-contacts {
  color: #555555;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .subscribe-us .sub-title-contacts {
    max-width: 90%;
    margin: 0 auto 40px;
  }
}
@media screen and (min-width: 1024px) {
  .subscribe-us .sub-title-contacts {
    max-width: 480px;
    margin: 0 auto 52px;
    font-size: 20px;
  }
}
@media screen and (max-width: 1024px) {
  .subscribe-us form {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .subscribe-us form {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.subscribe-us form .ct-row {
  position: relative;
}
@media screen and (max-width: 1024px) {
  .subscribe-us form .ct-row {
    margin-bottom: 20px;
  }
}
.subscribe-us form .ct-row::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .subscribe-us form .ct-row::before {
    margin-left: 15px;
  }
}
@media screen and (min-width: 1024px) {
  .subscribe-us form .ct-row::before {
    left: 12px;
  }
}
.subscribe-us form input {
  padding: 0 12px 0 44px;
  min-height: initial;
  width: 300px;
  border-radius: 6px;
  border: solid 1px #dcdcdc;
  background-color: #fff;
  font-weight: 300;
  color: #383736;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .subscribe-us form input {
    height: 44px;
    font-size: 13px;
  }
}
@media screen and (min-width: 1024px) {
  .subscribe-us form input {
    height: 40px;
    font-size: 14px;
  }
}
.subscribe-us form .btn, .subscribe-us form .btn-6, .subscribe-us form .btn-7 {
  border-radius: 6px;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .subscribe-us form .btn, .subscribe-us form .btn-6, .subscribe-us form .btn-7 {
    width: 300px;
    height: 44px;
    margin-left: 0;
  }
}
@media screen and (min-width: 1024px) {
  .subscribe-us form .btn, .subscribe-us form .btn-6, .subscribe-us form .btn-7 {
    height: 40px;
    margin-left: -6px;
  }
}

/*************************************************************************
	Blog Page
*************************************************************************/
.blog-page {
  padding-top: clamp(40px, 5.4vw, 60px);
  /*********************************
  	Blog Articles
  *********************************/
  /*********************************
  	Blog More
  *********************************/
}
.blog-page section {
  padding-left: 20px;
  padding-right: 20px;
}
.blog-page .btn, .blog-page .btn-6, .blog-page .btn-7 {
  border-width: 3px;
  line-height: 44px;
}
.blog-page .inner-container {
  max-width: 900px;
}
.blog-page .section-title {
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: clamp(40px, 5vw, 54px);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 25px);
  color: #3f3f3f;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.1;
  position: relative;
}
.blog-page .section-title::after {
  content: "";
  width: clamp(40px, 5vw, 60px);
  height: 4px;
  margin: clamp(22px, 2.8vw, 30px) auto 0;
  display: block;
  background-color: #e5e5e5;
}
.blog-page .blog-box {
  border: solid 1px #dadada;
  background-color: #fff;
}
.blog-page .blog-box p {
  font-weight: 300;
  font-size: 14px;
  color: #696969;
  text-align: left;
  line-height: 1.3;
}
.blog-page .blog-cover {
  position: relative;
}
.blog-page .blog-cover img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
}
.blog-page .blog-cover .blog-tag {
  width: 118px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  background-color: #9013fe;
  font-size: 18px;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 4;
}
.blog-page .blog-short-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: center;
}
.blog-page .blog-short-description .btn, .blog-page .blog-short-description .btn-6, .blog-page .blog-short-description .btn-7 {
  margin: auto auto 0;
}
.blog-page .blog-short-title {
  margin-top: 0;
  font-weight: 500;
  color: #3f3f3f;
  text-align: left;
  line-height: 1.4;
}
@media screen and (min-width: 769px) {
  .blog-page .blog-articles-section .section-content,
  .blog-page .blog-more-section .section-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.blog-page .blog-articles-section {
  margin-bottom: clamp(48px, 8.8vw, 94px);
}
.blog-page .blog-articles-section .section-content {
  align-items: stretch;
  border-radius: 6px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .blog-page .blog-articles-section .blog-box {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .blog-page .blog-articles-section .blog-box {
    width: calc(66.67% + 12px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
}
@media screen and (min-width: 769px) {
  .blog-page .blog-articles-section .blog-cover {
    width: 56%;
    height: 100%;
  }
}
.blog-page .blog-articles-section .blog-cover img {
  object-position: center;
}
.blog-page .blog-articles-section .blog-short-description {
  padding: 30px 20px;
}
@media screen and (min-width: 769px) {
  .blog-page .blog-articles-section .blog-short-description {
    width: 44%;
  }
}
.blog-page .blog-articles-section .blog-short-description p {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.blog-page .blog-articles-section .blog-short-title {
  margin-bottom: clamp(20px, 2.8vw, 30px);
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .blog-page .blog-articles-section .featured-articles {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}
@media screen and (min-width: 769px) {
  .blog-page .blog-articles-section .featured-articles {
    width: calc(33.33% - 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: #fff;
  }
}
.blog-page .blog-articles-section .feature-title {
  width: 100%;
  height: 40px;
  margin: 0;
  background-color: #9013fe;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
}
@media screen and (min-width: 769px) {
  .blog-page .blog-articles-section .feature-title {
    border-top-right-radius: 6px;
  }
}
.blog-page .blog-articles-section .ft-article {
  padding: 12px 12px 12px 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  background-color: #ebebeb;
  transition: background-color 0.24s ease-in-out;
}
@media screen and (max-width: 768px) {
  .blog-page .blog-articles-section .ft-article:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}
@media screen and (min-width: 768px) {
  .blog-page .blog-articles-section .ft-article:last-child {
    border-bottom-right-radius: 6px;
  }
}
@media screen and (min-device-width: 768px) {
  .blog-page .blog-articles-section .ft-article:hover {
    background-color: #fff;
    transition: background-color 0.24s ease-in-out;
  }
}
.blog-page .blog-articles-section .ft-article img {
  max-width: initial;
  width: 76px;
  height: 76px;
  object-fit: cover;
  object-position: center;
}
.blog-page .blog-articles-section .ft-article img + .article-title {
  padding-left: 12px;
}
.blog-page .blog-articles-section .ft-article .article-title {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  color: #030d28;
  line-height: 1.3;
}
.blog-page .blog-more-section {
  padding-bottom: clamp(50px, 7.6vw, 78px);
  text-align: right;
}
.blog-page .blog-more-section .view-all {
  margin-left: auto;
  margin-bottom: clamp(20px, 2.4vw, 26px);
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  color: #9013fe;
  line-height: 1;
  text-replace: none;
}
@media screen and (min-device-width: 768px) {
  .blog-page .blog-more-section .view-all:hover {
    text-decoration: underline;
  }
}
.blog-page .blog-more-section .blog-box {
  margin-bottom: 30px;
  align-self: stretch;
  border-radius: 6px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 769px) {
  .blog-page .blog-more-section .blog-box {
    width: calc(33.33% - 12px);
    transition: box-shadow 0.24s ease-in-out;
  }
}
@media screen and (min-device-width: 768px) {
  .blog-page .blog-more-section .blog-box:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.24s ease-in-out;
  }
}
.blog-page .blog-more-section .blog-cover {
  height: 170px;
}
.blog-page .blog-more-section .blog-cover img {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  object-position: top right;
}
.blog-page .blog-more-section .blog-short-description {
  padding: 22px 20px;
  height: calc(100% - 170px);
}
.blog-page .blog-more-section .blog-short-title {
  margin-bottom: clamp(12px, 1.4vw, 16px);
  font-size: 17px;
}
.blog-page .pagination {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.blog-page .pagination a {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 0;
  text-align: center;
  line-height: 45px;
  cursor: pointer;
  outline: none;
  border-top: solid 2px #ebebeb;
  border-bottom: solid 2px #ebebeb;
  border-left: solid 2px #ebebeb;
  background-color: #fff;
  border-right: transparent;
  font-weight: 600;
  font-size: 17px;
  color: #000;
}
.blog-page .pagination a.currentPage {
  cursor: default;
  background-color: #9013fe;
  color: #fff;
  border-color: #9013fe;
}
@media screen and (min-device-width: 768px) {
  .blog-page .pagination a.currentPage:hover {
    cursor: default;
  }
}
@media screen and (min-device-width: 768px) {
  .blog-page .pagination a:hover {
    background-color: #9013fe;
    border-color: #9013fe;
    color: #fff;
  }
}
.blog-page .pagination li:last-child a {
  border-right: solid 2px #ebebeb;
}
.blog-page .pagination li:last-child a:hover {
  border-right: none;
}

.blog-inside .blog-item-section {
  margin-bottom: clamp(60px, 8vw, 90px);
}
.blog-inside .blog-item-section img {
  width: 100%;
  margin-bottom: clamp(80px, 12vw, 138px);
  border-radius: 6px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}
.blog-inside .blog-item-section p {
  margin-bottom: clamp(20px, 2.8vw, 30px);
  font-weight: 400;
  font-size: 20px;
  color: #696969;
  line-height: 1.3;
}
.blog-inside .blog-item-section .article-content-title {
  margin-top: clamp(32px, 4vw, 44px);
  margin-bottom: clamp(20px, 2.8vw, 30px);
  font-weight: 700;
  font-size: 24px;
  color: #696969;
  line-height: 1.2;
}

.video-holder {
  padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
  width: 100%;
  height: 0;
  overflow: hidden;
  position: relative;
}
.video-holder video {
  width: 100% !important;
  height: auto !important;
}
.video-holder iframe,
.video-holder embed,
.video-holder object {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.empty-blog {
  text-align: center;
}
.empty-blog h4.blog-message {
  font-family: Rubik;
  font-size: 19px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.26;
  letter-spacing: normal;
  color: #3f3f3f;
}
.empty-blog img {
  margin: auto;
}

/*************************************************************************
	Online Landing Page 
*************************************************************************/
@media screen and (min-width: 768px) {
  .mobile-phone {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .tablet-desktop {
    display: none !important;
  }
}
@media screen and (min-width: 1023px) {
  .mobile {
    display: none !important;
  }
}
@media screen and (max-width: 1023px) {
  .desktop {
    display: none !important;
  }
}
.section-title,
.section-intro {
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  color: #333333;
  text-align: center;
}

.section-title {
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  text-transform: none;
}
@media screen and (max-width: 768px) {
  .section-title {
    margin-bottom: 30px;
    font-size: 24px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .section-title {
    margin-bottom: 36px;
    font-size: 28px;
  }
}
@media screen and (min-width: 1201px) {
  .section-title {
    margin-bottom: 44px;
    font-size: 30px;
  }
}

.section-intro {
  font-weight: 400;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .section-intro {
    margin-bottom: 22px;
    font-size: 18px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .section-intro {
    margin-bottom: 34px;
    font-size: 20px;
  }
}
@media screen and (min-width: 1201px) {
  .section-intro {
    margin-bottom: 56px;
    font-size: 26px;
  }
}

.online-landing-page {
  font-weight: 400;
  color: #333333;
}
.online-landing-page section {
  padding-right: 20px;
  padding-left: 20px;
  width: 100%;
  display: block;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .online-landing-page section {
    padding-top: 44px;
    padding-bottom: 34px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .online-landing-page section {
    padding-top: 64px;
    padding-bottom: 44px;
  }
}
@media screen and (min-width: 1201px) {
  .online-landing-page section {
    padding-top: 84px;
    padding-bottom: 64px;
  }
}
.online-landing-page section.ol-hero-intro {
  padding: 0;
}
@media screen and (max-width: 1024px) {
  .online-landing-page section.ol-promo-codes .wrapper {
    padding-top: 44%;
    padding-bottom: 24px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .online-landing-page section.ol-promo-codes .wrapper {
    padding-top: 6vw;
    padding-bottom: 5vw;
  }
}
@media screen and (min-width: 1201px) {
  .online-landing-page section.ol-promo-codes .wrapper {
    padding-top: 58px;
    padding-bottom: 48px;
  }
}
@media screen and (max-width: 1024px) {
  .online-landing-page section.ol-upcoming-summer-camps {
    padding-bottom: 64px;
  }
}
.online-landing-page section.ol-promo-codes {
  padding-left: 0;
  padding-right: 0;
}
.online-landing-page .inner-small {
  max-width: 1054px;
}
@media screen and (max-width: 1024px) {
  .online-landing-page .half-box:not(:last-child) {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1025px) {
  .online-landing-page .half-box {
    width: 48%;
  }
}
.online-landing-page .btn, .online-landing-page .btn-6, .online-landing-page .btn-7 {
  font-size: clamp(14px, 2vw, 18px);
}
.online-landing-page .content-box, .online-landing-page .ol-testimonials .testimonial-box, .ol-testimonials .online-landing-page .testimonial-box, .online-landing-page .ol-online-courses .courses-box, .ol-online-courses .online-landing-page .courses-box, .online-landing-page .ol-upcoming-summer-camps .camp-box, .ol-upcoming-summer-camps .online-landing-page .camp-box, .online-landing-page .ol-upcoming-workshops .ol-workshop-box, .ol-upcoming-workshops .online-landing-page .ol-workshop-box {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
  position: relative;
}
.online-landing-page .junior {
  color: #F5A623;
}
.online-landing-page .middle {
  color: #A2D273;
}
.online-landing-page .senior {
  color: #719DE1;
}
.online-landing-page .teen-1 {
  color: #a92cfc;
}
.online-landing-page .teen-2 {
  color: #162ccb;
}
.online-landing-page .teen-3 {
  color: #005418;
}
.online-landing-page .on-landing-price {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: clamp(14px, 1.8vw, 16px);
  color: #02d589;
  line-height: 1;
  text-transform: uppercase;
}
.online-landing-page .on-landing-price::before {
  content: "";
  width: 18px;
  height: 16px;
  margin-right: 6px;
  display: inline-block;
  background-image: url("/img/online-landing/icons/icon_wallet.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.courses-box .online-landing-page .on-landing-price {
  justify-content: flex-end;
}
.online-landing-page .slick-dots {
  height: 15px;
  bottom: -28px;
}
.online-landing-page .slick-dots li,
.online-landing-page .slick-dots button {
  width: 15px;
  height: 15px;
}
.online-landing-page .slick-dots li:not(:last-child),
.online-landing-page .slick-dots button:not(:last-child) {
  margin-right: 15px;
}

.video-holder {
  padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
  width: 100%;
  height: 0;
  overflow: hidden;
  position: relative;
}

.video-holder video {
  width: 100% !important;
  height: auto !important;
}
.video-holder iframe,
.video-holder embed,
.video-holder object {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*********************************
	Hero
*********************************/
.ol-hero-intro img.mobile {
  width: 100%;
  max-height: 1110px;
  /* object-fit: cover;
  object-position: top; */
}
.ol-hero-intro .inner-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
}
@media screen and (max-width: 1023px) {
  .ol-hero-intro .inner-container {
    padding-bottom: 5%;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1024px) {
  .ol-hero-intro .inner-container {
    justify-content: center;
  }
}
@media screen and (max-width: 1200px) {
  .ol-hero-intro .section-title,
  .ol-hero-intro .section-intro,
  .ol-hero-intro .links {
    padding-right: 20px;
    padding-left: 20px;
  }
}
.ol-hero-intro .section-title,
.ol-hero-intro .section-intro {
  color: #fff;
}
@media screen and (min-width: 1023px) {
  .ol-hero-intro .section-title,
  .ol-hero-intro .section-intro {
    max-width: 46%;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }
}
.ol-hero-intro .links {
  width: 100%;
}
.ol-hero-intro .links .btn, .ol-hero-intro .links .btn-6, .ol-hero-intro .links .btn-7 {
  min-width: 132px;
  height: 42px;
  font-weight: 400;
  font-size: 14px;
  line-height: 40px;
}
@media screen and (max-width: 1023px) {
  .ol-hero-intro .links .btn, .ol-hero-intro .links .btn-6, .ol-hero-intro .links .btn-7 {
    width: 100%;
  }
  .ol-hero-intro .links .btn:not(:last-child), .ol-hero-intro .links .btn-6:not(:last-child), .ol-hero-intro .links .btn-7:not(:last-child) {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .ol-hero-intro .links .btn, .ol-hero-intro .links .btn-6, .ol-hero-intro .links .btn-7 {
    margin-right: 15px;
  }
}

/*********************************
	interactive
*********************************/
.ol-interactive ul li,
.ol-zoom ul li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.ol-interactive ul li::before,
.ol-zoom ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 4px;
  margin-right: 14px;
  display: inline-block;
  border-radius: 50%;
  background-color: #00c952;
  background-image: url("/img/online-landing/icons/icon_check.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60%;
}
.ol-interactive ul li p,
.ol-zoom ul li p {
  width: calc(100% - 32px);
  margin-bottom: 0;
  font-size: clamp(16px, 3vw, 20px);
}

.ol-interactive ul li:last-child::before {
  display: none;
}
.ol-interactive ul li:nth-last-child(2) {
  margin-bottom: clamp(24px, 4vw, 36px);
}

/*********************************
	oWorkshop info
*********************************/
.ol-workshop-info {
  background-color: #f5f0f0;
}
.ol-workshop-info img {
  border-radius: 14px;
}
.ol-workshop-info p {
  margin: 0;
  font-size: clamp(18px, 3vw, 22px);
  line-height: 1.4;
}
.ol-workshop-info p:not(:last-child) {
  margin-bottom: 20px;
}

/*********************************
	Zoom
*********************************/
.ol-zoom {
  overflow: hidden;
}
.ol-zoom::after {
  content: "";
  width: 1054px;
  height: 1px;
  background-color: #e1e1e1;
  margin: 0 auto;
  transform: translateX(-50%);
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
}
@media screen and (min-width: 1024px) {
  .ol-zoom .half-content > div:last-child {
    padding-top: 4%;
  }
}
@media screen and (max-width: 1023px) {
  .ol-zoom img {
    max-width: 80%;
  }
}
@media screen and (min-width: 1024px) {
  .ol-zoom img {
    max-width: 90%;
  }
}
.ol-zoom p {
  margin: 0;
  font-size: clamp(18px, 3vw, 22px);
  line-height: 1.4;
}
@media screen and (max-width: 1023px) {
  .ol-zoom p {
    text-align: center;
  }
}
.ol-zoom p:not(:last-child) {
  margin-bottom: 20px;
}

/*********************************
	Upcoming Workshops
*********************************/
.ol-upcoming-workshops .section-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.ol-upcoming-workshops .section-content > [class*=btn-] {
  margin: 14px auto 0;
}
.ol-upcoming-workshops .ol-workshop-box {
  min-height: 374px;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .ol-upcoming-workshops .ol-workshop-box {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .ol-upcoming-workshops .ol-workshop-box {
    width: calc(50% - 12px);
  }
}
.ol-upcoming-workshops .wb-cover {
  width: 100%;
  height: 178px;
  position: relative;
  z-index: 2;
}
.ol-upcoming-workshops .wb-cover img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
  z-index: 2;
}
.ol-upcoming-workshops .wb-cover .wb-tag {
  padding: 12px 17px 12px 55px;
  width: 100%;
  height: 42px;
  margin: 0;
  background-color: rgba(169, 44, 252, 0.8);
  background-image: url("/img/online-landing/icons/icon_laptop.svg");
  background-repeat: no-repeat;
  background-position: 17px center;
  background-size: 23px;
  font-weight: 500;
  font-size: clamp(13px, 2vw, 15px);
  color: #fff;
  line-height: 18px;
  text-align: left;
  vertical-align: middle;
  text-transform: uppercase;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
}
.ol-upcoming-workshops .wb-body {
  padding: 20px;
}
.ol-upcoming-workshops .wb-row {
  display: flex;
}
.ol-upcoming-workshops .wb-row:not(.lector-location-row) {
  margin-bottom: 20px;
  align-items: flex-start;
  justify-content: space-between;
}
.ol-upcoming-workshops .wb-row.lector-location-row {
  padding-top: 12px;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid #ebebeb;
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1;
}
.ol-upcoming-workshops .wb-row.lector-location-row .separtor {
  height: 12px;
  margin: 0 24px;
  color: #ebebeb;
}
.ol-upcoming-workshops .wb-row.lector-location-row .wb-lector,
.ol-upcoming-workshops .wb-row.lector-location-row .wb-hall,
.ol-upcoming-workshops .wb-row.lector-location-row time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.1;
}
.ol-upcoming-workshops .wb-row.lector-location-row .wb-lector::before,
.ol-upcoming-workshops .wb-row.lector-location-row .wb-hall::before,
.ol-upcoming-workshops .wb-row.lector-location-row time::before {
  content: "";
  width: 24px;
  height: 17px;
  margin-top: -1px;
  margin-right: 12px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}
.ol-upcoming-workshops .wb-row.lector-location-row .wb-lector::before {
  background-image: url("/img/online-landing/icons/mentor-icon.jpg");
}
.ol-upcoming-workshops .wb-row.lector-location-row .wb-hall::before {
  background-image: url("/img/online-landing/icons/icon_location-2.svg");
}
.ol-upcoming-workshops .wb-row.lector-location-row time::before {
  background-image: url("/img/online-landing/icons/icon_clock.svg");
}
.ol-upcoming-workshops .wb-row .wb-age span {
  line-height: 1.1;
}
.ol-upcoming-workshops .wb-row .wb-age span.age-wrapper {
  margin-bottom: 4px;
  display: block;
}
.ol-upcoming-workshops .wb-row .wb-age span.age-wrapper span {
  font-weight: 700;
  font-size: clamp(14px, 2vw, 18px);
  color: currentColor;
  margin-right: 5px;
}
.ol-upcoming-workshops .wb-row .wb-age span.workshop-level {
  display: block;
  font-size: clamp(12px, 2vw, 14px);
  color: #929292;
}
.ol-upcoming-workshops .wb-row h4 {
  padding: 0;
  margin: 0;
  font-weight: 500;
  font-size: clamp(18px, 3vw, 22px);
  color: #000;
  line-height: 1.3;
}

/*********************************
	Upcoming Summer Camps
*********************************/
.ol-upcoming-summer-camps .section-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .ol-upcoming-summer-camps .slider-camp-item {
    padding: 22px;
    width: 100%;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .ol-upcoming-summer-camps .slider-camp-item {
    padding: 22px 18px;
    width: calc(50% - 17px);
  }
}
@media screen and (min-width: 1201px) {
  .ol-upcoming-summer-camps .slider-camp-item {
    padding: 22px 26px;
    width: calc(33.33% - 34px);
  }
}
.ol-upcoming-summer-camps .slider-camp-item .camp-box {
  box-shadow: 0.7px 0.7px 21px 0 rgba(0, 0, 0, 0.14);
}
.ol-upcoming-summer-camps .camp-box {
  min-height: 435px;
  background-color: #fefefe;
  text-align: center;
}
.ol-upcoming-summer-camps .camp-box [class*=btn-] {
  margin-top: 10px;
}
.ol-upcoming-summer-camps .cmb-staring {
  padding: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #a92cfc;
  font-weight: 500;
  font-size: clamp(11px, 2vw, 13px);
  color: #fff;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.ol-upcoming-summer-camps .cmb-staring .separtor {
  margin: 0 10px;
}
.ol-upcoming-summer-camps .cmb-cover {
  height: 140px;
  background-color: #ebebeb;
}
.ol-upcoming-summer-camps .cmb-cover img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ol-upcoming-summer-camps .cmb-body {
  padding: 20px;
}
.ol-upcoming-summer-camps .age-levels {
  padding-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;
  font-size: 12px;
  text-align: center;
}
.ol-upcoming-summer-camps .age-levels span {
  display: block;
}
.ol-upcoming-summer-camps .age-levels span:first-child {
  margin-bottom: 2px;
  font-weight: 700;
  color: currentColor;
  line-height: 1.3;
}
.ol-upcoming-summer-camps .age-levels span:last-child {
  color: #929292;
  line-height: 1;
}
.ol-upcoming-summer-camps .cmb-title {
  padding-top: 14px;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: clamp(18px, 3vw, 20px);
  color: #000;
  line-height: 1.3;
  text-align: left;
}
.ol-upcoming-summer-camps .on-landing-price {
  margin-bottom: 24px;
}
.ol-upcoming-summer-camps .cmb-info {
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}
.ol-upcoming-summer-camps .cmb-info .cmb-time,
.ol-upcoming-summer-camps .cmb-info .cmb-online {
  padding-left: 28px;
  margin-bottom: 10px;
  display: block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 17px;
}
.ol-upcoming-summer-camps .cmb-info .cmb-time {
  background-image: url("/img/online-landing/icons/icon_clock.svg");
}
.ol-upcoming-summer-camps .cmb-info .cmb-online {
  background-image: url("/img/online-landing/icons/icon_location-2.svg");
  font-weight: 500;
  color: #a92cfc;
  text-transform: uppercase;
}
.ol-upcoming-summer-camps .cmb-level span:first-child {
  text-transform: capitalize;
}

.button-holder-bar {
  width: 100%;
  text-align: center;
}

/*********************************
	Promo Codes
*********************************/
.ol-promo-codes .wrapper {
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgba(254, 171, 36, 0.7);
  background-image: url("/img/online-landing/promo_codes.png");
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .wrapper {
    background-position: center 36px;
    background-size: 40%;
    text-align: center;
  }
}
@media screen and (min-width: 1025px) {
  .ol-promo-codes .wrapper {
    background-position: 90% center;
    background-size: 20%;
    text-align: left;
  }
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .section-title,
  .ol-promo-codes p {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
@media screen and (min-width: 1025px) {
  .ol-promo-codes .section-title,
  .ol-promo-codes p {
    max-width: 49%;
    text-align: left;
  }
}
.ol-promo-codes .section-title {
  margin-bottom: clamp(26px, 4vw, 32px);
}
@media screen and (min-width: 1025px) {
  .ol-promo-codes .section-title {
    margin-left: 0;
    margin-right: 0;
  }
}
.ol-promo-codes p {
  margin-bottom: clamp(20px, 3vw, 26px);
  font-size: clamp(16px, 2.2vw, 20px);
  color: #000;
  left: 1.4em;
}
.ol-promo-codes .promo-codes-list {
  width: 100%;
  text-align: center;
  background-color: #fff;
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .promo-codes-list {
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
    position: relative;
  }
}
@media screen and (min-width: 1025px) {
  .ol-promo-codes .promo-codes-list {
    padding: 32px 5%;
    max-width: 974px;
    min-height: 194px;
    display: none;
    border-radius: 8px;
    box-shadow: 1.7px 2.5px 18px 0 rgba(0, 0, 0, 0.17);
    transform: translate(-50%, -50%);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000000;
  }
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .promo-codes-list.show {
    max-height: 1600px;
    background-color: rgba(254, 171, 36, 0.2);
    transition: max-height 0.2s ease-in-out;
  }
}
@media screen and (min-width: 1025px) {
  .ol-promo-codes .promo-codes-list.show {
    display: block;
  }
}
.ol-promo-codes .promo-codes-list .close-modal {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  outline: none;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 6;
}
@media screen and (min-device-width: 1025px) {
  .ol-promo-codes .promo-codes-list .close-modal:hover::before, .ol-promo-codes .promo-codes-list .close-modal:hover::after {
    background-color: #858585;
  }
}
.ol-promo-codes .promo-codes-list .close-modal::before, .ol-promo-codes .promo-codes-list .close-modal::after {
  content: "";
  width: 22px;
  height: 2px;
  display: inline-block;
  transform-origin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .promo-codes-list .close-modal::before, .ol-promo-codes .promo-codes-list .close-modal::after {
    background-color: #feab24;
  }
}
@media screen and (min-width: 1025px) {
  .ol-promo-codes .promo-codes-list .close-modal::before, .ol-promo-codes .promo-codes-list .close-modal::after {
    background-color: #ebebeb;
  }
}
.ol-promo-codes .promo-codes-list .close-modal::before {
  transform: rotate(-45deg) translate(-50%, calc(-50% + 1px));
}
.ol-promo-codes .promo-codes-list .close-modal::after {
  transform: rotate(45deg) translate(-50%, calc(-50% + 1px));
}
.ol-promo-codes .promo-codes-list img {
  max-height: 142px;
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .promo-codes-list img {
    margin: 8% auto 48px;
  }
}
@media screen and (min-width: 1025px) {
  .ol-promo-codes .promo-codes-list img {
    margin: 0 auto 48px;
  }
}
.ol-promo-codes .promo-codes-list .code-lists {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .promo-codes-list .code-lists {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 1024px) {
  .ol-promo-codes .promo-codes-list .code-lists {
    padding-bottom: 8%;
  }
}
.ol-promo-codes .promo-codes-list .code-lists li {
  color: #333333;
  line-height: 1.1;
  text-align: center;
}
@media screen and (max-width: 414px) {
  .ol-promo-codes .promo-codes-list .code-lists li {
    width: 100%;
  }
}
@media screen and (min-width: 415px) {
  .ol-promo-codes .promo-codes-list .code-lists li {
    width: calc(33.33% - 16px);
  }
}
.ol-promo-codes .promo-codes-list .code-lists li span {
  margin-bottom: 4px;
  display: block;
  font-size: clamp(20px, 3vw, 24px);
}
.ol-promo-codes .promo-codes-list .code-lists li .code {
  padding: 8px;
  width: 100%;
  min-width: initial;
  margin: 0 auto 30px;
  display: block;
  outline: none;
  border: none;
  background-color: transparent;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 26px);
  color: #333333;
  line-height: 1;
  text-align: center;
}
.ol-promo-codes .promo-codes-list .code-lists li .code::selection {
  background-color: transparent;
}
.ol-promo-codes .promo-codes-list .code-lists li .code:focus {
  background-color: #feab24;
  color: #fff;
}
.ol-promo-codes .promo-codes-list .code-lists li .code:focus::selection {
  background-color: transparent;
}

/*********************************
	Online Courses
*********************************/
.ol-online-courses {
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .ol-online-courses .section-content {
    display: flex;
    flex-wrap: wrap;
    align-items: strech;
    justify-content: space-between;
  }
}
.ol-online-courses .section-content .button-holder {
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .ol-online-courses .section-content .button-holder {
    width: 100%;
  }
}
.ol-online-courses .courses-box {
  min-height: 170px;
  margin-bottom: 38px;
  text-align: left;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .ol-online-courses .courses-box {
    width: calc(50% - 12px);
  }
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }
}
.ol-online-courses .courses-box .cb-cover {
  width: 100%;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .ol-online-courses .courses-box .cb-cover {
    height: 60px;
  }
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-cover {
    max-width: 274px;
    min-height: 100%;
  }
}
.ol-online-courses .courses-box .cb-cover::after {
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-image: linear-gradient(to top, #a92cfc, #ffffff);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
@media screen and (max-width: 1024px) {
  .ol-online-courses .courses-box .cb-cover::after {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-cover::after {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}
.ol-online-courses .courses-box .cb-cover img {
  object-fit: cover;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .ol-online-courses .courses-box .cb-cover img {
    max-width: initial;
    width: 100%;
    height: 60px;
    object-position: top;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-cover img {
    max-width: 274px;
    width: auto;
    height: 100%;
    object-position: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}
.ol-online-courses .courses-box .cb-cover .tag {
  padding: 11px 12px 13px 0px;
  height: 32px;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
  top: 18px;
}
.ol-online-courses .courses-box .cb-cover .tag::before, .ol-online-courses .courses-box .cb-cover .tag::after {
  content: "";
  position: absolute;
  left: -10px;
  z-index: 0;
}
.ol-online-courses .courses-box .cb-cover .tag::before {
  width: 10px;
  height: 32px;
  background-color: currentColor;
  top: 0;
}
.ol-online-courses .courses-box .cb-cover .tag::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  bottom: -10px;
}
.ol-online-courses .courses-box .cb-cover .tag strong {
  font: 400px;
  color: #fff;
  line-height: 1;
}
.ol-online-courses .courses-box .cb-cover .tag-live {
  color: #00d689;
  background-color: currentColor;
}
.ol-online-courses .courses-box .cb-cover .tag-live::after {
  border-color: transparent #00ab68 transparent transparent;
}
@media screen and (max-width: 1024px) {
  .ol-online-courses .courses-box .cb-content {
    width: 100%;
  }
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-content {
    width: calc(100% - 274px);
  }
}
.ol-online-courses .courses-box .cb-content > [class^=cb-] {
  padding-left: 3%;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ol-online-courses .courses-box .cb-head {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: solid 1px #e9e9e9;
  background-color: #fdfdfd;
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-head {
    border-top-right-radius: 8px;
  }
}
.ol-online-courses .courses-box .cb-level-info {
  width: 80%;
}
.ol-online-courses .courses-box .level-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.ol-online-courses .courses-box .level-name strong {
  margin-right: 20px;
  display: block;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 20px);
  color: #666;
  line-height: 1.3;
}
.ol-online-courses .courses-box .tag-accelerated {
  padding: 6px 8px;
  border-radius: 13px;
  background-color: #bc56fd;
  background: linear-gradient(to bottom, #bd56fd 0%, #bd56fd 50%, #ab29fc 51%, #ab29fc 100%);
  font-weight: 600;
  font-size: 10px;
  color: #fff;
  line-height: 1;
}
.ol-online-courses .courses-box .tag-accelerated::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  background-image: url(../img/svg/icon-clock.svg);
  position: relative;
  bottom: -1px;
}
.ol-online-courses .courses-box .age-tag {
  font-weight: 500;
  font-size: clamp(13px, 1.5vw, 14px);
  line-height: 1;
}
.ol-online-courses .courses-box .cb-body {
  padding-top: 22px;
  padding-bottom: 22px;
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-body {
    border-bottom-right-radius: 8px;
  }
}
@media screen and (max-width: 1024px) {
  .ol-online-courses .courses-box .cb-info {
    width: 78%;
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-info {
    width: 74%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.ol-online-courses .courses-box .cb-info li {
  padding: 0 0 0 25px;
  background-repeat: no-repeat;
  background-position: left 2px;
  background-size: 14px 14px;
  text-transform: uppercase;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .ol-online-courses .courses-box .cb-info li {
    margin-bottom: 14px;
    margin-right: 2%;
  }
}
@media screen and (min-width: 1025px) {
  .ol-online-courses .courses-box .cb-info li {
    margin-right: 5%;
  }
}
.ol-online-courses .courses-box .cb-info li span {
  display: block;
  font-size: 12px;
  color: #bbb;
  line-height: 18px;
}
.ol-online-courses .courses-box .cb-info li p {
  margin: 0;
  font-size: 13px;
  color: #888;
  line-height: 16px;
}
.ol-online-courses .courses-box .cb-info .date {
  background-image: url("/img/online-landing/icons/icon_calendar.svg");
}
.ol-online-courses .courses-box .cb-info .time {
  background-image: url("/img/online-landing/icons/icon_clock-2.svg");
}

/*********************************
	Testimonials
*********************************/
@media screen and (min-width: 415px) {
  .ol-testimonials .section-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
@media screen and (min-width: 415px) and (max-width: 1024px) {
  .ol-testimonials .section-content {
    justify-content: space-between;
  }
}
@media screen and (min-width: 1025px) {
  .ol-testimonials .section-content {
    justify-content: center;
  }
}
.ol-testimonials .testimonial-box {
  height: 440px;
}
@media screen and (max-width: 414px) {
  .ol-testimonials .testimonial-box {
    width: 100%;
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 415px) and (max-width: 1024px) {
  .ol-testimonials .testimonial-box {
    width: calc(50% - 16px);
    margin-bottom: 30px;
  }
  .ol-testimonials .testimonial-box:nth-child(3n) {
    margin: 0 auto;
  }
}
@media screen and (min-width: 1025px) {
  .ol-testimonials .testimonial-box {
    width: calc(33.33% - 21.33px);
    height: 520px;
  }
  .ol-testimonials .testimonial-box:nth-child(2) {
    margin-right: 16px;
    margin-left: 32px;
  }
  .ol-testimonials .testimonial-box:nth-child(2):not(:last-child) {
    margin: 0 32px;
  }
}
.ol-testimonials .testimonial-box [class^=tb-] {
  width: 100%;
  text-align: center;
  position: relative;
}
.ol-testimonials .testimonial-box p {
  margin: 0;
}
.ol-testimonials .testimonial-box .tb-top {
  padding: 0 28px;
  height: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-image: url("/img/online-landing/icons/icon_quote.png"), linear-gradient(to top, #02d589, #01c0d7);
  background-repeat: no-repeat;
  background-position: center 22px, 0 0;
  background-size: 23px 17px, 100% 100%;
  z-index: 2;
}
.ol-testimonials .testimonial-box .tb-top p {
  font-size: clamp(14px, 2vw, 16px);
  color: #fff;
  line-height: 1.4;
  text-align: center;
}
.ol-testimonials .testimonial-box .tb-bottom {
  height: 44%;
  z-index: 4;
}
.ol-testimonials .testimonial-box .person-avatar {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 4px solid #fff;
  background-color: lightgray;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
}
.ol-testimonials .testimonial-box .person-avatar img {
  border-radius: 50%;
}
.ol-testimonials .testimonial-box .person-evoluation {
  padding-top: 82px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.ol-testimonials .testimonial-box .person-evoluation img {
  width: 22px;
  height: auto;
  margin: 0 6px;
  display: inline-block;
}
.ol-testimonials .testimonial-box .person-name {
  margin: 0 0 5px;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 20px);
  color: #000;
  line-height: 1;
}
.ol-testimonials .testimonial-box .person-title {
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1;
}

/*********************************
	Free Demos
*********************************/
.ol-free-demos {
  text-align: center;
}
.ol-free-demos p {
  max-width: 1054px;
  margin: 0 auto clamp(36px, 5vw, 54px);
  font-size: clamp(20px, 3vw, 25px);
  line-height: 1.4;
}
@media screen and (min-width: 1025px) {
  .ol-free-demos p {
    text-align: left;
  }
}

@media screen and (min-width: 1025px) {
  .modal-drappery {
    height: auto;
    min-height: 100vh;
  }
  .modal-drappery body {
    height: auto;
    min-height: 100vh;
  }
  .modal-drappery body::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(183, 183, 183, 0.7);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
  }
}

#page.dashboard {
  background: #fcfcfc;
}

#ua-tab.settings .manage-profile {
  max-width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
#ua-tab.settings .manage-profile .personal-settings, #ua-tab.settings .manage-profile .notification-settings {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  background: #fff;
  -webkit-flex: 1 0 50%;
  -moz-flex: 1 0 50%;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  margin: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.settings .manage-profile .personal-settings .action-buttons-holder, #ua-tab.settings .manage-profile .notification-settings .action-buttons-holder {
  margin-bottom: 0;
}
#ua-tab.settings .manage-profile .notification-settings {
  margin: 0 0 0 3%;
}
#ua-tab.settings .manage-profile .notification-settings form {
  height: 100%;
}
#ua-tab.settings .manage-profile .notification-settings form > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  height: 100%;
}
#ua-tab.settings .manage-profile .notification-settings form > div .notification-list li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 0 10px;
}
#ua-tab.settings .manage-profile .notification-settings form > div .notification-list li p {
  color: #999;
  margin: 20px 0;
}
#ua-tab.settings .manage-profile .notification-settings form > div .action-buttons-holder {
  margin-top: auto;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #ua-tab.settings .manage-profile {
    display: block;
  }
  #ua-tab.settings .manage-profile .notification-settings {
    margin: 40px 0 0;
  }
}
#page.add-student-to-group {
  background: #ac94e9 url(../img/home/party-pattern.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#page.add-student-to-group:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ac94e9;
  content: "";
  opacity: 0.4;
}
#page.add-student-to-group .page-container {
  position: relative;
  padding: 80px 20px;
  z-index: 10;
}
#page.add-student-to-group .group-summary {
  position: relative;
  max-width: 550px;
  margin: 40px auto 0;
  background: #fcfcfc;
}
#page.add-student-to-group .group-summary .group-segment {
  padding: 20px 20px 15px;
  text-align: center;
}
#page.add-student-to-group .group-summary .group-segment.junior {
  background: #ffac24;
}
#page.add-student-to-group .group-summary .group-segment.middle {
  background: #00d589;
}
#page.add-student-to-group .group-summary .group-segment.senior {
  background: #00c0d6;
}
#page.add-student-to-group .group-summary .group-segment.demo {
  background: #8441e2;
}
#page.add-student-to-group .group-summary .group-segment strong {
  display: block;
  color: #fff;
  margin: 0 0 4px;
  font: normal 400 28px/28px "Fredoka One", Arial, sans-serif;
  text-transform: uppercase;
}
#page.add-student-to-group .group-summary .group-segment span {
  color: #fff;
}
#page.add-student-to-group .group-summary .group-information {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  border-bottom: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
}
#page.add-student-to-group .group-summary .group-information > div {
  -webkit-flex: 1 0 50%;
  -moz-flex: 1 0 50%;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  border-left: 1px solid #e7e7e7;
  padding: 20px;
  text-align: center;
}
#page.add-student-to-group .group-summary .group-information > div.starting-date strong {
  display: inline-block;
  font-size: 20px;
}
#page.add-student-to-group .group-summary .group-information > div.time strong {
  display: inline-block;
  font-size: 20px;
}
#page.add-student-to-group .group-summary .group-information > div.location {
  border-top: 1px solid #e7e7e7;
}
#page.add-student-to-group .group-summary .group-information > div.location > div {
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#page.add-student-to-group .group-summary .group-information > div.location img {
  margin: 0 10px 0 0;
  width: 15px;
  height: 20px;
}
#page.add-student-to-group .group-summary .group-information > div > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
}
#page.add-student-to-group .group-summary .group-information > div > div span {
  font-size: 14px;
  color: #999;
  line-height: 20px;
}
#page.add-student-to-group .basic-form {
  margin-top: 0;
}
#page.add-student-to-group .basic-form .kid-list-full li {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
  padding: 30px 20px;
  transition: border 0.1s ease;
  -moz-transition: border 0.1s ease;
  -webkit-transition: border 0.1s ease;
  -o-transition: border 0.1s ease;
}
#page.add-student-to-group .basic-form .kid-list-full li:hover {
  border: 1px solid #cecece;
}
#page.add-student-to-group .basic-form .kid-list-full li label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
#page.add-student-to-group .basic-form .kid-list-full li label div {
  position: absolute;
  top: 50%;
  left: 65px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#page.add-student-to-group .basic-form .kid-list-full li label div strong {
  font-size: 20px;
  color: #333;
  font-weight: 500;
}
#page.add-student-to-group .basic-form .kid-list-full li label div span {
  display: block;
  font-size: 14px;
  color: #aaa;
  line-height: 18px;
}
#page.add-student-to-group .basic-form .default-modules {
  padding: 20px;
}
#page.add-student-to-group .basic-form .default-modules > span {
  display: block;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  margin: 0 0 6px;
}
#page.add-student-to-group .basic-form .default-modules ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#page.add-student-to-group .basic-form .default-modules ul li img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
#page.add-student-to-group .basic-form .default-modules ul li span {
  font-size: 14px;
  line-height: 20px;
}
#page.add-student-to-group .basic-form .input-discount input {
  width: auto;
  max-width: 250px;
}
#page.add-student-to-group .basic-form .input-discount .std-button {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  height: 30px;
  font-size: 11px;
  line-height: 15px;
  padding: 0 10px;
}
#page.add-student-to-group .basic-form .action-buttons-holder {
  margin-bottom: 0;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #page.add-student-to-group .group-summary {
    max-width: 100%;
  }
}
@media screen and (max-width: 468px), screen and (max-device-width: 468px) {
  #page.add-student-to-group .group-summary .group-information {
    display: block;
  }
  #page.add-student-to-group .group-summary .group-information > div.time {
    border-top: 1px solid #e7e7e7;
  }
  #page.add-student-to-group .group-summary .group-information > div.location img {
    display: none;
  }
}
#ua-tab.profile .notifications-center .alert {
  margin: 0 0 60px;
}
#ua-tab.profile .kids-list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
#ua-tab.profile .kids-list.no-kids {
  -webkit-justify-content: center;
  justify-content: center;
}
#ua-tab.profile .kids-list > li {
  position: relative;
  -webkit-flex: 1 0 31.33%;
  -moz-flex: 1 0 31.33%;
  -ms-flex: 1 0 31.33%;
  flex: 1 0 31.33%;
  max-width: 400px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  margin: 50px 0 0 3%;
  padding-top: 45px;
}
#ua-tab.profile .kids-list > li:first-of-type {
  margin-left: 0;
}
#ua-tab.profile .kids-list > li:nth-of-type(3n+1) {
  margin-left: 0;
}
#ua-tab.profile .kids-list > li.new-kid {
  border: 3px dashed #e0e0e0;
  transition: border 0.1s ease;
  -moz-transition: border 0.1s ease;
  -webkit-transition: border 0.1s ease;
  -o-transition: border 0.1s ease;
  min-height: 400px;
}
#ua-tab.profile .kids-list > li.new-kid:hover {
  border: 3px dashed #c7c7c7;
}
#ua-tab.profile .kids-list > li.new-kid .add-new-kid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#ua-tab.profile .kids-list > li.new-kid .add-new-kid > div {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding: 100px 0 0;
  text-transform: uppercase;
  color: #dbdbdb;
  font-size: 24px;
  font-weight: 700;
}
#ua-tab.profile .kids-list > li.new-kid .add-new-kid > div:before {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.06);
  content: "+";
  font-weight: 700;
  font-size: 72px;
  line-height: 75px;
}
#ua-tab.profile .kids-list > li > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  height: 100%;
}
#ua-tab.profile .kids-list > li > div .kid-segment {
  position: absolute;
  top: -18px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 6px 20px;
  color: #fff;
  font: normal 400 18px/24px "Fredoka One", Arial, sans-serif;
  text-transform: uppercase;
}
#ua-tab.profile .kids-list > li > div .kid-segment.junior {
  background: #ffac24;
}
#ua-tab.profile .kids-list > li > div .kid-segment.middle {
  background: #00d589;
}
#ua-tab.profile .kids-list > li > div .kid-segment.senior {
  background: #00c0d6;
}
#ua-tab.profile .kids-list > li > div .kid-segment.demo {
  background: #8441e2;
}
#ua-tab.profile .kids-list > li > div .kid-avatar img {
  display: block;
  margin: 0 auto 20px;
  border-radius: 50%;
}
#ua-tab.profile .kids-list > li > div .kid-name {
  display: block;
  font: normal 500 22px/36px Rubik, Arial, sans-serif;
  text-align: center;
  color: #333;
}
#ua-tab.profile .kids-list > li > div .kid-age {
  display: block;
  font-size: 16px;
  color: #c0c0c0;
  text-align: center;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info {
  margin: 40px 0 0;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li {
  position: relative;
  border-top: 1px solid #f2f2f2;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 20px;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li.no-group {
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li.no-group .std-button {
  margin: 15px 0 0;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li span.more {
  border-bottom: 1px dotted #ccc;
  cursor: help;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li span.more:hover ~ div {
  display: block;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li div {
  display: none;
  position: absolute;
  top: -35px;
  right: 20px;
  padding: 10px 20px;
  min-width: 200px;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  font-size: 13px;
  white-space: nowrap;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li div:before {
  position: absolute;
  bottom: -11px;
  right: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ccc;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li div:after {
  position: absolute;
  bottom: -10px;
  right: 30px;
  width: 0;
  height: 0;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}
#ua-tab.profile .kids-list > li > div .kid-additional-info li .std-button {
  height: 30px;
  padding: 0 10px;
}
#ua-tab.profile .kids-list > li > div .kid-actions {
  margin-top: auto;
  border-top: 1px solid #f2f2f2;
  padding: 20px;
  text-align: center;
}

.add-new-kid-modal, .update-kid-modal, .delete-kid-modal, .redeem-points-popup {
  display: none;
}

#page.dashboard .ua-tabs ul {
  flex-flow: wrap;
}
#page.dashboard .ua-tabs ul li {
  border-left: 1px solid #e6e6e6;
}

@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
  #ua-tab.profile .kids-list > li {
    -webkit-flex: 0 1 48.5%;
    -moz-flex: 0 1 48.5%;
    -ms-flex: 0 1 48.5%;
    flex: 0 1 48.5%;
  }
  #ua-tab.profile .kids-list > li:nth-of-type(3n) {
    margin-left: 0;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #ua-tab.profile .kids-list > li {
    -webkit-flex: 0 1 100%;
    -moz-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    margin: 50px 0 0;
    padding-top: 55px;
  }
  #ua-tab.profile .kids-list > li > div .kid-segment {
    top: -10px;
  }
}
#ua-tab.payments .pending-payments {
  margin: 0 0 60px;
}
#ua-tab.payments .pending-payments .alert {
  display: block;
  margin: 20px 0 0;
  padding: 10px 20px;
}
#ua-tab.payments .pending-payments .alert:first-of-type {
  margin: 0;
}
#ua-tab.payments .pending-payments .alert ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
#ua-tab.payments .pending-payments .alert ul li strong {
  font-size: 18px;
  font-weight: 500;
}
#ua-tab.payments .pending-payments .alert ul li:nth-of-type(1) {
  -webkit-flex: 5 0 50%;
  -moz-flex: 5 0 50%;
  -ms-flex: 5 0 50%;
  flex: 5 0 50%;
}
#ua-tab.payments .pending-payments .alert ul li:nth-of-type(2) {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 3 0 30%;
  -moz-flex: 3 0 30%;
  -ms-flex: 3 0 30%;
  flex: 3 0 30%;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
#ua-tab.payments .pending-payments .alert ul li:nth-of-type(3) {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 2 0 20%;
  -moz-flex: 2 0 20%;
  -ms-flex: 2 0 20%;
  flex: 2 0 20%;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
#ua-tab.payments .payments-history .filter ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
#ua-tab.payments .payments-history .filter ul li {
  -webkit-flex: 1 0 22.75%;
  -moz-flex: 1 0 22.75%;
  -ms-flex: 1 0 22.75%;
  flex: 1 0 22.75%;
  margin: 0 0 0 3%;
}
#ua-tab.payments .payments-history .filter ul li:first-of-type {
  margin: 0;
}
#ua-tab.payments .payments-history .filter ul li label {
  display: block;
  margin: 0 0 10px;
}
#ua-tab.payments .payments-history .filter ul li .jcf-select {
  border: 1px solid #e4e4e4;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.payments .payments-history .filter ul li .jcf-select .jcf-reset-appearance {
  z-index: 1;
  cursor: pointer;
}
#ua-tab.payments .payments-history .filter ul li .jcf-select .jcf-select-text {
  margin: 0 0 0 20px;
  color: #666;
}
#ua-tab.payments .payments-history .filter ul li .jcf-select .jcf-select-opener {
  right: 20px;
}
#ua-tab.payments .payments-history .payments-list {
  width: 100%;
  margin: 30px 0 0;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-collapse: collapse;
}
#ua-tab.payments .payments-history .payments-list tr th {
  font-weight: 500;
  font-size: 16px;
  border: 1px solid #e7e7e7;
  background: #f4f4f4;
  padding: 10px 20px 8px;
  line-height: 28px;
}
#ua-tab.payments .payments-history .payments-list tr td {
  font-size: 14px;
  border: 1px solid #e7e7e7;
  padding: 10px 20px 8px;
}
#ua-tab.payments .payments-history .payments-list tr td.did-not {
  color: #aaa;
}
#ua-tab.payments .payments-history .payments-list tr td.complete {
  color: #00d589;
}
#ua-tab.payments .payments-history .payments-list tr td.confirm {
  color: #d67b3c;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #ua-tab.payments .pending-payments .alert ul {
    display: block;
    text-align: center;
  }
  #ua-tab.payments .pending-payments .alert ul li {
    display: block !important;
  }
  #ua-tab.payments .pending-payments .alert ul li:nth-of-type(2) {
    margin: 5px 0 10px;
  }
}
#ua-page.make-payment .basic-form {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-page.make-payment .basic-form .kid-list-full li {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
  padding: 30px 20px;
  transition: border 0.1s ease;
  -moz-transition: border 0.1s ease;
  -webkit-transition: border 0.1s ease;
  -o-transition: border 0.1s ease;
}
#ua-page.make-payment .basic-form .kid-list-full li:hover {
  border: 1px solid #cecece;
}
#ua-page.make-payment .basic-form .kid-list-full li label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
#ua-page.make-payment .basic-form .kid-list-full li label div {
  position: absolute;
  top: 50%;
  left: 65px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#ua-page.make-payment .basic-form .kid-list-full li label div strong {
  font-size: 20px;
  color: #333;
  font-weight: 500;
}
#ua-page.make-payment .basic-form .kid-list-full li label div span {
  display: block;
  font-size: 14px;
  color: #aaa;
  line-height: 18px;
}
#ua-page.make-payment .basic-form .default-modules {
  padding: 20px;
}
#ua-page.make-payment .basic-form .default-modules > span {
  display: block;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  margin: 0 0 6px;
}
#ua-page.make-payment .basic-form .default-modules ul li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#ua-page.make-payment .basic-form .default-modules ul li img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
#ua-page.make-payment .basic-form .default-modules ul li span {
  font-size: 14px;
  line-height: 20px;
}
#ua-page.make-payment .basic-form .input-discount input {
  width: auto;
  max-width: 250px;
}
#ua-page.make-payment .basic-form .input-discount .std-button {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  height: 30px;
  font-size: 11px;
  line-height: 15px;
  padding: 0 10px;
}
#ua-page.make-payment .basic-form .action-buttons-holder {
  margin-bottom: 0;
}

.after-message.success-payment {
  padding-top: 60px;
  text-align: center;
}
.after-message.success-payment .basic-form {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.after-message.success-payment .basic-form img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.after-message.success-payment .basic-form .payment-message-heading {
  display: block;
  font-size: 28px;
  font-weight: 500;
  margin: 20px 0 30px;
}
.after-message.success-payment .basic-form .payment-message p {
  margin: 0 0 20px;
}

#ua-tab.feedback .feedback-per-module {
  width: 100%;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-collapse: collapse;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.feedback .feedback-per-module .container-row {
  border-top: 1px solid #e7e7e7;
}
#ua-tab.feedback .feedback-per-module .container-row:first-of-type {
  border: none;
}
#ua-tab.feedback .feedback-per-module .container-row .module-row {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.feedback .feedback-per-module .container-row .module-row:after {
  position: absolute;
  top: 50%;
  right: 20px;
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: #fdfdfd url(../img/svg/icon-arrow-down.svg) no-repeat center center;
  -webkit-background-size: 14px;
  -moz-background-size: 14px;
  -o-background-size: 14px;
  background-size: 14px;
  -webkit-transform: rotate(-90deg) translate(0, -50%);
  -moz-transform: rotate(-90deg) translate(0, -50%);
  -ms-transform: rotate(-90deg) translate(0, -50%);
  -o-transform: rotate(-90deg) translate(0, -50%);
  transform: rotate(-90deg) translate(0, -50%);
  -ms-transform-origin: top;
  -webkit-transform-origin: top;
  transform-origin: top;
  transition: transform 0.1s ease;
  -moz-transition: transform 0.1s ease;
  -webkit-transition: transform 0.1s ease;
  -o-transition: transform 0.1s ease;
}
#ua-tab.feedback .feedback-per-module .container-row .module-row:hover {
  background: #f9f9f9;
}
#ua-tab.feedback .feedback-per-module .container-row .module-row.opened {
  box-shadow: none;
  background: #f9f9f9;
}
#ua-tab.feedback .feedback-per-module .container-row .module-row.opened:after {
  -webkit-transform: rotate(0) translate(0, -50%);
  -moz-transform: rotate(0) translate(0, -50%);
  -ms-transform: rotate(0) translate(0, -50%);
  -o-transform: rotate(0) translate(0, -50%);
  transform: rotate(0) translate(0, -50%);
}
#ua-tab.feedback .feedback-per-module .container-row .module-row .td {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  color: #aaa;
  font-size: 14px;
  padding: 12px 20px 10px;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row {
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row.opened {
  background: #f9f9f9;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .td {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  padding: 10px 20px 8px;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .td > * {
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .module-resume {
  padding: 20px;
  border-top: 1px solid #e7e7e7;
  background: #fff;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .module-resume > strong {
  display: block;
  font-weight: 500;
  margin: 0 0 20px;
  font-size: 22px;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .module-resume p {
  margin: 20px 0 0;
  font-size: 14px;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .module-resume p a {
  color: #00c0d6;
  text-decoration: underline;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .module-resume p a:hover {
  text-decoration: none;
}
#ua-tab.feedback .feedback-per-module .container-row .submodule-row .module-resume p:first-of-type {
  margin: 0;
}
#ua-tab.feedback .feedback-per-module .container-row .td {
  color: #aaa;
  font-size: 14px;
}
#ua-tab.feedback .feedback-per-module .container-row .td strong {
  font-weight: 500;
  font-size: 16px;
  color: #666;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin: 3px 5px 0 0;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-20 .star:nth-of-type(1) {
  background: url(../img/svg/icon-star-red.svg) no-repeat center center;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-40 .star:nth-of-type(1), #ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-40 .star:nth-of-type(2) {
  background: url(../img/svg/icon-star-red.svg) no-repeat center center;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-60 .star:nth-of-type(1), #ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-60 .star:nth-of-type(2), #ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-60 .star:nth-of-type(3) {
  background: url(../img/svg/icon-star-yellow.svg) no-repeat center center;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(1), #ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(2), #ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(3), #ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(4) {
  background: url(../img/svg/icon-star-yellow.svg) no-repeat center center;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank.per-100 .star {
  background: url(../img/svg/icon-star-green.svg) no-repeat center center;
}
#ua-tab.feedback .feedback-per-module .container-row .td .student-rating .rank .star {
  width: 16px;
  height: 16px;
  margin: 0 1px;
  background: url(../img/svg/icon-star-grey.svg) no-repeat center center;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #ua-tab.feedback .feedback-per-module .container-row .module-row {
    display: block;
  }
}
#ua-tab.redo-classes .redo-classes-per-module {
  width: 100%;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-collapse: collapse;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.redo-classes .redo-classes-per-module .container-row {
  border-top: 1px solid #e7e7e7;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row:first-of-type {
  border: none;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .module-row {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .module-row:after {
  position: absolute;
  top: 50%;
  right: 20px;
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: #fdfdfd url(../img/svg/icon-arrow-down.svg) no-repeat center center;
  -webkit-background-size: 14px;
  -moz-background-size: 14px;
  -o-background-size: 14px;
  background-size: 14px;
  -webkit-transform: rotate(-90deg) translate(0, -50%);
  -moz-transform: rotate(-90deg) translate(0, -50%);
  -ms-transform: rotate(-90deg) translate(0, -50%);
  -o-transform: rotate(-90deg) translate(0, -50%);
  transform: rotate(-90deg) translate(0, -50%);
  -ms-transform-origin: top;
  -webkit-transform-origin: top;
  transform-origin: top;
  transition: transform 0.1s ease;
  -moz-transition: transform 0.1s ease;
  -webkit-transition: transform 0.1s ease;
  -o-transition: transform 0.1s ease;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .module-row:hover {
  background: #f9f9f9;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .module-row.opened {
  box-shadow: none;
  background: #f9f9f9;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .module-row.opened:after {
  -webkit-transform: rotate(0) translate(0, -50%);
  -moz-transform: rotate(0) translate(0, -50%);
  -ms-transform: rotate(0) translate(0, -50%);
  -o-transform: rotate(0) translate(0, -50%);
  transform: rotate(0) translate(0, -50%);
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .module-row .td {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  color: #aaa;
  font-size: 14px;
  padding: 12px 20px 10px;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row {
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row.opened {
  background: #f9f9f9;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .td {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  padding: 10px 20px 8px;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .td > * {
  -webkit-flex: 1 0 0;
  -moz-flex: 1 0 0;
  -ms-flex: 1 0 0;
  flex: 1 0 0;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .module-resume {
  padding: 20px;
  border-top: 1px solid #e7e7e7;
  background: #fff;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .module-resume > strong {
  display: block;
  font-weight: 500;
  margin: 0 0 20px;
  font-size: 22px;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .module-resume p {
  margin: 20px 0 0;
  font-size: 14px;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .module-resume p a {
  color: #00c0d6;
  text-decoration: underline;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .module-resume p a:hover {
  text-decoration: none;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .submodule-row .module-resume p:first-of-type {
  margin: 0;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td {
  color: #aaa;
  font-size: 14px;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td strong {
  font-weight: 500;
  font-size: 16px;
  color: #666;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin: 3px 5px 0 0;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-20 .star:nth-of-type(1) {
  background: url(../img/svg/icon-star-red.svg) no-repeat center center;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-40 .star:nth-of-type(1), #ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-40 .star:nth-of-type(2) {
  background: url(../img/svg/icon-star-red.svg) no-repeat center center;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-60 .star:nth-of-type(1), #ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-60 .star:nth-of-type(2), #ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-60 .star:nth-of-type(3) {
  background: url(../img/svg/icon-star-yellow.svg) no-repeat center center;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(1), #ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(2), #ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(3), #ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-80 .star:nth-of-type(4) {
  background: url(../img/svg/icon-star-yellow.svg) no-repeat center center;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank.per-100 .star {
  background: url(../img/svg/icon-star-green.svg) no-repeat center center;
}
#ua-tab.redo-classes .redo-classes-per-module .container-row .td .student-rating .rank .star {
  width: 16px;
  height: 16px;
  margin: 0 1px;
  background: url(../img/svg/icon-star-grey.svg) no-repeat center center;
  -webkit-background-size: 16px;
  -moz-background-size: 16px;
  -o-background-size: 16px;
  background-size: 16px;
}
#ua-tab.redo-classes .basic-form .form-row:first-of-type {
  height: 100%;
  min-height: 48px;
}
#ua-tab.redo-classes .basic-form .form-row .input-error-message {
  display: none;
}
#ua-tab.redo-classes .basic-form .form-row:first-of-type .input-ticket {
  height: 100%;
  min-height: 48px;
}
#ua-tab.redo-classes .basic-form .form-row:first-of-type .input-ticket .jcf-select {
  height: 100%;
  min-height: 48px;
  line-height: normal;
}
#ua-tab.redo-classes .basic-form .form-row:first-of-type .input-ticket .jcf-select .jcf-select-text span {
  white-space: normal;
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #ua-tab.redo-classes .redo-classes-per-module .container-row .module-row {
    display: block;
  }
  #ua-tab.redo-class .redo-classes-per-module .container-row .module-row {
    display: block;
  }
}
.jcf-checkbox, .jcf-radio {
  position: relative;
  overflow: hidden;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #ddd;
  height: 26px;
  width: 26px;
  margin: 0 10px 0 0;
}
.jcf-checkbox + label, .jcf-radio + label {
  cursor: pointer;
  margin: 0;
}

.jcf-checkbox.jcf-checked span {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../../img/svg/icon-check.svg) no-repeat center center;
  -webkit-background-size: 14px 14px;
  -moz-background-size: 14px 14px;
  -o-background-size: 14px 14px;
  background-size: 14px 14px;
}
.jcf-checkbox input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}

.jcf-radio {
  border-radius: 50%;
}
.jcf-radio.jcf-checked {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.jcf-radio.jcf-checked span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7dd070;
}
.jcf-radio input[type=radio] {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}

.jcf-select {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  overflow: hidden;
  background: #fff;
  height: 48px;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  background: url(../../img/svg/icon-arrow-down.svg) no-repeat;
  background-position: calc(100% - 15px) center;
  -webkit-background-size: 12px 8px;
  -moz-background-size: 12px 8px;
  -o-background-size: 12px 8px;
  background-size: 12px 8px;
}
.jcf-select + label {
  cursor: pointer;
  margin: 0;
}
.jcf-select .jcf-select-opener {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 10px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.jcf-reset-appearance {
  top: 0;
  left: 0;
  cursor: pointer;
}

.datepicker-container {
  z-index: 9001 !important;
} /* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: auto;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-slide > div {
  height: 100%;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*# sourceMappingURL=main.css.map */