/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

span.fa-description, .screen-reader-text, .item-more span {
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
  display: inline-block;
}

a#skip-to-main-content {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  /*.transition(height 400ms ease);*/
}

a#skip-to-main-content:focus {
  position: static;
  width: 100%;
  height: auto;
  text-align: center;
  background: #FFF;
  display: inline-block;
  margin: 0 auto;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/*
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
*/
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* remove blue outline */
*:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

/*
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
*/
/* grid - start */
/* TODO: make this better */
/* WE USE BOOTSTRAP NOW */
/*
.flex-container {
  @include flex-container;
}

.offset-1 {
  margin-left: 8.3333% !important;
}

.offset-2 {
  margin-left: 16.6666% !important;
}

.offset-3 {
  margin-left: 25% !important;
}

.offset-4 {
  margin-left: 33.3333% !important;
}

.offset-5 {
  margin-left: 41.666666% !important;
}

.offset-6 {
  margin-left: 50% !important;
}

.offset-7 {
  margin-left: 58.333333% !important;
}

.offset-8 {
  margin-left: 66.666666% !important;
}

.offset-9 {
  margin-left: 75% !important;
}

.offset-10 {
  margin-left: 83.333333% !important;
}

.offset-11 {
  margin-left: 91.666666% !important;
}
*/
/* TODO:lovro transition to this later instead of % above */
/* TODO:lovro remove margins from elements with flex */
/* WE USE BOOTSTRAP NOW */
/*
.col-1 {
  @include flex-element-1-12;
}

.col-2 {
  @include flex-element-2-12;
}

.col-3 {
  @include flex-element-3-12;
}

.col-4 {
  @include flex-element-4-12;
}

.col-5 {
  @include flex-element-5-12;
}

.col-6 {
  @include flex-element-6-12;
}

.col-7 {
  @include flex-element-7-12;
}

.col-8 {
  @include flex-element-8-12;
}

.col-9 {
  @include flex-element-9-12;
}

.col-10 {
  @include flex-element-10-12;
}

.col-11 {
  @include flex-element-11-12;
}

.col-12 {
  @include flex-element-12-12;
}
*/
/*
SCSS

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
 */
/* container only responsive design */
/* WE USE BOOTSTRAP NOW */
/*
.container {
  //width: $content-width;
  width: calc(100% - 30px);
  max-width: 95vw;
  margin: 0 auto;
}

body.poetry, body.review {
  @media (min-width: 576px) {
    .container {
      max-width: 360px;
    }
  }

  @media (min-width: 768px) {
    .container {
      max-width: 728px;
    }
  }

  @media (min-width: 1024px) {
    .container {
      max-width: 942px;
    }
  }

  @media (min-width: 1400px) {
    .container {
      max-width: 1360px;
    }
  }
}
*/
/* WE USE BOOTSTRAP NOW */
/*
.row {
  width: 100%; //this is not in bootstrap
  margin: 0 15px;
  @include flex-container;
}
*/
/* special cases for nested: */
/* row with immediately nested row */
/* col-with-nested-row is not in use: last tested 21.12.2018 */
/*
.col-with-nested-row {
  padding-left: 0;
  padding-right: 0;

  > .row {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;

    .col-1-9 {
      @include flex-element-ratio(1/9);
    }

    .col-8-9 {
      @include flex-element-ratio(8/9);
    }

    .col-1-8 {
      @include flex-element-ratio(1/8);
    }

    .col-6-8 {
      @include flex-element-ratio(6/8);
    }

    .col-content {
      @include flex-element;
    }
  }
}
*/
/*!
 * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@-ms-viewport {
  width: device-width;
}
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1420px) {
  .container {
    max-width: 1360px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.col-xl,
.col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg,
.col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md,
.col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm,
.col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col,
.col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    order: -1;
  }

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    order: -1;
  }

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    order: -1;
  }

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1420px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    order: -1;
  }

  .order-xl-last {
    order: 13;
  }

  .order-xl-0 {
    order: 0;
  }

  .order-xl-1 {
    order: 1;
  }

  .order-xl-2 {
    order: 2;
  }

  .order-xl-3 {
    order: 3;
  }

  .order-xl-4 {
    order: 4;
  }

  .order-xl-5 {
    order: 5;
  }

  .order-xl-6 {
    order: 6;
  }

  .order-xl-7 {
    order: 7;
  }

  .order-xl-8 {
    order: 8;
  }

  .order-xl-9 {
    order: 9;
  }

  .order-xl-10 {
    order: 10;
  }

  .order-xl-11 {
    order: 11;
  }

  .order-xl-12 {
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
}
.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 1420px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}
@media print {
  .d-print-none {
    display: none !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }
}
.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }

  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }

  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-baseline {
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .align-content-sm-start {
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    align-content: center !important;
  }

  .align-content-sm-between {
    align-content: space-between !important;
  }

  .align-content-sm-around {
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    align-self: auto !important;
  }

  .align-self-sm-start {
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    align-self: center !important;
  }

  .align-self-sm-baseline {
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }

  .flex-md-column {
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }

  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-baseline {
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .align-content-md-start {
    align-content: flex-start !important;
  }

  .align-content-md-end {
    align-content: flex-end !important;
  }

  .align-content-md-center {
    align-content: center !important;
  }

  .align-content-md-between {
    align-content: space-between !important;
  }

  .align-content-md-around {
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    align-content: stretch !important;
  }

  .align-self-md-auto {
    align-self: auto !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .align-self-md-end {
    align-self: flex-end !important;
  }

  .align-self-md-center {
    align-self: center !important;
  }

  .align-self-md-baseline {
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }

  .flex-lg-column {
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }

  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-baseline {
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .align-content-lg-start {
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    align-content: center !important;
  }

  .align-content-lg-between {
    align-content: space-between !important;
  }

  .align-content-lg-around {
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    align-self: auto !important;
  }

  .align-self-lg-start {
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    align-self: center !important;
  }

  .align-self-lg-baseline {
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 1420px) {
  .flex-xl-row {
    flex-direction: row !important;
  }

  .flex-xl-column {
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-xl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-xl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    justify-content: center !important;
  }

  .justify-content-xl-between {
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    justify-content: space-around !important;
  }

  .align-items-xl-start {
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    align-items: center !important;
  }

  .align-items-xl-baseline {
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    align-items: stretch !important;
  }

  .align-content-xl-start {
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    align-content: center !important;
  }

  .align-content-xl-between {
    align-content: space-between !important;
  }

  .align-content-xl-around {
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    align-self: auto !important;
  }

  .align-self-xl-start {
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    align-self: center !important;
  }

  .align-self-xl-baseline {
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}
/* grid - end */
/*
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
 */
/*
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
*/
/* weird green brownish color for washed out background */
/* @include transition(all,2s,ease-out); */
/* figure for articles */
/*
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
*/
body .cc-cookies {
  top: inherit;
  position: fixed !important;
  bottom: 0;
  background: #000;
  color: #fff;
  padding: 20px 15px;
}
body .cc-cookies a {
  margin: 0 5px !important;
}
body .cc-cookies a.cc-cookie-accept, body .cc-cookies-error a.cc-cookie-accept, body .cc-cookies a.cc-cookie-decline, body .cc-cookies-error a.cc-cookie-decline, body .cc-cookies a.cc-cookie-reset {
  box-shadow: none;
  text-shadow: none;
  padding: 0;
  line-height: 18px;
  background: #f06942;
  border-radius: 10px;
  /* 18 + 2x*1 border / 2 */
  padding: 0 12px;
  border: 1px solid transparent;
  text-transform: none;
  display: inline-block !important;
}
body .cc-cookies a.cc-cookie-accept:hover, body .cc-cookies-error a.cc-cookie-accept:hover, body .cc-cookies a.cc-cookie-decline:hover, body .cc-cookies-error a.cc-cookie-decline:hover, body .cc-cookies a.cc-cookie-reset:hover {
  background: #C3542F;
  border-color: #C3542F;
  color: #fff;
}
body .cc-cookies a.cc-cookie-decline, body .cc-cookies-error a.cc-cookie-decline {
  background: #000;
  border-color: #fff;
}
body .cc-cookies a.cc-cookie-decline:hover, body .cc-cookies-error a.cc-cookie-decline:hover {
  background: #f06942;
  color: #fff;
  border-color: #f06942;
}

@media (max-width: 370px) {
  body .cc-cookies {
    font-size: 11px;
  }
}
@media (max-width: 991.98px) {
  /* break after first a (text) */
  body .cc-cookies {
    text-align: left;
  }
  body .cc-cookies a:first-child:after {
    content: "";
    display: block;
    margin-bottom: 15px;
  }
  body .cc-cookies .cc-cookie-accept {
    margin-left: 0 !important;
    float: left;
  }
}
body {
  overflow-x: hidden;
  /* weird quirk */
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 1.4;
  /*
  a {
    color: $black;
    text-decoration: none;

    @include transition();

    h2, h3, h4 {
      @include transition();
    }

    &:hover {
      color: $orange;

      h2, h3, h4 {
        color: $orange;
      }
    }
  }
   */
}

h1 .left {
  font-weight: 400;
}
h1 .middle {
  color: #f06942;
}
h1 .right {
  font-weight: 700;
}

#footer {
  margin-top: 160px;
  text-align: center;
  font-size: 13px;
  background: #000;
  color: #fff;
}
#footer a {
  color: #fff;
}
#footer #logo-footer {
  width: 140px;
  position: relative;
  top: -45px;
}
#footer p {
  font-family: "IBM Plex Serif", serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 30px;
}
#footer ul#footer-socials {
  margin-bottom: 30px;
  list-style: none;
}
#footer ul#footer-socials li {
  display: inline-block;
  padding: 0 10px;
  font-size: 30px;
}
#footer ul#footer-socials .fa-description {
  display: none;
}
#footer ul#footer-menu {
  list-style: none;
  margin-bottom: 20px;
}
#footer ul#footer-menu li {
  display: inline-block;
  padding: 0 10px;
  font-size: 18px;
  font-weight: 500;
}
#footer #footer-line {
  border-top: 2px solid #4b4b4b;
  margin-top: 45px;
  width: 100%;
}
#footer #footer-bottom {
  text-align: left;
  padding-top: 25px;
  padding-bottom: 25px;
}
#footer #footer-bottom img {
  width: 110%;
}
#footer #footer-bottom .footer--left img {
  float: left;
}
#footer #footer-bottom .footer--right {
  text-align: left;
}
#footer #footer-bottom .footer--right h2, #footer #footer-bottom .footer--right p, #footer #footer-bottom .footer--right img {
  text-align: left;
}
#footer #footer-bottom .footer--right img {
  float: none;
  width: 100%;
  margin-top: 10px;
}
#footer #footer-bottom h2 {
  text-transform: uppercase;
  font-weight: 500;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
