/* ---------------------------------
   Standard installation TYPO3 10.4.x
   fetsch ip
   Version 1.0.0 - 13.08.2020
   ---------------------------------- */

body {
  position:relative;
  background-color: rgb(214, 236, 249);
}
html {
  overflow-y:scroll;  
}
html, body {
  margin:0;
  padding:0;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  scroll-behavior: smooth;
}
body {
 margin: 70px 0 0 0;
 margin:0; 
}
body.home {
  margin:0;
}
main, header#headerarea, footer {
  display:block;
  margin:0;
  padding:0;
} 

/* General 
   ------- */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
a {
  transition: color 0.1s ease-out;
  color: #0056b3;  
  color: #346B94;
  color: #275e87;
  color: #346B94;
}
a:hover {
  transition: color 0.1s ease-out;  
  color: #007bff;
   
}
.ts-a:after{ content:"@"; }
.ts-b:after{ content:"."; }

h1,h2,h3,h4 {
 font-family: 'Raleway', sans-serif; 
 font-weight: 300;
}
button, [type="button"], [type="reset"], [type="submit"] {
  border-radius:2px;
}
.btn-outline-light:hover {
    color: #212529;
    background-color: #f8f9fa;
    background-color: rgb(248,249,250, 0.3);
    border-color: #f8f9fa; 
}
.btn-dark {
  color: #fff;
  background-color: rgb(55, 63, 67, 0.9);
  border-color: rgb(55, 63, 67, 1.0); 
}
.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  background-color: rgb(88, 88, 90);    
  background-color: rgb(88, 88, 90, 0.6);    
  background-color: rgb(88, 88, 90, 0.8);
}

.row {
  padding-left:0;
  padding-right:0;
}

/* Header, Menu etc.
   -----------------  */
#headerarea {
 background-color: rgb(214, 236, 249);  
  background-color: rgb(255, 255, 255);
  box-shadow: 0 6px 18px -6px rgba(39, 94, 135, 0.5);
  z-index:1200;
  position:relative;
}
#head_c01 {

}
#head_r1 {

}
#logowrap {
  width:auto;
  padding: 0 10px 0 10px;
  padding:0;
  background-color: white;
}
#logo {
	background: repeating-linear-gradient(
	  to right,
	  #d6ecf9,
	  #d6ecf9 7px, 
	  #ffffff 7px,  
	  #ffffff 15px
	);
  transition: background 1.5s ease-out;  
  height: 66px;
  width:248px; 
  width:248px; 
  overflow:hidden;  
	margin: 10px 0;
  position:relative;


}
#logo:hover {
	background: repeating-linear-gradient(
    to right,
    rgb(214, 236, 249, 0.5),
    rgb(214, 236, 249, 0.5) 7px, 
    #ffffff 7px,  
    #ffffff 15px
	);	
  transition: background 1.5s ease-out;  	
}    
#logo h1 {
  padding: 1px 0 0 16px;
  margin: 0 0 0 0;  
  font-family: 'Amiri', serif;
  text-transform: uppercase;
  font-size: 37px;
  line-height: 1.2;
  letter-spacing: 1px;
  font-weight:300;
  color:#275e87;
}   
#logo h1:first-letter {
  font-size: 42px;	
}
#logo p {
  position:relative;
  top:-10px;
  text-align: center;
  font-family: 'Parisienne', cursive; 
  font-weight:500;
  font-size:17px;
  line-height: 1.2; 
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  color:#275e87;
}
#logo a {
  color:#275e87;
  text-decoration: none;
}
#logo a:hover {
  color:#00386b;
  text-decoration: none;
}






 
   
/*    altes: 

header#headerarea {
  position: fixed;
  top:0;
  left:0;
  height: 70px;
  z-index:1000;
  color:#fff;
  transition: background-color 0.5s ease-out;  
}
header#headerarea, body.content1 header#headerarea, body.content2 header#headerarea, body.content3 header#headerarea {
  background-color: rgb(55, 63, 67);
  background-color: rgb(55, 63, 67, 1);  
}
body.home header#headerarea {
  background-color: transparent;
  background-color: rgb(55, 63, 67); 
  background-color: rgb(55, 63, 67, 0.8);
  transition: background-color 0.5s ease-out;    
} 
body.home header#headerarea.scroll50 {
  background-color: rgb(55, 63, 67);  
  background-color: rgb(55, 63, 67, 1);
  background-color: rgb(55, 63, 67, 1.0);   
  transition: background-color 0.5s ease-out;  
}
header#headerarea a {
  color:#fff; 
  transition: color 0.5s ease-out;  
}
header#headerarea a:hover {
  color:rgb(210, 210, 210); 
  color:silver;  
}
*/
/* Brand - Link mit animated underline
   ----------------------------------- 
header#headerarea a#brand {
  position: absolute;
  top:22px;
  left:38px;
  font-family: 'Roboto', sans-serif;  
  font-weight: 300;
}
header#headerarea a#brand a span {
  position: relative;
  display: inline-block;
}
header#headerarea a#brand span::before {
    box-sizing: border-box;
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    height: 10px;
    content: "";
    opacity: 0;
    border-top:2px solid #fff;
    transition: all .2s;
}
header#headerarea a#brand:hover {
  text-decoration: none;  
  color:#fff;
}
header#headerarea a#brand:hover span::before {
    top: 23px; 
    opacity: 1;    
}
*/
/* Symbols Social Links, Facebook, Twitter, Phone, Mail, Print
   ------------------------------------------------------------ */
