@import url(../css/circle.player.css);
@import url("https://fonts.googleapis.com/css?family=Boogaloo");

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

html {
  height: 100%;
}

html,
button,
input,
select,
textarea {
  color: #222;
}

body {
  margin: 0px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  background: #fff;
  box-sizing: border-box;
  transition: all 0.6s ease-out 0s;
  -moz-transition: all 0.6s ease-out 0s;
  -webkit-transition: all 0.6s ease-out 0s;
  -o-transition: all 0.6s ease-out 0s;
}

::-moz-selection {
  background: #fe57a1;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #fe57a1;
  color: #fff;
  text-shadow: none;
}

a {
  text-decoration: none;
  color: #F50093;
  cursor: pointer;
}

a:focus {
  outline: none;
}

a:hover,
a:active {
  outline: 0;
}

b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

ul {
  margin: 0;
  padding: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  margin: 1em 0;
  padding: 0;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

small {
  font-size: 85%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

dd {
  margin: 0 0 0 40px;
}

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

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

form {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  margin-bottom: 20px;
  column-gap: 17px;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

label {
  cursor: pointer;
}

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
  white-space: normal;
}

.relative {
  position: relative;
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:invalid,
textarea:invalid {
  background-color: #f0dddd;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
}

.trans {
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0;
}

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

/*===================  number type ===============*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
}

input[type=number]::-moz-inner-spin-button,
input[type=number]::-moz-outer-spin-button {
  -moz-appearance: none;
  margin: 0;
}

/*===================  number type end ===============*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999999999;
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../images/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

.clear {
  clear: both;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

@font-face {
  font-family: 'fontawesome';
  src: url("../font/fontawesome-webfont.eot?v=4.2.0");
  src: url("../font/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"), url("../font/fontawesome-webfont.woff?v=4.2.0") format("woff"), url("../font/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), url("../font/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: auto;
}

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

#header {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #fdd318;
  z-index: 1001;
  box-sizing: border-box;
  background: none;
  top: 0px;
  z-index: 1000;
}

@media screen and (max-height: 420px) {
  #header {
    height: 0;
    overflow: hidden;
  }
}

.logo {
  width: 230px;
  height: auto;
  float: left;
  margin: 15px 0px;
}

.logo img {
  width: 100%;
  height: auto;
}

.nav-box {
  width: auto;
  display: table;
  float: right;
  margin-top: 30px;
}

.nav-box nav {
  float: left;
}

.nav-box ul li {
  display: inline-block;
  float: left;
  margin: 0px 15px;
  height: 28px;
}

.nav-box ul li:hover {
  border-bottom: 2px solid #fdd318;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.nav-box ul li a {
  color: #4e4e4e;
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.nav-box ul li a.active {
  border-bottom: 2px solid #fdd318;
  padding-bottom: 10px;
  box-sizing: border-box;
}

@media screen and (max-width: 760px) {
  .nav-box ul li {
    height: 33px !important;
  }

  .nav-box ul li:hover {
    border-bottom: 0px;
  }

  .nav-box ul li a {
    line-height: 33px !important;
    padding-left: 1px;
  }

  .nav-box ul li a:hover {
    color: #fdd318;
  }
}

.headroom {
  transition: transform 350ms linear;
}

.srchform {
  display: none;
}

.headroom {
  transition: transform 350ms linear;
}

.headroom--pinned {
  transform: translateY(0%);
}

.headroom--unpinned {
  transform: translateY(-250%);
  transition: all 0.6s ease-out 0s;
  -moz-transition: all 0.6s ease-out 0s;
  -webkit-transition: all 0.6s ease-out 0s;
  -o-transition: all 0.6s ease-out 0s;
}

.container-outer {
  background: #fff;
  width: 100%;
  height: auto;
}

.small_hdr {
  position: fixed;
  z-index: 10;
  background: #fff;
}

.small {
  position: fixed;
  z-index: 10;
  background: #fff;
}

.search_icon {
  cursor: pointer;
  background: url(../images/search.png);
  width: 23px;
  height: 23px;
  background-position: 0px 0px;
  float: left;
}

.search {
  width: 100%;
  height: auto;
  background: rgba(255, 240, 176, 0.43);
  top: 82px;
  display: none;
  position: absolute;
  z-index: 10;
}

.search .srch-outer {
  display: table;
  float: right;
  width: auto;
  height: auto;
  position: relative;
  margin: 15px 0px;
}

.search .srch-outer .typ_section {
  width: 300px;
  height: 35px;
  border-radius: 5px;
  background: #fff;
  border: none;
  padding: 0px 25px 0px 15px;
  outline: none;
}

.search .srch-outer .sit-srch {
  position: absolute;
  top: 6px;
  right: 8px;
  background: url(../images/search.png) no-repeat;
  width: 23px;
  height: 23px;
  border: none;
  outline: none;
}

.search .close1 {
  background-position: 0px -29px;
}

@media screen and (max-width: 760px) {
  .res_search {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 15px;
  }

  .res_search .search-field {
    width: 100%;
    height: 34px;
    background: none;
    border: 1px solid #ececec;
    padding: 0px 15px;
    font-size: 13px;
  }

  .res_search srch-icn {
    position: absolute;
    top: 5px;
    right: 8px;
    border: none;
    background: url(../images/search.png) no-repeat;
    width: 23px;
    height: 23px;
  }
}

.img-responsive {
  max-width: 100%;
}

@media screen and (max-width: 700px) {
  .for-large-device {
    display: none;
  }
}

@media screen and (min-width: 700px) {
  .for-small-device {
    display: none;
  }
}

.btn {
  padding: 12px;
}

.btn.right {
  float: right;
}

.success-message {
  padding: 50px !important;
}

@media screen and (max-width: 799px) {
  .success-message {
    padding: 50px 0 !important;
  }
}

.success-message h3 {
  padding-bottom: 15px;
}

.visible-mobile {
  display: none;
}

@media screen and (max-width: 700px) {
  .visible-mobile {
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .mobile-hide {
    display: none !important;
  }
}

@media screen and (max-width: 700px) {
  .visible-mobile {
    display: block !important;
  }
}

.next_sec-outer .txt {
  float: left;
}

.next_sec-outer .txt .tic {
  transform: scale(0);
  transition: all 1s ease;
  font-size: 51px;
  line-height: 41px;
  color: #1fc000;
}

.next_sec-outer .txt .tic.incorrect {
  color: #fc0606;
}

.next_sec-outer .txt .crct,
.next_sec-outer .txt .incrct {
  transform: scale(0);
  transition: all .2s ease;
}

.next_sec-outer .txt.active .tic,
.next_sec-outer .txt.active .crct,
.next_sec-outer .txt.active .incrct {
  transform: scale(1);
}

#explode {
  width: 180px;
  height: 180px;
  position: absolute;
  margin: auto;
  bottom: 0;
  overflow: hidden;
  left: 50%;
  margin-left: -90px;
}

#explode div.box {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  position: absolute;
}

@keyframes anim-1 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 43px;
    left: 188px;
    opacity: 0;
  }

  100% {
    top: 608px;
    left: 693px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(1) {
  left: 10px;
  animation-duration: 1.5s;
  animation-name: anim-1;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff2b00;
}

@keyframes anim-2 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 172px;
    left: 152px;
    opacity: 0;
  }

  100% {
    top: 652px;
    left: 998px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(2) {
  left: 20px;
  animation-duration: 1.5s;
  animation-name: anim-2;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff5500;
}

@keyframes anim-3 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 96px;
    left: 197px;
    opacity: 0;
  }

  100% {
    top: 772px;
    left: 525px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(3) {
  left: 30px;
  animation-duration: 1.5s;
  animation-name: anim-3;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff8000;
}

@keyframes anim-4 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 107px;
    left: 73px;
    opacity: 0;
  }

  100% {
    top: 730px;
    left: 881px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(4) {
  left: 40px;
  animation-duration: 1.5s;
  animation-name: anim-4;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ffaa00;
}

@keyframes anim-5 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 104px;
    left: 4px;
    opacity: 0;
  }

  100% {
    top: 484px;
    left: 680px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(5) {
  left: 50px;
  animation-duration: 1.5s;
  animation-name: anim-5;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ffd500;
}

@keyframes anim-6 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 44px;
    left: 55px;
    opacity: 0;
  }

  100% {
    top: 800px;
    left: 662px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(6) {
  left: 60px;
  animation-duration: 1.5s;
  animation-name: anim-6;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: yellow;
}

@keyframes anim-7 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 53px;
    left: 93px;
    opacity: 0;
  }

  100% {
    top: 316px;
    left: 844px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(7) {
  left: 70px;
  animation-duration: 1.5s;
  animation-name: anim-7;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #d5ff00;
}

@keyframes anim-8 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 77px;
    left: 200px;
    opacity: 0;
  }

  100% {
    top: 18px;
    left: 971px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(8) {
  left: 80px;
  animation-duration: 1.5s;
  animation-name: anim-8;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #aaff00;
}

@keyframes anim-9 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 81px;
    left: 140px;
    opacity: 0;
  }

  100% {
    top: 298px;
    left: 674px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(9) {
  left: 90px;
  animation-duration: 1.5s;
  animation-name: anim-9;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #80ff00;
}

@keyframes anim-10 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 165px;
    left: 134px;
    opacity: 0;
  }

  100% {
    top: 495px;
    left: 181px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(10) {
  left: 100px;
  animation-duration: 1.5s;
  animation-name: anim-10;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #55ff00;
}

@keyframes anim-11 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 64px;
    left: 104px;
    opacity: 0;
  }

  100% {
    top: 440px;
    left: 420px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(11) {
  left: 110px;
  animation-duration: 1.5s;
  animation-name: anim-11;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #2bff00;
}

@keyframes anim-12 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 74px;
    left: 140px;
    opacity: 0;
  }

  100% {
    top: 481px;
    left: 722px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(12) {
  left: 120px;
  animation-duration: 1.5s;
  animation-name: anim-12;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: lime;
}

@keyframes anim-13 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 152px;
    left: 104px;
    opacity: 0;
  }

  100% {
    top: 768px;
    left: 324px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(13) {
  left: 130px;
  animation-duration: 1.5s;
  animation-name: anim-13;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00ff2b;
}

@keyframes anim-14 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 112px;
    left: 79px;
    opacity: 0;
  }

  100% {
    top: 709px;
    left: 258px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(14) {
  left: 140px;
  animation-duration: 1.5s;
  animation-name: anim-14;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00ff55;
}

@keyframes anim-15 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 163px;
    left: 165px;
    opacity: 0;
  }

  100% {
    top: 726px;
    left: 545px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(15) {
  left: 150px;
  animation-duration: 1.5s;
  animation-name: anim-15;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00ff80;
}

@keyframes anim-16 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 27px;
    left: 86px;
    opacity: 0;
  }

  100% {
    top: 154px;
    left: 846px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(16) {
  left: 160px;
  animation-duration: 1.5s;
  animation-name: anim-16;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00ffaa;
}

@keyframes anim-17 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 120px;
    left: 164px;
    opacity: 0;
  }

  100% {
    top: 786px;
    left: 42px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(17) {
  left: 170px;
  animation-duration: 1.5s;
  animation-name: anim-17;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00ffd5;
}

@keyframes anim-18 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 73px;
    left: 178px;
    opacity: 0;
  }

  100% {
    top: 148px;
    left: 907px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(18) {
  left: 180px;
  animation-duration: 1.5s;
  animation-name: anim-18;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: cyan;
}

@keyframes anim-19 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 27px;
    left: 76px;
    opacity: 0;
  }

  100% {
    top: 772px;
    left: 945px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(19) {
  left: 190px;
  animation-duration: 1.5s;
  animation-name: anim-19;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00d5ff;
}

@keyframes anim-20 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 130px;
    left: 66px;
    opacity: 0;
  }

  100% {
    top: 952px;
    left: 708px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(20) {
  left: 200px;
  animation-duration: 1.5s;
  animation-name: anim-20;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00aaff;
}

@keyframes anim-21 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 96px;
    left: 104px;
    opacity: 0;
  }

  100% {
    top: 721px;
    left: 553px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(21) {
  left: 210px;
  animation-duration: 1.5s;
  animation-name: anim-21;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #0080ff;
}

@keyframes anim-22 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 158px;
    left: 146px;
    opacity: 0;
  }

  100% {
    top: 99px;
    left: 173px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(22) {
  left: 220px;
  animation-duration: 1.5s;
  animation-name: anim-22;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #0055ff;
}

@keyframes anim-23 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 179px;
    left: 103px;
    opacity: 0;
  }

  100% {
    top: 983px;
    left: 42px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(23) {
  left: 230px;
  animation-duration: 1.5s;
  animation-name: anim-23;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #002bff;
}

@keyframes anim-24 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 194px;
    left: 137px;
    opacity: 0;
  }

  100% {
    top: 976px;
    left: 685px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(24) {
  left: 240px;
  animation-duration: 1.5s;
  animation-name: anim-24;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: blue;
}

@keyframes anim-25 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 152px;
    left: 145px;
    opacity: 0;
  }

  100% {
    top: 267px;
    left: 571px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(25) {
  left: 250px;
  animation-duration: 1.5s;
  animation-name: anim-25;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #2b00ff;
}

@keyframes anim-26 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 6px;
    left: 163px;
    opacity: 0;
  }

  100% {
    top: 958px;
    left: 748px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(26) {
  left: 260px;
  animation-duration: 1.5s;
  animation-name: anim-26;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #5500ff;
}

@keyframes anim-27 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 54px;
    left: 79px;
    opacity: 0;
  }

  100% {
    top: 408px;
    left: 590px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(27) {
  left: 270px;
  animation-duration: 1.5s;
  animation-name: anim-27;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #8000ff;
}

@keyframes anim-28 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 12px;
    left: 96px;
    opacity: 0;
  }

  100% {
    top: 10px;
    left: 486px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(28) {
  left: 280px;
  animation-duration: 1.5s;
  animation-name: anim-28;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #aa00ff;
}

@keyframes anim-29 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 132px;
    left: 43px;
    opacity: 0;
  }

  100% {
    top: 618px;
    left: 549px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(29) {
  left: 290px;
  animation-duration: 1.5s;
  animation-name: anim-29;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #d500ff;
}

@keyframes anim-30 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 69px;
    left: 131px;
    opacity: 0;
  }

  100% {
    top: 181px;
    left: 668px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(30) {
  left: 300px;
  animation-duration: 1.5s;
  animation-name: anim-30;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: magenta;
}

@keyframes anim-31 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 173px;
    left: 73px;
    opacity: 0;
  }

  100% {
    top: 638px;
    left: 573px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(31) {
  left: 310px;
  animation-duration: 1.5s;
  animation-name: anim-31;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff00d5;
}

@keyframes anim-32 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 54px;
    left: 105px;
    opacity: 0;
  }

  100% {
    top: 111px;
    left: 476px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(32) {
  left: 320px;
  animation-duration: 1.5s;
  animation-name: anim-32;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff00aa;
}

@keyframes anim-33 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 78px;
    left: 39px;
    opacity: 0;
  }

  100% {
    top: 739px;
    left: 822px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(33) {
  left: 330px;
  animation-duration: 1.5s;
  animation-name: anim-33;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff0080;
}

@keyframes anim-34 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 24px;
    left: 146px;
    opacity: 0;
  }

  100% {
    top: 355px;
    left: 285px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(34) {
  left: 340px;
  animation-duration: 1.5s;
  animation-name: anim-34;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff0055;
}

@keyframes anim-35 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 107px;
    left: 44px;
    opacity: 0;
  }

  100% {
    top: 991px;
    left: 953px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(35) {
  left: 350px;
  animation-duration: 1.5s;
  animation-name: anim-35;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff002b;
}

@keyframes anim-36 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 88px;
    left: 155px;
    opacity: 0;
  }

  100% {
    top: 955px;
    left: 928px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(36) {
  left: 360px;
  animation-duration: 1.5s;
  animation-name: anim-36;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: red;
}

@keyframes anim-37 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 41px;
    left: 101px;
    opacity: 0;
  }

  100% {
    top: 391px;
    left: 181px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(37) {
  left: 370px;
  animation-duration: 1.5s;
  animation-name: anim-37;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff2b00;
}

@keyframes anim-38 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 156px;
    left: 32px;
    opacity: 0;
  }

  100% {
    top: 914px;
    left: 598px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(38) {
  left: 380px;
  animation-duration: 1.5s;
  animation-name: anim-38;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff5500;
}

@keyframes anim-39 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 96px;
    left: 67px;
    opacity: 0;
  }

  100% {
    top: 940px;
    left: 112px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(39) {
  left: 390px;
  animation-duration: 1.5s;
  animation-name: anim-39;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ff8000;
}

@keyframes anim-40 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 138px;
    left: 149px;
    opacity: 0;
  }

  100% {
    top: 801px;
    left: 29px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(40) {
  left: 400px;
  animation-duration: 1.5s;
  animation-name: anim-40;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ffaa00;
}

@keyframes anim-41 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 172px;
    left: 175px;
    opacity: 0;
  }

  100% {
    top: 559px;
    left: 589px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(41) {
  left: 410px;
  animation-duration: 1.5s;
  animation-name: anim-41;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #ffd500;
}

@keyframes anim-42 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 140px;
    left: 163px;
    opacity: 0;
  }

  100% {
    top: 428px;
    left: 144px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(42) {
  left: 420px;
  animation-duration: 1.5s;
  animation-name: anim-42;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: yellow;
}

@keyframes anim-43 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 100px;
    left: 89px;
    opacity: 0;
  }

  100% {
    top: 359px;
    left: 464px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(43) {
  left: 430px;
  animation-duration: 1.5s;
  animation-name: anim-43;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #d5ff00;
}

@keyframes anim-44 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 115px;
    left: 141px;
    opacity: 0;
  }

  100% {
    top: 770px;
    left: 729px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(44) {
  left: 440px;
  animation-duration: 1.5s;
  animation-name: anim-44;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #aaff00;
}

@keyframes anim-45 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 98px;
    left: 17px;
    opacity: 0;
  }

  100% {
    top: 679px;
    left: 858px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(45) {
  left: 450px;
  animation-duration: 1.5s;
  animation-name: anim-45;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #80ff00;
}

@keyframes anim-46 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 31px;
    left: 58px;
    opacity: 0;
  }

  100% {
    top: 335px;
    left: 948px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(46) {
  left: 460px;
  animation-duration: 1.5s;
  animation-name: anim-46;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #55ff00;
}

@keyframes anim-47 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 79px;
    left: 131px;
    opacity: 0;
  }

  100% {
    top: 769px;
    left: 958px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(47) {
  left: 470px;
  animation-duration: 1.5s;
  animation-name: anim-47;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #2bff00;
}

@keyframes anim-48 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 104px;
    left: 97px;
    opacity: 0;
  }

  100% {
    top: 597px;
    left: 88px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(48) {
  left: 480px;
  animation-duration: 1.5s;
  animation-name: anim-48;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: lime;
}

@keyframes anim-49 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 4px;
    left: 171px;
    opacity: 0;
  }

  100% {
    top: 226px;
    left: 309px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(49) {
  left: 490px;
  animation-duration: 1.5s;
  animation-name: anim-49;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00ff2b;
}

@keyframes anim-50 {
  0% {
    top: 100%;
    left: 50%;
    opacity: 1;
  }

  80% {
    top: 73px;
    left: 79px;
    opacity: 0;
  }

  100% {
    top: 707px;
    left: 919px;
    opacity: 0;
  }
}

#explode.active div.box {
  opacity: 0;
}

#explode.active div.box:nth-child(50) {
  left: 500px;
  animation-duration: 1.5s;
  animation-name: anim-50;
  animation-iteration-count: initial;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background: #00ff55;
}

.common-txt {
  width: 100%;
  height: 42px;
  border: 1px solid #e1e1e1;
  padding: 0px 15px;
  color: #c7c7c7;
}

.t_aria {
  width: 100%;
  resize: none;
  border: 1px solid #e1e1e1;
  padding: 0px 15px;
  color: #c7c7c7;
  min-height: 60px;
  padding: 10px 15px;
}

.eitColumn {
  display: none;
}

.formBox {
  margin-bottom: 10px;
}

.formBox label {
  margin-bottom: 10px;
  display: block;
}

.formBox-col-2 .formBox {
  float: left;
  width: 50%;
  padding-right: 10px;
}

.formBox-col-2 .formBox:last-child {
  padding: 0;
}

.audio-wrapper.hidden {
  display: none;
}

.hasTooltip {
  position: relative;
}

.hasTooltip .tooltip {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 20px 0 #b9b6b6;
  min-width: 300px;
  left: 50%;
  margin-left: -150px;
  padding: 15px;
  color: #222;
  text-shadow: none;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  float: left;
  min-height: 149px;
  text-transform: none;
  opacity: 0;
  transition: all .5s ease;
  bottom: 0;
}

.hasTooltip .tooltip p {
  margin: 10px 0;
  padding: 0;
}

.hasTooltip .tooltip a {
  display: inline-block;
  background: none;
  padding: 10px;
  border: 1px solid #ccc;
}

.hasTooltip .tooltip a:hover {
  background: #22b14c;
  color: #fff;
}

.hasTooltip:hover .tooltip {
  bottom: 100%;
  opacity: 1;
}

.ReactModalPortal {
  position: relative;
  z-index: 50000000;
}

.ReactModal__Overlay {
  background: rgba(0, 0, 0, 0.5) !important;
}

.modalClose {
  position: absolute;
  right: 7px;
  top: 0;
  color: #ccc;
  font-size: 18px;
  font-weight: bold;
}

.countinueBtn {
  float: right;
  color: #ccc;
  font-size: 18px;
}

.showHoverTooltip {
  pointer-events: auto !important;
}

.showHoverTooltip:hover {
  visibility: visible !important;
  opacity: 1 !important;
}

.tooltip {
  max-width: 250px;
}

.tooltip .btn {
  color: #D01624;
}

.progressbar-container {
  background: #eee;
  border-radius: 15px;
  overflow: hidden;
}

.progressbar-container .progressbar-progress {
  background: #5cb85c;
  border-radius: 15px;
}

.white-txt {
  color: #fff;
}

.CircularProgressbar-path {
  stroke: #ffc107;
  transition: stroke-dashoffset 0.5s ease 0s;
}

.CircularProgressbar-trail {
  stroke: #eee;
}

.CircularProgressbar-text {
  fill: #4a4a4a;
}

.CircularProgressbar-background {
  fill: green;
}

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

.responsive-img {
  max-width: 100%;
}

@media screen and (max-height: 420px) {
  .lms-course-tab {
    top: 17px;
  }
}

.lms-header {
  border-bottom: 0px !important;
  position: fixed;
}

.lms-sr {
  margin-top: 2px;
  background: url(../images/serch_lms-icon.png) !important;
}

.lms-sr:hover {
  opacity: 0.5;
}

.lms-sr.close1 {
  background-position: 0px -29px !important;
}

.lms-sr.close1:hover {
  opacity: 0.5;
}

.links-outer {
  width: auto;
  display: table;
  float: right;
  margin-top: 23px;
}

@media screen and (max-width: 767px) {
  .links-outer .username {
    display: none;
  }
}

.links-outer ul li {
  display: inline-block;
  float: left;
}

.links-outer ul li a {
  padding: 0px 10px;
}

.links-outer ul li a span {
  font-size: 14px;
  padding: 0px 5px 0px 15px;
  color: #19191a;
  font-weight: 400;
  letter-spacing: 2px;
}

.links-outer ul li a:hover img {
  opacity: 0.5;
}

.links-outer ul li a:hover span {
  color: #878684;
}

.links-outer ul li a.icon {
  font-size: 21px;
  color: #4a4a4a;
}

.links-outer ul .down_arrow {
  padding: 0px;
  cursor: pointer;
  float: left;
  margin-top: 5px;
}

.links-outer ul .down_arrow:before {
  background: url(../images/down-arrow.png) no-repeat;
  width: 13px;
  height: 12px;
  content: "";
  float: right;
  margin-top: 4px;
}

.links-outer ul .down_arrow .pr_im_outer {
  width: 37px;
  height: 37px;
  text-align: center;
  border-radius: 50%;
  padding: 0;
  margin-right: 7px;
  box-shadow: 0px 0px 2px 0px #5d5c5a;
  overflow: hidden;
  float: right;
  margin-top: -8px;
}

.links-outer ul .down_arrow .pr_im_outer img {
  width: 100%;
  border-radius: 100%;
}

.links-outer ul .down_arrow:hover .pr_im_outer img {
  opacity: 1;
}

.links-outer ul .down_arrow:hover:before {
  opacity: 0.5;
}

.links-outer .drop-menu ul li {
  display: block !important;
}

.menu_section {
  width: 100%;
  height: 82px;
  background: #fff;
  border-top: 1px solid #e5e5e5 !important;
  display: none;
}

@media screen and (max-width: 760px) {
  .menu_section {
    height: auto;
    float: left;
    width: 100%;
    border-bottom: 1px solid #fdd318;
    padding-bottom: 16px;
  }
}

.menu_section .menu_outer {
  width: auto;
  height: auto;
  display: table;
  float: left;
  margin-top: 31px;
}

@media screen and (max-width: 760px) {
  .menu_section .menu_outer {
    width: 100%;
    margin-top: 0;
  }
}

@media screen and (max-width: 760px) {
  .menu_section .menu_outer nav {
    float: none;
  }
}

@media screen and (max-width: 760px) {
  .menu_section .menu_outer nav ul {
    display: block;
    position: static;
    float: left;
    width: 100%;
    padding: 0;
  }
}

.menu_section .menu_outer nav ul li {
  display: inline-block;
  float: left;
  padding: 0px 15px;
  height: 28px;
  /*.actve{color: #fdd318;}*/
}

.menu_section .menu_outer nav ul li:hover a {
  border-bottom: 2px solid #fdd318;
  padding-bottom: 6px;
  box-sizing: border-box;
}

.menu_section .menu_outer nav ul li:first-child {
  padding-left: 0px;
}

.menu_section .menu_outer nav ul li a {
  color: #4e4e4e;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
}

@media screen and (max-width: 760px) {
  .menu_section .menu_outer nav ul li a {
    width: 100%;
    padding: 10px 0;
    display: block;
  }
}

@media screen and (max-width: 760px) {
  .menu_section .menu_outer nav ul li {
    border-bottom: 1px solid #eee;
  }
}

.drop-btn {
  position: relative;
}

.open-menu {
  display: block;
}

.drop-menu {
  display: none;
  width: 150px;
  background: #fff;
  height: auto;
  position: absolute;
  right: -40px;
  top: 45px;
  z-index: 1;
  padding: 0px 20px 0;
  border: 1px solid rgba(225, 225, 225, 0.64);
  box-shadow: 0px 0px 10px 0px #e8e8e8;
  -moz-box-shadow: 0px 0px 10px 0px #e8e8e8;
  -webkit-box-shadow: 0px 0px 10px 0px #e8e8e8;
  -o-box-shadow: 0px 0px 10px 0px #e8e8e8;
}

.drop-menu.notification {
  width: 310px;
  margin-right: -145px;
}

.drop-menu.notification:before {
  right: 50%;
}

@media screen and (max-width: 760px) {
  .drop-menu.notification {
    position: fixed;
    right: 5px;
    top: 60px;
    margin: 0;
  }
}

.drop-menu:before {
  background: url(../images/drop-menu.png) no-repeat;
  width: 16px;
  height: 18px;
  content: "";
  display: inline-block;
  position: absolute;
  top: -8px;
  right: 36px;
}

.drop-menu ul li {
  display: block;
  float: none;
  border-bottom: 1px solid rgba(225, 225, 225, 0.64);
}

.drop-menu ul li:last-child {
  border: 0;
}

.drop-menu ul li a {
  color: #727275;
  font-size: 12px;
  font-weight: 400;
  padding: 10px 0px;
  display: block;
}

.drop-menu ul li a:hover {
  color: #000;
}

.counter-section {
  width: auto;
  height: auto;
  float: right;
  display: table;
  margin-top: 17px;
}

.counter-section .cnt-icons {
  width: 48px;
  height: 45px;
  float: left;
  background: url(../images/counter-icons.png) no-repeat;
  position: relative;
}

.counter-section .cnt-icons .number_outer {
  width: auto;
  height: auto;
  display: table;
  position: absolute;
  bottom: 3px;
  left: 6px;
}

.counter-section .cnt-icons .number_outer span {
  float: left;
  background: #fff;
  border: 1px solid #dadada;
  font-size: 10px;
  border-radius: 2px;
  font-weight: 700;
  padding: 0px 2px;
  margin-right: 1px;
  line-height: 11px;
}

.counter-section .counter-icon1 {
  background-position: 6px 0px;
}

.counter-section .counter-icon2 {
  background-position: -39px 0px;
}

.counter-section .counter-icon3 {
  background-position: -81px 0px;
}

.counter-section .counter-icon4 {
  background-position: -124px 0px;
}

.counter-section .counter-icon5 {
  background-position: -169px 0px;
  width: 45px;
}

.close-button {
  cursor: pointer;
  background: #fdd318;
  color: #444;
  padding: 1px 10px 5px;
  float: right;
  border-radius: 0px 0px 5px 5px;
}

.close-button i {
  color: #fff;
  background: #e6bf20;
  border-radius: 100%;
  margin-left: 5px;
}

.open-button {
  display: none;
  cursor: pointer;
  background: #fdd318;
  color: #444;
  padding: 1px 10px 5px;
  float: right;
  border-radius: 0px 0px 5px 5px;
}

.open-button i {
  color: #fff;
  background: #e6bf20;
  border-radius: 100%;
  margin-left: 5px;
}

.line {
  width: 100%;
  height: 1px;
  background: #fdd318;
}

.close {
  display: none !important;
  cursor: pointer;
}

.open {
  display: block !important;
  cursor: pointer;
}

.lms-search {
  background: #fdd318 !important;
}

.lms-search .srch-outer {
  margin: 24px 0px !important;
}

header nav a#pull {
  display: none;
  outline: none !important;
}

@media only screen and (max-width: 760px) {
  header nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: absolute;
    top: 18px;
    right: 15px;
    width: 32px;
    height: 45px;
    background: url(../images/nav-icon.png) no-repeat;
    transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
  }
}

@media only screen and (max-width: 600px) {
  header nav li a {
    font-size: 12px;
  }
}

@media only screen and (max-width: 760px) {
  header nav {
    width: auto !important;
    float: right;
  }

  header nav>ul {
    margin: 0;
    position: absolute;
    top: 72px;
    width: 280px;
    right: 0%;
    display: none;
    z-index: 5000;
    height: auto;
    background: #fff;
    padding: 5px 15px 15px;
  }

  header nav>ul li {
    width: 100% !important;
    height: auto !important;
    margin: 0px !important;
    position: static !important;
    text-align: left !important;
    padding: 0 !important;
    transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    background: #fff;
  }

  header nav>ul li a {
    border: none !important;
    padding: 10px 15px;
  }

  header nav>ul li:hover a {
    color: #D01624;
  }

  header nav .active {
    border: none !important;
  }
}

@media only screen and (max-width: 760px) {
  header .tag2 {
    margin-right: 10px;
  }

  header .right-sec {
    background: #f7f7f7;
  }

  header .right-sec nav li a {
    padding: 15px 10px !important;
    color: #686868 !important;
    font-size: 12px;
    line-height: 12px;
    padding: 10px;
  }

  display:block header .right-sec nav li a:hover {
    color: #686868 !important;
  }

  header .close {
    opacity: inherit !important;
  }
}

@media only screen and (max-width: 760px) {
  sub-menu {
    position: inherit;
  }

  .sub-menu-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    z-index: 200;
    background: url(../images/filter-arrow.png) no-repeat 1px 1px;
    cursor: pointer;
  }

  .open {
    background-position: 1px -20px;
  }

  .navActive2 {
    border: none !important;
  }

  .child {
    height: auto;
    padding: 10px 0;
    margin-top: 10px !important;
    background: #a56f3c !important;
    position: static !important;
    width: 100% !important;
  }

  .child li {
    width: 100% !important;
    font-size: 10px !important;
    background: #a56f3c a;
    background-padding-left: 15px !important;
  }
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #c7c7c7;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #c7c7c7;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #c7c7c7;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #c7c7c7;
}

