body {
    font-family: 'Apercu Pro';
    position: relative;
    margin: 0;
    min-height: 100%;
    line-height: 1;
    padding-top: 100px;
    /* use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ededec+100&1+0,0+100 */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,236,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,236,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(237,237,236,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ededec',GradientType=0 ); /* IE6-9 */
    /*height: 100vh;*/
    padding-bottom: 60px;
}

    body.home {
        padding-top: 80px;
    }

html {
    box-sizing: border-box;
}

.btn {
    border-radius: 0;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

@font-face {
    font-family: 'Apercu Pro';
    src: url('../font/apercu_regular/ApercuPro-Regular.eot');
    src: url('../font/apercu_regular/ApercuPro-Regular.eot?#iefix') format('embedded-opentype'), url('../font/apercu_regular/ApercuPro-Regular.woff2') format('woff2'), url('../font/apercu_regular/ApercuPro-Regular.woff') format('woff'), url('../font/apercu_regular/ApercuPro-Regular.ttf') format('truetype'), url('../font/apercu_regular/ApercuPro-Regular.svg#ApercuPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Founders Grotesk X-Condensed';
    src: url('../font/FoundersGrotesk/FoundersGroteskXCondWeb-Semibold.eot');
    src: url('../font/FoundersGrotesk/FoundersGroteskXCondWeb-Semibold.eot?#iefix') format('embedded-opentype'), url('../font/FoundersGrotesk/FoundersGroteskXCondWeb-Semibold.woff2') format('woff2'), url('../font/FoundersGrotesk/FoundersGroteskXCondWeb-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'CachetStdBook';
    src: url('../font/CachetStd/CachetStdBook.eot');
    src: url('../font/CachetStd/CachetStdBook.eot') format('embedded-opentype'), url('../font/CachetStd/CachetStdBook.woff2') format('woff2'), url('../font/CachetStd/CachetStdBook.woff') format('woff'), url('../font/CachetStd/CachetStdBook.ttf') format('truetype'), url('../font/CachetStd/CachetStdBook.svg#CachetStdBook') format('svg');
}

@font-face {
    font-family: 'CachetStdMedium';
    src: url('../font/CachetStd/CachetStdMedium.eot');
    src: url('../font/CachetStd/CachetStdMedium.eot') format('embedded-opentype'), url('../font/CachetStd/CachetStdMedium.woff2') format('woff2'), url('../font/CachetStd/CachetStdMedium.woff') format('woff'), url('../font/CachetStd/CachetStdMedium.ttf') format('truetype'), url('../font/CachetStd/CachetStdMedium.svg#CachetStdMedium') format('svg');
}

@font-face {
    font-family: 'CachetStdBold';
    src: url('../font/CachetStd/CachetStdBold.eot');
    src: url('../font/CachetStd/CachetStdBold.eot') format('embedded-opentype'), url('../font/CachetStd/CachetStdBold.woff2') format('woff2'), url('../font/CachetStd/CachetStdBold.woff') format('woff'), url('../font/CachetStd/CachetStdBold.ttf') format('truetype'), url('../font/CachetStd/CachetStdBold.svg#CachetStdBold') format('svg');
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

a, a:hover, a:active, a:visited, a:focus {
    color: #e43312;
    border: none;
    outline: none;
}

ul {
    list-style: none;
}

li.disc {
    list-style-type: disc;
}

h1 {
    font-family: 'Founders Grotesk X-Condensed';
    font-size: 50px;
    text-transform: uppercase;
    color: #e43312;
}

.hidden {
    display: none !important;
}

.float-left {
    float: left;
}

.auto-height {
    height: auto !important;
}

.navbar-default {
    border: none;
}

.no-padding {
    padding: 0;
}

.button {
    height: 31px;
    width: 31px;
    border: none;
}

    .button:active {
        outline: none;
    }

.nav-button {
    background: url('../icons/hamburger.gif') no-repeat;
    margin-top: 10px;
    display: none;
    float: right;
}

    .nav-button.open {
        background: url('../icons/close.gif') no-repeat;
    }

.back-button {
    background: url('../icons/back.gif') no-repeat;
    display: none;
    margin-right: 15px;
}

.forward-button {
    background: url('../icons/forward.gif') no-repeat;
    display: none;
    margin-bottom: 15px;
}

.download-button {
    background: url('../icons/download.gif') no-repeat;
}

.pointer {
    cursor: pointer;
}

.no-overflow {
    overflow: hidden;
}

#nav-top {
    height: 80px;
    padding-top: 1em;
    /* width: 100%; */
    /* position: fixed; */
    /* top: 0; */
    /* z-index: 10; */
    background-color: #fff;
}

.logo {
    font-family: 'Founders Grotesk X-Condensed';
    font-size: 50px;
    font-weight: bold;
    color: #e43312;
    text-transform: uppercase;
    text-decoration: none;
    margin-left: 25px;
}

#navigation {
    float: right;
}

    #navigation.open {
        display: block;
    }

    #navigation li {
        float: left;
    }

        #navigation li a {
            color: #e43312;
            display: block;
            padding: 15px;
            margin-right: 5px;
            text-decoration: none;
            opacity: .8;
        }

            #navigation li a:hover {
                opacity: 1;
            }

