@import url(normalize.css);
@import url(all.min.css);
@import url(flickity.min.css);

/* ALLGEMREINE REGEL ////////////////////////////// */

@media only screen {

* {
  box-sizing: border-box;
}

body {
  font-family: 'ubuntu', serif;
    line-height: 1.5em;
  color: #3f3f3f;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

section{
padding:4.5em 0 3.5em;	
	
}

section h2 {
	text-align: center;
	font-size: 2em;
	text-transform: captalize;
	color:#8c8c8c;
	margin-bottom:1em;
	
}
section h3 {
	text-align: center;
	font-size: 1.7em;
	font-weight:400;
	color:#8c8c8c;
	margin:0 0 0.5em;
}


.innerbox {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  padding: 0;

}

section .innerbox,
footer .innerbox {
  padding: 20px 0;

}

.button{
	border-radius:5px;
	background:#8c8c8c;
	color:#fff;
	display:inline-block;
	text-transform:uppercase;
	font-size:0.9em;
	padding:0.9em 1.1em;
	margin:2px 0 5px;
		letter-spacing:2px;
	-webkit-transition:all 0.7s ease-out;
	-moz-transition:all 0.7s ease-out;
	-ms-transition:all 0.7s ease-out;
	-o-transition:all 0.7s ease-out;
	transition:all 0.7s ease-out;
}

.button:hover{
	background:#d6a420;
}

/*/////////////////////// Hovereffect Button  ///////////////////////*/
[data-wipe] {
  display: inline-block;
  	font-size:0.9em;
	padding:0.9em 1.1em;
	margin:2px 0 5px;
  text-decoration: none;
  position: relative;
  
  border-radius:5px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
[data-wipe]:before, [data-wipe]:after {
  content: attr(data-wipe);
  padding-top: inherit;
  padding-bottom: inherit;
  white-space: nowrap;
  position: absolute;
  top: 0;
  overflow: hidden;
  color: #fff;
  background: #d6a420;
}
[data-wipe]:before {
  left: 0;
  text-indent: 100%;
  width: 0;
}
[data-wipe]:after {
  padding-left: inherit;
  padding-right: inherit;
  left: 100%;
  text-indent: calc(-100% - 36px);
  transition: 0.7s ease-in-out;
}
[data-wipe]:hover:before {
  width: 100%;
  transition: width 0.6s ease-in-out;
}
[data-wipe]:hover:after {
  left: 0;
  text-indent: 0;
  transition: 0.4s 0.4s ease-in-out;
}


/* header ////////////////////////////// */

.main_h {
	position: fixed;
	top: 0px;
	max-height: 125px;
	overflow: hidden;
	z-index: 999;
	width: 100%;
	padding-top: 0.8em;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	padding-bottom: 0.8em;
	
}

.sticky {
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #d2d2d2;
  top: 0px;
  
}

.open-nav {
  max-height: 350px !important;
   background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #8c8c8c;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}



/* navigation ////////////////////////////// */


nav {
  float: right;
}


nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
}


nav ul li {
  display: inline-block;
  margin-left: 2.5em;
  line-height: 1.2em;
   padding-top:0.3em;
}


nav ul a {
  color: #d6007e;
  text-transform: uppercase;
  font-size: 0.8em;
  opacity:0;
}

.sticky nav ul a {
	opacity:1;
  color: #3f3f3f;
 
}
    
  .sticky nav ul a:hover {
  color: #d6007e;
 
}  
      

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 25px;
  top: 0;
  width: 10px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}


.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 10px;
  border-radius: 100px;
  background: #d6007e;
  display: block;
  
}

/* großbildbereich ////////////////////////////// */



.hero .innerbox{
	
	height: 500px;
	height:100vh;
	position:relative;

}


.hero {
  position: relative;
  background: url(../bilder/header/tobias-niedermeier-website.jpg) no-repeat center top fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  color: #fff;
  letter-spacing: 2px;
 -webkit-animation: blurup 2s forwards;
  -moz-animation: blurup 2s forwards;
  animation: blurup 2s forwards;
}

    .logo {
        background-color: rgba(255, 255, 255, 0.1);
        padding:30px 0px 0px 0px;
        border-radius: 12px;
    }
    
.hero h1 {
	 position: absolute;
	color:#d6007e;
    background-color: rgba(255, 255, 255, 0.1);
    padding:5px;
    border-radius:8px;
	font-size: 2.2em;
	font-weight:700;
	line-height:0.9em;
	letter-spacing:2px;
	position:absolute;
	top:50%; 
	
}

.hero h1 span{
  font-weight:300;
  font-size: 0.4em;
  letter-spacing:2.1px;
  
}

/*     Blur-Effect Header  ////////////////////////////*/
@keyframes blurup {
  0% {
    opacity: 0;
    filter: blur(5px);
    -ms-filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    -ms-filter: blur(0);
  }
}
@keyframes text-blurup {
  0% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0);
  }
}
@-webkit-keyframes blurup {
  0% {
    opacity: 0;
    filter: blur(5px);
    -webkit-filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    -webkit-filter: blur(0);
  }
}
@-webkit-keyframes text-blurup {
  0% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0);
  }
}
@-moz-keyframes blurup {
  0% {
    opacity: 0;
    filter: blur(5px);
    -moz-filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    -moz-filter: blur(0);
  }
}
@-moz-keyframes text-blurup {
  0% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0);
  }
}
/*     END Blur-Effect Header  ////////////////////////////*/

