/*!
 * Custom css by Role Creative
 * Created on 04/05/2021 - May the forth be with you
 * updated 13/06/2021
 */
@font-face {
  font-family: 'Zona Pro';
  src: url('/content/files/role-css/fonts/ZonaPro-Bold.woff2') format('woff2'),
      url('/content/files/role-css/fonts/ZonaPro-Bold.woff') format('woff'),
      url('/content/files/role-css/fonts/ZonaPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zona Pro';
  src: url('/content/files/role-css/fonts/ZonaPro-Light.woff2') format('woff2'),
      url('/content/files/role-css/fonts/ZonaPro-Light.woff') format('woff'),
      url('/content/files/role-css/fonts/ZonaPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zona Pro Hairline';
  src: url('/content/files/role-css/fonts/ZonaPro-Hairline.woff2') format('woff2'),
      url('/content/files/role-css/fonts/ZonaPro-Hairline.woff') format('woff'),
      url('/content/files/role-css/fonts/ZonaPro-Hairline.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zona Pro';
  src: url('/content/files/role-css/fonts/ZonaPro-SemiBold.woff2') format('woff2'),
      url('/content/files/role-css/fonts/ZonaPro-SemiBold.woff') format('woff'),
      url('/content/files/role-css/fonts/ZonaPro-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zona Pro';
  src: url('/content/files/role-css/fonts/ZonaPro-Regular.woff2') format('woff2'),
      url('/content/files/role-css/fonts/ZonaPro-Regular.woff') format('woff'),
      url('/content/files/role-css/fonts/ZonaPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zona Pro';
  src: url('/content/files/role-css/fonts/ZonaPro-Thin.woff2') format('woff2'),
      url('/content/files/role-css/fonts/ZonaPro-Thin.woff') format('woff'),
      url('/content/files/role-css/fonts/ZonaPro-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zona Pro';
  src: url('/content/files/role-css/fonts/ZonaPro-Black.woff2') format('woff2'),
      url('/content/files/role-css/fonts/ZonaPro-Black.woff') format('woff'),
      url('/content/files/role-css/fonts/ZonaPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
html {
  font-family: 'Zona Pro'!important;
  font-weight: normal!important;
  font-style: normal!important;
  font-size: 16px!important;
  line-height: 1em!important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Zona Pro'!important;
  font-weight: bold !important;
  font-style: normal;
  text-transform: none!important;
  letter-spacing: 0.01em!important;
  color: #58595b;
  word-break: break-word;
}
.NewsletterContentBlock__TitleVariant_title{
  font-family: 'Zona Pro'!important;
  font-weight: bold!important;
  font-style: normal;
  text-transform: none!important;
  letter-spacing: 0.01em!important;
}
.NewsletterContentBlock__TitleVariant_subtitle {
  font-family: 'Zona Pro'!important;
  font-weight: normal!important;
  font-style: normal;
  text-transform: none!important;
  letter-spacing: 0.01em!important;  
}
.MainNav_hyp-top-lvl {
  font-family: 'Zona Pro'!important;
  font-weight: normal!important;
  font-style: normal!important;
  font-size: 1.15em!important;
  text-transform: none!important;
}
.MainNav_hyp-second-lvl {
  font-family: 'Zona Pro'!important;
  font-weight: normal!important;
  font-style: normal!important;
  padding: 0 0 24px 0!important;
}
.Copyright_copyright {
  font-size: 13px!important;
  line-height: 1.3rem!important;
}

.OpenerButton_btn-menu-opener {
  color: #f9a81b!important;
}

.card-shadow {
  display: block!important;
  /* width: 300px;
  height: 250px;
  padding: 45px 0; */
  border-radius: 3px!important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)!important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)!important;
}
.card-shadow:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)!important;
}

.img-block{ display: block!important;}

.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important; }

.bg-primary, .badge-primary, .control-has-primary .custom-control-label:before {
    background-color: #f9a81b !important;
}
.btn.btn-link * {
    fill: #f9a81b !important;
}
.nav-tags-stack .active .RoleWithUs-icon svg, .page-link svg, .RoleWithUs-lines svg, .RoleWithUs-media-links li a:hover svg {
    fill: #f9a81b !important;
}
.nav-tabs.nav-tabs-line .nav-item.show .nav-link, .nav-tabs.nav-tabs-line .nav-link.active {
    background-color: transparent;
    border-color: #f9a81b !important;
}
.nav-tabs.nav-tabs-lie .nav-item.show .nav-link, .nav-tabs.nav-tabs-line .nav-link.active {
    color: #f9a81b !important;
}
.swiper-slider-box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #f9a81b !important;
}
.badge-outline-primary, .btn-outline-primary, .RoleWithUs-outline-primary, .btn-primary, .custom-control-input:checked ~ .custom-control-label:before {
    border-color: #f9a81b !important;
}
.btn-primary {
    background-color: #f9a81b !important;
    color: #fff !important;
}
.nav-tags-stack .active .RoleWithUs-icon svg *, .page-link svg *, .RoleWithUs-lines svg *, .RoleWithUs-media-links li a:hover svg * {
    fill: #f9a81b !important;
}
.badge-outline-primary, .btn-outline-primary, .RoleWithUs-outline-primary, .btn-link {
    color: #f9a81b !important;
}
.btn.btn-link:hover svg, .btn.btn-link:hover svg * {
    fill: #58595B !important;
}
/* rtl:end:remove */
.text-primary {
  color: #f9a81b !important; }

.text-secondary {
  color: #8392AB !important; }

.text-success {
  color: #82d616 !important; }

.text-info {
  color: #17c1e8 !important; }

.text-warning {
  color: #f53939 !important; }

.text-danger {
  color: #ea0606 !important; }

.text-light {
  color: #e9ecef !important; }

.text-dark {
  color: #57585a !important; }

.text-white {
  color: #fff !important; }

.text-body {
  color: #67748e !important; }

.text-muted {
  color: #6c757d !important; }

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important; }

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important; }

.text-reset {
  color: inherit !important; }

.bg-primary {
  background-color: #f9a81b !important; }

.bg-secondary {
  background-color: #8392AB !important; }

.bg-success {
  background-color: #82d616 !important; }

.bg-info {
  background-color: #17c1e8 !important; }

.bg-warning {
  background-color: #f53939 !important; }

.bg-danger {
  background-color: #ea0606 !important; }

.bg-light {
  background-color: #e9ecef !important; }

.bg-dark {
  background-color: #57585a !important; }

.bg-white {
  background-color: #fff !important; }


html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  color: #67748e;
  font-weight: 400;
  line-height: 1.6;
  background-color: #fff; }

h1, .h1, .h1, h2, .h2, .h2, h3, .h3, .h3, h4, .h4, .h4, h5, .h5, .h5, h6, .h6, .h6 {
  color: #57585a; }

h1, .h1, .h1 {
  font-size: 3rem;
  line-height: 1.25;
  letter-spacing: -0.025rem; }
  @media (max-width: 575.98px) {
    h1, .h1, .h1 {
      font-size: calc(1.425rem + 2.1vw); } }

h2, .h2, .h2 {
  font-size: 2.25rem;
  line-height: 1.3;
  letter-spacing: 0.05rem; }
  @media (max-width: 575.98px) {
    h2, .h2, .h2 {
      font-size: calc(1.35rem + 1.2vw); } }

h3, .h3, .h3 {
  font-size: 1.875rem;
  line-height: 1.375; }
  @media (max-width: 575.98px) {
    h3, .h3, .h3 {
      font-size: calc(1.3125rem + 0.75vw); } }

h4, .h4, .h4 {
  font-size: 1.5rem;
  line-height: 1.375; }
  @media (max-width: 575.98px) {
    h4, .h4, .h4 {
      font-size: calc(1.275rem + 0.3vw); } }

h5, .h5, .h5 {
  font-size: 1.25rem;
  line-height: 1.375; }
  @media (max-width: 575.98px) {
    h5, .h5, .h5 {
      font-size: 1.25rem; } }

h6, .h6, .h6 {
  font-size: 1rem;
  line-height: 1.625; }

p, .p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6; }

.lead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.625; }

h1, .h1, .h1, h2, .h2, .h2, h3, .h3, .h3 {
  font-weight: 700; }

h4, .h4, .h4, h5, .h5, .h5, h6, .h6, .h6 {
  font-weight: 600; }

h1, .h1, .h1, h2, .h2, .h2, h3, .h3, .h3, h4, .h4, .h4 {
  letter-spacing: -0.05rem; }

a {
  letter-spacing: -0.025rem;
  color: #000; }

.text-sm {
  line-height: 1.5; }

.text-xs {
  line-height: 1.25; }

p, .p {
  font-size: 1rem; }

.lead {
  font-size: 1.25rem; }

.text-lg {
  font-size: 1.125rem !important; }

.text-sm {
  font-size: 0.875rem !important; }

.text-xs {
  font-size: 0.75rem !important; }

.text-xxs {
  font-size: 0.65rem !important; }

p {
  line-height: 1.625;
  font-weight: 400; }

.text-sans-serif {
  font-family: "Open Sans" !important; }

.text-justify {
  text-align: justify !important; }

.text-wrap {
  white-space: normal !important; }

.text-nowrap {
  white-space: nowrap !important; }

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

.text-lowercase {
  text-transform: lowercase !important; }

.text-uppercase {
  text-transform: uppercase !important; }

.font-weight-light {
  font-weight: 300 !important; }

.font-weight-lighter {
  font-weight: lighter !important; }

.font-weight-normal {
  font-weight: 400 !important; }

.font-weight-bold {
  font-weight: 600 !important; }

.font-weight-bolder {
  font-weight: 700 !important; }

.font-italic {
  font-style: italic !important; }
  
.AccountMenu_opener-btn svg.AccountMenu_user-icon, .AccountMenu_toggle-content svg.AccountMenu_user-icon {
  width: 15px;
  height: 22px;
  color: #f9a81b!important;
}

.Containers_wrapper {
	margin: 0px!important;
	padding: 0px!important;
}

.Footer_title {
  color: #fff!important;
}
.Copyright_copyright{
  color: #fff!important;
}

.Button_btn, .Button_btn-base, .Button_btn-white, .Button_font {
  font-family: 'Zona Pro'!important;
  font-weight: bold !important;
  font-style: normal;
  font-size: 1.4em;
}
.btn-cnt {
  font-family: 'Zona Pro'!important;
  font-weight: bold !important;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.02em!important;
}

.SimpleNavigation_nav .SimpleNavigation_item a {
  color: #999;
  text-decoration: none;
  text-decoration-line: none;
  text-decoration-thickness: initial;
  text-decoration-style: initial;
  text-decoration-color: initial;
  transition: color .15s;
}
.Header_sticky-header .Header_middle-section .Header_search-box {
  width: 100%!important;
}
.HeaderContent_h1-holder h1 {
    font-size: 2.3em!important;
}
.PLP_b2b-panel-footer {
  padding: 40px 0 56px 0;
}

.ProductPrice_actual-price {
    font-size: 32px;
}

.RoleWithUs-lftbdr-title {
  padding: 8px 0 8px 20px;
  border-left: 6px solid #f9a81b;
}
.NewsOverview_side-header {
  margin-bottom: 1em!important;
}
.NewsOverview_side-header h3 {
  color: #f9a81b!important;
}
.NewsOverview_side-item {
  margin: .5em 0 1em .7em!important;
}
.card img {
  width: 100%!important;
  height: auto!important;
}
@media (min-width: 1400px) {
  .className{
    font-size: 0.7em !important;
    margin-right: 0px !important; }
  }

@media all and (max-width: 1200px) {
  .hide {
    display: none !important; } }

@media all and (max-width: 390px) {
  .className{
    font-size: 0.7em !important;
    margin-right: 0px !important; }
  }

@media all and (max-width: 364px) {
  .className{
    font-size: 0.7em !important;
    margin-right: 0px !important; }
  }

@media all and (max-width: 308px) {
  .className{
    font-size: 0.7em !important;
    margin-right: 0px !important; }
  }