body {
	margin: 0;
}
.hero {
	/*display: flex;*/
	flex-direction: column;
	background-image: url("luka-slika.jpg");
	height: 100vh;
	align-self: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	align-items: center;
	justify-content: center;
	max-height: 600px;
	border-bottom-style: solid;
	border-block-width: 20px;
}

.text {
	padding-top: 160px;
}

.sloganHolder {
	text-align: center;
	color: white;
	font-size: 1.4rem;
	background-color: rgb(24,66,88, 0.3);
	border-radius: 25px;
}

.heder-contact-info{
	color: #38809f;
	text-align: right;
}

/**
navbar
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
body {
	margin:0;
	background-color: #353836;
	color: white;
	font-family: "Poppins", sans-serif;
}

.nav {
	justify-content: center;
}

nav,.navbar{height:100%;width:100%;float:left;padding:20px;background:#ffffff;color:#fff;font-family:'Poppins',sans-serif;}
.navbar .nav-container{width:100%;max-width: 1170px;margin: 0 auto;}
.navbar .nav-header{float:left;padding:10px 0}
.navbar .logo{width:100%;max-width:140px}
.navbar .logo a{font-weight:700;text-decoration:none;color:#fff;font-size:19px}
.navbar .logo img{max-width:100%}
.navbar .nav-links{margin:0;float:right}
.navbar .nav-links .nav-item{position:relative;list-style:none;float:left}
.navbar .nav-links .nav-item .nav-link{padding:10px 15px;text-transform:uppercase;display:block;text-decoration:none;color: #38809f; border-radius: 25px;}
.navbar .menu-show,.menu-hide{transition:.4s;font-size:30px;cursor:pointer;display:none}
.navbar .menu-show{margin:0;float:right}
.navbar .nav-link:hover,.menu-show:hover,.menu-hide:hover{background: rgba(62, 132, 156, 0.53);color: #fff!important; border-radius: 25px;}
.navbar #menu-toggle{position:absolute;visibility:hidden;z-index:-1}
.nav-links > .nav-item {
	border-style: solid;
	border-color: #3e849c;
	border-radius: 25px;
	margin-right: 10px;

}
@media (min-width: 768px){
	.navbar .has-dropdown ul  {position: absolute;left: inherit;top: 100%;width: 270px;padding: 0;margin-top:2px;border: unset;z-index: 100;opacity: 0;visibility: hidden;background-color: #fff;-moz-transform: translateY(30px);-webkit-transform: translateY(30px);-ms-transform: translateY(30px);-o-transform: translateY(30px);transform: translateY(30px);-webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05), -2px 0 5px 1px rgba(0,0,0,.05);-ms-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);-o-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);-moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05), -2px 0 5px 1px rgba(0,0,0,.05);-webkit-transform-origin: top;-ms-transform-origin: top;transform-origin: top;-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;transition: all 500ms ease;}
	.navbar .has-dropdown:hover ul {visibility:visible;opacity:1;-moz-transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);transition:all 500ms ease;-moz-transition:all 500ms ease;-webkit-transition:all 500ms ease;-ms-transition:all 500ms ease;-o-transition:all 500ms ease;display:block!important; border-radius: 25px;}
	.navbar .has-dropdown ul li {width: 100%;position: relative;display: block;line-height: 24px;font-weight: 500;font-size: 15px;text-transform: capitalize;color: #222;border-bottom: 1px solid rgba(34,34,34,.1);text-align: left;transition: all 500ms ease;-moz-transition: all 500ms ease;-webkit-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease}
	.navbar .has-dropdown ul li a {position: relative;display: block;padding: 15px 30px!important;line-height: 24px;font-weight: 500;font-size: 13px;text-transform: capitalize;color: #38809f !important;border-bottom: 1px solid rgba(34,34,34,.1);text-align: left;transition: all 500ms ease;-moz-transition: all 500ms ease;-webkit-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;}
	.navbar .has-dropdown ul li a:hover{background:#3e849c;color: #fff!important;}

	#languages {
		margin-top: 8px;
		float: right;
	}

	#languages a {
		padding: 5px;
	}
}
@media (max-width:767px) {
	.navbar .menu-show,.menu-hide{display:block;}
	.navbar .nav-links{
		position:fixed;
		width:100%;
		height:100vh;
		top: 0;
		left:-100%;
		padding:50px 0;
		transition:1s;
		z-index: 99;
		color: #9b9b9b;
		background: #3e849c;
		background-image: -moz-linear-gradient(45deg, black, transparent); /* FF 3.6+ */
		background-image: -ms-linear-gradient(45deg, black, transparent); /* IE10 */
		background-image: -webkit-gradient(radial, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(45deg, black, transparent); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(45deg, black, transparent); /* Opera 11.10 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent)"; /* IE8+ */
		background-image: linear-gradient(45deg, black, transparent);}
	.navbar .nav-links .nav-item{width:100%}
	.navbar .nav-links .nav-item .nav-link{padding:15px;text-align: center; color: #ffffff
	}
	.navbar .menu-hide{position:absolute;top:15px;right:20px}
	.navbar #menu-toggle:checked ~ .nav .nav-links{left:0}
	.navbar .has-dropdown ul{display:none}
	.navbar .dropdown-menu{margin:0;padding:0;border:1px solid #0000001c;flex-direction: column; width: 100%;
		background-color: #37748a;}
	.navbar .dropdown-menu li:not(:last-child){border-bottom: 1px solid #0000001c;}
	.navbar .nav-links .has-dropdown .dropdown-menu .nav-link{font-size: 13px}

	#languages {
		margin-top: 9px;
		display: inline-flex;
	}

	#languages a {
		padding: 10px;
	}
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

