@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap');
@import url(normalize.css);
@import url(all.min.css);
@import url(lightbox.min.css);
@import url(flickity.min.css);

audio, canvas, progress, video {
    width: 100%;
}
/* General Settings - Allgemeine Formatierung für alle Geräte*/
*{
box-sizing:border-box;
}
.duenn{font-weight:normal;}

figure{margin:0 Imp !important;}
body {
  color: #333;
  background: white;
  -webkit-font-smoothing: antialiased;
  font-family: 'Raleway', sans-serif;
  font-size:1em;
}


#recipe a{color:#fff !important;}
.hero .innerbox h1{
font-family:'Arimo', sans-serif;
}

h2{
	text-align:center;
	text-transform:capitalize;/*jedes Wort mit Grossbuchstaben*/
	font-size:1.5em;/*24px : 16=*/
	letter-spacing:1px;
}
h3{
	text-transform:capitalize;/*jedes Wort mit Grossbuchstaben*/
	font-size:1.1875em;/*19px:16=*/
	letter-spacing:1px;
	font-weight:300;
}
p{
line-height:1.5em; /*2 em ist voreingestellt*/
margin:1em 0;
}


nav a, footer a{
	
	text-decoration:none;
}


main a{
color: #000;	
}

article a{
color: #000;	
}


.flex{
	display:flex;
}


#posts p{
margin-top:0;
}

.bilderbox {
	margin-top:5px;
  width: 50px !important;
  height:50px !important;
    object-fit: cover !important;
margin-right:10px;
}

ul,ol{
	list-style-type:none;
	padding:0;
}

.fullwidth{
	width:100%;
}

/*accordion ////////// */
.accordion {
  background-color: #901B4F;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom:2px;
}
.active, .accordion:hover {
  background-color: #444;
    color: #fff;
}
.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
    margin:0;
}
.panel #contactbutton{
padding-bottom:20px;
width:100%;
text-align:center;
color:#901B4F;
/*border:1px solid #f00;*/
}
*:active,*:focus{
outline:0;
outline:none;        
}
/*css-raster-spalten-layout*/
.row {
  overflow:hidden;
  /*border:1px solid #0f0;*/
}
.halbe{
	width:48%;	
	margin-right:4%;
	float:left;
}
.drittel{
	width:30.666%;	
	margin-right:4%;
	float:left;
	/*border:1px solid #f00;*/
}
.zweidrittel{
	width:65.333%;/*2x30.666 + 4=*/	
	margin-right:4%;
	float:left;
	/*border:1px solid #f00;*/
}

.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child{
	margin-right:0%;
}

.innerbox {
  padding: 50px 2%;
  max-width: 940px;
  margin: 0 auto;
  position: relative;
  /*border:1px solid #0f0;*/
}

header .innerbox {
  padding: 0 2%;
}
/* main .innerbox{
padding:70px 20px;
(padding:oben/unten links/rechts;)
}*/


#about-me .innerbox {
  padding: 10px 0;
}

/* header //////////////////////////////////////////////  */
/*Formatierung des Headers beim Start/Anfang*/
.main_h {
  position: fixed;
  top:0;
  left:0;
  /*Höhe des headers für die mobile Ansicht reduzieren und später mit der open-nav-klasse wieder aus 400px mit hilfe des index.js-scriptes erhöhen*/
  max-height: 70px;  
  overflow: hidden;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  background:transparent; /*oder none oder Farbe*/
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding-bottom: 6px;
  opacity: 1;
}

/*
Formatierung des Headers beim Scrollen mit der Mouse ab einer gewissen Scroll-Höhe wird dem Header zu der class="main_h" noch eine weitere class sticky hinzugefügt class="main_h sticky"
*/

.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  opacity: 1; /*nicht notwendig, da in der main_h schon erwähnt wurde*/
  top: 0px;
  border-bottom: 1px solid gainsboro; /*gainsboro Trennstrich*/
}

/*
Formatierung des Headers in der mobilen Ansicht. Durch Hinzufügen einer weiteren class="open-nav" wird der nav-toggle auf- und zugeklappt
class="main-h open-nav"
*/
.open-nav {
  max-height: 400px !important;
  background-color: rgba(255, 255, 255, 0.93);/*responsive Ansicht*/
  border-bottom: 1px solid gainsboro;
}

