@each $ico in vectors, integral1, integral2, integral3, gauss, diagram, gauss-diagram, triangle, building, notfind, summa, algebra, diszkretmatek, cap, rocket {
  $icon: summa;
  $titlebg-size: 90%;
  $title-padding: 50px;
  $title-valign: 'middle';
  $icon-bg-pos: 21px;
  $subj-menu-icon-height: 25px;
  $left-menu-icon-height: 41px;

  @if $ico == vectors {
    $icon: 'vectors';
    $icon-bg-pos: 17px;
    $title-padding: 60px;
  }
  @else if $ico == integral1 {
    $icon: 'integral1';
    $title-padding: 30px;
  }
  @else if $ico == integral2 {
    $icon: 'integral2';
    $title-padding: 40px;
  }
  @else if $ico == integral3 {
    $icon: 'integral3';
    $title-padding: 55px;
  }
  @else if $ico == gauss {
    $icon: 'gauss';
    $titlebg-size: 70%;
    $title-padding: 70px;
    $icon-bg-pos: 23px;
    $subj-menu-icon-height: 18px;
    $left-menu-icon-height: 32px;
  }
  @else if $ico == diagram {
    $icon: 'diagram';
    $title-padding: 45px;
    $icon-bg-pos: 16px;
    $subj-menu-icon-height: 27px;
    $title-valign: 'bottom';
  }
  @else if $ico == gauss-diagram {
    $icon: 'gauss-diagram';
    $title-padding: 70px;
    $icon-bg-pos: 20px;
    $subj-menu-icon-height: 22px;
    $title-valign: 'bottom';
  }
  @else if $ico == triangle {
    $icon: 'triangle';
    $titlebg-size: 80%;
    $title-padding: 60px;
    $subj-menu-icon-height: 21px;
    $left-menu-icon-height: 35px;
  }
  @else if $ico == cap {
    $icon: 'cap';
    $left-menu-icon-height: 30px;
    $title-padding: 60px;
    $icon-bg-pos: 19px;
  }
  @else if $ico == building {
    $icon: 'building';
  }
  @else if $ico == notfind {
    $icon: 'notfind';
  }
  @else if $ico == summa {
    $icon: 'summa';
  }
  @else if $ico == algebra {
    $icon: 'algebra';
  }
  @else if $ico == diszkretmatek {
    $icon: 'diszkretmatek';
  }
  @else if $ico == rocket {
    $icon: 'rocket';
    $subj-menu-icon-height: 34px;
  }

  .subject-icon-#{$ico} {
    background: inline-image('../images/icon-#{$icon}.svg') no-repeat;
  }
  .left-menu-style {
    nav,
    .item-list {
      ul {
        li.icon-#{$ico} {
          a {
            &:before {
              @extend .subject-icon-#{$ico};
              background-size: auto #{$subj-menu-icon-height};
              background-position: center center;
            }
          }
        }
      }
    }
  }

  body.icon-#{$ico} {
    #panel-page-mathsplain-video {
      .pane-menu-block-1,
      .pane-term-name,
      div[class*="pane-views-"] {
        h1,
        .pane-title {
          @extend .subject-icon-#{$ico};
          background-size: auto #{$left-menu-icon-height};
          background-position: left center;
          padding: 0 0 0 #{$title-padding};
          vertical-align: #{$title-valign};
          &:before {
            @extend .subject-icon-#{$ico};
            background-position: center center;
            background-size: auto #{$subj-menu-icon-height};
          }
        }
      }
      .pane-term-name,
      .pane-title {
        .subject_progress_container {
          left: #{$title-padding};
          .subject_progress_container_understood_percentage,
          .subject_progress_container_folded_percentage {
            width: #{$title-padding};
          }
        }
      }
      .pane-term-name {
        .subject_progress_container {
          width: calc( 100% - (#{$title-padding} + 16px) );
        }
      }
      .pane-title {
        .subject_progress_container {
          width: calc( 100% - #{$title-padding} );
        }
      }
    }
    .node {
      &.node-video {
        &.view-mode-full {
          .no-access-wrapper {
            .no-access-link {
              .left {
                .title {
                  &:before {
                    @extend .subject-icon-#{$ico};
                    background-position: center 20px;
                    background-size: auto 60px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .page-welcome {
    .welcome {
      .purchase {
        > div:only-child {
          &.icon-#{$ico} {
            a {
              @extend .subject-icon-#{$ico};
              background-repeat: no-repeat;
              background-position: center 70px;
              background-size: auto 30px;
            }
          }
        }
        > div:not(:only-child) {
          &.icon-#{$ico} {
            a {
              &:before {
                @extend .subject-icon-#{$ico};
                background-repeat: no-repeat;
                background-position: center center;
                background-size: auto 25px;
              }
            }
          }
        }
      }
    }
  }
  .page-checkout {
    fieldset {
      &.cart_contents {
        table {
          &.icon-#{$ico} {
            tr {
              td {
                &.views-field-line-item-title {
                  @extend .subject-icon-#{$ico};
                  background-position: center 25%;
                  background-size: auto #{$subj-menu-icon-height};
                }
              }
            }
          }
        }
      }
    }
  }
  .pane-subject-list {
    .view-subject-list {
      .view-content {
        ul {
          li {
            &.icon-#{$ico} {
              .field-content {
                a {
                  @extend .subject-icon-#{$ico};
                  background-position: center #{$icon-bg-pos};
                  background-size: auto #{$subj-menu-icon-height};
                }
              }
            }
          }
        }
      }
    }
  }
  .isotope-element {
    &.icon-#{$ico} {
      .isotope-link {
        a {
          @extend .subject-icon-#{$ico};
          background-size: auto 30px;
          background-position: center 70px;
        }
      }
    }
  }
  .view-search,
  .view-search-by-category {
    h3 {
      &.icon-#{$ico} {
        &:before {
          @extend .subject-icon-#{$ico};
          background-position: center center;
          background-size: auto 24px;
        }
      }
    }
    .video-box {
      &.icon-#{$ico} {
        .video-box-header {
          .video-box-header-number {
            .subject-icon {
              @extend .subject-icon-#{$ico};
              background-position: center center;
              background-size: auto #{$subj-menu-icon-height};
            }
          }
        }
      }
    }
  }

  .subject-icon-mobile-icon {
    div.#{$ico},
    div.icon-#{$ico} {
      a {
        &:before {
          background: $topic-green url("../images/icon-#{$icon}.svg") no-repeat center center;
          background-size: auto 35%;
        }
      }
    }
  }
  .subject-box.icon-#{$ico} {
    .subject-box-link {
      background-image: url("../images/icon-#{$icon}.svg");
      background-repeat: no-repeat;
      background-position: center 70px;
      background-size: auto 30px;
      &:before {
        background: $topic-green url("../images/icon-#{$icon}.svg") no-repeat center center;
        background-size: auto 35%;
      }
    }
  }
  div.subject-icons {
    @extend .subject-icon-mobile-icon;
    .#{$ico},
    .icon-#{$ico} {
      a {
        background: url("../images/icon-#{$icon}.svg") no-repeat center 70px;
        background-size: auto 30px;
      }
    }
  }
  body.page-404-page,
  body.page-403-page {
    .pane-page-content {
      .panel-pane {
        &.subjects {
          .subject-icons {
            @extend .subject-icon-mobile-icon;
          }
        }
      }
    }
  }


} //end each


