@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');

/*-----Global Styles -----*/

body {
	font-family: 'Lato', sans-serif!important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.clear {
	clear:both;
}
.form-control {
	color: #000;
}

/*-- Validation Styling --*/

.has-error .form-control {
    border-color: #ccc;
}
.errorMsg, .errorMsg span {
	font-size: 16px;
	display: block;
	color: #e60000;
	margin-top: 3px;
	margin-left: 1px;
	font-weight:400;
}

/* Header  */

#header {
    padding: 14px 14px 8px;
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
}
.step1 #header {
    box-shadow: none;
}
#header img {
    float: left;
    width: 156px;
}
#header .header-right {
    float: right;
    position: relative;
    margin-bottom: 4px;
}
#header .header-right .agent {
    display: block;
    font-size: 12px;
}
#header .header-right .hours {
    font-weight: 700;
    display: inline-block;
    color: #4A4A4A;
    font-size: 14px;
    line-height: 16px;
    margin-top: 4px;
}
#header .header-right .btn {
    padding: 6px 18px;
    color: #5098DC;
    border: 1px solid #5098DC;
    border-radius: 28px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    font-weight: 700;
    font-size: 16px;
    display: block;
}

/*----- Main-Content -----*/
#wrapper {
    background: #F4F8FF;
}
#contact-feed #wrapper {
    background: transparent;
}
.step1 #wrapper {
    background: transparent;
}
#main-content {
	min-height: 95vh;
    position:relative;
	overflow:hidden;
}
#main-content.lp {
    background: #fff;
    padding: 0;
    text-align: center;
}
#main-content .top-section {
    background: url('/v_medsear_x16/images/header-image-older-men.png');
    background-size: cover;
    padding-bottom: 70px;
    background-position: center;
}
#main-content h1 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 24px;
    margin: 60px auto;
    font-size: 48px;
}
.step1 #main-content .form-group {
    background: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding: 0 40px 40px;
    margin: 0 auto;
    float: none;
    display: inline-block;
}
#main-content .form-group .radio-text, #main-content button[type="submit"] {
    background: #5098DC;
    color: #fff;
    border-radius: 28px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    font-weight: 700;
    margin: 18px auto;
    height: 56px;
    font-size: 18px;
    width: 380px;
    float: none;
    display: block;
}
#main-content.step-5 button[type="submit"] {
    margin-bottom: 0;
}
#main-content button[type="submit"]  {
    font-weight: 700;
}
#main-content button[type="submit"] img {
    width: 24px;
    float: right;
}
#main-content .form-group .form-control {
    margin: 0 auto;
    height: 56px;
    padding-top: 18px;
    width: 380px;
    font-size: 18px;
    color: #000000;
    background-color: transparent;
    background-image: none;
    background-clip: padding-box;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    cursor: text;
    height: 56px;
}
#main-content.step-2 .form-group, #main-content.step-3 .form-group, #main-content.step-4 .form-group, #main-content.step-5 .form-group {
    width: 380px;
    margin: 0 auto;
    padding-top: 18px;
    position: relative;
}
.form-control-placeholder {
    position: absolute;
    top: 14px;
    left: 18px;
    padding-top: 14px;
    transition: all 150ms;
    color: #8d8d8d;
    font-weight:400;
    cursor: text;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: -1;
    font-size: 24px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder  {
    font-size: 12px;
    transform: translate3d(0px, -11px, 0);
    z-index: 99;
}
#main-content.lp .form-group .radio-text {
    width: 100%;
}
#main-content .form-group .top-label {
    color: #fff;
    text-align: center;
    background: #00C1C1;
    width: 100%;
    position: absolute;
    left: 0;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    padding: 13px;
    font-size: 24px;
    height: 60px;
}
#main-content .form-group .arrow {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #00C1C1;
    display: block;
    margin: 0 auto;
    margin-top: 59px;
}
#main-content.lp .control-label {
    margin: 20px auto;
    margin-bottom: 30px;
}
#main-content .control-label {
    color: #000;
    text-align: center;
    display: block;
    font-size: 28px;
    max-width: 560px;
    margin: 20px auto 42px;
}
#main-content.step-3 .control-label, #main-content.step-5 .control-label  {
    margin-bottom: 10px;
}
#main-content .sub-label {
    margin: 0px 30px;
    font-size: 18px;
    display: block;
    font-weight: 500;
    color: #595959;
}
.step-5 .receive-quote {
    padding-bottom: 36px;
    width: 90%;
    margin: 0 auto;
    max-width: 560px;
    text-align: center;
}
.step-5 .form-section {
    padding-bottom: 40px;
    margin-bottom: 12px;
}
.form-section {
    background: #fff;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    box-shadow: 0px 3px 6px #00000029;
    margin-top: 60px;
    padding: 40px 0 100px 0;
    min-height: 620px;
    overflow: hidden;
}
#main-content .partners-wrapper {
    margin: 40px 6px 40px;
}
#main-content .partners-wrapper img {
    width: 200px;
    height: auto;
    margin: 12px;
}
#main-content .partners-wrapper h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.chat-section .agent {
    margin: 0 auto;
    width: fit-content;
}
.chat-section {
    display: inline-block;
    margin-top: 20px;
}
.chat-section .agent img {
    float: left;
    width: 64px;
}
.chat-section .agent p {
    float: right;
    margin-top: 10px;
    margin-left: 6px;
    font-size: 18px;
    text-align: left;
}
.chat-section .agents-available {
    color: #00C1C1;
    font-weight: 700;
}
.chat-section .btn {
    padding: 12px 26px;
    color: #5098DC;
    border: 1px solid #5098DC;
    border-radius: 28px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    font-weight: 700;
    margin-top: 20px;
    font-size: 18px;
}
#main-content .chat-section .disclosure {
    color: #8D8D8D;
    font-size: 14px;
    margin-top: 16px;
}
.process {
    background: rgba(80, 152, 220, 0.1);
    width: 100%;
    padding: 40px 0;
    margin-top: 40px;
}
.process img {
    width: 80px;
}
.process li {
    list-style: none;
}
.process ul {
    padding: 0;
}
.process ul span {
    display: block;
    font-size: 14px;
    margin-top: 12px;
}
.process ul span.headline {
    font-weight: 700;
    font-size: 18px;
}
.submit-legal {
    width: 580px;
    text-align: left;
    font-size: 12px;
    margin: 0 auto;
    margin-top: 10px;
}

