/*@import url(https://fonts.bunny.net/css?family=aclonica:400);*/
/*
@import url(https://fonts.bunny.net/css?family=aclonica:400|alef:400,700);
*/
@font-face {
  font-family: 'Aclonica';
  font-style: normal;
  font-weight: 400;
  src: url(assets/fonts/aclonica-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Varela';
  font-style: normal;
  font-weight: 400;
  src: url(assets/fonts/VarelaRound-Regular.woff2) format('woff2');
}

:root {
  --activeFont: 'Varela', Arial, Helvetica, sans-serif;
  --font_Aclonicia: 'Aclonica', sans-serif;
  /*--activeFont: 'Alef', sans-serif;*/
  /*font-family: 'Aclonica', sans-serif;*/
  --siteGap: 20px;
  --siteGapDouble: 40px;
  --iconBG: rgba(0, 0, 0, 0.7);
  --menuBarHeight: 60px;
  /*--wpH: 0;*/
  --wpH: 32px;
  --poraitHeight: 90dvh;
  --maxPortraitWidth: 720px;
  --menuOffset: 128px
}

@media only screen and (max-width: 784px) {
  :root {
    --wpH: 44px;
  }
}
@media only screen and (max-width: 600px) {
  :root {
    --wpH: 0px;
  }
}

@media only screen and (max-width: 1024px) {
  :root {
    --menuOffset: 0;
  }
}


html {
  /*scrollbar-color: #bf00ff black;*/
  scrollbar-width: thin;
}
html,
body {
  position: absolute;
  display: grid;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--activeFont);
  font-weight: 400;
  background-color: black;
  color: white;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
}

.eTop {
  margin-top: var(--wpH);
}
.eTop #userMenu {
  margin-top: var(--wpH);
}

.desktop {
  scrollbar-color: #bf00ff black;
  scrollbar-width: thin;
}
.desktop:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 40px;
  width: 100%;
  height: 20px;
  background-color: rgba(255, 0, 255, 0.5);
}
.desktop:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 60px;
  width: 100%;
  height: 20px;
  background-color: rgba(255, 0, 255, 0.2);
}


#desktopNavBar {
  position: fixed;
  display: none;
  width: calc(100% - (var(--siteGap) * 2));
  height: var(--menuBarHeight);
  background-color: black;
  z-index: 3;
  border-bottom: 2px solid magenta;
  box-shadow: 0px 0px 4px black ;
  padding: 0 var(--siteGap);
}
.desktop #desktopNavBar {
  display: inline-grid;
}

@media only screen and (max-width: 640px) {
  #desktopNavBar {
    display: none !important;
  }
  :root {
    --menuBarHeight: 0;
  }
}

#desktopNavBar > div {
  position: relative;
  display: inline-grid;
  align-items: center;
  column-gap: 12px;
  grid-template-columns: auto max-content max-content;
}
.nav_button {
  position: relative;
  display: inline-grid;
  color: white;
  border-radius: 6px;
  font-size: 12px;
  border: 2px solid rgba(255, 0, 255, 0.5);
  cursor: pointer;
  align-self: end;
  margin-bottom: 12px;
}
.nav_button > div {
  pointer-events: none;
}
.nb_icon {
  grid-template-columns: auto 20px;
  align-items: center;
  /*grid-column-gap: 8px;*/
}
.nb_icon .ico_SignIn {
  height: 13px;
  width: 14px;
  background: url('assets/img/icon_sign_in_white.svg');
}
.notAMember .nav_button {
  background-color: darkmagenta;
  padding: 4px 8px;
  border: 2px solid magenta;
}
#menu_sign_in_nav {
  background-color: black;
}
#menu_sign_in_nav .ico_SignIn {
  height: 13px;
  width: 14px;
  background: url('assets/img/icon_sign_in_magenta.svg');
}

.nav_button a {
  padding: 4px 8px;
  background-color: transparent;
  color: white;
  font-weight: 600;
}
.nav_button a:hover {
  color: white;
}

#menu_sign_in_nav:hover,
.nav_button:hover {
  cursor: pointer;
  background-color: darkmagenta;
  border: 2px solid magenta;
}
.notAMember .nav_button:hover {
  cursor: pointer;
  background-color: magenta;
  border: 2px solid white;
}


.nav_user {
  font-size: 12px;
  color: white;
  font-style: italic;
  font-weight: 600;
  margin-top: 12px;
}

.navLogo {
  position: relative;
  display: flex;
  width: auto;
  height: 72%;
  bottom: 0;
  border: none !important;
  pointer-events: none !important;
  justify-self: start;
  align-items: center;
}


.navLogo > div {
  position: relative;
  display: inline-flex;
}

.navLogo > div:first-child {
  width: 100%;
  height: 100%;
  background-size: auto 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.navLogo > div:last-child {
  color: white;
  font-size: 11px;
  top: 4px;
  font-family: var(--font_Aclonicia);
}


/*LANDSCAPE*/
#memberStreamBlock {
  position: absolute;
  display: inline-grid;
  background-color: black;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  align-content: center;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#memberStreamBlock video {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 0.25s linear;
  background-color: black;
}



/*PORTRAIT*/
#portraitVideos {
  position: absolute;
  display: grid;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  transition: opacity 0.5s linear;
  overflow: hidden;
  width: 100%;
  /*height: 100dvh;*/
  /*background-color: blue;*/
  pointer-events: none;
}


.desktop #portraitVideos {
  /*position: relative;*/
  display: inline-grid;
  width: calc(100% - 40px);
  overflow-y: scroll;
  overscroll-behavior: none;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  justify-content: center;
  padding: 20px 20px 790px 20px;
  pointer-events: all;
  top: var(--menuBarHeight);
  left: var(--menuOffset);
}

.eTop #portraitVideos {
  margin-top: var(--wpH);
}

#portraitVideos > div {
  position: relative;
  /*pointer-events: none;*/
  /*height: 100dvh;*/
  /*opacity: 0.5;*/
  /*transform-origin: 0;*/
  pointer-events: all;
}


.desktop #portraitVideos > div {
  display: inline-grid;
  grid-row-gap: 20px;
}

.cornered {
  margin: 5px;
  border-radius: 16px;
}

.vBlock {
  position: relative;
  display: block;
  width: 100%;
  height: 100dvh;
  background-color: black;
  pointer-events: none;
}

