@import url('https://fonts.bunny.net/css2?family=Lato:wght@300;700&display=swap');

body {
	background:#ffffff;
	/* font-family: Lato, Arial, Helvetica, sans-serif; */
  font-family: "HumanismRegular";
	font-size:18px;
	padding-bottom:0px;
	background: url(../images/bg2.jpg) no-repeat 0px top fixed;
	background-size: cover;
}

strong {
  font-family: "HumanismBold";}

em {
  font-family: "HumanismRegularOblique";
}

strong em{
  font-family: "HumanismBoldOblique";
} 

.container {width:100%; padding:0px 20px}

.page {
	margin-top:0px;
	padding: 15px 0 15px 15px;
	font-size:18px;
	line-height:1.5em;
	font-size:1em;
	min-height: 88vh;
}

.header {
	font-size:1.5em;
	margin-top:10px;
	font-weight:400;
	line-height:1em;
}

.header .col-md-3 { padding-bottom:15px}

.text-primary { color: black }
.text-primary:hover { color:black }


.page h1 {font-size:3.5em; font-weight: bold;}
.page h2 {font-size:2.8em; font-weight: bold;}
.page h3 {font-size:2em; font-weight: bold;}
.page h4 {font-size:1.5em; font-weight: bold;}
.page h5 {font-size:1.2em; font-weight: bold;}


.navbar-inverse  {font-size:1em;color:white !important; background:black}
.navbar-brand  {font-size:1em !important;}
.navbar-inverse a, .navbar-inverse .navbar-nav > li > a {text-transform:uppercase;color:white}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:active {background:white;color:black;}
.navbar-inverse .dropdown-menu > li > a:hover, .navbar-inverse .dropdown-menu > .active > a, .navbar .dropdown-menu > .active > a:hover {background:white;color:black}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar .navbar-nav > .open > a:focus {background:white;color:black;}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-inverse .nav > li.dropdown.open.active > a:hover,
.navbar-inverse .nav > li.dropdown.open > a {background:white;color:black !important;}

.navbar-inverse .dropdown-menu > li > a, .navbar-inverse .dropdown-menu > li > a:focus,
.navbar-inverse .dropdown-menu > li > a:hover, .navbar-inverse .dropdown-menu > .active > a, .navbar .dropdown-menu > .active > a:hover { background:black; color:white !important }

.navbar-inverse .dropdown-menu {background:black;}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
	border-color:white !important;
}

#dokuwiki__content { width: 100%}
.page {
/*	column-count: 4; */
	line-height:1.3em;
	max-width:1080px;
}
.page a {color:black; text-decoration:underline;text-transform:uppercase;}
.page a:hover {background:black;color:white}
.page strong a {color:black;font-weight:normal}
.page a img {background:none}
.page img {max-width:100%;height:auto}
/* .page p { text-indent:30px } */
.secedit {display:none}
p {margin-bottom:0.3em}


textarea {width:100%}
#size__ctl {display:none}

img.medialeft {margin: 0px 20px 10px 0px;}

hr {border-top:1px solid black}

.plugin_translation { float:right;padding:9px 0px;}
.plugin_translation ul {list-style:none}
.plugin_translation ul li {float:left;padding:0px 0px}
.plugin_translation ul li a {padding:0px 3px}
.plugin_translation ul li:last-child a:before { content:"| "; float:left; display:inline;color:white	}
div.plugin_translation ul li a.wikilink1:link,
div.plugin_translation ul li a.wikilink1:visited {background:none;color:white;text-transform:uppercase}
div.plugin_translation ul li a.wikilink1:active {background:white;color:black}
div.plugin_translation ul li a.wikilink2:link,
div.plugin_translation ul li a.wikilink2:visited {background:none;color:white;text-decoration:line-through;text-transform:uppercase}
div.plugin_translation ul li a.wikilink1.cur,
div.plugin_translation ul li a.wikilink2:hover,
div.plugin_translation ul li a.wikilink1:hover {background:white;color:black;text-transform:uppercase}


#tag {
	text-align:left;
	text-transform:uppercase;
	margin:15px 0px;
	font-size:10px;
	max-width:1080px;
	background-color:#fbfbfb;
	padding-left: 5px;
