@font-face {
  font-family: "Merriweather-Regular";

  src: url("../fonts/Merriweather-Regular.svg#Merriweather-Regular")
      format("svg"),
    url("../fonts/Merriweather-Regular.ttf") format("truetype"),
    url("../fonts/Merriweather-Regular.woff") format("woff"),
    url("../fonts/Merriweather-Regular.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "Merriweather-LightItalic";

  src: url("../fonts/Merriweather-LightItalic.svg#Merriweather-LightItalic")
      format("svg"),
    url("../fonts/Merriweather-LightItalic.ttf") format("truetype"),
    url("../fonts/Merriweather-LightItalic.woff") format("woff"),
    url("../fonts/Merriweather-LightItalic.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "Merriweather-Light";

  src: url("../fonts/Merriweather-Light.svg#Merriweather-Light") format("svg"),
    url("../fonts/Merriweather-Light.ttf") format("truetype"),
    url("../fonts/Merriweather-Light.woff") format("woff"),
    url("../fonts/Merriweather-Light.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "Merriweather-Italic";

  src: url("../fonts/Merriweather-Italic.svg#Merriweather-Italic") format("svg"),
    url("../fonts/Merriweather-Italic.ttf") format("truetype"),
    url("../fonts/Merriweather-Italic.woff") format("woff"),
    url("../fonts/Merriweather-Italic.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "Merriweather-BoldItalic";

  src: url("../fonts/Merriweather-BoldItalic.svg#Merriweather-BoldItalic")
      format("svg"),
    url("../fonts/Merriweather-BoldItalic.ttf") format("truetype"),
    url("../fonts/Merriweather-BoldItalic.woff") format("woff"),
    url("../fonts/Merriweather-BoldItalic.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "Merriweather-Bold";

  src: url("../fonts/Merriweather-Bold.svg#Merriweather-Bold") format("svg"),
    url("../fonts/Merriweather-Bold.ttf") format("truetype"),
    url("../fonts/Merriweather-Bold.woff") format("woff"),
    url("../fonts/Merriweather-Bold.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "Merriweather-BlackItalic";

  src: url("../fonts/Merriweather-BlackItalic.svg#Merriweather-BlackItalic")
      format("svg"),
    url("../fonts/Merriweather-BlackItalic.ttf") format("truetype"),
    url("../fonts/Merriweather-BlackItalic.woff") format("woff"),
    url("../fonts/Merriweather-BlackItalic.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

@font-face {
  font-family: "Merriweather-Black";

  src: url("../fonts/Merriweather-Black.svg#Merriweather-Black") format("svg"),
    url("../fonts/Merriweather-Black.ttf") format("truetype"),
    url("../fonts/Merriweather-Black.woff") format("woff"),
    url("../fonts/Merriweather-Black.woff2") format("woff2");

  font-weight: normal;

  font-style: normal;
}

.is-hidden {
  display: none;
}

::-webkit-scrollbar {
  width: 14px;

  background-color: transparent;
}

::-webkit-scrollbar-track {
  width: 14px;

  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);

  background-clip: padding-box;

  border-radius: 9999px;

  background-color: #aaaaaa;
}

a {
  width: 2vw;
  text-decoration: none;
}

body {
  overflow-y: hidden;
  margin: 0vw;
}

html {
  width: 100%;
  height: auto;
  margin: 0px;
  left: 0px;
  background: #fff;
  overflow: overlay;
  outline: 0 !important;
  box-sizing: border-box;
}

.searchButton {
  display: none;
}

.header {
  width: 100%;

  height: 5vw;

  background-color: white;

  margin-bottom: 2vw;

  padding-right: 1vw;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;
}

.content {
  width: 100%;

  /*     height:auto; */

  min-height: 100%;

  padding-bottom: 3.5vw;

  position: relative;

  padding-right: 1vw;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;
}

.footer {
  width: 100%;
  height: 2.5vw;
  background-color: black;
  position: absolute;
  bottom: 0vw;
  color: white;
  font-size: 0.8vw;
  font-family: "Merriweather-Bold" !important;
  line-height: 2.5vw;
  padding-right: 1.5vw;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}

.mhlogo {
  width: 5vw;

  margin-left: 2vw;

  float: left;
}

.searchBar {
  width: 85%;

  border-radius: 0.5vw;

  border: 0vw;

  box-shadow: 0px 0px 2px 0px #999;

  float: left;

  height: 2.5vw;

  margin-left: 1vw;

  margin-top: 1.3vw;

  font-size: 1vw;

  font-family: "Merriweather-Bold" !important;

  text-align: right;

  padding-right: 2.5vw;

  background-image: url("../images/icons/search-171.png");

  background-repeat: no-repeat;

  background-size: 1.2vw;

  background-position: right;

  background-position-x: 99%;
}

input:focus {
  outline: 0vw;
}

/* CARDS */

.cardsdiv {
  margin: 0;

  grid-template-rows: 1fr auto;

  grid-auto-flow: column;

  display: block;

  margin-bottom: 1vw;

  margin-right: 0.5vw;

  break-inside: avoid;

  background: #fff;

  border: 1px solid #dedede;

  /*     box-shadow: 0px 0px 2px 0px #999;

    box-sizing: border-box; */

  border-radius: 0.5vw 0.5vw 0vw 0vw;

  overflow: hidden;

  font-family: "Merriweather-Bold" !important;

  position: relative;

  color: #333;
}

.pinnedContainer {
  width: 100%;

  font-size: 2vw;

  font-family: "Merriweather-Bold";

  height: 30vw;

  position: relative;

  text-align: center;

  margin-bottom: 2vw;
}

.cardsdivPinned {
  display: inline-block;

  margin-right: 2.5vw;

  margin-left: 2.5vw;

  text-align: center;

  width: 18vw;

  height: auto;

  background: #fff;

  border: 1px solid #dedede;

  border-radius: 0.5vw 0.5vw 0vw 0vw;

  overflow: hidden;

  font-family: "Merriweather-Bold" !important;

  position: relative;

  color: #333;
}

.cards {
  transition-duration: 0.5s;

  opacity: 1;

  column-count: 5;

  column-gap: 1vw;

  padding-left: 1.5vw;
}

/* CARDS END */

.searcherrorDiv {
  width: 100%;
  height: auto;
  display: none;
  text-align: center;
}

.searcherror {
  font-family: "Merriweather-Bold";
  font-size: 2vw;
}

.prevPics {
  width: 100% !important;

  height: auto;

  position: relative;
}

.prevTitle {
  font-size: 0.9vw;

  margin-top: 1vw;

  margin-bottom: 0.5vw;
}

.prevDesc {
  font-size: 0.7vw;

  font-family: "Merriweather-Light" !important;
}

.textBox {
  padding-left: 1vw;

  padding-right: 1vw;

  padding-bottom: 0.5vw;
}

.footerlinkek {
  width: auto;

  height: 2.5vw;

  float: right;
}

.copyright {
  margin-left: 1.5vw;
}

.typeBox {
  position: absolute;

  width: 10vw;

  text-align: right;

  bottom: 0vw;

  right: 0vw;

  height: 2vw;
}

.picsBox {
  position: relative;

  overflow: hidden;

  max-height: 13vw;
}

.typeIcon {
  width: 1.5vw;

  position: relative;

  float: right;

  padding-right: 0.5vw;

  -webkit-filter: invert(100%); /* Safari/Chrome */

  filter: invert(100%);
}

.socialIcon {
  margin-left: 0.5vw;

  width: 1.5vw;

  margin-top: 0.5vw;
}

.cikkNezet {
  opacity: 0;

  transition-duration: 0.5s;

  display: none;
}

.tagek {
  opacity: 0.5;

  font-size: 0.5vw;
}

@media screen and (max-width: 1000px) and (orientation: portrait) {
  .picsBox {
    max-height: 65vw;
  }

  .tagek {
    font-size: 1.5vw;
  }

  .cikkNezet {
    display: none;
  }

  .mhlogo {
    width: 20vw;

    float: left;

    position: relative;

    margin-right: 2vw;

    margin-left: 1.5vw;

    transition-duration: 1s;
  }

  .header {
    text-align: center;

    height: 20vw;
  }

  .searchBar {
    transition-duration: 1s;

    width: 57%;

    height: 10vw;

    margin-top: 5vw;

    font-size: 4vw;

    background-size: 5vw;

    background-position-x: 97%;

    padding-right: 8vw;
  }

  .searchForm {
    transition-duration: 1s;
    float: right;
    width: auto;
    height: auto;
  }

  .cardsdiv {
    margin-bottom: 5vw;
  }

  .cardsdivPinned {
    margin-bottom: 5vw;

    margin: 0;

    grid-template-rows: 1fr auto;

    grid-auto-flow: column;

    display: block;

    margin-bottom: 1vw;

    margin-right: 0.5vw;

    break-inside: avoid;

    background: #fff;

    border: 1px solid #dedede;

    border-radius: 0.5vw 0.5vw 0vw 0vw;

    overflow: hidden;

    font-family: "Merriweather-Bold" !important;

    position: relative;

    color: #333;

    width: unset;
  }

  .pinnedText {
    font-family: "Merriweather-Bold" !important;
  }

  .cards {
    column-count: 1;
  }

  .pinnedContainer {
    transition-duration: 0.5s;

    opacity: 1;

    column-count: 1;

    column-gap: 1vw;

    padding-left: 1.5vw;

    height: unset;

    margin-bottom: 15vw;
  }

  .prevTitle {
    font-size: 6vw;

    margin-top: 4vw;

    margin-bottom: 0.5vw;
  }

  .prevDesc {
    font-size: 2vw;
  }

  .textBox {
    padding-left: 3vw;

    padding-right: 3vw;

    padding-bottom: 2vw;
  }

  .footer {
    height: auto;

    line-height: 10vw;

    text-align: center;

    position: relative;
  }

  .socialIcon {
    width: 8vw;

    margin-top: 6vw;

    margin-left: 0vw;
  }

  .rightmargin {
    margin-right: 10vw;
  }

  .footerlinkek {
    width: 100%;

    height: auto;

    float: unset;
  }

  .footerlink {
    font-size: 3.5vw;
  }

  .typeBox {
    width: auto;

    height: auto;

    bottom: 1vw;

    right: 1vw;
  }

  .typeIcon {
    width: 10vw;
  }
}

@media screen and (max-height: 900px) and (orientation: landscape) {
}