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

    body,
    html {
        font-size: 10px;
    }
    header, footer{
        flex-direction: column;
    }

    nav{
        padding-top:30px;
        text-align: center
    }

    #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%;
    }


    #popup{
        width:90%;
        height:90%
    }
    #popup::before{
        content:none;
    }
    #popup>div{
        width:100%;
    }

    #popup img{
        width:100px;
        height:100px;
    }

    .popupright .content {
        padding: 5px 10px;
    }
    #pricecontainer{
        right:20px;
        bottom:20px;
        width:40px;
        height:40px;
        font-size:8px;
    }
    #pricecontainer p:first-of-type{
        font-size: 1.4em;
        margin: 5px 0 0 0;
    }
    #popup .close{
        border: 5px solid white;
    }
}
@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%;
    }


    #popup{
        width:85%;
        height:85%
    }

    #popup::before{
        border-right: 0px solid transparent;
        border-top: 125px solid transparent;
        border-left: 280px solid #003cff;
    }

    #popup img{
        width:110px;
        height:110px;
    }
    #popup .popupright h4{
        font-size: 1.7em;
    }

    #popup .close{
        border: 5px solid white;
    }
}

@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%;
    }

    #popup{
        width:85%;
        height:40%
    }

    #popup::before{
        border-right: 0px solid transparent;
        border-top: 150px solid transparent;
        border-left: 400px solid #003cff;
    }

    #popup img{
        width:140px;
        height:140px;
    }
    #popup .close{
        border: 5px solid white;
    }
}

@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;
    }

    #popup{
        width:90%;
        height:60%
    }

    #popup img{
        width:110px;
        height:110px;
    }
}

@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;
    }
}