@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }

  80% {
    transform: translateX(1rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }

  80% {
    transform: translateX(-1rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
      html {
        font-size: 50%; }
      }

body {
  box-sizing: border-box;
}

::selection {
  background-color: #d14533;
  color: #fff;
}

body {
  font-family: 'Arimo', sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.7;
  color: #fff;
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', sans-serif;
}

p {
  font-size: 3rem;
}

@media only screen and (max-width: 37.5em) {
  p {
    font-size: 2rem;
  }
}

.link {
  color: #eb4449;
  transition: all .3s;
}

.link:hover {
  color: #f48185;
}


.heading-primary {
  color: #fff;
  backface-visibility: hidden;
  padding-top: 3rem;
  font-family: 'Spartan';
  font-size: 7rem;
 }

  .heading-primary--main {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    animation: moveInLeft 1s ease-out;
    line-height: 14rem;
    text-align: left;
    }

    
    @media only screen and (max-width: 56.25em) {
      .heading-primary--main {
        font-size: 4rem;
        line-height: 7rem;
      }
    }

    @media only screen and (max-width: 37.5em) {
      .heading-primary--main {
        font-size: 2.5rem;
        line-height: 5rem;
      }
    }


  .heading-primary--sub {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    animation: moveInRight 1s ease-out;
    color: #fff;
    text-align: right;
  }

  

  @media only screen and (max-width: 56.25em) {
    .heading-primary--sub {
      font-size: 4rem;
    }
  }

  @media only screen and (max-width: 37.5em) {
    .heading-primary--sub {
      font-size: 2.5rem;
    }
  }


  .heading-primary--sub span {
    font-weight: 700;
  }

  .footer-heading-primary {
    color: #fff;
    backface-visibility: hidden;
  }
  
    .footer-heading-primary--main {
      display: block;
      text-transform: uppercase;
      font-size: 6rem;
      font-weight: 700;
      animation: moveInLeft 1s ease-out;}
  
      @media only screen and (max-width: 37.5em) {
        .footer-heading-primary--main {
          font-size: 5rem;
        }
      }
  
    .footer-heading-primary--sub {
      display: block;
      font-size: 2.5rem;
      font-weight: 300;
      animation: moveInRight 1s ease-out;}

      @media only screen and (max-width: 37.5em) {
        .footer-heading-primary--sub {
        font-size: 1.8rem;
        }
      }
  
    .footer-heading-primary--sub span {
      font-weight: 700;
    }




.logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 0;
}

.horizontal-rule {
  margin: 5rem 0;
}

.logos img {
  width: 20rem;
  height: 100%;
}

@media only screen and (max-width: 37.5em) {
  .logos img {
    width: 12rem;
  }
}

.bosch-line {
  display: block;
  content: "";
  height: 1.5rem;
  background-image: url('../img/horizalna_bosch.jpg');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}

.heading-secondary {
  font-size: 5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  display: inline-block;
  color: #e2252c;}

  @media only screen and (max-width: 56.25em) {
    .heading-secondary {
      font-size: 6rem;}}
  @media only screen and (max-width: 37.5em) {
    .heading-secondary {
      font-size: 3rem;
    }
  }

.heading-tertiary {
  font-size: 2.8rem;
  font-weight: 700;
  color: #231f20;
  line-height: 1.2em;
  min-height: 9rem;
  margin-top: 2rem;
}

  @media only screen and (max-width: 56.25em) {
    .heading-tertiary {
      font-size: 2.5rem;
      min-height: 5rem;}}
  @media only screen and (max-width: 37.5em) {
    .heading-tertiary {
      font-size: 2rem;
      min-height: 5rem;
    }
  }

.border-bottom {
  border-bottom: 0.3rem solid #ed1c24;
  padding: 0 5rem 3rem;}

  @media only screen and (max-width: 56.25em) {
    .border-bottom {
      padding: 0 5rem 1.5rem;
    }
  }

.heading-white {
    color: #fff;
 }


.paragraph {
  text-align: center;
  margin-top: -3vh;}

  @media only screen and (max-width: 56.25em) {
    .paragraph {
      margin-top: -2vh;
    }
  }

.u-margin-bottom-big {
  margin-bottom: 8rem !important;}

  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-big {
      margin-bottom: 5rem !important;
    }
  }

.u-margin-bottom-medium {
   margin-bottom: 4rem !important; }
   @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-medium {
      margin-bottom: 3rem !important; } }


