:root {
     --hlavni: #212529;
     --bila: #ffffff;
     --hneda-tmava: #362424;
     --hneda: #471c10;
     --akcent: #f7cdd4;
     --akcent-dark: #f15173;
     --light: #f2efea;
}


body,
#motive h2,
html {
     font-family: "Outfit", sans-serif;
}

body,
html {
     background: var(--bila);
     font-size: 18px;
}

.font-2 {
     font-family: "Oregano", cursive;
     font-weight: 700;
     font-style: normal;
}


/* hlavni */
body,
.box-ndps-dark a:hover,
.box-ndps-dark,
a:hover {
     color: var(--hlavni);
}

/* bila */
h1,
.uvadi,
.scrollup,
#_map,
.scrollup:hover,
.bg-dark-image,
.bg-dark-image a {
     color: var(--bila);
}

/* hneda */
.box-ndps-dark a,
.uvadi h1,
.uvadi h2,
a:hover,
.nav-item.active a,
#main-nav a,
.navbar-toggler {
     color: var(--hneda);

}

/* akcent */
a,
h3 {
     color: var(--hneda);
}

footer,
footer a,
footer a:hover {
     color: var(--bila);
}

footer {
     background-color: var(--akcent-dark);
}

#main-nav {
     margin-bottom: 0;
}

h1 {
     padding-top: 2rem;
     font-weight: 700;
     text-align: center;
     padding-bottom: 2rem;
     font-size: 300%;
     background-color: var(--hneda);
     color: var(--akcent);
}

h2 {
     font-weight: bold;
     font-size: 240;
     margin-bottom: 1.5rem;
     text-transform: none;
}

h3 {
     margin: 2rem 0 1rem 0;
     font-weight: bold;
     font-size: 200%;
}

h4 {
     margin-bottom: 1rem
}

a {
     text-decoration: underline;
}

form {
     border: 1px solid #dddddd;
}

.navbar-collapse {
     text-align: center;
}

.navbar-toggler {
     border: 1px solid var(--hneda);
     margin-left: auto;
     z-index: 1000;
     position: relative;
}

.btn,
.nav-item a {
     text-decoration: none;
}

.btn-dark {
     background-color: var(--hneda);
     border-color: var(--hneda);
}

.btn-danger{
     background-color: var(--akcent-dark);
     border-color: var(--akcent-dark);
}

.btn-xl{
     font-size:160%;
}

#motive .btn-outline-dark {
     border-color: var(--akcent-dark);
     color: var(--akcent-dark);
}

.btn-dark:hover,
#motive .btn-outline-dark:hover {
     background-color: var(--akcent-dark);
     color: var(--light);
}

body.index header,
#home-images {
     background-color: var(--light);
}

header {
     background-color: var(--akcent);
}

.img-motive {
     background: url(../img/main/motive2-orez.webp) no-repeat;
     background-position: top center;
     background-size: auto 100%;
     height: 100%;
}

.uvadi {
     font-size: 140%;
     padding: 1rem;
     padding-bottom: 0;
     text-align: left;
}

.uvadi .btn {
     position: relative;
     z-index: 1000;
}

.uvadi h1 {
     background-color: transparent;
     text-align: right;
     font-size: 440%;

     margin-bottom: 4rem;
     font-weight: bolder;
     line-height: 0.8;

}

.uvadi h2 {
     text-align: right;
     line-height: 1.4;
     font-weight: normal;
     text-transform: uppercase;
}

.uvadi h1 strong {
     font-size: 79%;
     font-weight: normal;
}

.height-full {
     height: 100vh;
}

p {
     margin-bottom: 20px;
     line-height: 1.3;
}

li {
     display: block;
}

.navbar-nav li {
     list-style-type: none;
}

section ul {
     list-style-type: disc !important;
     padding-left: 3rem;
}

section li {
     display: list-item;
}

.social ul {
     margin-left: 0;
     padding-left: 0;
}

.social li {
     list-style-type: none;
     display: inline;
     padding: 0 0.5rem;
     font-size: 130%;
}

.box {
     padding: 3rem;
}

.social li::before,
nav li::before {
     content: '';
}

nav li a {
     font-weight: bold;
}

nav {
     margin-bottom: 1rem;
}

.social ul {
     margin: 2rem 0 0 0;
}

section,
.section-box {
     padding: 4rem 0 4rem 0;
}

section h2 {
     text-align: center;
     font-size: 280%;
     margin-bottom: 2rem;
}

.bg-gray {
     background: #333d47;
}

