/* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* DEFAULT SETINGS */ *{, margin:0px; padding:0px; outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html{ font-family: 'Roboto', Helvetica, sans-serif; font-size:14px; height:100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color:#fff; height:100%; color:#666666; line-height: 1; margin: 0; } /* LINKS */ a, a:link, a:hover { cursor:pointer; text-decoration:none; font-weight: normal; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} a { color:#000; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } a:visited { color:#000; } a:hover, a:active { color:#088ff6; } /* TYPOGRAPHY */ ul, ol { margin:0px 0 10px 0; } p{ line-height:1.8; font-weight: 300; margin:0px 0 10px 0; } h1, h2, h3, h4, h5, h6 { color: #333; font-weight:normal; line-height: 1.2; margin:0px 0px 15px 0px; font-family: 'Roboto Condensed', sans-serif;} h1 {font-size: 30px;} h2 {font-size: 24px; font-weight: 300;} h3 {font-size: 15px;} h4 {font-size: 116%} h5 {font-size: 106%} h6 {font-size: 96%} /* GENERAL */ .mb0{ margin-bottom: 0px; } .mb10 { margin-bottom: 10px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } .mb50 { margin-bottom: 50px !important; } .mb60 { margin-bottom: 60px !important; } .mt10 { margin-top: 10px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } .ml10 { margin-left: 10px !important; } .ml20 { margin-left: 20px !important; } .ml30 { margin-left: 30px !important; } .mr10 { margin-right: 10px !important; } .mr20 { margin-right: 20px !important; } .mr30 { margin-right: 30px !important; } .mr40 { margin-right: 40px !important; } .pt50 { padding-top: 50px !important; } .pt40 { padding-top: 40px !important; } .pt30 { padding-top: 30px !important; } .pt20 { padding-top: 20px !important; } .pt10 { padding-top: 10px !important; } .pb10 { padding-bottom: 10px !important; } .pb20 { padding-bottom: 20px !important; } .pb30 { padding-bottom: 30px !important; } .pb40 { padding-bottom: 40px !important; } .pb50 { padding-bottom: 50px !important; } /* GENERAL */ img {border:none} hr {margin: 1em 0; background-color: #CCC; height:1px; border:none; clear:both} .clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px} .hr{ height:2px; margin: 20px 0px 20px 0px;} .left{ float: left;} .right{ float: right;} .mleft { float: left; } .mright { float: right; } .closed { display: none;} .bold { font-weight: bold;} .center { text-align: center; } .bold { font-weight: bold; } .thin { font-weight: 300; } .reset-margin { margin: 0px 0px 0px 0px; } .noPadding { padding: 0px !important; } .rel { position: relative; } .ib { display: inline-block; } .vam { vertical-align: middle; } a.anchor{display: block; position: relative; top: -100px; visibility: hidden;} a.red { color: #B33636; } a.red:hover { color: #C33A3A; } .mr1 { margin-right: 10px; } .mr2 { margin-right: 20px; } /* LAYOUT MAIN */ #outer-wrapper{ position: relative; width: 100%; height: 100%; } #wrapper{ position: relative; min-height:100%; height: 100%; background-color: #fff; } #top-wrap{ width:100%; position: relative; top: 0px; } #top-wrap.index { position: absolute; z-index: 5; } #top-wrap.fixed .top { padding-bottom: 62px; } #middle-wrap{ position:relative; } #middle-wrap-video{ position:relative; height: 100%; overflow: hidden; } #bottom-wrap{ position: relative; background-color: #FFF; padding-bottom: 750px; min-height: 500px; -webkit-transform: translate3d(0,0,0)} #footer { position:relative; width: 100%; margin-top: -660px; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #footer .bottom{ width: 100%; } #footer .hearts { position: absolute; left: 20px; top: -138px; } .absolute-footer #footer { position:fixed; width: 100%; bottom: -400px; color: #fff; height:320px; background-color: #171717; padding-top: 80px; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .absolute-footer #footer.open { bottom: 0px; } .wrap { margin: 0 auto; min-width: 960px; max-width: 1300px; position:relative; } .wrap.h100 { height: 100% !important; } .wrap.lightGray { background-color: #F9F9F9; padding: 80px 0px; } .wrap.header { } .content-wrap { position:relative; max-width:1200px; padding: 0px 20px 0px 20px; -webkit-box-sizing:border-box; box-sizing: border-box; margin: 0 auto; } .content-wrap-flex { position:relative; width:960px; margin: 0 auto; } .content { width: 73%; } .content.medium { width: 630px; } .content.wide { width: 100%; } .content hr { margin: 3em 0; } .side-meni { position: relative; width:22%; margin-right: 5%; } .side-meni.medium { width:300px; } img .img100 { width: 100%; } .content ul { margin-left: 40px; font-weight: 300; } /* LAYOUT - RESPONSIVE */ .left-fluid-content-side-300 { float: left; margin-right: 300px; padding-right: 40px; } .right-side-300 { width: 300px; margin-left: -300px; float: right; } .content-70 { width: 68%; position: relative; } .content-70.cleft { margin-right: 6%; } .content-70.cright { margin-left: 6%; } .content-70 .date { margin-bottom: 20px; font-weight: 300; font-size: 12px; } .side-70 { width: 26%; position: relative; } /* END LAYOUT */ .backTotop { position: fixed; left: 50%; margin-bottom: 100px; } .title { color: #000; } .title span { display: block; font-size: 20px; font-weight: 200; } .title.blue { color: #088ff6; } .title.white { color: #fff; } .title.small { font-size: 25px; } .title.medium { font-size: 30px; } .title.big { font-size: 38px;} .title.with-border { border-bottom: 8px solid #ECECEC; } .title.big span { display: block; font-size: 24px; font-weight: 200; } .title.medium span { display: block; font-size: 14px; font-weight: 200; } .title.spacing { letter-spacing: 3px; } .title.movie { font-size: 30px; text-transform: uppercase; } .title.movie span { letter-spacing: 3px; font-size: 20px; } .title.upper { text-transform: uppercase; } h1.explore { text-shadow: 1px 1px 1px #333; font-weight: 100; font-family: 'Roboto', sans-serif; margin-bottom: 40px; } div.explore { position: absolute; width: 100%; bottom: 50px; z-index: 1; text-align: center; } .explore { f-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .explore.hover { opacity: 0; filter: alpha(opacity=0); } .exploreZagreb { position: absolute; width: 1300px; left: 50%; margin-left: -650px; height: 500px; overflow: hidden; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95, 0.95); -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .exploreZagreb.hover { opacity: 1; z-index: 10; filter: alpha(opacity=100); zoom:1; -webkit-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); } .exploreZagreb .holder { position: absolute; left: 0px; width: 4800px; } .box { width: 1000px; float: left; position: relative; overflow: hidden; opacity: 0.8; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .box.visible { opacity: 1; } .box.last { margin-right:0px;} .box .image { width: 100%; height: 500px; background-color: #000; overflow: hidden; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*.box .image img { opacity: 0.3; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}*/ .box .title { position: absolute; bottom: 0px; padding: 10px; font-size: 20px; line-height: 1.3; margin: 0px; border-bottom: 1px solid #e9e9e9; width: 100%; background-color: rgba(0,0,0,0.7); color: #999; text-align: center; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .box .title span { display: block; font-size: 12px; } /*.box.visible .image img { opacity: 1; }*/ .box.visible .title { background-color: rgba(30,30,30,0.9); color: #fff; } .box .text { position: absolute; left: -250px; top: 120px; opacity: 0; background-color: rgba(31, 31, 31, 0.4); color: #fff; padding: 30px; max-width: 300px; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} .box .text h2 { color: #FFF; } .box .text p { font-weight: 300; font-size: 12px; } .box.visible .text { left: 50px; top: 120px; opacity: 1;} .separator { margin-bottom: 80px; } .widget { overflow: hidden; } .widget-box { width: 300px; margin-right: 30px; } .widget-box.last { margin-right: 0px; } .poznati-widget { position: relative; overflow: hidden; height: 350px; } .poznati-widget .slika{ border-radius: 55px; width: 110px; margin: 20px auto; display: block; } .poznati-widget .name{ } .poznati-widget .name h1{ margin: 0px; color: #333; font-weight: 400; text-align: center; } .poznati-widget .name span{ display: block; text-align: center; } .poznati-widget .text p { font-weight: 300; line-height: 1.4; margin-bottom: 10px; } /*.poznati-widget .holder { position: relative; width: 100000px; left: 0px; overflow: hidden; } .poznati-widget .holder li { display: block; float: left; width: 300px; padding: 0px; }*/ .poznati-widget .rsArrow { position: absolute; top: 50px; display: none; opacity: 0; width: 100%; } .poznati-widget .rsArrow.rsArrowLeft { position: absolute; left: 24px; cursor: pointer; width: 50px; height: 50px; background:url("images/arrowLeft-S@2x.png") 50% 50% no-repeat; opacity: 1; } .poznati-widget .rsArrow.rsArrowRight { position: absolute; right: 24px; cursor: pointer; width: 50px; height: 50px; background:url("images/arrowRight-S@2x.png") 50% 50% no-repeat; cursor: pointer; opacity: 1; } .responsive-slider { max-width: 800px; width: 100%; } .responsive-slider ul { position: relative; overflow: hidden; padding: 0px; margin: 0px; white-space: nowrap; } .responsive-slider li { position: absolute; top: 0px; width: 100%; height: 100%; overflow: hidden; } .responsive-slider li.num1 { left: 0%; } .responsive-slider li.num1 { left: 100%; } .responsive-slider li.num2 { left: 200%; } .responsive-slider li.num3 { left: 300%; } .responsive-slider li.num4 { left: 400%; } .responsive-slider li.num5 { left: 500%; } .responsive-slider li.num6 { left: 600%; } .responsive-slider li.num7 { left: 700%; } .responsive-slider li.num8 { left: 800%; } .responsive-slider li.num9 { left: 900%; } .responsive-slider li.num10 { left: 1000%; } /* BUTTONS */ .button{ font-family: 'Roboto', Helvetica, sans-serif; padding:15px 20px; border:none; cursor: pointer; text-align: center; border-radius: 2px; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .button.big { font-size: 14px; padding: 15px; } .button.small { font-size: 12px; padding: 10px; } .button.center { display: block; margin: 0 auto;} .button.blue { background-color:#1b5a89; color:#FFF !important; } .button.blue:hover{ background-color:#2371AB; } .button.clean { background-color: transparent; padding: 6px 23px; border-radius: 100px; color:#333 !important; border : 2px solid #333; } .button.clean:hover{ border : 2px solid #1b5a89; color: #1b5a89; } .button.border-blue { background-color: transparent; padding: 8px 23px; border-radius: 100px; color:#5390be !important; border : 2px solid #5390be; } .button.border-blue:hover{ background-color:#f9f9f9; } .button.orange { background-color:#f86811; color:#FFF !important; } .button.orange:hover{ background-color:#dd5a14; } .button.FB { position: absolute; left: 50%; background-color:#95B258; color:#FFF !important; min-width: 120px; z-index: 3; margin-left: -80px; } .button.FB:hover{ background-color:#dd5a14; } .button.square { border-radius: 2px;} .button.pogledaj{ color:#2D2D2D !important; font-size: 14px; font-weight: 600; border: 1px solid #D7D7D7; border-radius: 4px; padding: 10px 20px; } .button.pogledaj:hover{ border: 1px solid #333; } .button.arhiva{ color:#A8A8A8 !important; font-size: 12px; } .button.arhiva:hover{ color: #088ff6 !important; } .button.exploreBut{ display: inline-block; padding: 15px 60px; color:#fff !important; font-size: 16px; font-weight: 300; background-color: rgba(255, 255, 255, 0.2); border-radius: 100px; } .button.exploreBut:hover{ background-color: rgba(27, 90, 137, 0.7); color: #FFF !important; } .mobileMenuButton { display: none; } .brosureButton { cursor: pointer; border: 1px solid #ccc; padding: 8px; border-radius: 4px; font-weight: 300; font-size: 12px; display: inline-block; } .brosureButton:hover { background-color: #333; color: #FFF; } a.brosureButton { color: #666; font-weight: 300; } /*--------------------*/ .block { width: 300px; float: left; margin-right: 30px; } .block.last { margin-right: 0px;} .articles { list-style: none; list-style-type: none; } .article { position: relative; padding: 26px 0px 20px 0px; border-bottom: 1px solid #ECECEC; overflow: hidden; min-height: 130px; } .article h1{ font-size: 20px; color: #8C8C8D; margin-bottom: 5px; } .article h1:hover{ color: #000; } .article img { position: absolute; border-radius: 50px; width: 70px; left: 15px; } .article p { line-height: 1.6; color: #7C7C7C; font-size: 13px; } .article .date { position: absolute; left: 90px; color: #888; font-weight: 300; font-size: 14px; margin-left: 17px; display: inline-block; width: 65px; line-height: 1.3; } .article .date .day { text-align: center; font-size: 25px; font-weight: 400; color: #222; } .article .date .month { text-align: center; font-size: 12px; color: #7C7A7A;} .article .date .year { text-align: center; font-size: 14px; color: #7C7A7A; } .article .details { color: #888; font-weight: 300; margin-left: 200px; padding-right: 70px; display: inline-block; } .articles.small .article { padding: 15px 0px 15px 0px; border-bottom: 1px solid #e6e6e6; overflow: hidden; min-height: inherit; } .articles.small h1{ font-size: 14px; color: #333; margin-bottom: 2px; } .articles.small .details{ margin-left: 0px; font-size: 13px; } .articles.small img { position: absolute; border-radius: 50px; width: 70px; display: inline-block; opacity: 0; } .articles.small .date { position: relative; left: 0px; color: #888; font-weight: 300; font-size: 12px; margin-left: 0px; display: inline-block; } .multiselect { margin: 0px !important; } .multiselect li { cursor: pointer; display: inline-block; list-style: none; font-size: 14px; font-weight: 300; color: #9b9b9b; display: inline-block; padding: 15px 20px; } .multiselect li.selected { font-weight: 300; color: #6E6E6E; border: 1px solid #6E6E6E; border-radius: 100px; } .multiselect.style1 li { padding: 10px 20px; } .multiselect.style1 li.selected { color: #FFF; /*border: 1px solid #1b5a89;*/ border: none; border-radius: 4px; font-weight: 400; background-color: #B33636; } .multiselect.style2 li { padding: 10px 20px; } .multiselect.style2 li.selected { color: #1B5A89; border: 1px solid #1B5A89; border-radius: 4px; font-weight: 400; } /* LAYOUT - HEADER */ .header { position:relative; } .header .top { position: relative; background-color: rgba(255,255,255,0.5); } .header.index .top.black { position: relative; background-color: rgba(0,0,0,0.5); } .header.index .top.black .lang-but a { color: #FFF; } .header.index .top.black .weather-container, .header.index .top.black .weather-container .temp, .header.index .top.black .weather-container .day { color: #FFF; } .header.index .top.black .search-button { border: 2px solid #FFF; } .header.index .top.black .search-button .icon-search-1 { color: #FFF;} .header.index .top.black .kongresni-link a { color: #FFF;} .header .bottom { } .header .logo-img { position: relative; margin:30px 0px 30px 0px; background-image: url("images/logo.png"); width: 140px; height: 72px; background-repeat: no-repeat; display: block; background-size: 100%; float: left; } .header .logo-img .title { position: absolute; bottom: -3px; left: 80px; font-size: 10px; font-weight: bold; color: #004072; } .header.index .top.black .logo-img { background-image: url("images/logo_white.png"); } .header.index .top.black .logo-img .title{ color: #FFF; } .header.fixed{ /*margin-top: 62px;*/ } .header .lang{ min-width:120px; padding:4px 0px 0px 0px; position: absolute; top:75px; right:175px; background-color:#FFF; border:1px solid #f9f9f9; box-shadow:2px 2px 6px #666; border-radius:4px; display: none; } .header .lang a { display:block; padding:3px 15px 3px 15px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;} .header .lang a:hover{ background-color:#f86811; color:#FFF;} .header .lang li{ padding:3px 0px 3px 0px; line-height:18px; list-style: none; list-style-type:none;} .window { min-width: 140px; padding:10px; position: absolute; display: none; z-index: 100; } .window.show { opacity: 1; z-index: 2; display: block; } .window.hide { opacity: 0; z-index: 1; display: none; } .window-right{} .window-right:before { content: ' '; height: 0; position: absolute; width: 0; top: -16px; right: 16px; border: 8px solid transparent; border-bottom-color: #FFF; } .window-brosure{ top: 30px; background-color:#333; display: none; z-index: 100; background-color: #FFF; border: 1px solid #eee; border-radius: 4px; max-height: 200px; overflow-y: scroll; } .window-brosure:before{ content: ' '; height: 0; position: absolute; width: 0; top: -16px; left: 16px; border: 8px solid transparent; border-bottom-color: #eee; } .window-clean { min-width: 160px; padding:10px; position: absolute; background-color:#fff; border:1px solid #E4E4E4; display: none; z-index: 100; } .window-clean:before { content: ' '; height: 0; position: absolute; width: 0; top: -16px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom-color: #ccc; } .window-black { min-width: 140px; padding:10px; position: absolute; background-color:#222; border:1px solid #333; display: none; z-index: 100; } .window-black:before { content: ' '; height: 0; position: absolute; width: 0; top: -16px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom-color: #4B4B4B; } .window-clear { background-color:#333; display: none; z-index: 100; background-color: rgba(255,255,255,0.9); border: 1px solid #eee; border-radius: 4px; } .window-clear:before { content: ' '; height: 0; position: absolute; width: 0; top: -16px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom-color: #EEE; } ul.standardList { margin: 0px; border-radius: 2px; } ul.standardList li { list-style: none !important; list-style-type: none; } ul.standardList li a { display: block; font-size: 12px; font-weight: 300; border-bottom: 1px solid #EEE; padding: 15px 10px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} ul.standardList li span { font-size: 10px; color: #CCC; } ul.standardList li:last-child a{ border-bottom: none; } ul.standardList li a:hover { background-color: #000; color: #FFF; } ul.standardList li a.active { background-color: #000; color: #FFF; } ul.standardList.languagesList li a{ } ul.standardList.languagesList img { width: 20px; margin-right: 10px; vertical-align: middle; } ul.standardList.small { font-size: 12px; } ul.standardList.small li a { padding: 10px 10px; } ul.standardList.black { } ul.standardList.black li a { border-bottom: 1px solid #3F3F3F; color: #FFF; } ul.standardList.black li a:hover { background-color: inherit; color: #088ff6; } ul.standardList.black li:last-child a{ border-bottom: none; } table {border-spacing: 0px; border-collapse: separate; } table.list td { line-height: 1.8; border-bottom: 1px solid #CCC; padding: 15px; } table.list td.title { color: #333; font-weight: 300; line-height: 1.2; font-family: 'Roboto Condensed', sans-serif; font-size: 24px; padding-bottom: 15px; border: 0px; } table.list td.left { white-space: nowrap; float: initial; } table.list tr:hover { background-color: #FAFAFA; } table.list tr td.title:hover { background-color: #FFF; } /******* NAVIGATION ******* background-color: rgba(9, 122, 207, 0.9);/ /******* ********** *******/ .nav-wide { background-color: #1b5a89; position: relative; margin: 0 auto; } .nav-wide.fixed { background-color: #1b5a89; position: fixed; top: 0; left: 0px; right: 0px; z-index: 100; -webkit-backface-visibility: hidden; } .mobileMenu { position: absolute; display: none; } .header.index .nav-wide { background-color: #1b5a89; opacity: 0.8; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } .header.index .nav-wide:hover { opacity: 1; } .header.index .nav-wide.fixed { background-color: #1b5a89; } .nav-wide.red { background-color: #be1730; opacity: 1;} /************* MENU - MAIN TOP NAVIGATION **************/ /******* FIRST LEVEL *******/ .menu { margin: 0px; height:65px; } .menu > li { float:left; list-style-type:none; line-height:65px; } .menu > li a{ display: block; padding: 0px 30px 0px 30px; color: #fff; font-size:14px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;} .menu > li:hover{ background-color: #222; } .menu > li a:hover{ background-color: #222; } .menu > li.active > a{ background-color: #1C4A6E; color: #fff; } /******* SECOND LEVEL *******/ .menu > li > ul { opacity: 0; display: none; position: absolute; top: 65px; z-index: 100; background-color: rgba(255, 255, 255, 0.97); border: 1px solid #D6D6D6; padding: 10px; } .menu > li > ul li { position: relative; list-style: none; list-style-type: none; line-height: normal; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } .menu > li > ul li a:hover{ color: #FFF; background-color: #1C4A6E;} .menu > li > ul li a.active{ color: #FFF; background-color: #1C4A6E;} .menu > li > ul li a{ display: block; min-width: 170px; font-size: 13px; padding: 10px; color: #666; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /******* THiRD LEVEL *******/ .menu > li > ul > li > ul { position: absolute; display: none; opacity: 0; left: 100%; margin-left: 10px; top: 0px; background-color: rgba(255, 255, 255, 0.97); border: 1px solid #D6D6D6; padding: 10px; } /************* FLAT MENU **************/ /******* SECOND LEVEL *******/ .menu .flat > ul { left: 0px; width: 100%; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box;} .menu .flat > ul > li { position: relative; display: inline-block; vertical-align: top; width: 20%; } .menu .flat > ul > li:hover > a { border-bottom: 1px solid #1C4A6E; color: #1C4A6E;} .menu .flat > ul > li.active > a { border-bottom: 1px solid #1C4A6E; color: #1C4A6E;} .menu .flat > ul > li > a { font-weight: bold; color: #333; font-size: 16px; border-bottom: 1px solid #DBDBDB; } .menu .flat > ul > li > a.active { background-color : inherit; color: #088ff6;} .menu .flat > ul > li > a:hover { background-color: inherit; color: inherit; cursor: default; } /******* THIRD LEVEL *******/ .menu .flat > ul > li > ul { display: block !important; opacity: 1; position: relative !important; top: inherit; left: inherit; border : none; background-color: inherit; padding: 0px; margin: 0px; } .menu .flat > ul > li > ul > li > a { font-size: 14px; width: 100%; font-weight: 300; box-sizing: border-box; -moz-box-sizing: border-box;} /******* FOURTH LEVEL *******/ .menu .flat > ul > li > ul > li > ul { display: none !important; } .menu .flat > ul > li > ul > li > a { font-size: 13px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box;} .menu ul { } .menu .menu84 { text-indent: -9999px; background:url("images/home.png") no-repeat 50% 50%;} /************* SECONDARY NAVIGATION - vertical navigation **************/ #nav-secondary .header { font-size: 18px; } #nav-secondary { position: relative; width: 100%; margin:0px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #nav-secondary li { list-style: none; margin:0px; } #nav-secondary { padding:0px 0px 0px 0px; } #nav-secondary > li > a { display: block; font-size: 14px; font-weight: 400; color:#333; padding: 15px; border-bottom: 1px solid #eee; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #nav-secondary > li > a:hover { color:#333; background-color: #f9f9f9; } #nav-secondary > li.active > a{ color:#FFF; background-color: #1b5a89; } #nav-secondary li > ul > li > a { display: block; font-size: 14px; font-weight: 300; color:#333; padding: 15px 0px 15px 35px; border-bottom: 1px solid #eee; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #nav-secondary li > ul > li > a:hover { color:#333; background-color: #f9f9f9; } #nav-secondary li > ul > li.active > a{ color:#333; background-color: #f8f8f8; } #nav-secondary li > ul > li > ul > li > a { display: block; font-size: 14px; font-weight: 300; color:#333; padding: 15px 0px 15px 55px; border-bottom: 1px solid #eee; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #nav-secondary li > ul > li > ul > li > a:hover { color:#333; background-color: #f9f9f9; } #nav-secondary li > ul > li > ul > li.active > a{ color:#333; background-color: #f8f8f8; } #nav-secondary.js-menu ul { display: none; } /**/ .horizontal { text-align: center; } .horizontal li { display: inline-block; } .horizontal li a{ display: block; font-size: 14px; font-weight: 400; color:#333; padding: 15px; border-bottom: 1px solid #eee; } .horizontal li a:hover { color:#333; background-color: #f9f9f9; } .horizontal.separator li { border-right: 1px solid #eee; } .horizontal.separator li:last-child { border-right: none; } /**/ .middleMenu { position: relative; max-width: 300px; margin: 0 auto; } .middleMenu .hide { max-height: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .middleMenu .show { max-height: 3000px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} /************* LAYOUT - FOOTER ***************/ #footer .borders { background-color: #f3f3f3; padding: 25px 0px ; } .footer-block h1 { font-size: 20px; font-weight: 300; color: #A2A2A2; padding-bottom: 15px; border-bottom: 1px solid #DADADA; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .footer-block li:hover h1 { color: #088ff6; border-bottom: 1px solid #088ff6; } .footer-block li a{ color:#666; font-weight: 300; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .footer-block li a:visited{ color:#666; } .footer-block li a:hover{ color:#088ff6; } .footer-block li{ list-style-type: none; list-style:none; padding: 9px 0px 9px 0px;} .footer-block li span { display: block; color: #555; font-size: 12px; font-weight: 300;} .copyright{ color:#5283A6; margin:0px; font-size:12px; text-align: center; } .copyright a { color: #AECFE7; } .copyright a:hover { color: #fff; } .footer-wrap { border-top: 3px solid #000; border-bottom: 1px dotted #000; text-align: center; padding: 10px; } .blue1{ border-bottom: 4px solid #02a8ff; } .blue2{ border-bottom: 4px solid #93daff; } .blue3{ border-bottom: 4px solid #0373ae; } .blue4{ border-bottom: 4px solid #17a0e8; } /************* FORM ***************/ input[type="text"], input[type="password"], input[type="file"], textarea { padding:15px; border:1px solid #e5e5e5; background-color:#f9f9f9; color:#666; margin:3px 0px 3px 0; border-radius:4px; box-sizing: border-box; -wekkit-box-sizing: border-box; -moz-box-sizing: border-box; } input[type="text"]:hover { border: 1px solid #1b5a89; } input[type="text"]:focus { border: 1px solid #1b5a89; } input.datepicker { padding: 0px; background-color: inherit; border: none; box-shadow: none; width: 75px; } input.datepicker:hover { border: none; } input.datepicker:focus { border: none; } .form-item{ padding:10px 0 10px 0; } .form-item.block label { display: block; } .form-item label{ font-size:14px; margin:0px 10px 0 10px; width: 100%; } .form-item label.block { display: block; } .form-item input[type="text"], input[type="password"], input[type="file"], textarea { padding:12px; border:1px solid #e5e5e5; background-color:#f9f9f9; color:#666; margin:3px 0px 3px 0; border-radius:4px; width: 100%; } .form-item input[type="text"]:hover { border: 1px solid #088ff6; } .form-item input[type="text"]:focus { border: 1px solid #088ff6; } select.select { width: 273px; height: 33px; margin-bottom: 13px; position: relative; -webkit-appearance:none; } select.select.last{ margin:0px;} span.select{ position: absolute; width: 273px; height: 33px; top: 0px; left: 0px; line-height: 33px; text-indent:10px; background:url("images/sprites.png") no-repeat 0px -119px;} select.select-small { width: 200px; height: 33px; margin: 0px 28px 35px 0px; position: relative; } select.select-small.last{margin: 0px 0px 35px 0px;} span.select-small{ position: absolute; width: 200px; height: 33px; top: 0px; left: 0px; line-height: 33px; text-indent:10px; background:url("images/sprites.png") no-repeat 0px -166px;} div.form{ position: relative; } /************* HEADER SLIDESHOW ***************/ .slideShowContainer { width:100%; height: 100%; margin:0px ; position: relative; } #slideShowContainer .controller{ position:absolute; top:310px; right:10px; left:10px; display:none;} .controller ul{ margin: 0 auto; text-align:center; overflow:hidden; } .controller li{ float:left; display: block; width:20px; height:20px; cursor:pointer; line-height:1px;} /************* PAGES TABS ***************/ .list-gallery{ margin-top: 30px; } .list-gallery img { width: 100%; border-radius: 4px; } #tabs{ } #tabs li{ margin: 0px 40px 0px 0px; list-style:none; float: left; } #tabs li a{ font-size: 16px; font-weight: 300; color: #ccc; } #tabs li.selected a{ color: #666; } #content-tabs .tab { display: none; } #content-tabs .tab.show { display: block; } /************* FOOTER LOGO SLIDER ***************/ /*************** HEADER STYLES ******************/ .slider{ position: relative; height:100%; max-width: 1440px; margin:0 auto; overflow: hidden; } .slider li{ position: absolute; width: 100%; height: 100%; list-style-type: none; list-style: none; background-repeat: no-repeat; background-position: 50% 0px; } .slider li img { position: absolute; top: 0px; width: 100%; } .slider li > div { padding-top: 50px; } .loader { position: absolute; right:50%; top:50%; display: none;} .loader img { width:16px; height:16px; margin: 0 auto; display: block;} /*************** FOOTER STYLES ******************/ /*************** SPRITES ******************/ .sprite { background:url("images/sprites.png"); vertical-align: middle; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .sprite.leftArrow { position: absolute; left: 30px; top: 115px; cursor: pointer; width: 132px; height: 300px; z-index: 100; background:url("images/arrowLeft.png") no-repeat 0 0;} .sprite.rightArrow { position: absolute; right: 30px; top: 115px; cursor: pointer; width: 132px; height: 300px; z-index: 100; background:url("images/arrowRight.png") no-repeat 0 0;} .sprite.facebook { cursor: pointer; width: 36px; height: 36px; background-position: -72px -125px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.facebook:hover { opacity: 1; } .sprite.twitter { cursor: pointer; width: 36px; height: 36px; background-position: -36px -125px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.twitter:hover { opacity: 1;} .sprite.youtube { cursor: pointer; width: 36px; height: 36px; background-position: -0px -125px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.youtube:hover { opacity: 1; } .sprite.youtubeBig { cursor: pointer; width: 46px; height: 46px; background-position: -0px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.youtubeBig:hover { opacity: 1; } .sprite.gplusBig { cursor: pointer; width: 46px; height: 46px; background-position: -48px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.gplusBig:hover { opacity: 1; } .sprite.facebookBig { cursor: pointer; width: 46px; height: 46px; background-position: -95px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.facebookBig:hover { opacity: 1; } .sprite.twitterBig { cursor: pointer; width: 46px; height: 46px; background-position: -142px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.twitterBig:hover { opacity: 1; } .sprite.instagramBig { cursor: pointer; width: 46px; height: 46px; background-position: -189px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.instagramBig:hover { opacity: 1; } .sprite.pinterestBig { cursor: pointer; width: 46px; height: 46px; background-position: -236px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.pinterestBig:hover { opacity: 1; } .sprite.flickrBig { cursor: pointer; width: 46px; height: 46px; background-position: -283px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.flickrBig:hover { opacity: 1; } .sprite.bloggerBig { cursor: pointer; width: 46px; height: 46px; background-position: -330px -165px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.bloggerBig:hover { opacity: 1; } .mobileMenuIcon { position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; } .mobileMenuIcon-top, .mobileMenuIcon-middle, .mobileMenuIcon-bottom { height: 3px; width: 21px; background-color: #000; margin-bottom: 4px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .mobileMenuIcon.open .mobileMenuIcon-top { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: top left; transform-origin: top left;} .mobileMenuIcon.open .mobileMenuIcon-middle { opacity: 0; } .mobileMenuIcon.open .mobileMenuIcon-bottom { transform: rotate(-45deg); transform-origin: bottom left; -webkit-transform: rotate(-45deg); -webkit-transform-origin: bottom left;} .sprite.gridMail { cursor: pointer; width: 24px; height: 24px; background-position: -25px -213px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.gridMail.big { width: 24px; height: 24px; background-position: -25px -261px; opacity: 0.2; } .sprite.gridMail:hover { opacity: 1; } .sprite.gridLoc { cursor: pointer; width: 24px; height: 24px; background-position: -50px -213px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.gridLoc:hover { opacity: 1; } .sprite.gridWeb { cursor: pointer; width: 24px; height: 24px; background-position: 0px -213px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.gridWeb:hover { opacity: 1; } .sprite.gridTel { cursor: pointer; width: 24px; height: 24px; background-position: -75px -213px; text-indent: -9999px; display: inline-block; opacity: 0.3; } .sprite.gridTel:hover { opacity: 1; } .spriteLogos { position: relative; background:url("images/spriteLogos.png"); display: block !important; margin: 0 auto; background-size: 200%; width: 50%; height: 0px; padding-bottom: 25%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .spriteLogos.uhpa { cursor: pointer; background-position: 100% 0%; text-indent: -9999px; } .spriteLogos.uhpa.posLeft { background-position: 200% 0%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.uhpa:hover .posLeft { opacity: 1; } .spriteLogos.htz { cursor: pointer; background-position: 100% 5%; text-indent: -9999px; } .spriteLogos.htz.posLeft { background-position: 200% 5%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.htz:hover .posLeft { opacity: 1; } .spriteLogos.mint { cursor: pointer; background-position: 100% 10%; text-indent: -9999px; } .spriteLogos.mint.posLeft { background-position: 200% 10%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.mint:hover .posLeft { opacity: 1; } .spriteLogos.trivago { cursor: pointer; background-position: 100% 15%; text-indent: -9999px; } .spriteLogos.trivago.posLeft { background-position: 200% 15%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.trivago:hover .posLeft { opacity: 1; } .spriteLogos.ecm { cursor: pointer; background-position: 100% 20%; text-indent: -9999px; } .spriteLogos.ecm.posLeft { background-position: 200% 20%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.ecm:hover .posLeft { opacity: 1; } .spriteLogos.trip { cursor: pointer; background-position: 100% 25%; text-indent: -9999px; } .spriteLogos.trip.posLeft { background-position: 200% 25%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.trip:hover .posLeft { opacity: 1; } .spriteLogos.zagreb { cursor: pointer; background-position: 100% 30%; text-indent: -9999px; } .spriteLogos.zagreb.posLeft { background-position: 200% 30%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.zagreb:hover .posLeft { opacity: 1; } .spriteLogos.tzgz { cursor: pointer; background-position: 100% 35%; text-indent: -9999px; } .spriteLogos.tzgz.posLeft { background-position: 200% 35%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.tzgz:hover .posLeft { opacity: 1; } .spriteLogos.hr365_hr { cursor: pointer; background-position: 100% 45%; text-indent: -9999px; } .spriteLogos.hr365_hr.posLeft { background-position: 200% 45%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.hr365_hr:hover .posLeft { opacity: 1; } .spriteLogos.hr365_en { cursor: pointer; background-position: 100% 50%; text-indent: -9999px; } .spriteLogos.hr365_en.posLeft { background-position: 200% 50%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.hr365_en:hover .posLeft { opacity: 1; } .spriteLogos.hr365_fr { cursor: pointer; background-position: 100% 55%; text-indent: -9999px; } .spriteLogos.hr365_fr.posLeft { background-position: 200% 55%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.hr365_fr:hover .posLeft { opacity: 1; } .spriteLogos.hr365_de { cursor: pointer; background-position: 100% 60%; text-indent: -9999px; } .spriteLogos.hr365_de.posLeft { background-position: 200% 60%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.hr365_de:hover .posLeft { opacity: 1; } .spriteLogos.hr365_it { cursor: pointer; background-position: 100% 65%; text-indent: -9999px; } .spriteLogos.hr365_it.posLeft { background-position: 200% 65%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.hr365_it:hover .posLeft { opacity: 1; } .spriteLogos.hr365_es { cursor: pointer; background-position: 100% 70%; text-indent: -9999px; } .spriteLogos.hr365_es.posLeft { background-position: 200% 70%; display: block; opacity: 0; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: 0px;} .spriteLogos.hr365_es:hover .posLeft { opacity: 1; } /*************** END SPRITES ******************/ #paging { width: 100%; text-align: center; padding-top: 25px; overflow: hidden; margin: 0 auto; } #paging li{ list-style: none; float: left; margin: 0px 25px 0px 0px; padding: 0px; color: #828181; font-weight: bold; } #paging li a{ padding: 10px 15px; font-weight: 300; color: #8f8f8f; display: block; border-radius: 2px; } #paging li a:hover{ background-color: #f9f9f9; } #paging li.active a{ background-color: #1B5A89; color: #FFF; } #paging .outer { position: relative; float: left; left: 50%;} #paging .inner { position: relative; text-align: center; left: -50%;} #paging .hidden a { opacity: 0.2; cursor: default; } /** NOVOSTI **/ .social { display: inline-block; vertical-align: middle; } .lang-but { display: block; } .lang-but span { display: block; text-align: center; } .lang-but span.first { opacity: 0.4; } .lang-but span.last { opacity: 0.4; } .zbt { background-color: #3F2E2E; } .zbt .title { color: #FFF6E4; } .zbt img { margin: 20px auto; display: block;} .kids { background-color: #C21A51; vertical-align: middle; } .kids img { margin: 20px auto; display: block;} .kids p { line-height: 1.3; color: #FFF; text-align: center; width: 300px; margin: 0 auto; } .test { background-color: #0F9EB6;} .test img { margin: 20px auto; display: block;} .weather { text-align: center;} .weather { color: #808080; } .weather div .icon { display: block; margin: 0 auto; width: 45px; height: 45px; color: #CCC; } .weather > div:first-child { color: #2C5C7E;} .weather > div:first-child .icon { color: #2C5C7E;} .weather div .today { font-size: 30px; font-weight: bold; text-align: center; } .weather div .temp { font-size: 16px; text-align: center; } .weather div .date { font-size: 12px; text-align: center; } .baneri { border-left: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; width: 100%; cursor: pointer; } .baneri .boxy { position: relative; display: inline-block; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; width: 33.333%; padding: 1%; background-color: #f9f9f9; border-right: 1px solid #E6E6E6; border-top: 1px solid #E6E6E6; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .baneri .boxys { position: relative; display: inline-block; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; width: 16.665%; padding: 1%; background-color: #f9f9f9; border-right: 1px solid #E6E6E6; border-top: 1px solid #E6E6E6; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .baneri .boxy:hover, .baneri .boxys:hover { background-color: #333; } .baneri .h { position: absolute; bottom: -220px; width: 100%; height: 100%; left: 0px; background-color:rgba(255,255,255,0.0); padding: 0px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .baneri .h h1 { color: #fff; font-weight: 400; font-size: 22px; margin-bottom: 0px; text-align: center; } .baneri .h p { color: #fff; font-weight: 300; text-align: center; line-height: 1.3; } .baneri .h .w { padding : 20px; } .baneri .boxy:hover .h, .baneri .boxys:hover .h { bottom: 0px; background-color:rgba(30,30,30,0.9); } .baneri .boxy img, .baneri .boxys img { width: 100%; display: block; } .shareButton { position: relative; cursor: pointer; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .shareButton.center { margin: 0 auto; } .share-container { position: relative; height: 30px; } .dogadanja .h .shareButton { position: absolute; width: 30px; height: 30px; left: 50%; margin-left: -15px; cursor: pointer; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .dogadanja .h .shareList { position: absolute; opacity: 0; padding: 10px; z-index: 100; border-radius: 4px; top: 15px; } .dogadanje-container { position: relative; } .dogadanje-container .dogadanja { width: 100%; } .dogadanje-container .win:first-child { position: relative; } .dogadanja .boxy { position: relative; display: inline-block; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; border: 4px solid #FFF; width: 33%; padding-bottom: 19%; background-color: #f9f9f9; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .dogadanja .boxys { position: relative; display: inline-block; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; border: 4px solid #FFF; width: 17%; padding-bottom: 19%; background-color: #f9f9f9; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .dogadanja .boxy .inner, .dogadanja .boxys .inner {} .dogadanja .boxy:hover, .dogadanja .boxys:hover { /*background-color: #333;*/ } .dogadanja .image { position: absolute; width: 100%; height: 100%; overflow: hidden; } .dogadanja .boxy .image img { width: 100%; display: block; position: absolute; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .dogadanja .boxys .image img { height: 100%; display: block; position: absolute; left: -42%; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .dogadanja .h { position: absolute; bottom: 0px; width: 100%; height: 100%; left: 0px; background-color:rgba(0,0,0,0.0); opacity: 0; padding: 0px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .dogadanja .h h1 { color: #fff; font-weight: 400; font-size: 16px; margin-bottom: 0px; text-align: center; } .dogadanja .h .date { color: #ddd; font-weight: 300; font-size: 20px; margin-bottom: 10px; text-align: center; } .dogadanja .h p { color: #fff; font-weight: 300; text-align: center; line-height: 1.3; } .dogadanja .h .loc { color: #FFF; text-align: center; font-weight: 300; margin-bottom: 10px; } .dogadanja .h .w { padding : 20px; } .dogadanja .boxy:hover .h, .dogadanja .boxys:hover .h { bottom: 0px; background-color:rgba(0,0,0,0.8); opacity: 1; } .dogadanja .boxy:hover .DogNaslov, .dogadanja .boxys:hover .DogNaslov { opacity: 0; } .dogadanja .boxy:hover .image img, .dogadanja .boxys:hover .image img { -webkit-transform: scale(1.1, 1.1); } .dogadanja .boxy .link, .dogadanja .boxys .link { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .dogadanja .DogNaslov { position: absolute; bottom: 0px; margin: 0px; left: 0px; right: 0px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.58) 49%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(49%,rgba(0,0,0,0.58)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.58) 49%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.58) 49%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.58) 49%,rgba(0,0,0,0.9) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.58) 49%,rgba(0,0,0,0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cf000000',GradientType=0 ); /* IE6-9 */ opacity: 1; color: #fff; font-size: 16px; padding: 30px 20px; text-align: left; font-family: 'Roboto', Helvetica, sans-serif; font-weight: 300; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dogadanja .DogNaslov span { color: #B5B5B5; display: block; font-size: 12px; font-weight: 300; } .dogadanja .starts { font-size: 12px; text-align: center; color: #ddd; font-weight: 300; } .dogadanja-toolbar { padding-bottom: 20px; border-bottom: 1px solid #CCC; } .dogadanja li { } .dogadanja li .daysLeft { position: absolute; right: -50px; top: 50%; margin-top: -19px; color: #333; border-radius: 100px; padding: 10px; width: 16px; height: 16px; font-size: 12px; display: block; border: 1px solid #B3B3B3; text-align: center; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dogadanja li .share { } .dogadanja li .text, .dogadanja li h1 { -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dogadanja li .s-image { display: inline-block; position: absolute; margin-right: 20px; border-radius: 100px; width: 70px; top: 50%; margin-top: -35px;} .dogadanja li .text { display: inline-block; vertical-align: middle; margin-left: 90px; } .dogadanja li .shareButton { position: absolute; width: 30px; height: 30px; top: 50%; margin-top: -15px; right: -50px; cursor: pointer; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .dogadanja li .shareList { position: absolute; display: none; padding: 10px; background-color: #FFF; z-index: 100; border-radius: 4px; } .dogadanja li:hover .daysLeft { right: 20px; } .dogadanja li:hover .text { } .dogadanja li:hover .shareButton { right: 20px; } .dogadanja li:hover h1 { } .dogadanja li span.datum { font-weight: 400; } .dogadanje { text-align: center; } .dogadanje .mainImage { position: relative; width: 250px; height: 250px; margin: 0 auto; border-radius: 300px; overflow: hidden; } .dogadanje .mainImage img { position: absolute; left: 50%; top: 0px; margin-left: -215px; height: 100%; } .dogadanje .placeImage { position: relative; width: 100px; height: 100px; margin: 0 auto; border-radius: 300px; overflow: hidden; } .dogadanje .placeImage img { position: absolute; width: initial; left: 0px; top: 0px; height: 100%; } .dogadanje .datum { font-size: 30px; font-weight: 300; } .dogadanje .placeInfo { display: inline-block; } .win { position: absolute; width: 100%; top: 0px ;} .win.show { opacity: 1; z-index: 2; } .win.hide { opacity: 0; z-index: 1; } .win-relative { position: relative !important; } .win-relative.show { display: block; opacity: 1; z-index: 2; } .win-relative.hide { display: none; opacity: 0; z-index: 1; } video#intro-video { position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; background-size: cover; background-color: #FFF; } /*GENERAL LAYOUT*/ .mobile { display: none !important; } .desktop { display: block !important; } .blocks { position: relative; clear: both; } .blocks.two > div { width: 48%; float: left; margin: 0% 4% 0% 0%; } .blocks.three > div { width: 31.333%; float: left; margin: 0% 3% 0% 0%; } .blocks.three > div:nth-child(3n+3) { margin: 0% 0% 0% 0%; } .blocks.four > div { width: 23.5%; float: left; margin: 0% 2% 0% 0%; } .blocks.four > div:nth-child(4n+4) { margin: 0% 0% 0% 0%; } .blocks.five > div { width: 19.2%; float: left; margin: 0% 1% 0% 0%; } .blocks.five > div:nth-child(5n+5) { margin: 0% 0% 0% 0%; } .blocks.twoEqual > div { width: 50%; float: left; margin: 0%; } .blocks.threeEqual > div { width: 33.333%; float: left; margin: 0%; } .blocks.fourEqual > div { float: left; width: 25%; margin: 0%; } .blocks.twoEqualPadded { display: table; width: 100%; } .blocks.twoEqualPadded > div { width: 50%; display: table-cell; padding: 3%; margin: 0%; position: relative; } .blocks.twoEqualPadded > div.appImage { overflow: hidden; padding: 0%; } .blocks.twoEqualPadded > div.appImage img{ position: absolute; left: 50%; margin-left: -400px; } .blocks.threeEqualPadded { display: table; width: 100%; } .blocks.threeEqualPadded > div { width: 33.33%; display: table-cell; padding: 3%; margin: 0%; position: relative; } .blocks.fourEqualPadded { display: table; width: 100%; } .blocks.fourEqualPadded > div { width: 25%; display: table-cell; padding: 3%; margin: 0%; position: relative; } .blocks.ib > div { display: inline-block; vertical-align: top; float: none; } .blocks.nm > div { margin-left: -4px; } .blocks > div.last { margin: 0% !important; } .blocks.brosure > div { margin-bottom: 60px; } .listSix li { width: 14.1%; float: left; vertical-align: top; margin: 0% 3% 3% 0%; list-style: none; } .listSix li:nth-child(6n+6) { margin: 0px 0px 0px 0px;} .listFour div { width: 22.75%; float: left; vertical-align: top; margin: 0% 3% 3% 0%; list-style: none; } .listFour div:nth-child(4n+4) { margin: 0px 0px 0px 0px;} .listThree div { width: 31.333%; float: left; vertical-align: top; margin: 0% 3% 3% 0%; list-style: none; } .listThree div:nth-child(3n+3) { margin: 0px 0px 0px 0px; } .listTwo div { width: 48.5%; float: left; vertical-align: top; margin: 0% 3% 3% 0%; list-style: none; } .listTwo div:nth-child(2n+2) { margin: 0px 0px 0px 0px;} .blocks .zagrebPlaces { background-color: #2C5C7E; color: #fff; } .blocks .zagrebPlaces h2{ color: #FFF; } .blocks .beThereZagreb { background-color: #E4E1CD; color: #02495A; } .blocks .meetInZagreb { background-color: #fff; color: #7C7C7C; } .blocks .timeOutZagreb { background-color: #272D30; color: #FFF; } .blocks .timeOutZagreb h2{ color: #FFF; } .blocks .voiceGuideZagreb { background-color: #F4F4F4; } .quote-1 { padding: 20px; } .quote-1 h1 { text-align: center; color: #222;} .quote-1 h2 { text-align: center; color: #222; } .gridView {} .gridView li { position: relative; width: 33.33%; -moz-box-sizing:border-box; box-sizing:border-box; height: 410px; margin : 0px; float: left; border-top: 1px solid #EEEEEE; border-right :1px solid #EEEEEE; padding: 2%; list-style: none; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .gridView li:nth-child(1), .gridView li:nth-child(2), .gridView li:nth-child(3){ border-top: none;} .gridView li img { width: 100%; border-radius: 4px; margin-bottom: 10px; } .gridView li h1 { font-size: 18px; font-weight: bold; margin:0px; color: #222; } .gridView li h2 { margin:0px; font-size: 21px; } .gridView li .adresa { text-transform: uppercase; font-size: 12px; font-weight: 400; } .gridView li .heading { position: absolute; left: 0px; bottom: 15px; width: 100%; } .gridView li p{ line-height: 1.4; color: #888; } .gridView li a { color: #000; } .gridView li:hover { background-color: #EEE;} .gridView li:nth-child(3n+3) { border-right: none; } .gridView li:last-child { border-right: none; } .listView { margin: 0px !important;} .listView > li { position: relative; width: 100%; margin : 0px; border-bottom: 1px solid #EEEEEE; padding: 20px 0px; list-style: none; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .listView > li .text { display: inline-block; vertical-align: middle; margin-left: 100px; } .listView > li h1, .listView > li h2 { font-size: 18px; margin:0px; color: #222; font-weight: 400; } .listView > li p{ line-height: 1.4; color: #888; font-weight: 300; margin: 0px; } .listView > li a { color: #000; line-height: 70px; } .listView > li:hover { background-color: #f8f8f8; } .listView > li .image { position: absolute; left: 10px; top: 50%; margin-top: -35px; } .listView > li .image img { border-radius: 100px; width: 70px; border : 1px solid #EAEAEA; } .listView.lokacije { } .gridView.small li { height: 200px; } .gridView.medium li { height: 300px; } .gridView.dogadanja li { height: 250px; } .gridView.dogadanja li:hover { background-color: inherit;} .placeInfo { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #EFEFEF; font-size: 14px; font-weight: 300; overflow: hidden; } .placeInfo > div { margin: 0px 10px 00px 0px; float: left; } .placeInfo > div:last-child { margin-bottom: 0px; } .placeTitles { position: absolute; top: 20px; left: -20px; z-index: 2; } .placeTitle { padding: 15px 40px; color: #FFF; background-color: rgba(6, 114, 196, 0.8); margin: 0px; } .placeSubTitle { padding: 15px 40px; color: #FFF; background-color: rgba(0, 0, 0, 0.6); max-width: 600px; font-size: 20px; } .placeImage{ position: relative; height: 400px; overflow: hidden; border-radius: 4px; } .placeImage img{ position: absolute; width: 100%; top: 0px; } .place.shareButton { background-color: #FFF; padding: 6px; } .placeAddress { font-size: 16px; margin-bottom: 10px; } .language-window { display: none; position: absolute; z-index: 1000; min-width: 150px; right: 0px; top: 70px; padding: 10px; background-color: rgba(255,255,255,0.9); border: 1px solid #eee; border-radius: 4px; } .language-window.show { display: block; } .language-container { position: relative; display: inline-block; vertical-align: middle; } .search-button { position: relative; width: 50px; height: 50px; display: inline-block; vertical-align: middle; z-index: 10; border-radius: 30px; border: 2px solid #333; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .search-button .icon-search-1 { position: absolute; top: 50%; left: 50%; margin: -10px 0px 0px -10px; width: 20px; height: 20px; color: #333; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dropDownButton { cursor: pointer; position: relative; width: 25px; height: 25px; display: inline-block; vertical-align: middle; border-radius: 30px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .dropDownButton img { position: absolute; top: 50%; left: 50%; margin: -12.5px 0px 0px -12.5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dropDownButton.blue { background-color: #097acf; } .dropDownButton.black { background-color: #333; } .dropDownButton.white { border: 1px solid #C7C7C7 !important; } #searchForm { position: relative; } .search-container .searchField{ color: #fff; background-color: #333; width: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; margin: 0px !important; padding: 10px 10px 10px 25px !important; height: 50px; border-radius: 30px !important; width: 30px; border-radius: 30px; border: none; box-shadow: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .search-container .searchField:hover { border : inherit; } .search-container .searchField:focus { border: inherit; background-color: #333; width: 300px !important; opacity: 1 !important; } .search-container { position: relative; } .search-container:hover .searchField{ width: 300px; opacity: 1; } .search-container:hover .search-button{ background-color: #f8f8f8; border: 2px solid #333; } .search-container:hover .search-button img { transform: rotate(90deg); } .search-separator { padding: 20px 30px; display: inline-block; vertical-align: middle;} .sep { display: inline-block; height: 70px; width: 1px; vertical-align: middle; background-color: rgba(27, 90, 137, 0.1); } .search-container-small .searchField { vertical-align: middle; } .search-container-small .searchButton { display: inline-block; vertical-align: middle; background-color: #ccc; padding: 6px 10px; } .weather-container { display: inline-block; vertical-align: middle; padding: 20px 30px; color: #1b5a89; } .weather-container .icon { display: block; margin: 0 auto; } .weather-container .temp { text-align: center; font-weight: 600; font-size: 16px; color: #1b5a89; } .weather-container .day { font-size: 10px; text-align: center; font-weight: bold; color: #1b5a89; } .widget .facts { color: #333; border-radius: 6px; border : 1px solid #eee; padding: 20px; } .widget .facts .fact { float: left; width: 39.8%; padding: 5%; border-right: 1px solid #eee; margin-bottom: 10px; } .widget .facts .fact.last { border-right: none; } .widget .facts hr { margin: 10px 0; background-color: #eee; } .widget .facts img {} .widget .facts .fact-text { font-size: 26px; font-weight: 300; color: #333; text-align: center; display: block; } .widget .facts .fact-text span { display: block; text-align: center; font-size: 12px; color: #ccc; } .widget .facts .sl-fact-text { font-size: 14px; font-weight: 300; color: #FFF; text-align: center; } .widget .facts .sl-fact-text span { text-align: center; font-size: 12px; color: #f9f9f9; } .widget.newsletter { font-family: 'Roboto Slab', Helvetica, sans-serif; } .widget.newsletter input[type="text"] { background-color: #FFF; } .widget.newsletter label { font-weight: 400; text-align: center; margin: 0px; color: #5390be; } .widget.newsletter p { line-height: 1.4; } .widget.newsletter .outer { /*background:url("images/newsletter-back.gif") 0% 0% no-repeat;*/ padding: 6px 0px 6px 0px; border-radius: 4px; border: 1px solid #E7E7E7; } .widget.newsletter .inner { padding: 30px 40px; } .widget.newsletter .title { color: #cd5c5c; font-family: 'Roboto Slab', Helvetica, sans-serif; } .widget.newsletter .title span { color: #333; } .widget.newsletter .icon { display: block; width: 60px; height: 60px; margin: 0 auto; } #newsletterSuccess { margin-top: 20px; display:none; } .odjava { max-width: 500px; width: 100%; } .eventCalendar-container li { list-style: none; float: left; font-size: 12px; width: 20px; padding: 4px; height: 20px; border: 1px solid #E2E2E2; color: #E2E2E2; border-radius: 20px; text-align: center; line-height: 20px; margin: 0px 10px 10px 0px; } /** PLAYGROUND **/ .fp-wrap { position: relative; z-index: 2; text-align: center; } .fp { position: relative; overflow: hidden; } .fp .background { background:url("images/FooterPanorama1.jpg") 50% 50% no-repeat; height: 420px; } #PLAYGROUND { position: absolute; left: 50%; height: 100%; } #PLAYGROUND .PLAYER { position: absolute; width: 50px; height: 50px; } #PLAYGROUND .PLAYER.SELF { } #PLAYGROUND .PLAYER .chatBubble{ position: absolute; display: none; top: -30px; background-color: #333; padding: 10px; border-radius: 10px; font-size: 10px; color: #FFF; min-width: 100px; } #PLAYGROUND .PLAYER input { display: none; } .PLAYER.deda1 { background: url("images/deda1.gif") 0% 0% no-repeat; } .PLAYER.deda2 { background: url("images/deda2.gif") 0% 0% no-repeat; } .PLAYER.deda3 { background: url("images/deda3.gif") 0% 0% no-repeat; } .PLAYER.deda4 { background: url("images/deda4.gif") 0% 0% no-repeat; } .PLAYER.left { background-position: 0px 0px; } .PLAYER.right { background-position: -50px 0px; } .PLAYER.walking.left { background-position: 0px -50px; } .PLAYER.walking.right { background-position: -50px -50px; } .PLAYER.left.velocity-animating { background-position: 0px -50px; } .PLAYER.right.velocity-animating { background-position: -50px -50px; } .vLink { position: relative; display: inline-block; } .vLink:after { content: url("images/videoPlay.png") ; position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -50px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .vLink:hover:after { -webkit-transform: scale(0.90, 0.90); -moz-transform: scale(0.90, 0.90); -ms-transform: scale(0.90, 0.90); transform: scale(0.90, 0.90); } label.error { display: block; } .index-sections { padding: 50px 0px 50px 0px;margin-top: 50px} .brosura { border-top: 1px solid #F1F1F1;border-bottom: 1px solid #F1F1F1;text-align: center;} .terminiList { margin-left: 0px !important; padding: 0px; list-style-type: none; } .terminiList li { font-size: 18px; margin-bottom: 10px; } .terminiList li .time { font-weight: bold; } .privatni-text { position: absolute; left: 0px; right: 0px; bottom: 50px; color: #FFF; text-transform: uppercase; font-size: 12px; text-align: center; } .ticket img { vertical-align: middle; width: 150px; margin-right: 10px; } .header-widgets { margin-top: 14px; } .accept-cookie-window { position: fixed; z-index: 10000; bottom: 0px; background-color: rgba(0,0,0,0.8); width: 100%; padding: 30px 0px; text-align: center; color: #B6B6B6; } .accept-cookie-window a { color: #ffffff !important; font-weight: bold; } .christmas-image { width: 300px;} .best-destination { display: block; position: absolute; right: 59px; bottom: 0px; } .best-destination img { width: 150px; } .zagreb-nominee { display: block; position: absolute; left: 60px; bottom: 0px; } .zagreb-nominee img { } [class^="icon-"], [class*=" icon-"] { height: 32px; width: 32px; display: inline-block; fill: currentColor; } /*****/ #top-wrap.index.landing { position: relative; } #middle-wrap-video.landing { height: 440px; } .join-newsletter { background: url("/images/vrdoljak-town.jpg"); background-size: cover; padding: 120px 0;} .join-newsletter .form-item { width: 50%;} .join-newsletter .form-item label { color: #FFF;} .join-newsletter button { background-color: transparent; border: 1px solid #FFF; color: #FFF; font-size: 14px;} /******/ /* Smartphones (portrait and landscape) ----------- */ @media screen and (min-width : 320px) and (max-width : 480px) { .mobile { display: block !important; } .desktop { display: none !important; } .left{ float: none; } .right{ float: none; } .content-70 { width: 100%; } .side-70 { display: none; } .FP-wrap { display: none; } #outer-wrapper{ position: relative; top: 0px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #outer-wrapper.open{ position: fixed; overflow: hidden; box-shadow: 1px 1px 10px #C0C0C0; -webkit-transform: translateX(80%); transform: translateX(80%); } #top-wrap{ width:100%; min-width:100%; position: relative; z-index: 100; } #top-wrap.index { position: absolute; z-index: 10; } #top-wrap.fixed .top { padding-bottom: 0px; } #middle-wrap{ width:100%; } #bottom-wrap{ position: relative; background-color: #FFF; min-width:100%; padding-bottom: 0px; } video#intro-video { display: none; } .p1 { background: url("/images/placeholder1.jpg") 50% 0%; background-size: cover; } .p1-1 { background: url("/images/placeholder1-1.jpg") 50% 0%; background-size: cover; } .p2-2 { background: url("/images/placeholder2-2.jpg") 50% 0%; background-size: cover; } .p3-3 { background: url("/images/placeholder3-3.jpg") 50% 0%; background-size: cover; } .advent-1 { background: url("/images/advent-2-1_web.jpg") 50% 0%; background-size: cover; } .advent-2 { background: url("/images/advent-2-2_web.jpg") 50% 0%; background-size: cover; } .advent-3 { background: url("/images/advent-2-3_web.jpg") 50% 0%; background-size: cover; } .advent-4 { background: url("/images/advent-2-4_web.jpg") 50% 0%; background-size: cover; } .advent-5 { background: url("/images/advent-2-5_web.jpg") 50% 0%; background-size: cover; } .side-meni { width: 100%; margin: 0px; } .side-meni .title { text-align: center; margin-bottom: 0px; } .content { width: 100%; } .header.fixed{ margin-top: inherit; } .wrap.header { padding: 20px 0;} .wrap { width: 100%; margin: 0 auto; position:relative; min-width: inherit; max-width: inherit; } .content-wrap { width: 100%; padding: 0px 10px 0px 10px ; position:relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .mobileMenu { background-color: #F5F5F5; position: absolute; top: 0px; left: 0px; display: block !important; width: 80%; padding-top: 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .mobileMenu.open { max-height: 8000px; transform: translateX(0%); -webkit-transform: translateX(0%); } .mobileMenuButton { position: relative; display: block; height: 60px; line-height: 60px; color: #333; font-size: 16px; font-weight: 300; } .mobileMenuButton.active {} .blocks.two > div { width: 100%; float: none; margin: 0% 0% 0% 0%; } .blocks.three > div { width: 100%; float: none; margin: 0%; } .blocks.four > div { width: 100%; float: none; margin: 0%; margin-bottom: 20px; } .blocks.threeEqual > div { width: 100%; float: none; margin: 0%; } .blocks.twoEqual > div { width: 100%; float: none; margin: 0%; } .blocks.fourEqual > div { width: 100%; float: none; margin: 0%; } .blocks.threeEqualPadded { display: table; width: 100%; } .blocks.threeEqualPadded > div { width: 100%; display: block; padding: 3%; box-sizing:border-box; margin: 0%; position: relative; } .listFour div { width: 100%; display: inline-block; vertical-align: top; margin: 0% 0% 0% 0%; list-style: none; } .listThree div { width: 100%; display: inline-block; vertical-align: top; margin: 0% 0% 0% 0%; list-style: none; } .listTwo div { width: 100%; display: inline-block; vertical-align: top; margin: 0% 0% 0% 0%; list-style: none; } .gridView li { position: relative; width: inherit; height: auto; margin : 0px; float: none; border-bottom: 1px solid #EEEEEE; border-right : none; padding: 2%; list-style: none; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .gridView.medium li { height: inherit; margin-bottom: 15px; padding-bottom: 15px; } .header .logo-img { margin: 0 auto; float: none;} .header .top { height: inherit; } /*.wrap.pt50 { padding-top: 0px !important; }*/ /************* MENU - MAIN TOP NAVIGATION **************/ .nav-wide { background-color: rgba(255, 255, 255, 0.6); opacity: 1 !important; min-width: inherit; width: 100%; margin: 0px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .header.index .nav-wide { background-color: rgba(255, 255, 255, 0.6); } .header.index .nav-wide.fixed { background-color: rgba(255, 255, 255, 0.6); } .nav-wide.fixed { position: relative; top: inherit; left: inherit; z-index: 1; width: 100%; background-color: inherit; } .nav-wide.fixed .menu > li > a { color: inherit; } #nav-secondary { opacity: 0; max-height: 0px; padding-bottom: 50px; display: none; } #nav-secondary.show { opacity: 1; max-height: 20000px; padding-bottom: 50px; display: block; } .horizontal li { display: block; } .horizontal.separator li { border-right: none; } /******* FIRST LEVEL *******/ .menu { display: none; margin: 0px; height:auto; min-height: 100%; width: 100%; overflow: hidden; } .mobile.menu { display: block;} .menu > li { float:none; border-bottom: 1px solid #D5D5D5; } .menu > li:hover { background-color: inherit; } .menu > li a{ padding: 0px 30px 0px 30px; color: #666; font-size:16px; font-weight: 300;} .menu > li a:hover{ background-color: inherit; } .menu > li.active > a{ background-color: #000; } /******* SECOND LEVEL *******/ .menu > li > ul { position: relative; display: none; padding: 0px; top: inherit; border : none; z-index: 0; opacity: 1; background-color: inherit; } .menu > li > ul > li { position: relative; list-style: none; list-style-type: none; } .menu > li > ul > li a:hover{ } .menu > li > ul > li a.active{ background-color: inherit; color: #000 !important;} .menu > li > ul > li a{ display: block; width: inherit; font-size: 13px; padding: 15px 30px ; color: #666; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /******* THiRD LEVEL *******/ .menu > li > ul > li > ul { left: 220px; top: 0px; } .menu > li > ul:before { content: ' '; height: 0; position: absolute; width: 0; top: -16px; left: 50%; right: 50%; border: 8px solid transparent; border-bottom-color: #D6D6D6;} .menu > li.active > ul { display: block; } /************* FLAT MENU **************/ /******* SECOND LEVEL *******/ .menu .flat > ul { left: 0px; border : none; } .menu .flat > ul > li { position: relative; display: block; width: 100%; } .menu .flat > ul > li > a { font-weight: 600; color: #000; font-size: 16px; border-bottom: 1px solid #ccc; background-color: inherit; font-weight: normal; } .menu .flat > ul > li > a.active { background-color : inherit; color: #000; border-bottom: 1px solid #ccc;} .menu .flat > ul > li > a:hover { background-color: inherit; color: inherit; cursor: default; } /******* THIRD LEVEL *******/ .menu .flat > ul > li > ul { display: block; position: relative; top: inherit; left: inherit; border : none; padding: 0px; } .menu .flat > ul > li > ul > li > a { width: 100%; font-size: 14px; color: #666; font-weight: 300; } .menu .flat > ul > li > ul > li > a.active { background-color: #D7D7D7; color: #333; font-weight: 400; } .menu .menu84 { text-indent: -9999px; background:url("images/home@2x-mobile.png") no-repeat 50% 50%; background-size: 25px; } .menu li.active .menu84 { text-indent: -9999px; background:url("images/home@2x-mobile-active.png") no-repeat 50% 50%; background-color: #000; background-size: 25px; } /************* FOOTER **************/ #footer { padding-top: 0px; margin-top: inherit; } #footer .hearts { position: absolute; left: 10px; top: -120px; } #footer .hearts img { width: 200px; } .weather li { text-align: center; } .weather li img { float: none; width: 40px; } .dogadanje-container { padding-bottom: inherit; } .dogadanja .boxys { display: block; width: 100%; height: inherit; padding-bottom: 50%; } .dogadanja .boxys .image img { width: 100%; height: initial; left: inherit; } .dogadanja .boxy { display: block; width: 100%; padding-bottom: 50%;} .placeTitles { position: relative; left: inherit; top: inherit; } .placeTitle { background-color: inherit; padding: 0px; margin-bottom: 10px; color: #000;} .placeSubTitle { display: none; } .placeImage { height: inherit; } .placeImage img { position: relative; width: 100%; } .placeInfo > div { float: none; } .article img { display: none; } .article .details { margin-left: inherit; padding-right: inherit; } .article .date { position: relative; left: inherit; margin-left: inherit; color: #222; font-size: 12px; font-weight: 300; } .languagesList { margin-bottom: 20px; } .languagesList li { list-style-type: none; float: left; width: 33.33%; padding: 10px; text-align: center; box-sizing:border-box;} .languagesList li .flag { border-radius: 4px; width: 30px; display: block; margin: 0 auto; margin-bottom: 5px; } .languagesList li a { color: #555; font-weight: 300; font-size: 12px; } .header-widgets { display: none; } .search-container { padding: 0px 20px; margin-bottom: 30px; } .search-container .searchField { position: relative; opacity: 1; width: 100% !important; background-color: #E4E4E4; border-radius: 4px; } .search-container .searchField:hover { width: 100%; } .search-container .searchField:focus { width: 100% !important; } .search-container .search-button { position: absolute; width: 54px; height: 54px; right: 0px; top: 0px; border : none; } .search-container:hover .search-button { border : none; } .dateFilter { display: none; } .weather div img { width: 30px; } .weather div .temp { font-size: 12px; } .weather div .today { font-size: 16px; } .best-destination, .zagreb-nominee { display: block; position: relative; width: 100%; text-align: center; right: initial; bottom: initial; left: initial; } .best-destination img { width: 100px; } .zagreb-nominee img { width: 80px; } } /* iPads (portrait and landscape) ----------- */ @media screen and (min-width : 481px) and (max-width : 960px) { .mobile { display: block !important; } .desktop { display: none !important; } .content-70 { width: 100%; } .side-70 { display: none; } #outer-wrapper{ position: relative; top: 0px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #outer-wrapper.open{ position: fixed; overflow: hidden; box-shadow: 1px 1px 10px #C0C0C0; -webkit-transform: translate3d(400px,0,0); transform: translate3d(400px,0,0); } #top-wrap{ width:100%; min-width:100%; position: relative; z-index: 100; } #top-wrap.index { position: absolute; } #top-wrap.fixed .top { padding-bottom: 0px; } #middle-wrap{ width:100%; } #bottom-wrap{ min-width:100%; padding-bottom: 0px; } video#intro-video { display: none; } .p1 { background: url("/images/placeholder1.jpg") 50% 0%; background-size: cover; } .p1-1 { background: url("/images/placeholder1-1.jpg") 50% 0%; background-size: cover; } .p2-2 { background: url("/images/placeholder2-2.jpg") 50% 0%; background-size: cover; } .p3-3 { background: url("/images/placeholder3-3.jpg") 50% 0%; background-size: cover; } .advent-1 { background: url("/images/advent-2-1_web.jpg") 50% 0%; background-size: cover; } .advent-2 { background: url("/images/advent-2-2_web.jpg") 50% 0%; background-size: cover; } .advent-3 { background: url("/images/advent-2-3_web.jpg") 50% 0%; background-size: cover; } .advent-4 { background: url("/images/advent-2-4_web.jpg") 50% 0%; background-size: cover; } .advent-5 { background: url("/images/advent-2-5_web.jpg") 50% 0%; background-size: cover; } .content { width: 100%; } .side-meni { width: 100%; margin-right: 0%; } .side-meni .title { text-align: center; margin-bottom: 0px; } .header.fixed{ margin-top: 0px; } .wrap { width: 100%; margin: 0 auto; position:relative; min-width: inherit; max-width: inherit; } .content-wrap { width: 100%; padding: 0px 20px 0px 20px ; position:relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .mobileMenu { background-color: #F5F5F5; position: absolute; top: 0px; left: 0px; display: block !important; width: 400px; padding-top: 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .mobileMenu.open { max-height: 8000px; -webkit-transform: translateX(0%); transform: translateX(0%); } .mobileMenuButton { position: relative; display: block; height: 60px; line-height: 60px; color: #333; font-size: 20px; font-weight: 300; } .mobileMenuButton.active {} /************* MENU - MAIN TOP NAVIGATION **************/ .nav-wide { background-color: rgba(255, 255, 255, 0.6); opacity: 1 !important; border-top: 1px solid #eee; border-bottom: 1px solid #eee; min-width: inherit; width: 100%; margin: 0px; } .header.index .nav-wide { background-color: rgba(255, 255, 255, 0.6); } .header.index .nav-wide.fixed { background-color: rgba(255, 255, 255, 0.6); } .nav-wide.fixed { position: relative; top: inherit; left: inherit; z-index: 1; width: 100%; background-color: inherit; } .nav-wide.fixed .menu > li > a { color: inherit; } /******* FIRST LEVEL *******/ .menu { display: none; margin: 0px; height:auto; min-height: 100%; width: 100%; overflow: hidden; } .mobile.menu { display: block !important;} .menu > li { float:none; border-bottom: 1px solid #D5D5D5; } .menu > li:hover { background-color: inherit; } .menu > li a{ padding: 0px 30px 0px 30px; color: #666; font-size:16px; font-weight: 300;} .menu > li a:hover{ } .menu > li.active > a{ background-color: #000; } /******* SECOND LEVEL *******/ .menu > li > ul { position: relative; display: none; padding: 0px; top: inherit; border : none; z-index: 0; opacity: 1; background-color: inherit; } .menu > li > ul > li { position: relative; list-style: none; list-style-type: none; } .menu > li > ul > li a:hover{ color: #666; background-color: #088ff6;} .menu > li > ul > li a.active{ color: #000; background-color: #088ff6;} .menu > li > ul > li a{ display: block; width: inherit; font-size: 13px; padding: 15px 30px ; color: #666; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /******* THiRD LEVEL *******/ .menu > li > ul > li > ul { left: 220px; top: 0px; } .menu > li > ul:before { content: ' '; height: 0; position: absolute; width: 0; top: -16px; left: 50%; right: 50%; border: 8px solid transparent; border-bottom-color: #D6D6D6;} .menu > li.active > ul { display: block; } /************* FLAT MENU **************/ /******* SECOND LEVEL *******/ .menu .flat > ul { left: 0px; border : none; } .menu .flat > ul > li { position: relative; display: block; width: 100%; } .menu .flat > ul > li > a { font-weight: 600; color: #000; font-size: 16px; border-bottom: 1px solid #ccc; background-color: inherit; font-weight: normal; } .menu .flat > ul > li > a.active { background-color : inherit; color: #000; border-bottom: 1px solid #ccc;} .menu .flat > ul > li > a:hover { background-color: inherit; color: inherit; cursor: default; } /******* THIRD LEVEL *******/ .menu .flat > ul > li > ul { display: block; position: relative; top: inherit; left: inherit; border : none; padding: 0px; } .menu .flat > ul > li > ul > li > a { width: 100%; font-size: 14px; color: #666; font-weight: 300; } .menu .flat > ul > li > ul > li > a.active { background-color: #D7D7D7; color: #333; font-weight: 400; } /******* THIRD LEVEL *******/ .menu .flat > ul > li > ul { display: block; position: relative; top: inherit; left: inherit; border : none; padding: 0px; } .menu .flat > ul > li > ul > li > a { width: 100%; font-size: 14px; color: #666; font-weight: 300; } .menu .menu84 { text-indent: -9999px; background:url("images/home@2x-mobile.png") no-repeat 50% 50%; background-size: 25px; } .menu li.active .menu84 { text-indent: -9999px; background:url("images/home@2x-mobile-active.png") no-repeat 50% 50%; background-color: #000; background-size: 25px; } .blocks.four > div { width: 47%; float: left; margin-right: 6%; margin-bottom: 20px; } .blocks.four > div:nth-child(2n+2) { margin: 0px 0px 0px 0px;} .blocks.fourEqual > div { float: left; width: 50%; margin: 0px; } .blocks.fourEqual.ignore-ipad > div { float: left; width: 25%; margin: 0px; } .listFour div { width: 48.5%; display: inline-block; vertical-align: top; margin: 0% 3% 3% 0%; list-style: none; } .listFour div:nth-child(4n+4) { margin: 0% 3% 3% 0%; } .listFour div:nth-child(2n+2) { margin: 0px 0px 0px 0px; } .listThree div { width: 48.5%; display: inline-block; vertical-align: top; margin: 0% 3% 3% 0%; list-style: none; } .listThree div:nth-child(3n+3) { margin: 0% 3% 3% 0%; } .listThree div:nth-child(2n+2) { margin: 0px 0px 0px 0px;} #nav-secondary { opacity: 0; max-height: 0px; padding-bottom: 50px; display: none; } #nav-secondary.show { opacity: 1; max-height: 20000px; padding-bottom: 50px; display: block; } /************* FOOTER **************/ #footer { padding-top: 0px; margin-top: inherit;} #footer .hearts { position: absolute; left: 10px; top: -120px; } #footer .hearts img { width: 200px; } .weather li { text-align: center; } .weather li img { float: none; } .languagesList { padding: 0px 20px; margin-bottom: 30px; } .languagesList li { list-style-type: none; float: left; width: 16.66%; padding: 10px; text-align: center; box-sizing:border-box;} .languagesList li .flag { border-radius: 4px; width: 30px; display: block; margin: 0 auto; margin-bottom: 5px; } .languagesList li a { color: #555; font-weight: 300; font-size: 12px; } .search-separator.search-widget { display: none; } .search-separator.language-container { display: none; } .search-container { padding: 0px 20px; margin-bottom: 30px; } .search-container .searchField { position: relative; opacity: 1; width: 100% !important; background-color: #E4E4E4; border-radius: 4px; } .search-container .searchField:hover { width: 100%; } .search-container .searchField:focus { width: 100% !important; } .search-container .search-button { position: absolute; width: 54px; height: 54px; right: 0px; top: 0px; border : none; } .search-container:hover .search-button { border : none; } } /* Desktops and laptops ----------- */ @media screen and (min-width : 1024px) { } /* Large screens ----------- */ @media screen and (min-width : 1680px) { } label.error { display: block; } span.rounded { border: 2px solid rgb(27, 90, 137); display: inline-block; border-radius: 5px; padding: 10px; margin-top: 10px; margin-bottom: 10px; } div.disclaimerEvents{ margin: 0 auto; margin-top: 50px; /* margin-bottom: 20px; */ /* padding-bottom: 20px; */ /* border-bottom: 1px solid #EFEFEF; */ font-size: 13px; font-weight: 300; overflow: hidden; padding: 5px; width: 100%; max-width: 500px; } .YouTubeWrap { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .YouTubeWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @-webkit-keyframes rotating /* Safari and Chrome */ { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 30s linear infinite; -moz-animation: rotating 30s linear infinite; -ms-animation: rotating 30s linear infinite; -o-animation: rotating 30s linear infinite; animation: rotating 30s linear infinite; } ol.custom-indent li, ul.custom-indent li { margin-left: 40px; line-height: 1.8; font-weight: 300; }