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



/*
* CSS-Design Responsiv
* Monika Malsy, 19.12.2018
* Portfolio
*/


/* Farben * * * 

Hintergrund:
linear-gradient(to right, #6b6a6a 0%, #d8dddc 100%);;

Schrift mit Verlauf GRAU
linear-gradient(right, #3c3c3c 0%, #d8dddc 100%);;

Schrift mit Verlauf: ROT
linear-gradient(right, #ff05d9 0%, #fd1461 100%);;

hellgrautöne:
25%: #f5f6f6
35%: #f1f3f2
45%: #edefef



* * * * * */


/* Verwendete Schriften:
Sans serif: LATO, bold / light
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-weight:900;
font-weight:300;


* * * * * */




/* Reset * * * * * * * * */
*{
	margin: 0;
	padding: 0;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}



html{	
	font-size: 100%; /* Browserstandard: 16px */
	height:100%;

}


img{
	max-width:100%;
vertical-align: middle;

}


body{
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	line-height: 1.3;
	text-transform: lowercase;
	color:#3C3C3C;
	background:linear-gradient(to top, #8F8D8D 0%, #D8DDDC 100%);
	background-attachment:fixed;
	height:100%;

}

	/* im body einfügen :
	background-image:url(../images/typolappen.jpg);
	/* im body einfügen */ 




#background{
	background:linear-gradient(to right, #8F8D8D 0%, #D8DDDC 100%);
}


#background-lappen{
	background: #D8DDDC;
	background-image:url(../images/typolappen.jpg);
	height:100%;
	width:100%;
}



#wrapper{
	position: relative;
    min-height: 100%;
	width:924px;
    margin: 0 auto;
	padding:0 0 100px 0;



	}
	

	
.empty{
height:10px;
width:925px;
float:left;
}

	



/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  cursor:none !important;
}

/* Slideshow container */
.slideshow-container-2 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Hide the images by default */
.mySlides {
    display: none;
}


.mySlides img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}



.mySlides1 img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}


.mySlides2 img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}

.mySlides3 img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}

.mySlides4 img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}


.mySlides5 img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}

	
	
.mySlides6 img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}

	
.mySlides7 img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}

	
	
	
.cursor-normal img:hover{   /* der cursor wird nicht mehr zur lupe, sondern bleibt normal */
cursor: auto;
}



	
	
	

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 22px;
  font-size: 1.375rem;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  text-decoration:none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
  
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #6B6A6A;
  color:white;
  opacity:0.7;

}

/* Caption text */
.text {
  color: #3C3C3C;
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px 8px 0;;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: left;
  background:white;
}

/* Number text (1/3 etc) */
 .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
 cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none; /* hier ausgeblendet. einblenden mit:inline-block */
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}























/* Raster * * * * * * * * */



.one-third{
	width: 304px;
	height: 304px;
	margin:4px 2px;
	background-color: #EAEDEB;
	opacity: 0.8;
	padding:20px;
	float:left;
	border-radius:2px;
	}


.one-third:hover{
	margin:6px 2px 2px 2px;
	opacity: 1;
		
}





.one-third-alt{
	width: 304px;
	height: 304px;
	margin:4px 2px;
	background-color: #E0E6E5;
	opacity: 0.8;
	padding:20px;
	float:left;
	border-radius:2px;
	}


.one-third-alt:hover{
	margin:6px 2px 2px 2px;
	opacity: 1;
		
}




.two-third{
	width:612px;
	height: 304px;
	margin:4px 2px;
	background-color: #EDEFEF;
	opacity: 0.8;
	padding:20px;
	float:left;
	border-radius:2px;

	}
.two-third:hover{
	margin:6px 2px 2px 2px;
	opacity: 1;
}






/* typografie * * * * * * * * */



h1, h2, h4{
	font-weight:900;

}

h1{
	font-size:19px;
	font-size:1.188rem;
	color:#3C3C3C;
	}


h1 .weit{
	letter-spacing:4px;
	}



h2{
	font-size:26px;
	font-size:1.626rem;
	line-height:34px;
	line-height:2.126rem;	
	color:#3C3C3C;
	padding: 0 0 10px 0px;
	

}


h2 a{
	color:#3C3C3C;
	text-decoration:none;
	padding: 0 20px 5px 0;

	
}



h2 a:hover{
color:#FD1461;
}




