﻿body, html{
  height:100%;
  margin:0;
  font-size:18px;
  font-family:"Times New Roman", Times, serif;
  font-weight:400;
  /*line-height:1.7em;*/
  background-color:transparent;
}

.piccontainer {
  position: relative;
  top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

.picheadline {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: hidden;
	justify-content: center;
	text-align: center;
	color: #fff;
	padding: 10px;
}


h1 {
  position:relative;
  font-family: 'Open Sans', sans-serif;
	line-height: 1.0;
	font-weight: 300;
	font-size: 35px;
	margin-bottom: 22px;
  z-index:50;
}

h2 {
  position:relative;
  font-family: 'Open Sans', sans-serif;
	line-height: 1.0;
	font-weight: 200;
	font-size: 25px;
	margin-bottom: 5px;
  z-index:50;
}


.headline h1{
  position:relative;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 1.5;
  font-weight: 300;
  font-size: 40px;
  margin-bottom: 5px;
  padding-top: 10%;
  z-index:49;
}

.headline h2{
  position:relative;
  font-family: 'Open Sans', sans-serif;
  text-align: justify;
  line-height: 1.0;
  font-weight: 200;
  font-size: 22px;
  margin-bottom: 5px;
  padding-bottom: 1%;
  z-index:49;
}

.headline a{
 color: red;
}

.pimg1, .pimg2, .pimg3{
  position:relative;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}

.pimg1{
  background-image:url('/images/Feederkorbsortiment.jpg');
  min-height:100vh;
  max-width: 100vw;
}

.pimg2{
  background-image:url('/images/pole21000.jpg');
  min-height:100vh;
  max-width: 100vw;
}

.pimg3{
  background-image:url('/images/feederangeln.jpg');
  min-height:100vh;
  max-width: 100vw;
}

.section {
  padding:5px 5px;
  font-family:Arial, Helvetica, sans-serif;
}

.light{
  background-color:#f4f4f4;
  color:black;
  /*background-image: linear-gradient(90deg, #faf319, #fcde67);*/
}

.dark {
  background-color:#282e34;
  color:#ddd;
}

.tabellenspalte td{
  width:80%;
}

.flexwrapper {
  display: block; 
  text-align: left;
  width: 98%;
  padding-left: 1%;
  padding-right: 1%;
}

.flextxt {
    text-align: justify;
  }

.content {
    z-index: 49;
  }


.contenttxt {
  position:relative;
  transform: translateX(-150%);
  transition: transform 0.5s linear;
  padding-left:3%;
  z-index: 49;
}

.contenttxt p{
  position:relative;
  font-size:16px;
  font-family:"Arial", Times, serif;
  text-align: justify;
  z-index: 49;
}

.bounce_right {
  transform: translateX(-150%);
  transition: transform 0.5s linear;
}

.bounce_right img{
  width:100%;
  height:100%;
  padding-left:0%;
  padding-right:0%;
  /*background: #F8F8F8;
  border: solid #BDBDBD 4px;
  box-shadow: 12px 10px 13px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 12px 10px 13px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 12px 10px 13px rgba(0, 0, 0, 0.5);*/
}

.bounce_right p{
  text-align: left;
  padding-left:5px;
}

.bounceright{
  opacity: 1;
  transform: translateX(0);
}

.bounceleft{
  opacity: 1;
  transform: translateX(0);
}

.ptext{
  position:absolute;
  top: 12vh;
  width:100%;
  text-align:center;
}

.ptext .border h1{
  position: relative;
  display: inline-block;
  text-align:center;
  padding: 0.5vw;  
  color:white;
  background-color:green;
  opacity:0.9;
  font-size: 4.2vh;
  line-height: 4.5vh;
  border-radius:1vw;
	border:5px solid darkgreen;
  

}

.ptext .border .trans{
  background-color:transparent;
}

.flexwrapper {
  display: flex;  
  flex-flow: row wrap;
  text-align: left;
  
}

.headline  {
  flex: 0 0 100%;
  font-weight: bold;
}

.flextxt  {
  flex: 1 1 64%;
}

.fleximage {
  flex: 1 1 36%;
}


@media(max-width:600px){

  body, html{
    height:100%;
    width:100%;
     margin:0;
     font-size:18px;
     font-family:"Times New Roman", Times, serif;
     font-weight:400;
     line-height:1.7em;
     background-color:transparent;
   }

  .headline h1{
    position:relative;
    width:96%;
    text-align: center;
    padding-top: 20%;
    padding-left: 2%;
    padding-right: 2%;
    z-index: 49;
  }
  
  .headline h4{
    position:relative;
    width:96%;
    text-align: center;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    z-index: 49;
  }

  .pimg1, .pimg2, .pimg3{
    background-attachment:scroll;
    width:100%
  }

  .ptext .border{
    color:gold;
    padding:0px;
    font-size:16px;
    line-height:2.0em;
    text-align: block;
  }

  .ptext .border h1{
    width: 90%;
  }

  .flexwrapper {
    display: block; 
    text-align: left;
  }

  .flextxt {
    text-align: justify;
  }

  .flextxt h2{
    text-align: left;
    margin-top: 2vh;
  }
 
  .bounce_right img{
    width:95%;
    height:85%;
    text-align: center;
    /*padding-left:5px;*/
  }

  .contenttxt p{
    font-size:20px;
    width:96%;
    padding-right: 2%;
    padding-left: 2%;
  }

  .ptext .border h1{
    top: 10vh;
  }
}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {

  .bounce_right img{
    /*width:35%;*/
    height:auto;
    text-align: center;
    padding-left:5px;
  }

}
