/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html,body{ 
	width:100%;
	height:100%;
	background:#1a1a1a;
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 75% Arial, Helvetica, sans-serif;
  background-color: #1a1a1a !important;
}

.bg-dark,
nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark {
    background-color: #000 !important;
}

canvas{
  display:block;
  vertical-align:bottom;
}

a {
    color: #999 !important;
    text-decoration: none;
}

a:hover {
    color: #fff !important;
    text-decoration: none;
}

.user_register_intro {
    width: 70%;
    top: 20%;
    display: block;
    position: absolute;
    text-align: center;
    margin-left: 15%;
}

h1_haut {
    font-size: 7.7vw;
    font-weight: bold;
    line-height: 1.2;
    color: rgba(255,255,255,0.70);
}

.invite_page {
    font-size: 2vw;
    font-weight: bold;
    line-height: 25px;
    color: rgba(255,255,255,0.70);
    text-align: center;
    margin-top:1vw;
}

img.home {
    width: 35%;
    -webkit-filter: drop-shadow(1px 1px 1px #fff);
    filter: drop-shadow(1px 1px 1px #fff);
}

.offcanvas-end {
    top: 0;
    right: 0;
    width: 400px;
    border-left: 1px solid rgba(80,80,80,.8) !important;
    transform: translateX(100%);
}

.offcanvas {
    background-color: #1a1a1a !important;
}

.offcanvas-header {
	background:#9f0000;
}

.dropdown-item.active {
    color: #fff !important;
    background-color: #3e3e3e !important;
    border-radius: 5px;
    font-weight: bold;
}

a.dropdown-item:hover {
    color: #fff !important;
    background-color: #3e3e3e !important;
    border-radius: 5px;
}

#footer_tcb {
    background: #000;
    height: 40px;
    padding-top: 10px;
    position: fixed !important;
    color: #9F9F9F;
    border-top: none;
    font-size: 1vw;
    bottom: 0;
    width: 100%;
}

#copyright {
    display: block;
    position: absolute;
    left: 20px;
}

#footer_menu {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    right: 20px;
    display: block;
    position: absolute;
    text-align: right;
    float: right;
}

/* ---- stats.js ---- */

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}


/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  background-image: url('https://huby.infozoo.de/ZILLA/zilla.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* ---- Start Tabs HTML ---- */

.tabs {
	 left: 50%;
	 -webkit-transform: translateX(-50%);
	         transform: translateX(-50%);
	 position: relative;
	 background: rgba(0,0,0,0.5);
	 padding: 20px 50px;
	 width: 90%;
	 border-radius: 5px;
	 min-width: 240px;
     min-height: 250px;
    overflow: auto;
    margin-top: 35px;
}
 .tabs input[name="tab-control"] {
	 display: none;
}
 .tabs .content section h2, .tabs ul li label {
	 font-size: 1.35vw;
	 color: #febc06;
}
 .tabs ul {
	 list-style-type: none;
	 padding-left: 0;
	 display: -webkit-box;
	 display: flex;
	 -webkit-box-orient: horizontal;
	 -webkit-box-direction: normal;
	         flex-direction: row;
	 margin-bottom: 10px;
	 -webkit-box-pack: justify;
	         justify-content: space-between;
	 -webkit-box-align: end;
	         align-items: flex-end;
	 flex-wrap: wrap;
}
 .tabs ul li {
	 box-sizing: border-box;
	 -webkit-box-flex: 1;
	         flex: 1;
	 width: 25%;
	 padding: 0 10px;
	 text-align: center;
}
 .tabs ul li label {
	 -webkit-transition: all 0.3s ease-in-out;
	 transition: all 0.3s ease-in-out;
	 color: #9F9F9F;
	 padding: 5px auto;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 display: block;
	 cursor: pointer;
	 -webkit-transition: all 0.2s ease-in-out;
	 transition: all 0.2s ease-in-out;
	 white-space: nowrap;
	 -webkit-touch-callout: none;
     user-select: none;
}
 .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
	 outline: 0;
	 color: #bec5cf;
}

 .tabs .slider {
	 position: relative;
	 width: 25%;
	 -webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
	 transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
 .tabs .slider .indicator {
	 position: relative;
	 width: 50%;
	 max-width: 100%;
	 margin: 0 auto;
	 height: 4px;
	 background: #d0009c;
	 border-radius: 1px;
}
 .tabs .content {
	 margin-top: 30px;
}
 .tabs .content section {
	 display: none;
	 -webkit-animation-name: content;
	         animation-name: content;
	 -webkit-animation-direction: normal;
	         animation-direction: normal;
	 -webkit-animation-duration: 0.3s;
	         animation-duration: 0.3s;
	 -webkit-animation-timing-function: ease-in-out;
	         animation-timing-function: ease-in-out;
	 -webkit-animation-iteration-count: 1;
	         animation-iteration-count: 1;
	 line-height: 1.4;
}

 .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
	 cursor: default;
	 color: #d0009c;
}

