@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}
html, body {
    font-family: verdana, sans-serif;
}
img {
    width: 100%;
    height: auto;
}
header {
    width: 100%;
}
a {
    text-decoration: none;      
}
@viewport {
	width: device-width;
	min-zoom: 100%;
	max-zoom: 200%;
}

/*-----fonts-----*/

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), 
       url('../fonts/roboto-v20-latin-500.woff') format('woff');
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), 
       url('../fonts/roboto-v20-latin-regular.woff') format('woff');     
}
/* rajdhani-regular - latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  src: local('Rajdhani Regular'), local('Rajdhani-Regular'),
       url('../fonts/rajdhani-v10-latin-regular.woff2') format('woff2'),
       url('../fonts/rajdhani-v10-latin-regular.woff') format('woff'); 
}
/* rajdhani-500 - latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  src: local('Rajdhani Medium'), local('Rajdhani-Medium'),
       url('../fonts/rajdhani-v10-latin-500.woff2') format('woff2'), 
       url('../fonts/rajdhani-v10-latin-500.woff') format('woff'); 
}
/* rajdhani-600 - latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  src: local('Rajdhani SemiBold'), local('Rajdhani-SemiBold'),
       url('../fonts/rajdhani-v10-latin-600.woff2') format('woff2'),
       url('../fonts/rajdhani-v10-latin-600.woff') format('woff');
}
h1 {
    font-family: Roboto, sans-serif;
    font-weight: 600;
    font-size: 4.2em;
    text-transform: lowercase;
}
h2, h3, a {
    font-family: Rajdhani, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #fc8a28;
}
h2 {
    font-size: 2.0em;
    line-height: 1.2em
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-family: Rajdhani, sans-serif;
	font-weight: 200;
	font-size: 1.1em;
	color: #939598;	
}
p, li{
    font-family: Roboto, sans-serif;
    font-weight: 400; 
    font-size: 1.2em;
    color: #3d4b50;
    line-height: 1.4em;
}


/*-------------------------------------mobile-------------------------------------------------------*/

@media screen and (min-width:220px) and (max-width:768px) {

section {
    margin: 0 auto;
    max-width: 760px;
    padding: 0 2%;
}

.header-unterseite {
	height: 70px;
}
    
#topheader {
	margin-top: 0;
    padding: 2%;
    width: 100%;
    height: 70px;
    background: rgba(255, 255, 255);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: fixed;  
    z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo {
    width: 160px;
    height: 80px;
    padding-top: 20px;
	transition: all ease 2s;
}  
.logo:hover {
    opacity: 0.5;
	transition: all ease 1s;
}

/*------navigation------*/
#topnav  {
	display: none;
}	

/*-----headerimage------*/
#headerimage {
	height: 180px;
}
.home {
	background-color: #fc8a28;
	text-align: center;
	margin: 0;
	height: 180px;
}
.home h2 {
	height: 120px;
    padding-top: 85px;
	font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	color: #dad9dd;
	font-weight: 500;
	font-size: 2em;
}
.home h1 {
	margin: 0px;
    font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	font-weight: 600;
	font-size: 2.0em;
	line-height: 1.8em;
	color: #000;
}

/*content01/über mich-------------------------------*/

#ueber-mich {
	background: url("../images/farbdreieck_mobile.png")no-repeat bottom right;
	width: 80%;
	height: 1000px;
}
.uebertext {
    float: none; 
	padding: 20px 10px 0 10px;
}
.ueber-image {
   margin: 0 auto;
   max-width: 60%;
   height: auto;
   padding-top: 50px;

}
.uebertext {
	min-width: 60%;
    height: auto;
    margin-top: 3%;
	margin-bottom: 50%;
}
.uebertext h2 {
	font-size: 1.7em;
	line-height: 1.2em	
}

/*content02/print-------------------------------*/

