.c-portfolio-head{
    position:fixed !important;
}

#project-header-section{
    background-attachment:fixed;
}

#project_info_details {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px;
    transition: all .3s cubic-bezier(.25,.8,.25,1);
}

#project_info_details:hover, #project_info_details:focus{
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 10px 1px;
}

#client-img img {
    width: 150px;
}

.imgcol img {
    object-fit: contain;
}

.imgcol2 img{
    width:100%;
    height:60vh;
    margin-bottom: -35px;
}

.imgcol3 img{
    width:100%;
    height:40vh;
    opacity:1;
    overflow:hidden;
    transform: scale(1.0);
    transition: all 0.6s;
}

/*.hero-box-columns-2 > div{
    height:60vh;
}

.hero-box-columns-3 > div{
    height:40vh;
}*/

.hero-box-columns- > div{
    height:100vh;
}

.mejs-poster{
    background-size: cover !important;
}

.wp-video{
    width:100% !important;
    display:flex;
    justify-content:center;
}

.ul-center{
    display: flex;
    justify-content: center;
}

.wpb_wrapper ul{
    padding-left:10px;
}

.wpb_wrapper li{
    margin-bottom:5px;
}

.wpb_wrapper p{
    font-size: 14px;
    font-family: 'Gotham-Light';
}

.wpb_wrapper ul{
    font-size: 16px;
    font-family: 'Gotham-Light';
    font-weight:700;
}

.wpb_wrapper h1, h2{
    letter-spacing:1px;
}

.wpb_wrapper button{
    font-family: 'Gotham-Bold';
    font-size: 12px;
    text-transform:uppercase;
}

.hero-box img, .hero-box .hero-box-img, .hero-box figcaption *{
    cursor:pointer !important;
}

.hero-box-text h3 {
    top:25% !important;
}

.hero-box.hero-box-effect-duke .hero-box-text{
    opacity:0;
}

.hero-box figcaption{transition: all 0.35s !important;}
.hero-box figcaption:hover {background: rgb(3,31,40) !important;}

.hero-box figcaption:hover .hero-box-text{
    opacity:1;
}

.hero-box-text p{
    line-height:1.25 !important;
}
.animated{
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards !important;
}

.img_carousel img{
    width:100% !important;
    height:auto;
    max-height:100%;
    object-fit:contain;
}

@media (min-width: 1200px),{ 
    .img_carousel img{
        height:100vh;
    }
    
    .imgcol img {
    height: 95vh;
    object-fit: contain;
    overflow: hidden;
    /*margin-bottom: -35px;*/
    }
}

@media (min-width:415px) and (max-width: 575px), (min-width: 576px) and (max-width: 767px), (min-width: 769px) and (max-width: 992px), (min-width: 769px) and (max-width: 1023px)  {
     
    .img_carousel img{
        height:100vh; 
    }

}


.vc_images_carousel .vc_carousel-control{
    font-size:80px !important;
}

a.vc_left, a.vc_right {
    color:#f7f7f7 !important;
}

a.vc_left:hover, a.vc_right{
    color:#ffffff !important;
}

.vc_carousel-control{
    margin-top:-60px !important;
}

.icon-prev, .icon-next{
    font-size:80px !important;
}

.icon-scroll,
.icon-scroll:before{
  position: absolute;
  left: 50%;
}

.icon-scroll{
  width: 35px;
  height: 55px;
  margin-left: -20px;
  bottom: 0%;
  margin-bottom: 30px;
  box-shadow: inset 0 0 0 1.5px #fff;
  border-radius: 25px;
}

.icon-scroll:before{
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}

@keyframes scroll{
  0%{
    opacity: 1;
    }
  
  100%{
    opacity: 0;
    transform: translateY(30px);
    }
}
.project_title{
    min-height:60vh;
}

.hide-header{
    opacity:0;
    
}

.visible-header{
    opacity:1;
    transform: translateY(0%) !important;

}

