/*
Theme Name: MOS technik s.r.o.
Author: MARVIO agency s.r.o.
Author URI: https://marvio.cz
Description: Objevte skryté úniky ve spotřebě stlačeného vzduchu. Naši odborníci Vám ukáží, jak snížit náklady a zlepšit efektivitu.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
font-family: 'Montserrat', sans-serif!important;
}

/* NAVBAR */
.navbar {
  padding: 0px!important;
}

.navbar-nav {
  margin-left: auto!important;
}

@media (min-width: 1100px) {
.navbar-nav > .nav-item {
  padding-right: 20px!important;
}}

.navbar-brand {
  padding-top: 15px!important;
  padding-bottom: 15px!important;
}

.nav-item > .nav-link {
  color: #18181B!important;
  font-size: 1.125rem!important;
  font-weight: 400!important;
  text-transform: uppercase!important;
}

.nav-item > .nav-link:hover {
  color: #EF7C14!important;
}

@media (max-width: 500px) {
.navbar-collapse {
  text-align: center!important;
}}

@media (max-width: 500px) {
.nav-item {
  margin-left: auto!important;
  margin-right: auto!important;
}}

/* BUTTONS */
.btn-primary {
  background-color: #EF7C14!important;
  text-transform: uppercase!important;
  border: none!important;
  border-radius: 1.875rem!important;
  font-size: 1.125rem!important;
  font-weight: 400!important;
  color: #FFFFFF!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
}

.btn-secondary {
  background-color: #FFFFFF!important;
  text-transform: uppercase!important;
  border: none!important;
  border-radius: 1.875rem!important;
  font-size: 1.125rem!important;
  font-weight: 400!important;
  color: #EF7C14!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
}


.btn-dangerous {
  background-color: #FFFFFF!important;
  text-transform: uppercase!important;
  border: none!important;
  border-radius: 1.875rem!important;
  font-size: 1.125rem!important;
  font-weight: 400!important;
  color: #000!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  margin-top: 25px!important;
  margin-bottom: 25px!important;
}

/* MOS */
.mos-title {
  padding-top: 80px!important;
  padding-bottom: 80px!important;
}

.mos-title-content > h1 {
  font-size: 3.125rem!important;
  font-weight: 400!important;
  color: #000!important;
  text-transform: uppercase!important;
  padding-bottom: 20px!important;
}

.mos-title-content > h1 > strong {
  font-weight: 600!important;
}

@media (max-width: 600px) {
.mos-title-content > h1 {
  font-size: 2.5rem!important;
}}

@media (min-width: 1100px) {
.mos-title-content {
  width: 90%!important;
}}

.mos-title-content > p {
  font-size: 1.375rem!important;
  font-weight: 300!important;
  color: #000!important;
}

@media (min-width: 1100px) {
.mos-title-content > p  {
  width: 60%!important;
}}

.mos-title-imgs {
  padding: 0!important;
}

.mos-fluid {
  padding-left: 7%!important;
  padding-right: 7%!important;
}

@media (max-width: 900px) {
.mos-fluid {
  padding-left: 4%!important;
  padding-right: 4%!important;
}}

@media (max-width: 600px) {
.mos-fluid {
  padding-left: 3%!important;
  padding-right: 3%!important;
}}

.mos-basic-content {
  padding-top: 80px!important;
  padding-bottom: 80px!important;
}

.mos-basic-content > h2 {
  font-size: 2rem!important;
  font-weight: 600!important;
  text-transform: uppercase!important;
  color: #000!important;
  padding-bottom: 15px!important;
}

.mos-basic-content > p {
  font-size: 1rem!important;
  font-weight: 300!important;
  color: #000!important;
  text-align: justify!important;
}

.mos-basic-title {
  background-color: #EF7C14!important;
  padding-top: 80px!important;
  padding-bottom: 80px!important;
}

.mos-basic-title > h2 {
  font-size: 3.125rem!important;
  font-weight: 600!important;
  color: #FFF!important;
  text-transform: uppercase!important;
  padding-bottom: 80px!important;
}

@media (max-width: 600px) {
.mos-basic-title > h2 {
  font-size: 2.5rem!important;
}}

.mos-diagnostics {
  padding-top: 150px!important;
  padding-bottom: 80px!important;
}

.mos-content > h2 {
  font-size: 2.5rem!important;
  color: #000!important;
  text-transform: uppercase!important;
  font-weight: 600!important;
  padding-bottom: 50px!important;
}

.mos-box-number {
  font-size: 5rem!important;
  color: #FFF!important;
  font-weight: 400!important;
}

@media (max-width: 900px) {
.mos-box-number {
  font-size: 4.5rem!important;
}}

@media (max-width: 600px) {
.mos-box-number {
  font-size: 4rem!important;
}}

.mos-box-title > h3 {
  font-size: 2.18rem!important;
  font-weight: 400!important;
  text-transform: uppercase!important;
  color: #000!important;
  padding-top: 17px!important;
}

.mos-box-title > h3 > strong {
  font-weight: 600!important;
}

@media (max-width: 600px) {
.mos-box-title > h3 {
  padding-top: 0px!important;
  padding-left: 15px!important;
}}

.mos-box {
  padding-top: 25px!important;
  padding-bottom: 25px!important;
}

.mos-box > p {
  margin-top: 25px!important;
  font-size: 1rem!important;
  color: #000!important;
  text-align: justify!important;
  font-weight: 300!important;
}

