/*--------------- general setting ---------------*/
.containerCSS {
    width: 100%;
    background-color: whitesmoke;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin-top: 0px;
    font-size: 16px;
}

p {
    font-size: 18px;
}

.underline {
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    border-top: 1px solid gray;
}

.topicheader {
    clear: both;
    width: 100%;
    height: 50px;
    background-color: #132f57;
}

.whitenewline {
    clear: both;
    width: 100%;
    height: 25px;
}




/* 
   ##Device = Desktops
   ##Screen = 1281px to higher resolution desktops
   */
@media (min-width : 1200px) {

    /*header*/
    h1 {
        font-size: 30px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 40px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 50px;
        margin-left: 30px;
    }

    .headercontact {
        float: right;
        margin-top: 70px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 30px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 110px;
        height: 130px;
    }

    /*body*/
    /*article*/
    .blockarticle {
        margin-left: 3%;
    }

    /*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) {

    /*header*/
    h1 {
        font-size: 30px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 40px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 50px;
        margin-left: 30px;
    }

    .headercontact {
        float: right;
        margin-top: 70px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 110px;
        height: 130px;
    }

    /*body*/
    /*article*/
    .blockarticle {
        margin-left: 3%;
    }

    /*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) {

    /*header*/
    h1 {
        font-size: 20px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 40px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 60px;
        margin-left: 30px;
    }

    .headercontact {
        float: right;
        margin-top: 70px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 105px;
        height: 130px;
    }

    /*body*/
    /*article*/
    .blockarticle {
        margin-left: 3%;
    }

    /*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 = Low Resolution Tablets, Mobiles (Landscape)
   ##Screen = B/w 481px to 767px
   */
@media (max-width : 740px) {

    /*header*/
    h1 {
        font-size: 20px;
        font-family: Tahoma;
    }

    h3 {
        font-size: 20px;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 40px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 60px;
        margin-left: 30px;
    }

    .headercontact {
        float: right;
        margin-top: 20px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 105px;
        height: 130px;
    }

    /*body*/
    /*article*/
    .blockarticle {
        margin-left: 3%;
    }

    /*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;
    }

    h3 {
        font-size: 16px;
    }

    .headercontainer {
        width: 100%;
        height: 170px;
        background-color: #122446;
    }

    .headerlogocontainer {
        float: left;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 40px;
    }

    .headerwordtitle {
        float: left;
        margin-top: 60px;
        margin-left: 30px;
    }

    .headercontact {
        float: right;
        margin-top: 1px;
        margin-right: 40px;
    }

    .headermenucontainer {
        clear: both;
        width: 100%;
        height: 20px;
        background-color: #132f57;
    }

    .responsiveheaderlogo {
        width: 85px;
        height: 110px;
    }

    /*body*/
    /*article*/
    .blockarticle {
        margin-left: 3%;
    }

    /*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)
   */
    @media (min-width : 320px) {

        /*header*/
        h1 {
            font-size: 14px;
            font-family: Tahoma;
        }

        h3 {
            font-size: 16px;
        }

        p {
            font-size: 14px;
        }

        .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: 20px;
        }

        .headerwordtitle {
            float: left;
            margin-top: 60px;
            margin-left: 20px;
        }

        .headercontact {
            float: right;
            margin-top: 1px;
            margin-right: 40px;
        }

        .headermenucontainer {
            clear: both;
            width: 100%;
            height: 20px;
            background-color: #132f57;
        }

        .responsiveheaderlogo {
            width: 85px;
            height: 110px;
        }

        /*body*/
        /*article*/
        .blockarticle {
            margin-left: 3%;
        }

        /*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*/
}