body{
    margin: 0px;
    color: #7d7d7d;
    background-color: #ffffff;
    font-family: "Quicksand", sans-serif;
    font-weight: 200;
}
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
p{
    margin: 0px;
}
#logolink{
    color: #FFFBE9;
    text-decoration: none;

}
#logo{
    margin-left: 35px;
    margin-top: 25px;
    font-size: 35px;
    text-align: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #f5efe3;
    padding: 20px;
    border-radius: 5px;

    display: inline-flex;
    box-shadow:5px 5px 10px #895d50b9;
    color: #ca8a77;
    z-index: 999;

}

.block1 #citatblock1{
    width: 820px;
    text-align: center;
}
header{
    align-items: center;
    display: flex;
    background-image: linear-gradient(#ca8a777d, rgba(82, 65, 49, 0.5)), url(images/23-scaled.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100vh;

}
.header2{
    align-items: center;
    display: flex;


}
nav {
    position: absolute;
    right: 35px;
    align-items: center;
    text-align: right;
    display: flex;
    top: calc(25px + 23px  - (25px / 2));
    text-decoration: none;
    font-size: 23px;
    margin-right: 0px;
    background-color: #f5efe3;
    padding:  30px;
    border-radius: 5px;
    height: 25px;
    box-shadow:5px 5px 10px #895d50b9;
    z-index: 999;
    color: #ca8a77;
}
#logo.down {
    width: 97%;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0px;
    margin-top: 0px;
    position: fixed;
}
.logo2{
    margin-left: 35px;
    margin-top: 25px;
    font-size: 35px;
    text-align: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #AD8B73;
    padding: 20px;
    border-radius: 5px;
    display: inline-flex;
    box-shadow:5px 5px 10px #d5ba897e;

    transition: font-size 0.3s, padding 5s;
    z-index: 999;
     width: 95%;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0px;
    transition: font-size 0.3s, padding 1s;
    margin-top: 0px;
    position: fixed;
}
nav.down {
    box-shadow: none;
    top: 10px;
    position: fixed;
    right: 2%;
}
.nav2{
        box-shadow: none;
    top: 10px;
    position: fixed;
}
nav a{
    padding-right: 65px;
}
.last{
    padding-right: 0px;
}
a{
    text-decoration: none;
    color: #ca8a77;
}
#citat img{
    width: 300px;
}
#citat{
    text-align: center;
    width:720px;
    margin:0 auto;
    margin-top: 30px;
    padding:    0px;
    border-radius: 5px;
    font-size: 50px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #f5efe3;
}
#citat p{
    text-align: center;
    font-size: 38px;
    margin-right: 30px;
        text-decoration: none;

}
h1{
    font-weight: 100;
    margin-bottom:  10px;
}
.block1 {
    background-color: #f5efe3;
    width: 100%;
    margin: 0 auto;
    padding: 50px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.block1 .blockcontent {
    font-size: 25px;
    flex: 1;
text-align: -webkit-center;
}

.block1 .nadpis {

    color: #ca8a77;
    display: flex;
    flex-direction: column;
    align-items: right; 
    margin:0 auto;
    font-size: 81px;
    margin-bottom: 10px;

}
.block1 #logoimg {
    width: 350px;
    display: block; 
    text-align: left;
    border-radius: 5px;
    padding: 50px;


}
.block1 #aboutblock {
    width: 220px;
    display: block; 
    text-align: center;
    border-radius: 5px;
    padding: 30px;
    margin-right: 20px;
}
#about{
    margin: 10px 0px;
}
.block1 #aboutimg {
    width: 300px;
    border-radius: 5px;
}
.block1 #iglink {
    background-color: #ca8a77;
    padding: 0px 20px;
    border-radius: 5px;
    width: fit-content;
    margin-top: 20px;
    display: inline-block;
    font-size: 50px;
    height: fit-content;
}
#iglink a{
    color:#f5efe3;
}
.block1 #maillink {
    background-color: #ca8a77;
    padding: 0px 20px;
    border-radius: 5px;
    width: fit-content;
    margin-top: 20px;
    display: inline-block;
    font-size: 50px;
    height: fit-content;
}
#maillink a{
    color:#f5efe3;
}
.block1 #telefon {
    background-color: #ca8a77;
    padding: 0px 20px;
    border-radius: 5px;
    width: fit-content;
    margin-top: 20px;
    display: inline-block;
    font-size: 50px;
    height: fit-content;
}
#telefon a{
    color:#f5efe3;
}
#kontakty{

}
.block1 button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #AD8B73;
    color: #FFFBE9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.block1 button:hover {
    background-color: #8a6e5b;
}

.block1 button a {
    color: #FFFBE9;
    text-decoration: none;
}

