/* ################################################# Code for responsive hexagons ################################################# */
#hexGrid,
#content #bodyContent .hexGrid {
display: flex !important;
flex-wrap: wrap;
margin: 0 auto !important;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;
padding-bottom: 6.5% !important;
}
#hexGrid *,
#content #bodyContent .hexGrid * {
margin: 0;
padding: 0;
}
:not(.ve-ui-surface) .hexGrid .hex,
:not(.ve-ui-surface) .hexItem.hex {
position: relative;
visibility:hidden;
outline:1px solid transparent;
display: inline-block;
/* clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%); */
}
:not(.ve-ui-surface) .hexGrid .hex::after,
:not(.ve-ui-surface) .hexGrid .logo::after,
:not(.ve-ui-surface) .hexItem.hex::after,
:not(.ve-ui-surface) .hexItem.logo::after {
content:'';
display:block;
padding-bottom: 86.602%;
}
#hexGrid .hexIn,
.hexGrid .hexIn,
.hexItem .hexIn {
position: absolute;
width:96%;
padding-bottom: 110.851%;
margin:0 2%;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent;
/*
-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
*/
}
#hexGrid .hexIn *,
.hexGrid .hexIn *,
.hexItem .hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent
}
/* Design for //mib */
#hexGrid .hexIn duv,
.hexGrid .hexIn duv,
.hexItem .hexIn duv {
position: relative;
}
#hexGrid .hexIn duv img,
.hexGrid .hexIn duv img,
.hexItem .hexIn duv img {
max-height:1em;
left: auto;
right: auto;
position: relative;
}
#hexGrid .hexLink,
.hexGrid .hexLink,
.hexItem .hexLink {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-color: #6f7273;
overflow: hidden;
/*
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
*/
}
/*** HEX CONTENT ***/
#hexGrid .hex img,
.hexGrid .hex img,
.hexItem.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100% !important;
max-width: none !important;
margin: 0 auto;
/*
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
*/
}
#hexGrid .hex div.content,
.hexGrid .hex div.content,
.hexItem.hex div.content {
color: #fff;
text-align: center;
line-height: 1.3rem;
display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
flex-wrap: wrap;
padding: 3%;
width: 100%;
height: 100%;
/*
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
*/
}
#hexGrid .hex div.content div,
.hexGrid .hex div.content div,
.hexItem.hex div.content div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#hexGrid .hex h1,
#hexGrid .hex p,
.hexGrid .hex h1,
.hexGrid .hex p,
.hexItem.hex h1,
.hexItem.hex p {
color: #fff;
width: 100%;
padding: 5%;
box-sizing: border-box;
background-color: rgba(0, 128, 128, 0.8);
background-color: rgba(128, 128, 128, 0.8);
font-weight: 300;
/*
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
*/
transition: transform .2s ease-out, opacity .3s ease-out;
}
#hexGrid .hex h1,
.hexGrid .hex h1,
.hexItem.hex h1 {
bottom: 50%;
margin: 0 !important;
padding-top:50%;
font-size: 1.5em;
z-index: 1;
/*
-webkit-transform:translate3d(0,-100%,0);
-ms-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
*/
}
#hexGrid .hex h1::after,
.hexGrid .hex h1::after,
.hexItem.hex h1::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
#hexGrid .hex p,
.hexGrid .hex p,
.hexItem.hex p {
top: 50%;
padding-bottom: 50%;
/*
-webkit-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
*/
}
#hexGrid .hex .bg-animation-overlay,
.hexGrid .hex .bg-animation-overlay,
.hexItem.hex .bg-animation-overlay {
color: #fff;
width: 100%;
height: 100%;
padding: 5%;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
/*
-webkit-transition: opacity .3s ease-out;
*/
transition: opacity .3s ease-out;
}
/*** HEX LOGO ***/
#hexGrid .logo,
.hexGrid .logo,
.hexItem.logo {
display: flex;
flex-direction: row;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
margin: 0 auto -65px auto;
width: 33.333%;
}
#hexGrid .logoIn,
.hexGrid .logoIn,
.hexItem .logoIn {
position: absolute;
visibility: visible;
width: 100%;
width: 96%;
margin: 24% 2%;
padding-bottom: 62.8%; /* to set height to 100% of hex */
background-position: center center;
background-size: contain;
background-image: url("/images_noauth/companylogo.png");
/* background-image: url("https://mib.copiki.de/images_noauth/companylogo.png"); */
background-repeat: no-repeat;
}
/* For individual logos */
.hexGrid .logoIn.logoIndividual img,
.hexItem .logoIn.logoIndividual img {
position: absolute;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: auto !important;
height: auto !important;
max-height: 100% !important;
max-width: 100% !important;
}
.hexGrid .logoIn.logoIndividual,
.hexItem .logoIn.logoIndividual {
/* height: 63.5%; */
}
/* Logo as last element in small row */
#hexGrid li:nth-of-type(14n+5) .logoIn,
.hexGrid li:nth-of-type(14n+5) .logoIn {
width: 142%;
margin: 28% -46% 28% 4%;
padding-bottom: 54.8%;
}
/* Logo as first element in small row */
#hexGrid li:nth-of-type(7n+1) .logoIn,
.hexGrid li:nth-of-type(7n+1) .logoIn {
width: 142%;
margin: 28% 4% 28% -46%;
padding-bottom: 54.8%;
}
/* Double size logo */
#hexGrid li .logoIn.doublesize,
.hexGrid li .logoIn.doublesize {
width: 176%;
margin: 28% 12%;
padding-bottom: 54.8%;
}
/*** HOVER EFFECT ***/
#hexGrid .hexLink:hover h1, #hexGrid .hexLink:focus h1,
#hexGrid .hexLink:hover p, #hexGrid .hexLink:focus p,
.hexGrid .hexLink:hover h1, .hexGrid .hexLink:focus h1,
.hexGrid .hexLink:hover p, .hexGrid .hexLink:focus p,
.hexItem .hexLink:hover h1, .hexItem .hexLink:focus h1,
.hexItem .hexLink:hover p, .hexItem .hexLink:focus p {
/*
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
*/
}
#hexGrid .hexLink:hover .bg-animation-overlay, #hexGrid .hexLink:focus .bg-animation-overlay,
.hexGrid .hexLink:hover .bg-animation-overlay, .hexGrid .hexLink:focus .bg-animation-overlay,
.hexItem .hexLink:hover .bg-animation-overlay, .hexItem .hexLink:focus .bg-animation-overlay {
opacity: 0.4;
/*
-webkit-transition: opacity .3s ease-out;
*/
transition: opacity .3s ease-out;
}
/* Variables for sizes */
@media (max-width: 575px) {
#hexGrid, .hexGrid {
width: 576px;
max-width: 100%;
}
#hexGrid .hex div.content,
.hexGrid .hex div.content,
.hexItem.hex div.content {
font-size: 1em;
}
}
@media (max-width: 767px) and (min-width: 576px) {
#hexGrid, .hexGrid {
width: 576px;
max-width: 100%;
}
#hexGrid .hex div.content,
.hexGrid .hex div.content,
.hexItem .hex div.content {
font-size: 1.1em;
}
#hexGrid .logo,
.hexGrid .logo,
.hexItem.logo {
margin: 0 auto -43px auto;
}
}
@media (max-width: 999px) and (min-width: 768px) {
#hexGrid, .hexGrid {
width: 768px;
max-width: 100%;
}
#hexGrid .hex div.content,
.hexGrid .hex div.content,
.hexItem.hex div.content {
font-size: 1.3em;
}
#hexGrid .logo,
.hexGrid .logo,
.hexItem.logo {
/* max-height: 205px; */
margin: 0 auto -43px auto;
}
}
@media (min-width: 1000px) {
#hexGrid, .hexGrid {
width: 910px;
max-width: 100%;
}
#hexGrid .hex div.content,
.hexGrid .hex div.content,
.hexItem.hex div.content {
font-size: 1.5em;
}
#hexGrid .logo,
.hexGrid .logo,
.hexItem.logo {
/* max-height: 223px; */
}
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION ***/
/* Sizes for hexs */
@media (max-width: 575px) {
#hexGrid .hex,
.hexGrid .hex,
.hexItem.hex {
width: 33%;
}
#hexGrid .hex:nth-of-type(5n+1),
.hexGrid .hex:nth-of-type(5n+1),
.hexItem.hex:nth-of-type(5n+1) {
margin-left:16.5%;
}
#hexGrid .logo,
.hexGrid .logo,
.hexItem.logo {
/* width: 33.333%;
margin: 0 -1px -40px -1px;
padding: 5px; */
}
}
@media (min-width: 576px) {
.hexGrid .hex,
.hexItem.hex {
width: 25%;
}
.hexGrid .hex:nth-of-type(7n+1),
.hexItem.hex:nth-of-type(7n+1) {
margin-left:12.5%;
}
.hexGrid.startFour .hex:nth-of-type(7n+5),
.startFour .hexItem.hex:nth-of-type(7n+5) {
margin-left:12.5%;
}
.hexGrid .logo:nth-of-type(7n+1),
.hexItem.logo:nth-of-type(7n+1) {
/* width: 50%; */
/*overflow: scroll;*/
}
}
.ve-ui-surface .hexItem {
}