.clear {clear:both; height:0px;}
.clear10 {clear:both; height:10px;}
.clear20 {clear:both; height:20px;}
.clear30 {clear:both; height:30px;}
.clear40 {clear:both; height:40px;}
.clear60 {clear:both; height:60px;}

body {color: #888; font-family: "Source Sans Pro",Arial,sans-serif; font-size: 14px; line-height: 1.4em; margin:0, padding:0;}

a:link, a:visited {color: #888; text-decoration: none;}
a:hover, a:active {color: #ccc; text-decoration: none;}

.bijeli:link, .bijeli:visited {color: #fff; text-decoration: none;}
.bijeli:hover, .bijeli:active {color: #f8c301; text-decoration: none;}

.bigtar:hover {cursor:pointer;}

.headeriva {position: absolute; left: 0; top: 0; right: 0; background:transparent; height:145px; z-index:5;}
.headertraka1 {background: rgba(17, 17, 17, 0.8);  height:60px;}
.headertraka2 {background-color:#fff; height:85px;}

h1 {font-family: "Oswald",Arial,sans-serif; color: #000; font-size: 32px; font-weight: 400; line-height: 1.2em; margin: 0; padding: 25px 0 0 0; text-align: center; text-transform:uppercase;}

.pocetnaholder {position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color:#111;}
.pocetnabox1 {width:50%; height:100%; float:left; background-color:#111; overflow:hidden; position: relative;}
.pocetnabox2 {width:50%; height:100%; float:left; background-color:#111; overflow:hidden; position: relative;}
.pocetnabox33 {width:33%; height:100%; float:left; background-color:#111; overflow:hidden; position: relative;}

.slikacover1 {object-fit: cover; height: 100vh; width: 50vw;}
.slikacover2 {object-fit: cover; height: 100vh; width: 50vw;}
.slikacover33 {object-fit: cover; height: 100vh; width: 33vw;}

.headertopbox1 {width:50%; float:left;}
.headertopbox2 {width:50%; float:left;}
.headertopbox1 p, .headertopbox2 p {margin:0; padding:12px 0 0 0; text-align:center; font-size:12px; color:#888; line-height: 1.4em;}

.boxsadrzaj {position: absolute; top:300px; width:100%; z-index:5;}
.boxsadrzajholder {padding:0 80px; text-align: center;}
h2 {font-family: "Oswald", sans-serif; color: #fff; font-size: 50px; font-weight: 400; line-height: 1.2em; margin: 0 0 20px 0; padding: 0; text-align: center; text-transform:uppercase;}
h3 {font-family: 'Source Sans Pro', sans-serif; color: #fff; font-size: 22px; font-weight: 300; line-height: 1.2em; margin: 0 0 50px 0; padding: 0; text-align: center; text-transform:uppercase; letter-spacing:2px;}

.btn:link, .btn:visited {
    -moz-user-select: none;
    background: rgba(17, 17, 17, 0.4);
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    margin: 0;
    padding: 20px 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color:#fff;
    width:100%;
    display: block;
}
.btn:hover, .btn:active, .btn:focus {
	background: rgba(17, 17, 17, 0.8);
	color: #f8c301;
}




@media (max-width: 1199px) {
h2 {font-size: 46px;}
.boxsadrzajholder {padding:0 20px;}
}

@media (max-width: 991px) {
.boxsadrzaj {position: absolute; top:200px; width:100%;}
.boxsadrzajholder {padding:0 20px;}
h2 {font-size: 36px;}
h3 {font-size: 18px;}
.btn:link, .btn:visited, .btn:hover, .btn:active, .btn:focus {font-size: 12px !important;}
}

@media (max-width: 767px) {
.headeriva {position: absolute; left: 0; top: 0; right: 0; background:transparent; height:50px; z-index:5;}
.headertraka1 {display:none;}
.headertraka2 {background-color:#fff; height:50px;}
h1 {font-family: "Oswald",Arial,sans-serif; color: #000; font-size: 24px; font-weight: 400; line-height: 1.2em; margin: 0; padding: 10px 0 0 0; text-align: center; text-transform:uppercase;}
.boxsadrzaj {position: absolute; top:100px; width:100%;}
.boxsadrzajholder {padding:0 15px;}
h2 {font-size: 24px;}
h3 {font-size: 12px; margin: 0 0 20px 0;}
.btn:link, .btn:visited, .btn:hover, .btn:active, .btn:focus {font-size: 10px !important; padding: 10px 0;}
}

@media (max-width: 479px) {
.boxsadrzaj {position: absolute; top:100px; width:100%;}
.boxsadrzajholder {padding:0 5px;}
h2 {font-size: 18px;}
h3 {font-size: 10px; letter-spacing:1px;
}