.signup_bg {
  background: #e5f8e6;
  background: -moz-radial-gradient(center, ellipse cover, #e5f8e6 1%, #e5f8e6 56%, #e4f7f6 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #e5f8e6 1%, #e5f8e6 56%, #e4f7f6 100%);
  background: radial-gradient(ellipse at center, #e5f8e6 1%, #e5f8e6 56%, #e4f7f6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5f8e6', endColorstr='#e4f7f6', GradientType=1);
  width: 100%;
  position: relative;
  height: 900px;
  background-size: cover;
  background-position: center;
  /*margin-top: 85px;*/
}

.signup_oueter {
  width: 550px;
  background: #fff;
  left: 50%;
  top: 119px;
  margin-left: -79px;
  padding-bottom: 60px;
  position: relative;
  z-index: 5;
}

.signup_oueter:after {
  content: "";
  position: absolute;
  width: 105%;
  height: 1px;
  bottom: -80px;
  box-shadow: 0 0px 44px 3px #000;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: .4;
  margin-left: -2.5%;
}

.signup_oueter.forgot-password:after {
  display: none;
}

@media screen and (max-width: 767px) {
  .signup_oueter.forgot-password .face {
    top: -19px;
  }
}
.signup_oueter #forgot-password .submit{
  width: 100%;
  height: auto;
  background-color: #fed913;
  border: none;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
  font-size: 14px;
  color: #262626 !important;
  font-weight: 600;
  letter-spacing: 2px;
  outline: none;
  float: left;
  padding: 15px 33px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 50px;
}
.signup_oueter #forgot-password .submit:hover {
  background: #ffeb72;
  color: #262626 !important;
}

.signup_oueter p {
  font-size: 11px !important;
  color: #9d9d9d;
  position: static !important;
  bottom: 52px;
  width: 100% !important;
  text-align: center;
  padding: 0 10px !important;
  margin: 10px 0 0;
}

.signup_oueter .tree {
  width: 58px;
  height: 106px;
  background: url(../images/tree.png) no-repeat;
  position: absolute;
  left: 100px;
  bottom: -60px;
}

.signup_oueter .content_colm {
  width: 100%;
  height: auto;
  display: table;
  margin: auto;
}

.signup_oueter .content_colm h3 {
  font-size: 20px;
  color: #22b14c;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  padding-top: 50px;
  @media (min-width: 576px) {
    text-align: start;
  }
  @media (min-width: 768px) {
    padding-top: 0;
  }
}

.signup_oueter .content_colm h4 {
  font-size: 18px;
  color: #313131;
  font-weight: 400;
  margin-bottom: 5px;
}

.signup_oueter .content_colm p {
  font-size: 14px;
  color: #949494;
  font-weight: 400;
  margin: 5px 0px 15px;
}

.signup_oueter .content_colm input {
  width: 100%;
  height: 42px;
  color: #c7c7c7;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #e1e1e1;
  background: #fff;
  margin-bottom: 0;
  padding: 0px 15px;
}

.signup_oueter .content_colm input.two-column {
  width: 48%;
  float: left;
}

@media screen and (max-width: 600px) {
  .signup_oueter .content_colm input.two-column {
    width: 100%;
  }
}

.signup_oueter .content_colm input.two-column.right {
  float: right;
}

.signup_oueter .content_colm .sec2 {
  font-size: 12px;
  margin: 0px;
}

.signup_oueter .content_colm .login-btn-wrapper {
  width: 100%;
  /* margin-bottom: 15px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signup_oueter .content_colm .login-btn-wrapper .submit {
  width: auto;
}

.signup_oueter .content_colm .login-btn-wrapper a {
  float: left;
  margin: 0 0 0 auto;
  color: #4a4a4a;
}

.signup_oueter .content_colm .submit {
  background-color: #fed913;
  border: none;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
  font-size: 14px;
  color: #262626;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 2px;
  outline: none;
  float: left;
  width: 100%;
}

.signup_oueter .content_colm .submit:hover {
  background: #ffeb72;
}

.signup_oueter .content_colm .submit.full-width {
  width: 100%;
}

.signup_oueter .content_colm .submit.edit-email {
  float: none;
  margin: 0 auto;
  display: table;
}

.signup_oueter .content_colm .psword {
  position: relative;
  width: 100%;
  height: 42px;
  /* margin-bottom: 10px; */
}

.signup_oueter .content_colm .password {
  position: absolute;
  top: 0px;
  left: 0px;
  background: none;
  font-size: 33px;
  letter-spacing: 2px;
}

.signup_to {
  width: 330px !important;
  height: auto;
  display: table;
  margin: auto !important;
  padding-top: 20px;
}

.signup_to span {
  display: block;
  font-size: 13px;
  color: #949494;
  font-weight: 400;
  margin-bottom: 20px;
  display: block;
  max-width: 320px;
}

.signup_to .line {
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  clear: both;
  margin: 0 0 25px;
  float: left;
}

.signup_to .or {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid #e5e5e5;
  margin: 0 auto 0px;
  background: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 29px;
  font-weight: 700;
  color: #949494;
  position: relative;
  top: -16px;
}

.signup_to h5 {
  text-align: center;
  margin-top: 20px;
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 15px;
}

.signup_to h5 a {
  color: #22b14c;
}

.signup_to h5 a:hover {
  text-decoration: underline;
}

.login_outer_div {
  height: auto !important;
  padding-bottom: 30px;
}

.face {
  text-align: center;
}

.face img {
  width: 60px;
}

@media screen and (max-width: 767px) {
  .face {
    text-align: center;
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    top: -31px;
    left: 50%;
    margin-left: -25px !important;
    padding: 10px !important;
    border-radius: 50%;
  }

  .face img {
    width: 33px;
  }
}

.face i {
  width: 40px;
  height: 40px;
  font-size: 39px;
  color: #1fc000;
}

.login_bg {
  background: #e5f8e6;
  background: -moz-radial-gradient(center, ellipse cover, #e5f8e6 1%, #e5f8e6 56%, #e4f7f6 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #e5f8e6 1%, #e5f8e6 56%, #e4f7f6 100%);
  background: radial-gradient(ellipse at center, #e5f8e6 1%, #e5f8e6 56%, #e4f7f6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5f8e6', endColorstr='#e4f7f6', GradientType=1);
  width: 100%;
  position: relative;
  height: 780px;
  background-size: cover;
  background-position: center;
  margin-top: 0;
}

.login_bg .signup_oueter {
  margin-left: -275px;
  padding-top: 15px;
}

.login_bg .signup_oueter .tree {
  right: 0;
  left: initial;
}

@media screen and (max-width: 767px) {
  .login_bg .signup_oueter {
    padding-top: 15px;
    margin-bottom: 29px;
    top: 53px;
  }
}

.login_bg .signup_oueter .panel-container {
  background-color: transparent;
}

.login_bg .forgot-password {
  height: auto !important;
  padding-bottom: 5%;
  display: none;
  padding-top: 32px;
}

.login_bg .forgot-password.resetPassword {
  display: block;
}

.login_bg .forgot-password .forgot-status {
  display: none;
}

.login_bg .forgot-password .forgot-status h3 {
  text-align: center;
}

.login_bg .forgot-password .forgot-status p {
  font-size: 14px !important;
}

@media screen and (max-width: 767px) {
  .login_bg .forgot-password .forgot-status .face {
    top: 6px;
  }
}

@media screen and (max-width: 767px) {
  .login_bg .forgot-password {
    padding-top: 50px;
  }
}

.login_bg .forgot-password .note {
  padding-bottom: 16px;
  color: #949494;
}

.login_bg .forgot-password p {
  position: static !important;
  width: 100% !important;
  padding: 15px 0 0 0 !important;
}

.login_bg .forgot-password .link {
  color: #22b14c;
  text-decoration: none;
  padding: 0;
}

.login-bottom-div {
  background: #23B14D;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 280px;
  z-index: 1;
}

.login-bottom-div .signup-ppl {
  position: absolute;
  bottom: 84%;
  z-index: 2;
  left: 14%;
  width: 250px;
}

@media screen and (max-width: 900px) {
  .login-bottom-div .signup-ppl {
    display: none;
  }
}

.cloud-left-second {
  position: absolute;
  width: 103px;
  top: 19%;
  left: 11.5%;
}

.cloud-left-first {
  position: absolute;
  width: 86px;
  top: 26%;
  left: -40px;
}

.cloud-left-third {
  position: absolute;
  width: 145px;
  top: 37%;
  left: 15%;
}

.cloud-right-first {
  position: absolute;
  width: 145px;
  right: 14%;
  top: 21%;
}

.cloud-right-second {
  position: absolute;
  width: 58px;
  right: 10%;
  top: 15%;
}

.tree-left-first {
  position: absolute;
  width: 22px;
  left: 7%;
  bottom: 97%;
}

.tree-left-second {
  position: absolute;
  width: 44px;
  left: 20%;
  bottom: 93%;
}

.tree-right-first {
  position: absolute;
  width: 34px;
  right: 19%;
  bottom: 95%;
}

.tree-right-second {
  position: absolute;
  width: 19px;
  right: 15%;
  bottom: 97%;
}

#view1 {
  width: 350px;
  height: auto;
  margin: auto;
  transition: 0.8s;
}

#view1 .line {
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  clear: both;
  margin: 65px 0px 0px;
}

#view1 .or {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid #e5e5e5;
  margin: -18px auto 0px;
  background: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 29px;
  font-weight: 700;
  color: #393939;
}
.creat-account {
  font-size: 14px;
  display: block;
  padding-top: 15px;
  color: #000000;
  text-align: center;
  font-weight: 600;
}
.creat-account:hover {
  color: #22b14c;
}

.face_book {
  width: auto;
  height: 37px;
  display: table;
  margin: 20px auto 0px;
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  text-align: left;
  line-height: 37px;
  border: 1px solid #e5e5e5;
  padding: 0 10px 0 5px;
}

.face_book:hover {
  color: #5b81d6;
}

.face_book i {
  background: #3a589b;
  color: #ffffff;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  float: left;
  line-height: 33px;
  margin: 5px;
  text-align: center;
}

.g_plus {
  width: 100%;
  padding: 0 10px 0 5px;
  height: 37px;
  display: table;
  /* margin: 10px auto 0px; */
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  text-align: left;
  line-height: 37px;
  border: 1px solid #e5e5e5;
}

.g_plus:hover {
  color-interpolation-filters: #f76f56;
}

.g_plus i {
  background: #d6492f;
  color: #ffffff;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  float: left;
  line-height: 33px;
  margin: 5px;
  text-align: center;
}

.forget {
  margin-top: 20px;
  display: block;
  float: right;
  width: 100%;
  text-align: center;
}

.forget li {
  display: inline-block;
  line-height: 14px;
  text-align: center;
  border-right: 1px solid #e5e5e5;
}

.forget li:last-child {
  border-right: 0px;
}

.forget li a {
  color: #565656;
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  padding: 0px 12px;
}

.forget li a:hover {
  color: #c7c2c2;
}

#forgot-password,
#view2 {
  width: 325px;
  height: auto;
  margin: auto;
  transition: 0.8s;
}

#forgot-password .custom-radio,
#view2 .custom-radio {
  width: 27px;
  height: 26px;
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  float: left;
  margin-right: 10px;
  background: url("../images/login-radio.png") no-repeat;
}

#forgot-password .custom-radio.selected,
#view2 .custom-radio.selected {
  background: url("../images/login-selected.png") no-repeat;
}

#forgot-password .custom-radio input[type="radio"],
#view2 .custom-radio input[type="radio"] {
  margin: 1px;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  outline: none;
  opacity: 0;
  /* CSS hacks for older browsers */
  _noFocusLine: expression(this.hideFocus=true);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
}

#forgot-password form,
#view2 form {
  margin: 0px;
}

#forgot-password label,
#view2 label {
  display: block;
  line-height: 32px;
  color: #565656;
  font-size: 14px;
}

#forgot-password label:hover,
#view2 label:hover {
  color: #bdbdbd;
}

#forgot-password input[type="submit"],
#view2 input[type="submit"] {
  float: left;
  background: #f2f2f2;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  margin-top: 20px;
  padding: 4px 10px;
  cursor: pointer;
  outline: none;
}

#forgot-password input[type="submit"]:hover,
#view2 input[type="submit"]:hover {
  color: #fff;
  border-color: #1b7aa9;
  background-color: #239fdb;
}

.login_radio {
  width: 135px;
  float: left;
  margin-bottom: 15px;
  margin-top: 15px;
}

.login_radio input {
  width: auto !important;
  height: auto !important;
}

ul.rtabs {
  text-align: left;
  font-size: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.rtabs li {
  width: 150px;
  height: 55px;
  margin: 0;
  padding: 0;
  display: inline-block;
  background-color: #f5f5f5;
  text-align: center;
}

ul.rtabs li:last-child {
  width: 400px;
  text-align: left;
  padding-left: 20px;
}

ul.rtabs li a {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  line-height: 55px;
  text-decoration: none;
  color: #9a9a9a !important;
  outline: none;
  position: relative;
}

ul.rtabs li a:link,
ul.rtabs li a:visited {
  color: #222;
}

ul.rtabs li.selected {
  background: #fff !important;
}

ul.rtabs li.selected a {
  color: #4a4a4a !important;
  font-weight: normal;
  background: #fff;
  z-index: 3;
  font-weight: 500;
}

ul.rtabs li.selected a:hover {
  text-decoration: none;
}

div.panel-container {
  background-color: white;
  position: relative;
  padding: 0px;
  margin: 0px;
  outline: none;
  margin-top: -2px;
}

.forgot-password div.panel-container {
  margin-top: 0;
}

div.panel-container>div {
  padding: 20px 0px 15px;
  display: block;
  margin: 0px;
}

div.panel-container div.inactive {
  display: none;
}

div.ajaxLoading {
  background: transparent url(loading.gif) no-repeat center center;
  height: 150px;
  width: 20px;
  font-size: 0;
  padding: 0;
  margin: 0 auto;
}

.error-message {
  color: red;
  font-size: 11px;
  padding-bottom: 15px;

  &:empty {
    display: none;
  }
}

.error-message-signup {
  color: red;
  font-size: 15px;
  font-weight: bold;
}
.error-message-signup:empty {
  display: none;
}

.lms-bg-clr {
  background: #f7f7f7;
  width: 100%;
  height: auto;
  padding-top: 154px;
}

@media screen and (max-width: 700px) {
  .lms-bg-clr {
    padding-top: 80px;
  }
}

@media screen and (max-height: 420px) {
  .lms-bg-clr {
    padding-top: 20px;
  }
}

.lms-bg-clr .profile {
  background: none;
  padding-top: 0;
  height: auto;
  margin-top: 0;
}

.lms-bg-clr .profile .profile_oueter {
  box-shadow: 0px 0px 10px 0px #e8e8e8;
  -moz-box-shadow: 0px 0px 10px 0px #e8e8e8;
  -webkit-box-shadow: 0px 0px 10px 0px #e8e8e8;
  -o-box-shadow: 0px 0px 10px 0px #e8e8e8;
  margin-bottom: 50px;
  height: auto;
  width: 100%;
  padding: 70px 70px 70px;
  float: left;
}

.lms-bg-clr .profile .profile_oueter .frm_outer {
  width: 100%;
  height: auto;
  float: left;
}

.myprofile .open-button {
  display: block;
  margin-bottom: -24px;
}

.myprofile .close-button {
  display: none;
  margin-bottom: -24px;
}

.myprofile .open {
  display: none !important;
}

.myprofile .close {
  display: block !important;
}

.profile_section {
  margin-bottom: 1%;
  position: relative;
}

.profile_section .pro_section1 {
  width: 100%;
  float: left;
  background: #fff;
  padding: 35px;
  box-shadow: 0px 0px 10px 0px #e8e8e8;
  margin-bottom: 20px;
}

.profile_section .pro_section1 .profile_im_ot {
  width: 96px;
  height: 96px;
  background: #dcd6d6;
  float: left;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #444;
  box-shadow: 0px 0px 3px 0px #3e3c3c;
  margin-right: 25px;
  position: relative;
}

.profile_section .pro_section1 .profile_im_ot img {
  width: 100%;
}

@media screen and (max-width: 500px) {
  .profile_section .pro_section1 .profile_im_ot {
    width: 60px;
    height: 60px;
    margin: 0 auto 30px;
    float: none;
  }
}

.profile_section .pro_section1 .profile_im_ot .uploadPhoto {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.profile_section .pro_section1 .profile_im_ot .uploadPhoto .txt {
  position: absolute;
  z-index: 1;
  left: 0;
  text-align: center;
  font-size: 11px;
  color: #fff;
  top: 20px;
  line-height: 12px;
}

.profile_section .pro_section1 .profile_im_ot .uploadPhoto .txt i {
  font-size: 20px;
  display: block;
  margin-bottom: 5px;
}

.profile_section .pro_section1 .profile_im_ot .uploadPhoto input {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.profile_section .pro_section1 .profile_im_ot:hover .uploadPhoto {
  display: block;
}

.profile_section .pro_section1 .colm2_outer {
  float: left;
  width: 70%;
  height: auto;
  display: inline-block;
}

.profile_section .pro_section1 .colm2_outer h2 {
  font-size: 20px;
  text-transform: uppercase;
  color: #444444;
  font-weight: 600;
}

.profile_section .pro_section1 .colm2_outer p {
  font-size: 14px;
  font-weight: 400;
  color: #656565;
  line-height: 22px;
  margin: 5px 0px 15px;
}

.profile_section .pro_section1 .colm2_outer ul {
  clear: both;
}

.profile_section .pro_section1 .colm2_outer ul li {
  display: inline-block;
  float: left;
  margin-right: 20px;
  color: #999999;
  font-size: 14px;
}

.profile_section .pro_section1 .colm2_outer ul li:before {
  width: 25px;
  height: 27px;
  background: url(../images/profile-icons1.png);
  content: "";
  display: inline-block;
  float: left;
}

.profile_section .pro_section1 .colm2_outer ul .location:before {
  background-position: -3px 0px;
  margin-top: -2px;
}

.profile_section .pro_section1 .colm2_outer ul .phone:before {
  background-position: -23px 0px;
  margin-right: 8px;
  margin-top: -2px;
}

.profile_section .pro_section1 .colm2_outer ul .phone.editMode:before {
  margin-top: 8px;
}

.profile_section .pro_section1 .colm2_outer ul .phone.editMode .verifyBtn {
  margin-top: 10px;
  float: left;
}

.profile_section .pro_section1 .colm2_outer ul .mail:before {
  background-position: -55px 0px;
  margin-right: 8px;
  margin-top: -2px;
}

.profile_section .pro_section1 .edt-pro {
  position: absolute;
  right: 30px;
  top: 30px;
}

@media screen and (max-width: 500px) {
  .profile_section .pro_section1 .edt-pro {
    position: absolute;
    top: 107px !important;
    right: 50% !important;
    margin-right: -84px;
  }
}

.profile_section .pro_section1 .edt-pro a {
  background: #255fb7;
  color: #fff;
  padding: 7px 15px 7px 10px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 3px;
  margin: 0 2px;
}

.profile_section .pro_section1 .edt-pro a img {
  margin-right: 0;
}

.profile_section .pro_section1 .edt-pro a:hover {
  background: #3176de;
}

.profile_section .pro_left_section {
  width: 49.1%;
  height: auto;
  float: left;
}

.profile_section .left_colm1 {
  width: 100%;
  height: auto;
  background: #fff;
  margin-bottom: 20px;
  padding-bottom: 15px;
  box-shadow: 0px 0px 10px 0px #e8e8e8;
}

.profile_section .left_colm1 h4 {
  font-size: 14px;
  font-weight: 400;
  color: #434343;
  padding: 23px 38px;
  float: left;
}

@media screen and (max-width: 767px) {
  .profile_section .left_colm1 h4 {
    padding: 15px;
  }
}

.profile_section .left_colm1 .line {
  width: 100%;
  height: 1px;
  background: #f0f0f0;
  clear: both;
}

.profile_section .left_colm1 ul.badges {
  position: relative;
  padding: 20px 20px 10px 30px;
  width: 100%;
  display: table;
}

@media screen and (max-width: 767px) {
  .profile_section .left_colm1 ul.badges {
    padding-right: 10px;
  }
}

.profile_section .left_colm1 ul.badges.gold {
  margin-top: 13px;
}

.profile_section .left_colm1 ul.badges li {
  display: inline-block;
  float: left;
  text-align: center;
  padding: 10px;
  position: relative;
  width: 20%;
  border-radius: 9px;
  margin: 10px 0 0;
}

.profile_section .left_colm1 ul.badges li h5 {
  font-size: 14px;
  font-weight: 600;
  margin-top: -7px;
  color: #777;
  position: absolute;
  bottom: -8px;
  left: 10px;
  right: 10px;
}

.profile_section .left_colm1 ul.badges li .ltr {
  position: absolute;
  top: -21px;
  text-align: center;
  width: 100%;
  left: 0;
  font-weight: bold;
  color: #777;
}

.profile_section .left_colm1 ul.badges li.name {
  position: absolute;
  left: 8px;
  top: 60%;
  margin-top: 0;
  width: 20px;
  height: auto;
  background: none !important;
  padding: 0;
  transform: rotate(-90deg);
  box-shadow: none;
  margin: 0;
}

.profile_section .left_colm1 ul.badges li .badge-bg {
  width: 100%;
}

.profile_section .left_colm1 ul.badges li .chrtr {
  position: absolute;
  z-index: 10;
  left: 50%;
  width: 100%;
  margin-left: -50%;
  transform: scale(0.48);
  top: -18%;
  transition: all .5s ease;
}

.profile_section .left_colm1 ul.badges li .leaf {
  position: absolute;
  width: 100%;
  bottom: 6px;
  left: 0;
}

.profile_section .left_colm1 ul.badges li:hover .chrtr {
  transform: scale(1);
}

.profile_section .left_colm1 .course-outer {
  width: 100%;
  height: auto;
  padding: 30px 38px;
}

@media screen and (max-width: 767px) {
  .profile_section .left_colm1 .course-outer {
    padding: 15px;
  }
}

.profile_section .left_colm1 .course-outer .clk-dv {
  float: left;
  margin-right: 25px;
}

.profile_section .left_colm1 .course-outer .cnt_div {
  float: left;
  width: 85%;
}

.profile_section .left_colm1 .course-outer .cnt_div .recent-activity-img {
  float: left;
  margin-right: 10px;
}

.profile_section .left_colm1 .course-outer .cnt_div h3 {
  font-size: 16px;
  font-weight: 600;
  color: #373636;
  margin-bottom: 10px;
}

.profile_section .left_colm1 .course-outer .cnt_div h5 {
  font-weight: 400;
  font-size: 14px;
  color: #777777;
  margin-bottom: 5px;
}

.profile_section .left_colm1 .course-outer .cnt_div p {
  font-weight: 400;
  font-size: 14px;
  color: #777777;
  margin: 0px;
}

.profile_section .left_colm1 h6 {
  float: right;
  padding: 25px 30px 0px;
}

@media screen and (max-width: 767px) {
  .profile_section .left_colm1 h6 {
    padding: 15px 15px 0;
  }
}

.profile_section .left_colm1 h6 a {
  color: #aaaaaa;
  font-size: 12px;
  font-weight: 400;
}

.profile_section .left_colm1 h6 a:hover {
  color: #dad8d8;
}

.profile_section .left_colm1 .dt-sec p {
  margin: 6px 0px !important;
}

.profile_section .infodiv {
  padding-bottom: 0px !important;
}

.profile {
  background: url(../images/login-bg.jpg) no-repeat;
  width: 100%;
  padding-top: 55px;
  position: relative;
  height: 1025px;
  background-size: cover;
  background-position: center;
  margin-top: 85px;
}

.profile.popup {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  padding: 10px;
  margin: 0;
  overflow: auto;
  display: flex;
  align-items: center;
}

.profile.popup .profile-form {
  margin: auto;
}

.profile.popup .profile_oueter {
  height: auto;
  margin: auto;
  width: 1000px;
  max-width: 100%;
}

@media screen and (max-width: 700px) {
  .profile.popup .profile_oueter {
    width: 100%;
  }
}

.profile.popup .btn-wrapper {
  float: right;
}

.profile.popup .skip,
.profile.popup .sbmt {
  float: none !important;
  margin: 0 0 0 10px;
  cursor: pointer;
}

.profile.popup .skip {
  color: #9d9d9d;
}

.profile-form .profile_oueter {
  width: 960px;
  height: 830px;
  background: #fff;
  margin: 0px auto 0px;
  padding-top: 70px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .profile-form .profile_oueter {
    padding-top: 10px;
  }
}

.profile-form .profile_oueter .frm_outer {
  width: 770px;
  height: 328px;
  margin: auto;
  position: relative;
}

.profile-form .profile_oueter .frm_outer h3 {
  font-size: 22px;
  font-weight: 400;
  color: #22b14c;
  margin-bottom: 15px;
}

.profile-form .profile_oueter .frm_outer .left-colm-outer {
  width: 48%;
  float: left;
  height: auto;
}

@media screen and (max-width: 767px) {
  .profile-form .profile_oueter .frm_outer .left-colm-outer img {
    width: 50px;
  }
}

.profile-form .profile_oueter .frm_outer .right_colm_outer {
  width: 48%;
  float: right;
  height: auto;
}

.profile-form .profile_oueter .frm_outer .colm {
  margin-bottom: 10px;
  display: table;
  width: 100%;
  position: relative;
}

.profile-form .profile_oueter .frm_outer .colm label {
  display: inherit;
  font-size: 14px;
  font-weight: 400;
  color: #565656;
  margin-bottom: 0px;
}

.profile-form .profile_oueter .frm_outer .colm input {
  width: 100%;
  height: 42px;
  border: 1px solid #e1e1e1;
  padding: 0px 15px;
  color: #c7c7c7;
  margin-top: 0px;
}

.profile-form .profile_oueter .frm_outer .colm select {
  width: 100%;
  height: 42px;
  border: 1px solid #e1e1e1;
}

.profile-form .profile_oueter .frm_outer .colm .dte {
  /* width: 20%; */
  float: left;
  margin-right: 2%;
}

.profile-form .profile_oueter .frm_outer .colm .month {
  width: 34%;
  float: left;
  margin-right: 2%;
}

.profile-form .profile_oueter .frm_outer .colm .yer {
  width: 42%;
  float: left;
}

.profile-form .profile_oueter .frm_outer .colm .t_aria {
  width: 100%;
  height: 208px;
  resize: none;
  border: 1px solid #e1e1e1;
  padding: 0px 15px;
  color: #c7c7c7;
}

.profile-form .profile_oueter .frm_outer .sbmt {
  float: right;
  background: #fde418;
  outline: none;
  margin-right: 1px;
  text-transform: uppercase;
  padding: 15px 15px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  letter-spacing: 1px;
  margin-top: 4px;
}

.profile-form .profile_oueter .frm_outer .sbmt:hover {
  background: rgba(253, 228, 24, 0.6);
}

.profile-form .profile_oueter .frm_outer .password:before {
  background: url(../images/password.png);
  content: "";
  display: block;
  width: 100px;
  height: 15px;
  position: absolute;
  bottom: 15px;
  left: 15px;
}

.profile-form .profile_oueter .frm_outer .hide:before {
  background: none;
}

.profile-form .profile_oueter .frm_outer .click_pswd {
  position: absolute;
  top: 22px;
  left: 0px;
  background: none;
  font-size: 33px;
  letter-spacing: 2px;
}

.profile-form .profile_oueter .frm_outer .colm.password {
  height: 75px;
}

.profile-form .profile_oueter .frm_outer .colm.password input {
  margin-top: 10px;
}

.profile-form .profile_oueter .frm_outer .password2:before {
  background: url(../images/password.png);
  content: "";
  display: block;
  width: 100px;
  height: 15px;
  position: absolute;
  bottom: 15px;
  left: 15px;
}

.profile-form .profile_oueter .frm_outer .hide:before {
  background: none;
}

.profile-form .profile_oueter .frm_outer .click_pswd2 {
  position: absolute;
  top: 22px;
  left: 0px;
  background: none;
  font-size: 33px;
  letter-spacing: 2px;
}

.profile-form .profile_oueter .frm_outer .colm.password2 {
  height: 75px;
}

.profile-form .profile_oueter .frm_outer .colm.password2 input {
  margin-top: 10px;
}

.profile-form .profile_oueter .arow2 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../images/select-icon.png) no-repeat 90% 14px #fff;
  cursor: pointer;
  padding-left: 10px;
}

.profile-form .profile_oueter .arow {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../images/select-icon.png) no-repeat 96% 14px #fff;
  cursor: pointer;
  padding-left: 10px;
}

.profile-form .profile_oueter .tree {
  width: 58px;
  height: 106px;
  background: url(../images/tree.png) no-repeat;
  position: absolute;
  right: 26%;
  bottom: -60px;
}

.profile-form .profile_oueter.editProfile {
  float: left;
  width: 100%;
  padding-top: 40px;
  display: none;
  height: auto;
}

.profile-form .profile_oueter.editProfile .frm_outer {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 620px) {

  .profile-form .profile_oueter.editProfile .frm_outer .right_colm_outer,
  .profile-form .profile_oueter.editProfile .frm_outer .left-colm-outer {
    width: 100%;
  }
}

.profile-form .custom-radio {
  width: 27px;
  height: 26px;
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  float: left;
  margin-right: 10px;
  background: url("../images/login-radio.png") no-repeat;
}

.profile-form .custom-radio.selected {
  background: url("../images/login-selected.png") no-repeat;
}

.profile-form .custom-radio input[type="radio"] {
  margin: 1px;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  outline: none;
  opacity: 0;
  /* CSS hacks for older browsers */
  _noFocusLine: expression(this.hideFocus=true);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
}

.profile-form form {
  margin: 0px;
}

.profile-form label {
  display: block;
  line-height: 32px;
  color: #565656;
  font-size: 14px;
  position: relative;
}

.profile-form label:hover {
  color: #bdbdbd;
}

.profile-form input[type="submit"] {
  float: left;
  background: #f2f2f2;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  margin-top: 20px;
  padding: 4px 10px;
  cursor: pointer;
  outline: none;
}

.profile-form input[type="submit"]:hover {
  color: #fff;
  border-color: #1b7aa9;
  background-color: #239fdb;
}

.profile-form .login_radio {
  display: inline-block;
  width: 135px;
  float: left;
  margin-bottom: 5px;
  margin-top: 3px;
}

.profile-form .star:before {
  content: "";
  position: absolute;
  right: -10px;
  background: url(../images/star_red.png) no-repeat;
  width: 10px;
  height: 10px;
  display: inline-block;
}

.profile-form.popup {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  padding: 10px;
  margin: 0;
  overflow: auto;
  display: flex;
  align-items: center;
}

.profile-form.popup .profile_oueter {
  height: auto;
  margin: auto;
  width: 1000px;
  max-width: 100%;
}

@media screen and (max-width: 700px) {
  .profile-form.popup .profile_oueter {
    width: 100%;
  }
}

.profile-form.popup .btn-wrapper {
  float: right;
}

.profile-form.popup .skip,
.profile-form.popup .sbmt {
  float: none !important;
  margin: 0 0 0 10px;
  cursor: pointer;
}

.profile-form.popup .skip {
  color: #9d9d9d;
}

.verifyPhonePopup {
  position: absolute;
  top: 100%;
  left: 50%;
  border: 1px solid #eee;
  box-shadow: 0 0 5px 0 #ccc;
  padding: 20px;
  background: #fff;
  width: 250px;
  margin-left: -97px;
  display: none;
  z-index: 1000;
}

.verifyPhonePopup .common-bnt {
  float: right;
  padding: 10px 15px;
  clear: none;
}

.verifyPhonePopup .common-bnt.skip {
  float: left;
  background: none;
  padding: 10px 0;
  font-weight: normal;
}

