/*buttony z menu rozwijanym*/
  @media screen and (min-width:768px) {
  #menu{
  display: flex;
  margin-bottom: 15px;
  width:550px;
  margin-left:50px;
  }
}
@media screen and (min-width:922px) {
  #menu{
  display: flex;
  margin-bottom: 15px;
  width:650px;  
  }
}
@media screen and (min-width:1200px) {
  #menu{
  display: flex;
  margin-bottom: 15px;
  width:750px;  
  }
}

@media screen and (min-width:768px) {
.button{
  width:110px;
  height:40px;
  background: #998b32;
  border:#998b32;
  border-radius: 50px;
  color:#fff;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin:auto;
  margin-right: 50px;
  }
 }
@media screen and (min-width:992px) {
 .button{
  width:150px;
  height:45px;
  background: #998b32;
  border:#998b32;
  border-radius: 50px;
  color:#fff;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  margin:auto;
  margin-right: 50px;
 }
}
@media screen and (min-width:1200px) {
  .button{
   width:200px;
   height:50px;
   background: #998b32;
   border:#998b32;
   border-radius: 50px;
   color:#fff;
   font-size: 25px;
   font-weight: 600;
   text-align: center;
   margin:auto;
   margin-right: 50px;
  }
 }


 @media screen and (min-width:768px) {
  .button_1{
    width:110px;
    height:40px;
    background: #4da879;
    border:#4da879;
    border-radius: 50px;
    color:#fff;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin:auto;
    margin-right: 50px;
    }
   }
  @media screen and (min-width:992px) {
   .button_1{
    width:150px;
    height:45px;
    background: #4da879;
    border:#4da879;
    border-radius: 50px;
    color:#fff;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    margin:auto;
    margin-right: 50px;
   }
  }
  @media screen and (min-width:1200px) {
    .button_1{
     width:200px;
     height:50px;
     background: #4da879;
     border:#4da879;
     border-radius: 50px;
     color:#fff;
     font-size: 25px;
     font-weight: 600;
     text-align: center;
     margin:auto;
     margin-right: 50px;
    }
   }
/*koniec buttony z menu rozwijanym*/
   /*exercise buttons*/

  @media screen and (max-width:768px) {
   .button_3{
    width:150px;
    height:45px;
    background: #6d6838;
    border:#6d6838;
    border-radius: 50px;
    color:#fff;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin:auto;
    margin-right: 50px;
   }
  }
    .button_3{
     width:200px;
     height:40px;
     background: #6d6838;
     border:#6d6838;
     border-radius: 50px;
     color:#fff;
     font-size: 18px;
     font-weight: 400;
     text-align: center;
     margin:auto;
     margin-right: 50px;
    }
    @media screen and (max-width:768px) {
      .button_3:hover{
       width:150px;
       height:45px;
       background: #b1a95e;
       border:#6d6838;
       border-radius: 50px;
       color:#fff;
       font-size: 18px;
       font-weight: 400;
       text-align: center;
       margin:auto;
       margin-right: 50px;
      }
     }
       .button_3:hover{
        width:200px;
        height:40px;
        background: #b1a95e;
        border:#6d6838;
        border-radius: 50px;
        color:#fff;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin:auto;
        margin-right: 50px;
       }

    @media screen and (max-width:768px) {
      .button_2{
       width:150px;
       height:45px;
       background: #7e430b;
       border:#7e430b;
       border-radius: 50px;
       color:#fff;
       font-size: 18px;
       font-weight: 400;
       text-align: center;
       margin:auto;
       margin-right: 50px;
      }
     }
       .button_2{
        width:200px;
        height:40px;
        background: #7e430b;
        border:#7e430b;
        border-radius: 50px;
        color:#fff;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin:auto;
        margin-right: 50px;
       }
       @media screen and (max-width:768px) {
        .button_2:hover{
         width:150px;
         height:45px;
         background: #b16e2f;
         border:#7e430b;
         border-radius: 50px;
         color:#fff;
         font-size: 18px;
         font-weight: 400;
         text-align: center;
         margin:auto;
         margin-right: 50px;
        }
       }
         .button_2:hover{
          width:200px;
          height:40px;
          background: #b16e2f;
          border:#7e430b;
          border-radius: 50px;
          color:#fff;
          font-size: 18px;
          font-weight: 400;
          text-align: center;
          margin:auto;
          margin-right: 50px;
         }

    
  
/*end of buttons in exercises*/

 

 .button_tel{
  width:100px;
  height:50px;
  background: #000000;
  color:#fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin:auto;
  }

  h24{
    font-size: 20px;
    font-weight: 300;
    
  }
  
  #footer {
    float: left;
    width: 100%;
    height: 130px;
    padding-top: 20px;
    bottom: 0px;
      position: absolute;
      text-align: center;
    font-size: 13px;
    background-color: #FFFFFF;
  }
  
  #footer a{
      text-decoration: underline;
  }
/*pojemnik z logo w menu*/
.logo{
  background: #fff;
  width:80%;
  height:45px;
  margin:auto;
}
@media screen and (max-width:860px) {
  .logo{
    background: #fff;
    margin-left: 0px;
    width: 50%;
    height: auto; 
    
  }
 }




/*pojemnik z menu wysuwanym w menu*/
.menu{
	width:100%;
  margin:auto;
	margin-right: 300px;
  }
  @media screen and (max-width:860px) {
    .menu{
  display:none
      
    }
   }

