@charset "utf-8";
/* CSS Document */
:root {
  --template-link-color: #ee0001 !important;
  --bs-red: #ee0001 !important;
}

*, html, body, a {
    scroll-behavior: smooth !important;
}

/*#######################_visibility: hidden_###########################################*/
#sp-logo,
.sp-megamenu-parent,
#sp-top-bar,
#sp-top1,
.article-ratings-social-share,
#sp-main-body,
.error-code,
.error-message,
.sp-scroll-up
.coming-soon-login {
visibility: hidden !important; 
display: none !important; 
width: 0px !important; 
height: 0px !important; 
padding: 0px !important; 
margin: 0px !important;
}

@media screen and (max-width: 501px){
.hidden-phone {
visibility: hidden;
width: 0px !important;
height: 0px !important;
display: none !important; 
}
}
/*##################################################################*/
html.error-page body {
	width: 100%;
	height: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: 100% 100%;
    background-size: cover;
}

html.error-page body {
  height: auto !important;
  background-color: #000616 !important;
}

#offcanvas-toggler {z-index: 500000000000000000000000000 !important;}
/*##################################################################*/
nobr {
  white-space: nowrap !important;
}

.border-bottom {
  border-bottom: 1px dotted rgba(255,255,255, 0.75) !important;
}

.btn-secondary {
  display: block !important;
  position: absolute !important;
  color: #FFFFFF!important;
  margin: auto auto 11px auto !important;
  background-color: #000616 !important;
  border: 1px groove #000616 !important;
  bottom: 0px  !important;
  right: 0px  !important;
  left: 0px  !important;
  width: 131px !important;
  -webkit-transition: all 1.5s linear !important;
  -moz-transition: all 1.5s linear !important;
  -ms-transition: all 1.5s linear !important;
  -o-transition: all 1.5s linear !important;
  transition: all 1.5s linear !important;
}

.btn-secondary:hover {
  color: #FFFFFF!important;
  background-color: rgba(0,6,22, 0.25) !important;
  border: 1px groove #FFFFFF !important;
  -moz-box-shadow: 0px 0px 33px rgba(255,255,255, 0.75) !important;
  -webkit-box-shadow: 0px 0px 33px rgba(255,255,255, 0.75) !important;
  box-shadow: 0px 0px 33px rgba(255,255,255, 0.75) !important;
  -webkit-transition: all 1s linear !important;
  -moz-transition: all 1s linear !important;
  -ms-transition: all 1s linear !important;
  -o-transition: all 1s linear !important;
  transition: all 1s linear !important;
}

.offcanvas-overlay {
  background: rgba(50,50,50, 0.8)!important;
}

.offcanvas-menu {
  z-index: 1000000000000000 !important;
}
#sp-top {padding: 0px !important;}

/*
@media screen and (max-width: 501px){
#sp-section-1 {
	margin: 50px auto 0px auto !important;
}
}*/

#sp-header {
  display: block !important;
  position: fixed !important;
  background-color: #323232 !important;
  margin: 0px auto !important;
  padding: 0px !important;
  top: 0px !important;
  height: auto !important;
  max-height: 60px !important;
}

#mod-custom117 {
  background-image: none !important; 
}

.burger-icon {
  display: block !important;
  background-color: #FFFFFF !important;
  width: 33px !important;
  cursor: pointer !important;
  border: 6px solid #FFFFFF !important;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  top: 0px !important;
}

ol {
  margin-top: 3% !important;
  overflow: hidden !important;
}

body {
  font-size: 16px !important;
  letter-spacing: 0.025em !important;
  line-height: 1.125em !important;
  color: #000616!important;
  font-weight: 400 !important;
  padding-bottom: 0px !important;
  background-image: url("/images/pics/HG.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 100% 100%;
  margin: 0px auto 0px auto !important;
  border-right: 1px groove rgba(255,255,255, 0.25) !important;
  animation: einblenden 2.5s;
    -moz-animation: einblenden 2s; /* Für Firefox */
    -webkit-animation: einblenden 2s; /* Für Safari und Chrome */
    -o-animation: einblenden 2s; /* Für Opera */
}

@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
}

@-moz-keyframes einblenden { /* Für Firefox */
    from { opacity:0; }
    to { opacity:1; }
}

@-webkit-keyframes einblenden { /* Für Safari und Chrome */
    from { opacity:0; }
    to { opacity:1; }
}

@-o-keyframes einblenden { /* Für Opera */
    from { opacity:0; }
    to { opacity:1; }
}

#sp-footer, #sp-bottom {
  background-image: url("/images/pics/BG.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 100% 100%;
  margin: 0px auto 0px auto !important;
  border-right: 1px solid #323232 !important;
  color: #FFFFFF!important;
  padding: 6% 0px 6% 0px !important;
}

.float {
  float: left !important;
}

@media screen and (max-width: 501px){
.float  {
  float: none !important;
  clear: both!important;
  margin: 0px auto 33px auto !important;
}
}

strong {
  font-weight: 400;
  font-size: 111% !important;
  text-shadow: 1px 1px 1px rgba(0,6,22, 0.5) !important;
  letter-spacing: 0.075em;
}

.nobr {
  white-space: nowrap !important;
}

#sp-title {
  position: relative !important;
  top: 0px !important;
  height: auto !important;
}

.shadow {
-moz-box-shadow: 0px 0px 22px rgba(50,50,50, 0.25) !important;
-webkit-box-shadow: 0px 0px 22px rgba(50,50,50, 0.25) !important;
box-shadow: 0px 0px 22px rgba(50,50,50, 0.25) !important;
}

.shadow1 {
-moz-box-shadow: 0px 0px 88px rgba(255,255,255, 0.25) !important;
-webkit-box-shadow: 0px 0px 88px rgba(255,255,255, 0.25) !important;
box-shadow: 0px 0px 88px rgba(255,255,255, 0.25) !important;
}

.shadow2 {
-moz-box-shadow: 0px 0px 44px rgba(255,255,255, 0.5) !important;
-webkit-box-shadow: 0px 0px 44px rgba(255,255,255, 0.5) !important;
box-shadow: 0px 0px 44px rgba(255,255,255, 0.5) !important;
}

.shadow3 {
-moz-box-shadow: 0px 0px 55px rgba(255,255,255, 0.95) !important;
-webkit-box-shadow: 0px 0px 55px rgba(255,255,255, 0.95) !important;
box-shadow: 0px 0px 55px rgba(255,255,255, 0.95) !important;
}

.shadow4 {
-moz-box-shadow: 0px 0px 22px rgba(50,50,50, 0.95) !important;
-webkit-box-shadow: 0px 0px 22px rgba(50,50,50, 0.95) !important;
box-shadow: 0px 0px 22px rgba(50,50,50, 0.95) !important;
}

.shadow5 {
-moz-box-shadow: 0px 0px 111px rgba(255,255,255, 0.5) !important;
-webkit-box-shadow: 0px 0px 111px rgba(255,255,255, 0.5) !important;
box-shadow: 0px 0px 111px rgba(255,255,255, 0.5) !important;
}

.shadow6 {
-moz-box-shadow: 0px 0px 88px rgba(0, 49, 157, 0.5) !important;
-webkit-box-shadow: 0px 0px 88px rgba(0, 49, 157, 0.5) !important;
box-shadow: 0px 0px 88px rgba(0, 49, 157, 0.5) !important;
}

.shadow7 {
-moz-box-shadow: 0px 0px 22px rgba(50,50,50, 0.25) !important;
-webkit-box-shadow: 0px 0px 22px rgba(50,50,50, 0.25) !important;
box-shadow: 0px 0px 22px rgba(50,50,50, 0.25) !important;
}

.shadow8 {
-moz-box-shadow: 0px 0px 44px rgba(50,50,50, 0.15) !important;
-webkit-box-shadow: 0px 0px 44px rgba(50,50,50, 0.15) !important;
box-shadow: 0px 0px 44px rgba(50,50,50, 0.15) !important;
}

.shadow9 {
-moz-box-shadow: 0px 0px 44px rgba(50,50,50, 0.5) !important;
-webkit-box-shadow: 0px 0px 44px rgba(50,50,50, 0.5) !important;
box-shadow: 0px 0px 44px rgba(50,50,50, 0.5) !important;
}


hr {
  margin: 13px auto;
  color: inherit;
  border: 0;
  border-top-width: 0px;
  border-top-style: none;
  border-top-color: rgba(50,50,50, 0.5) !important;
  border-top: 1px dotted !important;
  opacity: 1 !important;
  width: 100% !important;
}

