/*

0px - 600px:        Phone

600px - 900px:      Tablet Portrait

900px - 1200px:     Tablet Landscape

[1200px - 1800px]:  Normal Style apply

1800+:              Big Desktops

*/
/*

$breakpoint argument choices:

- phone

- tab-port

- tab-land

- big-desktop



1em = 16px

*/
/*
COLORS

Primary: #eb2f64
Primary light: #ff3366
Primary dark: # ba265d

Grey light 1: #faf9f9
Grey light 2: #f4f2f2
Grey light 3: #f0eeee
Grey light 4: #ccc

Grey dark 1: #333
Grey dark 2: #777
Grey dark 3: #999

 */
/* :root {
  --color-primary: #022c43;
  --color-primary-light: #034468;
  --color-primary-dark: #022132;

  --color-secondary: #e1c43c;

  --color-white: #fff;

  --color-grey-light-1: #faf9f9;
  --color-grey-light-2: #f4f2f2;
  --color-grey-light-3: #f0eeee;
  --color-grey-light-4: #ccc;

  --color-grey-dark-1: #333;
  --color-grey-dark-2: #777;
  --color-grey-dark-3: #999;

  --shadow-dark: 0 2rem  6rem rgba(0,0,0,0.3);
  --shadow-light: 0 2rem 5rem rgba(0,0,0,0.06);
} */
/* Variables */
@font-face {
  font-family: upbolters;
  src: url(../images/upbolters.otf);
}
* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  min-height: 100vh;
  height: -webkit-fill-available;
  font-size: 62.5%;
}
@media only screen and (min-width: 121em) {
  html {
    font-size: 90%;
  }
}
@media only screen and (max-width: 87.5em) {
  html {
    font-size: 47.5%;
  }
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}