.mouse {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 3.1em;
  border-radius: 13px;
  border: 2px solid #d6007e;
  position: absolute;
  bottom: 10px;
  position: absolute;
  left: 50%;
  margin-left: -26px;
    -webkit-animation: text-blurup 3s linear;
  -moz-animation: text-blurup  3s linear;
  animation: text-blurup  3s linear;
}
.mouse span i{
  display: block;
  margin: 0.2em auto;
  font-size:0.8em;
	color:#d6007e;
text-align:center;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

/* ////////////////////////////////////////////////////////////////////////////    SPALTENFORMATIERUNG    /////////////////////////// */

.halb{
	float:left;
	width:49%;
	margin-right:0%;
	padding-right:1em;
}

.halb:last-child{
	padding-left:1em;
}

.drittel{
	float:left;
	width:32.5%;
	margin-right:1%;
}

.drittel:last-child{

	padding-right:0;
	margin-right:0;
	
}

.zweidrittel{
	width:67.5%;
}

/* ////////////////////////////////////////////////////////////////////////////    result marketing    /////////////////////////// */


/* //////////////////////////    rundel - siehe auch script_circle.js    /////////////////////////// */

path {
  cursor: pointer;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto
}

input {
  border: 1px dotted;
  width: 50%;
}

#pieChart {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 0px;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
   margin-top:1.6em;
}
#segmentTitle {
margin-bottom:0.3em;
font-size:1.3em;
  text-align: left;
}

#segmentText {
	
  font-size:1em;
  width: 100%;
 
  text-align: left;
    display:inline-block;
}


#segmentText i{
  font-size:1.5em;
  
}

#segmentText .konzept-icon{
  color:#824664;
}

#segmentText .planung-icon{
  color:#5a8296;
}

#segmentText .realisation-icon{
  color:#d6a420;
}

#segmentText .tracking-icon{
  color:#8c8c8c;
}



.container.circle {
	overflow:hidden;
	margin-bottom:0.2em;
}


[data-phase-type="Konzept | Strategie"] {
  color: #824664;
}
[data-phase-type="Planung"] {
  color: #5a8296;
}
[data-phase-type="Realisierung"] {
  color: #d6a420;
}
[data-phase-type="Tracking | Reporting"] {
  color: #8c8c8c;
}

.circleDescription {
  font-family: 'ubunturegular', serif;  
    color: #3f3f3f;
    font-size:1.2em;
}

/*     End rundel    /////////////////////////// */

/* LEGEND zu CIRCLE */
#result_marketing .halb{
	overflow:hidden;
	padding:0;
}

#result_marketing .halb.legend ul{
	list-style: none;
	overflow: hidden;
	text-align: left;
	margin-top:0.5em;
	padding-left:10px;
}

#result_marketing .halb.legend ul span,
#segmentText span{
 float:left;
 margin-right:0.8em;
display: inline-block;
line-height:1.5em;
  
}
#result_marketing .halb.legend ul li{
 margin-right:0.8em;
 overflow: hidden;
line-height:2em;
font-size:0.8em;
  
}

#result_marketing h4{
 color:#8c8c8c;
 font-size:0.9em;
 margin-bottom:0.4em;
  
}

