@font-face {
    font-family: 'Aileron';
    src: local('Aileron SemiBold'), local('Aileron-SemiBold'), url('./fonts/Aileronsemibold.woff2') format('woff2'), url('./fonts/Aileronsemibold.woff') format('woff'), url('./fonts/Aileronsemibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Italic'), local('Aileron-Italic'), url('./fonts/Aileronitalic.woff2') format('woff2'), url('./fonts/Aileronitalic.woff') format('woff'), url('./fonts/Aileronitalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron UltraLight'), local('Aileron-UltraLight'), url('./fonts/Aileronultralight.woff2') format('woff2'), url('./fonts/Aileronultralight.woff') format('woff'), url('./fonts/Aileronultralight.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Thin Italic'), local('Aileron-ThinItalic'), url('./fonts/Aileronthinitalic.woff2') format('woff2'), url('./fonts/Aileronthinitalic.woff') format('woff'), url('./fonts/Aileronthinitalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Thin'), local('Aileron-Thin'), url('./fonts/Aileronthin.woff2') format('woff2'), url('./fonts/Aileronthin.woff') format('woff'), url('./fonts/Aileronthin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Light'), local('Aileron-Light'), url('./fonts/Aileronlight.woff2') format('woff2'), url('./fonts/Aileronlight.woff') format('woff'), url('./fonts/Aileronlight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron'), local('Aileron-Regular'), url('./fonts/Aileron.woff2') format('woff2'), url('./fonts/Aileron.woff') format('woff'), url('./fonts/Aileron.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Black'), local('Aileron-Black'), url('./fonts/Aileronblack.woff2') format('woff2'), url('./fonts/Aileronblack.woff') format('woff'), url('./fonts/Aileronblack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron SemiBold Italic'), local('Aileron-SemiBoldItalic'), url('./fonts/Aileronsemibolditalic.woff2') format('woff2'), url('./fonts/Aileronsemibolditalic.woff') format('woff'), url('./fonts/Aileronsemibolditalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Bold Italic'), local('Aileron-BoldItalic'), url('./fonts/Aileronbolditalic.woff2') format('woff2'), url('./fonts/Aileronbolditalic.woff') format('woff'), url('./fonts/Aileronbolditalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron UltraLight Italic'), local('Aileron-UltraLightItalic'), url('./fonts/Aileronultralightitalic.woff2') format('woff2'), url('./fonts/Aileronultralightitalic.woff') format('woff'), url('./fonts/Aileronultralightitalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Bold'), local('Aileron-Bold'), url('./fonts/Aileronbold.woff2') format('woff2'), url('./fonts/Aileronbold.woff') format('woff'), url('./fonts/Aileronbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Black Italic'), local('Aileron-BlackItalic'), url('./fonts/Aileronblackitalic.woff2') format('woff2'), url('./fonts/Aileronblackitalic.woff') format('woff'), url('./fonts/Aileronblackitalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Heavy'), local('Aileron-Heavy'), url('./fonts/Aileronheavy.woff2') format('woff2'), url('./fonts/Aileronheavy.woff') format('woff'), url('./fonts/Aileronheavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Light Italic'), local('Aileron-LightItalic'), url('./fonts/Aileronlightitalic.woff2') format('woff2'), url('./fonts/Aileronlightitalic.woff') format('woff'), url('./fonts/Aileronlightitalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Aileron';
    src: local('Aileron Heavy Italic'), local('Aileron-HeavyItalic'), url('./fonts/Aileronheavyitalic.woff2') format('woff2'), url('./fonts/Aileronheavyitalic.woff') format('woff'), url('./fonts/Aileronheavyitalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}





body {
    background-color: white;
    font-family: 'Aileron';
}
button.btn.btn-link {
    color: white;
    font-weight: 900;
}
#exItem1Header{
    background-color: #1b3f11;
}
#exItem1 .card-body {
    background-color: #1b3f11; 
    color: white;
}

#exItem2Header{
    background-color: #386e23;
}
#exItem2 .card-body {
    background-color: #386e23;
    color: white; 
}

#exItem3Header{
    background-color: #579937;
}
#exItem3 .card-body {
    background-color: #82c64f;
    color: white; 
}

#exItem4Header{
    background-color: #82c64f;
}
#exItem4 .card-body {
    background-color: #82c64f;
    color: white; 
}

.card-body {
    text-align: start;
    text-transform: uppercase;
    padding-left: 45px;
    padding-top: 0px;
    margin-top: -12px;
}
h5.mb-0 {
    text-align: start;
}


.rating {
    background-color: #82c64f;
    color: white;
    border-top: 2px solid gray;
    padding-top: 25px;
}
.rate {
    /* float: left; */

    width: 170px;
    height: 46px;
    padding: 0 10px;
    margin: 0 auto;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.link {
    padding: 5px 0px;
    font-size: 14px;
    font-weight: 300;
}
.link:hover {
    text-decoration: underline;
    cursor: pointer;
}

button.btn.btn-link {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

/* .col-sm-11 {
    border-bottom: 1px solid white;
} */

a.navbar-brand {
    padding: 0px 20px;
}
a.navbar-brand.active {
    background-color: green;

}

.selected-element {
    color: white;
    padding: 5px 0px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 300;
    padding-left: 25px;
}


.tool-text {
    color: black;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1px;
}

.tool-header {
    color: black !important;
}