/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(../fonts/Blanch%20Caps/Blanch-Caps.css);
@import url(../fonts/FS%20Albert/FSAlbert-Bold.css);
@import url(../fonts/FS%20Albert/FSAlbert.css);
@import url(../fonts/FSAlbert/FSAlbert-ExtraBold.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

.inner {
  max-width: 1100px;
  padding: 0 1em;
  margin: auto; }

p, a {
  font-family: "base", arial, sans-serif;
  font-weight: 100;
  font-size: 1em;
  line-height: 1.3em;
  text-decoration: none; }

header {
  padding: 20px 0 10px;
  overflow: hidden; }
  header .logo {
    float: left; }
  header .social {
    float: right; }
    header .social li {
      float: left;
      padding: 0 10px 0; }

.hero {
  background: url(../img/header.jpg);
  background-size: cover;
  background-position: center center;
  text-align: center;
  padding: 10% 20px; }
  .hero h1 img {
    max-width: 100%;
    vertical-align: bottom; }
  .hero p {
    box-sizing: border-box;
    display: block;
    max-width: 823px;
    margin: auto;
    padding: 10px 15px;
    color: #fff;
    background: url(../img/yellow-bg.png); }

.map_container {
  position: relative;
  height: 948px;
  background: #ecf7fc;
  margin-bottom: 20px; }
  @media screen and (max-width: 1504px) {
    .map_container {
      height: 0;
      padding-bottom: 64.3617021277%; } }
  @media screen and (max-width: 700px) {
    .map_container {
      display: none; } }
  .map_container .map, .map_container .pins_container {
    position: absolute;
    top: 0;
    width: 100%; }
    .map_container .map img, .map_container .pins_container img {
      width: 100%;
      max-width: 1504px;
      margin: auto;
      display: block; }
  .map_container .pins_container .pins {
    position: relative;
    max-width: 1504px;
    width: 100%;
    margin: auto;
    height: 948px; }
    @media screen and (max-width: 1504px) {
      .map_container .pins_container .pins {
        height: 0;
        padding-bottom: 64.3617021277%; } }
  .map_container .pins_container .pin {
    position: absolute;
    height: 45px;
    width: 31px; }
    .map_container .pins_container .pin a {
      cursor: default;
      display: block;
      height: inherit;
      background: url(../img/pin.png);
      background-position: 0 0; }
    .map_container .pins_container .pin#p1 {
      top: 77%;
      left: 88%; }
    .map_container .pins_container .pin#p2 {
      top: 58%;
      left: 76%; }
    .map_container .pins_container .pin#p3 {
      top: 37%;
      left: 25%; }
    .map_container .pins_container .pin#p4 {
      top: 39%;
      left: 27%; }
    .map_container .pins_container .pin#p5 {
      top: 41%;
      left: 13%; }
    .map_container .pins_container .pin#p6 {
      top: 74%;
      left: 79%; }
    .map_container .pins_container .pin#p7 {
      top: 41%;
      left: 16%; }
    .map_container .pins_container .pin#p8 {
      top: 51%;
      left: 75%; }
    .map_container .pins_container .pin#p9 {
      top: 55%;
      left: 74.8%; }
    .map_container .pins_container .pin#p10 {
      top: 48%;
      left: 62%; }
    .map_container .pins_container .pin#p11 {
      top: 46%;
      left: 24%; }

.locations .location {
  overflow: hidden;
  padding: 20px 0; }
  .locations .location .img {
    box-sizing: border-box;
    width: 45%;
    float: right;
    padding: 0 0 0 20px; }
    @media screen and (max-width: 700px) {
      .locations .location .img {
        width: 100%;
        float: none !important;
        padding: 20px 0 !important; } }
  .locations .location.left .img {
    float: left;
    padding: 0 20px 0; }
  .locations .location .info {
    box-sizing: border-box;
    width: 55%;
    padding-right: 20px;
    float: left; }
    @media screen and (max-width: 700px) {
      .locations .location .info {
        width: 100%;
        float: none;
        padding: 0; } }
    .locations .location .info h2 {
      color: #e50b76;
      text-transform: uppercase;
      font-family: "headings", arial, sans-serif;
      font-size: 4em;
      padding: 0 0 20px 20px; }
    .locations .location .info .ttd {
      overflow: hidden;
      padding: 0 0 40px; }
      .locations .location .info .ttd .tag {
        float: left;
        overflow: hidden;
        margin: 0 10px 0;
        font-family: "base-b", arial, sans-serif;
        color: #e50b76; }
        .locations .location .info .ttd .tag img {
          float: left; }
        .locations .location .info .ttd .tag .border {
          display: inline-block;
          float: right;
          border-top: 2px solid #e50b76;
          border-bottom: 2px solid #e50b76;
          border-right: 2px solid #e50b76;
          line-height: 41px;
          padding: 0 10px 0 5px; }
      .locations .location .info .ttd .bold {
        font-family: "base-b", arial, sans-serif;
        color: #e50b76; }
  .locations .location .link {
    text-align: right; }
    .locations .location .link a {
      color: #e50b76; }

footer {
  background: #2bbbe9;
  text-align: center;
  color: #fff;
  padding: 40px 0; }
  footer a {
    display: block;
    margin: auto;
    color: #fff; }
    footer a img {
      padding: 20px 0; }
