/**
 * @file
 * Positioning for a responsive layout.
 *
 * Define CSS classes to create a fluid grid layout with optional sidebars
 * depending on whether blocks are placed in the left or right sidebars.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

// We are going to create a fluid grid with 1, 3, or 5 columns and 20px gutters
// between columns (applied as 10px of left/right padding on each column).
$zen-column-count:  1;
$zen-gutter-width:  20px;

// If you need IE6/7 support for box-sizing: border-box (default), see _init.scss
//$zen-box-sizing: content-box;

// You can generate more efficient CSS if you manually apply the
// zen-grid-item-base mixin to all grid items from within a single ruleset.
$zen-auto-include-item-base: false;
// $zen-auto-include-flow-item-base: false;

// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
@if $zen-reverse-all-floats == false {

/**
 * Center the page.
 *
 * For screen sizes larger than 1200px, prevent excessively long lines of text
 * by setting a max-width.
 */


/* Apply the shared properties of grid items in a single, efficient ruleset. */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer {
  // See the note about $zen-auto-include-item-base above.
  @include zen-grid-item-base();
}

/* Containers for grid items and flow items. */
#header,
#main,
#footer {
  @include zen-grid-container();
}

} // End of @if $zen-reverse-all-floats == true

.pane-mathsplain-header,
.pane-subject-list,
.pane-page-content,
.pane-mathsplain-footer-1,
.pane-mathsplain-footer-2 {
  width: 100%;
}

.limited-wide {
  display: table;
  max-width: 1008px;
  width: 100%;
  margin: 0 auto;
}
.limited {
  max-width: 1008px;
  width: 100%;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.form-item-100 {
  width: 100%;
  margin: 0 0 10px 0;
  display: table;
  position: relative;
}
.form-item-50 {
  display: inline-block;
  float: left;
  width: 49%;
  margin: 0 1% 10px 0;
  position: relative;
}
.form-item-50-last {
  margin: 0 0 10px 1%;
}
.form-item-25 {
  display: inline-block;
  float: left;
  width: 24%;
  margin: 0 1% 10px 0;
  position: relative;
}
.form-item-last {
  margin-right: 0;
}
.maths-2col-left {
  width: 30.06%;
  float: left;
}
.maths-2col-right {
  width: 69.94%;
  float: left;
}

.col-33 {
  width: 31.3%;
  padding: 0;
  margin: 0 1%;
  float: left;
  display: inline-block;
  &:first-child,
  &:nth-child(3n+1) {
    margin: 0 2% 0 0;
    clear: left;
  }
  &:nth-child(3n) {
    margin: 0 0 0 2%;
  }
}
.col-25 {
  width: 23%;
  padding: 0;
  margin: 0 1.33%;
  float: left;
  display: inline-block;
  &:first-child,
  &:nth-child(4n+1) {
    margin: 0 1.33% 0 0;
    clear: left;
  }
  &:nth-child(4n) {
    margin: 0 0 0 1.33%;
  }
}

.form-item-100,
.form-item-50,
.form-item-25,
.col-33,
.col-25 {
  .select-wrapper,
  .form-select,
  .form-text,
  .form-textarea {
    width: 100%;
    margin: 0;
  }
}

.side-distance {
  .pane-page-title,
  .pane-page-content {
    & > .pane-content {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

.pane-subject-list {
   & > .pane-content {
    @extend .limited-wide;
  }
}
.pane-mathsplain-footer-1,
.pane-mathsplain-footer-2 {
   & > .pane-content {
     & > .maths-panel-display {
       .center-wrapper,
       .panel-col-bottom {
         @extend .limited-wide;
       }
       .center-wrapper {
         width: auto;
         padding: 40px 0;
       }
       .panel-col-bottom2 {
         .pane-mathsplain-footer-logos {
           @extend .limited-wide;
         }
       }
    }
  }
}
.pane-mathsplain-header {
  .pane-login-register-pane,
  .pane-mathsplain-header-2 {
    & > .pane-content {
      @extend .limited-wide;
    }
  }
}

#mini-panel-mathsplain_header_1 {
  & > .panel-panel {
    width: auto;
    .inside {
      margin: 0;
    }
  }
}

.compact-form {
  .form-item-name,
  .form-item-mail,
  .form-item-pass {
    @extend .form-item-100;
  }
  .form-type-password-confirm {
    margin: 0;
    .form-type-password {
      @extend .form-item-50;
      &.form-item-pass-pass2 {
        @extend .form-item-50-last;
      }
    }
  }
  .form-item-captcha-response {
    .form-text {
      //@extend .form-item-50;
    }
  }
}
.entityform {
  .form-item {
    @extend .form-item-100;
  }
}
.pane-page-content {
  form {
    .form-item-name,
    .form-item-mail,
    .form-item-conf-mail,
    .form-item-pass,
    .form-item-current-pass {
      @extend .form-item-100;
      position: relative;
    }
  }
}

.pane-mathsplain-header {
  .pane-login-register-pane {
    form {
      .form-item {
        margin: 0 0 10px 0;
				.description {
          margin: 0;
          top: 100%;
          left: 0 !important;
        }
        &.form-item-captcha-response {
          margin: 0;
          .form-text {
            @extend .form-item-50;
          }
					.description {
						top: auto !important;
						bottom: 100% !important;
					}
        }
      }
    }
    .pane-formblock-user-register {
      form {
        .form-item-mail {
          @extend .form-item-50;
        }
        .form-item-conf-mail {
          @extend .form-item-50;
          @extend .form-item-50-last;
        }
        .form-item-pass {
          margin: 0;
          clear: left;
          .form-type-password {
            @extend .form-item-50;
            &.form-item-pass-pass2 {
              @extend .form-item-50-last;
            }
          }
        }
      }
    }
  }
}
.page-checkout {
  form {
    .form-item-customer-profile-billing-addressbook {
      @extend .form-item-50;
    }
    .field-type-addressfield {
      clear: left;
      .addressfield-container-inline {
        @extend .form-item-25;
        .form-item {
          margin: 0;
        }
        &.name-block {
          @extend .form-item-50;
        }
        &.country-block {
          clear: left;
        }
      }
    }
    .commerce-coupon-code-wrapper {
      @extend .form-item-50;
    }
    .mathsplain_order_study {
      .fieldset-wrapper {
        & > .form-item {
          @extend .form-item-50;
        }
      }
    }
  }
}
.landing-page {
  .pane-page-content {
    .panel-pane {
      .pane-content {
        @extend .limited-wide;
      }
      &.pane-panels-mini {
        > .pane-content {
          max-width: none;
          display: block;
          padding: 0;
        }
      }
      &.section-7 {
        .pane-content {
          max-width: none;
          padding: 0;
        }
      }
      &.section-9 {
        .pane-title {
          @extend .limited-wide;
        }
      }
    }
  }
}
body {
  &.node-type-page,
  &.section-gyik,
  &.section-kapcsolat,
  &.section-users,
  &.page-node-take,
  &.page-views,
  &.node-type-syllabus,
  &.section-matematika-kepletgyujtemeny,
  &.section-matematika-feladatgyujtemeny,
  &.section-my-courses  {
    @extend .side-distance;
  }
}
body.section-altalanos-szerzodesi-feltetelek-es-adatvedelmi-iranyelvek,
body.page-node-25,
body.page-node-15,
body.page-node-7323 {
  .pane-page-content {
    max-width: 100%;
    & > .pane-content {
      margin: 0 !important;
    }
  }
  .node {
    .field-name-body {
      .section-title {
        h2,
        & ~ *:not(.section-title) {
          @extend .limited;
        }
      }
      .anchors {
        @extend .limited;
      }
    }
  }
}

.page-404-page,
.page-403-page {
  .pane-page-content {
    .panel-pane {
      .pane-content {
        @extend .limited;
      }
    }
  }
}

#mathsplain-front-parallax-1,
#mathsplain-front-parallax-2,
#mathsplain-front-parallax-3,
#mathsplain-front-parallax-4,
#mathsplain-front-parallax-5,
#mathsplain-front-parallax-6,
#mathsplain-front-parallax-7 {
  padding-top: 0;
  height: 630px;
  width: 100vw;
}
#mathsplain-toggle-search-input {
  display: none;
}

#sliding-popup {
  .eu-cookie-compliance-categories {
    .inner {
      @extend .limited;
    }
  }
}


@media all and (min-width: 1401px) {
  body {

    #mathsplain-front {
      &.splash-on {
        #radial-links {
          .radial-item {
            &:nth-child(4) {
              &:after {
                height: 5vw;
              }
            }
          }
        }
      }
    }
    &.landing-page {
      &.gdpr {
        .pane-page-content {
          .gdpr-section-3 {
            .image {
              background-position: 0 center;
            }
          }
        }
      }
    }
  }
}

@media all and (max-width: 1600px) {
  body {

  }
}

@media all and (max-width: 1200px) {
  body {
    &.page-user-register,
    &.page-subscribe {
      .pane-page-content {
        > .pane-content {
          width: 400px;
        }
      }
    }
  }
}

@media all and (min-width: 1008px) and (max-width: 1090px) {
  .pane-mathsplain-header {
    .menu-buttons {
      button {
        font-size: 16px;
      }
    }
    #mathsplain-login-pane-opener {
      font-size: 16px;
    }
  }
  .node-type-video {
    #promobar-wrapper {
      display: none;
    }
  }
  #mathsplain-front {
    &.splash-on {
      #radial-links {
        .radial-item {
          &:nth-child(3) {
            &:after {
              height: 11vw;
            }
          }
          &:nth-child(5) {
            &:after {
              height: 7vw;
            }
          }
          &:nth-child(6) {
            &:after {
              height: 16vw;
            }
          }
        }
      }
    }
  }
}

@media all and (min-width: 1008px) and (max-width: 1047px) {
  .side-distance {
    .pane-page-title,
    .pane-page-content {
      & > .pane-content {
        margin: 0 20px;
      }
    }
  }
  .landing-row-fullwidth {
    margin-left: -20px;
    margin-right: -20px;
  }
  .landing-page {
    .pane-page-content {
      .panel-pane {
        .pane-title,
        & > .pane-content {
          padding-left: 20px;
          padding-right: 20px;
        }
        &.pane-panels-mini {
          > .pane-content {
            padding: 0;
          }
        }
        &.section-erettsegi {
          [class*="row"] {
            .title,
            & > p,
            .ckeditor-accordion-container {
              padding-left: 20px;
              padding-right: 20px;
            }
          }
        }
        &.lp-parallax {
          .pane-content {
            padding: 0 !important;
          }
        }
      }
    }
  }
  #mathsplain-header-video {
    #mathsplain-header-video-left-text {
      margin: 0 0 0 20px;
    }
  }
  #mathsplain-front {
    #mathsplain-header-video-left-text {
      margin-top: -100px;
    }
  }
}

@media all and (min-width: 1008px) {
  body {
    .node {
      &.node-video {
        &.view-mode-full {
          .in-fullscreen {
            .help-layer.canvas {
              .left {
                .top {
                  font-size: 2.3vw;
                }
                .bottom {
                  font-size: 1.5vw;
                }
              }
            }
          }
        }
      }
    }
    &.landing-page {
      .pane-page-content {
        .lp-1 {
          h2 {
            font-size: 38px;
          }
        }
        .lp-6 {
          .landing-row {
            &[class*="icon"] {
              div:first-child {
                padding-right: 25px;
                &:before {
                  top: 50%;
                  right: -25px;
                  width: 50px;
                  height: 54px;
                  margin-top: -27px;
                }
                & + div {
                  padding-left: 35px;
                }
              }
            }
          }
        }
        .lp-11 {
          .left-block {
            padding-right: 100px;
          }
        }
        .section-erettsegi.panel-pane {
          .row-2 {
            .cont {
              &:last-child {
                .landing-row {
                  background: none;
                  box-shadow: none;
                  border: none;
                  padding-left: 0;
                  padding-right: 0;
                  backdrop-filter: none;
                  -webkit-backdrop-filter: none;
                }
              }
            }
          }
        }
      }
    }
    &.page-search,
    &.page-search-grouped {
      .view-search {
        #isotope-container {
          .isotope-element {
            width: 248px;
          }
        }
        .accordion-content {
          .views-row {
            width: 248px;
          }
        }
      }
    }
    &.page-taxonomy-term,
    &.node-type-video {
      background-size: 100% auto !important;
    }
  }
  .pane-mathsplain-header {
    .menu-buttons {
      .line {
        display: block;
      }
    }
  }
  #mini-panel-mathsplain_header_1 {
    @include flexbox();
    -webkit-justify-content: space-between;
    justify-content: space-between;
    & > .panel-panel {
      &:nth-child(2) {
        -webkit-flex-grow: 1;
        flex-grow: 1;
      }
    }
  }
  table {
    &.scrolltable {
      width: 1008px;
    }
  }
  #panel-page-mathsplain-video {
    .help-layer {
      .pane-taxonomy-term-field-product {
        .commerce-add-to-cart {
          .form-submit {
            color: #fff !important;
            border: 1px solid #fff !important;
          }
        }
      }
    }
  }
}

