/***********************/
/********GLOBALS*******/
/***********************/


body {
    padding: 0;
    margin: 0;
    background-color:#ffffff;
    font-family: 'Ubuntu', sans-serif;
    overflow: hidden;
}
/*#page {*/
    /*display: none;*/
    /*opacity: 0;*/
/*}*/

/*#loading {*/
    /*opacity: 1;*/
    /*display: block;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*z-index: 100;*/
    /*width: 100vw;*/
    /*height: 100vh;*/
    /*background-color: white;*/
    /*background-image: url("../images/713.gif");*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
/*}*/

h2 {
    font-size: 42px;
}

.pos-r {
    position: relative;
}
.margin-center {
    margin: 0 auto !important;
}
.no-padding {
    padding: 0 !important;
}
.no-margin {
    margin: 0;
}
.padding-sm {

}
.padding-b-md {
    padding-bottom: 50px;
}
.margin-b-md {
    margin-bottom: 50px;
}
/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: white;
    background-image: url("../images/713.gif");
    background-repeat: no-repeat;
    background-position: center;
}

textarea:focus::-webkit-input-placeholder
{
    color: transparent;
}
textarea {
    resize: vertical;
}

/***********************/
/**********MENU*********/
/***********************/


.navbar {
    height: auto;
    background-color:#FFF;
    margin-bottom: 0;
}

.navbar-nav {
    float: right;
    padding: 29px 0;

}

.navbar-nav > li {
    float: left;
    border: 1px solid #cccccc;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
}

.navbar-nav > li:hover {

    border-color: #000000;
}


.navbar-nav > li > a {
     padding-top: 10px;
     padding-bottom: 10px;
     color: #5a5a5a;
     font-weight: bold;
 }

.navbar-nav > li > a > .fa{
    padding-right: 5px;

}

.navbar-brand {
    height: auto;
}
.arrow-down {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7px 0 7px;
    border-color: #000000 transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 45%;
    z-index: 1001;
    display: block;
    opacity: 0;
}

.navbar-nav > li:hover > a {
    color: #000000;
    background:none;
    border-color:#000000;
}
.navbar-nav > li > .dropdown-menu {
    border: none;
    box-shadow: none;
    top: 103%;
}
.navbar-nav > li:nth-child(3) > .dropdown-menu {
    left: -18%;

}
.navbar-nav > li:nth-child(4) > .dropdown-menu {
    left: -37%;

}
.navbar-nav > li:hover > .dropdown-menu {
    display: block;

}
.navbar-nav > li:hover > .arrow-down {
    opacity: 1;
    transition: all 0.7s ease;
}
.navbar-nav > li > .dropdown-menu:hover {
    display: block;
}

.navbar-nav > li > .dropdown-menu .first {
    padding-top: 25px;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: inherit;
    border-color: inherit;
}
.open > .dropdown-menu {
    display: none;
}


.mobile-dropdown {
    display: none;
}
@media (max-width: 991px) {
    .nav > li > a {
        padding: 10px 9px;
    }
    .navbar-nav > li {
        margin-right: 8px;
    }
    .navbar-brand {
        padding: 15px 0;
    }
}
@media (max-width: 768px) {

    .navbar-brand {
        padding: 15px 15px;
    }
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-nav > li > .dropdown-menu {
        text-align: center;
    }
    .navbar-nav > li > .dropdown-menu .first {
        padding: 0;
    }

    .navbar-nav > li:nth-child(3) > .dropdown-menu {
        left: -99999%;

    }
    .navbar-nav > li:nth-child(4) > .dropdown-menu {
        left: -9999%;

    }
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }

    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 18px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }


    .navbar-toggle {
        border: 1px solid #000000;
        padding: 14px 15px;
    }
    .navbar-toggle .icon-bar {

        border: 1px solid #000000;
    }
    .navbar-nav > li:hover > .arrow-down {
        opacity: 0;

    }

    .open > .dropdown-menu {
        display: block;
    }
    .navbar-nav {
        float: none;
    }
    .navbar-nav > li {
        width: 100%;
        text-align: center;
    }
    .collapse.in {
        overflow: visible;
    }

    .navbar-toggle {
        margin-top: 28px;
        margin-bottom: 28px;
    }
}
@media (max-width: 320px) {
    .navbar-brand {
        padding-left: 7px;
        padding-right: 7px;
    }
}
/***********************/
/*******MAIN PAGE*******/
/***********************/