header#headerarea a#lastminute {
  color: #c51230;
  color: #920000;  
  position: absolute;
  top:10px;
  right:0px;
  font-size:26px
}
header#headerarea a#lastminute:hover {
  text-decoration: none !important;
  color: rgb(103,158,199);  
}


header#headerarea a#facebook {
  color: rgb(39, 94, 135);
  position: absolute;
  top:10px;
  right:15px;
  right:40px;
  font-size:26px
}
header#headerarea a#facebook:hover {
  text-decoration: none !important;
  color: rgb(103,158,199);   
}
header#headerarea a#mail {
  color: rgb(39, 94, 135);  
  position: absolute;
  top:10px;
  right:48px; 
  right:80px;  
  font-size:26px;
}
header#headerarea a#mail:hover {
  text-decoration: none !important;
  color: rgb(103,158,199);   
}
header#headerarea a#phone {
  color: rgb(39, 94, 135);    
  position: absolute;
  top:10px;
  right:86px;
  right:120px;  
  font-size:26px
}
header#headerarea a#phone:hover {
  text-decoration: none !important;
  color: rgb(103,158,199);  
}









header#headerarea a#print {
  position: absolute;
  top:22px;
  right:128px;
  font-size:26px
}
header#headerarea a#print:hover {
  text-decoration: none !important;
}

header#headerarea a#phone span {
  position: absolute;
  display:none;
  font-family: 'Roboto', sans-serif;
  font-size:16px;
  width: 260px;
  right: 28px;
  top:5px;  
  color: #fff;
  color: rgb(55, 63, 67);
  color: rgb(0, 30, 71);
  text-align:right;
}
header#headerarea a#phone:hover  span {
  display:block;
}

/* Langmenu
   --------- */
div.langmenu {
  position: absolute;
  top:22px;
  left:210px;  
  font-size:1rem;  
  color: gray;  
}
header#headerarea div.langmenu a.lang {
  color: gray;  
}
header#headerarea div.langmenu a.active {
  color: #fff;
}


/* Nav, Main - Menu
   --------------- */
nav {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-size:16px; 
  display:flex;
  align-items: center;
  /* justify-content:center; */
}
nav a {
  color: rgb(39, 94, 135);
  color: rgb(55, 63, 67);
}
nav ul#main-menu a:hover {
  text-decoration: none;
  color: rgb(39, 94, 135) !important;
}
nav a span {
  display: inline-block; 
  padding: 0 10px 0 10px;   
}
nav li a:hover span, nav li.active a span  {
  background-color: rgb(214, 236, 249); 
}
nav ul {
  list-style: none;
}
ul#main-menu {
 margin:0; 
 padding:0;
 margin-top: 54px;
}
ul#main-menu  > li {
 position:relative;
 float: left;
 cursor:pointer;
 height: auto;
}
ul#main-menu  > li a {
  padding: 0 20px 33px 20px;
  padding: 0 0 33px 0;
  padding: 0 5px 33px 5px;
  margin: 0 ;  
}
ul#main-menu  li ul {
  margin:0; 
  padding:0;  
  top:54px;
  top:44px;

  position: absolute;
  display:none;
  background-color: white;
  color: #000;
  padding:10px 30px 20px 10px;
  
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;  

  -webkit-box-shadow: 0px 2px 4px 8px rgba(78,78,80,0.2);
  -moz-box-shadow: 0px 2px 4px 8px rgba(78,78,80,0.2);
  box-shadow: 0px 2px 4px 8px rgba(78,78,80,0.2);

  -webkit-box-shadow: 0px 2px 4px 8px rgba(39, 94, 135, 0.5);
  -moz-box-shadow: 0px 2px 4px 8px rgba(39, 94, 135, 0.5);  
  box-shadow: 0 6px 18px -6px rgba(39, 94, 135, 0.5);  
  
  
}
ul#main-menu  li:nth-child(3) ul {
  width: 250px;
}
ul#main-menu  li ul li:nth-child(6) {
  padding-top: 8px;
}

