:root {
  /* Animation */
  --menu-animation-length: 0.3s;
  /* Colors */
  --header-bg-color: rgba(0, 0, 0, 0.9);
  /* Submenu */
  --submenu-container-padding-bottom: 50px;
  --submenu-container-padding-top: 0;
  --submenu-column-padding-right: 24px;
  --submenu-column-header-color: #f4a460;
  --submenu-header-wrapper-margin-bottom: 8px;
  --submenu-btn-wrapper-flex-wrap: wrap;
}
@media (max-width: 330px) {
  section#submenu .header-wrapper {
    letter-spacing: -1px;
  }
}
@media (max-width: 600px) {
  :root {
    --submenu-btn-wrapper-flex-wrap: wrap;
    --submenu-btn-horizontal-spacer: 0px;
    --submenu-btn-vertical-spacer: 24px;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  :root {
    --submenu-btn-horizontal-spacer: 32px;
    --logo-width: 117px;
    --logo-height: 32px;
  }
}
@media (max-width: 1024px) {
  :root {
    /* General */
    --font-size: 18px;
    --button-font-size: 16px;
    /* Header */
    --header-height: 48px;
    --header-inner-width: 100%;
    --header-inner-margin: 0 10px;
    --logo-width: 117px;
    --logo-height: 32px;
    --display-nav: none;
    --header-wrapper-margin: 20px 0 20px;
    /* Submenu */
    --submenu-container-padding-top: 16px;
    --submenu-header-wrapper-align-items: center;
    --submenu-header-wrapper-pointer: pointer;
    --submenu-header-wrapper-margin-bottom: 0;
    --submenu-btn-arrow-display-order: -1;
    --submenu-side-margin: 24px;
    --submenu-every-column-side-margin: var(--submenu-side-margin);
    --submenu-left-margin: var(--submenu-side-margin);
    --submenu-flex-direction: column;
    --display-submenu-hr: block;
    --submenu-column-items-display: none;
    --submenu-column-items-opacity: 0;
    --submenu-column-items-max-height: 0;
    --submenu-column-padding-right: 0px;
    --submenu-li-padding-bottom: 24px;
    --submenu-btn-wrapper-flex-wrap: nowrap;
    --submenu-btn-horizontal-spacer: 48px;
    --submenu-btn-vertical-spacer: 0px;
  }
  section#submenu div.column {
    margin-right: var(--submenu-every-column-side-margin);
  }
}
@media (min-width: 1024px) {
  :root {
    /* General */
    --font-size: 14px;
    /* Header */
    --header-height: 56px;
    --header-inner-width: 1000px;
    --header-inner-margin: 0;
    --header-nav-font-size: 16px;
    --logo-width: 128px;
    --logo-height: 35px;
    --header-wrapper-margin: 10px 0 20px;
    /* Submenu */
    --submenu-header-wrapper-align-items: center;
    --submenu-header-wrapper-pointer: default;
    --submenu-header-wrapper-min-height: 73px;
    --submenu-btn-arrow-display-order: 2;
    --submenu-side-margin: 30px;
    --submenu-left-margin: 0;
    --submenu-flex-direction: row;
    --display-submenu-hr: none;
    --submenu-column-items-display: block;
    --submenu-column-items-opacity: 1;
    --submenu-column-items-max-height: 1800;
    --submenu-li-padding-bottom: 12px;
    --submenu-btn-horizontal-spacer: 0px;
    --submenu-btn-vertical-spacer: 24px;
  }
  header#main-header-wrapper {
    padding-left: calc(100vw - 100%);
    box-sizing: border-box;
  }
  section#submenu > #submenu-container {
    margin-left: calc(100vw - 100%);
  }
}
@media (min-width: 1200px) {
  :root {
    /* General */
    --font-size: 16px;
    /* Header */
    --header-height: 56px;
    --header-inner-width: 1170px;
    --header-inner-margin: 0;
    --header-nav-font-size: 16px;
    --logo-width: 128px;
    --logo-height: 35px;
    --display-nav: block;
    /* Submenu */
    --submenu-header-wrapper-align-items: flex-start;
    --submenu-header-wrapper-pointer: default;
    --submenu-header-wrapper-min-height: 83px;
    --submenu-btn-arrow-display-order: 2;
    --submenu-side-margin: 60px;
    --submenu-left-margin: 0;
    --submenu-flex-direction: row;
    --display-submenu-hr: none;
    --submenu-column-items-display: block;
    --submenu-column-items-opacity: 1;
    --submenu-column-items-max-height: 1800;
  }
}
/* General */
body {
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
  font-family: "PT Sans Caption", Helvetica, Arial, sans-serif;
}
body.transparent-dark {
  background-image: url(http://www.netup.tv/assets/img/imgbgiptv.png);
  background-repeat: no-repeat;
  background-color: #0c0e1c;
  background-attachment: fixed;
  color: #fff;
}
section#submenu .header-wrapper h3,
section#submenu h3.column-header {
  font-size: 1.17em;
}
.overflow-hidden {
  overflow: hidden;
}