h2 .rot{
	color:#FD1461;
	background: -webkit-linear-gradient(left, #FF05D9, #FD1461);;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
	
}


h2 .verlauf{
	color:#3C3C3C;
	background: -webkit-linear-gradient(left, #3C3C3C, #919191);;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding:0 0 0 10px;

}

h2 .h2-seitentitel{
  padding:0 0 0 0px;


}


h2 .seitentitel-verlauf{
	color:#3C3C3C;
	background: -webkit-linear-gradient(left, #3C3C3C, #919191);;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding:0 0 0 0px;

}

h3{
	font-weight: 300;
	font-size:28px;
	font-size:1.75rem;
	line-height:34px;
	line-height:2.126rem;	
	
}



h4{
	font-size:16px;
	font-size:1.0rem;
	line-height:22px;
	line-height:1.375rem;
	padding:0 0 5px 0;

	
}



h5{
	font-weight: 300;
	font-size:21px;
	font-size:1.313rem;
	line-height:28px;
	line-height:1.75rem;

	
}


/**/

h6{
	font-weight: 700;
	font-size:13px;
	font-size:0.775rem;
	line-height:20px;
	line-height:1.25rem;
	letter-spacing:1px;
	}

h6 .weit{
	letter-spacing:2.5px;
	display:inline;
}

h6 a .gestuerzt{
	transform:rotate(270deg);
	color:#3C3C3C;
	position:fixed;
	right:-50px;
	top:350px;
	text-decoration: underline;
}


h6 a .gestuerzt:hover{
	color:#FD1461;
	
}

/**/

p{
	font-weight: 400;
	font-size:16px;
	font-size:1.0rem;
	line-height:22px;
	line-height:1.375rem;
	padding:0 10px 0 0;

	
}



blockquote{
	font-weight: 300;
	font-size:28px;
	font-size:1.75rem;
	line-height:34px;
	line-height:2.126rem;	
	color:#3C3C3C;

	
	
}

strong{
font-weight:normal;
}


em{
font-style:italic;
}


i{
font-style:italic;
}

/* links* * * * * * * * */

a{
text-decoration:underline;
color:#3C3C3C;
}

a:hover{
	text-decoration:none;
	color:#FD1461;
	cursor: pointer;
	
}





/* layout* * * * * * * * */



/* HEADER* * * * * * * * */

#mail-btn{
	display:block;
	width:30px;
	height:170px;
	position:fixed;
	top:290px;
	right:0;
	background: red;
	z-index:1;
}


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

header .full{
	position:absolute;
	height:90px;
	width:920px;
	margin:4px 2px 0 2px;
	background-color: white;
	padding:20px;
	display:block;
	border-radius:0 0 2px 2px;
	z-index: 1 !important;
	
	
}




header .kopf{  /* nur seite archiv* * * * * * * * */
	position:absolute;
	height:90px;
	width:920px;
	margin:4px 2px 0 2px;
	background-color: white;
	padding:20px;
	display:block;
	border-radius:0 0 2px 2px;
		box-shadow: -0px 3px 5px #A9A6A6; 

	z-index: 1 !important;
	
	
}


#logo{position:absolute;}

#logo img:hover{
cursor:auto;
}

#schriftzug{position:absolute;
	top: 34px;
	left:90px;
}

header a{
	text-decoration:none;
	cursor: url('cursor.cur'), auto;}

	



header .material-icons{	
position:absolute;
	float:right;
	top:30px;
	right:2%;
	z-index:1 !important;
	cursor: pointer;
}





#close{
	display:block;
	cursor: pointer;
}



#menue{
	float:right;
	position:absolute;
	top:34px;
	right:2%;
	padding:0 0 0 50px;
	cursor: pointer;
}

#menu{
display:none;
cursor: pointer;
}

#menue h1{color:#FD1461;
	letter-spacing:4px;
}

#menue h1:hover{color:#6B6A6A;} 

.seitentitel{
	padding:5px 0px 10px 20px;
	height:48px;
	width:920px;
	margin:98px 0 0 2px;
	background:white;
	opacity:0.9;

	}

.zurueck{
float:right;
padding:0 20px 0 0;
}

.zurueck img{
cursor:pointer !important;
}

.zurueck-klein{
float:right;
display:none;
cursor:pointer !important;


 }


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


