html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
html{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
html,button,input,select,textarea{color:#222; font-family: 'Roboto', sans-serif;}
input{border:0 none; outline:none; font-family: 'Roboto', sans-serif;}
html{font:100% "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;line-height:1.4}
::-moz-selection{background:#b3d4fc;text-shadow:none}
::selection{background:#b3d4fc;text-shadow:none}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
audio,canvas,img,video{vertical-align:middle; width: 100%;}
fieldset{border:0;margin:0;padding:0}
textarea{resize:vertical}


.browsehappy{margin:0px 0px 10px 0px;padding:0.5em 0em;background:#aac739;color:#4f4f4f;text-align:center}
body{background:#fff;color:#000; font-family: 'Roboto', sans-serif;}
.dialpad .number{position:relative;z-index:2;padding:0;color:#D3D3D3;font-weight:300;font-size:40px;background:#fff;height:78px}
.dialpad .number input[type="text"]{padding:10px 20px; color: #D3D3D3; font-size:27px; height: 100%;width: 100%; text-align: center; font-weight:300;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#D3D3D3;
}
::-moz-placeholder { /* Firefox 19+ */
    color:#D3D3D3;
}
:-ms-input-placeholder { /* IE 10+ */
    color:#D3D3D3;
}
:-moz-placeholder { /* Firefox 18- */
    color:#D3D3D3;
}
.dialpad .number input[type="text"]::-webkit-input-placeholder {color:#D3D3D3;}
.dialpad .number input[type="text"]::-moz-placeholder  {color:#D3D3D3;}
.dialpad .number input[type="text"]:-ms-input-placeholder {color:#D3D3D3;}
.dialpad .number input[type="text"]:-moz-placeholder  {color:#D3D3D3;}
.dialpad .dials{margin:-1px 0 0 -1px;background:#fff;cursor:pointer; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7}
.dialpad .dials:before, .dialpad .dials:after{content:"\0020";display:block;height:0;overflow:hidden}
.dialpad .dials:after{clear:both}
.dialpad .dials .digits{float:left;width:33.33%; height: 85px;}
.dialpad .dials .digits.clicked{background:#00CAF2;}
.dialpad .dials .digits.clicked p strong{color:#FFF;}
.dialpad .dials .digits.clicked p span.digit{color:#FFF;}
.dialpad .dials .digits p{font-weight:600;padding:6px 25px;border-top:1px solid #d7d7d7;border-right:0px;border-bottom:0px;border-left:1px solid #d7d7d7; height:100%;}
.dialpad .dials .digits p strong{font-size:50px;color:#000; font-weight:300;}
.dialpad .dials .digits:active{background:#00caf2;border-top-color:#b2f2ff}
.pointbank_cls .dialpad .dials .digits:active{background:#94192D;border-top-color:#94192D;}
.compact .dials .digits p{ text-align: center;}
.compact .dials .digits p strong{font-size:34px}
.compact .dials .digits p sup{text-transform:uppercase;color:#8D8D8D;font-weight: 400;}
.compact .dials .digits.txt p sup{line-height: 5.5;}
.compact .dials .digits p span.digit{text-transform:uppercase;color:#8D8D8D;font-weight: 400; display:block;}
.compact .dials .pad-action{ width:100%; padding:10px; border-left:1px solid #d7d7d7; border-top:1px solid #d7d7d7;}
.compact .dials .pad-action:active{background:#0c3}
.ir{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}
.ir:before{content:"";display:block;width:0;height:150%}
.hidden{display:none !important;visibility:hidden}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
.invisible{visibility:hidden}
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}

/*New Code*/
.bar{border-top:50px solid #e3f0f8; display: table;width: 100%;}
.left{}
.right{}
.welcome_screen{width:50%; display: table-cell;vertical-align: top; position: relative;}
.dialpad_wrap{width: 50%;display: table-cell;/* box-shadow:-3px 0px 7px #BCBCBC;  -moz-box-shadow:-3px 0px 7px #BCBCBC; 
 -webkit-box-shadow:-3px 0px 7px #BCBCBC;  -ms-box-shadow:-3px 0px 7px #BCBCBC;*/ border-left:1px solid #d7d7d7; }
.screen_in{text-align: center; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display: block;width: 100%;padding: 50px;}
.screen_in_vol{text-align: center; display: block;width: 100%;padding: 0 10px;}
.screen_in h5, .screen_in_vol h5{color:#38a7df; font-size:30px;  font-weight:300;}
.screen_in_vol h5{color:#94192D; font-size:22px;}
.screen_in h5 strong, .screen_in_vol h5 strong{display: block;font-size: 37px;font-weight: 500;line-height: 0.8;}
.screen_in_vol h5 strong{font-size:25px;}
.screen_in .image_wrap{width: 400px;display: block;margin: 15px auto 0;}
.top-section{padding: 25px 30px;border-bottom: 1px solid #d7d7d7;}
.top-section i{font-style:italic;color: #a2a2a2;font-size: 19px;}
.compact .dials .pad-action p {background:#38a7df; border-radius:5px;}
.pointbank_cls .compact .dials .pad-action p {background:#94192D; border-radius:5px;}
.compact .dials .pad-action p span.action_btn{line-height: 1.8;color:#fff; text-transform:uppercase; font-weight: 300;  font-size:30px;}

.error{/* border: 1px solid; */color: RED;font-size: 19px;padding: 10px 25px;position: absolute;right: 0;top: 0;left:0;transform: translateY(20%); -moz-transform: translateY(20%); -webkit-transform: translateY(20%);}
.success{/* border: 1px solid; */color: green;font-size: 19px;padding: 10px 25px;position: absolute;right: 0;top: 0;left:0;transform: translateY(20%);-moz-transform: translateY(20%); -webkit-transform: translateY(20%);}
.dialpad .dials .digits.clicked{animation:pulse-gray linear 0.5s 1; -webkit-animation:pulse-gray linear 0.5s 1; -moz-animation:pulse-gray linear 0.5s 1;}

/*Screen Error and Success*/
.screen_in .success_msg{color:green; font-size:28px;  font-weight:300;}
.screen_in .error_msg{color:red; font-size:28px;  font-weight:300;}
.screen_in .error_msg span{ display:block;font-size:20px;  font-weight:300;}
@keyframes pulse-gray {
 0% {
   box-shadow: inset 0 0 0px 30px #00CAF2, inset 0 0 0px 30px #00CAF2;
   -ms-transform: scale(1, 1); 
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
 }
 10% {
   -ms-transform: scale(0.8, 0.8);
   -webkit-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
 }
 30% {
   box-shadow: inset 0 0 0px 10px #00CAF2, inset 0 0 0px 30px #00CAF2;
 }
 60% {
   box-shadow: inset 0 0 0px 0px #00CAF2, inset 0 0 0px 0px #00CAF2;
   -ms-transform: scale(0.8, 0.8);
   -webkit-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
 }
 100% {
   -ms-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
 }
}
.top-logosection{text-align:center;}
.logosection_wrap{}
.logo_wrap{width: 230px; display: inline-block;}
.text_wrap{color: #38a7df;font-size: 25px;font-weight: 400;font-family: 'Cinzel', serif; margin-left: -20px;}
.welcome_screen_bg{position: relative;background-size: cover;background-repeat: no-repeat;background-position: top center;}

/*----Media Queries----*/
@media screen and (max-width:768px){
	.bar{display: block;}
	.welcome_screen, .dialpad_wrap{width: 100%; display: block;}
	.screen_in{position:relative; top: 0;left: 0; transform: translate(0, 0);}
	.screen_in .image_wrap {width: 300px;}
	.screen_in h5, .screen_in_vol h5{font-size: 26px;}
	.screen_in h5 strong, .screen_in_vol h5 strong{font-size: 26px;}
	.screen_in{padding: 20px;}
	.dialpad_wrap{border:0  none;}
	.top-section {padding: 20px;}
	
}

@media screen and (max-width:600px){
	.screen_in h5, .screen_in_vol h5{font-size: 22px;}
	.screen_in .image_wrap {width: 250px;}
	.screen_in h5 strong, .screen_in_vol h5 strong{font-size: 22px;}
	.dialpad .dials .digits{height: 75px;}
	.compact .dials .digits p strong{font-size: 28px;}
	.dialpad .number input[type="text"]{font-size: 22px;}
	.top-section i{font-size: 17px;}
	.compact .dials .pad-action p span.action_btn{font-size: 24px;}
	
}