/* Toni singt Webseite +++++++++++++++++++++++++++++++++++*/
/* Styles die f�r alle Seiten gelten, inklusive Starseite*/

@import url(https://fonts.googleapis.com/css?family=PT+Sans|PT+Serif);


#ts_anmeldungSchulung input,
#ts_anmeldungSchulung select,
#ts_anmeldungSchulung textarea
{
	border: none;
	background-color: whitesmoke;
	border-radius: 5px;
	margin-bottom: 5px;
	padding: 5px 10px;
}

#ts_anmeldungSchulung input,
#ts_anmeldungSchulung textarea{
	width: calc(100% - 20px);
}

#ts_anmeldungSchulung select{
	width: calc(100%);
}


.toni_submit_button {
	border: none;
	padding: 5px 15px;
	background-color: #214b8a !important;
	color: white;
	border-radius: 4px;
	width: auto !important;
}

.toni_submit_button:hover {
	cursor: pointer;
	background-color: #438af4 !important;
}

#suchErgebnisse th {
	background-color: #043882;
	color: white;
}

#suchErgebnisse tr:nth-child(odd) {
	background-color: whitesmoke;
}

#suchErgebnisse td,
#suchErgebnisse th {
	padding: 10px;
}

/* Inhalte erstmal verstecken bis alle Inhalte der digitalen Schulungsangebote vorhanden sind */
.digi_hidden {
	/*display: none !important;*/
}

.digi_modul {
	padding: 5px 25px;
	margin-bottom: 15px;
	font-size: 14px;
	line-height: 22px;
	background-color: #ebebeb!important;
}

#digi_modul_0_head {
	color: rgb(0, 0, 0) !important;
}

#digi_modul_1 .digi_modul_headline,
#digi_modul_12 .digi_modul_headline,
#digi_modul_1_head,
#digi_modul_12_head {
	color: rgb(240,156,34) !important;
}

#digi_modul_2 .digi_modul_headline,
#digi_modul_22 .digi_modul_headline,
#digi_modul_2_head,
#digi_modul_22_head {
	color: rgb(37,64,143) !important;
}

#digi_modul_3 .digi_modul_headline,
#digi_modul_32 .digi_modul_headline,
#digi_modul_3_head,
#digi_modul_32_head {
	color: rgb(241,38,16) !important;
}

#digi_modul_0_head,
#digi_modul_1_head,
#digi_modul_12_head,
#digi_modul_2_head,
#digi_modul_22_head,
#digi_modul_3_head,
#digi_modul_32_head {
	background-color: whitesmoke;
	padding: 5px;
	text-align: left;
}

.digi_modul_headline {
	font-weight: bold;
}

.digi_button {
	background-color: rgb(37 64 143);
	color: white;
	text-decoration: none;
	padding: 15px 25px;
	text-align: center;
	border: none;
	font-weight: bold;
	font-size: 15px;
	/*opacity: 0.75;*/
}

.digi_button_small {
	padding: 10px 15px !important;
	font-size: 13px !important;
}

.digi_button:hover {
	opacity: 1;
	color: white !important;
	text-decoration: none !important;
}

.digi_notice_container {
	padding: 20px;
	margin-bottom: 15px;
	background-color: #f2f2f2;
}
.ts_hidden_input_einzelanmeldung,
.ts_hidden_input_gruppenanmeldung {
	display: none;
}

.digi_details_heading {
	padding-top: 15px;
}

body {
	height: 100%;
	width: 100%;
	text-align: left;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border: 0px;
	background-color: #E2E7EE;
	/*font-family: PT Serif, Times, serif;*/
	font-family: PT Sans, Arial,  sans-serif;
	word-spacing: 2px;
	/*letter-spacing:1px;*/
	font-size: 13px;
	color: #000000;
}

/* animated button */

.ts_animatedButtonContainer,
.ts_animatedButtonContainer:hover {
	text-decoration: none !important;
}

