@import url('https://fonts.googleapis.com/css?family=Exo+2:300,300i,400,700,700i&subset=latin-ext');
/*
 * Drupal styles overwrite
 */
.menu-item--collapsed,
.menu-item--expanded {
    list-style-image: none;
    list-style-type: none;
}
/*
 * Common
 */
body {
    font-size: 16px;
    font-family: 'Exo 2', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1 {
    font-size: 3rem;
    border-bottom: 1rem solid rgb(253, 236, 10);
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    max-width: 550px;
}

h2 {
    font-size: 2rem;
}

h2.slogan {
    margin: 0.75rem 1.5rem;
}

@media (min-width: 800px) {
    h2.slogan {
        font-size: 2.625rem;
        margin: 1.5rem 3rem;
    }
}

h3 {
    font-size: 1.75rem;
}

h3.slogan {
    font-size: 1.625rem;
    font-weight: normal;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 170%;
}

#block-sapim-content li,  #block-sapim-content ol {
    line-height: 170%;
}

.small {
    font-size: 0.8rem;
}

.center {
    text-align: center;
}

.text-yellow {
    color: rgb(253, 236, 10);
}

a {
    color: #000000;
    text-decoration: none;
}

@media (hover: hover) {
    a {
      border-bottom: 1px solid rgb(0, 0, 0);
    }

    a:hover {
      border-bottom: 1px solid rgb(253, 236, 10);
    }

    .menu--main a, .menu--top-menu-small a, .menu--footer a {
      border-bottom: none;
    }
}

img {
    max-width: 100%;
    height: auto;
}
/*
 * Layout
 */
header,
.paragraph--type--teasers,
.field--name-field-body > .field__item > .paragraph--type--rich-text,
.field--name-field-webform > .field__item > .paragraph--type--rich-text,
.paragraph--type--video,
.paragraph--type--pdf,
.paragraph--type--image-and-text > .field--name-field-image-and-text.columns-3,
.locations .paragraph--type--image-and-text,
.product .layout-content,
.about-us .layout-content,
.contact-message-feedback-form,
.field--type-webform,
footer {
    margin-left: 2%;
    margin-right: 2%;
}

@media (min-width: 1220px) {
    header,
    .paragraph--type--teasers,
    .field--name-field-body > .field__item > .paragraph--type--rich-text,
    .field--name-field-webform > .field__item > .paragraph--type--rich-text,
    .paragraph--type--image-and-text > .field--name-field-image-and-text.columns-3,
    .paragraph--type--video,
    .paragraph--type--pdf,
    .locations .paragraph--type--image-and-text,
    .product .layout-content,
    .about-us .layout-content,
    .contact-message-feedback-form,
    .field--type-webform,
    footer {
        margin-left: auto;
        margin-right: auto;
        max-width: 1200px;
    }
}
/*
 * Header
 */
header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.product header,
.about-us header{
    padding-bottom: 1rem;
    border-bottom: 1px solid #0f0f0f;
    margin-bottom: 5rem;
}

.block-system-branding-block {
    margin-top: 1.75rem;
}

.mobile-trigger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 1rem;
    margin-right: 0.5rem;
}

.menus .region-header {
    display:none;
}

.menus .fa-times {
    display: none;
}

.menus.visible .fa-times {
    display: block;
    z-index:2;
    margin-top: 0.5rem;
}

.menus.visible .region-header {
    display: block;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(255,255,255);
    z-index: 1;
    border-bottom: 1rem solid rgb(252, 240, 13);
}

header ul.menu li {
    display: block;
    font-size: 1.7rem;
    line-height: 2rem;
}

header ul.menu ul.menu li {
    font-size: 1.2rem;
}

header .menu-item {
    padding-top: 0;
}

@media (min-width: 800px) {
    .mobile-trigger {
        display: none;
    }

    .menus .region-header {
        display:block;
    }

    header .menu--main ul.menu {
      text-align: right;
    }

    header ul.menu li {
        font-size: 1rem;
        display: inline-block;
    }

    header ul.menu ul.menu {
        display: none;
    }

    header .menu--main ul.menu a {
        font-weight: bold;
    }

    .menu--top-menu-small ul.menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-top: 1.75rem;
        line-height: 100%;
    }

    .menu--main ul.menu li:not(:last-child) {
        margin-right: 2rem;
    }

    .menu--top-menu-small ul.menu li:not(:last-child) {
        border-right: 1px solid rgb(0,0,0);
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .menu--top-menu-small ul.menu li:last-child {
        padding-left: 0.5rem;
    }
}
.user-login-form,
.tabs.primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
/*
 * Content
 */
