:root {
  --white: #fff;
  --white_hover: #e9e9e9;
  --brown: #1c1714;
  --orange: #cf7600;
  --orange_gradient: linear-gradient(to right, #cf7600, rgb(240, 162, 0));
  --column_width: 200px;
  --arrow_width: 0.8em;
}

@font-face {
  font-family: "PriKafi_font";
  src: url("resources/fonts/Prikafi.eot");
  src: url("resources/fonts/Prikafi.eot?#iefix") format("embedded-opentype"),
    url("resources/fonts/Prikafi.woff") format("woff"),
    url("resources/fonts/Prikafi.ttf") format("truetype");
  /* there is another definition for this font in tablet and mobile view */
}
@font-face {
  font-family: "WorkSans_regular";
  src: URL("resources/fonts/WorkSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "WorkSans_bold";
  src: URL("resources/fonts/WorkSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "WorkSans_light";
  src: URL("resources/fonts/WorkSans-Light.ttf") format("truetype");
}
@font-face {
  font-family: "WorkSans_medium";
  src: URL("resources/fonts/WorkSans-Medium.ttf") format("truetype");
}

html,
body {
  padding: 0;
  margin: 0;
  background-color: var(--brown);
  font-family: WorkSans_regular;
  text-align: center;
  overflow-x: hidden;
}

/* HEADER */
#show_mobile_header {
  z-index: 1;
  background-color: var(--white);
  width: 5%;
  position: fixed;
  top: 0;
  right: 0;
  padding: 11% 11% 7% 7%;
  border-radius: 200px 0 200px 200px;
  transform: translate(20%, -20%);
}
#hide_mobile_menu {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 1em;
}
#header {
  font-family: WorkSans_medium;
  background-color: var(--white);
  text-transform: uppercase;
  text-align: right;
  position: absolute;
  width: 100%;
}
#header a,
#header .logo,
#stala_nabidka a,
#sm_container,
#vice_zde {
  text-decoration: none;
  color: var(--brown);
  padding: 0.5em 1em;
  margin: 1em 0;
  display: inline-block;
  border-radius: 100px;
  cursor: pointer;
}
#sm_container {
  margin: 0 2em 0 1em;
  padding: 0;
}
#header .logo {
  height: 1.5em;
  float: left;
  border-radius: 0;
  margin: 0.75em 0 0 2em;
}
.social_media_icon img {
  height: 1em;
  width: 1em;
  vertical-align: sub;
}
#header a:hover:not(.social_media_icon) {
  background-color: var(--white_hover);
}
a.social_media_icon:hover {
  transform: scale(1.3);
  transition: 0.1s;
}
#header a[data-type="kontakt"] {
  color: var(--white);
  background: var(--orange_gradient);
}

/* CONTENT */
#content {
  background-color: var(--white);
}
section {
  margin-bottom: 2em;
}
h2 {
  font-family: PriKafi_font;
  color: var(--orange);
  font-size: 5em;
  background-image: var(--orange_gradient);
  color: transparent;
  background-clip: text;
  width: fit-content;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.5em;
}
/* CONTENT - uvod */
#uvod img.background {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  object-position: 38% 0%;
}
#uvod img.logo {
  width: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-filter: drop-shadow(0px 0px 20px var(--brown));
  filter: drop-shadow(0px 0px 20px var(--brown));
}
#uvod a {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-filter: drop-shadow(0px 0px 20px var(--brown));
  filter: drop-shadow(0px 0px 20px var(--brown));
  cursor: pointer;
}
#uvod a:hover {
  -webkit-filter: drop-shadow(0px 0px 20px var(--white));
  filter: drop-shadow(0px 0px 20px var(--white));
  transition: 0.2s;
}
#vice_zde {
  text-transform: uppercase;
  border: 2px solid var(--white);
  color: var(--white);
  -webkit-filter: drop-shadow(0px 0px 10px var(--brown));
  filter: drop-shadow(0px 0px 10px var(--brown));
}
#vice_zde .zde {
  text-transform: lowercase;
  font-family: PriKafi_font;
}
#uvod img.arrow {
  width: var(--arrow_width);
}
/* CONTENT - o nas */
#o_nas p {
  margin: 0 auto;
  padding: 0 2em;
  max-width: 1024px;
}
/* CONTENT - galerie*/
#galerie {
  width: fit-content;
  margin: 0 auto;
}
#galerie img {
  display: block;
  float: left;
  width: 33%;
  margin: 0;
  padding: 0;
}
#galerie img:nth-of-type(1),
#galerie img:nth-of-type(4) {
  margin: 0 0.5% 0.5% 0;
}
#galerie img:nth-of-type(2),
#galerie img:nth-of-type(5) {
  margin: 0 0.5% 0.5% 0;
}
#galerie img:nth-of-type(3),
#galerie img:nth-of-type(6) {
  margin: 0 0 0.5% 0;
}
/* CONTENT - provozni doba */
#provozni_doba p {
  padding-bottom: 2em;
}
/* CONTENT - nabidka */
#stala_nabidka img.desktop {
  width: 100%;
  height: 100%;
}
#stala_nabidka img.mobile {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
#stala_nabidka .container {
  position: absolute;
  right: 10%;
}
#stala_nabidka h2 {
  color: var(--white);
  margin-top: 8vw;
  margin-bottom: 1vw;
}
#stala_nabidka a.small {
  transform: scale(0.8);
}
#stala_nabidka a {
  text-transform: uppercase;
  border: 2px solid var(--white);
  color: var(--white);
}
/* CONTENT - nav to top */
#nav_to_top {
  margin: 2em;
  padding-bottom: 2em;
  cursor: pointer;
}
#nav_to_top a {
  text-decoration: none;
  color: var(--brown);
}
#nav_to_top img {
  width: var(--arrow_width);
  margin-bottom: 0.5em;
}
#nav_to_top:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

