html,  body {
	font-family: "titillium-web", sans-serif;
	color: #4F4D4D;
font-weight: 400;
font-style: normal;
	font-size: 100%;
	margin: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
	scroll-behavior: smooth;
	scroll-padding: 160px;
}
body{
font-style: normal;
background-color: #FCFCFC!important;
}

.abstandkl {
	display: block;
	height:6px;
	margin: 0;}
.abstand {
	display: block;
	height:20px;
	margin: 0;}
.abstand1 {
	display: block;
	height:60px;
	margin: 0;}


section {margin:5rem 0;}

.txtbig {font-size: 1.2em;}

.coltxt {
			display: flex;
			column-count:2;
			/*column-width:600px;
	column-gap: 40px;
		padding:2em;*/}

.colvtop {
	display: block;
	position: relative;
	vertical-align:top!important;
	padding:2rem!important}
.col-lg-6 {position:relative;width:100%;min-height:1px;padding:0 15px;}
.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%;}

.achtung{display: block;
position: relative;
left:-2px;
padding: 1em;
background-color: rgba(255,255,255,0.69);
margin:0 0 10px 0!important;
max-width:400px;}

p {margin: 0; padding: 0;}
ul {margin: 0; padding: 0;}
li {margin: 0; padding: 0;}

a {color:#0C9DA6!important;
text-decoration: underline!important;
}
/*List Bullet Color*/
     ::marker {
      color: #FDA118;
      font-size: 2em;}

