@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://use.fontawesome.com/releases/v5.6.3/css/all.css);

.navbar-dark {
    background: #0c0c0c73;
    border-block-start: 1px solid #343434;
    border-block-end: 1px solid rgba(122 9 9 / 74%)
}
.nav-item{
  color:#fff!important;
  font-family:Oswald,sans-serif;
  text-transform:uppercase
}
.navbar-nav>.nav-item>.nav-link{
  color:#fff;
  font-size:14px;
  letter-spacing:1px;
  padding:18px 15px;
  text-transform:uppercase
}
.nav-item.active>a{
  background:transparent!important;
  border-block-end:5px solid #8f0e11;
  color:#8e8e8e!important
}
.nav-link:hover {
    background: hsl(0deg 1% 71% / 50%);
    border-block-end: 5px solid #8f0e11
}
.social-box{
  align-items:center;
  background:#141516;
  box-shadow:-1px 0 0 hsla(0,0%,88%,.15),1px 0 0 hsla(0,0%,88%,.15),inset 2px 2px 10px rgba(0,0,0,.65);
  display:flex;flex-flow:row wrap;padding:19px!important;padding:0 18px
}
.social-box>ul{
  margin-block-end:0
}
.card{
  padding:3px;
  border:1px solid #8f0e0e;
  border-radius:0
}
.card-header {
    border-block-end: 1px solid #1a1a1a;
    border-inline-start: 5px solid #8f0e0e;
    border-radius: 0 !important;
    font-family: Oswald,sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase
}
.card-body {
    background: hsl(0deg 1% 3% / 53%)
}

#SlideRan {
	background: url(/storage/assets/images/banner.png) center /
	cover no-repeat;
	display: flex;
	align-items: flex-end;
	height: 190px;
  margin: 10px 10px;
	overflow: hidden;
	position: relative;
  }
  #SlideRan img {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	height: auto;
	background: #000;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	opacity: 0;
	transform: scale(1.4) rotate(12deg);
	-webkit-animation: SlideRan 24s infinite;
			animation: SlideRan 24s infinite;
  }
  #SlideRan img:nth-child(3) {
	-webkit-animation-delay: 1s;
			animation-delay: 1s;
  }
  #SlideRan img:nth-child(2) {
	-webkit-animation-delay: 7s;
			animation-delay: 7s;
  }
  #SlideRan img:nth-child(1) {
	-webkit-animation-delay: 13s;
			animation-delay: 13s;
  }
  
  @-webkit-keyframes SlideRan {
	25% {
	  opacity: 1;
	  transform: scale(1) rotate(0);
	}
	40% {
	  opacity: 0;
	}
  }
  @keyframes SlideRan {
	25% {
	  opacity: 1;
	  transform: scale(1) rotate(0);
	}
	40% {
	  opacity: 0;
	}
  }

.slick-slide {
    margin: -10px 10px;
  }
  
  .slick-slide img {
    width: 100px;
    height: 100px;
  }
  
  .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  
  .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .slick-list:focus {
    outline: none;
  }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand;
  }
  
  .slick-slider .slick-track,
  .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
  }
  .slick-track:before,
  .slick-track:after {
    display: table;
    content: "";
  }
  .slick-track:after {
    clear: both;
  }
  .slick-loading .slick-track {
    visibility: hidden;
  }
  
  .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
  }
  [dir="rtl"] .slick-slide {
    float: inline-end;
  }
  .slick-slide img {
    display: block;
  }
  .slick-slide.slick-loading img {
    display: none;
  }
  .slick-slide.dragging img {
    pointer-events: none;
  }
  .slick-initialized .slick-slide {
    display: block;
  }
  .slick-loading .slick-slide {
    visibility: hidden;
  }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
    display: none;
  }
  
.pull-right{
  margin-left:3rem
}

.label{
  position:relative;
  background:0 0;z-index:1
}
.label:before{
  content:'';
  position:absolute;
  width: 125%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  border-radius: .25rem;
  padding: .25em .4em;
  text-align: center;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  background:rgba(255,255,255,.1)
}
.label-primary:before{
  background:#2B6AD9
}
.label-success:before{
  background:#2BD964;
}
.label-info:before{
  background:#2BD7D9
}
.label-warning:before{
  background:#EB8324
}
.label-danger:before{
  background:#D92B4C
}
.bottom-more{
    text-align: -webkit-center;
}
.important {
  -webkit-animation: noticeblink 0.8s ease-in-out infinite;
  animation: noticeblink 0.8s ease-in-out infinite;
  order: -1;
	border : 1px solid #faca9e;
  }
  
.leaderboard {
	color: #eee;
	border-radius: 5px;
	inset-block-start: 20%;
	text-align: start;
	vertical-align: middle;
  }
  .leaderboard h2 {
	padding: 15px 0;
	margin: 0;
	text-align: center;
  }
  .leaderboard p {
	margin: 3px 10px;
	text-align: end;
	color: #567;
  }
  .leaderboard ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
  }
  .leaderboard ol li {
	counter-increment: leaderboard-num;
	padding: 15px 50px;
	position: relative;
	transition-duration: 0.3s;
  }
  .leaderboard ol li::before {
	content: counter(leaderboard-num);
	display: block;
	border-radius: 50%;
	inline-size: 20px;
	block-size: 20px;
	background-color: white;
	color: #345;
	text-align: center;
	position: absolute;
	inset-inline-start: 15px;
	
  }

  .leaderboard ol li:nth-of-type(1) {
	background: url(/storage/assets/images/misc/select1-sv.png) center center no-repeat;
  background-size: cover;
  -webkit-animation: noticeblink 0.8s ease-in-out infinite;
  animation: noticeblink 0.8s ease-in-out infinite;
  order: -1;
	border : 1px solid #faca9e;
  }
  .leaderboard ol li:nth-of-type(2) {
	background: url(/storage/assets/images/misc/select2-sv.png) center center no-repeat;
    background-size: cover;
  }
  .leaderboard ol li:nth-of-type(3) {
	background: url(/storage/assets/images/misc/select3-sv.png) center center no-repeat;
    background-size: cover;
  }
  .leaderboard ol li:nth-of-type(4) {
	background: transparent;
  }
  .leaderboard ol li:nth-of-type(5) {
	background: transparent;
  }
  .leaderboard ol li:nth-of-type(6) {
	background: transparent;
  }
  .leaderboard ol li .percent {
	inset-inline-end: 15px;
  }
  .leaderboard ol li:hover {
	transform: scale(1.1);
  -webkit-animation: none;
  animation: none;
  }
  .leaderboard ol:hover li:not(:hover) {
	opacity: 0.3;
  }

  
  .leaderboard-all {
	color: #eee;
	border-radius: 5px;
	inset-block-start: 20%;
	box-shadow: 2px 5px 15px rgb(51 18 17 / 50%);
	text-align: start;
	vertical-align: middle;
	block-size: 990px;
  overflow-x: hidden;
  }
  .leaderboard-all h2 {
	padding: 15px 0;
	margin: 0;
	text-align: center;
  }
  .leaderboard-all p {
	margin: 3px 10px;
	text-align: end;
	color: #567;
  }
  .leaderboard-all ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
  }
  .leaderboard-all ol li {
	counter-increment: leaderboard-all-num;
	padding: 15px 50px;
	position: relative;
	transition-duration: 0.3s;
  }
  .leaderboard-all ol li::before {
	content: counter(leaderboard-all-num);
	display: block;
	border-radius: 50%;
	inline-size: 20px;
	block-size: 20px;
	background-color: white;
	color: #345;
	text-align: center;
	position: absolute;
	inset-inline-start: 15px;
	
  }
  .leaderboard-all ol li:nth-of-type(1) {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
  backdrop-filter: var(--shadow-primary)
  }
  .leaderboard-all ol li:nth-of-type(2) {
	background-color: transparent;
  }
  .leaderboard-all ol li:nth-of-type(3) {
	background-color: transparent;
  }
  .leaderboard-all ol li:nth-of-type(4) {
	background-color: transparent;
  }
  .leaderboard-all ol li:nth-of-type(5) {
	background-color: transparent;
  }
  .leaderboard-all ol li:nth-of-type(6) {
	background-color: transparent;
  }
  .leaderboard-all ol li .percent {
	position: absolute;
	inset-inline-end: 15px;
  }
  .leaderboard-all ol li:hover {
	transform: scale(1.04);
  }
  .leaderboard-all ol:hover li:not(:hover) {
	opacity: 0.3;
  }

.container {
    min-block-size: 1250px;
    display: flex;
    justify-content: space-between;
}


.bottom-block {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 80px 120px;
    z-index: 3;
  }

  .menu {
    inline-size: 990px;
  }
  .menu li {
    display: inline-block;
    position: relative;
    transition: background 0.3s ease;
  }
  .menu li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #9a9797;
    font-size: 16px;
    display: flex;
    align-items: flex-end;
    padding: 0px 30px 0px 30px;
  }
  .menu li a:hover {
    color: #ffeed8;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,227,0,1)), color-stop(100%,rgba(173,59,5,1)));
    text-shadow: 0px 0px 5px rgba(142, 170, 91, 0.3);
  }
  .menu li a:hover:after {
    inline-size: 50%;
  }
  .menu li a:hover:before {
    inline-size: 50%;
  }

  .menu li a:after {
    content: "";
    block-size: 1px;
    inline-size: 0px;
    background: #adaba9;
    position: absolute;
    inset-block-end: -10px;
    inset-inline-start: 50%;
    transition: width .5s ease;
  }
  .menu li a:before {
    content: "";
    block-size: 1px;
    inline-size: 0px;
    background: #adaba9;
    position: absolute;
    inset-block-end: -10px;
    inset-inline-end: 50%;
    transition: width .5s ease;
  }
  .menu li:last-child {
    border-inline-end: none;
  }
  .menu li:hover {
    background-position: center -10px;
  }
  .menu .active a {
    color: #ffeed8;
    text-shadow: 0px 0px 5px rgba(142, 170, 91, 0.3);
  }
  .menu .active a:after {
    content: "";
    block-size: 1px;
    inline-size: 50%;
    background: #adaba9;
    position: absolute;
    inset-block-end: -10px;
    inset-inline-start: 50%;
    transition: width .5s ease;
  }
  .menu .active a:before {
    content: "";
    block-size: 1px;
    inline-size: 50%;
    background: #adaba9;
    position: absolute;
    inset-block-end: -10px;
    inset-inline-end: 50%;
    transition: width .5s ease;
  }
