/* abel-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/abel-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/source-sans-3-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/source-sans-3-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

#adresse-container-outer {
    position: sticky;
 top: 0;}

#fwNav1 .fwNavItem {
border-right: 1px solid #CCCCCC;
}

.height40 {height:40px; border-radius: 5px; float: left; padding-left: 10px; font-size: 17px; font-family: Abel, sans-serif; width: 99%}
.box-message {max-width: 99.5%; border-radius: 5px; padding-left: 10px; padding-top: 10px; font-size: 17px; font-family: Abel, sans-serif; }


.inner-box {
padding: 12%;
margin-right: 5%;
background-color: #aaacab;
width: 83%
}

.flex {
    display: flex;
    align-items: stretch;
}

.centercenter {
display: flex;
justify-content: center;
align-items: center;
}

.centerspacebetween {
display: flex;
align-items: center;
justify-content: space-between;
}

.centerbottom {
display: flex;
justify-content: center;
align-items: flex-end;
}

.stretch {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.end {
display: flex;
align-items: flex-end;
}

.calc1 {width: calc(100% - 169px)}

.circle {border-radius: 50%; box-shadow: -1px 15px 20px rgba(0,0,0,0.4)}

.menue-bar{
background-color: rgba(111,111,111,0.6);
}

.menue {
background-color: rgba(10,10,10,0.6);
display: flex;
}


/*navigationfade*/

.nav {list-style: none;}

.nav dd {float: left;}

.nav > dd a {
display: block;
padding: 12px 18px;
color: #eef2f5;
transition: all ease 0.5s:
}

/*fade out inactive links on hover*/
.nav:hover > dd a {opacity: 0.75;}


/*override previous rule to highlight current link*/
.nav > dd:hover a {
opacity:1;
color: #de214a;
text-shadow:  -6px 6px 6px rgba(0,0,0,0.5);
border-bottom: 0px solid red;
padding-bottom: 12px;
animation: bounce 3s infinite;
-webkit-transform: translateX(-10%);
-ms-transform: translateX(-10%);
transform: translateX(-10%);
transition: opacity 250ms ease-in-out;
}

.nav > dd:active {
opacity:1;
color: #de214a;
}

.dd:active {
opacity:1;
color: red;
border-bottom: 2px solid red;
padding-bottom: 12px;
}

.calculate1 {width: calc(100% - 110px);}



/* Style the tab */
.tab {
background-color: #424141;
}

/* Style the buttons that are used to open the tab content */
.tabbutton {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tabbutton:hover {
  background-color: #e46e68;
}

.pfeil {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: 0.3s;
background-image: url('/fonds/arrow-red.png');
background-size: cover;
}

/* Change background color of buttons on hover */
.pfeil:hover {
background-image: url('/fonds/arrow-grey.png');
background-size: cover;
}

/* Create an active/current tablink class */
.tabbutton.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
} 

.onhover:hover {
opacity: 0.8;
}

.tab2 {
background-color: rgba(255,255,255,0.7);
width: 92px;
}

/* Style the buttons that are used to open the tab content */

.tabconti {
border: 6px solid rgba(255,255,255,0.4);
border-radius: 12px;
margin-left: calc(50% - 50px);
width: 100px;
box-shadow: 0px 9px 9px rgba(0,0,0,0.5);
}

.tabbutton2 { 
outline: none;
cursor: pointer;
padding: 4px;
transition: 0.3s;
border-radius: 6px;
box-shadow: 5px 5px 9px rgba(0,0,0,0.4);
}

/* Change background color of buttons on hover */
.tabbutton2:hover {
  background-color: rgba(255,255,255,0.9);
}

/* Create an active/current tablink class */
.tabbutton2.active {
background-color: #ccc;
}

/*shapeshapeshape...shape your booty*/
.shape-url-1 {
  shape-margin: 6px;
  shape-outside: url('/Resources/CatrinRadek-3.png');
}

.lebensabschnitte, .fliess, .fliessweiss {font-size: medium}


@media screen and (max-width: 500px) {
.textbox, .flex {display:block}
}

@media screen and (max-width: 600px) {
.centerspacebetween, .centerbottom {display: block; float: left}
}

@media screen and (max-width: 768px) {
.Rubriken {hyphens: auto; margin-bottom:0;}
.stretch {display: block} 
.inner-box {background-color: rgba(0,0,0,0); margin-right:0; padding:1%; width:98%}
}

@media screen and (max-width:1024px){
.kundenstimmen {font-size: 1.2em}
.lebensabschnitte, .fliess, .fliessweiss {font-size: 1em}
.inner-box {padding: 12%; margin-right:6%; width:94%; float: left;}
}

@media screen and (max-width: 1050px) {
.shape-url-1, .shape-url-2, .shape-url-3 {shape-margin: 25px;}
}