#ceny {
    background-color: #e6d3b9ad;
    padding: 30px;
    border-radius: 10px;
    margin: 25px auto;
    width: clamp(280px, 80%, 400px);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:5px 5px 10px #d8b990a0;
    margin-bottom: 0px;
}
#ceny2 {
background-color: #e6d3b9ad;
    padding: 30px;
    border-radius: 10px;
    margin: 25px auto;
    width: clamp(280px, 80%, 400px);
    display: flex
;
    flex-direction: column;
    align-items: center;
    box-shadow:5px 5px 10px #d8b990a0;
    margin-bottom: 0px;
}
#cenablock1 {
    color: #ca8a77;
    font-size: 2.2em;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    margin-top: 0px;
}
#cenablock2 {
    color: #7d7d7d;
    font-size: 2.2em;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    margin-top: 0px;
}
.cenyblock1 {
    color: #ca8a77;
    font-size: 1.5em;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    line-height: 1.4;
}
.cenyblock2 {
    color: #7d7d7d;
    font-size: 1.5em;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    line-height: 1.4;
}


.block2 {
    background-color: #e8d5cf;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    display: flex;

    box-sizing: border-box;
    transition:ease-in-out 0.2s;
}
.block2 .blockcontent {
    font-size: 25px;
    flex: 1;
text-align: -webkit-center;
    align-items: center;
    margin: 30px;
}

.block2 .nadpis {

    color: #54352d71;
    display: flex;
    flex-direction: column;
    align-items: right; 
    margin:0 auto;
    font-size: 81px;
    margin-bottom: 10px;

}
.block2 .b2n {
    width: 320px;

    text-align: center;
        filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);

    padding:20px 20px;
    margin-right: 50px;
    border-radius: 5px;  

}
.block2 .b2m {
    width: 320px;

    text-align: center;
        filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);

    padding:20px 20px;
    margin-right: 50px;
    border-radius: 5px;  

}
.block2 .b2r {
    width: 20%;
    display: block; 
    text-align: center;
    background-color: #54352d46;
    border-radius: 5px;
    padding: 20px 20px;
    margin-right: 25px;
    box-shadow:5px 5px 10px #8a6e5b;

    
}
 #gong #gongimg{
    width: 95%;
    border-radius: 5px;
    padding: 0px;
}
#manual #auimg{
    width:250px;
}
#gong #zuliaoimg{
    width:290px;
    padding: 0px 20px;
}
.block2 button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #e8d5cf;
    color: #7d7d7d;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s ease;
    font-weight: 200;
    font-family: "Quicksand", sans-serif;

}

.block2 button:hover {
    background-color: #e0cec8;
}

.block2 button a {
    color: #FFFBE9;
    text-decoration: none;
}
.block2 #citatblock1{
    width: 820px;
    text-align: center;
}


.block3 {
    background-color: #f1e6d7;
    width: 100%;
    align-items: center;
    display: flex;

    box-sizing: border-box;
    transition:ease-in-out 0.2s;
}

.block3 .blockcontent {
    font-size: 25px;
    margin: 62px;
text-align: -webkit-center;
    width: 820px;
}

.block3 .nadpis {

    color: #5d3b3254;
    display: flex;
    flex-direction: column;
    align-items: right; 
    margin:0 auto;
    font-size: 81px;
    margin-bottom: 10px;

}
.block3 .b3n {
    width: 400px;
    display: block; 
    text-align: center;
    align-items: center;
    border-radius: 5px;
    padding: 25px 25px;
    margin-left: 25px;
}
#tibet #citatblock1{
    font-size: 18px;
}
#tibet .nadpis{
    margin-top: 20px;
}
#about #citatblock1{
    font-size: 22px;
}
#oblicej #masazimg{
    width:320px;
    padding: 35px;
    border-radius: 5px;
    filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);

}
#tibet #tibetimg{
    width:380px;
    padding:50px 0px;
    background-color: #e6d3b9ad;
    border-radius: 5px;
    box-shadow:5px 5px 10px #d8b990a0;
}
#retreat #guashaimg{
    width:320px;
    padding:10px 0px;
    border-radius: 5px;
    padding:30px 30px;   
}
#retreat .nadpis{
    margin-top: 20px;
}
.block3 button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #AD8B73;
    color: #FFFBE9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.block3 button:hover {
    background-color: #8a6e5b;
}

.block3 button a {
    color: #FFFBE9;
    text-decoration: none;
}
.block3 #citatblock1{
    width: 820px;
    text-align: center;
}
@media (max-width: 1305px) {
    #about #aboutimg{
        width: 250px;
        margin-right: 0px;
    }
    #about #aboutblock{
        width: 300px;
        margin-right: 0px;
    }
    .block1 #citatblock1{
        width: 520px;
    }
}
@media (max-width: 1405px) {
    @media (min-width: 1305px){

#gong .b2r{
    width:364px;
    padding:15px 0px;
}
#gong #gongimg{
    width:300px;
    padding:15px 0px;
}
    }
    
    .block3 #citatblock1{