#footer #footer-bottom p {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: "IBM Plex Sans", sans-serif;
}

/* poetry only - start */
#poetry-landing-top #circle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background-image: linear-gradient(-142deg, #5C5D40 0%, #2AA4A3 100%);
  width: 662px;
  height: 662px;
  border-radius: 331px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 24px;
  color: #FFFFFF;
  text-align: center;
  line-height: 32px;
}
#poetry-landing-top #circle #circle__content {
  width: 480px;
  text-align: center;
}
#poetry-landing-top #circle #circle__content img {
  display: inline-block;
}
#poetry-landing-top #circle #circle__content p {
  display: inline-block;
}
#poetry-landing-top #explanation-texts {
  margin-top: 40px;
  /* 10 is already included */
}
#poetry-landing-top #explanation-texts div.explanation-texts__content {
  font-family: "IBM Plex Serif", serif;
  text-align: center;
}
#poetry-landing-top #explanation-texts div.explanation-texts__content h2 {
  color: #2ba19f;
  background: -webkit-linear-gradient(left, #5C5D40, #2AA4A3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-style: italic;
  font-size: 64px;
  color: #000;
  line-height: 72px;
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  margin-bottom: 12px;
}
#poetry-landing-top #explanation-texts div.explanation-texts__content p {
  font-family: "IBM Plex Serif", serif;
  font-size: 16px;
  color: #000;
  text-align: center;
  line-height: 32px;
  padding-bottom: 30px;
}
#poetry-landing-top #explanation-texts div.explanation-texts__content a {
  border-bottom: 1px solid #f06942;
  font-size: 14px;
  line-height: 22px;
  display: inline-block;
  text-transform: uppercase;
  font-style: normal;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}

/* TRIANGLE - start */
.arrow-icon-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
}

.arrow-icon-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
}

.arrow-icon-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
}

.arrow-icon-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000;
}

/* TRIANGLE - end */
/* this is the normal section on poetry version */
body.poetry section.section__poetry {
  /* body.poetry is to make query stronger so it works */
  /*
  h2 {
    @include sans;
    font-weight: $wbold;
    font-size: 26px;
    color: $black;
    letter-spacing: 9.75px;
    line-height: 56px;
    padding: 0;
  }
   */
}
body.poetry section.section__poetry .section__background {
  background-image: linear-gradient(53deg, rgba(92, 93, 64, 0.14) 3%, rgba(42, 164, 163, 0.14) 100%);
  width: 100%;
}
body.poetry section.section__poetry .section__background .section__background__content {
  /* specific landing page poetry of the week content */
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week {
  padding: 100px 0;
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .author {
  text-align: left;
  /* TODO:lovro - put in a bubble */
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .author h3 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 42px;
  line-height: 48px;
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .author .author__content {
  margin-top: 30px;
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .author .author__content .bubble-photo {
  float: left;
  /*figure {
    @include figure;

    width: 58px;
    height: 58px;
    border-radius: 29px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
  }*/
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .author .author__content .author__name {
  float: left;
  height: 58px;
  line-height: 58px;
  margin-left: 16px;
  font-size: 16px;
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .author .author__content .author__name span {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .author .author__content .author__name a {
  font-family: "IBM Plex Serif", serif;
  font-style: italic;
  border-bottom: 1px solid #f06942;
}
body.poetry section.section__poetry .section__background .section__background__content.section__background__content--poetry_of_the_week .poem_of_the_week {
  font-family: "IBM Plex Serif", serif;
  font-size: 16px;
  line-height: 32px;
  text-align: left;
}

/* poetry only - end */
/**
HEADER - start
 */
/* fixed header for review */
/*
body.poetry {
  ul#main-menu {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      text-align: center;
      font-size: 18px;
      font-weight: 500;

      height: 25px;
      line-height: 24px;
      padding: 0px 4px 20px 4px;
      margin: 0 10px;

      display: inline-block;

      @include sans;

      a {
        padding: 0px 3px;
      }

      .menu_worm {
        width: 100%;
        height: 3px;
        -webkit-border-radius: 1.5px;
        -moz-border-radius: 1.5px;
        border-radius: 1.5px;
        //display: inline-block;
      }

      &.active {
        .menu_worm {
          background-image: linear-gradient(-142deg, #5C5D40 0%, #2AA4A3 100%);
        }
      }
    }
  }
}
*/
/**
16:9
 */
.resize-to-ratio {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
}

/**
HEADER - end
 */
#close-up {
  position: relative;
  /*
  width: $content-width;
  */
  padding: 30px;
  margin-top: 40px;
  border: 1px solid #989898;
  text-align: center;
  /* the big one on the top */
  /* the 4 small ones on the bottom */
}
#close-up > img.eye {
  position: absolute;
  left: 50%;
  margin-left: -27px;
  top: -14px;
}
#close-up > h2 {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 800;
}
#close-up > h2 span {
  color: #f06942;
  padding: 0 5px;
}
#close-up > h3 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 56px;
  padding: 25px 0 25px 0;
}
#close-up > h3.close-up__theme {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 56px;
}
#close-up .article__featured_big {
  padding-bottom: 60px;
}
#close-up .article__featured_big h2 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
#close-up .article__featured_big h2 span {
  color: #f06942;
  margin: 0 3px;
}
#close-up .article__featured_big h3 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 56px;
  text-align: center;
}
#close-up .article__featured_big p {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
}
#close-up .article__featured_big .article__author {
  margin-top: 36px;
}
#close-up .article__featured {
  position: relative;
}
#close-up .article__featured .article__author {
  position: absolute;
  bottom: 0;
  left: 15px;
}
#close-up .article__featured h3 {
  margin-top: 20px;
  margin-bottom: 20px;
}
#close-up .article__featured p {
  margin-bottom: 50px;
}
#close-up .article__featured .article__header {
  position: relative;
}
#close-up .article__featured .article__header .article__tag {
  position: absolute;
  left: 0;
}
#close-up .article__featured .article__header .article__date {
  position: absolute;
  right: 0;
  display: block;
}
#close-up .article__featured .article__author {
  text-align: left;
}