h1,h2,h4,h5,h6{font-weight:400!important; margin: 1em 0 0 0;}
h3 {font-weight:200!important;}
h2 {color: #626262!important;}

.white, .white h2{color:#fff!important;
line-height: 160%;}


/*.img-fluid{max-width:100%;height:auto}*/


.btn-primary{
display: block;
width: 320px;
padding:0.6rem 4rem;
margin: 20px 0;
text-align: center;
	font-size: 1rem;
color:#fff!important;
background-color:#FF8900;
background:linear-gradient(270deg,#FCAF3B,#EB974A 100%);
text-transform:uppercase;
text-decoration: none!important;
border-radius:0.8em;
transition: all 100ms ease-in;
}
.btn-primary:active,.btn-primary:focus,.btn-primary:hover {
    background-color:#3BCDFC!important;
    background:linear-gradient(90deg,#0C9DA6,#81DAEE 100%);
	box-shadow: 3px 3px 8px rgba(0,0,0,0.27);
}
.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(100,100,100,0.50)}


.txt-header{
	display: block;
	max-width: 52%;
	text-align: left!important;
font-size:1.8rem;
line-height: 2.6rem;
color:#fff;
text-shadow: 1px 1px 6px rgba(0,0,0,0.60)!important;
margin-left: 0px;
}

.navbar-custom{
    padding-top:1rem;
    padding-bottom:1rem;
    /*background:linear-gradient(90deg,rgba(255,255,255,0.80),rgba(224,224,224,0.80) 100%);*/
    background-color:rgba(255,255,255,0.80);
}
.navbar-custom .navbar-brand {
    text-transform:none!important;
    font-size:1.3rem;
    letter-spacing:.1rem;
    font-weight:400;
	color: #ED930C;
}
.navbar-custom .navbar-nav .nav-item .nav-link{
    font-size:.8rem;
    font-weight:400;
    letter-spacing:0;
}
.nav-link {
    font-size:1.2rem!important;
    color: #FDA118!important;
	text-decoration: none!important;
}

header.masthead{
	position:relative;
	overflow:hidden;
	padding-top:calc(6rem + 72px);
	padding-bottom:7rem;
	min-height: 600px;
	width:auto;
	background-image:url(../img-assets/hl-home4.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:scroll;
	background-size:cover; 
}

header.masthead .masthead-content{z-index:1;position:relative}
header.masthead .masthead-content .masthead-heading{
    font-size: 3rem;
    text-shadow: 4px 4px 20px rgba(0,0,0,0.30);
}
header.masthead .masthead-content {font-size:4rem}

.masthead-subheading {
	display: block;
	max-width: 52%;
	text-align: left!important;
font-size:2.4rem!important;}


header.mastheadimp{
	position:relative;
	overflow:hidden;
	padding-top:calc(6rem + 72px);
	padding-bottom:7rem;
	min-height: 360px;
	width:auto;
	background-image:url(../img-assets/birgita_lang_Illustration-02.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:scroll;
	background-size:cover;
}

.headertxt {
	color:#fff;
	display: block;
	max-width: 100%;
	margin: auto 0 auto 12%;
	text-align: left!important;
font-size:300%!important;
font-weight: 500!important;
text-shadow: 1px 1px 8px rgba(0,0,0,0.33);}

.headertxtkontakt {
	color:#fff;
	display: block;
	position: relative;
	top:-60px!important;
	max-width: 100%;
	/*margin: auto 0 auto 12%;*/
	text-align: left!important;
font-size:300%!important;
font-weight: 500!important;
text-shadow: 1px 1px 8px rgba(0,0,0,0.33);}

.txtkontakt {display: block;position: relative;top:-60px!important;}

.head-all {
	position:relative;
	overflow:hidden;
	padding-top:calc(1rem + 72px);
	padding-bottom:7rem;
	width:auto;
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:scroll;
	background-size:cover;
}
.head-therapie {
		min-height: 500px!important;
		background-image:url(../img-assets/birgita_lang_Illustration-05.jpg);
}
.head-about {
		min-height: 500px!important;
		background-image:url(../img-assets/hl-about2.jpg);
}
.head-paartherapie {
		min-height: 500px!important;
		background-image:url(../img-assets/hl-slide-paartherapie.jpg);
}
.head-honorar {
		min-height: 600px!important;
		background-image:url(../img-assets/hl-honorar.jpg);
}
.head-kontakt {
		min-height: 640px!important;
		background-image:url(../img-assets/birgita_lang_Illustration-02.jpg);
}



.bg-footer{background-color:#D7F0F7!important;
	padding: 80px 40px;
    background:linear-gradient(270deg,rgba(227,247,251,1.00),rgba(207,235,241,1.00) 100%);
}


.fade-down {padding-top: 120px;
animation: fade-down 0.9s;}

@keyframes fade-up {
0% {
	opacity: 1;
	transform: translateY(60px) scale(1);
	}
100% {
	opacity: 1;
	transform: translateY(0px) scale(1);
	}
}

@keyframes fade-down {
0% {
	opacity: 0;
	transform: translateY(-30px) scale(1);
	}
100% {
	opacity: 1;
	transform: translateY(0px) scale(1);
	}
}

.scroll-left {
animation: scroll-left 1.4s;}

@keyframes scroll-left {
0% {
	opacity: 1;
	transform: translateX(60px) scale(1);
	}
100% {
	opacity: 1;
	transform: translateX(0px) scale(1);
	}
}
.intro {
	animation: fade-up 0.5s;
}

/*//// Fade inscroll top ANimation css /////*/
.fade-in {
	position: absolute;
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
	0% {top:-6%;}
	100% {top:0%;}
}
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
		0% {top:-6%;}
	100% {top:0%;}
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
		0% {top:-6%;}
	100% {top:0%;}
}
@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
		0% {top:-6%;}
	100% {top:0%;}
}


/*MAYBE REMOVE??????*/

p {	font-size: 100%;}
/* What it does: Stops email clients resizing small text. */
* {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
	width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
	margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,  td {
	mso-table-lspace: 0pt !important;
	mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
	border-spacing: 0 !important;
	border-collapse: collapse !important;
	table-layout: fixed !important;
	margin: 0 auto !important;
}
table table table {
	table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
	-ms-interpolation-mode: bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
	border-bottom: none !important;
}
/* What it does: Another work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
	color: inherit !important;
}

    /* Progressive Enhancements */
        
        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }



/* Media Queries */
        @media screen and (max-width: 420px) {	
section {margin:4rem 0;}
.txt-header{
	display: block;
	position: relative;
	top: 120px!important;
	max-width: 60%;
font-size:1.8rem;
	font-weight: 500!important;
line-height: 2.2rem;
margin-left: 10px;
}		
.fade-down {padding-top: 0px;
animation: fade-down 0.9s;}			
.head-about {
		min-height: 500px!important;
		background-image:url(../img-assets/hl-about2.jpg);
}
.headertxt {
	display: block;
	position: relative;
	top: 300px!important;
	margin: auto 0 auto 20px;
	text-align: left!important;
font-size:260%!important;
}			
.headertxtkontakt {
	display: block;
position: relative;
	top:-50px!important;
font-size:260%!important;
			}
.txtkontakt {display: block;position: relative;top:-40px!important;}
			
			
            .email-container {
                width: 100% !important;
            }

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
            .display-4{font-size:1.6rem !important;
            overflow-wrap: break-word!important; }
                
        }