/**
 * @file
 * SMACSS Modules
 *
 * Adds modular sets of styles.
 *
 * Additional useful selectors can be found in Zen's online documentation.
 * https://drupal.org/node/1707736
 */

/**
 * Wireframes.
 **/
.with-wireframes {
  #header,
  #main,
  #content,
  #navigation,
  .region-sidebar-first,
  .region-sidebar-second,
  #footer,
  .region-bottom {
    outline: 1px solid #ccc;

    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
      .lt-ie8 & {
        /* IE6/7 do not support the outline property. */
        border: 1px solid #ccc;
      }
    }
  }
}

/**
 * Accessibility features.
 */

/* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.element-invisible,
%element-invisible {
  @include element-invisible;
}

/* Turns off the element-invisible effect. */
%element-invisible-off {
  @include element-invisible-off;
}

.element-focusable,
%element-focusable {
  @extend %element-invisible;

  &:active,
  &:focus {
    @extend %element-invisible-off;
  }
}

/*
 * The skip-link link will be completely hidden until a user tabs to the link.
 */
#skip-link {
  margin: 0;

  a,
  a:visited {
    display: block;
    width: 100%;
    padding: 2px 0 3px 0;
    text-align: center;
    background-color: #666;
    color: #fff;
  }
}

/**
 * Branding header.
 */

/* Wrapping link for logo. */
.header__logo {
  float: left; /* LTR */
  margin: 0;
  padding: 0;
}

/* Logo image. */
.header__logo-image {
  vertical-align: bottom;
}

/* Wrapper for website name and slogan. */
.header__name-and-slogan {
  float: left;
}

/* The name of the website. */
.header__site-name {
  margin: 0;
  @include adjust-font-size-to( $h1-font-size );
}

/* The link around the name of the website. */
.header__site-link {
  &:link,
  &:visited {
    color: #000;
    text-decoration: none;
  }

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

/* The slogan (or tagline) of a website. */
.header__site-slogan {
  margin: 0;
}

/* The secondary menu (login, etc.) */
.header__secondary-menu {
  float: right; /* LTR */
}

/* Wrapper for any blocks placed in the header region. */
.header__region {
  /* Clear the logo. */
  clear: both;
}

/**
 * Navigation bar.
 */
#navigation {
  /* Sometimes you want to prevent overlapping with main div. */
  /* overflow: hidden; */

  .block {
    margin-bottom: 0;
  }

  .block-menu .block__title,
  .block-menu-block .block__title {
    @extend %element-invisible;
  }

  /* Main menu and secondary menu links and menu block links. */
  .links,
  .menu {
    margin: 0;
    padding: 0;
    text-align: left; /* LTR */

    li {
      /* A simple method to get navigation links to appear in one line. */
      float: left; /* LTR */
      padding: 0 10px 0 0; /* LTR */
      list-style-type: none;
      list-style-image: none;
    }
  }
}

/**
 * Breadcrumb navigation.
 */
.breadcrumb {
  ol {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}

/**
 * Titles.
 */
.page__title,          /* The title of the page. */
.node__title,          /* Title of a piece of content when it is given in a list of content. */
.block__title,         /* Block title. */
.comments__title,      /* Comment section heading. */
.comments__form-title, /* Comment form heading. */
.comment__title {      /* Comment title. */
  margin: 0;
}

/**
 * Messages.
 */
.messages {
  margin: rhythm(1) 0;
  padding: 10px 10px 10px 50px; /* LTR */
  background-image: inline-image("message-24-ok.png");
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *background-image: image-url("message-24-ok.png");
  }
  background-position: 8px 8px; /* LTR */
  background-repeat: no-repeat;
  border: 1px solid #be7;
}
.messages--status {
  @extend .messages;
  @extend %ok;
}
.messages--warning,
.messages.warning {
  @extend .messages;
  @extend %warning;
  background-image: inline-image("message-24-warning.png");
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *background-image: image-url("message-24-warning.png");
  }
  border-color: #ed5;
}
.messages--error,
 .messages.error {
  @extend .messages;
  @extend %error;
  background-image: inline-image("message-24-error.png");
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *background-image: image-url("message-24-error.png");
  }
  border-color: #ed541d;

}
.messages__list {
  margin: 0;
}
.messages__item {
  list-style-image: none;
}

/* Core/module installation error messages. */
.messages--error  p.error {
  color: #333;
}

/* System status report. */
.ok,
%ok {
  background-color: #f8fff0;
  color: #234600;
}
.warning,
%warning {
  background-color: #fffce5;
  color: #840;
}
.error,
%error {
  background-color: #fef5f1;
  color: #8c2e0b;
}

/**
 * Tabs.
 */

/* Basic positioning styles shared by primary and secondary tabs. */
%tabs {
  @include clearfix;
  @include background-image(linear-gradient(bottom, $tabs-border 1px, transparent 1px));
  /* IE 9 and earlier don't understand gradients. */
  list-style: none;
  border-bottom: 1px solid $tabs-border \0/ie;
  margin: rhythm(1) 0;
  padding: 0 2px;
  white-space: nowrap;
}
%tabs__tab {
  float: left; /* LTR */
  margin: 0 3px;
}
%tabs__tab-link {
  border: 1px solid #e9e9e9;
  border-right: 0;
  border-bottom: 0;
  display: block;
  @include adjust-leading-to(1);
  text-decoration: none;
}

/* Primary tabs. */
.tabs-primary {
  @extend %tabs;
}
.tabs-primary__tab {
  @extend %tabs__tab;
  @include border-top-radius(4px);
  @include single-text-shadow(#fff, 1px, 1px, 0);
  border: 1px solid $tabs-border;
  border-bottom-color: transparent;
  /* IE 9 and earlier don't understand gradients. */
  border-bottom: 0 \0/ie;
}
.tabs-primary__tab.is-active {
  @extend .tabs-primary__tab;
  border-bottom-color: $tabs-container-bg;
}

// We use 3 placeholder styles to prevent @extend from going selector crazy.
%tabs-primary__tab-link {
  @extend %tabs__tab-link;
  @include border-top-radius(4px);
  @include transition(background-color 0.3s);
  color: #333;
  background-color: #dedede;
  letter-spacing: 1px;
  padding: 0 1em;
  text-align: center;
}
%tabs-primary__tab-link-is-hover {
  background-color: #e9e9e9;
  border-color: #f2f2f2;
}
%tabs-primary__tab-link-is-active {
  background-color: transparent;
  @include filter-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0));
  @include background-image(linear-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0)));
  border-color: #fff;
}

a.tabs-primary__tab-link {
  @extend %tabs-primary__tab-link;

  &:hover,
  &:focus {
    @extend %tabs-primary__tab-link-is-hover;
  }
  &:active {
    @extend %tabs-primary__tab-link-is-active;
  }
}
a.tabs-primary__tab-link.is-active {
  @extend %tabs-primary__tab-link;
  @extend %tabs-primary__tab-link-is-active;
}

/* Secondary tabs. */
.tabs-secondary {
  @extend %tabs;
  font-size: .9em;
  /* Collapse bottom margin of ul.primary. */
  margin-top: -(rhythm(1));
}
.tabs-secondary__tab,
.tabs-secondary__tab.is-active {
  @extend %tabs__tab;
  margin: rhythm(1)/2 3px;
}

// We use 3 placeholder styles to prevent @extend from going selector crazy.
%tabs-secondary__tab-link {
  @extend %tabs__tab-link;
  @include border-radius(.75em);
  @include transition(background-color 0.3s);
  @include single-text-shadow(#fff, 1px, 1px, 0);
  background-color: #f2f2f2;
  color: #666;
  padding: 0 .5em;
}
%tabs-secondary__tab-link-is-focus {
  background-color: #dedede;
  border-color: #999;
  color: #333;
}
%tabs-secondary__tab-link-is-active {
  @include single-text-shadow(#333, 1px, 1px, 0);
  background-color: #666;
  border-color: #000;
  color: #fff;
}

a.tabs-secondary__tab-link {
  @extend %tabs-secondary__tab-link;

  &:hover,
  &:focus {
    @extend %tabs-secondary__tab-link-is-focus;
  }
  &:active {
    @extend %tabs-secondary__tab-link-is-active;
  }
}
a.tabs-secondary__tab-link.is-active {
  @extend %tabs-secondary__tab-link;
  @extend %tabs-secondary__tab-link-is-active;
}

/**
 * Inline styles.
 */

/* List of links generated by theme_links(). */
.inline {
  display: inline;
  padding: 0;

  li {
    display: inline;
    list-style-type: none;
    padding: 0 1em 0 0; /* LTR */
  }
}

/* The inline field label used by the Fences module. */
span.field-label {
  padding: 0 1em 0 0; /* LTR */
}

/**
 * "More" links.
 */
.more-link {
  text-align: right; /* LTR */
}
.more-help-link {
  text-align: right; /* LTR */
}
.more-help-link a {
  background-image: inline-image("help.png");
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *background-image: image-url("help.png");
  }
  background-position: 0 50%; /* LTR */
  background-repeat: no-repeat;
  padding: 1px 0 1px 20px; /* LTR */
}

/**
 * Pager.
 */

/* A list of page numbers when more than 1 page of content is available. */
.pager {
  clear: both;
  padding: 0;
  text-align: center;
}
%pager__item {
  display: inline;
  padding: 0 0.5em;
  list-style-type: none;
  background-image: none;
}

.pager-item,      /* A list item containing a page number in the list of pages. */
.pager-first,     /* The first page's list item. */
.pager-previous,  /* The previous page's list item. */
.pager-next,      /* The next page's list item. */
.pager-last,      /* The last page's list item. */
.pager-ellipsis { /* A concatenation of several list items using an ellipsis. */
  @extend %pager__item;
}

/* The current page's list item. */
.pager-current {
  @extend %pager__item;
  font-weight: bold;
}

/**
 * Blocks.
 */

/* Block wrapper. */
.block {
  margin-bottom: rhythm(1);
}

/**
 * Menus.
 */
.menu__item.is-leaf {
  list-style-image: inline-image("menu-leaf.png");
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *list-style-image: image-url("menu-leaf.png");
  }
  list-style-type: square;
}
.menu__item.is-expanded {
  list-style-image: inline-image("menu-expanded.png");
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *list-style-image: image-url("menu-expanded.png");
  }
  list-style-type: circle;
}
.menu__item.is-collapsed {
  list-style-image: inline-image("menu-collapsed.png"); /* LTR */
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *list-style-image: image-url("menu-collapsed.png"); /* LTR */
  }
  list-style-type: disc;
}

/* The active item in a Drupal menu. */
.menu a.active {
  color: #000;
}

/**
 * Marker.
 */

/* The "new" or "updated" marker. */
.new,
.update {
  color: #c00;
  /* Remove background highlighting from <mark> in normalize. */
  background-color: transparent;
}

/**
 * Unpublished note.
 */

/* The word "Unpublished" displayed underneath the content. */
.unpublished {
  height: 0;
  overflow: visible;
  /* Remove background highlighting from <mark> in normalize. */
  background-color: transparent;
  color: #d8d8d8;
  font-size: 75px;
  line-height: 1;
  font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  /* A very nice CSS3 property. */
  word-wrap: break-word;
}
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
  .lt-ie8 .node-unpublished>*,
  .lt-ie8 .comment-unpublished>* {
    /* Otherwise these elements will appear below the "Unpublished" text. */
    position: relative;
  }
}

/**
 * Comments.
 */

/* Wrapper for the list of comments and its title. */
.comments {
  margin: rhythm(1) 0;
}

/* Preview of the comment before submitting new or updated comment. */
.comment-preview {
  /* Drupal core will use a #ffffea background. See #1110842. */
  background-color: #ffffea;
}

/* Wrapper for a single comment. */
.comment {

  /* Comment's permalink wrapper. */
  .permalink {
    text-transform: uppercase;
    font-size: 75%;
  }
}

/* Nested comments are indented. */
.indented {
  /* Drupal core uses a 25px left margin. */
  margin-left: $indent-amount; /* LTR */
}

/**
 * Forms.
 */

/* Wrapper for a form element (or group of form elements) and its label. */
.form-item {
  margin: rhythm(1) 0;

  /* Pack groups of checkboxes and radio buttons closer together. */
  .form-checkboxes & ,
  .form-radios & {
    /* Drupal core uses "0.4em 0". */
    margin: 0;
  }

  /* Form items in a table. */
  tr.odd &,
  tr.even & {
    margin: 0;
  }

  /* Highlight the form elements that caused a form submission error. */
  input.error,
  textarea.error,
  select.error {
    border: 1px solid #c00;
  }

  /* The descriptive help text (separate from the label). */
  .description {
    font-size: 0.85em;
  }
}

.form-type-radio,
.form-type-checkbox {
  .description {
    margin-left: 2.4em;
  }
}

/* The part of the label that indicates a required field. */
.form-required {
  color: #c00;
}

/* Labels for radios and checkboxes. */
label.option {
  display: inline;
  font-weight: normal;
}

/* Buttons used by contrib modules like Media. */
a.button {
  @include appearance(button);
}

/* Password confirmation. */
.password-parent,
.confirm-parent {
  margin: 0;
}

/* Drupal's default login form block. */
#user-login-form {
  text-align: left; /* LTR */
}

/**
 * OpenID
 *
 * The default styling for the OpenID login link seems to assume Garland's
 * styling of list items.
 */

/* OpenID creates a new ul above the login form's links. */
.openid-links {
  /* Position OpenID's ul next to the rest of the links. */
  margin-bottom: 0;
}

/* The "Log in using OpenID" and "Cancel OpenID login" links. */
.openid-link,
.user-link {
  margin-top: rhythm(1);
}
html.js #user-login-form li.openid-link,
#user-login-form li.openid-link {
  /* Un-do some of the padding on the ul list. */
  margin-left: -20px; /* LTR */
}
#user-login ul {
  margin: rhythm(1) 0;
}

/**
 * Drupal admin tables.
 */
form {
  th {
    text-align: left; /* LTR */
    padding-right: 1em; /* LTR */
    border-bottom: 3px solid #ccc;
  }
  tbody {
    border-top: 1px solid #ccc;
  }
  table ul {
    margin: 0;
  }
}
tr.even,
tr.odd {
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  padding: 0.1em 0.6em;
}
tr.even {
  background-color: #fff;
}
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
  .lt-ie8 tr.even,
  .lt-ie8 tr.odd {
    th,
    td {
      /* IE doesn't display borders on table rows. */
      border-bottom: 1px solid #ccc;
    }
  }
}

/* Markup generated by theme_tablesort_indicator(). */
td.active {
  background-color: #ddd;
}

/* Center checkboxes inside table cell. */
td.checkbox,
th.checkbox {
  text-align: center;
}

/* Drupal core wrongly puts this in system.menus.css. Since we override that, add it back. */
td.menu-disabled {
  background: #ccc;
}

/**
 * Autocomplete.
 *
 * @see autocomplete.js
 */

/* Suggestion list. */
#autocomplete .selected {
  background: #0072b9;
  color: #fff;
}

/**
 * Collapsible fieldsets.
 *
 * @see collapse.js
 */
.fieldset-legend {
  html.js .collapsible & {
    background-image: inline-image("menu-expanded.png");
    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
      *background-image: image-url("menu-expanded.png");
    }
    background-position: 5px 65%; /* LTR */
    background-repeat: no-repeat;
    padding-left: 15px; /* LTR */
  }
  html.js .collapsed & {
    background-image: inline-image("menu-collapsed.png"); /* LTR */
    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
      *background-image: image-url("menu-collapsed.png"); /* LTR */
    }
    background-position: 5px 50%; /* LTR */
  }
  .summary {
    color: #999;
    font-size: 0.9em;
    margin-left: 0.5em;
  }
}

/**
 * TableDrag behavior.
 *
 * @see tabledrag.js
 */
tr.drag {
  background-color: #fffff0;
}
tr.drag-previous {
  background-color: #ffd;
}
.tabledrag-toggle-weight {
  font-size: 0.9em;
}

/**
 * TableSelect behavior.
 *
 * @see tableselect.js
 */
tr.selected td {
  background: #ffc;
}

/**
 * Progress bar.
 *
 * @see progress.js
 */
.progress {
  font-weight: bold;

  .bar {
    background: #ccc;
    border-color: #666;
    margin: 0 0.2em;
    @include border-radius(3px);
  }
  .filled {
    background-color: #0072b9;
    background-image: image-url("progress.gif");
  }
}


/* *****
 * MACROWEB CODES
 * *****
 */

html,
body {
  display: inline-block;
  width: 100%;
  height: 100%;
}

* {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  &:focus {
    outline: none;
  }
}

.visually-hidden {
  @extend .element-invisible;
}

body {
  color: $text;
  font-family: 'Raleway';
  font-size: 18px;
  .clearfix {
    &:after {
      content: "";
      display: table;
    }
  }
  & > .panel-display {
    position: relative;
    width: 100%;
    overflow: hidden;
    &:before {
      content: "";
      position: fixed;
      width: 100vw;
      height: 1px;
      top: 0;
      left: 0;
      z-index: 5;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background: rgba(0,0,0,0.1);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      transition: opacity 0.5s, visibility 0.5s, height 0s;
      transition-delay: 0s, 0s, 0.5s;
    }
    & > .panel-panel {
      padding-bottom: 780px;
      position: relative;
    }
  }
  &.front {
    & > .panel-display {
      & > .panel-panel {
        padding-bottom: 319px;
      }
    }
    .pane-page-content {
      padding-bottom: 0;
      & > .pane-content {
        & > .contextual-links-region {
          & > .contextual-links-wrapper {
            top: 100px;
          }
        }
      }
    }
    #subjects {
      .pane-content {
        margin: 0;
      }
    }
    .view-testimonials {
      margin: auto;
    }
  }
  &.node-type-video,
  &.page-comment {
    & > .panel-display {
      & > .panel-panel {
        padding-bottom: 0;
      }
    }
  }
  &.subject-term {
    .pane-page-content {
      padding-bottom: 0;
    }
    h1 {
      display: none;
    }
  }
  &.page-search,
  &.page-search-grouped {
    background: url('../images/bg-riverbed.jpg') no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
    display: table;
    h1 {
      color: #fff;
    }
  }
  &.cookie-anim {
    & > .panel-display {
      & > .panel-panel {
        -webkit-transition: padding-top 0.8s;
        transition: padding-top 0.8s;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
      }
    }
  }
}

.panel-1col {
  > .panel-col {
    width: 100%;
  }
}

.pane-page-content {
  padding-bottom: 50px;
}
.separator {
  line-height: inherit; //15px;
  height: 0;
  margin-bottom: 68px;
}
.contextual-links-region {
  .contextual-links-wrapper {
    ul.contextual-links {
      li {
        display: list-item !important;
        width: auto !important;
        float: none !important;
      }
    }
  }
  &.pane-mathsplain-header-3 {
    .contextual-links-wrapper {
      top: 130px;
    }
  }
}

.uppercase {
  text-transform: uppercase;
}
.fixed {
  position: fixed;
}
h1, h2, h3, h4, h5, h6 {
  @extend .uppercase;
  font-weight: normal;
}
ul, ol {
  list-style-position: outside;
}
.list-nostyle {
  margin: 0;
  padding: 0 0 0 12px;
  list-style: none;
  li {
    list-style: none;
  }
}
.list-inline {
  li {
    display: inline-block;
    float: left;
  }
}
a {
  text-decoration: none;
  color: $topic-cyan;
  &:focus {
    outline: none;
  }
  &.link-on-gray {
    color: $light-blue;
    &:hover {
      color: #fff;
    }
  }
}
.icon-close {
  background: inline-image('../images/close.svg') no-repeat center center;
}
.panel-flexible {
  .panel-flexible-inside {
    .panels-flexible-region {
      width: 100%;
    }
  }
}
.button-nostyle {
  border: none;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-weight: normal;
}
.button-default-style {
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  font-weight: normal;
}
.link-button {
  background: $dark-gray;
  color: #fff;
  @extend .uppercase;
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  line-height: normal;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  white-space: normal;
  a {
    color: currentColor;
  }
}
div.link-button {
  padding: 0;
  a {
    padding: 15px 30px;
    display: inline-block;
  }
}
.btn,
.button-cyan {
  @extend .link-button;
  background: $topic-cyan;
  &:hover {
    background: $topic-darkcyan;
  }
  &.rev {
    background: #fff;
    color: $topic-cyan;
    border: 1px solid #fff;
    &:hover {
      background: #fff;
      border-color: $topic-darkcyan;
    }
  }
}
.button-green {
  @extend .link-button;
  background: $topic-green;
  &:hover {
    background: $topic-darkgreen;
  }
  &.rev {
    background: #fff;
    color: $topic-green;
    border: 1px solid #fff;
    &:hover {
      background: #fff;
      border-color: $topic-darkgreen;
    }
  }
}
.button-green-bridge {
  @extend .link-button;
  background: #9fde02;
  color: $text;
  &:hover {
    background: #adf300;
    color: $text;
  }
  &.rev {
    background: #fff;
    color: #8ec702;
    border: 1px solid #fff;
    &:hover {
      background: #fff;
      border-color: #8ec702;
    }
  }
}
.button-yellow {
  @extend .link-button;
  background: $topic-yellow;
  &:hover {
    background: $topic-darkyellow;
  }
  &.rev {
    background: #fff;
    color: $topic-yellow;
    border: 1px solid #fff;
    &:hover {
      background: #fff;
      border-color: $topic-darkyellow;
    }
  }
}
.button-orange {
  @extend .link-button;
  background: $topic-orange;
  &:hover {
    background: $topic-darkorange;
  }
  &.rev {
    background: #fff;
    color: $topic-orange;
    border: 1px solid #fff;
    &:hover {
      background: #fff;
      border-color: $topic-darkorange;
    }
  }
}
.button-white {
  @extend .link-button;
  background: #fff;
  color: $text;
  &:hover {
    background: $hover;
  }
}
.button-bordered {
  @extend .link-button;
  background: none;
  border: 1px solid #fff;
  text-align: center;
  display: inline-block;
  &.dark {
    border-color: $text;
    color: $text;
  }
}
.member {
  display: inline-block;
  width: 100%;
  clear: both;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid $gray;
  img {
    float: left;
    margin: 0 15px 15px 0;
    width: 100%;
    max-width: 300px;
  }
}
.image-rolo {
  position: relative;
  text-align: center;
  line-height: 0;
  p {
    line-height: 0;
  }
  img {
    width: 100% !important;
    height: auto !important;
    top: 0;
    left: 0;
    line-height: 0;
  }
  .top,
  .bottom {
    line-height: 1.2em;
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
    span {
      position: absolute;
      width: 100%;
      left: 0;
      padding: 0 10px;
    }
  }
  .top {
    top: 0;
    font-size: 22px;
    span {
      bottom: 0;
    }
  }
  .bottom {
    bottom: 0;
  }
  &:hover {
    .top,
    .bottom {
      height: 50%;
    }
  }
}
.icon-bookmark {
  background-image: inline-image('../images/icon-bookmark.svg');
  background-repeat: no-repeat;
}
.icon-check {
  background-image: inline-image('../images/icon-check-gren.svg');
  background-repeat: no-repeat;
}
.icon-x {
  background-image: inline-image('../images/icon-x-orang.svg');
  background-repeat: no-repeat;
}
.icon-menu-elementary {
  background: inline-image('../images/icon-menu-elementary-25.svg') no-repeat;
}
.icon-menu-highschool {
  background: inline-image('../images/icon-menu-highschool-25.svg') no-repeat;
}
.icon-menu-university {
  background: inline-image('../images/icon-menu-university.svg') no-repeat;
}
.icon-cookie {
  background: inline-image('../images/cookies.svg') no-repeat;
}
.icon-target {
  background: inline-image('../images/icon-target.svg') no-repeat;
}
.icon-fly {
  background: inline-image('../images/icon-fly.svg') no-repeat;
}
.icon-gears {
  background: inline-image('../images/icon-gears.svg') no-repeat;
}
.icon-world {
  background: inline-image('../images/icon-world.svg') no-repeat;
}
.check-off {
  background: inline-image('../images/checkbox-off.png') no-repeat 0 0.25em;
}
.check-on {
  background: inline-image('../images/checkbox-on.png') no-repeat 0 0.25em;
}
.radio-off {
  background: inline-image('../images/radio-off.png') no-repeat 0 0;
}
.radio-on {
  background: inline-image('../images/radio-on.png') no-repeat 0 0;
}
.gradient-bg1 {
  background-image: linear-gradient(#fff 0%, transparent 60px);
}

ul.list-link-bars {
  list-style: none;
  padding: 15px 30px 30px 30px;
  background-color: rgba(0,0,0,0.3);
  li {
    a {
      display: block;
      padding: 15px;
      color: $hover;
      border-bottom: 1px solid currentColor;
      text-transform: uppercase;
      &:hover {
        background-color: rgba(255,255,255,0.2);
        color: $topic-yellow;
      }
    }
  }
}

.left-menu-link {
  position: relative;
  transition: padding-left 0.5s;
  font-size: 18px;
  text-align: center;
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 82px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -10px;
    border: 2px solid #fff;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
    opacity: 0;
    transition: margin-left 0.5s, opacity 0.5s;
  }
  &:hover {
    &:after {
      margin-left: 0;
      opacity: 1;
    }
  }
}
.left-menu-style {
  position: absolute;
  top: 68px;
  left: 0;
  min-width: 100%; //calc(100% + 100px);
  height: calc(100vh - 68px);
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  overflow: auto;
  nav,
  .item-list {
    * {
      box-sizing: border-box;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 18px;
      li {
        display: inline-block;
        width: 100%;
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        a {
          @include flexbox();
          -webkit-align-items: center;
          align-items: center;
          @extend .left-menu-link;
          text-align: left;
          color: #fff;
          padding: 0 20px 0 90px;
          line-height: 1.1;
          position: relative;
          min-height: 68px;
          height: auto;
          &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 68px;
            background: $topic-green url('../images/icon-summa.svg') no-repeat center center;
            background-size: auto 25px;
          }
          &:hover {
            padding-left: 110px;
          }
        }
      }
    }
  }
}
.menu-buttons-block {
  text-align: center;
  padding: 30px 0;
  > div {
    & + div {
      button {
        border-top: 2px solid rgba(0, 0, 0, 0.1);
      }
    }
  }
  button {
    @extend .button-nostyle;
    @extend .left-menu-link;
    position: relative;
    width: 400px;
    height: 110px;
    padding: 10px 10px 10px 110px;
    text-align: left;
    font-size: 20px;
    color: $text;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100%;
    }
    &:after {
        border-color: $text;
        left: 98px;
    }
    &[data-menu="toggle-elementary-menu"] {
      &:before {
        @extend .icon-menu-elementary;
        background-position: center center;
        background-size: auto 60px;
      }
    }
    &[data-menu="toggle-highschool-menu"] {
      &:before {
        @extend .icon-menu-highschool;
        background-position: center center;
        background-size: auto 60px;
      }
    }
    &[data-menu="toggle-university-menu"] {
      &:before {
        @extend .icon-menu-university;
        background-position: center center;
        background-size: auto 40px;
      }
    }
    &:hover {
      padding-left: 130px;
    }
  }
}
.mobile-menu-buttons {
  display: none;
  .menu-buttons-block {
    padding: 10px 0;
  }
  p {
    margin: 0;
  }
}