.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}


.logo {
  width: 80px;
  float: left;
  display: block;
  margin-top: 18px;
  
	/*border:1px solid #f00;*/
}
.logo img{
  width: 100%;
}

.sticky .logo {
color: #8f8f8f;
}


nav {
  float: right;
}

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

nav ul li {
  display: inline-block;
  margin-left: 35px;
  line-height: 1.5em;
}
/*Schrift Navigation//// */
nav ul li a{ 
  /*color: #888888;*/
  color: #444;
  text-transform: uppercase;
  font-size: 1em; /*12:16=0,75em*/
}

#aktiv{
	color:#901a50;
}

.sticky nav ul li a {
 color: #888888;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -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: 6px;
  border-radius: 1000px;
  background: #8f8f8f;
  display: block;
}


/* Hero-Großbild-Bereich ////////////////////////////   */

.hero {
  position: relative;
  background: url(../bilder/higru/webpage2.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  color: #fff;
  letter-spacing: 2px;
}

.hero .innerbox{
	height:500px;
	height:100vh;
}

.hero h1 {
	color:#901a50;/*Frank Jap Lim*/
  font-size: 2em;/*40px:16*/
  letter-spacing: 8px;
  font-weight: 400;
  line-height: 1em;
  margin:80;
  position:absolute;
  right:2%;/*wegen padding-left der innerbox*/
  top:60%;
  transform:translate(0,-40%);
  text-align:right;
}

.hero h1 span {
  font-size:0.6em;
  color: #CBCD00; /*#jappi*/
  font-weight:normal;
  font-style:italic;

}

.mouse {
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #901b4f;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform:translateX(-50%); 
  /*margin-left: -13px; oder  transform:translate(-50%,0);*/
}
.mouse span {
  display: block;
  margin: 6px auto;
  width: 6px; /*Stärke des Punktes in der Mouse*/
  height: 6px;
  border-radius: 4px;
  background: #901b4f;
  /*border: 1px solid transparent;*/
  -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);
  }
}

.farbe1{
background-color:#f5f5f2;	
}
.farbe2{
background-color:#ccc;		
}


/* ///////////////// unterseiten formatierung /////////////////////////////   */
#hero-unterseiten{
	height:300px; /*fallback für ältere browser*/
	height:40vh;
	background-color:#FDFEF9;
	background-position:center;
	position:relative;
}

#hero-unterseiten h1{
	position:absolute;
	/*absolute Mitte des eigenen Elternelements*/
	top:190%;
	left:32%;
	/*Korrektur zur absoluten Mitte des eigenen Elements*/
	transform:translate(-50%,-50%);
	color:#901B4F;
	/*text-shadow:2px 2px 2px #000;*/
	font-weight:400;
		font-size:2.2em;
}


#streetparade .innerbox h1{
	text-align:center;
    font-size: 2em;
    margin: 0.67em 0;
}

.productdeveloper #hero-unterseiten{
	background-image:url(../bilder/higru/webpage-serious.jpg);
	background-size:cover;
}

.passion #hero-unterseiten{
	background-image:url(../bilder/higru/webpage-private.jpg);
	background-size:cover;
}

/*training ////////// */
.innerbox .training img{
  max-width:100%;
}

/* button /////////////////////////////  */
.button{
 display:inline-block; /*a inline-element, padding (links/rechts)*/
 background:#fff;
 color:#901B4F;
 border-radius: 10px;
 padding:11px 30px;
 letter-spacing:2px;
 text-transform:uppercase;
 font-weight:600;
 font-size:0.8em;
margin-top:1.5em;
-webkit-transition: all 0.5s ease-in-out 0.2s; /*css3generator.com*/
-moz-transition: all 0.5s ease-in-out 0.2s;
-ms-transition: all 0.5s ease-in-out 0.2s;
-o-transition: all 0.5s ease-in-out 0.2s;
transition: all 0.5s ease-in-out 0.2s;
text-decoration:none !important;
}

.button:hover{
 color: #fff;
 background-color: #454545;
}


.webdesign .halbe{
padding:20px 0;
  border-top: 1px solid rgba(255,255,255,0.2); /*Trennstrich*/
}


