/*
Theme Name: swissmem
Description: Custom WordPress theme for Swissmem.
Version: 1.0.0
Text Domain: swissmem
*/


#kompetenzmatrix-embed {
	margin:0;
	padding:0;
	 font-family: "Gudea", sans-serif;
  font-weight: 400;
  font-style: normal;
  	--swissmem-blue:#004394;
	--bubble-width:47px;
	--bubble-font-size:24px;
	--translate:-47px;
	--border-color:#bdbdbd;
	--default-transition:all ease 0.5s;
}
.kompetenzmatrix-popup {
	font-family: "Gudea", sans-serif;
}
 
#kompetenzmatrix-embed a {
	transition:var(--default-transition);
	color:var(--swissmem-blue);
}
#kompetenzmatrix-embed b, #kompetenzmatrix-embed strong, .kompetenzmatrix-popup b, .kompetenzmatrix-popup strong {
	 font-weight: 700;
}
.kompetenzmatrix {
	position:relative;
}
.kompetenzmatrix img {
	display:block;
	position:relative;
	z-index:1;
	width:100%;
}
.kompetenzmatrix-buttons {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:3;
}
.kompetenzmatrix-buttons a {
	transition:opacity ease 0.5s;
	background:#000;
	color:#fff !important;
	border-radius:50%;
	position:absolute;
	display:flex;
	width:var(--bubble-width);
	height:var(--bubble-width);
	opacity:0;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	font-weight:700;
	font-size:var(--bubble-font-size);
	text-decoration:none;
}
.kompetenzmatrix-buttons a:hover{
	background-color:var(--swissmem-blue);
}


.kompetenzmatrix-button-1 {
	top: 42%;
    left: 2.3%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-2 {
	    top: 20%;
    left: 16%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-3 {
	
    top: 4.5%;
    left: 21.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-4 {
	    top: 10%;
    left: 34.5%;
	/*transform:translate(var(--translate), var(--translate));*/;
}
.kompetenzmatrix-button-5 {
    top: 25%;
    left: 50.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-6 {
    top: 53.5%;
    left: 11.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-7 {
    top: 38%;
    left: 30.7%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-8 {
    top: 68.5%;
    left: 25.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-9 {
    top: 62.5%;
    left: 47.8%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-10 {
    top: 55%;
    left: 56.3%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-11 {
  top: 48%;
    left: 53.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-12 {
       top: auto;
    bottom: 23.5%;
    left: auto;
    right: 49.5%;
}
.kompetenzmatrix-button-12:after {
	content:" ";
	width: 3vw;
	height:2px;
	background-color:#000;
	display:inline-block;
	position:absolute;
	left:calc(100% - 2px);
	top:50%;
	transform:rotate(11deg);
	transform-origin:left;
}
.kompetenzmatrix-button-13 {
top: 71%;
    left: 57.3%;
	/*transform:translate(var(--translate), var(--translate));*/
}

.kompetenzmatrix-button-14 {
	    top: 58%;
    left: 65%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-15 {
	      bottom: 3%;
    left: 45%;
	top:auto;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-16 {
    top: 79.5%;
    left: 63.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-17 {
	    top: 74.5%;
    left: 82.2%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-18 {
	     top: 9.5%;
    left: 86.4%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-19 {
	    top: 10%;
    left: 72%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-20 {
        top: 10.5%;
    left: 54.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-21 {
    top: 35.5%;
    left: 93%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-22 {
	    top: 28%;
    left: 73.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-23 {
	    top: 17.0%;
    left: 80.4%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-24 {
	top: 71%;
    left: 88.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-25 {
	 top: 17.5%;
    left: 72.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-26 {
	       top: 88.5%;
    left: 32.5%;
}
.kompetenzmatrix-button-27 {
	    top: 40.5%;
    left: 22.0%;
}
.kompetenzmatrix-button-28 {
top: 71%;
    left: 70.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
.kompetenzmatrix-button-29 {
top: 55.5%;
    left: 29.5%;
	/*transform:translate(var(--translate), var(--translate));*/
}
body .fancybox__content {
	max-width:95%;
	min-width:300px;
}
body .fancybox__content p {
	margin-bottom:10px;
}
body .fancybox__content p:last-child {
	margin-bottom:0;
}
.kompetenzmatrix-popup-inner {
	
}
.kompetenzmatrix-popup-item + .kompetenzmatrix-popup-item {
	padding-top:20px;
	margin-top:20px;
	border-top:var(--border-color) 1px solid;
}



@media (max-width: 1500px) {
	:root{
	--translate:-37px;
	}
	.kompetenzmatrix-button-12 {
    	bottom: 22.5%;

    	/*right: 49.5%;*/
	}
}

@media (max-width: 991px) {
	.kompetenzmatrix-html-el {
		font-size:18px;
	}
	:root{
	--translate:-27px;
	--bubble-width:35px;
		--bubble-font-size:20px;
	}
	.kompetenzmatrix-button-12 {
        bottom: 21.5%;
    	right: 49.3%;
	}
}
@media (max-width: 767px) {
	.kompetenzmatrix-button-12 {
                bottom: 20.5%;
        right: 49.3%;
	}
	.kompetenzmatrix-button-12:after {

	height:1px;
	
}
}
@media (max-width: 600px) {
	

	:root{
	--translate:-10px;
	--bubble-width:25px;
	--bubble-font-size:15px;
	}
	body .fancybox__content {
	max-width:95%;
	min-width:100px;
		padding:22px;
}
}