@media (max-width: 600px) {
	 .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
		 background: rgba(0, 0, 0, 0.08);
	}
}
 .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
	 -webkit-transform: translateX(0%);
	         transform: translateX(0%);
}
 .tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
	 display: block;
}
 .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
	 cursor: default;
	 color: #d0009c;
}

@media (max-width: 600px) {
	 .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
		 background: rgba(0, 0, 0, 0.08);
	}
}
 .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
	 -webkit-transform: translateX(100%);
	         transform: translateX(100%);
}
 .tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
	 display: block;
}
 .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
	 cursor: default;
	 color: #d0009c;
}

@media (max-width: 600px) {
	 .tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
		 background: rgba(0, 0, 0, 0.08);
	}
}
 .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
	 -webkit-transform: translateX(200%);
	         transform: translateX(200%);
}
 .tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
	 display: block;
}
 .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
	 cursor: default;
	 color: #d0009c;
}

@media (max-width: 600px) {
	 .tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
		 background: rgba(0, 0, 0, 0.08);
	}
}
 .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
	 -webkit-transform: translateX(300%);
	         transform: translateX(300%);
}
 .tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
	 display: block;
}
 @-webkit-keyframes content {
	 from {
		 opacity: 0;
		 -webkit-transform: translateY(5%);
		         transform: translateY(5%);
	}
	 to {
		 opacity: 1;
		 -webkit-transform: translateY(0%);
		         transform: translateY(0%);
	}
}
 @keyframes content {
	 from {
		 opacity: 0;
		 -webkit-transform: translateY(5%);
		         transform: translateY(5%);
	}
	 to {
		 opacity: 1;
		 -webkit-transform: translateY(0%);
		         transform: translateY(0%);
	}
}
@media (max-width: 1000px) {
	 .tabs ul li label {
		 white-space: initial;
	}
}

@media (max-width: 960px) {

	.user_register_intro {
    top: 15%;
	}

	.tabs {
    width: 95%;
    margin-top: 25px;
	}
	
	.tabs .content {
    margin-top: 20px;
	}
	
	.tabs .content section h2, .tabs ul li label {
    font-size: 1.45vw;
	}
	
}

@media (max-width: 920px) {
	
	#footer_tcb {
    font-size: 1.4vw;
	}
	
	.tabs {
    margin-top: 15px;
    width:100%
	}
	
	img.home {
    width: 45%;
    }

}

@media (max-width: 640px) {
	
	.user_register_intro {
    width: 90%;
    top: 20%;
    display: block;
    position: absolute;
    text-align: center;
    margin-left: 5%;
	}
	
	h1_haut {
    font-size: 10.7vw;
    }
    
    .invite_page {
    font-size: 2.65vw;
    }
	
	.tabs .content section h2, .tabs ul li label {
    font-size: 4vw;
    }
	
	img.home {
    width: 85%;
    }
    
    #footer_tcb {
    font-size: 1.75vw;
    }
	
}

@media (max-width: 420px) {

	.user_register_intro {
    top: 10%;
	}
	
	.tabs ul {
    margin-bottom: 5px;
    }

    .tabs .content {
    margin-top: 10px;
    }
	
	img.home {
    width: 90%;
    }
    
    #footer_tcb {
    font-size: 3vw;
    height: 55px;
    }
    
    #copyright {
    display: block;
    position: absolute;
    left: auto;
    width: 100%;
    text-align: center;
    }
    
    #footer_menu {
    margin: 15px 0px 0px 0px;
    padding: 0px;
    list-style-type: none;
    right: auto;
    display: block;
    position: relative;
    text-align: center;
    float: left;
    width: 100%;
    }
    
}

@media (max-width: 380px) {
	
	p {
    font-size: 0.75rem;
    }

}