.page {
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}

    .page.buildings {
        padding: 5px;
    }

.zone .card__header .pas.eta {
    margin-bottom: 3px;
}

@media only screen and (min-width: 481px) and (max-width:900px) {
    .page {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

        .page.buildings {
            padding: 20px;
        }

    .big-map {
        margin-left: .5em !important;
    }
}

@media only screen and (min-width: 900px) {
    .page {
        max-width: 940px;
        margin: 0 auto;
        padding: 0;
    }

        .page.buildings {
            padding: 20px 0;
        }
}

html.large-screen, .large-screen body, .large-screen body > section, .large-screen body > section > .buildings {
    color: #000;
    background: #fff;
}

.bcu-header {
    padding: 20px 0;
}

.bcu-logo-new {
    width: 160px;
    height: 40px;
    background-size: 100%;
    background-image: url('/imgs/logo-pcfinder.svg');
}

.no-svg .bcu-logo-new {
    width: 211px;
    height: 52px;
    background-image: url('/imgs/logo-pcfinder.png');
}

@media only screen and (min-width: 900px) {
    .bcu-logo-new {
        width: 211px;
        height: 52px;
    }
}

.zone, .zone h3 {
    color: #fff;
}

.row-maps .zone h3 {
    color: #444;
}

.zone, .building {
    background-color: #ccc;
}

.row-maps .zone {
    border: 1px solid #ccc;
    background-color: #fff;
}

.zone--0, .pin--0 {
    background-color: #666;
}

.zone--1, .pin--1 {
    background-color: #006b94;
}

.zone--2, .pin--2 {
    background-color: #267939;
}

.zone--3, .pin--3 {
    background-color: #dd123e;
}

.zone--4, .pin--4 {
    background-color: #d54308;
}

.zone--5, .pin--5 {
    background-color: #00778f;
}

.zone--6, .pin--6 {
    background-color: #8d295d;
}

.zone--7, .pin--7 {
    background-color: #287973;
}

.zone--8, .pin--8 {
    background-color: #77649e;
}

.zone--9, .pin--9 {
    background-color: #d8176e;
}

.row-data, .row-maps {
    margin: 0 0 50px;
}

.filter-button__text {
    display: none;
}

.filter-button {
    margin-top: 10px;
}

[class^="pin--"] {
    height: 10px;
}

.close-map {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #444 !important;
    background-color: #00bff3 !important;
}

    .close-map:hover {
        background-color: #007db8 !important;
        color: #fff !important;
    }

.map {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.big-map {
    margin-left: 10px !important;
}

@media only screen and (min-width: 900px) {
    .buildings {
        padding: 40px 0;
    }

        .buildings .grid {
            padding: 0;
        }

    .zone {
        min-height: 186px;
        margin: 20px 0 0;
    }

    .label {
        display: inline-block;
    }

    .filter-button__text {
        display: inline-block;
        font-size: .5em;
        position: relative;
        top: -6px;
    }

    .filter-button {
        margin-top: 5px;
        position: relative;
        border: 2px solid #444;
        background: transparent;
        color: #444;
        padding: 6px 9px 6px 9px;
        border-radius: 4px;
        line-height: 0;
        width: auto;
    }

    .big-map {
        margin-left: 1.5em !important;
    }

    .computer-types li span {
        margin-top: 12px;
    }
}

@media only screen and (max-width: 900px) {
    .row-data, .row-maps {
        margin: 10px 0 30px;
    }

    .zone {
        position: relative;
        margin-bottom: 5px;
    }

        .zone .card__header {
            margin-top: 15px;
            float: left;
            border-bottom: none 0 !important;
        }

        .zone .card__body {
            position: relative;
            float: right;
            margin-right: 20px;
            min-width: 55px;
        }

            .zone .card__body:before {
                position: absolute;
                content: "";
                top: 0;
                left: -20px;
                width: 1px;
                height: 100%;
                background: #fff;
                opacity: .2;
            }

        .zone .card__footer {
            border-top: none 0 !important;
            margin-right: 40px;
            float: right;
            width: auto;
        }

    .computer-types li span {
        margin-top: 20px;
    }

    .computer-types--split {
        margin-top: 15px;
    }

        .computer-types--split li {
            width: auto !important;
        }

        .computer-types--split:before {
            display: none;
        }

    .button-confirm {
        position: static !important;
        margin: 0 !important;
    }

    .button-ghost {
        position: static !important;
        margin: 0 !important;
    }

    .t-size1of2 {
        width: 50%;
        float: left;
    }

    .t-size1of1 {
        width: 100%;
        float: left;
    }

    .divider-vert:first-of-type:after {
        right: 15px !important;
    }

    .t-size1of1 .text-center {
        text-align: left;
        margin-top: 20px;
    }
}

@media only screen and (min-width: 900px) {
    .right-col {
        float: right !important;
        min-width: inherit;
    }
}

@media only screen and (max-width: 481px) {
    .computer-types {
        display: none;
    }
}

.category-heading h2 {
    line-height: 1.2;
}

.computer-types li {
    box-sizing: border-box;
    float: left;
    display: inline-block;
    padding: 10px;
    min-height: 61px;
}

.computer-types--split li {
    width: 50%;
}

.computer-types li:first-child:nth-last-child(1) {
    width: 100%;
}

.zone .card__header {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.zone .card__footer {
    position: relative;
    border-top: 1px solid rgba(255,255,255,.2);
    padding: 0;
}

.computer-types--split:before {
    position: absolute;
    content: "";
    left: 50%;
    width: 1px;
    height: 100%;
    background: #fff;
    opacity: .2;
}

.collapsible.open, .collapsible.closed:hover {
    background-color: #c1cacf;
}

.collapsible.closed {
    background-color: #e6e6e6;
}

.collapsible .icon-plus {
    transition: all .3s ease;
}

.collapsible.open .icon-plus {
    transform: rotate(45deg);
}

.collapsible.open .filter-summary {
    display: none;
}

.collapsible.open .filter-label {
    display: block;
}

.collapsible.closed .filter-summary {
    display: block;
}

.collapsible.closed .filter-label {
    display: none;
}

.checkbox-button {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 4px;
}

input[type=checkbox] {
    display: none;
}

    input[type=checkbox] + label {
        display: inline-block;
        position: relative;
        border-radius: 4px;
        padding: 5px 15px;
        background: transparent;
        border: 2px solid #00bff3;
        color: #444;
        cursor: pointer;
        text-transform: uppercase;
    }

        input[type=checkbox] + label:hover {
            background: #e4e4e4;
        }

    input[type=checkbox]:checked + label {
        background: #00bff3;
        color: #444;
    }

.divider-vert:after {
    visibility: visible;
    top: 0;
    right: -5px;
    position: absolute;
    content: '';
    height: 100%;
    width: 1px;
    background-color: #ccc;
}

.button-group {
    position: relative;
    margin-top: 24px;
}

.button-confirm {
    position: absolute;
    margin-top: -1px;
    left: 0;
    width: 48%;
    border: 2px solid #2c8658;
    padding: 11px 15px 8px 15px;
    border-radius: 4px;
    background-color: #2c8658;
    color: #fff;
    box-sizing: border-box;
    min-height: 37px;
}

.button-ghost {
    position: absolute;
    margin-top: -1px;
    right: 0;
    border: 2px solid #00bff3;
    background: transparent;
    color: #444;
    padding: 11px 15px 8px 15px;
    min-height: 37px;
    border-radius: 4px;
    width: 48%;
    box-sizing: border-box;
}

.filter-button .icon-plus {
    position: relative;
    top: -1px;
    right: -4px;
}

.switch-field {
    overflow: hidden;
    border-radius: 4px;
    border: 2px solid #ccc;
    padding: 2px;
}

.switch-title {
    margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0,0,0,0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    float: left;
}

.switch-field label {
    display: inline-block;
    width: 60px;
    color: rgba(0,0,0,.6);
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    padding: 4px 6px 1px 6px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

    .switch-field label:hover {
        cursor: pointer;
    }

.switch-field input:checked + label {
    background-color: #00bff3;
    color: #444;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}

.map-thumb {
    width: 140px;
    height: 140px;
}

.primary-font {
    font-family: 'DIN Regular','droid sans',arial,sans-serif;
}

.load-error:before {
    content: "";
    top: -10px;
}

html.large-screen, .large-screen body {
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.large-screen .zone .card__body {
    text-align: center;
    display: block;
}

.large-screen .buildings {
    width: 1280px;
    padding: 0;
    margin: 0;
}

.large-screen .row-data, .row-maps {
    margin: 0;
}

.large-screen .zone {
    margin: 10px 0 2px;
    height: 254px;
    min-height: 254px;
}

.large-screen .computer-count {
    font-size: 5rem;
}

.large-screen .computer-types li span {
    margin-top: 2px;
}

.large-screen .card--map {
    height: 500px;
    margin: 10px 5px 10px 0;
}

    .large-screen .card--map img {
        height: 100%;
    }

.display-width {
    width: 1280px;
}

.viewport-indicator {
    border: 2px dotted #dd123e;
    opacity: .7;
    height: 720px;
    width: 1280px;
    position: absolute;
    z-index: 1;
}

.brand-primary-bg-green .dark {
    color: #474747;
}

.grey, .mid-grey, .status-draft {
    color: #676767 !important;
}

.opacity-80 {
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    -khtml-opacity: .8;
}

.opacity-70 {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: .7;
    -khtml-opacity: .7;
}

.eta {
    letter-spacing: 0;
    font-size: 12px;
    font-size: .85rem;
}

.text-content p, .text-content h4, .text-content ul {
    margin-bottom: 15px;
}

.text-content h2, .text-content h3 {
    margin-bottom: 15px;
    padding-top: 5px;
    font-size: 1.2rem;
}

.text-content li {
    margin: 0 0 .25em 2em;
    line-height: 1.6;
    font-size: 1em;
}

.text-content {
    margin-bottom: 50px;
}

.big-map h3 {
    font-size: 1.3em;
    padding: .4em;
}

.using-keyboard :focus {
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: #fff5b3;
    box-shadow: 0 -2px #fd0,0 4px #0b0c0c;
}

.using-keyboard :focus {
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: #fff5b3;
    box-shadow: 0 -2px #fd0,0 4px #0b0c0c;
}

.using-keyboard .bcu-logo-new:focus {
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: transparent;
    box-shadow: 0 -2px #fd0,0 4px #0b0c0c;
}

.using-keyboard input:focus + label {
    border: 3px solid #fd0;
}

.using-keyboard a.js-close-map:focus {
    border: 3px solid #fd0;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #444 !important;
}

    .using-keyboard a.js-close-map:focus .close-map {
        position: absolute;
        top: 0;
        right: -6px;
    }

.using-keyboard .zone a:focus {
    border: 3px solid #fd0;
    display: block;
}