@media all and (max-width: 1007px) {
  .full-bg-img {
    position: relative;
    .pane-content {
      padding: 0 !important;
    }
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
    }
  }
  .bg-img-overlay-blur {
    &:before {
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
  }
  .left-block,
  .right-block {
    width: 100%;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0 0 0;
    float: none;
    min-height: 0;
    display: table;
  }
  .img-left,
  .img-right {
    .pane-content {
      padding: 0 !important;
      max-width: none !important;
      &:before {
        display: none !important;
      }
    }
    .image {
      position: static;
      display: block;
      width: 100%;
      height: 0;
      padding-top: 54%;
      background-size: cover !important;
    }
  }
  .img-middle {
    padding-top: 70px;
    .image {
      margin-top: 35px;
      padding-top: 400px;
      background-size: contain !important;
      background-position: center top;
    }
  }
  .img-circle {
    .image {
      position: relative;
      left: 0;
      &:before {
        left: 0;
        right: 0;
        width: 50vw;
        height: 50vw;
      }
    }
  }
  .lp-img-left,
  .lp-img-right {
    padding-bottom: 0;
    &:after {
      position: static;
      width: 100%;
      height: 0;
      margin-top: 50px;
      padding-top: 50%;
      background-position: center center;
    }
  }
  .lp-img-middle {
    &:after {
      padding-top: 56%;
      background-size: auto 80%;
    }
  }
  .lp-img-circle {
    padding-bottom: 50px;
    &:after {
      width: 50vw;
      height: 50vw;
      padding: 0 !important;
      margin-top: 30px;
      background-size: cover;
    }
  }
  .landing-row {
    &.tab-center {
      -webkit-justify-content: center;
      justify-content: center;
    }
  }
  .landing-row-tab-center {
    -webkit-justify-content: center;
    justify-content: center;
  }
  .tab-100 {
    width: 100%;
  }
  .tab-hide {
    display: none;
  }
  .style-lp1 {
    .title {
      font-size: 36px;
    }
  }
  .left-menu-style {
    background-color: rgba(0, 0, 0, 0.8);
  }
  .front-title-style {
    font-size: clamp(38px, 7vw, 46px);
  }
  .slidein-left,
  .slidein-right {
    max-width: none;
  }
  .start-learning {
    h2 {
      font-size: 30px;
    }
  }
  body {
    #mathsplain-user-menu {
      .menu {
        margin: 0;
        font-size: 22px;
      }
    }
    #mathsplain-header-video {
      #mathsplain-header-video-left-text {
        font-size: 22px;
        .title {
          font-size: 34px;
        }
        .text {
          br {
            display: none;
          }
        }
      }
    }
    #radial-links {
      .radial-item {
        a {
          font-size: 18px;
          padding-top: 35px;
          &:before {
            background-size: auto 25px !important;
          }
          &[href*="logaritmikus-egyenletek"] {
            width: auto;
          }
        }
        &.highschool-courses {
          a {
            &:before {
              background-size: auto 35px !important;
            }
          }
        }
        &.university-courses {
          a {
            width: 150px;
          }
        }
        &:first-child {
          a {
            top: 20vw;
            left: -30vw;
          }
        }
        &:nth-child(2) {
          a {
            top: 5vw;
            left: -33vw;
          }
        }
        &:nth-child(3) {
          a {
            top: -11vw;
            left: -17vw;
          }
          &:after {
            -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
          }
        }
        &:nth-child(5) {
          a {
            top: -14vw;
            left: 19vw;
          }
          &:after {
            height: 7.5vw;
          }
        }
        &:nth-child(6) {
          a {
            top: 0;
            left: 36vw;
          }
        }
        &:nth-child(7) {
          a {
            top: 11vw;
            left: 36vw;
          }
        }
        &:nth-child(8) {
          a {
            top: 20vw;
            left: 24vw;
          }
          &:after {
            height: 13vw;
          }
        }
        &:nth-child(9) {
          a {
            top: 24vw;
          }
        }
      }
    }
    #mathsplain-front {
      #mathsplain-header-video-left-text {
        font-size: 26px;
        .title {
          font-size: 45px;
        }
        .text,
        .slideshow {
          font-size: 28px;
        }
        .slideshow {
          .slideshow-item {
            .subject {
              a {
                span {
                  display: inline;
                }
                br {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
    .pane-mathsplain-header {
      .pane-mathsplain-header-1 {
        div[class*="pane-views-exp-search-page"],
        .pane-views-exp-search-page {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto !important;
          display: block !important;
          padding: 15px 0 0 0;
          background: $middledark-gray;
          visibility: hidden;
          opacity: 0;
          pointer-events: none;
          transition: top 0.5s, opacity 0.5s, visibility 0.5s;
          #views-exposed-form-search-page,
          form[id*="views-exposed-form-search-page"] {
            margin: 0 15px;
            .views-exposed-widgets {
              margin: 0 0 15px 0;
            }
            .views-submit-button {
              height: 24px;
            }
            .views-widget-filter-search_api_views_fulltext,
            .views-widget,
            .form-type-textfield,
            .form-text {
              width: 100%;
            }
          }
        }
        &.search-open {
          div[class*="pane-views-exp-search-page"],
          .pane-views-exp-search-page {
            top: 100%;
            z-index: 5;
            visibility: visible;
            opacity: 1;
            pointer-events: auto;

          }
        }
        #mini-panel-mathsplain_header_1 {
          .panel-col-first {
            position: static;
          }
          .pane-system-main-menu {
            position: absolute;
            left: -180px;
            top: 0;
          }
        }
      }
      .menu-buttons {
        &:not(.cloned) {
          button {
            &[data-menu="toggle-elementary-menu"],
            &[data-menu="toggle-highschool-menu"],
            &[data-menu="toggle-university-menu"] {
              display: none;
            }
          }
        }
      }
      .pane-system-main-menu,
      .pane-menu-tree {
        .menu {
          li {
            margin: 0 7px;
            &.first {
              margin-left: 18px;
            }
          }
        }
      }
      #mathsplain-toggle-search-input {
        display: inline-block;
      }
      #views-exposed-form-search-page,
      form[id*="views-exposed-form-search-page"] {
        margin-right: 10px;
      }
      #mathsplain-login-pane-opener {
        position: relative;
        text-indent: -9999px;
        display: inline-block;
        width: 20px;
        &:after {
          content: "\f007";
          font-family: 'FontAwesome';
          position: absolute;
          left: 0;
          text-indent: 0;
          font-size: 24px;
        }
        &:hover {
          color: $light-blue;
          &:before {
            display: none;
          }
        }
      }
    }
    .pane-subject-list {
      .view-subject-list {
        .view-content {
          ul {
            li {
              .views-field-name {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .pane-login-register-pane {
      .form-submit {
        font-size: 20px;
        line-height: 24px;
      }
    }
    .view-testimonials {
      .splide {
        .splide__list {
          .splide__slide {
            max-width: 320px;
          }
        }
      }
      .flexslider {
        .slides {
          li {
            max-width: 768px;
          }
        }
      }
    }
    .bar-chart {
      font-size: 20px;
    }
    .node {
      &.node-video {
        &.view-mode-full {
          .no-access-wrapper {
            min-height: 384px;
          }
          .field-name-title-field {
            .field-item {
              max-width: 768px;
            }
          }
          .help-layer {
            .radial-button {
              width: 100px;
              height: 100px;
              margin-top: -50px;
              margin-left: -50px;
            }
            .info-layer {
              .back,
              .step {
                &:before {
                  background-position: 11px center;
                  background-size: 11px auto;
                }
              }
              .play {
                background-size: 40px auto;
              }
              .line4 {
                transform: rotate(32deg);
              }
            }
            .no-video {
              .bottom {
                .txt {
                  padding-right: 55px;
                  font-size: 24px;
                }
              }
            }
            &.canvas {
              a.video {
                .label {
                  font-size: 24px;
                }
              }
              .right {
                a {
                  font-size: 20px;
                  &.step-by-step {
                    .label {
                      font-size: 24px;
                      margin-right: 38px;
                    }
                    .step-by-step {
                      width: 18px;
                      height: 140px;
                      .inner {
                        background-size: 11px auto;
                        background-position: right 2px center;
                      }
                    }
                  }
                }
              }
            }
            &.info {
              .info-layer {
                .line4 {
                  width: 25%;
                }
              }
            }
          }
          .closing-help-layer {
            font-size: 22px;
            .left {
              #back-arrow {
                width: 18px;
                height: 140px;
                margin-top: -80px;
                &:after {
                  background-size: 11px auto;
                  background-position: 5px center;
                }
              }
              .flag-understood {
                span.flag,
                span.flag input,
                span.flag .flag-throbber,
                span.flag:before,
                span.flag:after {
                  width: 100px;
                  height: 100px;
                }
                span.flag {
                  label {
                    font-size: inherit;
                    height: calc(100% - 135px);
                  }
                }
              }
              .all {
                font-size: inherit;
                padding: 20px;
              }
              .login-message {
                font-size: inherit;
              }
              a.video-register {
                width: 100px;
                height: 100px;
                margin-bottom: 25px;
                font-size: 15px;
              }
            }
            .right {
              .next {
                .label {
                  font-size: inherit;
                  padding: 20px 50px 20px 20px;
                  font-size: inherit;
                }
                .arrow {
                  width: 20px;
                  right: 15px;
                }
              }
              .nomore {
                font-size: inherit;
              }
            }
          }
          .field-name-field-swiffy-entity,
          .field-name-field-h5p {
            #animation_container,
            canvas,
            .h5p-iframe-wrapper {
              max-width: 768px;
            }
          }
          .in-fullscreen {
            .field-name-field-swiffy-entity,
            .field-name-field-h5p {
              #animation_container,
              canvas,
              .h5p-iframe-wrapper {
                max-width: 100%;
              }
            }
          }
        }
      }
    }
    .page-erettsegi {
      .ckeditor-accordion-container {
        .ckeditor-accordion-toggler {
          font-size: 20px;
        }
      }
    }
    #panel-page-mathsplain-video {
      > .panel-col-first {
        .pane-menu-block-1,
        .pane-term-name,
        div[class*="pane-views-"] {
          .pane-title {
            font-size: 22px;
          }
        }
      }
      .help-layer {
        margin-right: 10px;
        #mini-panel-subject_term_panel {
          .left,
          .right {
            display: table;
            box-sizing: border-box;
          }
          .left {
            padding: 20px;
            width: 100%;
            font-family: 'Roboto';
            text-transform: uppercase;
            font-size: 22px;
            line-height: 1.2em;
            &:before {
              top: 70px;
            }
            .topic-summary {
              span {
                display: inline;
              }
            }
          }
          .right {
            width: 100%;
            padding: 20px;
            .top {
              margin-bottom: 20px;
            }
            .bottom {
              margin-bottom: 100px;
            }
            &.hidden {
              width: 100%;
              #help-layer-video-player {
                margin-bottom: 80px;
              }
            }
          }
          .pane-taxonomy-term-field-product {
            .commerce-add-to-cart {
              width: 188px;
              left: 0;
              margin: 0 0 55px 20px;
              & > div {
                padding: 0;
              }
              .form-submit {
                border: none;
                line-height: 24px;
              }
            }
          }
          #mathsplain-login-pane-opener-anon-purchase {
            .pane-content {
              padding: 0;
              width: 188px;
              left: 0;
              margin: 0 0 55px 20px;
            }
            button {
              border: none;
              line-height: 24px;
            }
          }
          .pane-taxonomy-term-product-commerce-price {
            .field-name-commerce-price {
              width: 205px;
              left: 0;
              margin: 0 0 25px 20px;
            }
          }
          .pane-taxonomy-term-field-table-of-contents {
            .field-name-field-table-of-contents {
              .button {
                left: auto;
                right: 0;
                text-align: center;
                margin: 0;
                width: 188px;
              }
            }
          }
        }
      }
      form {
        &[id*="search-by-category"] {
          // padding-right: 15px;
        }
      }
    }
    &.front {
      .lp-1 {
        h2 {
          font-size: 30px;
        }
      }
      .lp-7 {
        .image {
          position: relative;
          left: auto;
          right: auto;
          margin: auto;
          margin-bottom: 20px;
          width: 200px;
          height: 200px;
        }
      }
      .panel-pane[class*="icon"] {
        background: none;
        > .pane-content {
          margin-left: 20px;
          margin-right: 20px;
          .text {
            width: 100%;
          }
        }
      }
    }
    &.page-welcome {
      .welcome {
        h1 {
          font-size: 24px;
        }
      }
    }
    &.page-search,
    &.page-search-grouped {
      background-size: 1638px 1169px;
    }
    &.landing-page {
      .testimonial {
        background-size: 40px auto;
        padding: 60px 20px;
        width: 100%;
      }
      .pane-page-content {
        .left-block,
        .right-block {
          padding-top: 70px;
        }
        .lp-1 {
          &.v1 {
            .style-lp1 {
              .title {
                font-size: 18px;
              }
            }
          }
        }
        .lp-6 {
          background-position: right -10vw bottom;
          .landing-row {
            &.border {
              &[class*="icon"] {
                div:first-child {
                  padding-left: 60px;
                  &:before {
                    left: 10px;
                    right: auto;
                    top: 50%;
                    margin-top: -25px;
                  }
                }
              }
            }
          }
        }
        .lp-7 {
          .image {
            position: relative;
            left: auto;
            right: auto;
            margin: auto;
            margin-bottom: 20px;
            width: 200px;
            height: 200px;
          }
        }
        .lp-13 {
          &.v1,
          &.v2,
          &.v3,
          &.v4 {
            &:before {
              background: rgba(0, 0, 0, 0.7);
            }
          }
        }
        .lp-16 {
          &:after {
            margin-top: 0;
          }
        }
        .lp-27 {
          &:before {
            display: none;
          }
          .landing-row {
            &:first-child {
              padding-bottom: 12vw;
            }
            &:nth-child(2) {
              padding-top: 17vw;
            }
          }
        }
        &.lp-35 {
          .pane-content {
            padding: 0 !important;
          }
        }
        .lp-36,
        .lp-37,
        .lp-38 {
          .landing-row {
            height: auto;
          }
        }
        .lp-37 {
          .landing-row {
            &:before,
            &:after {
              width: 200px;
              height: 400px;
              top: -40%;
              left: 50%;
              margin-left: -100px;
              transform: rotate(90deg);
            }
            &:before {
              background-size: 50%;
            }
          }
        }
        .lp-39 {
          .landing-row {
            margin-left: -20px;
            margin-right: -20px;
          }
        }
        .panel-pane {
          .button-bordered {
            font-size: 20px;
          }
          &.lp-parallax {
            .pane-content {
              padding: 0 !important;
            }
          }
          &.section-1 {
            .text {
              font-size: 24px;
            }
          }
          &.section-2 {
            background: $hover;
            .pane-content {
              padding: 0;
            }
          }
          &.section-3 {
            .text {
              padding: 0;
              min-height: 0;
            }
            .image {
              padding-top: 56%;
            }
          }
          &.section-4 {
            padding: 20px 0;
            .pane-content {
              & > div {
                a {
                  &:before {
                    height: 80px;
                    margin-bottom: 20px;
                  }
                }
              }
            }
          }
          &.section-5 {
            background: $hover;
            .image {
              background: url("../images/landing-5-v2-mob.jpg") no-repeat center top;
              padding-top: 40%;
            }
          }
          &.section-6 {
            background-position: center center;
          }
          &.section-7 {
            .pane-content {
              padding: 0;
            }
          }
          &.section-8 {
            background-position: center center;
            .text {
              padding-right: 0;
            }
          }
          &.section-10 {
            .pane-content {
              position: relative;
            }
          }
          &.section-9 {
            .pane-content {
              width: 100%;
              padding: 0;
            }
          }
          &.section-11 {
            padding-top: 60px;
            padding-bottom: 60px;
            &.v5 {
              padding-bottom: 0;
            }
          }
          &.section-12 {
            .image {
              background-size: 100%;
            }
          }
          &.pane-mathsplain-front-pane {
            #mathsplain-front {
              #mathsplain-header-video-left-text {
                .title {
                  font-size: 42px;
                }
              }
              .head-wrap {
                height: 500px;
              }
            }
          }
          &.section-erettsegi {
            [class*="row"] {
              .ckeditor-accordion-container {
                margin-left: 0;
                margin-right: 0;
              }
              .ckeditor-accordion-container {
                .ckeditor-accordion-toggler {
                  font-size: 20px;
                }
              }
            }
            .row-1 {
              .cont {
                .left-block {
                  padding-bottom: 40px;
                }
                .image {
                  margin-left: 0;
                  margin-right: 0;
                  background-size: auto 100% !important;
                  background-position: center top;
                }
              }
            }
            .row-2 {
              .title {
                & + .cont {
                  //margin-bottom: 30px;
                  .left-block {
                    //padding-bottom: 0;
                  }
                  .image {
                    margin-left: 0;
                    margin-right: 0;
                    background-size: auto 100% !important;
                    background-position: center top;
                  }
                }
              }
              .cont {
                &:last-child {
                  .image {
                    display: none;
                  }
                }
              }
            }
            .row-3 {
              .title {
                & + .cont {
                  .left-block {
                    position: relative;
                    z-index: 1;
                    color: #fff;
                  }
                  .image {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50vw);
                    width: 100vw;
                    height: 100%;
                    padding: 0;
                    &:before {
                      content: "";
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      background: rgba(0,0,0,0.5);
                      backdrop-filter: blur(3px);
                      -webkit-backdrop-filter: blur(3px);
                    }
                  }
                }
              }
              .cont-1 {
                .white-box,
                .yellow-box,
                .orange-box,
                .braun-box {
                  background: none;
                  border-color: currentColor;
                  .txt-cyan {
                    color: #fff !important;
                  }
                }
              }
            }
          }
        }
      }
      &.parents,
      &.students,
      &.online-gimis,
      &.online-egyetemi,
      &.egyetem-tipp,
      &.egyetem-megoldas,
      &.mire-jo,
      &.miert-tanulunk-matekot {
        .pane-page-content {
          .lp-5 {
            .landing-row {
              .image {
                position: relative;
                margin: 20px 0;
                left: auto;
                right: auto;
                max-width: none;
                width: 100%;
                height: 0;
                padding-top: 56.25%;
              }
            }
          }
        }
      }
      &.mire-jo,
      &.miert-tanulunk-matekot {
        .pane-page-content {
          .section-11.v4 {
            &:before {
              visibility: visible;
              background: rgba(0, 0, 0, 0.5) !important;
            }
          }
        }
      }
      &.online-gimis,
      &.online-egyetemi {
        .section-2 {
          .image {
            display: none;
          }
        }
      }
      &.final-exam-2023 {
        .pane-page-content {
          .section-erettsegi.panel-pane {
            .row-1 {
              .img {
                background-position: right center;
                &:before {
                  background: rgba(0, 0, 0, 0.7);
                }
              }
            }
            .row-3 {
              .title {
                & + .cont {
                  .image {
                    &:before {
                      background: rgba(0, 0, 0, 0.7);
                    }
                  }
                }
              }
            }
          }
        }
      }
      &.matekingpro {
        .pane-page-content {
          .head {
            &:before {
              background-color: rgba(0, 0, 0, 0.5);
            }
          }
        }
      }
    }
    &.landing-style-2 {
      .pane-page-content {
        [class*="lp-"] {
          .pane-title,
          & > .pane-content {
            padding-left: 20px !important;
            padding-right: 20px !important;
          }
        }
        .lp-9 {
          > .pane-content {
            padding: 0 !important;
          }
        }
      }
    }
    &.page-user-register {
      > .panel-display {
        background-position: right 25% top 60px;
      }
    }
    &.not-logged-in {
      .node {
        &.node-video {
          &.view-mode-full {
            .no-access-wrapper {
              padding-bottom: 20px;
              .no-access-field-description {
                font-size: 32px;
                padding-top: 40px;
                text-align: center;
              }
              .testimonials {
                .view-testimonials {
                  .flexslider {
                    margin-bottom: 20px;
                    .slides {
                      li {
                        font-size: 18px;
                        background-size: 30px auto;
                        .views-field-body {
                          margin-top: 40px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .page-403-page {
    .pane-page-content {
      .panel-pane.message {
        &:before {
          background-size: 400px;
        }
        .pane-content {
          .tex2jax {
            padding-right: 190px;
          }
        }
      }
    }
  }
  .pane-mathsplain-footer-1 {
    .award {
      width: 430px;
      height: 270px;
      background-position: center 0, 0 80px, 85px 80px, 175px 80px, 265px 80px, 355px 80px, 0px 160px, 85px 160px, 175px 160px, 265px 160px, 355px 160px;
    }
  }
  .controls-options {
    .text {
      min-height: 120px;
    }
  }
  .hurray {
    .row {
      &.row-3 {
        .left {
          padding: 20px;
          font-size: 18px;
        }
      }
    }
  }
  .they-say {
    .row {
      height: 217px;
      .col {
        &.small {
          width: 190px;
          &.image-rolo {
            img {
              max-height: 217px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1007px) and (max-height: 560px) {
  .pane-mathsplain-front-pane {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
    }
  }
  #mathsplain-front {
    &.splash-on {
      #mathsplain-header-video-left-text {
        opacity: 0;
      }
      #mathsplain-front-radial-button {
        visibility: hidden;
      }
      #radial-links {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 68px;
        height: 100%;
        max-height: 100vh;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: flex-start;
        .radial-item {
          position: static;
          text-align: center;
          width: 50%;
          height: auto;
          margin: 0;
          box-sizing: border-box;
          &:after {
            display: none;
          }
          a {
            left: auto !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            width: auto !important;
            padding-top: 40px;
            box-sizing: border-box;
            transition-delay: 0s;
            &:before {
              background-size: 30px 30px !important;
              background-position: center center !important;
            }
          }
        }
        .radial-close {
          right: 20px;
        }
      }
    }
  }
  body.landing-page {
    .pane-page-content {
      .panel-pane.pane-mathsplain-front-pane {
        #mathsplain-front {
          .head-wrap {
            height: 100vh;
          }
        }
      }
    }
  }
}

@media all and (max-width: 1007px) and (orientation: landscape) {
  .node-type-video {
    .pane-mathsplain-header {
      position: absolute;
      transform: translateY(0) !important;
    }
  }
}

@media all and (min-width: 768px) and (max-width: 807px) {
  .side-distance {
    .pane-page-title,
    .pane-page-content {
      & > .pane-content {
        margin: 0 20px;
      }
    }
  }
  .landing-row-fullwidth {
    margin-left: -20px;
    margin-right: -20px;
  }
  .left-block,
  .right-block {
    padding-left: 20px;
    padding-right: 20px;
  }
  .landing-page {
    .pane-page-content {
      .panel-pane {
        .pane-title,
        & > .pane-content {
          padding-left: 20px;
          padding-right: 20px;
        }
        &.section-erettsegi {
          .left-block,
          .right-block {
            padding-left: 0;
            padding-right: 0;
          }
          [class*="row"] {
            .title {
              padding-left: 20px;
              padding-right: 20px;
            }
          }
        }
      }
    }
  }
  #mathsplain-header-video {
    #mathsplain-header-video-left-text {
      margin-left: 20px;
      width: 44%;
      margin-right: 3%;
      top: -48px;
    }
  }
  #mathsplain-front {
    #mathsplain-header-video-left-text {
      top: 0;
      width: 100%;
      .text,
      .slideshow {
        width: calc(50% - 65px);
      }
    }
  }
}

@media all and (min-width: 768px) and (max-width: 1007px) {
  .limited-wide,
  .limited {
    max-width: 768px;
  }
  .lp-1 {
    .style-lp1 {
      .title {
        font-size: 26px;
      }
    }
  }
  body {
    .flacks {
      max-width: 212px;
      width: 49%;
    }
    .maths-panel-display {
      &.panel-2col {
        .panel-col-first {
          width: 302px;
        }
        .panel-col-last {
          width: calc(100% - 302px);
          max-width: 466px;
        }
      }
    }
    #panel-page-mathsplain-video {
      .panel-col-last {
        & > .inside {
          //padding-left: 0;
        }
      }
      .help-layer {
        #mini-panel-subject_term_panel {
          > .panel-panel {
            > div {
              @include flexbox();
              -webkit-flex-flow: column;
              flex-flow: column;
            }
          }
          .right,
          .pane-taxonomy-term-field-table-of-contents {
            -webkit-order: 1;
            order: 1;
          }
          .left {
            padding-bottom: 80px;
          }
          .right {
            padding-bottom: 50px;
          }
          .pane-taxonomy-term-product-commerce-price {
            .field-name-commerce-price {
              margin: 0 0 20px 210px;
            }
          }
          .pane-taxonomy-term-field-product {
            .commerce-add-to-cart {
              margin: 0 0 20px 20px;
              .form-submit {
                border: 1px solid;
              }
            }
          }
          #mathsplain-login-pane-opener-anon-purchase {
            .pane-content {
              margin: 0 0 20px 20px;
              button {
                border: 1px solid;
              }
            }
          }
          .pane-taxonomy-term-field-table-of-contents {
            .field-name-field-table-of-contents {
              .button {
                left: 0;
                right: auto;
                width: auto;
              }
            }
          }
        }
      }
      .pane-videos,
      .pane-clone-of-videos,
      .pane-search-by-category-panel-pane-1 {
        .view-videos,
        .view-clone-of-videos,
        .view-id-search_by_category {
          .view-header {
            .isotope-options {
              .isotope-filters {
                li {
                  a {
                    span {
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }
          .isotope-element {
            @extend .flacks;
          }
        }
      }
    }
    #mathsplain-front-parallax-1,
    #mathsplain-front-parallax-2,
    #mathsplain-front-parallax-3,
    #mathsplain-front-parallax-4,
    #mathsplain-front-parallax-5,
    #mathsplain-front-parallax-6,
    #mathsplain-front-parallax-7 {
      height: 500px; //380px;
    }
    &.page-search,
    &.page-search-grouped {
      .view-search {
        #isotope-container {
          .isotope-element {
            width: 252px;
          }
        }
        .accordion-content {
          .views-row {
            width: 252px;
          }
        }
      }
    }
    &.front {
      .lp-1 {
        .style-lp1 {
          .title {
            font-size: 26px;
          }
        }
      }
    }
  }
  table {
    &.scrolltable {
      width: 768px;
    }
  }
}

@media all and (min-width: 768px) and (max-width: 1007px) and (min-height: 1026px) {
  body {
    &.page-taxonomy-term,
    &.node-type-video {
      background-position: 0 0 !important;
      background-size: 100% auto !important;
    }
  }
}

@media all and (min-width: 768px) and (max-width: 1007px) and (max-height: 1025px) {
  body {
    &.page-taxonomy-term,
    &.node-type-video {
      &.landscape {
        background-size: auto 1200px !important;
        &.ipad {
          background-size: cover !important;
        }
      }
      &.portrait {
        background-size: auto 1330px !important;
        &.ipad {
          background-size: cover !important;
        }
      }
    }
  }
}

@media all and (max-width: 850px) {
  .node-type-video {
    #promobar-wrapper {
      display: none;
    }
  }
}

@media all and (min-width: 768px) {
  body {
    .page-search,
    &.page-search-grouped {
      .pane-page-title {
        h1 {
          color: #fff;
        }
      }
    }
    .pane-subject-list {
      .view-subject-list {
        ul {
          li {
            &.subject-term-99,
            &.subject-term-549 {
              .views-field-name {
                .field-content {
                  a {
                    span {
                      &:first-child {
                        display: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    #panel-page-mathsplain-video {
      > .panel-col-first {
        margin-left: 0 !important;
        overflow: hidden;
        .pane-menu-block-1,
        .pane-term-name,
        div[class*="pane-views-"] {
          h1,
          .pane-title {
            left: auto !important;
          }
        }
        .panel-pane:first-child {
          margin-top: 40px;
        }
      }
      > .panel-col-last {
        > .inside {
          .pane-term-name {
            display: block;
            margin: -60px 24px 60px 0;
            padding-left: 4px;
            > .pane-content {
              background: rgba(0,0,0,0.2);
            }
            h1 {
              background: none;
              padding: 20px;
              font-size: 18px;
            }
          }
        }
      }
      .slider-header {
        display: none;
      }
      .pane-videos,
      .pane-clone-of-videos,
      .pane-search-by-category-panel-pane-1 {
        margin-bottom: 20px;
        .view-videos,
        .view-clone-of-videos,
        .view-id-search_by_category {
          .view-header {
            .isotope-options {
              .isotope-filters {
                li {
                  border-top: 3px solid rgba(0,0,0,0);
                  a {
                    color: #fff !important;
                  }
                  &.current {
                    border-top: 3px solid #fff !important;
                  }
                  &.video {
                    a {
                      &:before {
                        background: inline-image('../images/icon-video-white.svg') no-repeat center center !important;
                        background-size: auto 28px !important;
                      }
                    }
                  }
                  &.pdf {
                    a {
                      &:before {
                        background: inline-image('../images/icon-pdf-white.svg') no-repeat center center !important;
                        background-size: auto 28px !important;
                      }
                    }
                  }
                  &.quiz {
                    a {
                      &:before {
                        background: inline-image('../images/icon-quiz-white.svg') no-repeat center center !important;
                        background-size: auto 28px !important;
                      }
                    }
                  }
                  &.exercises {
                    a {
                      &:before {
                        background: url('../images/icon-cap-white.svg') no-repeat center center !important;
                        background-size: auto 28px !important;
                      }
                    }
                  }
                  &.new-exercises {
                    a {
                      &:before {
                        background: url('../images/icon-exercises-white.svg') no-repeat center center !important;
                        background-size: auto 28px !important;
                      }
                    }
                  }
                  &.formula {
                    a {
                      &:before {
                        background: url('../images/icon-formulas-white.svg') no-repeat center center !important;
                        background-size: auto 28px !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .node {
      &.node-video {
        &.view-mode-full {
          .to-fullscreen {
            width: 100% !important;
            max-width: 1000px;
            &.in-fullscreen {
              max-width: 100%;
            }
          }
        }
      }
    }
    .hurray {
      .row {
        &.row-1 {
          iframe {
            position: absolute;
            height: 100%;
          }
        }
      }
    }
    &.landing-page {
      .pane-page-title,
      .pane-page-content {
        & > .pane-content {
          margin: 0;
        }
      }
    }
    &.search-by-category {
      #panel-page-mathsplain-video {
        > .panel-col-last {
          > .inside {
            .pane-term-name {
              display: none;
            }
          }
        }
        .menu-name-menu-category-menu {
          ul.menu {
            li {
              a.active {
                color: #fff;
                background: none;
                padding-left: 0;
                margin-left: 0;
                &:hover {
                  color: $text;
                  background: #fff;
                  padding-left: 14px;
                  margin-left: -14px;
                }
              }
            }
          }
        }
      }
    }
  }
  .view-syllabus {
    &.view-display-id-page_1 {
      .views-row {
        position: relative;
        perspective: 1000px;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        background: none;
        .views-field-field-subject-name,
        .views-field-field-related-categories {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          transition: transform 0.6s;
          transform-style: preserve-3d;
          transform: rotateY(0deg);
          background: $topic-green;
        }
        .views-field-field-related-categories {
          transform: rotateY(-180deg);
          padding: 10px;
          text-align: center;
          box-sizing: border-box;
          display: flex !important;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          .field-content {
            padding-top: 20px;
            a {
              color: #fff;
              &:hover,
              &:focus {
                text-decoration: underline;
              }
            }
          }
        }
        &:hover,
        &.hover {
          background: none;
          .views-field-field-subject-name,
          .views-field-field-related-categories {
            background: $topic-darkgreen;
          }
          .views-field-field-subject-name {
            transform: rotateY(180deg);
          }
          .views-field-field-related-categories {
            transform: rotateY(0deg);
          }
        }
        &.direct-course {
          transition: none;
          transform: none;
          .views-field-field-subject-name,
          .views-field-field-related-categories {
            transition: none;
            transform: none;
          }
          .views-field-field-related-categories {
            display: none !important;
          }
        }
      }
    }
  }
  .subject-term {
    background: url('../images/BRIDGEBIG1600.jpg') no-repeat center top;
    background-attachment: fixed;
    &.touch-device {
      &:before {
        background: url('../images/BRIDGEBIG1600.jpg') no-repeat center top;
        background-size: cover;
      }
    }
  }
}

@media all and (max-width: 767px) {
  .padding-side {
    padding-left: 20px;
    padding-right: 20px;
  }
  .col-33 {
    &:nth-child(odd),
    &:nth-child(even) {
      margin: 0;
      width: 100%;
    }
  }
  .form-item-25 {
    width: 49%;
  }
  .form-item-50,
  .form-item-50-last {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .pane-mathsplain-our-video,
  .front-text-pane {
    font-size: 20px;
  }
  .video-flack-mobile {
    display: table;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid $extralight-gray;
    height: 48px;
    .video-box {
      a {
        display: table;
        width: 100%;
        position: relative;
        clear: both;
        .video-box-header {
          padding: 0px 0;
          width: 68px;
          min-width: 68px;
          height: 48px;
          line-height: 1em;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          position: static;
          &:before,
          &:after {
            display: none;
          }
          .video-box-header-number {
            font-size: 30px;
            line-height: 47px;
            border-bottom: 0;
            padding: 0;
            color: $text;
            border-right: 2px solid $gray;
            &:after {
              display: none;
            }
          }
          .video-box-header-icons {
            position: absolute;
            margin: 0;
            right: 20px;
            top: 0;
            & > div {
              line-height: 68px;
            }
          }
        }
        &:hover {
          .video-box-header {
            background: $hover;
          }
        }
      }
      .video-box-content {
        font-size: 20px;
        color: $text;
        font-family: 'Raleway';
        display: table-cell;
        vertical-align: middle;
        height: 48px;
        padding: 10px 38px 10px 15px;
      }
      .video-box-footer {
        display: none;
      }
      &.understood {
        .video-box-header {
          position: relative;
        }
        .video-box-content {
          &:after {
            width: 50px;
            height: 50px;
            right: -8px;
            bottom: -8px;
          }
        }
      }
      &.test {
        .video-box-header-number {
          background-image: url('../images/icon-quiz-white.svg');
          background-position: center center;
          background-size: 50%;
          background-repeat: no-repeat;
          &:before {
            display: none;
          }
        }
      }
    }
  }
  .mobile-menu-buttons {
    display: block;
    visibility: hidden;
    max-height: 0;
    max-width: 100vw;
    overflow: hidden;
  }
  .mobile-active-subject {
    display: table;
    width: 100%;
    font-size: 22px;
    font-family: 'Raleway';
    height: 68px;
    a {
      position: relative;
      display: table-cell;
      vertical-align: middle;
      color: $text !important;
      background: $hover;
      padding: 10px 28px 10px 90px;
      &:after {
        position: absolute;
        font-family: 'FontAwesome';
        right: auto;
        left: 28px;
        top: 34%;
        color: $topic-green;
        content: "\f053";
      }
    }
  }
  .subject-box-mobile-style {
    display: table;
    width: 100%;
    height: auto;
    margin: 0;
    color: $text;
    background: none;
    &:hover {
      background: none;
    }
  }
  .subject-box-link-mobile-style {
    display: table-cell;
    vertical-align: middle;
    height: 68px;
    padding: 0 0 0 90px;
    text-align: left;
    font-family: "Raleway";
    font-size: 22px;
    line-height: 1;
    text-transform: none;
    color: $text;
    background: $topic-gray;
    border-bottom: 1px solid $extralight-gray;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 68px;
      height: 67px;
      vertical-align: middle;
      line-height: 1;
      background: url('../images/icon-summa.svg') no-repeat center center;
      background-size: auto 35%;
      background-color: $topic-green;
    }
    &:hover {
      &:before {
        background-color: $topic-darkgreen;
      }
    }
  }
  .subject-icons-mobile-style {
    .col {
      display: table;
      width: 100%;
      height: auto;
      margin: 0;
      color: $text;
      a {
        display: table-cell;
        vertical-align: middle;
        height: 68px;
        padding: 0 0 0 90px;
        text-align: left;
        font-family: "Raleway";
        font-size: 22px;
        line-height: 1;
        text-transform: none;
        color: $text;
        background: $topic-gray;
        border-bottom: 1px solid $extralight-gray;
        position: relative;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          width: 68px;
          height: 67px;
          vertical-align: middle;
          line-height: 1;
          background: url('../images/icon-summa.svg') no-repeat center center;
          background-size: auto 35%;
          background-color: $topic-green;
        }
        &:hover {
          &:before {
            background-color: $topic-darkgreen;
          }
        }
      }
    }
  }
  .mob-hide {
    display: none;
  }
  .landing-row-fullwidth {
    margin-left: -20px;
    margin-right: -20px;
  }
  .lp-img-left,
  .lp-img-right {
    &:after {
      padding-top: 66%;
    }
  }
  .left-block,
  .right-block {
    padding-left: 20px;
    padding-right: 20px;
  }
  .img-middle {
    padding-top: 35px;
    padding-bottom: 50px;
    .image {
      padding-top: 65%;
    }
  }
  .style-lp1 {
    max-width: 500px;
    margin-bottom: 30px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      width: 50vw;
      height: 50vw;
      min-width: 200px;
      min-height: 200px;
      padding-top: 0;
      padding-bottom: 0;
      font-size: clamp(32px, 6vw, 40px);
    }
  }
  .landing-row {
    &.right {
      -webkit-justify-content: center;
      justify-content: center;
    }
  }
  .box,
  .box-20,
  .box-25,
  .box-30,
  .box-33,
  .box-40,
  .box-50,
  .box-60,
  .box-66,
  .box-70,
  .box-75,
  .box-80 {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .box-padding {
    padding: 15px;
  }
  .lp-white-box {
    padding: 20px;
  }
  .limited-wide {
    width: 100%;
    & > * {
      margin: 0 20px;
    }
  }
  #mathsplain-mycourses-isotope-container {
    text-align: center;
    .purchased,
    .unpurchased {
      max-width: 480px;
    }
  }
  .view-exercises-by-master-topic {
    .views-row {
      .node-exercises {
        .field-name-field-related-swiffy-entity {
          > div:first-child {
            text-align: center;
            .btn {
              margin-left: auto;
              margin-right: auto;
              width: 100%;
              max-width: 350px;
            }
          }
        }
      }
    }
  }
  .view-syllabus {
    &.view-display-id-page_1 {
      .view-content {
        margin-left: -20px;
        margin-right: -20px;
        > .ui-accordion-content {
          padding: 0;
        }
      }
      .group-caption {
        margin-top: 0;
        border-top: 1px solid $extralight-gray;
        &.ui-state-active {
          &:after {
            left: 50%;
            margin-left: -12px;
            margin-top: -18px;
          }
        }
      }
      .views-row {
        @extend .subject-box-mobile-style;
        .views-field-field-subject-name {
          position: relative;
          .field-content {
            display: table;
            width: 100%;
          }
          a {
            @extend .subject-box-link-mobile-style;
          }
        }
        .views-field-field-related-categories {
          background: none !important;
          > * {
            display: inline;
          }
          a {
            &:hover {
              text-decoration: underline;
            }
          }
        }
        &.direct-course {
          .views-field-field-related-categories {
            display: none;
          }
        }
      }
    }
  }
  .view-press {
    .splide {
      .splide__list {
        .splide__slide {
          max-width: 160px;
          .views-field-field-press-image {
            height: 80px;
          }
        }
      }
    }
  }
  #sliding-popup {
    .eu-cookie-compliance-categories {
      .eu-cookie-compliance-category {
        &:first-child {
          margin-top: 20px;
        }
        .eu-cookie-compliance-category-description,
        .eu-cookie-compliance-category-description-more-link {
          font-size: 14px;
        }
      }
      .eu-cookie-compliance-categories-buttons {
        margin-bottom: 20px;
      }
    }
    &.sliding-popup-top {
      #popup-text-and-info {
        -webkit-flex-flow: column;
        flex-flow: column;
      }
      .popup-content {
        width: 100%;
        #popup-text,
        #popup-buttons {
          display: table;
          padding-left: 0;
          max-width: none;
          margin-left: auto;
          margin-right: auto;
          float: none;
        }
        #popup-text {
          padding-top: 10px;
          & > div {
            padding-right: 0;
          }
          button {
            position: static;
            margin: 10px auto 0 auto;
            display: table;
            float: none;
          }
        }
        #popup-buttons {
          @include flexbox();
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
        }
      }
    }
  }
  #mathsplain-front-parallax-1,
  #mathsplain-front-parallax-2,
  #mathsplain-front-parallax-3,
  #mathsplain-front-parallax-4,
  #mathsplain-front-parallax-5,
  #mathsplain-front-parallax-6,
  #mathsplain-front-parallax-7 {
    height: 300px;
  }
  body {
    background: none;
    &:before {
      display: none;
    }
    #feedback_simple {
      display: none;
      height: 0;
    }
    .maths-panel-display {
      &.panel-2col {
        .panel-col-first,
        .panel-col-last {
          width: 100%;
        }
      }
    }
    .panels-flexible-2 {
      .panels-flexible-region {
        width: 100%;
      }
    }
    .image-rolo {
      .top,
      .bottom {
        display: none;
      }
    }
    form {
      .form-submit {
        padding: 20px 50px;
      }
    }
    .view-testimonials {
      .flexslider {
        .slides {
          li {
            max-width: calc(100vw - 40px);
          }
        }
      }
    }
    #panel-page-mathsplain-video {
      & > .panel-col-first {
        padding: 0;
        min-height: 0;
      }
      & > .panel-col-last {
        position: static;
        & > .inside {
          padding: 0;
        }
      }
      .pane-taxonomy-term-field-after-topics {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 0;
      }
      .pane-videos,
      .pane-clone-of-videos,
      .pane-search-by-category-panel-pane-1 {
        .view-videos,
        .view-clone-of-videos,
        .view-id-search_by_category {
          margin-top: 0;
          .view-header {
            background: $hover;
            .isotope-options {
              .isotope-filters {
                background: none;
                li {
                  border-right: 1px solid $gray;
                  height: auto;
                  background: none;
                  a {
                    color: $text;
                  }
                  &.current {
                    background: #fff;
                    border-top-color: $topic-green;
                  }
                  &.video {
                    a {
                      &:before {
                        background: url('../images/icon-video-green.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &.pdf {
                    a {
                      &:before {
                        background: url('../images/icon-pdf-green.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &.quiz {
                    a {
                      &:before {
                        background: url('../images/icon-quiz-green.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &:last-child {
                    border-right: none;
                  }
                }
              }
            }
          }
          .view-content {
            background: none;
            padding: 0;
          }
          #isotope-container {
            height: auto !important;
            .isotope-element {
              position: relative !important;
              top: 0 !important;
              left: 0 !important;
              transform: none !important;
              &.exercises,
              &.new-exercises,
              &.formula {
                span.MathJax {
                  font-size: 70%;
                }
                .btn {
                  font-size: 0.8em;
                }
              }
            }
          }
        }
      }
    }
    .pane-page-title {
      h1 {
        text-align: center;
        margin: 15px 0;
        font-size: 1.6em;
        line-height: 36px;
      }
    }
    .pane-mathsplain-our-video {
      & > .pane-content {
        margin-left: 20px;
        margin-right: 20px;
      }
    }
    .pane-subject-list {
      overflow: hidden;
      .pane-content {
        .view-subject-list {
          margin: 0;
          ul {
            li {
              float: none;
              display: table;
              width: 100%;
              background: $topic-gray;
              border-bottom: 1px solid $extralight-gray;
              &:first-child {
                border-top: 1px solid $extralight-gray;
              }
              .views-field-name {
                margin: 0;
                position: relative;
                .field-content {
                  width: 68px;
                  height: 68px;
                  display: block;
                  a {
                    padding: 0;
                    display: table-cell;
                    height: 68px;
                    width: 68px !important;
                    color: $text;
                    text-indent: 0;
                    position: static;
                    font-size: 22px;
                    //font-family: 'ProximaNovaLight';
                    font-family: 'Raleway';
                    &:after {
                      display: none;
                    }
                    span {
                      position: absolute;
                      width: calc(100% - 90px);
                      padding-left: 22px;
                      left: 68px;
                      height: 68px;
                      text-align: left;
                      @include flexbox();
                      -webkit-align-items: center;
                      align-items: center;
                    }
                    .bottom {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .pane-mathsplain-front-pane {
      position: relative;
      background-position: top right !important;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
      }
    }
    #mathsplain-front {
      height: auto;
      .head-wrap {
        height: auto !important;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0;
        padding: 40px 0 !important;
        #mathsplain-header-video-left-text {
          width: 100% !important;
          margin: 0;
          padding-bottom: 50px;
          text-align: center;
					.title {
						font-size: 37px;
					}
          .text,
          .slideshow {
            width: 100% !important;
						font-size: 24px;
          }
        }
        [id*="mathsplain-front-radial-button"] {
          top: 0;
          left: 0;
          margin: 0;
          position: relative;
        }
        .slideshow {
          .slideshow-item {
          left: 0;
          right: 0;
          margin: auto;
          }
        }
      }
      &.splash-on {
        #mathsplain-header-video-left-text {
          opacity: 0;
        }
        #mathsplain-front-radial-button {
          visibility: hidden;
        }
        #radial-links {
          position: fixed;
          top: 0;
          left: 0;
          height: 100%;
          max-height: 100vh;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          .radial-item {
            position: static;
            text-align: center;
            width: 50%;
            height: auto;
            box-sizing: border-box;
            &:after {
              display: none;
            }
            a {
              left: auto !important;
              top: auto !important;
              right: auto !important;
              bottom: auto !important;
              width: auto !important;
              padding-top: 40px;
              box-sizing: border-box;
              transition-delay: 0s;
              &:before {
                background-size: 30px 30px !important;
                background-position: center center !important;
              }
            }
          }
          .radial-close {
            top: 20px;
            right: 20px;
          }
        }
      }
    }
    .pane-mathsplain-header {
      .pane-mathsplain-header-1 {
        #mini-panel-mathsplain_header_1 {
          .panel-col-last {
            padding-right: 16px;
          }
        }
      }
      .pane-login-register-pane {
        padding-bottom: 200px;
        .panel-2col {
          .panel-col-first,
          .panel-col-last {
            width: 100%;
            .inside {
              margin: 0;
            }
          }
          .pane-user-login,
          #user-register-form {
            padding: 0;
            border: 0;
          }
        }
        form {
          .captcha {
            .form-item {
              &.form-item-captcha-response {
                .form-text {
                  width: 55%;
                  margin-right: 1%;
                }
              }
            }
          }
          .form-submit {
            width: 100%;
          }
        }
      }
    }
    #mini-panel-mathsplain_footer_logos {
      .barion {
        a {
          width: 41vw;
          height: 38px;
        }
      }
      .footer-logos-macroweb {
        a {
          width: 20vw;
          height: 30px;
        }
      }
    }
    .pane-mathsplain-footer-1 {
      .maths-panel-display {
        &.panel-3col-33-stacked {
          .center-wrapper {
            width: 100%;
            .panel-panel {
              width: 100%;
              display: table;
              margin: 0 auto 15px auto;
              padding: 0;
              clear: both;
              & > .inside {
                margin: 0;
              }
              &:after {
                position: static;
                width: 33px;
                height: 2px;
                display: table;
                margin: 0 auto;
              }
            }
          }
        }
      }
    }
    .node {
      &.node-formula,
      &.node-exercises {
        .field-name-field-related-swiffy-entity {
          .field-items {
            a {
              &::after {
                content: "\00a0";
                display: inline-block;
                padding-bottom: 5px;
                width: 0;
              }
            }
          }
        }
      }
      &.node-video {
        &.view-mode-full {
          ul.bc {
            font-size: 14px;
            padding-left: 35px;
            li {
              &:first-child {
                width: 16px;
              }
            }
          }
          .field-name-title-field {
            min-height: 17px;
            .field-item {
              max-width: 100vw;
              padding: 0 95px 0 65px;
            }
            h1 {
              font-size: 18px;
            }
          }
          .field-name-field-number {
            font-size: 20px;
            margin-left: 35px;
          }
          .field-name-field-category {
            .lineage-item {
              &.lineage-item-level-0 {
                a {
                  width: 28px;
                  height: 27px;
                  background-size: auto 17px;
                }
              }
            }
          }
          #fullscreen {
            width: 28px;
            background-size: auto 17px;
            margin-right: 33px;
          }
          #canvas-voice {
            width: 28px;
            margin-right: 66px;
            a {
              background-size: auto 20px;
            }
            &.muted {
              a {
                background-size: auto 20px;
              }
            }
          }
          .field-name-field-swiffy-entity,
          .field-name-field-h5p {
            min-height: 0;
            #animation_container,
            canvas,
            .h5p-iframe-wrapper {
              max-width: 100vw !important;
            }
          }
          .field-name-field-h5p {
            .help-layer {
              .info-layer {
                .description {
                  text-align: left;
                  p {
                    margin-top: 0;
                  }
                }
              }
            }
          }
          .no-access-wrapper {
            height: 50vw;
            min-height: 0;
            position: static;
            overflow: hidden;
            .no-access-field-description {
              min-height: 0;
              font-size: 36px;
              text-align: center;
            }
            .no-access-link {
              min-height: 0;
              & > div {
                min-height: 0;
                .left,
                .right {
                  display: block;
                  padding: 20px;
                  width: auto;
                }
                .left {
                  .title {
                    position: static;
                    margin-bottom: 0;
                    padding: 0;
                    border: none;
                    width: auto;
                    height: auto;
                    text-align: left;
                    &:before {
                      width: 35px;
                      height: 1em;
                      float: left;
                      margin-right: 5px;
                      background-position: left center !important;
                      background-size: contain !important;
                    }
                  }
                  .topic-summary,
                  .price {
                    display: none;
                  }
                }
                .right {
                  .commerce-add-to-cart {
                    position: static;
                    margin-top: 30px;
                    .form-submit {
                      padding: 10px 86px;
                    }
                  }
                  .description {
                    font-size: 14px;
                  }
                }
              }
              .video-register {
                padding: 10px 40px;
                font-size: 18px;
              }
            }
            &.show {
              height: auto;
            }
          }
          .help-layer {
            .radial-button {
              width: 80px;
              height: 80px;
              margin-left: -40px;
              margin-top: -40px;
            }
            .info-layer {
              .back,
              .step {
                width: 2.3vw;
                &:before {
                  background-size: 60% auto;
                  background-position: right 2px center;
                }
              }
              .step {
                margin-left: -2.3vw;
              }
              .back {
                margin-right: -2.3vw;
              }
              .play {
                background-size: auto 45%;
              }
              .keyboard,
              .line4 {
                display: none;
              }
            }
            .left {
              .no-video {
                .top {
                  font-size: 22px;
                }
                .bottom {
                  .txt {
                    padding-right: 45px;
                    font-size: 22px;
                  }
                }
              }
            }
            &.canvas {
              a.video {
                padding: 15px 0;
                .label {
                  font-size: 22px;
                }
              }
              .right {
                a.step-by-step {
                  .step-by-step {
                    width: 2.3vw;
                    height: 18.2vw;
                    .inner {
                      background-size: 60% auto;
                    }
                    &:before {
                      width: 13vw;
                    }
                  }
                  .label {
                    font-size: 22px;
                    margin-right: 5vw;
                  }
                }
              }
            }
            &.info {
              .info-layer {
                .line1 {
                  width: 35%;
                }
                .line2 {
                  width: 58%;
                }
                .line3 {
                  width: 47%;
                }
              }
            }
          }
          .closing-help-layer {
            font-size: 3vw;
            .left {
              .text {
                margin-left: 20px;
              }
              #back-arrow {
                width: 2.3vw;
                height: 18.2vw;
                margin-top: -10vw;
                &:before {
                  width: 13vw;
                }
                &:after {
                  background-size: 60% auto;
                  background-position: 4px center;
                }
              }
              .flag-understood {
                span.flag,
                span.flag input,
                span.flag .flag-throbber,
                span.flag:before,
                span.flag:after {
                  width: 13vw;
                  height: 13vw;
                  bottom: 25px;
                }
                span.flag {
                  margin-bottom: 25px;
                  label {
                    height: calc(100% - 13vw - 30px);
                  }
                }
              }
              .all {
                padding: 15px;
                span {
                  padding-left: 20px;
                  padding-right: 20px;
                }
              }
              a.video-register {
                width: 13vw;
                height: 13vw;
                font-size: 1.9vw;
              }
            }
            .right {
              .next {
                .arrow {
                  width: 12px;
                  right: 12px;
                }
                .label {
                  padding-right: 40px;
                }
              }
              .nomore {
                padding-right: 10px;
              }
            }
          }
          .in-fullscreen {
            #fullscreen {
              background-size: auto 17px;
            }
            .field-name-title-field {
              .field-item {
                padding-left: 36px;
              }
            }
            .field-name-field-swiffy-entity,
            .field-name-field-h5p {
              top: 35px;
              max-height: calc(100% - 35px);
              #swiffycontainer,
              #swiffycontainer2,
              #animation_container {
                top: 35px;
              }
              .node-h5p-content {
                padding-top: 35px;
                max-height: calc(100% - 35px);
              }
            }
          }
        }
      }
    }
    .seo-text {
      color: $text;
      margin-bottom: 0;
      font-size: 16px;
      .opener {
        text-align: center;
        padding: 22px 0;
        color: #fff;
        font-size: 14px;
        background: $topic-cyan;
      }
      .content {
        background: none;
        padding: 0 20px;
      }
    }
    #comments {
      .comments-header,
      .comments-empty {
        background: none;
      }
      .comments-header {
        margin-top: 20px;
        .title {
          font-size: 16px;
          margin-top: -22px;
          &.button {
            a {
              font-size: 18px;
            }
          }
        }
        .links {
          font-size: 14px;
          display: none;
          li {
            display: inline;
          }
        }
        .swiffy-entity-text-content-wrapper {
          display: none;
        }
      }
      .comments-empty {
        display: none;
        font-size: 14px;
        display: none;
      }
      .comment {
        margin: 10px 0;
        font-size: 12px;
        display: none;
        .submitted {
          background: $hover;
          color: $text;
          padding: 5px 10px;
          a {
           font-size: inherit;
          }
        }
        .content {
          font-size: 12px;
        }
      }
      &.open {
        .comments-header {
          .links {
            display: inline;
          }
        }
        .comment,
        .comments-empty {
          display: block;
        }
      }
    }
    .member {
      img {
        float: none;
      }
    }
    &.page-taxonomy-term,
    &.page-node:not(.node-type-video),
    &.page-search,
    &.page-search-grouped {
      background: none !important;
    }
    &.page-taxonomy-term,
    &.node-type-video,
    &.page-search,
    &.page-search-grouped {
      .pane-page-content {
        & > .pane-content {
          margin: 0;
        }
      }
    }
    &.node-type-video {
      .pane-page-content {
        .panels-flexible-region-inside {
          .pane-video-descriptions {
            display: none;
            height: 0;
          }
        }
      }
    }
    &.section-matematika-feladatgyujtemeny {
      .pane-page-content {
        & > .pane-content {
          padding: 0 20px;
          box-sizing: border-box;
        }
      }
    }
    &.page-taxonomy-term {
      .pane-page-content {
        & > .pane-content {
          width: 100%;
          position: relative;
          overflow: hidden;
        }
      }
      &.article-categories {
        .pane-page-content {
          & > .pane-content {
            margin: 0 20px;
            width: auto;
          }
        }
      }
      #panel-page-mathsplain-video {
        width: 200%;
        position: relative;
        & > .panel-panel {
          width: 50%;
          position: relative;
          top: 0;
          float: left;
        }
        > .panel-col-first {
          .pane-menu-block-1,
          .pane-term-name,
          div[class*="pane-views-"] {
            h1,
            .pane-title {
              text-indent: 0;
            }
          }
        }
        .pane-menu-block-1,
        .pane-term-name,
        div[class*="pane-views-"] {
          margin: 0;
          h1,
          .pane-title {
            background: $topic-gray;
            color: $text;
            padding: 0;
            margin: 0;
            height: 68px;
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            width: 100%;
            font-size: 22px;
            text-indent: 0;
            position: relative;
            z-index: 2;
            @include box-shadow(0,2px,6px,$light-gray);
            a {
              color: $text;
              &:after {
                display: none;
              }
            }
            &:before {
              display: block;
              margin-right: 22px;
              min-width: 68px;
            }
            &:after {
              display: none;
            }
          }
          .menu-name-menu-category-menu {
            ul {
              margin: 0;
              li {
                display: table;
                margin: 0;
                width: 100%;
                background: $hover;
                border-bottom: 1px solid $extralight-gray;
                font-size: 22px;
                //font-family: 'ProximaNovaLight';
                font-family: 'Raleway';
                height: 68px;
                a {
                  display: table-cell;
                  vertical-align: middle;
                  color: $text;
                  padding: 10px 45px 10px 30px;
                  position: relative;
                  &:after {
                    font-family: 'FontAwesome';
                    content: "\f054";
                    position: absolute;
                    right: 20px;
                    top: 34%;
                    color: $topic-green;
                  }
                  &.active {
                    background: none;
                  }
                }
              }
            }
          }
        }
        form[id*="search-by-category"] {
          border-bottom: 1px solid $extralight-gray;
          padding: 20px 30px;
          margin-left: 0;
          .views-exposed-widgets {
            .views-exposed-widget {
              .form-text {
                width: 100%;
              }
            }
          }
        }
        .help-layer {
          display: none;
          #mini-panel-subject_term_panel {
            .pane-taxonomy-term-product-commerce-price {
              .field-name-commerce-price {
                box-sizing: border-box;
                top: 100%;
                right: auto;
                left: 0;
                bottom: auto;
                width: 100%; //auto;
                height: auto; //20px;
                margin: 80px 10px 0 0;
                padding: 0 10px;
                //padding-left: 2%;
                color: $gray;
                font-size: 18px;
                text-align: center;
                //border-left: 2px solid #fff;
                pointer-events: none;
                z-index: 3;
              }
            }
            .pane-taxonomy-term-field-product {
              margin: 0;
              padding-bottom: 60px;
              .commerce-add-to-cart {
                position: relative;
                z-index: 2;
                width: 100%;
                margin: 0;
                float: none;
                .form-submit {
                  padding: 22px 10px;
                  text-align: center;
                  text-transform: uppercase;
                  font-size: 20px;
                  box-shadow: 0 5px 10px $lighter-gray;
                }
              }
            }
            .pane-fix-i-need-this-too-button {
              display: block;
            }
            #mathsplain-login-pane-opener-anon-purchase {
              box-shadow: 0 5px 10px $lighter-gray;
              .pane-content {
                position: relative;
                z-index: 2;
                width: 100%;
                margin: 0;
              }
              button {
                padding: 22px 10px; //22px 52% 22px 0;
                text-align: center;
                text-transform: uppercase;
                font-size: 20px;
              }
            }
            .pane-taxonomy-term-field-table-of-contents {
              display: inline-block;
              width: 100%;
              margin-top: 60px;
              .field-name-field-table-of-contents {
                .button {
                  position: static;
                  margin: 0;
                  padding: 20px;
                  display: inline-block;
                  width: 100%;
                  font-weight: bold;
                  box-sizing: border-box;
                  background-color: $hover;
                  a {
                    width: 100%;
                    padding: 22px 0;
                    background: none;
                  }
                }
                .field-items {
                  background: none;
                  color: $text;
                  .word-link {
                    color: $text;
                  }
                }
              }
            }
          }
        }
        .pane-mathsplain-subject-seo-text-pane-pane {
          display: inline-block;
          width: 100%;
          padding: 0;
        }
        .pane-videos,
        .pane-clone-of-videos,
        .pane-search-by-category-panel-pane-1 {
          padding: 0;
          margin: 0;
          .view-videos,
          .view-clone-of-videos,
          .view-id-search_by_category {
            #isotope-container {
              .isotope-element {
                @extend .video-flack-mobile;
              }
            }
            .view-empty {
              color: $text;
              width: 100%;
              padding: 0;
              .slider-header {
                @extend .mobile-active-subject;
                margin-bottom: 20px;
              }
            }
          }
        }
        .slider-header {
          @extend .mobile-active-subject;
          margin-top: 68px;
          position: relative;
        }
      }
      &.subject-term-first-level {
        #panel-page-mathsplain-video {
          height: auto !important;
          .panel-col-last {
            float: none;
            clear: both;
            height: auto !important;
            .slider-header {
              display: none;
            }
            .help-layer {
              display: block;
              margin: 0;
              #mini-panel-subject_term_panel {
                .panel-pane {
                  &.right,
                  &.left {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
      &.toc-button-exists {
        #panel-page-mathsplain-video {
          .help-layer {
            #mini-panel-subject_term_panel {
              .pane-taxonomy-term-field-product {
                .commerce-add-to-cart {
                  width: 100%;
                  //width: 50%;
                  float: right;
                  .form-submit {
                    //border-left: 1px solid #fff;
                  }
                }
              }
            }
          }
        }
      }
      &.purchase-button-exists {
        #panel-page-mathsplain-video {
          .help-layer {
            #mini-panel-subject_term_panel {
              .pane-taxonomy-term-field-product {
                .commerce-add-to-cart {
                  float: none;
                }
              }
              .pane-taxonomy-term-field-table-of-contents {
                display: none;
                z-index: 1;
                .button {
                  width: 50%;
                }
              }
            }
          }
        }
      }
    }
    &.page-checkout {
      fieldset {
        &.cart_contents {
          table {
            tr {
              td {
                &.views-field-line-item-title {
                }
                &.views-field-line-item-id {
                  font-size: 16px;
                }
              }
            }
          }
          .views-field-commerce-unit-price,
          .views-field-commerce-order-total {
            .field-content {
              .price {
                font-size: 22px;
                .amount-suffix {
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
      form {
        &[id*="commerce-checkout-form-checkout"] {
          font-size: 14px;
          line-height: 1.5em;
        }
        .field-type-addressfield {
          clear: left;
          .addressfield-container-inline {
            width: 100%;
            margin-right: 0;
            clear: left;
          }
        }
        .commerce-coupon-code-wrapper {
          width: 49%;
          margin-right: 1%;
          float: left;
        }
      }
    }
    &.page-search,
    &.page-search-grouped {
      h1 {
        color: $text;
        margin-top: 60px;
      }
      .view-search {
        .view-header {
          color: $text;
          padding: 0 20px;
        }
        .view-content {
          margin-top: 20px;
        }
        .isotope-element {
          @extend .video-flack-mobile;
          &:first-child {
            border-top: 1px solid $extralight-gray;
          }
        }
        .accordion-content {
          width: 100%;
          .views-row {
            @extend .video-flack-mobile;
            &:first-child {
              border-top: 1px solid $extralight-gray;
            }
          }
        }
        .video-box {
          font-size: 0;
          .video-box-header {
            .video-box-header-number {
              padding: 0;
              height: 47px;
              .subject-icon {
                margin-top: 0;
                width: 68px;
                height: 100%;
                display: inline-block;
                position: absolute;
                left: 0;
                top: 0;
              }
            }
            .video-box-header-icons {
              font-size: 18px;
            }
          }
        }
        .view-empty {
          color: $text;
          font-size: 22px;
          text-align: center;
          padding: 0 20px 10px 20px;
        }
      }
    }
    &.search-by-category {
      #panel-page-mathsplain-video {
        .pane-menu-block-1 {
          position: relative;
          width: 100%;
          height: 0;
          left: -100vw;
          visibility: hidden;
        }
        .panel-col-last {
          position: relative;
          left: 0;
        }
        div[class*="pane-views"] {
          a.back {
            display: inline-block;
          }
        }
        form[id*="search-by-category"] {
          padding-left: 90px;
        }
        .pane-search-by-category-empty-text {
          .view-empty {
            color: $text;
            background: #fff;
          }
        }
        &.categories {
          .pane-menu-block-1 {
            left: 0;
            height: auto;
            visibility: visible;
            transition: left 0.5s;
            z-index: 2;
          }
          .panel-col-last {
            position: absolute;
            top: 151px;
            left: 100vw;
            transition: left 0.5s;
          }
          form[id*="search-by-category"] {
            padding-left: 30px;
          }
          div[class*="pane-views"] {
            a.back {
              display: none;
            }
          }
        }
      }
      .view-search-by-category {
        .view-empty {
          background: #fff;
          margin: 20px 0;
          padding: 0 20px !important;
        }
      }
      &[class*="parent-page-taxonomy"] {
        #panel-page-mathsplain-video {
          &.categories {
            .panel-col-last {
              top: 0;
            }
          }
        }
      }
    }
    &.section-szerezd-meg-a-hianyzo-tudast {
      .node {
        .field-name-body {
          .intro {
            text-align: center;
          }
        }
      }
    }
    .tabs {
      &.tabs-primary {
        border: none;
        .tabs-primary__tab {
          border: 1px solid $light-gray !important;
          margin: 0 5px 5px 0;
          @include hover-anim(null, null);
          a {
            padding: 12px 20px 9px 20px;
            background-color: #fff;
            &:hover {
              background-color: $hover2;
            }
          }
          &:hover {
            margin-top: 0;
            padding-bottom: 0;
          }
          &:last-child {
            border: 0;
          }
          &.is-active {
            margin: 0 5px 5px 0;
            border: 0;
            top: 0;
            a {
              padding-bottom: 9px;
              background: #fff;
              &:hover {
                background: #fff;
              }
            }
            &:hover {
              margin-top: 0;
              padding-bottom: 0;
            }
          }
        }
      }
    }
    .pager {
      margin: 0;
      position: relative;
      height: 68px;
      li {
        display: none;
        &.pager-previous,
        &.pager-next {
          display: inline-block;
          padding: 0;
          position: absolute;
          height: 100%;
          width: 67px;
          a {
            position: relative;
            text-indent: -9999px;
            display: inline-block;
            width: 68px;
            line-height: 68px;
            @include txt-shadow();
            &:after {
              position: absolute;
              left: 0;
              width: 68px;
              text-align: center;
              text-indent: 0;
              display: inline-block;
              font-family: 'FontAwesome';
              color: $light-gray;
              font-size: 44px;
            }
          }
        }
        &.pager-previous {
          left: 0;
          border-right: 1px solid $extralight-gray;
          a {
            &:after {
              content: "\f104";
            }
          }
        }
        &.pager-next {
          right: 0;
          border-left: 1px solid $extralight-gray;
          a {
            &:after {
              content: "\f105";
            }
          }
        }
      }
    }
    #formulas-tabs {
      ul.tabs {
        @include flexbox();
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        .tabs-primary__tab {
          -webkit-flex-grow: 1;
          flex-grow: 1;
        }
      }
    }
    .page-how-to {
      .section.they-say {
        width: 100%;
        margin: 0;
        .row {
          height: auto;
          .col {
            border: 0;
          }
          .small {
            display: none;
          }
          .large {
            width: 96%;
            padding: 3%;
          }
          &.buttons {
            .col {
              display: block;
              width: 100%;
              padding: 0;
              margin-bottom: 20px;
            }
          }
        }
      }
      .hurray {
        .row {
          margin: 0;
          .col {
            display: block;
            width: 100%;
            border: none;
            margin-bottom: 20px;
          }
          &.row-1,
          &.row-3 {
            .left {
              width: auto;
            }
          }
          &.row-3 {
            .left {
              margin-bottom: 0;
            }
          }
        }
      }
      .controls-options {
        .col {
          width: 100%;
          margin: 0 0 20px 0;
        }
        img {
          width: 100%;
        }
        .btn {
          width: auto;
          padding: 22px;
          margin: 0;
        }
        .text {
          min-height: 0;
        }
      }
    }
    .subject-icons {
      text-align: center;
      max-width: none !important;
      width: auto !important;
      margin: auto;
      .col {
        @extend .subject-box-mobile-style;
        a {
          @extend .subject-box-link-mobile-style;
        }
      }

      &.ui-accordion {
        .ui-accordion-header {
          margin-top: 0;
          padding: 0 20px;
          border-top: 1px solid $extralight-gray;
          display: table;
          width: 100%;
          height: 68px;
          box-sizing: border-box;
          h3 {
            font-size: 24px;
            display: table-cell;
            vertical-align: middle;
          }
          &.ui-state-active {
            padding: 0 20px;
            &:after {
              left: 50%;
              margin-left: -12px;
              margin-top: -18px;
            }
          }
        }
        .ui-accordion-content {
          padding: 0;
          margin-bottom: 0;
        }
      }
    }
    .page-nagykovet {
      .content-row {
        p, div {
          display: block;
          width: 100%;
          padding: 0;
          img {
            display: table;
            margin: auto;
          }
        }
      }
    }
    .page-erettsegi {
      .col {
        width: 100%;
        height: 68px;
        margin: 0;
        padding: 0 0 0 90px;
        background: none;
        color: $text;
        text-align: left;
        border-bottom: 1px solid $extralight-gray;
        position: relative;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-flex-flow: row;
        flex-flow: row;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 68px;
          height: 100%;
          line-height: 1;
          display: inline-block;
          text-align: center;
        }
        &:hover {
          background: none;
        }
      }
      a.col {
        &:before {

        }
      }
      .cyan {
        &:before {
          background-color: $topic-cyan;
        }
        &:hover {
          &:before {
            background-color: $topic-darkcyan;
          }
        }
      }
      .yellow {
        &:before {
          background-color: $topic-yellow;
        }
        &:hover {
          &:before {
            background-color: $topic-darkyellow;
          }
        }
      }
      .orange {
        &:before {
          background-color: $topic-orange;
        }
        &:hover {
          &:before {
            background-color: $topic-darkorange;
          }
        }
      }
      .green {
        &:before {
          background-color: $topic-green;
        }
        &:hover {
          &:before {
            background-color: $topic-darkgreen;
          }
        }
      }
      #tudas {
        h2 {
          height: 100px;
        }
      }
      div.list {
        margin-left: -20px;
        margin-right: -20px;
      }
    }
    &.front {
      .pane-subject-list {
        position: relative;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.5s;
        transition: max-height 0.5s;
      }
      .start-learning {
        padding-bottom: 0;
      }
      #mathsplain-front {
        padding-top: 68px;
        .head-wrap {
          -webkit-flex-flow: column;
          flex-flow: column;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          align-items: center;
          box-sizing: border-box;
          min-height: 90vh; //calc(100dvh - 68px);
          #mathsplain-header-video-left-text {
            padding: 0;
            h1.title {
              margin: 0 0 30px 0;
              padding: 0 20px;
            }
            &:before,
            &:after,
            .text,
            .slideshow {
              display: none;
            }
          }
          #mathsplain-front-radial-button,
          #radial-links {
            display: none;
          }
          .mobile-subjects-toggle {
            @include flexbox();
            position: relative;
            top: 0;
            left: 0;
            margin: 60px 0 100px 0;
          }
        }
      }
      div[class*="lp-"] {
        font-size: 20px;
      }
      .lp-1 {
        .style-lp1 {
          .title {
            font-size: clamp(32px, 6vw, 40px);
          }
        }
      }
      .lp-7 {
        .pane-content {
          .landing-row {
            padding: 0;
          }
        }
      }
      .view-testimonials {
        width: 100%;
        .view-footer {
          padding-left: 0;
          text-align: center;
        }
      }
      &.open-subjects {
        .pane-subject-list {
          max-height: 300vh;
          -webkit-transition: max-height 1s;
          transition: max-height 1s;
        }
        .mobile-menu-buttons {
          max-height: 100vh;
          margin-top: 68px;
          visibility: visible;
          -webkit-transition: max-height 0.5s;
          transition: max-height 0.5s;
        }
        #mathsplain-front {
          .head-wrap {
            min-height: 0;
            -webkit-transition: min-height 1s;
            transition: min-height 1s;
            #mathsplain-header-video-left-text {
              h1.title {
                margin: 40px 0;
              }
            }
            .mobile-subjects-toggle {
              visibility: hidden;
              height: 0;
              margin: 0;
              transition: height 0.5s, margin 0.5s;
            }
          }
        }
      }
    }
    &.not-front {
      .pane-subject-list {
        display: none;
      }
    }
    &.not-logged-in {
      .node {
        &.node-video {
          &.view-mode-full {
            .no-access-wrapper {
              .testimonials {
                max-width: 100vw;
              }
            }
          }
        }
      }
      &.page-taxonomy-term {
        #panel-page-mathsplain-video {
          .help-layer {
            #mini-panel-subject_term_panel {
              .pane-taxonomy-term-product-commerce-price {
                .field-name-commerce-price {
                  left: 0; //52%;
                }
              }
              #mathsplain-login-pane-opener-anon-purchase {
                button {
                  //padding-right: 50%;
                }
              }
            }
          }
        }
      }
    }
    &.page-node {
      .pane-page-content {
        .node {
          .subject-icons {
            margin-left: -20px;
            margin-right: -20px;
          }
        }
      }
    }
    &.page-welcome {
      .pane-page-content {
        .pane-content {
          margin: 0;
          h2 {
            font-size: 20px;
          }
        }
      }
      .welcome {
        padding: 0;
        > div {
          width: 100%;
          padding: 20px 0 0 0;
          background-color: $topic-gray;
          h1,
          p {
            padding: 0 20px;
          }
        }
        & ~ h2 {
          padding: 0 20px;
        }
        .purchase {
          h2 {
            padding: 0 20px;
          }
          > div:not(:only-child) {
            > a {
              padding-left: 80px;
            }
            .taxonomy-term {
              > div {
                -webkit-flex-flow: column;
                flex-flow: column;
                padding: 5px 0;
              }
            }
            .form-submit {
              margin: 2px 0 0 0;
              padding: 5px 10px;
            }
          }

        }
      }
      &:before {
        display: none;
      }
    }
    &.page-subscribe {
      .pane-page-content {
        > .pane-content {
          width: auto;
        }
      }
    }
    &.page-user-register {
      h1 {
        margin: 0.8em 0;
      }
      .pane-page-content {
        > .pane-content {
          width: auto;
        }
      }
    }
    &.landing-page {
      .pane-page-content {
        & > .pane-content {
          margin: 0;
        }
        .left-block,
        .right-block {
          padding-top: 35px;
          padding-bottom: 35px;
        }
        .panel-pane {
          font-size: 20px;
          .pane-content {
            max-width: none;
            box-sizing: border-box;
            padding: 0 20px;
            & > * {
              margin-left: 0;
              margin-right: 0;
            }
          }
        }
        .head {
          background-position: top right !important;
        }
        .lp-1 {
          &.v1 {
            h2 {
              text-align: center;
            }
            .style-lp1 {
              .title {
                font-size: clamp(22px, 5vw, 32px);
              }
            }
          }
        }
        .lp-6 {
          background-position: center bottom 25px;
          background-size: 70vw;
          padding-bottom: 80vw;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc((100% - 80vw) - 100px);
            background: url('../images/lp-bg-pattern-3.jpg') no-repeat center bottom;
            background-size: auto 76%;
          }
          .pane-content {
            > div {
              padding-left: 0;
              padding-right: 0;
            }
          }
          .landing-row {
            width: 100%;
            padding: 0 !important;
            &.border {
              [class*="box"] {
                padding: 15px;
              }
            }
          }
        }
        .lp-9 {
          .logos {
            a {
              width: 33.33%;
            }
          }
        }
        .lp-27 {
          .landing-row {
            &:first-child {
              padding-bottom: 100px;
              &:before {
                padding-top: 0;
                height: 495px;
                background-size: auto 100%;
              }
              &:after {
                left: calc(100% - 280px);
                height: 10px;
              }
              .box {
                &:first-child {
                  padding-left: 0;
                  padding-right: 0;
                }
              }
            }
            &:nth-child(2) {
              padding-top: 150px;
            }
          }
          &.in-viewport {
            .landing-row {
              &:first-child {
                &:after {
                  width: 135px;
                }
              }
            }
          }
        }
        .pane-mp-36 {
          h2.pane-title {
            text-align: left;
          }
        }
        .panel-pane {
          .subject-icons {
            margin-left: -20px;
            margin-right: -20px;
          }
					&.pane-mathsplain-front-pane {
						#mathsplain-front {
							#mathsplain-header-video-left-text {
								.title {
									font-size: 39px;
								}
								.text,
								.slideshow {
									font-size: 24px;
								}
							}
						}
					}
          &.section-1 {
            h1 {
              margin-top: 20px;
              line-height: 1.2em;
              text-align: center;
              font-size: 30px;
            }
            .button-bordered {
              margin: 0 auto 115px auto;
            }
            .right-block {
              .text {
                height: auto;
                p {
                  display: none;
                }
              }
            }
            .left-block {
              min-height: 285px;
              padding-bottom: 0;
            }
            #mathsplain-landing-1-video-play-button {
              margin-top: -90px;
            }
            &.video-play {
              .pane-content {
                padding: 0;
              }
              .left-block {
                min-height: 0;
              }
            }
          }
          &.section-5 {
            .image {
              padding-top: 50%;
            }
          }
          &.section-erettsegi {
            .left-block,
            .right-block {
              margin-left: 0 !important;
              margin-right: 0 !important;
              padding-left: 0;
              padding-right: 0;
            }
            [class*="row"] {
              font-size: 20px;
              .title {
                padding-top: 40px;
                padding-bottom: 40px;
                padding-left: 20px;
                padding-right: 20px;
                margin-bottom: 50px;
              }
              .buttons {
                [class*="button"] {
                  margin-left: 0;
                  margin-right: 0;
                }
              }
            }
            .row-1 {
              .cont {
                .image {
                  padding-top: 65%;
                }
              }
            }
            .row-2 {
              .cont {
                .bar-chart {
                  margin-bottom: 10px;
                }
              }
            }
            .row-3 {
              .title {
                margin-bottom: 0;
                & + .cont {
                  .left-block {
                    padding-top: 50px;
                  }
                }
              }
              .cont-3 {
                .ckeditor-accordion-container {
                  dl {
                    dt {
                      .ckeditor-accordion-toggler{
                        font-size: 22px;
                        padding: 20px 20px 20px 60px;
                        background-position: 10px center;
                      }
                    }
                  }
                }
              }
            }
            .ckeditor-accordion-container {
              & > dl {
                margin: 0 !important;
              }
              ol {
                li {
                  &:before {
                    width: 100px;
                    height: 100px;
                    min-width: 100px;
                    line-height: 100px;
                  }
                }
              }
            }
          }
          &.lp-hero {
            font-size: 20px;
            h1 {
              font-size: 39px;
            }
          }
          &.lp-10 {
            @extend .padding-side;
          }
        }

        .bar-chart {
          h2 {
            font-size: 26px;
          }
        }
        #why-good {
          &:target {
            margin-top: 0;
            padding-top: 20px;
          }
        }
      }
      &.parents,
      &.students,
      &.online-gimis,
      &.online-egyetemi,
      &.egyetem-tipp,
      &.mire-jo,
      &.miert-tanulunk-matekot {
        .pane-page-content {
          .head {
            background-position: top center !important;
            text-align: center;
            padding-top: 128px;
            padding-bottom: 60px;
            &:before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.5);
            }
            h1, p {
              width: 100%;
            }
          }
          .lp-3 {
            color: #fff;
            padding: 0;
            .landing-row {
              padding-top: 30px;
              padding-bottom: 30px;
            }
            * {
              color: #fff;
            }
            .image {
              background-size: cover;
              margin: 0;
              left: 50%;
              bottom: auto;
              border-radius: 0;
              width: 100vw;
              height: 100%;
              z-index: -1;
              -webkit-transform: translateX(-50vw);
              transform: translateX(-50vw);
              &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
              }
            }
          }

          .pane-testimonials {
            .view-testimonials {
              width: 100%;
            }
          }
        }
      }
      &.egyetem-megoldas,
      &.gimis-megoldas,
      &.szulo-megoldas,
      &.final-exam-2023,
      &.altisk,
      &.jegyjavitas,
      &.nyolcadikos-felv,
      &.elmeny,
      &.tanari {
        .pane-page-content {
          .head {
            &:before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.5);
            }
          }
        }
      }
      &.egyetem-tipp-2023 {
        .pane-page-content {
          .head {
            background-position: top center !important;
            text-align: center;
            padding-top: 128px;
            padding-bottom: 60px;
          }
        }
      }
      &.final-exam-2023,
      &.final-exam-advanced {
        .pane-page-content {
          .section-erettsegi.panel-pane {
            div[class*="row"] {
              .cont {
                > * {
                  margin-left: 0;
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
      &.mire-jo,
      &.miert-tanulunk-matekot {
        .pane-page-content {
          .head {
            h1 {
              font-size: 1.875em;
            }
            h1,
            p {
              width: 100%;
            }
          }
        }
      }
      &.gdpr {
        .pane-page-content {
          .gdpr-section-3 {
            background: $hover;
            .image {
              padding-top: 70%;
              background-position: center center;
            }
          }
          .gdpr-section-6 {
            padding-top: 90px;
          }
        }
      }
    }
    &.section-altalanos-szerzodesi-feltetelek-es-adatvedelmi-iranyelvek,
    &.page-node-25,
    &.page-node-15,
    &.page-node-7323 {
      .node {
        .field-name-body {
          .section-title {
            padding: 40px 0;
          }
        }
      }
    }
    &.page-404-page,
    &.page-403-page {
      .pane-page-content {
        padding: 0;
        & > .pane-content {
          margin: 0;
        }
        .panel-pane {
          &.message,
          &.subjects {
            font-size: 20px;
          }
          &.message {
            padding-bottom: 200px;
            background-size: auto 130px;
          }
          &.subjects {
            & > .pane-content {
              padding-left: 0;
              padding-right: 0;
              p:first-child {
                padding: 0 20px;
                text-align: center;
              }
            }
            .subject-icons {
              width: 100% !important;
              .col {
                @extend .subject-box-mobile-style;
                a {
                  @extend .subject-box-link-mobile-style;
                }
                &:first-child {
                  a {
                    border-top: 1px solid $extralight-gray;
                  }
                }
              }
            }
          }
        }
      }
    }
    &.page-403-page {
      .pane-page-content {
        .panel-pane {
          &.message {
            padding-bottom: 0;
            background-size: auto;
            &:before {
              background-size: 370px;
            }
            .pane-content {
              h2 {
                font-size: 40px;
                margin: 20px 0 0 0;
              }
              .tex2jax {
                padding: 0;
                justify-content: flex-start;
              }
            }
          }
        }
      }
    }
    &.touch-device {
      .pane-mathsplain-front-pane {
        background-position: right center !important;
      }
    }
  }
}

@media screen and (max-width:767px) and (max-height:400px) {
  #mathsplain-front {
    &.splash-on {
      #radial-links {
        .radial-item {
          a {
            font-size: 16px;
          }
        }
      }
    }
  }
  body.front {
    #mathsplain-front {
      .head-wrap {
        min-height: 0;
        padding: 30px 0 !important;
      }
    }
  }
}

