@font-face {
  font-family:          OpenSans;
  src:                  url("../img/../../../../logo/OpenSans-Regular.ttf");
}
body {
  font-family:          OpenSans, Sans-serif;
  font-size:            12pt;
  color:                #5c5c5c;
  padding:              0;
  margin:               0;
}
section {
  padding:              10px 50px;
}
h1, h2, h3 {
  margin:               5px 0;
}
h1 {
  font-size:            2em;
}
h2 {
  font-size:            1.2em;
}
a, a:visited, a:active {
  text-decoration:      none;
  text-shadow:          0px 1px 1px #ffffff;
}
#footer a{
  font-size:            10pt;
}
a:hover {
  text-decoration:      underline;
}
#header{
  margin-top:           20px;
  height:               120px;
}
#header > table {
  width:                90%;
  margin:               0 auto;
}
#logo_container {
  width:                234px;
  height:               29px;
  background-repeat:    no-repeat;
  background-position:  50% 50%;
}
#fortschrittsanzeige_container {
  text-align:           center;
}
#fortschrittsanzeige {
  border-spacing:       0;
  border-collapse:      collapse;
  margin-left:          100px;
}
#fortschrittsanzeige tbody tr td {
  padding:              0;
}
.kugel {
  width:                75px;
  height:               75px;
  position:             relative;
}
.kugel_untertitel {
  position:             absolute;
  top:                  80px;
  left:                 -63px;
  width:                200px;
  font-size:            10pt;
}
.verbindung_zwischen_Kugeln_container {
  width:                25%;
}
.verbindung_zwischen_Kugeln {
  background-image:     url("../img/ladebalken_hintergrund.png");
  background-repeat:    repeat-x;
  background-position:  0 2px;
}

#kugel_schritt_2 {
  background-position:  -75px 0px;
}
#kugel_schritt_3 {
  background-position:  -150px 0px;
}
#kugel_schritt_4 {
  background-position:  -225px 0px;
}
#kugel_schritt_1_abgeschlossen {
  background-position:  0px -75px;
}
#kugel_schritt_2_abgeschlossen {
  background-position:  -75px -75px;
}
#kugel_schritt_3_abgeschlossen {
  background-position:  -150px -75px;
}
#kugel_schritt_4_abgeschlossen {
  background-position:  -225px -75px;
}
/*************************************************************************************************
/ 4  S C H R I T T E
/*************************************************************************************************/
#willkommensgruss_container {
  width:                80%;
  margin:               0 auto;
}
#willkommensgruss_container > h1, #glueckwunsch_container > h1 {
  text-align:           center;
}
#vier_schritte_container {
  margin:               0 auto;
}
#vier_schritte_grafik_container {
  width:                200px;
}
#vier_schritte_grafik {
  width:                90px;
  height:               90px;
  background-position:  0 0;
  margin:               0 auto;
  background-repeat:    no-repeat;
}
#vier_schritte_grafik_untertitel {
  text-align:           center;
}
/*************************************************************************************************
/ 4  S C H R I T T E  E N D E
/*************************************************************************************************/
/*************************************************************************************************
/ A N M E L D E F O R M U L A R
/*************************************************************************************************/
section#anmeldeformular {
  min-height:           350px;
  background-image:     url("../img/background_form.jpg");
  background-size:      cover;
}
#formular_container {
  margin:               50px auto 0px auto;
  width:                620px;
}
#formular_zelle {
  width:                400px;
}
#button_zelle {
  width:                100px;
}
input[type=text], select {
  width:                200px;
}
.formular table tbody tr td:first-child {
  text-align:           right;
  padding:              5px;
  text-shadow:          0 1px 2px #ffffff;
  font-weight:          600;
  color:                #3c3c3c;
}
#link_referenznummer {
  color:                #3c648c;
}
#link_referenznummer:hover {
  background-color:     rgba(255,255,255,0.75);
}
.button {
  border-radius:        8px;
  box-shadow:           0 1px 2px #c1c1c1;
  color:                #ffffff;
  font-size:            10pt;
  font-weight:          bold;
  padding:              6px 10px;
}
.button:hover {
  cursor:               pointer;
}
#registrieren_button {
  padding:              6px 30px;
}
/*************************************************************************************************
/ A N M E L D E F O R M U L A R  E N D E
/*************************************************************************************************/

