* { font-family: 'Roboto', 'Arial', sans-serif; margin: 0; padding: 0; outline: none; }
html, body { overflow: hidden; height: 100%; }
a img { border: none; } #slider { width: 100vw; height: 100vh; background: #000 url(//box.imago.hr/wp-content/themes/imagobox-v2/images/loading.gif) no-repeat 50% 50%; position: fixed; top: 0; left: 0; }
#slider .slick-slide { display: block; width: 100vw; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center center; cursor: pointer; } .arrow { position: fixed; cursor: pointer; opacity: 0.5; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
.arrow:hover { opacity: 1; }
.arrow.left { left: 50px; top: calc(50vh - 18px); }
.arrow.right { right: 50px; top: calc(50vh - 18px); } #logo { position: fixed; bottom: 0; left: 0; background: url(//box.imago.hr/wp-content/themes/imagobox-v2/images/logo.png) no-repeat center center; width: 228px; height: 64px; display: block; text-indent: -999999px; opacity: 0.5; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
#logo:hover { opacity: 1; }
.thumbs-outter-wrapper { width: 100vw; height: 64px; position: absolute; bottom: 0; left: 0; }
.thumbs-outter-wrapper:hover #thumbs { bottom: 0; }
#thumbs { position: absolute; bottom: -64px; left: 0; height: 64px; width: 100vw; overflow: hidden; background: #000; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
#thumbs .wrapper { position: absolute; top: 0; left: 328px; width: calc(100vw - 328px); height: 64px; overflow: hidden; }
#thumbs .wrapper > div { white-space: nowrap; height: 64px; transform: translateX(0); }
#thumbs a { width: 100px; height: 64px; display: inline-block; position: relative; margin-right: -4px; }
#thumbs a span,
#nav-up span { vertical-align: middle; text-align: center; color: #999; line-height: 66px; position: absolute; top: 0; left: 0; width: 100px; height: 61px; }
#thumbs a.active span { border-bottom: 3px solid #333; }
#thumbs a:hover span { border-bottom: 3px solid #000; }
#nav-up { position: absolute; bottom: 0; left: 228px; text-decoration: none; background: #fff; width: 100px; height: 64px; font-size: 12px; line-height: 66px; }
#nav-up span { box-shadow: inset 0 0 40px #444; height: 64px; }
#nav-up:hover span { color: #666; box-shadow: inset 0 0 40px #222; } #topcontent { background: #fff; top: -100vh; width: 100vw; height: 100vh; overflow: hidden; position: absolute; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
#topcontent.active { top: 0vh; }
#topcontent .container { padding: 60px 0 64px 0; width: 980px; margin: 0 auto; max-height: calc(100vh - 144px); overflow: auto; color: #333; }
#topcontent .column { width: 280px; margin: 0 20px; float: left; }
#topcontent .two-column { width: 580px; margin: 0 20px; float: left; }
#topcontent h1 { font-size: 28px; line-height: 28px; margin-bottom: 20px; }
#topcontent h2 { font-size: 18px; line-height: 18px; margin-bottom: 20px; }
#topcontent h3 { font-size: 14px; line-height: 18px; margin-bottom: 10px; }
#topcontent p, #topcontent li { font-size: 12px; line-height: 18px; margin-bottom: 20px; color: #666; }
#topcontent a { color: #666; text-decoration: none; border-bottom: 1px dotted #999; }
#topcontent a:hover { color: #000; border-bottom: 1px dotted #ccc; }
.wpml-ls-legacy-list-horizontal a { padding: 0 !important; }
.wpml-ls-legacy-list-horizontal li { padding: 0 10px 0 0 !important; }
.wpml-ls-legacy-list-horizontal { padding: 0 !important; }
#searchform { margin-bottom: 20px; }
#searchinput { border: none; border-bottom: 1px dotted #666; }
#searchsubmit { padding: 2px 10px; border: none; background: #fff; color: #666; }
.text-footer { position: absolute; bottom: 0; left: 0; width: 100%; background: #000; height: 64px; }
.text-footer p { color: #666; text-align: left; margin: 13px 20px 13px 350px !important; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
.text-footer a:hover { color: #fff !important; }
#close-text { position: absolute; bottom: 10px; left: 240px; cursor: pointer; } @media only screen and (max-width: 640px) {
#logo { background-size: 97px 15px; width: 110px; }
#nav-up, .fscontent div.up { left: 110px; }
#thumbs .wrapper { left: 210px; }
#topcontent .container { width: calc(100vw - 40px); padding-top: 20px; }
#topcontent .column { width: calc(100vw - 40px); float: none; margin: 0; }
#topcontent .two-column { width: calc(100vw - 40px); float: none; margin: 0; }
#topcontent h1 { font-size: 16px; line-height: 16px; margin-bottom: 10px; }
#topcontent h2 { font-size: 14px; line-height: 14px; margin-bottom: 10px; }
#topcontent h3 { font-size: 12px; line-height: 12px; margin-bottom: 8px; }
#topcontent p,
.wpml-ls-legacy-list-horizontal a { font-size: 10px; line-height: 12px; margin-bottom: 10px; }
#searchform * { font-size: 10px; }
.text-footer p { display: none; }
#thumbs .wrapper { left: 210px; width: calc(100vw - 210px); }
.arrow.left { left: 20px; }
.arrow.right { right: 20px; }
}