/* CSS Document */

/******************************
[Table of Contents]

1. Media 991
2. Media 768
3. Media 640
4. Media 567
5. Media 480
6. Media 375
******************************/


@media (min-width:1400px) {
    .Banner-Hero {
        min-height: 700px;
        background-image: url(../images/latest-news-bg-big.jpg);
    }

    .news-wrap ul > li .top-strip {
        height: 125px !important;
    }
}

@media (min-width:1650px) {
    .Banner-Hero {
        min-height: 800px;
    }
}

@media (max-width:1400px) {
    .Banner-Hero.conatct-new > h1 {
        left: 3%;
    }
}

@media (max-width:1350px) {
    .Banner-Hero.about > h1 {
        top: 10%;
        right: 5%;
    }

    .AboutUs-wrap ul.Cat-wrap > li .glbl-btn {
        padding: 8px 30px 4px 28px;
    }
    /*.Banner-Hero.conatct-new > h1{right: 2%;}*/

}

@media (max-width:1199px) {
    .Banner-Hero {
        min-height: 450px;
    }

    .AboutUs-wrap ul.Cat-wrap > li .glbl-btn {
        font-size: 18px;
    }

    .Banner-Hero.conatct > h1 {
        right: 0%;
    }

    .Banner-Hero.conatct-new > h1 {
        font-size: 48px;
    }
}

