html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Wrapping element */

#wrapper {
    display: flex;
    flex-flow: column;
    min-height: 100%;
}

.header {
    flex: 0 1 auto;
}

/* Set some basic padding to keep content from hitting the edges */
.body-content {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
    padding: 2% 6%;
    overflow-y: auto;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.row {
    margin-left: 0;
    margin-right: 0;
}

#web-footer {
    flex: 0 1 55px;
    background: #414042;
    color: #f2f2f2;
}

    #web-footer #title-credit {
        padding: 0 0 20px 0;
        text-align: center;
        border-top: dotted 1px #f2f2f2;
    }

    #web-footer #organization-name {
        font-size: 1.142em;
        line-height: 1.125em;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    #web-footer #web-copyright {
        color: #DCDCDC;
        font-size: 0.714em;
        line-height: 1em;
    }

.container {
    width: 100%;
}

.code-input {
    margin: auto;
    padding: 4.5em 4em 4em 4em;
    background-color: #C0C0C0;
    border-radius: 5px;
    max-width: 400px;
}

    .code-input form input {
        color: black;
    }

form small {
    color: black;
    font-size: 0.8em;
}

@media (max-width: 480px) {
    .code-input {
        padding: 3.4em 2em 3em 2em;
    }

    form small {
        font-size: 0.539em;
    }
}

.photo {
    width: 100px;
    height: auto;
    border: solid 1px;
    margin: 10px auto;
}