table {
    width: 100%;
    border-collapse: collapse;
}
tr:nth-of-type(odd) {
    background: rgba(65, 164, 240,0.2);
}
.pricing tr:nth-of-type(odd) {
    background: unset;
}
th {
    background: #333;
    color: white;
    font-weight: 700;
    text-align: center !important;
}
td,
th {
    border: 0px solid #ccc;
    text-align: left;
}
.pricing{
    margin-bottom: 50px;
}
.pricing .fees img{
    max-height: 75px;
    width: auto;
}
.pricing .feature{
    width: 30%;
}
.pricing .feature.title{
    background-color: var(--quinary-color);
    color: #fff;
}
.pricing th.tier-1,
.pricing th.tier-2,
.pricing th.tier-3,
.pricing th.tier-4{
    width: calc(17.5% - 25px);
}
.pricing th{
    background-color: #fff;
    color: var(--quinary-color);
}
.pricing th span .plan{
    display: none;
}
.pricing .fees th.tier-1 span,
.pricing .fees th.tier-2 span,
.pricing .fees th.tier-3 span,
.pricing .fees th.tier-4 span {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 75px;
    border-radius: 25px;
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-bottom: 30px;
}
.pricing .fees th.tier-1 span{
    background: var(--tertiary-color);
    border: 2px solid var(--tertiary-color);
    color: #fff;
}
.pricing .fees{
    display: table-row;
    flex-wrap: wrap;
}
.pricing .fees th.tier-2 span{
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #fff;
}
.pricing .fees th.tier-3 span{
    background: var(--quarternary-color);
    border: 2px solid var(--quarternary-color);
    color: #fff;
}
.pricing .fees th.tier-4 span{
    background: var(--quinary-color);
    border: 2px solid var(--quinary-color);
    color: #fff;
}
.pricing tr td{
    text-align: center;
    padding: 0 7px !important;
}
.pricing tr td.feature{
    text-align: left;
}

.pricing .plans .tier-1 span,
.pricing .plans .tier-2 span,
.pricing .plans .tier-3 span,
.pricing .plans .tier-4 span{
    display: block;
    position: relative;
    width: 100%;
    border: 2px solid;
}
.pricing .plans .tier-1 span{
    border-color: var(--tertiary-color) !important;
}
.pricing .plans .tier-2 span{
    border-color: var(--primary-color) !important;
}
.pricing .plans .tier-3 span{
    border-color: var(--quarternary-color) !important;
}
.pricing .plans .tier-4 span{
    border-color: var(--quinary-color) !important;
}
.pricing tbody tr span{
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-right: 2px solid;
    border-left: 2px solid;
    min-height: 51px;
    text-align: center;
    padding: 0 5px;
}
.pricing tbody tr .feature span{
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    justify-content: start;
    font-weight: 700;
}
.pricing tr:last-child .tier-1 span,
.pricing tr:last-child .tier-2 span,
.pricing tr:last-child .tier-3 span,
.pricing tr:last-child .tier-4 span{
    border-bottom: 2px solid;
}
.pricing tbody tr .tier-1 span{
    border-color: var(--tertiary-color) !important;
}
.pricing tbody tr .tier-2 span{
    border-color: var(--primary-color) !important;
}
.pricing tbody tr .tier-3 span{
    border-color: var(--quarternary-color) !important;
}
.pricing tbody tr .tier-4 span{
    border-color: var(--quinary-color) !important;
}
@media only screen and (min-width: 1200px){
    
}
@media (min-width: 761px) {
    td {
        padding: 0 7px !important;
    }
    th {
        padding: 0 7px !important;
    }
}
@media only screen and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 1024px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }
    thead tr {
        position: block;
    }
    tr {
        border: 0px solid #ccc;
    }
    .stats td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
    }
    .stats td:before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
    .stats td:nth-of-type(1):before {
        content: "Keywords";
    }
    .stats td:nth-of-type(2):before {
        content: "Before";
    }
    .stats td:nth-of-type(3):before {
        content: "After";
    }
    .stats .sub-head th{display: none;}
    .board td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 30% !important;
        font-size: 15px !important;
    }
    .board td:before {
        position: absolute;
        left: 6px;
        width: 25%;
        padding-right: 10px;
        white-space: nowrap;
    }
    .board td:nth-of-type(1):before {
        content: "Position";
    }
    .board td:nth-of-type(2):before {
        content: "Name";
    }
    .board td:nth-of-type(3):before {
        content: "Email";
    }
}
@media only screen and (max-width: 991px), (min-device-width: 991px) and (max-device-width: 1024px) {
    table.pricing,
    .pricing thead,
    .pricing tbody,
    .pricing th,
    .pricing td,
    .pricing tr {
        display: block;
    }
    .pricing .fees{
        display: flex;
    }
    .pricing .fees th.tier-1, .pricing th.tier-2, .pricing th.tier-3, .pricing th.tier-4 {
        width: 50%;
    }
    .pricing .fees th span{
        flex-direction: column;
    }
    .pricing th span .plan {
        display: block;
    }
    .pricing .plans{
        display: none;
    }
    .pricing tr:nth-of-type(odd) {
        background: #f7f7f7;
    }
    .pricing td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 40% !important;
    }
    .pricing td:before {
        position: absolute;
        left: 6px;
        top: 7px;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        padding: 5px;
        border-radius: 10px;
    }
    .pricing .fees .feature{
        display: block;
        position: relative;
        width: 100%;
    }
    .pricing tr td.feature{
        text-align: center;
        background-color: var(--secondary-color);
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        width: 100%;
    }
    .pricing td:nth-of-type(1):before {
        content: "Feature";
    }
    .pricing td:nth-of-type(2):before {
        content: "Basic";
        background-color: var(--tertiary-color);
        color: #fff;
    }
    .pricing td:nth-of-type(3):before {
        content: "Business";
        background-color: var(--primary-color);
        color: #fff;
    }
    .pricing td:nth-of-type(4):before {
        content: "Corporate";
        background-color: var(--quarternary-color);
        color: #fff;
    }
    .pricing td:nth-of-type(5):before {
        content: "Enterprise";
        background-color: var(--quinary-color);
        color: #fff;
    }
    .pricing tbody tr span{
        margin-left: 37%;
        border: none;
    }
    .pricing tbody tr .feature::before{
        display: none;
    }
    .pricing tbody tr .feature span {
        margin-left: 0;
        justify-content: center;
    }
    .pricing tbody tr .tier-1.title,
    .pricing tbody tr .tier-2.title,
    .pricing tbody tr .tier-3.title,
    .pricing tbody tr .tier-4.title{
        display: none;
    }
}

@media only screen and (max-width: 599px){.pricing .fees th.tier-1 span, .pricing .fees th.tier-2 span, .pricing .fees th.tier-3 span, .pricing .fees th.tier-4 span {
    font-size: 1rem;
    line-height: 1rem;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        padding: 0;
        margin: 0;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
    }
}