/* 576    phone  */
/* 768    tablet */
/* 992    laptop */
/* 1200   desktop */
/* $point: xs, sm, md, lg, or xl */
/* $first: up, down */
@import url(bootstrap-grid.min.css);
@media screen and (max-width: 0rem) {
  .hidden-xs-down {
    display: none; } }

@media screen and (min-width: 0rem) {
  .hidden-xs-up {
    display: none; } }

@media screen and (max-width: 36em) {
  .hidden-sm-down {
    display: none; } }

@media screen and (min-width: 36em) {
  .hidden-sm-up {
    display: none; } }

@media screen and (max-width: 48em) {
  .hidden-md-down {
    display: none; } }

@media screen and (min-width: 48em) {
  .hidden-md-up {
    display: none; } }

@media screen and (max-width: 62em) {
  .hidden-lg-down {
    display: none; } }

@media screen and (min-width: 62em) {
  .hidden-lg-up {
    display: none; } }

@media screen and (max-width: 75em) {
  .hidden-xl-down {
    display: none; } }

@media screen and (min-width: 75em) {
  .hidden-xl-up {
    display: none; } }

html, body {
  font-family: 'Century Gothic', sans-serif;
  background: url("unsplash.jpg") no-repeat;
  background-size: cover;
  color: #000;
  font-size: 10px;
  margin: 0;
  padding: 0; }

.flex {
  display: flex;
  align-items: center;
  height: 100%; }
  .flex .ball {
    position: relative;
    display: flex;
    align-items: center;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    margin: auto;
    animation: 0.5s linear 0.2s 1 inflate;
    -webkit-animation: 0.5s linear 0.2s 1 inflate;
    -moz-animation: 0.5s linear 0.2s 1 inflate;
    -o-animation: 0.5s linear 0.2s 1 inflate;
    -ms-animation: 0.5s linear 0.2s 1 inflate;
    animation-fill-mode: forwards; }
    .flex .ball .inner {
      padding: 40px;
      opacity: 0;
      width: 400px;
      height: 400px;
      animation: 0.2s linear calc(0.5s + 0.2s) 1 appear;
      -webkit-animation: 0.2s linear calc(0.5s + 0.2s) 1 appear;
      -moz-animation: 0.2s linear calc(0.5s + 0.2s) 1 appear;
      -o-animation: 0.2s linear calc(0.5s + 0.2s) 1 appear;
      -ms-animation: 0.2s linear calc(0.5s + 0.2s) 1 appear;
      animation-fill-mode: forwards;
      margin: auto;
      text-align: center; }
    .flex .ball #download {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 500px;
      height: 500px;
      line-height: 500px;
      border-radius: 50%;
      text-align: center;
      font-size: 4em;
      color: #fff;
      background-color: #1e68a5; }
    .flex .ball:hover #download {
      opacity: 1;
      transition: opacity 0.5s;
      -webkit-transition: opacity 0.5s;
      -moz-transition: opacity 0.5s;
      -o-transition: opacity 0.5s;
      -ms-transition: opacity 0.5s; }

@keyframes inflate {
  100% {
    width: 500px;
    height: 500px; } }
@keyframes appear {
  100% {
    opacity: 1; } }
h2 {
  font-size: 4em; }

p {
  font-size: 1.6em; }

a {
  text-decoration: none;
  color: #1e68a5; }
  a:hover {
    color: #000; }

/*# sourceMappingURL=index.css.map */