.article__tag {
  background: #000;
  color: #fff;
  line-height: 20px;
  font-size: 12px;
  padding: 0 15px;
  height: 20px;
  border-radius: 10px;
  font-weight: 500;
  display: inline-block;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.article__tag:hover {
  background: #f06942;
  color: #fff;
}

.article__date {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #000;
  margin-left: 6px;
  /* spacer with tag */
}

/* normal article layout */
article.article {
  /* general article */
  /*****************/
  /* special cases */
}
article.article .article__header {
  padding: 10px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
article.article figure {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
article.article figure img {
  visibility: hidden;
  width: 100%;
  height: auto;
}
article.article figure figcaption {
  display: none;
}
article.article figure img {
  overflow: hidden;
  height: 0 !important;
  padding-top: 56.25%;
}
article.article h3 {
  font-size: 22px;
  font-weight: 400;
  font-family: "IBM Plex Serif", serif;
  margin: 12px 0;
  text-align: left;
  line-height: 1.25;
}
article.article p {
  font-size: 16px;
  font-family: "IBM Plex Sans", sans-serif;
  margin: 12px 0;
  text-align: left;
  line-height: 1.4;
}
article.article .article__author {
  display: block;
  font-size: 14px;
}
article.article .article__author span {
  font-weight: 600;
  display: inline-block;
  border-bottom: 2px solid transparent;
  -webkit-transition: border-bottom 0.3s ease-in-out;
  -moz-transition: border-bottom 0.3s ease-in-out;
  -ms-transition: border-bottom 0.3s ease-in-out;
  -o-transition: border-bottom 0.3s ease-in-out;
  transition: border-bottom 0.3s ease-in-out;
}
article.article .article__author:hover a {
  color: #000;
}
article.article .article__author:hover a span {
  border-bottom: 2px solid #f06942;
}
article.article.article__horizontal {
  margin-top: 18px;
  /*p {
    font-size: 18px;
  }*/
  /*
  figure {
    max-height: 180px;
    width: auto;
    position: relative;
  }
  */
  /* change the ratio for multimedia */
  /* change the ratio for multimedia */
  /* a little bit special with overrides for the wrapper below */
  /* on poets page - list of photos in the bottom */
  /* on poets page - list of videos in the bottom */
  /* peotry - festivals */
}
article.article.article__horizontal h3 {
  font-size: 24px;
}
article.article.article__horizontal > div {
  margin-bottom: 18px;
}
article.article.article__horizontal.article__horizontal--multimedia {
  /*
  figure {
    height: 500px;
    max-height: 500px;
  }
  */
}
article.article.article__horizontal.article__horizontal--half_half {
  /*
  figure {
    height: 500px;
    max-height: 500px;
  }
  */
  /* !* make both wrappers 50/50 *!
   > div {
     &.article__photo {
       @include flex-element-6-12;
     }

     &.article__content {
       @include flex-element-6-12;
     }
   }*/
}
article.article.article__horizontal.article__horizontal--half_half h3 {
  font-size: 42px;
  font-weight: 400;
}
article.article.article__horizontal.article__horizontal--compact .article__content {
  float: left;
  width: calc(100% - 95px);
}
body article.article.article__horizontal.article__horizontal--compact .article__photo figure, body article.article.article__horizontal.article__horizontal--compact .article__photo figure img {
  width: 86px;
  height: 86px;
}
article.article.article__horizontal.article__horizontal--compact .article__header {
  padding-top: 0;
  padding-bottom: 3px;
}
article.article.article__horizontal.article__horizontal--compact .article__header .article__tag {
  background: none;
  border: 1px solid #000;
  color: #fff;
  background: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
article.article.article__horizontal.article__horizontal--compact h3 {
  font-weight: 700;
  font-family: "IBM Plex Serif", serif;
  font-size: 15px;
  line-height: 24px;
  margin: 5px 0;
}
article.article.article__horizontal.article__horizontal--compact p, article.article.article__horizontal.article__horizontal--compact .article__author {
  display: none;
}
article.article.article__horizontal.article__horizontal--compact_bottom .article__content {
  float: left;
  width: calc(100% - 160px);
}
body article.article.article__horizontal.article__horizontal--compact_bottom .article__photo figure, body article.article.article__horizontal.article__horizontal--compact_bottom .article__photo figure img {
  width: 153px;
  height: 86px;
}
article.article.article__horizontal.article__horizontal--poetry_photos figure {
  cursor: pointer;
  width: 33.333333%;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  /* solves weird stacking */
}
article.article.article__horizontal.article__horizontal--poetry_videos {
  /*> div {
    &.article__photo {
      @include flex-element-9-12;
    }

    &.article__content {
      @include flex-element-3-12;
    }
  }*/
}
article.article.article__horizontal.article__horizontal--poetry_videos figure {
  width: 100%;
  height: 500px;
  max-height: 500px;
  display: inline-block;
  position: relative;
}
article.article.article__horizontal.article__horizontal--poetry_videos figure img {
  display: none;
}
article.article.article__horizontal.article__horizontal--poetry_festival {
  /*
  > div {
    &.article__photo {
      @include flex-element-3-12;
    }

    &.article__content {
      @include flex-element-9-12;
    }
  }
  */
}
article.article.article__horizontal.article__horizontal--poetry_festival figure {
  background-size: contain;
}
article.article.article__horizontal.article__horizontal--poetry_festival h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 48px;
}
article.article.article__horizontal.article__horizontal--poetry_festival h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
}
article.article.article__horizontal.article__horizontal--poetry_festival h5 {
  margin-top: 12px;
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 40px;
}

/* position this somewhere more appropriate and rename to .spot */
.watch {
  width: 76px;
  height: 76px;
  line-height: 70px;
  color: #fff;
  background: #f06942;
  border-radius: 38px;
  left: 50%;
  top: 50%;
  margin-left: -38px;
  margin-top: -38px;
  position: absolute;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 19px;
}

.section__horizontal_line {
  padding-bottom: 30px;
  border-top: 1px solid #989898;
  width: 100%;
}

/* example: LATEST section of landing page / generalized */
section.section {
  text-align: center;
  /*
  h2 {
    margin-top: 60px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 8px;
    text-transform: uppercase;
  }
   */
  /* loyals are horizontal - 1/3 */
}
section.section .section__vertical_line {
  width: 1px;
  height: 30px;
  background: #989898;
  margin: 10px auto;
  padding: 0;
}
body.poetry section.section .section__vertical_line {
  background: #979797;
}
section.section .section__more {
  margin-top: 15px;
  display: block;
  border-bottom: 1px solid #f06942;
  font-size: 14px;
  line-height: 22px;
  display: inline-block;
  text-transform: uppercase;
  font-style: normal;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}
section.section .section__more .bolder {
  font-weight: 700;
  letter-spacing: 2px;
  padding: 0 2px;
}
section.section .section__paging {
  margin-top: 50px;
  height: 42px;
  line-height: 42px;
}
section.section .section__paging .navigation {
  font-size: 16px;
  line-height: 14px;
  padding-top: 8px;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  display: inline-block;
  position: relative;
  top: -10px;
}
section.section .section__paging .navigation.left {
  text-align: right;
}
section.section .section__paging .navigation.right {
  text-align: left;
}
section.section .section__paging span.navigation {
  color: #989898;
}
section.section .section__paging a.navigation {
  border-bottom: 2px solid #f06942;
}
section.section .section__paging .horizontal_line {
  vertical-align: top;
  display: inline-block;
  height: 21px;
  border-bottom: 1px solid #989898;
  margin: 0 15px;
  width: 50px;
}
section.section .section__paging .middle {
  font-size: 42px;
  font-style: italic;
  font-family: "IBM Plex Serif", serif;
}
section.section.section__category {
  /* so far not needed */
}
section.section.section__category ol {
  list-style: none;
}
section.section.section__category ol li {
  border-top: 1px solid #989898;
  /* hover only for poetry */
}
body.poetry #page__poet.shine-1 section.section.section__category ol li:hover {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FF3800 100%);
}
body.poetry #page__poet.shine-2 section.section.section__category ol li:hover {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(179, 0, 255, 0.73) 100%);
}
body.poetry #page__poet.shine-3 section.section.section__category ol li:hover {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #265C5A 100%);
}
body.poetry #page__poet.shine-4 section.section.section__category ol li:hover {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 135, 0, 0.77) 100%);
}
section.section.section__category ol li:last-child {
  border-bottom: 1px solid #989898;
}
section.section.section__category.section__category--ebook figure {
  background-size: contain;
}
section.section .article__content {
  text-align: left;
}
section.section.section__loyals ol {
  list-style: none;
}
p strong {
  font-weight: 700;
}

/* Content */
/* Single article */
#single_article {
  /* IMPORTANT */
  /* IMPORTANT */
  /* IMPORTANT */
  /* override the default list layout for desktop version */
}
#single_article #single-article__header h2 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 72px;
}
#single_article #single-article__header h3 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 42px;
}
#single_article #single-article__header p {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 20px;
  line-height: 32px;
}
#single_article #single-article__header .article__author {
  padding-bottom: 23px;
  transition: none;
}
#single_article #single-article__header .article__author figure {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: block;
  float: left;
  margin-right: 20px;
}
#single_article #single-article__header .article__author .article__author__by {
  display: block;
  float: left;
  /*
  line-height: 50px;
  height: 50px;
  */
  margin-top: 15px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
#single_article #single-article__header .article__author .article__author__by span {
  display: inline-block;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#single_article #single-article__header .article__author:hover .article__author__by {
  color: #000;
}
#single_article #single-article__header .article__author:hover .article__author__by span {
  border-bottom: 2px solid #f06942;
}
#single_article #single-article__header .article__content__wrapper {
  padding-top: 30px;
}
#single_article #single-article__header .article__header__social_icons {
  display: block;
  list-style: none;
  /* maybe remove include and do it separately */
  text-align: center;
}
#single_article #single-article__header .article__header__social_icons li {
  display: inline-block;
  padding: 0 10px;
  font-size: 30px;
}
#single_article #single-article__header .article__header__social_icons .fa-description {
  display: none;
}
#single_article #single-article__header .article__header__social_icons li {
  margin: 0;
  padding: 0 4px;
}
#single_article #single-article__header .article__header__social_icons li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  font-size: 20px;
  padding: 0;
  border: 1px solid #989898;
}
#single_article #single-article__header .article__header__social_icons li a:hover {
  background: #f06942;
  border-color: #f06942;
}
#single_article #single-article__header .article__header__social_icons li a:hover i {
  color: #fff;
}
#single_article .single-article__sidebar ol li .container {
  /* unfortunately, this is a hack, because .container is in the template */
  width: inherit;
}
#single_article .single-article__sidebar h2 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3.11px;
  line-height: 16px;
}
#single_article .single-article__sidebar .row {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  /* because of floats */
  overflow: hidden;
  height: auto;
}
#single_article .single-article__sidebar .article__content, #single_article .single-article__sidebar .article__photo {
  margin-bottom: 0;
}
#single_article .single-article__sidebar .article__photo {
  float: right;
  display: inline-flex;
  padding-left: 5px;
}
#single_article .single-article__sidebar h3 {
  margin: 5px 0 0 0;
}
#single_article .single-article__sidebar .single-article__banner {
  padding-top: 15px;
}
#single_article .single-article__body .single-article__content {
  /*
  CONTENT OF THE ARTICLE

  HERE ARE SOME EXCEPTIONS
  Photos should be fullwidth and content (mostly p and Video/Embed) should be col-6 and squeezed
  */
}
#single_article .single-article__body .single-article__content p, #single_article .single-article__body .single-article__content iframe {
  display: block;
  width: 77.562642369%;
  margin-left: auto !important;
  margin-right: auto !important;
}
#single_article .single-article__body .single-article__content object {
  width: 100% !important;
}
#single_article .single-article__body .single-article__content figure {
  width: 100% !important;
}
#single_article .single-article__body .single-article__content figure img {
  width: 100% !important;
  height: auto !important;
}
#single_article .single-article__body .single-article__content p {
  font-size: 18px;
  line-height: 40px;
  font-family: "IBM Plex Serif", serif;
  margin: 32px 0;
  text-align: left;
}
#single_article .single-article__body .single-article__content p.dropcap, #single_article .single-article__body .single-article__content p:first-child:first-letter {
  /* at font size 18px and line height 40px */
  font-family: IBMPlexSerif !important;
  font-size: 130px;
  color: #000;
  letter-spacing: 0;
  line-height: 120px;
  float: left;
  padding-right: 8px;
}
#single_article .single-article__body .single-article__content.single-article__content--video__content p {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  line-height: 32px;
}
#single_article #single-article__author__news-list h2 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3.11px;
  line-height: 16px;
  padding-bottom: 18px;
  text-align: left;
}
#single_article #single-article__author__news-list .section__vertical_line {
  display: none;
}
#single_article #single-article__author__news-list ol li article {
  margin-top: 7px;
}
#single_article #single-article__author__news-list ol li article > div {
  margin-bottom: 7px;
}
#single_article .single-article__author__core {
  padding-top: 50px;
}
#single_article .single-article__author {
  padding-top: 65px;
}
#single_article .single-article__author figure.article-author-photo-left {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  width: 136px;
  height: 136px;
  border-radius: 68px;
  margin: 0 auto;
}
#single_article .single-article__author figure.article-author-photo-left img {
  visibility: hidden;
  width: 100%;
  height: auto;
}
#single_article .single-article__author figure.article-author-photo-left figcaption {
  display: none;
}
#single_article .single-article__author h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3.11px;
  line-height: 16px;
}
#single_article .single-article__author h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 48px;
}
#single_article .single-article__author .single-article__author__description {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  line-height: 32px;
}
#single_article .single-article__author .single-article__author__description p a {
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 32px !important;
  color: #000 !important;
}
#single_article .single-article__author ol li .container {
  /* unfortunately, this is a hack, because .container is in the template */
  width: inherit;
}
#single_article .single-article__author ol li .container .row {
  display: block;
  /* because of floats */
  overflow: hidden;
  height: auto;
}
#single_article .single-article__author ol li .container .article__photo {
  float: right;
  display: inline-flex;
}
#single_article .single-article__author ol li .container .article__photo figure {
  width: 154px;
  height: 86px;
}
#single_article .single-article__author ol li .container h3 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
}

