.portfoliobox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.portfoliobox .portfolioitem {
    max-height: 268px;
	 -webkit-box-flex: 0;
    -ms-flex: 0 1 25%;
    flex: 0 1 25%;
	    display: flex;
    padding: 0;
    margin-bottom: 0;
	overflow: hidden;
}

.portfoliobox .portfolioitem .articletip {
    width: 100%;
    padding: 0;
}

.articletip {
    height: 100%;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    text-decoration: none;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding: 0;
}

.articletip, .articletip img,  video {
    max-width: 100%;
}


.portfoliobox .portfolioitem .articletip .preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity ease .3s,visibility ease .3s;
    transition: opacity ease .3s,visibility ease .3s;
}


.portfoliobox .portfolioitem .articletip .preview video, .readmore .articletip:hover .img {
    width: 100%;
    height: 100%;
}
.portfoliobox .portfolioitem .articletip .preview video{
	
	object-fit: cover;
	
}

.portfoliobox .portfolioitem .articletip .preview img, .portfoliobox .portfolioitem .articletip img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}


.portfoliobox .portfolioitem .articletip .holder {
    background: 0 0;
    min-height: 0;
    width: 100%;
    height: 100%;
 position:absolute;
    left: 0;
    top: 0;
    padding: 0;
	    box-sizing: border-box;
		    z-index: 1;
}

.articletip .holder{
    -webkit-transition: .3s ease;
    transition: .3s ease;
    width: 100%;
}

.portfoliobox .btn-more, .portfoliobox .portfolioitem .articletip .holder .more {
    display: none;
}

.articletip .holder .more {
    -webkit-transition: .3s ease;
    transition: .3s ease;
    opacity: 0;
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.articletip .holder .more svg {
    width: 18px;
    height: 15px;
    fill: #fff;
}

a.articletip .play {
    opacity: 0;
}


.portfoliobox .portfolioitem .articletip:hover .holder {
     background: rgb(40 40 40 / 31%);
}


a.articletip:hover .play{opacity:0.8}

.articletip .play, a[data-fancybox] .play {
    width: 80px;
    height: 80px;
background: linear-gradient( 
75.48deg
 ,#c3092c -20.85%,#c3092c 108.94%);
   box-shadow: 0 4px 29px rgb(195 9 44);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    position: absolute;
    z-index: 3;
    top: 50%;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    left: 50%;
}

.articletip .play svg, a[data-fancybox] .play svg {
    width: 20px;
    height: 24px;
    fill: #fff;
}


.articletip .play:hover, a[data-fancybox] .play:hover {
    -webkit-box-shadow: 0 0 0 #000;
    box-shadow: 0 0 0 #000;
}

.portfoliobox .portfolioitem .articletip .holder:after, .portfoliobox .portfolioitem .articletip:hover .holder:after {
    width: 105%;
    height: 105%;
}



.articletip:hover .holder .more, .articletip:hover .holder:after {
    opacity: 1;
}

.portfoliobox .portfolioitem .articletip:hover .preview {
    opacity: 1;
    visibility: visible;

}

@media screen and (min-width: 320px) and (max-width: 1199px){
.portfoliobox .portfolioitem {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
}
}