/*
Style: DPHstyle || dphWEB
Author: designstudioPH
Author URI: http://designstudio-ph.de
Description: Master-Template
Version: 1.0
*/

/* Import */
@import url("basic.css") screen;

/* ################ FONTS ############################################################################################################ */
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v17-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* dancing-script-regular - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dancing-script-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/dancing-script-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dancing-script-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dancing-script-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dancing-script-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dancing-script-v14-latin-regular.svg#DancingScript') format('svg'); /* Legacy iOS */
}




/* ######### FARBEN ################################################################################################################## */
/* Standard-Template-Farben */
body{color:#333;}

/* Hauptfarbe */
h1, h2, h3, a, strong, em{}
.button{background-color:#6db2a1; display:inline-block; padding:10px 15px; border-radius:2px; color:#fff;}

/* Zweitfarbe */
.button:hover, .button2:hover{background-color:#85cebc; text-decoration:none;}

/* Drittfarbe */
.logo, footer .footertxt, footer .footertxt a, footer .footertxt b, .button, .button2, .wrapperred h1, .wrapperred, .wrapperred2 h1, .wrapperred2, input.submit{color:#fff;}
header, .teaser, .teaser h2{background-color:#FFF5EF;}
footer .footertxt b{border-color: #FFF5EF;}

/* Viertfarbe */
.button2{background-color:#333;}


/* ######### FARBEN ################################################################################################################## */

/* HTML Background-Image */


/* Standard HTML */
body {font-family: 'Open Sans', sans-serif; font-size:1.25rem; font-weight:300;}
a{text-decoration: none;}
a:hover{text-decoration:underline;}
h1, h2, h3{margin-bottom:20px; font-weight:700;}
p, table, ul{margin-bottom:20px;}
h1{font-size:1.6rem;}
h2{font-size:1.6rem;}
h3{font-size:1.4rem;}
strong, b{font-weight:700;}
figure{min-height:100px;}
em{font-family: 'Dancing Script', cursive;}
small{font-style:italic; font-size:0.9rem;}

hr{border:none; width:100%; height:5px; margin:4em 0; background-color: #6db2a1}

table td{border:1px solid #991B1E; padding:20px;}
table{border-collapse: collapse !important; width:100%;}

.aligncenter{text-align:center; }

article ul, aside ul{list-style-type: circle; margin-left:20px;}
article ul li, aside ul li{margin-bottom:10px;}


/* Header */
header{position:fixed; z-index:10; width:100%; top:0 !important; background-color: rgba(46, 59, 66, 0.9); color:#fff; border-bottom:2px solid #FFF5EF;}
header a{color:#fff;}

/* Logo */
.logo{float:left; margin:0 2%; padding:10px 0 10px 0;}


/* Navi */
nav{float:right; margin:20px 2% 0 2%;}
nav ul{display:table; width:100%;}
nav li{display:table-cell;}
nav li a{display:block; padding:8px 0px 10px 0; text-align: center; text-decoration: none; text-transform: uppercase; text-align:center; margin-left:20px;}
nav li a:hover, nav li#aktiv a{text-decoration: none; padding:8px 0px 8px 0; border-bottom:2px solid #6cb0a0;}


/* Content-Wrapper */
.wrapperwhite{background-color: rgba(255, 255, 255, 0.9); padding:120px 0; border-bottom:2px solid #fff;}
.wrappergrey{background-color: rgba(229, 244, 240, 0.9); padding:120px 0; border-bottom:2px solid #fff;}
.wrappergrey2{background-color: rgba(46, 59, 66, 0.9); padding:120px 0; border-bottom:2px solid #fff;}

.wrappergrey2 a, .wrappergrey2 p, .wrappergrey2 h2, .wrappergrey2 h3, .wrappergrey2 li{
  color:#fff;
}



/* Aside */
aside{text-align:center;}


/* Galerie */
.galerie{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
  width:96%;
  margin:0 2%;
  box-sizing: border-box;
}

.galerie a{
	width:24%;
  margin-bottom:2%;
}


.galerie a img{
	width:100%;
	opacity:1;
  transition:all 0.2s linear 0s;
}

.galerie a:hover img{
	opacity:0.6;
}


/* Galerie */
.galerie2{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  background-color:#6db2a1;
}

.galerie2 a{
  width:25%;
}


.galerie2 a img{
  width:100%;
  opacity:0.6;
    transition:all 0.2s linear 0s;
}

.galerie2 a:hover img{
  opacity:1;
}




/* Footer */
footer{border-top:4px solid #6db2a1;}
footer .footertxt{padding:2% 0 !important;}
footer .footertxt a{}
footer .footertxt h3{padding-bottom:15px; margin-bottom:15px; border-bottom: 4px solid #6db2a1; display:block; color:#FFF5EF;}
footer b{font-weight:700;}

.legal{padding:30px 0; background-color:#6db2a1; color:#fff; text-align:center;}
.legal a{color:#fff;}




/* CSS3 Schatten */
header
{-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}



/* ##################################### RESPONSIVE ######################################## */


@media all and (max-width:1023px) {
	body, nav li a{font-size:1rem}
  nav li a{margin-left:14px;}
  .xxlimg .xxlwrapper{padding:30px !important; justify-content:center !important; align-items:center !important;}
  .xxlimg .xxlwrapper a{width:200px !important; height:200px !important; border-radius:100px !important; font-size:1.1em !important;}
}



@media all and (max-width:870px) {
	.logo{float:none; text-align:center; padding-bottom:10px;}
	nav{float:none; margin-top:0; margin-left:2%;}
	nav{display:block;}
	nav ul{display:flex; justify-content:space-around; flex-wrap:wrap;}
	nav li{display:block; width:25%;}
	nav li a{text-align:center; margin:1px; background-color:#6db2a1; color:#fff; padding:8px 0px 8px 0;}
	nav li a:hover{border:1px solid #fff;}
}


@media all and (max-width:767px) {
  .xxlimg .xxlwrapper{flex-direction:column !important;}
  }


@media all and (max-width:599px) {
	footer .footertxt{text-align:center;}
}

@media all and (max-width:540px) {
	nav li a{font-size:0.8rem; font-weight:700;}
  nav li{display:block; width:50%;}
  .galerie a {width: 49%;}
}

@media all and (max-width:480px) {
}



/* ##################################### XXL Bilder ######################################## */
.xxlimg {
	position: relative;
	width:100%;
	height:100%;
    background-image: url(../img/sym-roller-fernwald.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    align-items: flex-end;
}

.xxlbg{
      position:fixed;
      background-image: url(../img/mottys-werkstatt-bg.jpg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width:100%;
      height:100%;
      top:0;
      left:0;
      z-index:-1;
}



.xxlimg .xxlwrapper{
  padding:80px; display:flex; justify-content:flex-end; width:100%;
}

.xxlimg .xxlwrapper a{
  display:block; width:300px; height:300px; border-radius:200px; display:flex; align-items:center; background-color: rgba(46, 59, 66, 0.9); color:#fff; padding:20px; text-align:center; font-size:1.5em; transition: all 0.3s linear 0s;
}

.xxlimg .xxlwrapper a:hover{
  background-color: rgba(46, 59, 66, 1); color:#6cb0a0; text-decoration:none;
}