.desktop .vBlock {
  display: inline-grid;
  width: 100%;
  max-width: var(--maxPortraitWidth);
  height: auto;
  max-height: var(--poraitHeight);
  justify-content: center;
  background-color: transparent;
  padding: 20px 0 0 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.vShell {
  position: relative;
  display: grid;
}

.desktop .vShell {
  display: inline-grid;
  overflow: hidden;
  border-radius: 33px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}



.vBlock video {
  position: absolute;
  display: inline-grid;
  width: auto;
  height: 100dvh;
  justify-self: center;
  opacity: 1;
  transition: opacity 0.25s linear;
}

.desktop .vBlock video {
  width: auto;
  height: 100%;
  max-height: var(--poraitHeight);
  aspect-ratio: auto 9 / 16;
}

.media {
  position: relative;
  display: inline-grid;
  width: 100%;
  height: 100dvh;
  justify-self: center;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.media:before {
  content: '';
  position: absolute;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  backdrop-filter: blur(15px);
}
.notPortrait {
  background-size: cover !important;
}

@media (orientation: portrait) {
  @media (min-width: 767px) {
    .media {
      background-size: cover !important;
    }
  }
}

.desktopPortraitImage {
  display: none;
  position: relative;
  height: auto;
  width: 100%;
  max-height: var(--poraitHeight);
  justify-self: center;
  aspect-ratio: auto 9 / 16;
}
.desktopLandscapeImage {
  display: none;
  position: relative;
  width: 100%;
  height: auto;
  justify-self: center;
}
.desktop .desktopPortraitImage,
.desktop .desktopImage {
  display: inline-grid;
}

.content {
  position: absolute;
  display: inline-grid;
  right: var(--siteGap);
  left: var(--siteGap);
  bottom: var(--siteGap);
  width: auto;
  height: auto;
  user-select: none;
  pointer-events: none;
  border-radius: 8px;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
  padding: 12px;
  color: white;
  font-size: 14px;
  line-height: 18px;
  grid-row-gap: 8px;
  letter-spacing: 1px;
  transition: opacity 0.25s linear;
  opacity: 1;
}
.content h3 {
  margin: 0;
  font-size: 14px;
}

.contentSub {
  color: lightgray;
  font-style: italic;
  /*margin-bottom: 2px;*/
  font-size: 11px;
}

.tags {
  position: relative;
  display: flex;
  border-radius: 9px;
  column-gap: 8px;
}
.tags > div {
  position: relative;
  display: inline-flex;
  padding: 4px 8px;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 9px;
  font-size: 11px;
}


.showContent .content {
  opacity: 1;
}
.hideContent .content {
  opacity: 0;
}

.fullMemberVideo {
  position: absolute;
  display: none;
  right: -10px;
  height: 60px;
  width: 60px;
  text-align: center;
  align-content: center;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  align-self: center;
  border-radius: 8px 0 8px 8px;
  background-color: rgba(255, 0, 255, 0.5);
  cursor: pointer;
  user-select: none;
  color: white;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.dpOff {
  pointer-events: none;
  opacity: 0;
}
.dpOn {
  pointer-events: all;
  opacity: 1;
}

.fullMemberVideo > div {
  pointer-events: none;
  position: relative;
  display: inline-grid;
  border-radius: 6px 0 6px 6px;
  font-size: 13px;
  width: 44px;
  height: 44px;
  padding: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: black;
  justify-self: center;
  justify-content: center;
  align-content: center;
}

.fullMemberVideoXXX> div:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -8px;
  right: -2px;
  /*border-top: 12px solid transparent;*/
  /*border-left: 12px solid magenta;*/
  /*border-bottom: 12px solid transparent;*/
  /*transform: rotate(-45deg);*/
}
.fullMemberVideo > div:after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 3px;
  right: 3px;
  /*border-top: 8px solid transparent;*/
  /*border-left: 8px solid white;*/
  /*border-bottom: 8px solid transparent;*/
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center !important;
  background: url('assets/img/icon_pop_out.svg');
  /*transform: rotate(-45deg);*/
}

.fullMemberVideo:hover {
  color: white;
}
.fullMemberVideo:hover > div {
  background-color: black;
}

.desktop .fullMemberVideo {
  display: inline-grid;
}

/*CONTROLS*/
#shellUI {
  opacity: 1;
  transition: opacity 0.25s linear;
}
.eTop #shellUI {
  margin-top: var(--wpH);
}
.uiShell {
  position: absolute;
}
.hidePortraitUI {
  pointer-events: none !important;
  opacity: 0 !important;
}
.hidePortraitUI > div {
  pointer-events: none !important;
}


#videoUI {
  position: fixed;
  display: inline-grid;
  padding: 8px;
  width: calc(100% - 16px);
  /*width: 100%;*/
  height: 48px;
  bottom: 0;
  left: 0;
  right: 0;
  justify-self: center;
  transition: opacity 0.25s linear;
  user-select: none;
}
.controls_video {
  position: absolute;
  display: inline-grid;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.2);
  /*background-color: gray;*/
  border-radius: 22px;
  grid-column-gap: 16px;
  padding : 0 8px 6px 8px;
  grid-template-columns: max-content auto max-content;
  align-items: center;
  left: var(--siteGap);
  right: var(--siteGap);
  pointer-events: all;
}
.controls_video > div {
  position: relative;
  display: inline-grid;
  cursor: pointer;
}

.hide {
  opacity: 0;
  pointer-events: none !important;
}
.hide div {
  pointer-events: none !important;
}
.show {
  opacity: 1;
}

#controls_play {
  width: 36px;
  height: 36px;
  background-color: darkmagenta;
  border-radius: 50%;
}
.desktop #controls_play:hover {
  background-color: magenta;
}
#controls_play > div {
  position: absolute;
  display: inline-grid;
  justify-self: center;
  align-self: center;
  pointer-events: none;
}
.icoPlay > div:first-child {
  width: 0;
  height: 0;
  left: 14px;
  border-top: 9px solid transparent;
  border-left: 14px solid white;
  border-bottom: 9px solid transparent;
}

.icoPause > div:last-child {
  width: 5px;
  height: 18px;
  left: 10px;
  background-color: white;
  pointer-events: none;
}
.icoPause > div:last-child:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 18px;
  left: 10px;
  background-color: white;
}

#controls_bar {
  width: auto;
  height: auto;
  /*top: 12px;*/
  background-color: transparent;
  font-size: 12px;
  padding: 20px 0;
}

.progressBars {
  display: inline-grid;
  position: absolute;
  width: 100%;
  height: 4px;
  align-self: center;
}

.progressBars:before {
  content: '';
  position: absolute;
  height: 16px;
  width: auto;
  top: -6px;
  left: -6px;
  right: -6px;
  background-color: rgba(255, 0, 255, 0.4);
  border-radius: 3px;
}

.progressBars:after {
  content: '';
  position: absolute;
  height: 4px;
  width: auto;
  top: 0;
  left: 0;
  right: -0;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
}

.progressBars > div:first-child {
  display: block;
  position: absolute;
  width: 0;
  top: 0;
  height: 4px;
  background-color: magenta;
  z-index: 1;
}
.progressBars > div:last-child {
  display: block;
  position: absolute;
  width: 0;
  height: 4px;
  background-color: white;
  z-index: 2;
}
.videoTimes {
  position: absolute;
  display: flex;
  justify-self: end;
  align-self: end;
  bottom: -5px;
  user-select: none !important;
  pointer-events: none !important;
}
.videoTimes > div {
  display: inline-flex;
}
.videoTimes > div:nth-child(2) {
  margin: 0 4px;
}

#controls_bar > div {
  pointer-events: none;
}

#controls_volume {
  width: 36px;
  height: 36px;
  justify-content: center;
  align-content: center;
  pointer-events: all;
}



@property --bw {
  syntax: '<number>';
  inherits: true;
  initial-value: 3;
}

@property --per {
  syntax: '<number>';
  inherits: true;
  initial-value: 100;
}
@property --col {
  syntax: '<color>';
  inherits: true;
  initial-value: #fff;
}

@keyframes per {
  from {--per:0}
}
#controls_volume:before {
  --bw: 3;
  --col: #ffa8f2;
  content: '';
  position: absolute;
  display: inline-grid;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  inset: 0;
  top: -6px;
  left: -6px;
  background:
    radial-gradient(farthest-side,var(--col) 98%,#0000) top/var(--bw) var(--bw) no-repeat,
    conic-gradient(var(--col) calc(var(--per)*1%),#0000 0);
  mask:radial-gradient(farthest-side,#0000 calc(99% - var(--bw)),#000 calc(100% - var(--bw)));
}

#controls_volume:after {
  content: '';
  position: absolute;
  display: inline-grid;
  width: inherit;
  height: inherit;
  background-color: darkmagenta;
  border-radius: 50%;
  left: 0;
  right: 0;
}

.iconSoundOn {
  position: relative;
  display: none;
  width: 33px;
  height: 33px;
  background: url("assets/img/icon_sound_on.svg");
  background-size: 60% auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none;
  opacity: 0.75;
  z-index: 1;
}
.iconSoundOff {
  position: relative;
  display: none;
  width: 33px;
  height: 33px;
  background: url("assets/img/icon_sound_off.svg");
  background-size: 60% auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none;
  opacity: 0.75;
  z-index: 1;
}
.soundOn .iconSoundOn {
  display: inline-grid;
}
.soundOff:before {
  /*background: none !important;*/
  --col: #b7009b !important;
}
.soundOff .iconSoundOff {
  display: inline-grid;
}

.iOsDevice #controls_volume:before {
  background: none !important;
}

/*
#controls_volume > div {
  position: relative;
  display: inline-grid;
  margin-left: 9px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
    pointer-events: none;
    justify-self: center;
    align-self: center;
    border: 3px solid white;
  }

  #controls_volumeX > div > div {
  position: relative;
  display: inline-grid;
  background-color: white;
  width: 9px;
  height:  9px;
  border-radius: 50%;
  z-index: 1;
  left: -1px;
  top: 5px;
  border: 3px solid black;
}

#controls_volume > div:before {
  content: '';
  position: absolute;
  display: inline-grid;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: 5px;
  top: 4px;
  border: 3px solid white;

}
#controls_volume > div:after {
  content: '';
  position: absolute;
  width: 19px;
  height: 31px;
  background-color: rgba(0, 0, 0, 0.8);
  top: -3px;
  left: -3px;
  border-radius: 25px;
}
*/

