.h33{padding-top:46%;}
.w70{width:70%;}
p.w50{float:left; margin-bottom:30px; padding-right:20px}
@media screen and (max-width: 1000px){
.h33 { padding-top:66%;}
p.w50{padding-right:0px}
.w70{width:100%;}
}
@media screen and (max-width: 700px){
#arch-text {
    float: left;
    padding: 30px 30px;
    margin: 0;
}
}

section.uvod * {transition: all 1s ease; -webkit-transition: all 1s ease;}
  div.benefity-uvod-wrap{position:absolute; right:0; left:0; margin: 0 auto; top:15%; max-width: 700px; }
  div.benefity-uvod-wrap h2 { font-weight:bold; color:white; font-size:40pt;}
  div.benefity-uvod-wrap p { color: white;
    text-align: center;
    background: rgb(4,66,41);
    padding: 150px 120px;
    line-height: 1.4rem;
    border-radius: 100%;}
  
  #historia {float:none; padding-top:61%; background-image:url(../images/o-projekte/historia.jpg); background-attachment:fixed;}
  section.cyklo > p { display:none;}
  

   @media screen and (max-width:1400px){
  #vlak { padding-top: 8% !important;}
  }  
  @media screen and (max-width:1300px){
  #vlak { padding-top: 10% !important;}
  }
  @media screen and (max-width:1100px){
    #vlak { padding-top: 13% !important;}
  }
  @media screen and (max-width:1000px){
  div.benefity-uvod-wrap {top: 15%;}
  }
  @media screen and (max-width:900px){
  #cyklotrasy:before {bottom: -26% !important;}
  #vlak { padding-top: 15% !important;}
  }
  @media screen and (max-width:800px){
  #cyklotrasy:before {bottom: -22% !important;}
  #vlak { padding-top: 17% !important;}
  }
  
  @media screen and (max-width:700px){
  
 
   div.benefity-uvod-wrap {top: 12%;}
   #cyklotrasy:before {bottom: -18% !important;}
  }
  @media screen and (max-width:640px){ 
   #cyklotrasy:before {bottom: -15% !important;}
  }
  
  @media screen and (max-width:600px){  
  
   #cyklotrasy:before {bottom: -9% !important;}
  }
  @media screen and (max-width:500px){
   #historia{padding-top:220%;}
   #historia:after {bottom: -8% !important;}
  div.benefity-uvod-wrap h2 { font-size:34pt;}
  }
  @media screen and (max-width:460px){
   #historia{padding-top:250%;}
   #historia:after {bottom: -7% !important;}
   div.benefity-uvod-wrap p {padding:40px 20px 40px 20px;}
   #cyklotrasy:before {bottom: -5% !important;}
  }
  @media screen and (max-width:400px){
   #historia{padding-top:300%;}
   #historia:after {bottom: -6% !important;}
  }
  @media screen and (max-width:380px){
   #historia{padding-top:340%;}
   #historia:after {bottom: -5.2% !important;}
  }
  @media screen and (max-width:380px){
   #historia{padding-top:380%;}
   #historia:after {bottom: -4.8% !important;}
  }  
  
  #cyklotrasy:before {
    position: absolute;
    /* background-size: auto; */
    content: "";
    bottom: -33%;
    left: 0;
    right: 0;
    padding-top: 35%;
    z-index: 6;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
    background-image: url(../images/pasiky/pasik_roh.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}
    
    #historia:after {
    position: absolute;
    /* background-size: auto; */
    content: "";
    padding-top: 35%;
    left: 0;
    right: 0;
    bottom: -31%;
    z-index: 7;
    background-image: url(../images/pasiky/pasik_roh.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
  }
  

  
  .cyklo{ padding-top:70px;}
  #vlak {padding-top:5%;}

  h2{ opacity:0;}
  h3{
      text-align: center;
      font-weight: bold;
      color: rgb(127,71,44);
  }

  @media screen and (max-width:1650px){
    #historia {
      padding-top: 75%;
    }
    #historia:after {
      position: absolute;
      padding-top: 40%;
    }
  }

  @media screen and (max-width:1500px){
    #historia {
      padding-top: 84%;
    }
    #historia:after {
      position: absolute;
      padding-top: 43%;
    }
  }

  @media screen and (max-width:1400px){
    #historia {
      padding-top: 84%;
    }
    #historia:after {
      position: absolute;
      padding-top: 43%;
    }
  }

  @media screen and (max-width:1300px){
    #historia {
      padding-top: 94%;
    }
    #historia:after {
      position: absolute;
      padding-top: 46%;
    }
  }

  
  @media screen and (max-width:1100px){
    #historia {
      padding-top: 104%;
    }
    #historia:after {
      position: absolute;
      padding-top: 49%;
    }
  }

  @media screen and (max-width:1000px){
    #historia {
      padding-top: 120%;
    }
    #historia:after {
      position: absolute;
      padding-top: 54%;
    }
  }

  @media screen and (max-width:900px){
    #historia {
      padding-top: 130%;
    }
    #historia:after {
      position: absolute;
      padding-top: 57%;
    }
  }

  @media screen and (max-width:800px){
    #historia {
      padding-top: 150%;
    }
    #historia:after {
      position: absolute;
      padding-top: 63%;
    }
  }

  @media screen and (max-width:700px){
    div.benefity-uvod-wrap p {
      border-radius: unset;
      padding: 30px 30px;
    }
    #historia {
      padding-top: 120%;
    }
    #historia:after {
      position: absolute;
      padding-top: 54%;
    }
    
  }

  @media screen and (max-width:600px){
    #historia {
      padding-top: 150%;
    }
    #historia:after {
      position: absolute;
      padding-top: 63%;
    }
    
  }

  @media screen and (max-width:575px){
    #historia {
      padding-top: 180%;
    }
    #historia:after {
      position: absolute;
      padding-top: 73%;
    }
    
  }

  @media screen and (max-width:500px){
    #historia{padding-top:220%;}
    #historia:after {bottom: -8% !important; padding-top: 34%;}

   }
   @media screen and (max-width:460px){
    #historia{padding-top:250%;}
    #historia:after {bottom: -7% !important;}
   }
   @media screen and (max-width:400px){
    #historia{padding-top:300%;}
    #historia:after {bottom: -6% !important;}
   }
   @media screen and (max-width:380px){
    #historia{padding-top:340%;}
    #historia:after {bottom: -5.2% !important;}
   }
   @media screen and (max-width:380px){
    #historia{padding-top:380%;}
    #historia:after {bottom: -4.8% !important;}
   }