#result_marketing .konzept{
 width: 20px;
  height: 20px;
  border-radius: 5%;
  background: #961464;
}

#result_marketing .planung{
 width: 20px;
  height: 20px;
  border-radius: 5%;
  background: #5a8296;
}
#result_marketing .realisation{
 width: 20px;
  height: 20px;
  border-radius: 5%;
  background: #d6a420;
}

#result_marketing .tracking{
 width: 20px;
  height: 20px;
  border-radius: 5%;
  background: #8c8c8c;
}


/* ////////////////////////////////////////////////////////////////////////////    ueber_mich     //////////////////////////////// */

#ueber_mich{
	background:#d6d6d6;
}

.row{
	overflow:hidden;
}

    
     .halb.qualifikation .button{
         margin-top:1.5em;}
        

#ueber_mich .halb.qualifikation{
	border-right: 3px solid #8c8c8c;
}

#ueber_mich .halb{
	margin-top:0.5em;
}

#ueber_mich .halb h3{
	padding-top:0.5em;
    font-weight:700; 
	
}


.fas.fa-times{
	font-size:2em;
	color:#d6a420;
}


/* ////////////////////////////////////////////////////////////////////////////    Fulloverlay     //////////////////////////////// */	

.menu {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  opacity: 0.8;
  color: #000;
  text-decoration: none;
}
.menu:hover {
  opacity: 1;
}

.overlay {
  border:2px solid #000;
    position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #666;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  overflow: auto;
    z-index:999;
  transition: all .35s;
  -webkit-transform: scale(3);
          transform: scale(3);
}
.overlay ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 200%;
}
.overlay li {
  text-align: center;
  margin-bottom: 20px;
}
.overlay a {
  color: #fff;
  text-decoration: none;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.content {
  width: 100%;
  max-width: 960px;
  margin: auto;
}



/* ////////////////////////////////////////////////////////////////////////////    Overlay Formatierung     //////////////////////////////// */	


.overlay .row{
    margin-top: 10%;
}
.content h4{
  color:#d6a420;
    font-size:1.4em;
}




/* ////////////////////////////////////////////////////////////////////////////    Erfahrung boxen    //////////////////////////////// */	

#overlay-2 .row.equal{
	display:flex;
}

#overlay-2 {
	background: #666;
	text-align:center;
	
}
    
#overlay-2 p{
	text-align:left;
    font-size:0.8em;
    padding-bottom: 0.5em;
	
}

#overlay-2 ul li{
	text-align:left;
    color:#8c8c8c;
    font-size:0.4em;
    line-height: 0.9em;
}

#overlay-2 ul li a{
   color:#8c8c8c;
}
#overlay-2 ul li a:hover{
    color:#d6a420; 
}

#overlay-2 .drittel{
	flex:1;
	background:#fff;
    color:#000;
	border:1px solid #8c8c8c;
    border-radius:10px;
	padding:2em 0.8em 0em;
	
}


#overlay-2 .drittel:hover .iconbox{
	background:#d6a420;
	
}

#overlay-2 .drittel:hover h4{
	color:#d6a420;
	
}

#overlay-2 .halb:last-child{
		padding-left:0.5em;
}

#overlay-2 .drittel h4{
	color:#8c8c8c;
    font-size:1.4em;
	letter-spacing:2px;
	margin-bottom:1em;	
}

.iconbox{
	
	background: #222;
	display:inline-block;
	height: 60px;
	width: 60px;
    border-radius:50%;
	padding-top:14px;
	
	}
	
.iconbox i{ 
    color:#fff;
	font-size:1.8em;  
}

#ueber_mich .halb.btn{
	padding-right:0;
	float:right;
	text-align:right;
	background-color:#666666;
	border:#666666;
	
}

#ueber_mich .halb.pdf{
	float:left;
	 text-align:left;
	padding-top:20px;
	letter-spacing:2px;
	font-size:0.9em;
}

#ueber_mich .halb.pdf i{
	padding-right:6px;
}

#ueber_mich .halb.pdf a:hover{
	color:#d6a420;
	text-decoration:underline;
}

#overlay-2 .row{
	margin-top:0.2em;

}
#overlay-2 .row:first-child{
    margin-top:4em;
   
}




/* ////////////////////////////////////////////////////////////////////////////    Qualifikation boxen    //////////////////////////////// */	

