@import "mixins";

/* default styles */

.visually-hidden {
  @include element-invisible();
}
.flexbox {
  @include flexbox();
}
a.tabledrag-handle .handle {
  box-sizing: content-box;
}
.hidden,
[hidden="hidden"] {
  display: none !important;
}

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

html {
  font-size: 10px;
  height: 100%;
}

body {
  font-size: 1.6rem;
  font-family: 'Adobe Garamond Pro';
  color: #000;
  line-height: 1.5em;
  height: 100%;
  &.tabfocus {
    *:focus {
      outline: 2px solid #83bded !important;
    }
    input[type="checkbox"],
    input[type="radio"] {
      &:focus {
        & + label {
          outline: 2px solid #83bded !important;
        }
      }
    }
  }
}

.font-bodoni {
  font-family: 'Bodoni TM Condensed', 'Arial';
}

.gray-block {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: $light-gray;
  border: 1px solid $border;
  border-left: 0;
  border-right: 0;
}

.zebra-row {
  padding: 1rem;
  border-top: 1px solid $border;
  &:nth-child(even) {
    background-color: $light-gray;
  }
}
.zebra-row2 {
  padding: 1rem;
  border-bottom: 1px solid $border;
  &:nth-child(even) {
    background-color: $light-gray;
  }
}
.nozebra {
  padding: 0;
  border: none;
  &:nth-child(odd),
  &:nth-child(even) {
    background: none;
  }
}
.image-list-item {
  width: calc(25% - 1rem);
  padding: 1rem;
  margin: 0.5rem;
  line-height: 0;
  @extend .flexbox;
  align-items: center;
  justify-content: center;
  background: $light-gray;
  box-shadow: inset 0 0 1px;
  img {
    line-height: 1;
  }
}
.link-hover-style {
  background: linear-gradient(to top, $brown 0%, $brown 100%);
  background-size: 100% 0;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s, color 0.3s;
  &:hover {
    background-size: 100% 100%;
    color: #fff;
    text-decoration: none;
  }
}
.btn-hover-style {
  background: linear-gradient(to top, #fff 0%, #fff 100%);
  background-size: 100% 0;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s, color 0.3s;
  &:hover {
    background-size: 100% 100%;
    color: $brown;
    text-decoration: none;
  }
}
.link-style2 {
  text-decoration: none;
  background: none;
  &:hover {
    text-decoration: underline;
    background: none;
    color: $gray;
  }
}
.icon-arrow-down {
  background-image: url('../images/arrow-down.svg');
}

.btn,
.button,
button,
input[type="button"],
input[type="submit"] {
  margin: 0.5rem 0.5rem 1rem 0;
}

.btn-style1 {
  color: $brown;
  padding: 0.5rem 2rem;
  border: 1px solid $brown;
  border-radius: 15px;
  display: inline-block;
  text-decoration: none;
  @extend .link-hover-style;
}
.btn-style2 {
  color: #fff;
  font-weight: bold;
  background-color: $light-brown;
  padding: 0.8rem 3rem;
  border: 1px solid $light-brown;
  border-radius: 0;
  display: inline-block;
  text-decoration: none;
  @extend .btn-hover-style;
}

.btn-nostyle {
  box-shadow: none;
  border: none;
  background: none;
  text-shadow: none;
}

.img-link {
  display: inline-block;
  &:hover {
    box-shadow: 0 0 5px #666;
  }
}


img {
  max-width: 100%;
  width: auto;
  height: auto;
}
iframe {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1;
  text-align: left;
}
h1, h2, h3 {
  @extend .font-bodoni;
}
h1 {
  font-size: 3.6em;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
h2 {
  font-size: 2.8em;
}
h3 {
  font-size: 2.2em;
}
h4 {
  font-size: 1.8em;
}
h5 {
  font-size: 1.5em;
}
h6 {
  font-size: 1em;
}
a, a:visited {
  color: $brown;
  text-decoration: underline;
  &:hover {
    color: $gray;
    text-decoration: underline;
  }
}
/* az igazi idezet stilus, ideiglenesen felulirva, kesobb szukseg lesz ra
blockquote {
  margin-left: 0;
  padding: 0 0 0 5rem;
  min-height: 6rem;
  position: relative;
  font-style: italic;
  color: $gray;
  &:before {
    content: "\0022";
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -2rem;
    font-size: 12rem;
    line-height: 1;
    color: $brown;
  }
}*/
blockquote {
  margin: 1.5em 3rem;
}
.space-lg {
  letter-spacing: 4px;
}
.upper {
  text-transform: uppercase;
}
.list-nostyle {
  li {
    padding-left: 0;
    margin: 0;
    list-style: none;
    &:before {
      display: none;
    }
  }
}
.close-x {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: inline-block;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border: none;
  background: none;
  overflow: hidden;
  z-index: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
  &:before,
  &:after {
    content: "";
    width: 36px;
    height: 3px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -18px;
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
  }
  &:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  &:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  &:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.3);
    &:before,
    &:after {
      -webkit-transition: transform 0.5s;
      transition: transform 0.5s;
    }
    &:before {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
    }
    &:after {
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
  }
}

p {
  margin: 1.5em 0;
  &.middle {
    text-align: center;
  }
}
input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.5rem;
}
.button,
button,
input[type="button"],
input[type="submit"] {
  @extend .btn;
}

