@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
src: local('Roboto'), url(./Roboto/Roboto-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
src: local('Shadows Into Light'), url(./Shadows_Into_Light/ShadowsIntoLight.ttf) format('truetype');
}

p {
	font-size: 1.3em !important;
	}

.navbar-default.affix .navbar-header .navbar-brand {
    font-size: 20px !important;
    color: var(--NAVBAR-FIXED-BRAND-COLOR, var(--GENERAL-FONT-COLOR-2));
}

.navbar-default {
	background-color: var(--NAVBAR-FIXED-BACKGROUND-COLOR, var(--GENERAL-COLOR-2)) !important;
}

:root{

    /*
      Override desired values for the following variables.
    */

    /* GENERAL */

  /*  --GENERAL-FONT: "Merriweather", serif;
    --TITLE-FONT: var(--GENERAL-FONT-2);

    --BUTTON-FONT: var(--GENERAL-FONT-2);
  */

    /* HORIZONTAL RULE (HR) */
/*
    --HR-BORDER-COLOR: var(--GENERAL-COLOR-1);
    --HR-BORDER-LIGHT-COLOR: var(--GENERAL-COLOR-2);
*/


    /* NAVBAR */

    --NAVBAR-FONT: var(--GENERAL-FONT-2);
    --NAVBAR-BRAND-FONT: var(--GENERAL-FONT-2);
    --NAVBAR-FIXED-BACKGROUND-COLOR: var(--GENERAL-COLOR-2);
    --NAVBAR-FIXED-BRAND-COLOR: var(--GENERAL-LINK-COLOR-2);
    --NAVBAR-FIXED-BRAND-HOVER-COLOR: #728b98;
    --NAVBAR-FIXED-BUTTON-COLOR: var(--GENERAL-LINK-COLOR-2);
    --NAVBAR-FIXED-BUTTON-HOVER-COLOR: #728b98;
    --NAVBAR-BUTTON-ACTIVE-COLOR: #728b98;
    --NAVBAR-BUTTON-ACTIVE-BACKGROUND-COLOR: transparent;
    --NAVBAR-BACKGROUND-COLOR: rgba(255, 255, 255, .3);
    --NAVBAR-BRAND-COLOR: var(--GENERAL-LINK-COLOR-2);
    --NAVBAR-BRAND-HOVER-COLOR: #aed546;
    --NAVBAR-BUTTON-COLOR: var(--GENERAL-LINK-COLOR-2);
    --NAVBAR-BUTTON-HOVER-COLOR: #aed546;



    /* SIDEBAR */
/*
    --SIDEBAR-IMAGE-BORDER-RADIUS: var(--GENERAL-IMAGE-BORDER-RADIUS);
    --SIDEBAR-TITLE-FONT: var(--GENERAL-FONT-1);
    --SIDEBAR-FONT: var(--GENERAL-FONT-2);
    --SIDEBAR-LINK-FONT: var(--GENERAL-FONT-1);
*/


    /* HERO */
/*
    --HERO-IMAGE-HEIGHT: 500px;
    --HERO-IMAGE-HEIGHT-SMALL: 250px;
*/


    /* HOME */

    --HOME-TITLE-COLOR: var(--GENERAL-FONT-COLOR-3);
    --HOME-TEXT-COLOR: #728b98;
    

    /* uebermich */
/*
    --uebermich-IMAGE-BORDER-RADIUS: var(--GENERAL-IMAGE-BORDER-RADIUS);
    --uebermich-LINK-COLOR: var(--GENERAL-LINK-COLOR-2);
    --uebermich-LINK-COLOR-ACTIVE: var(--GENERAL-LINK-ACTIVE-COLOR-2);
*/


    /* SERVICES */
/*
    --SERVICES-CONTAINER-COLOR: transparent;
    --SERVICES-CONTAINER-BORDER-RADIUS: 0px;
    --SERVICES-CONTAINER-BOX-SHADOW: var(--GENERAL-BOX-SHADOW);
    --SERVICES-BOX-COLOR: var(--GENERAL-COLOR-2);
    --SERVICES-BOX-BORDER-RADIUS: 0px;
    --SERVICES-BOX-BOX-SHADOW: var(--GENERAL-BOX-SHADOW);
    --SERVICES-ICON-COLOR: var(--GENERAL-COLOR-1);
*/


    /* SKILLS */
/*
    --SKILLS-CONTAINER-COLOR: var(--GENERAL-COLOR-2);
*/


    /* PROJECTS */
/*
    --PROJECTBOX-NAME-FONT: var(--GENERAL-FONT-2);
    --PROJECTBOX-CATEGORY-FONT: var(--GENERAL-FONT-2);
    --PROJECTBOX-DATE-FONT: var(--GENERAL-FONT-2);
    --PROJECTBOX-CAPTION-BACKGROUND-COLOR: rgba(240, 95, 64, .9);
*/


    /* CONTACT */
/*
    --CONTACT-PROFILE-COLOR: var(--GENERAL-COLOR-2);
    --CONTACT-PROFILE-BORDER-RADIUS: 0px;
    --CONTACT-PROFILE-BOX-SHADOW: var(--GENERAL-BOX-SHADOW);
    --CONTACT-IMAGE-BORDER-RADIUS: var(--GENERAL-IMAGE-BORDER-RADIUS);
*/


    /* 404 */
/*
    --404-IMAGE-BORDER-RADIUS: var(--GENERAL-IMAGE-BORDER-RADIUS);
*/

}


.section {

    padding: 40px 0 160px 0 !important;
 }

body {
background-color: white;
}

