:root {
  --blue-color: rgb(11, 16, 71);
  --tomato-color: rgb(255, 78, 32);
  --background-color-white: rgb(255, 255, 255);
  --background-color-second: rgb(226, 231, 231);
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.ping {
  animation: ping 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) infinite alternate both;
}

@keyframes ping {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}
.centered {
  text-align: center;
  align-content: center;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

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

body {
  font-family: "Montserrat", sans-serif;
  background-color: #e2e7e7;
}

header.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../img/mask-and-gloves.jpg");
  background-position: 50% 40%;
  background-size: cover;
  color: var(--blue-color);
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
}
@media (width >= 768px) {
  header.hero {
    min-height: 70vh;
  }
}
header.hero .bg-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(165, 165, 165, 0.6);
}
header.hero .logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
header.hero .logo-box .logo {
  text-align: center;
}
header.hero .logo-box .logo img {
  margin: 0.5em 0;
}
header.hero .logo-box .logo .rat-logo {
  width: 90px;
}
header.hero .logo-box .logo .caption-logo {
  width: 250px;
}
header.hero .logo-box .logo .only-caption {
  width: 500px;
}
header.hero .logo-box .caption h1 {
  line-height: 1.5;
}
header.hero .text-box {
  z-index: 1;
}
header.hero .button-box {
  position: absolute;
  bottom: 5%;
}
header.hero .button-box a {
  color: var(--blue-color);
}
header.hero .button-box i {
  font-size: 50px;
}

.title {
  margin: 0 auto 1.5em;
}
.title h2 {
  margin-bottom: 0.3em;
  color: --blue-color;
  font-size: 34px;
  text-align: center;
}
.title .line {
  margin: 0 auto;
  width: 75px;
  height: 4px;
  background-color: var(--tomato-color);
}

.img-box-1 {
  background-image: url("../img/magazyn_2.jpg");
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.img-box-2 {
  background-image: url("../img/second-hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.about-us {
  border-radius: 5px;
  overflow: hidden;
}
.about-us p {
  margin: 0;
  font-size: 17px;
  text-align: justify;
}
@media (width >= 768px) {
  .about-us {
    min-height: 400px;
  }
}

.clients {
  border-radius: 5px;
  box-shadow: 1px 1px 18px 0px rgba(66, 68, 90, 0.5);
  overflow: hidden;
}
.clients .title {
  margin-bottom: 2em;
}
.clients ul {
  margin: 0 auto;
}

.offer {
  border-radius: 5px;
  box-shadow: 1px 1px 18px 0px rgba(66, 68, 90, 0.5);
  overflow: hidden;
}
.offer .title {
  margin-bottom: 2em;
}
.offer ul {
  margin: 0 auto;
}

.contact {
  background-color: #333;
}
.contact .logo-box img {
  height: 200px;
}
.contact .contact-box {
  color: var(--background-color-second);
}
.contact .contact-box h3 {
  margin-bottom: 24px;
}
.contact .contact-box p {
  margin-bottom: 0.3em;
}
.contact .contact-box a {
  color: var(--background-color-second);
}
.contact .menu-box a {
  display: block;
  margin: 5px 10px;
  color: var(--background-color-second);
}
.contact .media-box a {
  margin: 5px 10px;
  color: var(--background-color-second);
  font-size: 40px;
}

@media (width >= 768px) {
  .img-box-2 {
    order: 1;
  }
  .contact .logo-box {
    order: 0;
  }
}/*# sourceMappingURL=style.css.map */