.table-wrap {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  overflow: auto;
}
table {
  margin-bottom: 1.5em;
  border: 1px solid $border;
  border-bottom: 0;
  border-collapse: separate;
  tr {
    th {
      background: #eee;
      text-transform: uppercase;
    }
    th,
    td {
      padding: 1rem 2rem;
      border: none;
      border-left: 1px solid $border;
      border-bottom: 1px solid $border;
      &:first-child {
        border-left: 0;
      }
    }
  }
  tbody {
    tr {
      background-color: #fff;
      &:nth-child(odd) {
        background-color: $light-gray;
      }
    }
  }
}
input,
textarea,
select {
  width: 100%;
  padding: 1rem;
  background-color: #fff;
  border-color: #aaa;
  border-style: solid;
  border-width: 1px;
  line-height: normal;
  &:focus {
    border-color: $light-brown;
    box-shadow: 0 0 5px #aaa;
  }
}
input[type="radio"],
input[type="checkbox"],
input[type="date"],
input[type="time"],
input[type="button"],
input[type="submit"] {
  width: auto;
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  @extend .icon-arrow-down;
  background-position: right 1rem center;
  background-size: 1rem;
  background-repeat: no-repeat;
}

form {
  .form-item {
    label {
      display: block;
      font-weight: bold;
    }
  }
  .form-type-radio,
  .form-type-checkbox {
    label {
      display: inline;
      font-weight: normal;
    }
    .description {
      margin-left: 0;
    }
  }
  .form-type-datetime {
    .container-inline {
      width: 100%;
    }
  }
  .form-submit {
    @extend .btn-style2;
  }
  .form-disabled {
    color: $gray;
  }
  &.webform-submission-form {
    max-width: 50rem;
  }
}

ul.menu,
.breadcrumb {
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
.breadcrumb {
  padding-top: 0.7rem;
  font-size: 1.4rem;
  letter-spacing: 1px;
}
.pager {
  ul {
    li {
      a {
        padding: 0 5px;
      }
      &.is-active {
        a {
          background-color: $brown;
          color: #fff;
          text-decoration: none;
        }
      }
    }
  }
}

.menu-toggle {
  @extend .btn-nostyle;
  margin: 0;
  position: relative;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  span {
    display: block;
    text-indent: -200vw;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.6rem;
    margin-top: -0.3rem;
    background: $brown;
    transition: background-color 0.2s;
    transition-delay: 0.2s;
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: $brown;
      transition: margin-top 0.2s, transform 0.2s;
      transition-delay: 0.2s, 0s;
      transform-origin: center center;
    }
    &:before {
      margin-top: -1.2rem;
    }
    &:after {
      margin-top: 1.2rem;
    }
  }
}
.menu-toggle-x {
  span {
    background: none;
    transition-delay: 0s;
    &:before,
    &:after {
      margin-top: 0;
      transition: margin-top 0.2s, transform 0.2s;
      transition-delay: 0s, 0.2s;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}

.msg-highlighted {
  position: fixed;
  top: 5rem;
  left: -100%;
  right: -100%;
  margin: 0 auto;
  width: calc(100% - 4rem);
  max-width: 60rem;
  max-height: calc(100vh - 4rem);
  box-shadow: 0 28px 99px rgba(0,0,0,0.7);
  z-index: 10;
  overflow: auto;
  animation: msg-on 0.5s;
  .msg-close {
    display: inline-block;
  }
  &.closed {
    margin-top: -100vh;
    visibility: hidden;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    * {
      visibility: hidden;
    }
  }
}
.messages {
  padding: 2rem 6rem 2rem 4rem;
  border: none;
  box-shadow: none;
  background-position: 10px 1.5em;
  a {
    color: inherit;
    text-decoration: underline;
  }
  ul {
    @extend .list-nostyle;
    li {
      position: relative;
      padding-left: 2.5rem;
      line-height: 1.3em;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.5em;
        display: inline-block;
        width: 1.2rem;
        height: 3px;
        background-color: currentColor;
        border-radius: 10rem;
      }
    }
  }
  .msg-close {
    @extend .close-x;
    position: absolute;
    right: 2rem;
    top: 1em;
    width: 3rem;
    height: 3rem;
    display: none;
    &:before,
    &:after {
      width: 2rem;
      height: 2px;
      margin-left: -1rem;
      background-color: currentColor;
    }
    span {
      @extend .visually-hidden;
    }
  }
  &[role="alertdialog"] {
    @extend .msg-highlighted;
  }
}

#main-content {
  @extend .visually-hidden;
}