ul#main-menu  li ul a {
  color: #000;
  color: #001E47;
}
ul#main-menu  li ul li.active a {
  text-decoration: underline;
}
ul#main-menu  li:hover ul { 
  display:block;
}
ul.level2::before {
  content: ""; /* Dreieck malen */
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #fff;   
  position:absolute;
  top: -6px;
  left: 20px;
}
/*
nav a::after {

    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    opacity: 0;
    transition: all .2s;
    -webkit-transform: translateY(calc(100% - 4px));
    transform: translateY(calc(100% - 4px));
}
*/















/* Standard Content
   ---------------- */
main {
  z-index:900;

}   
main h1 { 
  width:100%;
  text-align:left; 
  font-size:42px;
  font-size:36px;
  font-weight:500; 
  line-height: 1.3;
  color:#275e87;  
  margin-top:1rem;  
  margin-bottom:1rem;  
}
main h2 {
  width:100%;
  text-align:left; 
  font-size:32px;
  font-size:28px; 
  line-height: 1.3;  
  font-weight:500; 
  color:#275e87;  
  margin-top:1rem;  
  margin-bottom:1rem;  
}
main h3 {
  width:100%;
  text-align:left; 
  font-size:22px;
  line-height: 1.3;  
  font-weight:500; 
  color:#275e87;  
  margin-top:1rem;  
  margin-bottom:0.5rem;  
}

main p  {
  text-align:left; 
  font-size:18px;
  color: rgb(55, 63, 67);
  color: rgb(0, 18, 59);
  color: rgb(0, 30, 71);
  margin-bottom:2rem;  

}
main ul {
  width:100%;
  text-align:left; 
  font-size:18px;
  color: rgb(55, 63, 67);
  color: rgb(0, 18, 59);
  color: rgb(0, 30, 71);  
  margin-bottom:2rem; 
  list-style-type: none;
  padding:0;
  margin:0 0 2rem 18px; 
  
}
main ul li:before {
  content: "\00BB";
  color: rgb(55, 63, 67, 1); 
  color: rgb(0, 18, 59);
  color: rgb(0, 30, 71);  
  font-size:18px;
  position: relative;
  top:-2px;
  left:-8px;
}   
.ce-textpic.ce-left .ce-gallery {
  float:left;
  width: 49%;
  margin-right:1%;
}
.ce-textpic.ce-left .ce-gallery img {
  width:100%;
  height:auto;
}
.ce-textpic.ce-left .ce-bodytext {
  float:left;
  width: 50%;  
}
.ce-textpic.ce-right .ce-gallery {
  float:right;
  width: 49%;
  margin-left:1%;
}
.ce-textpic.ce-right .ce-gallery img {
  width:100%;
  height:auto;
}
.ce-textpic.ce-right .ce-bodytext {
  float:left;
  width: 50%;  
}












/* Section stage on home
   ----------------------  */
div#stage {
  color:#fff;
  padding-left: 0;
  padding-right: 0;
  max-width: 1110px;
}
div#stagerow {

}
div#adown {
  position:absolute;
  left:0;  
  bottom: 35px;
  text-align:center;
  width:100%;
}
a#downunder {
  margin: 0 auto;
  z-index:1200;     
}
a#downunder:before  {
  content: ""; /* Dreieck malen */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 13px solid #fff;   
  clear:both;  
  position:relative;
  top: 0;
  left:1px;
}
div#stage h1 {
  font-size:64px;
  font-size:48px;
  font-weight: 700;
  margin-top:1rem;
  margin-bottom:2rem;
  width:100%;
  text-align:left;  
  color: white; 
  color: rgb(39, 94, 135); 
  color: black;  
  color: rgb(55, 63, 67);
  color: rgb(0, 18, 59);
  color: rgb(0, 30, 71);  
  color: rgb(39, 94, 135);
  color: rgb(1, 56, 97);
  /*
  text-shadow: 0.1em 0.1em 0.05em #fff;  
  text-shadow: 0.05em 0.05em 0.05em #fff;    
  */
}
div#stage p.preHeadline , div#stage h2{
  font-size:32px;
  width:100%;
  text-align:left;  
  font-weight:700;  
  color: rgb(55, 63, 67);
  color: rgb(1, 56, 97);  
}
div#stage p.postHeadline, div#stage p {
  font-size:18px;
  font-size:21px;
  width:100%;
  text-align:left;
  color: white; 

  color: rgb(55, 63, 67); 
  color: black;  
  color: rgb(0, 30, 71);  
  text-shadow: 0.1em 0.1em 0.05em #fff;
  text-shadow: 0.05em 0.05em 0.05em #fff;  
}

