/*
Starts With ABC - overview Page Styles
Author: Jonathan Ferragut
Company: Alkemy, Inc.
*/


/* Page */

.wrap{
    max-width: 1920px;
    margin: 0 auto;
}

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1){
    * {
        -webkit-overflow-scrolling: touch;
    }
}


input::-webkit-input-placeholder{
    font-size: 1rem;
    color: black;
}
input[type="email"]::-webkit-input-placeholder,
input[type="email"]::placeholder{
    content:'Email Address';
}

#first_name_2::-webkit-input-placeholder,
#first_name_2::placeholder {
    content:'First name';

}
#last_name_2::-webkit-input-placeholder,
#last_name_2::placeholder {
    content:'Last name';
}

.page--overview .wrap p,
.page--overview .wrap h2,
.page--overview .wrap h3,
.page--overview .wrap h4,
.page--overview .wrap h5,
.page--overview .wrap li {
    font-family: 'Lato',sans-serif;
}

.page--overview .subheader--title{
    transform: none;
}

.page--overview .wrap .overview--hero>div>h2,
.page--overview .wrap .overview--hero>div>h3 {
    font-family: 'Montserrat';
    font-weight: normal;
}

.page--overview .wrap .overview--hero h2 {
    font-size: 4.5rem;
    line-height: 5rem;
}

.page--overview .wrap h2 {
    font-size: 2.875rem;
    line-height: 3.875rem;
}

@media screen and (width: 600px){
    .page--overview .wrap .overview--hero>div>h3 {
        font-size: 2.6rem;
    }
}
.page--overview .wrap .overview--hero h3 {
    font-size: 2rem;
    line-height: 3rem;
}

.page--overview .wrap h3 {
    font-size: 2rem;
    line-height: 3rem;
}

.page--overview .wrap p {
    font-size: 1.125rem;
    line-height: 2.25rem;
}

/* Navs */

.nav--breakdown{
    font-size: 1rem;
}

.nav--breakdown>li>a{
    padding: .25em .75em;
}

.nav--breakdown>li:not(:last-of-type) {
    border-right: 1px solid black;
}

.nav--breakdown>li>a.active{
    font-weight: bold;
    color: black;
}

.nav--breakdown>li>a{
    color: var(--secondary);
}


/* Color */

.list--green li::before{
    color: rgb(var(--main-green));
}

.list--blue li::before{
    color: rgb(var(--main-blue));
}

.list--white li::before{
    color: white;
}

/* Buttons */

.page--overview .overview--feature a.btn.btn-success.overview--button.text-uppercase.d-block.d-md-inline-block{
    color: white;
    font-family: 'Montserrat';
    font-weight: normal;
} 

.page--overview .btn.btn-primary-overview,
.page--overview .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button {
    font-family: 'Lato';
    font-weight: bold;
    font-size: 1.2rem;
    background-color: rgb(var(--main-yellow));
    border-color: rgb(var(--main-yellow));
    color: black;
    padding: 10px 40px;
    line-height: 1.5;
    transition: .35s ease-in-out;
}

.page--overview form .btn.btn-primary-overview {
    width: 100%;
    min-width: 350px;
    max-width: unset;
}

@media screen and (min-width: 990px) {
    .page--overview .btn.btn-primary-overview,
    .page--overview .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button {
        width: 30rem;
    }
}

.page--overview .btn.btn-primary-overview:hover,
.page--overview .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button:hover {
    color: white;
    background-color: rgb(var(--main-green));
    border-color: white;
    transform: scale(1.05);
    box-shadow: none;
}


/* Lists */

.page--overview .checklist {
    list-style: none; /* Remove default bullets */
    padding-left: 1.95vw;
    font-size: 1.125rem;
    list-style-position: outside;
}

.page--overview .checklist li{
    line-height: 2rem;
}

.page--overview .checklist li::before{
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    vertical-align: middle;
    /* add space between the bullet and the text */
    display: inline-block; 
    width: 2rem; 
    height: 2.2rem;
    margin-left: -vw;
}

@media screen and (min-width: 990px){
    .page--overview .checklist li::before {
        margin-left: -1.95vw;
    }
}


/* Cards */

.page--overview .card-deck .card{
    margin-right: 30px;
    margin-left: 30px;
}

.page--overview .card-img-top{
    max-height: 320px;
    object-fit: cover;
}

.page--overview .card,
.page--overview .card-footer {
    border:none;
    padding: 0;
}

.page--overview .card-body{
    padding: 2em 0 3em 0;
}

