*{
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

body {
  background: black;
}

:root{
  --width:calc(30vmin / 1.9);
  --height:calc(17.321vmin / 1.9);
}

.hexagon-root {
  height: 560px;
}

.col-lg-offset-2 {
  margin-left: unset;
}

@media (min-width: 1200px) {
  .adapt-container-hexagon {
    margin-left: unset !important;
    padding-top: 0px;
  }

  .hexagon-root {
    height: 735px;
  }
}

@media(max-width: 767px) {

  .hexagon-root {
    height: 660px;
    /*transform: translate(-20px, -50px);*/

  }

  :root{
    --width:calc(30vmin / 1.2);
    --height:calc(17.321vmin / 1.2);
  }
}

@media(max-width: 520px) {

  .hexagon-root {
    height: 660px;
    transform: translate(-20px, -50px);

  }
}
.section {
  position: absolute;
  width:var(--width); 
  height: var(--height);
  background-color: white;
  transition:0.8s background, .5s left, .5s top;
  user-select:none;
  opacity:1;
}

.section .title{
  /*line-height:var(--height);*/
  padding-top: 1.6vmax;
  text-align:center;
  font-size:calc(var(--height) / 4.5);
  color:black;
  cursor:pointer;
}

.section:before,
.section:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: calc(var(--width) / 2) solid transparent;
  border-right: calc(var(--width) / 2) solid transparent;
  cursor:pointer;
  transition:0.8s border-color, .5s left, .5s top;
}

.section:before {
  bottom: 100%;
  border-bottom: calc(var(--height) / 2) solid white;
}

.section:after {
  top: 100%;
  width: 0;
  border-top: calc(var(--height) / 2) solid white;
}

.hover{
  background: #878787FF !important;
}

.hover:before,
.hover:after{
  border-bottom-color: #878787FF !important;
  border-top-color: #878787 !important;

}

#center .title{
  font-size:calc(var(--height) / 3.75);;
}

#center{
  top:calc(38vh - (var(--height) / 2));
  left:calc(50vw - var(--width) * 0.5);
}

#consulting{
  top:calc(38vh - (var(--height) * 2.2));
  left:calc(50vw - (var(--width) * 1.075));
}

#web{
  top:calc(38vh - (var(--height) * 2.2));
  left:calc(50vw + (var(--width) * 0.075));
}

#mservices{
  top:calc(38vh - (var(--height) / 2));
  left:calc(50vw + (var(--width) * 0.625));
}

#security{
  top:calc(38vh + (var(--height) * 1.25));
  left:calc(50vw + (var(--width) * 0.075));
}

#crypto{
  top:calc(38vh + (var(--height) * 1.25));
  left:calc(50vw - (var(--width) * 1.075));
}

#itservice{
  top:calc(38vh - (var(--height) / 2));
  left:calc(50vw - (var(--width) * 1.625));
}

.center{
  top:calc(38vh - (var(--height) / 2)) !important;
  left:calc(50vw - var(--width) * 0.5) !important;
}

.left{
  top:calc(var(--height) / 2) !important;
  left:calc(var(--height) / 4) !important;
  height:calc(var(--height) / 2);
  width:calc(var(--width) / 2);
  transition:
    .5s left linear .5s, 
    .5s top  linear .5s, 
    .5s background linear 0 !important; 
}

.left .title{
  line-height:unset;
  padding-top: 14px !important;
  font-size:calc(var(--height) / 5) !important;
}

.left:before,
.left:after{
  transition:
    .5s border linear .5s,
    .5s background linear 0 !important;
  border-left: calc(var(--width) / 4) solid transparent;
  border-right: calc(var(--width) / 4) solid transparent;
}

.left:before{
  border-bottom: calc(var(--height) / 4) solid white;
}

.left:after{
  border-top: calc(var(--height) / 4) solid white;
}

.op{
  opacity:0;
  display: block;
  transition:.5s left, .5s top, .2s opacity linear .3s;
}

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

.content-style {
  position: relative;
  top: 100px !important;
  left: 245px !important;
  padding-top: unset;
  color: white;
  width: 1080px;
}

.consulting-content {
  opacity: 0;
  display: none;
}

.web-content {
  opacity: 0;
  display: none;
}

.managedserv-content {
  opacity: 0;
  display: none;
}

.security-content {
  opacity: 0;
  display: none;
}

.crypto-content {
  opacity: 0;
  display: none;
}

.it-service-content {
  opacity: 0;
  display: none;
}




.ext {
  opacity: 1;
  display: block;
}

#leistungen {
  font-weight: 600;
  color: #1c235b;
}

#center .title {
  font-size: calc(var(--height) / 4.75);
  padding-top: 2.4vw;
}