/* SLIDER
   ------ */
.theSlickslider {
 position:relative;
 width:100%; 
}
.theSlicksliderItem {
 position:relative;
}
.theSlicksliderItem img {
  width: 100%;
  height:auto;
}
.theSlicksliderItem .slick-caption {
  position: absolute;
  top: 100px;
  left:20px;
  top: 80px;
  top: 210px;
  left:10px;  
  
  color: white;
  padding: 25px 50px;
  background: radial-gradient(rgba(88, 88, 90, 0.4) 0%, rgba(88, 88, 90, 0.3) 30%, rgba(0, 0, 0, 0.0) 100%); 
  background: radial-gradient(rgba(88, 88, 90, 0.6) 0%, rgba(88, 88, 90, 0.4) 30%, rgba(0, 0, 0, 0.0) 100%); 
  background: radial-gradient(rgba(55, 63, 67, 0.4) 0%, rgba(55, 63, 67, 0.2) 20%, rgba(0, 0, 0, 0.0) 100%); 
  
}

.theSlicksliderItem:hover .slick-caption {
  cursor:pointer;
  background: radial-gradient(rgba(55, 63, 67, 0.5) 0%, rgba(55, 63, 67, 0.4) 20%, rgba(0, 0, 0, 0.0) 100%); 
}










/* Section welcome on Home
   ------------------------ */
section#welcome {
  display:block;
  background-color: rgb(55, 63, 67);  
  background-color: rgb(55, 63, 67, 0.9);  
  color: white;
}

/* Fixed Background-image: 
   ------------------------ */
section#welcome {
  background: url(/fileadmin/bilder/test/fetsch-ip-bgscroll-01.jpg) no-repeat fixed 0 0 / cover;
  background: url(/fileadmin/bilder/test/Platine_1920x960.jpg) no-repeat fixed 0 0 / cover;
  padding-left: 0px;
  padding-right: 0px;
}
section#welcome div.row {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  height: 100%;
  position: relative;
  width: 100%;
}
section#welcome div.row div {
  padding-left:0;
  padding-right:0;
}
section#welcome div.row {
  min-height: 30vh;  
  align-items: center;
  justify-content:center;   
}
section#welcome h1 {
  color: white;  
}
section#welcome h2 {
  width:100%;
  font-size:36px; 
  color: white;  
}
section#welcome p {
  width:100%;
  font-size:18px;
  margin-bottom:2rem; 
  color: white;  
}



/* Section teaser on Home
   ------------------------ */
section.teaser {
  padding-top:15px;
  padding-bottom:15px;
  background-color: #fff;
}
section.teaser #cteaser {

}
section.teaser #home_c03 {
  background-color: rgb(255, 255, 255);
}
section.teaser div.frame-layout-0 {
    position:relative;
    padding:0;
    width:100%;
    height: 214px;
    overflow:hidden;
}
section.teaser div.frame-layout-0 picture {
  width:100%;
  height:auto;
  top:0;
  left:0;
  z-index: 901;
  overflow:hidden;
}
section.teaser div.frame-layout-0 picture img {
  width:100%;
  height:auto;
  transition: width 1s, height 1s, transform 0.5s;  
  
  -webkit-transition: all .5s ease !important;
  -moz-transition: all .5s ease !important;
  -o-transition: all .5s ease !important;
  -ms-transition: all .5s ease !important;
  transition: all .5s ease !important;
  
}
section.teaser div.frame-layout-0 picture img:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);

  -webkit-transition: all .5s ease !important;
  -moz-transition: all .5s ease !important;
  -o-transition: all .5s ease !important;
  -ms-transition: all .5s ease !important;
  transition: all .5s ease !important;
    
}

