/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* {
    text-decoration: none;
    font-size: 0.8em;
    outline: none;
    padding: 0;
    margin: 0;
}

code, kbd, samp, pre, tt, var, textarea,
input, select, isindex, listing, xmp, plaintext {
    white-space: normal;
    font-size: 1em;
    font: inherit;
}

dfn, i, cite, var, address, em {
    font-style: normal;
}

th, b, strong, h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

a, img, a img, iframe, form, fieldset,
abbr, acronym, object, applet, table {
    border: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td, center {
    vertical-align: top;
    text-align: left;
}

body {
    font-family: arial;
    font-size: 12px;
    /*background: #0F162D;*//*#4A5A3A;*/
    /*line-height: 1;*/
    background-color:#02184D;
    /*min-height: 100%;*/
    background: url(images_index/livebg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

q {
    quotes: "" "";
}

ul, ol, dir, menu {
    list-style: none;
}

sub, sup {
    vertical-align: baseline;
}

a {
    color: inherit;
}

hr {
    display: none;
}

font {
    color: inherit !important;
    font: inherit !important;
    color: inherit !important; /* editor's note: necessary? */
}

marquee {
    overflow: inherit !important;
    -moz-binding: none;
}

blink {
    text-decoration: none;
}

nobr {
    white-space: normal;
}

#flake {color: #fff;position: absolute;z-index:60;opacity:1;font-size: 25px;top: -50px;}
.newyear {
    position:absolute;
    top:0;
    z-index:99999999999999999999999999;
    background-color:rgba(0,0,0,0.4);
    display:none;
    margin:0 auto;
    /*border:1px solid orange;*/
    width:100%;
}

.newyear .sub-newyear{
    background-image:url("image/2020.png");
    background-size:85%;
    background-position:center;
    background-repeat:no-repeat;
   width:80%;
        height:100vh;
    margin:0 auto;
}

@media screen and (min-width:1000px){
    .newyear .sub-newyear{
        width:100%;
        height:100vh;
        background-size:50%;

    }
}


/*Background image*/
#main {
    width:100%;
    height:100%;
    /*border:1px solid red;*/
    /*width: 1280px;*/
    /*height: 100%;*//*690px;*/
    /*border:3px solid green;*/
    /*overflow: hidden;*/
    /*margin-left:220px;*/
    margin: 0 auto;
    /*-moz-border-radius: 5px;
    -webkit-border-radius: 5px;*/
    
    /*background-position:center;*/
    /*padding:30px;*/
    /*margin-top:30px;*/
}



@font-face {
    font-family: Rockwell;
    src: url('ROCK.TTF');
}

div#links { /*background:url('images_index/header.gif') repeat-x;*/
    height: 96px;
}

div#links-wrapper {
    margin: 0 auto;
    width: 1100px;
    height: 96px;
}

#links-wrapper div.logo {
    width: 187px;
    height: 94px;
    float: left;
}

    #links-wrapper div.logo img {
        border: none;
    }


#links-wrapper div.partypopup {
    margin-top: 9px;
    margin-left: 0px;
}

div.LogontoAdrakmail {
    margin-top: 50px;
    margin-left: 850px;
    position: relative;
}

#links-wrapper div.quicklinks {
    float: right;
    margin-top: -24px;
    margin-right: 94px;
    position: relative;
}

#links-wrapper1 div.hidden-qlinks {
    position: absolute;
    width: 150px;
    overflow: hidden;
    background: #eeedf1;
    border: solid 2px #e1e1e1;
    top: 20px;
    display: none;
    padding-bottom: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left: 1px;
}

    #links-wrapper1 div.hidden-qlinks ul {
        list-style-type: none;
    }

        #links-wrapper1 div.hidden-qlinks ul li {
            height: 25px;
        }

            #links-wrapper1 div.hidden-qlinks ul li a {
                text-decoration: none;
                display: block;
                padding: 5px;
                font-size: 12px;
                font-family: arial;
                background: #fbfbfb;
                border: solid 2px #EEEDF1;
                color: #ae9d69;
            }

                #links-wrapper1 div.hidden-qlinks ul li a:hover {
                    background: #f4f3f3;
                    color: #335E09;
                }

