@font-face {
  font-family: 'frostbite_narrowregular';
  src: url('../fonts/frostbite-narrow-webfont.woff2') format('woff2'),
      url('../fonts/frostbite-narrow-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'frostbite_narrowbold';
  src: url('../fonts/frostbite-narrow_bold-webfont.woff2') format('woff2'),
      url('../fonts/frostbite-narrow_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

/*-- Variables --*/

:root {

  /*-- Colors --*/
  --primary-color: #00A19A;
  --success-color: #8EDC84;

  /*-- Fonts --*/
  --headline-primary-font: 'frostbite_narrowbold', sans-serif;
  --headline-secondary-font: 'frostbite_narrowregular', sans-serif;
  --body-font: 'Roboto', sans-serif;
  
}

/*-- Reset --*/

html, html * {
  box-sizing: border-box;
}

body {
  background: #000;
  font-family: var(--body-font);
  color: #fff;
}

/*-- Bootstrap enhance --*/

@media (max-width: 575px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.row.big-gutter {
  margin-right: -60px;
  margin-left: -60px;
}
.row.big-gutter > * {
  padding-right: 60px;
  padding-left: 60px;
}
@media (min-width: 992px) {
  .row.big-gutter {
    margin-right: -80px;
    margin-left: -80px;
  }
  .row.big-gutter > * {
    padding-right: 80px;
    padding-left: 80px;
  }
}
@media (min-width: 1200px) {
  .row.big-gutter {
    margin-right: -120px;
    margin-left: -120px;
  }
  .row.big-gutter > * {
    padding-right: 120px;
    padding-left: 120px;
  }
}
@media (min-width: 1400px) {
  .row.big-gutter {
    margin-right: -160px;
    margin-left: -160px;
  }
  .row.big-gutter > * {
    padding-right: 160px;
    padding-left: 160px;
  }
}

/*-- Typography --*/

h1, h2,
.h1, .h2 {
  color: #fff;
  text-transform: uppercase;
  font-family: var(--headline-primary-font);
}

h1, .h1 {
  font-size: 32px;
}
@media screen and (min-width: 576px) {
  h1, .h1 {
    font-size: calc(32px + 60 * ((100vw - 576px) / 824));
  }
}
@media screen and (min-width: 1400px) {
  h1, .h1 {
    font-size: 92px;
  }
}

h2, .h2 {
  font-size: 24px;
}
@media screen and (min-width: 576px) {
  h2, .h2 {
    font-size: calc(24px + 12 * ((100vw - 576px) / 824));
  }
}
@media screen and (min-width: 1400px) {
  h2, .h2 {
    font-size: 36px;
  }
}

h3, .h3 {
  color: var(--primary-color);
  font-size: 18px;
  text-transform: uppercase;
  font-family: var(--headline-secondary-font);
}
@media screen and (min-width: 576px) {
  h3, .h3 {
    font-size: calc(18px + 6 * ((100vw - 576px) / 824));
  }
}
@media screen and (min-width: 1400px) {
  h3, .h3 {
    font-size: 24px;
  }
}

h4, .h4 {
  font-size: 18px;
  font-weight: 900;
}
@media screen and (min-width: 576px) {
  h4, .h4 {
    font-size: calc(18px + 6 * ((100vw - 576px) / 824));
  }
}
@media screen and (min-width: 1400px) {
  h4, .h4 {
    font-size: 24px;
  }
}

/*-- Default --*/

.wrapper {
  display: block;
  width: 100%;
  min-height: 100vh;
  height: auto;
  overflow: hidden;
}

.has-tooltip {
  position: relative;
}

.has-tooltip:hover .tooltip {
  opacity: 1;
  transform: translateY(0px);
  transition: all ease .3s;
}


.tooltip {
  display: block;
  padding: 8px 12px;
  color: #fff;
  background: var(--primary-color);
  font-size: 16px;
  border-radius: 5px;
  position: absolute;
  bottom: 100%;
  left: 0px;
  opacity: 0;
  transform: translateY(15px);
  transition: all ease .1s;
}

@media (max-width: 1199px) {
  .navigation-wrapper .tooltip {
    display: none;
  }
}

.tooltip:after {
  display: block;
  width: 17px;
  height: 12px;
  position: absolute;
  top: 100%;
  left: 10px;
  margin-top: -1px;
  content: " ";
  background: url("../img/bubble-corner-left.svg") no-repeat top right;
}

.btn {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  padding: 10px;
  margin-top: 10px;
  border-radius: 10px;
  border: 2px solid var(--primary-color);
  color: #fff;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

.btn:hover {
  color: #fff;
  background: var(--primary-color);
}

/*-- Spacing --*/

.marge-bottom-small {
  margin-bottom: 20px;
}

.marge-bottom-medium {
  margin-bottom: 40px;
}

/*-- Navigation --*/

nav {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  padding: 0 4vw 0 4vw;
  padding-top: 30px;
}

nav:before {
  display: block;
  height: 160px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  content: "";
  opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 36.54%, rgba(14, 8, 16, 0) 100%);
  transition: all .3s ease-in-out;
  pointer-events: none;
}
nav.scrolling:before,
.subpage nav:before {
  opacity: 1;
}

@media screen and (min-width: 992px) {
  nav {
    padding-top: calc(30px + 60 * ((100vw - 992px) / 408));
  }
  nav:before {
    height: 200px;
  }
}
@media screen and (min-width: 1400px) {
  nav {
    padding-top: 90px;
  }
  nav:before {
    height: 300px;
  }
}

.logo {
  display: block;
  margin: 15px 0 0 30px;
  position: relative;
  z-index: 1000;
}

.logo img {
  width: 160px;
}
@media (min-width: 992px) {
  .logo img {
    width: 200px;
  } 
}

.navigation {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation > li > a {
  display: block;
  position: relative;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  padding: 15px 30px;
  position: relative;
  transition: all .3s;
}
.navigation > li > a:hover,
.navigation > li > a.mPS2id-highlight {
  color: var(--primary-color);
}

.social {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

.social > li {
  padding: 0 15px;
}

.social > li > a {
  display: block;
  padding: 15px 0;
  color: #fff;
  font-family: var(--body-font);
  text-decoration: none;
  transition: all .3s;
}

.social > li > a:hover {
  color: var(--primary-color);
}

.social > li > a > .icon-discord,
.social > li > a > .icon-instagram {
  margin-right: 8px;
}

@media (max-width: 1199px) {

  .navigation-wrapper {
    margin: 15px 30px 0 0;
    position: relative;
    z-index: 2;
  }

  .social > li > a {
    color: #fff;

  }

  .navigation-wrapper_drop {
    display: block;
    min-width: 250px;
    padding: 20px;
    position: absolute;
    top: 100%;
    right: -4vw;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .3s, opacity .3s ease-in-out;
  }

  .navigation, 
  .social {
    transform: translateX(100px);
    opacity: 0;
    transition: all .3s ease-in-out;
  }

  .navigation-wrapper.active .navigation, 
  .navigation-wrapper.active .social {
    transform: translateX(0px);
    opacity: 1;
  }

  .navigation-wrapper.active .navigation-wrapper_drop {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 0s,  opacity .3s ease-in-out;
  }

  .navigation-wrapper_drop:before {
    display: block;
    width: 100vw;
    height: 140vh;
    position: absolute;
    right: -30px;
    top: -20vh;
    z-index: -1;
    background: linear-gradient(88.92deg, rgba(13, 22, 30, 0) -100.49%, rgba(0, 0, 0, 0.9) 70.52%);
    content: " ";
  }

  .icondescription {
    display: none;
  }

  .social {
    padding-left: 15px;
  }

  .mobile-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
  }

  .mobile-toggle:before {
        /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    content: "\e909";
  }

  .navigation-wrapper.active .mobile-toggle:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    content: "\e908";
  }
}
@media (min-width: 1200px) {
  .navigation {
    display: flex;
  }
  .navigation > li > a.mPS2id-highlight:before {
    top: 0;
    height: 100%;
    opacity: 1;
  }
  
  .navigation > li > a:before {
    display: block;
    width: 100%;
    height: 10%;
    background: #000;
    position: absolute;
    top: 40%;
    left: 0px;
    z-index: -1;
    transform: skew(-18deg, 0deg);
    border-radius: 5px;
    content:" ";
    opacity: 0;
    transition: all .3s ease;
  }
  .social {
    position: fixed;
    bottom: 65px;
    left: 4vw;
    z-index: 999;
  }

  
}

/*-- Header --*/

header {
  width: 100%;
  min-height: 600px;
  position: relative;
}
@media (min-width: 576px) {
  header {
    width: 100%;
    height: 100vh;
    position: relative;
  }
}
@media (min-width: 1200px) {
  header {
    margin-bottom: 30vh;
  }
}

.header_intro {
  text-align: center;
  position: relative;
}

.badge {
  display: block;
  width: 150px;
  height: 168px;
  position: relative;
  z-index: 10;
  background: url("../img/nw-badge.png") no-repeat center center;
  background-size: contain;
}

.badge {
  display: block;
  width: 150px;
  height: 168px;
  position: relative;
  z-index: 10;
  background: url("../img/gg-badge.png") no-repeat center center;
  background-size: contain;
}

.badge {
  display: block;
  width: 150px;
  height: 168px;
  position: relative;
  z-index: 10;
  background: url("../img/dsh-badge.png") no-repeat center center;
  background-size: contain;
}


.header_background {
  display: block;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  background: url("../img/header.jpg") no-repeat 60% 0;
  background-size: cover;
}

@media (min-width: 992px) {
  .header_background {
    height: auto;
    padding-top: 100%;
    background: url("../img/header.jpg") no-repeat top center;
    background-size: contain;
  }
}

.twitchbutton-big {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  width: 100%;
  padding: 30px 50px 30px 50px;
  border-radius: 10px;
  border: 2px solid var(--primary-color);
  color: #fff;
  text-decoration: none;
  margin-bottom: 30px;
  font-size: 18px;
  position: relative;
  transition: all .3s ease;
}

.twitchbutton-big_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: -12px;
  margin-left: -40px;
  background: #000;
  border-radius: 60px 60px 60px 0;
}

.twitchbutton-big_live {
  display: none;
}
.twitchbutton-big_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 20px;
  transition: all .3s ease;
}
@media screen and (min-width: 576px) {
  .twitchbutton-big {
    font-size: calc(18px + 6 * ((100vw - 576px) / 824));
    padding: 20px 55px 20px 80px;
  }
  .twitchbutton-big_live {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 30px;
    color: var(--success-color);
    font-size: 18px;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -60px;
    margin-top: -23px;
    transition: all .3s ease;
  }
  .twitchbutton-big_arrow {
    right: 35px;
  }
}
@media screen and (min-width: 1400px) {
  .twitchbutton-big {
    font-size: 24px;
  }
}

.twitchbutton-big:hover {
  background: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: #fff;
  text-decoration: none;
  box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.25);
}

.twitchbutton-big_text {
  font-weight: 900;
  margin: 0 40px 0 12px
}

.twitchbutton-big:hover .twitchbutton-big_live {
  transform: translateX(-10px);
}

.twitchbutton-big_live:before {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  transform: skew(-18deg, 0deg);
  border-radius: 5px;
  content:" ";
}

.twitchbutton-big_live_glow {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--success-color);
  position: relative;
  margin-right: 8px;
}

