@import "font-mixins";

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
  font-size: 62.5%;
}
body {
  font: 300 18px/1.8 "Westeinde Caption", "Helvetica Neue", Helvetica, Arial, sans-serif;
  // font: 300 14px/1.4 "Westeinde Caption", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
}
/* clear */
.clear:before,
.clear:after {
  content: " ";
  display: table;
}

.clear:after {
  clear: both;
}
.clear {
  *zoom: 1;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  &:hover {
    color: #000;
  }
  &:focus,
  &:hover,
  &:active {
    outline: 0;
  }
}

input:focus {
  outline: 0;
  border: 1px solid #888;
}

input::selection {
  color: #888;
  background-color: #aaa;
}

button {
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  border: 0;
  &:focus {
    outline: none;
  }
}

object {
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/*                                MEDIA QUERIES                               */
/* -------------------------------------------------------------------------- */

$bigmobile: only screen and
  (
    min-width: 360px
  );

$only-mobile: only screen and
  (
    max-width: 768px
  );

$tablet: only screen and
  (
    min-width: 769px
  );

$smalldesktop: only screen and
  (
    min-width: 1024px
  );

$mobile-landscape: only screen and
  (
    min-width: 769px
  )
  and (-webkit-min-device-pixel-ratio: 2.1) and
  (
    min-aspect-ratio: 1/1
  );

$bigdesktop: only screen and
  (
    min-width: 1279px
  );

$verybigdesktop: only screen and
  (
    min-width: 1919px
  );

/* -------------------------------------------------------------------------- */
/*                              GLOBAL VARIABLES                              */
/* -------------------------------------------------------------------------- */

//Horizontal units:
$h-unit-5: 25rem;
$h-unit-4: 20rem;
$h-unit-2: 10rem; // menuwidth on desktop
$h-unit-1-5: 7.5rem;
$h-unit-1: 5rem;
$h-unit-0-5: 2.5rem;

//vertical units:
$v-unit-1: 4rem;
$v-unit-2: 8rem;
$v-unit-4: 16rem;
$v-unit-6: 24rem;

/* -------------------------------------------------------------------------- */
/*                              other mixins                              */
/* -------------------------------------------------------------------------- */

@mixin fit-content($wh) {
  #{$wh}: -moz-max-content;
  #{$wh}: max-content;
  #{$wh}: -moz-fit-content;
  #{$wh}: fit-content;
}

@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}

@mixin rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg) {
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters {
    &.char#{$i} {
      @include transform(rotate($angle-offset + $angle-per-char * $i));

      $speed: 10s;
      -webkit-animation: spin#{$i} $speed linear infinite;
      -moz-animation: spin#{$i} $speed linear infinite;
      animation: spin#{$i} $speed linear infinite;

      @-moz-keyframes spin#{$i} {
        100% {
          -moz-transform: rotate((360deg + $angle-per-char * $i));
        }
      }
      @-webkit-keyframes spin#{$i} {
        100% {
          -webkit-transform: rotate((360deg + $angle-per-char * $i));
        }
      }
      @keyframes spin#{$i} {
        100% {
          -webkit-transform: rotate((360deg + $angle-per-char * $i));
          transform: rotate((360deg + $angle-per-char * $i));
        }
      }
    }
  }
}

@mixin box-shadow($a...) {
  -moz-box-shadow: $a;
  -webkit-box-shadow: $a;
  box-shadow: $a;
}

@mixin trianglecorner($side, $size) {
  content: "";
  display: block;
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;

  @if $side==topleft {
    left: -$size;
    top: -$size;
    border-top: $size solid transparent;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid #fff;
  }

  @if $side==bottomleft {
    left: -$size;
    bottom: -$size;
    border-bottom: $size solid transparent;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid #fff;
  }

  @if $side==topright {
    right: -$size;
    top: -$size;
    border-top: $size solid transparent;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid #fff;
  }
  position: absolute;
  z-index: -1;
}

