@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-bold.woff2') format('woff2'),
         url('../fonts/rubin-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-book.woff2') format('woff2'),
         url('../fonts/rubin-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-light.woff2') format('woff2'),
         url('../fonts/rubin-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-extralight.woff2') format('woff2'),
         url('../fonts/rubin-extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-thin.woff2') format('woff2'),
         url('../fonts/rubin-thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;

}
@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-medium.woff2') format('woff2'),
         url('../fonts/rubin-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-bookitalic.woff2') format('woff2'),
         url('../fonts/rubin-bookitalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;

}
@font-face {
    font-family: 'Rubin';
    src: url('../fonts/rubin-semibold.woff2') format('woff2'),
         url('../fonts/rubin-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
/* BASIC OVERRIDE */
body {font-family: 'Rubin', Arial, sans-serif;font-size: 16px;font-weight: 300;}
h3,
h4,
h5,
h6 {font-family: 'Rubin', Arial, sans-serif;font-weight: 300;}
h4 {font-size: 17px;text-transform: uppercase;font-weight: 200;}
h4 a {color: #333;}
h4 a:hover {color: #7a2d35;}
.m10 {margin: 10px 0;}
.m40 {margin: 40px 0;}
.mb40 {margin-bottom: 40px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.ml40 {margin-left: 40px;}
.hiden {display: none;}

.btn,
.sppb-btn {border-radius: 0;}
.btn.btn-default,
.sppb-btn.sppb-btn-default {font-size: 22px;font-weight: 200;background: none;color: #d2ac67;border: 2px solid #d2ac67;padding: 7px 25px;}
.btn.btn-default:hover,
.sppb-btn.sppb-btn-default:hover {background: #d2ac67;color: #fff;}
.btn.btn-primary,
.sppb-btn.sppb-btn-primary,
.ba-btn-submit {font-size: 22px;font-weight: 200;background: none;color: #7a2d35;border: 2px solid #7a2d35;padding: 6px 25px;}
.btn.btn-primary:hover,
.sppb-btn.sppb-btn-primary:hover,
.ba-btn-submit:hover {background: #7a2d35;color: #fff;}

/* HEADER */
#sp-header {height: 70px;}
.sp-contact-info {margin: 0;float: none;display: inline-block;margin-right: 20px;font-weight: normal;}
.sp-contact-info .fa {-webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-ms-transition: all 300ms ease-out;transition: all 300ms ease-out;}
.sp-contact-info .fa.fa-mobile {font-size: 21px;vertical-align: sub;}
.sp-contact-info li:hover,
.sp-contact-info li:hover a {color: #333;}
ul.social-icons >li {margin: 0;margin-right: 20px;}
ul.social-icons > li a {width: 28px;height: 28px;line-height: 28px;text-align: center;display: inline-block;border: 1px solid #7a2d35;color: #7a2d35;font-size: 16px;-webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-ms-transition: all 300ms ease-out;transition: all 300ms ease-out;}
ul.social-icons > li a:hover {border-color: #333;color: #333;}
#sp-header .logo {margin-top: -30px;}
#sp-header.menu-fixed .logo {margin-top: 0;height: 70px;}
#sp-header.menu-fixed .logo img {max-height: 70px;}
.sp-megamenu-parent >li > a,
.sp-megamenu-parent >li > span {margin-top: 10px;line-height: 50px;font-size: 17px;color: #333;font-weight: normal;padding: 0 11px;}
#offcanvas-toggler {display: none;}

/* HOMEPAGE BODY */

/* BODY */

/* SP Page builder */
.sp-page-builder .page-content #home-hero {padding: 250px 0 250px 0;}
.hero-block .sppb-addon-text {color: #fff;font-size: 24px;font-weight: 200;}
.sppb-title-heading {text-transform: uppercase;letter-spacing: 2px;font-weight: 200;}
.sppb-addon-image-content.aligment-left .sppb-content-holder {padding: 50px 0 50px 50px;}

/* Povoljne cene */
#sp-page-builder #povoljne-cene .sppb-section-title {margin-bottom: 0;}
#povoljne-cene .sppb-addon-feature .sppb-addon-text {margin-top: 20px;}

/* Galerija */
#sp-page-builder .copyright-block {display: none;}
.ba-gallery > p {display: none;}

/* Home meni block */
#home-meni .sppb-image-content-title {color: #7a2d35;text-align: center;}
#home-meni .sppb-btn.sppb-btn-primary {margin: 40px auto 0 auto;}

/* Aktuelno */
.nspArt {position: relative;}
.nspArt h4.nspHeader,
.nspArt p.nspText {font-size: 17px;line-height: 22px;padding: 20px 20px 5px 20px;background: #f2f2f2;}
.nspArt p.nspText {font-size: 15px;padding: 0px 20px 50px 20px;}
.nspArt p.nspText a {color: #333;}
a.readon {position: absolute;left: 20px;bottom: 27px;text-transform: uppercase;color: #d2ac67;}

/* Sadrzaji block */
.rubin-lista ul {list-style-type: none;padding: 0;padding-left: 30px;}
.rubin-lista ul li {position: relative;}
.rubin-lista ul li:before {display: block;content: '';width: 14px;height: 12px;position: absolute;top: 7px;left: -29px;background: url(/images/Icons/list-bullet.png) no-repeat 0 0;}

/* Kontakt block */
#kontakt-blok,
.kontakt-blok {font-size: 15px;}
#sp-bottom.kontakt-blok .sp-module .sp-module-title {
    color: rgba(51, 51, 51, 1);
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
#sp-page-builder .ba-form {padding: 0;}
.ba-form p {display: none;}
.ba-form .btn.btn-primary {padding: 6px 35px;text-transform: uppercase;margin-top: 10px;}
#baform-1 .ba-form input:hover,
#baform-1 .ba-form input:focus {outline: none;}

/* Varijante */
#raspored-tabs .sppb-nav-tabs {
    border-bottom: 0;
    text-align: center;
    margin-bottom: 45px;
}
#raspored-tabs .sppb-nav-tabs > li {
    float: none;
    display: inline-block;
    margin-bottom: 10px;
}
#raspored-tabs .sppb-nav-tabs > li > a {margin: 0 10px;border-radius: 0;font-size: 20px;font-weight: 200;background: none;color: #7a2d35;border: 2px solid #7a2d35;padding: 7px 25px;}
#raspored-tabs .sppb-nav-tabs > li.active > a,
#raspored-tabs .sppb-nav-tabs > li.active > a:hover,
#raspored-tabs .sppb-nav-tabs > li.active > a:focus {
    color: #fff;
    background-color: #7a2d35;
    border: 2px solid #7a2d35;
    cursor: default;
}
#raspored-tabs .sppb-nav-tabs > li > a:hover {
    color: #fff;
    background-color: #7a2d35;
    border: 2px solid #7a2d35;
}
#raspored-tabs h4 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 25px;
    margin-bottom: 20px;
    line-height: 25px;
}
#raspored-tabs p {
    font-size: 15px;
    color: #888;
    font-weight: 300;
}
#raspored-tabs p.persons {
    font-size: 13px;
    color: #333;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}
#raspored-tabs p.persons strong {
    font-weight: 500;
}
#raspored-tabs .sppb-fade .flyinleft {
    -webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
    opacity: 0;
    -webkit-transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -ms-transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
#raspored-tabs .sppb-fade.active.in .flyinleft {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
    -webkit-transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) .3s;
    -moz-transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) .3s;
    -ms-transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) .3s;
    transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) .3s;
}
#raspored-tabs .sppb-fade .flyinright {
    -webkit-transform: translateX(600px);
    -moz-transform: translateX(600px);
    -ms-transform: translateX(600px);
    transform: translateX(600px);
    opacity: 0;
    -webkit-transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -ms-transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: 1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
#raspored-tabs .sppb-fade.active.in .flyinright {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
    -webkit-transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -ms-transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

/* Izbor menija */
#izbor-menija .sppb-nav {width: 30%;float: left;margin-top: -10px;}
#izbor-menija .sppb-tab-content.sppb-nav-pills-content {width: 70%;float: left;}
#izbor-menija .sppb-nav-pills > li {float: none;}
#izbor-menija .sppb-nav-pills > li > a {border-radius: 0;font-size: 17px;text-transform: uppercase;color: #333;}
#izbor-menija #sppb-addon-1488944476913 .sppb-nav-pills > li.active > a,
#izbor-menija #sppb-addon-1488944476913 .sppb-nav-pills > li.active > a:hover,
#izbor-menija #sppb-addon-1488944476913 .sppb-nav-pills > li.active > a:focus {background: none;color: #7a2d35;}
#izbor-menija .sppb-tab-content > .sppb-tab-pane {padding: 0;}
.meni-lista h3 {padding-left: 40px;margin-top: 0;font-size: 20px;font-weight: normal;text-transform: uppercase;letter-spacing: 2px;}
.meni-lista ul,
#izbor-menija .sppb-tab-content ul {list-style-type: none;font-size: 16px;font-weight: 500;padding-left: 40px;}
#izbor-menija .sppb-tab-content ul ul {padding: 0;font-weight: 300;}
#izbor-menija .sppb-tab-content ul li {margin-bottom: 10px;}
#izbor-menija .sppb-tab-content ul ul li {margin-bottom: 0;}
#izbor-menija .sppb-tab-content ul ul li:empty {margin-bottom: 10px;}
.meni-lista .sppb-btn {text-transform: uppercase;}
/* Details */
#sp-main-body {
    padding: 0;
}
article.item {
    padding-top: 30px;
}
article.item h2 {
    font-family: 'Rubin', Arial, sans-serif;
    font-weight: 300;
    margin-top: 35px;
    /*margin-bottom: 30px;*/
    /*color: #7a2d35;*/
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 2px;
    /*text-align: center;*/
}
article.item .entry-image {
    margin-bottom: 30px;
    float: left;
    max-width: 50%;
    margin-right: 30px;
}
article.item .article-info {
    font-size: 14px;
}
.powered {
    display: none;
}
/* Prijatelji */
.portfolio-list .page-header {
    border-bottom: 0;
}
.portfolio-list h1 {
    margin-top: 35px;
    margin-bottom: 10px;
    color: #7a2d35;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 2px;
}
.projects-filter ul {
    text-align: center;
}
.projects-filter a {
    border-radius: 0;
    color: #333;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px;
}
.projects-filter a:hover {
    color: #7a2d35;
    background-color: #e5e5e5;
}
.projects-filter a.selected,
.projects-filter a.selected:hover {
    background: none;
    color: #7a2d35;
}
.portfolio-list .label {
    font-size: 12px; 
    font-weight: 300;
    border-radius: 0;
    position: absolute;
    top: 10px;
    right: 10px;
}
.portfolio-list .label.label-primary {
    background: #d2ac67;
}

/* FOOTER */
#sp-footer {text-align: left;}
.sp-copyright {font-size: 11px;font-weight: normal;text-transform: uppercase;color: #f8f0e5;}
.sp-copyright span {font-weight: 500;}

/* Modals */
#colorbox {border: 3px solid #fff;}
#colorbox,
#cboxContent,
#cboxLoadedContent {border-radius: 16px;}
#cboxTitle {font-family: 'Open Sans', sans-serif;background: #073861;border-bottom: 0;padding: 21px 25px 22px 15px;font-weight: bold;color: #c4c5c5;}
#cboxLoadedContent {margin-top: 65px;padding: 27px 15px 45px 15px;}
#cboxLoadedContent h3 {font-size: 20px;/*letter-spacing: normal;*/text-transform: none;color: #073861;font-weight: normal;margin-top: 17px;margin-bottom: 5px;}
#cboxLoadedContent ul {padding-left: 20px;}
#cboxClose {background: none;color: #c4c5c5;line-height: 20px;width: 20px;height: 20px;top: 23px;opacity: 1;filter: alpha(opacity=100);padding: 0;}
#cboxClose:focus {outline: none;}
#cboxClose:after {content: '×';font-family: 'Open Sans', sans-serif;color: #c4c5c5;position: absolute;top: 0;left: 0;font-size: 37px;}

/* Popup module */
.gafancybox-header {text-align: center;}
.gafancybox-header img {margin: -35px auto 0 auto;max-width: 200px;}
.popup-heading {text-align: center;color: #7a2d35;text-transform: uppercase;letter-spacing: 1.8px;font-weight: bold;}
.gafancybox-wrap .btn.btn-primary {text-transform: uppercase;}

/* Responsive */
@media screen and (max-width: 1024px) {
    #sp-header {height: 60px;}
    #sp-header.menu-fixed {height: 70px;}
    .sp-megamenu-parent >li > a,
    .sp-megamenu-parent >li > span {font-size: 16px;padding: 0 5px;}
    #raspored-tabs .sppb-nav-tabs > li > a {margin: 0 5px;font-size: 16px;}
}
@media screen and (max-width:768px) {
    #offcanvas-toggler {display: block;line-height: 90px;}
    #offcanvas-toggler >i {color: #7a2d35;font-size: 30px;}
    .offcanvas-menu .offcanvas-inner .sp-module {margin-bottom: 30px;}
    .offcanvas-menu .offcanvas-inner .sp-module:first-child {padding: 40px 30px 0 30px;}
    .offcanvas-menu .offcanvas-inner .sp-module {padding: 0 30px 30px 30px;}
    .offcanvas-menu .offcanvas-inner .sp-module ul > li:last-child {border-bottom: 0;}
    #sp-header {height: auto;}
    #sp-header.menu-fixed {height: auto;}
    #sp-header .logo {margin-top: 0;}
    #sp-header.menu-fixed .logo {height: 90px;}

    /* SP Builder Image Block */
    .sppb-section .sppb-addon-container .sppb-addon-image-content .sppb-container .sppb-col-sm-6 {margin: 0;width: 100%;}
    .sppb-section .sppb-addon-container .sppb-addon-image-content .sppb-container .sppb-col-sm-6 .sppb-content-holder {padding: 0 0 50px 0;}

    /* NSP Arts */
    .nspArts,
    .nspLinksWrap {padding: 0;}

    #izbor-menija .sppb-nav {padding-left: 0;}
}
@media screen and (max-width:480px) {
	#sp-header .logo a .sp-default-logo {max-height: 70px;}
    .sp-page-builder .page-content #home-hero {padding: 50px 0 150px 0;}
    .hero-block .sppb-addon-text {line-height: 34px;}

    /* Popup */
    .popup-heading {letter-spacing: 1.4px;font-size: 18px;margin-bottom: 0;text-align: left;}

    /* Pages */
    .sp-page-builder .page-content #hero-section {padding: 100px 0 100px 0!important;}

    /* NSP Arts */
    .nspArt {padding: 0!important;}
    .nspImageWrapper {margin: 0!important;}

    .sp-page-builder .page-content #izbor-menija {padding: 0 0 50px 0!important;}
    #izbor-menija .sppb-nav {width: 100%;margin-bottom: 40px;border-bottom: 3px solid #7a2d35;}
    #izbor-menija .sppb-nav-pills > li {float: left;}
    #izbor-menija .sppb-tab-content.sppb-nav-pills-content {width: 100%;}
    .meni-lista h3,
    .meni-lista ul,
    #izbor-menija .sppb-tab-content ul {padding-left: 0;}
    #izbor-menija .sppb-tab-content > .sppb-tab-pane {padding: 0 20px;}

    .sp-page-builder .page-content #raspored-tabs {padding: 0 0 55px 0!important;}
    #raspored-tabs .sppb-fade.active.in .flyinleft {margin-bottom: 30px;}
    #raspored-tabs .sppb-nav-tabs {margin-bottom: 0px;}
    #raspored-tabs .sppb-nav-tabs > li {display: block;margin-bottom: 5px;}
    #raspored-tabs .sppb-nav-tabs > li > a {margin: 0;}

    .sp-page-builder .page-content #fotogalerije-grid {padding: 50px 0 50px 0!important;}
    #fotogalerije-grid .nspArt {margin-bottom: 20px;}

    .projects-filter a {padding: 5px 15px;display: inline-block;}

    .sp-page-builder .page-content #kontakt-mapa {padding: 0!important;}
    .sp-page-builder .page-content #kontakt-blok {padding: 50px 0 90px 0!important;}
    .sp-page-builder .page-content #kontakt-blok .sppb-text-left {text-align: center;}
    .sp-page-builder .page-content #kontakt-blok form {margin-top: 40px;}

    article.item h2 {margin-top: 20px;font-size: 40px;line-height: 40px;}
    article.item .entry-image {max-width: initial;margin-right: 0;}
}