@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,400italic&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif:700italic&subset=latin,latin-ext);




@font-face {
    font-family: ttbricks;
    font-weight: 800;
    src: url("/Font/TTBricks-Extrabold.woff") format("opentype");
}

@font-face {
    font-family: ttbricks;
    font-weight: 200;
    src: url("/Font/TTBricks-Light.woff") format("opentype");
}

@font-face {
    font-family: ttbricks;
    font-weight: 400;
    src: url("/Font/TTBricks-Medium.woff") format("opentype");
}

@font-face {
    font-family: ttbricks;
    font-weight: 100;
    src: url("/Font/TTBricks-Thin.woff") format("opentype");
}


html {
	margin: 0px;
	padding: 0px;
	overflow-y: scroll;

	}

body {
	margin: 0px;
	padding: 0px;
	font-family:'ttbricks';

	}



#mainpage_container1{
	position: fixed;
	width: 100%;
	height: 100vh;
	background:url("/Grafika/UCXXI_citylights_WEB HOMEPAGE_x.jpg") no-repeat top center;
	background-size: cover;
	display:flex;
	flex-flow: column;
}

#mainpage_container1 h1{
	margin:0px 1%;
	color: white;
	font-size:4vw;
	width:47.5%;	
	
}

#mainpage_container1 h2{
	margin:0px auto;
	text-align: center;
	color: white;
	font-size:5vh;
	
}

#mainpage_container{
	position: fixed;
	width: 100%;
	height: 100vh;
	background:url("/video/main_page2.gif") no-repeat top center;
	background-size: cover;

}

#mainpage_container h1{
	margin:0px auto;
	text-align: center;
	color: white;
	font-size:8vh;
	
}

#mainpage_container h2{
	margin:0px auto;
	text-align: center;
	color: white;
	font-size:5vh;
	
}



#MineJourneyLink1 a{
	display: block;
	margin:0px auto;
	text-align: center;
	color: white;
	font-size:5vh;
}

#MineJourneyLink1 {
	display: block;
	background:url("/Grafika/UCXXI_citylights_WEB HOMEPAGE_x.jpg") no-repeat top center;
	background-size: cover;
	margin:0px;
	text-align: center;
	color: white;
	font-size:7vh;
	flex: 1 1 auto;
   position:relative;
}

#lHeader{
	clear: both;
	display: block;
	background: black;
	margin:0px;
	padding:6px 0px 5px ;
	
}
#lEnter{
	
	font-weight: 800;
	font-size: 30px;
}

#mainpage_video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
}

#l1{display: inline-block}
#l2{display: inline-block;text-align: right}
#l3{width:50%;}


#lMainCircle {width:10vh;height:10vh;border-radius: 5vh;border:2px white solid;margin:10px auto;position:relative;cursor:pointer;}
#lSmallCircle{width:1vh;height:1vh;border-radius: 0.5vh;background: red;top:4.5vh;left:4.5vh;position:absolute;cursor:pointer;}

@media only screen and (max-width: 900px) {
	#mainpage_container1 h1{
		margin:0px auto;
		color: white;
		font-size:9vw;
		width:100%;
		line-height:100%;
		
	}
		 
   #l1{display: inline-block;text-align: center}
	#l2{display: inline-block;text-align: center}
	#l3{width:50%;}
	#lEnter{
	
		font-weight: 800;
		font-size: 6vw;
	}

}


a {
	text-decoration: none;
	}

a img{

	border: none;
	}
   
/* Glavni kontejner stranice*/   
.container, #kontejner{
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	height: 100%;
	}
.glava {
	margin: 0px auto;
	width: 940px;
	height: 114px;
	}
#logoImg{
  
   display:block;
   float:left;
   cursor:pointer;
	padding:5px 5px 0px 0px;
	max-height: 100px;
}

/*main Menu*/
.mainMenu {
	margin: 0;
	float: left;
	width: 760px;
	height: 114px;
	position:relative;
   text-align: right;
	}

.mainMenu ul{
    width:100%;
    position:absolute;
    top:45px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    height: 25px;    
}

.mainMenu ul li {
    margin-left: 0px;
    font-family:'Open Sans';
    display: inline-block;
    vertical-align: top;
    color: #898989;
	}
   
.mainMenu ul li a {
	padding-right: 10px;
	display: inline;
	line-height: 25px;
	text-decoration: none;
	font-size: 17px;
	font-weight: normal;
	color: #898989;
	}
   
.mainMenu ul li a:hover {
	color: #20668a;
	text-decoration: none;
	}
   
.mainMenu ul li.activated  a{
	color: #20668a;
	text-decoration: none;
	} 