nav h1{float:right;
position:absolute;
top:34px;
right:40px;
letter-spacing:4px;
color:#FD1461;}

nav h1:hover{
	color:#6B6A6A;
}


#navigation{
	display:none;
	background:linear-gradient(to right, #ff05d9 0%, #fd1461 100%);
	z-index: 1 !important;
	position:absolute;
	top:0;
	left:0;
	height:1500px;
	width:924px;    /* 924px* * * * * * * * */
	padding: 100px 0 0 0;
	margin:0 auto;
	}


nav ul li:hover {
	background:white;
	width:100%;
	margin:0 auto;


}


/* navigation punkte* * * * * * * * */

li{
	padding:15px 20px 20px 10%;
	font-weight: 400;
	font-size:28px;
	font-size:1.75rem;
	border-bottom:solid 4px #FF05D9;
	list-style:none;

	
	}
	
	
	

li a{
	padding:0px 40% 0 0 ;
			color:white;

}

li a:hover{
	font-weight: 700;
	color:#FF05D9;
	margin:0 auto;
}




.leistungen{
padding:20px 90% 20px 0;
}

.referenzen{
padding:20px 60% 20px 0;
}

.malsy{
padding:20px 60% 20px 0;
}


.archiv{
padding:20px 60% 20px 0;
}



.kontakt{
padding:20px 90% 20px 0;
}



.one-third .material-icons{
display:none;
width:40px;
height:40px;
border-radius: 50%;
background-color:white;
margin:15px 0 0 -2%;
opacity: 1;

}

.one-third .material-icons:hover{
background-color:#D8DDDC;

}








.two-third .material-icons{
display:none;
width:40px;
height:40px;
border-radius: 50%;
background-color:white;
margin:15px 0 0 -2%;
opacity: 1;
}

.two-third .material-icons:hover{
background-color:#D8DDDC;

}



/* subnavigation* * * * * * * * */


.subnavigation{
margin:68px 0 0px 0;
width: 280px;
list-style: none;



}

.subnavigation li{font-weight:300;
font-size:17px;
font-size:1.0rem;
padding:4px 0px;
	border-bottom:none;
	color:#3C3C3C
	

}

.subnavigation li a{
text-decoration: none;
padding:0 0 0 0;
color:#3C3C3C;
}


.subnavigation li a:hover{
font-weight:400;
}



li .aktiv{
	color:#6B6A6A;
	font-weight:700;
}



/* subnavigation nur für corporate communications* * * * * * * * */

.subnavigation-2{
margin:30px 0 0px 0;
width: 280px;
list-style: none;



}

.subnavigation-2 li{font-weight:300;
font-size:17px;
font-size:1.0rem;
padding:4px 0px;
	border-bottom:none;
	color:#3C3C3C
	

}


.subnavigation-2 li a{
text-decoration: none;
padding:0 0 0 0;
color:#3C3C3C;
}


.subnavigation-2 li a:hover{
font-weight:400;
}



/* INHALTE allgemein* * * * * * * * */

/* sections* * * * * * * * */


section
{margin:0px 0px 0px 0px;

display:inline-block;
}







.content{                               /* breit* * * * * * * * */
	width:612px;
	margin:4px 2px 10px 2px;
	background-color:white;
	padding:10px 10px 10px 10px;
	border-radius:2px;
	float:left;
}






.content-typo{                               /* breit* * * * * * * * */
	width:612px;
	margin:4px 2px 100px 2px;
	border-radius:2px;
	padding:0px 0px 20px 0px;

	float:left;
	cursor:auto;
}

.content-typo img:hover{
cursor:auto;
opacity:1;


}
.content-typo img{
	margin:0px 0px 4px 0px;



}



.content-img{                               /* breit* * * * * * * * */
	width:612px;
	margin:4px 2px 10px 2px;
	background-color:white;
	padding:10px 10px 10px 10px;
	border-radius:2px;
	float:left;
	cursor:auto;
}

.content-img img:hover{
cursor:auto;
opacity:1;


}


/* footerbereich* * * * * * * * */

.nachoben{

width:40px;
height:40px;
border-radius: 50%;
background-color:transparent;
position:fixed;
top:90%;
right:20px;
padding:7px 5px 5px 7px;
margin:0 0 0 20px;
opacity: 1;
z-index: 1;


}


.nachoben img:hover{
cursor:pointer;
}




/* footer* * * * * * * * */

footer{

	width:924px;
	height:50px;
	margin:0 auto;
	position:absolute;
	bottom:5px;
	left:2px;
	background-color:white;
	padding:24px 20px 20px 20px;
	border-top:1px solid #D8DDDC;
	border-radius:2px 2px 0 0;

	
}
	
footer h6{
margin:-10px 0 0 0;
}


address h6{
font-style:normal
}



/* weitere Elemente* * * * * * * * */

hr{
border: #D8DDDC solid 8px;
margin:10px -10px 0 -10px; 


}



/* LAYOUT   LAYOUT    LAYOUT    LAYOUT    LAYOUT    LAYOUT* * * * * * * * */


/* Layout INDEX / startseite* * * * * * * * */
/* Container Leistungen * * * * * * * */

.one-third-leistungen{
	width: 304px;
	height: 304px;
	margin:4px 2px 4px 0px;
	background-color: #F1F3F2;
	opacity: 0.9;
	padding:20px;
	border-radius:2px;
	float:left;

	}

.one-third-leistungen:hover{
	margin:6px 2px 6px 0px;
	opacity:1;

}



.one-third-leistungen h2{
margin:0px 20px 0px 0px;

}



.one-third-leistungen a{
	color:#3C3C3C;
	text-decoration:none;
	padding: 0 100px 200px 0;
	
}


/* Container Malsy * * * * * * * */

.one-third-malsy{
	width: 304px;
	height: 304px;
	margin:4px 2px 4px 2px;
	background-color: #EDEFEF;
	opacity: 0.9;
	padding:20px;
	border-radius:2px;
	float:left;
	}


.one-third-malsy:hover{
	margin:6px 2px 6px 2px;
	opacity:1;

}



.one-third-malsy h2{
margin:225px 20px 0px 0px;
}


.one-third-malsy a{
	color:#3C3C3C;
	text-decoration:none;
	padding: 220px 60px 0 0;
	
}

/* Container referenzen * * * * * * * */

.one-third-referenzen{
	width: 304px;
	height: 304px;
	margin:4px 2px 4px 2px;
	background-color: #F5F6F6;
	opacity: 0.9;
	padding:20px;
	float:left;
	border-radius:2px;

	}


.one-third-referenzen:hover{
	margin:6px 2px 6px 2px;
	opacity:1;

}



.one-third-referenzen h2{
margin:80px 20px 0px 0px;
}


.one-third-referenzen a{
	color:#3C3C3C;
	text-decoration:none;
	padding: 80px 150px 80px 0;
	
}

.verweis{
width:304px;
height:auto;
float:right;
background:white;
padding:5px 20px;
margin:0px 2px 4px 0;
border-radius:2px;
}


/* Layout referenzen übersichtseite* * * * * * * * */



.two-third-archiv{
	width: 612px;
	height: 304px;
	margin:4px 2px;
	background-color: #3C3C3C;
	opacity: 1;
	padding:20px;
	float:left;
	border-radius:2px;
	}


.two-third-archiv:hover{
	margin:6px 2px 2px 2px;	
	opacity: 0.9;}
	
.two-third-archiv h2{
color:white;
   background: -webkit-linear-gradient(left, white, #d8dddc);;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
   padding:0 50% 10% 0;

}

.two-third-archiv h2:hover{
color:blue;
}





.two-third-archiv h3{
color:white;

}





/* Layout ARCHIV* * * * * * * * */

.one-third-archiv{
	width:304px;
	height:304px;
	background:white;
	opacity:0.9;
	padding:20px;
	border-radius:2px;
	margin:4px 2px 4px 2px;
	float:left;



}



.archiv-breit{                               /* breit* * * * * * * * */
	width:612px;
	margin:4px 2px 10px 2px;
	background-color:white;
	padding:20px 10px 10px 10px;
	border-radius:2px;
	float:right;
}






/* Layout zur person* * * * * * * * */

.two-third-blockquote{
	width: 612px;
	margin:4px 2px;
	background-color: white;
	padding:20px;
	float:right;
	border-radius:2px;
	opacity:0.9;
	}



.one-third-normal{
	top:504px;
	width: 304px;
	height:304px;
	margin:2px 2px;
	background-color: white;
	padding:20px;
	float:left;
	border-radius:2px;
	
	}


.one-third-portrait{
	top:200px;
	width: 304px;
	height:304px;
	margin:4px 2px;
	float:left;
	

}


.one-third-portrait img:hover{
cursor:auto;
opacity:1;
}


/* Layout PROJEKTE* * * * * * * * */





.content-text{
	width: 304px;
	margin:4px 2px;
	background-color: white;
	padding:20px 10px 40px 20px;
	border-radius:2px;
	float: right;


}

/* Layout LEISTUNGEN* * * * * * * * */

#button-leistungen{
display:none;
}


.content-leistungen{
	width: 304px;
	margin:4px 2px;
	background-color: white;
	padding:20px 10px 40px 20px;
	border-radius:2px;
	float:left;
	opacity:0.9;


}



.content-leistungen-alt{
	width: 304px;
	margin:4px 2px;
	background-color: white;
	padding:20px 10px 40px 20px;
	border-radius:2px;
	float:right;
	opacity:0.8;


}


.content-leistungen-alt-2{
	width: 304px;
	margin:4px 2px;
	background-color: white;
	padding:20px 10px 40px 20px;
	border-radius:2px;
	float:right;
	


}

/* layout kontakt* * * * * * * * */

#kontakt .full{
	width:920px;
	margin:4px 2px 0 2px;
	background-color: white;
	padding:20px;
	display:block;
	border-radius:0 0 2px 2px;
	
	
}