/*pojemnik z zaloguj sie w menu*/
@media screen and (min-width:768px) {
.login{
  width:110px;
  height:40px;
  text-align: center;
  padding-top:5px;
  margin-right: 20px;
  border:solid 2px #ecb0b5;
  background:#ecb0b5;
  border-radius: 50px;
  color:#1f1b04;
  font-size:18px;
  }
}
@media screen and (min-width:922px) {
  .login{
    width:150px;
    height:45px;
    text-align: center;
    padding-top:5px;
    margin-right: 20px;
    border:solid 2px #ecb0b5;
    background:#ecb0b5;
    color:#1f1b04;
    font-size:22px;
    }
  }
  @media screen and (min-width:1200px) {
    .login{
      width:200px;
      height:50px;
      text-align: center;
      padding-top:5px;
      margin-right: 20px;
      border:solid 2px #ecb0b5;
      background:#ecb0b5;
      border-radius: 50px;
      color:#1f1b04;
      font-size:25px;
      }
    }







/*pojemnik z lupą w menu*/
.wyszuka{
	width:10%;
  margin: auto;
	float:right;
}
@media screen and (max-width:860px) {
  .wyszuka{
display:none;    
  }
 }


/*pojemnik z panelem wysuwanym w menu*/
.naglowek{
  margin:auto;
  background: #ffffff;
}

 /*nasz hamburger*/  
 .panel{
  background:#161616ce;
  position:absolute;
  width: 100%;
  left: 0;
  height:40%;
  display:none;
  color:#fff;
  z-index: 100;
}
  
 .panel ul{
   text-align: center;
   list-style: none;
   line-height: 2.5rem;
   padding:0;
   margin:0;
 }
 .panel li{
   font-size: 1.5rem;
 }
 .panel li a{
   color:#fff;
   text-decoration: none;
 }
 .panel li a:hover{
   text-decoration: underline;
 }
 .clickme{
   position: absolute;
   z-index: 100;
   right: 1%;
   top:3%;
 }
 @media screen and (max-width:860px) {
  .clickme{
  position: absolute;
  z-index: 100;
  right: 1%;
  top:3%;
  }
 }

 .bar1, .bar2, .bar3 {
     width: 35px;
     height: 5px;
     background-color: #333;
     margin: 6px 0;
     transition: 0.4s;
 }
 .change .bar1, .change .bar2, .change .bar3{
   background-color: #fff;
 }
 .change .bar1 {
     -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
     transform: rotate(-45deg) translate(-9px, 6px) ;
 }
 
 .change .bar2 {opacity: 0;}
 
 .change .bar3 {
     -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
     transform: rotate(45deg) translate(-8px, -8px) ;
 }
 /*koniec naszego hamburgera*/

 /*naglowek na podstronach*/
 @media screen and (min-width:768px) {
  .naglowek1{
  width:100%;
  height:60px;
  background: #1f1b04;
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
 }
}
 @media screen and (max-width:768px) {
  .naglowek1{
display: none;

 }
}

@media screen and (min-width:769px) {
  .naglowek_tel{
display: none;
 }
}
@media screen and (max-width:769px) {
  .naglowek_tel{
  width:100%;
  height:auto;
  background: #1f1b04;
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
  z-index: 99;

 }
}


.menu1{
  color:#fff;
  font-size: 20px;
  font-weight: 700;
  margin-right:60px;
  margin-left: 30px;
  padding-top: 13px;
 }
 @media screen and (max-width:768px) {
.menu1{
  color:rgb(255, 255, 255);
  font-size: 16px;
  font-weight: 500;
  margin-left:10px;
  margin-right: 10px;
  padding-top: 13px;
  width:200px;
  text-align: center;    
 }
} 
.search_engine{
  position:absolute;
  right:3px;
  top:10px;

}
.phone_menu{
  display: flex;
}
.menu2{
background: #9a8b15;
color:#fff;
width:200px;
height:60px;
font-size: 20px;
font-weight: 700;
text-align: center;
padding-top: 13px;
}
.menu4{
background: #5b5b5b;
color:#fff;
width:130px;
height:60px;
font-size: 20px;
font-weight: 700;
text-align: center;
padding-top: 13px;
}










.tematt{
  width: 100%;
}


 @media screen and (min-width:768px) {
  .cont_{
    width:100%;
    display: flex;
    height: auto;
    background: #99bcf0;
    
 }
}
@media screen and (max-width:768px) {
  .cont_{
    width:100%;
    height:auto;
    background: #657996;
 }
}

.tema{
  width:100%;
}

.tematy{
  position: sticky;
  top: 60px;
  left: 0;
}





.lewa_{
width:17%;
background: #657996;
}
@media screen and (max-width:768px) {
.lewa_{
display: none;
 }
}


.srodek_{
  width:83%;
  height:auto;
}
@media screen and (max-width:768px) {
  .srodek_{
width:100%;
height:auto;
background: rgb(255, 255, 255);
 }
}

.baner_1{
  width:100%;
  height:auto;
  display: flex;
}

/*left and right columns in the center column*/
@media screen and (max-width:1200px) {
  .lewica{
width:100%;
background: #fff;
height: auto;
 }
}
@media screen and (min-width:1200px) {
  .lewica{
width:83%;
background: #fff;
height: auto;
 }
}


  @media screen and (max-width:1200px) {
    .prawica{
  display:none;
   }
  }
  @media screen and (min-width:1200px) {
    .prawica{
      width:17%;
      height:auto;
      background: #fff;
   }
  }
/*the end of the left and right columns in the center column*/





@media screen and (min-width:768px) {
  .baner_2{
    width:100%;
    height:auto;
  }
}

.stope{
  background: #14253f;
  width: 100%;
  height:500px;
}

.lacz{
  height:400px;
  width: 100%;
  background:#08fc35;
  
  
  
}