/* Author : Vinothraja | Date : 18-Aug-2016 */
@charset "UTF-8";
/* CSS Document */
@font-face {font-family:monotype; src:url(../fonts/Monotype%20Corsiva.ttf);}
@font-face {font-family:amudham; src:url(../fonts/AMUDHAM.TTF);}
* {padding:0; margin:0;}
body {background:url(../images/bg.png) repeat; font-family:Arial, Helvetica, sans-serif;}
.container {float:left; width:100%; height:100%;}

.icon1 {float:right; width:100%; height:100%; background:url(../images/icon1.png) no-repeat; cursor:pointer; background-size: contain;}
            .icon2 {float:right; width:100%; height:100%; background:url(../images/icon2.png) no-repeat; cursor:pointer; background-size: contain;}
            .icon3 {float:right; width:100%; height:100%; background:url(../images/icon3.png) no-repeat; cursor:pointer; background-size: contain;}
            .icon4 {float:right; width:100%; height:100%; background:url(../images/icon4.png) no-repeat; cursor:pointer; background-size: contain;}
            .icon5 {float:right; width:100%; height:100%; background:url(../images/icon5.png) no-repeat; cursor:pointer; background-size: contain;}
            .icon6 {float:right; width:100%; height:100%; background:url(../images/icon6.png) no-repeat; cursor:pointer; background-size: contain;}
            .icon7 {float:right; width:100%; height:100%; background:url(../images/icon7.png) no-repeat; cursor:pointer; background-size: contain;}
            


/*** login_style.css ***/

.logo_div {float:left; width:64%; margin:5% 3% 0 0;}
.logo {float:left; width:100%; text-align:center; opacity:.99;}
.title_div {float:left; width:100%; height:auto; background:#3c2c17; border-radius: 0px 10px 10px 0px; margin-top:-14px; padding:12px 0px; opacity: .99;}
.title_hd_tm {float:left; width:100%; text-align:center; font-family:monotype; font-size:3em; -webkit-text-fill-color: transparent; text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000;}
.title_hd_eng {float:left; width:100%; text-align:center; font-family:monotype; font-size:3em; -webkit-text-fill-color: transparent; text-shadow: 0px 0px 0px #dbc497, 1px 3px 4px #000;}
.login_div {
    float: left;
    width: 25%;
    margin: 5% 0 0 7%;
}
.login_div_div {float:left; width:100%; background-color:#3c2c17; border-radius: 20px 0px 0px 20px; padding:10px;}
.pwd_div {float:left; width:100%; height:auto;}
.pwd_disp {float:left; width:20%; height:100%; border:1px solid #dbc497; margin:2%;}
.pwd_bullet {width:15px; height:15px; border-radius:25px; background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b); margin:40%;}
.keypad_div {float:left; width:100%;}
.keypad_div_row {float:left; width:90%; margin:0 5%;}
.keypad {float:left; width:24%; height:100%; background: -webkit-linear-gradient(#fdf5b5, #ecdaa7, #bc8322, #d9a73b); border-radius:5px; margin:4%; cursor:pointer;}
.keypad_txt {float:left; width:100%; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:42px; text-align:center; padding:15px 0px;-webkit-text-stroke: 1px #ceba82;}

@media screen and (max-width: 1280px) {
    .title_hd_tm, .title_hd_eng, .keypad_txt {
        font-size: 36px;
    }
}

@media screen and (max-width:1136px) {
	.keypad_txt {font-size:32px;}
}
@media screen and (max-width:1024px) {
	.pwd_div {width:95%;}
	.pwd_bullet {margin:35%;}
}
@media screen and (max-width:960px) {
	.keypad_txt {font-size:24px;}
}
@media screen and (max-width:768px) {
	.logo_div {width:100%; margin:0;}
	.title_div {border-radius:10px;}
	.login_div {width:100%; margin:0;}
	.login_div_div {border-radius:10px;}
        .keypad_txt {font-size:38px;}
}