@import 'https://fonts.googleapis.com/css?family=Lato|Open+Sans|Poiret+One|Raleway';

*{
		box-sizing: border-box;
		padding: 0;
		margin: 0;
}


.liste {
    list-style-type: disc;
    margin: 0.5rem 0rem 0rem 1rem;
}

.liste li {
    font-size: 12.5px;
}
							
body,p,td,tr{
		background-color: #fff;
		color: #000;
		font-family: 'Open Sans', sans-serif;
}
							
.innerbox {
		margin: 0.5em;
}
							
h1 {
		font-family: 'Poiret One', cursive;
		text-transform: lowercase;
		font-size: 1.2em;
		letter-spacing: 0.03em;
		padding: 0.4em 0 0.7em;
		text-align: center;
}

.backtoportfolio{
		font-family: 'Poiret One', cursive;
		text-transform: lowercase;
		font-size: 1.2em;
		letter-spacing: 0.03em;
		padding: 0.4em 0 0.7em;
		text-align:center;
		}
		
		
		
							
h2,h3,h4,h5,h6 {
		font-family: 'Open Sans', sans-serif;
		font-weight: bold;
}
							
h2 {
		font-size: 0.9em;
		padding: 1em 0 0.3em 0;
}
							
h2:first-child {
		padding-top: 0;
}
							
p,td,rt {
		font-size: 0.7em;
}
							
ul {
		list-style-type: none;
}
							
a {
    word-break: break-all;
    text-decoration: none;
		color: #aaa;
}


q{
	font-style:italic;
}
							
address {
		font-style: normal;
}
		/*  scroll-to-top /*/
						
.bold{
	font-weight:bold;
}
						
#return-to-top {
		position: fixed;
		bottom: 20px;
		right: 20px;
		background: #aaa;
		background: rgba(170, 170, 170, 0.7);
		color: rgba(0, 0, 0, 0.8);
		display: block;
		text-decoration: none;
		box-sizing: border-box;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		text-align: center;
		display: none;
		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
							
#return-to-top i {
		position: relative;
		position: relative;
		top: -5px;
}
							
#return-to-top:hover {
		background: #000;
		background: rgba(0, 0, 0, 0.7);
		color: #aaa;
}

.credits{
	text-decoration:underline;
		}
		


#right{
	text-align:right;
	font-size:0.6em;
	}

.middle{
	text-align:center;
}

main a.somdesign[href^="mailto:"] {
	background:none;
	}

.somdesign{
	text-decoration:none;
}


	/*    //////      header       ///////      */
			
header {
		width: 100%;
}
							
header .innerbox {
		overflow: hidden;
}
							
#headerlogo {
		width: 4.4em;
		max-width: 250px;
		float: left;
		margin: 0.6em 0;
}
							
#sitenamenav{
		display: inline-block;
		display:none;
}
							
nav#socialnav {
		float: right;
		text-align: right;
		width: 70%;
		position: absolute;
		top: 0;
		right: 0;
}
							
nav#socialnav li {
		display: inline-block;
}
							
nav#socialnav li .social {
		padding: 2.1em 1em;
		color: #aaa;
}
/* ausgeklappte Navigation*/
						
#main-nav {
		font-family: 'Raleway', sans-serif;
		position: absolute;
		top: 7em;
		right: 0;
		z-index: 10;
		background-color: #fff;
		width: 100%;
		margin: 0;
		padding: 1.3em;
		visibility: hidden;
		opacity: 1;
		transition: visibility 0s, opacity 0.2s linear;
		text-align: left;
		height: 100vh;
}
					
#main-nav li {
		padding: 0.6em 0;
}
							
#main-nav li a {
		padding: 0.2em 0 1.7em;
}
		/*Dropdown-Menü erst sichtbar in größerer Ansicht*/
							
#main-nav ul li ul li {
		display: none;
}
							
#main-nav ul li ul li a {
		font-size: 0.8em;
		padding: 0.5em 1em 0.5em;
}
							
#main-nav li a.active,#main-nav ul li a.active,#main-nav-side  li a.active,#main-nav-side  ul li a.active,nav ul li a:hover,#main-nav li a:hover,#main-nav ul li a:hover,nav i:hover,nav#socialnav li .fa:hover{
	color:#000;
}
	/*    //////      main       ///////      */
							