.twitchbutton-big_live_glow:after {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--success-color);
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.5;
  content: "";
}

.twitchbutton-big:hover .twitchbutton-big_arrow {
  transform: translateX(10px);
}

.twitchbutton-fixed {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 4vw;
  z-index: 998;
  margin-right: 15px;
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s .5s, opacity .5s ease-out, transform .5s ease-out;
}

.twitchbutton-fixed:hover .twitchbutton-fixed_bubble {
  transform: translateY(-10px) translateX(-5px);
}

.twitchbutton-fixed.scrolling {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
  transition: visibility 0s 0s, opacity .5s ease-out, transform .5s ease-out;
}

@media screen and (min-width: 992px) {
  .twitchbutton-fixed {
    display: block;
    bottom: calc(30px + 60 * ((100vw - 992px) / 408));
  }
}
@media screen and (min-width: 1400px) {
  .twitchbutton-fixed {
    bottom: 90px;
  }
}

.twitchbutton-fixed_circle {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  position: relative;
  background: #555;
}

.twitchbutton-fixed_bubble {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  border-radius: 10px;
  color: #fff;
  background: var(--primary-color);
  position: absolute;
  bottom: 70px;
  right: 50px;
  box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.25);
  transition: transform .3s ease-out;
}

.twitchbutton-fixed_bubble:after {
  display: block;
  width: 35px;
  height: 24px;
  position: absolute;
  top: 100%;
  right: 15px;
  content: " ";
  background: url("../img/bubble-corner-right.svg") no-repeat top right;
}

