/* základní nastavení */
body {
    margin: 0;
   
  }
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  *, ::after, ::before {
    box-sizing: inherit;
  }

/* stylování loga */
.logo-image {
    width: 130px;
    height: 130px;
    position: absolute;
    left: calc(50% - 67px);
    top: 16px;
    margin-bottom: 0px;
    margin-top: 20px;
     @media screen and (max-width: 817px) {
        width: 100px;
        height: 100px;
        left: calc(50% - 52px);
        
    }
}

/* stylování horního menu */
.menu-list {
    margin-top: 200px;
    list-style: none;
    display: flex;
    justify-content: center;
    padding-left: 0;
    @media screen and (max-width: 817px) {
        display: none;
        
    }
}
.menu-item {
    margin: 20px;
    font-family: "Playfair Display";
    font-size: 15px;
    @media screen and (min-width: 845px) {
        font-size: 16px;
    }
        @media screen and (min-width: 1000px) {
        font-size: 18px;
    }
}

.menu-hypertext {
    text-decoration: none;
    color: black;
}

/* stylování jednotlivých boxů na úvodní stránce*/
.boxes {
    margin-top: 50px;
    /* margin-left: 2%;
    margin-right: 2%; */
}

.box1,.box2,.box3,.box4,.box5,.box6 {
        margin-bottom: 50px;
    @media screen and (min-width: 701px) {
    font-size: 16px;
    display: flex;
    margin-bottom: 50px;
    max-height: 600px;
    }
    @media screen and (min-width: 1000px) {
        max-height: 700x;
         font-size: 18px;
    }


}

.box-text {
    /* background-color: #809671; #8ea182; */
    /* background-color: #91a385; */
    /* background-color: #BCB4A3; */
    background-color:  #f7dbdb;
    color:white;
    font-family: "Playfair Display";
    font-size: 20px;
    text-align: center;
    padding-top: 15%;

    @media screen and (max-width: 700px) {
        height: 150px;
        justify-content: center; /* Horizontálně vystředí obsah */
        align-items: center;     /* Vertikálně vystředí obsah */
        text-align: center;
        padding: 8% 1% 8% 1%;
    }
        @media screen and (max-width: 500px) {
        height: 150px;
        justify-content: center; /* Horizontálně vystředí obsah */
        align-items: center;     /* Vertikálně vystředí obsah */
        text-align: center;
        padding: 10% 1% 10% 1%;
    }
    @media screen and (min-width: 701px) {
        width: 50%;
    }
    @media screen and (max-width: 800px) {
       font-size: 16px;
    }

}
.box-foto {
    @media screen and (min-width: 701px) {
        width: 50%;
    }
}

.button {
    /* background-color:#9e816d; */
    background-color:#f2a0a0;
    text-decoration: none;
    color:white;
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 11%;
    padding-right: 11%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.button:hover {
    background-color:  #e55674;
}

.footer-text {
    font-family: "Playfair Display";
    font-size: 14px;
    @media screen and (min-width: 900px) {
        font-size: 16px;
    }
        @media screen and (min-width: 1500px) {
        font-size: 18px;
    }
}
/* stylování ikonek na hlavní stránce */
.icons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 150px 0px;
    font-family: "Playfair Display";
    margin-bottom: 100px;
    margin-top: 100px;
    max-height: 700px;
    justify-items: center;
    align-content: center;
    align-items: center;
    grid-gap: 10px;
    @media screen and (max-width: 500px) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px 30px;
    }
}

.icon-text-1 {
    font-size: 30px;
    color:#876955;
    text-align: center;
    grid-row-start: 2 ;
    grid-row-end: 2;
    grid-column-start: 1 ;
    grid-column-end: 1;
    @media screen and (max-width: 845px) {
        font-size: 20px;
    }
    @media screen and (max-width: 500px) {
        font-size: 16px;
}
}
.icon-text-2 {
    font-size: 28px;
    color:#876955;
    text-align: center;
    grid-row-start: 2 ;
    grid-row-end: 2;
    grid-column-start: 2 ;
    grid-column-end: 2;
        @media screen and (max-width: 845px) {
        font-size: 20px;
        }
        @media screen and (max-width: 500px) {
        font-size: 16px;
        }
    }

.icon-text-3 {
    font-size: 28px;
    color:#876955;
    text-align: center;
    grid-row-start: 2 ;
    grid-row-end: 2;
    grid-column-start: 3 ;
    grid-column-end: 3;
        @media screen and (max-width: 845px) {
        font-size: 20px;
}
    @media screen and (max-width: 500px) {
        font-size: 16px;
}
}
.icon-picture-1 {
    width: 150px;
    grid-row-start: 1 ;
    grid-row-end: 1;
    grid-column-start: 1 ;
    grid-column-end: 1;
    text-align: center;
    @media screen and (max-width: 845px) {
        width: 100px;
    }
    @media screen and (max-width: 500px) {
        width: 65px;
    }
}

.icon-picture-2 {
    width: 150px;
    grid-row-start: 1 ;
    grid-row-end: 1;
    grid-column-start: 2 ;
    grid-column-end: 2;
    text-align: center;
        @media screen and (max-width: 845px) {
        width: 100px;
        @media screen and (max-width: 500px) {
        width: 65px;
    }
    }
}
.icon-picture-3 {
    width: 150px;
    grid-row-start: 1 ;
    grid-row-end: 1;
    grid-column-start: 3 ;
    grid-column-end: 3;
    text-align: center;
    @media screen and (max-width: 845px) {
        width: 100px;
            @media screen and (max-width: 500px) {
        width: 65px;
    }
    }
}
.map {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.mapa {
    height: 300px;
    width: 600px;
        @media screen and (max-width: 845px) {
        width: 100%;
    }
}

.footer {
    margin-top: 100px;
    text-align: center;
}

.menu-hypertext:hover {
    border-bottom: black solid 1px;
}

/* hamburger menu */
.menu__checkbox {
    position: absolute;
    left: -9999px;
}
.menu__checkbox:checked ~ .menu-list-hamburger {
    display: block;
}
.menu-list-hamburger {
    display: none;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.menu-item-hamburger {
    border-bottom: 1px solid black;
}
.menu-hypertext-hamburger {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: black;
    font-family: "Playfair Display";
}
.menu-hypertext-hamburger:hover {
    background-color: #f3f1f0;
}
.menu__toggler {
    cursor: pointer;
    font-family: "Playfair Display";
    font-size: 20px;
    padding-left: 15px;
    margin-bottom: 10px;
}

.hamburger-menu {
    margin-top: 200px;
    @media screen and (min-width: 817px) {
       display: none;

    }
}

.change--desktop {
    @media screen and (max-width: 700px) {
       display: none;

    }
    }

.change--mobile {
    @media screen and (min-width: 701px) {
       display: none;

    }
}