width: 700px;

    }

    
    

}
#sluzby #one img{
    filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);
    height: 160px;
}
#sluzby #two{
    background-color: #f5efe3;
    color: #7d7d7d;
    width: 300px;
    border-radius: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    padding: 25px 17px;
    margin-right: 35px;
    grid-area: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
        img{
        text-align: center;
        margin: 0 auto;
    }
    p{
        font-size: 88%;
        margin-bottom: 15px;
    }
    h2{
        margin-bottom: 5px;
        margin-top: 5px;
    }
    button, a {
        color: #7d7d7d;
        background-color: #e7d9bd;
        cursor: pointer;
        width: 150px;  
        margin: 0 auto;
    }
    transition: transform 0.3s ease;

}
#sluzby #two img{
    filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);
}
#sluzby #two #ruce{
    width: 55%;
}
#sluzby #one{
    display: inline-block;
    background-color: #f5efe3;
    color: #7d7d7d;
    width: 300px;
    border-radius: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px;
    padding: 25px 17px;
    margin-right: 35px;
    grid-area: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
        img{
        text-align: center;
        margin: 0 auto;
    }
    button, a {
        color: #7d7d7d;
        background-color: #e7d9bd;
        cursor: pointer;
    }
        p{
    }
    transition: transform 0.3s ease;
}
#sluzby #one:hover{
transform: scale(1.07);
}
#sluzby #two:hover{
transform: scale(1.07);
}

#sluzby #three:hover{
transform: scale(1.07);
}

#sluzby #four:hover{
transform: scale(1.07);
}

#sluzby #five:hover{
transform: scale(1.07);
}

#sluzby #six:hover{
transform: scale(1.07);
}


#sluzby{
    text-align: center;
        display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: center;
    display: grid;
grid-template-columns: repeat(2, 300px); 
padding-top: 48px;
background-color: #ffffff;

}
#sluzby #three{
    background-color: #f5efe3;
    color: #7d7d7d;
    width: 300px;
    border-radius: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    padding: 25px 17px;
    margin-right: 35px;
    grid-area: 2/1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
        img{
        text-align: center;
        margin: 0 auto;
    }
    button, a {
        color: #7d7d7d;
        background-color: #e7d9bd;
        cursor: pointer;
        justify-content: flex-end;
        width: 150px;  
        margin: 0 auto;
    }
        p{
            margin-bottom: 15px;
    }
    transition: transform 0.3s ease;

}
#sluzby #three img{
    filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);
    height: 160px;
}
#sluzby #four{
    background-color: #f5efe3;
    color: #7d7d7d;
    width: 300px;
    border-radius: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    padding: 25px 17px;
    margin-right: 35px;
    grid-area: 2/2;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
        img{
        text-align: center;
        margin: 0 auto;
    }
    p{
        font-size: 88%;
        margin-bottom: 15px;
    }
    h2{
        margin-bottom: 5px;
        margin-top: 5px;
    }
    button, a {
        color: #7d7d7d;
        background-color: #e7d9bd;
        cursor: pointer;
        width: 150px;  
        margin: 0 auto;
    }
    transition: transform 0.3s ease;

}
#sluzby #four img{
        height: 145px;
}
#sluzby #five{
    background-color: #f5efe3;
    color: #7d7d7d;
    width: 300px;
    border-radius: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    padding: 25px 17px;
    margin-right: 35px;
    grid-area: 2/2;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
        img{
        text-align: center;
        margin: 0 auto;
    }
    p{
        font-size: 88%;
        margin-bottom: 15px;
    }
    h2{
        margin-bottom: 5px;
        margin-top: 28px;
    }
    button, a {
        color: #7d7d7d;
        background-color: #e7d9bd;
        cursor: pointer;
        width: 150px;  
        margin: 0 auto;
    }
    transition: transform 0.3s ease;
}
#sluzby #five img{
    width: 30%;
    filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);
    height: 100px;
    width: 110px;

}
#sluzby #six{
    background-color: #f5efe3;
    color: #7d7d7d;
    width: 300px;
    border-radius: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    padding: 25px 17px;
    margin-right: 35px;
    grid-area: 2/3;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
        img{
        text-align: center;
        margin: 0 auto;
    }
    p{
        font-size: 88%;
        margin-bottom: 15px;

    }
    h2{
        margin-bottom: 5px;
        margin-top: 28px;
    }
    button, a {
        color: #7d7d7d;
        background-color: #e7d9bd;
        cursor: pointer;
        width: 150px;  
        margin: 0 auto;
    }
    transition: transform 0.3s ease;

}
#sluzby #six img{
    filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(742%) hue-rotate(324deg) brightness(85%) contrast(91%);
        height: 100px;
}
#sluzby button{
    border: none;
    border-radius: 2px;
    margin-top: 15px;
    height: 35px;
    width: 150px;
}
footer{
    background-color: #ffffff;
    padding: 25px;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
    text-align: center;
}
footer p, a{
    display: inline;
}
footer a{
    text-align: right;
    color: #7d7d7d;
}
#googleMap{
    width: 70%;
    height: 400px;
    margin-top: 0px;
    border-radius: 5px;
    text-align: center;
    margin: 0 auto;
}
#gm{
    width:25%;
    margin: 50px 0px 20px 0px;
    background-color: #f5efe3;
    padding: 25px;
    border-radius: 5px 5px 5px 5px;
}
#gm h2{
        margin-bottom: 10px;
        margin-top: 0px;}
