:root {
   --mainColor: #18385D;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-family: "Saira", arial, sans-serif;
   font-size: 10px;
   color: #222;
   background-color: #fff;
}

.menu {
   position: fixed;
   display: flex;
   flex-wrap: nowrap;
   top: 0;
   height: 100px;
   width: 100%;
   padding-right: 50px;
   background-color: var(--mainColor);
   z-index: 10;
}

.logo {
   background-image: url(https://zmidzinski-konstrukcje.pl/img/logo.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   width: 100%;
   height: 100%;
}

.menu a {
   flex-basis: 20%;
}

.menu .menulist {
   flex-basis: 80%;
   width: 80%;
   height: 100px;
}

.menu .menulist ul {
   list-style: none;
}

.menu .menulist ul li a {
   display: block;
   float: left;
   width: 20%;
   color: #eee;
   font-size: 20px;
   font-family: Saira, arial, sans-serif;
   text-align: center;
   line-height: 100px;
   text-decoration: none;
   text-transform: uppercase;
}

.menu .menulist ul li a:hover {
   background-color: #222;
   border-radius: 50px;
}


/* MENU MOBILNE */

.mobilemenu {
   display: none;
   position: fixed;
   top: 0;
   height: 100px;
   width: 100%;
   background-color: var(--mainColor);
}

.menubutton {
   flex-basis: 140px;
   height: 60px;
   margin: 20px 0;
   background-color: rgba(0, 0, 0, .3);
   border: none;
   border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   -ms-border-radius: 15px;
   -o-border-radius: 15px;
   font-size: 24px;
   color: #ddd;
   text-transform: uppercase;
}

.mobilemenu .logo {
   width: 200px;
   margin-left: 20px;
}

.mobilelist {
   position: absolute;
   top: -400px;
   width: 100%;
   list-style: none;
   display: flex;
   flex-direction: column;
   transition: .3s;
}

.mobilelist.displ {
   top: 100px;
}

.mobilelist li {
   height: 40px;
   background-color: rgba(0, 0, 0, .9);
}

.mobilemenu .mobilelist li a {
   display: block;
   float: left;
   width: 100%;
   color: #eee;
   font-size: 18px;
   font-family: Saira, arial, sans-serif;
   text-align: center;
   line-height: 40px;
   text-decoration: none;
   text-transform: uppercase;
}

@media(max-width: 660px) {
   .menu {
      display: none;
   }

   .mobilemenu {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      z-index: 10;
   }

   .menubutton {
      margin-right: 100px;
   }

   .mobilemenu .logo {
      margin-left: 20px;
   }

}

@media(max-width: 440px) {
   .menubutton {
      width: 100px;
      margin-left: 90px;
      margin-right: 30px;
   }

   .mobilemenu .logo {
      width: 200px;
      margin-left: 20px;
   }
}

@media(max-width: 370px) {
   .menubutton {
      width: 100px;
      margin-left: 40px;
      margin-right: 20px;
   }

   .mobilemenu .logo {
      width: 180px;
      margin-left: 20px;
   }
}




footer {
   width: 100%;
   height: 30px;
   line-height: 30px;
   color: #eee;
   text-align: center;
   background-color: #222;
}

h1 {
   font-size: 44px;
   border-bottom: 2px solid var(--mainColor);
   margin-bottom: 40px;
   text-align: center;
   font-weight: normal;
   text-transform: uppercase;
}

h4 {
   font-weight: normal;
}

@media(max-width: 1024px) {
   .menu .menulist ul li.re ul.rea {
      width: 300px;
   }

   .menu .menulist ul li.re ul.rea li.lh a {
      font-size: 20px;
      line-height: 30px;
      padding: 10px;
      width: 300px;
   }
}

@media(max-width: 640px) {
   h1 {
      font-size: 34px;
   }
}

/*HOME*/

header {
   position: relative;
   background-image: url(https://zmidzinski-konstrukcje.pl/img/header.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   margin: 100px auto 0 auto;
   height: calc(100vh - 100px);
   font-size: 26px;
}

header div {
   background-color: rgba(0, 0, 0, .7);
   height: 100%;
   width: 100%;
}

header p {
   position: absolute;
   top: 40%;
   left: 10%;
   right: 10%;
   color: #ddd;
   text-align: justify;
}

header div p a {
   color: #ddd;
}

.kafelki {
   display: flex;
   width: 95%;
   margin: 50px auto;
   flex-wrap: wrap;
   text-align: center;
   justify-content: space-around;
}

.kafelki div {
   flex-basis: 29%;
   min-width: 320px;
   margin: 0 10px;
}

.kafelki div h3 {
   font-size: 24px;
   padding-bottom: 20px;
}

.kafelki div p {
   font-size: 18px;
   text-align: justify;
}

.kafelki div button {
   margin-top: 30px;
   border: none;
   border-radius: 15px;
   font-size: 20px;
   background-color: var(--mainColor);
}


.kafelki div button a {
   color: white;
   padding: 0 20px;
   line-height: 200%;
   text-decoration: none;
   text-transform: uppercase;
   transition: .3s;
   width: 80%;
}

.kafelki div button a:hover {
   padding: 0 40px;
   font-size: 22px;
}

@media(max-width: 1050px) {
   header p {
      top: 30%;
      font-size: 26px;
      word-wrap: break-word;
   }

   .kafelki div {
      font-size: 24px;
      flex-basis: 55%;
      margin-bottom: 50px;
   }
}

@media(max-width: 780px) {
   header p {
      top: 35%;
      font-size: 24px;
   }

   .kafelki div {
      font-size: 22px;
      flex-basis: 65%;
   }

   .kafelki div button {
      font-size: 18px;
   }
}

@media(max-width: 640px) {
   header p {
      font-size: 14px;
      top: 30%;
      left: 7%;
      right: 7%;
   }

   .kafelki div {
      font-size: 16px;
      flex-basis: 450px;
   }
}

@media(max-width: 360px) {

   .kafelki div {
      flex-basis: 340px;
      margin-bottom: 40px;
   }

   .kafelki div button {
      font-size: 16px;
   }
}

/*OFERTA*/

.offer {
   max-width: 1500px;
   margin: 150px auto 100px auto;
   padding: 0 50px;
   text-align: center;
}

.offer p {
   padding: 12px 0;
   font-size: 24px;
}

.offer .wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.offer .box {
   position: relative;
   flex-basis: 30%;
   height: 270px;
   margin: 35px 0;
}

.offer .box div {
   position: relative;
   height: 200px;
   width: 300px;
}

.box img {
   position: absolute;
   top: 0;
   left: 50px;
   right: 50px;
}

.offer img {
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.box h4 {
   position: absolute;
   bottom: 15px;
   width: 400px;
   font-size: 18px;
   text-align: center;
}

.offer li {
   font-size: 20px;
}

.offer2 {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   max-width: 1300px;
}

.offer2 .wrap {
   margin: 30px 0;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-around;
   align-content: space-around;
}

.offer2 .wrap .img {
   flex-basis: 378px;
   height: 250px;
   background-repeat: no-repeat;
   background-size: cover;
   background-size: contain;
   border-radius: 20px;
}

.offer .lista {
   text-align: left;
   max-width: 500px;
   text-align: justify;
}

.offer .lista p {
   padding: 0px;
   font-size: 20px;
}

@media (max-width: 1150px) {
   .offer .box {
      flex-basis: 45%;
   }

   .offer .lista {
      max-width: 400px;
      margin-left: 30px;
   }

}


@media (max-width: 1024px) {
   .offer .wrap .img {
      flex-basis: 378px;
   }

}

@media (max-width: 850px) {
   .offer p {
      word-wrap: break-word;
   }

   .offer .box {
      flex-basis: 100%;
   }

   .offer .box div {
      margin: 0 auto;
   }

   .box img {
      left: 0px;
      right: 0px;
   }

   .box h4 {
      left: 0;
      width: 100%;
   }

   .offer2 .wrap {
      flex-wrap: wrap;
   }

   .offer .lista {
      margin-top: 20px;
      max-width: 380px;
   }
}

@media (max-width: 400px) {
   .offer {
      max-width: 1500px;
      margin: 140px auto 80px auto;
      padding: 0;
   }

   .offer p {
      font-size: 18px;
   }

   .offer2 .wrap {
      width: 100%;
      justify-content: space-around;
   }

   .offer2 .wrap .img {
      flex-basis: 340px;
      height: 225px;
   }

   .offer2 .lista {
      margin-left: 0;
      max-width: 360px;
   }

   .offer2 .lista p,
   .offer2 .lista li {
      padding: 0 10px;
      font-size: 16px;
   }
}


/*O FIRMIE*/

.ofirmie {
   margin-top: 100px;
   height: 50vh;
   background-image: url(https://zmidzinski-konstrukcje.pl/img/ofirmie.jpg);
   background-position: bottom;
   background-size: auto;
}

.about {
   max-width: 1300px;
   margin: 80px auto 100px auto;
   padding: 0 50px;
   text-align: center;
}

.about p {
   padding: 12px 0;
   font-size: 24px;
   text-align: justify;
   margin-left: -26px;
}

.about .about2 {
   display: flex;
   justify-content: space-around;
   margin-top: 30px;
}

.about2 div.img {
   flex-basis: 433px;
   height: 500px;
   background-repeat: no-repeat;
   background-size: cover;
   background-size: contain;
}

.about2 div.second {
   flex-basis: 50%;
}

.about li {
   font-size: 20px;
   text-align: left;
}

.about li:nth-last-child(1),
.about li:nth-last-child(2) {
   text-align: justify;
}

.about div .second {
   margin-left: 50px;
}

@media (max-width: 1024px) {
   .about .about2 div {
      flex-basis: 40%;
   }

   .about div .second {
      margin-right: 0;
   }

   .about .about2 .second p {
      padding-top: 2px;
   }

}

@media (max-width: 910px) {
   .about .about2 {
      flex-wrap: wrap;
   }

   .about .about2 div {
      flex-basis: 70%;
   }

   .about .about2 .second {
      margin-top: 30px;
   }
}

@media (max-width: 768px) {
   .about .about2 div {
      flex-basis: 80%;
   }
}

@media (max-width: 640px) {
   .about {
      margin: 50px auto 80px auto;
   }

   .ofirmie {
      height: 70vh;
   }

   .about {
      width: 100%;
      padding: 0 10px;
   }

   .about2 div.img {
      flex-basis: 433px;
      height: 500px;
   }

   .about2 div.second {
      flex-basis: 90%;
   }

   .about2 div.second p {
      margin-left: -30px;
   }

   .about p {
      word-wrap: break-word;
      font-size: 18px;
      width: 100%;
      padding: 0 10px;
      margin-left: 0;
   }

   .about2 .second ul li {
      padding: 0 10px;
      font-size: 18px;
   }
}

@media (max-width: 380px) {
   .about p {
      font-size: 16px;
   }

   .about2 div.img {
      height: 400px;
   }

   .about2 div.second {
      margin-left: 30px;
   }

   .about2 div.second p {
      width: 340px;
   }

   .about2 .second ul li {
      font-size: 16px;
   }
}

/*KONTAKT*/
.contact {
   position: relative;
   max-width: 1400px;
   margin: 150px auto 100px auto;
   padding: 0 100px;
   text-align: center;
}

.contact h2 {
   font-size: 30px;
}

.contact p {
   font-size: 30px;
}

.contact .map {
   position: relative;
   margin: 30px auto;
}

.contact .social {
   padding-top: 10px;
   font-size: 20px;
   font-family: Saira condensed, sans-serif;
   text-align: center;
}

.contact .social a {
   text-decoration: none;
   color: #222;
}

.contact .social a:hover {
   color: var(--mainColor);
}

@media (max-width: 1120px) {
   .contact {
      width: 100%;
   }

   .contact .map iframe {
      transform: scale(.8);
      -webkit-transform: scale(.8);
      -moz-transform: scale(.8);
      -ms-transform: scale(.8);
      -o-transform: scale(.8);
   }
}

@media (max-width: 1024px) {
   .contact .map {
      width: 630px;
      height: 350px;
   }

   .contact .map iframe {
      position: absolute;
      top: -50px;
      left: -130px;
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -o-transform: scale(0.8);
   }
}

@media (max-width: 768px) {
   .contact .map iframe {
      top: -50px;
      left: -160px;
      transform: scale(0.65);
      -webkit-transform: scale(0.65);
      -moz-transform: scale(0.65);
      -ms-transform: scale(0.65);
      -o-transform: scale(0.65);
   }
}

@media (max-width: 640px) {
   .contact {
      padding: 0;
   }

   .contact .map iframe {
      top: -80px;
      left: -130px;
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      -o-transform: scale(0.5);
   }
}

@media (max-width: 420px) {
   .contact .map {
      width: 100%;
   }

   .contact .map iframe {
      top: -90px;
      left: -250px;
      transform: scale(0.4);
      -webkit-transform: scale(0.4);
      -moz-transform: scale(0.4);
      -ms-transform: scale(0.4);
      -o-transform: scale(0.4);
   }
}

@media (max-width: 360px) {
   .contact h2 {
      font-size: 22px;
   }

   .contact p {
      font-size: 18px;
   }

}