#menu { /*background:#ae9d69;*/
    height: 51px;
}

div#menu-wrapper {
    margin: 0 auto;
    width: 920px;
    padding-top: 14px;
}

    div#menu-wrapper label {
        color: white;
        margin-right: 15px;
    }

    div#menu-wrapper input {
        height: 30px;
        margin-right: 25px;
        width: 115px;
    }

        div#menu-wrapper input.submit { /*background:url('images_index/button-bg.jpg') repeat-x;*/
            height: 29px;
            width: 128px;
            color: white;
            cursor: pointer;
            font-size: 7px;
        }

/*input#Bt_signin {
    background-color: transparent;
    height: 18px;
    width: 105px;
    color: white;
    font-size: 10px;
    cursor: pointer;
}*/

span#RequiredFieldValidator1 {
    background: none repeat scroll 0 0 white;
    border: 2px solid #C9C9C9;
    color: red;
    font-family: Tahoma;
    font-size: 10pt;
    font-weight: normal;
    padding: 3px;
}

span#Lb_error {
    background: none repeat scroll 0 0 white;
    border: 2px solid #C9C9C9;
    color: red;
    font-family: Tahoma;
    font-size: 10pt;
    font-weight: normal;
}

div#banner {
    height: 255px; /*background:url('images_index/banner-bg.gif');*/
}

div#banner-content {
    margin: 0 auto;
    width: 915px;
    overflow: hidden;
}

div#banner-img {
    float: left;
}


/*erp login*/

div#erp {
    margin-top: 273px;
    margin-left: 871px;
}

    div#erp ul {
        list-style-type: none;
    }

        div#erp ul li {
            margin-bottom: 10px;
        }

            div#erp ul li a {
                text-decoration: none;
                font-size: 12px;
                font-weight: bold;
                color: #05490a;
            }

                div#erp ul li a:hover {
                    text-decoration: none;
                    font-size: 12px;
                    font-weight: bold;
                    color: #7e6e3c;
                }


div#banner-img img {
    margin-top: 5px;
}


div#content {
    overflow: hidden; /*background:#fdffff;*/
}

div#content-wrapper {
    width: 100%;
}

div#content-top {
    width: 100%;
    height: 100%;
}

div#content-left {
    float: left;
    overflow: hidden;
    position: relative;
}

    div#content-left h3 {
        color: #6d6d6d;
        font-family: Rockwell;
        width: 255px;
        background: url('images_index/building-icon.jpg') no-repeat;
        height: 23px;
        padding: 22px 0px 0px 50px;
        margin-top: 5px;
        font-size: 11pt;
        font-weight: normal;
        margin-left: 80px;
    }



/*slider project photo*/
/*div#slider-bg {
    margin-top: 4px;
    height: 179px;
    margin-left: -15px;
    
}

div#slider_photo {
    padding: 1px 10px 0px 39px;
    height: 179px;
}

    div#slider_photo ul li a img {
        border: solid 2px white;
     width:240px;
     height:170px;
    }

    div#slider_photo span {
        width: 270px;
        height: 160px;
        display: inline-block;
        color: white;
        flex-align: start;
        text-align: justify;
        font-family: Arial;
        line-height:14px;
        letter-spacing:0.8px;
    }

    div#slider_photo b {
        font-weight: bolder;
        font-size: 14px;
    }*/



/*new joinees and birthday*/
div#content-new { position: absolute; margin-left: 620px;  overflow: visible;  margin-top: 3px;  width: 300px;}
    /*changed overflow from hidden to visible*/
div#content-new ul {  list-style-type: none; width: 100%;  }

div#content-new ul li {  height: 40px;   width: 100%;  display:inline   }

div#content-new ul li a {  text-decoration: none; padding-left:20px;  color: #003300; font-size: 10pt; font-weight: bold;}

