#readcol { display: flex; flex-wrap: wrap;  box-sizing: border-box; }

.readitem { width: calc(25% - ((24px * 3) / 4));  margin-right: 24px; margin-bottom:24px; display: flex;flex-direction: column; }
.readitem a {flex: 1; display: flex;flex-direction: column; background: #ecf9f1; background: #333; color: white }
.readitem a:hover {  background: var(--green); color: white; text-decoration: none !important; }
.readitem div { padding:20px; }

div.bignews h3 { color:#00ccff; font-size:2.8em;  }
div.bignews a h3{ color:#00ccff; }

.readitem p.cattitle {  background-color:var(--green);
    padding: 0 5.98802395209581% 0 5.98802395209581%;
    line-height: 2.8;
    font-family: TGC, sans-serif;
    font-weight: bold;
    color: #FFF;
    font-size: 1.8em;
    margin: 0;
}

.readitem p.cattitle span {
    background-position: left center;
    background-size: 50px 50px;
    display: block;
    position: relative;
    /*padding-left: 45px;*/

}
.readitem a:hover p.cattitle { background-color:#333; }

.readitem picture { width: 100%; height: 0; padding-bottom:115.8682634730539%;
    position: relative;background: #666666;
    display: block; width: 100%; height: 0; overflow: hidden;
}

.readitem picture img{
    position: absolute;
    width: calc(100% + 2px); height:  calc(100% + 2px); left: 0; top: 0; object-fit: cover;
}


.readitem:nth-child(4n+4) { margin-right: 0; }



#resourceinfo { display: flex; }
#resourceinfo>a:first-child{ display: block; width: calc(50% - 12px); max-width: 320px; margin: 0 24px 24px 0; }
#resourceinfo>div{ flex: 1;   margin: 0 0 24px 0;  }

@media all and (max-width: 500px) {
    .readitem { margin-right: 4% !important; width: 100%;}
    #resourceinfo { flex-wrap: wrap; }
    #resourceinfo>a:first-child{  width: 100%; max-width: 999px; margin: 0 0 24px 0; }
    #resourceinfo>div{ order:-10;}
    }

#resourceinfo>a picture{
    position: relative;
    display: block; width: 100%;
}

#resourceinfo>a picture img{

    width: 100%; height: auto;  display: block;
}
#resourceinfo>div .dl { font-family: TGC, sans-serif; line-height:1; font-weight:bold; font-size: 2.4em; margin-top: 1em;  }

#resourceinfo>div .dl a {  color:#000; text-decoration:none !important;    background:var(--green); display: inline-flex; align-items : center;  padding: 10px 20px; }

#resourceinfo>div .dl a::before { width:40px; min-width:40px; height:40px; margin-right:2px; display: block; content:""; background: url(../icons-white/download.png) no-repeat left center; background-size:40px 40px; filter: invert();
    position: relative; left: -4px; }

#resourceinfo>div .dl a:hover { background-color: #333; color:white;}
#resourceinfo>div .dl a:hover::before { filter:none;}