@charset "utf-8";

.pcopy ul li {
color:#FFF;
font-size:26px;
text-shadow:0 1px #535353
}

.index-link {
color:#FFF;
font-size:26px;
text-decoration:none;
text-shadow:0 1px #535353
}

.pc a {
color:#969696;
font-style:italic;
text-decoration:none
}

body {
background-attachment:fixed;
background-image:url(../pictures/bg.webp);
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
margin-left:0;
margin-right:0;
margin-top:0
}

#navbar {
background-color:#FFF;
border-bottom:2px solid #AAA9A9;
height:100px;
position:fixed;
width:100%;
z-index:4
}

.logo {
float:left;
height:100px;
margin-left:20px;
margin-top:30px;
max-width:20%;
min-width:20%;
position:fixed
}

p {
color:#FFF;
font-size:18px;
letter-spacing:1px
}

main {
display:block
}

h1,h2,h3,h4 {
color:#F8F8F9;
text-shadow:0 1px #535353
}

.active {
font-weight:bolder
}

.pos {
bottom:0;
margin-bottom:30px;
margin-right:10px;
position:fixed;
right:0;
width:80px
}

.fixed {
font-family:Calibri,arial,sans-serif;
font-size:20px;
text-align:center
}

.to-top {
border-color:#393939;
color:#393939;
display:inline-block;
padding-top:1.8em;
position:relative;
text-decoration:none;
transition:all .3s ease-out
}

.to-top:before {
border:solid .13em #393939;
border-color:inherit;
border-radius:10em;
content:'▲';
font-size:.9em;
height:1.4em;
left:50%;
line-height:1.3em;
margin-left:-.7em;
position:absolute;
top:0;
transition:transform .5s ease-in;
width:1.4em
}

.to-top:hover {
border-color:#ffc0cb;
color:#ffc0cb
}

.to-top:hover:before {
transform:rotate(360deg)
}

@keyframes middleBar {
0% {
width:0
}

50% {
width:20px
}

100% {
width:0
}
}

@-webkit-keyframes middleBar {
0% {
width:0
}

50% {
width:20px
}

100% {
width:0
}
}

.icon-bars.overlay::before {
animation:topBar 3s infinite .2s;
background:#617281;
background:#b7c7d3;
width:10px
}

@keyframes topBar {
0% {
width:0
}

50% {
width:10px
}

100% {
width:0
}
}

@-webkit-keyframes topBar {
0% {
width:0
}

50% {
width:10px
}

100% {
width:0
}
}

.icon-bars.overlay::after {
animation:bottomBar 3s infinite 1s;
background:#617281;
background:#b7c7d3;
width:15px
}

@keyframes bottomBar {
0% {
width:0
}

50% {
width:15px
}

100% {
width:0
}
}

@-webkit-keyframes bottomBar {
0% {
width:0
}

50% {
width:15px
}

100% {
width:0
}
}

.menuIcon.toggle .icon-bars {
  top: 5px;
  transform: translate3d(0, 5px, 0) rotate(135deg);
  transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: .1s
}
.menuIcon.toggle .icon-bars::before {
  opacity: 0;
  top: 0;
  transition-delay: .1s
}
.menuIcon.toggle .icon-bars::after {
  top: 10px;
  transform: translate3d(0, -10px, 0) rotate(-270deg);
  transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: .1s
}
.menuIcon.toggle .icon-bars.overlay {
  opacity: 0;
  transition: all 0s ease 0s;
  width: 20px
}
#menu {
  background: linear-gradient(90deg, #000f 0%, #1b1b1bff 50%, #000f 100%);
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 40px 0 60px;
  width: 100%
}
#menu li {
  border-bottom: 1px solid #525252;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 10px;
  padding-top: 10px;
  text-decoration: none;
  width: 100%
}
#menu li a {
  color: #B0B0B0;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
  font-size: 30px;
  font-weight: 700;
  text-decoration: none
}
#menu li a:hover {
  color: #515151;
  letter-spacing: 3px
}
.overlay-menu {
  align-items: center;
  height: 100vh;
  justify-content: center;
  overflow: auto;
  position: fixed;
  transform: translateX(-100%);
  transition: transform .2s ease-out;
  width: 100%;
  z-index: 7
}
.overlay-menu li a {
  display: block;
  letter-spacing: 2px;
  padding: 10px 0;
  text-align: center;
  transition: color .3s ease
}
.overlay-menu li a:hover, .overlay-menu li a:active {
  color: #f7f8f9ff;
  transition: color .3s ease
}
#navbarx {
background-color:#FFF;
border-bottom:2px solid #AAA9A9;
height:100px;
position:fixed;
width:100%;
z-index:1
}