/* -------------- Paragraphs ------------ */
.field--name-field-body > .field__item > .paragraph--type--teasers,
.field--name-field-body > .field__item > .paragraph--type--pdf,
.field--name-field-body > .field__item > .paragraph--type--rich-text {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.field--name-field-body > .field__item > .paragraph--type--video {
    margin-top: 3rem;
    margin-bottom: 4rem;
}
@media (min-width: 800px) {
    .field--name-field-body > .field__item > .paragraph--type--teasers,
    .field--name-field-body > .field__item > .paragraph--type--pdf,
    .field--name-field-body > .field__item > .paragraph--type--rich-text {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    .field--name-field-body > .field__item > .paragraph--type--video {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
}
.product .field--name-field-body > .field__item > .paragraph--type--teasers,
.product .field--name-field-body > .field__item > .paragraph--type--rich-text,
.about-us .field--name-field-body > .field__item > .paragraph--type--rich-text {
    margin-top: 0;
    margin-bottom: 0;
}

.paragraph--type--teasers .field--name-field-teaser {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.paragraph--type--teaser .teaser__link {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    display: inline-block;
    margin-bottom: 1rem;
    border-bottom: none;
}

.paragraph--type--teaser .teaser__image {
    position: relative;
}

@media (min-width: 600px) {
    .paragraph--type--teaser .teaser__no-link {
        border-right: 1px solid rgb(197, 197, 197);
    }
}

@media (min-width: 800px) {
    .paragraph--type--teaser a img {
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        filter: gray;
    }

    .field--name-field-teaser a:hover img {
        -webkit-filter: none; /* Safari 6.0 - 9.0 */
        filter: none;
    }
}

.paragraph--type--teaser .teaser__text {
    background-color: rgb(252, 240, 13);
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    display: block;
    padding: .5rem;
    margin-top: -1px;
}

.paragraph--type--teaser .field--name-field-text {
    text-align: center;
    font-weight: bold;
}

.paragraph--type--full-width-image img {
    width: 100%;
    height: auto;
}

.field--name-field-image-and-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (min-width: 1000px) {
  .field--name-field-image-and-text {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .field--name-field-image-and-text .field__item:not(:last-child) {
    margin-right: 2%;
  }

  .field--name-field-image-and-text.columns-3 > .field__item {
    margin-right: 0;
    width: 33%;
    padding-left: 1%;
    padding-right: 1%;
  }


}

.product .field--name-field-image-and-text.columns-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 20% 80%;
    grid-template-columns: 20% 80%;
}

.product .field--name-field-image-and-text.columns-2 .field__item:first-child {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
}

.product .field--name-field-image-and-text.columns-2 .field__item:last-child {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
}

@media (min-width: 800px) {
    .paragraph--type--image-and-text > .field--name-field-image-and-text.columns-2 > .field__item:not(:last-child) {
        padding-right: 1rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .locations .paragraph--type--image-and-text > .field--name-field-image-and-text.columns-2 > .field__item {
      width: 50%;
    }
}

.video-embed-field-provider-youtube,
.video-embed-field-provider-vimeo {
    max-width: 720px;
    margin: 0 auto;
}

table.distributor-list thead td {
    font-weight: bold;
}

table.distributor-list td {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}
table.distributor-list {
    width: 100%;
}

table.history td {
    vertical-align: top;
}

table.history td:first-child {
    padding-right: 2rem;
}

table.history td:last-child {
  padding-left: 2rem;
}

table.history td:first-child, table.history td:last-child {
  width: 42%;
}

table.history td:nth-child(2) {
  text-align: center;
  border-left: 3px solid rgb(253, 236, 10);
  border-right: 3px solid rgb(253, 236, 10);
  position: relative;
}

table.history tr:nth-child(odd) td:nth-child(2):before {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgb(253, 236, 10);
  content: '';
  position: absolute;
  top: 3px;
  left: -12px;
}

table.history tr:nth-child(even) td:nth-child(2):after {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  content: '';
  top: 3px;
  right: -12px;
  position: absolute;
  border-left: 10px solid rgb(253, 236, 10);
}

.field--type-webform .form-type-textfield,
.field--type-webform .form-type-select,
.field--type-webform .form-type-tel,
.field--type-webform .form-type-email,
.field--type-webform .form-type-textarea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.field--type-webform label {
    width: 7rem;
}

.captcha {
  width: fit-content;
}

.field--type-webform .select2-container {
    width: 100% !important;
}

.field--type-webform .form-tel,
.field--type-webform .form-email,
.field--type-webform .form-text,
.field--type-webform .form-textarea {
    width: 100%;
}

@media(min-width: 640px){
    .field--type-webform .select2-container {
        width: 42.5% !important;
    }

    .field--type-webform .form-tel,
    .field--type-webform .form-email,
    .field--type-webform .form-text {
        width: 42%;
    }
}


.field--type-webform input, .field--type-webform textarea {
    border-radius: 5px;
}

.field--type-webform .form-submit {
    padding: 0.6rem;
    background-color: rgb(253, 236, 10);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.field--type-webform .form-submit:hover {
    color: rgb(253, 236, 10);
    background-color: #000;
}

.locations .paragraph--type--image-and-text  {
    margin-bottom: 2rem;
}

#mapid {
    display: none;
}

@media (min-width: 800px) {
    #mapid {
        display: block;
    }
}

.path-contact label {
  display: block;
}

.path-contact input,
.path-contact textarea {
  border: 2px solid #000;
}

.path-contact #edit-submit {
  text-transform: uppercase;
  background-color: rgb(253, 236, 10);
  padding: 6px 15px;
  font-weight: bold;
  border: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.path-contact input#edit-submit:hover {
  background-color: #000;
  color: #fff;
}



@media (min-width: 800px) {
  .path-contact .form-item,
  .path-contact .form-actions,
  .path-contact #block-sapim-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .path-contact #block-sapim-content {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .path-contact .form-actions {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .path-contact label {
    display: inline-block;
    width: 24%;
  }
}

.g-recaptcha {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
/* -------------- Tables ------------ */
@media (max-width: 800px) {
    table.tools td:before {
        counter-increment: tools;
        content: counter(tools);
        display: inherit;
    }

    table.tools tr {
        counter-reset: tools;
    }

    table.tools td,
    table.distributor-list td {
        display: block;
    }

    table.distributor-list thead {
        display: none;
    }

    table.distributor-list tbody tr:not(:last-child) {
        border-bottom: 1px solid rgb(0,0,0);
    }

    table.distributor-list td:nth-of-type(1):before { content: "Company: "; }
    table.distributor-list td:nth-of-type(2):before { content: "Country: "; }
    table.distributor-list td:nth-of-type(3):before { content: "Phone: "; }
    table.distributor-list td:nth-of-type(4):before { content: "E-mail: "; }
    table.distributor-list td:nth-of-type(5):before { content: "Website: "; }
}
/* -------------- Menus ------------ */
main .menu--main {
    display: none;
}

@media (min-width: 800px) {
    .menu--about-us > .menu > .menu-item > a,
    main .menu--main > .menu > .menu-item > a {
        font-weight: bold;
        font-size: 1.5rem;
    }

    .main .menu--main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .menu--about-us > .menu > .menu-item,
    main .menu--main > .menu > .menu-item {
        margin-bottom: 1rem;
    }

    main .menu--main .menu-item--expanded .menu-item,
    .menu--about-us .menu-item--expanded .menu-item {
        margin-top:1rem;
    }

    main .menu--main > .menu {
        margin-left: 0;
    }

    main .menu--main .menu-item--expanded .menu,
    .menu--about-us .menu-item--expanded .menu {
        margin-left: 2.5rem;
    }

    .product .layout-content > .region-content,
    .about-us .layout-content > .region-content {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 25% 75%;
        grid-template-columns: 25% 75%;
    }

    .product .block-system-main-block,
    .about-us .block-system-main-block {
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 2;
        grid-column: 2;
        padding-left: 5rem;
    }

     main .menu--main,
    .menu--about-us {
        display: block;
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 1;
        grid-column: 1;
        border-right: 1px solid #0f0f0f;
    }
}

/* -------------- Icons ------------ */
p.mapLink .svg-inline--fa {
    margin-left: -1.2rem;
}
p.mapLink {
    padding-left: 1.2rem;
}
/*
 * Footer
 */
footer {
    text-align: center;
    color: #777;
}

footer a {
    color: #777;
    line-height: 100%;
}

.product footer,
.about-us footer {
    margin-top: 5rem;
    padding-top: 5rem;
    border-top: 1rem solid rgb(253, 236, 10);
}

.menu--footer ul.menu li {
    display: block;
    text-align: center;
    line-height: 2rem;
}

@media (min-width: 800px) {
    .menu--footer ul.menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0.5rem 0 2rem;
    }

    .menu--footer ul.menu li {
        display: inline-block;
        line-height: 1rem;
    }

    .menu--footer ul.menu li:not(:last-child) {
        border-right: 1px solid #000000;
        padding-right: 0.3rem;
        padding-left: 0.3rem;
    }

    .menu--footer ul.menu li:last-child {
        padding-left: 0.3rem;
    }
}