#thumbPreview {
  position: absolute;
  width: 128px;
  height: 72px;
  top: -85px;
  overflow: hidden;
  border: 2px solid magenta;
  border-radius: 9px;
}
#thumbPreview > div {
  position: absolute;
}


#thumbnailFullPreview {
  position: absolute;
  display: inline-grid;
  pointer-events: none;
  user-select: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: black;
}
#thumbnailFullPreview > div {
  position: absolute;
  display: inline-grid;
  justify-self: center;
  align-self: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 128px;
  height: 72px;
  transform: scale(1);
  transform-origin: 50%;
  overflow: hidden;
  background: url(videos/clip_1_sprites.jpg);
  background-position: 0px 0px;
  background-size: 640px 720px;
  background-repeat: no-repeat;
  pointer-events: none;
}

#previewCanvas {
  position: absolute;
  display: inline-grid;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  pointer-events: none;
  width: 100%;
  height: auto;
  align-self: center;
}
#thumbnailFullPreview:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  backdrop-filter: blur(5px);
  background: repeating-linear-gradient(to right, #f6ba5200, #00000000 4px, rgba(0, 0, 0, 0.6) 4px, rgba(0, 0, 0, 0.6) 6px);
}



#controls_fullscreen {
  position: fixed;
  display: inline-grid;
  bottom: var(--siteGap);
  right: var(--siteGap);
  width: 34px;
  height: 34px;
  background-color: rgba(0, 0, 0, 0.5);
  user-select: none;
  cursor: pointer;
}
#controls_fullscreen > div {
  display: inline-grid;
  position: absolute;
  pointer-events: none;
  background-color: transparent;
  justify-self: center;
  align-self: center;
  background-size: 100% auto !important;
  width: 24px;
  height: 24px;
  opacity: 0.7;
  user-select: none;
}
.full > div {
  background: url(assets/img/icon_fullscreen.svg);
}
.window {
  border-radius: 8px;
}
.window > div {
  background: url(assets/img/icon_window.svg);
}

/*
.siteLogo {
  position: fixed;
  display: grid;
  align-items: center;
  justify-items: center;
  left: var(--siteGap);
  top: 12px;
  width: 64px;
  height: auto;
  padding: 8px 0;
  border-radius: 5px;
  user-select: none;
  pointer-events: none;
  text-align: center;
  font-weight: 600;
  color: white;
  font-size: 10px;
  line-height: 12px;
  background: linear-gradient(to bottom, red 30%, darkred 100%);
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  opacity: 0.7;
  letter-spacing: 2px;
}

.siteLogo div:first-child {
  color: black;
  font-size: 12px;
  margin: 2px 0 4px 0;
  font-weight: 800;
}


.siteLogo:after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border: 4px solid black;
  width: auto;
  height: auto;
  border-radius: 5px;
}
*/

.memberLogo,
.siteLogo {
  position: fixed;
  z-index: 2;
  /*display: grid;*/
  left: var(--siteGap);
  top: 12px;
  width: 96px;
  height: 96px;
  display: none;
}
.memberLogo {
  justify-self: center;
}

.memberLogo > div:first-child,
.siteLogo > div:first-child {
  position: absolute;
  width: inherit;
  height: inherit;
  /*background: url("assets/img/logo_rabbit.png");*/
  background-size: auto 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.memberLogoXX > div:first-child:after,
.siteLogoXX > div:first-child:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: 5px;
  left: 27px;
  /*background: url("assets/img/logo_rabbit_tail.png");*/
  background-size: auto 100% !important;
  background-position: center !important;
  background-repeat: no-repeat;
}


.memberLogo > div:last-child,
.siteLogo > div:last-child {
  position: absolute;
  font-size: 10px;
  top: 0;
  left: 0;
  color: cyan;
}

@media (orientation: portrait) {

  #memberStreamBlock video {
    width: auto;
    height: 100dvh;
  }
  #memberStreamBlock {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .vBlock video {
    width: auto;
    height: 100dvh;
  }
  #portraitVideos {
    /*overflow-y: scroll;*/
    opacity: 1;
    pointer-events: all;
  }

  @media (min-width: 768px) {
    .cornered .vBlock video {
      border-radius: 40px;
    }
  }
}

/*DETECT DIFFERENT SCREEN TYPES*/
/*https://habr.com/en/sandbox/163605/*/
@media (orientation: landscape) {
  #memberStreamBlock video {
    width: 100%;
    height: 100dvh;
  }
  @media (max-width: 1367px) {

    #memberStreamBlock {
      opacity: 1;
      pointer-events: all;
      /*background-size: 100% auto !important;*/
    }
    /*
    .vBlock video {
      width: 100%;
      height: auto;
    }
    */

    #portraitVideos {
      opacity: 0;
      pointer-events: none;
    }
    .desktop #portraitVideos {
      opacity: 1;
      pointer-events: all;
    }
  }
}


@media (min-width: 1367px) {
  /*body {*/
  /*  scrollbar-color: #bf00ff black;*/
  /*  scrollbar-width: thin;*/
  /*}*/
  /*.desktopImage {*/
  /*  display: inline-grid;*/
  /*  justify-self: center;*/
  /*}*/
  #memberStreamBlock {
    display: none;
  }
  #controls_fullscreen {
    display: none;
  }
}
#videoLoading {
  position: fixed;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  justify-content: center;
  align-content: center;
  pointer-events: none;
}
#videoLoading > div {
  position: relative;
  display: inline-grid;
  aspect-ratio:1;
  width: 116px;
  height: 116px;
  justify-content: center;
  align-content: center;
  pointer-events: none;
}

#videoLoadingXX > div:before {
  --b: 8px;
  content: '';
  position: absolute;
  display: inline-grid;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

/*SWEET!!!
https://www.freecodecamp.org/news/css-only-pie-chart/
*/
@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --o{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
@keyframes p {
  from {--p:0}
}
@keyframes o {
  from {--o:1}
}

#proccessingCheck > div:after,
#videoLoading > div:after {
  --c: white;
  --b: 3px;
  content: '';
  position: absolute;;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
  top: 2px;
  left: 2px;
}
#proccessingCheck > div:after {
  --c: #1eff00;
  width: inherit;
  height: inherit;
}

@keyframes p {
  from {--p:0}
}

.loadingOn {
  display: inline-grid !important;
  --p:100;
  --o:0;
}
.loadingOn > div:after {
  /*opacity: var(--o);*/
  /*animation: p 3s both, o 3s both;*/
  animation: p 3s both;
  animation-iteration-count: infinite;
}

#playReplay,
#playResume {
  position: fixed;
  display: none;
  left: 70px;
  right: 70px;
  top: 0;
  bottom: 0;
  justify-content: center;
  align-content: center;
  pointer-events: all;
}

.desktop #playReplay,
.desktop #playResume {
  justify-self: center;
  align-self: center;
  cursor: pointer;
  position: absolute;
}

.memberVideoOn #playReplay,
.memberVideoOn #playResume {
  position: fixed;
}

.desktop #playReplay:hover > div,
.desktop #playResume:hover > div {
  background-color: magenta;
}

#playReplay > div,
#playResume > div {
  position: relative;
  display: inline-grid;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-content: center;
  pointer-events: none;
}
#playReplay > div:before,
#playResume > div:before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  width: auto;
  height: auto;
  border: 3px solid white;
  border-radius: 50%;
}
#playResume > div:after {
  content: '';
  position: relative;
  display: inline-grid;
  width: 0;
  height: 0;
  left: 6px;
  border-top: 20px solid transparent;
  border-left: 36px solid white;
  border-bottom: 20px solid transparent;
}
#playReplay > div:after {
  content: '';
  position: relative;
  display: inline-grid;
  top: -3px;
  width: 43px;
  height: 43px;
  background: url("assets/img/icon_replay.svg");
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: auto 100% !important;
}