.mainMenu ul li:hover ul.submenu {
	height: auto;
   opacity: 1;
	}

ul.submenu{
    z-index: 10;
    max-width:160px;
    text-align: left;
    background: #fff;

    padding: 5px 10px 0px 10px;
    position:absolute;
    top:25px;
    overflow: hidden;
    height: 0px;
    transition: opacity 0.3s ease-out;
    opacity: 0;
}
ul.submenu li{
    position:static;
    display:block;
    width:100%;
    line-height: 30px;
}

ul.submenu li.notactivated a{
	color: #898989;
	text-decoration: none;
	}
   
ul.submenu li.activated a{
	color: #20668a;
	text-decoration: none;
	}
   
ul.submenu li a:hover{
	color: #20668a;
	text-decoration: none;
	}

/* end main Menu */


.clearfix{
    width:100%;
    height:0px;
    float:none;
    margin:0;
    padding:0;
    clear:both;
}


/*Footer*/

.footerFirst{
    text-align: center;
    height:100px;
    color:#20668a;
    line-height: 102px;
    font-size: 26px;
    background: #ececec;
    margin-top:90px;
}

.footerFirst a{
    width:40px;
    height:40px;
    display:inline-block;
    margin:0px 5px;
    vertical-align: text-bottom;
}

#lemail{
    background:url('/Grafika/Ikone/Mail.png') no-repeat;
    margin-left: 10px;
}
#lphone{
    background:url('/Grafika/Ikone/Phone.png') no-repeat;
}
#lmap{
    background:url('/Grafika/Ikone/Location.png') no-repeat;
    margin-right: 40px;
    cursor: pointer;
}
#lface{
    margin-left: 20px;
    background:url('/Grafika/Ikone/Facebook.png') no-repeat!important;
    cursor: pointer;
}
#lgoogle{
    background:url('/Grafika/Ikone/GooglePlus.png') no-repeat;
    cursor: pointer;
}
#ltweeter{
    background:url('/Grafika/Ikone/Twitter.png') no-repeat;
    cursor: pointer;
}
#lpppp{
    background:url('/Grafika/Ikone/Pinterest.png') no-repeat;
    cursor: pointer;
}

.footerSecond{
    text-align: center;
    height:35px;
    color:white;
    line-height: 34px;
    font-size: 14px;
    background: #154c6a;
}

.footerSecond a{
    color:white;
    font-size: 14px;
   
}

.footerSecond a:hover{
    text-decoration: underline;
}


/* start Content section Home page*/

.glavno {
	margin: 0px auto;
	width: 940px;
	height: auto;
	}
   
div.prostorZaSlikovniMenuNaslovna{
    display:block;
    width:auto;
    min-height:340px;
    overflow:hidden;
    }   
   
a.slikovniMenuNaslovna{
    display:block;
    float:left;
    width:290px;
    height:155px;
    font-size: 26px;
    text-transform: uppercase;
    color:#20668a;
    margin-bottom: 30px;
   }

a.slikovniMenuNaslovna:nth-child(2n){
    margin-left: 30px;
   }
   
a.slikovniMenuNaslovna div{
    width:279px;
    height:125px;
}

div.textNaslovna{
    width:290px;
    min-height:340px;
    float:right;
    font-size: 26px;
    text-transform: uppercase;
    color:#20668a;
    padding:0px 10px;
}

div.textNaslovna div{
    font-size: 14px;
    text-transform: uppercase;
    color:#555;
    padding:0px 10px;
    background:#ececec;
    min-height:300px;
    border-top:5px solid #a4b8c1;
    border-bottom:5px solid #a4b8c1;
}

div.textNaslovna div ul{
    margin:0px;
    list-style-image: url('/Grafika/arrow.png');
    padding-left: 18px;
    padding-top: 14px;
    padding-bottom: 4px;
}

div.textNaslovna div ul li {
    margin:0px;
    padding:4px 0px;
}

/*END HOME PAGE*/

/*NORMAL PAGE*/
.leftMenu{
    width:340px;
    float:right;
}
.leftMenu a{
    margin-left:0px!important;
}

.leftMenu a.slikovniMenuNaslovna{
    float:right;
    
}

.rightContent{
    overflow:hidden;
    width:auto;
    display:block;
    
    
}

.submenuPage{
    width:100%;
    box-sizing:border-box;
    height:30px;
    line-height:30px;
    background: white;
    color:#154c6a;
    padding-left:0px;
}

.submenuPage a{
    color:#154c6a;
    font-weight: normal;
}

.submenuPage a:hover{
}

a.submenuPageSelected{
    /*text-decoration: underline;*/
    font-weight: bold;
}


