@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600");

*{margin: 0; padding: 0; line-height: 1;}
a,a:hover,a:active,a:focus,
button,button:hover,button:active,button:focus,
input[type="submit"],input[type="submit"]:hover,input[type="submit"]:active,input[type="submit"]:focus,
input[type="button"],input[type="button"]:hover,input[type="button"]:active,button[type="button"]:focus {outline: none !important; text-decoration: none;}
h1,h2,h3,h4,h5,h6 {margin: 0;}
ul li, ol li {list-style: none;}
body{background-color: #EDF5F8; font-family: 'Open Sans',sans-serif;}
body.slide-change {overflow-x:hidden; }
.page-header-main {padding: 20px 0 10px 0; float: left; width: 100%;}
.logo-content { float: left; width: 100%;}
.tag-line { font-size: 18px; float: left; width: 100%; padding: 12px 0; text-align: right;}

.page-body { float: left; width: 100%;}
.page-content {background-color: #ffffff; position: relative; clear: both;}
.block-content { float: left; width: 100%; min-height: 300px; position: relative; overflow: hidden; padding-bottom: 30px;}
.slide-content { float: left; width: 100%; opacity: 0; visibility: hidden; position: absolute; top:0;}
.slide-content.current {display: block; opacity: 1; visibility: visible;
    animation: slideInRight ease-in-out 600ms;
    -moz-animation: slideInRight ease-in-out 600ms;
    -webkit-animation: slideInRight ease-in-out 600ms;
}
.slide-content.filled { opacity: 1; visibility: visible;
    animation: slideOutLeft ease-in-out 600ms;
    -moz-animation: slideOutLeft ease-in-out 600ms;
    -webkit-animation: slideOutLeft ease-in-out 600ms;
}
.question-content { float: left; width: 100%; text-align: center; padding: 32px 10px 24px;}
.question-content h1 { color: #666; font-family: 'Open Sans', sans-serif; font-weight: 600; letter-spacing: -0.04em; text-align: center;}

.answer-content { float: left; width: 100%; min-height: 350px; padding-top: 20px; padding-bottom: 20px;}
.link-block { width: 100%; text-align: center; clear: both; float: left; margin-bottom: 10px;}
.link-block .btn { border-radius: 3px;  border: 0; color: #fff; max-width: 450px; display: block; margin: auto; font-size: 24px; padding: 15px 0;
    line-height: 30px; background: #01B0EE url('../images/arrow_right.png') no-repeat center right; width: 100%;}
.link-block .btn:hover { background-color: #01c2f3;}

.quote-line  { font-weight: 300; letter-spacing: -0.04em;  margin-top: 25px; font-family: 'Open Sans', sans-serif; margin-bottom: 10px;
    font-size: 28px; float:left; width: 100%; text-align: center;
}

.input-box {float: left; width: 100%;}
.input-box .label-danger { background-color: transparent; max-width: 450px; margin: -15px auto 15px auto; color: red; font-size: 15px; font-weight: 300;}
.input-box button + .label-danger {display: none !important;}
.link-block .selectable-input {position: relative; display:block; max-width: 450px; margin: auto; width: 100%;}
.selectable-input input[type="radio"],
.selectable-input input[type="checkbox"]{ visibility: hidden; opacity: 0; position: absolute; top:0; left: 0;}
.selectable-input input[type="radio"]:checked + span,
.selectable-input input[type="checkbox"]:checked + span{background-color: #01c2f3; border-radius: 3px;}



.custom-range { max-width: 800px; margin: auto auto 30px auto; display: block; width: 100%; position: relative; padding: 9px 15px; }
.custom-range .ui-slider-horizontal { width: 100%; display: block; border: solid 1px #01b0ee; border-radius: 100px;}
.custom-range .ui-slider-range { background-color: #B4E7F9;}
.custom-range .ui-slider-horizontal .ui-slider-handle { width: 30px; height: 30px; background-color: #01b0ee; border-radius: 100px; display: block;
    border: 0; margin-top: -6px; margin-left: -15px; cursor: pointer;}

.range-slider-value { font-family: 'Open Sans', sans-serif; color: #01b0ee; font-size: 50px; font-weight: 300; text-align: center;
margin-bottom: 10px;}
.input-box .text-input { max-width: 450px; width: 100%; margin: auto auto 30px auto; display: block; height: 55px; line-height: 55px;
    padding: 0 20px; font-size: 20px; border: 1px solid #01B0EE; border-radius: 3px; }
.text-input.error { border-color: red !important;}
/*fancy selector start*/
.fancy-selector { max-width: 450px; width: 100%; clear: both; margin: auto auto 30px auto; text-transform: capitalize;}
.fancy-selector select { width: 100%; height: 55px;}
.fancy-selector .select2-container {width: 100% !important;}
.fancy-selector .select2-container .select2-selection--single {  height: 55px;  border-color: #01B0EE;}
.select2-dropdown, .select2-container--default .select2-search--dropdown .select2-search__field { border-color:#01B0EE; min-height: 30px;}
.select2-search--dropdown {margin-bottom: 10px;}
.fancy-selector .select2-container--default .select2-selection--single .select2-selection__rendered{ font-size: 20px; line-height: 55px; padding-left: 20px; padding-right: 30px;}
.fancy-selector .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #01B0EE transparent;
    border-width: 0 8px 10px 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #01B0EE transparent transparent transparent;
    border-width: 10px 8px 0 8px;
    margin-left:-9px;
}
.fancy-selector .select2-container--default .select2-selection--single .select2-selection__arrow { height: 53px; width: 30px;}
/*fancy selector end*/

.pop-alert { position: fixed; text-align: center; top: 10px; right: 10px; max-width: 500px; width: 80%; left: 0;  margin: auto;
    display: table;  height: 60px; line-height: 30px; font-size: 18px; color: #000; text-shadow: 1px 1px 0 rgba(0,255,255,0.5);}

.page-footer-main { float: left; width: 100%;}
.footer-content { float: left; width: 100%; padding: 30px 15px 24px; background-color: #EDF5F8; font-size: 10px; color: #999;}
.footer-content p { line-height: 16px; text-align: justify;}
.footer-content p.copyright { text-align: center; font-size: 11px;}

.thank-you-block { max-width: 800px; margin: auto; width: 100%; padding: 30px 15px 0; text-align: center;}
.thank-you-block h1 { font-weight: 600; color: #01B0EE;}
.thank-you-block p { font-size: 16px; font-weight: 300; line-height: 30px; margin-top: 30px;}
.thank-you-block img { margin: auto;}

.link-block .btn[disabled]{ background-color: rgba(0,0,0,0.2); opacity: 1; pointer-events: auto;}

.logo-content img {
    max-width: 420px;
    width: 100%;
}
.mobile-footer {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f9f9f9;
}
.mobile-links-list {
    margin: 0;
}
ul.mobile-links-list {
    display: none;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}
ul.mobile-links-list li {
    flex-basis: 0;
    flex-grow: 1;
}
ul.mobile-links-list li:last-child a {
    border-right: none;
}
.mobile-links-list i.fa {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
}
ul.mobile-links-list li a {
    display: block;
    font-size: 16px;
    padding: 10px 5px;
    border-right: solid thin #337ab7;
}
@media(max-width: 767px){
    .logo-content {text-align: center;}
    .logo-content img {margin: auto;}
    .tag-line {font-size: 15px; text-align: center;}
    .quote-line { font-size: 15px; text-align: center; margin-top:0;}
    .question-content h1 { font-size: 22px; line-height: 30px;}
    .answer-content {padding-left: 15px; padding-right: 15px; min-height: 1px;}
    .thank-you-block p {text-align: justify; text-align-last: center;}
    .thank-you-block p a:last-child{display: block;}
    body {
        padding-bottom: 60px;
    }
    .mobile-footer {
        display: block;
    }
}
@media(max-width: 480px){
    .tag-line {font-size: 13px;}
    .quote-line {text-align: justify; margin-top: 0; text-align-last: center; font-size: 13px;}
    .question-content h1 {font-size: 18px;}
    .link-block .btn { font-size: 20px;}
    .fancy-selector .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 18px;}
    .pop-alert {padding: 10px; font-size: 15px;}
    .footer-content > img {
        display: block;
        float: none;
        margin: 0 auto;
    }
}
@media(min-width:768px) and (max-width:991px){
    .tag-line {font-size: 15px;}
    .quote-line {font-size: 20px;}
    .question-content h1 { font-size: 30px;}
}