/*--top bar--*/
.angTopBar { border-bottom: #ccc 1px solid;}
.angRedBar { height: 5px; background: #172A88;}
.newsTopMenu { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; border-bottom: #ccc 1px solid;}
.newsLogoBar { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: space-between; width: 100%; padding: 10px;}
.TopMenuThree { padding: 0 20px; display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; color: #ccc;}
.TopMenuThree a { color: #686868;}
.TopMenuThree a:hover { color: #c30d23;}
.newsMobileMenu { display: none;}

/*--News Icon--*/
.newsIcon { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: flex-end; align-items: flex-end;}
.newsIcon img { width: 20px; height: 20px; padding: 3px;}
.newsIcon a { background: #172A88; border-radius: 5px; margin: 0 0 0 5px; color: #fff;}
.newsIcon a:hover { background: #F39800;}
.newsIcon div:hover { visibility: visible;}
.tooIcon { position: relative; display: inline-flex; }
.tooIcon .IconBox { visibility: hidden; width: 150px; background-color: rgba(0, 0, 0, 0.90); color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -138px; margin-bottom: -10px; font-size: 0.8rem;}
.tooIcon:hover .IconBox { visibility: visible;}

/*--Menu--*/
.newsButMenu { text-align: center; padding: 35px;}
.newsoverlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s;}
.newsoverlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}
.newsoverlay a { padding: 8px; text-decoration: none; font-size: 28px; color: #818181; display: block; transition: 0.3s;}
.newsoverlay a:hover, .overlay a:focus { color: #f1f1f1;}
.newsoverlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}
.newsLeftMenu { cursor: pointer; position: fixed; color: #ccc; text-align: center; padding: 15px 0; display: none; width: 80px; border-right: 1px #ccc solid;}
.newsLeftMenu i { font-size: 35px;}
.newsLeftMFont { font-size: 12px;}

/*----News Content----*/
.angNewsContent { margin: 40px; padding: 20px; border: 1px #ccc solid;}
.angNewsContent h4 { background: #F39800; padding: 2px; color: #fff; width: 100px; text-align: center;}
.ContentCompany button, .ContentIC button { margin: 5px 5px 5px 0; width: 260px; background: #fff; border: 1px #ccc solid; padding: 4px; font-size: 1rem;}
.ContentCompany button:hover, .ContentIC button:hover, .ContentProuducts button:hover { background: #1b1b1b; color: #fff;}
.ContentProuducts button { background: #172A88; color: #fff; padding: 8px; border-radius: 5px; font-size: 16px; margin: 5px 5px 5px 0; width: 180px; border: 1px #ccc solid;}
.NewsContentBox { border: #ccc 1px Solid; margin: 20px 0; padding: 20px; line-height: 2; text-align: justify; text-align: center;}
.NewsContentBox p { text-align: justify;}

/*--Products Content--*/
.ProductsIC { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center;}
.ProductsText { width: 24%; border: 1px #ccc solid; margin: 10px;}
.ProductsText img { width: 100%;}
.ProductsText div { text-align: center; background: #848484; color: #fff; padding: 3px;}

@media (max-width: 1440px) {}
@media (max-width: 1200px) {
    .ContentProuducts { text-align: center;}
}

@media (max-width: 768px) {
    .newsTopMenu { justify-content: space-between;}
    .TopMenuThree { display: none;}
    .newsLeftMenu { display: block; position: inherit;}
    .newsLeftMenu:hover { background: #1b1b1b;}
    .ContentCompany { text-align: center;}
    .NewsContentBox img { width: 100%;}
    .ContentProuducts button { width: 48%; margin: 5px 0; padding: 8px 4px;}
}
@media (max-width: 576px) {
    .angNewsContent { margin: 10px; padding: 10px; border: 1px #ccc solid;}
    .newsTopMenu { display: none;}
    .newsMobileMenu { display: block;}
    .newsLogoBar { width: 100%; display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: center; padding: 10px 0; border-bottom: 1px #ccc solid;}
    .newsLogoBar img { width: 95%;}
    .newsIcon { border-bottom: #ccc 1px solid; align-items: center; justify-content: space-between; background: #172A88;}
    .IconRedThree { display:box; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content: space-around; align-items: flex-end; padding: 0 15px;}
    .IconRedThree img { width: 25px; height: 25px; padding: 3px;}
    .IconRedThree a { background: #F39800; border-radius: 5px; margin: 0 0 0 5px;}
    .IconRedThree a:hover { background: #1b1b1b;}
    .newsLeftMenu { padding: 2px 0px; width: 60px;}
    .newsLeftMenu i { color: #fff; font-size: 25px;}
    .newsLeftMFont { font-size: 12px; color: #fff;}
    .ProductsIC { display: block;}
    .ProductsText { width: 100%; margin: 5px 0px;}
}

@media (max-width: 375px) {}
@media (max-width: 320px) {}