@media screen {
    /* MOBILE */
    main{width:100%;margin:0 auto;}
    
    .articleContainer{width:100%;height:auto;margin:0 auto;padding:20px 10px 40px 10px;overflow:auto;background-color:#fff;}   
    article{width:100%;margin:0 auto;padding:0 20px;}
    article .lead{margin-top:25px;font-size:14px;font-weight:bold;line-height:150%;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
    article .text{margin-top:25px;font-size:13px;line-height:150%;text-align:justify;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
    article .imageContainer{margin-top:25px;}
    article .imageContainer img{width:100%;margin:0 auto;}
    article .imageContainer .caption{background-color:#fff;padding:10px;font-size:12px;font-style:italic;color:#aaa;text-align:center;}
    
    .multiColumn{display:inline-block;float:left;width:33%;overflow:auto;}
    
    .listContainer{width:100%;height:auto;margin:0 auto;padding:20px;overflow:auto;background-color:rgba(255,255,255,0.9);text-align:center;}
    
    .documentList{display:inline-block;overflow:auto;margin:0 auto;width:auto;padding:10px;}    
    .documentBox{height:auto;float:left;padding:0 10px;}
    .documentBox h2{font-size:19px;color:#666;margin:0 10px;padding:0 0 10px 0;border-bottom:1px solid #ccc;}
    .documentBox ul{overflow:auto;list-style:none;padding:10px 0 0 0;}
    .documentBox ul li {float:left;width:110px;padding:10px;cursor:pointer;}    
    .documentBox ul li img{width:100%;border-radius:5px;transition: .5s}
    .documentBox ul li:HOVER img{transform: scale(1.05);}
    .documentBox ul li p{margin:15px 0 5px 0;font-size:13px;text-align:center;line-height:140%;}
    .documentBox ul li:HOVER p{color:#000;}    
    
    .articleList{display:inline-block;margin:0 auto;width:100%;padding:0;overflow:auto;}
    .articleBox{padding:0 20px;}
    .articleBoxContent{background-color:rgba(255,255,255,0.5);border-radius:10px;}
    .articleBoxContent:HOVER{background-color:rgba(255,255,255,1);}
    .articleBoxContent .imageContainer img{width:100%;border-radius:10px 10px 0 0;}
    .articleBoxContent .title{margin:0 20px;padding:20px 0;font-size:19px;font-weight:bold;color:#2177bc;text-align:left;}
    .articleBoxContent p{margin:0 20px;padding:0 0 30px 0;font-size:13px;line-height:150%;text-align:left}
}

@media screen and (min-width: 768px) {
    /* TABLET */  
    .articleContainer{padding:20px 20px 40px 20px;} 
    article{width:100%;margin:0 auto;padding:0 20px;}
}

@media screen and (min-width: 1200px) {
    /* DESKTOP */
    
    article{max-width:1320px;padding:0 20px;}
    .articleList{max-width:1320px;}
    .articleBox{float:left;width:25%;}
}