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

    section {
        width: 88%;
    }

    .contact {
        font-size: 1.8em;
        padding: 32px;
    }

    .spacer {
        margin: 32px auto;
        padding: 32px;
    }

}

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

    header {
        font-size: 1.0em;
    }

    #the-canvas {
        width: 300px;
    }

}

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

    h2 {
        height: 72px;
    }

    .img {
        display: block;
        float: none;
        width: 32%;
        margin: 32px auto;
    }

    .contact {
        font-size: 1.5em;
        padding: 24px;
    }

    .spacer {
        margin: 24px;
        padding: 24px;
    }

    .display-case {
        display: block;
        float: none;
        text-align: center;
        margin: 0px auto;
    }

    #the-canvas {
        width: 256px;
    }

    .canvas-ka {
        margin: 40px auto;
    }

    .prev, .next {
        padding: 8px;
    }

    .text {
        max-height: 32%;
        font-size: 0.8em;
    }

}

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

    .flex-container {
        display: block;
        text-align: center;
    }

    section {
        width: 96%;
    }

    h2 {
        height: 80px;
    }

    .img {
        width: 48%;
    }

    .img-project {
        margin: 32px auto;
    }

    a.label {
        font-size: 1.2em;
    }

    .contact {
        font-size: 1.0em;
    }

    #the-canvas {
        width: 200px;
    }

    .canvas-ka {
        margin: 40px auto;
    }

    .text {
        max-height: 32%;
    }

    .prev, .next {
        top: 32%;
        padding: 6px;
    }

}

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

    h2 {
        height: 96px;
        padding-bottom: 16px;
    }

    img.effect {
        width: 96%;
        margin: 16px auto;
    }

    a.label {
        font-size: 1.0em;
    }

    .contact {
        font-size: 0.9em;
        padding: 16px;
    }

    .spacer {
        margin: 16px auto;
        padding: 16px;
    }

    .text {
        bottom: -16px;
        max-height: 32%;
        font-size: 0.6em
    }

    .prev, .next {
        font-size: 0.6em;
        padding: 6px;
    }

    .dot {
        height: 8px;
        width: 8px;
    }

}