@font-face {
    src: url(/assets/fonts/LoveYaLikeASister-Regular.ttf);
    font-family: "Love";
}
* {
    font-family: 'Poppins', sans-serif;
}
.top{
    background: url(/assets/images/bg-top.png) repeat-x center bottom;
    background-size:contain;
    min-height: 100px;
    border-bottom:1px solid #000;
    background-color: #cae0e6;
}
.top h6{
    transform: matrix(0.99, 0.12, -0.12, 0.99, 0, 0);
    text-align: left;
    letter-spacing: 0px;
    color: #013F4A;
    font-size: 30px;

    font-family: "Love";
}
.menu ul{
    margin: 0;
    padding: 0;
}
.menu ul li a{
    color: #013F4A !important;
}
.menu ul li{
    display: inline-block;
    text-decoration: none;
    border-radius: 0 10px 0px 0;
    padding: 3px 10px;
    font-size: 20px;
    margin: 0 -3px;
    border: 1px solid #fff;
    border-bottom:none;
    background: #CAE0E6;
    position: relative;
    font-family: "Love";
}
.menu ul .active{
    background: #4E9C97;
}
.link1{
    z-index: 30;
}
.link2{
    z-index: 2;
}
.link3{
    z-index: 1;
}
.bg-1 h1{
    font-size: clamp(33px, 6vw, 40px);
}
.bg-1{
    background: #E19862 0% 0% no-repeat padding-box;
    padding: 5px 20px;;
    transform: rotate(1deg);
    display: inline-block;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 25% 76%, 19% 100%, 13% 75%, 0% 75%);
    padding: 5px 5px 25px;
}
h1{
    font-family: "Love";
    font-size: clamp(33px, 6vw, 40px);
    margin: 0;
}
p{
    font-size: 16px;
    color: #000;
}
.bg-green h1{
    font-size: clamp(25px, 6vw, 30px);
    padding: 8px;
    color: #fff;
}
.bg-green{
    background: #82CA7A;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 25% 76%, 19% 100%, 13% 75%, 0% 75%);
    padding: 5px 5px 15px;
}
.bg-lightgreen h1{
    font-size: clamp(22px, 6vw, 24px);
}
.bg-lightgreen{
    background: #D9F0AF;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 25% 76%, 19% 100%, 13% 75%, 0% 75%);
    padding: 15px 5px 30px;
}
.bg-line{
    background: url(/assets/images/background-line.svg) no-repeat center left;
    background-size: 90% 95%;
}
.img{
    transform: translate(0, -80%);
}
.green-box{
    background: rgba(161, 213, 74, .8);
    min-height: 650px;
    transform: translate(0, -60px);
}
.input{
    background: rgba(217, 240, 175, 1);
    width: 100%;
    border: 0;
    padding: 8px;
}
h2{
    font-family: "Love";
    font-size: clamp(20px, 6vw, 25px);
    padding-top:10px;
}

h3{
    font-family: "Love";
    font-size: clamp(16px, 6vw, 25px);
    padding-top:10px;
}
.bg-footer{
    background: rgba(78, 156, 151, 1);
    background-size: cover;
    min-height: 100px;
}
h5{
    font-size: 24px;
    color: rgba(214, 237, 69, 1);
    display: inline-block;
}
footer h3{
    font-size: 13px;
    color: #fff;
    display: inline-block;
    padding: 0 8px;
}

@media (max-width: 500px){
    .menu ul li {
    font-size: 12px;
 
}
}

fieldset, form, legend, li, ol {
    margin: 0;
    padding: 0;
}

form#foodmilesTracker ol li {
    background: #b9cf6a;
    background: rgba(255, 255, 255, 0.3);
    border-color: #e3ebc3;
    border-color: rgba(255, 255, 255, 0.6);
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}

form#foodmilesTracker legend {
    color: #fff;
    font-weight: 700;
    padding-bottom: 10px;
}

form#foodmilesTracker input:not([type="radio"]) {
    background: #fff;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
    padding: 5px;
    width: 200px;
}



span.miles{
    font-weight:bold;
    color: #42b972;
    font-size:1.5em;
    }
    
    span.miles1{
    font-weight:bold;
    color: #d58551;
    font-size:1.5em;
    }


.smallestTag a{
    font-size:0.8em;
    margin:0 5px;
    
    color:#aaa;
    font-weight:bold;
    }
    
    .smallTag a{
    font-size:1.1em;
    margin:0 5px;
    color:#aaa;
    
    }
    
    .mediumTag a{
    font-size:1.4em;
    margin:0 5px;
    color:#999;
    
    }
    
    .largeTag a{
    font-size:1.8em;
    margin:0 5px;
    color:#666;
    }
    
    .largestTag a{
    font-size:2em;
    margin:0 5px;
    color:#005a00;
    font-weight:bold;
    }
    
    #miles-cloud {
    background:#fff;
    border:1px solid #ddd;
    padding:10px;
    }
    


    #EggForm fieldset ol {
        padding: 1em 1em 0 1em;
        list-style: none;
        }
        #EggForm fieldset li {
        padding-bottom: 1em;
        }
        #EggForm fieldset.submit {
        border-style: none;
        }
        #EggForm label {
        float: left;
        width: 15em;
        margin-right: 1em;
        font-weight:bold;
        color:#0b7e9f;
        }
        #EggForm legend {
        margin-left: 1em;
        padding: 0;
        color: #666;
        font-weight: bold;
        }
        #EggForm fieldset {
        float: left;
        clear: both;
        width: 100%;
        background-color: #c5e0ef;
        margin: 0 0 10px 0;
        padding-bottom: 0px;
        }
        #EggForm fieldset.submit {
        float: none;
        width: auto;
        border-style: none;
        background-color: #fff;
        text-transform:capitalize;
        font-size:medium;
        }
        
        #EggForm .submit {
          color: #fff;
          border: none;
          font-weight: bold;
        background:#00a2a4;
        padding:4px;
        }
        
        
        #eggresults {
        border:1px dotted #98E2F8;
        font-size:1.2em;
        color:#333;
        padding:10px;
        }
        
        #eggresults b {
        color:#000;
        }
        
        .styled-table {
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9em;
            font-family: sans-serif;
            min-width: 400px;
           
        }

        .styled-table thead tr {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
        }

        .styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}