/**
* Variables
*/
:root {
  --primary-bg: #0d0f16;
  --secondary-bg: #181a25;
  --tertiary-bg: #282d38;
  --primary: #ffffff;
  --secondary: #828e93;
  --administrator: #00bfff;
  --moderator: #009e30;
  --supporter: #ffd137;
  --authenticated: #ffffff;
  --primary-font: 'Noto Sans', sans-serif;
  --secondary-font: 'Josefin Sans', sans-serif;
  --tertiary-font: 'Diablo League', sans-serif; 
}

/**
* Fonts
*/
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans.woff2') format('woff2'),
  url('../fonts/NotoSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/JosefinSans.woff2') format('woff2'),
  url('../fonts/JosefinSans.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Diablo League';
  src: url('../fonts/DiabloLeague.eot');
  src: url('../fonts/DiabloLeague?#iefix') format('embedded-opentype'),
  url('../fonts/DiabloLeague.woff') format('woff'),
  url('../fonts/DiabloLeague.ttf') format('truetype'),
  url('../fonts/DiabloLeague.svg#DiabloLeague') format('svg');
  font-weight: normal;
  font-style: normal;
}

/**
* html and body.
*/
html {
  line-height: 1.7;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--primary-font);
  font-size: 17px;
  line-height: 1.7;
  background: var(--primary-bg);
  color: var(--primary);
  overflow-x: hidden;
  overflow-y: overlay;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--secondary-bg);
    border-radius: 5px;
    border: 3px solid var(--secondary-bg);
  }
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 4px;
  background: var(--secondary-bg);
  outline: 0;
}


.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tertiary-bg);
  outline: 0;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tertiary-bg);
  outline: 0;
  cursor: pointer;
}

/*
* Fields and regions.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
  color: var(--primary);
}

template,
[hidden] {
  display: none;
}

/**
  * Typography
  ------------------------------------*/
/* Typography -> Headings. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  margin: 0;
  color: var(--primary);
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.6em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 1em;
}

/* Typography -> Paragraph */
p {
  margin: 0 0 1em 0;
}

p:last-child {
  margin: 0 0 0 0;
}