.common-bnt {
  background: #fde418;
  outline: none;
  clear: none;
  margin-right: 1px;
  text-transform: uppercase;
  padding: 15px 15px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  letter-spacing: 1px;
  margin-top: 4px;
  color: #222;
  cursor: pointer;
  display: inline-block;
}

.common-bnt:hover {
  background: rgba(253, 228, 24, 0.6);
}

.common-bnt.plane {
  background: none;
  padding: 15px 0;
  font-weight: normal;
}

.common-bnt.gray {
  background: #ccc;
}

.common-bnt.gray:hover {
  background: #ddd;
}

.common-bnt.sml {
  padding: 5px 10px;
}

.common-bnt.bordered {
  border: 1px solid #ccc;
  background: none;
}

.common-bnt.rounded {
  border-radius: 30px;
}

.common-bnt.right {
  float: right;
}

.common-bnt.left {
  float: left;
}

.verifyBtn {
  background: #F50093;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 5px;
  cursor: pointer;
}

.m-r-10 {
  margin-right: 10px;
}

.hideInEditmode {
  float: left;
  max-width: 150px;
}

.showInEditMode {
  display: none;
  float: left;
  max-width: 150px;
}

.footer_section {
  width: 100%;
  height: 140px;
  float: left;
  background-color: #5d5c5a;
}

.footer_section .colm1 {
  width: 36%;
  height: 140px;
  float: left;
  display: inline-block;
  border-right: 1px solid #929292;
}

.footer_section .colm1 .ftr_menu {
  margin-top: 50px;
  display: table;
}

.footer_section .colm1 .ftr_menu li {
  display: inline-block;
  float: left;
  width: auto;
  height: auto;
  border-right: 2px solid #929292;
  line-height: 14px;
  margin-right: 12px;
  padding-right: 12px;
}

.footer_section .colm1 .ftr_menu li:last-child {
  border-right: 0px;
}

.footer_section .colm1 .ftr_menu li a {
  color: #fff;
  font-size: 14px;
}

.footer_section .colm1 .ftr_menu li a:hover {
  color: #fdd318;
}

.footer_section .colm1 .ft_ad {
  display: table;
  color: #fff;
  width: 100%;
  height: auto;
  margin-top: 5px;
  font-size: 14px;
}

.footer_section .colm2 {
  width: 41%;
  height: 140px;
  float: left;
  position: relative;
  border-right: 1px solid #929292;
}

.footer_section .colm2 .gm_icon {
  width: 98px;
  height: 99px;
  float: left;
  margin: 40px 0px 0px 10%;
  background: url(../images/game_icon.png) no-repeat;
}

.footer_section .colm2 .gm_cnt {
  float: left;
  margin-top: 38px;
  width: auto;
  display: table;
}

.footer_section .colm2 .gm_cnt h3 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}

.footer_section .colm2 .gm_cnt p {
  font-size: 15px;
  color: #c9c9c9;
  margin: 3px 0px 5px;
}

.footer_section .colm2 .gm_cnt h4 a {
  font-size: 12px;
  text-transform: uppercase;
  color: #fdd318;
  font-weight: 600;
  letter-spacing: 2px;
}

.footer_section .colm2 .gm_cnt h4 a:hover {
  color: #fde98f;
}

.footer_section .colm2:hover .gm_icon {
  width: 98px;
  height: 99px;
  float: left;
  margin: 40px 0px 0px 10%;
  background: url(../images/game_icon-hover.png) no-repeat;
}

.footer_section .colm2:hover h4 a {
  color: #fde98f;
}

.footer_section .colm2 .Popupbox {
  width: auto;
  height: auto;
  background: #fff;
  position: absolute;
  top: -15px;
  left: 147px;
  display: none;
  border-radius: 2px;
  padding: 10px 20px;
  box-shadow: 0px 0px 5px 0px rgba(4, 4, 4, 0.05);
}

.footer_section .colm2 .Popupbox p {
  color: red;
  font-size: 12px;
  margin: 0px;
  font-weight: 400;
}

.footer_section .colm2 .Popupbox:before {
  content: "\f0d7";
  position: absolute;
  bottom: -16px;
  font-size: 27px;
  color: #fff;
  font-family: FontAwesome;
}

.footer_section .p_pup {
  display: block !important;
}

.footer_section .social_outer {
  display: table;
  float: right;
  height: auto;
  width: auto;
  margin-top: 52px;
}

.footer_section .social_outer .icons {
  width: 42px;
  height: 42px;
  float: left;
  margin-left: 3px;
}

.footer_section .social_outer .sc1 {
  background: url(../images/twitter.png);
}

.footer_section .social_outer .sc1:hover {
  background: url(../images/twitter-hover.png);
}

.footer_section .social_outer .sc2 {
  background: url(../images/g-plus.png);
}

.footer_section .social_outer .sc2:hover {
  background: url(../images/g-plus-hover.png);
}

.footer_section .social_outer .sc3 {
  background: url(../images/linkedin.png);
}

.footer_section .social_outer .sc3:hover {
  background: url(../images/linkedin-hover.png);
}

.footer_section .social_outer .sc4 {
  background: url(../images/facebook.png);
}

.footer_section .social_outer .sc4:hover {
  background: url(../images/facebook-hover.png);
}

.footer_section .social_outer .sc5 {
  background: url(../images/camicon.png);
}

.footer_section .social_outer .sc5:hover {
  background: url(../images/camicon-hover.png);
}

.footer_section .mobileSocial {
  display: none;
}

@media screen and (max-width: 768px) {
  .footer_section {
    position: relative;
  }

  .footer_section .container {
    max-width: 100%;
    padding: 10px;
  }

  .footer_section .colm2 {
    display: none !important;
  }

  .footer_section .social_outer {
    position: absolute;
    right: 10px;
    bottom: 101%;
    margin: 0 !important;
    width: 30px !important;
    padding: 0 !important;
    display: none;
  }

  .footer_section .social_outer .icons {
    width: 32px;
    height: 32px;
    margin: 0;
    background-size: 100% 100% !important;
  }

  .footer_section .colm1 {
    float: left !important;
    padding: 0 !important;
    height: auto;
    border: 0;
  }

  .footer_section .colm1 .ftr_menu {
    margin: 0 !important;
  }

  .footer_section .colm1 .ftr_menu li a {
    font-size: 12px;
  }

  .footer_section .colm1 .ft_ad {
    display: inherit;
    width: 100%;
    height: auto;
    margin: 0 0 5px;
    text-align: left !important;
    font-size: 12px;
  }

  .footer_section .mobileSocial {
    float: right;
    display: block;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    margin-top: -3px;
    text-align: center;
    padding-top: 4px;
    color: #bbb;
  }
}

.cnt-fuild {
  width: 100%;
  min-height: 265px;
  background: #2aa9e6;
  margin-top: 81px;
  padding-top: 40px;
  float: left;
}

@media screen and (max-width: 650px) {
  .cnt-fuild {
    margin-top: 66px;
  }
}

@media screen and (max-width: 368px) {
  .cnt-fuild {
    margin-top: 61px;
  }
}

@media screen and (max-height: 420px) {
  .cnt-fuild {
    margin-top: 0;
  }
}

.cnt-fuild .bannerCourseDetails {
  float: left;
  width: 100%;
  margin: 15px 0 30px;
}

.cnt-fuild .bannerCourseDetails .courseBox {
  width: 275px;
  float: left;
}

.cnt-fuild .bannerCourseDetails .courseBox .colm-div1 .im-outer {
  height: 133px;
}

@media screen and (max-width: 450px) {
  .cnt-fuild .bannerCourseDetails .courseBox {
    width: 100%;
  }
}

.cnt-fuild .bannerCourseDetails .badges {
  float: left;
  width: calc(100% - 500px);
  padding: 0 0 0 50px;
  color: #fff;
}

.cnt-fuild .bannerCourseDetails .badges h2 {
  font-weight: normal;
  padding-left: 15px;
}

.cnt-fuild .bannerCourseDetails .badges p {
  padding-left: 15px;
  margin: 0 0 30px 0;
}

@media screen and (max-width: 980px) {
  .cnt-fuild .bannerCourseDetails .badges {
    width: calc(100% - 290px);
  }
}

@media screen and (max-width: 450px) {
  .cnt-fuild .bannerCourseDetails .badges {
    width: 100%;
    padding: 20px 0 0 0;
  }

  .cnt-fuild .bannerCourseDetails .badges h2,
  .cnt-fuild .bannerCourseDetails .badges p {
    padding: 0;
  }
}

.cnt-fuild .bannerCourseDetails .progess {
  width: 150px;
  height: 150px;
  float: right;
  margin: 5% 0 0;
}

@media screen and (max-width: 980px) {
  .cnt-fuild .bannerCourseDetails .progess {
    width: 70px;
    float: left;
    margin-left: 50px;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .cnt-fuild .bannerCourseDetails .progess {
    display: none;
  }
}

.cnt-fuild .bannerCourseDetails .badgeWrapper {
  width: 60px;
  margin: 0 2%;
  min-height: auto;
  max-width: 16%;
  display: inline-block;
}

.cnt-fuild .bannerCourseDetails .badgeWrapper .template .name {
  font-size: 16px;
  display: none;
}

@media screen and (max-width: 650px) {
  .cnt-fuild {
    margin-top: 66px;
    height: auto;
    padding-bottom: 15px;
  }

  .cnt-fuild h1 {
    font-size: 19px !important;
  }

  .cnt-fuild p {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 369px) {
  .cnt-fuild {
    margin-top: 60px;
  }
}

.cnt-fuild .pge-my-crc h3 a {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}

.cnt-fuild .pge-my-crc h3 a:hover {
  color: #fdd318;
}

.cnt-fuild .pge-my-crc .col-wd {
  width: auto;
  height: auto;
  display: table;
  margin: auto;
}

.cnt-fuild .pge-my-crc .col-wd .col-wd-in1 {
  float: left;
  margin-right: 20px;
}

.cnt-fuild .pge-my-crc .col-wd .col-wd-in2 {
  float: left;
  width: auto;
  height: auto;
  padding-top: 25px;
}

.cnt-fuild .pge-my-crc .col-wd .col-wd-in2 h1 {
  font-size: 30px;
  font-weight: 400;
  font-family: 'Raleway', sans-serif;
  color: #fff;
}

.cnt-fuild .pge-my-crc .col-wd .col-wd-in2 p {
  font-weight: 300;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  margin: 10px 0px;
}

.recent-outer-bg {
  padding-top: 0px !important;
}

.recent-outer {
  width: 100%;
  height: auto;
  padding-top: 50px;
  margin-bottom: 4%;
}

@media screen and (max-width: 767px) {
  .recent-outer {
    display: none;
  }
}

.recent-outer h3 {
  font-size: 20px;
  color: #383838;
  font-weight: 700;
  margin-bottom: 20px;
}

.recent-outer .col-sml {
  width: auto;
  display: table;
  float: left;
  margin-right: 30px;
}

.recent-outer .col-sm2 {
  float: left;
  display: table;
  width: auto;
  height: auto;
}

.recent-outer .col-sm2 h3 {
  font-size: 16px;
  color: #373636;
  font-weight: 400;
}

.recent-outer .col-sm2 p {
  font-weight: 500;
  font-size: 14px;
  color: #888888;
}

.recent-outer .col-sm2 p a {
  text-decoration: underline;
  color: #191919;
  font-weight: 500;
  font-size: 14px;
}

.recent-outer .col-sm2 a {
  color: #191919;
  font-size: 12px;
  text-decoration: underline;
}

.recent-outer .col-sm2 a:hover {
  color: #888888;
}

.crse-clom-lg {
  width: 100%;
  height: auto;
  float: left;
  position: relative;
}

.crse-clom-lg h3 {
  font-size: 20px;
  font-weight: 700;
  color: #181715;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .crse-clom-lg h3 {
    margin-top: 20px;
  }
}

@media screen and (max-width: 600px) {
  .crse-clom-lg h3 {
    margin-bottom: -26px;
    position: relative;
    z-index: 2;
    float: left;
    background: #f7f7f7;
    padding-right: 30px;
  }

  .crse-clom-lg h3:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f078";
    margin: 0 0 0 5px;
    color: #ccc;
    font-size: 11px;
    background: #fff;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    position: absolute;
    right: -2px;
    line-height: 20px;
    top: 4px;
    text-align: center;
  }
}

.crse-clom-lg .owl-carousel.owl-loaded {
  float: left;
}

.crse-clom-lg .items {
  padding: 0;
  margin: 0 -10px;
}

@media screen and (max-width: 801px) {
  .crse-clom-lg .items {
    margin: 15px 0 0;
    float: left;
    width: 100%;
  }
}

.crse-clom-lg .items .owl-stage-outer {
  padding: 30px 10px;
}

@media screen and (max-width: 801px) {
  .crse-clom-lg .items .owl-stage-outer {
    padding: 30px 0 0;
  }
}

.crse-clom-lg .items .owl-nav {
  top: -10px;
}

.crse-clom-lg .owl-nav {
  display: table;
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
}

.crse-clom-lg .owl-prev {
  font-size: 0px;
  background: url(../images/crsl-prev.png) no-repeat;
  width: 28px;
  height: 28px;
  float: left;
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

.crse-clom-lg .owl-prev:hover {
  background: url(../images/crsl-prev-hover.png) no-repeat;
  width: 28px;
  height: 28px;
}

.crse-clom-lg .owl-next {
  font-size: 0px;
  background: url(../images/crsl-next.png) no-repeat;
  width: 28px;
  height: 28px;
  float: left;
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

.crse-clom-lg .owl-next:hover {
  background: url(../images/crsl-next-hover.png) no-repeat;
  width: 28px;
  height: 28px;
}

.crse-clom-lg.welcome-page {
  margin-top: 70px;
}

.colm-div1 {
  width: 100%;
  min-height: 270px;
  box-shadow: 0px 0px 10px 0px #dadada;
  padding-bottom: 10px;
}

.colm-div1 p {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 20px;
  padding: 0px 15px;
  color: #212121;
}

.colm-div1 .im-outer {
  width: 100% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.colm-div1 .im-outer img {
  width: 100% !important;
  height: 205px;
}

@media screen and (max-width: 1024px) {
  .colm-div1 {
    min-height: auto;
  }
}

.itm-hvr-div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 14px;
  right: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 25px 0px;
  box-shadow: 0px 0px 10px 0px #cccccc;
}

.itm-hvr-div:hover {
  opacity: 1;
}

.itm-hvr-div .start-btn {
  background: #fff;
  text-align: center;
  padding: 5px;
  border-top: 1px solid #e1e0df;
  border-bottom: 1px solid #e1e0df;
  display: block;
  color: #212121;
  position: absolute;
  bottom: 47px;
  width: 100%;
}

.itm-hvr-div .start-btn .fa {
  color: #1fc000;
}

.itm-hvr-div .start-btn:hover {
  background: #1fc000;
  color: #fff;
}

.itm-hvr-div .start-btn:hover .fa {
  color: #fff;
}

.itm-hvr-div .title,
.itm-hvr-div span {
  text-align: center;
  width: 100%;
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #212121;
  margin-bottom: 15px;
  padding: 0px 15px;
}

.itm-hvr-div .title img,
.itm-hvr-div span img {
  width: auto !important;
  margin: auto;
}

.itm-hvr-div .title:hover,
.itm-hvr-div span:hover {
  text-decoration: underline;
}

.itm-hvr-div .Level {
  margin-bottom: 5px;
}

.itm-hvr-div h5 {
  font-size: 12px;
  text-transform: uppercase;
  color: #626262;
  text-align: center;
  font-weight: 400;
}

.itm-hvr-div p {
  font-size: 13px;
  text-align: center;
  line-height: 20px;
  color: #626262;
  padding: 0px 15px;
  min-height: 81px;
}

.itm-hvr-div .line {
  width: 100%;
  height: 1px;
  background: #e1e0df;
  display: none;
}

.itm-hvr-div .crt-sec {
  width: 100%;
  height: auto;
  display: block;
  padding: 13px 15px 0px;
  position: absolute;
  bottom: 13px;
}

.itm-hvr-div .crt-sec h4 {
  font-size: 14px;
  color: #000000;
  font-weight: 600;
  display: inline-block;
}

.itm-hvr-div .crt-sec h4 span {
  display: inline-block;
  width: auto;
  text-decoration: line-through;
  color: #8d8d8d;
  font-weight: 400;
  padding: 0px 5px;
}

.itm-hvr-div .crt-sec .crt-icon {
  display: table;
  float: right;
  width: auto;
  height: auto;
}

.itm-hvr-div .crt-sec .crt-icon .crt-icon {
  background: url(../images/cart-icon.png);
  width: 24px;
  height: 24px;
  margin-top: -3px;
  margin-left: 5px;
}

.itm-hvr-div .crt-sec .crt-icon .ic1 {
  background-position: -25px 0px;
}

.itm-hvr-div .crt-sec .crt-icon .ic2 {
  background-position: 1px 0px;
}

.itm-hvr-div .closeDes {
  display: none;
}

@media screen and (max-width: 1024px) {
  .itm-hvr-div {
    display: none;
    bottom: 0;
    opacity: 1;
  }

  .itm-hvr-div .closeDes {
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    color: #666666;
  }
}

.stry-makeouter {
  width: 100%;
  margin: 30px 0;
  float: left;
  position: relative;
  overflow: hidden;
}

.stry-makeouter .owl-stage-outer {
  min-height: auto;
}

.stry-makeouter .owl-stage-outer .items {
  min-height: auto;
}

.stry-makeouter .story-cnt {
  width: 350px;
  height: auto;
  position: absolute;
  right: 75px;
  bottom: 30px;
}

@media screen and (max-width: 670px) {
  .stry-makeouter .story-cnt {
    right: auto;
    bottom: 30px;
    left: 100px;
  }
}

.stry-makeouter .story-cnt h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

@media screen and (max-width: 670px) {
  .stry-makeouter .story-cnt h3 {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }
}

.stry-makeouter .story-cnt a {
  font-size: 14px;
  color: #171717;
  background: #fdd318;
  padding: 10px 15px;
  font-weight: 800;
  margin-top: 15px;
  display: table;
}

.stry-makeouter .story-cnt a:hover {
  background: rgba(253, 211, 24, 0.78);
}

.stry-makeouter .owl-dots {
  margin: auto;
  position: absolute;
  bottom: 5px;
  left: 0;
  text-align: center;
  right: 0;
}

.stry-makeouter .owl-dots .owl-dot {
  display: inline-block;
  float: none;
}

@media screen and (max-width: 1100px) {
  .stry-makeouter .owl-dots {
    left: 0;
    bottom: 10px;
    right: auto;
  }
}

.stry-makeouter .owl-dot {
  background: #91928e;
  z-index: 1000;
  width: 11px;
  height: 11px;
  float: left;
  margin: 5px;
  border-radius: 50%;
}

.stry-makeouter .owl-dot:hover {
  background: #fff;
}

.stry-makeouter .owl-dot.active {
  background: #fff !important;
}

.tag-bg {
  position: relative;
  z-index: 2;
  background-size: cover;
  margin: 0 0 -20px;
  float: left;
}

@media screen and (max-width: 600px) {
  .tag-bg {
    position: absolute;
    top: 51px;
    background: #fff;
    box-shadow: 0 0 5px 0 #ccc;
    z-index: 100;
    display: none;
  }
}

@media screen and (min-width: 601px) {
  .tag-bg {
    display: block !important;
  }
}

.tag-bg .links {
  float: left;
  list-style: none;
}

@media screen and (max-width: 600px) {
  .tag-bg .links {
    width: 100%;
  }
}

.tag-bg .links.active a {
  color: #7b7a7a !important;
  border-color: #1fc000;
}

.tag-bg .links a {
  border: 1px solid #ddd;
  color: #e1e1e1;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  padding: 2px 10px;
  border-radius: 15px;
  margin-right: 5px;
}

.tag-bg .links a:hover {
  color: #7b7a7a;
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

@media screen and (max-width: 600px) {
  .tag-bg .links a {
    display: block;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #eee;
    margin: 0;
    padding: 5px;
  }
}

.lnk1 {
  text-align: center;
}

.lnk3 {
  text-align: right;
  padding-bottom: 20px;
}

.lnk5 {
  text-align: right;
  padding-right: 35px;
}

.owl-stage-outer {
  width: 100%;
  float: left;
}

.owl-stage-outer .items {
  min-height: 350px;
}

.owl-stage-outer .items .courseColumn {
  display: inline-block;
  float: left;
  height: auto !important;
  background: none;
  padding: 10px 0;
  position: relative;
  margin: 0 !important;
  width: 100% !important;
}

#html5-lightbox-box {
  margin-top: 5% !important;
}

.owl-carousel.owl-loaded {
  float: left;
}

.site-popup {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100000;
  display: none;
  overflow: auto;
}

.site-popup .bg {
  background: #000;
  opacity: .8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}

.site-popup .site-popup-content {
  background: #fff;
  width: 600px;
  margin: 60px auto;
  position: relative;
  z-index: 10;
  padding: 0 50px 50px;
  text-align: center;
  overflow: hidden;
  border-radius: 5px;
  max-width: 90%;
  transition: all .5s ease;
  opacity: 0;
  transform: scale(0.5);
}

.site-popup .site-popup-content .site-popup-close {
  position: absolute;
  right: 11px;
  top: 6px;
  font-size: 20px;
  cursor: pointer;
  color: #000000;
}

.site-popup.active .site-popup-content {
  top: 0;
  height: auto;
  opacity: 1;
  transform: scale(1);
}

.start_page {
  width: 500px;
  height: auto;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 20px;
}

.start_page.popup {
  width: auto;
  margin-top: 40px;
}

.start_page.popup h3 {
  margin-bottom: 15px;
}

.start_page h3 {
  font-size: 20px;
  text-align: center;
  color: #4d4d4d;
  font-weight: 400;
  line-height: 35px;
}

.start_page .start {
  display: table;
  width: auto;
  height: auto;
  margin: 50px auto;
}

.start_page .start_link {
  display: table;
  width: auto;
  height: auto;
  margin: auto;
  background: #5cb85c;
  padding: 15px 25px;
  text-transform: uppercase;
  text-shadow: 0px 2px 2px #8f8f8f;
  font-weight: 700;
  font-size: 15px;
  border-radius: 5px;
  color: #fff;
  position: relative;
}

.start_page .start_link:hover {
  background: rgba(92, 184, 92, 0.8);
}

.start_page .start_link:before {
  content: "";
  background: url(../images/shadwo.png) no-repeat;
  width: 149px;
  height: 43px;
  position: absolute;
  bottom: -40px;
  left: -6px;
}

.start_page .start_link.normal {
  text-transform: none;
}

.correcr_page {
  background: #fff;
  display: inline-block;
  border-bottom: 1px solid #e5e5e5;
}

.correcr_container {
  position: relative;
  width: 900px;
  height: auto;
  margin: auto;
  padding-top: 110px;
}

@media screen and (max-height: 420px) {
  .correcr_container {
    padding-top: 10px !important;
  }
}

.correcr_container .svn_stpdiv {
  width: 100%;
  height: auto;
  display: table;
  padding-left: 57px;
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .correcr_container .svn_stpdiv {
    padding-left: 0;
  }
}

.correcr_container .svn_stpdiv .lftdiv1 {
  width: auto;
  height: auto;
  display: inline-block;
  float: left;
  font-weight: 400;
  font-size: 14px;
  color: #a0a0a0;
  line-height: 48px;
}

.correcr_container .svn_stpdiv .stpotr {
  width: 460px;
  height: auto;
  display: inline-block;
  float: right;
  position: relative;
}

@media screen and (max-width: 530px) {
  .correcr_container .svn_stpdiv .stpotr {
    float: left;
  }
}

.correcr_container.videoQuestion {
  width: 1200px;
  max-width: 100%;
  background: #ffffff;
  padding-top: 0;
  margin-top: 82px;
  position: relative;
  padding-top: 15px;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion {
    margin-top: 81px;
    padding-top: 0;
  }
}

@media screen and (max-width: 650px) {
  .correcr_container.videoQuestion {
    margin-top: 69px;
    padding-top: 0 !important;
  }
}

@media screen and (max-width: 368px) {
  .correcr_container.videoQuestion {
    margin-top: 62px;
  }
}

@media screen and (max-height: 420px) {
  .correcr_container.videoQuestion {
    margin-top: 0;
  }
}

.correcr_container.videoQuestion .video-wrapper {
  width: 100%;
  position: absolute;
  margin-top: 0;
  top: 0;
  height: 100%;
  left: 0;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper {
    top: 44px;
    display: block;
    height: auto;
    bottom: 0;
  }
}

@media screen and (max-height: 420px) {
  .correcr_container.videoQuestion .video-wrapper {
    z-index: auto;
  }
}

.correcr_container.videoQuestion .video-wrapper>div {
  width: 100%;
  height: 500px;
}

.correcr_container.videoQuestion .video-wrapper>div .vjs-fullscreen-control {
  display: none;
}

.correcr_container.videoQuestion .video-wrapper .video-q-wrapper {
  position: absolute;
  padding: 0;
  height: 100%;
  margin-bottom: 0;
  left: 0;
  top: 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .video-q-wrapper {
    padding: 0;
  }
}

@media screen and (min-width: 1024px) {
  .correcr_container.videoQuestion .video-wrapper .video-q-wrapper .video-js.vjs-16-9 {
    background: #e9e9e9;
    height: 100%;
    padding: 0;
  }

  .correcr_container.videoQuestion .video-wrapper .video-q-wrapper .video-js.vjs-16-9 video {
    object-fit: fill;
  }
}

@media screen and (max-height: 420px) {
  .correcr_container.videoQuestion .video-wrapper .video-q-wrapper .video-js.vjs-16-9 {
    height: 95%;
    padding: 0;
  }
}

.correcr_container.videoQuestion .video-wrapper .videooverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 31px;
  background: #e9e9e9;
  z-index: 5;
  display: none;
  padding-top: 50px;
}

.correcr_container.videoQuestion .video-wrapper .videooverlay .video-question-wrapper {
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .videooverlay {
    left: 0;
    right: 0;
  }
}

.correcr_container.videoQuestion .video-wrapper .videooverlay .crt_section2 {
  min-height: 0 !important;
}

.correcr_container.videoQuestion .video-wrapper .videooverlay.trans {
  background: rgba(255, 255, 255, 0.8);
}

.correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  z-index: 10000;
  display: none;
  padding-top: 50px;
}

@media screen and (max-height: 420px) {
  .correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle {
    padding-top: 0;
  }
}

.correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  padding: 50px;
  height: 100%;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper {
    padding: 10px;
    top: 52px;
  }
}

@media screen and (max-height: 420px) {
  .correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper {
    top: 0;
  }

  .correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper .pic_rit {
    display: none;
  }
}

.correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper .crt_section2 {
  margin: auto;
  background: #fff;
  padding: 35px;
  box-shadow: 0 0 30px -6px #000;
  max-width: 730px;
}

@media screen and (min-width: 1024px) {
  .correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper .crt_section2 {
    margin-top: 111px;
  }
}

.correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper .crt_section2 .radio-outer {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .videooverlay.popupstyle .video-question-wrapper .crt_section2 {
    padding: 10px;
  }
}

.correcr_container.videoQuestion .video-wrapper .next-step-popup {
  background: rgba(47, 168, 227, 0.7);
  box-shadow: -3px -1px 6px -2px #000;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  right: 0;
  z-index: 10;
  color: #fff;
  padding: 15px;
  padding-left: 100px;
  min-height: 100px;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .next-step-popup {
    padding-left: 80px;
  }
}

.correcr_container.videoQuestion .video-wrapper .next-step-popup h1 {
  font-size: 20px;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .next-step-popup h1 {
    font-size: 16px;
  }
}

.correcr_container.videoQuestion .video-wrapper .next-step-popup h2 {
  font-size: 16px;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .next-step-popup h2 {
    font-size: 12px;
  }
}

.correcr_container.videoQuestion .video-wrapper .next-step-popup p {
  font-size: 12px;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .next-step-popup p {
    font-size: 10px;
  }
}

.correcr_container.videoQuestion .video-wrapper .next-step-popup .lesson-image {
  height: 70px;
  float: left;
  position: absolute;
  left: 15px;
  top: 15px;
}

@media screen and (max-width: 767px) {
  .correcr_container.videoQuestion .video-wrapper .next-step-popup .lesson-image {
    height: 60px;
  }
}

.correcr_container.videoQuestion .video-wrapper .next-step-popup .lesson-image img {
  height: 100%;
  width: auto;
}

.correcr_container.videoQuestion .video-wrapper .disable-controls {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 31px;
  background: rgba(255, 255, 255, 0.8);
  display: none;
}

.failed_section {
  background: rgb(220, 53, 69) !important
}

.sucses_section {
  width: 100%;
  height: auto;
  background: #e7f4e7;
  border-top: 1px solid #e7eae7;
  padding-bottom: 34px;
}

.sucses_section.normal {
  background: #fff;
  border-top: 1px solid #ddd;
}
.sucses_section.playgame {
  background: #FBD413 !important;
   }
@media screen and (max-height: 420px) {
  .sucses_section {
    padding-bottom: 10px;
  }
}

.sucses_section .correcr_container {
  padding-bottom: 0px;
  display: table;
  padding-top: 35px;
}

.sucses_section h3 {
  float: left;
}

.sucses_section h3 a {
  font-size: 14px;
  color: #8d8d8d;
  border: 1px solid #8d8d8d;
  border-radius: 5px;
  font-weight: 400;
  text-align: center;
  line-height: 45px;
  display: inline-block;
  width: 147px;
  height: 45px;
}

.sucses_section .next_sec-outer {
  width: auto;
  height: auto;
  display: table;
  float: right;
}

.sucses_section .next_sec-outer .txt {
  position: relative;
  padding-left: 55px;
}

.sucses_section .next_sec-outer .txt .tic {
  float: left;
  margin-right: 10px;
  position: absolute;
  left: 0;
}

@media screen and (max-width: 400px) {
  .sucses_section .next_sec-outer .txt .tic {
    font-size: 40px;
  }
}

@media screen and (max-width: 400px) {
  .sucses_section .next_sec-outer .txt {
    margin-bottom: 15px;
  }
}

.sucses_section .next_sec-outer .crct {
  float: left;
  font-size: 20px;
  color: #1fc000;
  margin-right: 35px;
}

.sucses_section .next_sec-outer .crct.answer {
  font-size: 16px;
  max-width: 330px;
  line-height: 20px;
  margin-top: 3px;
}

.sucses_section .next_sec-outer .nxt-stp {
  float: left;
  position: relative;
}

.sucses_section .next_sec-outer .nxt-stp input {
  width: 150px;
  height: 45px;
  border: none;
  border-radius: 5px;
  background: #5cb85c;
  color: #fff;
  text-shadow: 0px 1px 2px #444;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  outline: none;
}

.sucses_section .next_sec-outer .nxt-stp input:hover {
  background: rgba(92, 184, 92, 0.65);
}

.sucses_section .next_sec-outer .nxt-stp input:disabled {
  opacity: .5;
  background: #5cb85c !important;
}

@media screen and (max-width: 767px) {
  .sucses_section .next_sec-outer .nxt-stp input {
    width: auto;
    height: 40px;
    padding: 0 16px;
  }
}

.sucses_section .next_sec-outer .nxt-stp #explode {
  bottom: 105%;
  right: 0;
  left: auto;
  margin: 0;
}

.sucses_section.incorrect {
  background: #ffd9d9;
  border-top: 1px solid #ffabab;
}

.sucses_section.incorrect .next_sec-outer .txt .tic {
  color: #fc0606;
}

.sucses_section.incorrect .next_sec-outer .crct {
  color: #fc0606;
}

.sucses_section.incorrect .next_sec-outer .crct font {
  color: #1fc000;
}

.sucses_section.submit-first {
  background: #ffffff;
  border-top: 1px solid #e7eae7;
}

.sucses_section.voice-message h3.static {
  margin-top: 9px;
}

.disction-fluid {
  width: 100%;
  height: auto;
  background: #f7f7f7;
  display: table;
}

.disction-fluid .correcr_container {
  width: 900px;
  height: auto;
  margin: auto;
  padding-top: 0px;
}