/* Progress bar  */
.your-progress {
    color:#00C1C1;
    font-size: 14px;
    font-style: italic;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    margin: 0px;
    text-align: left;
}

.prog-bar {
    width: 580px;
    margin: 30px auto;
}
.outer-progress {
    background-color: rgba(0, 193, 193, 0.25);
    border-radius: 25px;
    padding: 0;
    height: 15px;
    margin: 0 auto;
}
.outer-progress .inner-progress {
    background-color: #00C1C1;
    border-radius: 25px;
    height: 15px;
    width: 25%;
    transition: width ease-in-out .5s;
}
.prog-bar .progress-note .step5 {
    display: none;
}
.step-2 .prog-bar .progress-note .seconds-remaining::after {
    content: "30"
}
.step-3 .prog-bar .progress-note .seconds-remaining::after {
    content: "20"
}
.step-4 .prog-bar .progress-note .seconds-remaining::after {
    content: "10"
}
.step-5 .prog-bar .progress-note .seconds-remaining::after {
    content: "10"
}
.step-2 .prog-bar .outer-progress .inner-progress {
    width: 25%;
}
.step-3 .prog-bar .outer-progress .inner-progress {
    width: 50%;
}
.step-4 .prog-bar .outer-progress .inner-progress {
    width: 75%;
}
.step-5 .prog-bar .outer-progress .inner-progress {
    width: 100%;
}
.step-2 .prog-bar .progress-note .percent::after {
    content: "25%"
}
.step-3 .prog-bar .progress-note .percent::after {
    content: "50%"
}
.step-4 .prog-bar .progress-note .percent::after {
    content: "75%"
}
.step-5 .prog-bar .progress-note .percent::after {
    content: "100%"
}
.step-5 .progress-note .left {
    display: none;
}
.step-5 .prog-bar .progress-note .step5 {
    display: block;
}
.step-5 h2 {
    width: 380px;
    height: 68px;
    font-size: 28px;
    font-weight: 700;
    margin: 40px auto 0;
}
#main-content.step-5 {
    text-align: center;
}
.progress-note {
    color: #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}
.progress-note .left {
    float: left;
}
.progress-note .right {
    float: right;
}
.progress-note .green {
    color: #00C1C1;
}
.prog-bar .heart img {
    width: 32px;
    margin-top: -8px;
    margin-right: -12px;
    float: right;
}

/* Footer  */
#footer {
    color: #000000;
    background: #F4F8FF;
    font-size: 13px;
    padding: 60px 0;
}
.step1 #footer {
    background: #fff;
}
#footer .legal {
    text-align: center;
}
#footer p {
    text-align: center;
}
#footer ul {
    padding: 0;
    text-align: center;
}
#footer ul li {
    display: inline-block;
    margin: 0 12px;
    text-align: center;
}
#footer ul li a {
    text-decoration: underline!important;
    font-weight: 400;
    color: #000000;
}