.header {
    position: relative;
    block-size: 540px;
  }
  .logo {
      position: absolute;
      inset-block-start: 150px;
      inset-inline-end: 470px;
      z-index: 4;
      inline-size: 308px;
      block-size: 283px;
      background: url(/storage/assets/images/strike_ran.png) no-repeat;
    }
    
  .server-block {
    background: url(../img/server-block-bg.png) no-repeat;
    inline-size: 160px;
    block-size: 45px;
    inset-inline-end: 0px;
    inset-block-end: 150px;
    padding: 43px 25px 40px 125px;
  }
  .server-block p {
    font-size: 14px;
    color: #fce180;
    margin-block-end: 7px;
  }
  .server-block p span {
    float: inline-end;
    display: block;
    position: relative;
    inset-inline-end: -2px;
    inset-block-start: -2px;
    block-size: 17px;
    inline-size: 17px;
  }
  .server-block .progress-bar-bg {
    background: #000;
    margin-block-end: 7px;
  }
  .server-block .progress-bar-bg .progress-bar {
    block-size: 3px;
    margin: 2px 0px 2px 0px;
  }
  .server-block .server-status {
    color: #466577;
  }
  .server-block.online p span {
  }
  .server-block.online .progress-bar-bg .progress-bar {
    background: #95ff38;
    box-shadow: 0px 0px 5px 2px rgba(149, 255, 56, 0.5);
  }
  .server-block.online .server-status span {
    color: #95ff38;
  }
  .server-block.offline p span {
    background: url(../img/status-icon.png) no-repeat;
    -webkit-filter: hue-rotate(280deg) saturate(800%);
    filter: hue-rotate(280deg) saturate(800%);
  }
  .server-block.offline .progress-bar-bg .progress-bar {
    background: #f43705;
    box-shadow: 0px 0px 5px 2px rgba(244, 55, 5, 0.5);
  }
  .server-block.offline .server-status span {
    color: #f43705;
  }

  .left-sidebar {
    inline-size:300px;
  }
  .sidebar-block {
    outline: 1px solid rgba(198, 228, 245, 0.07);
    background: url(/storage/assets/images/select-block.jpg);
    padding-bottom: 20px;
    margin-bottom: 10px;
  }

  .sidebar-title {
    background: url(/storage/assets/images/border.png) top no-repeat;
    block-size: 62px;
    line-height: 62px;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
    top: -9px;
    box-shadow: 0px 7px 7px -2px rgb(0 0 0 / 40%);
    margin-block-end: 20px;
    background-size: contain;
  }
  .sidebar-title:after {
    content: "";
    /*background: url(/storage/assets/images/inspection_character.png) no-repeat;*/
    inline-size: 81px;
    block-size: 76px;
    position: absolute;
    inset-inline-end: -1px;
    inset-block-start: -15px;
  }
  .sparks {
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    position: absolute;
  }
  .sparks-3 {

    block-size: 800px;
    margin: 0px -100px;
    background-position: left 0px bottom 0px;
  }
  .sparks-3-b {
    block-size: 800px;
    margin: 0px -150px;
    background-position: right 0px bottom 0px;
  }

  .server-block.online .server-status span {
    color: #95ff38;
  }
  input,
textarea,
select {
  background: hsl(0deg 1% 3% / 90%);
  border: 1px solid #28334c;
  color: #c6e4f5;
  border-radius: 5px;
  padding: 12px 15px;
  position: relative;
}
input:focus,
textarea:focus,
select:focus {
  border: 1px solid #425173;
}
  .login-block p {
    margin-block-end: 10px;
  }
  .login-block form {
    padding: 0px 10px;
  }
  .login-block input {
  }
  .login-block select {
    inline-size: 270px;
  }
  .login-block .login-button {
    inline-size: auto;
  }
  .login-block .select {
    margin-block-end: 15px;
  }
  .login-block .links a {
    text-decoration: none;
    color: #c6e4f5;
  }
  .login-block .links a:hover {
    text-decoration: underline;
  }
  .right-sidebar {
    inline-size: 290px;
  }
  .download-reg-block {
    inline-size: 317px;
    position: relative;
    margin-block-end: 5px;
    margin-block-start: 1px;
  }
  
  .right-button a {
    display: block;
    inline-size: 282px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
  }
  .right-button a p {
    text-transform: uppercase;
    font-size: 24px;
    margin-block-end: 5px;
  }
  .right-button a:hover {
    transform: scale(1.02);
  }
  .download-button-link1 a {
    background: url(/storage/assets/images/misc/button_link1.jpg) no-repeat;
    block-size: 76px;
    padding: 79px 0px 0px 35px;
    background-size: cover;
    filter: saturate(0.3);
  }
  .download-button-link1 a:hover {
    filter: saturate(1.0);
    transition-duration: 0.1s;
  }
  .download-button-link2 a {
    background: url(/storage/assets/images/misc/button_link2.jpg) no-repeat;
    block-size: 76px;
    padding: 79px 0px 0px 35px;
    background-size: cover;
    filter: saturate(0.3);
  }
  .download-button-link2 a:hover {
    filter: saturate(1.0);
    transition-duration: 0.1s;
  }
  .download-button-link3 a {
    background: url(/storage/assets/images/misc/button_link3.jpg) no-repeat;
    block-size: 76px;
    padding: 79px 0px 0px 35px;
    background-size: cover;
    filter: saturate(0.3);
  }
  .download-button-link3 a:hover {
    filter: saturate(1.0);
    transition-duration: 0.1s;
  }
  .download-button a {
    background: url(/storage/assets/images/misc/download-button.jpg) no-repeat;
    block-size: 76px;
    padding: 49px 0px 0px 35px;
    background-size: cover;
    filter: saturate(0.3);
  }
  .download-button a:hover {
    filter: saturate(1.0);
    transition-duration: 0.1s;
  }
  .right-button a {
    display: block;
    inline-size: 282px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
  }
  .right-button a p {
    text-transform: uppercase;
    font-size: 24px;
    margin-block-end: 5px;
  }
  .right-button a:hover {
    transform: scale(1.02);
  }
  .discord-button a {
    background: url(/storage/assets/images/misc/discord-button.png) no-repeat;
    block-size: 76px;
    padding: 34px 0px 0px 35px;
    background-size: cover;
    filter: saturate(0.3);
  }
  .discord-button a:hover {
    filter: saturate(1.0);
    transition-duration: 0.1s;
  }
  .content {
    /* background-color: #312f46; */
    position: relative;
    line-height: 1.4;
    padding: 0px 0px 40px 0px;
    inline-size:670px;
  }
  .content img {
    max-inline-size: 678px;
    border: 1px solid rgba(198, 228, 245, 0.2);
    box-shadow: 0px 7px 7px -1px rgba(0, 0, 0, 0.3);
    max-width: -webkit-fill-available;
  }
  .page-content {
    padding: 25px 25px 40px 25px;
    background: hsl(0deg 1% 3% / 100%);
    inline-size: 630px;
  }
  .page-content img {
    max-inline-size: 628px;
    border: 1px solid rgba(198, 228, 245, 0.2);
  } 