section.teaser div.frame-layout-0:hover picture img {
  width:100%;
  height:auto;
  transition: width 1s, height 1s;  
}
section.teaser div.frame-layout-0 h1 {
  position: absolute;
  width:100%;
  font-size: 28px;
  height:auto;
  bottom:5px;
  left:5px;
  z-index: 902;
  
  width:auto;
padding: 0 5px 0 5px;
margin: 0 5px 0 5px;  
  background-color: rgb(214, 236, 249, 0.8);
  transition: background-color 0.5s;

}
section.teaser div.frame-layout-0 p {
  position: absolute;
  top:5px;
padding: 0 5px 0 5px;  
margin: 0 5px 0 5px;  
  background-color: rgb(214, 236, 249, 0.4);
  opacity: 0;
  transition: background-color 0.5s, opacity 1s;
  z-index: 903;
 
}
section.teaser div.frame-layout-0:hover h1 {
  background-color: rgb(214, 236, 249);  
  background-color: rgb(214, 236, 249, 0.9);
  transition: background-color 0.5s;  
  
}
section.teaser div.frame-layout-0:hover p {
  background-color: rgb(214, 236, 249);  
  background-color: rgb(214, 236, 249, 0.9);
  opacity: 1;
  transition: background-color 0.5s, opacity 1s;

}            
section.teaser { 
  opacity:1.0;
  transition: opacity 1s;
}
section.teaser.scrollpale { 
  opacity:0.3;
  transition: opacity 1s;
}

/* Section address on Home
   -------------------------- */
section#address {
  padding-top:50px;
  padding-bottom:75px;
  
  padding-top:5px;
  padding-bottom:5px;
  
  background-color: #fff;
}
/* Section urlaub on Home
   -------------------------- */
section#urlaub {
  padding-top:10px;
  padding-bottom:0px;
  background-color: #fff;
}


/* Section icons on Home
   -------------------------- */
section#icons {
  padding-top:50px;
  padding-bottom:75px;
  background-color: #fff;

  padding-top:0px;
  padding-bottom:5px;  

}
section#icons #cicons {

}
section#icons div.col-md-20p {
  opacity: 1.0;
  transition: opacity 1s;
}
section#icons.scrollpale div.col-md-20p {
  opacity: 0.3;
  transition: opacity 1s;
}


section#icons h3 {
  width:100%;
  text-align:left; 
  font-size:17px;
  line-height: 1.3;  
  font-weight:700; 
  color:#275e87;  
  margin-top:1rem;  
  margin-bottom:0.5rem;  
  text-align:center;
  margin: 0 5px 0 5px;
}
section#icons a:hover {
  text-decoration: none;
}
section#icons picture {
  margin: 5px 0;
  padding:0 0;
  width:100%;
  display:block;

}
section#icons img {
  margin: 10px auto;
  width: 70%;
  width: 50%;
  height:auto;
  display:block;

  
}
section#icons a:hover img {


-webkit-filter: grayscale(80%);
-moz-filter: grayscale(80%);
-ms-filter: grayscale(80%);
-o-filter: grayscale(80%);
filter: grayscale(80%);
  
}
section#icons a:hover h3 {
  color: rgb(55, 63, 67);
}

.col-md-20p {
  width: 20%;
  flex: 0 0 20.0%;

}
.col-md-20p img {
  width:95%;
  height: auto;
}

/* Variante 0.2.1 */

#icons .frame-layout-0 {
  color: #fff;
}
#icons .col-md-20p:nth-child(2) {
  background-color: #5A91BA;
}
#icons .col-md-20p:nth-child(3) {
  background-color: #275E87;
}
#icons .col-md-20p:nth-child(4) {
  background-color: #74ABD4;
}
#icons .col-md-20p:nth-child(5) {
  background-color: #4178A1;
}
#icons .col-md-20p:nth-child(6) {
  background-color: #8DC4ED;
}

#icons .col-md-20p:nth-child(2):hover {
  background-color: #74ABD4;
  cursor:pointer;
}
#icons .col-md-20p:nth-child(3):hover {
  background-color: #4178A1;
  cursor:pointer;
}
#icons .col-md-20p:nth-child(4):hover {
  background-color: #5A91BA;
  cursor:pointer;
}
#icons .col-md-20p:nth-child(5):hover {
  background-color: #275E87;
  cursor:pointer;
}
#icons .col-md-20p:nth-child(6):hover {
  background-color: #5A91BA;
  cursor:pointer;
}






section#icons h3 {
  width:100%;
  text-align:left; 
  font-size:17px;
  line-height: 1.3;  
  font-weight:700; 
  color:#fff;  
  margin-top:1rem;  
  margin-bottom:0.5rem;  
  text-align:center;

}
section#icons a:hover h3 {
  color:rgb(214, 236, 249);;  
}







/* Section services on Home
   -------------------------- */
#services {
  padding-top:50px;
  padding-bottom:1px;
  background-color: #fff;
 width:100%;
}

#services i {
 text-align: center;
 font-size: 48px; 
 line-height: 1.1;
 display:inline-block;
 margin: 0 auto;
}