/*Skillbars /////////// https://codepen.io/search/pens?q=skillbar */
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    color: #777;
    text-transform: capitalize;
    letter-spacing: 2px;
    font-size: 11px;
}

.progress {
    height: 4px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #ccc;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #901b4f;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

/*what-i-do ///////////////*/
#what-i-do .halbe{
	background:#fff;
	border: 1px solid #eee;
	padding: 20px;
	text-align:center;
}

.iconbox {
    background: #901B4F;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-block;
    padding-top: 18px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#what-i-do .halbe:hover .iconbox {
    background: #444;
    transform:rotateY(180deg); /*CSS transform*/
        -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.iconbox i{
    color:#fff;
    font-size:2em;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#what-i-do .halbe:hover .iconbox  i{
    transform:rotateY(-180deg);
}

/*About Me ////////////////  */
ul#about-me{
overflow:hidden;
padding:0;
}

/*Kind-selektor > gilt nur für die direkten li-Kinder und nicht für die verschachtelten listen-Kinder  */
ul#about-me > li{
width:48%;
margin-right:4%;
float:left;
text-align:center;
}

ul#about-me li:last-child{
margin-right:0%;    
}
ul#about-me li img{
width:100%;
/*-webkit-filter: grayscale(1); https://blog.kulturbanause.de/2015/03/css-filter-effekte/
filter: grayscale(1);*/
}

ul#about-me figure{
margin:0;
/*border:1px solid #f00;*/
}

ul#about-me figcaption{
padding-top:1em;
}

ul#about-me figcaption span{
text-transform:uppercase;
letter-spacing:4px;
}

.overlaybox{
position:relative;
line-height:0;
}

.overlay{
background:#000;
background:rgba(0,0,0,0.7);
position:absolute;
top:0;
left:0;
/*right:0;
bottom:0;*/
width:100%;
height:100%;
opacity:0;
-webkit-transition: all 0.5s ease-in-out ;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.overlay:hover{
opacity:1;
}

.overlaycontent{
line-height:1.5em;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:80%;
color:#fff;
}

.social{
	margin-top:1.5em;
}
.social li{
	display:inline-block;
}
.social li a{
	color:#fff;
	color:rgba(255,255,255,1);
	font-size:1.5em;
	margin:0 0.3em;
	-webkit-transition: all 0.5s ease-in-out ;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.social li a:hover{
	color:rgba(255,255,255,0.5);
}

/*Schnellkontakt ////////////////*/
.schnellkontakt{
	background:#901b4f;
	color:#fff;
}

.schnellkontakt .drittel{
	text-align:right;
}


/*curriculumvitae //////////////////////////// */
#curriculumvitae .innerbox{
width:100%;
/*border:1px solid #f00;*/
}

#curriculumvitae .overlaycontent{
color:#CBCD00;
}

.documents li a{
	color:#fff;
	color:rgba(255,255,255,1);
	font-size:1em;
	-webkit-transition: all 0.5s ease-in-out ;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.documents li a:hover{
	color:rgba(255,255,255,0.5);
}


/*recipe //////////////////////////// */
ul#recipe-indonesia{
overflow:hidden;
padding:0;
}
/*
 kind-selektor
 gilt nur für die direkten li-Kinder und nicht für verschachtelte listen-kinder 
 */
ul#recipe-indonesia > li{
width:30.666%;
padding:10px; /*Abstand der Recipe-boxen*/
margin-right:4%;
float:left;
text-align:center;
}
	
ul#recipe-indonesia li:nth-child(3n){
margin-right:0%;
}
ul#recipe-indonesia li img{
width:100%;
}

ul#recipe-indonesia figure{
margin:0;
}
ul#recipe-indonesia figcaption{
padding-top:1em;
}
ul#recipe-indonesia figcaption span{
text-transform:uppercase;
letter-spacing:4px;
}

ul#recipe-indonesia .overlaycontent{/*Schrift*/
line-height:1,5em;
font-size:15px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:80%;
color:#fff;
/*border:1px solid #0f0;*/
}



