/*******************portfolio - single 1 - pocetak - mozda izbrisat******************************************/	
/*******************portfolio - single 1 - pocetak - mozda izbrisat******************************************/	
/*******************portfolio - single 1 - pocetak - mozda izbrisat******************************************/
/*******************portfolio - single 1 - pocetak - mozda izbrisat******************************************/







/* Contact Widget
====================================*/
.contact-details-alt{padding:0;}
.contact-details-alt li{list-style:none;}
.contact-details-alt li p strong { color:#fff; float: left; margin: 0;font-size:12px;width:25%;}
.contact-details li p strong { color:#666; float: left; margin: 0 5px 5px 0; }
.contact-details-alt li {
    margin: 0 0 5px 0;
}
.contact-details p,
.contact-details li,
.contact-details a {color: #666;}
.contact-details-alt p {
    line-height: 18px;
    width: 100%;
    margin:0;
}
.contact-details-alt p a {
    color: #FFFFFF;
    font-weight: 700;
    font-size:12px;
}
.contact-details-alt p a:hover {
    color: #919191;
}
.contact-details-alt li i {
    float: left;
    font-size: 12px;
    margin: 2px 0 0 0 ;
    width: 15px;

}
.widget_info_contact{padding:0;margin-top:20px;}
.widget_info_contact li{list-style:none;}
.widget_info_contact li p strong { color:#666; float: left; margin: 0 5px 5px 0;font-size: 12px;width:20%;}
.widget_info_contact li {
    margin: 0 0 5px 0;
}
.widget_info_contact p {
    margin: 0 0 0 20px;
    line-height: 18px;
    overflow:hidden;
}
.widget_info_contact p a {
    color: #666;
    font-weight: 600;
    font-size: 12.5px;
}
.widget_info_contact p a:hover {
    color: #919191;
}
.widget_info_contact li i {
    float: left;
    margin: 1px 0 0 0;
}


/* ==================================================
   30. CAROUSEL
================================================== */
.porDetCarousel,.porDet2Carousel {
    margin-bottom: 40px;
    overflow: hidden;
}
.carousel-content, .porDetCarousel, .porDet2Carousel {position: relative;}
.carousel-item {
    width: 100%;
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;    left: 0;
}
.carousel-item.active {
    display: block;
    visibility: visible;
    position: static;
}
.carousel-item.current {
    left: 0;
    right: 0;
    visibility: visible;
    z-index: 1;
}
.carousel-item {
    max-width: 100%;
    display: block;
}
.carousel-control {
    position: absolute;
    top: 0;		left: 0;
    bottom: 0;	right: 0;
    overflow: hidden;
    width:100%;
}

.porDetCarousel:hover .carousel-prev { left: 10px; }
.porDetCarousel:hover .carousel-next { right: 10px; }
.porDet2Carousel:hover .carousel-prev { left: 10px; }
.porDet2Carousel:hover .carousel-next { right: 10px; }
.carousel-prev, .carousel-next {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 45%;
    left: -40px;
    z-index: 2;
    background: #666;
    border-radius: 2px;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease, left 0.2s ease, right 0.2s ease;
    transition: background-color 0.2s ease, left 0.2s ease, right 0.2s ease;
}
.carousel-next {
    left: auto;
    right: -40px;
}
.carousel-prev:hover, .carousel-next:hover {
    background: #555;
}
.carousel-prev:before, .carousel-next:before {
    content: '\f104';
    display: block;
    text-align: center;
    line-height: 40px;
    font: 20px/40px 'FontAwesome';
    color: #fff;
}
.carousel-next:before {
    content: '\f105';
}
.carousel-next:hover:before,
.carousel-prev:hover:before{color: #fff;}
.carousel-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transition: bottom 0.2s ease;transition: bottom 0.2s ease;
    -webkit-transform: translateX(-50%);transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    line-height: 50px;
}
.carousel-pagination li {
    background:rgba(0, 0, 0, 0.5);
    cursor: pointer;
    float: left;
    height: 6px;
    margin: 0 2px;
    width: 20px;
}
.carousel-pagination li.active {
    background: #ff0000;
}




.owl-carousel .option a.fa{
    font-size: 16px;
    height: 35px;
    line-height: 32px;
    width: 35px;
}
.owl-carousel .option h5{
    font-size: 18px;
}
.owl-carousel .option span{
    font-size: 15px;
}
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
	margin-top: 40px; /* 26.11.2017 - DODANO ZBOG POMAKA OD NASLOVA REFERENCE NA INDEX.HTML */
}

.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}

/* owl-carousel navigation control */
.owl-controls{
    position: absolute;
    top: -60px;
    right: 0;
}

.owl-prev,
.owl-next{
    width:23px;
    height:23px;
    display: inline-block;
    text-align:center;
    background: #F2F2F2;
    border-radius: 0;
}
.owl-next{
    margin-left: 1px;
}
.owl-prev:hover,
.owl-next:hover{
    background: #777;
    color: #fff;
}
.owl-prev:after,
.owl-next:after{
    font-family: 'FontAwesome';
    content: "\f104";
    font-size: 20px;
    line-height: 22px;
}

.owl-next:after{
    content: "\f105";
}

.recent-item .touching {width: 100%;}

.owl-carousel .option a.fa{
	font-size: 16px;
	width: 40px;
	height: 40px;
	line-height: 35px;
}
.owl-carousel .owl-item{
    float: left;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
}




/*******************portfolio za donji slider referenci******************************************/


.option h5{
    margin:0 0 5%;
    color: #fff;
    font-size: 21px;
}
.option span{
    display: block;
    margin-top: 4%;
    font-size: 18px;
}

.option a.fa {
    background-color: transparent;
    border-width: 2px;
    color: #ffffff;
    font-size: 18px;
    height: 46px;
    line-height: 43px;
    width: 46px;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
}


.option a.fa:hover{
    background-color: #fff;
    color:rgba(114, 124, 181, 0.85);
    transition:all 0.3s ease-in-out 0s;
}
.option a.fa-search{
    margin-right: 1%;
}
.option a.fa-link{
    margin-left: 1%;
}

/*---------- Large-images CSS ----------*/
.large-images .option h5{
    font-size:25px;
}
.large-images .option span{
    font-size:20px;
}

/*---------- Small-images CSS ----------*/
.small-images .option a.fa,
.owl-carousel .option a.fa{
    font-size: 16px;
    height: 35px;
    line-height: 32px;
    width: 35px;
}

.small-images .option h5,
.owl-carousel .option h5{
    font-size: 18px;
}
.small-images .option span,
.owl-carousel .option span{
    font-size: 15px;
}
.small-images .inner > div {
    height: 50%;
}

/* ----------------------------------------------------
  MASONRY PORTFOLIO STYLES
------------------------------------------------------- */

.masonry_wrapper {
    overflow:hidden;
    margin:0;
}

.masonry_wrapper .item img {
    height: auto !important;
    height: 100% !important;
    width: 100%;
    position: relative;
    z-index: -2;
}

.mixed-container .item {
    padding:10px 5px !important;
    margin:0 !important;
    height: auto !important
}

.mixed-container .item img{
    padding:0 !important;
    width:100%;
    margin:0 !important;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
.mixed-container .item img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
.item figure {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}

.item figure img {
    position: relative;
    display: block;
    opacity: 1;
}
.large-images .masonry_wrapper .inner > div {
    height: 50%;
    width: 90%;
}
.medium-images .masonry_wrapper .inner > div {
    height: 60%;
    width: 90%;
}
.small-images .masonry_wrapper .inner > div {
    height: 70%;
    width: 90%;
}

.inner > div {
    position:absolute;
    width: 90%;
    height: 45%;
    top: 0; left: 0; bottom: 0; right: 0;
    margin:auto;
}

/* Hover Effect on Portfolio Image
====================================*/

.box {
    background: #ddd;
    cursor: pointer;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
}
.box:first-child {
    margin: 0px;
	margin-right: 10px;
}
.portfolio-centered .box{
    margin: 0;
}
.inner {
    background:rgba(228, 16, 16, 0.85);
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-transform: translate3d(-100%, 0, 0);
    -webkit-animation-duration: 0.15s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;

    -moz-transform: translate3d(-100%, 0, 0);
    -moz-animation-duration: 0.15s;
    -moz-animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;

    transform: translate3d(-100%, 0, 0);
    animation-duration: 0.15s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* Top */
.box.hover-enter-top .inner {
    -webkit-animation-name: slide_in_top;
    -moz-animation-name: slide_in_top;
    animation-name: slide_in_top;
}
.box.hover-leave-top .inner {
    -webkit-animation-name: slide_out_top;
    -moz-animation-name: slide_out_top;
    animation-name: slide_out_top;
}

/* Right */
.box.hover-enter-right .inner {
    -webkit-animation-name: slide_in_right;
    -moz-animation-name: slide_in_right;
    animation-name: slide_in_right;
}
.box.hover-leave-right .inner {
    -webkit-animation-name: slide_out_right;
    -moz-animation-name: slide_out_right;
    animation-name: slide_out_right;
}

/* Bottom */
.box.hover-enter-bottom .inner {
    -webkit-animation-name: slide_in_bottom;
    -moz-animation-name: slide_in_bottom;
    animation-name: slide_in_bottom;
}
.box.hover-leave-bottom .inner {
    -webkit-animation-name: slide_out_bottom;
    -moz-animation-name: slide_out_bottom;
    animation-name: slide_out_bottom;
}

/* Left */
.box.hover-enter-left .inner {
    -webkit-animation-name: slide_in_left;
    -moz-animation-name: slide_in_left;
    animation-name: slide_in_left;
}
.box.hover-leave-left .inner {
    -webkit-animation-name: slide_out_left;
    -moz-animation-name: slide_out_left;
    animation-name: slide_out_left;
}

/* Top */
@-webkit-keyframes slide_in_top {
    0%   { -webkit-transform: translate3d(0, -100%, 0); }
    100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_top {
    0%   { -webkit-transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(0, -100%, 0); }
}
@-moz-keyframes slide_in_top {
    0%   { -moz-transform: translate3d(0, -100%, 0); }
    100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_top {
    0%   { -moz-transform: translate3d(0, 0, 0); }
    100% { -moz-transform: translate3d(0, -100%, 0); }
}
@keyframes slide_in_top {
    0%   { transform: translate3d(0, -100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_top {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -100%, 0); }
}

/* Right */
@-webkit-keyframes slide_in_right {
    0%   { -webkit-transform: translate3d(100%, 0, 0); }
    100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_right {
    0%   { -webkit-transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(100%, 0, 0); }
}
@-moz-keyframes slide_in_right {
    0%   { -moz-transform: translate3d(100%, 0, 0); }
    100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_right {
    0%   { -moz-transform: translate3d(0, 0, 0); }
    100% { -moz-transform: translate3d(100%, 0, 0); }
}
@keyframes slide_in_right {
    0%   { transform: translate3d(100%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_right {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(100%, 0, 0); }
}

/* Bottom */
@-webkit-keyframes slide_in_bottom {
    0%   { -webkit-transform: translate3d(0, 100%, 0); }
    100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_bottom {
    0%   { -webkit-transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(0, 100%, 0); }
}
@-moz-keyframes slide_in_bottom {
    0%   { -moz-transform: translate3d(0, 100%, 0); }
    100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_bottom {
    0%   { -moz-transform: translate3d(0, 0, 0); }
    100% { -moz-transform: translate3d(0, 100%, 0); }
}
@keyframes slide_in_bottom {
    0%   { transform: translate3d(0, 100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_bottom {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 100%, 0); }
}

/* Left */
@-webkit-keyframes slide_in_left {
    0%   { -webkit-transform: translate3d(-100%, 0, 0); }
    100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slide_out_left {
    0%   { -webkit-transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(-100%, 0, 0); }
}
@-moz-keyframes slide_in_left {
    0%   { -moz-transform: translate3d(-100%, 0, 0); }
    100% { -moz-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slide_out_left {
    0%   { -moz-transform: translate3d(0, 0, 0); }
    100% { -moz-transform: translate3d(-100%, 0, 0); }
}
@keyframes slide_in_left {
    0%   { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes slide_out_left {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}






.arrow-left, .arrow-right{
    width: 23px;
    height: 23px;
    display: inline-block;
    float: left;
    background-color: #f2f2f2;
    color: #666;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
.arrow-left i, .arrow-right i{
    font-size: 14px;
    display: block;
    line-height:16px;
    padding-top: 4px;
    text-align: center;
}
.arrow-left.active, .arrow-right.active{
    background-color: #bdc3c7;
    color: #f2f2f2;
    cursor: pointer;
}
.arrow-left.active:hover,
.arrow-right.active:hover { background-color: #777;}




/* ==================================================
   13. Recent Works & Post News Carousel
================================================== */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}

/* owl-carousel navigation control */
.owl-controls{
    position: absolute;
    top: -60px;
    right: 0;
}

.owl-prev,
.owl-next{
    width:23px;
    height:23px;
    display: inline-block;
    text-align:center;
    background: #F2F2F2;
    border-radius: 0;
}
.owl-next{
    margin-left: 1px;
}
.owl-prev:hover,
.owl-next:hover{
    background: #777;
    color: #fff;
}
.owl-prev:after,
.owl-next:after{
    font-family: 'FontAwesome';
    content: "\f104";
    font-size: 20px;
    line-height: 22px;
}

.owl-next:after{
    content: "\f105";
}

/*******************portfolio - single 1 - end - mozda izbrisat******************************************/



/*******************portfolio - single 1 - end - mozda izbrisat******************************************/
/********************************************************************************************************/
/********************************************************************************************************/
/********************************************************************************************************/




/********************************************************************************************************/
/********************************************************************************************************/
/*******************reference - start - mozda izbrisat******************************************/



/* ========================================================== */
/*  6. PORTFOLIO/PROJECTS                                     */
/* ========================================================== */

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/* Isotope CSS3 transitions */
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
        -ms-transition-property: height, width;
         -o-transition-property: height, width;
            transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
         -o-transition-property: top, left, opacity;
            transition-property: transform, opacity;
}

/* Disabling Isotope CSS3 transitions */
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

/* Disable CSS transitions for containers with infinite scrolling */
.isotope.infinite-scrolling {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

#portfolio{
    width:100%;
    padding-bottom:120px;
    position:relative;
    z-index:9;
}
#filter {
    margin: 0 auto 25px;
    position: relative;
    text-align: center;
    overflow: hidden;
}
#filter li {
    display: inline-block;
    list-style: none outside none;
    margin: 0 1px 10px;
}
#filter li a{
    color:#505354;
    padding:10px 20px;
    font-size:14px;
    position: relative;
    line-height: 14px;
    font-family: Arial, Helvetica, sans-serif;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
    transition: all .50s ease-in-out;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
    outline:none;
    text-decoration: none;
}

#filter li.selected a, #filter li a:hover{
    color:#ff0000;
}
#filter li.selected a:after, #filter li a:hover:after {
    background: #ff0000;
    width: 100%;
}
#filter  li a:after,
#filter  li a:before {
    transition: all .5s;
}
#filter li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width:0%;
    content: '.';
    color: transparent;
    height: 2px;
}

#filter li a:hover:after {
    width: 100%;
}

/*******************reference - end - mozda izbrisat******************************************/
/********************************************************************************************************/
/********************************************************************************************************/