/********************************************************************************************************************/
/*Flexbox - Style - Trackdaten*/

.flex-container_xxxxxxxxxxxxxxxxxxxxxxx {
	display: flex; 								/* We first create a flex layout context */
	flex-flow: row nowrap;						/*row = Objekte in Reihe || nowrap = bei engerem Bild nicht in näschte Zeile verspringen*/
	justify-content: space-around;				/*space-around = verteilt die Objekte auf der ganzen breite*/
/*	justify-content: stretch;*/					/*stretch dehnt die Objekte auf der ganzen breite*/
	padding: 0;
	margin: 0;
	border: 5px solid green;					/*Rahmenfarbe*/
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/
}

.flex-container-100 {
	display: flex; 								/* We first create a flex layout context */
	flex-flow: row nowrap;						/*row = Objekte in Reihe || nowrap = bei engerem Bild nicht in näschte Zeile verspringen*/
	justify-content: space-around;				/*space-around = verteilt die Objekte auf der ganzen breite*/
/*	justify-content: stretch;*/					/*stretch dehnt die Objekte auf der ganzen breite*/
	padding: 0;
	margin: 0;
	border: 5px solid green;					/*Rahmenfarbe*/
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/
}

.flex-container-innen-100 {
	display: flex; 								/* We first create a flex layout context */
	flex-flow: row nowrap;						/*row = Objekte in Reihe || nowrap = bei engerem Bild nicht in nächste Zeile verspringen*/
	justify-content: space-around;				/*space-around = verteilt die Objekte auf der ganzen breite*/
	width:100%;
/*	justify-content: stretch;*/					/*stretch dehnt die Objekte auf der ganzen breite*/
	padding: 0;
	margin: 0;
	border: 5px solid white;					/*Rahmenfarbe*/
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/
}

.flex-container-innen-30 {
	display: flex; 								/* We first create a flex layout context */
	flex-flow: row nowrap;						/*row = Objekte in Reihe || nowrap = bei engerem Bild nicht in näschte Zeile verspringen*/
	justify-content: space-around;				/*space-around = verteilt die Objekte auf der ganzen breite*/
	width:30%;
/*	justify-content: stretch;*/					/*stretch dehnt die Objekte auf der ganzen breite*/
	padding: 0;
	margin: 0;
	border: 5px solid magenta;					/*Rahmenfarbe*/
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/
}

.flex-container-col-100 {
	display: flex;								/*Befehl - auf Flex stellen*/
	flex-direction: column; 					/*colum = Anordnung Untereinander*/
	align-items: center;
	width:100%;
	border: 5px solid orange;					/*Rahmenfarbe*/
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/
}	

.flex-container-col-70 {
	display: flex;								/*Befehl - auf Flex stellen*/
	flex-direction: column; 					/*colum = Anordnung Untereinander*/
	align-items: center;
	width:70%;
	border: 5px solid orange;					/*Rahmenfarbe*/
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/
}	

.flex-container-col-30 {
	display: flex;								/*Befehl - auf Flex stellen*/
	flex-direction: column; 					/*colum = Anordnung Untereinander*/
	align-items: center;
	width:30%;
	border: 5px solid yellow;					/*Rahmenfarbe*/
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/
}	

.flex-item {
	background: tomato;
	padding: 2px;								/*Textabstand innen zum Rand*/
/*  width: 200px;*/
	width:100%;
/*	height: 150px; */							/*wenn height nicht angegeben wird, ist die Box so groß wie nötig! Gut!!*/
/*	margin-top: 40px;	*/						/*Abstand aussen oben*/
	line-height: 30px;							/*Höhe der Eingabefelder*/
	color: white;
	font-weight: bold;
	font-size: 3em;
	text-align: left;
	list-style: none;							/*Listen Aufzählungszeichen abschalten - Punkte oder dergleichen*/	
	border: 5px solid blue;						/*Rahmenfarbe*/
}

.flex-item-col {
	background: white;
	padding: 3px;								/*Textabstand innen zum Rand*/
/*  width: 200px;*/
	width:90%;
/*	height: 150px; */							/*wenn height nicht angegeben wird, ist die Box so groß wie nötig! Gut!!*/
	margin-top: 4px;							/*Abstand aussen oben*/
	line-height: 30px;
	color: black;								/*Textfarbe*/
	font-weight: bold;						
	font-size: 2em;
	text-align: left;
	border: 1px solid red;						/*Rahmenfarbe*/
}