.node-preview-container {
  background: #fff;
  box-shadow: 0 0 5px #666;
}

.embjog-cim {
  text-transform: uppercase;
}
.cim-0 {
	font-weight: bold;
}
.cim-1,
.targyszo,
.law-keywords {
	font-style: italic;
}
.cim-2 {
	font-style: normal;
}
.libr-rarity {
	text-align: center;
	font-size: 14px;
}
.embjog-konyv,
.embjog-cikk,
.embjog-bek,
.embjog-pont {
	font-weight: normal;
}
.embjog-bek {
	text-decoration: underline;
	font-weight: normal;
}
.embjog-bek-kiemeles {
	font-weight: normal;
}
.embjog-pont {
	text-decoration: underline;
	font-weight: normal;
}

.view {
  .view-filters {
    @extend .gray-block;
    form {
      > .form--inline {
        @extend .flexbox;
        -webkit-align-items: center;
        align-items: center;
        flex-wrap: wrap;
      }
      .form-item {
        margin: 1rem 0.5rem;
        flex-grow: 1;
        label {
          display: block;
          float: none;
          font-weight: bold;
        }
        input,
        select {
          width: 100%;
        }
      }
      fieldset {
        padding: 0;
        border: none;
        @extend .flexbox;
        flex-wrap: wrap;
      }
      .form-actions {
        margin: 0 0.5rem;
        .button {
          margin: 1.5em 0 0 0;
        }
      }
    }
  }
  .view-content {
    .views-row {
      @extend .zebra-row;
    }
  }
  .view-footer {
    display: block
  }
}

.dialog-off-canvas-main-canvas {
  padding: 1.6rem 0;
}