@media (max-width:767px){
.visible-header{
    transform: none !important;

    }
    .bg-header{
        padding-top:0px !important;
    }
}

.bg-header{
    background: rgba(3, 31, 40, 0.9);
}

@media (min-width:768px){
   .bg-header{
    padding-top:8px !important;
    } 
}

.c-portfolio-head{
    position: fixed !important;
    transition: .50s all ease-in-out;
    -webkit-transition: .50s all ease-in-out;
}

.c-portfolio-head.hide-header{
    transform: translateY(-100%);
    
}

.pulse{
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
    animation-duration:1.2s !important;
    -webkit-animation-duration:1.2s !important;
}

h1.fadeIn, .wpb_text_column.fadeIn{
    animation-duration: 1.5s !important;
    -webkit-animation-duration: 1.5s !important;
}

@media (min-width:1025px){
    
        .project-controls {
        position: fixed;
        background: #a39784; /* Old browsers */
        top: 50%;
        width: auto;
        height: auto;
        margin-top: -25px;
        border-radius: 50px;
        text-align: center;
        z-index: 50;
        color: #ffffff;
        line-height: 40px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.33s;
        opacity:.4;
        }
    
    .project-controls::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50px;
    }
    
    .project-controls:hover {
    transition: all 0.33s;
    opacity:1;
    }

    .project-control-left {
        left: 20px;
    }
    
    .project-control-right {
        right: 20px;
    }
    
    .project-control-close {
        right: 40px;
        top: 30px;
        margin: 0;
        height: auto;
        width: auto;
        display:none;
    }
    
    .project-control-close .close-1 {
        width: 24px;
        height: 5.3px;
        border-radius: 1px;
        transform: rotate(135deg);
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        background: #ffffff;
        transition: all 0.33s;
    }
    
    .project-control-close .close-2 {
        width: 24px;
        height: 5.3px;
        border-radius: 1px;
        transform: rotate(-135deg);
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        background: #ffffff;
        transition: all 0.33s;
    }
    
    .project-control-close:hover div {
        width: 24px;
        transform: rotate(0deg);
        transition: all 0.33s;
    }
    
    .scrollup{
    
    position: fixed;
    display:none;
    bottom: 30px;
    right: 40px;
    border-radius:50%;
    font-size: .8332em;
    opacity:.4;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition:.35s all ease-in-out;
    -webkit-transition:.35s all ease-in-out;
    }
    
    .scrollup i.fa {
    font-weight: 600;
    background: white;
    border-radius: 50%;
    line-height: .87;
    }
    
    .flexslider:hover .flex-prev{
    left:25px !important;
    }

    .flexslider:hover .flex-next{
    right:25px !important;
    }
}
    
@media (max-width:1024px){
    .scrollup{
    display:none !important;
    }
    .flexslider:hover .flex-prev{
    left:-25px !important;
    }

    .flexslider:hover .flex-next{
    right:-25px !important;
    }
    
    .project-control-close span {
    display: none;
    }
}    

    .scrollup:hover{
    opacity:1;
    }

    a.scrollup{
    color:#a39784 !important;
    }

    .fa-chevron-circle-up:before {
    font-size:4em;
    }
    
.flexslider{
    border:none !important;
    cursor:pointer;
    border-radius: 0px !important;
    box-shadow: none !important;
    margin-bottom:0px !important;
}

.wpb_flexslider .flex-control-nav{
    margin-top:-35px !important;
}

.flex-direction-nav a{
    text-shadow:none !important;
}

.hero-box.hero-box-effect-duke:hover img, .hero-box.hero-box-effect-duke:hover .hero-box-img{
    -moz-transform: scale(1.1) !important;
    -ms-transform: scale(1.1) !important;
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
    
}

.container{
    margin-left:auto !important;
    margin-right:auto !important;
}

#project_info{
    min-height:40vh;
}