.block3 .dropdown {
text-align: center;
}
.dropdown .dropbtn{
    background-color: transparent;
    padding: 0px;
}
.dropdown .dropbtn:hover{
    background-color: transparent;
    padding: 0px;
}
.dropdown .droptext{
    color: #7d7d7d;
}
.dropdown .droptext i{
    margin-right: 10px;
    font-size: 15px;
}
.dropdown-content {
  display: none;
  min-width: 160px;
  overflow: auto;
  z-index: 1;
  padding: 25px;
  border-radius: 5px;
  font-size: 20px;
}
.dropdown-content #citatblock1 {
width: 730px;
}
.show {display: block;}



.block3 .dropdown2{
text-align: center;
margin-bottom: 20px;
}
.dropdown2 .dropbtn2{
    background-color: transparent;
    padding: 0px;
}
.dropdown2 .dropbtn2:hover{
    background-color: transparent;
    padding: 0px;
}
.dropdown2 .droptext2{
    color: #7d7d7d;
}
.dropdown2 .droptext2 i{
    margin-right: 10px;
    font-size: 15px;
}
.dropdown-content2 {
  display: none;
  min-width: 160px;
  overflow: auto;
  z-index: 1;
  padding: 25px;
  border-radius: 5px;
  font-size: 20px;
}
.dropdown-content2 #citatblock1 {
width: 730px;
}
.show2 {display: block;}




.block2 .dropdown3 {
    text-align: center;
    margin-bottom: 20px;
}

.dropdown3 .dropbtn3 {
    background-color: transparent;
    padding: 0px;
    margin-right: 25px;
}

.dropdown3 .dropbtn3:hover {
    background-color: transparent;
    padding: 0px;
}

.dropdown3 .droptext3 {
    color: #7d7d7d;
    font-family: "Quicksand", sans-serif;
    font-weight: 200;
    text-decoration: underline 1px;

}


.dropdown3 .droptext3 {
    font-size: 18px;
    text-decoration: underline 1px;

}

.dropdown-content3 {
    display: none;
    min-width: 160px;
    z-index: 1;
    padding: 25px;
    border-radius: 5px;
    font-size: 20px;
    background-color: #cda49753;
    box-shadow: 5px 5px 10px #c27a625d;
    max-height: 400px;
    overflow-y: auto;
}

.block3 .dropdown-content3 {
    display: none;
    min-width: 160px;
    z-index: 1;
    padding: 25px;
    border-radius: 5px;
    font-size: 20px;
    background-color: #cda49753;
    box-shadow: 5px 5px 10px #d8b990a0;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-content3 #citatblock1 {
    width: 730px;
}

.show3 {
    display: block;
}

.block3 .dropdown-content {
    background-color: #e6d3b9ad;
}

.block3 .dropdown-content2 {
    background-color: #e6d3b9ad;
}

.block3 .dropdown-content3 {
    background-color: #e6d3b9ad;
}
@media (max-width: 1100px) {
    h1{
        font-size: 45px;
    }
    #retreat .nadpis {
    margin-bottom: 40px;
}
#retreat #guashaimg {
    width: 320px;
    padding: 10px 0px;
    border-radius: 5px;
    padding: 0px 30px 0px 36px;
}
      #sluzby {
        text-align: center;
        flex-wrap: wrap;
        gap: 0px;
        width: fit-content;
        margin-left: 7%;
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(1, 300px);
    }
        #sluzby #one{
   grid-area: 1/1;
   width: 267px;
   height: 418px;
    }
        #sluzby #two{
   grid-area: 2/1;
   width: 267px;
   height: 438px;

    }
        #sluzby #three{
   grid-area: 3/1;
   width: 267px;
   height: 418px;
    }
        #sluzby #four{
   grid-area: 4/1;
   width: 267px;
   height: 438px;
    }
        #sluzby #five{
   grid-area: 5/1;
   width: 267px;
   height: 418px;
    }
        #sluzby #six{
   grid-area: 6/1;
   width: 267px;
   height: 438px;
    
}
#googleMap{
    width:45%;
    margin: 0 auto;
    text-align: center;
    left: 50%;
}
}

