/* Font faces */
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-Bold-518b0af0.woff2) format("woff2"),
    url(../fonts/Rubik-Bold-132d0a6d.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-Light-589f4f19.woff2) format("woff2"),
    url(../fonts/Rubik-Light-884758f0.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-LightItalic-40262e82.woff2) format("woff2"),
    url(../fonts/Rubik-LightItalic-ba79b0a0.woff) format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-ExtraBoldItalic-f37a4bd9.woff2)
      format("woff2"),
    url(../fonts/Rubik-ExtraBoldItalic-2d6e5f1f.woff) format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-Black-98dbc60d.woff2) format("woff2"),
    url(../fonts/Rubik-Black-27fe4e08.woff) format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-BlackItalic-b941d8da.woff2) format("woff2"),
    url(../fonts/Rubik-BlackItalic-b5327bf4.woff) format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-Italic-3f589fbb.woff2) format("woff2"),
    url(../fonts/Rubik-Italic-559a024e.woff) format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-Medium-d39ca325.woff2) format("woff2"),
    url(../fonts/Rubik-Medium-3b039bfb.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-BoldItalic-9a70598b.woff2) format("woff2"),
    url(../fonts/Rubik-BoldItalic-ead923c6.woff) format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-ExtraBold-f72a7ec5.woff2) format("woff2"),
    url(../fonts/Rubik-ExtraBold-51066e69.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-Regular-15b752bb.woff2) format("woff2"),
    url(../fonts/Rubik-Regular-d402f3d1.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-SemiBoldItalic-2a6c4200.woff2)
      format("woff2"),
    url(../fonts/Rubik-SemiBoldItalic-d5015771.woff) format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-MediumItalic-42cf65ca.woff2) format("woff2"),
    url(../fonts/Rubik-MediumItalic-13b31188.woff) format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Rubik;
  src: url(../fonts/Rubik-SemiBold-7faaaf9e.woff2) format("woff2"),
    url(../fonts/Rubik-SemiBold-80ac863f.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Exo;
  src: url(../fonts/Exo-Bold-0f469e66.woff2) format("woff2"),
    url(../fonts/exo-bold-2a02f7f9.woff) format("woff"),
    url(../fonts/Exo-Bold-2b571031.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Exo;
  src: url(../fonts/Exo-Regular-ecc8ddf7.woff2) format("woff2"),
    url(../fonts/exo-regular-43ef25b1.woff) format("woff"),
    url(../fonts/Exo-Regular-44adc0ab.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Exo;
  src: url(../fonts/Exo-SemiBold-966fee16.woff2) format("woff2"),
    url(../fonts/exo/exo-semiBold.woff) format("woff"),
    url(../fonts/Exo-SemiBold-6a45f8d3.ttf) format("truetype");
}

/* Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: Rubik;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

.antialiased {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
	width: 100%;
	margin: 0.5em 0;
  text-align: center;
  padding: 1em;
}

.logo {
	width: auto;
	height: auto;
  max-width: 250px;
}

/* Footer */
footer {
  color: #fff;
  text-align: center;
  padding: 1em 0;
  background-color: #00aeef;
  width: 100%;
  bottom: 0;
  font-size: .875rem;
}

footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 5px;
}

footer a:hover {
  color: #424453;
  text-decoration: underline;
}

/* Extra Small Devices */
@media (max-width: 576px) {
  body {
    font-size: .875rem;
  }
}

/* Small Devices */
@media (min-width: 577px) and (max-width: 768px) {

}

/* Medium Devices */
@media (min-width: 769px) and (max-width: 992px) {

}

/* Large Devices */
@media (min-width: 993px) and (max-width: 1200px) {
  .logo {
    max-width: 400px;
  }
}

/* Extra Large Devices */
@media (min-width: 1201px) {
  .logo {
    max-width: 400px;
  }
}