/* almost the same as loyal__link */
.all-from-the-author-link {
  margin-top: 36px;
  border-bottom: 1px solid #f06942;
  font-size: 14px;
  line-height: 22px;
  display: inline-block;
  text-transform: uppercase;
  font-style: normal;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}

/* AUTHOR content */
body.review #section__author .content #section__author__name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}
body.review #section__author .content #section__author__name h1 {
  font-size: 44px;
  line-height: 60px;
  padding: 0;
}
body.review #section__author .content #section__author__description {
  font-family: "IBM Plex Serif", serif;
  font-size: 18px;
  line-height: 40px;
  text-align: left;
}
body.review #section__author #author-image__big {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  width: 312px;
  height: 312px;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  margin-top: 40px;
}
body.review #section__author #author-image__big img {
  visibility: hidden;
  width: 100%;
  height: auto;
}
body.review #section__author #author-image__big figcaption {
  display: none;
}

/* Loyal - start */
article.loyal {
  /* :TODO: lovro - temporary solution - you must create media queries later */
}
article.loyal > * {
  display: inline-block;
}
article.loyal .loyal__photo {
  vertical-align: top;
  overflow: hidden;
}
article.loyal .loyal__photo figure {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  /*
  width: $photo-width;
  height: $photo-width;
  border-radius: $photo-width/2;
  */
  border-radius: 50%;
  max-height: 700px !important;
}
article.loyal .loyal__photo figure img {
  visibility: hidden;
  width: 100%;
  height: auto;
}
article.loyal .loyal__photo figure figcaption {
  display: none;
}
article.loyal .loyal__content {
  vertical-align: top;
  text-align: left;
  /*
  width: calc(75% - 25px);
  */
}
article.loyal .loyal__content .loyal__name {
  /* vertical align - start */
  display: flex;
  align-items: center;
  /* vertical align - end */
}
article.loyal .loyal__content .loyal__name h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 32px;
}
article.loyal .loyal__content .loyal__link {
  margin-top: 36px;
  border-bottom: 1px solid #f06942;
  font-size: 14px;
  line-height: 22px;
  display: inline-block;
  text-transform: uppercase;
  font-style: normal;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}
article.loyal .loyal__content .loyal__description p {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
}
article.loyal > h3 {
  display: none;
}

/* AUTHORS LIST */
#section__authors-list h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3.11px;
  line-height: 16px;
  text-transform: uppercase;
  padding: 10px 0 53px 0;
}
#section__authors-list ol {
  list-style: none;
  /* test if this works */
}
#section__authors-list ol, #section__authors-list ol li {
  padding: 0;
  margin: 0;
}
#section__authors-list ol.royals {
  flex-wrap: wrap !important;
}
#section__authors-list ol.royals li {
  margin-bottom: 50px;
}
#section__authors-list ol.royals li > a:hover h3 {
  text-decoration: underline;
}
#section__authors-list ol.royals li figure {
  float: left;
  margin-right: 25px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50px;
  height: 100px;
  width: 100px;
}
#section__authors-list ol.royals li figure img {
  visibility: hidden;
  height: 100px;
  width: 100px;
}
#section__authors-list ol.royals li .author__name {
  text-align: left;
  height: 100px;
  display: flex;
  align-items: center;
}
#section__authors-list ol.royals li .author__name h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  margin: 0;
}
#section__authors-list ol.more-authors {
  flex-wrap: wrap !important;
}
#section__authors-list ol.more-authors > li {
  padding-top: 60px;
}
#section__authors-list ol.more-authors > li h4 {
  padding: 0 0 32px 0;
  text-align: left;
  text-transform: uppercase;
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-size: 80px;
  color: #000;
  letter-spacing: 0;
  line-height: 56px;
}
#section__authors-list ol.more-authors > li ol li {
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 29px;
  /* was 24px */
}

/* creates a CSS
/* see structure in people-item.html.twig */
.bubble-photo-58 {
  width: 58px;
  height: 58px;
  border-radius: 29px;
}
.bubble-photo-58 figure {
  width: 58px;
  height: 58px;
}
.bubble-photo-58 div {
  width: 58px;
  height: 58px;
}

.bubble-photo-40 {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.bubble-photo-40 figure {
  width: 40px;
  height: 40px;
}
.bubble-photo-40 div {
  width: 40px;
  height: 40px;
}

.bubble-photo-120 {
  width: 120px;
  height: 120px;
  border-radius: 60px;
}
.bubble-photo-120 figure {
  width: 120px;
  height: 120px;
}
.bubble-photo-120 div {
  width: 120px;
  height: 120px;
}

.bubble-photo-220 {
  width: 220px;
  height: 220px;
  border-radius: 110px;
}
.bubble-photo-220 figure {
  width: 220px;
  height: 220px;
}
.bubble-photo-220 div {
  width: 220px;
  height: 220px;
}

.bubble-photo-responsive {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 99999px;
}
.bubble-photo-responsive > div {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 99999px;
}

.bubble-photo {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.bubble-photo figure {
  background-position: 50% 50%;
  background-size: cover;
}
.bubble-photo figure img {
  visibility: hidden;
}

.bubble-photo-shine {
  position: absolute;
  top: 0;
  left: 0;
}
.bubble-photo-shine--1 {
  background-image: linear-gradient(-90deg, rgba(251, 189, 105, 0) 0%, #FF3800 100%);
}
.bubble-photo-shine--2 {
  opacity: 0.73;
  background-image: linear-gradient(-90deg, rgba(251, 189, 105, 0) 0%, #B300FF 100%);
}
.bubble-photo-shine--3 {
  background-image: linear-gradient(-90deg, rgba(251, 189, 105, 0) 0%, #265C5A 100%);
}
.bubble-photo-shine--4 {
  opacity: 0.77;
  background-image: linear-gradient(-90deg, rgba(251, 189, 105, 0) 0%, #FF8700 100%);
}

/* POETRY: PEOPLE FILTER */
.section__filter_button {
  padding-bottom: 25px;
}
.section__filter_button span, .section__filter_button a {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  display: inline-block;
}
.section__filter_button span {
  font-weight: 700;
  padding-right: 20px;
}
.section__filter_button #toggle_poet_list {
  padding-left: 10px;
}

.section__filter .filter {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  -webkit-backface-visibility: hidden;
  list-style: none;
}
.section__filter .filter, .section__filter .filter li {
  padding: 0;
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 32px;
}

#poet_list {
  padding-bottom: 50px;
}

/* POETRY: PEOPLE LIST (poets, translators) */
#section__people-list {
  /*
  ol.more-authors {
    @include flex-container;
    flex-wrap: wrap !important;
    justify-content: flex-start;

    > li {
      @include flex-element-3-12;

      h4 {
        padding: 60px 0 32px 0;

        text-align: left;
        text-transform: uppercase;

        @include serif;
        font-weight: $wnormal;
        font-size: 80px;
        color: $black;
        letter-spacing: 0;
        line-height: 56px;
      }

      ol li {
        text-align: left;
        margin: 0 !important;
        padding: 0 !important;

        @include sans;
        font-weight: $wmedium;
        font-size: 18px;
        letter-spacing: 0;
        line-height: 24px;
      }
    }
  }
  */
}
#section__people-list h1 {
  /*
  WHY IS THIS HERE?
  @include sans;
  font-weight: $wbold;
  font-size: 14px;
  letter-spacing: 3.11px;
  line-height: 16px;
  text-transform: uppercase;
  padding: 10px 0 53px 0;
  */
}
#section__people-list ol {
  list-style: none;
  /* test if this works */
}
#section__people-list ol, #section__people-list ol li {
  padding: 0;
  margin: 0;
}
#section__people-list ol.people li {
  padding-top: 45px;
  text-align: center;
}
#section__people-list ol.people li h3 {
  margin-top: 8px;
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 48px;
}
#section__people-list ol.people li h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  line-height: 29px;
  font-weight: 400;
  font-size: 16px;
  line-height: 29px;
}
#section__people-list ol.people li h4:before {
  content: "- ";
}
#section__people-list ol.people li h4:after {
  content: " -";
}