#footer {
    padding: .75rem 0;
    height: 60px;
    /* width: 100%; */
    /* position: fixed; */
    bottom: 0;
    background-color: white;
}

    #footer .logo-left {
        margin-top: 5px;
    }

    #footer .logo-right {
        margin-top: 6px;
        /*margin-right: 25px;*/
        width: 100%;
        max-width: 181px;
    }

#outer.home {
    height: calc(100vh - 140px);
    background-size: cover !important;
    background-position: 50% 50% !important;
    min-height: 295px;
}

#header-wrapper {
    color: white;
    /*position: absolute;*/
    /*top: 160px;*/
    /*min-width: 980px;
    width: 100%;
    max-width: none;*/
}

    #header-wrapper #header {
        /*max-width: 600px;*/
        text-align: center;
    }

        #header-wrapper #header .header1 {
            font-family: 'Founders Grotesk X-Condensed';
            font-size: 60px;
            font-weight: bold;
            display: block;
            text-shadow: 0px 0px 90px rgba(0, 0, 0, 1);
            text-transform: uppercase;
        }

        #header-wrapper #header .header2 {
            font-size: 25px;
            display: block;
            text-shadow: 0px 0px 90px rgba(0, 0, 0, 1);
        }

#home-content {
    /*margin-top: 80px;*/
    height:100%;
    display: flex;
    flex-direction: column;
}

.pane.search {
    position: fixed;
    width: 100%;
    left: 0;
}


#search-wrapper #search-box {
    width: 575px;
    margin: 0 auto;
}

    #search-wrapper #search-box .search {
        background-color: white;
        padding: 0 15px;
        height: 45px;
        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
        width: 400px;
        float: left;
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    }

#home-search #search-wrapper #search-cta {
    font-family: 'Founders Grotesk X-Condensed';
    font-size: 55px;
    color: white;
    text-align: center;
    font-weight: bold;
    cursor: default;
    transition: font-size 300ms cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 5px;
    text-transform: uppercase;
}

#search-wrapper {
    width: 100%;
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
}

    #search-wrapper.inline {
        width: 525px;
        white-space: nowrap;
        float: left;
    }

        #search-wrapper.inline #search-box {
            margin: 0;
            width: 100%;
        }

    #search-wrapper .search {
        padding-left: 4px;
        border: none;
        padding: 0px;
        height: auto;
        width: 100%;
        background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
        outline: none;
        font-size: 20px;
        line-height: 34px;
        height: 34px;
    }

    #search-wrapper.inline #search-box .search {
        width: 452px;
    }

    #search-wrapper .submit-search, #search-wrapper .all-results {
        height: 45px;
        background: #e43312;
        overflow: hidden;
        cursor: pointer;
        float: left;
        color: #fff;
        transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    }

    #search-wrapper .all-results {
        margin-left: 10px;
        color: #e43312;
        background-color: #fff;
        border: 1px solid #e43312;
    }

    #search-wrapper .submit-search:hover {
        color: #e43312;
        background-color: #fff;
        border: 1px solid #e43312;
    }

    #search-wrapper .all-results:hover {
        background-color: #e43312;
        color: #fff;
        border: 1px solid #e43312;
    }


#search-panel {
    /*width: 350px;*/
    border-right: 2px solid #9d9d9c;
    height: 670px;
    padding: 15px;
    position: fixed;
    transition: left 400ms cubic-bezier(0.4, 0, 0.2, 1);
    /*left: -350px;*/
    /*padding: 50px 10px 0 30px;*/
}

    #search-panel.open {
        left: 0;
    }

    #search-panel .result-box {
        margin-bottom: 25px;
        float: left;
        clear: both;
    }

        #search-panel .result-box .result-header {
            margin-bottom: 0;
        }

        #search-panel .result-box .result-media ul {
            list-style-type: disc;
            float: left;
            padding-left: 15px;
            margin-bottom: 0;
        }

            #search-panel .result-box .result-media ul li {
                float: left;
                margin-bottom: 15px;
                cursor: pointer;
            }

                #search-panel .result-box .result-media ul li:last-child {
                    margin-bottom: 0;
                }

                #search-panel .result-box .result-media ul li:hover {
                    font-weight: bold;
                }

        #search-panel .result-box img {
            width: 87px;
            height: 60px;
        }