.header2{
    background-image: none;
    height:100px;
}
legend{
    background-color: #AD8B73;
    width: 100%;
    padding: 20px;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
}
form{
    display: flex;
    align-items: center;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 9%;
    width: 40%;
    height: 450px;
    flex-direction: column;
    background-color: #FFFBE9;
    border-radius: 5px;
}
form #username, form  #password{
    width: 100%;
    margin-bottom: 10px;
    border: none;
    background-color: #e4dec7;
    padding: 18px 10px;
    border-radius: 50px;
    color: #0e0e0e;
    font-size: 20px;
    text-align: center;
    font-family: "Quicksand", sans-serif;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    outline: none; 
    border: 0px solid #ccc; 
}
form #loginform{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 65%;
}
input::placeholder{
    opacity: 0.5;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #AD8B73;
    box-shadow: 0 0 0 3px #d1c69f; 
}
#submit{
 background-color: #AD8B73;
    color: #FFFBE9;
    padding: 10px 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin-top: 5px;
    font-size: 20px;
    font-family: "Quicksand", sans-serif;
}
#sluzby {

    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    width: 100%;
    border-radius: 0px;
    transition:ease-in-out 0.2s;

}
#sluzby a button{
    font-family: "Quicksand", sans-serif;
}
#about #aboutblock{

}
.block1 #logoimg{
    margin-right: 0px;
}
.imgbetween{
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(255 , 251, 233, 0.2), rgba(0, 0, 0, 0.3)), url('images/22-scaled.jpg');
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    background-attachment: fixed;
}
.imgbetween2{
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(255 , 251, 233, 0.2), rgba(0, 0, 0, 0.3)), url('images/22-scaled.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    display: block;
    background-attachment: fixed;
}
.imgbetween3{
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(255 , 251, 233, 0.2), rgba(0, 0, 0, 0.3)), url('images/22-scaled.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    display: block;
    background-attachment: fixed;
}
.imgbetween4{
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(255 , 251, 233, 0.2), rgba(0, 0, 0, 0.3)), url('images/12-scaled.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    display: block;
    background-attachment: fixed;

}
.imgbetween5{
    width: 100%;
    height: 200px;
    background-image: linear-gradient(rgba(255 , 251, 233, 0.2), rgba(0, 0, 0, 0.3)), url('images/12-scaled.jpg');
    background-position: bottom;
    background-repeat: no-repeat;
    display: block;
    background-attachment: fixed;

}
#sluzby{
    margin: 10px 0px;
}
#ceny2{
    display: none;
}
#menu2{
    display: none;
}
@media (max-width: 1100px) {
    header {
        flex-direction: column;
        height: auto;
        background-size: cover;
        background-position: center;
        min-height: 100vh;
        padding-bottom: 20px;
    }

    #logo, #logo.down {
        position: static;
        left: auto;
        transform: none;
        font-size: 25px;
        padding: 10px;
        margin: 20px auto;
        width: fit-content;
        min-width: 0;
        white-space: normal;
        box-shadow: none;
        z-index: 5;
        left: 0;
        right: 0;
        margin-right: 10px;
        top: 0;
    }
    #logo.down {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0px;
    margin-top: 0px;
    position: fixed;
    z-index: 10;
    border-radius: 0px;

}

    nav, nav.down {
        display: none;
    }


    #citat {
        width: 95vw;
        font-size: 22px;
        margin-top: 10px;
        padding: 0 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    #citat p {
        font-size: 20px;
        margin-right: 5px;
        text-align: center;
    }

    .block1, .block2, .block3 {
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 5px;
        gap: 0px;
    }

    .block1 .blockcontent,
    .block2 .blockcontent,
    .block3 .blockcontent {
        width: 100% !important;
        font-size: 16px !important;
        padding: 0;
        margin: 0;
    }

    .block1 .nadpis,
    .block2 .nadpis,
    .block3 .nadpis {
        font-size: 35px !important;
        margin-bottom: 5px;
    }

    .block1 #logoimg,
    .block1 #aboutimg,

    .block2 .b2r img,
    .block3 .b3n #masazimg {
        width: 70vw !important;
        max-width: 217px !important;
        margin: 10px auto !important;
    }
    #retreat #guashaimg {
        max-width: 225px;
    }
    #about #aboutblock {
        margin: 10px auto !important;
        padding: 10px 0px !important;
    }

    #sluzby {
        flex-direction: column !important;
        align-items: center !important;
        grid-template-columns: none !important;
        width: 100vw !important;
        padding: 5px 0 !important;
        gap: 10px !important;
    }

    #sluzby > div {
        width: 95vw !important;
        min-width: 0 !important;
        margin: 5px 0 !important;
        padding: 10px 5px !important;
        font-size: 16px !important;
        height: auto !important;
    }

    #sluzby img {
        width: 150px !important;
        height: auto !important;
        margin: 0 auto 10px auto !important;
    }

    .block1 #citatblock1,
    .block2 #citatblock1,
    .block3 #citatblock1 {
        width: 100% !important;
        font-size: 15px !important;
        padding: 0 !important;
    }

    #ceny2, #oblicej #ceny {
        width: 70% !important;
        padding: 10px !important;
        font-size: 16px !important;
    }

    .imgbetween, .imgbetween2, .imgbetween3, .imgbetween4, .imgbetween5 {
        height: 80px !important;
        background-size: cover !important;
    }

    footer {
        padding: 10px !important;
        font-size: 14px !important;
    }
    #googleMap {
        width: 85vw !important;
        height: 300px !important;
        min-width: 0 !important;
    }
    #gm {
        width: 95vw !important;
        padding: 10px !important;
        font-size: 15px !important;
    }
    #block3 .b3n{
        width: 100%;
        padding: 0px;
    }
    #retreat .b3n{
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    #tibet .b3n{
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    #oblicej .b3n{
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
#menu2{
    display: inline;
    }
       #menu2 #ico #burger{
        display: flex;
        width: fit-content;
        padding: 0px;
        position: absolute;
        margin: 20px;
        font-size: 24px;
        top: calc(25px - 21.5px);
        background-color: transparent;
        right: 0px;
        justify-self: right;
        padding: 10px;
        padding-top: 11.2px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 5;
        font-weight: 200;
        
    }
    #burgerlinks{
        background-color: #AD8B73;
        height: 100vh;
        width: 100vw;
        position: fixed;
        font-size: 40px;
        z-index: 1;
        right: 0px;
        top: 0px;
        bottom: 0px;
        position: fixed;
        padding: 10px;
        padding-top: 55px;
        #menu2{
        right: 200px;
        top: 0px;
        }
        #burgernadpis p{
            font-size: 30px;
    } 
    }
    #menu2 #ico .hidden{
        display: none;
    }

 #menu2{
        display: flex;
        width: fit-content;
        padding: 0px;
        position: absolute;
        margin: 20px 11px;
        font-size: 25px;
        top: calc(25px - 21.5px);
        right: 0px;
        justify-self: right;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 5;
        height: 40px;
        width: 40px;
    }
    #menu2:active{
        background-color: transparent;
        -webkit-tap-highlight-color: transparent;
    }
    #menu2 #ico #burger{
       background-color: transparent;
       top: 0px;
        right: 0px;
        margin: 0px;

    }
    #logo{
        background-color: transparent;
        font-size: 30px;
    }
    #logo.down{
        background-color: #f5efe3;
    }
    #menu2.down{
         display: flex;
        width: fit-content;
        padding: 0px;
        position: fixed;
        margin: 2px 5px;
        font-size: 25px;
        top: 0;
        background-color: #f5efe3;
        right: 6px;
        justify-self: right;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 10;
        position: fixed;
        }
    #burgerlinks{
        background-color: #f5efe3;
        height: 10;
        width: 100%;
        height: 100%;
        position: fixed;
        font-size: 38px;
        z-index: 1;
        right: 0px;
        top: 0px;
        bottom: 0px;
        position: fixed;
        #menu2{
            right: 200px;
            top: 0px;
        }
        #burgernadpis p{
            font-size: 30px;
        }
        border-radius: 0px;
    }
    #menu2 #ico .hidden{
        display: none;
    }

    
    nav{
        position: absolute;
        right: 25px;
    }
    nav a {
        padding-right: 0px;
        margin-right: 20px;
    }
    body .noscroll{
        overflow: hidden;
    }
    #sluzby #one:hover{
