html{
  scroll-behavior: smooth;
  padding: 5px;
}

body{
  font-family: Arial;
  background: repeating-linear-gradient(197deg, white 33%, #f4f4f4 66%);
  max-width: 1260px;
  margin: 0 auto;
}

.home-page{
  animation: animacja 3s ease;
}
  
header{
  text-align: center;
  text-shadow: 2px 1px gray;
  width: inherit;
}

.subtitle{
  background-color: #96c21f;
  color: white;
  padding: 10px; 
  text-shadow: 1px 1px gray;
}
  
h2{
  text-align: center;
  font-size: 28px;
}
  
.address h2{
  text-align: center;
}
  
.four-three{
  width: 293px;
  height: 220px;
  border: 1px solid white;
}
  
.three-four{
  width: 165px;
  height: 220px;
  border: 1px solid white;
}
  
.three-two{
  width: 330px;
  height: 220px;
  border: 1px solid white;
}
  
.menu{
  text-align: center;
  font-size: 28px;
}
  
.buttons{
  display: flex;
  justify-content: center;
}
  
.button{
  border: 2px solid green;
  text-decoration: none;
  color: black;
  transition: background-color 0.5s, color 0.5s;
  padding: 8px;
}

.right{
  border-left: none;
}
  
.button:hover{
  color: white;
  background-color: #96c21f;
}
  
.button:focus{
  outline: none;
  background-color: #96c21f;
  color: white;
}
  
.button-middle{
  border: 2px solid green;
  border-right: none;
  border-left: none;
  text-decoration: none;
  color: black;
  transition: background-color 0.5s, color 0.5s;
  padding: 8px;
}
  
.button-middle:hover{
  color: white;
  background-color: #96c21f;
}
  
.button-middle:focus{
  outline: none;
  background-color: #96c21f;
  color: white;
}
  
.address{
  background-color: none;
  padding: 0 10px 0 10px;
}
  
.address ul{
  list-style: none;
  padding: 0;
}
  
.address li{
  margin-bottom: 10px;
}
  
.address-icon{
  height: 16px;
  width: 16px;
  border: none;
  margin-left: 0;
  padding: 3px;
  vertical-align: middle;
}
  
.logo{
  height: 72px;
  width: 367px;
}
  
.link{
  color: black;
  text-decoration: none;
}
  
.link:hover{
  text-decoration: underline;
  outline: none;
}					
  
.link:focus{
  text-decoration: underline;
  outline: none;
}
  
.photos{
  display: flex;
  overflow-x: auto;
}
  
.photos img{
  border-radius: 20px;
}
  
.menu-with-address{
  margin: 50px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
  
.space{
  margin-right: 40px;
}
  
@keyframes animacja{
  0%{
  opacity: 0;
  }
  100%{
  opacity: 1;
  }
}
  
footer{
  text-align: center;
}

.price{
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  }
  
.price b{
  font-size: 20px;
  margin-top: 7px;
}
  
.center{
  text-align: center;
}
  
.center table{
  margin: 0 auto 17px;    
}
  
table, th, td{
  font-size: 22px;
  border: 2px solid green;
  text-align: center;
  border-collapse: collapse;
  padding: 3px;
  transition: background-color 0.5s;
  margin-bottom: 17px;
}
  
.button-table{
  color: black;
  text-decoration: none;
  transition: color 0.5s;
}
  
.button-table:hover{
  color: white;
}
  
.button-table:focus{
  outline: none;
  text-decoration: underline;
}
  
td:hover, th:hover{
  background-color: #96c21f;
  color: white;
}
  
.return{
  color: black;
  text-decoration: none;
  position: absolute;
  top: 0;
}
  
.return:hover{
  text-decoration: underline;
}
  
.return:focus{
  outline: none;
  text-decoration: underline;
}

.devices{
  max-width: 1260px;
  margin: 0 auto;
  overflow: auto;
  position: relative;
}

.devices h2{
  text-align: center;
}

h3{
  margin-bottom: 4px;
}

.devices p{
  margin-top: 6px;
}

ul{
  list-style: none;
  padding-left: 0;
}

.photo{
  border: 2px solid #96c21f;
  box-shadow: 0 0 20px gray;
  margin-right: 30px;
}

#rebak-spalinowy{
  height: 240px;
  width: 320px;
}

#rebak-elektryczny{
  height: 240px;
  width: 180px;
}

#luparka{
  height: 240px;
  width: 180px;
}

#agregat{
  height: 210px;
  width: 280px;
}

#zageszczarka{
  height: 200px;
  width: 300px;
}

#pompa{
  height: 240px;
  width: 180px;
}

#niwelator{
  height: 240px;
  width: 180px;
}

#wertykulator{
  height: 240px;
  width: 180px;
}

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  margin-bottom: 30px;
}

.devices .text{
  background-color: #96c21f;
  color: white;
  text-shadow: 1px 1px gray;
  padding: 0 10px;
  box-shadow: 0 0 20px gray;
  border: 1px solid #343434;
  width: 60%;
}

.zoomed{
  font-size: 20px;
  cursor: pointer;
  width: 70%;
}

.zoomable:hover{
  cursor: pointer;
  transform: scale(1.1);
  transition: 0.5s;
}

.firm{
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
}
  
.firm p{
  margin: 6px;
}
  
.firm .text{
  width: 50%;
  max-height: 100%;
  background-color: #96c21f;
  color: white;
  font-size: 20px;
  box-shadow: 30px 30px 20px gray;
  text-shadow: 1px 1px gray;
  text-align: justify;
  padding: 4px;
  margin: 0 auto;
}

@media screen and (max-width: 767px){

  h2{
    font-size: 21px;
  }

  .home-page h2{
    font-size: 30px;
  }

  header{
    font-size: 18px;
  }

  .menu-with-address{
    flex-direction: column;
    align-items: center;
  }

  .photos{
    width: 70%;
    margin: 0 auto;
  }

  .buttons{
    flex-direction: column;;
  }

  .button-middle{
    border: none;
    border-right: 2px solid green;
    border-left: 2px solid green;
  }

  .address{
    margin-top: 30px;
    font-size: 18px;
  }

  .address li{
    margin: 3px;
  }

  .return{
    font-size: 11px;
    width: 80px;
  }

  .right{
    border-left: 2px solid green;
    border-top: none;
  }

  .devices .text{
    width: 90%;
  }

  .devices img{
    margin: 0 auto 10px;
  }

  .item{
    flex-direction: column-reverse;
    width: 100%;
    margin: 60px auto 0;
  }

  .firm .text{
    width: 80%;
    font-size: 16px;
  }
}