/* Colors */
header#main-header-wrapper,
header#main-header-wrapper a,
section#submenu,
section#submenu a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
header#main-header-wrapper a,
section#submenu .header-wrapper .column-header,
section#submenu a,
section#submenu button {
  transition: text-shadow ease var(--menu-animation-length),
    color ease var(--menu-animation-length);
}
header#main-header-wrapper a:hover,
section#submenu a:hover,
section#submenu button:hover,
section#submenu .header-wrapper:hover .column-header,
section#submenu .column .column-header:hover a {
  color: #fff;
  text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.5);
}
header#main-header-wrapper.transparent-white a,
section#submenu #submenu-container.transparent-white a,
section#submenu #submenu-container.transparent-white button,
section#submenu
  #submenu-container.transparent-white
  .header-wrapper
  .column-header,
section#submenu #submenu-container.transparent-white .column .column-header a {
  color: #000;
}
header#main-header-wrapper.transparent-white a:hover,
section#submenu #submenu-container.transparent-white a:hover,
section#submenu #submenu-container.transparent-white button:hover,
section#submenu
  #submenu-container.transparent-white
  .header-wrapper:hover
  .column-header,
section#submenu
  #submenu-container.transparent-white
  .column
  .column-header:hover
  a {
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Header */
header#main-header-wrapper {
  z-index: 10;
  background-color: var(--header-bg-color);
  height: var(--header-height);
  font-weight: 400;
  width: 100%;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color ease var(--menu-animation-length);
}
header#main-header-wrapper > div {
  width: var(--header-inner-width);
  margin: var(--header-inner-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header#main-header-wrapper.transparent-dark {
  background-color: rgba(255, 255, 255, 0);
}
header#main-header-wrapper.transparent-dark.colored-bg {
  background-color: rgba(12, 14, 28, 0.9);
}
header#main-header-wrapper.transparent-dark.scrolled {
  background-color: rgba(12, 14, 28, 0.9);
}
header#main-header-wrapper.transparent-white {
  background-color: rgba(255, 255, 255, 0);
}
header#main-header-wrapper.transparent-white.colored-bg {
  background-color: rgba(255, 255, 255, 0.9);
}
header#main-header-wrapper.transparent-white.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Header / Logo */
header#main-header-wrapper .logo-wrapper {
  display: flex;
}
header#main-header-wrapper a#logo {
  display: block;
  width: var(--logo-width);
  height: var(--logo-height);
  background-image: url("/assets/img/logo_rgb.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* Header / Navigation Links */
header#main-header-wrapper a {
  display: var(--display-nav);
  opacity: 1;
  transition: opacity ease var(--menu-animation-length);
}
header#main-header-wrapper a {
  font-size: var(--header-nav-font-size);
  text-decoration: none;
}
header#main-header-wrapper a.hidden {
  opacity: 0;
}

/* Header / Hamburger Icon */
header#main-header-wrapper #hamburger-menu {
  cursor: pointer;
}
header#main-header-wrapper #hamburger-menu .bar1,
header#main-header-wrapper #hamburger-menu .bar2,
header#main-header-wrapper #hamburger-menu .bar3 {
  width: 25px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: var(--menu-animation-length);
}
header#main-header-wrapper.transparent-white #hamburger-menu > * {
  background-color: #000;
}
/* Rotate first bar */
header#main-header-wrapper #hamburger-menu.change .bar1 {
  transform: rotate(-45deg) translate(-4px, 7px);
}
header#main-header-wrapper #hamburger-menu.change .bar2 {
  opacity: 0;
}
header#main-header-wrapper #hamburger-menu.change .bar3 {
  transform: rotate(45deg) translate(-4px, -7px);
}