@mixin triangle-corner-bordered($radius, $offset, $bgcolor, $bordercolor, $side) {
  $minusOffset: calc((#{$offset}) * -1);
  @if $offset==0 {
    $minusOffset: 0;
  }

  &::after {
    //for border without corner
    position: absolute;
    content: "";
    display: block;
    top: 0;
    border: none;

    @if $offset==0 {
      width: calc(100% - #{$radius});
    } @else {
      width: calc(100% - #{$radius} + (#{$offset}));
    }

    border-top: $bordercolor 1px solid;
    background-color: $bgcolor;

    @if $side==left {
      left: calc(#{$radius});
      margin-left: $minusOffset;
    }
    @if $side==right {
      right: calc(#{$radius});
      margin-right: $minusOffset;
    }
  }
  &::before {
    //filleted corner
    display: block;
    content: "";
    position: absolute;
    width: calc(#{$radius});
    height: calc(#{$radius});
    top: 0;
    background-color: $bgcolor;
    z-index: 9;

    @if $side==left {
      left: $minusOffset;
      border-left: $bordercolor solid 1px;
      @include transform(skewX(-45deg));
      transform-origin: left bottom;
      border-top: $bordercolor solid 1px;
    }
    @if $side==right {
      right: $minusOffset;
      border-right: $bordercolor solid 1px;
      @include transform(skewX(45deg));
      transform-origin: right bottom;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                             COOKIE NOTIFICATION                            */
/* -------------------------------------------------------------------------- */

.cookie-notice-container {
  @include home-metadata();
  display: flex;
  flex-direction: column;
  align-content: center;
  padding: 2rem;
  
  @media #{$tablet} {
    flex-direction: row;
    max-width: 1024px;
    margin: 0 auto;
  }
  @media #{$verybigdesktop} {
    max-width: 1920px;
  }


  span{
    text-align: left;
    @media #{$tablet} {
      flex: 1 1 auto;
      align-self: center;
    }
  }
  #cn-accept-cookie {
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
    order: 99;
    @include home-title-small();
    color: #ff0;
    padding: 1rem 2rem;

    // @include fit-content(width);
    @include fit-content(height);
    margin-top: 1.5rem;
    align-self: center;
    @media #{$tablet} {
      margin: 0;
      color: #ff0;
      flex: 0 0 auto;
    }

  }
  #cn-more-info {
    @include home-title-small;
    margin-top: 1rem;
    -webkit-text-stroke: #000 1px;
    color: transparent;
    @media #{$tablet} {
      flex: 0 0 auto;
      margin: 0 2rem;
      line-height: 1;
      align-self: center;
    }
    @media #{$smalldesktop} {
      color: transparent;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                  STRUCTURE                                 */
/* -------------------------------------------------------------------------- */

/* wrapper */
.wrapper {
  margin: 0 auto;
  position: relative;
  width: 100vw;
  height: 100vh;

  /* -------------------------------------------------------------------------- */
  /*                                   header                                   */
  /* -------------------------------------------------------------------------- */

  .header {
    position: fixed;
    top: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 3000;
    @media #{$tablet} {
      height: 0;
      position: relative;
      width: 0;
      &::before {
        display: none;
      }
    }

    .header-1,
    .header-2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: 0;
      @media #{$tablet} {
        width: $h-unit-1-5;
        position: fixed;
        top: 0;
        height: 100vh;
        flex-direction: column;
        flex: 0 0 auto !important;
        //filter: invert(100);
        padding: 2rem !important;
        justify-content: space-between !important;
        align-content: space-between;
        z-index: 3100;
        background: #fff;
        .logo,
        .social-link,
        .menubutton,
        .events-link {
          filter: invert(100);
        }
      }
      @media #{$smalldesktop} {
        width: $h-unit-2;
      }
      div {
        z-index: 3500;
      }
      a {
        display: inline-block;
      }
    }

    .header-1 {
      justify-content: space-between;
      flex: 1 1 auto;
      padding: 2rem 0 2rem 2rem;
      @media #{$tablet} {
        border-right: #000 1px solid;
      }
    }

    .header-2 {
      justify-content: flex-end;
      flex: 0 1 auto;
      padding: 2rem 2rem 2rem 0;
      @media #{$tablet} {
        order: 99;
        border-left: #000 1px solid;
        right: 0;
      }
    }

    .totop {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      z-index: 2;
      @media #{$tablet} {
        display: none;
      }
      a {
        display: inline-block;
        object {
          height: 2rem;
          // color: #000;
          // fill: currentColor;
          filter: invert(100%); //black
          @include transform(rotate(180deg));
        }
      }
    }

    //icons in menu:
    object {
      height: 3rem;
      @media #{$tablet} {
        height: 2.5rem;
      }
      @media #{$smalldesktop} {
        height: 3rem;
      }
    }

    /* -------------------------------------------------------------------------- */
    /*                              header elements                             */
    /* -------------------------------------------------------------------------- */

    @media #{$tablet} {
      .header-1 > div,
      .header-2 > div {
        flex: 0 0 $h-unit-1 !important;
      }
    }

    // dis logo size:
    .logo {
      object {
        height: $h-unit-1;
        @media #{$tablet} {
          height: 4rem;
        }
        @media #{$smalldesktop} {
          height: $h-unit-1;
        }
      }
    }

    .menubutton {
      $speed: 0.5s;
      $degree: 225deg;
      $easing: linear;

      order: 99;
      z-index: 3001;

      button {
        transform-origin: center;
        @include transition($speed $easing);
        &.rotated {
          @include transform(rotate($degree));
          @media #{$tablet} {
            filter: invert(100);
          }
        }
      }

      @media #{$tablet} {
        order: unset;
      }
    }

    .social-link,
    .events-link {
      margin: 0 2rem 0 0;
      &.hidden {
        display: none !important;
      }
      @media #{$tablet} {
        margin: 0;
      }
    }

    /* ========================================================================== */
    /*                                   SEARCH                                   */
    /* ========================================================================== */

    /* ------------------------------ search mobile ----------------------------- */

    .search-box {
      display: none;
    }

    .search-bar {
      form.search {
        display: flex;
        flex-direction: row;
        border-bottom: #fff 1px solid;
        background-color: #000;

        input {
          @include searchtext();
          background-color: #000;
          padding: 0;
          border: none;
          caret-color: #fff;
          flex: 1 1 auto;
          width: 1rem;
        }
        button {
          flex: 0 0 auto;
          @media #{$only-mobile} {
            filter: invert(100);
          }
        }
      }
    } //search-bar end

    /* ----------------------------- search desktop ----------------------------- */

    @media #{$tablet} {
      .search-box {
        display: block;
        flex: 1 1 0 !important;
      }

      .search-bar {
        display: none;
        position: fixed;
        width: 0;
        left: $h-unit-1-5;
        @media #{$smalldesktop} {
          left: $h-unit-2;
        }
        bottom: 0;
        height: $h-unit-2;
        form.search {
          border-bottom: none;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: stretch;
          input {
            padding: 0 $h-unit-1;
          }
          button {
            display: none;
          }
        }
      }
    }

    /* -------------------- header scroll: scroll with click -------------------- */

    .header-scroll {
      display: none;
    }

    /* ========================================================================== */
    /*                                    MENUS                                    */
    /* ========================================================================== */

    #sidebar {
      padding-top: 9rem !important;
      background-color: #000;

      @media #{$tablet} {
        padding: 0 !important;
      }
      .sidebar-wrapper {
        position: relative;
        height: 100%;
        overflow: auto;
        padding: 0 $v-unit-1;
        padding-bottom: $v-unit-1;
        @media #{$tablet} {
          padding: $v-unit-1;
          display: flex;
          flex-direction: row;
          align-items: center;
        }
        .menuseparator {
          display: none;
          @media #{$tablet} {
            display: block;
            width: 1px;
            height: 70%;
            background-color: #fff;
            flex: 0 0 auto;
            margin: $v-unit-1;
          }
        }
        ul {
          margin-block-start: 0;
          margin-block-end: 0;
          margin-inline-start: 0;
          margin-inline-end: 0px;
          padding-inline-start: 0;
          @media #{$tablet} {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            height: 100%;
            justify-content: space-evenly;
          }

          li {
            display: block;
            padding: 2rem;
            flex-shrink: 1;
            @media #{$tablet} {
              padding: 0;
            }
            // @media #{$smalldesktop} {
            //   padding: 2rem 0;
            // }
            a {
              @include menutext();
            }
          }
        }
      }
    }

    /* ------------------------------- bedo circle ------------------------------ */

    #tag-nav {
      display: none;

      position: fixed;
      right: calc(#{$h-unit-4} + 4px);
      top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
      @media #{$tablet} {
        top: 1rem;
      }
      @media #{$bigdesktop} {
        top: 0.5rem;
      }
      z-index: 1000;
      @media #{$tablet} {
        display: block;
      }
      ul {
        padding: 0;
        margin: 0;
        @include bedocircle();
        li {
          display: inline;
          a {
            span {
              height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
              // line-height: calc(#{$v-unit-1}/ 2);
              width: 1rem;
              @media #{$tablet} {
                height: 3rem;
                // line-height: 5rem;
              }
              @media #{$bigdesktop} {
                height: 3.5rem;
              }
              margin: auto;
              display: block;
              text-align: center;

              position: absolute;
              // left: 50%;
              // top: 0;
              // transform-origin: bottom center;
              transform-origin: 50% 100%;
              @include bedocircle(); //this is the font
              @include rotated-text(17, 360deg, 0deg);

              &.pause {
                animation-play-state: paused;
              }
            }
          }
        }
      }
    }
  } //header end

  /* -------------------------------------------------------------------------- */
  /*                             STRUCTURE ALL PAGE                             */
  /* -------------------------------------------------------------------------- */
  main {
    z-index: 1;
    section {
      article {
        position: relative;
        .metadata {
          position: absolute;
          background-color: #fff;
          padding: 2rem;
          // bottom: 49%;
          right: 0;
          min-width: 50vw;
          text-align: center;
          @include home-metadata();
          z-index: 1;
          &::after {
            @media #{$only-mobile} {
              @include trianglecorner(topleft, $h-unit-1);
            }
          }
        }
      } //article end

      /* -------------------------------- load more ------------------------------- */
      .misha_loadmore {
        text-align: center;
        padding: 2rem 0;
        @media #{$tablet} {
          min-width: $h-unit-2;
          width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4});
          margin-right: $h-unit-2;
          align-self: stretch;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 100%;
        }
        a,
        p {
          @include home-more();
          @media #{$tablet} {
            transform-origin: center;
            white-space: nowrap;
            width: 100vh;
            @include transform(rotate(-90deg));
            text-align: center;
          }
        }
      }
    }
  }
} //wrapper end

