h1 {
    font-size:2.5em;
    letter-spacing:0.2em;
}
h2 {
    font-size:2.3em;
    color:var(--accent-color);
    font-weight:500;
    letter-spacing:0.1em;
    text-shadow: 2px 2px 5px #000000;
    margin-bottom: 12px;
}
h3 {
    font-size:2em;
    font-weight:400;
    letter-spacing:0.08em;     
}
h4 {    
    font-size: 1.7em;
    font-weight: 300;
    letter-spacing: 0.05em;
}
h5 {
    font-size: 1.4em;
    font-weight: 300;
    letter-spacing: 0.05em;
}
h6 {
    font-size: 1.2em;
    font-weight: 300;
    letter-spacing: 0.05em;
}
.kursiv {
    font-style: italic;
}
.indent {
    margin:0 15%;
}
.centered {
    text-align:center;
}
.right {
    text-align:right;
}
.accent {
    color:var(--accent-color);
}
.padding-top {
    padding-top:10vh;
}
p {
    margin-block-start: 0;  /*to remove the auto margin in Chrome */
    font-size:1.2em;
    font-weight: 300;
}
#header-bg-fullwidth {
    width:100vw;
    height:90px;
    background-color:var(--primary-background-color);
    position:fixed;
}
#page {
    max-width:1600px;
    margin:auto;
}
main {
    width: 100%;
    max-width: 1600px;
    position: relative;
    padding-top:50px;
}
header {
    width: 100%;
    max-width:1600px;
    height: 60px;
    position: fixed;
    top: 0;
    z-index: 100;
}
nav {
    background-color: #24292E;
    display: flex;
    justify-content: space-between;
    height: 60px;
    color: white;
    align-items: center;
    margin: 24px;
}
nav a {
    color: white;
    margin: 12px;
}
nav img {
    height: 60px;
}
nav.header {
    font-size: 1.8em;
}
nav #header {
    flex:1;
    text-align: center;
    font-size: 1.7em;
    background-color: none;
}
a.logo {
    flex:none;
    max-height:100%;
    flex-direction: column;
    align-items: start;
    /*color:white;*/
    position:relative;
}

a.logo h5 {
    margin-top:0;
    padding:10px auto;
    background-color:rgb(254, 254, 254, 0.3);
}
a.logo img {
    max-height:100%;
    width:auto;
}
.rightside a {
    justify-content:center;
}
.hidden {
    display: none;
}
.topbox {
    height:60px;
    display: flex;
    color: white;
    background-color: #24292E;
}
.topbox.leftside {
    width:65%;
    /*background-color:var(--primary-background-color);*/
}
.topbox.rightside {
    width:35%;

    /*background-color:var(--secondary-background-color);*/

}
#page.fullscreen .topbox.rightside {
    background-color:var(--primary-background-color);
    transition:all 1s ease-in-out;
}
#page.fullscreen .auth-form {
    left:100vw;
}