.hr2 {
  margin: 13px auto;
  color: inherit;
  border: 0;
  border-top-width: 0px;
  border-top-style: none;
  border-top-color: rgba(255,255,255, 0.5) !important;
  border-top: 1px dotted !important;
  opacity: 1 !important;
  width: 100% !important;
}
/*################################################################*/
a {
  color: #000616 !important;
  	-webkit-transition: all 1.5s linear;
	-moz-transition: all 1.5s linear;
	-ms-transition: all 1.5s linear;
	-o-transition: all 1.5s linear;
	transition: all 1.5s linear;
  cursor: url("/images/pics/CURSOR.svg") 16 16, pointer !important;
}

a:hover {
text-shadow: 0px -1px 1px rgba(0,6,22, 0.125), 0 1px 1px #FFFFFF;
  	-webkit-transition: all 0.75s linear;
	-moz-transition: all 0.75s linear;
	-ms-transition: all 0.75s linear;
	-o-transition: all 0.75s linear;
	transition: all 0.75s linear;
}
/*################################################################*/

h1 {
  font-size: 1.25em !important;
  font-weight: 400 !important;
  letter-spacing: 0.075em !important;
  padding-bottom: 9px !important;
  border-bottom: 0px dotted rgba(50,50,50, 0) !important;
  margin: 33px auto 6px auto;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(0,6,22, 0.5) !important;
}

h1::before {
  content: '#';
  padding-right: 6px;
  font-weight: 600 !important;
}

h2 {
  font-size: 1.25em !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  padding-bottom: 9px !important;
  border-bottom: 0px dotted rgba(50,50,50, 0) !important;
  margin: 3% auto;
  text-align: left;
  text-shadow: 1px 1px 2px rgba(0,6,22, 0.5) !important;
}

h2::before, h3::before {
	content: '#';
	padding-right: 6px !important;
	font-weight: 700 !important;
    font-family: 'Verdana', sans-serif !important;
	font-size: 1.15em !important;
}

h3 {
  font-size: 1.1em !important;
  font-weight: 400 !important;
  letter-spacing: 0.075em !important;
  padding-bottom: 9px !important;
  border-bottom: 0px dotted rgba(50,50,50, 0) !important;
  margin: 3% auto 6px auto;
  text-align: left;
}


h4 {
  font-size: 1em !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  padding-bottom: 9px !important;
  border-bottom: 0px dotted rgba(50,50,50, 0) !important;
  margin: 3% auto 6px auto;
  text-align: left;
}

@media screen and (max-width: 501px){
h1, h2, h3, h4, h5, h6  {
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  padding-bottom: 9px !important;
  border-bottom: 0px dotted rgba(50,50,50, 0) !important;
}
}

small {
  font-size: 12px !important;
  line-height: 10px !important;
  letter-spacing: 0.1em !important;
}

.small {
  display: block !important;
  width: 100% !important;
  margin: 0px auto 6px 0px;
  font-size: 12px !important;
  line-height: 14px !important;
  letter-spacing: 0.075em !important;
}

.iCON {
  display: inline !important;
  position: relative !important;
  width: 33px !important;
  padding: 6px !important;
  border: 1px solid #323232 !important;
    -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.iCON_SMALL {
  display: inline !important;
  position: relative !important;
  width: 22px !important;
  margin-right: 11px !important;
}
/*##################################################################*/
.blink {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 1.25s; 
    animation-iteration-count: infinite;
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0;}
    100% { opacity: 1; }    
}

.blink2 {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: infinite;
}

@keyframes animation_blink2 {
    0% { opacity: 1; }
    50% { opacity: 0.5;}
    100% { opacity: 1; }    
}

.blink3 {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2.5s; 
    animation-iteration-count: infinite;
}

@keyframes animation_blink3 {
    0% { opacity: 1;}
    50% { opacity: 0.75;}
    100% { opacity: 1;}    
}

.anime { animation: turner 4s infinite linear }

@keyframes turner{
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
}
/*##################################################################*/
.case {
  display: block !important; 
  margin: 0px auto 22px auto; 
  border: 1px solid #323232 !important; 
  padding: 9% 6%;
  background-color: #FFFFFF !important;
  overflow: hidden !important;
}

.case img {
  max-width: 100%;
  height: auto;
  border: 1px solid #323232;
  	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
  	-webkit-transition: all 1.5s linear;
	-moz-transition: all 1.5s linear;
	-ms-transition: all 1.5s linear;
	-o-transition: all 1.5s linear;
	transition: all 1.5s linear;
    -webkit-filter: grayscale(0.25);
    filter: grayscale(0.25);
}

.case:hover img {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
  	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

@media screen and (max-width: 768px){
.case  {
  max-width: 323px !important;
}
}

@media screen and (max-width: 501px){
.case  {
  max-width: 88% !important;
}
}
/*##################################################################*/
#sp-header div.container {
	width: 100% !important;
	max-width: 100% !important;
}

#sp-menu .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
  width: 100% !important;
}

/*
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	max-width: 100% !important;
}*/

.offcanvas-menu {
	background-color: rgba(50,50,50, 0.95) !important;
	color: #FFFFFF !important;
}

.offcanvas-menu .offcanvas-inner {
	padding: 25px 11px !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li a {
  font-size: 12px !important;
  letter-spacing: 0.005em !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255, 0.5) !important;
  padding: 6px !important;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
	border-top: 1px solid rgba(255,255,255, 0.5) !important;
	border-right: 1px solid rgba(255,255,255, 0.5) !important;
	border-bottom: 2px solid rgba(255,255,255, 0.5) !important;
	border-left: 2px solid rgba(255,255,255, 0.75) !important;
	-moz-box-shadow: 0px 0px 18px rgba(255,255,255, 0) !important;
	-webkit-box-shadow: 0px 0px 18px rgba(255,255,255, 0) !important;
	box-shadow: 0px 0px 18px rgba(255,255,255, 0) !important;
  opacity: 1 !important;
  color: #FFFFFF !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
	color: #FFFFFF !important;
    padding-left: 11px !important;
}

.MENU-iCON {
  display: inline !important;
  vertical-align: middle !important;
  width: 18px !important;
  line-height: 22px !important;
  color: #FFFFFF !important;
  padding-bottom: 5px !important;
}

.MENU-iCON2 {
  display: inline !important;
  margin-right: -6px !important;
  vertical-align: middle !important;
  width: 44px !important;
  line-height: 44px !important;
  
  color: #FFFFFF !important;
  padding-bottom: 0px !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
	color: #FFFFFF !important;
}

span.nav-header,
span.nav-header:hover {
  font-size: 12px !important;
  color: #FFFFFF !important;
  cursor: default !important;
  opacity: 1 !important;
  border-bottom: 1px dotted rgba(255,255,255, 0.75) !important;
}
/*##################################################################*/
.border-top {
  border-top: 1px dotted #FFFFFF !important;
}
/*##################################################################*/
ul li {
  text-align: left !important;
  padding: 4px 0px !important;
}
/*##################################################################*/

/*##################################################################*/
details {
  display: inline-block;
  color: #FFFFFF;
  padding: 1.5% 0px 0px 0px;
  background: rgba(255,255,255, 0);
  width: 303px;
  max-width: 100%;
}

summary {
  display: block !important;
  width: 303px;
  max-width: 100% !important;
  cursor: pointer; 
  padding: 1rem; 
  letter-spacing: 0.125em;
  list-style-type: none !important;
  border-bottom: 1px dotted rgba(255,255,255, 0.75) !important;
}

.case2 {padding: 3% 0px;}

details[open] summary ~ * {animation: sweep 1.7s ease-in-out;}
details[close] summary ~ * {animation: sweep 1.7s ease-in-out;}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -200px}
  100%  {opacity: 1; margin-left: 0px}
}

summary::before {
  width: 33px !important;
  display: inline-block !important;
  padding-right: .5rem;
  content: '+';
  font-size: 1.75em !important;
  font-weight: bolder;
}

details[open] summary::before {
  width: 33px !important;
  display: inline-block !important;
  padding-right: .5rem;
  content: '-';
  font-size: 1.75em !important;
  font-weight: bolder;
}
/*##################################################################*/
.SHADOW-iNSET {
	box-shadow: inset 0px 0px 66px 33px rgba(50,50,50, 0.75) !important;
}

.SHADOW-iNSET2 {
	box-shadow: inset 0px 0px 66px 33px rgba(255,255,255, 0.25) !important;
}

.SHADOW-iNSET3 {
	box-shadow: inset 0px 0px 33px 11px rgba(50,50,50, 0.05) !important;
}
/*##################################################################*/

/*##################################################################*/
#sp-position10,
#sp-position11,
#sp-position13,
#sp-position14,
#sp-position16,
#sp-position21 {
  padding: 0px 3% 3% 3% !important;
}