#overlay-1 .zweidrittel {
    float: left;
}
.outbox{
    
	display:flex;
    margin-bottom: 0.2em;
}    
.outbox .drittel{
    flex:1;
}


#overlay-1 .outbox .drittel h4{
    font-size: 0.7em;   
        
}

#overlay-1 li{
    font-size: 0.4em;
    text-align: left;
    margin:0.3em;
   
}

#overlay-1 .drittel{
     
	padding:0.4em; 
}
#overlay-1 .zweidrittel .drittel:first-child{
    border-right:2px solid #8c8c8c;
}

#overlay-1 .right.drittel{
	float:right;
	padding-right:0;
}

#overlay-1 .right.drittel h4{
    font-size:1.4em;
}

#overlay-1 .single-progress label{
    font-size:0.6em;
}

#overlay-1 .row{

	margin-top:0.2em;
    
}
#overlay-1 .row:first-child{
    margin-top:2em;   
}

#overlay-1 .row h4{
    font-size: 1.4em;
}
#overlay-1 .row .halb label{
    font-size: 0.7em;
}

/* ////////////////////////////////////////////////////////////////////////////    Skillbar     //////////////////////////////// */	



label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
    font-size: 0.8em;
}

.progress {
    height: 5px;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: #f5f5f5;
 
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background-color: #d6a420;
  
}

/* ////////////////////////////////////////////////////////////////////////////    Feedback / Kundenstimmmen - siehe flickity.css     //////////////////////////////// */



/* ////////////////////////////////////////////////////////////////////////////    Kontakt     //////////////////////////////// */



#kontakt{
	background:#d6d6d6;
	min-height:400px;
}

#kontaktformular input[type=text],
#kontaktformular input[type=email],
#kontaktformular textarea{
	border:1px solid #8c8c8c;
	width:100%;
	height:40px;
	background:#fff;
	padding:0.8em;
	margin-bottom:1em;
}	

#kontaktformular textarea{
	width:100%;
	height:150px;
	padding:1%;
}

#kontaktformular input[type=submit]{
	border:0;
	
}

#kontakt .zweidrittel{
	text-align:right;
}
#kontakt .drittel .button{
	width:50%;
	text-align:center;
	display:inline-block;
	margin-left:50%;
}

#kontakt .drittel:last-child {
	width:25%;
	border-left: 3px solid #8c8c8c;
}

.drittel .adresse{ 
margin-left:0.5em;


}

#kontakt .overlaypicture img{ 
width:100%;
border:1px solid #8c8c8c;
border-radius:5px;
}

.overlaypicture{
	line-height:0;
	position:relative;
		
	}
		
.overlay-inner{
		background:#000;
		background:rgba(0, 0, 0, 0.75);
		position:absolute;
		border-radius:5px;
		left:0;
		right:0;
		bottom:0;
		top:0;
		opacity:0;
		-webkit-transition:all 0.5s ease-out;
		-moz-transition:all 0.5s ease-out;
		-ms-transition:all 0.5s ease-out;
		-o-transition:all 0.5s ease-out;
		transition:all 0.5s ease-out;
		
	}
	
.overlay-inner:hover{
		opacity:1;

	}
	
.overlaypicture-text{
		width:95%;
		color:#fff;
		position:absolute;
		top:60%;
		left:50%;
		transform:translate(-50%,-50%)
	}
	
.picturekontakt{
	list-style-type:none;
	padding:0;
	
	
}

.picturekontakt li{
	list-style-type:none;
	display:inline-block;
	margin:0.3em;
	
}

.picturekontakt li span{
	font-size:1.1em;
	line-height:110%;
	
}

.picturekontakt li a{
	text-decoration:none;
	color:#fff;
	font-size:0.8em;
}

.zweidrittel i,
.picturekontakt i {
	padding-right:0.4em;
}

/* ////////////////////////////////////////////////////////////////////////////    Erfolgsmeldung     //////////////////////////////// */


    
    .erfolgsstatus{
        color:#d6a420;
        font-size:1.2em;
        padding:20px 20px;
        text-align:center;
        
    }
    
    
/* ////////////////////////////////////////////////////////////////////////////    Footer     //////////////////////////////// */	

footer {
	background:#000;
	
}

address{
	color:#8c8c8c;
	font-size:0.9em;
	font-style:normal;
	line-height:1.5em;
	margin:0.4em 0 0.2em;	
}


address span{
	
	font-size:1.3em;

}