.rankings{margin-block-end:10px}.rankings:last-child{margin-block-end:0}.rankings .d-flex{margin-inline-end:10px}.rankings .name{font-size:18px;font-weight:700;margin-block-end:2px}.rankings .media-body{font-size:15px}.leaderboard .rankings{border-block-end:1px solid #363636;margin-block-end:0;padding:5px}.leaderboard .rankings:hover{background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,227,0,1)), color-stop(100%,rgba(173,59,5,1)));filter: drop-shadow(5px 8px 30px rgba(219, 43, 48, 0.15));}.leaderboard .rankings:last-child{border-block-end:0}.btn{font-family:Oswald,sans-serif;font-size:13px;letter-spacing:1px;padding:9px 19px;text-transform:uppercase}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem!important}.btn-primary{background:transparent;border:1px solid #ec7200;color:#fff;cursor:pointer}.news .icon{color:#878787;margin-inline-end:10px;padding:5px}.news .media-body{color:#b8b8b8}.news .media-body .news-title a{color:#fff;display:inline-block;font-size:20px;font-weight:700}.news .media-body .news-title a:hover{color:#8f0e11;text-decoration:none}a:hover{color:#8f0e11}
.footer {
    background: url(/storage/assets/images/footer.png) center center no-repeat;
    color: #eee;
    font-size: 14px;
    padding: 75px;
    margin-top: 30px;
    position: relative;
    text-align: center;
}.items .item{background:#6c6c6c8c;border:1px solid #363636;padding:5px}.items .item img{border-radius:5px;float:inline-start;margin-inline-end:8px;inline-size:110px}.items .item .meta{position:relative}.items .item .meta .title{color:#fff;font-size:15px;font-weight:700}.items .item .meta .price{display:inline-block;font-size:14px;margin-inline-start:5px}.items .item .meta .action{inset-block-end:-39px;inset-inline-end:0}.item-preview img{margin-block-end:10px}.item-preview .title{font-size:17px;font-weight:700}.item-preview .price{color:#dd163b;font-size:16px;font-style:italic}.item-preview .price span{font-weight:700}.item-preview .desc{font-size:15px}.modal .modal-content{background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(0 0 0)), color-stop(100%, rgb(62 19 19)));border-color:#96683d}.modal .modal-content .modal-header{border:1px solid #963d3d}.modal .modal-content .modal-body{border-inline-start:1px solid #96683d;border-inline-end:1px solid #96683d}.modal .modal-content .modal-footer{background:#222325;border:1px solid #363636}.download .d-flex{margin-inline-end:10px;padding:5px}.download .media-body .title{font-size:18px;font-weight:700}.download .media-body .title a{color:#fff}.list-group .list-group-item{background:transparent;color:#adadad;padding:10px 15px;transition:.3s}.list-group .list-group-item.active{border:1px solid #e0e0e0;color:#fff}.list-group .list-group-item span:before{color:#3e3e3e;content:"\f192";font-family:Font Awesome\ 5 Free;font-weight:100;margin-inline-end:10px}.list-group .list-group-item:hover{background:#ec2300;color:#fff}.table tbody td{padding:2px}.table tbody td,.table-border tbody td{border-color:#293139}input[type=radio]{display:none}input[type=radio]:not(:disabled)~label{cursor:pointer}input[type=radio]:disabled~label{border-color:#bcc2bf;box-shadow:none;color:#bcc2bf;cursor:not-allowed}input[type=radio]:checked+label{background:#c71b1b;color:#fff}input[type=radio]:checked+label:after{box-shadow:0 2px 5px -2px rgba(0,0,0,.25);color:#f30808;content:"\f00c";font-family:FontAwesome;font-size:24px;block-size:50px;line-height:50px;position:absolute;inset-inline-end:-17%;text-align:center;inset-block-start:-20px;transform:translateX(-50%);inline-size:50px}input[type=radio]#control_05:checked+label{background:red;border-color:red}#myVideo {
    position: fixed;
    inset-inline-end: 0;
    inset-block-end: 0;
    opacity: 0.5;
    min-inline-size: 100%; 
    min-block-size: 100%;
}

.nav-item-login {
    color: #fff !important;
    font-family: Oswald,sans-serif;
    text-transform: uppercase
}

.nav-item-login > .nav-link-login {
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 18px 15px;
    text-transform: uppercase
}

.nav-item-login.active > a {
    background: transparent !important;
    border-block-end: 5px solid #8f0e11;
    color: #8e8e8e !important
}

#login-dp {
    min-inline-size: 250px;
    padding: 14px 14px 0;
    overflow: hidden;
    background-color: rgba(255,255,255,.8);
}

    #login-dp .help-block {
        font-size: 12px
    }

    #login-dp .bottom {
        background-color: rgba(255,255,255,.8);
        border-block-start: 1px solid #ddd;
        clear: both;
        padding: 14px;
    }

    #login-dp .social-buttons {
        margin: 12px 0
    }

        #login-dp .social-buttons a {
            inline-size: 49%;
        }

    #login-dp .form-group {
        margin-block-end: 10px;
    }

    .blackbox {
        list-style: none;
        margin: 0;
        padding: 0;
        background: #333;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
      }

      .blackbox-br {
        list-style: none;
        inline-size: 210px;
        margin: 0;
        padding: 0;
        background: url(/storage/assets/images/class/Brawler_bg.jpg) no-repeat;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
        transition-duration: 0.3s;
      }

      .blackbox-br:hover {
        -webkit-animation: none;
        animation: none;
        }

      .blackbox-sm {
        list-style: none;
        inline-size: 210px;
        margin: 0;
        padding: 0;
        background: url(/storage/assets/images/class/Swordman_bg.jpg) no-repeat;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
        transition-duration: 0.3s;
      }

      .blackbox-sm:hover {
        -webkit-animation: none;
        animation: none;
        }

      .blackbox-arc {
        list-style: none;
        inline-size: 210px;
        margin: 0;
        padding: 0;
        background: url(/storage/assets/images/class/Archer_bg.jpg) no-repeat;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
        transition-duration: 0.3s;
      }

      .blackbox-arc:hover {
        -webkit-animation: none;
        animation: none;
        }

      .blackbox-shm {
        list-style: none;
        inline-size: 210px;
        margin: 0;
        padding: 0;
        background: url(/storage/assets/images/class/Shaman_bg.jpg) no-repeat;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
        transition-duration: 0.3s;
      }

      .blackbox-shm:hover {

        -webkit-animation: none;
        animation: none;
        }

      .blackbox-ext {
        list-style: none;
        inline-size: 210px;
        margin: 0;
        padding: 0;
        background: url(/storage/assets/images/class/Extreme_bg.jpg) no-repeat;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
        transition-duration: 0.3s;
      }

      .blackbox-ext:hover {
        -webkit-animation: none;
        animation: none;
        }

      .blackbox-gun {
        list-style: none;
        inline-size: 210px;
        margin: 0;
        padding: 0;
        background: url(/storage/assets/images/class/Scientist_bg.jpg) no-repeat;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
        transition-duration: 0.3s;
      }

      .blackbox-gun:hover {
        -webkit-animation: none;
        animation: none;
        }

      .blackbox-asi {
        list-style: none;
        inline-size: 210px;
        margin: 0;
        padding: 0;
        background: url(/storage/assets/images/class/Assassin_bg.jpg) no-repeat;
        padding: 5px;
        border-radius: 5px;
        margin-inline-end: -10px;
        border: 1px solid #96683d;
        transition-duration: 0.3s;
      }

      .blackbox-asi:hover {
      -webkit-animation: none;
      animation: none;
      filter: saturate(1.0);
      }
      .blackbox li {
        display: inline-block;
        font-weight: bold;
        text-align: center;
        color: #fff;
        padding: 0 5px;
        font-size: 12px;
        outline: 1px solid var(--borderlightest, rgba(255, 255, 255, 0.07));
      }
      .blackbox li span {
        display: block;
        background: -webkit-linear-gradient(#eabb00, #fc9a2f);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    
      #app3 {
        max-inline-size: 1200px;
        margin: auto;
      }
      
      .course {
        vertical-align: top;
        box-sizing: border-box;
        padding: 10px;
      }
      .course .course_card {
        inline-size: 100%;
        margin-block-end: 20px;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(0 0 0)), color-stop(100%, rgb(62 19 19)));
        border: 1px solid #96683d;
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
      }
      .course .course_card:hover .img_outter img {
        transform: scale(1.2);
      }
      .course .course_card .shop_img {
        inline-size: 50px;
        block-size: 50px;
        object-fit: cover;
        object-position: 50% 50%;
        border: 3px solid white;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        position: absolute;
        inset-block-start: -25px;
        inset-inline-start: 5px;
        z-index: 10;
      }
      .course .course_card .mode {
        inline-size: 100px;
        text-align: center;
        color: white;
        margin: 0px;
        position: absolute;
        inset-block-start: 15px;
        inset-inline-end: -25px;
        transform: rotate(45deg);
        background-color: #fb9b1d;
        z-index: 20;
        font-weight: 500;
      }
      .course .course_card .mode.green {
        background-color: #39bf71;
      }
      .course .img_outter {
        inline-size: 100%;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
      }
      .course .img_outter img {
        inline-size: 100%;
        transition-duration: 0.5s;
      }
      .course .info {
        padding: 8px;
      }
      .course .info .title {
        min-block-size: 70px;
        font-size: 24px;
        font-weight: 500;
        margin: 0px;
      }
      .course p {
        font-size: 15px;
        color: #777;
      }
      .course p .price {
        text-decoration: line-through;
      }
      .course p .special_price {
        font-size: 17px;
        color: #fb9b1d;
        font-weight: 600;
      }
      .course .status {
        margin: 0px;
        margin-block-start: 5px;
        text-align: center;
      }
      .course .progress_bar {
        block-size: 12px;
        background-color: #aaa;
        border-radius: 50px;
      }
      .course .progress_bar .progress {
        max-inline-size: 100%;
        block-size: 100%;
        background: linear-gradient(90deg, #fccb41, #fb9b1d);
        border-radius: 50px;
      }
      @media screen and (max-inline-size: 1200px) {
        #app3 {
          max-inline-size: 1000px;
        }
      }
      @media screen and (max-inline-size: 1000px) {
        #app3 {
          max-inline-size: 800px;
          padding: 5px;
        }
      }
      @media screen and (max-inline-size: 800px) {
        #app3 {
          max-inline-size: 700px;
          background-color: #fff;
        }
      
        .course {
          inline-size: 100%;
        }
        .course .img_outter {
          inline-size: 150px;
          display: inline-block;
          vertical-align: top;
        }
        .course .course_card {
          background-color: initial;
          box-shadow: 0px 0px 0px;
          border: initial;
        }
        .course .course_card .teacher_img {
          display: none;
        }
        .course .course_card .info {
          display: inline-block;
        }
        .course .course_card .info .title {
          font-size: 16px;
          min-block-size: initial;
        }
        .course .course_card p {
          font-size: 12px;
        }
        .course .course_card p .special_price {
          font-size: 14px;
        }
        .course .course_card .progress_bar {
          block-size: 5px;
        }
        .course .course_card .mode_s {
          color: #fb9b1d;
        }
        .course .course_card .mode_s.green {
          color: #39bf71;
        }
      }

    .menu-list {
        position: relative;
        z-index: 10;
      }
      
      .menu__item {
        position: relative;
        display: block;
        outline: none;
        margin: 0 0 1.5em;
        line-height: 1;
      }
      
      .menu__item-name,
      .menu__item-label {
        position: relative;
        display: inline-block;
      }
      
      .menu__item-name {
        font-size: 1.25em;
        text-transform:uppercase;
        font-weight: 400;
        letter-spacing: 0.05em;
      }
      
      .menu__item-label {
        margin: 0 0 0 0.5em;
        font-weight: 300;
      }
      
      .menu--information {
        font-size: 1.15em;
        font-family: 'Teko', sans-serif;
      }
      
      .menu--information a {
        color: #2e4055;
      }
      
      .menu--information .menu__item {
        margin: 0 0 1em;
      }
      
      .menu--information .menu__item-name {
        padding: 0 0.35em;
        font-weight: bold;
        line-height: 1.4;
        transition: color 0.5s;
        transition-timing-function: cubic-bezier(0.2,1,0.3,1);
        &::before {
          content: '';
          position: absolute;
          z-index: -1;
          inline-size: 100%;
          block-size: 50%;
          inset-inline-start: 0;
          inset-block-end: 0;
          opacity: 0.3;
          transform: scale3d(0,1,1);
          transform-origin: 0% 50%;
          transition: transform 0.5s;
          transition-timing-function: cubic-bezier(0.2,1,0.3,1);
        }
      }
      
      .menu--information .menu__item-label {
        font-size: 1em;
        letter-spacing: 0.05em;
        transform: translate3d(-0.5em,0,0);
        transition: transform 0.5s, color 0.5s;
        transition-timing-function: cubic-bezier(0.2,1,0.3,1);
        &::before {
          content: '';
          position: absolute;
          z-index: -1;
          inline-size: 100%;
          block-size: 1px;
          inset-inline-start: 0.05em;
          inset-block-start: 1.25em;
          opacity: 0.3;
          transform: scale3d(0,1,1);
          transform-origin: 100% 50%;
          transition: transform 0.5s;
          transition-timing-function: cubic-bezier(0.2,1,0.3,1); 
          }
      }
      
      .menu--information .menu__item:nth-child(odd) .menu__item-name::before,
      .menu--information .menu__item:nth-child(odd) .menu__item-label::before {
        background: #2983ea;
      }
      
      .menu--information .menu__item:nth-child(even) .menu__item-name::before,
      .menu--information .menu__item:nth-child(even) .menu__item-label::before  {
        background: #611aff;
      }
      
      /* Hover */
      .menu--information .menu__item:nth-child(odd):hover,
      .menu--information .menu__item:nth-child(odd):focus {
        color: #2983ea;
      }
      
      .menu--information .menu__item:nth-child(even):hover,
      .menu--information .menu__item:nth-child(even):focus {
        color: #611aff;
      }
      
      .menu--information .menu__item:hover .menu__item-name::before,
      .menu--information .menu__item:focus .menu__item-name::before,
      .menu--information .menu__item:hover .menu__item-label::before,
      .menu--information .menu__item:focus .menu__item-label::before {
        transform: scale3d(1,1,1);
      }
      
      .menu--information .menu__item:hover .menu__item-label,
      .menu--information .menu__item:focus .menu__item-label {
        transform: translate3d(0,0,0);
      }
      
      .menu--information .menu__item:hover .menu__item-label::before,
      .menu--information .menu__item:focus .menu__item-label::before {
        transition-timing-function: ease;
        transform-origin: 0% 50%;
      }
     
      .cd-top {
        display: inline-block;
        position: fixed;
        inset-block-end: 40px;
        inset-inline-end: 10px;
        /* image replacement properties */
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
      }
      .cd-top.cd-is-visible {
        /* the button becomes visible */
        visibility: visible;
        opacity: 1;
        top:60%;
      }
      .cd-top.cd-fade-out {
        /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
        opacity: .5;
      }
      .no-touch .cd-top:hover {
        opacity: 1;
      }
      @media only screen and (min-inline-size: 768px) {
        .cd-top {
          inset-inline-end: 20px;
          inset-block-end: 70px;
        }
      }
      @media only screen and (min-inline-size: 1024px) {
        .cd-top {
          inset-inline-end: 30px;
          inset-block-end: 80px;
        }
      }
      ::-webkit-scrollbar { 
        inline-size: 5px; 
        block-size: 5px; 
      }
      ::-webkit-scrollbar-track { 
        background: var(--main-bg-color);
        border: 1px; 
      }
      ::-webkit-scrollbar-thumb { 
        background: var(--orange); 
        border: 1px; 
      }
    
      