/* POETRY: POET */
#page__poet {
  text-align: center;
}
#page__poet #poet__title {
  padding-bottom: 52px;
}
#page__poet #poet__title h1 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 90px;
  text-align: center;
  line-height: 96px;
  color: #2ba19f;
  background: -webkit-linear-gradient(left, #5C5D40, #2AA4A3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 5px;
  /* otherwise we have erasing of serifs */
  margin: 0;
  mix-blend-mode: multiply;
}
#page__poet #poet__title h2 {
  font-family: IBMPlexSans-Medium;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding: 0;
  margin: 5px 0 0 0;
}
#page__poet #poet__title h2:after, #page__poet #poet__title h2:before {
  display: inline;
  content: "-";
  padding: 0 8px;
}
#page__poet #poet__title {
  margin-top: -40px;
  position: relative;
}
#page__poet .section__poet_description .poet_description {
  margin: 0 auto;
  -webkit-transition: "all" 0.4 ease-in-out;
  -moz-transition: "all" 0.4 ease-in-out;
  -ms-transition: "all" 0.4 ease-in-out;
  -o-transition: "all" 0.4 ease-in-out;
  transition: "all" 0.4 ease-in-out;
  position: relative;
}
#page__poet .section__poet_description .poet_description, #page__poet .section__poet_description .poet_description p, #page__poet .section__poet_description .poet_description h1, #page__poet .section__poet_description .poet_description h2, #page__poet .section__poet_description .poet_description h3, #page__poet .section__poet_description .poet_description h4, #page__poet .section__poet_description .poet_description h5, #page__poet .section__poet_description .poet_description h6 {
  font-family: "IBM Plex Serif", serif;
  font-size: 18px;
  line-height: 40px;
}
#page__poet .section__poet_description .poet_description.closed {
  height: 320px;
  overflow: hidden;
}
#page__poet .section__poet_description .poet_description .poet_description__bottom {
  position: absolute;
  bottom: 0px;
  height: 150px;
  width: 100%;
  margin: 0 -15px;
  /* to counteract 100% into column */
}
#page__poet .section__poet_description .poet_description .poet_description__bottom .poet_description__gradient {
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
  height: 108px;
  width: 100%;
}
#page__poet .section__poet_description .poet_description .poet_description__bottom .poet_description__button {
  height: 42px;
  width: 100%;
  text-align: center;
  content: "MORE ABOUT THE POET";
  background: #fff;
}
#page__poet .section__poet_description .poet_description .poet_description__bottom .poet_description__button a {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  border-bottom: 1px solid #f06942;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#page__poet .section__poet_description .poet_description .poet_description__bottom .poet_description__button a:hover {
  border-bottom: 1px solid #f06942;
}
#page__poet #poem_list {
  list-style: none;
}
#page__poet #poem_list li {
  transition: all 0.4s linear;
  border-top: 1px solid #979797;
  /* this one is a little different => it is 50% / 50% directly */
}
#page__poet #poem_list li:last-child {
  border-bottom: 1px solid #979797;
}
#page__poet #poem_list li .section__poet_poem__title {
  cursor: pointer;
  padding-top: 30px;
  padding-bottom: 30px;
}
#page__poet #poem_list li .section__poet_poem__title h3 {
  text-align: left;
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 32px;
  line-height: 40px;
}
#page__poet #poem_list li .section__poet_poem__title .section__poet_poem__arrow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#page__poet #poem_list li .section__poet_poem__title .section__poet_poem__arrow .big-arrow-up {
  display: none;
}
#page__poet #poem_list li .section__poet_poem__title .section__poet_poem__arrow .big-arrow-down {
  display: block;
}
#page__poet #poem_list li .section__poet_poem__title .section__poet_poem__arrow.big-arrow-up-toggle .big-arrow-up {
  display: block;
}
#page__poet #poem_list li .section__poet_poem__title .section__poet_poem__arrow.big-arrow-up-toggle .big-arrow-down {
  display: none;
}
#page__poet #poem_list li .section__poet_poem__content {
  padding-top: 12px;
  text-align: left;
  font-family: "IBM Plex Serif", serif;
  font-size: 16px;
  line-height: 32px;
  padding-bottom: 30px;
  /* designers wanted 50/50 but I am not doing it */
  /*
  > div {

    width: 49.9999%;
    display: inline-block;
    vertical-align: top;
    text-align: left;

    &:first-child {
      margin-left: $flex-margin;
      width: calc(49.9999% - 30px);
    }
  }
  */
  /* to center the right poem in desktop only version */
}
#page__poet #poem_list li .section__poet_poem__content .section__poet_poem__right {
  position: relative;
  left: -15px;
}
#page__poet #poem_list li.opened {
  /* background: #999; << solid color like this works for the animation, gradients not */
  transition: all 0.4s linear;
}
#page__poet #poet_booklet {
  margin: 50px 0;
  height: 48px;
  /* 46 + 2px for border */
  line-height: 39px;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid #979797;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  border-radius: 23px;
  display: inline-block;
  white-space: nowrap;
}
#page__poet #poet_booklet .bubble-photo, #page__poet #poet_booklet .poet_booklet__text {
  display: inline-block;
  vertical-align: top;
  line-height: 42px;
}
#page__poet #poet_booklet .poet_booklet__text {
  padding: 0 15px;
}
#page__poet #poet_booklet .poet_booklet__icon {
  display: inline-block;
  vertical-align: top;
  padding-left: 15px;
  padding-right: 15px;
}
#page__poet #poet_booklet .poet_booklet__icon img {
  position: relative;
  top: 5px;
}

#page__news {
  text-align: center;
}
#page__news h1 {
  font-family: "IBM Plex Serif", serif;
  font-style: italic;
  font-size: 90px;
  text-align: center;
  line-height: 96px;
  font-weight: 400;
  color: #2ba19f;
  background: -webkit-linear-gradient(left, #5C5D40, #2AA4A3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 5px 5px 25px 5px;
}

/* Loyal - end */
/* Content pages - start */
#content h1 {
  font-size: 64px;
  line-height: 72px;
  font-family: "IBM Plex Serif", serif;
  padding-bottom: 50px;
  font-weight: normal;
}
#content h2 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 500;
  /* semibold */
  font-size: 42px;
  line-height: 48px;
  padding: 50px 0 30px 0;
}
#content p {
  font-family: "IBM Plex Serif", serif;
  font-size: 18px;
  line-height: 40px;
}
#content form {
  margin-top: 30px;
}
#content label {
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
}
#content input, #content textarea, #content button {
  border: 0;
  padding: 0;
  margin: 0;
}
#content .content__form {
  margin-bottom: 30px;
}
#content .content__form.has-error {
  /* error messages */
}
#content .content__form.has-error input, #content .content__form.has-error textarea {
  border: 1px solid #FF001F;
}
#content .content__form.has-error ul {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  color: #FF001F;
  letter-spacing: 0;
  line-height: 24px;
  list-style: none;
}
#content input, #content textarea {
  border: 1px solid transparent;
  background: #F2F2F2 !important;
  /* override mobile version */
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  width: 433px;
}
#content textarea {
  height: 233px !important;
}
#content button {
  background: #f06942;
  color: #fff;
  height: 40px;
  line-height: 40px;
  padding: 0 40px;
  border-radius: 20px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3.11px;
  text-align: center;
}
#content .content__link {
  margin-top: 25px;
  border-bottom: 1px solid #f06942;
  font-size: 14px;
  line-height: 22px;
  display: inline-block;
  text-transform: uppercase;
  font-style: normal;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}
#content.content--poetry_article {
  /*
  h1 {
    @include serif;
    font-weight: $wnormal;
    font-style: italic;
    font-size: 22px;
    letter-spacing: 0;
    line-height: 32px;
    @include gradient-text;
    padding: 0 3px; //for weird disappearance of left part of A
    padding-bottom: 20px;
  }
   */
  /*
  h2 {
    @include serif;
    font-weight: $wnormal;
    font-size: 64px;
    letter-spacing: 0;
    line-height: 72px;
    padding: 0 0 20px 0;
  }
  */
}
#content.content--poetry_article span.date {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 32px;
  /* same as h1 */
  padding-left: 10px;
  position: relative;
  top: -2px;
}
#content.content--poetry_article p {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 20px;
  line-height: 32px;
}
#content.content--poetry_article .content__featured_photo figure {
  padding: 30px 0;
}
#content.content--poetry_article .content__featured_photo figure img {
  width: 100%;
  height: auto;
}
#content.content--poetry_article .content__featured_photo figure figcaption {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
}
#content.content--poetry_article .content__content {
  padding-top: 42px;
  padding-bottom: 30px;
  /* paddings on p instead of breaks */
}
#content.content--poetry_article .content__content .dropcap, #content.content--poetry_article .content__content p:first-child:first-letter {
  /* at font size 18px and line height 40px */
  font-family: IBMPlexSerif;
  font-size: 130px;
  color: #000;
  letter-spacing: 0;
  line-height: 120px;
  float: left;
  padding-right: 8px;
  /*
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px
  */
}
#content.content--poetry_article .content__content h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0;
  margin: 58px 0 10px 0;
}
#content.content--poetry_article .content__content h3:first-child {
  margin-top: 18px;
}
#content.content--poetry_article .content__content h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 24px;
  margin: 43px 0 10px 0;
}
#content.content--poetry_article .content__content h4:first-child {
  margin-top: 0;
}
#content.content--poetry_article .content__content p {
  font-family: IBMPlexSerif;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 40px;
}
#content.content--poetry_article .content__content p:empty {
  display: none;
}
#content.content--poetry_article .content__content.content__content--pbreaks p {
  padding-bottom: 40px;
}
#content.content--poetry_article .content__content.content__content--pbreaks p:last-child {
  padding-bottom: 0;
}
#content.content--poetry_article .content__content .content__content__translation {
  text-align: right;
  font-family: "IBM Plex Serif", serif;
  font-style: italic;
  font-size: 18px;
  line-height: 40px;
  width: 100%;
  margin-top: 20px;
}
#content.content--poetry_festival {
  /* overrides of article for festival */
  /*
  h2 {
    @include sans;
    font-weight: $wsemibold;
    font-size: 42px;
    line-height: 48px;
  }

  h3 {
    @include sans;
    font-weight: $wbold;
    font-size: 15px;
    line-height: 24px;
  }
  */
}
#content.content--poetry_festival span.date {
  font-family: "IBM Plex Serif", serif;
  font-size: 26px;
  line-height: 32px;
  padding-top: 36px;
  display: inline-block;
  /* DISCOVER WHY THIS IS NEEDED - or why does span.date have that on the other CSS */
  padding-left: 0;
  position: inherit;
  top: 0;
}
#content.content--poetry_festival .content__featured_photo figure {
  text-align: center;
}
#content.content--poetry_festival .content__featured_photo figure img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
}
#content.content--poetry_festival .content__organizer {
  margin-bottom: 25px;
}
#content.content--poetry_festival .content__organizer .content__organizer__by {
  font-family: "IBM Plex Sans", sans-serif;
  font-family: IBMPlexSans;
  font-size: 16px;
  display: inline-block;
  float: left;
}
#content.content--poetry_festival .content__organizer .content__organizer__by .content__organizer__by__content {
  padding-top: 5px;
}
#content.content--poetry_festival .content__organizer .content__organizer__by span {
  display: inline-block;
  margin-right: 5px;
}
#content.content--poetry_festival .content__organizer .content__organizer__by a {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  display: inline-block;
  border-bottom: 1px solid #F4693B;
}
#content.content--poetry_festival .content__organizer .content__organizer__official {
  background-image: linear-gradient(-142deg, #5C5D40 0%, #2AA4A3 100%);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  height: 32px;
  line-height: 34px;
  border-radius: 16px;
  padding: 0 30px 0 20px;
  display: inline-block;
  float: right;
  color: #fff;
}
#content.content--poetry_festival .content__organizer .content__organizer__official img {
  position: relative;
  top: 1px;
  padding-right: 10px;
}

/* Content pages - end */
/* Gallery - fullscreen form */
body.gallery {
  overflow-y: hidden;
}
body.gallery #gallery {
  display: block !important;
  /* override hard coded display:none */
  background: #fff;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
}
body.gallery #gallery #gallery__container {
  position: relative;
  width: 100%;
  height: 100%;
}
body.gallery #gallery #gallery__wrapper__wrapper {
  width: 100%;
  height: 101px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
body.gallery #gallery #gallery__slider {
  overflow: hidden;
}
body.gallery #gallery #gallery__slider .item {
  height: 100vh;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
body.gallery #gallery #gallery__slider .item .counter {
  flex-grow: 0;
  height: 56px;
  line-height: 56px;
  font-family: "IBM Plex Serif", serif;
  font-size: 18px;
  text-align: center;
}
body.gallery #gallery #gallery__slider .item figure {
  flex-grow: 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