/* layout impressum/datenschutz* * * * * * * * */


.one-third-impressum{
	width: 304px;
	height:304px;
	margin:4px 2px;
	background-color: white;
	padding:20px;
	float:left;
	border-radius:2px;
	opacity: 0.9;
	

}


.one-third-impressum-alt{
	width: 304px;
	height:304px;
	margin:4px 2px;
	background-color: white;
	padding:20px;
	float:left;
	border-radius:2px;
	opacity: 0.8;
	

}

.full-impressum{
	width:612px;
	margin:4px 2px 0 310px;
	background-color: white;
	padding:20px;
	display:block;
	border-radius:0 0 2px 2px;
	opacity: 0.9;
	
	
}

.full-impressum p{
font-size:12px;
font-size:0.75;
line-height: 16px;
line-height: 1rem;
}

.full-impressum h4{
font-size:12px;
font-size:0.75;
line-height: 16px;
line-height: 1rem;
}



@media (max-width : 629px ){

#wrapper{
	width: 100%;
	margin:0 auto;
		padding:0 0 50px 0;
		background:none;


	}

	

/* sections* * * * * * * * */
section{
padding:0px 0 50px 0px;
width:100%;
background:none;
margin:0 auto;
}

/* article* * * * * * * * */
.content{
	width:100%;
	margin:4px 0%;
	background-color: #3C3C3C;
	background:pink;



	}
	
	