transform: scale(1);
}
#sluzby #two:hover{
transform: scale(1);
}

#sluzby #three:hover{
transform: scale(1);
}

#sluzby #four:hover{
transform: scale(1);
}

#sluzby #five:hover{
transform: scale(1);
}

#sluzby #six:hover{
transform: scale(1);
}
    #sluzby{
        gap: 5px;
    }
    .block2 .b2n{
        width: 210px;
        margin-right: 0px;
    }
        .block2 .b2m{
        width: 210px;
        margin-right: 0px;
    }
        .block2 .blockcontent{
        padding: 20px;
    }
            .block3 .blockcontent{
        padding: 20px;
    }
            .block1 .blockcontent{
        padding: 20px;
    }
    
        .block2 .b2r{
        width: 240px;
        margin-right: 0px;
        padding: 0px;
    }
    #manual #auimg {
        width: 170px;
        height: 170px;
    }
        #gong #zuliaoimg {
        width: 200px;
        height: auto;
        padding-left: 0px;
        padding-right: 24px;
    }
            #gong #gongimg {
        width: 130px;
        height: auto;
        padding: 10px;
    }
        #about #aboutblock {
            width: 265px;
        }
    #ceny2{
        display: inline;
        background-color: #e6d3b9ad;
    padding: 30px;
    border-radius: 10px;
    margin: 25px auto;
    width: clamp(280px, 80%, 400px);
    display: flex