#print {
	background: url("../images/verve_print_mobile.jpg")no-repeat bottom;
    background-color: #fc8a28;
	width: 100%;
    height: auto;	
	text-align: left;
}
.printtext {
    min-width: 60%;
    height: auto;
    margin: 60px 10px 0 10px; 
	display: inline-block;
	margin-bottom: 140px;
}
.printtext h2,
.printtext h3 {
	color: #f5e5d2;
	text-align: left;
}
.printtext h2 {
	font-size: 1.7em;
	line-height: 1.2em;
}

/*content03/web-------------------------------*/

#web {
	background: url("../images/web_back_mobile.png")no-repeat bottom;
	width: 100%;
	height: auto;
}
.webimg {
   min-width: 60%;
   height: auto;
   margin-top: 19%;
   float: none;
   display: inline-block;
}
.webtext{
    min-width: 60%;
    height: auto;
    margin: 40px 10px 0 10px;
    float: none;
	display: inline-block;
	margin-bottom: 120px;	
}
.webtext h2 {
	font-size: 1.7em;
	line-height: 1.2em;
}

/*content04/bild-------------------------------*/

#komp {
    background: #01cbff;
	width: 100%;
	height: auto;
}

.komptext {
    min-width: 60%;
    height: auto;
    margin: 40px 10px 50px 10px;
    display: inline-block;	
}
.komptext h2,
.komptext h3 {
	color: #f5e5d2;
}
.komptext h2 {
	font-size: 1.7em;
	line-height: 1.2em;
}

/*listenelemente-------------------------------*/

.komptext li,
.printtext li {
    color: #f5e5d2;
    list-style: square;   
}
.webtext li {
    color: #fc8a28;
    list-style: square;   
}
.komptext span,
.webtext span,
.printtext span {
	font-family: Roboto, sans-serif;
    font-weight: 400; 
    font-size: 1.0em;
    line-height: 1.4em; 
    color: #3d4b50;
}
.komptext ul,
.webtext ul,
.printtext ul {
    padding-left: 16px;
}

/*galerie-------------------------------*/

#referenzen {
    background: #fc8a28;
	width: 100%;
	height: auto;
	display: block;
} 
.galerie-container {
	margin: 0 auto;
    width: 100%;
	margin-bottom: 190px;
    display: inline-block;

}
.galerie {  
    padding-top: 40px;
	width: 300px;
}
.galerie01,
.galerie02 {
	width: 150px;
	height: 150px;
	float: left;
	display: inline-block;
}


figure {
   position: relative;
   overflow: hidden; 
   width: 100%;
   height: 100%; 
   border: 2px solid #eb8104;
}
figure h3 {
   width: 100%;
   top: 0px;
   font-size: 1.2em;
   line-height: 1.0em;
   padding-top: 50px;
   color: #f5e5d2;
   text-align: center;
   position: absolute;
   background: rgba(179, 21, 5, 0.8);
}  
figure:hover h3 {       
   top: 200px;
   background: rgba(179, 21, 5, 0.8);
   transition-duration: 1s;
}
figure:hover {
   box-shadow: 0 1.9em 3.8em rgba(0, 0, 0, 0.3), 0 1.5em 1.2em rgba(0, 0, 0, 0.22);
   transform: scale(1.02);
}
.lb-data .lb-caption {
   font-family: Roboto, sans-serif; 
   font-size: 3em;
   font-weight: 400;
   text-transform: uppercase;   
   line-height: 2em;
}
.lightboxOverlay {
   background-color: #fff;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   opacity: 0.8;
   display: none;
}
.lb-outerContainer {
     background-color: rgba(255, 255, 255, 0.2);
}
.galerietext  {
    height: auto;
    margin-top: 60px;
    float: none;
}
.galerietext h2 {
	color: #f5e5d2;
	font-size: 1.7em;
	line-height: 1.2em;
}

/*button-------------------------------*/