/* Confirmpage */

#substep-content .confirm-page-headline {
    font-size:28px;
    font-weight:700;
    color:#000000;
    margin:0 0 15px 0;
    text-align:center;
    line-height: 32px;
}
#substep-content .confirm-page-feed-text {
    font-size:16px;
    font-weight:400;
    color:#707070;
    margin-bottom:5px;
    text-align:center;
}


/*----- Personalized -----*/
.personalized {
    background-color:#ffffff;
    border:2px solid #b4c9f0;
    margin-top:5px;
    margin-bottom:30px;
    padding:15px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    position:relative;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #d0defd 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#d0defd 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#d0defd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fbfaee',GradientType=0 );
}

.personalized ul {
    list-style-type:none;
    padding:0;
    text-align:center;
    margin:0;
}
.personalized ul li {
    font-family: 'Lato', sans-serif;
    font-weight:400;
    font-size:16px;
    color:#000000;
    display:block;
}
.personalized ul li span {
    font-family: 'Lato', sans-serif;
    font-weight:700;
    color:#0058ff;
    margin-left:2px;
}
.personalized ul li.midspace {
    margin:0;
}

/*-----------------------------*/
/*------- Modal Windows -------*/
/*------- Confirm page  -------*/
/*-----------------------------*/

#confirm-popover .modal-content {
    padding:5px 10px;
    margin:10px;
    text-align:center;
}

#confirm-popover .modal-content .modal-header {
    color:#2b85c7;
    font-size:1.25em;
    padding-bottom:0px;
}

#confirm-popover .modal-content .modal-body {
    color:#333333;

    font-size:1.125em;
}

#confirm-popover .modal-content .modal-body .attention {
    font-weight:700;
    color:#ff9600!important;
}

#confirm-popover .modal-content .modal-body .number {
    font-size:1.375em;
}

.modal-content .modal-body .sm-text {
    font-size:0.875em;
}

#confirm-popover .modal-content .modal-body .phone-ring {
    margin-bottom: 15px;
    width: 55px;
    height: auto;
}

#confirm-popover .modal-content .modal-body .no-accept {

    font-size:1.125em;
    color:#E00000;
}

#confirm-popover .modal-content .modal-footer {
    color:#5e5e5e;

    font-size:.75em;
    text-align:center;
    margin-top:0px;
    padding: 10px 20px 12px;
}

#confirm-popover .modal-content .modal-footer a{
    color:#5e5e5e;
}

#call-end {
    padding-top:0.75em;
    margin-bottom:0.625em;
    text-align:center;
    font-weight:700;
}

#call-end .action-msg {
    font-weight:400;
    font-size:1.25em;
    color:#ffffff;
    margin-top:5px;
    margin-left: -15px;
    margin-right: -15px;
}

#call-end .feed-title {
    font-size:1em;
    color:#ffffff;
    margin-left: -15px;
    margin-right: -15px;
}
.hearts {
    height: 200px;
    margin-top: 70px;
}
#heart-1, #heart-2, #heart-3 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#heart-1 {
    animation: heart-pulse-1 2s linear infinite;
    top: 178px;
}
#heart-2 {
    animation: heart-pulse-2 2s linear infinite;
    top: 158px;
}
#heart-3 {
    animation: heart-pulse-3 2s linear infinite;
}