div#content-new ul li a:hover {  text-decoration: none; color: #FFFFFF; font-size: 10pt;font-weight: bold;}

div#content-new ul li a:active { margin-top: 1px; }

.tooltip-new {display: none;position:absolute;z-index:1000; padding: 10px; left: 40px; background: #0e4908; 
             border-radius:3px 4px;
              opacity: 0.6; border: 2px solid #003300; top: 30px;width:420px; overflow: auto;}




/*left-link*/
.left-link a {
    color: #003300;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
}

    .left-link a:hover {
        color: white;
        text-shadow: 20px 12px 2px black;
        -webkit-text-shadow: 20px 12px 2px black;
        -o-text-shadow: 20px 12px 2px black;
        -moz-text-shadow: 20px 12px 2px black;
    }

.classname a {
    -moz-box-shadow: inset 0px 1px 0px 0px #578a2b;
    -webkit-box-shadow: inset 0px 1px 0px 0px #578a2b;
    box-shadow: inset 0px 1px 0px 0px #578a2b;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8bb85e), color-stop(1, #295207) );
    background: -moz-linear-gradient( center top, #8bb85e 5%, #295207 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8bb85e', endColorstr='#295207');
    background-color: #8bb85e;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-left-radius: 6px;
    text-indent: 0px;
    display: inline-block;
    color: #f7f7f7;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    font-style: normal;
    height: 25px;
    line-height: 25px;
    width: 186px;
    text-decoration: none;
    text-align: center;
}

    .classname a:hover {
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #295207), color-stop(1, #8bb85e) );
        background: -moz-linear-gradient( center top, #295207 5%, #8bb85e 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#295207', endColorstr='#8bb85e');
        background-color: #295207;
    }

    .classname a:active {
        position: relative;
        top: 1px;
    }


.top_glass_slider {
    /*border-bottom: 5px solid rgba(0,0,0,0);*/
    background: rgba(0,0,0,0.25);
    -o-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3),
    /*inset 0 10px rgba(255,255,255,0.2),*/
    inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3),
    /*inset 0 10px rgba(255,255,255,0.2),*/
    inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3),
    /*inset 0 10px rgba(255,255,255,0.2),*/
    inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.4);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
    inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
    /*inset 0 10px rgba(255,255,255,0.2),*/ /* Top Light Shadow */
    inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
    inset 0 -15px 30px rgba(0,0,0,0.4); /* Dark Background */
    text-decoration: none;
}


.top_glass {
    /*border-bottom: 5px solid rgba(0,0,0,0);*/
    /*background: rgba(0,0,0,0.25);
    -o-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3),*/
    /*inset 0 10px rgba(255,255,255,0.2),*/
    /*inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3),*/
    /*inset 0 10px rgba(255,255,255,0.2),*/
    /*inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3),*/
    /*inset 0 10px rgba(255,255,255,0.2),*/
    /*inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.4);*/
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.5),*/ /* Exterior Shadow */
    /*inset 0 1px rgba(255,255,255,0.3),*/ /* Top light Line */
    /*inset 0 10px rgba(255,255,255,0.2),*/ /* Top Light Shadow */
    /*inset 0 10px 20px rgba(255,255,255,0.25),*/ /* Sides Light Shadow */
    /*inset 0 -15px 30px rgba(0,0,0,0.4);*/ /* Dark Background */
    text-decoration: none;
}

.topglass_con {
    width:70%;
    height: 80px;
    overflow: hidden;
    /*margin-left:220px;*/
    margin: 0 auto;
    display: inline-block;
    position: relative;
    /*border:1px solid red;*/
    float:right;
    margin-top:1%;
}

