.swipwrap{background: red; padding: 40px; margin: 40px 0; }
.news_swip{}
h2.newstit{font-weight: bold; font-style: italic; color: white; margin-top: 0;}
.news_swip_wrap{}
.news-slide{display: inline-block;}
.news-slide a{display: block; position: relative; padding-bottom: 66%; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden;}

.news-slide a .cap{position: absolute; left: 0; bottom: 0;}
.news-slide a .cap h3{background: rgba(255,0,0,0.8); font-weight: 400; margin: 0; display: inline-block; color: white; text-decoration: none; padding: 5px 10px;}
.news-slide a .cap p{padding: 0px 10px; display: inline-block; background: rgba(255,255,255,0.8); color: #444; margin-bottom: 0;}


.news-slide a:before{    position: absolute;
    z-index: 9;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(255, 255, 255, 0.2);    content: '';    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;   -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -110%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -110%, 0);}

.news-slide a:hover:before {
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 110%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 110%, 0);}


ul.newslist{list-style: none; padding: 0; column-count: 2; column-gap: 40px;}
ul.newslist li{margin-bottom: 10px;}
ul.newslist li article{display: inline-table;}

ul.newslist li .left, ul.newslist li .right{display: table-cell; vertical-align: middle;}

ul.newslist li .article .left .img{ width: 250px; background-size: cover; padding-bottom: 100%; position: relative; overflow: hidden; opacity: 0.85;
	     -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
ul.newslist li .article:hover .left .img{opacity: 1.0;}

ul.newslist li .article .left .img:before{    position: absolute;
    z-index: 9;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(255, 255, 255, 0.2);    content: '';    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;   -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -110%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -110%, 0);}

ul.newslist li .article:hover .left .img:before {
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 110%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 110%, 0);}


ul.newslist li .article .left{width: 30%;}
ul.newslist li .article a{text-decoration: none; color: black;}
ul.newslist li .article .right{ padding: 20px; background: rgba(240,240,240); width: 100%;
     -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

ul.newslist li .article a h3{margin-top: 0; color: red; margin-bottom: 5px;}


ul.newslist li .article a:hover .right{background: red; color: white;}

ul.newslist li .article a:hover .right h3{color: black;}

ul.newslist li .article .footer{font-size: 12px;}


@media only screen and (max-width: 1200px) {
	ul.newslist li .article .left .img{ width: 200px;}
}

@media only screen and (max-width: 900px) {
	ul.newslist{column-count: 1;}
}

@media only screen and (max-width: 600px) {

ul.newslist li .article .left, ul.newslist li .article .right{display: block; box-sizing: border-box;}
ul.newslist li .article .left .img{width: 100%; padding-bottom: 56%; height: 0;}
}