.btn, .btn:link, .btn:visited, .btn-kleber, .btn-kleber:link, .btn-kleber:visited {
  text-transform: uppercase;
  text-decoration: underline;
  padding: 1.5rem 4rem;
  display: inline-block;
  background: #ed1c24;
  color: #fff;
  font-family: 'Roboto Slab', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  transition: 0.3s all ease-in-out;
  margin-top: 5rem;
}

.btn:hover {
  background: #b50b11;
}

.btn-kleber, .btn-kleber:link, .btn-kleber:visited {
  background: #333;
  color: #fff;
}

.btn-kleber:hover {
  background: #555;
}


@media only screen and (max-width: 37.5em) {
  .btn, .btn:link, .btn:visited {
    font-size: 2rem;
  }
}

.row {
  max-width: 114rem;
  margin: 0 auto;}

  .row:not(:last-child) {
    margin-bottom: 2rem;}

    @media only screen and (max-width: 56.25em) {
      .row:not(:last-child) {
        margin-bottom: 6rem;} }
    
  @media only screen and (max-width: 56.25em) {
    .row {
      max-width: 65rem;
      padding: 0 3rem;} }
  
  .row::after {
    
    display: table;
    clear: both;}
  
  .row [class^="col-"] {
    float: left; }
    .row [class^="col-"]:not(:last-child) {
      margin-right: 6rem;}
      @media only screen and (max-width: 56.25em) {
        .row [class^="col-"]:not(:last-child) {
          margin-right: 0;
          margin-bottom: 6rem;} }
      @media only screen and (max-width: 56.25em) {
        .row [class^="col-"] {
          width: 100% !important;} }
      @media only screen and (max-width: 37.5em) {
        .row [class^="col-"] {
              width: 100% !important;} }

.row .col-1-of-2 {
  width: calc((100% - 6rem) / 2);
}

.row .col-1-of-3 {
  width: calc((100% - 2*6rem) / 3);
}
    
.row .col-1-of-4 {
  width: calc((100% - 3*2rem) / 4);
}

.row [class^="col-"]:not(:last-child) {
  margin-right: 2rem;
}

.main {
  align-items: center;
  justify-content: center;
  flex-direction: column; 
  background-color: #ed1c24;
  
  /* background-image: linear-gradient(to right, rgba(237, 28, 36, 1), rgba(237, 28, 36, 0.6), rgba(237, 28, 36, 1)), url(../img/background_1.jpg); */ 
  
  }
  
.section-about {
  background-color: #f5f5ef;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5),   rgba(0, 0, 0, 0.5)), url(../img/kamoka_bg.jpg);
  background-size: cover;
  padding: 20rem;
  text-align: center;
}

  @media only screen and (max-width:56.25em) {
    .section-about {
      padding: 6rem 0;
      } }
  

.about-list {
  list-style-type: none;
  text-align: left;
  line-height: 2em;
  margin-bottom: 10rem;
}   

.about-list li::before {
  content: '\2014';
  position: absolute;
  margin-left: -2rem;
}



.logo-list {
  list-style-type: none;
  margin-top: 5rem;}
  @media only screen and (max-width: 37.5em) {
    .logo-list {
      margin-top: 8rem;
    }
    }


.logo-list li {
  display: inline-block;
  width: calc((100% - 3*6rem) / 4);}

  @media only screen and (max-width: 56.25em) {
    .logo-list li {
      width: 45%;} }
    
    @media only screen and (max-width: 37.5em) {
      .logo-list li {
        width: 100%;
      } }

.logo-list li img {
  width: 100%;
}


.phone-number {
  color: #fff;

}

.copyright {
  text-align: center;
  padding: 5rem;
  
  color: #666;
}

.copyright p {
  font-size: 1.5rem;
}

.copyright img {
  width: 15rem;
}

.bravo_majstore {
  max-width: 50%;
}

.barrels {
  max-width: 90%;
  margin-top: 10rem;
}

.text-description {
  text-align: justify;
}

.pumpa_oglas {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 5rem;
}