/*	background: rgba(255,255,255,0.5)*/
}

.headerimg {
	width: 100%;
  max-width:1080px;
  background-color:#fbfbfb;
  padding-left: 5px;
  /* background: rgba(255,255,255,0.5)*/
}

.dropdown-menu {
    font-size: 0.9em;
}


video {
	max-width:100%;
}

:target:before {
    content: "";
    display: block;
    height: 180px;
    margin: -140px 0 0;
}



/* --------------------------------------- */

.page p {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 10px 5px;
	line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "HumanismBold";
	column-break-before: column;
	color: white !important;
 	background-color: none;
	text-shadow: 1px 1px 20px #666666;
	letter-spacing:5px;
	font-weight:bold;
	margin-bottom: 0.5em;

	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}


.wrap_intro  {
  font-family: "HumanismBold";
	font-size: 2em;
	font-weight: bold;
	line-height: 0.9em;
	letter-spacing: .2em;
	position: absolute;
	bottom: 0px;
	text-shadow: 1px 1px 20px #666666;
	animation: glitch 1s linear infinite;
}

.wrap_large {
  font-family: "HumanismBold";
	font-size: 3em;
	line-height: 1em;
	font-weight: bold;
	letter-spacing: .1em;
	text-shadow: 1px 1px 20px #666666;
	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.wrap_intro p, .wrap_large p {
	color: white;
	background: none !important;
	line-height: 1em !important;
}

.wrap_intro .wrap_large  {
	line-height: 0.8em
}


@media(max-width:761px){
	.wrap_intro {
		font-size: 1.5em;
    padding-bottom: 3.5em;
	}
	.wrap_large  {
		font-size: 1.7em
	}
	.page  { padding: 0px;}
	.page  p { 	padding: 10px 0px }
}


@media(max-width:461px){
	.page h1 {font-size:2em; font-weight: bold;}
	.page h2 {font-size:1.7em; font-weight: bold;}
	.page h3 {font-size:1.5em; font-weight: bold;}
	.page h4 {font-size:1.3em; font-weight: bold;}
	.page h5 {font-size:1.1em; font-weight: bold;}
  
	.wrap_intro {
		font-size: 1.1em;
	}
	.wrap_large  {
		font-size: 1.5em
	}  
}



@keyframes glitch {
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg);
  }
}

.wrap_intro:before,
.wrap_intro:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

.wrap_intro:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}


@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg);
  }
}

.wrap_intro:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg);
  }
}




@keyframes textflicker {
  from {
    transform: translate(-1px,0);
  }
  to {
    transform: translate(0px,0);
  }
}

@keyframes textflicker2 {
  from {
    transform: translate(0px,-1px);
  }
  to {
    transform: translate(0,0);
  }
}


