/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html {
  font-size: 1rem;
}

*,
body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  width: 100%;
  -webkit-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  background-color: black;
  color: #ffffff;
}

a {
  cursor: pointer;
  text-decoration: none;
}

ul,
li {
  list-style-type: none;
}

.container {
  width: calc(100% - 12px);
}

.mx-auto {
  margin: auto;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-primary {
  color: #FFB71B;
}

.text-secondary {
  color: #8E8E8E;
}

.mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.desktop {
  display: none;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert {
  font-family: 'Sofia Sans', sans-serif;
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  html {
    font-size: 1.2rem;
  }

  .container {
    width: 540px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  html {
    font-size: 1.4rem;
  }

  .container {
    width: 720px;
  }

  .mobile {
    display: none;
  }

  .desktop {
    display: block;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  html {
    font-size: 1.6rem;
  }

  .container {
    width: 960px
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

@media only screen and (min-width: 1400px) {
  .container {
    width: 1320px;
  }
}