@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Source+Sans+Pro:400,700&subset=latin-ext');

/*
font-family: 'Roboto', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
*/

body {
    font-family: 'Roboto', sans-serif;
    color: #1d1d1d;
    letter-spacing: 1px;
}
.nav-pills {
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    cursor: pointer;
}

.navbar-default {
    background-color: #000000;
    padding: 10px 0;
    margin: 0;
    border: 0;
    z-index: 10;
    border-radius: 0;
}

.navbar-default .navbar-nav > li > a {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    padding-left: 30px;
    margin-top: 7px;
}

.navbar-brand {
    height: auto;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    color: #ffffff;
    background-color: transparent;
}

.jumbotron span {
    display: table;
    color: #ffffff;
    background: #000000;
    margin-bottom: 10px;
    padding: 0px 15px;
    font-size: 60px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Source Sans Pro', sans-serif;

}

.jumbotron a {
    display: inline-block;
    padding: 10px 50px;
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    text-transform: uppercase;
    border: 3px solid;
    margin-right: 20px;
    margin-top: 7%;
}

.jumbotron a:hover {
    border-color: #ff7f1a;
}

.jumbotron a:hover {
    text-decoration: none;
}

.jumbotron {
   /*  background: url(../img/header.jpg) center top / cover no-repeat; */
   background-color: #fff;

}

a.imam:after, a.zelim:after {
    content: url(../img/arrow.png);
    margin-left: 5px;
}

section {
    padding: 40px 0;
}

h2.naslov {
    text-align: center;
    background: #000000;
    color: #ffffff;
    display: table;
    padding: 10px 15px;
    margin: 0 auto;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 41px;
    font-family: 'Source Sans Pro', sans-serif;
}

#kontakt h2.naslov {
    margin: 0;
}

#kontakt a {
    color: #1d1d1d;
}

#kontakt a:hover {
    text-decoration: none;
}

h4.podnaslov {
    text-align: center;
    font-size: 25px;
    color: #878787;
    display: block;
    margin: 20px auto 40px auto;
}

#mobilni h3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    color: #ff7f1a;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}

#mobilni p {
    font-size: 19px;
}

#mobilni p a {
    color: #1d1d1d;
    text-decoration: underline;
}

.koraci p {
    text-align: center;
}

section#benefiti {
    padding-top: 0;
    margin-top: 50px;
}

#benefiti img {
    float: left;
    margin-right: 20px;
}

#benefiti h3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 25px;
    color: #ff7f1a;
    text-transform: uppercase;
}

#benefiti p {
    font-size: 19px;
}

.benefit {
    position: relative;
    padding-left: 90px;
    margin-bottom: 40px;
}

.benefit:before {
    margin-left: -90px;
}

.benefit.prvi:before {
    content: url('../img/benefit1.png');
    position: absolute;
}

.benefit.drugi:before {
    content: url('../img/benefit2.png');
    position: absolute;
}

.benefit.treci:before {
    content: url('../img/benefit3.png');
    position: absolute;
}

.benefit.cetvrti:before {
    content: url('../img/benefit4.png');
    position: absolute;
}

.benefit.peti:before {
    content: url('../img/benefit5.png');
    position: absolute;
}

.benefit.sesti:before {
    content: url('../img/benefit6.png');
    position: absolute;
}

.parent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.child {
    box-sizing: border-box;
    text-align: center;
    width: 240px;
    border: 1px solid black;
    margin: 15px;
    height: 170px;
}

.child img {
    margin: 25px auto 15px auto;
}

#partneri a {
    display: block;
    margin: 0 auto;
    font-size: 20px;
    text-transform: uppercase;
    color: #1d1d1d;
    font-weight: 700;
}

#partneri a:hover {
    color: #ff7f1a;
}

#partneri a:after {
    content: url(../img/arrow.png);
    margin-left: 5px;
}

#partneri a:hover:after {
    content: url(../img/orange-arrow.png);
}

.nav-pills {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 30px;
}

.nav-tabs > li {
    float: none;
    display: inline-block;
}

/* jQuery */