.description-normal {
  position: static;
  background: none;
  color: $gray;
  width: auto;
  margin: 0;
  display: block !important;
  @include box-opacity(1, !important);
}
.zebra {
  tbody {
    tr {
      &:nth-child(odd) {
        background: $hover;
      }
      &:nth-child(even) {
        background: #fff;
      }
    }
  }
}
.no-zebra {
  tbody {
    tr {
      &.odd,
      &.even,
      &:nth-child(odd),
      &:nth-child(even) {
        background: none;
      }
    }
  }
}
table {
  width: 100%;
  border: none;
  margin: 1em 0;
  tr {
    td, th {
      padding: 15px 17px;
      text-align: left;
      border: none;
      p {
        margin: 0;
      }
    }
  }
  thead {
    background: $text;
    border: 1px solid $text;
    border-bottom: none;
    border-top: none;
    color: $light-gray;
    font-size: 14px;
    text-align: left;
    @extend .uppercase;
    th {
      border: none;
      font-weight: normal;
    }
  }
  tbody, tfoot {
    tr,
    tr.odd,
    tr.even {
      border: 1px solid $gray;
      td {
        padding-bottom: 14px;
        border: none;
        border-left: 1px solid $gray;
        &:first-child {
          border: none;
        }
      }
    }
    tr {
      &.odd,
      &:nth-child(odd) {
        background: $hover;
      }
      &.even,
      &:nth-child(even) {
        background: #fff;
    	}
    }
  }
  &.scrolltable {
    display: block;
    overflow: auto;
  }
  &.my-coupons {
  	@extend .no-zebra;
  }
}
.form-item-style {
  font-family: 'Raleway';
  font-size: 16px;
  color: $gray;
  background: $deep-white;
  padding: 10px;
  line-height: 18px;
  border: 1px solid $extralight-gray;
}
form {
  color: $gray;
  fieldset {
    margin-bottom: 15px;
    &.checkout-buttons {
      border: none;
    }
  }
  .form-select,
  .form-text,
  .form-file,
  .form-textarea {
    font-family: 'Raleway';
    font-size: 16px;
    color: $gray;
    background: $deep-white;
    @include box-shadow(2px,2px,3px,$extralight-gray);
  }
  .form-select,
  .form-text,
  .form-file,
  .compact-form-label  {
    padding: 10px;
    line-height: 18px;
    border: 1px solid $extralight-gray;
  }
  .form-textarea {
    @extend .form-text;
  }
  .form-checkboxes,
  .form-radios {
    .form-item {
      margin: 5px 0;
    }
  }
  .form-type-checkbox,
  .form-type-radio {
    position: relative;
    input {
      &:not(:only-child) {
        opacity: 0;
        position: absolute;
        height: 15px;
        width: 15px;
        left: 0;
        top: 0;
        & + label {
          padding: 2px 0 1px 35px;
          display: inline-block;
          min-height: 30px;
        }
      }
    }
  }
  .form-checkbox,
  input[type="checkbox"] {
    & + label {
      @extend .check-off;
    }
    &.error {
      & + label {
        position: relative;
        &:before {
          content: "";
          position: absolute;
          top: 0.25em;
          left: 0;
          width: 23px;
          height: 23px;
          border: 1px solid #c00;
        }
      }
    }
    &:checked {
      & + label {
        @extend .check-on;
      }
    }
  }
  .form-radio,
  input[type="radio"] {
    & + label {
      @extend .radio-off;
    }
    &:checked {
      & + label {
        @extend .radio-on;
      }
    }
  }
  .select-wrapper {
    display: inline-block;
    padding: 0;
    line-height: 18px;
    border: 1px solid $extralight-gray;
    background: $deep-white;
    position: relative;
    @include box-shadow(2px,2px,3px,$extralight-gray);
    &:after {
      background: inline-image('../images/select-arrow.png') no-repeat right center;
      content: "";
      display: inline-block;
      width: 38px;
      height: 100%;
      right: 0;
      top: 0;
      position: absolute;
      pointer-events: none;
    }
    .form-select {
      border: none;
      padding: 0;
      margin: 2px;
      height: 38px;
      min-width: 55px;
      width: calc(100% - 2px);
      @include box-shadow();
      option {
        padding: 6px 10px;
      }
      &:focus {
        outline: none;
      }
    }
  }
  .form-submit {
    @extend .button-default-style;
    background: $topic-cyan;
    color: #fff;
    padding: 20px 96px;
    font-family: 'Raleway';
    font-size: 24px;
    margin: 10px 10px 10px 0;
    border: none;
    white-space: normal;
    &:hover {
      background: $topic-darkcyan;
    }
  }
  .compact-form-label {
    color: $gray;
    border: none;
    &:hover {
      cursor: text;
    }
  }
  .form-item-captcha-response {
    .field-prefix,
    .field-suffix {
      line-height: 38px;
      padding: 0;
    }
    .form-text {
      padding: 5px 10px;
      width: 42px !important;
      text-align: center;
    }
  }
  &.compact-form {
    .form-required {
      display: none;
    }
    .form-actions {
      .form-submit {
        float: left;
        margin-top: 0;
      }
    }
    .form-item-captcha-response {
      .compact-form-label {
        position: static;
        padding-left: 0;
      }
    }
  }
  &.answering-form {
    table {
      @extend .no-zebra;
      tbody {
        border: none;
        tr {
          border: none;
          background: none;
          td {
            border: none;
            padding: 5px;
            p {
              margin: 0;
            }
            &:first-child {
              width: 20px;
              .form-item {
                input {
                  visibility: hidden;
                  position: absolute;
                }
                &:after {
                  font-family: 'FontAwesome';
                  content: "\f096";
                  text-align: center;
                  font-size: 20px;
                  position: relative;
                }
                &:hover {
                  cursor: pointer;
                }
              }
            }
            &:hover {
              cursor: pointer;
            }
          }
          &.selected {
            td {
              background: none;
              &:first-child {
                .form-item {
                  &:after {
                    content: "\f046";
                  }
                }
              }
            }
          }
        }
      }
    }
    .form-actions {
      .quiz-back,
      .quiz-skip,
      .quiz-submit {
        display: inline-block;
        position: relative;
        margin: 0 10px 10px 0;
        &:after {
          font-family: 'FontAwesome';
          position: absolute;
          width: 20px;
          height: 24px;
          line-height: 22px;
          display: inline-block;
          top: 50%;
          right: 20px;
          margin-top: -12px;
          text-align: right;
          font-size: 30px;
          color: #fff;
        }
      }
      .quiz-back {
        &:after {
          content: "\f104";
          right: none;
          left: 20px;
          text-align: left;
        }
      }
      .quiz-skip {
        &:after {
          content: "\f088";
          font-size: 22px;
        }
      }
      .quiz-submit {
        &:after {
          content: "\f105";
        }
      }
      .form-submit {
        font-size: 20px;
        margin: 0;
      }
      #edit-navigation-back {
        @extend .button-cyan;
        padding: 12px 20px 12px 46px;
      }
      #edit-navigation-skip {
        @extend .button-yellow;
      }
      #edit-navigation-submit {
        @extend .button-green;
      }
      #edit-navigation-skip,
      #edit-navigation-submit {
        padding: 12px 46px 12px 20px;
      }
    }
  }
  &#user-login {
    ul {
      margin: 0;
    }
  }
  input {
    &.form-autocomplete {
      background-position: 99% center !important;
    }
  }
  table {
    &.field-multiple-table {
      @extend table;
      thead {
        th {
          &.field-label {
            padding: 15px 17px;
          }
        }
      }
      tr {
        td {
          &.field-multiple-drag {
          padding-left: 0;
          padding-right: 0;
            a {
              &.tabledrag-handle {
                padding: 0;
                margin: 0;
                float: none;
                .handle {
                  padding: 0;
                  margin: 15px;
                  width: 15px;
                  height: 15px;
                  background-position: center top;
                  &:hover {
                    background-position: center -20px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.search-button {
  border: none;
  padding: 0;
  margin: 0;
  width: 18px;
  height: 30px;
  color: $light-gray;
  &:after {
    font-family: 'FontAwesome';
    content: "\f002";
  }
  &:hover {
    color: #fff;
  }
}
.pager {
  li {
    font-size: 14px;
    a {
      color: $text;
    }
    &.pager-current {
      background: $text;
      color: #fff;
      padding: 5px 8px;
      font-weight: normal;
    }
  }
}
.tabs {
  &.tabs-primary {
    padding: 0;
    border-bottom: 1px solid $light-gray;
    background: none;
    display: inline-block;
    width: 100%;
    overflow: visible;
    .tabs-primary__tab {
      margin: 0 -1px 0 0;
      padding: 0;
      border: 1px solid $light-gray;
      border-bottom: 0;
      background: #fff;
      overflow: hidden;
      position: relative;
      @include box-radius(0);
      @include hover-anim(margin, padding);
      a {
        background: none;
        padding: 12px 30px 9px 30px;
        @include box-radius(0);
        border: none;
        font-size: 16px;
        //font-family: 'ProximaNovaLight';
        font-family: 'Raleway';
        color: $text;
        text-shadow: none;
      }
      &:last-child {
        border-right: 1px solid $light-gray;
      }
      &:hover {
        margin-top: -7px;
        padding-bottom: 7px;
      }
      &.is-active {
        margin-top: -8px;
        margin-right: -1px;
        position: relative;
        top: 1px;
        border-right: 1px solid $light-gray;
        a {
          background: #fff;
          padding-bottom: 17px;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: $topic-cyan;
          }
        }
        &:hover {
          margin-top: -8px;
          padding-bottom: 0;
        }
      }
    }
  }
}
.text-bigger {
  font-size: 1.3em;
}
#absolute-messages-messages {
  .absolute-messages-message {
    font-size: 16px;
    &.absolute-messages-status {
      background: $topic-green;
      //color: $darkgreen;
      color: #fff;
      border-color: $darkgreen;
      .absolute-messages-actions {
        .absolute-messages-dismiss {
          color: $green;
          border-color: $green;
        }
      }
    }
    &.absolute-messages-warning {
      background: $topic-yellow;
    }
    &.absolute-messages-error {
      background: $topic-orange;
    }
    .content {
      img,
      svg {
        max-width: 100%;
        height: auto;
      }
    }
    .absolute-messages-actions {
      .absolute-messages-dismiss {
        padding: 0;
        background: none;
        width: 15px;
        height: 15px;
        display: table;
        line-height: 15px;
        font-size: 13px;
        border: none;
        text-indent: -9999px;
        &:after {
          content: "\f00d";
          font-family: "FontAwesome";
          position: absolute;
          left: 0;
          font-size: 15px;
          text-indent: 0;
        }
      }
    }
  }
}
.ui-accordion {
  .ui-accordion-header {
    background: $topic-gray;
    border: none;
    color: $text;
    text-align: left;
    padding: 20px 30px;
    margin-top: 6px;
    @include box-radius();
    h3 {
      margin: 0;
      font-family: "Raleway";
      font-size: 24px;
      text-transform: none;
      line-height: 1em;
      position: relative;
      z-index: 2;
    }
    .ui-icon {
      display: none;
    }
    &:hover {
      background: $hover2;
    }
    &.ui-state-active {
      background: $hover2;
      position: relative;
      &:after {
        content: "";
        display: inline-block;
        width: 25px;
        height: 25px;
        position: absolute;
        top: 100%;
        left: 20%;
        margin-top: -12px;
        background: $hover2;
        @include box-rotate(45);
        z-index: 1;
      }
    }
  }
  .ui-accordion-content {
    border: none;
    background: none;
    padding: 50px 20px 20px 20px;
  }
}
#sliding-popup {
  visibility: hidden;
  -webkit-transition: visibility 1s;
  transition: visibility 1s;
  z-index: 499;
  button,
  button[class*="eu-cookie-compliance"] {
    padding: 5px;
    margin: 5px 0;
    background: none;
    border: 1px solid $dark-gray;
    display: table;
    color: $middledark-gray;
    line-height: 15px;
    font-size: 13px;
    font-weight: normal;
    font-family: "Arial";
    float: left;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    @include box-radius();
    @include box-shadow();
    @include txt-shadow();
    &:focus,
    &:active {
      outline: none;
      top: 0;
      @include box-shadow();
    }
    &:hover {
      background: $topic-darkcyan;
    }
    &.decline-button {
      display: none;
    }
  }
  a {
    color: currentColor;
    text-decoration: underline;
  }
  .popup-content {
    display: block;
    width: auto;
    max-width: 100%;
    #popup-buttons {
      padding: 5px 0 5px 10px;
      margin: 0;
      max-width: 100%;
      display: table-cell;
      vertical-align: middle;
      float: none;
      white-space: nowrap;
      .agree-button {
        margin-right: 5px;
      }
    }
  }
  #popup-text-and-info {
    @include flexbox();
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 1008px;
    margin: auto;
    padding: 10px 20px;
    &.hide {
      visibility: hidden;
      overflow: hidden;
    }
    #popup-text {
      max-width: none;
      margin: 0;
      .notfirst {
        display: none;
      }
    }
  }
  .eu-cookie-compliance-categories {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: $topic-cyan;
    padding-top: 0;
    width: 100%;
    height: auto !important;
    line-height: 0;
    overflow: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: transform 1.6s;
    transition: transform 1.6s;
    .eu-cookie-compliance-category {
      margin-top: 20px;
      margin-bottom: 20px;
      &:first-child {
        margin-top: 40px;
      }
      > div {
        position: relative;
      }
      .eu-cookie-compliance-category-description,
      .eu-cookie-compliance-category-description-more-link {
        padding-left: 40px;
        font-size: 16px;
        line-height: 1.3;
      }
      input[type="checkbox"] {
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        width: 15px;
        height: 15px;
        & + label {
          padding-left: 40px;
          display: block;
          min-height: 25px;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            display: inline-block;
            width: 22px;
            height: 22px;
            @extend .check-off;
            background-position: center center;
          }
        }
        &:checked {
          & + label {
            &:before {
              @extend .check-on;
              background-position: center center;
            }
          }
        }
        &[disabled] {
          & + label {
            &:before {
              opacity: 0.8;
            }
          }
        }
      }
    }
    .eu-cookie-compliance-categories-buttons {
      padding-left: 40px;
      margin: 0 0 40px 0;
      button {
        color: #fff;
        border-color: #fff;
        padding: 10px 20px;
        font-size: 16px;
      }
    }
    &.show {
      max-height: 100vh;
      line-height: 1.5em;
      -webkit-transition: transform 1s;
      transition: transform 1s;
    }
  }
  &.sliding-popup-top {
    background: $topic-cyan;
    border-bottom: 1px solid $middledark-gray;
    .popup-content {
      #popup-text {
        color: $middledark-gray;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        float: none;
        position: relative;
        & > div {
          padding-right: 140px;
          &:only-child {
            padding-right: 0;
          }
        }
        button {
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -14px;
        }
        p {
          margin: 0;
          font-size: 16px;
          font-weight: normal;
          color: $middledark-gray !important;
        }
        a {
          color: $middledark-gray;
        }
      }
    }
  }
  &.sliding-popup-bottom {
    background-color: $topic-cyan;
    border-top: 1px solid $middledark-gray;
    .eu-cookie-compliance-categories {
      top: 100%;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
}
#change-cookie-settings {
  display: table;
  margin: 20px auto;
  p {
    margin: 0;
  }
  a {
    padding: 5px 10px;
    border: 1px solid;
    display: inline-block;
  }
}
.sendy-subscribe-buttons {
  .sendy-subscribe-button {
    a {
      margin: 0 10px 10px 0;
    }
  }
  .subscribe {
    a {
      @extend .button-green;
    }
  }
  .unsubscribe {
    a {
      @extend .button-orange;
    }
  }
  #sendy-subscribe-buttons-message {
    background: $topic-cyan;
    color: #fff;
    padding: 10px;
    &:before {
      content: "\f05a";
      font-family: "FontAwesome";
      margin-right: 10px;
    }
    &.empty {
      display: none;
    }
  }
}
.bar-chart {
  font-size: 20px;
  clear: both;
  div[class*="bar"] {
    display: inline-block;
    width: 100%;
    margin: 10px 0 40px 0;
    padding: 10px;
    background: rgba(189, 194, 194,0.8); //#bdc2c2;
    color: #fff;
    position: relative;
    box-sizing: border-box;
    span {
      position: relative;
      z-index: 1;
    }
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0;
      background: $topic-cyan;
    }
  }
  .chart-item {
    & + .chart-item {
      margin-top: 40px;
    }
  }
  .past {
    @include flexbox();
    align-items: center;
    flex-wrap: wrap;
    margin-top: -20px;
    p {
      width: 100%;
      font-size: 16px;
      color: $gray;
    }
    .year {
      display: inline-block;
      width: 55px;
      margin: 5px 0;
      font-size: 18px;
      font-weight: bold;
      & + div[class*="bar"] {
        display: inline-block;
        width: calc(100% - 55px);
        margin: 5px 0;
        padding: 6px 10px;
        font-size: 16px;
        line-height: 1;
        &:after {
          background-color: $topic-darkyellow;
        }
      }
    }
  }
  a[class*="button"] {
    text-align: left;
  }
  &.in-viewport {
    div[class*="bar"] {
      &:after {
        -webkit-transition: width 1s;
        transition: width 1s;
      }
    }
  }
}
#mathsplain-user-menu {
  background: #000;
  .multilevelpushmenu_wrapper {
    .levelHolderClass {
      background: #000;
      padding-top: 68px;
    }
  }
  .menu {
    @extend .list-nostyle;
    font-family: 'Raleway';
    font-size: 16px;
    margin: 0;
    padding: 0;
    .menu__item {
      padding: 0;
      margin-bottom: 0;
      display: table;
      height: 68px;
      width: 100%;
      text-align: left !important;
      &:hover {
        background: none;
      }
      a {
        font-size: inherit;
        line-height: 1.3em;
        color: $light-blue;
        padding: 0 20px;
        text-align: left;
        display: table-cell;
        border-bottom: 1px solid $text;
        vertical-align: middle;
        float: none;
        &:hover {
          color: #fff;
          background: none;
        }
      }
    }
  }
  &.open {
    .menu {
      position: fixed;
      top: 68px;
      right: 0;
      width: 180px;
    }
  }
}
.video-flack {
  background: none;
  width: 212px;
  height: 126px;
  margin: 0 4px 4px 0;
  .video-box {
    .video-box-header,
    .video-box-content {
      background: #fff;
      color: $gray;
      a {
        color: $gray !important;
      }
    }
    .video-box-header {
      height: 47px;
      line-height: 47px;
      padding: 0 8px;
      z-index: 1;
      .video-box-header-number {
        border-bottom: 1px solid $gray;
        font-size: 38px;
        font-family: 'Roboto';
        font-weight: 100;
        display: inline-block;
        width: 100%;
        position: relative;
      }
      .video-box-header-icons {
        display: inline-block;
        float: right;
        margin: -57px 12px 0 0;
        position: relative;
      }
    }
    .video-box-content {
      padding: 8px 20px;
      height: 46px;
      font-size: 14px;
      line-height: 1.2em;
    }
    .video-box-footer {
      width: 100%;
      height: 16px;
      background: #fff;
    }
    a {
      &:hover {
        .video-box-header,
        .video-box-content,
        .video-box-footer {
          background: $hover;
        }
      }
    }
    &.understood {
      position: relative;
      overflow: hidden;
      .video-box-header,
      .video-box-content {
        position: relative;
      }
      .video-box-header {
        z-index: 2;
      }
      .video-box-content {
        z-index: 1;
        &:after {
          content: "";
          position: absolute;
          bottom: -26px;
          right: -10px;
          width: 60px;
          height: 60px;
          border-radius: 100%;
          background-image: url('../images/icon-check2.svg');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 50% auto;
          opacity: 0.7;
          z-index: -1;
        }
      }
    }
    &.folded {
      .video-box-header {
        background: none;
        position: relative;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          background: #fff;
          width: 100%;
          height: 100%;
          margin-left: -31px;
        }
        &:after {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 38px;
          height: 17px;
          background: #fff;
          content: "";
        }
        .video-box-header-number {
          &:after {
            width: 38px;
            height: 31px;
            background: inline-image('../images/szamarful-felso.svg') right 0 no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: -9px;
            top: 0;
            content: "";
            z-index: 1;
          }
        }
      }
      a {
        &:hover {
          .video-box-header {
            background: none;
            &:before,
            &:after {
              background: $hover;
            }
          }
        }
      }
    }
    &.video-register {
      .video-box-header-icons {
        .video-register {
          width: 13px;
          &:after {
            content: "\f023";
            font-family: 'FontAwesome';
            color: $lighter-gray;
            width: 13px;
            margin-left: -3px;
          }
        }
      }
    }
    &.video-purchasable {
      .video-box-header-icons {
        .video-purchasable {
          width: 13px;
          &:after {
            content: "\f155";
            font-family: 'FontAwesome';
            color: $lighter-gray;
            width: 13px;
            margin-left: -3px;
          }
        }
      }
    }
    &.test {
      .video-box-header-number {
        &:before {
          content: "TESZT";
          float: left;
          font-size: 30px;
        }
        .field-content {
          visibility: hidden;
        }
      }
      &.video-register {
        .video-box-header-icons {
          .video-register {
            &:after {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
.pdf-flack {
  width: 212px;
  height: 126px;
  margin: 0 4px 4px 0;
  background: $topic-cyan;
  .views-field-field-fleck-title {
    margin: 0 8px;
    border-bottom: 1px solid #fff;
    font-family: 'Roboto';
    font-weight: 100;
    font-size: 38px;
    padding: 10px 0 8px 0;
  }
  .views-field-field-pdf-fleck-body,
  .views-field-field-fleck-body-1 {
    a {
      margin: 0 8px;
      padding: 12px;
      font-size: 12px;
      line-height: 1.2em;
      display: inline-block;
    }
  }
}
.entity-quiz-result-answer {
  h2 {
    margin: 0;
  }
  .quiz-report-score-container {
    color: #fff;
    border: none;
    &.q-wrong {
      background: $red;
    }
    &.q-correct {
      background: $green;
    }
  }
  .field-name-body {
    p {
      margin: 0 0 15px 0;
    }
  }
  table {
    tr {
      th,
      td {
        padding: 7px 10px;
      }
    }
    tbody {
      tr {
        td {
          padding: 7px 10px;
          .quiz-score-icon {
            display: table;
            margin: auto;
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
}

.pane-mathsplain-header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  background: $text;
  color: #fff;
  font-family: 'Raleway';
  a {
    color: #fff;
  }
  .pane-mathsplain-header-1 {
    line-height: 30px;
    position: relative;
    #mini-panel-mathsplain_header_1 {
      > .panel-panel {
        padding: 19px 5px;
        height: 30px;
      }
      .panel-col-first {
        padding: 0;
        height: 68px;
        position: relative;
      }
      .panel-col-last {
        float: right;
        padding: 0 15px 0 0;
        > .inside {
          @include flexbox();
        }
        .panel-pane {
          @include flexbox();
          align-items: center;
          -webkit-align-items: center;
          height: 68px;
        }
      }
      #mathsplain-user-menu {
        .multilevelpushmenu_wrapper {
          .multilevelpushmenu_inactive {
            overflow: hidden;
          }
        }
      }
    }
  }
  .menu-buttons {
    position: relative;
    button {
      @extend .button-nostyle;
      color: #fff;
      padding: 0 10px;
      height: 68px;
      box-sizing: border-box;
      position: relative;
      &[data-menu="toggle-main-menu"] {
        &.active,
        &:hover {
          &:before {
            display: none;
          }
        }
      }
    }
    .line {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 5px;
      width: 0;
      background: #fff;
      transition: left 0.5s, width 0.5s;
    }
  }
  .pane-main-menu-left,
  .pane-left-menu {
    @extend .left-menu-style;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.5s, visibility 0.5s;
  }
  .pane-main-menu-left {
    .menu-buttons {
      padding-bottom: 20px;
      button {
        @include flexbox();
        -webkit-align-items: center;
        align-items: center;
        @extend .left-menu-link;
        width: 100%;
        height: 68px;
        padding: 0 20px 0 80px;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        position: relative;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 60px;
          height: 100%;
        }
        &:after {
          left: 70px;
        }
        &[data-menu="toggle-elementary-menu"] {
          &:before {
            @extend .icon-menu-elementary;
            background-position: center center;
            background-size: auto 25px;
          }
        }
        &[data-menu="toggle-highschool-menu"] {
          &:before {
            @extend .icon-menu-highschool;
            background-position: center center;
            background-size: auto 25px;
          }
        }
        &[data-menu="toggle-university-menu"] {
          &:before {
            @extend .icon-menu-university;
            background-position: center center;
            background-size: auto 25px;
          }
        }
        &:hover {
          padding-left: 100px;
        }
      }
      button[data-menu="toggle-main-menu"],
      .line {
        display: none !important;
      }
    }
    nav {
      ul {
        li {
          border: none;
          padding: 5px 0;
          a {
            min-height: auto;
            line-height: 1.5;
            padding-left: 80px;
            &:before {
              display: none;
            }
            &:after {
              left: 70px;
            }
          }
        }
      }
    }
  }
  .university-menu {
    .view-header {
      .all-course {
        @include flexbox();
        -webkit-align-items: center;
        align-items: center;
        @extend .left-menu-link;
        color: #fff;
        padding-left: 90px;
        padding-right: 20px;
        height: 68px;
        position: relative;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        &:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 68px;
          background: $dark-gray url('../images/icon-school-wh.svg') no-repeat center center;
          background-size: auto 25px;
        }
        &:hover {
          padding-left: 110px;
          &:before {
            background-color: #454545;
          }
        }
      }
      .title {
        @include flexbox();
        align-items: center;
        -webkit-align-items: center;
        font-style: italic;
        padding: 6px 10px 6px 90px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        background-color: rgba(255, 255, 255, 0.08);
      }
    }
  }
  .pane-page-logo {
    margin-left: 30px;
  }
  .site-logo {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    pointer-events: none;
    p {
      margin: 0;
    }
    #logo {
      position: relative;
      text-indent: -9999px;
      display: inline-block;
      pointer-events: auto;
    }
  }
  .pane-login-register-pane {
    padding-bottom: 20px;
    background: $middledark-gray;
    max-height: 100vh;
    overflow: auto;
    box-sizing: border-box;
    .panel-col-first,
    .panel-col-last {
      float: right;
    }
    .pane-title {
      font-family: 'Raleway';
      font-size: 30px;
      line-height: 1.2em;
      margin: 1.2em 0;
      text-transform: uppercase;
    }
    a {
      color: $topic-cyan;
    }
    ul {
      @extend .list-nostyle;
      padding: 0;
    }
    .form-required {
      display: none;
    }
    .pane-user-login {
      padding-left: 47px;
    }
    #user-register-form {
      padding-right: 46px;
      border-right: 1px solid $dark-gray;
    }
    #user-login-form {
      ul {
        margin: 0 0 10px 0;
      }
    }
    .form-actions {
      display: inline-block;
      float: left;
      margin: 0 10px 10px 0;
      width: calc(100% - 147px);
    }
    .form-submit {
      margin: 0;
      padding: 19px 10px;
      width: 100%;
      text-align: center;
    }
    #mathsplain-login-pane-closer {
      float: right;
      line-height: 36px;
      &:before {
        display: inline-block;
        font-family: "FontAwesome";
        content: "\f057";
        font-size: 30px;
      }
      &:hover {
        color: $topic-darkcyan;
      }
    }
  }
  .pane-system-main-menu,
  .pane-menu-tree {
    .menu {
      @extend .list-nostyle;
      @extend .list-inline;
      li {
        margin: 0 20px;
        a {
          @extend .link-on-gray;
        }
      }
    }
    .multilevelpushmenu_wrapper {
      min-width: 0;
      width: 180px;
      .menu {
        padding: 0;
        .menu__item {
          font-family: 'Raleway';
          margin: 0;
          padding: 0;
          text-align: right;
          height: 68px;
          border-bottom: 1px solid $text;
          display: table;
          width: 100%;
          a {
            font-size: 22px;
            display: table-cell;
            vertical-align: middle;
            padding: 0 25px 0 18px;
            text-align: right;
            &:hover {
              background: none;
              color: #fff;
            }
          }
          &.first {
            height: 67px;
          }
          &.last {
            border-bottom: 1px solid $text;
          }
          &:hover {
            background: none;
          }
        }
      }
    }
  }
  form {
    * {
      @include box-shadow();
    }
  }
  form[id*="views-exposed-form-search-page"],
  #views-exposed-form-search-page {
    margin: 0 15px 0 0;
    line-height: 1;
    .views-exposed-widgets {
      margin: 0;
      .views-exposed-widget {
        padding: 0;
        .form-text {
          width: 150px;
          border: none;
          @include box-radius(15px,15px,15px,15px);
          color: $light-blue;
          background: $dark-gray;
          line-height: 1em;
          height: 30px;
          padding: 0 30px 0 14px;
          &:focus {
            outline: none;
          }
        }
        label {
          display: none;
        }
        .compact-form-label {
          display: block;
          color: $light-blue;
          font-weight: 400;
          padding: 0 0 0 9px;
          line-height: 30px;
          top: 0;
        }
        &.views-submit-button {
          @extend .search-button;
					color: #fff;
          margin: 0 0 0 -26px;
          position: relative;
          &:after {
            display: inline-block;
            line-height: 29px;
          }
          &:hover {
            color: $light-blue;
          }
        }
        .form-submit {
          margin: 0;
          padding: 0;
          position: absolute;
          background: none;
          z-index: 2;
          @include box-opacity();
        }
      }
    }
  }
  #mathsplain-login-pane-opener {
    line-height: 68px;
    display: block;
    padding: 0 10px;
    position: relative;
    &:hover {
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: #fff;
      }
    }
  }
  #mathsplain-toggle-search-input {
    @extend .search-button;
    margin: 0 20px 0 0;
    font-size: 0;
		color: #fff;
    &:hover {
      cursor: pointer;
      color: $light-blue;
    }
    &:after {
      font-size: 20px;
    }
  }
} /* end header */

button[data-menu='toggle-main-menu'] {
  display: inline-block;
  width: 68px;
  height: 30px;
  padding: 0;
  line-height: 0;
  text-align: center;
  float: left;
  position: relative;
  overflow: hidden;
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -17px;
    display: block;
    width: 34px;
    height: 4px;
    background: #fff;
    border-radius: 3px;
    text-indent: -200vw;
    transition: all 0.5s;
    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 0;
      display: block;
      border-radius: 3px;
      width: 100%;
      height: 100%;
      background: #fff;
      transform: rotate(0deg);
      transition: all 0.5s;
    }
    &:before {
      top: -9px;
    }
    &:after {
      top: 9px;
    }
  }
  &:not(.on) {
    &:hover {
      span {
        &:after {
          width: 50%;
        }
      }
    }
  }
}
#mathsplain-user-menu-opener {
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 18px;
	color: #fff;
  &:after {
    content: "\f007";
    font-family: 'FontAwesome';
    position: absolute;
    left: 0;
    text-indent: 0;
    font-size: 20px;
    width: 18px;
    height: 30px;
  }
  &:hover {
    &:after {
      color: $light-blue;
    }
  }
  &.open {
    &:after {
      content: "\f00d";
    }
  }
}
#mathsplain-header-video {
  display: table;
  width: 100%;
  .text-wrapper {
    vertical-align: middle;
    display: table-cell;
    .limited-wide {
      margin-top: -100px;
    }
  }
  div#mathsplain-header-video-player {
    width: 0;
    height: 0;
  }
  #mathsplain-header-video-left-text {
    font-family: 'Raleway';
    display: inline-block;
    margin: 0 1% 0 0;
    width: 46%;
    float: left;
    text-align: left;
    font-size: 24px;
    color: #fff;
    position: relative;
    top: -28px;
    .title,
    .text {
      width: auto;
    }
    .title {
      font-size: 60px;
      font-weight: bold;
      margin: 0 0 20px 0;
      line-height: 1em;
    }
    .button {
      display: inline-block;
      float: left;
      text-align: center;
      margin: 26px 0 0 0;
      font-size: 18px;
      width: 100%;
      max-width: 320px;
      a {
        color: #fff;
        text-align: center;
        border: 1px solid #fff;
        display: inline-block;
        width: 100%;
        padding: 5px 10px;
        box-sizing: border-box;
      }
      &.how-can-i-learn {
        margin-right: 0;
      }
    }
  }
  #mathsplain-header-video-play-button {
    display: inline-block;
    float: left;
    margin-right: 10px;
    &:after {
      font-family: 'FontAwesome';
      content: "\f144";
      color: #fff;
      display: inline-block;
      font-size: 100px;
    }
    &:hover {
      &:after {
        font-size: 110px;
        position: relative;
        left: -2px;
      }
    }
  }
}