address #fett{
	font-weight:bold;
}

address a{
	color:#8c8c8c;	
}

address a:hover{
	color:#fff;	
}

footer .zweidrittel{
	float:left;
}

footer .drittel{
	float:right;
	text-align:right;
	padding-right:0;
}

.social{
	list-style-type:none;
}

.social li{
	display:inline-block;
	margin:0.4em;
	padding:0.5em;
}

.social li a{
	text-decoration:none;
	color:#fff;
	font-size:1.3em;
	opacity:0.5;
	-webkit-transition:all 0.5s ease-out;
	-moz-transition:all 0.5s ease-out;
	-ms-transition:all 0.5s ease-out;
	-o-transition:all 0.5s ease-out;
	transition:all 0.5s ease-out;	
}
	
.social li a:hover{
		opacity:1;
}

.row.rechtlich {
	border-top: 1px solid #d2d2d2;
}
.row.rechtlich .drittel{
	float:right;
	margin-right:0;
}

.row.rechtlich .drittel li{
	display:inline-block;
	padding: 0.6em;
	font-size:0.8em;
	}
	
.row.rechtlich .drittel li a{
	text-decoration:none;
	color:#fff;
	opacity:0.5;
	}
	
.row.rechtlich .drittel li a:hover{
	opacity:1;
	}
    
 /* Cookie Datenschutz   ////////////////////////////// */   

 #cookie-popup { 
  text-align: center; 
  background: #fff;
    background: rgba(255,255,255,0.8);
  position: fixed;
  bottom: 10px; 
  left: 0;
  right: 0;
  z-index: 9999;
  font-size:0.7em; 
  line-height:10px;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }
 
#cookie-popup.hidden {
  display: none;
}
    
  #cookie-popup .more a{ 
    fonts-size:0.3em;
      border:1px solid #ddd;
      border-radius: 10%;
      background:#fff;
      color:#8c8c8c;
      padding:1px 2px;
      margin-right:10px;
      
  }   
  
    
/* Impressum / Datenschutz   ////////////////////////////// */

#overlay-impressum h1,
#overlay-datenschutz h1{
color:#dca063;
font-size:1.8em
}

#overlay-impressum h2, h3{
list-style:none;
text-align:left;
color:#dca063;
line-height:1.3em;
padding:20px 0 0px;
font-size:1em;
} 

#overlay-datenschutz .row{
	padding-bottom:2em;
}

#overlay-datenschutz h2, h3{
list-style:none;
text-align:left;
color:#dca063;
line-height:1.3em;
padding:20px 0 0px;
font-size:1em;
}

#overlay-datenschutz h3{
font-size:14px;
}
#overlay-datenschutz p{
list-style:none;
text-align:left;
font-size:12px;
}

#overlay-datenschutz ul{
padding: 0em 0em 0.4em 1em;
}
#overlay-datenschutz ul li{
list-style:none;
text-align:left;
font-size:12px;
}


/* scroll-to top   ////////////////////////////// */

#scroll-to-top{
	background:#8c8c8c;
	border:1px solid #8c8c8c;
	border-radius:50%;
	color:#fff;
	font-size:2em;
	width:40px;
	height:40px;
	position:fixed;
	right:1em;
	bottom:1.9em;
	z-index:9999;
	text-align:center;
	opacity:0.2;	
	-webkit-transition:all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out;
	-ms-transition:all 0.4s ease-out;
	-o-transition:all 0.4s ease-out;
	transition:all 0.4s ease-out;
	display:none;
}

#scroll-to-top:hover{
	background:#d6a420;
	border: #8c8c8c;
	opacity:1;	
}

/* Kontaktformular      ////////////////////////////////////////////*/

#overlay-erfolgsmeldung {
	 color:#d6a420; 
}
    
    .print.row{
        display:none;
    }

    
    
}/*                  Ende Befehl für Monitore     ////////////////////////////// */


/* RESPONSIVE PART      ////////////////////////////////////////////*/


@media only screen and (max-width: 1025px) 
{

				

			/* Großbild für Apple ////////////////////////////// */	

			.hero {
			  background: url(../bilder/header/tobias-niedermeier-website.jpg) no-repeat center top scroll;
			  -webkit-background-size: cover;
			  -moz-background-size: cover;
			  background-size: cover; 
			}
}


/*  Breakpoint 1 (980px)         ////////////////////////////// */

