button, .button {
    border: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    display: inline-block;
    background: inherit;
    color: inherit;
}
button.nobutton {
    padding: unset
}
a, .a {
    text-decoration: none;
    color: currentColor;
    cursor: pointer;
}
a:not(.button):not([class*="box"]):not([class*="swiper-slide"]):not([role="menuitem"]), .a {
    text-decoration: underline;
    text-decoration-color: hsl(from currentColor h s l / 0.6);
    color: currentColor;
    transition: text-decoration-color var(--transition-time) ease-in-out;
    &:hover {
        text-decoration-color: currentColor;
    }
}
p {
    margin: 0 0 .5rem;
}
p:last-child, p:only-child {
    margin-bottom: 0
}
main a.button, main a.nu {
    text-decoration: none
}
strong, b {
    font-weight: 600;
}
h1, .h1 {
    --font-size: 1.9rem;
    font-size: var(--font-size);
    color: var(--dark);
    font-weight: 300;
    text-align: center
}
h2, .h2 {
    --font-size: 1.8rem;
    font-size: var(--font-size);
    color: var(--dark);
    font-weight: 300;
}
h3, .h3 {
    --font-size: 1.45rem;
    font-weight: 300;
    font-size: var(--font-size);
}
h4, .h4 {
    font-weight: 500;
    font-size: 1rem
}
h5, .h5 {
    font-weight: 500;
    font-size: 1rem
}
h6, .h6 {
    font-weight: 500;
    font-size: 1rem
}
h1, .h1, h2, .h2, h3, .h3 {
    line-height: 1;
    font-family: var(--highlight-font);
    color: var(--fcolor, var(--color2))
}
h4, .h4, h5, .h5, h6, .h6 {
    line-height: 1;
    font-family: var(--highlight-font);
    color: var(--fcolor, var(--dark));
}
h1 small:first-child {
    display: block;
    font-size: max(0.42em,1rem);
    font-weight: 500;
    margin-bottom: .35em;
    color: var(--color2);
}
h1 span {
    display: block;
    margin-left: -.07em
}
h1 small:last-child {
    display: block;
    font-size: max(0.3em,1rem);
    margin-top: .45em;
    color: var(--dark);
}
.h1, h2, .h2, h3, .h3 {
    margin: .5em 0 .25em;
}
h1, .h1, 
h2, .h2, 
h3, .h3, 
h4, .h4, 
h5, .h5, 
h6, .h6 {
    text-transform: uppercase;
    margin-top: .75em;
    &:first-child {
        margin-top: 0
    }
    &:only-child {
        margin: 0
    }
    + p, + ul, + ol {
        margin-top: .5em
    }
    span {
        font-size: 0.68em;
        display: block;
        color: var(--fcolor, var(--dark));
        margin-bottom: .25em;
    }
}
.text-regular {
    text-transform: none;
}
.font-regular {
    color: var(--text-color);
    text-transform: none;
    font-weight: 300
}
.break, .hyphens {
    -webkit-hyphens: auto;
    hyphens: auto;
}
.small {
    font-size: .76em
}
.smaller {
    font-size: .6em
}
sup, sub {
    display: inline-block;
    position: relative;
    top: -.6em;
    font-size: .5em;
}
body img {
    height: auto;
    max-width: 100%;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.upper{
    text-transform: uppercase
}
.lower {
    text-transform: none
}
.table > * {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: .5em;
    > * {
        flex: 3 1 150px;
        text-align: left
    }
    > .tc1 {
        flex: 1 1 100px;
        padding-right: .5em;
    }
    > .tc0 {
        flex: .5 1 50px;
        padding-right: .5em;
    }
}
main ul {
    padding: 0;
    list-style: none;
}
main ul li {
    position: relative;
    padding-left: .75em;
}
main ul li:before {
    content: '';
    position: absolute;
    top: .5em;
    left: 0;
    width: .5em;
    height: .5em;
    border-radius: 100%;
    background-color: var(--color1);
}
button:not(.nobutton), .button {
    line-height: 1.5;
    text-align: center;
    padding: calc(.5 * var(--padding)) calc(.75 * var(--padding));
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--main-font);
    letter-spacing: var(--letter-spacing1);
    font-weight: 400;
    border-radius: var(--border-radius);
    border: 4px solid var(--border-color, var(--color1));
    transition: background-color var(--transition-time) ease-in-out, color var(--transition-time) ease-in-out;
    &:not([class*="background_"]) {
    background-color: var(--light);
    }
    &:not([class*="color_"]) {
        color: var(--color1);
    }
    &:hover {
        background-color: var(--color2);
        color: var(--light);
    }
}
/* TABLET */
@media only screen 
    and (min-width : 768px) 
    and (max-width : 1200px) 
    and (-webkit-min-device-pixel-ratio: 1),
    only screen 
    and (min-width : 768px) 
    and (max-width : 1200px)
    and (-webkit-min-device-pixel-ratio: 2),
    (min-width: 501px) and (max-width: 1100px){
    h1, .h1 {
        --font-size: 2.6rem;
    }
    h2, .h2 {
        --font-size: 2.3rem
    } 
    h3, .h3 {
        --font-size: 1.8rem
    }
    h4, .h4 {
        font-size: 1rem
    }
    h5, .h5 {
        font-size: 1rem
    }
    h6, .h6 {
        font-size: 1rem
    } 
}
/* DESKTOP */
@media only screen and (min-width: 1201px){
    h1, .h1 {
        --font-size: 3rem;
    }
    h4, .h4 {
        font-size: 1rem
    }
    h5, .h5 {
        font-size: 1rem
    }
    h6, .h6 {
        font-size: 1rem
    }
}