.slider .img-responsive,
.slider .thumbnail > img,
.slider .thumbnail a > img,
.slider .carousel-inner > .item > img,
.slider .carousel-inner > .item > a > img {
    display: block;
    width: 100%;
    height: auto;
}


#content-top {
    border-top: 1px solid #d3d3d3;
}

.slider {
    position: relative;
}


.carousel-overlay h1 {
    color: #000000;
    opacity: 1 !important;
    line-height: 1.3;
    text-align: center;
    font-size: 4vw;
}

.carousel-overlay {
    position: absolute;
    top: 19%;
    left: 10%;
    background-color: #ffffff;
    border-radius: 10px;
}

.overlay-title {
    background-color: #82D2F5;

}
.overlay-title h1 {
    margin: 0;
    padding: 20px 50px;
    background-color: #273879;
    color: white;
    /*background-color: #82D2F5;*/
}
.overlay-info {
    padding: 15px;
}

.overlay-tab {
    padding-bottom: 10px;
}
.carousel-overlay .overlay-tab img{
    padding-right: 10px;
}
.overlay-text {
    display: inline-block;
    vertical-align: middle;
}
.overlay-text h3 {
    margin: 0;
    display: block;
    vertical-align: top;
}
.overlay-text p {
    margin: 0;
    display: block;
    vertical-align: bottom;
    font-size: 18px;
}

#content-top .carousel-control:hover{
    color: #273879;
    text-decoration: none;
    filter: alpha(opacity=100);
    outline: 0;
    opacity: 1;
}

.carousel {
    height: 100%;
}

.item,
.carousel-inner {
    max-height: 600px;
    position: relative;
}

.carousel-inner .active {
    max-height: 600px;
}

/*.fill {*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background-position: center;*/
    /*-webkit-background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*background-size: cover;*/
    /*-o-background-size: cover;*/
/*}*/

.carousel-control {
  width: 10%;
}

.carousel-control .icon-next {
    margin-top: -16px;

}
.carousel-control .icon-prev {
    margin-top: -16px;

}

.carousel-indicators .active {
    width: 20px;
    height: 20px;
    border: 2px solid white;
}

.carousel-indicators li {
    width: 18px;
    height: 18px;
}


.offer {
    position: relative;
    z-index: 10;
    color: #5a5a5a;
    font-size: 16px;
}
.offer h3 {
    text-align: center;
    color: #5a5a5a;
    margin-bottom: 20px;
    padding: 20px 0;
    border-bottom: 2px solid #5a5a5a;
}
.overlay {
    margin: 20px 15px;
    position: absolute;
    width: auto;
    height: auto;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: -1;
    background-color: #ffffff;
    transition: all 0.7s ease;
}
.offer:hover .overlay {
    opacity: 1;
    margin: -20px 0;
}
.offer:hover .img-container .img-circle {
    box-shadow: 0 0 0 5px #273879;
    transition: all 0.5s ease;
}

.offer-button:hover {
    color: #000000;
    background: #FBFBFB;
    border-color: #273879;
}
#contact-tab {
    display: none;
}
.contact-tab-xs {
    text-align: center;
}
#content-middle {
    padding: 20px 0 20px 0;
    /*background-color: #343438;*/
    background:url("../images/bg_patt.png");
    border-top: 1px solid #d3d3d3;
}
.img-container {
    position: relative;
    min-height: 100px;
}
.img-container .offer-img {
    position: absolute;
    bottom: 0;
    top: 0;
    left:0;
    right: 0;
    margin: auto;
}

.img-container .img-circle {
    display: block;
    margin: 0 auto;
    background-color: white;
    width: 100px;
    height: 100px;
}
.offer-text {
    min-height: 162px;
    padding: 15px 0;
    text-align: justify;
}
.offer-button {
    display: table;
    margin: 10px auto;
    border: 1px solid #5a5a5a;
    border-radius: 10px;
    padding: 10px 15px;
    color: #5a5a5a;
    background: white;
}