.content-typo{                               /* breit* * * * * * * * */
	width:100%;
	margin:4px 0%;

	float:left;
	cursor:none;
}



.content-typo img{
	margin:0px 0px 4px 0px;



}

	
	

/* Raster * * * * * * * * *//* kleiner screen* * * * * * * * */	


.one-third{
	width: 100%;
	height: 140px;
	margin:2px 0%;
	padding: 10px 20px 10px 2%;
	background:white;

	}
	
.one-third:hover{
	margin:2px 0%;

}



.one-third-alt{
	width: 100%;
	height: 140px;
	margin:2px 0%;
	padding: 10px 20px 10px 2%;
	background:white;

	}
	
.one-third-alt:hover{
	margin:2px 0%;

}




.two-third{
	width: 100%;
	height: 140px;
	margin:2px 0%;
	padding: 5px 20px 10px 2%;

	}
	
.two-third:hover{
	margin:2px 0%;

}


	
/* Typografie * * * * * * * * *//* kleiner screen* * * * * * * * */	
	

h1{
	font-size:16px;
	font-size:1rem;
	color:#3C3C3C;
	}


h1 .weit{
	letter-spacing:3px;
	}



h2{
	font-size:18px;
	font-size:1.188rem;
	line-height:24px;
	line-height:1.5rem;
	color:#3C3C3C;
		background: -webkit-linear-gradient(left, #6B6A6A, #3C3C3C);;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
	
}


h2 a{
	color:#FF05D9;
	padding: 0 60px 40px 0;

	
}



h2 .rot{
	font-size:18px;
	font-size:1.188rem;
	line-height:24px;
	line-height:1.5rem;
	color:#FD1461;
	background: -webkit-linear-gradient(left, #FF05D9, #FD1461);;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
	
}





h2 .verlauf{
  padding:0 0 0 0px;

}




h3{
	font-weight: 400;
	font-size:18px;
	font-size:1.188rem;
	line-height:24px;
	line-height:1.5rem;
	color:#6B6A6A;
	
}



h4{
	font-size:16px;
	font-size:1rem;
	line-height:24px;
	line-height:1.5rem;	
}



h5{
	font-size:16px;
	font-size:1rem;
	line-height:24px;
	line-height:1.75rem;

	
}

blockquote{
	font-weight: 300;
	font-size:22px;
	font-size:1.375rem;
	line-height:28px;
	line-height:1.75rem;	
	color:#3C3C3C;

	
	
}


h6 a .gestuerzt{
position:fixed;
top:95%;
right: 2%;
transform:rotate(0deg);
font-size:11px;
font-size:0.688rem;
background:white;
padding:3px 6px;
border-radius:2px;
opacity:0.8;
z-index: 1 !important;
}


p{
	font-size:16px;
	font-size:1rem;
	line-height:24px;
	line-height:1.5rem;	
}


/* LAYOUT* * * * * * * * */
/* header* * * * * * * * *//* kleiner screen* * * * * * * * */	




header .full{
	width:100%;
	position:absolute;
	top:0;
	left:0px;
	height:85px;
	background-color: white;
	padding: 15px 3%;
		border-radius:none;
		box-shadow: none; 
		margin:0 auto;



}


#logo{display:none;}

#schriftzug{position:absolute;
display:block;
	top: 18px;
	left:2%;
	padding:0 50px 0 0;
}


#menue{
display:none;
}

#menue h1{
display:none;
}

#menu{
display:block;
z-index: 1 !important;
width:40px;
height:60px;
color:#FD1461;
float:right;
position:fixed;
top:10px;
right:4%;
background:transparent;


}




.seitentitel{
	padding:8px 0px 0px 2%;
	height:40px;
	width:100%;
	margin: 90px 2% 2px 0%;
	}


.seitentitel h2{
	font-size:18px;
	font-size:1.125rem;
	line-height:22px;
	line-height:1.375rem;	
	
}




.seitentitel h2 .index{
	font-size:16px;
	font-size:1rem;	
}








.zurueck{
float:right;
display:none;


}

.zurueck-klein{
float:right;
display:block;
padding: 0 5% 0 0;


 }



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

#navigation{
	display:none;
	background:linear-gradient(to right, #ff05d9 0%, #fd1461 100%);
	z-index: 1 !important;
	position:absolute;
	top:0;
	left:0;
	height:1000px;
	width:100%;
	padding: 100px 0 0 0;
	margin:0 auto;

	}


.referenzen{
padding:20px 50% 20px 0;

}


header .material-icons{	
	top:12px;
	right:2%;
	
}




li{
	padding:10px 20px 10px 10%;
	font-weight: 700;
	font-size:20px;
	font-size:1.25rem;
	border-bottom:solid 4px #FF05D9;
	list-style:none;
	
	}

li a{
	color:white;
	padding:0 60% 0 0 ;

}

li a:hover{
	font-weight: 700;
	color:#FF05D9;
}

li a:active{
		font-weight: 700;
		color:white;
		letter-spacing:4px;
	
}




