@font-face {
    font-family: 'akrobatregular';
    src: url('../fonts/akrobat-regular-web.eot');
    src: url('../fonts/akrobat-regular-web.eot?#iefix') format('embedded-opentype'),
         url('../fonts/akrobat-regular-web.woff2') format('woff2'),
         url('../fonts/akrobat-regular-web.woff') format('woff'),
         url('../fonts/akrobat-regular-web.ttf') format('truetype'),
         url('../fonts/akrobat-regular-web.svg#akrobatregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'akrobatsemibold';
    src: url('../fonts/akrobat-semibold-web.eot');
    src: url('../fonts/akrobat-semibold-web.eot?#iefix') format('embedded-opentype'),
         url('../fonts/akrobat-semibold-web.woff2') format('woff2'),
         url('../fonts/akrobat-semibold-web.woff') format('woff'),
         url('../fonts/akrobat-semibold-web.ttf') format('truetype'),
         url('../fonts/akrobat-semibold-web.svg#akrobatsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
} 

@font-face {
    font-family: 'akrobatbold';
    src: url('../fonts/akrobat-bold-web.eot');
    src: url('../fonts/akrobat-bold-web.eot?#iefix') format('embedded-opentype'),
         url('../fonts/akrobat-bold-web.woff2') format('woff2'),
         url('../fonts/akrobat-bold-web.woff') format('woff'),
         url('../fonts/akrobat-bold-web.ttf') format('truetype'),
         url('../fonts/akrobat-bold-web.svg#akrobatbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

.rot { color:rgb(227,6,19) !important; } /* #E30613 */    /* ALT (229,11,55) #E50B37 */
.grau-dunkel { color:rgb(77,77,77) !important; }
.grau-hell { color:rgb(230,230,230) !important; }

.right { text-align:right; }

body {
	padding-top: 56px;
	font-family: 'akrobatregular', sans-serif;
	color:rgb(77,77,77);
	font-size:12pt;
/*	background:url("../images/background.jpg");
	background-position:center;
	background-attachment:fixed;
	background-size:cover;*/
}

/* TOP NAV */
.fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
    z-index: 1030;
    height: 90px;
	border-bottom:1px solid rgb(227,6,19);
}

.navbar-brand {
    padding-top: 0px;
}

.navbar-light .navbar-nav .nav-item .nav-link {
	font-size: 20px;
	text-transform:uppercase;
	font-family: 'akrobatsemibold', sans-serif;
}

.nav-aktuell {
	color: rgb(227,6,19) !important;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .8rem;
    padding-left: .8rem;
}

.XXXX navbar-expand-lg .navbar-nav .nav-link:before {
	content: "| ";
}
.XXXX navbar-expand-lg .navbar-nav:last-child .nav-link:after {
	content: "";
}

.dropdown-menu {
    font-size: 20px;
	text-transform:uppercase;
}

.dropdown-menu a {
	color:rgb(77,77,77);
}

.dropdown-item:focus, .dropdown-item:hover {
	color:rgb(227,6,19) !important;
}
/* ./ TOP NAV */

.carousel-item {
	height: 65vh;
	min-height: 300px;
	background: no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

header {
	position:relative;
	height:600px;
	margin-bottom:50px;
}

.signet {
	height:600px; 
	z-index:100;
}

#svg-header-bottom {
	position: absolute;
	bottom: -1px;
	width: 100%;
	height: 150px;
}

#logo-label {
	background-image:url(../images/ttc_logo-label.svg);
	background-repeat:no-repeat;
	background-size:contain;
	width:235px; 
	height:235px; 
	position:absolute; 
	bottom:0px; 
	right:0px;
}

.portfolio-item {
  margin-bottom: 30px;
}

/* kipp-version
#zwischenstreifen1 {
	background-color:rgb(227,6,19);
	transform:skewY(3deg);
	height:300px;
	margin-top:150px;
}

#zwischen11 {
	transform:skewY(-3deg);
	background-image:url(../images/tkwd.svg);
	background-repeat:no-repeat;
	background-position:center;
	padding-top:30px;
	padding-left:30px;
	font-family: 'akrobatsemibold', sans-serif;
	font-size:48px;
	line-height:normal;
	color:#FFF;
}

#zwischen21 {
	margin-top:-132px; 
	height:432px; 
	background-image:url(../images/niklas.png); 
	background-repeat:no-repeat; 
	background-position:right bottom; 
	overflow:hidden;
}
*/

#zwischenstreifen {
	background-color:rgb(227,6,19);
	height:433px;
	position:relative;
}

#zwischen1 {
	background-image:url(../images/tkwd-20.svg);
	background-repeat:no-repeat;
	background-position:center 130px;
	padding-top:140px;
	font-family: 'akrobatsemibold', sans-serif;
	font-size:48px;
	line-height:normal;
	color:#FFF;
}