@media only screen and (max-width: 980px) {


			/* Allgemein ////////////////////////////// */	

			section h2 {
				text-align: center;
				font-size: 1.8em;
				text-transform: captalize;
				color:#8c8c8c;
				margin-bottom:1em;
				
			}
			section h3 {
				text-align: center;
				font-size: 1.5em;
				font-weight:400;
				color:#8c8c8c;
				margin-bottom:0.5em;
				
			}

			.mouse {
			  border: 2px solid #d6007e;  
			}

			.mouse span i{
				color:#d6007e;
			}


			.innerbox {
			  max-width: 770px;
			  margin: 0 auto;
			  position: relative;
			  padding: 0;

			}

			section .innerbox,
			footer .innerbox {
			  padding: 20px 0;

			}

			.button{
				background:#d6a420;
			}

            nav ul li {
              margin-left: 0.9em;
              line-height: 1.2em;
               padding-top:0em;
            }

			nav ul a {
			  color: #8c1b81;
			  text-transform: uppercase;
			  font-size: 0.8em;
			  opacity:0;
			}

    nav ul a:hover {
			  color: #dc007e;
			  
			}
    
			/* fulloverlay  ////////////////////////////// */
			.content {
			  max-width: 790px;
				padding: 0 1em 0;

			}

			#overlay-1 .button,
			#overlay-2 .button{
				font-size:0.7em;
				margin-bottom:3em;
			}

			#overlay-2 .row.equal{
				display:block;
			overflow:hidden;

			}

			#overlay-2 .row.equal .drittel{
				width:100%;
			font-size:1.2em;
			margin-bottom:2em;

			}

			#overlay-2 .row.equal .drittel p{
			text-align:center;

			}
			
			#overlay-1 .halb:last-child{
					padding-right:0;
				}


			/* Feedback / Kundenstimmen  ////////////////////////////// */	

			.testimonial-author {
			font-size:1em;
				color:#d6a420;
			  letter-spacing:1px;
				
			}

			/* kontakt  ////////////////////////////// */	

			#kontakt .overlaypicture img{ 
			width:120%;
		
			}

					
			.overlay-inner{
				display:none;
					
				}

			/* scoll to top  ////////////////////////////// */
			#scroll-to-top{
				background:#d6a420;
				border:1px solid #d6a420;
				right:0.5em;
				bottom:1.2em;
				opacity:0.5;	
			}
    
    
} /* End Breakpoint 1   ////////////////////////////// */


/* Breakpoint 2  (max 780px) ////////////////////////////// */

@media only screen and (max-width: 779px) {
                

				.innerbox {
			
				  max-width: 460px;
				}
				
								/* Headline  /////////////////// */

				.hero h1 {
					font-size: 1.9em;
					right:10%;
                    top:60%;
				}
				.hero h1 span{
					opacity:1;
                    
				}
				
				

				.main_h {
					max-height: 65px;
				}

						  nav {
							width: 100%;
							}
				

				.mobile-toggle {
							display: block;
							}

						   nav ul {
							padding-top: 30px;
							margin-bottom: 22px;
							float: left;
							text-align: center;
							width: 100%;
							}
						  
						   nav ul li{
							width: 100%;
							padding: 7px 0;
							margin:0;
							}
							

				section .innerbox,
				footer .innerbox {
				  padding: 20px 10px;

				}

				nav ul a {
				  font-size: 1em;
				  opacity:1;
				}
				
				
				/* Result Marketing  circle /////////////////// */
				
				
				.container.circle,
                .halb.legend{
					display:none;
				}
				

				/* Feedback / Referenz   /////////////////// */


				.testimonial {
				  text-align: center;
				  max-width: 550px;
				  margin: 50px auto 80px auto;
				  padding: 20px 20px;
					}
				
                .testimonial-author {
				  font-size:0.7em;
					}
    
      .testimonial-quote {
				  font-size:0.8em;
					}
    
				.flickity-page-dots .dot.is-selected{
					background: #d6a420;
					}







					
				/* Spalten auflösen   /////////////////// */
							
						  .halb,
						  .drittel,
						  .zweidrittel{
								width:100%;
								float:none;
								padding: 0.2em 0.1em;
								}

				.halb:last-child {
					padding-left: 0em;
				}
    
    
				#ueber_mich .halb.qualifikation,
				#kontakt .drittel:last-child{
					border-left: none;
					border-right: none;
				}
					
             .halb.qualifikation .button{
                    margin-top:0.2em;
                    margin-bottom:0.8em;
                }

				#kontakt .adresse{ 
				display:none;
				}
				footer .drittel .social{
				
				text-align:center;
				padding:0;
				}
				
				footer .drittel .social li{
				padding:3px 40px 3px;
				}
				/* overlay-Formatierung  /////////////////// */	


				.content {
				  max-width: 480px;

				}	
				#overlay-1 .row .halb{
					padding:0;
				}

				#overlay-2 .halb:last-child{
						padding-left:0em;
				}
    
        .halb.pdf{display:none !Important;}
				
				/* scoll to top  ////////////////////////////// */

				#scroll-to-top{
					display:none !Important;	
				}
				
	 .fab fa-whatsapp {color:#00E676;
                font-size:1.2em;}			


}/* End Breakpoint 2  (max 780px)   ////////////////////////////// */


