@charset "UTF-8";
@import url(animate.css);
@import url(//fonts.googleapis.com/css?family=Hind);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

body { 

	color:#FFFFFF;font:100 16px/20px "Open Sans Condensed", sans-serif;-webkit-text-size-adjust:none;
	background-color: #000000;
}


/* Hintergrundfarbe bei Textmarkierung */
::selection {
  background: #cfab84;
  color: #000;
  text-shadow: none;
}


.FullWidth {
	width: 100%;
}

.bgOne {
	background-color: #0065ab;
	text-align: center;
	width: 100%;
	font-size: 14px;
	border-radius: 15px;
}
.bgTwo {
	background-color: #333333;
	text-align: center;
}

.MaTo50 {
	margin-top: 50px !important;
	
}

.bgInfo {
	/* background-color: #0065ab; */
	text-align: center;
	width: 100%;
    padding: 10px;
	font-size: 16px;
	border-radius: 5px;
    border-color: #0065ab;
    border-style: solid;
    border-width: 2px;
}

.bgInfoTitle {
	background-color: #0065ab;
	text-align: center;

    padding: 10px;
	font-size: 24px;
	border-radius: 2px;
}


.Rahmen {
	border-width: 1px;
	border-radius: 5px;
	border-style: double;
	border-color: #FF0000;
	/* padding-bottom: 10px; */
	margin-bottom: 10px;
	background-color: #333333;
}

.WochenTagName {
    display: block !important;
  }	

.TextGelb {
	color:#ffcc00;
}

.TextRot {
	color:#FF0000;
}







@media (max-width:767px){
	.WochenTagName{display:none !important;}
}



img{max-width:100%;height:auto;}
h1{margin-top:0px;margin-bottom:10px;font-size:26px;line-height:36px; font-weight: bold; color:#ceac84;}
h2{margin-top:0px;margin-bottom:10px;font-size:20px;line-height:30px; font-weight: bold; color:#ceac84;}


@media (max-width:600px){h2{font-size:6px;}
}
h2 span{display:block;font-size:26px;line-height:24px;color:#ceac84;font-weight:normal;}
h3{font-size:24px;font-weight:bold;margin-bottom: 20px; color:#990000; }

#Liste {

	padding-left: 15px;
	margin-bottom: 20px;
	line-height: 22px;	
	list-style:url(../webpics/point.png);

}


.w3-green{color:#000!important;background-color:#107C00!important}
.w3-red{color:#fff!important;background-color:#990000!important; font-weight: bold;}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify}.w3-center{text-align:center!important}





.highlight {
	background-color: #F0D2FD !important;
}



.BG_CurrentSlot {
	background-color: #FFC4C4;
	text-align: center;
}


.BG_HighLight {
	background-color: #FFF56D;
}

.TextMitte {
	text-align: center;
}
.TextRechts {
	text-align: right;
}


.langbutton {
    z-index: 1;
    top: 0px;
    right: 0px;
    padding: 5px;
    position: fixed;
    background-color:#002E5F;
    font-size: 12px;
    border: none;
    border-radius: 0 0 0 4px;
}

.langbutton > a {
    color: #FFFFFF;
}

.langbutton:hover {
  background-color:#990000;
}







/* Smartphone Darstellung */ 
@media only screen and (max-width:768px) {
	
.langbutton {
    top:auto;
    bottom: 0px;
    right: 0px;
}
	
}







#DivBoxBlau {
	text-align: center;
	display:block;
	background-color: #0064a8;
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0 10px 0;

}

#DivBoxViolett {
	text-align: center;
	display:block;
	background-color: #710C48;
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 20px;
	padding: 10px 0 10px 0;

}


#DivBoxViolett a {
	display:block;
	background-color: #710C48;
	border-radius: 5px;
	color: #FFFFFF;
}

#DivBoxViolett a:hover {
	background-color:#590939;
	}




#DivBoxGrau {
	text-align: center;
	display:block;
	background-color: #EEEEEE;
	border-radius: 5px;
	color: #004670;
	font-size: 20px;
	padding: 10px 0 10px 0;

}



#DivBoxBlau a {
	display:block;
	background-color: #002E5F;
	border-radius: 5px;
	color: #FFFFFF;
}

#DivBoxBlau a:hover {
	background-color:#004670;
	}


#DivBoxGelb a {
	display:block;
	background-color: #ffcc00;
	padding: 10px 0 10px 0;
	border-radius: 5px;
}

#DivBoxGelb a:hover {
	background-color:#dfb201;
	}


#DivBoxGrau a {
	display:block;
	background-color: #EEEEEE;
	border-radius: 5px;
	color: #004670;
}

#DivBoxGrau a:hover {
	background-color:#CCCCCC;
	}

#DivBoxRot {
	text-align: center;
	display:block;
	background-color: #FF0000;
	padding: 10px 0 10px 0;
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 20px;
}

#DivBoxGelb {
	text-align: center;
	display:block;
	background-color: #ffcc00;
	padding: 10px 0 10px 0;
	border-radius: 5px;
	font-size: 20px;
}





/* Schmal */
@media only screen and (max-width:768px) {
	
#DivBoxGelb a {
	margin-bottom: 5px;
	}
#DivBoxBlau a {
	margin-bottom: 5px;
	}
#DivBoxGrau a {
	margin-bottom: 25px;
	}

	
}

/* Breit */
@media only screen and (min-width:769px) {
	
#DivBoxGelb a {
	margin-bottom: 60px;
	}
#DivBoxBlau a {
	margin-bottom: 0px;
	}
#DivBoxGrau a {
	margin-bottom: 5px;
	}
	
}




#foto_rechts {	
	float: right;
	padding: 0 20px 10px 20px;	
}	

.klein {	
	font-size: 12px;
}	
.kleiner {	
	font-size: 10px;
}	

.gross {	
	font-size: 20px;
}	

