html{height:100%; }
body{background-color:#edf7ff; height:100%; margin:0 auto; padding:0; font-family:'Open Sans', sans-serif, 'Arial', 'Tahoma'; min-width:20em; }
@media only screen and (min-width:48em){body{}}
@media only screen and (min-width:90em){body{}}
.header{width:100%; height:100%; min-width:20em; padding:0; box-sizing:border-box; position:relative; }
@media only screen and (min-width:48em){.header{}}
@media only screen and (min-width:90em){.header{}}
.content{width:100%; overflow:hidden; }
@media only screen and (min-width:30em){.content{}}
@media only screen and (min-width:48em){.content{}}
@media only screen and (min-width:64em){.content{}}
.footer{width:100%; max-width:80em; margin:0 auto; overflow:hidden; }
.footer-wrap{width:100%; background-color:#022748; margin:0; }
@media only screen and (min-width:30em){.footer{}}
@media only screen and (min-width:48em){.footer{}}
@media only screen and (min-width:64em){.footer{}}
.Menu{display:none; width:100%; height:3em; position:fixed; top:0; left:0; right:0; box-shadow:0 0.125em 0.5em #00294e; background-color:rgba(0, 41, 78, 0.9); z-index:1; }
.Menu nav{margin:0 auto; max-width:80em; width:100%; position:relative; overflow:hidden; }
.Menu .logo{display:block; background-image:url(https://www.costbenefit.hr/container/images/r1/g2017/m11/humanUp-logo-color.png); background-size:13em; background-repeat:no-repeat; background-position:center 1.2em; overflow:hidden; margin:0; padding:0; width:100%; box-sizing:border-box; color:#E8FFB6; }
.Menu .logo h1{color:#9e9e9e; font-size:1.125em; margin:0; padding:3.5em 0 0 0; font-family:'Open Sans Condensed', sans-serif, 'Arial'; font-weight:normal; text-align:center; }
.Menu .main{ }
.Menu .main li{float:left; width:100%; }
.Menu .main li a{color:#ffffff; }
@media only screen and (min-width:40em){
.Menu{ }
}
@media only screen and (min-width:48em){
.Menu{display:block; overflow:hidden; }
.Menu .logo{position:absolute; top:0; left:1em; width:13em; background-size:100%; }
.Menu .main{padding:0.85em 0 0 0; box-sizing:border-box; overflow:hidden; margin:0 1.5em 0 0; text-align:center; }
.Menu .main li{display:inline-block; width:auto; width:initial; margin:0 2em 0 0; float:none; }
}
@media only screen and (min-width:90em){
.Menu{ }
}
.Services{width:100%; max-width:80em; margin:0 auto; display:block; margin-top:1em; overflow:hidden; padding-bottom:2em; position:relative; }
.Services h1{text-align:center; color:#2169a9; font-size:1.75em; }
.Services ul{color:#2169a9; width:16.5em; margin:0 auto; display:block; }
.Services ul li{margin-left:2em; margin-bottom:1.5em; position:relative; }
.Services ul li p{font-size:0.95em; }
.Services ul li a.li-details{position:absolute; top:0.25em; right:0; background-color:#2169a9; color:#ffffff; padding:0.25em 0.5em 0.25em 0.5em; border-radius:0.25em; }
.Services ul.details{position:absolute; top:0; left:0; right:0; background-color:#155188; color:#ffffff; }
.Services ul.details li{display:none; margin-left:1em; color:#ffffff; height:25em; }
.Services ul.details li.close-details{display:none; z-index:10000; height:initial; height:auto; position:absolute; top:0.25em; right:0.25em; color:#ffffff; font-size:1.35em; }
.Services ul.details li.close-details a{color:#ffffff; }
.Services ul.details li h2{ }
.Services ul.details li ul{width:95%; box-sizing:border-box; margin:0; }
.Services ul.details li ul li{display:block; height:initial; height:auto; }
@media only screen and (min-width:25em){
.Services{ }
.Services ul{width:23em; }
}
@media only screen and (min-width:48em){
.Services{ }
.Services h1{font-size:2.1em; }
.Services ul{width:30em; }
.Services ul li p{font-size:1.2em; }
}
@media only screen and (min-width:64em){
.Services{ }
}
.Basic{width:100%; color:#ffffff; font-size:0.9em; padding:1em; margin:0; box-sizing:border-box; overflow:hidden; display:block; }
.Basic h1{float:left; width:100%; font-size:1.75em; text-align:center; }
.Basic .main{width:100%; padding:0; overflow:hidden; text-align:center; }
.Basic .more{width:100%; padding:0; text-align:center; }
.Basic .registered{width:100%; margin-top:3em; overflow:hidden; }
.Basic .registered h1{margin:0; padding:0; font-size:1.5em; text-align:center; }
.Basic .registered ul{list-style-type:disc; margin:0; padding:1em 0 0 0; width:16em; margin:0 auto; margin-top:0; overflow:hidden; }
.Basic .registered ul li{margin:0 0 0 1.5em; padding:0 0 0.5em 0; }
.Basic .registered .important-links{display:none; }
.Basic .links{display:block; width:100%; margin-top:2em; position:relative; overflow:hidden; }
.Basic .links h1{margin:0; padding:0; font-size:1.5em; text-align:center; }
.Basic .links ul{margin:0; padding:1em 0 0 0; float:left; text-align:center; width:100%; }
.Basic .links ul li{margin:0; padding:0 0 0.5em 0; }
.Basic .links ul li a{color:#ffffff; }
.Basic .links .close-important-links{display:none; position:absolute; top:0; right:0; color:#ffffff; font-size:1.5em; }
.page-top{display:none; position:fixed; bottom:0.5em; right:0.5em; background:rgba(35, 54, 125, 0.6); padding:1em; border-radius:10%; margin:0 auto; margin-top:2em; line-height:100%; font-size:0.6em; }
.page-top:hover{background:#4792dd; }
@media only screen and (min-width:48em){
.Basic{ }
.Basic h1{font-size:2.5em; text-align:left; }
.Basic .main{width:34%; float:left; padding:0 2% 0 0; text-align:left; }
.Basic .more{width:33%; float:left; padding:0 3% 0 0; text-align:left; }
.Basic .registered{width:28%; float:left; margin-top:-3.75em; }
.Basic .registered h1{font-size:1.8em; text-align:left; }
.Basic .registered ul{padding:2em 0 0 0; text-align:left; float:left; margin:0; }
.Basic .registered .important-links{display:block; float:left; font-size:1.25em; color:#ffffff; line-height:100%; text-align:center; padding:0.5em 1em 0.5em 1em; margin:3.5em 0 0 5em; border-style:solid; border-width:0.0625em; border-color:#ffffff; }
.Basic .registered .important-links:hover{text-decoration:none; background-color:#bb8cb7; }
.Basic .links{display:none; width:28%; float:left; margin-top:-3.75em; }
.Basic .links h1{font-size:1.8em; }
.Basic .links .close-important-links{display:block; }
}
@media only screen and (min-width:64em){
.Basic{ }
}
.Slogan{width:100%; height:100%; margin:0; box-sizing:border-box; overflow:hidden; position:relative; background-image:url(https://www.costbenefit.hr/container/images/r1/g2018/m06/grow.jpg); background-repeat:no-repeat; background-size:cover; background-position:-15em center; }
.Slogan div{position:absolute; bottom:1em; left:1em; right:1em; background:rgba(9, 53, 92, 0.95); max-width:80em; margin:0 auto; padding:0 2em 2em 2em; box-sizing:border-box; border-radius:0.5em; }
.Slogan div h1{font-size:1.7em; color:#ffffff; text-align:center; }
.Slogan div p{font-size:1em; color:#fffbf1; text-align:center; }
.Slogan strong{position:absolute; bottom:15.5em; right:0; left:0; margin:0 auto; width:100%; max-width:64em; text-align:center; color:#ffffff; padding:0; font-size:1.1em; font-weight:normal; }
.Slogan div .o-nama{text-align:center; display:block; margin:0 auto; margin-top:3em; width:7em; background-color:#8872bd; border-radius:0.5em; color:#ffffff; padding:0.5em 1em 0.7em 1em; font-size:1em; overflow:hidden; line-height:100%; }
.Slogan div .o-nama:hover{background:#584682; }
@media only screen and (min-width:30em){
.Slogan{background-position:center 0; }
}
@media only screen and (min-width:48em){
.Slogan{ }
.Slogan div h1{font-size:2.1em; }
.Slogan div p{font-size:1.4em; }
.Slogan div .o-nama{font-size:1.1em; }
}
@media only screen and (min-width:64em){
.Slogan{ }
.Slogan div h1{font-size:2.5em; }
.Slogan div p{font-size:1.8em; }
.Slogan strong{top:5em; bottom:initial; text-align:right; padding:0 0.5em 0 0; box-sizing:border-box; font-size:1.2em; font-weight:normal; }
.Slogan div .o-nama{font-size:1.2em; }
}
@media only screen and (min-width:90em){
.Slogan{ }
}
.About-us{width:100%; margin:0 auto; display:block; margin-top:2em; overflow:hidden; background-color:#155188; }
.About-us h1{text-align:center; color:#ffffff; font-size:1.75em; margin-top:1em; margin-bottom:1em; }
.About-us div.container{max-width:80em; margin:0 auto; color:#ffffff; padding:0 1em 1em 1em; }
.About-us div.container h2{text-align:center; margin:0 0 0.5em 0; font-size:1.3em; }
.About-us div.container .more{display:none; }
.About-us div.container .more hr{border-color:#7584a0; border-style:solid; border-width:0.0625em 0 0 0; }
.About-us div.container p{text-align:center; display:block; font-size:0.95em; line-height:140%; }
.About-us div.container p .double-arrow-click-wide img{background:#173d5f; padding:1em; border-radius:10%; display:block; margin:0 auto; margin-top:2em; line-height:100%; font-size:0.7em; }
.About-us div.container p .double-arrow-click-wide img:hover{background:#577d9f; }
.About-us div.container p .double-arrow-click-shrink img{background:#173d5f; padding:1em; border-radius:10%; display:block; margin:0 auto; margin-top:2em; line-height:100%; font-size:0.7em; }
.About-us div.container p .double-arrow-click-shrink img:hover{background:#577d9f; }
.About-us div.container .flower{font-size:2.75em; color:rgba(255,255,255,0.01); text-shadow:0 0 0 #ffffff; text-align:center; margin:0; }
@media only screen and (min-width:48em){
.About-us{ }
.About-us h1{font-size:2.1em; margin-top:1.5em; }
.About-us div.container h2{font-size:1.5em; margin:0 0 1.5em 0; }
.About-us div.container p{font-size:1.1em; }
.About-us div.container p .double-arrow-click-wide img{font-size:0.8em; }
.About-us div.container p .double-arrow-click-shrink img{font-size:0.8em; }
.About-us div.container .flower{margin:1; }
}
@media only screen and (min-width:64em){
.About-us{ }
}
.Contacts{width:100%; padding:0 0 3em 0; margin:0 auto; display:block; overflow:hidden; background-image:url(https://www.costbenefit.hr/container/images/r1/g2018/m06/graf.jpg); background-repeat:no-repeat; background-size:cover; background-position:center top; }
.Contacts div.container{background:rgba(0, 0, 0, 0.2); width:100%; max-width:90%; margin:0 auto; padding:0 1em 2em 1em; box-sizing:border-box; border-radius:0.325em; position:relative; margin-top:2em; overflow:hidden; }
.Contacts div.container h1{text-align:center; color:#ffffff; font-size:1.75em; margin-top:0.5em; margin-bottom:0; }
.Contacts div.container ul.info{color:#ffffff; width:20em; margin:0 auto; display:block; overflow:hidden; font-size:0.8em; }
.Contacts div.container ul.info li{clear:both; width:100%; padding:0 0 0.5em 0; float:left; }
.Contacts div.container ul.info li p{ }
.Contacts div.container ul.info li .left{float:left; margin:0 0.35em 0 0; padding:0; display:block; width:9em; }
.Contacts div.container ul.info li .right{float:left; margin:0; padding:0; display:block; }
.Contacts div.container ul.info li .right p{margin:0; padding:0 0 0.5em 0; }
.Contacts div.container ul.info li a{color:#fff59b; }
.Contacts div.container div.contact-form{width:100%; margin:0 auto; display:none; }
.Contacts div.container div.contact-form .intro{color:#ffffff; text-align:center; }
.Contacts div.container div.contact-form .close-contact-form{position:absolute; top:0.5em; right:0.5em; color:#ffffff; font-size:1.5em; }
.Contacts div.container div.contact-form .cSendMessageForm{width:16em; display:block; overflow:hidden; margin:0 auto; margin-top:2em; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message{overflow:hidden; display:block; list-style-type:none; margin:0; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li{width:100%; float:left; box-sizing:border-box; margin-top:0.5em; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li p{width:11em; text-align:left; color:#ffffff; padding:0.4em 1em 0.25em 0; margin:0; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li span{text-align:left; color:#ffffff; padding:0.4em 1em 0.25em 0; margin:0; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li input[type=checkbox]{width:1.5em; height:1.5em; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li input.text{width:100%; font-size:1em; padding:0.45em; box-sizing:border-box; border-style:solid; border-width:0.0625em; border-color:#d4d4d4; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li input.email{width:100%; font-size:1em; padding:0.45em; box-sizing:border-box; border-style:solid; border-width:0.0625em; border-color:#d4d4d4; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li textarea.ta{font-family:Arial; width:100%; height:10em; font-size:1em; padding:0.45em; box-sizing:border-box; border-style:solid; border-width:0.0625em; border-color:#d4d4d4; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li input.send-message-do{padding:0.5em 1em 0.5em 1em; margin:0 auto; display:block; }
@media only screen and (min-width:25em){
.Contacts{ }
.Contacts div.container ul.info{font-size:0.9em; }
.Contacts div.container div.contact-form .cSendMessageForm{width:20em; }
}
@media only screen and (min-width:48em){
.Contacts{ }
.Contacts div.container{max-width:40em; padding:0 1em 2em 1em; }
.Contacts div.container h1{font-size:2.1em; }
.Contacts div.container ul.info{width:40em; }
.Contacts div.container ul.info li p{font-size:1.2em; }
.Contacts div.container div.contact-form .cSendMessageForm{width:36em; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li p{float:left; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li input.text{width:19em; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li input.email{width:19em; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li textarea.ta{width:19em; }
.Contacts div.container div.contact-form .cSendMessageForm .send-message li input.send-message-do{margin:0 0 0 14.75em; }
}
@media only screen and (min-width:64em){
.Contacts{ }
}
.MadeBy{margin-top:1em; overflow:hidden; display:block; float:right; width:100%; box-sizing:border-box; position:relative; background:#232323; border-radius:0.325em 0.325em 0 0; }
.MadeBy p{color:#e9e9e9; font-size:0.8em; float:left; width:100%; box-sizing:border-box; text-align:right; padding:0.75em 7em 0.75em 0; margin:0; }
.MadeBy img{position:absolute; top:0.25em; right:1em; }
@media only screen and (min-width:48em){
.MadeBy{ }
}
@media only screen and (min-width:90em){
.MadeBy{text-align:center; padding:0.25em 0.5em 0.125em 0.5em; clear:both; float:none; width:16em; margin:0 auto; margin-top:3em; }
.MadeBy p{display:inline; width:auto; padding:0 0 0 0.75em; line-height:2.4em; text-align:center; }
.MadeBy img{display:inline; position:relative; top:initial; right:initial; margin-left:12%; float:left; }
}
.Esif{width:100%; background-color: #155188; padding: 0 1em 1em 1em; box-sizing: border-box; }
.Esif img{width: 100%;max-width: 35em; margin: 0 auto; padding: 1em 0 0 0; display: block; box-sizing: border-box; }
.Map{overflow:hidden; height:24em; width:100%; }
.Map #gmap_canvas{height:24em; width:100%; }
.Map #gmap_canvas img{max-width:none!important;background:none!important }
@keyframes resizescreendowncircle{0%,100%{transform:scale(1); } 50%{transform:scale(1.1); }}