ab-login2 {
    position:relative;
}
ab-register {
    position:relative;
}
#content {
    position:relative;
    /*top:-20vh;*/
}
#welcome {
    width:100%;
    margin-top: 40px;
    /*height:70vh;*/
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    color:white;
}
h2 i {
    line-height: 2em;
    padding-left:50px;
    position:relative;
}
h2 i:before {
    content:"";
    width:40px;
    height:40px;
    left: 0;
    top: 0;
    position:absolute;
    background-image:url("./images/home/barbell.png");
    background-repeat:no-repeat;
    background-size:contain;
}
#why {
    position:relative;
    color:white;
    display:grid;
    grid-template-columns:50% 50%;
    padding-top:90vh;
    /*background:linear-gradient(to right, rgba(251,175,77,0) 65%, rgba(251,175,77,1) 65%,rgba(251,175,77,1) 82.5%,rgba(251,175,77,0) 82.5%);*/
}
.smallpic {
    width: 240px;
    margin: 0 auto 5% 5%;
    z-index:1;
    border: 3px solid var(--accent-color);
}
hr {
    border-color: var(--accent-color);
}
#try {
    color:white;
    position:relative;
    text-align:center;
}
#try>div>*:not(first-child) {
    position:relative;
}
#try .background {
    position:absolute;
    width:100%;
    height:100%;
    background: url(./images/home/handshake.png);
    background-size: auto 100%;
    background-position: 50%;
    opacity: 0.8;
}
#try .in-box {
    color:white;
    text-shadow: none;
    padding: 2% 0;
    box-sizing: border-box;
    width: 100%;
    border-color:var(--accent-color);
    background-color:var(--accent-color);
    background-color:var(--accent-color);
}
#try .text-box {
    width:100%;
    box-sizing:border-box;
    margin: 10vh auto;
    display:grid;
    grid-template-columns:48% 48%;
    justify-content: space-between;
}
#try .text-box>p:first-of-type {
    padding:5vh;
    grid-column-start: 1;
    grid-column-end: 3;
}
#try h3.accent {
    padding: 5vh 0;
    text-shadow: 2px 2px 2px #000000;
}
.kursiv a {
    color:var(--accent-color);
}
.text-box>div {
    padding:0 7%;
    background-color: rgb(0,0,0,0.3);
    text-align:left;
    margin-bottom:10%;
    border:1px solid var(--accent-color);
}
#try h5 {
    position:relative;
    padding-left:50px;
}
#try h5:before {
    content:"";
    width:40px;
    height:40px;
    left: 0;
    top: -5px;
    position:absolute;
    background-image:url("./images/home/barbell.png");
    background-repeat:no-repeat;
    background-size:contain;
}
.dialog {
    background-color: var(--accent-color);
}
/*  FOOTER   */

#footer {
    width:100%;
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    /*top:-25vh;*/
    color:white;
    }
.column {
    display:flex;
    flex-direction:column;
    padding-left:20%;
}
.column:not(:first-child) {
    border-left:1px solid;
}
#footer span,
#footer a {
    padding: 3px 20px;
    position: relative;
    text-decoration:none;
}
#footer a {
    padding: 3px 20px;
    position: relative;
    text-decoration:none;
    color:var(--accent-color);
}
#footer span:before,
#footer a:before {
    width: 15px;
    height: 17px;
    content: "";
    position: absolute;
    left: 0;
    background-image:url("./images/home/icon-sprite.png");
    background-repeat:no-repeat;
    background-position:0 5px;
    background-size:auto;
}
.call-us {
    text-align:center;	
}
.call-us p {
    display:inline-block;
    line-height:2rem;
    border:1px solid #f7a42e;
    padding:1rem 2rem;
}
#footer span.line.privacy-policy:before {
    background-position: -15px 0;
}
#footer span.line.site-notice:before {
    background-position: -30px 0;
}
#footer span.line.call:before {
    background-position: -49px 0;
}
#footer span.line.contact:before {
    background-position: -64px 0;
}
#footer a.line.email:before {
    background-position: -80px 0;
}
#footer span.line.company:before {
    background-position: -95px 0;
}
/*
#footer span.line.copyright:before {
    background-image:url("img/copyright.svg");
}
*/
#footer a.line.follow:before {
    background-position: -113px 0;
}

/* styles for privacy-policy and site-policy */
#privacy-policy {
    display:none;
}
.gridbox {
    display:grid;
    grid-template-columns:100%;
}
.footer-contenttext {
    position:relative;
    width: auto;
    height: 100%;
    padding: 9vw 3vw 3vw 3vw;
    overflow-y:auto;
    background-color:white;
}

.text-wrapper {
    position:relative;
    width:100%;
    height:80vh;
    padding:5vw 5vw;
    background-color: grey;
    /* background-image: url(img/bg-verwalten.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
}
.logodiv {
    z-index: 5;
    display: flex;
    width: 100%;
    justify-content: center;
}
.logodiv a {
    position: fixed;
    width: 20%;
    background-color: orange;
    top: 5vw;
    clip-path: circle(50% at 50% 0%);
}
.logodiv .logo {
    width: 100%;
    clip-path: circle(48% at 50% 0%);
}