.f-1 { width: 100%;}
.f-1 .view-content {display: flex;flex-direction: row;border-top-right-radius: var(--radius);border-top-left-radius: var(--radius);overflow: hidden;}
.f-1 .view-content .views-row { flex: 1; position: relative;}
.f-1 .view-content .views-row .image { width: 100%;}
.f-1 .view-content .views-row .image img {width: 100%;display: block;height: auto;}
.f-1 .view-content .views-row .title {width: 100%;position: absolute;bottom: 0;right: 0;}
.f-1 .view-content .views-row .title a { display: block; padding: 14px; font-size: var(--font22px);  color: var(--colorWhite);}
.f-1 .view-content .views-row .category ,
.f-2 .view-content .views-row .category ,
.f-3 .view-content .views-row .category ,
.f-4 .view-content .views-row .category { position: absolute; right: 0; top: 0;}
.f-1 .view-content .views-row .category a , 
.f-2 .view-content .views-row .category a ,
.f-3 .view-content .views-row .category a ,
.f-4 .view-content .views-row .category a { color: var(--colorWhite); display: block; padding: 5px 8px; font-size: var(--font13px); border-top-right-radius: var(--radius); overflow: hidden; background-color: var(--colorAccent); border-bottom-left-radius: var(--radius);}
.f-1 .view-content .views-row .category a , 
.f-2 .view-content .views-row .category a {border-top-right-radius: 0;}

.f-1 .view-content .views-row .image a:before , 
.f-2 .view-content .views-row .image a:before{ -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom,transparent 0,rgba(0,0,0,0.65) 100%); top: auto; height: 75%; width: 100%; z-index: 0;}

.f-2 { width: 100%;}
.f-2 .view-content {display: flex;flex-direction: row;border-bottom-right-radius: var(--radius);border-bottom-left-radius: var(--radius);overflow: hidden;}
.f-2 .view-content .views-row {flex: 1;position: relative;}
.f-2 .view-content .views-row .image {width:100%; display:block;}
.f-2 .view-content .views-row .image img {width:100%;display:block;height: auto;}
.f-2 .view-content .views-row .title {width: 100%;position: absolute;bottom: 0;right: 0;color: var(--colorWhite);}
.f-2 .view-content .views-row .title a {  display: block; line-height: 30px; font-size: var(--font18px); padding: 13px; color: var(--colorWhite);}


.f-3 {width:100%;display:block; position: relative;}
.f-3 .view-content {width:100%;display:flex;flex-wrap:wrap;justify-content: space-between;}
.f-3 .view-content .views-row {flex-basis: 24%;position: relative;margin-bottom:20px;overflow: hidden;}
.f-3 .view-content .views-row .image {width:100%;display:block;margin-bottom:15px;border-radius: var(--radius);overflow: hidden;}
.f-3 .view-content .views-row .image img {width:100%; display:block; height:auto}
.f-3 .view-content .views-row .title {width:100%; margin-bottom: 15px;}
.f-3 .view-content .views-row .title a { width:100%; display:block; font-size:var(--font17px);}
.f-3 .view-content .views-row .lead * ,
.f-4 > div > div > div > div > .view-content .inner-row .lead * {color:var(--colorLead);font-size: var(--font13px);line-height: 21px;}
.f-3 .view-content .views-row .info {display:block;}
.f-3 .view-content .views-row .info .field-content {display:flex;justify-content: space-between;margin-bottom:7px}
.f-3 .view-content .views-row .info .comments-count::before {display: inline-block; background: url(svg/comments.svg); content: ''; width: 13px; height: 13px; margin-left: 10px; position: relative; top: 4px; background-repeat: no-repeat; background-size: 100% 100%;}
.f-3 .view-content .views-row .info .field-content * {font-size: var(--font12px); color:var(--colorLight)}

