a, a:hover {
  	text-decoration: none !important;
  	transition: .3s all;
}

::-webkit-scrollbar {
        background: #0f0f0f;
        border: 0;
        width: 3px;
}

::-webkit-scrollbar-thumb {
        background: #0b0b0b;
        border: 0;
}

/****************************************************************** PAGE ACCUEIL ******************************************************************/
.page_accueil {
        background: #0d0d0d;
        border: 1px solid #0b0b0b;

        margin-top: 20px;
margin-bottom: 10px;
        font-family: 'Share Tech Mono', monospace;
  	color: #aaa;
        width: 1000px;
	height: 340px;
}

.page_accueil .content {
        display: flex;
        font-size: 12px;
        margin: 1% auto;
        width: 99%;
        justify-content: space-between;
        flex-wrap: wrap;
        text-transform: uppercase;
}

/* FLASHNEWS */
.flashnews {
        background: #3d4b49;
        padding: 2%;
        text-align: center;
        color: #000;
        text-transform: uppercase;
        font-size: 1.5em;
        letter-spacing: 5px;
        text-decoration: underline;
        width: 25%;
        float: left;
}

.slideshow, .slide {
        width: 568px;
        height: 59px;
  	margin: auto;
        overflow: auto;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
  	box-sizing: border-box;
  	padding: 1% 0 0;
  	color: #979797;
}

.slideshow {
        background: #1a1919;
        margin: 0;
        overflow: hidden;
        position: relative;
        font-size: 12px;
        letter-spacing: 2px;
}

.slideshow div {
        position: relative;
        top: 0;
        left: 0;
}

/* BLOCS */

.recentthread  {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;     overflow:auto; height:300px;
    border-box:box-sizing;
scrollbar-width: none;
}
.bloc_pa {
        flex: 1;
        margin: 0 .5%;
  	width: 250px;
	height: 300px;
  	text-align: center;
}

.bloc_pa:nth-child(2n+2) {
    	border: 1px solid rgba(26,25,25,.5);
        background: #0b0b0b;
}

.bloc_ha {
        flex: 1;
        margin: 0 .5%;
  	width: 250px;
	height: 300px;
  	text-align: center;
}

.bloc_ha:nth-child(2n+2) {
    	border: 1px solid rgba(26,25,25,.5);
        background: #0b0b0b;
}

/* CONTEXTE */
.contexte {
        background: #0d0d0d;
        padding: 5px;
        border: 1px solid rgba(26,25,25,.5);
        width: 250px;
	height: 245px;
        overflow: hidden;
        text-align: justify;
  	position: relative;
}

.contexte img {
        max-width: 100%;
        z-index: 3;
        opacity: 1;
        position: relative;
        transition: .5s all;
}

.contexte:hover img {
        z-index: 2;
        opacity: 0;
}

.contexte_txt {
        background: #0b0b0b;
width: 250px;
	height: 245px;
        overflow: auto;
        width: 100%;
        z-index: 2;
        margin-top: -235px;
        box-sizing: border-box;
  	text-transform: initial;
  	position: relative;
        padding: 0 2% 0 0;
}

/* TEMPORALITE */
.pa_temporalite {
        background: #0d0d0d;
        text-align: center;
        margin: 4% 0 0;
        display: block;
        border: 1px solid rgba(26,25,25,.5);
        padding: 5% 0;
        letter-spacing: 1px;
}

.pa_temporalite p, .pa_meteo p {
  	margin: 0;
}

.pa_temporalite p::before {
        width: 16px;
        height: 17px;
        content: "";
        float: left;
        margin: -1% 0 0 4%;
}

/* LIENS UTILES */
.liens_utiles a {
        display: block;
        border: 1px solid rgba(26,25,25,.2);
 background: url(https://i.imgur.com/xSUls9B.png); 
        padding: 1%;
        text-align: center;
        margin: 5%;
        letter-spacing: 2px;
}

/* VOTES */
.bloc_pa a img {
    	margin: 10% 2% 0;
}

/* METEO */
.pa_meteo {
        background: #500a08;
        border: 1px solid rgba(26,25,25,.5);
        padding: 4%;
}

/* TEMPS */
.pa_temps {
        background: #0d0d0d;
        width: 250px;
	height: 300px
        padding: 5px;
        border: 1px solid rgba(26,25,25,.5);
        margin: 6% 0 0;
}

/* BLOC STAFF */
/* Image */
.bloc_pa:nth-child(1n+4) img {
        max-width: 96%;
        margin: 2%;
}

/* Texte */
.pa_staff {
        background: #500a08;
        border: 1px solid rgba(65,54,54,.2);
        margin: 0 2%;
        padding: 2%;
  	text-align: right;
}

.pa_staff h2 {
        text-align: left;
        font-weight: normal;
        letter-spacing: 2px;
        margin: 1%;
        font-size: 14px;
  	float: left;
}

/* CREDITS */
.pa_credits {
        width: 98%;
        font-size: 8px;
        letter-spacing: 2px;
        margin: 10% auto 0;
}

.teameldbig {
   background-color:#0b0b0b;
	    border: 1px solid rgba(26,25,25,.5);
    font-family:Arial;
    font-size:8px;
    line-height: 15px;
    color:#aaa;
    text-align:justify;
    padding:10px;
    height:300px;
    overflow:auto;
    border-box:box-sizing;
scrollbar-width: none;
}

/* BLOC STAFF & PREDEFINIS PA */
#staffOLD {
background:#0b0b0b; /* MODIFIABLE */
}
/* CONTENUS STAFF PA */
.staffOLD p {
background:#0b0b0b; opacity: 0.7; color:lightgrey; /* MODIFIABLE */
}

/* BLOC STAFF & PREDEFINIS PA */
#staffOLD {
display:inline-block; vertical-align:top; margin-left:8px; margin-top:4px; padding-left:10px;
width:220px; height:290px; overflow:hidden;
}
.staffOLD {
display:inline-block; vertical-align:top;
width:105px; height:97px; overflow:hidden;
}
/* CONTENUS STAFF PA */
.staffOLD p {
margin:0;  margin-top:-120px; position:relative; z-index:5;
width:90px; height:97px; overflow:hidden; margin-left:-15px;
font-size:10px; text-align:center; font-family:Calibri;
transition:all 0.5s; -webkit-transition:all 0.5s;
}
.staffOLD:hover p {
margin-top:0;
}
.staffOLD img {
position:relative; z-index:3; 
width:90px; height:90px; 
}
/* DISPONIBLE PA */
.onOLD {
display:block; margin:3px 0;
}
/* INDISPONIBLE PA */
.offOLD {
display:block; margin:3px 0;
}
/* LIENS PROFILS STAFF PA */
.staffOLD a {
display:block; 
} 

/* PA */
.DOR {
margin:auto;
width:1000px;  padding:25px 0; 
line-height:16px; text-align:center; font-family:Arial;
}
.DOR a {
text-decoration:none !important; 
}
.boxDOR {
display:inline-block; vertical-align:top;
}
/* TITRE STAFF PA */
.tleDOR {
width:205px; height:25px; padding:5px 0;
text-align:center; font-family:Arial; font-size:18px; text-transform:uppercase; letter-spacing:3px;
}
.staffDOR {
margin:15px auto; width:205px; 
}
/* BLOCS STAFF PA */
.staffDOR div {
display:inline-block; vertical-align:top; 
width:100px; height:100px; overflow:hidden; border:5px solid; text-transform:uppercase; 
}
.staffDOR div:nth-of-type(2) {
margin-left:5px;
}
.staffDOR div img {
margin-top:-90px;
width:90px; height:90px; 
}
/* CONTENUS STAFF PA */
.staffDOR div p {
position:relative; z-index:3; margin:0; margin-left:-20px;
width:0; height:90px; padding-top:20px; overflow:hidden; 
font-size:12px; text-align:center; font-family:Arial;
opacity:0; transition:all 0.35s linear; -webkit-transition:all 0.35s linear;
}
.staffDOR div:hover p {
margin-left:0; width:90px; padding:20px 5px 0; opacity:1; 
}
/* LIENS PROFILS STAFF PA */
.staffDOR div p a {

}
/* DISPONIBLE PA */
.onDOR {
display:block;
}
/* INDISPONIBLE PA */
.offDOR {
display:block;
}
/* LIENS PA */
.lksDOR {
margin:10px; text-align:center;
}
.lksDOR a {
display:inline-block; margin-top:5px; 
width:85px; height:25px; padding:5px 0; 
text-transform:uppercase; font-family:Arial; font-size:12px; letter-spacing:0;
transition:all 0.55s linear; -webkit-transition:all 0.55s linear;
}
.lksDOR a:hover {
letter-spacing: 0.5em;
}
/* NOUVELLES PA */
.newsDOR {
display:inline-block; vertical-align:top; margin:0 20px;
width:200px; height:250px; border:5px solid;
}
.newsDOR img {
position:relative; z-index:3; margin-top:-250px;
width:200px; height:250px;
transition:width 0.45s linear; -webkit-transition:width 0.45s linear;
}
.newsDOR:hover img {
width:0;
}
.newsDOR div {
width:190px; height:240px; padding:5px; overflow-y:auto;
text-align:justify; font-size:11px; 
}
/* CONTEXTE PA */
.ctxtDOR {
margin-top:-15px; display:inline-block;
width:235px; height:170px; padding:5px; overflow:hidden; border:5px solid; 
text-align:justify; font-size:12px; line-height:15.5px;
}
.ctxtDOR:hover {
overflow-y:auto;
scrollbar-width: none;
}
/* TITRE PARTENAIRES PA */
.tleIIDOR {
margin-bottom:10px;
width:470px; height:25px; padding:5px 0; margin-left:-225px;
text-align:center; font-family:Arial; font-size:14px; text-transform:uppercase; 
}
/* PARTENAIRES PA */
.partDOR {
height:50px; width:470px; padding:10px 0; text-align:center; margin-left:-225px; margin-top:-10px;
}
.partDOR img {
margin:0 3px; width:65px; height:50px;
filter:grayscale(1); -webkit-filter:grayscale(1);
transition:all 0.35s linear; -webkit-transition:all 0.35s linear;
}
.partDOR img:hover {
filter:grayscale(0); -webkit-filter:grayscale(0);
}

/* PA */
.DOR {
background:#0b0b0b; /* MODIFIABLE */
}
/* TITRE STAFF PA */
.tleDOR {
background:#500a08; color:#aaa; /* MODIFIABLE */
}
/* BORDURES BLOCS STAFF PA */
.staffDOR div {
border-color:#0a0a0a !important;  /* MODIFIABLE */
}
/* CONTENUS STAFF PA */
.staffDOR div p {
background:#0d0d0d; /* MODIFIABLE */
}
/* DISPONIBLE PA */
.onDOR {
background:lightgreen; color:black; /* MODIFIABLE */
}
/* INDISPONIBLE PA */
.offDOR {
background:#bd0009; color:white; /* MODIFIABLE */
}
/* LIENS PROFILS STAFF PA */
.staffDOR div p a {
color:#0b0b0b; /* MODIFIABLE */
}
/* LIENS PA */
.lksDOR a {
    font-size: 16px;
	display: inline-block;
    border-bottom: 3px solid #500a08;
    width: 85px;
    font-family: calibri;
    text-transform: uppercase;
	letter-spacing: 0.3em;
text-align:center; /* MODIFIABLE */
}
/* BORDURE ACTUALITES PA */
.newsDOR {
border-color:#0b0b0b; !important; /* MODIFIABLE */
}
/* CONTENU ACTUALITES PA */
.newsDOR div {
background:#0d0d0d;; color:#aaa; /* MODIFIABLE */
}
/* CONTEXTE PA */
.ctxtDOR {
border-color:#0a0a0a; !important; background:#0d0d0d; color:#aaa; /* MODIFIABLE */
}
/* TITRE PARTENAIRES PA */
.tleIIDOR {
    font-size: 10px;
    border-bottom: 2px solid #500a08;
    font-family: calibri;
    text-transform: uppercase;
	letter-spacing: 0.3em;
text-align:right; /* MODIFIABLE */
}
/* PARTENAIRES PA */
.partDOR {
background:#0b0b0b; /* MODIFIABLE */
}

