:root {
     --hlavni: #1d0903;
     --bila: #ffffff;
     --hneda-tmava: #362424;
     --hneda: #471c10;
     --akcent: #a88754;
     --gold: #fde9a8;
     --light: #f2efea;
}


body,
html {
     font-family: "Outfit", sans-serif;
     background: var(--bila);
     font-size: 18px;
}


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

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

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

}

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

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

footer {
     background-color: var(--hlavni);
}

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

ol {
     list-style-type: lower-alpha;
}

h1 {
     margin-top: 0;
     margin-bottom: 0;
     padding:1rem;
     font-weight: 700;
     text-align: center;     
     font-size: 300%;
     background-color: #1c0904;
     color:var(--gold);
}

h2 {
     font-weight: bold;
     font-size: 240;
}

h3 {
     margin: 2rem 0 1rem 0;
     color: var(--akcent);
}

a {
     text-decoration: underline;
}

form {
     border: 1px solid #dddddd;
}

.color-box{
     background-color: var(--akcent);
     padding:1.4rem 2rem;
     color: var(--bila);
}
.navbar-collapse {
     text-align: center;
}

.navbar-toggler {
     border: 1px solid var(--hneda);
     margin-left: auto;
     margin-bottom: 1rem;
     margin-top: -1rem;
}

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

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

.btn-dark:hover,
.btn-outline-dark:hover {
     background-color: #991d21;
     border-color: #991d21;
}


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

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

#main-nav {
     -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.17);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.17);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.17);
}

.uvadi {
     background-color: var(--hneda-tmava);
     background: url(../img/main/motive3.webp) no-repeat;
     background-size: cover;
     background-position: center;
     font-size: 140%;
     min-height: 750px;
     padding: 1rem;
     text-align: left;
}

.uvadi img {
     height: 120px;
     margin: 1rem 0;
}

.uvadi h1 {
     color:var(--gold);
     text-align: left;
     font-size: 480%;
     margin: 2rem 0;
     margin-bottom: 4rem;
     font-weight: bolder;
     line-height: 1.0;
     background-color: transparent;
}

.uvadi h1 strong {
     font-size: 120%;
}

.height-full {
     height: 100vh;
}

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

li {
     display: block;
}

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

section li {
     display: list-item;
}

.table.bg-light td,
.table.bg-light th {
     border-color: #fff;
     border-width: 2px;
}

.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;
     text-transform: uppercase;
}

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-secondary {
     background-color: #ebebeb !important;
}

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

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

.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;
     overflow: hidden;
}

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

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

.popisek{
     line-height: 1;
     margin-bottom:0.5rem;
}

.form-group{
     margin-bottom: 1.5rem;
}

.form-control-nadpis{
     margin-top:0.5rem;
}

.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;
     margin-bottom: 1.5rem;
     margin-top: 1.5rem;
}

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


.photos .item,
#home-images .item,
.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: 1250px;
}

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 {
     position: absolute;
     right: 1rem;
     top: 2rem;
}

.btn-success:disabled{
     background-color: silver;
     border-color: gray;
}

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

.logo {
     text-align: center;
     padding: 1rem;
}

.logo img {
     max-width: 250px;
}

.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;
}

.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;
}

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

.list1 li{
     margin-bottom:0.7rem;
     line-height: 1.6;
     text-align: justify;
}

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

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

.btn-theme {
     background-color: var(--gold);
     color: var(--hneda);
     padding: 12px 25px !important;
     text-transform: uppercase;

}

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

.alert-warning{
     border-color: #fdd766;
}

.alert-success{
     border-color:#6ce488;
}

.home-img-box .item {
     min-height: 450px;
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     border: 0px solid #fff;

}

.home-img-box h2 {
     font-size: 320%;
     margin-top:1rem;
     text-align: center;
}

.home-img-box h3 {
     font-size: 250%;
     margin-top:0;
     text-align: center;
}

.home-img-box .item.marx {
     background-image: url(../img/main/bg-marx.webp);
     -webkit-filter: grayscale(100%);
}

.home-img-box .item.graz {
     background-image: url(../img/main/bg-graz2.webp);
     -webkit-filter: grayscale(100%);
}

.box-ndps-dark {
     background: rgba(255, 255, 255, 0.8);
     color: var(--light);
     padding: 1rem 3rem;
     float: Left;
     margin: 10px;
     margin-left: -5px;

}

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

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


@media (min-width: 2000px) {
     .uvadi {
          aspect-ratio: 2.6 / 1;
     }
}


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

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

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

     .logo {
          text-align: left;
     }
}

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

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

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

     .uvadi {
          background-color: #03091b;
          background-image: url(../img/main/motive3-2.webp);
          background-repeat: no-repeat;
          background-size: 900px;
          background-position: right bottom;
          font-size: 140%;
          min-height: 750px;
          padding: 1rem;
          text-align: center !important;
          display: block !important;
          align-items: baseline !important;
     }
}

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