.ui-tabs-nav {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.ui-tabs .ui-tabs-nav li {
    float: none;
    display: inline-block;
}

.nav-pills > li,
.nav-pills > li {
    float: none;
    display: inline-block;
    *display: inline;
    /* ie7 fix */
    zoom: 1;
    /* hasLayout ie7 trigger */
}

.nav-tabs,
.nav-pills {
    text-align: center;
}

.img-wrapper {
    height: 170px;
    width: 100%;
}

.img-wrapper img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 170px;
}

.proizvod {
    position: relative;
    margin: 15px 0;
    min-height: 335px;
}

.proizvod h3 {
    font-size: 15px;
    color: #1d1d1d;
    font-weight: 700;
    height: 2em;
    text-align: center;
}

.cene {
    position: relative;
}

.cene p, .cene span {
    font-size: 13px;
    color: #adadad;
    font-weight: 700;
    text-decoration: line-through;
    margin: 0;
}
p#up, li#up {
    margin-top: 20px;
}
section#cesta-pitanja ul {
    padding: 0;
}
p#up-down, li#up-down {
    margin-top: 20px;
    margin-bottom: 20px;
}
section#cesta-pitanja .jumbotron p, section#cesta-pitanja .jumbotron li, section#cesta-pitanja .jumbotron strong {
    font-size: 17px;
}

.cene p {
    height: 17px;
}
section#bodovi {
    padding: 0;
}
.jumbotron.pola {
    padding: 0;
}
section#cesta-pitanja {
    padding: 0;
}

span.popust {
    position: absolute;
    right: 0;
    background: url(../img/popust-bg.png) center left / cover no-repeat;
    padding: 0 3px 0 10px;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1d1d1d;
    text-decoration: none;
    margin: 0;
    display: none;
}

.cene p:last-of-type {
    font-size: 15px;
    font-weight: 700;
    color: #626262;
    margin-bottom: 5px;
    text-decoration: none;
    color: #ff7f1a;

}

/*p.stara {
    font-size: 15px;
    font-weight: 700;
    color: #626262;
    margin-bottom: 0;
}

p.nova {
    font-size: 13px;
    color: #adadad;
    font-weight: 700;
    text-decoration: line-through;
}*/

.tab-content .nav-tabs > li > a {
    font-size: 19px;
    font-weight: 700;
    border: none;
    color: #1d1d1d;
}

.tab-content .nav-tabs > li > a,
.tab-content .nav-tabs > li > a:focus,
.tab-content .nav-tabs > li > a:hover {
    border: none;
    background: transparent;
    color: #1d1d1d;
}

.tab-content .nav-tabs > li > a.active {
    position: absolute;
}

.tab-content .nav-tabs > li.active > a:after {
    content: "";
    height: 3px;
    width: 100%;
    background: #ff7f1a;
    position: absolute;
    bottom: 1px;
    z-index: 2;
    left: 0;
    right: 0;
}

.nav-tabs {
    position: relative;
}

.nav-tabs:after {
    content: "";
    height: 2px;
    width: 33%;
    background: grey;
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 33%;
    right: 33%;
}

.nav-tabs {
    border: none;
}

.main.nav-tabs > li.active > a,
.main.nav-tabs > li.active > a:focus {
    cursor: default;
    background-color: #fff;
    border: 1px solid #000000;
    border-bottom-color: #000000 !important;
    border-radius: 0;
}