.layout-container {
  > header {
    display: table;
    width: 100%;
    margin-bottom: 0;
    .default-img {
      height: 18rem;
      margin-right: 1rem;
      background: url('../images/default-header.png') no-repeat right bottom;
      background-size: auto 100%;
    }
  }
}
.region-logo-block {
  float: left;
  line-height: 0;
  position: relative;
  z-index: 2;
  & ~ div {
    margin-left: 24rem;
    padding-left: 0.5rem;
  }
  h1 {
    margin: 0;
  }
  .site-logo {
    display: inline-block;
    width: 24rem;
    margin-bottom: 2rem;
    padding: 0 1rem 1rem 1rem;
    img {
      width: 100%;
    }
    &:hover {
      box-shadow: none;
      background: url('../images/logo-brown.svg') no-repeat center top;
      background-size: 22rem;
      img {
        opacity: 0;
      }
    }
  }
}
.region-sitemenu {
  margin-bottom: 1rem;
  .block-menu {
    margin-top: -1rem;
    .menu-toggle {
      display: none;
    }
    ul.menu {
      @extend .flexbox;
      @extend .font-bodoni;
      font-size: 2.1rem;
      font-weight: normal;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 1;
      margin: 0;
      li {
        padding: 0 0.8rem;
        border-right: 1px solid $border;
        a {
          @extend .flexbox;
          -webkit-align-items: center;
          align-items: center;
          color: #000;
          background: none;
          height: 4.3rem;
          text-decoration: none;
          &:hover {
            color: $brown;
            text-decoration: underline;
          }
          &.is-active {
            color: $brown;
          }
        }
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          border-right: 0;
          padding-right: 0;
        }
      }
    }
  }
}
.region-header-img {
  height: 22rem;
  .block {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  & ~ .default-img {
    display: none;
  }
}
.region-thematic-block {
  .tematikus-blokk {
    @extend .flexbox;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 -0.8rem 0 -0.8rem;
    padding: 0;
    li {
      width: calc(25% - 2rem);
      min-width: 25rem;
      height: 28rem;
      margin: 0.8rem;
      padding: 1rem;
      border: 2px solid $border;
      list-style: none;
      a {
        @extend .font-bodoni;
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 4rem;
        line-height: 1em;
        color: #fff;
        text-shadow: 5px 3px 3px #000000;
        text-transform: uppercase;
        position: relative;
        > span {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1em;
          padding: 1rem;
          //transform: scale(1, 1.6);
          @extend .flexbox;
          -webkit-flex-flow: column;
          flex-flow: column;
          -webkit-justify-content: flex-end;
          justify-content: flex-end;
        }
        &:hover {
          -webkit-filter: grayscale(1);
          filter: grayscale(1);
        }
      }
      &.lent-kozep {
        a {
          > span {
            text-align: center;
          }
        }
      }
      &.lent-jobb {
        a {
          > span {
            text-align: right;
          }
        }
      }
      &.fent-bal {
        a {
          > span {
            bottom: auto;
            top: 0;
            text-align: left;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
          }
        }
      }
      &.fent-kozep {
        a {
          > span {
            bottom: auto;
            top: 0;
            text-align: center;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
          }
        }
      }
      &.fent-jobb {
        a {
          > span {
            bottom: auto;
            top: 0;
            text-align: right;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
          }
        }
      }
      &.tem01 {
        a {
          background: url('../images/a-kuriarol-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem02 {
        a {
          background: url('../images/joggyakorlat-egyesito-tev-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem03 {
        a {
          background: url('../images/hatarozatok-egyedi-ugyekben-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem04 {
        a {
          background: url('../images/kuriai-dontesek-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem05 {
        a {
          background: url('../images/sajto-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem06 {
        a {
          background: url('../images/kollegiumok-szakmai-anyagai-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem07 {
        a {
          background: url('../images/nemzetkozi-kapcs-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem08 {
        a {
          background: url('../images/unios-projektek-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem09 {
        a {
          background: url('../images/forum-cententiarum-curiae-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem10 {
        a {
          background: url('../images/gyakorlati-tudnivalok-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem11 {
        a {
          background: url('../images/kozerdeku-adatok-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem12 {
        a {
          background: url('../images/hasznos-oldalak-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem13 {
        a {
          background: url('../images/tanacsado-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem14 {
        a {
          background: url('../images/jurisdiction-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem15 {
        a {
          background: url('../images/organisation-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem16 {
        a {
          background: url('../images/strategy-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem17 {
        a {
          background: url('../images/photo-c.png') no-repeat center center;
          background-size: cover;
        }
      }
      &.tem18 {
        a {
          background: url('../images/yearbook-c.png') no-repeat center center;
          background-size: cover;
        }
      }
    }
  }
}
.region-content {
  a:not(.img-link) {
    @extend .link-hover-style;
  }
  .breadcrumb {
    a {
      @extend .link-style2;
    }
  }
  ul {
    ul {
      list-style-type: disc;
      ul {
        list-style-type: square;
      }
    }
  }
  ol {
    ol {
      list-style-type:lower-latin;
      ol {
        list-style-type:lower-roman;
        ol {
          list-style-type:upper-latin;
          ol {
            list-style-type:upper-roman;
          }
        }
      }
    }
    &.lower-roman {
      list-style-type: lower-roman;
    }
    &.upper-roman {
      list-style-type: upper-roman;
    }
    &.lower-latin {
      list-style-type: lower-latin;
    }
    &.upper-latin {
      list-style-type: upper-latin;
    }
    &.list-type-brackets {
      padding-left: 0;
			li {
        padding-left: 0;
        list-style: brackets;
        list-style-position: inside;
        > div, p {
          display: inline;
        }
        & + li {
          padding-top: 1em;
        }
			}
		}
  }
}
.region-footer {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  a:not(.img-link) {
    @extend .link-hover-style;
  }
  .block {
    .field--name-body {
      div {
        height: auto !important;
      }
    }
  }
}

.layout-sidebar-first {
  .block-menu {
    ul.menu {
      background-color: $cream;
      margin: 0;
      padding: 1.2rem 0 0 0.5rem;
      font-size: 1.8rem;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 2px;
      @extend .font-bodoni;
      li {
        padding: 0.6rem 0;
        border-top: 1px solid $border;
        display: block;
        a,
        span,
        button {
          display: block;
          width: 100%;
          background: none;
          box-shadow: none;
          border: none;
          padding: 0.6rem 0.5rem;
          margin: 0;
          color: #000;
          text-transform: uppercase;
          text-align: left;
          letter-spacing: 2px;
          &:hover {
            cursor: pointer;
            color: $brown;
            text-decoration: underline;
          }
          &.is-active {
            color: $brown;
          }
        }
        &.menu-item--active-trail {
          > a,
          > span,
          > button {
            color: $brown;
          }
        }
        &.menu-item--expanded {
          > ul.menu {
            display: none;
            li {
              a,
              span,
              button {
                position: relative;
                &:before {
                  content: "";
                  position: absolute;
                  top: 1.2rem;
                  display: inline-block;
                  width: 0.5rem;
                  height: 0.7rem;
                  border: 1px solid $border;
                  border-top: 0;
                  border-right: 0;
                  opacity: 0.8;
                }
              }
            }
          }
          &.is-open {
            > ul.menu {
              display: block;
            }
          }
        }
      }
    }
    > ul.menu {
      ul {
        li {
          > a,
          > span,
          > button {
            padding-left: 2rem;
            &:before {
              left: 0.5rem;
            }
          }
        }
        ul {
          li {
            > a,
            > span,
            > button {
              padding-left: 4rem;
              &:before {
                left: 2.5rem;
              }
            }
          }
          ul {
            li {
              > a,
              > span,
              > button {
                padding-left: 6rem;
                &:before {
                  left: 4.5rem;
                }
              }
            }
          }
        }
      }
    }
  }
  .menu--menu-oldalterkep {
    ul.menu {
      padding-top: 0;
      background-color: $brown1;
      li {
        border: none;
        a {
          &:hover,
          &.is-active {
            color: #fff;
          }
        }
      }
    }
  }
  .block[class*="search"] {
    text-align: center;
    background: $gray;
    padding: 1rem 0;
    form {
      padding-left: 1rem;
      padding-right: 1rem;
      > .form--inline {
        @extend .flexbox;
      }
      .form-item {
        margin: 0 0.5rem 0 0;
        flex-grow: 1;
        label {
          @extend .visually-hidden;
        }
        input {
          border: 1px solid #000;
          padding: 2px;
        }
      }
      .form-actions {
        margin: 0;
      }
      .form-submit {
        margin: 0;
        border: 1px solid #000;
        border-radius: 0;
        padding: 2px 4px;
        font-weight: normal;
        background: $border;
        color: #000;
        &:hover {
          background: $light-gray;
        }
      }
    }
  }
}

.paragraph {
  &[class*="paragraph--type--video"] {
    figure.youtube-container {
      margin: 1rem 0;
      line-height: 0;
    }
  }
}
.paragraph--type--hang-adatok {
  @extend .flexbox;
  align-items: center;
  > .field {
    margin-right: 1rem;
    a {
      @extend .link-style2;
    }
  }
  .field--name-field-hang-leirat {
    margin-right: 0;
    padding-top: 1.5em;
  }
  .field--name-field-media-audio-file {
    line-height: 0;
  }
}
.paragraph--type--video-adatok,
.paragraph--type--video-data {
  .field--name-field-video-leirat {
    margin-bottom: 1rem;
  }
  & + .paragraph {
  	margin-top: 2rem;
  }
}

.node {
  text-align: justify;
  .field--name-field-varos-tax,
  .field--name-field-city-tax {
    .field__items {
      .field__item {
        float: left;
        &:after {
          content: ",";
          padding-right: 3px;
        }
        &:last-child {
          &:after {
            display: none;
          }
        }
      }
    }
  }
  .field--name-field-image {
    @extend .flexbox;
    flex-wrap: wrap;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    > .field__label {
      width: 100%;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    > .field__items {
      @extend .flexbox;
      flex-wrap: wrap;
      width: 100%;
    }
    > .field__items > .field__item,
    > .field__item {
      @extend .image-list-item;
    }
  }
  .field--name-field-hang-adatok {
    > .field__item {
      @extend .zebra-row;
      padding: 2rem 1rem;
      &:first-child {
        border-top: none;
      }
    }
  }
  .field--name-field-video-adatok,
  .field--name-field-video-data {
  	> .field__item {
      @extend .zebra-row;
  	}
  }
  .field--name-field-fsc-adatok,
  .field--name-field-fsc-data {
    > .field__item {
      @extend .zebra-row;
    }
  }
}
.language-links {
  text-align: center;
  margin: 1rem 0;
  a {
    display: inline-block;
    margin: 0 2rem;
    width: 2.5rem;
    height: 1.7rem;
    text-indent: -200vw;
    overflow: hidden;
    &.hu {
      background: url('../images/magyar.jpg') no-repeat;
      background-size: 100%;
    }
    &.en {
      background: url('../images/angol.jpg') no-repeat;
      background-size: 100%;
    }
    &:hover {
      box-shadow: 0 0 5px #666;
    }
  }
}

.view {
  .view-grouping {
    @extend .gray-block;
    margin-top: 1rem;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    &:last-child {
      margin-bottom: 0;
    }
    .view-grouping-header {
      @extend .font-bodoni;
      font-size: 2.6rem;
      margin-bottom: 2rem;
      h2, h3 {
        font-size: clamp(3.8rem, 8vw, 5rem);
        margin-top: 0;
        time {
          font-size: 2.6rem;
        }
      }
    }
    .view-grouping-content {
      h3 {
        margin-top: 0;
        margin-bottom: 2rem;
        a {
          @extend .link-style2;
        }
      }
      .views-row {
        background: none;
        border: none;
        padding: 0;
      }
      .item-list {
        & + .item-list {
          margin-top: 4rem;
        }
      }
    }
  }
  .views-row {
    h2 {
      margin: 2rem 0;
    }
  }
}
.view-pp-jogertelmezes {
  .views-row {
    text-align: justify;
  }
}
.view-alkotmbr-hatok {
  .view-grouping {
    background: none;
    border: none;
    padding: 0;
    .view-grouping-content {
      .views-row {
        display: list-item;
        margin-left: 3rem;
        @extend .nozebra;
        .views-field-title {
          p {
            margin-top: 0;
            margin-bottom: 1rem;
          }
        }
        & + h3 {
          margin-top: 3rem;
        }
      }
    }
  }
}
.view-alt-ig-hirek {
  .views-row {
    h2 {
      font-size: 3.6rem;
    }
  }
}
.view-hirlevel {
  > .view-content {
    .views-row {
      .views-field-title {
        float: left;
        margin-right: 1rem;
      }
    }
  }
}
.view-hanganyagok5 {
  .view-grouping {
    .view-grouping-content {
      h3 {
        margin-top: 0;
        margin-bottom: 2rem;
        a {
          @extend .link-style2;
        }
      }
      .views-row {
        background: none;
        border: none;
        padding: 0;
        .views-field-field-hang-adatok {
          ul {
            margin: 0;
            padding: 0;
            li {
              @extend .zebra-row2;
              display: block;
              margin: 0;
              &:last-child {
                border-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}
.view-sajto-hanganyag,
.view-hanganyagok5,
.view-event-photos {
  .view-grouping {
    .view-grouping-header {
      h2 {
        margin-bottom: 2rem;
      }
    }
  }
}

.view-allami-projektek {
  .views-field-field-melleklet {
    ul {
      li {
        display: block;
        margin-left: 0;
      }
    }
  }
  .view-footer {
    display: inline-block;
    width: 100%;
    img {
      float: left;
      &:last-child {
        float: right;
        margin-top: 25px;
      }
    }
    br {
      display: none;
    }
  }
}
.view-projects-co-funded {
  .node--view-mode-teaser {
    img {
      margin: auto;
      display: block;
    }
  }
}

.slick {
  .slick__slider {
    .slick-dots {
      @extend .flexbox;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 50%;
      margin: 1rem auto;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.65);
      border-radius: 1.2rem;
      transform: translateX(-50%);
      li {
        margin: 6px;
        padding: 0;
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        button {
          display: inline-block;
          width: 1.8rem;
          height: 1.8rem;
          background: #000;
          border-radius: 100%;
          border: none;
          margin: 0;
          padding: 2px;
          text-indent: -200vw;
          overflow: hidden;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            margin: 2px;
            padding: 0;
            border-radius: 100%;
            border: 2px solid #fff;
            width: 1.4rem;
            height: 1.4rem;
            background-color: #000;
          }
          &:hover {
            background-color: #fff;
            &:before {
              background-color: $brown;
              border-color: $brown;
            }
          }
        }
        &.slick-active {
          button {
            &:before {
              background-color: #fff;
            }
          }
        }
      }
    }
  }
  .slick__arrow {
    display: none;
  }
  &[class*="slick--field-media-gallery-items"] {
    .slick__slide {
      @extend .flexbox;
      align-items: center;
      .slide__content {
        width: 100%;
        height: 100%;
        @extend .flexbox;
        flex-flow: column;
        .slide__media,
        > .media {
          height: 45rem;
          max-height: 45rem;
        }
        .slide__caption {
          color: #fff;
          padding: 1rem 0;
          text-align: center;
          line-height: 1;
        }
      }
      .media {
        @extend .flexbox;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
  &.slick--thumbnail {
    margin-top: 2rem;
    .slick__slide {
      img {
        border: 2px solid transparent;
        &:hover {
          cursor: pointer;
        }
      }
      &.slick-current {
        img {
          border-color: #fff;
        }
      }
    }
  }
  &.slick--view--frontpage-slideshow {
    background-color: #eee;
    padding: 0.5rem;
    position: relative;
    .slide__caption {
      position: absolute;
      top: auto;
      left: 5px;
      bottom: 5rem;
      width: 100%;
      padding: 0;
      .slide__link {
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 5px;
        color: #fff;
        font-size: clamp(2.6rem, 2.2vw, 3.2rem);
        font-weight: 100;
        line-height: 1.1;
        text-transform: uppercase;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        @extend .font-bodoni;
      }
      a {
        display: block;
        padding: 0.6rem;
        color: #fff;
        border-radius: 5px;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        &:hover {
          background-color: #000;
          color: $light-brown;
        }
      }
    }
    .media {
      @extend .flexbox;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 38rem;
      max-height: 38rem;
      .field,
      .field__item {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .slick__slide {
      position: relative;
      .slide__content {
        width: 100%;
        height: 100%;
        .slide__caption {
          left: 0;
        }
      }
    }
  }
}
.block-views-blockfrontpage-slideshow-block-1 {
  .view-frontpage-slideshow {
    > .contextual {
      display: none !important;
    }
    .slick__slide {
      .contextual {
        margin-top: 2rem;
      }
    }
  }
}

.media--type-gallery {
  &[class*="media--view-mode-slideshow"] {
    padding: 2rem;
    background: #222;
    border: 1px solid $border;
  }
	&[class*="media--view-mode-grid"] {
		.field--name-field-media-gallery-items {
      @extend .flexbox;
      flex-wrap: wrap;
			> .field__items {
				@extend .flexbox;
				flex-wrap: wrap;
				> .field__item {
					@extend .image-list-item;
          .field--name-name {
            word-break: break-all;
            line-height: 1;
            margin-top: 1rem;
          }
				}
			}
      > .field__item {
        @extend .image-list-item;
        .field--name-name {
          word-break: break-all;
          line-height: 1;
          margin-top: 1rem;
        }
      }
		}
	}
}

#colorbox {
  #cboxTitle {
    color: #000;
  }
}

div#sliding-popup {
  background: $brown;
  width: 100%;
  div, p, h2, label {
    color: #fff;
  }
  .eu-cookie-withdraw-tab {
    background-color: $brown;
    margin: 0;
    &:hover {
      background-color: $cream;
    }
  }
  .eu-cookie-compliance-banner {
    @extend .flexbox;
    -webkit-align-items: center;
    align-items: center;
    font-size: initial;
    font-weight: normal;
    padding: 1rem 2rem;
    .popup-content {
      max-width: none;
      @extend .flexbox;
      -webkit-flex-flow: column;
      flex-flow: column;
      padding-right: 1rem;
      position: relative;
      h2 {
        border: none;
        padding: 0;
        margin: 0 0 0.5rem 0;
        font-size: 2em;
      }
      p {
        margin: 0 0 0.5rem 0;
      }
      a {
        color: currentColor;
        text-decoration: underline;
      }
      #popup-text {
        max-width: none;
        margin-top: 1rem;
      }
      .eu-cookie-compliance-categories {
        padding-top: 1.5rem;
        .eu-cookie-compliance-category {
          display: inline-block;
          margin-right: 2rem;
          padding-bottom: 0.5rem;
        }
      }
    }
    .eu-cookie-compliance-buttons {
      margin: 1rem 0;
      max-width: 30rem;
      button {
        @extend .btn-nostyle;
        @extend .btn;
        @extend .font-bodoni;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 2rem;
        padding: 1rem;
        margin: 0 0 1rem 0;
        background: #fff;
        color: #000;
        &:last-child {
          margin: 0;
        }
        &:hover {
          background: $cream;
        }
      }
    }
    p {
      font-size: initial;
      font-weight: normal;
      color: currentColor;
    }
  }
}
.toolbar {
  button {
    margin: 0;
  }
}

/* nyitolap, regebbi hirek link */
.region-actual-block {
  p#actual {
    height: auto !important;
    padding: 3.4rem 0 !important;
    a {
      text-decoration: none;
      color: #fff;
      &:hover {
        color: $light-brown;
      }
    }
  }
}

body {
  &.topmenu-open {
    .menu-toggle {
      @extend .menu-toggle-x;
    }
  }
  &.path-frontpage {
    .layout-container {
      > header {
        margin-bottom: 2rem;
        .default-img {
          background: url("../images/top_header_bg.png") no-repeat right bottom;
          background-size: auto 100%;
        }
      }
      .region-logo-block {
        .site-logo {
          margin-bottom: 0;
        }
      }
    }
  }
  &.path-welcome {
    padding: 2rem;
    background-color: #091123;
    .dialog-off-canvas-main-canvas {
      @extend .flexbox;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      min-height: 100%;
    }
    .kuria-welcome {
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #fff;
      text-align: center;
      @extend .font-bodoni;
    }
    h1.title {
      margin: 0;
      text-align: center;
      a {
        display: block;
        padding-top: 50rem;
        margin: 0 0 2rem 0;
        font-size: 12rem;
        font-weight: normal;
        background: url('../images/welcome-img.png') no-repeat center top;
        background-size: auto 44rem;
        text-decoration: none;
        &:hover {
          color: $brown;
          text-decoration: underline;
        }
      }
    }
    #lat-text,
    #en-text,
    #hu-text {
      line-height: 1;
      margin: 0 0 1.5rem 0;
    }
    #lat-text {
      font-size: 5.6rem;
    }
    #hu-text,
    #en-text {
      font-size: 2.8rem;
    }
    #hu-text {
      color: $light-brown;
    }
    .links {
      margin: 3rem 0 1rem 0;
      font-size: 2.4rem;
      a {
        color: #fff;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
        &:first-child {
          margin-right: 5rem;
        }
      }
    }
  }
  &.maintenance-page {
    background: #fff;
    .dialog-off-canvas-main-canvas {
      display: block;
    }
    .layout-container {
      > header {
        text-align: center;
        padding: 2rem;
        img {
          width: 20rem;
        }
        &:after {
          display: none;
        }
      }
      > main {
        display: block;
        text-align: center;
        padding: 2rem;
      }
    }
    .name-and-slogan {
      @extend .visually-hidden;
    }
  }
  &.toolbar-horizontal {
    .messages {
      top: 9rem;
    }
  }
}

html {
  &[lang='en'] {
    .region-logo-block {
      .site-logo {
        background: url('../images/kuria-logo-en.png') no-repeat center top;
        background-size: 22rem;
        height: 24rem;
        img {
          @extend .visually-hidden;
        }
        &:hover {
          box-shadow: none;
          background: url('../images/kuria-logo-en-brown.png') no-repeat center top;
          background-size: 22rem;
        }
      }
    }
  }
}

/* responsive layout */
@import "responsive";