#services .frame-layout-0 {
  height:135px;
  color: #fff;
  text-align:center;
  padding:20px;
}
#services .frame-layout-0 a {
  color: #fff;
  display:inline-block;
  width:100%;
  margin: 0 auto;
}
#services .frame-layout-0 h3 {
  text-align:center;
  color: #fff;
  margin: 0.5rem 0 1rem 0;
}
#services .frame-layout-0:hover h3 {
  color: rgb(214, 236, 249);
  text-decoration:none;
}
#services .frame-layout-0 a {
  text-decoration:none; 
}
#services .frame-layout-0:hover i {
  color: rgb(214, 236, 249);
}
#services .frame-layout-0:nth-child(1) {
  background-color: #5A91BA;
}
#services .frame-layout-0:nth-child(1):hover h3 {
  /* color: #920000; */
}
#services .frame-layout-0:nth-child(1):hover i {
  /* color: #920000; */
}
#services .frame-layout-0:nth-child(2) {
  background-color: #275E87;
}
#services .frame-layout-0:nth-child(3) {
  background-color: #74ABD4;
}
#services .frame-layout-0:nth-child(4) {
  background-color: #4178A1;
}
#services .frame-layout-0:nth-child(5) {
  background-color: #8DC4ED;
}

#services .col-md-20p:nth-child(1):hover {
  background-color: #74ABD4;
  cursor:pointer;
}
#services .col-md-20p:nth-child(2):hover {
  background-color: #4178A1;
  cursor:pointer;
}
#services .col-md-20p:nth-child(3):hover {
  background-color: #5A91BA;
  cursor:pointer;
}
#services .col-md-20p:nth-child(4):hover {
  background-color: #275E87;
  cursor:pointer;
}
#services .col-md-20p:nth-child(5):hover {
  background-color: #5A91BA;
  cursor:pointer;
}





.services-title {
 width:100%;
 margin: 0 0 56px 0; 
}
.services-title h1 {
 text-align: center;
 font-size: 35px;
 width:100%;
}
.services-title p {
 text-align: center;
 font-size: 18px; 
 width:100%; 
}
.layout_1 .services-title h1 {
 text-align: left;
}
.layout_1 .services-title p {
 text-align: left;
}
.services-item h3 {

}
.services-item .s-icon {
  float:left;
  margin: 0 30px 0 0;
  padding:0;
  width:40px;
  font-size:38px;
  color: #07174a;
}
.services-item .s-icon:hover {
  color: #0056b3;
}
.services-item .s-icon i {

}
.services-item .s-body {
  display: table-cell;
  vertical-align: top;
  padding-right:20px;
  padding-right:0px;
  padding-bottom:20px;
}






/* Section pictures on Home
   -------------------------- */
section#pictures {
  padding: 50px 0;
  color:rgba(78, 78, 80, 1);
}
div#cpictures div  {
  display:flex;
  align-items: center;
  justify-content:center;
}
section#pictures h2 {
  width:100%;
  text-align:center; 
  font-size:36px;
  color:rgba(78, 78, 80, 1);
  margin-bottom:2rem;  
}
section#pictures p {
  width:100%;
  text-align:center;   
  font-size:18px;
  color:rgba(78, 78, 80, 1);
  margin-bottom:1rem;  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}
section#pictures img{
  width: 19%;
  width: 100%;
  height:auto;
  padding: 1%;
  transition: all 1s;
  opacity:1.0;
}
section#pictures.scrollpale img {
  opacity:0.3;
  transition: all 1s;
}

/* Powermail-Form
   --------------- */
.tx-powermail .radio {
  width: auto;
  padding-right:12px;
  float: left;
}


/* Symbols like fetsch ip */
/*
h2.car::before, h2.train::before, h2.ship::before {
  content: "\f1b9";
  font-family: 'FontAwesome';
  display: inline-block;
  line-height:1.3;
  font-size: 28px;
  color: rgb(55, 63, 67, 0.8); 
  position:absolute;
  top:-3px;
  margin: 0 10px 0 0;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}
h2.train::before {
  content: "\f238";
}
h2.ship::before {
content: "\f21a";
}
*/

section#cmain {
  
  background-color: #fff;
  padding-top:25px;
}
section#cmain2 {
  
  background-color: #fff;
  padding-top:5px;
}
section#cmain3 {
  
  background-color: #fff;
  padding-top:5px;
}

/* Special - CONTENT: Streetmap
   -----------------------------  */