.one-third .material-icons{
display:block;
margin:15px 0 0 0%;
}


.two-third .material-icons{
display:block;
margin:15px 0 0 0%;
}












/* kleiner screen* * * * * * * * */	
/* footer* * * * * * * * */





.nachoben{
width:35px;
height:35px;
border-radius: 50%;
background-color:transparent;  /* vorher white* * * * * * * * */
z-index: 1;
position:fixed;
top:85%;
bottom:40px;
right:3%;
padding:4px 6px 0px 6px;
opacity:1;
}




footer{
display:none;
}

footer h6{
display:none;
}





/* layout index* * * * * * * * */	

/*  index container leistungen* * * * * * * * */	
.one-third-leistungen{
	width: 100%;
	height: 100px;
	margin:4px 2% 4px 0;
	padding:2%;
	}


.one-third-leistungen:hover{
	margin:4px 2% 4px 0;
		
}


.one-third-leistungen a{
	color:#FF05D9;
	text-decoration:none;
	padding: 0 60% 60px 0;
	
}


/* index container malsy* * * * * * * * */	


.one-third-malsy{
	width: 100%;
	height: 100px;
	margin:4px 2% 4px 0;
	padding:2%;
	}


.one-third-malsy:hover{
	margin:4px 2% 4px 0;
		
}



.one-third-malsy h2{
margin:0px;
}


.one-third-malsy a{
	color:#FF05D9;
	text-decoration:none;
	padding: 0 60% 60px 0;
	
}


/* index container referenzen* * * * * * * * */	
	
	
	
.one-third-referenzen{
	width: 100%;
	height: 100px;
	margin:4px 2% 4px 0;
	padding:2%;
	}


.one-third-referenzen:hover{
	margin:4px 2% 4px 0;
		
}
	
	

.one-third-referenzen h2{
margin:0px;
}


.one-third-referenzen a{
	color:#FF05D9;
	padding: 0 50% 60px 0;
	
	
}

/* kleiner screen* * * * * * * * */	
/* layout referenzen /archiv/button* * * * * * * * */	

article{
	width:100%;
	margin:4px 2% 0 0;
	padding: 0px 2% 10px 2%;
}







.two-third-archiv{
	width: 96%;
	height: 100px;
	margin:4px 0%;	
	padding:2%;
	background:linear-gradient(to right, #ff05d9 0%, #fd1461 100%);
	}
	
	

.two-third-archiv:hover{
	margin:4px 2% 4px 0;

	}
	
	
	.two-third-archiv h3{
	font-weight:400;

	}
	

/* kleiner screen* * * * * * * * */	
/* Layout monika malsy zur person* * * * * * * * */
.two-third-blockquote{
	width: 100%;
	background-color: white;
	padding:20px 2%;
	border-radius:2px;
	opacity:0.9;
	margin:5px 0% 0 0%; 
	float:left;

	}



.one-third-normal{
	width: 100%;
	background-color: white;
	margin:5px 0% 0 0%; 
	padding:20px 2%;
	float:left;
	border-radius:2px;
	opacity:0.8;
	height:304px;
	


	}


.one-third-portrait{
margin:3px 0% 2px 0%; 
width:350px;
height:100%;
}

.one-third-portrait img{
width:350px;
}

blockquote{
	font-weight: 400;
	font-size:16px;
	font-size:1.0rem;
	line-height:22px;
	line-height:1.375rem;	
	color:#3C3C3C;

}

/* Layout PROJEKtE kleiner screen* * * * * * * * */

.content-text{
	width: 100%;
	margin:3px 0 1px 0%;
	background-color: white;
	padding:10px 10px 20px 2%;
	float:left;
	border-radius:2px;


}
	
	
	.content{
	width: 100%;
	margin:4px 0 1px 0%;
	background-color: white;
	padding:10px 10px 10px 2%;
	float:left;
	border-radius:2px;

	
	}
	

	

.verweis{
width:100%;
height:auto;
float:left;
background:white;
padding:5px 2% 0px 2%;
margin:4px 0% 30px 0%;
border-radius:0px;
color:black;

}


/* Layout LEISTUNGEN* * * * * * * * */


#button-leistungen{
display:block;

}


.webdesign{
height:60px;
background:#EDEFEF;
width:100%;
padding: 4% 2% 2% 2%;
margin:0 0 1% 0;
}





.buchgestaltung{
height:60px;
background:#EAEDEB;
width:100%;
padding: 4% 2% 2% 2%;
margin:0 0 1% 0;
}



.corporate-design{
height:60px;
background:#F1F3F2;
width:100%;
padding: 4% 2% 2% 2%;
margin:0 0 1% 0;
}


.ausstellung{
height:60px;
background:#EAEDEB;
width:100%;
padding: 4% 2% 2% 2%;
margin:0 0 1% 0;
}


.text-lektorat{
height:60px;
background:#F1F3F2;
width:100%;
padding: 4% 2% 2% 2%;
margin:0 0 1% 0;
}





