@import url('uikit.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,400,700&display=swap&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');
  
/** SVETLO BRAON: #C4B799 **/
/** TAMNO BRAON: #5E3C18 **/

::-moz-selection { color: #ffffff; background: #5E3C18;}
::selection { color: #ffffff; background: #5E3C18;}

body {font-size: 16px; font-family: 'Kanit', sans-serif; font-weight: lighter; color: #333;}
a {color: #001C37;}
a:hover {text-decoration: none; color: #5E3C18;}
p {margin: 0px 0px 15px;}
em {color: #3a2218;}
.highlight {font-weight: bold; margin: 0px 5px; color: #005377;}

h3 {font-family: "Great Vibes", serif;}

.slider .uk-overlay {padding: 0px;-webkit-box-sizing: content-box;}
.slider .wrapper {width: 250px; height: 200px; padding: 30px 20px 100px; text-align: center; border-radius: 5px;}
.slider .wrapper h3 {font-family: 'Great Vibes', serif; font-size: 32px; line-height: 20px;}

.navigation {background: #fff; padding: 0px; text-align: center; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); z-index: 10; position: relative;}
.navigation .logo {width: 250px; float: left; padding: 5px 0px 5px;}
.navigation ul {float: right; margin: 3px 0px 0px 0px;}
.navigation ul li {list-style: none; display: inline; line-height: 70px;}
.navigation ul li a {color: #5E3C18; padding: 15px 30px; margin-left: 2px; font-size: 28px;}
.navigation ul li a:hover {background: #5E3C18; color: #fff; border-radius: 30px 0px 30px 0px;}
.navigation .hamburger {float: right; margin-top: 7px;}
.navigation .hamburger button svg {width: 40px; color: #C4B799;}
.offcanvas {width: 100%;}
.offcanvas .uk-offcanvas-close {color: #fff;}
.offcanvas .menu {background: rgba(94,60,24,0.9); width: 100%; height: 100%; text-align: center;}
.offcanvas .menu img {padding: 50px 50px 0px;}
.offcanvas .menu ul {margin: 0px; padding: 50px;}
.offcanvas .menu ul li {list-style: none;}
.offcanvas .menu ul li a {color: #fff; display: block; font-family: 'Great Vibes', serif; border-bottom: 1px solid rgba(255,255,255,0.2); font-size: 42px; padding: 10px 0px;}

.spotlight {background: url(../images/background.jpg) center top #5E3C18; background-size: cover; padding: 150px 0px 100px; text-align: center; color: #fff; font-size: 18px; font-weight: 200; z-index: 5; position: relative;}
.spotlight h3 {font-size: 48px; color: #fff;}
.spotlight .reservations {padding: 20px 50px; color: #fff; border: 1px solid #C4B799; border-radius: 5px; margin-top: 40px; display: inline-block;}
.spotlight .reservations:hover {border-color: #fff; background: rgba(255,255,255,0.05); box-shadow: 0px 0px 20px rgba(255,255,255,0.2)}

.gallery {padding: 30px 10px;}
.gallery h2 {font-weight: 200; text-align: center; color: #5E3C18; border-bottom: 1px solid #C4B799; padding-bottom: 10px;}

.cenovnik {background: #dfd9c9; padding: 50px;}
.cenovnik h2 {font-family: 'Great Vibes', serif; font-size: 62px; color: #3a2218;}
.cenovnik img {padding: 0px 5px;}

.contact {background: #C4B799; text-align: center; padding: 50px 0px 0px 0px; border-bottom: 15px solid #fff; font-size: 18px;}
.contact h1 {font-family: "Great Vibes", serif; font-size: 42px; line-height: 35px; text-align: center; color: #5E3C18; border-bottom: 2px dotted #fff; padding: 40px 0px 80px;}
.contact .social {margin: 50px 0px 0px; padding: 0px;}
.contact .social li {list-style: none; display: inline; padding: 0px 5px;}
.contact .social li a {color: #5E3C18;}
.contact .social li a:hover {color: #fff;}
.contact .googlemap {margin-top: 50px; border-top: 15px solid #fff;}

.footer {padding: 50px 0px 70px; background: #5E3C18; text-align: center; color: #fff;}
.footer a {color: #C4B799; font-weight: bold;}
.footer a:hover {color: #fff;}
.footer .copyright {border-bottom: 2px dotted #C4B799; padding-bottom: 20px; margin-bottom: 20px;}


/** UI KIT **/
.uk-lightbox {background: rgba(0,0,0,0.7);}
.uk-lightbox img {border: 10px solid #fff; margin: 50px 0px;}
.uk-lightbox-toolbar {background: none;}

/** ERROR PAGE **/
.errorPage {text-align: center; margin-top: 100px;}
.errorPage .error {background: #fff; padding: 100px 0px;}
.errorPage .error img {width: 500px;}
.errorPage .error p {font-size: 18px; margin-bottom: 50px;}
.errorPage .error .button {background: #5E3C18; font-weight: normal; text-transform: uppercase; padding: 5px 20px; border-radius: 50px; color: #fff;}
.errorPage .error .button:hover {background: #C4B799; text-decoration: none;}
.errorPage .error h3 {font-size: 140px; font-weight: bold; font-style: italic; color: #5E3C18; padding: 50px 0px; border-bottom: 1px solid #ccc; line-height: 110px;}

@media (max-width: 768px) {

}

@media (min-width: 768px) {
	.slider .wrapper {width: 400px; height: 200px; padding: 50px 80px 250px; text-align: center; border-radius: 5px;}
	.slider .wrapper h3 {font-family: 'Great Vibes', serif; font-size: 52px; line-height: 45px;}
	.contact h1 {font-family: "Great Vibes", serif; font-size: 62px; line-height: 40px;}
}

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

@media (min-width: 1025px) {
	.navigation .logo {padding: 17px 0px 0px 0px;}
	.slider .wrapper {width: 700px; height: 400px; padding: 50px 150px 200px; text-align: center; border-radius: 5px;}
	.slider .wrapper h3 {font-family: 'Great Vibes', serif; font-size: 72px; line-height: 60px;}
	.gallery {padding: 30px 30px;}
}