.urbanist {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.allura {
  font-family: "Allura", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.orange {
color: #bc873e; }

body {
font-family: "Urbanist", sans-serif;
color: #585f34;
font-size: 1.1em;
background-color: #faf5ee; }


.hero-bg {
height: 600px;
background-size: cover;
background-position: 100% 0%;
background-repeat: no-repeat; }

.hero-index-bg {
background-image: url('/layout/img/hero.jpg'); }

.hero-index-bg2 {
background-image: url('/layout/img/hero2.jpg'); }


#header {
background-image: url('../img/header-bg1.png'),url('../img/header-bg2.png');
background-size: auto 110px, auto 110px;
background-position: 0% 50%, 100% 50%;
background-repeat: no-repeat,no-repeat; }


h1,h2,h3 {
color: #404825;
font-family: Cardo; }

h2 {
font-family: Cardo;
font-weight: 800;
color: #404825; }

h3 {
font-weight: bold;
font-size: 1.15em; }

.dark {
color: #404825; }


/* ========================================
   DESKTOP
   ======================================== */



#mainmenu {
    width: 100%;
}

#mainmenu .navbar-collapse {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

/* Levá část */
#mainmenu .menu-left {
    justify-content: flex-end;
    padding-right: 50px;
}

/* Pravá část */
#mainmenu .menu-right {
    justify-content: flex-start;
    padding-left: 50px;
}

/* Logo */
#mainmenu .logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    /* prostor kolem loga */
    padding: 20px 40px;
}

#mainmenu #logo {
    display: block;
    width: auto;
    max-height: 140px;
    height: auto;
}

/* Menu položky */
#mainmenu .navbar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

#mainmenu .nav-link {
    white-space: nowrap;
    padding: 10px 12px;
    font-family: "Urbanist";
    color: #565d3c;
    font-weight: bold;
}


/* ========================================
   MOBIL
   ======================================== */

@media (max-width: 991.98px) {

    #mainmenu .navbar-collapse {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding-top: 20px;
    }

    #mainmenu .logo-wrapper {
        order: -1;
        padding: 10px 0 20px;
    }

    #mainmenu #logo {
        max-height: 100px;
    }

    #mainmenu .menu-left,
    #mainmenu .menu-right {
        width: 100%;
        padding: 0;
        flex-direction: column;
        align-items: center;
    }

    #mainmenu .navbar-nav {
        gap: 0;
    }

    #mainmenu .nav-link {
        padding: 8px 0;
    }
}



.index-oils,
.index-bars {
    min-height: 250px;
    background-color: #f1e7db;
    overflow: hidden;
    border-radius: 16px;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, 50% 100%;
}

.index-oils {
    background-image:
        linear-gradient(to right, transparent 0%, transparent 35%, #f1e7db 50%),
        url("../img/home1.jpg");
    background-position: left center, left center;
}

.index-bars {
    background-image:
        linear-gradient(to left, transparent 0%, transparent 35%, #f1e7db 60%),
        url("../img/home2.jpg");
    background-position: right center, right center;
}

.index-oils > div,
.index-bars > div {
width: 50%;
padding: 1rem; }

.index-bars > div {
margin-left: 0 !important;
margin-right: auto; }

.index-oils h2,
.index-bars h2 {
line-height: 1.5em;
overflow: hidden;
height: 3em; }

.btn-my {
padding-left: 25px;
padding-right: 25px;
border-radius: 24px;
font-size: 0.9em;
font-weight: bold;
color: white;
background-color: #585f34;
display: inline-flex;
align-items: center;
gap: 12px; }

.btn-my img {
height: 1em;
width: auto; }

.index-icons img {
width: 60px;
height: auto; }

.btn-my:hover {
color: white;
background-color: #686f44; }

.badge {
background-color: #585f34; }

.articles,
.about-me,
.background-dark {
background-color: #f3eae0; }

.radius {
border-radius: 16px; }

.article {
background-color: white;
border-radius: 16px; }

.article-image {
aspect-ratio: 4/3;
overflow: hidden; }

.article-image img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: 50% 0%;
border-top-right-radius: 16px;
border-top-left-radius: 16px; }

.article-name {
font-family: Cardo;
font-weight: bold;
color: #585f34;
text-decoration: none; }

.article-perex {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden; }

.about-me {
background-image: url('../img/about-me-bg.png');
background-size: 15% auto;
background-position: 100% 65%;
background-repeat: no-repeat }

.about-me img {
border-radius: 16px;
height: 350px;
width: auto; }

.time {
background-image: url('../img/about-me-bg.png');
background-size: 15% auto;
background-position: 100% 80%;
background-repeat: no-repeat }


.white-block {
border-radius: 16px;
background-color: white; }

.white-block:hover {
background-color: #efefef; }

.white-block img {
max-width: 60px;
height: auto; }

.white-block a {
color: black;
text-decoration: none; }

.dots-image {
border-radius: 16px;
max-width: 100%;
height: auto; }

.squares-image {
border-radius: 16px;
overflow: hidden;
aspect-ratio: 1/1; }

.squares-image img {
max-width: 100%;
height: auto; }

#copyright {
background-color: #525938;
color: white; }

#contact {
background-image: url('../img/contact-bg.png');
background-size: 100% auto;
background-position: 50% 0%;
background-repeat: no-repeat }

.contact a {
color: #404825;
text-decoration: none; }

.contact img {
height: 2em;
width: auto; }

.myul li {
list-style: none;
padding-left: 0; }

.myul li {
background-image: url("../img/ico-check.png");
background-repeat: no-repeat;
background-position: 0 2px;
background-size: 20px 20px;
padding-left: 25px; }


/* esencialni oleje */
.oils-icons img {
width: 60px;
height: auto; }

.caption2 {
line-height: 1.2;
height: calc(1.2em * 2);}


.gallery {
display: grid;
grid-template-columns: 1fr;
gap: 5px; }

.photo {
overflow: hidden;
box-sizing: border-box;
flex-grow: 1;
transition-duration: 0.5s;
aspect-ratio: 1/1; }

.photo:hover {
filter: brightness(1.2); }

.photo img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover; }

@media only screen and (min-width: 600px) {
    .gallery {
    grid-template-columns: 1fr 1fr; }
}

@media only screen and (min-width: 900px) {
    .gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
}