body,
input,
textarea,
p {
    font-family: 'IBM Plex Sans', sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'League Spartan', sans-serif; ;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
h1 {
    text-align: center;
    font-size: 55px;
    padding: 15px 0 30px;
}

h2 {
    text-align: center;
    font-size: 40px;
    padding: 15px 0 20px;
}

p {
    line-height: 1.6;
}

img {
    vertical-align: top;
}

.container {
    width: 1300px;
    margin: auto;
}

a, a i {
    transition: 300ms ease-in-out all;
    text-decoration: none;
}

@media screen and (max-width: 479px) {
    .container {width: 92%}
}
@media screen and (min-width: 480px) {
    .container {width: 95%}
}
@media screen and (min-width: 740px) {
    .container {width: 95%}
}
@media screen and (min-width: 980px) {
    .container {width: 95%}
}
@media screen and (min-width: 1320px) {
    .container {width: 1300px}
}

/* Stylování Headeru*/

header {
    background: url(../img/header.jpg) center center no-repeat;
    background-size: cover;
}

@media screen and (min-width: 500px) {
    header {
        height: 100vh;
    }
}

.headerTop .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headerTop {
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6222864145658263) 100%);
}

.headerTop img:hover {
    transform: rotate(1.25turn);
    transition: 1.2s ease-in-out all;
}

.headerTop img:hover {
    transform: rotate(1.25turn);
    transition: 1.2s ease-in-out all;
}

.menuhp ul {
    display: flex;
    list-style: none;
}

.menuhp li a {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 64px 15px;
    display: block;
}

.menuhp li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

@media screen and (min-width: 959px) {
    .headerTop h2 {
        display: none;
    }
}

