/* --------------------------------------------------------------------------
 * article LIST
 * -------------------------------------------------------------------------- */

    #article-text-content 
    {
        padding: 0em 65px 0em 65px;
        margin-bottom: 2em;
    }
    


    /* list */
    .article-list {
        padding: 0em 65px 2em 65px;
    }
    
        
    @media screen and (max-width: 1024px) {

        #article-text-content {
            padding: 0em 60px 0em 60px;
            margin-bottom: 2em;
        }

        .article-list {
            padding: 0em 60px 2em 60px;
        }
        
    }
    
    @media screen and (max-width: 800px) {

        
        #article-text-content {
            padding: 0em 3% 0em 3%;
            margin-bottom: 2em;
        }

        .article-list {
            padding: 0em 3% 2em 3%;
        }
   
        
    }
    

    .article-list-items {
        display: flex;
        flex-wrap: wrap;
    }

    /* list item */
    .article-list-item {
        margin: 0px 2.75% 1em 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 31.5%;
        padding: 0px; 
        text-align: left;
        background: #FFFFFF;
    }
    
 

    /* img */
    .article-list-item .img-box {

    }

    .article-list-item .img-box img {
        width: 100%;
    }

    
    /* caption */
    .caption-box {
        margin: 25px;
        /*min-height: 4.0em;*/
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .article-list-item h2 {
        margin: 0;
        line-height: 120%;
        font-size: 120%;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .article-list-item h2 a { 
        color: #487629;
    }
    
    
    .article-list-item h3 {
        font-weight: normal;
        line-height: 140%;
        text-transform: none;
        color: #487629;
        margin: 0em 0px;
    }
    
    .article-list-item h3 a { 
        color: #487629;
    }
    
   
    /* datum */
    .article-list-item .info-row {
        color: #999999;
        margin-bottom: 0.25em;
    }
    
    /* text */
    .article-list-item  .content {
       padding: 0px 25px 0em 25px;
       line-height: 110%;
       color: #101010;
       font-size: 100%;
       
        display: flex;
        flex-direction: column;
    }
    
    .article-list .strecher {
        flex-grow: 1;
    }
    
    .read-more {
        margin: 1.25em 25px 1em 25px;
        font-size: 95%;
    }

    
/* --------------------------------------------------------------------------
 * article LIST MOBILE
 * -------------------------------------------------------------------------- */ 

 
 
    @media screen and (min-width: 601px) {
        
        .article-list-item:nth-child(3n) {
            margin-right: 0;
        }  
    }
        
 
    @media screen and (max-width: 800px) {
        
        
        .article-list-item .caption-box {
            margin: 25px 10px;
        }
        
        .article-list-item .content {
            padding: 0px 10px 0em 10px;
        }
        
            
        .read-more {
            margin: 0.75em 10px 1em 10px;

        }

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

        .article-list-item {
            width: 100%;
            margin-right: 0%;
        } 
        
        
       
    }
      
/* --------------------------------------------------------------------------
 * article HP BOX
 * -------------------------------------------------------------------------- */ 

    .article-hp-box-caption {
        color: #0E5588;
        font-size: 175%;
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        margin: 1em 0px 1.5em 0px;
    }

    .article-hp-box .article-list-item {
        
    }
    
    .article-hp-box .article-list-item h3 {
            line-height: 120%;
            font-size: 120%;
            font-weight: bold;
            text-transform: uppercase;
    }
    
    .article-hp-box .article-list-item h3 a {
        color: #487629;
    }

    .article-hp-box .article-list-item .info-row {

    }
    
    .article-hp-box .article-list-item .read-more a {
        color: #487629;
    }