:root {
    --highlight: #CCC2B3;
    --highlight_50pc: #CCC2B380;
    --highlight_10pc: #CCC2B310;

    --highlight_teams: #cce1f7;
    --highlight_exercises: #FFF1DD;
    --highlight_plus: #7bd7ac;
    --highlight_weekly: rgb(179, 179, 187);
    --highlight_error: rgba(255, 64, 64, 0.523);
    --highlight_success: rgb(131, 244, 154);
    
    
    
}

html { scroll-behavior: smooth; }


body { font-family: sans-serif; font-size: 20px; padding: 0; }

div {  box-sizing: border-box; }
h1 { font-size: 60px; font-family: "Poppins", sans-serif; margin-bottom: 15px; line-height: 60px; }
h2 { font-size: 35px; font-family: "Poppins", sans-serif; margin-bottom: 50px; line-height: 35px; }
.smallprint { font-size: 80%; line-height: 100%; }
.container { width: 100%; padding: 15px; padding-top: 50px; }
.nudgedown { padding-top: 100px; }
.inner { width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 50px; padding-left: 15px; padding-right: 15px; }
.outer { width: 100%; max-width: 1130px; margin: 0 auto; padding-bottom: 50px; padding-left: 0px; padding-right: 0px; }
.wider { width: 100%; max-width: 1300px; margin: 0 auto; padding-bottom: 50px; padding-left: 0px; padding-right: 0px; }

.hr { border-bottom: 4px solid black; padding-bottom: 15px; margin-bottom: 15px; }

h1 ~ .sub { max-width: 400px;font-weight: bold; }



.cols { display: grid; grid-template-columns: auto auto; }
.cols6040 { display: grid; grid-template-columns: 60% 40%; }
.col { max-width: 550px; }
.col .image { overflow-y: visible; height: 100px; position: relative ; z-index: 1; }
img { width: 100%; }
img.icon { width: 50px; }
img.large.icon { width: 100px; }
img.small.icon { width: 30px; }

@media only screen and (max-width: 800px) {
    .cols, .cols6040 { display: block; }
    .col { margin-bottom: 100px; }
}

input[type=email], input[type=text] { font-size: inherit; font-weight: inherit; font-family: monospace; padding: 15px; width: 100%; max-width: 400px; display: block; border: 4px solid black; margin-bottom: 15px; margin-top: 5px;  } 

/* buttons */
.buttonbox { text-align: left; border-top: 1px solid black; border-bottom: 1px solid black; max-width: 400px; margin-top: 15px; }
@media only screen and (max-width: 600px) {
    .buttonbox { max-width: none; }
}
.buttonbox.fullwidth { max-width: none; }
.buttonbox input[type=submit], .buttonbox button { width: 100%; font-size: inherit !important; text-align: left; border: 0; }
.buttonbox a, .buttonbox input[type=submit], .buttonbox button { 
    display: block; padding: 15px; text-decoration: none; font-family: Poppins; font-weight: 300; 
    border-bottom: 1px solid black; cursor: pointer; background:none; 
}
.buttonbox a:before { content:'⟩ ' }
.buttonbox a.leftarrow:before { content:'⟨ ' }
.buttonbox a.downarrow:before { content:'⤓ ' }
.buttonbox a.noprefix:before { content:'' }		
.buttonbox a:hover, .buttonbox input[type=submit]:hover, .buttonbox button:hover { padding-left: 30px; }
.buttonbox a.primary, .buttonbox input[type=submit].primary, .buttonbox button.primary { background: black; color: white;  }
.buttonbox a.warning, .buttonbox input[type=submit].warning, .buttonbox button.warning { background: var(--highlight_error); color: black;  }

.buttonbox a:last-child,.buttonbox input[type=submit], .buttonbox button { border: none; }

.linkbox a { display: block; }
a.button, input[type=submit].button { outline: none; border:none; cursor: pointer; display: inline-block; background: black; color: white; border-radius: 15px; padding: 15px; padding-right: 60px; font-size: 30px; font-weight: bold; text-decoration: none; }

.listbox { margin-bottom: 50px; }
.listbox > a, .listbox > div, .listbox > tr, .listbox > label { display: block; padding: 15px; padding-left: 0; text-decoration: none; font-family: inherit; border-bottom: 1px solid black; margin-bottom: 5px;   }
.listbox > a, .listbox > label {cursor: pointer;}
.listbox > a:hover {  }
.listbox .primary { background: black; color: white;  }
.listbox > a:last-child, .listbox div:last-child { border: none; }
.listbox h2 { margin-top: 15px; }
.listbox.tight > a, .listbox.tight > div { padding: 5px; padding-left: 15px; padding-right: 15px; }




a { color: black; }
.highlight { background: var(--highlight); }
.highlight.teams { background: var(--highlight_teams); }
.highlight.exercises { background:var(--highlight_exercises); }
.highlight.plus { background:var(--highlight_plus); }
.highlight.weekly { background:var(--highlight_weekly); }
.highlight.error { background:var(--highlight_error); }
.highlight.darken { background:var(--highlight_50pc); }
.highlight.success { background:var(--highlight_success); }


.ephemeral {
    animation:ephemeral 0.5s 1;
    -webkit-animation:ephemeral 0.5s 1;
    animation-fill-mode: forwards;

    animation-delay:5s;
    -webkit-animation-delay:4s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;
}
@keyframes ephemeral{
    from {opacity :1;}
    to {opacity :0;}
}

@-webkit-keyframes ephemeral{
    from {opacity :1;}
    to {opacity :0;}
}


strong.mom { font-family: "Poppins",sans-serif; font-weight: bold;}


@media only screen and (min-width: 900px) {
    .cards { display: grid; grid-template-columns: 33% 33% 33%; }
    .cards .card { margin-right: 15px; }
}

.cards { position: relative; z-index: 100;}
.card { display: block; border: 4px solid black; background: white; padding: 15px; padding-top: 30px; margin-bottom: 15px; border-radius: 15px; text-align: left; text-decoration: none;}
.card.borderless { border: 4px solid transparent; }
.outer .card, .outer.card { padding-left: 30px; }
.outer.cards .card, .outer .cards .card { padding-left: 15px; }

.cards .card { text-align: center; }
.card h2 { margin: 0; margin-bottom: 15px; }
.card .image { max-width: 100px; margin: 0 auto; margin-bottom: 30px; }
.disabled { opacity: 0.4;}
.lozenge { background: black; color: white; font-family: Poppins,sans-serif; font-weight: 300; display: inline-block; padding: 5px; border-radius: 10px; margin: 0;}

.betalabel { position: absolute; transform: rotate(-10deg); display: inline-block; font-size: 24px; 
                background-color:#7bd7ac87; color: black; border-radius:15px; margin-bottom: 5px; padding:15px; margin-top: -30px; margin-left: -60px;  }
.betalabel .image { position: absolute; width: 45px; margin-top: -40px; }