@media screen and (max-width: 501px){
#sp-position10,
#sp-position11,
#sp-position13,
#sp-position14,
#sp-position16,
#sp-position21   {
  padding: 0px 9% 6% 9% !important;
}
}
/*##################################################################*/
button {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px !important;
	margin: 11px auto 11px auto;
	box-sizing: border-box;
	color: #FFFFFF !important;
	background-color: #323232;
	padding: 11px 22px;
    line-height: 1.5em !important;
	text-align: center;
	border: 1px solid #323232;
	-webkit-transition: all 2.5s ease;
	-moz-transition: all 2.5s ease;
	transition: all 2.5s ease;
	opacity: 1;
}

button:hover {
	background-color: #FFFFFF !important;
	color: #323232 !important;
	border: 1px solid #323232;
	-moz-box-shadow: 0px 0px 18px rgba(0,6,22, 0.5);
	-webkit-box-shadow: 0px 0px 18px rgba(0,6,22, 0.5);
	box-shadow: 0px 0px 18px rgba(0,6,22, 0.5);
	opacity: .75;
	filter: alpha(opacity=75);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
}

.button2 {
	display: block;
  float: right !important;
	font-size: 16px !important;
  line-height: 1em !important;
  font-weight: bold !important;
	margin: 0px auto;
	box-sizing: border-box;
  width: 22px;
  height: 22px;
	color: #323232 !important;
  border: 1px solid #323232;
	background-color: #FFFFFF;
	padding: 2px 5px 3px 7px !important;
	text-align: center;
	-webkit-transition: all 2.5s ease;
	-moz-transition: all 2.5s ease;
	transition: all 2.5s ease;
    -webkit-border-radius: 100%;
  -moz-border-radius: 100%; 
  border-radius: 100%;
}

.button2:hover {
	background-color: #323232 !important;
	color: #FFFFFF !important;
	border: 1px solid #323232;
	-moz-box-shadow: 0px 0px 6px rgba(50,50,50, 0.5);
	-webkit-box-shadow: 0px 0px 6px rgba(50,50,50, 0.5);
	box-shadow: 0px 0px 6px rgba(50,50,50, 0.5);
	opacity: .75;
	filter: alpha(opacity=75);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
}
/*##################################################################*/
.BLACK-BOX-TOP {
  display: block;
  position: fixed !important;
  top: 0px !important;
  left: 0px;
  right: 0px;
  margin: 60px auto 0px auto !important;
  box-sizing: border-box;
  background-color: #323232;
  color: #FFFFFF;
  width: 100%;
  text-align: center !important;
  padding: 14px 11px 14px 11px !important;
  font-size: 12px;
  line-height: 12px !important;
  border-left: 1px groove #323232 !important;
  border-top: 1px groove rgba(255,255,255, 0.5) !important;
  border-bottom: 1px groove rgba(255,255,255, 0.5) !important;
  border-right: 1px groove #323232 !important;
  z-index: 555 !important;
}

@media screen and (max-width: 501px){
.BLACK-BOX-TOP  {
margin-top: 60px !important;
min-width: 100% !important;
/*position: sticky !important;*/
z-index: 5 !important;
}
}
/*##################################################################*/
.mod-whosonline {
	display: block;
	margin: 0px !important;
	max-width: 100% !important;
	padding: 55px 0px 11px 0px !important;
	font-size: 0.8em;
	letter-spacing: 0.025em;
	text-align: center;
	color: #FFFFFF !important;
	border-top: 1px dotted rgba(255,255,255, 0.5);
}
/*##################################################################*/
.list-group-item {
	position: relative;
	display: block;
  margin: 0px auto !important;
	padding: 44px 1% 0px 1%;
	color: #FFFFFF;
	text-decoration: none;
  text-align: center !important;
  background-color: rgba(50,50,50, 0) !important;
  border: 0px rgba(50,50,50, 0) !important;
	font-size: 0.85em;
	text-align: center;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
  max-width: 303px;
}

.rounded-pill {
	border-radius: 0rem !important;
}

.bg-secondary {
	position: relative;
	display: block;
	font-size: 1.5em;
	font-weight: normal !important;
	letter-spacing: 0.25em;
	margin: 11px auto 3% auto;
	max-width: 222px;
	float: none !important;
	clear: both !important;
  background-color: rgba(50,50,50, 0) !important;
}
/*##################################################################*/
#redim-cookiehint-modal {
  background-color: rgba(0,6,22, 0.9) !important;
  padding: 22px !important;
}

#redim-cookiehint {
	box-sizing: border-box;
	font-size: 1em !important;
	line-height: 1.1em !important;
	font-weight: normal !important;
	-moz-box-shadow: 0px 0px 88px rgba(255,255,255, 0.125) !important;
	-webkit-box-shadow: 0px 0px 88px rgba(255,255,255, 0.125) !important;
	box-shadow: 0px 0px 88px rgba(255,255,255, 0.125) !important;
	background-color: #FFFFFF !important;
	color: #323232 !important;
	padding: 22px !important;
	max-width: 303px !important;
	border: 1px solid #323232 !important;
}

#redim-cookiehint .cookiehead {
  margin-bottom: 22px !important;
  border-bottom: 1px dotted #323232 !important;
}

#redim-cookiehint .cookiehead {
  display: inline-block;
  text-align: justify;
  font-size: 16px !important;
  line-height: 1em !important;
  letter-spacing: 0.03em !important;
}

#redim-cookiehint .cookiebuttons a.btn {
	text-decoration: none !important;
	background-image: none !important;
}

#redim-cookiehint .cookiebuttons {
	padding: 0px !important;
}

#redim-cookiehint .cookiebuttons .btn, #redim-cookiehint .cookiebuttons button {
	font-size: 12px !important;
	line-height: 1.125em !important;
	cursor: pointer;
	display: block;
	padding: 12px 8px !important;
	text-align: center;
	min-width: 47.5% !important;
	float: left !important;
	margin: 0px 1.25% 0px 1.25% !important;
	box-sizing: border-box;
}

#cookiehintsubmit:hover, #cookiehintsubmitno:hover {
	background: #FFFFFF !important;
	color: #323232 !important;
}

.cookiecontent p {
  font-size: 12px !important;
  text-align: justify !important;
  line-height: 14px !important;
  letter-spacing: 0.005em !important;
}

#redim-cookiehint .cookiebuttons .btn {
	color: #FFFFFF !important;
	background-color: #323232 !important;
  -webkit-transition: all 2.5s ease !important;
  -moz-transition: all 2.5s ease !important;
  transition: all 2.5s ease !important;
  border: 1px solid #323232 !important;
}

#redim-cookiehint .cookiebuttons .btn:hover {
	background-color: #FFFFFF !important;
	color: #323232 !important;
  -webkit-transition: all 1.5s ease !important;
  -moz-transition: all 1.5s ease !important;
  transition: all 1.5s ease !important;
  border: 1px solid #323232 !important;
}
/*##################################################################*/
/*.case2 {
  display: block; 
  width: auto; 
  max-width: 100%; 
  margin: 22px auto 0px auto!important;
  color: #FFFFFF;
  font-weight: 300 !important;
  overflow: hidden !important;
  padding: 11px !important;
}*/

.case3 {
  display: block; 
  width: 353px; 
  max-width: 88%; 
  margin: 88px auto 88px auto !important;
  padding: 3% 3% 3% 3%;
  color: #FFFFFF;
  font-weight: 300 !important;
  border: 2px groove  #FFFFFF !important;
  background-image: linear-gradient(45deg, rgba(50,50,50, 0.95) 0%, rgba(50,50,50, 0.5) 55%, rgba(50,50,50, 0.025) 95%);
}

@media screen and (max-width: 501px){
.case3 {
  padding: 11px !important;
}
}
/*##################################################################*/
.copy {
  display: block;
  margin: 3% auto 6% auto;
  padding: 6% 6% 0px 6%;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	font-size: 0.75em !important;
  color: #FFFFFF !important;
  border-top: 1px dotted rgba(255,255,255, 0.5);
}
/*##################################################################*/
.case4 {
  display: block;
  position: relative;
  margin: -12% -3% 6% auto;
  right: 0px;
  width: 99px; 
  padding: 3% 11px 33px 11px;
  background-color: #323232;
  border: 1px groove rgba(50,50,50, 0.5) !important;
  -webkit-border-radius: 0px 0px 9px 9px;
  -moz-border-radius: 0px 0px 9px 9px;
  border-radius: 0px 0px 9px 9px;
  top: 0px !important;
}

