* { outline: none !important; }

body, html { height: 100%; margin: 0; padding: 0; }
body { font-family: 'Raleway', sans-serif; }
.pattern { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: url('css/pattern.png'); background-position: left top; }
.content { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; }
.container { width: 1140px; margin: 0 auto; }
.main-menu { position: absolute; bottom: 0; width: 100%; overflow: hidden; }
.main-menu .left { width: 30%; float: left; background-color: #273447; color: #fff; line-height: 90px;  font-size: 40px; position: relative; z-index: 2; 
    text-transform: uppercase; font-weight: 900; height: 90px; }
.main-menu .left a { color: #fff; text-decoration: none; }
.main-menu .left:before { background-color: #273447; height: 90px; width: 9999px; position: absolute; content: " "; left: -9999px; top: 0; }
.main-menu .left:after { background-color: #273447; height: 90px; width: 40px; position: absolute; content: " "; right: -20px;
    top: 0; transform: skew(-20deg); }
.main-menu .right { width: 70%; float: left; background-color: #FFBC13; color: #fff; margin-top: 10px; position: relative; }
.main-menu .right:after { background-color: #FFBC13; height: 80px; width: 9999px; position: absolute; content: " "; right: -9999px; top: 0; }
.main-menu .right ul { margin: 0; padding: 0; line-height: 80px; height: 80px; float: right; }
.main-menu .right ul li { list-style: none; float: left; display: block; padding: 0; margin-left: 50px; font-size: 24px; }
.main-menu .right ul li a { color: #273447; text-decoration: none; font-weight: bold; }
.main-menu .right ul li a:hover { color: #fff; }
.tbl { display: table; width: 100%; height: 100%; }
.tbl .cll { display: table-cell; width: 100%; height: 100%; vertical-align: middle; }
.main-menu.fixed { position: fixed; top: 0; bottom: auto; }
.main-menu.fixed .right { margin-top: 0; }

.page { position: relative; padding: 100px 0; box-sizing: border-box; }
.page.n1 { text-align: center; padding: 0; }
.page.n1 .tbl { position: relative; }
.page.n1 h1 { color: #FFBC13; font-size: 80px; margin: 0; text-shadow: 2px 2px 2px #000; }
.page.n1 .slogan { color: #fff; font-size: 24px; margin: 0; padding-bottom: 40px; font-weight: bold; text-shadow: 2px 2px 2px #000; }
.page.n1 .scroll-down { width: 100%; position: absolute; bottom: 110px; text-align: center; }
.page.n1 .scroll-down .ikona { display: inline-block; width: 40px; height: 40px; border-radius: 50px; background-color: #FFBC13; color: #fff; line-height: 40px;
	text-align: center; font-size: 24px; }
.page.n1 .scroll-down .ikona { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; animation-duration: 3s; }
.page.n5 { border-bottom: 10px solid #FFBC13; }

.regionalni-razvoj { position: absolute; right: 10px; top: 10px; color: #fff; padding: 10px; background-color: rgba(0,0,0,0.5); }
.regionalni-razvoj img { float: left; height: 85px; }
.regionalni-razvoj .tekst { font-size: 12px; float: left; width: 250px; height: 85px; text-align: left; padding-left: 10px; }
.regionalni-razvoj a { font-weight: bold; text-decoration: none; color: #fff; }

.regionalni-razvoj.fixed { position: absolute; top: auto; bottom: 0; color: #000; background-color: transparent; z-index: 10; background-color: #fff; padding: 0; }
.regionalni-razvoj.fixed a { color: #000; }

.content-page .container { background-color: #fff; position: relative; padding: 100px 0 0 0; box-sizing: border-box; }
.content-page .naslovna { position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box; }
.content-page .naslovna .inner { background-color: #FFBC13; }
.content-page .naslovna .next { float: right; padding-right: 70px; }
.content-page .naslovna .next a { color: #273447; text-decoration: none; display: block; float; left; line-height: 60px; font-size: 24px; padding: 0 20px;
	background-color: #fff; margin-top: 10px; float: left; position: relative; padding-left: 30px; }
.content-page .naslovna .next a:after { height: 60px; position: absolute; right: -20px; width: 40px; transform: skew(-20deg); content: " "; background-color: #fff; }
.content-page .naslovna .next a:before { height: 60px; position: absolute; left: -20px; width: 40px; transform: skew(-20deg); content: " "; background-color: #fff; }
.content-page .naslovna .next .ikona { display: inline-block; vertical-align: middle; font-size: 12px; background-color: #273447;
    color: #fff; height: 24px; width: 24px; line-height: 24px; text-align: center; border-radius: 50%; margin-left: 10px; margin-top: -5px; }
.content-page .naslovna .next a.prev { margin-right: 50px; padding-right: 30px; }
.content-page .naslovna .next a.prev .ikona { margin-left: 0; margin-right: 10px; }
.content-page h2 { float: left; margin: 0; background-color: #273447; padding: 0 40px; color: #fff; line-height: 80px; font-size: 32px; position: relative; 
	height: 80px; }
.content-page h2:after { background-color: #273447; height: 80px; width: 40px; position: absolute; content: " "; right: -20px;
    top: 0; transform: skew(-20deg); }
.content-page .inner { height: 100%; overflow: hidden; overflow-y: auto; font-size: 18px; line-height: 1.6; }
.content-page .inner a { color: #FFBC13; font-weight: bold; text-decoration: none; }
.content-page .inner p:first-child { margin-top: 0; }

.vstopni-page { background-size: cover; background-position: center center; background-image: url('img/desman_doo.jpg'); }

.logos { text-align: center; margin-top: 40px; }
.logos img { margin: 0 20px 20px 20px; }

.row { margin-left: -15px; margin-right: -15px; }
.col-md-3 { padding-left: 15px; padding-right: 15px; width: 25%; box-sizing: border-box; display: inline-block; vertical-align: top; }
.col-md-3 img { max-width: 100%; }
.col-md-3 .img-wrap { margin-bottom: 20px; }
.col-md-6 { padding-left: 15px; padding-right: 15px; width: 50%; float: left; box-sizing: border-box; text-align: left; }

.mt20 { margin-top: 20px; }

.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

.taCenter { text-align: center; }

form label { font-weight: bold; display: block; margin: 5px 0; }
form label:first-child { margin-top: 0; }
form input { width: 100%; border: 1px solid #273447; line-height: 40px; height: 40px; padding: 0 10px; box-sizing: border-box; 
	font-family: 'Raleway', sans-serif; font-size: 16px; }
form textarea { width: 100%; height: 100px; max-width: 100%; min-width: 100%; max-height: 100px; min-height: 100px; border: 1px solid #273447; 
	font-family: 'Raleway', sans-serif; font-size: 16px; padding: 10px; box-sizing: border-box; }
form button { background-color: #273447; position: relative; color: #fff; line-height: 60px; height: 60px; display: block; float: left; padding: 0 30px 0 20px;
	font-weight: bold; text-transform: uppercase; border: 0; font-size: 20px; cursor: pointer; margin-bottom: 10px; }
form button:after { background-color: #273447; height: 60px; width: 40px; position: absolute; content: " "; right: -20px;
    top: 0; transform: skew(-20deg); }
form button:hover:after { background-color: #FFBC13; }
form button:hover { color: #273447; background-color: #FFBC13; }

h3 { font-size: 22px; margin: 0 0 20px 0; line-height: 1.3; }

.side-menu { position: fixed; right: 10px; top: 50%; margin-top: -65px; padding-top: 10px; display: none; }
.side-menu .border { height: 100%; position: absolute; width: 2px; left: 9px; background-color: #FFBC13; top: 0; }
.side-menu .bullet { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #FFBC13; margin-bottom: 10px; background-color: #fff; position: relative; }
.side-menu .bullet.active { background-color: #FFBC13; }

.main-menu .right .mmenu-trigger { display: none; width: 50px; height: 50px; background-color: #273447; line-height: 50px; text-align: center; float: right;
	cursor: pointer; font-size: 18px; }

.mobile-menu { display: none; background-color: #273447; position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 9999; }
.mobile-menu .naziv { color: #FFBC13; font-size: 55px; margin: 0; font-weight: bold; }
.mobile-menu .slogan { color: #fff; font-size: 16px; margin: 0; padding-bottom: 40px; font-weight: bold; text-shadow: 2px 2px 2px #000; }
.mobile-menu ul { margin: 0; padding: 0; font-size: 24px; }
.mobile-menu ul li { margin: 0 0 20px 0; padding: 0; }
.mobile-menu ul li a { color: #FFBC13; text-decoration: none; }
.mobile-menu ul li a:hover { color: #fff; text-decoration: none; }
.mobile-menu .close { position: absolute; right: 10px; top: 10px; font-size: 24px; color: #fff; cursor: pointer; }

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }

.lang-selector { position: absolute; right: 20px; top: 20px; }
.lang-selector a { line-height: 20px; height: 20px; font-size: 16px; color: #FFBC13; display: block; float: left; margin-left: 20px; 
	text-decoration: none; padding-left: 20px; font-weight: 900; }
.lang-selector a:hover { color: #fff; }
.lang-selector a.active { color: #fff; }
.lang-selector a.n2 { border-left: 2px solid #273447; }

form .status { display: none; float: right; }

@media (max-height: 770px) {
	.content-page .inner { font-size: 14px; line-height: 1.4; }
	.content-page h2 { height: 50px; line-height: 50px; font-size: 24px; }
	.content-page h2:after { height: 50px; }
	.content-page .container { padding: 70px 0 0 0; }
	h3 { font-size: 18px; margin: 0 0 15px 0; }
	form button { font-size: 16px; line-height: 40px; height: 40px; }
	form button:after { height: 40px; }
	.main-menu .left { line-height: 60px; font-size: 30px; height: 60px; }
	.main-menu .left:before { height: 60px; }
	.main-menu .left:after { height: 60px; }
	.main-menu .right ul { height: 50px; line-height: 50px; }
	.main-menu .right ul li { font-size: 18px; }
	.main-menu .right:after { height: 50px; }
	.logos img { height: 50px; }
}

@media (max-height: 580px) {
	.page.n5 { padding-bottom: 150px; }
	.page.n1 .scroll-down { bottom: 80px; }
}

@media (max-width: 1200px) { 
	.content-page .container { width: 900px; }
	.main-menu .container { width: 900px; }
	.main-menu .left { font-size: 32px; }
}

@media (max-width: 950px) { 
	.content-page .container { width: 100%; padding: 70px 50px 0 50px; }
	.main-menu .container { width: 100%; }
	.main-menu { padding-left: 50px; padding-right: 50px; box-sizing: border-box; }
	.naslovna { padding: 0 50px; }
	.main-menu .left { font-size: 24px; }
	.main-menu .right ul li { font-size: 18px; margin-left: 15px; }
	.content-page .inner { font-size: 14px; line-height: 1.4; }
	.content-page h2 { height: 50px; line-height: 50px; font-size: 24px; }
	.content-page h2:after { height: 50px; }
	h3 { font-size: 18px; margin: 0 0 15px 0; }
	form button { font-size: 16px; line-height: 40px; height: 40px; }
	form button:after { height: 40px; }	
	.logos img { height: 50px; }
	.main-menu .left { width: auto; padding-right: 30px; }
	.main-menu .right { width: auto; float: right; }
	.main-menu.fixed .right:before,
	.main-menu .right:before { width: 9999px; left: -9999px; background-color: #FFBC13; position: absolute; content: " "; top: 0; height: 80px; }
	.main-menu.fixed .right:before { height: 50px; }

	.main-menu .left { line-height: 60px; font-size: 30px; height: 60px; }
	.main-menu .left:before { height: 60px; }
	.main-menu .left:after { height: 60px; }
	.main-menu .right ul { height: 50px; line-height: 50px; }
	.main-menu .right ul li { font-size: 18px; }
	.main-menu .right:after { height: 50px; }	
}

@media (max-width: 790px) { 
	.main-menu .right ul { display: none; }
	.main-menu .right { display: show; }
	.main-menu .right .mmenu-trigger { display: block; }
	.col-md-3 { width: 50%; margin-bottom: 20px; }
	.page.n1 h1 { font-size: 60px; }
	.page.n1 .slogan { font-size: 18px; }
	.col-md-6 { width: 100%; margin-bottom: 20px; }
	.col-md-6:last-child { margin-bottom: 0; }
	.page.n5 { padding-bottom: 150px; }
}

@media (max-width: 520px) { 
	.regionalni-razvoj { right: 0; top: 0; height: auto; }
	.regionalni-razvoj img { width: 50%; height: auto; }
	.regionalni-razvoj .tekst {width: 50%; box-sizing: border-box; height: 100%; position: absolute; right: 0; top: 0; }
	.main-menu { padding-left: 10px; padding-right: 10px; }
	.page.n5 { padding-bottom: 200px; }
	.logos img { margin: 0 0 20px 0; max-width: 100%; }
	.content-page .container { padding: 70px 20px 0 20px; }
	.naslovna { padding: 0 20px; }
	.side-menu { display: none !important; }
}

@media (max-width: 440px) { 
	.regionalni-razvoj { display: none; }
	.page.n1 h1 { font-size: 32px; }
	.col-md-3 { width: 100%; }
	.regionalni-razvoj.fixed { width: 100%; text-align: center; display: block; position: relative; bottom: auto; margin-top: 50px; }
	.regionalni-razvoj.fixed img { width: auto; max-width: 100%; margin-bottom: 10px; float: none; height: 80px; }
	.regionalni-razvoj.fixed .tekst { width: 100%; position: relative; top: auto; left: auto; height: auto; float: none; margin-bottom: 20px; }
	.page.n5 { padding-bottom: 0; }
	.main-menu .left:after { width: 20px; right: -10px; }
	.mobile-menu .naziv { font-size: 40px; }
}

@media (max-width: 380px) { 
	.main-menu .left { font-size: 22px; }
	.main-menu .left { padding-right: 35px; }
	.main-menu .left:after { width: 40px; right: -15px; }
}