.f-3 .view-footer {display: flex; justify-content: center; align-content: center; width: 100%; flex-wrap: wrap; margin: 30px 0 40px 0;}
.f-3 .view-footer a { background-color: #39b54a; padding: 7px 25px; border-radius: var(--radius); color: #fff; transition: all .2s; font-size: var(--font14px);}

.region-content-second {display: flex;justify-content: space-between;flex-wrap: wrap;}
.f-4 {flex: 0 0 32%;position: relative;margin-bottom: 30px;}
.f-4 > div > div > div > div > .view-content .inner-row {display:flex; flex-direction:column; position: relative; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.f-4 > div > div > div > div > .view-content .inner-row .image { width: 100%; display: block; margin-bottom: 15px; border-radius: var(--radius); overflow: hidden;}
.f-4 > div > div > div > div > .view-content .inner-row .image img {width:100%; height:auto; display: block;}
.f-4 > div > div > div > div > .view-content .inner-row .title { width: 100%; margin-bottom: 30px;}
.f-4 > div > div > div > div > .view-content .inner-row .title a { width: 100%; display: block; font-size: var(--font17px);}
.f-4 > div > div > div > div > .view-content .inner-row .info {display:block;}
.f-4 > div > div > div > div > .view-content .inner-row .info .field-content {display:flex;justify-content: space-between;margin-bottom:7px}
.f-4 > div > div > div > div > .view-content .inner-row .info .field-content * {font-size: var(--font12px); color:var(--colorLight)}

.f-4 .attachment {width:100%;}
.f-4 .attachment .view-content {display: flex; flex-direction: column;}
.f-4 .attachment .views-row {margin-bottom:20px}
.f-4 .attachment .views-row:last-child {margin-bottom: 0;}
.f-4 .attachment .image {width:100%;display: block;border-radius: var(--radius);overflow: hidden;max-width: 120px;float: right;margin-left: 15px;}
.f-4 .attachment .image img {width:100%;height:auto;display: block;}
.f-4 .attachment .title { width: 100%; }
.f-4 .attachment .title .field-content {    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.f-4 .attachment .post-date * { font-size:var(--font11px); color: var(--colorLight); }
.f-4 .attachment .title a { width: 100%; display: block; font-size: var(--font14px); }

.f-5 {width:100%; position: relative; display: flex; margin-bottom: 25px;}
.f-5 .content-wrapper {width: 100%;}
.f-5 .view-content {width:100%;display:flex;flex-direction:row;flex-wrap:wrap;border-radius: var(--radius); overflow: hidden;}
.f-5 .view-content .views-row {flex:1;position: relative;}
.f-5 .view-content .views-row .image { width:100%; display:block; position:relative;}
.f-5 .view-content .views-row .image img { width:100%; display:block; height:auto;}
.f-5 .view-content .views-row .image a:after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; opacity: .4; background-size: 500% 500%;}
.f-5 .view-content .views-row:nth-child(1) .image a:after { background: linear-gradient(135deg,#292484,#dc4225);}
.f-5 .view-content .views-row:nth-child(2) .image a:after { background: linear-gradient(135deg,#1a2980,#26d0ce);}
.f-5 .view-content .views-row:nth-child(3) .image a:after { background: linear-gradient(135deg,#1d976c,#3cf93d);}
.f-5 .view-content .views-row:nth-child(4) .image a:after { background: linear-gradient(135deg,#e0be00,#dc4225);}
.f-5 .view-content .views-row .category {position: absolute;top: 20px;width: 100%;float: right;right: 0;display: flex;justify-content: center;}
.f-5 .view-content .views-row .category a {color:#fff;background-color: var(--colorAccent) !important;padding: 5px 10px;font-size: var(--font13px);border-radius: var(--radius);}
.f-5 .view-content .views-row .title {position:absolute;bottom:0;width: 100%;display: block;}
.f-5 .view-content .views-row .title a {text-align:center;width:100%;display: block;color: var(--colorWhite);font-size: var(--font18px); padding: 0 15px 20px 15px;}


.f-6 {width:100%;position: relative; display: flex;}
.f-6 .view-content {display:flex;flex-direction:row;flex-wrap:wrap;justify-content: space-between;align-content: center;}
.f-6 .view-content .views-row {flex-basis: 33%;margin-bottom: 0.5%; position:relative; border-radius: var(--radius); overflow: hidden;}
.f-6 .view-content .views-row .image { width:100%; display:block; }
.f-6 .view-content .views-row .image img { width:100%; display:block; height:auto;}
.f-6 .view-content .views-row .title {position:absolute;right:0;top: 40%;font-size: var(--font18px);text-align: center;width: 100%;}
.f-6 .view-content .views-row .title a { color: var(--colorWhite); }
.f-6 .view-content .views-row .image a::after { width: 100%; content: ""; height: 100%; background-color: #00000078; position: absolute; right: 0; top: 0;}





/* Responsive */

@media screen and (max-width:1300px) {
    .f-6 .view-content {justify-content: space-around;}
    .f-6 .view-content .views-row {flex-basis: 49.5%;}
}

@media screen and (max-width:1100px) {
    .f-1 .view-content , .f-2 .view-content {flex-direction: column; border-radius: 0;}
    .f-1 .view-content .views-row , .f-2 .view-content .views-row {max-height: 210px; margin-bottom: 5px; overflow: hidden;}
}


@media screen and (max-width:1000px) {
    .f-4 {flex: 0 0 49%}
}

@media screen and (max-width:800px) {
    .f-6 .view-content .views-row {    flex-basis: 97%; margin-bottom: 7px;}
    .f-6 .view-content .views-row .title {font-size: var(--font17px);}
}

@media screen and (max-width:900px) {
    .f-3 .view-content .views-row {flex-basis: 32.5%;}
    .f-3 .view-content .views-row:nth-last-child(-n+2) { display: none; }
    .f-5 .view-content .views-row {flex-basis: 50%;}
}

@media screen and (max-width:650px) {
    .f-3 .view-content .views-row {  flex-basis: 49%; }
    .f-3 .view-content .views-row:nth-last-child(-n+2) { display: block; }
    .f-4 {flex: 0 0 100%}
}
@media screen and (max-width:500px) {
    .f-3 .view-content .views-row {  flex-basis: 100%; }
    .f-5 .view-content .views-row {flex-basis: 100%;}
}