/* Typography -> Links. */
a {
  color: var(--secondary);
  background-color: transparent;
  text-decoration: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

a:active,
li a.active {
  color: var(--secondary);
}

a:hover,
a:visited:hover {
  color: var(--secondary);
}

a:active,
a:hover,
a:focus {
  text-decoration: none;
  border: 0;
  outline: 0;
}

/* Typography -> code tags */
code,
kbd,
pre,
samp {
  font-family: var(--primary-font);
  font-size: 1em;
  padding: 2px 8px;
  background: var(--secondary-bg);
  margin: 0;
}

pre {
  overflow: auto;
  margin-bottom: 1em;
}

/* Typography -> Font styles */
b,
strong {
  font-weight: bold;
}

em {
  font-style: normal;
  color: var(--secondary);
}

dfn,
cite {
  font-style: italic;
}

del {
  text-decoration: line-through;
}

small {
  font-size: 80%;
}

big {
  font-size: 125%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

tt,
var {
  font-family: var(--primary-font);
  font-style: italic;
}

mark {
  padding: 6px;
  background: var(--tertiary-bg);
  color: var(--primary);
}

/* Typography -> Address */
address {
  margin: 0 0 1em 0;
  font-style: italic;
}

/* Typography -> Abbreviation */
acronym[title],
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

abbr,
acronym {
  cursor: help;
}

/* Typography -> Blockquote */
blockquote {
  position: relative;
  margin: 0.6em 0 1em 0;
  padding: 1em;
  background: var(--secondary-bg);
  border-left: 4px solid var(--secondary);
}

blockquote > :last-child {
  margin-bottom: 0;
}

/**
  * Media
  */
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img,
a img {
  max-width: 100% !important;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-style: none;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
  border: 0;
}

.align-left {
  margin: 0 1rem 0 0;
}

.align-right {
  margin: 0 0 0 1rem;
}

.align-center {
  margin-top: 1em;
  margin-bottom: 1em;
}

figcaption {
  padding: 4px;
  font-size: 0.8em;
  background: var(--secondary-bg);
  border: 1px solid var(--tertiary-bg);
  text-align: center;
}

.image-field {
  margin: 0 0 1em 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.field--name-user-picture>img {
  width: 260px;
  height: 260px;
}

/**
  * Form.
  */
form {
  margin-bottom: 1em;
}

button,
input,
optgroup,
select,
textarea {
  font-family: var(--primary-font);
  font-size: 100%;
  line-height: 1.6;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

#edit-cancel,
.button-solid,
button,
[type="button"],
[type="reset"],
[type="submit"] {
  position: relative;
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--primary);
  background: var(--secondary-bg);
  -webkit-appearance: button;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

button.accept {
  color: var(--primary);
  background: var(--tertiary-bg);
}

#edit-cancel:hover,
.button-solid:hover,
button:hover,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover {
  color: var(--primary) !important;
  background: var(--tertiary-bg);
}

.button-solid.active {
  color: var(--primary) !important;
  background: var(--tertiary-bg);
}

#edit-cancel {
  padding: 6px 10px;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 0;
}

.button-link[disabled],
button[disabled],
html input[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

input {
  line-height: normal;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="channel"],
textarea {
  background: var(--secondary-bg);
  color: var(--primary);
  padding: 10px;
  border: 1px solid var(--secondary-bg);
  border-radius: 4px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="channel"],
textarea:focus {
  outline: 0;
  background: var(--tertiary-bg);
}

@-webkit-keyframes autofill {
  to {
    color: var(--primary);
    background: transparent;
  }
}

@keyframes autofill {
  to {
    color: var(--primary);
    background: transparent;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  animation-name: autofill;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

input[type="checkbox"], 
input[type="radio"] {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: text-bottom;
  background: var(--secondary-bg);
  color: var(--primary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  background: var(--tertiary-bg);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--tertiary-bg);
  outline: 0;
}

input[type="checkbox"]:checked::after {
  display: block;
}

input[type="checkbox"]::after {
  content: '\2714';
  text-align: center;
  display: none;
}

[type="checkbox"],
[type="radio"] {
  padding: 0;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

[type="file"] {
  cursor: pointer;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

textarea {
  width: 100%;
  overflow: auto;
  vertical-align: top;
}

/* Animated expanding textarea */
.form-textarea {
  height: 100px;
}

.form-textarea:focus {
  height: 180px;
}

fieldset {
  margin: 0 0 20px 0;
  padding: 1rem;
  border: 1px solid var(--tertiary-bg);
}

fieldset > :last-child {
  margin-bottom: 0;
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

optgroup {
  font-weight: bold;
}

select {
  padding: 6px;
  outline: 0;
  cursor: pointer;
}

select {
  background: var(--secondary-bg);
  color: var(--primary);
  border: 1px solid transparent;
  border-radius: 4px;
}

form label {
  color: var(--primary);
}

label[for] {
  cursor: pointer;
}

.page-content input[type="text"],
.page-content input[type="password"],
.page-content input[type="search"] {
  padding: 9px 6px;
  outline: 0;
}

.page-content input {
  max-width: 100%;
}

/* Form -> Drupal form elements */
.form-item {
  margin-bottom: 1em;
}

.form-required:after {
  content: "*";
  display: inline-block;
  padding-left: 4px;
  color: var(--secondary);
}

.form-item label {
  display: block;
}

label.option {
  display: inline;
}

progress {
  vertical-align: baseline;
}

::-webkit-input-placeholder {
  color: var(--tertiary-bg);
}

:-moz-placeholder {
  color: var(--tertiary-bg);
}

::-moz-placeholder {
  color: var(--tertiary-bg);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--tertiary-bg);
}

/**
  * List.
  */
ul,
ol {
  margin: 0;
  padding: 0 0 0.25em 1em;
  /* LTR */
}

[dir="rtl"] ul,
[dir="rtl"] ol {
  padding: 0 1em 0.25em 0;
}

ol ol,
ul ul {
  margin: 0;
  padding: 0 0 0.25em 1em;
  /* LTR */
}

[dir="rtl"] ol ol,
[dir="rtl"] ul ul {
  padding: 0 1em 0.25em 0;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

[dir="rtl"] ul,
[dir="rtl"] ol {
  padding: 0 1em 0.25em 0;
}

li {
  padding: 4px 0;
}

/* Typography -> Definition Lists */
dt {
  color: var(--primary);
}

dd {
  margin: 0 0 1.2em 0;
}

/**
  * Table.
  */
table {
  width: 100%;
  margin-bottom: 1.2em;
}

th,
tr,
td {
  vertical-align: middle;
}

th {
  margin: 0;
  padding: 10px;
  background: var(--secondary-bg);
  color: var(--primary);
  text-align: left;
  text-shadow: none;
}

td {
  padding: 4px 12px 4px;
  border: 2px solid var(--secondary-bg);
}

.lock td {
  background: var(--secondary-bg);
}

/**
  * HTML elements
  */
hr {
  clear: both;
  width: 100%;
  height: 2px;
  background: var(--tertiary-bg);
  border: 0;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  overflow: visible;
}

/**
  * Default box sizing.
  */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:after,
*::after,
*:before,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/**
  * Misc.
  */
::-moz-selection {
  background: var(--secondary);
  color: var(--primary);
  text-shadow: none;
}

::selection {
  background: var(--secondary);
  color: var(--primary);
  text-shadow: none;
}

/**
  * Font icons used in theme
  */
[class^="icon-"],
[class*=" icon-"] {
  font-family: var(--tertiary-font) !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-calendar:before {
  content: "\e90a";
}

.icon-user:before {
  content: "\e90b";
}

.icon-hashtag:before {
  content: "\e90c";
}

.icon-check-square:before {
  content: "\e90d";
}

.icon-exclamation-circle:before {
  content: "\e90e";
}

.icon-exclamation-triangle:before {
  content: "\e90f";
}

.icon-prize:before {
  content: "\e900";
}

.icon-game:before {
  content: "\e901";
}

.icon-discord:before {
  content: "\e902";
}

.icon-notifications:before {
  content: "\e903";
}

.icon-assignment:before {
  content: "\e904";
}

.icon-users:before {
  content: "\e905";
}

.icon-time:before {
  content: "\e906";
}

.icon-facebook:before {
  content: "\e908";
}

.icon-add_comment:before {
  content: "\e910";
}

.icon-comments:before {
  content: "\e911";
}

.icon-twitter:before {
  content: "\e912";
}

.icon-menu:before {
  content: "\e913";
}

.icon-document:before {
  content: "\e914";
}

.icon-youtube:before {
  content: "\e915";
}

.icon-align-left:before {
  content: "\e916";
}

.icon-share:before {
  content: "\e917";
}

.icon-horn:before {
  content: "\e918";
}

.icon-bell:before {
  content: "\e919";
}

.icon-info:before {
  content: "\e920";
}

.icon-tw:before {
  content: "\e921";
}

.icon-status:before {
  content: "\e922";
}

.icon-fullscreen:before {
  content: "\e923";
}

/* Layout
----------------------------------- */
/* Layout -> containers */
.main-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
}

.container {
  position: relative;
  width: 100%;
  max-width: 575px;
  margin: 0 auto;
  padding: 0 10px;
}

#main-wrapper {
  position: relative;
  width: 100%;
  padding: 2em 0;
}

.sidebar-left #main,
.sidebar-right #main,
.two-sidebar #main {
  width: 100%;
  margin: 0 0 2em 0;
  float: none;
}
.no-sidebar #main {
  float: none;
  width: 100%;
}

#main {
  position: relative;
  padding: 0;
  margin: 0 0 2em 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  max-width: 100%;
}

#sidebar-left, 
#sidebar-right {
  padding: 0;
}

/* columns */
.flex-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
}

.row {
  width: 100%;
  clear: both;
  margin-bottom: 1em;
}

.section {
  position: relative;
  display: block;
  width: 100%;
  padding: 2rem 0;
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.items:last-child {
  padding: 0;
}

.items:not(:last-child) {
  margin-bottom: 1rem;
}

.box {
  position: relative;
  display: block;
  margin-bottom: 1em;
  padding: 1.6em;
  background: var(--secondary-bg);
  border-radius: 4px;
}

/* Drupal Core
----------------------------------- */
/* Drupal core Field */
[dir="ltr"] .field--label-inline .field__label,
[dir="ltr"] .field--label-inline .field__items {
  float: left;
}

[dir="rtl"] .field--label-inline .field__label,
[dir="rtl"] .field--label-inline .field__items {
  float: right;
}

[dir="ltr"] .field--label-inline .field__label,
[dir="ltr"] .field--label-inline > .field__item,
[dir="ltr"] .field--label-inline .field__items {
  padding-right: 0.5em;
}

[dir="rtl"] .field--label-inline .field__label,
[dir="rtl"] .field--label-inline > .field__item,
[dir="rtl"] .field--label-inline .field__items {
  padding-left: 0.5em;
}

.field--label-inline .field__label::after {
  content: ":";
}

/* Admin Toolbar */
button.toolbar-item,
button.toolbar-icon {
  background: none;
}

/* Filter Module */
.filter-wrapper {
  border: 1px solid var(--tertiary-bg);
}

/* Drupal system message */
.message {
  position: relative;
  margin: 1em 0;
  padding: 14px 14px 14px 64px;
  color: var(--primary);
  text-shadow: none;
}

.message p {
  margin: 0;
}

.message a,
.message a:visited {
  color: var(--primary);
  text-decoration: underline;
}

.message-status {
  background: #89ad32;
}

.message-status::before {
  content: "\e90d";
  background-color: #759625;
}

.message-error {
  background: #c94d1c;
}

.message-error::before {
  content: "\e90e";
  background-color: #b3461b;
}

.message-warning {
  background: #cd5a0a;
}

.message-warning::before {
  content: "\e90f";
  background-color: #a44707;
}

.message::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 53px;
  height: 100%;
  font-family: var(--tertiary-font);
  font-size: 2em;
  line-height: 53px;
  text-align: center;
}

/*
* Blocks
* Common styling for all blocks regions
*/
.block-section {
  position: relative;
}

.block-title {
  position: relative;
  color: var(--primary);
}

.block-section h2.block-title {
  margin: 0 0 1em 0;
  padding: 0 0 0.3em 0;
  font-size: 1.5em;
}

.block-status {
  position: relative;
  color: var(--primary);
}

.block-section h2.block-status {
  font-size: 1.5em;
}

.block-section .block-title::before,
.block-section .block-title::after {
  position: absolute;
  content: "";
  left: 0;
  height: 1px;
  background: var(--tertiary-bg);
}

.block-section .block-title::before {
  width: 40px;
  bottom: 0;
}

.block-section .block-title::after {
  width: 60px;
  bottom: -4px;
}

/* Search Block region */
.search-box-content .block-title::before,
.search-box-content .block-title::after {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: var(--tertiary-bg);
  left: 0;
}

.search-box-content .block-title::before {
  bottom: 0;
  -webkit-transform: scaleX(0.1);
  transform: scaleX(0.1);
}

.search-box-content .block-title::after {
  bottom: -4px;
  -webkit-transform: scaleX(0.2);
  transform: scaleX(0.2);
}

/* List style for sidebar and footer block regions */
.sidebar ul,
.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

.sidebar ul ul,
.footer ul ul,
.sidebar ol ol,
.footer ol ol {
  margin: 0;
  padding: 0 0 0.25em 1em;
}

.sidebar ul li,
.footer ul li {
  list-style: none;
}

.sidebar li,
.footer li {
  padding: 6px 0;
  border-bottom: 2px solid var(--primary-bg);
}

ul li:last-child,
ol li:last-child {
  border-bottom: none;
}

/* Highlighted Region */
.highlighted {
  width: 100%;
  background: var(--secondary-bg);
}

.region-highlighted {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.highlighted .block {
  position: relative;
  margin: 0;
  padding: 1.5em 0;
}

/* Header
--------------------------------------*/
.header {
  position: relative;
  width: 100%;
  background: var(--secondary-bg);
  margin: 0;
  padding: 1em 0;
}

.header-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* header -> homepage header when ongoing/signup is enabled */
.frontpage .header {
  background: var(--secondary-bg);
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Header -> site branding. */
.branding {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Header -> header right */
.header-right {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.menu-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  margin-left: -1000px;
  background: transparent;
  z-index: 25;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.active-menu .menu-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 320px;
  height: 100%;
  margin: 0;
  transform: translate(0, 0);
  padding: 1em;
  background: var(--secondary-bg);
  box-shadow: 2px 0 4px var(--primary-bg);
  z-index: 110;
  overflow-y: auto;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

@media (min-width: 768px) {
  .active-menu .menu-wrap {
    display: none;
  }
}

.active-menu .menu-wrap ul.main-menu li {
  padding: 6px;
  border-bottom: 2px solid var(--primary-bg)
}

.active-menu .menu-wrap ul.main-menu li:last-child {
  border-bottom: none
}

.active-menu .menu-wrap ul.main-menu li ul li {
  padding: 6px;
}

.main-user-menu a,
.main-user-menu a:visited {
  color: var(--primary);
}

.main-menu a {
  text-decoration: none;
}

.main-menu a,
.main-menu a:visited {
  color: var(--primary);
}

.close-mobile-menu {
  display: none;
  width: 40px;
  height: 40px;
  line-height: 36px;
  z-index: 48;
  cursor: pointer;
  text-align: center;
  color: var(--primary);
  background: var(--tertiary-bg);
  border-radius: 50%;
}

.active-menu .close-mobile-menu {
  position: absolute;
  display: block;
  top: 4px;
  right: 4px;
  line-height: 36px;
}

.active-menu .main-menu {
  display: block;
}

.main-menu {
  display: none;
}

ul.main-menu {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 20px;
  z-index: 30;
  list-style: none;
  list-style-type: none;
}

ul.main-menu li {
  position: relative;
  display: inline-block;
  padding: 0;
  width: auto;
}

ul.main-menu > li {
  display: inline-block;
  line-height: 1;
  margin-right: 24px;
}

ul.main-menu > li > a {
  display: block;
  margin: 0;
  padding: 10px 1px;
}

.main-menu>.main-menu-item>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 2px;
  background: var(--primary-bg);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-menu>.main-menu-item:hover>a::after {
  width: 100%;
}

.main-menu>.main-menu-item>.is-active::after,
.main-menu>.main-menu-item.active>a::after {
  width: 100%;
}

.main-menu>.main-menu-item>.submenu {
  position: absolute;
  display: none;
  top: 40px;
  margin: 0;
  padding: 0;
  z-index: 30;
  opacity: 0;
}

.main-menu>.main-menu-item>.submenu>li {
  display: inline-block;
  width: 170px;
  font-size: 19px;
  background: var(--tertiary-bg);
  text-align: left;
}

.main-menu>.main-menu-item>.submenu>li a {
  display: inline-block;
  padding: 10px 6px 10px 10px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

@media (min-width: 768px) {
  .main-menu>.main-menu-item.expanded>.submenu>.main-menu-item {
    border-bottom: 2px solid var(--primary-bg);
    border-radius: 4px;
  }
  
  .main-menu>.main-menu-item.expanded>.submenu>.main-menu-item:last-child {
    border-bottom: none;
  }
}

li.expanded:hover ul.submenu,
li.collapsed:hover ul.submenu {
  display: block;
  -webkit-animation: slideUp 0.10s forwards;
  animation: slideUp 0.10s forwards;
}

.active-menu li.expanded:hover ul.submenu,
.active-menu li.collapsed:hover ul.submenu {
  -webkit-animation: none;
  animation: none;
}

.dropdown-arrow {
  display: inline-block;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

ul.main-menu li.expanded:hover .dropdown-arrow,
ul.main-menu li.collapsed:hover .dropdown-arrow {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

/* Third level drop down */
.main-menu>.main-menu-item>.submenu>.main-menu-item>.submenu {
  position: absolute;
  display: none;
  top: 0;
  left: 171px;
  margin: 0;
  padding: 0;
  z-index: 30;
  opacity: 0;
}

.main-menu>.main-menu-item>.submenu>.main-menu-item>.submenu>li {
  display: inline-block;
  width: 180px;
  font-size: 19px;
  background: var(--tertiary-bg);
  text-align: left;
}

.main-menu>.main-menu-item.expanded>.submenu>.main-menu-item.expanded:hover>.submenu,
.main-menu>.main-menu-item.collapsed>.submenu>.main-menu-item.collapsed:hover>.submenu {
  display: block;
  -webkit-animation: slideUp 0.10s forwards;
  animation: slideUp 0.10s forwards;
}

.main-menu>.main-menu-item.expanded>.submenu>.main-menu-item.expanded>a::after {
  content: "+";
  color: var(--primary);
  margin-left: 5px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.active-menu .main-menu>.main-menu-item.expanded>.submenu>.main-menu-item.expanded:hover>.submenu,
.active-menu .main-menu>.main-menu-item.collapsed>.submenu>.main-menu-item.collapsed:hover>.submenu {
  -webkit-animation: none;
  animation: none;
}

.main-menu>.main-menu-item>.submenu>.main-menu-item>.submenu>.main-menu-item>.submenu>li a {
  display: inline-block;
  padding: 10px 6px 10px 10px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

@media (min-width: 768px) {
  .main-menu>.main-menu-item.expanded>.submenu>.main-menu-item>.submenu>.main-menu-item {
    border-bottom: 2px solid var(--primary-bg);
    border-radius: 4px;
  }
  
  .main-menu>.main-menu-item.expanded>.submenu>.main-menu-item>.submenu>.main-menu-item:last-child {
    border-bottom: none;
  }
}

/* User Menu */
.main-user-menu {
  position: relative;
  margin: 0;
  padding: 0;
}

.main-user-menu li {
  position: relative;
  display: inline-block;
  padding: 0;
}

.main-user-menu > li {
  display: inline-block;
  line-height: 1;
}

.main-user-menu > li > a {
  display: block;
  margin: 0;
  padding: 10px 1px;
}

.main-user-menu>.main-user-menu-item>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 2px;
  background: var(--tertiary-bg);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-user-menu li:hover > a::after {
  width: 100%;
}

.main-user-menu ul.user-submenu {
  position: absolute;
  display: none;
  top: 40px;
  margin: 0;
  padding: 0;
  right: 0;
  z-index: 30;
  opacity: 0;
}

.main-user-menu ul.user-submenu li {
  display: inline-block;
  width: 150px;
  font-size: 19px;
  background: var(--tertiary-bg);
  text-align: left;
}

.main-user-menu ul.user-submenu li a {
  display: inline-block;
  padding: 10px 6px 10px 10px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-user-menu>.main-user-menu-item.expanded>.user-submenu>.main-user-menu-item {
  border-bottom: 2px solid var(--primary-bg);
  border-radius: 4px;
}

.main-user-menu>.main-user-menu-item.expanded>.user-submenu>.main-user-menu-item:last-child {
  border-bottom: none;
}

li.expanded:hover ul.user-submenu,
li.collapsed:hover ul.user-submenu {
  display: block;
  -webkit-animation: slideUp 0.10s forwards;
  animation: slideUp 0.10s forwards;
}

.active-menu li.expanded:hover ul.user-submenu,
.active-menu li.collapsed:hover ul.user-submenu {
  -webkit-animation: none;
  animation: none;
}

ul.main-user-menu li.expanded:hover .dropdown-arrow,
ul.main-user-menu li.collapsed:hover .dropdown-arrow {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

ul.main-user-menu ul.user-submenu ul.user-submenu {
  position: absolute;
  display: none;
  top: 0;
  left: 160px;
  margin: 0;
  padding: 0;
  z-index: 30;
  opacity: 0;
}

ul.main-user-menu ul.user-submenu ul.user-submenu li {
  display: block;
  font-size: inherit;
  width: 160px;
  padding: 0;
  background: var(--secondary-bg);
  text-align: left;
}

.main-user-menu ul.user-submenu li.expanded::after {
  content: "+";
  color: var(--primary);
}

ul.user-submenu li.expanded:hover ul.user-submenu,
ul.user-submenu li.collapsed:hover ul.user-submenu {
  display: block;
  -webkit-animation: slideUp 0.10s forwards;
  animation: slideUp 0.10s forwards;
}

ul.user-submenu .active-menu li.expanded:hover ul.user-submenu,
ul.user-submenu .active-menu li.collapsed:hover ul.user-submenu {
  -webkit-animation: none;
  animation: none;
}

/* Mobile Menu */
.active-menu .menu-wrap ul.main-menu {
  overflow-y: hidden;
}

.active-menu .menu-wrap ul.main-menu > li {
  display: block;
  float: none;
  margin: 0;
}

.active-menu ul.main-menu > li a::after {
  content: none;
}

.active-menu .menu-wrap ul.main-menu a {
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--primary);
}

.active-menu .menu-wrap .dropdown-arrow {
  position: absolute;
  right: 10px;
}

.active-menu ul.main-menu ul.submenu {
  position: relative;
  display: block;
  top: 0;
  opacity: 1;
}

.active-menu ul.main-menu ul.submenu li {
  position: relative;
  width: 100%;
  padding: 0 10px;
  background: none;
  text-align: right;
}

.active-menu ul.main-menu ul.submenu li a {
  display: block;
  width: 100%;
}

.active-menu .main-menu>.main-menu-item>.submenu>.main-menu-item>.submenu {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  opacity: 1;
}

.active-menu .main-menu>.main-menu-item>.submenu>.main-menu-item>.submenu>li {
  position: relative;
  width: 100%;
  padding: 6px 0;
  background: none;
  text-align: right;
}

.active-menu .main-menu>.main-menu-item>.submenu>.main-menu-item>.submenu>li a {
  display: block;
  width: 100%;
}

/* Header -> Full page search form */
.full-page-search {
  position: relative;
  margin: 0;
  padding: 0;
}

.search-icon,
.mobile-menu,
.sliding-panel-icon,
.discover-twitter-icon,
.discover-tw-icon,
.discover-youtube-icon,
.discover-facebook-icon,
.user-menu-icon {
  position: relative;
  margin: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: var(--primary);
  background: var(--tertiary-bg);
  border-radius: 50%;
}

.discover-twitter-icon>a,
.discover-tw-icon>a,
.discover-youtube-icon>a,
.discover-facebook-icon>a {
  color: var(--primary);
}

.search-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 6px;
}

.search-icon img {
  width: 16px;
  height: 16px;
}

.sliding-panel-icon i {
  line-height: 42px;
}

.search-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-bg);
  z-index: 50;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.search-box.open {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.search-box-content {
  position: relative;
  z-index: 60;
  text-align: center;
}

.search-box-content .block {
  width: 100%;
  margin: 0 auto;
}

.search-box-content .block-title {
  color: var(--primary);
}

.search-box-content form label {
  display: none;
}

.search-box-content input[type="search"] {
  width: 90%;
  margin: 2em 0;
  padding: 0 30px 10px 0;
  font-size: 1.4em;
  background: url("../images/search.svg") top right no-repeat;
  background-size: contain;
  color: var(--primary);
  border: 0;
  border-bottom: 2px solid var(--tertiary-bg);
  border-radius: 0;
  outline: 0;
}

.search-box-content input[type="search"]:focus {
  border: 0;
  border-bottom: 2px solid var(--secondary);
}

.search-box-content input[type="submit"] {
  padding: 10px 20px;
}

.search-box-close {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  z-index: 60;
  cursor: crosshair;
}

.mobile-menu {
  margin-right: 6px;
}

/* Header -> Page header */
#page-header {
  display: block;
  width: 100%;
  margin: 0;
  padding: 2em 0 0 0;
}

.page-header {
  text-align: center;
}

.region-page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Header -> Page title */
.page-title {
  color: var(--primary);
}

/* Header -> Page header -> Breadcrumb. */
.breadcrumb {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 10px 0;
}

.breadcrumb,
.breadcrumb a,
.breadcrumb a:visited {
  color: var(--secondary);
}

.breadcrumb a:hover {
  color: var(--secondary);
}

ol.breadcrumb-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

ol.breadcrumb-items li {
  display: inline-block;
  padding: 0;
  line-height: 1;
}

.breadcrumb-item span {
  margin: 0 10px;
  color: var(--primary);
}

/* Main
--------------------------------------*/
/* Main -> Content top and content bottom block regions */
.content-top,
.content-bottom {
  width: 100%;
}

.region-content-top,
.region-content-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.content-top .block,
.content-bottom .block {
  position: relative;
  margin: 0;
}

.content-top .block {
  padding-bottom: 2em;
}

.content-bottom .block {
  padding: 1.5em 0;
}

/* Main -> Admin Tabs */
ul.page-tabs {
  margin: 0 0 0.6em 0;
  padding: 0 0 0 0;
  border-bottom: 1px solid var(--tertiary-bg);
  list-style: none;
}

.page-tabs li {
  display: inline-block;
  padding: 0;
}

.page-tabs li a {
  padding: 4px 10px;
  background: var(--secondary-bg);
  color: var(--primary);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.page-tabs li.active-page-tab a,
.page-tabs li a:hover {
  color: var(--primary);
  background: var(--tertiary-bg);
}

/* Main -> Node */
.node,
.node-promoted,
.node-sticky,
.node-view-mode-full,
.node-unpublished {
  position: relative;
}

/* Main -> node -> teaser view */
.node-view-mode-teaser {
  position: relative;
  margin-bottom: 1em;
  padding: 1.6em;
  color: var(--primary);
  background: var(--secondary-bg);
  border-radius: 4px;
}

.node-view-mode-teaser.node-sticky {
  border: 1px solid var(--tertiary-bg);
}

.node-view-mode-full .node-taxonomy-container {
  margin: 0;
}

/* Main -> node -> page-type view */
.page-type-tournament-list .node-view-mode-full .field--name-body {
  position: relative;
  margin-bottom: 1em;
  padding: 1.2em;
  color: var(--primary);
  background: var(--secondary-bg);
  border-radius: 4px;
}

.page-type-article .node-view-mode-full .node-header {
  display: none;
}

.page-type-tournaments .node-view-mode-full .field--name-body,
.page-type-sign-up-d2r .node-view-mode-full .field--name-body,
.page-type-participants-d2r-nr2 .node-view-mode-full .field--name-body,
.page-type-participants-d2r-nr3 .node-view-mode-full .field--name-body,
.page-type-sign-up-draft-d2r .node-view-mode-full .field--name-body,
.page-type-sign-up2 .node-view-mode-full .field--name-body,
.page-type-sign-up .node-view-mode-full .field--name-body {
  position: relative;
  margin-bottom: 1em;
}

/* Main -> node -> submitted details */
.node-header {
  position: relative;
  display: block;
  font-size: 1em;
  width: 100%;
  margin: 0 0 1em 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--tertiary-bg);
}

.author-picture {
  float: left;
}

.author-picture img {
  width: auto;
  height: 25px;
  margin: 0 6px 0 0;
}

.node-submitted-details {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  color: var(--primary);
}

.node-submitted-details {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.node-submitted-details a,
.node-submitted-details a:visited {
  color: var(--primary);
}

.node-submitted-details a:hover {
}

.node-submitted-details i {
  color: var(--secondary);
}

.node-submitted-details .icon-user.user-icon {
  margin-right: 2px;
}

.node-submitted-details .icon-calendar {
  margin-right: 2px;
}

/* Main -> node -> taxonomy and links */
.node-taxonomy-container,
.node-links-container {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 1em;
}

h3.term-title {
  margin: 0;
  font-size: 1.2em;
  line-height: 1;
}

ul.taxonomy-terms {
  margin: 1em 0 0.2em 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

li.taxonomy-term {
  position: relative;
  display: inline-block;
}

li.taxonomy-term a {
  padding: 6px 14px;
  border: 2px solid var(--tertiary-bg);
  border-radius: 30px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

li.taxonomy-term a:hover {
  background: var(--secondary);
  color: var(--primary);
  border: 2px solid var(--primary);
}

li.taxonomy-term a::before {
  content: "#";
  margin-right: 5px;
}

.node-links-container .links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.node-links-container ul.links {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

ul.inline,
ul.links.inline {
  padding-left: 0;
}

.single-comment-content>ul.links.inline {
  float: right;
  margin-top: 1em;
}

ul.inline li {
  position: relative;
  display: inline-block;
  list-style-type: none;
}

.node-view-mode-teaser li.comment-new-comments,
.node-view-mode-teaser li.comment-forbidden,
.node-view-mode-teaser li.comment-add {
  display: none !important;
}

.node-links-container .comment-add::before {
  font-family: var(--tertiary-font);
  color: var(--secondary);
  padding-right: 6px;
  content: "\e910";
}

.node-links-container .comment-comments::before {
  font-family: var(--tertiary-font);
  color: var(--primary);
  padding-right: 6px;
  content: "\e911";
}

.node-title a:hover,
.node-links-container .comment-add a:hover {
  color: var(--primary);
}

.block-content ul.action-links {
  position: relative;
  margin: 0;
  padding: 0;
  padding-left: 0;
  list-style: none;
  list-style-type: none;
}

.block-content ul.action-links a:hover {
  color: var(--primary);
}

/* Main -> node -> pager */
nav.pager {
  position: relative;
}

.pager ul.pager__items {
  position: relative;
  margin: 0;
  padding: 1em 0;
  list-style: none;
  list-style-type: none;
}

.pager__items {
  clear: both;
  text-align: center;
}

.pager__item {
  display: inline-block;
  padding: 12px 0;
}

.pager__item a {
  padding: 8px 14px;
  color: var(--primary);
  background: var(--secondary-bg);
  border-radius: 4px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.pager__item a:hover,
.pager__item.is-active a {
  color: var(--primary);
  background: var(--tertiary-bg);
}

/* Node content (page or articles) */
.field--name-body input[type="text"],
.field--name-body input[type="email"],
.field--name-body input[type="url"],
.field--name-body input[type="password"],
.field--name-body input[type="search"],
.field--name-body textarea {
  display: block;
  margin-bottom: 0.8em;
}

/* Project Image
--------------------------------------*/
.projects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.project {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 300px;
  flex: 1 0 300px;
  z-index: 30;
}

.project-image {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.project:hover .project-image {
  -webkit-transform: scale(1.6);
  transform: scale(1.6);
}

/* Search result page
--------------------------------------*/
.page-content input[type="search"] {
  width: 80%;
}

ol.search-results {
  margin: 1em 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

ol.search-results li {
  margin: 0 0 1em 0;
  padding: 1em;
  background: var(--secondary-bg);
}

.search-advanced summary {
  margin: 10px 0;
  cursor: pointer;
}

.search-advanced .form-details-wrapper {
  padding: 0.5em 1.4em;
  border: 1px solid var(--tertiary-bg);
}

.search-advanced .form-wrapper {
  padding: 0.5em 1.4em;
  border: 1px solid var(--tertiary-bg);
}

/* Error Page
--------------------------------------*/
.error-page {
  text-align: center;
}

.error-page:before {
  font-family: var(--tertiary-font);
  content: "\e90f";
  color: var(--primary);
  font-size: 4em;
}

/* Customizing Tournaments Look
--------------------------------------*/
.tournaments-result {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

@media (max-width: 767px) {
  .tournaments-result {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    grid-gap: 1rem;
    gap: 1rem;
  }
}

.tournaments-result .node-header {
  display: none;
}

.tournaments-container {
  margin-bottom: 1em;
  padding: 1.6em;
  background: var(--secondary-bg);
  border-radius: 4px;
  color: var(--primary);
}

.sidebar-right .tournaments-container {
  margin-bottom: 2em;
}

.tournaments-details>li>i {
  margin-right: 5px;
}

.tournaments-details>li>i.icon-prize, 
.tournaments-details>li>i.icon-game, 
.tournaments-details>li>i.icon-assignment,
.tournaments-details>li>i.icon-users,
.tournaments-details>li>i.icon-calendar,
.tournaments-details>li>i.icon-user,
.tournaments-details>li>i.icon-time,
.tournaments-details>li>i.icon-bell	{
  color: var(--secondary);
}

.tournaments-text>.tournaments-details {
  padding: 0;
  margin-bottom: 10px;
}

.tournaments-text>.tournaments-actions {
  padding: 5px;
}

.tournaments-text>.tournaments-details>li {
  list-style: none;
  padding: 6px 0;
  border-bottom: 2px solid var(--primary-bg);
}

.tournaments-text>.tournaments-details>li:last-child {
  border-bottom: none;
}

/* Homepage -> Homepage content block region */
.region-content-home {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.homepage-content .block-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.homepage-content h2.block-title {
  margin-bottom: 1rem;
  text-align: center;
}

/* Comments
--------------------------------------*/
#node-comment {
  position: relative;
  margin: 0;
}

.comments-title i {
  font-size: 1em;
}

/* Comments -> comment form. */
.comment-form-wrap {
  position: relative;
  margin: 2em 0 1em 0;
}

.add-comment-title {
  margin: 0;
}

.add-comment-title i {
  font-size: 1em;
}

.comment-form label {
  display: block;
}

/* Comments -> single comment */
.single-comment {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: 1em;
  padding: 1.2em;
  color: var(--primary);
  background: var(--secondary-bg);
  border-radius: 4px;
}

.comment-user-picture {
  position: relative;
  padding: 0 4px;
  border-right: 2px solid var(--primary-bg);
  text-align: center;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
}

@media (max-width: 767px) {
  .comment-user-picture img {
    width: 51px;
    height: 51px;
  }
}

@media (min-width: 768px) {
  .comment-user-picture img {
    width: 79px;
    height: 79px;
  }
}

h3.single-comment-title {
  margin: 0.1em 0;
  font-size: 1.2em;
}

.single-comment-meta {
  width: 100%;
  margin-bottom: 6px;
  padding-bottom: 6px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--primary-bg);
}

.single-comment-content-body {
  position: relative;
  padding: 0 10px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
}

#node-comment .indented {
  border-left: 2px solid var(--tertiary-bg);
  padding-left: 1.5em;
}

.comment-delete,
.comment-edit {
  margin-right: 0.8em;
}

.comment-approve {
  margin-left: 0.8em;
}

.comment-reply a,
.comment-delete a,
.comment-edit a,
.comment-approve a {
  padding: 6px 10px;
  color: var(--primary);
  background: var(--tertiary-bg);
  border-radius: 4px;
}

/* Sidebar
--------------------------------------*/
/* Sidebar */
.sidebar {
  width: 100%;
  margin: 0 0 2em 0;
  float: none;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  max-width: 100%;
}

/* Sidebar -> Sidebar block */
.sidebar .block {
  margin-bottom: 2em;
  padding: 1.6em;
  background: var(--secondary-bg);
  border-radius: 4px;
  color: var(--primary);
}

.sidebar a {
  color: var(--primary);
}

.sidebar a:hover {
  color: var(--secondary);
}

/* Sidebar -> Form */
.sidebar input[type="text"],
.sidebar input[type="email"],
.sidebar input[type="url"],
.sidebar input[type="password"],
.sidebar input[type="search"] {
  background: transparent;
  width: 100%;
  border: 1px solid var(--tertiary-bg);
  outline: none;
}

.sidebar input[type="text"]:focus,
.sidebar input[type="email"]:focus,
.sidebar input[type="url"]:focus,
.sidebar input[type="password"]:focus,
.sidebar input[type="search"]:focus {
  border: 1px solid var(--secondary);
}

/* Footer
--------------------------------------*/
.footer {
  position: relative;
  width: 100%;
  z-index: 10;
}

#footer-top,
#footer-blocks,
#footer-bottom,
#footer-bottom-last {
  position: relative;
  width: 100%;
  padding-top: 30px;
}

/* Footer Top */
#footer-top,
#footer-bottom {
  background: var(--secondary-bg);
}

/* Footer Four Blocks */
#footer-blocks {
  background: var(--secondary-bg);
}

.footer-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
}

#footer-bottom-last {
  padding: 1.2em 0;
}

/* Footer Bottom */
.footer-bottom-last {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Footer copyright */
#footer-bottom-last {
  background: var(--secondary-bg);
}

.footer .block {
  padding-bottom: 30px;
}

.footer-container,
.footer-bottom-last {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.footer-block {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0;
}

.last-flex-item,
.last-footer-block {
  padding-right: 0;
}

/* Footer -> Scroll To Top. */
.top {
  position: fixed;
  display: none;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  z-index: 20;
  cursor: pointer;
  line-height: 36px;
  text-align: center;
  padding: 2px;
  color: var(--primary);
  background: var(--tertiary-bg);
  border-radius: 50%;

}

/* Text align
-------------------------------------------- */
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.center {
  margin: 0 auto;
}

/* Text Size
-------------------------------------------- */
.size-2x {
  font-size: 2em;
}

.size-3x {
  font-size: 3em;
}

.size-4x {
  font-size: 4em;
}

.size-5x {
  font-size: 5em;
}

.size-6x {
  font-size: 6em;
}

/* container width
-------------------------------------------- */
.width30,
.width40,
.width50,
.width60,
.width70,
.width80,
.width90 {
  width: 100%;
  clear: both;
  display: block;
}

/* Empty space
-------------------------------------------- */
.empty {
  position: relative;
  width: 100%;
  height: 2em;
  clear: both;
}

/* Color
-------------------------------------------- */
.theme-color {
  color: var(--secondary);
}

.white-color {
  color: var(--primary);
}

/* Buttons
-------------------------------------------- */
button.button-link,
a.button-link,
.button-link a {
  display: inline-block;
  width: 100%;
  padding: 8px 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: var(--primary);
  background: var(--tertiary-bg);
  border-radius: 4px;
}

button.button-link:hover,
a.button-link:hover,
.button-link a:hover {
  color: var(--primary);
}

/* Services
-------------------------------------------- */
.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
}

.service {
  margin: 0 0 2em 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  max-width: 100%;
  background: var(--secondary-bg);
  padding: 2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.service-icon {
  position: relative;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.service-icon img {
  width: 50px;
  height: auto;
}

.service-icon i {
  color: var(--secondary);
  font-size: 3em;
}

.service h3 {
  margin: 0.8em 0;
}

.service .button-link {
  text-transform: uppercase;
}

.service:hover .button-link {
  color: var(--secondary);
  border: 2px solid var(--primary);
  padding: 0.6em 3em 0.6em 1em;
}

.service:hover .button-link::after {
  width: 2em;
}

.service:hover .service-icon {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

/* Animations
-------------------------------------------- */
/* Status Sync */
.sync {
  display: inline-grid;
  width: 46px;
  height: 46px;
}

.sync div {
  position: absolute;
  background: var(--secondary);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  -webkit-animation: sync 1.8s linear infinite;
  animation: sync 1.8s linear infinite;
}

.sync div:nth-child(2) {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
}

@keyframes sync {
  0% {
    -webkit-transform: scale(0,0);
    transform: scale(0,0);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    opacity: 0;
  }
}

@-webkit-keyframes sync {
  0% {
    -webkit-transform: scale(0,0);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(1,1);
    opacity: 0;
  }
}

/* Slide Up */
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* Clearing
--------------------------------------*/
.clear::before,
.clear::after,
.row::before,
.row::after,
.full::before,
.full::after,
.section::before,
.section::after {
  content: '';
  display: table;
  clear: both;
}