.line1 {
    height: 8px;
    width: 25%;
    background-color: var(--accent1);
    border-radius: 5px;
    display: block;
}

.line2 {
    height: 8px;
    width: 35%;
    background-color: var(--accent1);
    border-radius: 5px;
    display: flex;
    justify-self: center;
    text-align: center;
    margin: 0px auto;
}

.line3 {
    height: 8px;
    width: 15%;
    background-color: var(--accent1);
    border-radius: 5px;
    display: flex;
    justify-self: center;
    text-align: center;
    margin: 0px auto;
}

.line4 {
    height: 8px;
    width: 15%;
    background-color: var(--primary1);
    border-radius: 5px;
    display: flex;
    justify-self: center;
    text-align: center;
    margin: 0px auto;
}

.line5 {
    height: 8px;
    width: 25%;
    background-color: var(--primary1);
    border-radius: 5px;
    display: block;
}

.line6 {
    height: 8px;
    width: 85%;
    background-color: var(--accent1);
    border-radius: 5px;
    display: flex;
    justify-self: center;
    text-align: center;
    margin: 0px auto;
}

.line7 {
    height: 8px;
    width: 35%;
    background-color: var(--primary1);
    border-radius: 5px;
    display: flex;
    justify-self: center;
    text-align: center;
    margin: 0px auto;
}

.icon1 {
    font-size: 12px;
    color: var(--primary1);
}

.icon2 {
    font-size: 24px;
}

.icon3 {
    font-size: 40px;
    display: flex;
    cursor: pointer;
}

.icon4 {
    font-size: 24px;
    font-weight: 600;
    display: flex;
    padding-right: 20px;
    margin-right: 20px;
    cursor: pointer;
    color: var(--primary1);
    border-right: #aaa solid 1px;
}

.icon5 {
    font-size: 16px;
    color: var(--primary1);
}

.icon6 {
    font-size: 36px;
    color: var(--green1);
}

.icon7 {
    font-size: 36px;
    color: var(--red1);
}

.badges .show {
    display: block;
}

.badges .hide {
    display: none;
}

.badges:hover .show {
    display: none;
}

.badges:hover .hide {
    display: block;
}

.badge1{
    width: 188px;
    height: 80px;
}

.badge2{
    width: 284px;
    height: 80px;
}

.badge3{
    width: 104px;
    height: 80px;
}

.badge4{
    width: 144px;
    height: 80px;
}

.badge5{
    width: 144px;
    height: 38px;
}

.badge6{
    width: 188px;
    height: 80px;
}


@media screen and (max-width: 1023px) {
    .badge1 {
        width: 144px;
        height: 80px;
    }

    .badge2 {
        width: 244px;
        height: 80px;
    }

    .badge3 {
        width: 84px;
        height: 80px;
    }

    .badge4{
        width: 112px;
        height: 80px;
    }

    .badge5{
        width: 122px;
        height: 38px;
    }
}

@media screen and (max-width: 767px) {

    .line1, .line2 {
        margin-top: 8px;
    }

    .badge1{
        width: 76px;
        height: 40px;
    }

    .badge2{
        width: 124px;
        height: 40px;
    }
    
    .badge3 {
        width: 44px;
        height: 40px;
    }
    
    .badge4 {
        width: 56px;
        height: 40px;
    }
    
    .badge5{
        width: 64px;
        height: 38px;
    }
}