@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i') @import url('https://fonts.googleapis.com/css?family=Anton&subset=latin-ext,vietnamese') @import url('https://fonts.googleapis.com/css?family=Anton|Kaushan+Script&subset=latin-ext,vietnamese');


body {
    margin: 0px;
    padding: 0px;
}

.maskbanner {
    width: 100%;
    height: 650px;
    background: url(/../NewImages/mask-banner.jpg) center center no-repeat;
  
}

ul.maskbanner
{
     width:100%;
     text-align:center;
     list-style:none;
     margin:0;
     padding:0;
}

    ul.maskbanner li
    {
     width:100%;
     text-align:center;
   }

        ul.maskbanner li.toplogo img
        {
            margin:42px 0 0px 0;

        }

        ul.maskbanner li.headingtext {
            font-size: 70px;
            color: #f8c21e;
            font-family: 'Anton', sans-serif;
        }

        ul.maskbanner li.subheading {
            color: #ffcd33;
            font-size: 26px;
            font-family: 'Raleway', sans-serif;
            font-weight: 300;
        }

            ul.maskbanner li.subheading img
            {
                 position:relative;
                 top:-7px;
                 margin:0 10px;
   
            }

            ul.maskbanner li.subheading span {
                color: #fff;
            }

        ul.maskbanner li p 
        {
            font-family: 'Raleway', sans-serif;
            font-size:16px;
            color:#fff;
            font-weight:300;
            padding:0 80px;
            line-height:25px;
        }


        ul.maskbanner li.diwalitext {
            font-size: 26px;
            color: #fff;
            font-family: 'Kaushan Script', cursive;
        }


            ul.maskbanner li.diwalitext span {
               color: #ffcb2d;
            }


        ul.maskbanner li.bannerpic img
        {

             position:absolute;
             bottom:-50px;
             right:0;
        }



.maskwrap {
    width: 1140px;
    margin: 0 auto;
    position: relative;
}






.clearfix
{
     clear:both;

}

.rightmask {
    width: 100%;
    float: left;
    margin-bottom: 30px;
    font-family: 'Raleway', sans-serif;
}

.rightmask .leftcol
{
     width:50%;
     float:left;
     margin-top:50px;
}


    .rightmask .leftcol h2 {
        margin: 0px;
        padding: 0px;
        font-family: 'Raleway', sans-serif;
        font-size:29px;
        font-weight:700;
        line-height:38px;
    }

        .rightmask .leftcol h2 a {
            color: #010101;
            text-decoration:none;
        }

            .rightmask .leftcol h2 a:hover {
                color:#ac0707;
                text-decoration: none;
            }

        .rightmask .leftcol h2 img {
            margin: 0px;
            padding: 0px;
        }

    .rightmask .leftcol p {
        margin: 10px 0 0;
        padding: 0px;
        font-family: 'Raleway', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #010101;
    }

        .rightmask .leftcol p span.more {
            font-size: 14px;
            font-weight: 700;
        }

            .rightmask .leftcol p span.more a {
                text-decoration: none;
                color: #d1a00a;
            }

                .rightmask .leftcol p span.more a:hover
                {
                 color:#000;
                          }


    .rightmask .leftcol a.maskbuybtn {
        background: #ac0707;
        color:#fff;
        text-decoration:none;
        font-size:15px;
        padding:10px 13px;
        float:left;
        margin:10px 0 10px;
        font-weight:600;
    }

        .rightmask .leftcol a.maskbuybtn:hover {
            background:#f8c322;
            color:#000;
        }


        .rightmask .leftcol p span.maskprice {
            font-family: Arial;
            font-size: 22px;
        }



    .rightmask .leftcol select {
        background: #ececec;
        border: #b7b4b4 1px solid;
        height: 35px;
        margin: 15px 0px 8px;
        width: 167px;
        padding: 0 5px;
        font-family: 'Raleway', sans-serif;
        color: #312222;
        font-size: 16px;
        font-weight: 600;
    }

    .leftmask .rightcol select:focus {
        outline: none !important;
    }



                .rightmask .rightcol {
                    width: 50%;
                    float: right;
                    text-align: right;
                }