#mobileDebug {
  position: fixed;
  left: 0;
  bottom: 20%;
  width: auto;
  height: auto;
  background-color: var(--iconBG);
  padding: 12px;
  font-size: 12px;
  border-radius: 0 8px 8px 0;
  pointer-events: none;
  user-select: none;
}
#mobileDebug > div {
  margin: 8px 0;
}
#mobileDebug > div:nth-child(1) {
  color: greenyellow;
}
#mobileDebug > div:nth-child(2) {
  color: cyan;
}
#mobileDebug > div:nth-child(3) {
  color: yellow;
}
/*THINGS ARE GOOD*/
#tourRotate {
  position: fixed;
  display: inline-grid;
  pointer-events: none;
  user-select: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s linear;
  align-content: center;
}
@media (orientation: portrait) {
  #tourRotate {
    align-content: start;
  }
}

.trShell {
  position: relative;
  display: inline-grid;
  margin-top: var(--siteGap);
}

.desktop #tourRotate {
  display: none !important;
}

.trShell > div {
  display: inline-grid;
}
.trShell > div:first-child {
  position: relative;
  /*top: var(--siteGap);*/
  width: 64px;
  height: 64px;
  background-color: var(--iconBG);
  justify-content: center;
  align-content: center;
  border-radius: 50%;
  justify-self: center;
}

.trShell > div:first-child:after {
  content: '';
  position: relative;
  display: inline-grid;
  width: 48px;
  height: 48px;
  background: url(assets/img/icon_rotate.svg);
  background-size: 100% auto !important;
}

.tourRotateGo,
.rotateGo {
  opacity: 1 !important;
}
.tourRotateGo .trShell {
  background-color: rgba(139, 0, 139, 0.7);
  padding: 8px;
  grid-row-gap: 8px;
  border-radius: 9px;
}
.rotateGo .trShell {
  background-color: transparent;
  padding: 0;
  grid-row-gap: 0;
  border-radius: 0;
}
.tourRotateGo .trShell > div:last-child {
  display: inline-grid;
}

.tourRotateGo .trShell > div:first-child,
.rotateGo .trShell > div:first-child {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: center;
}

@keyframes example {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }

}

.trShell > div:last-child {
  display: none;
  max-width: 128px;
  text-align: center;
  font-size: 12px;
  border-radius: 8px;
  justify-self: center;
}

#muteAlert {
  position: relative;
  display: inline-grid;
  color: white;
  pointer-events: none;
  user-select: none;
  margin-top: 180px;
  justify-self: center;
  pointer-events: none !important;
}
#controls_mute {
  position: absolute;
  display: inline-grid;
  user-select: none;
  justify-self: center;
  background-color: var(--iconBG);
  width: 40px;
  height: 40px;
  border-radius: 6px;
  justify-content: center;
  align-content: center;
  pointer-events: all;
  cursor: pointer;
  top: 0;
  right: 0;
}

.desktop #controls_mute {
  position: relative;
  top: calc(var(--menuBarHeight) + var(--siteGap));
}

.memberVideoOn #controls_mute {
  position: absolute;
  top: 0;
}

/*.desktop #muteAlert {}*/

#muteAlert > div {
  position: relative;
  display: inline-grid;
  width: auto;
  height: auto;
  background-color:  var(--iconBG);
  padding: 12px;
  border-radius: 8px;
  grid-template-columns: auto 36px;
  align-items: center;
  column-gap: 12px;
}

#muteAlert > div > div:last-child {
  width: 33px;
  height: 33px;
  background: url(assets/img/icon_sound_off.svg);
  background-size: 80% auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#controls_mute > div {
  width: 26px;
  height: 26px;
  display: inline-grid;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center !important;
  pointer-events: none;
  opacity: 0.8;
}

.muteOff > div {
  background: url(assets/img/icon_sound_off.svg);
}
.muteOn > div {
  background: url(assets/img/icon_sound_on.svg);
}

#userMenu {
  position: fixed;
  z-index: 1;
  display: inline-grid;
  left: 0;
  top: 0;
  user-select: none;
  padding: var(--siteGap);
  grid-template-rows: 48px auto;
  pointer-events: all;
}

.memberVideoOn #userMenu {
  display: none !important;
  display: none !important;
}
.desktop #userMenu {
  height: auto; !important;
  grid-template-rows: auto;
  top: var(--menuBarHeight);
}

@media (orientation: landscape) {
  #muteAlert {
    margin-top: 0;
    /*justify-self: end;*/
  }
  .desktop #muteAlert {
    /*justify-self: center;*/
  }
}

.menuOn {
  background-color: black;
  bottom: 0;
  /*box-shadow: 0 0 9px darkblue;*/
  box-shadow: 0 0 9px black;
}

.desktop .menuOn {
  box-shadow: none;
}

.desktop .menuOff {
  background-color: black;
  bottom: 0;
  box-shadow: none;
    /*box-shadow: 0 0 9px darkblue;*/
}

.desktop .menuOff:before,
.menuOn:before {
  content: '';
  position: absolute;
  border-right: 2px solid rgba(255, 0, 255, 0.5);
  right: 0px;
  top: 0;
  bottom: 0;
}
.desktop .menuOff:after,
.menuOn:after {
  content: '';
  position: absolute;
  border-right: 2px solid rgba(255, 0, 255, 0.25);
  right: -2px;
  top: 0;
  bottom: 0;
}

@media only screen and (max-width: 1024px) {
  .desktop .menuOn {
    /*box-shadow: 0 0 9px darkblue;*/
    box-shadow: 0 0 9px black;
  }
  .desktop .menuOff {
    background-color: transparent;
    bottom: 0;
    box-shadow: none;
  }

  .desktop .menuOff:before,
  .desktop .menuOff:after {
    border-right: none;
  }
  .menuOn:before,
  .menuOn:after {
    /*border-right: none;*/
  }

  .desktop #userMenu {
    grid-template-rows: max-content;
  }

}




#menu_button {
  position: relative;
  display: inline-grid;
  width: 40px;
  height: 40px;
  background-color: var(--iconBG);
  border-radius: 5px;
  justify-content: center;
  align-content: center;
}

#menu_button > div {
  pointer-events: none;
  position: relative;
  display: inline-grid;
  width: 28px;
  height: 4px;
  border-radius: 3px;
  background-color: white;
  transition: transform 0.3s linear;
}
#menu_button > div:before {
  content: '';
  position: absolute;
  display: inline-grid;
  width: 28px;
  height: 4px;
  background-color: white;
  top: -10px;
  border-radius: 3px;
  transform-origin: 50%;
  transition: transform 0.3s linear, top 0.3s linear;
}
#menu_button > div:after {
  content: '';
  position: absolute;
  display: inline-grid;
  width: 28px;
  height: 4px;
  bottom: -10px;
  background-color: white;
  border-radius: 3px;
  transform: rotate(0deg);
  transform-origin: 50%;
  transition: transform 0.3s linear, bottom 0.3s linear;
}

.desktop #menu_button {
  width: 36px;
  height: 36px;
}

#menu_button > div {
  width: 22px;
  height: 4px;
}
#menu_button > div:before {
  width: 22px;
  height: 4px;
  top: -8px;
}
#menu_button > div:after {
  width: 22px;
  height: 4px;
  bottom: -8px;
}
/*/// ++++*/
.menuOn #menu_button {
  background-color: darkmagenta;
  /*justify-self: end;*/
}

.menuOn #menu_button > div {
  background-color: transparent;
  transform: rotate(180deg);
}

.menuOn #menu_button > div:before {
  top: 0;
  transform: rotate(-45deg);

}
.menuOn #menu_button > div:after {
  bottom: 0;
  transform: rotate(45deg);
}


.desktop #menu_button {
  background-color: darkmagenta;
  cursor: pointer;
  display: none;
}

@media only screen and (max-width: 1024px) {
  .desktop #menu_button {
    background-color: darkmagenta;
    cursor: pointer;
    display: inline-grid;
  }
}

.desktop #menu_button:hover {
  background-color: magenta;
}

.desktop #menu_button > div {
  opacity: 1;
}

.menuShell {
  display: none;
  position: relative;
  pointer-events: none;
  width: 212px;
  left: calc(-100% - 32px);
  transition: left 0.25s linear;
}

/*.menuShell a,*/
.menuShell > div {
  position: relative;
  pointer-events: all;
  color: magenta;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 12px;
  border: 2px solid magenta;
  border-radius: 9px;
  text-align: center;
  margin: 10px 0;
  /*width: 100%;*/
  width: 170px;
}