@media all and (max-width: 767px) and (orientation: portrait) {
  .node-type-video {
    .pane-page-content {
      .pane-node {
        position: relative;
        padding-bottom: 40vw !important;
        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40vw;
          margin-top: -20px;
        }
      }
    }
  }
}

@media all and (max-width: 639px) {
  body {
    #panel-page-mathsplain-video {
      .pane-videos,
      .pane-clone-of-videos,
      .pane-search-by-category-panel-pane-1 {
        .view-videos,
        .view-clone-of-videos,
        .view-id-search_by_category {
          .view-header {
            .isotope-options {
              .isotope-filters {
                li {
                  height: auto;
                  a {
                    display: table;
                    height: auto;
                    padding: 8px 0;
                    text-align: center;
                    &:before {
                      display: inline-block;
                      width: 100% !important;
                      height: 32px;
                      margin: 0;
                      padding: 0 !important;

                    }
                    span {
                      display: block;
                      font-size: 10px;
                      line-height: 1em;
                      text-align: center;
                    }
                  }
                  &.pdf {
                    a {
                      &:before {
                        background-size: auto 28px !important;
                      }
                    }
                  }
                }
                &.tabs-v {
                  li {
                    a {
                      &:before {
                        height: 28px;
                        background-size: contain !important;
                        margin: 0 0 5px 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .node.node-video {
      &.view-mode-full {
        .help-layer {
          .left {
            .no-video {
              .top {
                font-size: 20px;
              }
              .bottom {
                .txt {
                  font-size: 20px;
                }
              }
            }
          }
          &.canvas {
            .right {
              a.step-by-step {
                .label {
                  font-size: 20px;
                }
              }
            }
          }
        }
      }
    }
    .page-erettsegi {
      div.list {
        .item {
          h3 {
            br {
              display: block;
            }
          }
          a[class*="button"] {
            flex-basis: 100%;
            width: 100%;
          }
        }
      }
    }
    &.landing-page {
      .pane-page-content {
        .lp-39 {
          .landing-row {
            .box {
              padding: 20px;
            }
          }
          .row-reg {
            .box {
              &:after {
                width: 130px;
                height: 50px;
                margin-bottom: -55px;
                margin-right: -20px;
              }
            }
            .btn {
              padding: 15px 30px;
              margin-bottom: 0;
              font-size: 20px;
            }
          }
        }
      }
      &.parents,
      &.students,
      &.online-gimis,
      &.online-egyetemi,
      &.egyetem-tipp,
      &.mire-jo,
      &.miert-tanulunk-matekot {
        .pane-page-content {
          .head {
            a[class*="button"] {
              padding: 10px 25px;
              font-size: 18px;
            }
          }
        }
      }
    }
    &.page-403-page {
      .pane-page-content {
        .panel-pane {
          &.message {
            &:before {
              background-size: 340px;
              background-position: center bottom;
            }
          }
        }
      }
    }
  }
}

@media all and (max-width: 560px) {
  .form-item-25 {
    width: 100%;
    margin-right: 0;
  }
  #mathsplain-mycourses-isotope-container {
    text-align: center;
    .purchased,
    .unpurchased {
      max-width: 240px;
    }
  }
  body {
    #mathsplain-front {
      .head-wrap {
        #mathsplain-header-video-left-text {
          .text,
          .slideshow {
            font-size: 24px;
          }
        }
      }
    }
    form {
      .form-submit {
        padding: 20px 30px;
      }
      &.answering-form {
        .form-actions {
          .quiz-back,
          .quiz-skip,
          .quiz-submit {
            margin-right: 0;
            width: 100%;
            &:after {
              display: none;
            }
          }
          #edit-navigation-back,
          #edit-navigation-skip,
          #edit-navigation-submit {
            padding: 12px 0;
            width: 100%;
          }
        }
      }
    }
    .node {
      &.node-video {
        &.view-mode-full {
          .field-name-title-field {
            .field-item {
              padding-left: 60px;
            }
            h1 {
              font-size: 14px;
              padding-top: 4px;
            }
          }
          .field-name-field-number {
            font-size: 16px;
          }
          .no-access-wrapper {
            .no-access-field-description {
              font-size: 14px;
            }
            .no-access-link {
              a {
                font-size: 16px;
                padding: 10px 20px;
              }
            }
          }
          .help-layer {
            .radial-button {
              width: 60px;
              height: 60px;
              margin-left: -30px;
              margin-top: -30px;
            }
            .info-layer {
              font-size: 14px;
              line-height: 1.2em;
              .play {
                bottom: 10px;
                left: 12px;
                background-size: auto 55%;
                span {
                  bottom: 90%;
                }
              }
            }
            .left {
              .no-video {
                .top {
                  font-size: 18px;
                  margin-left: 10px;
                }
                .bottom {
                  bottom: 10px;
                  .txt {
                    padding-left: 10px;
                    padding-right: 35px;
                    font-size: 18px;
                  }
                }
              }
            }
            &.canvas {
              a.video {
                padding: 10px 0;
                margin-left: 10px;
                .label {
                  font-size: 18px;
                  margin-left: 10px;
                }
              }
              .right {
                a {
                  font-weight: normal;
                  &.step-by-step {
                    .label {
                      font-size: 18px;
                    }
                    .step-by-step {
                      .inner {
                        background-position: right 1px center;
                      }
                    }
                  }
                }
              }
            }
            &.info {
              .info-layer {
                .line1 {
                  width: 34%;
                }
                .line2 {
                  width: 58%;
                }
              }
            }
          }
          .closing-help-layer {
            .left {
              #back-arrow {
                &:after {
                  background-position: 3px center;
                }
              }
              .text {
                white-space: normal;
                br {
                  display: none;
                }
              }
              .flag-understood {
                span.flag,
                span.flag input,
                span.flag .flag-throbber,
                span.flag:before,
                span.flag:after {
                  width: 12vw;
                  height: 12vw;
                  bottom: 4vw;
                }
                span.flag {
                  margin-bottom: 4vw;
                  label {
                    width: 90%;
                    height: calc(100% - 16vw);
                  }
                }
              }
              .all {
                padding: 10px;
              }
              .login-message {
                width: 90%;
              }
              a.video-register {
                border-width: 4px;
                margin-bottom: 3vw;
              }
            }
            .right {
              .next {
                .label {
                  padding-right: 30px;
                }
                .arrow {
                  width: 10px;
                  right: 10px;
                }
              }
            }
          }
          .in-fullscreen {
            .field-name-title-field {
              .field-item {
                padding-left: 30px;
              }
            }
            .field-name-field-swiffy-entity,
            .field-name-field-h5p {
              top: 31px;
              max-height: calc(100% - 31px);
              #swiffycontainer,
              #swiffycontainer2,
              #animation_container {
                top: 31px;
              }
              .node-h5p-content {
                padding-top: 31px;
                max-height: calc(100% - 31px);
              }
            }
          }
        }
      }
      &.node-article {
        &.node-teaser {
          .node-title {
            display: block;
            margin-bottom: 15px;
          }
          .field-name-field-image {
            float: none;
            margin: 0 0 10px 0;
            width: 100%;
            img {
              width: 100%;
            }
          }
        }
      }
      &.node-syllabus {
        &.view-mode-full {
          .field {
            a {
              display: inline-block;
              margin-top: 3px;
              margin-bottom: 3px;
            }
          }
        }
      }
    }
    .page-how-to {
      h2 {
        text-align: center;
      }
    }
    .page-erettsegi {
      #tudas {
        h2 {
          font-size: 26px;
          &:before {
            display: none;
          }
        }
      }
      .tudas-intro {
        font-size: 20px;
      }
    }
    .pane-mathsplain-footer-1 {
      .maths-panel-display {
        &.panel-3col-33-stacked {
          .center-wrapper {
            .panel-panel {
              &.panel-col-last {
                &:after {
                  display: inline-block;
                }
              }
            }
          }
        }
      }
      .footer-links {
        .using-the-site {
          span {
            display: block;
            float: none;
            text-align: center;
            border: none;
          }
        }
      }
    }
    #promobar-wrapper {
      width: 80vw;
      margin-left: -80vw;
      position: absolute;
      margin-top: 130px;
      #promobar-container {
        #promobar-content {
          padding: 10px;
          font-size: 18px;
          line-height: 1.2em;
          h2 {
            margin-bottom: 5px;
          }
          .field-name-field-read-more-button {
            margin-top: 13px;
            a {
              padding: 10px 0;
            }
          }
        }
      }
    }
    .pane-mathsplain-footer-1 {
      .panel-col-bottom2 {
        padding: 15px 0;
      }
    }
    #mini-panel-mathsplain_footer_logos {
      width: 100%;
      & > .panel-panel {
        display: table;
        margin: auto;
        width: 100%;
        & > .inside {
          & > .panel-pane {
            padding: 10px 0;
            .pane-content {
              margin: 0;
            }
            &:before {
              display: none;
            }
          }
        }
      }
      .barion {
        width: 100%;
        text-align: center;
        a {
          max-width: 312px;
          width: 100%;
        }
      }
      .footer-logos-macroweb {
        display: table;
        margin: auto;
      }
    }
    &.front {
      .view-testimonials {
        .flexslider {
          .slides {
            li {
              background-size: 40px auto;
              .views-field {
                margin-left: 65px;
              }
            }
          }
        }
      }
    }
    &.page-checkout {
      fieldset {
        legend {
          margin-right: 10px;
        }
        &.checkout-buttons {
          .form-submit {
            display: table;
            float: none;
            margin: 10px auto;
          }
        }
      }
      form {
        .commerce_coupon {
          .commerce-coupon-code-wrapper {
            width: 100%;
            margin-right: 0;
            float: none;
          }
          .form-submit {
            margin-top: 10px;
          }
        }
      }
    }
    &.landing-page {
      .pane-page-content {
        .panel-pane {
          .bar-chart {
            .button-bordered {
              font-size: 18px;
            }
          }
          &.section-4 {
            .pane-content {
              padding: 0;
              & > div {
                font-size: 12px;
                a {
                  &:before {
                    height: 60px;
                  }
                }
              }
            }
          }
          &.section-erettsegi {
            [class*="row"] {
              font-size: 18px;
              margin-bottom: 60px;
              h2 {
                font-size: 26px;
              }
              .buttons {
                [class*="button"] {
                  font-size: 20px;
                }
              }
            }
            .ckeditor-accordion-container {
              ol {
                li {
                  font-size: 20px;
                  &:before {
                    width: 80px;
                    height: 80px;
                    min-width: 80px;
                    line-height: 80px;
                    background-size: 40px auto !important;
                  }
                }
              }
            }
          }
          .bar-chart {
            h2 {
              font-size: 22px;
            }
          }
        }
      }
    }
    &.section-szerezd-meg-a-hianyzo-tudast {
      .node {
        .field-name-body {
          .intro {
            font-size: 20px;
            text-align: center;
          }
          .list {
            h2 {
              font-size: 20px;
              padding: 20px;
            }
          }
        }
      }
    }
  }
}