.top_glass_pnl td {
    /*padding-right: 20px;*/
    height: 50px;
    color: white;
    letter-spacing: 1px;
    font-size: 13px;
    width:70px;
    /*border:1px solid #fff;*/
    /*border-style: solid;
    border-bottom:none;
border-width: 100px 2px;
-moz-border-image: url(image/top_glass_breaker.png) 100 2;
-webkit-border-image: url(image/top_glass_breaker.png) none 100 2;
-o-border-image: url(image/top_glass_breaker.png) 100 2;
-ms-border-image: url(image/top_glass_breaker.png) 100 2;*/
}






/*div#content-right ul li a.executive{background:url('images_index/executive-icon.jpg') no-repeat; padding:15px 0px 0px 40px;height:25px;}*/ /*new joinees*/
/*div#content-right ul li a.party{background:url('images_index/cake-icon.jpg') no-repeat; padding:14px 0px 0px 40px;}*/ /*bday party*/
/*div#content-right ul li a.mail{background:url('images_index/mail-icon.jpg') no-repeat;padding:5px 0px 0px 40px;}*/ /*logon to adrakmail*/
div#content-bottom {
    clear: both;
    /*margin-top: -210px;*/
    /*margin-left: 0px;*/
    position: absolute;
    /*border:1px solid black;*/
    width:40%;
    top:10%;
}

    div#content-bottom h3 {
        font-family: Rockwell;
        font-size: 11pt;
        font-weight: normal;
        /*color: #9b630b;*/
        color:#fff;
        background-position: 130px 0px;
        display: block;
        width: 212px;
        height: 30px;
        padding-top: 58px;
        margin-left: 15%;
        display:none;
    }


div#quote {
    width: 900px;
    overflow: hidden;
    display:none;
}

div#quote-left {
    height: 229px;
    width: 10px;
    float: left;
}

div#quote-content {
    width: 80px;
    float: left;
    margin-left:10%;
}

    div#quote-content p.quotes {
        margin-top: -3px;
        margin-left: 280px;
        width: 425px;
    }

span#lab {
    font-family: georgia;
    color: #7e6e3c;
    font-style: italic;
    font-size: 10pt;
}

.quotes-left {
    font-family: georgia;
    /*color: #105f03;*/
    color:#e3e6e8;
    font-style: italic;
    font-size: 11px;
    line-height: 1.3em;
    width: 800px;
}

.quotes-rightLabel2 {
    font-family: Palatino Linotype;
    /*color: #6c5833;*/
    color:#e3e6e8;
    margin-left:200px;
    font-size:11px;
}

div#quote-content ul {
    list-style-type: none;
    vertical-align: middle;
}

div#quote-content p.writer {
    margin-top: 1px;
    float: right;
    color: #010100;
    font-family: georgia;
    font-style: italic;
    font-size: 9pt;
    margin-right: 107px;
}

div#quote-right {
    float: left;
    width: 110px;
    height: 129px;
}

div#footer {
    width: 100%;
    height: 110px;
    clear: both;
    margin-top: 0px;
}

div#footer-top {
    height: 110px;
    width: 100%;
}

div#footer-wrapper {
    position: relative;
    margin: 0 auto;
    width: 920px;
}

    div#footer-wrapper img {
        float: left;
    }

div#footer-content {
    float: right;
    width: 250px;
    margin-top: 72px;
}

    div#footer-content .copyright {
        float: left;
        width: 200px;
    }

    div#footer-content .company a {
        margin-right: 5px;
        display: block;
        height: 42px;
        float: left;
    }

        div#footer-content .company a img {
            border: none;
        }

/* Easy Slider */

#slider4 ul {
    width: 880px;
    margin-left: 380px;
}

#slider4 li {
    overflow: hidden;
    width: 880px;
}




#slider ul, #slider li,
#slider2 ul, #slider2 li {
    list-style: none;
}

#slider2 {
    margin-top: 0px;
    width: 850px;
}

    #slider2 ul {
        margin-left: 30px;
        width: 850px;
        height: 200px;
    }

#slider li {
    width: 1003px;
    height: 178px;
    overflow: hidden;
}


#slider2 li {
    overflow: hidden;
    height: 100px;
}

