/* Vložená data */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Definice vlastního písma */
@font-face {
  font-family: 'Voltec';
  src: url('../fonts/Voltec.ttf');
}

body {
  font-family: "Montserrat", serif;
}

  .button_container, .button_container.active {
    position: absolute;
    margin: 0;
    height: 46px;
    width: 46px;
    border-radius: 100%;
    border: 2px dotted rgba(45,44,58,.2);
    cursor: pointer;
    z-index: 100;
    transition: opacity .35s ease-in-out;
    background: url('../themes/navi.png') 0 no-repeat;
    background-size: 46px;
  }
  .button_container p { 
    padding: 10px;
    font-weight: 600;
  }
  .button_container.active {
    position: fixed;
    border: 2px dotted rgba(240,240,240,.2);
    background: url('../themes/navi.active.png') 0 no-repeat;
    background-size: 46px;
  }
  .button_container:hover {
    border: 2px dotted #4F77AA;
    background: url('../themes/navi.hover.png') 0 no-repeat;
    background-size: 46px;
  }
  .button_container.active .top {
    -webkit-transform: translateY(9px) translateX(0) rotate(45deg);
            transform: translateY(9px) translateX(0) rotate(45deg);
    background: #ECECEC;
  }
  .button_container.active .middle {
    opacity: 0;
    background: #ECECEC;
  }
  .button_container.active .bottom {
    -webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);
            transform: translateY(-9px) translateX(0) rotate(-45deg);
    background: #ECECEC;
  }
  .button_container span {
    background: #36383D;
    border: none;
    height: 3px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .35s ease;
    cursor: pointer;
  }
  .button_container span:nth-of-type(2) {
    top: 9px;
  }
  .button_container span:nth-of-type(3) {
    top: 18px;
  }

  .overlay {
    position: fixed;
    background: rgba(27,26,32,1);
    background-size: 413px auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .overlay.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
  }
  .overlay.open li {
    -webkit-animation: fadeInRight .5s ease forwards;
            animation: fadeInRight .5s ease forwards;
    -webkit-animation-delay: .35s;
            animation-delay: .35s;
  }
  .overlay.open li:nth-of-type(2) {
    -webkit-animation-delay: .4s;
            animation-delay: .4s;
  }
  .overlay.open li:nth-of-type(3) {
    -webkit-animation-delay: .45s;
            animation-delay: .45s;
  }
  .overlay.open li:nth-of-type(4) {
    -webkit-animation-delay: .50s;
            animation-delay: .50s;
  }