#zwischen2 {
	margin-top:-1px; 
	height:432px; 
	background-image:url(../images/niklas.png); 
	background-repeat:no-repeat; 
	background-position:right bottom; 
	overflow:hidden;
}
#svg-zwischen-top {
	position: absolute;
	top: -1px;
	width: 100%;
	height: 150px;
}
#svg-zwischen-bottom {
	position: absolute;
	bottom: -1px;
	width: 100%;
	height: 90px;
}

/* Footer */
#footer-kontakt {
	background-color:rgb(77,77,77);
	color:#FFFFFF;
	position:relative;
}
#footer-kontakt h3 { 
	color:#FFF !important;
}

#svg-footer-top {
	position: absolute;
	top: -13px;
	width: 100%;
	height: 150px;
}

#footer-links,
.footer-links {
	background-image:url(../images/tkwd.svg);
	background-repeat:no-repeat;
	background-position:15px bottom;
	padding-top:175px;
	margin-bottom:15px;
}

#footer-adresse {
	padding-top:115px;
	margin-bottom:0px;
}

footer {
	background-color:rgb(227,6,19) !important;
	font-size:0.8em;
}

footer a {
	color:#FFFFFF !important;
}


.pb-5, .py-5 {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}

.main {
	box-shadow: 0 10px 40px rgba(0,0,0,.3);
	background:#FFF;
	margin-top:150px;
	margin-bottom:100px;
	padding:15px 50px;
}

a { 
	color:rgb(227,6,19); 
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
	transition: all 0.5s;
	text-decoration:none;
}

a:hover { 
	color:rgb(0, 0, 0) !important;
	text-decoration:none;
}

h1, .h1 {
	color:rgb(77,77,77);
	text-transform:uppercase;
	font-size:30px;
	font-family: 'akrobatbold', sans-serif;
	width:60%;
	margin-bottom:40px;
	padding-bottom:20px;
	border-bottom:2px rgb(227,6,19) solid;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

h3, .h3 { 
	color:rgb(77,77,77);
	text-transform:uppercase;
	font-size:26px;
	font-family: 'akrobatbold', sans-serif;
}

h4, .h4 { 
	color:rgb(77,77,77);
	text-transform:uppercase !important;
	font-size:24px;
	font-family: 'akrobatbold', sans-serif !important;
	margin-top:30px;
}

.btn {
	cursor: pointer;
}
.btn-danger {
	background-color: rgb(227,6,19);
	color: #FFFFFF !important;
	-webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
	transition: all 0.25s;
}
.btn-outline-danger {
	border-color: rgb(227,6,19);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
	transition: all 0.5s;
}
.btn-anmeldung {
	background-color: transparent !important;
	color: rgb(227,6,19) !important;
	border: 2px rgb(227,6,19) solid !important;
}
.btn-anmeldung:focus, .btn-anmeldung:hover {
	background-color: rgb(227,6,19) !important;
	color: #FFFFFF !important;
}
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle {
	color: #fff;
	background-color: rgb(227,6,19);
	border-color: rgb(227,6,19);
}
.btn-info.focus, .btn-info:focus,
.btn-warning.focus, .btn-warning:focus,
.btn-danger.focus, .btn-danger:focus,
.btn-secondary.focus, .btn-secondary:focus,
.btn-outline-danger.focus, .btn-outline-danger:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus, 
.btn-outline-success.focus, .btn-outline-success:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
	box-shadow: none !important;
  }
.btn-ttc-member {
	border-color: #ced4da;
}


.form-control:focus,
.custom-select:focus {
	color: #000;
	border: 2px solid rgb(227,6,19);
	box-shadow: none;
}

.form-text {
	padding-left: .5rem;
	font-size: 70%;
}


.bildrechts { 
	float:right; 
	margin:0 0 10px 10px; 
}

.invislink {
	display:inline-block;
	width:100%;
	height:100%;
}

.start-info-img {
	height:300px;
}
.start-info-text {
	background: rgb(231,231,231);
	position:relative;
	min-height:250px;
	padding-top:35px;
}