#prevBtn, #nextBtn,
#slider1next, #slider1prev {
    position: relative;
    display: block;
    width: 34px;
    height: 33px;
    left: 1255px;
    bottom: 40px;
}

#nextBtn, #slider1next {
    position: relative;
    display: block;
    left: 1255px;
    bottom: 200px;
}



    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a {
        position: relative;
        display: block;
        width: 34px;
        height: 33px;
        background: url('images_index/btn_prev.png') no-repeat 0 0;
    }

        #prevBtn a:hover, #nextBtn a,
        #slider1next a, #slider1prev a:hover {
            position: relative;
            display: block;
            width: 34px;
            height: 33px;
            background: url('images_index/btn_prevh.png') no-repeat 0 0;
        }

        #prevBtn a:active, #nextBtn a,
        #slider1next a, #slider1prev a:active {
            position: relative;
            display: block;
            width: 34px;
            height: 33px;
            background: url('images_index/btn_preva.png') no-repeat 0 0;
        }




    #nextBtn a, #slider1next a {
        position: relative;
        background: url('images_index/btn_next.png') no-repeat 0 0;
    }

        #nextBtn a:hover, #slider1next a:hover {
            position: relative;
            background: url('images_index/btn_nexth.png') no-repeat 0 0;
        }

        #nextBtn a:active, #slider1next a:active {
            position: relative;
            background: url('images_index/btn_nexta.png') no-repeat 0 0;
        }



/* End Easy Slider */

/* button styles */

/*#head-wrapper div.quicklinks a.button{
   /*border-top: 1px solid #559912;*/
/*background: #335E09;   
   background: -webkit-gradient(linear, left top, left bottom, from(#698052), to(#9bd665));   
   background: -webkit-linear-gradient(top, #335E09,#698052 );   
   background: -moz-linear-gradient(top, #335E09,#698052);   
   background: -ms-linear-gradient(top, #335E09,#698052);   
   background: -o-linear-gradient(top, #335E09,#698052);
   padding: 9px 18px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 13px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;*/

/*}*/


#links-wrapper1 {
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);*/
    color: #003300;
    cursor: pointer;
    padding: 2px 0px 6px;
    position: relative;
    text-decoration: none;
}

    #links-wrapper1 :hover {
        /*background-color: #4a6434;*/
        color: #FFFFFF;
    }

    #links-wrapper1 :active {
        top: 1px;
    }

.small.button, .small.button:visited {
    font-size: 11px;
}

.button, .button:visited, .medium.button, .medium.button:visited {
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    /*text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);*/
}

.small.button1, .small.button1:visited {
    font-size: 14px;
    font-weight: bold;
}

.button1 .button1:visited, .medium.button1, .medium.button1:visited {
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

div.punchdetails {background-image:url('image/punchbg.png');
    float:left;opacity:1;width:444px;height:210px;position:absolute;top:438px;border-radius: 0 5px 5px 0;
}

div.punchdetails #punchheader {
    width: 400px;margin-left:20px;margin-top:14px;
}

div.punchdetails #punchheader tr td{
    background-color:#578a2b;
    padding:5px;
}



.hide{visibility:hidden}
.toggler {padding:0 0 10px 0; margin-left:888px;margin-top:-50px; position: absolute;border-radius:3px; }
#effect {position: relative;}
#effect h3 { margin: 0; padding: 0.4em; text-align: center; border: 1px solid gray;border-radius:3px;background-color:#d1a846}
#effect p{padding-top:10px;opacity:1;}
#effect p a{color:#084605;padding-top:10px;opacity:1;}

.tn-box {
	width: 360px;
	position: relative;
	margin: 0 auto 20px auto;
	padding: 25px 15px;
	text-align: left;
	border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);  
	opacity: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	cursor: default;
	display: none;
}