.disction-fluid h3 a {
  color: #474747;
}

.disction-fluid h3 a span {
  font-size: 18px;
  font-weight: 300;
  float: left;
  margin: 22px 0px;
}

.disction-fluid h3 a .pls {
  float: left;
  font-size: 24px;
  margin-left: 5px;
  line-height: 26px;
}

@media screen and (max-width: 767px) {
  .disction-fluid {
    display: none;
  }
}

.video-question-outer {
  width: 100%;
  height: auto;
  background: #e9e9e9;
  margin: auto;
  padding-bottom: 5%;
  margin-bottom: 6%;
}

@media screen and (max-width: 767px) {
  .video-question-outer {
    background: #fff;
  }
}

.video-question-outer .correcr_container {
  padding-top: 6px;
  padding-bottom: 6px;
}

.video-question-outer .video_div1 {
  width: 90%;
  height: auto;
  margin: auto;
  background: #f7f7f7;
  display: table;
}

.video-question-outer .video_div1 iframe {
  width: 100%;
  height: 500px;
  border: 0px;
}

.video-question-outer .crt_section2-outer {
  width: 100%;
  height: auto;
  background: #f7f7f7;
  display: table;
  margin-top: 10px;
}

.video-question-outer .vdo-qtp1 {
  margin-top: 10px;
  padding-top: 7%;
}

.video-question-outer .skip-outer {
  display: table;
  float: right;
  margin-bottom: 0;
  margin-right: 0;
  float: right;
}

.video-question-outer .skip-outer .crct {
  float: left;
  font-size: 20px;
  color: #1fc000;
  margin-right: 35px;
  margin-top: -12px;
}

.video-question-outer .skip-outer .tic {
  float: left;
  margin-right: 10px;
  margin-top: -9px;
  font-size: 46px;
  color: #1fc000;
  margin-top: -18px;
}

.video-question-outer .skip-outer .currecr-colm1 {
  float: right;
}

.video-question-outer .skip-outer .currecr-colm1.incorrect .crct {
  color: #fc0606;
  padding-top: 12px;
}

.video-question-outer .skip-outer .currecr-colm1.incorrect .tic {
  color: #fc0606;
}

.video-question-outer .skip-outer .po_pup {
  display: block !important;
}

.video-question-outer .sbmit-bt {
  font-size: 16px;
  text-transform: uppercase;
  background: #5cb85c;
  color: #fff;
  border: 0px;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: 400;
  text-shadow: 0px 0px 3px #000;
  outline: none;
  float: right;
}

.video-question-outer .sbmit-bt:hover {
  opacity: 0.7;
}

.video-question-outer .skip-bt {
  font-size: 16px;
  background: #f7f7f7;
  color: #ababab;
  border: 1px solid #ababab;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: 400;
  outline: none;
  margin-right: 10px;
  float: right;
}

.video-question-outer .skip-bt:hover {
  background: #e0e0e0;
}

.lft_tab {
  width: 380px;
  height: auto;
  margin-left: -380px;
  position: fixed;
  top: 0px;
  left: 0px;
  background: #2fa8e3;
  z-index: 1000;
  bottom: 0;
}

.lft_tab .lft_tab-scrl {
  position: absolute;
  left: 30px;
  top: 90px;
  right: 20px;
  bottom: 30px;
  padding-right: 10px;
}

.lft_tab .lft_tab-scrl .sidecontent {
  padding-right: 10px;
}

.lft_tab .prgrs-div {
  padding-bottom: 20px;
}

.lft_tab .situational {
  border-bottom: 1px solid #2a97cc;
  padding: 30px 0px;
}

.lft_tab .situational h4 {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  padding: 2px 0px;
}

.lft_tab .situational h4.intro {
  font-size: 12px;
}

.lft_tab .situational ul {
  display: inline-block;
  float: left;
}

.lft_tab .situational ul li {
  display: inline-block !important;
  float: left;
  background: #fff;
  margin-right: 7px !important;
}

.lft_tab .situational ul li a {
  color: #026494;
  font-size: 12px;
  float: left;
  padding: 5px;
}

.lft_tab .situational ul li .aro {
  background: #1086bf;
  width: 13px;
  height: 27px;
  float: left;
  text-align: center;
  line-height: 25px;
}

.lft_tab .situational ul .active {
  background: #38d01a;
}

.lft_tab .situational ul .active a {
  color: #fff;
}

.lft_tab p {
  width: 85%;
  float: left;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 20px;
}

.lft_tab .bi-bar {
  width: 86% !important;
  border-radius: 5px;
  overflow: hidden;
  height: 7px !important;
  top: 5px !important;
  background: rgba(255, 255, 255, 0.83);
}

.lft_tab .prgrs-div .bi-milestone {
  display: none !important;
}

.lft_tab .prgrs-div span.bi-label {
  float: right !important;
  padding: 0px 0px !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
}

.lft_tab .clm-outer {
  padding-left: 40px;
  border-bottom: 1px solid #2a97cc;
  position: relative;
}

.lft_tab .clm-outer.no-icon {
  padding-left: 0;
}

.lft_tab .clm-outer h4 {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  padding: 20px 0px;
}

.lft_tab .clm-outer ul {
  padding: 10px 0px;
  overflow: hidden;
}

.lft_tab .clm-outer ul li {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0px;
  position: relative;
  padding-right: 20px;
}

.lft_tab .clm-outer ul li>i {
  position: absolute;
  right: 0;
  top: 2px;
}

.lft_tab .clm-outer ul li .active:before {
  content: "";
  background: url(../images/tab-content-active.png) no-repeat;
  width: 9px;
  height: 15px;
  display: inline-block;
  float: left;
  margin-top: 3px;
  margin-right: 10px;
}

.lft_tab .clm-outer ul li a {
  color: #b4def3;
}

.lft_tab .clm-outer ul li a:before {
  content: "";
  background: url(../images/tab-content-normal.png) no-repeat;
  width: 9px;
  height: 15px;
  display: inline-block;
  float: left;
  margin-top: 3px;
  margin-right: 10px;
}

.lft_tab .clm-outer ul li a:hover {
  color: #fff;
}

.lft_tab .clm-outer ul li a:hover:before {
  content: "";
  background: url(../images/tab-content-hover.png) no-repeat;
  width: 9px;
  height: 15px;
  display: inline-block;
  float: left;
  margin-top: 3px;
  margin-right: 10px;
}

.lft_tab .mrdiv {
  width: auto;
  height: auto;
  cursor: pointer;
  float: right;
  margin-top: -10px;
  background: #2a97cc;
  position: absolute;
  z-index: 2;
  right: 10px;
}

.lft_tab .mrdiv a {
  color: #000;
  font-size: 12px;
  font-weight: 600;
}

.lft_tab .mrdiv:before {
  content: "";
  display: inline-block;
  background: url(../images/left-tab-down-arrow.png) no-repeat;
  width: 10px;
  height: 6px;
  margin: 5px 5px 2px;
}

.lft_tab .mrdiv.active:before {
  content: "";
  display: inline-block;
  background: url(../images/left-tab-up-arrow.png) no-repeat;
  width: 10px;
  height: 6px;
  margin: 5px 5px 2px;
}

.lft_tab .badge-outer {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
  padding-top: 25px;
}

.lft_tab .badge-outer .badgeWrapper {
  width: 100px;
}

.lft_tab .badge-outer .owl-stage-outer .items {
  min-height: auto;
}

.lft_tab .badge-outer h4 {
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 25px;
}

.lft_tab .badge-outer ul {
  display: table;
  margin: auto;
}

.lft_tab .badge-outer ul li {
  display: inline-block;
  float: left;
  width: auto;
  height: auto;
  margin: 0px 15px;
}

.lft_tab .badge-outer ul li a:hover {
  opacity: 0.8;
}

.lft_tab .lft_tab-scrl .mCustomScrollBox {
  height: 495px !important;
}

.lft_tab .lft_tab-scrl .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff !important;
  background-color: #ffffff !important;
  width: 4px !important;
  height: 10% !important;
}

.lft_tab .lft_tab-scrl .mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: rgba(68, 68, 68, 0.27) !important;
  background-color: rgba(68, 68, 68, 0.27) !important;
}

.lft_tab .home-link {
  position: absolute;
  left: 0;
}

.lft_tab .home-link:before {
  content: "";
  display: inline-block;
  float: right;
  background: url(../images/left-tab-arrow1.png) no-repeat;
  width: 6px;
  height: 10px;
  margin: 7px 6px 0px;
}

.lft_tab .prgrs-div {
  width: 100%;
}

.bs-wizard>.bs-wizard-step {
  padding: 0;
  position: relative;
}

.bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
  color: #595959;
  font-size: 16px;
  margin-bottom: 5px;
}

.bs-wizard>.bs-wizard-step .bs-wizard-info {
  color: #999;
  font-size: 14px;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot {
  position: absolute;
  width: 40px;
  height: 39px;
  overflow: hidden;
  display: block;
  background: #1fc000;
  top: 20px;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  text-align: center;
  color: #444;
  line-height: 34px;
  /*border: 2px solid #1fc000;*/
  padding-left: 1px;
  z-index: 2;
  text-decoration: blink;
  background-position: -1px -1px;
}

.bs-wizard>.bs-wizard-step>.progress {
  position: relative;
  border-radius: 0px;
  height: 2px;
  box-shadow: none;
  margin: 44px 0px 0px;
}

.bs-wizard>.bs-wizard-step>.progress>.progress-bar {
  width: 0px;
  box-shadow: none;
  background: none;
}

.bs-wizard>.bs-wizard-step.complete>.progress>.progress-bar {
  width: 100%;
  background: #1fc000;
}

.bs-wizard>.bs-wizard-step.active>.progress>.progress-bar {
  width: 50%;
}

.bs-wizard>.bs-wizard-step:first-child.active>.progress>.progress-bar {
  width: 0%;
}

.bs-wizard>.bs-wizard-step:last-child.active>.progress>.progress-bar {
  width: 100%;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot {
  background-color: #fff;
  border: 2px solid #e9e9e9;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:hover {
  border: 2px solid #e9e9e9;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:hover .icon2 {
  top: -3px;
  left: -1px;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:after {
  opacity: 0;
}

.bs-wizard>.bs-wizard-step.complete .progress {
  background-color: #1fc000;
}

.bs-wizard>.bs-wizard-step.inprogress>.bs-wizard-dot {
  background-color: #fdd318;
  border: 2px solid #fdd318;
}

.bs-wizard>.bs-wizard-step.inprogress>.bs-wizard-dot:hover {
  border: 2px solid #fdd318;
}

.bs-wizard>.bs-wizard-step.inprogress>.bs-wizard-dot:hover .icon2 {
  top: -3px;
  left: -1px;
}

.bs-wizard>.bs-wizard-step.inprogress .progress .progress-bar {
  background-color: #fdd318;
}

.bs-wizard>.bs-wizard-step.removed>.bs-wizard-dot {
  background-color: #d4d4d4;
  border: 2px solid #d4d4d4;
}

.bs-wizard>.bs-wizard-step.removed>.bs-wizard-dot:hover {
  border: 2px solid #d4d4d4;
}

.bs-wizard>.bs-wizard-step.removed>.bs-wizard-dot:hover .icon2 {
  top: -3px;
  left: -1px;
}

.bs-wizard>.bs-wizard-step.removed .progress .progress-bar {
  background-color: #d4d4d4;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot:hover .icon2 {
  top: 0px;
  left: 0px;
}

.bs-wizard>.bs-wizard-step:first-child>.progress {
  left: 55%;
  width: 50%;
}

.bs-wizard>.bs-wizard-step:last-child>.progress {
  width: 50%;
}

.bs-wizard>.bs-wizard-step:first-child>.progress {
  left: 55%;
  width: 50%;
  z-index: 1;
}

.bs-wizard>.bs-wizard-step>.progress {
  position: relative;
  border-radius: 0px;
  height: 2px;
  box-shadow: none;
  margin: 23px 0;
}

.bs-wizard>.bs-wizard-step .iconlock {
  background: #d4d4d4;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

.bs-wizard>.bs-wizard-step .iconlock i {
  font-size: 13px;
  color: #ffffff;
  margin: 2px 0 0 0;
}

@media screen and (max-width: 590px) {
  .bs-wizard>.bs-wizard-step .iconlock i {
    font-size: 8px;
  }
}

.col-xs-2 {
  width: 16%;
  float: left;
}

.col-xs-2.last {
  width: 11%;
}

span.quit {
  padding: 12px 0px 0px 20px;
  cursor: pointer;
}

span.quit a {
  font-size: 13px;
  color: #afafaf;
  font-weight: 400;
}

span.quit a:hover {
  color: #393939;
}

span.quit.right {
  float: right;
}

/*.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
*/
/*END Form Wizard*/
.progress {
  overflow: hidden;
  height: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

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

user agent stylesheet div {
  display: block;
}

.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width .6s ease;
  transition: width .6s ease;
}

.complete .bs-wizard-dot {
  color: #fff !important;
}

.bs-wizard-dot .icon {
  width: 100%;
  font-size: 0px;
  height: 100%;
  border-radius: 100%;
  z-index: 2;
  border: none;
  font-size: 0px;
  background-position: 0 0;
  position: absolute;
  top: 100%;
  left: 0px;
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  background-size: 100%;
}

.bs-wizard-dot .icon.one {
  background-image: url(../images/step_icon1.png);
}

.bs-wizard-dot .icon.two {
  background-image: url(../images/step_icon2.png);
}

.bs-wizard-dot .icon.three {
  background-image: url(../images/step_icon3.png);
}

.bs-wizard-dot .icon.four {
  background-image: url(../images/step_icon4.png);
}

.bs-wizard-dot .icon.five {
  background-image: url(../images/step_icon5.png);
}

.bs-wizard-dot:hover .icon {
  transition: all 0.3s ease-out 0s;
  top: 0px;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

/* .bs-wizard-dot:hover{background: none !important;}*/
.iconlock {
  background: url(../images/correct-lock.png) no-repeat;
  width: 18px;
  height: 18px;
  z-index: 2;
  font-size: 0px;
  border: none;
  position: absolute;
  top: 14px;
  right: 0px;
}

.crt_section2 {
  width: auto;
  display: table;
  height: auto;
  margin: 7% auto 0%;
}

.crt_section2 h3 {
  font-size: 20px;
  font-weight: 400;
  color: #4a4a4a;
  margin-bottom: 10px;
}

.crt_section2 h4 {
  font-size: 18px;
  font-weight: 400;
  color: #a0a0a0;
}

.crt_section2 p {
  width: auto;
  display: inline-block;
  float: left;
  margin: 0px;
  line-height: 21px;
  padding: 12px 0 10px 0;
}

.radio-outer {
  margin-top: 20px;
  /* Let's Beautify Our Form */
}

.radio-outer label.active {
  background: #61bcf9;
  color: #fff;
  border-radius: 5px;
}

.radio-outer label.active.correct-answer {
  background: #1fc000;
}

.radio-outer label {
  display: table;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #555555;
  margin-bottom: 15px;
  padding: 0px 15px 0px 10px;
}

@media screen and (max-height: 420px) {
  .radio-outer label {
    height: 32px;
  }

  .radio-outer label p {
    padding: 5px 0 2px 0;
  }
}

.radio-outer input[type="submit"] {
  float: left;
  background: #f2f2f2;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  margin-top: 20px;
  padding: 4px 10px;
  cursor: pointer;
  outline: none;
}

.radio-outer input[type="submit"]:hover {
  color: #fff;
  border-color: #1b7aa9;
  background-color: #239fdb;
}

.quitPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* display: none; */
  z-index: 1000;
}

.sureQuit {
  width: 300px;
  height: 120px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -125px;
  padding: 10px;
  border-radius: 3px;
}

.sureQuit p {
  text-align: center;
  margin: 17px 0px;
}

.sureQuit .quit_btn_outer {
  width: auto;
  display: table;
  margin: auto;
}

.sureQuit input.qt_ys {
  border: none;
  margin: 0px 3px;
  background: #fff;
  box-shadow: 0px 0px 5px 0px #cdcbcb;
  padding: 4px 12px;
  font-size: 12px;
}

.sureQuit input.qt_ys:hover {
  background: #f7f7f7;
}

span.delete-icon {
  position: absolute;
  top: 0px;
  right: 7px;
  cursor: pointer;
}

span.delete-icon img {
  height: 6px;
}

.report_colm {
  width: 350px;
  background: #f9f9f9;
  position: absolute;
  bottom: 80px;
  padding: 20px;
  box-shadow: 0px 0px 10px 0px #d8d8d8;
  display: none;
  z-index: 2000;
}

.report_colm:before {
  content: "\f0d7";
  position: absolute;
  bottom: -16px;
  font-size: 27px;
  color: #f9f9f9;
  font-family: FontAwesome;
}

.report_colm .radio-outer {
  margin: 0;
}

.report_colm .radio-outer .trans {
  position: relative;
  padding-left: 25px;
  display: block;
  line-height: 16px;
  height: auto;
  background: none;
  color: #555555;
  font-size: 13px;
}

.report_colm .radio-outer .trans .custom-radio {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
}

.report_colm .radio-outer .trans .custom-radio.selected:after {
  border: 0;
  width: 9px;
  height: 9px;
  left: 0;
  top: 0;
}

.report_coment {
  width: 100%;
  height: 80px;
  border: none;
  background: #fff;
  resize: none;
  outline: none;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

input.trans.report_submit {
  float: right;
  margin-left: 10px;
  background: #5cb85c;
  border: none;
  color: #fff;
  padding: 5px 12px;
  border-radius: 3px;
  outline: none;
}

input.trans.report_submit:hover {
  opacity: 0.7;
}

input.trans.report_cancel {
  float: right;
  background: #a7a7a7;
  border: none;
  color: #fff;
  padding: 5px 12px;
  border-radius: 3px;
  outline: none;
}

input.trans.report_cancel:hover {
  opacity: 0.7;
}

.po_pup1 {
  display: block !important;
}

.report_click {
  cursor: pointer;
}

.report_click:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
}

.sucses_section-outerdiv {
  width: 100%;
  height: auto;
  display: table;
  bottom: 0px;
  z-index: 10;
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

.botmfix {
  bottom: 0px !important;
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

.animation {
  background: url(../images/animation.gif) no-repeat;
  width: 272px;
  height: 225px;
  display: none;
  position: absolute;
  top: -225px;
  left: -60px;
}

.animation-block {
  display: block !important;
}

.sucses_section {
  bottom: 0px;
  z-index: 2;
}

.sucses_section.noscroll {
  position: static;
  bottom: auto;
}

.sucses_section.voice-message {
  position: relative;
}

@media screen and (max-width: 767px) {
  .sucses_section {
    position: static;
  }
}

.sucses_section.submit-video-q {
  position: static;
}

.opn-tb {
  position: absolute;
  right: -50px;
  background: #2fa8e3 url(../images/tab-open.png) no-repeat;
  width: 55px;
  height: 50px;
  background-position: center;
  border-radius: 0px 7px 7px 0px;
  cursor: pointer;
  margin-top: 0px;
  top: 107px;
}

@media screen and (max-width: 700px) {
  .opn-tb {
    top: 100px;
  }
}

@media screen and (max-width: 650px) {
  .opn-tb {
    top: 70px !important;
  }
}

@media screen and (max-width: 366px) {
  .opn-tb {
    top: 65px !important;
  }
}

.tb_close {
  position: absolute;
  right: -50px;
  background: #2fa8e3 url(../images/tab-close.png) no-repeat !important;
  width: 55px;
  height: 50px;
  background-position: center !important;
  border-radius: 0px 7px 7px 0px;
  cursor: pointer;
}

.block-tb {
  margin-left: 0% !important;
}

.left-menu-clm {
  height: 130px;
  overflow: hidden;
}

.open-block {
  height: auto !important;
}

.f_lt {
  float: left;
}

.f_lt.questionNanswerType {
  max-width: 500px;
}

.pic_rit {
  float: right;
  margin-left: 40px;
  width: 110px;
  border: 1px solid #eee;
}

.pic_rit img {
  max-width: 100%;
}

@media screen and (max-width: 600px) {
  .pic_rit {
    width: 80px !important;
  }
}

@media screen and (max-width: 400px) {
  .pic_rit {
    width: 60px !important;
    margin: 0px auto 10px !important;
  }
}

@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

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

@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

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

.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-wobble-horizontal:hover,
.hvr-wobble-horizontal:focus,
.hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.spkr-section {
  width: auto;
  height: auto;
  float: right;
  padding-top: 10px;
  max-width: 100%;
  margin-bottom: 20px !important;
}

.spkr-section .qt-outer {
  width: auto;
  height: auto;
  position: relative;
  padding-left: 40px;
  line-height: 21px;
  padding-top: 5px;
}

.spkr-section .play_icn {
  position: absolute;
  top: 50%;
  margin-top: -19px;
  left: 0;
  width: 38px;
  height: 38px;
}

.spkr-section .play_icn .cp-container {
  margin: 0;
}

.spkr-section .play-content {
  float: left;
  width: auto;
  height: auto;
  font-size: 18px;
  font-weight: 400;
  padding-left: 30px;
  line-height: 25px;
}

.spkr-section .mic_play_icn {
  width: 34px;
  height: 34px;
  float: left;
  border: none;
  margin-top: 53px;
  margin-left: 2px;
  outline: none;
}

.spkr-section .mic_play_icn .cp-container {
  margin: 0;
}

.spkr-section .mic_play_icn .audio-wrapper {
  display: none;
}

.spkr-section .spkr-icon {
  background: url(../images/voice-recognition/speaker.png) no-repeat;
  width: 92px;
  height: 87px;
  margin-left: 35px;
  float: left;
  border: none;
  margin-top: 10px;
  outline: none;
}

.spkr-section .spkr-icon:hover {
  background: url(../images/voice-recognition/speaker-hover.png) no-repeat;
  background-position: 3px 1px;
}

@media screen and (max-width: 400px) {
  .spkr-section .spkr-icon {
    width: 82px;
    height: 77px;
    background-size: 100%;
  }
}

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-bob:hover,
.hvr-bob:focus,
.hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

.shape_div img {
  display: table;
  margin: auto;
}

.perc-crcle {
  width: 55px;
  height: 55px;
  float: left;
  background: #fff;
  margin-top: -6px;
  border-radius: 50%;
  text-align: center;
  line-height: 55px;
  font-size: 16px;
  font-weight: 700;
  color: #e22c2c;
}

.try-cmnt-div {
  width: auto;
  height: auto;
  display: inline-block;
  float: left;
  margin-right: 25px;
  margin-left: 15px;
}

.try-cmnt-div h3 {
  color: #e22c2c;
  margin-top: 0px;
  margin-bottom: 6px;
}

.try-cmnt-div h5 {
  color: #e22c2c;
}

@media screen and (max-width: 400px) {
  .try-cmnt-div {
    margin-right: 0;
  }
}

.correct .try-cmnt-div h3 {
  color: #5cb85c;
}

.correct .perc-crcle {
  color: #5cb85c;
}

.signup_view_login {
  width: 50%;
  height: 350px;
  float: right;
}

.signup_view_login .ve1 {
  width: 145px !important;
  height: auto !important;
  background-color: #fff !important;
  text-align: left;
}

.signup_view_login .ve1 a {
  line-height: 20px;
}

.signup_view_login .ve1 a:hover {
  text-decoration: underline;
  color: #4a4a4a !important;
}

.signup_view_login .ve1.selected a {
  text-decoration: underline;
}

.signup_view_login .ve1.selected a:hover {
  text-decoration: underline;
}

.signup_view_login .content_colm {
  width: 295px !important;
  height: auto;
  float: right;
}

.signup_view_login #view1 {
  width: 100%;
}

.signup_view_login .panel-container>div {
  padding: 50px 0px 25px !important;
}

.signup_view_login .rtabs {
  margin-top: 10px;
}

.signup_view_login #view1 .forget {
  margin: 0px;
}

.signup_view_login .content_colm .submit {
  background: #cecece;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#e2e2e2, #d8d8d8, #cecece);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#e2e2e2, #d8d8d8, #cecece);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#e2e2e2, #d8d8d8, #cecece);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#e2e2e2, #d8d8d8, #cecece);
  /* Standard syntax */
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

.signup_view_login .content_colm .submit:hover {
  background: #cecece;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#e6e6e6, rgba(202, 199, 199, 0.61), rgba(164, 164, 164, 0.42));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#e6e6e6, rgba(202, 199, 199, 0.61), rgba(164, 164, 164, 0.42));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#e6e6e6, rgba(202, 199, 199, 0.61), rgba(164, 164, 164, 0.42));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#e6e6e6, rgba(202, 199, 199, 0.61), rgba(164, 164, 164, 0.42));
  /* Standard syntax */
  transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}

.signup_view_login #view2 .login_radio {
  margin-top: 0px;
}

.signup_view_login #view2 .forget {
  margin-top: 0px;
}

.signup_view_login #view2 .forget li {
  float: right;
}

.colm_chek_box .checkbox-custom,
.colm_chek_box .radio-custom {
  opacity: 0;
  position: absolute;
}

.colm_chek_box .checkbox-custom,
.colm_chek_box .checkbox-custom-label,
.colm_chek_box .radio-custom,
.colm_chek_box .radio-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 3px 0px 5px;
  cursor: pointer;
}

.colm_chek_box .checkbox-custom-label,
.colm_chek_box .radio-custom-label {
  position: relative;
}

.colm_chek_box .checkbox-custom+.checkbox-custom-label:before,
.colm_chek_box .radio-custom+.radio-custom-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}

.colm_chek_box .checkbox-custom:checked+.checkbox-custom-label:before {
  content: "\f00c";
  font-family: 'FontAwesome';
  background: #fff;
  color: #191919;
}

.colm_chek_box .radio-custom+.radio-custom-label:before {
  border-radius: 50%;
}

.colm_chek_box .radio-custom:checked+.radio-custom-label:before {
  content: "\f00c";
  font-family: 'FontAwesome';
  color: #bbb;
}

.colm_chek_box .checkbox-custom:focus+.checkbox-custom-label,
.colm_chek_box .radio-custom:focus+.radio-custom-label {
  outline: 0px solid #ddd;
  /* focus style */
}

.ldy-im {
  width: 95px;
  height: auto;
  float: left;
  display: inline-block;
  margin-right: 40px;
}

.hi-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

.spkr-section .tlk-outer {
  width: 235px;
  height: 150px;
  background: rgba(245, 245, 245, 0.4);
  border-radius: 28px;
  margin-top: 30px;
  margin-bottom: 50px;
  padding: 18px;
  box-shadow: 8px 8px 0px -4px rgba(221, 221, 221, 0.37);
}

.spkr-section .tlk-outer .tlk-cnt {
  width: auto;
  display: block;
  height: auto;
  margin-top: 25px;
}

.spkr-section .tlk-outer .tlk-cnt h3 {
  font-size: 18px;
  font-weight: 400;
  color: #2fa9e3;
  padding-left: 50px;
}

.spkr-section .tlk-outer .tlk-cnt span {
  float: left;
  margin-right: 10px;
}

.shape_div {
  width: auto;
  height: auto;
  position: absolute;
  left: 20px;
  bottom: 50%;
}

.signup_view {
  width: 50%;
  height: 362px;
  float: left;
  border-right: 1px solid #eee;
  position: relative;
}

.signup_view .or {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 1px solid #e5e5e5;
  margin: -18px auto 0px;
  background: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 29px;
  font-weight: 700;
  color: #393939;
  position: absolute;
  top: 50%;
  right: -16px;
  margin-top: -16px;
}

.cp-container .cp-controls .cp-pause {
  display: none;
  float: left;
}

.pushQuestion {
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 200;
  transition: all .5s ease;
}

.pushQuestion .pushQuestionWrap {
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
}

.pushQuestion .videoController {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #2fa8e3;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
  bottom: 50px;
  box-shadow: 0 0 10px 0 #000;
  left: 18%;
  display: none;
  z-index: 10;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  display: none;
  font: normal normal normal 14px/1 FontAwesome;
}

.pushQuestion .videoController i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-style: unset;
}

.pushQuestion .videoController i:after {
  content: "\f078";
  margin: auto;
  font-size: 20px;
}

.pushQuestion .videoController.up i:after {
  content: "\f077";
}

@media screen and (max-width: 767px) {
  .pushQuestion .videoController {
    width: 30px;
    height: 30px;
    left: 7px;
  }
}