;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
}
#ceny{
    display: none;
}

}
.block1 .blockcontent,
.block2 .blockcontent,
.block3 .blockcontent {
    max-width: 800px;
    width: 100%;
    text-align: center;
    font-size: 22px;
    line-height: 1.6;
    border-radius: 8px;
    box-shadow: none;
    padding: 30px 35px;
}

.block1 .nadpis,
.block2 .nadpis,
.block3 .nadpis {
    font-size: 48px;
    margin-bottom: 18px;
    color: #ca8a77;
    text-align: center;
    line-height: 1.1;
}
.block2 .nadpis,
.block3 .nadpis {
    font-size: 48px;
    margin-bottom: 18px;
    color: #7d7d7d;
    text-align: center;
    line-height: 1.1;
}

.block1 #citatblock1,
.block2 #citatblock1,
.block3 #citatblock1 {
    width: 100%;
    font-size: 18px;
    margin-bottom: 12px;
    background: none;
    padding: 0;
}

.block1, .block2, .block3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-direction: row;
}



.block1#contacts {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 10px !important;
    box-sizing: border-box;
}

.block1#contacts .blockcontent {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    text-align: center;
}

.block1#contacts #iglink,
.block1#contacts #maillink,
.block1#contacts #telefon,
.block1#contacts #gm {
    display: inline-block;

}

.block1#contacts #gm {
    width: 80% !important;
    margin-top: 20px !important;
}
#sluzby  a{
    border-radius: 5px;
}
@media (max-width: 1100px){
        .block1, .block2, .block3 {
            gap: 0px;
    }
}
#holistic{
    margin-top: 10px;
}
#about .blockcontent{
    margin-right: 5%;
}
#holistic .blockcontent{
    margin-left: 5%;
}
.dropdown4 {
            position: relative;
            display: inline-block;
        }

        .dropdown-content4 {
            display: none;
            position: absolute;
            background-color: #ffffff;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            padding: 8px 12px;
            border-radius: 5px;
            left: 50%; /* Center the dropdown horizontally */
            transform: translateX(-50%); /* Adjust for centering */
            bottom: 120%; /* Position above the icon */
            white-space: nowrap; /* Prevent text from wrapping */
            text-align: center;
        }

        .dropdown-content4 p {
            color: #7d7d7d;
            font-size: 14px;
            margin: 0;
        }

        .dropdown4:hover .dropdown-content4 {
            display: block;
        }
.dropdown5 {
            position: relative;
            display: inline-block;
        }

        .dropdown-content5 {
            display: none;
            position: absolute;
            background-color: #ffffff;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            padding: 8px 12px;
            border-radius: 5px;
            left: 50%; 
            transform: translateX(-50%); 
            bottom: 120%; 
            white-space: nowrap;
            text-align: center;
        }

        .dropdown-content5 p {
            color: #7d7d7d;
            font-size: 14px;
            margin: 0;
        }

        .dropdown5:hover .dropdown-content5 {
            display: block;
        }