/* Submenu */
section#submenu hr {
  margin: 0;
}
section#submenu {
  z-index: 1;
  position: fixed;
  top: 0;
  overflow: hidden;
  font-weight: 400;
  width: 100%;
  height: 100%;
  background-color: var(--header-bg-color);
  opacity: 0;
  display: none;
  justify-content: center;
}
section#submenu.display {
  display: flex;
  transition: opacity var(--menu-animation-length)
    cubic-bezier(0.55, 0.085, 0.68, 0.53); /* ease-in */
}
section#submenu.animate {
  opacity: 1;
  transition: opacity var(--menu-animation-length)
    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out */
}
section#submenu > #submenu-container {
  width: var(--header-inner-width);
  position: fixed;
  top: calc(-1 * var(--header-height));
  justify-content: space-between;
  opacity: 0;
  display: none;
  overflow: auto;

  padding-top: var(--submenu-container-padding-top);
  padding-bottom: var(--submenu-container-padding-bottom);
  max-height: calc(
    100% - var(--header-height) - var(--submenu-container-padding-top) -
      var(--submenu-container-padding-bottom)
  );
}
section#submenu > #submenu-container.transparent-dark {
  background-color: rgba(12, 14, 28, 0.9);
}
section#submenu > #submenu-container.transparent-white {
  background-color: rgba(255, 255, 255, 0.9);
}
section#submenu > #submenu-container.display {
  display: flex;
  flex-direction: var(--submenu-flex-direction);
  transition: all var(--menu-animation-length)
    cubic-bezier(0.55, 0.085, 0.68, 0.53); /* ease-in */
}
section#submenu {
  top: var(--header-height);
}
section#submenu > #submenu-container.animate {
  top: var(--header-height);
  opacity: 1;
  transition: all var(--menu-animation-length)
    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out */
}
section#submenu > div#submenu-container > div.column {
  flex-basis: 20%;
}
section#submenu .column {
  padding: 0 var(--submenu-column-padding-right) 0 0;
  margin-left: var(--submenu-left-margin);
}
section#submenu > div#submenu-container div:last-child {
  padding-right: 0;
}
section#submenu > #submenu-container > div.column hr {
  border: 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.4);
}
section#submenu .column-header {
  cursor: pointer;
  transition: text-shadow ease var(--menu-animation-length),
    color ease var(--menu-animation-length);
}
section#submenu .header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: var(--submenu-header-wrapper-align-items);
  cursor: var(--submenu-header-wrapper-pointer);
  margin-bottom: var(--submenu-header-wrapper-margin-bottom);
}
section#submenu .header-wrapper h3 {
  color: var(--submenu-column-header-color);
  margin-bottom: 8px;
}
section#submenu h3.column-header {
  margin: var(--header-wrapper-margin);
}
section#submenu h3.column-header a {
  color: var(--submenu-column-header-color);
}
section#submenu .btn-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: var(--submenu-btn-wrapper-flex-wrap);
}
section#submenu .btn-wrapper:last-of-type {
  margin-bottom: var(--submenu-container-padding-bottom);
}
section#submenu arrow {
  cursor: pointer;
  border: solid;
  border-width: 0 2px 2px 0;
  padding: 4px;
  transform: rotate(-45deg);
  height: 4px;
  width: 4px;
  transition: transform ease var(--menu-animation-length);
}
section#submenu .btn-wrapper > arrow {
  order: var(--submenu-btn-arrow-display-order);
}
section#submenu .btn-wrapper > button:first-of-type {
  margin-right: var(--submenu-btn-horizontal-spacer);
  margin-bottom: var(--submenu-btn-vertical-spacer);
}
section#submenu button {
  font-size: var(--button-font-size);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0.75);
  width: 100%;
  padding: 8px;
  transition: all 0.15s ease-in-out;
}
section#submenu button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
section#submenu #submenu-container.transparent-white button {
  border: 2px solid rgba(0, 0, 0, 0.5);
}
section#submenu #submenu-container.transparent-white button:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
section#submenu .column-wrapper {
  display: var(--submenu-column-items-display);
  /* transition: opacity ease var(--menu-animation-length),
    max-height ease var(--menu-animation-length); */
}
section#submenu .column-wrapper.display {
  display: block;
  opacity: var(--submenu-column-items-opacity);
  max-height: var(--submenu-column-items-max-height);
  transition: all var(--menu-animation-length)
    cubic-bezier(0.55, 0.085, 0.68, 0.53); /* ease-in */
}
section#submenu .column-wrapper.animate {
  opacity: 1;
  /* max-height should be more
    than the height of the longest
    submenu's column. */
  max-height: 1800px;
  transition: all var(--menu-animation-length)
    cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ease-out */
}
section#submenu hr {
  display: var(--display-submenu-hr);
}
section#submenu ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}
section#submenu li {
  padding: 8px 8px var(--submenu-li-padding-bottom) 0;
}
/* Main Section */
main {
  margin-top: var(--header-height);
}