.panel {background-color: #444;height: 34px;padding: 10px;}
.panel a#login_pop, .panel a#join_pop {border: 2px solid #aaa;color: #fff;display: block;float: right;margin-right: 10px;
padding: 5px 10px;text-decoration: none;text-shadow: 1px 1px #000;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;
-o-border-radius: 10px;border-radius: 10px;}
a#login_pop:hover, a#join_pop:hover {border-color: #eee;}
.overlay {background-color: rgba(0, 0, 0, 0.6);bottom: 0;cursor: default;left: 0;opacity: 0;position: fixed;right: 0;top: 0;
visibility: hidden;z-index:9;-webkit-transition: opacity .5s;-moz-transition: opacity .5s;-ms-transition: opacity .5s;-o-transition: opacity .5s;
transition: opacity .5s;}
.overlay:target {visibility: visible;opacity: 1;}
.popup {background-color: #fff;display: inline-block;left: 50%; width:60%;opacity: 0;padding: 15px;position: fixed;text-align: justify;top: 40%;
visibility: hidden;z-index: 1000;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: opacity .5s, top .5s;-moz-transition: opacity .5s, top .5s;-ms-transition: opacity .5s, top .5s;-o-transition: opacity .5s, top .5s;transition: opacity .5s, top .5s;}
.overlay:target+.popup {top: 50%;opacity: 1;visibility: visible;}