/* Slider / PROJEKTE///////////////////////////////////////////*/
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  width:80%;
margin:auto;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-loading .slick-list {
  background: white url(./ajax-loader.gif) center center no-repeat;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  zoom: 1;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

/* slide-div im carousel*/
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

.slick-slide img {
  display: block;
}
.slick-slide img.slick-loading {
  background: white url(./ajax-loader.gif) center center no-repeat;
  padding-bottom: 100%;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}


/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  margin-top: -20px;
  padding: 0;
  border: none;
  outline: none;


}
.slick-prev:focus,
.slick-next:focus {
  outline: none;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before, .slick-next:before {
  font-size:40px;
  line-height: 1;
  color: #901b4f;
  opacity: 0.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
.slick-prev:before {
  content: '\2770 ';

}

.slick-next {
  right: -25px;
}
.slick-next:before {
  content: '\2771 ';

}

/* Dots */
.slick-slider {
  margin-bottom: 30px;
 

}

.slick-dots {
  position: absolute;
  bottom: -45px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0px;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0px 5px;
  padding: 0px;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  cursor: pointer;
  outline: none;
}
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '\2022';
  width: 20px;
  height: 20px;
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: 0.75;
}


.bildbox {
  margin: 10px;
  padding: 0;
  position: relative;
  /*border: 1px solid #3498db;*/
}

.bildbox img{
  width:100%;
}


/* Dots */
.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -45px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0px;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0px 5px;
  padding: 0px;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  cursor: pointer;
  outline: none;
}
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '\2022';
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  color: red;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: 0.75;
}


/*testimonial slider/carousel ////////*/
.main-gallery{
	background:#f9f9f9;
}


/* Passion / Outdoor ///////////////*/

#outdoor .innerbox{
  padding: 50px 0 0;
  max-width: 100%;
}

#outdoorgallery{
overflow:hidden;
margin-bottom:0;
}

#outdoorgallery li{
width:25%;	
float:left;
}

#outdoorgallery li img{
width:100%;		
}


#outdoorgallery figure{
	margin:0;
	position:relative;
	line-height:0;
}

#outdoorgallery figcaption{
	background:#000;
	background:rgba(0,0,0,0.7);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
	line-height:1.5em;
}

#outdoorgallery figcaption:hover{
	opacity:1;
}

/* neu von work*/

#outdoor .container{
  padding:50px 0 0;
  max-width:100%;
  /*border:1px solid #f00;*/
}
#outdoor li:last-child{/*bei 9 Bilder*/
display:none;
}

.figcaption-box{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	color:#fff;
	text-transform:uppercase;
	letter-spacing:2px;
}
.figcaption-box .project{
    display:block;    
    background:#fff;
    color:#000;
    padding:5px 15px;
    margin-bottom:5px;
    transform:translateY(-40px);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity:0;    
}
.figcaption-box .category{
    display:block;    
    transform:translateY(40px);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity:0;        
}

figure:hover .figcaption-box .project{
    transform:translateY(0);
    opacity:1;    
}
figure:hover .figcaption-box .category{
    transform:translateY(0);
    opacity:1;    
}


/*slideshow container////Productdeveloper////////////////////////*/

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

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

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: 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: rgba(0, 0, 0, 0.8);
}

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

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}



/* kontaktformular ///////////////////////////////////////////  */

/*
Attribut-Selektoren überprüfen nicht das Element, sondern Eigenschaften/Attribute des Elementes
input[]
das zuüberprüfende Attribut/Eigenschaft wird in der eckigen Klammer als HTML-Code abgerufen
<input type="text"> und so abgerufen: input[type="text"]
 mac alt+5(eckige auf) alt+6(eckige zu) für eckige klammer
 pc altgr+8(eckige auf) altgr+9(eckige zu) für eckige klammer
*/


#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular textarea{
	background:#f9f9f9;
	padding:0.625em;
	border:1px solid #eee;
	/*text-transform:capitalize;*/
}

/*:focus beim Anklicken erscheint ein farblicher Rahmen und Hintergrund wird ebenfalls geändert*/
#kontaktformular input[type="text"]:focus,
#kontaktformular input[type="email"]:focus,
#kontaktformular textarea:focus{
	background:#fff;
	border:1px solid #f90;
/*
verwirft die Outline bei Chrome und Mac-Firefox beim Setzen des Curors in die Eingabefelder:
*/
	outline:0;
	outline:none;

}