#home {
/*	background-color: rgba(154, 147, 255, .3); 
background-image:linear-gradient(to top,transparent,darkgrey);*/
padding-top: 50%;
}

#home h1, h2 {
	color: black; !important;
}

.section a.btn.btn-primary.page-scroll {
	background-color: #aed546;
		color: white; /*#55b4b8*/
}

section a.btn.btn-primary.page-scroll {
	background-color: #aed546;
		color: white; /*#55b4b8*/
}

#motto {
		background-color: transparent;	
		height: 100vh;
      overflow: auto;	
}

#uebermich {
		background-color: white;
}

#motto div.text-primary.container p {		
		font-family: var(--GENERAL-FONT-1);
		font-size: 48px !important;
}

#personal, #marketing, #kommunikation {
		background-color: transparent;
}

img.bildaHome {
	max-width: 800px;
	width: 100%;
}


img.bildaStart {
	max-width: 1280px;
	width: 100%;
}


img.bilda  {
float: none;
padding-right: 20px;
max-width: 300px;
}

.bilda p {
padding: 20px;
}

#impressum {
 /*background-image:linear-gradient(to bottom,transparent,#9DC0E9);*/
 min-height: 560px;
}

.dtimpressum {
text-align: center;
}

.dtimpressum a {
text-decoration: none;
color: grey;
font-weight: bolder;
}

.dtimpressum a:hover {
text-decoration: none;
color: black;
font-weight: lighter;
}

.dtimpressum hr {
	width: 75%;
	border-color: gray;
	}

#uebermich  {
	color: black !important;
}

#leistungen  {
	background-color: transparent; 
}

.text-primary {
font-family: var(--GENERAL-FONT-1);
		font-size: 24px;
}

.text-tertiary {
color: black !important;
}

.cookiealert .acceptcookies {
    background-color: #aed546;
}

.cookiealert .btn-primary:hover {
    background-color: #aed546;
}


.cookiealert a {
    color: #aed546;
    text-decoration: none !important;
}

.cookiealert a:hover, a:active {
    color: #aed546;
    text-decoration: underline !important;
}

@media screen and (max-width: 768px) {
	.section {
	padding: 0 0 50px 0 !important;} 
	#home {
	padding: 0;}
	}
	
	
.leistungen1, .leistungen2, .leistungen3,.leistungenoff1, .leistungenoff2, .leistungenoff3 {
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: top center; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	min-height: 220px !important;
	}
	
.leistungen1 p, .leistungen2 p, .leistungen3 p {
	margin: 0 0 1em 0 !important;
	color: black;
	text-transform: uppercase;
	font-size: 24px !important;
	}
	
.leistungen1 {
	background-image: url('/img/Icon_on_1.png');
	}

.leistungen2 {
	background-image: url('/img/Icon_on_3.png');
	}
	
.leistungen3 {
	background-image: url('/img/Icon_on_2.png');
	}

.leistungenoff1 {
	background-image: url('/img/Icon_off_1.png');
	}

.leistungenoff2 {
	background-image: url('/img/Icon_off_3.png');
	}
	
.leistungenoff3 {
	background-image: url('/img/Icon_off_2.png');
	}


.leistungen-container {
	margin-top: 5em;
	}
	
.profile {
    padding: 0 10px !important;
}

#kontakt {
	text-align: left;
   
}

.kommunikation, .marketing {
	background-color: rgba(255,255,255,0.5);
}

.personal {
	background-color: #dfeaea;
}

section#personal {
background-color: #eff4f4;
}

section#kommunikation,section#marketing {
background-color: #dfeaea;}

.leistungen-container.kommunikation div.service-box.leistungen1,.leistungen-container.kommunikation div.service-box.leistungenoff2,.leistungen-container.kommunikation div.service-box.leistungenoff3{
	background-color: #dfeaea;
}

.leistungen-container.personal div.service-box.leistungenoff1,.leistungen-container.personal div.service-box.leistungen2,.leistungen-container.personal div.service-box.leistungenoff3{
	background-color: #eff4f4;
}

.leistungen-container.marketing div.service-box.leistungenoff1,.leistungen-container.marketing div.service-box.leistungenoff2,.leistungen-container.marketing div.service-box.leistungen3{
	background-color: #dfeaea;
}

div.text-tertiary.col-lg-12.marketing, div.text-tertiary.col-lg-12.kommunikation, div.text-tertiary.col-lg-12.personal {
padding: 3em 5em 3em 5em;
border-top-style: solid;
border-color: white;
border-width: 4px;
}

p {
	font-weight: 300;
}

@media screen and (max-width: 1199px) {
	.komm, .perso, .marke {
		visibility: hidden;
		width: 0px;
		height: 0px;
		margin: 0;
		position: absolute;
		} 
	
	.leistungen-container {
		margin-top: 0px;
	}
	section#kommunikation.section.bg-primary div.service-box.leistungen1,section#marketing.section.bg-primary div.service-box.leistungen3,section#personal.section.bg-primary div.service-box.leistungen2 {
	margin: 10px auto 10px 0 !important;}
	div.text-tertiary.col-lg-12.marketing, div.text-tertiary.col-lg-12.kommunikation, div.text-tertiary.col-lg-12.personal {
	padding: 3px;
	}
	.ueber {
	padding-top: 10px;
	}
}

@media screen and (max-width: 639px) {
.service-box {
	margin: 0 !important;
	}
}


.komme1, .komme2 {
border-color: white;
border-width: 4px;
border-top-style: solid;
}

.komme1 {
border-left-style: solid;
}

.komme2 {
border-right-style: solid;
text-align: right;
}

.knopf {
border-radius: 0 !important;
}

p a, .email-link a {
	color: #aed546;
}