@font-face {
 font-family: 'motpic'; 
/* Gewünschter Name */

 src: url('MotionPicture.eot');
           
/* für IE9 */

      url('MotionPicture.woff') 
           format('woff'), 
          
      url('MotionPicture.woff2') 
           format('woff2'), 
          
/* für moderne Browser */

      url('MotionPicture.ttf') 
           format('truetype');
         
/* für Safari, Android, iOS */

}

@font-face { font-family: 'MotionPicture';
             src: url('/css/MotionPicture.woff2')  format('woff2'),
                  url('/css/MotionPicture.woff')  format('woff'); }


html {
    font: normal 13px/1.4 "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow-y: scroll;
    color: #000;
}
html,
body {
    height: 100%;
    min-height: 100%;
}
body { margin: 0; }
a { background-color: transparent; }
a:active,
a:hover { outline: 0; }
a {
    color: #00887c;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: #175152;
    text-decoration: underline;
}
img {
    box-sizing: border-box;
    border: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}
img.logoprva {height:80px}

.top {background: #175152 linear-gradient(174deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 15%, rgba(255,255,255,0.2) 70%, rgba(0,0,0,0) 100%);}

.menubar {background: url('../kipi/menubalken.png?a=2') no-repeat left center;padding-left:21px}

.headerbox, .sujetbox, .main, .sujetboxprva {width: 900px;margin:0 auto;clear: both;overflow: hidden}
.top {width: 100%;color:#fff}

.headerbox {height:40px;overflow: visible}
.headerbox .logo {float: left;background: #fff;height:60px;margin-left: 10px;overflow: visible}
.headerbox .logo img {height:55px;margin-top:5px}
.headerbox .telefon {float: right;font-size: 17px;margin:18px 5px 0 0}
.telefon span {vertical-align: sub;padding-left:7px}
.logo h5 {float:right;line-height: 85px;margin-left: 10px; font-weight: normal}
.logo h5 span {font-weight: bold}
.sujetbox, .sujetboxprva {margin-top:-30px;position: relative;height: 370px}
.sujetbox .menubar {position:absolute;right:0;top:30px}
.sujetbox .naslov {position:absolute;bottom:0;left:30px}
.sujetbox .naslov img {opacity: 0.8}
.sujetbox .naslov h1 {font-family: "MotionPicture", sans-serif;font-size:200px;line-height:140px;opacity: 0.85;color:#fafaf3;text-shadow: 1px 1px #bbb;padding-right: 20px}
.sujetbox .naslov h1 span {letter-spacing: -0.1em;}
.sujetboxprva {height:440px}
.sujetboxprva .naslov {position:absolute;top:5px;left:20px}

.sujet {}
.sujet img {position: relative;z-index: -1;display: block}
img.border {margin-top:0;border:1px none #fff;border-top:none;-webkit-box-shadow: 0px -3px 16px -1px rgba(122,122,122,0.64); 
box-shadow: 0px -3px 16px -1px rgba(122,122,122,0.64);}

.borderbox1 {border: 4px solid #175152;border-left: none;border-right: none;background-color: #175152}
.borderbox2 {border:1px solid #fff;border-left: none;border-right: none;padding:3px 0}


.topbox {width:880px;margin:3px auto;color:#fff;padding:20px;text-align: center;font-size: 20px}
.topbox .divide {height:45px;width:100%;background:url("/kipi/trenner-bijelo.png") no-repeat center;padding:10px 0}
.topbox .intro {color:#fff;font-size:17px}
.topbox .intro h1 {font-family: "MotionPicture", sans-serif;font-size:60px;line-height: 57px}
.topbox .intro span {color:#ffe48a;font-weight: bold}

.divide .livo {float:left;width:45%;text-align: left}
.divide .desno {float: right;width: 45%;text-align: right}

.divide .livo, .divide .desno {font-weight: normal;font-style: italic;font-size: 18px;opacity: 0.8;font-family: "Lucida Sans",sans-serif}

.prva .topbox {padding:20px 0 20px}
.prva .topbox .intro {margin-bottom: 20px}

.footerinfo, .footer {text-align: center}
.footer {background-color: #eee;width:100%;clear:both;padding:15px 0 30px 0}
.footerinfo p {margin:15px 0 5px 0}
.footer ul, ul.menu  {list-style-type: none;display: flex;justify-content: center;margin:0;padding:0}
ul.menu {color:#FFe48a;margin:0 15px}

.footer ul li, ul.menu li {float: left;padding:0 10px;border-left: 1px solid #175152}
.footer ul li:first-child {border:none}

.footerinfo p.webmaster {font-size:10px;color:#999;border-top:2px double #fff;width:900px;margin:15px auto;padding-top:15px}

.page-container {
    position: relative;
    display: table;
    width: 100%;
    table-layout: fixed;
}

.main {padding-top:40px}

div.prvabox {float:left;width:300px;text-align: center;justify-content: center;margin-bottom: 30px}

.red {clear:both;position: relative;margin-bottom: 30px;overflow: auto;padding:0 25px}


.imgbox, .imgboxre {height:270px;overflow: hidden;border:3px double #ccc}
.imgbox, .naslovbox {float:left;}
.imgboxre, .naslovboxre {float:right}

div.prvabox .imgbox {height: 250px;width:270px;margin:0 15px;position: relative}
div.prvabox .overlay {position: absolute;bottom: 0;left:5px}
div.prvabox .overlay img {height:65px}
div.prvabox p {clear:both;width:250px;margin:20px auto;padding-top:20px}

.textbox, .textboxre {top:40px;padding:20px 30px;height:190px;width:500px;position:absolute;-webkit-box-shadow: 5px 5px 18px 0px rgba(17,17,17,0.34); 
box-shadow: 5px 5px 18px 0px rgba(17,17,17,0.34);color:#fff;line-height: 22px;display: flex;align-items: center;opacity: 0.95}

.textbox, .textboxbig {left:375px;background-color:#7C999A}
.textboxre {right:375px;background-color:#175152}

.textbox p a {color:#175152;font-weight: bold}
.textboxre p a {color:#FFe48a;font-weight: bold}

.textboxbig {top:40px;padding:20px 30px;width:500px;position:absolute;-webkit-box-shadow: 5px 5px 18px 0px rgba(17,17,17,0.34); 
box-shadow: 5px 5px 18px 0px rgba(17,17,17,0.34);color:#fff;line-height: 22px;display:flex;overflow: visible;opacity: 0.9;float:left}

.naslovbox, .naslovboxre {background: url("/kipi/mainbox_bgnd.png") no-repeat center center;width:390px;height:270px;border:3px double #175152;text-align: center;display: flex;align-items: center;justify-content: center}
.naslovbox h3, .naslovboxre h3 {clear: both}


.naslovbox h3, .naslovboxre h3 {font-size: 22px;color:#175152;font-weight:bold}
.naslovbox h4, .naslovboxre h4 {font-size:12px;color:#175152;font-style: italic;font-weight: normal}


.gallery img {width: 200px;border:1px solid #175152;margin-left:20px;margin-bottom:20px}


.centerbox {margin:0 auto;width:800px}

div.red2 {border-bottom: 2px double #175152;padding-bottom:9px}
input.siroko {width:300px}
input.broj {width:80px}

.page-header-wrapper,
.page-content-wrapper,
.page-footer-wrapper {
    box-sizing: border-box;
    display: table-row;
}
.page-content-wrapper { height: 100%; }
.page-header {
    padding: 0 10px;
    min-height: 50px;
    border-bottom: 1px solid #1c2229;
    background: #222a32;
}
.page-header:before,
.page-header:after {
    display: table;
    content: "";
}
.page-header:after { clear: both; }
.page-content {
    margin: auto;
    padding: 20px 10px;
    max-width: 960px;
}
.page-footer {
    padding: 5px 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid #38444f;
    background: #222a32;
    font-size: 12px;
    line-height: 24px;
}
.page-footer a,
.page-footer a:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
}
.page-footer .separator {
    width: 1px;
    display: inline-block;
    height: 12px;
    vertical-align: -2px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.6);
}
.product-logo { float: left; }
.product-logo img { height: 50px; }
.company-logo {
    float: right;
    margin-top: 9px;
}
.company-logo img { height: 31px; }
.page-info-wrapper { margin-bottom: 15px; }
.page-info {
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #ccc;
    background: #f2f2f2;
}
.page-info-heading {
    margin: 0 0 15px;
    font-size: 20px;
    line-height: 24px;
}
.page-info p,
.page-info ul { margin: 15px 0; }
.page-info ul { padding-left: 20px; }
.product-info-wrapper p {
    margin: 0 0 15px;
    padding: 0;
}
.product-info-wrapper { margin: 0 -10px; }
.product-info-wrapper:before,
.product-info-wrapper:after {
    display: table;
    content: "";
}
.product-info-wrapper:after { clear: both; }
.product-info-wrapper .col {
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 0 10px;
}

.product-info-wrapper ul.links {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #ddd;
    text-align: center;
}
.links > li {
    display: inline-block;
    float: left;
    vertical-align: top;
    width: 50%;
    margin-top: 15px;
}
.links > li > a {
    display: inline-block;
    margin: 0;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
}
.links > li > a:before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 5px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
}
.blog:before { background-image: url(../img/blog.png); }
.forum:before { background-image: url(../img/forum.png); }
.knowledge-base:before { background-image: url(../img/knowledge-base.png); }
.facebook:before { background-image: url(../img/facebook.png); }
.twitter:before { background-image: url(../img/twitter.png); }
.google-plus:before { background-image: url(../img/google-plus.png); }

.fastcgi:before { background-image: url(../img/fastcgi.png); }
.python:before { background-image: url(../img/python.png); }
.php:before { background-image: url(../img/php.png); }
.perl:before { background-image: url(../img/perl.png); }
.ssi:before { background-image: url(../img/ssi.png); }

.product-info {
    border: 1px solid #bebebe;
    background: #fafafa;
}
.product-info-heading {
    margin: -1px;
    padding: 5px 11px;
    font-size: 16px;
    color: #fff;
    background: #09729f;
}
.product-info-content { padding: 10px; }

@media (max-width: 767px) {
    .page-header-wrapper { height: auto !important; }
}
@media (min-width: 480px) {
    .links > li { width: 33.33%; }
}
@media (min-width: 768px) {
    .page-header-wrapper { height: 51px; }
    .page-header {
        box-sizing: border-box;
        position: fixed;
        z-index: 300;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        min-height: 51px;
    }
    .page-header,
    .page-content,
    .page-footer {
        padding-right: 20px;
        padding-left: 20px;
    }
    .page-info {
        box-sizing: border-box;
        min-height: 240px;
        padding: 20px 40px 20px 313px;
        border: 1px solid #ccc;
        background: #f2f2f2 url(../img/globe.png) no-repeat;
        background-size: 273px 240px;
    }
    .links > li { width: 33.33%; }
    .product-info-wrapper .col {
        width: 50%;
    }
}

.pathbar {
    display: inline-block;
    width: 100%;
    font-size: 12px;
}
.pathbar a {
    color: #2c2c2c;
    text-decoration: none;
    position: relative;
    float: left;
    margin-right: 3px;
    padding: 0 5px 0 15px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #ebebeb;
}
.pathbar a:before {
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
    content: "";
}
.pathbar a:after {
    position: absolute;
    top: 0;
    right: -10px;
    z-index: 1;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ebebeb;
    content: "";
}
.pathbar a:hover { background: #2298cb; color: #fff; }
.pathbar a:hover:after { border-left-color: #2298cb; }
.pathbar a:first-child { padding-left: 10px; }
.pathbar a:first-child:before { display: none; }
.test h1 {
    margin: 0 0 12px;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    color: #444;
}
.test h2 {
    margin: 0 0 5px;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #444;
}
.test p { margin: 12px 0; }
iframe { border: 1px solid #bebebe; }


#calbox {width:inherit}