.pushQuestion .overlay {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.pushQuestion .pushQuestionInner {
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: all .5s ease;
  z-index: 2;
}

.pushQuestion .pushQuestionInner .crt_section2 {
  margin: 30px auto;
}

.pushQuestion .pushQuestionInner .crt_section2 .radio-outer {
  margin-bottom: 0;
}

.pushQuestion.finished {
  height: 100%;
}

.pushQuestion.finished .pushQuestionInner {
  transform: translateY(0);
  overflow: auto;
}

.pushQuestion.finished .videoController {
  top: auto;
  margin-bottom: -25px;
}

@media screen and (max-width: 767px) {
  .pushQuestion.finished .videoController {
    margin-bottom: -15px;
  }
}

.pushQuestion.rc-q {
  position: fixed;
}

@media screen and (min-width: 769px) {
  .pushQuestion.rc-q .videoController.up {
    bottom: 155px !important;
    left: 13%;
  }
}

.videoContainerWrapper {
  position: relative;
  z-index: 500;
}

.videoContainerWrapper.finished .pushQuestion {
  height: 100%;
}

.videoContainerWrapper.finished .pushQuestion .pushQuestionInner {
  transform: translateY(0);
  overflow: auto;
}

.videoContainerWrapper.finished .pushQuestion .videoController {
  top: auto;
  margin-bottom: -25px;
}

@media screen and (max-width: 767px) {
  .videoContainerWrapper.finished .pushQuestion .videoController {
    margin-bottom: -15px;
  }
}

.right_wrong {
  margin-top: 18%;
}

.right_wrong h2 {
  color: #262626;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.right_wrong .rit-wrg {
  width: auto;
  height: auto;
  display: table;
  margin: 0px auto 15px;
}

@media screen and (max-height: 420px) {
  .right_wrong .rit-wrg img {
    width: 53px;
  }
}

.right_wrong .lik_unlik {
  display: table;
  position: relative;
  margin: auto;
}

.right_wrong .lik_unlik>a {
  width: 80px;
  height: 80px;
  background-position: center 0px;
  outline: none;
  padding: 0px;
  border: none;
  float: left;
  margin-left: -1px;
  background: red;
  border-radius: 100%;
  border: 7px solid #fff;
  box-shadow: 0 0 25px 0 #ccc;
  margin: 0 20px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  line-height: 62px;
  cursor: pointer;
}

.right_wrong .lik_unlik>a:hover {
  box-shadow: 0 0 25px 0 #666;
}

.right_wrong .lik_unlik>a.like_btn {
  margin-left: 0;
  background: #66b441;
  background: -moz-linear-gradient(top, #66b441 1%, #1d863e 100%);
  background: -webkit-linear-gradient(top, #66b441 1%, #1d863e 100%);
  background: linear-gradient(to bottom, #66b441 1%, #1d863e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66b441', endColorstr='#1d863e', GradientType=0);
}

.right_wrong .lik_unlik>a.unlike_btn {
  margin-right: 0;
  background: #fd0d00;
  background: -moz-linear-gradient(top, #fd0d00 0%, #d60b00 100%);
  background: -webkit-linear-gradient(top, #fd0d00 0%, #d60b00 100%);
  background: linear-gradient(to bottom, #fd0d00 0%, #d60b00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d00', endColorstr='#d60b00', GradientType=0);
}

@media screen and (max-height: 420px) {
  .right_wrong .lik_unlik>a {
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    line-height: 52px;
  }
}

.right_wrong .line {
  width: 30px;
  height: 2px;
  background: #e5e5e5;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -1px;
}

.write_about {
  width: 100% !important;
  display: block;
  height: auto;
  margin: 0;
  position: absolute;
  left: 0;
  top: 170px;
  overflow: auto;
  bottom: 30px;
  padding: 0 40px 0 60px;
}

@media screen and (max-width: 767px) {
  .write_about {
    padding: 0 10px 40px;
    top: 140px;
  }
}

@media screen and (max-height: 420px) {
  .write_about {
    top: 70px;
  }
}

.listen-section .video-js.vjs-16-9 {
  padding-top: 31px;
  margin: 15px 0 0 0;
  background: none;
}

.listen-section .video-js.vjs-16-9 .vjs-control-bar {
  background-color: rgba(43, 51, 63, 0.5);
}

.listen-section .video-js.vjs-16-9 .vjs-fullscreen-control {
  display: none;
}

.planeQuestionOuter {
  max-height: 366px;
  overflow: auto;
}

@media screen and (max-height: 420px) {
  .planeQuestionOuter {
    max-height: 221px;
  }
}

.prgrs-div {
  width: 90%;
  margin: auto;
  position: relative;
  padding-right: 40px;
}

.prgrs-div .progessLabel {
  position: absolute;
  right: 0;
  top: -4px;
  line-height: 13px;
}

.prgrs-div span.bi-label {
  float: right !important;
  padding: 0px 0px !important;
  color: #8c8c8c !important;
  font-size: 12px;
  font-weight: 600;
}

.prgrs-div .bi-bar {
  width: 86% !important;
  border-radius: 5px;
  overflow: hidden;
  height: 7px !important;
  top: 5px !important;
}

.prgrs-div .bi-milestone {
  display: none !important;
}

.colm-div1 {
  width: 100%;
  height: auto;
  background: #fff;
  padding-bottom: 0;
  box-shadow: 0px 0px 5px 0px #dadada;
}

.colm-div1 .im-outer {
  width: 100%;
  height: 193px;
  overflow: hidden;
}

.colm-div1 .im-outer img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.colm-div1 .im-outer img:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

@media screen and (max-width: 1024px) {
  .colm-div1 .im-outer {
    position: relative;
  }

  .colm-div1 .im-outer .start-btn {
    background: #fff;
    text-align: center;
    padding: 5px;
    border-top: 1px solid #e1e0df;
    border-bottom: 1px solid #e1e0df;
    display: block;
    color: #212121;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .colm-div1 .im-outer .start-btn .fa {
    color: #1fc000;
  }
}

.colm-div1 p {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  line-height: 20px;
  color: #212121;
}

.colm-div1 p.courseDescription .desBtn {
  display: none;
}

@media screen and (max-width: 1024px) {
  .colm-div1 p.courseDescription {
    position: relative;
    padding: 10px 39px 10px 10px;
    margin: 0;
    min-height: 63px;
  }

  .colm-div1 p.courseDescription .desBtn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 39px;
    height: 100%;
    text-align: center;
    line-height: 100%;
    background: #efefef;
  }

  .colm-div1 p.courseDescription .desBtn a {
    float: left;
    color: #4a4a4a;
  }

  .colm-div1 p.courseDescription .desBtn .tbl {
    display: table;
    width: 100%;
    height: 100%;
  }

  .colm-div1 p.courseDescription .desBtn .tbl .alignMiddel {
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    color: #666;
  }
}

.colm-div1 .description-outer a.start-btn {
  cursor: pointer;
  padding: 10px;
  display: block;
  text-align: center;
  background: #fff;
  margin-top: 15px;
  color: #333;
  border-top: 1px solid #eee;
  cursor: pointer;
}

.colm-div1 .description-outer a.start-btn i {
  margin-left: 5px;
  color: #1fc000;
}

.colm-div1 .description-outer a.start-btn:hover {
  color: #fff;
  background: #1fc000;
}

.colm-div1 .description-outer a.start-btn:hover i {
  color: #fff;
}

.lms_content_section {
  width: 100%;
  height: auto;
}

.lms_content_section .left_colm1 {
  width: 24%;
  height: auto;
  float: left;
  margin-bottom: 5%;
}

.lms_content_section .left_colm1 .colm-div1 {
  padding-bottom: 15px;
}

.lms_content_section .left_colm1 ul li {
  display: block;
  background: #fff;
  position: relative;
}

.lms_content_section .left_colm1 ul li:hover {
  background: #fdd318;
}

.lms_content_section .left_colm1 ul li.selected {
  background: #fdd318;
}

.lms_content_section .left_colm1 ul li.selected:hover {
  background: rgba(253, 228, 24, 0.6);
}

.lms_content_section .left_colm1 ul li a {
  display: block;
}

.lms_content_section .left_colm1 ul li span {
  position: absolute;
  right: 15px;
  top: 16px;
}

.lms_content_section .left_colm1 ul .active {
  background: #fdd318 !important;
}

.lms_content_section .left_colm1 ul .icon1 {
  width: 100%;
  height: auto;
  padding: 15px;
  margin-top: 20px;
}

.lms_content_section .left_colm1 ul .icon1 a {
  font-size: 14px;
  font-weight: 400;
  color: #191919;
}

.lms_content_section .left_colm1 ul .icon1 a:before {
  width: 28px;
  height: 22px;
  background: url(../images/lms-icons0.png);
  float: left;
  margin-top: -5px;
  margin-right: 10px;
  content: "";
  display: inline-block;
}

.lms_content_section .left_colm1 ul .icon2 {
  width: 100%;
  height: auto;
  padding: 15px;
  background: #fff;
  margin-top: 20px;
}

.lms_content_section .left_colm1 ul .icon2 a {
  font-size: 14px;
  font-weight: 400;
  color: #191919;
}

.lms_content_section .left_colm1 ul .icon2 a:before {
  width: 28px;
  height: 22px;
  background: url(../images/lms-icons0.png);
  float: left;
  margin-top: -5px;
  margin-right: 10px;
  background-position: -30px -3px;
  content: "";
  display: inline-block;
}

.lms_content_section .left_colm1 ul .icon2 span {
  float: right;
  color: red;
  font-size: 12px;
}

.lms_content_section .left_colm1 ul .icon3 {
  width: 100%;
  height: auto;
  padding: 15px;
  background: #fff;
  margin-top: 20px;
}

.lms_content_section .left_colm1 ul .icon3 a {
  font-size: 14px;
  font-weight: 400;
  color: #191919;
}

.lms_content_section .left_colm1 ul .icon3 a:before {
  width: 28px;
  height: 22px;
  background: url(../images/lms-icons0.png);
  float: left;
  margin-top: -5px;
  margin-right: 10px;
  background-position: -60px -3px;
  content: "";
  display: inline-block;
}

.lms_content_section .left_colm1 ul .icon4 {
  width: 100%;
  height: auto;
  padding: 15px;
  background: #fff;
  margin-top: 20px;
}

.lms_content_section .left_colm1 ul .icon4 a {
  font-size: 14px;
  font-weight: 400;
  color: #191919;
}

.lms_content_section .left_colm1 ul .icon4 a:before {
  width: 28px;
  height: 22px;
  background: url(../images/lms-icons0.png);
  float: left;
  margin-top: -5px;
  margin-right: 10px;
  background-position: -91px -3px;
  content: "";
  display: inline-block;
}

.lms_content_section .left_colm1 ul .icon4 span {
  float: right;
  color: red;
  font-size: 12px;
}

.lms_content_section .left_colm1 ul .bdg-im {
  width: 100%;
  height: auto;
  background: #fff;
  text-align: center;
  padding: 25px 0px;
  margin-top: 1px;
  overflow: hidden;
}

.lms_content_section .left_colm1 ul .bdg-im .owl-stage-outer .items {
  min-height: auto;
}

.lms_content_section .left_colm1 ul .bdg-im:hover {
  background: #fff;
}

.lms_content_section .left_colm1 ul .bdg-im:hover img {
  opacity: 0.7;
}

.lms_content_section .left_colm1 ul .bdg-im .owl-item.active {
  background: none !important;
}

.lms_content_section .right_colm1 {
  width: 73%;
  height: auto;
  float: right;
  padding-bottom: 78px;
}

@media screen and (max-width: 767px) {
  .lms_content_section .right_colm1 .owl-item .lrg-colm {
    position: relative;
    padding-left: 50px;
    margin-bottom: 0;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section1 {
    position: absolute;
    left: 15px;
    width: 40px;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section2 {
    width: 100% !important;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section3 {
    position: absolute;
    width: 40px;
    padding: 0;
    left: 15px;
    top: 71px;
    z-index: 5;
    height: auto;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section3 canvas {
    transform: scale(0.75);
    margin: -9px 0 0 -10px;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section4 {
    position: relative;
    width: 100%;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section4 .linkdiv2 {
    float: right;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section4 ul {
    display: block;
    float: left;
    margin-bottom: 0;
    position: absolute;
    left: 15px;
    z-index: 5;
    top: 7px;
  }

  .lms_content_section .right_colm1 .owl-item .lrg-colm .section4.startlink {
    width: auto;
    float: right;
  }
}

.lms_content_section .right_colm1 ul li {
  display: inline-block;
  float: left;
}

.lms_content_section .right_colm1 ul li a {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: #b3b3b3;
}

.lms_content_section .right_colm1 ul li a:hover {
  color: #191919;
}

.lms_content_section .right_colm1 ul li .active {
  color: #191919;
  text-decoration: underline;
}

.lms_content_section .right_colm1 ul .crs-line {
  margin: 0px 15px;
}

.lms_content_section .right_colm1 a.knmore {
  color: #f68500;
  cursor: pointer;
  bottom: -1px;
  position: absolute;
  right: 24px;
  z-index: 2;
}

.lms_content_section .right_colm1 a.knmore:hover {
  color: #fdd318;
}

.lms_content_section .right_colm1 .lrg-colm {
  width: 100%;
  height: auto;
  background: #fff;
  margin-top: 15px;
  padding: 20px;
  display: table;
}

.lms_content_section .right_colm1 .lrg-colm.no-updates i {
  font-size: 20px;
  margin: 3px 5px 0 0;
}

.lms_content_section .right_colm1 .lrg-colm .section1 {
  display: table;
  float: left;
  width: auto;
  height: auto;
}

.lms_content_section .right_colm1 .lrg-colm .section2 {
  float: left;
  width: 62%;
  height: auto;
  padding-left: 20px;
  padding-right: 25px;
}

@media screen and (max-width: 1150px) {
  .lms_content_section .right_colm1 .lrg-colm .section2 {
    width: 56%;
  }
}

@media screen and (max-width: 940px) {
  .lms_content_section .right_colm1 .lrg-colm .section2 {
    width: 50%;
  }
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 {
  font-size: 16px;
  font-weight: 600;
  color: #383838;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 a {
  color: #383838;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 b {
  color: #2fa8e3;
  cursor: pointer;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT {
  position: relative;
  display: inline-block;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT .lesson-tooltip {
  position: absolute;
  left: 100%;
  width: 300px;
  background: #fff;
  box-shadow: 0 0 10px 0 #ccc;
  z-index: 100;
  top: 0;
  border-radius: 3px;
  padding: 15px;
  display: none;
  max-height: 300px;
  overflow: auto;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT .lesson-tooltip ol {
  margin: 0;
  padding: 0;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT .lesson-tooltip ol li {
  color: #383838;
  font-size: 14px;
  font-weight: normal;
  padding: 7px 0;
  border-bottom: 1px solid #eee;
  list-style: none;
  position: relative;
  padding-right: 30px;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT .lesson-tooltip ol li:last-child {
  border: 0;
  padding-bottom: 0;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT .lesson-tooltip ol li .fa {
  position: absolute;
  right: 0;
  top: 10px;
  color: #6fa900;
}

.lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT .lesson-tooltip ol li .fa.fa-lock {
  color: #fc0606;
}

@media screen and (max-width: 767px) {
  .lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT .lesson-tooltip {
    left: 0;
    top: 20px;
    right: 0;
    width: auto;
    max-height: calc(100% + 30px);
  }
}

@media screen and (max-width: 767px) {
  .lms_content_section .right_colm1 .lrg-colm .section2 h3 .lessonTT {
    position: static;
  }
}

.lms_content_section .right_colm1 .lrg-colm .section2 p {
  font-size: 14px;
  color: #646464;
  font-weight: 400;
  margin: 0px;
  min-height: 62px;
  text-align: justify;
  line-height: 22px;
}

.lms_content_section .right_colm1 .lrg-colm .section3 {
  width: 120px;
  height: auto;
  float: left;
  display: table;
  text-align: center;
}

@media screen and (max-width: 1160px) {
  .lms_content_section .right_colm1 .lrg-colm .section3 {
    text-align: left;
    width: auto;
    padding-left: 7px;
  }
}

.lms_content_section .right_colm1 .lrg-colm .section3 .progress-wrapper {
  width: 57px;
  height: 57px;
  margin: 0 auto;
}

.lms_content_section .right_colm1 .lrg-colm .section4 {
  width: auto;
  display: table;
  float: right;
  height: auto;
}

.lms_content_section .right_colm1 .lrg-colm .section4 ul {
  display: table;
  float: right;
  margin-bottom: 15px;
}

.lms_content_section .right_colm1 .lrg-colm .section4 ul li {
  display: inline-block;
  float: left;
  margin-left: 5px;
  position: relative;
}

.lms_content_section .right_colm1 .lrg-colm .section4 ul li.lock {
  color: #fc0606;
}

.lms_content_section .right_colm1 .lrg-colm .section4 ul li.unlock {
  color: #6fa900;
}

.lms_content_section .right_colm1 .scnd-colm2 .section1 {
  position: relative;
}

.lms_content_section .right_colm1 .scnd-colm2 .section1 img {
  border-radius: 100%;
}

.lms_content_section .right_colm1 .scnd-colm2 .section1 .ply-icon {
  opacity: 0;
  transition: all .5s ease;
}

.lms_content_section .right_colm1 .scnd-colm2 .section1:hover .ply-icon {
  opacity: 1;
}

.lms_content_section .right_colm1 .scnd-colm2 .section2 {
  width: 59%;
  height: auto;
  position: relative;
}

@media screen and (max-width: 1160px) {
  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 59% !important;
  }
}

@media screen and (max-width: 1150px) {
  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 54% !important;
  }
}

@media screen and (max-width: 940px) {
  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 47% !important;
    padding-right: 10px;
  }
}

@media screen and (max-width: 768px) {
  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 41% !important;
    padding-right: 10px;
  }
}

.lms_content_section .right_colm1 .scnd-colm2 .section2 .hight_lrg {
  height: 62px;
  overflow: hidden;
}

.lms_content_section .right_colm1 .scnd-colm2 .section2 .hight_lrg:after {
  position: absolute;
  content: "";
  bottom: 0;
  height: 25px;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  width: 100%;
  z-index: 1;
}

.lms_content_section .right_colm1 .scnd-colm2 .section2 .hight_lrg.active {
  padding-bottom: 30px;
}

.lms_content_section .right_colm1 .scnd-colm2 .section2 .hight_lrg.active:after {
  display: none;
}

.lms_content_section .right_colm1 .scnd-colm2 .section3 {
  width: 120px;
  height: 100px;
  padding: 10px 0px;
  text-align: center;
}

.lms_content_section .right_colm1 .scnd-colm2 .cl-alm {
  width: auto;
  height: auto;
  border-radius: 50px;
  background-color: #fdd318;
  font-size: 9px;
  color: #070707;
  text-align: center;
  padding: 3px 4px;
  box-shadow: 0px 0px 2px 0px #fdd318;
  position: absolute;
  top: -8px;
  right: -6px;
}

.lms_content_section .right_colm1 .scnd-colm2 .linkdiv {
  background: #fdd318;
  padding: 3px 8px;
  clear: both;
  margin-bottom: 15px;
}

.lms_content_section .right_colm1 .scnd-colm2 .linkdiv a {
  color: #292929;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.linkdiv2 {
  background: #eaeaea;
  padding: 3px 8px;
  clear: both;
  margin-bottom: 15px;
}

.linkdiv2 a {
  color: #292929;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.linkdiv2:hover {
  background: #fdd318;
}

.startlink {
  background: #eaeaea;
  padding: 3px 8px;
  margin-top: 20px;
}

.startlink:hover {
  background: #fdd318;
}

.startlink a {
  color: #292929;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.colm-lst {
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: table;
}

.colm-lst .buy-div {
  width: auto;
  display: table;
  float: left;
  background: #fdd318;
  padding: 15px 15px;
}

.colm-lst .buy-div a {
  color: #191919;
  font-size: 14px;
  text-transform: uppercase;
}

.colm-lst .buy-div a:before {
  width: 28px;
  height: 22px;
  background: url(../images/lms-icons0.png);
  float: left;
  margin-top: -2px;
  margin-right: 10px;
  content: "";
  display: inline-block;
}

.colm-lst .buy-div:hover {
  background: #ffe570;
}

.tel-div {
  float: right;
  width: auto;
  height: auto;
  display: table;
  background: #6fa900;
  padding: 15px 20px 15px 30px;
  opacity: 0.5;
}

.tel-div.active {
  opacity: 1;
}

@media screen and (max-width: 520px) {
  .tel-div {
    padding: 15px 0 0 0;
  }
}

.tel-div a {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  cursor: default;
}

@media screen and (max-width: 520px) {
  .tel-div a .txt {
    display: none;
  }
}

.tel-div:hover {
  background: #8cd206;
}

.tel-icn {
  width: 58px;
  height: 58px;
  background: url(../images/telphonic.png);
  float: left;
  margin-top: -2px;
  margin-right: 10px;
  content: "";
  display: inline-block;
  position: absolute;
  top: -16px;
  left: -70px;
}

@media screen and (max-width: 520px) {
  .tel-icn {
    margin: 0;
  }
}

.ply-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -16px;
  margin-top: -17px;
}

.ply-icon:hover {
  opacity: 0.8;
}

#html5-watermark {
  display: none !important;
}

.pro-right-section {
  width: 49.1%;
  height: auto;
  float: right;
}

.pro-right-section .actvt h3 {
  margin-bottom: 5px;
}

.pro-right-section .actvt p a {
  text-decoration: underline;
  color: #191919;
  font-weight: 600;
}

.pro-right-section .actvt p a:hover {
  color: #9a9a9a;
}

.pro-right-section .event-date-outer {
  width: 150px;
  float: right;
  height: 250px;
  border-top: 1px solid #f0f0f0;
  margin-right: 30px;
  margin-top: 57px;
}

.pro-right-section .event-date-outer ul {
  display: block;
  margin: 0px;
}

.pro-right-section .event-date-outer ul li {
  display: block;
  background: none;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
  margin: 0px;
  height: auto;
}

.pro-right-section .event-date-outer ul li:before {
  background: none;
}

.pro-right-section .event-date-outer ul li a h1 {
  font-size: 26px;
  color: #373636;
  text-align: center;
  font-weight: 400;
  margin: 25px 0px 5px;
}

.pro-right-section .event-date-outer ul li a h5 {
  font-weight: 400;
  font-size: 14px;
  color: #686868;
  text-align: center;
  margin: 0px 0px 30px;
}

.pro-right-section .event-date-outer ul li a:hover h1,
.pro-right-section .event-date-outer ul li a:hover h5 {
  color: #bfbaba;
}

.pro-right-section .Assignmentp {
  padding-bottom: 0px !important;
}

.pro-right-section .Assignmentp .course-outer {
  padding-bottom: 18px;
}

.pro-right-section .Assignmentp p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #656565;
  margin-top: 0px;
}

.Discussionsdiv {
  margin-bottom: 3%;
}

.Discussionsdiv h3 a {
  font-weight: 300;
  font-size: 18px;
  color: #474747;
}

.resources_section {
  background: #fff;
  margin-bottom: 15px;
  position: relative;
  padding-left: 265px;
}

@media screen and (max-width: 768px) {
  .resources_section {
    padding-left: 180px;
  }
}

@media screen and (max-width: 600px) {
  .resources_section {
    padding: 0;
  }
}

.resources_section .link_section {
  width: 265px;
  height: 100%;
  background: #f0f0f0;
  position: absolute;
  left: 0;
  top: 0;
}

.resources_section .link_section .roundMobMenu {
  width: 35px;
  height: 35px;
  line-height: 35px;
  position: absolute;
  left: 140px;
  top: 16px;
  font-size: 23px;
  display: none;
  color: #666;
}

@media screen and (max-width: 768px) {
  .resources_section .link_section {
    width: 180px;
  }
}

@media screen and (max-width: 600px) {
  .resources_section .link_section {
    position: relative;
    width: 100%;
  }

  .resources_section .link_section .roundMobMenu {
    display: block;
  }
}

.resources_section .link_section h3 {
  font-size: 26px;
  font-weight: 400;
  color: #262525;
  padding: 26px 40px;
}

@media screen and (max-width: 600px) {
  .resources_section .link_section h3 {
    padding: 10px 0 0 18px !important;
  }
}

@media screen and (max-width: 600px) {
  .resources_section .link_section h4 {
    padding: 5px 0 10px 18px !important;
  }
}

.resources_section .link_section ul {
  display: none;
}

.resources_section .link_section ul li {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #e2e2e2;
  display: block;
}

.resources_section .link_section ul li:first-child {
  border-top: 1px solid #e2e2e2;
}

.resources_section .link_section ul li:hover {
  background: #fff;
}

.resources_section .link_section ul li:hover a {
  color: #333333;
}

.resources_section .link_section ul li a {
  font-size: 14px;
  color: #707070;
  font-weight: 400;
  padding: 20px 0px 20px 40px;
  width: 100%;
  display: block;
}

@media screen and (max-width: 600px) {
  .resources_section .link_section ul li a {
    padding: 10px 10px 10px 18px !important;
  }
}

.resources_section .link_section ul .active {
  background: #fff;
  border: 0px !important;
}

.resources_section .link_section ul .active a {
  color: #333333;
}

@media screen and (min-width: 601px) {
  .resources_section .link_section ul {
    display: block !important;
  }
}

.resources_section .resources_content_outer {
  width: 74%;
  height: auto;
  float: right;
  padding: 40px 40px 40px 0px;
}

.resources_section .resources_content_outer h3 {
  font-weight: 700;
  font-size: 20px;
  color: #333333;
}

.resources_section .resources_content_outer ul li {
  display: table;
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.resources_section .resources_content_outer ul li span {
  display: table;
  float: left;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  text-align: center;
  line-height: 37px;
  background: #f0f0f0;
  margin-top: 5px;
}

.resources_section .resources_content_outer ul li p {
  float: left;
  width: 95%;
  height: auto;
  line-height: 22px;
  text-align: justify;
  color: #656565;
  font-size: 14px;
  padding-left: 25px;
  margin: 0px;
}

.pagination_outer {
  display: table;
  float: right;
  height: auto;
  width: auto;
  margin-top: 30px;
}

.pagination_outer ul li {
  display: inline-block !important;
  margin-top: 0px !important;
  float: left !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  margin-left: 5px !important;
  margin-right: 0px !important;
  box-shadow: none !important;
}

.pagination_outer ul li:last-child {
  line-height: 18px;
}

.pagination_outer ul li a {
  color: #444;
}

.pagination_outer ul li:hover {
  background: #fdd318;
  box-shadow: 0px 0px 5px 0px #dadada !important;
}

.pagination_outer ul .active {
  background: #fdd318;
  box-shadow: 0px 0px 5px 0px #dadada !important;
}

.course_section h3 {
  padding-bottom: 0px !important;
}

.course_section h4 {
  padding-left: 40px;
  padding-bottom: 26px;
  font-size: 14px;
  font-weight: 400;
  color: #8e8e8e;
}

.course_section ul {
  margin-right: 0px !important;
}

.course_section ul .active {
  background: #fff;
  border: 0px !important;
}

.courses_content_outer {
  width: 100% !important;
  height: auto;
  float: right;
  padding: 15px 30px 30px;
}

.courses_content_outer .pagination_outer {
  margin-top: 15px !important;
}

.courses_content_outer .bi-wrp.bi-default-theme .bi-barInner {
  background-color: #1fc000 !important;
  border-radius: 0px 5px 5px 0px;
}

.courses_content_outer h3 {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  margin: 20px 0px 15px;
}

.courses_content_outer ul li {
  display: inline-block;
  float: left;
  width: 31.6%;
  height: 280px;
  position: relative;
  background: #fff;
  margin: 0px 20px 20px 0px;
}

.courses_content_outer ul li:nth-child(3n) {
  margin-right: 0px;
}

.courses_content_outer ul li .itm-hvr-div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 25px 0px;
  box-shadow: 0px 0px 10px 0px #cccccc;
}

.courses_content_outer ul li .itm-hvr-div:hover {
  opacity: 1;
}

.courses_content_outer ul li .itm-hvr-div span {
  text-align: center;
  width: 100%;
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: #212121;
  margin-bottom: 15px;
  padding: 0px 15px;
}

.courses_content_outer ul li .itm-hvr-div span img {
  width: auto !important;
  margin: auto;
}

.courses_content_outer ul li .itm-hvr-div .Level {
  margin-bottom: 5px;
}

.courses_content_outer ul li .itm-hvr-div h5 {
  font-size: 12px;
  text-transform: uppercase;
  color: #626262;
  text-align: center;
  font-weight: 400;
}

.courses_content_outer ul li .itm-hvr-div p {
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: #626262;
  padding: 0px 15px;
}

.courses_content_outer ul li .itm-hvr-div .line {
  width: 100%;
  height: 1px;
  background: #e1e0df;
}

.courses_content_outer ul li .itm-hvr-div .crt-sec {
  width: 100%;
  height: auto;
  display: block;
  padding: 13px 15px 0px;
}

.courses_content_outer ul li .itm-hvr-div .crt-sec h4 {
  font-size: 14px;
  color: #000000;
  font-weight: 600;
  display: inline-block;
}

.courses_content_outer ul li .itm-hvr-div .crt-sec h4 span {
  display: inline-block;
  width: auto;
  text-decoration: line-through;
  color: #8d8d8d;
  font-weight: 400;
  padding: 0px 5px;
}

.courses_content_outer ul li .itm-hvr-div .crt-sec .crt-icon {
  display: table;
  float: right;
  width: auto;
  height: auto;
}

.courses_content_outer ul li .itm-hvr-div .crt-sec .crt-icon .crt-icon {
  background: url(../images/cart-icon.png);
  width: 24px;
  height: 24px;
  margin-top: -3px;
  margin-left: 5px;
}

.courses_content_outer ul li .itm-hvr-div .crt-sec .crt-icon .ic1 {
  background-position: -25px 0px;
}

.courses_content_outer ul li .itm-hvr-div .crt-sec .crt-icon .ic2 {
  background-position: 1px 0px;
}

.bi-wrp {
  display: inline-block;
  position: relative;
}

.bi-wrp.bi-horizontal {
  width: 100%;
}

.bi-wrp.bi-default-theme .bi-bar {
  box-shadow: inset 0 0 10px -3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 10px -3px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: inset 0 0 10px -3px rgba(0, 0, 0, 0.5);
  -o-box-shadow: inset 0 0 10px -3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 10px -3px rgba(0, 0, 0, 0.5);
}

.bi-wrp.bi-default-theme .bi-barInner {
  background-color: #1fc000 !important;
  border-radius: 0px 5px 5px 0px;
}

.bi-wrp.bi-default-theme.bi-cRange-optimal .bi-barInner {
  background-color: #5cb85c;
}

.bi-wrp.bi-default-theme.bi-cRange-alert .bi-barInner {
  background-color: #d9aa4f;
}

.bi-wrp.bi-default-theme.bi-cRange-critical .bi-barInner {
  background-color: #d9534f;
}

.bi-wrp.bi-default-theme.bi-avgBelow .bi-barInner {
  background-color: #5cb85c;
}

.bi-wrp.bi-default-theme.bi-avgAbove .bi-barInner {
  background-color: #d9534f;
}

.bi-wrp.bi-default-theme .bi-milestone {
  background-color: transparent;
}

.bi-wrp.bi-default-theme.bi-vertical .bi-milestone {
  left: 50%;
}

.bi-wrp.bi-default-theme.bi-horizontal .bi-milestone {
  top: 50%;
}

.bi-wrp.bi-default-theme .bi-mlst-innerLine {
  background-color: #555;
}

.bi-wrp.bi-default-theme.bi-vertical .bi-mlst-innerLine {
  left: 0;
  right: 0;
  top: 50%;
}

.bi-wrp.bi-default-theme.bi-horizontal .bi-mlst-innerLine {
  top: 0;
  bottom: 0;
  left: 50%;
}

.bi-wrp.bi-default-theme .bi-mlst-label {
  padding: 5px;
  background-color: #555;
  color: #fff;
  border-radius: 3px;
  font-size: 0.8em;
  white-space: nowrap;
}

.bi-wrp.bi-default-theme.bi-vertical .bi-mlst-label {
  top: -30px;
  /*-35px;*/
}

.bi-wrp.bi-default-theme.bi-horizontal .bi-mlst-label {
  top: -23px;
  /*-28px;*/
}

.bi-bar {
  position: relative;
}

.bi-vertical .bi-bar {
  display: table-cell;
}

.bi-barInner {
  position: absolute;
}

.bi-vertical .bi-barInner {
  width: 100%;
  bottom: 0;
}

.bi-horizontal .bi-bar {
  width: 100%;
  float: left;
}

.bi-horizontal .bi-barInner {
  top: 0;
  bottom: 0;
  left: 0;
}

.bi-vertical .bi-barInner {
  width: 100%;
  bottom: 0;
}

.bi-vertical .bi-label {
  display: table-cell;
}

.bi-label-l {
  padding-right: 5px;
}

.bi-label-r {
  padding-left: 5px;
}

.bi-hor-topLeft .bi-label,
.bi-hor-topRight .bi-label {
  padding-bottom: 5px;
}

.bi-hor-topLeft .bi-label,
.bi-hor-left .bi-label {
  float: left;
}

.bi-hor-topRight .bi-label,
.bi-hor-right .bi-label {
  float: right;
}

.bi-hor-left .bi-label,
.bi-hor-right .bi-label {
  padding: 5px;
}

#tooltip {
  font-family: Ubuntu, sans-serif;
  font-size: 0.875em;
  text-align: center;
  line-height: 1.5;
  color: #333;
  background: #efefef;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  z-index: 10000;
  padding: 15px;
}

#tooltip ol {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

#tooltip ol li {
  padding: 7px 0;
  border-bottom: 1px solid #81bfdb;
}

#tooltip ol li .fa {
  margin-left: 10px;
}

#tooltip ol li:last-child {
  border: 0;
}

#tooltip:after {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #efefef;
  border-top-color: #efefef;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

#tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 10px solid #333;
  border-bottom-color: rgba(0, 0, 0, 0.6);
  top: -20px;
  bottom: auto;
}

#tooltip.left:after {
  left: 10px;
  margin: 0;
}

#tooltip.right:after {
  right: 10px;
  left: auto;
  margin: 0;
}

.line-contact {
  width: 100%;
  height: 1px;
  background: #e1e1e1;
  clear: both;
  margin-top: 10px;
}

.pdf-outer {
  position: fixed;
  right: 5%;
  bottom: 20%;
  z-index: 5000;
  width: 50px;
  height: 66px;
}

@media screen and (max-width: 767px) {
  .pdf-outer {
    bottom: 10%;
  }
}

.dwonload_pdf {
  background: url(../images/pdf_icon.png) no-repeat;
  width: 50px;
  height: 66px;
  display: block;
}

.listen-section {
  height: 350px;
}

.listen-section h3 {
  padding-left: 0px;
}

.audio_outer {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 15px;
}

.audio_outer audio {
  width: 100%;
  background: #757575;
}

.audio_details_outer {
  width: 100%;
  height: auto;
  display: table;
}

.audio_details {
  width: 585px;
  height: 315px;
  display: table;
  padding: 40px;
  background: #f6f6f6;
  margin-bottom: 70px;
}

.audio_details p {
  width: 100%;
  height: auto;
  display: block;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 15px;
}

.audio_details .type_filed {
  background: none;
  border: 0px;
  border-bottom: 2px dotted #2b2b2b;
  outline: none;
}

.audio_details .mCSB_scrollTools {
  width: 7px;
}

.audio_details .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 7px !important;
  background-color: #c5c5c5 !important;
  background-color: #c5c5c5 !important;
}

.audio_details .mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #e2e0e0 !important;
  background-color: #e2e0e0 !important;
}

.tick_cls {
  margin-right: 15px !important;
}

.tick_cls ul li {
  display: inline-block;
  float: left;
  width: 32px;
  height: 1px;
  background: #c5c5c5;
  margin: 44px 5px 0px;
}

.sucses_section_chacked {
  background: #fff !important;
}

.pronounciation_audio_outer {
  width: 300px;
  display: inherit;
  float: left;
  margin-top: 5px;
  margin-left: 15px;
}

.pronounciation_audio_outer .jp-audio .jp-type-single .jp-progress {
  left: 70px;
  width: 70%;
}

.radio-outer span {
  float: left;
}

.btm-fix {
  position: fixed;
  bottom: 0px;
}

.asment {
  display: table;
  width: auto;
  margin: auto;
  height: auto;
}

.asmentpage h3 {
  font-size: 15px;
  text-align: center;
  color: #4d4d4d;
  font-weight: 400;
  line-height: 28px;
  margin: 15px 0px;
}

.asmnt_im {
  width: 120px;
}

.bronze_badge h4 {
  margin-top: 30px;
}

.bronze_badge p {
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  color: #4e4e4e;
  margin: 10px 0px 25px;
}

.bronze_badge .bronze {
  width: 50px;
  height: 50px;
  transition: all 0.8s ease-out 0s;
  -moz-transition: all 0.8s ease-out 0s;
  -webkit-transition: all 0.8s ease-out 0s;
  -o-transition: all 0.8s ease-out 0s;
}

.bronze_badge .scale-img {
  width: 163px !important;
  height: 163px !important;
}

.bronze_badge .bronze_outer {
  width: 163px;
  height: 170px;
  margin: auto;
  text-align: center;
  line-height: 163px;
}

.fillsection {
  width: auto;
  display: table;
  padding-top: 150px;
}

.fillsection h3 {
  text-align: center;
  margin-bottom: 25px;
  padding-left: 0px;
}

.fillsection p {
  font-size: 16px;
  font-weight: 400;
  color: #555555;
}

.fillsection input {
  border: 0px;
  border-bottom: 2px dotted #737373;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  color: #555555;
  width: 135px;
  margin: 0px 5px;
  padding-left: 15px;
}

.fillsection ::-webkit-input-placeholder,
.fillsection :-moz-placeholder {
  font-size: 16px;
  font-weight: 400;
  color: #b4b4b4;
  font-style: italic;
}

.fillsection ::-moz-placeholder {
  font-size: 16px;
  font-weight: 300;
  color: #b4b4b4;
  font-style: italic;
}

.fillsection :-ms-input-placeholder {
  font-size: 16px;
  font-weight: 400;
  color: #b4b4b4;
  font-style: italic;
}

.true_false {
  display: block !important;
  width: 170px;
  padding-top: 150px;
}

.true_false .radio-outer .custom-radio {
  width: 27px;
  height: 28px;
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 12px;
  float: left;
  background: url("../images/false.png") no-repeat;
  margin-right: 15px;
}

.true_false .radio-outer .custom-radio.selected {
  background: url("../images/true.png") no-repeat;
}

.true_false .radio-outer label {
  margin-bottom: 5px;
}

.true_false .radio-outer label.active,
.true_false .radio-outer label:hover {
  background: none;
  color: #a5a0a0;
  border-radius: 5px;
}

.drag_section {
  margin: 250px auto 0%;
  display: block;
}

.drag_section h3 {
  float: left;
  padding: 0px;
}

.drag_section .drag_selection {
  width: auto;
  height: auto;
  display: table;
  clear: both;
  margin: 20px auto 0px;
}

.drag_content_outer {
  width: auto;
  height: auto;
  display: table;
  margin: auto;
}

.drag_selected {
  position: relative;
  width: 90px;
  height: 37px;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-top: -4px;
}

.drag_selected .item.ui-draggable.ui-draggable-handle.ui-sortable-handle {
  margin: 0px;
  border: 0px;
  background: none;
}

.drag_selected .ui-draggable:before {
  background: none !important;
}

.drag_selection .ui-draggable:before {
  background: none !important;
}

.fs {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 20px;
  width: 90px;
  height: 37px;
  border: 1px solid #cecece;
}

.fsortable-empty {
  float: left;
  height: 37px;
  width: 90px;
}

.item {
  width: 90px;
  height: 37px;
  line-height: 37px;
  margin: 10px;
  border: 1px solid #cecece;
  text-align: center;
  float: left;
  font-size: 16px;
  font-weight: 400;
  color: #4a4a4a;
  background-color: #fff;
  cursor: pointer;
}

.item:hover {
  background-color: #f3f3f3;
}

.roundMobMenu {
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  line-height: 40px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .small_hdr+div .resources_section {
    padding-top: 80px;
  }

  .small_hdr+div .resources_section .link_section {
    position: fixed;
    top: 0;
    z-index: 1000;
    height: auto;
    padding: 0 4px;
    box-shadow: 0 0 9px 0 #666;
  }
}

.recorderWrapper {
  width: 5px;
  height: 5px;
  opacity: 0;
}

.recordMic,
.stopRecordMic {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 5px solid #fed913;
  background: #fff;
  font-size: 30px;
}

.recordMic:hover,
.stopRecordMic:hover {
  background: #fed913;
}

.stopRecordMic {
  font-size: 20px;
  display: none;
  box-shadow: 0 0 50px 0 #fed913;
}

.recorderButtonWrapper {
  margin: 23px 0 0 20px;
  float: left;
}

.recorderPlay {
  display: none;
}

@media only screen and (max-width: 1370px) {
  .botm_fx {
    position: inherit;
  }

  .start_page {
    margin-top: 155px;
  }

  .start_page.asmentpage {
    margin-top: 70px;
  }

  .start_page.asmentpage.practice {
    margin-top: 37px;
  }

  .fillsection {
    padding-top: 50px;
  }

  .true_false {
    padding-top: 55px;
  }

  .crt_section2.drag_section {
    margin-top: 14%;
  }

  .rit-wrg img {
    width: 93px;
  }

  .right_wrong {
    margin-top: 7%;
  }

  .listening_outer {
    margin: 7% auto 0%;
  }
}

@media only screen and (max-width: 1300px) {
  .drop-menu {
    right: 0px;
    top: 43px;
  }

  .drop-menu:before {
    right: 28px;
  }

  .btfix {
    position: inherit;
    margin-top: 5%;
  }
}

@media only screen and (max-width: 1220px) {

  .contact-right-colm .contact-form-dtails .col1 p,
  .contact-right-colm .contact-form-dtails .col2 p {
    font-size: 12px;
  }

  .container.banner-content {
    max-width: 1110px;
  }

  .banner .banner-fluid .hover-view .slideimg {
    max-width: 4375px !important;
    height: 200px !important;
  }

  .banner .banner-fluid .hover-view .slideimg2,
  .banner .banner-fluid .hover-view .slideimg3 {
    max-width: 4230px !important;
    height: 195px !important;
  }

  .banner .banner-fluid .hover-view .slideimg4 {
    max-width: 4335px !important;
    height: 200px !important;
  }

  .banner .banner-fluid .more {
    width: 90px;
    right: 60px;
  }

  .about_section .about_left_outer .about_left_colm1 .tsti_outer ul li {
    width: 45%;
  }

  .about_section .about_left_outer .about_left_colm1 .tsti_outer ul li .mor {
    float: none;
    margin: auto;
  }

  .about_section .about_left_outer .about_left_colm1 .tsti_outer ul li .content_outer p {
    text-align: center;
  }

  .about_section .about_left_outer .about_left_colm1 .tsti_outer ul li .testi-im {
    float: none;
    margin: auto;
  }

  .about_section .about_left_outer .about_left_colm1 .tsti_outer ul li .testi-name {
    margin-top: 25px;
    text-align: center;
    width: 100%;
  }

  .about_section .right_colm1 .first_colm p {
    font-size: 16px;
  }

  .lms_content_section .left_colm1 ul .icon1 a {
    font-size: 10px;
  }

  .lms_content_section .left_colm1 ul .icon2 a,
  .lms_content_section .left_colm1 ul .icon2 span {
    font-size: 10px;
  }

  .lms_content_section .left_colm1 ul .icon3 a {
    font-size: 10px;
  }

  .lms_content_section .left_colm1 ul .icon4 a,
  .lms_content_section .left_colm1 ul .icon4 span {
    font-size: 10px;
  }

  .lms_content_section .left_colm1 .colm-div1 {
    min-height: auto;
  }

  .lms_content_section .left_colm1 .colm-div1 .im-outer {
    height: auto;
  }

  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 63%;
  }

  .lms_content_section .right_colm1 .scnd-colm2 .section3 {
    width: auto;
  }

  .stry-makeouter .story-cnt {
    right: 3%;
    top: 20%;
  }

  .mCustomScrollBox {
    height: 340px !important;
  }

  .owl-outer {
    float: right;
  }

  .lnk5 {
    padding-right: 57px !important;
  }

  .lnk2 {
    padding-top: 4px !important;
  }

  .lnk4 {
    padding-left: 27px !important;
  }

  .lnk1 {
    margin-bottom: 0px;
  }

  .datepicker {
    width: 245px !important;
  }

  .datepicker--day-name {
    width: 31px !important;
  }

  .datepicker--cell-day {
    width: 37px !important;
    height: 36px !important;
    font-size: 12px;
  }

  .pro-right-section .event-date-outer {
    width: 130px;
  }

  .pro-right-section .event-date-outer ul li {
    width: 100% !important;
  }

  .profile_section .left_colm1 ul {
    width: 89%;
  }

  .profile_section .left_colm1 ul li {
    width: 16%;
    height: auto;
    margin-bottom: 30px;
    padding-bottom: 15px;
  }

  .profile_section .left_colm1 ul li:before {
    background-position: center;
    width: 100%;
  }

  .about_section .right_colm1 .first_colm {
    height: 385px;
  }

  .courses_content_outer {
    width: 71%;
  }

  .courses_content_outer ul .colm-div1 .im-outer {
    height: auto;
  }

  .courses_content_outer ul li {
    width: 31%;
    height: auto;
    min-height: auto;
  }

  .banner {
    height: 525px !important;
  }

  .banner .owl-controls .owl-nav {
    width: 95%;
  }

  .banner .items {
    height: 525px !important;
  }

  .banner .owl-controls .owl-nav .owl-prev {
    margin-left: 3%;
  }

  .banner .owl-controls .owl-nav .owl-next {
    margin-right: 3%;
  }

  .banner .banner-fluid .ourt-colm-bn ul li {
    width: 150px;
    height: 147px;
  }

  .banner .banner-fluid .ourt-colm-bn ul .ic01 {
    width: 150px !important;
    height: 147px !important;
    background-size: cover !important;
  }

  .ic02,
  .ic03,
  .ic04 {
    width: 150px !important;
    height: 147px !important;
    background-size: cover !important;
  }

  .footer_section .colm2 .gm_icon {
    width: 18%;
    height: 75px;
    float: left;
    background-size: cover;
  }

  .footer_section .colm2:hover .gm_icon {
    width: 18%;
    height: 75px;
    background-size: cover;
  }

  .container {
    max-width: 90%;
  }
}

@media only screen and (max-width: 1165px) {
  .contact-right-colm .contact-form-dtails .col1 .cercle-div {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }

  .contact-right-colm .contact-form-dtails .col1 .cercle-div img {
    width: 21px;
  }

  .contact-right-colm .contact-form-dtails .col2 .cercle-div {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }

  .contact-right-colm .contact-form-dtails .col2 .cercle-div img {
    width: 21px;
  }

  .contact-right-colm .contact-form-dtails .col2 p {
    margin: 6px 0px 0px;
  }

  .itm-hvr-div .crt-sec h4 {
    font-size: 10px;
  }

  .itm-hvr-div .crt-sec h4 span {
    font-size: 10px;
  }
}

@media only screen and (max-width: 1100px) {
  .banner .banner-fluid .hover-view .slideimg2 {
    width: 2670px !important;
    height: 160px !important;
  }

  .banner .banner-fluid .hover-view .slideimg3 {
    width: 1775px !important;
    height: 160px !important;
  }

  .banner .banner-fluid .hover-view .slideimg4 {
    width: 920px !important;
    height: 160px !important;
  }

  .banner .banner-fluid .snp_div,
  .banner .banner-fluid .snp_div4 {
    width: 280px;
    height: auto;
    top: 57px;
    right: 65px;
  }

  .banner .banner-fluid .snp_div h4,
  .banner .banner-fluid .snp_div4 h4 {
    font-size: 14px;
    text-align: center;
  }

  .banner .banner-fluid .snp_div span a,
  .banner .banner-fluid .snp_div4 span a {
    font-size: 14px;
  }

  .banner .banner-fluid .hover-view .slideimg {
    width: 3555px !important;
    height: 160px !important;
  }

  .container.banner-content {
    max-width: 900px;
  }

  .banner .banner-fluid .more {
    width: 90px;
    right: 40px;
    top: 15px;
  }

  .login_bg {
    height: auto;
    padding-bottom: 20%;
  }

  ul.rtabs li:last-child {
    width: 350px !important;
  }

  .signup_view_oueter {
    left: 38%;
  }

  .about_section .about_left_outer .left-colm2 ul li {
    width: 48.2%;
    margin-bottom: 10%;
  }

  .about_section .about_left_outer .left-colm2 ul li:nth-child(2n) {
    margin-right: 0px;
  }

  .about_section .about_left_outer .about_left_colm1 h1 {
    font-size: 26px;
  }

  .signup_oueter {
    width: 500px;
  }

  .courses_content_outer {
    width: 68%;
  }

  .courses_content_outer ul li {
    width: 48%;
  }

  .courses_content_outer ul li:nth-child(3n) {
    margin: 0px 20px 20px 0px;
  }

  .courses_content_outer ul li:nth-child(2n) {
    margin: 0px 0px 20px 0px;
  }

  .banner .banner-fluid .more {
    font-size: 9px;
  }

  .banner .banner-fluid .icon1-hover {
    height: 175px;
  }

  .banner .banner-fluid .hover-view {
    width: 85%;
  }

  .banner .banner-fluid .snp-vdo-otr ul li .vdo::before {
    margin: 5px 0px 0px 7px;
    width: 19px;
    height: 20px;
    background-size: cover;
  }

  .banner .banner-fluid .snp-vdo-otr ul li .sin::before {
    width: 19px;
    height: 20px;
    background-size: cover;
  }

  .footer_section .colm2 {
    width: 36%;
  }

  .footer_section .colm2:hover .gm_icon {
    width: 80px;
    height: 75px;
  }

  .footer_section .colm2 .gm_icon {
    width: 80px;
  }

  .footer_section .colm2 .gm_cnt {
    width: 60%;
    padding-left: 5%;
  }

  .footer_section .colm1 {
    width: 32%;
  }

  .banner {
    height: 375px !important;
  }

  .banner .items {
    height: 375px !important;
  }

  .banner .items img {
    height: 100%;
    width: 100% !important;
  }

  .banner .banner-fluid .ourt-colm-bn ul .ic01 {
    width: 125px !important;
    height: 125px !important;
    background-size: cover !important;
  }

  .ic02,
  .ic03,
  .ic04 {
    width: 125px !important;
    height: 125px !important;
    background-size: cover !important;
  }

  .banner .banner-fluid {
    bottom: 25px;
  }

  .banner .banner-fluid .ourt-colm-bn ul li {
    width: 125px;
    height: 125px;
  }

  .banner .banner-fluid h1 {
    font-size: 26px;
  }

  .banner .banner-fluid .snp-vdo-otr ul li a {
    font-size: 18px;
  }

  .banner .banner-fluid .ourt-colm-bn {
    margin: 15px auto 0px;
  }

  .element {
    height: 125px;
    width: 95px !important;
    margin-left: -47px;
    top: -21% !important;
  }
}

@media only screen and (max-width: 1065px) {
  .contact-right-colm .contact_form .captcha-im {
    line-height: 45px;
  }

  .contact-right-colm .contact_form .captcha-im img {
    width: 58%;
  }

  .contact-right-colm .contact-form-dtails .col1 .cercle-div,
  .contact-right-colm .contact-form-dtails .col2 .cercle-div {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  .contact-right-colm .contact-form-dtails .col1 .cercle-div img,
  .contact-right-colm .contact-form-dtails .col2 .cercle-div img {
    width: 21px;
  }

  .mCustomScrollBox {
    height: 295px !important;
  }
}

@media only screen and (max-width: 1024px) {
  .profile_section .left_colm1 ul li {
    width: 18%;
  }

  .banner {
    height: 300px !important;
  }

  .banner .items {
    height: 300px !important;
  }

  .banner .items img {
    height: 100%;
    width: 100% !important;
  }

  .banner .banner-fluid .ourt-colm-bn ul .ic01 {
    width: 85px !important;
    height: 85px !important;
    background-size: cover !important;
  }

  .ic02,
  .ic03,
  .ic04 {
    width: 85px !important;
    height: 85px !important;
    background-size: cover !important;
  }

  .banner .banner-fluid .ourt-colm-bn ul li {
    width: 85px;
    height: 85px;
  }

  .banner .banner-fluid .snp-vdo-otr ul li a {
    font-size: 14px;
  }

  .banner .banner-fluid .snp-vdo-otr ul li .sin::before,
  .banner .banner-fluid .snp-vdo-otr ul li .vdo::before {
    width: 15px;
    height: 15px;
    background-size: cover;
  }

  .banner .banner-fluid h1 {
    font-size: 20px;
  }

  .element {
    height: 80px;
    width: 60px !important;
    margin-left: -30px;
    top: -19% !important;
  }

  .camera_caption h1 {
    margin-top: 10%;
    font-size: 32px;
  }

  .learning_section h2 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 1000px) {
  .shape_div {
    height: auto;
    position: absolute;
    right: 10px;
    bottom: auto;
    width: 80px;
    left: auto;
    top: -80px;
  }

  .shape_div img {
    width: 100%;
  }

  .spkr-section {
    display: table;
    float: none;
    margin: auto;
  }

  .pic_rit {
    float: none;
    width: 110px;
    border: 1px solid #eee;
    margin: 0px auto 30px !important;
  }

  .pic_rit.crt1 {
    margin: 0px auto 30px !important;
  }

  .contact-right-colm .contact-form-dtails .col1,
  .contact-right-colm .contact-form-dtails .col2 {
    width: 100%;
  }

  .about_section .right_colm1 .first_colm p {
    font-size: 12px;
  }

  .about_section .right_colm1 .first_colm .sign {
    width: 150px;
    height: 35px;
    margin-left: -75px;
  }

  .about_section .right_colm1 .first_colm .sign a {
    font-size: 13px;
    line-height: 35px;
  }

  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 45%;
  }

  .stry-makeouter .story-cnt {
    width: auto;
  }

  .stry-makeouter .story-cnt h3 {
    font-size: 17px;
  }

  .owl-outer .items ul li .colm-div1 p {
    font-size: 12px;
  }

  .owl-outer .items ul li .itm-hvr-div p,
  .owl-outer .items ul li .itm-hvr-div span {
    font-size: 12px;
  }

  .profile .profile_oueter {
    width: 85%;
  }

  .profile .profile_oueter .frm_outer {
    width: 90%;
  }

  .datepicker-inline .datepicker {
    margin: 20px 0px 0px 7%;
  }

  .datepicker--day-name {
    width: 13.3% !important;
  }

  .datepicker--cell-day {
    width: 13.3% !important;
    height: 35px !important;
    font-size: 12px;
  }

  .datepicker {
    width: 85% !important;
  }

  .pro-right-section .event-date-outer {
    width: 100%;
    margin-right: 0px;
    height: auto;
  }

  .profile_section .left_colm1 ul {
    width: 100%;
  }

  .pro-right-section .event-date-outer ul li {
    width: 50% !important;
  }

  .profile_section .pro_section1 {
    height: auto;
    display: table;
  }

  .profile_section .pro_section1 .colm2_outer {
    width: 65%;
  }

  .correcr_container,
  .disction-fluid .correcr_container {
    width: 85%;
  }

  .itm-hvr-div .crt-sec h4 {
    font-size: 12px;
  }
}

@media only screen and (max-width: 900px) {
  .insucses_section .next_sec-outer .nxt-stp input {
    width: 100px;
    height: 40px;
    font-size: 14px;
  }

  .try-cmnt-div h3 {
    font-size: 12px;
  }

  .try-cmnt-div h5 {
    font-size: 9px;
  }

  .banner .banner-fluid .hover-view .slideimg2 {
    width: 2270px !important;
    height: 118px !important;
  }

  .banner .banner-fluid .hover-view .slideimg3 {
    width: 1515px !important;
    height: 118px !important;
  }

  .banner .banner-fluid .hover-view .slideimg4 {
    width: 740px !important;
    height: 118px !important;
  }

  .container.banner-content {
    max-width: 750px;
  }

  .banner .banner-fluid .hover-view .slideimg {
    width: 3010px !important;
    height: 118px !important;
  }

  .banner .banner-fluid .icon1-hover {
    height: 135px;
  }

  .banner .banner-fluid .snp_div,
  .banner .banner-fluid .snp_div4 {
    width: 227px;
    height: auto;
    top: 34px;
    right: 15px;
  }

  .banner .banner-fluid .snp_div h4,
  .banner .banner-fluid .snp_div4 h4 {
    font-size: 12px;
    text-align: center;
  }

  .banner .banner-fluid .snp_div span a,
  .banner .banner-fluid .snp_div4 span a {
    font-size: 12px;
  }

  .login_outer_div {
    left: 50% !important;
  }

  .signup_oueter {
    left: 33%;
  }

  .signup_view_oueter {
    left: 50%;
    margin-left: -275px;
  }

  .cnt-fuild .pge-my-crc .col-wd .col-wd-in1 {
    margin-top: 25px;
  }

  .cnt-fuild .pge-my-crc .col-wd .col-wd-in1 img {
    width: 130px;
  }

  .itm-hvr-div span {
    line-height: 17px;
  }

  .mCustomScrollBox {
    height: 315px !important;
  }

  .resources_section .resources_content_outer ul li p {
    padding-left: 3%;
    width: 90%;
  }

  .profile_section .left_colm1 ul li {
    width: 17%;
  }

  .profile_section .pro_section1 .colm2_outer {
    width: 60%;
  }

  .courses_content_outer ul li {
    width: 47%;
  }

  .banner .banner-fluid .more {
    font-size: 9px;
    right: 0;
    top: 5px;
  }

  .footer_section {
    height: auto;
    display: table;
  }

  .footer_section .social_outer {
    width: 50.1%;
    float: left;
    margin-top: -3%;
    padding-bottom: 3%;
    border-right: 1px solid #929292;
  }

  .footer_section .colm2 {
    width: 50%;
    border-right: 0px;
  }

  .footer_section .colm1 {
    width: 50%;
    width: 50%;
  }

  .second_section ul li {
    width: 50%;
    margin-bottom: 7%;
  }

  .second_section ul li:nth-child(2n) {
    border-right: 0px;
  }

  .second_section ul li:nth-child(3n) {
    border-right: 1px solid #D6D6D6;
  }
}

@media only screen and (max-width: 800px) {

  #cardSlots div,
  #cardPile div {
    width: 130px;
    height: 37px;
    line-height: 37px;
  }

  .ui-draggable::before {
    height: 37px;
  }

  #cardPile div {
    font-size: 11px;
  }

  #cardSlots,
  #cardPile {
    width: 130px;
  }

  #cardSlots {
    margin-right: 75px;
  }

  .drg_crt ul li {
    display: block;
    width: 130px;
    height: 37px;
    background: #d9e6f1;
    font-size: 11px;
    font-weight: 400;
    color: #3e3e3e;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    position: relative;
    margin: 10px;
    text-align: center;
    line-height: 37px;
  }

  .drg_crt ul li:before {
    height: 37px;
  }

  .droppable {
    width: 130px;
    height: 37px;
  }

  .draggable {
    line-height: 37px;
  }

  .draggable span {
    height: 37px;
    width: 130px;
    background: #d9e6f1;
    font-size: 11px;
  }

  .ui-draggable span::before {
    height: 37px;
  }

  .fillsection {
    width: 500px;
  }

  .fillsection p {
    line-height: 50px;
  }

  .btfix {
    position: inherit;
    margin-top: 50px;
  }

  .listen-section,
  .audio_details {
    width: 500px;
  }

  .contact-right-colm .contact_form .frm-left {
    width: 100%;
  }

  .contact-right-colm .contact_form textarea {
    width: 100%;
    margin-bottom: 20px;
    display: table;
  }

  .banner .banner-fluid .hover-view .slideimg3 {
    width: 1200px !important;
    height: 100px !important;
  }

  .banner .banner-fluid .hover-view .slideimg4 {
    width: 591px !important;
    height: 100px !important;
  }

  .container.banner-content {
    max-width: 600px;
  }

  .banner .banner-fluid .hover-view {
    margin: 0px auto 0px;
  }

  .banner .banner-fluid .hover-view .slideimg {
    width: 2390px !important;
    height: 100px !important;
  }

  .banner .banner-fluid .hover-view .slideimg2 {
    width: 1790px !important;
    height: 105px !important;
  }

  ul.rtabs li:last-child {
    width: 240px !important;
  }

  .about_section .right_colm1 .first_colm p {
    font-size: 17px;
  }

  .about_section .about_left_outer {
    width: 100%;
  }

  .about_section .right_colm1 {
    width: 100%;
    height: auto;
    margin-bottom: 7%;
  }

  .about_section .right_colm1 .second-colm {
    width: 44%;
    height: 385px;
    margin-left: 5%;
    float: left;
  }

  .about_section .right_colm1 .first_colm {
    width: 40%;
    float: left;
  }

  .lms_content_section .left_colm1 .colm-div1 .prgrs-div .bi-bar {
    width: 75% !important;
  }

  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 65%;
  }

  .cnt-fuild .pge-my-crc .col-wd .col-wd-in2 h1 {
    font-size: 22px;
  }

  .cnt-fuild .pge-my-crc .col-wd .col-wd-in2 p {
    font-weight: 300;
    font-size: 14px;
  }

  .stry-makeouter .story-cnt h3 {
    font-size: 12px;
    line-height: 18px;
  }

  .stry-makeouter .story-cnt a {
    font-size: 10px;
    padding: 6px 12px;
  }

  .owl-outer .colm-div1 .im-outer {
    background-size: cover !important;
  }

  .owl-outer .items ul li .itm-hvr-div span,
  .owl-outer .items ul li .itm-hvr-div p {
    font-size: 14px;
  }

  .owl-outer .items ul li .colm-div1 p {
    font-size: 14px;
  }

  .signup_oueter .content_colm {
    width: 78%;
  }

  .resources_section .link_section h3 {
    font-size: 18px;
  }

  .course_section h4,
  .resources_section .link_section ul li a {
    font-size: 12px;
  }

  .banner {
    height: 260px !important;
  }

  .banner .banner-fluid .more {
    font-size: 7px;
    right: 0;
  }

  .banner .items {
    height: 260px !important;
  }

  .banner .banner-fluid .ourt-colm-bn {
    margin: 8px auto 0px;
  }
}