.bg-akcent {
     background-color: var(--akcent);
}

.bg-secondary {
     background-color: #ebebeb !important;
}

.bg-white {
     background: var(--bila);
}

.text-big {
     font-size: 140%;
}

.text-akcent {
     color: var(--akcent);
}

.ul-center {
     text-align: center;
     padding-left: 0;
     margin-left: 0;
}

.ul-center,
.ul-center li {
     list-style-type: none !important;
}

.img-box {
     overflow: hidden;
}

.img-box a {
     display: block;
     float: left;
     margin: 0.2rem 0;
     overflow: hidden;
}

.col-no-padding .img-box a {
     margin: 0;
}

.img-box.gallery a {
     width: 100%;
     height: 250px;
}

.img-box img {
     object-fit: cover;
     width: 100%;
     height: 100%;
}

.photos .item,
#home-images .item {
     transition: 1s;
}

/* Po udalosti */
#ico-social a:hover,
.ckr_box:hover,
.photos .item:hover,
#home-images .item:hover,
.photos-list .obsah:hover {
     transition: 0.3s;
}

.photos .item p {
     line-height: 1;
     margin: 0.5rem 0;
}

.scrollup:hover {
     opacity: 1;
     filter: alpha(opacity=100);
}

.photos .item,
.ball-images img,
#home-images .item,
.img-box img {
     border: 8px solid var(--bila);
}

.photos .item {
     float: left;
     padding: 5px;
     margin: 0 10px 5px 0;
     position: relative;
     width: 100%;
     height: 200px;
     overflow: hidden;
     margin-bottom: 1em;
     padding: 0;
     background: var(--bila);
}

#home-images .item {
     overflow: hidden;
     height: 350px;
}

#home-images .item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}


.photos .item,
#home-images .item,
.home-box .card,
.img-box a {
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}


.photos .item img {
     position: absolute;
     left: 50%;
     top: 50%;
     height: auto;
     width: 100%;
     max-width: none !important;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

.container {
     max-width: 1350px;
}

footer {
     padding: 2rem 0;
}

footer p {
     margin-bottom: 35px;
}

p.text-muted {
     line-height: 1;
}

p.text-muted small {
     color: rgba(0, 0, 0, 0.5);
}

/* vychozi */
.btn-black,
.home-motive-btn .btn {
     transition: 1s;
}

/* hover */
.btn-black:hover,
.home-motive-btn .btn:hover {
     transition: 0.3s;
}

.lang {}

.lang .btn-dark,
.lang .btn:hover {
     color: var(--bila) !important;
}

.lang .btn:hover {
     background-color: var(--hneda) !important;
}

.sub-menu {
     text-align: center;
     margin-bottom: 2rem;
}

.logo {
     padding-top: 1rem;
     padding-bottom: 1rem;
}

.logos img{
     margin:1rem;
}

.logo a {
     position: relative;
}

.logo img {
     max-width: 380px;

}

.logo-cokofest img {
     max-width: 140px;
}

.scrollup {
     font-size: 150%;
     z-index: 1000;
     padding: 5px 10px;
     position: fixed;
     bottom: 20px;
     right: 20px;
     background-color: #000;
     opacity: 0.4;
     filter: alpha(opacity=40);

}

.scrollup,
.photos .item,
#home-images .item,
form,
.bg-ball img {
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
}

.scrollup:hover {
     opacity: 1;
     filter: alpha(opacity=100);
}

.btn {
     font-weight: bold;
     text-transform: uppercase;
}

#jumbotron {
     min-height: 80vh;
     text-align: center;
}

#motive {
     background-color: var(--akcent);
}

.bg-dark-image {
     background: url(../img/main/dark-image.jpg) no-repeat;
     background-position: bottom center;
     background-size: cover;
}

.bg-ball {
     background: url(../img/main/balonky.jpg) no-repeat;
     background-position: top center;
     background-size: cover;
}

.bg-light {
     background-color: var(--light) !important;
}

.ball-images img {
     max-height: 250px;
     margin: 5px;
}

.ball-images {
     margin-bottom: 2rem;
}

#_map .globe {
     background: url(../img/main/globe.jpg) no-repeat;
     background-position: center;
     background-size: cover;
}

#_map .map {
     min-height: 500px;
}

.no-padding {
     padding: 0;
}

.col-no-padding {
     [class*="col-"] {
          padding-left: 0 !important;
          padding-right: 0 !important;
     }
}

.milk {
     background: url(../img/main/milk.png) no-repeat;
     background-position: center;
     background-size: auto;
}