@media screen and (max-width: 501px){
.case4 {
-webkit-transform: scale(0.35)!important;
-moz-transform: scale(0.35)!important;
-ms-transform: scale(0.35)!important;
-o-transform: scale(0.35)!important;
transform: scale(0.35)!important;
  margin: -26% -33px 3% auto;
}
}
/*##################################################################*/
.ue {
	display: block;
	font-size: 1.125em;
	letter-spacing: 0.15em;
	font-weight: 400;
	text-transform: none;
	padding-bottom: 11px;
	margin: 22px auto 11px 0px;
	text-align: left !important;
}

@media screen and (max-width: 501px){
.ue {
  font-size: 1em !important;
  letter-spacing: 0.1em !important;
}
}

.blue {
	width: 100% !important;
	margin: 22px 0px 22px 0px !important;
	border: 0;
	border-top: 1px dotted rgba(50,50,50, 0.75) !important;
	opacity: 1 !important;
}
/*##################################################################*/
.DOKUMENT {
  display: block; 
  margin: 33px auto 33px auto;
  width: 100%;
}

.DOKUMENT a {
  color: #323232 !important;
}

.DOKUMENT a:hover {
  color: rgba(50,50,50, 0.5);
}

@media screen and (max-width: 501px){
.DOKUMENT {
  padding: 6% 3% !important;
-webkit-filter: drop-shadow(5px 5px 6px rgba(50,50,50, 0.125));
filter: drop-shadow(11px 11px 0.5rem rgba(50,50,50, 0.125));
}
}
/*##################################################################*/
button3 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px !important;
	margin: 33px auto 22px auto;
	box-sizing: border-box;
  width: 131px;
	color: #FFFFFF !important;
	background-color: rgba(50,50,50, 0.75) !important;
	padding: 9px 11px;
  line-height: 1.5em !important;
	text-align: center;
	border: 1px solid rgba(255,255,255, 0.75) !important;
	-webkit-transition: all 2.5s ease;
	-moz-transition: all 2.5s ease;
	transition: all 2.5s ease;
}

button3:hover {
	background-color: #FF0000 !important;
	color: #FFFFFF !important;
	border: 1px solid #FF0000 !important;
	-moz-box-shadow: 0px 0px 111px #FF0000;
	-webkit-box-shadow: 0px 0px 111px #FF0000;
	box-shadow: 0px 0px 111px #FF0000;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
}
/*##################################################################*/
button4, .button4 {
  display: block !important;
  position: relative;
  left: 0px;
  font-size: 14px !important;
  margin: 0px auto !important;
  box-sizing: border-box;
  width: 313px;
  max-width: 98% !important;
  color: #FFFFFF !important;
  background-color: #323232!important;
  padding: 22px 22px;
  line-height: 1.125em !important;
  text-align: center;
  border: 1px solid rgba(255,255,255, 0.75) !important;
  -webkit-transition: all 2.5s ease;
  -moz-transition: all 2.5s ease;
  transition: all 2.5s ease;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
border-radius: 3px !important;
}

button4:hover, .button4:hover {
	background-color: rgba(50,50,50, 0.5) !important;
	color: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
	-moz-box-shadow: 0px 0px 111px rgba(255,255,255, 0.5);
	-webkit-box-shadow: 0px 0px 111px rgba(255,255,255, 0.5);
	box-shadow: 0px 0px 111px rgba(255,255,255, 0.5);
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	transition: all 1.5s ease;
}

@media screen and (max-width: 501px){
button4, .button4 {
display: block !important;
left: 0px !important;
width: 98% !important;
font-size: 12px !important;
}
}
/*##################################################################*/
/*##################################################################*/
.BOXBOX {
  display: block;
  position: relative;
  width: 100% !important;
  text-align: center !important; 
  margin: 0px auto 0px auto !important; 
  background-color: #323232;
  padding: 11px 0px 11px 0px !important; 
  line-height:44px; 
  color: #FFFFFF; 
}

@media screen and (max-width: 501px){
.BOXBOX  {
  padding: 6px 0px 6px 0px !important;
  line-height:22px!important;
  max-width: 100% !important;
  letter-spacing: 0.05em !important;
}
}
/*##################################################################*/
#arrowAnim {
  width: 33px;
  height: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #FFFFFF;
-webkit-border-radius: 100%;
-moz-border-radius: 100%; 
border-radius: 100%;
-webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  transition: all 2s ease;
}

.arrow {
  width: 9px;
  height: 9px;
  border: 2px solid;
  border-color:#FFFFFF transparent transparent #FFFFFF;
  transform: rotate(-225deg);
  margin-left: -6px;
}

#arrowAnim:hover {
  border: 2px solid #FF0000 !important;
  background-color: #FF0000 !important;
  -webkit-transition: all 1.25s ease;
  -moz-transition: all 1.25s ease;
  transition: all 1.25s ease;
}

.arrowSliding {
  position: absolute;
  -webkit-animation: slide 2s linear infinite; 
          animation: slide 2s linear infinite;
}

.delay1 {
  -webkit-animation-delay: 1s; 
    animation-delay: 1s;
}
.delay2 {
  -webkit-animation-delay: 1.5s; 
    animation-delay: 1.5s;
}
.delay3 {
  -webkit-animation-delay: 2s; 
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(-11px); }	
   20% { opacity:1; transform: translateX(-0px); }	
   80% { opacity:1; transform: translateX(0px); }	
  100% { opacity:0; transform: translateX(11px); }	
}
@keyframes slide {
    0% { opacity:0; transform: translateX(-11px); }	
   20% { opacity:1; transform: translateX(-0px); }	
   80% { opacity:1; transform: translateX(0px); }	
  100% { opacity:0; transform: translateX(11px); }	
}
/*##################################################################*/
/*##################################################################*/
a.scrolly {
box-sizing: content-box;
position: fixed;
right: 22px;
text-align: center;
bottom: 22px!important;  
width: 44px!important;
height: 44px !important;
z-index: 1000;
top: inherit;
border: 3px solid #FFFFFF;
transition: all 1.5s linear 0s;
background-color: #323232 !important;
border-radius: 100px;
cursor: pointer;
text-decoration: none !important;
scroll-behavior: smooth !important;
-webkit-transform: scale(0.85)!important;
-moz-transform: scale(0.85)!important;
-ms-transform: scale(0.85)!important;
-o-transform: scale(0.85)!important;
transform: scale(0.85)!important;
}

.scrolly img {
  display: inline;
  margin: 9px auto 3px auto;
  width: 60% !important;
  opacity: 1 !important;
}

.scrolly:hover, 
.scrolly:active, 
.scrolly:focus {
  background: #e5001d !important;
  border: 3px solid #e5001d !important;
  transition: all 0.75s linear 0s;
}

a.HOME {
box-sizing: content-box;
position: fixed;
left: 22px;
text-align: center;
bottom: 22px!important;
width: 44px!important;
height: 44px !important;
z-index: 1000;
top: inherit;
border: 3px solid #FFFFFF;
transition: all 1.5s linear 0s;
background-color: #323232 !important;
border-radius: 100px;
cursor: pointer;
text-decoration: none !important;
scroll-behavior: smooth !important;
-webkit-transform: scale(0.85)!important;
-moz-transform: scale(0.85)!important;
-ms-transform: scale(0.85)!important;
-o-transform: scale(0.85)!important;
transform: scale(0.85)!important;
}

.HOME img {
  display: inline;
  margin: 6px auto;
  width: 60% !important;
  opacity: 1 !important;
}

.HOME:hover, 
.HOME:active, 
.HOME:focus {
  background: #e5001d !important;
  border: 3px solid #e5001d !important;
  transition: all 0.75s linear 0s;
}

@media screen and (max-width: 501px){
a.scrolly  {
right: 11px !important;
bottom: 11px!important;
-webkit-transform: scale(0.7)!important;
-moz-transform: scale(0.7)!important;
-ms-transform: scale(0.7)!important;
-o-transform: scale(0.7)!important;
transform: scale(0.7)!important;
}
}

@media screen and (max-width: 501px){
a.HOME  {
left: 11px !important;
bottom: 11px!important;
-webkit-transform: scale(0.7)!important;
-moz-transform: scale(0.7)!important;
-ms-transform: scale(0.7)!important;
-o-transform: scale(0.7)!important;
transform: scale(0.7)!important;
}
}
/*##################################################################*/
.opacity {
  opacity: 0.85;
}

