* {box-sizing: border-box; position: relative}
body{background: white; font-family: 'Palanquin', sans-serif !important; color: black; padding: 0 0 0 300px; font-size: 20px; margin: 0}
h1{width: 100%; color: transparent; text-align: left; padding: 0; font-family: 'Bree Serif', serif !important; margin-bottom: 100px}
a{color: #1999d8; text-decoration: none}
a:hover, a:active, a:visited, a:focus{text-decoration: none}
p{text-align: justify}
.content {padding: 60px; min-height: 100vh; width: 100%; max-width: 1200px}
#menu{max-width: 1200px}
.page {min-height: 100%; width: 100%; padding: 0px; position: relative; background-color: white}
#logo-hor{display: none}
#logo-vert{position: absolute; left: 0px; width: 300px; text-align: center; z-index: 1500; padding-top: 80px}
#perec{position: fixed; bottom: 0px; left: 0; width: 300px; text-align: center; z-index: 2000}
#perec .inner{float: right; right: 50%}
#perec img{width: 100%; right: -50%}

.oppenned span:nth-child(2){width: 500px !important; height: 500px !important}
.oppenned .sub-menu{width: 500px !important; height: 500px !important}
.pswp{z-index: 100000 !important}
.pswp__ui{min-height: 100vh}

#homepage{z-index: 1; background: transparent}
#projekt{z-index: 2}
#novosti{z-index: 3}
#galerija{z-index: 4}
#faq{z-index: 5}
#kontakt{z-index: 6}
#homepage .content{display: flex; flex-direction: column; justify-content: center}
#inverse{background: #032947; width: 300px; height: 100%; position: fixed; left: 0; top: 0; z-index: 1000}
.eu-strip{position: absolute; bottom: 0; right: 0; text-align: right}
.eu-strip p{position: absolute; bottom: 10px; right: 20px; color: silver}
.eu-strip img{max-width: 90%}
.main-title{margin: 0 auto; padding-bottom: 150px}
.main-title *{white-space: nowrap}
.main-title h1{margin: 0; padding: 0 0 10px 100px; text-align: left; color: #032947; font-size: 48px}
.main-title img{float: left; margin: 8px 20px 0 0}
.main-title p{padding-left: 100px; color: gray; margin: -10px 0 0 0; font-size: 16px}

.naglaseno {font-weight: bold; margin-bottom: 100px}
.content > p, #hidden-content * {text-align: justify}
#hidden-content{display: none}
#gallery-hidden-content{display: none}

.sub-menu a{font-weight: bold}
a.vise{display: inline-block; margin-top: 50px; font-weight: bold; padding: 10px; color: #1999d8}
a.vise:hover{text-decoration: none; cursor: pointer}
#projekt .content{padding-bottom: 100px}
.faq-item{padding: 20px 0; }

#kontakt h1{margin-bottom: 50px}
.blue-box{width: 50px; height: 50px; background-color: #1999d8; margin-bottom: 30px}
#info {z-index: 100}
#info a{color: inherit}
#map-container{position: absolute; top: 0; right: 0; height: 100%; width: 100%}
#map-container .inner {padding-left: 400px; height: 100%}
#map{height: 100%}
.dno{position: absolute; left: 60px; bottom: 60px; z-index: 100}
.dno a{}
#map-dno{display: none}

.carousel-control-next, .carousel-control-prev{font-size: 36px; color: #000 !important; width: 60px !important}
.carousel-control-prev{left: -60px !important}
.carousel-control-next{right: -60px !important}
#carousel .carousel-indicators{bottom: -10px}
#carousel .carousel-indicators li{background-color: rgba(0,0,0,.5)}
#carousel .carousel-indicators .active{background-color: black}

.modal-backdrop{z-index: 100009 !important}
#modal-message{z-index: 100010}

.cookie-confirm {position: fixed; bottom: 0; left: 0; z-index: 10000; padding: 10px; background: black; opacity: 0.9; color: white; width: 100%}
.cookie-confirm p {margin: 0; margin-right: 105px; opacity: 1; line-height: 1.5}
.cookie-confirm button {float: right; opacity: 1}

.blur{color: transparent; animation: blur 1s ease-out forwards; -webkit-animation: blur 1s ease-out forwards}
@keyframes blur {
	0%		{text-shadow:  0 0 100px #000; opacity:0;}
	33%		{text-shadow:  0 0 90px #000;}
	66%		{opacity: 1;}
	100%		{text-shadow:  0 0 0px #000}
}

@-webkit-keyframes blur {
	0%		{text-shadow:  0 0 100px #000; opacity:0; color: transparent}
	33%		{text-shadow:  0 0 90px #000;}
	66%		{opacity: 1;}
	100%		{text-shadow:  0 0 0px #000;}
}
/* portrait phones */
@media(max-width: 575.98px){
	
}

/* landscape phones */
@media(max-width: 767.98px){
	body{padding: 0; font-size: 16px}
	h1, .naglaseno{margin-bottom: 50px}
	#inverse{width: 100%; height: 150px; float: none}
	.page{padding-left:0}
	.main-title{display: none}
	.content{padding: 20px}
	#logo-vert{display: none}
	#logo-hor{display: flex; flex-direction: column; justify-content: center; margin: 35px 130px 0 35px; height: 80px}
	#logo-hor img{max-width: 100%}
	#perec{position: relative; left: 0px; width: 100%; margin-top: 150px; z-index: 1}
	#perec .inner{float: none; right: 0; left: 0}
	#perec img{left: 0; right: 0}
	.blue-box{float: left}
	#kontakt p{padding-left: 100px}
	.eu-strip p{font-size: 60%}
	.eu-strip img{bottom: 20px}
	.carousel-control-next, .carousel-control-prev{display: none !important}
	/*.carousel-control-next, .carousel-control-prev{position: relative !important; left: 0 !important; right: 0 !important; display: inline-block !important}*/
}

/* tablets */
@media(max-width: 991.98px){
	
}

/* desktops */
@media(max-width: 1199.98px){
	#map-container{position: relative}
	#map-container .inner{padding: 0; height: 80vh}
	#kontakt .content{min-height: auto}
	#kontakt .dno{display: none}
	#map-dno{display: block; padding: 20px}
}