.shoppush-popchat,
.shoppush-popchat input,
.shoppush-popchat button {
    font-family: "Verdana", sans-serif;
}

.shoppush-popchat #fb-root {
    display: none !important;
}

.shoppush-popchat * {
    transition: all 0.1s ease-out;
}

.shoppush-popchat .buzz {
    animation: buzz .6s linear;
}

.shoppush-popchat .sprt {
    background: url("https://plugins.soclminer.com.br/v3/sdk/channels/assets/img/sprt.png") no-repeat 0 0;
    background-size: 53px;
}

.shoppush-popchat .hide {
    display: none !important;
}

.shoppush-popchat .just-mobile {
    display: none !important;
}

.shoppush-popchat .brand {
    position: relative;
    inline-size: 80px;
    block-size: 80px;
    border-radius: 50%;
}

    .shoppush-popchat .brand > span,
    .shoppush-popchat .brand > img {
        position: absolute;
        display: block;
    }

.shoppush-popchat .brand__al {
    background-color: #e60000;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    z-index: 2;
    line-height: 20px;
    text-align: center;
    color: #f2f2f2;
    font-size: 12px;
    font-weight: bold;
}

.shoppush-popchat .brand__ty {
    inset-block-start: -21px;
    inset-inline-start: -24px;
    inline-size: 42px;
    block-size: 30px;
    padding-block-start: 20px;
    padding-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 11px;
    z-index: 2;
    font-size: 0;
    animation: fakeType 0.5s ease-in-out;
}

    .shoppush-popchat .brand__ty i {
        background-color: #1a1a1a !important;
        display: inline-block;
        inline-size: 6px;
        block-size: 6px;
        margin: 0 2px;
        border-radius: 50%;
    }

        .shoppush-popchat .brand__ty i:nth-child(1) {
            animation: loadingFakeType 1s infinite;
        }

        .shoppush-popchat .brand__ty i:nth-child(2) {
            animation: loadingFakeType 1s infinite;
            animation-delay: .1s;
        }

        .shoppush-popchat .brand__ty i:nth-child(3) {
            animation: loadingFakeType 1s infinite;
            animation-delay: .2s;
        }

.shoppush-popchat .by {
    position: absolute;
    inset-block-end: -22px;
    inset-inline-end: 25px;
    line-height: 20px;
    text-align: end;
    font-size: 12px;
}

    .shoppush-popchat .by a,
    .shoppush-popchat .by a:hover,
    .shoppush-popchat .by a:visited {
        color: inherit;
    }

