/* ------------- sun rotation----------------------------------
 text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
.static {
    position: static;
    width: 28em;
    height: 28em;
    padding: 2.8em;
    border:  1px;
    border-radius: 50%;
    margin: 1.75em auto 0;
	border: dashed 1px;
} */

.bottomright {
    position: fixed;
    top: 8px;
    left: 16px;
    font-size: 18px;
	 
}

.static {
    position: absolute;
    top: 230px;
    left: 200px;
    width: 5.5em; 
   
}
h2 { 
   position: absolute ; 
   top: 240px; 
   left: 200px; 
   
   
}
h2 span { 
   color: #8c0101; 
   font: bold 16px Helvetica, Sans-Serif ; 
   text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
   letter-spacing: -1px;  
 /*   background: rgb(0, 0, 0); fallback color 
   background: rgba(0, 0, 0, 0); */
   padding: 10px; 
  
}
.image {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 10em;
    height:10em;
   
    -webkit-animation:spin 50s linear infinite;
    -moz-animation:spin 50s linear infinite;
    animation:spin 50s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* ------------- end sun rotation ----------------------------------*/
.circle-mother {
    position: relative;
    width: 35em;
    height: 35em;
    padding: 3.8em;
    border:  1px;
    border-radius: 50%;
    margin: -2.5em auto 0;
	
} 


/*circle container*/
.circle-container {
    position: relative;
    width: 29em;
    height: 29em;
    padding: 2em;
    border:  1px;
    border-radius: 50%;
    margin: 1em auto 0;

} 

.circle-container a {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
	width: 4.5em; height: 4.5em; 
    margin: -2.5em;
	color:black;
} 
.circle-container img { display: block; width: 100%; }
.charity { transform: translate(12em); } /* 12em = half the width of the wrapper */
.legal { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.management { transform: rotate(90deg) translate(12em) rotate(-90deg); }
.online { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.success { transform: translate(-12em); }
.domain { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.about { transform: rotate(270deg) translate(12em) rotate(-270deg); }
.b2b { transform: rotate(315deg) translate(12em) rotate(-315deg); }


.meyer {  display : none;   position: absolute; top: 30%; left: 54%;  width: 4em; height: 4em; transform: translate(12em); }
.car:hover .meyer {display : block; }

.parker { display: none; position: absolute; top: 44%; left: 56%;  width: 4em; height: 4em; transform:  translate(12em); }
.car:hover .parker {display : block; }

.service { display: none; position: absolute; top: 58%; left: 54%; width: 4em; height: 4em;  transform:  translate(12em) ; }
.car:hover .service {display : block; }

.anna { display: none; position: absolute; top: 40%; left: 60%; width: 4em; height: 4em; transform: rotate(45deg) translate(12em) rotate(-45deg);  }
.issu:hover .anna {display : block; }

.consul { display: none; position: absolute; top: 52%; left: 52%;  width: 4em; height: 4em;  transform: rotate(45deg) translate(12em) rotate(-45deg);  }
.issu:hover .consul {display : block; }

.disclaim { display: none; position: absolute; top: 60%; left: 40%; width: 4em; height: 4em; transform: rotate(45deg) translate(12em) rotate(-45deg);  }
.issu:hover .disclaim {display : block; }

.star { display: none; position: absolute; top: 54%; left: 57%;   width: 4em; height: 4em; transform: rotate(90deg) translate(12em) rotate(-90deg);  }
.manag:hover .star {display : block; }

.reput { display: none; position: absolute; top: 56%; left: 42%;  width: 4em; height: 4em; transform: rotate(90deg) translate(12em) rotate(-90deg);  }
.manag:hover .reput {display : block; }

.opera { display: none; position: absolute; top: 54%; left: 27%;  width: 4em; height: 4em; transform: rotate(90deg) translate(12em) rotate(-90deg);  }
.manag:hover .opera {display : block; }

.adult { display: none; position: absolute; top: 23%; left: 15%;  width: 4em; height: 4em; transform: rotate(135deg) translate(12em) rotate(-135deg);  }
.onlin:hover .adult {display : block; }

	.ch { display: none; position: absolute; top: -50%; left: 130%;  width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
	.disc:hover .ch {display : block; }
	
	.eu { display: none; position: absolute; top: 80%; left: 150%;  width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
	.disc:hover .eu {display : block; }

.alias { display: none; position: absolute; top: 36%; left: 20%;  width: 4em; height: 4em; transform: rotate(135deg) translate(12em) rotate(-135deg);  }
.onlin:hover .alias {display : block; }
	
	.aus { display: none; position: absolute; top: -70%; left: 110%;  width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
	.ling:hover .aus {display : block; }
	
	.switz { display: none; position: absolute; top: 36%; left: 130%;  width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
	.ling:hover .switz {display : block; }
	
	.germ { display: none; position: absolute; top: -10%; left: 142%;  width: 4em; height: 4em; transform: rotate(150deg) translate(12em) rotate(-150deg);  }
	.ling:hover .germ {display : block; }

.bridge { display: none; position: absolute; top: 49%; left: 28%; width: 4em; height: 4em; transform: rotate(135deg) translate(12em) rotate(-135deg);  }
.onlin:hover .bridge {display : block; }

	.club { display: none; position: absolute; top: 80%; left: -30%; width: 4em; height: 4em; transform: rotate(240deg) translate(12em) rotate(-240deg);  }
	.sport:hover .club {display : block; }

	.portal { display: none; position: absolute; top: 30%; left: 70%; width: 4em; height: 4em; transform: rotate(200deg) translate(12em) rotate(-200deg);  }
	.sport:hover .portal {display : block; }
	
	.reisen { display: none; position: absolute; top: 20%; left: 118%; width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
	.sport:hover .reisen {display : block; }
	
	.schule { display: none; position: absolute; top: -100%; left: 108%; width: 4em; height: 4em; transform: rotate(135deg) translate(12em) rotate(-135deg);  }
	.sport:hover .schule {display : block; }
	
	.bshop { display: none; position: absolute; top: -110%; left: 30%; width: 4em; height: 4em; transform: rotate(90deg) translate(12em) rotate(-90deg);  }
	.sport:hover .bshop {display : block; }
	
/*	.bshop { display: none; position: absolute; top: -20%; left: 0%; width: 4em; height: 4em; transform: rotate(60deg) translate(12em) rotate(-60deg);  }
	.sport:hover .bshop {display : block; } */

.second { display: none; position: absolute; top: 59%; left: 40%; width: 4em; height: 4em; transform: rotate(135deg) translate(12em) rotate(-135deg);  }
.onlin:hover .second {display : block; }

.tabling { display: none; position: absolute; top: 65%; left: 54%; width: 4em; height: 4em; transform: rotate(135deg) translate(12em) rotate(-135deg);  }
.onlin:hover .tabling {display : block; }

.vegan { display: none; position: absolute; top: 66%; left: 70%;   width: 4em; height: 4em; transform: rotate(135deg) translate(12em) rotate(-135deg);  }
.onlin:hover .vegan {display : block; }

.career { display: none; position: absolute; top: 15%; left: 33%;   width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
.succez:hover .career {display : block; }

.foyou { display: none; position: absolute; top: 29%; left: 28%;   width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
.succez:hover .foyou {display : block; }

.imcons { display: none; position: absolute; top: 43%; left: 26%;   width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
.succez:hover .imcons {display : block; }

.mancons { display: none; position: absolute; top: 57%; left: 30%;   width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
.succez:hover .mancons {display : block; }

.shop { display: none; position: absolute; top: 70%; left: 36%;   width: 4em; height: 4em; transform: rotate(180deg) translate(12em) rotate(-180deg);  }
.succez:hover .shop {display : block; }

.kader { display: none; position: absolute; top: 18%; left: 76%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .kader {display : block; }

.oshop { display: none; position: absolute; top: 16%; left: 61%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .oshop {display : block; }

.pimpc { display: none; position: absolute; top: 20%; left: 47%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .pimpc {display : block; }

.pimpi { display: none; position: absolute; top: 28%; left: 35%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .pimpi {display : block; }

.sauna { display: none; position: absolute; top: 40%; left: 24%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .sauna {display : block; }

.sexgot { display: none; position: absolute; top: 53%; left: 18%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .sexgot {display : block; }

.starinfo { display: none; position: absolute; top: 67%; left: 16%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .starinfo {display : block; }

.traum { display: none; position: absolute; top: 80%; left: 18%;   width: 4em; height: 4em; transform: rotate(225deg) translate(12em) rotate(-225deg);  }
.doma:hover .traum {display : block; }

.touch { display: none; position: absolute; top: 30%; left: 25%;   width: 4em; height: 4em; transform: rotate(270deg) translate(12em) rotate(-270deg);  }
.bout:hover .touch {display : block; }

.impress { display: none; position: absolute; top: 27%; left: 40%;   width: 4em; height: 4em; transform: rotate(270deg) translate(12em) rotate(-270deg);  }
.bout:hover .impress {display : block; }

.jobs { display: none; position: absolute; top: 30%; left: 55%;   width: 4em; height: 4em; transform: rotate(270deg) translate(12em) rotate(-270deg);  }
.bout:hover .jobs {display : block; }

.benic { display: none; position: absolute; top: 17%; left: 23%;   width: 4em; height: 4em; transform: rotate(315deg) translate(12em) rotate(-315deg);  }
.bib:hover .benic {display : block; }

.bio { display: none; position: absolute; top: 22%; left: 37%;   width: 4em; height: 4em; transform: rotate(315deg) translate(12em) rotate(-315deg);  }
.bib:hover .bio {display : block; }

.gesun { display: none; position: absolute; top: 30%; left: 50%;   width: 4em; height: 4em; transform: rotate(315deg) translate(12em) rotate(-315deg);  }
.bib:hover .gesun {display : block; }

.health { display: none; position: absolute; top: 43%; left: 58%;   width: 4em; height: 4em; transform: rotate(315deg) translate(12em) rotate(-315deg);  }
.bib:hover .health {display : block; }

.spiel { display: none; position: absolute; top: 56%; left: 64%;   width: 4em; height: 4em; transform: rotate(315deg) translate(12em) rotate(-315deg);  }
.bib:hover .spiel {display : block; }

.grow :hover {
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  z-index: 0;
 
  
   -webkit-transition: all 0.5s ease-in-out;
	 -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;  
          transition: all 0.5s ease-in-out;		  
}



#popup {
width: 100%;
height: 100%;
position: Absolute;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}

.window {
width: 600px;
height: 750px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 2% auto;
}

.six.columns { width: 74.46809%; }

.close-button {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}

#popup:target {
visibility: visible;
}

table.striped tr:nth-of-type(even), table table tr.stripe, table table tr.striped { background-color: #e5e5e5; }



.btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 600; padding: 0 !important; text-align: center; }
.btn > a, .btn input, .btn button, .skiplink > a, .skiplink input, .skiplink button { display: block; padding: 0 18px; color: #fff; height: 100%; }
.btn input, .btn button, .skiplink input, .skiplink button { background: none; border: none; width: 100%; font-size: 100%; cursor: pointer; font-weight: 400; -moz-appearance: none; -webkit-appearance: none; }

.btn.medium, .skiplink.medium { font-size: 14px; font-size: 1rem; height: 36px; line-height: 34px; }
.btn.medium a, .skiplink.medium a { position: relative; padding: 0 16px; }
.btn.medium.icon-left a, .skiplink.medium.icon-left a { padding-left: 36px; }
.btn.medium.icon-left a:before, .skiplink.medium.icon-left a:before { left: 10.66667px; }
.btn.medium.icon-right a, .skiplink.medium.icon-right a { padding-right: 36px; }
.btn.medium.icon-right a:after, .skiplink.medium.icon-right a:after { right: 10.66667px; }
.btn.medium a, .skiplink.medium a { padding: 0 18px; }

.btn.primary, .skiplink.primary { background: #3085d6; border: 1px solid #3085d6; }
.btn.primary:hover, .skiplink.primary:hover { background: #5b9ede; }
.btn.primary:active, .skiplink.primary:active { background: #236bb0; }