.close {background:#023D8A url(../images/wrong-icon.png) no-repeat center ;height: 30px;line-height: 30px;position: absolute;right: 5px;text-align: center;
text-decoration: none;top:5px;width: 30px;
}
.close:before {color: rgba(255, 255, 255, 0.9);content: "";font-size: 24px;text-shadow: 0 -1px rgba(0, 0, 0, 0.9);}
.close:hover {background-color:#DE030E;}

.popup p, .popup div {margin-bottom: 10px;}
.popup label {display: inline-block;text-align: left;width: 120px;}
/*.popup input[type="text"], .popup input[type="password"] {
border: 1px solid;
border-color:#E9E9E9;
margin: 0;
padding: 0;


}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
border-color:#E9E9E9;
}*/




.btn { float:left; width:99%;  height: auto; line-height:40px; margin:0px 0px 0px 0px; text-align:center; padding:0px  ; background:#023D8A; font-size:16px; color:#FFF; font-weight:normal; cursor:pointer; border:none; }
.btn:hover { background:#DE030E; color:#FFF; }


.popup-form { float:left; width:48%; height:auto; min-height:100px;  margin:1%; padding:0;}
.popup-form ul { float:left; margin:0; padding:0; list-style:none;}
.popup-form ul li { float:left; width:100%; height:auto; margin:10px 0px ; padding:0px;}
.bor123 { float:left; font-size:13px; padding:0 0 0 1%; color:#666 !important;  width:98% !important; height:38px; border:1px solid #E9E9E9; background:#FCFCFC; }

.like-btn { float:left; width:auto; height:auto; margin:0; padding:0; display:block;} 
.like-btn ul { float:left; margin:0; padding:0; list-style:none;}
.like-btn ul li { float:left; width:100%; height:auto; margin:10px 0; padding:0;}
.like-btn ul li a { display:block;}
.like-btn ul li a:hover {opacity: 0.8;}

/*Recharge-PLANS*/
.recharge-plans-box { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0; padding:0;}

.recharge-plans-form { float:left; width:100%; height:auto; min-height:30px; margin:0px !important; padding:0; border:1px solid #CCC;}
.recharge-plans-form ul { float:left; width:100%; margin:0; padding:0; list-style:none;}
.recharge-plans-form ul li { float:left; width:31%; height: auto; min-height:30px; margin:1%; padding:0;}
.recharge-plans-form-sel { float:left;font-size:14px; margin:0; padding:0 0 0 1%; color:#333;  width:99%; height:35px; line-height:35px !important; border:1px solid #CCC;  background:#F4F4F4; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}
.recharge-plans-form-sel:focus { border:1px solid #023D8A; color:#333; background:#FFF; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }

.recharge-plans-table { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0 !important; padding:0;}
.recharge-plans-table ul { float:left; margin:0; padding:0; list-style: none;}
.recharge-plans-table ul li { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#F1F1F1; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}
.recharge-plans-table ul li.bg { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#E4E4E4; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}

.amount-validity { float:left; width:19%; height:30px; line-height:30px; font-size:14px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:0 !important; padding:0 0 0 1%;}
.plan-details { float:left; width:59%; height:30px; line-height:30px; font-size:14px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:0 !important; padding:0 0 0 1%;}

.amount-validity-text { float:left; width:19%; height: auto; line-height:18px; font-size:13px; background: none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:1% 0 1% 1%;}
.plan-details-text { float:left; width:59%; height: auto; line-height:17px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:1% 0 1% 1%;}
.details-text { float:left; width:73%; height:auto; line-height:18px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:0 0 0 0 !important;}
/*Recharge-PLANS*/

.button { float:left; width: 80px; height: auto; margin:0 !important; padding:0; display:block;}
.button a { float:left; width:80px; height:26px; line-height:26px; margin:2px 0 2px 10px; padding:0; text-align:center !important; background:#023D8A; font-size:14px; color:#FFF !important; text-decoration:none; font-weight:400;}
.button a:hover { color:#FFF; background:#DE030E;}

/* Portrait tablet to landscape and desktop */
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {

.btn { float:left; width:99%;  height: auto; line-height:40px; margin:0px 0px 0px 0px; text-align:center; padding:0px  ; background:#023D8A; font-size:16px; color:#FFF; font-weight:normal; cursor:pointer; border:none; }
.btn:hover { background:#DE030E; color:#FFF; }

.sm-logo { float:right; width: auto; height: auto; margin:10px 0 0 0; padding:0; }

.popup-form { float:left; width:48%; height:auto; min-height:100px;  margin:1%; padding:0;}
.popup-form ul { float:left; margin:0; padding:0; list-style:none;}
.popup-form ul li { float:left; width:100%; height:auto; margin:10px 0px ; padding:0px;}
.bor123 { float:left; font-size:13px; padding:0 0 0 1%; color:#666 !important;  width:98%; height:38px; border:1px solid #E9E9E9; background:#FCFCFC; }

.like-btn { float:left; width:auto; height:auto; margin:0; padding:0; display:block;} 
.like-btn ul { float:left; margin:0; padding:0; list-style:none;}
.like-btn ul li { float:left; width:100%; height:auto; margin:10px 0; padding:0;}
.like-btn ul li a { display:block;}
.like-btn ul li a:hover {opacity: 0.8;}
.like-btn ul li img { width:220px;}

/*Recharge-PLANS*/
.recharge-plans-box { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0; padding:0;}

.recharge-plans-form { float:left; width:100%; height:auto; min-height:30px; margin:0px !important; padding:0; border:1px solid #CCC;}
.recharge-plans-form ul { float:left; width:100%; margin:0; padding:0; list-style:none;}
.recharge-plans-form ul li { float:left; width:31%; height: auto; min-height:30px; margin:1%; padding:0;}
.recharge-plans-form-sel { float:left;font-size:13px; margin:0; padding:0 0 0 1%; color:#333;  width:99%; height:35px; line-height:35px !important; border:1px solid #CCC;  background:#F4F4F4; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}
.recharge-plans-form-sel:focus { border:1px solid #023D8A; color:#333; background:#FFF; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }

.recharge-plans-table { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0 !important; padding:0;}
.recharge-plans-table ul { float:left; margin:0; padding:0; list-style: none;}
.recharge-plans-table ul li { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#F1F1F1; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}
.recharge-plans-table ul li.bg { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#E4E4E4; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}

.amount-validity { float:left; width:19%; height:40px; line-height:20px; font-size:12px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:0 !important; padding:0 0 0 1%;}
.plan-details { float:left; width:59%; height:40px; line-height:20px; font-size:12px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:0 !important; padding:0 0 0 1%;}

.amount-validity-text { float:left; width:19%; height: auto; line-height:18px; font-size:13px; background: none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:1% 0 1% 1%;}
.plan-details-text { float:left; width:59%; height: auto; line-height:17px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:1% 0 1% 1%;}
.details-text { float:left; width:70%; height:auto; line-height:18px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:0 0 0 0 !important; }
/*Recharge-PLANS*/

.button { float:left; width: 65px; height: auto; margin:0 !important; padding:0; display:block;}
.button a { float:left; width:65px; height:26px; line-height:26px; margin:2px 0 2px 10px; padding:0; text-align:center !important; background:#023D8A; font-size:13px; color:#FFF !important; text-decoration:none; font-weight:400;}
.button a:hover { color:#FFF; background:#DE030E;}

}
/* Portrait tablet to landscape and desktop */


/* Landscape phone to portrait tablet */
@media only screen and ( min-width: 600px) and ( max-width: 767px ) {



.btn { float:left; width:99%;  height: auto; line-height:40px; margin:0px 0px 0px 0px; text-align:center; padding:0px  ; background:#023D8A; font-size:16px; color:#FFF; font-weight:normal; cursor:pointer; border:none; }
.btn:hover { background:#DE030E; color:#FFF; }

.sm-logo { float: left; width: 100%; height: auto; margin:20px 0 0 0; padding:0; text-align:center; }

.popup-form { float:left; width:98%; height:auto; min-height:100px;  margin:1%; padding:0;}
.popup-form ul { float:left; margin:0; padding:0; list-style:none;}
.popup-form ul li { float:left; width:100%; height:auto; margin:10px 0px ; padding:0px;}
.bor123 { float:left; font-size:13px; padding:0 0 0 1%; color:#666 !important;  width:98%; height:38px; border:1px solid #E9E9E9; background:#FCFCFC; }

.like-btn { float:left; width:auto; height:auto; margin:0; padding:0; display:block;} 
.like-btn ul { float:left; margin:0; padding:0; list-style:none;}
.like-btn ul li { float:left; width:100%; height:auto; margin:10px 0; padding:0;}
.like-btn ul li a { display:block;}
.like-btn ul li a:hover {opacity: 0.8;}

/*Recharge-PLANS*/
.recharge-plans-box { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0; padding:0;}

.recharge-plans-form { float:left; width:100%; height:auto; min-height:30px; margin:0px !important; padding:0; border:1px solid #CCC;}
.recharge-plans-form ul { float:left; width:100%; margin:0; padding:0; list-style:none;}
.recharge-plans-form ul li { float:left; width:31%; height: auto; min-height:30px; margin:1%; padding:0;}
.recharge-plans-form-sel { float:left;font-size:12px; margin:0; padding:0 0 0 1%; color:#333;  width:99%; height:35px; line-height:35px !important; border:1px solid #CCC;  background:#F4F4F4; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}
.recharge-plans-form-sel:focus { border:1px solid #023D8A; color:#333; background:#FFF; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }

.recharge-plans-table { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0 !important; padding:0;}
.recharge-plans-table ul { float:left; margin:0; padding:0; list-style: none;}
.recharge-plans-table ul li { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#F1F1F1; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}
.recharge-plans-table ul li.bg { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#E4E4E4; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}

.amount-validity { float:left; width:19%; height:40px; line-height:20px; font-size:13px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:0 !important; padding:0 0 0 1%;}
.plan-details { float:left; width:59%; height:40px; line-height:20px; font-size:13px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:0 !important; padding:0 0 0 1%;}

.amount-validity-text { float:left; width:19%; height: auto; line-height:18px; font-size:13px; background: none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:1% 0 1% 1%;}
.plan-details-text { float:left; width:59%; height: auto; line-height:17px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:1% 0 1% 1%;}
.details-text { float:left; width:62%; height:auto; line-height:18px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:0 0 0 0 !important; }
/*Recharge-PLANS*/

.button { float:left; width:60px; height: auto; margin:0 !important; padding:0; display:block;}
.button a { float:left; width:60px; height:26px; line-height:26px; margin:2px 0 2px 10px; padding:0; text-align:center !important; background:#023D8A; font-size:12px; color:#FFF !important; text-decoration:none; font-weight:400;}
.button a:hover { color:#FFF; background:#DE030E;}

}
/* Landscape phone to portrait tablet */

@media only screen and ( min-width: 481px) and ( max-width: 599px ) {


.popup {

left: 50%; width:70%; height:300px; overflow:scroll;

}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}

.btn { float:left; width:99%;  height: auto; line-height:40px; margin:0px 0px 0px 0px; text-align:center; padding:0px  ; background:#023D8A; font-size:16px; color:#FFF; font-weight:normal; cursor:pointer; border:none; }
.btn:hover { background:#DE030E; color:#FFF; }

.sm-logo { float: left; width: 100%; height: auto; margin:20px 0 0 0; padding:0; text-align:center; }

.popup-form { float:left; width:98%; height:auto; min-height:100px;  margin:1%; padding:0;}
.popup-form ul { float:left; margin:0; padding:0; list-style:none;}
.popup-form ul li { float:left; width:100%; height:auto; margin:10px 0px ; padding:0px;}
.bor123 { float:left; font-size:13px; padding:0 0 0 1%; color:#666 !important;  width:98%; height:38px; border:1px solid #E9E9E9; background:#FCFCFC; }

.like-btn { float:left; width:auto; height:auto; margin:0; padding:0; display:block;} 
.like-btn ul { float:left; margin:0; padding:0; list-style:none;}
.like-btn ul li { float:left; width:100%; height:auto; margin:10px 0; padding:0;}
.like-btn ul li a { display:block;}
.like-btn ul li a:hover {opacity: 0.8;}

/*Recharge-PLANS*/
.recharge-plans-box { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0; padding:0;}

.recharge-plans-form { float:left; width:100%; height:auto; min-height:30px; margin:0px !important; padding:0; border:1px solid #CCC;}
.recharge-plans-form ul { float:left; width:100%; margin:0; padding:0; list-style:none;}
.recharge-plans-form ul li { float:left; width:96%; height: auto; min-height:30px; margin:2%; padding:0;}
.recharge-plans-form-sel { float:left;font-size:14px; margin:0; padding:0 0 0 1%; color:#333;  width:99%; height:35px; line-height:35px !important; border:1px solid #CCC;  background:#F4F4F4; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}
.recharge-plans-form-sel:focus { border:1px solid #023D8A; color:#333; background:#FFF; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }

.recharge-plans-table { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0 !important; padding:0;}
.recharge-plans-table ul { float:left; margin:0; padding:0; list-style: none;}
.recharge-plans-table ul li { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#F1F1F1; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}
.recharge-plans-table ul li.bg { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#E4E4E4; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}

.amount-validity { float:left; width:97%; height:40px; line-height:40px; font-size:15px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:1px 0 0 0 !important; padding:0 0 0 3%;}
.plan-details { float:left; width:97%; height:40px; line-height:40px; font-size:15px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:1px 0 0 0!important; padding:0 0 0 3%;}

.amount-validity-text { float:left; width:94%; height: auto; line-height:25px; font-size:14px; background: none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding: 0 3%;}
.plan-details-text { float:left; width:94%; height: auto; line-height:25px; font-size:14px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:0 3%;}
.details-text { float:left; width:73%; height:auto; line-height:25px; font-size:14px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:0 0 0 0 !important; }
/*Recharge-PLANS*/

.button { float:left; width:70px; height: auto; margin:0 !important; padding:0; display:block;}
.button a { float:left; width:70px; height:26px; line-height:26px; margin:0px 0 5px 10px; padding:0; text-align:center !important; background:#023D8A; font-size:12px; color:#FFF !important; text-decoration:none; font-weight:400;}
.button a:hover { color:#FFF; background:#DE030E;}

}



@media only screen and ( min-width: 320px) and ( max-width: 480px ) {	

.popup {

left: 50%; width:70%; height:300px; overflow:scroll;

}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}

.btn { float:left; width:100%;  height: auto; line-height:40px; margin:0px 0px 0px 0px; text-align:center; padding:0px  ; background:#023D8A; font-size:16px; color:#FFF; font-weight:normal; cursor:pointer; border:none; }
.btn:hover { background:#DE030E; color:#FFF; }

.sm-logo { float: left; width: 100%; height: auto; margin:20px 0 0 0; padding:0; text-align:center; }

.popup-form { float:left; width:100%; height:auto; min-height:100px;  margin:0 !important; padding:0;}
.popup-form ul { float:left; margin:0; padding:0; list-style:none;}
.popup-form ul li { float:left; width:100%; height:auto; margin:10px 0px ; padding:0px;}
.bor123 { float:left; font-size:13px; padding:0 0 0 1%; color:#666 !important;  width:98%; height:38px; border:1px solid #E9E9E9; background:#FCFCFC; }

.like-btn { float:left; width:auto; height:auto; margin:0; padding:0; display:block;} 
.like-btn ul { float:left; margin:0; padding:0; list-style:none;}
.like-btn ul li { float:left; width:100%; height:auto; margin:10px 0; padding:0;}
.like-btn ul li a { display:block;}
.like-btn ul li a:hover {opacity: 0.8;}
.like-btn ul li img { width:200px;}

/*Recharge-PLANS*/
.recharge-plans-box { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0; padding:0;}

.recharge-plans-form { float:left; width:100%; height:auto; min-height:30px; margin:0px !important; padding:0; border:1px solid #CCC;}
.recharge-plans-form ul { float:left; width:100%; margin:0; padding:0; list-style:none;}
.recharge-plans-form ul li { float:left; width:96%; height: auto; min-height:30px; margin:2%; padding:0;}
.recharge-plans-form-sel { float:left;font-size:13px; margin:0; padding:0 0 0 1%; color:#333;  width:99%; height:35px; line-height:35px !important; border:1px solid #CCC;  background:#F4F4F4; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}
.recharge-plans-form-sel:focus { border:1px solid #023D8A; color:#333; background:#FFF; font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }

.recharge-plans-table { float:left; width:100%; height:auto; min-height:50px; margin:10px 0 0 0 !important; padding:0;}
.recharge-plans-table ul { float:left; margin:0; padding:0; list-style: none;}
.recharge-plans-table ul li { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#F1F1F1; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}
.recharge-plans-table ul li.bg { float:left; width:100%; height:auto; min-height:30px; line-height:30px; background:#E4E4E4; margin:0 !important; padding:0 !important; border-top:1px solid #FFF;}

.amount-validity { float:left; width:97%; height:30px; line-height:30px; font-size:15px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:1px 0 0 0 !important; padding:0 0 0 3%;}
.plan-details { float:left; width:97%; height:30px; line-height:30px; font-size:15px; background:#DE030E; color:#FFF; text-align:left; font-weight:600; margin:1px 0 0 0!important; padding:0 0 0 3%;}

.amount-validity-text { float:left; width:94%; height: auto; line-height:25px; font-size:13px; background: none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding: 0 3%;}
.plan-details-text { float:left; width:94%; height: auto; line-height:25px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:0 3%;}
.details-text { float:left; width:100%; height:auto; line-height:25px; font-size:13px; background:none; color:#333; text-align:left; font-weight:500; margin:0 !important; padding:0 0 0 0 !important; }
/*Recharge-PLANS*/

.button { float:left; width:100%; height: auto; margin:0 !important; padding:0; display:block;}
.button a { float:left; width:100%; height:26px; line-height:26px; margin:5% 0 ; padding:0; text-align:center !important; background:#023D8A; font-size:12px; color:#FFF !important; text-decoration:none; font-weight:400;}
.button a:hover { color:#FFF; background:#DE030E;}

}