body {
  scroll-behavior: smooth;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #fff;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.top-bar {
  position: sticky;
  top: 0;
  background-color: #1b2b4c;
  height: 9rem;
  width: 100%;
  box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.4);
  padding: 2rem 10rem;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 75em) {
  .top-bar {
    padding: 2rem 7.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .top-bar {
    padding: 2rem 4rem;
    height: 10rem;
  }
}

.browse {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s;
}
@media only screen and (max-width: 56.25em) {
  .browse {
    display: none;
  }
}
.browse:hover {
  color: #cc3524;
}
.browse--icon {
  width: 1.8rem;
  height: 1.8rem;
  fill: currentColor;
  margin-right: 1rem;
}
@media only screen and (max-width: 37.5em) {
  .browse--icon {
    width: 2rem;
    height: 2rem;
  }
}
.browse--name {
  font-size: 1.5rem;
  font-weight: 700;
}

.dummy {
  display: none;
}
@media only screen and (max-width: 56.25em) {
  .dummy {
    display: block;
  }
}

.search {
  display: flex;
  align-items: center;
  width: 40%;
}
.search__input {
  border: none;
  font-size: 1.6rem;
  height: 100%;
  width: 100%;
  padding: 0 4rem;
  background: none;
  border-radius: 5px;
  color: #fff;
  margin-right: -6rem;
  transition: all 0.2s;
}
.search__input:focus, .search__input:active {
  outline: none;
  background-color: #142039;
}
.search__input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.search__button {
  cursor: pointer;
  border: none;
  background: none;
}
.search__button:hover .search__icon {
  fill: #cc3524;
}
.search__icon {
  height: 2.4rem;
  width: 2.4rem;
  fill: rgba(255, 255, 255, 0.25);
  transition: all 0.2s;
}

.user-nav {
  display: flex;
}
.user-nav__settings--box {
  display: flex;
  align-items: center;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0 4rem;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s;
}
.user-nav__settings--box:hover {
  color: #cc3524;
}
@media only screen and (max-width: 75em) {
  .user-nav__settings--box {
    padding: 0 2.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .user-nav__settings--box {
    border: none;
    padding: 0 1rem;
  }
}
.user-nav__settings--icon {
  width: 1.8rem;
  height: 1.8rem;
  fill: currentColor;
  margin-right: 1.25rem;
}
@media only screen and (max-width: 56.25em) {
  .user-nav__settings--icon {
    width: 3.5rem;
    height: 3.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-nav__settings--icon {
    width: 3rem;
    height: 3rem;
  }
}
.user-nav__settings--name {
  font-size: 1.5rem;
  font-weight: 700;
}
@media only screen and (max-width: 56.25em) {
  .user-nav__settings--name {
    display: none;
  }
}
.user-nav__profile--box {
  display: flex;
  align-items: center;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0 4rem;
  background-color: none;
  transition: all 0.2s;
}
@media only screen and (max-width: 75em) {
  .user-nav__profile--box {
    padding: 0 2.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .user-nav__profile--box {
    border: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-nav__profile--box {
    padding: 0 1rem;
  }
}
.user-nav__profile--box:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.user-nav__profile--image-box {
  width: 4.5rem;
  height: 4.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 37.5em) {
  .user-nav__profile--image-box {
    width: 4rem;
    height: 4rem;
  }
}
.user-nav__profile--image-ring {
  border: 2px solid #45AF42;
  border-radius: 5rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.user-nav__profile--image {
  width: 80%;
  border-radius: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .user-nav__profile--image {
    width: 75%;
  }
}
.user-nav__profile--details {
  margin-left: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .user-nav__profile--details {
    display: none;
  }
}
.user-nav__profile--details p {
  line-height: 1.7rem;
}
.user-nav__profile--details--username {
  font-size: 1.8rem;
  font-weight: 700;
  color: #cc3524;
}
.user-nav__profile--details--userlevel {
  font-size: 1.2rem;
  color: #fff;
}
.user-nav__noti {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 0.25rem 0 4rem;
}
@media only screen and (max-width: 75em) {
  .user-nav__noti {
    padding: 0 0.25rem 0 2.5rem;
  }
}
.user-nav__noti--link {
  text-decoration: none;
}
.user-nav__noti--icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: #fff;
  transition: all 0.2s;
  margin-top: 0.5rem;
}
@media only screen and (max-width: 56.25em) {
  .user-nav__noti--icon {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-nav__noti--icon {
    width: 2.7rem;
    height: 2.7rem;
  }
}
.user-nav__noti--icon:hover {
  fill: #cc3524;
}
.user-nav__noti--ping {
  width: 1.3rem;
  height: 1.3rem;
  background-color: #cc3524;
  border: 3px solid #1b2b4c;
  position: absolute;
  border-radius: 1rem;
  top: 1.4rem;
  right: 0;
}
@media only screen and (max-width: 56.25em) {
  .user-nav__noti--ping {
    width: 1.65rem;
    height: 1.65rem;
    top: 0.75rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-nav__noti--ping {
    top: 1.65rem;
  }
}

.offline-nav {
  display: flex;
}
.offline-nav--btn {
  display: flex;
  font-size: 1.6rem;
  border-radius: 0;
  border: 0.2rem solid #cc3524;
  background: none;
  cursor: pointer;
  text-transform: uppercase;
  font-family: upbolters;
  text-align: center;
  text-decoration: none;
  padding: 0 2.5rem;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}
@media only screen and (max-width: 37.5em) {
  .offline-nav--btn {
    margin: 0.75rem 0;
    font-size: 1.4rem;
    padding: 0 2rem;
  }
}
.offline-nav--btn__solid {
  background-color: #cc3524;
  color: #fff;
}
.offline-nav--btn__outline {
  background-color: none;
  color: #cc3524;
}
.offline-nav--btn:not(:last-child) {
  margin-right: 1.5rem;
}
.offline-nav--btn:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}

.menu__checkbox {
  display: none;
}
.menu__open, .menu__close {
  display: none;
  position: absolute;
  cursor: pointer;
  top: 3rem;
}
@media only screen and (max-width: 56.25em) {
  .menu__open, .menu__close {
    display: flex;
    width: 12rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .menu__open, .menu__close {
    top: 3.4rem;
    width: auto;
  }
}
.menu__open {
  left: 8rem;
}
@media only screen and (max-width: 56.25em) {
  .menu__open {
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .menu__open {
    left: 4rem;
  }
}
.menu__open span {
  font-size: 2.2rem;
  display: inline-block;
  z-index: 8;
  font-weight: 700;
}
@media only screen and (max-width: 37.5em) {
  .menu__open span {
    display: none;
  }
}
.menu__close {
  left: -12rem;
  transition: all 0.2s;
}
.menu__close span {
  font-size: 2.25rem;
  display: inline-block;
}
.menu__open--icon {
  width: 3.5rem;
  height: 3.5rem;
  fill: #fff;
  z-index: 8;
  margin-right: 1.5rem;
}
@media only screen and (max-width: 37.5em) {
  .menu__open--icon {
    width: 3rem;
    height: 3rem;
  }
}
.menu__close--icon {
  width: 3.5rem;
  height: 3.5rem;
  fill: #cc3524;
  z-index: 10;
  margin-right: 1rem;
}
.menu__checkbox:checked ~ .navigation {
  left: 0;
}
.menu__checkbox:checked ~ label .menu__close {
  left: 25rem;
}
.menu__checkbox:checked ~ .black-overlay {
  display: block;
}

.black-overlay {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.65);
  transition: all 0.2s;
  backdrop-filter: blur(2.5px);
}

.navigation {
  flex: 0 0 auto;
  width: 27.5rem;
  display: flex;
  flex-direction: column;
  color: #fff;
  background-color: #1b2b4c;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 3.5rem 5rem 6rem 5rem;
  position: relative;
  transition: all 0.2s;
}
@media only screen and (max-width: 75em) {
  .navigation {
    width: 23rem;
    padding: 3.5rem 3.75rem 6rem 3.75rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .navigation {
    width: 35rem;
    padding: 9rem 7rem 6rem 7rem;
    position: absolute;
    z-index: 9;
    height: 100vh;
    left: -35rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation {
    width: 32.5rem;
    padding: 9rem 6rem 5rem 6rem;
    height: 100%;
  }
}
.navigation .logo {
  width: 70%;
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 37.5em) {
  .navigation .logo {
    margin-bottom: 3rem;
  }
}
.navigation .logo__img {
  width: 100%;
}
.navigation .main-nav {
  font-size: 1.5rem;
  margin-top: 4.5rem;
  margin-bottom: auto;
}
@media only screen and (max-width: 56.25em) {
  .navigation .main-nav {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation .main-nav {
    font-size: 1.75rem;
  }
}
@media only screen and (max-width: 20em) {
  .navigation .main-nav {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
}
.navigation .main-nav__item {
  position: relative;
}
.navigation .main-nav__item:not(:last-child) {
  margin-bottom: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .navigation .main-nav__item:not(:last-child) {
    margin-bottom: 3.5rem;
  }
}
@media only screen and (max-width: 20em) {
  .navigation .main-nav__item:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.navigation .main-nav__link:link, .navigation .main-nav__link:visited {
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 700;
  transition: all 0.2s;
}
.navigation .main-nav__link:hover {
  color: #cc3524;
}
.navigation .main-nav__icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 2rem;
  fill: currentColor;
}
@media only screen and (max-width: 56.25em) {
  .navigation .main-nav__icon {
    width: 2.3rem;
    height: 2.3rem;
  }
}
.navigation .sec-nav {
  font-size: 1.5rem;
}
@media only screen and (max-width: 56.25em) {
  .navigation .sec-nav {
    font-size: 1.75rem;
  }
}
@media only screen and (max-width: 20em) {
  .navigation .sec-nav {
    font-size: 1.5rem;
  }
}
.navigation .sec-nav__item:not(:last-child) {
  margin-bottom: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .navigation .sec-nav__item:not(:last-child) {
    margin-bottom: 3.5rem;
  }
}
@media only screen and (max-width: 20em) {
  .navigation .sec-nav__item:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.navigation .sec-nav__link:link, .navigation .sec-nav__link:visited {
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 700;
}
.navigation .sec-nav__link:hover {
  color: #cc3524;
}
.navigation .sec-nav__link--red:link, .navigation .sec-nav__link--red:visited {
  color: #cc3524;
}
.navigation .sec-nav__icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 2rem;
  fill: currentColor;
}
@media only screen and (max-width: 56.25em) {
  .navigation .sec-nav__icon {
    width: 2.3rem;
    height: 2.3rem;
  }
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #1b2b4c;
}

.main {
  flex-grow: 1;
  overflow-y: scroll;
  width: 100%;
}

/* BUTTONS */
.changepass__btn, .forgotpass__btn, .login__btn, .sign-up__btn, .btn-icon, .btn {
  display: inline-block;
  font-size: 1.6rem;
  cursor: pointer;
  text-transform: uppercase;
  font-family: upbolters;
  text-align: center;
}
@media only screen and (max-width: 37.5em) {
  .changepass__btn, .forgotpass__btn, .login__btn, .sign-up__btn, .btn-icon, .btn {
    font-size: 1.4rem;
  }
}

.btn__play:link, .btn__play:visited {
  color: #fff;
  background-color: #cc3524;
  transition: all 0.2s;
  transform: translateY(0);
  box-shadow: none;
  outline: none;
  padding: 1.35rem 3rem;
  border: 2px solid #cc3524;
}
@media only screen and (max-width: 75em) {
  .btn__play:link, .btn__play:visited {
    padding: 1.35rem 0;
  }
}
.btn__play:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
  transform: translateY(-0.25rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.btn__gold:link, .btn__gold:visited {
  color: #fff;
  background: #cc3524;
  transition: all 0.2s;
  border: 0.2rem solid #cc3524;
  padding: 1.25rem 2.75rem;
}
@media only screen and (max-width: 37.5em) {
  .btn__gold:link, .btn__gold:visited {
    padding: 1rem 2rem;
  }
}
.btn__gold:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}
.btn__orange:link, .btn__orange:visited {
  color: #fff;
  background: #CCAE23;
  transition: all 0.2s;
  border: 0.2rem solid #CCAE23;
  padding: 1.25rem 2.75rem;
}
@media only screen and (max-width: 37.5em) {
  .btn__orange:link, .btn__orange:visited {
    padding: 1rem 2rem;
  }
}
.btn__orange:hover {
  background-color: rgba(204, 174, 35, 0.5);
  color: #fff;
}
.btn__green:link, .btn__green:visited {
  color: #fff;
  background: #45AF42;
  transition: all 0.2s;
  border: 0.2rem solid #45AF42;
  padding: 1.25rem 2.75rem;
}
@media only screen and (max-width: 37.5em) {
  .btn__green:link, .btn__green:visited {
    padding: 1rem 2rem;
  }
}
.btn__green:hover {
  background-color: rgba(69, 175, 66, 0.5);
  color: #fff;
}
.btn__gold--outline:link, .btn__gold--outline:visited {
  color: #cc3524;
  background: none;
  transition: all 0.2s;
  border: 0.2rem solid #cc3524;
  padding: 1.25rem 2.75rem;
}
@media only screen and (max-width: 37.5em) {
  .btn__gold--outline:link, .btn__gold--outline:visited {
    padding: 1rem 2rem;
  }
}
.btn__gold--outline:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}
.btn__gold--fixture:link, .btn__gold--fixture:visited {
  color: #fff;
  background: #cc3524;
  transition: all 0.2s;
  border: 0.2rem solid #cc3524;
  padding: 1.25rem 2.75rem;
}
@media only screen and (max-width: 37.5em) {
  .btn__gold--fixture:link, .btn__gold--fixture:visited {
    padding: 1rem;
  }
}
.btn__gold--fixture:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}

.btn-underline {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 0;
  color: #cc3524;
  border-bottom: 0.2rem solid #cc3524;
  transition: all 0.2s;
}
.btn-underline:hover {
  color: #fff;
  border-bottom: 0.2rem solid #fff;
}
.btn-underline__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-underline__text {
  font-size: 1.6rem;
  margin-right: 0.5rem;
}
.btn-underline__icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

.btn-icon {
  transition: all 0.2s;
  outline: none;
  padding: 1.35rem 3rem;
}
@media only screen and (max-width: 75em) {
  .btn-icon {
    padding: 1.35rem;
  }
}
.btn-icon--gold {
  background-color: #cc3524;
  color: #fff;
  border: 0.2rem solid #cc3524;
}
.btn-icon--gold:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}
.btn-icon--green {
  background-color: #45AF42;
  color: #fff;
  border: 0.2rem solid #45AF42;
}
.btn-icon--green:hover {
  background-color: rgba(69, 175, 66, 0.5);
  color: #fff;
}
.btn-icon--gold-outline {
  color: #fff;
  border: 0.2rem solid #cc3524;
  color: #cc3524;
}
.btn-icon--gold-outline:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}
.btn-icon__icon {
  display: inline-block;
  fill: currentColor;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 1rem;
  vertical-align: middle;
}

/* HEADINGS */
.heading {
  font-family: upbolters;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
}
.heading__big {
  font-size: 4.5rem;
}
@media only screen and (max-width: 37.5em) {
  .heading__big {
    font-size: 3rem;
    line-height: 1.1;
  }
}
.heading__medium {
  font-size: 3.5rem;
}
.heading__small {
  font-size: 2.5rem;
}

/* TAGS */
.tag {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  font-family: upbolters;
  font-size: 1.6rem;
  text-transform: uppercase;
  border-radius: 0;
  background-color: #fff;
}
.tag__red {
  color: #cc3524;
}
.tag__green {
  color: #45AF42;
}
.tag__orange {
  color: #CCAE23;
}
@media only screen and (max-width: 37.5em) {
  .tag {
    font-size: 1.25rem;
    padding: 0.35rem 1.35rem;
  }
}

.back-link {
  text-decoration: none;
  color: #fff;
  transition: all 0.2s;
}
.back-link:hover {
  color: #cc3524;
}
.back-link__icon {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  margin-right: 0rem;
  vertical-align: middle;
}
.back-link__text {
  font-size: 1.4rem;
  display: inline-block;
  line-height: 1px;
  vertical-align: middle;
}

.footer {
  width: 100%;
  background-color: #263d6c;
  padding: 6rem 10rem 0rem 10rem;
}
@media only screen and (max-width: 75em) {
  .footer {
    padding: 6rem 8rem 0rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .footer {
    padding: 6rem 8rem 0rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .footer {
    padding: 6rem 4rem 0rem 4rem;
  }
}
.footer__content {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 56.25em) {
  .footer__content {
    flex-direction: column;
    align-items: center;
  }
}
.footer__content--box {
  width: 32%;
  background-color: #1b2b4c;
  border-radius: 5px;
  padding: 3.5rem 4rem;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s;
}
@media only screen and (max-width: 75em) {
  .footer__content--box {
    padding: 3rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .footer__content--box {
    width: 100%;
  }
  .footer__content--box:not(:last-child) {
    margin-bottom: 5rem;
  }
}
.footer__content--box:hover {
  color: #cc3524;
}
.footer__content--icon {
  width: 4rem;
  height: 4rem;
  fill: #cc3524;
}
.footer__content--header {
  font-family: upbolters;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 2rem;
  margin-top: 2rem;
}
.footer__content--paragraph {
  font-size: 1.3rem;
  line-height: 1.5rem;
  margin-top: 0.5rem;
}
.footer__nav {
  display: flex;
  margin: 6rem 0 9rem 0;
  justify-content: space-between;
}
@media only screen and (max-width: 56.25em) {
  .footer__nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .footer__nav {
    margin: 9rem 0 3rem 0;
  }
}
.footer__nav__box {
  width: 32%;
  padding: 0 3.5rem;
}
@media only screen and (max-width: 75em) {
  .footer__nav__box {
    padding: 0 2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .footer__nav__box {
    width: 100%;
    padding: 0 3rem;
  }
  .footer__nav__box:not(:last-child) {
    margin-bottom: 6.5rem;
  }
}
.footer__nav__title {
  font-size: 2rem;
  font-weight: 900;
  color: #cc3524;
  margin-bottom: 2.5rem;
}
.footer__nav__paragraph {
  font-size: 1.4rem;
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 75em) {
  .footer__nav__paragraph {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .footer__nav__paragraph {
    font-size: 1.4rem;
  }
}
.footer__nav__img {
  width: 7.5rem;
  height: 7.5rem;
}
.footer__nav__navi {
  display: flex;
}
@media only screen and (max-width: 56.25em) {
  .footer__nav__navi {
    justify-content: center;
    text-align: left;
  }
}
.footer__nav__list:not(:last-child) {
  margin-right: 15%;
}
@media only screen and (max-width: 56.25em) {
  .footer__nav__list:not(:last-child) {
    margin-right: 7.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .footer__nav__list:not(:last-child) {
    margin-right: 5rem;
  }
}
.footer__nav__link:visited, .footer__nav__link:link {
  text-decoration: none;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all;
}
@media only screen and (max-width: 75em) {
  .footer__nav__link:visited, .footer__nav__link:link {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .footer__nav__link:visited, .footer__nav__link:link {
    font-size: 1.4rem;
  }
}
.footer__nav__link:hover {
  color: #cc3524;
}
.footer__nav__item:not(:last-child) {
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 37.5em) {
  .footer__nav__item:not(:last-child) {
    margin-bottom: 2.25rem;
  }
}
.footer__nav__socials {
  display: flex;
}
@media only screen and (max-width: 56.25em) {
  .footer__nav__socials {
    justify-content: center;
    margin: 1rem 0;
  }
}
.footer__nav__socials__link:not(:last-child) {
  margin-right: 3rem;
}
.footer__nav__socials__icon {
  width: 3rem;
  height: 3rem;
  fill: rgba(255, 255, 255, 0.5);
  transition: all 0.2s;
}
.footer__nav__socials__icon:hover {
  fill: #cc3524;
}
.footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  font-size: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* HERO SECTION START */
.hero {
  background-size: cover;
  background-position: top;
  width: 100%;
  height: calc(100vh - 10rem);
  overflow: hidden;
  position: relative;
}
.hero__content {
  position: absolute;
  bottom: 17.5%;
  left: 0;
  padding: 0 10rem;
}
@media only screen and (max-width: 75em) {
  .hero__content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .hero__content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero__content {
    padding: 0 4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero__content .tag {
    margin-bottom: 1rem;
  }
}
.hero__content--head {
  font-size: 7rem;
  text-transform: uppercase;
  font-family: upbolters;
  line-height: 1;
  font-weight: 500;
  margin: 1rem 0;
}
@media only screen and (max-width: 75em) {
  .hero__content--head {
    font-size: 5.25rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .hero__content--head {
    font-size: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero__content--head {
    font-size: 3.5rem;
    line-height: 1;
  }
}
.hero__content--paragraph {
  font-size: 1.5rem;
  line-height: 1.4;
  width: 90%;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 75em) {
  .hero__content--paragraph {
    line-height: 1.2;
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero__content--paragraph {
    font-size: 1.4rem;
    width: 100%;
  }
}
.hero__content .btn:not(:last-child) {
  margin-right: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .hero__content .btn:not(:last-child) {
    margin-right: 2rem;
  }
}

/* HERO SECTION END */
/* TEAMS SECTION START */
.teams {
  width: 100%;
  padding: 4rem 10rem 8rem 10rem;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 75em) {
  .teams {
    padding: 4rem 8rem 8rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .teams {
    padding: 4rem 8rem 8rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .teams {
    padding: 4rem 4rem 8rem 4rem;
  }
}
.teams h1, .teams h2 {
  text-align: left;
}
.teams h2 {
  margin: 4rem 0 3rem 0;
}
.teams__container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
}
@media only screen and (max-width: 37.5em) {
  .teams__container {
    flex-direction: column;
  }
}
.teams__box {
  width: 49%;
  height: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  transition: all 0.2s;
}
@media only screen and (max-width: 37.5em) {
  .teams__box {
    width: 100%;
    height: 25rem;
    margin-bottom: 2.5rem;
  }
}
.teams__box--csgo {
  background-image: linear-gradient(180deg, rgba(38, 61, 108, 0), #263d6c), url(../images/csgo-1.jpg);
}
.teams__box--fortnite {
  background-image: linear-gradient(180deg, rgba(38, 61, 108, 0), #263d6c), url(../images/Fortnite_KeyArt_1080p.0.jpg);
}
.teams__box:hover {
  transform: translateY(-0.65rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.teams__img {
  width: 40%;
}
.teams .btn__gold--outline {
  align-self: center;
  margin-top: 3.5rem;
}

/* FIXTURES */
.upcoming {
  margin: 1rem 0;
}

.fixtures {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 2rem;
  background-color: #1b2b4c;
  transition: all 0.2s;
}
.fixtures:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.fixtures:hover {
  background-color: #142039;
}
.fixtures__league {
  display: flex;
  align-items: center;
  width: 33.3333333333%;
}
@media only screen and (max-width: 56.25em) {
  .fixtures__league {
    width: 32%;
  }
}
@media only screen and (max-width: 37.5em) {
  .fixtures__league {
    width: 20%;
  }
}
@media only screen and (max-width: 20em) {
  .fixtures__league {
    width: 12.5%;
  }
}
.fixtures__league__img {
  height: 2.25rem;
  margin-right: 1rem;
}
@media only screen and (max-width: 37.5em) {
  .fixtures__league__img {
    height: 2.5rem;
  }
}
.fixtures__league__name {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
}
@media only screen and (max-width: 37.5em) {
  .fixtures__league__name {
    display: none;
  }
}
.fixtures__match {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-family: upbolters;
  width: 33.3333333333%;
  justify-content: center;
}
@media only screen and (max-width: 75em) {
  .fixtures__match__teamname {
    display: none;
  }
}
.fixtures__match__teampic {
  height: 6rem;
  margin: 0 2rem;
}
@media only screen and (max-width: 75em) {
  .fixtures__match__teampic {
    height: 5rem;
    margin: 0 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .fixtures__match__teampic {
    margin: 0 1rem;
  }
}
.fixtures__details {
  display: flex;
  align-items: center;
  width: 33.3333333333%;
  margin-left: auto;
  justify-content: flex-end;
}
@media only screen and (max-width: 37.5em) {
  .fixtures__details {
    width: 40%;
    margin: 0;
  }
}
.fixtures__details__date {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-right: 2rem;
}
@media only screen and (max-width: 75em) {
  .fixtures__details__date {
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .fixtures__details__date {
    margin-right: 0.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .fixtures__details__date {
    display: none;
  }
}
.fixtures__details__date2 {
  display: none;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-right: 2rem;
}
@media only screen and (max-width: 75em) {
  .fixtures__details__date2 {
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .fixtures__details__date2 {
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .fixtures__details__date2 {
    display: block;
  }
}

/* FIXTURES */
/* TEAMS SECTION END */
/* FEED SECTION START */
.feed {
  width: 100%;
  padding: 4rem 10rem 8rem 10rem;
  text-align: center;
}
@media only screen and (max-width: 75em) {
  .feed {
    padding: 4rem 8rem 8rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .feed {
    padding: 4rem 8rem 8rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed {
    padding: 4rem 4rem 8rem 4rem;
  }
}
.feed h1 {
  text-align: left;
}
.feed__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50rem;
  margin: 4rem 0;
  text-align: left;
}
@media only screen and (max-width: 56.25em) {
  .feed__box {
    flex-direction: column;
    height: 95rem;
  }
}
.feed__article {
  width: 49%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (max-width: 56.25em) {
  .feed__article {
    width: 100%;
  }
  .feed__article:first-child {
    height: 32.5rem;
  }
}
.feed__article--1 {
  text-decoration: none;
  color: #fff;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  position: relative;
  transition: all 0.2s;
  box-shadow: none;
  transform: translateY(0);
}
@media only screen and (max-width: 56.25em) {
  .feed__article--1 {
    margin-bottom: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--1 {
    margin-bottom: 2.5rem;
  }
}
.feed__article--1:hover {
  transform: translateY(-0.65rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.feed__article--1 .tag {
  position: absolute;
  left: 4.5rem;
  top: 3.5rem;
}
@media only screen and (max-width: 75em) {
  .feed__article--1 .tag {
    left: 3rem;
    top: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--1 .tag {
    left: 3rem;
    top: 3rem;
  }
}
.feed__article--1--content {
  position: absolute;
  width: 100%;
  padding: 4.5rem;
  left: 0;
  bottom: 0;
}
@media only screen and (max-width: 75em) {
  .feed__article--1--content {
    padding: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--1--content {
    padding: 3rem;
  }
}
.feed__article--1--heading {
  font-size: 2.5rem;
  font-family: upbolters;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 75em) {
  .feed__article--1--heading {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .feed__article--1--heading {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--1--heading {
    font-size: 2.25rem;
  }
}
.feed__article--1--text {
  font-size: 1.3rem;
  line-height: 1.4;
}
@media only screen and (max-width: 56.25em) {
  .feed__article--1--text {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--1--text {
    font-size: 1.4rem;
  }
}
.feed__article--2 {
  text-decoration: none;
  color: #fff;
  background-size: cover;
  height: 47.5%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  position: relative;
  transition: all 0.2s;
}
@media only screen and (max-width: 56.25em) {
  .feed__article--2 {
    height: 100%;
  }
  .feed__article--2:first-child {
    margin-bottom: 5rem;
  }
}
@media only screen and (max-width: 56.25em) and (max-width: 37.5em) {
  .feed__article--2:first-child {
    margin-bottom: 2.5rem;
  }
}
.feed__article--2:hover {
  transform: translateY(-0.65rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.feed__article--2 .tag {
  position: absolute;
  left: 4.5rem;
  top: 3.5rem;
}
@media only screen and (max-width: 75em) {
  .feed__article--2 .tag {
    left: 3rem;
    top: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--2 .tag {
    top: 3rem;
    left: 3rem;
  }
}
.feed__article--2--content {
  position: absolute;
  width: 100%;
  padding: 4.5rem;
  left: 0;
  bottom: 0;
}
@media only screen and (max-width: 75em) {
  .feed__article--2--content {
    padding: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--2--content {
    padding: 3rem;
  }
}
.feed__article--2--heading {
  font-size: 2.5rem;
  font-weight: 500;
  font-family: upbolters;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 75em) {
  .feed__article--2--heading {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .feed__article--2--heading {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--2--heading {
    font-size: 2.25rem;
  }
}
.feed__article--2--text {
  font-size: 1.3rem;
  line-height: 1.4;
}
@media only screen and (max-width: 56.25em) {
  .feed__article--2--text {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .feed__article--2--text {
    font-size: 1.4rem;
  }
}

/* FEED SECTION END */
/* ABOUT SECTION START */
.about {
  padding: 2.5rem 10rem 12.5rem 5rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .about {
    padding: 5rem 8rem 12.5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .about {
    padding: 5rem 4rem 12.5rem 4rem;
  }
}
.about__text {
  font-size: 1.4rem;
  margin: 2.5rem 0;
  width: 60%;
  margin-bottom: 5rem;
}
@media only screen and (max-width: 75em) {
  .about__text {
    width: 80%;
  }
}
@media only screen and (max-width: 56.25em) {
  .about__text {
    font-size: 1.6rem;
    width: 100%;
  }
}
@media only screen and (max-width: 37.5em) {
  .about__text {
    font-size: 1.4rem;
    width: 100%;
  }
}
.about__container {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 56.25em) {
  .about__container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.about__box {
  width: 27.5%;
  margin: 3.5rem;
}
@media only screen and (max-width: 56.25em) {
  .about__box {
    width: 60%;
    margin: 2rem 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .about__box {
    width: 80%;
  }
}
.about__icon {
  width: 12.5rem;
  height: 12.5rem;
  fill: #cc3524;
}
@media only screen and (max-width: 37.5em) {
  .about__icon {
    width: 10rem;
    height: 10rem;
  }
}
.about__heading {
  color: #fff;
  font-size: 2.75rem;
  line-height: 1.1;
}

/* ABOUT SECTION END */
/*PARTNERS SECTION START*/
.partners {
  padding: 2.5rem 5rem 12.5rem 5rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 56.25em) {
  .partners {
    padding: 5rem 8rem 12.5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .partners {
    padding: 5rem 4rem 12.5rem 4rem;
  }
}
.partners__container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 2.5rem 0 6.5rem 0;
  width: 100%;
  justify-content: center;
}
@media only screen and (max-width: 75em) {
  .partners__container {
    width: 80%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 5rem 0 10rem 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .partners__container {
    width: 100%;
    margin: 2.5rem 0 7.5rem 0;
  }
}
.partners__item {
  height: 6rem;
}
@media only screen and (max-width: 87.5em) {
  .partners__item {
    height: 6.25rem;
  }
}
@media only screen and (max-width: 75em) {
  .partners__item {
    height: 7rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .partners__item {
    height: 6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .partners__item {
    height: 4.5rem;
  }
}
@media only screen and (max-width: 20em) {
  .partners__item {
    height: 3.5rem;
  }
}
.partners__item:not(:last-child) {
  margin-right: 7.5%;
}
@media only screen and (max-width: 75em) {
  .partners__item:not(:last-child) {
    margin-right: 0;
    margin-bottom: 5rem;
  }
}
.partners__img {
  height: 80%;
}
@media only screen and (max-width: 75em) {
  .partners__img {
    height: 100%;
  }
}
.partners__img--100 {
  height: 100%;
}

/*PARTNERS SECTION END*/
/* TEAM HEADER START */
.company-header {
  background-image: linear-gradient(180deg, rgba(2, 44, 67, 0.5) 0%, #1b2b4c 100%), url(../images/csgo-1.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 30vh;
  overflow: hidden;
  position: relative;
}
.company-header__content {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0 10rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  transform: translateY(-50%);
}
@media only screen and (max-width: 56.25em) {
  .company-header__content {
    padding: 0 8rem;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 56.25em) {
  .company-header__title {
    text-align: center;
  }
}
.company-header__title__name {
  font-size: 6rem;
  font-family: upbolters;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
}
@media only screen and (max-width: 56.25em) {
  .company-header__title__name {
    font-size: 5rem;
    text-align: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .company-header__title__name {
    font-size: 4.5rem;
  }
}
@media only screen and (max-width: 20em) {
  .company-header__title__name {
    font-size: 4rem;
    line-height: 1.1;
  }
}
.company-header__title__desc {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  width: 75%;
}

/* TEAM HEADER END */
.company {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0rem 10rem 5rem 10rem;
  /* COMPANY ABOUT START */
  /* COMPANY ABOUT END */
}
@media only screen and (max-width: 56.25em) {
  .company {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .company {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.company__link {
  display: none;
}
.company__link:checked + .company__label + .company__tab {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.company__link:checked + .company__label {
  color: #fff;
  font-weight: 900;
  border-bottom: 2px solid #fff;
}
.company__label {
  color: rgba(255, 255, 255, 0.5);
  padding: 1rem 2rem;
  font-size: 1.3rem;
}
.company__tab {
  width: 100%;
  display: none;
  order: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.company__paragraph {
  font-size: 1.5rem;
  line-height: 1.4;
}
.company__about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.company__article {
  margin: 6.5rem 0;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.company__article p {
  margin: 4rem 0;
}
.company__article__img-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
@media only screen and (max-width: 56.25em) {
  .company__article__img-box {
    flex-direction: column;
  }
}
.company__article__img {
  width: 32.5%;
}
@media only screen and (max-width: 56.25em) {
  .company__article__img {
    width: 100%;
  }
  .company__article__img:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.company__socials {
  display: flex;
  margin-top: 1rem;
}
.company__socials__link {
  border: 2px solid #cc3524;
  border-radius: 50%;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cc3524;
  transition: all 0.2s;
}
.company__socials__link:not(:last-child) {
  margin-right: 2rem;
}
.company__socials__link:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}
.company__socials__icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}
.company .partners {
  margin-top: 5rem;
}

/* PARTNERS SECTION START */
.partners2 {
  padding: 5rem 0;
}
@media only screen and (max-width: 56.25em) {
  .partners2 {
    text-align: center;
  }
}
.partners2__paragraph {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 2rem 0;
}
.partners2__panel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5rem;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (max-width: 75em) {
  .partners2__panel {
    padding: 3.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .partners2__panel {
    flex-direction: column;
    text-align: center;
  }
}
.partners2__panel:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 5rem;
}
.partners2__panel h2 {
  line-height: 1;
}
.partners2__panel p {
  margin: 3rem 0 4rem 0;
}
@media only screen and (max-width: 56.25em) {
  .partners2__panel p {
    margin: 2rem 0 2.6rem 0;
  }
}
.partners2__info {
  width: 42.5%;
}
@media only screen and (max-width: 75em) {
  .partners2__info {
    width: 45%;
  }
}
@media only screen and (max-width: 56.25em) {
  .partners2__info {
    width: 100%;
  }
}
.partners2__logo-box {
  background-image: linear-gradient(180deg, rgba(38, 61, 108, 0.75) 0%, rgba(38, 61, 108, 0.75) 100%), url(../images/csgo-1.jpg);
  background-size: cover;
  background-position: center;
  width: 47.5%;
  height: 27.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .partners2__logo-box {
    width: 100%;
    margin-top: 5rem;
  }
}
.partners2__logo {
  width: 35%;
}

/* PARTNERS SECTION END */
.contact {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 56.25em) {
  .contact {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .contact {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.contact__form {
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  width: 100%;
}
.contact__form h1 {
  margin-bottom: 1rem;
}
.contact__form__row {
  width: 100%;
  margin-top: 2.5rem;
}
.contact__form__row--50 {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .contact__form__row--50 {
    flex-direction: column;
  }
}
.contact__form__col--50 {
  width: 49%;
}
@media only screen and (max-width: 37.5em) {
  .contact__form__col--50 {
    width: 100%;
  }
  .contact__form__col--50:not(:first-child) {
    margin-top: 2.5rem;
  }
}
.contact__form__label {
  font-weight: 700;
}
.contact__form__input, .contact__form__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.25rem 2rem;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-size: 1.3rem;
}
.contact__form__input:focus, .contact__form__select:focus {
  border: 0.2rem solid #45AF42;
}
.contact__form__input:focus:invalid, .contact__form__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.contact__form__input:invalid, .contact__form__select:invalid {
  border: 0.2rem solid #cc3524;
}
.contact__form__textarea {
  font-family: inherit;
  resize: none;
  font-size: 1.3rem;
}
.contact__form button {
  margin-top: 3.5rem;
}
.contact__form__link {
  font-weight: 500;
  color: #cc3524;
  text-decoration: underline;
  transition: all 0.2s;
}
.contact__form__link:hover {
  color: #ccc;
}
.contact__form__checkbox {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  position: relative;
}
.contact__form__checkbox .contact__form__text {
  margin-left: 3.5rem;
}
.contact__form__checkbox__box {
  position: absolute;
  opacity: 0;
  z-index: 99;
  cursor: pointer;
  height: 2rem;
  width: 2rem;
}
.contact__form__checkbox__mark {
  position: absolute;
  z-index: 0;
  height: 1.7rem;
  border-radius: 0;
  width: 1.7rem;
  background-color: #fff;
}
.contact__form__checkbox__mark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 3px;
  width: 6.25px;
  height: 10px;
  border: solid #1b2b4c;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.contact__form__checkbox:hover input ~ .contact__form__checkbox__mark {
  background-color: #ccc;
}
.contact__form__checkbox input:checked ~ .contact__form__checkbox__mark {
  background-color: #cc3524;
}
.contact__form__checkbox input:checked ~ .contact__form__checkbox__mark:after {
  display: block;
}

.games {
  width: 100%;
  padding: 7rem 10rem 10rem 10rem;
  text-align: center;
}
@media only screen and (max-width: 56.25em) {
  .games {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .games {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.games h1 {
  text-align: left;
}
.games__box {
  text-align: left;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0 4rem 0;
  flex-wrap: wrap;
}
@media only screen and (max-width: 56.25em) {
  .games__box {
    flex-direction: column;
  }
}
.games__panel {
  flex: 0 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 31.5%;
  height: 55rem;
  border-radius: 0;
  color: #fff;
  text-decoration: none;
  position: relative;
  line-height: 1.2;
  transition: all 0.2s;
  overflow: hidden;
  transform: translateY(0);
}
@media only screen and (max-width: 56.25em) {
  .games__panel {
    width: 100%;
  }
  .games__panel:not(:last-child) {
    margin-bottom: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .games__panel {
    height: 32.5rem;
  }
}
.games__panel:hover {
  transform: translateY(-0.65rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.games__panel .tag {
  position: absolute;
  top: 3.5rem;
  left: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .games__panel .tag {
    top: 2.25rem;
    left: 2.5rem;
  }
}
.games__panel__content {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5rem 5rem 4rem 5rem;
  width: 100%;
}
@media only screen and (max-width: 37.5em) {
  .games__panel__content {
    padding: 5rem 2rem 3rem 2rem;
  }
}
.games__panel__title {
  font-size: 3.5rem;
  font-weight: 900;
  color: inherit;
  font-family: upbolters;
  text-transform: uppercase;
}
@media only screen and (max-width: 56.25em) {
  .games__panel__title {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .games__panel__title {
    font-size: 2.25rem;
  }
}
.games__panel__palette {
  display: flex;
  width: 100%;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  margin-top: 2rem;
  padding-top: 2rem;
}
.games__panel__palette__box {
  display: flex;
  background-color: #1b2b4c;
  border: 0.2rem solid #cc3524;
  border-radius: 0;
  padding: 1.25rem 1.15rem;
  align-items: center;
  justify-content: center;
}
.games__panel__palette__box:not(:last-child) {
  margin-right: 1.5rem;
}
@media only screen and (max-width: 56.25em) {
  .games__panel__palette__box:not(:last-child) {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .games__panel__palette__box:not(:last-child) {
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .games__panel__palette__box {
    padding: 1.25rem 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .games__panel__palette__box {
    padding: 1.25rem 1rem;
  }
}
@media only screen and (max-width: 20em) {
  .games__panel__palette__box {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    align-items: unset;
  }
}
.games__panel__palette__icon {
  width: 3rem;
  height: 3rem;
  fill: #fff;
  margin-right: 0.75rem;
}
@media only screen and (max-width: 56.25em) {
  .games__panel__palette__icon {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .games__panel__palette__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.5rem;
  }
}
.games__panel__palette__icon-solo {
  width: 3rem;
  height: 3rem;
  fill: #fff;
}
.games__panel__palette__title {
  color: #cc3524;
  font-size: 1.2rem;
}
.games__panel__palette__answer {
  font-size: 1.4rem;
  font-weight: 700;
}
@media only screen and (max-width: 37.5em) {
  .games__panel__palette__answer {
    font-size: 1.2rem;
  }
}

.news {
  width: 100%;
  padding: 7rem 10rem 10rem 10rem;
  text-align: center;
}
@media only screen and (max-width: 56.25em) {
  .news {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .news {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.news h1 {
  text-align: left;
}
.news__box {
  text-align: left;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0 4rem 0;
  flex-wrap: wrap;
}
@media only screen and (max-width: 56.25em) {
  .news__box {
    flex-direction: column;
  }
}
.news__panel {
  flex: 0 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 31.5%;
  height: 50rem;
  border-radius: 0;
  color: #fff;
  text-decoration: none;
  position: relative;
  line-height: 1.2;
  transition: all 0.2s;
  overflow: hidden;
  transform: translateY(0);
}
@media only screen and (max-width: 75em) {
  .news__panel {
    width: 100%;
    height: 45rem;
  }
  .news__panel:not(:last-child) {
    margin-bottom: 5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .news__panel {
    width: 100%;
    height: 40rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .news__panel {
    height: 32.5rem;
  }
}
.news__panel:hover {
  transform: translateY(-0.65rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.news__panel .tag {
  position: absolute;
  top: 3.5rem;
  left: 3.5rem;
}
@media only screen and (max-width: 37.5em) {
  .news__panel .tag {
    top: 2.25rem;
    left: 2.5rem;
  }
}
.news__panel__content {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5rem 3.5rem 4rem 3.5rem;
  width: 100%;
}
@media only screen and (max-width: 37.5em) {
  .news__panel__content {
    padding: 5rem 2rem 3rem 2rem;
  }
}
.news__panel__title {
  font-size: 2.25rem;
  color: inherit;
  font-family: upbolters;
  text-transform: uppercase;
  font-weight: 400;
}
@media only screen and (max-width: 56.25em) {
  .news__panel__title {
    font-size: 1.75rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .news__panel__title {
    font-size: 1.75rem;
  }
}
.news__panel__article {
  font-size: 1.3rem;
  margin-top: 1rem;
}

/*ARTICLE PAGE START*/
.artheader {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
}
.artheader__content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 10rem;
}
@media only screen and (max-width: 75em) {
  .artheader__content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .artheader__content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .artheader__content {
    padding: 0 4rem;
  }
}
.artheader__title {
  font-size: 6rem;
  text-transform: uppercase;
  font-weight: 400;
  font-family: upbolters;
}
@media only screen and (max-width: 37.5em) {
  .artheader__title {
    font-size: 4.5rem;
  }
}
.artheader__details {
  font-size: 1.4rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
}

.article {
  width: 100%;
  padding: 0 10rem;
  font-size: 1.4rem;
  line-height: 1.4;
}
@media only screen and (max-width: 75em) {
  .article {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .article {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .article {
    padding: 0 4rem;
  }
}
.article__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article__body:not(:first-child) {
  margin-top: 5rem;
}
.article__body:not(:last-child) {
  margin-bottom: 5rem;
}
.article__body__img {
  width: 50%;
  text-align: center;
}
@media only screen and (max-width: 75em) {
  .article__body__img {
    width: 100%;
  }
}

.share-article {
  padding: 0 10rem;
  margin-top: 5rem;
}
@media only screen and (max-width: 75em) {
  .share-article {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .share-article {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .share-article {
    padding: 0 4rem;
  }
}
.share-article__content {
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.share-article__text {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.share-article__btns {
  display: flex;
}
.share-article__link {
  border: 2px solid #cc3524;
  border-radius: 50%;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cc3524;
  transition: all 0.2s;
}
.share-article__link:not(:last-child) {
  margin-right: 2rem;
}
.share-article__link:hover {
  background-color: rgba(204, 53, 36, 0.5);
  color: #fff;
}
.share-article__icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}

/*ARTICLE PAGE END*/
/* TOURNAMENTS SECTION START */
.tournaments {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
  text-align: center;
}
@media only screen and (max-width: 75em) {
  .tournaments {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.tournaments h1 {
  text-align: left;
}
.tournaments__box {
  text-align: left;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0 4rem 0;
  flex-wrap: wrap;
}
@media only screen and (max-width: 56.25em) {
  .tournaments__box {
    flex-direction: column;
  }
}
.tournaments__panel {
  flex: 0 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 49%;
  height: 35rem;
  border-radius: 0;
  color: #fff;
  text-decoration: none;
  position: relative;
  line-height: 1.2;
  transition: all 0.2s;
  overflow: hidden;
  transform: translateY(0);
  margin: 1.5rem 0;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel {
    height: 30rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel {
    width: 100%;
    height: 35rem;
  }
  .tournaments__panel:not(:last-child) {
    margin-bottom: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel {
    height: 32.5rem;
  }
  .tournaments__panel:not(:last-child) {
    margin-bottom: 1rem;
  }
}
.tournaments__panel:hover {
  transform: translateY(-0.65rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.tournaments__panel .tag {
  position: absolute;
  top: 3.5rem;
  left: 5rem;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel .tag {
    top: 2.5rem;
    left: 2.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel .tag {
    left: 50%;
    transform: translateX(-50%);
  }
}
.tournaments__panel--content {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5rem 5rem 4rem 5rem;
  width: 100%;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--content {
    padding: 2.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel--content {
    text-align: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel--content {
    padding: 5rem 2rem 3rem 2rem;
  }
}
.tournaments__panel--date {
  font-size: 1.6rem;
  font-weight: 500;
  color: inherit;
}
.tournaments__panel--title {
  font-size: 2.8rem;
  font-weight: 500;
  font-family: upbolters;
  text-transform: uppercase;
  color: inherit;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--title {
    font-size: 2.25rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel--title {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel--title {
    font-size: 2.25rem;
  }
}
.tournaments__panel--game {
  font-size: 1.7rem;
  color: #faf9f9;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--game {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel--game {
    font-size: 1.5rem;
  }
}
.tournaments__panel--pallete {
  display: flex;
  width: 100%;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  margin-top: 2rem;
  padding-top: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel--pallete {
    justify-content: center;
  }
}
.tournaments__panel--pallete--box {
  display: flex;
  background-color: #1b2b4c;
  border: 0.1rem solid #cc3524;
  border-radius: 0;
  padding: 1.25rem 1.15rem;
  align-items: center;
  justify-content: center;
}
.tournaments__panel--pallete--box:not(:last-child) {
  margin-right: 1.5rem;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--pallete--box:not(:last-child) {
    margin-right: 0.75rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel--pallete--box:not(:last-child) {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel--pallete--box:not(:last-child) {
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--pallete--box {
    padding: 1rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel--pallete--box {
    padding: 1.25rem 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel--pallete--box {
    padding: 1.25rem 1rem;
  }
}
@media only screen and (max-width: 20em) {
  .tournaments__panel--pallete--box {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    align-items: unset;
  }
}
.tournaments__panel--pallete--icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: #fff;
  margin-right: 0.75rem;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--pallete--icon {
    width: 2rem;
    height: 2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .tournaments__panel--pallete--icon {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel--pallete--icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.5rem;
  }
}
.tournaments__panel--pallete--icon-solo {
  width: 3rem;
  height: 3rem;
  fill: #fff;
}
.tournaments__panel--pallete--title {
  color: #cc3524;
  font-size: 1.2rem;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--pallete--title {
    font-size: 1rem;
  }
}
.tournaments__panel--pallete--answer {
  font-size: 1.4rem;
  font-weight: 700;
}
@media only screen and (max-width: 75em) {
  .tournaments__panel--pallete--answer {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .tournaments__panel--pallete--answer {
    font-size: 1.2rem;
  }
}

/* TOURNAMENTS SECTION END */
/*TOURNAMENTS PAGE STYLING START*/
.theader {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 40vh;
  overflow: hidden;
  position: relative;
}
.theader__content {
  position: absolute;
  bottom: 10%;
  left: 0;
  padding: 0 10rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
@media only screen and (max-width: 75em) {
  .theader__content {
    padding: 0rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .theader__content {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .theader__content {
    padding: 4rem 4rem 5rem 4rem;
    flex-direction: column;
  }
}
@media only screen and (max-width: 56.25em) {
  .theader button {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .theader .btn {
    width: 80%;
  }
}
.theader__title {
  width: 40%;
}
@media only screen and (max-width: 75em) {
  .theader__title {
    width: 50%;
  }
}
@media only screen and (max-width: 56.25em) {
  .theader__title {
    width: 50%;
  }
}
@media only screen and (max-width: 37.5em) {
  .theader__title {
    width: 90%;
  }
}
.theader__title__badge {
  width: 100%;
}
@media only screen and (max-width: 37.5em) {
  .theader__title__badge {
    margin-bottom: 5rem;
  }
}
.theader__title__type {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 10px;
  font-weight: 900;
}
.theader__title__name {
  font-size: 6rem;
  font-family: upbolters;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
}
@media only screen and (max-width: 75em) {
  .theader__title__name {
    font-size: 5.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .theader__title__name {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .theader__title__name {
    font-size: 4.5rem;
  }
}
.theader__title__date {
  font-size: 1.4rem;
  margin-top: 0.35rem;
}

/*TOURNAMENT TABS START*/
.trnmnt {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 75em) {
  .trnmnt {
    padding: 0rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .trnmnt {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .trnmnt {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.trnmnt__link {
  display: none;
}
.trnmnt__link:checked + .trnmnt__label + .trnmnt__tab {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 75em) {
  .trnmnt__link:checked + .trnmnt__label + .trnmnt__tab {
    flex-direction: column;
  }
}
.trnmnt__link:checked + .trnmnt__label {
  color: #fff;
  font-weight: 900;
  border-bottom: 2px solid #fff;
}
.trnmnt__label {
  color: rgba(255, 255, 255, 0.5);
  padding: 1rem 2rem;
  font-size: 1.3rem;
}
.trnmnt__tab {
  width: 100%;
  display: none;
  order: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.trnmnt__main {
  width: 65%;
}
@media only screen and (max-width: 75em) {
  .trnmnt__main {
    width: 100%;
  }
}
.trnmnt__main__section {
  padding: 4rem 0;
}
.trnmnt__main__section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.trnmnt__aside {
  width: 30%;
}
@media only screen and (max-width: 75em) {
  .trnmnt__aside {
    width: 100%;
  }
}
.trnmnt__aside__section {
  padding: 4rem 0 0 0;
}
.trnmnt__tags {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1rem;
}
.trnmnt__tags__box {
  display: flex;
  width: 30%;
  background-color: #1b2b4c;
  border: 0.1rem solid #cc3524;
  border-radius: 0;
  padding: 1.65rem 0rem 1.65rem 2rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 75em) {
  .trnmnt__tags__box {
    width: 45%;
  }
}
.trnmnt__tags__box:not(:last-child) {
  margin-right: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .trnmnt__tags__box:not(:last-child) {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .trnmnt__tags__box:not(:last-child) {
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .trnmnt__tags__box {
    padding: 1.25rem 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .trnmnt__tags__box {
    padding: 1.25rem 1rem;
  }
}
@media only screen and (max-width: 20em) {
  .trnmnt__tags__box {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    align-items: unset;
  }
}
.trnmnt__tags__icon {
  display: flex;
  width: 4rem;
  height: 4rem;
  fill: #fff;
  margin-right: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .trnmnt__tags__icon {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .trnmnt__tags__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.5rem;
  }
}
.trnmnt__tags__icon-solo {
  width: 3rem;
  height: 3rem;
  fill: #fff;
}
.trnmnt__tags__title {
  color: #cc3524;
  font-size: 1.4rem;
  font-weight: 700;
}
.trnmnt__tags__answer {
  font-size: 1.75rem;
  font-weight: 300;
}
@media only screen and (max-width: 37.5em) {
  .trnmnt__tags__answer {
    font-size: 1.2rem;
  }
}
.trnmnt h2 {
  margin-bottom: 2rem;
}
.trnmnt__paragraph {
  font-size: 1.4rem;
}
.trnmnt__list {
  list-style: circle;
  font-size: 1.4rem;
}
.trnmnt__list li {
  list-style-position: inside;
}
.trnmnt__region {
  display: flex;
  align-items: center;
}
.trnmnt__region__flag {
  width: 4rem;
  margin-right: 2rem;
}
.trnmnt__participants {
  padding: 2.5rem;
  text-align: center;
  border: 1px solid #cc3524;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 75em) {
  .trnmnt__participants {
    justify-content: center;
    padding: 2rem;
  }
}
.trnmnt__participants__item {
  font-size: 1.4rem;
}
@media only screen and (max-width: 75em) {
  .trnmnt__participants__item:not(:last-child) {
    margin-right: 4rem;
  }
}
.trnmnt__participants__title {
  color: #cc3524;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.trnmnt__participants__answer {
  font-size: 1.8rem;
}
.trnmnt__schedule {
  padding: 1rem 4rem;
  border: 1px solid #cc3524;
}
@media only screen and (max-width: 75em) {
  .trnmnt__schedule {
    padding: 1rem 5rem;
  }
}
.trnmnt__schedule__paragraph {
  padding: 2rem 0;
  font-size: 1.4rem;
  color: #cc3524;
}
.trnmnt__schedule__paragraph:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.trnmnt__schedule__paragraph strong {
  color: #fff;
}
.trnmnt__winners {
  padding: 1rem 4rem;
  border: 1px solid #cc3524;
}
.trnmnt__winners__item {
  padding: 2rem 0;
  font-size: 1.4rem;
}
.trnmnt__winners__item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.trnmnt__winners__link {
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
}
.trnmnt__winners__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 1rem;
}

/*TOURNAMENT TABS END*/
/*TOURNAMENT OVERVIEW PAGE START*/
/*TOURNAMENT OVERVIEW PAGE END*/
/*TOURNAMENTS PAGE  STYLING END*/
/* REGISTRATION PAGE START */
.register {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 56.25em) {
  .register {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .register {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.register__form {
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  width: 100%;
}
.register__form h2 {
  margin-bottom: 1rem;
}
.register__form__section {
  padding: 2.5rem 0 4rem 0;
}
.register__form__section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.register__paragraph {
  color: rgba(255, 255, 255, 0.5);
}
.register__row {
  width: 100%;
  margin-top: 2.5rem;
}
.register__row--50 {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .register__row--50 {
    flex-direction: column;
  }
}
.register__label {
  font-weight: 700;
}
.register__input, .register__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin: 3rem 0 0.5rem 0;
  padding: 1.25rem 2rem;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-size: 1.3rem;
}
.register__input:focus, .register__select:focus {
  border: 0.2rem solid #45AF42;
}
.register__input:focus:invalid, .register__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.register__input:invalid, .register__select:invalid {
  border: 0.2rem solid #cc3524;
}
.register button {
  margin-top: 3.5rem;
}
.register__checkbox {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  position: relative;
}
.register__checkbox .register__text {
  margin-left: 3.5rem;
}
.register__checkbox__box {
  position: absolute;
  opacity: 0;
  z-index: 99;
  cursor: pointer;
  height: 2rem;
  width: 2rem;
}
.register__checkbox__mark {
  position: absolute;
  z-index: 0;
  height: 1.7rem;
  border-radius: 0;
  width: 1.7rem;
  background-color: #fff;
}
.register__checkbox__mark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 3px;
  width: 6.25px;
  height: 10px;
  border: solid #1b2b4c;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.register__checkbox:hover input ~ .register__checkbox__mark {
  background-color: #ccc;
}
.register__checkbox input:checked ~ .register__checkbox__mark {
  background-color: #cc3524;
}
.register__checkbox input:checked ~ .register__checkbox__mark:after {
  display: block;
}

/* REGISTRATION PAGE END */
/* LEAGUE TABLE START */
.leaderboard {
  padding: 5rem 0;
  width: 100%;
  font-size: 1.4rem;
}
.leaderboard__table {
  width: 100%;
}
.leaderboard__table tr {
  transition: all 0.2s;
  cursor: pointer;
}
.leaderboard__table th, .leaderboard__table td {
  padding: 1rem;
  text-align: center;
}
.leaderboard__table__headrow {
  background-color: #cc3524;
  color: #1b2b4c;
}
.leaderboard__table__head {
  font-family: upbolters;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 400;
}
.leaderboard__table__row {
  background-color: #fff;
  color: #1b2b4c;
  font-weight: 500;
}
.leaderboard__table__row:nth-child(-n+16) {
  background-color: yellow;
}
.leaderboard__table__row:hover {
  background-color: #ccc;
  box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.4);
  transform: scale(1.01);
}

/* LEAGUE TABLE END */
/* PARTICIPANTS START */
.participants {
  display: flex;
  padding: 5rem 0;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.participants__box {
  width: 14rem;
  text-align: center;
  background-color: #cc3524;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 37.5em) {
  .participants__box {
    width: 11.25rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 20em) {
  .participants__box {
    width: 9rem;
  }
}
.participants__img {
  width: 100%;
}
.participants__name {
  font-size: 1.2rem;
  margin: 1rem 0;
  font-weight: 700;
}
@media only screen and (max-width: 37.5em) {
  .participants__name {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 20em) {
  .participants__name {
    font-size: 0.85rem;
  }
}

/* PARTICIPANTS END */
/* FIXTURES START */
.fifafix__section, .fifares__section {
  padding: 2.5rem 0;
  width: 100%;
}

.trnmnt__fifafix, .trnmnt__fifares {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media only screen and (max-width: 56.25em) {
  .trnmnt__fifafix, .trnmnt__fifares {
    flex-direction: column;
  }
}

.fifafix, .fifares {
  width: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 2.5rem 0;
  box-shadow: none;
  transition: 0.2s;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .fifafix, .fifares {
    flex-direction: column;
    width: 100%;
  }
}
.fifafix:hover, .fifares:hover {
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.fifafix__text, .fifares__text {
  font-size: 2rem;
  font-family: upbolters;
  text-transform: uppercase;
}
.fifafix__match, .fifares__match {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0 2rem 0;
}
.fifafix__match p:not(:last-child), .fifares__match p:not(:last-child) {
  margin-right: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .fifafix__match p:not(:last-child), .fifares__match p:not(:last-child) {
    margin-right: 0.25rem;
  }
}
.fifafix__score, .fifares__score {
  font-size: 2rem;
  font-family: upbolters;
  text-transform: uppercase;
  color: #cc3524;
}
.fifafix__player, .fifares__player {
  font-size: 3rem;
  font-family: upbolters;
  text-transform: uppercase;
}
@media only screen and (max-width: 56.25em) {
  .fifafix__player, .fifares__player {
    font-size: 2rem;
  }
}
.fifafix__buttons, .fifares__buttons {
  display: flex;
}
.fifafix__buttons a:not(:last-child), .fifares__buttons a:not(:last-child) {
  margin-right: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .fifafix__buttons a:not(:last-child), .fifares__buttons a:not(:last-child) {
    margin-right: 1rem;
  }
}

/* FIXTURES END */
.sign-up {
  display: flex;
  width: 100vw;
  height: 100vh;
}
@media only screen and (max-width: 37.5em) {
  .sign-up {
    height: auto;
  }
}
.sign-up__container {
  background-color: #1b2b4c;
  flex: 0 0 auto;
  width: 117rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 75em) {
  .sign-up__container {
    width: 100%;
  }
}
@media only screen and (max-width: 37.5em) {
  .sign-up__container {
    padding: 10rem 0;
  }
}
.sign-up__form {
  font-size: 1.6rem;
  color: #fff;
  width: 70%;
}
@media only screen and (max-width: 37.5em) {
  .sign-up__form {
    width: 75%;
  }
}
.sign-up__heading {
  font-size: 3.5rem;
  font-family: upbolters;
  text-transform: uppercase;
  font-weight: 400;
}
.sign-up__text {
  font-weight: 500;
}
.sign-up__link {
  font-weight: 500;
  color: #cc3524;
  text-decoration: underline;
  transition: all 0.2s;
}
.sign-up__link:hover {
  color: #ccc;
}
.sign-up__row {
  margin-top: 2.5rem;
  width: 100%;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .sign-up__row {
    flex-direction: column;
  }
}
.sign-up__col--50 {
  width: 49%;
}
@media only screen and (max-width: 37.5em) {
  .sign-up__col--50 {
    width: 100%;
  }
  .sign-up__col--50:not(:first-child) {
    margin-top: 2.5rem;
  }
}
.sign-up__input, .sign-up__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.25rem 2rem;
  border-radius: 0;
  color: #fff;
  outline: none;
}
.sign-up__input:focus, .sign-up__select:focus {
  border: 0.2rem solid #45AF42;
}
.sign-up__input:focus:invalid, .sign-up__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.sign-up__input:invalid, .sign-up__select:invalid {
  border: 0.2rem solid #cc3524;
}
.sign-up input[type=date] {
  color: #fff;
  font-family: "Roboto", sans-serif;
}
.sign-up ::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.sign-up__checkbox {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  position: relative;
}
.sign-up__checkbox .sign-up__text {
  margin-left: 3.5rem;
}
.sign-up__checkbox__box {
  position: absolute;
  opacity: 0;
  z-index: 99;
  cursor: pointer;
  height: 2rem;
  width: 2rem;
}
.sign-up__checkbox__mark {
  position: absolute;
  z-index: 0;
  height: 1.7rem;
  border-radius: 0;
  width: 1.7rem;
  background-color: #fff;
}
.sign-up__checkbox__mark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 3px;
  width: 6.25px;
  height: 10px;
  border: solid #1b2b4c;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.sign-up__checkbox:hover input ~ .sign-up__checkbox__mark {
  background-color: #ccc;
}
.sign-up__checkbox input:checked ~ .sign-up__checkbox__mark {
  background-color: #cc3524;
}
.sign-up__checkbox input:checked ~ .sign-up__checkbox__mark:after {
  display: block;
}
.sign-up__btn {
  color: #fff;
  background: #cc3524;
  transition: all 0.2s;
  transform: translateY(0);
  box-shadow: none;
  outline: none;
  padding: 1.35rem 5rem;
  border: none;
  margin-top: 3rem;
  border: 2px solid #cc3524;
}
@media only screen and (max-width: 75em) {
  .sign-up__btn {
    padding: 1.35rem 2rem;
  }
}
.sign-up__btn:hover {
  background: rgba(204, 53, 36, 0.5);
  transform: translateY(-0.25rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.image-overlay {
  width: 100%;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.image-overlay__image {
  width: 20rem;
  position: absolute;
  top: 7.5rem;
  left: 7.5rem;
}

/* TEAM HEADER START */
.team-header {
  background-size: cover;
  width: 100%;
  height: 40vh;
  overflow: hidden;
  position: relative;
}
.team-header--csgo {
  background-image: linear-gradient(180deg, rgba(2, 44, 67, 0.5) 0%, #1b2b4c 100%), url(../images/csgo-1.jpg);
  background-position: center;
}
.team-header--fortnite {
  background-position: center;
  background-image: linear-gradient(180deg, rgba(2, 44, 67, 0.5) 0%, #1b2b4c 100%), url(../images/Fortnite_KeyArt_1080p.0.jpg);
}
.team-header--valorant {
  background-position: center;
  background-image: linear-gradient(180deg, rgba(2, 44, 67, 0.5) 50%, #1b2b4c 100%), url(../images/thumb-1920-1204924.jpg);
}
.team-header__content {
  position: absolute;
  bottom: 10%;
  left: 0;
  padding: 0 10rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
@media only screen and (max-width: 75em) {
  .team-header__content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .team-header__content {
    padding: 0 8rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 37.5em) {
  .team-header__content {
    padding: 0 4rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .team-header__title {
    text-align: center;
  }
}
.team-header__title__name {
  font-size: 6rem;
  font-family: upbolters;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
}
@media only screen and (max-width: 37.5em) {
  .team-header__title__name {
    font-size: 4.5rem;
  }
}
.team-header__title__desc {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  width: 100%;
}

/* TEAM HEADER END */
/* CONTENT START */
.team, .terms {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 75em) {
  .team, .terms {
    padding: 0 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .team, .terms {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .team, .terms {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.team__link, .terms__link {
  display: none;
}
.team__link:checked + .team__label + .team__tab, .team__link:checked + .team__label + .terms__tab, .team__link:checked + .terms__label + .team__tab, .team__link:checked + .terms__label + .terms__tab, .terms__link:checked + .team__label + .team__tab, .terms__link:checked + .team__label + .terms__tab, .terms__link:checked + .terms__label + .team__tab, .terms__link:checked + .terms__label + .terms__tab {
  display: flex;
  justify-content: space-between;
}
.team__link:checked + .team__label, .team__link:checked + .terms__label, .terms__link:checked + .team__label, .terms__link:checked + .terms__label {
  color: #fff;
  font-weight: 900;
  border-bottom: 2px solid #fff;
}
.team__label, .terms__label {
  color: rgba(255, 255, 255, 0.5);
  padding: 1rem 2rem;
  font-size: 1.4rem;
}
.team__tab, .terms__tab {
  width: 100%;
  display: none;
  order: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.team h2, .terms h2 {
  margin-bottom: 2rem;
}
.team__paragraph, .terms__paragraph {
  font-size: 1.4rem;
}
.team__main, .terms__main {
  width: 100%;
}
.team__main__section, .terms__main__section {
  padding: 4rem 0;
}
.team__tag, .terms__tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2.25rem;
  border: 1px solid #fff;
  padding: 0.6rem 0.75rem;
}
.team__tag__text, .terms__tag__text {
  font-family: upbolters;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.4rem;
}
.team__member, .terms__member {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.team__member__panel, .terms__member__panel {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 21.5rem;
  height: 32.5rem;
  position: relative;
  transition: all 0.2s;
  text-decoration: none;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 75em) {
  .team__member__panel, .terms__member__panel {
    width: 17rem;
    height: 26.5rem;
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .team__member__panel, .terms__member__panel {
    width: 100%;
    height: 45rem;
    margin-bottom: 3rem;
  }
}
.team__member__panel:hover, .terms__member__panel:hover {
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}
.team__member__panel:not(:last-child), .terms__member__panel:not(:last-child) {
  margin-right: 2rem;
}
@media only screen and (max-width: 75em) {
  .team__member__panel:not(:last-child), .terms__member__panel:not(:last-child) {
    margin-right: 1.5rem;
  }
}
.team__member__panel a, .terms__member__panel a {
  text-decoration: none;
}
.team__member__panel__content, .terms__member__panel__content {
  width: 100%;
  padding: 0 2rem;
  position: absolute;
  text-align: center;
  bottom: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .team__member__panel__content, .terms__member__panel__content {
    padding: 0 3rem;
    bottom: 3rem;
  }
}
.team__member__panel__head, .terms__member__panel__head {
  font-family: upbolters;
  font-weight: 400;
  font-size: 2.25rem;
  text-transform: uppercase;
  color: #fff;
}
@media only screen and (max-width: 37.5em) {
  .team__member__panel__head, .terms__member__panel__head {
    font-size: 3rem;
  }
}
.team__member__panel__name, .terms__member__panel__name {
  font-size: 1.2rem;
  color: #fff;
  margin: 0.1rem 0 1.25rem 0;
}
.team__member__panel__socials, .terms__member__panel__socials {
  width: 100%;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  padding-top: 1.5rem;
}
.team__member__panel__socials__link, .terms__member__panel__socials__link {
  text-decoration: none;
}
.team__member__panel__socials__link:not(:last-child), .terms__member__panel__socials__link:not(:last-child) {
  margin-right: 1.5rem;
}
@media only screen and (max-width: 37.5em) {
  .team__member__panel__socials__link:not(:last-child), .terms__member__panel__socials__link:not(:last-child) {
    margin-right: 2.5rem;
  }
}
.team__member__panel__socials__icon, .terms__member__panel__socials__icon {
  width: 2rem;
  height: 2rem;
  fill: #fff;
  transition: all 0.2s;
}
@media only screen and (max-width: 75em) {
  .team__member__panel__socials__icon, .terms__member__panel__socials__icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .team__member__panel__socials__icon, .terms__member__panel__socials__icon {
    width: 2.75rem;
    height: 2.75rem;
  }
}
.team__member__panel__socials__icon:hover, .terms__member__panel__socials__icon:hover {
  fill: #cc3524;
}
.team .upcoming, .terms .upcoming {
  padding: 4rem 0;
  width: 100%;
}

/* CONTENT END */
.login {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.login__container {
  background-color: #1b2b4c;
  flex: 0 0 auto;
  width: 75rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 75em) {
  .login__container {
    width: 100%;
  }
}
.login__form {
  font-size: 1.6rem;
  color: #fff;
  width: 60%;
}
@media only screen and (max-width: 37.5em) {
  .login__form {
    width: 75%;
  }
}
.login__heading {
  font-size: 3.5rem;
  font-family: upbolters;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 20em) {
  .login__heading {
    font-size: 3rem;
  }
}
.login__text {
  font-weight: 500;
}
.login__link {
  font-weight: 500;
  color: #cc3524;
  text-decoration: underline;
  transition: all 0.2s;
}
.login__link:hover {
  color: #ccc;
}
.login__forgot {
  text-align: right;
  width: 100%;
  margin: 2.5rem 0;
}
.login__row {
  margin-top: 2.5rem;
  width: 100%;
  font-weight: 700;
}
.login__input {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.25rem 2rem;
  border-radius: 0;
  color: #fff;
  outline: none;
}
.login__input:focus {
  border: 0.2rem solid #45AF42;
}
.login__input:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.login__input:invalid {
  border: 0.2rem solid #cc3524;
}
.login__btn {
  color: #fff;
  background: #cc3524;
  transition: all 0.2s;
  transform: translateY(0);
  box-shadow: none;
  outline: none;
  padding: 1.35rem 0;
  border: 2px solid #cc3524;
  width: 100%;
  margin-top: 1rem;
}
@media only screen and (max-width: 75em) {
  .login__btn {
    padding: 1.35rem 0;
  }
}
.login__btn:hover {
  background: rgba(204, 53, 36, 0.5);
  transform: translateY(-0.25rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.image-overlay {
  width: 100%;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 75em) {
  .image-overlay {
    display: none;
  }
}
.image-overlay__image {
  width: 10rem;
  position: absolute;
  top: 7.5rem;
  left: 7.5rem;
}

.user-edit {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 56.25em) {
  .user-edit {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-edit {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.user-edit__form {
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  width: 100%;
}
.user-edit__form h2 {
  margin-bottom: 1rem;
}
.user-edit__form__section {
  padding: 2.5rem 0 4rem 0;
}
.user-edit__form__section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.user-edit__paragraph {
  color: rgba(255, 255, 255, 0.5);
}
.user-edit__row {
  width: 100%;
  margin-top: 2.5rem;
}
.user-edit__row--50 {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .user-edit__row--50 {
    flex-direction: column;
  }
}
.user-edit__col--50 {
  width: 49%;
}
@media only screen and (max-width: 37.5em) {
  .user-edit__col--50 {
    width: 100%;
  }
  .user-edit__col--50:not(:first-child) {
    margin-top: 2.5rem;
  }
}
.user-edit__label {
  font-weight: 700;
}
.user-edit__input, .user-edit__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.25rem 2rem;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-size: 1.3rem;
}
.user-edit__input:focus, .user-edit__select:focus {
  border: 0.2rem solid #45AF42;
}
.user-edit__input:focus:invalid, .user-edit__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.user-edit__input:invalid, .user-edit__select:invalid {
  border: 0.2rem solid #cc3524;
}
.user-edit__textarea {
  font-family: inherit;
  resize: none;
  font-size: 1.3rem;
}
.user-edit .btn-icon--gold-outline {
  margin-top: 2.5rem;
}
.user-edit__buttons {
  margin-top: 3.5rem;
}
.user-edit__buttons button:not(:last-child) {
  margin-right: 2rem;
}

/* USER PAGE START */
.user-header {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 40vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-header__content {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 25rem;
  align-items: center;
}
@media only screen and (max-width: 75em) {
  .user-header__content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .user-header__content {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-header__content {
    padding: 0 4rem;
  }
}
.user-header__img-box {
  width: 22.5rem;
  height: 22.5rem;
  margin-bottom: 1rem;
  position: relative;
}
.user-header__ring {
  border: 4px solid #45AF42;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.user-header__img {
  width: 90%;
  border-radius: 50%;
  margin-top: 1.1rem;
}
.user-header__info {
  font-size: 1.2rem;
}
.user-header__upload {
  background-color: #cc3524;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: 50%;
  bottom: 1rem;
  right: 1rem;
  box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.4);
}
.user-header__upload__icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: #1b2b4c;
}

.popup {
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}
.popup:target {
  opacity: 1;
  visibility: visible;
}
.popup:target .popup__content {
  opacity: 1;
  transform: scale(1);
}
.popup__close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  color: #fff;
  text-decoration: none;
}
.popup__icon {
  display: flex;
  fill: #fff;
  width: 2.5rem;
  height: 2.5rem;
}
.popup__content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 60vh;
  background-color: #1b2b4c;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s 0.2s;
}
@media only screen and (max-width: 37.5em) {
  .popup__content {
    width: 75%;
    height: 65vh;
  }
}
.popup__form {
  width: 25rem;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 37.5em) {
  .popup__form {
    width: 20rem;
  }
}
.popup__preview {
  width: 25rem;
  height: 25rem;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  margin-bottom: 2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
@media only screen and (max-width: 37.5em) {
  .popup__preview {
    width: 20rem;
    height: 20rem;
  }
}
.popup__preview__image {
  display: none;
  height: 100%;
}
.popup__preview__close {
  width: 2.5rem;
  height: 2.5rem;
  fill: #cc3524;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
}
.active .popup__preview__close {
  display: block;
}
.popup__preview__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.5);
}
.popup__preview__icon {
  width: 10rem;
  height: 10rem;
  fill: currentColor;
  margin-bottom: 1rem;
}
.popup #uploadbtn {
  display: none;
}
.popup .active .popup__preview__image {
  display: block;
}
.popup .active .popup__preview__no-image {
  display: none;
}
.popup .active #uploadbtn {
  display: block;
}
.popup .active #customUpBtn {
  display: none;
}

.user-info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0rem 10rem 5rem 10rem;
  text-align: center;
}
@media only screen and (max-width: 75em) {
  .user-info {
    padding: 0 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .user-info {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-info {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.user-info__link {
  display: none;
}
.user-info__link:checked + .user-info__label + .user-info__tab {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.user-info__link:checked + .user-info__label {
  color: #fff;
  font-weight: 900;
  border-bottom: 2px solid #fff;
}
.user-info__label {
  color: rgba(255, 255, 255, 0.5);
  padding: 1rem 2rem;
  font-size: 1.4rem;
}
.user-info__label-link {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}
.user-info__tab {
  width: 100%;
  display: none;
  order: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.user-info h2 {
  margin-bottom: 2rem;
}
.user-info__paragraph {
  font-size: 1.4rem;
  line-height: 1.4;
}
.user-info__section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5rem 0;
}
.user-info__socials {
  padding: 5rem 0;
  width: 100%;
}
.user-info__socials__tags {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1rem;
  justify-content: center;
  text-align: left;
}
.user-info__socials__tags__box {
  display: flex;
  width: 18%;
  background-color: #1b2b4c;
  border: 0.1rem solid #cc3524;
  border-radius: 0;
  padding: 1.65rem 2rem 1.65rem 2rem;
  align-items: center;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 75em) {
  .user-info__socials__tags__box {
    width: 45%;
    padding: 1.65rem 2.5rem 1.65rem 2.5rem;
  }
}
.user-info__socials__tags__box:not(:last-child) {
  margin-right: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .user-info__socials__tags__box:not(:last-child) {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-info__socials__tags__box:not(:last-child) {
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .user-info__socials__tags__box {
    padding: 1.25rem 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-info__socials__tags__box {
    padding: 1.25rem 1rem;
  }
}
@media only screen and (max-width: 20em) {
  .user-info__socials__tags__box {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    align-items: unset;
  }
}
.user-info__socials__tags__icon {
  display: flex;
  width: 4rem;
  height: 4rem;
  fill: #fff;
  margin-right: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .user-info__socials__tags__icon {
    width: 3rem;
    height: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .user-info__socials__tags__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.5rem;
  }
}
.user-info__socials__tags__icon-solo {
  width: 3rem;
  height: 3rem;
  fill: #fff;
}
.user-info__socials__tags__title {
  color: #cc3524;
  font-size: 1.4rem;
  font-weight: 700;
}
.user-info__socials__tags__answer {
  font-size: 1.5rem;
  font-weight: 300;
  color: #fff;
}
@media only screen and (max-width: 37.5em) {
  .user-info__socials__tags__answer {
    font-size: 1.2rem;
  }
}

/* USER PAGE END */
/* NOTIFICATIONS START */
.notifications {
  width: 100%;
  padding: 5rem 10rem 10rem 10rem;
}
@media only screen and (max-width: 56.25em) {
  .notifications {
    padding: 5rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .notifications {
    padding: 5rem 4rem 5rem 4rem;
  }
}
.notifications h1 {
  margin-bottom: 5rem;
}
.notifications__container {
  width: 100%;
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.2s;
  cursor: pointer;
}
.notifications__container:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.notifications__container:hover {
  background-color: #142039;
}
@media only screen and (max-width: 37.5em) {
  .notifications__container {
    padding: 2rem;
  }
}
.notifications__icon {
  width: 15rem;
}
@media only screen and (max-width: 75em) {
  .notifications__icon {
    width: 10rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .notifications__icon {
    width: 11rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .notifications__icon {
    display: none;
  }
}
.notifications__img {
  width: 8rem;
  height: 8rem;
}
.notifications__details {
  width: 65%;
}
@media only screen and (max-width: 56.25em) {
  .notifications__details {
    width: 60%;
  }
}
@media only screen and (max-width: 37.5em) {
  .notifications__details {
    width: 65%;
  }
}
.notifications__heading {
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 800;
}
.notifications__text {
  font-size: 1.4rem;
  margin: 0.7rem 0;
}
.notifications__time {
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
}
.notifications__button {
  width: 10%;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

/* NOTIFICATIONS END */
.paw {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 75em) {
  .paw {
    padding: 4rem 7rem 5rem 7rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .paw {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .paw {
    padding: 4rem 4rem 5rem 4rem;
    text-align: center;
  }
}
.paw__form {
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  width: 100%;
}
.paw__form h2 {
  margin-bottom: 1rem;
}
.paw__form__section {
  padding: 2.5rem 0 4rem 0;
}
.paw__form__section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.paw__ui {
  display: flex;
  width: 100%;
  margin: 5rem 0;
}
@media only screen and (max-width: 56.25em) {
  .paw__ui {
    flex-direction: column;
  }
}
.paw__ui__p {
  display: flex;
  flex-direction: column;
  width: 30%;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .paw__ui__p {
    display: none;
  }
}
.paw__ui__pp {
  display: none;
  margin-bottom: 5rem;
}
@media only screen and (max-width: 56.25em) {
  .paw__ui__pp {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.paw__ui__vs {
  display: flex;
  flex-direction: column;
  width: 30%;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .paw__ui__vs {
    order: 3;
    width: 100%;
  }
}
.paw__ui__vs button {
  width: 22.5rem;
}
@media only screen and (max-width: 75em) {
  .paw__ui__vs button {
    width: 17rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .paw__ui__vs button {
    width: 23rem;
  }
}
.paw__ui__vs__details {
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.paw__ui__vs__input__div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0 3rem 0;
}
.paw__ui__vs__text {
  font-size: 4rem;
  font-family: upbolters;
  text-transform: uppercase;
}
@media only screen and (max-width: 75em) {
  .paw__ui__vs__text {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .paw__ui__vs__text {
    font-size: 3.5rem;
  }
}
.paw__ui__img {
  width: 80%;
}
.paw__ui__img-p {
  width: 37.5%;
}
.paw__ui__input, .paw__ui__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 9.4rem;
  padding: 3rem 0;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-size: 2rem;
  text-align: center;
}
@media only screen and (max-width: 75em) {
  .paw__ui__input, .paw__ui__select {
    width: 6.5rem;
    padding: 1.75rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .paw__ui__input, .paw__ui__select {
    width: 9rem;
    padding: 3rem;
  }
}
.paw__ui__input:focus, .paw__ui__select:focus {
  border: 0.2rem solid #45AF42;
}
.paw__ui__input:focus:invalid, .paw__ui__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.paw__ui__input:invalid, .paw__ui__select:invalid {
  border: 0.2rem solid #cc3524;
}
.paw__paragraph {
  color: rgba(255, 255, 255, 0.5);
}
.paw__row {
  width: 100%;
  margin-top: 2.5rem;
}
.paw__row--50 {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .paw__row--50 {
    flex-direction: column;
  }
}
.paw__col--50 {
  width: 49%;
}
@media only screen and (max-width: 37.5em) {
  .paw__col--50 {
    width: 100%;
  }
  .paw__col--50:not(:first-child) {
    margin-top: 2.5rem;
  }
}
.paw__label {
  font-weight: 700;
}
.paw__input, .paw__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.25rem 2rem;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-size: 1.3rem;
}
.paw__input:focus, .paw__select:focus {
  border: 0.2rem solid #45AF42;
}
.paw__input:focus:invalid, .paw__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.paw__input:invalid, .paw__select:invalid {
  border: 0.2rem solid #cc3524;
}
.paw__textarea {
  font-family: inherit;
  resize: none;
  font-size: 1.3rem;
}
.paw .btn-icon--gold-outline {
  margin-top: 2.5rem;
}
.paw__buttons {
  margin-top: 3.5rem;
}
.paw__buttons button:not(:last-child) {
  margin-right: 2rem;
}

.changepass, .forgotpass {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 75em) {
  .changepass, .forgotpass {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .changepass, .forgotpass {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .changepass, .forgotpass {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.changepass__form, .forgotpass__form {
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  width: 100%;
}
.changepass__text, .forgotpass__text {
  font-size: 1.4rem;
}
.changepass__row, .forgotpass__row {
  width: 100%;
  margin-top: 2.5rem;
}
.changepass__row--50, .forgotpass__row--50 {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .changepass__row--50, .forgotpass__row--50 {
    flex-direction: column;
  }
}
.changepass__label, .forgotpass__label {
  font-weight: 700;
}
.changepass__input, .changepass__select, .forgotpass__input, .forgotpass__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin: 0.75rem 0 0.5rem 0;
  padding: 1.25rem 2rem;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-size: 1.3rem;
}
.changepass__input:focus, .changepass__select:focus, .forgotpass__input:focus, .forgotpass__select:focus {
  border: 0.2rem solid #45AF42;
}
.changepass__input:focus:invalid, .changepass__select:focus:invalid, .forgotpass__input:focus:invalid, .forgotpass__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.changepass__input:invalid, .changepass__select:invalid, .forgotpass__input:invalid, .forgotpass__select:invalid {
  border: 0.2rem solid #cc3524;
}
.changepass__btn, .forgotpass__btn {
  color: #fff;
  background: #cc3524;
  transition: all 0.2s;
  transform: translateY(0);
  box-shadow: none;
  outline: none;
  padding: 1.35rem 3rem;
  border: none;
  margin-top: 3rem;
  border: 2px solid #cc3524;
}
@media only screen and (max-width: 75em) {
  .changepass__btn, .forgotpass__btn {
    padding: 1.35rem 2rem;
  }
}
.changepass__btn:hover, .forgotpass__btn:hover {
  background: rgba(204, 53, 36, 0.5);
}

.message {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
  min-height: 40vh;
}
@media only screen and (max-width: 75em) {
  .message {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .message {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .message {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.message h1, .message h2, .message h3 {
  margin-bottom: 1rem;
}
.message__text {
  font-size: 1.4rem;
}
.message__text:not(:last-child) {
  margin-bottom: 2rem;
}

/* TERMS */
.terms {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
  margin-top: 5rem;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 75em) {
  .terms {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .terms {
    padding: 4rem 8rem 5rem 8rem;
    margin-top: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .terms {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.terms h1, .terms h2, .terms h3 {
  margin-bottom: 1rem;
}
.terms__text {
  font-size: 1.4rem;
}
.terms__text:not(:last-child) {
  margin-bottom: 2rem;
}
.terms__link:link, .terms__link:visited {
  color: #cc3524;
  font-weight: 500;
  text-decoration: underline;
  transition: all 0.2s;
}
.terms__link:hover {
  color: #ccc;
}
@media only screen and (max-width: 75em) {
  .terms {
    padding: 0 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .terms {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .terms {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.terms__link {
  display: none;
}
.terms__link:checked + .terms__label + .terms__tab {
  display: block;
  justify-content: space-between;
}
.terms__link:checked + .terms__label {
  color: #fff;
  font-weight: 900;
  border-bottom: 2px solid #fff;
}
.terms__label {
  color: rgba(255, 255, 255, 0.5);
  padding: 1rem 2rem;
  font-size: 1.4rem;
}
@media only screen and (max-width: 20em) {
  .terms__label {
    padding: 1rem 1.25rem;
    font-size: 1.3rem;
  }
}
.terms__tab {
  width: 100%;
  display: none;
  order: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.terms__section {
  padding: 3.5rem 0 2.5rem 0;
}

/* TERMS */
/* FIXTRURE CHAT START */
.chat {
  width: 100%;
  padding: 4rem 10rem 5rem 10rem;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  text-align: center;
}
@media only screen and (max-width: 75em) {
  .chat {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .chat {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .chat {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.chat h1, .chat h2, .chat h3 {
  margin-bottom: 1rem;
}
.chat__text {
  font-size: 2rem;
  font-family: upbolters;
  text-transform: uppercase;
}
.chat__fix {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.chat__fix p:not(:last-child) {
  margin-right: 2rem;
}
.chat__fix__text {
  font-size: 4rem;
  font-family: upbolters;
  text-transform: uppercase;
}
@media only screen and (max-width: 37.5em) {
  .chat__fix__text {
    font-size: 3rem;
  }
}
.chat__form {
  width: 50%;
  margin: 0 auto;
}
@media only screen and (max-width: 56.25em) {
  .chat__form {
    width: 100%;
  }
}
.chat__form__row {
  width: 100%;
}
.chat__form__row:not(:last-child) {
  margin-bottom: 2.5rem;
}
.chat__form__row--50 {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .chat__form__row--50 {
    flex-direction: column;
  }
}
.chat__form__col--50 {
  width: 49%;
}
@media only screen and (max-width: 37.5em) {
  .chat__form__col--50 {
    width: 100%;
  }
  .chat__form__col--50:not(:first-child) {
    margin-top: 2.5rem;
  }
}
.chat__form__label {
  font-weight: 700;
  font-size: 1.4rem;
}
.chat__form__input, .chat__form__select {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin-top: 0.75rem;
  padding: 1.25rem 2rem;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-size: 1.3rem;
}
.chat__form__input:focus, .chat__form__select:focus {
  border: 0.2rem solid #45AF42;
}
.chat__form__input:focus:invalid, .chat__form__select:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.chat__form__input:invalid, .chat__form__select:invalid {
  border: 0.2rem solid #cc3524;
}
.chat__form__textarea {
  background-color: #142039;
  border: 0.2rem solid rgba(255, 255, 255, 0.25);
  width: 100%;
  margin: 0.75rem 0 2rem 0;
  padding: 1.25rem 2rem;
  border-radius: 0rem;
  color: #fff;
  outline: none;
  font-family: inherit;
  resize: none;
  font-size: 1.3rem;
  height: 12.5rem;
}
.chat__form__textarea:focus {
  border: 0.2rem solid #45AF42;
}
.chat__form__textarea:focus:invalid {
  border: 0.2rem solid #cc3524;
}
.chat__form__textarea:invalid {
  border: 0.2rem solid #cc3524;
}
.chat__msg {
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.chat__msg__box {
  background-color: rgba(69, 175, 66, 0.5);
  border: 2px solid #45AF42;
  text-align: left;
  padding: 2.5rem;
}
.chat__msg__title {
  font-size: 1.6rem;
  font-weight: 900;
}
.chat__msg__message {
  font-size: 1.6rem;
  font-weight: 300;
  margin-top: 0.5rem;
}

/*FIXTURE CHAT END*/
.redgive {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0rem 10rem 5rem 10rem;
}
@media only screen and (max-width: 56.25em) {
  .redgive {
    padding: 4rem 8rem 5rem 8rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .redgive {
    padding: 4rem 4rem 5rem 4rem;
  }
}
.redgive__tab {
  width: 100%;
}
.redgive__paragraph {
  font-size: 1.7rem;
  line-height: 1.4;
}
@media only screen and (max-width: 75em) {
  .redgive__paragraph {
    font-size: 1.5rem;
  }
}
.redgive__paragraph--2 {
  font-size: 1.7rem;
  line-height: 1.6;
}
@media only screen and (max-width: 75em) {
  .redgive__paragraph--2 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .redgive__sec {
    text-align: center;
  }
}
.redgive__desc {
  width: 60%;
  margin: 0 auto;
  text-align: center;
}
@media only screen and (max-width: 56.25em) {
  .redgive__desc {
    width: 100%;
  }
}
.redgive__desc p {
  margin-top: 2.5rem;
}
.redgive__panel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5rem;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (max-width: 75em) {
  .redgive__panel {
    padding: 3.5rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .redgive__panel {
    flex-direction: column;
    text-align: center;
  }
}
.redgive__panel--2 .redgive__info {
  order: 2;
}
@media only screen and (max-width: 56.25em) {
  .redgive__panel--2 .redgive__info {
    order: 1;
  }
}
.redgive__panel--2 .redgive__logo-box {
  order: 1;
}
@media only screen and (max-width: 56.25em) {
  .redgive__panel--2 .redgive__logo-box {
    order: 2;
  }
}
.redgive__panel:first-child {
  margin-top: 10rem;
}
.redgive__panel h2 {
  line-height: 1;
}
.redgive__panel p {
  margin: 3rem 0 4rem 0;
}
@media only screen and (max-width: 56.25em) {
  .redgive__panel p {
    margin: 2rem 0 2.6rem 0;
  }
}
.redgive__info {
  width: 42.5%;
}
@media only screen and (max-width: 75em) {
  .redgive__info {
    width: 45%;
  }
}
@media only screen and (max-width: 56.25em) {
  .redgive__info {
    width: 100%;
  }
}
.redgive__logo-box {
  /*background-image: linear-gradient(180deg, rgba($color-primary-light, 0.0) 0%, rgba($color-primary-light, 0.0) 100%), url(../images/red-1.jpg); */
  background-size: cover;
  background-position: center;
  width: 50%;
  height: 35rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 56.25em) {
  .redgive__logo-box {
    width: 100%;
    margin-top: 1.5rem;
  }
}
.redgive__form {
  margin: 3.5rem 0;
}
.redgive__form p {
  margin-top: 2.5rem;
}
@media only screen and (max-width: 37.5em) {
  .redgive__form .sign-up__checkbox {
    margin: 3rem 0 1rem 0;
  }
}
.redgive__form .sign-up__checkbox .sign-up__text {
  margin-left: 3rem;
  font-size: 1.3rem;
}

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