body.gallery #gallery #gallery__slider .item figure img {
  display: none;
  /*height: 100%;
  width: auto;*/
}
body.gallery #gallery #gallery__slider .item .description {
  flex-grow: 0;
  height: 96px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}
body.gallery #gallery #gallery__slider .item .description p {
  display: block;
}
body.gallery #gallery #gallery__close__wrapper {
  text-align: right;
  cursor: pointer;
  position: absolute;
  top: 19px;
  right: 19px;
  z-index: 1000000000;
}
body.gallery #gallery #gallery__close__wrapper img {
  width: 18px;
  height: 18px;
}
body.gallery #gallery #gallery_button-prev__wrapper {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -15px;
}
body.gallery #gallery #gallery_button-next__wrapper {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -15px;
}
body.gallery #gallery .slider-button {
  cursor: pointer;
}
body.gallery #gallery .slider-button .orange {
  display: none;
}
body.gallery #gallery .slider-button .grey {
  display: none;
}
body.gallery #gallery .slider-button:hover .black {
  display: none;
}
body.gallery #gallery .slider-button:hover .orange {
  display: block;
}

/* Search - start */
/* Search - fullscreen form */
body.search {
  overflow-y: hidden;
}
body.search #search {
  display: block !important;
  /* override hard coded display:none */
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
}
body.search #search #search__close__wrapper {
  text-align: right;
}
body.search #search #search__close {
  cursor: pointer;
  position: relative;
  top: 50px;
}
body.search #search #search__wrapper__wrapper {
  width: 100%;
  height: 101px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
body.search #search #search__field {
  border-bottom: 1px solid #989898;
}
body.search #search #search__field.search__field--active {
  border-bottom: 1px solid #f06942;
}
body.search #search #search__field button {
  padding: 0;
  margin: 0;
  border: 0;
  display: inline-block;
  vertical-align: top;
  background: transparent;
}
body.search #search #search__field img {
  display: inline-block;
  width: 40px;
  height: auto;
  margin-top: 30px;
  vertical-align: top;
  /* weirdly this puts input on top */
}
body.search #search #search__field input {
  display: inline-block;
  line-height: 100px;
  height: 99px;
  width: calc(100% - 100px);
  font-size: 46px;
  font-family: "IBM Plex Serif", serif;
  border: none;
  margin-left: 30px;
}

/* Search results */
#search_results #search_form #search_form--input {
  width: 100%;
  height: 48px;
  overflow: auto;
  border-radius: 24px;
  background: #F2F2F2;
  display: flex;
}
#search_results #search_form #search_form--input input {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 18px;
  line-height: 46px;
  max-height: 46px;
  width: 100%;
  background: transparent;
  margin-left: 30px;
  border: none;
}
#search_results #search_form #search_form--input button {
  font-family: "IBM Plex Sans", sans-serif;
  border: none;
  margin: 4px 4px 0 4px;
  height: 40px;
  background: #f06942;
  color: #fff;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  line-height: 40px;
  letter-spacing: 3.11px;
  text-align: center;
  overflow: visible;
  text-transform: uppercase;
  padding: 0 36px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
#search_results #search_form #search_form--input button:hover {
  background: #C3542F;
}
#search_results #search_form #search_form--input button img {
  height: 16px;
  width: 16px;
  position: relative;
  top: 1px;
}
#search_results h1 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 56px;
}
#search_results h1.no-results {
  margin-top: 95px;
}
#search_results #search_results_counter {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3.11px;
  line-height: 16px;
  text-align: center;
  line-height: 65px;
  text-transform: uppercase;
}
#search_results #search_results__list .row {
  padding-bottom: 15px;
}
#search_results #search_results__list .section__horizontal_line {
  padding-bottom: 15px;
}
body.poetry-search-results #search_results #search_results__list .row {
  padding-bottom: 0;
}
body.poetry-search-results #search_results #search_results__list .section__horizontal_line {
  padding-bottom: 0px;
}
body.poetry-search-results #search_results #search_results__list article {
  margin-top: 15px;
}
body.poetry-search-results #search_results #search_results__list article > div {
  margin-bottom: 15px;
}

/* Search - end */
/* example of this is on about of poetry */
.section__numbers {
  padding-bottom: 35px !important;
}
.section__numbers .numbers__wrapper {
  margin: 0 auto;
}
.section__numbers h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3.11px;
  line-height: 14px;
  padding: 25px 0 30px 0;
  display: block;
  text-transform: uppercase;
}
.section__numbers .numbers {
  width: 100%;
}
.section__numbers .numbers .numbers__element {
  text-align: center;
}
.section__numbers .numbers .numbers__element .numbers__number {
  font-family: "IBM Plex Serif", serif;
  font-size: 80px;
  line-height: 90px;
}
.section__numbers .numbers .numbers__element .numbers__description {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}

/* for demonstrative purposes only */
#gd .row > div {
  background: yellow;
  border: 1px solid #333;
}
#gd .row > div .row > div {
  background: orange;
}
#gd .row > div .row > div .row > div {
  background: red;
}
#gd .middle {
  width: 3px;
  height: 50px;
  background: black;
  margin: 0 auto;
}

/* MOVE THIS TO LANDING PAGE OF POETRY */
#poetry_slider-horizontal_line {
  text-align: center;
  width: 100%;
  margin: 50px 0;
  background-image: url("/img/assets/horizontal_line.svg");
  background-position: center center;
  background-repeat: repeat-x;
  height: 50px;
  /*
  position: relative;
  left: 10px;
  */
}
#poetry_slider-horizontal_line img#mouse_icon {
  position: relative;
  left: 2px;
  top: -8px;
}

#poetry-slider__wrapper {
  overflow-x: hidden;
  /* to stop wingling of touch on gallery on mobile because of overflown buttons */
  /* buttons on slider on poetry landing */
  /*
  .slider-button {
    display: flex;
    align-items: center;

    //this is overwritten in jquery
  }
  */
  /*
  #button-next__wrapper {
    justify-content: flex-start;
    padding-left: 10px;
    position: relative;
  }

  #button-prev__wrapper {
    justify-content: flex-end;
    padding-right: 10px;
    position: relative;
  }
  */
}
#poetry-slider__wrapper .slider-button {
  cursor: pointer;
  height: 42px;
  width: 42px;
  line-height: 42px;
  border-radius: 50%;
  background: white;
  position: absolute;
  margin-top: -21px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  z-index: 77;
}
#poetry-slider__wrapper .slider-button img {
  position: relative;
  top: 6px;
}
#poetry-slider__wrapper #button-prev {
  text-align: right;
}
#poetry-slider__wrapper #button-prev img {
  margin-right: 13px;
}
#poetry-slider__wrapper #button-next {
  text-align: left;
}
#poetry-slider__wrapper #button-next img {
  margin-left: 13px;
}
#poetry-slider__wrapper #poetry-slider .item .slider-item__counter {
  width: 100%;
  text-align: right;
  color: #2ba19f;
  background: -webkit-linear-gradient(left, #5C5D40, #2AA4A3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-family: "IBM Plex Serif", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 32px;
}
#poetry-slider__wrapper #poetry-slider .item .slider-item__description {
  width: 74.0534521158%;
  margin: 0 auto;
}
#poetry-slider__wrapper #poetry-slider .item .slider-item__description h2 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
  margin-bottom: 42px;
}
#poetry-slider__wrapper #poetry-slider .item .slider-item__description a {
  border-bottom: 1px solid #f06942;
  font-size: 14px;
  line-height: 22px;
  display: inline-block;
  text-transform: uppercase;
  font-style: normal;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fa-description {
  display: none !important;
}

#mobile-search__wrapper {
  height: 40px;
  padding: 3px;
  background: #f2f2f2;
  border-radius: 20px;
  padding-left: 30px;
  box-sizing: border-box;
  margin-top: 32px;
  margin-bottom: 27px;
  display: flex;
}
#mobile-search__wrapper input {
  border: none;
  background: none;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  color: #979797;
  line-height: 24px;
  /* was 32px, looks better on safari */
  width: 100%;
}
#mobile-search__wrapper button {
  height: 34px;
  width: 45px;
  border-radius: 17px;
  background: #f06942;
  text-align: center;
  overflow: visible;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  -webkit-appearance: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
#mobile-search__wrapper button:hover {
  background: #C3542F;
}

/*

How to set the width of the content (container)
Width of content  = #close-up . width() - 2xpadding (2x40px)

 */
/* special overrides - do it better */
/* mobile version with body.mobile */
.show-mobile {
  display: none !important;
}

.hide-mobile {
  display: block !important;
}

