/**************************************************************************************************/
/********* MISC ***********************************************************************************/
/**************************************************************************************************/
html {
    font-size:var(--font-size);
}
body {
    min-height:100vh;
    color: var(--color-black);
    background: var(--color-main-bg);
    font-family: var(--font1);
    font-weight: 200;
    letter-spacing:0.01em;
}

img, svg, video{display:block;max-width:100%;height:auto;}
svg {fill:currentColor;}


h1, h2, h3, h4, h5 {line-height:1.2em;font-weight:400;margin:.5em 0;}
h1, .h1 {font-size:2rem;margin:0;font-family: var(--font2);}
h2, .h2 {font-size:1.8rem;margin: 0;}
h3, .h3 {font-size:1.2rem;font-weight:700;}
h4, .h4 {font-size:1.1rem;}
h5, .h5 {font-size:1rem;}


.huge {font-size:var(--font-size-huge);}
.big {font-size:var(--font-size-big);}
.small {font-size:var(--font-size-small);}
.tiny {font-size:var(--font-size-tiny);}

strong, .bold {font-weight:700;}
em, .italic {font-style: italic;}
p {line-height:1.2em;}
.underline {text-decoration:underline;}
a {text-decoration:none;color:inherit;}
.upper {text-transform:uppercase;}

/** Layouts **/
.main-page {
    margin-top:3vh;
}
.space-out {
    margin-left: var(--space-out);
    margin-right: var(--space-out);
}


.visually-hidden {
    display: none;
}
/**************************************************************************************************/
/********* TEXT STYLING ***************************************************************************/
/**************************************************************************************************/
.txt p {line-height:1.3em;margin: 1.5em 0;}
.txt ul {line-height:1.3em;margin:1em 0;padding-left:1em;list-style-type:disc;}
    .txt ul ul {list-style-type:circle;margin:.5em 0;}
.txt > *:first-child {margin-top:0;}
.txt > *:last-child {margin-bottom:0;}
.txt a {text-decoration:underline;}

@media screen and (min-width: 651px) {
    h1, .h1 {font-size:2.8rem;}
    h2, .h2 {font-size:2rem;}
    h3, .h3 {font-size:1.5rem;}
}

/**************************************************************************************************/
/********* Buttons ********************************************************************************/
/**************************************************************************************************/
.ctaBtn {
    display:block;
	position:relative;
    color: #fff;
    font-size: 15px;
    width: 15rem;
}
.ctaBtnTxt {
    position:absolute;
    top:50%; left:50%;
    transform: translate(-65%, -50%);
    z-index:2;
}
.ctaBtnTxt > span {
    display:block;
    line-height:.87em;
}
.ctaBtnTxt > span:nth-child(2) {
    font-size:25px;
}
.btnBg {
    display: block;
    position:relative;
    fill: var(--color-green);
    width:100%;
    z-index:1;
}

.ctaBtnFooter {
    display:flex;
    justify-content: center;
    margin: var(--space-out) auto;
}

.btnPlus,
a.btnPlus {
    display:block;
    position:relative;
    padding-bottom:2px;
    text-align:right;
    font-family: var(--font2);
    margin-top: 1em;
    text-decoration: none;
    line-height:1.2em;
    overflow:hidden;
}
a .btnPlus::before,
a.btnPlus::before {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    border-bottom:2px solid;
}

a .btnPlus::after,
a.btnPlus::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:10%;
    border-bottom:2px solid #fff;
    transform: translatex(0) scaleX(0);
    transform-origin: 0 0;
}
a:hover .btnPlus::after,
a.btnPlus:hover::after {
    transition: transform .35s ease-in-out;
    transform: translatex(1005%) scaleX(1)
}


@media screen and (max-width: 600px) {
    .ctaBtn {width: 17rem;}
}
/**************************************************************************************************/
/********* TITLES *********************************************************************************/
/**************************************************************************************************/
.mainTitle {
    text-align:center;
    margin-top: calc(var(--space-out) / 2);
    padding: .7em var(--space-out);
    background: var(--color-light-green);
    font-family: var(--font2);
}
.mainTitleLeft {
    text-align:left;
    padding-left: calc(var(--space-out) * 1.5);
}