.fb_trk_wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;							/*Befehl - auf Flex stellen*/
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row; 					/*Anordnung - in Reihe*/
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-bottom: 10px solid #600;			/*Rahmenfarbe*/
}	

.fb_trk_wrapper_col {
	display: flex;							/*Befehl - auf Flex stellen*/
	flex-direction: column; 				/*Anordnung - in Reihe*/
	align-items: center;
	border-bottom: 10px solid #600;			/*Rahmenfarbe*/
}	

.fb_trk_wrapper_sp1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;							/*Befehl - auf Flex stellen*/
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;								/*Breite - 1 = alle Childs werden gleichmässig auf ganzer Breite verteilt*/
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column; 				/*Anordnung - in Spalte*/
	border-left: 1px solid grey;			/*Rahmenfarbe*/
	border-right: 1px solid grey;			/*Rahmenfarbe*/
	border: 5px solid red;					/*Rahmenfarbe*/
}	

.fb_trk_wrapper_sp2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;							/*Befehl - auf Flex stellen*/
	-webkit-box-flex: 2;
	-ms-flex: 2;
	flex: 2;								/*Breite - 1 = alle Childs werden gleichmässig auf ganzer Breite verteilt*/
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column; 				/*Anordnung - in Spalte*/	
	border: 4px solid green;				/*Rahmenfarbe*/
}	

.fb_trk {
	color:white;
	font-size: 100px;
	text-align: left;
/*	text-shadow: 1px 1px 0 rgba(0,0,0,0.4);*/
}

.fb_trk {
	font-size:14px;
	margin: 0 3px 0 3px;
}

.fb_trk { 
	width:100%;							/*Breite*/
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;							/*Breite - 1 = alle Childs werden gleichmässig auf ganzer Breite verteilt*/
} 
.fb_trk_sp2 img{
	-webkit-box-shadow: 3px 3px 5px grey, -3px -3px 5px grey;
	-o-box-shadow: 3px 3px 5px grey, -3px -3px 5px grey;
	-ms-box-shadow: 3px 3px 5px grey, -3px -3px 5px grey;
	box-shadow: 3px 3px 5px grey, -3px -3px 5px grey;
	margin:4px;
}

.fb_trk_sp2 img{ 
	height:40px;
	width:40px;
}