/* Rozhraní pro PC, notebook, tablet */
@media (min-width: 1281px) {
  /* Vlastní nastavení obsahu */
  .overlay-face { width: 1300px; height: auto; padding: 120px 0 0 0; display: flex; flex-wrap: wrap; justify-content: start; align-content: start; background: url('../themes/navigace.png') 50% 30px no-repeat; background-size: auto 160px;}

  .overlay-face-box { width: calc(50% - 80px); height: auto; padding: 0 40px; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: start; align-content: start;}

  .overlay-face-box-odkaz { width: 100%; height: 80px; display: flex; justify-content: start; align-items: center;}
  a.overlay-face-box-odkaz { text-decoration: none;}
  .overlay-face-box-odkaz p { font-size: 2.8em; margin: 0; font-family: 'Voltec'; transition: all .35s ease-in-out;}
  a.overlay-face-box-odkaz p { color: #f8f8f8; text-decoration: none;  border-bottom: 1px solid rgba(79,119,170,.0);}
  a.overlay-face-box-odkaz:hover p { color: #4F77AA; border-bottom: 1px solid #4F77AA;}
  
  .overlay-face-box-icon { gap: 20px; justify-content: center;}
  .icon-box { width: 88px; height: 88px; padding: 10px; border-radius: 18px; display: flex; flex-flow: column; transition: all .35s ease-in-out;}
  a.icon-box { border: 1px solid rgba(248,248,248,.1);}
  a.icon-box:hover { border: 1px solid #f8f8f8;}
  .icon-box img { width: 90px; position: absolute; transition: all .35s ease-in-out;}
  a.icon-box img { filter: opacity(.4);}
  a.icon-box:hover img { filter: opacity(1);}

  /* ShareMe */
  .overlay-face .shareme { padding: 100px 0 50px 0; background: url('../themes/followus.white.png') 50% 30px no-repeat; background-size: auto 160px;}
  .shareme-box { width: 80px; height: 80px; border-radius: 100%; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all .35s ease-in-out;}
  .overlay-face .shareme-box img { width: 80px; transition: all .35s ease-in-out;}
  .overlay-face a.shareme-box { border: 2px dotted rgba(240,240,240,.2);}
  .overlay-face a.shareme-box:hover { border: 2px dotted #f8f8f8;}
}

/* Menší laptopy a stolní počítače */
@media (min-width: 1100px) and (max-width: 1280px) {
  /* Vlastní nastavení obsahu */
  .overlay-face { width: 1100px; height: auto; padding: 120px 0 0 0; display: flex; flex-wrap: wrap; justify-content: start; align-content: start; background: url('../themes/navigace.png') 50% 30px no-repeat; background-size: auto 160px;}

  .overlay-face-box { width: calc(50% - 60px); height: auto; padding: 0 30px; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: start; align-content: start;}

  .overlay-face-box-odkaz { width: 100%; height: 80px; display: flex; justify-content: start; align-items: center;}
  a.overlay-face-box-odkaz { text-decoration: none;}
  .overlay-face-box-odkaz p { font-size: 2.6em; margin: 0; font-family: 'Voltec'; transition: all .35s ease-in-out;}
  a.overlay-face-box-odkaz p { color: #f8f8f8; text-decoration: none;  border-bottom: 1px solid rgba(79,119,170,.0);}
  a.overlay-face-box-odkaz:hover p { color: #4F77AA; border-bottom: 1px solid #4F77AA;}
  
  .overlay-face-box-icon { gap: 20px; justify-content: center;}
  .icon-box { width: 78px; height: 78px; padding: 10px; border-radius: 18px; display: flex; flex-flow: column; transition: all .35s ease-in-out;}
  a.icon-box { border: 1px solid rgba(248,248,248,.1);}
  a.icon-box:hover { border: 1px solid #f8f8f8;}
  .icon-box img { width: 80px; position: absolute; transition: all .35s ease-in-out;}
  a.icon-box img { filter: opacity(.4);}
  a.icon-box:hover img { filter: opacity(1);}

  /* ShareMe */
  .overlay-face .shareme { padding: 80px 0 40px 0; background: url('../themes/followus.white.png') 50% 30px no-repeat; background-size: auto 160px;}
  .shareme-box { width: 70px; height: 70px; border-radius: 100%; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all .35s ease-in-out;}
  .overlay-face .shareme-box img { width: 70px; transition: all .35s ease-in-out;}
  .overlay-face a.shareme-box { border: 2px dotted rgba(240,240,240,.2);}
  .overlay-face a.shareme-box:hover { border: 2px dotted #f8f8f8;}
}

/* Tablety na šířku */
@media screen and (min-width: 769px) and (max-width: 1099px) {
  /* Vlastní nastavení obsahu */
  .overlay-face { width: 760px; height: auto; padding: 80px 0 0 0; display: flex; flex-wrap: wrap; justify-content: start; align-content: start; background: url('../themes/navigace.png') 50% 15px no-repeat; background-size: auto 120px;}

  .overlay-face-box { width: 700px; height: auto; padding: 0 30px; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: start; align-content: start;}

  .overlay-face-box-odkaz { width: 100%; height: 80px; display: flex; justify-content: center; align-items: center;}
  a.overlay-face-box-odkaz { text-decoration: none;}
  .overlay-face-box-odkaz p { font-size: 2.6em; margin: 0; font-family: 'Voltec'; transition: all .35s ease-in-out;}
  a.overlay-face-box-odkaz p { color: #f8f8f8; text-decoration: none;  border-bottom: 1px solid rgba(79,119,170,.0);}
  a.overlay-face-box-odkaz:hover p { color: #4F77AA; border-bottom: 1px solid #4F77AA;}
  
  .overlay-face-box-icon { gap: 20px; justify-content: center;}
  .icon-box { width: 88px; height: 88px; padding: 10px; border-radius: 18px; display: flex; flex-flow: column; transition: all .35s ease-in-out;}
  a.icon-box { border: 1px solid rgba(248,248,248,.1);}
  a.icon-box:hover { border: 1px solid #f8f8f8;}
  .icon-box img { width: 90px; position: absolute; transition: all .35s ease-in-out;}
  a.icon-box img { filter: opacity(.4);}
  a.icon-box:hover img { filter: opacity(1);}

  /* ShareMe */
  .overlay-face .shareme { padding: 80px 0 40px 0; background: url('../themes/followus.white.png') 50% 15px no-repeat; background-size: auto 120px;}
  .shareme-box { width: 60px; height: 60px; border-radius: 100%; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all .35s ease-in-out;}
  .overlay-face .shareme-box img { width: 60px; transition: all .35s ease-in-out;}
  .overlay-face a.shareme-box { border: 2px dotted rgba(240,240,240,.2);}
  .overlay-face a.shareme-box:hover { border: 2px dotted #f8f8f8;}
}

/* Tablety na výšku */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .button_container, .button_container.active { height: 38px; width: 38px; border: 1px dotted rgba(45,44,58,.2); background-size: 38px;}
  .button_container:hover { border: 1px dotted #4F77AA; background: url('../themes/navi.hover.png') 0 no-repeat; background-size: 36px;}

  /* Vlastní nastavení obsahu */
  .overlay-face { width: 480px; height: auto; padding: 40px 0 0 0; display: flex; flex-wrap: wrap; justify-content: start; align-content: start; background: url('../themes/navigace.png') 50% 5px no-repeat; background-size: auto 60px;}

  .overlay-face-box { width: calc(50% - 10px); height: auto; padding: 0 5px; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: start; align-content: start;}

  .overlay-face-box-odkaz { width: 100%; height: 40px; display: flex; justify-content: start; align-items: center;}
  a.overlay-face-box-odkaz { text-decoration: none;}
  .overlay-face-box-odkaz p { font-size: 20px; margin: 0; font-family: 'Voltec'; transition: all .35s ease-in-out;}
  a.overlay-face-box-odkaz p { color: #f8f8f8; text-decoration: none;  border-bottom: 1px solid rgba(79,119,170,.0);}
  a.overlay-face-box-odkaz:hover p { color: #4F77AA; border-bottom: 1px solid #4F77AA;}
  
  .overlay-face-box-icon { gap: 20px; justify-content: center;}
  .icon-box { width: 28px; height: 28px; padding: 4px; border-radius: 18px; display: flex; flex-flow: column; transition: all .35s ease-in-out;}
  a.icon-box { border: 1px solid rgba(248,248,248,.1);}
  a.icon-box:hover { border: 1px solid #f8f8f8;}
  .icon-box img { width: 30px; position: absolute; transition: all .35s ease-in-out;}
  a.icon-box img { filter: opacity(.4);}
  a.icon-box:hover img { filter: opacity(1);}

  /* ShareMe */
  .overlay-face .shareme { padding: 40px 0 20px 0; background: url('../themes/followus.white.png') 50% 5px no-repeat; background-size: auto 60px;}
  .shareme-box { width: 50px; height: 50px; border-radius: 100%; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all .35s ease-in-out;}
  .overlay-face .shareme-box img { width: 50px; transition: all .35s ease-in-out;}
  .overlay-face a.shareme-box { border: 2px dotted rgba(240,240,240,.2);}
  .overlay-face a.shareme-box:hover { border: 2px dotted #f8f8f8;}
}

/* Rozhraní pro mobil */
@media screen and (max-width: 480px) {
  .button_container, .button_container.active { height: 38px; width: 38px; border: 1px dotted rgba(45,44,58,.2); background-size: 38px;}
  .button_container:hover { border: 1px dotted #4F77AA; background: url('../themes/navi.hover.png') 0 no-repeat; background-size: 36px;}

  /* Vlastní nastavení obsahu */
  .overlay-face { width: 320px; height: auto; padding: 40px 0 0 0; display: flex; flex-wrap: wrap; justify-content: start; align-content: start; background: url('../themes/navigace.png') 50% 0 no-repeat; background-size: auto 60px;}

  .overlay-face-box { width: 320px; height: auto; padding: 0 30px; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: start; align-content: start;}

  .overlay-face-box-odkaz { width: 100%; height: auto; padding: 10px 0; display: flex; justify-content: start; align-items: start;}
  a.overlay-face-box-odkaz { text-decoration: none;}
  .overlay-face-box-odkaz p { font-size: 24px; margin: 0; font-family: 'Voltec'; transition: all .35s ease-in-out;}
  a.overlay-face-box-odkaz p { color: #f8f8f8; text-decoration: none;  border-bottom: 1px solid rgba(79,119,170,.0);}
  a.overlay-face-box-odkaz:hover p { color: #4F77AA; border-bottom: 1px solid #4F77AA;}
  
  .overlay-face-box-icon { gap: 10px; justify-content: center;}
  .icon-box { width: 48px; height: 48px; padding: 10px; border-radius: 10px; display: flex; flex-flow: column; transition: all .35s ease-in-out;}
  a.icon-box { border: 1px solid rgba(248,248,248,.1);}
  a.icon-box:hover { border: 1px solid #f8f8f8;}
  .icon-box img { width: 50px; position: absolute; transition: all .35s ease-in-out;}
  a.icon-box img { filter: opacity(.4);}
  a.icon-box:hover img { filter: opacity(1);}

  /* ShareMe */
  .overlay-face .shareme { padding: 40px 0 30px 0; background: url('../themes/followus.white.png') 50% 0 no-repeat; background-size: auto 60px;}
  .shareme-box { width: 40px; height: 40px; border-radius: 100%; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all .35s ease-in-out;}
  .overlay-face .shareme-box img { width: 40px; transition: all .35s ease-in-out;}
  .overlay-face a.shareme-box { border: 2px dotted rgba(240,240,240,.2);}
  .overlay-face a.shareme-box:hover { border: 2px dotted #f8f8f8;}
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}