.shoppush-popchat .btn {
    display: inline-block;
    padding: 30px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.shoppush-popchat > div.plg {
    inline-size: 80px;
    block-size: 80px;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.75);
    position: fixed;
    inset-block-start: 20px;
    inset-inline-end: 10px;
    cursor: pointer;
    animation: wobble 0.8s ease-in-out;
}

    .shoppush-popchat > div.plg.dark h1,
    .shoppush-popchat > div.plg.dark p {
        color: #1a1a1a !important;
    }

    .shoppush-popchat > div.plg.dark .close__icon:after,
    .shoppush-popchat > div.plg.dark .close__icon:before {
        background-color: #1a1a1a !important;
    }

    .shoppush-popchat > div.plg > div {
        position: relative;
        float: inline-start;
        block-size: 80px;
    }

    .shoppush-popchat > div.plg .not {
        display: none;
        inline-size: 310px;
        margin-inline-start: 15px;
    }

        .shoppush-popchat > div.plg .not h1,
        .shoppush-popchat > div.plg .not p {
            color: #f2f2f2;
        }

        .shoppush-popchat > div.plg .not h1 {
            font-size: 16px;
            font-weight: bold;
            margin-block-end: 5px;
        }

        .shoppush-popchat > div.plg .not p {
            font-size: 14px;
            font-weight: regular;
        }

    .shoppush-popchat > div.plg .close {
        display: none;
        inline-size: 45px;
        margin-inline-start: 10px;
    }

    .shoppush-popchat > div.plg .close__icon {
        position: relative;
        display: block;
        inline-size: 15px;
        block-size: 15px;
        margin: 0 auto;
        padding: 14px;
        border-radius: 50%;
    }

        .shoppush-popchat > div.plg .close__icon:hover,
        .shoppush-popchat > div.plg .close__icon:active {
            background-color: rgba(0, 0, 0, 0.07);
        }

        .shoppush-popchat > div.plg .close__icon:after,
        .shoppush-popchat > div.plg .close__icon:before {
            content: "";
            position: absolute;
            inset-block-start: 20px;
            inset-inline-end: 13px;
            display: block;
            inline-size: 18px;
            block-size: 4px;
            border-radius: 2px;
            background-color: #fff;
        }

        .shoppush-popchat > div.plg .close__icon:after {
            transform: rotate(45deg);
        }

        .shoppush-popchat > div.plg .close__icon:before {
            transform: rotate(-45deg);
        }

    .shoppush-popchat > div.plg .by {
        display: none;
        color: #fff;
        text-shadow: 0 0 3px #000;
    }

    .shoppush-popchat > div.plg.open {
        inset-block-start: 150px;
        inline-size: 460px;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
    }

        .shoppush-popchat > div.plg.open .brand {
            animation: textIn 0.6s ease-in-out;
        }

        .shoppush-popchat > div.plg.open .brand__al,
        .shoppush-popchat > div.plg.open .brand__ty {
            display: none;
        }

        .shoppush-popchat > div.plg.open .not,
        .shoppush-popchat > div.plg.open .close {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .shoppush-popchat > div.plg.open .not {
            animation: textIn 0.5s ease-out;
        }

        .shoppush-popchat > div.plg.open .by {
            display: block;
        }

    .shoppush-popchat > div.plg.left {
        inset-inline-end: initial;
        inset-inline-start: 10px;
    }

        .shoppush-popchat > div.plg.left > div {
            float: inline-end;
        }

        .shoppush-popchat > div.plg.left .brand__ty {
            transform: scaleX(-1);
            inset-inline-start: initial;
            inset-inline-end: -24px;
        }

            .shoppush-popchat > div.plg.left .brand__ty i:nth-child(1) {
                animation-delay: .2s;
            }

            .shoppush-popchat > div.plg.left .brand__ty i:nth-child(2) {
                animation-delay: .1s;
            }

            .shoppush-popchat > div.plg.left .brand__ty i:nth-child(3) {
                animation-delay: 0s;
            }

        .shoppush-popchat > div.plg.left .close {
            margin-inline-start: 0;
            margin-inline-end: 10px;
        }

        .shoppush-popchat > div.plg.left .by {
            inset-inline-end: initial;
            inset-inline-start: 25px;
        }

.shoppush-popchat {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-items: stretch;
}

    .shoppush-popchat .btn {
        color: #f2f2f2 !important;
    }

        .shoppush-popchat .btn.dark {
            color: #1a1a1a !important;
        }

    .shoppush-popchat.dark .btn {
        color: #1a1a1a !important;
    }

    .shoppush-popchat > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }

    .shoppush-popchat .pop-box {
        inline-size: 39%;
    }

        .shoppush-popchat .pop-box > img {
            display: block;
            margin: 0 auto;
        }

        .shoppush-popchat .pop-box .brand {
            position: absolute;
            inset-block-start: calc(10%);
            inset-inline-end: -40px;
        }

    .shoppush-popchat .pop-text {
        flex: 1;
    }

        .shoppush-popchat .pop-text > div {
            inline-size: 100%;
            padding: 0 65px;
            text-align: center;
            color: #1a1a1a;
        }

            .shoppush-popchat .pop-text > div h1 {
                margin-block-start: 15px;
                margin-block-end: 25px;
                font-size: 24px;
            }

            .shoppush-popchat .pop-text > div p {
                font-size: 18px;
                margin-block-end: 15px;
            }

                .shoppush-popchat .pop-text > div p.small {
                    font-size: 14px;
                }

            .shoppush-popchat .pop-text > div .form {
                inline-size: 100%;
                margin: 30px 0;
                font-size: 0;
            }

                .shoppush-popchat .pop-text > div .form > input,
                .shoppush-popchat .pop-text > div .form > label {
                    display: inline;
                    block-size: 40px;
                    margin: 0 1%;
                    line-height: 40px;
                    vertical-align: middle;
                    font-size: 15px;
                }

                .shoppush-popchat .pop-text > div .form > input {
                    block-size: 40px;
                    padding: 0 3%;
                    line-height: 40px;
                    border: 1px solid #1a1a1a;
                    border-radius: 5px;
                }

                    .shoppush-popchat .pop-text > div .form > input.name {
                        inline-size: 130px;
                    }

                    .shoppush-popchat .pop-text > div .form > input.email {
                        inline-size: 200px;
                    }

                .shoppush-popchat .pop-text > div .form > button {
                    margin-block-start: 20px;
                }

        .shoppush-popchat .pop-text .by {
            inset-inline-end: 0;
            inset-block-end: 10px;
            inline-size: 100%;
            font-size: 14px;
            text-align: center;
            color: #939393;
        }

            .shoppush-popchat .pop-text .by a {
                text-decoration: underline;
            }

    .shoppush-popchat.stp0 .pop-box .brand,
    .shoppush-popchat.stp0 .s1,
    .shoppush-popchat.stp0 .s2,
    .shoppush-popchat.stp0 .s3,
    .shoppush-popchat.stp0 .s4 {
        display: none;
    }

    .shoppush-popchat.stp0 .pop-box {
        inline-size: 100%;
        block-size: 100%;
    }

        .shoppush-popchat.stp0 .pop-box > img {
            display: block;
        }

    .shoppush-popchat.stp1 .s2,
    .shoppush-popchat.stp1 .s3,
    .shoppush-popchat.stp1 .s4 {
        display: none;
    }

    .shoppush-popchat.stp2 .pop-box > img,
    .shoppush-popchat.stp2 .s1,
    .shoppush-popchat.stp2 .s3,
    .shoppush-popchat.stp2 .s4 {
        display: none;
    }

    .shoppush-popchat.stp3 .pop-box {
        inline-size: 20%;
    }

        .shoppush-popchat.stp3 .pop-box > img,
        .shoppush-popchat.stp3 .s1,
        .shoppush-popchat.stp3 .s2,
        .shoppush-popchat.stp3 .s4 {
            display: none;
        }

    .shoppush-popchat.stp4 .pop-box {
        inline-size: 25%;
    }

        .shoppush-popchat.stp4 .pop-box > img,
        .shoppush-popchat.stp4 .s1,
        .shoppush-popchat.stp4 .s2,
        .shoppush-popchat.stp4 .s3 {
            display: none;
        }

@keyframes fakeType {
    0% {
        opacity: 0;
        margin-block-start: 8px;
    }

    70% {
        opacity: 1;
        margin-block-start: -4px;
    }

    100% {
        opacity: 1;
        margin-block-start: 0;
    }
}

@keyframes loadingFakeType {
    0%, 100% {
        opacity: 0;
        transform: translateY(-3px);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textIn {
    0% {
        opacity: 0;
        transform: translateX(-16px);
    }

    70% {
        transform: translateX(4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes buzz {
    10% {
        transform: translateX(3px) rotate(2deg);
    }

    20% {
        transform: translateX(-3px) rotate(-2deg);
    }

    30% {
        transform: translateX(3px) rotate(2deg);
    }

    40% {
        transform: translateX(-3px) rotate(-2deg);
    }

    50% {
        transform: translateX(2px) rotate(1deg);
    }

    60% {
        transform: translateX(-2px) rotate(-1deg);
    }

    70% {
        transform: translateX(2px) rotate(1deg);
    }

    80% {
        transform: translateX(-2px) rotate(-1deg);
    }

    90% {
        transform: translateX(1px) rotate(0);
    }

    100% {
        transform: translateX(-1px) rotate(0);
    }
}

@keyframes wobble {
    0% {
        transform: translateX(16px);
        opacity: 0;
    }

    16.65% {
        transform: translateX(-8px);
    }

    33.3% {
        transform: translateX(6px);
    }

    49.95% {
        transform: translateX(-4px);
        opacity: 1;
    }

    66.6% {
        transform: translateX(2px);
    }

    83.25% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(0);
    }
}

@media only screen and (max-device-width: 1080px) {
    #sm-onsite {
        inset-inline-end: 1% !important;
        inset-block-end: 10% !important;
    }

        #sm-onsite.socl-open {
            inline-size: 98% !important;
        }

            #sm-onsite.socl-open iframe.socl-iframe {
                inline-size: 100% !important;
                block-size: 275px !important;
            }

        #sm-onsite.socl-left {
            inset-inline-start: 1% !important;
        }

        #sm-onsite.open {
            inline-size: 98% !important;
        }

            #sm-onsite.open iframe {
                inline-size: 100% !important;
                block-size: 275px !important;
            }

        #sm-onsite.left {
            inset-inline-start: 1% !important;
        }

    .shoppush-popchat .sprt {
        background-size: 42.4px;
    }

    .shoppush-popchat .brand {
        inline-size: 64px;
        block-size: 64px;
    }

    .shoppush-popchat .brand__al {
        inline-size: 16px;
        block-size: 16px;
        line-height: 16px;
        font-size: 10px;
    }

    .shoppush-popchat .brand__ty {
        inset-block-start: -16.8px;
        inset-inline-start: -19.2px;
        inline-size: 33.6px;
        block-size: 21.6px;
        padding-block-start: 16px;
        padding-inline-start: 8.8px;
    }

        .shoppush-popchat .brand__ty i {
            inline-size: 5px;
            block-size: 5px;
            margin: 0 2px 0 1px;
        }

    .shoppush-popchat .btn {
        padding: 25px;
        font-size: 12px;
    }

    .shoppush-popchat > div.plg {
        inline-size: 64px;
        block-size: 64px;
        inset-block-start: 32px;
    }

        .shoppush-popchat > div.plg > div {
            block-size: 64px;
        }

        .shoppush-popchat > div.plg.open {
            inline-size: calc(60%);
            padding: 10px;
            border-radius: 10px;
        }

            .shoppush-popchat > div.plg.open .brand {
                position: absolute;
                inset-block-start: -32px;
                inset-inline-start: calc(18%);
            }

            .shoppush-popchat > div.plg.open .not,
            .shoppush-popchat > div.plg.open .close {
                margin: 28px 0 7px;
            }

            .shoppush-popchat > div.plg.open .not {
                inline-size: 68%;
                block-size: initial;
                margin-inline-start: 14%;
                text-align: center;
            }

            .shoppush-popchat > div.plg.open .close {
                inline-size: 16%;
                margin-inline-start: 2%;
            }

        .shoppush-popchat > div.plg.left .brand__ty {
            inset-inline-end: -19.2px;
        }

        .shoppush-popchat > div.plg.left .not {
            margin-inline-start: 0;
            margin-inline-end: 14%;
        }

        .shoppush-popchat > div.plg.left .close {
            margin-inline-start: 0;
            margin-inline-end: 2%;
        }

    .shoppush-popchat {
        display: block;
    }

        .shoppush-popchat .pop-box {
            inline-size: 100% !important;
            block-size: 12%;
            margin-block-end: 55px;
        }

            .shoppush-popchat .pop-box > img {
                display: none;
            }

            .shoppush-popchat .pop-box .brand {
                inset-block-start: inherit;
                inset-block-end: -32px;
                inset-inline-end: calc(18%);
            }

        .shoppush-popchat .pop-text {
            align-items: baseline;
        }

            .shoppush-popchat .pop-text > div {
                inline-size: 94%;
                padding: 0 3%;
            }

                .shoppush-popchat .pop-text > div h1 {
                    font-size: 16px;
                    font-weight: bold;
                }

                .shoppush-popchat .pop-text > div p {
                    font-size: 14px;
                }

                .shoppush-popchat .pop-text > div .form > input {
                    margin: 0 0 10px;
                }

                    .shoppush-popchat .pop-text > div .form > input.name,
                    .shoppush-popchat .pop-text > div .form > input.email {
                        inline-size: 94%;
                    }

            .shoppush-popchat .pop-text .by {
                position: initial;
                margin-block-start: 30px;
                font-size: 12px;
            }

        .shoppush-popchat .just-mobile {
            position: absolute;
            inset-block-end: 0;
            inline-size: 100%;
            block-size: 25%;
        }

            .shoppush-popchat .just-mobile img {
                position: absolute;
                display: block;
                inset-block-start: calc(17%);
                inset-inline-start: calc(27%);
            }

        .shoppush-popchat.stp1 .just-mobile {
            display: block !important;
        }

        .shoppush-popchat.stp3 .pop-box {
            inline-size: 100%;
        }
}