.big {	
	font-size: 28px;
}	

.fett {	
	font-weight: bold;
}	


.rot {	
	color: #990000;
}
.hellrot {	
	color: #FF0000;
}	

.gruen {	
	color: #86af49;
}	
.gelb {	
	color: #ffde00;
}	
.hellgruen {	
	color: #96F20E;
}	

.blau {	
	color: #0063CE;
}	

.orange {	
	color: #C88F00;
}	


ul.a {
  	list-style: none; /* Remove default bullets */
	margin-bottom: 20px;
	padding-left: 20px;
}

ul.a li::before {
  content: "\0220E";
  color: #002E5F;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
  line-height: 24px;
	padding-right: 10px;
	
}


.container ul {
  	list-style: disc;
	margin-bottom: 20px;
	padding-left: 20px;
}
	
p {
    margin-bottom: 15px;
	line-height: 22px;
}

.author { font-size: 14px; text-align: left;
}

.authortext { font-size: 18px; text-align: left; font-weight: bold;
}


h5{margin-bottom:12px;font-weight:700;font-size:24px;line-height:26px;}
h4{margin-bottom:20px;font-weight:700;font-size:18px;line-height:20px;}
h6{font-weight:700;font-size:20px;line-height:26px;}
h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color:#000000;}
p a:hover, .marked-list a:hover, .list a:hover{text-decoration:underline;}
p .fa, .marked-list .fa, .list .fa{text-decoration:none;}
time{display:block;}
a{font:inherit;color:#1d71b8;text-decoration:none;-moz-transition:0.3s;-o-transition:0.3s;-webkit-transition:0.3s;transition:0.3s;}
a:focus{outline:none;}
a:active{background-color:transparent;}
footer a{color:#000000;}
a[href^="tel:"],
a[href^="callto:"]{color:inherit;text-decoration:none;}
strong{font-weight:600;}
.fa{line-height:inherit;}
[class*='fa-']:before{font-weight:400;font-family: 'Hind', sans-serif;}
.page{max-width:1920px;min-height:500px;margin:0px auto 70px;}
.lt-ie9 .page{min-width:1200px;}
p + .btn{margin-top:30px;}
.text01 + .btn{margin-top:50px;}
main p + p{margin-bottom:20px;}
.brand{display:inline-block;}
.brand_name{overflow:hidden;display:inline-block;margin-top:20px; padding-bottom: 20px;}
.brand_slogan{display:inline-block;margin-left:15px;margin-top:33px;font-family: 'Hind', sans-serif;font-weight:300;font-size:40px;line-height:50px;text-transform:uppercase;color:#211d1e;}
.bg1{background:#374491;}
.bg2{} /* Menubackground Footer*/
.bg3{background:#444444;} /* Banner Hintergrund */
.bg4{background:#fff repeat url(../images/background_top.jpg) left bottom;}
.bg1,
.bg2,
.bg3,
.bg4{color:#fff; text-align: center;}
.bg1 h3, .bg1 h4, .bg1 h5, .bg1 h6,
.bg2 h3,
.bg2 h4,
.bg2 h5,
.bg2 h6,
.bg3 h3,
.bg3 h4,
.bg3 h5,
.bg3 h6,
.bg4 h3,
.bg4 h4,
.bg4 h5,
.bg4 h6{color:#fff;}
.bg1 h2,
.bg2 h2,
.bg3 h2,
.bg4 h2{margin-top:80px;font-size:70px;color:#fff;}
.bg1 h2 span,
.bg2 h2 span,
.bg3 h2 span,
.bg4 h2 span{margin-top:10px;font-size:40px;color:#fff;}
.bg1 .btn,
.bg2 .btn,
.bg3 .btn,
.bg4 .btn{border:2px solid #fff;color:#fff;}
.bg1 .btn:hover,
.bg2 .btn:hover,
.bg3 .btn:hover,
.bg4 .btn:hover{color:#3c3c3c;}
.bg1 .btn:active,
.bg2 .btn:active,
.bg3 .btn:active,
.bg4 .btn:active{background:#e6e6e6;}
.bg-img1{}

.bg-img2{}

.bg-img3{}

.bg-img4{height:250px;display:none;}
.btn{display:inline-block;padding:11px 27px;border:2px solid #e6e6e6;font-family: 'Hind', sans-serif;font-weight:700;font-size:18px;line-height:28px;text-transform:uppercase;color:#3c3c3c;}
.btn:hover{background:#e6e6e6;}
.btn:active{background:#cdcdcd;}
.btn2{margin-top:17px;display:inline-block;padding:5px 22px;border-bottom:2px solid #e95b1d;font-family: 'Hind', sans-serif;font-weight:700;font-size:18px;line-height:28px;text-transform:uppercase;color:#e95b1d;}
.btn2:hover{border-bottom:2px solid #211d1e;color:#211d1e;}
.btn2:active{background:#e95b1d;}
.box:before, .box:after{display:table;content:"";line-height:0;}
.box:after{clear:both;}
@media (min-width:768px){.box{margin-bottom:60px;}
}
.box_aside{text-align:center;}
@media (min-width:1200px){.box_aside{float:left;margin-right:25px;}
}
.box_cnt{padding-top:5px;}
@media (max-width:1199px){.box_cnt{text-align:center;padding-top:30px;}
}
.box_cnt__no-flow{overflow:hidden;}
.box2:before, .box2:after{display:table;content:"";line-height:0;}
.box2:after{clear:both;}
.box2_aside{text-align:center;}
@media (min-width:980px){.box2_aside{float:left;margin-right:45px;}
}
.box2_cnt{padding-top:45px;}
@media (max-width:979px){.box2_cnt{text-align:center;}
}
.box2_cnt__no-flow{overflow:hidden;}
.box2 h4{margin-bottom:25px;}
.box3{text-align:center;}
.box3_cnt{padding-top:25px;}
.social-list{margin:40px 0 25px;}
.social-list li{display:inline-block;margin-bottom:10px;}
.social-list a{display:block;width:40px;height:40px;background:#fff;border-radius:50%;text-align:center;color:#e95b1d;font-size:15px;line-height:40px;}
.social-list a:hover{background:#3c3c3c;}
@media (max-width:479px){.social-list a{width:30px;height:30px;line-height:30px;}
}
.inline-list{text-align:center;margin-bottom:40px;}
.inline-list li{display:inline-block;margin:0 8px 20px;}
@media (max-width:479px){.inline-list li{margin:0 2px 10px;}
}
.index-list{counter-reset:li;}
.index-list li{text-align:center;}
.index-list li:before{content:counter(li) ".";counter-increment:li;display:inline-block;width:75px;height:75px;border-radius:50%;text-align:center;font-size:35px;line-height:75px;font-family: 'Hind', sans-serif;font-weight:300;color:#fff;}
.index-list li.c1:before{background:#e95b1d;}
.index-list li.c2:before{background:#0b73b0;}
.index-list li.c3:before{background:#edd400;}
.marked-list{counter-reset:li;}
.marked-list li{position:relative;margin-bottom:8px;padding-left:25px;}
.marked-list li:before{content:'\f00c';position:absolute;left:0;top:0;font:400 16px 'FontAwesome';line-height:inherit;}
.marked-list.c1 li:before{color:#e95b1d;}
.marked-list.c2 li:before{color:#0b73b0;}
.marked-list.c3 li:before{color:#edd400;}
p + .marked-list{margin-top:25px;}
.gallery{display:table;width:100%;}
@media (max-width:979px) and (min-width:768px){.gallery{font-size:14px;line-height:20px;}
}
.gallery_row{display:table-row;}
.gallery_item{position:relative;display:table-cell;vertical-align:middle;text-align:center;width:33.333333%;}
@media (max-width:767px){.gallery_item > .gallery_inner{padding:50px 10px;}
}
.gallery_inner{height:90%;padding:5%;}
.gallery_cnt{position:absolute;top:0;bottom:0;left:0;right:0;background:#fff;opacity:0;-moz-transition:0.3s;-o-transition:0.3s;-webkit-transition:0.3s;transition:0.3s;}
.lt-ie9 .gallery_cnt{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}
.gallery_cnt:hover{opacity:1;}
.lt-ie9 .gallery_cnt:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";filter:alpha(opacity=100);}
@media (max-width:767px){.gallery{display:block;}
.gallery_row, .gallery_item{display:block;width:100%;}
}
.gallery img{width:100%;}
.middle_wrap{display:inline-block;vertical-align:middle;width:95%;}
.helper{display:inline-block;vertical-align:middle;height:100%;width:0px;}
.sf-menu{display:inline-block;font-family: 'Hind', sans-serif;text-transform:uppercase;padding-top:10px;padding-bottom:13px;}
.sf-menu:before, .sf-menu:after{display:table;content:"";line-height:0;}
.sf-menu:after{clear:both;}
.sf-menu > li{position:relative;float:left;}
.sf-menu > li{padding:0 30px;}
@media (max-width:1199px) and (min-width:768px){.sf-menu > li{padding:0 30px;}
}
.sf-menu {text-transform:none;position:relative;color:#fff;font-size:16px;font-weight:300;line-height:40px;border-top:3px solid transparent;}
.sf-menu a{display:block;}
.sf-menu > li > a{position:relative;color:#000;font-size:16px;font-weight:300;line-height:30px;border-top:3px solid transparent;}
nav.nav{background:#222222; padding: 0px;} /* Menubackground */
.sf-menu > li > a:after{content:'';position:absolute;top:-5px;left:0;display:block;width:100%;height:3px;background:transparent;}
.sf-menu > li.sfHover > a:after, .sf-menu > li > a:hover:after{background:#002E5F;} /* Balken über Menu */
.sf-menu > li.active > a:after{background:#0b73b0;}
.sf-menu ul{display:none;position:absolute;top:100%;width:160px; /* Pulldown Menu Breite*/ margin-top:10px;background:#EEEEEE;z-index:2;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.sf-menu ul{text-align:center;}
.sf-menu ul > li{position:relative;padding:4px 0;border-bottom:1px dotted #ffffff;}
.sf-menu ul > li:last-child{border-bottom:none;}
.sf-menu ul > li > a{color:#000000;font-size:16px;font-weight:300;} /* Submenu Font */
.sf-menu ul > li.sfHover > a, .sf-menu ul > li > a:hover{background:#002E5F;color:#FFFFFF;}
.sf-menu ul ul{position:absolute;left:100%;top:-10px;margin-left:20px;background:#0b73b0;width:100px;margin-top:0;padding:20px;z-index:4;}
.sf-menu ul ul > li{border-color:#fff;}
.sf-menu ul ul > li > a{color:#fff;}
.sf-menu ul ul > li.sfHover > a, .sf-menu ul ul > li > a:hover{color:#2c2c2c;}
.sf-menu > li > .sf-with-ul{position:relative;}
.sf-menu > li > .sf-with-ul:before{position:absolute;left:50%;top:89%;margin-left:-3px;content:"";font:400 12px/12px "FontAwesome";}
/* Pfeil im Menu nach oben*/
/* .sf-menu > li > ul:before{content:'';position:absolute;left:50%;top:-10px;margin-left:-5px;display:block;width:0;height:0;border:5px solid transparent;border-bottom-color:#211d1e;} */


@media (max-width:767px){.sf-menu{display:none;}
}
.rd-mobilemenu{display:none;position:fixed;top:0;left:0;bottom:0;z-index:9999999;text-align:left;-moz-transition:0.3s all ease;-o-transition:0.3s all ease;-webkit-transition:0.3s all ease;transition:0.3s all ease;}
.rd-mobilemenu.active{right:0;}
.rd-mobilemenu_ul{position:fixed;top:56px;left:0px;bottom:0;width:300px;padding:5px 10px;color:#000000;background:#FFFFFF;font-size:20px;line-height:24px;overflow:auto;-webkit-box-shadow:5px 0 5px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:5px 0 5px 0 rgba(0, 0, 0, 0.1);box-shadow:5px 0 5px 0 rgba(0, 0, 0, 0.1);-moz-transform:translateX(-320px);-ms-transform:translateX(-320px);-o-transform:translateX(-320px);-webkit-transform:translateX(-320px);transform:translateX(-320px);-moz-transition:0.3s ease;-o-transition:0.3s ease;-webkit-transition:0.3s ease;transition:0.3s ease;-moz-transition:0.3s cubic-bezier(0.55, 0, 0.1, 1);-o-transition:0.3s cubic-bezier(0.55, 0, 0.1, 1);-webkit-transition:0.3s cubic-bezier(0.55, 0, 0.1, 1);transition:0.3s cubic-bezier(0.55, 0, 0.1, 1);}
.rd-mobilemenu.active .rd-mobilemenu_ul{-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0);}
.rd-mobilemenu_ul a{display:block;padding:0px;color:#000000;}  /* Farbe Mobile Menu */
.rd-mobilemenu_ul a:hover{background:#002E5F;color:#FFFFFF;}   /* Farbe Mobile Hintergrund */
.rd-mobilemenu_ul ul a{padding-left:40px;}
.rd-mobilemenu_ul ul ul a{padding-left:60px;}
.rd-mobilemenu_ul:after{content:'';display:block;height:20px;}

.rd-mobilemenu_ul li{position:relative;padding:5px 0;} /* Abstände zwischen LI*/


.rd-mobilepanel{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:#FFF;color:#000;-webkit-box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1);box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1);z-index:99999991;}
.rd-mobilepanel_title{position:fixed;top:4px;left:56px;right:56px;color:#000;font-size:14px;line-height:48px;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0; text-transform: none;}
.rd-mobilepanel_toggle{background:none;border:none;display:inline-block;padding:0;outline:none;outline-offset:0;cursor:pointer;-webkit-appearance:none;position:fixed;top:4px;left:8px;width:48px;height:48px;}
.rd-mobilepanel_toggle::-moz-focus-inner{border:none;padding:0;}
.rd-mobilepanel_toggle span{position:relative;display:block;margin:auto;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
.rd-mobilepanel_toggle span:after, .rd-mobilepanel_toggle span:before{content:"";position:absolute;left:0;top:-8px;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
.rd-mobilepanel_toggle span:after{top:8px;}
.rd-mobilepanel_toggle span:after, .rd-mobilepanel_toggle span:before, .rd-mobilepanel_toggle span{width:24px;height:4px;background-color:#000;backface-visibility:hidden;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.rd-mobilepanel_toggle span:before, .rd-mobilepanel_toggle span:after{-webkit-transition-duration:0.3s, 0.3s;transition-duration:0.3s, 0.3s;-webkit-transition-delay:0.3s, 0s;transition-delay:0.3s, 0s;-webkit-transition-property:top, -webkit-transform;transition-property:top, transform;}
.rd-mobilepanel_toggle.active span{transition:background .3s 0s ease;background:transparent;}
.rd-mobilepanel_toggle.active span:before, .rd-mobilepanel_toggle.active span:after{top:0;-webkit-transition-delay:0s, 0.3s;transition-delay:0s, 0.3s;}
.rd-mobilepanel_toggle.active span:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.rd-mobilepanel_toggle.active span:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}





 /* Mobile Darstellung */



@media (max-width:767px){body{padding-top:0px;font-size:20px; font-weight: 300; line-height: 20px; /* Schrift kleiner */
}
h1 {font-size:24px; line-height: 28px;} /* Titel kleiner bei Mobile*/
h2 {font-size:22px; line-height: 26px;} /* Titel kleiner bei Mobile*/
h3 {font-size:16px;} /* Titel kleiner bei Mobile*/
.rd-mobilemenu, .rd-mobilepanel{display:block;}
	
	p {line-height: 28px;
	}
	li {line-height: 28px; padding-bottom: 10px;
	}


#foto_rechts {	

	padding: 0 0 20px 0;
	text-align: center;
}
	


	
}

@media (max-width:400px){.rd-mobilepanel_title{font-size:12px;}
}


@media (max-width:768px){.logo_desk{display: none;} } /* xen Logo für Desktop (Breit) Darstellung */

@media (min-width:768px){.logo_mobile{display: none; } } /* xen Logo für Mobile Darstellung */


.isStuck{background:#fff;z-index:999;left:0;border-bottom:1px solid #2c2c2c;}
.isStuck .block_right{width:100%;float:none;text-align:center;}
.isStuck .sf-menu{padding-top:15px;padding-bottom:15px;}
.isStuck .sf-menu > li > ul{margin-top:15px;}
.isStuck .sf-menu > li > a:after{content:'';position:absolute;top:-18px;}
@media only screen and (max-width:979px){.isStuck{display:none !important;}
}
.toTop{width:40px;height:40px;font-size:20px;line-height:38px;color:#fff;background:#002E5F;border-radius:50%;position:fixed;right:66px;bottom:180px;display:none;overflow:hidden;text-align:center;text-decoration:none;z-index:20;}
.toTop:hover{color:#fff;background:#3c3c3c;text-decoration:none;}
@media only screen and (max-width:1399px){.toTop{display:none !important;}
}
header .brand{margin-top:0px;margin-bottom:20px;}
@media (max-width:3000px){header{text-align:center;} /* war 979 */
} 
main{display:block;}
.block{position:relative;}
.block:before, .block:after{display:table;content:"";line-height:0;}
.block:after{clear:both;}
.block_left{float:left;width:38%;text-align:right;}
@media (max-width:979px){.block_left{width:100%;float:none;text-align:center;}
}
.block_right{float:right;width:62%;}
@media (max-width:979px){.block_right{float:none;width:100%;}
}
.contact{display:inline-block;text-align:center;margin-right:110px;font-size:14px;}
@media (max-width:1199px) and (min-width:980px){.contact{margin-right:50px;}
}
@media (max-width:979px){.contact{margin:0 0 20px 0;}
}
@media (min-width:1450px){.contact{margin-top:30px;}
}
.contact .fa{display:inline-block;width:22px;height:22px;border:2px solid #000;border-radius:50%;color:#000;text-align:center;line-height:24px;font-size:18px;}
.contact_num{display:block;margin-top:20px;margin-bottom:10px;font-size:30px;font-family: 'Hind', sans-serif;font-weight:300;color:#211d1e;letter-spacing:2px;}
.welcome{font-size:16px;line-height:26px;}
@media (min-width:980px){.welcome{position:absolute;bottom:0;width:38%;text-align:right;}
.welcome h2{text-align:right;}
}
.welcome h2{font-size:45px;line-height:48px;margin-top:0;margin-bottom:25px;}
.welcome h2 span{font-size:24px;line-height:30px;}
.welcome_inner{padding:90px 100px 90px 30px;}
@media (max-width:1199px){.welcome_inner{padding:30px;}
.welcome_inner h2{margin-bottom:15px;}
}
@media (max-width:1400px) and (min-width:1200px){.welcome_inner{padding:50px 100px 50px 30px;}
}
@media (min-width:980px){.welcome_inner:after{content:'';width:26px;height:100%;position:absolute;top:0;left:100%;background:#e95b1d;z-index:10;}
.welcome_inner:before{content:'';width:0;height:0;border:13px solid transparent;border-bottom-color:#DDC376;border-left-color:#DDC376;position:absolute;bottom:100%;left:100%;z-index:10;}
}
.circle{display:inline-block;border-radius:5%;}
.text1{font-size:20px;line-height:32px;font-weight:100;}
.text1 + .btn{margin-top:50px;}
.tc{text-align:left;} /* Linksbündig*/
.mb1{margin-bottom:85px;}
.pt0{padding-top:15px;}
.pt1{padding-top:30px;}
.pb1{padding-bottom:30px;}
.pb0{padding-bottom:15px;}
.ptPic{padding-top:88px;}

.quotes{margin-right:8px;}
.addr{font-family: 'Hind', sans-serif;font-size:24px;line-height:36px;font-weight:700;text-transform:uppercase;}
.addr2 dt, .addr2 dd{display:inline-block;}
.addr2 dt{min-width:190px;}
@media (max-width:1199px){.addr2 dt{min-width:100px;}
}
.terms{text-align:center;border-bottom:3px solid #211d1e;padding-bottom:80px;}
.terms p{margin-bottom:20px;}
.link1{line-height:26px;vertical-align:baseline;}
.well1{padding-bottom:80px;}
.well2{padding-bottom:50px;}
.well3{padding-top:60px;padding-bottom:65px;}
.well4{padding-top:40px;padding-bottom:40px;}
.well5{padding-bottom:10px;}
footer{position:relative;padding-top:0;}
@media (max-width:479px){footer{padding:0;}
}
.contact-block{position:relative;top:26px;}
@media (max-width:479px){.contact-block{left:0;margin:0;width:100%;}
}
.contact-block h3{margin-bottom:35px;}
.contact-block .copy{color:#CCCCCC;font-family: 'Hind'bg-img2, sans-serif;font-size:14px;line-height:24px;font-weight:100;letter-spacing:2px;text-transform:uppercase;}
.contact-block .copy a{color:#CCCCCC;} /* xen */ 
.name_zitat{color:#FFFFFF; font-size: 18px; font-style: italic;}
.name_zitat_link{color:#FFFFFF; font-size: 10px; }














.contact-form {

      padding: 0;
      margin: 0;
      outline: none;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 22px;


}



 
    input, select, textarea {
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      font-size: 18px;
	  font-weight: bold;
      }
      input {
      width: calc(100% - 10px);
      padding: 5px;
      }
      select {
      width: 100%;
      padding: 5px;
      background: transparent;
	  background-color: #0064a8;
	  color: #ffffff;
      }
      textarea {
      width: calc(100% - 12px);
      padding: 5px;
      }
      .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder, a {
      /* color: #0064a8; */
		}
      .item input:hover, .item select:hover, .item textarea:hover {
      border: 1px solid transparent;
      box-shadow: 0 0 6px 0 #0064a8;
      color: #002E5F;
      }
      .item select:hover {
      color: #FFFF00;
      
      }
      
      .item {
      position: relative;
      margin: 10px 0;
      }
      

      input[type="date"] {
        color:#2c2c2c;font:100 18px/20px "Open Sans Condensed", sans-serif;-webkit-text-size-adjust:none;
        }
      input[type="time"] {
        color:#2c2c2c;font:100 18px/20px "Open Sans Condensed", sans-serif;-webkit-text-size-adjust:none;
        }


      /* 

      input[type="date"]::-webkit-inner-spin-button {
      display: none;
      }
      
      
      .item i, input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      font-size: 20px;
      color: #a9a9a9;
      }
      .item i {
      right: 2%;
      top: 30px;
      z-index: 1;
      }
      [type="date"]::-webkit-calendar-picker-indicator {
      right: 1%;
      z-index: 2;
      opacity: 0;
      cursor: pointer;
      }
      
      */
      
      
      input[type=radio], input[type=checkbox]  {
      display: none; /* xen */
      width: 30px;  
      transform: scale(1.5);
      
      }
      
      label.radio, label.check {
      position: relative;
      display: inline-block;
      margin: 5px 20px 15px 0;
      cursor: pointer;
      }
      
      .question-answer span {
      margin-left: 30px;
      }
      span.required {
      margin-left: 0;
      color: red;
      }
      .checkbox-item label {
      margin: 5px 20px 10px 0;
      }
      label.radio:before, label.check:before {
      content: "";
      position: absolute;
      left: 0;
      }
      label.radio:before {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 2px solid #095484;
      }
      label.check:before {
      top: 2px;
      width: 16px;
      height: 16px;
      border-radius: 2px;
      border: 1px solid #095484;
      }
      input[type=checkbox]:checked + .check:before {
      background: #095484;
      }
      label.radio:after {
      left: 5px;
      border: 3px solid #095484;
      }
      label.check:after {
      left: 4px;
      border: 3px solid #fff;
      }
      label.radio:after, label.check:after {
      content: "";
      position: absolute;
      top: 6px;
      width: 8px;
      height: 4px;
      background: transparent;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      opacity: 0;
      }
      input[type=radio]:checked + label:after, input[type=checkbox]:checked + label:after {
      opacity: 1;
      }
      .btn-block {
      margin-top: 10px;
      text-align: center;
      }
      button {
      /* width: 150px; */
      padding: 5px;
      border: none;
      border-radius: 5px; 
      background: #0064a8;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
		  /* line-height: 28px;*/
      }
      button:hover {
      background: #004670;
      }
      .buttonX {
      background: #86af49;
      padding: 0px 10px;
	  border-radius: 0px; 

     }
      .buttonY {
      background: #990000;
      padding: 1px 10px;
	  border-radius: 0px; 

     }


     
      @media (min-width: 368px) {
      .city-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .city-item input {
      width: calc(50% - 20px);
      }
      .city-item select {
      width: calc(50% - 8px);
      }



      .ProduktSpalten {
      display: table;
      border-spacing: 3px;
      width: 100%;
      margin-bottom: 10px;

      }
      
      .ProduktSpaltenCol {
        display: table-cell;
        box-sizing: border-box; 
        vertical-align: top;

        background-color:#CCC; /* 86af49 */
        padding: 1px;
        color:#000000;
        font-weight: normal; 
        font-size: 14px;
       border-radius: 5px;
       text-align: center;
       }

        .ProduktSpaltenCol_checked {
        display: table-cell;
        box-sizing: border-box; 
        vertical-align: top;

        /* background-color:#E15B10;*/ 
        background-color:#EEE;
        padding: 10px 5px 5px 0;
        color:#000000;
        font-weight: normal; 
        font-size: 18px;
       border-radius: 5px;
       border: 5px solid #555;
       text-align: center;
       }
       







      .ZweiSpalten {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .ZweiSpalten input {
      width: calc(50% - 20px);
      }
      .ZweiSpalten input[type=radio] {
      width: 20px;
      
      }
      
      .ZweiSpalten select {
      width: calc(50% - 8px);
      }

      .DreiSpalten {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .DreiSpalten input {
      width: calc(33% - 20px);
      }
      .DreiSpalten select {
      width: calc(33% - 8px);
      }



      .SechsSpalten {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .SechsSpalten input {
      width: calc(13% - 20px);
      }
      .SechsSpalten select {
      width: calc(10% - 8px);
      }









      .VierSpalten {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .VierSpalten input {
      width: calc(25% - 20px);
      }
      .VierSpalten select {
      width: calc(25% - 8px);
      }



}




/* schmale Darstellung */
@media (max-width: 568px) {


      .ProduktSpalten {
        margin-bottom: 20px;
      }


      .ProduktSpaltenCol {

        background-color:#CCC;
        padding: 10px 5px 5px 0;
        color:#000000;
        font-weight: normal; 
        font-size: 16px;
        margin-bottom: 5px;
        border-radius: 5px; 
       }

      .ProduktSpaltenCol_checked {

        background-color:#EEE;
        padding: 10px 5px 5px 0;
        color:#000000;
        font-weight: normal; 
        font-size: 16px;
        margin-bottom: 5px;
        border-radius: 5px; 
       border: 5px solid #555;
       }


}





.btns .btn4 {
	float: left;
	margin-right: 20px;
}
.btns p {
	margin: 6px 0 0 0;
	float: left;
}
.btnok {
	width: 30px;
	
}
.mail {
	color: #45ad05;
	font: 14px 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: underline;
}
.mail:hover {
	color: #333333;
	text-decoration: underline;
}


.btnGelb {
      border: none;
      border-radius: 5px; 
      background: #FFDD00;
      font-size: 16px;
      color: #000;
      text-align: center;
      font-weight: bold;
      padding: 5px 10px 5px 10px;
	  margin-bottom: 1px;
}


.btnOrange {
      border: none;
      border-radius: 5px; 
      background: #E15B10;
      font-size: 16px;
      color: #000;
      text-align: center;
      font-weight: bold;
      padding: 0px 10px 0px 10px;
	/* margin-bottom: 1px; */
}
.btnOrange:hover {
      background: #B75321;
      
      }
.btnOrange a {
    color:#FFFFFF;
    display:block;
    height:100%;
}


.btnBlau {
      border: none;
      border-radius: 5px; 
      background: #0064a8;
      font-size: 16px;
      color: #fff;
      text-align: center;
      padding: 0px 10px 0px 10px;
	/* margin-bottom: 1px; */
}
.btnBlau:hover {
      background: #0064a8;
      }
.btnBlau a {
    color:#FFFFFF;
    display:block;
    height:100%;
}

.btnHellBlau {
      border: none;
      border-radius: 5px; 
      background: #78C7FF;
      font-size: 16px;
      color: #fff;
      text-align: center;
      padding: 0px 10px 0px 10px;
	/* margin-bottom: 1px; */
}
.btnHellBlau:hover {
      background: #78C7FF;
      }
.btnHellBlau a {
    color:#FFFFFF;
    display:block;
    height:100%;
}


.btnViolett {
      border: none;
      border-radius: 5px; 
      background: #710C48;
      font-size: 16px;
      color: #fff;
      text-align: center;
      padding: 0px 10px 0px 10px;
	/* margin-bottom: 1px; */

}
.btnViolett:hover {
      background: #8C165C;
      }
.btnViolett a {
    color:#FFFFFF;
    display:block;
    height:100%;
}




.btnGrau {
      border: none;
      border-radius: 5px; 
      background: #777777;
      font-size: 16px;
      color: #fff;
      text-align: center;
      padding: 5px 10px 5px 10px;
	margin-bottom: 1px;
}
.btnGrau:hover {
      background: #86af49;
      }
.btnGrau a {
    color:#FFFFFF;
    display:block;
    height:100%;

}

.btnHellGrau {
      border: none;
      border-radius: 5px; 
      background: #CCCCCC;
      font-size: 16px;
      color: #000;
      text-align: center;
	  margin-bottom: 1px;
	padding: 0px 10px 0px 10px;
}
.btnHellGrau:hover {
      background: #DDDDDD;
      }
.btnHellGrau a {
    color:#000;
    display:block;
    height:100%;
}




.btnRot {
      border: none;
      border-radius: 5px; 
      background: #EE0000;
      font-size: 16px;
      color: #fff;
      text-align: center;
      padding: 5px 10px 5px 10px;
	  margin-bottom: 1px;
}
.btnRot:hover {
      background: #990000;
      }
.btnRot a {
    color:#FFFFFF;
    display:block;
    height:100%;

}


.btnGruen {
      border: none;
      border-radius: 5px; 
      background: #86af49;
      font-size: 16px;
      color: #fff;
      text-align: center;
      padding: 0px 10px 0px 10px;
	  margin-bottom: 1px;
	/* width: 100%; */
}
.btnGruen:hover {
      background-color: #6f8e39;
      }
.btnGruen a {
    color:#FFFFFF;
    /* display:block;
    height:100%; */
}


.FreeGreen {
	background: #86af49;
	font-size: 16px;
	color: #fff;
	text-align: center;
	width: 100%;
	margin-bottom: 1px;
}
.FreeRed {
	background: #990000;
	font-size: 16px;
	color: #fff;
	text-align: center;
	width: 100%;
	margin-bottom: 1px;
}


.FreeTrans {
	font-size: 16px;
	color: #fff;
	font-style: italic;
	width: 100%;
	margin-bottom: 1px;
}

.bg_Hellgrau {
      border: none;
      border-radius: 5px; 
      background: #EEEEEE;
      font-size: 16px;
      color: #fff;
      text-align: center;
	  padding: 1px;
	  margin-bottom: 3px;
}

.bg_Grau {
      border: none;
      border-radius: 5px; 
      background: #777777;
      font-size: 16px;
      color: #fff;
      text-align: center;
	  padding: 2px;
}

.bg_DunkelGrau {
      border: none;
      border-radius: 5px; 
      background: #333333;
      font-size: 16px;
      color: #fff;
      text-align: center;
	  padding: 2px;
}


.bg_Orange {
      border: none;
      border-radius: 5px; 
      background: #FF9900;
      font-size: 16px;
      color: #fff;
      text-align: center;
	  padding: 5px;
}



.bg_Gruen {
      border: none;
      border-radius: 5px; 
      background: #86af49;
      font-size: 16px;
      color: #fff;
      text-align: center;
	  padding: 2px;
}

.bg_DunkelGruen {
      border: none;
      border-radius: 5px; 
      background: #6F923B;
      font-size: 16px;
      color: #fff;
      text-align: center;
	  padding: 2px;
}

.bg_Rot {
      border: none;
      border-radius: 5px; 
      background: #EE0000;
      font-size: 16px;
      color: #fff;
      text-align: center;
	  padding: 10px;
      }



.btnX {
	box-shadow: none;
	position: relative;
	text-decoration: none !important;
	padding: 10px;
	margin: 0;
	border-radius: 8px;
	text-shadow: none;
	background: #86af49;
	display: inline-block;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;

}
.btnX:hover {
	color: #ffffff;
	background: #ebc317;
	text-decoration: none !important;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}



table.TableSlots {
  /* border: 3px solid #DDDDDD; /* #002E5F; */ 
  width: 100%;


}
table.TableSlots td {
    /* text-align: center; */
}

.bg_00 { color: #009900; padding: 5px; }
.bg_10 { color: #009900; padding: 5px; }
.bg_20 { color: #009900; padding: 5px; }
.bg_30 { color: #009900; padding: 5px; }
.bg_40 { color: #8CBB26; padding: 5px; }
.bg_50 { color: #8CBB26; padding: 5px; }
.bg_60 { color: #8CBB26; padding: 5px; }
.bg_70 { color: #F4E500; padding: 5px; }
.bg_80 { color: #FDC60B; padding: 5px; }
.bg_90 { color: #EA621F; padding: 5px; }
.bg_100 { color: #CC0000; padding: 5px; }


.btnSlot {
      border: none;
      border-radius: 5px; 
      font-size: 14px;
      color: #000000;
      /* text-align: center; */
      background: #EEEEEE;
      margin-bottom: 5px;
      font-weight: normal;
      padding: 3px 30px 3px 30px;
}
.btnSlot:hover {
      background: #CCCCCC;
      }
.btnSlot a {
    color:#000000;
    /* display:block; */
    height:100%;
}

.btnSlotHighLight {
      border: none;
      border-radius: 5px; 
      /* font-size: 12px; */
      color: #990000;
      /* text-align: center; */
      background-color: #DDC4C4;
      margin-bottom: 5px;
      font-weight: bold;
      padding: 3px 30px 3px 30px;
}

.btnSlotHighLight a {
    color:#000000;
    /* display:block; */
    height:100%;

}



.btnSlotBGBefore {
      border: none;
      border-radius: 5px; 
      font-size: 14px;
      color: #000000;
      /* text-align: center; */
      background: #DDDDDD;
      margin-bottom: 5px;
      font-weight: normal;
      padding: 3px 30px 3px 30px;
}

.btnSlotBGBefore a {
    color:#000000;
    /* display:block; */
    height:100%;

}


.btnSlotBGAfter {
      border: none;
      border-radius: 5px; 
      font-size: 14px;
      color: #000000;
      /* text-align: center; */
      background-color: #DEDC00;
      margin-bottom: 5px;
      font-weight: normal;
      padding: 3px 30px 3px 30px;
}

.btnSlotBGAfter a {
    color:#000000;
    /* display:block; */
    height:100%;

}


.btnSlot_1 {
      border: none;
      border-radius: 5px; 
      font-size: 14px;
      color: #000000;
      /* text-align: center; */
      background: #76D0FC;
      margin-bottom: 5px;
      font-weight: normal;
      padding: 3px 30px 3px 30px;

}
.btnSlot_2 {
      border: none;
      border-radius: 5px; 
      font-size: 14px;
      color: #000000;
      /* text-align: center; */
      background: #7BFC76;
      margin-bottom: 5px;
      font-weight: normal;
      padding: 3px 30px 3px 30px;

}


.BGtoBG {

  border: none;
  border-radius: 6px; 
    background-color: #FFF6BF;
    color: #630B44;
    padding: 2px 10px;
}

.BGtoBG2 {
  border: none;
  border-radius: 6px; 
    background-color: #F0EFFF;
    color: #1C14A4;
    padding: 2px 10px;
}

.dick {
    font-weight: bold;
}



.btnAtt {
      margin-top: 10px;
      border: none;
      border-radius: 5px; 
      font-size: 16px;
      color: #FFFFFF;
      text-align: center;
      background-color: #e30613;
      font-weight: bold;
      padding: 10px;
}

.btnInfo {
      margin-top: 10px;
      border: none;
      border-radius: 5px; 
      font-size: 16px;
      line-height: 16px;
      color: #e15b10;
      text-align: center;
      background-color: #FFE0B3;
      font-weight: bold;
      padding: 10px 10px 1px 10px;
}

.btnFact {
      margin-top: 10px;
      border: none;
      border-radius: 5px; 
      font-size: 16px;
      line-height: 16px;
      color: #0F47E1;
      text-align: center;
      background-color: #B3E1FF;
      font-weight: bold;
      padding: 10px 10px 1px 10px;
}


table.blueTable {
  border: 3px solid #DDDDDD; /* #002E5F; */
  background-color: #EFEFEF;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid #CCCCCC;
  padding: 5px 10px;
}
table.blueTable tbody td {
  font-size: 16px;
}
table.blueTable tr:nth-child(even) {
  background: #FFFFFF; /* #002E5F; */
}
table.blueTable thead {
  background: #634e42; /* #002E5F; */
  font-size: 16px;
  color: #FFFFFF;
  border-bottom: 0px solid #444444;

}
table.blueTable thead th {
  font-size: 20px;
  color: #FFFFFF;
  border-left: 0px solid #D0E4F5;
}
table.blueTable thead th:first-child {
  border-left: none;
}

table.blueTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #634e42; /* #002E5F; */
  border-top: 0px solid #444444;
}
table.blueTable tfoot td {
  font-size: 18px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}








table.smallTable {
  border: 3px solid #DDDDDD; /* #002E5F; */
  background-color: #111111;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.smallTable td, table.smallTable th {
  border: 1px solid #DDDDDD;
  padding: 5px;
}
table.smallTable tbody td {
  font-size: 14px;
}
table.smallTable tr:nth-child(even) {
  background: #555555; /* #002E5F; */
}
table.smallTable thead {
  background: #DDDDDD; /* #002E5F; */
  font-size: 10px;
  border-bottom: 0px solid #444444;
}
table.smallTable thead th {
  font-size: 12px;
  color: #FFFFFF;
  border-left: 0px solid #D0E4F5;
}
table.smallTable thead th:first-child {
  border-left: none;
}

table.smallTable tfoot {
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  background: #CCCCCC; /* #002E5F; */
  border-top: 0px solid #444444;
}
table.smallTable tfoot td {
  font-size: 12px;
}
table.smallTable tfoot .links {
  text-align: right;
}
table.smallTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}









/* Eingabefeld für Menge +/- */

/* -- quantity box -- */

.quantity {
 display: inline-block;  width: 15%;
}

.quantity .input-text.qty {
 width: 35px;
 height: 39px;
 padding: 0 5px;
 text-align: center;
 border: 1px solid #efefef;
 font-size: 30px;
 font-weight: bold;
 background-color: #555555;
 color: #FFFFFF;
}

.quantity.buttons_added {
 text-align: left;
 position: relative;
 white-space: nowrap;
 vertical-align: top; }

.quantity.buttons_added input {
 display: inline-block;
 margin: 0;
 vertical-align: top;
 box-shadow: none;
}

.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
 padding: 7px 10px 8px;
 height: 41px;
 ;
 border: 1px solid #efefef;
 cursor:pointer;
 width: 50px;
 color: #FFFFFF;}

.quantity.buttons_added .minus {
 border-right: 0;
 font-weight: bold;
 background-color: #990000;}

.quantity.buttons_added .plus {
 border-left: 0;
 font-weight: bold;
 background-color: #86af49;}

.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
 background: #EEAA00; }

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 -moz-appearance: none;
 margin: 0; }
 
 .quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
 outline: none; }



/* Tooltip container https://www.w3schools.com/howto/howto_css_tooltip.asp */
.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}