@media only screen and (max-width: 760px) {
  .profile .login_radio {
    margin-right: 17px;
    width: auto;
  }

  .menu_section_outerdiv .menu_section .menu_outer ul li a {
    font-size: 12px;
  }

  .pro-right-section .event-date-outer ul li {
    width: 45.2% !important;
  }

  .datepicker--cell-day {
    width: 13.9% !important;
    height: 50px !important;
  }

  .datepicker--day-name {
    width: 13.9% !important;
  }

  .datepicker {
    width: 90% !important;
  }

  .pro-right-section {
    width: 100%;
  }

  .profile_section .left_colm1 ul li {
    width: 11%;
    margin: 2.3%;
  }

  .profile_section .pro_left_section {
    width: 100%;
  }

  .profile_section .pro_section1 .colm2_outer {
    width: 55%;
  }

  .nav-box ul li {
    height: 33px !important;
  }

  .nav-box ul li a {
    line-height: 33px !important;
    padding-left: 1px;
  }

  .nav-box ul li a:hover {
    color: #fdd318;
  }

  .nav-box ul li:hover {
    border-bottom: 0px;
  }

  .res_search {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 15px;
  }

  .res_search .search-field {
    width: 100%;
    height: 34px;
    background: none;
    border: 1px solid #ececec;
    padding: 0px 15px;
    font-size: 13px;
  }

  .res_search .srch-icn {
    position: absolute;
    top: 5px;
    right: 8px;
    border: none;
    background: url(../images/search.png) no-repeat;
    width: 23px;
    height: 23px;
  }

  .learning_section h2 {
    font-size: 22px;
  }

  .srchform {
    display: block;
  }

  .search_icon,
  .search {
    display: none;
  }

  .crt_section2 {
    margin: 10px auto 0%;
  }

  .crt_section2 h3 {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .crt_section2 h4 {
    font-size: 12px;
    padding-top: 10px;
  }

  .radio-outer {
    margin-top: 5px;
  }

  .radio-outer label {
    margin-bottom: 2px;
  }

  .sucses_section h3 {
    display: block;
    float: none;
    position: absolute;
    bottom: -40px;
    font-size: 10px;
    left: -24px;
  }

  .sucses_section h3 a {
    text-align: center;
    font-size: 12px;
    border: 0;
  }

  .sucses_section h3.static {
    position: static;
  }

  .sucses_section .report_colm {
    bottom: 4px;
  }

  .sucses_section .correcr_container {
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

@media only screen and (max-width: 700px) {
  .match_crt_sec {
    width: 541px !important;
  }

  .crt_section2.fillsection #content {
    width: 70%;
  }

  #cardSlots {
    margin-right: 0%;
  }

  #cardPile {
    float: right;
  }

  .crt_section2.listening_outer {
    min-height: 200px !important;
  }

  .listening_ft_sec_outer {
    position: inherit !important;
  }

  .crt_section2.right_wrong {
    width: auto;
    display: table;
  }

  .crt_section2 p {
    font-size: 13px;
  }

  .dwonload_pdf {
    right: 20px;
    top: -75px;
    width: 30px;
    height: 40px;
    background-size: cover;
  }

  .contact-left-colm {
    float: none;
    margin: auto;
  }

  .contact-right-colm {
    width: 100%;
  }

  .vd-cntnr {
    max-width: 100% !important;
  }

  .video-question-outer .video_div1 {
    height: 400px;
  }

  ul.rtabs li:last-child {
    width: 200px !important;
  }

  .profile .profile_oueter .frm_outer .right_colm_outer,
  .profile .profile_oueter .frm_outer .left-colm-outer {
    width: 100%;
  }

  .about_section .right_colm1 .first_colm {
    width: 50%;
  }

  .lms_content_section .right_colm1,
  .lms_content_section .left_colm1 {
    width: 100%;
  }

  .profile {
    padding-bottom: 40%;
    height: auto;
  }

  .profile .profile_oueter {
    width: 85%;
    height: auto;
    display: table;
    padding-bottom: 15%;
  }

  .profile_section .left_colm1 ul li h5 {
    font-size: 12px;
  }

  .profile_section .left_colm1 ul .gold {
    line-height: 62px;
  }

  .profile_section .left_colm1 ul li img {
    width: 50%;
  }

  .menu_section_outerdiv .menu_section .menu_outer ul li {
    padding: 0px 8px;
  }

  .resources_section .resources_content_outer ul li p {
    padding-left: 3%;
    width: 88%;
  }

  .profile_section .pro_section1 {
    position: relative;
  }

  .profile_section .pro_section1 .colm2_outer {
    width: 100%;
    margin-top: 25px;
  }

  .profile_section .pro_section1 .edt-pro {
    position: absolute;
    top: 40px;
    right: 30px;
  }

  .signup_oueter {
    width: 450px;
    height: auto;
    padding-bottom: 100px;
  }

  .correcr_container {
    width: 95%;
    padding-top: 103px;
  }

  .disction-fluid .correcr_container {
    width: 95%;
  }

  .crt_section2 {
    width: 85%;
  }

  .correcr_container .svn_stpdiv .lftdiv1 {
    padding-left: 20px;
  }

  .banner .banner-fluid .icon1-hover {
    height: 138px;
  }

  .play {
    height: 55px;
    margin: -25px 0 0 -25px;
    width: 55px;
  }

  .play span {
    height: 55px;
    width: 55px;
    background-size: cover;
  }

  .video-container {
    width: 500px !important;
    height: 290px !important;
  }

  .section_3 .vido_outer {
    width: 500px;
    height: 290px;
  }

  .section_3 h4 {
    font-size: 20px;
  }

  .lms-course-tab {
    position: absolute;
    top: 69px;
  }

  .lms-course-tab li a {
    font-size: 11px !important;
  }

  .lms_content_section {
    margin-top: 20px;
  }

  .lms_content_section .right_colm1 .lrg-colm {
    margin-top: 0;
    margin-bottom: 15px;
  }

  .lms_content_section .left_colm1 .colm-div1 p {
    font-size: 12px;
  }

  .lms_content_section .left_colm1 .colm-div1 .im-outer img {
    height: 100px;
    object-fit: cover;
  }
}