.main.nav > li > a {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs > li > a {
    margin: 0;
}

.nav > li > a > img {
    max-width: none;
    margin: 0 auto;
}

.nav-tabs > li > a:hover {
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 0;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover,
.nav-pills > li > a:hover {
    background: transparent;
    border: 2px solid #000000;
    border-radius: 0;
}

.nav-pills > li > a {
    border: 2px solid #d8d7d7;
    border-radius: 0;
}

.nav-pills > li + li {
    margin: 0;
}

.nav-pills {
    margin-bottom: 30px;
}

.modal {
    padding-right: 0px !important;
}

.close {
    opacity: 1;
}

.modal-header img {
    margin: 0 auto;
    border-bottom: none;
}

.modal-header {
    border-bottom: none;
}

.modal-dialog {
    width: 1140px;
    max-width: 100%;
}

.modal-content {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
}

a:focus {
    outline: 0;
}

td {
    border: 2px solid black;
    height: 50px;
    padding: 10px;
}

tr:nth-child(even) {
    background: #f3f3f4;
}

tr:nth-child(odd) {

}

.black {
    background: #000 !important;
    color: #fff;
    font-size: 17px;
}

.grey {
    background: #777777 !important;
    font-size: 15px;
    color: #ffffff;
}

tr.black td {
    border: 2px solid #fff;
}

tr.black td:last-child {
    border-right: 2px solid #000;
}

tr.black td:first-child {
    border-left: 2px solid #000;
}

tr.black:first-child td {
    border-top: 2px solid black;
}

.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    float: left;
    border: none;
    background: transparent;
    left: 10px;
    border-radius: 0;
}

.navbar-default .navbar-toggle .icon-bar {
    background: #fff;
}

footer {
    background: #000000;
    padding: 0 0 10px 0;

}

footer a {
    color: #d3d3d3;
    /*font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 10px;
    float: right;*/
}

footer p {
    text-align: center;
    font-size: 16px;
    color: #676767;
    float: left;
}

.black a {
    color: #ff7f1a;
}

.black a:after {
    content: url(../img/orange-arrow.png);
    margin-left: 5px;
}

.navbar-default .navbar-nav > li > a.mPS2id-highlight {
    color: #ff7f1a;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    vertical-align: middle;
}

#faq h3 {
    font-size: 22px;
}

#faq p {
    font-size: 17px;
}

.proizvod a {
    text-decoration: none;
}

.dropup {
    cursor: pointer;
}

.orange {
    color: #fe7f18;
}

.all-small {
    text-transform: uppercase;
}

#faq h2 {
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.modal-footer {
    border: none;
}

.modalshop {
    display: block;
    margin-bottom: 30px;
    text-align: center;
    font-size: 20px;
    color: #1d1d1d;
    font-weight: 700;
}

.modalshop:after {
    content: url(../img/arrow.png);
    margin-left: 5px;
}

p.pomerite {
    font-size: 20px;
    margin-left: 7px;
}

p.pomerite:before {
    content: url("../img/pomerite.png");
    padding-right: 10px;
}

.table a {
    color: #1d1d1d;
}

.textwidget.custom-html-widget img {
    height: 20px!important;
    margin-right: 15px;
}

.yawp_wim_wrap {
    padding-left: 25px;
    margin-top: 20px;
}
.desktop-header .logoss img.tomas-logo{
    padding-top: 23px;
}

.tomas-img{
    padding-bottom: 10px;
    padding-top: 10px;
}

.tomas-tab{
    padding: 8px 0;
}
small.ize {
    text-align: center;
    padding-top: 10px;
    display: block;
}
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {
}

/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {
}

/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
   
    .jumbotron {
        padding-top: 5%;
       /*  height: 84vh; */
        margin-bottom: 0;
    }

    .nav-pills > li {
        width: 33%;
        float: left;
    }

    section#kontakt div {
        text-align: center;
        font-weight: 700;
        font-size: 15px;
        text-transform: uppercase;
    }

    section#kontakt div img {
        display: block;
        margin: 0 auto 15px auto;
        padding: 0 40px;
    }

    .modal {
        top: 5%;
        width: 100%
    }

    .modal-body {
        height: 80vh;
        overflow-y: auto;
    }

    td:nth-child(5) {
        white-space: nowrap;
    }

    td:nth-child(4) {
        white-space: nowrap;
    }

    .desktop {
        display: block;
    }

    .mobilni {
        display: none;
    }

    .mobilni-header {
        display: none;
    }

    .desktop-header {
        display: block;
        padding: 0;
    }

    .desktop-header .logoss img {
        float: right;
        padding: 15px;
    }

    .desktop-header .broj {
        font-size: 20px;
        color: #878787;
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 400;
        float: left;
        margin-top: 20px;
    }

    .mobilni-sadrzaj {
        display: none;
    }

    .koraci p {
        min-height: 60px;
    }

    #kontakt ul.dropdown-menu {
        padding: 15px;
        border-radius: 0;
        background: #d8d8d8;
        box-shadow: none;
    }

    #kontakt ul.dropdown-menu > li > a {
        font-weight: 700;
    }

    #kontakt ul.dropdown-menu > li > a:hover,
    #kontakt ul.dropdown-menu > li > a:focus {
        background: #d8d8d8;
    }

    #kontakt .dropup .dropdown-menu {
        bottom: 110%;
    }

    .telefon-header {
        margin-top: 5px;
        margin-right: 10px;
        display: block;
        float: left;
    }

    .jumbotron span {
        line-height: 70px;
    }

    span.popust {
        bottom: 0;
        display: none;
    }

    #kontakt a {
        display: inline-block;
    }

    #kontakt .dropup {
        display: inline-block;
    }

    section#kontakt {
        padding: 30px 0 45px 0;
        background: #2f2f2f;

    }

    section#kontakt .dropup {
        color: #ffffff;
    }

    section#kontakt a {
        color: #ffffff;
    }

    #kontakt .dropup .dropdown-menu,
    #kontakt .dropup .dropdown-menu a {
        color: #1d1d1d
    }

    .cene {
        text-align: center;
    }

    footer .right {
        float: right;
        text-align: right;
    }

    footer .right a img {
        max-height: 30px;
        display: block;
        width: 25px;
        margin-left: 25px;
    }
 /*    footer .right a:first-child {
        display: inline-block;
        margin-top: 0;
    }  */
    footer .right a {
        display: inline-block;
        margin-top: 10px;
    }

    .site-footer p {
        margin-top: 10px;
    }

    .pomerite {
        display: none;
    }

    #ponuda h4.podnaslov {
        margin-bottom: 55px;
    }

    .nav-tabs {
        margin-bottom: 30px;
    }
}

