body {
    overflow: scroll;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #050505;
    position: relative;
}

html {
    scroll-behavior: auto;
    position: relative;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* scroll-behavior: unset; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main {
    width: 100%;
    margin-bottom:16px;
}

.container {
    position: relative;
    max-width: 1120px;
    width: 100%;
    height: 100%;
    margin-left:auto;
    margin-right:auto;
    /*padding: 0 25px;*/
}

.vv_embedded_page .page{
    border:0px solid transparent;
}

sup{
    vertical-align: super;
    font-size: 0.6em;
}

ul {
    list-style: none;
}

ul li {
    color: #788da1
}

ul li::before {
    content: "\2022";
    color: #ff923e;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

select{
    position: relative;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('src/img/calendar-arrow-down-green.svg');
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-position: calc(100% - 10px) center;
}

select::-ms-expand {
    display: none;
}

.clearfix {
    clear: both;
    padding: 0px;
}

/**
 * Fixes the screen - needed to freezeUI
 */
 .fixed {
    position: fixed!important;
    box-sizing: border-box;
    width: 100%;
}

/* ••• */
/* Header */
/* ••• */

.header {
    width: 100%;
    height: 170px;
    color: #A43A90;
    background-color: #ffffff;
    padding: 16px 0px;
    border-bottom:1px solid #050505;
}

.header-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.header__logo {
    display: block;
    width: 114px;
    height: 68px;
    order:2;
}

.header__logo IMG {
    width: 100%;
    height: auto;
}

.site-intended {
    font-family: open-sans, sans-serif;
    font-size: 11px;
    text-align: center;
    color:#050505;
    order:4;
    width:100%;
    margin-top:30px;
}

.peer-points-logo{
    width:188px;
    flex-basis:188px;
    height:14px;
    order:3;
    align-self: flex-end;
}

.peer-points-logo IMG{
    width:100%;
}

.top-navigation {
    position:relative;
    width:100%;
    flex-basis:100%;
    text-align: center;
    order:1;
    padding-bottom:16px;
}

.top-navigation a {
    font-size: 11px;
    margin: 0px 4px;
    text-decoration: none;
    color: #050505;
}

.top-navigation a:last-child {
    margin-right: 0px;
}



/* ••• */
/* Video Player */
/* ••• */

.video-player {
    width: 100%;
    margin-bottom:15px;
}

.video-player IFRAME {
    display: block;
    margin: 0px auto;
    position: relative;
    left: -1px;
}

.media-player__menu {
    width: 260px;
    background-color: #043865;
}

.video-js {
    width: 100%;
    height: 100%;

}



.vv_embedded_page .page{
    border:0px solid transparent;
}


/* ••• */
/* Appointment Scheduler */
/* ••• */

.schedule-appointment {
    position:relative;
    display:block;
    background-color: #8246af;
    width: calc(100% - 50px);
    max-width:550px;
    padding:20px 10px;
    margin:0px auto;
    border-radius: 10px;
    text-align: center;
    color:white;
}

.user{
    flex-basis:175px;
    margin:0px auto;
}

.user-info {
    font-size:16px;
    margin-bottom:16px;
}

.user-info p{
    margin-bottom:4px;
}

.user-info #userName{
    font-weight: 700;
}

a#request-phone{
    display:flex;
    align-items:center;
    width:132px;
    cursor: pointer;
    margin:0px auto;
}

a#request-phone IMG{
    width:100%;
}

.user-photo{
    display:block;
    border: 2px solid white;
    border-radius: 50%;
    width: 113px;
    height: 113px;
    margin: 0px auto 10px;
    overflow: hidden;
}

IMG#userPhoto {
    height: 113px;
    width: 113px;
}


/* ••• */
/* Section Callouts */
/* ••• */

.section-callout {
    width:100%;
}

.callout-wrapper {
    display:block;
}

.callout {
    background-color: #00B5E6;
    color: white;
    flex-basis: calc(33.3% - 10px);
    border-radius: 5px;
    text-align: center;
    padding:16px 15px 12px;
    margin-bottom:15px;
}

.callout:last-child{
    margin-bottom:0px;
}

.callout p {
    font-size: 17px;
    line-height: 22px;
    margin-bottom: 15px;
}

.callout a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    margin:0px auto;
    background-color: #6944a4;
    border:1px solid white;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-size:18px;
    font-weight: 700;
}