.menuShell > div > div {
  pointer-events: none;
}
.menuShell a {
  color: darkmagenta;
}
.menuShell a:hover {
  color: white;
}

.menuIcon {
  position: relative;
  padding: 4px 12px !important;
  display: inline-grid;
  grid-template-columns: auto 32px;
  /*width: calc(100% - 32px);*/
  align-items: center;
}
.menuIcon > div:first-child {
  justify-self: start;
}
.ico_SignIn {
  position: relative;
  width: 24px;
  height: 24px;
  background-position: center !important;
  background-size: auto 100% !important;
  background-repeat: no-repeat !important;
  background: url(assets/img/icon_sign_in_magenta.svg);
  justify-self: end;
}
.menuIcon:hover:hover .ico_SignIn {
  background: url(assets/img/icon_sign_in_white.svg);
}

.desktop .menuShell a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  background-color: transparent;
}
.desktop .menuShell a,
.desktop .menuShell > div {
  font-size: 14px;
  color: white;
}
.menuShell > div:first-child {
  /*border-top: none;*/
}

.menuShell > div:last-child {
  border-bottom: 2px solid magenta;
}

.desktop .menuOff .menuShell,
.menuOn .menuShell {
  display: inline-grid;
  justify-content: center;
  justify-items: center;
  align-content: start;
  left: 0;
}

@media only screen and (max-width: 1024px) {
  .menuShell {
    margin-top: 20px;
  }

  /*.menuShell > div:first-child {    border-top: 2px solid lightgray;  }*/

  .desktop .menuOff .menuShell {
    display: none;
  }
}


.desktop .menuShell > div {
  cursor: pointer;
}
.desktop .menuShell a:hover,
.desktop .menuShell > div:hover {
  background-color: darkmagenta;
  color: white;
}

.menu_bold_button,
#menu_sign_up {
  display: inline-grid;
  font-weight: 600;
  padding: 16px !important;
  color: white;
  box-shadow: 0px 0px 9px rgba(0, 0, 139, 0.5);
  text-transform: uppercase;
  border-radius: 13px;
  background-color: #3f0036;
  font-size: 16px;
  border: none;
  text-align: center;
}

.menu_bold_button,
#menu_sign_up:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 4px solid magenta;
  border-radius: 11px;
}

@media(pointer : fine) {
  .menu_bold_button:hover,
  #menu_sign_up:hover {
    background-color: magenta;
  }
  .menu_bold_button:hover:before,
  #menu_sign_up:hover:before {
    border: 4px solid white;
  }
}

.menu_bold_button {
  justify-self: end;
}

.captchaTemp {
  position: relative;
  margin-top: 20px;
  justify-self: center;
}
.captchaTemp img {
  width: 100%;
  height: auto;
  max-width: 320px;
}

#userControls {
  position: fixed;
  display: inline-grid;
  left: var(--siteGap);
  right: var(--siteGap);
  bottom: var(--siteGap);
  top: var(--siteGap);
  pointer-events: none;
  user-select: none;
}

#userControls > div {
  position: relative;
  display: inline-grid;
  align-content: start;
}

.socialLinks {
  position: relative;
  display: inline-grid;
  grid-row-gap: 12px;
  justify-self: end;
  pointer-events: none !important;
  display: none;
}
.desktop .socialLinks {
  top: var(--menuBarHeight);
}

.socialLinks > div {
  position: relative;
  display: inline-grid;
  width: 32px;
  height: 32px;
  background-color: var(--iconBG);
  padding: 8px;
  border-radius: 5px;
  pointer-events: all !important;
  cursor: pointer;
}

.memberVideoOn .socialLinks {
  margin-right: var(--siteGap);
}
.desktop .socialLinks > div {
  background-color: darkmagenta;
}
.desktop .socialLinks > div:hover {
  background-color: magenta;
}

.socialLinks > div > div {
  position: relative;
  display: inline-grid;
  background-size: 100% auto !important;
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat !important;
  opacity: 0.8;
  pointer-events: none;
}

.desktop .socialLinks > div > div {
  opacity: 1;
}


#controls_chat > div {
  background: url(assets/img/icon_chat.svg);
}

#controls_like > div {
  background: url(assets/img/icon_heart.svg);
}


.desktop .uiShell {
  display: inline-grid;
  width: 100%;
  height: 100%;
  justify-self: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  left: var(--menuOffset);
}

.memberVideoOn {
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  left: 0 !important;
}

.desktop .uiShell > div {
  /*position: absolute !important;*/
  /*pointer-events: all !important;*/
  height: 100dvh;
}

.desktop #userControls {
  top: 36px;
  width: 580px;
  height: var(--poraitHeight);
  justify-self: center;
}

.memberVideoOn #userControls {
  width: 100%;
  height: 100%;
}

.desktop .memberVideoOn #userControls {
  top: var(--siteGap);
}

#member_video_close {
  position: relative;
  display: none;
  width: 48px;
  height: 48px;
  background-color: rgba(139, 0, 139, 0.6);
  border-radius: 8px;
  justify-self: center;
  margin-top: var(--siteGap);
  pointer-events: all !important;
  cursor: pointer;
}
.desktop #member_video_close {
  margin-top: 0;
}

#member_video_close:hover {
  background-color: magenta;
}

#member_video_close > div {
  position: relative;
  display: inline-grid;
  font-weight: 600;
  font-size: 36px;
  justify-self: center;
  align-self: center;
  pointer-events: none;
}

.memberVideoOn #member_video_close {
  display: inline-grid;
}

.desktop .media {
  height: 100%;
  max-width: var(--maxPortraitWidth);
  justify-content: center;
  background-size: cover !important;
}

.desktop .media:before {
  content: '';
  display: none;
}

.desktop .content {
  border-radius: 4px 4px 24px 24px;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
}
.desktop #muteAlert {
  display: inline-grid;
  top: 64px;
  height: 50px;
  align-content: start;
}
.desktop #muteAlert > div {
  left: initial;
  top: initial;
}
#tempTarget {
  position: absolute;
  right: 0px;
  top: 0px;
  font-weight: 600;
  color: lightgray;
  padding: 4px;
  background-color: black;
  font-size: 10px;
}

.desktop #memberStreamBlock {
  opacity: 1;
  pointer-events: all !important;
  background-color: black !important;
}
.desktop #memberStreamBlock video {
  width: 100% !important;
  height: auto !important;
}
.iframe {
  width: 100%;
  height: 100%;
}
.iframe iframe {
  width: 100% !important;
  /*height: auto !important;*/
}

.memberControls {
  position: absolute;
  display: inline-grid;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s linear;
}
.memberControls > div {
  position: absolute;
  display: inline-grid;
  width: 64px;
  height: 64px;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: all;
  align-self: center;
  cursor: pointer;
}
.memberControls > div:after {
  content: '';
  position: absolute;
  display: inline-grid;
  width: 0;
  height: 0;
  align-self: center;
}

.desktop .memberControls > div:hover {
  background-color: magenta;
}

.mcOn {
  opacity: 1;
}
.mcOn > div {
  background-color: rgba(139, 0, 139, 0.5);
  /*pointer-events: all;*/
}

#member_button_left {
  left: 10px;
  border-radius: 9px;
}
#member_button_left:after {
  left: 20px;
  border-top: 12px solid transparent;
  border-right: 16px solid rgba(255, 255, 255, 0.8);
  border-bottom: 12px solid transparent;
}
#member_button_right {
  right: 10px;
  border-radius: 9px;
}
#member_button_right:after {
  right: 20px;
  border-top: 12px solid transparent;
  border-left: 16px solid rgba(255, 255, 255, 0.8);
  border-bottom: 12px solid transparent;
}
.memberContent {
  position: absolute;
  display: inline-grid;
  top: 4px;
  right: 4px;
  left: 4px;
  bottom: 4px;
  width: auto;
  height: auto;
  user-select: none;
  pointer-events: none;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 12px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: opacity 0.5s linear;
  opacity: 1;
  text-align: center;
  color: #393939;
}
.memberContent > div {
  position: relative;
  display: inline-grid;
  align-content: start;
  grid-row-gap: 0;
  justify-content: center;
  pointer-events: all;
  overflow-y: scroll;
  padding: 10px;
}

