@media (min-width: 768px) {
    .projects__container {
        overflow: hidden
    }
}
.projects__gallery {
    position: relative
}
@media (min-width: 768px) {
    .projects__gallery {
        overflow: hidden;
        margin-left: -5px;
        margin-right: -5px
    }
    
    .projects__gallery_rows_2:before,
    .projects__gallery_rows_2:after {
        height: 50%
    }
    .projects__gallery_rows_3:before,
    .projects__gallery_rows_3:after {
        height: 33.33%
    }
}
@media (max-width: 767px) {
    .projects__gallery .bx-controls-direction {
        display: none
    }
}
@media (min-width: 768px) {
    .projects__gallery .bx-controls-direction {
        position: absolute;
        z-index: 99;
        left: 0;
        right: 0;
        height: 0
    }
}

.projects__list {
    position: relative;
    font-size: 0
}
.projects__group {
    position: relative;
    text-align: center;
}

.projects__item {
	width:25%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
	height:320px;
	overflow:hidden;
}

@media (min-width: 768px) {
    
}

.project-box {
    position: relative;
    display: block;
	height:320px;
}
@media (min-width: 768px) {
    .project-box {
        padding-left: 5px;
        padding-right: 5px
    }
}
.project-box__image {
    display: block;
    width: 100%
}
.project-box__caption {
    transition: opacity .35s ease-in-out;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    text-align: center;
	padding-bottom:20px;
}
@media (max-width: 767px) {
    .project-box__caption {
        padding: 10px;
        background: #f30
    }
}
@media (min-width: 768px) {
    .project-box__caption {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 5px;
        right: 5px;
        opacity: 0;
        padding: 15px 5%
    }
    .project-box__caption:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        background: #ff8f00;
        opacity: .8;
        z-index: 1
    }
    
}
@media (min-width: 768px) {
    .project-box:hover .project-box__caption {
        opacity: 1
    }
}
.project-box__name {
    color: #fff;
    display: block
}

.project-box__name h2{
    color: #fff;
   	margin:0px;
	padding:0px;
	text-transform:uppercase;
	font-size:20px;
	font-family:"UTM_AvoBold";
}
@media (max-width: 767px) {
    .project-box__name {
        font-size: 15px
    }
}
@media (min-width: 768px) {
    .project-box__name {
        font-size: 18px;
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        top: 84px;
        left: 5%;
        right: 5%;
        z-index: 3
    }
}
.project-box__text {
    padding: 8px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    display: block
}

.project-box__text a{
    color: #fff;
    font-size: 14px;
}

.project-box__text a:hover{
    color: #222;
}
@media (min-width: 768px) {
    .project-box__text {
        position: absolute;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        top: 105px;
        left: 5%;
        right: 5%;
        z-index: 3
    }
}

.project-box__type {
    padding: 8px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    display: block
}
@media (min-width: 768px) {
    .project-box__type {
        position: absolute;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        top: 135px;
        left: 5%;
        right: 5%;
        z-index: 3
    }
}