/* Media queries */

@media only screen and (min-width : 768px) {
    #header .header-right .agent {
        text-align: center;
    }
    #header img {
        width: 250px;
    }    
    .step1 #main-content .form-group {
        width: 500px;
    }
    .step5 #main-content .control-label {
        margin-bottom:  22px;
    }
    #main-content .sub-label {
        text-align: center;
        margin: 0px 30px 40px;
    }
}

@media only screen and (max-width : 767px) {
    #wrapper {
        background: #fff;
    }
    #contact-feed #wrapper {
        background: transparent;
    }
    #header {
        padding-top: 10px;
        padding-bottom: 6px;
    }
    #header .header-right .btn {
        padding: 4px 10px;
        font-size: 10px;
        width: 138px;
        float: right;
    }
    #header img {
        width: 130px;
    }
    #header .header-right .btn {
        display: inline;
    }
    #main-content .partners-wrapper img {
        width: 100px;
    }
    #main-content h1 {
        font-size: 30px;
        line-height: 40px;
    }
    .step1 #main-content .form-group {
        box-shadow: 0px 3px 6px 0px #00000029;
        padding: 0 20px 20px;
    }
    .process {
        padding: 20px;
    }
    #footer ul li {
        display: block;
    }
    #main-content .form-group .top-label {
        font-size: 20px;
        padding: 15px;
    }
    #main-content.lp .control-label {
        text-align: center;
        width: 100%;
    }
    #main-content .control-label {
        font-size: 22px;
        width: 90%;
        text-align: left;
        margin-bottom: 12px;
    }
    .step-5 #main-content .control-label {
        margin-bottom: 16px;
    }
    .process ul span {
        line-height: 18px;
    }
    .process li {
        margin-bottom: 30px;
    }
    .process li:last-of-type {
        margin-bottom: 0;
    }
    .prog-bar {
        width: 90%;
        margin: 12px auto;
    }
    .form-section {
        border-radius: 0;
        box-shadow: none;
        margin-top: 0;
        padding-top: 20px;
        background: transparent;
    }
    .btn-group, .btn-group-vertical {
        display: block;
    }
    #main-content .form-group .radio-text, #main-content button[type="submit"], #main-content .form-group .form-control, .step-5 .form-group p, .submit-legal {
        width: 90%;
    }
    .step-5 .form-group p {
        margin: 0 auto;
        text-align: left;
    }
    .form-control:focus ~ .floating-label, .form-control:not(:focus):valid ~ .floating-label, .floating-label {
        margin-left: 0;
        left: 66px;
    }
    #main-content.step-2 .form-group, #main-content.step-3 .form-group, #main-content.step-4 .form-group, #main-content.step-5 .form-group {
        width: 320px;
    }
    .form-control-placeholder {
        font-size: 18px;
        top: 19px;
        left: 34px;
    }
    #substep-content .number {
        width: 300px;
    }
    .step-5 .receive-quote {
        text-align: left;
        padding-bottom: 0;
        font-size: 18px;
    }
    .chat-section .agent p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 374px) {
    #header img {
        width: 116px;
    }
    #header .header-right .agent {
        font-size: 10px;
    }
}

@media only screen and (max-width : 425px) {
    .progress-note {
        font-size: 12px;
    }
    .step-5 h2 {
        width: 300px;
    }
    .form-section .chat-section .agent p {
        font-size: 16px;
    }
}

@media only screen and (max-width : 550px) {
    #main-content .top-section {
        background: url('/v_medsear_x16/images/header-image-older-men-mobile.png');
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 0;
    }
    #main-content .partners-wrapper {
        width: 340px;
        margin: 40px auto 20px;
    }
}

/* Animations  */

.animated {
    -webkit-animation-duration: .1s;
    animation-duration: .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
  
@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}
@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }   
}
@keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}
@keyframes heart-pulse-1 {
    0% {
        opacity: 1
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@keyframes heart-pulse-2 {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@keyframes heart-pulse-3 {
    0% {
        opacity: 0
    }
    25% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}