@media (max-width: 767.98px) {
  body.review #header #header__logo img {
    width: 400px;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .show-mobile {
    display: block !important;
  }

  .hide-mobile {
    display: none !important;
  }

  /* remove roundnes in safari */
  textarea,
input[type=text],
input[type=button],
input[type=submit] {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0;
    background: transparent !important;
  }

  body.review {
    /*
    &.review-article-show #main {
      margin-top: ($mobile-margin - 10px);
    }

    &.review-content #main {
      margin-top: ($mobile-margin - 25px);
    }
    */
    /*
    & {
      margin-top: 40px;
    }

    #main {
      margin-top: $menu-mobile-height;
    }

    &.review-landing {
      margin-top: 88px; // $menu-mobile-height+40px;
    }
    */
    /* reposition the tag and date */
    /*
    article.loyal {
      padding-bottom: 40px;
    }
    */
  }
  body.review #header-mobile {
    /*
    position: fixed;
    top: 0;
    left: 0;

    z-index: 9999;
    background: $white;
    width: 100%;

    height: $menu-mobile-height;
    display: flex;
    align-items: center;
    justify-content: center;
    */
  }
  body.review #header-mobile #header-mobile__logo {
    width: 100%;
    text-align: center;
  }
  body.review #header-mobile #header-mobile__logo img {
    /*
    width: 200px;
    height: auto;
    position: relative;
    top: 15px;
    */
  }
  body.review #header-mobile #header-mobile__menu_button {
    position: absolute;
    right: 15px;
    /* instead of 0 for the padding */
    top: 1px;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    -webkit-appearance: none;
    background: transparent !important;
  }
  body.review #header-mobile #header-mobile__menu_button img {
    width: 22px;
  }
  body.review #menu-mobile {
    /*
    #menu-mobile__container {
      padding-top: 30px;
    }
    */
    width: 100%;
    z-index: 9999;
    /*
    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {

        &.active > a {
          color: $orange;
        }

        @include sans;
        font-weight: $wmedium;
        font-size: 20px;
        text-align: center;

        ul {
          li {
            &.active a {
              color: $orange;
            }

            font-weight: $wbold;
            font-size: 14px;
            letter-spacing: 3.11px;
            line-height: 40px;
            text-transform: uppercase;
          }

          padding-bottom: 30px;
        }
      }
    }
    */
  }
  body.review #close-up {
    border-left: none;
    border-right: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  body.review #close-up img.eye {
    margin-left: -23px;
    top: -11px;
    height: 22px;
    width: auto;
    /* cca 46px */
  }
  body.review #close-up h3 {
    font-size: 26px;
    line-height: 32px;
    padding: 20px 0 20px 0;
  }
  body.review #close-up h3.close-up__theme {
    font-size: 56px;
    line-height: 68px;
  }
  body.review #close-up #featured-news .article__featured_big {
    padding-bottom: 40px;
  }
  body.review #close-up #featured-news h2 {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 800;
  }
  body.review #close-up #featured-news h2 span {
    color: #f06942;
    padding: 0 5px;
  }
  body.review #close-up #featured-news h3 {
    font-size: 26px;
    line-height: 32px;
    padding: 15px 0 20px 0;
  }
  body.review #close-up #featured-news p {
    font-size: 18px;
    text-align: center;
    line-height: 24px;
  }
  body.review #close-up #featured-news .article__header {
    position: relative;
  }
  body.review #close-up #featured-news .article__header .article__tag {
    position: absolute;
    left: 0;
  }
  body.review #close-up #featured-news .article__header .article__date {
    position: absolute;
    right: 0;
    display: block;
  }
  body.review #close-up #featured-news .article__author {
    font-size: 16px;
    margin-top: 22px;
  }
  body.review #close-up #featured-articles {
    /*
    .article__author {
      padding-bottom: 40px;
    }
    */
  }
  body.review #close-up #featured-articles h3 {
    font-size: 22px;
    line-height: 32px;
    padding: 20px 0 10px 0;
    margin: 0;
  }
  body.review #close-up #featured-articles p {
    font-size: 14px;
    line-height: 24px;
  }
  body.review .article__horizontal .article__header {
    padding: 0;
  }
  body.review .article__horizontal .article__header .article__tag {
    position: absolute;
    top: 0;
    left: 0;
  }
  body.review .article__horizontal .article__header .article__date {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  body.review #section__author #section__author__name {
    height: 115px;
  }
  body.review #section__author #section__author__name h1 {
    font-size: 28px;
    line-height: 32px;
    padding: 0;
  }
  body.review #section__author #author-image__big {
    width: 160px;
    height: 160px;
  }
  body.review #footer ul#footer-menu li {
    display: block;
    line-height: 45px;
  }
}
body.poetry-search-results article.article .bubble-photo figure img, body.review-search-results article.article .bubble-photo figure img {
  overflow: inherit;
  height: 220px !important;
  padding-top: inherit;
}

/* special cases for bootstrap */
/* based on: https://stackoverflow.com/questions/32545506/bootstrap-4-how-to-use-media-query-mixin */
/* lines on poets/translators list - start */
@media (max-width: 575.98px) {
  body.review #footer #footer-bottom .footer--right {
    max-height: 30px;
  }
}
/* lines on poets/translators list - end */
/* text and titles on content pages - start */
@media (max-width: 575.98px) {
  #section__authors-list ol.more-authors > li ol li {
    font-size: 18px;
    line-height: 56px;
  }

  #section__authors-list ol.more-authors > li h4 {
    font-size: 32px;
    line-height: 56px;
    text-align: center;
  }

  #close-up {
    padding-left: 15px;
    padding-right: 15px;
    border-left: 0;
    border-right: 0;
  }
}
@media (max-width: 767.98px) {
  #header-fixed {
    display: none !important;
  }
}
/* fix for margins of reponsive articles due to different stacking (4 in row, 2 in row, 1 in row) - start */
@media (max-width: 1419.98px) {
  #close-up .article__featured {
    margin-bottom: 30px;
  }
}
/* except last two from md - lg */
@media (min-width: 768px) and (max-width: 1419.98px) {
  #close-up .article__featured:nth-last-of-type(-n+2) {
    margin-bottom: 0px;
  }
}
/*  except last form sm */
@media (max-width: 767.98px) {
  #close-up .article__featured:last-child {
    margin-bottom: 0px;
  }
}
/* fix for margins of reponsive articles due to different stacking (4 in row, 2 in row, 1 in row) - end */
/* fix for royals on the first page - start */
@media (min-width: 768px) and (max-width: 991.98px) {
  article.loyal .loyal__photo figure, article.loyal .loyal__photo figure img {
    height: 130px !important;
    width: 130px !important;
  }

  article.loyal .loyal__content .loyal__name {
    height: 92px !important;
  }
}
@media (min-width: 992px) {
  article.loyal .loyal__content .loyal__description {
    margin-top: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  article.loyal .loyal__content .loyal__name {
    display: inline-block;
    padding-top: 15px;
  }

  /* weird quirk in design */
  article.loyal .loyal__content .loyal__name h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 32px;
  }
}
/* fix for royals on the first page - end */
/* position all authors in lists on bottom - start */
@media (min-width: 1420px) {
  ol li article.article .article__author {
    display: block;
    position: absolute;
    bottom: 0px;
  }
}
/* position all authors in lists on bottom - end */
/* single article 100% - start */
@media (max-width: 991.98px) {
  #single_article .single-article__body .single-article__content p, #single_article .single-article__body .single-article__content iframe {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
/* single article 100% - end */
/* square photos on author on mobile - start */
@media (max-width: 767.98px) {
  #single_article #single-article__author__news-list .single-article__author ol li .container .article__photo figure {
    width: 100%;
    height: auto;
  }
  #single_article #single-article__author__news-list .single-article__author ol li .container .article__photo figure img {
    overflow: hidden;
    height: 0 !important;
    padding-top: 100%;
  }

  body.review #single-article__author__news-list .article__horizontal .article__header .article__tag {
    position: inherit;
  }

  body.review #single-article__author__news-list .article__horizontal .article__header .article__date {
    position: inherit;
    display: inline-block !important;
  }
}
/* square photos on author on mobile - end */
/* center "more from author" on mobile - start */
@media (max-width: 767.98px) {
  .all-from-the-author-link-wrapper {
    text-align: center;
  }

  /* center "more from author" on mobile - end */
}
/* forms resize - start */
@media (max-width: 991.98px) {
  #content input, #content textarea {
    width: 100%;
  }
}
/* forms resize - end */
/* if 3 lines for jacqueline on authors ... - start */
/*
@include media-breakpoint-down(md) {
  body.review #section__author .content #section__author__name {
    height: auto;

    h1 {
      padding-top: 30px;
      padding-bottom: 30px;
    }
  }
}
*/
/* if 3 lines for jacqueline on authors ... - end */
/* fix texts on article details - start */
@media (max-width: 991.98px) {
  #single_article #single-article__header h2 {
    font-size: 42px;
    line-height: 48px;
  }

  #single_article #single-article__header h3 {
    font-size: 32px;
  }

  #single_article #single-article__header p {
    font-size: 20px;
    line-height: 32px;
  }

  #single_article .single-article__body .single-article__content p {
    font-size: 18px;
    line-height: 32px;
  }
  #single_article .single-article__body .single-article__content p.dropcap, #single_article .single-article__body .single-article__content p:first-child:first-letter {
    /* at font size 18px and line height 40px */
    font-family: IBMPlexSerif;
    font-size: 106px;
    color: #000;
    letter-spacing: 0;
    line-height: 96px;
    float: left;
    padding-right: 5px;
    /*
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px
    */
  }

  #single_article .single-article__author h3 {
    font-size: 14px;
    letter-spacing: 3.11px;
    line-height: 40px;
  }

  #single_article .single-article__author h4 {
    font-size: 28px;
    line-height: 32px;
  }

  #single_article .single-article__author .single-article__author__description {
    font-size: 16px;
    line-height: 32px;
  }
}
/* fix texts on article details - end */
/* make photos square on mobile on the author - start */
/* problem with bootstrap grid */
@media (max-width: 991.98px) {
  #single_article #single-article__author__news-list ol li article figure,
#single_article .single-article__author ol li .container .article__photo figure {
    width: 86px;
    height: 86px;
  }
  #single_article #single-article__author__news-list ol li article figure img,
#single_article .single-article__author ol li .container .article__photo figure img {
    overflow: hidden;
    height: 0 !important;
    padding-top: 100%;
  }

  article.article.article__horizontal.article__horizontal--compact_bottom .article__content {
    width: calc(100% - 90px);
  }
}
/* make photos square on mobile on the author - end */
/* text and titles on content pages - start */
@media (max-width: 767.98px) {
  #content button {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  #content {
    /*
    h1 {
      font-size: 42px;
      line-height: 48px;
    }

    h2 {
      font-size: 28px;
      line-height: 32px;
    }
    */
  }
  #content p {
    font-size: 18px;
    line-height: 32px;
  }
  #content p a {
    text-decoration: underline;
    text-decoration-color: #f06942;
  }

  #search_results #search_form #search_form--input button {
    padding: 0 18px;
  }
}
#page__poet.shine-1 #poem_list li.opened {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FF3800 100%);
}

#page__poet.shine-2 #poem_list li.opened {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(179, 0, 255, 0.73) 100%);
}

#page__poet.shine-3 #poem_list li.opened {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #265C5A 100%);
}

#page__poet.shine-4 #poem_list li.opened {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 135, 0, 0.77) 100%);
}

#page__poet .section__poet_description .poet_description p a {
  font-family: "IBM Plex Serif", serif;
  font-size: 18px;
  line-height: 40px;
  color: #000 !important;
}

.poem .poem-credits {
  display: block;
  margin-top: 50px;
}