/* FOOTER */
#footer {
  background-color: var(--brown);
  color: var(--white);
}
#footer h4 {
  font-family: "WorkSans_medium";
}
#footer_content {
  float: right;
}
#footer .img_container {
  float: left;
  margin: 3em 0 3em 3em;
}
#footer .img_container img {
  width: 200px;
}
#footer .column {
  float: left;
  text-align: left;
  padding-bottom: 2em;
  margin-right: 5em;
}
#footer a {
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
}

/* TABLET */
.mobile,
.tablet {
  display: none;
}
@media only screen and (max-device-width: 1120px) {
  .tablet {
    display: block;
  }
  #uvod a {
    top: 87%;
    font-size: 1.5em;
  }
  #galerie img {
    width: 49.5%;
  }
  #galerie img:nth-of-type(2n-1) {
    margin: 0.5% 0.5% 0.5% 0;
  }
  #galerie img:nth-of-type(2n) {
    margin: 0.5% 0 0.5% 0.5%;
  }
  #footer .img_container {
    width: 90%; /* 100 udela pruh nalevo*/
    margin: 2em;
  }
  #footer .column {
    margin: 0 2em;
  }
  #footer_content {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: calc(4 * var(--column_width));
  }
  @font-face {
    font-family: "PriKafi_font";
    src: url("resources/fonts/Prikafi.eot");
    src: url("resources/fonts/Prikafi.eot?#iefix") format("embedded-opentype"),
      url("resources/fonts/Prikafi.woff") format("woff"),
      url("resources/fonts/Prikafi.ttf") format("truetype");
    /* to fix safari double/triple displaying */
    -webkit-font-smoothing: antialiased;
    font-synthesis: none !important;
    font-style: normal;
    font-weight: 600;
  }
}

/* MOBILE */
@media only screen and (max-device-width: 600px) {
  h2 {
    font-size: 8em;
  }
  #uvod a {
    font-size: 3em;
  }
  #o_nas p,
  #nav_to_top,
  #provozni_doba p {
    font-size: 2em;
  }
  #footer .column {
    margin: 0;
    font-size: 2em;
    width: calc(var(--column_width) * 2);
    text-align: center;
  }
  .mobile {
    display: block;
  }
  .hide_for_mobile {
    display: none;
  }
  #uvod .logo {
    width: 80%;
  }
  #galerie img {
    width: 100%;
    margin: 1% 0 !important;
  }
  #stala_nabidka .container {
    width: 100%;
    right: 0;
  }
  #stala_nabidka a {
    margin-top: 65vh;
    transform: scale(2.5);
  }
  #stala_nabidka a.small {
    margin-top: 4vh;
    transform: scale(1.75);
  }
  /* header */
  #header a:not(.social_media_icon),
  #sm_container {
    display: block;
    padding: 1em;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 90%;
  }
  #header a[data-type="kontakt"] {
    width: fit-content;
    padding: 0.5em 1em;
    margin-top: 1em;
  }
  .social_media_icon {
    display: block;
    margin-left: 30%;
    margin-right: 40%;
    text-align: center;
  }
  .social_media_icon img {
    transform: scale(1.5);
  }
  #header {
    background-color: rgba(255, 255, 255, 0.85);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 40px;
    z-index: 1;
  }
  #header .logo {
    width: 100%;
    height: 7vh;
    padding: 100px 0;
    background-color: var(--white);
    margin: 0;
  }
  #header a:hover:not(.social_media_icon) {
    background-color: transparent;
  }
}