/*.submenuPage a:first-child{
    text-transform: uppercase;    
}*/

h1.naslovSadrzaja{
    width:100%;
    font-family: "Noto Serif",serif;
    font-size:24px;
    margin-top:30px;
    margin-bottom:30px;
    line-height:26px;
    color:#154c6a;
}

.textSadrzaja{
    font-size:16px;
    line-height:22px;
    text-align:left;
}

.textImg{
    float:right;
    margin:0px 0px 10px 10px;
}

/*END NORMAL PAGE*/


/*old*/

	
	
.path {
	margin: 0;
	float: left;
	width: 780px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	font-size: 14px;
	font-weight: normal;
	color: #707070;
	}

.path  a{
	text-decoration: none;
	font-size: 14px;
	font-weight: normal;
	color: #707070;
	}	

.path  a:hover{
	text-decoration: underline;
	color: #2f3092;
	}
	
.tjelo, .sadrzaj{
	margin: 0px;
	float: left;
	width: 780px;
	height: auto;
	}
	


.stupac {
	margin: 0px;
	float: left;
	width: 180px;
	height: auto;
	}	

.naslovnaSlika {
	margin: 0;
	float: left;
	width: 580px;
	height: 200px;
	margin-bottom: 20px;
	}
	
.kocka {
	margin: 0;
	float: left;
	width: 280px;
	height: 280px;
	margin-right: 20px;
	margin-bottom: 20px;
	position:relative;
	}
.vise1 {
    position:absolute;
    right:0px;
    bottom:0px;
    height:16px;
    font-size:13px;
    color:white;
    background-color:#312f94;
    display:inline-block;
    border-radius:3px;
    line-height:16px;
    padding:1px 4px;
}

.kockaSlika {
	margin-bottom: 10px;
	float: left;
	width: 280px;
	height: 126px;
	}

.kockaNaslov {
	margin: 0;
	float: left;
	width: 280px;
	height: auto;
	line-height: auto;
	text-decoration: none;
	font-family: titillium;
	font-size: 24px;
	font-weight: normal;
	color: #2f3092;
	text-transform:uppercase;
	}	
	
.kockaText {
	margin: 0;
	float: left;
	width: 280px;
	height: auto;
	line-height: 14px;
	text-decoration: none;
	font-family: titillium;
	font-size: 14px;
	font-weight: normal;
	color: #707070;
	}

/*Novosti stupac*/

.stupac {
	margin: 0;
	float: left;
	width: 179px;
	height: 400px;
	background-image: url('Grafika/stupacSjena.gif');
	background-position:left top;
	background-repeat:no-repeat;
	background-repeat: repeat-y;

	}
	
.novost {
	margin-left: 19px;
	width: 160px;
	}

.novostNaslov {
	margin: 0;
	float: left;
	padding-top: 10px;
	line-height: 16px;
	text-decoration: none;
	text-transform:uppercase;
	font-family: titillium;
	font-size: 14px;
	font-weight: normal;
	color: #2e3092;
	}

.novostDatum {
	margin: 0;
	float: left;
	padding-top: 4px;
	padding-bottom: 8px;
	text-decoration: none;
	font-family: titillium;
	font-size: 12px;
	font-weight: normal;
	color: #707070;
	}


.novostGlava{
    width:160px;
    height:21px;
    border-radius:3px;
    margin-left:19px;
    background-color:#312f94;
    text-align:center;
    color:white;
    line-height:20px;
    
    
}

.novostSlika{
    margin-top:10px;
    width:160px;
    height:126px;
}


/*Rubrika*/

.prozorRubrika{
    border-bottom:1px solid #e6e6e6;
    float:left;
    margin-bottom:16px;
}

.slikaRubrika{
    float:left;
    width:150px;
    min-height:130px;
    display:block;
    overflow:hidden;
}

.blockRubrika{
    float:left;
    width:614px;
    padding-bottom:16px;
    margin-left:16px;
}

.slikaRubrika img{
    margin-top:8px;
    max-width:150px;
    max-height:150px;
}

.naslovRubrika{
    text-transform:uppercase;
    font-size:20px;
    margin-bottom:5px;
    color:#312f94;
 }

.textRubrika{
    color:#707070;
    font-size:14px;
    line-height:16px;
    text-align:justify;
    
    
}

.vise {
    height:16px;
    font-size:13px;
    color:white;
    background-color:#312f94;
    display:inline-block;
    border-radius:3px;
    line-height:16px;
    padding:1px 4px;
    float:right;
}

/*Podrubrika*/

