:root {
    --mahnke-primary: #38748e;
    --clama-primary: #0076A8;
    --florett-primary: #222d7c;
    --intigena-primary: #2aa2ba;
    --los-primary: #50c4a1;
    --ovibell-primary: #81bc79;
    --mahnke-gray: #878787;

    --ff-main: "Lato", sans-serif;
    --ff-accent: "Syncopate", sans-serif;
    --display1: 700 80px/90px var(--ff-accent);
    --h1: 700 40px/48px var(--ff-accent);
    --h2: 300 40px/52px var(--ff-main);
    --h3: 700 32px/36px var(--ff-main);
    --h4: 700 24px/32px var(--ff-main);
    --paragraph: 500 18px/30px var(--ff-main);
    --button: 500 16px/30px var(--ff-main);
    --menu: 16px/21px var(--ff-main);
}

.text-justify {
	text-align: justify
}

h1, 
.h1{
  font: var(--h1);
  text-transform: uppercase;
}

h2, 
.h2{
  font: var(--h2);
}

h3, 
.h3{
  font: var(--h3);
}

h4, 
.h4{
  font: var(--h4);
}

.display-1{
    font: var(--display1);
}

.check-list{
    padding-left: .5rem;
}

@media (min-width: 500px){
    .two-cols{
        column-count: 2;
    }
}



.check-list::marker{
    content: "\f00c";
    font-family: "Font Awesome 6 Free Solid";
}

p, li{
  font: var(--paragraph);
  color: var(--mahnke-gray);
}

a:hover{
    text-decoration: underline;
    cursor: pointer;
}
a:has(.white){
    color: white;
}

strong{
    font-weight: 600;
}

ul{
    padding-left: 1rem;
}

.small-font {
    font-size: 0.9rem;
    line-height: 1;
}

html:has(#mahnke) ul li::marker{
    color: var(--mahnke-primary);
}
html:has(#clama) ul li::marker{
    color: var(--clama-primary);
}
html:has(#florett) ul li::marker{
    color: var(--florett-primary);
}
html:has(#intigena) ul li::marker{
    color: var(--intigena-primary);
}
html:has(#los) ul li::marker{
    color: var(--los-primary);
}
html:has(#ovibell) ul li::marker{
    color: var(--ovibell-primary);
}

ul li:has(.white)::marker{
    color: white !important;
}

.btn-filled {
    display: inline-block;
    text-decoration: none;
    font: var(--button);
    width: fit-content;
    padding: .75rem 2rem;
    border-radius: 16px;
    transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
    color: white;
    background-color: var(--mahnke-primary);
}

html:has(#mahnke) .btn-filled{
    background-color: var(--mahnke-primary);
    border: 2px solid var(--mahnke-primary);
}

html:has(#clama) .btn-filled{
    background-color: var(--clama-primary);
    border: 2px solid var(--clama-primary);
}

html:has(#florett) .btn-filled{
    background-color: var(--florett-primary);
    border: 2px solid var(--florett-primary);
}

html:has(#intigena) .btn-filled{
    background-color: var(--intigena-primary);
    border: 2px solid var(--intigena-primary);
}

html:has(#los) .btn-filled{
    background-color: var(--los-primary);
    border: 2px solid var(--los-primary);
}

html:has(#ovibell) .btn-filled{
    background-color: var(--ovibell-primary);
    border: 2px solid var(--ovibell-primary);
}


/* Filled Hover */


html:has(#mahnke) .btn-filled:hover {
    color: var(--mahnke-primary);
    background-color: transparent;

}

html:has(#clama) .btn-filled:hover {
    color: var(--clama-primary);
    background-color: transparent;


}

html:has(#florett) .btn-filled:hover {
    color: var(--florett-primary);
    background-color: transparent;
    

}

html:has(#intigena) .btn-filled:hover {
    color: var(--intigena-primary);
    background-color: transparent;

}

html:has(#los) .btn-filled:hover {
    color: var(--los-primary);
    background-color: transparent;

}

html:has(#ovibell) .btn-filled:hover {
    background-color: transparent;
    color: var(--ovibell-primary);

}

/**************************** Btn Outline  ************************/


.btn-outline {
    display: inline-block;
    text-decoration: none;
    font: var(--button);
    width: fit-content;
    padding: .75rem 2rem;
    border-radius: 16px;
    transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
    border: 2px solid var(--mahnke-primary);
    color: var(--mahnke-primary);
}

html:has(#mahnke) .btn-outline{
    border: 2px solid var(--mahnke-primary);
    color: var(--mahnke-primary);
}

html:has(#clama) .btn-outline{
    border: 2px solid var(--clama-primary);
    color: var(--clama-primary);
}

html:has(#florett) .btn-outline{
    border: 2px solid var(--florett-primary);
    color: var(--florett-primary);
}

html:has(#intigena) .btn-outline{
    border: 2px solid var(--intigena-primary);
    color: var(--intigena-primary);
}

html:has(#los) .btn-outline{
    border: 2px solid var(--los-primary);
    color: var(--los-primary);
}

html:has(#ovibell) .btn-outline{
    border: 2px solid var(--ovibell-primary);
    color: var(--ovibell-primary);
}


/* Outline Hover */


.btn-outline:hover {
    background-color: var(--mahnke-primary);
    color: white;
}

html:has(#mahnke) .btn-outline:hover {
    background-color: var(--mahnke-primary);
    color: white;
}

html:has(#clama) .btn-outline:hover {
    background-color: var(--clama-primary);
    color: white;
}

html:has(#florett) .btn-outline:hover {
    background-color: var(--florett-primary);
    color: white;
}

html:has(#intigena) .btn-outline:hover {
    background-color: var(--intigena-primary);
    color: white;
}

html:has(#los) .btn-outline:hover {
    background-color: var(--los-primary);
    color: white;
}

html:has(#ovibell) .btn-outline:hover {
    background-color: var(--ovibell-primary);
    color: white;
}

/************************************** Btn filled white */


.btn-white {
    display: inline-block;
    text-decoration: none;
    font: var(--button);
    width: fit-content;
    padding: .75rem 2rem;
    border-radius: 16px;
    transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
    color: var(--mahnke-gray);
    background-color: white;
    border: 2px solid white;
    border-radius: 16px;
}

.btn-white:hover {
    color: white;
    background-color: transparent;
    border: 2px solid white;
}

/************************************** Btn outline white */


.btn-white-outline {
    display: inline-block;
    text-decoration: none;
    font: var(--button);
    width: fit-content;
    padding: .75rem 2rem;
    border-radius: 16px;
    transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
    color: white;
    border: 2px solid white;
    border-radius: 16px;
}

.btn-white-outline:hover {
    color: var(--mahnke-gray);
    background-color: white;
    border: 2px solid white;
}


/************************************* Fonts  */

.white {
    color: white;
}

.gray {
    color: var(--mahnke-gray);
}

.primary{
    color: var(--mahnke-primary);
}

html:has(#mahnke) .primary{
    color: var(--mahnke-primary);
}

html:has(#clama) .primary{
    color: var(--clama-primary);
}

html:has(#florett) .primary{
    color: var(--florett-primary);
}

html:has(#intigena) .primary{
    color: var(--intigena-primary);
}

html:has(#los) .primary{
    color: var(--los-primary);
}

html:has(#ovibell) .primary{
    color: var(--ovibell-primary);
}