.opacity:hover {
  opacity: 1;
-webkit-filter: drop-shadow(5px 5px 22px #FFFFFF);
filter: drop-shadow(0 0 3rem #FFFFFF);
}

.looper { animation: perspect 8s infinite linear }
@keyframes perspect {
   0% {transform:perspective(300px) rotateY(0deg)}
   25% {transform:perspective(300px) rotateY(90deg)}
   50% {transform:perspective(300px) rotateY(180deg)}
   75% {transform:perspective(300px) rotateY(270deg)}
   100% {transform:perspective(300px) rotateY(360deg)}
}

/*##################################################################*/
.text {
  font-size: 16px !important;
  letter-spacing: 0.025em !important;
  line-height: 1.125em !important;
  font-weight: 400 !important;
}

@media screen and (max-width: 501px){
.text  {
  font-size: 14px !important;
  letter-spacing: 0.005em !important;
  line-height: 1.25em !important;
}
}

.text-small {
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  line-height: 1em !important;
}

/*##################################################################*/
#sp-user1 h3,
#sp-user2 h3,
#sp-user3 h3,
#sp-user4 h3,
#sp-digi-1 h3,
#sp-digi-2 h3,
#sp-digi-3 h3,
.case h3,
#mod-custom133 h3,
#sp-bottom3 h3 {
  border-bottom: 1px dotted #323232 !important; 
  padding-bottom: 11px !important; 
  font-size: 16px !important;
  letter-spacing: 0.0125em !important;
  margin-bottom: 22px !important;
  font-weight: 400 !important;
  text-shadow: 1px 1px 2px rgba(50,50,50, 0.25);
}

#sp-user1 h3::before,
#sp-user2 h3::before,
#sp-user3 h3::before,
#sp-user4 h3::before {
  content: '';
  padding-right: 0px;
}

@media screen and (max-width: 501px){
#sp-user1 h3,
#sp-user2 h3,
#sp-user3 h3,
#sp-user4 h3,
#sp-digi-1 h3,
#sp-digi-2 h3,
#sp-digi-3 h3,
.case h3,
#mod-custom133 h3,
#sp-bottom3 h3  {
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  padding-bottom: 9px !important;
  width: 100% !important;
  text-shadow: 0px -1px 0px #323232, 0px 0px 1px #FFFFFF;
}
}
/*##################################################################*/
.BLUE-BOX {
  display: block; 
  margin: 9% auto; 
  width: 202px;  
  padding: 0px; 
  color: #FFFFFF !important;  
  background-image: linear-gradient(45deg, rgba(0,6,22, 0.95) 0%, rgba(0,6,22, 0.5) 55%, rgba(0,6,22, 0.025) 95%); border: 6px groove rgba(255,255,255, 0);
-moz-box-shadow: 0px 0px 77px rgba(40, 155, 236, 1) !important;
-webkit-box-shadow: 0px 0px 77px rgba(40, 155, 236, 1) !important;
box-shadow: 0px 0px 77px rgba(40, 155, 236, 1) !important;
}