/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {
}

/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
    .navbar-default .navbar-nav > li > a {
        padding-left: 0;
        margin-top: 20px;
        }
        .yawp_wim_wrap {
            padding-left: 5px;
            margin-top: 35px;
        }

}

/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
  
  /*   body {
        padding-top: 60px;
    } */
 .yawp_wim_wrap {
        margin-top: 10px;
    }
    small.ize {
        color: #fff;
        padding-bottom: 30px;
    }
    .child {
        flex-basis: 100%;
    }

    .modal-body {
        position: relative;
        padding: 0;
        height: 70vh;
        overflow: auto;
    }

    .modal-body td {
        white-space: nowrap;
    }

    .modal-dialog {
        top: 90px;
        position: fixed;
        left: 0;
        margin: 0;
    }

    .jumbotron {
       /*  background: url(../img/glavni-baner-mobilni.jpg) center -20px / cover no-repeat; */
        margin-bottom: 0;
    }

    .jumbotron span {
        font-size: 25px;
        line-height: 40px;
    }

    .jumbotron .container {
        margin-top: 0;
        margin-bottom: 0;
    }

    .jumbotron a:first-child {
        margin-top: 15px;
    }

    .jumbotron a {
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }

    section#mobilni {
        padding: 0;
        padding-bottom: 15px;
    }

    .background-black h2.naslov {
        font-size: 26px;
        padding: 20px 0;
        text-align: center;
        width: 100%;
    }

    .background-black {
        background: #000;
    }

    .background-grey {
        background: #ededed;
        margin-bottom: 20px;
        border-bottom: 1px solid #e1e1e1;

    }

    #partneri .background-grey {
        margin-bottom: 15px;
    }

    section#partneri {
        padding-bottom: 15px;
        padding-top: 0;
    }

    section#ponuda {
        padding-top: 0;
    }

    #benefiti .background-grey {
        margin-bottom: 40px;
    }

    .background-grey h4.podnaslov {
        margin: 30px 0;
        color: #000000;
        font-size: 20px;
    }

    ul.nav.nav-pills a img {
        padding: 5px;
        max-height: 40px;
        min-height: 38px;
    }

    .navbar-toggle {
        margin-top: 13px;
    }

    .nav-pills > li + li {
        margin-left: 0;
    }

    .nav-pills > li > a {
        padding: 15px 0;
    }

    .nav-tabs:after {
        background: transparent;
    }


    .nav > li > a {
        padding: 0;
    }

    .nav-pills {
        margin-bottom: 0;
        max-width: 100%;
        display: flex;
    }

    .grey-bg {
        background: #ededed;
    }

    #ponuda .background-grey {
        margin-bottom: 0;
    }

    .nav-pills > li.active {

    }

    /*ul.nav.nav-pills li a img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    ul.nav.nav-pills li.active a img {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
*/
    p.stara {
        font-size: 13px;

    }

    span.popust {
        bottom: 35px;
        display: none;
    }

    p.nova {
        font-size: 12px;;
    }

    .nav-tabs > li {
        width: 30%;
    }

    .nav-tabs {
        padding: 10px 0 20px 0;
    }

    .desktop {
        display: none;
    }

    .mobilni {
        display: block !important;

    }

    span.mobilni {
        margin-left: -10px;
        margin-right: -10px;
    }

    .oko {
        padding: 15px;
        margin-top: 20px;
    }

    .oko img {
        margin: 0 auto;
        display: block;
    }

    .mobilni p {
        text-align: center;
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

    .mobilni span {
        cursor: pointer;
    }

    .mobilni-sadrzaj .panel-group .panel {
        margin-bottom: 0;
        border-radius: 4px;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    .mobilni-sadrzaj .panel-body {
        margin: 0;
        background: #d8d8d8;
    }

    .mobilni-sadrzaj .panel-group .panel + .panel {
        margin: 0;
    }

    .mobilni-sadrzaj {
        text-align: center;
    }

    .mobilni-sadrzaj h4 {
        font-size: 20px;
    }

    .mobilni-sadrzaj h4 a {
        color: #1d1d1d;
    }

    .mobilni-sadrzaj h3 {
        font-size: 35px;
        font-weight: 700;
    }

    .mobilni-header {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 0;
        text-align: center;
    }

    .mobilni-header img {
        float: none;
        display: inline-block;
        zoom: 1;
        padding: 0 5px;
        max-height: 22px;
    }

    section {
        padding: 15px 0;
    }

    .desktop-header {
        display: none;
    }

    .nav > li {
        padding-top: 15px;
    }

    .navbar-brand > img {
        max-width: 70vw;
    }

    .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover, .nav-pills > li > a:hover {
        z-index: 1;
    }

    .tab-content .nav-tabs > li.active > a:after {
        bottom: -5px;
    }

    #mobilni h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .close-kontakt {
        float: right;
    }

    .mobilni-sadrzaj .panel-body h4.prvi {
        margin-top: 30px;
    }

    /* Container DIV - automatically generated */
    .simply-scroll-container {
        position: relative;
        height: 45px;
        width: auto;
    }

    /* Clip DIV - automatically generated */
    .simply-scroll-clip {
        position: relative;
        overflow: hidden;
    }

    /* UL/OL/DIV - the element that simplyScroll is inited on
    Class name automatically added to element */
    .simply-scroll-list {
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .simply-scroll-list li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .simply-scroll-list li img {
        border: none;
        display: block;
    }

    /* Custom class modifications - adds to / overrides above

    .simply-scroll is default base class */
    /* Container DIV */
    .simply-scroll {
        width: 1576px;
    }

    /* Clip DIV */
    .simply-scroll .simply-scroll-clip {
        width: auto;
        height: 45px;
    }

    /* Explicitly set height/width of each list item */
    .simply-scroll .simply-scroll-list li {
        float: left; /* Horizontal scroll only */
        height: 45px;
        width: auto;
    }

    .jumbotron span {
        margin-bottom: 5px;
    }

    #mobilni img {
        padding-bottom: 15px;
    }

    #benefiti p {
        line-height: 25px;
    }

    #benefiti h3 {
        margin-top: 0;
        font-weight: 700;
    }

    section#benefiti {
        padding: 0;
        margin-top: -10px;
    }

    .benefit {
        zoom: .8;
    }

    .navbar-default {
        padding: 0;
    }

    footer p, footer a {
        float: none;
        display: block;
        text-align: center;
        margin-bottom: 15px;
    }

    #pravila .modal {
        padding: 15px;
    }

    .nav-pills {
        white-space: normal;
    }

    .nav > li > a > img {
        max-width: 100%;
    }

    /*.nav-pills > li, .nav-pills > li {
        max-width: 24%;
    }*/
    .navbar-nav {
        margin: 5px -15px 25px -15px;
    }

    #faq .modal-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    footer .right a img {
        max-height: 30px;

    }

}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
}

/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
}

/*.none {
    display: none;
}*/

.ukloni {
    display: none;
}