#brand {
	font-weight: bold;
	font-size: 18px;
	display: flex;
	align-items: center;
}

#brand a {
	color: #09c372;
}

.mainItems{
	border-radius: 5px;
	padding: 5px 8px;
	border: 1px solid #38809f;
}


#hamburger-icon {
	margin: auto 0;
	display: none;
	cursor: pointer;
}

#hamburger-icon div {
	width: 35px;
	height: 3px;
	background-color: #1c1a1a;
	margin: 6px 0;
	transition: 0.4s;
}

.open .bar1 {
	-webkit-transform: rotate(-45deg) translate(-6px, 6px);
	transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
	opacity: 0;
}

.open .bar3 {
	-webkit-transform: rotate(45deg) translate(-6px, -8px);
	transform: rotate(45deg) translate(-6px, -8px);
}
#portonName {
	font-size:100px; margin:10px; color:#b3d5e6;
}

#slogan {
	font-size:33px; color: white;
}

.rowHolder {
	display: flex;
	flex-direction: row;
}

.rowHolder > div {
	margin-right: 10%;
}

.rowHolder h3 {
	color: #39809e;
	margin: 26px 0px 5px 0px;
}

footer{
	padding: 10px 0 0;
	clear: both;
	color: #9b9b9b;
	background: #3e849c;
	background-image: linear-gradient(45deg, black, transparent);
	height: 29vh;
}

footer p.title {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
}

.box-wrapper {
	text-align: center;
}


.specialList {
	display: block;
	margin-left: 20px;
}

.specialList li {
	display: block;
	position: relative;
	margin-left: 90px;
}

.specialList li:not(:last-child) {
	margin-bottom: 16px;
}

.specialList li:before {
	content: "";
	position: absolute;
	top: 1.2em;
	left: -30px;
	margin-top: -.9em;
	background: #39809e;
	height: 12px;
	width: 12px;
	border-radius: 50%;
}

@media only screen and (max-width: 600px) {
	#hamburger-icon {
		display: block;
	}

	.hero {
		/*display: flex;*/
		flex-direction: column;
		background-image: url("luka-slika.jpg");
		height: 100vh;
		align-self: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		align-items: center;
		justify-content: center;
		max-height: 400px;
		border-bottom-style: solid;
		border-block-width: 20px;

	}

	.sloganHolder {
		text-align: center;
		color: white;
		font-size: 1.4rem;
		background-color: rgb(24,66,88, 0.3);
		border-radius: 25px;
	}

	#portonName {
		font-size:33px; margin:10px; color:#b3d5e6;
	}

	#slogan {
		font-size:23px; color: white;
	}

	footer .container{
		padding: 35px 0 0;
		clear: both;
		color: #9b9b9b;
		background: #3e849c;
		background-image: -moz-linear-gradient(45deg, black, transparent); /* FF 3.6+ */
		background-image: -ms-linear-gradient(45deg, black, transparent); /* IE10 */
		background-image: -webkit-gradient(radial, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(45deg, black, transparent); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(45deg, black, transparent); /* Opera 11.10 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent)"; /* IE8+ */
		background-image: linear-gradient(45deg, black, transparent);
	}

	footer p.title {
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		text-transform: uppercase;

	}

	.box-wrapper {
		text-align: center;
	}

	.rowHolder {
		display: flex;
		flex-direction: column;
	}

	.rowHolder p {
		font-size: 1.3em;
	}

	.specialList li {
		display: block;
		position: relative;
		margin-left: 5px;
	}

	#languages {
		margin-top: 10px;
		margin-left: 0%;
	}

	#languages a {
		padding: 5px;
	}
}

footer a {
	color: #9b9b9b;
}