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

    body,
    html {
        font-size: 10px;
    }
    #receipts::before{
        margin-top:-40px;
        border-top: 20px solid transparent;
    }

    footer::before{
        margin-top:-80px;
        border-top: 60px solid transparent;
    }

    #receipts>div{
        flex-direction: column;
    }

    .receipts_results.t3cols>div{
        width:100%;
    }
}
@media only screen and (min-device-width : 321px) and (max-device-width : 480px) {
    body,
    html {
        font-size: 11px;
    }
    header, footer{
        flex-direction: column;
    }

    nav{
        padding-top:30px;
        text-align: center;
    }
    #receipts::before{
        margin-top:-60px;
        border-top: 40px solid transparent;
    }

    footer::before{
        margin-top:-60px;
        border-top: 40px solid transparent;
    }

    #receipts>div{
        flex-direction: column;
    }

    .receipts_results.t3cols>div{
        width:100%;
    }
}

@media only screen and (min-device-width : 480px) and (max-device-width : 768px) {
    body,
    html {
        font-size: 12px;
    }
    header, footer{
        flex-direction: column;
    }
    nav{
        padding-top:30px;
    }
    #receipts::before{
        margin-top:-80px;
        border-top: 60px solid transparent;
    }

    footer::before{
        margin-top:-80px;
        border-top: 60px solid transparent;
    }

    #receipts>div{
        flex-direction: column;
    }

    .receipts_results.t3cols>div{
        width:100%;
    }
}

@media only screen and (min-device-width : 769px) and (max-device-width : 960px) {
    body,
    html {
        font-size: 12px;
    }
    #receipts::before{
        margin-top:-90px;
        border-top: 70px solid transparent;
    }
    footer::before{
        margin-top:-90px;
        border-top: 70px solid transparent;
    }
}

@media screen and (min-width : 1281px) and (max-width : 1440px) {
    #receipts::before{
        margin-top:-120px;
        border-top: 99px solid transparent;
    }
    footer::before{
        margin-top:-120px;
        border-top: 99px solid transparent;
    }
}

@media screen and (min-width : 1441px) and (max-width : 1920px)  {
    #receipts::before{
        margin-top:-130px;
        border-top: 109px solid transparent;
    }
    footer::before{
        margin-top:-130px;
        border-top: 109px solid transparent;
    }
}

@media screen and (min-width: 1921px)  {
    #receipts::before, footer::before{
        content: none;
    }
    #receipts{
        min-height: 200px;
        padding-top: 40px;
    }
}