/* HTML5 display-role reset for older browsers */
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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, div {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a {
	color: inherit;
	text-decoration: none;
}
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.centered{
	width: 91%;
	max-width: 760px;
	margin:0 auto;
	position: relative;
}
@font-face {
  font-family: 'Sentinel-Book';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Sentinel-Book.eot');
  src: url('../fonts/Sentinel-Book.eot?#iefix') format('embedded-opentype'), url('../fonts/Sentinel-Book.woff2') format('woff2'), url('../fonts/Sentinel-Book.woff') format('woff'), url('../fonts/Sentinel-Book.ttf') format('ttf'), url('../fonts/Sentinel-Book.svg#Sentinel-Book') format('svg');
}
@font-face {
  font-family: 'Montserrat-Light';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Montserrat-Light.eot');
  src: url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Montserrat-Light.woff2') format('woff2'), url('../fonts/Montserrat-Light.woff') format('woff'), url('../fonts/Montserrat-Light.ttf') format('ttf'), url('../fonts/Montserrat-Light.svg#Montserrat-Light') format('svg');
}
@font-face {
  font-family: 'Montserrat-Regular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Montserrat-Regular.eot');
  src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Montserrat-Regular.woff2') format('woff2'), url('../fonts/Montserrat-Regular.woff') format('woff'), url('../fonts/Montserrat-Regular.ttf') format('ttf'), url('../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
}
@font-face {
  font-family: 'Montserrat-Bold';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Montserrat-Bold.eot');
  src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Montserrat-Bold.woff2') format('woff2'), url('../fonts/Montserrat-Bold.woff') format('woff'), url('../fonts/Montserrat-Bold.ttf') format('ttf'), url('../fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
}
body{
	font-family: 'Montserrat-Regular', sans-serif;
	font-weight: 400;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
header{
	height: 84px;
	border-bottom: 14px solid #f6f6f6;
	position: relative;
}
#logo{
	width: 95px;
	line-height: 70px;
}
#logo img {
	width: 100%;
	height: auto;
}
#logo a {
	display: block;
	height: 100%;
}
#phone-number {
	font-family: 'Sentinel-Book', sans-serif;
	font-size: 18px;
	color: #484848;
	letter-spacing: 0.08px;
	position: absolute;
	line-height: 70px;
	right: 5px;
	top: 0;
}
#phone-number a {
	display: block;
}
#main {
	padding: 54px 0 0;
    width: 100%;
    overflow-x:hidden;
}
#main-slide{
	width: 400%;
}
#main-slide .slide{
	width: 25%;
	float: left;
}
#main .centered{
	overflow-x:visible;
}
#main h2 {
	font-size: 12px;
	color: #CECECE;
	letter-spacing: 1.85px;
}
#main h3 {
	font-family: 'Sentinel-Book';
	font-size: 25px;
	color: #444444;
	letter-spacing: -0.11px;
	margin-top: 10px;
}
#client-info {
	background: #F7F7F7;
	border: 1px solid #E8E8E8;
	border-radius: 3px;
	margin: 15px auto 0;
}
#client-name {
	font-size: 13px;
	color: #444444;
	letter-spacing: 0.92px;
	line-height: 19px;
    margin: 15px;
}
#current-balance {
	border-top: 1px solid #DFDFDF;
    padding: 10px;
    font-weight: 700;
	font-size: 12.5px;
	color: #444444;
	letter-spacing: 0.88px;
	line-height: 19px;
}
.alert-icon {
	background: url(../img/alert-icon.png) no-repeat 50% 50%;
	width: 13px;
	height: 11px;
	margin-right: 3px;
	margin-left: 5px;
	display: inline-block;
}
#current-balance span {
	font-weight: 400;
	font-size: 14px;
	color: #EF6254;
	letter-spacing: 0.46px;
}
.separator{
	width: 24px;
	height: 2px;
	background: #EBEBEB;
	margin: 31px auto;
}
.checkmark {
    display: inline-block;
    height: 15px;
    width: 15px;
    top: 2px;
    position: relative;
    background: url(../img/checkmark.svg) no-repeat;
}
input {
	background: #F8F8F8;
	box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.15);
	border-radius: 4px;
	font-weight: 300;
	font-size: 16px;
	color: #444;
	letter-spacing: 0.2px;
	border: none;
	height: 47px;
	text-align: center;
	width: 100%;
	margin-bottom: 15px;
}
input:focus,button:focus,select:focus{
	outline: none;
}
label {
	font-weight: 400;
	font-size: 12px;
	color: #444;
	text-align: left;
	letter-spacing: 0.94px;
	display: block;
	margin-bottom: 5px;
}
::-webkit-input-placeholder{
	font:inherit;
	text-align: inherit;
}
#slider{
	width: 300%;
}
#slider > div {
	width: 33.3333%;
	float: left;
}
#otp-slide{
	margin-right: 16.66665%;
}
#ap-slide{
	opacity: 0;
}
.selected-card{
	margin:0 auto 15px;
	background: #F7F7F7;
	border: 1px solid #E8E8E8;
	border-radius: 4px;
	height: 47px;
	font-size: 13px;
	color: #444444;
	letter-spacing: 0.6px;
	line-height: 47px;
	text-align: left;
	padding-left: 22px;
	position: relative;
	cursor: pointer;
	z-index: 6;
}
.down-arrow {
	position: absolute;
	right: 0;
	height: 60%;
	top: 20%;
	width: 30px;
	border-left: 1px solid #E0E0E0;
	background: url(../img/down-arrow.png) no-repeat 50% 50%;
	pointer-events: none;
}
.card-options {
	position: absolute;
	left: 0;
	display: none;
	margin-top: -15px;
    height: 188px;
    overflow-y: scroll;
}
.card-options > div{
	margin:0 auto 0px;
	background: #F7F7F7;
	border: 1px solid #E8E8E8;
	border-radius: 4px;
	height: 47px;
	width: 272px;
	font-size: 13px;
	color: #444444;
	letter-spacing: 0.6px;
	line-height: 47px;
	text-align: left;
    padding-left: 22px;
    position: relative;
    z-index: 5;
    cursor: pointer;
    margin-top: -47px
}
.card-options > div:hover{
	background: #E8E8E8;
}
.lastfour{
	font-weight: 700;
}
#billing-zip{
	width: 272px;
	position: relative;
	z-index: 4;
}
#payment{
	width: 48.9%;
	position: relative;
	z-index: 4;
}
.pay-btn{
	background: #4ACE74;
	border-radius: 4px;
	font-size: 13px;
	color: #FFFFFF;
	letter-spacing: 1.09px;
	font-weight: 700;
	border: none;
	width: 45%;
	height: 47px;
	margin-left: 5%;
	cursor: pointer;
}
#ap-pay-btn{
	width: 201px;
	margin-bottom: 40px;
}
.card{
	width: 28px;
	height:28px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
    position: relative;
    top: -2px;
}
.visa{
	background: url(../img/visa_icon.png) no-repeat 50%;
	background-size: 100%;
}
.amex{
	background: url(../img/amex.png) no-repeat;
	background-size: 100%;
}
.disc{
	background: url(../img/discover.png) no-repeat;
	background-size: 100%;
}
.mc{
	background: url(../img/mastercard.png) no-repeat;
	background-size: 100%;
}
#auto-pay{
	margin-top: 41px;
	margin-bottom: 41px;
}
#auto-pay span{
	font-size: 12px;
	color: #525252;
	letter-spacing: 1.15px;
	display: block;
	margin-bottom: 12px;
}
#auto-pay > div {
	display: inline-block;
	font-size: 12px;
	color: #C1C1C1;
	letter-spacing: 1.15px;
	font-weight: 400;
    vertical-align: middle;
}
#auto-pay .otp{
	color: #242424;
}
#toggle{
	width: 60px;
	height: 28px;
	background: #e4e4e4;
	box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.50);
	border-radius: 100px;
	margin:0 10px;
	position: relative;
}
.green-bg{
	background: #4ACE74;
	width: 30px;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.50);
    border-radius: 100px;
    transition:width 0.4s;
}
#switch{
	background: #FFFFFF;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.24);
    border-radius: 60px;
	width: 32px;
	height: 32px;
	position: relative;
    border: 1px solid rgba(0,0,0,0.12);
    top: -2px;
    margin-left: -1px;
    cursor: pointer;
    transition: margin-left 0.4s;
}
#auto-pay.on .otp{
	color: #C1C1C1;
}
#auto-pay.on .ap {
	color:#242424;
}
#auto-pay.on .green-bg {
	width: 60px;
}
#auto-pay.on #toggle #switch{
	margin-left: 30px;
}