.content-leistungen{
	width: 104%;
	margin:-1px -2%;
	background-color: white;
	padding:20px 10px 40px 2%;
	float:left;
	border-radius:2px;


}



.content-leistungen-alt{
width: 104%;
	margin:6px -2%;
	background-color: white;
	padding:20px 10px 40px 2%;
	float:left;
	border-radius:2px;




}


.content-leistungen-alt-2{
	width: 104%;
	margin:-1px -2%;
	background-color: white;
	padding:20px 10px 40px 2%;
	float:left;
	border-radius:2px;


	


}




	
	
/* Layout ARCHIV* * * * * * * * */

.one-third-archiv{
	width: 96%;
	height:90px;
	margin:10px 0 4px 0;
	background:#EDEFEF;
	color:black;
	padding:5px 0% 10px 2%;

}

.one-third-archiv li{
	width:96%;
	display:inline;
	margin:0px  0 0px 0;
	padding:0px 15px 0 0;
	font-size:14px;
	font-size:0.875rem;
	line-height:22px;
	line-height:1.375rem;	

	

}


.one-third-archiv h2{
	display:block;


}



.one-third-archiv h3{
	display:block;
	padding:10px 0 0 0;



}
.subnavigation{
	display:none;
	width: 100%;
	margin:10px 0 0 0px;
	
	margin: 0 auto;

}



.subnavigation-2{
	display:none;
	width: 100%;
	margin:10px 0 0 0px;	
	margin: 0 auto;

}




.archiv-content{
margin:-20px 0 0 0;
width:100%;
}


.archiv-breit{
width:96%;
float:left;
}


hr{
width:100%;
margin:10px 0 0 0;
}


/* Layout Kontakt* * * * * * * * */


#kontakt .full{
	width:100%;
	background-color: white;
	padding: 15px 2% 10px 2%;
	margin:3px 0 0 0;


}



/* layout impressum/datenschutz* * * * * * * * */



.one-third-impressum{
	width: 100%;
	height:auto;
	margin:3px 0 2px 0;
	background-color: white;
	padding:10px 2%;
	float:left;
	border-radius:2px;
	
	

}

.one-third-impressum-alt{
display:none;
}

.full-impressum{
	width: 100%;
	height:auto;
	margin:5px 0 0 0;
	background-color: white;
	padding:10px 2%;
	display:block;
	border-radius:0 0 2px 2px;
	
	
}


.full-impressum h4{
font-size:14px;
font-size:0.875;
line-height: 16px;
line-height: 1rem;
}



}


@media ( min-width : 630px ) and (max-width : 952px ){



#wrapper{
width:630px;

	}



section{
width:630px;
margin:4px 5px;
}


header .full{
	position:absolute;
	margin: 5px 0 0 5px;
	height:90px;
	width:620px;
	background-color: white;
	padding:20px;
	display:block;
	
	
}



	
.seitentitel{
	padding:5px 10px 10px 20px;
	height:48px;
	width:620px;
	margin:100px 5px 0 5px;
	background:white;

	}	
	

.seitentitel h2{
	font-size:26px;
	font-size:1.626rem;
}




h1 .weit{
	letter-spacing:3px;
	display:inline;
}





#navigation{
	width:630px;

	}



#menue{
	top:34px;

}

h6 a .gestuerzt{
	top:250px;
	font-size:11pt;
	font-size:0.688rem;
}


.referenzen{
padding:20px 50% 20px 0;
}



footer{
	width:620px;
	height:75px;
	margin:0px 5px 0 5px;
	bottom:10px;



	
}

/* Layout referenzen* * * * * * * * */

.one-third{
width:307px;
height:304px;
margin:0px 6px 4px 0px;

}


.one-third:hover{
width:307px;
height:304px;
margin:0px 6px 4px 0px;

}



.one-third-alt{
width:307px;
height:304px;
margin:0px 6px 4px 0px;

}


.one-third-alt:hover{
width:307px;
height:304px;
margin:0px 6px 4px 0px;

}




.two-third{
width:307px;
height:304px;
margin:0px 6px 4px 0px;
}


.two-third:hover{
width:307px;
height:304px;
margin:0px 6px 4px 0px;
}