div#openstreetmap, div#mapcontainer {
  height: 60vh;
}
div#openstreetmap div, div#mapcontainer div {
  padding:0 !important;
  margin:0 !important;  
}
div#openstreetmap iframe, div#mapcontainer iframe {
  padding:0;
  margin:0;
}
div#openstreetmap small, div#mapcontainer small {
 margin-left: 8px;  
}


/* Special - CONTENT: Misc
   -----------------------------  */
#belegung iframe, #content1_01 iframe{
  border: 1px solid #fff;
}
#bildergalerie {
  margin-bottom: 2rem;  
}
#bildergalerie img {
  width:31%;
  height:auto;
  padding: 0 0 0 0;
  margin: 1% 1%;
}

/* Subpage-Menu
   ------------ */
 .frame-layout-11 {

   
 }
  .frame-layout-11 h3 {
  font-size: 20px;
  font-weight: 500; 
 }
 .frame-layout-11 a {
   color: rgb(55, 63, 67);
 }
.frame-layout-11 a.hover {
   
}

/* Test Hintergrundbild 
   -------------------- */     
body.impressionen main {
  background-image:url('/fileadmin/bilder/testbilder04/IMG_9022.JPG');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;  
  background-attachment: fixed;
}

a#totop {
  position:fixed;
  right:25px;
  bottom:25px;
  display:block;
  width:auto;
color:#679EC7;  
z-index:2500;
font-size: 26px;
}
a#tobottom {
  position:fixed;
  right:25px;
  top:100px;
  display:block;
  width:auto;
color:#679EC7; 
z-index:2500; 
font-size: 26px
}
a#totop:hover, a#tobottom:hover {
    color:#4178A1;  
} 

/* Footer
   ------- */
footer {
  padding: 25px 0 50px 0;
  color: #fff;
  background-color:rgb(55, 63, 67);
  
  background-color:#4682b4;
  background-color:#275e87;
}
footer h3 {
  margin-top:1.5rem;  
  font-size: 24px;
  margin-bottom:2rem;
}
footer #copright {
  margin-top:20px;
  margin-bottom:2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}  
footer a {
  color: #fff;
}
footer #copright p {
  margin-bottom:0.25rem;
}
footer #copright ul  {
  list-style: none;
  padding:0;
  margin:0;
}
footer #copright ul li {
  float:left;
  padding: 0 0 0 0;
}
footer #copright ul li  a {
  color: #fff;
}
footer #copright ul li:after {
  content: "|";
  padding: 0 10px;
}
footer #copright ul li:last-child:after {
  content: "";
  padding: 0 0;
}

/*
Fetsch ip: background-color: rgba(82, 77, 73, 1.0);
pst        background-color: rgb(75, 76, 81);
ose:                         rgb(90, 90, 90);

  background-color: rgba(55, 63, 67, 0.604); #4E4E50
  
  display:flex;
  align-items: center;
  justify-content:center;   
*/

/* parallax4u 
   ========== */
.parallax4u-inner {
  position:relative;
} 
.parallax4u {
  overflow: hidden;
  padding: 10px 20px;
}
.parallax4u p, .parallax4u h1, .parallax4u h2, .parallax4u span  {
   color: white; 
}
#fi201,#fi201 h1, #fi201 p {
  color: white;
  padding-top:50px;
}

/* Collapse Box CSS
   ================== */
/* Header */
  .frame-layout-1 {

  }
  .frame-layout-1 header h2, .frame-layout-2 header h1 {
  font-size: 18px;
  font-size: 1.5rem;
  font-weight: 500;
  background-color: #f5f5f5; 
  padding: 12px 1rem ;
  line-height:1.5rem;
  border: 1px solid #ddd; 
  cursor: pointer;  
  margin:0;    
}
.frame-layout-1 header h2::before, .frame-layout-1 header h1::before {
  content: "+";
  transition: content 1s; 
  padding-right:0.5rem;  
}
.frame-layout-1.showbox header h2::before, .frame-layout-1.showbox header h1::before {
  content: "-";
}
/* Box */
.frame-layout-1 header + div { 
  background-color: #f5f5f5;
  border: 1px solid #ddd; 
  border-top: 0;  
  padding: 0 1rem ;  
  margin: 0 0 0.5rem 0;
  height:0;  
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;    
}
.frame-layout-1.showbox header + div { 
  margin: 0 0 0.5rem 0; 
  padding: 12px 1rem ;
  visibility: visible;
  opacity: 1; 
  height:auto;
  transition: visibility 0s, opacity 0.5s linear;  
}
/* Images beside Text */
.frame-layout-1 div.ce-textpic div.ce-gallery {
  height:0;  
  visibility: hidden;
  margin-bottom: 0;
  opacity: 0;  
  transition: visibility 0s, opacity 0.5s linear; 

}
.frame-layout-1.showbox div.ce-textpic div.ce-gallery {
  visibility: visible;
  opacity: 1;
  margin-bottom: 10px;
  height:auto;
  transition: visibility 0s, opacity 0.5s linear;   
}
.frame-layout-1 div.ce-textpic div.ce-bodytext {
  width:100%;
}
.frame-layout-1.showbox div.ce-textpic div.ce-bodytext {
  width:50%;
}
   
   
/* Collapse Box JavaScript - Version
   ================================= */