.leftmask {
    width: 100%;
    float: left;
    margin-bottom: 30px;
    font-family: 'Raleway', sans-serif;
}

    .leftmask .rightcol {
        width: 50%;
        float: right;
        margin-top: 50px;
    }


    .leftmask .rightcol h2 {
        margin: 0px;
        padding: 0px;
        font-family: 'Raleway', sans-serif;
        font-size: 29px;
        font-weight: 700;
        line-height: 38px;
    }

    .leftmask .rightcol h2 a {
        color: #010101;
        text-decoration: none;
    }

    .leftmask .rightcol h2 a:hover {
        color: #ac0707;
        text-decoration: none;
    }

    .leftmask .rightcol h2 img {
        margin: 0px;
        padding: 0px;
    }

    .leftmask .rightcol p {
        margin: 10px 0 0;
        padding: 0px;
        font-family: 'Raleway', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #010101;
    }

    .leftmask .rightcol p span.more {
        font-size: 14px;
        font-weight: 700;
    }

    .leftmask .rightcol p span.more a {
        text-decoration: none;
        color: #d1a00a;
    }

    .leftmask .rightcol p span.more a:hover {
        color: #000;
    }


    .leftmask .rightcol a.maskbuybtn {
        background: #ac0707;
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        padding: 10px 13px;
        float: left;
        margin: 10px 0 10px;
        font-weight: 600;
    }

    .leftmask .rightcol a.maskbuybtn:hover {
        background: #f8c322;
        color: #000;
    }

        .leftmask .rightcol select {
            background: #ececec;
            border: #b7b4b4 1px solid;
            height: 35px;
            margin: 15px 0px 8px;
            width: 167px;
            padding: 0 5px;
            font-family: 'Raleway', sans-serif;
            color: #312222;
            font-size:16px;
            font-weight:600;
        }

            .leftmask .rightcol select:focus
            {
             outline:none !important;
            }


            .leftmask .rightcol p span.maskprice {
                font-family: Arial;
                font-size: 22px;
            }


    .leftmask .leftcol {
        width: 50%;
        float: left;
        text-align: left;
    }


ul.locationpart {
    width: auto;
    background: #ffcb2d;
    height: 50px;
    margin: 0px 0 50px;
    padding: 0px 20px 0 0;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
}

ul.locationpart li
{
 width:auto;
 float:left;
 list-style:none;
}

    ul.locationpart li.textpart {
        font-size: 17px;
        color: #0d0b0b;
        font-weight:600;
        padding-top:12px;
    }

    ul.locationpart li select {
        background: #f6f0dc;
        border: none;
        height: 29px;
        padding: 0 20px 0 10px;
        margin-top: 8px;
        margin-left: 10px;
        font-family: 'Raleway', sans-serif;
        color: #312222;
        font-size: 16px;
        font-weight: 600;
    }

    ul.locationpart li select:focus
    {
   outline:none;
    }

.maskfooter {
    background: #202019;
    text-align: center;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    color:#fff;
    padding:15px 0;
    margin-top:20px;
}

.mobilemask img 
{
    display:none;
  }



@media screen and (max-width:40em) 
{

.maskwrap {
width: 80%;
}

    .rightmask .leftcol {
        width: 100%;
        float: none;
        margin-top: 0px;
    }


    .rightmask .rightcol 
    {
        width: 100%;
        float:none;
    }

    .rightmask .rightcol  img
    {
      display:none;

    }


    .leftmask .leftcol
    {
         width:100%;
         float:none;
    }

    .leftmask .leftcol img
    {
    display:none;
    }

    .leftmask .rightcol {
        width: 100%;
        float: none;
        margin-top: 0;
    }

    ul.maskbanner li.headingtext
    {
        font-size: 25px;
    }

    ul.maskbanner li.subheading 
    {
      font-size: 17px;
    }

        ul.maskbanner li.subheading img
        {
            display: none;
        }

    ul.maskbanner li p {
        font-size: 14px;
        padding: 0 10px;
        line-height: 16px;
    }


    ul.maskbanner li.bannerpic img
    {
   display:none;
    }


    .maskbanner
    {
    height:auto;
    }


    .mobilemask
    {
   text-align:center;
    }

    ul.maskbanner li.toplogo img
    {
      margin: 22px 0 0px 0;
    }



    .mobilemask img {
        display: block;
        width: 90%;
    }

    ul.locationpart img
    {
 display:none;
    }

    ul.locationpart {
        width: 100%;
        height: auto;
        margin: 20px 0 20px;
    }

        ul.locationpart li
        {
            width: 100%;
            text-align:center;
        }

    .rightmask .leftcol h2 {
        text-align: center;
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 20px;
    }

    .leftmask .rightcol h2 {
        text-align: center;
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 20px;
    }


    .rightmask .leftcol p
    {
         text-align:center;
    }

    .leftmask .rightcol p
    {
        text-align: center;
    }


    .rightmask .leftcol a.maskbuybtn {
        float: none;
        display: block;
        text-align: center;
    }

    .leftmask .rightcol a.maskbuybtn {
        float: none;
        display: block;
        text-align: center;
    }

}