/*************************************************************************************************
/ A K T I V I E R U N G S N U M M E R
/*************************************************************************************************/
#aktivierungsnummer_container {
  animation:            aktivierungsnummer_container_farbe_aendern 1s linear;
  -webkit-animation:    aktivierungsnummer_container_farbe_aendern 1s linear;
  width:                93%;
  margin:               0 auto;
  margin-top:           40px;
}
#aktivierungsnummer_container:hover {
  animation:            none;
}
#aktivierungsnummer_grafik {
  width:                125px;
  height:               125px;
}
#aktivierungsnummer_text_container {
  padding:              20px;
  text-align:           center;
}
/*************************************************************************************************
/ A K T I V I E R U N G S N U M M E R  E N D E
/*************************************************************************************************/

/*************************************************************************************************
/ F I R M E N D A T E N
/*************************************************************************************************/
#firmendaten_container {
  width:                87%;
  margin:               0 auto;
  padding:              0 20px 20px 20px;
}
.firmendaten_label {
  text-align:           right;
  font-weight:          600;
  padding:              5px;
}
#tarifauswahl_container {
  width:                87%;
  margin:               30px auto 0 auto;
  padding:              0 20px 20px 20px;
}
#tarifauswahl_container tr td {
  vertical-align:       top;
  padding:              5px;
}
/*************************************************************************************************
/ F I R M E N D A T E N   E N D E
/*************************************************************************************************/

#benutzerdaten_container {
  width:                50%;
  margin:               26px auto;
  padding:              0 20px 20px 20px;
}
#benutzer_kontaktdaten_container {
  margin-left:          calc(50% - 190px);
}
/*************************************************************************************************
/ B E S T A E T I G U N G
/*************************************************************************************************/
#glueckwunsch_container {
  width:                80%;
  margin:               0 auto;
  text-align:           center;
}
#bestaetigung_container {
  width:                97%;
  margin:               0 auto;
  margin-top:           40px;
  padding:              20px;
}
#bestaetigung_grafik {
  width:                125px;
  height:               125px;
  background-image:     url("../img/haken_125x125.png");
}
#bestaetigung_text_container {
  padding:              10px;
  text-align:           center;
}
/*************************************************************************************************
/ B E S T A E T I G U N G   E N D E
/*************************************************************************************************/

/*************************************************************************************************
/ F O O T E R
/*************************************************************************************************/
#footer {
  text-align:           center;
  padding-top:          25px;
}
/*************************************************************************************************
/ F O O T E R  E N D E
/*************************************************************************************************/

/*************************************************************************************
/* BBL-interne POPUP WINDOWS
/*************************************************************************************/
/*
* BBL-interne Popup-Windows
*/
.md-modal {
	position: fixed;
	top: 40%;
	left: 50%;
	width: 35%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0,0, 0,0.4);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-modal .content_wrapper {
  border:               5px solid rgba(255, 255, 255, 0.5);
}
.md-modal .content_container_wrapper {
  background:           rgba(255, 255, 255, 1);
  box-shadow:           0 0 2px #444444;
}
.md-modal .content_container {
  color:                #5c5c5c;
  padding:              0 20px 10px;
}

#handle {
  height:               30px;
}

.md-modal .content_container h3 {
	margin:               0;
	font-size:            1.5em;
	opacity:              0.8;
  color:                #00b0f0;
}

.md-modal .content_container .content, .md-modal .content_container .button_container {
  margin-top:           25px;
}

.md-modal .content_container .button_container:before,
.md-modal .content_container .button_container:after {
    content:"";
    display:table;
}
.md-modal .content_container .button_container:after {
  clear: both;
}

.md-modal .button_container {
  height: 35px;
}

.md-modal .content_container button {
  background:                 transparent;
  cursor:                     pointer;
  padding:                    6px 12px; 
  -moz-box-sizing:            border-box;
  box-sizing:                 border-box;
  float:                      right;
  border:                     none;
  font-size:                  11pt;
  color:                      #ffffff;
  float:                      right;
  padding:                    5px 10px;
  border:                     1px solid #00a0d0;
  border-radius:              2px;
  background-color:           #00b0f0;
  margin-left:                10px;
}

.md-modal .content_container button:hover {
  text-decoration:            underline;
}


.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Effect 1: Fade in and scale up */
.md-effect-1 .content_wrapper {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-1 .content_wrapper {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
/*************************************************************************************
/* ENDE BBL-interne POPUP WINDOWS
/*************************************************************************************/

.kontaktdaten_floater {
    position: fixed;
    top: calc(48vh - 138px/2);
    right: 0px;
    width: 200px;
    background-color: #FFF;
    border: 2px solid;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
    padding: 5px 5px 0px 20px;
}
.kontaktdaten_floater_icon {
    vertical-align: bottom;
    width: 1.2em;
}
.kontaktdaten_floater_closer {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 14px;
    filter: grayscale(100%);
    opacity: 0.3;
    cursor: pointer;
}
.kontaktdaten_floater_closer:hover {
    filter: unset;
    opacity: 1;
}