#kontaktformular textarea{
width:100%;
height:250px;	
}
#kontaktformular input[type="submit"]{
border:0;
margin:0;
}

/*posts /////////////////////*/

#posts{

}
#posts article{
overflow:hidden;
border-bottom:1px solid rgba(0,0,0,0.1);	
padding-bottom:40px;
padding-top:40px;
}

#posts li:first-child article{
padding-top:0;
}
#posts li:last-child article{
border-bottom:0;	
}

#posts h4{
margin-top:0;
color:#a2a2a2;
font-size:0.8em;
}


/* responsive videos//////////*/
/* iframe//////////*/
.embed-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  /* padding-top: 75%; /* 4:3 Aspect Ratio */
  /* padding-top: 66.66%; 3:2 Aspect Ratio */
  /*padding-top: 62.5%;  8:5 Aspect Ratio */
  /*padding-top: 100%;  1:1 Aspect Ratio */
}

/* Then style the iframe to fit in the container div with full height and width */
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* html5video///*/
video {
   width: 100%;
   height: auto;
}


/*footer /////////////////////*/
footer{
	background:#222;
	text-align:center;
}

footer .innerbox{
overflow:hidden;
/*
den überlauf der gefloateten Kinder(#rechtliches / #social)  im übergeordnetem Elternelement(innerbox )abfangen und die Höhe auslesen
*/
}

ul#rechtliches{
padding:0;
/*float:left;*/
}
ul#rechtliches li{
display:inline;
}

ul#rechtliches li a{
margin-right:15px;
color:#fff;/*alter Browser*/
color:rgba(255,255,255,1);/*neuer Browser*/
	-webkit-transition: all 0.5s ease-in-out ;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

ul#rechtliches li a:hover{
color:rgba(255,255,255,0.4);/*neuer Browser*/
}


footer .social{
	margin:0;
}

footer .social li a{
	font-size:2.5em;
	margin:0 0.9em;
}

/*Scroll to top button //////////// */

#scroll-to-top-button{
	border:1px solid #777;
  background-color:#901b4f;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
  opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000; /*Stapelreihenfolge sehr hochstellen, damit kein weiteres positioniertes Element beim Scrollen auf den scroll-to-top button aufgeschichtet/draufgelegt/überdeckt*/
  font-size:3em;
  color:#fff;
}

#scroll-to-top-button:hover {
  cursor: pointer;
  background-color: #901B4F;
}

#scroll-to-top-button.show {
  opacity: 1;
  visibility: visible;
}

/* Breakpoint / CSS-Weiche  ////////////// */
@media only screen and (max-width: 1234px) { /*max-width!*/
/*	.innerbox{
		border:1px solid #f00;
	}*/
	#outdoorgallery li{
	width:33.3333%;
	}
	#outdoorgallery li:last-child{
	display:inherit;
	}
	
	    .hero {
        background: url(../bilder/higru/webpage.jpg) no-repeat center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        }
	
	
}/* / bix 1234px*/

/* Breakpoint / CSS-Weiche  ////////////// */
@media only screen and (max-width: 1024px) {

	#outdoorgallery li{
	width:50%; /**/
	}
	#outdoorgallery li:last-child{
	display:none;
	}

}/* / bix 1024px*/


/* Breakpoint / CSS-Weiche  ////////////// */
@media only screen and (max-width: 766px) {
	
		.main_h {
		
			/*overflow:hidden;
			max-height:70px;*/
		  }
		.logo {
		float: none;
		margin-top:0;
		  }

		nav {
		width: 100%;
		  }  
		nav ul {
		padding-top: 10px;
		margin-bottom: 22px;
		float: left;
		text-align: center;
		width: 100%;
		}  
		nav ul li {
		width: 100%;
		padding: 7px 0;
		margin: 0;
		}  
		.mobile-toggle {
		display: block;
		}

#hero-unterseiten h1{
	position:absolute;
	/*absolute Mitte des eigenen Elternelements*/
	top:140%;
	left:35%;
	/*Korrektur zur absoluten Mitte des eigenen Elements*/
	transform:translate(-50%,-50%);
	color:#901B4F;
	/*text-shadow:2px 2px 2px #000;*/
	font-weight:200;
		font-size:2em;
}