.headerMMOR {
margin:auto; width:1000px; height:60px;
line-height:16px; text-align:center; 
}
.headerMMOR a {
text-decoration:none !important;
}
#headertleMMOR {
margin-bottom:10px; height:45px; line-height:normal; text-align:left; 
}
.headertleMMOR {
display:inline-block; vertical-align:top; 
width:700px; padding-top:2px; padding-left:25px; overflow:hidden; 
font-size:30px; text-transform:uppercase; font-family:Arial; letter-spacing:15px; 
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.headerMMOR:hover .headertleMMOR {
width:350px; padding-top:7px; padding-left:15px; font-size:25px; letter-spacing:5px;  
}
.headerMMOR:hover .lksMMOR {
height:50px; width:610px;
}
/* BIENVENUE PA */
.headertleMMOR {
color:#500a08; background:#0d0d0d;/* MODIFIABLE */
}
.infoDOR {
display:inline-block; vertical-align:top; margin:0 60px;
width:180px; height:250px; border:5px solid;
}

/* TITRE PARTENAIRES PA */
.teamDOR {
    font-size: 10px;
    border-bottom: 2px solid #500a08;
    font-family: calibri;
    text-transform: uppercase;
	letter-spacing: 0.3em;
text-align:left; 
	margin-bottom:10px;
width:220px; height:25px; padding:5px 0; 
 font-family:Arial; text-transform:uppercase; 
} /* MODIFIABLE */

.headerteam {
	  display: inline-block;
	width: 250px;
}


###########postbit############

.perfil {
  width: 980px;
  height: 250px;
  background-color: #500a08;
  font-size: 0;
  position: relative;
  overflow: hidden;
}
.perfil-1 {
  width: 240px;
  height: 200px;
  background-color: #500a08;
	  outline: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
			margin-left: -8px;
}
.perfil-1-1 {
  width: 250px;
  border: 5px solid #000;
  position: relative;
  top: 35px;
  left: 27px;
}
.perfil-2 {
  width: 750px;
  height: 200px;
	background-color: #0b0b0b;
  display: inline-block;
  vertical-align: middle;
			margin-left: -6px;
}
.perfil-2-1 {
  width: 500px;
  height: 90px;
  font: 35px playfair display;
  color: #aaa;
  text-transform: lowercase;
  line-height: 90px;
  text-indent: 10px;
  font-style: italic;
  border-bottom: 1px solid #500a08;
}
.perfil-2-1 span {
  color: #aaa;
}
.perfil-2-1:before {
  content: '❝';
  position: absolute;
  color: #eeeeee20;
  font-size: 160px;
  margin-top: 25px;  
  margin-left: -10px;
  font-style: normal;
}
.perfil-2-2 {
  width: 330px;
  height: 110px;
  display: inline-block;
  vertical-align: middle;
}
.perfil-2-1-2 {
  width: 150px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
	line-height: 35px;
  margin-right: 5px;
  position: relative;
  left: 10px;
  top: 15px;
  border-bottom: 1px solid #bb0808;
  font: 12px calibri;
  color: #999893;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.th-agenda:before {
  width: 30px;
  height: 30px;
  display: inline-block;
  content: ' ';
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  veritcal-align: middle;
  position: relative;
  top: 4px;
  color: #e0cc9c;
}
.th-flag-4:before {
  width: 30px;
  height: 30px;
  display: inline-block;
  content: ' ';
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  veritcal-align: middle;
  position: relative;
  top: 4px;
  color: #e0cc9c;
}
.th-heart-1:before {
  width: 30px;
  height: 30px;
  display: inline-block;
  content: ' ';
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  veritcal-align: middle;
  position: relative;
  top: 4px;
  color: #e0cc9c;
}
.th-plus-1:before {
  width: 30px;
  height: 30px;
  display: inline-block;
  content: ' ';
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  veritcal-align: middle;
  position: relative;
  top: 4px;
  color: #e0cc9c;
}
.perfil-2-3 {
  width: 70px;
  height: 109px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
  font: 40px oswald;
  text-align: center;
  color: #999893;
  line-height: 90px;
}
.perfil-2-3::first-letter {
  color: #a01f1c;
}
.perfil-2-3:after {
  content: 'posts';
  font: 9px calibri;
  color: #999893;
  text-transform: uppercase;
  text-align: center;
  width: 70px;
  letter-spacing: 0.5px;
  display: block;
  margin-top: -25px;
}
.perfil-2-4 {
  width: 70px;
  height: 109px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
  font: 40px oswald;
  text-align: center;
  color: #999893;
  line-height: 90px;
}
.perfil-2-4::first-letter {
  color: #a01f1c;
}
.perfil-2-4:after {
  content: 'topics';
  font: 9px calibri;
  color: #999893;
  text-transform: uppercase;
  text-align: center;
  width: 70px;
  letter-spacing: 0.5px;
  display: block;
  margin-top: -25px;
}
.perfil-2-5 {
  width: 190px;
  height: 109px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
  overflow: hidden;
}
.perfil-2-5 texto {
  display: block;
  width: 160px;
  height: 50px;
  position: absolute;
  margin-top: 30px;
  margin-left: 5px;
  font: 10px calibri;
  color: #999893;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
  text-align: justify;
}
.perfil-2-5:before {
  content:'☆';
  font-size: 150px;
  color: black;
  transform: rotate(-15deg);
  display: block;
  position: relative;
  float: right;
  margin-top: -65px;
	margin-right: 35px;
}
.perfil-2-5 texto:before {
  content: '❝';
  position: absolute;
  color:  #ba090a;
  font-size: 50px;
  font-style: normal;
  margin-left: 170px;
}
.perfil-3 {
  width: 240px;
  height: 50px;
  background-color: #500a08;
  display: inline-block;
  vertical-align: middle;
  outline-offset: -1px;
  outline: 1px solid #000000;
		margin-left: -6px;
}
.perfil-3 edicion {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 10px;
  left: 5px;
  margin-right: 5px;
  outline: 1px solid #000;
  outline-offset: -1px;
}
.perfil-3 edicion2 {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 14px;
  left: 5px;
  margin-right: 5px;
  outline: 1px solid #000;
  outline-offset: -1px;
}
.fa-trash:before {
  color: #999893;
  font-size: 15px;
  position: relative;
  top: 8px;
  left: 2px;
}
.fa-pencil-alt:before {
  color: #999893;
  font-size: 15px;
  position: relative;
  top: 8px;
  left: 2px;
}
.fa-quote-right:before {
  color: #999893;
  font-size: 15px;
  position: relative;
  top: 8px;
  left: 2px;
}
.fa-location-arrow:before {
  color: #999893;
  font-size: 15px;
  position: relative;
  top: 8px;
  left: 2px;
}
.perfil-4 {
  width: 745px;
  height: 50px;
  background-color: #500a08;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #000;
  line-height: 50px;
	  margin-top: 3px;
		  margin-bottom: 3px;
}
.perfil-4 tiempo {
  width: 200px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 0.5px;
  color: #999893;
  text-transform: uppercase;
  font-size: 9px;
  font-family: calibri;
  text-align: center;
  line-height: 50px;
}
.perfil-4 tiempo:before {
  content: '\ebe0';
  font-family: honeybee;
  color: #e0cc9c;
  margin-right: 5px;
  font-size: 7px;
}
.perfil-4 titulo {
  width: 500px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  font: 20px oswald;
  text-transform: uppercase;
  line-height: 50px;
  color: #999893;
  z-index: 1;
  position: relative;
}
.perfil-4 titulo:before {
  height: 1px;
  width: 500px;
  background-color: #000;
  display: block;
  margin-top: 25px;
  content: ' ';
  position: absolute;
  z-index: -1;
}
.postprofile {
  width: 240px;
  min-height: 500px;
  margin-left: 740px;
		position:absolute;
}

.tinderprofile {
  width: 240px;
height: auto;
  margin-left: 740px;
	position:absolute;
}
.post-avatar {
  width: 240px;
  height: 220px;
}
.post-rango {
  width: 240px;
  height: 100px;
  background-color: #500a08;
  outline: 1px solid #000;
  outline-offset: -15px;
  font: 25px oswald;
  color: #999893;
  text-transform: uppercase;
  text-align: center;
	  line-height: 100px;
}
.post-rangopartner {
  width: 240px;
  height: 100px;
  background-color: #0f0f0f;
  color: #999893;
  text-transform: uppercase;
  text-align: center;
}
.post-rango b {
  color: black;
}
.post-contacto {
  width: 240px;
  height: 70px;
  outline: 1px solid #000;
  outline-offset: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #500a08;
}
.post-contacto contacto {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  border-radius: 100%;
  background-color: #000;
  text-align: center;
  color: #999893;
}
.fa-id-card:before {
  margin-top: 13px;
	font-size: 15px;
  display: block;

}
.fa-envelope:before {
  margin-top: 13px;
	font-size: 15px;
  display: block;

}
.fa-folder-open:before {
  margin-top: 13px;
  display: block;
	font-size: 15px;
  margin-left: 5px;
}
.post-rol {
  width: 680px;
  height: 590px;
  position: absolute;
  top: 90px;
  left: 40px;
  text-align: justify;
  font: 12px arial;
  color: black;
  line-height: 15px;
}

##########bars############
.ou-index-mainttlindxcnt {width: 950px; height: 125px; padding: 5px; background-color: #FAFAFA; border: 1px solid #CCC;}

.ou-index-maintitle {width: 950px; height: 125px; background-color: #D5A7C2; line-height: 125px; color: #FAFAFA; font-family: raleway; text-align: center; font-size: 20px; font-weight: 300; text-transform: uppercase; text-shadow: -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa, 1px 1px 0 #aaa; }

.ou-index-mainforumcnt {width: 940px; padding: 10px; margin-top: 10px; border: 1px solid #D5A7C2; background-image: url(https://i.imgur.com/kZhxOfn.png)}

.ou-index-mainfrmdatcnt {width: 940px; height: 200px; background-color: #FAFAFA; border: 1px solid #ccc; overflow: hidden;}

.ou-index-mainfrmimgcnt {float: left; width: 250px; height: 140px; border: 5px solid #FFF; border: 1px solid #DDD; border-left: none; border-top: none; padding: 5px;}

.ou-index-mainfrmimg {width: 250px; height: 140px; background-size: cover;border-radius: 5px; }

.ou-index-mainfrmtitl {float: left; border-bottom: 1px solid #DDD; width: 609px; height: 45px; line-height: 45px; font-family: raleway; font-size: 10px; text-transform: uppercase; padding-left: 35px; padding-right: 35px; background-color: #303030; text-align: right;}

.ou-index-mainfrmtitl i {color: #D5A7C2; }

.ou-index-mainfrmtitl b {color: #D5A7C2; font-family: playfair display sc; color: #303030; font-weight: 600; font-size: 16px; padding-left: 10px; padding-right: 10px; letter-spacing: 1px; color: #D5A7C2; float: left;}

.ou-index-mainfrmtitl w {font-size: 10px; font-weight: 400; font-family: raleway; color: #FAFAFA;padding-left: 5px; padding-right: 25px;}

.ou-index-mainfrmtitl x {font-size: 11px; font-weight: 800; font-family: raleway; color: #FAFAFA; padding-left: 5px; padding-right: 5px;letter-spacing: 1px;}

.ou-index-frmavtarcnt {background-color: #D5A7C2; float: right; position: relative; top: -20px; width: 80px; height: 80px; border: 1px solid #CCC; border-radius: 100%; padding: 10px; right: -30px;}

.ou-index-frmavtar {width: 80px; height: 80px; border-radius: 100%; background-size: cover;}

.ou-index-forumttlcont {width: 679px; height: 95px; border-bottom: 1px solid #ccc; float: left; position: relative; top: -93px;
}

.ou-frmindxtxt {font-family: raleway; font-size: 36px; font-weight: 200; color: #D5A7C2; line-height: 75px; text-align: center; text-transform: uppercase; text-shadow: -1px -1px 0 #FAFAFA, 1px -1px 0 #FAFAFA, -1px 1px 0 #FAFAFA, 1px 1px 0 #FAFAFA; position: relative; border-bottom: 2px solid #D5A7C2; display: inline; vertical-align: middle; padding-left: 10px; padding-right: 10px; }

#bars {
    height: 20px; 
    width: 10px;
display: inline; 
padding-left: 55px;
position: relative;  
overflow: hidden;}

.ou-index-frmrepcnt {float: left; left: 5px;width: 250px; height: 38px; background-color: #303030; position: relative; top: -88px; border-radius: 5px; line-height: 35px; font-family: raleway; font-weight: 800; color: #FAFAFA; text-align: center; font-size: 17px; display: inline; color: #D5A7C2;}

.ou-index-frmrepcnt b {font-size: 11px; font-weight: 300; font-family: raleway; color: #FAFAFA; padding-left: 5px; padding-right: 5px;letter-spacing: 1px; text-transform: uppercase}
.bar {
   background: #500a08;

    bottom: 1px;
    height: 3px;
    position: absolute;
    width: 3px;      
    animation: sound 0ms -800ms linear infinite alternate;
}

.ou-index-frmlnks {float: left; width: 632px; height: 38px; background-color: ; position: relative; top: -88px; left: 12px; line-height: 38px; padding-left: 20px; padding-right: 20px; font-size: 11px; font-weight: 800; font-family: raleway; color: #FAFAFA; padding-left: 5px; padding-right: 5px;letter-spacing: 1px; background-color: #303030; text-transform: uppercase; padding-left: 20px; padding-right: 20px; border-radius: 5px;}

.ou-index-frmlnks b {font-size: 11px; font-weight: 800; font-family: raleway; color: #FAFAFA; padding-left: 5px; padding-right: 5px;letter-spacing: 1px; }


@keyframes sound {
    0% {
       opacity: .35;
        height: 3px; 
    }
    100% {
        opacity: 1;       
        height: 14px; 
    }
}

.bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }


###############################
@font-face{font-family: "kiona"; src: url(https://dl.dropbox.com/s/9eky6ml4wqyragu/kiona-regular-webfont.woff2?dl=0) format("woff2"), url(https://dl.dropbox.com/s/o4omys8coh1345m/kiona-regular-webfont.woff?dl=0) format("woff"); font-weight: normal; font-style: normal;}.grey_pa{width: 1000px; padding: 20px; margin: 0 auto; background: #0f160d;}.grey_pa_top{padding: 10px 0px 0px 0px; width: 1000px; margin: 0px -20px 0px -20px; border-bottom: solid 2px #1bc62b; display: flex; flex-wrap: wrap; justify-content: space-evenly;}.grey_pa_name{color:#21321c; font: 50px kiona; width: 350px;}.grey_pa_icon_gr{width: 80px;}.grey_pa_icon_gr span{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 50px;}.grey_pa_adjectif{width: 250px; list-style: none; text-align: justify; font: 10px Newsreader; color: #575757;}.grey_pa_adjectif li span{color: #21321c !important;}.grey_pa_right_ic{width: 240px; margin: -20px 0px 15px 0px; border: solid 1px grey; padding: 5px;}.grey_pa_right_ic img{width: 100%;}.grey_pa_bottom{display: flex; flex-wrap: wrap; justify-content: space-evenly; width: 100%; padding-top: 20px; position: relative; z-index: 9;}.grey_pa_bottom_left{width: 200px;}.grey_pa_bottom_left:before{content: "\ec0a"; font-family: HoneyBee; color: #ccc; z-index: -1; position: absolute; font-size: 200px; margin: 150px 0px 0px 0px; opacity: 0.2;}.grey_pa_ong_staff{display: flex; flex-wrap: wrap; justify-content: space-evenly; text-align: justify; background: #0f160d; padding: 10px; border-radius: 10px; box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8); color: #575757; margin-bottom: 20px;}.grey_pa_ong_icon{width: 40px;}.grey_pa_ong_icon span{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 30px;}.grey_pa_ong_name{font: 10px Newsreader; width: 140px;}.grey_pa_ong_name span{font-weight: bold;}.grey_pa_bottom_middle{width: 150px;}.grey_pa_img{text-align: center;}.grey_pa_img img{width: 100%;}.grey_pa_bottom_right{width: 500px;}.grey_pa_bo_ri_txt{text-align: justify; font: 11px Newsreader; color: #575757; float: right;}.gray_pa_decal{margin: 0px 0px -40px 14px; width: 200px; height: 120px; float: right;}.grey_pa_ong_bottom{width: 200px; text-align: justify; background: #fbfbfb; padding: 10px; border-radius: 10px; box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8); color: #575757; display: flex; flex-wrap: wrap; justify-content: space-evenly; float: right; margin-top: -342px;}.grey_pa_txt_txt{font: 10px Newsreader; width: 140px; padding-right: 20px;}.grey_pa_txt_icon{width: 30px;}.grey_pa_txt_icon span{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 30px;}.grey_pa_cre{width: 100%; text-align: right;}.grey_pa_cre a{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 9px Newsreader;}

@import url(https://fonts.googleapis.com/css?family=Magra:400,700);

#indexContain {background-color: white; height: 197px; width: 1100px; border: 1px solid white; overflow: hidden; font-family: kiona;}

.box1out {height: 197px; width: 542px; overflow: hidden; background-color: #121212; display: inline-block; float: left;}

.box1 {height:185px; width: 530px; overflow: hidden; border: solid 1px black; display:inline-block; float: left; background-color: #0f0f0f; margin-top: 5px; margin-left: 5px;}

.title {font-family: kiona; font-size: 23px; text-transform: uppercase; color: rgba(0,60,40,0.9); margin-left: 25px; margin-top:15px; text-align: left;}
.title a {font-family: kiona; font-size: 23px; color: #aaa; text-transform: uppercase; margin-top:12px;  }
.title a:hover {font-family: kiona; font-size: 23px; color: white; text-transform: uppercase; margin-top:12px;  }

.divide {background-color: #500a08; height: 6px; width:98%; margin: auto; }

.scroll {width: 470px; height: 100px; background-color: white; margin: auto; margin-top: 5px; overflow: hidden;}

.scrollin {width:500px; height: 140px; overflow: auto; background-color: #0f0f0f; margin:5px auto; padding:5px; font-size:9px; font-family: verdana; color: #424343; text-align: justify;}

.indexStats {background-color: transparent; display:inline-block; float: left; height: 197px; width: 70px; margin-left: 3px; overflow: hidden;}

.iStatOut {width:66px; height: 96px; background-color: #121212; overflow: hidden;}

.iStat {width: 55px; height: 85px; display: block; float: left; background-color: #0f0f0f; margin-left: 5px; margin-top: 5px;overflow: hidden; border: 1px solid black;}

.iStatIn {margin-top:25px; line-height: 100%; font-size:10px; text-align:center;}



.iStatIn nn {font-size: 15px; color:#500a08;}


.box2out {height: 197px; width: 379px; overflow: hidden; background-color: #121212; display: inline-block; float: right;}

.box2 {height:185px; width: 367px; overflow: hidden; border: solid 1px black; display:inline-block; float: left; background-color: #0f0f0f; margin-top: 5px; margin-left: 5px;}

.threadTitle {margin-top:25px; font-size:12px; text-align: right;}
.threadTitle a {font-family: kiona; font-size: 14px; color: #aaa; letter-spacing:  0.3em; text-transform: uppercase; margin-top:12px;  }
.threadTitle a:hover {font-family: kiona; font-size: 14px; color: white;  letter-spacing:  0.3em; text-transform: uppercase; margin-top:12px;  }

.threadDeets {text-align: right; margin-right: 15px; margin-top: 15px; font-size: 10px;}

.markerMargin {margin:auto; margin-top: 10px; width: 365px;}

.markerYes {width: 365px; height: 90px;}

.markerNo {width: 365px; height: 90px;}

##########################################################

#navtopbar {  background-image: url(https://i.imgur.com/xSUls9B.png); position: fixed; width: 100%; top: 0px; left: 0px; padding: 20px 70px; color: #74767c; box-sizing: border-box; z-index: 99999; color: #898989; }
#navtopbar a:after { content: " "; border-bottom: 1px solid #7c0a0a; padding: 0px 20px; margin: 0px 15px; position: relative; top: -7px; }

#navtopbar a:last-child:after { border-bottom: 0px solid; padding: 0px; margin: 0px; }

#navtopbar b { color: #e00000; margin: 0px 10px; }

#navleftbar {  height: 100%; box-sizing: border-box; z-index: 9998;  background: url(https://i.imgur.com/xSUls9B.png);background-size: cover;  }

#navi { letter-spacing: 2px; background: url(https://i.imgur.com/xSUls9B.png);background-size: cover;  }

#navi a:after { content: " "; border-bottom: 1px solid #7c0a0a; padding: 0px 10px; margin: 0px 10px; font-size: 12px; position: relative; top: -7px; }

#navrightbar { position: fixed; padding: 70px 27px 70px 28px; top: 0px; right: 0px; height: 100%; box-sizing: border-box; z-index: 9999; color: #898989; }

#navuser { letter-spacing: 2px; transform: rotate(90deg); transform-origin: top right; font-size: 20px; position: absolute; width: calc(100vh); bottom: 0px; right: 20px; text-transform: uppercase; }
#navuser b { color: #7c0a0a; font-size: 20px; margin: 0px 10px; }

#navbottombar { background-color: #0f0f0f; position: fixed; width: 100%; bottom: 0px; left: 0px; padding: 20px 50px; color: #74767c; box-sizing: border-box; z-index: 9998; text-align: center; }

#navbottombar a:after { content: " "; border-bottom: 1px solid #7c0a0a;padding: 0px 20px; margin: 0px 15px; position: relative; top: -7px; }

#navbottombar a:last-child:after { border-bottom: 0px solid; padding: 0px; margin: 0px; }

#navtopbar, #navbottombar, #navrightbar, #navleftbar { color: #777; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; text-align: center; font-family: Roboto Condensed; }

################################################################

#CNER {
width:500px; margin:auto; 
}
.npPFCNER {
font-size:48px; font-family:Impact; letter-spacing:1px; color:#7c0a0a; line-height:60px;  text-align: center; 
}
.PFCNER {
width:475px; padding-top:35px; text-align:center; background: url(https://i.imgur.com/xSUls9B.png); 
background:#0d0d0d; 
}
.dispoCNER {
position:absolute; margin-left:480px; 
width:auto; height:20px; padding:5px 10px; 
font-size:12px; font-family:Arial; 
color:#aaa; 
transform:rotate(90deg); -webkit-transform:rotate(90deg); transform-origin:top left; -webkit-transform-origin:top left; 
transition:transform 0.5s linear; -webkit-transition:transform 0.5s linear;
  background-color:#7c0a0a;
}
.dispoCNER:hover {
transform:rotate(80deg); -webkit-transform:rotate(80deg);
}
.fosCNER {
display:inline-block; vertical-align:top; margin-right:12px;
width:200px; height:320px;
}
.fosCNER div{
position:absolute; margin-top:-320px;
width:190px; padding:5px; height:310px; overflow:auto; 
background:rgba(250,250,250,0.7); color:black;
font-size:12px; font-family:Arial; text-align:justify;
opacity:0; transition:opacity 0.35s ease-in-out; -webkit-transition:opacity 0.35s ease-in-out;
}
.fosCNER:hover div{
opacity:1;
}
.fosCNER img{
min-width:200px; min-height:320px;
}
.fosCNER span{
font-weight:bold; text-transform:uppercase; color:#5f272c;
}
.abtPFCNER {
display:inline-block; vertical-align:top;  width:200px; height:310px; padding:5px; 
background:#0c0c0c; color:black; font-size:12px; font-family:Arial; text-align:justify;   
}
.abtPFCNER span{
font-weight:bold; text-transform:uppercase; color:#5f272c;
}
.lksPFCNER {
display:inline-block; vertical-align:top; margin:0 6px; 
width:100px; height:75px;
}
.lksPFCNER img{
width:100px; height:75px;
}
.lksPFCNER div{
position:absolute; margin-top:-75px;
width:100px; height:75px; padding:5px; text-align:center; font-size:11px; font-family:Arial; overflow:hidden;
background:#b50b0b; color:white;
opacity:0; transition:opacity 0.35s ease-in-out; -webkit-transition:opacity 0.35s ease-in-out;
}
.lksPFCNER:hover div{
opacity:0.8;
}
.lksPFCNER a{
text-decoration:none !important;
}
.lksPFCNERb {
display:inline-block; vertical-align:top; margin:0 6px; 
width:100px; height:80px; padding-top:5px;
}
.lksPFCNERb img{
width:100px; height:75px; 
}
.lksPFCNERb div{
position:absolute; margin-top:-75px;
width:100px; height:75px; padding:5px; text-align:center; font-size:11px; font-family:Arial; overflow:hidden;
background:#b50b0b; color:white;
opacity:0; transition:opacity 0.35s ease-in-out; -webkit-transition:opacity 0.35s ease-in-out;
}
.lksPFCNERb:hover div{
opacity:0.8;
}
.lksPFCNERb a{
text-decoration:none !important;
}
.adjCNER {
width:410px; height:60px; margin:10px auto; padding:5px;  display:inline-block;
background:#0c0c0c; font-size:11px; font-family:Arial; text-align:center;
}
.adjCNER a:after { content: " "; border-bottom: 1px solid #7c0a0a; padding: 0px 20px; margin: 0px 15px; position: relative; top: -7px; }

.adjCNER a:last-child:after { border-bottom: 0px solid; padding: 0px; margin: 0px; }
.adjCNER b { color: #e00000; margin: 0px 10px; }

.btmPFCNER {
width:500px;  line-height:16px;
}
.bandPFCNER {
display:inline-block;
width:440px; height:35px; 
background:#0d0d0d; 
}
.triPFCNER {
display:inline-block; width:0; height:0; 
border-style:solid; border-width:35px 35px 0 0; border-color:transparent; border-top-color:#7c0a0a;
}
.cdtCNER {
position:absolute; margin-top:9px; 
background:black; border-top-right-radius:10px; padding:5px; font-size:10px; font-family:Arial; 
opacity:0; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;
}
.cdtCNER:hover {
opacity:1;
}
.cdtCNER a{
text-decoration:none !important; color:white !important;
}


.footmenu {
  width:200px;
  display:flex;
  box-sizing:border-box;
  padding:10px 0px 10px 0px;
}
.footmenu2 .footmenu1 {
  margin:0px 0px 5px 15px;
}
.footmenu2 .footmenu1 a .footlink {
  margin:5px 5px 10px 0px;
  width:140px;
  background: url(https://i.imgur.com/xSUls9B.png);
}
.fa-hashtag:hover{
  background:#aaa;
  transition:all 250ms ease-in-out;
}
.fa-hashtag {
  height:23px;
  background:#7c0a0a;
  padding:4px;
  margin:5px 0px;
  color:#000;
  transition:all 250ms ease-in-out;
}
.footmenu1 {
  width:180px;
  height:150px;
  margin-left:10px;
  margin-top:5px;
  display:flex;
  flex-flow:row wrap;
}
.footmenu2 {
  margin-left:10px;
  width:390px;
  height:150px;
  display:flex;
  flex-flow:row wrap;
  border-left:4px solid #7c0a0a;
}

.footlink {
 background: url(https://i.imgur.com/xSUls9B.png); 
  padding:2px;
  text-align:center;
  line-height:20px;
  transition:all 500ms ease;
  outline:1px solid rgba(0,0,0,0);
}

.footlink:hover {
  transition:all 250ms ease-in-out;
  outline:1px solid #7c0a0a;
}
a .footlink {
  transition:all 500ms ease;
 background: url(https://i.imgur.com/xSUls9B.png); 
  background:#0f0f0f;
  width:170px;
  
  text-decoration:none;
  color:#aaa;
  font-family:Work sans, sans-serif;
  text-transform:uppercase;
  font-size:12px;
}

.inplaylinks {
width:900px; height:10px; padding:5px;  display:inline-block; font-size:11px; font-family:Arial; text-align:center; text-transform: uppercase;
}
.inplaylinks a { color:#aaa;  text-decoration: none;     -webkit-transition: 0.5s;    -moz-transition: 0.5s;    -o-transition: 0.5s;    -ms-transition: 0.5s;    transition: 0.5s;
}

.inplaylinks a:hover {
 color:#ffffff; 
}
.inplaylinks a:after { content: " "; border-bottom: 1px solid #7c0a0a; padding: 0px 20px; margin: 0px 15px; position: relative; top: -7px; }
.inplaylinks a:last-child:after { border-bottom: 0px solid; padding: 0px; margin: 0px; }
.inplaylinks b { color: #e00000; margin: 0px 10px; }

.lastpostCNER {
position:absolute; margin-left:885px; margin-top:-18px; width: 34px; height: 70px; background-color: #7c0a0a; border-bottom: 12px solid #0f0f0f;} 
.lastposttext {position:absolute; margin-left:1px; margin-top:10px; font-size:12px; font-family:Arial; font-weight:bolder; 
color:#fff;}


.lastposttri {border-left: 17px solid #7c0a0a; border-right: 17px solid #7c0a0a; border-bottom: 12px solid transparent; position:absolute; margin-left:885px; margin-top:40px;}

.fichecanon{display:block;position:relative;width:500px;height:700px;background: url(https://imgur.com/Qt4OeNn.png) 0px 0px/cover;box-shadow:inset 0px 0px 5px #500a08;}
.titrecanon{display:block;position:relative;width:480px;height:80px;background: url(https://imgur.com/p8OjQPo.png) 0px 0px/cover;top:10px;}
.titre1canon {font-family: 'Pragati Narrow', sans-serif;color:white;font-size:30px;display:block;position:relative;text-transform:uppercase;top:10px;}
.sous-titre {font-family: 'Reenie Beanie', cursive;display:block;position:relative;color:white;font-size:20px;top:-20px;}
.colonne {width:140px;height:590px;display:inline-block;position:relative;background: url(https://imgur.com/Qt4OeNn.png) 0px 0px/cover;float:left;margin:10px;top:10px;box-shadow:inset 0px 0px 2px #000;}
.iconcanon{display:block;position:relative;width:100px;height:100px;margin:10px;border:10px solid #500a08;}
.infoscanon{display:block;position:relative;width:120px;height:150px;background-color:#0f0f0f;box-shadow:inset 0px 0px 2px #000;}
.infosp {font-family: 'Pragati Narrow', sans-serif;display:block;position:relative;color:white;font-size:12px;text-align:center;top:15px;line-height:250%;}
.infosirl {display:block;position:relative;background-color:#0f0f0f;width:120px;height:275px;top:10px;box-shadow:inset 0px 0px 2px #000;}
.gifcanon {width:320px;display:block;position:relative;right:5px;}
.citation {display:block;position:relative;width:320px;height:20px;background: url(https://imgur.com/p8OjQPo.png) 0px 0px/cover;float:right;right:15px;top:5px}
.quotecanon {font-family: 'Pragati Narrow', cursive;color:white;font-size:15px;display:block;position:relative;text-align:center;text-transform: uppercase;}
.histoire{display:block;position:relative;width:320px;height:220px;background-color:#0d0d0d;float:right;right:15px;top:10px;}
.p_icons {display:inline-block;position:relative;width:320px;top:10px;right:10px;}
.p_icon {width:60px;border:5px solid #500a08;margin:10px;}
.sailor_icons {display:inline-block;position:relative;width:460px;top:10px;right:10px;}
.sailor_icon {width:100px;border:5px solid #b8c6c5;margin:10px; opacity: 0.7;}
.turtle_icon {width:90px;border:5px solid #b8c6c5;margin:10px; opacity: 0.7;filter: grayscale(100%) sepia(100%) brightness(72%) hue-rotate(73deg) saturate(168%);
-webkit-filter: grayscale(100%) sepia(100%) brightness(72%) hue-rotate(73deg) saturate(168%);
-moz-filter: grayscale(100%) sepia(100%) brightness(72%) hue-rotate(73deg) saturate(168%);}
.sailor_gif {width:100px;border:5px solid #b8c6c5;margin:10px; filter: grayscale(100%) sepia(78%) brightness(67%) hue-rotate(168deg) saturate(225%) contrast(99%);
-webkit-filter: grayscale(100%) sepia(78%) brightness(67%) hue-rotate(168deg) saturate(225%) contrast(99%);
-moz-filter: grayscale(100%) sepia(78%) brightness(67%) hue-rotate(168deg) saturate(225%) contrast(99%);}
.cara{display:block;position:relative;width:320px;height:60px;background-color:#0d0d0d;float:right;right:15px;top:10px;}
.anec {display:block;position:relative;width:310px;height:60px;font-family: 'Gudea', sans-serif;text-align:justify;padding:5px;overflow:auto;font-size:12px;scrollbar-width: none;}
.histoire2{display:block;position:relative;width:320px;height:290px;background-color:#0d0d0d;float:right;right:15px;top:10px;}

.pm-4 {
  width: 990px;
  height: 50px;
  background-color: #500a08;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #000;
  line-height: 50px;
	  margin-top: 3px;
		  margin-bottom: 3px;
}
.pm-4 titulo {
  width: 500px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  font: 20px oswald;
  text-transform: uppercase;
  line-height: 50px;
  color: #9c9366;
  z-index: 1;
  position: relative;
	margin-left: 30px;
}

.pm-4 read {
margin-top: -40px;
  display: inline-block;
  vertical-align: middle;
  font: 16px oswald;
  text-transform: uppercase;
  color: #9c9366;
  z-index: 1;
  position: relative;
	margin-left: 600px;
}

.linktrackerprofil {
  font: 10px calibri;
  color: #9c9366;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
  text-align: justify; }

 :root { --canon-color: #000; } /*

*/ #canon-box { box-sizing: border-box; margin: auto; width: 500px; padding: 1px 10px; background: var(--canon-color); background-image: url(https://sympathyforthedevil.de/images17/background.png);} /*

*/ .canon-inh-box { box-sizing: border-box; border: 4px solid #740202; margin: 10px 0px; padding: 10px; background: #000; } /*

*/ .canon-inh-box hr { margin-top: 0px; height: 1px; border: none; background: #775b4b; } /*

*/ .canon-inh-headline { text-align: right; color: var(--canon-color); font-family: 'IBM Plex Serif', serif; font-size: 25px; font-style: italic; text-transform: lowercase; } /*

*/ .canon-inh-box:nth-of-type(even) .canon-inh-headline { text-align: left;} /*

*/ .canon-epilog{ box-sizing: border-box; border: 1px solid #740202; margin: auto; padding: 10px; background: #000000; text-align: justify; color: #6d6c6c; font-family: 'calibri', sans-serif; font-size: 12px; letter-spacing: 0.5px; line-height: 1.3em; } /*

*/ .canon-inh-table { width: 100%; } /*

*/ .canon-inh-table img { display: inline-block; border: 1px solid #740202; width: 190px; height: 130px; padding: 5px; background: #000000; } /*

*/ .canon-inh-table div { width: 240px; height: 130px; overflow: auto; padding: 3px 0px 2px; background: #000000; text-align: justify; color: #6d6c6c; font-family: 'calibri', sans-serif; font-size: 12px; letter-spacing: 0.5px; line-height: 1.2em; scrollbar-width: none; } /*

*/ .canon-inh-table div::-webkit-scrollbar { width: 2px; background: #000000; } .canon-content-table div::-webkit-scrollbar-thumb { background: var(--canon-color); } /*

*/ .canon-inh-table ul { list-style: none; margin-left: -40px; margin-top: 0px; margin-bottom: 0px;} /*

*/ .canon-inh-table ul li { display: block; box-sizing: border-box; margin: 1px auto; border: 1px solid #775b4b; width: 150px; padding: 4px; background: #000000; text-align: center; color: #775b4b; font-family: 'calibri', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;} .canon-inh-table ul li:first-of-type { background: var(--canon-color); color: #775b4b; }

############################

@font-face {font-family: Pixel; src: url(https://darkest-hour.de/uploads/pixelmix.ttf); }

@font-face {font-family: Pixel2; src: url(https://darkest-hour.de/uploads/pixelmix_bold.ttf); }

@font-face {font-family: Asphaltic; src: url(https://darkest-hour.de/uploads/ASPHALTIC_SCRATCH_ROUNDED_PERSONAL_USE.ttf); }

@font-face {font-family: Quicksand; src: url(https://darkest-hour.de/uploads/Quicksand_Light.otf); }

@font-face {font-family: Quicksand2; src: url(https://darkest-hour.de/uploads/Quicksand_Dash.otf); }

.jawpreach-container {
  position: relative;
  width: 958px;
  height: 200px;
  background-color: #1B1B1B;
  border-bottom: solid 20px #40504e;
  border-left: solid 5px #40504e;
  border-right: solid 5px #40504e;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.jawpreach-bg1 {
  position: absolute;
  width: 958px;
  height: 200px;
  background-image: url(https://i.imgur.com/6lhuANt.png);
  background-repeat: no-repeat;
}

.jawpreach-bg {
  position: absolute;
  width: 958px;
  height: 200px;
  background-image: url(https://i.imgur.com/9YT071J.png);
  background-repeat: no-repeat;
  opacity: 0.5;
}

.jawpreach-left {
  position: absolute;
  bottom: -10px;
  left: 10px;
  background-color: transparent;
  width: 568px;
  height: 120px;
}

.jawpreach-title {
  position: absolute;
  top: -5px;
  left: 10px;
  background-color: transparent;
  width: 400px;
  height: 50px;
  font-family: Quicksand;
  font-size: 30px;
  color: #678380;
  text-transform: uppercase;
  letter-spacing: 0px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 2px #000;
}

.jawpreach-bottom-box {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translate(-50% , -50%);
  background-color: transparent;
  width: 400px;
  height: 25px;
  z-index: 1;
}

.jawpreach-thread {
  margin-top: 10px;
  background-color: #620308;
  width: 180px;
  padding: 7px;
  font: 800 7px/180% 'Arial';
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	position:relative;
}

.jawpreach-thread a{
font: 800 7px/180% 'Arial';
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	position:relative;
		opacity: 2;
}

.jawpreach-thread a:hover{
	background-color: #000;
font: 800 7px/180% 'Arial';
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	position:relative;
}

.jawpreach-header {
 margin-top: -15px;
  background-color: #620308;  background: url(https://i.imgur.com/xSUls9B.png); 
  width: 150px;
  font: 800 7px/180% 'Arial';
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 1px;
  overflow: hidden;

  display: inline-block;
	position:relative;
}

.jawpreach-header a{
font: 800 7px/180% 'Arial';
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 1px;
  overflow: hidden;
margin-top: 2px;
  display: inline-block;
	position:relative;
		opacity: 2;
}

.jawpreach-header a:hover{
	background-color: #000;
font: 800 7px/180% 'Arial';
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 1px;
  overflow: hidden;
margin-top: 2px;
  display: inline-block;
	position:relative;
}

.jawpreach-author {
margin-top: 5px;
  background-color: #620308;
  max-width: 140px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
	position: relative;
}

.jawpreach-author a{
	  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
	position: relative;
}

.jawpreach-author a:hover{
	background-color: #000;
	  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
	position: relative;
}

.jawpreach-author2 {
float:right;
margin-top: 5px;
  background-color: #500a08;
  max-width: 140px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.jawpreach-author2 a{
	  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.jawpreach-author2 a:hover{
	background-color: #000;
	  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.jawpreach-date {
  margin-top: 5px;
  background-color: transparent;
  max-width: 150px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
	position:relative;
}

.jawpreach-recent {
  background-color: transparent;
  max-width: 150px;
  padding: 2px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
	position:relative;
}

.jawpreach-desc {
  position: absolute;
  top: 30px;
  left: 10px;
  background-color: #000;
  width: 400px;
  height: 30px;
  padding: 7px 20px 10px 20px;
  overflow: auto;
  color: #FFF;
  font-family: calibri;
	 text-transform: uppercase;
  font-size: 10px;
  text-align: justify;
  line-height: 11px;
}

.jawpreach-right {
  position: absolute;
  top: 30px;
  right: 10px;
  background-color: transparent;
  width: 400px;
  height: 150px;
}

.jawpreach-right-box {
  position: absolute;
  top: 35px;
  right: 15px;
  background-color: #1D1D1B;
  width: 200px;
  height: 70px;
  padding: 0px 10px 15px 10px;
  opacity: 0.8;
}

.jawpreach-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 150px;
  border-right: solid 5px #293834;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  opacity: 0.8;
}

#######################

@font-face {font-family: Conthrax; src: url(https://darkest-hour.de/uploads/conthrax_sb.ttf); }

.notebookroot-bg {
  position: relative;
  background-color: #500a08;  background: url(https://i.imgur.com/xSUls9B.png); background-size: cover;
  width: 913px;
  height: 108px;

  margin-left: 1px;
}

.notebookroot-main {
  position: absolute;
  top: 5px;
  left: 15px;
	  opacity: 0.7;
background-color: #0b0b0b;
  width: 890px;
  height: 100px;

}

.notebookroot-title {
  position: absolute;
  top: 10px;
  left: 80px;
  width: 420px;
  height: 33px;
  font-family: conthrax;
  font-size: 22px;
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: left;
  background-image: linear-gradient(45deg, #a7a3a3, #cb1515);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
 }


.notebookroot-title:before {
    background-color: #fff;
    width: 10%;
    height: 1px;
    content: "";
    vertical-align: middle;
    display: inline-block;
    margin-top: -5px;
    margin-right: 10px;
}

.notebookroot-title:after {
    background-color: #fff;
    width: 10%;
    height: 1px;
    content: "";
    vertical-align: middle;
    display: inline-block;
    margin-top: -5px;
    margin-left: 10px;
}

.notebookroot-box1 {
  position: absolute;
  left: 20px;
  top: 0px;
	opacity: 1;
  background-color: transparent;
  width: 260px;
  height: 100px;
}

.notebookroot-box2 {
  position: absolute;
  left: 262px;
  top: 10px;
  background-color: transparent;
  width: 315px;
  height: 100px;
}

.notebookroot-box3 {
  position: absolute;
  right: -40px;
  top: 10px;
  background-color: transparent;
  width: 350px;
  height: 100px;
}

.notebookroot-desc {
  position: absolute;
  top: 40px;
  left: 130px;
  width: 265px;
  max-height: 50px;
  text-transform: uppercase;
  font: 800 7px/170% 'Arial';
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: justify;
  letter-spacing: 1px;
 }

.notebookroot-subforumbox {
  position: absolute;
  bottom: -23px;
  left: 20px;
  background-color: transparent;
  width: 390px;
  height: 25px;
}

.notebookroot-subforum {
  background-color: #8c4520;
  display: inline-block;
  width: auto;
  max-height: 50px;
  text-transform: uppercase;
  font: 800 7px/180% 'Arial';
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: justify;
  letter-spacing: 1px;
  border: solid 1px #191919;
 }

.notebookroot-subforum:before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background-color: #81461f;
  height: 20px;
  padding: 5px 2px 2px 2px;
  transform: skew(-30deg);
  transform-origin:top;
  margin: -$border; /* !importanté */
  border-radius: inherit; /* !importanté */
  background: linear-gradient(to right, #4f2416, #9B6039);
  margin-top: -3px;
}

.notebookroot-subforum:hover {
  background-color: #3c1e0e;
  color: #FFF;
  background: linear-gradient(to top, #4f2416 30%, #81461f 50%,);
  border: solid 1px #191919;
}

.notebookroot-subforum a:link,.notebookroot-subforum a:visited, .notebookroot-subforum a:active { text-decoration:none; color: #FFF;   background: linear-gradient(to right, #4f2416, #9B6039);
}

.notebookroot-imgbox {
  position: absolute;
  left: 100px;
  top: 5px;
	opacity: 1;
  background-color: transparent;
  width: 200px;
  height: 90px;
}

.notebookroot-imgbox:before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  width: 200px;
  height: 90px;
  background-color: #81461f;
  transform: skew(-30deg);
  transform-origin:top;
  margin: -$border; /* !importanté */
  border-radius: inherit; /* !importanté */
  background: #500a08;
}

.notebookroot-descimg {
  position: relative;
  top: -5px;
  left: -157px;
	opacity:1;
}

.notebookroot-descimg2 {
  position: absolute;
  top: -20px;
  left: -230px;
  border: solid 5px white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  /* border: 30px solid #2c2935; */
  border: 3px solid rgba(255, 255, 255, .07);
  box-shadow: 0 0 30px 0.5px rgba(0, 0, 0, 1);
}

.notebookroot-posterimgbox {
  position: absolute;
  right: 170px;
  bottom: 50px;
  background-color: transparent;
  width: 100px;
  height: 50px;
}

.notebookroot-posterimgbox:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 50px;
  background-color: #81461f;
  transform: skew(30deg);
  transform-origin:top;
}

.notebookroot-posterimgbox:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -$border; /* !importanté */
    border-radius: inherit; /* !importanté */
    background: linear-gradient(to right, #4f2416, #9B6039);
}

.notebookroot-posterimg {
  position: absolute;
  top: -5px;
  left: 30px;
  width: 50px;
  height: 50px;
  border: solid 5px white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  /* border: 30px solid #2c2935; */
  border: 3px solid rgba(255, 255, 255, .07);
  box-shadow: 0 0 30px 0.5px rgba(0, 0, 0, 1);
}

.notebookroot-thread {
  position: absolute;
  top: 50px;
  left: 90px;
  width: 160px;
  height: 33px;
  font-family: conthrax;
  font-size: 10px;
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: left;
  background-image: linear-gradient(45deg, #f3ec78, #af4261);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

.notebookroot-thread:before {
    background-color: #fff;
    width: 5%;
    height: 1px;
    content: "";
    vertical-align: middle;
    display: inline-block;
    margin-top: 0px;
    margin-right: 5px;
}

.notebookroot-thread:after {
    background-color: #fff;
    width: 5%;
    height: 1px;
    content: "";
    vertical-align: middle;
    display: inline-block;
    margin-top: 0px;
    margin-left: 5px;
}

.notebookroot-author {
  position: absolute;
  top: 62px;
  left: 108px;
  max-height: 50px;
  text-transform: uppercase;
  font: 800 7px/170% 'Arial';
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: right;
  letter-spacing: 1px;
}

.notebookroot-author1 {
  position: absolute;
  top: 63px;
  left: 127px;
  width: 190px;
  max-height: 50px;
  text-transform: uppercase;
  font: 800 7px/170% 'conthrax';
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: left;
  letter-spacing: 1px;
}

.notebookroot-date {
  position: absolute;
  top: 72px;
  left: 107px;
  width: 210px;
  max-height: 50px;
  text-transform: uppercase;
  font: 800 6px/170% 'Arial';
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: left;
  letter-spacing: 1px;
}

###############################

@font-face {font-family: Pixel; src: url(https://darkest-hour.de/uploads/pixelmix.ttf); }

@font-face {font-family: Pixel2; src: url(https://darkest-hour.de/uploads/pixelmix_bold.ttf); }

@font-face {font-family: Asphaltic; src: url(https://darkest-hour.de/uploads/ASPHALTIC_SCRATCH_ROUNDED_PERSONAL_USE.ttf); }

@font-face {font-family: Quicksand; src: url(https://darkest-hour.de/uploads/Quicksand_Light.otf); }

@font-face {font-family: Quicksand2; src: url(https://darkest-hour.de/uploads/Quicksand_Dash.otf); }

.speedkill-container {
  position: relative;
  width: 958px;
  height: 250px;
  background-color: #232323;
  border-bottom: solid 20px #2F4850;
  border-left: solid 10px #2F4850;
  border-right: solid 10px #2F4850;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.speedkill-left-box {
  position: absolute;
  top: 10px;
  left: 245px;
  background-color: transparent;
  width: 245px;
  height: 170px;
  z-index: 1;
}

.speedkill-right-box {
  position: absolute;
  bottom: 15px;
  right: 228px;
  background-color: transparent;
  width: 235px;
  height: 164px;
  z-index: 1;
}

.speedkill-bg-triangle {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 255px;
  height: 250px;
  background: url(https://files.jcink.net/uploads2/afterthestorm/skin/maintitle_sm_1.png);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  z-index: 1;
}

.speedkill-bg-triangle2 {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 250px;
  height: 250px;
  background: url(https://files.jcink.net/uploads2/afterthestorm/skin/maintitle_sm_1.png);
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  z-index: 1;
}

.speedkill-title {
  position: absolute;
  top: 10px;
  left: 2px;
  background-color: transparent;
  width: 255px;
  height: 40px;
  font-family: Quicksand;
  font-size: 25px;
  color: #678380;
  text-transform: uppercase;
  letter-spacing: 0px;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
}

.speedkill-onlinenow-box {
  position: absolute;
  top: 42px;
  left: 15px;
  background-color: #1D1D1B;
  width: 190px;
  height: 63px;
  padding: 55px 20px 10px 20px;
  overflow: auto;
  color: #FFF;
  font-family: quicksand;
  font-size: 10px;
  text-align: justify;
  line-height: 11px;
}

.speedkill-onlinenow-legend {
  position: absolute;
  background-color: #293834;
  top: 10px;
  left: 10px;
  width: 200px;
  max-height: 20px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  text-shadow: 2px 2px 2px #000;
}

.speedkill-onlinetoday-box {
  position: absolute;
  top: 32px;
  left: 0px;
  background-color: #1D1D1B;
  width: 165px;
  height: 54px;
  padding: 10px 20px 10px 20px;
  overflow: auto;
  color: #FFF;
  font-family: quicksand;
  font-size: 10px;
  text-align: justify;
  line-height: 11px;
}

.speedkill-onlinetoday-legend {
  position: absolute;
  bottom: 34px;
  background-color: #293834;
  width: 192px;
  max-height: 50px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
}

.speedkill-title2 {
  position: absolute;
  bottom: -4px;
  left: 3px;
  background-color: transparent;
  width: 220px;
  height: 30px;
  font-family: Quicksand;
  font-size: 25px;
  color: #678380;
  text-transform: uppercase;
  letter-spacing: 0px;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
}

.speedkill-field {
  margin-top: 5px;
  background-color: #293834;
  max-width: 140px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.speedkill-field2 {
  margin-top: 23px;
  background-color: transparent;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.speedkill-bottom-left {
  position: absolute;
  bottom: 5px;
  left: 230px;
  background-color: transparent;
  width: 252px;
  height: 60px;
}

.speedkill-online {
  margin-top: 5px;
  background-color: #293834;
  max-width: 140px;
  padding: 10px 13px 10px 13px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.speedkill-online2 {
  margin-top: -4px;
  margin-left: 28px;
  background-color: transparent;
  max-width: 250px;
  min-width: 100px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.speedkill-member-box {
  position: absolute;
  top: 50px;
  right: 258px;
  background-color: transparent;
  width: 205px;
  height: 43px;
}

.speedkill-newestmember {
  position: absolute;
  top: 23px;
  right: 0px;
  background-color: #293834;
  max-width: 198px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.speedkill-top-right {
  position: absolute;
  top: 25px;
  right: 235px;
  background-color: transparent;
  width: 222px;
  height: 35px;
}

.speedkill-active {
  margin-top: 0px;
  background-color: #293834;
  min-width: 20px;
  height: 6px;
  padding: 15px 14px 15px 13px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

##############################

@font-face {font-family: Pixel; src: url(https://darkest-hour.de/uploads/pixelmix.ttf); }

@font-face {font-family: Quicksand; src: url(https://darkest-hour.de/uploads/Quicksand_Light.otf); }

@font-face {font-family: Quicksand2; src: url(https://darkest-hour.de/uploads/Quicksand_Dash.otf); }

.birddrink-container {
  position: relative; 
  background-color: #0f0f0f;
  width: 943px;
  height: 100px;
  background-image: url(https://files.jcink.net/uploads2/afterthestorm/desc/desc3.png);
  opacity: 0.9;
}

.birddrink-triangle-right {
  position: absolute;
  top: 0px;
  right: 20px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid #1D1D1B;
  border-bottom: 50px solid transparent;
}

.birddrink-triangle-left {
  position: absolute;
  top: 0px;
  left: 20px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #1D1D1B;
  border-bottom: 50px solid transparent;
}

.birddrink-middle {
  position: absolute;
  top: 0px;
  left: 120px;
  background-color: #1D1D1B;
  width: 705px;
  height: 100px;
  opacity: 0.7;
}

#birddrink-diamond {
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-bottom-color: #2F4850;
  position: relative;
  top: -30px;
    }

    #birddrink-diamond:after {
      content: '';
      position: absolute;
      left: -40px;
      top: 40px;
      width: 0;
      height: 0;
      border: 40px solid transparent;
      border-top-color: #2F4850;
    }

#birddrink-diamond {
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-bottom-color: #2F4850;
  position: relative;
  top: -30px;
    }

    #birddrink-diamond:after {
      content: '';
      position: absolute;
      left: -40px;
      top: 40px;
      width: 0;
      height: 0;
      border: 40px solid transparent;
      border-top-color: #2F4850;
    }

#birddrink-diamond2 {
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-bottom-color: #2F4850;
  position: relative;
  top: -30px;
    }

    #birddrink-diamond2:after {
      content: '';
      position: absolute;
      left: -40px;
      top: 40px;
      width: 0;
      height: 0;
      border: 40px solid transparent;
      border-top-color: #2F4850;
    }

.birddrink-diamond-box {
  position: absolute;
  top: 0px;
  right: 75px;
  background-color: transparent;
  width: 90px;
  height: 100px;
}

.birddrink-icon {
  position: absolute;
  top: 27px;
  color: #FFF;
  font-size: 30px;
  right: -22px;
  z-index: 1;
  font-family: Toolshed;
  transform: rotate(65deg);
}

.birddrink-box {
  position: absolute;
  top: 5px;
  left: 50px;
  background-color: transparent;
  width: 85px;
  height: 90px;
}

.birddrink-topics {
  background-color: #293834;
  width: 60px;
  padding: 10px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-shadow: 2px 2px 2px #000;
  margin-top: 3px;
  margin-left: 2px;
}

.birddrink-title-box {
  position: absolute;
  top: 15px;
  left: 140px;
  background-color: #293834;
  width: 210px;
  height: 19px;
  padding: 5px 10px 5px 10px;
}

.birddrink-title-box2 {
  position: absolute;
  top: 48px;
  left: 140px;
  background-color: transparent;
  width: 230px;
  height: 40px;
}

.birddrink-title-box3 {
  position: absolute;
  top: 14px;
  left: 380px;
  background-color: transparent;
  width: 280px;
  height: 75px;
}

.birddrink-title {
  font-family: Quicksand;
  color: #F8F8FF;
  font-size: 11px;
  text-shadow: 2px 2px 2px #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.birddrink-author {
  margin-top: 5px;
  background-color: #293834;
  max-width: 140px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-desc {
  margin-top: 5px;
  background-color: #293834;
  width: 255px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-date {
  margin-top: 5px;
  margin-left: 0px;
  background-color: transparent;
  max-width: 150px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-square {
  position: absolute;
  bottom: 40px;
  right: -60px;
  background-color: transparent;
  width: 20px;
  height: 20px;
}

####################################

@font-face {font-family: Roswell; src: url(https://darkest-hour.de/uploads/Roswell_TTF.ttf); }
@font-face {font-family: Pixel; src: url(https://darkest-hour.de/uploads/pixelmix.ttf); }
@font-face {font-family: EuroStyle; src: url(https://darkest-hour.de/uploads/EuroStyle_Normal.ttf); }
@font-face {font-family: Eurostile; src: url(https://darkest-hour.de/uploads/Eurostile_Extended__2_Regular.otf); }


.birddrink-container {
  position: relative; 
  background-color: rgb(38,34,31);
  width: 943px;
  height: 100px;
}

.birddrink-middle {
  position: absolute;
  top: 0px;
  left: 20px;
  background-color: rgb(38,34,31);
  width: 900px;
  height: 100px;
}

.birddrink-icon-box {
  position: absolute;
  top: 10px;
  left: 0px;
  background-image: linear-gradient(to right top, #26221f, #2e2927, #36312f, #3e3937, #464140);
  width: 40px;
  height: 40px;
  border-radius: 20%;
  padding: 20px;
}

.birddrink-icon-box2 {
  position: absolute;
  top: 10px;
  right: 20px;
  background-image: linear-gradient(to right top, #26221f, #2e2927, #36312f, #3e3937, #464140);
  width: 40px;
  height: 40px;
  border-radius: 20%;
  padding: 20px;
}

.birddrink-icon {
  color: #FFF;
  font-family: Pixel;
  font-size: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 2px #000;
  text-align: center;
  line-height: 11px;
  margin-top: -3px;
  margin-left: -7px;
}

.birddrink-icon2 {
  color: #FFF;
  font-family: Pixel;
  font-size: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 2px #000;
  text-align: center;
  line-height: 11px;
  margin-top: 10px;
}

.birddrink-box {
  position: absolute;
  top: 5px;
  left: 90px;
  background-color: transparent;
  width: 85px;
  height: 90px;
}

.birddrink-topics {
  background-image: linear-gradient(to right top, #26221f, #2e2927, #36312f, #3e3937, #464140);
  width: 60px;
  padding: 10px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 3px;
  margin-left: 2px;
}

.birddrink-title-box {
  position: absolute;
  top: 12px;
  left: 190px;
  background-image: linear-gradient(to right top, #26221f, #2e2927, #36312f, #3e3937, #464140);
  width: 210px;
  height: 25px;
  padding: 5px 10px 5px 10px;
}

.birddrink-title-box2 {
  position: absolute;
  top: 48px;
  left: 190px;
  background-color: transparent;
  width: 230px;
  height: 40px;
}

.birddrink-title-box3 {
  position: absolute;
  top: 14px;
  left: 440px;
  background-color: transparent;
  width: 280px;
  height: 75px;
}

.birddrink-title {
  font-family: Roswell;
  color: #F8F8FF;
  font-size: 10px;
  text-shadow: 2px 2px 2px #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.birddrink-author {
  margin-top: 5px;
  background-image: linear-gradient(to right top, #26221f, #2e2927, #36312f, #3e3937, #464140);
  max-width: 142px;
  padding: 7px;
  font-family: Eurostile;
  text-shadow: 2px 2px 2px #000;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-author2 {
  margin-top: 5px;
  background-image: linear-gradient(to right top, #26221f, #2e2927, #36312f, #3e3937, #464140);
  max-width: 164px;
  padding: 7px;
  font-family: Eurostile;
  text-shadow: 2px 2px 2px #000;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-desc {
  margin-top: 5px;
  background-image: linear-gradient(to right top, #26221f, #2e2927, #36312f, #3e3937, #464140);
  width: 255px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-started {
  margin-top: 5px;
  margin-left: 0px;
  background-color: transparent;
  width: 65px;
  padding: 7px;
  font-family: Eurostile;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-date {
  margin-top: 5px;
  margin-left: 0px;
  background-color: transparent;
  max-width: 215px;
  padding: 7px;
  font-family: Eurostile;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-date2 {
  margin-top: 5px;
  margin-left: -3px;
  background-color: transparent;
  max-width: 150px;
  padding: 7px;
  font-family: Eurostile;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.birddrink-square {
  position: absolute;
  bottom: 40px;
  right: -60px;
  background-color: transparent;
  width: 20px;
  height: 20px;
}

.birddrink-img {
  position: absolute;
  top: 15px;
  right: 95px;
  width: 70px;
  height: 65px;
  border: solid 3px #adabaa;
  outline: solid 5px #464140;
  border-radius: 30%;
}

###############################################

@font-face {font-family: Pixel; src: url(https://darkest-hour.de/uploads/pixelmix.ttf); }

@font-face {font-family: Pixel2; src: url(https://darkest-hour.de/uploads/pixelmix_bold.ttf); }

@font-face {
font-family: 'Fearless';
src: url(https://darkest-hour.de/uploads/Fearless_Coyne_Shadow.ttf) format('truetype'); }

@font-face {
font-family: 'Crimes Times Six';
src: url(https://darkest-hour.de/uploads/Crimes_Times_Six.ttf) format('truetype'); }

@font-face {
font-family: 'Brutal';
src: url(https://darkest-hour.de/uploads/BRUTTALL_.ttf) format('truetype'); }

@font-face {
font-family: 'Frankentype';
src: url(https://darkest-hour.de/uploads/Frankentype_Personal_Use_Only.otf) format('truetype'); }


.switchrefuse-container {
  position: relative;
  width: 960px;
  height: 370px;
  background-color: #0c0d0d;
  display: inline-block;
  background-image: url(https://files.jcink.net/uploads2/from/skin/bg_4.png);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.switchrefuse-img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 292px;
  height: 310px;
  border-bottom-top-radius: 300px;
  border-bottom-left-radius: 100px;
  border-top-left-radius: 200px;
  border-bottom-right-radius: 100px;
  border: solid 2px #242424;
}

.switchrefuse-main1 {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 315px;
  height: 330px;
  background: rgb(46,45,43);
  background: rgba(46,45,43,0.3);
  border-bottom-top-radius: 300px;
  border-bottom-left-radius: 100px;
  border-top-left-radius: 200px;
  border-bottom-right-radius: 100px;
}

.switchrefuse-img2 {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 250px;
  height: 311px;
  border-bottom-top-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border: solid 2px #242424;
}

.switchrefuse-main2 {
  position: absolute;
  top: 20px;
  left: 345px;
  width: 270px;
  height: 330px;
  background: rgb(46,45,43);
  background: rgba(46,45,43,0.3);
  border-bottom-top-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
}

.switchrefuse-img3 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 292px;
  height: 310px;
  border-bottom-top-radius: 300px;
  border-bottom-left-radius: 100px;
  border-top-right-radius: 200px;
  border-bottom-right-radius: 100px;
  border: solid 2px #242424;
}

.switchrefuse-main3 {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 315px;
  height: 330px;
  background: rgb(46,45,43);
  background: rgba(46,45,43,0.3);
  border-bottom-top-radius: 300px;
  border-bottom-left-radius: 100px;
  border-top-right-radius: 200px;
  border-bottom-right-radius: 100px;
}

.switchrefuse-title {
  position: absolute;
  top: 60px;
  left: 70px;
  width: 220px;
  height: 40px;
  padding: 2px 2px 5px 2px;
  text-align: left;
  font-family: Poiret One;
  text-transform: lowercase;
  font-size: 35px;
  letter-spacing: 1px;
  color: #FFF;
  text-shadow: 2px 2px 2px #000;
  text-align: center;
  vertical-align: middle;
  border-bottom: solid 1px #42454f;
}

.switchrefuse-title a:link, .switchrefuse a:visited, .switchrefuse a:active { text-decoration:none; color: #FFF; }

.switchrefuse a:hover {
  color: #9b9fab;
}

.switchrefuse-desc {
  position: absolute;
  top: 110px;
  left: 35px;
  width: 230px;
  height: 110px;
  overflow: auto;
  background-color: transparent;
  padding: 10px 15px 7px 15px;
  text-align: justify;
  word-spacing: 1px;
  font-family: Comfortaa;
  text-transform: lowercase;
  font-size: 10px;
  color: #FFF;
  text-shadow: 2px 2px 2px #000;
  border-radius: 10%;
  line-height: 18px;
}

.switchrefuse-buttonbox {
  position: absolute;
  bottom: 30px;
  left: 40px;
  background-color: transparent;
  width: 235px;
  height: 70px;
}

.switchrefuse-button {
  background: rgb(28,28,28);
  background: rgba(28,28,28,0.8);
  max-width: 80px;
  height: 10px;
  padding: 7px 7px 4px 7px;
  margin-top: 2px;
  border-bottom: solid 1px #42454f;
  text-shadow: 2px 2px 2px #000;
  font-family: Pixel;
  text-transform: uppercase;
  color: #FFF;
  letter-spacing: 0.8px;
  text-align: justify;
  line-height: 6px;
  font-size: 6px;
  border-radius: 30%;
  display: inline-block;
}

##########################################

@import url(https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Fira+Mono:wght@400;500;700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css);

:root {
	--mae: #5a7b81;
}

#mab-trnk {
	width: 900px;
	height: 480px;
	background: url(https://wisynco.com/wp-content/uploads/2015/01/Parallax-Background-Dark-02.jpg);
	margin: 0 auto;
	box-sizing: border-box;
	border: 15px solid #141414;
	outline: 1px solid #222;
	outline-offset: -15px;
	position:relative;
	overflow:hidden;
}

.mab-nq{background:rgb(4,4,4,.2);height:80px;border-bottom:2px solid #141414;position:relative;overflow:hidden}
#mab-trnk:hover .mab-name{transition:ease-in-out .5s;margin-top:0px;font-size:30px;line-height:2}
.mab-name{width:870px;height:50px;background:;font-family:abril fatface;font-size:45px;line-height:1;text-align-last:center;text-transform:uppercase;box-sizing:border-box;padding:0px 45px;color:#48665e;margin-top:18px;transition:ease-in-out .5s;line-height:1}
.mab-name b{font-weight:normal;color:transparent;-webkit-text-stroke:1px #999}
#mab-trnk:hover .mab-quote{transition:ease-in-out .5s;margin-top:-5px;}
.mab-quote{color:#F8F8FF;text-transform:uppercase;font-family:fira mono;text-align:center;font-size:10px;line-height:1;padding:5px 20px;letter-spacing:5px;margin-top:30px;transition:ease-in-out .5s;}

.mab-quote b{letter-spacing:0px;font-family:fira sans;color:var(--mae);font-size:8px;font-weight:900}
.mab-quote u{text-decoration:none;border-bottom:1px solid var(--mae)}
.mab-quote i{font-family:abril fatface;text-transform:lowercase;letter-spacing:0px;font-size:10px;}
#mab-trnk:hover .mab-flex{transition:ease-in-out .5s;height:265px;}
.mab-flex{display:flex;height:265px;background:rgb(4,4,4,.5);transition:ease-in-out .5s;}
.mab-photo{width:400px;height:265px;;box-sizing:border-box;padding:20px;border-right:1px solid #141414}
.mab-photox{background:url(https://darkest-hour.de/uploads/avatars/avatar_164.png);margin-top:-10px;width:240px;height:220px;border-bottom:1px solid #293834}
.mab-photoy{background:url(https://darkest-hour.de/uploads/avatars/avatar_194.png);margin-top:-10px;width:240px;height:220px;border-bottom:1px solid #293834}
.mab-magic{background:url(https://i.imgur.com/0aP13Aj.png);margin-top:-210px;margin-left:260px;width:30px;height:30px;}
.mab-magic:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.mab-magic:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #293834;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.mab-sword{background:url(https://i.imgur.com/AHjYGgV.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.mab-sword:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.mab-sword:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #293834;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.mab-spell{background:url(https://i.imgur.com/sGQiZMu.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.mab-spell:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.mab-spell:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #293834;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.mab-blood{background:url(https://i.imgur.com/3Cz9Gnd.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.mab-blood:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.mab-blood:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #293834;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.mab-loyal{background:url(https://i.imgur.com/HsvLs1s.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.mab-loyal:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.mab-loyal:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #293834;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}



.mab-nav{height:25px;display:flex;box-sizing:border-box;padding:0px 5px;justify-content:space-around;align-items:center;margin-top:10px;}
.mab-nav i{height:25px;color:#F8F8FF;display:flex;box-sizing:border-box;padding:0px 5px;justify-content:space-around;align-items:center;margin-top:10px;}
.mab-nav a{text-decoration:none;color:#48665e!important;transition:ease-in-out .2s;font-size:20px;}
.mab-nav a:hover{color:#999!important;transition:ease-in-out .2s}
#mab-trnk:hover .mab-datos{transition:ease-in-out .5s;margin-top:-40px;}

.mab-info{width:470px;height:265px;padding:20px;background:rgb(4,4,4,.3);position: relative; vertical-align:top;}

.mab-infox{font-family:fira sans;font-size:12px;line-height:1.2;color:#999;text-align:justify;padding:20px;height:220px;overflow-y:scroll;display:inline;}
.mab-infox b{letter-spacing:1px;font-family:abril fatface;color:#48665e;font-size:12px;font-weight:900}
.mab-infox i{font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
	font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1px;}

.mab-infox::-webkit-scrollbar {
	background-color: rgb(0,0,0,0);
	width: 7px;
	height: 5px;
}
.mab-infox::-webkit-scrollbar-thumb {
	border: solid 1px var(--mae);
	background-color: rgb(0,0,0,0);
}

.mab-playlist {
	width: 870px;
	height: 100px;
	margin-top:-20px;
	background: rgb(4,4,4,.3);
	border-top: 2px solid #141414;
	display: flex;
	flex-wrap:nowrap;
	box-sizing:border-box;
	justify-content:space-around;
position:absolute;
	transition:ease-in-out .5s;
}
.mab-playlist::-webkit-scrollbar {
	background-color: rgb(0,0,0,0);
	width: 7px;
	height: 5px;
}
.mab-playlist::-webkit-scrollbar-thumb {
	border: solid 1px var(--mae);
	background-color: rgb(0,0,0,0);
}

.mab-playlist span a {
	display: block;
	color: #999 !important;
	font-size: 25px;
	box-sizing: border-box;
	padding: 5px;
	text-decoration: none;
}

.mab-playlist span a:hover {
	color: #47734c !important;
}
.mab-playlist span{display:flex;background:;width:740px;box-sizing:border-box;padding:5px;justify-content:space-between;flex-wrap:wrap; display:block;font-family:calibri;color:#48665e;text-transform:uppercase;font-size:12px;line-height:1.3;height:35px;width:200px;font-weight:900;letter-spacing:1px;}
.mab-playlist span b{display:block; 
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;}

.mab-datos {
	width: 870px;
	height: 100px;
	background: url(https://wisynco.com/wp-content/uploads/2015/01/Parallax-Background-Dark-02.jpg);
	border-top: 2px solid #141414;
	display: flex;
	box-sizing:border-box;
	padding:10px;
	justify-content:space-around;
position:absolute;
	transition:ease-in-out .5s;
	margin-top:110px;
}

.mab-datoy{display:flex;background:;width:740px;box-sizing:border-box;padding:5px;justify-content:space-between;flex-wrap:wrap;}
.mab-datoy span{display:block;font-family:calibri;color:#48665e;text-transform:uppercase;font-size:12px;line-height:1.3;height:35px;width:200px;font-weight:900;letter-spacing:1px;}
.mab-datoy span b{display:block; 
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;}

.mab-datox{display:flex;background:;width:740px;box-sizing:border-box;padding:5px;justify-content:space-between;flex-wrap:wrap;}
.mab-datox span{display:block;font-family:calibri;color:#48665e;text-transform:uppercase;font-size:12px;line-height:1.3;height:35px;width:200px;font-weight:900;letter-spacing:1px;}
.mab-datox span b{display:block; 
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;}
.mab-gif {
	width: 120px;
	height: 120px;
	background: url(https://i.pinimg.com/originals/0c/57/10/0c571003922e1a5a51e53b0f1f87eebf.gif);
	background-size: cover;
	border-radius: 50%;
	border:3px solid var(--mae);
	border-top: 3px solid #293834;
	margin-top: -50px;
}

.mab-gify {
	width: 120px;
	height: 120px;
	background: url(http://31.media.tumblr.com/9d2940550ae095549d14e1b9e3424638/tumblr_n2x17ftTno1trotgpo1_250.gif);
	background-size: cover;
	border-radius: 50%;
	border:3px solid var(--mae);
	border-top: 3px solid #293834;
	margin-top: -50px;
}

###############################################

@import url(https://fonts.googleapis.com/css2?family=Courier+Prime&family=Source+Serif+Pro&family=Work+Sans:wght@400;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Libre+Bodoni&family=Yeseva+One&display=swap);
@import url(https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css);

:root {
	--y1: #85702d;
	--y2: #6b5b1a;
	--y3: #b5972b;
	--y4: #cca22f;
}

#hb-t {
	width: 900px;
	height: 440px;
	margin: 0 auto;
}
.hb-t {
	width: 900px;
	height: 440px;
	background: #040404;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 30px;
	display: flex;
}

.hb-1 {
	width: 260px;
}
.hb-q {
	width: 260px;
	height: 175px;
	box-sizing: border-box;
	padding: 20px;
}
.hb-q i {
	-webkit-text-stroke: 2px rgb(181, 151, 43, 0.3);
	color: transparent;
	position: absolute;
	font-size: 30px;
	z-index: 1;
}
.hb-qbox {
	width: 220px;
	height: 140px;
	border-bottom: 2px solid var(--y1);
	font-family: work sans;
	text-transform: uppercase;
	color: #999;
	text-align: justify;
	text-align-last: justify;
	box-sizing: border-box;
	font-size: 10px;
	padding: 25px;
	letter-spacing: 2px;
}

.hb-d {
	background: #0a0a0a;
	width: 260px;
	height: 225px;
	box-sizing: border-box;
	border: 1px solid #141414;
	padding: 15px;
}
.hb-dbox {
	height: 195px;
	box-sizing: border-box;
	padding: 10px;
	overflow-y: scroll;
	text-align: justify;
	font-family: work sans;
	color: #999;
	font-size: 12px;
}
.hb-dbox strong {
	color: var(--y3);
	letter-spacing: 2px;
	font-size: 9px;
	font-family: yeseva one;
}
.hb-dbox::-webkit-scrollbar {
	background-color: #000;
	width: 4px;
	height: 4px;
}
.hb-dbox::-webkit-scrollbar-thumb {
	border: solid 2px #000;
	background-color: var(--y1);
}

.hb-2 {
	background-image: url(https://i.imgur.com/bOfGDhl.png);
	width: 300px;
	margin-left: 10px;
	height: 400px;
	outline: 1px solid #141414;
	box-sizing: border-box;
	overflow: hidden;
}
#hb-t:hover .hb-2b {
	margin-top: 0px;
	transition: ease-in-out 0.3s;
}
.hb-2b {
	width: 300px;
	height: 400px;
	background: rgb(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	transition: ease-in-out 0.3s;
	margin-top: -400px;
	box-sizing: border-box;
	padding: 30px 10px;
}
.hb-f {
	width: 120px;
	height: 120px;
	background-image: url(https://i.pinimg.com/originals/0c/57/10/0c571003922e1a5a51e53b0f1f87eebf.gif);
	border-radius: 50%;
	border: 8px solid #111;
	margin: 0 auto;
	background-size: contain;
	outline: 1px solid var(--y2);
	outline-offset: -8px;
}
.hb-n {
	font-family: work sans;
	text-transform: uppercase;
	-webkit-text-stroke: 1px #999;
	color: transparent;
	font-size: 50px;
	text-align: center;
	font-weight: 900;
}
.hb-dd {
	width: 280px;
	height: 90px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 10px;
	margin-top: 15px;
}
.hb-dd b {
	display: block;
	text-transform: uppercase;
	font-family: work sans;
	color: #999;
	letter-spacing: 2px;
	font-size: 10px;
	font-weight: 300;
	margin: 0px 5px;
}

.hb-3 {
	width: 260px;
	margin-left: 10px;
}
.hb-p {
	background: #0a0a0a;
	width: 260px;
	height: 265px;
	box-sizing: border-box;
	border: 1px solid #141414;
	padding: 10px;
}
.hb-pbox {
	height: 225px;
	box-sizing: border-box;
	padding: 10px;
	overflow-y: scroll;
}
.hb-pbox span {
	display: block;
	width: 214px;
	background: rgb(0, 0, 0, 0.4);
	height: 50px;
	margin: 5px 0px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 15px 10px;
}
.hb-pbox span i {
	font-size: 18px;
	color: #999;
}
.hb-pbox span a {
	text-decoration: none;
	text-transform: uppercase;
	color: var(--y1) !important;
	font-family: yeseva one;
	letter-spacing: -1px;
	font-size: 13px;
	margin-left: 5px;
	transition: ease-in-out 0.3s;
}
.hb-pbox span a:hover {
	color: var(--y3) !important;
	transition: ease-in-out 0.3s;
}
.hb-pbox span b {
	font-weight: 300;
	font-family: work sans;
	font-size: 9px;
	text-transform: uppercase;
	color: #999;
	white-space: wrap;
	display: block;
	float: right;
	width: 50px;
	box-sizing: border-box;
	line-height: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hb-pbox::-webkit-scrollbar {
	background-color: #000;
	width: 4px;
	height: 4px;
}
.hb-pbox::-webkit-scrollbar-thumb {
	border: solid 2px #000;
	background-color: var(--y1);
}
.hb-c2 {
	width: 260px;
	height: 135px;
	box-sizing: border-box;
	padding: 20px;
}
.hb-c2box {
	width: 220px;
	height: 140px;
	border-top: 2px solid var(--y1);
	display: flex;
	box-sizing: border-box;
	padding: 20px 2px;
	gap: 0px 5px;
}
.hb-tone {
	width: 50px;
	height: 70px;
}
.hb-tone span {
	height: 15px;
	background: #111;
	color: #999;
	text-transform: uppercase;
	font-family: work sans;
	font-size: 9px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 55px;
}

.hb-x {
	background: #040404;
	width: 900px;
	height: 50px;
	box-sizing: border-box;
	display: flex;
	padding: 13px;
}

.hb-x a {
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	font-family: yeseva one;
	color: #999 !important;
	margin-left: 10px;
	height: 16px;
	border-bottom: 2px solid var(--y2);
	font-size: 11px;
	transition: ease-in-out 0.2s;
}
.hb-x a:hover {
	border-bottom: 5px solid var(--y2);
	transition: ease-in-out 0.2s;
}

###############################################

.tranarchy-hd-bg {
  background-image: url(https://wallpaper.dog/large/10816446.jpg);
  background-size: cover;
  background-position: center;
  width: 1078px;
  height: 800px;
}

.tranarchy-header {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 1078px;
  height: 800px;
  background-color: RGBA(0,0,0,0.7);
}

.tranch-hd01, .tranch-hd02, .tranch-hd03 {
  width: 1078px;
  display: flex;
}

.tranch-hd01 {
  height: 400px;
}

.tranch-hd02 {
  height: 50px;
  padding-left: 30px;
  width: 1018px;
}

.tranch-hd03 {
  height: 350px;
}

.tranch-sc-01, .tranch-sc-02 {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.tranch-sc-01 {
  width: 750px;
}

.tranch-sc-02 {
  width: 328px;
}

.tranch-sc-11, .tranch-sc-12 {
  height: 350px;
  display: flex;
  flex-direction: column;
}

.tranch-sc-11 {
  width: 300px;
}

.tranch-sc-12 {
  width: 778px;
}

.trarc-sc-1, .trarc-sc-2 {
  display: flex;
  width: 778px;
  height: 175px;
}

.tranch-sc-01 {
  background-size: cover;
  background-position: center;
  background-image: url(https://via.placeholder.com/750x400);
}

.trarc-frnm {
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  font-family: calibri;
  font-weight: 700;
  font-size: 35px;
  letter-spacing: 4px;
  font-weight: bold;
  transition: 0.8s;
}

.trarc-frnm:hover {
  letter-spacing: 7px;
  transition: 0.8s;
  text-shadow: 2px 2px 3px #404040;
}

.tranch-sc-b01 {
  width: 270px;
  height: 350px;
  border: 5px solid #fff;
  margin: auto;
  background-size: cover;
  background-position: center;
  background-image: url(https://via.placeholder.com/270x350);
  display: flex;
}

.tranch-sc-b02 {
width: 270px;
height: 350px;
background: rgba( 255, 255, 255, 0.4 );
backdrop-filter: blur( 3.5px );
-webkit-backdrop-filter: blur( 3.5px );
  display: flex;
}

.tranc-evento {
  font-size: 14px;
  font-family: calibri;
  line-height: 1em;
  margin: 70px 50px;
  overflow-y: scroll;
  text-align: justify;
  padding: 5px;
}

.tranc-evento::-webkit-scrollbar {
  display: none;
}

.tr-evento {
  font-weight: 700;
  font-family: calibri;
  text-transform: uppercase;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 0.7em;
  margin-bottom: 10px;
}

.tranch-sc-b02 {
  opacity: 0;
  transition: 0.8s;
}

.tranch-sc-b01:hover .tranch-sc-b02 {
  opacity: 1;
}

.tranc-blt {
  width: 32px;
  height: 32px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  margin: 15px auto 0;
  transition: 0.8s;
}

.tranc-ic {
  margin: 7px 7px;
  text-shadow: 1px 1px 0 #4788d2, 2px 2px 0 #FFDF00;
  color: #fff;
  font-size: 18px;
}

a {
  text-decoration: none;
}

.tranc-blt:hover {
  background-color: #b8860b;
}

.tranc-ult {
  color: #fff;
  font-weight: 700;
  font-family: calibri;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 25px;
  line-height: 1em;
  margin: 15px auto 0 20px;
}

.ultimostemas {
  background-color: RGBA(255,255,255,0.75);
  margin: 5px auto 0 auto;
  width: 260px;
  height: 290px;
  color: #000;
  font-family: calibri;
  font-size: 11px;
  line-height: 1em;
  text-transform: uppercase;
}

.tranch-sc-21, .tranch-sc-22, .tranch-sc-23, .tranch-sc-24 {
  height: 150px;
}

.tranch-sc-21, .tranch-sc-23 {
  width: 430px;
}

.tranch-sc-22, .tranch-sc-24 {
  width: 300px;
}

.tranch-sc-21, .tranch-sc-22 {
  margin: 20px 15px 0 0;
}

.tranch-sc-23, .tranch-sc-24 {
  margin: 7px 15px 0 0;
}

/*Busquedas*/

.tranch-sc-21 {
  display: flex;
  flex-wrap: wrap;
}

.tran-bsq {
  width: 60px;
  height: 60px;
  border: 5px solid #fff;
  background-size: cover;
  background-position: center;
  margin: 2.5px 8px;
  display: flex;
}

.bsq-nm {
  margin: auto;
  font-size: 8px;
  color: #000;
  text-transform: uppercase;
  font-family: calibri;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0;
  transition: 0.7s;
  background-color: #fff;
  padding: 4px;
}

.tran-bsq:hover .bsq-nm {
  opacity: 1;
}

/*Clima*/

.tranch-sc-22 {
  display: flex;
  transition: 0.8s;
}

.tr-cl-im {
  width: 145px;
  height: 145px;
  display: flex;
}

.tr-cp-cl:hover {
  animation: spin 30s linear infinite;
}

.tr-cp-cl {
  margin: auto;
  color: #fff;
  font-size: 100px;
  transition: 0.8s;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

.tr-cl-tx {
  width: 200px;
  height: 145px;
  color: #fff;
  font-family: calibri;
  margin-left: -20px;
  margin-top: 15px;
}

.trcl-estacion {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 32px;
  margin: 20px 0 -5px 10px;
  text-shadow: 2px 2px 3px #404040;
}

.trcl-temperatura {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 16px;
  margin-left: 10px;
  margin-bottom: 5px;
}

.trcl-descripcion {
  overflow-y: scroll;
  width: 150px;
  height: 36px;
  text-align: justify;
  line-height: 0.7em;
  margin-left: 10px;
  font-size: 10px;
}

.trcl-descripcion::-webkit-scrollbar {
  display: none;
}

/*Staff*/

.tranch-sc-24 {
  display: flex;
}

.trarc-stf {
  width: 85px;
  height: 140px;
  display: flex;
  background-size: cover;
  background-position: center;
  margin: 0 2.5px;
  border: 5px solid #fff;
 }

.tr-sf-st {
  width: 85px;
  height: 141px;
  display: flex;
  flex-direction: column;
  background-color: RGBA(0,0,0,0.65);
  backdrop-filter: blur( 3.5px );
-webkit-backdrop-filter: blur( 3.5px );
  opacity: 0;
  transition: 0.7s;
}

.trarc-stf:hover .tr-sf-st {
  opacity: 1;
}

.tr-st-ic {
  margin: auto auto 0 auto;
  font-size: 60px;
  color: RGBA(255,255,255,0.3);
  transform: rotate(25deg);
}

.tr-st-mp {
  margin: -15px auto auto auto;
  font-family: calibri;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 18px;
  color: #fff;
  text-shadow: 1px 1px 0 #4788d2, 2px 2px 0 #FFDF00;
  transform: rotate(-15deg);
}

/*Misiones*/

.tranch-sc-23 {
  border: 1px solid #fff;
}

.tr-slider {
  width: 430px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.tr-slide {
  width: 430px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
  background-size: cover;
  background-position: center;
}

.tr-sl-bg {
  width: 430px;
  height: 150px;
  display: flex;
  background-color: RGBA(0,0,0,.7);
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
}

.tr-prev, .tr-next {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  border-radius: 50%;
  background: RGBA(255,255,255,0.7);
  z-index: 100;
  top: 50%;
  transform: translatey(-50%);
  transition: transform 0.2s, background 0.5s;
}

.tr-prev {
  left: 2%;
  background: RGBA(255,255,255,1);
  cursor: pointer;
}

.tr-next {
  right: 2%;
  background: RGBA(255,255,255,1);
  cursor: pointer;
}

.tr-sld-tlt {
  color: #fff;
  font-family: calibri;
  font-weight: 700;
  font-size: 20px;
  width: 230px;
  text-transform: uppercase;
  margin: auto 0 auto 135px;
  transition: 0.8s;
  text-align: center;
}

.tr-sld-txt {
  width: 160px;
  height: 100px;
  color: #fff;
  line-height: 1em;
  font-size: 10px;
  font-family: calibri;
  overflow-y: scroll;
  text-align: justify;
  margin: auto 45px auto -20px;
  transition: 0.8s;
  opacity: 0;
}

.tr-sld-txt::-webkit-scrollbar {
  display: none;
}

.tr-sl-bg:hover .tr-sld-txt {
  opacity: 1;
}

.tr-sl-bg:hover .tr-sld-tlt {
  margin: auto 0 auto 15px;
  width: 230px;
  padding: 0 40px;
  letter-spacing: 1px;
}

###########################################

/* BLOCS STAFF PA */
.staffPERFIL {
background:#0d0d0d; color:white; /* MODIFIABLE */
}
/* DISPONIBLE PA */
.onPERFIL {
background:lightgreen; color:black; /* MODIFIABLE */
}
/* INDISPONIBLE PA */
.offPERFIL {
background:#500a08; color:white; /* MODIFIABLE */
}
/* LIENS PROFILS STAFF PA */
.staffPERFIL ul li a {
color:white; /* MODIFIABLE */
}
/* CARRES NAVIGATION STAFF PA */
.staffPERFIL .navPERFIL label {
background:#494545; /* MODIFIABLE */
}
/* SURVOL CARRE NAVIGATION STAFF PA */
.staffPERFIL .navPERFIL label:after {
background:#293834; /* MODIFIABLE */
}



/* BLOC STAFF PA */
.staffPERFIL {
	display:inline-block; vertical-align:top;
width:460px;height:265px; text-align:center; 
	margin-right:100px;
}
/* BLOC CONTENU STAFF */
.staffPERFIL ul {
position:relative; margin:0 auto;
width:440px;height:265px; padding:10px 5px 0; overflow:hidden;
font-size:0; line-height:0; white-space:nowrap;
}
/* CONTENU STAFF */
.staffPERFIL ul li {
position:relative; display:inline-block; vertical-align:top; 
width:100%; height:100%; overflow:hidden;
line-height:normal; white-space:normal; font-family:fira sans;font-size:12px;line-height:1.2;color:#999;text-align:justify;padding:20px;height:250px; overflow-y:scroll; scrollbar-width: none; margin-top: -30px;
transition: all 0.35s linear; -webkit-transition: all 0.35s linear;
}
/* IMAGE STAFF */
.staffPERFIL ul li img {
display:inline-block; vertical-align:middle; margin:5px 0; 
width:125px; height:125px;
}

/* NOM PRENOM(S) STAFF */
.staffPERFIL ul li span {
  margin-top: 10px;
  background-color: #293834;
  max-width: 180px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

/* NOM PRENOM(S) STAFF */
.staffPERFIL ul li class {
  max-width: 400px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
	border-bottom: 2px solid #293834;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.staffPERFIL ul li scene {
  max-width: 400px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.staffPERFIL ul li img {
display:inline-block; vertical-align:middle; margin:5px 0; 
width:50px; height:50px; border:1px solid #293834; filter: grayscale(100%); filter: gray;
}

/* DISPONIBLE PA */
.onPERFIL {
margin:5px auto !important; width:80%; padding:3px 0;
font-size:10px !important; line-height:15px;
}
/* INDISPONIBLE PA */
.offPERFIL {
margin:5px auto !important; width:80%; padding:3px 0;
font-size:10px !important; line-height:15px;
}
/* LIENS PROFILS STAFF PA */
.staffPERFIL ul li a {

}
/* NAVIGATION STAFF */
.staffPERFIL .navPERFIL {
margin-top:-30px; width:470px; text-align:center;  margin-left:-400px;
font-size:0; line-height:0; text-align:center;
}
/* CARRE NAVIGATION STAFF */
.staffPERFIL .navPERFIL label {
position:relative; display:inline-block; margin:0 7px;
padding:9px; 
}
/* SURVOL CARRE NAVIGATION STAFF */
.staffPERFIL .navPERFIL label:after {
content:''; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-10px;
padding:10px; opacity:0;
}
.staffPERFIL .navPERFIL label:hover:after {
opacity:1;
}
.staffPERFIL > input:nth-of-type(1):checked ~ .navPERFIL label:nth-of-type(1):after,
.staffPERFIL > input:nth-of-type(2):checked ~ .navPERFIL label:nth-of-type(2):after,
.staffPERFIL > input:nth-of-type(3):checked ~ .navPERFIL label:nth-of-type(3):after,
.staffPERFIL > input:nth-of-type(4):checked ~ .navPERFIL label:nth-of-type(4):after,
.staffPERFIL > input:nth-of-type(5):checked ~ .navPERFIL label:nth-of-type(5):after,
.staffPERFIL > input:nth-of-type(6):checked ~ .navPERFIL label:nth-of-type(6):after {
opacity:1;
}
.staffPERFIL > input {
display:none;
}
.staffPERFIL > input:nth-of-type(6):checked ~ ul li:first-of-type {
margin-left:-500%;
}
.staffPERFIL > input:nth-of-type(5):checked ~ ul li:first-of-type {
margin-left:-400%;
}
.staffPERFIL > input:nth-of-type(4):checked ~ ul li:first-of-type {
margin-left:-300%;
}
.staffPERFIL > input:nth-of-type(3):checked ~ ul li:first-of-type {
margin-left:-200%;
}
.staffPERFIL > input:nth-of-type(2):checked ~ ul li:first-of-type {
margin-left:-100%;
}
.staffPERFIL > input:nth-of-type(1):checked ~ ul li:first-of-type {
margin-left:0%;
}

#################################################

.skills{
    width: 100%;
    max-width: 400px;

}

.skillnamer{
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;

  text-shadow: 2px 2px 2px #000; 
}

.skillnamel{
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  text-shadow: 2px 2px 2px #000; 
	margin-bottom:-17px;
}

.skill-bar{
    height: 13px;
  background: url(https://i.imgur.com/xSUls9B.png); 
}
.skill{
margin: 8px 0
}

.skillper{
    height: 13px;
    background-color: #500a08;
    position: relative;
    animation: fillbar 1.7s ;
}

.skillper::before{
    content: attr(per);
    position: absolute;
    color: #F8F8FF;
font-weight: bold;
margin-right: 10px;
    right: 0;
    font-size: 12px;
margin-top:-2px;
    border-radius: 6px;
    transform: translate(50%);
}


.energyname{
    max-width: 400px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000; 
	margin-top: -15px;
}

.energy-bar{
    height: 10px;
    background-color: #000;
    border-radius: 5px;
}
.energy{
margin-top: -17px;
}

.energyper{
    height: 10px;
	    border-radius: 5px;
    background-color: #990e0a;
    position: relative;
    animation: fillbar 1.7s ;
}

.energyper::before{
    content: attr(per);
    position: absolute;
    color: #F8F8FF;
    top: -22px;
    right: 0;
    font-size: 16px;
    padding: 2px 3px;
    border-radius: 6px;
    transform: translate(50%);
}

@keyframes fillbar{
    from{
        width: 0;
    }
    to{
        width: 100%;
    }
}

################################################

/* BLOCS STAFF PA */
.naomi {
background:#0d0d0d; color:white; /* MODIFIABLE */
}
/* DISPONIBLE PA */
.onNAOMIL {
background:lightgreen; color:black; /* MODIFIABLE */
}
/* INDISPONIBLE PA */
.offNAOMIL {
background:#500a08; color:white; /* MODIFIABLE */
}
/* LIENS PROFILS STAFF PA */
.naomi ul li a {
color:white; /* MODIFIABLE */
}
/* CARRES NAVIGATION STAFF PA */
.naomi .navNAOMIL label {
background:#494545; /* MODIFIABLE */
}
/* SURVOL CARRE NAVIGATION STAFF PA */
.naomi .navNAOMIL label:after {
background:#500a08; /* MODIFIABLE */
}



/* BLOC STAFF PA */
.naomi {
	display:inline-block; vertical-align:top;
width:640px;height:265px; text-align:center; 
	margin-right:100px;
}

.naomibreak {
width:480px;overflow:hidden;
}

/* BLOC CONTENU STAFF */
.naomi ul {
position:relative; margin:0 auto;
width:640px;height:265px; padding:10px 5px 0; overflow:hidden;
font-size:0; line-height:0; white-space:nowrap;
}

/* CONTENU STAFF */
.naomi ul li {
position:relative; display:inline-block; vertical-align:top; 
width:100%; height:100%; overflow:hidden;
line-height:normal; white-space:normal; font-family:fira sans;font-size:12px;line-height:1.2;color:#999;text-align:justify;padding:20px;height:250px; overflow-y:scroll; scrollbar-width: none; margin-top: -30px;
transition: all 0.35s linear; -webkit-transition: all 0.35s linear;
}
/* IMAGE STAFF */
.naomi ul li img {
display:inline-block; vertical-align:middle; margin:5px 0; 
width:125px; height:auto;
}

/* NOM PRENOM(S) STAFF */
.naomi ul li span {
  margin-top: 10px;
  background-color: #500a08;
  max-width: 180px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.naomi ul li title {
  font-family: conthrax;
  font-size: 22px;
  color: #FFF;
  padding: 3px 10px 3px 10px;
  text-align: left;
  background-image: linear-gradient(45deg, #f3ec78, #af4261);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
 }


.naomi ul li title:before {
    background-color: #fff;
    width: 10%;
    height: 1px;
    content: "";
    vertical-align: middle;
    display: inline-block;
    margin-top: -5px;
    margin-right: 10px;
}

.naomi ul li title:after {
    background-color: #fff;
    width: 10%;
    height: 1px;
    content: "";
    vertical-align: middle;
    display: inline-block;
    margin-top: -5px;
    margin-left: 10px;
}

/* NOM PRENOM(S) STAFF */
.naomi ul li class {
  max-width: 400px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
	border-bottom: 2px solid #500a08;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.naomi ul li scene {
  max-width: 400px;
  padding: 7px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
}

.naomi ul li img {
display:inline-block; vertical-align:middle; margin:5px 0; 
width:60px; border:1px solid #293834; -webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .9;
}

.naomi ul li img:hover {
display:inline-block; vertical-align:middle; margin:5px 0; 
width:60px; border:1px solid #293834; -webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}

/* DISPONIBLE PA */
.onNAOMIL {
margin:5px auto !important; width:80%; padding:3px 0;
font-size:10px !important; line-height:15px;
}
/* INDISPONIBLE PA */
.offNAOMIL {
margin:5px auto !important; width:80%; padding:3px 0;
font-size:10px !important; line-height:15px;
}
/* LIENS PROFILS STAFF PA */
.naomi ul li a {

}
/* NAVIGATION STAFF */
.naomi .navNAOMIL {
margin-top:-30px; width:470px; text-align:center;  margin-left:-400px;
font-size:0; line-height:0; text-align:center;
}
/* CARRE NAVIGATION STAFF */
.naomi .navNAOMIL label {
position:relative; display:inline-block; margin:0 7px;
padding:9px; 
}
/* SURVOL CARRE NAVIGATION STAFF */
.naomi .navNAOMIL label:after {
content:''; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-10px;
padding:10px; opacity:0;
}
.naomi .navNAOMIL label:hover:after {
opacity:1;
}
.naomi > input:nth-of-type(1):checked ~ .navNAOMIL label:nth-of-type(1):after,
.naomi > input:nth-of-type(2):checked ~ .navNAOMIL label:nth-of-type(2):after,
.naomi > input:nth-of-type(3):checked ~ .navNAOMIL label:nth-of-type(3):after,
.naomi > input:nth-of-type(4):checked ~ .navNAOMIL label:nth-of-type(4):after,
.naomi > input:nth-of-type(5):checked ~ .navNAOMIL label:nth-of-type(5):after,
.naomi > input:nth-of-type(6):checked ~ .navNAOMIL label:nth-of-type(6):after,
.naomi > input:nth-of-type(7):checked ~ .navNAOMIL label:nth-of-type(7):after {
opacity:1;
}
.naomi > input {
display:none;
}
.naomi > input:nth-of-type(7):checked ~ ul li:first-of-type {
margin-left:-600%;
}
.naomi > input:nth-of-type(6):checked ~ ul li:first-of-type {
margin-left:-500%;
}
.naomi > input:nth-of-type(5):checked ~ ul li:first-of-type {
margin-left:-400%;
}
.naomi > input:nth-of-type(4):checked ~ ul li:first-of-type {
margin-left:-300%;
}
.naomi > input:nth-of-type(3):checked ~ ul li:first-of-type {
margin-left:-200%;
}
.naomi > input:nth-of-type(2):checked ~ ul li:first-of-type {
margin-left:-100%;
}
.naomi > input:nth-of-type(1):checked ~ ul li:first-of-type {
margin-left:0%;
}

##############################################

@import url(https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Fira+Mono:wght@400;500;700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css);

:root {
	--mae: #5a7b81;
}

#naomi-trnk {
	width: 1000px;
	height: 470px;
	background: url(https://i.imgur.com/A2ooN0l.png);
	margin: 0 auto;
	box-sizing: border-box;
	border: 15px solid #141414;
	outline: 1px solid #222;
	outline-offset: -15px;
	position:relative;
	overflow:hidden;
}

.naomi-nq{background:rgb(4,4,4,.2);height:80px;border-bottom:2px solid #141414;position:relative;overflow:hidden}
#naomi-trnk:hover .naomi-name{transition:ease-in-out .5s;margin-top:0px;font-size:30px;line-height:2}
.naomi-name{width:870px;height:50px;background:;font-family:abril fatface;font-size:45px;line-height:1;text-align-last:center;text-transform:uppercase;box-sizing:border-box;padding:0px 45px;color:#500a08;margin-top:18px;transition:ease-in-out .5s;line-height:1}
.naomi-name b{font-weight:normal;color:transparent;-webkit-text-stroke:1px #999}
#naomi-trnk:hover .naomi-quote{transition:ease-in-out .5s;margin-top:-5px;}
.naomi-quote{color:#F8F8FF;text-transform:uppercase;font-family:fira mono;text-align:center;font-size:10px;line-height:1;padding:5px 20px;letter-spacing:5px;margin-top:30px;transition:ease-in-out .5s;}

.naomi-quote b{letter-spacing:0px;font-family:fira sans;color:var(--mae);font-size:8px;font-weight:900}
.naomi-quote u{text-decoration:none;border-bottom:1px solid var(--mae)}
.naomi-quote i{font-family:abril fatface;text-transform:lowercase;letter-spacing:0px;font-size:10px;}
#naomi-trnk:hover .mab-flex{transition:ease-in-out .5s;height:265px;}
.naomi-flex{display:flex;height:265px;background:rgb(4,4,4,.5);transition:ease-in-out .5s;}
.naomi-photo{width:400px;height:265px;;box-sizing:border-box;padding:20px;border-right:1px solid #141414}
.naomi-photox{background:url(https://darkest-hour.de/uploads/avatars/avatar_164.png);margin-top:-10px;width:240px;height:220px;border-bottom:1px solid #293834}
.naomi-photoy{margin-top:-10px;width:240px;height:220px;border-bottom:1px solid #293834}
.naomi-magic{background:url(https://i.imgur.com/0aP13Aj.png);margin-top:-210px;margin-left:260px;width:30px;height:30px;}
.naomi-magic:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.naomi-magic:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #500a08;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.naomi-sword{background:url(https://i.imgur.com/AHjYGgV.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.naomi-sword:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.naomi-sword:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #500a08;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.naomi-spell{background:url(https://i.imgur.com/sGQiZMu.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.naomi-spell:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.naomi-spell:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #500a08;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.naomi-blood{background:url(https://i.imgur.com/3Cz9Gnd.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.naomi-blood:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.naomi-blood:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #500a08;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}
.naomi-loyal{background:url(https://i.imgur.com/HsvLs1s.png);margin-top:15px;margin-left:260px;width:30px;height:30px;}
.naomi-loyal:hover{color: var(--yam) !important;
	transform: rotate(360deg);
	transition: ease-in-out 0.8s;}
.naomi-loyal:hover title {margin-top: 10px;
	margin-left:-15px;
  background-color: #500a08;
  max-width: 180px;
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
	text-shadow: 2px 2px 2px #000;}



.naomi-nav{height:25px;display:flex;box-sizing:border-box;padding:0px 5px;justify-content:space-around;align-items:center;margin-top:10px;}
.naomi-nav i{height:25px;color:#F8F8FF;display:flex;box-sizing:border-box;padding:0px 5px;justify-content:space-around;align-items:center;margin-top:10px;}
.naomi-nav a{text-decoration:none;color:#500a08!important;transition:ease-in-out .2s;font-size:20px;}
.naomi-nav a:hover{color:#999!important;transition:ease-in-out .2s}
#naomi-trnk:hover .naomi-datos{transition:ease-in-out .5s;margin-top:-1px;}

.naomi-info{width:470px;height:265px;padding:20px;background:rgb(4,4,4,.3);position: relative; vertical-align:top;}

.naomi-infox{font-family:fira sans;font-size:12px;line-height:1.2;color:#999;text-align:justify;padding:20px;height:220px;overflow-y:scroll;display:inline;}
.naomi-infox b{letter-spacing:1px;font-family:abril fatface;color:#990e0a;font-size:12px;font-weight:900}
.naomi-infox i{font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
	font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1px;}

.naomi-infox::-webkit-scrollbar {
	background-color: rgb(0,0,0,0);
	width: 7px;
	height: 5px;
}
.naomi-infox::-webkit-scrollbar-thumb {
	border: solid 1px var(--mae);
	background-color: rgb(0,0,0,0);
}

.naomi-playlist {
	width: 980px;
	height: 100px;
	background: rgb(4,4,4,.3);
	border-top: 2px solid #141414;
	display: flex;
	flex-wrap:nowrap;
	box-sizing:border-box;
	justify-content:space-around;
position:absolute;
	transition:ease-in-out .5s;
}
.naomi-playlist::-webkit-scrollbar {
	background-color: rgb(0,0,0,0);
	width: 7px;
	height: 5px;
}
.naomi-playlist::-webkit-scrollbar-thumb {
	border: solid 1px var(--mae);
	background-color: rgb(0,0,0,0);
}

.naomi-playlist span a {
	display: block;
	color: #999 !important;
	font-size: 25px;
	box-sizing: border-box;
	padding: 5px;
	text-decoration: none;
}

.naomi-playlist span a:hover {
	color: #47734c !important;
}
.naomi-playlist span{display:flex;background:;width:740px;box-sizing:border-box;padding:5px;justify-content:space-between;flex-wrap:wrap; display:block;font-family:calibri;color:#990e0a;text-transform:uppercase;font-size:12px;line-height:1.3;height:35px;width:200px;font-weight:900;letter-spacing:1px;}
.naomi-playlist span b{display:block; 
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;}

.naomi-datos {
	width: 980px;
	height: 100px;
	background:#0f0f0f;
	border-top: 2px solid #141414;
	display: flex;
	box-sizing:border-box;
	padding:10px;
	justify-content:space-around;
position:absolute;
	transition:ease-in-out .5s;
	margin-top:160px;
}

.naomi-datoy{display:flex;background:;width:740px;box-sizing:border-box;padding:5px;justify-content:space-between;flex-wrap:wrap;}
.naomi-datoy span{display:block;font-family:calibri;color:#990e0a;text-transform:uppercase;font-size:12px;line-height:1.3;height:35px;width:200px;font-weight:900;letter-spacing:1px;}
.naomi-datoy span b{display:block; 
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;}

.naomi-datox{display:flex;background:#0f0f0f;width:740px;box-sizing:border-box;padding:5px;justify-content:space-between;flex-wrap:wrap;}
.naomi-datox span{display:block;font-family:calibri;color:#990e0a;text-transform:uppercase;font-size:12px;line-height:1.3;height:35px;width:200px;font-weight:980;letter-spacing:1px;}
.naomi-datox span b{display:block; 
  font-family: Pixel;
  color: #F8F8FF;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;}
.naomi-gif {
	width: 120px;
	height: 120px;
	background: url(https://i.pinimg.com/originals/0c/57/10/0c571003922e1a5a51e53b0f1f87eebf.gif);
	background-size: cover;
	border-radius: 50%;
	border:3px solid var(--mae);
	border-top: 3px solid #500a08;
	margin-top: -50px;
}

.naomi-gify {
	width: 120px;
	height: 120px;
	background-size: cover;
	border-radius: 50%;
	border:3px solid var(--mae);
	border-top: 3px solid #500a08;
	margin-top: -50px;
}


#############################################
*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: hillstone;
  src: url(https://darkest-hour.de/uploads/Hillstone.ttf);
}

@font-face {
  font-family: abraham-lincoln;
  src: url(https://darkest-hour.de/uploads/AbrahamLincoln.ttf);
}

:root {
  /* colors */
  --light: 204, 208, 209;
  --dark: 3, 27, 39;
  --teal: 49, 123, 141;
  --red: 63, 176, 131;
  --darkteal: 0, 61, 76;
  --bggradient: linear-gradient(
    to right bottom,
    #81c16b,
    #4faa74,
    #1f9177,
    #007873,
    #005e66,
    #025f6b,
    #07606f,
    #0e6173,
    #1b7e91,
    #289caf,
    #36bbcd,
    #46dbeb
  );

  /* fonts */
  --serif: 3rem/100% 'abraham-lincoln', serif;
  --serifsmall: 1rem/100% 'abraham-lincoln', serif;
  --script: 4rem/100% "hillstone", cursive;
  --sans: 0.75rem/90% "Poppins", sans-serif;
}

wrappercat {
  display: block;
  width: 1030px;
  height: auto;
}

forum-rows {
  grid-area: 2 / 1 / 3 / 2;
  display: grid;
  grid-template-columns: 250px 730px;
  grid-template-rows: repeat(autofit, 1fr);
	  grid-gap: 10px;

}

#c1 forum-rows {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(2, 1fr);
}

forumcat {
  display: grid;
  grid-template-areas: 'name name stats'
        'desc desc desc'
        '. svg svg'
        'sub sub sub';
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 1fr 2fr 3fr 4fr;
  height: auto;

}

forumcat#f1 {
  grid-area: 1 / 1 / 3 / 2;
  grid-template-areas: 'name'
        'sub';
  grid-template-rows: auto auto auto;
  grid-template-columns: 100%;
	  background: url(https://i.imgur.com/x1JlC9z.png);
	 height: 300px;
	  border: 2px solid #0b0b0b;
}

forumcat#b1 {
  grid-area: 1 / 1 / 3 / 2;
  grid-template-areas: 'name'
        'sub';
  grid-template-rows: auto auto auto;
  grid-template-columns: 100%;
	  background: url(https://i.imgur.com/xSUls9B.png);
	 height: 300px;
}

forumcat#c2 {
  display: grid;
  grid-template-areas: 'name'
        'sub';
  grid-template-rows: auto auto auto;
  grid-template-columns: 100%;
	  background: url(https://i.imgur.com/xSUls9B.png);

	 height: 145px;
	float: left;
}

forumcat#d2 {
  display: grid;
  grid-template-areas: 'name'
        'sub';
  grid-template-rows: auto auto auto;
  grid-template-columns: 100%;
	  background: url(https://i.imgur.com/gGTF9Xi.png);

	 height: 145px;
	float: right;
}

#f2 {
  grid-area: 1 / 2 / 2 / 3;
}

#f3 {
  grid-area: 2 / 2 / 3 / 3;
}

forum-name {
  display: block;
font-size: 30px;
  grid-area: name;
  font: calibri;
  letter-spacing: 0.05rem;
  color: #999898;
	 text-align: center;

}

subforumscat {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
	 width: 80%;
  grid-area: sub;
}

#f1 subforumscat {
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
}

#f1 subforumscat a {
  width: 80%;
  min-width: fit-content;
}

#b1 subforumscat {
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
}

#b1 subforumscat a {
  width: 80%;
  min-width: fit-content;
}

subforumscat a {
    margin-top: 10px;
  background-color: #293834 opacity: 0.5;;
  max-width: 180px;
  padding: 7px;
 font-family: Pixel;
  color: #F8F8FF;
  font-size: 6px;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-shadow: 2px 2px 2px #000;
  width: fit-content;
  transition: .5s ease-in;
	margin-left: 60px;

}

subforumscat a:hover {
  font-size: 0.50rem;
  color: #500a08;
  transition: .5s ease-in;
}

@media (max-width: 825px) {
  forum-rows, #c1 forum-rows {
    grid-template-columns: 100%;
    grid-template-rows: repeat(autofit, 1fr);
  }
  
  forumcat#f1, #b1,  {
    grid-area: unset;
  }
  
  forumcat {
    grid-template-areas: 'name name'
        '. stats'
        'desc desc'
        '. svg'
        'sub sub';
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 1fr 3fr;
    grid-gap: 10px;
  }
}

@media (max-width: 450px) {
  cat-title {
    font-size: 2.5rem;
  }
  
  forum-name {
    font-size: 2rem;
  }
}

#########################

.forumbitindexcat{
    width: 700px;
background: url(https://i.imgur.com/xSUls9B.png); 
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 17px;
	float: left; 
}

.box1outcat {height: 145px; width: 520px; overflow: hidden;  background-color: #121212; display: inline-block; float: both; }

.box3outcat {height: 145px; width: 635px; overflow: hidden; background-color: #121212;  display: inline-block; float: center;position: relative;}

.box1cat {height:134px; width: 510px; overflow: hidden; display:inline-block; float: both; border: solid 1px #0b0b0b;  background-color: #0b0b0b; margin-top: 5px;margin-right: 5px; position: relative; float:center;background: url(https://i.imgur.com/xSUls9B.png); }

.box1cat2 {height:134px; width: 510px; overflow: hidden; border: solid 1px black; display:inline-block; float: both; background-color: #0f0f0f; background: url(https://i.imgur.com/Qb7GzDN.png); margin-top: 5px;margin-left: 5px;}

.box3cat {height:134px; width: 625px; overflow: hidden; display:inline-block; float: both; border: solid 1px #0b0b0b;  background-color: #0b0b0b; margin-top: 5px;margin-right: 5px; position: relative; float:center; background: url(https://i.imgur.com/xSUls9B.png); }

.box5cat {height:134px; width: 625px; overflow: hidden; border: solid 1px black; display:inline-block; float: both; background-color: #0b0b0b; background: url(https://i.imgur.com/VtUvh7s.png); margin-top: 5px;margin-left: 5px;}

.box6cat {height:134px; width: 625px; overflow: hidden; border: solid 1px black; display:inline-block; float: both; background-color: #0b0b0b; background: url(https://i.imgur.com/xj8OoZu.png); margin-top: 5px;margin-left: 5px;}

.box7cat {height:134px; width: 625px; overflow: hidden; border: solid 1px black; display:inline-block; float: both; background-color: #0b0b0b; background: url(https://i.imgur.com/ImuXwG6.png); margin-top: 5px;margin-left: 5px;}

.box8cat {height:134px; width: 625px; overflow: hidden; border: solid 1px black; display:inline-block; float: both; background-color: #0b0b0b; background: url(https://i.imgur.com/KFs8PSh.png); margin-top: 5px;margin-left: 5px;}

.box2outcat {height: 145px; width: 210px; overflow: hidden; background-color: #121212; display: inline-block; float: right; }

.box2cat {height:134px; width: 208px; overflow: hidden; border: solid 1px #0b0b0b; display:inline-block; float: center; background-color: #0b0b0b; margin-top: 5px; margin-right: 5px;text-align: center; background: url(https://i.imgur.com/xSUls9B.png); }

.box4outcat {height: 145px; width: 365px; overflow: hidden; background-color: #121212; display: inline-block; float: right; }

.box4cat {height:134px; width: 360px; overflow: hidden; border: solid 1px #0b0b0b; display:inline-block; float: center; background-color: #0f0f0f; margin-top: 5px;  text-align: left; padding-left: 35px; padding-top: 18px;background: url(https://i.imgur.com/xSUls9B.png); }

.titlecat {position: relative; font-family: kiona; font-size: 30px; text-transform: uppercase; color: rgba(0,60,40,0.9); margin-left: 25px; margin-top:15px; text-align: center;}
.titlecat a {font-weight: bold; position: relative; font-family: kiona; font-size: 30px; color: #e0dede; text-transform: uppercase; margin-top:12px;  }
.titlecat a:hover {font-weight: bold; position: relative; font-family: kiona; font-size: 30px; color: #500a08; text-transform: uppercase; margin-top:12px;  }

.titlecat2 {font-family: kiona; font-size: 25px; text-transform: uppercase; color: rgba(0,60,40,0.9); margin-left: 25px; margin-top:15px; text-align: center;}
.titlecat2 a {font-family: kiona; font-size: 25px; color: #e0dede; text-transform: uppercase; margin-top:12px;  }
.titlecat2 a:hover {font-family: kiona; font-size: 25px; color: #500a08; text-transform: uppercase; margin-top:12px;  }

.dividecat {background-color: #500a08; height: 6px; width:95%; }

.scrollcat {width: 470px; height: 100px; background-color: white; margin: auto; margin-top: 5px; overflow: hidden;}

.scrollincat {width:500px; height: 140px; overflow: auto; background-color: #0f0f0f; margin:5px auto; padding:5px; font-size:9px; font-family: verdana; color: #424343; text-align: justify;}

########################
@font-face {font-family: Conthrax; src: url(https://darkest-hour.de/uploads/conthrax_sb.ttf); }

.subforumact {
	position: relative;
  background-color: #0b0b0b;
  display: inline-block;
  max-height: 50px;
	max-width: 140px;
  text-transform: uppercase;
  font: 800 7px/180% 'Arial';
  color: #fff;
  text-align: right;
  letter-spacing: 1px;
  border: solid 1px #191919;
	 padding: 3px 10px 3px 10px;
	margin-top: 7px;
opacity: 0.8;
 }

.subforumact:hover {
  background-color: #500a08;
  color: #FFF;
  background: linear-gradient(to top, #4f2416 30%, #81461f 50%,);
  border: solid 1px #191919;
}

.subforumact a:link,.subforumact a:visited, .subforumact a:active { text-decoration:none; color: #FFF;);
}

.subforumact2 {
  background-color: #121212;
  display: inline-block;
  max-height: 50px;
	max-width: 140px;
  text-transform: uppercase;
  font: 800 7px/180% 'Arial';
  color: #000;
  text-align: justify;
  letter-spacing: 1px;
  border: solid 1px #191919;
	 padding: 3px 10px 3px 10px;
 float: right;
	margin-top: 7px;
 }

.subforumact2:hover {
  background-color: #500a08;
  color: #FFF;
  background: linear-gradient(to top, #4f2416 30%, #81461f 50%,);
  border: solid 1px #191919;
}

.subforumact2 a:link,.subforumact2 a:visited, .subforumact2 a:active { text-decoration:none; color: #FFF;);
}

.jawpreach-img2 {
  top: 0px;
  left: 0px;
	margin-left: -137px;
		margin-bottom: 7px;
  width: 133px;
  height: 133px;
  border-right: solid 2px #000;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
}

.jawpreach-img3 {
float:left;
		margin-bottom: 7px;
  width: 133px;
  height: 133px;
  border-left: solid 2px #000;
clip-path: polygon(100% 38%, 0 0, 0 100%);
}

.avasindex {
	margin-top:-110px;

	height: 145px;
	float:right;
	background-size: cover;
	clip-path: polygon(100% 0%,89% 51%,100% 100%,25% 100%,0% 50%,25% 0%);
	border:3px solid #1e1d1d;
	-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: absolut;
opacity: .9;
}

.avasindex:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}

########################################

.topic-row {
    width: 900px;
    height: 80px;
    background: #191919;
	 display: table;
  margin: 18px auto; }

.topic-row::after {
    content: '';
    height: 1px;
    width: 100%;
 display: inline-block;
    background: #24231f;
    bottom: -10px;
}

.topic-marker {
    top: 0px;
    left: 0px;
    padding: 10px;
  height: 60px;
  width: 60px; }

.topic-ava {
    top: 0px;
    right: 0px;
    padding: 10px;
  height: 60px;
  width: 60px; 
filter: contrast(100%) grayscale(60%) opacity(0.7);}

.topic-marker img, .topic-ava img {
    height: 58px;
    width: 58px;
  object-size: cover;
  border: 1px solid #2c2a23;
    outline: 1px solid #2c2a23;
  outline-offset: -4px;
}

.topic-info {
  top: 0px;
    left: 75px;
    width: 450px;
    height: 50px;
    padding: 15px;
text-align: left;}

.topic-title {
    font: 400 20px 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
border-bottom: 1px solid #2c2a23;
color: #a59572; 
margin-top: -5px;
padding-bottom: 5px;}

.topic-desc, .topic-start {
    font: 400 10px/0px 'Fira Sans', sans-serif;
  display: inline-block;
    top: 5px;
  letter-spacing: 1px;
  color: #999;}

.topic-start {
  float: right;
    top: 7px;
}

.topic-start b { 
  font: 700 10px 'Calibri', sans-serif;
  text-transform: uppercase;
  color: #a59572; }

.topic-details {
  top: 0px;
    right: 80px;
    width: 300px;
    height: 50px;
    padding: 15px;
text-align: left;
border-left: 1px solid #2c2a23;
color: #aaa;
text-align: center;
font: 400 8px 'Calibri', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;}

.topic-latest {
    font: 400 15px 'Open Sans Condensed', sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
  color: #a59572; }

.topic-date {
    font-style: italic;
  margin-top: 10px;
  color: #777;
  font-weight: 700;
}

##################################

@font-face {
  font-family: Cyber;
  src: url(https://assets.codepen.io/605876/Blender-Pro-Bold.otf);
  font-display: swap;
}

.blink {
  animation: blink 1.1s linear infinite alternate;
}

@keyframes blink {
  from {opacity: 1;}
  20% {opacity: 1;}
  28% {opacity: 0;}
  72% {opacity: 0;}
  80% {opacity: 1;}
  to {opacity: 1;}
}

.threadrowdark-main {
  position: relative;
  background-color: #0b0b0b;
  width: 1000px;
  height: 90px;
  border-right: solid 10px #500a08;
  border-bottom: solid 1px #500a08;
	  border-left: solid 10px #0f0f0f;
  margin-left: 1px;
}

.threadrowdark-leftbox {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #0b0b0b;
  width: 80px;
  height: 85px;
}

.threadrowdark-icon {
  position: absolute;
  top: 20px;
  left: 15px;
  width: 50px;
  height: 50px;
  padding: 10px;
  background-image: url(https://i.imgur.com/gvVPsCE.png);
}

.threadrowdark-tagbox {
  position: absolute;
  top: 5px;
  left: 85px;
  background-color: #0b0b0b;
  width: 110px;
  height: 80px;
  border-left: solid 1px #0f0f0f;
  border-right: solid 1px #0f0f0f;
	text-align: center;
}

.threadrowdark-stats {
	padding-top: 5px;
  position: absolute;
  top: 3px;
  left: 10px;
  background-color: #0b0b0b;
  width: 85px;
  height: 15px;
  text-transform: uppercase;
  font: 800 9px/170% 'Cyber';
  color: #FFF;
  text-align: center;
  letter-spacing: 1px;
}

.threadrowdark-stats2 {
  position: absolute;
  top: 31px;
  left: 10px;
  background-color: #0b0b0b;
  width: 85px;
  height: 15px;
  text-transform: uppercase;
  font: 800 9px/170% 'Cyber';
  color: #FFF;
  text-align: center;
  letter-spacing: 1px;
    );
}

.threadrowdark-stats3 {
  position: absolute;
  bottom: 3px;
  left: 10px;
  background-color: #0b0b0b;
  width: 85px;
  height: 15px;
  text-transform: uppercase;
  font: 800 9px/170% 'Cyber';
  color: #FFF;
  text-align: center;
  letter-spacing: 1px;
	margin-bottom: 10px;
    );
	
	}

.threadrowdark-stats3 a{
 text-transform: uppercase;
  font: 800 7px/170% 'Arial';
  color: #FFF;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    );
}

.threadrowdark-middle {
  position: absolute;
  bottom: 10px;
  left: 201px;
  background-color: #0f0f0f;
  border: 1px solid #0b0b0b;
  width: 300px;
  height: 70px;
  z-index: 1;
  clip-path: 
    polygon(
      0% 0px,                 /* top left */
      0px 0%,                 /* top left */
      calc(100% - 0px) 0%,    /* top right */
      100% 0px,               /* top right */
      100% calc(100% - 0px),  /* bottom right */
      calc(100% - 0px) 100%,  /* bottom right */
      20px 100%,               /* bottom left */
      0 calc(100% - 20px)      /* bottom left */
    );
}

.threadrowdark-title {
  background-color: transparent;
  width: 255px;
	 text-transform: uppercase;
  font: 800 7px/170% 'Arial';
  color: #720906;
  text-align: center;
  line-height: 13px;
  margin-top: 10px;
  margin-left: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.threadrowdark-title a{
  background-color: transparent;
  width: 255px;
	 text-transform: uppercase;
  font: 800 9px/170% 'Arial';
  color: #a7a6a2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.threadrowdark-title a:hover{
  color: #500a08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.threadrowdark-shadow {
  position: absolute;
  left: 1px;
  bottom: 10px;
  box-shadow: 5px 10px #ce0202;
  width: 295px;
  height: 30px;
  opacity: 0.4;
}

.threadrowdark-name {
  text-transform: uppercase;
  font: 800 7px/170% 'Arial';
  color: #FFF;
  padding: 15px 10px 3px 10px;
  text-align: center;
  letter-spacing: 1px;
  margin-top: -10px;
  margin-left: 5px;
}

.threadrowdark-posticonbox {
  position: absolute;
  top: 0px;
  left: 508px;
  background-color: #0b0b0b;
  width: 80px;
  height: 100px;
  border-right: solid 1px #0f0f0f;
  border-left: solid 1px #0f0f0f;
}

.threadrowdark-right {
  position: absolute;
  top: 10px;
  right: 120px;
  background-color: #0f0f0f;
  border: 1px solid #0b0b0b;
  width: 310px;
  height: 45px;
  z-index: 1;
  clip-path: 
    polygon(
      0% 0px,                 /* top left */
      0px 0%,                 /* top left */
      calc(100% - 0px) 0%,    /* top right */
      100% 0px,               /* top right */
      100% calc(100% - 0px),  /* bottom right */
      calc(100% - 0px) 100%,  /* bottom right */
      20px 100%,               /* bottom left */
      0 calc(100% - 20px)      /* bottom left */
    );
}

.threadrowdark-desc {
  position: absolute;
  right: 120px;
	  bottom: 15px;
  background-color: #500a08;
	 text-transform: uppercase;
  font: 800 7px/170% 'Arial';
  color: #FFF;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #0f0f0f;
  width: 280px;
  height: 15px;
	  padding-left: 25px;
  text-align: left;
  clip-path: 
    polygon(
      0% 20px,                 /* top left */
      20px 0%,                 /* top left */
      calc(100% - 0px) 0%,    /* top right */
      100% 0px,               /* top right */
      100% calc(100% - 20px),  /* bottom right */
      calc(100% - 20px) 100%,  /* bottom right */
      0px 100%,               /* bottom left */
      0 calc(100% - 0px)      /* bottom left */
    );
}

.threadrowdark-lastpost {
  text-transform: uppercase;
  font: 800 7px/170% 'Arial';
  color: #FFF;
  padding: 5px 5px 5px 5px;
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
  clip-path: 
    polygon(
      0% 20px,                 /* top left */
      20px 0%,                 /* top left */
      calc(100% - 0px) 0%,    /* top right */
      100% 0px,               /* top right */
      100% calc(100% - 20px),  /* bottom right */
      calc(100% - 20px) 100%,  /* bottom right */
      0px 100%,               /* bottom left */
      0 calc(100% - 0px)      /* bottom left */
    );
}

.threadrowdark-lastpostline {
  position: absolute;
  top: -3px;
  left: 0px;
  width: 200px;
  height: 2px;
  border-bottom: solid 1px #500a08;
}

.threadrowdark-lastpostline2 {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 110px;
  height: 2px;
}

.threadrowdark-lastpostline2:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 2px;
    width: 100%;
    height: 10px;
    background-color: #500a08;
    clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
}

.threadrowdark-lastpostline2:before {
  clip-path: polygon(0px 5px, 35px 5px, 40px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 20px 10px, 15px 6px, 0px 6px);
}

.threadrowdark-imgbox {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: transparent;
	border-left: solid 1px #0f0f0f;
  width: 80px;
  height: 90px;
}

.threadrowdark-img {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 10px;
  width: 75px;
  height: 60px;
  background-color: #0f0f0f;
  border-left: solid 5px #500a08;
  border-right: solid 2px #500a08;
  border-radius: 20px;
  border-bottom: solid 2px transparent;
  border-top: solid 2px transparent;
}

.latestpost {
		padding: 2px 10px;
	}

.recent {
    width: 345px;
    height: 205px;
    overflow: hidden;
    text-align: center;
	    padding: 15px;
	width:1160px;
  column-count: 4;}
.recent span {display: inline-block; font-size:1.5em; font-weight:800;}
.recent .topics { width: 270px; opacity: 0.7; display:flex; flex-wrap:wrap; 
  background-color: #181A18;  padding-right:20px; font-size:0.8em; border-radius:5px; height:38px;  align-items: space-around;}
.topics .one {font-weight:800; width:50px; font-size:20px; align-self:center; color:#2fd689; text-align:center;}
.topics .two {flex:1;  font-family: calibri;
  color:#fff;
  text-transform:uppercase;
  font-size: 7.4px;
  text-align: right;
  margin-right:15px;
  letter-spacing:1px;}
.topics .two a {  font-family: calibri;
  color:#FA0A0A;
  text-transform:uppercase;
  font-size: 7.4px;
  text-align: right;
  margin-right:15px;
  letter-spacing:1px;}
.topics .two a:hover{opacity: 0.5; -moz-opacity: 0.5;}
.topics .two a:first-of-type {font-weight:800; font-size: 16px}
.topics .two i {background: -webkit-radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:30px;
  float:left; opacity: 0.9; z-index: -999999; padding: 5px;}

.three {  font-family: calibri;
  color:#FA0A0A;
  text-transform:uppercase;
  font-size: 7.4px;
  text-align: right;
  margin-right:15px;
  letter-spacing:1px;}


.lastscenes {
  text-transform: uppercase;
  font: 800 8px/180% 'Arial';
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  border-left: solid 1px #141414;
	  border-right: solid 1px #141414;
	  border-bottom: solid 1px #141414;
		 float: left;
	width: 200px; height:80px; margin-left:5px; margin-right:5px; padding:5px; 
	background-image: url(https://i.imgur.com/EJ2dZSC.png);
	background-size: cover;

 }

.lastscenes:hover {
  background-color: #500a08;
  color: #FFF;
  background: linear-gradient(to top, #4f2416 30%, #81461f 50%,);
  border: solid 1px #000;
}

.partnercuts {
  text-transform: uppercase;
  font: 800 10px/180% 'Arial';
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  border-left: solid 1px #141414;
	  border-right: solid 1px #141414;
	  border-bottom: solid 1px #141414;
		 float: left;
	width: 19%; margin-right:-20px; padding-left:5px; height:40px;margin-bottom:5px; padding-top:10px;
	background-image: url(https://i.imgur.com/xSUls9B.png);

 }

.partnercuts:hover {
  background-color: #500a08;
  color: #FFF;
  background: linear-gradient(to top, #4f2416 30%, #81461f 50%,);
  border: solid 1px #000;
}

.ppsearch {
  text-transform: uppercase;
  font: 800 7px/180% 'Arial';
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  border-left: solid 1px #141414;
	  border-right: solid 1px #141414;
	  border-bottom: solid 1px #141414;
		 float: left;
	width: 19%; height:70px;margin-bottom:5px; 
	background-image: url(https://i.imgur.com/wVXpAJk.png);
	white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

 }

.ppsearch:hover {
  background-color: #500a08;
  color: #FFF;
  background: linear-gradient(to top, #4f2416 30%, #81461f 50%,);
  border: solid 1px #000;
}

.wantedcut {
  text-transform: uppercase;
  font: 800 7px/200% 'Arial';
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
		 float: left;
	width: 135px; margin-right:-20px; margin-top:40px; padding-left:5px; height:45px;
	background-image: url(https://i.imgur.com/xSUls9B.png);

 }

#######################################

.accent {--accent1: #fcd995}

.forumCON {width: 100%; background-image: url(https://i.imgur.com/xSUls9B.png); height: auto; padding: 10px; margin-bottom: 15px;}

.forumBG {width: 100%; background: #000; display: flex; justify-content: space-evenly; border:2px solid var(--accent1); align-items: flex-start; flex-direction: row;}

.forumDESC { padding: 5px; text-align: justify; font-family: 'Hind', sans-serif; color: #a71612; font-size: 12px; flex-wrap: wrap; width: 250px; height: 70px; overflow: auto; align-self: center; margin-top: 20px; margin-left: -100px; }

.forumCHAR {height: 100px; width: 150px; border: 1px solid var(--accent1); align-self: flex-end; margin: 10px; margin-right: -35px;}

.forumHEAD {font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #e9e9e9; border-bottom: 1px solid var(--accent1); height: 40px; width: 200px; font-size: 35px; padding: 5px; align-self: flex-start; margin-left: -100px;}

.forumTOPIC {width:300px; font-family: 'Hind', sans-serif; font-size: 13px; color:#e9e9e9; align-self: center;  height: auto; margin-left: 20px;}

.forumTOPIC a {text-decoration: none; color: #e9e9e9; text-transform: uppercase; font-family: 'Oswald', sans-serif;}

########################################

.thecorner {
  position: relative;
  background: #191919;
  width: 500px;
  margin: 20px auto 0;
  padding-bottom: 1px;
}

.thecorneroutline {
  position: absolute;
  left: 10px;
  width: calc(100% - 20px);
  border: 1px solid #000;
  height: calc(100% - 20px);;
  top: 10px;
  z-index: 1;
}



.thecorner h1 {
  font-family: roboto;
  font-weight: 700;
  text-transform: uppercase;
  color: #bababa;
  width: 230px;
  text-align: center;
  position: relative;
  z-index: 1;
  line-height: 450%;
  font-size:10px;
  letter-spacing: 3px;
  margin: auto;
}

.thecorner h1 span {
  font-size: 23px;
  letter-spacing: 10px;
    margin-left: 10px;
}

.thecorner h1 b {
  font-weight: 800;
  letter-spacing: 12px;
  font-family: eb garamond;
  text-transform: uppercase;
  font-size: 50px;
  font-style: normal;
  display: block;
  color: #000;
  margin-left: 14px;
}

.thecornerblock {
  position: relative;
  background: rgba(59, 74, 45, 0.5);
  height: 150px;
  width: 400px;
  top: 0px;
  left: 0px;
  padding: 50px;
  text-align: center;
}

.thecorner img {
  position: absolute;
  height: 40px;
  width: 40px;
  object-fit: cover;
  border-radius: 100%;
  border: 1px solid #333;
  padding: 10px;
  left: 220px;
  bottom: -30px;
  background: #161616;
  z-index: 5;
}

.thecorner text {
  display: block;
  padding: 30px;
  text-align: justify;
  color: #ccc;
  font-family: noto sans jp;
  font-size: 12px;
  background: #151515;
  border: 1px solid #222;
  line-height: 170%;
  margin: 40px;
  z-index: 3;
}

.texttopblock {
  position: relative;
  margin: -30px;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #222;
  font-family: eb garamond;
  text-transform: lowercase;
  letter-spacing: 5px;
  color: #3b4a2d;
  font-weight:700;
  text-align: center;
  background: #111;
}

############################

.ek-box {
  width:400px;
  height:auto;
	background-image: url(https://i.imgur.com/xSUls9B.png);
	float:left;
}

.grd-tt {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:10px;
  padding-right:10px;
  padding-top:20px;
  padding-bottom:20px;
  margin-top:10px;
   background-image: url(https://i.imgur.com/g6G13C8.png);
  font-family:'Playfair Display',serif;
  text-transform:uppercase;
  color:white;
  font-size:30px;
  letter-spacing:4px;
  display:flex;
}

.tt-hist {
  margin:auto;
  font-size:20px;
  text-align:center;
  font-weight:800;
}

.ek-quote {
    font-family: 'Poppins',sans-serif;
    font-size: 10px;
    font-weight: 300;
    margin-top: 7px;
}

ti {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: -webkit-gradient(linear, left top, right bottom, from(#503130), to(#500a08));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tt-info {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 11.5px;
    text-transform: uppercase;
    background: linear-gradient(to left, #503130, #500a08);
    padding-top: 3px;
    padding-bottom: 3px;
    letter-spacing: 1px;
    margin-bottom: 10px;
  color:white;
}

/**** FIN ****/
  
  .scenariobloc {
    margin-top:7px;
    display:flex;
    flex-direction:row;
	  background-image: url(https://i.imgur.com/xSUls9B.png);
    width:100%;
    height:auto;
  }

.scenario-left {
  width:70%;
  height:260px;
  display:flex;
  flex-direction:column;
}

.info-id {
  display:flex;
  flex-direction:row;
}

.fiche-id {
  width:100%;
  background:#0f0f0f;
  height:95px;
  margin-left:5px;
  color:#bebebe;
  padding:5px;
  font-family:'Poppins',sans-serif;
  font-size:11px;
  text-align:justify;
  overflow:scroll;
	scrollbar-width: none;
}

.story-scenar {
  width:96%;
  height:260px;
background-image: url(https://i.imgur.com/xSUls9B.png);
  color:#bebebe;
  font-family:'Poppins',sans-serif;
  text-align:justify;
  font-size:11px;
  margin-top:7px;
  margin-left:0px;
  padding:5px;
  overflow:scroll;
	scrollbar-width: none;
}

.scenario-right {
background-image: url(https://i.imgur.com/xSUls9B.png);
  width:30%;
  height:260px;
  margin-left:auto;
	border-left: 2px solid #515154;
  color:#bebebe;
  font-family:'Poppins',sans-serif;
  font-size:11px;
  text-align:left;
  overflow:scroll;
	scrollbar-width: none;
}

################################

.inplaytitels {
font-size: 20px;
  font: calibri;
  letter-spacing: 0.05rem;
  color: #999898;
	 text-align: center;

}

.tinswipe-1-top {background-color: #0b0b0b; border: 1px solid #500a08; border-bottom: none; width: 240px; padding: 15px 25px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; color: #500a08; font-family: poppins; font-size: 12px; text-transform: uppercase; font-weight: 700;}
.tinswipe-1-top span {font-size: 13px; float: left; margin-right: 5px; margin-top: 1px;}
.tinswipe-1-top i {float: right; margin-top: 1px;}
.tinmatch-1-bg {background-color: #0f0f0f; background: url(https://i.imgur.com/zDO7DKt.png);border: 1px solid #0b0b0b; width: 240px; height:220px; padding: 10px;}
.tinmatch-1-txt {font-family: calibri; font-size: 10px; text-transform: uppercase; line-height: 20px;  text-align: center; margin-bottom: 10px;}
.tinmatch-1-match {font-family: poppins; font-size: 23px; color: #afafaf; font-weight: 700;}
.tinswipe-1-bg {background-color: #0b0b0b; border: 1px solid #500a08; width: 240px; padding: 25px;}
.tinmatch-1-img {display: flex; justify-content: space-between;}
.tinmatch-1-img img {-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; width: 110px; height: 110px; background-size: cover; padding:5px; border: 1px solid #0b0b0b; background-color: #000; filter: grayscale(100%) sepia(76%) brightness(65%) hue-rotate(320deg) saturate(440%) contrast(127%);
-webkit-filter: grayscale(100%) sepia(76%) brightness(65%) hue-rotate(320deg) saturate(440%) contrast(127%);
-moz-filter: grayscale(100%) sepia(76%) brightness(65%) hue-rotate(320deg) saturate(440%) contrast(127%);}
.tinmatch-heart {align-self:center;  font-size: 40px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; color: #7b81ad; }
.tinswipe-bot {background-color: #0d0d0d; border: 1px solid #0f0f0f; border-top: none; width: 240px;  margin-left:-10px;font-family: calibri; font-size: 10px; text-transform: uppercase;  text-align: left;padding: 15px 15px;margin-top:30px;}
.tinswipe-bot span {color: #7b81ad;}
.tinswipe-bot-right {display: inline-block; float: right; }
.tinswipe-bg {background-color: #0d0d0d; border: 1px solid #0f0f0f; width: 240px; padding: 25px; display: flex; justify-content: space-between;}
.tinswipe-bg img {-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; width: 70px; height: 70px; background-size: cover; margin-right: 15px; padding: 10px; border: 1px solid #dbdbdb; background-color: #FEFEFE;}
.tinswipe-det {align-self:center; font-family: cousine; font-size: 10px; text-transform: uppercase; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;  line-height: 20px; width: 180px;  text-align: center; margin-right: 15px;}
.tinswipe-name {font-family: poppins; font-size: 23px; color: #7b81ad; font-weight: 700;}
.tinswipe-icon {align-self:center;  font-size: 30px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; color: #7b81ad; }

.tbg {
    height: 60px;
    width: 240px;
    background-color: #0b0b0b;
    margin: 0 auto;
    border: 1px solid #0f0f0f;
}
.tbgwrap { padding: 10px; }
.theader { height: 15px;}
.theader i.fa-comments {
    color: #c0c0c0;
    font-size: 15px;
margin-top:10px;
    display: inline-block;
    float: right;
    padding: 10px 20px;

}
.theader i.fa-cog {
    color: #c0c0c0;
    font-size: 15px;
    display: inline-block;
    float: left;
margin-top:10px;
    padding: 10px 20px;

}
.tlogo { width: 100px; padding: 10px; }
.tlogo img { width: 100px; }

.category-head {
  font-size: 40px;
font-family: 'Montserrat', sans-serif; text-transform:uppercase;
  text-align: center;
  margin-bottom: 0px;
  margin-left: 60px;
  font-weight: 400;
  letter-spacing: 30px;
}

.wanted-head {
  font-family: var(--font4);
  font-size: 40px;
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 0px;
  margin-left: 60px;
  font-weight: 700;
  letter-spacing: 10px;
}

.recent-head {
  font-family: var(--font4);
  font-size: 40px;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 0px;
  margin-right: 500px;
  font-weight: 700;
  letter-spacing: 10px;
}