body.page-user{
	background: #262626;
	color: #fff;
	margin:0;
	padding:0;
	font-family: var(--font-family);
}

body.page-user.sensitive{
	background: #000;
}

.page-container a, .page-user a:active, .page-user a:visited, .page-container .user-social-icons a{
	opacity:.9
}

.page-container a:focus, .page-user a:hover, .page-container .user-social-icons a:hover{
	opacity:1;
}
.page-container{
	height:100%
}

.page-container * {
	line-height: normal;
	box-sizing: unset;
}

.page-content a{
	text-decoration: none; 
}
.page-content{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  background-size: 0 0;
  width: 100%;
  height: 100%;
  position:fixed
}

.page-content::before {
  content: "";
  z-index: -1;
  position: inherit;
  left: inherit;
  top: inherit;
  width: inherit;
  height: inherit;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(100px);
  transform: scale(1.2);
  will-change: filter;
}

.page-wrap{
	width: 100%;
	box-sizing: border-box;
	margin-right: auto;
	display: block;
	margin-left: auto;
}

@media (min-width: 600px) {
  .page-content .page-wrap {
    max-width: 600px;
	width: 100%;
  }
}

.page-content .layout-image img{
	vertical-align: middle;
	border-style: none;
}

.page-content .content-btn {
  display: inline-flex;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  outline: 0px;
  margin: 0px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  z-index:0
}

.page-content .text-content{
	font-size: 16px;
	line-height: normal;
	word-wrap: anywhere;
	line-height: 1.625;
	white-space: pre-wrap;
}

.page-sensitive{
	background: #000;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	text-align:center;
	top:0;
    bottom: 0;
    left: 0;
    right: 0;
    position:absolute;
	margin: auto;
	max-width:400px;
	max-height:200px;
	width: 100%;
	height: 100vh;
}

.page-sensitive-title{
	font-size:2rem;
}
.page-sensitive-text{
	font-size:1rem;
}
.page-sensitive-btn, .link-sensitive-btn{
	cursor:pointer;
	outline:none;
	width: calc(100% - 1rem);
	color: #000;
	background-color: #fff;
	font-size: 1rem;
	font-weight: bolder;
	white-space: nowrap;
	border-radius: 5px;
	height:3rem;
	margin-top:.5rem;
	opacity:.7
}
.link-sensitive-btn{
	font-size:13px;
	height:2rem;
}

.page-sensitive-btn:hover, .link-sensitive-btn:hover {
  background-color: #fff;
  opacity: 1
}

.link-sensitive-content{
	background: #111;
	padding:.5em;
	margin-left:3em;
	margin-right:3em;
	opacity: 0.7
}
.link-sensitive-title{
	color: #fff;
	font-size:1rem;
	margin:0;
}
.link-sensitive-text{
	color: #fff;
	font-size:.7rem;
	margin:0;
	margin-bottom:.5rem
}
.link-sensitive-text-dob{
	color: #eee;
	font-size:.7rem;
}

.link-sensitive-text-dob-error{
	font-size:.9rem;
	margin-top:.5em;
	color: #f00;
	opacity: 0.7
}

.link-sensitive-dob{
	outline:none;
	cursor:pointer;
	font-size: 18px;
	font-weight: bolder;
	text-align: center;
	border-radius: 5px;
	height:1.5rem;
	margin-top:.5em;
	padding: .2em;
	width:100px;
	opacity: 0.7
}

.page-container video {
  min-width: 100%; 
  min-height: 100%; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.page__footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: auto;
  scrollbar-width: none;
  width:100%
}

.page__footer__content{
  margin:0 auto;
  max-width:480px;
  width:100%
}

.page__footer ul{
	display:flex;
	justify-content:space-between;
	float:none;
	list-style:none;
	padding-left: 1rem;
	padding-right:1rem
}
.page__footer ul li{
	font-size:11px;
	line-height:1rem;
}
.page__footer a{
	font-family: var(--font-family);
}
.page__footer a, .page__footer a:visited,  .page__footer a:hover{
	display:block;
	position:relative;
	text-decoration:none;
	opacity: .7;
	color: var(--color-text)
}