.button-ueber {
	padding-top: 20px;
	width: 300px;
	height: 40px;
}
.button-ueber p {
	color: #fc8a28; 
	font-size: 1em;
	float: left;
}
.button-ueber p:hover {
	color: #fc8a28; 
	font-size: 1em;
	color: #f5e5d2;
	transition: all ease 2s;
}
.pfeil01  {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 20px; 
	border-color: transparent transparent transparent #fc8a28;   	
    transition: all ease 2s;
	display: inline-block;
	margin-left: 12px;
	margin-top: 3px;
}
.pfeil01:hover {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 20px;
    margin-left: 18px;	
	border-color: transparent transparent transparent #f5e5d2;
	transition: all ease 2s;
}

/*kontakt-------------------------------*/

#kontakt {
	height: auto;
	padding: 50px 0 40px 0;
	text-align: center;
}
.adresse img{
	width: 120px;
	margin-top: 30px;
}
.adresse span {
	color: #939598;
}
.logo-kontakt {
	padding-bottom: 20px;
}
.adresse a {
	font-family: Roboto, sans-serif;
	font-weight: 400;
	color: #3d4b50;
	text-transform: lowercase;
}

/*unterseite/headline-------------------------------*/

#headerimage-unterseite {
	height: 180px;
	margin: 0 auto;
}
.home-unterseite {
	background-color: #fc8a28;
	text-align: center;
}
.home-unterseite h1 {
    padding-top: 98px;
    height: 80px;
	font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	color: #fff;
	font-weight: 600;
	font-size: 1.8em;
}
.home-unterseite h2 {
	margin: 0px;
    font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.2em;
	line-height: 5.8em;
	color: #dad9dd;
}

/*datenschutz/content-------------------------------*/
#impressum-container {
	height: auto;
	padding: 80px 2% 80px 2%;
}
.impressum-content {
	max-width: 100%;
	text-align: left;
}
.impressum-content p {
	font-size: 1em;
}
.impressum-content span {
	color: #939598;
}

/*ueber mich/unterseite/content-------------------------------*/

#unterseite-container {
	height: auto;
    padding: 20px 2% 80px 2%;
}

.unterseite-content p {
	font-size: 1em;
}
.unterseitegrafik {
	float: none;
	width: 20%;
	padding-top: 20px;
}
.unterseite-utext {
	float: none;
    max-width: 100%;
	padding: 30px 0 10px 2%;
}
.unterseite-utext h2 {
	padding-bottom: 30px;
}
	
/*footer-------------------------------*/

#footerarea {
    background: #363639;
    height: auto;
	padding: 20px 0px;
}
 .footer-container a {
	color: #f5e5d2;
	font-size: 0.9em; 
    transition: all ease 1s;	
 }
  .footer-container a:hover {
	color: #fff;
    transition: all ease 1s;	
 }
 .footer-container article {
	 float: left;
     width: 120px;
 }
 .instagram {
	 float: left;
	 width: 30px;
	 height: auto;
	 display: inline-block;
	 padding-top: 10px;
 }
  .xing {
	 float: left;
	 width: 30px;
	 height: auto;
	 padding: 10px 0px;
	 margin-left: 10px;
  }
}


/*-----------------------------------tablet---------------------------------------------------------*/


@media screen and (min-width:769px) and (max-width: 1199px) {
	
section {
    margin: 0 auto;
    max-width: 800px;
    padding: 0 2%;
}	

/*-----header-----*/
.header-unterseite {
	height:110px;
}
#topheader {
    padding: 2%;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: fixed;  
    z-index: 1;
}
.logo {
    width: 170px;
    height: auto;
    float: left;
	transition: all ease 2s;
}  
.logo:hover {
    opacity: 0.5;
	transition: all ease 2s;
}

/*------navigation------*/

#topnav  {
	float: right;
}
#topnav ul li {
	float: left;
    padding-left: 30px;
	padding-top: 15px;
	font-size: 1.2em;
	list-style: none;
    text-align: left;
    display: block; 
    transition: all ease 2s;	
}
a {
    color: #939598;   
}
#topnav ul li:hover {
	opacity: 0.5;
	transition: all ease 2s;
}
/*-----headerimage------*/