@media only screen and (max-width: 650px) {
  .insucses_section {
    height: auto;
    padding-bottom: 5%;
  }

  .insucses_section .next_sec-outer {
    float: none;
    margin: 25px auto;
  }

  .insucses_section h3 {
    float: none;
    display: table;
    margin: auto;
  }

  .insucses_section h3 a {
    display: table;
  }

  .banner {
    margin-top: 70px;
  }

  .login_bg {
    margin-top: 0;
  }

  .headroom--unpinned {
    transform: translateY(-350%);
  }

  .menu_section_outerdiv .menu_section {
    height: 125px;
  }

  .menu_section_outerdiv .menu_section .menu_outer ul li {
    padding: 0px 12px;
  }

  .menu_section_outerdiv .menu_section .menu_outer ul li a {
    font-size: 13px;
  }

  .crse-clom-lg {
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  .owl-outer {
    float: inherit;
  }

  .resources_section .resources_content_outer {
    width: 52%;
  }

  .resources_section .resources_content_outer ul li p {
    padding-left: 0%;
    width: 100%;
  }

  .resources_section .resources_content_outer ul li span {
    float: none;
    margin: auto;
    margin-bottom: 20px;
  }

  .profile {
    margin-top: 65px;
  }

  .datepicker--cell-day {
    width: 13.8% !important;
    height: 50px !important;
  }

  .datepicker--day-name {
    width: 13.8% !important;
  }

  .logo {
    width: 160px;
  }

  .courses_content_outer {
    width: 55%;
  }

  .courses_content_outer ul li {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .insucses_section {
    position: inherit;
  }

  .video-question-outer .crt_section2 .radio-outer p {
    width: 75% !important;
  }

  .write_about p {
    width: 100% !important;
  }

  .write_about textarea {
    height: 275px;
  }

  .video-question-outer .skip-outer {
    width: 355px;
  }

  .video-question-outer .skip-outer .crct {
    font-size: 14px;
  }

  .video-question-outer .skip-outer .tic img {
    width: 28px;
  }

  .pronounciation_audio_outer .jp-audio .jp-type-single .jp-progress {
    width: 71% !important;
  }

  .contact-right-colm {
    padding: 35px;
  }

  .contact-right-colm .contact_form .capcha-outer {
    width: 100%;
  }

  .contact-right-colm .contact_form input.submit-btn {
    float: right;
  }

  .banner .banner-fluid .icon1-hover {
    height: 137px;
  }

  .banner .banner-fluid .hover-view .slideimg {
    width: 1775px !important;
    height: 80px !important;
  }

  .container.banner-content {
    max-width: 450px;
  }

  .banner .banner-fluid .snp_div {
    width: 185px;
    height: auto;
    top: 34px;
    right: 8px;
  }

  .banner .banner-fluid .snp_div h4 {
    font-size: 10px;
    text-align: center;
  }

  .banner .banner-fluid .snp_div span a {
    font-size: 11px;
  }

  .banner .banner-fluid .hover-view .slideimg2 {
    width: 1310px !important;
    height: 80px !important;
  }

  .banner .banner-fluid .hover-view .slideimg3 {
    width: 875px !important;
    height: 90px !important;
  }

  ul.rtabs li {
    padding: 0px 8% !important;
    width: auto !important;
  }

  ul.rtabs li:last-child {
    width: auto !important;
  }

  .lgn-bg2 {
    padding-bottom: 33% !important;
  }

  .signup_oueter {
    width: 80%;
    height: auto;
    padding-bottom: 65px;
    display: table;
    position: relative;
    margin: 0px auto;
    float: none;
    left: 0px;
  }

  .signup_oueter p {
    font-size: 11px !important;
    color: #9d9d9d;
    position: absolute;
    bottom: 52px;
    width: 100%;
    text-align: center;
    padding: 0px 15px;
  }

  .signup_to {
    width: 80% !important;
  }

  .stry-makeouter .owl-controls {
    bottom: 5px;
    left: 4%;
  }

  .radio-outer label {
    width: 100%;
  }

  .crt_section2 p {
    width: 82%;
  }

  .drop-menu ul li a {
    padding: 10px 0px !important;
  }

  .links-outer ul li a {
    padding: 0px 5px;
  }

  .banner .banner-fluid .icon1-hover {
    height: 125px;
  }

  .banner .banner-fluid .snp_div {
    width: 185px;
    height: auto;
    top: 34px;
    right: 7px;
  }

  .banner .banner-fluid .hover-view .slideimg3 {
    width: 865px !important;
    height: 90px !important;
  }

  .banner .banner-fluid .hover-view .slideimg4 {
    width: 381px !important;
    height: 80px !important;
    margin-left: -53px;
  }

  .banner .banner-fluid .snp_div4 {
    width: 227px;
    height: auto;
    top: 34px;
    right: -20px;
  }

  .element {
    top: -27% !important;
  }

  .footer_section .colm1 {
    width: auto;
    margin: auto;
    float: none;
    display: table;
    height: auto;
    border-right: 0px;
    padding-bottom: 35px;
  }

  .footer_section .colm1 .ftr_menu {
    display: table;
    margin: 50px auto 10px;
  }

  .footer_section .colm2 {
    width: auto;
    border-right: 0px;
    margin: auto;
    float: none;
    height: auto;
    padding-bottom: 6%;
    display: table;
  }

  .footer_section .social_outer {
    width: auto;
    float: none;
    display: table;
    margin-top: -3%;
    padding-bottom: 3%;
    border-right: 0px solid #929292;
    margin: auto;
  }

  .footer_section .colm2 .gm_icon,
  .footer_section .colm2:hover .gm_icon {
    width: 80px;
    margin: 0px;
    float: left;
    display: inline-block;
  }

  .footer_section .colm2 .gm_cnt {
    width: 300px;
    padding-left: 5%;
    float: left;
    margin-top: 0px;
  }

  .section_3 h4 {
    margin: 0px auto 0px;
  }

  .section_3 .line {
    display: none;
  }

  .second_section ul li {
    width: 100%;
    margin-bottom: 10%;
    border-right: 0px;
  }

  .second_section ul li:nth-child(3n) {
    border-right: 0px;
  }

  .video-container {
    width: 360px !important;
    height: 200px !important;
  }

  .section_3 .vido_outer {
    width: 360px;
    height: 200px;
  }

  .section_3 h4 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 568px) {
  .match_crt_sec {
    width: 460px !important;
  }

  .crt_section2.fillsection #content {
    width: 65%;
  }

  .drag_selected {
    margin: 0px auto 20px;
    float: none;
  }

  .drag_section h3 {
    padding: 0px;
    display: block;
    float: none;
    width: 100%;
    clear: both;
    text-align: center;
    margin-bottom: 25px;
  }

  .btfix {
    position: inherit;
  }

  .start_page {
    width: 80%;
    padding-bottom: 12%;
    display: table;
  }

  .login_outer_div {
    padding: 5%;
  }

  .about_section .right_colm1 .first_colm p {
    font-size: 14px;
  }

  .stry-makeouter .owl-carousel .owl-item img {
    height: 160px;
  }

  .links-outer ul li a {
    padding: 0px 2px;
  }

  .banner .banner-fluid .more {
    font-size: 7px;
    right: 0;
    top: 0px;
  }

  .learning_section {
    height: auto;
    padding: 15px 0px;
  }

  .learning_section h2 {
    font-size: 30px;
    line-height: 36px;
  }
}

@media only screen and (max-width: 530px) {
  .video-question-outer .skip-outer {
    width: 100%;
  }

  .video-question-outer .skip-outer .currecr-colm1 {
    margin: 10px 10px 0 0;
  }

  .video-question-outer .skip-outer .currecr-colm1 .tic {
    font-size: 37px;
  }

  .video-question-outer .skip-outer .crct {
    margin-right: 0px !important;
  }

  .video-question-outer .skip-bt {
    margin-right: 10px;
  }

  .pronounciation_audio_outer {
    width: 230px;
  }

  .pronounciation_audio_outer .jp-audio .jp-type-single .jp-progress {
    width: 61% !important;
  }

  .audio_details {
    width: 400px;
  }

  .jp-audio {
    width: 100% !important;
  }

  .jp-audio .jp-type-single .jp-progress {
    left: 70px;
    width: 79%;
    width: 78% !important;
  }

  .audio_details {
    width: 100%;
  }

  .perc-crcle {
    float: none;
    margin: auto auto 15px;
  }

  .perc-crcle.left-aligned {
    float: left;
  }

  .insucses_section .next_sec-outer .nxt-stp {
    float: none;
    margin: auto !important;
    display: table;
  }

  .try-cmnt-div {
    width: 100%;
    margin-bottom: 15px;
  }

  .try-cmnt-div h3 {
    text-align: center;
    margin-bottom: 10px !important;
  }

  .try-cmnt-div h5 {
    text-align: center;
    margin-bottom: 10px;
  }

  .try-cmnt-div.left-aligned {
    float: left;
    width: 50%;
    margin-bottom: 0;
    text-align: left;
    margin-left: 7px;
  }

  .try-cmnt-div.left-aligned h3 {
    text-align: left;
    font-size: 14px;
    margin: 5px 0 0 0;
  }

  .try-cmnt-div.left-aligned h5 {
    text-align: left;
    margin: 0;
  }

  .ldy-im {
    margin: auto;
    display: inherit;
    float: none;
  }

  .spkr-section {
    display: inherit;
    float: none;
    margin: auto;
  }

  .spkr-icon {
    margin: auto !important;
    margin-top: 25px !important;
  }

  .spkr-section .tlk-outer {
    margin: 30px auto 50px !important;
  }

  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 70%;
    margin-bottom: 35px;
  }

  .lms_content_section .right_colm1 .lrg-colm .section2 h3 {
    font-size: 14px;
  }

  .lms_content_section .right_colm1 .lrg-colm .section2 p {
    font-size: 12px;
  }

  .datepicker-inline .datepicker {
    margin: 20px 0px 0px 5% !important;
  }

  .datepicker--cell-day {
    width: 13.6% !important;
    height: 50px !important;
  }

  .datepicker--day-name {
    width: 13.6% !important;
  }

  .insucses_section {
    height: auto;
    padding-bottom: 30px;
  }

  .insucses_section .next_sec-outer {
    float: none;
    margin: auto;
  }

  .insucses_section h3 {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }

  .insucses_section h3 a {
    width: 100%;
    display: block;
  }

  .lft_tab .lft_tab-scrl .mCustomScrollBox {
    height: 400px !important;
  }

  .correcr_container .svn_stpdiv .lftdiv1 {
    float: right;
    margin-right: 4%;
  }

  .sucses_section {
    height: auto;
    padding-bottom: 0;
  }

  .sucses_section.voice-message {
    padding-bottom: 0px;
  }

  .sucses_section.voice-message .correcr_container {
    padding-top: 15px;
  }

  .sucses_section .next_sec-outer {
    float: none;
    margin: 0 auto 0px;
    width: 100%;
  }

  .sucses_section .next_sec-outer .nxt-stp {
    float: right;
  }

  .sucses_section .next_sec-outer .nxt-stp.right-aligned {
    float: right;
    margin-top: 8px;
  }

  .sucses_section .next_sec-outer .nxt-stp.right-aligned input {
    font-size: 12px;
    height: 34px;
    width: auto;
  }

  .sucses_section h3 {
    display: block;
    float: none;
    left: 0;
    display: none;
  }

  .sucses_section h3 a {
    width: 100%;
    display: block;
    text-align: center;
  }

  .crt_section2 p {
    width: 80%;
    font-size: 14px;
  }

  .correcr_container {
    padding-top: 85px;
  }

  .links-outer ul li a {
    padding: 0px 5px;
    padding: 0px 2px;
  }

  .links-outer ul li a img {
    width: 20px;
  }

  .pr_im_outer img {
    width: 100% !important;
  }
}

@media only screen and (max-width: 767px) {
  .match_crt_sec {
    width: 370px !important;
  }

  .drg_crt ul li {
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 9px;
  }

  #cardSlots {
    margin-left: -4px;
  }

  .drg_crt ul li::before {
    height: 30px;
    background-size: cover;
    width: 9px;
    right: -8px;
  }

  #cardSlots,
  #cardPile {
    width: 100px;
  }

  #cardSlots div {
    width: 100px;
    height: 30px;
    line-height: 30px;
  }

  #cardPile div {
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 9px;
  }

  .ui-draggable::before {
    height: 30px;
    width: 10px;
    left: -9px;
    background-size: cover;
  }

  .crt_section2.fillsection #content {
    width: 61%;
  }

  .contact-right-colm .contact-form-dtails .col1 .cercle-div,
  .contact-right-colm .contact-form-dtails .col2 .cercle-div {
    width: 50px;
    height: 50px;
    line-height: 50px;
    float: none;
    margin: auto;
  }

  .contact-right-colm .contact-form-dtails .col1,
  .contact-right-colm .contact-form-dtails .col2 {
    margin-bottom: 20px;
  }

  .contact-right-colm .contact-form-dtails .col1 p,
  .contact-right-colm .contact-form-dtails .col2 p {
    text-align: center;
    float: none;
    padding: 0px;
  }

  .banner .banner-fluid .hover-view .slideimg3 {
    width: 865px !important;
    height: 80px !important;
  }

  .about_section .about_left_outer .left-colm2 ul li {
    width: 100%;
  }

  .about_section .about_left_outer .about_left_colm1 .tsti_outer ul li {
    width: 100%;
    margin-bottom: 12%;
  }

  .about_section .right_colm1 .first_colm,
  .about_section .right_colm1 .second-colm {
    width: 80%;
    float: none;
    margin: 0% auto 7%;
  }

  .menu_section_outerdiv .menu_section .menu_outer ul li a {
    font-size: 11px;
  }

  .stry-makeouter .owl-carousel .owl-item img {
    height: 130px;
  }

  .profile_section .left_colm1 ul .gold {
    font-size: 12px;
  }

  .profile_section .left_colm1 ul li {
    margin: 1.8%;
  }

  .resources_section .link_section h3 {
    padding: 26px 18px;
  }

  .resources_section .link_section h4 {
    padding-left: 18px;
  }

  .resources_section .link_section ul li a {
    padding: 20px 0px 20px 18px;
  }

  .lft_tab {
    width: 270px;
    margin-left: -270px;
  }

  .lft_tab p,
  .lft_tab .situational h4,
  .lft_tab .clm-outer ul li a {
    font-size: 12px;
  }

  .lft_tab .opn-tb {
    width: 40px;
    height: 38px;
    right: -38px;
    top: 85px;
  }

  .lft_tab .tb_close {
    width: 32px;
    height: 38px;
    right: -29px;
  }

  .disabled .bs-wizard-dot .icon2,
  .bs-wizard-dot .icon1 {
    width: 31px;
    height: 31px;
    background-size: cover;
  }

  .correcr_container .svn_stpdiv .stpotr {
    width: 277px;
  }

  span.quit {
    padding: 12px 0px 0px 20px;
    width: 75px !important;
  }

  .bs-wizard .col-xs-2 {
    width: 14%;
  }

  .iconlock {
    width: 12px;
    height: 12px;
    background-size: cover;
  }

  .bs-wizard>.bs-wizard-step>.progress {
    margin: 20px 0;
  }

  .bs-wizard>.bs-wizard-step>.bs-wizard-dot {
    width: 30px;
    height: 30px;
    font-size: 11px;
    line-height: 26px;
  }

  .banner .banner-fluid .icon1-hover {
    height: 110px;
  }

  .banner .banner-fluid h1 {
    font-size: 16px;
  }

  .banner .banner-fluid .snp-vdo-otr ul li .sin::before,
  .banner .banner-fluid .snp-vdo-otr ul li .vdo::before {
    width: 10px;
    height: 10px;
    background-size: cover;
    margin-top: 7px;
  }

  .banner .owl-controls .owl-nav .owl-next {
    margin-right: 0%;
  }

  .banner .owl-controls .owl-nav .owl-prev {
    margin-left: 0%;
  }

  .banner .banner-fluid .snp-vdo-otr ul li a {
    font-size: 11px;
  }

  .banner .banner-fluid .ourt-colm-bn ul li {
    width: 60px;
    height: 60px;
  }

  .banner .banner-fluid .ourt-colm-bn ul .ic01 {
    width: 60px !important;
    height: 60px !important;
    background-size: cover !important;
  }

  .ic02,
  .ic03,
  .ic04 {
    width: 60px !important;
    height: 60px !important;
    background-size: cover !important;
  }

  .element {
    top: -50px !important;
  }

  .learning_section h2 {
    font-size: 24px;
  }

  .footer_section .colm1 .ft_ad {
    text-align: center;
  }

  .footer_section .colm2 .gm_cnt {
    width: 187px;
  }

  .play {
    height: 36px;
    margin: -18px 0 0 -18px;
    width: 36px;
  }

  .play span {
    height: 36px;
    width: 36px;
  }

  .video-container {
    width: 310px !important;
    height: 180px !important;
  }

  .section_3 .vido_outer {
    width: 310px;
    height: 180px;
  }

  .signup_oueter {
    width: 90%;
    margin-left: -45% !important;
    left: 50%;
  }

  .signup_oueter .content_colm {
    width: 90%;
  }

  .correcr_container {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 450px) {
  .container.banner-content {
    max-width: 315px;
  }

  .banner .banner-fluid .hover-view .slideimg {
    width: 1210px !important;
    height: 80px !important;
    width: 1260px !important;
    height: 80px !important;
  }

  .banner .banner-fluid .snp_div {
    width: 110px;
    height: auto;
    top: 13px;
    right: 7px;
  }

  .banner .banner-fluid .hover-view .slideimg2 {
    width: 900px !important;
    height: 80px !important;
  }

  .banner .banner-fluid .hover-view .slideimg3 {
    width: 615px !important;
    height: 80px !important;
  }

  .banner .banner-fluid .snp_div4 {
    width: 125px;
    height: auto;
    top: 14px;
    right: 7px;
    width: 170px;
    height: auto;
    top: 18px;
    right: 7px;
  }

  .banner .banner-fluid .snp_div4 h4 {
    font-size: 10px;
    text-align: center;
  }

  .login_outer_div {
    padding: 3%;
  }

  .links-outer li {
    display: none !important;
  }

  .links-outer li.drop-btn {
    display: block !important;
  }
}

@media only screen and (max-width: 420px) {
  .report_colm {
    width: 80%;
  }

  .pronounciation_audio_outer {
    width: 190px;
  }

  .pronounciation_audio_outer .jp-audio .jp-type-single .jp-progress {
    width: 56% !important;
  }

  .container.banner-content {
    max-width: 315px;
  }

  ul.rtabs li {
    padding: 0px 9% !important;
  }

  ul.rtabs li a {
    font-size: 10px !important;
  }

  #view1 .forget {
    width: 100%;
  }

  #view1 .line {
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    clear: both;
    margin: 122px 0px 0px;
  }

  #view1 .forget li {
    display: block;
    float: none;
    line-height: 14px;
    text-align: center;
    border-right: 0px solid #e5e5e5;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  #view1 .forget li:last-child {
    border-right: 0px;
  }

  #forgot-password {
    height: auto !important;
  }

  #view1,
  #view2,
  #forgot-password {
    width: 250px;
  }
}

@media only screen and (max-width: 400px) {
  .spkr-section .play-content {
    padding-left: 10px;
  }

  .datepicker {
    width: 320px !important;
    margin-left: 10% !important;
    float: none !important;
  }

  .owl-outer .items ul li .colm-div1 p {
    font-size: 12px;
  }

  .insucses_section .next_sec-outer .incrct {
    font-size: 15px;
  }

  .sucses_section .next_sec-outer .tic img {
    width: 30px;
    height: auto;
    margin-top: 8px;
  }

  .sucses_section .next_sec-outer .crct {
    font-size: 14px;
  }

  .crt_section2 p {
    width: 75%;
  }

  .insucses_section .next_sec-outer .tic {
    width: 30px;
    height: auto;
  }

  .insucses_section .next_sec-outer .tic img {
    width: 100%;
  }
}

@media only screen and (max-width: 383px) {
  .match_crt_sec {
    width: 300px !important;
  }

  .drg_crt ul li {
    display: block;
    width: 130px;
    height: 40px;
    font-size: 11px;
    margin: 10px;
    line-height: 40px;
  }

  .drg_crt ul li:before {
    height: 40px;
    width: 9px;
    right: -8px;
    background-size: cover;
  }

  .crt_section2.fillsection #content {
    width: 45%;
  }

  #cardSlots div,
  #cardPile div {
    width: 130px;
    height: 40px;
    line-height: 40px;
  }

  #cardSlots {
    width: 130px;
  }

  #cardPile {
    width: 130px;
  }

  #cardPile div {
    font-size: 11px;
  }

  .ui-draggable::before {
    height: 40px;
  }

  .listening_outer .lsn_type {
    width: 100%;
  }

  .radio-outer .custom-radio {
    margin-right: 14px;
  }

  .pronounciation_audio_outer {
    width: 160px;
  }

  .pronounciation_audio_outer .jp-audio .jp-type-single .jp-progress {
    width: 48% !important;
  }

  .about_section .right_colm1 .first_colm,
  .about_section .right_colm1 .second-colm {
    width: 100%;
  }

  .lms_content_section .right_colm1 .scnd-colm2 .section2 {
    width: 66%;
  }

  .menu_section_outerdiv .menu_section {
    height: 155px;
  }

  .datepicker {
    width: 300px !important;
  }

  .datepicker--day-name {
    width: 13.5% !important;
  }

  .datepicker--cell-day {
    width: 13.5% !important;
    height: 40px !important;
  }
}

@media only screen and (max-width: 368px) {
  .sucses_section .next_sec-outer .nxt-stp {
    float: none;
    position: relative;
    margin: auto;
    display: table;
  }

  .crct.tick_cls {
    margin: auto;
    float: none !important;
    margin-bottom: 73px;
    margin-right: 0px !important;
  }

  .links-outer {
    margin-top: 17px;
  }

  .datepicker {
    width: 280px !important;
  }

  .logo {
    width: 135px;
  }

  .insucses_section .next_sec-outer .tic {
    width: 20px;
    height: auto;
  }

  .insucses_section .next_sec-outer .incrct {
    font-size: 12px;
  }

  .links-outer ul li a {
    padding: 0px 3px;
  }

  .banner .banner-fluid .more {
    font-size: 7px;
    right: 0;
    top: -3px;
  }

  .element {
    top: -65px !important;
  }

  .video-container {
    width: 280px !important;
    height: 160px !important;
  }

  .section_3 .vido_outer {
    width: 280px;
    height: 160px;
  }

  .footer_section .colm2 .gm_cnt {
    width: 175px;
  }
}

@media only screen and (max-width: 330px) {
  .datepicker {
    width: 260px !important;
  }

  .datepicker--day-name {
    width: 13.4% !important;
  }

  .datepicker--cell-day {
    width: 13.4% !important;
    height: 40px !important;
  }
}

@media only screen and (max-width: 402px) {
  .correcr_container {
    padding-top: 75px;
  }

  .correcr_container .svn_stpdiv .lftdiv1 {
    width: 75px;
    text-align: right;
    position: absolute;
    right: 7px;
    top: 25px;
    padding: 0;
    font-size: 12px;
  }

  .lft_tab .opn-tb {
    top: 74px;
  }

  .crt_section2 {
    width: 95%;
    margin: 7px auto 0%;
  }

  .pic_rit.crt1 {
    margin: 0px auto 10px !important;
    width: 40px !important;
  }
}

.party-game-wall {
  background: #e0eff3;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  float: left;
  width: 100%;
}