.page__footer a:hover{
	text-decoration:none;
	opacity: 1;
	color: var(--color-text)
}

.hidden{
	display:none
}
.overflow-hidden{
	overflow:hidden;
}
.absolute{
	position:absolute
}
.w-full{
	width:100%
}
.min-w-0 {
	min-width: 0;
}
.min-w-\[56px\] {
	min-width: 56px;
}
.w-14 {
	width: 3.5rem;
}
.h-full{
	height:100%
}
.relative{
	position:relative
}
.flex{
	display:flex
}
.content-center {
  align-content: center;
}
.items-center {
  align-items: center;
}
.text-left{
	text-align: left !important;
}
.text-right{
	text-align: right !important;
}
.text-center{
	text-align: center !important;
}
.mr-2 {
	margin-right: 8px;
}
.ml-2 {
	margin-left: 8px;
}
.py-4 {
	padding-top: 16px;
	padding-bottom: 16px;
}
.mb-4 {
	margin-bottom: 16px;
}

.basis-1\/2 {
	flex-basis:50%
}
.p-4 {
	padding: 1.5rem !important; }
  
.bottom-6 {
	bottom:1.5rem
}
.top-6 {
	top:1.5rem
}
.top-1\/2 {
	top:50%
}


@keyframes slideInFromRight {
  0% {
    transform:translate(20%);
    opacity:0
  }
  to {
    transform:translate(0);
    opacity:1
  }
}
@keyframes slideInFromLeft {
  0% {
    transform:translate(-20%);
    opacity:0
  }
  to {
    transform:translate(0);
    opacity:1
  }
}
@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  to {
    animation-timing-function:cubic-bezier(.215,.61,.355,1);
    transform:translateZ(0)
  }
  40%,
  43% {
    animation-timing-function:cubic-bezier(.755,.05,.855,.06);
    transform:translate3d(0,-10px,0)
  }
  70% {
    animation-timing-function:cubic-bezier(.755,.05,.855,.06);
    transform:translate3d(0,-10px,0)
  }
  85% {
    transform:translate3d(0,-2px,0)
  }
}
.bounce {
  animation-name:bounce;
  transform-origin:center bottom;
  animation-duration:2s;
  animation-fill-mode:both
}
@keyframes bounce_infinite {
  0%,
  10%,
  26.5%,
  40%,
  to {
    animation-timing-function:cubic-bezier(.215,.61,.355,1);
    transform:translateZ(0)
  }
  20%,
  21.5% {
    animation-timing-function:cubic-bezier(.755,.05,.855,.06);
    transform:translate3d(0,-10px,0)
  }
  35% {
    animation-timing-function:cubic-bezier(.755,.05,.855,.06);
    transform:translate3d(0,-10px,0)
  }
  42.5% {
    transform:translate3d(0,-2px,0)
  }
}
.bounce_infinite {
  animation-name:bounce_infinite;
  transform-origin:center bottom;
  animation-duration:4s;
  animation-fill-mode:both;
  animation-iteration-count:infinite
}
@keyframes jello {
  0%,
  11.1%,
  to {
    transform:translateZ(0)
  }
  22.2% {
    transform:skew(-3.125deg) skewY(-3.125deg)
  }
  33.3% {
    transform:skew(3.125deg) skewY(3.125deg)
  }
  44.4% {
    transform:skew(-3.125deg) skewY(-3.125deg)
  }
  55.5% {
    transform:skew(1.5625deg) skewY(1.5625deg)
  }
  66.6% {
    transform:skew(-.78125deg) skewY(-.78125deg)
  }
  77.7% {
    transform:skew(.390625deg) skewY(.390625deg)
  }
  88.8% {
    transform:skew(-.1953125deg) skewY(-.1953125deg)
  }
}
.jello {
  animation-name:jello;
  transform-origin:center;
  animation-duration:2s;
  animation-fill-mode:both
}
@keyframes jello_infinite {
  0%,
  5.55%,
  50% {
    transform:translateZ(0)
  }
  11.1% {
    transform:skew(-3.125deg) skewY(-3.125deg)
  }
  16.65% {
    transform:skew(3.125deg) skewY(3.125deg)
  }
  22.2% {
    transform:skew(-3.125deg) skewY(-3.125deg)
  }
  27.75% {
    transform:skew(1.5625deg) skewY(1.5625deg)
  }
  33.3% {
    transform:skew(-.78125deg) skewY(-.78125deg)
  }
  38.85% {
    transform:skew(.390625deg) skewY(.390625deg)
  }
  44.4% {
    transform:skew(-.1953125deg) skewY(-.1953125deg)
  }
}
.jello_infinite {
  animation-name:jello_infinite;
  transform-origin:center;
  animation-duration:4s;
  animation-fill-mode:both;
  animation-iteration-count:infinite
}
@keyframes pulse {
  0% {
    transform:scaleZ(1)
  }
  50% {
    transform:scale3d(1.05,1.05,1.05)
  }
  to {
    transform:scaleZ(1)
  }
}
.pulse {
  animation-name:pulse;
  transform-origin:center;
  animation-duration:2s;
  animation-fill-mode:both
}
@keyframes pulse_infinite {
  0% {
    transform:scaleZ(1)
  }
  25% {
    transform:scale3d(1.05,1.05,1.05)
  }
  50% {
    transform:scaleZ(1)
  }
}
.pulse_infinite {
  animation-name:pulse_infinite;
  transform-origin:center;
  animation-duration:4s;
  animation-fill-mode:both;
  animation-iteration-count:infinite
}
@keyframes shake {
  0%,
  to {
    transform:translateZ(0)
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform:translate3d(-5px,0,0)
  }
  20%,
  40%,
  60%,
  80% {
    transform:translate3d(5px,0,0)
  }
}
.shake {
  animation-name:shake;
  transform-origin:center;
  animation-duration:2s;
  animation-fill-mode:both
}
@keyframes shake_infinite {
  0%,
  to {
    transform:translateZ(0)
  }
  5%,
  15%,
  25%,
  35%,
  45% {
    transform:translate3d(-5px,0,0)
  }
  10%,
  20%,
  30%,
  40% {
    transform:translate3d(5px,0,0)
  }
  50% {
    transform:translateZ(0)
  }
}
.shake_infinite {
  animation-name:shake_infinite;
  transform-origin:center;
  animation-duration:4s;
  animation-fill-mode:both;
  animation-iteration-count:infinite
}
@keyframes tada {
  0% {
    transform:scaleZ(1)
  }
  10%,
  20% {
    transform:scale3d(.95,.95,.95) rotate3d(0,0,1,-1.5deg)
  }
  30%,
  50%,
  70%,
  90% {
    transform:scale3d(1.05,1.05,1.05) rotate3d(0,0,1,1.5deg)
  }
  40%,
  60%,
  80% {
    transform:scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-1.5deg)
  }
  to {
    transform:scaleZ(1)
  }
}
.tada {
  animation-name:tada;
  transform-origin:center;
  animation-duration:2s;
  animation-fill-mode:both
}
@keyframes tada_infinite {
  0% {
    transform:scaleZ(1)
  }
  5%,
  10% {
    transform:scale3d(.95,.95,.95) rotate3d(0,0,1,-1.5deg)
  }
  15%,
  25%,
  35%,
  45% {
    transform:scale3d(1.05,1.05,1.05) rotate3d(0,0,1,1.5deg)
  }
  20%,
  30%,
  40% {
    transform:scale3d(1.05,1.05,1.05) rotate3d(0,0,1,-1.5deg)
  }
  50% {
    transform:scaleZ(1)
  }
}
.tada_infinite {
  animation-name:tada_infinite;
  transform-origin:center;
  animation-duration:4s;
  animation-fill-mode:both;
  animation-iteration-count:infinite
}
@keyframes wobble {
  0% {
    transform:translateZ(0)
  }
  15% {
    transform:translate3d(-3%,0,0) rotate3d(0,0,1,-3deg)
  }
  30% {
    transform:translate3d(3%,0,0) rotate3d(0,0,1,3deg)
  }
  45% {
    transform:translate3d(-3%,0,0) rotate3d(0,0,1,-3deg)
  }
  60% {
    transform:translate3d(2%,0,0) rotate3d(0,0,1,2deg)
  }
  75% {
    transform:translate3d(-1%,0,0) rotate3d(0,0,1,-1deg)
  }
  to {
    transform:translateZ(0)
  }
}
.wobble {
  animation-name:wobble;
  animation-duration:2s;
  animation-fill-mode:both
}
@keyframes wobble_infinite {
  0% {
    transform:translateZ(0)
  }
  7.5% {
    transform:translate3d(-3%,0,0) rotate3d(0,0,1,-5deg)
  }
  15% {
    transform:translate3d(3%,0,0) rotate3d(0,0,1,3deg)
  }
  22.5% {
    transform:translate3d(-3%,0,0) rotate3d(0,0,1,-3deg)
  }
  30% {
    transform:translate3d(2%,0,0) rotate3d(0,0,1,2deg)
  }
  37.5% {
    transform:translate3d(-1%,0,0) rotate3d(0,0,1,-1deg)
  }
  50% {
    transform:translateZ(0)
  }
}
.wobble_infinite {
  animation-name:wobble_infinite;
  animation-duration:4s;
  animation-fill-mode:both;
  animation-iteration-count:infinite
}
@keyframes fadein {
  0% {
    opacity:0
  }
  66% {
    opacity:0
  }
  to {
    opacity:1
  }
}