#headerimage {
	background: url(../images/back_header_small.jpg) top center no-repeat;
	background-color: #ffffff;
	background-size: contain 88%;
	background-attachment: fixed;
	text-align: center;
}
.home {
	height: 200px;
	padding-top: 240px;
}

.home h1 {
    font-family: Roboto, sans-serif; 
	text-transform: uppercase;
	font-weight: 600;
	font-size: 4em;
	color: #fff;
	line-height: 1.2em;
}
	
/*content01/über mich-------------------------------*/

#ueber-mich {
	background: url("../images/farbdreieck_small.png")no-repeat bottom right;
	height: 750px;
}
.ueber-image,
.uebertext {
    float: left;
    margin: 90px auto 0px auto;	
}
.ueber-image {
   width: 40%;
   height: auto;
   padding-top: 15px;
}
.uebertext {
    width: 60%;
    height: auto;
    padding-left: 10px;	
}

/*content02/print-------------------------------*/

#print {
    background: url("../images/verve_print_small.jpg") no-repeat bottom fixed;
	background-color: #fc8a28;
	background-size: contain;
	height: auto;
}
.printtext {
    max-width: 60%;
    padding: 70px 0;
}
.printtext h2,
.printtext h3 {
	color: #f5e5d2;
}

/*content03/web-------------------------------*/

#web {
	background: url("../images/web_back_small.png")no-repeat bottom;
	height: auto;
	background-size: contain;
}
.webtext,
.webimg {
   width: 50%;
   height: auto;
   padding: 70px 0;
   float: left;
}
.webtext{
    padding-left: 4%; 
    float: right;
}

/*content04/bild-------------------------------*/

#komp {
    background: #01cbff;
	height: auto;
}
.bildkomposition {
	background: url("../images/komp_image_small.jpg")no-repeat center fixed;
}
.komptext {
    max-width: 60%;
    height: auto;
    padding: 70px 0;  
}
.komptext h2,
.komptext h3 {
	color: #f5e5d2;
}

/*listenelemente-------------------------------*/

.komptext li,
.printtext li {
    color: #f5e5d2;
    list-style: square;   
}
.webtext li {
    color: #fc8a28;
    list-style: square;   
}
.komptext span,
.webtext span,
.printtext span {
	font-family: Roboto, sans-serif;
    font-weight: 400; 
    font-size: 1.0em;
    line-height: 1.4em; 
    color: #3d4b50;
}
.komptext ul,
.webtext ul,
.printtext ul {
    padding-left: 16px;
}

/*galerie-------------------------------*/

#referenzen {
    background: #eb8104;
	width: 100%;
	height: auto;
}   
.bildergalerie {
	background:url(../images/back_gal.jpg) left no-repeat;
    margin: 0 auto;
	background-size: cover;
	height: 933px;
	padding-left: 4px;
}
.galerie-container {
	width: 800px;
	margin: 0 auto;
	float: left;
}
.galerie {   
    padding-top: 300px;
	width: 51%;
	float: left;
}
.galerie01,
.galerie02 {
	width: 200px;
	height: 200px;
	float: left;
	display: inline-block;
}
figure {
   float: left;
   position: relative;
   overflow: hidden; 
   width: 200px;
   height: 200px; 
   border: 3px solid #eb8104;
}
figure h3 {
   width: 200px;
   top: 0px;
   font-size: 1.5em;
   line-height: 1.4em;
   padding-top: 70px;
   color: #f5e5d2;
   text-align: center;
   position: absolute;
   background: rgba(179, 21, 5, 0.8);
}  
figure:hover h3 {       
   top: 200px;
   background: rgba(179, 21, 5, 0.8);
   transition: 1s;
}
figure:hover {
   box-shadow: 0 1.9em 3.8em rgba(0, 0, 0, 0.3), 0 1.5em 1.2em rgba(0, 0, 0, 0.22);
   transform: scale(1.02);
}
.lb-data .lb-caption {
   font-family: Roboto, sans-serif; 
   font-size: 3em;
   font-weight: 400;
   text-transform: uppercase;   
   line-height: 2em;
}
.lightboxOverlay {
   background-color: #fff;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   opacity: 0.8;
   display: none;
}
.lb-outerContainer {
     background-color: rgba(255, 255, 255, 0.2);
}
.galerietext {
	float:right;
	text-align: left;
	width: 49%;
	height: auto;
	display: inline-block;
	padding-top: 500px;

}
.galerietext h2 {
	color: #f5e5d2;
}