.page--overview .card-body h5{
    font-weight: bold;
    font-size: 1.375rem;
}

.page--overview .card-footer {
    background: transparent;
}


/* Containers */

.page--overview .container-fluid {
    padding-left: 30px;
    padding-right: 30px;
}

.page--overview .overview--support .container-fluid {
    padding-left: 40px;
    padding-right: 40px;
}

/* Sections */

.page--overview section:not(.overview--hero){
    margin: 8rem 0;
}

.overview--hero{
    height: 800px;
    background: url('../images/nutritionist-with-client.jpg') center no-repeat;
    background-size: cover;
    background-attachment: local;
    -webkit-overflow-scrolling: auto;
    position: relative;
}

@media only screen and (min-width: 990px){
    .overview--hero{
        min-height: 100%;
        background-attachment: fixed;
    }
}

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .overview--hero{
        background-attachment: local;
    }
}

@media screen and (min-width: 412px) and (max-width: 599px) {
    .overview--hero{
        background-position-x: -40rem;
    }
}
@media screen and (max-width: 411px) {
    .overview--hero{
        background-position-x: -40rem;
    }
}


.overview--hero > div {
    z-index: 10;
    max-width: 100%;
    max-height: 100%;
}

.overview--hero>div>h2,
.overview--hero>div>h3,
.overview--hero>div>p,
.overview--hero>div.row>div>h2,
.overview--hero>div.row>div>h3,
.overview--hero>div.row>div>p{
    color: white;
    text-shadow: 1px 1px 1px gray;
}


.overview--hero::after{
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: rgba(0,0,0,.5);
}

.overview--support .row{
    margin: 0;
}

.overview--philosophy {
    font-family: 'Montserrat';
    font-weight: normal;
    position: relative;
    background: url('../images/sunrise-runner.jpg') center no-repeat;
    background-size: cover;
    background-attachment: local;
    min-height: 500px;
}

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1){
    .overview--philosophy {
        background-attachment: local !important;
        background-position-y: center;
    }
}

@media screen and (min-width: 990px){
    .overview--philosophy{
        background-attachment: fixed;
        background-position-y: bottom;
    }
}

.overview--philosophy::after {
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: linear-gradient(to bottom, black, transparent);
}

.overview--philosophy > div {
    z-index: 10;
    position: relative;
    max-width: 700px;
}

.page--overview .overview--philosophy p{
    color: white;
}
.overview--philosophy p:first-of-type{
    font-weight: bold;
    font-size: 2.25rem;
    line-height: 3.25rem;
}
.overview--philosophy p:nth-of-type(2){
    font-family: 'Signalist',cursive;
    font-size: 6.25rem;
    line-height: 7.25rem;
    color: rgb(var(--main-yellow));
}
.overview--philosophy p:nth-of-type(3){
    font-size: 1.5rem;
    line-height: 2.25rem;
}


.page--overview .wrap .overview--mission p{
    font-size: 1.6rem;
    line-height: 3rem;
}


.overview--quote {
/*    background-color: #74992e; */
   background: rgb(var(--main-blue)); 
    min-height: 150px;
}


/*
.overview--quote2 {

   background: rgb(var(--main-blue));
    min-height: 150px;
}
*/



.overview--why-us{
    background: url('../images/confident-strong-woman.jpg') center no-repeat;
    background-size: cover;
    background-attachment: local;
    min-height: 600px;
    position: relative;
}

.overview--why-us::after{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.5);
}

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .overview--why-us {
        background-attachment: local !important;
    }
}

@media screen and (min-width: 990px) {
    .overview--why-us {
        background-attachment: fixed;
    }
    .overview--why-us::after {
        background: linear-gradient(to left, black 30%, black, transparent 60%);
    }
}


.overview--why-us>div{
    z-index: 10;
    position: relative;
}

.overview--why-us h2{
    color: rgb(var(--main-yellow));
    font-size: 2.875rem;
}

.overview--why-us li{
    color: white;
    font-size: 1.125rem;
    line-height: 2.5rem;
}

.overview--lifestyle h2{
    font-size: 2.875rem;
}

.overview--lifestyle p{
    font-size: 1.25rem;
}


.page--overview .widget--questions a,
.page--overview .widget--questions a:not([href]):not([tabindex]) {
    color: black;
}
.page--overview .widget--questions a:hover,
.page--overview .widget--questions a:hover:not([href]):not([tabindex]) {
    color: rgb(var(--main-blue));
}