//no header scroll on touch devices(because it's invisible)
.touchevents {
  .header-scroll {
    display: none !important;
  }

  // no overflow on touch devices, where no horizontal scrollbar visible
  .archive,
  .home,
  .search-results {
    @media #{$tablet} {
      overflow-y: hidden;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                            ARCHIVE AND HOMEPAGE                            */
/* -------------------------------------------------------------------------- */

.archive,
.home,
.search-results,
.search-no-results,
.error404 {
  @media #{$tablet} {
    // overflow-y: hidden;
  }

  .wrapper {
    @media #{$tablet} {
      overflow-y: hidden;
      @include fit-content(width);
      min-width: 100vw;
    }

    /* ----------------------------- header on home ----------------------------- */

    .header {
      .header-scroll {
        @media #{$tablet} {
          display: block;
          position: fixed;
          height: 100vh;
          width: $h-unit-2;
          flex: 1 0 auto !important;
          top: 0;
        }
        &.header-scroll-left {
          left: $h-unit-1-5;
          @media #{$smalldesktop} {
            left: $h-unit-2;
          }
          button {
            cursor: url("../img/arrow-black-left.png"), w-resize;
          }
        }
        &.header-scroll-right {
          right: $h-unit-1-5;
          @media #{$smalldesktop} {
            right: $h-unit-2;
          }
          button {
            cursor: url("../img/arrow-black-right.png"), e-resize;
          }
        }
        button {
          height: 100vh;
          width: $h-unit-2;
        }
      }
    }
  }

  //header not on home
  &.archive,
  &.search-results,
  &.search-no-results,
  &.error404 {
    .wrapper .header {
      background-color: #000;
    }
  }

  main {
    @media #{$tablet} {
      height: 100vh;
      @include fit-content(width);
      position: relative;
    }
    section {
      @media #{$tablet} {
        //horizontal scrolling on desktop:
        display: flex;
        flex-direction: row;
        margin: 0;
        height: 100vh;
        @include fit-content(width);
      }

      /* ------------------------- archivetitle on mobile ------------------------- */
      .archivetitle {
        padding: 8rem 2rem 0;
      }

      /* --------------------------- home article mobile/default -------------------------- */

      article {
        // height: 100vh;

        & > a {
          margin: 0;
          padding: 0;
          border: none;
          display: inline-block;
        }

        .thumbnailwrapper {
          img {
            // post thumbnail on home
            // height: 50vh;
            height: 50vw;
            width: 100vw;
            object-fit: cover;
          }
        }

        h2 {
          width: 100%;

          height: 37.5vw;
          padding: 2rem;
          padding-top: 1.5rem;
          margin: 0;
          line-height: 0.8;
          // display: flex;
          // flex-direction: row;
          // align-items: center;

          a {
            @include home-title-small();
          }
        }

        .metadata {
          bottom: 37.5vw;
          height: $h-unit-1;
          display: flex;
          @include fit-content(width);
          justify-content: space-around;
          flex-wrap: nowrap;
          align-items: center;
          padding: 0;

          .vr {
            height: 100%;
            width: 1px;
            background-color: #000;
            flex-grow: 0 !important;
            flex-shrink: 0 !important;
            flex-basis: auto !important;
            box-shadow: 0 0 1px transparent;
          }

          .bevezetoWrapper,
          .alcimWrapper,
          .curvyArrow {
            display: none;
          }
        }

        /* ----------------------- home article mobile cutout ----------------------- */

        &.cut-even {
          .metadata {
            background-color: transparent;
            &::after {
              display: none;
            }
          }
        }

        /* ----------------------- home article mobile first 2 ----------------------- */
        &.post_nr_1,
        &.post_nr_2 {
          height: 100vh;
          .thumbnailwrapper {
            img {
              height: 50vh;
            }
          }
          h2 {
            height: 50vh;

            padding-top: 3rem;
            a {
              @include home-title();
              @media #{$bigmobile} {
                line-height: 1.5;
              }
            }
          }
          .metadata {
            bottom: 50%;
          }
        }
      } //article end

      /* ------------------------ home article desktop big ------------------------ */
      /* ------------------------------------ - ----------------------------------- */

      @media #{$tablet} {
        //big: first 2 articles
        .home_wrapper-big {
          flex: 0 0 auto;
          border-right: #000 1px solid;
          article {
            position: relative;
            width: calc(100vw - (#{$h-unit-1-5} * 3));
            height: calc(100vh - #{$v-unit-1});
            margin: 0;
            padding: 0;
            margin-left: $h-unit-1-5;
            @media #{$smalldesktop} {
              width: calc(100vw - (#{$h-unit-2} * 3));
              margin-left: $h-unit-2;
            }
            margin-top: $v-unit-1;

            border-top: 1px #000 solid;

            /* ------------- home article desktop big - thumbnail and title ------------- */

            .thumbnailwrapper {
              width: 60%;
              height: calc(100% - #{$v-unit-1});
              display: flex;
              flex-direction: row;
              justify-content: flex-start;

              img.attachment-home-big-thumbnail {
                object-fit: cover;
                width: 100%;
                height: 100%;
              }
            }

            h2 {
              height: unset;
              position: absolute;
              top: 0;

              padding: 2rem;
              padding-left: $v-unit-1;

              width: calc(100vw - #{$h-unit-1-5 * 2.5});
              @media #{$smalldesktop} {
                width: calc(100vw - #{$h-unit-5});
                padding-top: 4rem;
              }

              a {
                padding-top: 2rem;
              }
            }

            /* -------------------------- home article metadata big------------------------- */
            .metadata {
              bottom: 0;
              background: transparent;
              width: 100%;
              height: #{$h-unit-1-5};
              @media #{$smalldesktop} {
                height: #{$h-unit-2};
              }

              display: flex;
              flex-direction: row;
              padding: 0;
              justify-content: flex-start;
              align-items: center;
              overflow: visible !important;

              @include home-metadata-big();

              @media #{$mobile-landscape} {
                height: calc(#{$h-unit-2} / 2);
              }

              & > div {
                flex: 1 1 auto;
              }

              .categories {
                display: block;
                padding: 0;
              }

              .postedon {
                padding: 0;
              }

              .bevezetoWrapper,
              .alcimWrapper {
                display: none;
              }

              .transparent,
              .transparent a,
              .transparent div {
                color: transparent !important;
                //color: #000 !important;
              }

              .filler {
                flex: 0 0 auto;
                width: 60%;
                height: 1px;
                align-self: flex-start;
              }

              .curvyArrow {
                position: absolute;
                display: block;
                right: 0;
                top: 0;
                height: ($h-unit-2);
                width: ($h-unit-2)/2;
                object {
                  height: ($h-unit-2);
                  position: absolute;
                  right: 0;
                  top: calc(-50% + 0.5px);
                }
                @media #{$smalldesktop} {
                  height: ($h-unit-1 + $h-unit-2);
                  width: ($h-unit-1 + $h-unit-2)/2;
                  object {
                    height: ($h-unit-1 + $h-unit-2);
                  }
                }
              }
            } //metadata end

            /* --------------------- home article desktop big hover --------------------- */
            // &.hovered {
            .bevezeto,
            .alcim {
              color: #000 !important;
              // flex: 0 0 auto;
            }

            .alcimWrapper {
              align-self: flex-start;
              padding: $v-unit-1 / 2 0 $h-unit-1;
              min-width: $v-unit-2;
              margin: 0 auto;

              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-content: space-around;
              position: relative;
              .alcim {
                writing-mode: vertical-rl;
                @include transform(rotate(180deg));

                flex: 0 0 auto;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                align-items: flex-end;

                .alcimInner {
                  text-align: left;
                }
              }
            }

            .bevezetoWrapper {
              line-height: 1;
              padding: $v-unit-1 / 2;
              align-self: flex-start;

              .bevezeto {
                margin: 0;
                overflow: hidden;

                @include home-metadata-bevezeto();

                .bevezetoInner {
                  @include home-metadata-bevezeto();
                  text-align: left;
                }
              }
            }

            &.hovered h2 > a {
              color: #000;
            }
            // }
          }

          /* ------------------------ home article desktop 1 + 2 ----------------------- */

          &.home_wrapper-1 {
            article {
              .metadata {
                @include triangle-corner-bordered(#{$v-unit-1}, 1px, transparent, #000, left);
                .filler {
                  position: relative;
                }
              }
              a.thumbnailwrapper {
                float: right;
              }
            }
          }
          &.home_wrapper-2 {
            article {
              // border-left: #000 1px solid;

              .metadata {
                justify-content: flex-end;
                @include triangle-corner-bordered(#{$v-unit-1}, 1px, transparent, #000, right);
                .filler {
                  order: -1;
                }
              }
              .thumbnailwrapper {
                width: calc(60% + #{$h-unit-1});
                img {
                  left: -$h-unit-1;
                  position: relative;
                }
              }
            }
          }
        }
      } //smalldesktop end

      /* ----------------------- home articles desktop small ----------------------- */

      @media #{$tablet} {
        .home_wrapper-small,
        #post-404 {
          height: calc(100vh - #{$v-unit-2});
          width: calc((100vh - #{$v-unit-2}) / 2 * 3);
          max-width: calc(100vw - (#{$h-unit-1-5} * 3));
          max-height: calc((100vw - (#{$h-unit-1-5} * 3)) / 3 * 2);
          @media #{$smalldesktop} {
            max-width: calc(100vw - (#{$h-unit-2} * 3));
            max-height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
          }
          flex-shrink: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin: auto 0;
          &.home_wrapper-s1:not(.home_wrapper-1) {
            margin-left: $h-unit-1-5 / 2;
            @media #{$smalldesktop} {
              margin-left: $h-unit-1;
            }
          }
          &.home_wrapper-s1.home_wrapper-small.home_wrapper-1,
          &#post-404 {
            margin-left: $h-unit-1-5;
            @media #{$smalldesktop} {
              margin-left: $h-unit-2;
            }
          }
          &:last-child {
            margin-right: $h-unit-1-5;
            @media #{$smalldesktop} {
              margin-right: $h-unit-2;
            }
          }

          article,
          .archivetitle,
          .archivedescription {
            flex: 0 0 calc(100% / 3);
            height: 50%;
            position: relative;
            .thumbnailwrapper {
              width: 100%;
              height: 100%;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .metadata {
              width: 100%;
              min-width: unset;
              height: $h-unit-0-5;
              @media #{$smalldesktop} {
                height: $h-unit-1;
              }

              position: absolute;
              bottom: 0;
              right: 0;

              background: transparent;

              display: flex;
              flex-direction: row;
              padding: 0;
              justify-content: space-between;
              align-items: stretch;
              display: none;

              @include triangle-corner-bordered(#{$h-unit-0-5}, 0, transparent, #000, left);

              @media #{$smalldesktop} {
                @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
              }

              @media #{$verybigdesktop} {
                height: $h-unit-2;
                @include triangle-corner-bordered(#{$h-unit-2}, 0, transparent, #000, left);
              }

              &.vis {
                display: flex;
              }

              .categories,
              .postedon {
                @include home-metadata();
                display: flex;
                flex-direction: row;
                align-content: center;
                margin-top: auto;
                margin-bottom: auto;
                flex-wrap: nowrap;
                justify-content: center;
              }
              .categories {
                margin-left: $h-unit-0-5;
                @media #{$smalldesktop} {
                  margin-left: $h-unit-1;
                }
                @media #{$verybigdesktop} {
                  margin-left: $h-unit-2;
                }

                padding-right: $v-unit-1 / 8;

                @media #{$smalldesktop} {
                  padding-right: $v-unit-1 / 4;
                }

                flex: 1 0 auto;
              }
              .postedon {
                padding: 0 $v-unit-1 / 8;
                @media #{$smalldesktop} {
                  padding: 0 $v-unit-1 / 4;
                }
                flex: 1 0 auto;
              }
            }

            h2,
            h2 a {
              @include home-title-small();
            }

            h2 {
              display: none;
              position: absolute;
              top: 0;
              background-color: #fff;
              height: 100%;
              padding: 0;

              a {
                margin-top: $h-unit-0-5 / 2;
                margin-right: $v-unit-1 / 4;
                margin-bottom: $h-unit-0-5 + $v-unit-1 / 8;
                margin-left: $h-unit-0-5;

                @media #{$smalldesktop} {
                  margin-top: $h-unit-0-5;
                  margin-right: $v-unit-1 / 2;
                  margin-bottom: $h-unit-1 + $v-unit-1 / 2;
                  margin-left: $h-unit-1;
                }

                @media #{$bigdesktop} {
                  margin-right: $v-unit-1 / 4;
                  margin-bottom: $h-unit-1 + $v-unit-1 / 4;
                }

                @media #{$verybigdesktop} {
                  margin-left: $h-unit-2;
                  margin-bottom: $h-unit-2 + $v-unit-1 / 2;
                }

                bottom: 0;
                @include fit-content(height);
                position: absolute;
              }
            }
          }
          article {
            cursor: pointer;
          }

          .archivetitle {
            margin: 0;
            width: calc(100% / 3);
            position: relative;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 1rem 2rem;
            text-align: center;
            border-right: #000 1px solid;
            @include triangle-corner-bordered($h-unit-1, 0, transparent, #000, left);
            h1 {
              @include home-title();
              margin: 0;
              display: block;
              width: 100%;
              text-align: left;
              // width: calc(100% / 3);
            }
            &.tag {
              order: 1;
              h1 {
                text-transform: uppercase;
              }
            }
            & > object {
              position: absolute;
              top: 2rem;
              right: 2rem;
              width: $h-unit-1;
              height: $h-unit-1;
            }
          }
          .archivedescription {
            order: 4;
            border-top: #000 1px solid;
            border-right: #000 1px solid;
            border-bottom: #000 1px solid;
            margin: 0;
            width: 100%;
            position: relative;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 2rem;
            p {
              margin: 0;
              @include archive-tag-description();
            }
          }
        }
      }
    } //section end
  } //main end

  /* -------------------------- no results on mobile -------------------------- */

  &.no-result,
  &.error404,
  &.search-no-results {
    .wrapper {
      height: unset;
      section .archivetitle {
        padding: 8rem 2rem 0;
      }

      #post-404 {
        text-align: center;
        line-height: 1.4;
      }
      #content article.no-result {
        height: unset;
      }
    }

    /* -------------------------- no results on desktop ------------------------- */
    @media #{$tablet} {
      main {
        width: 100vw;
        section {
          width: 100%;
          .home_wrapper-1,
          article#post-404 {
            position: relative;
            width: calc(100% - #{$h-unit-1-5 * 2});
            @media #{$smalldesktop} {
              width: calc(100% - #{$h-unit-2 * 2});
            }
            max-width: unset;
            .archivetitle {
              border-bottom: 1px #000 solid;
              border-right: none;
              padding: 1rem 2rem !important;
              margin-left: 0;
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0;
              // top: 0;

              background-color: transparent;

              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              h1 {
                display: inline-block;
                position: relative;
                width: unset;
              }
              h2 {
                @include home-title();
                display: inline-block;
                height: unset;
                top: unset;
                position: relative;
                margin: 0;
                // bottom: 0;
              }

              .toHome {
                display: none;
              }
            }
          }
        }
      }
    }
  }
} //home, archive, search, 404 end