.offer:hover .offer-button {
    color: #000000;
    background:#FBFBFB;
    border-color:#273879;
    text-decoration: none;
}

#content-bottom {
    border-top: 1px solid #d3d3d3;
}

.content-block {
    background: url("../images/motor-p.jpg");
    color: #FBFBFB;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
    border-bottom: 1px solid #d3d3d3;
}

.cnt-block-title {
    width: 60%;
    /*border: 1px solid #FBFBFB;*/
    border-radius: 4px;
    display: block;
    padding: 40px 0;
    margin: 50px auto;
    background-color: rgba(0,0,0, 0.5);
    text-align: center;
}

.middle-banner h3 {
    text-align: center;
}
.logo-panel {
    padding: 50px 0;
    background: #FBFBFB;
}

.logo-title {
    padding-bottom: 30px;
    width: 60%;
    margin: 0 auto;
    color: #5a5a5a;
    display: block;
    text-align: center;
}


.logos img {
    margin: 20px auto;
    filter: gray;
    filter: grayscale(1);
    -webkit-filter:grayscale(1);
}
.logos img:hover {
    filter: none;
    -webkit-filter:grayscale(0);
    transition: all 0.5s ease;
}

@media (max-width: 600px) {
    .cnt-block-title {
        width: inherit;
    }
}
@media (max-width: 768px) {
    .cnt-block-title {
        padding: 20px 0;

    }
    .offer-text {
        padding: 15px 40px;
    }
    .carousel-overlay {
        display: none;
    }
    #contact-tab {
        display: block;
    }

}
@media (max-width: 991px) {
    .overlay-info {
        padding: 10px;
    }
    .overlay-tab {
        padding-bottom: 5px;
    }
    .overlay-title h1 {
        padding: 10px 25px;
    }
    .carousel-overlay {
        top: 10%;
    }
    .offer:hover .overlay {
        margin: -10px 0;
    }
}
@media (max-width: 1199px) {
    .carousel-overlay {
        top: 16.7%;
    }
}


/*****************************/
/*********CONTACT PAGE********/
/*****************************/

.contact-img {
    background: url("../images/contact.jpg");
}
#contact {
    padding-bottom: 50px;
}
#contact h1 {
    margin: 20px 0;
}
.contact-info {
    min-height: 350px;
}
#google-map {
    margin: 0 auto;
    height: 350px;
    max-width: 600px;
}
.overlay-tab > span{
    float: none;
    padding: 0;
}
.overlay-tab .overlay-text {
    padding: 0;
    text-align: center;
}
/*.footer-form {*/
    /*padding-bottom: 20px;*/
/*}*/
.footer-form textarea {
    min-height: 150px;
}
.main-btn {
    display: block;
    padding: 6px 16px;
    text-align: center;
    font-size: 16px;
}
.footer-form > h1 {
    text-align: center;
    margin: 0 0 15px 0;
}

.footer-form .main-btn {
    margin: 0 auto;
}

@media (max-width: 991px) {
    .contact-info {
        min-height: inherit;
    }
}

/*******************************/
/*********ABOUT GAS PAGE********/
/*******************************/

.autogas-img {
    background: url("../images/gas-upgrade.jpg");
}

/*******************************/
/*****AUTO GAS UPGRADE PAGE*****/
/*******************************/

.upgrade-img {
    background: url("../images/ugradnja.jpg");
}

.top-row {
    text-transform: uppercase;
}

#tech-page ul{
    width:100%;
    margin-bottom:20px;
    overflow:hidden;
}
#tech-page li{
    line-height:1.5em;

    float:left;
    display:inline;
}
#double li  { width:50%;}
#triple li  { width:33.333%; }
#quad li    { width:25%; }
#six li     { width:16.666%; }
/******************************/
/*******AUTO REPAIR PAGE*******/
/******************************/

.jumbotron {
    background: url("../images/naslovna-popravke.jpg") no-repeat center;
    background-size: cover;
}
.info-list {
    margin: 0;
    padding-left: 15px;
    list-style-type: none;
}
.fa-angle-double-right {
    margin-right: 5px;
}

.info-tab {
    margin-bottom: 20px;
}

.info-tab h2 {
    text-align: center;
    margin: 15px 0;
}