#mathsplain-front-radial-button,
#mathsplain-front-radial-button-2,
.mobile-subjects-toggle {
  font-size: 26px;
  font-weight: normal;
  color: #fff;
  background: none;
  box-shadow: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -65px;
  margin-left: -65px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  width: 130px;
  height: 130px;
  border: 1px solid $text;
  border-radius: 100%;
  z-index: 2;
  a {
    color: #fff;
  }
  span {
    position: relative;
    line-height: 1.1em;
    z-index: 2;
    &.clicked {
      display: none;
    }
  }
  &:before {
    content: "";
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: inline-block;
    background: rgba(41,41,41,0.9);
    z-index: 2;
  }
  &:after {
    content: "";
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius:100%;
    z-index: 1;
    background-color:rgba(255,255,255,.7);
    -webkit-animation-duration:1.75s;
    animation-duration:1.75s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease;
    animation-timing-function:ease;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-name:pulseFade;
    animation-name:pulseFade
  }
  &:hover {
    cursor: pointer;
  }
}
#radial-links {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  @include flexbox();
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  .radial-item {
    position: absolute;
    width: 130px;
    height: 130px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: none;
    a {
      color: inherit;
      font-size: 20px;
      text-align: center;
      position: relative;
      display: inline-block;
      padding-top: 45px;
      opacity: 0;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        background-size: auto 36px !important;
        -webkit-transition: transform 0.5s;
        transition: transform 0.5s;
      }
      &:hover {
        &:before {
          transform: scale(1.3);
          -webkit-transition: transform 0.5s;
          transition: transform 0.5s;
        }
      }
      &[href*="linearis-algebra"] {
        width: 190px;
      }
      &[href*="logaritmikus-egyenletek"] {
        width: 180px;
      }
      &[href*="wahrscheinlichkeitstheorie"] {
        margin-top: -10%;
      }
    }
    &:after {
      position: absolute;
      background: #fff;
      content: "";
      width: 1px;
      height: 1px;
    }
    &.school {
      a {
        &:before {
          background: url('../images/icon-school-gren.svg') no-repeat top center;
        }
      }
    }
    &.integral1 {
      a {
        &:before {
          background: url('../images/icon-integral1-cyan.svg') no-repeat top center;
        }
      }
      &.orange {
        a {
          &:before {
            background: url('../images/icon-integral1-orang.svg') no-repeat top center;
          }
        }
      }
    }
    &.integral2 {
      a {
        &:before {
          background: url('../images/icon-integral2-cyan.svg') no-repeat top center;
        }
      }
    }
    &.gauss {
      a {
        &:before {
          background: url('../images/icon-gauss-y.svg') no-repeat top center;
        }
      }
    }
    &.diagram {
      a {
        &:before {
          background: url('../images/icon-diagram-orang.svg') no-repeat top center;
        }
      }
      &.green {
        a {
          &:before {
            background: url('../images/icon-diagram-gren.svg') no-repeat top center;
          }
        }
      }
    }
    &.summa {
      a {
        &:before {
          background: url('../images/icon-summa-gren.svg') no-repeat top center;
        }
      }
    }
    &.vectors {
      a {
        &:before {
          background: url('../images/icon-vectors-y.svg') no-repeat top center;
        }
      }
    }
    &.building {
      a {
        &:before {
          background: url('../images/icon-building-orang.svg') no-repeat top center;
        }
      }
    }
    &.dimat {
      a {
        &:before {
          background: url('../images/icon-diszkretmatek-cyan.svg') no-repeat top center;
        }
      }
    }
    &.triangle {
      a {
        &:before {
          background: url('../images/icon-triangle-gren.svg') no-repeat top center;
        }
      }
      &.orange {
        a {
          &:before {
            background: url('../images/icon-triangle-orang.svg') no-repeat top center;
          }
        }
      }
    }
    &.highschool-courses {
      color: #fff;
      a {
        width: 190px;
        &:before {
          @extend .icon-menu-highschool;
          background-position: center top;
          background-size: auto 40px !important;
        }
      }
    }
    &.university-courses {
      color: #fff;
      a {
        &:before {
          @extend .icon-menu-university;
          background-position: center top;
        }
      }
    }
    &.elementary-courses {
      color: #fff;
      a {
        &:before {
          @extend .icon-menu-elementary;
          background-position: center top;
        }
      }
    }
    &:first-child {
      a {
        top: 15.5vw;
        left: -21vw;
      }
      &:after {
        top: 110px;
        right: 110px;
        -webkit-transform: rotate(55deg);
        -webkit-transform-origin: right top;
        transform: rotate(55deg);
        transform-origin: right top;
      }
    }
    &:nth-child(2) {
      a {
        top: 2.8vw;
        left: -29.3vw;
      }
      &:after {
        top: 75px;
        right: 130px;
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right top;
        transform: rotate(90deg);
        transform-origin: right top;
      }
    }
    &:nth-child(3) {
      a {
        top: -9vw;
        left: -17vw;
      }
      &:after {
        top: 40px;
        right: 120px;
        -webkit-transform: rotate(120deg);
        -webkit-transform-origin: right top;
        transform: rotate(120deg);
        transform-origin: right top;
      }
    }
    &:nth-child(4) {
      a {
        width: 190px;
        bottom: 130%;
        left: -25%;
      }
      &:after {
        bottom: 100%;
        right: 65px;
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: right top;
        transform: rotate(0deg);
        transform-origin: right top;
      }
    }
    &:nth-child(5) {
      a {
        top: -11vw;
        left: 15vw;
      }
      &:after {
        top: 25px;
        right: 15px;
        -webkit-transform: rotate(-135deg);
        -webkit-transform-origin: right top;
        transform: rotate(-135deg);
        transform-origin: right top;
      }
    }
    &:nth-child(6) {
      a {
        top: -2vw;
        left: 30.7vw;
      }
      &:after {
        top: 60px;
        right: 0;
        -webkit-transform: rotate(-97deg);
        -webkit-transform-origin: right top;
        transform: rotate(-97deg);
        transform-origin: right top;
      }
    }
    &:nth-child(7) {
      a {
        top: 9.2vw;
        left: 32vw;
      }
      &:after {
        top: 80px;
        right: 0;
        -webkit-transform: rotate(-80deg);
        -webkit-transform-origin: right top;
        transform: rotate(-80deg);
        transform-origin: right top;
      }
    }
    &:nth-child(8) {
      a {
        top: 15.5vw;
        left: 15vw;
        width: 220px;
      }
      &:after {
        top: 105px;
        right: 20px;
        -webkit-transform: rotate(-60deg);
        -webkit-transform-origin: right top;
        transform: rotate(-60deg);
        transform-origin: right top;
      }
    }
    &:nth-child(9) {
      a {
        top: 18vw;
        left: -1vw;
        width: 160px;
      }
      &:after {
        top: 120px;
        right: 64px;
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: right top;
        transform: rotate(0deg);
        transform-origin: right top;
      }
    }
    &.cyan {
      color: $topic-cyan;
    }
    &.green {
      color: $topic-green;
    }
    &.orange {
      color: $topic-orange;
    }
    &.yellow {
      color: $topic-yellow;
    }
  }
}
#mathsplain-front {
  @extend #mathsplain-header-video;
  background: none !important;
  height: 700px;
  .head-wrap {
    @include flexbox();
    -webkit-align-items: center;
    align-items: center;
    padding-top: 100px;
    height: 600px;
    position: relative;
  }
  #mathsplain-header-video-left-text {
    top: 0;
    margin-top: -100px;
    width: 100%;
    .title {
      span {
        display: block;
      }
    }
    .text,
    .slideshow {
      font-weight: 400;
      font-size: 34px;
      line-height: 1.2em;
      width: calc(50% - 80px);
    }
    .slideshow {
      margin-bottom: 20px;
      position: relative;
      height: 3em;
      .slideshow-item {
        opacity: 0;
        visibility: hidden;
      	overflow: hidden;
      	position: absolute;
      	left: 0;
      	margin: auto;
        span {
          display: block;
          margin: 0.3em 0;
        }
        .subject {
          a {
            padding: 5px 10px;
            box-decoration-break: clone;
            span, br {
              display: none;
            }
          }
        }
        &.active {
          animation: fade 4s linear 1 0s;
        	-ms-animation: fade 4s linear 1 0s;
        	-webkit-animation: fade 4s linear 1 0s;
        }
      }
    }
  }
  .mobile-subjects-toggle {
    display: none;
    font-size: 20px;
    .icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: inline-block;
      background: url('../images/logo-icon-25.svg');
      background-repeat: no-repeat;
      background-size: 70px;
      background-position: center center;
      opacity: 0.62;
    }
    span {
      text-shadow: 0 0 5px #000;
      font-weight: bold;
    }
  }
  &.splash-on {
    overflow: visible;
    &:before {
      content: "";
      position: fixed;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: rgba(0,0,0,0.85);
      z-index: 11;
    }
    .limited-wide {
      position: relative;
    }
    #radial-links {
      position: absolute;
      z-index: 11;
      top: 0;
      opacity: 1;
      visibility: visible;
      -webkit-transition: opacity 1s;
      transition: opacity 1s;
      .radial-item {
        a {
          opacity: 1;
          -webkit-transition: opacity 0.5s;
          -webkit-transition-delay: 0.5s;
          transition: opacity 0.5s;
          transition-delay: 0.5s;
        }
        &:after {
          -webkit-transition: height 0.5s;
          transition: height 0.5s;
        }
        &:first-child {
          &:after {
            height: 12vw;
          }
        }
        &:nth-child(2) {
          &:after {
            height: 18vw;
          }
        }
        &:nth-child(3) {
          &:after {
            height: 12vw;
          }
        }
        &:nth-child(4) {
          &:after {
            height: 60%;
          }
        }
        &:nth-child(5) {
          &:after {
            height: 8vw;
          }
        }
        &:nth-child(6) {
          &:after {
            height: 18vw;
          }
        }
        &:nth-child(7) {
          &:after {
            height: 24vw;
          }
        }
        &:nth-child(8) {
          &:after {
            height: 12vw;
          }
        }
        &:nth-child(9) {
          &:after {
            height: 7vw;
          }
        }
        &.cyan {
          color: $topic-cyan;
        }
        &.green {
          color: $topic-green;
        }
        &.orange {
          color: $topic-orange;
        }
        &.yellow {
          color: $topic-yellow;
        }
      }
      .radial-close {
        @extend .icon-close;
        position: fixed;
        top: 80px;
        right: 30px;
        display: inline-block;
        text-indent: -200vw;
        width: 30px;
        height: 30px;
        &:hover {
          cursor: pointer;
        }
      }
    }
    #mathsplain-front-radial-button {
      z-index: 12;
      &:before {
        background: $text;
      }
      &:after {
        -moz-animation: none;
        -webkit-animation: none;
        animation: none;
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        background: #646468;
      }
      span {
        &.default {
          display: none;
        }
        &.clicked {
          display: block;
        }
      }
    }
  }
}

.pane-mathsplain-footer-1,
.pane-mathsplain-footer-2 {
  background: $text;
  color: $light-blue;
  display: table;
  a {
    @extend .link-on-gray;
  }
}