.callout a::after {
    width: 17px;
    height: 11px;
    margin-left:6px;
    content: '';
    background-image:url('./src/img/cta-arrow.svg');
    background-repeat: no-repeat;
    background-size:17px auto;
}


#bottom-of-content {
    display: block;
    position: relative;
    width: 100%;
    height: 0px;
    margin-bottom: 0;
}


/* ••• */
/* ISI */
/* ••• */

#isi-spacer{
    display:block;
    width: 100%;
    height:207px;
}

section.isi {
    background-color: white;
    bottom:0px;
    left:0px;
    width:100%;
    /* height:344px; */
    color: #333;
    font-weight: 300;
    font-style: normal;
    /*padding: 18px 0px;*/
    z-index: 100;
}

section.isi .isi__more .open-btn,
section.isi .isi__more .close-btn{
    width:100%;
    height:100%;
    align-items: center;
    justify-content: center;
}

section.isi .isi__more .open-btn{
    margin-top:  -2px;
    }

section.isi .isi__more .close-btn{
    margin-top:  -5px;
    }

section.isi .isi__more .open-btn{
    display:flex;
}

section.isi .isi__more .close-btn{
    display:none;
}

body.detach-isi section.isi .isi__more .open-btn{
    display:none;
}

body.detach-isi section.isi .isi__more .close-btn{
    display:flex;
}

section.isi .isi-content{
    /* display:flex; */
    justify-content: space-between;
}

body.detach-isi section.isi .isi-content{
    display:block;
}

body.detach-isi section.isi .isi-content-section:last-child{
    padding-top:0px;
}

section.isi .expanded-isi-content{
    display:none;
}

body.detach-isi section.isi .expanded-isi-content{
    display:block;
}

section.isi h2{
    font-size:16px;
    line-height:1em;
    font-weight: 600;
    margin-bottom:11px;
    font-family: open-sans, sans-serif;
}

section.isi p{
    font-size:14px;
    line-height:17px;
    margin-bottom:14px;
}

section.isi .isi-content-section{
    flex-basis:calc(50% - 20px);
    margin-bottom:38px;
}

section.isi .isi-content-section:last-child{
    flex-basis:calc(50% + 10px);
    margin-bottom:0px;
    padding-top:28px;
}


/* ••• */
/* Modal */
/* ••• */

.modal {
    display:none;
    justify-content: center;
    align-items: center;
    background-color: rgba(13, 72, 100, 0.7);
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 100;
    display: none;
    z-index: 10000;
}

.modal.active{
    display:flex;
}

.modal__container {
    position: relative;
    max-width: 650px;
    width: calc(100% - 25px);
    border-top-right-radius: 38px;
    border-bottom-left-radius: 38px;
    background-color: #F4F6F8;
    border: 5px solid #8246AF;
    margin: 0px auto;
    padding: 50px 0px 18px;
}