/*button-------------------------------*/

.button-ueber {
	padding-top: 20px;
	width: 300px;
	height: 40px;
}
.button-ueber p {
	color: #fc8a28; 
	font-size: 1em;
	float: left;
}
.button-ueber p:hover {
	color: #fc8a28; 
	font-size: 1em;
	color: #f5e5d2;
	transition: all ease 2s;
}
.pfeil01  {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 20px; 
	border-color: transparent transparent transparent #fc8a28;   	
    transition: all ease 2s;
	display: inline-block;
	margin-left: 12px;
	margin-top: 3px;
}
.pfeil01:hover {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 20px;
    margin-left: 18px;	
	border-color: transparent transparent transparent #f5e5d2;
	transition: all ease 2s;
}


/*kontakt-------------------------------*/

#kontakt {
	height: auto;
	padding: 150px 0 120px 0;
	text-align: center;
}
.adresse img{
	width: 120px;
	margin-top: 30px;
}
.adresse span {
	color: #939598;
}
.logo-kontakt {
	padding-bottom: 20px;
}
.adresse a {
	font-family: Roboto, sans-serif;
	font-weight: 400;
	color: #3d4b50;
	text-transform: lowercase;
}



/*headerbalken unterseite-------------------------------*/

#headerimage-unterseite {
	height: 220px;
	margin: 0 auto;
}
.home-unterseite {
	background-color: #fc8a28;
	text-align: center;
}
.home-unterseite h1 {
    padding-top: 135px;
    height: 80px;
	font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	color: #fff;
	font-weight: 600;
	font-size: 2.3em;
}
.home-unterseite h2 {
	margin: 0px;
    font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.5em;
	line-height: 5.8em;
	color: #dad9dd;
}

/*datenschutz/content-------------------------------*/

#impressum-container {
	height: auto;
	padding: 80px 2% 80px 2%;
}
.impressum-content {
	max-width: 100%;
	text-align: left;
}
.impressum-content p {
	font-size: 1em;
}
.impressum-content span {
	color: #939598;
}

/*ueber mich/unterseite/content-------------------------------*/

#unterseite-container {
	height: auto;
    padding: 20px 2% 80px 2%;
}

.unterseite-content p {
	font-size: 1em;
}
.unterseitegrafik {
	float: none;
	width: 20%;
	padding-top: 20px;
}
.unterseite-utext {
	float: none;
    max-width: 100%;
	padding: 30px 0 10px 2%;
}
.unterseite-utext h2 {
	padding-bottom: 30px;
}


	
/*footer-------------------------------*/


 #footerarea {
    background: #363639;
    height: auto;
}
 .footer-container a {
	color: #f5e5d2;
	font-size: 1em; 
    transition: all ease 1s;
    text-align: right;	
 }
  .footer-container a:hover {
	color: #fff;
    transition: all ease 1s;	
 }
 .footer-container article {
	 float: left;
     width: 140px;
	 padding: 20px 0px;
 }
 .instagram{
	 width: 30px;
	 height: auto;
	 float: left;
	 padding-top: 10px;
 }
 .xing {
	width: 30px;
	height: auto;
	float: left;
	display: inline-block;
	height: auto; 
	margin-top: 10px;
	margin-left: 10px;
 }
}
/*---------------------------------------desktop-----------------------------------------------*/




@media screen and (min-width:1200px) {
	
section {
    margin: 0 auto;
    width: 1200px;
    padding: 0 2%;
}

/*-----header-----*/

#topheader {
    background-color: #ffffff;
    padding: 1%;
    width: 100%;
    height: 80px;
    position: fixed;  
    z-index: 1;
}
.logo {

    width: 200px;
    height: auto;
    float: left;
	transition: all ease 1s;
}  
.logo:hover {
    opacity: 0.5;
	transition: all ease 1s;
}

