﻿
/*---------reference media query for all display-------*/
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
@media (min-width : 1200px) {
    }

    /*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
@media (min-width : 991px) and (max-width : 1199px) {
    }

    /* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
@media (max-width : 992px) {
    }

    /* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
@media (max-width : 740px) }
    {

    /* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
@media (max-width : 600px) {
    }

@media (min-width : 320px) {
    }

*/
/*--------------- general setting ---------------*/
.containerCSS {
    width: 100%;
    background-color: white;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin-top: 0px;
    font-size: 16px;
    /*
    background-color: #122446;*/
}

h2 {
    font-size: 30px;
    font-family: Tahoma;
}


p {
    font-size: 18px;
}

.blockadscontainer {
    width: 100%;
    height: auto;
}

.underline {
    margin-top: 7px;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    border-top: 3px solid #132f57;
}

.topicheader {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-style: solid;
    border-color: #132f57; 
    border-left-width: 28px;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 75%;
    height: 50px;
    /*background-color: #132f57;*/
}

.whitenewline {
    clear: both;
    width: 100%;
    height: 25px;
}

.headerlogocontainer {
    position: absolute;
}

/* 
   ##Device = Desktops
   ##Screen = 1281px to higher resolution desktops
    */

@media (min-width : 1200px) {

    /*Social Media*/
    .fa {
        padding: 20px;
        font-size: 30px;
        width: 80px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 5%;
    }


        .fa:hover {
            opacity: 0.7;
        }

    .fa-facebook {
        background: #3B5998;
        color: white;
        height: auto;
    }

    .fa-instagram {
        background: #125688;
        color: white;
        height: auto;
    }

    .fa-twitter {
        background: #55ACEE;
        color: white;
        height: auto;
    }

    .fa-youtube {
        background: #bb0000;
        color: white;
        height: auto;
    }

    /*header*/
    h1 {
        font-size: 30px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: xx-large;
        font-weight: bolder;
        color: #132f57;
        text-align: center;
        margin: 40px auto 40px auto;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        position: absolute;
        float: left;
        margin-top: 20px;
        /*
        padding-bottom: 20px;*/
        margin-left: 40px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 50px;
        margin-left: 30px;
    }

    /*4-5-62*/
    .headersocialmediacontact {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 13px;
        float: right;

    }


    .headercontact {
        float: right;
        margin-top: 70px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 30px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 250px;
        height: auto;
    }

    /*body*/
    /*main menu*/
    .mainmenucontainer {
        width: 90%;
        height: 70px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }

    /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
    .adsdetailcontainer {
        width: 80%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }

    /*highlight
        .topichighlightcontainer {
        width: 80%;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
        } */

    /*article and othernew*/
    .blockarticle {
        float: left;
        margin-left: 20%;
    }

    .blockothernews {
        float: right;
        margin-right: 20%;
    }

    /*facrbook CSS */
    .fb-page {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }

    /*footer*/
    .footercontainer {
        clear: both;
        width: 100%;
        height: 100px;
        background-color: #122446;
    }

    .footeraboutus {
        clear: both;
        width: 100%;
        height: 60px;
        background-color: #132f57;
    }

    .footercontact {
        padding-top: 10px;
        padding-bottom: 15px;
        text-align: center;
    }
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
    */

@media (min-width : 991px) and (max-width : 1199px) {

    /*Social Media*/
    .fa {
        padding: 20px;
        font-size: 20px;
        width: 80px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 5%;
    }


        .fa:hover {
            opacity: 0.7;
        }

    .fa-facebook {
        background: #3B5998;
        color: white;
        height: auto;
    }

    .fa-instagram {
        background: #125688;
        color: white;
        height: auto;
    }

    .fa-twitter {
        background: #55ACEE;
        color: white;
        height: auto;
    }

    .fa-youtube {
        background: #bb0000;
        color: white;
        height: auto;
    }

    /*header*/
    h1 {
        font-size: 30px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: xx-large;
        font-weight: bolder;
        text-align: center;
        margin: 40px auto 40px auto;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 30px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 50px;
        margin-left: 30px;
    }

    /*4-5-62*/
    .headersocialmediacontact {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 13px;
        float: right
    }

    .headercontact {
        float: right;
        margin-top: 70px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 250px;
        height: auto;
    }

    /*body*/
    /*main menu*/
    .mainmenucontainer {
        width: 80%;
        height: 70px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }

    /*4-5-62*/
    .underline {
        margin-top: 7px;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        border-top: 3px solid #132f57;
    }

    .topicheader {
        clear: both;
        margin-left: auto;
        margin-right: auto;
        border-style: solid;
        border-color: #132f57;
        border-left-width: 28px;
        border-top: none;
        border-right: none;
        border-bottom: none;
        width: 95%;
        height: 50px;
        /*background-color: #132f57;*/
    }

    /*article and othernew Old Format
    .blockarticle {
        float: left;
        margin-left: 10%;
    }

    .blockothernews {
        float: right;
        margin-right: 10%;
    } */

    /*article and othernew*/
    .blockarticle {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    .blockothernews {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    /*facrbook CSS */
    .fb-page {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }

    /*footer*/
    .footercontainer {
        width: 100%;
        height: 100px;
        background-color: #122446;
    }

    .footeraboutus {
        clear: both;
        width: 100%;
        height: 60px;
        background-color: #132f57;
    }

    .footercontact {
        padding-top: 10px;
        padding-bottom: 15px;
        text-align: center;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
    */

@media (max-width : 992px) {

    /*Social Media*/
    .fa {
        padding: 20px;
        font-size: 20px;
        width: 80px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 5%;
    }

    .fa:hover {
        opacity: 0.7;
    }

    .fa-facebook {
        background: #3B5998;
        color: white;
        height: auto;
    }

    .fa-instagram {
        background: #125688;
        color: white;
        height: auto;
    }

    .fa-twitter {
        background: #55ACEE;
        color: white;
        height: auto;
    }

    .fa-youtube {
        background: #bb0000;
        color: white;
        height: auto;
    }

    /*header*/
    h1 {
        font-size: 20px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: xx-large;
        font-weight: bold;
        text-align: center;
        margin: 40px auto 40px auto;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 30px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 60px;
        margin-left: 30px;
    }

    /*4-5-62*/
    .headersocialmediacontact {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 13px;
        float: right
    }

    .headercontact {
        float: right;
        margin-top: 70px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .aboutus {
        text-align: center
    }

    .responsiveheaderlogo {
        width: 230px;
        height: auto;
    }

    /*body*/
    /*main menu*/
    .mainmenucontainer {
        width: 80%;
        height: 70px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }

    /*4-5-62*/
    .underline {
        margin-top: 7px;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        border-top: 3px solid #132f57;
    }

    .topicheader {
        clear: both;
        margin-left: auto;
        margin-right: auto;
        border-style: solid;
        border-color: #132f57;
        border-left-width: 28px;
        border-top: none;
        border-right: none;
        border-bottom: none;
        width: 95%;
        height: 50px;
        /*background-color: #132f57;*/
    }


    /*article and othernew*/
    .blockarticle {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    .blockothernews {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    /*facrbook CSS */
    .fb-page {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }

    /*footer*/
    .footercontainer {
        width: 100%;
        height: 100px;
        background-color: #122446;
    }

    .footeraboutus {
        clear: both;
        width: 100%;
        height: 60px;
        background-color: #132f57;
    }

    .footercontact {
        padding-top: 10px;
        padding-bottom: 15px;
        text-align: center;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
    */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
    */

@media (max-width : 740px) {

    /*header*/
    h1 {
        font-size: 20px;
        font-family: Tahoma;
    }

    h2 {
        font-size: 20px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 15px;
        font-weight: bold;
        margin: auto auto auto auto;
        text-align: justify;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 30px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 60px;
        margin-left: 30px;
    }

    /*4-5-62*/
    .headersocialmediacontact {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 13px;
        float: right
    }

    .headercontact {
        float: right;
        margin-top: 20px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 200px;
        height: auto;
    }

    /*body*/
    /*main menu*/
    .mainmenucontainer {
        width: 80%;
        height: 70px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }

    /*4-5-62*/
    .underline {
        margin-top: 7px;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        border-top: 3px solid #132f57;
    }

    .topicheader {
        clear: both;
        margin-left: auto;
        margin-right: auto;
        border-style: solid;
        border-color: #132f57;
        border-left-width: 28px;
        border-top: none;
        border-right: none;
        border-bottom: none;
        width: 95%;
        height: 35px;
        /*background-color: #132f57;*/
    }

    /*4-5-62*/
    .underline {
        margin-top: 7px;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        border-top: 3px solid #132f57;
    }

    .topicheader {
        clear: both;
        margin-left: auto;
        margin-right: auto;
        border-style: solid;
        border-color: #132f57;
        border-left-width: 28px;
        border-top: none;
        border-right: none;
        border-bottom: none;
        width: 95%;
        height: 50px;
        /*background-color: #132f57;*/
    }

    /*article and othernew*/
    .blockarticle {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    .blockothernews {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    /*facrbook CSS */
    .fb-page {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }

    /*footer*/
    .footercontainer {
        width: 100%;
        height: 100px;
        background-color: #122446;
    }

    .footeraboutus {
        clear: both;
        width: 100%;
        height: 60px;
        background-color: #132f57;
    }

    .footercontact {
        padding-top: 10px;
        padding-bottom: 15px;
        text-align: center;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
    */

@media (max-width : 600px) {

    /*header*/
    h1 {
        font-size: 20px;
        font-family: Tahoma;
    }

    h2 {
        font-size: 15px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 16px;
    }

    h4 {
        font-size: 15px;
        font-weight: 500;
        margin: auto auto auto auto;
        text-align: justify;
    }

    p {
        font-size: 14px;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 30px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 60px;
        margin-left: 30px;
    }

    /*4-5-62*/
    .headersocialmediacontact {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 13px;
        float: right
    }

    .headercontact {
        float: right;
        margin-top: 1px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 150px;
        height: auto;
    }

    /*body*/
    /*main menu*/
    .mainmenucontainer {
        width: 80%;
        height: 70px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }

    /*4-5-62*/
    .underline {
        margin-top: 7px;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        border-top: 3px solid #132f57;
    }

    .topicheader {
        clear: both;
        margin-left: auto;
        margin-right: auto;
        border-style: solid;
        border-color: #132f57;
        border-left-width: 28px;
        border-top: none;
        border-right: none;
        border-bottom: none;
        width: 95%;
        height: 50px;
        /*background-color: #132f57;*/
    }

    /*article and othernew*/
    .blockarticle {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    .blockothernews {
        margin-left: auto;
        margin-right: auto;
        padding-left: 25px;
    }

    /*facrbook CSS */
    .fb-page {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }

    /*footer*/
    .footercontainer {
        width: 100%;
        height: 100px;
        background-color: #122446;
    }

    .footeraboutus {
        clear: both;
        width: 100%;
        height: 60px;
        background-color: #132f57;
    }

    .footercontact {
        padding-top: 10px;
        padding-bottom: 15px;
        text-align: center;
    }


    @media (min-width : 320px) {

        /*Social Media*/
        .fa {
            padding: 15px;
            font-size: 10px;
            width: 40px;
            height: 15px;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            border-radius: 5%;
        }

        .fa:hover {
             opacity: 0.7;
        }

        .fa-facebook {
            background: #3B5998;
            color: white;
            height: auto;
        }

        .fa-instagram {
            background: #125688;
            color: white;
            height: auto;
        }

        .fa-twitter {
            background: #55ACEE;
            color: white;
            height: auto;
        }

        .fa-youtube {
            background: #bb0000;
            color: white;
            height: auto;
        }

        /*header*/
        h1 {
            font-size: 14px;
            font-family: Tahoma;
        }

        h2 {
            font-size: 20px;
            font-family: Tahoma;
        }

        h3 {
            font-size: 16px;
        }

        p {
            font-size: 14px;
        }

        h4 {
            font-size: 15px;
            font-weight: 500;
            margin: auto auto auto auto;
            text-align: justify;
        }

        /*4-5-62*/
        .underline {
            margin-top: 7px;
            margin-left: auto;
            margin-right: auto;
            width: 95%;
            border-top: 3px solid #132f57;
        }

        .topicheader {
            clear: both;
            margin-left: auto;
            margin-right: auto;
            border-style: solid;
            border-color: #132f57;
            border-left-width: 28px;
            border-top: none;
            border-right: none;
            border-bottom: none;
            width: 95%;
            height: 35px;
            /*background-color: #132f57;*/
        }


        /*
        .topicheader {
            clear: both;
            width: 100%;
            height: 50px;
            background-color: #132f57;
        }
        */

        .headercontainer {
            width: 100%;
            height: 170px;
            background-color: #122446;
        }

        .headerlogocontainer {
            float: left;
            padding-top: 20px;
            padding-bottom: 20px;
            margin-left: 10px;
        }

        .headerwordtitle {
            float: left;
            margin-top: 60px;
            margin-left: 20px;
        }

        /*4-5-62*/
        .headersocialmediacontact {
            margin-top: 10px;
            margin-bottom: 10px;
            margin-right: 13px;
            float: right
        }

        .headercontact {
            float: right;
            margin-top: 1px;
            margin-right: 40px;
        }

        .headermenucontainer {
            clear: both;
            width: 100%;
            height: 20px;
            background-color: #132f57;
        }

        .responsiveheaderlogo {
            width: 150px;
            height: auto;
        }

        /*body*/
        /*main menu*/
        .mainmenucontainer {
            width: 80%;
            height: 70px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: center;
        }

        /*article and othernew*/
        .blockarticle {
            margin-left: auto;
            margin-right: auto;
            padding-left: 25px;
        }

        .blockothernews {
            margin-left: auto;
            margin-right: auto;
            padding-left: 25px;
        }

        /*facrbook CSS */
        .fb-page {
            width: 100%;
            margin-top: 30px;
            text-align: center;
        }

        /*footer*/
        .footercontainer {
            width: 100%;
            height: 100px;
            background-color: #122446;
        }

        .footeraboutus {
            clear: both;
            width: 100%;
            height: 60px;
            background-color: #132f57;
        }

        .footercontact {
            padding-top: 10px;
            padding-bottom: 15px;
            text-align: center;
        }
    }

    /*min= 320px max= 600px fix later*/
}