.tn-box p {
	font-weight: bold;
	font-size: 16px;
	margin: 0;
	padding: 0 10px 0 50px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

.tn-box a{color:#003300;margin-left:50px;font-size:12px;}

.tn-box:before{
	text-align: center;
	border: 3px solid #003300;
	margin-top: -17px;
	top: 50%;
	left: 20px;
	width: 30px;
	content: 'i';
	font-size: 30px;
	color: #003300;
	position: absolute;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.tn-progress {
	width: 0;
	height: 4px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	bottom: 5px;
	left: 2%;
	border-radius: 3px;
	box-shadow: 
		inset 0 1px 1px rgba(0,0,0,0.05), 
		0 -1px 0 rgba(255,255,255,0.6);
}

/* Colors */

.tn-box-color-1{
	background: #ffe691;
	border: 1px solid #f6db7b;
}
.tn-box-color-1 p {
	color: #7d5912;
}

/* Fire the animations */

.tn-box {
	display: block;
	-webkit-animation: fadeOut 50s linear forwards;
	-moz-animation: fadeOut 50s linear forwards;
	-o-animation: fadeOut 50s linear forwards;
	-ms-animation: fadeOut 50s linear forwards;
	animation: fadeOut 50s linear forwards;
}

.tn-box .tn-progress {
	-webkit-animation: runProgress 15s linear forwards 2s;
	-moz-animation: runProgress 15s linear forwards 2s;
	-o-animation: runProgress 15s linear forwards 2s;
	-ms-animation: runProgress 15s linear forwards 2s;
	animation: runProgress 15s linear forwards 2s;
}

/* If you use JavaScript you could add a class instead: */

/*.tn-box.tn-box-active {
	display: block;
	-webkit-animation: fadeOut 5s linear forwards;
	-moz-animation: fadeOut 5s linear forwards;
	-o-animation: fadeOut 5s linear forwards;
	-ms-animation: fadeOut 5s linear forwards;
	animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
	-webkit-animation: runProgress 4s linear forwards 0.5s;
	-moz-animation: runProgress 4s linear forwards 0.5s;
	-o-animation: runProgress 4s linear forwards 0.5s;
	-ms-animation: runProgress 4s linear forwards 0.5s;
	animation: runProgress 4s linear forwards 0.5s;
}*/


@-webkit-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -webkit-transform: translateY(0px);}
	99% { opacity: 0; -webkit-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-moz-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -moz-transform: translateY(0px);}
	99% { opacity: 0; -moz-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-o-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -o-transform: translateY(0px);}
	99% { opacity: 0; -o-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-ms-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -ms-transform: translateY(0px);}
	99% { opacity: 0; -ms-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; transform: translateY(0px);}
	99% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-webkit-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-moz-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-o-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-ms-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

/* Last example pauses on hover (causes problems in WebKit browsers) */

.tn-box.tn-box-hoverpause:hover, 
.tn-box:hover .tn-progress{
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;

}

nav {
    width:100%;
    min-height:9vh;
    display:flex;
    justify-content:space-around;
    color: #f2e5e5;
    background-color:#211f1f;
    align-items:center;
    border-right:50px solid #F24002;
    box-sizing:border-box;
}
.logo{
    font-size:20px;
    text-transform:uppercase;
    font-family:sans-serif;
    font-weight:bold;
    letter-spacing:3px;
}
nav li{
    list-style:none;
}
.nav-links{
    display:flex;
    justify-content:space-around;
    width:55%;
    font-size:17px;
    font-family:sans-serif;
    font-weight:bold;
    text-decoration:none;
    letter-spacing:3px;
}

.nav-links img{
    width:55%;
}

.bars {
    width:25px;
    height:25px;
    display:none;
}
.br1{
     background-color:#fff;
     width:100%;
     height:2px;
     margin:5px;
     display:flex;
     /*background-color:#fff;*/
}

.login-div{
    width:20%; 
    height:35%; 
    position:absolute; 
    /*background-image:linear-gradient(120deg,#706B65,#e66d13);*/ 
    /*background-image:radial-gradient(120deg,#706B65,#211F1F);*/
    /*background-color:#4a4646;*/
    /*background-color: rgba(255,255,255, 0.2);*/
    background-color: rgba(0, 0, 0, 0.5);
    padding:60px 40px 80px 40px;
    top:10%;
    left:50%;
    transform:translate(-50%,50%);
    /*border-radius:10px;*/
}
.login-div h1{
    text-align:center;
    margin-bottom:40px;
    font-size:5em;
    color:#d8d0d0;
}

.txtb {
    border-bottom: 2px solid #adadad;
    position: relative;
    margin: 30px 0;
}

.txtb input{
    /*height: 30px; width: 90%; 
    -moz-box-shadow: 3px 3px 5px #151212; 
    -webkit-box-shadow: 3px 3px 5px #151212; 
    box-shadow: 3px 3px 5px #151212;*/ 
    /*z-index:999999 !important;*/
    /*color:#148B00;*/
  font-size:3em;
  color: #ebdddd;
  border:none;
  width: 100%;
  background: none;
  outline: none;
  padding: 0 5px;
  height: 50px;
  text-align:center;
}
@-webkit-keyframes autofill {
    to {
       color: #ebdddd;
        background: none;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
.txtb span::before {
  z-index:-1 !important;
  content: attr(data-placeholder);
  position:absolute;
  top:50%;
  left:18%;
  color:#a19393;
  /*color:#f1e8e8;*/
  transform:translate(-50%);
  transition:.5s;
  font-size:4em;
  opacity:0.6;
}
.txtb span::after{
    content:'';
    position:absolute;
    width:0%;
    height:2px;
    transition:.5s;
    background-image:linear-gradient(120deg,#cf4242,#e66d13); 
}
.focus + span::before{
    top:-5px;
}
.focus + span::after{
    width:100%;
}

.btnlogin{
letter-spacing: 1px; -moz-box-shadow: 3px 3px 5px #151212; 
-webkit-box-shadow: 3px 3px 5px #151212; box-shadow: 3px 3px 5px #151212; height:35px; 
border-radius:4px; z-index:999999 !important;
width:100%;
height:20%;
border:none;
/*background-color:#f24002;*/
background:linear-gradient(120deg,#e66d13,#cf4242,#e66d13);
background-size:200%;
color:#e0d2d2;
font-size:2em;
cursor:pointer;
display:block;
transition:.5s;
                                  
}
.btnlogin:hover{
    background-position:right;
}
.footrtbl{
    margin: 0 auto; 
    color: white; top:91%; 
    width:95%; left:2.5%; 
    position:absolute; 
    font-size: 4.5em; 
    text-decoration:none
}

@media screen and (max-width:1200px){
    .nav-links{
    display: flex;
    justify-content: space-around;
    width: 45%;
    }
    .login-div{
        width:30%;
         /*margin-top: 30%;*/
    }
}
@media screen and (max-width:768px){
    body{
        overflow:hidden;
        /*font-family: arial;
    font-size: 12px;*/
    /*background: #0F162D;*//*#4A5A3A;*/
    /*line-height: 1;*/
    background-color:#02184D;
    /*min-height: 100%;*/
    background: url(images_index/livebg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    /*height:100%;*/
    }
    .nav-links{
    position: absolute;
    right: 0px;
    height: 80vh;
    top:10vh;
    background-color:#211f1f;
    width: 20%;
    display:flex;
    flex-direction: column;
    align-items: center;
    font-size:14px;
    justify-content:inherit;
    transform:translateX(100%);
    transition:0.5s ease-in;
    padding-left:15px;
   
    }
    .nav-links li{
        /*opacity:0;*/
    }
    .nav-links img {
     width:55%;
}
    .bars {
    display:block;
    margin:0px -20px 0px 0px;
    cursor:pointer;
}
.br1{
     background-color:#d4cbcb;
     width:100%;
     height:2px;
     margin:5px;
     display:flex;
     /*background-color:#fff;*/
}
    nav {
    height: 10vh;
  }
  /*.login-div{
    position: absolute;
    margin-top: 70%;
  }*/
    .login-div{
        /*position: absolute;*/
        width:45%; 
    height:35vh; 
    position:absolute; 
    background-color: rgba(0, 0, 0, 0.6);/*#211F1F;*/
    padding:60px 40px 80px 40px;
    top:-50px;
    /*left:50%;*/
    transform:translate(-50%,50%);
    }
    .txtb {
    border-bottom: 2px solid #adadad;
    position: relative;
    margin: 30px 0;
}
    .txtb span::before {
        font-size:3em;
    }
    .btnlogin {
        font-size:1.5em;
    }
    .login-div h1 {
        margin-bottom:40px;
    }
    .txtb input {
        font-size:3em;
  color: #ebdddd;
  border:none;
  width: 100%;
  background: none;
  outline: none;
  padding: 0 5px;
  height: 45px;
    }
    .footrtbl{
    margin: 0 auto; 
    color: white; 
    /*margin-top:25%;*/ 
    width:95%; left:2.5%; 
    position:absolute; 
    font-size: 4em; 
    text-decoration:none;
    /*background-color:blue;*/
 }
}
.nav-active{
 transform:translateX(0%);
 z-index:1 !important;
}
@keyframes navlinkfade{
    from {
        opacity:0;
        transform:translateX(50px);
    }
    to {
        opacity:1;
        transform:translateX(0px);
    }
}
[data-title] {
  font-size: 11px;
  position: relative;
}

[data-title]:hover::before {
  content: attr(data-title);
  position: absolute;
  bottom: -26px;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 2px;
  background: #C6C1BF;/*#000; #C6C1BF*/
  color: #000;
  font-size: 12px;
  font-weight:lighter;
  font-family: 'Trebuchet MS';
  white-space: nowrap;
  letter-spacing:normal;
  opacity:1;
  z-index:1111111 !important;
}
[data-title]:hover::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 8px;
  display: inline-block;
  color: #000;
  border: 8px solid transparent;	
  border-bottom: 8px solid #C6C1BF;
}
.coviddiv{
   width:80%;
   /*overflow-y:scroll;*/
   min-height:200px;
   /*background-color:white ;box-shadow:0px 1px  3px rgba(0, 0, 0, 0.3);*/
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-shadow:#000 1px 0 10px;
   left:0;
   right:0;
   margin-top:35px;
   margin:auto;
   padding:30px;
   display:block;
}
.coviddiv img{
    width:100%;
    left:0;
    right:0;
    margin:auto;
    margin-bottom:50px;
}
#btnstrns{
    float:right;
    font-size:1.3em;
    font-weight:bold;
    margin-right:10%;
    margin-top:5%;
    margin-bottom:5%;
    font-family:'Trebuchet MS';
}
div#covidmsg{
    width:360px;
    height:47px;
    /*background-color:transparent;*/
    display:block;
    float:left;
    margin-left:0;
    margin-top:5%;
    padding:10px;
    /*background-color:#ed371e;*//*#167BAF;*//*#ed371e;*/
    /*background-color:#ef703f;*/
    /*box-shadow:0px 1px  3px rgba(0, 0, 0, 0.3);*/
    /*opacity:.3;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    cursor:pointer;
    background: #333333;  
   background: -webkit-linear-gradient(to right, #dd1818, #333333); 
   background: linear-gradient(to right, #dd1818, #333333); 
}
div#covidmsg div> p{
    opacity:1;
    text-align:left;
     text-shadow:#000 1px 0 10px;
    font-family:'Trebuchet MS';
    font-size:14px;
    font-weight:bold;
    color:white;
}
div#covidmsg div > img{
    width:57px;
}
div#whoDiv{
    display:block;
    float:left; position:absolute; margin-top:10%
}
div#ZohoDiv {
    display: block;
    float: right;
    position: absolute;
    margin-top: 10%
}
@media screen and (max-width:500px){
    div#whoDiv{
        display:none;
    }
    div#covidmsg{
        margin-top:-3px;
    }
}