.ts_animatedElementText {
	position: relative;
	top: 37px;
	left: 11px;
	z-index: 10;
	font-weight: bold;
	font-size: 18px;
}

.ts_animatedElement {
	background: linear-gradient(358deg, #043882, #e50673);
	background-size: 400% 400%;
	-webkit-animation: GradientTransition 3s ease infinite;
	-moz-animation: GradientTransition 3s ease infinite;
	-o-animation: GradientTransition 3s ease infinite;
	animation: GradientTransition 3s ease infinite;
	clip-path: polygon(0% 0%, 26% 0, 36% 50%, 26% 100%, 0% 100%);
	height: 50px;
	position: relative;
	top: 0;
	z-index: 1;
}

.ts_animatedElementBorder {
	background: white;
	clip-path: polygon(0% 0%, 27% 0, 38% 50%, 27% 100%, 0% 100%);
	height: 56px;
	position: relative;
	top: -53px;
	box-shadow: inset 12px 5px 11px 0 #828282;
}

.ts_animatedBarText {
	position: relative;
	bottom: -129px;
	left: 15px;
	z-index: 10;
	font-weight: bold;
	font-size: 18px;
}

.ts_animatedBar {
	background: linear-gradient(358deg, #043882, #e50673);
	background-size: 400% 400%;
	-webkit-animation: GradientTransition 3s ease infinite;
	-moz-animation: GradientTransition 3s ease infinite;
	-o-animation: GradientTransition 3s ease infinite;
	animation: GradientTransition 3s ease infinite;
	clip-path: polygon(0 50%, 101% 20%, 101% 100%, 0 100%);
	height: 97px;
	position: relative;
	bottom: -47px;
	z-index: 1;
}

.ts_animatedBarBorder {
	background: white;
	clip-path: polygon(0% 51%, 101% 20%, 101% 100%, 0% 100%);
	height: 97px;
	position: relative;
	bottom: 58px;
	box-shadow: inset 0 0 20px 20px #a7a7a7;
}

@-webkit-keyframes GradientTransition {
	0%{background-position:0 7%}
	50%{background-position:100% 94%}
	100%{background-position:0 7%}
}
@-moz-keyframes GradientTransition {
	0%{background-position:0 7%}
	50%{background-position:100% 94%}
	100%{background-position:0 7%}
}
@-o-keyframes GradientTransition {
	0%{background-position:0 7%}
	50%{background-position:100% 94%}
	100%{background-position:0 7%}
}
@keyframes GradientTransition {
	0%{background-position:0 7%}
	50%{background-position:100% 94%}
	100%{background-position:0 7%}
}

.ts_animatedButtonImage {
	background-image: url(img/design/buttons/child_image.jpg);
	/*background-size: cover;*/
	/*background-position: center;*/
	width: 211px;
	height: 300px;
	color: white;
	font-family: "Open Sans", sans-serif;
	box-shadow: inset 0 0 40px 20px #00000096;
	border: 1px solid #043882;
	box-sizing: border-box;
	filter: brightness(0.9);
	margin-bottom: 15px;
}

.ts_animatedButtonImage:hover {
	cursor: pointer;
	box-shadow: inset 0 0 40px 10px #00000096;
	filter: brightness(1.1);
}



/************************** Main **************************/

#main {
	width:1004px;
	min-height:500px;
	height: auto;		
	margin: 0px auto 0px auto;
	padding: 0px;
	border: 0px;
	background-color: #ffffff;
}

/*  ************ Kopf (nicht auf Startseite verwendet) **************/
#kopf {
	width:844px;
	height:54px;
	margin: 0px 0px 15px 160px;
	padding: 0px;
	border: 0px;
	
}



/*  ************ Navi (nicht auf Startseite verwendet) **************/

#navi { width:160px; height: auto; float:left; display:inline; margin: 0px; padding: 0px; border: 0px;}

#navi_inhalt {padding: 0px 0px 0px 10px;}

