@font-face {
	font-family: "Pricedown";
	src: url('/assets/fonts/pricedown.ttf');
}
@keyframes panacoins {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}
@keyframes float {
	0% {transform: translatey(0px);}
	50% { transform: translatey(-5px); filter: drop-shadow(0px 5px 3px #ffffff80);}
	100% {transform: translatey(0px);}
}
@keyframes flash {
	0% {filter: brightness(1);}
	50% {filter: brightness(1.3);}
	60% {filter: brightness(1);}
}
@keyframes online {
	0% {opacity: 1;}
	50% {opacity:0;}
	100% {opacity:1;}
}
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 50px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 50px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 50px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 50px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes rotate {
    from {transform:rotate(0);}
    to {transform:rotate(360deg);}
}

/*
1. GLOBAL
*/
::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #223f61;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}
img {
  max-width: 100%;
}
body {
	font-family: 'Roboto', Segoe UI, Arial, sans-serif !important;
  background: url(/assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  padding: 40px;
}
/* Boutique ========================== */
.shopPack {
  background: linear-gradient(to right, #ffffff00, #ffffff96);
  border-radius: 10px;
  border-right: 0.3px solid #ffffff;
  height: 13vw;
  overflow: hidden;
  position:relative;
}
.shopPrix {
  border-radius: 10px 0px 0px 10px;
  background: linear-gradient(to bottom, #292639bf, #4b4a6052);
  height: 100%;
  width: 15vw;
  float: left;
  text-align: center;
  overflow: hidden;
  position:relative;
}
.deletFree{
	color: #ceffd2;
    width: 100%;
    background: #50ff5f54;
    height: 2vw;
    padding: 0.5vw;
    font-size: 0.7vw;
    line-height: 150%;
    position: absolute;
    bottom: 0;
}
.prixChiffre
{
  font-size: 2vw;
  display: block;
  overflow: hidden;
  color: #fff;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8);
  margin-top: 1.5vw;
  margin-left: 1.5vw;
  margin-right: 1.5vw;
  margin-bottom: 0.5vw;
  background: #ffffff14;
  box-shadow:   0px 1px 0px #ffffff1f inset;
}
.packName {
  font-size: 1.7vw;
  width: 100% !important;
  height: auto;
  background: #ffffff14;
  transition: all 0.1s ease;
  border-radius: 0px;
  color: #fff;
  display: block;
  overflow: hidden;
}
.packName b {
	display: block;
	font-weight: normal; 
	margin-top: 0px;
	font-size: 0.5vw;
	color: #fff;
	background: linear-gradient(to right, #ffffff00, #ffffff96, #ffffff00);
}
.shopOffre {
  /*background: lightgreen;*/
  height: 100%;
  width: 75%;
  margin-left: 15vw;
  font-size: 0.9vw;
  border-radius: 0px 10px 10px 0px;
}

.shopOffre p {
  padding: 1vw;
  margin-right: 19vw;
  overflow-y: scroll;
  height: 10vw;
}

.shopOffre b {
   text-transform: none;
   text-decoration: none;

   color: #4c865c;

   width: auto
   height: 2vw;

   margin: 0;
   bottom: 0;
   list-style: none; 
   position: absolute;
   height: 2vw;

   padding: 0.5vw;
   font-size: 0.7vw;
   line-height: 150%;
   margin-left: 0vw;

   background:  none;
}

.shopOffre img {
  right: 0px;
  position: absolute;
  height: 100%;
  width: 17.5vw;
  background:  linear-gradient(to left, #4b4a6052, rgba(255, 255, 255, 0.0));
  border-radius: 0px 10px 10px 0px;
}
.shopOffre ul {
   margin: 0;
   bottom: 0;
   list-style: none; 
   position: absolute;
   width: 100%;
   height: 2vw;

   padding: 0.5vw;
   font-size: 0.7vw;
   line-height: 150%;
   margin-left: 6vw; 

   background:  none;
}
.shopOffre ul li {
   display: inline-block;
}
.shopOffre ul li a { 
  text-transform: none;
  text-decoration: none;
  padding: 0.3vw;
  border-radius: 0.2vw;

  background: #ad404082;
  color: #efe5d7;
}
.shopOffre ul li a:hover {
   background: #cc000082;
   color: #ffffff;
}
.shopOffre ul li a:active {
   margin-top: 2px;
}

.buttonPF {
    display: inline-block;
    border-radius: 0.3vw;
    background-image: linear-gradient(100deg,#0070ba,#003087);
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.3vw;
    padding: 0.3vw;
    width: 10vw;
    transition: all 0.5s;
    cursor: pointer;
    margin: 0vw;
}

.buttonPF span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonPF span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonPF:hover span {
  padding-right: 25px;
}

.buttonPF:hover span:after {
  opacity: 1;
  right: 0;
}
/* ====================================*/
.coImgInfo {
  display: inline-block;
}
.coImgInfo img
{
  animation: float 5s infinite;
  transition: all 0.3s ease;
  margin: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); 
  width: 200px; 
  float: left;
}
.lien
{
  color: #fff;
  background: #008eff;
  border-radius: 5px;
  padding: 3px 5px;  
  text-shadow: 0px 0px 1px #777;
  display: inline-block;
}
.lien:hover
{
  color: #fff;
  background: #005aa2;
  text-decoration: none;
}
.disabled {
	color: grey !important;
	opacity: 0.5;
	cursor: default !important;
}
.panacoins-icon {
	animation: panacoins 3s infinite;
}
.btn {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	padding: 0.4vw 0.8vw !important;
	box-shadow: 0px -20px 20px inset #00000038;
	font-size: 1vw !important;
}
.btn:focus {
	box-shadow: 0px -20px 20px inset #00000038 !important;
}
.btn-login {
	background-color: #bd3e47;
	border-color: #ac4150 !important;
	color: #fff;
}
.btn-login:hover {
	background-color: #a9333b;
}
.btn-login:active {
	background-color: #8e2f35;
}
.btn-login svg {
  filter: drop-shadow(0px 0px 5px #00000050);
  margin-right: 5px;
}
b.emphasis {
  background: #3f5a83;
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 0.9em;
  display: table;
  margin-bottom: 4px;
}
/*
2. HEADER
2.1. LOGO & MAIN MENU
*/
#header {
 height: 10%;
 position: relative;
}
.logo img {
  filter: drop-shadow(0px 0px 3px #ffffff80);
  margin-top: -1vw;
  margin-left: -1vw;
  width: 10vw;
  animation: float 5s infinite;
  transition: all 0.3s ease;
}
.logo img:hover {
  transition: all 0.5s ease;
  transform: rotateY(-5deg);
}
img.logo-text {
  margin-top: -2.5vw
  margin-left: -1vw;
  width: 20vw;
  animation: flash 4s infinite 1s;
  transition: all 1.1s ease;
}
img.logo-text:hover {
  transform: translateX(10px);
  transition: all 0.6s ease;
}
a.logo:hover {
	text-decoration: none;
}
ul.main-menu {
  list-style: none;
  float: right;
  font-size: 16px;
}
.main-menu li {
  display: inline-block;
  text-align: center;
  padding: 0.2vw 0.1vw;
  margin: 0vw 1vw;
  transition: all 0.3s ease;
}
.main-menu li:hover {
  box-shadow: inset 0 -2px 0 #3b5d89;
  transition: all 0.5s ease;
}
.main-menu a {
  color: #3b5d89;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
}
.main-menu a:hover {
	color: #3b5d89;
  text-decoration: none;
}
li.join-btn {
  background: linear-gradient(to right, #8e90b778, #83afbcb5);
  border-radius: 35px;
  padding: 6px 17px;
  transition: all 0.5s ease;
}
li.join-btn:hover {
  box-shadow: 0px 3px 0 #49607c;
  transform: translateY(-3px);
	background: linear-gradient(to right, #b4b7e8fa, #8ccadc);
}
.main-menu img {
  width: 21px;
  margin-top: -4px;
  margin-right: 3px;
}
/*
2.2. SERVER INFO BAR
*/
.server-info {
  border-radius: 12px;
  background: linear-gradient(to bottom, #3a5d88, #002a4a6b);
  box-shadow: 0px 3px 15px rgba(0,0,0,0.25);
  color: #fff;
  padding: 1%;
  width: calc(66.6667% + 1rem + 16.666%);
  border-top: 1px solid #5780b1;
}
span.server-ip {
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.2em;
}
.server-info a {
  font-family: 'Roboto Condensed', sans-serif;
  color: #83a2d0;
  border: 2px solid;
  padding: 4px 15px;
  margin-left: 10px;
  border-radius: 100px;
  transition: all 0.4s ease;
}
.server-info a:hover {
  text-decoration: none;
  color: #a1c7ff;
  transition: all 0.3s ease;
}
img.server-status.online {
  animation: online 3s infinite;
}
img.server-status {
  margin-top: -4px;
  padding-right: 7px;
}

/*
3. CONTENT
3.1. CONTENTBOX
*/
#content {
  min-height: 500px;
}
.content-box {
  padding: 30px !important;
  border-radius: 12px;
  background: linear-gradient(to bottom, #ffffffe0, #ffffff80);
  box-shadow: 0px 3px 15px rgba(0,0,0,0.25);
  min-height: 600px !important;
}
h2.page-title {
	font-family: 'Roboto Condensed', sans-serif;
  color: #3f5a83;
  margin: 0;
}
hr.pagetitle-sep {
    margin-top: 30px;
    margin-bottom: 20px;
}
.content-box h3 {
  color: #413e57;
  border-bottom: 4px solid;
  display: table;
  padding-bottom: 6px;
  margin-bottom: 15px;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: bold;
}
.content-box h4 {
    color: #413e57;
}

/*
3.2. SIDEBOX
*/
.sidebox {
  border-radius: 12px;
  background: linear-gradient(to bottom, #292639bf, #4b4a6052);
  box-shadow: 0px 3px 15px rgba(0,0,0,0.25);
  min-height: 600px !important;
  color: #fff;
}
ul.side-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-menu li {
  padding: 1vw 3vw;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1vw;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.side-menu li:hover {
  background: #ffffff14;
  box-shadow: 0px -1px 0px #ffffff1f inset, 0px 1px 0px #ffffff1f inset;
  transition: all 0.1s ease;
}
.side-menu a {
  color: #fff;
}
.side-menu a:hover {
  text-decoration: none;
  color: #fff;
}
.side-menu svg {
  margin-right: 7px;
  width: 20px !important;
}
.side-menu li.active {
  background: linear-gradient(to right, #ffffffb0, white 32%, #ffffffb0);
}
.side-menu a li.active {
  color: #4c4460;
}
.side-menu a li.active:hover {
  text-shadow: none;
}
.side-menu li:active {
  background: #00000042;
}
li.adminlink {
	color: #ff9999;
}
ul.sidebox-buttons {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.sidebox-buttons li {
  display: inline-block;
  text-align: center;
	transition: all 0.3s ease;
}
ul.sidebox-buttons li a {
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
}
ul.sidebox-buttons li a:hover {
    text-decoration: none;
}
ul.sidebox-buttons li:hover {
  transform: translateY(-3px);
  transition: all 0.5s ease;
}
.sidebox-avatar {
	text-align: center;
  padding-top: 20px;
}
.sidebox-avatar img {
  border-radius: 100%;
}
.sidebox-header h4 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.4em;
  margin-top: 6px;
	color: #fff;
}
ul.sidebox-ministats {
  list-style: none;
  text-align: center;
  background: rgb(255, 255, 255);
  color: #4a4963;
  padding: 5px 0;
  margin-top: -8px;
  margin-bottom: 30px;
  display: block;
  background: linear-gradient(to right, #ffffffb0, white, #ffffffb0);
}
ul.sidebox-ministats li {
  display: inline-block;
	font-weight: bold;
}
ul.sidebox-ministats li.panacoins, table.account-infos td.panacoins {
	color: #fea832;
	text-shadow: 0px -1px 0px #c16700, 0px 1px 0px #c16700, -1px 0px 0px #c16700, 1px 0px 0px #c16700;
}
ul.sidebox-ministats li.money {color: #206c1b;}
a.getmorepc {
  color: #3a3049 !important;
  font-size: 0.8em;
  opacity: 0.5;
  margin-left: 7px;
}
a.getmorepc:hover {
  opacity: 1;
}

/*
3.3. CONTENT ELEMENTS
3.3.1. ACCOUNT MENU
*/
ul.account-menu {
  list-style: none;
  float: right;
	padding: 0;
}
ul.account-menu a {
    color: #fff;
}
ul.account-menu li img {
		width: 18px;
    margin-right: 10px;
    margin-top: -3px;
}
ul.account-menu li {
  display: inline-block;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
  border-radius: 3px;
  padding: 8px 15px;
  background-color: #3f5a83;
  box-shadow: 0px 0px 2px #3f5a83;
  position:relative;
  background-image: linear-gradient(to right, #3f5a83, rgba(255,255,255,0));
  transition: all 1s ease;
  box-shadow: 100px 0px 100px -50px #9496bd00 inset;
}
ul.account-menu li.active, ul.account-menu li:hover {
  background-color: #6f95a8;
  transition: all 1s ease;
  box-shadow: 130px 0px 100px -50px #9496bd inset;
  filter: brightness(1.1);
}
ul.account-menu li:hover {
 	box-shadow: 130px 0px 100px -50px #9496bd inset, 0px 0px 15px #0000002e;
}
ul.account-menu li:hover img {
	animation: rotate 500ms 1;
}

/* 3.3.2. ACCOUNT INFOS */
.account-infos-box {
  width: 100%;
  position: relative;
}
.account-character {
	float: right;
	position: relative;
	max-width: 40%;
	width: 320px;
}
.account-character-bars {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
	text-align: center;
}
.hp-bar, .armor-bar {
  width: 110px;
  height: 17px;
  border-radius: 2px;
  overflow: hidden;
	box-shadow: 0px 0px 1px #000;
}
.hp-bar {
	background: #610000;
}
.hp-bar-inner, .armor-bar-inner {
  height: 100%;
}
.hp-bar-inner {
	background: #c20000;
}
.armor-bar {
    background: darkgrey;
    margin-bottom: 4px;
}
.armor-bar-inner {
    background: #fff;
}
.account-character-bars span.username {
  color: #fff;
  text-shadow: -1px 0px 0px #000, 1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, 0px 0px 2px #000;
  font-family: 'Arial', sans-serif;
  font-weight:bold;
}
ul.account-infos {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: calc(100% - 320px);
}
ul.account-infos li {
  margin-bottom: 25px;
}
td.info-label {
  background: #413e57;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  padding: 10px 20px;
  font-size: 0.9em;
	position: relative;
}
table.account-infos {
  border-collapse: separate;
  border-spacing: 0 6px;
  width: calc(100% - 320px);
}
table.account-infos tr {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
td.info-content {
  background: linear-gradient(to right, white, #f1f1f1);
  width: 70%;
  padding-left: 20px;
  color: #413e57;
}
td.info-label svg {
	margin-right: 10px;
	max-width: 16px;
	min-width: 16px;
}
.xp-minibar {
  background: #413e57;
  width: 20%;
  height: 11px;
	margin-left: 6px;
  border-radius: 20px;
  display: inline-block;
  overflow: hidden;
}
.xp-minibar-progress {
  height: 100%;
  background: linear-gradient(to right, #6d66a5, #8675fe);
}
p.character-desc {
  text-align: justify;
  background: #fff;
  max-width: calc(100% - 320px);
  padding: 15px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
p.character-desc b {
  color: #413e57;
}
td.panacoins a {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
  text-shadow: none;
  color: #413e57;
  font-size: 0.9em;
  line-height: 1.8em;
	opacity: 0.6;
	transition: all 0.3s ease;
}
td.panacoins a:hover {
	text-decoration: none;
	opacity: 1;
	transition: all 0.5s ease;
}
td.panacoins a svg {
	margin-right: 5px;
}
/*
3.3.3. BUY PANACOINS
*/
.buy_panacoins {
  background: linear-gradient(to top, #ffffff00, #ffffff96);
  text-align: center;
  padding: 1rem 3rem 3rem;
  border-radius: 10px 10px 0 0;
  border-top: 1px solid #fff;
}
p.buy_panacoins-desc {
  text-align: justify;
  font-style: italic;
  width: 80%;
  margin: -10px auto 20px auto;
}
table.history {
	width: 100%;
}
table.history tr {
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
table.history td {
	background: linear-gradient(to right, white, #f1f1f1);
	padding: 10px 20px;
}
table.history tr.no-result {
	text-align: center;
}
.buy_panacoins select {
  padding: 10px;
  width: 80%;
  transition: all 0.3s ease;
  border-radius: 50px;
  border: none;
  color: #3a3a3a;
}
.buy_panacoins select:focus {
  outline: none;
}
.buy_panacoins select:hover {
  transition: all 0.4s ease;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.buy_panacoins-btn {
  width: 80%;
  border-radius: 50px !important;
  height: 49px;
  margin-top: 10px;
  background: #eaad35;
  box-shadow: 0px -20px 20px inset #00000038, 0px 0px 5px #0003;
  line-height: 0.5;
  color: #fff;
  text-shadow: 0px 1px 2px #86631c;
}
.buy_panacoins-btn:hover {
  background: #d8a237;
}
.buy_panacoins-btn:active {
	background: #b1842a;
}

/*
4. FOOTER
*/
footer {
	background: linear-gradient(to bottom, #0b162378, #17212ecf);
  border-top: 5px solid #dedede;
  color: #dedede;
  margin-top: 60px;
  margin-bottom: -60px;
  width: calc(100% + 80px);
  margin-left: -40px;
  padding: 0 40px;
}
footer a, footer a:hover {
  color: #43b0ff;
}
footer .section {
	width: calc(66.6667% + 1rem + 16.666%);
  margin: auto;
	padding: 15px;
	border-bottom: 1px solid #ffffff0a;
}
footer h2 {
  margin: 0 0 6px 0;
  font-size: 1.5rem;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
}
ul.footer-sections {
  width: 100%;
	padding: 0;
}
ul.footer-links {
	list-style: none;
}
.footer-socials {
	margin: 10px auto;
}
.footer-social {
  display: inline-block;
  font-size: 2.2rem;
  margin-right: 5%;
}
.footer-social:last-child {
	margin-right: 0;
}
.footer-social a {
	color: #dedede;
	transition: all 0.3s ease;
}
.youtube a:hover {color:#cd201f;}
.discord a:hover {color:#5a73c5;}
.snapchat a:hover {color:#fffc00;}
.facebook a:hover {color:#3b5999;}
.twitter a:hover {color:#55acee;}

img.footer-logo {
  transition: all 0.3s ease;
}
img.footer-logo:hover {
  transform: translateY(-3px);
  transition: all 0.3s ease;
}

/*
5. MISCELLANEOUS
*/