/* Breakpoint 3  (max 478px) ////////////////////////////// */

@media only screen and (max-width: 478px) {

              

				.innerbox {
				  max-width: 370px;
				}

				.hero h1 {
					font-size: 1.2em;
                    letter-spacing:1px;
					padding:1em 1.5em;
				}


				section h2 {
					font-size: 1.4em;	
				}
				
				section h3 {
					font-size: 1.2em;	
				}

				section p{
					font-size: 1em;	
				}


				.content {
				  max-width: 370px;
				}

				#overlay-1 .outbox .drittel h4{
					font-size: 1em;
					margin-bottom:0.1em;       
				}



				#overlay-1 .row .halb label{
					font-size: 0.6em;
				}
				
				footer .drittel .social li{
				padding:3px 20px 3px;
				}
				
				#overlay-datenschutz .row,
				#overlay-impressum .row{
					font-size:0.7em;
				}
   
				
   
        
}/* End Breakpoint 3  (max 478px)   ////////////////////////////// */

/* Breakpoint 3  (max 390px) ////////////////////////////// */

@media only screen and (max-width: 390px) {



				.innerbox {
				  max-width: 330px;
				}


				.hero h1 {
					font-size: 1.3em;
                    letter-spacing:1.6px;
                    background-color: rgba(255, 255, 255, 0.4);
					padding:1em 1.3em;
                    right:5%;
                    top:55%;
                    
				}
    	.hero h1 span{
					font-size: 0.5em;
                    letter-spacing:1px;    
				}


				section h2 {
					font-size: 1em;	
				}
				
				section h3 {
					font-size: 0.8em;	
				}

				section p{
					font-size: 0.7em;	
				}


				.content {
				  max-width: 340px;
				}

				#overlay-1 .outbox .drittel h4{
					font-size: 0.4em;    
				}

	#overlay-1 .outbox .drittel li{
					font-size: 0.35em;    
				}

				#overlay-1 .row .halb label{
					font-size: 0.5em;
				}

	
				
				footer .drittel .social li{
				padding:3px 20px 3px;
				}
				
        
}/* End Breakpoint 3  (max 390px)   ////////////////////////////// */

/*Breakpoint Print only  ///////////////////////////// */
@media only print{
	
	body{
        display:none;
    }
    
    body .print.row{
        display:block;
        color:#8c8c8c;
        font-size:1em;   
    }  
    
    body .print.row .zweidrittel span{
             display:block;
        font-family: bold;
            color:#d6a420;
            line-height: 18px;
    }
    
     body .print.row .print.adresse{
          display:block;   
         font-size:1.1em;
         line-height: 30px;
         padding-top:8px;
    }
    
    body .print.row .zweidrittel{
             display:block;
        width: 67%;
            float:left;
            text-align:left;    
            line-height: 18px;
        padding-right:8px;
    } 
    
    body .print.row .drittel img{
         display:block;   
        float:right;
            border-left:none;
             width: 98%;            
    }
    
    
    
    }/*End Breakpoint Print only  ///////////////////////////// */    
    
 @font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-medium-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: 300;

}




@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-regular-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-regular-webfont.woff') format('woff');
    font-style: normal;
  font-weight: 400;

}




@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-bold-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-bold-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 700;

}




@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-italic-webfont.woff2') format('woff2'),
         url('../fonts/ubuntu-italic-webfont.woff') format('woff');
    font-style: italic;
  font-weight: 400;

}