/*



.wrap_intro {
  color: white;
  animation: glitch-skew 0.5s infinite linear alternate-reverse;
}
.wrap_intro::after {
  content: attr(data-text);
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(30px, 9999px, 42px, 0);
    transform: skew(0.85deg);
  }
  5% {
    clip: rect(59px, 9999px, 21px, 0);
    transform: skew(0.34deg);
  }
  10% {
    clip: rect(99px, 9999px, 15px, 0);
    transform: skew(0.01deg);
  }
  15% {
    clip: rect(25px, 9999px, 61px, 0);
    transform: skew(0.97deg);
  }
  20% {
    clip: rect(35px, 9999px, 42px, 0);
    transform: skew(0.94deg);
  }
  25% {
    clip: rect(39px, 9999px, 62px, 0);
    transform: skew(0.31deg);
  }
  30% {
    clip: rect(62px, 9999px, 55px, 0);
    transform: skew(0.9deg);
  }
  35% {
    clip: rect(36px, 9999px, 31px, 0);
    transform: skew(0.13deg);
  }
  40% {
    clip: rect(27px, 9999px, 26px, 0);
    transform: skew(0.01deg);
  }
  45% {
    clip: rect(55px, 9999px, 9px, 0);
    transform: skew(0.5deg);
  }
  50% {
    clip: rect(69px, 9999px, 73px, 0);
    transform: skew(0.85deg);
  }
  55% {
    clip: rect(53px, 9999px, 89px, 0);
    transform: skew(0.15deg);
  }
  60% {
    clip: rect(20px, 9999px, 28px, 0);
    transform: skew(0.62deg);
  }
  65% {
    clip: rect(81px, 9999px, 28px, 0);
    transform: skew(0.1deg);
  }
  70% {
    clip: rect(54px, 9999px, 93px, 0);
    transform: skew(0.3deg);
  }
  75% {
    clip: rect(22px, 9999px, 6px, 0);
    transform: skew(0.84deg);
  }
  80% {
    clip: rect(23px, 9999px, 5px, 0);
    transform: skew(0.55deg);
  }
  85% {
    clip: rect(24px, 9999px, 76px, 0);
    transform: skew(0.68deg);
  }
  90% {
    clip: rect(3px, 9999px, 29px, 0);
    transform: skew(0.48deg);
  }
  95% {
    clip: rect(43px, 9999px, 95px, 0);
    transform: skew(0.37deg);
  }
  100% {
    clip: rect(58px, 9999px, 66px, 0);
    transform: skew(0.05deg);
  }
}
@keyframes glitch-anim2 {
  0% {
    clip: rect(66px, 9999px, 28px, 0);
    transform: skew(0.12deg);
  }
  5% {
    clip: rect(85px, 9999px, 40px, 0);
    transform: skew(0.7deg);
  }
  10% {
    clip: rect(14px, 9999px, 33px, 0);
    transform: skew(0.81deg);
  }
  15% {
    clip: rect(48px, 9999px, 76px, 0);
    transform: skew(0.57deg);
  }
  20% {
    clip: rect(77px, 9999px, 16px, 0);
    transform: skew(0.4deg);
  }
  25% {
    clip: rect(15px, 9999px, 43px, 0);
    transform: skew(0.27deg);
  }
  30% {
    clip: rect(33px, 9999px, 11px, 0);
    transform: skew(0.84deg);
  }
  35% {
    clip: rect(50px, 9999px, 51px, 0);
    transform: skew(0.16deg);
  }
  40% {
    clip: rect(52px, 9999px, 11px, 0);
    transform: skew(0.21deg);
  }
  45% {
    clip: rect(39px, 9999px, 58px, 0);
    transform: skew(0.98deg);
  }
  50% {
    clip: rect(88px, 9999px, 42px, 0);
    transform: skew(0.42deg);
  }
  55% {
    clip: rect(98px, 9999px, 11px, 0);
    transform: skew(0.51deg);
  }
  60% {
    clip: rect(73px, 9999px, 73px, 0);
    transform: skew(0.81deg);
  }
  65% {
    clip: rect(82px, 9999px, 59px, 0);
    transform: skew(1deg);
  }
  70% {
    clip: rect(64px, 9999px, 84px, 0);
    transform: skew(0.94deg);
  }
  75% {
    clip: rect(41px, 9999px, 44px, 0);
    transform: skew(0.38deg);
  }
  80% {
    clip: rect(23px, 9999px, 35px, 0);
    transform: skew(0.54deg);
  }
  85% {
    clip: rect(20px, 9999px, 100px, 0);
    transform: skew(0.76deg);
  }
  90% {
    clip: rect(9px, 9999px, 96px, 0);
    transform: skew(0.64deg);
  }
  95% {
    clip: rect(29px, 9999px, 82px, 0);
    transform: skew(0.47deg);
  }
  100% {
    clip: rect(15px, 9999px, 94px, 0);
    transform: skew(0.76deg);
  }
}
@keyframes glitch-skew {
  0% {
    transform: skew(2deg);
  }
  10% {
    transform: skew(4deg);
  }
  20% {
    transform: skew(4deg);
  }
  30% {
    transform: skew(-2deg);
  }
  40% {
    transform: skew(4deg);
  }
  50% {
    transform: skew(2deg);
  }
  60% {
    transform: skew(-3deg);
  }
  70% {
    transform: skew(-1deg);
  }
  80% {
    transform: skew(-3deg);
  }
  90% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(-2deg);
  }
}
*/