/*------navigation------*/

#topnav  {
	float: right;
}
#topnav ul li {
	float: left;
    padding-left: 30px;
	padding-top: 15px;
	font-size: 1.3em;
	list-style: none;
    text-align: left;
    display: block; 
    transition: all ease 1s;	
}
a {
    color: #506671;   
}
#topnav ul li:hover {
	opacity: 0.5;
	transition: all ease 1s;
}

/*-----headerimage------*/
    


#headerimage {
    background: url("../images/08heroimage_cb.jpg") no-repeat top;
    background-attachment: fixed;
    background-size: cover;   
}
 

/*content01/über mich-------------------------------*/
#ueber-mich {
    background: url("../images/back_ueber_mich.jpg") no-repeat top;
    background-color: #01cbff;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
}    
.uebermich-content {
    height: 100%;
}
.ueberheadline {
    height: auto;
    width: 60%;
    float: right;
    padding-top: 20%;
    
}
.ueberheadline h2 {
    color: #ec6e07;
    font-weight: 500; 
    font-size: 2.5em;
    line-height: 1.2em;
}
.ueberheadline p {
    height: auto;
    padding-top: 4%;
    color: #506671;
}

.button-ueber {
    width: 190px;
	height: 50px;
    float: right;
    background-color: #ec6e07;
    margin-top: 50px;      
}
.button-ueber p {
    color: #f5e5d2;
    font-size: 1em;
    float: left;
    margin: 5px 0 0 12px;
}  

.button-ueber p:hover {
	color: #fc8a28; 
	font-size: 1em;
	transition: all ease 2s;
}
.pfeil01  {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 20px; 
	border-color: transparent transparent transparent #f5e5d2;   	
    transition: all ease 1s;
	display: inline-block;
    margin: 12px 0 0 10px;

}
.pfeil01:hover {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 20px;
    margin-left: 18px;	
	border-color: transparent transparent transparent #fc8a28;
	transition: all ease 0.5s;
}
.ueberimage{
    width: 40%;
	height: auto;
    float: left; 
    padding-top: 120px;
}    


/*content02/print-------------------------------*/

#print {
    background: url("../images/verve_print.jpg") no-repeat bottom;
    background-attachment: fixed;
	background-size: cover;
	width: 100%;
    height: 100%;	
}
.printcontent {
    max-width: 55%;
    height: auto;
    padding: 10% 0 0 4%;
    float: left;
}
.printtext h2 {
	color: #b0110b;
}
.printimage {
    width: 210px;
    padding: 20px 0 0 0;    
}
.pfeil02  {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0px 10px 20px; 
	border-color: transparent transparent transparent #f5e5d2 ; 
    transition: all ease 1s;
	display: inline-block;
    margin: 20px 20px 0 0px;
    float: right;
}
    
 .printgalerietext {
    max-width: 45%;
    height: : auto;
    float: left;
    padding: 80px 8px 0 0;
}
    
.printgalerietext h3 {
    height: auto;
    color: #f5e5d2;
    font-size: 2em;
}
    
.printimage{
    width: 210px;
    height: 210px;
    float: right;
    padding: 20px 0 0 20;
    display: inline; 
    position: absolute;               
}
    
.printimage figure{
    border: 8px solid #b0110b;
    border-radius: 50%;
    float: right;
    position: relative;
    overflow: hidden; 
    width: 210px;
    height: 210px; 
    padding: 0% 0 0 0;
    display: inline; 

}
.printimage figure:hover h3 {       
   top: 200px;
   background: rgba(176, 17, 11, 0.8);
   transition: 1s;
}
.printimage figure:hover {
   box-shadow: 0 1.9em 3.8em rgba(0, 0, 0, 0.3), 0 1.5em 1.2em rgba(0, 0, 0, 0.22);
   transform: scale(1.02);
}
   
