@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 .lead{margin-top:25px;font-size:14px;font-weight:bold;line-height:150%;}
    article .text{margin-top:25px;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 h1 span{font-size:19px;color:#999}
    article h2{margin-top:25px;padding:0;font-size:19px;font-weight:bold;line-height:150%;}
    article h3{margin-top:25px;padding:0;font-size:16px;font-weight:bold;line-height:150%;text-align:left;}
    article h4{margin-top:5px;padding:0;font-size:13px;font-weight:bold;line-height:150%;text-align:left;}
    
    .documentList{margin-top:30px;padding:0;}
    .documentBox{height:auto;display:inline-block;margin:0 10px;padding:0;}
    .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;}
    .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;}
    
    .contentList{margin-top:10px;padding:0 20px;width:100%;}
    .categoryBox{width:100%;margin:0 0 20px 0;}
    .categoryHeader{border-bottom:2px solid #38609e;background: linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);}
    .categoryHeader h2{display:inline-block;position:relative;top:2px;padding:10px 20px 0 0;background-color:#fff;font-size:17px;font-weight:bold;border:2px solid #355492;border-radius:0 10px 0 0;border-width:2px 2px 2px 0;border-color:#355492 #355492 #fff #fff}
    .categoryHeader span{float:right;display:inline-block;padding:8px 20px;font-size:13px;color:#999;}
    .categoryHeader span b{font-size:15px;color:#999;}
    .itemBox{overflow:auto;margin-top:20px;padding:0 0 20px 0;font-size:14px;line-height:140%;border:1px solid #ccc;border-width:0 0 1px 0;}
    .itemBox .imageContainer {float:right;width:25%;margin:0 0 0 20px;}
    .itemBox .imageContainer img{width:100%;border:1px solid #ccc;border-radius:0 10px 0 10px;}
    .itemBox p{margin:0 20px;padding:20px 0;font-size:13px;line-height:150%;text-align:justify;}
    .blackBlue{color:#333;text-decoration:none;}
    .blackBlue:HOVER{color:#355492;}
    .itemTitle{font-size:17px;font-weight:bold;line-height:40px;color:#355492;text-decoration:none;}
    .itemTitle:HOVER{color:#000;text-decoration:underline;}
    .all{display:block;padding-top:10px;font-size:13px;color:#aaa;text-decoration:none;}
    .all b{color:#888;}
    .all:HOVER{color:#355492;}
    .all b:HOVER{color:#355492;}
}

@media screen and (min-width: 768px) {
    /* TABLET */
    article{padding:0 20px 20px 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;}
}

@media screen and (min-width: 1200px) {
    /* DESKTOP */
    .mainContainer{max-width:1360px;}
    
    #customerMenu{display:none;}
    #categoryMenu nav p{display:none;}
    
    article{padding:0 20px 20px 20px;}
    article .imageContainer{margin-top:25px;}
    article .imageContainer img{width:100%;max-width:750px;margin:0 auto;}
    article .imageContainer .caption{background-color:#fff;padding:10px;font-size:12px;font-style:italic;color:#aaa;text-align:center;}
    
    .documentList{margin-top:30px;padding:0;}
    .documentBox{float:left;height:auto;}
    
    .relatedBox{float:left;width:25%;overflow:auto;padding:10px;border-radius:5px;}
}