.info-img {
    height: 64px;
    width: 64px;
    display: block;
    margin: 0 auto;
}

.img-tab .img-responsive {
    height: 100%;
}

.info-tab img {
    margin: 0 auto;
    display: block;
}

.info-tab:first-child .info-img {
    background: url("../images/laptop.png");

}
.info-tab:nth-child(2) .info-img {
    background: url("../images/auto-mehanika.png");
}
.info-tab:nth-child(3) .info-img {
    background: url("../images/motor-prenos.png");

}
.info-tab:nth-child(4) .info-img {
    background: url("../images/kocnice.png");

}

.post-mob-underline {
    display: none;
}
.post-underline {
    position: absolute;
    bottom: -22px;
    left: 1.5%;
    width: 97%;
}
.post-line {
    position: relative;
    /*margin-top: 20px;*/
}
.post-line i {
    position: absolute;
    right: 49%;
    font-size: 20px;
    top: -8px;
    color: #cccccc;
}
.post-line:before {
    content: "";
    width: 47%;
    height: 1px;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 0;
    border: 1px solid #cccccc;
}

.post-line:after {
    content: "";
    width: 47%;
    height: 1px;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 0;
    border: 1px solid #cccccc;

}

.secondary {
    display: none;
}

.repair-img {
    background: url("../images/mech.jpg");
}

@media (max-width: 991px) {
    .primary {
        display: none;
    }
    .secondary {
        display: block;
    }
    .img-tab .img-responsive {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .post-line i {
        right: 48.5%;
    }
}

@media (max-width: 400px) {
    .post-line i {
        right: 47.5%;
    }
}
/****************************/
/*******TECHNICAL PAGE*******/
/****************************/

#tech-page .jumbotron {
    background: url("../images/naslovna-tehnicki.jpg") no-repeat center;
    background-size: cover;
}

.top-image {
    /*width: 100%;*/
    margin: inherit;
    /*padding: 0;*/
    /*height: auto;*/
    position: relative;
    margin-bottom: 50px;
}

.tech-img {
    background: url("../images/tech-top.jpg");
}

.mid-info {
    text-align: center;
    color: white;
    position:absolute;
    top: 30%;
    width: 100%;
    /*left: 50px;*/
    font-size: 42px;
    padding: 20px 10px;
    /*border: 2px solid white;*/
    /*border-radius: 10px;*/
}
.mid-info .post-underline {
    width: 50%;
    left: 24.8%;
}
.mid-info .post-line:after {
    width: 47%;
    top: 50%;
    left: -3.5%;
}
.mid-info .post-line:before {
    right: -3.5%;
}
.mid-info .post-line i {
    right: 48.5%;
}

@media (max-width: 768px) {
    .mid-info .post-line i {
        right: 48%;
    }
}
@media (max-width: 600px) {
    .mid-info .post-line i {
        right: 46.5%;
    }
}
@media (max-width: 420px) {
    .mid-info .post-line i {
        right: 45.5%;
    }
}
/*****************************/
/*******CALCULATOR PAGE*******/
/*****************************/

#calculator {
    padding-bottom: 50px;
}

#kalkulator table {

}
#kalkulator tbody > tr > td {
    text-align: center;
}

#kalkulator tbody > tr > td > input {
    border: none;
}

#kalkulator .calculated td {
     text-align: right;
 }

#kalkulator table input {
    max-width: 70px;
    text-align: center;
}

#kalkulator table .rm {
    max-width: 120px;
}
.form-control:focus {
    border-color: #273879;
}

.last-line {
    line-height: 34px;
    padding: 0;
}
.last-tr {
    border-bottom: 1px solid #ddd;
}

/*******************************/
/*******REGISTRATION PAGE*******/
/*******************************/

.doc-img {
    background: url("../images/document.jpg");
}

/***********************/
/*********FOOTER********/
/***********************/

footer {
    background:url("../images/footer.jpg") no-repeat bottom;
    background-size: cover;
    padding:50px 0 30px 0;
    color: #FBFBFB;
    border-top: 1px solid #d3d3d3;
    position: relative;
}

/*.footer-block ul{*/
    /*list-style-type: none;*/

/*}*/



/*.lines {*/
    /*text-align: center;*/
    /*margin: 0 0 10px 0;*/