.mcCopy {
  display: inline !important;
  text-align: left;
  letter-spacing: normal;
  font-size: 16px;
  padding: 20px 10px;
}
.mcCopy b {
  font-size: 16px !important;
}

.desktop .memberContent {
  border-radius: 32px;
}
.desktop .memberContent > div {
  overflow-y: hidden;
}

.memberContent > div > div {
  position: relative;
  display: inline-grid;
}

.memberContent h2 {
  font-size: 24px;
  font-weight: 600;
  color: white;
  background-color: darkmagenta;
  border-radius: 5px;
  padding: 9px;
  box-shadow: 0px 0px 9px rgba(0, 0, 139, 0.2);
  border: 5px solid magenta;
  margin: 0;
  text-transform: uppercase;

}
.memberContent h3,
.memberContent b {
  color: darkmagenta;
  font-size: 20px;
}
.memberContent h3 {
  margin: 0 0 12px 0;
}

.memberContent .legal {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  line-height: 11px;
  color: gray;
}
.memberContent .legal > div:before {
  display: none;
}

.memberButton {
  font-weight: 600;
  padding: 16px;
  color: white;
  margin: 10px 0;
  box-shadow: 0px 0px 9px rgba(0, 0, 139, 0.2);
  text-transform: uppercase;
  border-radius: 13px;
  background-color: black;
}

.memberButton:before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 4px solid magenta;
  border-radius: 11px;
}

@media (pointer: fine) {
  .memberButton {
    cursor: pointer;
  }
  .memberButton:hover {
    background-color: darkmagenta;
  }

}
.entranceBlock h2 {
  font-size: 24px;
  /*color: black;*/
  margin: 10px 0;
}

.legal {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  line-height: 16px;
  display: inline-grid;
  grid-row-gap: 16px;
}
.legal > div {
  position: relative;
  display: inline-grid;
}
.legal > div:before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: red;
  left: -8px;
  top: 4px;
}

.memberContent > div > div:nth-child(5) {
  margin-top: 8px;
}

#popOver {
  position: fixed;
  display: none;
  z-index: 3;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: black;
  border: 3px solid magenta;
  border-radius: 18px;
  pointer-events: all;
  padding: var(--siteGap);
}



#popOver > div {
  position: relative;
  display: inline-grid;
  overflow-y: auto;
  align-content: start;
}

.desktop #popOver {
  position: fixed;
  display: none;
  z-index: 3;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 0;
  overflow-y: auto;
}
.eTop #popOver {
  top: 32px;
}

.desktop #popOver > div:not(#pop_close) {
  justify-self: center;
  align-self: start;
  max-width: 640px;
  border-radius: 18px;
  background-color: black;
  border: 3px solid magenta;
  justify-content: center;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  padding: 20px 10px 10px 10px;
  overflow-x: hidden;
}

.credit_radio {
  width: 16px;
  height: 16px;
}

#popOver h2 {
  margin: 0 0 20px 0;
  color: white;
  text-shadow: 1px 4px 5px #ff00ff;
  min-width: 290px;
}

.popOn {
  display: inline-grid !important;
}
#pop_close {
  position: fixed !important;
  display: inline-grid;
  z-index: 1;
  right: 9px;
  top: 9px;
  width: 40px;
  height: 40px;
  background-color: darkmagenta;
  border-radius: 9px;
  user-select: none;
  justify-content: center;
}
.desktop #pop_close {
  position: absolute !important;
  cursor: pointer;
  right: 4px;
  top: 4px;
  width: 32px;
  height: 32px;
  border-radius: 6px 11px 6px 6px;
}
.desktop #pop_close:hover {
  background-color: magenta;
}
#pop_close > div {
  pointer-events: none;
  position: relative;
  display: inline-grid;
  width: 28px;
  height: 4px;
  top: 18px;
}
.desktop #pop_close > div {
  top: 14px;
  width: 21px;
}
#pop_close > div:before {
  content: '';
  position: absolute;
  display: inline-grid;
  width: inherit;
  height: 4px;
  background-color: white;
  top: 0;
  border-radius: 3px;
  transform: rotate(45deg);
}
#pop_close > div:after {
  content: '';
  position: absolute;
  display: inline-grid;
  width: inherit;
  height: 4px;
  top: 0;
  background-color: white;
  border-radius: 3px;
  transform: rotate(-45deg);
}

.contentSignIn,
.contentSignUp {
  display: none;
  /*position: relative;*/
  /*color: darkmagenta;*/
}
#contentMessage {
  padding-right: 24px;
  line-height: 20px;
  font-size: 16px;
  margin-bottom: 20px;
}
#contentMessage b {
  color: #ffbbff;
  text-shadow: 1px 4px 5px blue;
}
#memberAcccountShell,
#memberAcccountShell > div,
.signIn .contentSignIn,
.signUp .contentSignUp {
  display: inline-grid;
}
#creditForm {
  background-color: transparent;
  display: inline-grid;
}
#creditForm > div {
  display: inline-grid;
  grid-row-gap: 10px;
}
#creditForm > div > div {
  display: inline-grid;
}

#creditForm h4 {
  margin: 0;
  font-weight: 400;
}
#creditForm select {
  height: 30px;
  border-radius: 4px;
}
#submit_payment {
  margin-top: 20px;
  display: block !important;
}
.cardSelect input {
  width: 16px;
  height: 16px;
}
.credit_Date > div {
  display: inline-grid;
  grid-template-columns: auto auto;
}
.member_errors {
  background: yellow;
  padding: 16px 0 0 0;
  border-radius: 9px;
  margin-top: 20px;
  justify-content: center;
}

.memberTabs {
  display: flex !important;
  margin: 20px 0 0 0;
  column-gap: 10px;
}
.memberTabs > div {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
}
.tabOn {
  background-color: darkmagenta;
  color: white;
  pointer-events: none;
}

.tabOff {
  margin-bottom: 4px;
  border-radius: 6px !important;
}

.memberTabs .tabOff {
  opacity: 0.5;
}
.paymentGo .tabOff {
  background-color: #f3f3f3;
  color: darkmagenta;
  opacity: 1;
  cursor: pointer;
}


.paymentGo .tabOff:hover {
  background-color: black;
  color: white;
}

.popOverForm {
  position: relative;
  display: inline-grid;
  /*margin: 20px 0;*/
  margin: 0;
  padding: 16px 16px 24px 16px;
  background-color: #f3f3f3;
  border-radius: 9px;
}
#memberAcccountShell .popOverForm {
  padding: 0 16px 24px 16px;
}

.popOverForm > form,
.popOverForm > fieldset {
  display: inline-grid;
}
.popOverForm > div {
  grid-row-gap: 20px;
}

.contentAccount .popOverForm {
  margin-top: 0;
  border-radius: 0 9px 9px 9px;
  width: calc(100% - 32px);
}
.contentAccount .popOverForm {
  /*grid-row-gap: 20px;*/
}
.contentAccount .popOverForm > div:first-child {
  margin: 0 0 10px 0;
}
.contentAccount .popOverForm > div:nth-child(3) {
  margin: 20px 0;
}
.contentHelp,
.contentCancel,
.contentAccount {
  display: none;
  color: darkmagenta;
  max-width: 400px;
}
.help .contentHelp,
.cancel .contentCancel,
.account .contentAccount {
  display: inline-grid !important;
}

.contentHelp fieldset {
  margin: 0 0 20px 0;
}
.contentHelp textarea {
  min-width: 216px;
  max-width: 368px;
  /*width: 368px;*/
}
.contentHelp label {
  margin-bottom: 16px !important;
}

.managePassword {
  background-color: lightyellow;
  padding: 16px 16px 32px 16px;
  border-radius: 9px;
}
.contentAccount h3 {
  margin: 4px 0;
}
.managePassword,
.managePassword > div {
  position: relative;
  display: inline-grid;
  grid-row-gap: 8px !important;
}
.manageButtons {
  display: flex;
  justify-content: end;
  column-gap: 12px;
}
.manageButtons > div {
  display: inline-flex;
}
.managePassword > fieldset {
}
.managePassword .hidePassword {
  margin-top: 4px;
}

.signup_errors {
  background-color: yellow;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
}
.signUpBlock {
  display: inline-grid;
}
.signUpBlock fieldset {
  width: 100%;
}