ul#about-me > li{
width:100%;
margin-right:0;
float:none;
text-align:center;
}

ul#recipe-indonesia > li{
width:100%;
margin-right:0;
float:none;
text-align:center;
}

.webdesign .halbe{
  border-top: none; /*Trennstrich*/
}

.videoprojekt{
  border-bottom: 1px solid #901B4F;
}

/* hero //////*/
.hero {
  font-size:0.9em;
}

		.hero h1{
		  background:#fff;
		  background:rgba(255,255,255,0.4);
		  padding:0.3em;
		}


		.halbe,.drittel,.zweidrittel{
			width:100%;	
			margin-right:0%;
			float:none;
			/*border:1px solid #000;*/
		}
			#news .halbe:first-child{/*#curriculumvitae*/
				margin-bottom:4em;
			}

			#what-i-do .row,
			#schnellkontakt .row{
				width:80%;
				margin:auto;			
			}
			
			#what-i-do .halbe{
				margin-bottom:1em;			
			}

			#what-i-do .halbe:last-child{
				margin-bottom:0;			
			}


#hero-unterseiten h1{
	position:absolute;
	/*absolute Mitte des eigenen Elternelements*/
	top:160%;
	left:32%;
	/*Korrektur zur absoluten Mitte des eigenen Elements*/
	transform:translate(-50%,-50%);
	color:#901B4F;
	/*text-shadow:2px 2px 2px #000;*/
	font-weight:180;
		font-size:1.8em;
}


/* About me ///////////home // recipe-indonesia /////////////CV */*/
		ul#about-me #recipe-indonesia{
		width:60%;
		margin:auto;
		}


		ul#about-me #recipe-indonesia > li{
		width:100%;
		margin-right:0%;
		margin-bottom:2.2em;
		float:none;
		}

		.overlay{
		left:50%;
		width:50%;
		/*right:0;
		height:100%;*/
		opacity:1;
		}

		#schnellkontakt .drittel{
			text-align:left;
		}
		
	
/* outdoorgallery ///////////*/
	#outdoorgallery{
	margin:0 2% 0;
	/*width:80%;
	margin:auto;*/
	}

	#outdoorgallery li{
	width:49%;
	border:1px solid #eee;
	padding:0.625em;
	margin:0 2% 2% 0;
	}

	#outdoorgallery li:nth-child(3n){
	margin-right:0;
	}


	#outdoorgallery figcaption{
		background:#fff;
		background:rgba(0,0,0,0.0);
		position:static;
		opacity:1;
	}


	.figcaption-box{
		position:static;
		transform:translate(0,0);
	}

	.figcaption-box .project{
		padding:10px 0 0;
		margin:0;
		transform:translateY(0px);
		opacity:1;    
	}
	.figcaption-box .category{
		transform:translateY(0px);
		opacity:1;
		color:#f90;
		padding:0;
		margin:0;
	}
	/*#kontaktformular*/
	#kontaktformular input[type="text"]{
	margin-bottom:1em;
	}
	
	footer .social li a{
	font-size:1.7em;
	margin:0 0.5em;
	}
}/* / bix 766px*/

@media only screen and (max-width: 480px) {
		/*.innerbox{
			border:1px solid #f00;
		}*/

#hero-unterseiten h1{
	position:absolute;
	/*absolute Mitte des eigenen Elternelements*/
	top:140%;
	left:30%;
	/*Korrektur zur absoluten Mitte des eigenen Elements*/
	transform:translate(-50%,-50%);
	color:#901B4F;
	/*text-shadow:2px 2px 2px #000;*/
	font-weight:160;
		font-size:1.2em;
}

            .overlay{
            left:0;
            top:80%;
            height:20%;
            width:100%;
            opacity:1;
            }                
            .overlaycontent p{
            display:none;
            }    
            .overlaycontent .social{
            margin-top:0;
            }    

            .overlaycontent .cv{
            margin-top:0;
            }    

            .overlaycontent .menue{
            margin-top:0;
            }    

			#outdoorgallery li{
			width:100%;
			margin:0 0 2% 0;
			float:none;
			}


		#scroll-to-top-button{
		  width: 30px;
		  height: 30px;
		  font-size:1.7em;
		}
}