/* -------------------------------------------------------------------------- */
/*                               Search results                               */
/* -------------------------------------------------------------------------- */

.search-results {
  #content {
    .archivetitle {
      word-wrap: break-word;
      h1 {
        @include home-title-small();
      }
    }
  }
}

.search-no-results {
  .wrapper {
    height: unset;

    main {
      section {
        .archivetitle {
          padding: 8rem 2rem 0;
          h1 {
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 100%;
          }
        }
        .no-result {
          padding: 2rem;
        }
      }
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                   Events                                   */
/* -------------------------------------------------------------------------- */

body.category.category-esemeny {
  header {
    background-color: #000;
  }
  main {
    padding-top: 5rem + (2rem * 2);
    article {
      height: 85vw;
      max-height: calc(50vw + 180px);
      .thumbnailwrapper {
        height: 50vw;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .event-metadata {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-content: stretch;
        padding: 2rem;
        height: 35vw;
        max-height: 180px;

        .top-row,
        .bottom-row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 50%;
          flex: 0 0 auto;
        }

        .top-row {
          align-items: center;
          .ev-date {
            @include event-date();
          }
          a {
            @include transform(rotate(225deg));
            @include event-arrow();
          }
        }

        .bottom-row {
          align-items: flex-end;

          h2 {
            flex: 1 0.9 auto;
            height: unset;
            padding: 0;
            @include event-title;
          }
          .vr {
            flex: 0 0 auto;
            width: 1px;
            height: 100%;
            background-color: #000;
            box-shadow: 0 0 1px transparent;
          }
          a.text-link {
            flex: 1 1 auto;
            @include event-link;
            text-align: right;
          }
        }

        .hr {
          flex: 0 0 auto;
          height: 1px;
          width: 100%;
          background-color: #000;
        }
      }
    }
  }

  /* ---------------------------- Events on desktop --------------------------- */
  @media #{$tablet} {
    main {
      padding-top: 0;
      section {
        height: 100%;
        // padding-top:

        padding-left: $h-unit-2;
        display: flex;
        flex-direction: row;
        article {
          width: calc(50vw - #{$h-unit-2});
          height: calc(50vw - #{$h-unit-2});
          max-width: calc(100vh - #{$h-unit-1});
          max-height: calc(100vh - #{$h-unit-1});

          min-width: 80vh;
          min-height: 80vh;
          // margin: auto;
          margin: auto $h-unit-2 auto 0;

          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .thumbnailwrapper {
            height: unset;
            flex: 0 0 auto;
          }
          .event-metadata {
            height: unset;
            max-height: $h-unit-5;
            @media #{$verybigdesktop} {
              max-height: $h-unit-5 + $h-unit-2;
            }
            flex: 1 1 auto;
            padding: 0;
            // .top-row{
            //   .ev-date{
            //     padding-left: 2rem;
            //   }

            //     padding-right: 2rem;

            // }
            .bottom-row {
              h2 {
                // padding-left: 2rem;
                padding-bottom: 2rem;
              }
              .vr {
                margin: 0 2rem;
              }
              .text-link {
                // padding-right: 2rem;
                padding-bottom: 2rem;
              }
            }
          }
        }
      }
    }
  }
} //body.category.category-esemeny end

/* -------------------------------------------------------------------------- */
/*                                   single                                   */
/* -------------------------------------------------------------------------- */

@mixin singleDesktopLayout() {
  padding-right: $h-unit-4;
  padding-left: 0;
  max-width: calc(1024px + #{$h-unit-4});
}

$padd: 2rem;

.single,
.page {
  //no menus on single
  @media #{$tablet} {
    .wrapper {
      height: unset;
      width: 100%;
      .header {
        .header-1,
        .header-2 {
          background: transparent;
          border: none;
          .social-link,
          .search-box,
          .events-link {
            display: none;
          }
        }
      }
    }
  }

  /* ---------------------------- single on mobile ---------------------------- */
  article {
    padding-bottom: $h-unit-1;

    .thumbnailwrapper {
      padding: 0;

      img.attachment-post-thumbnail {
        // post thumbnail on home
        height: 75vh;
        width: 100vw;
        object-fit: cover;
        padding: 0;
      }
    }

    .titlewrapper {
      position: relative;
      top: 0;
      width: 100%;
      // height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-content: flex-start;
      padding: 0;
      padding-top: $h-unit-2;

      .metadata {
        width: calc(100vw - #{$h-unit-1});
        bottom: unset !important;
        height: $h-unit-1;
        position: relative;
        align-self: flex-end;
        display: flex;
        flex-direction: column;
        justify-content: center;

        @include single-metadata();

        .metaWrapper {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .time-cat {
            z-index: 10;
          }
        }
      }
      h1.single-title {
        margin: 0;
        @include single-title();
        padding: $padd;
        background-color: #fff;
      }
    }

    //override if thumbnail
    &.has-post-thumbnail {
      @media #{$only-mobile} {
        .titlewrapper {
          position: absolute;
          height: 100vh;
          justify-content: flex-end;
          padding: 0;
          h1.single-title {
            min-height: 25vh;
          }
        }
      }
    }

    /* ---------------------------- single header on desktop --------------------------- */

    @media #{$tablet} {
      min-height: calc(100vh - #{$h-unit-2});
      margin-top: 100vh;
      margin-left: $h-unit-1;
      background-color: #fff;
      border-left: #000 solid 1px;
      padding-left: $h-unit-1;

      //   & > * {
      //     padding: $padd $h-unit-1;
      //   }

      .thumbnailwrapper {
        position: fixed;
        top: 0;
        left: 0;
        // left: calc(-#{$h-unit-1});
        z-index: -1;
        bottom: 0;
        width: 100%;

        img.attachment-post-thumbnail {
          // post thumbnail on home

          object-fit: cover;
          padding: 0;

          width: 100%;
          height: 100%;
        }
      }

      /* ---------------------- title and metadata on desktop --------------------- */

      .titlewrapper {
        position: relative;
        justify-content: flex-start;
        height: unset;
        padding-top: 0;

        .metadata {
          top: -#{$h-unit-1};
          width: 100%;
          padding-left: 0;
          padding-right: 0;

          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);

          .metaWrapper {
            @include singleDesktopLayout();
          }

          // .time-cat {
          // }
        }
        h1.single-title {
          background-color: transparent;
          min-height: unset;
          top: -#{$h-unit-1};
          position: relative;
          @include singleDesktopLayout();
        }
      }
    }

    /* ---------------------------- single content hr --------------------------- */

    hr {
      height: 1px;
      background-color: #ff5f5f;
      padding: 0;
      margin: 0 auto;
      border: none;
      width: 20%;
      &.content-wrap {
        width: 40%;
      }
      &.content-begin {
        margin-top: $padd;
        @media #{$tablet} {
          margin-top: 0 !important;
        }
      }
      &.content-end {
        margin-top: $padd * 2;
        margin-bottom: 0;
        @media #{$tablet} {
          margin-top: $padd;
          margin-bottom: $padd;
        }
      }
    }

    //override if thumbnail
    &.has-post-thumbnail {
      hr.content-begin {
        margin-top: calc(25vh + #{$padd});
      }
    }

    /* ----------------------------- single content ----------------------------- */

    .single-content {
      position: relative;
      padding: $padd;
      @media #{$tablet} {
        top: -#{$h-unit-1};
        @include singleDesktopLayout();
      }

      h2 {
        @include single-h2();
      }

      h3 {
        @include single-quote();
        margin: 2rem 0;
        display: inline-block;
        background: #ff5f5f;
        @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
      }

      h4 {
        @include single-h4();
      }

      a:hover {
        text-decoration: underline;
      }

      strong {
        font-weight: 900;
      }

      blockquote {
        @include single-quote();
        margin: 3rem 0;
        p {
          background: #ff5f5f;
          display: inline;
          padding: 3px 0;

          @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
        }
        cite {
          display: block;
          position: relative;
          font-size: 80%;
          top: 0.5rem;
          left: 2rem;
        }
      }

      .wp-block-pullquote {
        text-align: unset;
      }

      /* ---------------------------- images on single ---------------------------- */

      .wp-block-image {
        margin: $padd 0;
        position: relative !important;

        @media #{$tablet} {
          padding: 0;
        }

        &:not(.wp-block-image-aligned) {
          @include fit-content(width);
        }

        figcaption {
          bottom: 0 !important;

          &::after {
            @include trianglecorner(topright, #{$h-unit-1});
          }
        }
      }

      .wp-block-gallery {
        padding: 0;
        margin: $padd 0;
        li {
          margin-right: 0;
          @media #{$tablet} {
            margin-bottom: $v-unit-1;
          }
          &:nth-child(odd) figcaption {
            @media #{$tablet} {
              padding-right: 0;
            }

            &::after {
              @include trianglecorner(topright, #{$h-unit-1});
            }
          }
          &:nth-child(even) figcaption {
            @media #{$tablet} {
              padding-left: 0;
            }
            right: 0;
            top: 0;
            &::after {
              @include trianglecorner(bottomleft, #{$h-unit-1});
            }
          }
        }
      }

      //figcaptions:
      .wp-block-image figcaption,
      .wp-block-gallery .blocks-gallery-image figcaption,
      .wp-block-gallery .blocks-gallery-item figcaption {
        background: #fff;
        position: absolute;
        width: calc(100% - #{$h-unit-1});
        height: $h-unit-1;
        padding: 1rem $padd;

        @media #{$tablet} {
          width: calc(100% - #{$h-unit-0-5});
          height: $h-unit-0-5;
          padding: 0.5rem ($padd / 2);
        }
        @media #{$smalldesktop} {
          width: calc(100% - #{$h-unit-1});
          height: $h-unit-1;
          padding: 1rem $padd;
        }

        margin: auto 0;
        bottom: unset;
        @include captiontext();
        line-height: 1;
        text-align: left;
        overflow: unset;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 1;
        align-content: stretch;

        span {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        @media #{$tablet} {
          display: none;
          &.vis {
            display: flex;
          }
        }
      }

      //aligned:
      .wp-block-gallery,
      .wp-block-image {
        .alignedWrapper {
          position: relative;

          @media #{$tablet} {
            max-width: 50%;

            @include fit-content(width);
            &.alignleftWrapper {
              padding-right: $padd;
              float: left;
            }
            &.alignrightWrapper {
              padding-left: $padd;
              float: right;
            }
          }
          .alignleft,
          .alignright {
            margin: 0;
            position: relative;
            float: unset;

            @media #{$tablet} {
              width: auto;
            }
            img {
              height: auto;
            }
          }
        }
      }

      .authors {
        @include single-author();
        color: #000;
        -webkit-text-stroke: 0px;
        a {
          @include single-author();
        }
      }
    } //.single-content end
  } //article end
  /* -------------------------------- lightbox -------------------------------- */

  #cboxOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 10;
  }
  #colorbox {
    z-index: 12;
    @media #{$tablet} {
      z-index: 3150;
    }
    &:focus {
      border: none;
      outline: none;
    }
    #cboxContent {
      #cboxTitle {
        padding: 1rem;
        @include captiontext();
        color: #fff;
        width: 100%;
        text-align: center;
      }
      #cboxCurrent {
        display: none !important;
      }
      button {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;

        &#cboxPrevious,
        &#cboxNext {
          background-image: url(../img/solid_arrow_right.svg);
          width: 2rem;
          height: 4rem;
          bottom: -5rem;
          filter: invert(100);
          z-index: 14;
          @media #{$tablet} {
            position: fixed;
            top: 50%;
            z-index: 3200;
          }
        }
        &#cboxPrevious {
          left: 1rem;
          @include transform(scaleX(-1));
          @media #{$tablet} {
            left: $v-unit-1;
          }
        }
        &#cboxNext {
          right: 1rem;
          @media #{$tablet} {
            right: $v-unit-1;
          }
        }
        &#cboxClose {
          background-image: url(../img/dis-plus.svg);
          width: 2rem;
          height: 2rem;
          @include transform(rotate(45deg));
          top: -3rem;
          right: 1rem;
          @media #{$tablet} {
            position: fixed;
            right: $v-unit-1;
            top: $v-unit-1;
          }
        }
      }
    }
  } //#colorbox end
} //body.single, page end
/* ------------------------------ related posts ----------------------------- */