.fb_trk_ue1 { background:#666;}
.fb_trk_ue2 { background:#999;}
.fb_trk_ue3 { background:#666;}

/*.fb_trk_ue5 { 
	text-align: left;
}*/

.fb_trk_tab2 { 
	-webkit-box-flex: 7 1 auto; 
	-ms-flex: 7 1 auto; 
	flex: 7 1 auto;
}

.fb_trk_sp1 { 
	-webkit-box-flex: 1; 
	-ms-flex: 1; 
	flex: 1;							/*Breite - 2 = Box3 2 x so breit wie der Rest*/
}

.fb_trk_sp2 { 
	-webkit-box-flex: 1; 
	-ms-flex: 1; 
	flex: 1;							/*Breite - 2 = Box3 2 x so breit wie der Rest*/
}

.fb_trk_sp3 { 
	-webkit-box-flex: 1; 
	-ms-flex: 1; 
	flex: 1;							/*Breite - 2 = Box3 2 x so breit wie der Rest*/
}

.fb_trk_sp4 { 
	-webkit-box-flex: 1; 
	-ms-flex: 1; 
	flex: 1;							/*Breite - 2 = Box3 2 x so breit wie der Rest*/
}

.fb_trk_sp5 { 
	-webkit-box-flex: 1; 
	-ms-flex: 1; 
	flex: 1;							/*Breite - 2 = Box3 2 x so breit wie der Rest*/
/*	text-align: left;*/
}

.fb_trk_sp6 { 
	-webkit-box-flex: 1; 
	-ms-flex: 1; 
	flex: 1;							/*Breite - 2 = Box3 2 x so breit wie der Rest*/
}

.fb_trk_sp { 
	-webkit-box-flex: 1; 
	-ms-flex: 1; 
	flex: 1;							/*Breite - 2 = Box3 2 x so breit wie der Rest*/
}

.fb_trk_tx1 { 
	color:#06F;
	font-size: 22px;
	font-weight:bold;
	margin:20px 0 20px 0;
}

.fb_trk_tx2 { 
	color:#0F6;
	font-size: 22px;
	font-weight:bold;
	margin:20px 0 20px 0;
}

.fb_trk_tx3 { 
	color:#F00;
	font-size: 22px;
	font-weight:bold;
	margin:20px 0 20px 0;
}

/*___________________________________________________________________________*/
/*Eingabeformular*/

.fb_trk_form-style{
/*  clear: both;*/
	display: flex;											/* We first create a flex layout context */
	flex-wrap: nowrap;										/*row = Objekte in Reihe || nowrap = bei engerem Bild nicht in näschte Zeile verspringen*/
	width:100%;
	padding:20px;
	margin: 0 0 1px 0;
	background: #FFF;
	-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.13);
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.13);
	border: 5px solid #333;
/*	background: url(../img/form-bck-pgm-smal.jpg) no-repeat center center fixed; */		/*Bild bedeckt immer, auch bei Zoom, den ganzen Bereich!*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	border: 4px dotted red;							/*Rahmenfarbe*/	
}

.fb_trk_form-style .inner-wrap{						/*Breite vom Eingabeformular*/
	width:500px;
	padding: 4px;
	background: #F8F8F8;
	border-radius: 3px;
	margin-bottom: 5px;
	border: 4px dotted yellow;						/*Rahmenfarbe*/	
}

.fb_trk_form-style h1{
	background:#000;
	padding: 20px 30px 15px 30px;
	margin: -30px -30px 30px -30px;
	font-size: 1.75em;
	font-weight: normal;
	font-family: 'Germania One', serif, Helvetica, Verdana, sans-serif;
	background: url(../img/form-bck-mrmr-blk.jpg) no-repeat center center fixed; 		/*Bild bedeckt immer, auch bei Zoom, den ganzen Bereich!*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;		
	color: #fff;															
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
	-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
	border:none;
}

.fb_trk_form-style h1 > span{
	display: block;		/*neue Zeile*/
 /*   overflow: hidden;*/
	margin-top: 2px;
	font: 13px Arial, Helvetica, sans-serif;
	color:#CCC;
}

.fb_trk_form-style span{
    display: block;
    overflow: hidden;
    padding: 0 6px 0 6px
}

.fb_trk_form-style label{
	display: block;					/*Nebeneinander*/
    width: 300px;
	font: 13px Arial, Helvetica, sans-serif;
	color:#888;
	margin-bottom: 10px;
}

.fb_trk_form-style input[type="text"],
.fb_trk_form-style input[type="date"],
.fb_trk_form-style input[type="datetime"],
.fb_trk_form-style input[type="email"],
.fb_trk_form-style input[type="number"],
.fb_trk_form-style input[type="search"],
.fb_trk_form-style input[type="time"],
.fb_trk_form-style input[type="url"],
.fb_trk_form-style input[type="password"],
.fb_trk_form-style textarea,
.fb_trk_form-style select {
     display: block;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     width: 100%;
     padding: 8px;
     border-radius: 3px;
     border: 2px solid #fff;
     -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
     box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
	font-family: Helvetica, Verdana, sans-serif;
}

.fb_trk_form-style .select_time select{
	float: left;
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 50%;
    padding: 8px;
    border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border: 2px solid #fff;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}

.select_time_clear {
	clear: both;
}

.fb_trk_form-style .section{
     font: normal 20px 'Bitter', serif;
     color: #000;
     margin-bottom: 5px;
}

.fb_trk_form-style .section span {			/*Runde Anzeige*/
     background:#000;
     padding: 5px 10px 5px 10px;
     position: absolute;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border: 4px solid #fff;
     font-size: 14px;
     margin-left: -45px;
     color: #fff;
     margin-top: -3px;
}

.fb_trk_form-style input[type="button"], 
.fb_trk_form-style input[type="submit"]{
     background:#000;
     padding: 8px 20px 8px 20px;				/*Textabstand nach innen*/
     border-radius: 5px;
     color: #fff;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
     font: normal 30px 'Bitter', serif;
     -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
     box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
     border: 1px solid #999;
     font-size: 15px;
}

.fb_trk_form-style input[type="button"]:hover, 
.fb_trk_form-style input[type="submit"]:hover{
     background: #333;
     -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
     box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}

.fb_trk_form-style .privacy-policy{
     float: right;
     width: 250px;
     font: 12px Arial, Helvetica, sans-serif;
     color: #4D4D4D;
     margin-top: 30px;
     text-align: right;
}



/*Test_________________________*/
.pull-right {
  display: flex;
  flex-wrap: nowrap;
}

.pull-right input{  
	border: 1px solid green;
}

.pull-right label{ 
	border: 1px solid red; 
	display: inline-block;
}
.pull-right span{ 
	border: 1px solid red; 
	display: block;
}
/*_________________________*/

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* CSS3 Stylesheet E N D E  */