.poem_switcher__wrapper {
  margin-top: 25px;
  margin-bottom: 25px;
}
.poem_switcher__wrapper .poem_switcher {
  height: 40px;
  width: 100%;
  background: white;
  border-radius: 20px;
  clear: both;
}
.poem_switcher__wrapper .poem_switcher button {
  line-height: 40px;
  width: 49.5%;
  display: inline-block;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  -webkit-appearance: none;
  background: transparent;
  height: 40px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 3px;
  text-align: center;
}
.poem_switcher__wrapper .poem_switcher button.active {
  background-image: url("/img/assets/triangle_up-black.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
}
.poem_switcher__wrapper .poem_switcher span {
  display: inline-block;
  height: 20px;
  position: relative;
  top: 5px;
  width: 1%;
  border-right: 1px solid #989898;
}

/* page margins for mobile version - start */
/*
@include media-breakpoint-down(sm) {
  body.poetry {
    $mobile-margin: ($poetry-menu-mobile-height + 14px);

    #main {
      margin-top: $mobile-margin;
    }

    //special cases for pages
    &.poetry-landing #main {
      margin-top: 73px;
    }


    &.poetry-poet-list, &.poetry-translator-list {
      #main {
        margin-top: 52px;
      }
    }

    &.poetry-poet-show, &.poetry-translator-show {
      #main {
        margin-top: 73px;
      }
    }
  }
}
*/
/* page margins for mobile version - end */
/* do not color orange on hover on poetry on lists - the green background is more than enough - end */
/* both photos side-by-side on festival - start */
body.poetry .festival_presentation_images figure {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  width: 50%;
  display: inline-block;
}
body.poetry .festival_presentation_images figure img {
  visibility: hidden;
  width: 100%;
  height: auto;
}
body.poetry .festival_presentation_images figure figcaption {
  display: none;
}
body.poetry .festival_presentation_images figure img {
  overflow: hidden;
  height: 0 !important;
  padding-top: 56.25%;
}

/* both photos side-by-side on festival - end */
/* fix for centering poetry menu on tablets - start */
/* fix for centering poetry menu on tablets - end */
/* fix footer menu on mobile - start */
/* fix footer menu on mobile - end */
/* text fixes for smaller screens - mobile */
@media (max-width: 991.98px) {
  article.article.article__horizontal.article__horizontal--poetry_festival h3 {
    font-size: 28px;
    line-height: 32px;
  }

  #page__poet #poem_list li .section__poet_poem__title h3 {
    font-size: 20px;
    line-height: 24px;
  }
}
/* text fixes for smaller screens - mobile */
/* fix of new line for organizers on mobile for festival details - start */
@media (max-width: 575.98px) {
  #content.content--poetry_festival .content__organizer {
    text-align: center;
    width: 100%;
  }
  #content.content--poetry_festival .content__organizer .content__organizer__by {
    display: block;
    float: none;
    text-align: center;
    height: auto;
    overflow: auto;
    width: 100%;
    /*
    > a, > span {
      float: none;
    }
    */
    margin-bottom: 20px;
  }
  #content.content--poetry_festival .content__organizer .content__organizer__official {
    float: none;
    text-align: center;
    height: auto;
    overflow: auto;
    clear: both;
  }
}
/* fix of new line for organizers on mobile for festival details - start */
/* titles of poems in new line on smaller screens - start */
@media (max-width: 991.98px) {
  .section__poet_poem__title__english, section__poet_poem__title__original {
    display: block;
  }
}
/* titles of poems in new line on smaller screens - end */
/* display of poets / list of poems on smaller screens - start */
@media (max-width: 767.98px) {
  #page__poet #poem_list li .poem_switcher__wrapper {
    margin-top: 0px;
    margin-bottom: 25px;
  }

  #page__poet #poem_list li .section__poet_poem__title {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /*
  #content.content--poetry_article h2 {
    font-size: 42px;
    line-height: 48px;
  }
  */
  #content.content--poetry_article .content__content p {
    font-size: 18px;
    line-height: 32px;
  }
  #content.content--poetry_article .content__content p.dropcap, #content.content--poetry_article .content__content p:first-child:first-letter {
    /* at font size 18px and line height 40px */
    font-family: IBMPlexSerif;
    font-size: 106px;
    color: #000;
    letter-spacing: 0;
    line-height: 96px;
    float: left;
    padding-right: 5px;
    /*
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px
    */
  }
}
/*
@include media-breakpoint-down(sm) {
  #page__poet #poet__title h1 {
    font-size: 48px;
    line-height: 48px;
  }

  #page__poet #poet__title {
    margin-top: -20px;
    padding-bottom: 40px;
  }

  #page__poet #poet__title h2 {
    font-size: 14px;
    line-height: 16px;
  }

  #page__poet .section__poet_description .poet_description p {
    font-size: 16px;
    line-height: 24px;
  }
}
*/
/* display of list of poems on smaller screens - end */
/* both photos side-by-side on festival - on mobile stacked on top - start */
@media (max-width: 575.98px) {
  body.poetry .festival_presentation_images figure {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    display: block;
  }
  body.poetry .festival_presentation_images figure img {
    visibility: hidden;
    width: 100%;
    height: auto;
  }
  body.poetry .festival_presentation_images figure figcaption {
    display: none;
  }
  body.poetry .festival_presentation_images figure img {
    overflow: hidden;
    height: 0 !important;
    padding-top: 56.25%;
  }
}
/* both photos side-by-side on festival - on mobile stacked on top - end */
/* booklet - break - start */
@media (max-width: 991.98px) {
  #page__poet #poet_booklet {
    height: 72px;
    /* 46 + 2px for border */
    line-height: 82px;
    border-radius: 36px;
  }
  #page__poet #poet_booklet .bubble-photo {
    top: 11px;
  }
  #page__poet #poet_booklet .poet_booklet__text {
    position: relative;
    top: 8px;
    padding: 0 30px;
    line-height: 24px;
    text-align: left;
  }
  #page__poet #poet_booklet .poet_booklet__icon img {
    top: -4px;
  }
}
/* booklet - break - end */
/* lines on poets/translators list - start */
@media (max-width: 991.98px) {
  #section__people-list ol.people li h3 {
    font-size: 20px;
    line-height: 24px;
  }

  #section__people-list ol.people li h4 {
    font-size: 14px;
    line-height: 16px;
    margin-top: 4px;
  }
}
/* lines on poets/translators list - end */
body.review #free_ebook_copy {
  /*
  #subscriber {
    > div {
      margin-bottom: 30px;
    }
  }

  strong {
    font-weight: $wbold;
    @include serif;
    font-size: 18px;
    line-height: 28px;
  }

  input, textarea {
    border: 1px solid transparent;
    background: #F2F2F2 !important;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
    width: 100%;
  }

  #download-ebook-button-wrapper {
    text-align: center;
    width: 100%;

    #download-ebook-button {
      display: inline-block;
    }
  }

  #download-ebook-button, button, input[type="submit"] {
    background: #f06942;
    color: $white;
    height: 40px;
    line-height: 40px;
    padding: 0 40px;
    border-radius: 20px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 3.11px;
    text-align: center;
    text-transform: uppercase;
    margin-left: auto;
    margin-right: auto;
  }

  label {
    display: block;
  }

  p {
    margin: 15px 0 !important;
  }
   */
  /*&.has-error {
    input, textarea {
      border: 1px solid #FF001F;
    }*/
  /* error messages */
  /*}*/
}
body.review #free_ebook_copy label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  line-height: 32px;
}
body.review #free_ebook_copy label[for=subscriber_newsletter] {
  display: inline;
  font-weight: normal;
}
body.review #free_ebook_copy #subscriber_newsletter {
  float: left;
}
body.review #free_ebook_copy input, body.review #free_ebook_copy textarea {
  border: 1px solid rgba(151, 151, 151, 0.52);
  background: #FFF !important;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  width: 100%;
  border-radius: 9999px;
  padding: 5px 15px;
  margin-bottom: 20px;
}
body.review #free_ebook_copy ul {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  color: #FF001F;
  letter-spacing: 0;
  line-height: 24px;
  list-style: none;
}
body.review #free_ebook_copy ul + input, body.review #free_ebook_copy ul + textarea {
  border: 1px solid #FF001F;
}

.article__title {
  font-size: 26px;
  line-height: 32px;
}
.article__title.article__title--big {
  font-size: 42px;
  line-height: 56px;
}

.content__content--pbreaks p {
  padding-bottom: 40px;
}
.content__content--pbreaks p:last-child {
  padding-bottom: 0;
}

.article_content--universal p {
  display: block;
  width: 77.562642369%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.article_content--universal object {
  width: 100% !important;
}
.article_content--universal figure {
  width: 100% !important;
}
.article_content--universal figure img {
  width: 100% !important;
  height: auto !important;
}
.article_content--universal p {
  font-size: 18px;
  line-height: 40px;
  font-family: "IBM Plex Serif", serif;
  margin: 32px 0;
  text-align: left;
}
.article_content--universal p.dropcap, .article_content--universal p:first-child:first-letter {
  /* at font size 18px and line height 40px */
  font-family: IBMPlexSerif !important;
  font-size: 130px;
  color: #000;
  letter-spacing: 0;
  line-height: 120px;
  float: left;
  padding-right: 8px;
}
.article_content--universal.single-article__content--video__content p {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  line-height: 32px;
}

.quote-bubble--shine-1 {
  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #FF3800 100%);
}
.quote-bubble--shine-2 {
  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(179, 0, 255, 0.73) 100%);
}
.quote-bubble--shine-3 {
  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #265C5A 100%);
}
.quote-bubble--shine-4 {
  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 135, 0, 0.77) 100%);
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.swiper-holder {
  width: 100%;
  overflow: hidden;
}
.swiper-holder .swiper-holder__container {
  position: relative;
  width: calc(100% - 2.5rem);
  margin: 0 auto;
}
.swiper-holder .swiper-button-custom-prev, .swiper-holder .swiper-button-custom-next {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border: none;
  border: 6px transparent solid;
  box-sizing: content-box;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: black;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  /* when swiper does no have enough sliders, it hides the navigation */
}
.swiper-holder .swiper-button-custom-prev:hover, .swiper-holder .swiper-button-custom-next:hover {
  background: #F26A43;
}
.swiper-holder .swiper-button-custom-prev.swiper-button-disabled, .swiper-holder .swiper-button-custom-next.swiper-button-disabled {
  background: #A1A1A1;
}
.swiper-holder .swiper-button-custom-prev.swiper-button-lock, .swiper-holder .swiper-button-custom-next.swiper-button-lock {
  display: none !important;
}
.swiper-holder .swiper-button-custom-next {
  right: -20px;
  left: auto;
}
.swiper-holder .swiper-button-custom-prev {
  right: auto;
  left: -20px;
}
.swiper-holder .swiper-pagination {
  position: static;
  padding-bottom: 32px;
  padding-top: 64px;
}
.swiper-holder .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #F4693B !important;
}
.swiper-holder .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  background: #AAA;
  height: 13px !important;
  width: 13px !important;
}