.pumpa_tekst {
  font-style: italic;

}

.pumpa_slika {
  max-height: 30rem;
}

.feature-box img {
  width: 225px;
  height: 225px;
}

.items_list {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2.5rem;
  text-align: center; 
  list-style-type: none;
  font-family: 'Roboto Slab', sans-serif;
  font-weight: 600;
  color: #f5f5ef;
}

.items_list li:last-child {
  font-style: italic;
  text-transform: lowercase;
}

.top_header {
  padding: 1rem;
  text-align: center;
  color: #0f58d6;

}




.footer_text {
  font-size: 3rem;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  color: #f5f5ef;
}

.footer_text span {
  font-weight: 800;
}

.subheading-secondary {
  text-transform: uppercase;
  font-size: 3.5rem;
}

@media only screen and (max-width: 37.5em) {
  .subheading-secondary {
    font-size: 1.5rem;
  }
}

.uslovi {
  margin-top: 5rem;
  color: #555555;
  text-align: center;
}





@media only screen and (max-width: 56.25em) {
 .uslovi {
  margin-top: 0rem;
 }
 
  .uslovi p {
   font-size: 2.5rem;
 }
}

@media only screen and (max-width: 37.5em) {
  .uslovi {
    margin-top: 2rem;
  }

  .uslovi p {
    font-size: 2rem;
  }
}

.target-list {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  
}


dl {
  margin-bottom:50px;
  width: 70%;
  background: #fff;
  padding: 0.5rem;
  font-family: 'Ariano', sans-serif;
}

@media only screen and (max-width: 56.25em) {
  dl {
    font-size: 1.2rem;
    width: 100%;
  }
}

@media only screen and (max-width: 37.5em) {
  dl {
    font-size: 1.05rem;
    width: 100%;
  }
}


dl dt {
  background: #bff3ff;
  color:#333;
  float:left; 
  font-weight:bold; 
  width: 25%; 
  text-align: right;
  padding: 5px 5px 5px 0;
  margin-top: 0.5rem;
}

dl dt span {
  font-size: 1rem;
  display: block;
  margin-top: -0.8rem;
  font-weight: 500;
}

@media only screen and (max-width: 56.25em) {
  dl dt span {
    margin-top: 0;

  }
}
dl dd {
  margin-top: 0.5rem;
  margin-left: 1%;
  width: 74%;
  float: left;
  padding:5px 0;
  background: #ffdfe0;
  color: #333;
  text-align: center;
}

.target-heading {
  background-color: #ff9a9c;
  height: 6rem;
  text-align: center;
  margin-top: 0 !important;
  font-weight:bold;
  padding: 1rem;
}

.details {
  background-color: #ed1c24;;
  background-image: url(../img/bg.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding-top: 15rem;
}



.details-heading {
  font-size: 9rem;
  font-family: 'Bangers', sans-serif;
  text-align: center;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
}

.details-heading span {
  font-size: 24rem;
}



@media only screen and (max-width: 56.25em) {
  
  
  .details-heading {
    font-size: 5rem;
  }
  .details-heading span {
    font-size: 15rem;
  }

}

@media only screen and (max-width: 37.5em) {
  .details {
    padding-top: 5rem;
  }

  .details-heading {
    font-size: 7rem;
    line-height: 7rem;
  }

  .details-heading span {
    font-size: 11rem;
  }
}

.top_features {
  background: url(../img/bg_details.webp) no-repeat bottom center;
  background-size: 100vw 30rem;
}

.features {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12rem 0 9rem 0;
}

.features img {
  object-fit: contain;
}

.features_guma {
  width: 30%;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.8));
}



.features_trust {
  padding: 0;
  width: 23%;
  margin-left: -5rem;
  z-index: 10;
}

.features_logo {
  width: 39%;
  margin-left: 12rem;
  padding: 0 2rem;
}

@media only screen and (max-width: 56.25em) {
  .features_logo {
    margin-left: 9rem;
  }
}

@media only screen and (max-width: 37.5em) {
  .features {
    padding: 10rem 1rem 3rem 1rem;
  }

  .top_features {
    background-size: 100vw 15rem;
  }

  .features_logo {
    margin-left: 5rem;
  }
}