.two-third-archiv{
	height: 114px;
	width:618px;
	margin:6px 0 0 0px;
	background:linear-gradient(to right, #ff05d9 0%, #fd1461 100%);

}

.two-third-archiv:hover{
margin:6px 0 0 0px;
	background:linear-gradient(to left, #ff05d9 0%, #fd1461 100%);
	

	
}


.one-third .material-icons{
display:none;
margin:10px 0 0 -2%;

}



/* Layout INDEX* * * * * * * * */

.one-third-leistungen{
margin: 2px 5px 0px 0px;
}

.one-third-leistungen:hover{
margin: 2px 5px 0px 0px;
	opacity:1;
}




.one-third-malsy{
margin: 2px 0 2px 6px;
}


.one-third-malsy:hover{
margin: 2px 0px 2px 6px;
opacity:1;
}



.one-third-referenzen{
margin: 5px 0 5px 0px;
}


.one-third-referenzen:hover{
margin: 5px 0 5px 0px;
opacity:1;
}




/* Layout monika malsy zur person* mittlerer bildschirm* * * * * * * */
.two-third-blockquote{
	width: 307px;
	background-color: white;
	padding:20px 20px 20px 15px;
	float:right;
	border-radius:2px;
	opacity:0.9;
	margin:1px 10px 0 0px;
	}



.one-third-normal{
	width: 307px;
	height:304px;
	background-color: white;
	padding:20px 10px;	
	margin:1px 0px;
	float:left;
	border-radius:2px;
	opacity:0.8;
	}


.one-third-portrait{
	top:200px;
	width: 307px;
	height:307px;               /* vorher 216* * * * * * * */
	margin:1px 2px 4px 0px;
	float:left;
	opacity:0.9;
	background:yellow;
	padding:0;

}


.one-third-portrait img{
width:100%;
}

blockquote{
	font-weight: 400;
	font-size:16px;
	font-size:1.0rem;
	line-height:22px;
	line-height:1.375rem;	
	color:#3C3C3C;

	
	
}




/* Layout PROJEKTE* * * * * * * * */


.one-third-halb{
	width: 612px;
	height:150px;
	margin:4px 0px;
	background-color: blue;
	padding:20px;
	float:left;
	border-radius:2px;

}


.content-text{
	width: 620px;
	margin:5px 0px 5px 0px;
	background-color: white;
	padding:20px 10px 40px 20px;
	float:left;
	border-radius:2px;


}

.content{
	width: 620px;
	margin:4px 0px;
	background-color: white;
	padding:20px 10px 10px 10px;
	float:left;
	border-radius:2px;

}

.content h2{
	padding:0px 0px 10px 10px;

}



.content-typo {

width:620px;
margin:0px 0px 5px 0px;
}


.verweis{

width: 620px;
	margin:5px 0px 0px 0px;
	background-color: white;
	padding:20px 10px 40px 20px;
	float:left;


height:auto;




border-radius:2px;
color:black;

}




/* Layout LEISTUNGEN* * * * * * * * */


#button-leistungen{
display:none;
}




.content-leistungen{
	width: 620px;
	margin:2px 0px 5px 0px;
	background-color: white;
	padding:20px 10px 40px 20px;
	float:left;
	border-radius:2px;


}



.content-leistungen-alt{
	width: 620px;
	margin:2px 0px 5px 0px;
	background-color: white;
	padding:20px 10px 40px 20px;
	float:left;
	border-radius:2px;


}


.content-leistungen-alt-2{
	width: 620px;
	margin:2px 0px 5px 0px;
	background-color: white;
	padding:20px 10px 40px 20px;
	float:left;
	border-radius:2px;
	


}



/* Layout Kontakt* * * * * * * * */

#kontakt .full{
	width:620px;
	background-color: white;
	padding:20px;
	margin:0px 0px 0 0px;


}


/* layout impressum/datenschutz* * * * * * * * */



.one-third-impressum{
	width: 306px;
	height:306px;
	margin:4px 8px 4px 0;
	background-color: white;
	padding:20px;
	float:left;
	border-radius:2px;
	opacity: 0.9;
	

}


.one-third-impressum-alt{
display:none;
	width: 620px;
	height:auto;
	margin:4px 2px;
	background-color: white;
	padding:20px;
	float:left;
	border-radius:2px;
	opacity: 0.8;
	

}

.full-impressum{
	width:620px;
	margin:20px 0px 0 6px;
	background-color: white;
	padding:20px;
	display:block;
	border-radius:0 0 2px 2px;
	
	
}

.full-impressum p{
font-size:12px;
font-size:0.75;
line-height: 16px;
line-height: 1rem;
}

.full-impressum h4{
font-size:12px;
font-size:0.75;
line-height: 16px;
line-height: 1rem;
}






/* Layout ARCHIV* * * * * * * * */

.one-third-archiv{
	width: 620px;
	height:160px;
	margin:40px 0px 5px 0px;
	background:#EDEFEF;
	color:black;

}

.one-third-archiv li{
width:100%;
display:inline;
margin:0  0 20px 0;
padding:0px 20px 0 0;
}

.subnavigation{
	width: 620px;
	margin:20px 0 0 0;


}

.subnavigation-2{
	width: 620px;
	margin:20px 0 0 0;


}



.archiv-content{
margin:5px 0px;

}







.archiv-breit{                               /* breit* * * * * * * * */
	width:620px;
	margin:4px 0px;
	background-color:white;
	padding:20px 10px 10px 10px;
	border-radius:2px;
	float:left;
}







hr{
margin:10px 0px 0 -10px; 
width:620px;
}

}








/* Druckformatierung */ 
 
@media print {
footer { 
display: none; 
}


header { 
display: none; 
}


img{
width:50%;
}

.nachoben{
display:none;
}



.gestuerzt{
display:none;

}
}


















.projekt {
}