div#sm-bounce[style="display: block;"] ~ div#sm-onsite {
    display: none !important;
}

.shoppush-popchat .brand {
    background-color: transparent;
}

.shoppush-popchat .brand__ty i,
.shoppush-popchat .btn,
.shoppush-popchat > div.plg,
.shoppush-popchat .pop-box {
    background-color: #000000;
}

.greetings > ul:last-of-type {
	padding: 0;
	width: 100%;
	height: 3rem;
	overflow: hidden;
	position: relative;
	font-family: 'Times New Roman';
  font-size: 120%;
  }
  .greetings > ul:last-of-type > * {
	line-height: 3rem;
  }
  .greetings > ul:last-of-type::after {
	display: block;
	content: "Hi,";
	position: absolute;
	top: 0;
	width: 25%;
	line-height: 3rem;
  }
  .greetings > ul:last-of-type li {
	/*margin-left: 5rem;*/
	list-style: none;
	animation: ticker 15s cubic-bezier(1, 0, 0.5, 0) infinite;
	-webkit-animation-duration: 25s;
  }
  
  @keyframes ticker {
	0% {
	  transform: translate3d(0, 0%, 0);
	}
	6.6666666667% {
	  transform: translate3d(0, -100%, 0);
	}
	13.3333333333% {
	  transform: translate3d(0, -200%, 0);
	}
	20% {
	  transform: translate3d(0, -300%, 0);
	}
	26.6666666667% {
	  transform: translate3d(0, -400%, 0);
	}
	33.3333333333% {
	  transform: translate3d(0, -500%, 0);
	}
	40% {
	  transform: translate3d(0, -600%, 0);
	}
	46.6666666667% {
	  transform: translate3d(0, -700%, 0);
	}
	53.3333333333% {
	  transform: translate3d(0, -800%, 0);
	}
	60% {
	  transform: translate3d(0, -900%, 0);
	}
	66.6666666667% {
	  transform: translate3d(0, -1000%, 0);
	}
	73.3333333333% {
	  transform: translate3d(0, -1100%, 0);
	}
	80% {
	  transform: translate3d(0, -1200%, 0);
	}
	86.6666666667% {
	  transform: translate3d(0, -1300%, 0);
	}
	93.3333333333% {
	  transform: translate3d(0, -1400%, 0);
	}
	100% {
	  transform: translate3d(0, -1500%, 0);
	}
	101% {
	  transform: translate3d(0, 0%, 0);
	}
  }
  
.bgm {
    margin-block-start: 35px;
    inline-size: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-end;
}

.bgm:after {
        display: block;
        inline-size: 100%;
        margin-block-start: 10px;
    }

.bgm .bar {
    display: inline-block;
    position: relative;
    margin-inline-end: 1px;
    inline-size: 10px;
    block-size: 1px;
    overflow: hidden;
    background: linear-gradient(to bottom, #ff9500, #ff5e3a);
    color: transparent;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.paused.bgm .bar {
    animation-iteration-count: 1;
}

.paused.bgm:after {
}

.n1 {
    animation-delay: 0.5s;
}

.n2 {
    animation-delay: 0.2s;
}

.n3 {
    animation-delay: 1.2s;
}

.n4 {
    animation-delay: 0.9s;
}

.n5 {
    animation-delay: 2.3s;
}

.n6 {
    animation-delay: 1.3s;
}

.n7 {
    animation-delay: 3.1s;
}

.n8 {
    animation-delay: 1.9s;
}

@keyframes pulse {
    0% {
        block-size: 1px;
        margin-block-start: 0;
    }

    10% {
        block-size: 40px;
        margin-block-start: -40px;
    }

    50% {
        block-size: 20px;
        margin-block-start: -20px;
    }

    60% {
        block-size: 30px;
        margin-block-start: -30px;
    }

    80% {
        block-size: 60px;
        margin-block-start: -60px;
    }

    100% {
        block-size: 1px;
        margin-block-start: 0;
    }
}

button,
.button {
  transition: all 0.3s ease;
  cursor: pointer;
  background-image: linear-gradient(#790000,#390000);
  border: 1px solid #790000;
  font-size: 11px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0px 0px 14px rgba(255, 176, 58, 0.281);
  position: relative;
  z-index: 1;
  padding: 5px 5px;
  text-decoration: none;
  cursor:url(/storage/assets/cursor/attack.cur), auto;
  filter: saturate(0.3);
}
button:hover,
.button:hover {
  filter: saturate(1.0);
  transition-duration: 0.1s;
  cursor:url(/storage/assets/cursor/attack.cur), auto;
}



body .cybr-btn + .cybr-btn {
    margin-block-start: 2rem;
}

.cybr-btn {
    --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
    --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 30%);
    --primary-hue: 280;
    --primary-lightness: 11;
    --color: hsl(0, 0%, 100%);
    --font-size: 26px;
    --shadow-primary-hue: 0;
    --label-size: 9px;
    --shadow-secondary-hue: 60;
    --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
    --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
    --border: 4px;
    --shimmy-distance: 5;
    --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
    --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
    --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
    --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
    --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
    font-family: 'Cyber', sans-serif;
    color: var(--color);
    cursor: pointer;
    background: transparent;
    text-transform: uppercase;
    font-size: var(--font-size);
    outline: transparent;
    letter-spacing: 2px;
    position: relative;
    font-weight: 700;
    border: 0;
    min-inline-size: 340px;
    block-size: 75px;
    line-height: 75px;
    transition: background 0.2s;
}

    .cybr-btn:hover {
        --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%));
    }

    .cybr-btn:active {
        --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
    }

    .cybr-btn:after,
    .cybr-btn:before {
        content: '';
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        clip-path: var(--clip);
        z-index: -1;
    }

    .cybr-btn:before {
        background: var(--shadow-primary);
        transform: translate(var(--border), 0);
    }

    .cybr-btn:after {
        background: var(--primary);
    }

.cybr-btn__tag {
    position: absolute;
    padding: 1px 4px;
    letter-spacing: 1px;
    line-height: 1;
    inset-block-end: -5%;
    inset-inline-end: 5%;
    font-weight: normal;
    color: hsl(0, 0%, 0%);
    font-size: var(--label-size);
}

.cybr-btn__glitch {
    position: absolute;
    inset-block-start: calc(var(--border) * -1);
    inset-inline-start: calc(var(--border) * -1);
    inset-inline-end: calc(var(--border) * -1);
    inset-block-end: calc(var(--border) * -1);
    background: var(--shadow-primary);
    text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
    clip-path: var(--clip);
    animation: glitch 2s infinite;
    display: none;
}

.cybr-btn:hover .cybr-btn__glitch {
    display: block;
}

.cybr-btn__glitch:before {
    content: '';
    position: absolute;
    inset-block-start: calc(var(--border) * 1);
    inset-inline-end: calc(var(--border) * 1);
    inset-block-end: calc(var(--border) * 1);
    inset-inline-start: calc(var(--border) * 1);
    clip-path: var(--clip);
    background: var(--primary);
    z-index: -1;
}

@keyframes glitch {
    0% {
        clip-path: var(--clip-one);
    }

    2%, 8% {
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }

    6% {
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    9% {
        clip-path: var(--clip-two);
        transform: translate(0, 0);
    }

    10% {
        clip-path: var(--clip-three);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    13% {
        clip-path: var(--clip-three);
        transform: translate(0, 0);
    }

    14%, 21% {
        clip-path: var(--clip-four);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    25% {
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    30% {
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }

    35%, 45% {
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * -1%));
    }

    40% {
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * 1%));
    }

    50% {
        clip-path: var(--clip-six);
        transform: translate(0, 0);
    }

    55% {
        clip-path: var(--clip-seven);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    60% {
        clip-path: var(--clip-seven);
        transform: translate(0, 0);
    }

    31%, 61%, 100% {
        clip-path: var(--clip-four);
    }
}

.cybr-btn:nth-of-type(2) {
    --primary-hue: 260;
}


#crystals {
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 480px;
    block-size: 100%;
}

@-webkit-keyframes bg-crystal001 {
    100% {
        background-position: 0px 900px;
    }
}

@-moz-keyframes bg-crystal001 {
    100% {
        background-position: 0px 900px;
    }
}

@-o-keyframes bg-crystal001 {
    100% {
        background-position: 0px 900px;
    }
}