.modal__close {
    position:absolute;
    top:11px;
    right:22px;
    width:60px;
    height:25px;
    display:flex;
    align-items: center;
    justify-content: center;
    background: white;
    font-size:14px;
    color: #c48c40;
    border-radius: 12px;
    border: 1px solid #cdd9e0;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

.modal__alert {
    display:flex;
    align-items: center;
    justify-content: center;
    width:calc(100% - 44px);
    height:60px;
    color: white;
    font-size:20px;
    font-weight: 700;
    text-align: center;
    margin: 0 auto 6px;
    border-top-left-radius: 18px;
    border-bottom-right-radius: 18px;
    background-color: #8246AF;
}

.modal__content.confirmed .modal__alert{
    font-size:18px;
}

.modal__content.confirmed .modal__calendar{
    display:none;
}

.modal__content.confirmed .modal__form{
    text-align: center;
}

.modal__calendar {
    width:100%;
    background-color: white;
    padding: 10px 30px;
    height: auto;
}

.modal__calendar .calendar,
.modal__calendar .calendar .bootstrap-datetimepicker-widget{
    width:100%;
    height:100%;
}

.bootstrap-datetimepicker-widget .row{
    display:block;
    width:100%;
    height:100%;
}

.bootstrap-datetimepicker-widget .datepicker{
    flex-basis:314px;
    max-width:314px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin:0px auto 20px;
}

.bootstrap-datetimepicker-widget .timepicker{
    flex-basis: 188px;
    max-width:188px;
    display: flex;
    align-items: center;
    margin:0px auto;
}

.bootstrap-datetimepicker-widget table{
    display:block;
}

.bootstrap-datetimepicker-widget table tr:last-child,
.bootstrap-datetimepicker-widget table tr:last-child{
    display:flex;
    justify-content: space-between;
    width:100%;
    padding-top:1px;
}

.bootstrap-datetimepicker-widget table th.dow{
    display:flex;
    align-items: center;
    justify-content: center;
    flex:1;
    font-size:16px;
    font-weight: 700;
    width:40px;
    height:28px;
}

.bootstrap-datetimepicker-widget thead{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom:8px;
}

.bootstrap-datetimepicker-widget tbody{
    display:block;
    width:100%;
}

.bootstrap-datetimepicker-widget tbody tr{
    display:flex;
    justify-content: space-between;
    width:100%;
}

.bootstrap-datetimepicker-widget tbody tr td.day{
    display:flex;
    align-items: center;
    justify-content: center;
    flex:1;
    font-size:14px;
    width:26px;
    height:23px;
    border-radius: 0px;
}

.bootstrap-datetimepicker-widget tbody tr td.day.active{
    background-color:#8246AF;
    color:white;
    font-weight: 700;
    text-shadow: none;
}

.bootstrap-datetimepicker-widget tbody tr td.day.today:before{
    content:none;
}

.bootstrap-datetimepicker-widget tbody tr td.day.old,
.bootstrap-datetimepicker-widget tbody tr td.day.new{
    color: #E5E5E5;
}

.bootstrap-datetimepicker-widget thead th .fa-chevron-left:before,
.bootstrap-datetimepicker-widget thead th .fa-chevron-right:before{
    display:block;
    width:9px;
    height:16px;
    /*background-image:url('src/img/calendar-arrow.svg');*/
    background-repeat: no-repeat;
    background-size: 9px auto;
    /*content:'';*/
}

.bootstrap-datetimepicker-widget thead th .fa-chevron-right:before{
    /*transform:rotate(180deg);*/
}

.bootstrap-datetimepicker-widget table th.picker-switch{
    width:fit-content;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight: 700;
    color:#333;
    padding:0px 6px;
}

.bootstrap-datetimepicker-widget table tr td span{
    display: flex;
    align-items: center;
    justify-content: center;
    height:36px;
}

.bootstrap-datetimepicker-widget table tr:first-child td span,
.bootstrap-datetimepicker-widget table tr:last-child td span{
    display:block;
    width:54px;
    height:9px;
}

table.table-condensed tr{
    display:flex;
}

table.table-condensed tr td{
    padding:10px 0px;
}

table.table-condensed td:last-child{
    width:38px;
    padding:2px 0px;
}

table.table-condensed tr:first-child td,
table.table-condensed tr:last-child td{
    min-width:54px;
    width:54px;
    height:9px;
    line-height:9px;
    text-align: center;
    padding:0px;
}

table.table-condensed tr td.separator{
    display:flex;
    align-items: center;
    justify-content: center;
    min-width:30px;
    width:30px;
    font-size: 16px;
    font-weight: 700;
}

table.table-condensed tr td.separator:last-child{
    width:54px;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover{
    background:transparent;
}

.datepicker-months table.table-condensed tr:first-child td, 
.datepicker-months table.table-condensed tr:last-child td,
.datepicker-years table.table-condensed tr:first-child td, 
.datepicker-years table.table-condensed tr:last-child td,
.datepicker-decades table.table-condensed tr:first-child td, 
.datepicker-decades table.table-condensed tr:last-child td{
    display:flex;
    width:100%;
    height:auto;
    flex-wrap: wrap;
}

.datepicker-months table.table-condensed tr td span.active,
.datepicker-years table.table-condensed tr td span.active,
.datepicker-decades table.table-condensed tr td span.active{
    background-color:#8246AF;
}

.datepicker-months table.table-condensed tr:first-child td span, 
.datepicker-months table.table-condensed tr:last-child td span,
.datepicker-years table.table-condensed tr:first-child td span, 
.datepicker-years table.table-condensed tr:last-child td span,
.datepicker-decades table.table-condensed tr:first-child td span, 
.datepicker-decades table.table-condensed tr:last-child td span{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-basis:25%;
    height: 50px;
}

.timepicker-hours table.table-condensed tr td,
.timepicker-minutes table.table-condensed tr td{
    padding: 10px 0px;
    width: 54px !important;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bootstrap-datetimepicker-widget .btn[data-action=togglePeriod]{
    background-color: #8246AF;
    border:0px solid transparent;
    color:white;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
}

.fa-arrow-up:before,
.fa-arrow-down:before {
    display:block;
    width:16px;
    height:9px;
    background-image:url('src/img/calendar-arrow-down.svg');
    background-repeat: no-repeat;
    background-size: 16px auto;
    margin: 0px auto;
    content:'' !important;
}

.fa-arrow-up:before {
    transform:rotate(180deg);
}

.modal__form {
    font-family: Arial, Helvetica, sans-serif;
    padding: 16px 24px 0px;
}

.modal__form h4{
    font-size:20px;
    font-weight: 700;
    margin-bottom:12px;
}

.modal__input {
    width: 100%;
    height: 40px;
    font-size:22px;
    padding-left:16px;
    border: 1px solid rgba(19, 87, 117, 0.3);
    margin-bottom:16px;
}

.modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width:137px;
    height:38px;
    border-radius: 19px;
    background-color: #00B5E6;
    font-size:20px;
    font-weight: 700;
    color: white;
    border: none;
    margin-left:auto;
    margin-right:0px;
    cursor: pointer;
}

/* EVERYTHING WIDER THAN 1024 */
@media only screen and (min-width: 1024px) {


    .modal__content.confirmed .modal__alert{
        font-size:26px;
    }

    .modal__container{
        padding: 80px 0px 48px;
    }

    .modal__form {
        padding: 26px 70px 0px;
    }

    .modal__form h4{
        font-size:22px;
        margin-bottom:8px;
    }

    .modal__button{
        width:186px;
    }

    .modal__input {
        height: 50px;
        padding-left:10px;
        margin-bottom:33px;
    }

    .modal__calendar {
        padding: 22px 55px;
        height: 235px;
    }

    .bootstrap-datetimepicker-widget .row{
        display:flex;
        justify-content: space-between;
    }

    .modal__alert{
        width:550px;
        height:104px;
        font-size:35px;
        margin-bottom:20px;
        font-size: 27px;
    }

    .modal__close {
        top:25px;
        right:45px;
        width:80px;
        height:24px;
        font-size:15px;
        border-radius: 17px;
    }



    .header{
        padding: 22px 0px;
        height:145px;
    }

    .header-container{
        align-items: flex-end;
        flex-wrap: nowrap;
    }

    .header__logo {
        width: 169px;
        height: 100px;
        order:unset;
    }

    .top-navigation{
        padding-bottom:0px;
        order:unset;
    }

    .site-intended{
        font-size:16px;
        order:unset;
        flex:1;
    }

    .peer-points-logo{
        width:265;
        flex-basis:265px;
        height:22px;
        order:unset;
    }

    .top-navigation{
        position: absolute;
        top: 0px;
        right: 10px;
        width: unset;
    }

    .schedule-appointment{
        display:block;
        width: 230px;
        height: 435px;
        padding:20px 10px;
    }

    .user{
        flex-basis:unset;
        padding:0px;
    }

    .user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size:18px;
    }

    a#request-phone{
        width:180px;
        margin: 0px auto;
    }

    .bootstrap-datetimepicker-widget .timepicker{
        margin:unset;
    }

    .video-player{
        width: 848px;

        margin-bottom:0px;
        /*border:1px solid #050505;*/
        border-top:0px solid transparent;
    }

    .callout-wrapper {
        display:flex;
        justify-content: space-between;
    }   
    
    .callout{
        margin-bottom:0px;
    }

    section.isi .isi-content-section{
        flex-basis:calc(50% - 18px);
        margin-bottom:38px;
        padding-right:10px;
    }

    section.isi .isi-content-section:last-child{
        flex-basis:calc(50% - 18px);
        margin-bottom:0px;
        padding-top:0px;
    }

    section.isi h2 {
        font-size:20px;
        margin-bottom:8px;
    }

    section.isi b {
    	font-weight:  600;
    }

    footer .footer-content p{
        font-size:15px;
        line-height:20px;
    }
    
    footer .footer-navigation a{
        display:inline-block;
        font-size:16px;
        line-height:1em;
    }

    .separator{
        display:inline-block;
        margin:0px 6px;
    }
}