.toHome,
#related_posts > h3 {
  padding-bottom: $padd * 2;
  margin: 0 auto;
  // display: inline-block;
  text-align: center;
  @include single-metadata();
  a {
    @include single-metadata();
    &:hover {
      color: #000;
      -webkit-text-stroke-color: transparent;
    }
  }

  hr {
    margin-top: 2rem !important;
  }
}
.toHome {
  @media #{$tablet} {
    position: relative;
    padding-top: $padd * 2;
    top: -#{$h-unit-1};
    margin: 0;
    @include singleDesktopLayout();

    a {
      margin-bottom: $padd * 2;
      display: block;
    }
  }
}

#related_posts {
  & > h3 {
    display: none;
  }
  ul {
    padding: 0;
    li {
      display: block;
      position: relative;
      cursor: pointer;

      & > a {
        margin: 0;
        padding: 0;
        border: none;
        display: inline-block;
      }

      .related_thumbnailwrapper {
        img {
          // post thumbnail on home
          height: 50vw;
          width: 100vw;
          object-fit: cover;
        }
      }

      h2 {
        width: 100%;
        height: 50vw;
        padding: 2rem;
        padding-top: 3rem;
        margin: 0;

        a {
          display: block;
          @include related-title();
        }
      }

      .metadata {
        bottom: 50%;
        height: $h-unit-1;
        display: flex;
        @include fit-content(width);
        justify-content: space-around;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0;

        .vr {
          height: 100%;
          width: 1px;
          background-color: #000;
          flex-grow: 0 !important;
          flex-shrink: 0 !important;
          flex-basis: auto !important;
          box-shadow: 0 0 1px transparent;
        }
      }
    }
  }

  /* ------------------------ related posts on desktop ------------------------ */
  @media #{$tablet} {
    top: -#{$h-unit-1};
    position: relative;
    padding-top: $padd * 2;
    @include singleDesktopLayout();

    & > h3 {
      display: block;
    }
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      height: calc((100vw - #{$v-unit-4}) / 3);
      max-height: calc(1024px / 3);
      li {
        width: calc(100% / 3);
        padding-bottom: calc(100% / 3);

        position: relative;
        height: 0;

        .relatedWrapper {
          position: absolute;
          height: 100%;
          width: 100%;
        }
        .related_thumbnailwrapper {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .metadata {
          width: 100%;
          min-width: unset;

          position: absolute;
          bottom: 0;
          right: 0;

          background: transparent;

          display: flex;
          flex-direction: row;
          padding: 0;
          justify-content: space-between;
          align-items: stretch;

          height: $h-unit-1;
          @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);

          @media #{$tablet} {
            @include triangle-corner-bordered(#{$h-unit-0-5}, 0, transparent, #000, left);
            height: $h-unit-0-5;
          }
          @media #{$smalldesktop} {
            @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
            height: $h-unit-1;
          }
          display: none;
          &.vis {
            display: flex;
          }

          .categories,
          .postedon {
            @include home-metadata();
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
          }
          .categories {
            padding: $v-unit-1 / 3 0;
            flex: 1 1 auto;

            margin-left: $v-unit-1 * 1.5;

            @media #{$tablet} {
              margin-left: $v-unit-1 / 2;
            }
            @media #{$smalldesktop} {
              margin-left: $v-unit-1 * 1.5;
            }
          }
          .postedon {
            padding: $v-unit-1 / 3 $v-unit-1 / 4;
            flex: 1 0 auto;
          }
        }

        h2,
        h2 a {
          @include home-title-small();
        }

        h2 {
          display: none;
          position: absolute;
          top: 0;
          background-color: #fff;
          height: 100%;
          padding-left: $v-unit-1;
          @media #{$tablet} {
            padding-left: $h-unit-0-5;
          }
          @media #{$smalldesktop} {
            padding-left: $v-unit-1;
          }
          @media #{$bigdesktop} {
            padding: $h-unit-1;
          }

          a {
            @include fit-content(height);
            position: absolute;

            bottom: $h-unit-1 + $v-unit-1 * 0.5;
            width: calc(100% - #{$v-unit-2});

            @media #{$tablet} {
              bottom: $h-unit-0-5 + $v-unit-1 / 4;
              width: calc(100% - #{$v-unit-1});
            }
            @media #{$smalldesktop} {
              bottom: $h-unit-1 + $v-unit-1 * 0.5;
              width: calc(100% - #{$v-unit-2});
            }

            @media #{$bigdesktop} {
              width: calc(100% - #{$h-unit-2});
            }
          }
        }
      }
    }
  }
}