.kockaPodrubrika{
    width:370px;
    height:170px;
    border-bottom:1px solid #e6e6e6;
    position:relative;
}

.v_table_separator{
/*    display:block;*/
    width:29px;
    border-left:1px solid #e6e6e6;
    
}

v_table_separator div{
    display:block;
    width:14px;
    height:100%;
}

.slikaPodrubrika{
    width:150px;
    height:150px;
    float:left;
}

.naslovPodrubrika{
    width:210px;
    float:left;
    margin-left:10px;
    text-transform:uppercase;
    font-size:20px;
    margin-bottom:5px;
    line-height:23px;
    color:#312f94;
}

.textPodrubrika{
    color:#707070;
    width:210px;
    float:left;
    margin-left:10px;
    font-size:13px;
    margin-bottom:5px;
    line-height:16px;
    
}

.tabelaPodrubrika{
    margin-top:10px;
    
}
.tabelaPodrubrika td {
    width:370px;
    padding:0px;
}

.visePr {
    height:16px;
    font-size:13px;
    color:white;
    background-color:#312f94;
    display:inline-block;
    border-radius:3px;
    line-height:16px;
    padding:1px 4px;
    position:absolute;
    bottom:8px;
    right:0px;
}

.tabelaPodrubrika td:first-child {
    width:370px;
    padding-right:15px;
}

/*Artikal*/

.sadrzajLijevo {
    margin-top:10px;
    float:left;
    display:block;
    width:460px;
    min-height:400px;
}


.textSadrzaja h1, .textSadrzajaDesno h1 {
    font-weight:normal;
    float:left;
    width:460px;
    text-transform:uppercase;
    font-size:18px;
    margin-bottom:5px;
    line-height:21px;
    color:#312f94;    
}

.sadrzajDesno {
    margin-top:10px;
    float:left;
    display:block;
    padding-left:9px;
    margin-left:10px;
    border-left:1px solid #e6e6e6;
    width:300px;
    min-height:400px;
}

.slikaSadrzaja{
    width:300px;
    float:left;
    display:block;
    
}

.galerijaSadrzaja{
    margin-top:10px;
    width:300px;
    float:left;
    
}
.thumb{float:left}

.legenda640{
    float:left;
    width:300px;
}

.textSadrzajaDesno{
    font-size:14px;
    line-height:18px;
    text-align:justify;
    float:left;
    margin-top:10px;
}

.footer, .footerS{
    border-top: 1px solid #e6e6e6;
    float: left;
    margin-top: 16px;
    text-align: center;
    width: 100%;
    color:#707070;
    font-size:13px;
    margin-bottom:16px;

}
.footerS{
    float:none!important;
    position:absolute;
    bottom:-21px;
}

#searchResults{
    float: left;
    width: 100%;
    color:#707070;
    font-size:13px;
    opacity:0;
    position:absolute;
    top:180px;
    min-height:600px;
    display:none;
}

#searchButton{
    width:22px;
    height:22px;
    background:url('/Grafika/search0.gif') no-repeat;
    cursor:pointer;
}

#searchButton:hover {
    background:url('/Grafika/search1.gif') no-repeat;
}

.searchResult{
    float: left;
    width: 100%;
    color:#707070;
    font-size:13px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom:16px;
    
}
.searchResult a{
    color:#312f94;
    font-size:16px;
    text-decoration:underline;
}



/*webkit  safari/google */	
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #searchField {
	height: 22px;
	}
}

@media only screen and (max-width: 1000px) {
    #kontejner {
        width:100%;
        max-width:600px;
    }
    .glavno {
        width:100%;
        max-width:600px;
    }
    .rightContent{
        overflow: visible;
        
    }
    
    body{
        background-image: none;
        
    }
    
    .glava {
        float:none;
        width:100%;
        max-width:600px;
        clear:both;
        height:200px;
    }
    
    .leftMenu{
        display:none;
    }
    
    .mainMenu ul{
        width:100%;
        position:absolute;
        top:25px;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        height: 25px;
        text-align: center;
    }
    
    
    .mainMenu ul li{
        text-align: left;
        padding-left:5px;
    }
    
    #logoImg{
        margin:0px auto;
        display:block;
        float: none;
    }
    
    .footerFirst{
        font-size: 20px;
        
    }
    
    .photoSlideTitle{
        box-sizing:border-box;
        width:100%;
    }
    
   a.slikovniMenuNaslovna:nth-child(2n){
    margin-left: 0px;
    
   }

}

h4{
    width:100%;
    font-family: "Noto Serif",serif;
    font-size:24px;
    margin-top:15px;
    margin-bottom:10px;
    line-height:26px;
    color:#154c6a;
}