/* Header */
   .frame-layout-2 {
    margin: 0 0 0.5rem 0;
   }
   .frame-layout-2.showbox {
    margin: 0 0 0.5rem 0;
   }   
  .frame-layout-2 header h2, .frame-layout-2 header h1 {
    font-size: 18px;
    font-size: 1.5rem;
    font-weight: 500;
    background-color: #f5f5f5; 
    padding: 12px 1rem ;
    line-height:1.5rem;
    border: 1px solid #ddd; 
    cursor: pointer;  
    margin:0;    
  }
  .frame-layout-2 header h2::before, .frame-layout-2 header h1::before {
    content: "+";
    transition: content 1s; 
    padding-right:0.5rem;  
  }
  .frame-layout-2.showbox header h2::before, .frame-layout-2.showbox header h1::before {
    content: "-";
  }
  /* Box div */
  .frame-layout-2 header + div  { 
    background-color: #f5f5f5;
    border: 1px solid #ddd; 
    border-top: 0;  
    padding: 0 1rem ; 
    margin: 0 0 0 0;
    height:0;  
    opacity: 0;
    transition: padding 0.5s;
  }
  .frame-layout-2.showbox header + div { 
    margin: 0 0 0.5rem 0; 
    padding: 12px 1rem ;
  }
  .frame-layout-2 header + div.ce-txt-wrap p {
     padding: 12px 0 12px 0 ; 
     margin: 0;
  }
  .frame-layout-2 header + div.ce-txt-wrap ul {
     padding: 12px 0 12px 0 ; 
     margin: 0;
  }
  .frame-layout-2.showbox header + div.ce-txt-wrap {
     padding: 0 1rem ; 
  }

/* Images beside Text */
.frame-layout-2 div.ce-textpic div.ce-gallery {
 
}
.frame-layout-2.showbox div.ce-textpic div.ce-gallery {
 
}
.frame-layout-2 div.ce-textpic div.ce-bodytext {
  width:auto;    
}
.frame-layout-2.showbox div.ce-textpic div.ce-bodytext {
  width:auto;  
}

/* Teaser
   ====== */
.teaser4u {
  height: 12rem;
  position:relative;
  background-size:cover !important;
  margin:0.25rem;
}
.teaser4u a {
  display:block;
  height:100%;
  width:100%;
}
.teaser4u .teaser4u_inner {
  position: absolute;
  bottom:0;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  margin: 0;
  background-image: linear-gradient(rgba(88, 88, 90, 0.0) 0%, rgba(88, 88, 90, 0.7) 20%, rgba(0, 0, 0, 0.8) 100%); 
}
.teaser4u h2, .teaser4u h1 {
  padding: 0 0 0 0;
  margin: 0;
  color:white;
} 
.teaser4u .teaser4u_inner p {
  color:white;  
  padding: 0 0 0 0;  
  margin: 0;  
  height: 0;
  transition: height 0.3s ease-in-out; 
  overflow: hidden;  
} 
.teaser4u:hover .teaser4u_inner p {
  height: 5rem;
} 


/* Animation - fadeIn Website
   ---------------------------- */
div#stagerow {
  animation: fadein; 
  animation-duration: 1s;  
}
section#cmain, section#welcome {
  animation: fadein; 
  animation-duration: 1s;  
}
footer {
  animation: fadein; 
  animation-duration: 1.5s;   
}
@keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}

/* Animation - Image Gallery
   ------------------------- */
.frame-layout-3 div {
  overflow:visible;
}     
.frame-layout-3 {
  overflow:hidden;
} 
.frame-layout-3 figure.image {
  position: relative;
  top:0;
  left:0;
  opacity:1.0;
  animation: imgflyin;
  animation-duration: 1.1;
  animation-delay: 0;
  animation-timing-function: ease-in-out;  
}
@keyframes imgflyin {
  0% {top:900px;opacity:0}
  80% {top:0;opacity:0.5}  
  100% {top:0;opacity: 1}
}
.frame-layout-3 .ce-gallery figure {
  margin: 0.2rem 0 0.2rem 0;
}