.pane-subject-list {
  .view-subject-list {
    .view-content {
      ul {
        @extend .list-nostyle;
        @extend .list-inline;
        padding: 0;
        width: 100%;
        li {
          width: 12.5%;
          display: inline-block;
          .views-field-name {
            margin-right: 1px;
            font-size: 17px;
            line-height: 1.2em;
            .field-content {
              display: inline-block;
              width: 100%;
              background: $topic-green;
              a {
                background: url('../images/icon-summa.svg') no-repeat center 21px;
                background-size: auto 25px;
                display: inline-block;
                width: 100%;
                text-align: center;
                color: #fff;
                padding: 53px 0 0 0;
                height: 42px;
                line-height: 1em;
                position: relative;
                span {
                  display: block;
                  padding: 0 5px;
                }
                .bottom {
                  display: none;
                  padding: 0;
                  background: $topic-green;
                }
                &.active {
                  .bottom {
                    position: absolute;
                    display: inline-block;
                    bottom: 0;
                    left: 0;
                    height: 9px;
                    width: calc(100% - 8px);
                    &:after {
                      content: "";
                      width: 8px;
                      height: 9px;
                      display: inline-block;
                      float: right;
                      position: relative;
                      right: -8px;
                      background: inline-image('../images/active-subject-corner.png') no-repeat right bottom;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.front-promo-video {
  height: 0;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  background: url("../images/landing-promo-video1.jpg") no-repeat;
  background-size: cover;
  .promo-play-button {
    position: absolute;
    margin: auto;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%;
    display: inline-block;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      background: rgba(255, 255, 255, 0.7);
      -webkit-transform: scale(1.3);
      transform: scale(1.1);
      -webkit-transition: transform 0.5s, opacity 0.5s;
      transition: transform 0.5s, opacity 0.5s;
    }
    .play-btn {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      border: 1px solid $text;
      background: rgba(41, 41, 41, 0.9);
      color: #fff;
      text-align: center;
      box-shadow: none;
      text-indent: -200vw;
      overflow: hidden;
      position: relative;
      &:after {
        font-family: "FontAwesome";
        content: "\f04b";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 130px;
        font-size: 60px;
        text-indent: 10px;
      }
    }
    &:hover {
      &:before {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0.15;
      }
    }
  }
  iframe#promo-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    & + .promo-play-button {
      display: none;
    }
  }
}
.slidein-left,
.slidein-right {
  position: absolute;
  bottom: 20%;
  max-width: 50%;
  font-size: clamp(50px, 10vw ,90px);
  font-weight: bold;
  text-shadow: 0 0 30px rgba(0,0,0,0.5);
  line-height: 1;
  color: #fff;
  opacity: 0;
  padding: 0 40px;
  box-sizing: border-box;
  &.show {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.5s, opacity 0.5s;
    transition-timing-function: ease;
  }
}
.slidein-left {
  left: 0;
  transform: translateX(-100%);
}
.slidein-right {
  text-align: right;
  right: 0;
  transform: translateX(100%);
}
.front-title-style {
  font-size: 50px;
  margin: 0 20px 1.2em 20px;
}
.pane-mathsplain-our-video,
.front-text-pane {
  font-family: 'Raleway';
  color: $dark-gray;
  font-size: 22px;
  line-height: 1.4;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    display: inline-block;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    @extend .gradient-bg1;
  }
  & > .pane-content {
    margin: 42px 0 50px 65px;
  }
  .pane-title,
  .title {
    @extend .front-title-style;
    margin-left: 0;
  }
  .text {
    margin-right: 20px;
  }
  .button {
    a {
      @extend .button-cyan;
      color: #fff;
      margin-top: 50px;
      margin-bottom: 10px;
    }
  }
  &.testimonials-title {
    & > .pane-content {
      margin-bottom: 0;
    }
  }
}
.pane-testimonials-panel-pane-1 {
  padding: 0 0 25px 0;
  .pane-content {
    margin-top: 55px;
  }
}
#panel-page-mathsplain-video {
  > .panel-col-first {
    padding-bottom: 90px;
    min-height: 400px;
    .pane-menu-block-1,
    .pane-term-name,
    div[class*="pane-views-"] {
      margin: 20px 0 0 15px; //20px 0 0 30px;
      .pane-content {
        position: relative;
      }
    }
    div[class*="pane-views-"] {
      margin-top: 0;
    }
  }
  > .panel-col-last {
    > .inside {
      padding-left: 20px;
      padding-top: 80px;
      .pane-term-name {
        display: none;
      }
    }
  }
  .pane-taxonomy-term-field-after-topics {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 30px;
    padding-left: 30px;
    padding-right: 24px;
    box-sizing: border-box;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      display: inline-block;
      width: 100vw;
      height: 100%;
      background-color: rgba(255,255,255,0.84);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: -1;
    }
  }
  .pane-menu-block-1,
  .pane-term-name,
  div[class*="pane-views-"] {
    h1,
    .pane-title {
      background: url('../images/icon-summa.svg') no-repeat left center;
      background-size: auto 41px;
      padding: 0 0 0 50px;
      color: #fff;
      font-family: 'Raleway';
      font-size: 26px;
      line-height: 1em;
      display: table-cell;
      vertical-align: middle;
      height: 45px;
      text-transform: none;
      display: table-cell;
      vertical-align: middle;
      position: relative;
      a {
        color: #fff;
      }
      &:before {
        content: "";
        background: url('../images/icon-summa.svg') no-repeat center center;
        background-color: $topic-green;
        background-size: auto 25px;
        width: 68px;
        height: 68px;
        display: none;
        float: left;
      }
    }
  }
  div[class*="pane-views"] {
    position: relative;
    a.back {
      position: absolute;
      top: 50%;
      left: 28px;
      margin-top: -15px;
      text-indent: -200vw;
      font-size: 22px;
      overflow: hidden;
      width: 30px;
      height: 30px;
      line-height: 30px;
      display: none;
      &:after {
        content: "\f053";
        font-family: 'FontAwesome';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        text-indent: 0;
      }
    }
  }
  form[id*="search-by-category"] {
    padding: 40px 0 0 0;
    .views-exposed-widgets {
      position: relative;
      margin: 0;
      .views-exposed-widget {
        padding: 0;
        width: 100%;
        .form-text {
          box-shadow: none;
          border-radius: 30px;
          padding-left: 14px;
          padding-right: 40px;
        }
      }
      .views-submit-button {
        position: absolute;
        top: 0;
        right: 10px;
        width: auto;
        height: 100%;
        @extend .search-button;
        .form-submit {
          margin: 0;
          padding: 0 15px;
          opacity: 0;
          width: 20px;
          height: 100%;
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 7px;
          margin-top: -12px;
          pointer-events: none;
        }
        &:hover {
          color: $text;
        }
      }
    }
  }
  .menu-name-menu-category-menu,
  .pane-mathsplain-general-mathsplain-general-category-menu {
    ul.menu {
      @extend .list-nostyle;
      padding: 0;
      margin: 23px 0 0 0;
      li {
        margin-bottom: 8px;
        font-size: 18px;
        position: relative;
        a {
          color: #fff;
          padding: 7px 14px;
          line-height: 1.3em;
          display: inline-block;
          width: 100%;
          box-sizing: border-box;
          &:hover,
          &.active {
            color: $text;
            background: #fff;
          }
        }
      }
    }
  }
  .pane-videos,
  .pane-clone-of-videos,
  .pane-search-by-category-panel-pane-1 {
    padding-left: 4px;
    margin-right: 24px;
    .view-videos,
    .view-clone-of-videos,
    .view-id-search_by_category {
      margin-top: -60px;
      .view-header {
        .isotope-options {
          background: none;
          .isotope-filters {
            @extend .list-nostyle;
            @extend .list-inline;
            padding: 0;
            display: table;
            table-layout: fixed;
            width: 100%;
            background: rgba(0,0,0,0.2);
            li {
              display: table-cell;
              width: 33.4%;
              max-width: 33.4%;
              height: 75px;
              float: none;
              font-size: 14px;
              padding: 0 10px;
              a {
                @include flexbox();
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 0;
                color: #fff;
                line-height: 1.2;
                text-transform: uppercase;
                position: relative;
                &:before {
                  content: "";
                  margin: 0 10px 0 0;
                  height: 75px;
                  width: 40px;
                  min-width: 38px;
                  display: block;
                  -webkit-transition: transform 0.5s;
                  transition: transform 0.5s;
                }
                &:hover {
                  &:before {
                    -webkit-transform: scale(1.1);
                    transform: scale(1.1);
                  }
                }
              }
              &.current {
                background: rgba(0, 0, 0, 0.2);
                border-top: 3px solid #fff;
              }
            }
            &.tabs-v {
              li {
                vertical-align: middle;
                a {
                  height: auto;
                  vertical-align: middle;
                  flex-flow: column;
                  justify-content: flex-start;
                  text-align: center;
                  &:before {
                    display: inline-block;
                    height: auto;
                    width: auto;
                    min-width: 0;
                    padding: 22px 25px;
                    margin: 0 8px;
                    vertical-align: middle;
                  }
                  span {
                    display: inline-block;
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }
      }
      .view-content {
        padding: 6px 0 1px 6px;
        background: rgba(0, 0, 0, .4);
      }
      .isotope-element {
        @extend .video-flack;
        img {
          width: auto;
        }
        &.exercises,
        &.new-exercises,
        &.formula {
          height: auto;
          width: 99%;
          width: calc(100% - 6px);
          max-width: none;
          margin: 0 6px 6px 0;
          padding: 0 20px;
          background: #fff;
          color: $text;
          box-sizing: border-box;
          .download-pdf-collection {
            margin-bottom: 30px;
            h2 {
              margin-top: 5px;
              margin-bottom: 25px;
            }
            .subject-link,
            .topic-link {
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              background-color: $deep-white2;
              padding: 20px;
              margin: 0 -20px;
              color: #fff;
              position: relative;
              overflow: hidden;
              p {
                color: $text;
                margin: 0 15px 0 0;
              }
              *:first-child {
                margin-top: 0;
              }
              &:before,
              &:after {
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 10px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
              }
              &:before {
                top: -10px;
              }
              &:after {
                bottom: -10px;
              }
            }
            .subject-link {
              padding-bottom: 10px;
              &:after {
                display: none;
              }
            }
            .topic-link {
              padding-top: 10px;
              &:before {
                display: none;
              }
            }
            a {
              @extend .btn;
              font-size: 16px;
              padding: 10px 25px 10px 40px;
              color: #fff;
              position: relative;
              &:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 40px;
                height: 100%;
                background-image: url('../images/icon-pdf-btn.png');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: auto 25px;
              }
            }
            .more {
              margin-bottom: 0;
              font-size: 22px;
            }
          }
          p {
            overflow: auto;
            overflow-y: hidden;
            max-width: calc(100vw - 40px);
          }
          a:not([class*="button"]) {
            color: currentColor !important;
          }
          table {
            max-width: calc(100vw - 40px);
            display: block;
            overflow: auto;
          }
          .MathJax_Display {
            text-align: left !important;
          }
          &[style*="display: none"] {
            display: block !important;
            visibility: hidden;
            pointer-events: none;
            height: 1px !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden;
          }
        }
        &.exercises,
        &.new-exercises {
          position: relative !important;
          float: none;
          .ckeditor-accordion-container {
            .ckeditor-accordion-toggle {
              display: none;
            }
          }
        }
        &.formula,
        &.new-exercises {
          padding-top: 20px;
          padding-bottom: 20px;
          > .tex2jax {
            > hr:last-child {
              display: none;
            }
          }
        }
        &.new-exercises {
          .number {
            float: left;
            margin-right: 10px;
            margin-bottom: 20px;
            padding: 0;
            border-radius: 100%;
            width: 40px;
            height: 40px;
            text-align: center;
            text-indent: 3px;
            line-height: 36px;
            & + .title {
              padding: 5px 0;
            }
          }
          .body {
            clear: both;
          }
        }
      }
      .view-empty {
        color: #fff;
        padding: 30px;
        font-size: 20px;
        font-family: 'Roboto';
        text-align: center;
        display: inline-block;
      }
    }
  }
  .pane-search-by-category-empty-text {
    .view-empty {
      color: #fff;
      padding: 30px;
      font-size: 20px;
      font-family: 'Roboto';
      text-align: center;
      display: inline-block;
      background: rgba(0, 0, 0, 0.4);
      width: 100%;
      box-sizing: border-box;
    }
  }
  .help-layer {
    margin-right: 30px;
    margin-bottom: 30px;
    #mini-panel-subject_term_panel {
      position: relative;
      display: table;
      width: 100%;
      .left,
      .right {
        display: table-cell;
        padding: 25px 25px 120px 25px;
      }
      .left {
        background: $topic-green;
        color: #fff;
        vertical-align: top;
        width: 36%;
        font-family: 'Roboto';
        text-transform: uppercase;
        font-size: 22px;
        line-height: 1.2em;
        &:before {
          content: "";
          position: absolute;
          top: 110px;
          left: -10px;
          width: 20px;
          height: 20px;
          background: $topic-green;
          @include box-rotate(45);
        }
        .topic-summary {
          display: grid;
          grid-template-columns: 0fr auto;
          .number {
            padding-right: 8px;
            text-align: right;
          }
        }
      }
      .right {
        background: #fff;
        width: 64%;
        p {
          margin: 0;
        }
        .top {
          margin-bottom: 60px;
        }
        .bottom {
          margin: 10px 0;
          display: table;
          width: 100%;
          font-size: 15px;
          a {
            display: table-cell;
            height: 72px;
            vertical-align: middle;
            padding-left: 82px;
            color: $topic-green;
            background: inline-image('../images/icon-info-green.svg') no-repeat left center;
            background-size: 62px auto;
          }
        }
        #help-layer-video-player {
          width: 100%;
        }
        &.hidden {
          padding: 0;
          vertical-align: middle;
          line-height: 0;
          .top,
          .bottom {
            display: none;
          }
        }
      }
    }
    .pane-taxonomy-term-field-product {
      position: relative;
      .commerce-add-to-cart {
        position: absolute;
        bottom: 100%;
        margin-bottom: 86px;
        width: 36%;
        & > div {
          padding: 0 25px;
        }
        .form-submit {
          padding: 8px 0;
          width: 100%;
          font-size: 16px;
          background: none;
          border: 1px solid #fff;
          margin: 0;
          text-transform: uppercase;
        }
      }
    }
    .pane-fix-i-need-this-too-button {
      display: none;
      #mini-panel-fix_i_need_this_too_button {
        box-sizing: border-box;
        background: #fff;
        padding: 20px;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        transition: opacity 0.3s, visibility 0.3s;
        &.hide {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }
      }
      a[href="#megveszem"] {
        @extend .button-default-style;
        display: inline-block;
        width: 100%;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        padding: 22px 10px;
        box-sizing: border-box;
      }
    }
    #mathsplain-login-pane-opener-anon-purchase {
      position: relative;
      .pane-content {
        position: absolute;
        bottom: 100%;
        margin-bottom: 86px;
        padding: 0 25px;
        width: 36%;
        box-sizing: border-box;
        p {
          margin: 0;
        }
      }
      button {
        @extend .button-default-style;
        width: 100%;
        padding: 8px 0;
        font-size: 16px;
        background: none;
        border: 1px solid #fff;
        color: #fff;
        text-transform: uppercase;
      }
    }
    .pane-taxonomy-term-product-commerce-price {
      position: relative;
      .field-name-commerce-price {
        position: absolute;
        bottom: 100%;
        margin-bottom: 25px;
        width: 36%;
        font-family: "Roboto";
        text-transform: uppercase;
        line-height: 1.2em;
        color: #fff;
        text-align: center;
        .field-item {
          div {
            font-size: 12px;
            line-height: 1.2;
            padding: 0 15px;
          }
        }
      }
    }
  }
  .pane-taxonomy-term-field-table-of-contents {
    position: relative;
    .field-name-field-table-of-contents {
      .field-items {
        display: none;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        padding: 20px;
        p {
          margin-top: 0;
        }
        .word-link {
          color: #fff;
        }
      }
      .toc-from-formulas {
        h3 {
          margin-bottom: 0.5em;
        }
        ul {
          margin-top: 0;
          li {
            margin-bottom: 1em;
          }
        }
        .formula-title,
        .formula-bullshit,
        p {
          display: inline;
        }
      }
      .button {
        position: absolute;
        left: 36%;
        bottom: 100%;
        padding: 25px;
        font-weight: normal;
        a {
          background: none;
          padding: 0;
          width: 100%;
          font-size: 16px;
          text-transform: none;
        }
      }
    }
  }
  .pane-mathsplain-subject-seo-text-pane-pane {
    padding: 0 24px 0 4px;
  }
}
.view-search {
  .view-header {
    color: #fff;
    margin-bottom: 15px;
  }
  h3,
  .ui-accordion-header {
    background: $topic-green;
    padding: 20px 30px 20px 88px;
    color: #fff;
    clear: both;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 67px;
      height: 100%;
      background: url('../images/icon-summa.svg') no-repeat center center;
      background-size: 20px;
      border-right: 1px solid #fff;
    }
    &:first-child {
      margin-top: 0;
    }
    &:hover,
    &.ui-state-active {
      background-color: $topic-darkgreen;
      &:after {
        background-color: $topic-darkgreen;
      }
    }
  }
  .isotope-element {
    @extend .video-flack;
  }
  .accordion-content {
    padding: 0;
    display: inline-block;
    overflow: hidden;
    .views-row {
      @extend .video-flack;
      display: inline-block;
      float: left;
    }
  }
  .video-box {
    .video-box-header {
      .video-box-header-number {
        padding: 0;
        line-height: 37px;
        .subject-icon {
          margin-top: 5px;
          width: 37px;
          height: 37px;
          display: inline-block;
          -webkit-filter: invert(0.3);
          filter: invert(0.3);
        }
      }
    }
  }
  .pager {
    li {
      a {
        color: #fff;
        @include txt-shadow(0,0,2px,$text);
      }
      &.pager-current {
        background: #fff;
        color: $text;
      }
    }
  }
  .view-empty {
    font-size: 28px;
    color: #fff;
    line-height: 1.3;
  }
}
.view-search-by-category {
  .video-box {
    .video-box-header {
      .video-box-header-number {
        .subject-icon {
          display: inline-block;
          width: 45px;
          -webkit-filter: invert(0.3);
          filter: invert(0.3);
        }
      }
    }
  }
  .view-empty {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    span {
      display: block;
      font-size: 28px;
      text-transform: uppercase;
      margin-bottom: 30px;
    }
    .btn {
      @extend .button-cyan;
      margin-top: 20px;
    }
  }
}
.view-exercises-by-master-topic {
  .views-row {
    border-bottom: 1px solid $light-gray;
    padding-bottom: 30px;
    margin-bottom: 30px;
    .number {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: $topic-cyan;
      color: #fff;
      text-align: center;
      text-indent: 3px;
      font-size: 20px;
      line-height: 48px;
      border-radius: 100%;
      margin-bottom: 20px;
    }
    .node-exercises {
      .field-name-body {
        p {
          margin: 0 0 30px 0;
        }
      }
      .field-name-field-related-swiffy-entity {
        > div:first-child {
          border: 0;
          padding-bottom: 0;
          margin-bottom: 15px;
          .btn {
            margin: 0 10px 15px 0;
            box-sizing: border-box;
          }
          .topics-toggle {
            position: relative;
            &:before {
              content: "";
              position: absolute;
              left: 10px;
              top: 0;
              bottom: 0;
              margin: auto;
              display: inline-block;
              width: 8px;
              height: 8px;
              border: 2px solid #fff;
              border-left: 0;
              border-bottom: 0;
              transform: rotate(45deg);
              transition: transform 0.5s;
            }
            &.topics-open {
              &:before {
                transform: rotate(135deg);
              }
            }
          }
        }
        .field-items {
          display: none;
        }
      }
    }
    &:last-child {
      border: 0;
      padding-bottom: 0;
      margin-bottom: 0;
    }
  }
}
#mathsplain-mycourses-isotope-container {
  .isotope-element {
    width: 235px;
    height: 209px;
    margin: 0 5px 71px 0;
    background-color: $topic-green;
    .isotope-link {
      a {
        box-sizing: border-box;
        text-align: center;
        padding: 115px 5px 0 5px;
        display: inline-block;
        width: 100%;
        height: 209px;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
      }
    }
    .isotope-date {
      color: #fff;
      font-size: 12px;
      display: block;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      bottom: 36px;
      line-height: 1.2em;
      pointer-events: none;
    }
    .isotope-understood {
      a {
        @include flexbox();
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        @extend .icon-bookmark;
        background-size: 34px auto;
        background-position: 10px -3px;
        background-color: $topic-green;
        height: 64px;
        margin-top: 2px;
        padding: 10px 6px 10px 50px;
        font-size: 16px;
        text-align: center;
        text-transform: uppercase;
        box-sizing: border-box;
        color: #fff;
      }
    }
  }
  .purchased {
    margin: -10px 0 20px 0;
    display: inline-block;
    width: 100%;
  }
  .unpurchased {
    .isotope-element {
      background: $light-gray;
    }
  }
  .coupons {
    @include flexbox();
    flex-wrap: wrap;
    > h2 {
      width: 100%;
    }
    .coupon {
      margin: 0 5px 5px 0;
      padding: 8px;
      width: 219px;
      display: inline-block;
      background-color: $topic-cyan;
      color: #fff;
      .row {
        @include flexbox();
        align-items: center;
      }
      .percentage {
        display: inline-block;
        padding: 7px 25px 7px 7px;
        margin-right: 10px;
        font-size: 26px;
        outline: 2px solid;
        outline-offset: -2px;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          right: 15px;
          width: 1px;
          height: 100%;
          border-right: 2px dashed;
        }
        &:after {
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          width: 8px;
          height: 8px;
          margin: -6px -6px 0 0;
          border-radius: 100%;
          background: $topic-cyan;
          border: 2px solid;
        }
      }
      .coupon-code {
        display: inline-block;
        font-size: 16px;
      }
      .expiration-date {
        font-size: 12px;
        padding-top: 8px;
        line-height: 1;
      }
    }
  }
}
.comment-form {
  background: rgba(0,0,0,0.4);
  padding: 10px;
  color: #fff;
  .filter-wrapper {
    padding: 0;
  }
}
.comment {
  margin: 20px 0;
  .submitted {
    background: rgba(0,0,0,0.4); //inline-image('../images/opacity-bg.png');
    color: #fff;
    padding: 10px;
    .new {
      float: right;
      background: $topic-orange;
      color: #fff;
      margin-right: -10px;
      padding: 0 10px;
      line-height: 45px;
    }
  }
  .content {
    background: #fff;
    padding: 10px;
    font-size: 14px;
    p {
      margin-top: 0;
    }
  }
  .links {
    color: #fff;
  }
}
#comments {
  margin: 0 0 20px 0;
  .comments-header {
    background: rgba(0,0,0,0.4);
    padding: 30px 10px 10px 10px;
    color: #fff;
    .title {
      font-family: 'Raleway';
      font-size: 22px;
      margin-top: -10px;
      &.button {
        a {
          @extend .button-cyan;
          padding: 8px 20px;
          font-size: 14px;
        }
      }
    }
    .links {
      font-family: 'Raleway';
      font-size: 18px;
      &:before {
        content: "\f0e6";
        font-family: 'FontAwesome';
        margin-right: 10px;
      }
    }
  }
  .comments-empty {
    color: #fff;
    //font-family: 'ProximaNovaLight';
    font-family: 'Raleway';
    font-size: 18px;
    padding: 8px 10px;
    //@include noselect;
  }

  .indented {
    .comment {
      margin: 10px 0 25px 0;
      header {
        .submitted {
          margin: 5px 0;
        }
        .new {
        line-height: 35px;
      }
      }
    }
  }
}
.pane-mathsplain-purchasingpage-pane {
  padding: 18px 44px;
  margin: 0 30px;
  background: #fff;
}
.social-links {
  margin: 0 auto;
  display: table;
  ul {
    @extend .list-nostyle;
    @extend .list-inline;
    padding: 0;
    li {
      margin: 0 3px;
      a {
        position: relative;
        width: 34px;
        height: 34px;
        display: inline-block;
        &:before {
          font-family: 'FontAwesome';
          border: 1px solid $gray;
          display: inline-block;
          line-height: 32px;
          text-align: center;
          width: 32px;
          height: 32px;
          @include box-radius(100%,100%,100%,100%);
        }
        &.facebook {
          &:before {
            content: "\f09a";
          }
        }
        &.twitter {
          &:before {
            content: "\f099";
          }
        }
        &.google-plus {
          &:before {
            content: "\f0d5";
          }
        }
        &.in {
          &:before {
            content: "\f0e1";
          }
        }
        &.youtube {
          &:before {
            content: "\f167";
            font-size: 20px;
          }
        }
        &.instagram {
          &:before {
            content: "\f16d";
          }
        }
        &:hover {
          &:before {
            color: #fff;
            background: $topic-cyan;
            border-color: $topic-cyan;
          }
        }
      }
    }
  }
}
.pane-mathsplain-footer-1 {
  position: absolute;
  bottom: 0;
  .maths-panel-display {
    &.panel-3col-33-stacked {
      .center-wrapper {
        display: table;
        margin: 40px auto;
        .panel-panel {
          & > .inside {
            margin-bottom: 0;
          }
          width: auto;
          text-align: center;
          color: $light-blue; //$gray;
          padding: 0 32px 0 30px;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 2px;
            height: 80px;
            background: $dark-gray;
          }
          &.panel-col-last {
            &:after {
              display: none;
            }
          }
          .title {
            @extend .uppercase;
            margin-bottom: 8px;
          }
          ul {
            @extend .list-nostyle;
            padding: 0;
            margin-bottom: 15px;
            li {
              line-height: 1.3em;
              font-size: 14px;
              a {
                &:hover {
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
  ul.social-links {
    margin: 0 auto;
  }
  .award {
    background: url('../images/ev-honlapja-abszolut-gr-2019.svg') no-repeat,
    url('../images/ev-honlapja-gr-2024.svg') no-repeat,
    url('../images/ev-honlapja-gr-2023.svg') no-repeat,
    url('../images/ev-honlapja-gr-2022.svg') no-repeat,
    url('../images/ev-honlapja-gr-2021.svg?v=1') no-repeat,
    url('../images/ev-honlapja-gr-2020.svg?v=1') no-repeat,
    url('../images/ev-honlapja-gr-2019.svg?v=1') no-repeat,
    url('../images/ev-honlapja-gr-2018.svg?v=1') no-repeat,
    url('../images/ev-honlapja-gr-2017.svg?v=1') no-repeat,
    url('../images/ev-honlapja-gr-2016.svg?v=1') no-repeat,
    url('../images/ev-honlapja-gr-2015.svg?v=1') no-repeat;
    background-position: 0 center, 85px center, 175px center, 265px center, 355px center, 445px center, 535px center, 625px center, 715px center, 805px center, 895px center;
    background-size: auto 80px, auto 66px, auto 66px, auto 66px, auto 66px, auto 66px, auto 66px, auto 66px, auto 66px, auto 66px, auto 66px;
    height: 80px;
    width: 970px;
    margin: 0 0 20px 0;
    position: relative;
  }
  .footer-links {
    margin: -20px auto 20px auto;
    display: table;
    font-size: 14px;
    .using-the-site {
      span {
        line-height: 24px;
        padding-right: 7px;
        margin-right: 3px;
        border-right: 2px solid $dark-gray;
        &.last {
          border: none;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
  .copyright {
    font-size: 10px;
    text-align: center;
    line-height: 1.2em;
    margin: 45px 0 35px 0;
    p {
      margin: 0;
    }
  }
  .panel-col-bottom2 {
      background: #fff;
      padding: 50px 0;
  }
}
#mini-panel-mathsplain_footer_logos {
  display: table;
  margin: auto;
  & > .panel-panel {
    width: auto;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    float: none;
    & > .inside {
      margin: 0 auto;
      & > .panel-pane {
        padding: 6px 0 6px 19px;
        .pane-content {
          margin-left: 20px;
        }
        &:before {
          content: "";
          display: inline-block;
          position: absolute;
          top: 0;
          left: 20px;
          height: 100%;
          width: 1px;
          background: $light-gray;
        }
      }
    }
    &.panel-col-first {
      & > .inside {
        & > .panel-pane {
          padding-left: 0;
          .pane-content {
            margin-left: 0;
          }
          &:before {
            display: none;
          }
        }
      }
    }
    p {
      margin: 0;
    }
  }
  .barion {
    display: inline-block;
    line-height: 0;
    margin-top: 5px;
    a {
      display: inline-block;
      width: 412px;
      height: 48px;
      background: url('../images/barion.svg?v2') no-repeat;
      background-size: 100% auto;
      background-position: center center;
      text-indent: -200vw;
      overflow: hidden;
    }
  }
  .footer-logos-macroweb {
    position: relative;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    &:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 100%;
      left: 5%;
      width: 90%;
      height: 10px;
      opacity: 0;
      background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
      -webkit-transition: opacity 0.5s;
      transition: opacity 0.5s;
    }
    &:hover {
      -webkit-transform: translateY(-5px);
      transform: translateY(-5px);
      &:before {
        opacity: 1;
      }
    }
    a {
      display: inline-block;
      width: 192px;
      height: 38px;
      margin-top: 2px;
      text-indent: -200vw;
      overflow: hidden;
      background: inline-image('../images/macroweb-logo.svg') no-repeat center center;
      background-size: 100% auto;
    }
  }
}

.start-learning {
  text-align: center;
  padding: 80px 0;
  color: $dark-gray;
  box-sizing: border-box;
  h2 {
    padding: 0 20px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 38px;
    max-width: 800px;
  }
  p {
    margin: 0;
  }
  .sub-intro {
    font-size: 20px;
    padding: 0 20px;
  }
  .subject-icons {
    margin-top: 35px;
  }
  .button {
    font-size: 35px;
    background: none;
    border: 1px solid $topic-cyan;
    display: inline-block;
    padding: 15px 30px;
    line-height: 1em;
    color: $topic-cyan;
    margin-top: 35px;
    a {
      color: $topic-cyan;
    }
  }
}
.view-testimonials {
  color: $dark-gray;
  font-family: 'Raleway';
  .splide {
    max-width: 100vw;
    .splide__list {
      .splide__slide {
        @extend .lp-white-box;
        padding: 20px;
        margin: 20px;
        font-size: 18px;
        width: auto !important;
        max-width: 435px;
        display: flex;
        flex-flow: column;
        .views-field-body {
          margin-bottom: 20px;
          flex-grow: 1;
          max-height: 150px;
          overflow: hidden;
          position: relative;
          .field-content {
            max-height: 130px;
            padding-bottom: 20px;
            overflow: auto;
          }
          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
          }
          p {
            margin: 0;
          }
        }
        .views-field-field-name,
        .views-field-field-job {
          font-size: 18px;
          color: $gray;
        }
        .views-field-field-name {
          font-weight: bold;
        }
        .views-field-field-stars {
          .stars {
            display: inline-block;
            height: 20px;
            width: 20px;
            background: url('../images/icon-star.png') repeat-x left center;
            background-size: auto 15px;
            &[data-stars="0.5"] {
              width: 10px;
            }
            &[data-stars="1.5"] {
              width: 30px;
            }
            &[data-stars="2"] {
              width: 40px;
            }
            &[data-stars="2.5"] {
              width: 50px;
            }
            &[data-stars="3"] {
              width: 60px;
            }
            &[data-stars="3.5"] {
              width: 70px;
            }
            &[data-stars="4"] {
              width: 80px;
            }
            &[data-stars="4.5"] {
              width: 90px;
            }
            &[data-stars="5"] {
              width: 100px;
            }
          }
        }
      }
    }
  }
  .flexslider {
    width: 100% !important;
    @include box-shadow();
    border: none;
    background: none;
    .flex-viewport {
      height: 100% !important;
    }
    .slides {
      li {
        font-size: 20px;
        background: url('../images/quote.svg') no-repeat 0 0;
        background-size: 64px auto;
        .views-field {
          margin-left: 95px;
          p {
            margin: 0;
          }
          &.views-field-body {
            .field-content {
              margin: 10px 0;
            }
          }
        }
      }
    }
    .flex-control-nav {
      .flex-active {
        background: $topic-cyan;
      }
    }
  }
  .view-footer {
    padding-left: 95px;
  }
}
.view-press {
  max-width: 100vw;
  .splide {
    .splide__list {
      .splide__slide {
        width: auto !important;
        max-width: 200px;
        margin: 0;
        .views-field-field-press-image {
          height: 100px;
          padding: 10px 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          .field-content {
            height: 100%;
            a {
              display: inline-block;
              height: 100%;
            }
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            -o-object-fit: contain;
          }
        }
      }
    }
  }
}
.hybridauth-widget-wrapper {
  ul.hybridauth-widget {
    display: table;
    margin: 0;
    li {
      float: left;
      margin: 0 10px 10px 0;
      &.last {
        margin-right: 0;
      }
      .hybridauth-widget-provider {
        line-height: 48px;
        color: #fff;
        .hybridauth-icon {
          @include box-opacity(1);
          width: 63px;
          height: 63px;
          &.google {
            background: inline-image('../images/google.png');
          }
          &.facebook {
            background: inline-image('../images/facebook.png');
          }
          &:hover {
            @include box-opacity(0.8);
          }
        }
      }
    }
  }
  .item-list {
    & > div {
      clear: left;
    }
  }
}


.node {
  &.node-formula,
  &.node-exercises {
    .field-name-field-related-swiffy-entity {
      > div:first-child {
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid $light-gray;
      }
    }
  }
  &.node-video {
    &.view-mode-full {
      max-width: 1000px;
      .to-fullscreen {
        position: relative;
        .video-header {
          position: relative;
          .item-list {
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% - 80px);
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
          }
        }
      }
      .help-on {
        .help-layer {
          z-index: 4;
        }
        .field-name-field-swiffy-entity,
        .field-name-field-h5p {
          #swiffycontainer,
          #swiffycontainer2,
          #animation_container,
          .node-h5p-content {
            visibility: hidden;
            opacity: 0;
          }
        }
      }
      ul.bc {
        @extend .list-nostyle;
        @extend .list-inline;
        @include flexbox();
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        padding-left: 40px;
        font-size: 16px;
        z-index: 1;
        box-sizing: border-box;
        li {
          white-space: nowrap;
          position: relative;
          padding-right: 18px;
          &:after {
            content: ">";
            position: absolute;
            top: 0;
            right: 0;
            width: 18px;
            text-align: center;
            line-height: 24px;
          }
          &:first-child,
          &:last-child {
            padding-right: 0;
            &:after {
              display: none;
            }
          }
          &:first-child {
            position: absolute;
            left: 8px;
            top: 100%;
            margin-top: -15px;
            width: 20px;
            height: 100%;
            a {
              text-indent: -200vw;
              overflow: hidden;
              display: inline-block;
              width: 100%;
              height: 100%;
              &:hover {
                -webkit-animation: hvr-icon-wobble-horizontal 1s;
                animation: hvr-icon-wobble-horizontal 1s;
              }
            }
          }
          a {
            &:hover {
              text-decoration: underline;
            }
          }
        }
        &.collapse {
          li:not(.first) {
            a {
              display: inline-block;
              max-width: 100px;
              overflow: hidden;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              &:hover {
                max-width: none;
                background: none !important;
                -webkit-text-fill-color: inherit !important;
              }
            }
          }
        }
      }
      .field-name-title-field {
        background: rgba(0,0,0,0.2);
        min-height: 27px;
        padding: 20px 0 5px 0;
        .field-item {
          padding: 0 120px 0 80px;
          max-width: 1000px;
          box-sizing: border-box;
        }
        h1 {
          font-family: 'Raleway';
          font-size: 24px;
          font-weight: normal;
          color: #fff;
          margin: 0;
          padding-top: 3px;
          line-height: 1.2em;
          text-transform: none;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      #canvas-voice {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 37px;
        margin-right: 85px;
        a {
          position: absolute;
          display: inline-block;
          width: 100%;
          height: 100%;
          text-indent: -9999px;
          color: #fff;
          background: inline-image('../images/speak-on.svg') no-repeat center center;
          background-size: auto 28px;
        }
        &.muted {
          a {
            background: inline-image('../images/speak-off.svg') no-repeat center center;
            background-size: auto 28px;
          }
        }
      }
      .field-name-field-category {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        -webkit-transition: transform 0.3s;
        transition: transform 0.3s;
        .field-items {
          display: table;
          height: 100%;
          .field-item {
            display:table-cell;
            vertical-align: middle;
          }
        }
        .lineage-item {
          a {
            position: relative;
            text-indent: -9999px;
            display: inline-block;
            float: right;
            margin: 0;
          }
          &.lineage-item-level-0 {
            a {
              @extend .icon-close;
              background-size: auto 23px;
              width: 37px;
              height: 37px;
            }
          }
        }
        &:hover {
          -webkit-transform: scale(1.2);
          transform: scale(1.2);
        }
      }
      #fullscreen {
        position: absolute;
        top: 0;
        right: 0;
        text-indent: -9999px;
        display: inline-block;
        float: right;
        margin: 0 42px 0 0;
        background: inline-image('../images/video-scr-full.svg') no-repeat center center;
        background-size: auto 23px;
        width: 37px;
        height: 100%;
        z-index: 1;
        -webkit-transition: transform 0.3s;
        transition: transform 0.3s;
        &:hover {
          -webkit-transform: scale(1.2);
          transform: scale(1.2);
        }
      }
      .field-name-field-number {
        font-family: 'Roboto';
        font-weight: 300;
        font-size: 30px;
        margin: 0 0 0 40px;
        color: #fff;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        .field-items {
          display: table;
          height: 100%;
          .field-item {
            display:table-cell;
            vertical-align: middle;
            padding-top: 20px;
          }
        }
      }
      .field-name-field-swiffy-entity {
        position: relative;
        #swiffycontainer,
        #swiffycontainer2,
        #animation_container {
          width: 100% !important;
          height: 0 !important;
          padding-top: 52%;
          position: relative;
          canvas {
            background: #fff;
            z-index: 2;
            position: absolute !important;
            top: 0;
            left: 0;
          }
        }
        #swiffycontainer,
        #swiffycontainer2 {
          & > div {
            position: static !important;
          }
        }
        #animation_container {
          canvas,
          #dom_overlay_container {
            top: 0 !important;
            left: 0 !important;
            right: 0;
            margin: auto;
          }
        }
      }
      .field-name-field-h5p {
        position: relative;
        .help-layer {
          .no-video {
            .bottom {
              .txt {
                line-height: 1.1;
                span {
                  display: block;
                }
              }
            }
          }
          .right {
            a {
              position: absolute;
              left: 20%;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              border: 2px solid #fff;
              background-image: url('../images/video-play.svg') !important;
              background-repeat: no-repeat;
              background-position: center center !important;
              background-size: auto 60% !important;
              width: 47%;
              height: 16%;
            }
          }
          .info-layer {
            color: #fff;
            .description {
              padding: 20px;
              text-align: center;
            }
          }
        }
        .node-h5p-content {
          width: 100%;
          height: auto;
          padding: 0;
          .h5p-iframe-wrapper {
            width: 100%;
            height: 36px;
            padding-top: 56.25%;
            position: relative;
            > iframe {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100% !important;
              max-width: 100%;
              z-index: 3;
            }
          }
        }
      }
      .no-access-wrapper {
        width: 100%;
        height: 100%;
        min-height: 500px;
        background: rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        .no-access-field-description {
          margin: 0 20px;
          padding-top: 30px;
          min-height: 245px;
          max-width: 630px;
          line-height: 1em;
          color: #fff;
          box-sizing: border-box;
        }
        .no-access-link {
          width: 100%;
          height: 100%;
          min-height: 500px;
          padding: 20px 0;
          display: table;
          & > div {
            width: 100%;
            height: 100%;
            min-height: 500px;
            display: table;
          }
          .video-register {
            @extend .button-cyan;
            margin: 0 auto;
            padding: 20px 96px;
            font-size: 24px;
            display: table;
            float: none;
          }
          .left,
          .right {
            display: table-cell;
            vertical-align: top;
            padding: 40px 40px 0 40px;
          }
          .left {
            vertical-align: bottom;
            padding-top: 250px;
            width: 36%;
            background: $topic-cyan;
            font-family: 'Roboto';
            text-transform: uppercase;
            font-size: 22px;
            line-height: 1.2em;
            color: #fff;
            position: relative;
            .title {
              padding: 10px;
              width: 200px;
              height: 200px;
              border: 2px solid #fff;
              text-align: center;
              font-family: 'Roboto';
              font-weight: 300;
              box-sizing: border-box;
              position: absolute;
              top: 40px;
              &:before {
                content: "";
                display: block;
                height: 100px;
                width: 100%;
              }
            }
            .topic-summary {
              border-bottom: 2px solid #fff;
              padding: 10px 0;
              span {
                display: block;
              }
            }
            .price {
              margin-top: 10px;
              margin-bottom: 5px;
            }
            .month-price {
              font-size: 14px;
              margin-bottom: 20px;
              line-height: 1.2;
            }
          }
          .right {
            background: #fff;
            position: relative;
            .description {
              .highlighted {
                font-weight: bold;
                font-size: 1.3em;
                margin-bottom: 1.5em;
              }
              /* Case: https://kanbanflow.com/t/kiz1YCRn
              .month-price {
                margin-top: 20px;
                font-weight: bold;
              }*/
              .description-plus {
                margin-top: 20px;
                font-weight: bold;
              }
            }
            .commerce-add-to-cart {
              position: absolute;
              width: 100%;
              left: 0;
              bottom: 50px;
              text-align: center;
              .form-submit {
                margin: 0;
                text-transform: uppercase;
              }
            }
          }
        }
      }
      .help-layer,
      .closing-help-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 38%;
          width: 2px;
          height: 40%;
          background: #fff;
        }
        .help-layer-inner {
          display: inline-block;
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
          &:before,
          &:after {
            content: "";
            position: absolute;
            top: 0;
            height: 62%;
            background: #fff;
          }
          &:before {
            width: 120%;
            right: 38%;
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
            -webkit-transform: rotate(11.3deg);
            transform: rotate(11.3deg);
          }
          &:after {
            width: 50%;
            left: 62%;
            -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
            -webkit-transform: rotate(-61deg);
            transform: rotate(-61deg);
          }
        }
        .radial-button {
          @extend #mathsplain-front-radial-button;
          left: 62%;
          top: 62%;
          border: none;
          &:before {
            opacity: 0.9;
          }
          span {
            text-indent: -200vw;
            overflow: hidden;
            display: inline-block;
            width: 100%;
            height: 100%;
            background: url('../images/icon-info-wh.svg') no-repeat center center;
            background-size: auto 80%;
            position: relative;
          }
        }
        .info-layer {
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.9);
          overflow: hidden;
          visibility: hidden;
          opacity: 0;
          z-index: 1;
          .back,
          .step {
            position: absolute;
            top: 50%;
            display: inline-block;
            height: 100px;
            width: 26px;
            margin-top: -50px;
            z-index: 1;
            span {
              position: absolute;
              bottom: 70%;
              width: 200px;
              max-width: 40vw;
            }
            &:before {
              content: "";
              display: inline-block;
              width: 100%;
              height: 100%;
              background: url('../images/video-step.svg');
              background-repeat: no-repeat;
              background-position: 5px center;
              background-size: 15px auto;
            }
          }
          .back {
            right: 100%;
            margin-right: -24px;
            span {
              left: 100%;
            }
            &:before {
              -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
            }
          }
          .step {
            left: 100%;
            margin-left: -24px;
            span {
              right: 100%;
              text-align: right;
            }
          }
          .keyboard {
            top: auto;
            left: auto;
            right: 0;
            bottom: 0;
            width: 100px;
            margin: 0 24px 10px 0;
            span {
              right: 0;
              bottom: 80%;
              width: 150%;
            }
            &:before {
              display: none;
            }
            &:after {
              content: "";
              position: absolute;
              top: auto;
              bottom: 0;
              right: 0;
              width: 100%;
              height: 74%;
              display: inline-block;
              background-size: 100%;
              background-repeat: no-repeat;
              background-position: center center;
            }
          }
          .play {
            position: absolute;
            bottom: 20px;
            left: 22px;
            display: none;
            width: 18%;
            height: 20%;
            background: url('../images/video-play.svg') no-repeat center center;
            background-size: auto 60px;
            z-index: 1;
            span {
              position: absolute;
              bottom: 80%;
              left: 0;
              min-width: 90px;
            }
          }
          span[class*="line"] {
            position: absolute;
            top: 62%;
            left: 62%;
            height: 2px;
            width: 1px;
            background: #fff;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
          }
          .line1 {
            transform: rotate(-10deg);
          }
          .line2 {
            transform: rotate(-174deg);
          }
          .line3 {
            transform: rotate(-194.5deg);
            display: none;
          }
          .line4 {
            transform: rotate(30deg);
          }
        }
        .left,
        .right {
          position: relative;
          display: inline-block;
          float: left;
          height: 100%;
          z-index: 1;
        }
        .left {
          width: 62%;
          vertical-align: middle;
        }
        .right {
          float: right;
          width: 38%;
          color: #fff;
          a {
            background: url('../images/stepbystep.svg') no-repeat center right 40px;
            background-size: auto 35% !important;
            display: table;
            width: 100%;
            height: 100%;
            .learn,
            .step-by-step {
              display: inline-block;
              width: 0;
              height: 0;
              visibility: hidden;
              overflow: hidden;
            }
          }
        }
        .no-video {
          .top {
            font-size: 28px;
            line-height: 1.3em;
            margin: 0 0 0 20px;
            position: absolute;
            top: 0;
            left: 0;
            height: 40%;
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
          }
          .bottom {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            height: 20%;
            margin: 0;
            font-weight: bold;
            color: #fff;
            a {
              color: #fff;
              text-decoration: underline;
            }
            .txt {
              padding: 0 70px 0 20px;
              font-size: 30px;
              font-weight: 200;
              line-height: 1;
              position: absolute;
              left: 0;
              bottom: 0;
            }
          }
        }
        #help-layer-video-player {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        .hidden {
          display: none;
        }
        &.canvas {
          a.video {
            line-height: 1;
            display: inline-block;
            margin-left: 20px;
            width: 30%;
            height: 100%;
            padding: 20px 0;
            border: 2px solid #fff;
            box-sizing: border-box;
            position: relative;
            .inner {
              display: inline-block;
              width: 100%;
              height: 100%;
              position: relative;
              text-indent: -200vw;
              overflow: hidden;
              background: url('../images/video-play.svg') no-repeat center center;
              background-size: auto 100%;
            }
            .label {
              position: absolute;
              left: 100%;
              top: 50%;
              display: inline-block;
              width: 100%;
              font-size: 30px;
              color: #fff;
              font-weight: 200;
              margin-left: 15px;
              -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
              span {
                font-family: "Roboto";
              }
            }
          }
          .right {
            a {
              &.step-by-step {
                @include flexbox();
                -webkit-align-items: center;
                align-items: center;
                position: absolute;
                top: 25%;
                right: 0;
                width: auto;
                height: 50%;
                margin-right: 0;
                background: none;
                line-height: 1;
                .step-by-step {
                  border: none;
                  display: inline-block;
                  width: 26px;
                  height: 164px;
                  visibility: visible;
                  box-sizing: border-box;
                  text-indent: 0;
                  position: absolute;
                  right: 0;
                  &:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 100%;
                    background-color: rgba(0,0,0,0.2);
                    display: inline-block;
                    width: 100px;
                    height: 100%;
                    z-index: -1;
                  }
                  .inner {
                    background: url('../images/video-step.svg') no-repeat right 4px center;
                    background-size: 15px auto;
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    text-indent: -200vw;
                    overflow: hidden;
                  }
                }
                .label {
                  font-size: 30px;
                  color: #fff;
                  font-weight: 200;
                  margin-right: 50px;
                }
                &:hover {
                  .step-by-step {
                    &:before {
                      background-color: rgba(0,0,0,0.4);
                    }
                  }
                }
              }
            }
          }
          .info-layer {
            .play,
            .line3 {
              display: inline-block;
            }
          }
        }
        &.info {
          .radial-button {
            &:before {
              background: $text;
            }
            &:after {
              background: #fff;
              -webkit-animation: none;
              animation: none;
              -webkit-transform: scale(1.1);
              transform: scale(1.1);
            }
          }
          .info-layer {
            visibility: visible;
            opacity: 1;
            transition: all 0.5s;
            span[class*="line"] {
              transition: width 0.5s;
            }
            .line1 {
              width: 36%;
            }
            .line2 {
              width: 60%;
            }
            .line3 {
              width: 48%;
            }
            .line4 {
              width: 28%;
            }
          }
        }
      }
      .help-layer {
        .right {
          a {
            color: #fff;
          }
        }
      }
      .closing-help-layer {
        display: none;
        font-size: 36px;
        line-height: 1em;
        .help-layer-inner {
          &:before,
          &:after {
            display: none;
          }
        }
        .left {
          @include flexbox();
          -webkit-flex-flow: column;
          flex-flow: column;
          box-sizing: border-box;
          color: #fff;
          > *:first-child {
            -webkit-flex-grow: 1;
            flex-grow: 1;
          }
          .text {
            margin: 0;
            padding: 0 40px;
            line-height: 1.2em;
            color: #fff;
            text-align: center;
            display: inline-block;
            position: relative;
            box-sizing: border-box;
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            -webkit-flex-grow: 1;
            flex-grow: 1;
          }
          #back-arrow {
            position: absolute;
            top: 50%;
            left: 0;
            display: inline-block;
            width: 26px;
            height: 164px;
            margin: -90px 0 0 0;
            text-indent: -200vw;
            overflow: hidden;
            &:before,
            &:after {
              content: "";
              position: absolute;
              top: 0;
              right: 0;
              width: 100%;
              height: 100%;
            }
            &:before {
              background: rgba(0,0,0,0.2);
              border-radius: 100%;
              width: 100px;
            }
            &:after {
              background: url('../images/video-step.svg') no-repeat 7px center;
              background-size: 15px auto;
              transform: rotate(180deg);
            }
            &:hover {
              &:before {
                background: rgba(0,0,0,0.4);
              }
            }
          }
          .flag-understood {
            position: relative;
            @include flexbox();
            width: 100%;
            -webkit-align-items: flex-end;
            align-items: flex-end;
            -webkit-justify-content: center;
            justify-content: center;
            span.flag {
              display: block;
              margin: 30px auto;
              width: 125px;
              height: 125px;
              border-radius: 100%;
              label {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                width: 80%;
                height: calc(100% - 160px);
                font-weight: normal;
                color: #fff;
                font-size: 30px;
                text-align: center;
                line-height: 1.2em;
                @include flexbox();
                -webkit-align-items: center;
                align-items: center;
              }
              input {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 30px;
                width: 125px;
                height: 125px;
                margin: auto;
                opacity: 0;
                cursor: pointer;
                &[disabled] {
                  cursor: default;
                }
              }
              &:before,
              &:after,
              .flag-throbber {
                content: "";
                position: absolute;
                bottom: 30px;
                left: 0;
                right: 0;
                margin: auto;
                width: 125px;
                height: 125px;
                border-radius: 100%;
                pointer-events: none;
              }
              &:before {
                background-image: url('../images/icon-check.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 60% auto;
                z-index: 1;
              }
              &:after {
                background-color: rgba(255, 255, 255, 0.7);
                animation-name: pulseFade;
                animation-duration: 1.75s;
                animation-iteration-count: 0;
                animation-timing-function: ease;
                animation-fill-mode: both;
                z-index: -1;
              }
              .flag-throbber {
                background-image: url('../images/throbber.gif');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 80% auto;
                z-index: 1;
                visibility: hidden;
              }
              &.flag-action {
                border-color: transparent;
                &:before {
                  opacity: 0.3;
                  background-size: 40% auto;
                }
                &:after {
                  animation-iteration-count: infinite;
                }
                &:hover {
                  &:before {
                    opacity: 0.5;
                  }
                }
              }
            }
            &.flag-waiting {
              span.flag {
                .flag-throbber {
                  visibility: visible;
                }
                &:before {
                  opacity: 0 !important;
                }
              }
            }
          }
          .all {
            color: #fff;
            font-size: 24px;
            line-height: 1.2em;
            margin: 0;
            width: 100%;
            max-height: 180px;
            padding: 30px;
            border-top: 2px solid #fff;
            box-sizing: border-box;
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            span {
              text-align: left;
              padding: 0 30px;
            }
            .arrow {
              width: 30%;
              padding: 20% 0 0 0;
              background: inline-image('../images/video-all.svg') no-repeat center center;
              background-size: 92% auto;
              border: 1px solid #fff;
            }
          }
          .login-message {
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            margin: auto;
            width: 80%;
            font-weight: normal;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 1.2em;
            box-sizing: border-box;
          }
          a.video-register {
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-flex-flow: column;
            flex-flow: column;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 1;
            margin: 0 auto 30px auto;
            width: 130px;
            height: 130px;
            border-radius: 100%;
            position: relative;
            .or {
              display: block;
              width: 50%;
              margin: 6px auto 3px auto;
              border-top: 1px solid;
              font-size: 0;
              font-weight: normal;
            }
            &:before,
            &:after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 100%;
              z-index: -1;
            }
            &:before {
              background-color: rgba(255, 255, 255, 0.7);
              animation-name: pulseFade;
              animation-duration: 1.75s;
              animation-iteration-count: infinite;
              animation-timing-function: ease;
              animation-fill-mode: both;
            }
          }
        }
        .right {
          background: #fff;
          &:before {
            display: none;
          }
          .next {
            background: none;
            position: relative;
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            .arrow {
              position: absolute;
              top: 0;
              right: 20px;
              width: 26px;
              height: 100%;
              display: inline-block;
              box-sizing: border-box;
            }
            .label {
              width: 100%;
              padding: 20px 80px 20px 40px;
              font-size: 24px;
              font-weight: normal;
              line-height: 1.2em;
              box-sizing: border-box;
            }
            &:hover {
              .arrow {
                -webkit-animation: hvr-icon-wobble-horizontal 1s;
                animation: hvr-icon-wobble-horizontal 1s;
              }
            }
          }
          .nomore {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 38%;
            width: 100%;
            padding: 7.36% 40px 0 10px;
            text-align: right;
            font-size: 30px;
            box-sizing: border-box;
          }
        }
        &.visible {
          display: block;
        }
      }
      .in-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        z-index: 100;
        .video-header {
          z-index: 5;
          .item-list {
            display: none;
          }
        }
        #fullscreen {
          background: inline-image('../images/video-scr-def.svg') no-repeat center center;
          background-size: auto 23px;
        }
        .field-name-title-field {
          padding-top: 5px;
          .field-item {
            padding-left: 45px;
          }
        }
        .field-name-field-number {
          margin-left: 4px;
          .field-items {
            .field-item {
              padding: 0;
            }
          }
        }
        .field-name-field-swiffy-entity,
        .field-name-field-h5p {
          position: absolute;
          left: 0;
          top: 42px;
          width: 100%;
          height: 100%;
          max-height: calc(100% - 42px);
          pointer-events: none;
          > * {
            pointer-events: initial;
          }
          #swiffycontainer,
          #swiffycontainer2,
          #animation_container {
            position: fixed;
            left: 0;
            top: 42px;
            height: 100% !important;
            max-height: calc(100% - 42px);
            padding: 0;
            canvas,
            #dom_overlay_container {
              width: auto !important;
              max-width: 100%;
              max-height: 100%;
              min-width: 0;
            }
          }
          .node-h5p-content {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            max-height: calc(100% - 42px);
            padding: 42px 0 0 0;
            .h5p-iframe-wrapper {
              width: 100%;
              height: 100%;
              padding-top: 0;
              > iframe {
                max-width: 100%;
                max-height: 100%;
                height: 100%;
              }
            }
          }
        }
        .help-layer,
        .closing-help-layer {
          position: absolute;
          width: 100%;
          height: 100%;
          max-height: 52vw;
          max-width: 100%;
          top: 0;
          left: 0;
        }
        .help-layer {
          &.canvas {
            .right {
              max-height: none;
              a {
                font-size: 2.3vw;
                & > div {
                  .inner {
                    max-height: none;
                  }
                }
              }
            }
          }
        }
        .closing-help-layer {
          &.canvas {
            font-size: 2.3vw;
            .right {
              a {
                font-size: 2.3vw;
              }
            }
          }
        }
        &.help-on {
          .field-name-field-swiffy-entity,
          .field-name-field-h5p {
            #swiffycontainer,
            #swiffycontainer2,
            #animation_container,
            .node-h5p-content {
              visibility: hidden;
              opacity: 0;
            }
          }
        }
      }
      &.test {
        .field-name-field-number {
          display: none;
        }
        .field-name-title-field {
          .field-item {
            padding-left: 40px;
          }
        }
      }
    }
  }
  &.node-article {
    .field-name-field-image {
      float: left;
      margin: 0 15px 0 0;
    }
    &.node-teaser {
      margin-bottom: 20px;
      .node-title {
        display: inline-block;
      }
      .field-name-body {
        p {
          margin: 10px 0;
        }
      }
      .links {
        float: right;
        margin: 10px 0;
      }
    }
  }
}
.node-type-video {
  .pane-page-content {
    .panels-flexible-region-inside {
      position: relative;
      @include flexbox();
      -webkit-flex-flow: column;
      flex-flow: column;
      .pane-video-descriptions {
        -webkit-order: 2;
        order: 2;
        width: 100%;
        max-width: 1000px;
        padding: 2em 0 10px 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        & > .pane-content {
          padding: 0 10px;
        }
        table {
          thead {
            background: rgba(0,0,0,0.8);
            border-top: 1px solid rgba(255,255,255,0.3);
            border-color: rgba(255,255,255,0.3);
            th {
              border-left: 1px solid rgba(255,255,255,0.3);
              &:first-child {
                border-left: 0;
              }
            }
          }
          tbody {
            tr {
              border-color: rgba(255,255,255,0.3);
              background: rgba(0,0,0,0.5);
              td {
                border-color: rgba(255,255,255,0.3);
              }
            }
          }
        }
        .pane-custom,
        .pane-node-field-description,
        .pane-swiffy-entity-field-description {
          display: inline;
          margin-right: 4px;
          * {
            display: inline;
          }
          p {
            margin: 10px 0;
          }
          a {
            color: #fff;
          }
        }
        .pane-swiffy-entity-field-text-content {
          display: block;
        }
        .pane-video-related-exercises,
        .pane-video-related-formulas {
          hr:last-child {
            display: none;
          }
        }
      }
    }
  }
}
.swiffy-entity-text-content-wrapper,
.seo-text {
  color: #fff;
  text-align: right;
  font-size: 12px;
  .swiffy-entity-text-content-opener,
  .opener {
    @extend .uppercase;
    color: $topic-cyan;
    font-size: 12px;
    font-family: 'Raleway';
    &:hover {
      cursor: pointer;
    }
  }
  .swiffy-entity-text-content-content,
  .content {
    display: none;
    text-align: left;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    p {
      margin: 10px 0;
    }
  }
}
.seo-text {
  margin-bottom: 30px;
}
.page-how-to {
  font-size: 20px;
  .section {
    display: table;
    width: 100%;
    padding-bottom: 65px;
    margin-bottom: 50px;
    border-bottom: 1px solid $light-gray;
    &:last-child {
      margin-bottom: 0;
      border: none;
    }
    p {
      margin: 0;
    }
  }
}
.hurray {
  position: relative;
  .row {
    display: table;
    width: 100%;
    margin-bottom: 20px;
    img {
      width: 100%;
      display: block;
    }
    .col {
      display: table-cell;
      float: none;
      vertical-align: top;
    }
    .button-cyan {
      width: 30%;
      padding: 22px 30px;
    }
    &.row-1 {
      .left {
        padding: 30px;
        width: 60%;
        border-right: 20px solid #fff;
      }
      .right {
        position: relative;
      }
      iframe {
        width: 100%;
      }
    }
    &.row-2 {
      .col {
        width: 50%;
      }
      .text {
        padding: 12px;
        min-height: 48px;
      }
      .image-rolo {
        .top {
          text-transform: uppercase;
        }
        .bottom {
          text-transform: none;
        }
      }
      .left {
        border-right: 10px solid #fff;
      }
      .right {
        border-left: 10px solid #fff;
      }
    }
    &.row-3 {
      .left {
        padding: 30px;
      }
      .right {
        width: 62%;
      }
    }
  }
}
.they-say {
  .row {
    display: table;
    width: 100%;
    height: 290px;
    margin: 0 0 20px 0;
    .col {
      display: table-cell;
      float: none;
      vertical-align: middle;
      &:first-child {
        border-right: 10px solid #fff;
      }
      &:last-child {
        border-left: 10px solid #fff;
      }
      &:only-child {
        border: none;
      }
      &.small {
        overflow: hidden;
        width: 254px;
        p {
          margin: 0;
        }
        &.image-rolo {
          img {
            position: absolute;
            top: 0;
            left: -100%;
            right: -100%;
            margin: auto;
            width: auto !important;
            max-width: none;
            min-width: 100%;
            min-height: 100%;
            max-height: 290px;
          }
        }
      }
      &.large {
        width: auto;
        padding: 6% 3%;
        vertical-align: top;
      }
      [class*="button-"] {
        margin: 15px 0;
      }
      h3 {
        margin: 10px 0;
      }
    }
    &.buttons {
      height: auto;
      .col {
        .btn {
          display: block;
          padding: 20px;
        }
        &.large {
          padding: 0;
        }
      }
    }
  }
}
.they-say-more {
  p {
    padding: 10px;
    margin: 8px 0;
    &:nth-child(odd) {
      background: #f0eeec;
    }
  }
}
.page-nagykovet {
  font-size: 20px;
  .content-row {
    display: table;
    width: 100%;
    font-size: 36px;
    line-height: 1.1em;
    font-weight: 300;
    p, div {
      display: table-cell;
      vertical-align: middle;
    }
    p {
      width: 50%;
      padding: 15px 40px 15px 0;
    }
  }
}
.page-erettsegi {
  h2 {
    background: $hover;
    color: $text;
    padding: 25px 30px;
    a {
      color: $text;
      display: block;
      &:before {
        display: none !important;
      }
    }
  }
  .row{
    display: table;
    width: 100%;
    position: relative;
    > * {
      position: relative;
    }
    &:before {
      content: "";
      position: absolute;
      background: inherit;
      width: 102vw;
      height: 100%;
      left: 50%;
      top: 0;
      -webkit-transform: translateX(-51vw);
      transform: translateX(-51vw);
    }
  }
  .col {
    padding: 5px 20px;
    color: #fff;
    width: 235px;
    height: 209px;
    margin: 0 5px 5px 0;
    float: left;
    text-align: center;
    text-transform: uppercase;
    box-sizing: border-box;
    @include flexbox();
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: column;
    flex-flow: column;
  }
  .title {
    h2 {
      background: none;
      color: #fff;
      padding: 0;
    }
  }
  div.list {
    .item {
      @include flexbox();
      flex-wrap: wrap;
      background: $hover;
      padding: 25px 30px;
      margin: 1.5em 0;
      h3 {
        font-size: 24px;
        font-weight: normal;
        text-align: center;
        margin: 0 0 1em 0;
        width: 100%;
        br {
          display: none;
        }
      }
      a[class*="button"] {
        font-size: 16px;
        box-sizing: border-box;
        flex-basis: 50%;
        flex-grow: 1;
        align-content: center;
        margin-bottom: 10px;
      }
    }

  }
  a.col {
    &:before {
      content: "";
      display: inline-block;
      margin-bottom: 10px;
      width: 100%;
      height: 30px;
      background-image: url('../images/icon-summa.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: auto 30px;
    }
    &[href*="youtube"] {
      &:before {
        background-image: url('../images/icon-eye.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 30px;
      }
    }
  }
  .cyan:not(.row):hover {
    background: $topic-darkcyan;
  }
  .yellow:not(.row):hover {
    background: $topic-darkyellow;
  }
  .green:not(.row):hover {
    background: $topic-darkgreen;
  }
  .orange:not(.row):hover {
    background: $topic-darkorange;
  }
  #tudas {
    margin: 0 auto 40px auto;
    h2 {
      margin: 0;
      height: 150px;
      padding-left: 0;
      padding-right: 0;
      @include flexbox();
      -webkit-align-items: center;
      align-items: center;
    }
  }
  .tudas-intro {
    font-size: 24px;
  }
  .ckeditor-accordion-container {
    margin-top: 25px !important;
    .ckeditor-accordion-toggle {
      display: none;
    }
    .ckeditor-accordion-toggler {
      color: $text;
      font-size: 28px;
      font-weight: 300;
      display: inline-block;
      padding: 10px;
      border: 1px solid $text;
    }
    & > dl {
      margin: 0;
      & > dt {
        background: none;
        position: relative;
        padding: 0;
        &:hover,
        &.active {
          background: none;
        }
      }
      dd {
        border-left: 1px solid $text;
        font-size: 18px;
        p {
          margin: 1.5em 0;
        }
      }
    }
  }
  .lifeboat {
    position: fixed;
    right: 0;
    top: 50%;
    a {
      display: inline-block;
      width: 130px;
      height: 70px;
      text-indent: -9999px;
      background: inline-image('../images/icon-lifeboat-sh.svg') no-repeat center center;
      background-size: auto 50px;
    }
  }
}
.anchor {
  &:target {
    padding-top: 40px;
  }
}
.controls-options {
  .col {
    display: inline-block;
    float: left;
    width: 32%;
    margin-right: 2%;
    &:nth-child(3) {
      margin: 0;
    }
  }
  .text {
    padding: 15px;
    min-height: 96px;
  }
  .image {
    line-height: 0;
  }
  .btn {
    padding: 22px 0;
    width: 32%;
    text-align: center;
    margin-top: 20px;
  }
}
.ckeditor-accordion-container {
  clear: both;
  & > dl {
    border: none;
    background: #fff;
    & > dt {
      background: $topic-cyan;
      color: #fff;
      padding: 0 10px;
      border-bottom: 10px solid #fff;
      & > a {
        background: none;
        color: #fff;
        border: none;
        padding: 20px;
        font-weight: normal;
        font-size: 1.2em;
        &:hover {
          background: none;
          color: #fff;
          text-decoration: none;
        }
      }
      & > .ckeditor-accordion-toggle {
        background: none;
        top: 50%;
        left: 10px;
        width: 12px;
        height: 36px;
        margin-top: -18px;
        padding: 0;
        &:before {
          content: "+";
          @include no-transform;
          @include no-anim;
          left: 0;
          background: none;
          width: 12px;
          height: 100%;
          line-height: 36px;
          font-size: 28px;
          color: #fff;
        }
        &:after {
          display: none;
        }
      }
      &:hover {
        background: $topic-darkcyan;
      }
      &.active {
        background: $topic-darkcyan;
        & > a {
          background: none;
        }
        & > .ckeditor-accordion-toggle {
          &:before {
            content: "-";
          }
        }
      }
      &:last-of-type {
        border: none;
      }
    }
    dd {
      &.active {
        &[style*="display: block"] {
          display: inline-block !important;
          width: 100%;
        }
      }
    }
  }
}
.ckeditor-accordion-style2 {
  > dl {
    background: none;
    margin: 0 0 -40px 0;
    dt {
      background: none;
      color: $gray;
      text-align: center;
      .ckeditor-accordion-toggle {
        display: none;
      }
      .ckeditor-accordion-toggler {
        color: $gray;
        font-size: 18px;
        text-decoration: underline;
        &:hover {
          text-decoration-thickness: 2px;
        }
      }
    }
    dd {
      background: #fff;
      font-size: 18px;
    }
  }
}
.subject-box {
  background: $topic-green;
  color: #fff;
  display: inline-block;
  width: 235px;
  height: 209px;
  float: left;
  margin: 0 5px 5px 0;
  &:hover {
    background: $topic-darkgreen;
  }
}
.subject-box-link {
  text-align: center;
  text-decoration: none !important;
  padding: 115px 5px 0 5px;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  background: url("../images/icon-summa.svg") no-repeat center 70px;
  background-size: auto 30px;
}
.subject-box-accordion {
  * {
    box-sizing: border-box;
  }
  .ui-accordion-header {
    padding: 0;
    margin: 0;
    &.ui-state-active {
      &:after {
        display: none;
      }
    }
  }
  .ui-accordion-content {
    position: relative !important;
    padding: 20px;
    font-family: 'Raleway';
    font-size: 18px;
    a {
      color: $topic-cyan;
    }
  }
}
.subject-icons {
  display: table;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  a {
    @extend .subject-box-link;
  }
  .col {
    @extend .subject-box;
  }
  &.ui-accordion {
    display: block;
    width: auto;
    .ui-accordion-content {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.view-syllabus {
  &.view-display-id-page_1 {
    .view-header {
      margin-bottom: 30px;
    }
    .views-row {
      @extend .subject-box;
      @extend .subject-box-accordion;
      position: relative;
      .views-field-field-subject-name,
      .views-field-field-related-categories {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .views-field-field-subject-name {
        .field-content {
          width: 100%;
          height: 100%;
        }
        a {
          @extend .subject-box-link;
        }
      }
    }
    .ui-accordion-content {
      padding-top: 50px;
      padding-bottom: 20px;
    }
  }
}

.left-block,
.right-block {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
.left-block {
  float: left;
  width: 62.5%;
  padding-right: 70px;
}
.right-block {
  float: right;
  width: 37.5%;
  padding-left: 30px;
}
.img-left {
  .pane-content {
    position: relative;
  }
  .image {
    position: absolute;
    left: auto;
    right: 37.5%;
    top: 0;
    height: 100%;
    width: 2000px;
  }
}
.img-right {
  color: $text;
  background: $hover;
  .pane-content {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      right: 37.5%;
      height: 100%;
      width: 2000px;
      background: $hover;
    }
  }
  .image {
    position: absolute;
    left: 62.5%;
    right: auto;
    top: 0;
    height: 100%;
    width: 2000px;
  }
}
.img-middle {
  padding-top: 70px;
  padding-bottom: 70px;
  .left-block,
  .right-block {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.img-circle {
  .image {
    background: none;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      border-radius: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      width: 30vw;
      height: 30vw;
      max-width: 400px;
      max-height: 400px;
    }
  }
}

.tab-100,
.tab-hide,
.mob-hide {
  visibility: visible;
}

.lp-btn-border {
  margin: 0;
  color: #fff;
  background: none;
  border: 1px solid #fff;
  &:hover {
    background-color: #fff;
    color: $text;
    text-shadow: none;
  }
}
// szukseges volt duplikalni a nagy mennyisegu css kivalasztok miatt
.lp-btn-border-clone {
  margin: 0;
  color: #fff;
  background: none;
  border: 1px solid #fff;
  &:hover {
    background-color: #fff;
    color: $text;
    text-shadow: none;
  }
}
.margin-top-0 {
  margin-top: 0;
}
.margin-top-2x {
  margin-top: 2em;
}
.margin-top-3x {
  margin-top: 3em;
}
.margin-bottom-0 {
  margin-bottom: 0;
}
.margin-bottom-2x {
  margin-bottom: 2em;
}
.margin-bottom-3x {
  margin-bottom: 3em;
}

.fulltext {
  .pane-content {
    & > div {
      width: 100%;
    }
    p {
      margin: 20px 0;
    }
  }
}
.full-bg-img {
  color: #fff;
  @include txt-shadow(0,0,2px,#000);
  .button-bordered {
    @include box-shadow(0,0,1px,#000);
  }
  .btn {
    @extend .lp-btn-border;
  }
  ul {
    li {
      &::marker {
        color: currentColor !important;
      }
    }
  }
}
.bg-img-overlay {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
  }
}
.bg-img-overlay-blur {
  @extend .bg-img-overlay;
}
.fullw-color-bg {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background-color: $hover;
    -webkit-transform: translateX(-50vw);
    transform: translateX(-50vw);
    z-index: -1;
  }
}
.fullwidth-title {
  color: #fff;
  padding: 50px 20px;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  text-shadow: none;
}
.landing-row-fullwidth,
.lp-row-fullwidth {
  width: 100vw;
  box-sizing: border-box;
}
.landing-row {
  box-sizing: border-box;
  @include flexbox();
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  * {
    box-sizing: border-box;
  }
  &.middle {
    -webkit-align-items: center;
    align-items: center;
  }
  &.bottom {
    -webkit-align-items: flex-end;
    align-items: flex-end;
  }
  &.center {
    -webkit-justify-content: center;
    justify-content: center;
  }
  &.right {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
}
.landing-row-center {
  -webkit-justify-content: center;
  justify-content: center;
}
.landing-row-right {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.landing-row-tab-center {
  visibility: inherit;
}
.equal-h-boxes {
  display: grid;
  grid-auto-rows: 1fr;
}
.box,
.box-20,
.box-25,
.box-30,
.box-33,
.box-40,
.box-50,
.box-60,
.box-66,
.box-70,
.box-75,
.box-80,
.box-100 {
  display: inline-block;
  padding: 15px;
  > *:first-child {
    margin-top: 0 !important;
  }
  > *:last-child {
    margin-bottom: 0 !important;
  }
}
.box-padding {
  padding: 15px;
}
.box {
  width: auto;
}
.box-20 {
  width: 20%;
}
.box-25 {
  width: 25%;
}
.box-30 {
  width: 30%;
}
.box-33 {
  width: 33.33%;
}
.box-40 {
  width: 40%;
}
.box-50 {
  width: 50%;
}
.box-55 {
  width: 55%;
}
.box-60 {
  width: 60%;
}
.box-66 {
  width: 66%;
}
.box-70 {
  width: 70%;
}
.box-75 {
  width: 75%;
}
.box-80 {
  width: 80%;
}
.box-100 {
  width: 100%;
}
.txt-sm {
  font-size: 90%;
}
.txt-lg {
  font-size: 120%;
}
.wh-title {
  font-size: 24px;
}
.txt-gray {
  color: $gray;
}
.txt-cyan {
  color: $topic-cyan;
}
.txt-green {
  color: $topic-green;
}
.txt-yellow {
  color: $topic-darkyellow;
}
.txt-orange {
  color: $topic-orange;
}
.txt-red {
  color: $red;
}
.txt-gold {
  background: linear-gradient(to right, #e6bd07 0%, #e0b600 50%, #e8c500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lh-13 {
  line-height: 1.3em;
}
.lh-15 {
  line-height: 1.5em;
}
.br-before {
  display: block;
  padding-top: 0.3em;
}
.br-after {
  display: block;
  padding-bottom: 0.3em;
}
ul.check,
ul.no {
  padding-left: 20px;
  li {
    list-style: none;
    padding-left: 30px;
    padding-bottom: 5px;
  }
}
ul.check {
  li {
    @extend .icon-check;
    background-position: 0 4px;
    background-size: auto 16px;
  }
}
ul.rocket {
  li {
    list-style-image: url('../images/list-rocket.png?v2');
  }
}
ul.no {
  li {
    @extend .icon-x;
    background-position: 0 4px;
    background-size: auto 16px;
  }
}
.style-lp1 {
  text-align: center;
  font-size: 20px;
  .title {
    position: relative;
    @include flexbox();
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 80%;
    height: 0;
    padding: 40% 10px;
    margin: 0 auto 30px auto;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.1;
    span {
      position: relative;
      z-index: 1;
    }
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      transform: scale(1);
      transition: transform 1s;
    }
    &:before {
      background: $hover;
    }
    &:after {
      background-color: rgba(0,0,0,0.2);
    }
  }
  &:hover {
    color: $topic-cyan;
    transition: color 3s;
    .title {
      &:before,
      &:after {
        transform: scale(1.1);
        transition: transform 3s;
      }
    }
  }
}
.lp-img-left {
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: calc(400px + (100vw - 1008px)/2); //calc(380px + (100vw - 1008px)/2);
    height: 100%;
    width: calc(608px + (100vw - 1008px)/2); //calc(628px + (100vw - 1008px)/2);
  }
}
.lp-img-right {
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(608px + (100vw - 1008px)/2); //calc(628px + (100vw - 1008px)/2);
    height: 100%;
    width: calc(400px + (100vw - 1008px)/2); //calc(380px + (100vw - 1008px)/2);
  }
}
.lp-img-middle {
  &:after {
    content: "";
    height: calc(100% - 100px);
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
.lp-img-circle {
  &:after {
    content: "";
    border-radius: 100%;
    width: 30vw;
    height: 30vw;
    max-width: 400px;
    max-height: 400px;
  }
}
.lp-white-box,
.white-box,
.cyan-box,
.yellow-box,
.orange-box,
.braun-box {
  background-color: rgba(255,255,255, 0.8);
  box-shadow: 2px 2px 16px #ccc;
  border: 2px solid #fff;
  padding: 22px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  > * {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.cyan-box {
  background-color: rgba(0,138,150,0.8);
  border-color: $topic-cyan;
  color: #fff;
}
.yellow-box {
  background-color: $topic-darkyellow;
  border-color: $topic-yellow;
  box-shadow: 2px 2px 16px #ccc;
  padding: 22px;
  color: #fff;
  > * {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.orange-box {
  background-color: $topic-darkorange;
  border-color: $topic-orange;
  box-shadow: 2px 2px 16px #ccc;
  padding: 22px;
  color: #fff;
  > * {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.braun-box {
  background-color: $brown;
  border-color: $brown;
  box-shadow: 2px 2px 16px #ccc;
  padding: 22px;
  color: $topic-darkyellow;
  > * {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.box-900 {
  max-width: 900px;
}

.landing-page {
  h1, h2 {
    text-transform: none;
    font-weight: bold;
  }
  h2,
  .h2-style {
    font-size: 42px; //32px;
  }
  .h2-style {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
  }
  span.cyan {
    padding: 0 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  p {
    margin: 30px 0;
    line-height: 1.3em;
  }
  .separator {
    margin-bottom: 0;
  }
  iframe {
    max-width: 100%;
  }
  .button-bordered {
    clear: left;
    display: table;
    margin: 0;
    color: #fff;
    &:hover {
      background-color: #fff;
      color: $text;
      text-shadow: none !important;
    }
    &.dark {
      color: $text;
      &:hover {
        background-color: $topic-darkcyan;
        border-color: $topic-darkcyan;
        color: #fff;
      }
    }
  }
  .box-buttons {
    margin: 10px 0;
    [class*="button"] {
      display: inline-block;
      margin: 10px 20px 10px 0;
      clear: none;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .notice-block {
    .notice-open {
      display: inline-block;
      font-size: 18px;
      margin-bottom: 10px;
      &:hover {
        text-decoration: underline;
      }
    }
    .notice-content {
      visibility: hidden;
      max-height: 0;
      overflow: hidden;
      padding: 0 15px;
      font-size: 18px;
      background-color: rgba(0,0,0,0.5);
      pointer-events: none;
      transition: max-height 0.5s, visibility 0.5s;
      transition-delay: 0s, 0.5s;
      p {
        font-size: inherit !important;
      }
      *:first-child {
        margin-top: 15px;
      }
      *:last-child {
        margin-bottom: 15px;
      }
    }
    &.open {
      .notice-content {
        visibility: visible;
        pointer-events: auto;
        max-height: 1000px;
        transition: max-height 0.5s;
        transition-delay: 0s;
      }
    }
  }
  .testimonial {
    background-image: url("../images/quote-wh.svg");
    background-repeat: no-repeat;
    background-position: center 15px;
    background-size: 60px auto;
    padding-top: 80px;
    text-align: center;
    font-weight: bold;
    p {
      margin: 0;
    }
  }
  .pane-subject-list {
    position: absolute;
    top: 68px;
    left: 0;
    z-index: 4;
  }
  .pane-page-content {
    max-width: none;
    font-weight: 400;
    padding: 0;
    & > .pane-content {
      overflow: hidden;
    }
    .panel-pane {
      font-size: 22px; //20px;
      .pane-title {
        box-sizing: border-box;
      }
      & > .pane-content {
        position: relative;
        box-sizing: border-box;
      }
      a:not([class*="button"], [class*="btn"]) {
        color: currentColor;
        text-decoration: underline;
        &:hover {
          text-decoration-thickness: 2px;
        }
      }
      span[class*="button-"] {
        > a {
          text-decoration: none;
        }
      }
      ul {
        li {
          margin: 20px 0;
          &::marker {
            color: #00a0aa;
          }
        }
      }
    }
    .cyan,
    .orange,
    .yellow,
    .green {
      ul {
        li {
          &::marker {
            color: currentColor;
          }
        }
      }
    }
    [class*="lp-"],
    [class*="pane-mp"] {
      h2 {
        margin-top: 0;
      }
      p {
        margin: 15px 0;
      }
    }
    [class*="lp-"] {
      padding-top: 50px;
      padding-bottom: 50px;
    }
    #why-good {
      &:target {
        background: none;
        margin-top: -60px;
        padding-top: 60px;
      }
    }
    .ckeditor-accordion-container {
      p {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
      }
    }
    .panel-pane.pane-mathsplain-front-pane {
      #mathsplain-front {
        padding: 68px 0 0 0;
        background: none;
        height: auto;
        .head-wrap {
          height: 550px;
          padding: 0;
        }
        #mathsplain-header-video-left-text {
          margin-top: 0;
          margin-left: 0;
          .title {
            font-size: 48px;
          }
          &:before,
          &:after {
            display: none;
          }
        }
      }
    }
    .left-block,
    .right-block {
      padding-top: 70px;
      padding-bottom: 70px;
      > *:first-child {
        margin-top: 0;
      }
      .text {
        > *:first-child {
          margin-top: 0;
        }
      }
    }
    .section-1 {
      color: #fff;
      @include txt-shadow(0,0,2px,#000);
      .pane-content {
        position: relative;
        h1 {
          margin-top: 60px;
          margin-bottom: 0;
        }
        .left-block {
          float: right;
          position: static;
        }
        .right-block {
          padding: 0;
          float: none;
        }
        #mathsplain-landing-1-video-play-button {
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -45px 0 0 -45px;
          display: inline-block;
          text-indent: -9999px;
          font-size: 0;
          text-align: center;
          width: 90px;
          height: 90px;
          &:after {
            font-family: 'FontAwesome';
            content: "\f144";
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            text-indent: 0;
            line-height: 90px;
            width: 100%;
          }
          &:hover {
            cursor: pointer;
          }
        }
      }
      .text {
        display: table;
        width: 100%;
        height: 550px;
        p {
          padding-top: 65px;
        }
      }
      &.video-play {
        .pane-content {
          max-width: 100%;
        }
        h1 {
          display: none;
        }
        #mathsplain-landing-1-video-play-button,
        .right-block {
          display: none;
        }
        .left-block {
          width: 100%;
          padding: 0;
          .player-wrapper {
            display: inline-block;
            width: 100%;
            height: 0;
            margin-top: -30px;
            padding-top: 56.25%;
            position: relative;
            iframe {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .section-2 {
      @extend .img-right;
      .image {
        background: url('../images/landing-2-v3.jpg') no-repeat;
        background-size: auto 100%;
      }
    }
    .section-3 {
      @extend .img-left;
      background: $topic-cyan;
      color: #fff;
      .image {
        background: url('../images/landing-3-v1_hu.jpg') no-repeat right 0;
        background-size: auto 100%;
      }
    }
    .section-3-v1 {
      @extend .img-right;
      background: $topic-darkyellow;
      color: #fff;
      .image {
        background: url('../images/landing-3-v1_hu.jpg') no-repeat 0 0;
        background-size: auto 100%;
      }
      .pane-content {
        &:before {
          display: none;
        }
      }
    }
    .section-4 {
      .pane-content {
        padding: 70px 0;
        a {
          color: $text;
        }
        & > div {
          display: inline-block;
          width: 33.33%;
          float: left;
          text-align: center;
          text-transform: uppercase;
          a {
            display: block;
            &:before {
              content: "";
              display: block;
              height: 120px;
              margin-bottom: 30px;
            }
          }
        }
        .icon1 {
          a {
            &:before {
              @extend .icon-target;
              background-position: center bottom;
              background-size: auto 100%;
            }
          }
        }
        .icon2 {
          a {
            &:before {
              @extend .icon-fly;
              background-position: center bottom;
              background-size: auto 80%;
            }
          }
        }
        .icon3 {
          a {
            &:before {
              @extend .icon-gears;
              background-position: center bottom;
              background-size: auto 100%;
            }
          }
        }
      }
    }
    .section-5 {
      @extend .img-right;
      @extend .img-middle;
      .image {
        background: url("../images/landing-5-v2.jpg") no-repeat;
        background-size: auto 100%;
      }
    }
    .section-6 {
      @extend .full-bg-img;
      background: url('../images/landing-6-v1_hu.jpg') no-repeat 0 center;
      background-size: cover;
    }
    .section-7 {
      background: url('../images/landing-video.jpg') no-repeat center center;
      background-size: cover;
      #mathsplain-landing-video {
        background-image: none !important;
        height: 0;
        padding-top: 56%;
        position: relative;
        line-height: 0;
        font-size: 0;
        #mathsplain-landing-video-player {
          line-height: 0;
          font-size: 0;
        }
        #mathsplain-landing-video-play-button {
          position: absolute;
          left: 50%;
          top: 50%;
          margin: -45px 0 0 -45px;
          width: 90px;
          height: 90px;
          border-radius: 100%;
          border: 1px solid $text;
          &:before {
            content: "";
            position:absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius:100%;
            background-color:rgba(255,255,255,.7);
            -webkit-animation-duration:1.75s;
            animation-duration:1.75s;
            -webkit-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
            -webkit-animation-timing-function:ease;
            animation-timing-function:ease;
            -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
            -webkit-animation-name:pulseFade;
            animation-name:pulseFade
          }
          &:after {
            font-family: 'FontAwesome';
            content: "\f04b";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            line-height: 90px;
            text-align: center;
            font-size: 50px;
            color: #fff;
            text-indent: 8px;
            background-color: rgba(41, 41, 41, 0.8);
            border-radius: 100%;
            z-index: 1;
          }
          &:hover {
            cursor: pointer;
          }
        }
        iframe {
          position: absolute;
          max-width: 100%;
          width: 100% !important;
          height: 100% !important;
          top: 0;
          left: 0;
          & + #mathsplain-landing-video-play-button {
            display: none;
          }
        }
      }
    }
    .section-8 {
      @extend .full-bg-img;
      background: url('../images/landing-8-egyetem.jpg') no-repeat 0 center;
      background-size: cover;
      .text {
        padding-right: 170px;
      }
    }
    .section-9 {
      padding: 60px 20px;
      background: $hover;
      .pane-title {
        color: $dark-gray;
        text-align: center;
        padding: 30px 0;
        box-sizing: border-box;
      }
      .pane-content {
        text-align: center;
        p:first-child {
          margin-bottom: 30px;
        }
      }
    }
    .section-10 {
      @extend .full-bg-img;
      background: url('../images/landing-10-v1_hu.jpg') no-repeat 0 center;
      background-size: cover;
    }
    .section-11,
    .section-11-v2 {
      @extend .full-bg-img;
      background: url('../images/landing-11-v2.jpg') no-repeat 0 0;
      background-size: cover;
      position: relative;
      padding-top: 70px;
      padding-bottom: 70px;
      text-shadow: none;
      .button-bordered {
        box-shadow: none;
      }
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $topic-yellow !important;
        opacity: 0.88;
      }
    }
    .section-11-v2,
    .section-11.v3,
    .section-11.v4,
    .section-11.v5 {
      background: url('../images/landing-11-v3.jpg') no-repeat right 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    .section-11.v3 {
      &:before {
        background-color: $topic-darkyellow !important;
      }
    }
    .section-12 {
      @extend .img-right;
      background: $topic-yellow;
      color: #fff;
      .pane-content {
        &:before {
          display: none;
        }
      }
      .image {
        background: url('../images/landing-12-v1_hu.jpg') no-repeat;
        background-size: auto 100%;
      }
    }
    .section-15 {
      @extend .full-bg-img;
      background: url('../images/landing-15-kozepsuli.jpg?v=1') no-repeat left center;
      background-size: cover;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.1);
      }
    }
    .lp-hero {
      background: url('../images/mateking-cover-2025.jpg?v1') 50% 0 no-repeat fixed;
      background-size: cover;
      color: #fff;
      font-size: 30px;
      padding-top: 70px !important;
      h1 {
        line-height: 1.2;
        margin-top: 35px;
        margin-bottom: 0;
      }
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2);
      }
    }
    .lp-1 {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        display: inline-block;
        width: 100vw;
        height: 100%;
        transform: translateX(-50%);
        @extend .gradient-bg1;
        background-color: $hover;
      }
      h2 {
        margin-bottom: 1.3em;
      }
      .easy {
        .title {
          &:before {
            background: url('../images/lp1-easy.jpg?v=1') no-repeat center center;
            background-size: cover;
          }
        }
      }
      .fast {
        .title {
          &:before {
            background: url('../images/lp1-fast-v1.jpg') no-repeat center center;
            background-size: cover;
          }
        }
      }
      .plain {
        .title {
          &:before {
            background: url('../images/lp1-plain.jpg') no-repeat center center;
            background-size: cover;
          }
        }
      }
      &.v1 {
        .style-lp1 {
          .title {
            font-size: 25px;
          }
        }
      }
    }
    .lp-6 {
      background: $deep-white2 url('../images/lp-6.jpg') no-repeat right bottom;
      background-size: 600px auto;
      .landing-row {
        width: 70%;
        &.border {
          @extend .lp-white-box;
          padding: 0;
          div[class*="box"] {
            padding: 22px;
            &:first-child {
              font-size: 24px;
            }
          }
          & + .border {
            margin-top: 30px;
          }
        }
        &[class*="icon"] {
          div:first-child {
            position: relative;
            &:before {
              content: "";
              position: absolute;
              width: 40px;
              height: 50px;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center center;
            }
          }
        }
        &.icon-cup {
          div:first-child {
            &:before {
              background-image: url('../images/icon-cup.png');
            }
          }
        }
        &.icon-fingers {
          div:first-child {
            &:before {
              background-image: url('../images/icon-fingers.png?v1');
            }
          }
        }
        &.icon-smile {
          div:first-child {
            &:before {
              background-image: url('../images/icon-smile.png');
            }
          }
        }
      }
      .box-buttons {
        margin-top: 20px;
      }
    }
    .lp-7 {
      background: $deep-white2;
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
      .image {
        position: absolute;
        right: 60%;
        top: 0;
        bottom: 0;
        margin: auto;
        margin-right: 20px;
        width: 280px;
        height: 280px;
        border-radius: 100%;
        background: url('../images/Mosoczi_A.jpg') no-repeat center center;
        background-size: cover;
      }
    }
    .lp-8 {
      text-align: center;
      .box {
        @extend .box-60;
        @extend .tab-100;
        p {
          font-size: 24px;
        }
      }
      .landing-row {
        @extend .landing-row-center;
      }
    }
    .lp-9,
    .pane-mp-9 {
      padding-top: 50px;
      padding-bottom: 50px;
      background-color: $baby;
      .logos {
        text-align: center;
        @include flexbox();
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
        padding-top: 0;
        padding-bottom: 25px;
        a {
          display: inline-block;
          width: 20%;
          height: 100px;
          padding: 10px;
          text-indent: -200vw;
          overflow: hidden;
          &.rtl {
            background: url('../images/rtl-klub.png') no-repeat center center;
            background-size: 80%;
          }
          &.atv {
            background: url('../images/atv.png') no-repeat center center;
            background-size: 80%;
          }
          &.forbes {
            background: url('../images/forbes.png') no-repeat center center;
            background-size: 80%;
          }
          &.blikk {
            background: url('../images/blikk.jpg') no-repeat center center;
            background-size: auto 70%;
          }
          &.infostart {
            margin-right: 0;
            background: url('../images/infostart.jpg') no-repeat center center;
            background-size: 90%;
          }
        }
      }
      iframe {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      .view-press {
        width: 100%;
        margin-bottom: 30px;
      }
      .pane-views-panes {
        .pane-content {
          max-width: 100%;
          width: 100%;
          padding: 0;
        }
      }
    }
    .lp-10 {
      @extend .full-bg-img;
      @extend .bg-img-overlay;
      background: url('../images/lp-10.jpg') no-repeat center center;
      background-size: cover;
      text-align: center;
      padding-top: 100px;
      padding-bottom: 100px;
      &:before {
        background: rgba(0, 0, 0, 0.5);
      }
      .pane-title {
        @extend .limited-wide;
        text-align: center;
        padding-bottom: 50px;
        position: relative;
      }
      .pane-content {
        p {
          &:last-child {
            margin-top: 80px;
          }
        }
      }
    }
    .lp-11 {
      @extend .full-bg-img;
      @extend .bg-img-overlay;
      background: url("../images/lp-11.jpg") no-repeat right center;
      background-size: cover;
      position: relative;
      .box {
        @extend .box-50;
        @extend .tab-100;
      }
    }
    .lp-12 {
      @extend .full-bg-img;
      @extend .bg-img-overlay;
      background: url("../images/lp-12.jpg?v2") no-repeat right center;
      background-size: cover;
      position: relative;
      color: #fff;
      .box {
        @extend .box-50;
        @extend .tab-100;
      }
      p:last-of-type {
        @extend .text-bigger;
        @extend .margin-top-2x;
      }
      &.parent {
        p:last-of-type {
          font-size: 1em;
        }
      }
    }
    .lp-13 {
      @extend .full-bg-img;
      @extend .bg-img-overlay-blur;
      background: url("../images/lp-13.jpg") no-repeat right center;
      background-size: cover;
      position: relative;
      color: #fff;
      .box {
        @extend .box-50;
        @extend .tab-100;
      }
      h2 {
        @extend .margin-bottom-2x;
      }
      &.v1 {
        background: url("../images/lp-13-v1.jpg") no-repeat right center;
        background-size: cover;
      }
      &.v2 {
        background: url("../images/lp-13-v2.jpg") no-repeat right center;
        background-size: cover;
      }
      &.v3 {
        background: url("../images/lp-13-v3.jpg") no-repeat right center;
        background-size: cover;
      }
      &.v4 {
        background: url("../images/lp-13-v4.jpg") no-repeat right center;
        background-size: cover;
      }
      &.v5 {
        background: url("../images/lp-13-v5.jpg") no-repeat right center;
        background-size: cover;
      }
    }
    .lp-14 {
      background-color: $topic-yellow;
      color: #fff;
      @extend .lp-img-right;
      &:after {
        background: url("../images/lp-14.jpg?v1") no-repeat left center;
        background-size: cover;
      }
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
      &.v1 {
        &:after {
          background: url("../images/lp-14-v1.jpg") no-repeat left center;
          background-size: cover;
        }
      }
    }
    .lp-15 {
      @extend .full-bg-img;
      @extend .bg-img-overlay;
      background: url("../images/landing-15-kozepsuli.jpg?v=1") no-repeat left center;
      background-size: cover;
      position: relative;
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
    }
    .lp-16 {
      background-color: $hover;
      @extend .lp-img-right;
      @extend .lp-img-middle;
      &:after {
        background: url("../images/lp-16-kozep.jpg") no-repeat left center;
        background-size: cover;
      }
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
    }
    .lp-17 {
      background-color: $topic-cyan;
      color: #fff;
      @extend .lp-img-left;
      .landing-row {
        @extend .landing-row-right;
      }
      .box {
        width: 37%;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
      &:after {
        background: url("../images/lp-17-kozep.jpg?v2") no-repeat right 0;
        background-size: cover;
      }
    }
    .lp-18 {
      @extend .full-bg-img;
      background: url("../images/landing-8-kozep.jpg") no-repeat center center;
      background-size: cover;
      .box {
        @extend .box-40;
        @extend .tab-100;
      }
    }
    .lp-19 {
      @extend .full-bg-img;
      @extend .bg-img-overlay-blur;
      background: url("../images/lp-19.jpg?v2") no-repeat center center;
      background-size: cover;
      .landing-row {
        @extend .landing-row-right;
      }
      .box {
        @extend .box-40;
        @extend .tab-100;
      }
    }
    .lp-20 {
      @extend .full-bg-img;
      background: #333 url("../images/lp-20.jpg") no-repeat center center;
      background-size: cover;
      .box {
        @extend .box-50;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
    }
    .lp-21 {
      @extend .lp-img-right;
      @extend .lp-img-middle;
      @extend .lp-img-circle;
      background-color: $hover;
      &:after {
        background: url('../images/landing-mirejo-14.jpg') no-repeat left center;
        background-size: cover;
      }
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
    }
    .lp-22 {
      background-color: $topic-cyan;
      color: #fff;
      @extend .lp-img-left;
      .landing-row {
        @extend .landing-row-right;
      }
      .box {
        width: 37%;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
      &:after {
        background: url("../images/lp-22.jpg") no-repeat right 0;
        background-size: cover;
      }
    }
    .lp-23 {
      background-color: $topic-yellow;
      color: #fff;
      @extend .lp-img-right;
      &:after {
        background: url("../images/lp-23.jpg") no-repeat center center;
        background-size: cover;
      }
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
    }
    .lp-24 {
      @extend .full-bg-img;
      @extend .bg-img-overlay;
      background: url('../images/lp-24.jpg') no-repeat left center;
      background-size: cover;
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
    }
    .lp-25 {
      @extend .full-bg-img;
      @extend .bg-img-overlay;
      background: url('../images/lp-erettsegi.jpg') no-repeat right center;
      background-size: cover;
      .box {
        @extend .box-50;
        @extend .tab-100;
      }
    }
    .lp-26 {
      @extend .full-bg-img;
      @extend .bg-img-overlay;
      background: url("../images/landing-15-kozepsuli.jpg?v=1") no-repeat left center;
      background-size: cover;
      position: relative;
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
      form {
        padding: 15px;
        font-size: 16px;
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        a {
          color: $topic-cyan !important;
        }
        input {
          box-shadow: none;
        }
        .form-item {
          margin-top: 0;
          margin-bottom: 20px;
          br {
            display: none;
          }
          .form-required {
            color: inherit;
          }
          &:not(.form-type-checkbox, .form-type-radio) {
            label {
              @extend .visually-hidden;
            }
          }
        }
        .form-type-checkbox {
          label {
            font-weight: normal;
          }
        }
        input[type="text"],
        input[type="email"] {
          padding: 10px;
          width: 100%;
          color: #000;
        }
        .select-wrapper {
          width: 100%;
          box-shadow: none;
          background: #fff;
          select {
            background: #fff;
            color: #000;
            padding: 0 40px 0 10px;
            margin: 2px 0;
          }
        }
        input[type="submit"] {
          padding: 15px 30px;
          font-size: 16px;
          text-transform: uppercase;
        }
      }
    }
    .lp-27 {
      @extend .full-bg-img;
      background-image: linear-gradient($topic-cyan 50%, #322721 50%);
      position: relative;
      color: #fff;
      text-shadow: none;
      .box {
        @extend .box-55;
        @extend .tab-100;
        position: relative;
        z-index: 1;
        .btn {
          @extend .button-green-bridge;
        }
      }
      .landing-row {
        &:first-child {
          position: relative;
          padding-bottom: 30px;
          &:before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 100vw;
            height: 0;
            padding-top: 64%;
            background: url("../images/lp-27.jpg") no-repeat right center;
            background-size: 100%;
            transform: translateX(-50vw) translateY(50%);
          }
          &:after {
            content: "";
            position: absolute;
            left: calc(61vw - (100vw - 100%)/2);
            bottom: 0;
            width: 5px;
            height: 1vw;
            background-color: #9fde02;
            box-shadow: 0 2px 2px #333;
            transform: skew(20deg);
            transition: width 0.5s;
          }
          .box {
            &:first-child {
              @extend .box-70;
              @extend .tab-100;
            }
          }
        }
        &:nth-child(2) {
          padding-top: 30px;
        }
        &:nth-child(3) {
          @extend .fullw-color-bg;
          margin-bottom: -50px;
          padding-bottom: 50px;
          &:before {
            background-color: #46372f;
            z-index: 1;
          }
        }
      }
      &.in-viewport {
        .landing-row {
          &:first-child {
            &:after {
              width: 18vw;
            }
          }
        }
      }
    }
    .lp-28 {
      @extend .full-bg-img;
      @extend .bg-img-overlay-blur;
      background: url("../images/lp-28.jpg?v3") no-repeat right center;
      background-size: cover;
      .box {
        @extend .box-50;
        @extend .tab-100;
      }
      &.v1 {
        background: url("../images/lp-28-v1.jpg") no-repeat right center;
      }
    }
    .lp-29 {
      background-color: $deep-white;
      @extend .lp-img-right;
      &:after {
        background: url("../images/lp-29.jpg?v4") no-repeat left center;
        background-size: cover;
      }
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
      &.v2 {
        &:after {
          background-image: url("../images/landing-head-v2.jpg");
          background-position: center top;
        }
      }
    }
    .lp-30 {
      background-color: $topic-cyan;
      color: #fff;
      @extend .lp-img-left;
      .landing-row {
        @extend .landing-row-right;
      }
      .box {
        width: 37%;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
      &:after {
        background: url("../images/lp-30.jpg") no-repeat right 0;
        background-size: cover;
      }
    }
    .lp-31 {
      @extend .full-bg-img;
      @extend .bg-img-overlay-blur;
      background: url("../images/lp-31.jpg") no-repeat right center;
      background-size: cover;
      &:before {
        background: rgba(0, 0, 0, 0.5);
      }
      .box {
        @extend .box-50;
        @extend .tab-100;
        h1 {
          padding-top: 0.8em;
        }
      }
      a.btn {
        margin: 0;
      }
    }
    .lp-32 {
      background-color: $topic-cyan;
      color: #fff;
      @extend .lp-img-right;
      &:after {
        background: url("../images/lp-32.jpg") no-repeat left center;
        background-size: cover;
      }
      .box {
        @extend .box-60;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
    }
    .lp-33 {
      background-color: $topic-cyan;
      color: #fff;
      @extend .lp-img-left;
      .landing-row {
        @extend .landing-row-right;
      }
      .box {
        width: 37%;
        @extend .tab-100;
      }
      .btn {
        @extend .lp-btn-border-clone;
      }
      &:after {
        background: url("../images/lp-33.jpg") no-repeat right 0;
        background-size: cover;
      }
    }
    .lp-34 {
      background: $deep-white2 url('../images/lp-34.jpg?v1') no-repeat right bottom;
      background-size: auto 100%;
      .box {
        @extend .box-70;
        @extend .tab-100;
        @extend .lp-white-box;
        @extend .txt-sm;
      }
    }
    .lp-35,
    div[class*="pane-mp-35"] {
      background-color: $baby;
      padding-top: 50px;
      padding-bottom: 50px;
      .pane-views-panes {
        .pane-content {
          padding-left: 0;
          padding-right: 0;
        }
      }
      .box {
        @extend .box-padding;
      }
      .ckeditor-accordion-container {
        @extend .ckeditor-accordion-style2;
      }
    }
    .pane-mp-36 {
      h2.pane-title {
        background-color: $topic-cyan;
        color: #fff;
        text-align: center;
        padding: 50px 20px;
        margin: 0;
      }
    }
    .lp-36 {
      background-color: #f7f7f7;
      @extend .lp-img-left;
      .landing-row {
        height: 400px;
        @extend .landing-row-right;
      }
      .box {
        font-size: 36px;
        width: 37%;
        @extend .tab-100;
      }
      &:after {
        background: url("../images/lp-36.jpg?v") no-repeat center center;
        background-size: contain;
      }
    }
    .lp-37 {
      background-color: $hover;
      @extend .lp-img-right;
      .landing-row {
        height: 400px;
        &:before,
        &:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 60%;
          height: 100%;
        }
        &:before {
          background-image: url('../images/video-step.svg');
          background-repeat: space;
          background-position: right center;
          background-size: auto 100%;
          opacity: 0.4;
        }
        &:after {
          background-image: linear-gradient(to left, rgba(255,255,255,0) 30%, rgba(244,242,240, 0.5) 100%);
        }
      }
      .box {
        position: relative;
        font-size: 36px;
        z-index: 1;
        @extend .box-60;
        @extend .tab-100;
      }
      &:after {
        background: url("../images/lp-37.jpg?v2") no-repeat center center;
        background-size: contain;
      }
    }
    .lp-38 {
      background-color: #e7e5e2;
      @extend .lp-img-left;
      .landing-row {
        height: 400px;
        @extend .landing-row-right;
      }
      .box {
        font-size: 36px;
        width: 37%;
        @extend .tab-100;
      }
      &:after {
        background: url("../images/lp-38.jpg") no-repeat right 0;
        background-size: cover;
      }
    }
    .lp-39 {
      padding-top: 0;
      text-align: center;
      .landing-row {
        @extend .landing-row-fullwidth;
        @extend .landing-row-center;
        padding: 0;
        .box {
          width: 100%;
          max-width: 450px;
        }
      }
      .row-reg {
        padding: 60px 0;
        background-color: $hover;
        .btn {
          font-size: 30px;
          padding: 20px 40px;
          margin: 0 0 20px 0;
          color: #fff;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }
        .box {
          position: relative;
          &:after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 80px;
            margin-right: -100px;
            margin-bottom: -80px;
            background: url("../images/curved-arrow.svg?v") no-repeat center center;
            background-size: contain;
            transform: rotate(-110deg);
          }
        }
      }
      .row-subjects {
        padding-top: 50px;
        .title {
          font-size: 24px;
        }
      }
    }
    .lp-40 {
      padding: 0;
      .pane-title {
        @extend .fullwidth-title;
        background-color: $topic-yellow;
        margin: 0;
      }
    }
    .lp-41 {
      @extend .full-bg-img;
      background: url('../images/lp-41.jpg') no-repeat left center;
      background-size: cover;
      .box {
        @extend .box-60;
      }
    }
    .lp-42,
    .lp-44 {
      h3 {
        margin-top: 2em;
        margin-bottom: 1em;
      }
      [class*="box"] {
        padding: 40px 30px;
        & + [class*="box"] {
          margin-top: 20px;
        }
      }
    }
    .lp-43 {
      padding: 0;
      .pane-title {
        @extend .fullwidth-title;
        background-color: $topic-cyan;
        margin: 0;
      }
    }
    .lp-45 {
      @extend .bg-img-overlay;
      background: url("../images/lp-erettsegi-1-v1.jpg") no-repeat center center;
      color: #fff;
      .box {
        @extend .box-50;
        @extend .tab-100;
      }
    }
    .lp-gyik {
      text-align: center;
      h2 {
        font-weight: normal;
        margin-bottom: 20px;
        strong {
          display: block;
        }
      }
      .ckeditor-accordion-container {
        @extend .box-70;
        @extend .tab-100;
        text-align: left;
        > dl {
          > dt {
            background-color: #fff;
            color: $topic-cyan;
            font-size: 20px;
            margin-top: 18px;
            margin-bottom: -2px;
            padding: 0;
            border: 2px solid $topic-darkyellow;
            box-shadow: 0px 10px 15px rgba(0,0,0,0.2);
            transition: background-color 0.5s;
            .ckeditor-accordion-toggle {
              width: 40px;
              height: 40px;
              left: 20px;
              margin-top: -20px;
              background: url('../images/accordion-plus.png?v2') no-repeat center center;
              background-size: contain;
              pointer-events: none;
              &:before {
                display: none;
                color: currentColor;
                width: auto;
                font-size: 50px;
              }
            }
            a {
              padding: 20px 20px 20px 80px;
              font-weight: bold;
              text-decoration: none;
            }
            &.active {
              color: $topic-cyan;
              background-color: #fff;
              border-bottom-color: rgba(255,255,255,0);
              transition: border-color 0s;
              .ckeditor-accordion-toggle {
                background: url('../images/accordion-minus.png?v2') no-repeat center center;
                background-size: contain;
              }
            }
            &:hover {
              color: $topic-cyan;
              background-color: $hover;
              & + dd {
                background-color: $hover;
              }
            }
          }
          > dd {
            font-size: 18px;
            border: 2px solid $topic-darkyellow;
            border-top: 0;
            background-color: #fff;
            box-shadow: 0px 15px 15px rgba(0,0,0,0.2);
            position: relative;
            z-index: 2;
            a {
              color: $topic-cyan;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .lp-parallax {
      padding-top: 0;
      padding-bottom: 0;
      .parallax-bg-image {
        @extend .lp-row-fullwidth;
      }
    }
    .section-promo-video {
      height: 0;
      width: 100%;
      padding-top: 56.25%;
      position: relative;
      background: url("../images/landing-promo-video1.jpg") no-repeat;
      background-size: cover;
      .promo-play-button {
        position: absolute;
        margin: auto;
        top: -100%;
        bottom: -100%;
        left: -100%;
        right: -100%;
        display: inline-block;
        width: 130px;
        height: 130px;
        border-radius: 100%;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 100%;
          background: rgba(255, 255, 255, 0.7);
          -webkit-transform: scale(1.3);
          transform: scale(1.1);
          -webkit-transition: transform 0.5s, opacity 0.5s;
          transition: transform 0.5s, opacity 0.5s;
        }
        .play-btn {
          width: 100%;
          height: 100%;
          border-radius: 100%;
          border: 1px solid $text;
          background: rgba(41, 41, 41, 0.9);
          color: #fff;
          text-align: center;
          box-shadow: none;
          text-indent: -200vw;
          overflow: hidden;
          position: relative;
          &:after {
            font-family: "FontAwesome";
            content: "\f04b";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 130px;
            font-size: 60px;
            text-indent: 10px;
          }
        }
        &:hover {
          &:before {
            -webkit-transform: scale(1.3);
            transform: scale(1.3);
            opacity: 0.15;
          }
        }
      }
      iframe#promo-video-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        & + .promo-play-button {
          display: none;
        }
      }
    }
    .section-erettsegi.panel-pane {
      padding-top: 0;
      background-color: $hover;
      .left-block,
      .right-block {
        padding-top: 0;
      }
      .ckeditor-accordion-container {
        > dl {
          background: none;
        }
      }
      [class*="row"] {
        display: inline-block;
        width: 100%;
        background: none;
        color: $text;
        font-size: 22px;
        margin-bottom: 120px;
        position: relative;
        .title {
          @extend .landing-row-fullwidth;
          padding-top: 70px;
          padding-bottom: 70px;
          margin-bottom: 70px;
          h2 {
            @extend .limited-wide;
            max-width: 1008px;
            width: 100%;
            margin: 0 auto;
            height: 100%;
            position: relative;
            color: #fff;
            box-sizing: border-box;
            span {
              position: absolute;
              left: 0;
              top: 0;
              color: #fff;
              font-size: 100px;
              text-align: center;
              line-height: 150px;
              display: inline-block;
              float: left;
              width: 150px;
              height: 100%;
              border: 1px solid #fff;
              border-top: none;
              border-bottom: none;
            }
          }
          & ~ * {
            @extend .limited-wide;
            box-sizing: border-box;
          }
        }
        .cont {
          .bar-chart {
            margin-left: 0;
            margin-right: 0;
            p {
              margin: 0;
            }
          }
        }
        .buttons {
          margin: 0;
          [class*="button"] {
            margin-right: 20px;
            margin-bottom: 10px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
        &.orange {
          .title {
            background: $topic-orange;
          }
          ol {
            li {
              &:before {
                background: $topic-orange;
              }
              &:hover {
                &:before {
                  background-color: $topic-darkorange;
                }
              }
            }
          }
        }
        &.yellow {
          .title {
            background: $topic-yellow;
          }
          ol {
            li {
              &:before {
                background: $topic-yellow;
              }
              &:hover {
                &:before {
                  background-color: $topic-darkyellow;
                }
              }
            }
          }
        }
        &.cyan {
          .title {
            background: $topic-cyan;
          }
          ol {
            li {
              &:before {
                background: $topic-cyan;
              }
              &:hover {
                &:before {
                  background-color: $topic-darkcyan;
                }
              }
            }
          }
        }
        &.green {
          .title {
            background: $topic-green;
          }
          ol {
            li {
              &:before {
                background: $topic-green;
              }
              &:hover {
                &:before {
                  background-color: $topic-darkgreen;
                }
              }
            }
          }
        }
      }
      .row-1 {
        margin-bottom: 70px;
        .buttons {
          [class*="button"] {
            padding-left: 15px;
            padding-right: 15px;
          }
        }
        .cont {
          @extend .img-right;
          position: relative;
          .left-block {
            padding-bottom: 70px;
          }
        }
        .image {
          background: url('../images/landing-2-v3.jpg') no-repeat;
          background-size: auto 100%;
        }
      }
      .row-2 {
        margin-bottom: 70px;
        position: relative;
        &:before {
          content: "";
          position: absolute;
          bottom: -50px;
          left: 0;
          right: 0;
          margin: auto;
          width: 100%;
          max-width: 1008px;
          height: calc(100% - 250px);
          background: url("../images/lp-erettsegi-2.jpg?v2") no-repeat right bottom;
          background-size: contain;
        }
        .title {
          & + .cont {
            @extend .img-right;
            background: none;
            position: relative;
            .left-block {
              @extend .cyan-box;
              margin-bottom: 50px;
            }
          }
        }
        .cont {
          position: relative;
          .bar-chart {
            margin-bottom: 30px;
          }
          &:last-child {
            @extend .img-right;
            .landing-row {
              @extend .lp-white-box;
              p {
                margin: 0;
              }
            }
            .image {
              background: url('../images/icon-fly.svg') no-repeat left center;
              background-size: auto 50%;
            }
          }
        }
      }
      .row-3 {
        .title {
          margin-bottom: 0;
          & + .cont {
            @extend .img-right;
            background: none;
            position: relative;
            .left-block {
              padding-top: 70px;
            }
            .image {
              background: url('../images/lp-erettsegi-3.jpg') no-repeat;
              background-size: auto 100%;
            }
          }
        }
        .cont {
          &:last-child {
            h2 {
              margin-bottom: 15px;
              & + p {
                margin-top: 15px;
                margin-bottom: 30px;
              }
            }
          }
        }
        .cont-1 {
          .orange-box {
            position: relative;
            &:before {
              content: "";
              position: absolute;
              top: 0;
              left: 50%;
              width: 200px;
              height: 100%;
              margin-left: -100px;
              background-image: url('../images/video-step-down.svg'), url('../images/video-step-down.svg');
              background-repeat: no-repeat, no-repeat;
              background-position: center bottom, center top;
              background-size: 100%;
              opacity: 0.1;
              pointer-events: none;
            }
          }
        }
        .cont-2 {
          padding-top: 20px;
          position: relative;
          > div {
            position: relative;
          }
          .icon-cup {
            position: relative;
            padding-left: 100px;
            &:before {
              content: "";
              position: absolute;
              left: 15px;
              top: 0;
              display: block;
              width: 70px;
              height: 100%;
              background: url('../images/icon-cup.png') no-repeat center center;
              background-size: contain;
            }
          }
          &:before {
            content: "";
            position: absolute;
            z-index: 0;
            top: 0;
            left: 50%;
            display: inline-block;
            width: 100vw;
            height: 100%;
            transform: translateX(-50%);
            @extend .gradient-bg1;
          }
        }
        .cont-3 {
          padding-top: 50px;
          .ckeditor-accordion-container {
            @extend .ckeditor-accordion-style2;
            dl {
              dt {
                .ckeditor-accordion-toggler {
                  text-decoration: none;
                  font-size: 30px;
                  color: $text;
                  font-weight: bold;
                  background-color: #fff;
                  background-image: url('../images/icon-crystal-ball.png');
                  background-repeat: no-repeat;
                  background-position: 20px center;
                  background-size: auto 38px;
                  border-color: currentColor;
                  padding: 20px 30px 20px 70px;
                  margin-bottom: 20px;
                  box-sizing: border-box;
                  box-shadow: 0px 0px 10px rgba(0,0,0,.5);
                  &:hover {
                    color: $topic-cyan;
                  }
                }
                &.active {
                  .ckeditor-accordion-toggler {
                    color: $topic-cyan;
                  }
                }
              }
              dd {
                padding: 0 20px;
                .subscribe-block {
                  color: #fff;
                  padding: 20px;
                  background: url('../images/landing-sikeres-head.jpg') no-repeat center center;
                  background-size: cover;
                  margin-left: -20px;
                  margin-right: -20px;
                  h3 {
                    line-height: 1.3;
                  }
                }
              }
            }
          }
          form {
            color: #fff;
            .form-item {
              margin-top: 0;
              input {
                padding: 10px;
              }
              &:not(.form-type-checkbox) {
                label {
                  @extend .visually-hidden;
                }
              }
            }
            #submit {
              @extend .button-cyan;
            }
          }
        }
      }
      .row-4 {
        display: table;
        margin-bottom: 0 !important;
        .title {
          margin-bottom: 0 !important;
        }
      }
      .ckeditor-accordion-container {
        margin-top: 25px !important;
        .ckeditor-accordion-toggle {
          display: none;
        }
        .ckeditor-accordion-toggler {
          color: $text;
          font-size: 28px;
          font-weight: 300;
          display: inline-block;
          padding: 10px;
          border: 1px solid $text;
        }
        & > dl {
          margin: 0;
          & > dt {
            background: none;
            position: relative;
            padding: 0;
          }
          &.open {
            .ckeditor-accordion-toggler {
              display: none !important;
            }
            dd {
              display: block !important;
            }
          }
        }
        dd {
          padding-left: 0;
          padding-right: 0;
        }
        ol {
          list-style: none;
          padding: 0;
          margin: 0;
          li {
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            list-style: none;
            position: relative;
            margin: 10px 0;
            &:before {
              content: "";
              margin-right: 20px;
              color: #fff;
              display: inline-block;
              width: 150px;
              min-width: 150px;
              height: 150px;
              line-height: 150px;
              text-align: center;
            }
            &:first-child {
              &:before {
                background-image: url('../images/icon-eye.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 50px auto;
              }
            }
            &:nth-child(2) {
              &:before {
                background-image: url('../images/icon-bulb.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: auto 50px;
              }
            }
            &:nth-child(3) {
              &:before {
                background-image: url('../images/icon-mobile.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: auto 50px;
              }
            }
            a {
              &:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
  &.parents,
  &.students,
  &.online-gimis,
  &.online-egyetemi,
  &.egyetem-tipp,
  &.mire-jo,
  &.miert-tanulunk-matekot {
    .pane-page-content {
      .head {
        background: url('../images/mateking-cover-2025.jpg?v1') 50% 0 no-repeat fixed;
        color: #fff;
        padding-top: 188px;
        padding-bottom: 120px;
        h1, p {
          width: 60%;
        }
        h1 {
          margin-top: 0;
          margin-bottom: 0;
          line-height: 1.1em;
        }
        .txt-sm {
          margin: 0 0 1em 0;
        }
      }
      .lp-2 {
        .gear,
        .fly,
        .target {
          text-align: center;
          &:before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 50px;
            margin-bottom: 15px;
            background-size: auto 100%;
            background-position: center center;
          }
        }
        .gear {
          &:before {
            @extend .icon-gears;
          }
        }
        .fly {
          &:before {
            @extend .icon-fly;
          }
        }
        .target {
          &:before {
            @extend .icon-target;
          }
        }
      }
      .lp-3 {
        .landing-row {
          position: relative;
        }
        .image {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 60%;
          margin: auto;
          margin-left: 20px;
          width: 45%;
          height: 0;
          padding-top: 45%;
          background: url('../images/landing-parents-3.jpg') no-repeat center center;
          background-size: auto 100%;
          border-radius: 100%;
        }
      }
      .lp-4 {
        .txt-gray {
          strong {
            color: $text;
          }
        }
        .landing-row {
          .image {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 60%;
            margin: auto;
            margin-left: 30px;
            width: 25%;
            height: 0;
            padding-top: 25%;
            background: url('../images/icon-face-smile.svg?v=1') no-repeat center center;
            background-size: contain;
          }
          &.right {
            .image {
              left: auto;
              right: 60%;
              margin-left: 0;
              margin-right: 30px;
              background: url('../images/icon-face-sad.svg?v=1') no-repeat center center;
              background-size: contain;
            }
          }
        }
      }
      .lp-5 {
        .landing-row {
          .image {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 60%;
            margin: auto;
            width: 500px;
            max-width: calc(40% - 20px + (100vw - 100%)/2);
            height: 300px;
            background: url('../images/episode-anim.gif') no-repeat center center;
            background-size: 100% auto;
            a {
              position: absolute;
              top: 0;
              left: 0;
              display: inline-block;
              width: 100%;
              height: 100%;
              text-indent: -200vw;
              overflow: hidden;
            }
          }
        }
      }
      .pane-testimonials,
      .lp-8 {
        .pane-title {
          @extend .limited-wide;
          text-align: center;
        }
      }
      .pane-testimonials {
        padding-top: 50px;
        padding-bottom: 50px;
        h2.pane-title {
          margin-bottom: 1.2em;
        }
        .view-testimonials {
          margin: auto;
          .view-footer {
            display: none;
          }
        }
      }
      .section-2 {
        @extend .img-middle;
      }
      .section-12-v1 {
        @extend .img-left;
        background-color: $topic-yellow;
        color: #fff;
        .image {
          background: url("../images/landing-12-v2.jpg") no-repeat right 0;
          background-size: auto 100%;
        }
      }
    }
  }
  /* kozepsulis oldalak */
  &.parents,
  &.students,
  &.online-gimis,
  &.high-school,
  &.final-exam,
  &.final-exam-advanced {
    .pane-page-content {
      .section-8 {
        background: url('../images/landing-8-kozep.jpg?v=1') no-repeat 0 center;
        background-size: cover;
      }
      .lp-6 {
        background: $deep-white2 url('../images/lp-6-kozep.jpg?v=1') no-repeat right bottom;
        background-size: 600px auto;
      }
    }
  }
  &.online-gimis,
  &.online-egyetemi,
  &.egyetem-tipp,
  &.mire-jo,
  &.miert-tanulunk-matekot {
    .pane-page-content {
      .section-2 {
        @extend .img-circle;
        .image {
          background: none;
          &:before {
            background-image: url('../images/landing-2.jpg');
          }
        }
      }
    }
  }
  &.egyetem-megoldas,
  &.gimis-megoldas,
  &.szulo-megoldas,
  &.final-exam-2023,
  &.altisk,
  &.matekingpro,
  &.jegyjavitas,
  &.nyolcadikos-felv,
  &.elmeny,
  &.tanari {
    .pane-page-content {
      .head {
        color: #fff;
        padding-top: 168px;
        padding-bottom: 120px;
        background: url('../images/mateking-cover-2025.jpg?v1') 50% 0 no-repeat fixed;
        h1 {
          margin-top: 0;
          margin-bottom: 0;
          line-height: 1.1em;
        }
        h1, p {
          max-width: 600px;
          width: auto;
        }
        p {
          @extend .text-bigger;
          max-width: 550px;
        }
      }
      .lp-8 {
        padding-top: 0;
        h2 {
          @extend .lp-row-fullwidth;
          background-color: $topic-cyan;
          color: #fff;
          padding: 50px 0;
          margin-left: 0;
          margin-right: 0;
        }
      }
    }
  }
  &.peti {
    .pane-page-content {
      .head {
        background-image: url('../images/landing-peti-head-v1.jpg');
        .pane-content {
          &:before,
          &:after {
            display: none !important;
          }
        }
      }
      .lp-6 {
        background-image: url('../images/lp-6-peti.jpg');
      }
      .lp-13 {
        background-image: url('../images/lp-13-peti.jpg');
      }
      .lp-14 {
        &:after {
          background-image: url('../images/lp-14-peti.jpg');
        }
      }
      .lp-17 {
        &:after {
          background-image: url('../images/lp-17-peti.jpg');
        }
      }
    }
    #mathsplain-front-parallax-1 {
      background-image: url('../images/parallax-peti.jpg');
    }
  }
  &.elmeny {
    .head {
      &.success {
        background-image: url('../images/landing-sikeres-head.jpg');
      }
    }
  }
  &.szulo-megoldas {
    .pane-page-content {
      .head {
        background-image: url('../images/landing-szuloi-head.jpg?v1');
      }
    }
  }
  &.tanari {
    .pane-page-content {
      .head {
        background-image: url('../images/landing-head-v4.jpg');
      }
    }
  }
  &.nyolcadikos-felv {
    .pane-page-content {
      .head {
        background-image: url('../images/landing-head-v2.jpg');
        &.v3 {
          background-image: url('../images/landing-head-v3-v3.jpg?v1');
        }
      }
    }
    &.v1 {
      .pane-page-content {
        .head {
          h1, p {
            max-width: 600px;
            width: auto;
          }
        }
      }
    }
  }
  &.jegyjavitas {
    .pane-page-content {
      .head {
        background-image: url('../images/landing-head-v1.jpg?v2');
      }
    }
  }
  &.altisk {
    .pane-page-content {
      .head {
        &.v1 {
          background-image: url('../images/landing-head-v1.jpg?v2');
        }
      }
    }
  }
  &.matekingpro {
    .pane-page-content {
      .head {
        @extend .bg-img-overlay-blur;
        background-image: url('../images/matekingpro-head-v2.jpg');
      }
    }
  }
  &.final-exam-2023 {
    .pane-page-content {
      .head {
        padding-top: 115px;
        background-color: #000;
        background-image: url('../images/final-exam-cover.jpg?v1');
        h1 {
          font-size: 46px;
        }
        p {
          max-width: 670px;
        }
        .notice-block {
          margin-top: -15px;
        }
      }
      .section-erettsegi.panel-pane {
        .row-1 {
          display: block;
          margin-bottom: 0;
          .title {
            text-shadow: none;
            margin-bottom: 0;
          }
          .landing-row {
            color: #fff;
            background: none;
            padding-top: 70px;
            padding-bottom: 70px;
          }
          .box {
            @extend .box-60;
            @extend .tab-100;
            margin: 0;
            position: relative;
          }
          .img {
            @extend .full-bg-img;
            @extend .bg-img-overlay-blur;
            background: url('../images/lp-erettsegi-1-v1.jpg') no-repeat center center;
            background-size: cover;
            position: absolute !important;
            margin: 0 !important;
            top: 0;
            left: 50%;
            width: 100vw;
            height: 100%;
            transform: translateX(-50vw);
          }
        }
        .row-3 {
          .cont-1.landing-row {
            color: #fff;
            background: none;
            padding-top: 70px;
            padding-bottom: 70px;
            .box {
              @extend .box-60;
              @extend .tab-100;
              margin: 0;
              position: relative;
            }
            .img {
              @extend .full-bg-img;
              @extend .bg-img-overlay-blur;
              background: url('../images/lp-erettsegi-3-v1.jpg') no-repeat right center;
              background-size: cover;
              position: absolute !important;
              margin: 0 !important;
              top: 0;
              left: 50%;
              width: 100vw;
              height: 100%;
              transform: translateX(-50vw);
            }
            .orange-box {
              box-shadow: 2px 2px 16px #000;
            }
          }
          .bar-chart {
            margin-top: 30px;
          }
        }
      }
    }
  }
  &.mire-jo,
  &.miert-tanulunk-matekot {
    .pane-page-content {
      .head {
        background-image: url("../images/landing-mirejo-1.jpg");
        h1 {
          font-size: 40px;
        }
        h1,
        p {
          width: 45%;
        }
        &.pro-success {
          background-image: url("../images/landing-sikeres-head.jpg");
          h1,
          p {
            width: auto;
            max-width: 600px;
          }
        }
      }
      .section-2 {
        .image {
          &:before {
            background: url("../images/landing-mirejo-2.jpg") no-repeat left center;
            background-size: auto 100%;
          }
        }
        &.v2 {
          .image {
            &:before {
              background: url("../images/landing-mirejo-6.jpg") no-repeat left center;
              background-size: auto 100%;
            }
          }
        }
        &.v3 {
          .image {
            &:before {
              background: url("../images/landing-mirejo-10.jpg") no-repeat left center;
              background-size: auto 100%;
            }
          }
        }
        &.v4 {
          .image {
            &:before {
              background: url("../images/landing-mirejo-14.jpg") no-repeat left center;
              background-size: auto 100%;
            }
          }
        }
        &.v5 {
          .image {
            &:before {
              background: url("../images/landing-mirejo-18.jpg?v1") no-repeat left center;
              background-size: auto 100%;
            }
          }
        }
      }
      .section-3-v1 {
        .image {
          background: url("../images/landing-mirejo-3.jpg") no-repeat 0 0;
          background-size: auto 100%;
        }
        &.v2 {
          background-color: $topic-cyan;
          .image {
            background: url("../images/landing-mirejo-7.jpg") no-repeat 0 bottom;
            background-size: auto 100%;
          }
        }
        &.v3 {
          background-color: $topic-cyan;
          .image {
            background: url("../images/landing-mirejo-11-v3.jpg") no-repeat 0 0;
            background-size: auto 100%;
          }
        }
        &.v4 {
          .image {
            background: url("../images/landing-mirejo-17.jpg") no-repeat 0 0;
            background-size: auto 100%;
          }
        }
      }
      .section-11-v2 {
        background: url("../images/landing-mirejo-4.jpg") no-repeat right 0;
        background-size: cover;
        &:before {
          background-color: $topic-cyan !important;
        }
      }
      .section-11 {
        &.v3 {
          background: url("../images/landing-mirejo-8.jpg") no-repeat right 0;
          background-size: cover;
        }
        &.v4 {
          background: url("../images/landing-mirejo-11-v4.jpg") no-repeat center 0;
          background-size: cover;
          &:before {
            visibility: hidden;
          }
        }
        &.v5 {
          background: url("../images/landing-mirejo-4.jpg") no-repeat right 0;
          background-size: cover;
          &:before {
            background-color: $topic-cyan !important;
          }
          .left-block {
            padding-bottom: 0;
          }
        }
      }
      .section-15 {
        background: url("../images/landing-mirejo-5.jpg") no-repeat left center;
        background-size: cover;
        &.v2 {
          background: url("../images/landing-mirejo-9.jpg") no-repeat left center;
          background-size: cover;
        }
        &.v3 {
          background: url("../images/landing-mirejo-13.jpg") no-repeat left center;
          background-size: cover;
        }
        &.v4 {
          background: url("../images/landing-mirejo-15.jpg") no-repeat left center;
          background-size: cover;
        }
        &.v5 {
          background: url("../images/landing-mirejo-16.jpg?v1") no-repeat left center;
          background-size: cover;
        }
      }
    }
  }
  &.miert-tanulunk-matekot {
    .pane-page-content {
      .head {
        background-image: url("../images/landing-head-fraktalok.jpg");
        h1,
        p {
          width: 50%;
        }
      }
    }
  }
  &.online-gimis {
    .pane-page-content {
      .section-3 {
        .image {
          background: url("../images/landing-3-kozepiskola.jpg") no-repeat right 0;
          background-size: auto 100%;
        }
      }
      .section-6 {
        background: url("../images/landing-6-kozepiskola.jpg") no-repeat 0 center;
        background-size: cover;
      }
      .section-10 {
        background: url("../images/landing-10-kozepiskola.jpg") no-repeat 0 center;
        background-size: cover;
      }
      .lp-6 {
        background: #fff url('../images/lp-6-kozep-wh.jpg') no-repeat right bottom;
        background-size: 500px auto;
      }
    }
  }
  &.online-egyetemi,
  &.egyetem-tipp {
    .pane-page-content {
      .section-3 {
        .image {
          background: url("../images/landing-3-egyetem.jpg") no-repeat right 0;
          background-size: auto 100%;
        }
      }
    }
  }
  &.uni,
  &.university,
  &.online-egyetemi,
  &.egyetem-tipp {
    .pane-page-content {
      .section-8 {
        background: url('../images/landing-8-egyetem.jpg') no-repeat 0 center;
        background-size: cover;
      }
      .section-15,
      .lp-15 {
        background: url("../images/landing-15-egyetem.jpg") no-repeat left center;
        background-size: cover;
      }
    }
  }
  &.high-school {
    .pane-page-content {
      .section-2 {
        @extend .img-middle;
      }
      .section-3 {
        .image {
          background: url("../images/landing-3-kozepiskola.jpg") no-repeat right 0;
          background-size: auto 100%;
        }
      }
      .section-6 {
        background: url("../images/landing-6-kozepiskola.jpg") no-repeat 0 center;
        background-size: cover;
      }
      .section-10 {
        background: url("../images/landing-10-kozepiskola.jpg") no-repeat 0 center;
        background-size: cover;
      }
      .section-12 {
        .image {
          background: url("../images/landing-12-kozepiskola.jpg") no-repeat;
          background-size: auto 100%;
        }
      }
    }
  }
  &.university {
    .pane-page-content {
      .section-2 {
        @extend .img-middle;
      }
      .section-3 {
        .image {
          background: url("../images/landing-3-egyetem.jpg") no-repeat right 0;
          background-size: auto 100%;
        }
      }
    }
  }
  //ide kerulek az egyetemi kepek
  &.uni {
    .lp-6 {
      //background-image: url("../images/lp-6-egyetem.jpg");
    }
    .lp-16 {
      &:after {
        background-image: url("../images/lp-16-egyetem.jpg");
      }
    }
    .lp-17 {
      &:after {
        background-image: url("../images/lp-17-egyetem.jpg?v2");
      }
    }
    .lp-18 {
      background-image: url("../images/landing-8-egyetem.jpg");
    }
    .lp-34 {
      background-image: url("../images/lp-34-egyetem.jpg?v1");
    }
  }
  &.egyetem-tipp {
    .pane-page-content {
      .head {
        background-image: url("../images/landing-egyetem-tipp-head.jpg");
        position: relative;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.35);
        }
        h1 {
          font-size: 2em;
        }
      }
      .section-3 {
        .image {
          background: url("../images/landing-egyetem-tipp-3.jpg?v=1") no-repeat right 0;
          background-size: auto 100%;
        }
      }
    }
  }
  &.egyetem-tipp-2023 {
    .pane-page-content {
      .head {
        background-image: url("../images/landing-egyetem-tipp-head.jpg");
        position: relative;
        padding-top: 188px;
        padding-bottom: 120px;
        color: #fff;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.35);
        }
        h1 {
          font-size: 2em;
          line-height: 1.1;
          margin-top: 0;
          margin-bottom: 0;
        }
        p {
          margin: 0 0 1em 0;
        }
        .box {
          @extend .box-60;
        }
      }
      .lp-8 {
        padding-top: 0;
        h2 {
          @extend .lp-row-fullwidth;
          background-color: $topic-cyan;
          color: #fff;
          padding: 50px 0;
          margin-left: 0;
          margin-right: 0;
        }
      }
    }
  }
  &.final-exam {
    .pane-page-content {
      .section-10 {
        background: url("../images/landing-10-kozepiskola.jpg") no-repeat 0 center;
        background-size: cover;
      }
    }
  }
  &.final-exam-advanced {
    .pane-page-content {
      .section-erettsegi.panel-pane {
        .row-2 {
          .image {
            background: url("../images/landing-emelt-erettsegi-2.jpg") no-repeat;
            background-size: auto 100%;
          }
        }
      }
    }
  }
  &.gdpr {
    .pane-page-content {
      .gdpr-section-1 {
        @extend .full-bg-img;
        background: url('../images/GDPR-1.jpg') no-repeat center 0;
        background-size: cover;
        padding: 20px 0 80px 0;
        h1 {
          line-height: 1.3em;
          font-size: 1.5em;
        }
      }
      .gdpr-section-2 {
        @extend .fulltext;
        background: $topic-cyan;
        color: #fff;
        padding-bottom: 50px;
        .pane-content {

        }
      }
      .gdpr-section-3 {
        @extend .img-right;
        background: $topic-orange;
        .pane-content {
          padding-top: 30px;
          padding-bottom: 30px;
        }
        .image {
          background: url('../images/GDPR-2.jpg') no-repeat;
          background-size: auto 100%;
          background-position: -100px center;
        }
        .text {
          padding: 20px 0;
        }
      }
      .gdpr-section-4 {
        @extend .fulltext;
        background: $topic-yellow;
        color: #fff;
        padding: 40px 0;
      }
      .gdpr-section-5 {
        @extend .fulltext;
        background: url('../images/GDPR-5.jpg') no-repeat center center;
        background-size: cover;
        color: #fff;
        padding: 80px 0;
      }
      .gdpr-section-6 {
        @extend .full-bg-img;
        background: url('../images/landing-8.jpg') no-repeat center center;
        background-size: cover;
        padding-top: 200px;
        padding-bottom: 90px;
        .button-bordered {
          margin-top: 90px;
        }
      }
    }
  }
}
.landing-style-2 {
  h1 {
    font-size: 46px;
  }
  .pane-page-content {
    [class*="lp-"] {
      a.btn,
      a[class*="button"] {
        @extend .margin-top-2x;
      }
    }
    .lp-6 {
      .pane-content {
        > div {
          padding-left: 15px;
          padding-right: 15px;
        }
      }
    }
    .section-erettsegi.panel-pane {
      .cont {
        background: none !important;
      }
    }
  }
}

.page-checkout {
  fieldset {
    padding: 40px 15px 15px 15px;
    position: relative;
    legend {
      position: absolute;
      color: $text;
      font-size: 22px;
      margin:  10px 15px;
      left: 0;
      top: 0;
      .fieldset-legend {
        background: none !important;
        padding: 0 !important;
        a {
          color: $text;
        }
      }
    }
    fieldset {
      padding: 0;
      margin: 0;
      border: none;
      legend {
        display: none;
      }
    }
    &.cart_contents {
      border: none;
      padding: 0;
      legend {
        display: none;
      }
      table {
        border: none;
        color: #fff;
        tbody {
          border: none;
        }
        tr {
          border: none;
          background: $gray;
          td {
            border: none;
            &.views-field-line-item-title {
              width: 110px;
              border-right: 1px solid #fff;
              text-align: center;
              font-size: 14px;
              padding-top: 50px;
              padding-bottom: 20px;
              line-height: 1.2em;
            }
            &.views-field-line-item-id {
              //font-family: 'ProximaNovaLight';
              font-family: 'Raleway';
              font-size: 24px;
              text-transform: uppercase;
            }
          }
        }
      }
      .views-field-commerce-unit-price,
      .views-field-commerce-order-total {
        .field-content {
          .price {
            margin: 30px 0;
            font-size: 24px;
            color: $text;
            .amount-suffix {
              display: block;
              color: $gray;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
    }
    &.commerce_coupon {
      .form-item {
        margin: 0;
      }
      .form-submit {
        @extend .button-green;
        display: inline-block;
        padding: 10px 20px;
        margin-top: 24px;
        font-size: 18px;
        line-height: 20px;
      }
    }
    &.checkout-buttons {
      padding: 0;
      .checkout-cancel {
        padding: 20px;
        font-size: 20px;
        text-transform: none;
        color: $gray;
      }
    }
  }
  .commerce_payment {
    .form-type-radio {
      label {
        background: none;
        padding: 0;
      }
    }
    .commerce-barion-icons {
      img {
        max-width: 280px;
        width: 100%;
      }
    }
  }
  .checkout-buttons {
    .continue-prefix {
      color: $topic-cyan;
      font-weight: bold;
    }
  }
}
.page-node-quiz-results {
  .pane-page-content {
    fieldset {
      margin-bottom: 20px;
    }
  }
}

#hybridauth-user-identity {
  table {
    word-break: break-all;
  }
}

#mini-panel-mathsplain_header_3 {
  overflow: hidden;
}
#mathsplain-front-parallax-1,
#mathsplain-front-parallax-2,
#mathsplain-front-parallax-3,
#mathsplain-front-parallax-4,
#mathsplain-front-parallax-5,
#mathsplain-header-video,
.pane-mathsplain-front-pane,
.parallax-bg-image,
.parallaxbg {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center top;
  position: relative;
  overflow: hidden;
}
#mathsplain-front-parallax-1 {
  background: url('../images/parallax1.jpg?v');
}
#mathsplain-front-parallax-2 {
  background: url('../images/parallax2.jpg?v1');
  //background: url('../images/bay-sm.jpg');
}
#mathsplain-front-parallax-3 {
  background: url('../images/parallax3.jpg?v');
  //background: url('../images/wind-sm.jpg');
}
#mathsplain-front-parallax-4 {
  background: url('../images/parallax4.jpg?v');
  //background: url('../images/cauliflower-sm.jpg');
}
#mathsplain-front-parallax-5 {
  background: url('../images/parallax5.jpg?v');
  //background: url('../images/parallax4-1-sm.jpg');
}
#mathsplain-front-parallax-6 {
  background: url('../images/parallax6.jpg?v');
}
#mathsplain-front-parallax-7 {
  background: url('../images/parallax7.jpg?v');
}
#promobar-wrapper {
  background: none;
  height: auto;
  width: 400px;
  margin-left: -400px;
  margin-bottom: 20px;
  bottom: 0;
  @include hover-anim(margin);
  #promobar-container {
    padding: 0 !important;
    #promobar-content {
      background: $text;
      color: #fff;
      padding: 20px;
      font-size: 18px;
      position: relative;
      z-index: 2;
      @include box-shadow(0,0,20px,#000);
      a, a:visited {
        color: currentColor;
      }
      h2 {
        margin: 0 0 10px 0;
        a {
          color: #fff;
        }
      }
      p {
        margin: 10px 0;
      }
      .field-name-field-read-more-button {
        margin-top: 18px;
        a {
          @extend .button-green;
          padding: 20px 0;
          width: 100%;
          color: #fff !important;
          background: #009900;
          &:hover {
            background: #01a401;
          }
        }
      }
    }
    #promobar-close-wrapper {
      margin: 0;
      padding: 0;
      width: 40px;
      height: 40px;
      right: -40px;
      z-index: 1;
      @include box-shadow(0,0,10px,#000);
      #promobar-close {
        background: $text;
        font-size: 22px;
        color: #fff;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 40px;
        span {
          display: none;
        }
        &:before,
        &:after {
          content: "";
          background: #fff;
          position: absolute;
          @include hover-anim(all);
        }
        &:before {
          width: 4px;
          height: 20px;
          top: 10px;
          left: 18px;
        }
        &:after {
          width: 20px;
          height: 4px;
          top: 18px;
          left: 10px;
        }
      }
    }
  }
  &.opened {
    margin-left: 0;
    @include hover-anim(margin);
    #promobar-container {
      #promobar-close-wrapper {
        #promobar-close {
          &:before,
          &:after {
            @include hover-anim(all);
            @include box-rotate(-45);
          }
        }
      }
    }
    &.loaded {
      transition: none;
    }
  }
  &.higher-than-window {
    position: absolute;
    bottom: auto;
    margin-top: 65px;
  }
}
#modalContent.exit-popup {
  top: 10% !important;
  left: -100% !important;
  right: -100% !important;
  margin: auto;
  width: 80%;
  height: 80%;
  display: inline-block !important;
  background: none !important;
  .ctools-modal-content {
    width: 100% !important;
    height: 100% !important;
    line-height: 0;
    background: none !important;
  }
  .modal-header {
    padding: 0;
    .exit-popup-modal-title {
      display: none;
    }
    .close {
      position: absolute;
      top: -40px;
      right: -40px;
      z-index: 1;
      font-size: 0;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      &:after {
        content: "\f057";
        font-family: "FontAwesome";
        font-size: 30px;
      }
    }
  }
  #modal-content {
    background: none !important;
    padding: 0;
    img {
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: 100% !important;
      position: absolute;
      top: 0;
      left: -100%;
      right: -100%;
      margin: auto;
      border: 3px solid #fff;
    }
  }
}

span.MathJax {
  font-size: 82%;
}

.touch-device {
  &.subject-term {
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: 0 0 !important;
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    &:before {
      content: "";
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    & > .panel-display {
      z-index: 2;
    }
  }
  #mathsplain-front-parallax-1,
  #mathsplain-front-parallax-2,
  #mathsplain-front-parallax-3,
  #mathsplain-front-parallax-4,
  #mathsplain-front-parallax-5,
  #mathsplain-header-video,
  .pane-mathsplain-front-pane,
  .parallaxbg,
  .parallax-bg-image {
    background-size: cover;
    background-attachment: scroll !important;
    background-position: center center !important;
    width: 100vw;
  }

  .image-rolo {
    .top,
    .bottom {
      display: none;
    }
    img {
      width: auto !important;
    }
  }
  .node.node-video {
    &.view-mode-full {
      .help-layer {
        .info-layer {
          .keyboard,
          .line4 {
            display: none;
          }
        }
      }
    }
  }
}

.front {
  background-color: $hover;
  h2 {
    text-transform: none;
    font-weight: bold;
  }
  iframe {
    max-width: 100%;
  }
  .pane-page-title {
    display: none;
  }
  .pane-subject-list {
    position: fixed;
  }
  .pane-mathsplain-header {
    &.mini {
      .pane-mathsplain-header-1 {
        padding: 0;
      }
    }
  }
  #mathsplain-front {
    #mathsplain-header-video-left-text {
      margin-top: -180px;
    }
  }
  .pane-subject-list {
    margin-top: 68px;
    z-index: 9;
    &.mini {
      margin-top: 0 !important;
      .view-subject-list {
        ul {
          li {
            .views-field-name {
              .field-content {
                a {
                  background-image: none;
                  display: table;
                  height: 50px;
                  padding-top: 0;
                  span {
                    &:first-child {
                      display: table-cell;
                      vertical-align: middle;
                    }
                  }
                }
              }
            }
            &.subject-term-99,
            &.subject-term-549 {
              .views-field-name {
                .field-content {
                  a {
                    span {
                      &:first-child {
                        display: none;
                      }
                    }
                    &:after {
                      display: table-cell;
                      vertical-align: middle;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .separator {
    line-height: 0;
    margin-bottom: 0;
  }
  div[class*="lp-"] {
    font-size: 22px;
    line-height: 1.3;
  }
  .lp-1 {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 50%;
      display: inline-block;
      width: 100vw;
      height: 100%;
      transform: translateX(-50%);
      @extend .gradient-bg1;
    }
    h2 {
      font-size: 38px;
      margin-top: 15px;
    }
    .pane-content {
      padding-top: 50px;
      padding-bottom: 50px;
    }
    .style-lp1 {
      .title {
        padding-top: 40%;
        padding-bottom: 40%;
        width: 80%;
        font-size: 36px;
      }
    }
    .easy {
      .title {
        &:before {
          background: url('../images/lp1-easy.jpg?v=1') no-repeat center center;
          background-size: cover;
        }
      }
    }
    .fast {
      .title {
        &:before {
          background: url('../images/lp1-fast-v1.jpg?v=1') no-repeat center center;
          background-size: cover;
        }
      }
    }
    .plain {
      .title {
        &:before {
          background: url('../images/lp1-plain.jpg') no-repeat center center;
          background-size: cover;
        }
      }
    }
  }
  .lp-7,
  .lp-9,
  .pane-mp-9,
  .lp-35,
  div[class*="pane-mp-35"] {
    padding-top: 50px;
    padding-bottom: 50px;
    h2 {
      @extend .front-title-style;
    }
  }
  .lp-35,
  div[class*="pane-mp-35"] {
    background-color: $baby;
    .box {
      @extend .box-padding;
    }
    .ckeditor-accordion-container {
      @extend .ckeditor-accordion-style2;
    }
  }
  .lp-7 {
    background: $deep-white2;
    .box {
      @extend .box-60;
      @extend .tab-100;
    }
    > .pane-content {
      @extend .limited-wide;
      .landing-row {
        padding-left: 20px;
        padding-right: 20px;
      }
    }
    .image {
      position: absolute;
      right: 60%;
      top: 0;
      bottom: 0;
      margin: auto;
      margin-right: 20px;
      width: 280px;
      height: 280px;
      border-radius: 100%;
      background: url('../images/Mosoczi_A.jpg') no-repeat center center;
      background-size: cover;
    }
  }
  .lp-9,
  .pane-mp-9 {
    background-color: $baby;
    iframe {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .view-press {
      width: 100%;
      margin-bottom: 30px;
    }
    .panel-pane {
      &:last-child {
        padding-left: 20px;
        padding-right: 20px;
      }
    }
  }
  .lp-gyik {
    background: #fff;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    > .pane-content {
      @extend .limited-wide;
    }
    h2 {
      font-size: 42px;
      font-weight: normal;
      margin-top: 0;
      margin-bottom: 20px;
      strong {
        display: block;
      }
    }
    .ckeditor-accordion-container {
      @extend .box-70;
      @extend .tab-100;
      text-align: left;
      > dl {
        > dt {
          background-color: #fff;
          color: $topic-cyan;
          font-size: 20px;
          margin-top: 18px;
          margin-bottom: -2px;
          padding: 0;
          border: 2px solid $topic-darkyellow;
          box-shadow: 0px 10px 15px rgba(0,0,0,0.2);
          transition: background-color 0.5s;
          .ckeditor-accordion-toggle {
            width: 40px;
            height: 40px;
            left: 20px;
            margin-top: -20px;
            background: url('../images/accordion-plus.png?v3') no-repeat center center;
            background-size: contain;
            pointer-events: none;
            &:before {
              display: none;
              color: currentColor;
              width: auto;
              font-size: 50px;
            }
          }
          a {
            color: currentColor;
            line-height: 1;
            padding: 20px 20px 20px 80px;
            font-weight: bold;
          }
          &.active {
            color: $topic-cyan;
            background-color: #fff;
            border-bottom-color: rgba(255,255,255,0);
            transition: border-color 0s;
            .ckeditor-accordion-toggle {
              background: url('../images/accordion-minus.png?v3') no-repeat center center;
              background-size: contain;
            }
          }
          &:hover {
            color: $topic-cyan;
            background-color: $hover;
            & + dd {
              background-color: $hover;
            }
          }
        }
        > dd {
          font-size: 18px;
          border: 2px solid $topic-darkyellow;
          border-top: 0;
          background-color: #fff;
          box-shadow: 0px 15px 15px rgba(0,0,0,0.2);
          position: relative;
          z-index: 2;
          a {
            color: $topic-cyan;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  .icon-01 {
    @extend .icon-target;
    background-position: left center;
  }
  .icon-02 {
    @extend .icon-fly;
    background-position: left center;
  }
  .icon-03 {
    @extend .icon-gears;
    background-position: left center;
  }
  .icon-04 {
    @extend .icon-world;
    background-position: left center;
  }
  .icon-01,
  .icon-02,
  .icon-03,
  .icon-04 {
   background-size: 120px auto;
   & > .pane-content {
    margin-left: 160px;
   }
  }
  &.video-play {
    .pane-subject-list {
      margin-top: -20px;
    }
    #mathsplain-header-video {
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
      #mathsplain-header-video-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  .start-learning {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 50%;
      display: inline-block;
      width: 100vw;
      height: 100%;
      transform: translateX(-50%);
      @extend .gradient-bg1;
    }
  }
}

div#chtl-chat-icon-container {
  z-index: 10 !important;
}

.not-front {
  .pane-subject-list {
    margin-top: -90px;
    .view-subject-list {
      ul {
        li {
          .views-field-name {
            .field-content {
              height: 101px;
              a {
                padding-bottom: 6px;
                &.active {
                  height: 49px;
                }
              }
            }
          }
        }
      }
    }
  }
}

body.splash-on {
  overflow: hidden;
  #mathxplain-feedback {
    a {
      z-index: 9;
    }
  }
}
.non-admin-page {
  #masquerade-block-1 {
    .form-item {
      .description {
        display: block;
      }
    }
  }
  #syllabus-hu-entityform-edit-form {
    .form-item {
      .description {
        @extend .description-normal;
      }
    }
  }
}
body {
  &.section-sikeres-feliratkozas,
  &.page-node-15623 {
    > .panel-display {
      > .panel-panel {
        > div {
          background: url('../images/subscribebg.jpg') no-repeat center center;
          background-size: cover;
        }
      }
    }
  }
  &.section-altalanos-szerzodesi-feltetelek-es-adatvedelmi-iranyelvek,
  &.page-node-25,
  &.page-node-15,
  &.page-node-7323 {
    .node {
      .field-name-body {
        .section-title {
          padding: 80px 0;
          margin-bottom: 50px;
          h2 {
            margin: 0;
            a {
              color: inherit;
            }
          }
        }
        h3 {
          margin-top: 2.5em;
          font-weight: bold;
        }
        .ckeditor-accordion-container {
          & > dl {
            margin-top: 0;
            margin-bottom: 0;
            & > dt {
              display: inline-block;
              padding: 0;
              .ckeditor-accordion-toggle {
                display: none;
              }
              .ckeditor-accordion-toggler {
                font-size: 0.9em;
              }
            }
          }
          & + .section-title {
            margin-top: 40px;
          }
        }
        #gdpr-table {
          text-align: center;
          img {
            width: 100%;
            max-width: 1000px;
          }
        }
      }
    }
  }
  &.toggle-main-menu,
  &.toggle-elementary-menu,
  &.toggle-highschool-menu,
  &.toggle-university-menu {
    overflow: hidden;
    > .panel-display {
      &:before {
        height: 100vh;
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s, visibility 0.5s, height 0s;
        transition-delay: 0s, 0s, 0s;
      }
    }
    button[data-menu='toggle-main-menu'] {
      span {
        background: none;
        &:before,
        &:after {
          top: 0;
        }
        &:before {
          transform: rotate(45deg);
        }
        &:after {
          transform: rotate(-45deg);
        }
      }
    }
  }
  &.toggle-main-menu {
    .pane-mathsplain-header {
      .main-menu {
        visibility: visible;
        transform: translateX(0);
        transition: transform 0.5s, visibility 0s;
      }
    }
  }
  &.toggle-elementary-menu {
    .pane-mathsplain-header {
      .elementary-menu {
        visibility: visible;
        transform: translateX(0);
        transition: transform 0.5s, visibility 0s;
      }
    }
  }
  &.toggle-highschool-menu {
    .pane-mathsplain-header {
      .highschool-menu {
        visibility: visible;
        transform: translateX(0);
        transition: transform 0.5s, visibility 0s;
      }
    }
  }
  &.toggle-university-menu {
    .pane-mathsplain-header {
      .university-menu {
        visibility: visible;
        transform: translateX(0);
        transition: transform 0.5s, visibility 0s;
      }
    }
  }
  &.login-open {
    overflow: hidden;
  }
  &:not(.login-open) {
    &.nav-up {
      .pane-mathsplain-header {
        transform: translateY(-100%);
        transition: transform 0.5s;
      }
    }
    &.nav-down {
      .pane-mathsplain-header {
        transform: translateY(0);
        transition: transform 0.5s;
      }
    }
  }
  &.landscape {
    &.h5p-fullscreen {
      .node {
        &.node-video {
          &.view-mode-full {
            .field-name-field-h5p {
              .node-h5p-content {
                background-color: #000;
                .h5p-iframe-wrapper {
                  width: calc((100vh - 71px) / 0.5625);
                  padding: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  &.h5p-semi-fullscreen {
    overflow: auto;
    position: static;
  }
}

.not-logged-in {
  .node {
    &.node-video {
      &.view-mode-full {
        .no-access-wrapper {
          border-top: 1px solid #fff;
          color: #fff;
          .no-access-field-description {
            margin: 0 auto;
            padding: 80px 20px 20px 20px;
            font-size: 40px;
            line-height: 1.2em;
            min-height: 0;
          }
          .no-access-link {
            width: auto;
            height: auto;
            min-height: 0;
            display: block;
            & > div {
              min-height: 0;
            }
          }
          .testimonials {
            display: none !important; /* ideiglenesen van elrejtve */
            padding: 20px;
            max-width: 630px;
            height: 0;
            overflow: hidden;
            margin: auto;
            box-sizing: border-box;
            .view-testimonials {
              color: #fff;
              text-align: center;
              .flexslider {
                .slides {
                  li {
                    background: url('../images/quote-wh.svg') no-repeat center top;
                    background-size: 40px;
                    .views-field {
                      margin: 0;
                    }
                    .views-field-body {
                      margin: 60px 0 0 0;
                    }
                    .views-field-field-name {
                      font-family: "Roboto";
                      font-size: 0.9em;
                    }
                    .views-field-field-job {
                      display: none;
                    }
                  }
                }
              }
            }
            .flex-control-paging {
              .flex-active {
                background: #fff;
              }
            }
          }
          &.show {
            .testimonials {
              height: auto;
            }
          }
        }
      }
    }
  }
}

.page-subscribe {
  > .panel-display {
    > .panel-panel {
      > div {
        background: url('../images/user-register.jpg?v1') no-repeat right 60px;
        background-size: cover;
      }
    }
  }
  .pane-page-content {
    color: #fff;
    > .pane-content {
      background-color: rgba(0,0,0,0.6);
      width: 50%;
      margin-top: 50px !important;
      padding: 15px 30px 30px 30px;
    }
    h1 {
      text-transform: none;
      line-height: 1.2;
      font-size: 26px;
      font-weight: bold;
    }
    form {
      label {
        font-weight: normal;
        & + br {
          display: none;
        }
      }
      .form-item:not(.form-type-checkbox) {
        label {
          @extend .element-invisible;
        }
      }
      #name,
      #email {
        @extend .form-item-style;
        width: 100%;
      }
      input[type="submit"] {
        @extend .button-cyan;
      }
    }
  }
}
.section-magantanarok,
.page-node-38428 {
  > .panel-display {
    > .panel-panel {
      > div {
        background: url('../images/magantanar.jpg') no-repeat right top;
        background-size: cover;
        min-height: 100vh;
      }
    }
  }
}
.page-user-register {
  > .panel-display {
    > .panel-panel {
      > div {
        background: url('../images/user-register.jpg') no-repeat right 60px;
        background-size: cover;
      }
    }
  }
  h1 {
    margin: 0;
    color: #fff;
    & + .description {
      color: #fff;
      margin: 1em 0;
    }
  }
  .pane-page-tabs {
    display: none;
  }
  .pane-page-content {
    > .pane-content {
      background-color: rgba(0,0,0,0.6);
      width: 50%;
      margin-top: 50px;
      padding: 15px 30px 30px 30px;
    }
    form {
      .form-item-mail,
      .form-item-conf-mail {
        @extend .form-item-50;
      }
      .form-item-conf-mail {
        @extend .form-item-50-last;
      }
      .form-text {
        box-shadow: none;
      }
      .form-type-checkbox {
        margin: 10px 0;
      }
      .form-submit {
        float: none;
        margin: 0;
      }
    }
  }
}

.maintenance-page {
  text-align: center;
  #site-name {
    background: $text;
    a {
      display: inline-block;
      width: 200px;
      height: 70px;
      span {
        position: relative;
        display: inline-block;
        text-indent: -9999px;
      }
    }
  }
  &.hu {
    #site-name {
      a {
        background: url('../images/mateking-logo.svg') no-repeat center center;
        background-size: 100%;
      }
    }
  }
  &.en {
    #site-name {
      a {
        background: url('../images/mathxplain-logo.svg') no-repeat center center;
        background-size: 100%;
      }
    }
  }
}

.page-404-page,
.page-403-page {
  background: $hover;
  .pane-subject-list {
    position: absolute;
    top: 68px;
    left: 0;
    z-index: 4;
  }
  .pane-page-content {
    max-width: none;
    .panel-pane {
      padding-top: 20px;
      &.message {
        background: $topic-yellow;
        font-size: 26px;
        padding-bottom: 300px;
        h1 {
          margin: 20px 0;
          font-weight: bold;
        }
        p {
          margin: 20px 0;
        }
      }
      &.subjects {
        font-size: 26px;
        p {
          margin: 30px 0;
        }
      }
    }
  }
}
.page-403-page {
  .pane-page-content {
    .panel-pane {
      &.message {
        position: relative;
        //background: $topic-yellow url('../images/403web.jpg') no-repeat center bottom 40px;
        background-image: url('../images/403-bg.png');
        color: #ecca8a;
        padding: 0;
        height: 408px;
        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 100%;
          width: 100%;
          max-width: 1008px;
          margin: auto;
          background: url('../images/403-img.png') no-repeat right bottom;
          background-size: auto 100%;
        }
        .pane-content {
          position: relative;
          height: 100%;
          display: flex;
          h2 {
            font-size: 50px;
            font-weight: bold;
          }
          p {
            line-height: 1.2;
          }
          .tex2jax {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            height: 100%;
            padding-right: 380px;
          }
        }
      }
    }
  }
}
.page-404-page {
  .pane-page-content {
    .panel-pane {
      &.message {
        background: $topic-yellow url('../images/404web.jpg') no-repeat center bottom 40px;
        background-size: auto 230px;
      }
    }
  }
}

.page-matematika-kepletgyujtemeny,
.page-matematika-feladatgyujtemeny {
  .pane-page-content {
    .buttons {
      margin-bottom: 30px;
      a {
        margin-bottom: 10px;
      }
    }
    .master-topics.ui-accordion {
      .ui-accordion-content {
        padding: 20px 20px 30px 20px;
        .formula {
          display: list-item;
          margin-left: 20px;
        }
      }
    }
    .view-formulas-by-alphabet,
    .view-exercises-by-alphabet {
      .view-filters {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid $light-gray;
        .views-exposed-widgets {
          @include flexbox();
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-align-items: flex-end;
          align-items: flex-end;
          .form-text,
          .form-submit {
            height: 40px;
          }
          .form-submit {
            padding: 0 50px;
            margin-top: 0;
            font-size: 20px;
          }
        }
      }
      .view-content {
        .views-row {
          a {
            display: list-item;
            margin-left: 30px;
          }
        }
      }
    }
  }
}
.page-matematika-feladatgyujtemeny {
  .pane-page-content {
    .master-topics.ui-accordion {
      .ui-accordion-content {
        a {
          display: list-item;
          margin-left: 20px;
        }
        br {
          display: none;
        }
      }
    }
  }
}

.section-szerezd-meg-a-hianyzo-tudast {
  color: #fff;
  &:before {
    content: "";
    display: inline-block;
    position: fixed;
    width: 120vw;
    height: 120vh;
    left: -10vw;
    bottom: -10vh;
    background: url("../images/ANALIZIS1-CALCULUS1-1600.jpg") center top no-repeat fixed;
    background-size: cover;
  }
  .pane-page-title {
    h1 {
      margin-bottom: 0;
      text-shadow: 0 0 2px #000;
    }
  }
  .node {
    .field-name-body {
      .intro {
        font-size: 26px;
        line-height: normal;
        text-shadow: 0 0 2px #000;
      }
      .list {
        padding: 15px;
        background: rgba(255,255,255,0.5);
        & > * {
          &:first-child {
            margin-top: 0;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.section-osszes-egyetemi-tantargy {
  > .panel-display {
    > .panel-panel {
      > div {
        background: url('../images/targyak-bg.jpg?v');
        background-repeat: repeat-y;
        background-size: 100% auto;
      }
    }
  }
  .pane-page-title {
    h1 {
      color: #fff;
      margin: 50px 0;
    }
  }
}
.section-matekmento {
  color: #fff;
  > .panel-display {
    > .panel-panel {
      > div {
        background: #000 url('../images/page-matekmento.jpg');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: top center;
      }
    }
  }
  .pane-page-title {
    h1 {
      color: #fff;
      margin: 50px 0 0 0;
    }
  }
}
.page-welcome {
  .welcome {
    position: relative;
    padding-top: 20px;
    box-sizing: border-box;
    * {
      box-sizing: border-box;
    }
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 100vw;
      height: 100%;
      transform: translateX(-50vw);
      background: url('../images/welcome.jpg') no-repeat center top;
      background-size: cover;
      z-index: -1;
    }
    > div {
      display: inline-block;
      width: 75%;
      padding: 20px;
      background-color: rgba(255,255,255,0.8);
    }
    h1 {
      text-transform: none;
      margin: 0;
      font-size: 32px;
      font-weight: bold;
      line-height: 1.2;
    }
    .purchase {
      padding-top: 1px;
      > h2 {
        margin-bottom: 1.4em;
      }
      .field-name-commerce-price {
        font-family: 'Roboto';
        font-weight: bold;
        color: $light-gray;
        font-size: 16px;
      }
      .form-submit {
        padding: 10px;
        font-size: 16px;
      }
      > div:only-child {
        margin: auto;
        text-align: center;
        a {
          display: inline-block;
          width: 235px;
          height: 209px;
          padding: 115px 5px 0 5px;
          text-align: center;
        }
        .taxonomy-term {
          display: table;
          margin: auto;
          min-width: 235px;
          > div {
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            .field-name-field-product {
              -webkit-flex-grow: 1;
              flex-grow: 1;
              padding-right: 10px;
              text-align: left;
              .form-submit {
                margin-right: 0;
                width: 100%;
              }
            }
          }
        }
      }
      > div:not(:only-child) {
        @include flexbox();
        background-color: $topic-gray;
        border-bottom: 1px solid $extralight-gray;
        padding-right: 10px;
        &:first-of-type {
          border-top: 1px solid $extralight-gray;
        }
        > a {
          @include flexbox();
          -webkit-align-items: center;
          align-items: center;
          -webkit-flex-grow: 1;
          flex-grow: 1;
          padding-left: 90px;
          padding-right: 10px;
          color: $text;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 68px;
            height: 100%;
            background-color: $topic-green;
          }
        }
        .taxonomy-term {
          > div {
            @include flexbox();
            -webkit-align-items: center;
            align-items: center;
          }
        }
      }
    }
  }
}

.node-type-h5p-content {
  .node-h5p-content {
    .h5p-iframe-wrapper {
      width: 100%;
      height: 36px;
      padding-top: 56.25%;
      position: relative;
      > iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
        max-width: 100%;
        z-index: 3;
      }
    }
  }
}

.eu-cookie-compliance-popup-open {
  #sliding-popup {
    visibility: visible;
    &.sliding-popup-top {
      .eu-cookie-compliance-categories {
        &.show {
          -webkit-transform: translateY(0);
          transform: translateY(0);
        }
      }
    }
    &.sliding-popup-bottom {
      .eu-cookie-compliance-categories {
        &.show {
          -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
        }
      }
    }
  }
}
.notfirstvisit {
  #sliding-popup {
    #popup-text-and-info {
      -webkit-flex-flow: column;
      flex-flow: column;
      padding-top: 200px;
      padding-bottom: 25px;
      @extend .icon-cookie;
      background-position: center 20px;
      background-size: 200px;
      #popup-text,
      #popup-buttons {
        @include flexbox();
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        max-width: 100%;
        width: auto;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        float: none;
      }
      #popup-text {
        .first {
          display: none;
        }
        .notfirst {
          display: block;
        }
      }
    }
  }
}

.page-node-2850 {
  #feedback_simple {
    display: none;
  }
}