.twitchbutton-fixed_bubble .icon-twitch {
  font-size: 24px;
}

.twitchbutton-fixed_bubble_text {
  margin-left: 8px;
}

/*-- Sections --*/

.section-subpage {
  padding-top: 15vw;
  position: relative;
  z-index: 15;
}

.goback .icon-arrow-left {
  display: inline-block;
  margin-right: 15px;
  transition: all .3s ease-in-out;
}

.goback:hover .icon-arrow-left {
  transform: translateX(-5px);
  color: var(--primary-color);
}

.section_headline {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (min-width: 576px) {
  .section_headline {
    margin-bottom: calc(30px + 90 * ((100vw - 576px) / 824));
  }
}
@media screen and (min-width: 1400px) {
  .section_headline {
    margin-bottom: 120px;
  }
}

.section-fullscreen {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media screen and (min-width: 576px) {
  .section-fullscreen {
    padding-top: calc(100px + 100 * ((100vw - 576px) / 824));
    padding-bottom: calc(100px + 100 * ((100vw - 576px) / 824));
  }
}
@media screen and (min-width: 1400px) {
  .section-fullscreen {
    padding-top: 200px;
    padding-bottom: 200px;
  }
}
@media (min-width: 992px) {
  .section-fullscreen {
    min-height: 100vh;
    margin-bottom:2px
  }
}

.section_background {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  overflow: hidden;
}

.section_background_inner {
  display: block;
  width: 110%;
  height: 110%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.section-about,
.section-setup {
  position: relative;
}

.section-about .section_background_inner {
  background: url(../img/section_01.jpg) no-repeat center center;
  background-size: cover;
}

.section-setup .section_background_inner {
  background: url(../img/section_02.jpg) no-repeat center center;
  background-size: cover;
}

/*-- Section Schedules --*/

.daycard {
  display: block;
  padding: 30px;
  position: relative;
}

.daycard .h1 {
  margin: 0;
}

.daycard .h3 {
  margin-top: -10px;
}

.daycard_inner .h4 {
  margin-top: 60px
}

.daycard_bg {
  display: block;
  width: 100%;
  height: 80%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  border-radius: 5px;
  opacity: 0;
  transition: all ease-out 1s;
}

.daycard_01 .daycard_bg {
  background: url(../img/schedule_kachel_01.jpg) no-repeat center center;
  background-size: cover;
}
.daycard_02 .daycard_bg {
  background: url(../img/schedule_kachel_02.jpg) no-repeat center center;
  background-size: cover;
}
.daycard_03 .daycard_bg {
  background: url(../img/schedule_kachel_03.jpg) no-repeat center center;
  background-size: cover;
}
.daycard_04 .daycard_bg {
  background: url(../img/schedule_kachel_04.jpg) no-repeat center center;
  background-size: cover;
}

.daycard_inner {
  display: block;
  padding: 50px 20px 100px 20px;
  border: 2px solid transparent;
  border-radius: 5px;
  position: relative;
  z-index: 2;
  text-align: center;
  transition: all ease-out .3s;
}

.daycard:hover .daycard_inner,
.daycard.active .daycard_inner {
  border: 2px solid var(--primary-color);
}

.daycard:hover .daycard_bg,
.daycard.active .daycard_bg {
  opacity: 1;
}

/*-- Section Games --*/

.card {
  width: 100%;
  padding-top: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(115.03deg, rgba(0, 161, 154, 0.1) -11.28%, rgba(0, 150, 179, 0.1) 31.93%, rgba(163, 52, 112, 0) 96.98%);
  margin-bottom: 30px;
}

.card_01 {
  background: url(../img/games_kachel_shooter.jpg) no-repeat center center;
  background-size: cover;
}
.card_02 {
  background: url(../img/games_kachel_MMO_RPG.jpg) no-repeat center center;
  background-size: cover;
}
.card_03 {
  background: url(../img/games_kachel_vallheim.jpg) no-repeat center center;
  background-size: cover;
}
.card_04 {
  background: url(../img/games_kachel_Talk_React_Build.jpg) no-repeat center center;
  background-size: cover;
}

.card-currentgame_title {
  display: inline-block;
  padding: 20px 30px;
  max-width: 80%;
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 2;
  color: var(--primary-color);
  cursor: default;
}

.card-currentgame_title:before {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  transform: skew(-18deg, 0deg);
  border-radius: 5px;
  content: " ";
}


/*-- Section About --*/

.aboutgraphic {
  display: block;
  height: 55vw;
  position: relative;
}

.aboutgraphic_bg {
  display: block;
  position: absolute;
  width: 45vw;
  height: 45vw;
  top: 50%;
  margin-top: -14.5vw;
  right: 50%;
  margin-right: -14.5vw;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(115.03deg, rgba(0, 161, 154, 0.08) 0%, rgba(0, 150, 179, 0.08) 41%, rgba(163, 52, 112, 0) 100%);
}

.aboutgraphic_image {
  display: block;
  position: absolute;
  width: 45vw;
  height: 45vw;
  top: 50%;
  margin-top: -22.5vw;
  right: 50%;
  margin-right: -22.5vw;
  z-index: 2;
  border-radius: 50%;
  background: url(../img/beispiel.svg) no-repeat center center;
  background-size: cover;
}

.aboutgraphic_logo {
  display: block;
  position: absolute;
  z-index: 3;
}

@media (min-width: 576px) {

  .aboutgraphic {
    height: 40vw;
  }

  .aboutgraphic_bg {
    width: 35vw;
    height: 35vw;
    top: 50%;
    margin-top: -7.5vw;
    right: 50%;
    margin-right: -10.5vw;
  }

  .aboutgraphic_image {
    width: 35vw;
    height: 35vw;
    top: 50%;
    margin-top: -17.5vw;
    right: 50%;
    margin-right: -17.5vw;
  }
}

@media (min-width: 768px) {

  .aboutgraphic {
    height: 100%;
  }

  .aboutgraphic_bg {
    width: 28vw;
    height: 28vw;
    top: 50%;
    margin-top: -10vw;
    right: 6vw;
    margin-right: 0;
  }

  .aboutgraphic_image {
    width: 28vw;
    height: 28vw;
    top: 50%;
    margin-top: -14vw;
    right: 0px;
    margin-right: 0;
  }

  .aboutgraphic_logo {
    width: 20vw;
    right: -4vw;
    top: 50%;
    margin-top: 5vw;
  }

}

/*-- Section Setup --*/

.setup-image {
  max-width: 700px;
  width: 100%;
  height: auto;
}

.setupgraphic {
  display: block;
}

.setupgraphic_inner {
  display: block;
  width: 45vw;
  height: 45vw;
  position: absolute;
  top: 50%;
  margin-top: -22.5vw;
  left: 50%;
  margin-left: -22.5vw;
  z-index: 1;
}

.setupgraphic_inner_bg {
  display: block;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(115.03deg, rgba(0, 161, 154, 0.08) 0%, rgba(0, 150, 179, 0.08) 41%, rgba(163, 52, 112, 0) 100%);
}

.setupgraphic_inner_image-01 {
  display: block;
  width: 16vw;
  height: 16vw;
  position: absolute;
  bottom: 80%;
  right: 5vw;
  z-index: 2;
  border-radius: 50%;
  background: url(../img/setup/01.JPG) center center no-repeat;
  background-size: cover;
}

.setupgraphic_inner_image-02 {
  display: block;
  width: 22vw;
  height: 22vw;
  position: absolute;
  bottom: 0;
  left: 60%;
  z-index: 2;
  border-radius: 50%;
  background: url(../img/setup/02.JPG) center center no-repeat;
  background-size: cover;
}

.setupgraphic_inner_image-03 {
  display: block;
  width: 30vw;
  height: 30vw;
  position: absolute;
  bottom: -10%;
  right: 60%;
  z-index: 2;
  border-radius: 50%;
  background: url(../img/setup/03.JPG) center center no-repeat;
  background-size: cover;
}

@media (min-width: 576px) {

  .setupgraphic {
    height: 40vw;
  }

  .setupgraphic_inner {
    width: 35vw;
    height: 35vw;
    top: 50%;
    margin-top: -22.5vw;
    left: 50%;
    margin-left: -22.5vw;
  }

  .aboutgraphic_image {
    width: 35vw;
    height: 35vw;
    top: 50%;
    margin-top: -17.5vw;
    right: 50%;
    margin-right: -17.5vw;
  }
}

@media (min-width: 768px) {

  .setupgraphic {
    height: 40vw;
  }

  .setupgraphic_inner {
    width: 28vw;
    height: 28vw;
    position: absolute;
    top: 50%;
    margin-top: -14vw;
    left: 6vw;
    margin-left: 0;
  }

  .aboutgraphic_image {
    width: 28vw;
    height: 28vw;
    top: 50%;
    margin-top: -14vw;
    right: 0px;
    margin-right: 0;
  }

  .aboutgraphic_logo {
    width: 20vw;
    right: -4vw;
    top: 50%;
    margin-top: 5vw;
  }

  .setupgraphic_inner_image-01 {
    width: 12vw;
    height: 12vw;
    bottom: 80%;
    right: 5vw;
  }
  
  .setupgraphic_inner_image-02 {
    width: 16vw;
    height: 16vw;
    bottom: -10%;
    left: 60%;
  }
  
  .setupgraphic_inner_image-03 {
    width: 20vw;
    height: 20vw;
    bottom: -20%;
    right: 60%;
  }

}

/*-- Section Stream schedules --*/

#section-stream-specials {
  position: relative;
  z-index: 2;
}

.streamfeature {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}

.streamfeature-info {
  position: relative;
  z-index: 3;
}

.streamfeature_bg {
  display: block;
  width: 80%;
  padding-top: 80%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(115.03deg, rgba(0, 161, 154, 0.1) -11.28%, rgba(0, 150, 179, 0.1) 31.93%, rgba(0, 0, 0, 0) 80%);
}
@media (min-width: 1200px) {
  .streamfeature_bg {
    width: 120%;
    padding-top: 120%;
  }
}

.streamfeature_bg_circle {
  display: block;
  width: 50%;
  height: 50%;
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(94.32deg, rgba(0, 161, 154, 0.4) -11.44%, rgba(0, 150, 179, 0.4) 41.13%, rgba(163, 52, 112, 0.192) 133.07%);
}
@media (min-width: 768px) {
  .streamfeature_bg_circle {
    width: 40%;
    height: 40%;
  }
}

.streamfeature {
  margin-top: 200px;
}

.streamfeature-01 .streamfeature_bg {
  top: 0px;
  left: -22%;
  margin-top: -45%;
}
.streamfeature-01 .streamfeature_bg_circle {
  top: 0%;
  left: 70%;
}
@media (min-width: 768px) {
  .streamfeature-01 .streamfeature_bg {
    top: 0px;
    margin-top: -25%;
  }
}
@media (min-width: 1600px) {
  .streamfeature-01 .streamfeature_bg {
    left: -42%;
    margin-top: -30%;
  }
  .streamfeature-01 .streamfeature_bg_circle {
    top: 0%;
    left: -10%;
  }
}

.streamfeature-02 .streamfeature_bg {
  top: 0px;
  right: -15%;
  margin-top: -38%;
}
.streamfeature-02 .streamfeature_bg_circle {
  top: -10%;
  right: 68%;
}
@media (min-width: 1600px) {
  .streamfeature-02 .streamfeature_bg {
    top: 0px;
    right: -40%;
    margin-top: -53%;
  }
  .streamfeature-02 .streamfeature_bg_circle {
    top: 0%;
    right: -10%;
  }
}

.streamfeature-03 .streamfeature_bg {
  top: 0px;
  left: -35%;
  margin-top: -45%;
}

.streamfeature-03 .streamfeature_bg_circle {
  top: -10%;
  left: -10%;
}

/*-- Footer --*/

footer {
  width: 100%;
  min-height: 600px;
  position: relative;
  z-index: 1;
}
@media (min-width: 576px) {
  footer {
    width: 100%;
    height: 100vh;
    position: relative;
  }
}

.footer_center {
  width: 100%;
  min-height: 400px;
}
@media (min-width: 576px) {
  .footer_center {
    min-height: calc(100vh - 200px);
  }
}

.footer_background {
  display: block;
  width: 100%;
  padding-top: 56%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background: url("../img/footer.jpg") no-repeat top center;
  background-size: cover;
}


.background_gradient {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  background: radial-gradient(153.46% 296.47% at 44.38% 18.72%, rgba(0, 161, 154, 0.3) 0%, rgba(0, 0, 0, 0) 69.79%);
}

.footer_navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.footer_navigation li {
  margin: 0 15px;
}

.footer_navigation a {
  text-decoration: none;
  color: #fff;
}

.footer_navigation a:hover {
  text-decoration: underline;
}