/* -------------------------------- page only------------------------------- */
body.page {
  @media #{$only-mobile} {
    .single-content {
      padding-top: 8rem;
    }
  }

  @media #{$tablet} {
    article {
      margin-top: $h-unit-2;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                 TAG COLORS                                 */
/* -------------------------------------------------------------------------- */

@mixin tagcolors($color) {
  //metadata on mobile
  .metadata {
    @media #{$only-mobile} {
      color: $color !important;
      .vr {
        background-color: $color !important;
      }
    }

    a {
      color: $color !important;
    }
  }

  hr {
    background-color: $color !important;
  }

  figcaption {
    color: $color !important;
  }

  @media #{$tablet} {
    &.home-big {
      h2 a {
        color: $color;
      }
    }
    &.home-big.hovered {
      background-color: $color !important;
    }
    &.home-small {
      .metadata,
      .metadata a {
        color: #000 !important;
      }
    }
  }

  //hover on bedo circle
  &.bedo-sub-wrapper {
    & > a {
      -webkit-text-stroke: $color 1px !important;
    }
    span {
      color: $color !important;
    }
    .circle {
      background-color: $color !important;
    }
  }

  // tag archive pages

  &.archive.tag {
    background-color: $color !important;
    .header-1,
    .header-2 {
      background-color: $color !important;
    }
    article *:not(.vr) {
      background-color: $color !important;
    }
  }
}

