@font-face { font-family: 'WebSymbols'; src: url(//www.projektil.hr/wp-content/themes/wprojektil/fonts/fontawesome-webfont.eot); src: url(//www.projektil.hr/wp-content/themes/wprojektil/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'), url(//www.projektil.hr/wp-content/themes/wprojektil/fonts/fontawesome-webfont.woff) format('woff'), url(//www.projektil.hr/wp-content/themes/wprojektil/fonts/fontawesome-webfont.ttf) format('truetype'), url(//www.projektil.hr/wp-content/themes/wprojektil/fonts/fontawesome-webfont.svg#WebSymbols) format('svg'); font-weight: normal; font-style: normal; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: none; font-weight: inherit; font-style: inherit; font-size: 100%; vertical-align: baseline; text-decoration: none; list-style-type: none; }
body { background: #fff; overflow: hidden; }
*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ws, .ws * { font-family: 'WebSymbols' !important; font-weight: normal !important; }
html[data-useragent*='MSIE 10.0'] nav li a span::after { display: none !important; }
.tf_bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 16; }
.tf_bg img { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; display: none; }
.tf_content { position: absolute; bottom: 80px; left: 25px; z-index: 20; }
.tf_content a { position: relative; display: inline-block; color: #fff; font: 900 36px 'Open Sans Condensed', sans-serif; text-transform: uppercase; overflow: hidden; }
.tf_content a span { display: block; padding: 3px 12px; background: black; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
.tf_content a::before { position: absolute; top: 0; left: 0; z-index: -1; padding: 3px 12px; width: 100%; height: 100%; background: #fff; color: black; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%); }
.tf_content a:hover span,
.tf_content a:focus span { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); }
.tf_content a:hover::before,
.tf_content a:focus::before { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); }
.tf_loading{ position:fixed; top:50%; left:50%; margin:-30px 0 0 -30px; width:60px; height:60px; background: #fff url(//www.projektil.hr/wp-content/themes/wprojektil/images/loader.gif) no-repeat center center; z-index:999; opacity:0.7; }
.tf_zoom,
.tf_fullscreen{ width: 20px; height: 20px; position: absolute; top: 6px; right: 6px; cursor: pointer; z-index: 100; opacity: 0.6; background: url(//www.projektil.hr/wp-content/themes/wprojektil/images/icons.png) no-repeat top left; }
.tf_zoom{ background-position: 0px -20px; }
.tf_fullscreen{ background-position: 0px 0; }
.tf_zoom:hover,
.tf_fullscreen:hover{ opacity: 0.9; }
#tf_prev, #tf_next { display: inline-block !important; }
nav { left: 0; position: fixed; bottom: 25px; z-index: 200; width: 100%; }
nav ul { position: relative; padding: 0 25px; }
nav li { font: 900 20px 'Open Sans Condensed', sans-serif; text-transform: uppercase; margin: 0 5px 0 0; display: inline-block; } nav li a {
display: inline-block;
line-height: 44px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
nav li a span {
display: block;
text-align: center;
position: relative;
padding: 0 14px;
background: black;
color: white;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
nav li a:hover span {
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
nav li a span::after {
content: attr(data-hover);
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
color: black;
background: white;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 0px, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 0px, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 0px, 0px ) rotateX( -90deg );
transform: translate3d( 0px, 0px, 0px ) rotateX( -90deg );
}
#navmobile, .left-ar, .right-ar { display: none; }
#social { position: relative; }
#social #socbtns { position: absolute; display: none; top: -53px; left: 0; height: 53px; }
#social #socbtns a { float: left; }
#social #socbtns a:last-of-type { margin-left: 26px }
nav li a.current_page_item span { background: white; color: black; }
.nav-right { float: right; }
.logo { position: absolute; z-index: 1000; top: 20px; left: 20px; }
.logo a { display: block; position: relative; background: url(//www.projektil.hr/wp-content/themes/wprojektil/images/projektil-logo-black.png) no-repeat; height: 48px; width: 246px; overflow: hidden; text-indent: -999999px; float: left; }
.logo a.home { width: 71px; height: 71px; }
.logo a.make-projects-not-war { background-image: url(//www.projektil.hr/wp-content/themes/wprojektil/images/make-projects-not-war-logo.png); }
.logo a.all-you-need-is-project { background-image: url(//www.projektil.hr/wp-content/themes/wprojektil/images/all-you-need-is-project-logo.png); }
.logo a.give-project-a-chance { background: url(//www.projektil.hr/wp-content/themes/wprojektil/images/give-project-a-chance-logo.png); }
.logo a.logo-two { background: url(//www.projektil.hr/wp-content/themes/wprojektil/images/projektil-logo-two.png); }
.logo a.home:hover { -webkit-animation: all 2.2s linear infinite; -moz-animation: all 2.2s linear infinite; -o-animation: all 2.2s linear infinite; }
@-webkit-keyframes all {
0%   {-webkit-transform: rotateY(0deg);}
100%    {-webkit-transform: rotateY(720deg);}
}
@-moz-keyframes all {
0%   {-moz-transform: rotateY(0deg);}
100%    {-moz-transform: rotateY(720deg);}
}
@-o-keyframes all {
0%   {-o-transform: rotateY(0deg);}
100%    {-o-transform: rotateY(720deg);}
}
.slogan { position: absolute; top: 35px; right: 20px; float: left; width: 292px; background: url(//www.projektil.hr/wp-content/themes/wprojektil/images/give-project-a-chance.png) no-repeat 100% 50%; height: 20px; overflow: hidden; text-indent: -999999px; }
.slogan.make-projects-not-war:not(a) { background-image: url(//www.projektil.hr/wp-content/themes/wprojektil/images/make-projects-not-war.png); }
.slogan.all-you-need-is-project:not(a) { background-image: url(//www.projektil.hr/wp-content/themes/wprojektil/images/all-you-need-is-project.png); }
a.make-projects-not-war span { color: #da0087; }
a.all-you-need-is-project span { color: #61f000; }
a.give-project-a-chance span { color: #00affe; }
#text.make-projects-not-war a { color: #da0087; }
#text.all-you-need-is-project a { color: #61f000; }
#text.give-project-a-chance a { color: #00affe; } html, #c-carousel { height: 100%; }
#c-carousel { min-height: 550px; z-index: 50; }
#c-carousel * { font-size: 14px; color: white; line-height: 22px; }
#wrapper { width: 100%; height: 500px; margin: -250px 0 0 0; position: absolute; left: 0; top: 50%; overflow: hidden; background: #000; }
#text { overflow: auto; font-family: 'Open Sans', sans-serif; background: black; width: 411px; height: 500px; padding: 35px 35px 0 35px; position: absolute; top: 0; left: 0; z-index: 2; }
#text h1 { font-family: 'Open Sans Condensed', sans-serif; font-weight: 900; font-size: 26px; line-height: 26px; margin: 0 0 15px 0; text-transform: uppercase; }
#text p, #text p *:not(br) { font-weight: 400; font-size: 13px; margin: 10px 0; }
#text p strong, #text li strong {font-weight: 900;}
#text ul li {list-style-type: square; margin-left: 30px;}
#wrapper .center { width: 100% !important; text-align: center; }
#navi { position: absolute; top: 0; left: 290px; }
#navi a { background: black; font-family: 'WebSymbols' !important; text-align: center; text-decoration: none; line-height: 30px; display: block; width: 30px; height: 30px; margin-right: 1px; float: left; }
#navi a:hover { background: white; color: black; }
#carousel { height: 500px; overflow: hidden; padding: 0 0 0 410px; z-index: 1; }
#d-carousel > div { height: 500px; float: left; } .projekti-list a { position:relative; display: block; width: 320px; height: 500px; float: left; border-right: 1px dashed #fff; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; background: url(//www.projektil.hr/wp-content/themes/wprojektil/images/plist-bg.png) no-repeat 0 0; }
.projekti-list a span.title { position: absolute; top: 200px; z-index: 200; padding: 20px; display: block; font: 900 24px/26px 'Open Sans Condensed', sans-serif !important; text-transform: uppercase; }
.projekti-list a span.datum { display: block; font: 14px/18px 'Open Sans', sans-serif; }
.projekti-list a img { position: absolute; clip: rect(0px 280px 180px 0px); width: 280px; margin: 20px 20px 0 20px; }
.projekti-list a:hover { background-position: 0 -500px; }
.projekti-list a:hover span { color: #000 !important; } .clients { width: 314px; height: 500px; float: left; background: #000; }
.client { margin: 11px 5px 0 5px; height: 152px; padding: 30px 86px; background: #fff; display: block; }
.client img { font-size: 0 !important; line-height: 0 !important; }
iframe { width: 889px; height: 500px; }
.view { float: left; overflow: hidden; position: relative; text-align: center; cursor: default; }
.view .mask,.view .content { margin: 0px 5px 0 0px; width: 320px; height: 500px; position: absolute; overflow: hidden; top: 0; left: 0; }
.view img { display: block; position: relative; }
.view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; }
.view p { font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; }
.tooltip { display: inline; position: relative; }
.tooltip:hover:after { width: 87px; left: 0px; bottom: 44px; background: rgba(0,0,0,1); text-align: center; color: white; font: 12px 'Open Sans', sans-serif; content: attr(title); padding: 5px 15px; position: absolute; z-index: 98; }
.tooltip:hover:before { position: absolute; bottom: 38px; left: 50%; border-style: solid; border-color: #000 transparent; border-width: 6px 6px 0 6px; content: ""; z-index: 99; }
.tooltip.ttp-a-a:hover:after  { width: 99px; }
.tooltip.ttp-a:hover:after  { left: -52px; }
.tooltip.ttp-b:hover:after { left: -46px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,1); }
::-webkit-scrollbar-thumb:window-inactive {	background: rgba(255,255,255,0.4); }
.clear:before, .clear:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clear:after {
clear: both;
}
@media only screen and (device-width: 768px),only screen and (max-width: 1024px) {
#text { height: 500px; }
#carousel { height: 500px; }
#wrapper { height: 500px }
}
#navmobile {
width: 60em; position: absolute;
top: 25%;
left: 50%;
margin-left: -30em; }
#navmobile > a {
display: none;
}
#navmobile li {
position: relative;
text-align: center;
}
#navmobile li a {
color: #fff;
display: block;
font-size: 1em;
line-height: 1.5em;
}
#navmobile li a:active {
background-color: #666 !important;
}
#navmobile li a:hover
{
color: #666;
}
#navmobile span:after {
width: 0;
height: 0;
border: 0.313em solid transparent; border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; } #navmobile > ul {
height: 3.75em; background-color: black;
}
#navmobile > ul > li {
width: 25%;
height: 100%;
float: left;
}
#navmobile > ul > li > a {
height: 100%;
text-align: center;
}
#navmobile > ul > li:not( :last-child ) > a {
border-right: 1px solid black;
}
#navmobile > ul > li:hover > a,
#navmobile > ul:not( :hover ) > li.active > a {
background-color: black;
}
@media only screen and ( max-width: 64em ) {
nav ul { padding: 0 0 0 5px; }
iframe { width: 600px; }
}
@media only screen and ( max-width: 62.5em ) {
body { overflow: auto; background: black; }
.tf_content { bottom: 25px; }
.tf_content a { font-size: 1.3em; }
.logo { top: 25px; right: 21px; left: inherit; position: fixed; z-index: 120; }
.logo a { background: url(//www.projektil.hr/wp-content/themes/wprojektil/images/projektil-logo-black-mobile.png) no-repeat; width: 180px;height: 35px; }
#text { width: 100% !important; }
.projekti-list a span.title { width: 100%; color: black !important; z-index: 90; }
.projekti-list a { background: white; border-right: none; width: 100%; }
.projekti-list a span.datum { color: black !important; }
#c-carousel { min-height: inherit; height: auto; padding: 25px; margin-top: 115px; }
#wrapper, #text { height: auto; margin: 0; position: inherit; overflow: auto; padding: 0; left: auto; top: auto; }
#carousel { height: auto; overflow: auto; padding: 0; }
.slogan { display: none; }
nav { padding: 25px; top: 0; bottom: inherit; }
nav ul { padding: 0; }
.caroufredsel_wrapper { width: 100%!important; height: auto!important; }
.caroufredsel_wrapper #d-carousel { position: static!important; width: 100%!important; height: auto!important; }
.caroufredsel_wrapper #d-carousel > div { height: auto!important; }
.caroufredsel_wrapper .projekti-list { position: static!important; width: 100%!important; }
.caroufredsel_wrapper .projekti-list a { height: auto!important; }
.caroufredsel_wrapper .projekti-list a img { position: static!important; width: 100%!important; margin: 0px!important; }
.caroufredsel_wrapper .projekti-list a span.title { padding: 10px 20px 20px 20px!important; width: 100%!important; position: static!important; }
#carousel .left-ar,
#carousel .right-ar,
#c-carousel .left-ar,
#c-carousel .right-ar { display: none!important; }
.caroufredsel_wrapper .clients { width: 33.333333333334%!important; height: auto!important; }
.caroufredsel_wrapper .clients .client { margin: 10px 0px!important; height: auto!important; text-align: center!important; width: 100%!important; float: left!important; padding: 0px!important; }
iframe { width: 100%!important; height: auto!important; }
.homearrow { top: 90px; z-index: 99; }
.homearrow ul li { display: none; }
.homearrow ul .nav-right { display: inline-block; float: left; }
.pagearrow { display: none; }
#navmobile
{
display: block;
width: 100%;
position: relative;
margin: 0;
top: auto;
left: auto;
z-index: 150;
}
.navmb #navmobile > a { width: 2.125em; height: 2.125em; }
#navmobile > a {
width: 3.875em; height: 3.875em; text-align: left;
text-indent: -9999px;
background-color: black;
position: relative;
z-index: 150;
}
#navmobile > a:before,
#navmobile > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#navmobile > a:after {
top: 60%;
}
#navmobile:not( :target ) > a:first-of-type,
#navmobile:target > a:last-of-type {
display: block;
} #navmobile > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#navmobile:target > ul {
display: block;
}
#navmobile > ul > li {
width: 100%;
float: none;
}
#navmobile > ul > li > a {
height: auto;
text-align: left;
padding: 2px 0.833em; }
#navmobile > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 1px solid white;
}
nav.navmb { background: white; z-index: 100; }
.clients { background: white; }
.client { padding: 30px 66px; }
}
@media only screen and ( max-width: 40em ) {
.caroufredsel_wrapper .clients { width: 100%!important; height: auto!important; }
.caroufredsel_wrapper .clients .client { height: auto!important; text-align: center!important; width: 100%!important; float: left!important; padding: 0px!important; }
#carousel, #c-carousel { position: relative; }
#carousel .left-ar, #c-carousel .left-ar {
display: block;
color: white;
font-size: 20px;
z-index: 2000;
position: absolute;
top: 30px;
left: 0;
font-family: 'WebSymbols' !important;
font-weight: normal !important;
padding: 50px 50px 50px 5px;
}
#carousel .right-ar, #c-carousel .right-ar {
display: block;
color: white;
font-size: 20px;
z-index: 2000;
position: absolute;
top: 30px;
right: 0;
font-family: 'WebSymbols' !important;
font-weight: normal !important;
padding: 50px 5px 50px 50px;
}
#c-carousel .left-ar, #c-carousel .right-ar  { top: 55px; }
.caroufredsel_wrapper { height: 300px; }
.navmb { padding: 15px 25px; }
.logo.navmb { top: 0; }
#c-carousel { margin-top: 62px; }
}
@media only screen and ( max-width: 30em ) {
.client { padding: 30px 136px; }
.inside-img { width: 430px; height: auto; }
}
@media only screen and ( max-width: 20em ) {
.client { padding: 30px 66px; }
.inside-img { width: 270px; height: auto; }
}
@media only screen
and (min-device-width : 20em)
and (max-device-width : 35.5em)
and (orientation : portrait) {
#carousel .left-ar, #carousel .right-ar  { top: 30px; }
}