#project_info_details .vc_btn3 {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
}

.project-grid-btn a {
    color: #d5c7b1 !important;
    font-family: 'Gotham-Bold';
    margin-top:-30px !important;
    background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0) 0%,rgba(0,0,0,.0)) !important;
    background-image: -o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.0) 0%,rgba(0,0,0,.0)) !important;
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.0) 0%,rgba(0,0,0,.0)) !important; 
}

.project-grid-btn a, .project-grid-btn a:focus, .project-grid-btn a:hover{
    border:none !important;
}

.vc_gitem-zone{
    background-color: rgba(3, 31, 40, 0.70);
}

.vc_gitem-zone-b .vc_gitem-row-position-middle{
    -webkit-transform: translate(0,200%) !important;
    -ms-transform: translate(0,200%) !important;
    -o-transform: translate(0,200%) !important;
    transform: translate(0,200%) !important;
    transition: transform .6s ease-in-out;
}

.vc_grid-item-mini:hover .vc_gitem-zone-b .vc_gitem-row-position-middle {
    transform: translate(0,-50%) !important;
}

#scroll-up{
    height:0px;
}

.vc_grid-filter.vc_grid-filter-color-chino>.vc_grid-filter-item.vc_active, .vc_grid-filter.vc_grid-filter-color-chino>.vc_grid-filter-item:hover {
    background-color: transparent !important;
}

.vc_grid-filter-item {
    text-transform:uppercase;
    color: #c7b299 !important;
    padding: 1px 20px !important;
    letter-spacing: 3px;
    font-size: 11.5px !important;
}

.vc_grid-filter-item span {
    transition: border-bottom .3s ease !important;
    border-bottom: 1px solid transparent;
    padding-bottom: 10px !important;
}

.vc_grid-filter-item span:hover, .vc_grid-filter-item span:active {
    border-bottom: 1px solid #ffffff;
}

@media (min-width: 768px) {
    .vc_grid-filter-select .vc_grid-styled-select {
    border: 1px solid #CEC2AB;
    color: #c7b299;
    text-transform: uppercase !important;
    }
    .vc_grid-filter-select .vc_grid-styled-select select{
        margin-right:-30px !important;
        padding:5px 10px !important;
        font-weight:500;
        letter-spacing:.5px;
    }
    
    select{
        text-transform:uppercase !important;
    }
}

@media (max-width: 767px) {
    .vc_grid-filter-select .vc_grid-styled-select {
    text-transform: uppercase !important;
    }
    .vc_grid-filter-select .vc_grid-styled-select select{
        padding:5px 10px !important;
        font-weight:500;
        letter-spacing:.5px;
        border-radius:0px;
        border: 1px solid #CEC2AB;
        color: #c7b299;
        background-color:transparent;
    }
    
    select{
        text-transform:uppercase !important;
    }
    
    .vc_gitem-post-data-source-post_title h4 {
    padding-bottom: .5em;
    font-size: 22px !important;
    }
    
    #heading-h1 {
    font-size: 2.3em !important;
    margin-top: 0;
    }
    
    .icon-scroll{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}

}

    .vc_gitem-post-meta-field-project_title {
    font-size: 30px;
    color: #ffffff;
    line-height: 1.1;
    text-align: center;
    font-family: Playfair Display;
    font-weight: 400;
    font-style: normal;
    padding: 10px 0;
    }

    .vc_gitem-post-meta-field-project_alt_title {
    font-size: 14px;
    color: #ffffff;
    line-height: 1.1;
    text-align: center;
    font-family: Gotham-Light;
    font-style: normal;
    padding: 0 10px 10px;
    margin-bottom: 15px;
    }
    
    .project-grid-btn {
    margin-bottom: 0;
    }
    
    .flex-control-paging li a, .flex-direction-nav a {
    -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
            transform: scale(.6);
    }
    
    .flexslider .slides {
    position: absolute;
    }