@keyframes bg-crystal001 {
    100% {
        background-position: 0px 900px;
    }
}

#crystals .crystal_01 {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    left: 400px;
    background: url(/storage/assets/images/misc/crystal_01.png)repeat-y;
    -webkit-animation: bg-crystal001 30s infinite;
    -moz-animation: bg-crystal001 30s infinite;
    -o-animation: bg-crystal001 30s infinite;
    animation: bg-crystal001 30s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes bg-crystal002 {
    100% {
        background-position: 0px 900px;
    }
}

@-moz-keyframes bg-crystal002 {
    100% {
        background-position: 0px 900px;
    }
}

@-o-keyframes bg-crystal002 {
    100% {
        background-position: 0px 900px;
    }
}

@keyframes bg-crystal002 {
    100% {
        background-position: 0px 900px;
    }
}

#crystals .crystal_02 {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    background: url(#)repeat-y;
    -webkit-animation: bg-crystal002 60s infinite;
    -moz-animation: bg-crystal002 60s infinite;
    -o-animation: bg-crystal002 60s infinite;
    animation: bg-crystal002 60s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes bg-crystal003 {
    100% {
        background-position: 0px -1200px;
    }
}

@-moz-keyframes bg-crystal003 {
    100% {
        background-position: 0px -1200px;
    }
}

@-o-keyframes bg-crystal003 {
    100% {
        background-position: 0px -1200px;
    }
}

@keyframes bg-crystal003 {
    100% {
        background-position: 0px -1200px;
    }
}

#crystals .crystal_03 {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    inset-inline-start: 50%;
    margin-inline-start: -180px;
    -webkit-animation: bg-crystal003 90s infinite;
    -moz-animation: bg-crystal003 90s infinite;
    -o-animation: bg-crystal003 90s infinite;
    animation: bg-crystal003 90s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

#worldCrystals {
    position: fixed;
    inset-block-start: 150px;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 520px;
}

    #worldCrystals .crystal_01 {
        position: absolute;
        inline-size: 100%;
        block-size: 100%;
        background: url(#)no-repeat -500px 0px;
    }

@-webkit-keyframes bg-crystal004 {
    100% {
        background-position: 1198px 0px;
    }
}

@-moz-keyframes bg-crystal004 {
    100% {
        background-position: 1198px 0px;
    }
}

@-o-keyframes bg-crystal004 {
    100% {
        background-position: 1198px 0px;
    }
}

@keyframes bg-crystal004 {
    100% {
        background-position: 1198px 0px;
    }
}

#worldCrystals .crystal_02 {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    background: url(#)repeat-x;
    -webkit-animation: bg-crystal004 60s infinite;
    -moz-animation: bg-crystal004 60s infinite;
    -o-animation: bg-crystal004 60s infinite;
    animation: bg-crystal004 60s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes bg-crystal005 {
    100% {
        background-position: 1086px 0px;
    }
}

@-moz-keyframes bg-crystal005 {
    100% {
        background-position: 1086px 0px;
    }
}

@-o-keyframes bg-crystal005 {
    100% {
        background-position: 1086px 0px;
    }
}

@keyframes bg-crystal005 {
    100% {
        background-position: 1086px 0px;
    }
}

#worldCrystals .crystal_03 {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    inset-inline-start: 50%;
    margin-inline-start: -180px;
    background: url(storage/assets/images/misc/world_crystal_02.png)repeat-x;
    -webkit-animation: bg-crystal005 90s infinite;
    -moz-animation: bg-crystal005 90s infinite;
    -o-animation: bg-crystal005 90s infinite;
    animation: bg-crystal005 90s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

.link {
    position: relative;
    inline-size: 400px;
    block-size: 94px;
}

@-webkit-keyframes noticeblink {
  0% {
 
    box-shadow: inset 0 0 7rem -1rem rgba(192, 32, 48, 0), 0.05px 0 0 #ecc904;
  }
  50% {

    box-shadow: inset 0 0 6rem -0.5rem #ecc904, 0.25rem 0 0 #ecc904;
  }
  100% {

    box-shadow: inset 0 0 7rem -1rem rgba(192, 32, 48, 0), 0.05px 0 0 #ecc904;
  }
}

@keyframes noticeblink {
  0% {
 
    box-shadow: inset 0 0 7rem -1rem rgba(192, 32, 48, 0);
  }
  50% {

    box-shadow: inset 0 0 6rem -0.5rem #ecc904;
  }
  100% {

    box-shadow: inset 0 0 7rem -1rem rgba(192, 32, 48, 0);
  }
}

@-webkit-keyframes noticeblink2 {
  0% {
 
    box-shadow: inset 0 0 7rem -1rem rgba(32, 192, 40, 0), 0.05px 0 0 #04ec17;
  }
  50% {

    box-shadow: inset 0 0 6rem -0.5rem #04ec17, 0.25rem 0 0 #04ec17;
  }
  100% {

    box-shadow: inset 0 0 7rem -1rem rgba(32, 192, 32, 0), 0.05px 0 0 #04ec17;
  }
}

@keyframes noticeblink2 {
  0% {
 
    box-shadow: inset 0 0 7rem -1rem rgba(51, 192, 32, 0);
  }
  50% {

    box-shadow: inset 0 0 6rem -0.5rem #04ec17;
  }
  100% {

    box-shadow: inset 0 0 7rem -1rem rgba(192, 32, 48, 0);
  }
}

.ran-cta,
.ran-cta * {
    box-sizing: border-box;
}

.ran-cta {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    cursor: pointer;
}

.ran-cta--background, .ran-cta--background div, .ran-cta--foreground {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
}

.ran-cta--background {
    z-index: -1;
    filter: drop-shadow(5px 8px 30px rgba(219, 43, 48, 0.15));
}

.ran-cta--background > div {
    content: "";
    background: #02090d;
    border: 1px solid #db2b30;
    -webkit-clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

.ran-cta--foreground {
    border: 1px solid #db2b30;
    -webkit-clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    transform: translateX(-5px) translateY(-5px);
    will-change: transform;
    transition: 0.2s transform;
}

    .ran-cta--background:after, .ran-cta--background:before, .ran-cta--foreground:after, .ran-cta--foreground:before {
        content: "";
        position: absolute;
        inline-size: 1px;
        block-size: 28px;
        background: #db2b30;
    }

    .ran-cta--background:after, .ran-cta--foreground:after {
        inset-block-start: calc(28.28px / -2);
        inset-inline-start: 0;
        transform: rotate(45deg) translateX(13.5px) translateY(1px);
    }

    .ran-cta--background:before, .ran-cta--foreground:before {
        inset-block-end: calc(28.28px / -2);
        inset-inline-end: 0;
        transform: rotate(45deg) translateX(-13.5px) translateY(-0.5px);
    }

.ran-cta--text {
    margin: auto;
    font-family: aileron, sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #eef4f6;
    text-shadow: 4px 4px 30px rgba(238, 244, 246, 0.1);
    will-change: letter-spacing;
    transition: 0.2s letter-spacing;
}

    .ran-cta--text::-moz-selection {
        background: none;
    }

    .ran-cta--text::selection {
        background: none;
    }

.ran-cta:hover .ran-cta--text {
    letter-spacing: 0.08em;
}

.ran-cta:hover .cyber-cta--foreground {
    transform: translateX(-8px) translateY(-8px);
}

.ran-cta:active .ran-cta--foreground {
    transform: translateX(0px) translateY(0px);
}

.ran-btn {
    position: relative;
    display: inline-block;
    padding: .25em 1.25em;
    cursor: pointer;
    font-size: 2.5rem;
    text-decoration: none;
    border: var(--clr-neon) .10em solid;
    border-radius: 0.25em;
    color: var(--clr-neon);
    text-transform: capitalize;
    text-shadow: 0 0 .115em hsl(0, 90%, 45%), 0 0 .45em currentColor;
    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
    transition: opacity .2s ease-in;
    outline: none;
}

    .ran-btn::before {
        pointer-events: none;
        position: absolute;
        background-color: var(--clr-neon);
        inset-block-start: 110%;
        inset-inline-start: 0%;
        inline-size: 100%;
        block-size: 100%;
        transform: perspective(.9em) rotateX(45deg) scale(1, 0.25);
        filter: blur(.6em);
        opacity: 0.7;
    }

    .ran-btn::after {
        content: '';
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        box-shadow: 0 0 2em 0.5em var(--clr-neon);
        opacity: 0;
    }

    .ran-btn:hover::after,
    .ran-btn:focus::after,
    .ran-btn:hover::before,
    .ran-btn:focus::before {
        opacity: 1;
    }

    .ran-btn:hover,
    .ran-btn:focus {
        background-color: var(--clr-neon);
        color: var(--clr-blue);
    }
:root {
    --clr-neon: hsl(277deg 100% 54% / 77%);
    --clr-blue: hsl(235, 62%, 73%);
    --clr-bg: hsl(323, 21%, 16%);
}

.RANKtabs {
    margin: 0px auto;
    background: #000;
    position: relative;
    inset-inline-start: 0px;
}

.RANKtab {
    float: inline-start;
}



.RANKtab label {
    display: block;
    position: relative;
    inline-size: 91px;
    block-size: 20px;
    background: #1c1c1c;
    text-transform: uppercase;
    font: 800 9px/170% 'Cyber';
    color: #FFF;
    padding: 5px 5px 5px 5px;
    text-align: center;
    letter-spacing: 1px;
    z-index: 3;
}

    .RANKtab input[type=radio]:checked ~ label {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,227,0,1)), color-stop(100%,rgba(173,59,5,1)));
        color: #FFF;
        z-index: 2;
    }

    .RANKtab input[type=radio] {
        display: none;
    }