//tagclip: filters on small articale images

@mixin tagclip($tag) {
  -webkit-mask: url(../img/clip/#{$tag}_mobil.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: url(../img/clip/#{$tag}_mobil.svg);
  mask-repeat: no-repeat;
  mask-size: 100%;
  @media #{$tablet} {
    -webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: url(../img/clip/#{$tag}_desktop.svg);
  mask-repeat: no-repeat;
  mask-size: 100%;
  }
}

//colors on single articles

@mixin tagcolors-single($color, $darkcolor) {
  .titlewrapper {
    .metadata {
      @media #{$tablet} {
        // color: #fff !important;
        -webkit-text-stroke: $color 1px !important;
      }
      a {
        @media #{$tablet} {
          color: #fff !important;
          -webkit-text-stroke: $color 1px !important;
          &:hover {
            color: $color !important;
          }
        }
      }
    }
  }
  .single-content {
    blockquote p,
    h3 {
      background: $color !important;
      @include box-shadow(10px 0 $color, -5px 0 $color !important);
      a {
        color: $darkcolor;
      }
    }
    a {
      color: $color;
    }
    .authors {
      a {
        -webkit-text-stroke: $color 1px !important;
        &:hover {
          color: $color !important;
          text-decoration: none;
        }
      }
    }
  }
}
$color-be: #fdff00;
$color-do: #3c00ff;
$color-think: #00ffb8;
$color-love: #ff5f5f;