/*********************************
1. Media 991
*********************************/
@media (max-width:991px) {
    .header li a {
        font-size: 20px !important;
    }

    .Banner-Hero {
        background-position: center;
        min-height: 450px;
    }

        .Banner-Hero > h1 {
            font-size: 48px; /* transform: translate(0, -50%); left: 10%; */ /*left:5%;*/
        }

            .Banner-Hero > h1 > span {
                font-size: 30px;
            }

    .Banner-inner > h1 {
        font-size: 48px;
    }
    /*.Banner-Hero > h1{transform: translate(-50%, -25%); left: 50%; top: 75%; width: 100%;}*/
    /*.Banner-Hero > h1 > span{color:#fff;}*/
    /*.Banner-Hero.about > h1{font-size: 60px; transform: translate(0, -50%); left: 10%; color: #606161; width: auto; top:50%; }
	.Banner-Hero.about > h1 > span{color: #606161;}*/
    .header .social-links a img {
        width: 20%;
    }

    .news-wrap ul > li {
        width: 33%;
        margin-bottom: 30px;
    }

    .AboutUs-wrap ul.Cat-wrap {
        flex-flow: row wrap;
    }

        .AboutUs-wrap ul.Cat-wrap > li {
            width: 49%;
        }

            .AboutUs-wrap ul.Cat-wrap > li:last-child {
                margin-top: 20px;
            }
    /*.Banner-Hero.conatct-new > h1{font-size: 38px;}*/
    .Banner-Hero.conatct-new {
        background-position: inherit;
    }
}
/*********************************
2. Media 768
*********************************/
@media (max-width:768px) {
    .header {
        background: #ccc;
        z-index: 3;
        padding-bottom: 10px;
    }
    /*  .header li a:hover{background:#ff0000; } */

    .Banner-Hero > h1 {
        font-size: 42px;
        left: 7%;
    }
        /*.Banner-Hero.about > h1{font-size: 48px;  }*/
        /*.Banner-Hero.about > h1 > span{font-size: 20px;}*/
        .Banner-Hero > h1 > span {
            font-size: 26px;
        }

    .footer .social-wrap > h1 {
        font-size: 36px;
    }

        .footer .social-wrap > h1 > span {
            font-size: 30px;
        }

    .About-wrap.makeit {
        padding-top: 40px;
    }

    .About-wrap.sue-content .abt-sue {
        padding-top: 0px;
    }

    .About-wrap p {
        width: 100%;
    }

    .Banner-inner > h1 {
        font-size: 36px;
    }

    .About-inner-wrap p {
        margin-bottom: 0px;
    }
    /*.Banner-Hero.about{background-image: url(../images/about-hero-small.jpg);}*/
    .Banner-Hero.about > h1 {
        right: 0;
    }
    /*.Banner-Hero{background-image: url(../images/latest-news-small.jpg);}*/
    .About-wrap .container .row {
        flex-direction: column-reverse;
    }

    .About-wrap.sue-content .container .row {
        flex-direction: column;
    }

    .About-wrap.sue-content {
        margin-top: 0px;
    }

    .About-wrap .img-over {
        bottom: auto;
        transform: rotate(4.2deg);
    }

    .About-wrap img.makeit {
        position: relative;
        transform: rotate(-4.2deg);
    }

    .About-inner-wrap img {
        float: none;
        margin-top: 15px;
    }

    .About-wrap h3 {
        margin-top: 40px;
    }

    .news-wrap ul > li {
        width: 49.5%;
        margin-bottom: 20px;
    }

    .AboutUs-wrap ul.Cat-wrap > li {
        width: 100%;
        margin-bottom: 20px;
    }

        .AboutUs-wrap ul.Cat-wrap > li:last-child {
            margin-top: 0px;
        }

    .AboutUs-wrap .content-wrap .background {
        margin-bottom: 40px;
    }

        .AboutUs-wrap .content-wrap .background:last-of-type {
            margin-bottom: 0px;
        }

    .Blog-wrap ul.item-wrap > li {
        width: 100%;
    }

    .Banner-Hero.conatct > h1 {
        width: 100%; /*font-size: 36px;*/
        background: rgba(255,255,255,0.8);
        padding: 10px 0px;
        top: auto;
        color: #66665D;
        bottom: 20px;
    }

        .Banner-Hero.conatct > h1 span {
            color: #66665D;
        }

    .form-wrap input[type="text"] {
        width: 70%;
    }

    .form-wrap .selectNews {
        width: 50%;
    }

    .form-wrap textarea {
        width: 70%;
    }

    .video-wrap .box {
        margin: auto;
        margin-top: 30px;
        width: 75%;
    }

    .video-wrap h4 br {
        display: none;
    }

    .Banner-Hero.news > h1 {
        right: 0%;
    }

    .form-wrap h3 br {
        display: none;
    }

    .form-wrap h3 {
        font-size: 24px;
    }

    .Banner-Hero.about.about-hero > h1 {
        left: 2%;
    }

    .Banner-Hero.conatct-new > h1 {
        font-size: 42px;
    }
}
/*********************************
3. Media 768
*********************************/
@media (min-width:768px) {
    .header li {
        position: relative;
    }

        .header li a {
            font-size: 18px;
            font-weight: lighter;
            padding: 15px;
        }

    .header .menu {
        clear: none; /* float: right; */
        max-height: none;
        display: flex;
        justify-content: flex-start;
    }

    .header .menu-icon {
        display: none;
    }

    .header li a.active {
        color: #606161;
        text-decoration: underline;
        font-weight: bold;
    }

    .header ul {
        overflow: inherit;
    }
}
/*********************************
3. Media 640
*********************************/
@media (max-width:640px) {

    .Banner-Hero {
        background-image: url(../images/latest-news-small.jpg);
    }

        .Banner-Hero > h1 {
            transform: translate(-50%, -20%);
            left: 50%;
            top: 80%;
            width: 100%; /*font-size: 42px;*/
            background: rgba(255,255,255,0.8);
            padding: 10px 0px;
        }

            .Banner-Hero > h1 > span {
                font-size: 22px;
            }

        .Banner-Hero.about.about-hero > h1, .Banner-Hero.about.about-hero > h1 > span {
            color: #606161;
        }
    /*.Banner-Hero.news > h1 {transform: translate(0%, -50%); top: 70%; left:0%; width:auto; }*/
    /*.Banner-Hero.news{background-position: right;}*/
    .news-wrap ul > li .top-strip {
        height: 150px !important;
    }
    /*.Banner-Hero.about > h1{top: 55%; transform: translate(0,-45%);}*/
    .Banner-Hero.home > h1 { /*left: auto;*/
        bottom: 20px;
        top: auto;
    }

    .Banner-Hero.about > h1 {
        bottom: 20px;
        top: auto;
    }

    .Banner-Hero.news > h1 {
        bottom: 20px;
        top: auto;
    }

    .Banner-Hero.about.about-hero > h1 {
        left: auto;
        top: auto;
    }

    .Banner-Hero.conatct-new > h1 {
        right: auto;
        top: auto;
        bottom: 20px;
        left: auto;
    }

    .Banner-Hero.conatct-new {
        background-position: bottom;
    }
}
/*********************************
4. Media 567
*********************************/
@media (max-width:567px) {
    /* .footer .copy-wrap > ul > li > img{max-width: 90%;} */
    .Banner-Hero.blog {
        background-image: url(../images/blog-hero-small.jpg);
        background-size: contain;
    }
}
/*********************************
5. Media 480
*********************************/
@media (max-width:480px) {
    .About-wrap h3 {
        font-size: 30px;
    }

        .About-wrap h3 > span {
            font-size: 24px;
        }

    .footer .social-wrap > h1 {
        font-size: 30px;
    }

        .footer .social-wrap > h1 > span {
            font-size: 24px;
        }
    /*.Banner-Hero.about > h1, .Banner-Hero.about > h1 {font-size: 30px; }*/
    /*.Banner-Hero.about > h1 > span, .Banner-Hero.about > h1 > span {font-size: 20px; } */
    .header .social-links a {
        padding: 0px;
    }

    .glbl-btn {
        padding: 8px 20px 8px 20px;
        font-size: 16px;
        width: auto !important;
    }

    .btmTotop.circle {
        bottom: 2%;
    }

    .news-wrap ul > li {
        width: 100%;
    }

    .Banner-Hero > h1 {
        font-size: 36px;
    }

    .selectNews {
        padding: 7px 10px;
        font-size: 14px;
    }

    .news-Archive h4 {
        font-size: 16px;
    }
    /*.news-wrap ul > li:nth-child(4n){margin-bottom:60px; }*/
    .header .menu-btn:checked ~ .menu {
        max-height: 400px;
    }

    .news-wrap ul > li .top-strip {
        height: inherit !important;
    }

    .AboutUs-wrap ul.Cat-wrap > li .glbl-btn {
        font-size: 16px;
        padding: 8px 20px 4px 20px;
    }

    .Banner-Hero > h1 > span {
        font-size: 20px;
    }

    .Banner-Hero.conatct-new > h1 {
        font-size: 36px;
    }
}
/*********************************
6. Media 375
*********************************/
@media (max-width:375px) {
}