/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}


/* Smartphones pixel 2 (landscape) ----------- */

@media only screen and (min-width: 321px) and (max-device-width: 731px) and (orientation: landscape) {
    .slideshow-button {
        padding: 5px 50px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 30px 30px;
        bottom: 785px;
        text-align: center;
    }
}


/* Smartphones pixel 2 xl(landscape) ----------- */

@media only screen and (min-width: 321px) and (max-device-width: 822px) and (orientation: landscape) {
    .slideshow-button {
        padding: 5px 50px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 30px 30px;
        bottom: 685px;
        text-align: center;
    }
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) and (orientation: portrait) {
    .slideshow-button {
        padding: 3px 10px;
        margin-right: 15px;
        font-size: 8px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 285px;
        text-align: center;
    }
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}


/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}


/**********
    iPad 3
    **********/

@media only screen and (min-device-width: 768px) and (max-device-width: 823px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 10px;
        bottom: 195px;
        text-align: left;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 823px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 8px 20px;
        margin-right: 15px;
        font-size: 15px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 10px 20px;
        bottom: 825px;
        text-align: center;
    }
}


/**********
    iPad pro
    **********/

@media only screen and (min-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 255px;
        text-align: left;
    }
}

@media only screen and (min-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 8px 20px;
        margin-right: 5px;
        font-size: 15px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 10px 10px;
        bottom: 270px;
        text-align: left;
    }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
    .slideshow-button {
        padding: 15px 80px;
        margin-right: 15px;
        font-size: 18px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 0px;
        bottom: 415px;
        text-align: left;
    }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
    .slideshow-button {
        padding: 15px 100px;
        margin-right: 15px;
        font-size: 18px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 0px;
        bottom: 460px;
        text-align: left;
    }
}


/* moto g4 ----------- */

@media only screen and (min-device-width: 411px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}

@media only screen and (min-device-width: 411px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}


/* iPhone 4 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 410px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 410px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 365px;
        text-align: center;
    }
}


/* iPhone 5 ----------- */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 595px;
        text-align: center;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 11px;
        margin-right: 15px;
        font-size: 10px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 10px 30px;
        bottom: 335px;
        text-align: center;
    }
}


/* iPhone 6, 7, 8 ----------- */

@media only screen and (min-device-width: 569px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 50px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 725px;
        text-align: center;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 390px;
        text-align: center;
    }
}


/* iPhone 6+, 7+, 8+ ----------- */

@media only screen and (min-device-width: 668px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 10px 50px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 595px;
        text-align: center;
    }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    .slideshow-button {
        padding: 5px 20px;
        margin-right: 15px;
        font-size: 12px;
        margin: 1px;
    }
    .slideshow-button-area {
        font-size: 15px;
        padding: 20px 30px;
        bottom: 425px;
        text-align: center;
    }
}