$color-be-dark: #7e7f00;
$color-do-dark: #1e007f;
$color-think-dark: #007f5c;
$color-love-dark: #7f2f2f;

//colors on articles

.tag-be {
  @include tagcolors($color-be);
  ::selection {
    color: #000;
    background-color: $color-do;
  }
  &.random,
  &.cut-even {
    .thumbnailwrapper > img {
      @include tagclip(be);
    }
  }
}

.tag-do {
  @include tagcolors($color-do);
  ::selection {
    color: #000;
    background-color: $color-be;
  }
  &.random,
  &.cut-even {
    .thumbnailwrapper > img {
      @include tagclip(do);
    }
  }
}

.tag-think {
  @include tagcolors($color-think);
  ::selection {
    color: #000;
    background-color: $color-love;
  }
  &.random,
  &.cut-even {
    .thumbnailwrapper > img {
      @include tagclip(think);
    }
  }
}

.tag-love {
  @include tagcolors($color-love);
  ::selection {
    color: #000;
    background-color: $color-think;
  }
  &.random,
  &.cut-even {
    .thumbnailwrapper > img {
      @include tagclip(love);
    }
  }
}

//single article
.single {
  .tag-be {
    @include tagcolors-single($color-be, $color-be-dark);
  }

  .tag-do {
    @include tagcolors-single($color-do, $color-do-dark);
  }

  .tag-think {
    @include tagcolors-single($color-think, $color-think-dark);
  }

  .tag-love {
    @include tagcolors-single($color-love, $color-love-dark);
  }
}

//menu colored on big article hover

body,
.header-1,
.header-2 {
  &.hover-tag-be {
    background-color: $color-be !important;
  }

  &.hover-tag-do {
    background-color: $color-do !important;
  }

  &.hover-tag-think {
    background-color: $color-think !important;
  }

  &.hover-tag-love {
    background-color: $color-love !important;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   imports                                  */
/* -------------------------------------------------------------------------- */

@import "fonts";
@import "print";