@-webkit-keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

@-moz-keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 98% 0);
    }
    
    25% {
        clip-path: inset(0 98% 0 0);
    }
    50% {
        clip-path: inset(98% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 98%);
    }
}

.bg-animation[animation="slide"] .bg-animation-content div{
  animation:slide 10s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #000 50%, #fff 50%);
  bottom:0;
  left:-50%;
  opacity:.1;
  position:fixed;
  right:-50%;
  top:0;
  z-index:0;
}

.bg-animation[animation="slide"] .bg-animation-content div:eq(1) {
  animation-direction:alternate-reverse;
  animation-duration:11s;
}

.bg-animation[animation="slide"] .bg-animation-content div:eq(2) {
  animation-duration:12s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

.bg-animation[animation="cube"] .bg-animation-content div {
  position: absolute;
  top: 80vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  animation: cube 12s ease-in forwards infinite;
  
  &:nth-child(2n) {
    border-color: #fff;
  }
  
  &:nth-child(2) {
    animation-delay: 2s;
    left: 25vw;
    top: 40vh;
  }
  
  &:nth-child(3) {
    animation-delay: 4s;
    left: 75vw;
    top: 50vh;
  }
  
  &:nth-child(4) {
    animation-delay: 6s;
    left: 90vw;
    top: 10vh;
  }
  
  &:nth-child(5) {
    animation-delay: 8s;
    left: 10vw;
    top: 85vh;
  }
  
  &:nth-child(6) {
    animation-delay: 10s;
    left: 50vw;
    top: 10vh;
  }
}

@keyframes cube {
  from {
    transform: scale(0) rotate(0deg) translate(-50%, -50%);   
    opacity: 1;
  }
  to {
    transform: scale(20) rotate(960deg) translate(-50%, -50%); 
    opacity: 0;
  }
}

.bg-animation[animation="gradient"] {
  background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
  background-size: 400% 400% !important;
  animation: gradient 10s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}