.start-info-h2 {
	text-align:center;
	padding:10px;
	text-transform:uppercase;
	background-color:rgb(227,6,19);
	color:#FFF;
	margin-top:-62px;
	position:absolute;
	font-family: 'akrobatbold', sans-serif;
	font-size:24px;
	width:70%;
/*
	left:15%;
*/
	left:50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.start-info-link {
	display:block;
	position:absolute;
	bottom:15px;
	right:20px;
	margin-top:15px;
}

.auflistung {
	list-style-type:none;
	padding-left: 0px;
	margin-left:30px;
}
.auflistung li {
	margin-bottom:10px;
}
.auflistung li:before {
	content:'→ ';
	color:rgb(227,6,19);
	padding-right:5px;
	margin-left:-30px;
}

.schulliste {
	list-style-type:none !important;
	padding-left: 0px !important;
	margin-left: 20px !important;
}
.schulliste > li {
	margin-bottom:5px !important;
}
.schulliste > li:before {
	content:'' !important;
	padding-right:0 !important;
	margin-left:0 !important;
}

.listenzeile:hover {
	background:#EEE;
	box-shadow: 4px 0 0 rgb(227,6,19) inset;
}

/* Termine */
#AuswahlTab { margin-top:25px; margin-bottom:25px; }

.nav-item .active { font-weight:bold; }

.termine_head { font-weight:bold; }
.termine_zeit { padding-left:35px; }
/*
.termine_training {}
.termine_trainer {}
*/

.termine_link { 
	line-height:50px; 
}

.termine-button { 
	margin-top:15px;
	background: rgb(68,68,68); 
	background: -moz-linear-gradient(top,  rgba(68,68,68,1) 21%, rgba(25,25,25,1) 100%); 
	background: -webkit-linear-gradient(top,  rgba(68,68,68,1) 21%,rgba(25,25,25,1) 100%); 
	background: linear-gradient(to bottom,  rgba(68,68,68,1) 21%,rgba(25,25,25,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#191919',GradientType=0 );
	padding:7px 20px 9px 20px; 
	color:#FFFFFF; 
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
	transition: all 0.5s;
	border-radius:3px;
	box-shadow:rgba(51,51,51,.3) 2px 2px 3px;
}

.termine-button:hover {
	background: rgb(91,91,91); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(91,91,91,1) 21%, rgba(38,38,38,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(91,91,91,1) 21%,rgba(38,38,38,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(91,91,91,1) 21%,rgba(38,38,38,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
	color:#999;
	box-shadow:none;
}
/* ./Termine */


/* ANMELDUNGSFORM */
.form-floating label {
	color:rgb(77,77,77);
	/* font-size:22px; */
}

.auswahl-bungalow {
	background-image: url("../bilder/pine-beach-pakostane-bungalow.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.auswahl-mobilheim {
	background-image: url("../bilder/pine-beach-pakostane-mobile-homes.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.auswahl-buttons {
    text-align: center;
    display: inline-block;
    height: auto;
    width: 100%;
	position: relative;
}
.spezial-button {
    width: 48%;
}
.spezial-button:first-child {
	margin-right: 1%;
	float: left;
}
.spezial-button:last-child {
	margin-left: 1%;
	float: right;
}
.spezial-button input {
    display: none;
}
.spezial-button .auswahl-btn {
	opacity: 0.7;
}
.spezial-button .auswahl-btn:hover {
	opacity: 1;
}
.spezial-button input:checked + .auswahl-btn {
    border: 3px solid #00d000;
    background-color: rosybrown;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	opacity: 1;
}
.spezial-button input:checked + .auswahl-btn > svg {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.auswahl-btn {
    margin: 0px;
    width: 100%;
    height: 200px;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.auswahl-btn > svg {
    color: #fff;
    background-color: #00d000;
    font-size: 100px;
	width: 70px;
	height: 70px;
    position: absolute;
    top: -10px;
	right: -50px;
    transform: translateX(-50%) scale(400%);
    border-radius: 50%;
    padding: 8px;
    transition: all 0.3 ease;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.auswahl-btn .auswahl-iconX {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.auswahl-btn .auswahl-icon svg {
    color: rgb(227,6,19);
    font-size: 100px;
    margin-bottom: 25px;
}
.auswahl-btn .auswahl-icon h2 {
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 0px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.7);
    color: #FFF;
    font-size: 40px;
	font-weight: bold;
}
/* ./ANMELDUNGSFORM */

.invisible {
	display: none;
	pointer-events: none;
}

/*schulen*/
.schulliste-land {
	background-repeat: no-repeat;
	background-position: top right; 
	background-size: 200px;
}
.schulliste-land-fr,
.schulliste-land-us {
	background-size: contain !important;
}
.schulliste-flagge {
	height: 26px; 
	width: auto; 
	margin-right: 11px; 
	margin-top: -6px;
}
.schulliste-wappen {
	height: 22px; 
	width: auto; 
	margin-right: 9px; 
	margin-top: -3px;
}
.weiter { 
	display:none;
	float:right;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
 }

@media(max-width:767px) {

	.navbar-brand {
		padding-top: 13px;
		z-index:100;
	}

	.navbar-collapse {
	    background-color: rgb(248, 249, 250) !important;
		padding-top:30px;
		padding-bottom:15px;
		margin-top:0px;
	}
	
	#zwischen2 { 
		display:none; 
	}
	
	#footer-links,
	.footer-links {
		background-image:none;
	}

	#footer-kontakt {
		background-image:url(../images/tkwd.svg);
		background-repeat:no-repeat;
		background-position:center;
	}

	#zwischen1 {
		background-image:none;
		padding-top:180px;
	}

	#zwischenstreifen {
		background-image:url(../images/tkwd-20.svg);
		background-repeat:no-repeat;
		background-position:center 140px;
	}
	
	h1 { 
		width:85%;
	}
	.schulliste-land { 
		background-image: none !important;
	}
}