@media screen {
    /* MOBILE */
    main{width:100%;margin:0 auto;background-color:#fff;}
    .mainContainer{width:100%;height:auto;margin:0 auto;padding:20px;overflow:auto;}
    
    article{width:100%;padding:0 10px 20px 10px;}
    article .chapter{clear:both;margin-top:40px;font-size:19px;line-height:150%;text-align:justify;text-transform:uppercase;}
    article .lead{margin-top:10px;font-size:14px;font-weight:bold;line-height:150%;}
    article .text{clear:both;margin-top:10px;font-size:13px;line-height:150%;text-align:justify;}
    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;}
    article .columnContainer{clear:both;overflow:auto;}
    article .leftColumn{clear:left;width:100%;}
    article .rightColumn{clear:right;width:100%;}   
    article b.chapter{font-size:19px;}
    
    .documentList{margin-top:30px;padding:0 10px;}
    .documentBox{height:auto;display:inline-block;padding:0 10px;}
    .documentBox h2{font-size:19px;color:#666;margin:0; padding:0 0 10px 0;border-bottom:1px solid #ccc;}
    .documentBox ul{overflow:auto;list-style:none;padding:10px 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;}
    
    .relatedContainer{clear:left;margin:10px 0;padding:0;}
    .relatedContainer .title{margin:0;padding:20px 0px;border-bottom:1px solid #ccc;font-size:21px;}    
    .relatedContainer .slider{margin:0 auto 50px auto;}
    .relatedBox{float:left;width:50%;overflow:auto;padding:10px;border-radius:5px;}
    .relatedContent{height:auto;overflow:auto;border-radius:5px;overflow:hidden;cursor:pointer;}    
    .relatedContent:HOVER{}
    .relatedContent:HOVER img{transform: scale(1.05);}
    .relatedContent img{width:100%;display:block;transition: transform .5s;border-radius:5px;}
    .relatedContent .relatedName{margin-top:10px;padding:10px 0;border-top:1px solid #000;font-size:15px;font-weight:bold;}
    .relatedContent:HOVER .relatedName{color:#355492;}
    
    .articleList{float:right;margin-top:10px;}
    .articleBox{width:33.33%;float:left;}
    .articleBox h3{margin:0 20px;padding:20px 0;font-size:19px;font-weight:bold;color:#2177bc;}
    .articleBox .imageContainer img{width:100%;margin:0 auto;padding:0 20px;}
    .articleBox .imageContainer .caption{background-color:#fff;padding:10px;font-size:13px;font-style:italic;color:#999;text-align:center;}
    .articleBox p{margin:0 20px;padding:20px 0;font-size:13px;line-height:150%;text-align:justify;}
    .articleBoxProduct{width:50%;float:left}
    .articleBoxProduct .articleBoxProductImageContainer{width:100%;padding:20px 20px 0px 20px;}
    .articleBoxProduct .articleBoxProductImageContainer img{width:100%;border-top:1px solid #999;}
    .articleBoxProduct h4{font-size:13px;line-height:140%;padding:10px 20px;}
    .articleBoxProduct h4 a{color:#000;}
    
    .brandContainer{overflow:auto;margin-bottom:40px;}
    .brandList{width:100%;padding:20px 0;}
    .brandBox{float:left;width:33.33%;padding:10px;}
    .brandBox img{width:100%;}
}

@media screen and (min-width: 768px) {
    /* TABLET */
    .contentBox{width:66.67%;float:left;}
    article{width:100%;padding:0 20px 20px 20px;}
    article .leftColumn{float:left;width:50%;padding-right:20px;}
    article .rightColumn{float:right;width:50%;padding-left:20px;}   
    
    #customerMenu{display:none;}
    #categoryMenu nav p{display:none;}
    
    .relatedContainer{margin:10px 0;padding:0 20px;}
    .relatedBox{float:left;width:33.33%;overflow:auto;padding:10px;border-radius:5px;}
    
    .brandBox{width:25%;}
}

@media screen and (min-width: 1200px) {
    /* DESKTOP */
    .mainContainer{max-width:1360px;}
    
    .contentBox{float:left;width:75%;padding:0 10px;}  
    
    #customerMenu{display:none;}
    #categoryMenu nav p{display:none;}
    
    article{padding:0 20px 20px 20px;}
    
    .documentBox{float:left;height:auto;}
    .articleList{max-width:1360px;}
    
    .relatedBox{float:left;width:25%;overflow:auto;padding:10px;border-radius:5px;}
    
    .brandBox{width:16.66%;}
}