@media all and (min-width: 351px) and (max-width: 560px) {
  body {
    #comments {
      .comments-header {
        .title {
          font-size: 12px;
          margin-top: -20px;
          &.button {
            a {
              font-size: 14px;
            }
          }
        }
        .links {
          font-size: 11px;
        }
      }
      .comments-empty {
        font-size: 11px;
      }
      .comment {
        .submitted,
        .content {
          font-size: 11px;
        }
      }
    }
  }
}

@media all and (min-width: 320px) and (max-width: 767px) {

}

@media all and (max-width: 479px) {
  .menu-buttons-block {
    button {
      width: 100%;
      max-width: 300px;
      span {
        display: block;
      }
      &:before {
        left: 10px;
        width: 70px;
      }
      &[data-menu="toggle-elementary-menu"] {
        &:before {
          background-size: auto 50px;
        }
      }
      &[data-menu="toggle-highschool-menu"] {
        &:before {
          background-size: auto 50px;
        }
      }
      &[data-menu="toggle-university-menu"] {
        &:before {
          background-size: auto 34px;
        }
      }
    }
  }
  #panel-page-mathsplain-video {
    .pane-videos {
      .view-videos {
        .isotope-element {
          &.exercises,
          &.new-exercises,
          &.formula {
            .download-pdf-collection {
              .subject-link,
              .topic-link {
                display: block;
                p {
                  margin: 0 0 10px 0;
                }
              }
            }
          }
        }
      }
    }
  }
  .text-bigger {
    font-size: 1.1em;
  }
  .front {
    .lp-gyik {
      .ckeditor-accordion-container {
        > dl {
          > dt {
            a {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  body {
    #mathsplain-front {
      #mathsplain-header-video-left-text {
        .title {
          font-size: 28px;
        }
        .text,
        .slideshow {
          font-size: 22px;
        }
      }
    }
    .pane-mathsplain-footer-1 {
      .award {
        width: 260px;
        height: 340px;
        background-position: 0 0, 85px 0, 175px 0px, 0px 80px, 85px 80px, 175px 80px, 0px 160px, 85px 160px, 175px 160px, 0 240px, 85px 240px;
      }
    }
    .node {
      &.node-video {
        &.view-mode-full {
          .help-layer {
            .left {
              .no-video {
                .top {
                  font-size: 16px;
                }
                .bottom {
                  .txt {
                    font-size: 14px;
                  }
                }
              }
            }
            &.canvas {
              a.video {
                border-width: 1px;
                .label {
                  font-size: 14px;
                }
              }
              .right {
                a.step-by-step {
                  .label {
                    font-size: 14px;
                  }
                }
              }
            }
          }
          .closing-help-layer {
            .top {
              .text {
                br {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    .page-erettsegi {
      div.list {
        .item {
          h3 {
            font-size: 18px;
          }
        }
      }
    }
    &.landing-page {
      .pane-page-content {
        .lp-6 {
          &:before {
            background-size: contain;
          }
        }
        .lp-9 {
          .logos {
            a {
              width: 50%;
            }
          }
        }
        .lp-36,
        .lp-37,
        .lp-38 {
          .box {
            font-size: 22px;
          }
        }
        .lp-37 {
          .landing-row {
            &:before,
            &:after {
              width: 160px;
              top: -80%;
            }
          }
        }
        .lp-gyik {
          .ckeditor-accordion-container {
            > dl {
              > dt {
                a {
                  font-size: 20px;
                }
              }
            }
          }
        }
        .section-erettsegi {
          &.panel-pane {
            .row-3 {
              .cont-2 {
                .icon-cup {
                  padding-left: 20px;
                  padding-top: 30px;
                  padding-bottom: 30px;
                  &:before {
                    width: 100%;
                    height: 50px;
                    left: 0;
                    top: -30px;
                  }
                }
              }
            }
          }
        }
      }
      &.parents,
      &.students,
      &.online-gimis,
      &.online-egyetemi,
      &.egyetem-tipp,
      &.mire-jo,
      &.miert-tanulunk-matekot {
        h2,
        .h2-style {
          font-size: 30px;
        }
      }
    }
    &.landing-style-2 {
      h1 {
        font-size: clamp(27px, 7vw, 30px);
      }
      h2,
      .h2-style {
        font-size: 28px;
      }
      a.btn,
      a[class*="button"] {
        font-size: 18px;
      }
    }
    &.mire-jo {
      .head {
        &.pro-success {
          h1 {
            font-size: clamp(27px, 7vw, 30px);
          }
        }
      }
    }
    &.final-exam-2023 {
      h1 {
        font-size: clamp(27px, 8vw, 40px) !important;
      }
    }
    &.page-welcome {
      .welcome {
        .purchase {
          > div:not(:only-child) {
            > a {
              font-size: 16px;
            }
          }
        }
      }
    }
    &.page-403-page {
      .pane-page-content {
        .panel-pane {
          &.message {
            &:before {
              background-size: 80%;
            }
            .pane-content {
              h2 {
                font-size: 30px;
              }
              p {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
}

@media all and (max-width: 390px) {
  .menu-buttons-block {
    button {
      padding-left: 90px;
      &:after {
        left: 84px;
      }
      &:hover {
        padding-left: 110px;
      }
    }
  }
}

@media all and (max-width: 350px) {
  body {
    &.page-taxonomy-term {
      #panel-page-mathsplain-video {
        .pane-videos,
        .pane-clone-of-videos,
        .pane-search-by-category-panel-pane-1 {
          .view-videos,
          .view-clone-of-videos,
          .view-id-search_by_category {
            #isotope-container {
              .isotope-element {
                .video-box {
                  .video-box-header {
                    .video-box-header-icons {
                      display: none;
                    }
                  }
                  .video-box-content {
                    padding-left: 10px;
                    padding-right: 5px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .node {
      &.node-video {
        &.view-mode-full {
          .no-access-wrapper {
            .no-access-field-description {
              min-height: 85px;
              font-size: 10px;
            }
            .no-access-link {
              a {
                font-size: 14px;
                padding: 5px 15px;
              }
            }
          }
          .help-layer {
            .left {
              .no-video {
                .top {
                  font-size: 10px;
                }
                .bottom {
                  font-size: 9px;
                }
              }
            }
          }
        }
      }
    }
    #comments {
      .comments-header {
        .title {
          font-size: 10px;
          margin-top: -18px;
          &.button {
            a {
              font-size: 10px;
            }
          }
        }
        .links {
          font-size: 9px;
        }
      }
      .comments-empty {
        font-size: 9px;
      }
      .comment {
        .submitted,
        .content {
          font-size: 9px;
        }
      }
    }
    .pane-mathsplain-header {
      .pane-login-register-pane {
        .form-actions {
          width: 100%;
        }
        .hybridauth-widget-wrapper {
          clear: both;
        }
      }
    }
    &.page-checkout {
      fieldset {
        &.cart_contents {
          line-height: 1.3em;
          font-size: 14px;
          table {
            tr {
              td {
                padding: 15px 10px;
              }
            }
          }
          .views-field-commerce-unit-price {
            .field-content {
              .price {
                font-size: 22px;
              }
            }
          }
        }
      }
    }
  }
}

@media all and (max-width: 319px) {
  body {
    width: 319px;
    overflow: auto;
  }
}

@media screen and (max-height: 479px) {
  #sliding-popup {
    .eu-cookie-compliance-categories {
      &.show {
        overflow: auto;
      }
    }
  }
}