@font-face {
  font-family: "anton-regular";
  src: url("../../fonts/Anton-Regular.ttf");
}
@font-face {
  font-family: "archivo";
  src: url("../../fonts/ArchivoBlack-Regular.ttf");
}
@font-face {
  font-family: "roboto-bold";
  src: url("../../fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: "roboto";
  src: url("../../fonts/Roboto-Regular.ttf");
}
:root {
  --bold: "roboto-bold",sans-serif;
  --regular: "roboto",sans-serif;
  /* defaultni hodnoty menene scroll.js */
  --scroll: 0px;
  --left_profile: 50vw;
  --sc2: 0px;
  /* ------ */
  --padding: 11vw;
  --header_nadpis: "archivo";
  --header_background: linear-gradient(203deg, rgb(4, 79, 128) 12%, rgb(16, 112, 176) 29%, rgba(15,126,181,1) 71%, rgba(0,183,255,1) 100%);
  --primary:#252525;
  --primary_2:#0a9be4;
  --secondary: white;
  --text: white;
  --header_min: 85px;
  --padding_main: 5vw;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding: 130px;
}
@media screen and (max-width: 600px) {
  html {
    scroll-padding: 150px;
  }
}

body {
  padding-bottom: 100px;
  position: relative;
}

* {
  box-sizing: border-box;
  overscroll-behavior: none;
}

h1, h2, h3, h4 {
  font-family: "roboto-bold";
  font-weight: normal;
}

p, a, span {
  font-family: "roboto";
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--secondary);
}
h1.center {
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  text-align: center;
  position: relative;
  left: calc(50% + var(--padding_main));
  transform: translateX(-50%);
  padding-inline: 15px;
  border-bottom: 3px solid var(--primary_2);
  padding-bottom: 15px;
}
@media screen and (max-width: 600px) {
  h1.center {
    margin: auto;
    left: 0;
    transform: none;
    margin-bottom: 30px;
  }
}

section h1.center {
  margin: auto;
  left: 0;
  transform: none;
  margin-bottom: 30px;
}

hr {
  border-color: #d8d8d8;
  height: 1px;
}