#search-results {
    /*width: 100%;
    float: left;*/
    margin-top: 20px;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: margin 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

    #search-results.small {
        width: calc(100% - 350px);
        margin-left: 350px;
        float: left;
    }

        #search-results.small .result-box {
            opacity: 0;
        }

    #search-results .result-box {
        float: left;
        /* width: 660px; */
        min-height: 220px;
        /*padding: 40px;*/
        transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

        #search-results .result-box .result-media ul {
            list-style-type: disc;
            padding-left: 0;
        }

.result-header {
    font-family: 'Founders Grotesk X-Condensed';
    font-size: 40px;
    width: 100%;
    float: left;
    text-transform: uppercase;
    color: #e43312;
    margin-bottom: 10px;
}

    .result-header.all {
        margin-top: 11px;
        padding: 0 5px;
    }
/*#search-panel .result-box .result-header {
    padding: 0;
}*/
#search-results .result-box .result-content {
    float: left;
    width: 100%;
}

    #search-results .result-box .result-content .result-more {
        float: left;
        margin-top: 10px;
        margin-right: 10px;
        clear: both;
    }

        #search-results .result-box .result-content .result-more a {
            text-decoration: none;
            color: #e43312;
            opacity: .8;
        }

            #search-results .result-box .result-content .result-more a:hover {
                opacity: 1;
            }

    #search-results .result-box .result-content .result-media span.media {
        width: 147px;
        height: 109px;
        display: inline;
        margin-right: 10px;
        margin-top: 10px;
        float: left;
    }

        #search-results .result-box .result-content .result-media span.media img {
            width: 147px;
            height: 109px;
        }

    #search-results .result-box .result-content .result-media span.highlight img, #all-result-panel .image-outer .highlight img {
        border: #e43312 7px solid;
    }

    #search-results .result-box .result-content .result-media.textfile ul {
        list-style: disc;
        padding-left: 15px;
    }

        #search-results .result-box .result-content .result-media.textfile ul li {
            cursor: pointer;
            margin-bottom: 10px;
            overflow: visible;
        }

            #search-results .result-box .result-content .result-media.textfile ul li:hover {
                font-weight: bold;
            }

            #search-results .result-box .result-content .result-media.textfile ul li span {
                width: 90%;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
            }

#all-results {
    display: block;
    /* padding: 40px 60px; */
    /* margin-left: 350px; */
    min-height: calc(100vh - 60px);
    height: 100%;
    /* float: left; */
}

    #all-results.hidden {
        display: none;
    }

    #all-results #all-result-panel {
        float: left;
        margin-bottom: 100px;
        padding: 0 15px;
    }

        #all-results #all-result-panel ul {
            padding: 0;
        }

            #all-results #all-result-panel ul li {
                float: left;
                margin: 5px;
            }

                #all-results #all-result-panel ul li.disc {
                    margin: 0;
                }

/*#all-results #all-result-panel li {
            float: left;
            margin: 5px;
        }*/

#all-result-panel .image-outer {
    position: relative;
    height: 195px;
}

    #all-result-panel .image-outer .title {
        width: 255px;
        min-height: 16px;
        line-height: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 5px;
    }

    #all-result-panel .image-outer .image-info {
        position: absolute;
        width: 255px;
        height: 30px;
        bottom: 25px;
        /*opacity: .4;*/
        transition: bottom .25s;
        visibility: hidden;
        padding-left: 8px;
        cursor: pointer;
    }

    #all-result-panel .image-outer.hover .image-info {
        visibility: visible;
        bottom: 30px;
    }

        #all-result-panel .image-outer.hover .image-info span {
            float: left;
        }

    #all-result-panel .image-outer .image-info a {
        color: #e43312;
        margin-right: 10px;
        float: left;
    }

    #all-result-panel .image-outer.hover .imgage-info-bg {
        visibility: visible;
    }