@media screen and (max-width: 501px){
.BLUE-BOX  {
  max-width: 101px !important;
  margin: 12% auto !important;
}
}
/*##################################################################*/
.RED {
	display: inline-block;
	position: absolute;
	top: 0px;
	width: 18px;
	height: 18px;
	margin: 3px auto 0px 7px;
	font-size: 10px !important;
	line-height: 13px;
	text-align: center;
	padding: 3px 0px 0px 0px;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	z-index: 50000000;
	background-color: #ce001a;
	color: #FFFFFF;
	-moz-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	-webkit-transform: rotate(1deg);
	transform: rotate(1deg);
}
/*##################################################################*/
.gradient {
  background: #323232;
  background: linear-gradient(-45deg, #323232 0%, #08162e 50.125%, #08162e 50.13%, #323232 );
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
  width: 100%;
	height: 44px;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/*##################################################################*/
.case6 {
  display: block;
  position: relative;
  margin: 0px auto 0px auto;
  text-align: justify !important;
  width: 585px;
  max-width: 88%;
  padding: 33px 55px;
  border: 1px groove rgba(0,6,22, 0.5);
  overflow: hidden !important;
  clear: both;
  background-color: #FFFFFF;
}

@media screen and (max-width: 501px){
.case6 {
	padding: 66px 22px !important;
}
}
/*######################################################################*/
/*######################################################################*/
*, *:before, *:after {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
 }

.mouse_scroll {
  display: block;
  margin: -82px auto 1px auto !important;
  position: relative;
  width: 44px;
  height: 66px;
  padding: 11px 5px 0px 0px;
  z-index: 22;
  -webkit-transition: all 1.5s linear !important;
  -moz-transition: all 1.5s linear !important;
  -ms-transition: all 1.5s linear !important;
  -o-transition: all 1.5s linear !important;
  transition: all 1.5s linear !important;
  -webkit-border-radius: 11px 11px 0px 0px;
  -moz-border-radius: 11px 11px 0px 0px;
  border-radius: 11px 11px 0px 0px;
  border-top: 3px groove #FFFFFF;
  border-right: 3px groove #FFFFFF;
  border-left: 3px groove #FFFFFF;
  background-color: rgba(50,50,50, 0.75);
-moz-box-shadow: 0px 0px 88px rgba(50,50,50, 0.75) !important;
-webkit-box-shadow: 0px 0px 88px rgba(50,50,50, 0.75) !important;
box-shadow: 0px 0px 88px rgba(50,50,50, 0.75) !important; 
}

.mouse_scroll:hover {
-moz-box-shadow: 0px 0px 88px #FFFFFF !important;
-webkit-box-shadow: 0px 0px 88px #FFFFFF !important;
box-shadow: 0px 0px 88px #FFFFFF !important;
  -webkit-transition: all 0.5s linear !important;
  -moz-transition: all 0.5s linear !important;
  -ms-transition: all 0.5s linear !important;
  -o-transition: all 0.5s linear !important;
  transition: all 0.5s linear !important;
background-color: rgba(50,50,50, 0.5);  
}

.m_scroll_arrows {
  display: block;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  border-right: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
  margin: 0px 0px 3px 4px;
  width: 9px;
  height: 9px;
}

.unu {
  margin-top: 3px;
}

.unu, .doi, .trei {
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
}

.unu {
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  animation-delay: .2s;
  animation-direction: alternate;
  margin-top: 1px;
}

.trei {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  animation-delay: .3s;
  animation-direction: alternate;  
  margin-top: 1px;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel {
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-o-keyframes mouse-wheel {
   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@keyframes mouse-wheel {
   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {
  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {
  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
/*##################################################################*/
.opacity2 {
  opacity: 1;
  -webkit-transition: all 1.25s linear !important;
  -moz-transition: all 1.25s linear !important;
  -ms-transition: all 1.25s linear !important;
  -o-transition: all 1.25s linear !important;
  transition: all 1.25s linear !important;
}

.opacity2:hover {
  opacity: 0.85;
  -webkit-transition: all 0.5s linear !important;
  -moz-transition: all 0.5s linear !important;
  -ms-transition: all 0.5s linear !important;
  -o-transition: all 0.5s linear !important;
  transition: all 0.5s linear !important;
-moz-box-shadow: 0px 0px 88px #323232 !important;
-webkit-box-shadow: 0px 0px 88px #323232 !important;
box-shadow: 0px 0px 88px #323232 !important;
}
/*##################################################################*/
.SORRY {
  display: block;
  position: sticky;
  width: 500px; 
  max-width: 88%;
  height: 181px;
  max-height: 88%;
  margin: 6% auto;
  padding: 0px !important;
  /*background-color: #FFFFFF;*/
  cursor: grab !important;
}

.SORRY:hover .turnaround { 
  transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */
}

.SORRY .front { 
  background: url(/images/pics/TEXT.svg) 0 0 no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF !important;
}

.SORRY .back {
  background: url(/images/pics/SORRY.svg) 0 0 no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  bottom: 0px !important;
}

@media screen and (max-width: 501px){
.SORRY  {
  width: 292px !important;
  height: 111px !important;
}
}

.turnaround {
   transition: 1.5s /* Die Drehung soll 0,5 Sekunden dauern */;
   transform-style: preserve-3d; /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
   position: relative;
   height: 100%;
}

.front,
.back {
   backface-visibility: hidden /* Die Rückseite von Elementen soll unsichtbar sein */;
   position: absolute;
   width: 100%;
   height: 100%;
  border: 1px groove rgba(50,50,50, 0.5);
}

.front {z-index: 2;}

.back {
   transform: rotateY(180deg) /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
   z-index: 1;
}
/*##################################################################*/
.TEAM {
  display: block;
  position: relative;
  margin: 11px 1.5% 3% 0px;
  text-align: center;
  padding: 22px 33px;
  border: 1px solid #323232;
  min-width: 202px;
  width: 22.5%;
  max-width: 100%;
  overflow: hidden; 
  background-color: #FFFFFF !important;
}
/*##################################################################*/
/*##################################################################*/
.bigger {
  	-webkit-transform: scale(1) !important;
	-moz-transform: scale(1) !important;
	-ms-transform: scale(1) !important;
	-o-transform: scale(1) !important;
	transform: scale(1) !important;

  	-webkit-transition: all 1.75s linear !important;
	-moz-transition: all 1.75s linear !important;
	-ms-transition: all 1.75s linear !important;
	-o-transition: all 1.75s linear !important;
	transition: all 1.75s linear !important;
-webkit-filter: drop-shadow(5px 5px 88px #FFFFFF) !important;
filter: drop-shadow(0 0 7rem #FFFFFF) !important;
  z-index: 500;
}

.bigger:Hover {
  height: auto;
  	-webkit-transform: scale(1.25) !important;
	-moz-transform: scale(1.25) !important;
	-ms-transform: scale(1.25) !important;
	-o-transform: scale(1.25) !important;
	transform: scale(1.25) !important;
  	-webkit-transition: all 0.5s linear !important;
	-moz-transition: all 0.5s linear !important;
	-ms-transition: all 0.5s linear !important;
	-o-transition: all 0.5s linear !important;
	transition: all 0.5s linear !important;
-webkit-filter: drop-shadow(5px 5px 88px #FF0000) !important;
filter: drop-shadow(0 0 7rem #FF0000) !important;
z-index: 50000000 !important;
}

.bigger2 {
-webkit-transition: all 1.5s linear;
-moz-transition: all 1.5s linear;
-ms-transition: all 1.5s linear;
-o-transition: all 1.5s linear;
transition: all 1.5s linear;
}

.bigger2:hover {
-webkit-transform: scale(1.5)!important;
-moz-transform: scale(1.5)!important;
-ms-transform: scale(1.5)!important;
-o-transform: scale(1.5)!important;
transform: scale(1.5)!important;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-filter: drop-shadow(5px 5px 22px #FFFFFF) !important;
filter: drop-shadow(0 0 3rem #FFFFFFF) !important;
}

.bigger3 {
  	-webkit-transform: scale(1) !important;
	-moz-transform: scale(1) !important;
	-ms-transform: scale(1) !important;
	-o-transform: scale(1) !important;
	transform: scale(1) !important;

  	-webkit-transition: all 1.75s linear !important;
	-moz-transition: all 1.75s linear !important;
	-ms-transition: all 1.75s linear !important;
	-o-transition: all 1.75s linear !important;
	transition: all 1.75s linear !important;
/*-webkit-filter: drop-shadow(5px 5px 88px #FFFFFF) !important;
filter: drop-shadow(0 0 7rem #FFFFFF) !important;*/
  z-index: 500;
}

.bigger3:hover {
  height: auto;
  	-webkit-transform: scale(1.25) !important;
	-moz-transform: scale(1.25) !important;
	-ms-transform: scale(1.25) !important;
	-o-transform: scale(1.25) !important;
	transform: scale(1.25) !important;
  	-webkit-transition: all 0.5s linear !important;
	-moz-transition: all 0.5s linear !important;
	-ms-transition: all 0.5s linear !important;
	-o-transition: all 0.5s linear !important;
	transition: all 0.5s linear !important;
z-index: 50000000 !important;
}

/*##################################################################*/
.rotare {
animation: turner 4s infinite linear;
    animation-name: turner;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-timeline: ;
}

@keyframes turner{
0% {
  transform: perspective(300px) rotateY(0deg);
}
25% {
  transform: perspective(300px) rotateY(90deg);
}
50% {
  transform: perspective(300px) rotateY(180deg);
}
75% {
  transform: perspective(300px) rotateY(270deg);
}
100% {
  transform: perspective(300px) rotateY(360deg);
}
}
/*##################################################################*/
.THREE-BOX {
  display: block;
  float: left;
  padding: 33px; 
  width: 30%; 
  max-width: 88%;
  min-height: 252px;
  margin: 0px 21px 6% 21px;
  position: relative; 
  box-sizing: border-box; 
  border: 1px groove rgba(50,50,50, 0.5); 
  overflow: hidden;
  background-color: rgba(255,255,255, 0.5);
}

@media screen and (max-width: 501px){
.THREE-BOX {
  width: 100% !important;
  float: none !important;
  clear: both;
  margin: 0px auto 6% auto !important;
}
}
/*##################################################################*/
nobr, .nobr {
  white-space: nowrap !important;
}
/*##################################################################*/
.SMALL-iCON {
  -moz-transform: scale(0.5) !important;
  -ms-transform: scale(0.5) !important;
  -o-transform: scale(0.5) !important;
  transform: scale(0.5) !important;
  display: block !important;
  position: absolute !important;
  top: 0px; margin: -38px 0px 6% auto;
  background-color: #e5001d !important;
  border: 1px groove #e5001d !important;
-moz-transform: scale(0.5)!important;
-ms-transform: scale(0.5)!important;
-o-transform: scale(0.5)!important;
transform: scale(0.5)!important;
"
}

@media screen and (max-width: 501px){
.SMALL-iCON {
  -moz-transform: scale(0.25) !important;
  -ms-transform: scale(0.25) !important;
  -o-transform: scale(0.25) !important;
  transform: scale(0.25) !important;
  top: 0px; margin: -55px 0px -9% auto;
}
}

.SMALL-iCON-BLACK {
  -moz-transform: scale(0.5) !important;
  -ms-transform: scale(0.5) !important;
  -o-transform: scale(0.5) !important;
  transform: scale(0.5) !important;
  display: block !important;
  position: relative !important;
  top: 0px; 
  margin: -10% -33px 0px auto;
  background-color: ##323232 !important;
  border: 1px groove #323232 !important;
-moz-transform: scale(0.5)!important;
-ms-transform: scale(0.5)!important;
-o-transform: scale(0.5)!important;
transform: scale(0.5)!important;
"
}

@media screen and (max-width: 501px){
.SMALL-iCON-BLACK {
  -moz-transform: scale(0.25) !important;
  -ms-transform: scale(0.25) !important;
  -o-transform: scale(0.25) !important;
  transform: scale(0.25) !important;
  top: 0px; margin: -60px -44px -55px auto;
}
}
/*##################################################################*/
.OPACiTY {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
	-webkit-transition: all 3s ease;
	-moz-transition: all 3s ease;
	transition: all 3s ease;
-webkit-transform: scale(0.75)!important;
-moz-transform: scale(0.75)!important;
-ms-transform: scale(0.75)!important;
-o-transform: scale(0.75)!important;
transform: scale(0.75)!important;
background-color: rgba(50,50,50, 0) !important;
-moz-box-shadow: 0px 0px 111px rgba(50,50,50, 0)!important;
-webkit-box-shadow: 0px 0px 111px rgba(50,50,50, 0)!important;
box-shadow: 0px 0px 111px rgba(50,50,50, 0)!important;
}

.OPACiTY:hover {
filter: alpha(opacity=1);
-moz-opacity: 1; 
opacity: 1;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
transition: all 1.5s ease;
-webkit-transform: scale(1)!important;
-moz-transform: scale(1)!important;
-ms-transform: scale(1)!important;
-o-transform: scale(1)!important;
transform: scale(1)!important;
-moz-box-shadow: 0px 0px 111px rgba(255,255,255, 0.25)!important;
-webkit-box-shadow: 0px 0px 111px rgba(255,255,255, 0.25) !important;
box-shadow: 0px 0px 111px rgba(255,255,255, 0.25) !important;
}
/*##################################################################*/
li.item-105,
li.item-109,
li.item-111,
li.item-112 {
  margin-left: 11px !important;
}
/*##################################################################*/
.case2 {
  display: block; 
  margin: 0px auto 55px auto !important; 
  border: 1px solid #323232 !important; 
  padding: 9% !important;
  background-color: #FFFFFF !important;
  overflow: hidden !important;
}

.case2 img {
  display: block; 
  width: 77px;
  height: auto;
  margin: 6% auto 9% auto;
  padding: 0px !important;
  background-color: #FFFFFF !important;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

@media screen and (max-width: 501px){
.case2  {
  max-width: 88% !important;
}
}

.case2 h3 {
  border-bottom: 1px dotted #323232 !important; 
  padding-bottom: 11px !important; 
  font-size: 14px !important;
  letter-spacing: 0.0125em !important;
  margin-bottom: 22px !important;
  font-weight: 400 !important;
  text-shadow: 1px 1px 2px rgba(50,50,50, 0.25) !important;
}

.case2 h3::before {
content: '#';
  padding-right: 6px !important;
  font-weight: 700 !important;
  font-family: 'Helvetica', sans-serif !important;
  font-size: 1.15em !important;
}
}
/*##################################################################*/
img {background-color: rgba(50,50,50, 0) !important;}
/*##################################################################*/
/*##################################################################*/
.offline-message {
  display: flex;   justify-content: center;   align-items: center;
  position: relative;
  margin: 0px auto;
  top: 0px !important;
  bottom: 0px !important;
  box-sizing: content-box;
  left: 0px !important;
  right: 0px  !important;
  padding: 22px !important;
  background-color: rgba(50,50,50, 0.5);
  color: #FFFFFF;
  width: 242px !important;
  max-width: 292px;
  text-align: justify;
  -moz-box-shadow: 0px 0px 131px rgba(67, 241, 251, 1) !important;
  -webkit-box-shadow: 0px 0px 131px rgba(67, 241, 251, 1) !important;
  box-shadow: 0px 0px 131px rgba(67, 241, 251, 1) !important;
  line-height: 1.125em;
}
/*##################################################################*/
/*######################################################################*/
/*############################_SCROLLBAR_###############################*/

 /* width */
::-webkit-scrollbar {
  width: 25px !important;
  max-width: 25px !important;
  min-width: 25px !important;
  max-height: 11% !important;
  margin-left: 3px !important;
}

/* Track */
::-webkit-scrollbar-track-piece {
  box-shadow: inset 0 0 5px #ee0001 !important;
  border-radius: 10px!important;
  border: 3px groove #323232 !important;
  padding: 20px!important;
  border-left: 1px solid #ee0001 !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ee0001 !important;
  max-height: 6px !important;
  border-radius: 10px!important;
} 

::-webkit-scrollbar-thumb:vertical {
  max-height: 6px!important;
  background: #ee0001 !important;
  border-radius: 10px!important;
}

.scroller {
  overflow-y: scroll;
  scrollbar-color:  #ee0001 #323232 !important;
  border-radius: 10px!important;
  scroll-behavior: smooth !important;
}

/* Thin Scrollbar */
:root {
  scrollbar-color: #ee0001 #323232 !important;
  scrollbar-width: thin !important;
  border-radius: 10px!important;
}

@media (prefers-reduced-motion: reduce) {
	.smooth-scroll-area {
    scroll-behavior: smooth !important;
	}
}
/*##################################################################*/
.fill {
  margin: 0px auto !important;
  object-fit: contain !important;
  width: 88% !important;
  height: 88% !important;
}
/*##################################################################*/
.rotate {transform:rotate(-7deg) !important;}
.rotate:hover {transform:rotate(0deg) !important;}
/*##################################################################*/

tbody, td, tfoot, th, thead, tr {
  border-color: rgba(50,50,50, 0) !important;
  border-style: dotted !important;
  border-width: 1px !important;
}

td {
  padding: 9px 2px 6px 2px !important;
}

.MEDiBOX {
  display: block;
  margin: 3% auto;
  padding: 44px 33px 0px 33px;
  background-color: rgba(212,215,220, 0.05);
  border: 1px groove #323232;
  width: 100%;
  overflow: hidden !important;
}

.MEDiBOX td {
  padding: 9px 15px 9px 15px !important;
}

@media screen and (max-width: 501px){
.MEDiBOX {
    padding: 11px !important;
}
}
/*##################################################################*/
.SiGNATUR {
  display: block;
  width: 222px !important;
  margin: 3% auto;
  background-color: #FFFFFF !important;
  color: #000616;
  padding: 18px;
  text-align: center !important;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #000616;
}
/*##################################################################*/
.btn-success {
  background-color: rgba(50,50,50, 0.5); !important;
  letter-spacing: 0.15em !important;
  border: 1px solid #000616 !important;
  -webkit-transition: all 1.5s linear !important;
  -moz-transition: all 1.5s linear !important;
  -ms-transition: all 1.5s linear !important;
  -o-transition: all 1.5s linear !important;
  transition: all 1.5s linear !important;
}

.btn:hover {
  background-color: rgba(50,50,50, 0.75); !important;
  -webkit-transition: all 0.75s linear !important;
  -moz-transition: all 0.75s linear !important;
  -ms-transition: all 0.75s linear !important;
  -o-transition: all 0.75s linear !important;
  transition: all 0.75s linear !important;
}
/*##################################################################*/
.OPA {
  opacity: 1 !important;
}

.OPA:hover {
  opacity: 0.75 !important;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); 
}
/*##################################################################*/
.REDBOX {
  display: block !important;
  position: relative;
  margin: 6% auto 0px auto;
  padding: 33px;
  background-color: #cc0c0d;
  color: #FFFFFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  text-align: justify !important;
  font-size: 14px !important;
  line-height: 16px !important;
  letter-spacing: 0.075em !important;
}
#triangle-topleft {
  position: relative;
  left: 88%;
  width: 0;
  height: 0;
  border-top: 18px solid #cc0c0d;
  border-right: 18px solid transparent;
}

#triangle-topright {
  position: relative;
  left: 80%;
  width: 0px;
  height: 0px;
  border-top: 18px solid #cc0c0d;
  border-left: 18px solid transparent;
}
/*##################################################################*/
joomla-alert {
  color: #FFFFFF !important;
  background-color: rgba(50,50,50, 0.5) !important;
  text-align: justify !important;
  line-height: 1.125em !important;
  letter-spacing: 0.05em !important;
}
/*##################################################################*/
.VOiCE {
  display: block; 
  position: absolute; 
  width: 48px; 
  margin: 121px 22px auto auto; 
  top: 0px; right: 0px;
  -webkit-transition: all 1.5s linear !important;
  -moz-transition: all 1.5s linear !important;
  -ms-transition: all 1.5s linear !important;
  -o-transition: all 1.5s linear !important;
  transition: all 1.5s linear !important;
cursor: pointer;
  z-index: 5000000000000000000000000000000 !important;
}

.VOiCE:hover {
-webkit-transform: scale(1.25)!important;
-moz-transform: scale(1.25)!important;
-ms-transform: scale(1.25)!important;
-o-transform: scale(1.25)!important;
transform: scale(1.25)!important;
  -webkit-transition: all 0.25s linear !important;
  -moz-transition: all 0.25s linear !important;
  -ms-transition: all 0.25s linear !important;
  -o-transition: all 0.25s linear !important;
  transition: all 0.25s linear !important;
}

@media screen and (max-width: 501px){
.VOiCE {
  width: 44px !important;
  margin: 0px 11px auto auto !important;
}
}
/*##################################################################*/
@media screen and (max-width: 501px){
main {
  top: -11px !important;
  position: relative !important;
}
}

.RED-BOX {
  display: block !important;
  margin: -6px auto 0px auto !important;
  position: relative !important;
  top: 0px;
  width: 100%  !important;
  min-height: 22px !important;
  padding: 11px 3% !important;
  color: #FFFFFF !important;
  background-color: #c20e1a !important;
  overflow: hidden !important; 
  border-top: 1px dotted #FFFFFF;
}


@media screen and (max-width: 701px){
.RED-BOX  {
  margin-top: 33px !important;
}
}

@media screen and (max-width: 501px){
.RED-BOX  {
  margin-top: 0px !important;
}
}
/*##################################################################*/
.thick {
  font-weight: 600 !important;
}
/*##################################################################*/
.MENU-BAR-BOTTOM {
	display: block !important;
	margin: 0px auto 0px auto !important;
    width: auto;
	max-width: 252px;
	height: 50px;
    overflow: hidden !important;
	background-color: #323232;
	background-image: linear-gradient(to top, rgba(255,255,255, 0.25) 0%, #323232 77%, rgba(255,255,255, 0.25) 93%);
	position: fixed;
	text-align: center;
	line-height: 1em;
	z-index: 5000000000000000 !important;
	border-top: 4px groove rgba(0,0,0, 0.75);
	border-left: 4px groove rgba(0,0,0, 0.75);
	border-right: 4px groove rgba(0,0,0, 0.75);
	left: 0px !important;
	right: 0px !important;
	bottom: 0px !important;
	padding: 0px 11px !important;
	-webkit-border-radius: 11px 11px 0px 0px !important;
	-moz-border-radius: 11px 11px 0px 0px !important;
	border-radius: 11px 11px 0px 0px !important;
animation: einblenden 2.5s;
-moz-animation: einblenden 2.5s; /* Für Firefox */
-webkit-animation: einblenden 2.5s; /* Für Safari und Chrome */
-o-animation: einblenden 2.5s; /* Für Opera */
}

@keyframes-slowmotion {
    from { opacity:0; margin-left:0em; transform: scale(0);}
    to { opacity:1; margin-left:10em; transform: scale(1);}
}

@-moz-keyframes-slowmotion {
    from { opacity:0; margin-left:0em; transform: scale(0);}
    to { opacity:1; margin-left:10em; transform: scale(1);}
}

@-webkit-keyframes-slowmotion {
    from { opacity:0; margin-left:0em; transform: scale(0);}
    to { opacity:1; margin-left:10em; transform: scale(1);}
}

@-o-keyframes-slowmotion {
    from { opacity:0; margin-left:0em; transform: scale(0);}
    to { opacity:1; margin-left:10em; transform: scale(1);}
}


@media screen and (max-width: 701px){
.MENU-BAR-BOTTOM {
	-webkit-transform: scale(0.95) !important;
	-moz-transform: scale(0.95) !important;
	-ms-transform: scale(0.95) !important;
	-o-transform: scale(0.95) !important;
	transform: scale(0.95) !important;
}
}

a.circle2 {
	display: block;
	margin: 0px 0px 16px auto;
	width: 30px;
	height: 30px;
	padding: 5px;
	background-color: #323232;
	border-radius: 100%;
	-webkit-transition: all 2s ease !important;
	-moz-transition: all 2s ease !important;
	transition: all 2s ease !important;
	cursor: pointer;
	z-index: 1000;
	border: 2px solid #FFFFFF !important;
	scroll-behavior: smooth !important;
}

a.circle2:hover {
	background-color: #b2242a;
	border: 2px solid #b2242a !important;
	opacity: 1;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	-moz-animation: fadein 2.5s;
	-webkit-animation: fadein 2.5s;
	-moz-box-shadow: 0px 0px 11px rgba(0,0,0, 0.75);
	-webkit-box-shadow: 0px 0px 11px rgba(0,0,0, 0.75);
	box-shadow: 0px 0px 11px rgba(0,0,0, 0.75);
}
/*##################################################################*/
.THiCK {
 font-weight: 400;
  font-size: 1.1em !important;
  text-shadow: 1px 1px 1px rgba(0,6,22, 0.125) !important;
  letter-spacing: 0.05em; 
}

.THiCK::before {
  content: '□';
  padding-right: 6px;
  font-weight: 700 !important;
  font-size: 1.25em !important;
  text-shadow: 1px 1px 1px rgba(0,6,22, 0.75) !important;
}

.THiCK2 {
 font-weight: 400;
  font-size: 1.1em !important;
  text-shadow: 1px 1px 1px rgba(0,6,22, 0.25) !important;
  letter-spacing: 0.05em; 
}

.THiCK2::before {
  content: '□';
  padding-right: 6px;
  font-weight: 700 !important;
  font-size: 1.25em !important;
  text-shadow: 1px 1px 1px rgba(0,6,22, 0.75) !important;
}

.RED-COLOR {
  color: red !important;
  font-weight: 700 !important;
  font-size: 16px;
}
/*##################################################################*/
.BOXBOX_BLUE {
  display: block;
  margin: 0px 3% 33px 3%;
  width: 505px;
  max-width: 44%;
  border: 1px groove #FFFFFF;
  padding: 6%;
  overflow: hidden !important;
  text-align: left !important;
  position: relative;
  float: left;
  background-color: rgba(0,6,22, 0.25);
  line-height: 1.25em !important;
}

@media screen and (max-width: 501px){
.BOXBOX_BLUE  {
  width: 88% !important;
  max-width: 88% !important;
  padding: 9% 6% !important;
  margin:0px auto 33px auto !important;
  float: none !important;
  clear: both;
}
}
/*##################################################################*/
.RED-BUTTON:hover {
  background-color: #ee0001 !important;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%; 
  border-radius: 100%;
}
/*##################################################################*/
[tooltip] {
  position: relative !important; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 14px; /* opinion 3 */
  line-height: 14px;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 10000000000000001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  font-weight: 400 !important;
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 9em;
  max-width: 25em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2ch 2ch;
-webkit-border-radius: 0.6ch;
-moz-border-radius: 0.6ch;
border-radius: 0.6ch;
-moz-box-shadow: 6px 6px 6px rgba(50,50,50, 0.25);
-webkit-box-shadow: 6px 6px 6px rgba(50,50,50, 0.25);
box-shadow: 6px 6px 6px rgba(50,50,50, 0.25);
background-color: #ee0001 !important;
color: #FFFFFF !important;
z-index: 10000000000000000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #ee0001;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #ee0001;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #ee0001;
  left: calc(0em - 15px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #ee0001;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 500ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 500ms ease-out forwards;
}


aside {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #ee0001;
  padding: 1em;
}

aside a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  padding: .4em 1em;
}
/*##################################################################*/
.RED-CASE {
  display: block !important;
  margin: 0px auto 0px auto !important; 
  background-color: #ee0001; 
  color: #FFFFFF !important; 
  padding: 12px 3%; 
  position: sticky !important;
  top: 0px !important;
  width: 100% !important;
  overflow: hidden !important;
  z-index: 500;
text-shadow: 1px 1px 1px rgba(0,6,22, 0.5) !important;
-webkit-text-shadow: 1px 1px 1px rgba(0,6,22, 0.5) !important;
-khtml-text-shadow: 1px 1px 1px rgba(0,6,22, 0.5) !important;
-moz-text-shadow: 1px 1px 1px rgba(0,6,22, 0.5) !important;
-moz-box-shadow: 0px 6px 6px rgba(50,50,50, 0.25);
-webkit-box-shadow: 0px 6px 6px rgba(50,50,50, 0.25);
box-shadow: 0px 6px 6px rgba(50,50,50, 0.25);
}

@media screen and (max-width: 701px){
.RED-CASE  {
  /*margin: 59px auto 0px auto !important;*/
  font-size: 12px !important;  
}
}
/*##################################################################*/
a.circle {
  display: block !important;
  position: sticky !important;
  margin: 33px auto 0px auto;
  width: 30px;
  height: 30px;
  padding: 0px !important;
	background-color: #323232;
	border-radius: 100%;
	-webkit-transition: all 2s ease !important;
	-moz-transition: all 2s ease !important;
	transition: all 2s ease !important;
	cursor: pointer;
	z-index: 1000;
	/*border: 2px solid #555555 !important;*/
	scroll-behavior: smooth !important;
}

a.circle img {
  position: relative !important;
}

a.circle:hover {
  background-color: #ee0001 !important;
}
/*##################################################################*/
.effect {
  -webkit-transition: all 2.5s linear !important;
  -moz-transition: all 2.5s linear !important;
  -ms-transition: all 2.5s linear !important;
  -o-transition: all 2.5s linear !important;
  transition: all 2.5s linear !important;
  -webkit-filter: grayscale(0.25);
  filter: grayscale(0.25);
}

.effect:hover {
  	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
/*##################################################################*/
/*.dark-blue {
  display: block;
  background-color: rgba(0,6,22, 0.5);
  background: linear-gradient(45deg, rgba(255,255,255, 0), (0,6,22, 0.5), (0,6,22, 0.5), rgba(255,255,255, 0)) !important;
    background-size: auto !important;
  background-size: 400% 400% !important;
  -webkit-animation: AnimationName 11s ease infinite;
  -moz-animation: AnimationName 11s ease infinite;
  -o-animation: AnimationName 11s ease infinite;
  animation: AnimationName 11s ease infinite;
}
/*##################################################################*/
.TOP-CASE {
	display: block;
	position: fixed !important;
	top: 137px !important;
	left: 0px  !important;
	right: 0px  !important;
	line-height: 1.125em;
	padding: 11px 1.5%;
	width: 100% !important;
	height: auto;
	background: #323232;
	margin: 0px auto auto auto !important;
	-moz-box-shadow: 3px 3px 11px rgba(0,6,22, 0.35) !important;
	-webkit-box-shadow: 3px 3px 11px rgba(0,6,22, 0.35) !important;
	box-shadow: 3px 3px 11px rgba(0,6,22, 0.35) !important;
	z-index: 5 !important;
}

.WRiTiNG {
	font-weight: 500;
	text-align: center;
	font-size: 14px;
	background: linear-gradient(90deg, #323232, #FFFFFF, #323232);
	letter-spacing: 1px;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-repeat: no-repeat;
	background-size: 80%;
	animation: shine 6s linear infinite !important;
	position: relative;
	padding: 0px !important;
	margin: 0px auto !important;
}

@keyframes shine {
0% {
    background-position-x: -300%;
  }
100% {
    background-position-x: 300%;
  }
}

@media screen and (max-width: 700px){
.WRiTiNG {
  font-size: 9px;
  letter-spacing: 0.05em !important;
  line-height: 1.125em !important;
  padding: 3% !important;
}
}
/*##################################################################*/
/*##################################################################*/
/*##################################################################*/
/*##################################################################*/
/*##################################################################*/
/*##################################################################*/