@media screen and (max-width: 959px) {
    .headerTop .logo {
        display: none;
    }
    .headerTop .container {
        height: 140px;
    }
    .headerTop .container h2 {
        color: #fff;
        text-align: left;
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
    .headerTop .container h2 {
        width: 80%;
    }
}


/*hambureger*/

.mmenu-icon-wrapper {
    position: absolute;
    right: 1.5em;
    height: 26px;
    width: 26px;
    cursor: pointer;
    z-index: 2;
  }
  
  .mmenu-icon,
  .mmenu-icon:before,
  .mmenu-icon:after {
    content: '';
    position: absolute;
    border-radius: 1em;
    height: 2px;
    width: 26px;
    background: white;
    transition: all 0.2s ease
  }
  
  .mmenu-icon {
    top: 0.75em
  }
  
  .mmenu-icon:before {
    top: -0.50em
  }
  
  .mmenu-icon:after {
    top: 0.50em
  }
  
  .mmenu-active .mmenu-icon {
    background: transparent;
    transform: rotate(-135deg)
  }
  
  .mmenu-active .mmenu-icon:before,
  .mmenu-active .mmenu-icon:after {
    top: 0
  }
  
  .mmenu-active .mmenu-icon:before {
    transform: rotate(90deg)
  }
  
  .mmenu-active .mmenu-icon,
  .mmenu-active .mmenu-icon:before,
  .mmenu-active .mmenu-icon:after {
    background: white
  }
  
  .mmenu-menu {
    transition: all 0.4s ease;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: white;
    text-align: center;
    z-index: 2;
  }
  
  .mmenu-active .mmenu-menu {
    opacity: 1;
    pointer-events: initial;
  }
  
  .mmenu-menu ul {
    display: block;
    transition: all 0.4s ease;
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    font-size: 20px;
    line-height: 200%;
  }
  
  .mmenu-menu ul li a {
      color: #fff;
      text-decoration: none;
  }
  
  .mmenu-menu ul li a:hover {
      color: #000;
  }
  
  .mmenu-active .mmenu-menu ul {
    transform: translate(-50%, -50%) scale(1)
  }
  
  @media screen and (max-width: 959px) {
      .menuhp {
          display: none;
      }
  }
  
  @media screen and (min-width: 959px) {
      .mmenu-menu, .mmenu-icon-wrapper {
          display: none !important;
      }
  }
  /*konec hamburgeru*/

.headerInfo {
    text-align: center;
}

.headerInfo img {
    height: 490px;
    width: auto;
}

@media screen and (max-width: 700px) {
    .headerInfo img {
        width: 70%;
        height: auto;
        padding-bottom: -15px;
    }
}

@media screen and (max-width: 700px) {
    .headerInfo .ikonySite a i  {
        font-size: 80%;
    }
}

@media screen and (max-width: 600px) {
    .headerInfo .ikonySite a i  {
        font-size: 60%;
    }
}

@media screen and (max-width: 500px) {
    .headerInfo .ikonySite a i  {
        font-size: 40%;
    }
}

@media screen and (max-width: 350px) {
    .headerInfo .ikonySite a i  {
        font-size: 30%;
    }
}

@media screen and (max-width: 250px) {
    .headerInfo .ikonySite a i  {
        display: none;
    }
}

.headerInfo img, .headerInfo a i, .headerTop img {
    -webkit-filter: drop-shadow(7px 7px 7px #222222);
    filter: drop-shadow(7px 7px 7px #222222);
}

.headerInfo a {
    color: #fff;
    font-size: 50px;
    padding: 0 20px;
}

.headerInfo .ikonySite {
    padding-bottom: 40px;
}

.fa-facebook-f:hover {
    color: rgb(24, 119, 242);
}

.fa-instagram:hover {
    color: rgb(228, 64, 95);
}

.fa-tiktok:hover {
    color: rgb(238, 29, 81);
}

/*stylování obědového menu*/

.obed {
    display: flex;
    justify-content: space-around;
    margin: 30px auto;
}

.obedText {
    text-align: center;
    width: 50%;
}

.obedPodnadpis {
    font-size: 20px;
    text-align: center;
}

.obedText img {
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 50%;
    margin-top: 40px;
}

.obedCenik {
    padding-top: 30px;
}

.obedText h3 {
    font-size: 30px;
    line-height: 50px;
}

.obedVypis {
    text-align: left;
}

.obedVypis h2 {
    padding-bottom: 5px;
}

.obedVypis .odsazeni {
    padding-left: 15px;
}


.obedVypis h3 {
    padding: 18px 0 8px;
}

@media screen and (max-width: 1000px) {
    .obed {
        flex-direction: column;
    }
}

@media screen and (max-width: 1000px) {
    .obedText, .obedVypis {
        display: flex;
        margin: auto;
    }
}

@media screen and (max-width: 1000px) {
    .obedCenik {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .obedText img { 
        margin-top: -1%;
    }
}

@media screen and (max-width: 900px) {
    .obedText img {
        width: 350px;
        height: 350px;
    }
}

@media screen and (max-width: 700px) {
    .obedText img {
        width: 250px;
        height: 250px;
    }
}

@media screen and (max-width: 500px) {
    .obedDate h2 {
        font-size: 30px;
    }
}

@media screen and (max-width: 400px) {
    .obedText img {
        width: 200px;
        height: 200px;
    }
}

@media screen and (min-width: 1000px) {
    .obedCenikPhone {
        display: none;
    }
}

/* stylování sekce onás*/

.onas {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.onas div {
    width: 33.33%;
    height: auto;
}

.onas h3 {
    line-height: 400px;
    color: #fff;
    text-shadow: 2px 2px 3px #000;
    font-size: 50px;
    -webkit-filter: brightness(60%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.onas h3:hover {
    -webkit-filter: brightness(100%);
}

.onas .socialni h3 {
    background: url(../img/socialni_podnik.jpg) center center no-repeat;
    background-size: cover;
}

.onas .druzstevni h3 {
    background: url(../img/druzstevne.jpeg) center center no-repeat;
    background-size: cover;
}

.onas .rostlinny h3 {
    background: url(../img/rostlinne.jpg) center center no-repeat;
    background-size: cover;
}

.onas p {
    padding: 30px 50px;
    text-align: justify;
}

.onasUvod {
    padding: 30px 0;
    color: #fff;
}

.onasUvod p {
    padding: 10px 0;
}

.onasUvod {
    background-color: #6d0e14;
}

.onasUvod .buttonCenter {
    display: flex;
    justify-content: center;
}

.onasUvod .btn {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 12px;
}

.onasUvod .btn:hover {
    transition: 0.5s;
    background-color: #fff;
    color: #6d0e14;
    font-weight: bold;
}

.onasUvod .btn:hover i {
    transform: translateX(5px);
}

@media screen and (max-width: 900px) {
    .onas {
        flex-direction: column;
    }
}

@media screen and (max-width: 900px) {
    .onas div, .onas div h3{
        width: 100%;
        line-height: 300px;
    }
}

@media screen and (max-width: 600px) {
    .onas div, .onas div h3{
        width: 100%;
        line-height: 200px;
    }
}

@media screen and (max-width: 450px) {
    .onas div, .onas div h3{
        width: 100%;
        line-height: 130px;
    }
}

/* stylování 3D rozcestníku

The flip box container. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect) */

.container .rozcestnik {
    display: flex;
    justify-content: space-around;
}

.rozcestnik {
    margin: 80px 0;
}

.flip-box {
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    perspective: 1000px;
  }
  
.flip-box img {
width:400px;
height:400px;
object-fit: cover;
border-radius: 50%;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 400px;
height: 400px;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the back side */
.flip-box-back {
background-color: #000;
transform: rotateY(180deg);
line-height: 400px;
}

.flip-box-back a {
color: #fff;
font-size: 30px;
padding: 100px 0;
}

@media screen and (max-width: 900px) {
    .rozcestnik {
        flex-direction: column;
    }
    .rozcestnik div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto auto 20px auto;
    }
}

.rozcestnikTelefon {
    display: flex;
    flex-direction: column;
    margin: 30px 0;
}

.rozcestnikTelefon h2 a {
    color: #fff;
}

#rezervaceTelefon {
    background: url(../img/rezervace.jpeg) center center no-repeat;
    background-size: cover;
    margin-bottom: 20px;
}

#menuTelefon {
    background: url(../img/stala_nabidka.png) center center no-repeat;
    background-size: cover;
}

.rozcestnikTelefon h2 {
    width: 400px;
    height: 400px;
    line-height: 400px;
    border-radius: 50%;
    padding: 0;
    margin: auto;
    text-shadow: 2px 2px 3px #000;
}

@media screen and (min-width: 501px) {
    .rozcestnikTelefon {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .rozcestnik {
        display: none !important;
    }
}

@media screen and (max-width: 450px) {
    .rozcestnikTelefon h2 {
        width: 300px;
        height: 300px;
        line-height: 300px;
    }
}

/* Stylování Footeru*/

.pata {
padding: 50px 0;
color: #fff;
font-size: 14px;
background-color: #000000;
}

.pata .container {
    display: flex;
    justify-content: space-between;
}

.pata ul {
    list-style: none;
    line-height: 1.6;
}

.pata a:hover {
    color: rgb(127, 155, 212);
    text-decoration: underline;
}

.pata a {
    color: #fff;
}

.pata h3 {
    padding-bottom: 30px;
}

.fb-page {
    width: 340px;
    height: 130px;
    margin: 34.2px 0;
}

@media screen and (max-width: 800px) {
    .pata .fb {
        display: none;
    }
}

@media screen and (min-width: 800px) {
    .pata .face, .pata .insta {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .pata .container {
        flex-direction: column;
        text-align: center;
    }
    .pata {
        padding: 50px 0;
    }
    .pata .pataNadpis {
        padding-top: 40px;
    }
}

.copyright {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

.copyright a {
    color: #000;
}

.copyleft {
    display: inline-block;
    transform: rotateY(180deg);
}

.copyright a:hover {
    color: rgb(127, 155, 212);
    text-decoration: underline;
}

@media screen and (max-width: 800px) {
    .copyrightL a {
        display: block;
    }
    .copyrightL span {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .container .copyright {
        flex-direction: column;
    }
}