.printimage figcaption h3 {
   background: rgba(176, 17, 11, 0.8); 
   color: #f5e5d2;
   width: 200px;
   font-weight: 600;
   top: 0px;
   font-size: 2em;
   line-height: 1.4em;
   padding-top: 70px;
   text-align: center;
   position: absolute;
}
.printimage figcaption h3: hover {
    background: rgba(1, 203, 255, 0.8); 
    color: #f5e5d2;
}


/*content03/web-------------------------------*/

#web {
	background: url("../images/web_back.png")no-repeat bottom;
	width: 100%;
	height: 100%;
}

.webcontentimage {
   width: 40%;
   height: auto;
   margin: 10% 0 0 10%;
   float: left;
}
.webcontenttext{
    width: 50%;
    height: auto;
    margin-top: 10%;
    float: right;
}
.webgalerietext {
    width: 65%;
    float: left;
    padding: 4% 2% 0 0;           
}
.webgalerietext h3 {
    width: 90%;         
}
.pfeil03  {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0px 10px 20px; 
	border-color: transparent transparent transparent #fc8a28  ; 
    padding-right: 18px;	
    transition: all ease 1s;
	display: inline-block;
    margin: 0px 0 0 20px;
    float: right;
}
.webgalerieimage {
    width: 200px;
    height: 200px;
    float: right;
    padding: 2% 0 0 0;
    display: inline; 
    position: absolute;               
}
.webgalerieimage figure {
    border: 3px solid #fc8a28;
    float: right;
    position: relative;
    overflow: hidden; 
    width: 200px;
    height: 200px; 
}
.webgalerieimage figure:hover {
   box-shadow: 0 1.9em 3.8em rgba(0, 0, 0, 0.3), 0 1.5em 1.2em rgba(0, 0, 0, 0.22);
   transform: scale(1.02);
}
.webgalerieimage figure h3 {
   width: 100%;
   top: 0px;
   font-size: 1.8em;
   font-weight: 800;
   line-height: 1.0em;
   padding-top: 70px;
   color: #f5e5d2;
   text-align: center;
   position: absolute;
   background: rgba(1, 203, 255, 0.8);
}  

.webgalerieimage figure:hover h3 {       
   top: 200px;
   background: rgba(1, 203, 255, 0.8);
   transition-duration: 1.8s;
}



/*content04/bild-------------------------------*/

#komp {
    background: #01cbff;
}
.kompcontent {
	background: url("../images/komp_image.jpg")no-repeat center bottom fixed;
    width: 100%;
    height: 100%;   
}
.komptext {
    max-width: 50%;
    height: auto;
    padding: 10% 0 0 4%;  
}
.komptext h2,
.komptext h3 {
	color: #f5e5d2;
}
.kompimage {
    width: 200px;
    padding: 50px 0 0 4%;    
}
.kompimage figure{
    border: 3px solid #f5e5d2;
    float: left;
    position: relative;
    overflow: hidden; 
    width: 200px;
    height: 200px; 
}
.kompimage figure:hover h3 {       
   top: 200px;
   background: rgba(238, 110, 40, 0.8);
   transition: 1s;
}
.kompimage figure:hover {
   box-shadow: 0 1.9em 3.8em rgba(0, 0, 0, 0.3), 0 1.5em 1.2em rgba(0, 0, 0, 0.22);
   transform: scale(1.02);
}

.kompimage figcaption h3 {
   background: rgba(238, 110, 40, 0.8); 
   color: #f5e5d2;
   width: 200px;
   font-weight: 800;
   top: 0px;
   font-size: 1.5em;
   line-height: 1.4em;
   padding-top: 50px;
   text-align: center;
   position: absolute;
}
.kompimage figcaption h3: hover {
    background: rgba(1, 203, 255, 0.8); 
    color: #f5e5d2;
}
.pfeil04 {
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 20px 10px 0; 
	border-color: transparent #f5e5d2 transparent transparent ; 
    padding-left: 18px;	
    transition: all ease 1s;
	display: inline-block;
    margin: 4px 0 0 6px;
}
 .kompgalerietext {
    max-width: 30%;
    height: : auto;
    float: left;
}
.kompgalerietext h3 {
    max-width: 25%;
    height: auto;
    float: right;
    padding: 0 0 0 30px;
    display: inline;
    position: absolute; 
    color: #f5e5d2;
}