#nav {
float:right;
margin-top:40px;
width:85%
}

.navbar {
background-color:#FFF;
float:right;
margin-right:200px;
margin-top:30px;
max-width:75%
}

* {
box-sizing:border-box
}

nav {
text-align:center
}

nav ul {
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
display:inline-block;
list-style:none;
margin:0;
padding:0
}

nav ul li {
cursor:pointer;
float:left;
padding-bottom:10px;
padding-top:10px;
position:relative;
width:150px
}

nav ul ul li {
background:#353d40;
background:linear-gradient(90deg,#353d40ff 0%,#4d4d4dff 50%,#353d40ff 100%)
}

nav ul li a {
color:#000;
font-size:22px;
text-decoration:none
}

nav ul ul li a {
color:#BCBCBC;
font-size:20px;
text-decoration:none
}

nav ul li:hover {
color:#979797;
font-weight:700
}

nav ul ul li:hover {
background:#4d4d4d;
background:linear-gradient(90deg,#4d4d4dff 0%,#353d40ff 50%,#4d4d4dff 100%)
}

ul .drop-menu {
left:0;
padding-top:12px;
position:absolute;
top:100%;
width:150px
}

ul .drop-menu li {
border-bottom:1px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#000;
display:none;
font-weight:700;
width:150px
}

ul .drop-menu li:hover {
background-color:#BBB;
font-weight:400
}

ul .drop-menu li:last-child {
border-bottom:1px solid #FFF;
border-radius:0 0 5px 5px
}

li:hover ul.drop-menu li {
display:block
}

li:hover ul.drop-menu.menu3 {
perspective:1000px
}

li:hover ul.drop-menu.menu3 li {
opacity:0
}

li:hover ul.drop-menu.menu3 li:nth-child(1) {
animation:m3 400ms ease-in-out;
animation-delay:0;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(2) {
animation:m3 400ms ease-in-out;
animation-delay:100ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(3) {
animation:m3 400ms ease-in-out;
animation-delay:200ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(4) {
animation:m3 400ms ease-in-out;
animation-delay:300ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(5) {
animation:m3 400ms ease-in-out;
animation-delay:400ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(6) {
animation:m3 400ms ease-in-out;
animation-delay:500ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(7) {
animation:m3 400ms ease-in-out;
animation-delay:600ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(8) {
animation:m3 400ms ease-in-out;
animation-delay:700ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(9) {
animation:m3 400ms ease-in-out;
animation-delay:800ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(10) {
animation:m3 400ms ease-in-out;
animation-delay:900ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(11) {
animation:m3 400ms ease-in-out;
animation-delay:1000ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(12) {
animation:m3 400ms ease-in-out;
animation-delay:1100ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(13) {
animation:m3 400ms ease-in-out;
animation-delay:1200ms;
animation-fill-mode:forwards
}

li:hover ul.drop-menu.menu3 li:nth-child(14) {
animation:m3 400ms ease-in-out;
animation-delay:1300ms;
animation-fill-mode:forwards
}

@keyframes m3 {
0% {
opacity:0;
transform:scaleX(0)
}

100% {
opacity:1;
transform:scaleX(1)
}
}

.top {
bottom:18px;
color:#84256C;
display:block;
font-size:35px;
position:fixed;
right:18px;
text-shadow:1px 1px 1px slategrey;
transform:rotate(270deg)
}

footer {
background-color:#565555;
border-top:2px solid #B3AFAF;
bottom:0;
color:#FDFDFD;
font-size:12px;
height:30px;
left:0;
padding-top:5px;
position:fixed;
text-align:center;
width:100%;
z-index:2
}

footer a {
color:#FDFDFD;
font-size:20px;
padding-bottom:4px;
padding-left:12px;
padding-right:12px;
text-decoration:none
}

footer a:hover {
color:#9B9B9B;
letter-spacing:2px;
transition:all .3s ease
}

#column1 {
display:inline-block;
font-family:Cambria,"Hoefler Text","Liberation Serif",Times,"Times New Roman",serif;
font-size:25px;
padding-bottom:10px;
text-align:center;
width:100%
}

#column2 {
display:inline-block;
font-family:Cambria,"Hoefler Text","Liberation Serif",Times,"Times New Roman",serif;
font-size:25px;
padding-bottom:10px;
text-align:center;
width:100%
}

#column3 {
display:inline-block;
font-family:Cambria,"Hoefler Text","Liberation Serif",Times,"Times New Roman",serif;
padding-bottom:80px;
text-align:center;
width:70%
}

#column4 {
display:inline-block;
font-family:Cambria,"Hoefler Text","Liberation Serif",Times,"Times New Roman",serif;
font-size:25px;
margin-top:150px;
padding-bottom:10px;
text-align:center;
width:100%
}

.container-select {
height:400px;
margin:50px auto;
position:relative;
width:400px;
z-index:0
}

.container-select div {
height:180px;
position:absolute;
width:180px
}

.selektor1 a,.selektor2 a,.selektor3 a,.selektor4 a {
color:#F4EAEA;
font-family:Impact,Haettenschweiler,"Franklin Gothic Bold","Arial Black",sans-serif;
font-size:40px;
letter-spacing:3px;
opacity:.8;
text-decoration:none;
text-shadow:1px 1px #151515;
transition:all .4s ease;
z-index:1
}

.div1,.div2,.div3,.div4 {
border:2px solid #F5F5F5;
border-radius:3px;
color:#F4EAEA;
font-family:Impact,Haettenschweiler,"Franklin Gothic Bold","Arial Black",sans-serif;
font-size:40px;
letter-spacing:3px;
text-shadow:1px 1px #151515
}

.div1:hover,.div2:hover,.div3:hover,.div4:hover {
border:2px solid #6F6F6F;
color:#848484;
font-family:Impact,Haettenschweiler,"Franklin Gothic Bold","Arial Black",sans-serif;
letter-spacing:1px;
opacity:.8;
transition:all .4s ease
}

.divcenter {
display:grid;
place-items:center
}

.div1 {
background-image:url(../pictures/server1.webp);
left:55%;
top:0;
transform:translateX(-50%);
z-index:1
}

.div2 {
background-image:url(../pictures/server2.webp);
left:110%;
top:55%;
transform:translateY(-50%) translateX(-100%);
z-index:2
}

.div3 {
background-image:url(../pictures/server3.webp);
left:55%;
top:110%;
transform:translateY(-100%) translateX(-50%);
z-index:3
}

.div4 {
background-image:url(../pictures/server4.webp);
left:0;
top:55%;
transform:translateY(-50%);
z-index:1
}

.project {
background:#3d4550;
background:radial-gradient(circle,#3d4550ff 0%,#353b3dff 50%,#23262eff 100%);
height:90px;
left:0;
opacity:.4;
position:absolute;
right:0;
width:100%
}

#boxes {
margin-bottom:70px;
padding-top:30px;
text-align:center
}

#columne1,#columne2,#columne3 {
background:linear-gradient(90deg,#24211e,#45403b);
border:1px solid #FFF;
border-radius:10px;
cursor:pointer;
display:inline-block;
height:auto;
margin:10px;
min-width:300px;
padding:20px;
position:relative;
width:20%
}

#columne1 h2,#columne2 h2,#columne3 h2,#columne4 h2,#columne5 h2 {
color:#22c55e
}

.link {
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}

.link:hover {
background-color:#EC7E80;
border-radius:10px;
opacity:.1
}

.inputa {
float:left;
width:100%
}

#columne4,#columne5 {
background:linear-gradient(90deg,#24211e,#45403b);
border:1px solid #FFF;
border-radius:10px;
cursor:pointer;
display:inline-block;
margin:10px;
min-width:300px;
padding:20px;
position:relative;
width:40%
}

.container {
align-items:center;
display:flex;
height:100%;
justify-content:center;
max-width:100%;
z-index:0
}

.infocontainer {
align-items:center;
background-color:#181a1c;
border-top:2px solid #5F5F5F;
display:flex;
height:100%;
justify-content:center;
margin-top:70px;
max-width:100%;
padding-bottom:30px;
padding-top:20px;
z-index:0
}

.box-copy {
background:linear-gradient(90deg,#020405,#646b6d);
border:1px solid #6A6A6A;
border-radius:5px;
display:block;
font-size:22px;
padding-bottom:10px;
width:70%
}

.copy {
font-size:18px;
margin:0;
text-align:right;
width:100%
}

.button-copy {
background-color:#373A3D;
border:none;
border-radius:5px;
color:#37be61;
cursor:pointer;
font-size:14px;
margin-right:3px;
margin-top:3px;
padding:3px;
text-align:center
}

.button-copy:hover {
background-color:#C4C8C4;
color:#145328
}

.button-copy:active {
background-color:#4C4E4D;
box-shadow:0 5px #666;
color:#fff;
transform:translateY(4px)
}

.content-copy {
color:#B1B1B1;
padding-bottom:8px;
padding-left:8px;
padding-right:8px
}

.pcopy {
display:block;
text-align:left;
width:70%
}

.pc {
font-size:26px;
text-shadow:0 1px #535353
}

.infopc {
color:#636363;
font-size:18px
}

.projectc {
background:#3d4550;
background:radial-gradient(circle,#3d4550ff 0%,#353b3dff 50%,#23262eff 100%);
height:5px;
margin-bottom:30px;
margin-top:20px;
width:70%
}

.imgsc {
height:auto;
padding-left:10px;
padding-right:10px;
width:100%
}

.piccenter {
height:auto;
margin:30px auto;
max-width:100%;
text-align:center
}

.button {
background-color:#373A3D;
border:1px solid #AAA;
border-radius:3px;
color:#37be61;
cursor:pointer;
display:inline-block;
font-size:20px;
margin:30px 2px 4px;
padding:10px 32px;
text-align:center;
text-decoration:none;
transition-duration:.4s
}

.button:hover {
background-color:#C4C8C4;
color:#145328
}

span.hilfetext {
color:#023702;
cursor:default;
display:block;
font-style:oblique;
margin-top:3px
}

.containerc {
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:100%
}

.inputb {
color:#D7D7D7;
font-size:24px;
margin-bottom:10px;
margin-top:40px;
text-align:center;
width:100%
}

.inputc {
background:linear-gradient(90deg,#bfbfbf,#ebebeb);
border:1px solid #848484;
border-radius:5px;
font-size:16px;
height:30px;
margin-left:15px;
margin-right:15px;
min-width:300px;
padding:5px;
text-align:left;
width:30%
}

#serverinf1,#serverinf2,#serverinf3,#serverinf4,#serverinf5,#serverinf6,#serverinf7 {
background:linear-gradient(90deg,#24211e,#45403b);
border:1px solid #FFF;
border-radius:10px;
color:#22c55e;
cursor:pointer;
display:inline-block;
height:170px;
margin:10px;
max-width:20%;
min-width:170px;
padding-left:20px;
padding-right:20px;
position:relative
}

#serverinf1 h2,#serverinf2 h2,#serverinf3 h2,#serverinf4 h2,#serverinf5 h2,#serverinf6 h2,#serverinf7 h2 {
color:#22c55e;
margin:10px 0 0;
padding:0
}

.link-copy {
color:#B1B1B1;
font-size:22px;
text-decoration:none
}

.link-copy:hover {
color:#434343
}

.link-content-copy {
color:#B1B1B1;
padding:15px 8px 8px
}

.button-field {
margin-bottom:50px;
position:relative;
text-align:center;
width:100%
}

.button-container {
margin-bottom:0;
margin-left:auto;
margin-right:auto;
width:852px
}

.btn-5 {
background:#333;
border:solid #bbb 1px;
border-radius:5px;
color:#bbb;
cursor:pointer;
font-family:Cambria,"Hoefler Text","Liberation Serif",Times,"Times New Roman",serif;
font-size:10pt;
height:35px;
letter-spacing:2px;
margin:5px 100px;
position:relative;
transition:all .5s ease-in-out;
width:100px;
z-index:0
}

.btn-5:before {
background-color:#0D9202;
content:"";
height:100%;
position:absolute;
right:0;
top:0;
transition:.5s ease-in-out;
width:0;
z-index:-1
}

.btn-5:hover:before {
width:100%
}

.btn-5:hover {
border-color:#777;
color:#f1f1f1
}

.btn-5:active:before {
background-color:#00a7fc
}

.btn-5:active {
background-color:#00a7fc;
border-color:#00a7fc;
color:#333
}

.btn-6 {
background:#333;
border:solid #bbb 1px;
border-radius:5px;
color:#bbb;
cursor:pointer;
font-family:Cambria,"Hoefler Text","Liberation Serif",Times,"Times New Roman",serif;
font-size:10pt;
height:35px;
letter-spacing:2px;
margin:5px 100px;
position:relative;
transition:all .5s ease-in-out;
width:100px;
z-index:0
}

.btn-6:before {
background-color:#0D9202;
content:"";
height:100%;
left:0;
position:absolute;
top:0;
transition:.5s ease-in-out;
width:0;
z-index:-1
}

.btn-6:hover:before {
width:100%
}

.btn-6:hover {
border-color:#777;
color:#f1f1f1
}

.btn-6:active:before {
background-color:#00a7fc
}

.btn-6:active {
background-color:#00a7fc;
border-color:#00a7fc;
color:#333
}

.install {
color:#B1B1B1;
font-size:18px;
text-decoration:none
}

.install:hover {
color:#434343
}

.gradient-border img {
height:auto;
max-width:100%
}

.gradient-border {
align-items:center;
animation:moveGradient 4s alternate infinite;
background:linear-gradient(60deg,hsl(0,0%,94%),hsl(0,0%,71%),hsl(0,0%,94%),hsl(0,0%,71%),hsl(0,0%,94%),hsl(0,0%,71%),hsl(0,0%,0%));
background-position:0 50%;
background-size:300% 300%;
border:2px solid #121138;
border-radius:5px;
border-width:2px;
color:#fff;
content:"";
display:flex;
font-family:Lato,sans-serif;
font-size:10px;
height:124px;
justify-content:center;
left:calc(-1 * var(--border-width));
padding:10px;
position:relative;
text-transform:uppercase;
top:calc(-1 * var(--border-width));
width:124px;
z-index:-1
}

@keyframes moveGradient {
50% {
background-position:100% 50%
}
}

.bodytest {
font-size:32px;
width:116px
}

@media(max-width: 800px) {
  .menuIcon {
    cursor: pointer;
    display: block;
    height: 23px;
    position: fixed;
    right: 15px;
    top: 20px;
    width: 27px;
    z-index: 12
  }
  .icon-bars {
    background: #FFF;
    height: 2px;
    left: 1px;
    position: absolute;
    top: 45%;
    transition: .4s;
    width: 20px
  }
  .icon-bars::before {
    background: #1f1f1f;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: -8px;
    transition: .3s width .4s;
    width: 20px
  }
  .icon-bars::after {
    background: #FFF;
    bottom: -8px;
    content: '';
    height: 2px;
    left: 0;
    margin-top: 0;
    position: absolute;
    transition: .3s width .4s;
    width: 20px
  }
  .icon-bars.overlay {
    animation: middleBar 3s infinite .5s;
    background: #617281;
    background: #b7c7d3;
    width: 20px
  }
}
@media(max-width: 900px) {
  #navbarx ul {
    display: none
  }
}

@media(max-width: 900px) {
#navbarx ul {
display:none
}
}

@media screen and (max-width: 900px) {
#nav ul {
display:none
}
}

@media screen and (max-width: 800px) {
.container-select div {
height:130px;
width:130px
}

.container-select {
height:280px;
width:280px
}

.div1,.div2,.div3,.div4 {
font-size:20px
}

#column1 {
font-size:20px;
margin-top:10px
}

#column4 {
font-size:20px;
margin-top:100px
}

#column1 h1 {
margin-top:180px
}

#column3 {
padding-bottom:0
}

.content-copy {
font-size:16px
}

.gradient-border {
height:70px;
width:70px
}

.gradient-border img {
height:auto;
max-width:100%
}

.pc {
font-size:18px
}

footer {
display:none
}

.copy {
font-size:8px
}

.logo {
margin-top:60px
}
}

@keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

#cookie-banner {
    background-color: #353535;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    color: #B8B8B8;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 15px;
    animation: fadeIn 4s forwards;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid #F9F8F8;
}
.cookina {
    text-align: left;
    padding-left: 10px;
    width: 50%;
    float: left;
}
.cookina a {
    color: #4CAF50
}
.cookinb {
    box-sizing: border-box;
    width: 43%;
    float: right;
}
@media(max-width: 900px) {
.cookinb {
    display: flex;
    flex-wrap: wrap-reverse;
}
} 
.cookinc {
    text-align: left;
    width: 100%;
    float: left;
    padding-top: 10px;
    padding-left: 10px;
}
.cookbuta, .cookbutb {
    display: inline-block;
    position: relative;
    width: 120px;
}
.cookbut-a, .cookbut-b {
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #0000004d;
    padding: 10px 20px;
}
.cookbut-a {
    background-color: #848484
}
.cookbut-b {
    background-color: #4CAF50
}
.cookbut-a:hover, .cookbut-b:hover {
    opacity: 0.5
}