#UserApproved,
#passwordForm,
#passwordForm div,
#UserApproved {
  position: relative;
  display: inline-grid;
}
#UserApproved {
  padding: 0 0 20px 0;
  display: none;
}
#passwordForm {
  width: 100%;
  grid-row-gap: 12px;
}
#passwordForm fieldset {
  border: none;
  padding: 0;
  margin: 0;
  grid-row-gap: 8px;
}

#submit_password {
  margin-top: 12px;
}

#memberAcccountShell .popOverForm {
  /*margin: 0 0 20px 0;*/
  margin: 0;
  border-radius: 0 9px 9px 9px;
}
.formOff {
  display: none !important;
}
.formOn {
  display: inline-grid !important;
}

.issue,
.approved {
  background-color: #00b600;
  border: 3px solid yellow;
  padding: 16px 8px;
  color: white;
  border-radius: 9px;
  text-align: center;
}
.issue {
  border: 3px solid red;
  background-color: darkred;
}

.offForm,
.popOverForm form,
.popOverForm fieldset {
  position: relative;
  display: inline-grid;
  border: none;
  outline: none;
  padding: 0;
}
.offForm,
.popOverForm form {
  grid-row-gap: 20px;
}
.popOverForm p {
  position: relative;
  display: inline-grid;
  margin: 0;
}

#rememberme {
  width: 16px;
  height: 16px;
  top: 2px;
}

.login-remember,
.login-submit {
  justify-self: end;
}
.login-lost {
  color: darkmagenta;
}
.passInstructions {
  font-size: 14px;
  line-height: 18px;
  max-width: 320px;
  margin-bottom: 20px;
}

.popOverForm form {
  width: 100%;
}

#passwordForm input,
.popOverForm input {
  position: relative;
  display: inline-grid;
}

#passwordForm input,
.popOverForm input {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid darkmagenta;
}

.passwordReq {
  margin: 20px 0;
  color: #585858;
}
.passwordReq > div {
  margin: 6px 0;
}

.passShow {
  position: absolute !important;
  width: 27px;
  height: 27px;
  right: 4px;
  bottom: 2px;
  cursor: pointer;
  display: none !important;
}

.passShow a {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
}

.hidePassword > div:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 8px;
  background-color: transparent;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 2px solid darkmagenta;
  /*border-right: 1px solid magenta;*/
  border-bottom: 0;
  pointer-events: none;
  left: 5px;
  top: 8px;

}
.hidePassword > div:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: darkmagenta;
  left: 10px;
  top: 12px;
  pointer-events: none;
}

.showPassword > div:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 8px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 2px solid darkmagenta;
  /*border-left: 1px solid magenta;*/
  /*border-right: 1px solid magenta;*/
  border-bottom: 0;
  pointer-events: none;
  left: 5px;
  top: 11px;
  transform: rotate(180deg);
}
.showPassword > div:after {
  content: '';
  display: none;
}

::placeholder {
  color: lightgray;
}

.popOverForm label {
  font-weight: 400;
  margin-bottom: 4px;
  color: darkmagenta;
}
.submitButton,
.popOverForm input[type="submit"] {
  position: relative;
  display: inline-grid;
  background-color: darkmagenta;
  color: white;
  border: none;
  outline: none;
  padding: 8px 24px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.inputError {
  border: 2px solid red !important;
  background-color: yellow;
}
.popOverForm input[type="checkbox"] {
  cursor: pointer;
}
.popOverForm input[type="checkbox"]:checked {
  height: 16px;
  width: 16px;
}
#creditErrors {
  margin-bottom: 20px;
}
#passwordErrors,
#creditErrors,
#formErrors {
  position: relative;
}
#passwordErrors {
  margin-bottom: 20px;
}
#passwordErrors > div,
#creditErrors > div,
#formErrors > div {
  padding: 4px;
  border-radius: 4px;
  background-color: #b7009b;
  color: white;
  margin: 4px 0;
  text-align: center;
  border: 2px solid yellow;
}

@media (pointer: fine) {
  .submitButton:hover,
  .popOverForm input[type="submit"]:hover {
    background-color: black;
  }
}

#proccessingCheck {
  position: absolute;
  display: none;
  justify-content: center;
  align-content: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
#proccessingCheck > div {
  position: relative;
  display: inline-grid;
  width: 160px;
  height: 160px;
  align-items: center;
  justify-items: center;
}
#proccessingCheck > div > div {
  background-color: green;
  border: 2px solid #1eff00;
  padding: 8px;
  border-radius: 9px;
  color: white;
}
.loadingOn > div > div {
  background-color: blue !important;
}
/*
.loader > div:before {
  content: '';
  position: absolute;
  --b: 3px;
  display: inline-grid;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: darkmagenta;
  mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
*/


.popOverForm .siteButton {
  justify-self: end;
  osition: relative;
  display: inline-grid;
  background-color: darkmagenta;
  color: white;
  border: none;
  outline: none;
  padding: 8px 24px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 600;
}
.desktop .popOverForm .siteButton:hover {
  background-color: black;
}
.entranceBlock {
  display: grid;
  position: relative;
  /*background: white;*/
  align-content: start;
  justify-content: center;
  text-align: center;
  color: white;
  font-size: 20px;
  overflow-y: auto;
}
.entranceBlock h1 {
  color: white;
  text-transform: uppercase;
  background-color: red;
  padding: 20px 40px;
  border-radius: 9px;
  font-size: 28px;
  justify-self: normal;
  margin: 0 0 20px 0;
}
.entranceBlock b {
  font-size: 24px;
}
.entranceBlock span {
  color: black;
  font-weight: 800;
}
.entranceBlock > div {
  position: relative;
  display: inline-grid;
  width: auto;
  padding: var(--siteGap);
  justify-items: center;
  max-width: 640px;
}
.entranceBlock > div > div {
  margin-bottom: 20px;
}
.entranceLogo {
  position: relative;
  display: inline-grid;
  width: 100%;
  font-size: 2em;
  font-family: var(--font_Aclonicia);
  margin: 20px 0 40px 0 !important;
  grid-row-gap: 10px;
}
@media screen and (max-width: 640px) {
  .entranceLogo {
    font-size: 1.4em;
  }
}

.menuLogo {
  position: absolute !important;
  display: inline-grid;
  width: calc(100% - 20px);
  height: auto;
  bottom: 0;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

.logoText {
  display: flex;
  justify-self: center;
  text-transform: uppercase;
  column-gap: 3px;
}
.logoText > div:last-child {
  font-size: 9px;
}

.entranceLogo > div:first-child {
  min-height: 172px;
}

.menuLogo > div:first-child,
.entranceLogo > div:first-child {
  position: relative;
  display: inline-grid;
  width: 100%;
  height: 100%;
  background-size: auto 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  justify-self: center;
}

.menuLogo > div:first-child {
  height: 56px;
}
.menuCopy {
  display: block;
  position: relative;
  text-align: center;
}
.menuCopy h3 {
  font-size: 16px;
  /*margin: 0;*/
  color: white;
  font-family: var(--font_Aclonicia);
  margin: 4px 0 0 0 !important;
}
.menuCopy > div {
  font-size: 10px;
  margin: 4px 0 0 0;
  color: gray;
}


.buttonBase {
  position: relative;
  display: inline-grid;
  cursor: pointer;
  padding: 20px 40px;
  border-radius: 50px;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 5px solid red;
  letter-spacing: 1px;
  margin: 8px 0;
}
.buttonBase:before {
  content: '';
  border: 2px solid white;
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  border-radius: 43px;
}
.buttonBase div {
  color: red;
  margin-bottom: 10px;
}
.buttonBase:hover {
  background-color: red;
}
.buttonBase:hover div {
  color: white;
}
.copyright {
  font-size: 12px;
  padding-bottom: 40px;
}
a {
  text-decoration: none;
  color: white;
}
/*
#safariFix {
  position: absolute !important;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100dvh;
  height: 100dvh;
  background-color: black;
  user-select: none;
  pointer-events: none !important;
  opacity: 1;
  transition: opacity 0.25s linear;
  background-size: cover !important;
  background-position: center !important;
}
*/
/*
#safariFix img {
  display: inline-grid;
  width: auto;
  height: 100%;
  justify-self: center;
  align-self: center;
  pointer-events: none;
}
*/

.userAlerts {
  position: absolute;
  display: inline-grid;
  width: calc(100dvw - var(--siteGapDouble) );
  height: auto;
  padding: var(--siteGap);
  pointer-events: none;
}
.alertsVideo {
  position: relative;
  display: inline-grid;
}
.desktop .alertsVideo {
  max-height: var(--poraitHeight);
}

#member_button_signUp {
  position: fixed;
  display: inline-grid;
  width: auto;
  background-color: rgba(84, 0, 84, 0.8);
  padding: 8px 12px;
  right: 0;
  bottom: var(--siteGap);
  font-size: 12px;
  text-align: center;
  border-radius: 15px 0 0 15px;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.6);
  user-select: none;
  border: 2px solid #e400e4;
  border-right: none;
  transition: bottom linear 0.25s;
  cursor: pointer;
  pointer-events: all;
}