.li-column-4 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
}

.text-left {
     text-align: left !important;
}

.btn-theme {
     background-color: var(--akcent);
     color: var(--bila);
     padding: 5px 25px !important;
     text-transform: uppercase;

}

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



.home-box {
     padding: 4rem 1rem 3rem 1rem;
     text-align: center;
}

.home-box h2 {
     font-size: 320%;
}

h2,
.uvadi h1,
.home-box h2 {
     font-family: "Italianno", cursive;
     letter-spacing: -1px;
}

.home-box h2 {
     color: var(--hneda);
}

.home-box .card h3 {
     color: var(--akcent);
     font-size: 150%;
     margin-top: 0;
}


.home-box .card-header {
     background-color: var(--hneda);
     color: var(--light);
     -webkit-border-top-left-radius: 20px;
     -webkit-border-top-right-radius: 20px;
     -moz-border-radius-topleft: 20px;
     -moz-border-radius-topright: 20px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
}

.home-box .card {
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     border-radius: 20px;
     font-size: 130%;
}

.box-ndps-dark {
     background: rgba(255, 255, 255, 0.9);
     padding: 1rem 4rem;
     text-align: center;
     margin-bottom: 2rem;
}

.text-dark {
     color: var(--hneda) !important;
}

#motive h2,
.text-akcent-dark {
     color: var(--akcent-dark) !important;
}

#motive h2 {
     font-weight: bold;
     font-size: 180%;
     line-height: 1.5;
}

#motive h3 {
     font-weight: normal;
     line-height: 1.4;
     font-size: 90%;
     text-align: right;
}

.box-ndps-dark table td,
.box-ndps-dark table th {
     text-align: left;
}

.box-ndps-dark h2 {
     font-size: 240%;
     color: var(--hneda-tmava);
}

.box-ndps-dark h3 {
     margin-top: 1rem;
     font-size: 200%;
     color: var(--akcent);
}

.uvadi .btn {
     margin-top: -12rem;
}

.images-home {
     border-top: 8px solid #fff;
     background: url(../img/main/images.webp) no-repeat;
     background-position: center;
     background-size: cover;
     min-height: 800px;
}

.table .btn,
.navbar-admin .nav-link {
     text-transform: none;
}

.webmin-page table {
     font-size: 90%;
}

.table .btn {
     text-transform: none;
     font-weight: normal;
}


@media (min-width: 2000px) {}


/* responsive */
@media (max-width: 768px) {
     .li-column-4 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
     }
}

@media screen and (max-width: 1650px) {
     .uvadi h1 {
          font-size: 300%;
     }
}

@media screen and (max-width: 1400px) {
     .uvadi h1 {
          font-size: 260%;
     }

     .uvadi h2 {
          font-size: 130%;
     }

     .uvadi .btn {
          margin-top: -5rem;
     }
}

@media screen and (max-width: 1100px) {
     .height-full {
          height: auto;
     }

     #motive h2 {
          font-size: 120%;
     }

     .uvadi img {
          margin-top: 0;
     }

     .uvadi h1 {
          font-size: 250%;
     }

     .uvadi {
          min-height: auto !important;
     }

     .img-motive {
          background-size: cover;
          background-position: top left;
     }

}

@media screen and (max-width: 880px) {
     .uvadi h1 {
          font-size: 200%;
     }

     .uvadi h2 {
          font-size: 110%;
     }

     .uvadi .btn {
          margin-top: 0;
          margin-bottom: 2rem;
     }

     .home-img-box {
          font-size: 110% !important;
          overflow: hidden;
     }

}

@media screen and (max-width: 760px) {

     .text-center-mobile,
     #motive h3 {
          text-align: center;
     }

     .img-motive {
          min-height: 400px;
     }

     .uvadi h1,
     .uvadi h2 {
          text-align: center !important;
          font-size: 200%;
          padding: 0.5rem 0;
     }

     .uvadi h2 {
          font-size: 100% !important;
     }

     .uvadi .btn {
          margin-top: 0;
          margin-bottom: 2rem;
     }

     h2 {
          overflow: auto;
          font-size: 195% !important;
     }

     .home-img-box {
          font-size: 100% !important;
          overflow: hidden;
     }

     .img-motive {
          background-position: top center;
     }
}

@media screen and (max-width: 445px) {
     .logo img {
          max-width: 180px;
          margin-top: 0.5rem;
     }

     h1 {
          font-size: 170%;
     }

     .box-ndps-dark {

          width: 100%;
     }


}