@font-face {
    font-family: "Futura Medium";
    src: url('../fonts/futura-medium-bt.ttf');
}

@font-face {
    font-family: "Futura Medium Condensed";
    src: url('../fonts/futura-medium-condensed-bt.ttf');
}

html, body {
    padding: 0;
    margin: 0;
    background-color: #5d5e5f;
}

* {
    box-sizing: border-box;
}

div.container {
    width: 100%;
    overflow: hidden;
    margin-top: 100px;
}

div.container > div.column {
    display: inline-block;
    float: left;
}

div.container > div.column[size="1"] { width: calc((100% / 12) * 1); }
div.container > div.column[size="2"] { width: calc((100% / 12) * 2); }
div.container > div.column[size="3"] { width: calc((100% / 12) * 3); }
div.container > div.column[size="4"] { width: calc((100% / 12) * 4); }
div.container > div.column[size="5"] { width: calc((100% / 12) * 5); }
div.container > div.column[size="6"] { width: calc((100% / 12) * 6); }
div.container > div.column[size="7"] { width: calc((100% / 12) * 7); }
div.container > div.column[size="8"] { width: calc((100% / 12) * 8); }
div.container > div.column[size="9"] { width: calc((100% / 12) * 9); }
div.container > div.column[size="10"] { width: calc((100% / 12) * 10); }
div.container > div.column[size="11"] { width: calc((100% / 12) * 11); }
div.container > div.column[size="12"] { width: calc((100% / 12) * 12); }

div.container > div.column[offset="1"] { margin-left: calc((100% / 12) * 1); }
div.container > div.column[offset="2"] { margin-left: calc((100% / 12) * 2); }
div.container > div.column[offset="3"] { margin-left: calc((100% / 12) * 3); }
div.container > div.column[offset="4"] { margin-left: calc((100% / 12) * 4); }
div.container > div.column[offset="5"] { margin-left: calc((100% / 12) * 5); }
div.container > div.column[offset="6"] { margin-left: calc((100% / 12) * 6); }
div.container > div.column[offset="7"] { margin-left: calc((100% / 12) * 7); }
div.container > div.column[offset="8"] { margin-left: calc((100% / 12) * 8); }
div.container > div.column[offset="9"] { margin-left: calc((100% / 12) * 9); }
div.container > div.column[offset="10"] { margin-left: calc((100% / 12) * 10); }
div.container > div.column[offset="11"] { margin-left: calc((100% / 12) * 11); }
div.container > div.column[offset="12"] { margin-left: calc((100% / 12) * 12); }

#content, #map {
    height: 485px;
}

#content {
    background-color: #fff;
}

#content > h1 {
    height: 50px;
    line-height: 50px;
    background-color: #31b7e9;
    text-align: center;
    display: block;
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 22px;
    font-family: "Futura Medium";
    font-weight: 400;
    position: relative;
}

#content > h1 > a {
    position: absolute;
    right: 12.5px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Futura Medium Condensed";
    height: 25px;
    line-height: 25px;
    display: inline-block;
    text-decoration: none;
    margin: 12.5px 0;
    background-color: #fff;
    border-radius: 3px;
    padding: 0 5px;
    transition: all .3s ease-in-out;
}

#content > h1 > a:hover {
    background-color: #ede8e8;
    color: #5d5e5f;
}

#content > form {
    padding: 48px 28px 52px;
}

#content > form > div.form-control {
    display: inline-block;
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 25px;
}

#content > form > div.form-control > input {
    height: 40px;
    line-height: 40px;
    background-color: #e8ebed;
    border: 0;
    border-radius: 5px;
    padding: 0 8px;
    width: 100%;
    font-family: "Futura Medium Condensed";
    font-size: 18px;
    transition: all .3s ease-in-out;
    width: 100%;
}

#content > form > div.form-control:last-of-type {
    margin-bottom: 50px;
}

#content > form > div.form-control.half {
    width: calc(50% - 15px);
}

#content > form > div.form-control.half:nth-of-type(odd) {
    margin-right: 15px;
}
#content > form > div.form-control.half:nth-of-type(even) {
    margin-left: 15px;
}

#content > form > div.form-control > input::placeholder {
    color: #aeb7bd;
}

#content > form > div.form-control > label {
    color: #ff2828;
    font-size: 16px;
    font-family: "Futura Medium Condensed";
    position: absolute;
    top: -17px;
}

#content > form > div.form-control > input:valid {
    background-color: #ede8e8;
    color: #5d5e5f;
}

#content > form > div.form-control > input.error {
    background-color: #ff757f!important;
    color: #fff!important;
}
#content > form > div.form-control > input.error::placeholder {
    color: #fff!important;
}

#content > form > button {
    height: 50px;
    background-color: #5d5e5f;
    border: 0;
    border-radius: 5px;
    width: 100%;
    color: #fff;
    font-family: "Futura Medium Condensed";
    font-size: 18px;
    transition: all .3s ease-in-out;
}

#content > form > button:hover {
    background-color: #31b7e9;
    cursor: pointer;
}

#content > div.list {
    font-family: "Futura Medium";
    height: calc(100% - 50px);
    overflow-y: auto;
}

#content > div.list > div.item {
    padding: 18px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all .3s ease-in-out;
}

#content > div.list > div.item:hover,
#content > div.list > div.item.selected {
    background-color: #ede8e8;
    cursor: pointer;
}

#content > div.list > div.item > span {
    width: 100%;
    display: block;
}

#content > div.list > div.item > span.name {
    font-size: 18px;
    text-transform: uppercase;
    padding-bottom: 5px;
    color: #5d5e5f;
    font-family: "Futura Medium Condensed";
}

#content > div.list > div.item > span.location {
    font-size: 12px;
    color: #aeb7bd;
}