/************************************************************************
*GENERAL
************************************************************************/
body {
    font-family: 'Open Sans';
}

h1 {
    font-size: 50px;
    line-height: 69px;
    font-weight: 400;
    color: #37404d;
    margin: 1.4em 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

h3 {
    color: #37404D;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

h5 {
    color: #37404d;
    line-height: 30px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

h6 {
    color: #3c3950;
    line-height: 30px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 1.19em 0;
}

.sub-title {
    margin: 0 0 1.1em;
    color: #5f727f;
    font-weight: 400;
}

p,
li {
    color: #5f727f;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
}

blockquote {
    color: #99a9b5;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 37px;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

blockquote::before {
    content: "“";
    font-family: Serif;
    position: absolute;
    font-size: 80px;
    opacity: 0.3;
    margin-left: -50px;
}

.bg-light {
    background-color: #f8f8f8 !important;
    border-top: 1px solid #ebebeb !important;
    border-bottom: 1px solid #ebebeb !important;
}

.bg-blue {
    background-color: #0facf3 !important;
}

.border-primary {
    border-color: #0facf3 !important;
}

.hoverBlue {
    transition-duration: 0.8s;
}

.hoverBlue:hover {
    color: #0facf3;
    transition-duration: .05s;
}

footer li {
    list-style: none;
}

footer ul {
    padding-left: 0px;
    margin-left: 0px;
}

a {
    color: #0facf3;
}

a:hover {
    color: #0facf3;
}

.progress-bar {
    background-color: #0facf3 !important;
}

.progressBar,
.progressBarLast {
    width: 15%;
}

/************************************************************************
*NAVBAR STYLES
************************************************************************/
.nav-link:hover {
    color: #0facf3 !important;
}

.active {
    color: #0facf3 !important;
    border: solid 2px #0facf3;
    padding: 4px;
    margin-top: 2px;
}

#moreInfoDropDown {
    width: 250px;
}

.activeDropDown {
    color: #0facf3 !important;
    border-left: solid 4px #0facf3;
}


/************************************************************************
*BUTTON STYLES
************************************************************************/
.btn-primary {
    background-color: #0facf3;
    border-color: #0facf3;
    color: white;
    border-radius: 0px;
    padding: 10px;
    font-weight: 100;
    letter-spacing: 0.05rem;
}

.btn-primary:hover {
    background-color: #108cc5 !important;
    border-color: #108cc5 !important;
    color: white !important;
}

.btn-link {
    color: #0facf3;
    font-weight: 600;
}

.btn-link:hover {
    color: #108cc5;
    text-decoration: none;
}

.btn-link-footer {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    list-style: none;
    color: rgb(97, 103, 113);
}

.btn-outline-primary {
    border-color: #0facf3 !important;
    color: #0facf3 !important;
    border-radius: 0px;
    padding: 10px;
    font-weight: 100;
    letter-spacing: 0.05rem;
}

.btn-outline-primary:hover {
    background-color: #0facf3 !important;
    color: white !important;
}

.selectPlanButtonDark {
    background-color: #108cc5 !important;
    border-color: #108cc5 !important;
    color: white !important;
}

/************************************************************************
*MAIN PAGE
************************************************************************/
/* GET THE HEIGHT OF THE BROWSER WINDOW AND SUBTRACT THE TOPBAR AND NAVBAR */
.full-height {
    height: calc(100vh - 150px);
}

.discoverCardIcon {
    width: 48px;
    height: 48px;
    color: #b5b9bf;
    stroke-width: 1;
}

.readMoreIcon {
    height: 18;
    width: 18;
    stroke-width: 1;
}

.plan-title {
    line-height: 38px;
    font-size: 28px;
    letter-spacing: 1px;
    color: #5f727f;
    text-transform: uppercase;
    font-weight: 400;
}

.feature-strike-through {
    text-decoration: line-through;
}

.price {
    font-size: 65px;
    line-height: 1;
    color: #444;
    text-align: center;
}

.price-sub-title {
    line-height: 25px;
    color: #444;
    font-weight: 400;
    font-size: 14px;
}

.feature {
    padding-top: 8px;
    padding-bottom: 10px;
    list-style: none;
    color: #99a9b5;
}

.most-popular {
    margin-top: -37px;
    background-color: #0facf3 !important;
}

.featureCard {
    transition-duration: 0.3s;
}

.featureCard:hover {
    transform: scale(1.05);
    transition-duration: .087;
}

.themeButton {
    color: #444;
}

.themeButtonActive {
    border-bottom: 1px solid #0facf3;
    color: #0facf3;
    border-radius: 0px;
}

.bg-newsletter {
    background-image: url('/img/email-pattern.png');
    background-repeat: repeat;
}

.footerIcon {
    height: 15;
    width: 15;
    stroke-width: 1;
}

/************************************************************************
*PAYMENTS
************************************************************************/
#totalPrice {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 100;
}

.quote {
    overflow: hidden;
}

/************************************************************************
*TESTIMONIALS
************************************************************************/

.quote:after {
    position: absolute;
    font-family: 'Open Sans';
    content: '”';
    font-size: 160px;
    right: 20px;
    bottom: -125px;
    color: #e7ebee;
}