@media (min-width: 1100px) {
.mos-box > p {
  max-width: 90%!important;
}}

.mos-steps {
  padding-top: 80px!important;
  padding-bottom: 80px!important;
}

.mos-steps-title > h2 {
  font-size: 3.125rem!important;
  font-weight: 600!important;
  color: #FFF!important;
  text-transform: uppercase!important;
  padding-bottom: 20px!important;
  padding-top: 20px!important;
  padding-left: 35px!important;
  padding-right: 35px!important;
  margin-bottom: 80px!important;
  background-color: #EF7C14!important;

}

@media (min-width: 1100px) {
.mos-steps-title > h2 {
  width: 65%!important;
}}

@media (max-width: 600px) {
.mos-steps-title > h2 {
  font-size: 2.5rem!important;
}}

.card {
  background: #FFF!important;
  border: 2px solid #EF7C14!important;
  border-radius: 0rem!important;
}

.card-body {
  font-size: 1.25rem!important;
  color: #000!important;
  font-weight: 600!important;
}

.card-body > h2 {
  color: #000!important;
  font-size: 1.5rem!important;
  font-weight: 600!important;
  text-transform: uppercase!important;
  padding-top: 20px!important;
}

.card-body > h3 {
  color: #000!important;
  font-size: 1.2rem!important;
  font-weight: 600!important;
  text-transform: uppercase;
  padding-top: 20px!important;
}

.card-body > p {
  font-size: 0.9rem!important;
  color: #000!important;
  font-weight: 300!important;
  text-align: justify!important;
}

.big-number {
  font-size: 3.75rem!important;
  font-weight: 600!important;
  color: #EF7C14!important;
}

.swiper-pagination-bullet-active {
  background-color: #EF7C14!important;
}

.mos-video {
  padding-top: 80px!important;
  padding-bottom: 80px!important;
}

.mos-video-content > h2 {
  font-size: 2.1rem!important;
  color: #000!important;
  font-weight: 600!important;
  text-transform: uppercase!important; 
  padding-bottom: 15px!important;
}

.gallery {
  --si-gallery-video-indicator-hover-box-shadow: none!important;
  --si-gallery-video-indicator-hover-bg: #EF7C14!important;
}

.mos-reference {
  padding-top: 80px!important;
  padding-bottom: 80px!important;
}

.mos-reference-content > h3 {
  font-size: 2.1rem!important;
  font-weight: 600!important;
  text-transform: uppercase!important;
  color: #000!important;
}

.mos-reference-content > p {
  font-size: 1rem!important;
  color: #000!important;
  font-weight: 300!important;
  text-align: justify!important;
}

.mos-reference-content > a {
  font-size: 1rem!important;
  color: #EF7C14!important;
  font-weight: 600!important;
  text-align: justify!important;
  text-decoration: none!important;
  text-transform: uppercase!important;
}

.mos-reference-content > p > strong {
  font-weight: 600!important;
}

@media (min-width: 1100px) {
.mos-reference-content {
  padding-left: 40px!important;
}}

.mos-steps-titles > h2 {
  font-size: 3.125rem!important;
  font-weight: 600!important;
  color: #FFF!important;
  text-transform: uppercase!important;
  padding-bottom: 20px!important;
  padding-top: 20px!important;
  padding-left: 35px!important;
  padding-right: 35px!important;
  margin-bottom: 80px!important;
  background-color: #EF7C14!important;

}

@media (min-width: 1100px) {
.mos-steps-titles > h2 {
  width: 72%!important;
}}

@media (max-width: 600px) {
.mos-steps-titles > h2 {
  font-size: 2.5rem!important;
}}

.mos-cta {
  padding-top: 105px!important;
  padding-bottom: 80px!important;
  background-color: #000!important;
}

.mos-cta-content > h2 {
  font-size: 3.125rem!important;
  font-weight: 600!important;
  color: #FFF!important;
  text-transform: uppercase!important;
  padding-bottom: 0px!important;
  margin-bottom: 0px!important;
}

.mos-cta-content > p {
  font-size: 2.1rem!important;
  color: #FFF!important;
  font-weight: 300!important;
}

.mos-footer-content > h3 {
  font-size: 1.1rem!important;
  color: #000!important;
  text-transform: uppercase!important;
  font-weight: 600!important;
}

.mos-footer-content > p {
  font-size: 1rem!important;
  color: #000!important;
  font-size: 400!important;
}

.mos-footer-content > p > strong {
  font-weight: 600!important;
}

.mos-footer-content > a {
  padding-left: 20px!important;
  padding-right: 20px!important;
}

.mos-footer {
  padding-top: 80px!important;
  padding-bottom: 80px!important;
}

.modal-title {
  font-size: 2.1rem!important;
  font-weight: 600!important;
  color: #000!important;
}

.modal-body > h4 {
  font-size: 1.5rem!important;
  font-weight: 600!important;
  color: #000!important;
  text-transform: uppercase!important;
}

.modal-body > p {
  font-size: 1rem!important;
  color: #000!important;
  font-weight: 300!important;
  text-align: justify!important;
}

.modal-body > p > strong {
  font-weight: 600!important;
}

.modal-body > p > strong > a {
  color: #EF7C14!important;
}

.wpforms-field-label-inline {
  display: none!important;
}

#wpforms-28-field_6-description {
  margin-top: -17px!important;
  margin-left: 25px!important;
}

#wpforms-28-field_6-description > a {
  color: #EF7C14!important;
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}