#reservationbutton{
    background-color: #f5efe3;
    border: solid 3px #ca8a77;
    color: #ca8a77;
    position: fixed;
    bottom: 40px;
    right: 25px;
    padding: 10px;
    font-family: "Quicksand", sans-serif;
    border-radius: 5px;
    font-size: 25px;
    font-weight: 200;
    cursor: pointer;
    width: 13%;
    z-index: 9999;
    height: 58px;
        transition: background-color 0.3s ease, transform 0.3s ease;


}
#reservationbutton:hover{
    transform: translateX(-5px);
}
@media (max-width: 1100px) {
            .dropdown5:hover .dropdown-content5 {
            display: none;
        }
                .dropdown4:hover .dropdown-content4 {
            display: block;
        }
        .block1 #iglink, .block1 #maillink, .block1 #telefon{
            font-size: 40px;
            padding: 0px 13px;
        }
        footer{
            border-radius: 0px;
        }
}
#exclusive{
    background-color: #e2c5bc;
}
#extext{
    font-size: 20px;
}
@media (max-width: 1305px) {
    #about .blockcontent{
        margin-right: 0px;
    }
    #holistic .blockcontent {
     margin-left: 0px; 
}
.dropdown3  {
    margin-left: 20px;
}
#notadoButtonHide2103{
    display: none;
}
#reservationbutton{
    font-size: 23px;
    width: 167px;
}
    #calendar-toggle-button2, #calendar-toggle-button{
    width: 167px;
}
#calendar-container {
        top: auto;
        bottom: 20px;
        transform: none;
        right: 10px;
        flex-direction: row-reverse;
        align-items: center;
    }

    #calendar-toggle-button {
        border-radius: 5px;
        margin-bottom: 0;
    }

    #calendar-content {
        width: 90vw;
        max-width: 350px;
        max-height: 60vh;
        position: absolute;
        bottom: 0;
        right: calc(100% + 10px);
        transform: translateY(100%);
        opacity: 0;
    }


    #calendar-container {
    position: fixed;
    right: 25px;
    bottom: 70px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    width: fit-content;
}
}

#notadoButtonHide2103{
    display: none;
    z-index: 99;
}
#calendar-container {
    position: fixed;
    right: 25px;
    bottom: -160px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    width: 13%;
}

#calendar-toggle-button, #calendar-toggle-button2 {
    background-color: #f5efe3;
    border: solid 3px #ca8a77;
    color: #ca8a77;
    padding: 10px 15px;
    border-radius: 5px 5px;
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1001;
    pointer-events: auto;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 200;
    font-family: "Quicksand", sans-serif;
    height: 58px;

    
}

#calendar-toggle-button:hover {
    transform: translateX(-5px);
}

#calendar-content {
    background-color: #f7f3f0;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    width: 350px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    max-height: 470px;
    min-height: 470px;
    overflow-y: auto;
}

#calendar-content.calendar-visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
#calendar-toggle-button2{
    display: none;
}
@media (max-width: 768px) {
    #calendar-container {
        top: auto;
        bottom: 30px;
        transform: none;
        right: 10px;
        flex-direction: row-reverse;
        align-items: center;
    }

    #calendar-toggle-button {
        border-radius: 5px;
        margin-bottom: 0;
    }

    #calendar-content {
        width: 90vw;
        max-width: 350px;
        max-height: 60vh;
        position: absolute;
        bottom: 0;
        right: calc(100% + 10px);
        transform: translateY(100%);
        opacity: 0;
    }

    #calendar-content.calendar-visible {
        transform: translateY(0);
        opacity: 1;
    }
    #calendar-toggle-button2{
    display: inline;
    width: 167px;
}
#calendar-toggle-button{
    display: none;
}
    #calendar-container {
    position: fixed;
    right: 25px;
    bottom: 70px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    width: fit-content;
}
}


@media (max-width: 1305px) {
    #about .blockcontent{
        margin-right: 0px;
    }
    #holistic .blockcontent {
     margin-left: 0px; 
}
.dropdown3  {
    margin-left: 20px;
}
#notadoButtonHide2103{
    display: none;
}
#reservationbutton{
    font-size: 23px;
    width: 167px;
}
    #calendar-toggle-button2, #calendar-toggle-button{
    width: 167px;
}
#calendar-container {
        top: auto;
        bottom: 20px;
        transform: none;
        right: 10px;
        flex-direction: row-reverse;
        align-items: center;
    }

    #calendar-toggle-button {
        border-radius: 5px;
        margin-bottom: 0;
    }

    #calendar-content {
        width: 90vw;
        max-width: 350px;
        max-height: 60vh;
        position: absolute;
        bottom: 0;
        right: calc(100% + 10px);
        transform: translateY(100%);
        opacity: 0;
    }


    #calendar-container {
    position: fixed;
    right: 25px;
    bottom: 70px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    width: fit-content;
}
}
h2, h1, h3, h4, h5, h6{
    font-weight: 200;
}
#citat h1{
    text-decoration: none;

}
.m{
        display: none;
    }
@media (max-width: 1100px) {
    .block3 .blockcontent {
        padding: 0px 30px 30px 30px ;
    }
        .block2 .b2n {
        display: none;
    }
    .block2 .b2m{
        display: inline;
        padding-left: 22px;
    }
    .block2 .blockcontent{
        padding-top: 0px;
    }
    #gong #zuliaoimg{
        padding-left: 0px;
    }
    #exclusive .nadpis{
        margin-top: 20px;
    }
}