/*http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/*/
#all-result-panel .text-outer .text {
    /*width: 400px;*/
    /*overflow: hidden;
    position: relative;
    line-height: 1.2em;
    max-height: 4.8em;
    text-align: justify;
    margin-right: 1em;
    padding-right: 1em;*/
}

    /*#all-result-panel .text-outer .text:before {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
    }

    #all-result-panel .text-outer .text:after {
        content: '';
        position: absolute;
        right: 0;
        width: 1em;
        height: 1em;
        margin-top: 0.2em;
        background: white;
    }*/

    #all-result-panel .text-outer .text a {
        color: black;
        text-decoration: none;
    }



    #all-result-panel .text-outer .text .text-header {
        font-weight: bold;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* overflow: hidden; */
        margin-bottom: 5px;
    }

    #all-result-panel .text-outer .text .text-snippet {
        color: #9d9d9c;
        line-height: 1.5;
        display: block;
        width: calc(100% - 50px);
    }

    #all-result-panel .text-outer .text .text-download {
        position: absolute;
        right: 31px;
        top: 0;
        display: none;
    }

#all-result-panel .file {
    /*margin-bottom: 15px !important;*/
}

    #all-result-panel .file .file-download {
        position: absolute;
        bottom: 8px;
        z-index: 9;
        left: 25px;
    }

#all-result-panel .text-outer:hover > .text .text-download {
    display: block;
}

.imgage-info-bg {
    height: 60px;
    background-color: transparent;
    padding: 0;
    bottom: 25px;
    left: 0;
    right: 0;
    display: block;
    position: absolute;
    visibility: hidden;
    cursor: pointer;
}

    .imgage-info-bg > * {
        background: linear-gradient(transparent,rgba(17,17,17,.6));
        height: 100%;
        padding: 0;
        bottom: 0;
        transition: margin-top .25s;
        display: block;
    }

#outertext {
    /*float: left;
    height: calc(100vh - 160px);*/
    width: 100%;
    /*margin-top: 100px;*/
    margin-bottom: 60px;
}


.flex-grow-1 {
    flex-grow: 1;
}

#conditions {
    text-align: center;
    margin-bottom: 8rem;
}

    #conditions a {
        font-family: 'Founders Grotesk X-Condensed';
        font-size: 30px;
        display: block;
        text-shadow: 0px 0px 90px rgb(0 0 0);
        color: white;
    }

#mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9998;
    background-color: black;
    opacity: .3;
    cursor: pointer;
}

#media-details {
    position: fixed;
    background-color: white;
    z-index: 9999;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    top: calc(50% - 350px);
    left: calc(50% - 575px);
    height: 670px;
    width: 1150px;
    padding: 20px;
}

    #media-details .header {
        color: #000;
        font-size: 25px;
        float: left;
        margin: 0;
    }

    #media-details .close-popup {
        font-size: 14px;
        float: right;
    }

    #media-details .media-preview {
        float: left;
        clear: both;
        width: 810px;
        height: 545px;
    }

        #media-details .media-preview img {
            width: 810px;
            height: 545px;
        }

        #media-details .media-preview.loading {
            background: url(/assets/image/loader.gif) no-repeat 50% 50%;
        }

        #media-details .media-preview p {
            margin-bottom: 15px;
            line-height: 1.4em;
        }

    #media-details .media-download {
        display: none;
        font-size: 18px;
        float: left;
        margin-top: 20px;
        clear: both;
    }

        #media-details .media-download > a {
            color: #e43312;
            text-decoration: none;
        }


    #media-details .media-info {
        float: right;
        width: 270px;
        margin: 10px 0;
        color: #e43312;
    }

        #media-details .media-info .head {
            color: black;
            display: block;
            margin-bottom: 5px;
        }

        #media-details .media-info.highlight {
            background-color: #e43312;
            color: white;
            padding: 5px;
        }

            #media-details .media-info.highlight p {
                margin-bottom: 10px;
            }

                #media-details .media-info.highlight p:last-child {
                    margin-bottom: 0;
                }

            #media-details .media-info.highlight a {
                color: white;
            }

        #media-details .media-info.description {
            color: black;
        }

        #media-details .media-info.tags a,
        #media-details .media-info.vimeo-url a {
            color: #e43312;
            text-decoration: none;
        }

#all-result-panel .image img {
    width: 255px;
    height: 170px;
    display: block;
}

    #all-result-panel .image img.loading {
        background: url(/assets/image/loader.gif) no-repeat center;
        border: 1px solid #ddd;
    }

#vimeo-frame {
    width: 810px;
    height: 545px;
}

#tags .tag-wrapper {
    float: left;
    margin-left: 15px;
    min-width: 150px;
}

.tag-wrapper > div {
    padding-left: 20px;
}

    .tag-wrapper > div > div {
        margin-top: 10px;
        margin-bottom: 10px;
    }

.tag-wrapper .datetext {
   min-width: 200px;
}