#navi_ueberschrift {
	border: solid #043882 5px;
	background-color:#043882;
	color:#FFFFFF;
	font-weight:bold;
}



/**************************Sidebar(nicht auf Start) **************************/
#sidebar {
	width:211px;
	/*min-height:760px;*/
	min-height:650px;
	height: auto;
	float:right;
	display:inline;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border: 0px;
}

#sidebar img {margin: 0px 0px 14px 0px;}


.clearfix {
	clear:both;
}

/************************** Footer **************************/
#footer {
	width:1004px;
	height:66px;
	margin: 0px auto 0px auto;
	padding: 0px;
	border: 0px;
	background-color:#dcdcdc;
	background-repeat: no-repeat;	
	font-family: PT Sans, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	text-align:left;
	clear: both;
}

#footer_inhalt {
	margin: 0px;
	padding: 7px 0px 0px 0px;
	border: 0px;
}

.navi_unten {padding: 0px 0px 0px 130px;}




/*************************************************************/

/************************** Sonstiges **************************/

h1{ font-family: PT Sans, Arial, Helvetica, sans-serif; font-size:19px; color:#043882; }
h2{ font-family: PT Sans, Arial, Helvetica, sans-serif; font-size:13px; color:#043882; }
h3{ }
h4{ }

.s{ font-size:11px;}
.s_rot {color:#E42618; font-size:11px;}	
.m{ }
.m_blau { color:#043882; font-size:12px; font-weight:bold;}
.l {font-size: 16px; font-weight:bold; color:#333333;}
.l_rot {font-size: 16px; color:#E42618; font-weight:bold;}
.xl{ }

.zitate {
	font-size:11px;
	font-style: italic;
	color:#333333;
}	

.rot {color:#E42618;}

a { text-decoration: underline; color:#000000; cursor: pointer; }
a:hover { text-decoration: underline; color:#E42618;  cursor: pointer;}

a.kinderseite { text-decoration: none; color:#333333; }
a.kinderseite:hover { text-decoration: none; color:#333333;}


a.navi       { font-family: PT Sans, Arial, Helvetica, sans-serif; text-decoration:none; color:#000000; display:block; border-bottom:solid 1px; margin: 10px 0px 5px 0px; }
a.navi:hover { text-decoration:none; color:#E42618; }
a.navi#aktiv { font-family: PT Sans, Arial, Helvetica, sans-serif; text-decoration:none ;  color:#E42618; }

.strich {padding: 0px 8px 0px 8px;}

#player_position {position: absolute; margin-top: 20px; margin-left: 1px; margin-right: 1px; width: 209px; overflow:hidden;}
#player { width:211px;}



.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }


#video_startseite { width:425px; height:257px; /*background-image:url(img/video/hg_video-startseite.png); background-repeat:no-repeat;*/}
.video_start {margin: 5px 0px 0px 5px;}

.img_kontakt {margin: 0px 15px 15px 15px; }

/* Responsives YouTube Video Anfang */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Responsives YouTube Video Ende */

/* Accordeon Effekt Start */

		.ofa_akkordeonButton {
            width: 100%;
            padding: 8px;
            margin-bottom: 3px;
            border: 0px;
            background-color: #023a7c;
            font-size: 16px;
            font-weight: normal;
            color: white;
            cursor: pointer;
            transition: 0.5s; }

        .ofa_akkordeonButtonAktiv, .ofa_akkordeonButton:hover {
            background-color: #ffb121;
            font-weight: bold; }

        .ofa_akkordeonEinheit {
            max-height: 0px;
            background-color: #ffffff;
            padding: 0px 12px;
            overflow: hidden;
            transition: max-height 0.5s linear }

		.ofa_akkordeonButton:after {
            content: ">";
            float: right;
            margin-left: 7px;
            font-size: 18px;
            color: #fff; }

        .ofa_akkordeonButtonAktiv:after {
            content: "<";
            float: right;
            margin-left: 7px;
            font-size: 18px;
            color: #fff; }

/* Accordeon Effekt Ende */