#cvv{
	width: 35%;
}
#exp_date{
    width: 60%;
    margin-left: 3%;
}
#add-new-card {
	width: 201px;
	margin-top: 14px;
}
.new-card {
	margin-top: 37px;
}
.back-btn{
    font-size: 12px;
    color: #CECECE;
    letter-spacing: 1.85px;
    position: absolute;
    left: 0px;
    top: -29px;
    cursor: pointer;
}
.back-btn:hover{
	text-decoration: underline;
}
.error {
    border : 1px solid red;
}
#message {
    font-family: 'Sentinel-Book';
    font-size: 19px;
    color: #444444;
    letter-spacing: -0.11px;
    line-height: 26px;
}
.thanks #client-info #client-name {
    padding: 0;
    border: none;
    text-align: center;
}
.thanks #client-info > div {
    text-align: left;
    font-family: 'Montserrat-Regular';
    font-size: 13px;
    color: #b9b9b9;
    letter-spacing: 0.92px;
    line-height: 19px;
    padding: 15px;
}
.thanks #client-info > div > span {
    float: right;
    color: #4c4c4c;
    letter-spacing: 0.45px;
    font-size: 15px;
    font-family: 'Montserrat-Regular';
}
#missed-leads{
	background: #FBFBFB;
	border: 1px solid #E6E6E6;
	border-radius: 3px;
	padding:33px 20px;
	text-align: center;
}
#missed-leads .checkmark{
	width: 20px;
	height: 20px;
	top: 3px;
	background-size: contain;
}
#missed-leads h4{
	font-family: Montserrat-Bold;
	font-size: 14px;
	color: #535353;
	letter-spacing: 1.52px;
}
#missed-leads p{
	font-family: Sentinel-Book;
	font-size: 18.5px;
	color: #444444;
	letter-spacing: 0.3px;
	line-height: 26px;
    margin-top: 11px;
}
#leads_missed{
    border-bottom: 1px solid;
	color:#D14F3E;
	font-weight: 700;
}
#learn-more {
	width: 173px;
    line-height: 47px;
    margin: 23px auto 15px;
    box-shadow: 0 6px 20px -2px rgba(74,206,116,0.78);
}
#old-balance > span {
    color: #c7c7c7 !important;
}

