@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap");
/*&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900*/
/*requires skin.css imported*/

body {
    min-height: 100vh;
    font-size: 14px;
    background-color: var(--bg-page-color);
}
@media (min-width: 22rem) {
    body {
        font-size: 18px;
    }
}
body {
	font-family: 'Poppins', 'Open Sans', sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 'top' and 'footer' make for outermost layout */
div.top {
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer.footer {
}

/* sticky banner parts
   banner extends side to side, not part of inner layout */
header.banner {
    width: 100%;
    position: sticky;
    transition: height .3s;
    height: 90px;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    justify-content: left;
    background-color: var(--bg-banner-color);
    color: var(--tx-banner-color);
    font-weight: 600;
}
header.banner .banner-logo {
    height: 100%;
    aspect-ratio: 3 / 5;
    background: var(--bg-banner-color) url('/img/runnerlogo240x400.png') no-repeat left;
    background-size: cover;
}
header.banner .banner-title {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: height .3s, justify-content .3s, flex-direction .3s, align-items .3s;
}
@media (min-width: 45rem) {
    header.banner .banner-title {
        flex-direction: row;
    }
}
header.banner .banner-olga-txt {
    color: var(--tx-banner-darker-color);
}
header.banner .banner-welcome-txt, header.banner .banner-olga-txt {
    font-weight: 600;
}
header.banner .banner-welcome-txt {
    padding: 0 .3em 0 0;
    transition: display .3s, font-size .1s;
}
header.banner .banner-olga-txt {
    padding: 0;
}
@media (min-width: 45rem) {
    header.banner .banner-welcome-txt, header.banner .banner-olga-txt {
    	font-size: clamp(1.17rem, 4vw, 2.5rem);
    }
}
/* END: sticky banner parts */

/* Generic section header and sub-header */
.section-header {
    text-align: center;
    padding: 0 .5em 0 .5em;
}
.section-header span.txt {
    font-size: clamp(1.4rem, 6.5vw, 2.5rem);
    font-weight: 450;
}
.section-header-sub {
    text-align: center;
    padding: 0 .5em 0 .5em;
}
.section-header-sub span.txt {
    font-size: clamp(1.2rem, 5.5vw, 2.0rem);
    font-weight: 450;
}
.section-header span.txt span.bold,
.section-header-sub span.txt span.bold {
    font-weight: 600;
}
.section-header-sub2 {
    text-align: center;
    padding: 0 .5em 0 .5em;
}
/* END: Generic section header and sub-header */

/* page: is actually inner layout, using flex column */
#page {
    padding: 0;
    margin: 0;
    background-color: var(--bg-page-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}
#page.center {
    max-width: 70rem;
}

/* Blueprint */
section.blueprint {
    width: 100%;
    background: var(--bg-page-color) url('/staticImage/BlueprintBanner') center center / contain no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
section.blueprint .message1 {
    flex: 0 0 auto;
    padding: 0 .2em 0 .2em;
}
section.blueprint .message1 span.msg1 {
    font-size: clamp(.8rem, 4vw, 3.2rem);
    font-weight: 600;
    color: var(--tx-header-color);
}
section.blueprint .message2 {
    flex: 0 0 auto;
    padding: 0 .2em 0 .2em;
    margin-top: .5%;
    text-align: center;
}
section.blueprint .message3 {
    flex: 0 0 auto;
    padding: 0 .2em 0 .2em;
    margin-bottom: 3%;
    text-align: center;
}
section.blueprint .message2 span.msg2,
section.blueprint .message3 span.msg2 {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: clamp(.6rem, 2vw, 1.6rem);
    letter-spacing: .02em;
    color: var(--tx-header-color);
}
/* END: Blueprint */

/* meet olga */
section.meet-olga {
    width: 100%;
    background-color: var(--bg-page-color);
    color: var(--tx-content-color);
}
section.meet-olga .meet-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin-left: 1em;
    margin-right: 1em;
}
@media (min-width: 45rem) {
    section.meet-olga .meet-data {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: 2em;
    }
}
section.meet-olga .meet-data .meet-data-pic {
    background: var(--bg-page-color) url('/staticImage/MeetOlga') center center / contain no-repeat;
}
@media (min-width: 45rem) {
    section.meet-olga .meet-data .meet-data-pic {
        min-width: 40%;
    }
}
section.meet-olga .meet-data .meet-data-txt {
    max-width: 800px;
    min-width: 300px;
}
section.meet-olga .meet-data .meet-data-txt .meet-txt-left {
    padding-top: 2em;
    text-align: left;
}
section.meet-olga .meet-data .meet-data-txt .meet-txt-left .bold {
    font-weight: 600;
}
section.meet-olga .meet-data .meet-data-txt .meet-txt-italic-left {
    margin-top: 2em;
    text-align: left;
    font-style: italic;
}
@media (min-width: 45rem) {
    section.meet-olga .meet-data .meet-data-txt .meet-txt-italic-left {
        margin-top: 4em;
    }
}
section.meet-olga .meet-data .meet-data-txt .badge-holder {
    display: block;
    width: 100%;
    text-align: center;
}
section.meet-olga .meet-data .meet-data-txt .badge-holder .rrca {
    display: block;
    width: 100px;
    height: 47px;
    margin: auto;
    background-image: url('/img/rrca_100x47.png');
    border-style: solid;
    border-width: 1px;
    border-color: var(--bg-divider-color);
}
section.meet-olga .meet-data .meet-data-txt .badge-holder a {
    display: inline-block;
    min-width: 1px;
    box-sizing: border-box;
    outline: none;
    border-style: dashed;
    border-width: 1px;
    border-color: var(--bg-content-color);
    border-radius: 3px;
    text-decoration: none;
}
section.meet-olga .meet-data .meet-data-txt .badge-holder a:focus {
    border-color: var(--tx-link-hover-color);
}
section.meet-olga .meet-data .meet-data-txt .badge-holder a:link,
section.meet-olga .meet-data .meet-data-txt .badge-holder a:visited {
    color: var(--tx-link-color);
}
section.meet-olga .meet-data .meet-data-txt .badge-holder a:hover {
    border-color: var(--tx-link-hover-color);
    color: var(--tx-link-hover-color);
}
section.meet-olga .meet-data .meet-data-txt .badge-holder a:active {
    border-color: var(--tx-link-active-color);
    color: var(--tx-link-active-color);
}
section.meet-olga .meet-data .meet-data-txt .badge-holder a .insta {
    display: block;
    height: 47px;
    background-image: url('/img/insta.png');
    background-repeat: no-repeat;
    background-position: left 8px;
    line-height: 2.8em;
    font-weight: bold;
    background-size: auto;
    border-style: none;
    padding-left: 36px;
}
section.meet-olga .meet-data .meet-data-txt .meet-txt-right {
    text-align: right;
    font-style: italic;
}
/* END: meet olga */

span.bold {
    font-weight: 600;
}

/* coaching */
section.coaching {
    background-color: var(--bg-page-color);
    color: var(--tx-content-color);
}
section.coaching .coaching-points {
    display: flex;
    flex-direction: column;
    gap: 1em 0;
    align-items: center;
    padding-left: 1em;
    padding-right: 1em;
}
section.coaching .coaching-points .coaching-point {
    flex: 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30rem;
    /*rounded box*/
    border: none;
    border-radius: 10px;
    background-color: var(--bg-coaching-point-color);
}
@media (min-width: 45rem) {
    section.coaching .coaching-points .coaching-point {
        flex-direction: row;
        justify-content: start;
        max-width: 50rem;
        min-width: 18rem;
    }
}
section.coaching .coaching-points .coaching-point .coaching-point-icon {
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
section.coaching .coaching-points .coaching-point .coaching-point-icon .icon1,
section.coaching .coaching-points .coaching-point .coaching-point-icon .icon2,
section.coaching .coaching-points .coaching-point .coaching-point-icon .icon3 {
    display: inline-block;
    width: 120px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}
section.coaching .coaching-points .coaching-point .coaching-point-icon .icon1 {
    background-image: url('/img/plan48x48.png');
}
section.coaching .coaching-points .coaching-point .coaching-point-icon .icon2 {
    background-image: url('/img/strength48x48.png');
}
section.coaching .coaching-points .coaching-point .coaching-point-icon .icon3 {
    background-image: url('/img/navigation48x48.png');
}
@media (min-width: 45rem) {
    section.coaching .coaching-points .coaching-point .coaching-point-icon .icon1,
    section.coaching .coaching-points .coaching-point .coaching-point-icon .icon2,
    section.coaching .coaching-points .coaching-point .coaching-point-icon .icon3 {
        height: 120px;
    }
    section.coaching .coaching-points .coaching-point .coaching-point-icon .icon1 {
        background-image: url('/img/plan96x96.png');
    }
    section.coaching .coaching-points .coaching-point .coaching-point-icon .icon2 {
        background-image: url('/img/strength96x96.png');
    }
    section.coaching .coaching-points .coaching-point .coaching-point-icon .icon3 {
        background-image: url('/img/navigation96x96.png');
    }
}
section.coaching .coaching-points .coaching-point .coaching-point-txt {
    display: inline-block;
    box-sizing: border-box;
    min-width: 18rem;
    text-align: left;
    padding: 0 1em 1em 1em;
}
section.coaching .coaching-points .coaching-point .coaching-point-txt .coaching-point-head {
    text-align: center;
}
@media (min-width: 45rem) {
    section.coaching .coaching-points .coaching-point .coaching-point-txt .coaching-point-head {
        text-align: left;
    }
    section.coaching .coaching-points .coaching-point .coaching-point-txt {
        padding: 1em 1em 1em 0;
    }
}
section.coaching .coaching-points .coaching-point .coaching-point-txt .bold {
    font-weight: 600;
}
section.coaching .coaching-points .coaching-point .coaching-point-txt .coaching-justify {
    text-align: justify;
}
/* END: coaching */

/* why me */
section.whyme {
    background-color: var(--bg-page-color);
    color: var(--tx-content-color);
}
section.whyme .choose-points {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 45rem) {
    section.whyme .choose-points {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }
    section.whyme .choose-points .choose-point.border {
        border-style: solid;
        border-left-width: 0;
        border-right-width: 1px;
        border-top-width: 0;
        border-bottom-width: 0;
        border-color: var(--bg-divider-color);
    }
}
section.whyme .choose-points .choose-point {
    min-width: 10rem;
    max-width: 23rem;
    padding: 1em;
}
@media (min-width: 45rem) {
    section.whyme .choose-points .choose-point {
        max-width: 25%;
    }
}
section.whyme .choose-points .choose-point .choose-head {
    font-weight: 600;
    text-align: center;
}
section.whyme .choose-points .choose-point .choose-txt {
    text-align: justify;
}
section.whyme .discovery .text {
    text-align: center;
    padding: 0 2em 0 2em;
}
@media (min-width: 45rem) {
    section.whyme .discovery .text {
        text-align: center;
        padding: 0 8em 0 8em;
    }
}
section.whyme .discovery .text .bold {
    font-weight: 600;
}
section.whyme .discovery .explain {
    font-style: italic;
    text-align: center;
}
section.whyme .discovery .explain .narrow {
    padding: 0 1em 0 1em;
    display: inline-block;
    max-width: 450px;
    font-size: .8em;
}
/* END: why me */

/* services */
section.services {
    background-color: var(--bg-page-color);
    color: var(--tx-content-color);
}
section.services .offer {
    padding: 0 1em 0 1em;
    line-height: 1.5em;
    text-align: center;
}
.less-spacing {
    letter-spacing: -0.02em;
}
section.services .offer .text .bold {
    font-weight: 600;
}
section.services .service-points {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1em 0 1em;
    gap: 2em;
}
@media (min-width: 45rem) {
    section.services .service-points {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        padding: 0 2em 0 2em;/*gap==2 should match side padding==2 for wide media*/
    }
}
section.services .service-points .service-point {
    position: relative; /* price */
    border: none;
    border-radius: 10px;
    background-color: var(--bg-service-point-color);
    min-width: 16rem;
    max-width: 36rem;
    padding: 0 1em 1em 1em;
    flex: 1 1 45%;
}
/*circles*/
section.services .service-points .service-point .circle-holder {
    height: 0px;
    width: 0px;
    overflow: visible;
    margin-left: 50%;
    position: relative;
}
section.services .service-points .service-point .circle-holder .circle {
    box-sizing: border-box;/*this makes circles actually round, not oval*/
    position: absolute;
    left: -2em;
    top: -1.6em; /* 4/2 less some */
    width: 4rem;
    height: 4rem;
    background-color: var(--bg-services-circle-color);
    border-radius: 50%;
    border: none;
    padding-top: .9em;
    text-align: center;
}
section.services .service-points .service-point .circle-holder .circle span.circle-num {
    font-size: 1.6em;
    font-weight: 600;
}
section.services .service-points .service-point .service-head {
    font-weight: 600;
    text-align: center;
}
section.services .service-points .service-point .service-text {
    text-align: left;
}
section.services .service-points .service-point .service-text .centered {
    text-align: justify;
    padding:0;
    margin:0;
}
section.services .service-points .service-point .service-text span.bold {
    font-weight: 600;
}
section.services .service-points .service-point .price {
    position: absolute;
    bottom: .5em;
    left: 1em;
    text-align: left;
}
section.services .service-points .service-point ul {
    list-style-image: url("/img/check24x11.png");
    list-style-type: none;
}
section.services .service-points .service-point ul li {
}
section.services .service-points .service-point ul li.noimg {
    list-style-type: none;
    list-style-image: none;
}
/* END services */

#page>a#contact {height:0px;}

/* contact form */
section.contactme {
    background-color: var(--bg-page-color);
    color: var(--tx-content-color);
}
section.contactme .section-header-sub2 .contact-head {
    text-align: center;
    font-style: italic;
}
section.contactme .contact-form {
    margin: 0 1em 0 1em;
}
section.contactme .contact-form-inner {
    max-width: 40em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-content: stretch;
}
section.contactme .contact-form div.lbl {
    position: relative;
    margin: 1em 0 .3em 0;
}
section.contactme .contact-form div.txt {
    margin: 0 0 .5em 0;
}
section.contactme .contact-form div.lbl label {
    font-size: .8em;
    letter-spacing: .05em;
    color: var(--tx-content-color);
    font-family: 'Quicksand', serif;
    font-weight: 500;
}
section.contactme .contact-form div.lbl label super {
    font-size: 1.1em;
    color: var(--tx-contactme-label-super-color);
}
section.contactme .contact-form div.btn, .contact-form div.lbl {
    text-align: left;
}
section.contactme .contact-form div.txt input {
    box-sizing: border-box;
    border-color: var(--tx-contactme-input-border-color);
    border-width: 1px;
    border-radius: 4px;
    width: 100%;
    line-height: 1.8em;
    letter-spacing: .05em;
    font-size: 18px;/*need to set explicitly*/
    outline: none;
    color: var(--tx-content-color);
}
section.contactme .contact-form div.txt input:focus {
    border-color: var(--tx-contactme-input-focus-border-color);
}
section.contactme .contact-form div.txt textarea {
    border-color: var(--tx-contactme-input-border-color);
    border-width: 1px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 18px;/*need to set explicitly*/
    width: 100%;
    height: 100%;
    resize: none;
    outline: none;
    color: var(--tx-content-color);
}
section.contactme .contact-form div.txt textarea:focus {
    border-color: var(--tx-contactme-input-focus-border-color);
}
/* END contact form */


/* footer */
footer.footer {
    display: flex;
    flex-direction: row;
    justify-content: left;
    background-color: var(--bg-footer-color);
    color: var(--tx-footer-color);
    line-height: 2em;
}
footer.footer .footer-links {
    flex: 1 1 auto;
    text-align: right;
}
footer.footer .footer-copy{
    flex: 0 0 auto;
}
footer.footer .footer-divider {
    width: 3em;
    flex: 0 0 auto;
    background-image: linear-gradient(to bottom, var(--tx-content-color), var(--tx-content-color));
    background-size:  1px 100%;
    background-repeat: no-repeat;
    background-position: center;
}
footer.footer .footer-spacer {
    width: 1em;
    flex: 0 0 auto;
}
/* END: footer */

/* various spacers and dividers
 only div tags supported (by default block with 100% width)
 a divider has name dividerXXX where XXX is height in pixels or in rem/em units
 divider always has 1 pixel line in the middle;
 a spacer has name spacerXXX where XXX is same as divider, there is no line
*/
.divider1, .divider50, .divider1em, .divider1rem, .divider2em, .divider2rem, .divider4em, .divider4rem,
.divider6em, .divider6rem {
    display: block;
    width: 100%;
    background-image: linear-gradient(to bottom, var(--bg-divider-color), var(--bg-divider-color));
    background-size: 90% 1px;
    background-repeat: no-repeat;
    background-position: center;
}
.divider1 { height: 1px; }
.divider50 { height: 50px; }
.divider1em { height: 1em; }
.divider1rem { height: 1rem; }
.divider2em { height: 2em; }
.divider2rem { height: 2rem; }
.divider4em { height: 4em; }
.divider4rem { height: 4rem; }
.divider6em { height: 6em; }
.divider6rem { height: 6rem; }


.spacer5, .spacer10, .spacer20, .spacer50, .spacer1em, .spacer1rem,
.spacer2em, .spacer2rem, .spacer3em, .spacer3rem {
    display: block;
    width: 100%;
}
.spacer5 { height: 5px; }
.spacer10 { height: 10px; }
.spacer20 { height: 20px; }
.spacer50 { height: 50px; }
.spacer1em { height: 1em; }
.spacer1rem { height: 1rem; }
.spacer2em { height: 2em; }
.spacer2rem { height: 2rem; }
.spacer3em { height: 3em; }
.spacer3rem { height: 3rem; }