.swiper-container {
		width: 100%;
}
							
.swiper-slide figure {
		margin: 0;
		padding: 0;
		position: relative;
}
							
.swiper-slide img {
		width: 100%;
}
							
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev,
.swiper-container .swiper-pagination {
		display: none;
}
							
.swiper-container-rtl .swiper-button-next.swiper-button-black {
		border: 1px solid #0f0;
}
/*    //////      footer       ///////      */
							
footer {
		display: none;
}
/*    //////      impressum       ///////      */
							
.seitennametitel a {
		color: #000;
}
							
.seitennametitel a:hover {
		color: #aaa;
}
							
.datenschutz {
		text-transform: uppercase;
}
							
.daschu {
		margin: 1em 0 1em 0;
}
							
.wrappertext {
		padding-top: 2em;
		padding-bottom: 1em;
}
							/*about*/
							
							#fotomaria img {
								width: 100%;
							}
							
							.wrappertext p{
								font-size:0.8em;
							}
							
							#icons a {
								font-size: 0.9em;
							}
							/* filterzeichen (dach) - alle Verweisziele die mit http:// beginnen*/
							
							main a[href^="mailto:"] {
								background: url(../images/icons/blackenvelope.png) no-repeat left center;
								padding-left: 20px;
							}
							
							main a[href^="tel:"] {
								background: url(../images/icons/rrring.png) no-repeat left center;
								padding-left: 20px;
								padding-bottom: 1%;
							}
							/*portfolio*/
							
							.portfoliovorschau h2,
							.ueberschrift h2 {
								font-family: 'Poiret One', cursive;
								text-transform: lowercase;
								letter-spacing: 0.03em;
								text-align: center;
								padding-bottom: 0.7em;
								font-size: 1em;
							}
							
							.portfoliovorschau {
								list-style-type: none;
								overflow: hidden;
							}
							
							.portfoliovorschau li {
								width: 48%;
								float: left;
								margin-right: 4%;
							}
							
							.portfoliovorschau li:last-child {
								margin-right: 0;
							}
							
							.portfoliovorschau li img {
								width: 100%;
								height: auto;
							}
							
							/*Blog*/
							
							.blogvorschau{
								list-style-type: none;
								overflow: hidden;
							}
							
							.blogvorschau li {
								width: 32%;
								float: left;
								margin-right: 0.5%;
							}
							
							.blogvorschau li:last-child {
								margin-right: 0;
							}
							
							.blogvorschau li img {
								width: 100%;
								height: auto;
							}
							
							
							/*Bildergalerie*/
							
							#bildergalerie img {
								width: 100%;
								margin-bottom: 10%;
							}
							/* Kontaktformular*/
							
							#kontaktformular input[type="text"],
							#kontaktformular input[type="email"],
							#kontaktformular textarea {
								width: 80%;
								border: 1px solid #000;
								font-size: 0.95em;
								padding: 6px;
								border-radius: 5px 5px 5px 5px;
								margin-bottom: 10px;
							}
							
							.mitte {
								text-align: center;
							}
							/*:focus => eingabefeld Farbe verändert sich*/
							
							#kontaktformular input[type="text"]:focus,
							#kontaktformular input[type="email"]:focus,
							#kontaktformular textarea:focus {
								border: 1px solid #aaa;
								background-color: #aaa;
							}
							
							#kontaktformular textarea {
								height: 120px;
							}
							
							#kontaktformular .button {
								padding: 5px 10px;
								font-size: 1em;
								background-color: #aaa;
								border: 1px solid #aaa;
								border-radius: 5px 5px 5px 5px;
								margin-left: 10%;
							}
							
							#kontaktformular #icons1,
							#kontaktformular #icons2 {
								padding: 6px;
								padding-left: 0;
								margin-left: 10%;
							}
							
							#kontaktformular #icons1 {
								margin-top: 15px;
							}
							
							.instagram-media {
								margin-left: 50%;
								border: 1px solid #f00;
							}
							
							/*contact*/

							.contact{
										padding-top: 2em;
										padding-bottom: 0.5em;
										font-size: 1.1em;
										text-align: center;
										font-family: 'Raleway', sans-serif;
										text-transform: lowercase;
										letter-spacing: 0.25em;
										line-height:2.2;
							}

							
							
							/*  /////// breakpoint ab 481px  ////////   */
							
							@media only screen and (min-width:481px) {
								h1 {
									font-size: 1.6em;
									letter-spacing: 0.06em;
								}
								
								.backtoportfolio{
									font-size: 1.6em;
									letter-spacing: 0.06em;									
								}
								
							}
							/*  /////// breakpoint ab 769px  ////////   */
							
							@media only screen and (min-width:768px) {
								#headerlogo {
									width: 5em;
									max-width: 250px;
									float: left;
									margin: 0.6em 0.6em 0;
									
								}
								nav#socialnav li .social {
									padding: 2.6em 1.5em;
								}
								h1 {
									font-size: 2em;
									letter-spacing: 0.15em;
								}
								
								.backtoportfolio{
									font-size: 2em;
									letter-spacing: 0.15em;
								}
								
								/*portfolio*/
								.portfoliovorschau h2,
								.ueberschrift h2 {
									letter-spacing: 0.2em;
									padding-bottom: 0.9em;
									font-size: 1.5em;
								}
								.portfoliovorschau {
									margin-bottom: 4%;
								}
								
								/*contact*/

							.contact{
										
										font-size: 1.5em;
										line-height:2;
							}
							
							/*about*/
							
							#right{
									
									font-size:0.7em;
									
								}
								
								/*  /////// breakpoint ab 960px  ////////   */
								@media only screen and (min-width:960px) {
									body {
										width: 100%;
										max-width: 1280px;
										margin: auto;
									}
									#nav-switch,
									.seitenname,
									#main-nav-side ul li ul li {
										display: none;
									}
									#main-nav {
										position: relative;
										visibility: visible;
										/*background-color:#f00;*/
										font-family: 'Raleway', sans-serif;
										text-align: center;
										padding-top: 4%;
										margin-top:-6.5em;
									
										height:inherit;
										padding-top:7%;
										padding-bottom:40%;
									}
									
									
							
									
									.wrapperheaderandmain {
										overflow: hidden;
									}
									/*header*/
									header {
										width: 25%;
										float: left;
										display: block;
										margin: 0;
										position: relative;
									}
									#headerlogo {
										float: none;
										width: 6em;
										margin: 0;
										margin-top: 1em;
									}
									#logobox {
										text-align: center;
										
									}
									#sitenamenav {
										padding-top: 2em;
										padding-bottom: 0.5em;
										font-size: 1em;
										text-align: center;
										font-family: 'Raleway', sans-serif;
										text-transform: lowercase;
										letter-spacing: 0.5em;
										
										
									}
									#sitenamenav a {
										color: #000;
									}
									
									
									
									#main-nav li {
										padding: 0.4em 0;
								}
									
									#main-nav li a {
											padding: 0.5em 1em 0.5em;
									}
							
									nav#socialnav {
										display: inline-block;
										text-align: center;
										position:relative;
										width: 100%;
										z-index: 9999;
										margin-top:1.2em;
										
									}
									
									nav#socialnav li .social {
										padding: 1.2em 1.3em 0.5em;
									}
									

									/*main*/
									main {
										width: 75%;
										float: right;
										margin-top: 1em;
									}
									
									
									main .innerbox:last-child {
										margin-left: 0;
									}
									.swiper-container:hover .swiper-button-next,
									.swiper-container:hover .swiper-button-prev,
									.swiper-container:hover .swiper-pagination,
									#sitenamenav {
										display: inherit;
									}
									.wrappertext {
										padding-top: 2em;
									}
									.portfoliovorschau h2,
									.ueberschrift h2 {
										font-family: 'Raleway', sans-serif;
										letter-spacing: 0.5em;
										font-weight: normal;
										font-size: 1.2em;
									}
								}
								
							
										
										
								/*Blog*/
							
							
							
							/*.blogvorschau li {
								width: 19.6%;
							
							}*/
							
							
								
								/*  /////// breakpoint ab 1280  ////////   */
								@media only screen and (min-width:1280px) {
								
								#sitenamenav {
										font-size: 1.2em;
										letter-spacing: 0.5em;
								}
									}