@each $col in 'green', 'cyan', 'yellow', 'orange', 'gray', 'purple', 'brown' {
  $color: $topic-green;
  $dark-color: $topic-darkgreen;
  $color-name: 'green';

  @if $col == 'green' {
    $color: $topic-green;
    $dark-color: $topic-darkgreen;
    $color-name: 'green';
  }
  @else if $col == 'cyan' {
    $color: $topic-cyan;
    $dark-color: $topic-darkcyan;
    $color-name: 'cyan';
  }
  @else if $col == 'yellow' {
    $color: $topic-yellow;
    $dark-color: $topic-darkyellow;
    $color-name: 'yellow';
  }
  @else if $col == 'orange' {
    $color: $topic-orange;
    $dark-color: $topic-darkorange;
    $color-name: 'orange';
  }
  @else if $col == 'gray' {
    $color: $light-gray;
    $dark-color: $gray;
    $color-name: 'gray';
  }
  @else if $col == 'purple' {
    $color: $topic-purple;
    $dark-color: $topic-darkpurple;
    $color-name: 'purple';
  }
  @else if $col == 'brown' {
    $color: $topic-brown;
    $dark-color: $topic-darkbrown;
    $color-name: 'brown';
  }

  .info-icon-#{$col} {
    background: url('../images/icon-info-#{$color-name}.svg') no-repeat;
  }

  .bgcolor-#{$col} {
    background-color: $color;
    color: #fff;
  }

  .left-menu-style {
    nav,
    .item-list {
      ul {
        li.color-#{$col} {
          a {
            &:before {
              background-color: #{$color};
            }
            &:hover {
              &:before {
                background-color: #{$dark-color};
              }
            }
          }
        }
      }
    }
  }

  body.color-#{$col} {
    .pane-page-content {
      a {
        color: #{$color};
      }
      .button-cyan,
      .button-green,
      .button-yellow,
      .button-orange {
        color: #fff;
      }
      .btn {
        background-color: #{$color};
        color: #fff;
        &:hover {
          background-color: #{$dark-color};
        }
      }
    }
    #panel-page-mathsplain-video {
      .pane-videos,
      .pane-clone-of-videos {
        .view-videos,
        .view-clone-of-videos {
          .view-header {
            .isotope-options {
              .isotope-filters {
                li {
                  a {
                    color: #{$color};
                  }
                  &.current {
                    border-top: 3px solid #{$color};
                  }
                  &.video {
                    a {
                      &:before {
                        background: url('../images/icon-video-#{$color-name}.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &.pdf {
                    a {
                      &:before {
                        background: url('../images/icon-pdf-#{$color-name}.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &.quiz {
                    a {
                      &:before {
                        background: url('../images/icon-quiz-#{$color-name}.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &.exercises {
                    a {
                      &:before {
                        background: url('../images/icon-cap-#{$color-name}.svg?v=4') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &.new-exercises {
                    a {
                      &:before {
                        background: url('../images/icon-exercises-#{$color-name}.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                  &.formula {
                    a {
                      &:before {
                        background: url('../images/icon-formulas-#{$color-name}.svg') no-repeat center center;
                        background-size: auto 28px;
                      }
                    }
                  }
                }
              }
            }
          }
          #isotope-container {
            .isotope-element {
              &.new-exercises,
              &.formula {
                .number {
                  background-color: #{$color};
                  color: #fff;
                }
                a[class*="btn-"],
                a[class*="button-"] {
                  background-color: #{$color} !important;
                  &:hover {
                    background-color: #{$dark-color} !important;
                  }
                }
              }
            }
          }
        }
      }
      .pane-menu-block-1,
      .pane-term-name,
      div[class*="pane-views-"] {
        h1,
        .pane-title {
          &:before {
            background-color:#{$color};
          }
        }
        .menu-name-menu-category-menu {
          ul {
            &.menu {
              li {
                a {
                  &:after {
                    color: #{$color};
                  }
                }
              }
            }
          }
        }
      }
      .slider-header {
        a {
          &:after {
            color: #{$color} !important;
          }
        }
      }
      .ctools-collapsible-container {
        .view-extra-materials-for-learn-page {
          .isotope-element {
            background: #{$color};
          }
        }
      }
      .help-layer {
        #mini-panel-subject_term_panel {
          .left {
            background: #{$color};
            &:before {
              background: #{$color};
            }
          }
        }
      }
      .pane-taxonomy-term-field-product {
        .commerce-add-to-cart {
          .form-submit {
            background: #{$color};
            &:hover {
              background: #{$dark-color};
            }
          }
        }
      }
      .pane-fix-i-need-this-too-button {
        a[href="#megveszem"] {
          background: #{$color};
          &:hover {
            background: #{$dark-color};
          }
        }
      }
      #mathsplain-login-pane-opener-anon-purchase {
        button {
          background: #{$color};
          &:hover {
            background: #{$dark-color};
          }
        }
      }
      .pane-taxonomy-term-field-table-of-contents {
        .field-name-field-table-of-contents {
          .button {
            a {
              //background: #{$color};
            }
          }
        }
      }
    }
    .video-flack {
      .video-box {
        &.test {
          .video-box-header,
          .video-box-content,
          .video-box-footer {
            background-color: #{$color};
            color: #fff !important;
          }
          .video-box-header {
            .video-box-header-number {
              border-bottom-color: currentColor;
            }
          }
          a {
            &:hover {
              .video-box-header,
              .video-box-content,
              .video-box-footer {
                background: #{$dark-color};
              }
            }
          }
          &.folded {
            .video-box-header {
              background: none;
              &:before,
              &:after {
                background-color: #{$color};
              }
            }
            a {
              &:hover {
                .video-box-header {
                  background: none;
                  &:before,
                  &:after {
                    background-color: #{$dark-color};
                  }
                }
              }
            }
          }
          &.understood {
            .video-box-content {
              &:after {
                background-color: transparent;
                border: 2px solid rgba(255,255,255,0.7);
              }
            }
          }
        }
        &.understood {
          .video-box-content {
            &:after {
              background-color: #{$color};
            }
          }
        }
      }
    }
    .node {
      &.node-video {
        &.view-mode-full {
          ul.bc {
            color: #{$color};
            li {
              &:first-child {
                a {
                  background: url('../images/back-#{$color-name}.svg') no-repeat left center;
                  background-size: 100% auto;
                }
              }
            }
            &.collapse {
              li:not(.first) {
                a {
                  background: -webkit-linear-gradient(to right, $color 80%, rgba(0,0,0,0) 100%);
                  background: linear-gradient(to right, $color 80%, rgba(0,0,0,0) 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
              }
            }
          }
          .no-access-wrapper {
            .no-access-link {
              a {
                background: #{$color};
                &:hover {
                  background: #{$dark-color};
                }
              }
              .commerce-add-to-cart {
                .form-submit {
                  background: #{$color};
                  &:hover {
                    background: #{$dark-color};
                  }
                }
              }
              .left {
                background: #{$color};
              }
              .right {
                .description {
                  color: #{$color};
                }
              }
            }
          }
          .help-layer,
          .closing-help-layer {
            .help-layer-inner {
              background: #{$color};
            }
            .radial-button {
              &:before {
                background: #{$dark-color};
              }
            }
            .info-layer {
              .back,
              .step {
                &:before {
                  background-image: url('../images/video-step-#{$color-name}.svg');
                }
              }
              .keyboard {
                &:after {
                  background-image: url('../images/video-keys-#{$color-name}.svg');
                }
              }
              .play {
                background-image: url('../images/video-play-#{$color-name}.svg');
              }
            }
            &.canvas {
              a {
                &.video {
                  &:hover {
                    background-color: #{$dark-color};
                  }
                }
              }
            }
          }
          .help-layer {
            .left {
              color: #{$color};
              .text {
                color: #{$color};
              }
            }
          }
          .closing-help-layer {
            background: none;
            .left {
              background-color: #{$color};
              .flag-understood {
                span.flag {
                  background-color: #{$color};
                }
              }
              .all {
                &:hover {
                  .arrow {
                    background-color: #{$dark-color};
                  }
                }
              }
              a.video-register {
                &:after {
                  background-color: #{$color};
                }
              }
            }
            .right {
              color: #{$color};
              .next {
                .arrow {
                  background: url('../images/video-step-#{$color-name}.svg') no-repeat center center;
                  background-size: 100% auto;
                }
              }
            }
          }
          .field-name-field-h5p {
            .help-layer {
              .right {
                a {
                  &:hover {
                    background-color: #{$dark-color};
                  }
                }
              }
            }
          }
        }
      }
    }
    #comments {
      .comments-header {
        .title.button {
          a {
            background: #{$color};
          }
        }
      }
    }
    .ckeditor-accordion-container {
      & > dl {
        & > dt {
          background: #{$color};
          color: #fff;
          & > a {
            color: #fff;
          }
          &:hover,
          &.active {
            background: #{$dark-color};
          }
        }
      }
    }
    .view-exercises-by-master-topic {
      .views-row {
        .number {
          background-color: $color;
        }
      }
    }
    &.node-type-video {
      .pane-page-content {
        .pane-node {
          &:after {
            background: url('../images/icon-rotate-#{$color-name}.svg') no-repeat center top;
            background-size: auto 90%;
          }
        }
      }
    }
  }
  .master-topics {
    .color-#{$col} {
      .main-master-topic-header {
        background-color: #{$color};
        color: #fff;
        &:hover {
          background-color: #{$dark-color};
        }
        &.ui-state-active {
          background-color: #{$dark-color};
          &:after {
            background-color: #{$dark-color};
          }
        }
      }
      .main-master-topic-content {
        .formula {
          color: #{$color};
        }
        a {
          color: #{$color};
        }
      }
    }
  }
  .page-welcome {
    .welcome {
      .purchase {
        div.color-#{$col} {
          .form-submit {
            background-color: $color;
            &:hover {
              background-color: $dark-color;
            }
          }
        }
        > div:only-child {
          &.color-#{$col} {
            a {
              background-color: $color;
              color: #fff;
              &:hover {
                background-color: $dark-color;
              }
            }
          }
        }
        > div:not(:only-child) {
          &.color-#{$col} {
            a {
              &:before {
                background-color: $color;
              }
              &:hover {
                &:before {
                  background-color: $dark-color;
                }
              }
            }
          }
        }
      }
    }
  }
  .page-checkout {
    fieldset {
      &.cart_contents {
        table {
          &.color-#{$col} {
            tr {
              background: #{$color};
            }
          }
        }
      }
    }
  }
  .pane-subject-list {
    .view-subject-list {
      .view-content {
        ul {
          li {
            &.color-#{$col} {
              .field-content {
                background: #{$color};
                a {
                  .bottom {
                    background: #{$color};
                  }
                }
                &:hover {
                  background: #{$dark-color};
                  a {
                    .bottom {
                      background: #{$dark-color};
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .isotope-element {
    &.color-#{$col} {
      background-color: #{$color};
      .isotope-link {
        a {
          &:hover {
            background-color: #{$dark-color};
          }
        }
      }
    }
  }
  #mathsplain-mycourses-isotope-container {
    .isotope-element {
      &.color-#{$col} {
        background-color: #{$color};
        .isotope-link {
          a {
            &:hover {
              background-color: #{$dark-color};
            }
          }
        }
        .isotope-understood {
          a {
            background-color: #{$color};
            &:hover {
              background-color: #{$dark-color};
            }
          }
        }
      }
    }
  }
  .view-search {
    h3,
    .ui-accordion-header {
      &.color-#{$col} {
        background-color: #{$color};
        &.ui-state-active,
        &:hover {
          background-color: #{$dark-color};
        }
        &.ui-state-active {
          &:after {
            background-color: #{$dark-color};
          }
        }
      }
    }
    .isotope-element,
    .accordion-content {
      .video-box {
        &.color-#{$col} {
          .video-box-header {
            .video-box-header-icons {
              div {
                &:after {
                  color: #{$color};
                }
              }
            }
          }
        }
      }
    }
  }

  .#{$col} {
    background: #{$color};
    color: #fff;
    a {
      color: inherit;
    }
  }
  .subject-box.color-#{$col} {
    background: #{$color};
    &:hover {
      background: #{$dark-color};
    }
    .subject-box-link {
      &:before {
        background-color: #{$color};
      }
      &:hover {
        &:before {
          background-color: #{$dark-color};
        }
      }
    }
  }
  .subject-icon-mobile-color {
    div.#{$col},
    div.color-#{$col} {
      a {
        &:before {
          background-color: #{$color};
        }
        &:hover {
          &:before {
            background-color: #{$dark-color};
          }
        }
      }
    }
  }
  div.subject-icons {
    @extend .subject-icon-mobile-color;
    .#{$col},
    .color-#{$col} {
      background: #{$color};
      &:hover {
        background: #{$dark-color};
      }
    }
  }
  .ckeditor-accordion-container {
    & > dl {
      & > dt.#{$col} {
        background: #{$color};
        &:hover,
        &.active {
          background: #{$dark-color};
        }
      }
    }
  }
  .image-rolo {
    .#{$col} {
      background: rgba(red($color),green($color),blue($color),0.8);
    }
  }
  .view-syllabus {
    &.view-display-id-page_1 {
      .views-row.color-#{$col} {
        background: none;
        .views-field-field-subject-name,
        .views-field-field-related-categories {
          background: #{$color};
        }
        &:hover,
        &.hover {
          background: none;
          .views-field-field-subject-name,
          .views-field-field-related-categories {
            background: #{$dark-color};
          }
        }
        .ui-accordion-content {
          a {
            color: #{$color};
            &:hover {
              color: #{$dark-color};
            }
          }
        }
      }
    }
  }
  body.page-404-page,
  body.page-403-page {
    .pane-page-content {
      .panel-pane {
        &.subjects {
          .subject-icons {
            @extend .subject-icon-mobile-color;
          }
        }
      }
    }
  }
  body.section-altalanos-szerzodesi-feltetelek-es-adatvedelmi-iranyelvek,
  body.page-node-25,
  body.page-node-15 {
    .node {
      .field-name-body {
        .ckeditor-accordion-container {
          & > dl {
            & > dt.#{$col} {
              background: none;
              border: 1px solid #{$color};
              color: $text;
              .ckeditor-accordion-toggle,
              .ckeditor-accordion-toggler {
                color: inherit;
                &:before {
                  color: inherit;
                }
              }
              & + dd {
                border-left: 1px solid #{$color};
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1007px) {
    body.color-#{$col} {
      #panel-page-mathsplain-video {
        .help-layer {
          .pane-taxonomy-term-product-commerce-price {
            .field-name-commerce-price {
              //color: #{$color};
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 767px) {
    body.color-#{$col} {
      .video-flack {
        .video-box {
          &.test {
            .video-box-header {
              .video-box-header-number {
                color: #fff !important;
                border-color: currentColor !important;
              }
            }
            a:hover {
              .video-box-header {
                background-color: #{$dark-color} !important;
              }
            }
            &.folded {
              .video-box-header {
                background-color: #{$color};
              }
            }
          }
        }
      }
      .seo-text {
        .opener {
          background-color: #{$color};
        }
      }
    }
  }


} //end each


@each $bg in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 {
  $bodybg: 'BRIDGEBIG1600';

  @if $bg == 1 {
    $bodybg: '1600Precalculus_linalg';
  }
  @else if $bg == 2 {
		$bodybg: 'ANALIZIS1-CALCULUS1-1600';
	}
  @else if $bg == 3 {
		$bodybg: 'ANALIZIS2-CALCULUS2-1600v3';
	}
  @else if $bg == 4 {
		$bodybg: '1600Linearalgebra_Valszam';
	}
  @else if $bg == 5 {
		$bodybg: 'LINEARISALGEBRA-1600';
	}
  @else if $bg == 6 {
		$bodybg: 'VALSZAM-PROBABILITY-1600';
	}
  @else if $bg == 7 {
		$bodybg: '1600Probability_stat2-v1';
	}
  @else if $bg == 8 {
		$bodybg: 'STATISZTIKA-1600';
	}
  @else if $bg == 9 {
		$bodybg: 'ANALIZIS3-CALCULUS3-1600';
	}
  @else if $bg == 10 {
		$bodybg: 'BRIDGEBIG1600';
	}
  @else if $bg == 11 {
		$bodybg: 'bg-bridge';
	}
  @else if $bg == 12 {
		$bodybg: 'bg-mooserboden';
	}
  @else if $bg == 13 {
		$bodybg: 'bg-riverbed';
	}
  @else if $bg == 14 {
		$bodybg: 'bg-goldengate';
	}
  @else if $bg == 15 {
		$bodybg: 'bg-hid2';
	}
  @else if $bg == 16 {
		$bodybg: 'bg-julier';
	}
  @else if $bg == 17 {
		$bodybg: 'bg-furka';
	}

  body.bg-#{$bg} {
    background: url('../images/#{$bodybg}.jpg') no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
    &.touch-device {
      &:before {
        background: url('../images/#{$bodybg}.jpg') no-repeat center top;
        background-size: cover;
      }
    }
    .node {
      &.node-video {
        &.view-mode-full {
          .to-fullscreen {
            &.in-fullscreen {
              background: url('../images/#{$bodybg}.jpg') no-repeat center top;
            }
          }
        }
      }
    }
  }

} // end each


/* some special code */
body {
  &.page-taxonomy-term-99,
  &.parent-page-taxonomy-term-99,
  &.page-taxonomy-term-549,
  &.parent-page-taxonomy-term-549 {
    #panel-page-mathsplain-video {
      > .panel-col-first {
        .pane-menu-block-1,
        .pane-term-name,
        div[class*="pane-views-"] {
          h1,
          .pane-title {
            position: relative;
            text-indent: -200vw;
            &:after {
              position: absolute;
              left: 0;
              top: 0;
              text-indent: 0;
              padding-left: 70px;
            }
            a {
              position: relative;
              &:after {
                content: "";
                position: absolute;
                width: 100%;
                height: 45px;
                top: 0;
                left: 200vw;
                z-index: 1;
              }
            }
          }
        }
      }
    }
  }
  &.page-taxonomy-term-99,
  &.parent-page-taxonomy-term-99 {
    #panel-page-mathsplain-video {
      > .panel-col-first {
        .pane-term-name,
        .pane-menu-block-1,
        div[class*="pane-views-"] {
          h1,
          .pane-title {
            &:after {
              content: "Val\00f3 sz\00ed n\00fc s\00e9 g-sz\00e1 m\00ed t\00e1 s";
            }
          }
        }
      }
    }
    .node.node-video {
      &.view-mode-full {
        .no-access-wrapper {
          .no-access-link {
            .left {
              .title {
                @include flexbox();
                text-indent: -200vw;
                &:after {
                  content: "Val\00f3 sz\00ed n\00fc s\00e9 g-sz\00e1 m\00ed t\00e1 s";
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  text-indent: 0;
                  width: 100%;
                  height: 45%;
                }
              }
            }
          }
        }
      }
    }
  }
  &.page-taxonomy-term-549,
  &.parent-page-taxonomy-term-549 {
    #panel-page-mathsplain-video {
      > .panel-col-first {
        .pane-term-name,
        .pane-menu-block-1,
        div[class*="pane-views-"] {
          h1,
          .pane-title {
            &:after {
              content: "Wahrschein-lichkeitstheorie";
            }
          }
        }
      }
    }
  }
  &.page-taxonomy-term-516,
  &.parent-page-taxonomy-term-516 {
    #panel-page-mathsplain-video {
      > .panel-col-first {
        .pane-term-name,
        .pane-menu-block-1,
        div[class*="pane-views-"] {
          h1,
          .pane-title {
            padding: 0 0 0 40px;
            font-size: 24px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1007px) {
  body {
    &.page-taxonomy-term-99,
    &.parent-page-taxonomy-term-99,
    &.page-taxonomy-term-549,
    &.parent-page-taxonomy-term-549 {
      #panel-page-mathsplain-video {
        > .panel-col-first {
          .pane-term-name,
          .pane-menu-block-1,
          div[class*="pane-views-"] {
            h1,
            .pane-title {
              font-size: 20px;
              background-size: auto 24px;
              &:after {
                padding-left: 48px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  body {
    &.page-taxonomy-term-99,
    &.parent-page-taxonomy-term-99 {
      .node.node-video {
        &.view-mode-full {
          .no-access-wrapper {
            .no-access-link {
              .left {
                .title {
                  text-indent: 0;
                  &:after {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* menu item text overrides */
.pane-subject-list {
  .view-subject-list {
    ul {
      li {
        &.subject-term-99 {
          .views-field-name {
            .field-content {
              a {
                position: relative;
                &:after {
                  content: "Val\00f3 sz\00ed n\00fc s\00e9 g-sz\00e1 m\00ed t\00e1 s";
                }
              }
            }
          }
        }
        &.subject-term-549 {
          .views-field-name {
            .field-content {
              a {
                position: relative;
                &:after {
                  content: "Wahrschein-lichkeitstheorie";
                }
              }
            }
          }
        }
      }
    }
  }
}

/* bar charts */
@for $i from 1 through 100 {
  $num: $i * 0.01;
  div.bar-chart.in-viewport {
    .bar-#{$i} {
      &:after {
        width: percentage($num);
      }
    }
  }
}