#member_button_signUp > div {
  pointer-events: none;
  display: inline-grid;
  grid-row-gap: 4px;
}
#member_button_signUp > div > div:first-child {
  font-weight: 600;
}
#member_button_signUp > div > div:last-child {
  background-color: rgba(255, 0, 255, 0.25);
  padding: 4px 4px;
  border-radius: 9px;
}

#member_button_video {
  position: fixed;
  display: inline-grid;
  width: auto;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 8px 20px 8px 12px;
  right: 0;
  bottom: var(--siteGap);
  font-size: 12px;
  text-align: center;
  border-radius: 15px 0 0 15px;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.6);
  user-select: none;
  overflow: hidden;
  transition: bottom linear 0.25s;
  cursor: pointer;
  pointer-events: all !important;
  border: 2px solid magenta;
  border-right: none;
}
.desktop #member_button_video {
  padding: 8px 12px 8px 12px;
}

#member_button_video:before {
  content: '';
  position: absolute;
  width: 46px;
  height: 16px;
  right: -22px;
  top: 0;
  transform: rotate(45deg);
  /*background-color: #880088;*/
  background: linear-gradient(90deg, magenta 25%, #880088);
}
#member_button_video:after {
  content: '';
  position: absolute;
  width: 46px;
  height: 16px;
  right: -22px;
  bottom: 0;
  transform: rotate(-45deg);
  /*background-color: #880088;*/
  background: linear-gradient(90deg, magenta 25%, #880088);
}
.desktop #member_button_video:before,
.desktop #member_button_video::after {
  /*background-color: transparent;*/
  display: none;
}

#member_button_video > div {
  pointer-events: none;
  display: inline-grid;
  grid-row-gap: 4px;
}
#member_button_video > div > div:first-child {
  font-weight: 600;
}
#member_button_video > div > div:last-child {
  background-color: rgba(136, 0, 136, 0.5);
  padding: 4px;
  border-radius: 9px;
}
.desktop #member_button_video > div > div:last-child {
  font-size: 14px;
  padding: 8px;
}

.alertOn #member_button_signUp,
.alertOn #member_button_video {
  bottom: 76px;
}



.desktop #member_button_video,
.desktop #member_button_signUp {
  /*top: var(--siteGap);*/
  bottom: initial !important;
  right: 36px;
  border-right: 2px solid magenta;
  border-radius: 15px;
  pointer-events: all !important;
}

.memberVideoOn #member_button_video,
.memberVideoOn #member_button_signUp {
  right: 96px;
}

.desktop #member_button_video {
  background-color: rgba(84, 0, 84, 0.8);
}

.desktop #member_button_video:hover,
.desktop #member_button_signUp:hover {
  background-color: magenta;
}

@media (orientation: landscape) {

  @media (max-device-height: 360px) {

    #member_button_video,
    #member_button_signUp {
      top: 0;
      bottom: initial !important;
      right: 96px;
      border-top: 4px solid #e400e4;
      border-right: none;
      /*transition: tope linear 0.25s;*/
      border-radius: 0 0 15px 15px;
    }

  }
}


/*TEMP DELETE*/
/*TEMP DELETE*/
.creditPlaceHolderPage {
  position: relative;
  display: inline-grid;
  min-height: 320px;
  background-color: white;
  align-content: start;
  padding: var(--siteGap);
  color: #4f4f4f;
  overflow-y: scroll;
}
.creditPlaceHolderPage > div {
  position: relative;
  display: inline-grid;
  max-width: 768px;
  justify-self: center;
}

.creditPlaceHolderPage > div > div:first-child {
  text-align: center;
  margin: 0 0 20px 0;
  line-height: 22px;
}
.creditPlaceHolderPage > div > div:first-child > div {
  margin: 10px 0 0 0;
}

.creditPlaceHolderPage h1 {
  text-align: center;
  color: darkblue;
  margin: 0 0 20px 0;
  font-size: 32px;
  line-height: 34px;
}
.creditFormXX {
  position: relative;
  display: inline-grid;
  grid-row-gap: 10px;
  background-color: rgba(173, 216, 230, 0.25);
  padding: 20px;
  border: 2px solid darkgray;
}

.creditPlaceHolderPage fieldset {
  outline: none;
  border: none;
  grid-template-columns: max-content auto;
}
.tempBorder {
  border-bottom: 1px solid gray;
  margin: 10px 0;
}

.creditPlaceHolderPage label {
  margin: 0 0 4px 0;
  font-weight: 600;
  color: gray;
}
.creditPlaceHolderPage input {
  position: relative;
  width: 100%;
  padding: 4px;
  border: 2px solid gray;
}
.creditButton {
  background-color: darkblue;
  color: white;
  width: 100%;
  border: none;
  outline: none;
  padding: 8px 24px !important;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 600;
  justify-self: center;
}

#tempApproved .creditButton {
  margin: 0;
}

.creditPlaceHolderPage .tempLegal {
  font-size: 11px;
  margin: 40px 0;
  text-align: center;

}

#creditPopOver {
  position: fixed;
  left: 0;
  right: 0;
}

.cardsField {
  grid-row-gap: 16px;
  margin-bottom: 20px;
}
#creditForm legend {
  margin: 40px 0 10px 0;
}
.creditCards {
  display: inline-grid;
  grid-template-columns: 20px auto;
  grid-column-gap: 8px;
  align-content: center;
  align-items: center;
}
.creditCards label {
  margin-bottom: 0;
}
.cards {
  display: flex;
  column-gap: 6px;
}
.cards > div {
  display: inline-flex;
  height: 32px;
  width: 48px;
  column-gap: 4px;
  background-color: lightgray;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  overflow: hidden;
  border: 1px solid darkmagenta;
}

.VISA { background: url("assets/img/card_visa.png"); }
.MasterCard { background: url("assets/img/card_mastercard.png"); }
.DinerClub { background: url("assets/img/card_dinerclub.png"); }
.JCB { background: url("assets/img/card_jcb.png"); }
.Moestro { background: url("assets/img/card_maestro.png"); }
.PayPal { background: url("assets/img/card_paypal.png"); }


.landscapeSlide {
  position: absolute;
  display: inline-grid;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.landscapeSlide > div:first-child {
  background-color: black;
}
.landscapeSlide > div:last-child {
  box-shadow: 0 0 13px black;
}
.landscapeSlide > div {
  position: absolute;
  display: inline-grid;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: black;
  align-items: center;
}
.landscapeSlide img {
  width: 100%;
  height: auto;
}

.birthDate select,
.birthDate label,
.birthDate fieldset,
.birthDate fieldset > div,
.birthDate {
  position: relative;
  display: inline-grid;
}
.birthDate {
  /*color: black;*/
  /*background-color: #dbdbdb;*/
  border: 2px solid red;
  border-radius: 9px;
  padding: 20px 20px 40px 20px;
  width: calc(100% - 40px);
  grid-row-gap: 10px;
  /*margin-top: 20px;*/
}
.birthDate fieldset {
  border: none;
  grid-template-columns: auto auto auto;
  align-content: center;
  grid-column-gap: 20px;
}
.birthDate label {
  color: white;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
.birthDate select {
  height: 30px;
  border-radius: 5px;
  border: 2px solid red;
  cursor: pointer;
}
#notValid {
  background-color: red;
  padding: 8px;
  color: white;
  border-radius: 9px;
}


/*TEMP DELETE*/


/*TEMP DELETE*/