/*}*/
/*.lines span {*/
    /*display: inline-block;*/
    /*position: relative;*/
/*}*/
/*.lines span:before,*/
/*.lines span:after {*/
    /*content: "";*/
    /*position: absolute;*/
    /*height: 5px;*/
    /*border-bottom: 1px solid white;*/
    /*border-top: 1px solid white;*/
    /*top: 50%;*/
    /*width: 50px;*/
/*}*/
/*.lines span:before {*/
    /*right: 100%;*/
    /*margin-right: 15px;*/
/*}*/
/*.lines span:after {*/
    /*left: 100%;*/
    /*margin-left: 15px;*/
/*}*/



/*.footer-block-info {*/
    /*padding: 40px 0;*/
/*}*/

.footer-list {
    padding-left: 67.5px;
    display: block;
}
.footer-list h3 {
    padding-left: 20px;
}

.footer-list ul{
    list-style-type: none;
    padding:0 0 0 20px;
    margin: 0;
    float: left;
}
.footer-list a {
    color: #FBFBFB;
}
.footer-list li a i {
    margin-right: 5px;
}

.footer-logo {
    padding-top: 28px;
}
.footer-underline {
    position: absolute;
    bottom: 15px;
    left: 1.5%;
    width: 97%;
}
.copyright {
    padding-top: 10px;
    display: block;
    text-align: center;
}

@media (max-width: 1199px) {
    .footer-list {
        padding-left: 42.5px;
    }
}

@media (max-width: 991px) {
    .footer-list {
        padding-left: 15px;
    }

}

@media (max-width: 768px) {
    footer {
        text-align: center;
    }
    .footer-list {
        padding-left: 0;
    }
    .footer-list ul {
        float:none;
        padding: 0;
    }
    .footer-list h3 {
        padding: 0;
    }
    .footer-logo img {
        margin: 0 auto;
    }
}

@media (max-width: 420px) {
    .footer-block {
        width: 100%;
    }
}


/***ADDENDUM - BOTTOM TRIANGLE****/

.top-image-container {
    background-size: inherit;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
    /*height: 450px;*/
    height: 32em !important;
}


.bottom-triangle  {
    width: 100%;
    padding-left: 50%;
    position: absolute;
    bottom: 0;

}

.bottom-triangle:after {
    content: "";
    margin-left: -600px;
    border-left: 600px solid transparent;
    border-right: 600px solid transparent;
    position: absolute;
    left: 50%;
}

.bottom-triangle-blue {
    padding-bottom: 40px;
}

.bottom-triangle-blue:after {
    border-bottom: 40px solid #273879;
}

.bottom-triangle-white {
    padding-bottom: 28px;
}

.bottom-triangle-white:after {
    border-bottom: 28px solid #fff;
}

.interior-info {
    padding: 180px 50px;
    font-size: 42px;
    text-align: center;

}

.interior-info:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #151515;
    opacity: 0.7;
    z-index: 0;
}

@media (max-width: 1199px) {
    .bottom-triangle:after {
        margin-left: -485px;
        border-left: 485px solid transparent;
        border-right: 485px solid transparent;
    }
}
@media (max-width: 991px) {
    .bottom-triangle:after {
        margin-left: -370px;
        border-left: 370px solid transparent;
        border-right: 370px solid transparent;
    }
}
@media (max-width: 768px) {
    .bottom-triangle:after {
        margin-left: -290px;
        border-left: 290px solid transparent;
        border-right: 290px solid transparent;
    }
    .top-image-container {
        height: 400px;
    }
}
@media (max-width: 600px) {
    .bottom-triangle:after {
        margin-left: -240px;
        border-left: 240px solid transparent;
        border-right: 240px solid transparent;
    }
    .top-image-container {
        height: 360px;
    }
}
@media (max-width: 500px) {
    .bottom-triangle:after {
        margin-left: -200px;
        border-left: 200px solid transparent;
        border-right: 200px solid transparent;
    }
}
@media (max-width: 420px) {
    .bottom-triangle:after {
        margin-left: -140px;
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
    }
    .top-image-container {
        height: 260px;
    }
}

.tools-img {
    background: url("../images/alat.png");

}