#tags ul {
    padding-left: 20px;
}

#tags .btn-show-tags {
    margin-top: -10px;
    color: #e43312;
}

.play-button {
    display: inline-block;
    text-align: center;
    background-color: #202020;
    border-radius: 50%;
    padding: 18px;
    font-size: 0;
    color: #fff;
    position: absolute;
    left: calc(50% - 27px);
    top: calc(50% - 34px);
}

    .play-button i {
        font-size: 18px;
        display: inline-block;
    }
/*----RESPONSIVE----*/
@media only screen and (max-width: 1199px) {
    body {
        height: auto;
    }

    #media-details {
        height: 476px;
        width: 817px;
        top: calc(50% - 238px);
        left: calc(50% - 408px);
    }

        #media-details .media-preview, #media-details .media-preview img {
            width: 576px;
            height: 387px;
        }

        #media-details .media-info {
            width: 190px;
            margin: 2px 0;
        }

        #media-details .media-download {
            font-size: 14px;
            margin-top: 2px;
        }

    #vimeo-frame {
        width: 576px;
        height: 387px;
    }

    .back-button {
        display: inline-block;
    }

    .forward-button {
        display: block;
    }
}

/*Everything from this width is considerd as "mobile"*/
@media only screen and (max-width: 992px) {
    body {
        padding-bottom: 0px;
    }

    #search-wrapper #search-box .search {
        width: 335px !important;
    }

    .logo {
        margin-left: 5px;
    }

    #search-results .result-box {
        min-height: inherit;
    }

    .nav-button {
        display: block;
    }

    #navigation {
        position: absolute;
        background-color: white;
        right: -100%;
        padding: 5px 10px;
        top: 80px;
        width: 100%;
        border-top: 1px solid darkgray;
        transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

        #navigation.open {
            right: 0;
        }

        #navigation li {
            width: 100%;
            text-align: left;
        }

            #navigation li a {
                font-size: 45px;
                font-family: 'Founders Grotesk X-Condensed';
                text-transform: uppercase;
                opacity: 1;
                padding: 10px;
            }

    #footer {
        position: inherit;
    }

    #all-result-panel ul {
        padding: 0;
    }

    #all-result-panel .text-outer .text .text-download {
        display: block;
    }

    #all-result-panel .image-outer .image-info {
        visibility: visible;
        bottom: 35px;
    }
}

@media only screen and (max-width: 830px) {
    #media-details {
        height: calc(100vh - 20px);
        width: calc(100vw - 20px);
        top: 10px;
        left: 10px;
        overflow-y: auto;
    }

        #media-details .media-preview, #media-details .media-preview img {
            width: 100%;
            height: auto;
            min-height: 55px;
        }

        #media-details .media-info {
            width: 100%;
            margin: 5px 0;
        }

        #media-details .media-download {
            font-size: 14px;
        }

        #media-details .header {
            width: 100%;
        }

    #vimeo-frame {
        width: 100%;
        height: 387px;
    }
}

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

    #footer img {
        width: 50%;
    }

    #tags .tag-wrapper {
        min-width: 250px;
    }
}

@media only screen and (max-width: 535px) {
    #search-wrapper #search-box {
        max-width: 460px;
        min-width: 300px;
        width: 100%;
    }

    #search-wrapper .submit-search, #search-wrapper .all-results {
        margin-top: 15px;
        margin-left: 0 !important;
        width: 100%;
    }

    #search-wrapper #search-box .search {
        width: 100% !important;
        font-size: 17px;
    }
}

@media only screen and (max-width: 460px) {
    .logo {
        font-size: 40px;
        margin-bottom: 10px;
        display: inline-block;
    }

    #header-wrapper #header .header1, #home-search #search-wrapper #search-cta {
        font-size: 40px;
    }

    #header-wrapper #header .header2 {
        font-size: 20px;
    }

    #vimeo-frame {
        width: 100%;
        height: 280px;
    }

    #tags .tag-wrapper {
        min-width: 100%;
    }

    #search-wrapper.inline {
        width: 100%;
    }

        #search-wrapper.inline .submit-search {
            width: 100%;
        }

    #conditions {
        margin-bottom: 3rem;
    }

    #conditions a {

        font-size: 20px;
    }
}

#result-count {
    float: right;
    font-size: 1.3em;
    line-height: 1.3em;
    color: #666;
    margin-top: 22px;
    display: none;
}

.lazy-image {
    display: inline-block !important;
    margin: 5px 5px 5px 5px;
}

.loginwrapper {
    width: 50%;
    margin: 0 auto 0 auto;
}