header {
  position: fixed;
  background: var(--header_background);
  width: 100%;
  height: max(var(--header_min), 100vh - var(--scroll)); /* 85 px je i v scroll.js nastaveno xd */
  top: 0;
  left: 0;
  z-index: 10;
  border-bottom: 1px solid white;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
header div.profile {
  background-color: var(--primary);
  border-radius: 1000px;
  height: clamp(90px, 60%, 50vw);
  top: 20%;
  transform: translateX(-50%);
  left: max(var(--left_profile), 65px); /* 65vw je i v scroll.js nastaveno  */
  aspect-ratio: 1/1;
  position: relative;
  z-index: 4;
}
header div.profile:before {
  content: "";
  width: 94%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 3%;
  left: 3%;
  background: url("../../img/profile.jpeg");
  background-position: center;
  background-size: cover;
  overflow: hidden;
  border-radius: 1000px;
}
header div.nadpis {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  left: 0;
  z-index: 2;
}
header h1 {
  font-family: var(--header_nadpis);
  color: black;
  font-size: max(min(7.5vw, 65px), 11.5vw - var(--sc2) * 0.3);
  text-shadow: 1px 1px 0 #d8d8d8, -1px 1px 0 #d8d8d8, -1px -1px 0 #d8d8d8, 1px -1px 0 #d8d8d8;
}
header div.icons_wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
header div.icons {
  display: flex;
  flex-direction: row;
  width: 100vw;
  justify-content: space-around;
  position: relative;
  top: -4vw;
  left: 0;
  height: 100%;
  width: 100%;
}
header div.icons div {
  width: 4vw;
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  top: 0;
  animation: move infinite;
  animation-timing-function: linear;
}
header div.icons div:nth-child(1) {
  background-image: url("../../img/ico/code.png");
  animation-duration: 4s;
}
header div.icons div:nth-child(2) {
  background-image: url("../../img/ico/games.png");
  animation-duration: 5s;
}
header div.icons div:nth-child(3) {
  background-image: url("../../img/ico/headphone.png");
  animation-duration: 4s;
}
header div.icons div:nth-child(4) {
  background-image: url("../../img/ico/hiking.png");
  animation-duration: 2s;
}
header div.icons div:nth-child(1) {
  background-image: url("../../img/ico/cheers.png");
  animation-duration: 6s;
}
header div.icons div:nth-child(6) {
  background-image: url("../../img/ico/listening.png");
  animation-duration: 3s;
}
header div.icons div:nth-child(7) {
  background-image: url("../../img/ico/logical-thinking.png");
  animation-duration: 2s;
}
header div.icons div:nth-child(8) {
  background-image: url("../../img/ico/photo.png");
  animation-duration: 4s;
}
header div.icons div:nth-child(9) {
  background-image: url("../../img/ico/puzzle.png");
  animation-duration: 2s;
}
header div.icons div:nth-child(10) {
  background-image: url("../../img/ico/restaurant.png");
  animation-duration: 5s;
}
header div.icons div:nth-child(11) {
  background-image: url("../../img/ico/skills.png");
  animation-duration: 3s;
}
header div.icons div:nth-child(12) {
  background-image: url("../../img/ico/car.png");
  animation-duration: 6s;
}
header div.icons div:nth-child(13) {
  background-image: url("../../img/ico/saw.png");
  animation-duration: 2s;
}
header div.icons div:nth-child(14) {
  background-image: url("../../img/ico/hammer.png");
  animation-duration: 2s;
}

@keyframes move {
  to {
    top: calc(100% + 4vw);
  }
}
body {
  margin: 0;
  background-color: var(--primary);
}

content {
  position: relative;
  left: 0;
  top: 0;
  padding-top: var(--header_min);
  width: 100%;
  display: grid;
  grid-template-columns: auto min-content;
  grid-auto-rows: auto;
  grid-column-gap: 5%;
  padding-inline: var(--padding_main);
}
content:first-of-type {
  margin-top: 100vh;
}
@media screen and (max-width: 600px) {
  content {
    display: block;
  }
}
content > * {
  grid-column: 1;
}
content nav {
  grid-column: 2;
  grid-row: span 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  position: sticky;
  height: -moz-fit-content;
  height: fit-content;
  right: 0;
  top: calc(2 * var(--header_min));
  padding-bottom: 150px;
}
@media screen and (max-width: 600px) {
  content nav {
    position: sticky;
    top: max(var(--header_min), 100vh - var(--scroll) + 20px) !important;
    right: calc(-1 * var(--padding_main));
    width: calc(100% + 2 * var(--padding_main));
    flex-direction: row;
    gap: clamp(10px, 3vw, 20px);
    justify-content: flex-end;
    padding-inline: 5vw;
    padding-top: 10px;
    background-color: var(--primary);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0;
    z-index: 2;
  }
}
content nav a {
  font-family: "roboto-bold";
  color: white;
  opacity: 0.3;
  text-decoration: none;
  font-size: clamp(17px, 2vw, 40px);
  margin-bottom: 15px;
  transition: all 0.3s ease-in-out;
}
content nav a.active {
  opacity: 0.7;
}
content nav a:hover {
  opacity: 1;
}
content h1 {
  font-size: clamp(1.3rem, 5vw, 3.5rem);
  color: var(--secondary);
}
content h1.center {
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  text-align: center;
  position: relative;
  left: calc(50% + var(--padding_main));
  transform: translateX(-50%);
  padding-inline: 15px;
  border-bottom: 3px solid var(--primary_2);
  padding-bottom: 15px;
}
@media screen and (max-width: 600px) {
  content h1.center {
    margin: auto;
    left: 0;
    transform: none;
    margin-bottom: 30px;
  }
}
content hr {
  border-color: #d8d8d8;
  height: 1px;
}
content section.prehled {
  display: grid;
  grid-gap: 60px;
  margin-bottom: clamp(60px, 15vw, 120px);
  grid-template-columns: 485px auto;
  max-width: 2000px;
}
@media screen and (max-width: 1270px) {
  content section.prehled {
    grid-template-columns: auto;
    grid-gap: 25px;
  }
}
content section.prehled a.flip-box {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: transparent;
  perspective: 2000px;
  /* jedontlive boxiky */
  /* 2025 */
  /* ----------------- */
}
@media screen and (max-width: 1270px) {
  content section.prehled a.flip-box {
    max-width: 750px;
  }
}
content section.prehled a.flip-box.a4 {
  aspect-ratio: 1/1.414;
}
@media screen and (max-width: 1270px) {
  content section.prehled a.flip-box.a4 {
    max-width: 300px;
  }
}
content section.prehled a.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
content section.prehled a.flip-box.maturita .flip-box-front {
  background-image: url("../../img/prehledy/2023/maturita.png");
}
content section.prehled a.flip-box.seminary .flip-box-front {
  background-image: url("../../img/prehledy/2022/Poster.png");
}
content section.prehled a.flip-box.wiedermann .flip-box-front {
  background-image: url("../../img/prehledy/meho/kwiedermann.png");
}
content section.prehled a.flip-box.topin .flip-box-front {
  background-image: url("../../img/prehledy/meho/top-in..png");
}
content section.prehled a.flip-box.hobza .flip-box-front {
  background-image: url("../../img/prehledy/meho/hobza-top.cz.png");
}
content section.prehled a.flip-box.bilance .flip-box-front {
  background-image: url("../../img/prehledy/meho/energeticka-bilance.png");
}
content section.prehled a.flip-box.autoskola_pegas .flip-box-front {
  background-image: url("../../img/prehledy/meho/autopegas.cz_uvod-mohelnice-autoskola.png");
}
content section.prehled a.flip-box.autodily_pegas .flip-box-front {
  background-image: url("../../img/prehledy/meho/autopegas.cz_autodily-mohelnice.png");
}
content section.prehled a.flip-box.snooker .flip-box-front {
  background-image: url("../../img/prehledy/meho/www.snooker-morava.cz_.png");
}
content section.prehled a.flip-box.hrk_jakpracujeme .flip-box-front {
  background-image: url("../../img/prehledy/meho/hrk.cz_jak-pracujeme_prodej_.png");
}
content section.prehled a.flip-box.kvetinymatuska .flip-box-front {
  background-image: url("../../img/prehledy/meho/kvatinymatuska.png");
}
content section.prehled a.flip-box.rezidenceladova .flip-box-front {
  background-image: url("../../img/prehledy/meho/rezidenceladova.png");
}
content section.prehled a.flip-box.rukon .flip-box-front {
  background-image: url("../../img/prehledy/meho/rukon.png");
}
content section.prehled a.flip-box.betak .flip-box-front {
  background-image: url("../../img/prehledy/meho/betak.png");
}
content section.prehled a.flip-box.schnitzel .flip-box-front {
  background-image: url("../../img/prehledy/meho/shcnitzel_house.png");
}
content section.prehled a.flip-box.najmologie .flip-box-front {
  background-image: url("../../img/prehledy/meho/najmologie.png");
}
content section.prehled a.flip-box.ande .flip-box-front {
  background-image: url("../../img/prehledy/meho/ande.png");
}
content section.prehled a.flip-box.basta .flip-box-front {
  background-image: url("../../img/prehledy/meho/basta.png");
}
content section.prehled a.flip-box.bittnerovi .flip-box-front {
  background-image: url("../../img/prehledy/meho/bittnerovi.cz.png");
}
content section.prehled a.flip-box.desinwood .flip-box-front {
  background-image: url("../../img/prehledy/meho/desinwood.cz.png");
}
content section.prehled a.flip-box.petrzala .flip-box-front {
  background-image: url("../../img/prehledy/meho/petrzela11academy.cz.png");
}
content section.prehled a.flip-box.investgreat .flip-box-front {
  background-image: url("../../img/prehledy/meho/investgreat.gold.png");
}
content section.prehled a.flip-box.naryner .flip-box-front {
  background-image: url("../../img/prehledy/meho/naryner.cz.png");
}
content section.prehled a.flip-box.dogmax .flip-box-front {
  background-image: url("../../img/prehledy/meho/dog-max.cz.png");
}
content section.prehled a.flip-box.svatovavrinec .flip-box-front {
  background-image: url("../../img/prehledy/meho/www.svatovavrineckydvur.cz_.png");
}
content section.prehled a.flip-box.dekoracezprirody .flip-box-front {
  background-image: url("../../img/prehledy/meho/www.dekoracezprirody.cz_.png");
}
content section.prehled a.flip-box.filtracevodynamiru .flip-box-front {
  background-image: url("../../img/prehledy/meho/www.filtracevodynamiru.cz_.png");
}
content section.prehled a.flip-box.vinarstvippv .flip-box-front {
  background-image: url("../../img/prehledy/meho/vinarstvippv.cz_.png");
}
content section.prehled a.flip-box.zus-slunna .flip-box-front {
  background-image: url("../../img/prehledy/meho/www.zus-slunna.cz_.png");
}
content section.prehled a.flip-box.solidustech .flip-box-front {
  background-image: url("../../img/prehledy/meho/solidustech.cz_.png");
}
content section.prehled a.flip-box.napravimevas .flip-box-front {
  background-image: url("../../img/prehledy/meho/napravimevas.cz_.png");
}
content section.prehled a.flip-box.petplanet .flip-box-front {
  background-image: url("../../img/prehledy/meho/petplanet.cz_.png");
}
content section.prehled a.flip-box.kvitislaskou .flip-box-front {
  background-image: url("../../img/prehledy/meho/www.kvitislaskou.cz_.png");
}
content section.prehled a.flip-box.tti-eshop .flip-box-front {
  background-image: url("../../img/prehledy/meho/www.tti-eshop.cz_.png");
}
content section.prehled section.popis h1 {
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 3.5vw, 3.5rem);
  word-break: break-all;
}
content section.prehled section.popis > span {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  color: var(--primary_2);
  font-family: var(--regular);
  opacity: 0.85;
}
content section.prehled section.popis ul {
  list-style: none;
}
content section.prehled section.popis ul li {
  color: var(--text);
  font-size: clamp(1.05rem, 3vw, 1.6rem);
  font-family: var(--regular);
  line-height: 1.5em;
  margin-bottom: 10px;
  position: relative;
}
content section.prehled section.popis ul li:before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: -1.3em;
  display: block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../../img/ico/emoji/gear.png");
}
content section.prehled section.popis ul li.one::before {
  background-image: url("../../img/ico/emoji/office.png");
}
content section.prehled section.popis ul li.two::before {
  background-image: url("../../img/ico/emoji/sunglasses.png");
}
content section.prehled section.popis ul li.three::before {
  background-image: url("../../img/ico/emoji/straight_ruler.png");
}
content section.prehled section.popis ul li.four::before {
  background-image: url("../../img/ico/emoji/hammer.png");
}
content section.prehled section.popis ul li.a1::before {
  background-image: url("../../img/ico/emoji/earth_africa.png");
}
content section.prehled section.popis ul li b {
  font-weight: normal;
  font-family: var(--bold);
  padding-right: 10px;
}
content section.prehled section.popis ul li a {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
}
content section.prehled section.popis ul li a:hover {
  text-decoration-color: transparent;
  color: var(--primary_2);
}
content section.prehled div.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
content section.prehled div.flip-box-front, content section.prehled div.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  backface-visibility: hidden;
}
content section.prehled div.flip-box-front h2, content section.prehled div.flip-box-back h2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}
content section.prehled div.flip-box-front .btn, content section.prehled div.flip-box-back .btn {
  position: relative;
  top: 50%;
  animation: levitate 3.5s infinite ease-in-out both;
  background-color: #fbeee0;
  border: 2px solid #422800;
  border-radius: 30px;
  box-shadow: #422800 4px 4px 0 0;
  color: #422800;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: clamp(20px, 7vw, 40px);
  padding: 10px 28px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
content section.prehled div.flip-box-front {
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  outline-width: 1px;
  outline-offset: 0;
  outline-color: rgba(0, 130, 206, 0.75);
  outline-style: solid;
}
content section.prehled div.flip-box-back {
  background: var(--header_background);
  color: white;
  outline: 1px solid var(--secondary);
  transform: rotateX(180deg);
}
content section.vyber {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media screen and (max-width: 1510px) {
  content section.vyber {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 995px) {
  content section.vyber {
    grid-template-columns: repeat(1, 1fr);
  }
}
content section.vyber > h1 {
  grid-column: 1/-1;
}
content section.vyber section.prehled {
  display: flex;
  flex-direction: column;
  width: 100%;
  grid-gap: 60px;
}
@media screen and (max-width: 1510px) and (min-width: 996px) {
  content section.vyber section.prehled:not(:nth-child(odd)):nth-last-of-type(1) {
    grid-column: 1/-1;
    max-width: 50%;
    margin-inline: auto;
  }
}
content section.vyber section.prehled section.popis {
  position: relative;
}
@media screen and (max-width: 995px) {
  content section.vyber section.prehled section.popis {
    max-width: 500px;
  }
}
content section.vyber section.prehled section.popis h1 {
  font-size: clamp(1.4rem, 5vw, 2rem);
}
content section.vyber section.prehled section.popis > span {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  color: var(--primary_2);
  font-family: var(--regular);
  opacity: 0.85;
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 12px));
}
content.achivements section.achiv_grid {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  padding-bottom: 40px;
}
content.achivements section.achiv_grid > div {
  border: white 3px solid;
  background: #686868;
  border-radius: 15px;
  padding: 10px;
  width: 226px;
  display: grid;
  grid-template-rows: 200px auto auto;
  position: relative;
}
content.achivements section.achiv_grid > div.gold::before {
  background-color: gold;
}
content.achivements section.achiv_grid > div.silver::before {
  background-color: silver;
}
content.achivements section.achiv_grid > div::before {
  content: "";
  grid-row: 1;
  height: 200px;
  aspect-ratio: 1/1;
  mask-image: url("../../img/ico/certification-full.svg");
  -webkit-mask-image: url("../../img/ico/certification-full.svg");
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #CD7F32;
  align-items: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
content.achivements section.achiv_grid > div img {
  position: absolute;
  grid-row: 1;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100px;
  aspect-ratio: 1/1;
}
content.achivements section.achiv_grid > div p, content.achivements section.achiv_grid > div span {
  width: 100%;
  text-align: center;
  font-family: var(--bold);
  font-size: 26px;
  margin-bottom: 10px;
  color: white;
}
content.achivements section.achiv_grid > div span {
  font-family: var(--regular);
  font-size: 18px;
  margin-top: auto;
}
content.achivements section.achiv_grid > div a {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
}
content.achivements section.achiv_grid > div a:hover {
  text-decoration-color: transparent;
  color: var(--primary_2);
}

section.soc_wrap {
  padding-top: var(--header_min);
  padding-inline: var(--padding_main);
}
section.soc_wrap section.soc {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 30px;
}
section.soc_wrap section.soc a {
  display: block;
  width: clamp(60px, 12vw, 100px);
  aspect-ratio: 1/1;
  background: center/contain no-repeat;
}
section.soc_wrap section.soc a.ig {
  background-image: url("../../img/ico/soc/instagram.png");
}
section.soc_wrap section.soc a.in {
  background-image: url("../../img/ico/soc/linkedin.png");
}
section.soc_wrap section.soc a.snp {
  background-image: url("../../img/ico/soc/logo.png");
}
section.soc_wrap section.soc a.mail {
  background-image: url("../../img/ico/soc/mail.png");
}
section.soc_wrap section.soc a.animate {
  animation: wobble-hor-bottom 0.8s forwards;
}

/*                  */
/*      ANIMACE     */
/*                  */
[data-inviewport=expand-right].is-inViewport {
  animation: expand-right 0.7s ease-in-out both;
}
@keyframes expand-right {
  0% {
    width: 0;
    margin-inline: 0;
  }
  100% {
    width: 100%;
    margin-inline: 0;
  }
}
@keyframes levitate {
  0% {
    transform: translateY(-60%);
  }
  35% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-60%);
  }
}
[data-inviewport=animate-outline].is-inViewport .flip-box-front {
  animation: animateOutline 3s ease infinite;
}

@keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(0, 130, 206, 0);
  }
  10% {
    outline-color: rgba(0, 130, 206, 0.75);
  }
  /* The animation finishes at 50% */
  50% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(0, 130, 206, 0);
  }
  100% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(102, 102, 102, 0);
  }
}
@keyframes wobble-hor-bottom {
  0%, 100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
p.sign {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: var(--bold);
  color: lightgray;
}/*# sourceMappingURL=style.css.map */