.RANKcontent {
    position: absolute;
    inset-block-start: 32px;
    inset-inline-start: 0px;
    /*inline-size: 300px;*/
    background: hsl(0deg 1% 3%);
}


.RANKtab input[type=radio]:checked ~ label ~ .RANKcontent {
    z-index: 1;
}

.button-download {
    --background: #2B3044;
    --background-hover: #1E2235;
    --text: #fff;
    --icon: #fff;
    --particle: #fff;
    display: flex;
    outline: none;
    cursor: pointer;
    border: 0;
    min-inline-size: 113px;
    padding: 8px 20px 8px 12px;
    border-radius: 11px;
    line-height: 24px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    background: var(--b, var(--background));
    transition: transform .3s, background .4s;
    transform: scale(var(--scale, 1)) translateZ(0);

}

.btn-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn {
	border: 0;
	border-radius: 5px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	padding: 15px 30px;
	position: relative;
	margin: 10px;
}

.btn:active {
	box-shadow: none;
	transform: scale(0.98);
}

.btn:focus {
	outline: none;
}

.btn.ghost {
	background-color: #fff;
	color: #3498db;
	box-shadow: none;
}

.btn.ghost span {
	background-color: #3498db;
	border: 0;
	border-radius: 5px;
	color: #fff;
	font-size: 10px;
	padding: 3px 7px;
	position: absolute;
	inset-block-start: -10px;
	inset-inline-end: -10px;
	transform: rotate(10deg);
}

.download-driver__list {
  padding: 30px;
  text-align: center
}

.download-driver__item {
  display: inline-block;
  vertical-align: middle;
  width: 320px;
  height: 100px;
  margin: 10px;
  background-color: #333;
  color: #fff
}

.download-driver__link {
  display: block;
  vertical-align: middle;
  text-align: left;
  font-style: italic
}

.download-driver__thumb {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  margin: 20px;
  background-color: #fff
}

.download-driver__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.download-driver__title {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  color: #fff
}

.download-driver__text {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: #999;
  text-decoration: underline
}

.post {
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  border-bottom: 1px solid #343a40;
  padding: 1.5em 0;
}
.post a {
  color: teal;
  text-decoration: none;
}
.post a:hover {
  color: #00b3b3;
}
.post .feat-img {
  /* Landscape phones and down */
  width: 24%;
  float: left;
  margin-right: 2%;
}
@media (max-width: 480px) {
  .post .feat-img {
    width: 100%;
  }
  .post .feat-img img {
    padding-bottom: 2%;
    display: block;
    margin: auto auto;
    text-align: center;
  }
}
.post .feat-img img {
  width: 150px;
  height: 70px;
}
.post article {
  float: left;
  margin: 0px 45px;
}
@media (max-width: 480px) {
  .post article {
    width: 100%;
  }
}
.post article header p.author-cred {
  padding: 0.5em;
}
.post article header ul.cat {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 480px) {
  .post article header ul.cat {
    display: block;
    margin: auto auto;
  }
}
.post article header ul.cat li {
  color: #ccc;
  display: inline-block;
  padding: 0px 5px 0px 0px;
}
.post article header ul.cat li:last-child:after {
  padding-left: 5px;
  content: none;
}
.post article header ul.cat li:after {
  padding-left: 5px;
  content: " / ";
}
.post article header ul.cat li a {
  color: teal;
  text-decoration: none;
}
.post article header ul.cat li a:hover {
  color: #00b3b3;
}
.post h2 {
  font-size: 1%;
  line-height: 1.5em;
  margin: 0.5em 0;
}
.post h2 a {
  color: #333;
}
.post footer {
  width: 100%;
  margin: -20px 60px;
  overflow: auto;
}
ul.tags {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.tags li {
  display: block;
  margin-top: 2%;
}
ul.tags li:first-child {
  margin-top: 0;
}
ul.tags li a {
  color: #fff !important;
  padding: 0.3em 0.65em;
  background: teal;
  display: block;
}
ul.tags li a:hover {
  background: #003334;
}
.more-link {
  transition: all 0.3s ease;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(#790000,#390000);
  color: #fff !important;
  padding: 0.5em 0.75em;
  display: inline-block;
  float: right;
  filter: saturate(0.3);
}
@media (max-width: 480px) {
  .more-link {
    width: 100%;
    text-align: center;
  }
}
.more-link:hover {
  filter: saturate(1.0);
  transition-duration: 0.1s;
}

.popup img {
	inline-size: 70px;
}

/* SOCIAL PANEL CSS */
.social-panel-container {
	position: fixed;
	inset-inline-end: 0;
	inset-block-end: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
}

.social-panel-container.visible {
	transform: translateX(-10px);
}

.social-panel {
	background-color: #261414;
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px rgba(51, 26, 27, 0.6);
	border: 5px solid #383737;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: "Muli";
	position: relative;
	block-size: 169px;
	inline-size: 370px;
	max-inline-size: calc(100% - 10px);
}

.social-panel button.close-btn {
	border: 0;
	color: #97a5ce;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	inset-block-start: 5px;
	inset-inline-end: 5px;
}

.social-panel button.close-btn:focus {
	outline: none;
}

.social-panel p {
	background-color: #613800;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 17px 6px;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	inline-size: 235px;
}

.social-panel p i {
	margin: 0 5px;
}

.social-panel p a {
	color: #ff7500;
	text-decoration: none;
}

.social-panel h4 {
	margin: 20px 0;
	color: #97a5ce;
	font-family: "Muli";
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
}

.social-panel ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-panel ul li {
	margin: 0 10px;
}

.social-panel ul li:hover {
	transform: scale(1.2);
  -webkit-animation: none;
  animation: none;
}

.social-panel ul li a {
	border: 1px solid #dce1f2;
	border-radius: 50%;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	block-size: 50px;
	inline-size: 50px;
	text-decoration: none;
  filter: saturate(0.0);
}

.social-panel ul li a:hover {
	border-color: #ff6a00;
	box-shadow: 0 9px 12px -9px #ff3c00;
  filter: saturate(1.0);
}

.floating-btn {
	border-radius: 26.5px;
	background-color: #281216;
	border: 1px solid #6b6969;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 20px;
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 999;
}

.floating-btn:hover {
	background-color: #281216;
	color: #fff;
    box-shadow: 0 9px 12px -9px #ff3c00;
}

.floating-btn:focus {
	outline: none;
}

.floating-text {
	background-color: #001f61;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-family: "Muli";
	padding: 7px 15px;
	position: fixed;
	inset-block-end: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 998;
}

.floating-text a {
	color: #ff7500;
	text-decoration: none;
}

@media screen and (max-inline-size: 480px) {
	.social-panel-container.visible {
		transform: translateX(0px);
	}

	.floating-btn {
		inset-inline-end: 10px;
	}
}

.content-body {
  background: hsl(0deg 1% 3% / 90%);
  height: 910px;
  overflow-x: hidden;
  padding-right: 10px;
}

.wrap {
/*  display: table;*/
  margin: 20px auto;
}

.content-container {
  height: auto;
  width: 420px;
  margin: 5px;
  background: #141414;
  border-radius: 5px;
  display: inline-block;
  padding: 10px;
}
.content-container .head {
  display: flex;
  position: relative;
  height: 70px;
  margin-bottom: 10px;
}
.content-container .head .img {
  height: 70px;
  width: 185px;
  background: #3d3d3d;
  background-image: url(http://cdn2.pc.de/images/f/4/1/4/1027/882281c389.jpg);
  background-size: cover;
  background-position: center;
}
.content-container .head .game {
  margin: 10px 5px;
  color: #96683d;
  font-size: 14px;
  font-weight: bold;
}
.content-container .head .timeContainer {
  display: flex;
  flex-direction: column;
  text-align: right;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.content-container .head .timeContainer .time {
  color: #8F98A0;
  font-size: 14px;
}
.content-container .bottom {
  background: #282828;
  padding: 10px;
  border-radius: 5px;
  display: block;
}
.content-container .bottom img {
  max-width: 100%;
  border: 1px solid rgba(198, 228, 245, 0.2);
  box-shadow: 0px 7px 7px -1px rgba(0, 0, 0, 0.3);
}
.content-container .bottom .BadgeContainer {
  height: 40px;
  width: 275px;
  background: #3d3d3d;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  box-shadow: 1px 1px 2px #3d3d3d;
}
.content-container .bottom .BadgeContainer .badge {
  height: 40px;
  width: 40px;
  background-size: cover;
  background-image: url(https://i.imgur.com/VHxQ741.png);
  border-radius: 25px;
}
.content-container .bottom .BadgeContainer .cont {
  display: flex;
  flex-direction: column;
}
.content-container .bottom .BadgeContainer .cont .name {
  margin-left: 5px;
  color: #ebebeb;
}
.content-container .bottom .BadgeContainer .cont .name a {
  text-decoration: none;
  color: white;
}
.content-container .bottom .BadgeContainer .cont .name a:hover {
  text-decoration: underline;
}
.content-container .bottom .BadgeContainer .cont .xp {
  margin-left: 5px;
  color: #8F98A0;
  font-size: 12px;
}
.content-container .bottom .hr {
  border-top: 1px solid #222223;
  background-color: #3d3d3d;
  height: 1px;
  margin-top: 10px;
}
.content-container .bottom .mediaContainer {
  margin-top: 10px;
}
.content-container .bottom .mediaContainer a {
  text-decoration: none;
  color: #ebebeb;
}

.media.user-info .media-object{block-size:80px;inline-size:80px}.media.user-info .media-body{padding-block-start:10px}.media.user-info .media-heading{text-transform:uppercase}.user-box .user-img{block-size:80px;margin:0 auto 10px;inline-size:80px}.user-box .user-info .table{margin:0 auto}.user-info .table>tbody>tr>td{border-color:#252525}