@media (max-width: 991px) {
  body .main-wrapper .home-banner {
    padding: 0px 5px;
    height: auto;
    display: -webkit-box;
    display: flex;
    -ms-display: flex;
    -webkit-display: flex;
    -moz-display: flex; }
    body .main-wrapper .home-banner .banner {
      margin-right: 0;
      width: calc(66vw - 15px); }
      body .main-wrapper .home-banner .banner .carousel-banner {
        height: calc((66vw - 15px)/16*9); }
        body .main-wrapper .home-banner .banner .carousel-banner .caroufredsel_wrapper {
          height: calc((66vw - 15px)/16*9) !important; }
          body .main-wrapper .home-banner .banner .carousel-banner .caroufredsel_wrapper ul {
            height: 100%; }
            body .main-wrapper .home-banner .banner .carousel-banner .caroufredsel_wrapper ul li {
              height: 100%; }
        body .main-wrapper .home-banner .banner .carousel-banner .carousel-control a.next {
          right: 15px; }
    body .main-wrapper .home-banner .about {
      width: 28vw;
      max-width: 100%;
      max-height: 100%;
      margin-left: 15px; }
      body .main-wrapper .home-banner .about.home-panel {
        padding: 10px 10px 0px 10px; }
      body .main-wrapper .home-banner .about h2 {
        font-size: 0.7rem; }
      body .main-wrapper .home-banner .about p {
        font-size: 0.7rem;
        margin: 5px 0px; }
    body .main-wrapper .home-banner.div-table .div-cell {
      display: inline-block; }
  body .main-wrapper .home-bottom-panels {
    padding: 0px 5px;
    display: block;
    margin: 15px 0px 50px 0px;
    display: -webkit-box;
    display: flex;
    -ms-display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    display: block; }
    body .main-wrapper .home-bottom-panels .mid-banners {
      width: 22vw;
      float: left; }
      body .main-wrapper .home-bottom-panels .mid-banners a img {
        width: 21.5vw;
        height: 21.5vw; }
    body .main-wrapper .home-bottom-panels .mid-panels {
      padding: 0 15px;
      width: calc(66vw - 22vw - 30px); }
      body .main-wrapper .home-bottom-panels .mid-panels > div {
        padding: 0;
        height: 21.5vw; }
      body .main-wrapper .home-bottom-panels .mid-panels .pronounciation h2 {
        margin-top: 30px;
        font-size: 1.2em; }
      body .main-wrapper .home-bottom-panels .mid-panels .pronounciation .play-audio {
        background-position: -15px -106px; }
        body .main-wrapper .home-bottom-panels .mid-panels .pronounciation .play-audio.is-playing {
          background-position: -72px -106px; }
      body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper {
        width: initial !important; }
        body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul {
          width: 100% !important; }
          body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul li {
            width: 100%; }
            body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul li h3 {
              font-size: 1.5em; }
    body .main-wrapper .home-bottom-panels .grammar-rules {
      width: 25.5vw !important; } }

@media (max-width: 767px) {
  body .main-wrapper .home-banner {
    height: auto;
    display: block; }
    body .main-wrapper .home-banner .banner {
      width: 100%;
      display: block; }
      body .main-wrapper .home-banner .banner .carousel-banner {
        height: calc((100vw - 10px)/16*9); }
        body .main-wrapper .home-banner .banner .carousel-banner .caroufredsel_wrapper {
          height: calc((100vw - 10px)/16*9) !important; }
          body .main-wrapper .home-banner .banner .carousel-banner .caroufredsel_wrapper ul {
            height: 100%; }
            body .main-wrapper .home-banner .banner .carousel-banner .caroufredsel_wrapper ul li {
              height: 100%; }
        body .main-wrapper .home-banner .banner .carousel-banner .banner-pagination a {
          padding: 1px;
          margin: 5px 5px; }
    body .main-wrapper .home-banner .about {
      display: table-cell;
      width: 100%;
      margin: 10px 0px; }
      body .main-wrapper .home-banner .about.home-panel {
        padding: 10px 15px;
        margin: 5px 0px; }
    body .main-wrapper .home-banner.div-table .div-cell {
      display: block; }
  body .main-wrapper .home-bottom-panels {
    display: block;
    margin: 5px 0px 20px 0px; }
    body .main-wrapper .home-bottom-panels .mid-banners {
      width: 100%;
      float: none;
      margin-bottom: 10px;
      overflow: hidden; }
      body .main-wrapper .home-bottom-panels .mid-banners a {
        margin-bottom: 0px; }
        body .main-wrapper .home-bottom-panels .mid-banners a:first-child img {
          margin-right: 15px; }
        body .main-wrapper .home-bottom-panels .mid-banners a img {
          float: left;
          display: inline-block;
          width: calc(50% - 7.5px);
          height: auto; }
    body .main-wrapper .home-bottom-panels .mid-panels {
      padding: 0;
      width: 100vw; }
      body .main-wrapper .home-bottom-panels .mid-panels > div {
        width: 100%;
        max-width: none;
        height: auto;
        padding: 15px; }
      body .main-wrapper .home-bottom-panels .mid-panels .pronounciation {
        margin-bottom: 10px; }
        body .main-wrapper .home-bottom-panels .mid-panels .pronounciation h2 {
          font-size: 1.9em; }
      body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper {
        width: initial !important; }
        body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul {
          width: 100% !important; }
          body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul li {
            width: 100%; }
            body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul li h3 {
              font-size: 1.5em; }
    body .main-wrapper .home-bottom-panels .grammar-rules {
      margin-top: 10px;
      display: block;
      width: 100% !important;
      max-width: 100%;
      margin-left: 0px;
      height: 400px; } }

@media (max-width: 320px) {
  body .main-wrapper .home-banner {
    margin-top: 15px; }
  body .main-wrapper .home-bottom-panels .mid-panels > div {
    padding: 10px; }
  body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel {
    padding: 0 25px; }
    body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul li h3 {
      font-size: 1em; }
    body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper ul li p {
      font-size: 0.8em; }
  body .main-wrapper .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel-control a {
    width: 24px; } }