.thanks #client-info #client-name {
    padding: 0;
    border: none;
    text-align: center;
}

.missed-leads {
	font-size: 13.5px;
	color: #A7A7A7;
	letter-spacing: 1.11px;
    margin-bottom: 30px;
}
#leads-breakdown {
    background: rgba(244,244,244,0.45);
    border: 1px solid #E6E6E6;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.09);
    border-radius: 3px;
    text-align: left;
    margin-bottom: 35px;
}
#leads-breakdown > div {
    height: 58px;
    line-height: 58px;
    padding-left: 26px;
    border-bottom: 1px solid #E6E6E6;
}
#leads-breakdown > div:last-child{
	border: 0;
}
#leads-breakdown > div:nth-of-type(3){
	clear: left;
}
#leads-breakdown > div .right-align {
    margin-right: 20px;
	font-size: 14px;
	color: #3C3C3C;
	letter-spacing: 1.01px;
    position: absolute;
    right: 0;
}
#leads-breakdown > div .right-align > span {
	font-family: 'Montserrat-Bold';
	color: #4898B9;
}
#local,#long-distance {
	float: left;
	color: #1E1E1E;
	text-align: center;
    padding-left: 0 !important;
}
#local span,#long-distance span {
	color:#4898B9;
}
#local {
	width: 35%;
	border-right: 1px solid #E6E6E6;
}
#long-distance{
	width: 65%;
}
span#total {
    color: #4898B9 !important;
    font-family: 'Montserrat-Bold';
}
#ml-selected-card {
	width: 100%;
}
#saving{
    float: left;
    width: 45%;
    background: rgba(244,244,244,0.45);
    border: 1px solid #E6E6E6;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.09);
    border-radius: 3px;
    padding: 8px;
    font-size: 11px;
    color: #AEAEAE;
    letter-spacing: 0.95px;
}
#saving span{
	font-family: Montserrat-Regular;
	font-size: 18px;
	color: #4898B9;
	letter-spacing: 0.93px;
}
#buy-leads{
    line-height: 47px;
    width: 50%;
    float: right;
}
#leads-slider {
    margin-bottom: 24px;
    position: relative;
}
.slider-details{
	font-size: 13px;
	color: #a7a7a7;
	letter-spacing: 0.87px;
	line-height: 18px;
    margin-bottom: 10px;
}
.slider-details span{
	font-family: Montserrat-Bold;
	font-size: 13px;
	color: #4898B9;
	letter-spacing: 0.94px;
	line-height: 18px;
}
#slide-track {
	background: rgba(216,216,216,0.17);
	box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.16);
	border-radius: 100px;
	height: 29px;
	position: relative;
	width: 80%;
	margin:0 auto;
}
.slider-ctrl {
	background: #FFFFFF;
	border: 1px solid #8EC2CE;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,0.09);
	width: 38px;
	height: 39px;
	position: absolute;
	border-radius: 100px;
    top: -4px;
    z-index: 10;
}
.slider-ctrl .days {
    position: absolute;
    top: 115%;
    width: 150%;
    left: -25%;
    font-family: Montserrat-Bold;
    font-size: 13px;
    color: #5D5D5D;
    letter-spacing: 0.47px;
}
.slider-ctrl .dot{
	width: 12px;
    height: 12px;
    border: 2px solid #8EC2CE;
    border-radius: 100px;
    margin: 13px auto;
    background: rgba(142, 194, 206, 0.53);
    pointer-events: none;
}
#selection{
	height: 100%;
	position: absolute;
	width: 100%;
	background: #8EC2CE;
	opacity: 0.3;
	top: 0;
	border-radius: 100px;
	pointer-events: none;
}
.dashes{
	height: 100%;
}
.dashes > div {
    width: 14.285714285714286%;
    height: 15px;
    margin-top: 7px;
    border-right: 1px solid;
    float: left;
    pointer-events: none;
}
.dashes > div:last-child{
	border-right: none;
}
.day-holder{
	 margin-top: 2.7%;
}
div#min-days {
    text-align: left;
    letter-spacing: 0.47px;
    margin-left: 9.2%;
    float: left;
    opacity: 0;
}
div#max-days {
    text-align: right;
    letter-spacing: 0.47px;
    float: right;
    margin-right: 32px;
    opacity: 0;
}
#ctrl-2 {
    left: calc(100% - 38px);
}
#add-card {
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 85px;
    background: #fff;
    padding-top: 41px;
    left: 100%;
    height: 100%;
    box-shadow: -5px 6px 14px #dddddd;
}
.thanks2 p{
    font-family: Sentinel-Book;
    font-size: 18px;
    color: #444444;
    letter-spacing: -0.11px;
    line-height: 26px;
    width: 88%;
    margin: 0 auto 20px;
}
.thanks2 .checkmark {
	width: 40px;
	height: 40px;
	background-size: 100%;
}