.party-game-wall .graphics {
  position: absolute;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.party-game-wall .graphics .white-curve {
  position: absolute;
  right: 0;
  width: 68%;
  height: 200%;
  top: -70%;
  background: #fff;
  border-radius: 0 0 0 50%;
}

.party-game-wall .graphics .table {
  position: absolute;
  opacity: .5;
}

.party-game-wall .graphics .table img {
  width: 100%;
}

.party-game-wall .graphics .table.right {
  right: 0;
  width: 5%;
  bottom: 5%;
}

.party-game-wall .graphics .decorations {
  position: absolute;
  top: 80px;
  width: 60%;
  opacity: .3;
}

.party-game-wall .graphics .decorations img {
  width: 100%;
}

.party-game-wall .graphics .ball-graphics {
  position: absolute;
}

.party-game-wall .graphics .ball-graphics img {
  width: 100%;
  height: auto;
}

.party-game-wall .graphics .ball-graphics.right {
  right: 5%;
  width: 14%;
  top: 36%;
}

.party-game-wall .graphics .ball-graphics.left-1 {
  width: 7%;
  left: 0%;
}

.party-game-wall .graphics .ball-graphics.left-2 {
  width: 10%;
  left: 21%;
}

.party-game-wall .game-wrapper {
  position: relative;
}

@media screen and (max-width: 1023px) {
  .party-game-wall .game-wrapper {
    max-width: 100%;
  }
}

.party-game-wall .game-wrapper .ppl {
  position: absolute;
  height: 500px;
  width: 40%;
  max-height: 100%;
}

.party-game-wall .game-wrapper .ppl .character {
  position: absolute;
  bottom: 0;
}

.party-game-wall .game-wrapper .ppl .character img {
  display: none;
  width: 100%;
  height: auto;
}

.party-game-wall .game-wrapper .ppl .character img.active {
  display: block;
}

.party-game-wall .game-wrapper .ppl .character.sarah {
  width: 200px;
  left: 50%;
  transform: translateX(0);
  transition: all 1s ease;
}

.party-game-wall .game-wrapper .ppl .character.subbu {
  width: 140px;
  left: 0;
  bottom: 5%;
  transform: translateX(0);
  transition: all 1.5s ease;
}

.party-game-wall .game-wrapper .ppl.reached .character.sarah {
  transform: translateX(-1000px);
}

.party-game-wall .game-wrapper .ppl.reached .character.subbu {
  transform: translateX(-10000px);
}

@media screen and (max-width: 1023px) {
  .party-game-wall .game-wrapper .ppl {
    position: relative;
    height: 150px;
    width: 100%;
    max-height: 100%;
    float: left;
  }

  .party-game-wall .game-wrapper .ppl .character img {
    width: auto;
    height: 140px;
  }

  .party-game-wall .game-wrapper .ppl .character.subbu {
    width: auto;
  }

  .party-game-wall .game-wrapper .ppl .character.sarah {
    width: auto;
    left: 24%;
  }
}

@media screen and (max-height: 480px) and (max-width: 767px) {
  .party-game-wall .game-wrapper .ppl {
    width: 50% !important;
  }
}

.party-game-wall .game-wrapper.completed .ppl {
  width: auto;
  left: 50%;
  margin-left: -25%;
  width: 40%;
}

@media screen and (max-width: 440px) {
  .party-game-wall .game-wrapper.completed .ppl {
    left: 20px;
    margin: 0;
  }
}

.party-game-wall .game-wrapper.completed .ppl .character {
  height: 88%;
}

@media screen and (max-width: 1023px) {
  .party-game-wall .game-wrapper.completed .ppl .character {
    height: 60%;
    bottom: 20%;
  }
}

.party-game-wall .game-wrapper.completed .ppl .character img {
  height: 100%;
  width: auto;
}

.party-game-wall .game-wrapper.completed .ppl .talk-bubble {
  right: auto;
  bottom: auto;
  top: 0;
  left: 110%;
  padding: 20px;
}

.party-game-wall .game-wrapper.completed .ppl .talk-bubble p {
  margin: 0;
}

.party-game-wall .game-wrapper.completed .ppl .talk-bubble:after {
  left: -36px;
  top: 62%;
  border-width: 0 50px 20px 0;
  border-color: #2d629e #2d629e transparent transparent;
  transform: rotate(-35deg);
}

@media screen and (max-width: 767px) {
  .party-game-wall .game-wrapper.completed .ppl .talk-bubble:after {
    left: -18px;
    top: 48px;
    border-width: 0 30px 20px 0;
  }

  .party-game-wall .game-wrapper.completed .ppl .talk-bubble h1 {
    font-size: 18px;
  }

  .party-game-wall .game-wrapper.completed .ppl .talk-bubble p {
    font-size: 12px;
  }
}

.party-game-wall .game-wrapper .question-wrapper {
  float: right;
  width: 60%;
  padding: 25px 0;
  position: relative;
  height: 100%;
  display: none;
}

@media screen and (max-width: 1023px) {
  .party-game-wall .game-wrapper .question-wrapper {
    width: 100%;
  }
}

@media screen and (max-height: 480px) and (max-width: 767px) {
  .party-game-wall .game-wrapper .question-wrapper {
    width: 50% !important;
  }
}

.party-game-wall .game-wrapper .question-wrapper .question {
  background: #fce8f1;
  padding: 15px 15px 0;
  margin: 0 0 0 15px;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 400;
  color: #4a4a4a;
}

.party-game-wall .game-wrapper .question-wrapper .question p {
  margin: 0 0 15px 0;
}

@media screen and (max-width: 1024px) {
  .party-game-wall .game-wrapper .question-wrapper .question {
    margin: 0 10px;
  }
}

@media screen and (max-width: 767px) {
  .party-game-wall .game-wrapper .question-wrapper .question {
    font-size: 13px;
  }
}

.party-game-wall .game-wrapper .question-wrapper .question .instruction {
  font-size: 16px;
  font-weight: 400;
  color: #a0a0a0;
  padding: 5px 0 0 0;
}

.party-game-wall .game-wrapper .question-wrapper .options .option {
  float: left;
  width: 50%;
  cursor: pointer;
  text-align: center;
  color: #555555;
  font-size: 16px;
  transform: translateY(50px);
  opacity: 0;
  transition: all .5s ease;
}

.party-game-wall .game-wrapper .question-wrapper .options .option.ready {
  transform: translateY(0);
  opacity: 1;
}

.party-game-wall .game-wrapper .question-wrapper .options .option.wrong {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.party-game-wall .game-wrapper .question-wrapper .options .option.wrong .description {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.party-game-wall .game-wrapper .question-wrapper .options .option.wrong .description .click a {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.party-game-wall .game-wrapper .question-wrapper .options .option.correctAnswer .set-padding {
  border-color: #1fc000;
}

.party-game-wall .game-wrapper .question-wrapper .options .option .set-padding {
  margin: 15px 0 0 15px;
  background: #f7f7f7;
  padding: 15px 30px 30px;
  box-sizing: border-box;
  border-radius: 3px;
  transition: all .3s ease;
  position: relative;
  border: 2px solid #f7f7f7;
  z-index: 1;
}

@media screen and (min-width: 1025px) {
  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding {
    height: 122px;
  }
}

.party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .img {
  float: left;
}

.party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .img img {
  width: 70px;
}

.party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description {
  overflow: hidden;
  padding: 0 0 0 15px;
  text-align: left;
  height: 65px;
}

.party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description .click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description .click a {
  display: none;
}

.party-game-wall .game-wrapper .question-wrapper .options .option .set-padding:hover {
  transform: scale(1.05);
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 10px 0 #ccc;
}

@media screen and (min-width: 1025px) {
  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding:hover .description {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    padding: 8px 15px;
    height: 100%;
  }
}

.party-game-wall .game-wrapper .question-wrapper .options .option.selected .set-padding {
  background: #fff;
  border-color: #dddddd;
  box-shadow: 0 0 10px 0 #ccc;
}

@media screen and (max-width: 1024px) {
  .party-game-wall .game-wrapper .question-wrapper .options {
    position: relative;
    float: left;
    width: 100%;
    z-index: 10;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option {
    transform: none !important;
    position: static;
    width: 25%;
    animation: none !important;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding {
    position: static;
    float: none;
    margin: 10px;
    padding: 0;
    transform: none !important;
    box-shadow: none !important;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .img {
    float: none;
    padding: 15px;
    position: relative;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .img img {
    width: 50px;
    max-width: 100%;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description {
    position: absolute;
    display: none;
    height: auto;
    border-radius: 0 0 3px 3px;
    background: #fff;
    border: 2px solid #ddd;
    width: auto;
    left: 10px;
    right: 10px;
    padding: 15px;
    top: 100%;
    margin-top: -20px;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description .click {
    position: static;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description .click a {
    display: block;
    float: right;
    background: #5cb85c;
    padding: 8px 10px;
    color: #fff;
    border-radius: 3px;
    margin: 10px 0 0 0;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding:hover {
    transform: none !important;
    border: 2px solid #ddd;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding:hover .img:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    height: 10px;
    width: 100%;
    background: #fff;
    z-index: 100;
  }
}

@media screen and (max-width: 1023px) {
  .party-game-wall .game-wrapper .question-wrapper .options {
    position: relative;
    float: left;
    width: 100%;
    z-index: 10;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option {
    transform: none !important;
    position: static;
    width: 25%;
    animation: none !important;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding {
    position: static;
    float: none;
    margin: 10px;
    padding: 0;
    transform: none !important;
    box-shadow: none !important;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .img {
    float: none;
    padding: 5px;
    position: relative;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .img img {
    width: 50px;
    max-width: 100%;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description {
    position: absolute;
    display: none;
    height: auto;
    border-radius: 0 0 3px 3px;
    background: #fff;
    border: 2px solid #ddd;
    width: auto;
    padding: 15px;
    bottom: 100%;
    margin-bottom: -20px;
    top: auto;
    max-height: 140px;
    overflow: auto;
    left: 0;
    right: 0;
    font-size: 12px;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description .click {
    position: static;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding .description .click a {
    display: block;
    float: right;
    background: #5cb85c;
    padding: 8px 10px;
    color: #fff;
    border-radius: 3px;
    margin: 10px 0 0 0;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding:hover {
    transform: none !important;
    border: 2px solid #ddd;
  }

  .party-game-wall .game-wrapper .question-wrapper .options .option .set-padding:hover .img:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 10px;
    width: 100%;
    background: #fff;
    z-index: 100;
  }
}

.party-game-wall.orchad-game {
  background: #FBD413;
}

.party-game-wall.orchad-game .question {
  background: none !important;
  padding: 15px 0 !important;
  font-family: "Boogaloo", cursive;
  font-size: 25px;
}

@media screen and (max-width: 767px) {
  .party-game-wall.orchad-game .question {
    padding: 0 0 5px 0 !important;
    font-size: 16px !important;
  }
}

.party-game-wall.orchad-game .question-wrapper {
  float: left;
  font-family: "Boogaloo", cursive;
}

@media screen and (min-width: 1025px) {
  .party-game-wall.orchad-game .question-wrapper {
    position: relative;
    z-index: 20;
  }
}

@media screen and (min-width: 1025px) {
  .party-game-wall.orchad-game .question-wrapper .options {
    max-width: 330px;
  }
}

@media screen and (min-width: 1025px) {
  .party-game-wall.orchad-game .question-wrapper .options .option {
    position: relative;
    transform: translateY(100px);
    width: 150px;
    height: 150px;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(1) {
    transition: all .5s ease;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(1) .img img {
    width: 130px;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(2) {
    transition: all 1s ease;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(2) .img img {
    width: 100px;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(3) {
    transition: all 1.5s ease;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(3) .img img {
    width: 140px;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(4) {
    transition: all 2s ease;
    margin-top: -30px;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:nth-child(4) .img img {
    width: 130px;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option .set-padding {
    background: none !important;
    border: 0;
    float: left;
    padding: 0;
    box-shadow: none !important;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option .set-padding .description {
    width: 300px !important;
    height: 300px;
    background: #fff;
    transition: all .7s ease;
    overflow: hidden;
    border-radius: 10%;
    position: absolute;
    display: flex;
    align-items: center;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
    padding: 0 30px;
    text-align: center;
    transform: scale(0);
    box-shadow: 0 0 10px -10px #000;
    border-left: 3px solid #dbb81d;
    border-bottom: 3px solid #dbb81d;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option .set-padding .description .content {
    width: 90%;
    margin: auto;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option .set-padding .description .click {
    position: static;
    display: table;
    margin: 10px auto 0;
    background: #FBD413;
    width: auto;
    height: auto;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option .set-padding .description .click a {
    display: block;
    padding: 5px 15px;
    color: #997e31;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option.selected .set-padding:after {
    color: #FBD413;
    left: 20%;
    top: 50%;
    margin: -8% 0 0 0;
    position: absolute;
    content: "\f105";
    display: block !important;
    font: normal normal normal 25px/1 FontAwesome;
    z-index: 0;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option.correctAnswer.selected .set-padding:after,
  .party-game-wall.orchad-game .question-wrapper .options .option.correctAnswer .set-padding:after {
    color: #1fc000;
    left: 20%;
    top: 50%;
    margin: -8% 0 0 0;
    position: absolute;
    content: "\f00c";
    display: block !important;
    font: normal normal normal 18px/1 FontAwesome;
    z-index: 0;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:hover {
    z-index: 5;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:hover .set-padding::after {
    display: none;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:hover .set-padding .description {
    border-radius: 100%;
    z-index: 100;
    transform: scale(1);
    width: 300px;
    height: 300px;
  }

  .party-game-wall.orchad-game .question-wrapper .options .option:hover .set-padding .description .content {
    opacity: 1;
  }
}

.party-game-wall.orchad-game .orachadGraphics {
  right: 0;
  height: auto;
}

@media screen and (max-width: 767px) {
  .party-game-wall.orchad-game .orachadGraphics {
    width: 85%;
  }
}

.party-game-wall.orchad-game .orachadGraphics.status {
  width: 100%;
  text-align: center;
  position: absolute;
  height: 100%;
}

.party-game-wall.orchad-game .orachadGraphics .gameStatus {
  position: absolute;
  display: none;
  height: 100%;
  top: 0;
  left: 18%;
}

@media screen and (max-width: 1023px) {
  .party-game-wall.orchad-game .orachadGraphics .gameStatus {
    width: 100%;
    left: 0;
  }
}

.party-game-wall.orchad-game .orachadGraphics .gameStatus img {
  width: auto;
  height: 90%;
}

@media screen and (max-width: 1023px) {
  .party-game-wall.orchad-game .orachadGraphics .gameStatus img {
    width: auto;
    height: 60%;
  }
}

.party-game-wall.orchad-game .orachadGraphics .gameStatus .statusMessage {
  width: 450px;
  position: absolute;
  left: 100%;
  top: 40%;
  font-weight: 600;
  font-size: 50px;
  line-height: 50px;
  color: #fff;
}

.party-game-wall.orchad-game .orachadGraphics .gameStatus .statusMessage p {
  margin: 10px 0;
}

@media screen and (max-width: 1023px) {
  .party-game-wall.orchad-game .orachadGraphics .gameStatus .statusMessage p {
    margin: 0;
  }
}

.party-game-wall.orchad-game .orachadGraphics .gameStatus .statusMessage .btn {
  font-size: 16px;
  color: #9a7f26;
  border: 1px solid #9a7f26;
  border-radius: 5px;
  font-weight: 400;
  text-align: center;
  line-height: 21px;
  display: inline-block;
  width: 147px;
  cursor: pointer;
  margin-top: -30px;
}

@media screen and (max-width: 1023px) {
  .party-game-wall.orchad-game .orachadGraphics .gameStatus .statusMessage .btn {
    font-size: 14px;
    padding: 5px 10px;
  }
}

@media screen and (max-width: 1023px) {
  .party-game-wall.orchad-game .orachadGraphics .gameStatus .statusMessage {
    width: 100%;
    position: static;
    margin: 0;
    font-size: 20px;
    line-height: 32px;
  }

  .party-game-wall.orchad-game .orachadGraphics .gameStatus .statusMessage .btn {
    width: auto;
    height: auto;
  }
}

.party-game-wall.orchad-game .orachadGraphics .treeWrap {
  position: relative;
  float: left;
  width: 100%;
}

.party-game-wall.orchad-game .orachadGraphics .tree {
  float: left;
  width: 100%;
}

.party-game-wall.orchad-game .orachadGraphics .tree img.tree {
  width: 100%;
  position: relative;
  z-index: 2;
}

.party-game-wall.orchad-game .orachadGraphics .tree img.tree-top {
  position: absolute;
  width: 65%;
  left: 19%;
  z-index: 1;
}

.party-game-wall.orchad-game .orachadGraphics .mango {
  position: absolute;
  z-index: 25;
}

.party-game-wall.orchad-game .orachadGraphics .mango img {
  width: 100%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q1 {
  width: 5%;
  top: 36%;
  left: 30%;
  transition: all .7s ease;
  margin-left: 5px;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q1.fall {
  transform: rotate(160deg);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q2 {
  width: 6%;
  top: 37%;
  left: 55%;
  transition: all .8s ease;
  margin: 0 0 0 5%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q2.fall {
  transform: rotate(440deg);
  margin-left: 7%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q3 {
  width: 5%;
  top: 31%;
  left: 62%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q3.fall {
  transform: rotate(240deg);
  margin: 0% 0 0 12%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q4 {
  width: 7%;
  top: 20%;
  left: 51%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q4.fall {
  transform: rotate(148deg);
  margin: 0% 0 0 4%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q5 {
  width: 6%;
  top: 20%;
  left: 20%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q5.fall {
  transform: rotate(80deg);
  margin: 0% 0 0 8%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q6 {
  width: 4%;
  top: 0%;
  left: 36%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q6.fall {
  transform: rotate(240deg);
  margin: 0% 0 0 6%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q7 {
  width: 6%;
  top: 20%;
  left: 40%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q7.fall {
  transform: rotate(112deg);
  margin: 1% 0 0 8%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q8 {
  width: 4.5%;
  top: 10%;
  left: 53%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q8.fall {
  transform: rotate(319deg);
  margin: 8% 0 0 0;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q9 {
  width: 5%;
  top: 10%;
  left: 30%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q9.fall {
  transform: rotate(126deg);
  margin: 1% 0 0 6%;
}

.party-game-wall.orchad-game .orachadGraphics .mango.q10 {
  width: 7%;
  top: 33%;
  left: 30%;
  transition: all 1s ease;
  margin: 3px 0 0 11%;
  transform: rotate(0);
}

.party-game-wall.orchad-game .orachadGraphics .mango.q10.fall {
  transform: rotate(319deg);
  margin: 8% 0 0 10%;
}

.party-game-wall.orchad-game .orachadGraphics .basket {
  position: absolute;
  bottom: 0;
  width: 20%;
  right: 26%;
  z-index: 10;
}

.party-game-wall.orchad-game .orachadGraphics .basket img {
  width: 100%;
  display: none;
}

.party-game-wall.orchad-game .orachadGraphics .basket img.empty {
  display: block;
}

.party-game-wall.orchad-game .orachadGraphics .subbu {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20%;
  z-index: 12;
}

.party-game-wall.orchad-game .orachadGraphics .subbu .img {
  width: 100%;
  display: none;
}

.party-game-wall.orchad-game .orachadGraphics .subbu .img.normal {
  display: block;
}

.answerImageCoy {
  width: 70px;
  position: absolute;
  z-index: 10000;
}

.answerImageCoy img {
  width: 100%;
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.talk-bubble {
  padding: 10px;
  bottom: 100%;
  display: inline-block;
  position: absolute;
  width: 200px;
  height: auto;
  background-color: #2d629e;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  right: 80%;
  font-size: 18px;
  transition: all .5s ease;
  transform: scale(0);
}

.talk-bubble.active {
  transform: scale(1);
}

.talk-bubble:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 38px;
  bottom: -6px;
  border: 12px solid;
  border-color: #2d629e #2d629e transparent transparent;
}

@media screen and (max-width: 767px) {
  .talk-bubble {
    width: 154px;
    left: 100%;
    top: 0;
    bottom: auto;
  }

  .talk-bubble h1 {
    margin: 10px 0;
    font-size: 25px;
  }

  .talk-bubble:after {
    right: 94%;
    bottom: 40%;
  }
}

.game-intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}

.game-intro .popup {
  text-align: left;
  width: auto;
  max-width: 90%;
  display: table;
  margin: auto;
  background: #fff;
  padding: 30px 30px 30px 90px;
  border-radius: 5px;
  box-shadow: 0 0 30px -9px #000000;
  position: relative;
}

@media screen and (min-width: 550px) {
  .game-intro .popup {
    width: 500px;
    padding: 30px 30px 30px 112px;
  }
}

.game-intro .popup h1 {
  font-size: 24px;
  color: #454545;
  font-weight: normal;
}

.game-intro .popup h3 {
  color: #a0a0a0;
  font-weight: normal;
}

.game-intro .popup .character {
  float: left;
  position: absolute;
  left: 28px;
}

.game-intro .popup .character img {
  height: 150px;
}

.game-intro .popup .start_link {
  float: left;
}

.start_link {
  display: table;
  width: auto;
  height: auto;
  margin: auto;
  background: #5cb85c;
  padding: 15px 25px;
  text-transform: uppercase;
  text-shadow: 0px 2px 2px #8f8f8f;
  font-weight: 700;
  font-size: 15px;
  border-radius: 5px;
  color: #fff;
  position: relative;
}

.shake2 {
  animation: shake2 .7s;
}

@keyframes shake2 {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.badges-page {
  margin-top: 10%;
}

.badges-page p {
  font-size: 15px;
  text-align: center;
  line-height: 26px;
  padding: 30px 0;
}

.results-page {
  margin-top: 10%;
}

.results-page p {
  font-size: 15px;
  text-align: center;
  line-height: 26px;
  padding: 0;
}

.badgeWrapper {
  display: table;
  margin: 0 auto;
  width: 160px;
  transform: scale(0.3);
  transition: all .5s ease;
  min-height: 200px;
}

.badgeWrapper.heightAuto {
  min-height: auto;
}

.badgeWrapper .template {
  position: relative;
  text-align: center;
}

.badgeWrapper .template .name {
  position: absolute;
  top: -30px;
  font-weight: bold;
  font-size: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

.badgeWrapper .template .fa {
  font-size: 100px;
  color: #c8cee2;
}

.badgeWrapper .template .badge {
  width: 100%;
}

.badgeWrapper .template .character {
  position: absolute;
  z-index: 10;
  left: 50%;
  width: 100%;
  margin-left: -50%;
  transform: scale(0.6);
  top: -50%;
  transition: all .9s ease;
}

.badgeWrapper .template .leaf {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -22%;
  transition: all 1.5s ease;
}

.badgeWrapper.ready {
  transform: scale(1);
}

.badgeWrapper.ready .character {
  top: -18%;
}

.badgeWrapper.ready .leaf {
  bottom: -8%;
}

.badgeWrapper.ready:hover .character {
  transform: scale(1);
}

.badgeWrapper.static:hover .character {
  transform: scale(0.6);
}

.score {
  text-align: center;
}

@keyframes float {

  0%,
  100% {
    transform: none;
  }

  33% {
    transform: translateY(-1px) rotate(-2deg);
  }

  66% {
    transform: translateY(1px) rotate(2deg);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translate(0);
  }

  25% {
    transform: rotateX(20deg) translateY(2px) rotate(-3deg);
  }

  50% {
    transform: translateY(-20px) rotate(3deg) scale(1.1);
  }
}

.effects {
  font-size: 40px;
  text-align: center;
}

.effects span {
  display: inline-block;
  animation: float .2s ease-in-out infinite;
  color: #fed913;
}

.effects span:nth-child(2) {
  animation-delay: .05s;
}

.effects span:nth-child(3) {
  animation-delay: .1s;
}

.effects span:nth-child(4) {
  animation-delay: .15s;
}

.effects span:nth-child(5) {
  animation-delay: .2s;
}

.effects span:nth-child(6) {
  animation-delay: .25s;
}

.effects span:nth-child(7) {
  animation-delay: .3s;
}

.effects span:nth-child(8) {
  animation-delay: .35s;
}

.effects span:nth-child(9) {
  animation-delay: .4s;
}

.effects span:nth-child(10) {
  animation-delay: .45s;
}

.effects span:nth-child(11) {
  animation-delay: .5s;
}

.effects span:nth-child(12) {
  animation-delay: .55s;
}

.effects span:nth-child(13) {
  animation-delay: .6s;
}

.effects span:nth-child(14) {
  animation-delay: .65s;
}

.effects:hover span {
  animation: bounce .6s;
}

.badgesWrap {
  width: 100%;
  text-align: center;
}

.badgesWrap .badgesCol {
  display: inline-flex;
  width: 120px;
}

.badgesWrap .badgesCol .badgeItem {
  position: relative;
  cursor: pointer;
}

.badgesWrap .badgesCol .badgeItem .badgeName {
  position: absolute;
  display: none;
}

.badgesWrap .badgesCol .badgeItem .badgeShield {
  position: absolute;
  max-width: 100px;
}

.badgesWrap .badgesCol .badgeItem .badgeChar {
  position: absolute;
  z-index: 1;
  max-width: 100px;
  transform: translateY(-17px) scale(0.6);
  transition: all .5s ease;
}

.badgesWrap .badgesCol .badgeItem:hover .badgeChar {
  transform: translateY(0) scale(1);
}

.packages {
  background: #f7f7f7;
  float: left;
  width: 100%;
}

.packages h1 {
  font-weight: normal;
}

.card-heading {
  background: #e4f6f6;
  padding: 30px;
  float: left;
  width: 100%;
}

.card-heading .left {
  float: left;
  width: 60%;
}

@media screen and (max-width: 768px) {
  .card-heading .left {
    width: 100%;
  }
}

.card-heading .right {
  float: right;
  padding-top: 30px;
}

.card-heading.plane {
  background: none;
}

.card-heading.plane .right {
  padding: 0;
}

.card-body {
  float: left;
  width: 100%;
  background: #fff;
  padding: 30px;
}

.card-body .spec-table {
  float: left;
  width: 100%;
  background: #f7f7f7;
  border: 1px solid #e6e3da;
}

@media screen and (max-width: 768px) {
  .card-body .spec-table {
    border: 0;
    background: no-repeat;
  }
}

.card-body .spec-table .spec-column {
  float: left;
  width: 25%;
  border-left: 1px solid #e6e3da;
  padding: 20px;
  transition: all .1s ease;
  position: relative;
  min-height: 430px;
}

@media screen and (max-width: 768px) {
  .card-body .spec-table .spec-column {
    width: 100%;
    min-height: auto;
    padding: 3px 15px 9px;
    margin: 0 0 10px 0;
    border: 1px solid #e6e3da !important;
    background: #f7f7f7;
  }
}

.card-body .spec-table .spec-column:hover {
  transform: scale(1.02);
  background: #fff;
  border: 1px solid #e6e3da !important;
  box-shadow: 0 0 17px -8px #000;
  z-index: 5;
}

.card-body .spec-table .spec-column:first-child {
  transform: scale(1) !important;
  box-shadow: none !important;
  transition: none;
}

@media screen and (min-width: 769px) {
  .card-body .spec-table .spec-column:first-child {
    border: 0 !important;
  }
}

.card-body .spec-table .spec-column.active {
  position: relative;
  background: #fff;
}

.card-body .spec-table .spec-column .ttl {
  text-align: center;
  float: left;
  width: 100%;
}

.card-body .spec-table .spec-column .ttl h1 {
  font-size: 23px;
}

@media screen and (max-width: 768px) {
  .card-body .spec-table .spec-column .ttl .name {
    float: left;
    text-align: left;
  }

  .card-body .spec-table .spec-column .ttl .name h1 {
    font-size: 22px;
  }
}

.card-body .spec-table .spec-column .ttl .price {
  display: none;
}

@media screen and (max-width: 768px) {
  .card-body .spec-table .spec-column .ttl .price {
    display: block;
    margin: 0;
    float: right;
  }

  .card-body .spec-table .spec-column .ttl .price .new {
    font-size: 28px;
    padding-top: 6px;
  }
}

.card-body .spec-table .spec-column .spec-column-details {
  border-top: 1px solid #e6e3da;
  display: none;
  margin-top: 9px;
  float: left;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .card-body .spec-table .spec-column .spec-column-details {
    display: block !important;
    margin-top: 15px;
  }
}

.card-body .spec-table .spec-column .price {
  text-align: center;
  font-size: 20px;
  margin: 15px 0;
}

@media screen and (max-width: 768px) {
  .card-body .spec-table .spec-column .price {
    display: none;
  }
}

.card-body .spec-table .spec-column .price .old {
  text-decoration: line-through;
  color: #cccccc;
}

.card-body .spec-table .spec-column .price .new {
  font-size: 35px;
  font-weight: bold;
}

.card-body .spec-table .spec-column .description {
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .card-body .spec-table .spec-column .description {
    padding-top: 10px;
  }
}

.card-body .spec-table .spec-column .description b {
  padding: 0 0 15px 0;
  display: block;
}

@media screen and (max-width: 768px) {
  .card-body .spec-table .spec-column .description b {
    padding: 0;
  }
}

.card-body .spec-table .spec-column .description .icon-list {
  color: #555555;
}

@media screen and (min-width: 769px) {
  .card-body .spec-table .spec-column .action {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 10px 15px 10px;
  }
}

.card-body .spec-table .spec-column .action a {
  border: 1px solid #fed913;
  padding: 10px 15px;
  border-radius: 40px;
  text-align: center;
  color: #4a4a4a;
  background: #fed913;
  font-weight: bold;
  position: relative;
  display: table;
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .card-body .spec-table .spec-column .action a {
    min-width: 80%;
  }
}

.card-body .spec-table .spec-column .action a i {
  font-size: 19px;
  color: #1fc000;
  margin-right: 10px;
}

.card-body .spec-table .spec-column .action a:hover {
  opacity: .9;
}

.card-body .spec-table .spec-column .action a.disabled {
  background: #fff;
  cursor: default;
  border: 1px solid #e6e3da;
}

.icon-list {
  position: relative;
  padding-left: 20px;
  margin: 5px 0;
}

.icon-list .icon {
  position: absolute;
  left: 0;
  top: 2px;
}

.green {
  color: #22b14c;
}

.yellow {
  color: #ffff00;
}

.classroom {
  float: left;
  width: 100%;
  padding: 20px 0;
}

.classroom h1 {
  font-size: 20px;
  color: #383838;
  font-weight: 700;
  margin: 0;
}

.classroom .subscription {
  padding: 20px 0;
  display: inline-block;
}

.classroom .subscribeForm input {
  width: 250px;
  height: 42px;
  border: 1px solid #e1e1e1;
  padding: 0px 15px;
  color: #c7c7c7;
  margin: 0px 15px 0 0;
}

.classes-listing {
  float: left;
  width: 100%;
  padding-bottom: 15px;
}

.classes-listing .classes {
  float: left;
  width: 200px;
  background: #2aa9e6;
  padding: 15px;
  color: #ffffff;
  margin: 0 10px 15px 0;
}

.classes-listing .classes .common-bnt {
  background: none;
  border: 1px solid #fff;
  padding: 5px 10px;
  color: #fff;
  border-radius: 4px;
  text-transform: none;
}

.classDetails {
  border: 1px solid #eee;
  padding: 30px;
  float: left;
  width: 100%;
  margin-bottom: 30px;
  display: none;
}

.classDetails .card-heading {
  padding: 0 0 15px 0;
  float: left;
  width: 100%;
}

.classDetails .card-heading a {
  margin-left: 15px;
}

.classDetails .tooltip {
  text-align: left;
}

.classDetails .tooltip .subscription {
  padding: 0;
}

.classDetails .tooltip textarea {
  width: 100%;
  border: 1px solid #e1e1e1;
  padding: 0px 15px;
  color: #c7c7c7;
  height: 80px;
  margin: 15px 0 0 0;
}

.classDetails .tooltip .common-bnt {
  float: right;
  background: #2aa9e6;
  color: #fff;
}

.classDetails .card-body {
  padding: 0;
}

.classDetails .students {
  margin: 0 -10px;
}

.classDetails .students .card {
  float: left;
  width: 33.3333%;
  padding: 10px 5px;
}

@media screen and (max-width: 768px) {
  .classDetails .students .card {
    width: 100%;
  }
}

.classDetails .students .card .set-padding {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  position: relative;
  padding: 10px 150px 10px 50px;
  float: left;
  width: 100%;
  height: 60px;
}

.classDetails .students .card .set-padding .name {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  float: left;
  text-overflow: ellipsis;
  padding: 8px 12px 0 10px;
}

.classDetails .students .card .set-padding .badges {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 150px;
}

.classDetails .students .card .set-padding .badges .badge {
  width: 18%;
  margin: 0 1%;
  background: #eee;
  float: left;
  padding: 10px 0;
  text-align: center;
}

.classDetails .students .card .set-padding .profile-image {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  top: 10px;
  background: #eeeeee;
}

.classDetails .students .card .set-padding .profile-image img {
  width: 100%;
}

.clearfix {
  clear: both;
}

.notification-wrapper {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  right: 0;
  width: 100%;
  top: 82px;
  bottom: 0;
  z-index: 2000;
  overflow: hidden;
}

@media screen and (max-width: 650px) {
  .notification-wrapper {
    top: 66px;
  }
}

@media screen and (max-width: 368px) {
  .notification-wrapper {
    top: 60px;
  }
}

.notification-wrapper .clickControl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}

.notification-wrapper .notifications {
  width: 400px;
  right: -100%;
  position: absolute;
  top: 0;
  height: 100%;
  background: #f7f7f7;
  overflow: hidden;
  transition: all .5s ease;
  z-index: 2;
  max-width: 85%;
}

.notification-wrapper .notifications.active {
  right: 0;
}

.notification-wrapper .notifications .notficationHeader {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 0 6px -1px #ccc;
}

.notification-wrapper .notifications .notification-body {
  position: absolute;
  top: 40px;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 15px;
}

.notification-wrapper .notifications .notification-body .items {
  background: #fff;
  box-shadow: 0 0 6px -1px #ccc;
  padding: 15px;
  margin: 0 5px 10px;
  border-radius: 4px;
}

.faedbackForm {
  width: 500px;
  display: table;
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 30px;
  background: #fff;
  position: relative;
  z-index: 1000000;
}

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

.faedbackForm .ttl img {
  width: 60px;
}

.faedbackForm h1 {
  font-size: 25px;
  font-weight: normal;
  text-align: center;
}

.faedbackForm textarea {
  width: 100%;
  border: 1px solid #e6e3da;
  height: 50px;
  border-radius: 5px;
}

.faedbackForm .contentBox {
  float: left;
  width: 30%;
  background: #eee;
  padding: 10px;
  margin: 10px 0 0 0;
  border-radius: 5px;
}

.faedbackForm .contentBox p {
  margin: 0 0 10px 0;
}

.faedbackForm .contentBox a {
  border: 1px solid #ddd;
  background: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  color: #4a4a4a;
  float: left;
  margin-left: 0;
  font-size: 16px;
  width: 45%;
  text-align: center;
}

.faedbackForm .contentBox a:last-child {
  float: right;
}

.faedbackForm .contentBox a:hover {
  background: #1fc000;
  border-color: #1fc000;
  color: #fff;
}

.faedbackForm .rateBox {
  float: right;
  width: 65%;
  margin: 10px 0 0 0;
  background: #eee;
  padding: 27px 10px 10px;
  border-radius: 4px;
  text-align: center;
  height: 77px;
}

.faedbackForm .rateBox a {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 100%;
  text-align: center;
  line-height: 27px;
  color: #4a4a4a;
  margin: 0 2px;
  display: inline-block;
  background: #fff;
  box-shadow: 0 0 5px 0 #ccc;
}

.faedbackForm .rateBox a:hover {
  background: #1fc000;
  border-color: #1fc000;
  color: #fff;
}

.faedbackForm .rateFooter {
  float: left;
  width: 100%;
  border-top: 1px solid #e6e3da;
  padding: 10px 0 0 0;
  margin-top: 20px;
}

.faedbackForm .rateFooter a {
  margin-top: 10px;
  float: left;
  color: #4a4a4a;
}

.faedbackForm .rateFooter a:hover {
  opacity: .7;
}

.faedbackForm .rateFooter .common-bnt {
  padding: 10px 15px;
  float: right;
}

.certificate {
  text-align: center;
  padding: 0;
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
}

@media screen and (min-width: 769px) {
  .certificate {
    padding: 70px;
  }
}

.certificate h1 {
  margin: 0 0 50px 0;
  font-size: 24px;
  color: #19191a;
}

.certificate h2 {
  margin: 10px 0;
  font-weight: normal;
}

.certificate .text-filed {
  width: 350px;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  max-width: 90%;
  padding-bottom: 7px;
}

.certificate .certificateImg {
  width: 100px;
  max-width: 90%;
  display: table;
  margin: 20px auto 0;
}

@media screen and (max-width: 767px) {
  .certificate .certificateImg {
    width: 70px;
    margin-bottom: 50px;
  }
}

.certificate .certificateImg img {
  width: 100%;
}

.certificate .signature {
  position: absolute;
  bottom: 30px;
  width: 150px;
}

@media screen and (max-width: 400px) {
  .certificate .signature {
    width: 100px;
    left: 0;
  }
}

.certificate .signature img {
  max-width: 90%;
  margin-bottom: 15px;
}

@media screen and (min-width: 769px) {
  .certificate .signature {
    bottom: 70px;
  }
}

.certificate .signature.date {
  right: 30px;
}

@media screen and (min-width: 769px) {
  .certificate .signature.date {
    right: 70px;
  }
}

@media screen and (max-width: 400px) {
  .certificate .signature.date {
    right: 0;
    left: auto;
  }
}

.certificate .signature .des {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 5px;
}

.certificate .note {
  position: absolute;
  bottom: 15px;
  font-size: 11px;
  color: #ccc;
  text-align: left;
}

.certificate .note a {
  display: block;
  color: #aaa;
}

.certificate .note a:hover {
  color: #888;
}

.certificate-action {
  float: right;
}

.certificate-action a {
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid #ddd;
  border-radius: 3px;
  float: left;
  margin: 10px 0 0 10px;
  text-align: center;
  color: #222;
  font-size: 20px;
  line-height: 20px;
  padding-top: 9px;
}

.certificate-action a:hover {
  background: #2fa8e3;
  color: #fff;
}

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

:global {
  .course-card {
    max-width: 450px;
  }
}

.rectangle {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  /* Border color */
  padding: 10px;
  /* Optional padding */
  background: #007BFF;
  color: white;
}

.successResponseAudio {
  background-color: #00ff2b;
  color: white;
  height: 4em;
  font-size: 20px;
  border-radius: 5px;
  padding: 0px 0px 0px 10px;
}

.failureResponseAudio {
  background-color: #d6492f;
  color: white;
  height: 4em;
  font-size: 20px;
  border-radius: 5px;
  padding: 0px 0px 0px 10px;
}

input {
  &:-webkit-autofill, 
  &:-webkit-autofill:focus, 
  &:-webkit-autofill:hover, 
  &:-webkit-autofill:active {
    font-family: var(--font);
    box-shadow: inset 0 0 0 100px #ffffff !important;
  }
}

.privacy-policy {
  color: #949494;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 0 30px !important;
  a {
    font-weight: 500;
    color: #22b14c;
    @media (hover: hover) {
      &:hover {
        color: #949494;
      }
    }
  }
}

.signup_oueter .error-message-signup {
  color: red;
  font-size: 11px;
  font-weight: 400;
  padding-top: 0;
  padding-bottom: 15px;
}