/*lightbox-------------------------------*/


.lb-data .lb-caption {
   font-family: Roboto, sans-serif; 
   font-size: 3em;
   font-weight: 600;
   line-height: 2em;
}
.lightboxOverlay {
   background-color: #fff;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   opacity: 0.8;
   display: none;
}
.lb-outerContainer {
     background-color: rgba(255, 255, 255, 0.2);
}


/*kontakt-------------------------------*/

#kontakt {
	width: 100%;
	height: auto;
    font-size: 1.5em;
	padding: 160px 0;
	text-align: center;
}
.adresse img{
	width: 80px;
}

.adresse h2{
    padding-top: 70px;
    
}

.mail {
    color: #01cbff;
    padding: 50px 0 160px;
    font-size: 1.3em;
    text-align: center;
}





/*headerbalken unterseite-------------------------------*/


#headerimage-unterseite {
	height: 220px;
	margin: 0 auto;
}
.home-unterseite {
	background-color: #fc8a28;
	text-align: center;
}
.home-unterseite h1 {
    padding-top: 135px;
    height: 80px;
	font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	color: #fff;
	font-weight: 600;
	font-size: 2.3em;
}
.home-unterseite h2 {
	margin: 0px;
    font-family: Rajdhani, sans-serif; 
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.5em;
	line-height: 5.8em;
	color: #dad9dd;
}

/*datenschutz/content-------------------------------*/

#impressum-container {
	height: auto;
	padding: 80px 2% 80px 2%;
	margin: 0 auto;
}
.impressum-content {
	max-width: 900px;
	text-align: left;
}
.impressum-content p {
	font-size: 1em;
}
.impressum-content span {
	color: #939598;
}

/*ueber mich/unterseite/content-------------------------------*/

#unterseite-container {
	height: auto;
    padding: 20px 2% 80px 2%;
	margin: 0 auto;
}


.unterseite-content p {
	font-size: 1em;
}
.unterseitegrafik {
	float: left;
	width: 12%;
	padding-top: 20px;
}
.unterseite-utext {
	float: left;
    max-width: 900px;
	padding: 30px 0 10px 2%;
}
.unterseite-utext h2 {
	padding-bottom: 30px;
}

	
/*footer-------------------------------*/

#footerarea {
    background: #363639;
    height: auto;
}
 .footer-container a {
	color: #f5e5d2;
	font-size: 1em; 
    transition: all ease 1s;
    text-align: right;	
 }
  .footer-container a:hover {
	color: #fff;
    transition: all ease 1s;	
 }
 .footer-container article {
	 float: left;
     width: 140px;
	 padding: 20px 0px;
 }
 .instagram{
	 width: 30px;
	 height: auto;
	 float: left;
	 padding-top: 10px;
 }
 .xing {
	width: 30px;
	height: auto;
	float: left;
	display: inline-block;
	height: auto; 
	margin-top: 10px;
	margin-left: 10px;
 }
}

/*--------------------------------------------------------------------------------------*/
/*cookiedingsbums-------------------------------*/

#mbmcookie {
	height: 100px;
	position: fixed; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	background: rgba(245, 229, 210, 0.5); 
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	padding: 30px; 
	font-size: 1.2em; 
}
#mbmcookie a.button {
	cursor: pointer; 
	background: #eb8104; 
	padding: 8px 20px; 
	margin-left: 2%; 
	float: right;
	color: #f5e5d2;
}
#mbmcookie a.button:hover {
	background-color: #aaa;
}
#mbmcookie p.cookiemessage {
	display: block; 
	padding: 0; 
	margin: 0;
}




/*clearfix-------------------------------*/

.clearfix::before,
.clearfix::after {
	content:"";
	display: table;
    clear: both;
  }